/* Pascack Porches, all-seasons site.
   Brand tokens carried over from the live fall site, plus one accent set per season.
   html.preview (set by js/config.js while SITE_LIVE = false) shows the ribbon. */
:root {
  /* core brand = the FALL theme. These are the tokens each season theme
     swaps (see "SEASON THEMES" below). Roles:
       --paper page, --card cards, --wash tinted sections, --line borders,
       --ink text, --soft secondary text, --stem buttons/links (primary),
       --stem-deep primary hover, --gold focus ring and highlights,
       --accent / --accent-deep the season's second color (promo bar, popups),
       --tint light fill for picked chips. */
  --paper: #faf6ef; --ink: #2b2118; --soft: #6b5d4f; --line: #e5dccc; --wash: #f3ecdf;
  --card: #fffdf9; --stem: #3f5a36; --stem-deep: #2c4126; --gold: #b8862b;
  --accent: #a84e17; --accent-deep: #8a3f12; --tint: #eef3ea;
  /* fixed season colors below are never themed: they keep each season recognizable */
  /* fall */
  --pumpkin: #c95f1e; --pumpkin-dark: #a84e17;
  /* holiday */
  --evergreen: #2f6b3c; --evergreen-deep: #1d3326; --berry: #9e2b25; --snow: #f6f3ec;
  /* spring */
  --sky: #6f9bb8; --sky-deep: #3f6884; --tulip: #d9718f; --daffodil: #e3b93a;
  --sage: #476a4e; --rose: #a3405b; --blush: #f3e3e3;
  /* fourth of july */
  --navy: #22385e; --flag: #b3262e; --barn: #9b2a24;
  /* celebrations, storefronts */
  --plum: #6e4a7e; --slate: #4a4f55;
  /* lights panel */
  --night: #161d2b;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ribbon-h: 0px;
  --radius: 10px;
  /* z-index scale: header 40, ribbon 50, modals 100 */
}

/* =====================================================================
   SEASON THEMES: <html data-theme="fall|holiday|spring|july4">
   Main page: set by js/seasons.js from the date (or ?season= for owner
   previews). Season pages (fall.html etc.) set it in their <html> tag.
   Fall is the :root set above. Every text pair passes WCAG AA (4.5:1)
   on paper, card and wash; white on --stem and on --accent passes too.
   ===================================================================== */
html[data-theme="holiday"] {   /* deep evergreen, cranberry, warm gold */
  --paper: #f7f5ef; --card: #fffefa; --wash: #e9efe7; --line: #d8e0d4;
  --ink: #1c2620; --soft: #4f5c53;
  --stem: #1d4a33; --stem-deep: #12331f; --gold: #a87b22;
  --accent: #9e2236; --accent-deep: #7d1a2b; --tint: #e6efe4;
}
html[data-theme="spring"] {    /* soft sage, blush, daffodil */
  --paper: #fbf8f4; --card: #ffffff; --wash: #f6eae8; --line: #e8dcd8;
  --ink: #27302a; --soft: #59625a;
  --stem: #476a4e; --stem-deep: #34523b; --gold: #94700f;
  --accent: #a3405b; --accent-deep: #85324a; --tint: #e9f0e6;
}
html[data-theme="celebrate"] { /* celebrations.html: plum, berry pink, warm white */
  --paper: #faf7f6; --card: #ffffff; --wash: #f2eaf3; --line: #e4d9e6;
  --ink: #2a2230; --soft: #5d5466;
  --stem: #6e4a7e; --stem-deep: #563a63; --gold: #a8802a;
  --accent: #a83f6b; --accent-deep: #8a3357; --tint: #efe7f3;
}
/* storefronts.html uses the master brand palette (the :root set above) */
html[data-theme="july4"] {     /* navy, barn red, cream */
  --paper: #f8f3e8; --card: #fffcf5; --wash: #efe7d6; --line: #e0d6c2;
  --ink: #1b2233; --soft: #4f5769;
  --stem: #22385e; --stem-deep: #172843; --gold: #a27a26;
  --accent: #9b2a24; --accent-deep: #7c1f1a; --tint: #e7eaf1;
}

* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html.preview { --ribbon-h: 34px; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper); color: var(--ink);
  font: 17px/1.6 var(--sans);
  padding-top: var(--ribbon-h);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--stem); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 760px) { .wrap { padding: 0 32px; } }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-size: clamp(30px, 4.4vw, 44px); margin-bottom: 14px; }
h3 { font-size: 22px; }
.lede { font-size: 18.5px; color: var(--soft); max-width: 60ch; }
p { max-width: 68ch; }

/* ---------- preview ribbon ---------- */
.ribbon { display: none; }
html.preview .ribbon {
  position: fixed; top: 0; left: 0; right: 0; height: var(--ribbon-h); z-index: 50;
  background: repeating-linear-gradient(135deg, var(--ink) 0 14px, #3a2d21 14px 28px);
  color: var(--paper); display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 13px/1.2 var(--sans); padding: 0 12px; text-align: center;
}
html.preview .ribbon b { background: var(--daffodil); color: var(--ink); padding: 2px 7px; border-radius: 4px; font-weight: 800; letter-spacing: .02em; }
.ribbon .long { display: none; }
@media (min-width: 640px) { .ribbon .long { display: inline; } }

/* ---------- nav ---------- */
/* preview-only wins over any display rule (e.g. .draft-flag) everywhere outside the preview */
.preview-only { display: none; }
html:not(.preview) .preview-only { display: none !important; }
html.preview .preview-only { display: revert; }
.top { position: sticky; top: var(--ribbon-h); z-index: 40; }
.nav { position: relative; background: rgba(250,246,239,.96); background: color-mix(in srgb, var(--paper) 96%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); }
.nav-in { display: flex; align-items: center; gap: 16px; max-width: 1120px; margin: 0 auto; padding: 10px 20px; }
@media (min-width: 760px) { .nav-in { padding: 12px 32px; } }
.brand-link { display: block; flex: none; }
.brand-link img { height: 40px; width: auto; }
@media (min-width: 760px) { .brand-link img { height: 48px; } }
.nav-links { display: none; gap: 22px; margin-left: auto; }
.nav-links a { color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600; }
.nav-links a:hover { color: var(--stem); text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 980px) { .nav-links { display: flex; } }
.nav .btn { white-space: nowrap; }
.nav #nav-cta { margin-left: auto; }
.nav .nav-text { display: none; margin-left: auto; }
.nav .nav-text + #nav-cta { margin-left: 0; }
@media (min-width: 600px) { .nav .nav-text { display: inline-flex; } }
@media (max-width: 420px) { .brand-link img { height: 34px; } .nav .btn { padding: 8px 14px; font-size: 14px; } .nav-in { gap: 10px; padding: 10px 16px; } }
@media (min-width: 980px) { .nav .nav-text { margin-left: 0; } }
section[id], .book-panel { scroll-margin-top: 120px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; border-radius: 999px; border: 2px solid var(--stem);
  background: var(--stem); color: #fff; font: 700 15.5px/1.2 var(--sans); text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--stem-deep); border-color: var(--stem-deep); }
.btn.ghost { background: transparent; color: var(--stem); }
.btn.ghost:hover { background: var(--stem); color: #fff; }
.btn.small { min-height: 40px; padding: 8px 16px; font-size: 14.5px; }

/* ---------- hero ---------- */
.hero { padding: 36px 0 44px; }
.hero-grid { display: grid; gap: 30px; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.1fr .9fr; gap: 48px; } .hero { padding: 56px 0 64px; } }
.hero h1 { font-size: clamp(40px, 7.2vw, 72px); line-height: 1.02; letter-spacing: -0.02em; margin-bottom: 18px; }
.hero .lede { margin-bottom: 24px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-photo { position: relative; }
.hero-photo img { border-radius: 14px; aspect-ratio: 4 / 3.4; object-fit: cover; width: 100%; box-shadow: 0 22px 50px -24px rgba(43,33,24,.55); }
.hero-photo figcaption { font-size: 14px; color: var(--soft); margin-top: 10px; }

.status {
  display: grid; gap: 6px; margin-top: 22px; padding: 14px 16px; border-left: 4px solid var(--berry);
  background: var(--card); border-radius: 0 10px 10px 0; font-size: 15.5px; max-width: 520px;
}
.status strong { font-family: var(--serif); font-size: 17px; }

/* ---------- section shells ---------- */
.sec { padding: 64px 0; }
@media (min-width: 900px) { .sec { padding: 88px 0; } }
.sec-head { margin-bottom: 30px; }
.tag { display: inline-block; font-size: 14px; font-weight: 700; color: var(--stem); margin-bottom: 10px; }

/* ---------- seasons switcher ---------- */
.seasons { background: var(--wash); }
.tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; }
@media (min-width: 860px) { .tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 359px) { .tab { padding: 10px 3px 8px; } .tab .t-name { font-size: 14px; overflow-wrap: anywhere; } }
.tab {
  display: grid; justify-items: center; gap: 4px; padding: 12px 6px 10px; cursor: pointer;
  background: var(--card); border: 2px solid var(--line); border-radius: 12px; color: var(--ink);
  font: inherit; text-align: center;
}
.tab img { width: 44px; height: 44px; }
.tab .t-name { font-family: var(--serif); font-weight: 700; font-size: 15.5px; line-height: 1.15; }
.tab .t-when { font-size: 12.5px; color: var(--soft); line-height: 1.25; }
.tab:hover { border-color: var(--soft); }
.tab[aria-selected="true"] { border-color: var(--s-accent, var(--stem)); box-shadow: inset 0 -5px 0 var(--s-accent, var(--stem)); }

.panel { display: grid; gap: 24px; background: var(--card); border-radius: 16px; padding: 18px; border: 1px solid var(--line); }
.panel[hidden] { display: none; }
@media (min-width: 860px) { .panel { grid-template-columns: 1fr 1fr; padding: 26px; gap: 36px; align-items: center; } }
.panel h3 { font-size: clamp(26px, 3.4vw, 34px); margin-bottom: 8px; color: var(--s-deep, var(--ink)); }
.panel .p-when { display: inline-block; font-weight: 700; font-size: 14.5px; color: #fff; background: var(--s-accent); padding: 4px 12px; border-radius: 999px; margin-bottom: 14px; }
.panel p { color: var(--soft); margin-bottom: 12px; }
.panel ul { padding-left: 20px; color: var(--ink); margin-bottom: 16px; }
.panel li { margin: 4px 0; }
.panel li::marker { color: var(--s-accent); }
.panel-photo img { border-radius: 12px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.panel-photo figcaption { font-size: 13.5px; color: var(--soft); margin-top: 8px; }

/* "photos coming" illustrated panel: never a fake photo */
.coming {
  position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
  background: var(--s-tint);
  display: grid; place-items: center;
}
.coming::before { /* faint repeat of the season detail as a pattern */
  content: ""; position: absolute; inset: 0; opacity: .13;
  background-image: var(--s-pattern); background-size: 56px 56px;
}
.coming img { position: relative; width: 46%; max-width: 220px; height: auto; }
.coming .pill {
  position: absolute; left: 14px; bottom: 14px; background: var(--ink); color: var(--paper);
  font-size: 13.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px;
}

/* season accent sets */
[data-season="fall"]       { --s-accent: var(--pumpkin-dark); --s-deep: var(--pumpkin-dark); --s-tint: #f6e3d3; --s-pattern: url("../img/brand/mark-fall.svg"); --s-dark: #5a2a0d; }
[data-season="holiday"]    { --s-accent: var(--berry); --s-deep: var(--evergreen-deep); --s-tint: #e3ece2; --s-pattern: url("../img/brand/mark-holiday.svg"); --s-dark: var(--evergreen-deep); }
[data-season="spring"]     { --s-accent: var(--rose); --s-deep: var(--sage); --s-tint: var(--blush); --s-pattern: url("../img/brand/mark-spring.svg"); --s-dark: var(--sage); }
[data-season="july4"]      { --s-accent: var(--barn); --s-deep: var(--navy); --s-tint: #e9ebf1; --s-pattern: url("../img/brand/mark-july4.svg"); --s-dark: var(--navy); }
[data-season="celebrate"]  { --s-accent: var(--plum); --s-deep: var(--plum); --s-tint: #efe7f1; --s-pattern: url("../img/brand/mark-celebrate.svg"); }
[data-season="storefront"] { --s-accent: var(--slate); --s-deep: var(--slate); --s-tint: #eceae6; }

/* ---------- holiday ---------- */
.holiday-top { background: var(--evergreen-deep); color: var(--snow); padding: 64px 0 56px; position: relative; overflow: hidden; }
@media (min-width: 900px) { .holiday-top { padding: 88px 0 72px; } }
.holiday-top::after { /* garland line across the bottom: evergreen with berries */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  background:
    radial-gradient(circle at 12px 5px, var(--berry) 0 3.5px, transparent 4px) 0 0 / 46px 10px repeat-x,
    radial-gradient(circle at 34px 5px, var(--gold) 0 2.5px, transparent 3px) 0 0 / 46px 10px repeat-x,
    var(--evergreen);
}
.holiday-top .tag { color: #e8c983; }
.holiday-top h2 { color: #fff; }
.holiday-top .lede { color: rgba(246,243,236,.86); }
.holiday-top .lede + .lede { margin-top: 12px; }

.timeline { list-style: none; padding: 0; margin-top: 38px; display: grid; gap: 0; counter-reset: none; }
.timeline li { position: relative; padding: 0 0 22px 30px; }
.timeline li::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: -8px; width: 2px; background: rgba(246,243,236,.25); }
.timeline li:last-child::before { display: none; }
.timeline li::after { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(184,134,43,.25); }
.timeline .d { display: block; font-family: var(--serif); font-weight: 700; font-size: 21px; color: #fff; line-height: 1.2; }
.timeline .e { display: block; font-size: 15.5px; color: rgba(246,243,236,.84); }
@media (min-width: 900px) {
  .timeline { grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .timeline li { padding: 30px 0 0 0; }
  .timeline li::before { left: 7px; right: -16px; top: 6px; bottom: auto; width: auto; height: 2px; }
  .timeline li::after { top: 0; }
}

.tiers-wrap { padding: 56px 0 64px; }
.tiers-intro { display: grid; gap: 14px; margin-bottom: 26px; }
.components { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.components li { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; font-size: 14.5px; font-weight: 600; }

.tiers { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .tiers { grid-template-columns: repeat(5, 1fr); gap: 12px; } }
.tier {
  display: grid; grid-row: span 10; grid-template-rows: subgrid; row-gap: 0;
  background: var(--card); border: 1px solid var(--line); border-top: 6px solid var(--s-deep, var(--evergreen)); border-radius: 12px; padding: 16px 16px 18px;
}
.tier.white { border-top-color: #b9bcc0; background: #fff; }
.tier.big { border-top-color: var(--s-accent, var(--berry)); }
.tier h3 { font-size: 22px; }
.tier .fit { font-size: 14.5px; color: var(--soft); margin: 4px 0 8px; line-height: 1.4; }
.tier .design { font-size: 13.5px; font-weight: 700; color: var(--s-deep, var(--evergreen)); padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.tier .row { padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; line-height: 1.4; }
.tier .row .k { display: block; font-size: 12.5px; color: var(--soft); font-weight: 600; }
.tier .extras { padding: 8px 0; font-size: 14px; }
.tier .extras ul { padding-left: 18px; }
.tier .extras li::marker { color: var(--s-accent, var(--berry)); }
.tier .extras .k { display: block; font-size: 12.5px; color: var(--s-accent, var(--berry)); font-weight: 700; }
.tier .price { margin: 0; font-weight: 700; font-size: 15px; color: var(--s-accent, var(--berry)); }
.tier .price.set { font-size: 24px; font-family: var(--serif); }

.alacarte { margin-top: 26px; background: var(--wash); border-radius: 12px; padding: 20px; }
.alacarte h3 { font-size: 20px; margin-bottom: 8px; }
.alacarte ul { list-style: none; padding: 0; display: grid; gap: 0 28px; }
@media (min-width: 700px) { .alacarte ul { grid-template-columns: 1fr 1fr; } }
.alacarte li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 15px; }
.alacarte li b { white-space: nowrap; color: var(--soft); font-weight: 600; font-size: 14px; }

.swap { margin-top: 26px; display: grid; gap: 18px; align-items: center; border: 2px solid var(--pumpkin); border-radius: 14px; padding: 20px; background: var(--card); }
@media (min-width: 760px) { .swap { grid-template-columns: auto 1fr; gap: 28px; padding: 24px 28px; } }
.swap-art { display: flex; align-items: center; gap: 8px; }
.swap-art img { width: 64px; height: 64px; }
.swap-art svg { width: 30px; height: 30px; color: var(--soft); }
.swap h3 { font-size: 24px; margin-bottom: 6px; }
.swap p { color: var(--soft); }

/* ---------- lights ---------- */
.lights { background: var(--paper); }
.lights-grid { display: grid; gap: 30px; }
@media (min-width: 940px) { .lights-grid { grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: start; } }
.night { background: var(--night); border-radius: 16px; padding: 18px 18px 20px; color: #eef1f6; }
.night svg { width: 100%; height: auto; display: block; }
.night fieldset { border: 0; padding: 0; margin-top: 12px; }
.night legend { font-size: 14.5px; font-weight: 600; margin-bottom: 8px; color: #cfd6e2; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatches label { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 12px; border-radius: 999px; border: 1.5px solid rgba(238,241,246,.28); font-size: 14px; font-weight: 600; min-height: 40px; }
.swatches input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatches label:has(input:checked) { background: #eef1f6; color: var(--night); border-color: #eef1f6; }
.swatches label:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.night .note { font-size: 13px; color: #aab3c2; margin-top: 10px; }
.bulb { transition: fill .35s ease; }
@media (prefers-reduced-motion: reduce) { .bulb { transition: none; } }

.lease { list-style: none; padding: 0; display: grid; gap: 14px; margin: 18px 0 8px; }
.lease li { padding-left: 18px; border-left: 3px solid var(--gold); }
.lease b { display: block; font-family: var(--serif); font-size: 19px; }
.lease span { color: var(--soft); font-size: 16px; }

.light-tiers { display: grid; gap: 14px; margin-top: 34px; }
@media (min-width: 760px) { .light-tiers { grid-template-columns: repeat(3, 1fr); } }
.ltier { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.ltier h3 { font-size: 22px; }
.ltier .fit { font-size: 14.5px; color: var(--soft); }
.ltier ul { padding-left: 18px; font-size: 15px; }
.ltier li::marker { color: var(--gold); }
.ltier .price { margin-top: auto; padding-top: 8px; font-weight: 700; color: var(--navy); font-size: 15px; }
.fine { margin-top: 22px; display: grid; gap: 14px; }
@media (min-width: 760px) { .fine { grid-template-columns: 1fr 1fr; } }
.fine div { background: var(--wash); border-radius: 12px; padding: 18px 20px; }
.fine h3 { font-size: 19px; margin-bottom: 6px; }
.fine p { font-size: 15.5px; color: var(--soft); }

/* ---------- how it works ---------- */
.how { background: var(--wash); }
.steps { list-style: none; padding: 0; display: grid; gap: 22px; counter-reset: step; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 30px; } }
.steps li { counter-increment: step; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; }
.steps li::before { content: counter(step); grid-row: span 2; font-family: var(--serif); font-weight: 700; font-size: 46px; line-height: .9; color: var(--stem); }
.steps h3 { font-size: 21px; }
.steps p { color: var(--soft); font-size: 16px; }

/* ---------- gallery ---------- */
.gallery { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 820px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; background: var(--wash); }
@media (min-width: 820px) { .gallery img { aspect-ratio: 4 / 3; } }
.gallery figcaption { font-size: 13.5px; color: var(--soft); margin-top: 6px; line-height: 1.35; }

/* ---------- about ---------- */
.about-grid { display: grid; gap: 22px; }
@media (min-width: 860px) { .about-grid { grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; } }
.people { display: grid; gap: 14px; }
.person { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.person img { width: 56px; height: 56px; }
.person h3 { font-size: 20px; }
.person p { color: var(--soft); font-size: 15.5px; }
.about p.body { color: var(--soft); margin-bottom: 12px; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 780px; }
details { border-bottom: 1px solid var(--line); }
details:first-of-type { border-top: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; padding: 16px 36px 16px 0; position: relative; font-weight: 700; font-size: 17px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font-size: 24px; font-weight: 400; color: var(--stem); }
details[open] summary::after { content: "\2212"; }
details p { padding: 0 0 18px; color: var(--soft); }
.faq-group { font-size: 22px; margin: 30px 0 8px; }
.faq-group:first-child { margin-top: 0; }

/* ---------- interest form ---------- */
.book { background: var(--stem); color: #f4efe4; }
.book h2 { color: #fff; }
.book .lede { color: rgba(244,239,228,.88); margin-bottom: 26px; }
.form { background: var(--card); color: var(--ink); border-radius: 16px; padding: 22px; display: grid; gap: 18px; max-width: 760px; }
@media (min-width: 640px) { .form { padding: 30px; } }
.frow { display: grid; gap: 18px; }
@media (min-width: 640px) { .frow.two { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; }
.field label, .form legend { font-size: 15px; font-weight: 700; }
.field .hint { font-weight: 500; color: var(--soft); }
input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%; padding: 12px 13px; font: 16px/1.4 var(--sans); color: var(--ink);
  background: #fff; border: 1.5px solid #cbbfa9; border-radius: 8px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--ink); }
textarea { min-height: 96px; resize: vertical; }
.form fieldset { border: 0; padding: 0; }
.form legend { margin-bottom: 10px; }
.checks { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 520px) { .checks { grid-template-columns: 1fr 1fr; } }
.checks label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 15.5px; background: #fff; }
.checks input { width: 20px; height: 20px; accent-color: var(--stem); flex: none; }
.checks label:has(input:checked) { border-color: var(--stem); background: var(--tint); }
.form .btn { justify-self: start; }
.form-note { font-size: 14px; color: var(--soft); }
.form-msg { border-radius: 10px; padding: 14px 16px; background: #fff6dc; border: 2px solid var(--daffodil); color: var(--ink); font-weight: 600; }
.form-msg[hidden] { display: none; }
.contact-line { margin-top: 20px; color: #f4efe4; }
.contact-line a { color: #fff; font-weight: 700; }

/* ---------- footer ---------- */
.foot { padding: 34px 0 44px; background: var(--paper); }
.foot-in { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; justify-content: space-between; font-size: 15px; color: var(--soft); }
.foot-in img { height: 44px; width: auto; }
.foot-in a { color: var(--stem); font-weight: 700; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* season -> package picker in the interest form (shows under a ticked season) */
.pkg-pick { grid-column: 1 / -1; background: var(--tint); border: 1.5px solid var(--stem); border-radius: 10px; padding: 12px 14px; margin: -2px 0 6px; animation: pkgIn .18s ease-out; }
.pkg-q { font-size: 14.5px; font-weight: 700; margin: 0 0 8px; color: var(--stem); }
.pkg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.checks .pkg-chip { display: inline-flex; align-items: center; gap: 0; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-size: 14px; cursor: pointer; }
.checks .pkg-chip input { position: absolute; width: auto; height: auto; opacity: 0; pointer-events: none; }
.checks .pkg-chip:has(input:checked) { background: var(--stem); border-color: var(--stem); color: #fff; }
.checks .pkg-chip:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
@keyframes pkgIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pkg-pick { animation: none; } }


/* =====================================================================
   PARITY WITH THE LIVE FALL SITE + SEASON ENGINE
   ===================================================================== */

/* ---------- promo bar (js/config.js PROMOS) ---------- */
.promo-bar { background: linear-gradient(90deg, var(--accent-deep), var(--accent)); color: #fff; text-align: center; padding: 9px 16px; font: 600 14.5px/1.45 var(--sans); }
.promo-bar a { color: #fff; font-weight: 800; text-decoration: underline; white-space: nowrap; }
.promo-short { display: none; }
@media (max-width: 760px) { .promo-bar { padding: 7px 12px; font-size: 13px; } .promo-long { display: none; } .promo-short { display: inline; } }

/* ---------- hero additions ---------- */
.kicker { font-size: 14px; font-weight: 700; color: var(--s-accent, var(--stem)); margin-bottom: 12px; letter-spacing: .01em; }
.hero h1 em { font-style: normal; color: var(--s-accent, var(--accent)); }
.hero-note { margin-top: 14px; font-size: 15px; color: var(--soft); }
.hero-note a { color: var(--s-accent, var(--stem)); font-weight: 700; }
.trust { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font-size: 14px; color: var(--soft); }
.trust li { display: inline-flex; align-items: center; gap: 6px; }
.trust li:not(:first-child)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--s-accent, var(--stem)); opacity: .7; }
.stars { color: #e0a126; letter-spacing: 2px; }
.hero-art { aspect-ratio: 4 / 3.4; border-radius: 14px; background: var(--s-dark, var(--stem)); box-shadow: 0 22px 50px -24px rgba(43,33,24,.55); }
.hero-art::before { display: none; }
.hero-art .pat { position: absolute; inset: 0; opacity: .07; background-size: 64px 64px; }
.hero-art img { width: 40%; max-width: 230px; }
.hero-art .pill { background: var(--paper); color: var(--ink); }

/* ---------- value bar ---------- */
.valuebar { background: var(--stem); color: #f4efe4; }
.valuebar ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; padding-top: 12px; padding-bottom: 12px; font-size: 14.5px; font-weight: 600; }
.valuebar li { display: inline-flex; align-items: center; gap: 8px; }
.valuebar li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--daffodil); }

/* ---------- fall packages ---------- */
.fall .tag { color: var(--pumpkin-dark); }
.closed-note { background: #fff6dc; border: 2px solid var(--daffodil); border-radius: 12px; padding: 14px 16px; margin-bottom: 22px; font-weight: 600; color: var(--ink); max-width: 760px; }
.closed-note a { color: var(--stem); }
.pkg-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .pkg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pkg-grid { grid-template-columns: repeat(3, 1fr); } }
.pkg { position: relative; background: var(--card); border: 1px solid var(--line); border-top: 5px solid var(--pumpkin); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.pkg.popular { border: 2px solid var(--pumpkin); border-top-width: 5px; }
.pkg .badge { position: absolute; top: 12px; left: 12px; z-index: 1; background: var(--pumpkin-dark); color: #fff; font-size: 13px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.pkg-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pkg .coming.pkg-photo { border-radius: 0; }
.pkg .coming img { width: 34%; }
.pkg-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pkg-name { font-size: 24px; }
.pkg-price { font-family: var(--serif); font-size: 28px; font-weight: 700; color: var(--pumpkin-dark); line-height: 1.1; font-variant-numeric: tabular-nums; }
.pkg-price small { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--soft); }
.pkg .fit { font-size: 15px; color: var(--stem); font-weight: 700; }
.pkg ul { padding-left: 18px; font-size: 15px; color: var(--soft); }
.pkg li { margin: 2px 0; }
.pkg li::marker { color: var(--pumpkin); }
.pkg-total { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); font-weight: 700; font-size: 15.5px; }
.pkg-total span { color: var(--pumpkin-dark); }
.pkg .cta-row { margin-top: auto; padding-top: 8px; }
.pkg-custom { border-top-color: var(--stem); background: var(--wash); justify-content: center; }
.pkg-custom .pkg-body { justify-content: center; }
.pkg-custom p { color: var(--soft); font-size: 15.5px; }

.addons { margin-top: 26px; background: var(--wash); border-radius: 14px; padding: 20px 22px; }
.addons h3 { font-size: 22px; margin-bottom: 10px; }
.addons-list { list-style: none; padding: 0; display: grid; gap: 0 28px; }
@media (min-width: 700px) { .addons-list { grid-template-columns: 1fr 1fr; } }
.addons-list li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 15px; }
.addons-list b { white-space: nowrap; color: var(--pumpkin-dark); }
.addons.spooky { background: var(--ink); color: #f4efe4; margin-top: 16px; }
.addons.spooky h3 { color: #fff; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.spooky-tag { font: 700 13px/1 var(--sans); background: var(--pumpkin); color: #fff; padding: 6px 10px; border-radius: 999px; }
.spooky-sub { font-size: 15px; color: #d9cfbf; margin-bottom: 12px; }
.addons.spooky .addons-list li { border-bottom-color: rgba(244,239,228,.18); }
.addons.spooky .addons-list b { color: #f7c98f; }

.weeks-h { margin: 34px 0 12px; }
.weeks { list-style: none; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); margin-bottom: 10px; }
@media (min-width: 700px) { .weeks { grid-template-columns: repeat(5, 1fr); } }
.weeks li { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; text-align: center; padding-bottom: 12px; }
.wk-label { display: block; background: var(--stem); color: #f4efe4; font-size: 13px; font-weight: 700; padding: 6px 0; }
.weeks .late .wk-label { background: var(--gold); color: var(--ink); }
.weeks li.past { opacity: .55; background: transparent; }
.weeks li.past .wk-label { background: var(--line); color: var(--soft); }
.weeks li.past .wk-dates { color: var(--soft); text-decoration: line-through; text-decoration-thickness: 2px; }
#book-form.is-closed button[type="submit"]:disabled { opacity: .55; cursor: not-allowed; }
.form-closed-note { margin: 14px 0 0; }
.wk-month { display: block; font-size: 13.5px; color: var(--soft); margin-top: 8px; font-weight: 600; }
.wk-dates { display: block; font-family: var(--serif); font-size: 30px; font-weight: 700; color: var(--pumpkin-dark); line-height: 1.15; }
.wk-dates.small { font-size: 22px; padding-top: 5px; }

.promise { margin-top: 34px; background: var(--ink); color: #f4efe4; border-radius: 16px; padding: 24px 22px; }
@media (min-width: 760px) { .promise { padding: 30px; } }
.promise h3 { color: #fff; font-size: clamp(24px, 3vw, 30px); }
.promise-sub { color: #d9cfbf; margin: 4px 0 18px; }
.promise-grid { display: grid; gap: 14px; }
@media (min-width: 760px) { .promise-grid { grid-template-columns: repeat(3, 1fr); } }
.promise-grid div { border: 1px solid rgba(244,239,228,.25); border-radius: 12px; padding: 18px; }
.promise h4 { font-size: 17px; color: #f7c98f; margin-bottom: 6px; }
.promise-grid p { font-size: 15px; color: rgba(244,239,228,.86); }
.promise a { color: #f7c98f; }

.lights-cta { margin-top: 22px; }
.gallery-more { margin-top: 18px; color: var(--soft); }
.gallery-more a { font-weight: 700; }

/* ---------- reviews ---------- */
.reviews { background: var(--wash); }
.rating { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 17px; }
.rating .stars { font-size: 22px; }
.rating b { font-size: 20px; }
.rating span:last-child { color: var(--soft); }
.rev-grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .rev-grid { grid-template-columns: repeat(3, 1fr); } }
.rev { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; }
.rev blockquote { margin: 0; font-size: 16px; line-height: 1.6; flex: 1; }
.rev figcaption b { display: block; }
.rev figcaption span { font-size: 14px; color: var(--soft); }
.rev-more { margin-top: 20px; }
.rev-more a { font-weight: 700; }

/* ---------- service area ---------- */
.zone-grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .zone-grid { grid-template-columns: repeat(3, 1fr); } }
.zone { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.zone h3 { font-size: 19px; }
.zone .fee { font-weight: 700; color: var(--stem); margin: 6px 0 8px; }
.zone p:not(.fee) { font-size: 15px; color: var(--soft); }

.about .sig { font-family: var(--serif); font-size: 19px; color: var(--ink); }

/* ---------- book + list ---------- */
.book-switch { display: grid; gap: 10px; margin-bottom: 18px; max-width: 760px; }
@media (min-width: 560px) { .book-switch { grid-template-columns: 1fr 1fr; } }
.book-switch button { display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; cursor: pointer; padding: 12px 14px; border-radius: 12px; border: 2px solid rgba(244,239,228,.4); background: transparent; color: #f4efe4; min-height: 64px; }
.book-switch button img { width: 36px; height: 36px; flex: none; background: var(--paper); border-radius: 8px; padding: 2px; }
.book-switch b { display: block; font-size: 16px; }
.book-switch small { display: block; font-size: 13.5px; opacity: .85; }
.book-switch button:hover { border-color: #f4efe4; }
.book-switch button[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.book-panel { max-width: 760px; }
.book-panel + .book-panel { margin-top: 34px; }
.panel-h { color: #fff; font-size: clamp(24px, 3vw, 30px); margin-bottom: 6px; }
.panel-sub { color: rgba(244,239,228,.88); margin-bottom: 18px; }
select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232b2118' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px; }
input.file { width: 100%; padding: 10px; border: 1.5px dashed #cbbfa9; border-radius: 8px; background: #fff; font: 14.5px var(--sans); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 9px 15px; border: 1.5px solid #cbbfa9; border-radius: 999px; background: #fff; font-size: 15px; font-weight: 600; cursor: pointer; user-select: none; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip:has(input:checked) { background: var(--stem); border-color: var(--stem); color: #fff; }
.chip:has(input:checked)::before { content: "\2713"; margin-right: 6px; font-weight: 800; }
.chip:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.fineprint { display: grid; gap: 10px; font-size: 14.5px; color: var(--soft); border-top: 1px solid var(--line); padding-top: 14px; }
.fineprint label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.fineprint input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--stem); }
.fineprint a { font-weight: 700; }
.sent-banner { background: var(--card); color: var(--ink); border-radius: 16px; padding: 22px 24px; border-left: 6px solid var(--daffodil); margin-bottom: 22px; }
.sent-banner h3 { color: var(--stem); font-size: 24px; margin-bottom: 8px; }
.sent-banner p { color: var(--soft); margin-bottom: 8px; }
.sent-banner p:last-child { margin-bottom: 0; }
.contact-line { max-width: 760px; }

/* ---------- modals (deposit + promo) ---------- */
.modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(43,33,24,.62); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { position: relative; width: 100%; max-width: 430px; max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--paper); border-radius: 18px; border-top: 6px solid var(--accent); padding: 28px 24px 22px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.modal h3 { font-size: 26px; color: var(--stem); margin-bottom: 10px; }
.modal p { color: var(--soft); font-size: 15.5px; margin: 0 auto 12px; }
.modal p b { color: var(--ink); }
.modal .btn { display: flex; width: 100%; margin-bottom: 10px; }
.modal-mark { width: 64px; height: 64px; margin: 0 auto 8px; }
.modal-x { position: absolute; top: 8px; right: 10px; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; font-size: 28px; line-height: 1; color: var(--soft); }
.modal-later { background: none; border: 0; cursor: pointer; font: inherit; font-size: 15px; color: var(--soft); text-decoration: underline; padding: 8px; min-height: 44px; }
.promo-modal { padding: 0 0 18px; }
.promo-img { width: 100%; height: 170px; object-fit: cover; }
.promo-modal .modal-x { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.7); z-index: 1; }
.pm-body { padding: 18px 22px 0; }
.promo-modal .pm-kicker { font-size: 14px; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.promo-modal h3 { color: var(--ink); font-size: 28px; }
.pm-code { display: inline-block; border: 2px dashed var(--accent); color: var(--accent); font-weight: 800; letter-spacing: .12em; padding: 6px 16px; border-radius: 8px; margin: 2px 0 14px; font-size: 18px; }
.promo-modal .pm-fine { font-size: 13px; margin-top: 4px; }
/* $50 list popup (js/site.js) */
.join-modal .jm-kicker { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.jm-form { display: grid; gap: 12px; text-align: left; margin: 6px 0 4px; }
.jm-form label { display: grid; gap: 5px; font-size: 14px; font-weight: 700; color: var(--ink); }
.jm-form label span { font-weight: 500; color: var(--soft); }
.jm-form input[type=text], .jm-form input[type=email], .jm-form input[type=tel] { font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); min-width: 0; }
.jm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 380px) { .jm-two { grid-template-columns: 1fr; } }
.jm-form .jm-consent { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; font-size: 13px; color: var(--soft); }
.jm-consent input { margin-top: 3px; flex: none; }
.jm-trap { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.jm-msg { color: var(--berry); font-size: 14px; margin: 0; }
.jm-form .btn { margin: 4px 0 0; }

/* ---------- footer additions ---------- */
.foot { border-top: 1px solid var(--line); }
.foot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.foot-actions .btn.small { min-height: 44px; }
.foot-in .foot-actions a.btn { color: var(--stem); }
.foot-in .foot-actions a.btn:not(.ghost) { color: #fff; }
.social { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--stem); }
.legal { flex-basis: 100%; font-size: 14px; }

/* very narrow phones (320-360px): keep the header CTA on screen */
@media (max-width: 360px) {
  .brand-link { flex: 1 1 auto; min-width: 0; }
  .brand-link img { height: 28px; max-width: 100%; }
  .nav .btn { padding: 7px 11px; font-size: 13px; }
  .nav-in { gap: 8px; padding: 8px 12px; }
}


/* =====================================================================
   ONE SEASON AT A TIME on the main page: html data-current is set by
   js/seasons.js from the date. Blocks for other seasons are hidden here
   and live on their own season pages.
   ===================================================================== */
html[data-current="fall"] [data-block]:not([data-block="fall"]),
html[data-current="holiday"] [data-block]:not([data-block="holiday"]),
html[data-current="spring"] [data-block]:not([data-block="spring"]),
html[data-current="july4"] [data-block]:not([data-block="july4"]) { display: none !important; }
html[data-current="fall"] [data-block-not="fall"] { display: none !important; }

/* focus ring on dark sections: a light ring so it stays visible */
.book-switch button:focus-visible, .contact-line a:focus-visible, .holiday-top a:focus-visible,
.promise a:focus-visible, .valuebar a:focus-visible, .promo-bar a:focus-visible { outline-color: #f4efe4; }

/* booking status for seasons that are not open yet (holiday menu, lights) */
.season-status {
  max-width: 760px; margin: 0 0 22px; padding: 12px 16px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--berry);
  font-size: 15.5px; color: var(--soft);
}
.season-status b { color: var(--berry); }
.season-status a { color: var(--evergreen-deep); font-weight: 700; }
.season-status.is-open { border-left-color: var(--evergreen); }
.season-status.is-open b { color: var(--evergreen); }
.lights .season-status { margin: 14px 0 0; }
.tier-foot { align-self: end; display: grid; gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.tier-cta { margin: 0; }
.tier .tier-cta .btn { width: 100%; border-color: var(--s-deep, var(--evergreen)); color: var(--s-deep, var(--evergreen-deep)); }
.tier .tier-cta .btn:hover { background: var(--s-deep, var(--evergreen)); color: #fff; }

/* ---------- FAQ blocks ---------- */
.faq-block { margin-bottom: 30px; }
.faq-block:last-child { margin-bottom: 0; }
.faq-block .faq-group { margin: 0 0 8px; }

/* ---------- spring + July 4th sections ---------- */
.season-sec:nth-of-type(odd) { background: var(--wash); }
.season-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .season-grid { grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: start; } }
.season-sec .tag { color: var(--s-accent); }
.season-sec .season-status { margin: 18px 0 26px; border-left-color: var(--s-accent); }
.season-sec .season-status b { color: var(--s-accent); }
.season-sec .season-status a { color: var(--s-deep); }
.season-facts { display: grid; gap: 18px; margin-top: 24px; }
@media (min-width: 640px) { .season-facts { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
.season-facts h3 { font-size: 19px; margin-bottom: 6px; color: var(--s-deep); }
.season-facts p, .season-facts ul { font-size: 15.5px; color: var(--soft); }
.season-facts ul { padding-left: 18px; }
.season-facts li::marker { color: var(--s-accent); }
.season-grid .season-art { position: sticky; top: 140px; }

/* ---------- celebrations + storefronts ---------- */
.more { background: var(--wash); }
.more-grid { display: grid; gap: 18px; }
@media (min-width: 760px) { .more-grid { grid-template-columns: 1fr 1fr; } }
.more-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.more-card > img, .more-card > .coming { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.more-card > .coming img { width: 22%; }
.more-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.more-body h3 { font-size: 22px; color: var(--s-deep); }
.more-body p { color: var(--soft); font-size: 15.5px; flex: 1; }

/* ---------- footer season list ---------- */
.foot-seasons { display: flex; flex-wrap: wrap; gap: 8px 20px; flex-basis: 100%; }
.foot-seasons a { font-weight: 700; }

/* ---------- season pages ---------- */
.page-status { margin: -8px 0 22px; font-size: 16px; color: var(--soft); max-width: 56ch; }
.page-status b { color: var(--s-accent); }
.season-hero .hero-photo .coming { aspect-ratio: 4 / 3.4; }
.hero-more { margin-top: 18px; font-size: 15px; }
.hero-more a { color: var(--stem); font-weight: 700; }
.booknow-box { background: var(--card); color: var(--ink); border-radius: 16px; padding: 22px 24px; max-width: 760px; }
.booknow-box h3 { color: var(--stem); font-size: clamp(22px, 3vw, 28px); margin-bottom: 6px; }
.booknow-box p { color: var(--soft); margin-bottom: 14px; }
.other-seasons { background: var(--wash); }
.other-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .other-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .other-grid { grid-template-columns: repeat(4, 1fr); } }
.other-grid a {
  display: grid; grid-template-columns: 52px 1fr; gap: 4px 14px; align-items: center;
  padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); text-decoration: none; min-height: 44px;
}
.other-grid a:hover { border-color: var(--s-accent, var(--stem)); }
.other-grid img { width: 52px; height: 52px; grid-row: span 2; }
.other-grid b { font-family: var(--serif); font-size: 18px; line-height: 1.2; }
.other-grid span { font-size: 14px; color: var(--soft); }

/* on spring.html and july4.html the hero already shows the mark and booking status */
html:not([data-page="home"]) .season-grid > .season-art,
html:not([data-page="home"]) .season-sec .season-status { display: none; }
html:not([data-page="home"]) .season-grid { grid-template-columns: 1fr; }

/* ---------- four-tier and three-tier menus ---------- */
@media (min-width: 1000px) { .tiers.n4 { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
/* three tiers (spring, July 4th, celebrations, storefronts): one row of three from tablet up */
@media (min-width: 860px) { .tiers.n3 { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
/* two tiers (celebrations): a pair of cards, lined up with the two boxes below them */
@media (min-width: 640px) { .tiers.n2 { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
.tier .price small { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--soft); }
.pk-lede { max-width: 760px; margin: -6px 0 22px; }
.pk-more { display: grid; gap: 18px; margin-top: 26px; }
@media (min-width: 900px) { .pk-more { grid-template-columns: 1fr 1fr; } }
.pk-more .alacarte { margin-top: 0; }
.pk-more .alacarte ul { grid-template-columns: 1fr; }
.pk-more .alacarte li b { color: var(--ink, inherit); }
.pk-more .alacarte li span b { font-size: inherit; font-weight: 700; white-space: normal; }
.season-menu { margin-top: 48px; }
.menu-h { font-size: clamp(24px, 3vw, 30px); margin-bottom: 8px; color: var(--s-deep); }
.draft-note {
  display: inline-block; margin-bottom: 18px; padding: 5px 12px; border-radius: 999px;
  background: var(--card); border: 1px dashed var(--s-accent); color: var(--s-deep); font-size: 14px; font-weight: 600;
}
.season-sec .alacarte { background: var(--card); border: 1px solid var(--line); }

/* ---------- compact package menu in the main page season previews ---------- */
.mini { margin: 4px 0 18px; }
.mini-menu { list-style: none; padding: 0 !important; margin: 0 !important; border-top: 1px solid var(--line); }
.mini-menu li {
  display: grid; grid-template-columns: 1fr auto; gap: 0 14px; align-items: baseline;
  padding: 9px 0; margin: 0 !important; border-bottom: 1px dashed var(--line);
}
.mm-name { font-family: var(--serif); font-weight: 700; font-size: 17px; color: var(--ink); }
.mm-price { font-weight: 700; color: var(--s-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mm-price.pending { white-space: normal; font-size: 13px; font-weight: 600; color: var(--soft); text-align: right; max-width: 18ch; line-height: 1.3; }
.mm-what { grid-column: 1 / -1; font-size: 14px; color: var(--soft); line-height: 1.4; }
.panel .mm-note { font-size: 13.5px; margin: 8px 0 0; color: var(--s-deep); font-weight: 600; }

/* ---------- drawings (img/illus): placeholders until real photos exist ---------- */
.tier-img { width: calc(100% + 32px); max-width: none; margin: -16px -16px 12px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px 6px 0 0; }
.ltier .tier-img { width: calc(100% + 36px); margin: -18px -18px 4px; }
.ltier { overflow: hidden; }
.season-art img { border-radius: 12px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.season-art figcaption { font-size: 13.5px; color: var(--soft); margin-top: 8px; }
.photos-soon { background: var(--wash); }
.photos-soon-grid { display: grid; gap: 24px; align-items: center; }
@media (min-width: 820px) { .photos-soon-grid { grid-template-columns: .9fr 1.1fr; gap: 44px; } }
.photos-soon img { border-radius: 14px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photos-soon .lede { margin-bottom: 18px; }
.more-card > .coming { aspect-ratio: 16 / 9; }

/* =====================================================================
   HEADER: "Seasons" dropdown (desktop) + menu panel (mobile)
   ===================================================================== */
.dd { position: relative; display: flex; align-items: center; }
.dd-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px;
  background: none; border: 0; cursor: pointer; font: 600 15px/1 var(--sans); color: var(--ink);
}
.dd-btn:hover { color: var(--stem); }
.dd-btn .chev { transition: transform .2s ease; }
.dd-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.dd-menu {
  position: absolute; top: calc(100% + 8px); left: -14px; z-index: 45; min-width: 330px; white-space: nowrap;
  list-style: none; margin: 0; padding: 8px; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 18px 40px -18px rgba(43, 33, 24, .4);
}
.dd-menu a, .mm-seasons a {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600;
}
.dd-menu a:hover, .mm-seasons a:hover { background: var(--wash); color: var(--ink); text-decoration: none; }
.dd-menu a:focus-visible, .mm-seasons a:focus-visible { outline-offset: 0; }
.dd-menu a[aria-current="page"], .mm-seasons a[aria-current="page"] { background: var(--wash); }
.dd-menu img, .mm-seasons img { width: 32px; height: 32px; flex: none; }
.now-tag { margin-left: auto; padding: 2px 9px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }
.menu-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px;
  background: none; border: 1.5px solid var(--line); border-radius: 10px; color: var(--ink); cursor: pointer;
}
.menu-btn[aria-expanded="true"] { background: var(--wash); border-color: var(--soft); }
.mobile-menu {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 45; background: var(--paper);
  border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px -20px rgba(43, 33, 24, .45);
  max-height: calc(100dvh - 140px); overflow-y: auto;
}
.mm-in { max-width: 1120px; margin: 0 auto; padding: 10px 16px 18px; }
.mm-label { font-size: 14px; font-weight: 700; color: var(--soft); margin: 4px 10px 4px; }
.mm-seasons, .mm-links { list-style: none; padding: 0; margin: 0; }
.mm-seasons { display: grid; gap: 2px; }
@media (min-width: 600px) { .mm-seasons { grid-template-columns: 1fr 1fr; } }
.mm-links { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.mm-links a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--ink); font-weight: 600; text-decoration: none; }
@media (min-width: 980px) {
  .menu-btn { display: none; }
  .mobile-menu { display: none !important; }
  .nav-links { align-items: center; }
}
@media (max-width: 979px) { .nav #nav-cta { margin-left: auto; } .nav .nav-text + #nav-cta { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .dd-btn .chev { transition: none; } }

/* ---------- celebrations + storefronts strip on the main page ---------- */
.more-strip { display: grid; gap: 22px; align-items: center; }
@media (min-width: 900px) { .more-strip { grid-template-columns: 1fr 1.2fr; gap: 40px; } }
.more-strip h2 { font-size: clamp(26px, 3.4vw, 34px); }
.more-links { display: grid; gap: 12px; }
@media (min-width: 560px) { .more-links { grid-template-columns: 1fr 1fr; } }
.more-links a {
  display: grid; grid-template-columns: 48px 1fr; gap: 2px 14px; align-items: center; padding: 14px 16px; min-height: 44px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none;
}
.more-links a:hover { border-color: var(--s-accent); }
.more-links img { grid-row: span 2; width: 48px; height: 48px; }
.more-links b { font-family: var(--serif); font-size: 18px; line-height: 1.2; }
.more-links span { font-size: 14px; color: var(--soft); }

/* ---------- other pages strip on season pages: 5 links ---------- */
.other-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; }

/* header row on phones and tablets: logo + main button + menu button must fit at 320px */
@media (max-width: 979px) {
  .nav-in { gap: 10px; }
  .brand-link { flex: 0 1 auto; min-width: 0; }
  .brand-link img { height: auto; max-height: 44px; max-width: 100%; }
}
@media (max-width: 420px) { .brand-link img { max-height: 34px; } }
@media (max-width: 360px) { .brand-link img { max-height: 28px; } .menu-btn { width: 40px; height: 40px; } }

/* =====================================================================
   SEO round: core phrase inside the H1 (small first line), towns block,
   and the Christmas lights gate (js/config.js, HIC registration)
   ===================================================================== */
.hero h1 .h1-lead { display: block; font-family: var(--sans); font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: .01em; margin-bottom: 12px; }
.hero h1 .h1-main { display: block; }
.hero-lights { margin-top: 10px; }
.hero-lights a { color: var(--s-accent, var(--stem)); font-weight: 700; }

html.hide-lights [data-lights] { display: none !important; }
/* Christmas lights before the HIC number (js/config.js): waitlist only */
html.lights-waitlist [data-lights-full] { display: none !important; }
/* after the HIC number: the lights waitlist is gone */
html.lights-live [data-lights-waitlist] { display: none !important; }

/* LIGHTS FREE PREVIEW (christmas-lights.html #preview, 2026-10-19). Hidden until LIGHTS_PREVIEW_LIVE (js/config.js) */
html:not(.lp-on) #preview { display: none !important; }
.lp { background: var(--night, #14231a); color: #eef1f6; }
.lp h2 { color: #fff; }
.lp .tag { color: #f2c66b; }
.lp .lede { color: #d9dee6; }
.lp-grid { display: grid; gap: 26px; align-items: center; }
@media (min-width: 900px) { .lp-grid { grid-template-columns: .85fr 1.15fr; gap: 44px; } }
.lp-copy, .lp-fig { min-width: 0; }
.lp-steps { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; }
.lp-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; }
.lp-steps b { width: 30px; height: 30px; border-radius: 50%; background: #f2c66b; color: #14231a; display: grid; place-items: center; font-family: var(--serif); }
.lp-soon { color: #f2c66b; font-weight: 600; margin-bottom: 12px; }
.lp-cta .btn { background: #f2c66b; color: #14231a; border-color: #f2c66b; }
.lp-fig { margin: 0; }
.lp-frame { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 1200 / 747; max-width: 100%; background: #0b1410; touch-action: pan-y; }
.lp-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-after { clip-path: inset(0 0 0 var(--pos)); }
.lp-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .5); pointer-events: none; }
.lp-line::after { content: ""; position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
.lp-label { position: absolute; top: 12px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: rgba(0, 0, 0, .55); color: #fff; padding: 4px 9px; border-radius: 99px; pointer-events: none; }
.lp-l1 { left: 12px; } .lp-l2 { right: 12px; }
.lp-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.lp-range:focus-visible + .lp-line, .lp-frame:focus-within .lp-line { background: #f2c66b; }
.lp-tabs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.lp-tabs input { position: absolute; opacity: 0; pointer-events: none; }
.lp-tabs span { display: inline-block; padding: 7px 14px; border-radius: 99px; border: 1.5px solid rgba(255, 255, 255, .45); font-weight: 700; font-size: 14.5px; cursor: pointer; }
.lp-tabs input:checked + span { background: #f2c66b; color: #14231a; border-color: #f2c66b; }
.lp-tabs input:focus-visible + span { outline: 3px solid #f2c66b; outline-offset: 2px; }
.lp-fig figcaption { margin-top: 10px; font-size: 14px; color: #b9c2cc; }

/* CHRISTMAS OPTIONS + TREE DELIVERY (holiday.html, 2026-10-19) */
html:not(.tree-prices) [data-tree-price] { display: none !important; }
html.tree-prices [data-tree-soon] { display: none !important; }
.xopt-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .xopt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.xopt { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.xopt:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .45); }
.xopt img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--wash); }
.xopt-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.xopt-kicker { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.xopt-title { font-family: var(--serif); font-weight: 700; font-size: 22px; line-height: 1.15; }
.xopt-text { color: var(--soft); font-size: 16px; }
.xopt-price { font-family: var(--serif); font-weight: 700; font-size: 19px; color: var(--stem); margin-top: auto; padding-top: 6px; }
.xopt-go { font-weight: 700; color: var(--stem); text-decoration: underline; text-underline-offset: 3px; }
.xopt[data-xopt="lights"] { order: 2; }
.xopt[data-xopt="porch"] { order: 1; }
.xopt[data-xopt="trees"] { order: 3; }
html.lights-live .xopt[data-xopt="lights"] { order: 0; }
.xopt-note { margin-top: 18px; color: var(--soft); text-align: center; }
@media (prefers-reduced-motion: reduce) { .xopt { transition: none; } .xopt:hover { transform: none; } }
.trees { background: var(--wash); }
.trees-grid { display: grid; gap: 26px; align-items: start; }
@media (min-width: 860px) { .trees-grid { grid-template-columns: 1.1fr .9fr; gap: 44px; } }
.trees-art img { width: 100%; border-radius: 16px; background: var(--card); }
.trees-art { margin: 0; }
.tree-prices { display: grid; gap: 12px; margin-top: 8px; }
.tree-table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 12px; overflow: hidden; font-variant-numeric: tabular-nums; }
.tree-table th, .tree-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.tree-table th { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--soft); }
.tree-table .r { text-align: right; font-family: var(--serif); font-weight: 700; }
.tree-adds { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.tree-adds li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 2px; border-bottom: 1px dashed var(--line); }
.tree-adds b { font-family: var(--serif); white-space: nowrap; }
.tree-soon { margin-top: 10px; font-weight: 600; color: var(--stem); }
.tree-cta { margin-top: 16px; }
.scroll-x { overflow-x: auto; }

.towns { background: var(--paper); }
.towns h2 { font-size: clamp(26px, 3.4vw, 34px); }
.town-list { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 900px; }
.town-list li { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 14.5px; }
.town-list li:last-child { border-style: dashed; color: var(--soft); }

/* holiday.html: prominent link to the Christmas lights page */
.lights-link { background: var(--night); color: #eef1f6; }
.lights-link-grid { display: grid; gap: 22px; align-items: center; }
@media (min-width: 820px) { .lights-link-grid { grid-template-columns: .9fr 1.1fr; gap: 44px; } }
.lights-link img { border-radius: 14px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.lights-link h2 { color: #fff; }
.lights-link .lede { color: #cfd6e2; margin-bottom: 18px; }
.lights-link .btn { background: #ffd18a; border-color: #ffd18a; color: #161d2b; }
.lights-link .btn:hover { background: #fff; border-color: #fff; }
.lights-link a:focus-visible { outline-color: #f4efe4; }

/* season pages: a sentence that links to related pages */
.related-line { margin-top: 18px; font-size: 16px; color: var(--soft); }
.related-line a { font-weight: 700; }

/* =====================================================================
   HERO BACKGROUND BLEND (test run, Jonathan 2026-10-03)
   The hero's own picture, heavily blurred and scaled up, sits behind the
   whole hero; a paper-colored wash keeps the text WCAG AA readable, and
   the bottom fades into the page so there is no hard edge.
   js/site.js sets --hero-bg to whatever picture the hero is showing.

   TO TURN IT OFF: change  --hero-blend: 1  to  --hero-blend: 0  below.
   ===================================================================== */
:root { --hero-blend: 1; --hero-blur: 26px; }  /* lower blur = more photo shows through */
@media (prefers-reduced-transparency: reduce) { :root { --hero-blend: 0; } }

.hero { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
.hero::before,
.hero::after { content: ""; position: absolute; pointer-events: none; opacity: var(--hero-blend); }
.hero::before {                      /* the blurred picture: drawn once, never animates */
  inset: -60px; z-index: -2;
  background: var(--hero-bg, none) center / cover no-repeat;
  filter: blur(var(--hero-blur)) saturate(1.15);
  transform: scale(1.12);
}
.hero::after {                       /* the readable wash + soft fade into the next section */
  inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, transparent 0, transparent calc(100% - 120px), var(--paper) 100%),
    linear-gradient(100deg,
      color-mix(in srgb, var(--paper) 80%, transparent) 0%,
      color-mix(in srgb, var(--paper) 72%, transparent) 50%,
      color-mix(in srgb, var(--paper) 55%, transparent) 100%);
}
@media (max-width: 899px) {          /* photo stacks under the text on phones */
  .hero::after {
    background:
      linear-gradient(to bottom, transparent 0, transparent calc(100% - 100px), var(--paper) 100%),
      linear-gradient(to bottom,
        color-mix(in srgb, var(--paper) 82%, transparent) 0%,
        color-mix(in srgb, var(--paper) 74%, transparent) 62%,
        color-mix(in srgb, var(--paper) 60%, transparent) 100%);
  }
}
/* captions sit over the thinner part of the wash, so they get their own paper backing */
.hero-photo figcaption {
  display: inline-block; padding: 3px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
}

/* ---------- Pascack Porches Holiday Lighting (Christmas lights sub-brand) ---------- */
.lights-link .lights-link-logo { width: 260px; max-width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 0; margin-bottom: 14px; }
.sub-brand-line { flex-basis: 100%; font-size: 14px; color: var(--soft); }
/* small accent text over the hero wash: a touch deeper so it passes AA even over the darkest blur */
.hero h1 .h1-lead, .hero .hero-note a, .hero .hero-lights a, .hero .page-status b { color: color-mix(in srgb, var(--s-accent, var(--stem)) 80%, var(--ink)); }

/* =====================================================================
   HOLIDAY NIGHT HERO (test run, 2026-10-03)
   html.night-hero is set by js/seasons.js when HOLIDAY_NIGHT_HERO is true
   (js/config.js) on holiday.html, christmas-lights.html, and the main page in
   holiday mode. Full-bleed night scene, dark overlay, cream type, gold button.
   The picture is our drawing until HOLIDAY_NIGHT_PHOTO points at a real photo.
   Snow (js/snow.js) draws on canvas.snow between the picture and the text.
   ===================================================================== */
html.night-hero .hero {
  background: #0b1220; color: #f6efe0;
  min-height: min(86vh, 780px); display: flex; align-items: center;
  padding: 72px 0 80px;
}
html.night-hero .hero > .wrap { position: relative; z-index: 1; width: 100%; }
html.night-hero .hero::before {
  inset: 0; transform: none; filter: none; opacity: 1;
  background: var(--night-img, url("../img/illus/holiday-night-hero.svg")) 72% 50% / cover no-repeat;
}
html.night-hero .hero::after {
  opacity: 1;
  background:
    linear-gradient(to bottom, rgba(8, 12, 22, .35) 0%, rgba(8, 12, 22, 0) 22%, rgba(8, 12, 22, 0) 78%, rgba(8, 12, 22, .6) 100%),
    linear-gradient(90deg, rgba(8, 12, 22, .9) 0%, rgba(8, 12, 22, .82) 54%, rgba(8, 12, 22, .22) 100%);
}
@media (max-width: 899px) {
  html.night-hero .hero { min-height: 0; padding: 56px 0 64px; }
  html.night-hero .hero::before { background-position: 68% 62%; }
  html.night-hero .hero::after {
    background: linear-gradient(to bottom, rgba(8, 12, 22, .86) 0%, rgba(8, 12, 22, .8) 70%, rgba(8, 12, 22, .72) 100%);
  }
}
html.night-hero .hero .hero-photo { display: none; }   /* the full-bleed scene replaces the photo card */
.hero canvas.snow { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

html.night-hero .hero h1,
html.night-hero .hero h1 .h1-main { color: #f6efe0; }
html.night-hero .hero h1 em { color: #f2c66b; }
html.night-hero .hero h1 .h1-lead { color: #f2c66b; }
html.night-hero .hero .lede,
html.night-hero .hero .hero-note,
html.night-hero .hero .page-status,
html.night-hero .hero .hero-more,
html.night-hero .hero .trust { color: #e4dccb; }
html.night-hero .hero .page-status b { color: #f2c66b; }
html.night-hero .hero a:not(.btn) { color: #f2c66b; }
html.night-hero .hero .trust li:not(:first-child)::before { background: #f2c66b; opacity: 1; }
html.night-hero .hero .btn { background: #e0b24f; border-color: #e0b24f; color: #161d2b; }
html.night-hero .hero .btn:hover { background: #f2c66b; border-color: #f2c66b; }
html.night-hero .hero .btn.ghost { background: transparent; border-color: #f6efe0; color: #f6efe0; }
html.night-hero .hero .btn.ghost:hover { background: #f6efe0; color: #161d2b; }
html.night-hero .hero :focus-visible { outline-color: #f6efe0; }

/* =====================================================================
   BATCH 2026-10-03: countdown, trust links, email list, referrals,
   lights quote, seasonal helper, porch video
   ===================================================================== */
section[id], .book-panel, #quote { scroll-margin-top: 150px; }

/* countdown bar (header, every page): fixed height so nothing jumps */
.countdown { height: 30px; background: var(--stem-deep); color: #f4efe4; overflow: hidden; }
.cd-in { max-width: 1120px; height: 30px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 600; line-height: 1; white-space: nowrap; text-align: center; }
.cd-num { font-variant-numeric: tabular-nums; font-weight: 800; color: #ffd18a; }
.cd-min { display: none; }
@media (min-width: 760px) { .cd-min { display: inline; } .cd-in { font-size: 14px; } }
.countdown a { color: #fff; font-weight: 800; margin-left: 6px; }
.countdown a:focus-visible { outline-color: #f4efe4; }
@media (max-width: 359px) { .cd-in { font-size: 12.5px; padding: 0 10px; } }

/* trust row items can be links (Google rating) */
.trust a { color: inherit; text-decoration: none; }
.trust a:hover { text-decoration: underline; }
.season-hero .trust { margin-top: 16px; }

/* email list */
.foot-signup { flex-basis: 100%; }
.signup { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: grid; gap: 12px; max-width: 760px; color: var(--ink); }
.signup-h { font-size: 21px; }
.signup-text, .signup-privacy { font-size: 14.5px; color: var(--soft); }
.signup-row { display: grid; gap: 12px; }
@media (min-width: 640px) { .signup-row { grid-template-columns: 1.3fr 1fr; } }
.signup-seasons { border: 0; padding: 0; margin: 0; }
.signup-seasons legend { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.signup-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.signup .btn { justify-self: start; }
.inline-signup { margin-top: 26px; }
.book .inline-signup .signup { border-color: transparent; }

/* referrals */
.referrals { background: var(--wash); }
.ref-grid { display: grid; gap: 26px; }
@media (min-width: 900px) { .ref-grid { grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; } }
.ref-perks { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; }
.ref-perks li { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: 10px; padding: 12px 14px; }
.ref-perks b { display: block; font-family: var(--serif); font-size: 21px; color: var(--accent); }
.ref-perks span { color: var(--soft); font-size: 15px; }
.ref-review, .about-ref { color: var(--soft); }
.ref-review a, .about-ref a { font-weight: 700; }
.ref-form-h { font-size: 22px; }
.draft-flag { display: inline-block; margin-bottom: 14px; padding: 4px 12px; border: 2px dashed var(--accent); border-radius: 999px;
  font-size: 13.5px; font-weight: 700; color: var(--accent); }
.thanks-note { max-width: 1120px; margin: 14px auto 0; padding: 12px 16px; border-radius: 10px; background: #fff6dc; border: 2px solid var(--daffodil); font-weight: 600; }

/* Christmas lights quote wizard */
.quote { background: var(--wash); }
.wiz { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; max-width: 760px; display: grid; gap: 14px; }
@media (min-width: 640px) { .wiz { padding: 26px; } }
.wiz-top { display: grid; gap: 6px; }
.wiz-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.wiz-bar span { display: block; height: 100%; width: 0; background: var(--stem); border-radius: 999px; transition: width .25s ease; }
@media (prefers-reduced-motion: reduce) { .wiz-bar span { transition: none; } }
.wiz-count { font-size: 14px; font-weight: 700; color: var(--soft); }
.wiz-step { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 12px; }
.wiz-step[hidden] { display: none; }
.wiz-step legend { font-family: var(--serif); font-weight: 700; font-size: clamp(22px, 3vw, 28px); line-height: 1.2; margin-bottom: 4px; padding: 0; }
.wiz-step legend:focus { outline: none; }
.wiz-step legend:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.wiz-help { color: var(--soft); font-size: 15px; }
.wiz-options { display: grid; gap: 8px; }
@media (min-width: 560px) { .wiz-options { grid-template-columns: 1fr 1fr; } }
.wiz-opt { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px;
  border: 1.5px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; font-size: 15.5px; font-weight: 600; }
.wiz-opt input { width: 20px; height: 20px; flex: none; accent-color: var(--stem); margin: 0; }
.wiz-opt:has(input:checked) { border-color: var(--stem); background: var(--tint); }
.wiz-opt:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.wiz-opt .dots { margin-right: 6px; }
.wiz-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--soft); }
.wiz-consent input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--stem); }
.wiz-error { color: #9e2236; font-weight: 700; font-size: 15px; }
.wiz-summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 0; margin: 0; }
@media (min-width: 560px) { .wiz-summary { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.wiz-summary dt { font-size: 14px; font-weight: 700; color: var(--soft); padding-top: 8px; }
.wiz-summary dd { margin: 0; padding: 2px 0 8px; border-bottom: 1px dashed var(--line); overflow-wrap: anywhere; }
@media (min-width: 560px) { .wiz-summary dt { padding: 8px 12px 8px 0; border-bottom: 1px dashed var(--line); } .wiz-summary dd { padding: 8px 0; } }
.wiz-promise { font-weight: 700; color: var(--stem); }
.wiz-ballpark { font-family: var(--serif); font-size: 17px; font-weight: 700; line-height: 1.35; padding: 12px 14px; border-radius: 10px; background: var(--wash); border-left: 4px solid var(--gold); }
.wiz-terms { font-size: 14.5px; color: var(--soft); background: var(--wash); border-radius: 10px; padding: 12px 14px; }
.wiz-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; padding-top: 6px; border-top: 1px solid var(--line); }
.wiz-nav #wiz-next, .wiz-nav #wiz-send { margin-left: auto; }

/* seasonal helper bubble */
.helper { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  transition: transform .2s ease, opacity .2s ease; }
.helper.is-tucked { transform: translateY(140%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .helper { transition: none; } }
.helper-btn { width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--stem); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45); order: 2; }
.helper-btn:hover { background: var(--stem-deep); }
.helper-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.helper.is-open .helper-btn { background: var(--stem-deep); }
.helper-panel { order: 1; width: min(340px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow-y: auto;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .5); }
.helper-head { display: flex; align-items: center; gap: 10px; padding: 12px 8px 12px 14px; background: var(--stem); color: #fff; border-radius: 16px 16px 0 0; }
.helper-title { font-family: var(--serif); font-weight: 700; font-size: 18px; flex: 1; }
.helper-x { width: 44px; height: 44px; border: 0; background: none; color: #fff; font-size: 26px; cursor: pointer; border-radius: 10px; }
.helper-x:focus-visible { outline: 3px solid #f4efe4; outline-offset: -4px; }
.helper-body { padding: 14px; display: grid; gap: 12px; }
.helper-say { font-size: 15.5px; }
.helper-quick { display: grid; gap: 6px; }
.helper-q { display: flex; align-items: center; min-height: 42px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card);
  color: var(--ink); font: 600 14.5px/1.3 var(--sans); text-decoration: none; text-align: left; cursor: pointer; }
.helper-q:hover { border-color: var(--stem); }
.helper-answer { font-size: 14.5px; background: var(--tint); border-radius: 10px; padding: 10px 12px; }
.helper-sms a { font-weight: 700; }
.helper-form-h { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.helper-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.helper-row input { padding: 9px 10px; font-size: 15px; min-width: 0; }
.helper-row .btn { grid-column: 1 / -1; }
.helper-note { font-size: 13px; color: var(--soft); }
.helper-hide { background: none; border: 0; padding: 4px 0; font: inherit; color: var(--soft); text-decoration: underline; cursor: pointer; min-height: 32px; }
@media (max-width: 759px) { .helper { right: 12px; bottom: 12px; } .helper-btn { width: 52px; height: 52px; } }

/* porch video */
.video-sec { background: var(--wash); }
.video-grid { display: grid; gap: 26px; align-items: center; }
@media (min-width: 820px) { .video-grid { grid-template-columns: minmax(0, 360px) 1fr; gap: 48px; } }
.video-frame { max-width: 360px; width: 100%; margin: 0 auto; }
.porch-video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 16px; background: #2b2118; }
.video-sec .lede { margin-bottom: 14px; }

/* holiday.html lights card: second button on the dark card */
.lights-link .btn.light-ghost { background: transparent; border-color: #f6efe0; color: #f6efe0; margin-left: 8px; }
.lights-link .btn.light-ghost:hover { background: #f6efe0; color: #161d2b; }

/* =====================================================================
   TOWN PAGES (towns/*.html, built by _build_towns.py)
   ===================================================================== */
html[data-current="holiday"] [data-block-not="holiday"],
html[data-current="spring"] [data-block-not="spring"],
html[data-current="july4"] [data-block-not="july4"] { display: none !important; }

.town-hero .hero-photo-alt { margin: 0; }
.town-hero .hero-photo-alt img { border-radius: 14px; aspect-ratio: 4 / 3.4; object-fit: cover; width: 100%; box-shadow: 0 22px 50px -24px rgba(43, 33, 24, .55); }
.town-hero .hero-photo-alt figcaption { display: inline-block; margin-top: 10px; padding: 3px 10px; border-radius: 8px; font-size: 14px; color: var(--soft);
  background: color-mix(in srgb, var(--paper) 90%, transparent); }

.town-block { max-width: 820px; }
.town-block h2 { color: var(--s-deep); }
.town-block .lede { margin-bottom: 18px; }
.town-block .mini { margin-bottom: 20px; }
.town-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.town-gallery { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 26px; }
.town-gallery figure { margin: 0; }
.town-gallery img { border-radius: 10px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.town-gallery figcaption { font-size: 13.5px; color: var(--soft); margin-top: 6px; }

.town-seasons { background: var(--wash); }
.town-local-grid { display: grid; gap: 26px; }
@media (min-width: 860px) { .town-local-grid { grid-template-columns: 1.2fr .8fr; gap: 48px; } }
.town-local p { color: var(--soft); margin-bottom: 12px; }
.town-local h3 { font-size: 21px; margin-bottom: 10px; }
.town-near { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.town-near a, .town-list a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--card); color: var(--ink); font-weight: 600; text-decoration: none; }
.town-near a:hover, .town-list a:hover { border-color: var(--stem); color: var(--stem); }
.town-list li:has(a) { padding: 0; border: 0; background: none; }
.towns-all .town-group { margin-bottom: 30px; }
.towns-all .town-group h2 { font-size: clamp(24px, 3vw, 30px); margin-bottom: 4px; }
.town-more { color: var(--soft); }
.town-more a { font-weight: 700; }

/* =====================================================================
   PHONE LAYOUT (760px and narrower). js/mobile.js does the moving;
   desktop is untouched.
   ===================================================================== */
.hero .m-only, .mbar, .swipe-dots { display: none; }

/* ---------- SIMPLE LAYOUT, every screen size (js/mobile.js does the moving) ----------
   picture-first hero with one short line; the long intro sits just below it;
   "What's included" toggles, folded add-ons, "Read more" on long paragraphs */
.hero-short { display: block; }
.hero-after { padding: 28px 0 6px; }
.hero-after .trust { margin: 0 0 18px; gap: 8px; }
.hero-after .trust li { padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  font-size: 14px; color: var(--ink); white-space: nowrap; }
.hero-after .trust li::before { display: none !important; }
.hero-after .lede { max-width: 70ch; }
.hero-after .hero-note, .hero-after .page-status, .hero-after .hero-more, .hero-after .hero-lights { font-size: 16px; color: var(--soft); margin-top: 12px; max-width: 70ch; }
.hero-after .page-status b { color: var(--s-accent, var(--stem)); }
.hero-cap-m { font-size: 13.5px; color: var(--soft); margin-top: 10px; }

.m-fold { border-top: 1px solid var(--line); margin-top: 6px; }
.m-fold > summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; font-size: 15.5px; color: var(--stem); }
.m-fold > summary::-webkit-details-marker { display: none; }
.m-fold > summary::after { content: "+"; font-size: 22px; font-weight: 400; margin-left: 12px; }
.m-fold[open] > summary::after { content: "\2212"; }
.m-fold > summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.addon-fold { border-top: 0; margin-top: 0; }
.addon-fold > summary { font-family: var(--serif); font-size: 21px; color: inherit; }
.m-hide { display: none !important; }
.m-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.m-clamp.m-open { display: block; -webkit-line-clamp: unset; overflow: visible; }
.read-more { display: block; background: none; border: 0; padding: 0; min-height: 40px; font: 700 15px var(--sans); color: var(--stem);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.read-more[hidden] { display: none; }
.book .read-more, .holiday-top .read-more, .lights-link .read-more { color: #f6efe0; }
.tier.t-folded { grid-row: auto; grid-template-rows: none; display: flex; flex-direction: column; }
.tier.t-folded > .incl { margin-top: auto; }
/* one sign-up per screen: the list form in #book is enough (the email list stays in the footer) */
.book .inline-signup { display: none; }
html:not([data-page="home"]) .book > .wrap > h2 ~ #interest > .panel-h { display: none; }
html:not([data-page="home"]) .book > .wrap > p ~ #interest > .panel-sub { display: none; }
/* towns: the closest ones, then "Show all towns" */
.town-more-btn { margin-top: 12px; background: none; border: 0; padding: 0; min-height: 40px; font: 700 15px var(--sans); color: var(--stem);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tier.t-folded .tier-foot { margin-top: 0; align-self: stretch; }   /* full card width: align-self:end would push it right in a flex column */

/* desktop hero: the picture fills the hero, text on a dark fade at the left (like the phone) */
@media (min-width: 761px) {
  .hero, html.night-hero .hero { min-height: min(76vh, 680px); display: flex; align-items: center; padding: 72px 0 80px; color: #f6efe0; }
  .hero > .wrap { position: relative; z-index: 1; width: 100%; }
  .hero .hero-grid { display: block; }
  .hero .hero-grid > :first-child { max-width: 660px; }
  .hero .hero-photo { display: none !important; }
  html:not(.night-hero) .hero::before {
    inset: 0; filter: none; transform: none; opacity: 1;
    background: var(--hero-bg, none) 75% 55% / cover no-repeat; background-color: var(--s-dark, #2b2118);
  }
  html:not(.night-hero) .hero::after {
    opacity: 1;
    background:
      linear-gradient(90deg, rgba(12, 10, 8, .9) 0%, rgba(12, 10, 8, .8) 36%, rgba(12, 10, 8, .38) 66%, rgba(12, 10, 8, .12) 100%),
      linear-gradient(to bottom, rgba(12, 10, 8, .3) 0%, rgba(12, 10, 8, 0) 30%);
  }
  .hero h1, .hero h1 .h1-main { color: #f6efe0; }
  .hero h1 { font-size: clamp(44px, 5.4vw, 70px); }
  .hero h1 em, .hero h1 .h1-lead { color: #f2c66b; }
  .hero-short { font-size: 20px; line-height: 1.45; color: #ece4d3; margin: 0 0 28px; max-width: 40ch; }
  .hero .hero-ctas { gap: 12px; }
  .hero .btn { min-height: 50px; padding: 13px 26px; font-size: 16.5px; }
  .hero .btn:not(.ghost) { background: #e0b24f; border-color: #e0b24f; color: #161d2b; }
  .hero .btn:not(.ghost):hover { background: #f2c66b; border-color: #f2c66b; }
  .hero .btn.ghost { background: transparent; border-color: #f6efe0; color: #f6efe0; }
  .hero .btn.ghost:hover { background: #f6efe0; color: #161d2b; }
  .hero :focus-visible { outline-color: #f6efe0; }
  .hero a:not(.btn) { color: #f2c66b; }
}

@media (max-width: 760px) {
  /* one slim bar on top: the promo while it runs, otherwise the countdown */
  html.preview { --ribbon-h: 22px; }
  html.preview .ribbon { font-size: 11px; gap: 6px; }
  html.preview .ribbon b { padding: 1px 6px; }
  .promo-bar:not([hidden]) ~ .countdown { display: none; }
  .promo-bar { padding: 6px 12px; font-size: 12.5px; }
  .countdown, .cd-in { height: 28px; }

  /* hero: the picture fills the screen; headline, one line, two buttons */
  .hero, html.night-hero .hero { min-height: calc(86svh - 110px); display: flex; align-items: flex-end; padding: 0 0 30px; color: #f6efe0; }
  .hero > .wrap { position: relative; z-index: 1; width: 100%; }
  .hero .hero-grid { display: block; }
  .hero .hero-photo { display: none !important; }
  html:not(.night-hero) .hero::before {
    inset: 0; filter: none; transform: none; opacity: 1;
    background: var(--hero-bg, none) center / cover no-repeat; background-color: var(--s-dark, #2b2118);
  }
  html:not(.night-hero) .hero::after {
    opacity: 1;
    background: linear-gradient(to bottom, rgba(12, 10, 8, .15) 0%, rgba(12, 10, 8, .38) 26%, rgba(12, 10, 8, .8) 48%, rgba(12, 10, 8, .9) 100%);
  }
  .hero h1, .hero h1 .h1-main { color: #f6efe0; }
  .hero h1 { font-size: clamp(33px, 10vw, 44px); margin-bottom: 12px; }
  .hero h1 em, .hero h1 .h1-lead { color: #f2c66b; }
  .hero-short { display: block; font-size: 17px; line-height: 1.45; color: #ece4d3; margin: 0 0 20px; max-width: 32ch; }
  .hero .hero-ctas { gap: 10px; }
  .hero .hero-ctas .d-only { display: none; }
  .hero .m-only { display: inline-flex; }
  .hero .btn { min-height: 48px; padding: 12px 22px; font-size: 16px; }
  .hero .btn:not(.ghost) { background: #e0b24f; border-color: #e0b24f; color: #161d2b; }
  .hero .btn.ghost { background: transparent; border-color: #f6efe0; color: #f6efe0; }
  .hero :focus-visible { outline-color: #f6efe0; }
  /* moved below the hero by js/mobile.js (and kept out of the hero if it hasn't run) */
  .hero .lede, .hero .trust, .hero .hero-note, .hero .page-status, .hero .hero-more, .hero .hero-lights { display: none; }

  .hero-after { padding: 20px 0 4px; }
  .hero-after .trust { flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin: 0 -20px 16px; padding: 2px 20px 6px; scrollbar-width: none; }
  .hero-after .trust::-webkit-scrollbar { display: none; }
  .hero-after .trust li { flex: none; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card);
    font-size: 13.5px; color: var(--ink); white-space: nowrap; }
  .hero-after .trust li::before { display: none; }
  .hero-after .lede { font-size: 17px; }
  .hero-after .hero-note, .hero-after .page-status, .hero-after .hero-more, .hero-after .hero-lights { font-size: 15.5px; color: var(--soft); margin-top: 12px; }
  .hero-after .page-status b { color: var(--s-accent, var(--stem)); }
  .hero-cap-m { font-size: 13.5px; color: var(--soft); margin-top: 10px; }

  /* package cards: one swipe row with a peek of the next card, plus dots */
  .swipe { display: flex !important; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 14px; margin: 0 -20px; padding: 4px 20px 10px; scroll-padding: 0 20px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > * { flex: 0 0 84%; max-width: 340px; scroll-snap-align: start; }
  .swipe > .tier { grid-row: auto !important; display: flex; flex-direction: column; }
  .swipe > .tier .tier-foot { margin-top: auto; align-self: stretch; }
  .swipe-dots { display: flex; justify-content: center; gap: 2px; margin: 2px 0 16px; }
  .swipe-dots button { width: 28px; height: 44px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; }
  .swipe-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--line); transition: width .2s ease; }
  .swipe-dots button[aria-current]::before { width: 20px; background: var(--stem); }
  .pkg .pkg-body { gap: 6px; }

  /* toggles */
  .m-fold { border-top: 1px solid var(--line); margin-top: 6px; }
  .m-fold > summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: space-between;
    font-weight: 700; font-size: 15.5px; color: var(--stem); }
  .m-fold > summary::-webkit-details-marker { display: none; }
  .m-fold > summary::after { content: "+"; font-size: 22px; font-weight: 400; margin-left: 12px; }
  .m-fold[open] > summary::after { content: "\2212"; }
  .m-fold > summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
  .addon-fold { border-top: 0; margin-top: 0; }
  .addon-fold > summary { font-family: var(--serif); font-size: 21px; color: inherit; }
  .m-hide { display: none !important; }
  .m-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .m-clamp.m-open { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .read-more { background: none; border: 0; padding: 0; min-height: 44px; font: 700 15px var(--sans); color: var(--stem);
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .book .read-more, .holiday-top .read-more, .lights-link .read-more { color: #f6efe0; }

  /* calmer sections */
  .sec { padding: 56px 0; }
  .sec-head { margin-bottom: 20px; }
  h2 { font-size: clamp(28px, 8vw, 34px); }
  .steps { gap: 12px; }
  .steps li { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }

  /* footer groups */
  .foot-in { gap: 14px 20px; }
  .foot-fold { flex-basis: 100%; border-top: 1px solid var(--line); margin-top: 0; }
  .foot-fold > summary { color: var(--ink); font-size: 16px; }
  .foot-fold .foot-seasons, .foot-fold .foot-links, .foot-fold .foot-towns { display: grid; gap: 0; padding-bottom: 10px; }
  .foot-fold a { min-height: 40px; display: flex; align-items: center; }
  .foot-towns a { color: var(--stem); font-weight: 700; }

  /* sticky bottom bar */
  .mbar { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--paper) 97%, transparent);
    border-top: 1px solid var(--line); box-shadow: 0 -8px 20px -14px rgba(0, 0, 0, .35); transition: transform .2s ease; }
  .mbar .btn { min-height: 48px; padding: 10px 14px; }
  .mbar.is-off { transform: translateY(115%); }
  body.has-mbar { padding-bottom: 76px; }
  body.has-mbar .helper { bottom: 84px; }
  body.has-mbar.mbar-off .helper { bottom: 12px; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .mbar, .swipe-dots button::before { transition: none; }
}

/* ---------- reviews toast (every screen size) ---------- */
.rtoast { position: fixed; left: 16px; bottom: 16px; z-index: 58; width: min(340px, calc(100vw - 32px));
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 14px 42px 12px 16px;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .45); opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease; }
.rtoast.is-in { opacity: 1; transform: none; }
.rtoast.no-motion { transition: none; transform: none; }
.rtoast-x { position: absolute; top: 2px; right: 2px; width: 40px; height: 40px; border: 0; background: none; font-size: 22px; color: var(--soft); cursor: pointer; border-radius: 10px; }
.rtoast-stars { color: #b8862b; letter-spacing: 2px; font-size: 14px; }
.rtoast-text { font-size: 15px; line-height: 1.4; margin: 4px 0 6px; }
.rtoast-who { font-size: 13.5px; color: var(--soft); }
.rtoast-who a { font-weight: 700; margin-left: 6px; white-space: nowrap; }
@media (max-width: 760px) {
  .rtoast { left: 12px; right: 76px; width: auto; padding: 10px 36px 10px 12px; }
  body.has-mbar .rtoast { bottom: 84px; }
  body.has-mbar.mbar-off .rtoast { bottom: 12px; }
  .rtoast-text { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .rtoast { transition: none; transform: none; } }

/* =====================================================================
   HERO FADES INTO THE PAGE (Jonathan 2026-10-05): the picture and its dark
   overlay melt into the page color at the bottom instead of a hard edge.
   The text sits above the fade, so it never lands on the light part.
   ===================================================================== */
:root { --hero-fade: 120px; }
@media (min-width: 761px) { :root { --hero-fade: 200px; } }
.hero::before, .hero::after, .hero canvas.snow {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--hero-fade)), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--hero-fade)), transparent 100%);
}
html.night-hero .hero { background: transparent; }
html.night-hero .hero::before { background-color: #0b1220; }
@media (max-width: 760px) {
  .hero, html.night-hero .hero { padding-bottom: 110px; min-height: calc(86svh - 30px); }
}
@media (min-width: 761px) {
  .hero, html.night-hero .hero { padding-bottom: 170px; min-height: min(82vh, 760px); }
}

/* real night photo in the holiday hero (HOLIDAY_NIGHT_PHOTO in js/config.js): lighter shading than
   the drawing gets, so the lights read; still dark enough on the left for the headline */
html.night-hero .hero.night-photo::before { background-position: var(--night-pos, 60% 50%); }
html.night-hero .hero.night-photo::after {
  background:
    linear-gradient(to bottom, rgba(8, 12, 22, .35) 0%, rgba(8, 12, 22, 0) 25%),
    linear-gradient(90deg, rgba(8, 12, 22, .82) 0%, rgba(8, 12, 22, .6) 38%, rgba(8, 12, 22, .12) 72%, rgba(8, 12, 22, 0) 100%);
}
@media (max-width: 760px) {
  html.night-hero .hero.night-photo::after {
    background: linear-gradient(to bottom, rgba(8, 12, 22, .2) 0%, rgba(8, 12, 22, .35) 35%, rgba(8, 12, 22, .82) 62%, rgba(8, 12, 22, .9) 100%);
  }
}

/* desktop hero photo, zoomed out (Jonathan 2026-10-06): the whole picture fits the hero's
   height on the right instead of stretching edge to edge, so it stays sharp; the headline
   sits on the dark fade to its left. Wide screens show more of the page color on the left. */
@media (min-width: 761px) {
  html:not(.night-hero) .hero::before {
    background: var(--hero-bg, none) right center / auto 100% no-repeat;
    background-color: transparent;
  }
  html:not(.night-hero) .hero::after {
    background:
      linear-gradient(90deg, rgba(12, 10, 8, .72) 0%, rgba(12, 10, 8, .6) 34%, rgba(12, 10, 8, .22) 58%, rgba(12, 10, 8, 0) 80%),
      linear-gradient(to bottom, rgba(12, 10, 8, .3) 0%, rgba(12, 10, 8, 0) 30%);
  }
}

/* ---- 2026-10-06: softer desktop blend ----
   Desktop: a blurred, darkened copy of the same photo (.hero-backdrop, added by js/site.js)
   fills the hero; the sharp photo sits on top at the right and fades into it, so the left
   side carries the photo's own colors instead of flat dark. --hero-edge = where the sharp
   photo starts (js/site.js). */
.hero-backdrop { display: none; }
@media (min-width: 761px) {
  html:not(.night-hero) .hero-backdrop {
    display: block; position: absolute; inset: -60px; z-index: -3; pointer-events: none;
    background: var(--hero-bg, none) center / cover no-repeat; background-color: var(--s-dark, #2b2118);
    filter: blur(34px) brightness(.74) saturate(1.2);
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--hero-fade) - 60px), transparent calc(100% - 60px));
            mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--hero-fade) - 60px), transparent calc(100% - 60px));
  }
  html:not(.night-hero) .hero::before {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--hero-fade)), transparent 100%),
                        linear-gradient(90deg, transparent var(--hero-edge, 0px), #000 calc(var(--hero-edge, 0px) + 320px));
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--hero-fade)), transparent 100%),
                        linear-gradient(90deg, transparent var(--hero-edge, 0px), #000 calc(var(--hero-edge, 0px) + 320px));
            mask-composite: intersect;
  }
}

/* =====================================================================
   INSTANT ESTIMATE (holiday.html #estimate, js/estimator.js) 2026-10-14
   ===================================================================== */
.est { background: linear-gradient(180deg, var(--paper) 0%, var(--wash) 100%); }
.est-head h2 em { font-style: italic; color: var(--accent); }
.est-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.est-stage { position: sticky; top: 96px; }
.est-art { margin: 0; background: radial-gradient(120% 90% at 50% 30%, var(--card) 0%, var(--wash) 70%);
  border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: 0 18px 40px -24px rgba(18, 51, 31, .45); }
.est-art img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain;
  transition: opacity .18s ease, transform .35s ease; }
.est-art img.est-fade { opacity: 0; transform: scale(.985); }
.est-art figcaption { font-size: 13px; color: var(--soft); text-align: center; margin-top: 8px; }
.est-art img { max-height: 260px; }
.est-tiers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.est-stage .est-result { margin-top: 14px; }
.est-more { margin-top: 10px; background: none; border: 0; padding: 6px 0; font: inherit; font-weight: 700; color: var(--stem);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.est-more:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.est-bar { display: none; }
.est-chip { min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 2px; padding: 8px 10px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit; cursor: pointer; text-align: left; transition: border-color .15s, background .15s, transform .15s; }
.est-chip:hover { border-color: var(--stem); transform: translateY(-1px); }
.est-chip:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.est-chip[aria-checked="true"] { background: var(--stem); border-color: var(--stem); color: #fff; }
.est-chip-n { font-weight: 700; font-size: 14px; line-height: 1.2; }
.est-chip-p { font-family: var(--serif); font-size: 15px; opacity: .85; }
.est-panel { display: grid; gap: 18px; }
.est-block { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.est-block h3 { font-size: 18px; display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.est-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tint);
  color: var(--stem); font-size: 14px; font-weight: 700; font-family: var(--sans); }
.est-fit { color: var(--soft); font-size: 15px; margin: 0 0 8px; }
.est-includes { margin: 0 0 10px; padding-left: 18px; font-size: 14.5px; line-height: 1.5; }
.est-includes li::marker { color: var(--accent); }
.est-design { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; padding: 10px 12px;
  border: 1px dashed var(--line); border-radius: 10px; cursor: pointer; }
.est-design input { width: 20px; height: 20px; accent-color: var(--stem); }
.est-design small { margin-left: auto; color: var(--soft); font-weight: 700; }
.est-design-note { font-size: 13.5px; color: var(--soft); margin: 4px 0 0; }
.est-design-note:empty { display: none; }
.est-addons { list-style: none; margin: 0; padding: 0; }
.est-add { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.est-add:last-child { border-bottom: 0; }
.est-add-n { flex: 1; font-size: 14.5px; line-height: 1.35; }
.est-add-n small { display: block; color: var(--soft); font-size: 13px; font-weight: 600; }
.est-step { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.est-btn { width: 40px; height: 40px; border: 0; background: var(--card); color: var(--stem); font-size: 20px; font-weight: 700; cursor: pointer; }
.est-btn:hover:not(:disabled) { background: var(--tint); }
.est-btn:disabled { color: var(--line); cursor: default; }
.est-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.est-q { min-width: 26px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.est-result { background: var(--stem-deep); color: #fff; border-radius: 16px; padding: 22px 22px 20px;
  box-shadow: 0 20px 44px -26px rgba(18, 51, 31, .8); }
.est-label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.est-total { display: block; font-family: var(--serif); font-size: clamp(40px, 6vw, 54px); line-height: 1.05; margin: 4px 0 10px;
  font-variant-numeric: tabular-nums; }
.est-lines { list-style: none; margin: 0 0 12px; padding: 10px 0 0; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 14px; }
.est-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; opacity: .92; }
.est-fine { font-size: 13px; opacity: .8; margin: 0 0 14px; line-height: 1.45; }
.est-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.est-result .btn { background: #fff; border-color: #fff; color: var(--stem-deep); }
.est-result .btn:hover { background: var(--snow); }
.est-result .btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.est-result .btn.ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
@media (max-width: 899px) {
  .est-grid { display: flex; flex-direction: column; gap: 20px; }
  .est-stage { position: static; display: contents; }          /* lets the total card move below the add-ons */
  .est-art { order: 0; } .est-tiers { order: 1; } .est-panel { order: 2; } .est-stage .est-result { order: 3; margin-top: 0; }
  .est-tiers { display: flex; overflow-x: auto; padding: 2px 2px 6px; margin-top: 0; scroll-snap-type: x proximity; width: 100%; max-width: 100%; min-width: 0; }
  .est-grid { min-width: 0; max-width: 100%; }
  .est-chip { flex: 0 0 auto; min-width: 112px; scroll-snap-align: start; }
  .est-bar { display: flex; position: fixed; left: 12px; right: 76px; bottom: 14px; z-index: 30; align-items: center;
    justify-content: space-between; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 999px; background: var(--stem-deep);
    color: #fff; box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .55); transform: translateY(160%); transition: transform .25s ease; }
  .est-bar.on { transform: none; }
  .est-bar b { font-family: var(--serif); font-size: 19px; margin-left: 4px; }
  .est-bar .btn { background: #fff; color: var(--stem-deep); border-color: #fff; }
}
@media (max-width: 420px) {
  .est-block { padding: 16px; }
  .est-ctas .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .est-art img, .est-chip, .est-bar { transition: none; }
}

/* =====================================================================
   BARE TO FALL scroll reveal (index.html #transform, js/reveal.js) 2026-10-14
   A tall track; inside it a scene pinned under the header. Scrolling through
   the track wipes the AFTER photo over the BEFORE photo (same aligned scene).
   Only transform / clip-path / opacity animate. Reduced motion = static pair.
   ===================================================================== */
.rv { --rv-top: 80px; --rv-p: 0; background: var(--paper); }
.rv-track { position: relative; height: 340vh; }
.rv-sticky { position: sticky; top: var(--rv-top); height: calc(100vh - var(--rv-top)); height: calc(100dvh - var(--rv-top));
  display: flex; align-items: center; overflow: hidden; }
.rv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; width: 100%; }
.rv-copy h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12; margin: 0 0 18px; text-wrap: balance; }
.rv-steps { list-style: none; margin: 0 0 22px; padding: 0; counter-reset: rv; }
.rv-step { position: relative; padding: 10px 0 10px 40px; color: var(--soft); opacity: .45; transition: opacity .35s ease, color .35s ease; font-size: 16.5px; line-height: 1.45; }
.rv-step::before { content: "1"; position: absolute; left: 0; top: 10px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--wash); color: var(--soft); transition: background .35s, color .35s; }
.rv-step b { color: var(--ink); }
/* numbers set per step (a CSS counter skips hidden steps on phones) */
.rv-step[data-step="1"]::before { content: "2"; } .rv-step[data-step="2"]::before { content: "3"; } .rv-step[data-step="3"]::before { content: "4"; }
/* the line fades out once the porch is complete */
.rv-handle span { transition: opacity .3s; } .rv[data-step="3"] .rv-handle span { opacity: 0; }
.rv-step.on { opacity: 1; }
.rv-step.now::before { background: var(--stem); color: #fff; }
.rv-step.now { color: var(--ink); }
.rv-frame { position: relative; margin: 0; justify-self: center; width: min(100%, calc((100dvh - var(--rv-top) - 64px) * .75));
  aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(43, 33, 24, .55); background: var(--wash); }
.rv-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* stepped fallback: the wipe jumps between 4 positions, eased. Before sits on the left of
   the line, after on the right; the line sweeps right -> left as the porch fills in */
@property --rv-edge { syntax: "<percentage>"; inherits: false; initial-value: 115%; }
/* soft edge: the after photo fades in across a band ~30% wide instead of behind a hard line,
   so small differences between the two photos (the railings) read as a dissolve, not a seam */
.rv-after { --rv-edge: calc(115% - var(--rv-p) * 130%);
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--rv-edge) - 15%), #000 calc(var(--rv-edge) + 15%));
  mask-image: linear-gradient(90deg, transparent calc(var(--rv-edge) - 15%), #000 calc(var(--rv-edge) + 15%));
  transition: --rv-edge .7s cubic-bezier(.16, 1, .3, 1); }
.rv-handle { display: none; position: absolute; inset: 0; transform: translateX(calc((1 - var(--rv-p)) * 100%)); transition: transform .7s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.rv-handle span { position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.rv-handle span::after { content: ""; position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  background: #fff; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .45);
  background-image: linear-gradient(90deg, transparent 13px, var(--stem) 13px 15px, transparent 15px 23px, var(--stem) 23px 25px, transparent 25px); }
.rv-tags { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; justify-content: space-between; pointer-events: none; }
.rv-tags span { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
  background: rgba(20, 16, 12, .55); color: #fff; backdrop-filter: blur(4px); transition: opacity .3s; }
.rv[data-step="0"] .rv-a, .rv[data-step="3"] .rv-b { opacity: 0; }
.rv-marks { position: absolute; inset: 0; pointer-events: none; }
/* each marker is a band covering its step's share of the scroll, so exactly one band
   sits on the screen's middle line at any moment (dots got skipped on fast scrolls) */
.rv-marks i { position: absolute; left: 0; width: 1px; }
.rv-marks i[data-step="0"] { top: 0; height: 30%; } .rv-marks i[data-step="1"] { top: 30%; height: 22%; }
.rv-marks i[data-step="2"] { top: 52%; height: 20%; } .rv-marks i[data-step="3"] { top: 72%; height: 28%; }

/* real scrub where supported: the wipe follows the scroll exactly */
@supports (animation-timeline: view()) {
  .rv-track { view-timeline-name: --rv; view-timeline-axis: block; }
  .rv-after { transition: none; animation: rv-wipe linear both; animation-timeline: --rv; animation-range: contain 6% contain 82%; }
  .rv-handle { transition: none; animation: rv-slide linear both; animation-timeline: --rv; animation-range: contain 6% contain 82%; }
  @keyframes rv-wipe { from { --rv-edge: 115%; } to { --rv-edge: -15%; } }
  @keyframes rv-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }
}

@media (max-width: 899px) {
  .rv-track { height: 300vh; }
  .rv-sticky { align-items: flex-start; padding-top: 14px; }
  .rv-grid { grid-template-columns: 1fr; gap: 14px; }
  .rv-copy { order: 2; }
  .rv-copy h2 { font-size: 24px; margin-bottom: 6px; }
  .rv-copy .tag, .rv-cta { display: none; }
  .rv-steps { margin: 0; }
  .rv-step { display: none; padding: 4px 0 4px 36px; font-size: 15px; opacity: 1; }
  .rv-step.now { display: block; }
  .rv-step::before { top: 4px; }
  .rv-frame { width: min(100%, calc((100dvh - var(--rv-top) - 190px) * .75)); }
}

/* reduced motion: no pinning, no wipe; a plain before/after pair */
@media (prefers-reduced-motion: reduce) {
  .rv-track { height: auto; }
  .rv-sticky { position: static; height: auto; padding: 56px 0; }
  .rv-frame { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; background: none; box-shadow: none; }
  .rv-img { position: static; aspect-ratio: 3 / 4; border-radius: 12px; }
  .rv-after { -webkit-mask-image: none !important; mask-image: none !important; animation: none !important; }
  .rv-handle, .rv-tags { display: none; }
  .rv-step { opacity: 1; display: block !important; }
  .rv-marks { display: none; }
}

/* ---------- SECTION COLOR (2026-10-19): more separation between the light sections ----------
   Towns = a band in the page's own deep season color; FAQ groups = white cards with an accent edge;
   Christmas page options and the lights page intro get the soft season wash. */
.towns { background: var(--stem-deep); color: #f4efe4; }
.towns h2 { color: #fff; }
.towns .lede { color: rgba(244, 239, 228, .85); }
.towns .town-list li { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); color: #f4efe4; }
.towns .town-list li:last-child { color: rgba(244, 239, 228, .75); }
.towns .town-list li:has(a) { background: none; border: 0; }
.towns .town-list a { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); color: #fff; }
.towns .town-list a:hover { background: #fff; color: var(--stem-deep); border-color: #fff; }
.towns .town-more-btn { color: #f2c66b; }
.towns a:not(.btn) { color: #f2c66b; }
#faq .faq-block { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: 16px; padding: 18px 22px 6px; box-shadow: 0 10px 24px -20px rgba(0, 0, 0, .35); }
#faq .faq-block + .faq-block { margin-top: 18px; }
#faq .faq-block .faq-group { color: var(--stem); }
#faq .faq-block details:first-of-type { border-top: 0; }
#faq .faq-block details:last-of-type { border-bottom: 0; }
#options { background: var(--wash); }
html[data-page="lights"] #lights { background: var(--wash); }
@media (max-width: 560px) { #faq .faq-block { padding: 14px 16px 4px; } }

/* Holiday cards: next year's Refresh price under the main price (10/20) */
.tier .refresh { margin: -4px 0 10px; font-size: .86rem; color: var(--soft); }
.tier .refresh b { color: inherit; font-weight: 700; }
.swap + .swap { margin-top: 16px; }
.swap p ~ p { margin-top: 10px; }

/* 10/20: centered notes; the three Christmas cards look clickable; Refresh line in the estimate */
.tier-note { text-align: center; max-width: none; margin: 18px auto 0; }
.xopt { border-width: 1.5px; cursor: pointer; box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 10px 22px -16px rgba(0, 0, 0, .4); }
.xopt:hover, .xopt:focus-visible { transform: translateY(-4px); border-color: var(--stem); box-shadow: 0 18px 32px -18px rgba(0, 0, 0, .5); }
.xopt-fine { font-size: 13.5px; color: var(--soft); margin-top: -2px; }
.xopt-go { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 11px 18px;
  border-radius: 999px; background: var(--stem); color: #fff; text-decoration: none; font-size: 15px; line-height: 1.2; }
.xopt-go::after { content: "\2192"; transition: transform .15s; }
.xopt:hover .xopt-go::after, .xopt:focus-visible .xopt-go::after { transform: translateX(4px); }
.xopt-go[hidden], html.lights-waitlist .xopt-go[data-lights-full], html.lights-live .xopt-go[data-lights-waitlist] { display: none; }
.est-refresh { margin: 2px 0 12px; font-size: 14px; opacity: .85; }
.est-refresh:empty { display: none; }
.hol-more { padding-top: 8px; }
.hol-more .swap:first-child { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .xopt:hover, .xopt:focus-visible { transform: none; } .xopt-go::after { transition: none; } }

/* 10/20 round 2: FAQ group titles read as headings, not questions */
#faq .faq-block .faq-group { margin: -18px -22px 8px; padding: 13px 22px; background: var(--stem); color: #fff;
  font-family: var(--sans); font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; border-radius: 12px 12px 0 0; }
@media (max-width: 560px) { #faq .faq-block .faq-group { margin: -14px -16px 6px; padding: 12px 16px; } }

/* footer: email list first, then four columns, then the legal line */
.foot-in { display: block; }
.foot-signup { max-width: 760px; margin: 0 auto 32px; }
.foot-signup .signup { margin: 0 auto; }
.foot-signup .signup-h, .foot-signup .signup-text, .foot-signup .signup-privacy { text-align: center; }
.foot-signup .signup-seasons legend { width: 100%; text-align: center; }
.foot-signup .signup-chips { justify-content: center; }
.foot-signup .signup .btn { justify-self: center; }
.foot-grid { display: grid; gap: 26px 40px; grid-template-columns: minmax(0, 1fr); padding-top: 28px; border-top: 1px solid var(--line); }
@media (min-width: 700px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.foot-brand { display: grid; gap: 14px; align-content: start; }
.foot-tag { margin: 0; max-width: 34ch; }
.foot-h { margin: 0 0 4px; font-family: var(--sans); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.foot-seasons, .foot-contact, .foot-links { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; flex-basis: auto; }
.foot-contact span { color: var(--soft); }
.foot .legal { display: block; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; }

/* "Text us" card on computers */
.text-card { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: rgba(20, 24, 20, .45); }
.text-card[hidden] { display: none; }
.text-card-box { position: relative; width: min(420px, 100%); background: var(--card); color: var(--ink); border-radius: 18px; padding: 26px 24px 22px;
  text-align: center; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45); }
.text-card-box h3 { margin: 0 0 6px; font-size: 22px; }
.text-card-num { margin: 0; font-family: var(--serif); font-size: 32px; font-weight: 700; color: var(--stem); font-variant-numeric: tabular-nums; }
.text-card-sub, .text-card-alt { margin: 8px 0 0; color: var(--soft); font-size: 15px; }
.text-card-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.text-card-x { position: absolute; top: 8px; right: 10px; width: 40px; height: 40px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--soft); cursor: pointer; }

/* COMING SOON seasons (js/config.js COMING_SOON): hide the offer, show the panel */
[data-cs-show] { display: none; }
html.cs-spring [data-cs-show~="spring"], html.cs-july4 [data-cs-show~="july4"], html.cs-celebrate [data-cs-show~="celebrate"] { display: block; }
html.cs-spring #spring.season-sec, html.cs-july4 #july4.season-sec,
html.cs-spring .faq-block[data-block="spring"], html.cs-july4 .faq-block[data-block="july4"], html.cs-celebrate .faq-block[data-block="celebrate"],
html.cs-spring [data-cs-hide~="spring"], html.cs-july4 [data-cs-hide~="july4"], html.cs-celebrate [data-cs-hide~="celebrate"] { display: none !important; }
.cs-panel { background: var(--wash); }
.cs-in { max-width: 640px; margin: 0 auto; text-align: center; display: grid; justify-items: center; gap: 12px; }
.cs-in .lede { margin: 0; }
.mm-soon { margin: 0; color: var(--soft); }
.foot-signup .signup-text, .foot-signup .signup-privacy { max-width: 56ch; margin-left: auto; margin-right: auto; }