/**
 * /holiday-lights — only the sections winterize does not already have.
 * Topbar, hero shell, formband, steps and footer all come from bo-winterize.css;
 * this adds the value-prop grid, price block, commercial block and urgency band.
 * No new palette: everything uses the existing --bo-* tokens.
 */

/* Hero — PHOTO LEFT, COPY RIGHT.
 *
 * The mirror of /winterize, and deliberately so: this photo is left-weighted
 * (the lit trees are the subject) and already fades to black down its right
 * third. Putting copy on the left — the winterize arrangement — would lay white
 * type over the brightest, busiest part of the frame. On the right it sits on
 * near-black with no scrim fighting the image.
 *
 * ⚠ The fade is BAKED INTO THE PHOTO. Mirroring this layout later is a new
 * export, not a CSS change.
 */
/* Two classes, not one, and that is the whole point: bo-winterize.css carries
   `@media (max-width: 720px) { .bo-hero { background: var(--bo-paper) } }` for
   the WINTERIZE hero, whose photo is light and whose text is dark. That rule is
   equal specificity to a single .bo-hero--holiday and loads AFTER this file, so
   it won — turning this hero's ground white below 720px while the white text,
   set by the more specific .bo-hero--holiday .bo-hero__h1, kept winning. White
   on white: the headline, subhead and trust line were invisible on a tablet
   (reported 2026-10-04 with a photo of the live page). Doubling the class makes
   this 0,2,0 so it holds at every width regardless of load order. */
.bo-hero.bo-hero--holiday {
  position: relative;
  background: var(--bo-ink, #10231c);
  overflow: hidden;
}

/* Desktop: the photo fills the band, copy sits in the dark right third. */
@media (min-width: 48rem) {
  .bo-hero--holiday { display: grid; align-items: center; min-height: 32rem; }
  .bo-hero--holiday .bo-hero__photo {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    /* Keep the lights anchored left as the viewport widens, so the baked-in
       fade stays where the copy is. */
    object-position: left center;
  }
  .bo-hero--holiday .bo-hero__copy {
    position: relative; z-index: 2;
    margin-left: auto;
    /* Keeps the copy inside the 1440 measure once the band bleeds past it.
       margin, not padding: box-sizing is border-box on this page, so padding
       would come out of the column's own width instead of off the edge. */
    margin-right: var(--bo-bleed, 0px);
    width: min(38%, 30rem);
    padding: 2.5rem clamp(1rem, 4vw, 3rem) 2.5rem 0;
  }
  /* Only a short right-edge wash, as insurance at very wide aspect ratios where
     cover crops the baked fade off-screen. Not a second full gradient — that
     would grey out the trees the photo is there for. */
  .bo-hero--holiday .bo-hero__fade {
    position: absolute; top: 0; bottom: 0; right: 0; left: auto;
    width: 46%;
    background: linear-gradient(to right, rgba(10,14,12,0) 0%, rgba(10,14,12,.75) 55%, rgba(10,14,12,.92) 100%);
  }
}

/* Phone: no room side by side. The lights go on top — the photo is the reason
   anyone keeps reading — and the copy stacks beneath on the dark ground.
   object-position keeps the trees in frame when cover crops the width. */
@media (max-width: 47.99rem) {
  .bo-hero--holiday .bo-hero__photo {
    /* position is declared here rather than inherited from bo-winterize.css's
       720px block: this breakpoint is 47.99rem (767.84px), so between 720px and
       767.84px that file's mobile rules do NOT apply and the photo would fall
       back to the base position:absolute and sit on top of the copy. */
    position: static;
    display: block; width: 100%; height: 14rem;
    object-fit: cover; object-position: left center;
  }
  .bo-hero--holiday .bo-hero__fade { display: none; }
  .bo-hero--holiday .bo-hero__copy { padding: 1.5rem 1rem 2rem; }
}

.bo-hero--holiday .bo-hero__eyebrow,
.bo-hero--holiday .bo-hero__h1,
.bo-hero--holiday .bo-hero__sub,
.bo-hero--holiday .bo-hero__trust { color: #fff; }
.bo-hero--holiday .bo-hero__h1 {
  /* Must not clip or overflow at 360px, and it is a long headline sitting in a
     narrow column on desktop — it will stack to four or five lines by design. */
  font-size: clamp(1.6rem, 4.6vw, 2.6rem);
  line-height: 1.12;
  overflow-wrap: break-word;
  hyphens: none;
  text-wrap: balance;
  margin: .4rem 0 .6rem;
}
.bo-hero--holiday .bo-hero__sub { max-width: 34ch; line-height: 1.5; }
.bo-hero--holiday .bo-hero__trust { font-size: .9rem; opacity: .85; margin-top: 1rem; }
.bo-hero--holiday .bo-btn { margin-top: .5rem; display: inline-block; }

.bo-why__inner, .bo-price__inner, .bo-next__inner, .bo-commercial__inner {
  max-width: 1040px; margin: 0 auto; padding: 2.5rem 1rem;
}
.bo-why__h2, .bo-price__h2, .bo-next__h2, .bo-commercial__inner h2 {
  font-family: Oswald, "Arial Narrow", sans-serif;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  color: var(--bo-ink, #1a1613);
  margin: 0 0 1.25rem;
}

/* One column on a phone, two from 40rem. Never a fixed min-width. */
.bo-why__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 40rem) { .bo-why__grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.bo-why__item h3 { font-family: Oswald, "Arial Narrow", sans-serif; font-size: 1.05rem; margin: 0 0 .35rem; color: var(--bo-ink, #1a1613); }
.bo-why__item p { margin: 0; color: var(--bo-prose, #3a332c); line-height: 1.55; }

.bo-price { background: var(--bo-sand, #f2e9dc); }
.bo-price__anchor {
  font-family: Oswald, "Arial Narrow", sans-serif;
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  color: var(--bo-orange, #cb6015);
  margin: 1rem 0 .25rem;
}
.bo-price__note { color: var(--bo-muted, #6b6054); font-size: .95rem; margin: 0 0 1.25rem; }
.bo-price__included { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .4rem; }
.bo-price__included li { padding-left: 1.6rem; position: relative; color: var(--bo-prose, #3a332c); }
.bo-price__included li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--bo-green, #007a33); font-weight: 700;
}
.bo-price__addons { font-size: .95rem; color: var(--bo-muted, #6b6054); margin: 0; }

.bo-commercial { background: #fff; border-top: 1px solid var(--bo-sand, #e7dcc9); }
.bo-commercial__inner p { color: var(--bo-prose, #3a332c); line-height: 1.55; max-width: 60ch; }
.bo-commercial__inner .bo-btn { margin-top: 1rem; display: inline-block; }

.bo-urgency {
  background: var(--bo-ink, #1a1613); color: #fff; text-align: center;
  padding: 1rem; font-family: Oswald, "Arial Narrow", sans-serif;
  font-size: clamp(.95rem, 2.4vw, 1.1rem); line-height: 1.4;
}

/* Confirmation after submit, same treatment as the winterize page. */
.bo-confirmation { background: #fff; border-left: 4px solid var(--bo-green, #007a33); padding: 1.25rem; border-radius: 4px; }
.bo-confirmation h2 { margin-top: 0; font-family: Oswald, "Arial Narrow", sans-serif; }

/* Row layout comes from .bo-grid-2 in bo-winterize.css — not duplicated here. */

/* The daylight commercial shot. Full-bleed band under the copy — the frame is
   2.14:1, so a narrow column would crop the one thing it is there to show. */
/* background:none overrides Olivero's `figure { background: gray-100 }`.
   position:relative anchors the caption, which sits ON the photo — see below. */
.bo-commercial__shot { margin: 0; line-height: 0; background: none; position: relative; }
/* Olivero's embedded-media.css styles EVERY figcaption on the site — 1.5rem
   padding-block (the gap that stranded this one well below the photo), 1.5rem
   inline padding, a gray-100 ground and the italic. Overridden here, scoped to
   this figure, rather than globally: that file governs every embedded image on
   the site and this page has no business changing them.
   The figure sets line-height:0 to kill the inline-image descender gap, so the
   caption resets its own or it collapses to nothing.
   Aligned to the SAME 1040px column with the same 1rem gutter as
   .bo-commercial__inner, then right-set — so its right edge lines up with the
   prose above it instead of floating against the viewport edge, which is what
   made it read as a stray line rather than a caption.
   #736555 is the corrected --bo-muted-2 (5.6:1 on this white band); the step
   down from body text is carried by SIZE, not a fainter colour, per the 09-28
   contrast audit. */
.bo-commercial__shot figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  /* Scrim, not a flat bar: the photo is busy bottom-right (truck, bushes) and a
     hard band would be the same afterthought in a different colour. Fades from
     the ink token so it reads as part of the picture. */
  background: linear-gradient(to top, rgba(26, 22, 19, .78), rgba(26, 22, 19, 0));
  color: #fff;
  /* Indent to the same 1040px column as .bo-commercial__inner so the caption's
     right edge lines up with the prose above, and fall back to a 1rem gutter
     once the viewport is narrower than the column. */
  padding: 2.75rem 1rem .55rem;
  padding-inline: max(1rem, calc((100% - 1040px) / 2 + 1rem));
  text-align: right;
  line-height: 1.5;
  font-size: .8125rem;
}
.bo-commercial__shot img {
  display: block; width: 100%; height: auto;
  /* Cap the height on tall viewports so a very wide photo cannot push the
     urgency band and the form below the fold. */
  max-height: 22rem; object-fit: cover; object-position: center 40%;
}

/* "How it works" — the three steps.
 *
 * Two fixes to my own markup: they now sit in .bo-next__grid (the existing 3-up
 * wrapper, which also collapses to one column on mobile), and .bo-step__n is
 * actually styled. It was an invented class with no rule behind it, so the
 * numerals rendered at body size and read as footnote markers.
 *
 * The numeral is the house accent — orange Oswald, the same treatment as
 * .bo-next__eyebrow — at a size that makes the sequence readable at a glance.
 * A rule under it ties the number to its step and gives the three a shared
 * horizon, so they scan as one sequence rather than three blocks.
 */
.bo-steps .bo-step { gap: 0; }
.bo-steps .bo-step__n {
  font-family: var(--osw, Oswald, "Arial Narrow", sans-serif);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 600;
  line-height: 1;
  color: var(--bo-orange, #cb6015);
  display: block;
  padding-bottom: .5rem;
  margin-bottom: .9rem;
  border-bottom: 2px solid var(--bo-sand, #e7dcc9);
}
.bo-steps .bo-step h3 { margin-bottom: .4rem; }

/* On a phone the grid is one column, so the steps would run as three tall
   blocks. Put the numeral beside the heading instead — tighter, and it still
   reads as a sequence. */
@media (max-width: 47.99rem) {
  .bo-steps { gap: 1.75rem; }
  .bo-steps .bo-step {
    display: grid;
    grid-template-columns: 2.6rem 1fr;
    column-gap: .9rem;
    align-items: baseline;
  }
  .bo-steps .bo-step__n {
    grid-row: 1; grid-column: 1;
    font-size: 2rem;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .bo-steps .bo-step h3 { grid-row: 1; grid-column: 2; }
  .bo-steps .bo-step p  { grid-row: 2; grid-column: 2; }
}