/* ==========================================================================
   Seatown Window & Wash — Christmas Light Installation campaign
   Seasonal layer only. Nothing here restyles the existing site: every rule is
   scoped to a .stw-xmas / .xl- class so the announcement bar, the homepage
   promo band and the /christmas-lights page can be lifted out at the end of
   the season by removing the two <link>/<script> tags and the markup blocks.

   Palette: the house navy/cream/gold, warmed with the C9 bulb amber so the
   campaign reads as "Seatown at Christmas" rather than a second brand.
   ========================================================================== */

:root {
  --xl-navy-900: #132736;
  --xl-navy-800: #1a3244;
  --xl-navy-700: #1f3a4f;
  --xl-cream-100: #f4ede0;
  --xl-cream-200: #e8dec9;
  --xl-gold: #c9b897;
  --xl-gold-soft: #d8c9ab;
  /* Warm-white C9 bulb glow — the one new hue the season introduces. */
  --xl-bulb: #ffcf7a;
  --xl-bulb-deep: #e8a33c;
  --xl-holly: #1f5f4a;
  /* Announcement bar height. Phones stack the two lines of copy, so the bar is
     deliberately a fixed two-line height there and a fixed one-line height
     from 640px up: every piece of top-of-page chrome offsets itself from this
     value (see "Top-of-page chrome offsets" below), and a guessed height would
     leave the headers overlapping the bar. */
  --xl-bar-h: 3.15rem;
}
@media (min-width: 640px) {
  :root { --xl-bar-h: 2.4rem; }
}

/* ==========================================================================
   1. Announcement bar — sits at the very top of every page, in flow, so it
      never covers the hero and never changes the existing layout below it.
   ========================================================================== */

.stw-xmas-bar {
  position: relative;
  /* Above the page headers (z-index 30) but below the "Explore" overlay (70)
     and panel (80), so an open menu dims and covers the bar like everything
     else instead of leaving it lit on top of the scrim. */
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--xl-bar-h);
  overflow: hidden;
  padding: 0 1rem;
  background: linear-gradient(
    100deg,
    var(--xl-navy-900) 0%,
    var(--xl-navy-700) 42%,
    #235143 100%
  );
  color: var(--xl-cream-100);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 rgba(201, 184, 151, 0.35);
  transition: filter 0.3s ease;
}
.stw-xmas-bar:hover {
  filter: brightness(1.14);
}
.stw-xmas-bar:focus-visible {
  outline: 2px solid var(--xl-bulb);
  outline-offset: -3px;
}

/* Row of warm bulbs hanging off the bottom edge of the bar. */
.stw-xmas-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-image: radial-gradient(circle, var(--xl-bulb) 0 1px, transparent 1.6px);
  background-size: 16px 2px;
  background-repeat: repeat-x;
  opacity: 0.85;
  animation: xl-twinkle 4.5s ease-in-out infinite;
}

.stw-xmas-bar__inner {
  display: block;
}
.stw-xmas-bar__lede,
.stw-xmas-bar__save {
  display: block;
  white-space: nowrap;
}
.stw-xmas-bar__lede {
  color: var(--xl-cream-100);
}
.stw-xmas-bar__save {
  color: var(--xl-bulb);
  font-weight: 700;
}
/* The dash joins the two halves into one sentence on a single line; on phones
   the halves stack, where a leading dash would read as a typo. */
.stw-xmas-bar__dash {
  display: none;
}
.stw-xmas-bar__cta {
  display: none;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.6rem;
  border: 1px solid rgba(255, 207, 122, 0.5);
  border-radius: 9999px;
  color: var(--xl-bulb);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.stw-xmas-bar__cta svg {
  width: 12px;
  height: 12px;
}

@media (min-width: 640px) {
  .stw-xmas-bar {
    font-size: 0.86rem;
    padding: 0 1.5rem;
  }
  .stw-xmas-bar__inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
  }
  .stw-xmas-bar__lede,
  .stw-xmas-bar__save,
  .stw-xmas-bar__dash {
    display: inline;
  }
  .stw-xmas-bar__cta {
    display: inline-flex;
  }
}

/* --------------------------------------------------------------------------
   Top-of-page chrome offsets

   The bar is the first element in <body> and sits in normal flow, so ordinary
   content moves down by itself. What does not move is the chrome that anchors
   to the top of the page or the viewport:

     - the service-page header, `position: absolute; top: 0`
     - the homepage SPA header, also `position: absolute; top: 0` — and no
       ancestor of it is positioned, so it anchors to the page, not to #root
     - the floating "Explore" button, `position: fixed`

   Left alone these render at y = 0, underneath the bar, which is what buried
   the logo, the nav links and the phone pill. Each one is shifted down by
   exactly one bar height, so the clearances the original design established
   are preserved rather than re-guessed.
   -------------------------------------------------------------------------- */

/* Service pages: header overlaying its own hero. */
.stw-xmas-bar ~ .topbar {
  top: var(--xl-bar-h);
}

/* Homepage: React renders <header class="stw-nav absolute top-0 ..."> inside
   #root. The ID here also beats the bundle's own `top-0` utility class. */
.stw-xmas-bar ~ #root .stw-nav {
  top: var(--xl-bar-h);
}

/* "Explore" button. The three offsets below are the ones service-menu.css and
   hero.css already use, each plus the bar. */
.stw-xmas-bar ~ .sw-menu-fab {
  top: calc(1rem + var(--xl-bar-h));
}
@media (min-width: 640px) {
  /* Clears the header row and its phone pill, which moved down with it. */
  .stw-xmas-bar ~ .sw-menu-fab {
    top: calc(5.75rem + var(--xl-bar-h));
  }
}
@media (max-width: 768px) {
  /* Homepage only (#root exists there): hero.css centres the button in a 60px
     nav band, (60 - 42) / 2 = 9px, rather than using the offsets above. */
  .stw-xmas-bar ~ #root ~ .sw-menu-fab {
    top: calc(9px + var(--xl-bar-h));
  }
}

@keyframes xl-twinkle {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .stw-xmas-bar::after { animation: none; }
}

/* ==========================================================================
   2. Homepage promo band — the section directly below the existing hero.
      Self-contained (the homepage's compiled stylesheet is never touched).
   ========================================================================== */

.stw-xmas-promo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 4rem 0 4.25rem;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(255, 207, 122, 0.14) 0%, transparent 58%),
    linear-gradient(165deg, #0e2130 0%, var(--xl-navy-900) 45%, #16303f 100%);
  color: var(--xl-cream-100);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  line-height: 1.6;
}
@media (min-width: 900px) {
  .stw-xmas-promo { padding: 5.5rem 0 5.75rem; }
}

/* Warm bulb string strung across the top edge of the band. */
.stw-xmas-promo__string {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 26px;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--xl-bulb) 0 2px, rgba(255, 207, 122, 0.28) 2.6px, transparent 5px);
  background-size: 34px 26px;
  background-repeat: repeat-x;
  background-position: 0 -8px;
  opacity: 0.9;
  animation: xl-twinkle 6s ease-in-out infinite;
}
.stw-xmas-promo__wrap {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 640px) {
  .stw-xmas-promo__wrap { padding: 0 2.5rem; }
}
@media (min-width: 960px) {
  .stw-xmas-promo__wrap {
    grid-template-columns: 1.02fr 0.98fr;
    gap: 3.5rem;
  }
}

.stw-xmas-promo__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.95rem;
  border: 1px solid rgba(255, 207, 122, 0.42);
  border-radius: 9999px;
  background: rgba(255, 207, 122, 0.08);
  color: var(--xl-bulb);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.stw-xmas-promo__title {
  margin: 1.15rem 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2rem, 5.2vw, 3.15rem);
  line-height: 1.06;
  letter-spacing: 0.01em;
  color: #fff;
}
.stw-xmas-promo__title span {
  display: block;
  color: var(--xl-bulb);
}
.stw-xmas-promo__script {
  margin: 0.9rem 0 0;
  font-family: Caveat, cursive;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.25;
  color: var(--xl-gold-soft);
}
.stw-xmas-promo__offer {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  margin-top: 1.35rem;
  padding: 0.7rem 1.25rem;
  border-radius: 0.9rem;
  background: linear-gradient(120deg, rgba(255, 207, 122, 0.16), rgba(255, 207, 122, 0.04));
  border: 1px solid rgba(255, 207, 122, 0.32);
  box-shadow: 0 18px 40px -26px rgba(255, 207, 122, 0.65);
}
.stw-xmas-promo__offer b {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.5rem;
  color: var(--xl-bulb);
  letter-spacing: 0.02em;
}
.stw-xmas-promo__offer span {
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--xl-cream-200);
}
.stw-xmas-promo__scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.9rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--xl-cream-200);
}
.stw-xmas-promo__scope li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.stw-xmas-promo__scope li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--xl-bulb);
  box-shadow: 0 0 8px rgba(255, 207, 122, 0.9);
}
.stw-xmas-promo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}
.stw-xmas-promo__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.7rem;
  border: 1px solid transparent;
  border-radius: 9999px;
  background: linear-gradient(120deg, var(--xl-bulb) 0%, var(--xl-bulb-deep) 100%);
  color: #21150a;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 20px 42px -20px rgba(232, 163, 60, 0.85);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.stw-xmas-promo__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 48px -20px rgba(232, 163, 60, 0.95);
}
.stw-xmas-promo__btn svg {
  width: 17px;
  height: 17px;
}
.stw-xmas-promo__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border: 1px solid rgba(244, 237, 224, 0.28);
  border-radius: 9999px;
  color: var(--xl-cream-100);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s ease;
}
.stw-xmas-promo__link:hover {
  background: rgba(244, 237, 224, 0.09);
}
.stw-xmas-promo__note {
  margin: 1.35rem 0 0;
  font-size: 0.82rem;
  color: rgba(244, 237, 224, 0.62);
}

/* Framed night photograph */
.stw-xmas-promo__media {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(255, 207, 122, 0.24);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9),
    0 0 70px -30px rgba(255, 207, 122, 0.4);
}
.stw-xmas-promo__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.stw-xmas-promo__tag {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: 0.45rem 0.9rem;
  border-radius: 9999px;
  background: rgba(19, 39, 54, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 207, 122, 0.3);
  color: var(--xl-cream-100);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .stw-xmas-promo__string { animation: none; }
  .stw-xmas-promo__btn { transition: none; }
}

/* Until the promo band is moved into place under the React hero it lives at
   the end of the document; keeping it visually identical either way means a
   JS failure degrades to "section further down the page", never to a gap. */

/* ==========================================================================
   3. /christmas-lights page
      Layers on top of service-page.css, which supplies the shared shell
      (.wrap, .btn, section rhythm, footer) — same fonts, same spacing scale.
   ========================================================================== */

.xl-page {
  background: var(--xl-cream-100);
}

/* ---------- hero ---------- */
.xl-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 7rem 0 3.5rem;
  color: var(--xl-cream-100);
  background: var(--xl-navy-900);
}
@media (min-width: 900px) {
  .xl-hero { padding: 10rem 0 6rem; }
}
.xl-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.xl-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}
.xl-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(11, 26, 37, 0.94) 0%, rgba(13, 32, 45, 0.82) 46%, rgba(13, 32, 45, 0.36) 100%),
    linear-gradient(to top, rgba(11, 26, 37, 0.96) 0%, transparent 55%);
}
.xl-hero__string {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 26px;
  background-image: radial-gradient(circle, var(--xl-bulb) 0 2px, rgba(255, 207, 122, 0.3) 2.6px, transparent 5px);
  background-size: 34px 26px;
  background-repeat: repeat-x;
  background-position: 0 -8px;
  animation: xl-twinkle 6s ease-in-out infinite;
}
.xl-hero .wrap {
  position: relative;
  z-index: 3;
}
.xl-hero__col {
  max-width: 40rem;
}
.xl-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.95rem;
  border: 1px solid rgba(255, 207, 122, 0.45);
  border-radius: 9999px;
  background: rgba(255, 207, 122, 0.1);
  color: var(--xl-bulb);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.xl-hero h1 {
  margin: 1.15rem 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 5.6vw, 3.5rem);
  line-height: 1.05;
  color: #fff;
}
.xl-hero h1 span {
  display: block;
  color: var(--xl-bulb);
}
.xl-hero__script {
  margin: 0.85rem 0 0;
  font-family: Caveat, cursive;
  font-size: clamp(1.5rem, 3.6vw, 2.05rem);
  color: var(--xl-gold-soft);
}
.xl-hero__lead {
  margin: 1.1rem 0 0;
  font-size: 1.02rem;
  color: rgba(244, 237, 224, 0.86);
  max-width: 34rem;
}
.xl-offer {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding: 0.75rem 1.3rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 207, 122, 0.34);
  background: linear-gradient(120deg, rgba(255, 207, 122, 0.18), rgba(255, 207, 122, 0.04));
  box-shadow: 0 18px 40px -26px rgba(255, 207, 122, 0.6);
}
.xl-offer b {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.55rem;
  color: var(--xl-bulb);
}
.xl-offer span {
  font-size: 0.84rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--xl-cream-200);
}
.xl-scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--xl-cream-200);
}
.xl-scope li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.xl-scope li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--xl-bulb);
  box-shadow: 0 0 8px rgba(255, 207, 122, 0.9);
}
.xl-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: rgba(244, 237, 224, 0.82);
}
.xl-trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.xl-trust svg {
  width: 15px;
  height: 15px;
  color: var(--xl-bulb);
  flex-shrink: 0;
}

/* Gold/bulb button used for every campaign CTA */
.btn-bulb {
  background: linear-gradient(120deg, var(--xl-bulb) 0%, var(--xl-bulb-deep) 100%);
  color: #21150a;
  box-shadow: 0 20px 42px -20px rgba(232, 163, 60, 0.85);
}
.btn-bulb:hover {
  transform: translateY(-2px);
  background: linear-gradient(120deg, #ffd894 0%, #eead4d 100%);
}

/* ---------- sticky mobile CTA ---------- */
.xl-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: flex;
  gap: 0.6rem;
  padding: 0.65rem 0.85rem calc(0.65rem + env(safe-area-inset-bottom));
  background: rgba(13, 32, 45, 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 207, 122, 0.28);
}
.xl-sticky a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.8rem 0.6rem;
  border-radius: 9999px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.xl-sticky__quote {
  background: linear-gradient(120deg, var(--xl-bulb), var(--xl-bulb-deep));
  color: #21150a;
}
.xl-sticky__call {
  border: 1px solid rgba(244, 237, 224, 0.32);
  color: var(--xl-cream-100);
}
.xl-sticky svg {
  width: 14px;
  height: 14px;
}
@media (min-width: 780px) {
  .xl-sticky { display: none; }
}

/* ---------- value / included ---------- */
.xl-band-cream {
  background: var(--xl-cream-100);
}
.xl-band-navy {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, var(--xl-navy-900) 0%, var(--xl-navy-800) 60%, var(--xl-navy-700) 100%);
  color: var(--xl-cream-100);
}
.xl-band-navy .xl-section-title,
.xl-band-navy h2,
.xl-band-navy h3 {
  color: var(--xl-cream-100);
}
.xl-band-navy .xl-section-sub {
  color: rgba(244, 237, 224, 0.78);
}

.xl-section-head {
  max-width: 42rem;
}
.xl-section-head.center {
  margin: 0 auto;
  text-align: center;
}
.xl-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--xl-bulb-deep);
}
.xl-band-navy .xl-eyebrow {
  color: var(--xl-bulb);
}
.xl-section-title {
  margin: 0.55rem 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 4.2vw, 2.6rem);
  line-height: 1.1;
  color: var(--xl-navy-900);
}
.xl-rule {
  width: 3.5rem;
  height: 2px;
  margin: 1.1rem 0 1.25rem;
  background: linear-gradient(90deg, var(--xl-bulb), rgba(255, 207, 122, 0));
}
.xl-section-head.center .xl-rule {
  margin-left: auto;
  margin-right: auto;
}
.xl-section-sub {
  margin: 0;
  color: #3f5a6d;
  font-size: 1.02rem;
}

.xl-cards {
  display: grid;
  gap: 1.1rem;
  margin-top: 2.5rem;
}
@media (min-width: 700px) {
  .xl-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .xl-cards--4 { grid-template-columns: repeat(4, 1fr); }
}
.xl-card {
  padding: 1.6rem 1.5rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid rgba(26, 50, 68, 0.1);
  box-shadow: 0 24px 48px -34px rgba(19, 39, 54, 0.55);
}
.xl-band-navy .xl-card {
  background: rgba(244, 237, 224, 0.05);
  border-color: rgba(255, 207, 122, 0.2);
  box-shadow: none;
}
.xl-card__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.75rem;
  background: linear-gradient(140deg, rgba(255, 207, 122, 0.22), rgba(255, 207, 122, 0.06));
  border: 1px solid rgba(232, 163, 60, 0.3);
  color: var(--xl-bulb-deep);
}
.xl-band-navy .xl-card__ico {
  color: var(--xl-bulb);
}
.xl-card__ico svg {
  width: 22px;
  height: 22px;
}
.xl-card h3 {
  margin: 1rem 0 0.4rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.12rem;
  color: var(--xl-navy-900);
}
.xl-card p {
  margin: 0;
  font-size: 0.94rem;
  color: #476072;
}
.xl-band-navy .xl-card p {
  color: rgba(244, 237, 224, 0.76);
}

/* ---------- how it works ---------- */
.xl-steps {
  counter-reset: xl-step;
  display: grid;
  gap: 1.1rem;
  margin-top: 2.5rem;
}
@media (min-width: 780px) {
  .xl-steps { grid-template-columns: repeat(4, 1fr); }
}
.xl-step {
  position: relative;
  padding: 2.4rem 1.4rem 1.6rem;
  border-radius: 1rem;
  background: rgba(244, 237, 224, 0.05);
  border: 1px solid rgba(255, 207, 122, 0.2);
}
.xl-step::before {
  counter-increment: xl-step;
  content: counter(xl-step);
  position: absolute;
  top: -1.05rem;
  left: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--xl-bulb), var(--xl-bulb-deep));
  color: #21150a;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  box-shadow: 0 0 24px -4px rgba(255, 207, 122, 0.75);
}
.xl-step h3 {
  margin: 0 0 0.4rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.1rem;
  color: var(--xl-cream-100);
}
.xl-step p {
  margin: 0;
  font-size: 0.94rem;
  color: rgba(244, 237, 224, 0.76);
}

/* ---------- gallery + before/after ---------- */
.xl-ba {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
}
@media (min-width: 760px) {
  .xl-ba { grid-template-columns: repeat(2, 1fr); }
}
.xl-ba figure,
.xl-shot {
  position: relative;
  margin: 0;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(26, 50, 68, 0.12);
  box-shadow: 0 30px 60px -40px rgba(19, 39, 54, 0.7);
  background: var(--xl-navy-900);
}
.xl-ba img,
.xl-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.xl-tag {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  background: rgba(19, 39, 54, 0.86);
  border: 1px solid rgba(244, 237, 224, 0.24);
  color: var(--xl-cream-100);
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.xl-tag--after {
  background: rgba(232, 163, 60, 0.92);
  border-color: rgba(255, 207, 122, 0.6);
  color: #21150a;
}
.xl-ba figcaption {
  padding: 0.85rem 1rem 1rem;
  background: #fff;
  font-size: 0.9rem;
  color: #476072;
}
.xl-band-navy .xl-ba figcaption {
  background: rgba(244, 237, 224, 0.06);
  color: rgba(244, 237, 224, 0.78);
}
.xl-gallery {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}
@media (min-width: 700px) {
  .xl-gallery { grid-template-columns: repeat(3, 1fr); }
}
.xl-shot__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.6rem 1rem 0.9rem;
  background: linear-gradient(to top, rgba(11, 26, 37, 0.9), transparent);
  color: var(--xl-cream-100);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- FAQ ---------- */
.xl-faq {
  max-width: 46rem;
  margin: 2.5rem auto 0;
  display: grid;
  gap: 0.75rem;
}
.xl-faq details {
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 207, 122, 0.22);
  background: rgba(244, 237, 224, 0.05);
  overflow: hidden;
}
.xl-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--xl-cream-100);
  list-style: none;
}
.xl-faq summary::-webkit-details-marker {
  display: none;
}
.xl-faq summary svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--xl-bulb);
  transition: transform 0.3s ease;
}
.xl-faq details[open] summary svg {
  transform: rotate(45deg);
}
.xl-faq .xl-answer {
  padding: 0 1.25rem 1.15rem;
  color: rgba(244, 237, 224, 0.78);
  font-size: 0.95rem;
}

/* ---------- quote form ---------- */
.xl-quote {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(110% 80% at 15% 0%, rgba(255, 207, 122, 0.14) 0%, transparent 55%),
    linear-gradient(165deg, #0e2130 0%, var(--xl-navy-900) 55%, #16303f 100%);
  color: var(--xl-cream-100);
}
.xl-quote__grid {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 960px) {
  .xl-quote__grid { grid-template-columns: 0.92fr 1.08fr; gap: 3.5rem; }
}
.xl-quote__pitch h2 {
  margin: 0.55rem 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 4.2vw, 2.6rem);
  line-height: 1.1;
  color: #fff;
}
.xl-quote__pitch p {
  color: rgba(244, 237, 224, 0.8);
}
.xl-quote__list {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
  font-size: 0.95rem;
  color: rgba(244, 237, 224, 0.85);
}
.xl-quote__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.xl-quote__list svg {
  width: 16px;
  height: 16px;
  margin-top: 0.28rem;
  color: var(--xl-bulb);
  flex-shrink: 0;
}

.xl-form {
  padding: 1.6rem 1.4rem;
  border-radius: 1.15rem;
  background: rgba(244, 237, 224, 0.055);
  border: 1px solid rgba(255, 207, 122, 0.24);
  box-shadow: 0 40px 80px -46px rgba(0, 0, 0, 0.85);
}
@media (min-width: 640px) {
  .xl-form { padding: 2rem 1.9rem; }
}
.xl-form__head {
  margin-bottom: 1.35rem;
}
.xl-form__head h3 {
  margin: 0.4rem 0 0.35rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.4rem;
  color: #fff;
}
.xl-form__head p {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(244, 237, 224, 0.72);
}
.xl-field {
  display: block;
  margin-bottom: 1rem;
}
.xl-row {
  display: grid;
  gap: 1rem;
}
@media (min-width: 560px) {
  .xl-row { grid-template-columns: repeat(2, 1fr); }
}
.xl-field > span {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--xl-cream-200);
}
.xl-field input,
.xl-field select,
.xl-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.8rem 0.95rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(244, 237, 224, 0.22);
  background: rgba(11, 26, 37, 0.55);
  color: var(--xl-cream-100);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 0.98rem;
}
.xl-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--xl-bulb) 50%),
    linear-gradient(135deg, var(--xl-bulb) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.xl-field textarea {
  min-height: 6.5rem;
  resize: vertical;
}
.xl-field input::placeholder,
.xl-field textarea::placeholder {
  color: rgba(244, 237, 224, 0.4);
}
.xl-field input:focus,
.xl-field select:focus,
.xl-field textarea:focus {
  outline: none;
  border-color: rgba(255, 207, 122, 0.7);
  box-shadow: 0 0 0 3px rgba(255, 207, 122, 0.16);
}
.xl-form button[type="submit"] {
  width: 100%;
  margin-top: 0.35rem;
  padding: 1.05rem 1.5rem;
  border: 0;
  border-radius: 9999px;
  background: linear-gradient(120deg, var(--xl-bulb) 0%, var(--xl-bulb-deep) 100%);
  color: #21150a;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 22px 44px -22px rgba(232, 163, 60, 0.9);
  transition: transform 0.25s ease;
}
.xl-form button[type="submit"]:hover {
  transform: translateY(-2px);
}
.xl-form button[type="submit"][disabled] {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}
.xl-form__fine {
  margin: 1rem 0 0;
  font-size: 0.78rem;
  color: rgba(244, 237, 224, 0.6);
}
.xl-form__hp {
  position: absolute;
  left: -9999px;
}
.xl-form__status {
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: 0.7rem;
  font-size: 0.92rem;
}
.xl-form__status[hidden] {
  display: none;
}
.xl-form__status--ok {
  background: rgba(31, 95, 74, 0.28);
  border: 1px solid rgba(95, 195, 205, 0.4);
  color: #dff3ea;
}
.xl-form__status--err {
  background: rgba(140, 45, 35, 0.28);
  border: 1px solid rgba(230, 120, 100, 0.4);
  color: #ffe0d8;
}

/* ---------- closing CTA ---------- */
.xl-cta-band {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(120deg, var(--xl-navy-900) 0%, #1c4038 55%, var(--xl-navy-800) 100%);
  color: var(--xl-cream-100);
}
.xl-cta-band .xl-script {
  margin: 0;
  font-family: Caveat, cursive;
  font-size: 1.9rem;
  color: var(--xl-bulb);
}
.xl-cta-band h2 {
  margin: 0.4rem 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
}
.xl-cta-band p {
  margin: 1rem auto 0;
  max-width: 36rem;
  color: rgba(244, 237, 224, 0.84);
}
.xl-cta-band .btn-row {
  justify-content: center;
}

/* Extra bottom breathing room so the sticky mobile bar never covers content */
@media (max-width: 779px) {
  .xl-page .foot {
    padding-bottom: 5.5rem;
  }
}

/* ==========================================================================
   4. Navigation flag — the "New" pill beside Christmas Lights in the shared
      floating service menu. Styled here so the seasonal layer stays in one
      file; service-menu.js renders the <em> only for flagged nav entries.
   ========================================================================== */

.sw-menu-link .sw-menu-flag {
  display: inline-block;
  margin-left: 0.55rem;
  padding: 0.12rem 0.5rem;
  border-radius: 9999px;
  background: linear-gradient(120deg, var(--xl-bulb), var(--xl-bulb-deep));
  color: #21150a;
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  vertical-align: 0.12em;
}