/* =========================================================================
   CLEARLY SUPERIOR — Christmas Lights
   Festive override: midnight-evergreen ground, warm gold + holly red + pine
   green, twinkling warm-white lights. Loaded AFTER main.css.
   ========================================================================= */
:root{
  --paper:#0B1512;          /* midnight evergreen */
  --paper-2:#0F1D18;
  --panel:#14261F;
  --panel-2:#1B3128;

  --ink:#F6ECD8;            /* warm white — primary text on dark */
  --ink-1:#F6ECD8;
  --ink-2:#07100D;          /* deepest — footer */

  --line:rgba(246,236,216,.16);
  --line-strong:rgba(246,236,216,.3);

  --cream:#F6ECD8;
  --cream-dim:rgba(246,236,216,.68);
  --cream-faint:rgba(246,236,216,.42);

  --ink-dim:rgba(246,236,216,.7);
  --ink-faint:rgba(246,236,216,.45);

  --gold:#E9BE6B;
  --gold-ink:#F0CE8C;       /* on dark, lighter reads better */
  --gold-metal:#E9BE6B;
  --gold-bright:#F6DFA9;
  --gold-deep:#8A6A2A;

  --red:#D34A38;
  --green:#57A578;
}

body{background:var(--paper);color:var(--cream)}

/* soft aurora glow behind everything */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
   radial-gradient(40% 40% at 15% 0%,rgba(87,165,120,.18),transparent 70%),
   radial-gradient(45% 45% at 85% 10%,rgba(233,190,107,.16),transparent 70%),
   radial-gradient(50% 40% at 50% 100%,rgba(211,74,56,.12),transparent 70%)}
main{position:relative;z-index:1}
.footer{position:relative;z-index:1}

/* section rhythm on dark */
.section--alt{background:var(--paper-2)}
.eyebrow::before{background:var(--gold)}
.statusbar{background:rgba(11,21,18,.82);color:var(--cream-dim);border-bottom-color:var(--line)}
.statusbar__left{color:var(--cream)}
.statusbar__ticker span::before{color:var(--red)}
.header.is-stuck{background:rgba(11,21,18,.9);border-color:var(--line)}
.brand b{color:var(--gold-bright)}
.brand__tag{color:var(--cream-faint)}
body.home .header:not(.is-stuck){color:var(--cream)}

/* pills */
.pill{border-color:var(--line-strong);color:var(--cream)}
.pill:hover{background:var(--gold);border-color:var(--gold);color:#0B1512}
.pill--solid{background:var(--gold);border-color:var(--gold);color:#0B1512}
.pill--solid:hover{background:var(--gold-bright);border-color:var(--gold-bright)}
.textlink{color:var(--gold-bright)}

/* fairy-light string across the top of the hero */
.lights{position:absolute;left:0;right:0;top:0;z-index:6;height:54px;pointer-events:none;
  display:flex;justify-content:space-around;align-items:flex-start;padding:0 1.5%;
  background:linear-gradient(180deg,rgba(7,16,13,.5),transparent)}
.lights i{margin-top:22px;width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--c,#F6DFA9);box-shadow:0 0 10px 3px var(--c,#F6DFA9);
  animation:twinkle 2.4s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes twinkle{0%,100%{opacity:.35;transform:translateY(0) scale(.8)}
  50%{opacity:1;transform:translateY(3px) scale(1.15)}}

/* hero */
.xhero{position:relative;min-height:100dvh;display:flex;align-items:flex-end;
  padding-top:calc(var(--bar-h) + 90px);padding-bottom:clamp(56px,9vh,110px);overflow:hidden;
  background:linear-gradient(180deg,#0B1512,#0F1D18)}
.xhero__media{position:absolute;inset:0;z-index:1;overflow:hidden}
.xhero__media video,.xhero__media .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xhero__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:
  linear-gradient(180deg,rgba(7,16,13,.55),rgba(7,16,13,.15) 30%,rgba(7,16,13,.35) 60%,rgba(7,16,13,.92)),
  linear-gradient(90deg,rgba(7,16,13,.8),rgba(7,16,13,.25) 50%,transparent 78%)}
.xhero__inner{position:relative;z-index:10;width:100%}
.xhero h1{font-family:var(--f-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.8rem,10vw,8.5rem);line-height:.86;letter-spacing:-.02em;color:var(--cream);
  margin:.18em 0 .4em}
.xhero h1 .g{color:var(--gold-bright)}
.xhero h1 .r{color:var(--red)}
.xhero .lead{color:var(--cream-dim);max-width:44ch}
.xhero .mono{color:var(--cream-dim)}
.xhero__row{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:56px}
.steps .card{background:var(--paper)}
.section--alt .steps .card{background:var(--paper-2)}
.step__n{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;color:var(--gold-bright)}
@media(max-width:1080px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* what we light — panels */
.lightgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:48px}
.lightgrid figure{position:relative;aspect-ratio:16/11;overflow:hidden;border:1px solid var(--line)}
.lightgrid .ph{width:100%;height:100%}
.lightgrid figcaption{position:absolute;left:18px;bottom:16px;font-family:var(--f-display);
  font-weight:900;text-transform:uppercase;font-size:clamp(1.1rem,2.2vw,1.7rem);
  color:var(--cream);text-shadow:0 2px 20px rgba(0,0,0,.6)}
@media(max-width:700px){.lightgrid{grid-template-columns:1fr}}

/* packages */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px}
.tier{border:1px solid var(--line);background:var(--panel);padding:clamp(24px,2.6vw,38px);
  display:flex;flex-direction:column;gap:20px}
.tier--feature{border-color:var(--gold);background:var(--panel-2);box-shadow:0 0 0 1px var(--gold) inset}
.tier__tag{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-bright)}
.tier h3{font-family:var(--f-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:-.01em;color:var(--cream)}
.tier__price{font-family:var(--f-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.15rem,2vw,1.5rem);letter-spacing:-.01em;color:var(--gold-bright);
  padding-bottom:18px;border-bottom:1px solid var(--line)}
.tier__price small{display:block;font-family:var(--f-mono);font-weight:400;font-size:9.5px;
  text-transform:none;letter-spacing:.1em;color:var(--cream-faint);margin-top:8px}
.tier ul{display:grid;gap:10px;font-size:.92rem;color:var(--cream-dim)}
.tier li{padding-left:20px;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;
  background:var(--green)}
.tier--feature li::before{background:var(--red)}
.tier .pill{margin-top:auto}
@media(max-width:860px){.tiers{grid-template-columns:1fr}}

/* keep footer deep */
.footer{background:var(--ink-2)}
.footer__lockup{-webkit-text-stroke-color:rgba(246,236,216,.22)}

@media(prefers-reduced-motion:reduce){.lights i{animation:none;opacity:.7}}

/* ======================================================================= */
/*  SCROLL-DRIVEN PHOTO SCENE                                                */
/* ======================================================================= */
.xstage{position:relative;background:#0b1a2e}
.xstage__canvas{position:sticky;top:0;height:100dvh;width:100%;overflow:hidden;
  background:#0a1626}
.xstage__canvas .lights{z-index:5}

.xscene{position:absolute;inset:0;overflow:hidden;background:#0a1626}
.xscene-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 60%;transform:scale(var(--x-zoom,1.05));
  transition:transform .1s linear,opacity .7s ease;
  filter:contrast(1.05) saturate(1.08)}
.xscene-lit{position:absolute;inset:0;opacity:0;will-change:-webkit-mask-image,mask-image}
.xscene-lit .xscene-img{opacity:0}
.xscene-lit .xscene-img.is-on{opacity:1}
.xscene-grade{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:soft-light;
  background:radial-gradient(72% 62% at 50% 52%,rgba(255,180,110,.55),transparent 72%)}
.xscene-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(78% 78% at 50% 42%,transparent 52%,rgba(4,9,16,.55) 100%)}
.xscene::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.xstage__panels{position:relative;z-index:3;margin-top:-100dvh;pointer-events:none}
.xstep{min-height:100dvh;display:flex;align-items:center;padding:0 var(--gutter)}
.xstep__inner{max-width:36ch;pointer-events:auto;padding:26px 30px 30px;
  border-left:2px solid var(--gold);
  background:linear-gradient(100deg,rgba(6,14,22,.74),rgba(6,14,22,.22) 82%,transparent)}
.xstep--hero .xstep__inner{border-left:0;padding-left:0;
  background:linear-gradient(100deg,rgba(6,14,22,.68),transparent 76%)}
.xstep__n{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-bright);display:block;margin-bottom:14px}
.xstep h1{font-family:var(--f-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.6rem,9vw,7rem);line-height:.86;letter-spacing:-.02em;color:var(--cream);margin:.14em 0 .36em}
.xstep h1 .g{color:var(--gold-bright)}.xstep h1 .r{color:var(--red)}
.xstep h2{font-family:var(--f-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:.92;letter-spacing:-.01em;color:var(--cream);margin-bottom:14px}
.xstep p{color:var(--cream-dim)}
.xstep .lead{color:var(--cream-dim);max-width:40ch;margin-top:4px}
.xstep .xhero__row{margin-top:26px;display:flex;flex-wrap:wrap;gap:14px}

.xswatches{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--e-out),transform .55s var(--e-out)}
.xswatches.is-shown{opacity:1;transform:none}
.xswatches button{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border-radius:100px;
  border:1px solid var(--line-strong);background:rgba(6,14,22,.55);color:var(--cream-dim);
  font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  transition:border-color .3s,color .3s}
.xswatches button i{width:22px;height:8px;border-radius:100px;background:var(--s,#ffd9a0);flex:none}
.xswatches button:hover{color:var(--cream)}
.xswatches button.is-on{border-color:var(--gold-bright);color:var(--cream)}

.xstage .hero__scroll{position:sticky;bottom:22px;margin-top:-70px;margin-left:var(--gutter);
  width:max-content;z-index:6}

@media(max-width:640px){.xstep__inner{max-width:none}}

.no-xmas-3d .xstage{height:auto}
.no-xmas-3d .xstage__canvas{position:relative;height:60vh}
.no-xmas-3d .xstage__panels{margin-top:0}
.no-xmas-3d .xstep{min-height:auto;padding-block:clamp(40px,7vh,84px)}
.no-xmas-3d .xstep--colors .xswatches{opacity:1;transform:none}
.no-xmas-3d .xstage .hero__scroll{display:none}

@media(prefers-reduced-motion:reduce){
  .xstage{height:auto}
  .xstage__canvas{position:sticky;height:80vh}
  .xstage__panels{margin-top:0}
  .xstep{min-height:auto;padding-block:clamp(40px,7vh,80px)}
  .xstep--colors .xswatches{opacity:1;transform:none}
  .xstage .hero__scroll{display:none}
}