/* ---------- SIOUX CITY PAGE BLOCK. PORCH LIGHT, warm amber. Every rule scoped to .cl-page-sioux-city.
   Hub rules re-prefixed from the APPEND: HUB region are marked [HUB n-n]; SC-only rules are marked [SC]. */
body.layout-christmas.cl-page-sioux-city { --cl-accent: var(--cl-amber-hot); --cl-sc-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"); }

/* [SC] HERO. assets-manifest heroChoices.sc says the desktop master carries the symmetrical full
   frame, so the 46% 50% base rule (line 2171) is reset to the manifest's objectPositionDesktop. */
@media (min-width: 760px) {
  body.layout-christmas.cl-page-sioux-city .cl-hero-img { object-position: 50% 50%; }
}

/* [HUB 5378-5396] Phone pair row and the text-shaped phone control. */
body.layout-christmas.cl-page-sioux-city .cl-callrow { margin: 1.1rem 0 0; }
body.layout-christmas.cl-page-sioux-city .cl-callrow .cl-callpair { margin-right: 1.4rem; }
body.layout-christmas.cl-page-sioux-city button.cl-phone { font-family: var(--cl-font-display); }

/* [HUB 5405-5412] Price card, lease column and the seal row. */
body.layout-christmas.cl-page-sioux-city .cl-band--after-bleed { padding-top: clamp(1.6rem, 4vw, 3rem); }
body.layout-christmas.cl-page-sioux-city .cl-price .cl-list { margin-bottom: 1rem; }
body.layout-christmas.cl-page-sioux-city .cl-price .cl-list li { font-size: 0.98rem; }
body.layout-christmas.cl-page-sioux-city .cl-price-note { font-size: 0.92rem; color: var(--cl-ink-soft); margin: 0.75rem 0 0; }
body.layout-christmas.cl-page-sioux-city .cl-lease-col .cl-h3 { margin-bottom: 0.9rem; }
body.layout-christmas.cl-page-sioux-city .cl-seal-row { display: flex; align-items: center; gap: 1.25rem; margin: 1.5rem 0 0; }
body.layout-christmas.cl-page-sioux-city .cl-seal-row p { margin: 0; max-width: 40ch; }

/* [SC] B4 LAYOUT. 1.05fr / 0.95fr from 960 (brief 4.3 B4), against the hub's even split. */
@media (min-width: 960px) {
  body.layout-christmas.cl-page-sioux-city .cl-pricegrid { grid-template-columns: 1.05fr 0.95fr; margin-bottom: 1.5rem; }
}

/* [HUB 5422-5471] PHONE DENSITY, first pass. */
@media (max-width: 767px) {
  body.layout-christmas.cl-page-sioux-city .cl-compare-cards > .cl-compare-card { flex: 0 0 84%; }
  body.layout-christmas.cl-page-sioux-city .cl-compare-cards,
  body.layout-christmas.cl-page-sioux-city .cl-leasegrid,
  body.layout-christmas.cl-page-sioux-city .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-city .cl-duo figure.cl-duo--macro { display: none; }
  body.layout-christmas.cl-page-sioux-city .cl-statstrip { grid-template-columns: 1fr; gap: 0.6rem; margin-bottom: 1rem; }
  body.layout-christmas.cl-page-sioux-city .cl-statstrip .cl-stat { display: none; }
  body.layout-christmas.cl-page-sioux-city .cl-compare-card .cl-compare-row { padding: 0.4rem 0; }
  body.layout-christmas.cl-page-sioux-city .cl-compare-card { padding: 1rem; }
  body.layout-christmas.cl-page-sioux-city .cl-receipt img { max-width: 220px; }
  body.layout-christmas.cl-page-sioux-city .cl-quote-text { font-size: 0.98rem; padding: 1.1rem 1.2rem 0.9rem; }
  body.layout-christmas.cl-page-sioux-city .cl-quote-card .cl-stars { padding: 1rem 1.2rem 0; }
  body.layout-christmas.cl-page-sioux-city .cl-quote-meta { padding: 0 1.2rem 1rem; }
  body.layout-christmas.cl-page-sioux-city .cl-price .cl-list li { padding-top: 0.15rem; padding-bottom: 0.15rem; margin: 0; }
  body.layout-christmas.cl-page-sioux-city .cl-price { padding: 1.25rem 1.1rem; }
  body.layout-christmas.cl-page-sioux-city .cl-seal-row { margin-top: 0.8rem; }
  body.layout-christmas.cl-page-sioux-city .cl-seal-row p { font-size: 0.95rem; line-height: 1.5; }
  body.layout-christmas.cl-page-sioux-city .cl-split { gap: 1.2rem; }
  body.layout-christmas.cl-page-sioux-city .cl-pricegrid { gap: 1.4rem; }
  body.layout-christmas.cl-page-sioux-city .cl-faqgrid { gap: 1.2rem; }
  body.layout-christmas.cl-page-sioux-city .cl-city-split { gap: 1.2rem; }
  body.layout-christmas.cl-page-sioux-city .cl-closegrid { gap: 1rem; }
  /* 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-city .cl-lease { display: block; overflow: visible; scroll-snap-type: none; padding-bottom: var(--cl-pad-panel); }
}

/* [HUB 5474-5494] Comparison on the paper band: 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-city .cl-paper .cl-compare { border-top-color: var(--cl-paper-edge); }
body.layout-christmas.cl-page-sioux-city .cl-paper .cl-compare-head,
body.layout-christmas.cl-page-sioux-city .cl-paper .cl-compare .cl-compare-row { border-bottom-color: var(--cl-paper-edge); }
body.layout-christmas.cl-page-sioux-city .cl-paper .cl-compare-head > *,
body.layout-christmas.cl-page-sioux-city .cl-paper .cl-compare .cl-compare-label { color: var(--cl-ink-soft); }
body.layout-christmas.cl-page-sioux-city .cl-paper .cl-compare .cl-compare-value { color: var(--cl-ink-body); align-items: flex-start; }
body.layout-christmas.cl-page-sioux-city .cl-paper .cl-compare-head > .is-sharp,
body.layout-christmas.cl-page-sioux-city .cl-paper .cl-compare .cl-compare-value.is-sharp { color: var(--cl-ink); font-weight: 600; }
body.layout-christmas.cl-page-sioux-city .cl-paper .cl-compare .cl-mark,
body.layout-christmas.cl-page-sioux-city .cl-paper .cl-compare-cards .cl-mark { flex: 0 0 auto; }
body.layout-christmas.cl-page-sioux-city .cl-compare-value.cl-mid:before,
body.layout-christmas.cl-page-sioux-city .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-city .cl-compare-cards .cl-compare-value { display: flex; align-items: flex-start; gap: 0.4rem; }
/* [HUB 5752-5753] The no-mark img inherited an auto side margin from the framework img rule. */
body.layout-christmas.cl-page-sioux-city .cl-compare-cards .cl-mark,
body.layout-christmas.cl-page-sioux-city .cl-compare .cl-mark { margin: 0 0.1rem 0 0; }

/* [HUB 5499-5509] Yes mark: CSS-masked span painted --cl-green-ink (4.79:1 paper, 5.14:1 card). */
body.layout-christmas.cl-page-sioux-city 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;
}

/* [HUB 5512-5531] M-6. NEVER RAIL the review quotes (brief 5.1): under 768 the pair stacks. */
@media (max-width: 767px) {
  body.layout-christmas.cl-page-sioux-city .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-city .cl-proof.cl-proof--two > .cl-quote-card {
    flex: none;
    width: auto;
    scroll-snap-align: none;
  }
  body.layout-christmas.cl-page-sioux-city .cl-quote-card:not(:has(.cl-receipt)) .cl-quote-meta {
    padding-bottom: 1rem;
  }
}

/* [HUB 5534-5566 + 5680-5706 + 5725-5748] PHONE DENSITY AND TYPE STEP, final pass.
   Under 768: body 16px, leads 15.5px, H2 30px, 44px tap floors, band padding 1rem. */
@media (max-width: 767px) {
  body.layout-christmas.cl-page-sioux-city .cl-phone-hide { display: none; }
  body.layout-christmas.cl-page-sioux-city .cl-band p:not(.cl-lead):not(.cl-ctarow):not(.cl-caption),
  body.layout-christmas.cl-page-sioux-city .cl-list li,
  body.layout-christmas.cl-page-sioux-city .cl-steps li,
  body.layout-christmas.cl-page-sioux-city .cl-lease p,
  body.layout-christmas.cl-page-sioux-city .cl-answer p,
  body.layout-christmas.cl-page-sioux-city .cl-expand-body p { font-size: 16px; line-height: 1.6; }
  body.layout-christmas.cl-page-sioux-city .cl-band .cl-lead { font-size: 15.5px; line-height: 1.5; }
  body.layout-christmas.cl-page-sioux-city .cl-band h2,
  body.layout-christmas.cl-page-sioux-city .cl-band h2.wide { font-size: 1.875rem; }
  body.layout-christmas.cl-page-sioux-city .cl-band,
  body.layout-christmas.cl-page-sioux-city .cl-january,
  body.layout-christmas.cl-page-sioux-city .cl-close { padding: 1rem 0; }
  body.layout-christmas.cl-page-sioux-city .cl-band--flush { padding: 0; }
  body.layout-christmas.cl-page-sioux-city .cl-band--after-bleed { padding-top: 0.9rem; }
  body.layout-christmas.cl-page-sioux-city .cl-band h2 { margin-bottom: 0.55rem; }
  body.layout-christmas.cl-page-sioux-city .cl-band p { margin-bottom: 0.7rem; }
  body.layout-christmas.cl-page-sioux-city .cl-lead { margin-bottom: 0.7rem; }
  body.layout-christmas.cl-page-sioux-city .cl-band .cl-deck { margin-bottom: 0.7rem; }
  body.layout-christmas.cl-page-sioux-city .cl-expand { margin-bottom: 0.8rem; }
  body.layout-christmas.cl-page-sioux-city .cl-expand summary { min-height: 44px; padding: 0.3rem 0; }
  body.layout-christmas.cl-page-sioux-city .cl-faq summary { min-height: 44px; font-size: 1rem; padding: 0.45rem 0; }
  body.layout-christmas.cl-page-sioux-city .cl-faq details[open] summary:after { margin-top: 0.4rem; }
  body.layout-christmas.cl-page-sioux-city .cl-statstrip { margin-bottom: 0.8rem; }
  body.layout-christmas.cl-page-sioux-city .cl-verify { margin-top: 0.9rem; }
  body.layout-christmas.cl-page-sioux-city .cl-price .cl-price-p { display: none; }
  body.layout-christmas.cl-page-sioux-city .cl-price .cl-list { margin-bottom: 0.8rem; }
  body.layout-christmas.cl-page-sioux-city .cl-chip { padding: 0.5rem 1.2rem; }
  body.layout-christmas.cl-page-sioux-city .cl-chips { margin-bottom: 0.8rem; }
  body.layout-christmas.cl-page-sioux-city .cl-gallery { margin-bottom: 0.8rem; }
  body.layout-christmas.cl-page-sioux-city .cl-mosaic { margin-bottom: 0.8rem; }
  body.layout-christmas.cl-page-sioux-city .cl-steps { margin-bottom: 0.6rem; }
  body.layout-christmas.cl-page-sioux-city .cl-rating .val { font-size: 2.2rem; }
  body.layout-christmas.cl-page-sioux-city .cl-quote-text { font-size: 0.95rem; line-height: 1.55; }
  body.layout-christmas.cl-page-sioux-city .cl-faq-aside { padding: 1rem 1.1rem; }
  body.layout-christmas.cl-page-sioux-city .cl-faq-aside p { margin-bottom: 0.7rem; }
  body.layout-christmas.cl-page-sioux-city .cl-compare-card { padding: 0.8rem; }
  body.layout-christmas.cl-page-sioux-city .cl-compare-card .cl-compare-row { padding: 0.3rem 0; }
  body.layout-christmas.cl-page-sioux-city .cl-offerstrip li { font-size: 0.72rem; padding-top: 0.15rem; padding-bottom: 0.15rem; }
  body.layout-christmas.cl-page-sioux-city .cl-january .cl-strand--fade { margin-bottom: 0.6rem; }
  body.layout-christmas.cl-page-sioux-city #app > footer.container { padding-top: 1rem; }
  body.layout-christmas.cl-page-sioux-city #app > footer.container .faves img { max-height: 72px; width: auto; }
  body.layout-christmas.cl-page-sioux-city #app > footer.container .legal.container { padding-top: 0.75rem; padding-bottom: 0.75rem; }
  body.layout-christmas.cl-page-sioux-city #app > footer.container .legal [class*="col-"] { padding-top: 0.35rem; padding-bottom: 0.35rem; }
  body.layout-christmas.cl-page-sioux-city #app > footer.container .company .logo { margin-bottom: 0.6rem; }
  body.layout-christmas.cl-page-sioux-city #app > footer.container .company .logo img { width: 200px; max-width: 100%; }
  body.layout-christmas.cl-page-sioux-city #app > footer.container .menus > [class*="col-"] { padding-top: 0.6rem; padding-bottom: 0.6rem; }
  body.layout-christmas.cl-page-sioux-city #app > footer.container .row-xxl.center.pad-all-1 > .col-xxs-12 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
}
/* [HUB 5866-5875] M-11 (b) the price note renders small under the CTA; m-16 430x932 card-list air. */
@media (max-width: 767px) {
  body.layout-christmas.cl-page-sioux-city .cl-price p.cl-price-note { font-size: 0.85rem; line-height: 1.45; margin: 0.6rem 0 0; }
}
@media (min-width: 400px) and (max-width: 767px) {
  body.layout-christmas.cl-page-sioux-city .cl-price .cl-list { margin-bottom: 1.75rem; }
}
/* [HUB 5572-5583] M-1 / m-10 / m-11. Short-phone folds: price anchor and 320 CTA on one line. */
@media (max-width: 389px) {
  body.layout-christmas.cl-page-sioux-city .cl-hero .cl-priceanchor-n { font-size: 1.3rem; margin-right: 0.35rem; }
  body.layout-christmas.cl-page-sioux-city .cl-hero .cl-priceanchor-t { font-size: 0.82rem; }
}
@media (max-width: 359px) {
  body.layout-christmas.cl-page-sioux-city .cl-hero-inner { padding-top: 12px; }
  body.layout-christmas.cl-page-sioux-city .cl-hero .cl-deck { font-size: 0.95rem; margin-bottom: 8px; }
  body.layout-christmas.cl-page-sioux-city .cl-hero .cl-priceanchor { padding-left: 0.5rem; margin-bottom: 10px; }
  body.layout-christmas.cl-page-sioux-city .cl-hero .cl-priceanchor-n { font-size: 1.1rem; margin-right: 0.3rem; }
  body.layout-christmas.cl-page-sioux-city .cl-hero .cl-priceanchor-t { font-size: 0.78rem; }
  body.layout-christmas.cl-page-sioux-city .cl-cta { font-size: 1.25rem; padding: 0.8rem 1rem; }
}

/* [HUB 5586-5596 + 5758-5763] M-9 (a). One 3px amber focus ring on every control, with an id in the
   chain because the framework's #nav rules and currentColor outlines outrank a class-only rule. */
body.layout-christmas.cl-page-sioux-city a:focus-visible,
body.layout-christmas.cl-page-sioux-city button:focus-visible,
body.layout-christmas.cl-page-sioux-city summary:focus-visible,
body.layout-christmas.cl-page-sioux-city input:focus-visible,
body.layout-christmas.cl-page-sioux-city select:focus-visible,
body.layout-christmas.cl-page-sioux-city textarea:focus-visible,
body.layout-christmas.cl-page-sioux-city [tabindex]:focus-visible,
body.layout-christmas.cl-page-sioux-city .modal-deep-lawn .close-deep-lawn:focus-visible {
  outline: 3px solid var(--cl-amber-hot) !important;
  outline-offset: 3px !important;
}
body.layout-christmas.cl-page-sioux-city :is(#app, #nav, #mobile-cta-bar, .modal-deep-lawn) *:focus-visible {
  outline: 3px solid var(--cl-amber-hot) !important;
  outline-offset: 3px !important;
  transition: none !important;
}

/* [SC] HERO SCRIM from 760. The SC plate ramp lives in the base CSS (line 2166); this is the desktop
   master's own band. The red and green roofline sits higher in the master frame than the hub's warm
   white line, so the ramp starts at 80 percent instead of 84. */
@media (min-width: 760px) {
  body.layout-christmas.cl-page-sioux-city .cl-hero-scrim {
    --cl-scrim-s3: 80%;
    --cl-scrim-s4: 90%;
    --cl-scrim-s5: 96%;
    --cl-scrim-a4: 0.52;
    --cl-scrim-a5: 0.90;
    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%);
  }
  body.layout-christmas.cl-page-sioux-city .cl-hero-badge { --cl-badge-w: 104px; }
}
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-sioux-city .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-city .cl-hero-badge { --cl-badge-w: 104px; right: 32px; bottom: 32px; }
  body.layout-christmas.cl-page-sioux-city .cl-hero-inner .cl-micro,
  body.layout-christmas.cl-page-sioux-city .cl-hero-inner .cl-caption,
  body.layout-christmas.cl-page-sioux-city .cl-hero-inner .cl-ctarow { max-width: calc(100% - 104px - 2rem); }
}

/* [HUB 5633-5644] m-2 / I9 figure corner bracket at .55 alpha; m-3 / I1 nav handset at 24px. */
body.layout-christmas.cl-page-sioux-city .cl-fig:after {
  border-color: rgba(255, 181, 71, 0.55);
  opacity: 1;
}
body.layout-christmas.cl-page-sioux-city #nav .cl-nav-tel svg,
body.layout-christmas.cl-page-sioux-city #nav .cl-nav-tel-glyph {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

/* [HUB 5647-5661] m-4 / I4. The FAQ disclosure marker is a 24px SVG mask at a 2.5px stroke painted
   --cl-bulb; 0 closed / 180 open. (This is the summary affordance, not the .cl-strand--chevron
   device, which brief 4.3 B6 forbids on this page and which this region never declares.) */
body.layout-christmas.cl-page-sioux-city .cl-faq summary:after {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border: 0;
  background-color: var(--cl-bulb);
  -webkit-mask: var(--cl-sc-chev) center / 24px 24px no-repeat;
  mask: var(--cl-sc-chev) center / 24px 24px no-repeat;
  transform: none;
  margin: 0.15rem 0.2rem 0 0;
}
body.layout-christmas.cl-page-sioux-city .cl-faq details[open] summary:after {
  transform: rotate(180deg);
  margin-top: 0.15rem;
}

/* [HUB 5666-5677] Desktop-only CTA rung. */
body.layout-christmas.cl-page-sioux-city .cl-ctarow--desk { display: none; margin-top: 1.6rem; }
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-sioux-city .cl-ctarow--desk { display: flex; margin-top: 1.25rem; }
  body.layout-christmas.cl-page-sioux-city .cl-ctarow--under-desk { display: none; }
}

/* [HUB 5766] m-6 / I10. Teko 700 on the CTAs so the anti-aliased edge is a smaller share of the
   white-on-orange text pixels. */
body.layout-christmas.cl-page-sioux-city .cl-cta { font-weight: 700; }

/* [HUB 5569] M-3 / C3 / C8. The footer's orange instant-price pill is hidden rather than edited;
   the two click-to-call lines stay. R5: one in-flow orange object per screen. */
body.layout-christmas.cl-page-sioux-city #app > footer.container .company .buttons { display: none; }
/* [HUB 6089-6096] The SCA badge was squashed by B-1's max-height; size it by width only. */
body.layout-christmas.cl-page-sioux-city #app > footer.container .faves { align-items: center; }
body.layout-christmas.cl-page-sioux-city #app > footer.container .faves img { height: auto; }
@media (max-width: 767px) {
  body.layout-christmas.cl-page-sioux-city #app > footer.container .faves img[src*="sca-badge"] {
    max-height: none;
    max-width: calc(72px * 600 / 520);
  }
}

/* [HUB 5903-5905 + 5995-5999] 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-sioux-city #nav a.nav-call { display: none; }
  body.layout-christmas.cl-page-sioux-city #nav .cl-nav-tel { margin-right: 0; }
}

/* [HUB 5949-5957] L4 lightbox: <dialog class="cl-lb"> built by the lazy christmas-lightbox.js. */
.cl-page-sioux-city .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-city .cl-lb[open]{display:flex}
.cl-page-sioux-city .cl-lb-img{max-width:100%;max-height:88vh;object-fit:contain}
.cl-page-sioux-city .cl-lb-cap{margin:0;font:400 .9rem/1.4 var(--cl-font-text);text-align:center}
.cl-page-sioux-city .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-city .cl-lb-close svg{width:22px;height:22px;margin:0;top:0}

/* [HUB 5961-5976] L1 + L2. Grid items default to min-width:auto, so the nowrap lease and town rails
   stretched their 1fr tracks. The rails contain overscroll and carry a right-edge fade as the
   "more" cue; the price figure tracks the card instead of sitting at a fixed 48px. */
@media (max-width: 767px) {
  body.layout-christmas.cl-page-sioux-city .cl-pricegrid > *,
  body.layout-christmas.cl-page-sioux-city .cl-city-split > * { min-width: 0; }
  body.layout-christmas.cl-page-sioux-city .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));
  }
}
@media (max-width: 759px) {
  body.layout-christmas.cl-page-sioux-city .cl-price-figure { font-size: clamp(2.25rem, 11.5vw, 3.25rem); text-align: center; }
  body.layout-christmas.cl-page-sioux-city .cl-price-sub { text-align: center; }
}

/* [HUB 5980-5993] 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 percent. */
@media (max-width: 759px) {
  body.layout-christmas.cl-page-sioux-city .cl-hero { container-type: inline-size; }
  body.layout-christmas.cl-page-sioux-city .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-city .cl-hero-badge {
    top: calc(62.5vw - var(--cl-badge-w) - 8px);
    top: calc(62.5cqw - var(--cl-badge-w) - 8px);
  }
}

/* [HUB 6001-6032 + 6096] L7 HERO PANEL. Plain under 760; from 760 the homepage .hero-support
   treatment (fit-content, 36rem cap, night gradient, .5rem radius, text-shadow). H1 capped 4rem. */
@media (min-width: 760px) {
  body.layout-christmas.cl-page-sioux-city .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 SC surface. Same fix the Sioux Falls page took. */
    border-radius: var(--cl-r-1);
    padding: 0.85rem 1.1rem;
  }
  body.layout-christmas.cl-page-sioux-city .cl-hero-panel h1 {
    font-size: min(4rem, var(--cl-h1));
    max-width: none;
  }
  body.layout-christmas.cl-page-sioux-city .cl-hero-inner .cl-hero-panel .cl-micro,
  body.layout-christmas.cl-page-sioux-city .cl-hero-inner .cl-hero-panel .cl-ctarow {
    max-width: none;
  }
  body.layout-christmas.cl-page-sioux-city .cl-hero .cl-hero-panel .cl-eyebrow,
  body.layout-christmas.cl-page-sioux-city .cl-hero .cl-hero-panel .cl-proofstrip,
  body.layout-christmas.cl-page-sioux-city .cl-hero .cl-hero-panel .cl-deck,
  body.layout-christmas.cl-page-sioux-city .cl-hero .cl-hero-panel .cl-priceanchor,
  body.layout-christmas.cl-page-sioux-city .cl-hero .cl-hero-panel .cl-priceanchor *,
  body.layout-christmas.cl-page-sioux-city .cl-hero .cl-hero-panel .cl-micro {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 2px 12px rgba(0, 0, 0, 0.75);
  }
  body.layout-christmas.cl-page-sioux-city .cl-hero .cl-hero-panel .cl-priceanchor-t,
  body.layout-christmas.cl-page-sioux-city .cl-hero .cl-hero-panel .cl-micro { color: #c9d3e8; }
}
@media (min-width: 760px) and (max-width: 1023px) {
  body.layout-christmas.cl-page-sioux-city .cl-hero-panel { margin-top: 70px; }
}

/* [HUB 6036-6061] L8 / ruling R1. No orange CTA floats: 760+ band padding capped at 4.25rem. */
@media (min-width: 760px) {
  body.layout-christmas.cl-page-sioux-city { --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-city #app > footer.container { padding-top: 0.75rem; }
  body.layout-christmas.cl-page-sioux-city #app > footer.container > .menus { padding-top: 2rem; }
}
@media (min-width: 760px) and (max-width: 939px) {
  body.layout-christmas.cl-page-sioux-city .cl-closegrid { gap: 0.5rem; }
}
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-sioux-city .cl-band h2.wide { max-width: 30ch; }
}
/* [HUB 6057-6060] L9. The January strand is full width with no fade. */
body.layout-christmas.cl-page-sioux-city .cl-january > .cl-strand { margin: 0.5rem 0 1.5rem; }
@media (max-width: 767px) {
  body.layout-christmas.cl-page-sioux-city .cl-january > .cl-strand { margin-bottom: 0.6rem; }
}

/* [HUB 6064-6077] L6 / M1. #nav .inner is a 1fr auto 1fr grid from 1024, so the
   menu centers on the viewport whatever the logo and the Call us button measure.
   1024-1279: logo + number row 1, menu row 2 (extended from 1123 on 2026-09-24
   so the phone number never wraps). 1280-1439: link padding 10 -> 6px. */
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-sioux-city #nav .inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  body.layout-christmas.cl-page-sioux-city #nav .inner > .logo { justify-self: start; }
  body.layout-christmas.cl-page-sioux-city #nav nav { margin: 0; justify-self: center; }
  body.layout-christmas.cl-page-sioux-city #nav .cl-nav-tel { margin-left: 0; justify-self: end; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  body.layout-christmas.cl-page-sioux-city #nav .inner { align-content: center; row-gap: 0.25rem; }
  body.layout-christmas.cl-page-sioux-city #nav nav { grid-column: 1 / -1; grid-row: 2; }
  body.layout-christmas.cl-page-sioux-city #nav .cl-nav-tel { grid-column: 3; grid-row: 1; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  body.layout-christmas.cl-page-sioux-city #nav nav > ul > li > a:not(.button) { padding-left: 6px; padding-right: 6px; }
}

/* [SC] .cl-mosaic, the Sioux City gallery signature (base 8.21). Six tiles: one lead spanning both
   columns, then four in a 2 x 2 and the sixth beside it. Captions keep the bold lead only under 560,
   like the hub's gallery. */
@media (max-width: 559px) {
  body.layout-christmas.cl-page-sioux-city .cl-mosaic figcaption .cl-cap-x { display: none; }
}

/* [SC] .cl-timeline, the Sioux City process signature (base 8.12). From 900 it is a five-column
   grid, so the band's own CTA row needs air above it. */
@media (min-width: 900px) {
  body.layout-christmas.cl-page-sioux-city .cl-timeline + .cl-ctarow { margin-top: 1.6rem; }
}

/* [HUB 6111-6221] MASCOT FIGURES. Five figure instances of four characters on this page (the ladder and the
   presenter are added at the end of this region), bare <img>, no wrapper and
   no pseudo element. styles1.1.css:117 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. That is what holds CLS at 0. The presenter is
   the phone-only above-fold figure (ruling R-W1), gone from 760 up; it stands on the seam where the
   plate ends, so the cqw/vw pair tracks the same 4:3 and 16:10 plate the badge rule tracks. The
   phone pose shows from 768 on THE DATE, the storage pose from 1024 on JANUARY. No srcset: a DPR2
   phone choosing a w480 tier would put the fold weight over the R-W1 ceiling. */
body.layout-christmas.cl-page-sioux-city .cl-mascot {
  position: absolute;
  margin: 0;
  pointer-events: none;
}
body.layout-christmas.cl-page-sioux-city .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-city .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-city .cl-mascot--hero { display: none; }
}
body.layout-christmas.cl-page-sioux-city .cl-mascot--date,
body.layout-christmas.cl-page-sioux-city .cl-mascot--jan {
  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 navy-on-navy seam. */
body.layout-christmas.cl-page-sioux-city .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) {
  body.layout-christmas.cl-page-sioux-city .cl-mascot--date {
    display: block;
    right: max(1.3rem, calc(50% - 590px));
    bottom: 0;
    width: 170px;
  }
}
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-sioux-city .cl-mascot--date { width: 172px; }
  body.layout-christmas.cl-page-sioux-city .cl-mascot--jan {
    display: block;
    right: calc(50% + 316px);
    bottom: 0;
    width: 172px;
  }
  body.layout-christmas.cl-page-sioux-city #january {
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
  }
}
@media (min-width: 1280px) {
  body.layout-christmas.cl-page-sioux-city .cl-mascot--date { width: 184px; }
  body.layout-christmas.cl-page-sioux-city .cl-mascot--jan { width: 204px; }
}
@media (min-width: 1600px) {
  body.layout-christmas.cl-page-sioux-city .cl-mascot--jan { width: 230px; }
}

/* [SC] B7 mosaic: six tiles, so the sixth closes the block as a wide strip. */
body.layout-christmas.cl-page-sioux-city .cl-mosaic--lead > figure:last-child {
  grid-column: 1 / -1;
}
body.layout-christmas.cl-page-sioux-city .cl-mosaic--lead > figure:last-child img {
  aspect-ratio: 2 / 1;
}
@media (min-width: 1024px) {
  /* Three columns, not the base four: with six tiles a 2x2 lead plus five
     equal tiles fills three rows exactly and leaves no hole. */
  body.layout-christmas.cl-page-sioux-city .cl-mosaic {
    grid-template-columns: repeat(3, 1fr);
  }
  body.layout-christmas.cl-page-sioux-city .cl-mosaic--lead > figure:last-child {
    grid-column: auto;
  }
  body.layout-christmas.cl-page-sioux-city .cl-mosaic--lead > figure:last-child img {
    aspect-ratio: 16 / 9;
  }
}

/* [SC] B1 hero: the Siouxland eyebrow is noise on the shortest phones. */
@media (max-width: 479px) {
  body.layout-christmas.cl-page-sioux-city .cl-hero-panel > .cl-eyebrow { display: none; }
}

/* [SC] MEASURED FIXES, round 2. Every number below came off a 390x844 DPR 2 run
   and the desktop sweep, not off an estimate. */

/* B1 fold (C1, C7). Measured: price anchor bottom 557 and the orange bottom 625,
   over the 530 and 620 lines. The deck lost its second line in copy; these three
   margins give back the last 6px without touching the hub's desktop rhythm. */
@media (max-width: 759px) {
  body.layout-christmas.cl-page-sioux-city .cl-hero-panel h1,
  body.layout-christmas.cl-page-sioux-city .cl-hero-panel .cl-deck { margin-bottom: 0.5rem; }
  body.layout-christmas.cl-page-sioux-city .cl-hero-panel .cl-priceanchor { margin-bottom: 0.625rem; }
}

/* B12 decision card (C3 and R5). On phones the aside is the last thing in the
   band, which put its orange 497px above the close band's orange, two in one
   844px screen. Ordering the card ahead of the question list moves it about
   950px clear of the close, which satisfies both rules at once. */

/* B10 mascot clearance. Measured: the January figure's box crossed the h3 box by
   64px at every width from 1024 up. The text column is narrowed to 620px and the
   figure parked 24px clear of its left edge, which holds at 1024 through 1920. */
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-sioux-city #january .cl-inner--text { max-width: 620px; }
  body.layout-christmas.cl-page-sioux-city .cl-mascot--jan { right: calc(50% + 334px); }
}

/* [SC] MEASURED FIX round 3, RETIRED 2026-09-17 (owner review). It was
   @media (min-width:1600px){ #price .cl-h3 { margin-top: 11rem } }. That selector
   also matches the card and lease headings, so from 1600 it opened a 176px hole
   in the card and dropped the right column: the owner's "the right column is
   like lower". The price block below separates the two rungs on its own. */

/* [HUB 6138-6155 + 6168-6218] Mascots 4 and 5. The ladder pose at 02 What it costs and
   the presenter at 11 The close, both 1024 and up: below that they are a quarter of the
   viewport and crowd the lead. Position absolute, so neither adds document height, and
   each is sized by WIDTH ONLY because styles1.1.css line 117 forces height:auto.
   The width/height attributes carry the ratio of the file in src, which is what holds
   CLS at 0.0076. Placement measured on this page, not copied: see BUILD-NOTE.txt. */
body.layout-christmas.cl-page-sioux-city .cl-mascot--price,
body.layout-christmas.cl-page-sioux-city .cl-mascot--close { display: none; }
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-sioux-city .cl-mascot--price {
    display: block;
    right: 0;
    top: calc(-1 * var(--cl-band-y));
    width: 187px;
    /* [SC] NOT the hub's z-index -1. On the hub and on Sioux Falls the paper ground is
       painted by an inner element, so a figure at -1 still shows. Here #price carries
       .cl-paper itself, so -1 put the whole figure behind the band and only a sliver
       above the band edge survived. 1 paints it on the paper, and the right column's
       first text box starts 384px below it at 1024 and 592px below at 1440. */
    z-index: 1;
    filter: drop-shadow(0 14px 18px rgba(20, 30, 60, .18));
  }
  body.layout-christmas.cl-page-sioux-city .cl-mascot--close {
    display: block;
    left: max(1.3rem, calc(50% - 590px));
    bottom: 0;
    width: 170px;
    filter: saturate(.84) brightness(.96) contrast(1.02) drop-shadow(0 0 8px rgba(255, 198, 112, .28));
  }
}
@media (min-width: 1280px) {
  body.layout-christmas.cl-page-sioux-city .cl-mascot--price { width: 202px; }
  body.layout-christmas.cl-page-sioux-city .cl-mascot--close { width: 180px; }
}
@media (min-width: 1440px) {
  body.layout-christmas.cl-page-sioux-city .cl-mascot--price { width: 204px; }
}

/* [SC] QA2-3. The hub's night-chrome-on-paper ink list (christmas-lights.css:4554) names h2, h3
   and .cl-h3 but not h4, and this page's four .cl-compare-card titles are h4, so they inherited
   the paper island'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 that h3's bottom margin. Mirrors the Sioux Falls fix at
   christmas-lights.css:7221-7222. */
body.layout-christmas.cl-page-sioux-city .cl-compare-card h4 { margin: 0 0 0.75rem; }
body.layout-christmas.cl-page-sioux-city .cl-paper .cl-compare-card h4 { color: var(--cl-text); }

/* [SC] QA2-1 / QA2-5 round 3. The 390 ladder's last stretch (date CTA to close CTA) measured
   2520px against the 2000px phone ceiling, and the document measured 13299 against a 12800
   working ceiling. Both are one problem: the run of text bands between the date band and the
   close is too tall on a phone. This block takes the air out of that run and out of the page
   generally, and drops the second commercial photo below 768 the same way the mosaic macro
   frame is dropped, so one photo carries the band on a phone and both return at 768. */
@media (max-width: 767px) {
  body.layout-christmas.cl-page-sioux-city #commercial .cl-duo figure:nth-of-type(2) { display: none; }
  body.layout-christmas.cl-page-sioux-city #commercial .cl-duo { margin-bottom: 0.8rem; }
  body.layout-christmas.cl-page-sioux-city .cl-band,
  body.layout-christmas.cl-page-sioux-city .cl-january,
  body.layout-christmas.cl-page-sioux-city .cl-close { padding: 0.55rem 0; }
  body.layout-christmas.cl-page-sioux-city .cl-band--flush { padding: 0; }
  body.layout-christmas.cl-page-sioux-city .cl-band--after-bleed { padding-top: 0.55rem; }
  body.layout-christmas.cl-page-sioux-city .cl-band .cl-eyebrow { margin-bottom: 0.5rem; }
  body.layout-christmas.cl-page-sioux-city .cl-band p { margin-bottom: 0.5rem; }
  body.layout-christmas.cl-page-sioux-city .cl-band .cl-lead { margin-bottom: 0.5rem; }
  body.layout-christmas.cl-page-sioux-city .cl-january h3 { margin-top: 0; }
  body.layout-christmas.cl-page-sioux-city #towns h2.wide,
  body.layout-christmas.cl-page-sioux-city #faq h2 { font-size: 1.6rem; }
  body.layout-christmas.cl-page-sioux-city .cl-faq-aside { margin-top: 0.75rem; }
  body.layout-christmas.cl-page-sioux-city .cl-faq summary { padding: 0.3rem 0; }
  body.layout-christmas.cl-page-sioux-city .cl-band .cl-callrow { margin-top: 0.55rem; }
  body.layout-christmas.cl-page-sioux-city .cl-seal-row { margin-top: 0.6rem; }
}

/* [SC] QA2-1 round 3, part 2. The last stretch still measured 2045 against the 2000 ceiling.
   On a phone the close band stacks its two grid columns, which pushes the final CTA below the
   summary paragraph. display:contents lifts both columns' children into one flex column so the
   CTA sits where a phone reader expects it, directly under the deck, with the summary line and
   the phone number under it. Nothing is hidden and the two column desktop layout is untouched. */
@media (max-width: 767px) {
  body.layout-christmas.cl-page-sioux-city #towns .cl-towns { margin-top: 0.5rem; }
  body.layout-christmas.cl-page-sioux-city .cl-faq-aside { margin-top: 0.5rem; padding: 0.8rem 0.9rem; }
  body.layout-christmas.cl-page-sioux-city #close .cl-deck { margin-bottom: 0.5rem; }
  body.layout-christmas.cl-page-sioux-city #close .cl-closegrid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  body.layout-christmas.cl-page-sioux-city #close .cl-closegrid > div { display: contents; }
  body.layout-christmas.cl-page-sioux-city #close .cl-closegrid .cl-eyebrow { order: 1; }
  body.layout-christmas.cl-page-sioux-city #close .cl-closegrid h2 { order: 2; }
  body.layout-christmas.cl-page-sioux-city #close .cl-closegrid .cl-deck { order: 3; }
  body.layout-christmas.cl-page-sioux-city #close .cl-closegrid .cl-ctarow { order: 4; }
  body.layout-christmas.cl-page-sioux-city #close .cl-closegrid p:not([class]) { order: 5; margin-top: 0.2rem; }
  body.layout-christmas.cl-page-sioux-city #close .cl-closegrid .cl-callrow { order: 6; }
}

/* === POLISH P-4 (2026-09-15). DESKTOP CTA CADENCE ===================================
   The orchestrator's ruling P-4 sets the desktop limit at the LARGER of 1.6 viewport
   heights and the frozen hub's own measured top to top gap. Measured on this page before
   the fix: 1024 2,082.7 and 2,309.2, 1280 2,217.5 and 2,333.9, 1440 2,251.9 and 2,365.9,
   1920 2,253.6 and 2,365.8, all against hub gaps of 1,678.5 / 1,796.7 / 1,813.7 / 1,822.7,
   plus 1,796.5 (1024) and 1,940.0 (1920) in the price to proof stretch, and 2,830.2 at
   768 in the date to close stretch.
   Four moves, none of them visible below 768, so the 390 ladder (max gap 1,922.3, limit
   2,000) and the 390 document height are untouched:
     .cl-ctarow--desk-price  price band, under the four way comparison   from 1024
     .cl-ctarow--date-lead   date band head, and --date-end goes away    from 1024
     .cl-ctarow--desk-jan    january band, end of the takedown copy      from 1024
     .cl-ctarow--desk-faq    faq band, under the H2                      from 768
   The date band head is the only anchor the work to date desert allows: ruling R4 bars
   orange anywhere in the commercial beat (the bleed and the commercial band fill the
   middle of that stretch), and R5, one in flow orange object per screen, bars a second
   rung inside the date band itself. Moving the band's own rung to its head, which is what
   the Sioux Falls page does with --date-lead / --date-end, is the move that is left.
   Pattern copied from the Sioux Falls page's own desktop rungs (append.css L8, the
   --desk-jan rung at 768). */
body.layout-christmas.cl-page-sioux-city .cl-ctarow--desk-price,
body.layout-christmas.cl-page-sioux-city .cl-ctarow--desk-jan,
body.layout-christmas.cl-page-sioux-city .cl-ctarow--desk-faq,
body.layout-christmas.cl-page-sioux-city .cl-ctarow--date-lead { display: none; }
@media (min-width: 768px) {
  body.layout-christmas.cl-page-sioux-city .cl-ctarow--desk-faq {
    display: flex;
    margin-top: 0.2rem;
    margin-bottom: 1.4rem;
  }
}
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-sioux-city .cl-ctarow--desk-price {
    display: flex;
    margin-top: 1.6rem;
    margin-bottom: 0;
  }
  body.layout-christmas.cl-page-sioux-city .cl-ctarow--desk-jan {
    display: flex;
    margin-top: 1.4rem;
    margin-bottom: 0;
  }
  body.layout-christmas.cl-page-sioux-city .cl-ctarow--date-lead {
    display: flex;
    margin-top: -1rem;
    margin-bottom: 2.1rem;
  }
  body.layout-christmas.cl-page-sioux-city .cl-ctarow--date-end { display: none; }
}

/* === POLISH P-4 ADDENDUM (2026-09-15). ONE ORANGE OBJECT PER SCREEN AT 1280 AND UP ===
   Measured after the first P-4 pass: the faq rung sat 873.5 above the close band's
   CTA at both 1440x900 and 1920x1080, under one viewport height, and the gate run
   caught it at 1920 (screen 11). The date rung to close stretch is 2,971.7 at 1920,
   which has room for exactly one interior rung once each side has to clear 1,080.
   From 1280 the january rung and the under the H2 faq rung give way to one rung at
   the head of the faq band. Below 1280 nothing changes: the tightest gap there is
   865.5 at 1280x800 and 884.8 at 1024x768, each wider than its own viewport. */
body.layout-christmas.cl-page-sioux-city .cl-ctarow--faq-lead { display: none; }
@media (min-width: 1280px) {
  body.layout-christmas.cl-page-sioux-city .cl-ctarow--desk-jan,
  body.layout-christmas.cl-page-sioux-city .cl-ctarow--desk-faq { display: none; }
  body.layout-christmas.cl-page-sioux-city .cl-ctarow--faq-lead {
    display: flex;
    margin-top: 0;
    margin-bottom: 1.1rem;
  }
}

/* P-4 addendum trim (2026-09-15). Margin traded side to side; no copy moves. */
@media (min-width: 1280px) {
  /* --date-lead is set in the 1024 block above: -1rem / 2.1rem, walk round 2. */
  body.layout-christmas.cl-page-sioux-city .cl-ctarow--faq-lead {
    margin-top: -1rem;
    margin-bottom: 2.1rem;
  }
}

/* =============================================================================
   [SC] PHOTOS 2026-09-16
   Sioux City photo placements: the process strip in 01, the price photo in 02,
   the daylight figure in 04, the nine tile mosaic plus the five frame color
   gallery in 05, the commercial row in 06, the crew band between 06 and 07 and
   the street band above the town rail in 09. Plus the three new quote rungs.
   Existing class vocabulary only, page scoped, no new colors.
   ========================================================================== */

/* [SC] 01 process strip. Two across on a phone with the third tile closing the
   row, three across from the tablet up. */
body.layout-christmas.cl-page-sioux-city .cl-gallery--three {
  grid-template-columns: 1fr 1fr;
}
body.layout-christmas.cl-page-sioux-city .cl-gallery--three > figure:last-child {
  grid-column: 1 / -1;
}
body.layout-christmas.cl-page-sioux-city .cl-gallery--three > figure:last-child img {
  aspect-ratio: 26 / 10;
}
@media (min-width: 768px) {
  body.layout-christmas.cl-page-sioux-city .cl-gallery--three {
    grid-template-columns: repeat(3, 1fr);
  }
  body.layout-christmas.cl-page-sioux-city .cl-gallery--three > figure:last-child {
    grid-column: auto;
  }
  body.layout-christmas.cl-page-sioux-city .cl-gallery--three > figure:last-child img {
    aspect-ratio: 16 / 9;
  }
}

/* [SC] 06 commercial row. Two across at every width. */
body.layout-christmas.cl-page-sioux-city .cl-gallery--two {
  grid-template-columns: 1fr 1fr;
}

/* [SC] 2026-09-18 COMMERCIAL TREE PAIR */
body.layout-christmas .cl-img--tree { object-position: 50% 6%; }
@media (min-width: 560px) {
  body.layout-christmas .cl-gallery--two img { aspect-ratio: 1; }
}

/* [SC] 02 the price photo. One file, two placements: inside the price card on
   narrow screens, and full width under the estimator row on the desktop, where
   the card has no room left to give. Only one of the two is ever rendered. */
body.layout-christmas.cl-page-sioux-city .cl-fig--cardprice {
  margin: 1.1rem 0 0;
}
body.layout-christmas.cl-page-sioux-city .cl-fig--cardprice img {
  aspect-ratio: 26 / 10;
  object-fit: cover;
}
body.layout-christmas.cl-page-sioux-city .cl-fig--deskprice {
  display: none;
}
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-sioux-city .cl-fig--cardprice {
    display: none;
  }
  body.layout-christmas.cl-page-sioux-city .cl-fig--deskprice {
    display: block;
    max-width: min(860px, 92%);
    margin: 1.2rem auto 1.6rem;
  }
  body.layout-christmas.cl-page-sioux-city .cl-fig--deskprice img {
    aspect-ratio: 21 / 9;
    object-fit: cover;
  }
}

/* [SC] 04 the ridge figures. Side by side while the split is one column, then
   stacked in the figure column once the copy moves alongside at 900. */
body.layout-christmas.cl-page-sioux-city .cl-figpair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cl-gap-tiles);
  align-items: start;
}
@media (min-width: 900px) {
  body.layout-christmas.cl-page-sioux-city .cl-figpair {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
}

/* [SC] 05 mosaic, now nine tiles. The sixth tile no longer closes the block, so
   the old last child overrides are released. Three across through the tablet
   range and four across from 1024, where the lead already spans two by two and
   the eight remaining tiles fill three rows exactly. */
body.layout-christmas.cl-page-sioux-city .cl-mosaic--lead > figure:last-child {
  grid-column: auto;
}
body.layout-christmas.cl-page-sioux-city .cl-mosaic--lead > figure:last-child img {
  aspect-ratio: 16 / 9;
}
@media (min-width: 560px) and (max-width: 1023px) {
  body.layout-christmas.cl-page-sioux-city .cl-mosaic {
    grid-template-columns: repeat(3, 1fr);
  }
  body.layout-christmas.cl-page-sioux-city .cl-mosaic--lead > figure:first-child {
    grid-column: auto;
  }
  body.layout-christmas.cl-page-sioux-city .cl-mosaic--lead > figure:first-child img {
    aspect-ratio: 16 / 9;
  }
}
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-sioux-city .cl-mosaic {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* [SC] 05 color gallery. Held to a readable stage width so the section stays
   one screen of scrolling on a laptop. QA raised the cap from 560px: at 560
   the five frames read as a small island next to the rest of the page. 680 is
   the widest the stage can go before the taller frames push the gap between
   the work rung and the commercial rung past its limit at 1920. */
body.layout-christmas.cl-page-sioux-city #work .cl-patterns {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* [SC] the two new full width bands. The crew band carries the wide frame on a
   laptop and the narrow crop on a phone, and only one of the two is loaded. */
body.layout-christmas.cl-page-sioux-city .cl-bleed--crew {
  height: clamp(240px, 40vw, 480px);
}
body.layout-christmas.cl-page-sioux-city .cl-bleed--street {
  height: clamp(240px, 34vw, 660px);
}
body.layout-christmas.cl-page-sioux-city .cl-bleed img.cl-only-narrow {
  display: none;
}
@media (max-width: 559px) {
  body.layout-christmas.cl-page-sioux-city .cl-bleed img.cl-only-wide {
    display: none;
  }
  body.layout-christmas.cl-page-sioux-city .cl-bleed img.cl-only-narrow {
    display: block;
  }
  body.layout-christmas.cl-page-sioux-city .cl-bleed--street {
    height: 240px;
  }
}

/* [SC] the three new quote rungs. Each one is shown only in the width range
   where it keeps a full screen of clear air between it and its neighbors. */
body.layout-christmas.cl-page-sioux-city .cl-ctarow--com-desk {
  display: none;
}
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-sioux-city .cl-ctarow--com-desk {
    display: flex;
  }
}
body.layout-christmas.cl-page-sioux-city .cl-ctarow--com-narrow {
  display: flex;
}
@media (min-width: 800px) {
  body.layout-christmas.cl-page-sioux-city .cl-ctarow--com-narrow {
    display: none;
  }
}
body.layout-christmas.cl-page-sioux-city .cl-ctarow--towns-lead {
  display: none;
}
@media (min-width: 1280px) {
  body.layout-christmas.cl-page-sioux-city .cl-ctarow--towns-lead {
    display: flex;
  }
}
body.layout-christmas.cl-page-sioux-city .cl-ctarow--towns-end {
  display: flex;
}
@media (min-width: 768px) {
  body.layout-christmas.cl-page-sioux-city .cl-ctarow--towns-end {
    display: none;
  }
}

/* [SC] phone compaction, on the Sioux Falls pattern. The bold headline of a
   caption stays at phone width and only the trailing sentence comes off, so
   the three process strip captions read on a phone again. The sentences the
   trim removes elsewhere pay for the height that buys. */
@media (max-width: 559px) {
  body.layout-christmas.cl-page-sioux-city .cl-mosaic--lead > figure:first-child img {
    aspect-ratio: 26 / 10;
  }
  body.layout-christmas.cl-page-sioux-city .cl-mosaic--lead > figure:not(:first-child) figcaption {
    display: none;
  }
  body.layout-christmas.cl-page-sioux-city .cl-mosaic {
    gap: 0.5rem;
  }
  body.layout-christmas.cl-page-sioux-city .cl-cap-x {
    display: none;
  }
  body.layout-christmas.cl-page-sioux-city .cl-gallery--two figcaption {
    display: none;
  }
  body.layout-christmas.cl-page-sioux-city .cl-fig--cardprice figcaption {
    display: none;
  }
  body.layout-christmas.cl-page-sioux-city #work .cl-pat-cap {
    display: none;
  }
}
@media (max-width: 767px) {
  body.layout-christmas.cl-page-sioux-city .cl-patterns {
    margin-bottom: 0.8rem;
  }
  body.layout-christmas.cl-page-sioux-city .cl-figpair {
    margin-bottom: 0.2rem;
  }
}

/* ==========================================================================
   PATTERN GALLERY (the color changing gallery). Append this block to the END
   of rebuild2/phaseC/sf/append.css AND rebuild2/phaseC/sc/append.css, then
   copy each file over its served stylesheet exactly as CSS-SPLIT.txt section
   5 describes. The block is written once and carries BOTH page prefixes on
   every selector, so the same bytes go into both files with no editing. Do
   not rewrite the prefixes: a missing one means the component silently loses
   its layout on that city only.

   Paired with files/template/js/christmas-pattern-gallery.js and the markup
   in rebuild2/photo-plan/build/PATTERN-GALLERY.md.

   No JS, script blocked, or reduced motion: frame 1 shows on its own and the
   dots container stays empty, because the script builds the dot buttons. That
   is deliberate. Nothing inert ever ships.

   Layout shift: frame 1 sits in normal flow and carries width and height
   attributes, so the stage is the right height while the HTML is still
   parsing. Frames 2 and up are absolutely positioned and contribute no
   height. The script adds --cl-pat-ar from data-w and data-h as a second
   guard; it resolves to the same height, so nothing moves when it lands.

   Color: white dots, white focus ring, the night palette everywhere else.
   Nothing in this block is orange, and nothing may become orange. Orange on
   these pages belongs to the estimator button only.
   ========================================================================== */

body.layout-christmas.cl-page-sioux-falls .cl-patterns,
body.layout-christmas.cl-page-sioux-city .cl-patterns {
  display: block;
  width: 100%;
  margin: 0 0 1.5rem;
  border-radius: var(--cl-r-1);
}
body.layout-christmas.cl-page-sioux-falls .cl-patterns:focus-visible,
body.layout-christmas.cl-page-sioux-city .cl-patterns:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

/* The stage. Frame 1 in flow sets the height; --cl-pat-ar agrees with it. */
body.layout-christmas.cl-page-sioux-falls .cl-pat-stage,
body.layout-christmas.cl-page-sioux-city .cl-pat-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--cl-pat-ar, auto);
  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-pat-stage > figure,
body.layout-christmas.cl-page-sioux-city .cl-pat-stage > figure {
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease-in-out;
}
body.layout-christmas.cl-page-sioux-falls .cl-pat-stage > figure + figure,
body.layout-christmas.cl-page-sioux-city .cl-pat-stage > figure + figure {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
body.layout-christmas.cl-page-sioux-falls .cl-pat-stage > figure + figure > a,
body.layout-christmas.cl-page-sioux-city .cl-pat-stage > figure + figure > a,
body.layout-christmas.cl-page-sioux-falls .cl-pat-stage > figure + figure img,
body.layout-christmas.cl-page-sioux-city .cl-pat-stage > figure + figure img {
  height: 100%;
}
body.layout-christmas.cl-page-sioux-falls .cl-pat-stage figure > a,
body.layout-christmas.cl-page-sioux-city .cl-pat-stage figure > a {
  display: block;
}
/* height:auto matters. The width and height attributes on an img are
   presentational hints, so leaving height unset renders frame 1 at its natural
   pixel height inside a stage that is the right height, and the photo shows as
   a crop of itself. auto lets the attributes do the one job they are here for,
   which is holding the ratio while the file is still downloading. */
body.layout-christmas.cl-page-sioux-falls .cl-pat-stage img,
body.layout-christmas.cl-page-sioux-city .cl-pat-stage img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(0.95);
}

/* Frame 1 alone until the script is running, then whichever frame is on. */
body.layout-christmas.cl-page-sioux-falls .cl-pat-stage > figure:first-child,
body.layout-christmas.cl-page-sioux-city .cl-pat-stage > figure:first-child,
body.layout-christmas.cl-page-sioux-falls .cl-pat-stage > figure.is-on,
body.layout-christmas.cl-page-sioux-city .cl-pat-stage > figure.is-on {
  opacity: 1;
  pointer-events: auto;
}
body.layout-christmas.cl-page-sioux-falls .cl-pat--live .cl-pat-stage > figure:not(.is-on),
body.layout-christmas.cl-page-sioux-city .cl-pat--live .cl-pat-stage > figure:not(.is-on) {
  opacity: 0;
  pointer-events: none;
}

/* Per frame captions belong to the lightbox and to screen readers while the
   stage is running; the reduced motion grid below prints them. */
body.layout-christmas.cl-page-sioux-falls .cl-pat-stage figcaption,
body.layout-christmas.cl-page-sioux-city .cl-pat-stage figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Dots. Built by the script. 9px disc, 44px hit area, never orange. */
body.layout-christmas.cl-page-sioux-falls .cl-pat-dots,
body.layout-christmas.cl-page-sioux-city .cl-pat-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}
body.layout-christmas.cl-page-sioux-falls .cl-pat-dot,
body.layout-christmas.cl-page-sioux-city .cl-pat-dot {
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
body.layout-christmas.cl-page-sioux-falls .cl-pat-dot::after,
body.layout-christmas.cl-page-sioux-city .cl-pat-dot::after {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin: 0 auto;
  border-radius: 50%;
  background: #ffffff;
  opacity: 0.4;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
body.layout-christmas.cl-page-sioux-falls .cl-pat-dot[aria-current]::after,
body.layout-christmas.cl-page-sioux-city .cl-pat-dot[aria-current]::after {
  opacity: 1;
  transform: scale(1.3);
}
body.layout-christmas.cl-page-sioux-falls .cl-pat-dot:focus-visible,
body.layout-christmas.cl-page-sioux-city .cl-pat-dot:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -11px;
}
@media (hover: hover) {
  body.layout-christmas.cl-page-sioux-falls .cl-pat-dot:hover::after,
  body.layout-christmas.cl-page-sioux-city .cl-pat-dot:hover::after {
    opacity: 0.8;
  }
}

/* The one caption line under the whole component. */
body.layout-christmas.cl-page-sioux-falls .cl-pat-cap,
body.layout-christmas.cl-page-sioux-city .cl-pat-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-pat-cap,
  body.layout-christmas.cl-page-sioux-city .cl-pat-cap {
    font-size: 0.75rem;
  }
}

/* Reduced motion: no stage, no timer, no dots. Every frame at once, two up,
   each with its own caption. The script never runs in this mode. */
@media (prefers-reduced-motion: reduce) {
  body.layout-christmas.cl-page-sioux-falls .cl-pat-stage,
  body.layout-christmas.cl-page-sioux-city .cl-pat-stage {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cl-gap-tiles);
    aspect-ratio: auto;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
  }
  body.layout-christmas.cl-page-sioux-falls .cl-pat-stage > figure,
  body.layout-christmas.cl-page-sioux-city .cl-pat-stage > figure,
  body.layout-christmas.cl-page-sioux-falls .cl-pat-stage > figure + figure,
  body.layout-christmas.cl-page-sioux-city .cl-pat-stage > figure + figure {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }
  body.layout-christmas.cl-page-sioux-falls .cl-pat-stage figure > a,
  body.layout-christmas.cl-page-sioux-city .cl-pat-stage figure > a {
    overflow: hidden;
    border: 1px solid rgba(157, 180, 232, 0.14);
    border-radius: var(--cl-r-1);
    background-color: var(--cl-night-800);
  }
  /* Same shape of selector as the stacked rule above, so height really is
     released: a shorter selector would lose on specificity and the frames
     would still try to fill a stage that is no longer there. */
  body.layout-christmas.cl-page-sioux-falls .cl-pat-stage > figure + figure > a,
  body.layout-christmas.cl-page-sioux-city .cl-pat-stage > figure + figure > a,
  body.layout-christmas.cl-page-sioux-falls .cl-pat-stage > figure + figure img,
  body.layout-christmas.cl-page-sioux-city .cl-pat-stage > figure + figure img {
    height: auto;
  }
  body.layout-christmas.cl-page-sioux-falls .cl-pat-stage figcaption,
  body.layout-christmas.cl-page-sioux-city .cl-pat-stage figcaption {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    padding: 0.45rem 0.1rem 0;
    font-family: var(--cl-font-text);
    font-size: 0.8125rem;
    line-height: 1.45;
    letter-spacing: 0.02em;
    color: var(--cl-text-dim);
  }
  body.layout-christmas.cl-page-sioux-falls .cl-pat-dots,
  body.layout-christmas.cl-page-sioux-city .cl-pat-dots {
    display: none;
  }
  body.layout-christmas.cl-page-sioux-falls .cl-pat-cap,
  body.layout-christmas.cl-page-sioux-city .cl-pat-cap {
    margin-top: 0.7rem;
  }
}

/* [SC] QA. The street band is the one bleed that sits inside a band container,
   so the shared band paragraph rule was overriding its caption width and margin
   and pinning the words left, over the yard sign in the photo. Put it back on
   the same centered measure the crew and commercial captions already use. */
body.layout-christmas.cl-page-sioux-city .cl-bleed--street .cl-bleed-cap {
  width: var(--cl-shell-text);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* [SC] QA. Both footer badges load lazily now, so reserve the box each one will
   fill and keep the footer from shifting when they arrive. */
body.layout-christmas.cl-page-sioux-city .faves img:first-child {
  aspect-ratio: 3 / 2;
}
body.layout-christmas.cl-page-sioux-city .faves img:last-child {
  aspect-ratio: 15 / 13;
}

/* [SC] 2026-09-17 SECTION 02, THE PRICE BLOCK (owner review: "the right column
   is like lower and then the button on the left is lower, it's just weird, and
   then where it says rather talk to a person that's all centered off to the
   left"). Three defects above 960, all measured in REPORT.md:
     1. align-items:start aligns the columns' boxes, not their ink, so the lease
        heading started 39px above the card's first line. It borrows the card's
        top padding instead.
     2. The rung and the follow-up line sat under the WHOLE grid, 253px below the
        card, so the button hung in a hole with lease cards still to its right.
        .cl-priceblock wraps the grid and the two lines, .cl-pricegrid goes
        display:contents, and the rung and line are placed in column one under
        the card while the lease column spans the rows. Under 960 the wrapper is
        an ordinary div and the DOM is the phone layout that shipped, which the
        CTA cadence and the 390 height both depend on.
     3. .cl-after-cta is centered by the hub inside a 64ch box anchored at the
        band's left edge, under a left aligned button. Left aligned here. */
@media (min-width: 960px) {
  body.layout-christmas.cl-page-sioux-city .cl-priceblock {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-rows: auto auto auto 1fr;
    column-gap: var(--cl-gap-grid);
    row-gap: 0;
    margin-bottom: 1.5rem;
  }
  body.layout-christmas.cl-page-sioux-city .cl-priceblock > .cl-pricegrid { display: contents; }
  body.layout-christmas.cl-page-sioux-city .cl-priceblock > .cl-pricegrid > .cl-price {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }
  body.layout-christmas.cl-page-sioux-city .cl-priceblock > .cl-pricegrid > .cl-lease-col {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: start;
    padding-top: calc(var(--cl-pad-card) + 1px);
  }
  body.layout-christmas.cl-page-sioux-city .cl-priceblock > .cl-ctarow {
    grid-column: 1;
    grid-row: 2;
    margin: 1.25rem 0 0.55rem;
  }
  body.layout-christmas.cl-page-sioux-city .cl-priceblock > .cl-after-cta {
    grid-column: 1;
    grid-row: 3;
    max-width: none;
    text-align: left;
  }
}

/* [SC] 2026-09-16 HERO VIDEO. The drone loop behind the hero copy.
   The element is not in the HTML: the inline script at the end of the page
   builds it after the load event, at every width, and inserts it into
   .cl-hero-media between the <picture> and the .cl-hero-scrim. A video in the
   markup downloads even when it is display:none, so hiding one would not save
   the bytes; building it after load is the only way a viewer who opts out of
   motion, or who has data saver on, pays zero.
   These rules are deliberately unscoped, and stay that way. The 2026-09-22
   phone rung plays the 720x1280 portrait file in this same box and object-fit
   cover crops it, so no breakpoint was needed and none was added.
   It fills exactly the box .cl-hero-img fills and never a larger one, so its
   paint is equal in area to the still, no new largest-contentful-paint entry
   fires, and IMG.cl-hero-img stays the LCP element. Grow this box and that
   stops being true. No height !important is needed: the landmine at
   christmas-lights.css line 1936 is img{height:auto !important} in
   styles1.1.css, which cannot reach a video. */
body.layout-christmas.cl-page-sioux-city .cl-hero-video {
  position: absolute;
  /* THE ONE PIXEL LCP GUARD. At a width whose box height lands on a fraction
     (375 gives 234.375 and 281.25) the browser rounds the img rect down and
     leaves the video rect up, so the video measured 87890 against the img
     87750 and took largest contentful paint at 1244ms instead of 460ms. One
     CSS pixel off the top makes the video rect smaller than the img rect at
     every width, so the img always wins. The strip it gives back shows the
     still underneath at the same crop, under the 0.82 alpha top of the scrim
     and behind the nav bar, so nothing reads as a seam. */
  top: 1px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: calc(100% - 1px);
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
  background-color: var(--cl-night-900);
  opacity: 0;
  transition: opacity 600ms linear;
}
/* The fade runs on the playing event, so the still holds the frame until real
   motion is on screen and there is no black flash between the two. */
body.layout-christmas.cl-page-sioux-city .cl-hero-media.cl-hero-video-on .cl-hero-video {
  opacity: 1;
}
/* Belt and braces: the script already bails on reduce, so the element will not
   exist. This only covers a viewer who turns the setting on after load. */
@media (prefers-reduced-motion: reduce) {
  body.layout-christmas.cl-page-sioux-city .cl-hero-video { display: none; }
}

/* [SC] 2026-09-17 PAGE WALK, ROUND 1 (owner review: "just throughout the entire
   page a lot of really weird spacings"). Walked 1920, 1440, 1280, 1200, 1024,
   900, 768 and 390. What each rule found, and the numbers, are in REPORT.md next
   to this file. No rung leaves its content block and no orange is added.

   01 timeline. christmas-lights.css 2802 asks for flex-start from 900, but
   .cl-expand summary (4427) ties on specificity and wins on order, so the five
   steps computed center: the disc belongs centered on the rail, the heading does
   not, and step 4 is one line so it alone sat in the middle. */
@media (min-width: 900px) {
  body.layout-christmas.cl-page-sioux-city .cl-timeline summary { align-items: flex-start; justify-content: flex-start; }
  body.layout-christmas.cl-page-sioux-city .cl-timeline summary .cl-num { margin-left: auto; margin-right: auto; }
}

/* Offer strip. The six verbs measure 1185px in an 1180px shell, so the sixth
   wrapped alone with its dot. 1.35rem of side padding to 1.1rem returns 48px. */
@media (min-width: 1200px) {
  body.layout-christmas.cl-page-sioux-city .cl-offerstrip li { padding-left: 1.1rem; padding-right: 1.1rem; }
}

@media (min-width: 768px) {
  /* 03. align-items:end bottom aligned the boxes, so the 3.4rem rating numeral
     sat 33px under the three 2.4rem stat numerals. */
  body.layout-christmas.cl-page-sioux-city .cl-statstrip { align-items: baseline; }
  /* 03. .cl-band p beats .cl-verify, so the hub's 1.25rem computed 0 and the
     green ruled aside touched the screenshot above it. */
  body.layout-christmas.cl-page-sioux-city .cl-verify { margin-top: 1.25rem; }
  /* 09. The two rows of town chips ended flush on the paragraph under them.
     Phones keep 0: the 390 document has 17px left against its budget. */
  body.layout-christmas.cl-page-sioux-city #towns .cl-towns { margin-bottom: 1.1rem; }
}

/* 06. The rung had 24px above and 18px below, so it read as the caption of the
   photo pair under it. It cannot move (at the end of the band the 6 to 6b gap
   measures 2,092 against 1,813.7 at 1440), so the air moves: 24 and 35. */
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-sioux-city .cl-ctarow--com-desk { margin-bottom: 2.2rem; }
}

/* 08. .cl-inner > h3 (christmas-lights.css 1042) put 40px between the eyebrow
   and its own heading against 14.4px everywhere else. The phone block already
   zeroed it under 768. Takes 40px off the document from 768 up. */
body.layout-christmas.cl-page-sioux-city #january .cl-inner > h3 { margin-top: 0; }

/* 09. The lead rung closes the band's first block and the full bleed photo opens
   18px under it. The gallery's 24px instead. */
@media (min-width: 1280px) {
  body.layout-christmas.cl-page-sioux-city .cl-ctarow--towns-lead { margin-bottom: 1.5rem; }
}

/* === [SC] PAGE WALK 2 (2026-09-17). Why, per section: sc-fix/REPORT.md. === */
/* 02: round 1's text-align was trapped in a min-width:960 block. */
body.layout-christmas.cl-page-sioux-city .cl-after-cta { text-align: left; }
/* 01 strip: the dot moves to the previous item's right edge, so no wrapped line
   opens with an orphan. Identical render on one line. */
body.layout-christmas.cl-page-sioux-city .cl-offerstrip li + li::before { content: none; }
body.layout-christmas.cl-page-sioux-city .cl-offerstrip li:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: -2.5px; width: 5px; height: 5px;
  border-radius: 50%; background-color: var(--cl-bulb); box-shadow: var(--cl-glow-dot);
  transform: translateY(-50%);
}
/* 01 steps: step 4's summary is 96 tall against 118, so its body sat 21px high.
   Subgrid gives all five summaries one row height. Nothing moves under 900. */
@media (min-width: 900px) {
  body.layout-christmas.cl-page-sioux-city .cl-timeline { grid-template-rows: auto auto; }
  body.layout-christmas.cl-page-sioux-city .cl-timeline > details {
    display: grid; grid-row: span 2; grid-template-rows: subgrid;
  }
}

/* [SC] 2026-09-22 COMMERCIAL WORK ALL AROUND. Six tiles under the tree pair:
   the downtown atrium plus five from the railroad museum. A snap strip on a
   phone, because .cl-scroll-x (13.1) already turns a grid into a flex rail
   under 768, so six tiles cost one tile of height instead of three rows of
   it. flex-basis is inert on a grid item, so the basis needs no unset at 768.
   Captions come off under 560 exactly as the tree pair captions already do. */
body.layout-christmas.cl-page-sioux-city .cl-gallery--com > figure { flex: 0 0 58vw; }
@media (min-width: 768px) {
  body.layout-christmas.cl-page-sioux-city .cl-gallery--com { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 559px) {
  body.layout-christmas.cl-page-sioux-city .cl-gallery--com figcaption { display: none; }
}

/* [SC] 2026-09-22 COMMERCIAL PHOTOS: four-up how strip + eight-up gallery.
   01 process strip takes a fourth tile, the installer on the ladder. The base
   rule above (SC PHOTOS 2026-09-16) made the LAST figure the full width closer
   of a two column strip at 26/10; with four tiles that closer is no longer
   wanted, so the two overrides below hand the last figure an ordinary cell and
   the strip's own 16/9. Column counts: 2 on a phone from the base rule, 2 held
   from 768 to 999 so a tablet tile stays big instead of dropping to a quarter
   of a 768 viewport, then 4 from 1000 up. The 768 rule has to restate 2 because
   the base rule steps to 3 there.
   06 commercial gallery takes tiles 7 and 8. The base is a snap rail under 768
   and 3 columns from 768, which leaves 8 tiles as 3 + 3 + 2; from 1240 it goes
   to 4 columns so the last row is full. */
body.layout-christmas.cl-page-sioux-city .cl-gallery--three.cl-gallery--four-up > figure:last-child {
  grid-column: auto;
}
body.layout-christmas.cl-page-sioux-city .cl-gallery--three.cl-gallery--four-up > figure:last-child img {
  aspect-ratio: 16 / 9;
}
@media (min-width: 768px) {
  body.layout-christmas.cl-page-sioux-city .cl-gallery--three.cl-gallery--four-up {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  body.layout-christmas.cl-page-sioux-city .cl-gallery--three.cl-gallery--four-up {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1240px) {
  body.layout-christmas.cl-page-sioux-city .cl-gallery--com.cl-gallery--eight-up {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* [SC] 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 +7px of document height (13,549 to 13,556), and +80px at 320 where the headings are narrowest.

   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-city .cl-mascot--price,
  body.layout-christmas.cl-page-sioux-city .cl-mascot--date,
  body.layout-christmas.cl-page-sioux-city .cl-mascot--jan,
  body.layout-christmas.cl-page-sioux-city .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-city .cl-mascot--price { width: 60px; filter: drop-shadow(0 8px 10px rgba(20, 30, 60, .20)); }
  body.layout-christmas.cl-page-sioux-city .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-city .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-city .cl-mascot--close { width: 58px; filter: saturate(.84) brightness(.96) contrast(1.02) drop-shadow(0 0 8px rgba(255, 198, 112, .28)); }
  /* the notch. One value for all four so the text rag stays even down the page. */
  body.layout-christmas.cl-page-sioux-city #price .cl-eyebrow,
  body.layout-christmas.cl-page-sioux-city #price .cl-eyebrow + h2,
  body.layout-christmas.cl-page-sioux-city #date .cl-eyebrow,
  body.layout-christmas.cl-page-sioux-city #date .cl-eyebrow + h2,
  body.layout-christmas.cl-page-sioux-city #january .cl-eyebrow,
  body.layout-christmas.cl-page-sioux-city #january .cl-eyebrow + h3,
  body.layout-christmas.cl-page-sioux-city #close .cl-eyebrow,
  body.layout-christmas.cl-page-sioux-city #close .cl-eyebrow + h2 { margin-right: 80px; }
  /* the floor under a short heading (see above) */
  body.layout-christmas.cl-page-sioux-city #price .cl-eyebrow + h2,
  body.layout-christmas.cl-page-sioux-city #date .cl-eyebrow + h2,
  body.layout-christmas.cl-page-sioux-city #close .cl-eyebrow + h2 { min-height: 56px; }
  body.layout-christmas.cl-page-sioux-city #january .cl-inner--text:first-of-type { min-height: 88px; }
}
@media (max-width: 359px) {
  body.layout-christmas.cl-page-sioux-city .cl-mascot--price { width: 52px; }
  body.layout-christmas.cl-page-sioux-city .cl-mascot--date { width: 55px; }
  body.layout-christmas.cl-page-sioux-city .cl-mascot--jan { width: 41px; }
  body.layout-christmas.cl-page-sioux-city .cl-mascot--close { width: 50px; }
  body.layout-christmas.cl-page-sioux-city #price .cl-eyebrow,
  body.layout-christmas.cl-page-sioux-city #price .cl-eyebrow + h2,
  body.layout-christmas.cl-page-sioux-city #date .cl-eyebrow,
  body.layout-christmas.cl-page-sioux-city #date .cl-eyebrow + h2,
  body.layout-christmas.cl-page-sioux-city #january .cl-eyebrow,
  body.layout-christmas.cl-page-sioux-city #january .cl-eyebrow + h3,
  body.layout-christmas.cl-page-sioux-city #close .cl-eyebrow,
  body.layout-christmas.cl-page-sioux-city #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-city .cl-mascot--date { right: auto; left: max(1.3rem, calc(50% - 590px)); }
  body.layout-christmas.cl-page-sioux-city .cl-mascot--close { right: auto; left: max(1.3rem, calc(50% - 590px)); }
  body.layout-christmas.cl-page-sioux-city #date .cl-eyebrow,
  body.layout-christmas.cl-page-sioux-city #date .cl-eyebrow + h2 { margin-right: 0; margin-left: 80px; }
  body.layout-christmas.cl-page-sioux-city #close .cl-eyebrow,
  body.layout-christmas.cl-page-sioux-city #close .cl-eyebrow + h2 { margin-right: 0; margin-left: 80px; }
}
@media (max-width: 359px) {
  body.layout-christmas.cl-page-sioux-city #date .cl-eyebrow,
  body.layout-christmas.cl-page-sioux-city #date .cl-eyebrow + h2 { margin-right: 0; margin-left: 68px; }
  body.layout-christmas.cl-page-sioux-city #close .cl-eyebrow,
  body.layout-christmas.cl-page-sioux-city #close .cl-eyebrow + h2 { margin-right: 0; margin-left: 68px; }
}
*/

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

/* [SC] 2026-09-23 DESKTOP LAYOUT, 01 HOW IT WORKS AND 02 WHAT IT COSTS. Lance,
   reviewing desktop: "everything's kind of all justified over to the left" and
   "the area number two on desktop ... the column on the right starts way down
   below". Area two is the band marked 02 / What it costs; in 01 all three step
   bodies already start on one line. Every rule below sits inside a min-width
   query of 900 or 1024, so phones and the 768 to 899 tablet layout do not move.
   Measurements and before/after shots: polish/sc-desk-layout/NOTES.md.

   01 timeline, from 900. christmas-lights.css lays the rail out as
   repeat(5, 1fr), written for five steps. This page has three, so they filled
   the left 700px of the 1180px shell, two empty columns ran on to the right, and
   each disc was centered over left aligned text. The columns now follow the step
   count, each disc sits on its text's left edge, and the rail drops to the discs'
   center (0.75rem summary padding plus half the 1.9rem disc, less half the 1px
   rule; it sat 2.7px high). The row gap under the headings goes from 1.3rem to
   0.15rem, so a heading sits 14px above its paragraph instead of 33px. */
@media (min-width: 900px) {
  body.layout-christmas.cl-page-sioux-city #how .cl-timeline {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    column-gap: var(--cl-gap-grid);
    row-gap: 0.15rem;
  }
  body.layout-christmas.cl-page-sioux-city #how .cl-timeline:before { top: calc(1.7rem - 0.5px); }
  body.layout-christmas.cl-page-sioux-city #how .cl-timeline summary .cl-num { margin-left: 0; margin-right: 0; }
}

/* 01 intro, from 1024. The headline, deck and both paragraphs stacked down a
   610 to 770px measure with the right half of the band empty. Headline and deck
   now hold the left 40 percent, which breaks the headline after "Works," at
   every width from 1024 up, and the two paragraphs sit flush right at 54
   percent, the same 611px measure they had at 1440. The timeline clears both. */
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-sioux-city #how .cl-inner > h2.wide,
  body.layout-christmas.cl-page-sioux-city #how .cl-inner > .cl-deck {
    float: left;
    clear: left;
    width: calc((100% - var(--cl-gap-grid)) * 0.4);
    max-width: none;
  }
  body.layout-christmas.cl-page-sioux-city #how .cl-inner > .cl-lead,
  body.layout-christmas.cl-page-sioux-city #how .cl-inner > .cl-lead + p {
    width: calc((100% - var(--cl-gap-grid)) * 0.54);
    max-width: none;
    margin-left: auto;
    margin-right: 0;
  }
  body.layout-christmas.cl-page-sioux-city #how .cl-timeline { clear: both; }
}

/* 02 price block, from 1024. The 2026-09-17 grid lined the lease column up with
   the price card, but the card sits under the headline and both intro
   paragraphs, so the right column still opened 600px down the band with only
   the mascot above it. Here the two intro paragraphs join the card, the rung and
   the follow-up line in a left column at the grid's own 52.5 percent (1.05fr of
   2), and the lease column rises level with the first paragraph, 41 to 77px
   below the mascot's feet at every width measured from 1024 to 1920.
   .cl-priceblock goes display:contents so its children float in the band, the
   photo clears both columns, and the follow-up line carries the 1.5rem the
   block's own margin used to leave above the photo. 960 to 1023 keeps the grid:
   the photo is still inside the card there and the mascot is hidden. */
@media (min-width: 1024px) {
  body.layout-christmas.cl-page-sioux-city #price .cl-priceblock { display: contents; }
  body.layout-christmas.cl-page-sioux-city #price .cl-inner > h2 + .cl-lead,
  body.layout-christmas.cl-page-sioux-city #price .cl-inner > h2 + .cl-lead + p,
  body.layout-christmas.cl-page-sioux-city #price .cl-priceblock > .cl-pricegrid > .cl-price,
  body.layout-christmas.cl-page-sioux-city #price .cl-priceblock > .cl-ctarow,
  body.layout-christmas.cl-page-sioux-city #price .cl-priceblock > .cl-after-cta {
    float: left;
    clear: left;
    width: calc((100% - var(--cl-gap-grid)) * 0.525);
    max-width: none;
  }
  body.layout-christmas.cl-page-sioux-city #price .cl-priceblock > .cl-after-cta { margin-bottom: 1.5rem; }
  body.layout-christmas.cl-page-sioux-city #price .cl-priceblock > .cl-pricegrid > .cl-lease-col {
    margin-left: calc((100% - var(--cl-gap-grid)) * 0.525 + var(--cl-gap-grid));
    padding-top: 0;
  }
  body.layout-christmas.cl-page-sioux-city #price .cl-fig--deskprice { clear: both; }
}
/* [SC] /2026-09-23 DESKTOP LAYOUT */

/* [SC] 2026-09-23 STIFF2. "Swipe for all four." in the #price caption names the phone card rail.
   Shared 8.16 swaps the rail for the four-column table at 760 (measured: rail and swipe up to 759,
   table from 760, nothing to swipe), so the phrase leaves with the rail. .hide-sm would switch at
   768 and leave 760 to 767 wrong. Phone rendering is untouched. */
@media (min-width: 760px) {
  body.layout-christmas.cl-page-sioux-city .cl-swipe-hint { display: none; }
}

/* ==========================================================================
   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-city #close .cl-closegrid { grid-template-columns: minmax(0, 1fr) minmax(calc(170px + 1.5rem + 22.4rem), 1fr); }
  body.layout-christmas.cl-page-sioux-city #close .cl-closegrid > div:last-child { padding-left: calc(170px + 1.5rem); }
  body.layout-christmas.cl-page-sioux-city #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-city #close .cl-closegrid { grid-template-columns: minmax(0, 1fr) minmax(calc(180px + 1.5rem + 22.4rem), 1fr); }
  body.layout-christmas.cl-page-sioux-city #close .cl-closegrid > div:last-child { padding-left: calc(180px + 1.5rem); }
  body.layout-christmas.cl-page-sioux-city #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)); }
}