/* =================================
   Sharp Lawn Care - Christmas Lights page styles

   Page-scoped stylesheet, linked after styles1.1.css on:
     /christmas-lights/
     /christmas-lights/sioux-falls-sd/
     /christmas-lights/sioux-city-ia/

   Contains the sticky mobile CTA bar rules. These were copied from the
   homepage work in styles1.1.css so the Christmas pages do not depend on that
   (still unshipped) change; REBUILD 2 repaints the bar to the night ground
   and swaps the price fill to the 3:1 orange (components-v2 9.2). Structure,
   z-index 97, the 65px height, the modal and footer compensation all stay.
   ================================= */

/* Single source of truth for the sticky bar rendered height:
   1px border-top + 0.5rem + 48px button + 0.5rem = 65px. */
:root {
  --mcb-height: 65px;
}

/* =================================
   Sticky mobile CTA bar (visible below 992px only)

   Markup contract (authored in the page HTML):
   <div id="mobile-cta-bar">
     <button type="button" class="mcb-call" aria-expanded="false"
             aria-controls="cl-callsheet">Call Us</button>
     <a class="mcb-quote toggleDeepLawn" href="javascript:void(0)">...</a>
   </div>
   (city pages: the mcb-call is an <a href="tel:...">)

   Stacking: z-index 97 sits below #nav (99) and below the quote modal (999).
   NEVER two saturated buttons: the call button is dark navy, the price button
   is the one orange object in the bar.
   ================================= */
#mobile-cta-bar {
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 97;
  background-color: rgba(5, 10, 22, 0.96);
  border-top: 1px solid rgba(157, 180, 232, 0.2);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.35);
  padding: 0.5rem 0.75rem;
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
}

#mobile-cta-bar .mcb-call,
#mobile-cta-bar .mcb-quote {
  box-sizing: border-box;
  flex: 1 1 50%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Titillium Web", sans-serif;
  font-size: 16px;
  line-height: 1.15;
  font-weight: 700;
  color: #fefefe;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  padding: 0.5rem 0.75rem;
  margin: 0;
  cursor: pointer;
  transition: background-color 250ms ease;
}

/* Call Us: dark navy, never a second saturated button */
#mobile-cta-bar .mcb-call {
  background-color: #16264f;
  border: 1px solid rgba(157, 180, 232, 0.28);
}
#mobile-cta-bar .mcb-call:hover,
#mobile-cta-bar .mcb-call:focus,
#mobile-cta-bar .mcb-call[aria-expanded="true"] {
  background-color: #1d3465;
  color: #fefefe;
}

/* Pricing CTA: orange is reserved for quote/pricing actions. The fill is the
   3:1 orange (#f26200) so the white label passes the large-text floor, and
   the label is 19.2px (1.2rem) because 3.22:1 is only a pass for LARGE text:
   white on an orange fill is never under 19.2px (brief D3, components 4.1). */
#mobile-cta-bar .mcb-quote {
  background-color: #f26200;
  font-size: 1.2rem;
}
#mobile-cta-bar .mcb-quote:hover,
#mobile-cta-bar .mcb-quote:focus {
  background-color: #e65f00;
  color: #fefefe;
}

/* Branch picker sheet, opens directly above the bar (legacy hook; the hub
   uses #cl-callsheet, section 12.6, instead) */
#mobile-cta-bar #mcb-call-options {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: absolute;
  right: 0.75rem;
  bottom: 100%;
  left: 0.75rem;
  z-index: 97;
  background-color: #0a1226;
  border: 1px solid rgba(157, 180, 232, 0.2);
  border-radius: 8px;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.35);
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}
#mobile-cta-bar #mcb-call-options[hidden] {
  display: none;
}
#mobile-cta-bar #mcb-call-options a {
  box-sizing: border-box;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Titillium Web", sans-serif;
  font-size: 16px;
  line-height: 1.15;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  background-color: #2f53a2;
  border: 1px solid rgba(157, 180, 232, 0.2);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
}
#mobile-cta-bar #mcb-call-options a:hover,
#mobile-cta-bar #mcb-call-options a:focus {
  background-color: #24408a;
  color: #ffffff;
}

/* Desktop never shows the bar */
@media (min-width: 992px) {
  #mobile-cta-bar {
    display: none;
  }
}

/* The quote modal owns the screen while it is open */
body.modal-open #mobile-cta-bar {
  display: none;
}

/* Keep footer content clear of the bar on pages that carry it.
   --mcb-height is the bar's real rendered height; the extra 1rem is
   breathing room, and env() matches the inset the bar adds to itself. */
@media (max-width: 991px) {
  body:has(#mobile-cta-bar) #app > footer.container {
    padding-bottom: calc(var(--mcb-height) + 1rem + env(safe-area-inset-bottom));
  }
}

/* The Christmas pages carry their own inline toggleDeepLawn(), which sets
   overflow on <body> but does not add the .modal-open class the homepage uses.
   Hide the bar while that modal is open. */
body:has(.modal-deep-lawn.is-active) #mobile-cta-bar {
  display: none;
}

/* ==========================================================================
   THE REVEAL - Christmas design system  (REBUILD 2, Phase 1, 2026-09-02)
   Everything below is scoped to body.layout-christmas so nothing leaks to the
   other 490+ pages. This file loads after styles1.1.css, so equal-specificity
   rules win on cascade order; where the framework needs beating on specificity
   the selector is prefixed with body (adds one class) and the reason is
   commented. Every !important in this file is forced by a framework rule that
   already carries !important, or by an inline style written by
   template1.2.js, or is the spec-sanctioned reduced-motion block. There are
   no discretionary !important declarations.

   THE FOUR FORCED !important DECLARATIONS (audit, components-v2 section 0):
     1  body.layout-christmas { padding-top: 0 !important }
        The framework ships .layout-christmas{padding-top:165px !important}.
        REBUILD 2 sets it to ZERO at every width (it used to be 96px from 1024
        and 148px in the 1024-1123 band): the nav is now transparent over the
        hero and the hero starts at y=0 under it, so the hero absorbs the nav
        height into its own photograph. --cl-nav-h (64 / 148 / 96) still
        drives scroll-margin-top, the plate's top scrim stop and the desktop
        call-sheet anchor.
     2  header.background-image { background-image: none !important }
        AssignBackgrounds() in template1.2.js writes background-image as an
        INLINE style, and only !important undoes an inline declaration.
     3  header p { display: block }  (no !important needed, but forced by the
        framework's header p:not(.has-button){display:none}, which has hidden
        every hero deck since launch; this wins at (0,1,3)).
     4  img { height: auto !important } in styles1.1.css hits every
        object-fit:cover photo, so the cover-fill image list in section 8.1
        carries height:100% !important. Any new cover-fill image class must be
        added to that list.
   NONE OF THESE IS VISIBLE UNTIL IT IS MISSING.

   THREE DELIBERATE DEPARTURES FROM CLAUDE.md, RECORDED HERE.
     a) CLAUDE.md section 25's two-id rule (id="header-row" on the <header>
        AND on the inner row) is NOT followed on the three Christmas pages.
        Measured in styles1.1.css: header.container #header-row is a
        DESCENDANT selector, so an id on the <header> itself matches nothing
        and buys neither the z-index nor any padding. And styles1.1.css also
        carries .layout-christmas header #header-row{padding:5rem 0 0 0} plus
        10rem, 15rem, 20rem and 25rem at ascending breakpoints; section 2 of
        this file neutralises it at (1,1,1) with
          body.layout-christmas header #header-row,
          body.layout-christmas header.cl-hero { padding: 0; }
        so an id on the INNER row would let that neutraliser beat
        .cl-hero-inner's own padding and silently zero the hero stack padding.
        The pages carry ZERO id="header-row" attributes. .cl-hero declares
        position:relative and z-index:2 itself (section 8.1). Critic X1.
     b) CLAUDE.md section 9's <picture> ban has ONE scoped exception: the hero
        photograph on the three Christmas pages (orchestrator ruling B4). The
        phone plate is a 4:3 crop and the desktop master is the 16:9 frame,
        and no single sizes string can serve a plate under 760 CSS px at every
        DPR while serving a master at 760 and up. The contract is:
          <picture>
            <source media="(min-width:760px)"
                    srcset="..._w1280.webp 1280w, ..._w1440.webp 1440w,
                            ..._w1920.webp 1920w[, ..._w2560.webp 2560w]"
                    sizes="100vw">
            <img class="cl-hero-img" fetchpriority="high" decoding="async"
                 src="...-plate43_w780.webp"
                 srcset="...-plate43_w480.webp 480w, ..._w640.webp 640w,
                         ..._w780.webp 780w, ..._w960.webp 960w,
                         ..._w1290.webp 1290w, ..._w1560.webp 1560w"
                 sizes="100vw" width="780" height="585" alt="...">
          </picture>
        width/height match the src fallback; the CSS aspect-ratio on
        .cl-hero-media owns the box, so the attributes never drive layout.
        The _w2560 master ships only where the file is under 380 KB. A preload,
        if any, uses imagesrcset plus media so the same file is fetched
        exactly once. Every descriptor comes from assets-manifest.json.
        Nothing else on the site may use <picture>.
     c) The Trends grid classes are not used inside .cl-* components; the
        Christmas system uses raw px queries scoped to body.layout-christmas.

   Contract for page builders: C:/tmp/sharp-christmas-seo/rebuild2/components-v2.txt
   Section map:
     0  Sticky mobile CTA bar (top of file, pre-system, night ground)
     1  Tokens
     2  Framework overrides (nav, header, book strip, service-container safety)
     3  Type scale
     4  Grounds and bands
     5  Photo plates and scrims (KEEP)
     6  Decorative devices (the V3 strand PARTS A, B, C, D, F; list markers;
        comparison marks)
     7  Buttons and links
     8  Components (hero, eyebrow, breadcrumb, offer strip, splits, bleeds,
        panels, duo, ladder, timeline, chips, price, lease, faq, faq aside,
        proof, gallery, mosaic, video, january, towns, close, form scope,
        lead form, offer band, price anchor)
     9  Motion
    11  Shared fix pack (nav band, quote card, expand rows, comparison
        cards, fallback font metrics, footer, copy over a photograph)
    12  Polish stage (badge and seal, chrome icon sizes, call sheet, vendor
        form, phone footer, copy rows, sticky-bar hooks)
    13  Consolidation (phone snap rail, verify aside, phone footer)
    APPEND regions for the three page builders, at the very end.

   HOW TO ADD A RULE. Put it with the component it belongs to, not in a new
   trailing section. A page-only rule goes in that page's APPEND region.

   TWO THINGS THAT WILL BITE YOU.
   a) position:sticky is inert on every page of this site. An ancestor of every
      section (the sitewide #app wrapper) computes overflow:hidden, which makes
      the wrapper the nearest scrollport rather than the viewport. Measured at
      1440 on a sticky .cl-card: viewport top 124 at scrollY 1400, -276 at
      1800. Do not reach for it.
   b) A text-shadow list REPLACES, it does not merge. Every new element set
      over a hero photograph has to be added to the selector lists in 11.15 and
      12.10 by hand, or it silently loses its ground the moment it crosses a
      lit bulb.
   ========================================================================== */

/* ---------- 1. TOKENS ------------------------------------------------- */
/* Names keep the --cl- prefix so the page HTML and the existing rules do not
   churn; this is a VALUE diff against the BLUE HOUR sheet. Every value here is
   from brief section 1.2 to 1.5 / reveal-anatomy/tokens.json, with its
   contrast against the ground it is meant for measured there. */
body.layout-christmas {
  /* Night ladder. Steps against #050a16 measure 1.06, 1.18 and 1.34:1, which
     is the point: one night, one paper island, not six tonal flips. */
  --cl-night-900: #050a16;   /* page ground, hero letterbox, footer, gradient end */
  --cl-night-800: #0a1226;   /* deep band mid stop, review card fill */
  --cl-night-700: #101c3c;   /* the close band, the one lifted night */
  --cl-night-600: #16264f;   /* dark button fill, card edge */
  /* Warm light */
  --cl-bulb: #ffd48a;        /* eyebrows, section rules, badge line 1   14.17:1 */
  --cl-amber-hot: #ffb547;   /* stars, focus ring, glow centres         11.26:1 */
  --cl-bulb-hot: #fff3d0;    /* artwork only, never type */
  --cl-halo: rgba(255, 200, 110, 0.28);   /* band ambience (porch lamp) */
  /* Paper */
  --cl-paper-bg: #f5f7fb;    /* the one bright band */
  --cl-paper-2: #e8edf6;     /* lease panel fill */
  --cl-paper-card: #ffffff;  /* price card fill */
  --cl-paper-edge: #d9e0ee;  /* 1px card border on paper */
  --cl-paper-hair: #e2e7f2;  /* hairline inside a white card */
  --cl-ink: #111a2e;         /* headings on paper                       16.17:1 */
  --cl-ink-body: #3f4a5f;    /* body on paper                            8.20:1 */
  --cl-ink-soft: #54607a;    /* secondary on white                       6.30:1 */
  --cl-ink-list: #33405a;    /* included-list rows on white             10.39:1 */
  /* Text on night */
  --cl-head: #ffffff;
  --cl-text: #cfd9ef;        /* body                                    13.97:1 */
  --cl-text-lead: #e9eefb;   /* decks and leads                         17.04:1 */
  --cl-text-dim: #9fadcb;    /* captions, meta                           8.77:1 */
  --cl-text-legal: #7787a8;  /* footer legal only                        5.48:1 */
  /* Brand, enforced */
  --cl-blue: #2f53a2;        /* phone paths, paper links, lease rule     6.80:1 */
  --cl-blue-lift: #7d9bea;   /* section numerals on night                7.30:1 */
  --cl-green: #73be0f;       /* check marks ON NIGHT ONLY                8.57:1 */
  --cl-green-ink: #4b7a0a;   /* check marks on paper and white     4.79 / 5.14:1 */
  --cl-red: #c8102e;         /* guarantee seal disc only */
  --cl-red-lift: #ff8f93;    /* the Nov 15 chip numeral                  8.99:1 */
  /* CTA. --cl-orange is the brand hue and still the name of the colour.
     --cl-orange-fill is the fill actually painted behind a WHITE label: white
     on #ff6900 measures 2.89:1 and misses the 3:1 large-text floor; #f26200
     measures 3.22:1 and is a 2.4 percent darkening (decision C6). */
  --cl-orange: #ff6900;
  --cl-orange-fill: #f26200;
  --cl-orange-hover: #e65f00;
  /* Rules */
  --cl-rule: rgba(157, 180, 232, 0.20);        /* every hairline on night */
  --cl-rule-warm: rgba(255, 212, 138, 0.40);   /* figure corner bracket, panel rule */
  --cl-rule-paper: rgba(47, 83, 162, 0.35);    /* the same bracket on paper */
  /* Per-page identity accent (section numerals, figure bracket, panel rule).
     hub --cl-bulb (default here); SF --cl-blue-lift; SC --cl-amber-hot. The
     page sets it on its body class in <style id="cl-page">. */
  --cl-accent: var(--cl-bulb);

  /* Type */
  --cl-font-text: "Titillium Web", Arial, Helvetica, sans-serif;
  --cl-font-display: "Teko", "Titillium Web", Arial, sans-serif;
  --cl-h1: clamp(2.25rem, 7.2vw, 6.4rem);       /* 390:36  768:55.3  1440:102.4 */
  --cl-h2: clamp(2rem, 4.6vw, 3.5rem);          /* 390:32  1440:56 */
  --cl-h3: clamp(1.35rem, 2.4vw, 1.7rem);       /* 390:21.6  1440:27.2 */
  --cl-lead: clamp(1.02rem, 1.55vw, 1.2rem);    /* 390:16.32  1440:19.2 */
  --cl-body: 17px;
  --cl-eyebrow: clamp(0.86rem, 1.5vw, 1.02rem); /* 390:13.76  1440:16.32 */
  --cl-caption: 0.83rem;
  --cl-micro: 0.94rem;
  --cl-bignum: clamp(3rem, 8vw, 4.6rem);        /* 390:48  1440:73.6 */

  /* Space */
  --cl-band-y: clamp(3.6rem, 8vw, 6.5rem);      /* 390:57.6  1024:81.9  1300+:104 */
  --cl-band-y-tight: clamp(3.6rem, 8vw, 6rem);  /* 390:57.6  1440:96 */
  --cl-gap-split: clamp(1.8rem, 4vw, 3.4rem);
  --cl-gap-grid: clamp(2rem, 4vw, 3rem);
  --cl-gap-cards: 1.3rem;
  --cl-gap-tiles: 0.7rem;
  --cl-pad-card: clamp(1.5rem, 3.4vw, 2.4rem);
  --cl-pad-panel: clamp(1.3rem, 3vw, 1.9rem);
  --cl-shell: min(1180px, 100% - 2.6rem);
  --cl-shell-wide: min(1520px, 100% - 3rem);    /* photo bands and galleries */
  --cl-shell-text: min(760px, 100% - 2.6rem);   /* centred closes and January */
  --cl-gutter: 20px;                            /* kept for full-bleed exceptions */
  --cl-max: 1280px;                             /* legacy alias, no new use */
  --cl-nav-h: 64px;                             /* 148 at 1024-1279, 96 from 1280 */

  /* Radii. --cl-radius (10px) is RETIRED; the only 6 to 12px radii left are
     the two sitewide chrome exceptions, the nav pill and the sticky bar. */
  --cl-r-1: 2px;     /* photos, panels, town chips, gallery tiles, lease box */
  --cl-r-2: 3px;     /* buttons, cards, date chips, review cards, video, form */
  --cl-r-disc: 50%;  /* HTML badge, HTML seal, play disc */
  /* LEGACY NAME, RETIRED VALUE. Two byte-identical KEEP blocks (8.18 the form
     scope, 11.8 the comparison card) still read var(--cl-radius). Left
     undefined, both would compute to 0. The name stays as an alias of --cl-r-2
     so they take the 3px card radius; no new rule may use it. */
  --cl-radius: var(--cl-r-2);

  /* Shadows and halos */
  --cl-shadow-photo: 0 30px 70px -32px rgba(0, 0, 0, 0.95);
  --cl-shadow-card: 0 26px 60px -40px rgba(16, 28, 60, 0.55);
  --cl-shadow-cta: 0 14px 34px -14px rgba(255, 105, 0, 0.9);
  --cl-shadow-cta-hover: 0 0 40px -6px rgba(255, 140, 40, 0.75), 0 16px 38px -14px rgba(255, 105, 0, 1);
  --cl-shadow-sheet: 0 18px 44px -12px rgba(0, 0, 0, 0.7);
  --cl-shadow-badge: 0 10px 26px -10px #000;
  --cl-glow-word: 0 0 26px rgba(255, 181, 71, 0.55), 0 0 60px rgba(255, 181, 71, 0.28);
  --cl-glow-disc: 0 0 46px -6px rgba(255, 140, 40, 0.8);
  --cl-glow-dot: 0 0 9px 2px rgba(255, 181, 71, 0.6);
  --cl-glow-badge: drop-shadow(0 0 24px rgba(255, 181, 71, 0.25));
  /* Type over a photograph, three tiers (11.15 and 12.10 use them). */
  --cl-shadow-onphoto: 0 0 34px rgba(3, 7, 16, 0.85), 0 2px 20px rgba(0, 0, 0, 0.6);
  --cl-shadow-onphoto-2: 0 2px 16px rgba(0, 0, 0, 0.7);
  --cl-shadow-onphoto-3: 0 2px 12px rgba(0, 0, 0, 0.8);

  /* Motion */
  --cl-ease: cubic-bezier(0.16, 0.75, 0.2, 1);

  background-color: var(--cl-night-900);
  color: var(--cl-text);
}
@media (min-width: 1024px) and (max-width: 1279px) {
  body.layout-christmas { --cl-nav-h: 148px; }
}
@media (min-width: 1280px) {
  body.layout-christmas { --cl-nav-h: 96px; }
}
/* Every anchor lands under the nav, never behind it. --cl-nav-h measures 148
   at 1024 x 768, so this is never the Reveal's flat 86px. */
body.layout-christmas [id] {
  scroll-margin-top: calc(var(--cl-nav-h) + 24px);
}
/* ---------- 2. FRAMEWORK OVERRIDES ------------------------------------ */

/* No white or lawn-blue flash between bands.
   Framework: .layout-service #main-container{background-color:#3655a5}. */
body.layout-christmas #app,
body.layout-christmas #main-container {
  background-color: var(--cl-night-800);
}

/* The lawn book promo bar is not the first message on a Christmas page. */
body.layout-christmas .book-trust-strip,
body.layout-christmas .book-callout-inline,
body.layout-christmas .book-callout-large {
  display: none;
}

/* NAV: the ground changes, the nav does not. REBUILD 2 (brief 1.11).
   DEFAULT STATE, over the hero: transparent, no image, no shadow. The logo is
   already the white variant on these pages and the menu labels are --cl-text;
   legibility comes from the hero scrim's rgba(5,10,22,.82) top stop, which
   covers exactly the 64px the nav occupies on a phone.
   The framework paints #3554a4 + blue-water.png at 165px with the video
   strip, and #nav{transition:all 500ms}; both are replaced here. */
body.layout-christmas #nav {
  height: 64px;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
/* STUCK STATE, class .cl-nav-stuck added by christmas-lead.js once scrollY
   passes 60. Never .92 alpha with no blur: menu text over a passing
   photograph is unreadable, so the no-backdrop-filter fallback is solid. */
body.layout-christmas #nav.cl-nav-stuck {
  background-color: rgba(5, 10, 22, 0.92);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  box-shadow: 0 1px 0 rgba(157, 180, 232, 0.18);
}
@supports not (backdrop-filter: blur(1px)) {
  body.layout-christmas #nav.cl-nav-stuck {
    background-color: #060d1e;
  }
}
body.layout-christmas #nav .inner {
  max-width: 1800px;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 0 var(--cl-gutter);
}
body.layout-christmas #nav .nav-video-bg,
body.layout-christmas #nav .video-logo {
  display: none;
}
body.layout-christmas #nav .logo {
  display: block;
  background-color: transparent;
  padding: 0.5rem 0;
}
body.layout-christmas #nav .logo:before {
  display: none;
}
body.layout-christmas #nav .logo img.light {
  display: block;
}
body.layout-christmas #nav .logo img.dark {
  display: none;
}
body.layout-christmas #nav .nav-toggle span,
body.layout-christmas #nav .nav-toggle span::before,
body.layout-christmas #nav .nav-toggle span::after,
body.layout-christmas #nav .nav-toggle:before,
body.layout-christmas #nav .nav-toggle:after {
  background-color: var(--cl-bulb);
}
body.layout-christmas #nav .nav-call svg {
  fill: var(--cl-bulb);
}
/* ---------- PART B. THE NAV HAIRLINE ----------------------------------- */
/* Same artwork, hung off the bottom edge of the blue band. It sits entirely
   BELOW the band so it never crosses a menu label, and it is
   pointer-events:none so it never eats a click on the nav. */
body.layout-christmas #nav:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -8.5em;
  left: 0;
  height: 8.5em;
  font-size: 3px;
  line-height: 0;
  pointer-events: none;
  background-repeat: repeat-x;
  background-size: var(--clb-tw) 8.5em;
  background-position: var(--clb-bpx) 0;
  background-image: var(--clb-tile);
}
@media (min-width: 768px) {
  body.layout-christmas #nav:after { font-size: 4px; }
}


/* THE PHONE DRAWER. Under 1024 the framework renders #nav nav as a fixed
   drawer painted #24539f with #73be44 sub-menus: the two lawn-brand bands
   this system bans. Repaint the drawer to the night ground, and give every
   drawer row a 44px target. Measured before: the sub-menu rows
   (#nav nav>ul>li>ul>li>a, padding 5px 0) were 30px tall on all three pages
   against the 44px floor; 11.13 already covers the top-level rows. */
@media (max-width: 1023px) {
  body.layout-christmas #nav nav {
    background-color: rgba(5, 10, 22, 0.97);
  }
  body.layout-christmas #nav nav > ul > li > ul {
    background-color: var(--cl-night-700);
    border-radius: var(--cl-r-2);
  }
  body.layout-christmas #nav nav ul li a:not(.button) {
    color: var(--cl-text);
  }
  body.layout-christmas #nav nav > ul > li > ul > li > a,
  body.layout-christmas #nav nav > ul > li > .mega a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }
}
/* THE PILL. styles1.1.css hides the sitewide "Instant Pricing" pill on the
   Christmas layout (.layout-christmas #nav nav>ul>li>a.button{display:none})
   and shows the stray .quote-button instead. The stray element is DELETED on
   these three pages (CLAUDE.md 25 defect, orchestrator X7), so the pill comes
   back. It keeps its sitewide label and class; only its face is restated. The
   8px radius is one of the two sitewide chrome exceptions to the 2 to 3px rule
   (brief 1.5). */
body.layout-christmas #nav nav > ul > li > a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-family: var(--cl-font-text);
  /* 19.2px: white on the 3.22:1 orange fill passes only as LARGE text
     (brief D3, components-v2 4.1). */
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  background-color: var(--cl-orange-fill);
  border-color: var(--cl-orange-fill);
  border-radius: 8px;
  padding: 0.6rem 1.15rem;
}
body.layout-christmas #nav nav > ul > li > a.button:hover,
body.layout-christmas #nav nav > ul > li > a.button:focus {
  color: #ffffff;
  background-color: var(--cl-orange-hover);
  border-color: var(--cl-orange-hover);
}
body.layout-christmas #nav .quote-button {
  display: none;
}
/* THE PHONE GLYPH. 24px, not the framework's 20 (1.25rem): the monoline SVG
   at stroke 2 on a 32 box draws 1.25px at 20px, which is more antialiasing
   than ink (brief 7.4 I1). */
body.layout-christmas #nav .nav-call svg {
  width: 24px;
  height: 24px;
}
/* .cl-nav-tel: the number in full, visible from 768. Titillium 700 at
   1.02rem, white, 44px min-height, 17px amber handset glyph. The one real
   ADDITION to the nav markup. MARKUP: an <a class="cl-nav-tel"> placed in
   #nav .inner directly after .nav-call (NOT inside nav#nav-menus: under 1024
   that element is the fixed drawer at opacity 0, and nothing inside it can be
   seen while the menu is closed). 768 to 1023 it sits left of the 60px phone
   glyph; from 1024 it is a flex item beside the menu.
     <a class="cl-nav-tel" href="tel:(605) 251-6880">
       <svg class="cl-nav-tel-glyph" aria-hidden="true" ...></svg>
       (605) 251-6880
     </a>
   On the hub, where no single branch may be dialled, the builder renders it
   as a <button class="cl-nav-tel nav-call"> that opens #cl-callsheet. */
body.layout-christmas #nav .cl-nav-tel {
  display: none;
  /* The hub renders this control with class nav-call as well (so the call
     sheet script binds it), and the framework's #nav .nav-call rule then
     paints it as a 60px absolute box at right:0 that clips the label. Reset
     that geometry here at (1,2,1); the 768-1023 rule below restates the one
     absolute placement this control actually wants. */
  position: static;
  top: auto;
  right: auto;
  width: auto;
  height: auto;
  transform: none;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  font-family: var(--cl-font-text);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #ffffff;
  background: none;
  border: 0;
  padding: 0 0.5rem;
  cursor: pointer;
  text-decoration: none;
}
body.layout-christmas #nav .cl-nav-tel svg,
body.layout-christmas #nav .cl-nav-tel-glyph {
  width: 17px;
  height: 17px;
  fill: var(--cl-bulb);
  flex: 0 0 17px;
  position: static;
  transform: none;
}
@media (min-width: 768px) and (max-width: 1023px) {
  body.layout-christmas #nav .cl-nav-tel {
    display: inline-flex;
    position: absolute;
    top: 50%;
    right: 62px;
    width: auto;
    height: auto;
    transform: translateY(-50%);
  }
}

@media (min-width: 1024px) {
  /* Forced !important #1. Framework rule is
     .layout-christmas{padding-top:165px !important} so nothing else can win.
     ZERO, not 96: the hero starts under the transparent nav (brief 1.11). */
  body.layout-christmas {
    padding-top: 0 !important;
  }
  body.layout-christmas #nav {
    height: 96px;
  }
  body.layout-christmas #nav .inner {
    justify-content: space-between;
    padding: 0 1.5rem;
  }
  body.layout-christmas #nav .logo {
    flex-basis: 168px;
    width: 168px;
    padding: 0;
  }
  body.layout-christmas #nav nav {
    align-items: center;
    justify-content: flex-end;
  }
  body.layout-christmas #nav nav > ul {
    align-items: center;
  }
  body.layout-christmas #nav nav > ul > li > a:not(.button) {
    font-size: 0.95rem;
    line-height: 1rem;
    color: var(--cl-text);
    padding: 12px 10px;
  }
  body.layout-christmas #nav nav > ul > li:hover > a:not(.button),
  body.layout-christmas #nav nav > ul > li:focus-within > a:not(.button) {
    color: var(--cl-bulb);
  }
  body.layout-christmas #nav .cl-nav-tel {
    display: inline-flex;
    margin-left: 0.75rem;
  }
  /* Desktop dropdowns keep the framework's night-blue panel; the lawn-green
     sub-menu ground the christmas layout inherits is repainted. */
  body.layout-christmas #nav nav > ul > li > ul,
  body.layout-christmas #nav nav > ul > li > .mega {
    background-color: var(--cl-night-700);
  }
  body.layout-christmas #nav nav > ul > li > ul:before,
  body.layout-christmas #nav nav > ul > li > .mega:before {
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) var(--cl-night-700) rgba(0, 0, 0, 0);
  }
  body.layout-christmas #nav nav > ul > li > ul > li:before {
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) var(--cl-night-700);
  }
}
/* Forced !important #1 again, at every width below 1024, for the same
   framework rule. The hero absorbs the nav height into its photograph. */
body.layout-christmas {
  padding-top: 0 !important;
}

/* HEADER: kill the grass-green band, the framework 50% black scrim, the wave,
   and the 5rem-to-25rem dead padding ladder. */
body.layout-christmas header {
  background-color: var(--cl-night-900);
}
/* !important #2 of 2. AssignBackgrounds() writes background-image as an INLINE
   style, and only !important undoes an inline declaration. Builders must never
   put class="background" on a hero image; this is the safety net. */
body.layout-christmas header.background-image {
  background-image: none !important;
  background-color: var(--cl-night-900);
}
body.layout-christmas header.background-image:before {
  display: none;
}
body.layout-christmas header svg.snow {
  display: none;
}
/* Framework: header p:not(.has-button){display:none} at (0,1,2) has hidden
   every hero deck on these pages since launch. This wins at (0,1,3). Decks are
   still authored as <div class="cl-deck">; this is belt and braces. */
body.layout-christmas header p {
  display: block;
}
/* Beats .layout-christmas header #header-row{padding:5rem..25rem} at (1,1,1). */
body.layout-christmas header #header-row,
body.layout-christmas header.cl-hero {
  padding: 0;
}

/* SAFETY NET: builders rename id="service-container" to class="cl-doc". If a
   page keeps the id, these two rules stop the blue h2 ladder and the rule that
   paints every body link orange. Both framework rules are ID-scoped at (1,1,1),
   so the body prefix is what wins here, not !important. */
body.layout-christmas #service-container {
  background-color: transparent;
  border-top: 0;
  box-shadow: none;
}
body.layout-christmas #service-container a:not(.button) {
  font-weight: inherit;
  color: inherit;
  text-decoration: none;
}

/* Visible focus everywhere. */
body.layout-christmas a:focus-visible,
body.layout-christmas button:focus-visible,
body.layout-christmas summary:focus-visible {
  outline: 3px solid var(--cl-bulb);
  outline-offset: 3px;
}

/* ---------- 3. TYPE SCALE --------------------------------------------- */
/* The Reveal's editorial ladder (brief 1.3): sentence-case Teko 600 display
   with exactly one amber-glowed word, numbered eyebrows at 0.24em, 17px body
   at 1.72. Visual size is a class, never a tag: <h3 class="h2">.
   The Trends framework styles bare h2 as Bangers in red with an auto green
   pill underline; the body prefix plus the ::after reset below is what beats
   it. */
body.layout-christmas .cl-eyebrow {
  display: block;
  font-family: var(--cl-font-display);
  font-size: var(--cl-eyebrow);
  font-weight: 500;
  letter-spacing: 0.24em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--cl-text-dim);
  margin: 0 0 0.9rem;
}
/* The numeral is 1.35em, which is 18.6px at 390: the step-numeral floor in
   brief 7.4 I5. It takes the page accent. */
body.layout-christmas .cl-eyebrow .cl-num {
  font-family: var(--cl-font-display);
  font-size: 1.35em;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--cl-accent);
  vertical-align: -0.06em;
  margin-right: 0.15em;
}
body.layout-christmas .cl-hero h1,
body.layout-christmas .cl-close h1 {
  font-family: var(--cl-font-display);
  font-size: var(--cl-h1);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--cl-head);
  max-width: 15ch;
  margin: 0 0 10px;
}
/* Decorative device 4 of 5: the single amber-glowed word, in the H1 only.
   In plate mode the H1 sits on ink, so the glow alone is its ground; from
   760 the H1 sits over the photograph and 11.15 appends the on-photo tier. */
body.layout-christmas .cl-glow {
  color: var(--cl-bulb);
  text-shadow: var(--cl-glow-word);
}
body.layout-christmas .cl-band h2,
body.layout-christmas .cl-close h2,
body.layout-christmas .cl-h2 {
  position: relative;
  font-family: var(--cl-font-display);
  font-size: var(--cl-h2);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--cl-head);
  max-width: 20ch;
  margin: 0 0 1rem;
}
body.layout-christmas .cl-band h2.wide,
body.layout-christmas .cl-h2.wide {
  max-width: 26ch;
}
/* RETIRED: the 48x2px accent rule above every h2 (brief 1.9). The numbered
   eyebrow replaces it. The ::after reset also stops the framework's green
   pill from ever appearing under a Christmas h2. */
body.layout-christmas .cl-band h2:before,
body.layout-christmas .cl-close h2:before,
body.layout-christmas .cl-h2:before,
body.layout-christmas .cl-band h2:after,
body.layout-christmas .cl-close h2:after,
body.layout-christmas .cl-h2:after {
  content: none;
  display: none;
}
body.layout-christmas .cl-band h3,
body.layout-christmas .cl-h3 {
  font-family: var(--cl-font-display);
  font-size: var(--cl-h3);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--cl-head);
  margin: 0 0 0.6rem;
}
body.layout-christmas .cl-band h4,
body.layout-christmas .cl-h4 {
  font-family: var(--cl-font-text);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--cl-head);
  margin: 0 0 0.4rem;
}
body.layout-christmas .cl-deck {
  font-family: var(--cl-font-text);
  font-size: var(--cl-lead);
  font-weight: 400;
  line-height: 1.45;
  color: var(--cl-text-lead);
  max-width: 44ch;
  margin: 0 0 1.25rem;
}
body.layout-christmas .cl-lead {
  font-family: var(--cl-font-text);
  font-size: var(--cl-lead);
  line-height: 1.72;
  color: var(--cl-text-lead);
  max-width: 56ch;
  margin: 0 0 1.1rem;
}
body.layout-christmas .cl-band p,
body.layout-christmas .cl-doc p {
  font-family: var(--cl-font-text);
  font-size: var(--cl-body);
  line-height: 1.72;
  color: var(--cl-text);
  max-width: 64ch;
  margin: 0 0 1.1rem;
}
body.layout-christmas .cl-caption {
  font-family: var(--cl-font-display);
  font-size: var(--cl-caption);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cl-text-dim);
  max-width: 46ch;
  margin: 0.5rem 0 0;
}
body.layout-christmas .cl-micro {
  font-family: var(--cl-font-text);
  font-size: var(--cl-micro);
  font-weight: 600;
  line-height: 1.4;
  color: var(--cl-text-dim);
  margin: 0.4rem 0 0;
}
body.layout-christmas .cl-num {
  font-family: var(--cl-font-display);
  font-weight: 600;
  line-height: 0.9;
  color: var(--cl-accent);
}
/* Paper inverts every text color in one place. */
body.layout-christmas .cl-paper .cl-eyebrow {
  color: var(--cl-ink-soft);
}
body.layout-christmas .cl-paper .cl-eyebrow .cl-num,
body.layout-christmas .cl-paper .cl-num {
  color: var(--cl-blue);
}
body.layout-christmas .cl-paper h2,
body.layout-christmas .cl-paper .cl-h2,
body.layout-christmas .cl-paper h3,
body.layout-christmas .cl-paper .cl-h3,
body.layout-christmas .cl-paper h4,
body.layout-christmas .cl-paper .cl-h4,
body.layout-christmas .cl-paper .cl-deck {
  color: var(--cl-ink);
}
body.layout-christmas .cl-paper p,
body.layout-christmas .cl-paper .cl-lead {
  color: var(--cl-ink-body);
}
body.layout-christmas .cl-paper .cl-caption,
body.layout-christmas .cl-paper .cl-micro {
  color: var(--cl-ink-soft);
}
/* The visually hidden string that carries meaning an aria-hidden image
   cannot (components-v2 9.6). */
body.layout-christmas .cl-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* ---------- 4. GROUNDS AND BANDS -------------------------------------- */
/* ONE NIGHT, ONE PAPER ISLAND. Every content section is one band on one
   ground, and the only real tonal event on a page is the single flip to
   paper at THE NUMBER. Every band gets an EXPLICIT background-color, never a
   bare gradient, so a rounding gap between two stacked sections shows the
   ground rather than the page default. Every paper-to-night seam carries a
   .cl-strand, which is opaque on its own ground and cannot leave a gap. */
body.layout-christmas .cl-band {
  position: relative;
  background-color: var(--cl-night-900);
  color: var(--cl-text);
  padding: var(--cl-band-y) 0;
}
body.layout-christmas .cl-band--night {
  background-color: var(--cl-night-900);
}
/* The three-stop gradient gives a band a horizon without a visible edge. */
body.layout-christmas .cl-band--lit {
  background-color: var(--cl-night-900);
  background-image: linear-gradient(180deg, var(--cl-night-900) 0%, var(--cl-night-800) 40%, var(--cl-night-900) 100%);
}
body.layout-christmas .cl-band--flush {
  padding: 0;
}
body.layout-christmas .cl-band--tight {
  padding: var(--cl-band-y-tight) 0;
}
/* THE ONE PAPER ISLAND. Cool near-white, not the lawn brand's warm ivory. */
body.layout-christmas .cl-paper {
  background-color: var(--cl-paper-bg);
  color: var(--cl-ink);
}
/* The one lifted night, at the end. */
body.layout-christmas .cl-close {
  background-color: var(--cl-night-700);
}
/* SC identity accent: a porch lamp just out of frame, lower left. */
body.layout-christmas .cl-band--porch:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 60%;
  pointer-events: none;
  background-image: radial-gradient(60% 100% at 6% 100%, var(--cl-halo), transparent 70%);
}
/* The shell already includes its own gutter (100% - 2.6rem), so the inner
   carries no padding of its own. */
body.layout-christmas .cl-inner {
  position: relative;
  z-index: 1;
  width: var(--cl-shell);
  max-width: none;
  margin: 0 auto;
  padding: 0;
}
body.layout-christmas .cl-inner--wide {
  width: var(--cl-shell-wide);
}
body.layout-christmas .cl-inner--text {
  width: var(--cl-shell-text);
}
/* NO DEAD COLUMN. A single-column band at 1024 and up centres under the text
   measure; the reader sees a deliberate quiet moment, not a void. */
body.layout-christmas .cl-inner--text {
  text-align: center;
}
body.layout-christmas .cl-inner--text h2,
body.layout-christmas .cl-inner--text .cl-h2,
body.layout-christmas .cl-inner--text p,
body.layout-christmas .cl-inner--text .cl-deck {
  margin-left: auto;
  margin-right: auto;
}
body.layout-christmas .cl-inner--text .cl-ctarow {
  justify-content: center;
}
@media (max-width: 699px) {
  body.layout-christmas .cl-inner--text {
    text-align: left;
  }
  body.layout-christmas .cl-inner--text .cl-ctarow {
    justify-content: flex-start;
  }
}
/* A section-level h3 that follows a block needs its own air; the framework only
   supplies p+h3 and ul+h3 margins. */
body.layout-christmas .cl-inner > h3 {
  margin-top: 2.5rem;
}
body.layout-christmas .cl-card {
  background-color: var(--cl-night-700);
  border: 1px solid var(--cl-rule);
  border-radius: var(--cl-r-2);
  box-shadow: var(--cl-shadow-card);
  padding: var(--cl-pad-card);
  color: var(--cl-text);
  transition: transform 160ms ease, border-color 160ms ease;
}
/* A card keeps night text even when it sits on a paper band. */
/* .cl-h3 is in this list because a night card on a paper band that heads a
   sub-block with h4.cl-h3 otherwise paints ink on night-700 at about 1.3:1. */
body.layout-christmas .cl-paper .cl-card h2,
body.layout-christmas .cl-paper .cl-card h3,
body.layout-christmas .cl-paper .cl-card h4,
body.layout-christmas .cl-paper .cl-card .cl-h3,
body.layout-christmas .cl-paper .cl-card .cl-num,
body.layout-christmas .cl-paper .cl-card .cl-deck {
  color: var(--cl-text);
}
body.layout-christmas .cl-paper .cl-card p,
body.layout-christmas .cl-paper .cl-card .cl-list li,
body.layout-christmas .cl-paper .cl-card .cl-caption {
  color: var(--cl-text-dim);
}
body.layout-christmas .cl-paper .cl-card .cl-list strong {
  color: var(--cl-text);
}
/* Night-to-night seam: the 1px line stays, the 3px amber dot (1.9:1) is
   retired (brief 1.10). */
body.layout-christmas .cl-rule {
  position: relative;
  height: 1px;
  background-color: var(--cl-rule);
}
body.layout-christmas .cl-rule:after {
  content: none;
}

/* ---------- 5. PHOTO PLATES AND SCRIMS -------------------------------- */
/* A night photo never touches a light ground raw: it sits in a dark plate. */
body.layout-christmas .cl-plate {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: var(--cl-night-900);
  border-radius: 4px;
  margin: 0;
}
body.layout-christmas .cl-plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.layout-christmas .cl-plate:after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: 12px;
  left: 12px;
  border: 1px solid rgba(255, 216, 138, 0.35);
  pointer-events: none;
}
body.layout-christmas .cl-plate--32 { aspect-ratio: 3 / 2; }
body.layout-christmas .cl-plate--169 { aspect-ratio: 16 / 9; }


/* ---------- 6. DECORATIVE DEVICES ------------------------------------- */
/* Device 1: THE PHOTOGRAPHIC BULB STRAND, revision 2c. PARTS A, C, D and F
   of C:/tmp/sharp-christmas-seo/bulbs/drop-in-christmas-lights.css.txt are
   pasted below EXACTLY as written (PART B is the nav hairline in section 2;
   PART E is not used). PART C carries its OWN reduced-motion block and it
   stays here beside the strand rules even though section 9 has one too. */

/* ---------- PART A. TOKENS + THE STRAIGHT STRAND ----------------------- */
/* One number drives the whole device: font-size on the strand element.
     1em = 4px desktop -> 12em = 48px bulb pitch, 8.5em = 34px tall
     1em = 3px phone   -> 12em = 36px bulb pitch, 8.5em = 25.5px tall
   Nothing below needs a second media query. */

body.layout-christmas .cl-strand,
body.layout-christmas .cl-ridge,
body.layout-christmas #nav:after {
  /* --- the warm-white rotation, the site default ---
     SINGLE COLOUR. Both bulbs in the 24em tile are the same warm white, so
     the apex bulb of a warm gable is identical to its neighbours. Revision 2a
     ran warm white + amber here, which put a pale bulb on the peak between
     two orange ones -- Lance's defect, in a second place. */
  --clb-tile: url(/files/account/images/design/cl-strand-warm.webp);
  --clb-tw: 24em;                 /* tile width: 2 bulbs */
  --clb-bpx: calc(50% + 6em);     /* puts bulb #1 on the box centre */
  /* halo colour measured off Sharp's own gallery photos, hue 40 */
  --clb-halo: 255, 208, 115;
  /* HALO LUMINANCE CAP. The DONE BY DEC 1ST badge (#ffd88a) and the orange
     CTA have to stay the brightest things on the page, so the animated glow
     never passes .34 alpha and never centres on pure white. */
  --clb-a1: .34;
  --clb-a2: .20;
}

/* --- the five-colour rotation: RED, GREEN, BLUE, ORANGE, PURPLE ---------
   Add class="cl-strand cl-strand--multi" (or cl-ridge--multi) where a page
   wants it. The order is baked into the tile and repeats across every seam,
   so it cannot drift. */
body.layout-christmas .cl-strand--multi,
body.layout-christmas .cl-ridge--multi {
  --clb-tile: url(/files/account/images/design/cl-strand-multi.webp);
  --clb-tw: 60em;                 /* tile width: 5 bulbs */
  --clb-bpx: calc(50% + 24em);    /* puts the RED bulb on the box centre */
}

body.layout-christmas .cl-strand {
  position: relative;
  display: block;
  width: 100%;
  font-size: 4px;
  line-height: 0;
  height: 8.5em;
  overflow: hidden;
  pointer-events: none;
  background-repeat: repeat-x;
  background-size: var(--clb-tw) 8.5em;
  background-position: var(--clb-bpx) 0;   /* CENTRE-ANCHORED, see header */
  background-image: var(--clb-tile);
}
@media (max-width: 767px) {
  body.layout-christmas .cl-strand,
  body.layout-christmas .cl-ridge,
  body.layout-christmas #nav:after { font-size: 3px; }
}

/* The animated glow. Two phases so neighbouring bulbs never pulse together.
   The gradients sit on the SAME tile grid and the SAME --clb-bpx as the
   bulbs, so a halo is always centred on a bulb at any width.
     warm  (24em): phase A = bulb 1, phase B = bulb 2
     multi (60em): phase A = bulbs 1,3,5, phase B = bulbs 2,4
   Deliberately NO mix-blend-mode. Screen blend isolates to the nearest
   stacking context, so the moment a strand sits inside anything transformed
   (the gable) you get a pale rectangle the size of the wrapper. */
body.layout-christmas .cl-strand:before,
body.layout-christmas .cl-strand:after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  background-size: var(--clb-tw) 8.5em;
  background-position: var(--clb-bpx) 0;
}
body.layout-christmas .cl-strand:before {
  background-image: radial-gradient(5.6em 4.8em at 6em 4.5em,
    rgba(var(--clb-halo), var(--clb-a1)) 0 4%,
    rgba(var(--clb-halo), var(--clb-a2)) 24%, transparent 100%);
  animation: clb-glow 7.5s ease-in-out infinite;
}
body.layout-christmas .cl-strand:after {
  background-image: radial-gradient(5.6em 4.8em at 18em 4.5em,
    rgba(var(--clb-halo), var(--clb-a1)) 0 4%,
    rgba(var(--clb-halo), var(--clb-a2)) 24%, transparent 100%);
  animation: clb-glow 9s ease-in-out -4.4s infinite;
}

/* Per-colour glow for the five-bulb rotation. A warm halo over a purple bulb
   reads as a mistake, so each gradient carries its own measured halo rgb. */
body.layout-christmas .cl-strand--multi:before {
  background-image:
    radial-gradient(5.6em 4.8em at 6em 4.5em,
      rgba(255,77,83,var(--clb-a1)) 0 4%, rgba(255,77,83,var(--clb-a2)) 24%, transparent 100%),
    radial-gradient(5.6em 4.8em at 30em 4.5em,
      rgba(77,113,255,var(--clb-a1)) 0 4%, rgba(77,113,255,var(--clb-a2)) 24%, transparent 100%),
    radial-gradient(5.6em 4.8em at 54em 4.5em,
      rgba(155,77,255,var(--clb-a1)) 0 4%, rgba(155,77,255,var(--clb-a2)) 24%, transparent 100%);
}
body.layout-christmas .cl-strand--multi:after {
  background-image:
    radial-gradient(5.6em 4.8em at 18em 4.5em,
      rgba(78,255,77,var(--clb-a1)) 0 4%, rgba(78,255,77,var(--clb-a2)) 24%, transparent 100%),
    radial-gradient(5.6em 4.8em at 42em 4.5em,
      rgba(255,152,77,var(--clb-a1)) 0 4%, rgba(255,152,77,var(--clb-a2)) 24%, transparent 100%);
}

/* On the ivory band a bulb does not glow, it casts a warm stain. */
body.layout-christmas .cl-paper .cl-strand,
body.layout-christmas .cl-strand--paper { --clb-a1: .18; --clb-a2: .10; }
body.layout-christmas .cl-paper .cl-strand:before,
body.layout-christmas .cl-strand--paper:before {
  background-image: radial-gradient(5.6em 4.8em at 6em 4.5em,
    rgba(190, 120, 25, .10) 0 6%, transparent 70%);
}
body.layout-christmas .cl-paper .cl-strand:after,
body.layout-christmas .cl-strand--paper:after {
  background-image: radial-gradient(5.6em 4.8em at 18em 4.5em,
    rgba(190, 120, 25, .10) 0 6%, transparent 70%);
}
/* ---------- PART C. MOTION -------------------------------------------- */
/* Opacity only, on layers that are already their own composited layer. No
   box-shadow, no filter, nothing that forces a repaint of the section behind.
   The PEAK stays at 1 so --clb-a1 remains the real ceiling; the twinkle is
   made visible by dropping the TROUGH, which is also what a warm-white LED
   string does on camera. 7.5s and 9s never come back into step. */
@keyframes clb-glow {
  0%, 100% { opacity: .42 }
  46%      { opacity: 1 }
  74%      { opacity: .70 }
}
/* The gable breathes as one piece: its two slopes and its apex bulb have to
   stay identical to each other, so they share a single opacity on the parent
   rather than three animations that could drift apart. */
@keyframes clb-breath {
  0%, 100% { opacity: .84 }
  46%      { opacity: 1 }
  74%      { opacity: .92 }
}

/* TWO KILL SWITCHES, AND BOTH OF THEM LIVE HERE.
   The media query is for anyone who asked their OS to stop motion; the class
   is for a page-level toggle. Both land on FULL brightness, not on the trough,
   so motion-off reads as lit rather than dimmed.

   REVISION 2c. The reduced-motion block below is NEW, and it is here because
   it was missing. Revision 2b shipped only the .cl-motion-off class and left a
   comment saying the global block at the end of section 9 of
   christmas-lights.css ("body.layout-christmas *, *:before, *:after
   { animation: none !important }") "covers this device for free".
   That was true only by accident of paste position. Measured with Chrome
   launched reducedMotion:'reduce' on this file as it stood: .cl-strand::before
   and ::after still ran clb-glow, .cl-strand--chevron and .cl-ridge still ran
   clb-breath, and document.getAnimations() returned 29 running animations. It
   passed in production ONLY because that global block happens to sit at line
   1985, after the paste targets at 295-738. Paste PART A-E into any other
   stylesheet, or above that block, and a user who asked for no motion gets the
   twinkle anyway. That is the same "silently depends on what comes later"
   failure as DEFECT B in PART E, and PART E's own comment claims to be
   "genuinely additive", so the file has to carry its own.
   Cost: 264 B raw, 61 B gzipped. Verified: 0 running animations, every layer
   on opacity 1. */
@media (prefers-reduced-motion: reduce) {
  body.layout-christmas .cl-strand,
  body.layout-christmas .cl-strand:before,
  body.layout-christmas .cl-strand:after,
  body.layout-christmas .cl-strand--chevron,
  body.layout-christmas .cl-ridge,
  body.layout-christmas .cl-ridge .rh,
  body.layout-christmas .cl-ridge .pk {
    animation: none !important;
    opacity: 1;
  }
}
body.cl-motion-off.layout-christmas .cl-strand,
body.cl-motion-off.layout-christmas .cl-strand:before,
body.cl-motion-off.layout-christmas .cl-strand:after,
body.cl-motion-off.layout-christmas .cl-strand--chevron,
body.cl-motion-off.layout-christmas .cl-ridge,
body.cl-motion-off.layout-christmas .cl-ridge .rh,
body.cl-motion-off.layout-christmas .cl-ridge .pk {
  animation: none !important;
  opacity: 1;
}
/* ---------- PART D. THE GABLE  (replaces .cl-strand--chevron) ----------
   ZERO MARKUP CHANGE. This is the DEFAULT. The two existing
   <div class="cl-strand cl-strand--chevron"> elements keep working as they
   are; PART E is only for a page that wants the richer wrapper version.

   HOW THE APEX IS BUILT  (Lance's rule 2)
   ---------------------------------------
   Three surfaces, not two:

     the ELEMENT's own background = a 4em-wide window at the exact centre,
       cropped with background-clip:content-box, drawn UPRIGHT, holding ONE
       whole bulb. It is the same tile, the same background-size and the same
       phase as the slopes, so the apex bulb is the same sprite, the same
       size, the same glow and the same socket as every other bulb. Nothing
       about it is hand-drawn.
     :before = the left slope,  right edge at apex - 2em, skewY(-3deg)
     :after  = the right slope, left  edge at apex + 2em, skewY( 3deg)

   Both slopes hinge on the APEX POINT ON THE WIRE (1.25em down, which is where
   the tile actually draws the wire at a bulb), so the roof bends where a real
   ridge bends.

   IT IS skewY, NOT rotate, AND THAT MATTERS. rotate() tilts the box's own
   vertical edges by the same angle, so a rotated slope butting a vertical
   window leaves a wedge: a hairline GAP above the wire and a widening strip of
   DOUBLE-PAINTED halo below it, up to 0.38em wide at the bottom of the box.
   That wedge is clearly visible at 4x. skewY leaves every vertical line
   vertical (x' = x, y' = y + x*tan(a)), so the slope edge and the window edge
   are the same line and the joint is exact. It also keeps the HORIZONTAL bulb
   spacing at exactly 12em on both slopes. The price is that a bulb is sheared
   vertically by 11.2px * tan(3deg) = 0.59px across its own width, which is
   invisible even magnified 4x.

   THE translateY IS NOT A FUDGE. Skewing by a about a point leaves the content
   at x displaced vertically by x*tan(a). At the two seams x = 2em, so BOTH
   slopes sit 2em*tan(3deg) = 0.1048em too low. Lifting both by exactly that
   amount makes the wire, the sag and the halo continuous through both seams
   for every y, and because both slopes move by the same amount the peak stays
   symmetric: no flat top, no doubled bulb, no gap, no half bulb. The only
   residue is that the two bulbs either side of the apex sit 0.1048em (0.42px)
   higher than a perfectly straight slope would put them.
   Change the 3deg and you must change 0.1048em with it:
        translateY     = -(2em * tan(pitch))
        padding-bottom = tan(pitch)/2 as a percent   (3deg -> 2.62%)

   The 2.62% padding-bottom is the vertical slack the descending ends need. It
   is a PERCENTAGE OF THE ELEMENT'S OWN WIDTH, so the box grows exactly as
   fast as the roof drops. A fixed height, or a vw height on an element that
   is not full-bleed, looks right at one width and crops at another. */
body.layout-christmas .cl-strand--chevron {
  box-sizing: content-box;         /* the % padding must sit OUTSIDE the height */
  width: auto;
  height: 8.5em;
  padding: 0 calc(50% - 2em) 2.62%;
  background-repeat: repeat-x;
  background-size: var(--clb-tw) 8.5em;
  background-position: var(--clb-bpx) 0;   /* whole bulb on the exact centre */
  background-origin: padding-box;          /* phase measured on the full width */
  background-clip: content-box;            /* ...but only the 4em window paints */
  background-image: var(--clb-tile);
  animation: clb-breath 8.2s ease-in-out infinite;
}
body.layout-christmas .cl-strand--chevron:before,
body.layout-christmas .cl-strand--chevron:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: auto;                  /* PART A's inset:0 must not win here */
  height: 8.5em;
  width: calc(50% - 2em);
  background-repeat: repeat-x;
  background-size: var(--clb-tw) 8.5em;
  background-image: var(--clb-tile);
  animation: none;
  filter: none;
  opacity: 1;
}
body.layout-christmas .cl-strand--chevron:before {
  left: 0;
  right: auto;
  transform-origin: calc(100% + 2em) 1.25em;
  transform: translateY(-.1048em) skewY(-3deg);
  background-position: right 4em top 0;    /* a bulb lands on the apex */
}
body.layout-christmas .cl-strand--chevron:after {
  right: 0;
  left: auto;                    /* PART A's inset:0 sets left:0; kill it */
  transform-origin: -2em 1.25em;
  transform: translateY(-.1048em) skewY(3deg);
  background-position: -8em 0;             /* the same bulb, from the other side */
}

/* Section 5 above is KEEP, byte-identical; the one value REVEAL-SYSTEM and
   components-v2 2.7 change on it (the 4px plate radius to --cl-r-1) is
   restated here, after the block, instead of inside it. */
body.layout-christmas .cl-plate {
  border-radius: var(--cl-r-1);
}

/* THE GABLE HALO. PART D spends .cl-strand's two pseudo-elements on the two
   slopes, so without this the gable has no halo layer at all while every
   straight strand on the same page has two. Measured with motion frozen: the
   gable read 0.725 of a straight warm strand at 1440 and 0.707 at 390 against
   a 0.90 to 1.10 target. The halo is EXTRA BACKGROUND LAYERS rather than a
   third element, so the two gradients ride the exact same tile grid as the
   artwork underneath them, and the apex bulb is lit by the same 6em gradient
   that lights bulb 1 of every other tile repeat. No animation is added: the
   gable already breathes as one piece on the parent clb-breath. This rule
   sits AFTER PART D because PART D's own :before/:after rule restates
   background-image: var(--clb-tile) and would otherwise win on order.
   NOT WIRED FOR .cl-strand--multi: a multicolour gable needs five gradients
   on a 60em tile and no page has one (the only chevron on the site is the
   Sioux Falls warm strand). Carried over from the previous stylesheet. */
body.layout-christmas .cl-strand--chevron,
body.layout-christmas .cl-strand--chevron:before,
body.layout-christmas .cl-strand--chevron:after {
  background-image:
    radial-gradient(5.6em 4.8em at 6em 4.5em,
      rgba(var(--clb-halo), var(--clb-a1)) 0 4%,
      rgba(var(--clb-halo), var(--clb-a2)) 24%, transparent 100%),
    radial-gradient(5.6em 4.8em at 18em 4.5em,
      rgba(var(--clb-halo), var(--clb-a1)) 0 4%,
      rgba(var(--clb-halo), var(--clb-a2)) 24%, transparent 100%),
    var(--clb-tile);
}

/* THE JANUARY FADE (components-v2 3.2). The only place on any page where the
   bulbs stop. Same tile, same pitch, same halo; a 90deg mask on the element
   AND on both glow layers, or the halos survive past the bulbs. The
   transparent stop sits at 96 percent; if a half bulb is left at the mask
   edge at 4x, move it to a multiple of 12em. animation:none so the fade never
   twinkles back to life. */
body.layout-christmas .cl-strand--fade,
body.layout-christmas .cl-strand--fade:before,
body.layout-christmas .cl-strand--fade:after {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 34%, rgba(0, 0, 0, 0) 96%);
          mask-image: linear-gradient(90deg, #000 0, #000 34%, rgba(0, 0, 0, 0) 96%);
  animation: none;
}

/* Device 3: list markers. */
body.layout-christmas .cl-list {
  display: block;
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}
body.layout-christmas .cl-list li {
  position: relative;
  display: block;
  width: auto;
  font-family: var(--cl-font-text);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--cl-text);
  padding: 0 0 0 1.85rem;
  margin: 0 0 0.7rem;
}
/* 10px, not 8: at 8 the marker drew about 6px of ink beside 16px Titillium,
   which is under the icon audit floor (brief 7.4). */
body.layout-christmas .cl-list li:before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--cl-bulb);
  box-shadow: var(--cl-glow-dot);
}
/* THE CHECK. Drawn from two borders and rotated: 18 x 11 with a 3px stroke
   draws at 21.2px (brief 7.4 I3). 3px and not 2.5 because Chrome snaps a
   computed border-width down to a whole CSS pixel. --cl-green on night,
   --cl-green-ink on paper and on a white card, because --cl-green on paper
   measures 2.15:1. */
body.layout-christmas .cl-list--check li {
  padding-left: 2.1rem;
}
body.layout-christmas .cl-list--check li:before {
  top: 0.3em;
  width: 18px;
  height: 11px;
  border: 0;
  border-left: 3px solid var(--cl-green);
  border-bottom: 3px solid var(--cl-green);
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  transform: rotate(-45deg);
}
body.layout-christmas .cl-paper .cl-list li {
  color: var(--cl-ink-list);
}
body.layout-christmas .cl-paper .cl-list li:before {
  background-color: var(--cl-blue);
  box-shadow: none;
}
body.layout-christmas .cl-paper .cl-list--check li:before {
  background-color: transparent;
  border-color: var(--cl-green-ink);
}
body.layout-christmas .cl-paper .cl-card .cl-list li:before {
  background-color: var(--cl-bulb);
  box-shadow: var(--cl-glow-dot);
}
body.layout-christmas .cl-paper .cl-card .cl-list--check li:before {
  background-color: transparent;
  box-shadow: none;
  border-color: var(--cl-green);
}
body.layout-christmas .cl-list strong {
  display: block;
  font-family: var(--cl-font-text);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cl-head);
  margin: 0 0 0.15rem;
}
body.layout-christmas .cl-paper .cl-list strong {
  color: var(--cl-ink);
}

/* Device 5 lives in section 5 (.cl-plate::after, the amber inset frame).
   RETIRED here: the raster wreath badges (.cl-wreath--band / --seal) and the
   6 percent .cl-ornament. The badge and the seal are real HTML type (12.1). */

/* THE COMPARISON MARKS (components-v2 5.3). The yes mark is a 28px box, the
   no mark 24px; both are aria-hidden assets and the .cl-sr span carries the
   answer. On paper and on a white card the yes mark is recoloured to
   --cl-green-ink through a filter, because check-green.svg is filled
   #73be44 and 2.15:1 on paper fails the 3:1 floor. */
body.layout-christmas .cl-mark,
body.layout-christmas .cl-mk {
  display: inline-block;
  width: 28px;
  height: 28px;
  vertical-align: middle;
}
body.layout-christmas .cl-mark--no,
body.layout-christmas .cl-mk--no {
  width: 24px;
  height: 24px;
}
body.layout-christmas .cl-paper .cl-mark--yes,
body.layout-christmas .cl-paper .cl-mk--yes,
body.layout-christmas .cl-paper-card .cl-mark--yes,
body.layout-christmas .cl-paper-card .cl-mk--yes {
  filter: brightness(0.64) saturate(1.4);
}

/* THE GENERIC MONOLINE ICON (brief 7.4 I6). The seven monoline SVGs are
   viewBox 0 0 32 32 at stroke-width 2, which is 6.25 percent of the box, so
   20px renders a 1.25px stroke and fails. 24px is the floor (1.5px drawn);
   raise the size, never the stroke width. Inline colour comes from the
   parent through currentColor. */
body.layout-christmas .cl-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  flex: 0 0 24px;
  vertical-align: middle;
  fill: currentColor;
  stroke: currentColor;
  color: var(--cl-bulb);
}
body.layout-christmas .cl-icon--lg {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  flex-basis: 32px;
}
/* The badge and the seal base hooks. Their face is 12.1 (KEEP); the base
   class only keeps a badge from being squeezed inside a flex row. */
body.layout-christmas .cl-badge,
body.layout-christmas .cl-seal {
  flex-shrink: 0;
}

/* ---------- PART F. OPTIONAL: KEEP OFF-SCREEN STRANDS OFF THE WIRE -----
   PURELY A LOAD OPTIMISATION. It changes no pixel of the artwork.

   WHY IT EXISTS. On a hard 100 KB/s link the two tiles are 9652 B, which is
   94 ms of link time, and they are requested the instant the stylesheet
   finishes parsing -- i.e. while the hero photo is still downloading. They
   take bandwidth off it and the hero's LCP moves by about that much. Chrome
   already gives a CSS background image the LOWEST priority ("Low", measured),
   but DevTools throttling shares bandwidth without regard to priority, so a
   priority hint does not help. The only thing that helps is not asking for
   the bytes yet.

   WHAT IT DOES. content-visibility:auto on a wrapper makes Chrome skip the
   subtree while it is off screen, and a background image inside skipped
   content is NEVER REQUESTED until the element approaches the viewport.
   Measured: request goes out on scroll-into-view, tile paints normally.

   IT HAS TO BE A WRAPPER. Measured all three placements:
     background on the ELEMENT  + content-visibility on THAT element -> fetched
     background on a PSEUDO     + content-visibility on the element   -> deferred
     background on the ELEMENT  + content-visibility on a WRAPPER     -> deferred
   An element paints its OWN background even when its contents are skipped, and
   this device carries the tile on the element (the gable's apex window needs
   it there). Both :before and :after are already spent on the two glow phases,
   so there is no free pseudo to move it to. Hence the wrapper.

   MARKUP, one wrapper per strand you want deferred:
       <div class="cl-strand-defer">
         <div class="cl-strand cl-strand--multi" aria-hidden="true"></div>
       </div>

   RULES:
     - Wrap STRAIGHT strands only. Do NOT wrap .cl-strand--chevron: the gable
       is taller than 8.5em (it carries a 2.62% padding-bottom) and the fixed
       wrapper height would crop the descending ends.
     - Do NOT wrap a strand that is inside the first viewport. It gains
       nothing (content-visibility:auto renders on-screen content immediately)
       and it is the one the visitor is actually looking at.
     - The wrapper's height is the strand's exact height off the same
       font-size tokens, so the space is reserved before first paint and CLS
       stays 0.000. Measured 0.000 with and without.
     - Trade-off: a deferred strand requests its tile when it scrolls near, so
       on a very slow link it fades in a moment after it appears. It is
       decoration; that is the right trade. If a page must have every strand
       painted at load, do not use PART F there.

   MEASURED on a realistic-length page (hero photo as the LCP element, five
   strands 900 px apart), CDP throttle 100 KB/s + 400 ms latency, cache
   disabled, 390x844 DPR2, 6 interleaved runs per condition, comparing only
   runs whose LCP element was the hero IMG:

     no PART F, both tiles ....... 6 requests   LCP +116 to +132 ms vs off
     PART F on the deep strands .. 4 requests   LCP  +44 to  +66 ms
       -- the multicolour tile is NEVER REQUESTED at load. Not deferred,
          not low priority: not asked for. Same page, 2 fewer requests,
          6302 B that never crossed the wire.
     what is left is the ONE warm tile that is genuinely on screen at load
     (the nav hairline and any strand in the first two screens). 3350 B on a
     100 KB/s pipe is 33 ms of link time and it measures +44 to +70 ms.

   HOW DEEP IS DEEP ENOUGH. Measured Chrome's own relevance margin on an
   844 px viewport: a content-visibility:auto subtree still renders (and so
   still fetches) down to about y = 1900 px, and is skipped from about
   y = 2200 px. So roughly 2.5 viewports. A strand in the first two screens
   gains nothing from PART F.

   ONE COSMETIC SIDE EFFECT, measured, disclosed. Containment gives the
   subtree its own paint boundary, so at DPR 2 a wrapped strand whose box
   lands on a fractional row rasterises up to 0.61 device px (0.30 CSS px)
   lower than the same strand unwrapped. It is a uniform vertical shift of
   the whole strand -- horizontal centroid moves 0.06 device px, i.e. not at
   all -- so it cannot disturb the bulb pitch or the apex rule. At DPR 1 the
   two are pixel-identical (0 differing pixels at 1440, all five strands).
   If you are wrapping SOME strands on a page and not others, and they are
   visible together, either wrap all of them or none.
   ---------------------------------------------------------------------- */
body.layout-christmas .cl-strand-defer {
  font-size: 4px;
  line-height: 0;
  height: 8.5em;                  /* the strand's own height, so no CLS */
  content-visibility: auto;
}
@media (max-width: 767px) {
  body.layout-christmas .cl-strand-defer { font-size: 3px; }
}
/* ---------- 7. BUTTONS AND LINKS -------------------------------------- */
/* Orange is only ever a quote or pricing action (class toggleDeepLawn), and
   there is ONE in-flow orange object per screen at every viewport, the nav
   pill excepted. Phones are ghost pills or brand blue. Section numerals are
   --cl-accent, price numerals are ink or amber, the offer dot is --cl-bulb,
   the play disc is night-600 with an amber ring, the callback submit is the
   secondary (blue) button. None of them is orange. */
body.layout-christmas .cl-ctarow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
}
body.layout-christmas .cl-cta,
body.layout-christmas .cl-ghost,
body.layout-christmas .cl-phone,
body.layout-christmas .cl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 56px;
  font-family: var(--cl-font-display);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.045em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: #ffffff;
  border: 2px solid transparent;
  border-radius: var(--cl-r-2);
  padding: 0.85rem 1.7rem;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
/* CONTRAST. The label is 23.2px Teko, well over the 18.66px large-text line,
   so the 3:1 floor applies and --cl-orange-fill clears it at 3.22:1. Never
   let the computed size fall under 19.2px on an orange fill. */
body.layout-christmas .cl-cta {
  position: relative;
  color: #ffffff;
  background-color: var(--cl-orange-fill);
  border-color: var(--cl-orange-fill);
  box-shadow: var(--cl-shadow-cta);
}
body.layout-christmas .cl-cta:hover,
body.layout-christmas .cl-cta:focus-visible {
  color: #ffffff;
  background-color: var(--cl-orange-hover);
  border-color: var(--cl-orange-hover);
  box-shadow: var(--cl-shadow-cta-hover);
  transform: translateY(-2px);
}
body.layout-christmas .cl-cta--lg {
  min-height: 64px;
  font-size: 1.6rem;
  padding: 1rem 2.4rem;
}
/* A neutral outlined action: the hub's city chooser, a secondary path. */
body.layout-christmas .cl-ghost {
  color: #ffffff;
  background-color: var(--cl-night-600);
  border-color: var(--cl-night-600);
}
body.layout-christmas .cl-ghost:hover,
body.layout-christmas .cl-ghost:focus-visible {
  color: #ffffff;
  background-color: #1d3465;
  border-color: #1d3465;
  transform: translateY(-2px);
}
body.layout-christmas .cl-ghost--outline {
  background-color: transparent;
  border-color: var(--cl-rule);
}
body.layout-christmas .cl-ghost--outline:hover,
body.layout-christmas .cl-ghost--outline:focus-visible {
  background-color: rgba(157, 180, 232, 0.1);
  border-color: rgba(157, 180, 232, 0.5);
}
body.layout-christmas .cl-paper .cl-ghost {
  color: var(--cl-blue);
  background-color: transparent;
  border-color: var(--cl-blue);
}
body.layout-christmas .cl-paper .cl-ghost:hover,
body.layout-christmas .cl-paper .cl-ghost:focus-visible {
  color: #ffffff;
  background-color: var(--cl-blue);
}
/* Every click-to-call control. Brand blue fill, never orange. */
body.layout-christmas .cl-phone {
  color: #ffffff;
  background-color: var(--cl-blue);
  border-color: var(--cl-blue);
}
body.layout-christmas .cl-phone:hover,
body.layout-christmas .cl-phone:focus-visible {
  color: #ffffff;
  background-color: #26428a;
  border-color: #26428a;
  transform: translateY(-2px);
}
/* The secondary (blue) button: the callback submit and any non-price action
   that needs a filled button. Same face as .cl-phone. */
body.layout-christmas .cl-btn {
  color: #ffffff;
  background-color: var(--cl-blue);
  border-color: var(--cl-blue);
}
body.layout-christmas .cl-btn:hover,
body.layout-christmas .cl-btn:focus-visible {
  color: #ffffff;
  background-color: #26428a;
  border-color: #26428a;
}
body.layout-christmas .cl-btn:disabled,
body.layout-christmas .cl-btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}
/* Focus everywhere on a button-shaped control: the amber ring at 3px offset
   (brief 1.8). Section 2's --cl-bulb ring stays for plain links. */
body.layout-christmas .cl-cta:focus-visible,
body.layout-christmas .cl-ghost:focus-visible,
body.layout-christmas .cl-phone:focus-visible,
body.layout-christmas .cl-btn:focus-visible {
  outline: 3px solid var(--cl-amber-hot);
  outline-offset: 3px;
}
body.layout-christmas .cl-link {
  font-weight: 700;
  color: var(--cl-bulb);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.layout-christmas .cl-paper .cl-link {
  color: var(--cl-blue);
}
/* Text links inside body copy on night and on paper. */
body.layout-christmas .cl-band p a:not(.cl-cta):not(.cl-ghost):not(.cl-phone):not(.cl-btn),
body.layout-christmas .cl-answer a {
  color: var(--cl-bulb);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 212, 138, 0.45);
}
body.layout-christmas .cl-paper p a:not(.cl-cta):not(.cl-ghost):not(.cl-phone):not(.cl-btn) {
  color: var(--cl-blue);
  text-decoration-color: rgba(47, 83, 162, 0.45);
}
/* A phone number beside a label: "Sioux Falls (605) 251-6880". */
body.layout-christmas .cl-callpair {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  min-height: 44px;
  font-family: var(--cl-font-text);
  font-size: 1rem;
  font-weight: 600;
  color: var(--cl-text-dim);
  margin: 0 0 0.5rem;
}
body.layout-christmas .cl-callpair a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 rgba(255, 212, 138, 0.45);
}
body.layout-christmas .cl-paper .cl-callpair {
  color: var(--cl-ink-soft);
}
body.layout-christmas .cl-paper .cl-callpair a {
  color: var(--cl-blue);
  box-shadow: inset 0 -2px 0 rgba(47, 83, 162, 0.35);
}
/* THE FOOTER PHONE LINE (components-v2 9.4 addition): a large warm
   click-to-call line, 1.25rem, white, amber glyph. On the hub it is both
   numbers, labelled by branch. Markup:
     <p class="cl-foot-tel"><span>Sioux Falls</span>
        <a href="tel:(605) 251-6880"><svg ...></svg>(605) 251-6880</a></p> */
body.layout-christmas .cl-foot-tel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  font-family: var(--cl-font-text);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cl-text-dim);
  margin: 0 0 0.35rem;
}
body.layout-christmas .cl-foot-tel a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #ffffff;
  text-decoration: none;
}
body.layout-christmas .cl-foot-tel svg {
  width: 20px;
  height: 20px;
  fill: var(--cl-bulb);
}

/* ---------- 8. COMPONENTS --------------------------------------------- */

/* 8.1 HERO (brief 1.7, components-v2 1.1 to 1.3). A 4:3 photo PLATE at full
   bleed with the type on ink beneath it under 760px; a full-bleed photograph
   with the type inside it from 760px. The switch is a media query, not a
   class.
   THE ABSOLUTE RULE: a phone hero's height is NEVER a function of viewport
   height. Not vh, svh, dvh or lvh; not as min-height, height or flex basis.
   The plate is 390 x 3/4 = 292px at 390 wide, 34.6 percent of an 844 fold,
   and the CTA bottom lands at about 580 (hub) / 591 (city) against the 620
   rule. The badge is overlaid on the plate so it costs zero layout height.
   No id="header-row" on either element (audit block, departure a). */
body.layout-christmas .cl-hero {
  position: relative;
  z-index: 2;
  display: block;
  overflow: hidden;
  background-color: var(--cl-night-900);
  min-height: 0;
  padding: 0;
  margin: 0;
}
body.layout-christmas .cl-hero-media {
  position: relative;
  z-index: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--cl-night-900);
}
/* The 375 x 667 class: the plate drops to 16:10 (234px at 375 wide, 35.1
   percent of the fold) so the CTA bottom stays under 560. A max-height is
   the one permitted viewport-height use and it is not needed here. */
@media (max-height: 700px) and (max-width: 759px) {
  body.layout-christmas .cl-hero-media {
    aspect-ratio: 16 / 10;
  }
}
body.layout-christmas .cl-hero-media picture {
  display: block;
  width: 100%;
  height: 100%;
}
/* FRAMEWORK LANDMINE (forced !important #4): styles1.1.css ships
   img{height:auto !important}, which silently defeats height:100% on every
   object-fit:cover photo in the system. Any new cover-fill image class must
   be added to this list. */
body.layout-christmas .cl-hero-img,
body.layout-christmas .cl-close-img,
body.layout-christmas .cl-plate img,
body.layout-christmas .cl-bleed img,
body.layout-christmas .cl-video img {
  height: 100% !important;
}
body.layout-christmas .cl-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* On the plate it is 50% 50% on all three pages: the rendered crop already
     carries the composition. Desktop object-position is per page, below. */
  object-position: 50% 50%;
}
/* THE PLATE SCRIM. Darkens ONLY the top 22 percent (the nav band: 22 percent
   of 292 is 64px, exactly the nav) and the last 12 percent (the seam into
   ink). Nothing in the middle is touched, which is why the phone hero keeps
   its bulbs. A real element, not a pseudo, so a page can tune it. */
body.layout-christmas .cl-hero-scrim {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(180deg,
    rgba(5, 10, 22, 0.82) 0%,
    rgba(5, 10, 22, 0.30) 12%,
    rgba(5, 10, 22, 0) 22%,
    rgba(5, 10, 22, 0) 88%,
    var(--cl-night-900) 100%);
}
/* The type stack, on ink. Row gaps are the fold table in brief 1.7.2:
   eyebrow 6 / proof 10 / H1 10 / deck 10 / anchor 12 / CTA. */
body.layout-christmas .cl-hero-inner {
  position: relative;
  z-index: 2;
  width: var(--cl-shell);
  max-width: none;
  margin: 0 auto;
  padding: 18px 0 20px;
}
body.layout-christmas .cl-hero .cl-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  color: var(--cl-text-dim);
  margin: 0 0 6px;
}
/* THE EYEBROW IS HIDDEN UNDER 480 ON THE CITY PAGES. Their H1 already names
   the city, and the row costs the 29px a 3-line H1 needs. The hub keeps it:
   it is the only place the hub names both branches above the fold. */
@media (max-width: 479px) {
  body.layout-christmas.cl-page-sioux-falls .cl-hero-inner .cl-eyebrow,
  body.layout-christmas.cl-page-sioux-city .cl-hero-inner .cl-eyebrow {
    display: none;
  }
}
body.layout-christmas .cl-hero .cl-deck {
  margin: 0 0 10px;
}
body.layout-christmas .cl-hero .cl-ctarow {
  margin: 0;
}
body.layout-christmas .cl-hero .cl-micro--promise,
body.layout-christmas .cl-hero .cl-micro {
  margin: 10px 0 0;
}
body.layout-christmas .cl-hero .cl-hero-actions {
  margin: 12px 0 0;
}
/* On the plate the H1 may use the whole shell (348px at 390), which is what
   keeps the hub's H1 on two lines; the 15ch measure is a desktop rule (760+
   below). "SD" and "IA" never orphan because the builder writes a
   non-breaking space between city and state. */
body.layout-christmas .cl-hero h1 {
  max-width: none;
}
/* The hero micro line keeps the micro size even though it is a <p> inside
   the header (the framework's header{font-size:1.7rem} is beaten by the
   .cl-micro rule in section 3; this restates it at (0,3,0) so no later
   paragraph rule can push it to body size). */
body.layout-christmas .cl-hero .cl-micro,
body.layout-christmas .cl-hero p.cl-micro {
  font-size: var(--cl-micro);
  line-height: 1.4;
  max-width: none;
}
body.layout-christmas .cl-hero-inner--center {
  text-align: center;
}
body.layout-christmas .cl-hero-inner--center h1,
body.layout-christmas .cl-hero-inner--center .cl-deck,
body.layout-christmas .cl-hero-inner--center .cl-caption {
  margin-left: auto;
  margin-right: auto;
}
body.layout-christmas .cl-hero-inner--center .cl-ctarow,
body.layout-christmas .cl-hero-inner--center .cl-proofstrip {
  justify-content: center;
}
/* THE BADGE, on the plate, zero layout cost. It is a .cl-badge--html (12.1);
   its width comes from --cl-badge-w on itself, so 12.4's .cl-hero token and
   12.1's ladder can never disagree with it. */
body.layout-christmas .cl-hero-badge {
  --cl-badge-w: 88px;
  position: absolute;
  top: 76px;
  right: 16px;
  z-index: 3;
  width: var(--cl-badge-w);
  height: auto;
  filter: var(--cl-glow-badge);
}
body.layout-christmas .cl-geo {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cl-bulb);
  margin: 0 0 1rem;
}

/* 1.7.3 TABLET AND DESKTOP, 760 AND UP. THE FULL BLEED REVEAL HERO.
   768 -> 560 (clamp floor)  1024 -> 635  1200 -> 744  1226+ -> 760 (cap).
   At 1440 the cap leaves 140px of the offer strip under the fold and at
   1920 it leaves 320px, which is the scroll cue; the arrow is retired.
   vh in the inner PADDING is allowed here: it can only move the stack, never
   manufacture dead space, and the min-height is bounded. */
@media (min-width: 760px) {
  body.layout-christmas .cl-hero {
    display: flex;
    align-items: flex-end;
    min-height: clamp(560px, 62vw, 760px);
  }
  body.layout-christmas .cl-hero-media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    aspect-ratio: auto;
  }
  /* THE TOP GUARD. The stack is bottom-anchored inside a MIN-height, so when
     its content is taller than the clamp the hero grows instead of the stack
     riding up under the transparent nav and its hairline strand (measured
     before this rule: the eyebrow sat at y=30 behind the hamburger at
     768 x 1024 and crossed the nav bulbs at 1440). The guard is the nav
     height plus the 34px hairline plus 6px of air; when the content is
     shorter than the min-height it costs nothing, because the padding sits
     above a bottom-aligned stack. */
  body.layout-christmas .cl-hero-inner {
    padding: calc(var(--cl-nav-h) + 40px) 0 clamp(2.5rem, 5vh, 4.5rem);
  }
  body.layout-christmas .cl-hero .cl-eyebrow {
    font-size: var(--cl-eyebrow);
    letter-spacing: 0.24em;
    margin-bottom: 0.6rem;
  }
  body.layout-christmas .cl-hero .cl-deck {
    margin-bottom: 0.9rem;
  }
  /* THE DESKTOP MEASURE is 22ch, not the type ladder's 15ch. The three H1
     strings are verbatim (D6) and at 15ch every one of them breaks to THREE
     lines at 102px, which is 289px of heading; the fold contract (brief 2.4
     C to G: proof 240, H1 440) budgets TWO. At 22ch "Professional Christmas
     Light Installation" breaks after "Christmas" from 768 up. The phone
     plate keeps max-width:none (above). */
  body.layout-christmas .cl-hero h1 {
    max-width: 22ch;
  }
  body.layout-christmas .cl-hero-badge {
    --cl-badge-w: 104px;
    top: auto;
    right: 24px;
    bottom: 24px;
  }
  /* THE DESKTOP SCRIM. Seven stops. The ramp start (--cl-scrim-s3, where the
     gradient is still zero) is PER PAGE from the measured bulb band: hub 60,
     SF 75, SC 60 (defaults below sit at the Reveal's 52). --soft and --strong
     move only the two ramp alphas, so a variant can never raise the top of
     the frame. The 1024-1279 nav band moves the 12 percent stop to 16 so the
     148px nav still has its ground. */
  body.layout-christmas .cl-hero-scrim {
    --cl-scrim-navstop: 12%;
    --cl-scrim-s3: 52%;
    --cl-scrim-s4: 76%;
    --cl-scrim-s5: 92%;
    --cl-scrim-a4: 0.62;
    --cl-scrim-a5: 0.92;
    --cl-scrim-wash: 100deg;
    background-image: linear-gradient(180deg,
      rgba(5, 10, 22, 0.78) 0%,
      rgba(5, 10, 22, 0.28) var(--cl-scrim-navstop),
      rgba(5, 10, 22, 0) 26%,
      rgba(5, 10, 22, 0) var(--cl-scrim-s3),
      rgba(5, 10, 22, var(--cl-scrim-a4)) var(--cl-scrim-s4),
      rgba(5, 10, 22, var(--cl-scrim-a5)) var(--cl-scrim-s5),
      var(--cl-night-900) 100%);
  }
  body.layout-christmas .cl-hero-scrim--soft {
    --cl-scrim-a4: 0.50;
    --cl-scrim-a5: 0.86;
  }
  body.layout-christmas .cl-hero-scrim--strong {
    --cl-scrim-a4: 0.70;
    --cl-scrim-a5: 0.95;
  }
  /* Per page ramp start and desktop object-position (components-v2 1.2). */
  body.layout-christmas.cl-page-hub .cl-hero-scrim {
    --cl-scrim-s3: 60%;
    --cl-scrim-s4: 80%;
    --cl-scrim-s5: 93%;
  }
  body.layout-christmas.cl-page-hub .cl-hero-img {
    object-position: 50% 50%;
  }
  body.layout-christmas.cl-page-sioux-falls .cl-hero-scrim {
    --cl-scrim-s3: 75%;
    --cl-scrim-s4: 87%;
    --cl-scrim-s5: 95%;
  }
  body.layout-christmas.cl-page-sioux-falls .cl-hero-img {
    object-position: 42% 50%;
  }
  body.layout-christmas.cl-page-sioux-city .cl-hero-scrim {
    --cl-scrim-s3: 60%;
    --cl-scrim-s4: 80%;
    --cl-scrim-s5: 93%;
  }
  body.layout-christmas.cl-page-sioux-city .cl-hero-img {
    object-position: 46% 50%;
  }
  /* The hub's phone buttons hide under 768 (11.10); from 760 the secondary
     row sits beside the CTA. */
  body.layout-christmas .cl-hero .cl-hero-actions {
    margin-top: 0.9rem;
  }
}
@media (min-width: 1024px) {
  /* The directional wash: the one place a second gradient is allowed,
     because it is horizontal and cannot darken the bulb band across the
     frame. Use .cl-hero-scrim--left (260deg) on a page whose house sits in
     the left half. */
  body.layout-christmas .cl-hero-scrim:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(var(--cl-scrim-wash),
      rgba(5, 10, 22, 0.62) 0%,
      rgba(5, 10, 22, 0.28) 28%,
      rgba(5, 10, 22, 0) 52%);
  }
  body.layout-christmas .cl-hero-scrim--left {
    --cl-scrim-wash: 260deg;
  }
  body.layout-christmas .cl-hero-badge {
    --cl-badge-w: 132px;
    right: 32px;
    bottom: 32px;
  }
  /* The badge is pinned bottom right, so the full-width flow rows in the
     stack (the CTA row, the micro line, the secondary row) reserve its lane. */
  body.layout-christmas .cl-hero-inner .cl-micro,
  body.layout-christmas .cl-hero-inner .cl-caption,
  body.layout-christmas .cl-hero-inner .cl-crumbs,
  body.layout-christmas .cl-hero-inner .cl-ctarow {
    max-width: calc(100% - 132px - 2rem);
  }
  body.layout-christmas .cl-hero-inner--center .cl-micro,
  body.layout-christmas .cl-hero-inner--center .cl-caption,
  body.layout-christmas .cl-hero-inner--center .cl-ctarow {
    max-width: calc(100% - 264px - 4rem);
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  body.layout-christmas .cl-hero-scrim {
    --cl-scrim-navstop: 16%;
  }
}

/* 8.2 PROOF STRIP with a CSS star row. Zero image bytes. ONE ROW on phones:
   the strip may not wrap and its children may not break. Stars 18px, 20 from
   768; the row is at least 100px wide with a 2px gap (brief 7.4 I2). */
body.layout-christmas .cl-proofstrip {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  min-width: 100px;
  font-family: var(--cl-font-text);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--cl-text-lead);
  margin: 0 0 10px;
}
body.layout-christmas .cl-proofstrip > span {
  white-space: nowrap;
}
/* 3px, not 2: five 18px stars at a 2px gap measure 98px and the row floor is
   100 (brief 7.4 I2). At 3px the row is 102 on a phone and 112 on desktop. */
body.layout-christmas .cl-stars {
  display: inline-flex;
  gap: 3px;
  line-height: 1;
}
body.layout-christmas .cl-stars i {
  display: block;
  width: 18px;
  height: 18px;
  background-color: var(--cl-amber-hot);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
@media (min-width: 768px) {
  body.layout-christmas .cl-stars i {
    width: 20px;
    height: 20px;
  }
}

/* 8.3 THE HERO PRICE ANCHOR (components-v2 1.5). The judge graft: the
   highest-intent line on the page and the only two numbers Sharp publishes
   sit above the fold as a ruled block. 3px brand-green left rule. The
   numeral is --cl-bulb on night and --cl-ink on paper. NEVER orange. The
   hub calls it .cl-priceanchor and the city pages .cl-anchor; both hooks
   are carried. */
/* AUTHORING CONSTRAINT (brief 1.7.2): ONE LINE at 390, 32px tall. The numeral
   is 24px Teko and the -t text runs inline after it at 14.7px, so the -t
   string has to fit beside "$500 to $2,000" in a 348px shell: about 24
   characters ("for the season, most homes"). The per-foot sentence goes in
   the deck or the micro line, never here. Every extra line costs 19px of
   the 40px the CTA has above the 620 rule. */
body.layout-christmas .cl-anchor,
body.layout-christmas .cl-priceanchor {
  display: block;
  border-left: 3px solid var(--cl-green);
  line-height: 1.3;
  padding: 0.1rem 0 0.1rem 0.8rem;
  margin: 0 0 12px;
  max-width: 44ch;
}
body.layout-christmas .cl-priceanchor-n,
body.layout-christmas .cl-anchor-n {
  display: inline;
  font-family: var(--cl-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--cl-bulb);
  margin-right: 0.45rem;
  vertical-align: -0.05em;
}
body.layout-christmas .cl-priceanchor-t,
body.layout-christmas .cl-anchor-t {
  display: inline;
  font-family: var(--cl-font-text);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--cl-text-dim);
}
body.layout-christmas .cl-paper .cl-priceanchor-n,
body.layout-christmas .cl-paper .cl-anchor-n {
  color: var(--cl-ink);
}
body.layout-christmas .cl-paper .cl-priceanchor-t,
body.layout-christmas .cl-paper .cl-anchor-t {
  color: var(--cl-ink-soft);
}

/* 8.4 THE CITY SEGMENTED CONTROL (hub only, components-v2 1.6). Navigation,
   not action: 44px tall, outlined, equal weight, never filled, never orange,
   never visually larger than the primary CTA. */
body.layout-christmas .cl-citypick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
body.layout-christmas .cl-citypick-l {
  flex: 0 0 100%;
  font-family: var(--cl-font-display);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cl-text-dim);
}
body.layout-christmas .cl-citypick .cl-ghost {
  flex: 1 1 0;
  min-height: 44px;
  font-size: 1.15rem;
  padding: 0.5rem 1rem;
  background-color: transparent;
  border: 1px solid rgba(157, 180, 232, 0.4);
}
body.layout-christmas .cl-citypick .cl-ghost:hover,
body.layout-christmas .cl-citypick .cl-ghost:focus-visible {
  background-color: rgba(157, 180, 232, 0.12);
  border-color: var(--cl-bulb);
  transform: none;
}
@media (min-width: 560px) {
  body.layout-christmas .cl-citypick-l {
    flex: 0 0 auto;
    margin-right: 0.4rem;
  }
  body.layout-christmas .cl-citypick .cl-ghost {
    flex: 0 0 auto;
  }
}

/* 8.5 THE BREADCRUMB (.cl-crumbs, components-v2 2.11; orchestrator ruling
   X4/G1 overrides brief C16 on WHERE it sits). It is the LAST ROW OF THE
   HERO INNER STACK, below the CTA and the secondary row, so it costs nothing
   above the CTA. A small muted 13px line; the 44px tap target comes from
   padding on the links so the row itself stays about 26px tall. The current
   page is plain text with aria-current="page", never a link. It matches
   BreadcrumbList item for item, and the page has two <nav> elements: the
   sitewide one and this one. From 760 it sits over the photograph, so it is
   in the 11.15 shadow list. The standalone form (a shell-wide row) still
   works anywhere else a page needs it. */
body.layout-christmas .cl-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.45rem;
  width: var(--cl-shell);
  margin: 0 auto;
  padding: 0.35rem 0;
  font-family: var(--cl-font-text);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--cl-text-dim);
}
body.layout-christmas .cl-crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -9px 0;         /* the 44px target overhangs the 26px row */
  padding: 0 0.1rem;
  color: var(--cl-text);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 transparent;
}
body.layout-christmas .cl-crumbs a:hover,
body.layout-christmas .cl-crumbs a:focus-visible {
  color: var(--cl-head);
  box-shadow: inset 0 -1px 0 rgba(157, 180, 232, 0.35);
}
body.layout-christmas .cl-crumbs [aria-current="page"] {
  color: var(--cl-text-dim);
}
body.layout-christmas .cl-crumbs [aria-hidden="true"] {
  color: rgba(157, 180, 232, 0.45);
}
/* In the hero it inherits the shell from .cl-hero-inner and takes a 14px
   gap under the secondary row (the fold table's last row: 760 or less). */
body.layout-christmas .cl-hero-inner .cl-crumbs {
  width: auto;
  margin: 14px 0 0;
  padding: 0;
}
body.layout-christmas .cl-hero-inner .cl-crumbs a {
  color: var(--cl-text-dim);
}
body.layout-christmas .cl-hero-inner .cl-crumbs a:hover,
body.layout-christmas .cl-hero-inner .cl-crumbs a:focus-visible {
  color: var(--cl-head);
}

/* 8.6 THE OFFER BAND AND STRIP. A flush band directly under the hero: six
   verbs on one line at 1440, three lines at 390, separated by a glowing 5px
   disc in --cl-bulb (decorative device 3 of 5). The band carries the
   breadcrumb as its first row. */
body.layout-christmas .cl-offerband {
  background-color: var(--cl-night-900);
  border-top: 1px solid rgba(255, 212, 138, 0.16);
  border-bottom: 1px solid rgba(255, 212, 138, 0.16);
}
body.layout-christmas .cl-offerstrip,
body.layout-christmas .cl-offer,
body.layout-christmas .cl-verbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: var(--cl-shell);
  list-style: none;
  margin: 0 auto;
  padding: 0.55rem 0 0.9rem;
}
body.layout-christmas .cl-offerstrip li,
body.layout-christmas .cl-offer li,
body.layout-christmas .cl-verbs li {
  position: relative;
  display: block;
  width: auto;
  font-family: var(--cl-font-display);
  font-size: clamp(1.05rem, 2.1vw, 1.42rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cl-text);
  padding: 0.15rem clamp(0.7rem, 2vw, 1.35rem);
  margin: 0;
  white-space: nowrap;
}
body.layout-christmas .cl-offerstrip li + li:before,
body.layout-christmas .cl-offer li + li:before,
body.layout-christmas .cl-verbs li + li:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -2.5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--cl-bulb);
  box-shadow: var(--cl-glow-dot);
  transform: translateY(-50%);
}

/* 8.7 SPLITS AND FIGURES (components-v2 2.3, mechanism M5). A real 1fr 1fr
   grid from 900px, alternating with --flip, so no band leaves a dead column.
   The corner bracket is decorative device 2 of 5: a 64px box at 2px and .55
   alpha, hung off the figure's bottom right. */
body.layout-christmas .cl-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cl-gap-split);
  align-items: center;
}
@media (min-width: 900px) {
  body.layout-christmas .cl-split {
    grid-template-columns: 1fr 1fr;
  }
  body.layout-christmas .cl-split--flip .cl-fig {
    order: 2;
  }
}
body.layout-christmas .cl-fig {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
}
body.layout-christmas .cl-fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--cl-r-1);
  box-shadow: var(--cl-shadow-photo);
}
body.layout-christmas .cl-fig figcaption {
  font-family: var(--cl-font-display);
  font-size: var(--cl-caption);
  font-weight: 500;
  line-height: 1.72;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cl-text-dim);
  margin: 0.7rem 0 0;
}
body.layout-christmas .cl-fig figcaption b,
body.layout-christmas .cl-fig figcaption strong {
  color: var(--cl-text);
  font-weight: 600;
}
body.layout-christmas .cl-fig:after {
  content: "";
  position: absolute;
  top: auto;
  right: -14px;
  bottom: -14px;
  left: auto;
  width: 64px;
  height: 64px;
  border-right: 2px solid var(--cl-rule-warm);
  border-bottom: 2px solid var(--cl-rule-warm);
  opacity: 0.55;
  pointer-events: none;
}
body.layout-christmas .cl-paper .cl-fig:after {
  border-color: var(--cl-rule-paper);
}
body.layout-christmas .cl-paper .cl-fig figcaption {
  color: var(--cl-ink-soft);
}
body.layout-christmas .cl-paper .cl-fig figcaption b,
body.layout-christmas .cl-paper .cl-fig figcaption strong {
  color: var(--cl-ink);
}
body.layout-christmas .cl-split-copy > :last-child {
  margin-bottom: 0;
}

/* 8.8 THE FULL-BLEED BAND (components-v2 2.4). A viewport-wide photograph
   with a centred caption; the crew band and the commercial band. Height is a
   WIDTH function, never vh. The first transparent stop is pushed to 14
   percent and the wrapper is painted, so a sunset frame cannot show a
   lavender seam at the top edge. --capped insets it above 1280 so a file
   is never asked to cover more pixels than it has. */
body.layout-christmas .cl-bleed {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(260px, 42vw, 560px);
  overflow: hidden;
  background-color: var(--cl-night-900);
  margin: 0;
}
body.layout-christmas .cl-bleed img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
body.layout-christmas .cl-bleed:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background-image: linear-gradient(180deg,
    var(--cl-night-900) 0%,
    rgba(5, 10, 22, 0) 14%,
    rgba(5, 10, 22, 0) 66%,
    var(--cl-night-900) 100%);
}
body.layout-christmas .cl-bleed-cap {
  position: absolute;
  right: 0;
  bottom: 1.2rem;
  left: 0;
  z-index: 1;
  width: var(--cl-shell-text);
  margin: 0 auto;
  font-family: var(--cl-font-display);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--cl-text-lead);
  text-shadow: var(--cl-shadow-onphoto-3);
  max-width: none;
}
body.layout-christmas .cl-bleed-cap b,
body.layout-christmas .cl-bleed-cap strong {
  color: #ffffff;
  font-weight: 600;
}
@media (min-width: 1280px) {
  body.layout-christmas .cl-bleed--capped {
    width: var(--cl-shell-wide);
    margin: 0 auto;
    border-radius: var(--cl-r-1);
  }
}

/* 8.9 THE PANEL (components-v2 2.5). An aside inside a copy column. The
   accent left rule is what makes it read as an annotation rather than a box. */
body.layout-christmas .cl-panel {
  border: 1px solid var(--cl-rule);
  border-left: 3px solid var(--cl-accent);
  border-radius: var(--cl-r-1);
  padding: var(--cl-pad-panel);
  background-color: rgba(16, 28, 60, 0.4);
  margin: 1.25rem 0;
}
body.layout-christmas .cl-panel > :last-child {
  margin-bottom: 0;
}
body.layout-christmas .cl-paper .cl-panel {
  border-left-color: var(--cl-blue);
  background-color: var(--cl-paper-2);
}

/* 8.10 THE DUO (components-v2 2.6). Two craft detail cards side by side, each
   a photograph with a bold-lead-in caption. img aspect-ratio 950/400 cover;
   the aspect-ratio on the IMG itself keeps height auto and the framework's
   height:auto !important out of the argument. */
body.layout-christmas .cl-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin: 0 0 1.5rem;
}
@media (min-width: 760px) {
  body.layout-christmas .cl-duo {
    grid-template-columns: 1fr 1fr;
  }
}
body.layout-christmas .cl-duo figure {
  display: block;
  overflow: hidden;
  background-color: var(--cl-night-800);
  border: 1px solid var(--cl-rule);
  border-radius: var(--cl-r-1);
  margin: 0;
}
body.layout-christmas .cl-duo img {
  display: block;
  width: 100%;
  aspect-ratio: 950 / 400;
  object-fit: cover;
}
body.layout-christmas .cl-duo figcaption {
  font-family: var(--cl-font-text);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--cl-text-dim);
  padding: 0.9rem 1.1rem;
}
body.layout-christmas .cl-duo figcaption b,
body.layout-christmas .cl-duo figcaption strong {
  display: block;
  font-family: var(--cl-font-display);
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 0.25rem;
}

/* 8.11 THE LADDER (.cl-ladder, components-v2 2.12). SIOUX FALLS ONLY. A
   numbered scope rail: a 1px accent rule threads a column of .cl-expand rows
   through their numeral discs. Numerals 18px on phone, 20 on desktop. */
body.layout-christmas .cl-ladder {
  position: relative;
  padding-left: 2.6rem;
  margin: 0 0 1.5rem;
}
body.layout-christmas .cl-ladder:before {
  content: "";
  position: absolute;
  top: 1.6rem;
  bottom: 1.6rem;
  left: 0.95rem;
  width: 1px;
  background-color: var(--cl-accent);
  opacity: 0.45;
}
body.layout-christmas .cl-ladder .cl-expand,
body.layout-christmas .cl-ladder > details {
  position: relative;
}
body.layout-christmas .cl-ladder summary {
  min-height: 44px;
  font-family: var(--cl-font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #ffffff;
}
body.layout-christmas .cl-ladder summary .cl-num,
body.layout-christmas .cl-timeline summary .cl-num {
  position: absolute;
  top: 50%;
  left: -2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background-color: var(--cl-night-800);
  border: 1px solid var(--cl-accent);
  font-family: var(--cl-font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--cl-accent);
  transform: translateY(-50%);
}
@media (min-width: 768px) {
  body.layout-christmas .cl-ladder summary .cl-num,
  body.layout-christmas .cl-timeline summary .cl-num {
    font-size: 20px;
  }
}
body.layout-christmas .cl-ladder details:first-child summary .cl-num {
  top: 50%;
}

/* 8.12 THE TIMELINE (.cl-timeline, components-v2 2.13). SIOUX CITY ONLY. The
   five-step process rail: vertical under 900 (the same shape as the ladder,
   so the page-length budget still applies), HORIZONTAL from 900, which is
   what makes it a timeline rather than a ladder. The numeral disc is the
   Sioux City accent, --cl-amber-hot. */
body.layout-christmas .cl-timeline {
  position: relative;
  padding-left: 2.6rem;
  margin: 0 0 1.5rem;
}
body.layout-christmas .cl-timeline:before {
  content: "";
  position: absolute;
  top: 1.6rem;
  bottom: 1.6rem;
  left: 0.95rem;
  width: 1px;
  background-color: var(--cl-amber-hot);
  opacity: 0.45;
}
body.layout-christmas .cl-timeline .cl-expand,
body.layout-christmas .cl-timeline > details {
  position: relative;
}
body.layout-christmas .cl-timeline summary {
  min-height: 44px;
  font-family: var(--cl-font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #ffffff;
}
body.layout-christmas .cl-timeline summary .cl-num {
  border-color: var(--cl-amber-hot);
  color: var(--cl-amber-hot);
}
@media (min-width: 900px) {
  body.layout-christmas .cl-timeline {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--cl-gap-cards);
    padding-left: 0;
  }
  body.layout-christmas .cl-timeline:before {
    top: 1.5rem;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 1px;
  }
  body.layout-christmas .cl-timeline > details,
  body.layout-christmas .cl-timeline .cl-expand {
    border-top: 0;
    border-bottom: 0;
    margin: 0;
  }
  body.layout-christmas .cl-timeline summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding-top: 0.55rem;
  }
  body.layout-christmas .cl-timeline summary .cl-num {
    position: static;
    margin-bottom: 0.3rem;
    transform: none;
  }
  body.layout-christmas .cl-timeline summary:after {
    display: none;
  }
}

/* 8.13 THE DATE CHIPS (components-v2 8.1). Nov 15 to Dec 1 with the stated
   reason. An EXPLICIT 3-row grid on phone (chip / a 24px rotated arrow / chip)
   so the pair can never staircase under flex-wrap. */
body.layout-christmas .cl-chips {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  align-items: center;
  margin: 0 0 1.5rem;
}
body.layout-christmas .cl-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 190px;
  border: 1px solid var(--cl-rule);
  border-radius: var(--cl-r-2);
  background-color: rgba(16, 28, 60, 0.5);
  padding: 1.05rem 1.6rem;
}
body.layout-christmas .cl-chip b {
  display: block;
  font-family: var(--cl-font-display);
  font-size: 2.15rem;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}
body.layout-christmas .cl-chip--red b {
  color: var(--cl-red-lift);
}
body.layout-christmas .cl-chip--amber b {
  color: var(--cl-bulb);
}
body.layout-christmas .cl-chip span {
  display: block;
  font-family: var(--cl-font-text);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cl-text-dim);
  margin-top: 0.3rem;
}
body.layout-christmas .cl-chip-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  font-family: var(--cl-font-text);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--cl-bulb);
  transform: rotate(90deg);
}
@media (min-width: 640px) {
  body.layout-christmas .cl-chips {
    grid-template-columns: auto 32px auto;
    justify-content: start;
    gap: 0.75rem;
  }
  body.layout-christmas .cl-chip-arrow {
    height: auto;
    transform: none;
  }
}
body.layout-christmas .cl-paper .cl-chip {
  background-color: var(--cl-paper-card);
  border-color: var(--cl-paper-edge);
}
body.layout-christmas .cl-paper .cl-chip b {
  color: var(--cl-ink);
}
body.layout-christmas .cl-paper .cl-chip--red b {
  color: var(--cl-red);
}
body.layout-christmas .cl-paper .cl-chip span {
  color: var(--cl-ink-soft);
}
/* Legacy hook: .cl-deadline is the band's inner wrapper on the current
   pages. It only needs a grid at 960 so the chips, the seal and the copy
   never leave a dead column. */
body.layout-christmas .cl-deadline {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cl-gap-grid);
  align-items: center;
}
@media (min-width: 960px) {
  body.layout-christmas .cl-deadline {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

/* 8.14 THE PRICE CARD (components-v2 6.1). The white card on the one paper
   band: the PROPOSAL. The figure is INK, never orange. The band is
   1.05fr 0.95fr from 960: the price card left, the three lease cards and
   the seal right, so it cannot leave a void at 1440. */
body.layout-christmas .cl-pricegrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cl-gap-grid);
  align-items: start;
}
@media (min-width: 960px) {
  body.layout-christmas .cl-pricegrid {
    grid-template-columns: 1.05fr 0.95fr;
  }
}
body.layout-christmas .cl-price {
  display: block;
  background-color: var(--cl-paper-card);
  border: 1px solid var(--cl-paper-edge);
  border-radius: var(--cl-r-2);
  box-shadow: var(--cl-shadow-card);
  padding: var(--cl-pad-card);
  color: var(--cl-ink);
}
body.layout-christmas .cl-price-figure {
  font-family: var(--cl-font-display);
  font-size: var(--cl-bignum);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--cl-ink);
  margin: 0 0 0.35rem;
}
body.layout-christmas .cl-price-sub {
  font-family: var(--cl-font-display);
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cl-ink-soft);
  margin: 0 0 0.9rem;
}
body.layout-christmas .cl-price p {
  color: var(--cl-ink-body);
}
body.layout-christmas .cl-price .cl-list {
  border-top: 1px solid var(--cl-paper-hair);
  padding-top: 1rem;
  margin: 1rem 0 1.25rem;
}
body.layout-christmas .cl-price .cl-list li {
  color: var(--cl-ink-list);
}
body.layout-christmas .cl-price .cl-list--check li:before {
  border-color: var(--cl-green-ink);
}
body.layout-christmas .cl-price .cl-ctarow {
  margin: 0 0 0.75rem;
}
body.layout-christmas .cl-price .cl-cta {
  width: 100%;
}
body.layout-christmas .cl-after-cta {
  font-family: var(--cl-font-text);
  font-size: 0.94rem;
  text-align: center;
  color: var(--cl-ink-soft);
  margin: 0;
}
body.layout-christmas .cl-after-cta a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--cl-blue);
  text-decoration: none;
  box-shadow: inset 0 -2px 0 rgba(47, 83, 162, 0.35);
}
/* Legacy price hook: the dark info card beside the numerals. */
body.layout-christmas .cl-next {
  display: grid;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--cl-text-dim);
  border-top: 1px solid var(--cl-rule);
  padding-top: 1rem;
  margin-top: 1rem;
}

/* 8.15 THE LEASE CARDS (components-v2 6.2). Three named cards beside the
   price, in plain English. On phones the grid becomes the 13.1 snap rail. */
body.layout-christmas .cl-leasegrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cl-gap-cards);
  margin: 0 0 1.5rem;
}
body.layout-christmas .cl-lease {
  display: block;
  background-color: var(--cl-paper-2);
  border-left: 4px solid var(--cl-blue);
  border-radius: var(--cl-r-1);
  padding: var(--cl-pad-panel);
}
body.layout-christmas .cl-lease h4,
body.layout-christmas .cl-lease .cl-h4,
body.layout-christmas .cl-lease h3 {
  font-family: var(--cl-font-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.05;
  color: var(--cl-ink);
  margin: 0 0 0.4rem;
}
body.layout-christmas .cl-lease p {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--cl-ink-body);
  margin: 0;
}
body.layout-christmas .cl-band--night .cl-lease,
body.layout-christmas .cl-band--lit .cl-lease {
  background-color: rgba(16, 28, 60, 0.5);
  border: 1px solid var(--cl-rule);
  border-left: 4px solid var(--cl-blue-lift);
}
body.layout-christmas .cl-band--night .cl-lease h4,
body.layout-christmas .cl-band--lit .cl-lease h4 {
  color: #ffffff;
}
body.layout-christmas .cl-band--night .cl-lease p,
body.layout-christmas .cl-band--lit .cl-lease p {
  color: var(--cl-text);
}
@media (max-width: 767px) {
  body.layout-christmas .cl-leasegrid > .cl-lease {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
}

/* 8.16 THE FOUR-WAY COMPARISON, TABLE FORM (components-v2 6.3). From 760 the
   .cl-compare grid is a table: a label column and four value columns. Under
   760 the page ships .cl-compare-cards (11.8, KEEP). Sharp takes a neutral
   dash on up-front cost, and at least two green marks sit outside the Sharp
   column. */
body.layout-christmas .cl-compare {
  display: none;
  margin: 0 0 1.5rem;
}
@media (min-width: 760px) {
  body.layout-christmas .cl-compare {
    display: block;
    border-top: 1px solid var(--cl-rule);
  }
  body.layout-christmas .cl-compare-head,
  body.layout-christmas .cl-compare .cl-compare-row {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, 1fr);
    gap: 0.5rem;
    align-items: center;
    border-bottom: 1px solid var(--cl-rule);
    padding: 0.75rem 0;
  }
  body.layout-christmas .cl-compare-head > *,
  body.layout-christmas .cl-compare .cl-compare-label {
    font-family: var(--cl-font-display);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cl-text-dim);
  }
  body.layout-christmas .cl-compare-head > .is-sharp,
  body.layout-christmas .cl-compare .cl-compare-value.is-sharp {
    color: var(--cl-bulb);
  }
  body.layout-christmas .cl-compare .cl-compare-value {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
    color: var(--cl-text);
  }
  body.layout-christmas .cl-compare + .cl-compare-cards {
    display: none;
  }
}

/* 8.17 THE FAQ (components-v2 8.3). Native details/summary on night, hairline
   rows, no boxes, no fills. The chevron is a rotated border in a 20 x 20 box
   with 3px borders (Chrome snaps 2.5 down to 2), which draws at 28.3px inside
   a 44 x 44 tap target. The band is 1fr on phone and 1.4fr / 0.6fr from
   1024 with the decision card in the right rail. */
body.layout-christmas .cl-faqgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cl-gap-grid);
  align-items: start;
}
@media (min-width: 1024px) {
  body.layout-christmas .cl-faqgrid {
    grid-template-columns: 1.4fr 0.6fr;
  }
}
body.layout-christmas .cl-faq {
  border-top: 1px solid var(--cl-rule);
}
body.layout-christmas .cl-faq details {
  border-bottom: 1px solid var(--cl-rule);
}
body.layout-christmas .cl-faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  font-family: var(--cl-font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.005em;
  color: #ffffff;
  padding: 1.15rem 0;
}
body.layout-christmas .cl-faq summary::-webkit-details-marker {
  display: none;
}
/* The chevron: a 20 x 20 rotated border box with 3px strokes, which draws at
   28.3px. The tap target is the summary row itself, 44px minimum. */
body.layout-christmas .cl-faq summary:after {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-right: 3px solid var(--cl-bulb);
  border-bottom: 3px solid var(--cl-bulb);
  transform: rotate(45deg);
  transition: transform 200ms ease;
  margin: 0.15rem 0.4rem 0 0;
}
body.layout-christmas .cl-faq details[open] summary:after {
  transform: rotate(-135deg);
  margin-top: 0.6rem;
}
body.layout-christmas .cl-faq .cl-answer {
  padding: 0 0 1.3rem;
  max-width: 64ch;
}
body.layout-christmas .cl-faq .cl-answer p {
  color: var(--cl-text);
  margin-bottom: 0.85rem;
}
body.layout-christmas .cl-faq .cl-answer p:last-child {
  margin-bottom: 0;
}
/* Paper variant, if a page ever puts an FAQ on the paper band. */
body.layout-christmas .cl-paper .cl-faq,
body.layout-christmas .cl-paper .cl-faq details {
  border-color: var(--cl-paper-edge);
}
body.layout-christmas .cl-paper .cl-faq summary {
  color: var(--cl-ink);
}
body.layout-christmas .cl-paper .cl-faq .cl-answer p {
  color: var(--cl-ink-body);
}

/* 8.18 THE FAQ DECISION CARD (.cl-faq-aside, components-v2 8.4). A PLAIN card
   in the FAQ's right rail from 1024, and a plain card stacked under the last
   FAQ row on phone, where its orange CTA COUNTS toward the cadence. NOT
   position:sticky: sticky is inert on this site. */
body.layout-christmas .cl-faq-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid var(--cl-rule);
  border-radius: var(--cl-r-2);
  background-color: rgba(16, 28, 60, 0.55);
  padding: clamp(1.4rem, 3vw, 2rem);
  margin: 1.5rem 0 0;
}
@media (min-width: 1024px) {
  body.layout-christmas .cl-faq-aside {
    margin: 0;
  }
}
body.layout-christmas .cl-faq-aside .cl-badge--html {
  --cl-badge-w: 88px;
  margin: 0 0 1rem;
}
body.layout-christmas .cl-faq-aside h3 {
  margin: 0 0 0.4rem;
}
body.layout-christmas .cl-faq-aside p {
  max-width: 30ch;
  margin: 0 auto 1rem;
}
body.layout-christmas .cl-faq-aside .cl-ctarow {
  width: 100%;
  justify-content: center;
  margin: 0 0 0.75rem;
}
body.layout-christmas .cl-faq-aside .cl-cta {
  width: 100%;
}
body.layout-christmas .cl-faq-aside .cl-phone {
  width: 100%;
}

/* 8.19 PROOF (components-v2 7.1, 7.6). The stat strip, the rating, and the
   proof grids. Stars 20px on desktop. */
body.layout-christmas .cl-statstrip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: end;
  margin: 0 0 2rem;
}
body.layout-christmas .cl-rating {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
}
body.layout-christmas .cl-rating .val {
  font-family: var(--cl-font-display);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cl-bulb);
}
body.layout-christmas .cl-rating .cnt {
  font-family: var(--cl-font-text);
  font-size: 0.98rem;
  color: var(--cl-text-dim);
}
body.layout-christmas .cl-stat b,
body.layout-christmas .cl-stat .cl-num {
  display: block;
  font-family: var(--cl-font-display);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 0.9;
  color: var(--cl-bulb);
}
body.layout-christmas .cl-stat span:not(.cl-num),
body.layout-christmas .cl-stat .cl-stat-label {
  display: block;
  font-family: var(--cl-font-text);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cl-text-dim);
  margin-top: 0.25rem;
}
body.layout-christmas .cl-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  body.layout-christmas .cl-statstrip {
    grid-template-columns: auto repeat(3, 1fr);
  }
  body.layout-christmas .cl-rating {
    grid-column: auto;
  }
}
body.layout-christmas .cl-proof {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cl-gap-cards);
  align-items: start;
}
@media (min-width: 900px) {
  body.layout-christmas .cl-proof {
    grid-template-columns: repeat(3, 1fr);
  }
  body.layout-christmas .cl-proof--four {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Sioux City's two-card proof grid. align-items:start matters: one card
   carries a capture and one does not. */
@media (min-width: 760px) {
  body.layout-christmas .cl-proof--two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
@media (min-width: 900px) {
  body.layout-christmas .cl-proof--two {
    grid-template-columns: 1fr 1fr;
  }
}
body.layout-christmas .cl-quote-card:not(:has(.cl-receipt)) .cl-quote-meta {
  padding-bottom: 1.8rem;
}
/* The legacy promise band (three columns, no CTA on purpose). */
body.layout-christmas .cl-promise {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}
body.layout-christmas .cl-promise-badges {
  display: flex;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 900px) {
  body.layout-christmas .cl-promise {
    grid-template-columns: auto 1.2fr 1fr;
    gap: 2rem;
  }
}

/* 8.20 THE GALLERY (components-v2 7.4). Six 16:9 tiles with a credibility
   caption each. TWO COLUMNS ON PHONES, then auto-fill 300px from 560. The
   aspect-ratio sits on the IMG, so the framework's height:auto !important
   is not in the argument. */
body.layout-christmas .cl-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cl-gap-tiles);
  width: 100%;
  overflow: visible;
  padding: 0;
  margin: 0 0 1.5rem;
}
@media (min-width: 560px) {
  body.layout-christmas .cl-gallery {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}
body.layout-christmas .cl-gallery figure,
body.layout-christmas .cl-mosaic figure {
  display: block;
  margin: 0;
}
body.layout-christmas .cl-gallery a,
body.layout-christmas .cl-mosaic a,
body.layout-christmas .cl-tile {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(157, 180, 232, 0.14);
  border-radius: var(--cl-r-1);
  background-color: var(--cl-night-800);
}
body.layout-christmas .cl-gallery img,
body.layout-christmas .cl-mosaic img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(0.95);
  transition: transform 0.5s ease, filter 0.5s ease;
}
@media (hover: hover) {
  body.layout-christmas .cl-gallery a:hover img,
  body.layout-christmas .cl-mosaic a:hover img {
    transform: scale(1.05);
    filter: saturate(1.1) brightness(1.06);
  }
}
body.layout-christmas .cl-gallery figcaption,
body.layout-christmas .cl-mosaic figcaption {
  font-family: var(--cl-font-text);
  font-size: 0.8125rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--cl-text-dim);
  padding: 0.45rem 0.1rem 0;
}
body.layout-christmas .cl-gallery figcaption b,
body.layout-christmas .cl-gallery figcaption strong,
body.layout-christmas .cl-mosaic figcaption b,
body.layout-christmas .cl-mosaic figcaption strong {
  display: block;
  font-family: var(--cl-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cl-text);
}
@media (max-width: 559px) {
  body.layout-christmas .cl-gallery figcaption {
    font-size: 0.75rem;
  }
  /* Four tiles on phone, the rest behind a rail: an optional hub length cut
     (ruling B5). The page adds .cl-gallery--four and tags tiles 5+ with
     .cl-tile--more. */
  body.layout-christmas .cl-gallery--four .cl-tile--more {
    display: none;
  }
}
/* 8.21 THE MOSAIC (Sioux City). .cl-mosaic--lead: one lead tile spanning
   both columns, then four in a 2 x 2. Same height band as the hub's grid,
   different arrangement, so it stays a differentiation dimension. */
body.layout-christmas .cl-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cl-gap-tiles);
  margin: 0 0 1.5rem;
}
body.layout-christmas .cl-mosaic--lead > figure:first-child {
  grid-column: 1 / -1;
}
body.layout-christmas .cl-mosaic--lead > figure:first-child img {
  aspect-ratio: 2 / 1;
}
@media (min-width: 1024px) {
  body.layout-christmas .cl-mosaic {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9rem;
  }
  body.layout-christmas .cl-mosaic--lead > figure:first-child {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }
  body.layout-christmas .cl-mosaic--lead > figure:first-child img {
    aspect-ratio: auto;
    height: 100%;
  }
}
/* Legacy filmstrip hooks (.cl-shot) keep rendering as plain figures. */
body.layout-christmas .cl-shot {
  display: block;
  margin: 0;
}
body.layout-christmas .cl-shot figcaption {
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--cl-text-dim);
  padding-top: 0.5rem;
}
body.layout-christmas .cl-shot figcaption b,
body.layout-christmas .cl-shot figcaption strong {
  color: var(--cl-text);
  font-weight: 700;
}

/* 8.22 THE VIDEO FACADE (components-v2 7.5). HUB ONLY. Poster plus play disc,
   nothing from youtube.com until the button is pressed. The disc is
   --cl-night-600 with an amber ring and a white glyph: a play button is not a
   pricing action, so it is NOT orange. 56px on phones, 64 on desktop, glyph
   at least 24. Capped at 640px so a 1024-real poster never upscales 2.3x. */
body.layout-christmas .cl-video {
  position: relative;
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto 1.5rem;
}
body.layout-christmas .cl-video-btn,
body.layout-christmas button.cl-video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
  background-color: var(--cl-night-900);
  border: 1px solid var(--cl-rule);
  border-radius: var(--cl-r-2);
  padding: 0;
}
@media (max-width: 767px) {
  body.layout-christmas .cl-video-btn,
  body.layout-christmas button.cl-video {
    aspect-ratio: 21 / 9;
  }
}
body.layout-christmas .cl-video img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
}
body.layout-christmas .cl-video-disc {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 56px;
  height: 56px;
  border: 2px solid var(--cl-bulb);
  border-radius: 50%;
  background-color: var(--cl-night-600);
  box-shadow: var(--cl-glow-disc);
  transform: translate(-50%, -50%);
}
body.layout-christmas .cl-video-disc:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 24px;
  border-color: transparent transparent transparent #ffffff;
  transform: translate(-38%, -50%);
}
@media (min-width: 768px) {
  body.layout-christmas .cl-video-disc {
    width: 64px;
    height: 64px;
  }
  body.layout-christmas .cl-video-disc:before {
    border-width: 14px 0 14px 26px;
  }
}
body.layout-christmas .cl-video figcaption {
  font-family: var(--cl-font-display);
  font-size: var(--cl-caption);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cl-text-dim);
  margin: 0.6rem 0 0;
}
body.layout-christmas .cl-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
body.layout-christmas .cl-video.is-playing .cl-video-disc {
  display: none;
}

/* 8.23 JANUARY (components-v2 8.2). The disappearance coda: --cl-band-y-tight,
   copy centred in the 760px measure, NO photograph, the fade strand under
   the heading. A narrow centred measure reads as a deliberate quiet moment. */
body.layout-christmas .cl-january {
  background-color: var(--cl-night-900);
  padding: var(--cl-band-y-tight) 0;
}
body.layout-christmas .cl-january .cl-strand--fade {
  width: var(--cl-shell-text);
  margin: 0.5rem auto 1.5rem;
}

/* 8.24 THE TOWN CHIPS (components-v2 8.8). Flex wrap from 760; the 13.1 snap
   rail on phones when tagged .cl-scroll-x. Towns with a lawn location page
   are links; the rest are spans. 44px targets: these are the page's
   internal links into the location pages. */
body.layout-christmas .cl-towns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}
body.layout-christmas .cl-towns li {
  display: block;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}
body.layout-christmas .cl-towns li > * {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--cl-font-display);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: var(--cl-text);
  background-color: transparent;
  border: 1px solid var(--cl-rule);
  border-radius: var(--cl-r-1);
  padding: 0.28rem 0.75rem;
  text-decoration: none;
  white-space: nowrap;
}
body.layout-christmas .cl-towns li > a:hover,
body.layout-christmas .cl-towns li > a:focus-visible {
  border-color: var(--cl-bulb);
  color: var(--cl-bulb);
}
body.layout-christmas .cl-towns--compact {
  display: block;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--cl-text-dim);
  margin: 0 0 0.75rem;
}
@media (max-width: 767px) {
  body.layout-christmas .cl-towns.cl-scroll-x {
    flex-wrap: nowrap;
  }
}
body.layout-christmas .cl-paper .cl-towns li > * {
  color: var(--cl-ink);
  border-color: var(--cl-paper-edge);
}

/* 8.25 THE CLOSE (components-v2 8.5). The last screen, two paths, on the one
   lifted night. grid 1fr 1fr from 940. */
body.layout-christmas .cl-close {
  position: relative;
  overflow: hidden;
  text-align: left;
  min-height: 0;
  padding: var(--cl-band-y-tight) 0;
}
body.layout-christmas .cl-closegrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cl-gap-grid);
  align-items: center;
}
@media (min-width: 940px) {
  body.layout-christmas .cl-closegrid {
    grid-template-columns: 1fr 1fr;
  }
}
body.layout-christmas .cl-close .cl-hero-scrim {
  display: none;
}
body.layout-christmas .cl-close-img {
  display: none;
}
/* The three-step driveway close (judge graft 7, hub). */
body.layout-christmas .cl-steps {
  list-style: none;
  counter-reset: cl-step;
  padding: 0;
  margin: 0 0 1.5rem;
}
body.layout-christmas .cl-steps li {
  position: relative;
  display: block;
  counter-increment: cl-step;
  font-family: var(--cl-font-text);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--cl-text);
  padding: 0.35rem 0 0.35rem 2.6rem;
  margin: 0;
}
body.layout-christmas .cl-steps li:before {
  content: counter(cl-step);
  position: absolute;
  top: 0.45rem;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 1px solid var(--cl-accent);
  font-family: var(--cl-font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--cl-accent);
}
@media (min-width: 768px) {
  body.layout-christmas .cl-steps li:before {
    font-size: 20px;
  }
}

/* 8.26 THE CITY CHOOSER (hub only, components-v2 2.8). The whole card is the
   link; the branch phone is a separate control outside it. */
body.layout-christmas .cl-citygrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cl-gap-cards);
  margin: 0 0 1.25rem;
}
@media (min-width: 760px) {
  body.layout-christmas .cl-citygrid {
    grid-template-columns: 1fr 1fr;
  }
}
body.layout-christmas .cl-citycard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--cl-night-800);
  border: 1px solid var(--cl-rule);
  border-radius: var(--cl-r-2);
  color: var(--cl-text);
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
body.layout-christmas .cl-citycard:hover,
body.layout-christmas .cl-citycard:focus-visible {
  border-color: var(--cl-bulb);
  transform: translateY(-2px);
}
body.layout-christmas .cl-citycard img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
body.layout-christmas .cl-citycard .cl-eyebrow,
body.layout-christmas .cl-citycard .cl-h2,
body.layout-christmas .cl-citycard .cl-citycard-t,
body.layout-christmas .cl-citycard p {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}
body.layout-christmas .cl-citycard .cl-eyebrow {
  margin-top: 1.1rem;
  margin-bottom: 0.4rem;
}
body.layout-christmas .cl-citycard .cl-h2,
body.layout-christmas .cl-citycard-t {
  font-family: var(--cl-font-display);
  font-size: var(--cl-h3);
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 0.4rem;
}
body.layout-christmas .cl-citycard-go {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--cl-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cl-bulb);
  margin: auto 1.25rem 0.6rem;
}
body.layout-christmas .cl-citycard-go:after {
  content: "\2192";
  margin-left: 0.4rem;
}
/* Legacy hub split (two columns of city copy). */
body.layout-christmas .cl-city-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cl-gap-grid);
}
@media (min-width: 760px) {
  body.layout-christmas .cl-city-split {
    grid-template-columns: 1fr 1fr;
  }
}
/* Legacy style rows become .cl-expand rows; the class is kept as a no-op
   wrapper so old markup does not lose layout. */
body.layout-christmas .cl-styles {
  display: block;
}

/* 8.18 FORM SCOPE (Sioux Falls hero card).
   The Service Autopilot embed is a cross-origin iframe, so nothing inside it
   can be styled. What this owns is the card around it, an explicit height so
   the late paint cannot shift the hero, and a white well so the vendor form
   reads as a deliberate paper inset rather than an unstyled slab.
   The label and input resets below only bite if native fields are ever
   authored inside the card; they beat the framework at (0,1,1) and (0,2,1). */
body.layout-christmas .cl-form-scope {
  --cl-form-h: 700px;
  background-color: var(--cl-night-700);
  border: 1px solid var(--cl-night-600);
  border-radius: var(--cl-radius);
  box-shadow: 0 0 0 1px rgba(255, 216, 138, 0.1), 0 24px 48px -24px #000;
  color: var(--cl-text);
  padding: 1.25rem;
}
body.layout-christmas .cl-form-well {
  overflow: hidden;
  min-height: var(--cl-form-h);
  background-color: #ffffff;
  border-radius: 8px;
}
body.layout-christmas .cl-form-well iframe {
  display: block;
  width: 100%;
  height: var(--cl-form-h);
  border: 0;
}
body.layout-christmas .cl-form-scope label {
  position: static;
  top: auto;
  left: auto;
  display: block;
  font-size: 0.72rem;
  color: var(--cl-text-dim);
  margin: 0 0 0.25rem;
}
body.layout-christmas .cl-form-scope input[type="text"],
body.layout-christmas .cl-form-scope input[type="email"],
body.layout-christmas .cl-form-scope input[type="tel"],
body.layout-christmas .cl-form-scope select,
body.layout-christmas .cl-form-scope textarea {
  min-height: 48px;
  font-weight: 600;
  border-width: 1px;
  border-color: #d8e0ef;
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
}
@media (min-width: 992px) {
  body.layout-christmas .cl-form-scope {
    --cl-form-h: 660px;
  }
}

/* 8.27 THE FORM CARD CHROME, adapted after the KEEP above: the retired 10px
   radius and the 8px well radius step down to the 3px card radius, the card
   edge takes the hairline token. The label and input reset in 8.18 is
   byte-identical and load-bearing. */
body.layout-christmas .cl-form-scope {
  border-color: var(--cl-rule);
  border-radius: var(--cl-r-2);
  box-shadow: var(--cl-shadow-card);
}
body.layout-christmas .cl-form-well {
  border-radius: var(--cl-r-2);
}
body.layout-christmas .cl-formexpand summary {
  min-height: 44px;
}

/* 8.28 THE LEAD FORM (.cl-leadform, SA-FORM-BRIDGE 5.1 and 5.5). A two-field
   callback that posts to /api/christmas-lead through christmas-lead.js.
   Lives INSIDE .cl-form-scope so the framework's label{position:absolute}
   and input{border:3px} never reach it. Two visible text inputs only (first
   name, cell phone), an off-screen honeypot, 44px targets, a submit that is
   the SECONDARY (blue) button because a callback is not a pricing action,
   the hub-only segmented branch control, inline error text, and a fallback
   panel that shows the branch phone as a tel: link on any failure. Never a
   fake success. NEVER above the fold at any viewport.
   MARKUP (SF values; the hub adds the .cl-leadform-seg control and no
   data-cl-branch):
     <div class="cl-form-scope cl-form-well cl-leadwell">
       <form class="cl-leadform" id="cl-leadform-sf" novalidate
             data-cl-source="christmas-sioux-falls" data-cl-state="SD"
             data-cl-branch="SF" data-cl-phone="(605) 251-6880">
         <fieldset class="cl-leadform-seg" hub only ...>
         <div class="cl-leadform-field"> label + input + .cl-leadform-err </div>
         <div class="cl-leadform-field"> label + input + .cl-leadform-err </div>
         <div class="cl-leadform-hp" aria-hidden="true"> honeypot </div>
         <button class="cl-btn cl-leadform-submit" type="submit">Have Sharp call me</button>
         <p class="cl-leadform-status" role="status" aria-live="polite"></p>
         <noscript>...</noscript>
       </form>
       <div class="cl-leadform-done" hidden>...</div>
       <div class="cl-leadform-fallback" hidden>... <a href="tel:"> ...</div>
     </div> */
body.layout-christmas .cl-leadwell {
  min-height: 0;
  background-color: transparent;
  max-width: 560px;
  padding: 0;
  border: 0;
  box-shadow: none;
}
body.layout-christmas .cl-leadform {
  display: block;
  margin: 0;
}
body.layout-christmas .cl-leadform-field {
  display: block;
  margin: 0 0 0.9rem;
}
body.layout-christmas .cl-form-scope .cl-leadform-label {
  position: static;
  display: block;
  font-family: var(--cl-font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cl-bulb);
  margin: 0 0 0.35rem;
}
body.layout-christmas .cl-leadform-optional {
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--cl-text-dim);
}
body.layout-christmas .cl-form-scope .cl-leadform-input,
body.layout-christmas .cl-form-scope input[type="text"].cl-leadform-input,
body.layout-christmas .cl-form-scope input[type="tel"].cl-leadform-input {
  display: block;
  width: 100%;
  min-height: 50px;
  font-family: var(--cl-font-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: #ffffff;
  background-color: rgba(5, 10, 22, 0.7);
  border: 1px solid rgba(157, 180, 232, 0.32);
  border-radius: var(--cl-r-1);
  padding: 0.6rem 0.85rem;
  margin: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
body.layout-christmas .cl-form-scope .cl-leadform-input:focus,
body.layout-christmas .cl-form-scope .cl-leadform-input:focus-visible {
  outline: none;
  border-color: var(--cl-bulb);
  box-shadow: 0 0 0 3px rgba(255, 212, 138, 0.18);
}
body.layout-christmas .cl-form-scope .cl-leadform-input[aria-invalid="true"] {
  border-color: var(--cl-red-lift);
  box-shadow: 0 0 0 3px rgba(255, 143, 147, 0.18);
}
body.layout-christmas .cl-leadform-err {
  display: block;
  min-height: 0;
  font-family: var(--cl-font-text);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--cl-red-lift);
  margin: 0.3rem 0 0;
}
body.layout-christmas .cl-leadform-err:empty {
  display: none;
}
/* The honeypot: visually removed WITHOUT display:none or visibility:hidden,
   because well-written bots skip those. */
body.layout-christmas .cl-leadform-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* The honeypot input is never seen, but it is still inside #app and the
   8.18 KEEP gives every scoped input a 6px radius, which QA V4 counts. */
body.layout-christmas .cl-form-scope .cl-leadform-hp input[type="text"] {
  border-radius: 0;
}
body.layout-christmas .cl-leadform-submit {
  width: 100%;
  margin: 0.25rem 0 0;
}
body.layout-christmas .cl-leadform-status {
  font-family: var(--cl-font-text);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--cl-text-dim);
  margin: 0.75rem 0 0;
}
body.layout-christmas .cl-leadform-status:empty {
  display: none;
}
body.layout-christmas .cl-leadform-nojs {
  font-size: 0.94rem;
  color: var(--cl-text);
  margin: 0.75rem 0 0;
}
body.layout-christmas .cl-leadform-nojs a,
body.layout-christmas .cl-leadform-done a,
body.layout-christmas .cl-leadform-fallback a {
  color: var(--cl-bulb);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.layout-christmas .cl-leadform-done,
body.layout-christmas .cl-leadform-fallback {
  border: 1px solid var(--cl-rule);
  border-left: 3px solid var(--cl-accent);
  border-radius: var(--cl-r-1);
  background-color: rgba(16, 28, 60, 0.4);
  padding: var(--cl-pad-panel);
}
body.layout-christmas .cl-leadform-done[hidden],
body.layout-christmas .cl-leadform-fallback[hidden] {
  display: none;
}
body.layout-christmas .cl-leadform-done .cl-h3,
body.layout-christmas .cl-leadform-fallback .cl-h3 {
  margin-bottom: 0.4rem;
}
body.layout-christmas .cl-leadform-done p,
body.layout-christmas .cl-leadform-fallback p {
  margin-bottom: 0.5rem;
}
body.layout-christmas .cl-leadform-fallback .cl-phone {
  margin-top: 0.4rem;
}
/* THE SEGMENTED BRANCH CONTROL (hub only). Two real radio inputs styled as a
   pill pair; keyboard operable (arrow keys move between radios, the focus
   ring shows on the label), 44px targets, never orange. It sets branch SD/IA
   and the phone shown in the fallback. */
body.layout-christmas .cl-leadform-seg {
  display: block;
  border: 0;
  padding: 0;
  margin: 0 0 0.9rem;
  min-width: 0;
}
body.layout-christmas .cl-leadform-seg legend {
  display: block;
  font-family: var(--cl-font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cl-bulb);
  padding: 0;
  margin: 0 0 0.35rem;
}
body.layout-christmas .cl-leadform-seg-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid rgba(157, 180, 232, 0.32);
  border-radius: var(--cl-r-2);
  overflow: hidden;
}
body.layout-christmas .cl-leadform-seg input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  margin: -1px;
  opacity: 0;
}
body.layout-christmas .cl-form-scope .cl-leadform-seg label {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-family: var(--cl-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cl-text);
  background-color: rgba(5, 10, 22, 0.5);
  padding: 0.5rem 0.75rem;
  margin: 0;
  cursor: pointer;
  text-align: center;
}
body.layout-christmas .cl-leadform-seg label + input + label,
body.layout-christmas .cl-leadform-seg-row > :nth-child(2) {
  border-left: 1px solid rgba(157, 180, 232, 0.32);
}
body.layout-christmas .cl-leadform-seg input[type="radio"]:checked + label {
  color: #ffffff;
  background-color: var(--cl-blue);
}
body.layout-christmas .cl-leadform-seg input[type="radio"]:focus-visible + label {
  outline: 3px solid var(--cl-amber-hot);
  outline-offset: -3px;
}
body.layout-christmas .cl-leadform-seg .cl-leadform-err {
  margin-top: 0.35rem;
}
/* On the paper band the form keeps its night chrome: it sits in a
   .cl-form-scope card, which section 11.5 already paints night. */
body.layout-christmas .cl-paper .cl-leadform-status,
body.layout-christmas .cl-paper .cl-leadform-nojs {
  color: var(--cl-ink-body);
}

/* ---------- 9. MOTION -------------------------------------------------- */
/* COMPOSITOR ONLY. Opacity and transform, nothing else, and nothing above
   the fold animates except the strand. DOES NOT SHIP: Ken Burns, the scrim
   bloom, the scroll cue, parallax, any scroll-linked transform, snowfall, the
   hero CTA pulse, and any animation of background-position, box-shadow,
   filter (other than the gallery hover), width, height, top or left. */

/* B. REVEAL ON SCROLL. THE DEFAULT IS VISIBLE: the CSS hides nothing until
   christmas-lead.js adds html.js-cl-reveal, so a script failure costs the
   animation, not the content. NEVER on the hero, the price card, any CTA, the
   guarantee, a phone number, an FAQ answer, or an anchor target. */
html.js-cl-reveal body.layout-christmas [data-cl-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--cl-ease), transform 0.7s var(--cl-ease);
}
html.js-cl-reveal body.layout-christmas [data-cl-reveal].is-in {
  opacity: 1;
  transform: none;
}
/* C. HERO RISE, trimmed. .6s, translate and opacity only, no blur, no delay
   past 200ms. NEVER on the CTA. */
@keyframes cl-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
body.layout-christmas .cl-rise {
  animation: cl-rise 0.6s var(--cl-ease) both;
}
body.layout-christmas .cl-rise--2 { animation-delay: 0.10s; }
body.layout-christmas .cl-rise--3 { animation-delay: 0.20s; }
body.layout-christmas .cl-cta.cl-rise,
body.layout-christmas .cl-ctarow.cl-rise {
  animation: none;
}
/* D. Button hover is on the buttons themselves (section 7). E. Gallery hover
   is on the tiles (8.13). F. Nav state is on #nav (section 2). */
@media (hover: hover) {
  body.layout-christmas .cl-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 212, 138, 0.35);
  }
}
/* G. .cl-twinkle, at most nine elements per page. Opacity only. Motion-off
   lands it on opacity 1, which is full brightness. */
@keyframes cl-twinkle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
body.layout-christmas .cl-twinkle {
  animation: cl-twinkle 3.2s ease-in-out infinite;
}
body.layout-christmas .cl-twinkle:nth-child(2n) { animation-duration: 3.9s; animation-delay: -1.3s; }
body.layout-christmas .cl-twinkle:nth-child(3n) { animation-duration: 4.6s; animation-delay: -2.1s; }

/* REDUCED MOTION, kill switch (a): the page-level block. Kill switch (b) is
   PART C's own block beside the strand rules in section 6, and it stays there
   even though this one exists. Both land on FULL brightness so motion-off
   reads as lit rather than dimmed. The same set again is driven by the
   .cl-motion-off body class. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.layout-christmas *,
  body.layout-christmas *:before,
  body.layout-christmas *:after {
    animation: none !important;
    transition: none !important;
  }
  html.js-cl-reveal body.layout-christmas [data-cl-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  body.layout-christmas .cl-hero-scrim,
  body.layout-christmas .cl-rise,
  body.layout-christmas .cl-twinkle,
  body.layout-christmas .cl-strand:before,
  body.layout-christmas .cl-strand:after {
    opacity: 1;
  }
}
body.layout-christmas.cl-motion-off *,
body.layout-christmas.cl-motion-off *:before,
body.layout-christmas.cl-motion-off *:after {
  animation: none !important;
  transition: none !important;
}
html.js-cl-reveal body.layout-christmas.cl-motion-off [data-cl-reveal] {
  opacity: 1 !important;
  transform: none !important;
}
body.layout-christmas.cl-motion-off .cl-hero-scrim,
body.layout-christmas.cl-motion-off .cl-rise,
body.layout-christmas.cl-motion-off .cl-twinkle,
body.layout-christmas.cl-motion-off .cl-strand:before,
body.layout-christmas.cl-motion-off .cl-strand:after {
  opacity: 1;
}

/* ==========================================================================
   11. SHARED FIX PACK
   ==========================================================================
   Added by the design-system agent at the fix stage, 2026-08-28, from the
   three QA reports and the concept judge's approved grafts, and carried into
   REBUILD 2. Everything here is a DESIGN SYSTEM concern. Blocks marked KEEP
   in reveal-anatomy/REVEAL-SYSTEM.txt section 4 are byte-identical to the
   pre-Phase-B file; the assembler proves it.
   ========================================================================== */

/* ---------- 11.1 NAV BAND AT 1024 TO 1279 --------------------------------
   The desktop nav turns on at 1024 but the menu row does not fit beside the
   168px logo until about 1110. Measured on all three pages: the <ul> bottom
   sits at y116-117 while the 96px band ends at y96, so the menu overflowed
   onto the hero and the bulb-strand hairline was drawn straight through
   "Lawn Care", "Pest Control" and the pill. 148 rather than 136: at 136 the
   pill bottom measured y129 and the strand wire y136, a 7px gap that reads
   as a collision. The nav HEIGHT is unchanged from the previous file; the
   body padding is now 0 !important at every width (REBUILD 2, brief 1.11),
   because the transparent nav sits over the hero, and --cl-nav-h carries the
   148 to the scroll margin and the scrim's nav stop instead.
   2026-09-24: band extended from 1123 to 1279. At 1124-1279 the one-row
   menu left too little room for the Call us button (hub, wrapped to two
   lines at 1124-1207) and the visible phone number (SF and SC, wrapped at
   1124-1269); 1280-wide laptops with a scrollbar land at about 1265. */
@media (min-width: 1024px) and (max-width: 1279px) {
  body.layout-christmas {
    padding-top: 0 !important;
  }
  body.layout-christmas #nav {
    height: 148px;
  }
  body.layout-christmas #nav .inner {
    align-items: center;
  }
}

/* ---------- 11.2 (RETIRED) -------------------------------------------------
   Held the short-laptop hero height (min(84vh, 660px)). The hero is now
   clamp(560px, 62vw, 760px) at 760 and up (section 8.1) and carries no
   viewport-height unit; the fold contract at 1024 x 768 is met by the
   bottom-anchored stack inside the 635px hero. */

/* ---------- 11.3 (RETIRED) -------------------------------------------------
   Held the BLUE HOUR scrim token sets and gradient stacks. The Reveal scrim
   lives with the hero in section 8.1: the plate gradient under 760, the
   seven-stop desktop gradient with per-page ramp starts from 760, and the
   directional wash from 1024. --soft and --strong survive as alpha hooks. */

/* ---------- 11.4 (RETIRED) -------------------------------------------------
   The badge ladder is 12.1 (KEEP) plus the hero positions in 8.1. */

/* ---------- 11.5 A FORM CARD ON A PAPER BAND ------------------------------
   .cl-form-scope paints itself --cl-night-700 but is not a .cl-card, so the
   paper band's ink colours won every text rule inside it. Measured on the
   Sioux City build: the h3 over the page's only lead form was 1.08:1.
   Two halves to the fix. First, a .cl-card on a paper band now flips its
   eyebrow to amber (the one text colour the card rules had missed). Second,
   a .cl-form-scope that is ALSO a .cl-card gets the night text set. The
   .cl-card class is the switch: a page that puts a transparent form on the
   ivory ground (Sioux Falls does) simply does not add it and keeps ink. */
body.layout-christmas .cl-paper .cl-card .cl-eyebrow {
  color: var(--cl-bulb);
}
body.layout-christmas .cl-paper .cl-form-scope.cl-card h2,
body.layout-christmas .cl-paper .cl-form-scope.cl-card h3,
body.layout-christmas .cl-paper .cl-form-scope.cl-card .cl-h2,
body.layout-christmas .cl-paper .cl-form-scope.cl-card .cl-h3,
body.layout-christmas .cl-paper .cl-form-scope.cl-card .cl-deck {
  color: var(--cl-text);
}
body.layout-christmas .cl-paper .cl-form-scope.cl-card p,
body.layout-christmas .cl-paper .cl-form-scope.cl-card .cl-list li,
body.layout-christmas .cl-paper .cl-form-scope.cl-card .cl-caption {
  color: var(--cl-text-dim);
}
/* A vendor iframe is white and we cannot reach inside it. Cap it and frame it
   so it reads as a deliberate paper inset instead of the brightest slab on a
   night page. */
body.layout-christmas .cl-form-well {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--cl-night-600);
  box-shadow: inset 0 0 0 1px rgba(255, 216, 138, 0.10);
}
/* On a paper band the white iframe is not the brightest thing on the page,
   the band is, so the well drops the night frame and takes an ink hairline
   instead. Sioux Falls hand-wrote exactly this rule page-scoped before this
   section existed; it is here so the next page gets it for free. */
body.layout-christmas .cl-paper .cl-form-well {
  background-color: transparent;
  border-color: rgba(27, 31, 42, 0.14);
  box-shadow: none;
}

/* ---------- 11.6 QUOTE CARD  (.cl-quote-card) -----------------------------
   The judge's number one graft: the quote is TYPE first, at reading size,
   with the name, source and city under it. The original capture drops
   beneath as a RECEIPT, framed, so a screenshot never lands on the night
   ground as a raw white rectangle. The words become real indexable text.
   REBUILD 2 takes the Reveal's face (REVEAL-SYSTEM 3.18): 1px --cl-rule,
   3px radius, --cl-night-800 fill, flex column.

   <figure class="cl-quote-card">
     <blockquote class="cl-quote-text">...the sentence, verbatim...</blockquote>
     <figcaption class="cl-quote-meta">
       <span class="cl-quote-name">Teresa Kentner</span>
       <span class="cl-quote-src">Google review, Sioux City</span>
     </figcaption>
     <div class="cl-receipt">
       <img class="cl-shot" src="..." alt="Screenshot of the review quoted above" ...>
     </div>
   </figure>
   A card without a capture still carries name, source and city (ruling B2).
   A capture is never upscaled: the two 402px captures are capped at 402 CSS
   px by the builder's sizes attribute and the max-width below. */
body.layout-christmas .cl-quote-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background-color: var(--cl-night-800);
  border: 1px solid var(--cl-rule);
  border-radius: var(--cl-r-2);
  box-shadow: none;
  padding: 0;
  margin: 0;
}
body.layout-christmas .cl-quote-card .cl-stars {
  padding: 1.3rem 1.5rem 0;
}
body.layout-christmas .cl-quote-text {
  font-family: var(--cl-font-text);
  font-size: 1.06rem;
  font-weight: 400;
  line-height: 1.6;
  color: #e7edfb;
  border: 0;
  padding: 1.4rem 1.5rem 1.1rem;
  margin: 0;
}
body.layout-christmas .cl-quote-card .cl-stars + .cl-quote-text {
  padding-top: 0.8rem;
}
body.layout-christmas .cl-quote-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-family: var(--cl-font-display);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cl-text-dim);
  padding: 0 1.5rem 1.2rem;
  margin: 0;
}
body.layout-christmas .cl-quote-name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #ffffff;
}
body.layout-christmas .cl-quote-src {
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.10em;
  color: var(--cl-text-dim);
}
/* The receipt pins to the foot of the card (margin-top auto) so a short card
   stretched to a taller sibling keeps its quote and its name together. */
body.layout-christmas .cl-receipt {
  width: 100%;
  max-width: none;
  background-color: #0f1730;
  border: 0;
  border-top: 1px solid var(--cl-rule);
  border-radius: 0 0 var(--cl-r-2) var(--cl-r-2);
  padding: 0.75rem;
  margin: auto 0 0;
}
body.layout-christmas .cl-receipt img,
body.layout-christmas .cl-receipt .cl-shot {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: var(--cl-r-1);
  opacity: 0.94;
  margin: 0 auto;
}
body.layout-christmas .cl-receipt figcaption {
  font-family: var(--cl-font-display);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cl-text-dim);
  padding-top: 0.4rem;
  text-align: center;
}
/* On a paper band the card keeps its night chrome, same rule as .cl-card. */
body.layout-christmas .cl-paper .cl-quote-card .cl-quote-text,
body.layout-christmas .cl-paper .cl-quote-card .cl-quote-name {
  color: #e7edfb;
}
body.layout-christmas .cl-paper .cl-quote-card .cl-quote-src {
  color: var(--cl-text-dim);
}

/* ---------- 11.7 TAP TO EXPAND ROWS  (.cl-expand) -------------------------
   The judge's graft for the included list and the style descriptions: 62px
   rows that open on tap, which is the single biggest length lever on a phone.
   Native <details>, zero JS, and never used for the price or the guarantee,
   which must stay open.

   <div class="cl-expand">
     <details>
       <summary>Design and custom cut</summary>
       <div class="cl-expand-body"><p>One or two sentences.</p></div>
     </details>
   </div> */
body.layout-christmas .cl-expand {
  border-top: 1px solid var(--cl-night-600);
  margin: 0 0 1.5rem;
}
body.layout-christmas .cl-expand details {
  border-bottom: 1px solid var(--cl-night-600);
}
body.layout-christmas .cl-expand summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 62px;
  list-style: none;
  cursor: pointer;
  font-family: var(--cl-font-text);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cl-text);
  padding: 0.75rem 0;
}
body.layout-christmas .cl-expand summary::-webkit-details-marker {
  display: none;
}
/* Same box and the same stroke as the FAQ chevron in 8.13, for the same
   reason. Stated once here rather than three times in the polish sections. */
body.layout-christmas .cl-expand summary:after {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-right: 3px solid var(--cl-bulb);
  border-bottom: 3px solid var(--cl-bulb);
  transform: rotate(45deg);
  transition: transform 200ms ease;
  margin-bottom: 4px;
}
body.layout-christmas .cl-expand details[open] summary:after {
  transform: rotate(-135deg);
  margin-top: 4px;
  margin-bottom: 0;
}
body.layout-christmas .cl-expand .cl-expand-body {
  padding: 0 0 1.1rem;
}
body.layout-christmas .cl-expand .cl-expand-body p:last-child {
  margin-bottom: 0;
}
/* Paper variant. */
body.layout-christmas .cl-paper .cl-expand,
body.layout-christmas .cl-paper .cl-expand details {
  border-color: rgba(27, 31, 42, 0.14);
}
body.layout-christmas .cl-paper .cl-expand summary {
  color: var(--cl-ink);
}
body.layout-christmas .cl-paper .cl-expand summary:after {
  border-color: var(--cl-blue);
}

/* ---------- 11.8 COMPARISON AS CARDS  (.cl-compare-cards) -----------------
   The judge's graft: four options, four FIXED row labels, and Sharp concedes
   one row. It replaces the six-column table on a phone, where that table can
   only scroll sideways. Row labels repeat inside every card on purpose: a
   card read on its own still says what it is answering.

   <div class="cl-compare-cards">
     <div class="cl-compare-card">
       <h3>Do it yourself</h3>
       <div class="cl-compare-row">
         <span class="cl-compare-label">Up front</span>
         <span class="cl-compare-value cl-yes">Cheapest</span>
       </div>
       ... four rows, same four labels in the same order in every card ...
     </div>
     ... four cards, Sharp last with class="cl-compare-card is-sharp" ...
   </div> */
body.layout-christmas .cl-compare-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0 0 1.5rem;
}
body.layout-christmas .cl-compare-card {
  display: flex;
  flex-direction: column;
  background-color: var(--cl-night-700);
  border: 1px solid var(--cl-night-600);
  border-radius: var(--cl-radius);
  padding: 1.25rem;
}
body.layout-christmas .cl-compare-card h3 {
  margin: 0 0 0.75rem;
}
body.layout-christmas .cl-compare-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem;
  border-top: 1px solid var(--cl-night-600);
  padding: 0.6rem 0;
}
body.layout-christmas .cl-compare-row:last-child {
  padding-bottom: 0;
}
body.layout-christmas .cl-compare-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cl-text-dim);
}
body.layout-christmas .cl-compare-value {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--cl-text);
}
/* Sharp's card is the only one with a warm edge, and it is last. */
body.layout-christmas .cl-compare-card.is-sharp {
  border-color: rgba(255, 216, 138, 0.45);
  box-shadow: 0 0 0 1px rgba(255, 216, 138, 0.14), 0 24px 48px -24px #000;
}
/* NIGHT CHROME ON A PAPER BAND. Section 4 gives .cl-card its own text set so
   a night card can sit on the ivory ground and keep night ink. Every new
   night-chrome component needs the same treatment or it inherits the paper
   band's ink and paints dark text on a dark card. Measured before this rule:
   the four .cl-compare-card h3 headings rendered #1b1f2a on #142449, about
   1.3:1, effectively invisible. Any FUTURE component that paints itself
   --cl-night-700 must be added to this list.
   CONSOLIDATION: this belongs merged into section 4's .cl-paper .cl-card
   block; it lives here so the fix stage does not rewrite a shared section
   other agents are reading. */
body.layout-christmas .cl-paper .cl-compare-card h2,
body.layout-christmas .cl-paper .cl-compare-card h3,
body.layout-christmas .cl-paper .cl-compare-card .cl-h3,
body.layout-christmas .cl-paper .cl-quote-card h2,
body.layout-christmas .cl-paper .cl-quote-card h3 {
  color: var(--cl-text);
}
body.layout-christmas .cl-paper .cl-compare-card p,
body.layout-christmas .cl-paper .cl-compare-card .cl-caption,
body.layout-christmas .cl-paper .cl-compare-card .cl-list li,
body.layout-christmas .cl-paper .cl-quote-card p,
body.layout-christmas .cl-paper .cl-quote-card .cl-caption {
  color: var(--cl-text-dim);
}
body.layout-christmas .cl-paper .cl-compare-card .cl-eyebrow,
body.layout-christmas .cl-paper .cl-quote-card .cl-eyebrow {
  color: var(--cl-bulb);
}

/* THE MARK IS AN ASSET, THE VALUE IS BODY COPY. .cl-yes and .cl-no were
   authored for a white comparison TABLE that no page ships any more: it
   printed a 16px pseudo check and a 14x2px pseudo dash, and it painted every
   yes bold green. Inside a card the real icon carries the answer, the brief
   bans the thin dash outright, and a whole column of bold green body copy
   reads as highlighting rather than as information. The table and both
   pseudo elements are gone (section 8.12 deleted), so all that is left to
   say is that the values are ordinary text. All three pages shipped their
   own version of this; it is one rule now. .cl-mid is the hub concession
   row and takes the same ink. */
body.layout-christmas .cl-compare-cards .cl-yes,
body.layout-christmas .cl-compare-cards .cl-no,
body.layout-christmas .cl-compare-cards .cl-mid {
  color: var(--cl-text);
  font-weight: 400;
}
@media (min-width: 768px) {
  body.layout-christmas .cl-compare-cards {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  body.layout-christmas .cl-compare-cards {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
}

/* ---------- 11.9 LAYOUT SHIFT: FALLBACK FONT METRICS ----------------------
   The remaining shift on these pages is the webfont swap changing the LINE
   COUNT of a heading, which then re-lays the bottom anchored hero stack.
   A metric-adjusted fallback family costs nothing to download (src is
   local() only) but it is NOT free: it adds a SECOND swap, because the
   local face resolves asynchronously too. Generic -> metric fallback ->
   real face. That only pays if the metric fallback is genuinely closer than
   the generic one, so both families were A/B measured on all three pages at
   390, 1024 and 1440 rather than assumed.

   TITILLIUM: kept. Summed CLS across the nine cases 0.141 with it, 0.153
   without, and it is never worse on any single case. Measured width ratio
   Titillium/Arial 0.955 at 400, 0.899 at 600, 0.916 at 700; 95% is the
   right single value for a body face that is mostly 400.

   TEKO: REMOVED, and this is the interesting result. Summed CLS was 0.287
   with it and 0.141 without, and the hub went from 0.007 to 0.057 at 1024.
   Four size-adjust values were tried (58, 60, 62.5, 66 per cent) and the hub
   scored 0.0569 at every one of them, which is the signature of the extra
   swap rather than of bad metrics: no width value can fix a shift caused by
   swapping twice. Teko also has no single honest ratio, because it is a
   condensed face whose width against Arial moves with weight (0.56 at 400,
   0.62 at 500, 0.67 at 600, 0.74 at 700) while Arial has only two weights.
   Do not re-add it without re-running rebuild/scripts-css/clsab3.js. */
@font-face {
  font-family: "Titillium Metric Fallback";
  src: local("Arial"), local("Liberation Sans");
  size-adjust: 95%;
  font-weight: 400 900;
  font-display: swap;
}
body.layout-christmas {
  --cl-font-text: "Titillium Web", "Titillium Metric Fallback", Arial, Helvetica, sans-serif;
}

/* ---------- 11.10 MOBILE HERO BUTTON STACK -------------------------------
   The hub hero carries a branch phone button per city on top of the orange
   CTA and the two city ghosts, and under 768px that stacks five full width
   buttons over a sticky bar that already has a Call Us button. Hide the phone
   buttons on phones; the sticky bar is the call action there.
   HOOK: the page adds class="cl-hero-actions" to the row and
   class="cl-phone-btn" to each phone button. */
@media (max-width: 767px) {
  body.layout-christmas .cl-hero-actions .cl-phone-btn {
    display: none;
  }
}

/* ---------- 11.11 FOOTER -------------------------------------------------
   background-bluewave is the lawn brand's device and is banned on these three
   pages, but it ships inside the sitewide footer markup, which we keep
   intact. Suppress it in CSS and let the footer join the night ground. The
   two footer call buttons inherit .button.secondary, which is lawn green, the
   one colour this system reserves for checkmarks. */
body.layout-christmas #app > footer.container .background-bluewave {
  display: none;
}
body.layout-christmas #app > footer.container {
  background-color: var(--cl-night-900);
}
body.layout-christmas #app > footer.container .legal.background-secondary {
  background-color: var(--cl-night-800);
  background-image: none;
  /* styles1.1.css now inks this band #10290a for the lawn green; on night
     that is about 1.2:1, so the band and its links carry the legal token. */
  color: var(--cl-text-legal);
}
body.layout-christmas #app > footer.container .buttons a.button.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Measured at 42px, which is 2px short of the tap target minimum. */
  min-height: 44px;
  color: var(--cl-text);
  background-color: transparent;
  border: 2px solid rgba(255, 216, 138, 0.45);
}
body.layout-christmas #app > footer.container .buttons a.button.secondary:hover,
body.layout-christmas #app > footer.container .buttons a.button.secondary:focus {
  background-color: rgba(255, 216, 138, 0.12);
  border-color: var(--cl-bulb);
}
body.layout-christmas #app > footer.container .buttons a.button.secondary svg {
  fill: var(--cl-bulb);
}

/* ---------- 11.12 SMALL SHARED CORRECTIONS -------------------------------- */
/* An h2 that follows a card had its 48x2 accent rule sitting on the card's
   bottom edge. */
body.layout-christmas .cl-card + h2,
body.layout-christmas .cl-card + .cl-h2 {
  margin-top: 2.5rem;
}
/* A standalone navigational text link on its own line is a button in every
   way except appearance, so it takes a 44px target. Inline links in prose do
   not; that is why this is a modifier and not a change to .cl-link. */
body.layout-christmas .cl-link--block {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* Optional ghost treatment for a phone pill that sits next to the orange CTA,
   so the money button stays the only filled object on the fold. Not the
   default: on the hub city split .cl-phone sits beside a .cl-ghost and the
   two have to stay tellable apart. */
body.layout-christmas .cl-phone--ghost {
  color: var(--cl-text);
  background-color: transparent;
  border-color: rgba(242, 245, 251, 0.55);
}
body.layout-christmas .cl-phone--ghost:hover,
body.layout-christmas .cl-phone--ghost:focus {
  color: #ffffff;
  background-color: var(--cl-blue);
  border-color: var(--cl-blue);
}
body.layout-christmas .cl-paper .cl-phone--ghost {
  color: var(--cl-blue);
  border-color: rgba(47, 83, 162, 0.55);
}
/* ---------- 11.13 TAP TARGETS IN THE SITEWIDE CHROME ---------------------
   The nav and the footer ship with the site and their markup is kept intact,
   so anything wrong with them is fixed here or not at all. Measured at 390
   on all three pages: footer menu rows 30px, the social icons 32x32, the
   legal links 24px, and the mobile nav menu rows 36px. All are navigational
   links on their own line, so the inline-in-prose exception does not apply
   and all of them take a 44px target.
   Scoped to body.layout-christmas: this does not touch the other 491 pages.
   Height is added with padding rather than a fixed height so nothing clips
   if a label wraps. The desktop hover menus (top level 40px, submenu rows
   37px, mega-menu city rows 28px) are deliberately NOT touched: they are
   pointer targets inside a hover-opened panel, they clear the 24px AA
   minimum, and forcing 44px would re-flow the four-column mega menu. */
@media (max-width: 1023px) {
  body.layout-christmas #nav-menus > ul.is-menu > li > a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}
/* The footer menu rows are the one exception to the 44px line above, and it
   is a measured trade: three pages, about thirty links each, and 44px rows
   grew every page by 404px. 30px still clears the WCAG 2.5.8 AA target
   minimum of 24px with room, and it buys back the height the mandated content
   needs. The nav rows, the social icons and the legal links keep their 44px;
   those are the ones a thumb actually hunts for. */
body.layout-christmas #app > footer.container ul.is-menu > li > a,
body.layout-christmas #app > footer.container .list-services ul.is-menu > li > a {
  display: flex;
  align-items: center;
  min-height: 30px;
}
body.layout-christmas #app > footer.container .company .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}
body.layout-christmas #app > footer.container .legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cl-text-legal);
}

/* ---------- 11.14 THE HERO BADGE IS NOT A LAYOUT SHIFT --------------------
   The badge is an <img> in the hero. If a page ever ships it without
   width/height attributes the hero re-lays when it decodes, and because the
   hero stack is bottom anchored that shift moves the H1, the deck and the
   CTA at once. aspect-ratio gives the box its height before the bytes
   arrive, so the reserve holds either way. icon-christmas-1.webp is square.
   Same reasoning for the strand: it is a pseudo element with an explicit
   height, which is why it never shifted, and it stays that way. */
body.layout-christmas .cl-hero-badge {
  aspect-ratio: 1 / 1;
}
/* ---------- 11.15 COPY OVER A PHOTOGRAPH ---------------------------------
   The scrim leaves the middle of the frame alone (section 8.1), and that has
   a consequence: from 760 the hero stack sits over the photograph, and any
   glyph that crosses a lit roofline, a gable run or a porch lamp loses its
   background. Measured on the previous pages (rebuild/scripts-css/
   contrast2.js): median contrast in the text boxes was 8 to 16, but five
   percent of each box sat on a light bulb. Darkening the frame until the
   worst pixel passes would cost the photograph and break the scrim ceiling.
   A tight dark shadow solves it where it happens: zero bytes, no plate, no
   dimming of a single bulb. REBUILD 2 uses the three Reveal tiers from the
   token sheet: --cl-shadow-onphoto for the H1, -2 for the deck and lead
   rows, -3 for the proof line and the small rows.

   THE LANDMINE. A text-shadow list REPLACES, it does not merge. Every new
   element set over a hero photograph MUST be added to these lists by hand,
   or it silently loses its ground the moment it crosses a lit bulb. The
   .cl-glow word inside the H1 is in the list with its own glow appended,
   and the breadcrumb IS here because ruling X4/G1 puts it at the end of the
   hero stack, over the photograph from 760. */
body.layout-christmas .cl-hero .cl-hero-inner .cl-eyebrow,
body.layout-christmas .cl-hero .cl-hero-inner .cl-geo,
body.layout-christmas .cl-hero .cl-hero-inner .cl-micro,
body.layout-christmas .cl-hero .cl-hero-inner .cl-caption,
body.layout-christmas .cl-hero .cl-hero-inner .cl-proofstrip,
body.layout-christmas .cl-hero .cl-hero-inner .cl-crumbs,
body.layout-christmas .cl-hero .cl-hero-inner .cl-citypick-l,
body.layout-christmas .cl-close .cl-inner .cl-eyebrow,
body.layout-christmas .cl-close .cl-inner .cl-micro,
body.layout-christmas .cl-close .cl-inner .cl-caption {
  text-shadow: var(--cl-shadow-onphoto-3);
}
body.layout-christmas .cl-hero .cl-hero-inner .cl-deck,
body.layout-christmas .cl-close .cl-inner .cl-deck {
  text-shadow: var(--cl-shadow-onphoto-2);
}
body.layout-christmas .cl-hero h1,
body.layout-christmas .cl-close h1 {
  text-shadow: var(--cl-shadow-onphoto);
}
body.layout-christmas .cl-hero h1 .cl-glow,
body.layout-christmas .cl-close h1 .cl-glow {
  text-shadow: var(--cl-glow-word), var(--cl-shadow-onphoto);
}
/* A button already carries its own ground, so it never takes the shadow. */
body.layout-christmas .cl-hero .cl-ctarow a,
body.layout-christmas .cl-close .cl-ctarow a {
  text-shadow: none;
}

/* ---------- 11.16 FOOTER GLYPHS DO NOT SHRINK ----------------------------
   12.3 (KEEP) declares the footer svg at 20px, but the two call buttons in
   the footer's .buttons row are flex rows and let the glyph shrink beside a
   long label. Measured at 390: 18.31px and 16.92px against the 20px floor
   (brief 7.4 I7). flex-shrink 0 and a min-width hold it. */
body.layout-christmas #app > footer.container svg {
  flex: 0 0 20px;
  min-width: 20px;
}
/* The footer's three .button pills take the framework's 5px radius. Brief
   1.5 exempts only the nav pill and the sticky bar from the 2 to 3px rule
   (QA V4), so they step down to the card radius; 11.11 (KEEP) owns the rest
   of their face. */
body.layout-christmas #app > footer.container .button {
  border-radius: var(--cl-r-2);
}

/* SHARED FIX PACK ends */


/* ==========================================================================
   12. POLISH STAGE  (2026-09-01)
   ==========================================================================
   One agent, one pass, after the fix and graft stages. Everything here either
   unifies something the three pages had each solved differently, or applies a
   measured recommendation from rebuild/audit-polish. KEEP blocks are
   byte-identical to the pre-Phase-B file.
   ========================================================================== */

/* ---------- 12.1 THE BADGE AND THE SEAL, ONE IMPLEMENTATION ---------------
   All three pages shipped .cl-badge--html / .cl-seal--html markup and three
   different sets of rules for it: a green disc on the hub, a dark rounded
   rectangle on Sioux Falls, a second rounded rectangle on Sioux City. Same
   object, three faces. The page blocks are deleted; this is the only
   implementation.

   COLOUR (orchestrator decision 6h): dark green disc with an amber rule for
   the deadline badge, brand red disc with an amber rule for the guarantee
   seal. Line 1 is amber on both; lines 2 and 3 are paper white.
   Measured contrast: amber #ffd88a on #0d5b2a 6.2:1, white on #0d5b2a 9.1:1,
   amber on #c8102e 4.9:1, white on #c8102e 6.7:1. All clear 4.5:1.

   SIZE LADDER (decision 6h): 72px under 768, 104px from 768 to 1023, 132px
   from 1024. The seal never goes below 96px, because SATISFACTION is twelve
   characters and its chord runs out first; that floor is the icon audit's own
   seal minimum (audit-polish/ICONS.txt 7.1).

   TYPE. Line sizes are ems of the badge diameter so one set of numbers holds
   at every step of the ladder, with a px floor on each line so the 72px phone
   badge never reproduces the defect this replaces: a wreath raster that drew
   BY DEC 1ST at 2.7px. Floors: 19 / 11 / 10px. */
body.layout-christmas .cl-badge--html,
body.layout-christmas .cl-seal--html {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: var(--cl-badge-w);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  font-family: var(--cl-font-text);
  font-size: var(--cl-badge-w);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  overflow: hidden;
}
body.layout-christmas .cl-badge--html {
  background-color: #0d5b2a;
  border: 2px solid var(--cl-bulb);
  box-shadow: 0 0 0 4px rgba(13, 91, 42, 0.9), 0 10px 26px -10px #000;
  color: #ffffff;
}
body.layout-christmas .cl-seal--html {
  background-color: var(--cl-red);
  border: 2px solid var(--cl-bulb);
  box-shadow: 0 0 0 4px rgba(200, 16, 46, 0.9), 0 10px 26px -10px #000;
  color: #ffffff;
}
body.layout-christmas .cl-badge-l1,
body.layout-christmas .cl-seal-l1 {
  font-family: var(--cl-font-display);
  font-size: max(0.27em, 19px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--cl-bulb);
}
body.layout-christmas .cl-badge-l2,
body.layout-christmas .cl-seal-l2 {
  font-size: max(0.128em, 11px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding: 0.2em 0 0.1em;
  color: #ffffff;
}
body.layout-christmas .cl-badge-l3,
body.layout-christmas .cl-seal-l3 {
  font-size: max(0.093em, 10px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #ffffff;
}
/* The seal carries the longest string on the page (SATISFACTION), so it gets
   its own floor and its own slightly tighter line 2. */
body.layout-christmas .cl-seal--html { --cl-badge-w: 112px; }
body.layout-christmas .cl-seal-l2 { letter-spacing: 0; }
body.layout-christmas .cl-wreath--band.cl-badge--html { --cl-badge-w: 112px; }
@media (min-width: 768px) {
  body.layout-christmas .cl-seal--html,
  body.layout-christmas .cl-wreath--band.cl-badge--html { --cl-badge-w: 132px; }
}
@media (max-width: 479px) {
  body.layout-christmas .cl-seal--html,
  body.layout-christmas .cl-wreath--band.cl-badge--html { --cl-badge-w: 96px; }
}

/* ---------- 12.2 (RETIRED) -------------------------------------------------
   Held the BLUE HOUR phone fold (badge lane, 36px H1, one-row proof strip).
   The plate hero in 8.1 has no badge lane, the type ladder puts the H1 at
   36px on a phone through --cl-h1, and the one-row proof strip is 8.2. */

/* ---------- 12.3 ICON SIZES IN THE SITEWIDE CHROME ------------------------
   audit-polish/ICONS.txt 7.1 and recommendation 7. The governing rule is that
   nothing meaningful renders under 20px on a phone and no drawn stroke goes
   under 2px. A monoline SVG at viewBox 32 with stroke-width 2 draws 6.25% of
   its box, so 20px gave a 1.25px stroke: more antialiasing than ink, which is
   the real reason these read as faint rather than as small.
   WHAT IS LEFT HERE is only the chrome this system does not author. The rest
   of the audit numbers now sit on the components themselves, because a size
   split across a component rule and a correction section 1,700 lines later is
   how the file ended up saying 12px, 20px and 2.5px about one chevron:
     star row          -> 8.2
     bulb list marker  -> 6, device 3
     FAQ chevron       -> 8.13
     expand chevron    -> 11.7
     play arrow        -> 8.19 (and see the note there: it is a border
                          triangle, so sizing its BOX broke the shape) */
body.layout-christmas #app > footer.container svg {
  width: 20px;
  height: 20px;
}
body.layout-christmas li.has-submenu > a:after,
body.layout-christmas li.has-submenu:after {
  width: 20px;
  height: 20px;
  background-size: 20px 20px;
}
/* The comparison marks are real assets, not pseudo-elements; 11.8 turns the
   old table pseudo marks off and this is the size of what replaced them. */
body.layout-christmas .cl-compare-cards .cl-mark,
body.layout-christmas .cl-compare-card .cl-mark {
  width: 28px;
}
body.layout-christmas .cl-compare-cards .cl-mark--no,
body.layout-christmas .cl-compare-card .cl-mark--no {
  width: 24px;
}

/* ---------- 12.4 THE TOP OF THE BADGE LADDER  (decision 6a and 6h) --------
   The footer row height that used to open this section (30px rather than the
   44px 11.13 hands every other sitewide link) is stated in 11.13 itself now,
   next to the rule it is the exception to.
   The 1024+ step of the badge ladder. 12.1 drives the badge width off
   --cl-badge-w, so the token has to carry that number at this breakpoint or
   the badge falls back to the 84px default from 8.1. */
@media (min-width: 1024px) {
  body.layout-christmas .cl-hero {
    --cl-badge-w: 132px;
  }
}

/* A 72px circle cannot hold GUARANTEED at 11px: the chord at that line's
   height is 59px of usable width and the word needs 64px. The audit's floor
   (no type inside a badge under 11px on screen) wins over the third line, so
   under 768 the hero badge is two lines. Nothing is lost: the aria-label still
   reads "Done by December 1st, guaranteed" and the deadline chip four rows
   below says it again in full. The 96px+ band badge and the seal keep all
   three lines, and were measured to fit. */
@media (max-width: 767px) {
  body.layout-christmas .cl-hero-badge.cl-badge--html .cl-badge-l3 {
    display: none;
  }
  body.layout-christmas .cl-hero-badge.cl-badge--html .cl-badge-l1 {
    font-size: 20px;
  }
  body.layout-christmas .cl-hero-badge.cl-badge--html .cl-badge-l2 {
    font-size: 11.5px;
  }
}

/* ---------- 12.6 THE TWO-BRANCH CALL SHEET  (hub only, decision 6e) -------
   The hub sells both branches, so neither the nav phone glyph nor the sticky
   bar's Call Us may pick a city for the visitor: before this, both dialled
   Sioux City, which sent every Sioux Falls caller to the wrong office. One
   sheet, opened by both controls, closed by the close button, by Escape and
   by a tap anywhere outside it.
   NO ORANGE: these are phone paths, not quote paths, so they take the brand
   blue. z-index 90, which is under the nav (99) and under the sticky bar
   (97); it is bottom-anchored ABOVE the bar so the two never overlap. */
body.layout-christmas #cl-callsheet {
  position: fixed;
  right: 12px;
  bottom: calc(var(--mcb-height, 64px) + 12px + env(safe-area-inset-bottom));
  left: 12px;
  z-index: 90;
  max-width: 380px;
  margin: 0 auto;
  padding: 0.9rem 0.9rem 0.75rem;
  border: 1px solid var(--cl-night-600);
  border-radius: 12px;
  background-color: var(--cl-night-900);
  box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.7);
}
body.layout-christmas #cl-callsheet p {
  margin: 0 0 0.6rem;
  font-family: var(--cl-font-text);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cl-text-dim);
}
body.layout-christmas .cl-callsheet-opt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 48px;
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.5rem;
  border-radius: 8px;
  background-color: var(--cl-blue);
  color: #ffffff;
  font-family: var(--cl-font-text);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}
body.layout-christmas .cl-callsheet-opt span {
  font-weight: 600;
  white-space: nowrap;
}
body.layout-christmas .cl-callsheet-opt:hover,
body.layout-christmas .cl-callsheet-opt:focus-visible {
  background-color: var(--cl-blue-600, #24408a);
  color: #ffffff;
}
body.layout-christmas .cl-callsheet-x {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.5rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--cl-text-dim);
  font-family: var(--cl-font-text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
body.layout-christmas .cl-callsheet-x:hover,
body.layout-christmas .cl-callsheet-x:focus-visible {
  color: var(--cl-text);
}
/* From 1024 the sticky bar is gone, so the sheet hangs off the nav glyph that
   opened it rather than off the bottom of the window. */
@media (min-width: 1024px) {
  body.layout-christmas #cl-callsheet {
    top: 112px;
    right: 24px;
    bottom: auto;
    left: auto;
    width: 340px;
    margin: 0;
  }
}
/* Two-row nav band (1024-1279, --cl-nav-h 148px): drop the sheet below the
   taller band so it clears the pricing pill and the bulb strand. */
@media (min-width: 1024px) and (max-width: 1279px) {
  body.layout-christmas #cl-callsheet {
    top: calc(var(--cl-nav-h) + 42px);
  }
}
body.layout-christmas #cl-callsheet a:focus-visible,
body.layout-christmas #cl-callsheet button:focus-visible {
  outline: 3px solid var(--cl-bulb);
  outline-offset: 2px;
}

/* ---------- 12.7 THE SIOUX FALLS VENDOR FORM  (decision 6d) ---------------
   Open by default from 1024 (the inline script sets the state; <details> is
   not reliably openable from CSS across engines), collapsed under it. The
   well is capped so a 700px vendor slab cannot become the widest object in a
   1440px document. */
@media (min-width: 1024px) {
  body.layout-christmas .cl-formexpand > details > summary {
    display: none;
  }
  body.layout-christmas .cl-formexpand,
  body.layout-christmas .cl-formexpand .cl-expand-body,
  body.layout-christmas .cl-formexpand details {
    border: 0;
  }
}
/* The 560px cap on the well itself is unconditional and lives in 11.5. It
   used to be restated here inside the 1024 query, where the same value at a
   narrower context could never change an outcome. */

/* ---------- 12.8 THE PHONE FOOTER  (decision 6a, second half) -------------
   Sioux Falls shipped this page-scoped and its own comment says PROMOTE. It
   is a design-system concern, so it lives here and all three pages get it.
   Measured at 390 before promotion: the hub and Sioux City footers were
   2,142px against Sioux Falls' 1,476. Same links, same markup, 666px of
   column padding. Together with the 30px link rows this is what buys the
   mandated content its room inside the page-height ceilings. */
@media (max-width: 767px) {
  body.layout-christmas #app > footer.container .menus > [class*="col-"] {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
  }
  body.layout-christmas #app > footer.container .menus {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
  }
  body.layout-christmas #app > footer.container .company {
    margin-bottom: 0;
  }
}

/* ---------- 12.9 (RETIRED) -------------------------------------------------
   Held the BLUE HOUR scrim token sets. The Reveal scrim is in 8.1. */

/* ---------- 12.10 THE COPY ROWS THAT CROSS A LIT ROOFLINE ------------------
   12.9 moved the scrim ramp down the frame, which is what put the hero inside
   the audit's ceiling. The cost lands on exactly three rows: the deck, the
   price anchor and the geo line all sit around the middle of the frame, where
   the wash is now almost nothing. Measured 95th-percentile ground luminance
   under each box (rebuild/scripts-polish/textcontrast.js + tc_measure.py, raw
   numbers in rebuild/polish/text-contrast.txt): medians are 3.5 to 18, but the
   worst 5% of pixels behind those rows are lit bulbs and porch lamps.

   The answer is the one section 11.15 already argues for and it is local, not
   global: give the glyph its own ground. A tight, opaque 2px halo means an
   edge always has something dark behind it even when the pixel behind THAT is
   a bulb, and unlike a heavier scrim it costs the photograph nothing.
   Darkening the whole frame to fix five lines is what produced the 57% "light
   kept" figure this pass was sent to remove. */
body.layout-christmas .cl-hero .cl-hero-inner .cl-deck,
body.layout-christmas .cl-hero .cl-hero-inner .cl-geo,
body.layout-christmas .cl-hero .cl-hero-inner .cl-anchor,
body.layout-christmas .cl-hero .cl-hero-inner .cl-anchor *,
body.layout-christmas .cl-hero .cl-hero-inner .cl-priceanchor,
body.layout-christmas .cl-hero .cl-hero-inner .cl-priceanchor *,
body.layout-christmas .cl-close .cl-inner .cl-deck {
  text-shadow:
    0 0 2px rgba(6, 11, 24, 1),
    0 0 5px rgba(6, 11, 24, 0.98),
    0 1px 2px rgba(6, 11, 24, 1),
    0 2px 18px rgba(6, 11, 24, 0.9);
}

/* ---------- 12.11 (RETIRED) ------------------------------------------------
   The disclosure chevron strokes are stated once at 8.17 and 11.7. */

/* ---------- 12.12 ONE ORANGE OBJECT PER SCREEN ON A PHONE -----------------
   The sticky bar's quote button and the hero's orange CTA are both quote CTAs
   and both orange, so while the hero CTA is on screen the bar steps aside.
   Sioux Falls shipped this page-scoped and Sioux City had no version of it at
   all: measured at 390, its fold carried two orange objects.
   TWO HOOKS, ONE BEHAVIOUR, and they live together so they cannot drift.
   Sioux Falls and Sioux City set .cl-mcb-idle on the BAR. The hub sets
   .cl-cta-inview on the BODY instead, because its bar script also has to
   close the two-branch call sheet in the same handler. Both are set by the
   pages own inline scripts and both are inert without them, so this can only
   ever fail safe: with no script the bar behaves exactly as it always did.
   The transition is declared once, on the bar, for both. */
body.layout-christmas #mobile-cta-bar {
  transition: transform 0.22s ease, opacity 0.22s ease;
}
body.layout-christmas #mobile-cta-bar.cl-mcb-idle {
  opacity: 0;
  transform: translate3d(0, 110%, 0);
  pointer-events: none;
}
body.layout-christmas.cl-cta-inview #mobile-cta-bar {
  opacity: 0;
  transform: translateY(115%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  body.layout-christmas #mobile-cta-bar { transition: none; }
}

/* 12.12b. REBUILD 2 extends 12.12 from phone-only to desktop (brief item
   1.13). The sticky bar is hidden at 992 and up, so on desktop the budget
   is enforced by the components themselves: the play disc is night-600 with
   an amber ring (8.22), the callback submit is the blue .cl-btn (8.28), the
   price figure is ink (8.14), section numerals are --cl-accent (3), and the
   offer strip dot is --cl-bulb (8.6). The five drifted orange objects are
   reassigned there; the nav pill and the footer instant-price button are
   the standing exceptions. */

/* 12.1b. The seal's width comes from the token like everything else in the
   ladder. Section 8 pins .cl-wreath--seal to 88px for the raster wreath it was
   authored for, and the hub pinned it to 112px on top of that, which is why
   SATISFACTION (the longest string in either disc, 12 characters) measured
   106px inside a 104px chord at 768 and up. */
body.layout-christmas .cl-wreath--seal.cl-seal--html {
  width: var(--cl-badge-w);
}

/* ==========================================================================
   13. CONSOLIDATION PASS  (2026-09-01)
   ==========================================================================
   One agent, one pass, after the fix, graft and polish stages. Everything in
   this section was solved two or three times in the three page <style> blocks
   and now has one home. The page blocks keep only the deltas that are
   genuinely page business (a flex basis, a gutter bleed, a margin).

   NOTE FOR FUTURE AGENTS: position:sticky is inert on every page of this site.
   An ancestor of every section (the sitewide #app wrapper) computes
   overflow:hidden, which makes the nearest scrollport the wrapper rather than
   the viewport. Measured at 1440 on a sticky .cl-card: viewport top 124 at
   scrollY 1400 and -276 at 1800. Do not reach for it.
   ========================================================================== */

/* ---------- 13.1 THE PHONE SNAP RAIL --------------------------------------
   Four self-contained card rows (the four-way comparison, the three lease
   cards, the review pair or quartet, and anything a page tags .cl-scroll-x)
   were each carrying their own copy of the same eight declarations. Stacked,
   any one of them costs 400 to 1,200px of a phone document for content that is
   complete card by card, which is exactly what a snap strip is for. The core
   is here; the per-component flex basis, the gutter bleed and the snap
   alignment stay in the page blocks, because those are the three things the
   three pages legitimately disagree about.
   Above 767 every one of these goes back to its own grid untouched, so the
   desktop comparison is still four columns side by side. */
@media (max-width: 767px) {
  body.layout-christmas .cl-scroll-x,
  body.layout-christmas .cl-compare-cards,
  body.layout-christmas .cl-leasegrid,
  body.layout-christmas .cl-lease,
  body.layout-christmas .cl-proof {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 0.5rem;
  }
  body.layout-christmas .cl-scroll-x > *,
  body.layout-christmas .cl-compare-cards > *,
  body.layout-christmas .cl-leasegrid > *,
  body.layout-christmas .cl-lease > *,
  body.layout-christmas .cl-proof > * {
    scroll-snap-align: start;
  }
  /* The scrollbar takes the ground it sits on. */
  body.layout-christmas .cl-band--lit .cl-scroll-x,
  body.layout-christmas .cl-band--night .cl-scroll-x,
  body.layout-christmas .cl-band--lit .cl-proof,
  body.layout-christmas .cl-band--night .cl-proof {
    scrollbar-color: rgba(255, 216, 138, 0.45) rgba(255, 255, 255, 0.06);
  }
  body.layout-christmas .cl-paper .cl-scroll-x,
  body.layout-christmas .cl-paper .cl-compare-cards,
  body.layout-christmas .cl-paper .cl-leasegrid,
  body.layout-christmas .cl-paper .cl-lease,
  body.layout-christmas .cl-paper .cl-proof {
    scrollbar-color: rgba(27, 31, 42, 0.35) rgba(27, 31, 42, 0.08);
  }
}

/* ---------- 13.2 THE VERIFY US ASIDE  (.cl-verify) ------------------------
   The judge graft: one line after the reviews inviting the reader to go and
   check the rating at the source. Ruled in brand green so it reads as an aside
   rather than as more sell. All three pages shipped a different face for it (a
   centred dim block, a rule-above block, a green-ruled aside); this is the one
   the graft asked for. A page that wants it centred adds the measure and the
   auto margins, and nothing else. */
body.layout-christmas .cl-verify {
  border-left: 3px solid var(--cl-green);
  padding-left: 0.9rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--cl-text);
  margin: 1.25rem 0 0;
}
body.layout-christmas .cl-paper .cl-verify {
  color: var(--cl-ink);
}

/* ---------- 13.3 THE PHONE FOOTER, SECOND HALF ----------------------------
   12.4 and 12.8 took the row height and the column padding. This is the rest
   of the same decision, and Sioux Falls was the only page carrying it: the two
   link columns run two-up instead of one, the two branch call buttons sit side
   by side, and the legal strip loses one level of framework padding. Roughly
   300px of a 390 document on the two pages that did not have it.
   display:block is load-bearing on the first rule: the framework sets
   .is-menu to display:flex, and columns is ignored on a flex container.
   Footer MARKUP is untouched throughout. */
@media (max-width: 767px) {
  body.layout-christmas #app > footer.container .list-services ul.is-menu,
  body.layout-christmas #app > footer.container .col-md-3 ul.is-menu {
    display: block;
    columns: 2;
    column-gap: 1.25rem;
  }
  body.layout-christmas #app > footer.container .list-services ul.is-menu > li,
  body.layout-christmas #app > footer.container .col-md-3 ul.is-menu > li {
    break-inside: avoid;
  }
  body.layout-christmas #app > footer.container .faves {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  body.layout-christmas #app > footer.container .faves img {
    margin: 0;
  }
  body.layout-christmas #app > footer.container .company .buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  body.layout-christmas #app > footer.container .company .buttons a.button {
    margin: 0;
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  body.layout-christmas #app > footer.container .company .buttons a.button.tertiary {
    grid-column: 1 / -1;
  }
  body.layout-christmas #app > footer.container .legal .pad-all-2 {
    padding: 0.9rem;
  }
}

/* CONSOLIDATION PASS ends */


/* ==========================================================================
   APPEND REGIONS. One per page builder, in this order, and nothing else goes
   after them. A builder writes ONLY between its own markers, scoped to its
   own body class (body.layout-christmas.cl-page-hub and so on), and never
   edits anything above this line.
   ========================================================================== */

/* === APPEND: HUB === */
/* HUB builder region (REBUILD 2, Phase B, fix rounds 1-3 + feedback R2). Scoped to body.layout-christmas.cl-page-hub. Audit notes: rebuild2/hub-build/BUILD-NOTE.txt. */
body.layout-christmas.cl-page-hub .cl-callrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.4rem;
  max-width: none;
  margin: 0 0 0.6rem;
}
body.layout-christmas.cl-page-hub .cl-callrow .cl-callpair {
  margin: 0;
}
/* Text-shaped call control opening the two-branch sheet (nav-call binds the script). Never orange: phone path. */
body.layout-christmas.cl-page-hub button.cl-callbtn {
  background: none;
  border: 0;
  padding: 0 0.2rem;
  cursor: pointer;
  font-family: var(--cl-font-text);
  font-size: 1rem;
}

/* ---------- HUB PAGE BLOCK (was <style id="cl-page">): only the hub's own deltas, all scoped to .cl-page-hub. */
body.layout-christmas.cl-page-hub { --cl-accent: var(--cl-bulb); --cl-hub-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.25 6.75 12 17.5 22.75 6.75' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* The bulb macro is 950 real px: cap its card so it never upscales (brief B6). */
body.layout-christmas.cl-page-hub .cl-duo figure.cl-duo--macro { max-width: 475px; }
/* The hub's own call control outside the nav opens the two-branch sheet. */
body.layout-christmas.cl-page-hub button.cl-phone { font-family: var(--cl-font-display); }
/* The crew bleed opens THE LADDER: the band that follows it starts flush. */
body.layout-christmas.cl-page-hub .cl-band--after-bleed { padding-top: clamp(1.6rem, 4vw, 3rem); }
body.layout-christmas.cl-page-hub .cl-price .cl-list { margin-bottom: 1rem; }
body.layout-christmas.cl-page-hub .cl-price .cl-list li { font-size: 0.98rem; }
body.layout-christmas.cl-page-hub .cl-price-note { font-size: 0.92rem; color: var(--cl-ink-soft); margin: 0.75rem 0 0; }
body.layout-christmas.cl-page-hub .cl-lease-col .cl-h3 { margin-bottom: 0.9rem; }
body.layout-christmas.cl-page-hub .cl-seal-row { display: flex; align-items: center; gap: 1.25rem; margin: 1.5rem 0 0; }
body.layout-christmas.cl-page-hub .cl-seal-row p { margin: 0; max-width: 40ch; }
body.layout-christmas.cl-page-hub .cl-hero .cl-citypick { margin-top: 12px; }
/* The lead form sits under the close grid; collapsed on phones, open from 1024. */
body.layout-christmas.cl-page-hub .cl-leadblock { margin-top: clamp(1.8rem, 4vw, 3rem); border-top: 1px solid var(--cl-rule); padding-top: clamp(1.4rem, 3vw, 2.2rem); }
body.layout-christmas.cl-page-hub .cl-leadblock .cl-h3 { margin-bottom: 0.6rem; }
body.layout-christmas.cl-page-hub .cl-leadblock .cl-formexpand > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; font-family: var(--cl-font-display); font-size: 1.25rem; font-weight: 600; color: #ffffff; padding: 0.5rem 0; }
body.layout-christmas.cl-page-hub .cl-leadblock .cl-formexpand > summary::-webkit-details-marker { display: none; }
body.layout-christmas.cl-page-hub .cl-leadblock .cl-formexpand > summary:after { content: ""; flex: 0 0 20px; width: 20px; height: 20px; border-right: 3px solid var(--cl-bulb); border-bottom: 3px solid var(--cl-bulb); transform: rotate(45deg); margin-bottom: 4px; }
body.layout-christmas.cl-page-hub .cl-leadblock .cl-formexpand[open] > summary:after { transform: rotate(-135deg); margin-top: 4px; margin-bottom: 0; }
body.layout-christmas.cl-page-hub .cl-leadblock .cl-leadwell { max-width: 560px; margin-top: 1rem; }
/* PHONE DENSITY (ruling B5): rail flex basis, un-railed review pair (M-6), .cl-duo off under 760, tighter band padding. */
@media (max-width: 767px) {
  body.layout-christmas.cl-page-hub .cl-compare-cards > .cl-compare-card { flex: 0 0 84%; }
  body.layout-christmas.cl-page-hub .cl-compare-cards,
  body.layout-christmas.cl-page-hub .cl-leasegrid,
  body.layout-christmas.cl-page-hub .cl-towns.cl-scroll-x { margin-left: -1.3rem; margin-right: -1.3rem; padding-left: 1.3rem; padding-right: 1.3rem; scroll-padding-left: 1.3rem; }
  body.layout-christmas.cl-page-hub .cl-citygrid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  body.layout-christmas.cl-page-hub .cl-citycard .cl-eyebrow,
  body.layout-christmas.cl-page-hub .cl-citycard .cl-h2,
  body.layout-christmas.cl-page-hub .cl-citycard .cl-towns--compact,
  body.layout-christmas.cl-page-hub .cl-citycard-go { margin-left: 0.75rem; margin-right: 0.75rem; }
  body.layout-christmas.cl-page-hub .cl-citycard .cl-citycard-t { font-size: 1.25rem; }
  body.layout-christmas.cl-page-hub .cl-citycard .cl-towns--compact { font-size: 0.82rem; line-height: 1.4; }
  body.layout-christmas.cl-page-hub .cl-citycard-go { font-size: 0.98rem; }
  body.layout-christmas.cl-page-hub .cl-duo figure.cl-duo--macro { display: none; }
  body.layout-christmas.cl-page-hub .cl-statstrip { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 1.4rem; }
  body.layout-christmas.cl-page-hub .cl-stat b { font-size: 1.9rem; }
  body.layout-christmas.cl-page-hub .cl-band,
  body.layout-christmas.cl-page-hub .cl-january,
  body.layout-christmas.cl-page-hub .cl-close { padding: 1.7rem 0; }
  body.layout-christmas.cl-page-hub .cl-statstrip { grid-template-columns: 1fr; }
  body.layout-christmas.cl-page-hub .cl-statstrip .cl-stat { display: none; }
  body.layout-christmas.cl-page-hub .cl-compare-card .cl-compare-row { padding: 0.4rem 0; }
  body.layout-christmas.cl-page-hub .cl-compare-card { padding: 1rem; }
  body.layout-christmas.cl-page-hub .cl-band--flush { padding: 0; }
  body.layout-christmas.cl-page-hub .cl-band--after-bleed { padding-top: 1.3rem; }
  body.layout-christmas.cl-page-hub .cl-expand { margin-bottom: 1rem; }
  body.layout-christmas.cl-page-hub .cl-expand summary { min-height: 52px; padding: 0.55rem 0; }
  body.layout-christmas.cl-page-hub .cl-faq summary { font-size: 1.15rem; padding: 0.75rem 0; }
  body.layout-christmas.cl-page-hub .cl-receipt img { max-width: 220px; }
  body.layout-christmas.cl-page-hub .cl-quote-text { font-size: 0.98rem; padding: 1.1rem 1.2rem 0.9rem; }
  body.layout-christmas.cl-page-hub .cl-quote-card .cl-stars { padding: 1rem 1.2rem 0; }
  body.layout-christmas.cl-page-hub .cl-quote-meta { padding: 0 1.2rem 1rem; }
  body.layout-christmas.cl-page-hub .cl-chip { padding: 0.7rem 1.2rem; }
  body.layout-christmas.cl-page-hub .cl-chips { margin-bottom: 1rem; }
  body.layout-christmas.cl-page-hub .cl-price .cl-list li { padding-top: 0.15rem; padding-bottom: 0.15rem; margin: 0; }
  body.layout-christmas.cl-page-hub .cl-price { padding: 1.25rem 1.1rem; }
  body.layout-christmas.cl-page-hub .cl-seal-row { margin-top: 0.8rem; }
  body.layout-christmas.cl-page-hub .cl-seal-row p { font-size: 0.95rem; line-height: 1.5; }
  body.layout-christmas.cl-page-hub .cl-band h2 { margin-bottom: 0.7rem; }
  body.layout-christmas.cl-page-hub .cl-band p { margin-bottom: 0.85rem; }
  body.layout-christmas.cl-page-hub .cl-lead { margin-bottom: 0.85rem; }
  body.layout-christmas.cl-page-hub .cl-statstrip { margin-bottom: 1rem; }
  body.layout-christmas.cl-page-hub .cl-video { margin-bottom: 1rem; }
  body.layout-christmas.cl-page-hub .cl-gallery { margin-bottom: 1rem; }
  body.layout-christmas.cl-page-hub .cl-split { gap: 1.2rem; }
  body.layout-christmas.cl-page-hub .cl-pricegrid { gap: 1.4rem; }
  body.layout-christmas.cl-page-hub .cl-faqgrid { gap: 1.2rem; }
  body.layout-christmas.cl-page-hub .cl-city-split { gap: 1.2rem; }
  body.layout-christmas.cl-page-hub .cl-closegrid { gap: 1rem; }
  body.layout-christmas.cl-page-hub .cl-leadblock { margin-top: 1.2rem; padding-top: 1.2rem; }
}
/* Comparison on the paper band (B8): 8.16 paints the table for night, so the ink set is restated here. Neutral and Partly cells draw a short dash, never the no-mark. */
body.layout-christmas.cl-page-hub .cl-paper .cl-compare { border-top-color: var(--cl-paper-edge); }
body.layout-christmas.cl-page-hub .cl-paper .cl-compare-head,
body.layout-christmas.cl-page-hub .cl-paper .cl-compare .cl-compare-row { border-bottom-color: var(--cl-paper-edge); }
body.layout-christmas.cl-page-hub .cl-paper .cl-compare-head > *,
body.layout-christmas.cl-page-hub .cl-paper .cl-compare .cl-compare-label { color: var(--cl-ink-soft); }
body.layout-christmas.cl-page-hub .cl-paper .cl-compare .cl-compare-value { color: var(--cl-ink-body); align-items: flex-start; }
body.layout-christmas.cl-page-hub .cl-paper .cl-compare-head > .is-sharp,
body.layout-christmas.cl-page-hub .cl-paper .cl-compare .cl-compare-value.is-sharp { color: var(--cl-ink); font-weight: 600; }
body.layout-christmas.cl-page-hub .cl-paper .cl-compare .cl-mark,
body.layout-christmas.cl-page-hub .cl-paper .cl-compare-cards .cl-mark { flex: 0 0 auto; }
body.layout-christmas.cl-page-hub .cl-compare-value.cl-mid:before,
body.layout-christmas.cl-page-hub .cl-compare .cl-compare-value.is-mid:before { content: ""; display: inline-block; flex: 0 0 18px; width: 18px; height: 3px; margin: 0.65em 0.35rem 0 0.25rem; background-color: currentColor; opacity: 0.55; border-radius: 2px; }
body.layout-christmas.cl-page-hub .cl-compare-cards .cl-compare-value { display: flex; align-items: flex-start; gap: 0.4rem; }
@media (max-width: 767px) {
  /* Shared 13.1 lists .cl-lease as a rail container (h4 and p side by side). Restore the card. */
  body.layout-christmas.cl-page-hub .cl-lease { display: block; overflow: visible; scroll-snap-type: none; padding-bottom: var(--cl-pad-panel); }
}
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-hub .cl-leadblock { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cl-gap-grid); align-items: start; }
  body.layout-christmas.cl-page-hub .cl-leadblock .cl-formexpand > summary { display: none; }
}

/* ---------- FIX ROUND 1 (hub QA round 1, 2026-09-03): each block names the QA id it answers. */

/* M-10 / I10. Yes mark: CSS-masked span painted --cl-green-ink (4.79:1 paper, 5.14:1 card). */
body.layout-christmas.cl-page-hub span.cl-mk--yes {
  display: inline-block;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  vertical-align: middle;
  background-color: var(--cl-green-ink);
  filter: none;
  -webkit-mask: url(../../account/images/icons/check-green.svg) center / 22px 22px no-repeat;
  mask: url(../../account/images/icons/check-green.svg) center / 22px 22px no-repeat;
}

/* M-6. NEVER RAIL the review quotes (brief 5.1): under 768 the pair stacks; one capture, Peg Mitchell quote-only (C14 / B2). */
@media (max-width: 767px) {
  body.layout-christmas.cl-page-hub .cl-proof.cl-proof--two {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
    overflow: visible;
    scroll-snap-type: none;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
  }
  body.layout-christmas.cl-page-hub .cl-proof.cl-proof--two > .cl-quote-card {
    flex: none;
    width: auto;
    scroll-snap-align: none;
  }
  body.layout-christmas.cl-page-hub .cl-quote-card:not(:has(.cl-receipt)) .cl-quote-meta {
    padding-bottom: 1rem;
  }
}

/* B-1. Phone density, second pass (ruling B5): tighter band padding at 390 and on the rows that repeat most. Tap targets stay >= 44px. */
@media (max-width: 767px) {
  body.layout-christmas.cl-page-hub .cl-band,
  body.layout-christmas.cl-page-hub .cl-january,
  body.layout-christmas.cl-page-hub .cl-close { padding: 1.3rem 0; }
  body.layout-christmas.cl-page-hub .cl-band--flush { padding: 0; }
  body.layout-christmas.cl-page-hub .cl-band--after-bleed { padding-top: 1.1rem; }
  body.layout-christmas.cl-page-hub .cl-band h2 { margin-bottom: 0.55rem; }
  body.layout-christmas.cl-page-hub .cl-band p { margin-bottom: 0.7rem; }
  body.layout-christmas.cl-page-hub .cl-lead { margin-bottom: 0.7rem; }
  body.layout-christmas.cl-page-hub .cl-band .cl-deck { margin-bottom: 0.7rem; }
  body.layout-christmas.cl-page-hub .cl-expand { margin-bottom: 0.8rem; }
  body.layout-christmas.cl-page-hub .cl-expand summary { min-height: 46px; padding: 0.35rem 0; }
  body.layout-christmas.cl-page-hub .cl-faq summary { min-height: 48px; font-size: 1.1rem; padding: 0.5rem 0; }
  body.layout-christmas.cl-page-hub .cl-faq details[open] summary:after { margin-top: 0.4rem; }
  body.layout-christmas.cl-page-hub .cl-statstrip { margin-bottom: 0.8rem; }
  body.layout-christmas.cl-page-hub .cl-verify { margin-top: 0.9rem; }
  body.layout-christmas.cl-page-hub .cl-price .cl-price-p,
  body.layout-christmas.cl-page-hub .cl-price .cl-after-cta { display: none; }
  body.layout-christmas.cl-page-hub .cl-price .cl-list { margin-bottom: 0.8rem; }
  body.layout-christmas.cl-page-hub .cl-chip { padding: 0.6rem 1.2rem; }
  body.layout-christmas.cl-page-hub .cl-chips { margin-bottom: 0.8rem; }
  body.layout-christmas.cl-page-hub .cl-leadblock { margin-top: 1rem; padding-top: 1rem; }
  body.layout-christmas.cl-page-hub .cl-leadblock .cl-h3 { margin-bottom: 0.35rem; }
  body.layout-christmas.cl-page-hub .cl-video { margin-bottom: 0.8rem; }
  body.layout-christmas.cl-page-hub .cl-gallery { margin-bottom: 0.8rem; }
  body.layout-christmas.cl-page-hub .cl-steps { margin-bottom: 0.6rem; }
  /* Sitewide footer on the hub: .buttons row hidden; the two labeled .cl-foot-tel lines carry the phone path (R4), the close CTA the price path. See M-3. */
  body.layout-christmas.cl-page-hub #app > footer.container .company .logo img { width: 200px; max-width: 100%; }
}
@media (max-width: 559px) {
  /* Gallery captions on phone keep the bold lead only. */
  body.layout-christmas.cl-page-hub .cl-gallery figcaption .cl-cap-x { display: none; }
}

/* M-3 / C3 / C8. The footer's orange instant-price pill (chrome markup) is hidden on the hub rather than edited; both click-to-call lines stay. */
body.layout-christmas.cl-page-hub #app > footer.container .company .buttons { display: none; }

/* M-1 / m-10 / m-11. Short-phone folds: price anchor and 320 CTA one line; CTA top inside the sticky-bar observer root. */
@media (max-width: 389px) {
  body.layout-christmas.cl-page-hub .cl-hero .cl-priceanchor-n { font-size: 1.3rem; margin-right: 0.35rem; }
  body.layout-christmas.cl-page-hub .cl-hero .cl-priceanchor-t { font-size: 0.82rem; }
}
@media (max-width: 359px) {
  body.layout-christmas.cl-page-hub .cl-hero-inner { padding-top: 12px; }
  body.layout-christmas.cl-page-hub .cl-hero .cl-deck { font-size: 0.95rem; margin-bottom: 8px; }
  body.layout-christmas.cl-page-hub .cl-hero .cl-priceanchor { padding-left: 0.5rem; margin-bottom: 10px; }
  body.layout-christmas.cl-page-hub .cl-hero .cl-priceanchor-n { font-size: 1.1rem; margin-right: 0.3rem; }
  body.layout-christmas.cl-page-hub .cl-hero .cl-priceanchor-t { font-size: 0.78rem; }
  body.layout-christmas.cl-page-hub .cl-cta { font-size: 1.25rem; padding: 0.8rem 1rem; }
}

/* M-9 (a). One 3px amber focus ring on every control on the hub. !important because the framework strips the outline on .button and form controls. */
body.layout-christmas.cl-page-hub a:focus-visible,
body.layout-christmas.cl-page-hub button:focus-visible,
body.layout-christmas.cl-page-hub summary:focus-visible,
body.layout-christmas.cl-page-hub input:focus-visible,
body.layout-christmas.cl-page-hub select:focus-visible,
body.layout-christmas.cl-page-hub textarea:focus-visible,
body.layout-christmas.cl-page-hub [tabindex]:focus-visible,
body.layout-christmas.cl-page-hub .modal-deep-lawn .close-deep-lawn:focus-visible {
  outline: 3px solid var(--cl-amber-hot) !important;
  outline-offset: 3px !important;
}

/* M-5 / H6. Desktop scrim tuned to this hero's bulb band (ramp from 84 percent, lighter top stop, 1024+ wash); BUILD-NOTE.txt. */
@media (min-width: 760px) {
  body.layout-christmas.cl-page-hub .cl-hero-scrim {
    --cl-scrim-s3: 84%;
    --cl-scrim-s4: 92%;
    --cl-scrim-s5: 97%;
    --cl-scrim-a4: 0.50;
    --cl-scrim-a5: 0.90;
    background-image: linear-gradient(180deg,
      rgba(5, 10, 22, 0.62) 0%,
      rgba(5, 10, 22, 0.22) var(--cl-scrim-navstop),
      rgba(5, 10, 22, 0) 22%,
      rgba(5, 10, 22, 0) var(--cl-scrim-s3),
      rgba(5, 10, 22, var(--cl-scrim-a4)) var(--cl-scrim-s4),
      rgba(5, 10, 22, var(--cl-scrim-a5)) var(--cl-scrim-s5),
      var(--cl-night-900) 100%);
  }
  /* m-11. Badge 104px from 760 up (brief 1.7.3); the stack rows reserve that lane, not the 132px one. */
  body.layout-christmas.cl-page-hub .cl-hero-badge { --cl-badge-w: 104px; }
}
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-hub .cl-hero-scrim:after {
    background-image: linear-gradient(var(--cl-scrim-wash),
      rgba(5, 10, 22, 0.42) 0%,
      rgba(5, 10, 22, 0.18) 28%,
      rgba(5, 10, 22, 0) 50%);
  }
  body.layout-christmas.cl-page-hub .cl-hero-badge { --cl-badge-w: 104px; right: 32px; bottom: 32px; }
  body.layout-christmas.cl-page-hub .cl-hero-inner .cl-micro,
  body.layout-christmas.cl-page-hub .cl-hero-inner .cl-caption,
  body.layout-christmas.cl-page-hub .cl-hero-inner .cl-crumbs,
  body.layout-christmas.cl-page-hub .cl-hero-inner .cl-ctarow { max-width: calc(100% - 104px - 2rem); }
}

/* m-2 / I9. Figure corner bracket: 64px box, 2px stroke, .55 alpha (the shared rule drew at .22). */
body.layout-christmas.cl-page-hub .cl-fig:after {
  border-color: rgba(255, 212, 138, 0.55);
  opacity: 1;
}

/* m-3 / I1. Desktop nav Call us handset at 24px (shared rule draws 17). Hub only. */
body.layout-christmas.cl-page-hub #nav .cl-nav-tel svg,
body.layout-christmas.cl-page-hub #nav .cl-nav-tel-glyph {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

/* m-4 / I4 (fix round 3). FAQ chevron is a 24px SVG mask at a 2.5px stroke painted --cl-bulb (a 2.5px border snaps to 2 at DPR 1); 0 closed / 180 open. */
body.layout-christmas.cl-page-hub .cl-faq summary:after {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border: 0;
  background-color: var(--cl-bulb);
  -webkit-mask: var(--cl-hub-chev) center / 24px 24px no-repeat;
  mask: var(--cl-hub-chev) center / 24px 24px no-repeat;
  transform: none;
  margin: 0.15rem 0.2rem 0 0;
}
body.layout-christmas.cl-page-hub .cl-faq details[open] summary:after {
  transform: rotate(180deg);
  margin-top: 0.15rem;
}

/* ---------- FIX ROUND 1b ---------- */

/* M-4 / M-2 / C12 (fix round 1). Phone ladder untouched; 1d-4d are desktop rungs (2d tablet); rung 4 moves after the video from 1024. */
body.layout-christmas.cl-page-hub .cl-ctarow--desk,
body.layout-christmas.cl-page-hub .cl-ctarow--tab,
body.layout-christmas.cl-page-hub .cl-ctarow--deskonly { display: none; }
body.layout-christmas.cl-page-hub .cl-ctarow--desk { margin-top: 1.6rem; }
@media (min-width: 768px) {
  body.layout-christmas.cl-page-hub .cl-ctarow--tab { display: flex; }
}
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-hub .cl-ctarow--desk,
  body.layout-christmas.cl-page-hub .cl-ctarow--deskonly { display: flex; }
  body.layout-christmas.cl-page-hub .cl-ctarow--under-desk { display: none; }
}

/* B-1. Phone density: .cl-phone-hide renders from 768; phone prose line-height 1.6 (brief said 1.3). */
@media (max-width: 767px) {
  body.layout-christmas.cl-page-hub .cl-phone-hide { display: none; }
  body.layout-christmas.cl-page-hub .cl-leadblock { display: none; }
  body.layout-christmas.cl-page-hub .cl-band p:not(.cl-lead):not(.cl-ctarow),
  body.layout-christmas.cl-page-hub .cl-list li,
  body.layout-christmas.cl-page-hub .cl-steps li,
  body.layout-christmas.cl-page-hub .cl-lease p,
  body.layout-christmas.cl-page-hub .cl-answer p,
  body.layout-christmas.cl-page-hub .cl-expand-body p { line-height: 1.6; }
  body.layout-christmas.cl-page-hub .cl-band,
  body.layout-christmas.cl-page-hub .cl-january,
  body.layout-christmas.cl-page-hub .cl-close { padding: 1.15rem 0; }
  body.layout-christmas.cl-page-hub .cl-band--flush { padding: 0; }
  body.layout-christmas.cl-page-hub .cl-band--after-bleed { padding-top: 1rem; }
  body.layout-christmas.cl-page-hub .cl-receipt img { max-width: 180px; }
  body.layout-christmas.cl-page-hub .cl-faq-aside { padding: 1rem 1.1rem; }
  body.layout-christmas.cl-page-hub .cl-faq-aside p { margin-bottom: 0.7rem; }
  body.layout-christmas.cl-page-hub .cl-compare-card { padding: 0.8rem; }
  body.layout-christmas.cl-page-hub .cl-compare-card .cl-compare-row { padding: 0.3rem 0; }
  body.layout-christmas.cl-page-hub .cl-video figcaption { display: none; }
  body.layout-christmas.cl-page-hub .cl-offerstrip li { font-size: 0.72rem; padding-top: 0.15rem; padding-bottom: 0.15rem; }
  body.layout-christmas.cl-page-hub .cl-january .cl-strand--fade { margin-bottom: 0.6rem; }
  body.layout-christmas.cl-page-hub #app > footer.container .faves img { max-height: 72px; width: auto; }
  body.layout-christmas.cl-page-hub #app > footer.container .legal.container { padding-top: 0.75rem; padding-bottom: 0.75rem; }
  body.layout-christmas.cl-page-hub #app > footer.container .company .logo { margin-bottom: 0.6rem; }
  body.layout-christmas.cl-page-hub #app > footer.container .menus > [class*="col-"] { padding-top: 0.6rem; padding-bottom: 0.6rem; }
}

/* M-5. Scrim top stops eased so the 1920 peak row-mean (25.0 with .62/.22) has margin. */
@media (min-width: 760px) {
  body.layout-christmas.cl-page-hub .cl-hero-scrim {
    background-image: linear-gradient(180deg,
      rgba(5, 10, 22, 0.56) 0%,
      rgba(5, 10, 22, 0.18) var(--cl-scrim-navstop),
      rgba(5, 10, 22, 0) 22%,
      rgba(5, 10, 22, 0) var(--cl-scrim-s3),
      rgba(5, 10, 22, var(--cl-scrim-a4)) var(--cl-scrim-s4),
      rgba(5, 10, 22, var(--cl-scrim-a5)) var(--cl-scrim-s5),
      var(--cl-night-900) 100%);
  }
}

/* ---------- FIX ROUND 1c ---------- */

/* B-1. PHONE TYPE STEP (deviation from brief 1.3, revert here): under 768 body 16px, leads 15.5px, H2 30px, 44px floors. */
@media (max-width: 767px) {
  body.layout-christmas.cl-page-hub .cl-band p:not(.cl-lead):not(.cl-ctarow):not(.cl-caption),
  body.layout-christmas.cl-page-hub .cl-list li,
  body.layout-christmas.cl-page-hub .cl-steps li,
  body.layout-christmas.cl-page-hub .cl-lease p,
  body.layout-christmas.cl-page-hub .cl-answer p,
  body.layout-christmas.cl-page-hub .cl-expand-body p { font-size: 16px; line-height: 1.6; }
  body.layout-christmas.cl-page-hub .cl-band .cl-lead { font-size: 15.5px; line-height: 1.5; }
  body.layout-christmas.cl-page-hub .cl-band h2,
  body.layout-christmas.cl-page-hub .cl-band h2.wide { font-size: 1.875rem; }
  body.layout-christmas.cl-page-hub .cl-faq summary { min-height: 44px; font-size: 1rem; padding: 0.45rem 0; }
  body.layout-christmas.cl-page-hub .cl-expand summary { min-height: 44px; padding: 0.3rem 0; }
  body.layout-christmas.cl-page-hub .cl-band,
  body.layout-christmas.cl-page-hub .cl-january,
  body.layout-christmas.cl-page-hub .cl-close { padding: 1rem 0; }
  body.layout-christmas.cl-page-hub .cl-band--flush { padding: 0; }
  body.layout-christmas.cl-page-hub .cl-band--after-bleed { padding-top: 0.9rem; }
  body.layout-christmas.cl-page-hub .cl-chip { padding: 0.5rem 1.2rem; }
  body.layout-christmas.cl-page-hub .cl-rating .val { font-size: 2.2rem; }
  body.layout-christmas.cl-page-hub .cl-quote-text { font-size: 0.95rem; line-height: 1.55; }
  body.layout-christmas.cl-page-hub #app > footer.container { padding-top: 1rem; }
  body.layout-christmas.cl-page-hub #app > footer.container .legal [class*="col-"] { padding-top: 0.35rem; padding-bottom: 0.35rem; }
  body.layout-christmas.cl-page-hub #app > footer.container .row-xxl.center.pad-all-1 > .col-xxs-12 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
}


/* The no-mark img inherited an auto side margin from the framework img rule; marks sit flush left like the yes marks. */
body.layout-christmas.cl-page-hub .cl-compare-cards .cl-mark,
body.layout-christmas.cl-page-hub .cl-compare .cl-mark { margin: 0 0.1rem 0 0; }

/* ---------- FIX ROUND 1d ---------- */

/* M-9 (a), restated with an id in the chain: the framework's #nav rules and currentColor outlines outranked the class-only rule. One amber 3px ring on everything focusable. */
body.layout-christmas.cl-page-hub :is(#app, #nav, #mobile-cta-bar, #cl-callsheet, .modal-deep-lawn) *:focus-visible {
  outline: 3px solid var(--cl-amber-hot) !important;
  outline-offset: 3px !important;
  /* The framework's transition: all .25s tweens the ring in from 0px, so a harness reading the focus frame sees no ring. Off while focused. */
  transition: none !important;
}

/* m-6 / I10. Teko 700 on the hub's CTAs so anti-aliased edges are a smaller share of the white-on-orange text pixels (computed 3.22:1). */
body.layout-christmas.cl-page-hub .cl-cta { font-weight: 700; }

/* ---------- APPEND: HUB EMBLEMS (Lance pick 2026-09-03): badge and seal = bulb-ring (rebuild2/emblems/PICK.txt), CSS as delivered from _emblems/bulb-ring/option.css; wrappers gain .em-bulb-ring-wrap, 12.1 untouched. */
/* Emblem bulb-ring, INNER MODE: every selector keyed to .em-bulb-ring. Wire at r=43 of a 100-unit box, 20 bulbs, night disc, real HTML text. */
body.layout-christmas .cl-badge--html.em-bulb-ring-wrap,
body.layout-christmas .cl-seal--html.em-bulb-ring-wrap {
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  filter: none;
  container-type: inline-size;
}
.em-bulb-ring {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
}
.em-bulb-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}
.em-bulb-ring-t {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  font-family: var(--cl-font-display);
  font-weight: 500;
  line-height: 0.9;
  color: #ffffff;
  white-space: nowrap;
}
.em-bulb-ring-l1 {
  display: block;
  font-weight: 600;
  color: #ffd48a;
  letter-spacing: 0.02em;
}
.em-bulb-ring-l2,
.em-bulb-ring-l3 {
  display: block;
  letter-spacing: -0.02em;
}
/* the deadline badge: 72 / 88 / 104 / 132 */
.em-bulb-ring--badge .em-bulb-ring-t { padding-bottom: 0.04em; }
.em-bulb-ring--badge .em-bulb-ring-l1 { font-size: max(18px, 0.25em); }
.em-bulb-ring--badge .em-bulb-ring-l2 { font-size: max(17px, 0.165em); margin-top: 0.015em; }
.em-bulb-ring--badge .em-bulb-ring-l3 { font-size: max(17px, 0.135em); margin-top: 0.01em; }
/* GUARANTEED shows from 100px up (hub 104, ladder 132); container query, media query fallback. */
@container (max-width: 99.9px) {
  .em-bulb-ring--badge .em-bulb-ring-l3 { display: none; }
}
@media (max-width: 767px) {
  body.layout-christmas .cl-hero-badge.em-bulb-ring-wrap .em-bulb-ring-l3 { display: none; }
}
@container (min-width: 100px) {
  .em-bulb-ring--badge .em-bulb-ring-l2 { letter-spacing: 0; }
}
@container (min-width: 120px) {
  .em-bulb-ring--badge .em-bulb-ring-l3 { letter-spacing: 0; }
}
/* the guarantee seal: 96 / 112 / 132 */
.em-bulb-ring--seal .em-bulb-ring-t { padding-bottom: 0.06em; }
.em-bulb-ring--seal .em-bulb-ring-l1 { font-size: max(24px, 0.27em); }
.em-bulb-ring--seal .em-bulb-ring-l2 { font-size: max(17px, 0.17em); margin-top: 0.01em; }
.em-bulb-ring--seal .em-bulb-ring-l3 { font-size: max(17px, 0.14em); margin-top: 0.01em; letter-spacing: -0.03em; }
@container (min-width: 110px) {
  .em-bulb-ring--seal .em-bulb-ring-l2 { letter-spacing: 0; }
  .em-bulb-ring--seal .em-bulb-ring-l3 { letter-spacing: -0.01em; }
}
/* two bulbs breathe, dimming only (the ring never gets brighter than its resting state) */
@keyframes em-bulb-ring-tw {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.em-bulb-ring-tw1 { animation: em-bulb-ring-tw 3.8s ease-in-out infinite; }
.em-bulb-ring-tw2 { animation: em-bulb-ring-tw 5.1s ease-in-out -1.7s infinite; } /* fix round 3, m-18: negative delay keeps the 1.7 s phase offset with no above-fold animation-delay */
@media (prefers-reduced-motion: reduce) {
  .em-bulb-ring-tw1,
  .em-bulb-ring-tw2 { animation: none; }
}
/* ---------- /APPEND: HUB EMBLEMS ---------- */

/* ---------- FIX ROUND 3 (hub QA round 2, 2026-09-08): each block names the QA id it answers. */

/* M-11 (b). The price card's note carries the hub's only cost-article link; its phone hide is gone, it renders small under the CTA. */
@media (max-width: 767px) {
  body.layout-christmas.cl-page-hub .cl-price p.cl-price-note { font-size: 0.85rem; line-height: 1.45; margin: 0.6rem 0 0; }
}
/* M-11 (a) DECLARED, not changed: the three proof stats stay display:none under 768 (82px against the 390 ceiling). */

/* m-16. 430x932: the card list keeps a little more air under it so the proof CTA and price CTA are not one viewport apart. */
@media (min-width: 400px) and (max-width: 767px) {
  body.layout-christmas.cl-page-hub .cl-price .cl-list { margin-bottom: 1.75rem; }
}

/* m-15 (ruling B5 cut 2). Under 560 the gallery is a two-row snap rail (four tiles, a sliver of column three, tiles 5-6 behind), bled to the gutter. */
@media (max-width: 559px) {
  body.layout-christmas.cl-page-hub .cl-gallery--four {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: auto auto;
    grid-template-columns: repeat(3, 46%); /* two tiles fill the screen, a 30px sliver of the third column shows the rail */
    gap: var(--cl-gap-tiles);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 216, 138, 0.45) rgba(255, 255, 255, 0.06);
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 0.25rem;
    scroll-padding-left: 1.5rem;
    width: auto;
  }
  body.layout-christmas.cl-page-hub .cl-gallery--four figure { scroll-snap-align: start; }
  body.layout-christmas.cl-page-hub .cl-gallery--four .cl-tile--more { display: block; }
}

/* m-13. One phone control per nav band: the 24px glyph link under 768, the Call us button (.cl-nav-tel) from 768. */
@media (min-width: 768px) {
  body.layout-christmas.cl-page-hub #nav a.nav-call { display: none; }
}


/* M-4 / M-2 (fix round 3). Ladders from rebuild2/hub-fix3/solver.js: crew bleed 38vw cap 520 from 1024, .cl-tab-only, h2.wide 30ch. Rungs 1d/5d deleted and 6d moved to 1024 by the R2 deadspace block. */
body.layout-christmas.cl-page-hub .cl-ctarow--date-lead,
body.layout-christmas.cl-page-hub .cl-ctarow--price-end { display: none; }
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-hub .cl-bleed { height: clamp(260px, 38vw, 520px); }
  body.layout-christmas.cl-page-hub .cl-band--after-bleed { padding-top: 1.5rem; }
  body.layout-christmas.cl-page-hub .cl-tab-only { display: none; }
  body.layout-christmas.cl-page-hub .cl-band h2.wide { max-width: 30ch; }
  body.layout-christmas.cl-page-hub .cl-ctarow--desk { margin-top: 6rem; }
  body.layout-christmas.cl-page-hub .cl-ctarow--price-end { display: flex; margin-top: 2rem; }
  body.layout-christmas.cl-page-hub .cl-ctarow--date-end { margin-top: 5.5rem; }
  body.layout-christmas.cl-page-hub .cl-faq-aside { align-self: end; }
}
/* 1280x800 is the tightest window ([856, 1280] with the CTA's own 56px): the 5 -> 5d -> 6 span carries about 50px of air above the rungs. */
@media (min-width: 1280px) and (max-width: 1439px) {
  body.layout-christmas.cl-page-hub .cl-ctarow--price-end { margin-top: 4.5rem; }
  body.layout-christmas.cl-page-hub .cl-ctarow--date-end { margin-top: 7.5rem; }
}
@media (min-width: 1440px) {
  body.layout-christmas.cl-page-hub .cl-ctarow--price-end { display: none; }
  body.layout-christmas.cl-page-hub .cl-ctarow--date-lead { display: flex; margin-bottom: 1.4rem; }
  body.layout-christmas.cl-page-hub .cl-ctarow--date-end { display: none; }
  body.layout-christmas.cl-page-hub .cl-faq-aside { align-self: start; }
}
@media (min-width: 1600px) {
  body.layout-christmas.cl-page-hub .cl-ctarow--desk { margin-top: 13rem; }
}
/* tablets: the 02 -> 2d -> 03 span grows ~300px so both gaps clear an 820 viewport plus the CTA (M-2). */
@media (min-width: 768px) and (max-width: 1023px) {
  body.layout-christmas.cl-page-hub .cl-split { grid-template-columns: 1fr 1fr; }
  body.layout-christmas.cl-page-hub #branch.cl-band { padding-bottom: 8.5rem; }
  body.layout-christmas.cl-page-hub #how.cl-band--after-bleed { padding-top: 7.5rem; padding-bottom: 8.5rem; }
  body.layout-christmas.cl-page-hub #options.cl-band { padding-top: 8.5rem; }
  body.layout-christmas.cl-page-hub .cl-ctarow--tab { margin-top: 2rem; margin-bottom: 1.5rem; }
}
/* Air under the price grid before the comparison H2 from 960. */
@media (min-width: 960px) {
  body.layout-christmas.cl-page-hub .cl-pricegrid { margin-bottom: 1.5rem; }
}
/* APPEND: HUB FEEDBACK R2 (Lance 2026-09-08) lightbox */
/* L4: <dialog class="cl-lb"> built by the lazy christmas-lightbox.js. */
.cl-page-hub .cl-lb{position:fixed;inset:0;width:auto;height:auto;max-width:none;max-height:none;margin:0;border:0;padding:max(.75rem,env(safe-area-inset-top)) .75rem max(.75rem,env(safe-area-inset-bottom));background:#000000eb;color:#fff;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;overscroll-behavior:contain;touch-action:pinch-zoom;animation:cl-lb-in .2s}
.cl-page-hub .cl-lb[open]{display:flex}
.cl-page-hub .cl-lb-img{max-width:100%;max-height:88vh;object-fit:contain}
.cl-page-hub .cl-lb-cap{margin:0;font:400 .9rem/1.4 var(--cl-font-text);text-align:center}
.cl-page-hub .cl-lb-close{position:absolute;top:max(.6rem,env(safe-area-inset-top));right:.6rem;width:48px;height:48px;margin:0;padding:0;border:0;border-radius:50%;background:#141620e0;display:flex;align-items:center;justify-content:center}
.cl-page-hub .cl-lb-close svg{width:22px;height:22px;margin:0;top:0}
html.cl-lb-open{overflow:hidden}
@keyframes cl-lb-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.cl-page-hub .cl-lb{animation:none}}

/* APPEND: HUB FEEDBACK R2 (Lance 2026-09-08) phone */
/* L1 + L2 root cause: grid items default to min-width:auto, so the nowrap lease and town rails stretched their 1fr tracks; min-width:0 fixes both. */
@media (max-width: 767px) {
  body.layout-christmas.cl-page-hub .cl-pricegrid > *,
  body.layout-christmas.cl-page-hub .cl-city-split > * { min-width: 0; }
  /* L2. Rails contain overscroll; the right-edge fade is the "more" cue and the extra padding parks the last chip left of it. */
  body.layout-christmas.cl-page-hub .cl-towns.cl-scroll-x {
    overscroll-behavior-x: contain;
    padding-right: 4.3rem;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), rgba(0, 0, 0, 0));
    mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), rgba(0, 0, 0, 0));
  }
}
/* L1. The figure was a fixed 48px on every phone; under 760 it tracks the card (36.8px at 320 to 49.5px at 430), centered with its sub line. */
@media (max-width: 759px) {
  body.layout-christmas.cl-page-hub .cl-price-figure { font-size: clamp(2.25rem, 11.5vw, 3.25rem); text-align: center; }
  body.layout-christmas.cl-page-hub .cl-price-sub { text-align: center; }
}

/* APPEND: HUB FEEDBACK R2 (Lance 2026-09-08) badge */
/* L3 / R6. Under 760 the badge sits on the driveway: top from the plate width (75cqw on 4:3, 62.5cqw under max-height 700; vw fallback), right 16% clears the pickup. Proof: hub-fb2/badge/PROOF.txt */
@media (max-width: 759px) {
  body.layout-christmas.cl-page-hub .cl-hero { container-type: inline-size; }
  body.layout-christmas.cl-page-hub .cl-hero-badge {
    top: calc(75vw - var(--cl-badge-w) - 12px);
    top: calc(75cqw - var(--cl-badge-w) - 12px);
    right: 16%;
  }
}
@media (max-width: 759px) and (max-height: 700px) {
  body.layout-christmas.cl-page-hub .cl-hero-badge {
    top: calc(62.5vw - var(--cl-badge-w) - 8px);
    top: calc(62.5cqw - var(--cl-badge-w) - 8px);
  }
}

/* ---------- APPEND: HUB FEEDBACK R2 (Lance 2026-09-08) desktop ----------
   L6 NAV (R7). styles1.1.css button:last-of-type{margin-right:auto} hit <button class="cl-nav-tel"> and packed the row left; the fix round 1 grid centers it. */
@media (min-width: 768px) {
  body.layout-christmas.cl-page-hub #nav .cl-nav-tel { margin-right: 0; }
}
/* L7 HERO PANEL (ruling R2). .cl-hero-panel: plain under 760; from 760 the homepage .hero-support treatment (fit-content, 36rem cap, night gradient, .5rem radius, text-shadow). H1 capped at 4rem. */
@media (min-width: 760px) {
  body.layout-christmas.cl-page-hub .cl-hero-panel {
    width: fit-content;
    max-width: min(36rem, 100%);
    background-image: linear-gradient(90deg, rgba(5, 10, 22, 0.84), rgba(5, 10, 22, 0.62));
    border-radius: 0.5rem;
    padding: 0.85rem 1.1rem;
  }
  body.layout-christmas.cl-page-hub .cl-hero-panel h1 {
    font-size: min(4rem, var(--cl-h1));
    max-width: none;
  }
  body.layout-christmas.cl-page-hub .cl-hero-inner .cl-hero-panel .cl-micro,
  body.layout-christmas.cl-page-hub .cl-hero-inner .cl-hero-panel .cl-crumbs,
  body.layout-christmas.cl-page-hub .cl-hero-inner .cl-hero-panel .cl-ctarow {
    max-width: none;
  }
  body.layout-christmas.cl-page-hub .cl-hero .cl-hero-panel .cl-eyebrow,
  body.layout-christmas.cl-page-hub .cl-hero .cl-hero-panel .cl-proofstrip,
  body.layout-christmas.cl-page-hub .cl-hero .cl-hero-panel .cl-deck,
  body.layout-christmas.cl-page-hub .cl-hero .cl-hero-panel .cl-priceanchor,
  body.layout-christmas.cl-page-hub .cl-hero .cl-hero-panel .cl-priceanchor *,
  body.layout-christmas.cl-page-hub .cl-hero .cl-hero-panel .cl-micro,
  body.layout-christmas.cl-page-hub .cl-hero .cl-hero-panel .cl-citypick-l,
  body.layout-christmas.cl-page-hub .cl-hero .cl-hero-panel .cl-crumbs {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 2px 12px rgba(0, 0, 0, 0.75);
  }
}
/* 760-1023: the hero is content-driven, so 70px of top margin keeps the panel top (174px at 768) under the roofline apex (about 152px). */
@media (min-width: 760px) and (max-width: 1023px) {
  body.layout-christmas.cl-page-hub .cl-hero-panel { margin-top: 70px; }
}
/* ---------- /APPEND: HUB FEEDBACK R2 desktop ---------- */
/* APPEND: HUB FEEDBACK R2 (Lance 2026-09-08) deadspace */
/* L8 / ruling R1. No orange CTA floats: rungs 1d/5d deleted, 2d/3d hug content, 6d is THE DATE's rung from 1024, 2d hidden on tablets (sticky bar is the rung), 760+ band padding capped 4.25rem. Phones unchanged. */
@media (min-width: 760px) {
  body.layout-christmas.cl-page-hub { --cl-band-y: clamp(3.6rem, 5vw, 4.25rem); --cl-band-y-tight: clamp(3.6rem, 5vw, 4.25rem); }
  body.layout-christmas.cl-page-hub #app > footer.container { padding-top: 0.75rem; }
  body.layout-christmas.cl-page-hub #app > footer.container > .menus { padding-top: 2rem; }
  body.layout-christmas.cl-page-hub .cl-ctarow--tab { margin-top: 1.25rem; margin-bottom: 1rem; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  body.layout-christmas.cl-page-hub .cl-ctarow--tab { display: none; } /* the sticky call bar is the tablet rung */
  body.layout-christmas.cl-page-hub #branch.cl-band { padding-bottom: var(--cl-band-y); }
  body.layout-christmas.cl-page-hub #how.cl-band--after-bleed { padding-top: clamp(1.6rem, 4vw, 3rem); padding-bottom: var(--cl-band-y); }
  body.layout-christmas.cl-page-hub #options.cl-band { padding-top: var(--cl-band-y); }
}
@media (min-width: 760px) and (max-width: 939px) {
  body.layout-christmas.cl-page-hub .cl-closegrid { gap: 0.5rem; }
}
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-hub .cl-ctarow--desk { margin-top: 1.25rem; }
  body.layout-christmas.cl-page-hub .cl-ctarow--date-end { display: none; }
  body.layout-christmas.cl-page-hub .cl-ctarow--date-lead { display: flex; margin-bottom: 1.4rem; }
}
/* L9. The January strand is full width with no fade (left .cl-inner--text, dropped .cl-strand--fade); phone bottom margin restated. */
body.layout-christmas.cl-page-hub .cl-january > .cl-strand { margin: 0.5rem 0 1.5rem; }
@media (max-width: 767px) {
  body.layout-christmas.cl-page-hub .cl-january > .cl-strand { margin-bottom: 0.6rem; }
}

/* APPEND: HUB FEEDBACK R2 fix round 1 (2026-09-10) */
/* L6 / M1. #nav .inner is a 1fr auto 1fr grid from 1024: equal end slots, so the menu centers on the viewport whatever the logo (168) and Call-us (99) measure. 1024-1279: logo + Call us row 1, menu row 2 (extended from 1123 on 2026-09-24 so the Call us button / phone number never wraps). 1280-1439: link padding 10 -> 6px so the one row fits. */
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-hub #nav .inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  body.layout-christmas.cl-page-hub #nav .inner > .logo { justify-self: start; }
  body.layout-christmas.cl-page-hub #nav nav { margin: 0; justify-self: center; }
  body.layout-christmas.cl-page-hub #nav .cl-nav-tel { margin-left: 0; justify-self: end; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  body.layout-christmas.cl-page-hub #nav .inner { align-content: center; row-gap: 0.25rem; }
  body.layout-christmas.cl-page-hub #nav nav { grid-column: 1 / -1; grid-row: 2; }
  body.layout-christmas.cl-page-hub #nav .cl-nav-tel { grid-column: 3; grid-row: 1; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  body.layout-christmas.cl-page-hub #nav nav > ul > li > a:not(.button) { padding-left: 6px; padding-right: 6px; }
}
/* APPEND: HUB FEEDBACK R2 fix round 2 (2026-09-10) */
/* L7 / M2: panel geometry unchanged (the ridge band spans the copy column; numbers in fix-round-2/RESULT.txt, ruling pending). The price qualifier and micro line step up from --cl-text-dim so every hero line holds >= 4.5:1 per pixel at 768-1920. */
@media (min-width: 760px) {
  body.layout-christmas.cl-page-hub .cl-hero .cl-hero-panel .cl-priceanchor-t,
  body.layout-christmas.cl-page-hub .cl-hero .cl-hero-panel .cl-micro { color: #c9d3e8; }
}

/* APPEND: HUB MASCOT (Lance 2026-09-11) badge */
/* SCA badge (600x520) was squashed: B-1 max-height 72 vs its inline width 150 under 768, flex stretch
   to 133 from 768. Center the row, height auto, phone cap via max-width (beats the inline width, no
   importance flag): 83x72 phone, 150x130 from 768. Proof: rebuild2/hub-mascot/badge/PROOF.txt */
body.layout-christmas.cl-page-hub #app > footer.container .faves { align-items: center; }
body.layout-christmas.cl-page-hub #app > footer.container .faves img { height: auto; }
@media (max-width: 767px) {
  body.layout-christmas.cl-page-hub #app > footer.container .faves img[src*="sca-badge"] {
    max-height: none;
    max-width: calc(72px * 600 / 520);
  }
}
/* APPEND: HUB MASCOT FIGURE (Lance 2026-09-11) presenter + ladder */
/* Two illustrated figures, bare <img>, no wrapper and no pseudo element. styles1.1.css:117
   makes every element a containing block and forces img{margin:0 auto;max-width:100%;
   height:auto !important}, so each figure is sized by WIDTH ONLY and its width/height
   attributes carry the ratio: they are the dimensions OF THE FILE IN src, not of the
   master art, because the ladder tiers are 0.617 wide-to-tall and the 1010x1536 master is
   0.658. That is what holds CLS at 0. The presenter is the phone-only
   above-fold figure ruling R-W1 asks for, gone from 760 up; it stands on the seam where the
   plate ends, so the cqw/vw pair and the short-phone override track the same 4:3 and 16:10
   plate the badge rule above tracks. The ladder is 1024 and up only: at 768 it is a quarter
   of the viewport and crowds the lead, and from 760 to 767 the band still has its 16px phone
   padding while --cl-band-y has already switched to 57.6px, which floats it off the band
   edge. Neither image carries srcset: a DPR2 phone choosing the w480 presenter tier would
   put G3 over the R-W1 ceiling. Proof: rebuild2/hub-mascot/placement/SPEC.md */
body.layout-christmas.cl-page-hub .cl-mascot {
  position: absolute;
  margin: 0;
  pointer-events: none;
}
body.layout-christmas.cl-page-hub .cl-mascot--hero {
  left: 6px;
  top: 75vw;
  top: 75cqw;
  width: 26vw;
  width: 26cqw;
  max-width: 150px;
  transform: translateY(-100%);
  z-index: 1;
  filter: saturate(.82) brightness(.9) contrast(1.02) drop-shadow(0 10px 12px rgba(5, 10, 22, .55));
}
@media (max-width: 759px) and (max-height: 700px) {
  body.layout-christmas.cl-page-hub .cl-mascot--hero {
    top: 62.5vw;
    top: 62.5cqw;
    width: 21.5vw;
    width: 21.5cqw;
  }
}
@media (min-width: 760px) {
  body.layout-christmas.cl-page-hub .cl-mascot--hero { display: none; }
}
body.layout-christmas.cl-page-hub .cl-mascot--price { display: none; }
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-hub .cl-mascot--price {
    display: block;
    right: 0;
    top: calc(-1 * var(--cl-band-y));
    width: 187px;
    z-index: -1;
    filter: drop-shadow(0 14px 18px rgba(20, 30, 60, .18));
  }
}
@media (min-width: 1280px) {
  body.layout-christmas.cl-page-hub .cl-mascot--price { width: 202px; }
}
@media (min-width: 1440px) {
  body.layout-christmas.cl-page-hub .cl-mascot--price { width: 204px; }
}
/* Mascots 3-5. storage at 08 January, phone at 07 The date, presenter at 11 The close.
   Each figure is position:absolute so it adds 0 document height, and each is the FIRST
   child of its band so it paints above the band ground, behind .cl-inner text, and
   behind the next band. Sized by width only: styles1.1.css line 117 forces
   height:auto !important, so the ratio comes from the img width/height attributes.
   Polish 2026-09-15 (numbers in rebuild2/hub-mascot/placement2/work/polish/REPORT.md):
   the phone crop gets a bottom mask so its flat edge does not sit on the invisible
   navy-on-navy seam; the cast shadow was invisible on night bands and is now a faint
   warm rim (chroma 7.2, not an orange object); brightness .9 to .96; #january gets a
   bottom hairline so the storage boots have a floor; the phone shows from 768 at 170px
   (180px collides with the guarantee paragraph at 960 to 1023); storage steps to 230px
   at 1600 (240px overflows the band); phone and presenter have only 8px and 4px of
   upward headroom so they get no 1600 step. */
body.layout-christmas.cl-page-hub .cl-mascot--jan,
body.layout-christmas.cl-page-hub .cl-mascot--date,
body.layout-christmas.cl-page-hub .cl-mascot--close {
  display: none;
  position: absolute;
  margin: 0;
  pointer-events: none;
  filter: saturate(.84) brightness(.96) contrast(1.02) drop-shadow(0 0 8px rgba(255, 198, 112, .28));
}
/* The waist-up crop dissolves instead of ending on an invisible seam. */
body.layout-christmas.cl-page-hub .cl-mascot--date {
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}
@media (min-width: 768px) {
  /* right edge tracks the shell edge exactly at every width */
  body.layout-christmas.cl-page-hub .cl-mascot--date {
    display: block;
    right: max(1.3rem, calc(50% - 590px));
    bottom: 0;
    width: 170px;
  }
}
@media (min-width: 1024px) {
  /* right edge lands 316px left of center: 17.8px clear of the widest January ink */
  body.layout-christmas.cl-page-hub .cl-mascot--jan {
    display: block;
    right: calc(50% + 316px);
    bottom: 0;
    width: 172px;
  }
  body.layout-christmas.cl-page-hub .cl-mascot--date {
    width: 172px;
  }
  /* left edge tracks the shell edge; boots land on the close-to-footer seam */
  body.layout-christmas.cl-page-hub .cl-mascot--close {
    display: block;
    left: max(1.3rem, calc(50% - 590px));
    bottom: 0;
    width: 170px;
  }
  /* the floor the storage pose walks on */
  body.layout-christmas.cl-page-hub #january {
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
  }
}
@media (min-width: 1280px) {
  body.layout-christmas.cl-page-hub .cl-mascot--jan { width: 204px; }
  body.layout-christmas.cl-page-hub .cl-mascot--date { width: 184px; }
  body.layout-christmas.cl-page-hub .cl-mascot--close { width: 180px; }
}
@media (min-width: 1600px) {
  body.layout-christmas.cl-page-hub .cl-mascot--jan { width: 230px; }
}
/* [HUB] 2026-09-22 MASCOTS ON PHONES. Lance: the Sharp guy figures are the
   unifying part of the brand and must be on phones here too, the way the two city
   pages now do it. Hub twin of the [SC] / [SF] blocks in rebuild2/phaseC/sc/
   append.css. Full diagnosis, rejected options, measurements and before/after
   screenshots: rebuild2/phaseC/polish/mascots/diagnosis.md and hub-applied/.

   The rules above hide four of the five figures on a phone, and from 760 to 767
   they hide all five (--hero stops at 760, --date did not start until 768). The
   display rules below deliberately override those bases: same specificity, later
   in the file. Everything here is max-width, so 768 and up does not move.

   PLACEMENT is the city pages' option A: each figure at the top right corner of
   its own band, beside the eyebrow and heading, on the shell edge the desktop
   figures use. All stay position:absolute, so none adds document height and CLS
   is untouched, and all are sized by WIDTH ONLY because styles1.1.css line 117
   forces height:auto !important. Widths are the city pages' four, so the three
   pages read as one system; they render 81-97px tall (ratios: price 480x778,
   date 480x733, jan 480x945, close 480x804).

   TWO HUB-ONLY DEPARTURES, both forced by this page's markup.

   1. --price sits INSIDE .cl-inner, and last in it, not on the band like the
   other three, so its containing block is the text shell. Hence right: 0 rather
   than the shell-edge max(), which lands it on the same vertical as the others,
   and z-index: -1, which buys the "text wins" guarantee the others get free by
   standing ahead of .cl-inner in the DOM (the pair the 1024 rule already uses).
   And top: -16px, because .cl-inner starts below the band's 16px top padding;
   without it the ladder's feet land 0.9px above the lead paragraph at 390. A
   literal, not calc(-1 * var(--cl-band-y)): at 760-767 the band still has its
   16px phone padding while --cl-band-y has already switched to 57.6px.

   2. #january's heading is auto-margin centered, so a margin-right notch would
   kill the right auto margin and slam it to the far right. The notch goes on the
   box as padding-right instead (border-box, so it shrinks the shell), and only
   to 699, where that box stops centering its text.

   COPY CANNOT RUN UNDER A FIGURE: 80px of inset from 360 up, 68px at 320-359,
   the city pages' two numbers. margin-right and NOT padding-right on the three
   left-aligned headings, because the 06 heading carries max-width: 275.4px under
   border-box and padding would have eaten that cap instead of the free space
   beside it. Measured clearance: 13px at 320, 17px or better from 360 up. And a
   figure cannot reach what sits BELOW its heading, which the inset does not
   guard: that is the min-height floors. They sit under what the live headings
   measure, so they cost nothing today; they stop a later one-line heading
   sliding a paragraph up under a figure. On 08 the floor also keeps the h2
   bottom margin from collapsing out of its box, so it carries that margin.

   Cost at 390: document height 11,449 to 11,477, all of it one heading
   rewrapping. No HTML changed. */
@media (max-width: 767px) {
  body.layout-christmas.cl-page-hub .cl-mascot--price,
  body.layout-christmas.cl-page-hub .cl-mascot--date,
  body.layout-christmas.cl-page-hub .cl-mascot--jan,
  body.layout-christmas.cl-page-hub .cl-mascot--close {
    display: block;
    position: absolute;
    top: 0;
    right: max(1.3rem, calc(50% - 590px));
    left: auto;
    bottom: auto;
    margin: 0;
    pointer-events: none;
  }
  /* inside .cl-inner, and last in the DOM: see departure 1 above */
  body.layout-christmas.cl-page-hub .cl-mascot--price {
    top: -16px;
    right: 0;
    z-index: -1;
    width: 60px;
    filter: drop-shadow(0 8px 10px rgba(20, 30, 60, .20));
  }
  /* the three night-band figures keep the warm rim their base rule already carries */
  body.layout-christmas.cl-page-hub .cl-mascot--date { width: 63px; }
  body.layout-christmas.cl-page-hub .cl-mascot--jan { width: 46px; }
  body.layout-christmas.cl-page-hub .cl-mascot--close { width: 58px; }
  /* the notch. One value for all four so the text rag stays even down the page. */
  body.layout-christmas.cl-page-hub #price .cl-eyebrow,
  body.layout-christmas.cl-page-hub #price .cl-eyebrow + h2,
  body.layout-christmas.cl-page-hub #date .cl-eyebrow,
  body.layout-christmas.cl-page-hub #date .cl-eyebrow + h2,
  body.layout-christmas.cl-page-hub #close .cl-eyebrow,
  body.layout-christmas.cl-page-hub #close .cl-eyebrow + h2 { margin-right: 80px; }
  /* the floor under a short heading (see above) */
  body.layout-christmas.cl-page-hub #price .cl-eyebrow + h2,
  body.layout-christmas.cl-page-hub #date .cl-eyebrow + h2,
  body.layout-christmas.cl-page-hub #close .cl-eyebrow + h2 { min-height: 56px; }
  body.layout-christmas.cl-page-hub #january .cl-inner--text:first-of-type { min-height: 88px; }
}
/* 08 only, and only where .cl-inner--text is left aligned. From 700 to 767 that
   box centers its text, the storage figure is 46px against a 725px shell, and the
   notch is not needed: applying it there would just shift the center axis 40px
   left of the paragraph under it. */
@media (max-width: 699px) {
  body.layout-christmas.cl-page-hub #january .cl-inner--text:first-of-type { padding-right: 80px; }
}
@media (max-width: 359px) {
  body.layout-christmas.cl-page-hub .cl-mascot--price { width: 52px; }
  body.layout-christmas.cl-page-hub .cl-mascot--date { width: 55px; }
  body.layout-christmas.cl-page-hub .cl-mascot--jan { width: 41px; }
  body.layout-christmas.cl-page-hub .cl-mascot--close { width: 50px; }
  body.layout-christmas.cl-page-hub #price .cl-eyebrow,
  body.layout-christmas.cl-page-hub #price .cl-eyebrow + h2,
  body.layout-christmas.cl-page-hub #date .cl-eyebrow,
  body.layout-christmas.cl-page-hub #date .cl-eyebrow + h2,
  body.layout-christmas.cl-page-hub #close .cl-eyebrow,
  body.layout-christmas.cl-page-hub #close .cl-eyebrow + h2 { margin-right: 68px; }
  body.layout-christmas.cl-page-hub #january .cl-inner--text:first-of-type { padding-right: 68px; }
}
/* [HUB] /2026-09-22 MASCOTS ON PHONES */
/* [HUB] NO LEAD FORM (Lance 2026-09-23). The "have us call you" block under the
   close grid is gone, so the close presenter would stand on the headline and the
   steps. From 1024 he moves to the right column's left edge and the CTA group
   steps right by his width plus 1.5rem; boots stay on the seam (bottom: 0). The
   right column keeps the CTA at its natural width (22.4rem). Phones and 768 to
   1023 untouched. Same rules as sf/append.css and sc/append.css. */
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-hub #close .cl-closegrid { grid-template-columns: minmax(0, 1fr) minmax(calc(170px + 1.5rem + 22.4rem), 1fr); }
  body.layout-christmas.cl-page-hub #close .cl-closegrid > div:last-child { padding-left: calc(170px + 1.5rem); }
  body.layout-christmas.cl-page-hub #close .cl-mascot--close { left: min(calc(50% + var(--cl-gap-grid) / 2), calc(100% - max(1.3rem, 50% - 590px) - 170px - 1.5rem - 22.4rem)); }
}
@media (min-width: 1280px) {
  body.layout-christmas.cl-page-hub #close .cl-closegrid { grid-template-columns: minmax(0, 1fr) minmax(calc(180px + 1.5rem + 22.4rem), 1fr); }
  body.layout-christmas.cl-page-hub #close .cl-closegrid > div:last-child { padding-left: calc(180px + 1.5rem); }
  body.layout-christmas.cl-page-hub #close .cl-mascot--close { left: min(calc(50% + var(--cl-gap-grid) / 2), calc(100% - max(1.3rem, 50% - 590px) - 180px - 1.5rem - 22.4rem)); }
}
/* [HUB] /2026-09-23 NO LEAD FORM */
/* === /APPEND: HUB === */

/* === APPEND: SIOUX FALLS === */
/* === /APPEND: SIOUX FALLS === */

/* === APPEND: SIOUX CITY === */
/* === /APPEND: SIOUX CITY === */