/* =====================================================================
   XMAS-BANNER-v1: seasonal Christmas hero on the HOMEPAGE ONLY.
   Linked from index.html inside the XMAS-BANNER-v1:css sentinel, and
   nowhere else. scripts/xmas-banner.js "off" mode (Dec 26 by cron,
   .github/workflows/xmas-banner.yml) removes the link, the hero and the
   preload and restores the year-round lawn hero; this file can then stay
   on disk unused until next season.

   The house photo's own roofline lights switch on in a wave from the
   main gable apex. Everything is scoped under header.container.xb-hero
   (xb- prefix on every class, keyframe and @property). Nothing here
   touches another element.

   Workarounds that look odd but are load-bearing:
   - the switch focus ring is !important because styles1.1.css has
     button:focus { outline: none !important }
   - .xb-photo-img uses aspect-ratio: inherit because styles1.1.css forces
     img { height: auto !important }
   - .xb-stage is clipped 1px inside the photo so the photo, not the
     lights layer, stays the page's LCP element
   - the dusk (.is-off) state is set by an inline script at the top of the
     header, before first paint; reduced motion and JS off show the house
     fully lit
   - nothing here goes above z-index 4; #nav is 99

   States (set by the one small script):
     (none)   fully lit, still. JS off, reduced motion, and after the run.
     .xb-js   the wall switch is shown.
     .is-off  dusk: the photo dimmed, its bulbs covered, the strand dark.
     .is-on   the reveal plays once (about 2.7s).
   Layers inside the header, back to front: field -> .xb-photo (LCP img +
   the lights stage) -> .xb-strand (C9) -> .xb-switch -> .xb-inner (copy).
   The next section's swoosh overhangs the bottom of this header by 9vw,
   so the copy keeps 9vw + a margin of bottom padding at every width.
   ===================================================================== */
header.container.xb-hero {
  --xb-field-top: #1b1f34;
  --xb-field-mid: #070910;
  --xb-field-bot: #0a0d17;
  --xb-ink: #fff7e8;
  --xb-body: #e8e1d3;
  --xb-dim: #c9c1b2;
  --xb-gold: #ffd88a;
  --xb-rule: rgba(255, 216, 138, 0.26);
  --xb-lid: 9vw;
  position: relative;
  overflow: hidden;
  min-height: 0;
  color: var(--xb-ink);
  background-color: var(--xb-field-mid);
  background-image:
    radial-gradient(120% 70% at 0% 0%, rgba(43, 52, 92, 0.55), rgba(43, 52, 92, 0) 60%),
    linear-gradient(180deg, var(--xb-field-top) 0%, var(--xb-field-mid) 48%, var(--xb-field-bot) 100%);
}

/* ---------- photo (LCP) ---------- */
header.container.xb-hero .xb-photo {
  display: block;
  position: relative;
  z-index: 0;
  margin: 0;
  aspect-ratio: 4 / 3;
  min-height: 0; /* let the frame, not the 4:3 image inside it, set the height */
  width: 100%;
}
header.container.xb-hero .xb-photo-img {
  display: block;
  /* styles1.1.css forces img{height:auto !important}, so height:100% cannot
     crop. The img takes its frame's ratio instead and object-fit does the rest. */
  aspect-ratio: inherit;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 45%;
}
/* The photo's lawn melts into the field so the copy can sit on it. */
header.container.xb-hero .xb-photo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 34%;
  background: linear-gradient(180deg, rgba(7, 9, 16, 0) 0%, rgba(7, 9, 16, 0.72) 55%, var(--xb-field-mid) 100%);
  pointer-events: none;
}
@media (min-width: 700px) {
  header.container.xb-hero .xb-photo { aspect-ratio: 3500 / 2250; }
  header.container.xb-hero .xb-photo-img { object-position: 50% 50%; }
}

/* ---------- the real lights, switching on ----------
   Three layers sit exactly over the photo, cut from the same file the
   browser picked for it (JS sets --xb-lu / --xb-su):
     shade  the roof behind each bulb, pre-dimmed: hides the bulbs while off
     lit    the photo's own bulbs and their glow, nothing else
     flash  the same bulbs again, plus-lighter, only in a thin ring just
            behind the wave front, so each bulb overshoots once and settles
   A radial wave (--xb-r, in photo widths) grows from the main gable apex.
   .xb-stage is the img's box; .xb-ibox redoes object-fit: cover and
   object-position inside it, so the layers land on the same pixels. */
@property --xb-r { syntax: '<number>'; inherits: true; initial-value: 3; }
@property --xb-sr { syntax: '<length>'; inherits: true; initial-value: 0px; }
header.container.xb-hero {
  --xb-t0: .3s;        /* switch clicks, then the apex bulb */
  --xb-wave: 1.45s;    /* apex to the last bulb */
  --xb-house: 1.2s;    /* the rest of the house eases up, from 80% of the wave */
  --xb-ar: 1.33333;    /* JS refines from the loaded file */
  --xb-ax: 49.8%;
  --xb-ay: 21.013%;
  --xb-opx: .5;
  --xb-opy: .45;
  --xb-rmax: .54;
  --xb-sp: .0115;      /* one bulb pitch, in photo widths */
}
header.container.xb-hero .xb-pic {
  display: block;
  aspect-ratio: inherit;
  width: 100%;
  height: 100%;
}
header.container.xb-hero .xb-stage {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* LCP guard: keep every layer's painted box a hair smaller than the photo,
     so the lights never replace the photo as the page's LCP element */
  clip-path: inset(1px 1px);
  pointer-events: none;
  container-type: size;
}
header.container.xb-hero.is-off .xb-stage,
header.container.xb-hero.is-on .xb-stage { display: block; }
header.container.xb-hero .xb-ibox {
  --xb-iw: max(100cqw, calc(100cqh * var(--xb-ar)));
  --xb-ih: max(100cqh, calc(100cqw / var(--xb-ar)));
  position: absolute;
  width: var(--xb-iw);
  height: var(--xb-ih);
  left: calc((100cqw - var(--xb-iw)) * var(--xb-opx));
  top: calc((100cqh - var(--xb-ih)) * var(--xb-opy));
  container-type: inline-size;
  --xb-soft: calc(var(--xb-sp) * 1.3);
  --xb-f: calc(var(--xb-sp) * 7);
}
header.container.xb-hero .xb-l {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--xb-lu) 0 0 / 100% 100% no-repeat;
}
header.container.xb-hero .xb-l-shade {
  background-image: var(--xb-su);
  -webkit-mask-image: radial-gradient(circle at var(--xb-ax) var(--xb-ay), transparent calc((var(--xb-r) - var(--xb-soft)) * 100cqw), #000 calc(var(--xb-r) * 100cqw));
  mask-image: radial-gradient(circle at var(--xb-ax) var(--xb-ay), transparent calc((var(--xb-r) - var(--xb-soft)) * 100cqw), #000 calc(var(--xb-r) * 100cqw));
}
header.container.xb-hero .xb-l-lit {
  -webkit-mask-image: radial-gradient(circle at var(--xb-ax) var(--xb-ay), #000 calc((var(--xb-r) - var(--xb-soft)) * 100cqw), transparent calc(var(--xb-r) * 100cqw));
  mask-image: radial-gradient(circle at var(--xb-ax) var(--xb-ay), #000 calc((var(--xb-r) - var(--xb-soft)) * 100cqw), transparent calc(var(--xb-r) * 100cqw));
}
header.container.xb-hero .xb-l-flash {
  display: none;
  mix-blend-mode: plus-lighter;
  filter: blur(calc(var(--xb-sp) * 12cqw)) brightness(1.35);
  -webkit-mask-image: radial-gradient(circle at var(--xb-ax) var(--xb-ay), transparent calc((var(--xb-r) - var(--xb-f)) * 100cqw), rgba(0, 0, 0, .3) calc((var(--xb-r) - var(--xb-f) * .45) * 100cqw), #000 calc((var(--xb-r) - var(--xb-soft)) * 100cqw), transparent calc(var(--xb-r) * 100cqw));
  mask-image: radial-gradient(circle at var(--xb-ax) var(--xb-ay), transparent calc((var(--xb-r) - var(--xb-f)) * 100cqw), rgba(0, 0, 0, .3) calc((var(--xb-r) - var(--xb-f) * .45) * 100cqw), #000 calc((var(--xb-r) - var(--xb-soft)) * 100cqw), transparent calc(var(--xb-r) * 100cqw));
}
header.container.xb-hero.is-on .xb-l-flash { display: block; }

/* off: our real lit photo, dimmed and desaturated toward dusk, bulbs hidden */
header.container.xb-hero.is-off .xb-ibox { --xb-r: -.05; }
header.container.xb-hero.is-off .xb-photo-img { filter: saturate(.5) brightness(.34); }
header.container.xb-hero.is-on .xb-ibox {
  animation: xb-wave var(--xb-wave) cubic-bezier(.3, .1, .6, 1) var(--xb-t0) both;
}
header.container.xb-hero.is-on .xb-photo-img {
  animation: xb-house calc(var(--xb-wave) * .8 + var(--xb-house)) linear var(--xb-t0) both;
}
@keyframes xb-wave {
  from { --xb-r: -.02; }
  to   { --xb-r: calc(var(--xb-rmax) + var(--xb-f) + .02); }
}
@keyframes xb-house {
  0%   { filter: saturate(.5) brightness(.34); }
  49%  { filter: saturate(.56) brightness(.43); animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
  100% { filter: saturate(1) brightness(1); }
}

/* ---------- the C9 strand along the top edge ----------
   One number drives the device: font-size. 1em = 4px on desktop gives a
   48px bulb pitch; 3px on a phone gives 36px. The tile is two bulbs wide
   and the strand is center-anchored, so a bulb always sits on the
   center line and the spacing runs out equally both ways. It powers up
   from that center bulb outward, one bulb a side per step, in time with
   the house (--xb-sn = bulbs per side, set by JS). */
header.container.xb-hero .xb-strand {
  --tw: 24em;
  --th: 11em;
  --bpx: calc(50% + 6em);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: var(--th);
  font-size: 3px;
  line-height: 0;
  pointer-events: none;
  background: url(/files/account/images/design/xmas-banner-c9-off.svg) var(--bpx) 0 / var(--tw) var(--th) repeat-x;
}
header.container.xb-hero .xb-strand-lit {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--th) + 10em);
}
header.container.xb-hero .xb-strand-lit i {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: repeat-x;
  background-position: var(--bpx) 0;
  background-size: var(--tw) calc(var(--th) + 10em);
}
header.container.xb-hero .xb-strand-lit .xb-bulbs {
  bottom: auto;
  height: var(--th);
  background-image: url(/files/account/images/design/xmas-banner-c9-lit.svg);
  background-size: var(--tw) var(--th);
}
/* halos: two phases so neighboring bulbs never pulse together */
header.container.xb-hero .xb-halo-a {
  background-image: radial-gradient(9em 9em at 6em 5.4em, rgba(255, 208, 120, .55) 0, rgba(255, 196, 100, .22) 45%, rgba(255, 190, 90, 0) 100%);
  animation: xb-glow 7.5s ease-in-out infinite;
}
header.container.xb-hero .xb-halo-b {
  background-image: radial-gradient(9em 9em at 18em 5.4em, rgba(255, 208, 120, .55) 0, rgba(255, 196, 100, .22) 45%, rgba(255, 190, 90, 0) 100%);
  animation: xb-glow 9s ease-in-out -4.4s infinite;
}
@keyframes xb-glow {
  0%, 100% { opacity: .55; }
  46%      { opacity: 1; }
  74%      { opacity: .78; }
}
/* Each step widens a centered mask by one bulb a side. The bulbs cut
   cleanly at the half-pitch; the halos feather, so no hard glow edge. */
header.container.xb-hero.is-off .xb-strand-lit,
header.container.xb-hero.is-on .xb-strand-lit { --xb-sr: -6em; }
header.container.xb-hero.is-off .xb-strand-lit i,
header.container.xb-hero.is-on .xb-strand-lit i {
  -webkit-mask: linear-gradient(#000, #000) 50% 0 / max(0px, calc(var(--xb-sr) * 2)) 100% no-repeat;
  mask: linear-gradient(#000, #000) 50% 0 / max(0px, calc(var(--xb-sr) * 2)) 100% no-repeat;
}
header.container.xb-hero.is-off .xb-strand-lit .xb-halo,
header.container.xb-hero.is-on .xb-strand-lit .xb-halo {
  -webkit-mask: linear-gradient(90deg, transparent, #000 4em, #000 calc(100% - 4em), transparent) 50% 0 / max(0px, calc(var(--xb-sr) * 2 + 8em)) 100% no-repeat;
  mask: linear-gradient(90deg, transparent, #000 4em, #000 calc(100% - 4em), transparent) 50% 0 / max(0px, calc(var(--xb-sr) * 2 + 8em)) 100% no-repeat;
}
header.container.xb-hero.is-on .xb-strand-lit {
  animation: xb-strand var(--xb-wave) steps(var(--xb-sn, 16), jump-start) var(--xb-t0) both;
}
@keyframes xb-strand {
  from { --xb-sr: -6em; }
  to   { --xb-sr: calc(-6em + var(--xb-sn, 16) * 12em); }
}

/* ---------- the wall switch (replays the reveal) ---------- */
header.container.xb-hero .xb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
header.container.xb-hero button.xb-switch {
  all: unset;
  position: absolute;
  z-index: 4;
  top: 3.1rem;
  right: .9rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .55rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
header.container.xb-hero:not(.xb-js) button.xb-switch { display: none; }
header.container.xb-hero button.xb-switch:focus-visible {
  /* !important: styles1.1.css has button:focus { outline: none !important } */
  outline: 3px solid var(--xb-gold) !important;
  outline-offset: 5px;
  border-radius: 8px;
}
header.container.xb-hero .xb-plate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 32px;
  height: 50px;
  padding: 5px 0;
  border-radius: 6px;
  background: linear-gradient(160deg, #faf7f0 0, #e7e0d2 55%, #d3cbba 100%);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .35), inset 0 1px 0 #fff, inset 0 -2px 3px rgba(0, 0, 0, .14);
  transition: transform .15s ease;
}
header.container.xb-hero button.xb-switch:hover .xb-plate { transform: translateY(-2px); }
header.container.xb-hero .xb-screw {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, transparent 44%, #6e6758 44% 56%, transparent 56%), radial-gradient(circle at 35% 35%, #d8d1c1, #948b78);
}
header.container.xb-hero .xb-slot {
  position: relative;
  width: 11px;
  height: 21px;
  border-radius: 3px;
  background: linear-gradient(#1b1813, #3a342b);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .6);
}
header.container.xb-hero .xb-lever {
  position: absolute;
  left: 1.5px;
  top: 2px;
  width: 8px;
  height: 11px;
  border-radius: 2px;
  background: linear-gradient(#fffdf8, #d9d1c0);
  box-shadow: 0 -2px 3px rgba(0, 0, 0, .35), inset 0 -2px 0 rgba(0, 0, 0, .08);
  transition: transform .14s cubic-bezier(.5, 1.8, .5, 1);
}
header.container.xb-hero.is-off .xb-lever { transform: translateY(6px); }
header.container.xb-hero .xb-cap {
  font: 700 .68rem/1 'Titillium Web', sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--xb-dim);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
}
/* both captions share one grid cell, so the button keeps one width and the
   plate never jumps when the caption changes */
header.container.xb-hero .xb-cap { display: grid; justify-items: end; }
header.container.xb-hero .xb-cap > span {
  grid-area: 1 / 1;
  /* a small night-tinted chip keeps the caption at AA over any part of the
     photo, including the bright sky the narrow crops put behind it */
  padding: .38em .5em .38em .62em;
  border-radius: 999px;
  background: rgba(8, 10, 20, .62);
}
header.container.xb-hero .xb-cap-off { visibility: hidden; }
header.container.xb-hero.is-off .xb-cap-on { visibility: hidden; }
header.container.xb-hero.is-off .xb-cap-off { visibility: visible; color: var(--xb-gold); }
@media (min-width: 700px) {
  header.container.xb-hero {
    --xb-ar: 1.55529;
    --xb-ax: 58.984%;
    --xb-ay: 21.871%;
    --xb-opx: .5;
    --xb-opy: .5;
    --xb-rmax: .425;
    --xb-sp: .009;
  }
  header.container.xb-hero button.xb-switch { top: 4rem; right: 1.5rem; flex-direction: column; gap: .45rem; }
  header.container.xb-hero .xb-plate { width: 46px; height: 74px; padding: 7px 0; border-radius: 7px; }
  header.container.xb-hero .xb-screw { width: 6px; height: 6px; }
  header.container.xb-hero .xb-slot { width: 14px; height: 30px; }
  header.container.xb-hero .xb-lever { left: 2px; width: 10px; height: 15px; }
  header.container.xb-hero.is-off .xb-lever { transform: translateY(11px); }
  header.container.xb-hero .xb-cap { font-size: .72rem; letter-spacing: .16em; justify-items: center; }
}
@media (min-width: 1024px) {
  header.container.xb-hero { --xb-opx: 0; --xb-opy: .42; }
  /* the img here keeps its natural ratio from the top of the frame, so the
     stage does too (the frame can run taller than the photo) */
  header.container.xb-hero .xb-stage { height: auto; aspect-ratio: var(--xb-ar); }
  header.container.xb-hero button.xb-switch { top: 4.5rem; right: 2rem; }
}

/* the headline's "Lit" glows with the house */
header.container.xb-hero.xb-js .xb-glow { transition: text-shadow .5s ease; }
header.container.xb-hero.is-off .xb-glow {
  text-shadow: 0 0 10px rgba(255, 214, 140, 0), 0 0 28px rgba(255, 180, 80, 0), 0 0 60px rgba(255, 160, 60, 0);
  transition: none;
}
header.container.xb-hero.is-on .xb-glow {
  animation: xb-lit-word .9s ease-out var(--xb-t0) both;
}
@keyframes xb-lit-word {
  from { text-shadow: 0 0 10px rgba(255, 214, 140, 0), 0 0 28px rgba(255, 180, 80, 0), 0 0 60px rgba(255, 160, 60, 0); }
  35%  { text-shadow: 0 0 12px rgba(255, 224, 160, .95), 0 0 34px rgba(255, 190, 90, .75), 0 0 70px rgba(255, 160, 60, .5); }
  to   { text-shadow: 0 0 10px rgba(255, 214, 140, .75), 0 0 28px rgba(255, 180, 80, .55), 0 0 60px rgba(255, 160, 60, .35); }
}

/* ---------- copy ---------- */
/* styles1.1.css hides every header p that lacks .has-button (the lawn hero
   keeps its microcopy inside .box). Our paragraphs opt back in. */
header.container.xb-hero .xb-deck,
header.container.xb-hero .xb-cities,
header.container.xb-hero .xb-facts,
header.container.xb-hero .xb-lawn-kicker { display: block; }
header.container.xb-hero .xb-inner {
  position: relative;
  z-index: 3;
  margin-top: -4.25rem;
  padding: 0 1.25rem calc(var(--xb-lid) + 2.25rem);
}
header.container.xb-hero .xb-copy {
  max-width: 36rem;
}
header.container.xb-hero .xb-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .55rem;
  margin: 0 0 .55rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: .8rem;
  line-height: 1.1rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--xb-gold);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}
header.container.xb-hero .xb-eyebrow-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: #fff1cf;
  box-shadow: 0 0 6px 2px rgba(255, 200, 110, .8), 0 0 16px 4px rgba(255, 190, 90, .45);
}
header.container.xb-hero .xb-eyebrow-city {
  color: var(--xb-dim);
  font-weight: 600;
  letter-spacing: .1em;
}
header.container.xb-hero .xb-eyebrow-city::before {
  content: "";
  display: inline-block;
  width: 1.1rem;
  height: 1px;
  margin: 0 .5rem .28rem 0;
  vertical-align: middle;
  background: var(--xb-rule);
}
/* Beats the framework's global h2 (Bangers, red, green pill underline). */
header.container.xb-hero h2.xb-title {
  position: relative;
  margin: 0 0 .75rem;
  padding: 0;
  font-family: 'Teko', sans-serif !important;
  font-weight: 600 !important;
  font-size: 3.35rem !important;
  line-height: .9 !important;
  letter-spacing: .005em;
  text-transform: uppercase;
  text-align: left;
  color: var(--xb-ink) !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
header.container.xb-hero h2.xb-title::after,
header.container.xb-hero h2.xb-title::before {
  content: none !important;
  display: none !important;
}
header.container.xb-hero .xb-glow {
  color: #fff3d6;
  text-shadow: 0 0 10px rgba(255, 214, 140, .75), 0 0 28px rgba(255, 180, 80, .55), 0 0 60px rgba(255, 160, 60, .35);
}
header.container.xb-hero .xb-title-2 {
  display: block;
  color: var(--xb-gold);
}
header.container.xb-hero .xb-deck {
  max-width: 31rem;
  margin: 0 0 1.1rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 1rem;
  line-height: 1.45rem;
  color: var(--xb-body);
}
header.container.xb-hero .xb-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem 1.1rem;
  margin: 0 0 1rem;
}
header.container.xb-hero .button.xb-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin: 0;
  padding: .9rem 1.5rem;
  border: 0;
  border-radius: .45rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: 1.02rem;
  line-height: 1.2rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
  color: #1a1a1a;
  background: #ff6900;
  box-shadow: 0 0 0 1px rgba(255, 216, 138, .35), 0 10px 30px -8px rgba(255, 120, 20, .55);
  transition: transform .15s ease, box-shadow .15s ease;
}
header.container.xb-hero .button.xb-cta:hover,
header.container.xb-hero .button.xb-cta:focus-visible {
  color: #1a1a1a;
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px #fff3d6, 0 14px 36px -8px rgba(255, 120, 20, .7);
}
header.container.xb-hero .xb-cities {
  margin: 0;
  font-size: .95rem;
  line-height: 1.35rem;
  color: var(--xb-dim);
}
header.container.xb-hero .xb-cities a,
header.container.xb-hero .xb-lawn-note a {
  color: var(--xb-ink);
  text-decoration: underline;
  text-decoration-color: rgba(255, 216, 138, .6);
  text-underline-offset: .18em;
}
header.container.xb-hero .xb-cities a:hover,
header.container.xb-hero .xb-lawn-note a:hover {
  color: var(--xb-gold);
}
header.container.xb-hero .xb-facts {
  margin: 0;
  font-size: .92rem;
  line-height: 1.35rem;
  font-weight: 600;
  color: var(--xb-body);
}
header.container.xb-hero .xb-star { color: var(--xb-gold); }
header.container.xb-hero .xb-fact { white-space: nowrap; }
header.container.xb-hero .xb-sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 .45rem .2rem;
  border-radius: 50%;
  vertical-align: middle;
  background: rgba(255, 216, 138, .7);
}

/* ---------- the lawn lane: the year-round H1, one step down ---------- */
header.container.xb-hero .xb-lawn {
  max-width: 36rem;
  margin-top: 1.5rem;
  padding-top: 1.05rem;
  border-top: 1px solid var(--xb-rule);
}
header.container.xb-hero .xb-lawn-kicker {
  margin: 0 0 .15rem;
  font-size: .78rem;
  line-height: 1rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #a9e07a;
}
header.container.xb-hero .xb-lawn h1 {
  margin: 0 0 .7rem;
  padding: 0;
  font-family: 'Teko', sans-serif !important;
  font-size: 1.55rem !important;
  line-height: 1.6rem !important;
  font-weight: 500 !important;
  letter-spacing: .015em !important;
  color: var(--xb-ink);
  text-shadow: none;
}
header.container.xb-hero .xb-lawn h1 .sub {
  display: block;
  margin: .1rem 0 0;
  font-family: 'Titillium Web', sans-serif !important;
  font-size: .88rem !important;
  line-height: 1.25rem !important;
  font-weight: 400 !important;
  text-transform: none;
  color: var(--xb-dim);
}
header.container.xb-hero .xb-lawn-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  margin: 0;
}
header.container.xb-hero .button.xb-lawn-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: .6rem 1.1rem;
  border: 2px solid rgba(254, 254, 254, .85);
  border-radius: .45rem;
  font-family: 'Titillium Web', sans-serif;
  font-size: .9rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fefefe;
  background: transparent;
  transition: background-color .15s ease, color .15s ease;
}
header.container.xb-hero .button.xb-lawn-btn:hover,
header.container.xb-hero .button.xb-lawn-btn:focus-visible {
  color: #10290a;
  background: #a9e07a;
  border-color: #a9e07a;
}
header.container.xb-hero .xb-lawn-note {
  font-size: .85rem;
  line-height: 1.25rem;
  color: var(--xb-dim);
}

header.container.xb-hero a:focus-visible {
  outline: 3px solid #fff3d6;
  outline-offset: 3px;
}

/* ---------- stacked layouts (under 1024px): flat field under the photo ---------- */
@media (max-width: 1023.98px) {
  header.container.xb-hero { background-image: none; }
}

/* ---------- phone tuning ---------- */
/* Where the copy column is too narrow for one line (phones, and laptops
   between 1024 and 1380), the eyebrow and the facts break on purpose,
   at a phrase, instead of wrapping wherever they happen to run out. */
@media (max-width: 699.98px), (min-width: 1024px) and (max-width: 1379.98px) {
  header.container.xb-hero .xb-eyebrow-city { flex-basis: 100%; padding-left: 1.05rem; }
  header.container.xb-hero .xb-eyebrow-city::before { display: none; }
}
/* The facts line is about 533px on one line ("4.9 stars on Google" keeps the
   word "stars" so update-reviews.js can rewrite the rating). The desktop copy
   column is 36vw, so it only fits from about 1480 wide; stack it below 1520
   so a desktop never shows a dangling separator at the end of line one. */
@media (max-width: 699.98px), (min-width: 1024px) and (max-width: 1519.98px) {
  header.container.xb-hero .xb-fact { display: block; }
  header.container.xb-hero .xb-sep-mid { display: none; }
}
@media (max-width: 699.98px) {
  header.container.xb-hero .button.xb-cta { width: 100%; }
  header.container.xb-hero .xb-cities { width: 100%; text-align: center; }
}
/* Small phones (360 to 379 wide): keep the quote button on one line and
   lift it clear of the site's chat launcher, which sits bottom right. */
@media (max-width: 379.98px) {
  header.container.xb-hero .xb-photo { aspect-ratio: 10 / 7; }
  /* wider crop lifts the house: the switch rides up into the trees so its
     caption stays off the right gable's lights */
  header.container.xb-hero button.xb-switch { top: 1.55rem; align-items: flex-start; }
  header.container.xb-hero .xb-cap { padding-top: 6px; }
  /* 2.85rem, not 3rem: "Lit by December 1." (6.79em) then fits the 320px
     column on one line, so the title is two lines, not three, and the quote
     button clears the sticky call bar at 360x640. */
  header.container.xb-hero h2.xb-title { font-size: 2.85rem !important; }
  header.container.xb-hero .xb-deck { font-size: .95rem; line-height: 1.35rem; margin-bottom: .9rem; }
  header.container.xb-hero .button.xb-cta { font-size: .9rem; padding: .85rem .75rem; letter-spacing: .01em; }
}
/* Short phones (iPhone SE and similar, under 720 tall): a wider crop of the
   same house so the quote button clears the site's sticky call bar. */
@media (max-width: 699.98px) and (max-height: 719.98px) {
  header.container.xb-hero .xb-photo { aspect-ratio: 16 / 9; }
  header.container.xb-hero .xb-inner { margin-top: -3rem; }
  header.container.xb-hero button.xb-switch { top: 1.55rem; align-items: flex-start; }
  header.container.xb-hero .xb-cap { padding-top: 6px; }
}
@media (min-width: 420px) and (max-width: 699.98px) {
  header.container.xb-hero h2.xb-title { font-size: 3.7rem !important; }
}

/* ---------- tablet: same stack, wider frame ---------- */
@media (min-width: 700px) and (max-width: 1023.98px) {
  header.container.xb-hero .xb-strand { font-size: 4px; }
  header.container.xb-hero .xb-inner { margin-top: -6rem; padding: 0 2.5rem calc(var(--xb-lid) + 2.5rem); }
  header.container.xb-hero h2.xb-title { font-size: 4.6rem !important; }
  header.container.xb-hero .xb-copy,
  header.container.xb-hero .xb-lawn { max-width: 40rem; }
}

/* ---------- desktop: copy on the night field, house on the right ----------
   --H is the hero height. The photo is sized from it (--pw, the crop's
   natural width at that height) and slid right until its first lit eave
   clears the copy column: 0.2514 is where that eave sits across the crop.
   Wide screens keep the whole house; narrow laptops give up a little of
   the far garage rather than put a scrim on the lights. */
@media (min-width: 1024px) {
  header.container.xb-hero {
    --H: clamp(560px, calc(100vh - 150px), 820px);
    --pw: calc(var(--H) * 1.5556);
    --gut: clamp(32px, 4.4vw, 84px);
    --colw: clamp(360px, 36vw, 720px);
    min-height: var(--H);
  }
  header.container.xb-hero .xb-photo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: max(calc(100% - var(--pw)), calc(var(--gut) + var(--colw) + 28px - var(--pw) * 0.2514));
    width: var(--pw);
    height: 100%;
    aspect-ratio: auto;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 12%, #000 22%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 12%, #000 22%);
  }
  header.container.xb-hero .xb-photo-img { object-position: 0% 42%; }
  header.container.xb-hero .xb-photo::after { height: 26%; background: linear-gradient(180deg, rgba(7, 9, 16, 0), rgba(7, 9, 16, .55)); }
  header.container.xb-hero .xb-strand { font-size: 4px; }
  header.container.xb-hero .xb-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--H);
    box-sizing: border-box;
    width: calc(var(--gut) + var(--colw));
    margin: 0;
    padding: 3.6rem 0 calc(var(--xb-lid) + .25rem) var(--gut);
  }
  header.container.xb-hero .xb-copy,
  header.container.xb-hero .xb-lawn { max-width: none; }
  header.container.xb-hero h2.xb-title { font-size: clamp(3.8rem, 4.9vw, 6rem) !important; }
  header.container.xb-hero .xb-cta-row { margin-bottom: .8rem; }
  header.container.xb-hero .xb-deck { margin-bottom: 1rem; }
  header.container.xb-hero .xb-deck { font-size: 1.06rem; line-height: 1.55rem; }
  header.container.xb-hero .xb-lawn { margin-top: 1.1rem; padding-top: .85rem; }
}
@media (min-width: 1600px) {
  header.container.xb-hero .xb-deck { font-size: 1.15rem; line-height: 1.7rem; max-width: 34rem; }
}

/* ---------- reduced motion: lit and still; the switch still works, instantly ---------- */
@media (prefers-reduced-motion: reduce) {
  header.container.xb-hero .xb-halo-a,
  header.container.xb-hero .xb-halo-b { animation: none !important; opacity: 1; }
  header.container.xb-hero .xb-ibox,
  header.container.xb-hero .xb-photo-img,
  header.container.xb-hero .xb-strand-lit,
  header.container.xb-hero .xb-glow { animation: none !important; transition: none !important; }
  header.container.xb-hero .xb-lever,
  header.container.xb-hero .xb-plate,
  header.container.xb-hero .button.xb-cta { transition: none; }
}

/* ---------- late-season headline (from Nov 16) ----------
   "Lit for the holidays. / Never touch a ladder." is longer than the early
   headline: its longest line is 8.57em against 6.79em. At the early sizes it
   ran to four lines with a lone "A", and on short phones pushed the quote
   button under the sticky call bar. .xb-title-late (added by
   scripts/xmas-banner.js late-season, and by the inline backstop script in
   the headline block) sizes it so each line fits the copy column: column
   width / 9em, leaving about 5% slack, never larger than the early size. */
header.container.xb-hero h2.xb-title.xb-title-late {
  font-size: min(3.7rem, calc((100vw - 40px) / 9)) !important;
  text-wrap: balance;
}
@media (min-width: 700px) and (max-width: 1023.98px) {
  header.container.xb-hero h2.xb-title.xb-title-late { font-size: min(4.6rem, calc((min(40rem, 100vw - 5rem)) / 9)) !important; }
}
@media (min-width: 1024px) {
  header.container.xb-hero h2.xb-title.xb-title-late { font-size: min(clamp(3.8rem, 4.9vw, 6rem), calc(var(--colw) / 9)) !important; }
}