/* === SIOUX FALLS builder region (REBUILD 2, Phase C). Every rule is prefixed
   body.layout-christmas.cl-page-sioux-falls. Part 1 is the APPROVED HUB region copied
   selector for selector with cl-page-hub rewritten to cl-page-sioux-falls, so Lance's
   look fixes L1-L9 and the five mascot placements reach this page too (ruling C-4).
   The hub EMBLEMS sub-block is deliberately NOT copied: it is scoped body.layout-christmas
   and is already shared. Part 2 is the Sioux Falls delta. Audit notes:
   rebuild2/phaseC/sf/BUILD-NOTE.txt. */
body.layout-christmas.cl-page-sioux-falls .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-sioux-falls .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-sioux-falls 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-sioux-falls. */
body.layout-christmas.cl-page-sioux-falls { --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-sioux-falls .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-sioux-falls 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-sioux-falls .cl-band--after-bleed { padding-top: clamp(1.6rem, 4vw, 3rem); }
body.layout-christmas.cl-page-sioux-falls .cl-price .cl-list { margin-bottom: 1rem; }
body.layout-christmas.cl-page-sioux-falls .cl-price .cl-list li { font-size: 0.98rem; }
body.layout-christmas.cl-page-sioux-falls .cl-price-note { font-size: 0.92rem; color: var(--cl-ink-soft); margin: 0.75rem 0 0; }
body.layout-christmas.cl-page-sioux-falls .cl-lease-col .cl-h3 { margin-bottom: 0.9rem; }
body.layout-christmas.cl-page-sioux-falls .cl-seal-row { display: flex; align-items: center; gap: 1.25rem; margin: 1.5rem 0 0; }
body.layout-christmas.cl-page-sioux-falls .cl-seal-row p { margin: 0; max-width: 40ch; }
body.layout-christmas.cl-page-sioux-falls .cl-hero .cl-citypick { margin-top: 12px; }
/* 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-sioux-falls .cl-compare-cards > .cl-compare-card { flex: 0 0 84%; }
  body.layout-christmas.cl-page-sioux-falls .cl-compare-cards,
  body.layout-christmas.cl-page-sioux-falls .cl-leasegrid,
  body.layout-christmas.cl-page-sioux-falls .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-sioux-falls .cl-duo figure.cl-duo--macro { display: none; }
  body.layout-christmas.cl-page-sioux-falls .cl-statstrip { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 1.4rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-stat b { font-size: 1.9rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-band,
  body.layout-christmas.cl-page-sioux-falls .cl-january,
  body.layout-christmas.cl-page-sioux-falls .cl-close { padding: 1.7rem 0; }
  body.layout-christmas.cl-page-sioux-falls .cl-statstrip { grid-template-columns: 1fr; }
  body.layout-christmas.cl-page-sioux-falls .cl-statstrip .cl-stat { display: none; }
  body.layout-christmas.cl-page-sioux-falls .cl-compare-card .cl-compare-row { padding: 0.4rem 0; }
  body.layout-christmas.cl-page-sioux-falls .cl-compare-card { padding: 1rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-band--flush { padding: 0; }
  body.layout-christmas.cl-page-sioux-falls .cl-band--after-bleed { padding-top: 1.3rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-expand { margin-bottom: 1rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-expand summary { min-height: 52px; padding: 0.55rem 0; }
  body.layout-christmas.cl-page-sioux-falls .cl-faq summary { font-size: 1.15rem; padding: 0.75rem 0; }
  body.layout-christmas.cl-page-sioux-falls .cl-receipt img { max-width: 220px; }
  body.layout-christmas.cl-page-sioux-falls .cl-quote-text { font-size: 0.98rem; padding: 1.1rem 1.2rem 0.9rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-quote-card .cl-stars { padding: 1rem 1.2rem 0; }
  body.layout-christmas.cl-page-sioux-falls .cl-quote-meta { padding: 0 1.2rem 1rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-chip { padding: 0.7rem 1.2rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-chips { margin-bottom: 1rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-price .cl-list li { padding-top: 0.15rem; padding-bottom: 0.15rem; margin: 0; }
  body.layout-christmas.cl-page-sioux-falls .cl-price { padding: 1.25rem 1.1rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-seal-row { margin-top: 0.8rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-seal-row p { font-size: 0.95rem; line-height: 1.5; }
  body.layout-christmas.cl-page-sioux-falls .cl-band h2 { margin-bottom: 0.7rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-band p { margin-bottom: 0.85rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-lead { margin-bottom: 0.85rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-statstrip { margin-bottom: 1rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-video { margin-bottom: 1rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-gallery { margin-bottom: 1rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-split { gap: 1.2rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-pricegrid { gap: 1.4rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-faqgrid { gap: 1.2rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-city-split { gap: 1.2rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-closegrid { gap: 1rem; }
}
/* 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-sioux-falls .cl-paper .cl-compare { border-top-color: var(--cl-paper-edge); }
body.layout-christmas.cl-page-sioux-falls .cl-paper .cl-compare-head,
body.layout-christmas.cl-page-sioux-falls .cl-paper .cl-compare .cl-compare-row { border-bottom-color: var(--cl-paper-edge); }
body.layout-christmas.cl-page-sioux-falls .cl-paper .cl-compare-head > *,
body.layout-christmas.cl-page-sioux-falls .cl-paper .cl-compare .cl-compare-label { color: var(--cl-ink-soft); }
body.layout-christmas.cl-page-sioux-falls .cl-paper .cl-compare .cl-compare-value { color: var(--cl-ink-body); align-items: flex-start; }
body.layout-christmas.cl-page-sioux-falls .cl-paper .cl-compare-head > .is-sharp,
body.layout-christmas.cl-page-sioux-falls .cl-paper .cl-compare .cl-compare-value.is-sharp { color: var(--cl-ink); font-weight: 600; }
body.layout-christmas.cl-page-sioux-falls .cl-paper .cl-compare .cl-mark,
body.layout-christmas.cl-page-sioux-falls .cl-paper .cl-compare-cards .cl-mark { flex: 0 0 auto; }
body.layout-christmas.cl-page-sioux-falls .cl-compare-value.cl-mid:before,
body.layout-christmas.cl-page-sioux-falls .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-sioux-falls .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-sioux-falls .cl-lease { display: block; overflow: visible; scroll-snap-type: none; padding-bottom: var(--cl-pad-panel); }
}

/* ---------- 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-sioux-falls 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-sioux-falls .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-sioux-falls .cl-proof.cl-proof--two > .cl-quote-card {
    flex: none;
    width: auto;
    scroll-snap-align: none;
  }
  body.layout-christmas.cl-page-sioux-falls .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-sioux-falls .cl-band,
  body.layout-christmas.cl-page-sioux-falls .cl-january,
  body.layout-christmas.cl-page-sioux-falls .cl-close { padding: 1.3rem 0; }
  body.layout-christmas.cl-page-sioux-falls .cl-band--flush { padding: 0; }
  body.layout-christmas.cl-page-sioux-falls .cl-band--after-bleed { padding-top: 1.1rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-band h2 { margin-bottom: 0.55rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-band p { margin-bottom: 0.7rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-lead { margin-bottom: 0.7rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-band .cl-deck { margin-bottom: 0.7rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-expand { margin-bottom: 0.8rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-expand summary { min-height: 46px; padding: 0.35rem 0; }
  body.layout-christmas.cl-page-sioux-falls .cl-faq summary { min-height: 48px; font-size: 1.1rem; padding: 0.5rem 0; }
  body.layout-christmas.cl-page-sioux-falls .cl-faq details[open] summary:after { margin-top: 0.4rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-statstrip { margin-bottom: 0.8rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-verify { margin-top: 0.9rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-price .cl-price-p,
  body.layout-christmas.cl-page-sioux-falls .cl-price .cl-after-cta { display: none; }
  body.layout-christmas.cl-page-sioux-falls .cl-price .cl-list { margin-bottom: 0.8rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-chip { padding: 0.6rem 1.2rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-chips { margin-bottom: 0.8rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-video { margin-bottom: 0.8rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-gallery { margin-bottom: 0.8rem; }
  body.layout-christmas.cl-page-sioux-falls .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-sioux-falls #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-sioux-falls .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-sioux-falls #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-sioux-falls .cl-hero .cl-priceanchor-n { font-size: 1.3rem; margin-right: 0.35rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-hero .cl-priceanchor-t { font-size: 0.82rem; }
}
@media (max-width: 359px) {
  body.layout-christmas.cl-page-sioux-falls .cl-hero-inner { padding-top: 12px; }
  body.layout-christmas.cl-page-sioux-falls .cl-hero .cl-deck { font-size: 0.95rem; margin-bottom: 8px; }
  body.layout-christmas.cl-page-sioux-falls .cl-hero .cl-priceanchor { padding-left: 0.5rem; margin-bottom: 10px; }
  body.layout-christmas.cl-page-sioux-falls .cl-hero .cl-priceanchor-n { font-size: 1.1rem; margin-right: 0.3rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-hero .cl-priceanchor-t { font-size: 0.78rem; }
  body.layout-christmas.cl-page-sioux-falls .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-sioux-falls a:focus-visible,
body.layout-christmas.cl-page-sioux-falls button:focus-visible,
body.layout-christmas.cl-page-sioux-falls summary:focus-visible,
body.layout-christmas.cl-page-sioux-falls input:focus-visible,
body.layout-christmas.cl-page-sioux-falls select:focus-visible,
body.layout-christmas.cl-page-sioux-falls textarea:focus-visible,
body.layout-christmas.cl-page-sioux-falls [tabindex]:focus-visible,
body.layout-christmas.cl-page-sioux-falls .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-sioux-falls .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-sioux-falls .cl-hero-badge { --cl-badge-w: 104px; }
}
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-sioux-falls .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-sioux-falls .cl-hero-badge { --cl-badge-w: 104px; right: 32px; bottom: 32px; }
  body.layout-christmas.cl-page-sioux-falls .cl-hero-inner .cl-micro,
  body.layout-christmas.cl-page-sioux-falls .cl-hero-inner .cl-caption,
  body.layout-christmas.cl-page-sioux-falls .cl-hero-inner .cl-crumbs,
  body.layout-christmas.cl-page-sioux-falls .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-sioux-falls .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-sioux-falls #nav .cl-nav-tel svg,
body.layout-christmas.cl-page-sioux-falls #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-sioux-falls .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-sioux-falls .cl-faq details[open] summary:after {
  transform: rotate(180deg);
  margin-top: 0.15rem;
}

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

/* 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-sioux-falls .cl-phone-hide { display: none; }
  body.layout-christmas.cl-page-sioux-falls .cl-band p:not(.cl-lead):not(.cl-ctarow),
  body.layout-christmas.cl-page-sioux-falls .cl-list li,
  body.layout-christmas.cl-page-sioux-falls .cl-steps li,
  body.layout-christmas.cl-page-sioux-falls .cl-lease p,
  body.layout-christmas.cl-page-sioux-falls .cl-answer p,
  body.layout-christmas.cl-page-sioux-falls .cl-expand-body p { line-height: 1.6; }
  body.layout-christmas.cl-page-sioux-falls .cl-band,
  body.layout-christmas.cl-page-sioux-falls .cl-january,
  body.layout-christmas.cl-page-sioux-falls .cl-close { padding: 1.15rem 0; }
  body.layout-christmas.cl-page-sioux-falls .cl-band--flush { padding: 0; }
  body.layout-christmas.cl-page-sioux-falls .cl-band--after-bleed { padding-top: 1rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-receipt img { max-width: 180px; }
  body.layout-christmas.cl-page-sioux-falls .cl-faq-aside { padding: 1rem 1.1rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-faq-aside p { margin-bottom: 0.7rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-compare-card { padding: 0.8rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-compare-card .cl-compare-row { padding: 0.3rem 0; }
  body.layout-christmas.cl-page-sioux-falls .cl-video figcaption { display: none; }
  body.layout-christmas.cl-page-sioux-falls .cl-offerstrip li { font-size: 0.72rem; padding-top: 0.15rem; padding-bottom: 0.15rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-january .cl-strand--fade { margin-bottom: 0.6rem; }
  body.layout-christmas.cl-page-sioux-falls #app > footer.container .faves img { max-height: 72px; width: auto; }
  body.layout-christmas.cl-page-sioux-falls #app > footer.container .legal.container { padding-top: 0.75rem; padding-bottom: 0.75rem; }
  body.layout-christmas.cl-page-sioux-falls #app > footer.container .company .logo { margin-bottom: 0.6rem; }
  body.layout-christmas.cl-page-sioux-falls #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-sioux-falls .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-sioux-falls .cl-band p:not(.cl-lead):not(.cl-ctarow):not(.cl-caption),
  body.layout-christmas.cl-page-sioux-falls .cl-list li,
  body.layout-christmas.cl-page-sioux-falls .cl-steps li,
  body.layout-christmas.cl-page-sioux-falls .cl-lease p,
  body.layout-christmas.cl-page-sioux-falls .cl-answer p,
  body.layout-christmas.cl-page-sioux-falls .cl-expand-body p { font-size: 16px; line-height: 1.6; }
  body.layout-christmas.cl-page-sioux-falls .cl-band .cl-lead { font-size: 15.5px; line-height: 1.5; }
  body.layout-christmas.cl-page-sioux-falls .cl-band h2,
  body.layout-christmas.cl-page-sioux-falls .cl-band h2.wide { font-size: 1.875rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-faq summary { min-height: 44px; font-size: 1rem; padding: 0.45rem 0; }
  body.layout-christmas.cl-page-sioux-falls .cl-expand summary { min-height: 44px; padding: 0.3rem 0; }
  body.layout-christmas.cl-page-sioux-falls .cl-band,
  body.layout-christmas.cl-page-sioux-falls .cl-january,
  body.layout-christmas.cl-page-sioux-falls .cl-close { padding: 1rem 0; }
  body.layout-christmas.cl-page-sioux-falls .cl-band--flush { padding: 0; }
  body.layout-christmas.cl-page-sioux-falls .cl-band--after-bleed { padding-top: 0.9rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-chip { padding: 0.5rem 1.2rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-rating .val { font-size: 2.2rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-quote-text { font-size: 0.95rem; line-height: 1.55; }
  body.layout-christmas.cl-page-sioux-falls #app > footer.container { padding-top: 1rem; }
  body.layout-christmas.cl-page-sioux-falls #app > footer.container .legal [class*="col-"] { padding-top: 0.35rem; padding-bottom: 0.35rem; }
  body.layout-christmas.cl-page-sioux-falls #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-sioux-falls .cl-compare-cards .cl-mark,
body.layout-christmas.cl-page-sioux-falls .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-sioux-falls :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-sioux-falls .cl-cta { font-weight: 700; }


/* (HUB EMBLEMS block intentionally NOT copied: it is scoped body.layout-christmas and already shared.) */


/* ---------- 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-sioux-falls .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-sioux-falls .cl-price .cl-list { margin-bottom: 1.75rem; }
}

/* 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-sioux-falls .cl-ctarow--date-lead,
body.layout-christmas.cl-page-sioux-falls .cl-ctarow--price-end { display: none; }
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-sioux-falls .cl-bleed { height: clamp(260px, 38vw, 520px); }
  body.layout-christmas.cl-page-sioux-falls .cl-band--after-bleed { padding-top: 1.5rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-tab-only { display: none; }
  body.layout-christmas.cl-page-sioux-falls .cl-band h2.wide { max-width: 30ch; }
  body.layout-christmas.cl-page-sioux-falls .cl-ctarow--desk { margin-top: 6rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-ctarow--price-end { display: flex; margin-top: 2rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-ctarow--date-end { margin-top: 5.5rem; }
}
/* 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-sioux-falls .cl-ctarow--price-end { margin-top: 4.5rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-ctarow--date-end { margin-top: 7.5rem; }
}
@media (min-width: 1440px) {
  body.layout-christmas.cl-page-sioux-falls .cl-ctarow--price-end { display: none; }
  body.layout-christmas.cl-page-sioux-falls .cl-ctarow--date-lead { display: flex; margin-bottom: 1.4rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-ctarow--date-end { display: none; }
}
@media (min-width: 1600px) {
  body.layout-christmas.cl-page-sioux-falls .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-sioux-falls .cl-split { grid-template-columns: 1fr 1fr; }
  body.layout-christmas.cl-page-sioux-falls #branch.cl-band { padding-bottom: 8.5rem; }
  body.layout-christmas.cl-page-sioux-falls #how.cl-band--after-bleed { padding-top: 7.5rem; padding-bottom: 8.5rem; }
  body.layout-christmas.cl-page-sioux-falls #options.cl-band { padding-top: 8.5rem; }
  body.layout-christmas.cl-page-sioux-falls .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-sioux-falls .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-sioux-falls .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-sioux-falls .cl-lb[open]{display:flex}
.cl-page-sioux-falls .cl-lb-img{max-width:100%;max-height:88vh;object-fit:contain}
.cl-page-sioux-falls .cl-lb-cap{margin:0;font:400 .9rem/1.4 var(--cl-font-text);text-align:center}
.cl-page-sioux-falls .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-sioux-falls .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-sioux-falls .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-sioux-falls .cl-pricegrid > *,
  body.layout-christmas.cl-page-sioux-falls .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-sioux-falls .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-sioux-falls .cl-price-figure { font-size: clamp(2.25rem, 11.5vw, 3.25rem); text-align: center; }
  body.layout-christmas.cl-page-sioux-falls .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-sioux-falls .cl-hero { container-type: inline-size; }
  body.layout-christmas.cl-page-sioux-falls .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-sioux-falls .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-sioux-falls #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-sioux-falls .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));
    /* QA R2 V4: 0.5rem computed 8px, inside the banned 5-20px band. The design
       system token for panels and photos is --cl-r-1 (2px), so the panel now
       matches every other SF surface. */
    border-radius: var(--cl-r-1);
    padding: 0.85rem 1.1rem;
  }
  body.layout-christmas.cl-page-sioux-falls .cl-hero-panel h1 {
    font-size: min(4rem, var(--cl-h1));
    max-width: none;
  }
  body.layout-christmas.cl-page-sioux-falls .cl-hero-inner .cl-hero-panel .cl-micro,
  body.layout-christmas.cl-page-sioux-falls .cl-hero-inner .cl-hero-panel .cl-crumbs,
  body.layout-christmas.cl-page-sioux-falls .cl-hero-inner .cl-hero-panel .cl-ctarow {
    max-width: none;
  }
  body.layout-christmas.cl-page-sioux-falls .cl-hero .cl-hero-panel .cl-eyebrow,
  body.layout-christmas.cl-page-sioux-falls .cl-hero .cl-hero-panel .cl-proofstrip,
  body.layout-christmas.cl-page-sioux-falls .cl-hero .cl-hero-panel .cl-deck,
  body.layout-christmas.cl-page-sioux-falls .cl-hero .cl-hero-panel .cl-priceanchor,
  body.layout-christmas.cl-page-sioux-falls .cl-hero .cl-hero-panel .cl-priceanchor *,
  body.layout-christmas.cl-page-sioux-falls .cl-hero .cl-hero-panel .cl-micro,
  body.layout-christmas.cl-page-sioux-falls .cl-hero .cl-hero-panel .cl-citypick-l,
  body.layout-christmas.cl-page-sioux-falls .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-sioux-falls .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-sioux-falls { --cl-band-y: clamp(3.6rem, 5vw, 4.25rem); --cl-band-y-tight: clamp(3.6rem, 5vw, 4.25rem); }
  body.layout-christmas.cl-page-sioux-falls #app > footer.container { padding-top: 0.75rem; }
  body.layout-christmas.cl-page-sioux-falls #app > footer.container > .menus { padding-top: 2rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-ctarow--tab { margin-top: 1.25rem; margin-bottom: 1rem; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  body.layout-christmas.cl-page-sioux-falls .cl-ctarow--tab { display: none; } /* the sticky call bar is the tablet rung */
  body.layout-christmas.cl-page-sioux-falls #branch.cl-band { padding-bottom: var(--cl-band-y); }
  body.layout-christmas.cl-page-sioux-falls #how.cl-band--after-bleed { padding-top: clamp(1.6rem, 4vw, 3rem); padding-bottom: var(--cl-band-y); }
  body.layout-christmas.cl-page-sioux-falls #options.cl-band { padding-top: var(--cl-band-y); }
}
@media (min-width: 760px) and (max-width: 939px) {
  body.layout-christmas.cl-page-sioux-falls .cl-closegrid { gap: 0.5rem; }
}
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-sioux-falls .cl-ctarow--desk { margin-top: 1.25rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-ctarow--date-end { display: flex; margin-top: 1.5rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-ctarow--date-lead { display: none; }
}

/* L8b / QA round 2, C3 desktop. Between the proof rung and the FAQ rung the
   page crosses three bands with nothing to click: 2,480.6px at 1440x900
   against a 1.6 viewport-height limit of 1,440. The phone ladder is already
   inside R2 (959.4 min, 1,876.6 max at 390) and R1's count is measured at 390,
   so this rung is desktop only: it is display:none below 1024 and never
   reaches the phone count. It sits at the end of January's reading block, not
   in dead space (ruling C-4), and both halves of the split stay above a
   viewport height at 1440, so R5 still holds. It runs from 768 because the
   same desert is over the limit on both tablet viewports.

   2026-09-16 (photo pass): the condition above has expired. The 07 grid went
   from six tiles to eight, which added a fourth row at phone width and took
   the proof -> faq gap to 2,037.6 against the 2,000 limit at 390x844. The rung
   now shows at every width and the class stops saying desk. It is still at the
   end of January's reading block, never alone in dead space, so C-4 holds, and
   the per screen orange count was re-measured at all twelve viewports. */
body.layout-christmas.cl-page-sioux-falls .cl-ctarow--jan {
  display: flex;
  margin-top: 1.1rem;
  margin-bottom: 0;
}
@media (min-width: 768px) {
  body.layout-christmas.cl-page-sioux-falls .cl-ctarow--jan {
    margin-top: 1.5rem;
  }
}
/* 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-sioux-falls .cl-january > .cl-strand { margin: 0.5rem 0 1.5rem; }
@media (max-width: 767px) {
  body.layout-christmas.cl-page-sioux-falls .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-sioux-falls #nav .inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  body.layout-christmas.cl-page-sioux-falls #nav .inner > .logo { justify-self: start; }
  body.layout-christmas.cl-page-sioux-falls #nav nav { margin: 0; justify-self: center; }
  body.layout-christmas.cl-page-sioux-falls #nav .cl-nav-tel { margin-left: 0; justify-self: end; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  body.layout-christmas.cl-page-sioux-falls #nav .inner { align-content: center; row-gap: 0.25rem; }
  body.layout-christmas.cl-page-sioux-falls #nav nav { grid-column: 1 / -1; grid-row: 2; }
  body.layout-christmas.cl-page-sioux-falls #nav .cl-nav-tel { grid-column: 3; grid-row: 1; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  body.layout-christmas.cl-page-sioux-falls #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-sioux-falls .cl-hero .cl-hero-panel .cl-priceanchor-t,
  body.layout-christmas.cl-page-sioux-falls .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-sioux-falls #app > footer.container .faves { align-items: center; }
body.layout-christmas.cl-page-sioux-falls #app > footer.container .faves img { height: auto; }
@media (max-width: 767px) {
  body.layout-christmas.cl-page-sioux-falls #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-sioux-falls .cl-mascot {
  position: absolute;
  margin: 0;
  pointer-events: none;
}
body.layout-christmas.cl-page-sioux-falls .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-sioux-falls .cl-mascot--hero {
    top: 62.5vw;
    top: 62.5cqw;
    width: 21.5vw;
    width: 21.5cqw;
  }
}
@media (min-width: 760px) {
  body.layout-christmas.cl-page-sioux-falls .cl-mascot--hero { display: none; }
}
body.layout-christmas.cl-page-sioux-falls .cl-mascot--price { display: none; }
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-sioux-falls .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-sioux-falls .cl-mascot--price { width: 202px; }
}
@media (min-width: 1440px) {
  body.layout-christmas.cl-page-sioux-falls .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-sioux-falls .cl-mascot--jan,
body.layout-christmas.cl-page-sioux-falls .cl-mascot--date,
body.layout-christmas.cl-page-sioux-falls .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-sioux-falls .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-sioux-falls .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-sioux-falls .cl-mascot--jan {
    display: block;
    right: calc(50% + 316px);
    bottom: 0;
    width: 172px;
  }
  body.layout-christmas.cl-page-sioux-falls .cl-mascot--date {
    width: 172px;
  }
  /* left edge tracks the shell edge; boots land on the close-to-footer seam */
  body.layout-christmas.cl-page-sioux-falls .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-sioux-falls #january {
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
  }
}
@media (min-width: 1280px) {
  body.layout-christmas.cl-page-sioux-falls .cl-mascot--jan { width: 204px; }
  body.layout-christmas.cl-page-sioux-falls .cl-mascot--date { width: 184px; }
  body.layout-christmas.cl-page-sioux-falls .cl-mascot--close { width: 180px; }
}
@media (min-width: 1600px) {
  body.layout-christmas.cl-page-sioux-falls .cl-mascot--jan { width: 230px; }
}

/* ================= PART 2. SIOUX FALLS DELTA ================= */

/* Identity: THE RIDGE LINE. One accent, the cool indigo lift, exactly as the
   shared palette comment at line 341 reserves it (hub --cl-bulb, SF
   --cl-blue-lift, SC --cl-amber-hot). #7d9bea on --cl-night-900 measures
   7.30:1, well over the 3:1 floor the numerals need. This declaration sits
   after the copied hub one, same specificity, so it wins. */
body.layout-christmas.cl-page-sioux-falls {
  --cl-accent: var(--cl-blue-lift);
}

/* SF-1. The crew frame is the page's one full-bleed band. Above 1280 it insets
   so the photograph never has to cover more pixels than the file has: the
   widest tier is 1920 real px and a 1920 viewport would otherwise ask the
   1440 tier to stretch (ruling G9). The <img> sizes attribute carries the
   matching 1200px branch. */
@media (min-width: 1280px) {
  body.layout-christmas.cl-page-sioux-falls .cl-bleed--inset {
    width: min(1200px, calc(100vw - 4rem));
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--cl-r-1);
    overflow: hidden;
  }
  body.layout-christmas.cl-page-sioux-falls .cl-bleed--inset img {
    border-radius: var(--cl-r-1);
  }
}

/* SF-2 (rewritten after QA round 2, M-7). Six tiles, not five. Round 1 shipped
   five and spanned the last one across the grid, because the brief's sixth
   frame is the hub's and ruling C-10 forbids a shared base name. The manifest
   flag "LANCE PHOTOS R2 2026-09-08 (ruling R4)" releases
   christmas-lights/gallery-004 and gallery-007: page = unused-on-hub,
   dupeGroup null, free for any page. 004 is now tile 6, so the grid fills
   evenly and nothing has to span. No declarations are needed any more;
   the modifier is kept as a name hook so the class still states the tile count
   and so the copied hub .cl-gallery--four rules, which turn tiles 5+ into a
   phone snap rail, can never match. Only the wide-desktop case needs a
   declaration: the shared grid is repeat(auto-fill, minmax(300px, 1fr)), which
   lands on four columns past about 1,300px of inner width and would leave
   empty cells in the last row.
   2026-09-16 (photo pass): the grid is eight tiles now, so the hook is
   .cl-gallery--eight and the wide-desktop case is four columns, which divides
   eight into two even rows. Two across on a phone is unchanged, and the tiles
   get shorter rather than the section getting taller. */
@media (min-width: 1000px) {
  body.layout-christmas.cl-page-sioux-falls .cl-gallery--eight {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* SF-3. The four review cards. .cl-proof--four is 2 x 2 from 900px in the
   shared sheet; under 768 the shared rail rule takes over and they scroll,
   which is the designed phone behaviour. All that is missing is a floor under
   the card that carries the capture so the rail does not jump height. */
@media (max-width: 767px) {
  body.layout-christmas.cl-page-sioux-falls .cl-proof--four .cl-quote-card {
    min-width: 80vw;
  }
}
body.layout-christmas.cl-page-sioux-falls .cl-proof--four .cl-receipt img {
  width: 100%;
  height: auto;
}

/* SF-4. THE GABLE is the site's one chevron strand and it lands here, between
   the installers band and the ridge line band. The shared rule already draws
   it; this only pulls the vertical rhythm in so the chevron reads as a seam
   between two bands rather than a band of its own. */
body.layout-christmas.cl-page-sioux-falls .cl-strand--chevron {
  margin-top: -0.35rem;
  margin-bottom: -0.35rem;
}

/* SF-5. The hero CTA gate. Ruling C-8 puts the bottom of the hero CTA at or
   above 620px at 390x844. Measured with the shipped stack it landed at 625:
   media 293, inner padding-top 18, then proofstrip, h1, deck and the price
   anchor above the button. Eight pixels comes off the inner padding rather
   than off any gap between two text rows, because the rows are what carry the
   rhythm and the padding is the one value with nothing riding on it.
   Measured after: 617. */
@media (max-width: 759px) {
  body.layout-christmas.cl-page-sioux-falls .cl-hero .cl-hero-inner {
    padding-top: 10px;
  }
}

/* SF-6. THE DUO ON A PHONE. The shared component stacks the pair under 760 and
   the hub's phone-density block then hides its second frame outright
   (.cl-duo--macro, display:none under 760). Sioux Falls will not drop a frame:
   the homes photo and the businesses photo are the two halves of the band's
   H2, so hiding one on the viewport most people read the page on loses the
   commercial half of the argument. Two columns instead. The page already
   speaks this language one band later, where .cl-gallery runs 2-up at the same
   width, so a 169px frame is not a new idea here, and the caption keeps its
   own line box. Measured at 390: 515px stacked, 186px paired. */
@media (max-width: 759px) {
  body.layout-christmas.cl-page-sioux-falls .cl-duo {
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
  }
  body.layout-christmas.cl-page-sioux-falls .cl-duo figcaption {
    font-size: 0.9rem;
    line-height: 1.45;
    padding: 0.7rem 0.8rem;
  }
}

/* SF-7. THE DATE CHIPS ON A PHONE. 8.13 stacks them in an explicit 3-row grid
   so the pair can never staircase under flex-wrap. The staircase risk is in
   the wrapping, not in the column count, so an explicit 2-column grid with the
   arrow in a fixed middle track is just as safe and reads as the timeline the
   component is drawing: Nov 15, arrow, Dec 1. The 190px floor is what forced
   the stack; it comes off here and the padding comes in with it.
   Measured at 390: 206px stacked, 100px paired. */
@media (max-width: 639px) {
  body.layout-christmas.cl-page-sioux-falls .cl-chips {
    grid-template-columns: 1fr 22px 1fr;
    gap: 0.4rem;
  }
  body.layout-christmas.cl-page-sioux-falls .cl-chip {
    min-width: 0;
    padding: 0.85rem 0.5rem;
  }
  body.layout-christmas.cl-page-sioux-falls .cl-chip b {
    font-size: 1.85rem;
  }
  body.layout-christmas.cl-page-sioux-falls .cl-chip span {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
  }
  body.layout-christmas.cl-page-sioux-falls .cl-chip-arrow {
    height: auto;
    transform: none;
  }
}

/* SF-8. Retired with the wide tile (QA round 2, M-7). The gallery is six equal
   tiles now, so there is no full-width frame to letterbox on a phone. */

/* SF-9. THE LAST 60 PIXELS. The shared phone-density ladder steps the band
   padding 1.7 -> 1.3 -> 1.15 -> 1rem as the viewport narrows, and 1rem is
   where it stops. Sioux Falls carries one band more than the hub does and
   lands 59px over the 12,400 target on that alone, so the ladder takes one
   more step on this page only. 0.85rem is 13.6px against the 23.25px line
   box the bands are set in, which still reads as a band edge.
   Measured at 390: 12,459 before, 12,397 after. */
@media (max-width: 559px) {
  body.layout-christmas.cl-page-sioux-falls .cl-band,
  body.layout-christmas.cl-page-sioux-falls .cl-january,
  body.layout-christmas.cl-page-sioux-falls .cl-close { padding: 0.85rem 0; }
  body.layout-christmas.cl-page-sioux-falls .cl-band--flush { padding: 0; }
}

/* ==================== FIX ROUND 2 (QA round-1) ==================== */

/* B-1 / fold 5.4. The price anchor bottom at 390x844 measured 548.9 against a 523 ceiling.
   29px comes out of the four 10px gaps above it plus the anchor's own 0.1rem vertical padding.
   Nothing above the plate moves and the orange CTA only gains slack against its 620 ceiling. */
@media (max-width: 759px) {
  /* SF-5 above set this to 10px at (0,4,1); restate at the same weight so the later rule wins. */
  body.layout-christmas.cl-page-sioux-falls .cl-hero .cl-hero-inner { padding-top: 2px; }
  body.layout-christmas.cl-page-sioux-falls .cl-hero .cl-proofstrip { margin-bottom: 4px; }
  body.layout-christmas.cl-page-sioux-falls .cl-hero h1 { margin-bottom: 4px; }
  body.layout-christmas.cl-page-sioux-falls .cl-hero .cl-deck { margin-bottom: 4px; }
  body.layout-christmas.cl-page-sioux-falls .cl-hero .cl-priceanchor {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 10px;
  }
}

/* B-2 / C6. A tel: link carrying the number as visible text has to sit inside the first screen at
   every viewport from 320 to 1920. Under 768 the hero stack is already past the fold at 320x568,
   so the nav control is the one that has to carry it: Sioux Falls has a single office, so the nav
   phone control is the real number at every width. (The hub keeps a glyph that opens a call sheet
   because no single branch may be dialled there; this rule is scoped to the SF page only.)
   The separate 60px glyph link was deleted from the markup, so the 768 hide below is now moot. */
@media (max-width: 767px) {
  body.layout-christmas.cl-page-sioux-falls #nav .cl-nav-tel {
    display: inline-flex;
    position: absolute;
    top: 50%;
    right: 0.3rem;
    transform: translateY(-50%);
    gap: 0.3rem;
    padding: 0 0.3rem;
    font-size: 0.84rem;
  }
  body.layout-christmas.cl-page-sioux-falls #nav .cl-nav-tel svg,
  body.layout-christmas.cl-page-sioux-falls #nav .cl-nav-tel-glyph {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
  }
}
@media (max-width: 359px) {
  body.layout-christmas.cl-page-sioux-falls #nav .cl-nav-tel { font-size: 0.76rem; right: 0.15rem; }
  body.layout-christmas.cl-page-sioux-falls .cl-hero .cl-hero-inner { padding-top: 6px; }
}

/* M-10. The sticky bar now dials the number directly, so its label is longer than "Call Us". */
body.layout-christmas.cl-page-sioux-falls #mobile-cta-bar .mcb-call {
  font-size: 0.95rem;
  letter-spacing: 0;
  white-space: nowrap;
}

/* M-6 / I10. The hub's night-chrome-on-paper ink list (christmas-lights.css:4554) names h2, h3 and
   .cl-h3 but not h4, and the four .cl-compare-card titles on this page are h4, so they inherited
   the paper band's ink and measured 1.03:1 (rgb(17,26,46) on rgb(16,28,60)). Same treatment as the
   h3 the hub component uses, plus the h3's own bottom margin. */
body.layout-christmas.cl-page-sioux-falls .cl-compare-card h4 { margin: 0 0 0.75rem; }
body.layout-christmas.cl-page-sioux-falls .cl-paper .cl-compare-card h4 { color: var(--cl-text); }

/* M-3 / M-4 / M-5. Brief 4.2's ladder is eight rungs plus the FAQ decision card as a
   named reserve, earned only when the CTA7 -> CTA8 gap clears 2,000px. With the ridge
   and gallery rungs removed the 07 -> close gap at 390 measures 2,775px, so the reserve
   is earned. It has to sit where both of its gaps are legal, though: left at the bottom
   of the phone stack it landed 422px above the close CTA (floor 900, and two orange
   objects shared one screen at 375x667, 430x932, 768x1024 and 1024x768). On a single
   column the decision card leads the questions instead of trailing them, which also
   reads better: someone still deciding gets the price link before the accordion. */
@media (max-width: 1023px) {
  body.layout-christmas.cl-page-sioux-falls .cl-faqgrid .cl-faq-aside {
    order: -1;
    margin-bottom: 0.6rem;
  }
}
/* SF-12 (Lance 2026-09-17). From 1024 the rail card stays where it is but stops being a
   rung. No alignment can hold an orange button 1,080px clear of the close CTA, and the
   520px of seam that bought that clearance read as a dead hole between 10 and 11. The
   card keeps its heading, its line and its phone link. Under 1024 nothing changes: the
   card still leads the questions and its rung still counts. */
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-sioux-falls .cl-faq-aside { align-self: start; }
  body.layout-christmas.cl-page-sioux-falls .cl-faq-aside .cl-ctarow { display: none; }
}
/* With the card leading the questions the reserve rung landed 833px above the close CTA
   at 390, still 67 short of the 900px floor (R5). The seam below the FAQ band carries it:
   the close band keeps its own rhythm and nothing above #faq moves.
   SF-18 (Lance 2026-09-17). Phones only. A tablet is wide enough to read the two gaps as
   one column, and the extra 90px showed there as an empty strip under the last answer
   rather than as air before the close. The phone floor is the only thing that needs it.
   Measured at 768: 9 -> 10 is 1,110px with the strip gone, still clear of the 900 floor. */
@media (max-width: 767px) {
  body.layout-christmas.cl-page-sioux-falls #faq.cl-band { padding-bottom: calc(var(--cl-band-y) + 90px); }
}

/* M-8 / brief 5.4 C12. At 1024x768 the fold contract wants CTA 2 at y <= 1,536 and it
   measured 1,924: the price plate sat below two explanatory paragraphs and a details
   row, and inside the plate the CTA sat below the "what is in the price" list. Both are
   reading-order preferences, not structure, so the fix is visual order at >= 1024 only.
   The markup, and therefore the reading order for a screen reader and for a crawler, is
   unchanged; phones keep the authored order. Saved 194px in the band and 245px in the
   plate. */
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-sioux-falls #price .cl-inner { display: flex; flex-direction: column; }
  body.layout-christmas.cl-page-sioux-falls #price .cl-inner > * { order: 7; }
  body.layout-christmas.cl-page-sioux-falls #price .cl-inner > :nth-child(1) { order: 1; }
  body.layout-christmas.cl-page-sioux-falls #price .cl-inner > :nth-child(2) { order: 2; }
  body.layout-christmas.cl-page-sioux-falls #price .cl-inner > :nth-child(3) { order: 3; }
  body.layout-christmas.cl-page-sioux-falls #price .cl-inner > :nth-child(6) { order: 4; }
  body.layout-christmas.cl-page-sioux-falls #price .cl-inner > :nth-child(4) { order: 5; }
  body.layout-christmas.cl-page-sioux-falls #price .cl-inner > :nth-child(5) { order: 6; }

  body.layout-christmas.cl-page-sioux-falls #price .cl-price { display: flex; flex-direction: column; }
  body.layout-christmas.cl-page-sioux-falls #price .cl-price > :nth-child(1) { order: 1; }
  body.layout-christmas.cl-page-sioux-falls #price .cl-price > :nth-child(2) { order: 2; }
  body.layout-christmas.cl-page-sioux-falls #price .cl-price > :nth-child(3) { order: 3; }
  body.layout-christmas.cl-page-sioux-falls #price .cl-price > :nth-child(6) { order: 4; }
  body.layout-christmas.cl-page-sioux-falls #price .cl-price > :nth-child(7) { order: 5; }
  body.layout-christmas.cl-page-sioux-falls #price .cl-price > :nth-child(4) { order: 6; }
  body.layout-christmas.cl-page-sioux-falls #price .cl-price > :nth-child(5) { order: 7; }
  body.layout-christmas.cl-page-sioux-falls #price .cl-price > :nth-child(8) { order: 8; }
}

/* SF-H4 (QA round 2). The hero H1 broke as [Christmas Light][Installation in
   Sioux Falls,][SD] at 375, 390 and 768, leaving a two letter orphan on the
   last line. text-wrap: pretty only reflows the closing lines, so every
   viewport that already broke cleanly keeps the break it had. The H1 text is
   byte for byte the manifest string and is not touched. */
body.layout-christmas.cl-page-sioux-falls .cl-hero h1 {
  text-wrap: pretty;
}

/* ==========================================================================
   PART 3  SIOUX FALLS PHOTO PASS, 2026-09-16

   The approved plan (rebuild2/photo-plan/PLAN-FOR-LANCE.txt) adds a crew band
   to 02, a second figure to the 03 ridge split, a warm white and a Sharp
   multicolor single to 04, the color changing gallery to 04, one full width
   band between 04 and 05, and two more tiles to the 07 grid. SF-2 above was
   edited the same day: the 07 hook is .cl-gallery--eight, four across wide.

   Nothing here is orange and no new color enters the page. The width caps are
   quote cadence, not taste: photos push the rungs apart, and the limit is 1.6
   viewport heights on a desktop and a flat 2,000 px at 390x844. Every number
   quoted below was measured on this page at that viewport.
   ========================================================================== */

/* SF-11. The 02 crew band, three photos of the crew at work. It sits in the
   rung 3 to rung 5 gap, the widest gap on every desktop viewport: 1,773.3 at
   1920x1080 against 1,822.7, and at 1024x768 the least room of any of them,
   1,651 against 1,678.5. Uncapped the row runs about 290 px tall and that gap
   goes over.

   The column count is pinned because the cap cannot be trusted with it. The
   shared track is repeat(auto-fill, minmax(300px, 1fr)), so any cap under
   about 923 px silently drops to two columns and two rows: 880 on its own
   measured 602 tall and took that gap to 2,023.2. Pinned, the cap sets the
   tile width and nothing else, about 286, and the row about 228. The band ends
   section 02, where the band padding already carries the space below it. */
body.layout-christmas.cl-page-sioux-falls .cl-gallery--crew {
  margin-bottom: 0;
}
@media (min-width: 1000px) {
  body.layout-christmas.cl-page-sioux-falls .cl-gallery--crew {
    grid-template-columns: repeat(3, 1fr);
    width: min(880px, 100%);
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 559px) {
  /* Two across at 390 is about 168 px a tile, where the shared 16/9 is 95 px
     of photo and stops being a photograph. 3/2 is what these three were
     exported at, so the phone tile is the whole frame. */
  body.layout-christmas.cl-page-sioux-falls .cl-gallery--crew img {
    aspect-ratio: 3 / 2;
  }
}

/* SF-12. The 03 ridge pair. The split held one figure beside the copy and now
   holds two side by side in the same column, so the second photo costs the
   section no height on a wide screen, where the copy column is the taller of
   the two. On a phone the split is one column and the pair sits two across,
   shorter than the single wide figure it replaces.

   .cl-fig carries a corner bracket on its bottom right, which on the left hand
   figure would land on the right hand photo. It is dropped there, so the pair
   keeps one bracket, at the outside corner. */
body.layout-christmas.cl-page-sioux-falls .cl-fig-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cl-gap-tiles);
  align-items: start;
}
body.layout-christmas.cl-page-sioux-falls .cl-fig-pair .cl-fig:first-child:after {
  display: none;
}
@media (max-width: 559px) {
  /* What the gallery captions already do here: the bold lead stays, the tail
     goes. A .cl-fig caption is uppercase with wide letter spacing, and at
     168 px of tile the tail alone ran seven lines. */
  body.layout-christmas.cl-page-sioux-falls .cl-fig-pair figcaption .cl-cap-x {
    display: none;
  }
}

/* SF-13. The 04 warm white and Sharp multicolor pair reuses .cl-duo so it sits
   exactly like the pair above it, two across under 760 included. The one
   change is the crop: .cl-duo trims to 950/400, and these are 16/9 drone
   frames whose subject runs to the bottom edge, so the shared crop would cut
   the yard out of the multicolor one. */
body.layout-christmas.cl-page-sioux-falls .cl-duo--r169 img {
  aspect-ratio: 16 / 9;
}

/* SF-14 is retired. It capped the color changing carousel to the width its own
   sizes attribute claimed. The carousel was replaced by the video band on
   2026-09-22 and the band carries the same cap in its own block at the end of
   this file, including the same deliberate extra .cl-inner. */

/* SF-15. Phone density for the 07 grid, which went from six tiles to eight.
   Two across is the phone layout either way, so the eighth tile is a fourth
   row, and that row pushed the January rung onto the boundary between the
   eleventh and twelfth screen height at 390x844. An orange object straddling a
   boundary counts in both windows, so the twelfth would have held two and the
   one orange object per screen rule would have failed. The fourth row pays its
   own way: a 2/1 crop instead of the shared 16/9, which at 168 px of tile is
   84 px of photo rather than 94.5 and is the part of a wide night frame worth
   seeing that small; half the row gap, column gap left alone so the tiles keep
   their width; and less caption padding, which here carries one line of lead
   because the tail is already hidden. That is 80 px measured, and the rung
   sits back inside one window. */
@media (max-width: 559px) {
  body.layout-christmas.cl-page-sioux-falls .cl-gallery--eight {
    row-gap: 0.35rem;
    margin-bottom: 0.4rem;
  }
  body.layout-christmas.cl-page-sioux-falls .cl-gallery--eight img {
    aspect-ratio: 2 / 1;
  }
  body.layout-christmas.cl-page-sioux-falls .cl-gallery--eight figcaption {
    padding-top: 0.2rem;
  }
}

/* ==========================================================================
   PATTERN GALLERY: REMOVED FROM SIOUX FALLS 2026-09-22.

   The four frame .cl-patterns carousel in 04 was replaced by the RGB video
   band (see the block at the end of this file), so every .cl-patterns and
   .cl-pat-* rule matched nothing on this page. They were about 9 KB of a
   render blocking stylesheet that every Sioux Falls visitor downloaded cold.

   The component is NOT gone. It is unchanged in rebuild2/phaseC/sc/append.css
   and Sioux City still ships the carousel. The rules there still carry both
   city prefixes, so if Sioux Falls ever wants a carousel back, copy that block
   here again rather than rewriting it, and restore the SF-14 width cap above.

   Paired with files/template/js/christmas-pattern-gallery.js, whose script tag
   was removed from the Sioux Falls page in the same change. The file stays;
   Sioux City loads it.
   ========================================================================== */

/* ---------- APPEND: SF SPACING PASS (Lance 2026-09-17) ---------- */
/* SF-13. A strand divider is a seam in its own right, so from 1024 the bands on either
   side of one sit closer to it. 06 -> 07 was a band lid, a strand and another band lid
   stacked into 160px of night; it is one gap now. 10 closes <main>, so the strand
   before the close band is not its sibling and it is named on its own.
   SF-14. The close CTA tops out with the headline it closes. Centered against a much
   taller steps column it floated a third of a screen below the h2. */
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-sioux-falls .cl-strand + .cl-band { padding-top: clamp(1.6rem, 4vw, 3rem); }
  body.layout-christmas.cl-page-sioux-falls .cl-band:has(+ .cl-strand),
  body.layout-christmas.cl-page-sioux-falls #faq.cl-band { padding-bottom: clamp(1.6rem, 4vw, 3rem); }
  body.layout-christmas.cl-page-sioux-falls .cl-closegrid { align-items: start; }
  body.layout-christmas.cl-page-sioux-falls .cl-closegrid > *:last-child { margin-top: 2.2rem; }
}
/* SF-15. A band's last block carried its own bottom margin on top of the band padding, so
   every band sat deeper at the bottom than at the top. */
@media (min-width: 760px) {
  body.layout-christmas.cl-page-sioux-falls .cl-inner > *:last-child,
  body.layout-christmas.cl-page-sioux-falls .cl-closegrid > div > *:last-child { margin-bottom: 0; }
}
/* SF-16. The town chips had air above and none below, so they touched the line under them.
   SF-17: an eyebrow and its heading are one unit, 14.4px apart everywhere except January,
   where the h3 took the component's 40px top margin and drifted off its eyebrow. */
body.layout-christmas.cl-page-sioux-falls #towns .cl-lead,
body.layout-christmas.cl-page-sioux-falls #towns .cl-towns { margin-bottom: 0.6rem; }
body.layout-christmas.cl-page-sioux-falls #towns .cl-towns { margin-top: 0; }
body.layout-christmas.cl-page-sioux-falls .cl-eyebrow + h3 { margin-top: 0; }

/* [SF] 2026-09-22 COMMERCIAL PHOTOS: four-up crew strip.
   SF-11 pins the 02 crew band to 3 columns inside min(880px, 100%) because the
   shared auto-fill track cannot be trusted with a cap. A fourth tile, the
   installer on the ladder, needs the same treatment: 4 pinned columns and the
   cap widened to min(1160px, 100%) so the tile width is unchanged. Nothing
   moves under 1000, where the shared track already wraps to two across. */
@media (min-width: 1000px) {
  body.layout-christmas.cl-page-sioux-falls .cl-gallery--crew.cl-gallery--four-up {
    grid-template-columns: repeat(4, 1fr);
    width: min(1160px, 100%);
  }
}

/* [SF] 2026-09-22 MASCOTS ON PHONES. Lance, reviewing the phone layout: "all of the
   little sharp lawn care guy icons disappear. That's no good for our branding.
   They should all be there and we should find great ways to make it look good
   while keeping them there."

   WHAT WAS WRONG. Four of the five figures were switched off on phones by the
   rules above, not by an overflow or an off-canvas accident: .cl-mascot--date has
   a display:none base and is only turned back on inside @media (min-width: 768px),
   and --price, --jan and --close do the same at 1024. Under 768 only --hero
   rendered, and between 760 and 767 NOTHING did, because --hero is switched off at
   760 and --date does not start until 768. This block closes both gaps.

   THE PLACEMENT is one idea used four times, so the two city pages read as one
   system: each figure stands at the TOP RIGHT CORNER OF ITS OWN BAND, beside the
   section eyebrow and the heading under it, on the same shell edge the desktop
   figures use, max(1.3rem, calc(50% - 590px)). Every figure stays position:absolute,
   so not one of them adds document height and CLS is untouched; each is sized by
   WIDTH ONLY because styles1.1.css line 117 forces height:auto !important, and the
   img width/height attributes carry the ratio of THE FILE IN src. Rendered heights:
     --price  ladder 480x778    60px wide =  97.2px tall from 360 up, 52px =  84.3px at 320-359
     --date   phone 480x733     63px wide =  96.2px tall from 360 up, 55px =  84.0px at 320-359
     --jan    storage 480x945   46px wide =  90.6px tall from 360 up, 41px =  80.7px at 320-359
     --close  presenter 480x804  58px wide =  97.2px tall from 360 up, 50px =  83.8px at 320-359
   That is inside the 72-110px band a figure needs to read as the mascot rather
   than as a smudge, and it is the size at which the Santa hat and the SHARP chest
   logo are both still legible at DPR 2 (see the applied/ screenshots).

   COPY CAN NEVER RUN UNDER A FIGURE. The eyebrow and the heading beside it take a
   margin-right of the figure width plus a gap (80px from 360 up, 68px at 320-359).
   margin-right and NOT padding-right: the 02 heading on the price band carries
   max-width:275.4px and the framework is border-box, so padding would have eaten
   that cap instead of the free space to its right and the heading would have grown
   by several lines instead of one. This inset is the only thing in the block that
   costs height: a two line heading becomes three. Measured on the live page at 390: the whole block costs +28px of document height (13,230 to 13,258), and +0px at 320.

   AND A FIGURE CAN NEVER REACH THE PARAGRAPH UNDER ITS HEADING. The inset only
   guards the words beside the figure; what sits BELOW them is guarded by a floor:
   min-height 56px on the 02 / 07 / 11 headings, and min-height 88px on the first
   .cl-inner--text of 08, whose eyebrow and h3 live in a box of their own with the
   paragraphs in a second box under it. The 08 figure is the reason that second value
   looks large: a min-height stops the h3 bottom margin collapsing out through the
   box, so the floor has to carry that margin itself. The 56px heading floor is under
   what all six live headings already measure, so it costs nothing anywhere today.
   Both exist so a later one line heading cannot slide a paragraph up under a figure.

   The figures keep their place BEFORE .cl-inner in the DOM and carry no z-index, so
   they paint above the band ground and BELOW the text. If a later copy change ever
   makes a line long enough to reach one, the words win.

   NO HTML CHANGED, so the four img elements keep their _w480 src. Every one of the
   four bands sits far enough below the fold that loading="lazy" keeps it out of the
   cold load at 390, which is what holds G3. The numbers, and the option B measured
   against this one, are in rebuild2/phaseC/polish/mascots/diagnosis.md. */
@media (max-width: 767px) {
  body.layout-christmas.cl-page-sioux-falls .cl-mascot--price,
  body.layout-christmas.cl-page-sioux-falls .cl-mascot--date,
  body.layout-christmas.cl-page-sioux-falls .cl-mascot--jan,
  body.layout-christmas.cl-page-sioux-falls .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;
  }
  /* the paper band wants a cast shadow, the three night bands a faint warm rim */
  body.layout-christmas.cl-page-sioux-falls .cl-mascot--price { width: 60px; filter: drop-shadow(0 8px 10px rgba(20, 30, 60, .20)); }
  body.layout-christmas.cl-page-sioux-falls .cl-mascot--date { width: 63px; filter: saturate(.84) brightness(.96) contrast(1.02) drop-shadow(0 0 8px rgba(255, 198, 112, .28)); }
  body.layout-christmas.cl-page-sioux-falls .cl-mascot--jan { width: 46px; filter: saturate(.84) brightness(.96) contrast(1.02) drop-shadow(0 0 8px rgba(255, 198, 112, .28)); }
  body.layout-christmas.cl-page-sioux-falls .cl-mascot--close { width: 58px; filter: saturate(.84) brightness(.96) contrast(1.02) drop-shadow(0 0 8px rgba(255, 198, 112, .28)); }
  /* 02 is the one figure the markup puts INSIDE .cl-inner rather than on the band,
     so it measures its right edge from the text shell, not the page shell. right:0
     is what the 1024 rule above already uses, and it lands this figure on the same
     vertical as the other three. z-index -1 keeps the copy on top of it, which for
     the other three is free because they precede .cl-inner in the DOM. */
  body.layout-christmas.cl-page-sioux-falls .cl-mascot--price { right: 0; z-index: -1; }
  /* the notch. One value for all four so the text rag stays even down the page. */
  body.layout-christmas.cl-page-sioux-falls #price .cl-eyebrow,
  body.layout-christmas.cl-page-sioux-falls #price .cl-eyebrow + h2,
  body.layout-christmas.cl-page-sioux-falls #date .cl-eyebrow,
  body.layout-christmas.cl-page-sioux-falls #date .cl-eyebrow + h2,
  body.layout-christmas.cl-page-sioux-falls #january .cl-eyebrow,
  body.layout-christmas.cl-page-sioux-falls #january .cl-eyebrow + h3,
  body.layout-christmas.cl-page-sioux-falls #close .cl-eyebrow,
  body.layout-christmas.cl-page-sioux-falls #close .cl-eyebrow + h2 { margin-right: 80px; }
  /* the floor under a short heading (see above) */
  body.layout-christmas.cl-page-sioux-falls #price .cl-eyebrow + h2,
  body.layout-christmas.cl-page-sioux-falls #date .cl-eyebrow + h2,
  body.layout-christmas.cl-page-sioux-falls #close .cl-eyebrow + h2 { min-height: 56px; }
  body.layout-christmas.cl-page-sioux-falls #january .cl-inner--text:first-of-type { min-height: 88px; }
}
@media (max-width: 359px) {
  body.layout-christmas.cl-page-sioux-falls .cl-mascot--price { width: 52px; }
  body.layout-christmas.cl-page-sioux-falls .cl-mascot--date { width: 55px; }
  body.layout-christmas.cl-page-sioux-falls .cl-mascot--jan { width: 41px; }
  body.layout-christmas.cl-page-sioux-falls .cl-mascot--close { width: 50px; }
  body.layout-christmas.cl-page-sioux-falls #price .cl-eyebrow,
  body.layout-christmas.cl-page-sioux-falls #price .cl-eyebrow + h2,
  body.layout-christmas.cl-page-sioux-falls #date .cl-eyebrow,
  body.layout-christmas.cl-page-sioux-falls #date .cl-eyebrow + h2,
  body.layout-christmas.cl-page-sioux-falls #january .cl-eyebrow,
  body.layout-christmas.cl-page-sioux-falls #january .cl-eyebrow + h3,
  body.layout-christmas.cl-page-sioux-falls #close .cl-eyebrow,
  body.layout-christmas.cl-page-sioux-falls #close .cl-eyebrow + h2 { margin-right: 68px; }
}

/* OPTION B, MEASURED AND NOT CHOSEN (screenshots in
   rebuild2/phaseC/polish/mascots/option-B/). Same anchor, same sizes, same height
   cost, but the figures alternate sides down the page: price right, date left,
   january right, close left. It has more rhythm and Lance may prefer it. It was not
   applied because on the two left hand bands the heading is pushed off the left
   margin every other line on the page shares, which on a 320 to 390 column is the
   one thing a phone layout cannot afford. To swap: uncomment the two @media blocks
   below. They are overrides only, so they must stay AFTER the applied block.

@media (max-width: 767px) {
  body.layout-christmas.cl-page-sioux-falls .cl-mascot--date { right: auto; left: max(1.3rem, calc(50% - 590px)); }
  body.layout-christmas.cl-page-sioux-falls .cl-mascot--close { right: auto; left: max(1.3rem, calc(50% - 590px)); }
  body.layout-christmas.cl-page-sioux-falls #date .cl-eyebrow,
  body.layout-christmas.cl-page-sioux-falls #date .cl-eyebrow + h2 { margin-right: 0; margin-left: 80px; }
  body.layout-christmas.cl-page-sioux-falls #close .cl-eyebrow,
  body.layout-christmas.cl-page-sioux-falls #close .cl-eyebrow + h2 { margin-right: 0; margin-left: 80px; }
}
@media (max-width: 359px) {
  body.layout-christmas.cl-page-sioux-falls #date .cl-eyebrow,
  body.layout-christmas.cl-page-sioux-falls #date .cl-eyebrow + h2 { margin-right: 0; margin-left: 68px; }
  body.layout-christmas.cl-page-sioux-falls #close .cl-eyebrow,
  body.layout-christmas.cl-page-sioux-falls #close .cl-eyebrow + h2 { margin-right: 0; margin-left: 68px; }
}
*/

/* [SF] /2026-09-22 MASCOTS ON PHONES */

/* ==========================================================================
   [SF] 2026-09-22 RGB VIDEO BAND. Replaces the four frame .cl-patterns
   carousel in 04 with the customer video of the same house, graded (grade B,
   rebuild2/photo-plan/sf-video/grade/GRADE.md) and cut to a 30.030 s loop
   whose first and last frames are two originally adjacent frames, so the
   browser's own loop restart is continuous. Build notes and the loop
   arithmetic: rebuild2/photo-plan/sf-video/WIRE.md.

   The band is 16:9 where the carousel was 3:2, so 04 is about 94 px shorter
   at the 900 px desktop measure. Nothing below it depended on that height.

   The <video> does not exist in the HTML; the inline script at the end of the
   page builds it, because a hidden <video> still downloads and <source media>
   is honored by no shipping browser, so a phone would otherwise fetch the 720
   tier. Everything here therefore has to read correctly with the poster alone,
   which is also exactly the reduced motion, Data Saver and no-JS state.

   The .cl-patterns rules earlier in this file are NOT deleted. They carry both
   city prefixes and Sioux City still ships the carousel.

   Color: the night palette and --cl-bulb. Nothing in this block is orange and
   nothing may become orange. Orange on these pages belongs to the estimator
   button only.
   ========================================================================== */

/* The padding from 768 up is load bearing, not taste. 16:9 in place of 3:2, and
   no dot row, takes about 125 px out of 04 at 820x1180, which pulled the 05 rung
   up into the same 1,180 px window as rung 5b and put two orange objects on one
   screen. Measured: rung 5b at 8,338 and the 05 rung at 9,358 inside the window
   that runs 8,260 to 9,440. The 120 px puts the 05 rung back at 9,478, clear of
   the boundary by 38 px, and it is split so the video also stands off the line
   above it.

   Phones keep the ordinary figure spacing this page uses everywhere else. No
   phone viewport had the collision, at any padding, and 80 px of dead space
   under a figure in a 390 px column is room the page cannot spare. 04 is
   genuinely shorter there, which is the whole point of the 16:9 box. */
body.layout-christmas.cl-page-sioux-falls .cl-vidband {
  display: block;
  width: 100%;
  margin: 0 0 1.5rem;
  padding: 1.5rem 0 2.5rem;
}
@media (min-width: 768px) {
  body.layout-christmas.cl-page-sioux-falls .cl-vidband {
    padding: 2.5rem 0 5rem;
  }
}
/* Same width rule the carousel had, and the same deliberate extra .cl-inner:
   one more class wins on specificity whatever the source order ends up being. */
@media (min-width: 1000px) {
  body.layout-christmas.cl-page-sioux-falls .cl-inner .cl-vidband {
    width: min(62vw, 900px, 100%);
    margin-left: auto;
    margin-right: auto;
  }
}

/* aspect-ratio holds the box before the poster lands, so the caption and the
   rung below it never move. */
body.layout-christmas.cl-page-sioux-falls .cl-vidband-box {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  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-page-sioux-falls .cl-vidband-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

/* The video fades in on 'playing', never on 'canplay': canplay fires before a
   frame is painted and you get one frame of black over the poster.
   top: 1px with the matching height keeps the video's paint rect strictly
   smaller than the poster's, so it can never take LCP off IMG.cl-hero-img.
   The band is far below the fold, so this is belt and braces, but it is free. */
body.layout-christmas.cl-page-sioux-falls .cl-vidband-video {
  position: absolute;
  top: 1px;
  left: 0;
  width: 100%;
  height: calc(100% - 1px);
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  background-color: var(--cl-night-800);
  /* z-index 1: the script inserts the video before the poster, so without
     it the poster paints on top and hides a video that is playing. */
  z-index: 1;
  opacity: 0;
  transition: opacity 0.6s linear;
}
body.layout-christmas.cl-page-sioux-falls .cl-vidband-box.cl-vidband-on .cl-vidband-video {
  opacity: 1;
}

/* Top right, not bottom right. Sharp's own wordmark is burned into the bottom
   left of the footage and the cartoon mascot into the bottom right; top right
   is dark sky on all six color phases, checked against each. 44 px minimum
   height, so it is a real touch target. */
body.layout-christmas.cl-page-sioux-falls .cl-vidband-sound {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(5, 10, 22, 0.78);
  border: 1px solid var(--cl-rule-warm);
  color: var(--cl-bulb);
  font-family: var(--cl-font-text);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
body.layout-christmas.cl-page-sioux-falls .cl-vidband-sound:hover {
  background: var(--cl-night-600);
  border-color: var(--cl-bulb);
}
body.layout-christmas.cl-page-sioux-falls .cl-vidband-sound:focus-visible {
  outline: 2px solid var(--cl-amber-hot);
  outline-offset: 4px;
}
body.layout-christmas.cl-page-sioux-falls .cl-vidband-sound[aria-pressed="true"] {
  background: var(--cl-night-600);
  border-color: var(--cl-bulb);
  color: #ffffff;
}
body.layout-christmas.cl-page-sioux-falls .cl-vidband-sound[hidden] {
  display: none;
}

/* Speaker glyphs as CSS masks painted currentColor, so the icon follows the
   label through hover, focus and the pressed state with no second file and no
   second source of truth for the state. */
body.layout-christmas.cl-page-sioux-falls .cl-vidband-ico {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background-color: currentColor;
  -webkit-mask: var(--cl-ico-mute) center / 18px 18px no-repeat;
  mask: var(--cl-ico-mute) center / 18px 18px no-repeat;
}
body.layout-christmas.cl-page-sioux-falls .cl-vidband-sound[aria-pressed="true"] .cl-vidband-ico {
  -webkit-mask-image: var(--cl-ico-loud);
  mask-image: var(--cl-ico-loud);
}
body.layout-christmas.cl-page-sioux-falls {
  --cl-ico-mute: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4z'/%3E%3Cpath d='M17 9.5l5 5m0-5l-5 5' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  --cl-ico-loud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4z'/%3E%3Cpath d='M16.5 8.5a5 5 0 010 7M19 6a8.5 8.5 0 010 12' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Caption typography is the carousel's, so the band reads as the same family
   of object as every other figure on the page. */
body.layout-christmas.cl-page-sioux-falls .cl-vidband-cap {
  font-family: var(--cl-font-text);
  font-size: 0.8125rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--cl-text-dim);
  text-align: center;
  margin: 0.1rem 0 0;
}
@media (max-width: 559px) {
  body.layout-christmas.cl-page-sioux-falls .cl-vidband-cap {
    font-size: 0.75rem;
  }
}

/* Reduced motion: the script returns before it builds anything, so this is a
   guard in case a video ever exists, plus hiding a control that would do
   nothing. The poster carries the band on its own. */
@media (prefers-reduced-motion: reduce) {
  body.layout-christmas.cl-page-sioux-falls .cl-vidband-video,
  body.layout-christmas.cl-page-sioux-falls .cl-vidband-sound {
    display: none;
  }
}

/* [SF] /2026-09-22 RGB VIDEO BAND */

/* ==========================================================================
   NO LEAD FORM (Lance 2026-09-23). The "have us call you" block under the close
   grid is gone from all three pages, and with it the rules that only served it
   (backups: rebuild2/phaseC/polish/backup/*-before-noleadform-2026-09-23.*).
   The close presenter used to stand at the shell edge under the left column,
   where the lead form's short copy kept the steps clear of him. Without the form
   he would stand on the headline and the steps, so from 1024 he moves to the
   right column's left edge and the CTA group steps right by his width plus a
   1.5rem gap: he stands beside "See My Christmas Price" with his open palm at
   the CTA group, boots still on the close-to-footer seam (bottom: 0 unchanged).
   The right column keeps room for the CTA at its natural width (22.4rem), which
   is what the minmax holds below about 1194px. Phones and 768 to 1023 are
   untouched (the figure is not painted from 768 to 1023; the phone badge stays).
   Measured with the block removed: zero text or CTA overlaps at 1024, 1100,
   1180, 1200, 1279, 1280, 1440, 1600 and 1920; figure to CTA 24px. The hub needs
   the same three rules in the shared file's APPEND: HUB region; that file is
   frozen, so they are proposed in rebuild2/phaseC/polish/noleadform/proposed/. */
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-sioux-falls #close .cl-closegrid { grid-template-columns: minmax(0, 1fr) minmax(calc(170px + 1.5rem + 22.4rem), 1fr); }
  body.layout-christmas.cl-page-sioux-falls #close .cl-closegrid > div:last-child { padding-left: calc(170px + 1.5rem); }
  body.layout-christmas.cl-page-sioux-falls #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-sioux-falls #close .cl-closegrid { grid-template-columns: minmax(0, 1fr) minmax(calc(180px + 1.5rem + 22.4rem), 1fr); }
  body.layout-christmas.cl-page-sioux-falls #close .cl-closegrid > div:last-child { padding-left: calc(180px + 1.5rem); }
  body.layout-christmas.cl-page-sioux-falls #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)); }
}
/* [SF] With the narrower left column this h2 wraps to three lines from 1024 to
   about 1150, so SF-14's 2.2rem left the palm 47 to 58px below the phone row.
   6.6rem puts the palm in the CTA group from 1024 to 1279 and the CTA still sits
   beside the headline (SF-14's intent). From 1280 SF-14's 2.2rem stands. */
@media (min-width: 1024px) and (max-width: 1279px) {
  body.layout-christmas.cl-page-sioux-falls .cl-closegrid > *:last-child { margin-top: 6.6rem; }
}