/* Luma Christmas Lighting — standalone seasonal site.
   Same family as lumasmarthome.com (Cormorant + DM Sans, the copper dot), in
   Christmas dress: evergreen ground, berry red for every action, warm-white
   light. Matches the printed cards, door hangers and yard signs. */
:root{
  --night:#0A2A1F;      /* page ground: deep evergreen */
  --deep:#0F3B2B;       /* raised surface (the print green) */
  --slate:#1E5A43;      /* borders, wells */
  --pine:#0F3B2B;
  --berry:#B3202F;      /* every button and selected state */
  --berry2:#8E1F2B;     /* the print red */
  --copper:#C57238;     /* the LUMA dot, shared with Smart Home */
  --filament:#F4B860;   /* the bulb */
  --filament2:#E0A04A;
  --lit:#FFE2A8;        /* light spill, warm white */
  --paper:#F9F5EF;      /* text on green */
  --muted:#A9C2B6;
  /* legacy aliases so older rules keep resolving to the new palette */
  --cream:var(--deep);--cream2:var(--slate);--cream3:#246A4F;
  --dark:var(--paper);--mid:var(--muted);
  --accent:var(--filament);--accent2:var(--filament2);--gold:var(--lit);
  --serif:'Cormorant Garamond','Georgia',serif;
  --sans:'DM Sans',system-ui,-apple-system,sans-serif;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--paper);font-family:var(--sans);font-size:17px;line-height:1.66;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;text-wrap:balance}
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#fff;border:none;border-radius:100px;padding:12px 26px;font-family:var(--sans);font-size:15.5px;font-weight:600;cursor:pointer;transition:background .18s;white-space:nowrap}
.btn:hover{background:var(--accent2)}
.btn--lg{padding:15px 32px;font-size:17px}
.btn-ghost{display:inline-flex;align-items:center;border:1.5px solid rgba(255,255,255,.45);color:#fff;border-radius:100px;padding:14px 28px;font-size:16px;font-weight:500;transition:border-color .18s,background .18s}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.eyebrow{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600;margin:0 0 14px}

/* Trust bar */
.trustbar{background:var(--night);color:rgba(255,255,255,.86);display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:center;padding:11px 20px;font-size:13.5px}
.trustbar span{position:relative;padding-left:17px;white-space:nowrap}
.trustbar span::before{content:"";position:absolute;left:0;top:.52em;width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* Nav */
.nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:28px;padding:0 32px;height:74px;background:var(--cream);border-bottom:1px solid var(--cream2)}
.nav-logo{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-size:21px;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.nav-logo em{font-style:normal;font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--mid);margin-left:2px}
.nav-dot{width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px 2px rgba(197,114,56,.5)}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto;font-size:15.5px}
.nav-links > a,.nav-drop > button{padding:9px 14px;border-radius:9px;background:none;border:none;font-family:var(--sans);font-size:15.5px;font-weight:500;color:var(--dark);cursor:pointer;transition:color .16s,background .16s}
.nav-links > a:hover,.nav-drop > button:hover,.nav-links > a.on{color:var(--accent);background:rgba(197,114,56,.07)}
.nav-drop{position:relative}
.nav-panel{position:absolute;top:calc(100% + 6px);left:0;min-width:250px;background:#fff;border:1px solid var(--cream2);border-radius:14px;box-shadow:0 16px 44px rgba(27,26,40,.14);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s;z-index:120}
.nav-panel--wide{min-width:380px;columns:1}
.nav-drop:hover .nav-panel,.nav-drop:focus-within .nav-panel{opacity:1;visibility:visible;transform:none}
.nav-panel a{display:block;padding:9px 13px;border-radius:9px;font-size:15px;transition:background .14s}
.nav-panel a:hover{background:var(--cream)}
.nav-panel a strong{display:block;font-weight:600;font-size:15px}
.nav-panel a span{display:block;font-size:12.5px;color:var(--mid);line-height:1.4}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-tel{font-size:15.5px;font-weight:600;white-space:nowrap}
.nav-tel:hover{color:var(--accent)}
.nav-burger{display:none;width:42px;height:42px;border-radius:10px;border:1.5px solid var(--cream3);background:none;flex-direction:column;justify-content:center;align-items:center;gap:4px;cursor:pointer;margin-left:auto}
.nav-burger span{display:block;width:18px;height:1.6px;background:var(--dark)}
.nav-mobile{display:none}

/* Hero */
.hero{position:relative;background:var(--night);color:#fff;padding:74px 32px 84px;overflow:hidden}
.hero-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto}
.hero h1{font-family:var(--serif);font-size:clamp(40px,5vw,68px);line-height:1.03;font-weight:600;letter-spacing:-.012em;margin:0 0 20px;max-width:16em}
.hero h1 em{color:var(--gold);font-style:italic}
.hero-lead{font-size:18.5px;line-height:1.6;color:rgba(255,255,255,.87);margin:0 0 26px;max-width:36em}
.hero-lead strong{color:#fff;font-weight:600;white-space:nowrap}
.hero-points{list-style:none;padding:0;margin:0 0 30px;display:flex;flex-wrap:wrap;gap:10px 30px;font-size:15.5px;color:rgba(255,255,255,.8)}
.hero-points li{position:relative;padding-left:19px}
.hero-points li::before{content:"";position:absolute;left:0;top:.58em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap}
.hero-lights{position:absolute;top:0;left:0;right:0;height:20px;z-index:1;pointer-events:none}
.hero-lights span{position:absolute;top:6px;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 9px 3px rgba(232,185,140,.7);animation:tw 3.2s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.hero-lights span{animation:none;opacity:.75}}

/* Process bar */
.procbar{background:var(--cream2);padding:32px}
.procbar-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.proc{position:relative;padding-left:34px}
.proc > span{position:absolute;left:0;top:0;width:25px;height:25px;border-radius:50%;background:var(--accent);color:#fff;font-size:12.5px;font-weight:600;display:flex;align-items:center;justify-content:center}
.proc strong{display:block;font-size:15.5px;font-weight:600;margin-bottom:2px}
.proc em{font-style:normal;font-size:13px;line-height:1.5;color:var(--mid)}

/* Sections */
.sec{max-width:var(--max);margin:0 auto;padding:76px 32px;text-align:center}
.sec--cream{background:var(--cream2);max-width:none}
.sec--cream > *{max-width:var(--max);margin-left:auto;margin-right:auto}
.sec-h{font-family:var(--serif);font-size:clamp(32px,3.6vw,50px);line-height:1.1;font-weight:600;margin:0 0 8px}
.sec-h em{color:var(--accent);font-style:italic}
.note{max-width:720px;margin:30px auto 0;font-size:15.5px;line-height:1.62;color:var(--mid)}
.note a{color:var(--accent);font-weight:600}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:20px;margin-top:42px;text-align:left}
.card{background:#fff;border:1px solid var(--cream2);border-radius:16px;padding:26px}
.card h3{font-size:18px;font-weight:600;margin-bottom:9px}
.card p{margin:0;font-size:15.5px;line-height:1.6;color:var(--mid)}

.scards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:42px;text-align:left}
.scard{background:#fff;border:1px solid var(--cream2);border-radius:16px;padding:26px;transition:border-color .16s,transform .16s}
.scard:hover{border-color:var(--accent);transform:translateY(-2px)}
.scard h3{font-size:19px;font-weight:600;margin-bottom:8px}
.scard p{margin:0 0 12px;font-size:15px;line-height:1.58;color:var(--mid)}
.scard span{font-size:14.5px;font-weight:600;color:var(--accent)}

.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:20px;margin-top:42px;text-align:left}
.tier{background:#fff;border:1px solid var(--cream3);border-radius:18px;padding:30px 26px}
.tier--on{border:2px solid var(--accent);box-shadow:0 10px 32px rgba(197,114,56,.14)}
.tier-tag{font-family:var(--serif);font-size:32px;font-weight:600;color:var(--accent);line-height:1.1;margin-bottom:11px}
.tier h3{font-size:17.5px;font-weight:600;margin-bottom:9px}
.tier p{margin:0;font-size:15px;line-height:1.58;color:var(--mid)}

.ptable{width:100%;max-width:760px;margin:38px auto 0;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;text-align:left;font-size:15.5px}
.ptable td{padding:13px 20px;border-bottom:1px solid var(--cream2)}
.ptable tr:last-child td{border-bottom:none;font-weight:600}
.ptable td:last-child{text-align:right;font-weight:600;color:var(--accent);white-space:nowrap}
.measure{max-width:760px;margin:34px auto 0;background:#fff;border-radius:14px;padding:26px 28px;text-align:left}
.measure h3{font-size:19px;font-weight:600;margin-bottom:10px}
.measure p,.measure li{font-size:15.5px;line-height:1.6;color:var(--mid);margin:0 0 8px}
.measure ul{margin:0 0 10px;padding-left:20px}
.measure strong{color:var(--dark)}

.chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:38px}
.chip{border:1px solid var(--cream3);background:#fff;border-radius:100px;padding:9px 20px;font-size:14.5px;transition:border-color .16s,color .16s}
.chip:hover{border-color:var(--accent);color:var(--accent)}

.faq{max-width:820px;margin:40px auto 0;text-align:left}
.faq-i{border-bottom:1px solid var(--cream3)}
.faq-i summary{list-style:none;cursor:pointer;padding:21px 0;font-size:17.5px;font-weight:500;display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary::after{content:"+";color:var(--accent);font-size:23px;line-height:1;flex-shrink:0}
.faq-i[open] summary::after{content:"\2212"}
.faq-i summary:hover{color:var(--accent)}
.faq-i p{margin:0 0 22px;padding-right:40px;font-size:16px;line-height:1.66;color:var(--mid)}

/* Quote block */
.quote{background:var(--night);color:#fff;padding:76px 32px}
.quote-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr minmax(390px,460px);gap:54px;align-items:start}
.quote-copy h2{font-family:var(--serif);font-size:clamp(32px,3.4vw,48px);line-height:1.08;font-weight:600;margin:0 0 16px}
.quote-copy h2 em{color:var(--gold);font-style:italic}
.quote-copy p{font-size:16.5px;line-height:1.62;color:rgba(255,255,255,.8);margin:0 0 16px}
.quote-call a{color:var(--gold);font-weight:600;border-bottom:1px solid rgba(232,185,140,.4)}
.quote-call span{font-size:14px;color:rgba(255,255,255,.55)}

/* Quiz */
.quiz{background:#fff;color:var(--dark);border-radius:20px;padding:26px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.q-badge{display:inline-block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--accent);background:rgba(197,114,56,.1);border-radius:100px;padding:6px 14px;margin:0 0 13px}
.q-bar{height:4px;background:var(--cream2);border-radius:4px;overflow:hidden}
.q-bar span{display:block;height:100%;background:var(--accent);border-radius:4px;transition:width .3s ease}
.q-step{font-size:12.5px;color:var(--mid);margin:9px 0 18px}
.q-body h3{font-family:var(--serif);font-size:26px;font-weight:600;line-height:1.2;margin:0 0 6px}
.q-sub{font-size:14px;color:var(--mid);margin:0 0 14px}
.q-opts{display:grid;gap:9px;margin-top:14px}
.q-opts--row{grid-template-columns:repeat(3,1fr)}
.q-opt{border:1.5px solid var(--cream3);background:var(--cream);border-radius:12px;padding:13px 17px;font-family:var(--sans);font-size:15.5px;font-weight:500;color:var(--dark);text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.q-opts--row .q-opt{text-align:center;padding:12px 6px}
.q-opt:hover{border-color:var(--accent)}
.q-opt.on{border-color:var(--accent);background:rgba(197,114,56,.09)}
.q-label{display:block;font-size:13px;font-weight:600;margin-top:15px}
.q-label span{font-weight:400;color:var(--mid)}
.q-label input,.q-label select{display:block;width:100%;margin-top:6px;padding:12px 14px;border:1px solid var(--cream3);border-radius:10px;font-family:var(--sans);font-size:16px;color:var(--dark);background:var(--cream)}
.q-label input:focus,.q-label select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(197,114,56,.15)}
.q-invalid{border-color:#FF9C8A!important;box-shadow:0 0 0 3px rgba(255,156,138,.13)!important}
.q-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.q-link{background:none;border:none;padding:8px 0 0;font-family:var(--sans);font-size:13.5px;color:var(--accent);font-weight:500;cursor:pointer;display:block;text-align:left}
.q-link:hover{text-decoration:underline}
.q-help{background:var(--cream);border-radius:12px;padding:15px 17px;margin-top:9px;font-size:14px;line-height:1.55;color:var(--mid)}
.q-help ul{margin:7px 0;padding-left:19px}
.q-help p{margin:0 0 6px}
.q-counts{display:flex;flex-direction:column;max-height:330px;overflow-y:auto;margin-top:8px}
.q-count{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 2px;border-bottom:1px solid var(--cream2)}
.q-count-t strong{display:block;font-size:15px;font-weight:500}
.q-count-t span{font-size:12.5px;color:var(--mid)}
.q-count-c{display:flex;align-items:center;gap:6px;flex-shrink:0}
.q-count-c button{width:31px;height:31px;border-radius:9px;border:1.5px solid var(--cream3);background:#fff;font-size:17px;line-height:1;color:var(--dark);cursor:pointer}
.q-count-c button:hover{border-color:var(--accent);color:var(--accent)}
.q-count-c > span{min-width:21px;text-align:center;font-size:15.5px;font-weight:600}
.q-peek{background:rgba(197,114,56,.09);border-radius:11px;padding:12px 15px;font-size:14.5px;margin:13px 0 2px}
.q-peek strong{color:var(--accent)}
.q-submit{width:100%;justify-content:center;margin-top:16px;font-size:16.5px;padding:14px}
.q-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.q-back{background:none;border:none;font-family:var(--sans);font-size:14px;color:var(--mid);cursor:pointer;padding:12px 0 0}
.q-back:hover{color:var(--accent)}
.q-next{flex:1;justify-content:center;margin-top:12px}
.q-fine{font-size:12px;color:var(--mid);margin:11px 0 0;text-align:center}
.q-err{font-size:13.5px;color:#FF9C8A;margin:11px 0 0}
.q-err a{color:#FF9C8A;font-weight:600}
.q-done{text-align:center}
.q-range{font-family:var(--serif);font-size:44px;font-weight:600;color:var(--accent);line-height:1.1;margin:4px 0 12px}
.q-done h3{font-size:21px;font-weight:600}
.q-done p{font-size:14.5px;color:var(--mid);line-height:1.6;margin:9px 0 16px}
.quiz-noscript{font-size:15px;color:var(--mid)}
.quiz-noscript a{color:var(--accent);font-weight:600}

/* Footer */
.foot{background:var(--night);color:rgba(255,255,255,.72);padding:60px 32px 34px;font-size:14.5px}
.foot .nav-logo{color:#fff;margin-bottom:14px}
.foot .nav-logo em{color:rgba(255,255,255,.5)}
.foot-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.foot h3{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:13px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.foot a:hover{color:#fff}
.foot-nap a{color:var(--gold)}
.foot-nap span{color:rgba(255,255,255,.5)}
.foot-fine{max-width:var(--max);margin:36px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:rgba(255,255,255,.5)}
.foot-fine a{color:var(--gold)}

/* Sticky mobile bar */
.sticky{display:none}

@media (max-width:1050px){
  .quote-inner{grid-template-columns:1fr;gap:34px}
  .procbar-in{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:flex}
  .nav-mobile[hidden]{display:none}
  .nav-mobile{display:block;position:fixed;inset:74px 0 0;background:var(--cream);z-index:99;overflow-y:auto;padding:14px 24px 40px}
  .nav-mobile a{display:block;padding:14px 0;border-bottom:1px solid var(--cream2);font-size:17px;font-weight:500}
  .nav-mobile a strong{display:block}
  .nav-mobile a span{display:block;font-size:13px;color:var(--mid)}
}
@media (max-width:720px){
  body{font-size:16px;padding-bottom:64px}
  .trustbar{font-size:12.5px;gap:7px 16px}
  .hero{padding:48px 20px 58px}
  .sec,.sec--cream{padding:54px 20px}
  .quote{padding:54px 20px}
  .procbar{padding:26px 20px}
  .procbar-in{grid-template-columns:1fr}
  .quiz{padding:22px 18px}
  .q-row,.q-opts--row{grid-template-columns:1fr}
  .faq-i p{padding-right:0}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .ptable{font-size:14.5px}
  .ptable td{padding:11px 14px}
  .sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:150;gap:1px;background:var(--cream3);box-shadow:0 -6px 20px rgba(10,42,31,.18)}
  .sticky a{flex:1;text-align:center;padding:15px 8px;font-size:15.5px;font-weight:600}
  .sticky-call{background:var(--night);color:#fff}
  .sticky-quote{background:var(--accent);color:#fff}
}

/* ── Hero stage: lights off / lights on ─────────────────────────────────── */
.hero{background:var(--night);--split:100%}
.hx{position:absolute;inset:0;z-index:0;overflow:hidden;cursor:ew-resize;touch-action:none}
.hx--static{cursor:default;background-size:cover;background-position:center;
  background-image:var(--fb);background-image:var(--lg)}
.hx-dark,.hx-lit{position:absolute;inset:0;background-size:cover;background-position:center;
  background-image:var(--fb);background-image:var(--lg)}
.hx-lit{clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.hx.sweeping .hx-lit{transition:clip-path 1.9s cubic-bezier(.22,.61,.36,1)}
.hx.dragging .hx-lit{transition:none}
.hx-handle{position:absolute;top:0;bottom:0;left:var(--split);width:44px;margin-left:-22px;z-index:3;cursor:ew-resize;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .5s ease .4s;touch-action:none}
.hx.on .hx-handle{opacity:1}
.hx-handle::before{content:"";position:absolute;top:0;bottom:0;width:2px;background:rgba(255,255,255,.7);box-shadow:0 0 14px rgba(232,185,140,.7)}
.hx-handle span{position:relative;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 4px 18px rgba(0,0,0,.4)}
.hx-handle span::before,.hx-handle span::after{content:"";position:absolute;top:50%;width:0;height:0;border:5px solid transparent;margin-top:-5px}
.hx-handle span::before{left:7px;border-right-color:var(--night)}
.hx-handle span::after{right:7px;border-left-color:var(--night)}
.hx-handle:focus-visible{outline:none}
.hx-handle:focus-visible span{box-shadow:0 0 0 4px var(--gold)}
.hx-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;margin:0;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.72);background:rgba(10,42,31,.5);backdrop-filter:blur(6px);padding:7px 15px;border-radius:100px;opacity:0;transition:opacity .5s ease .8s;pointer-events:none;white-space:nowrap}
.hx.on .hx-hint{opacity:1}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(6,28,20,.72) 0%,rgba(6,28,20,.32) 34%,rgba(6,28,20,.34) 60%,rgba(6,28,20,.93) 100%),linear-gradient(100deg,rgba(6,28,20,.86) 0%,rgba(6,28,20,.58) 40%,rgba(6,28,20,.12) 66%,rgba(6,28,20,.3) 100%)}
.hero-in{z-index:2}
.hero-lights{z-index:2}
.hero h1{font-size:clamp(42px,5.6vw,76px)}

/* ── Reveal on scroll ───────────────────────────────────────────────────── */
.has-reveal .rv{opacity:0;transform:translateY(22px)}
.has-reveal .rv.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.nav{transition:box-shadow .25s ease,background .25s ease}
.nav.stuck{box-shadow:0 6px 24px rgba(10,42,31,.09)}

/* ── Package builder ────────────────────────────────────────────────────── */
.quote-inner--wide{grid-template-columns:1fr;gap:34px;max-width:var(--max)}
.bd{display:grid;grid-template-columns:1fr 340px;gap:26px;align-items:start;color:var(--dark)}
.bd--details{grid-template-columns:1fr}
.bd-main{display:flex;flex-direction:column;gap:22px}
.bd-step{background:#fff;border-radius:20px;padding:26px 26px 28px;position:relative}
.bd-num{position:absolute;top:24px;left:26px;width:27px;height:27px;margin:0;border-radius:50%;background:var(--accent);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.bd-step h3{font-family:var(--serif);font-size:26px;font-weight:600;margin:0 0 5px;padding-left:38px;line-height:1.2}
.bd-sub{font-size:14.5px;color:var(--mid);margin:0 0 18px;padding-left:38px;line-height:1.5}
.bd-sizes{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.bd-size{text-align:left;border:1.5px solid var(--cream3);background:var(--cream);border-radius:13px;padding:14px 16px;cursor:pointer;font-family:var(--sans);transition:border-color .15s,background .15s}
.bd-size:hover{border-color:var(--accent)}
.bd-size.on{border-color:var(--accent);background:rgba(197,114,56,.09)}
.bd-size strong{display:block;font-size:15.5px;font-weight:600;color:var(--dark);margin-bottom:3px}
.bd-size span{display:block;font-size:12.5px;color:var(--mid);line-height:1.45}
.bd-size em{display:block;font-style:normal;font-size:12px;color:var(--accent);font-weight:600;margin-top:6px}
.bd-custom{margin-top:16px;padding-top:16px;border-top:1px solid var(--cream2);display:grid;grid-template-columns:1fr 110px;gap:12px}
.bd-custom label{font-size:13px;font-weight:600}
.bd-custom input,.bd-custom select{display:block;width:100%;margin-top:6px;padding:11px 13px;border:1px solid var(--cream3);border-radius:10px;font-family:var(--sans);font-size:16px;background:var(--cream);color:var(--dark)}
.bd-link{grid-column:1/-1;background:none;border:none;padding:0;font-family:var(--sans);font-size:13.5px;color:var(--accent);font-weight:600;cursor:pointer;text-align:left}
.bd-help{display:none;grid-column:1/-1;background:var(--cream);border-radius:11px;padding:14px 16px;font-size:13.5px;line-height:1.55;color:var(--mid)}
.bd-custom.open .bd-help{display:block}
.bd-help ul{margin:7px 0;padding-left:18px}
.bd-help p{margin:0 0 5px}
.bd-adds{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:12px}
.bd-add{border:1.5px solid var(--cream3);border-radius:14px;overflow:hidden;background:var(--cream);transition:border-color .16s,box-shadow .16s}
.bd-add.on{border-color:var(--accent);box-shadow:0 6px 20px rgba(197,114,56,.16)}
.bd-add img{width:100%;height:104px;object-fit:cover;display:block;background:var(--cream2)}
.bd-add-b{padding:12px 13px 13px}
.bd-add-b strong{display:block;font-size:14.5px;font-weight:600;margin-bottom:3px}
.bd-add-b > span{display:block;font-size:13px;color:var(--accent);font-weight:600;margin-bottom:9px}
.bd-add-b > span em{font-style:normal;color:var(--mid);font-weight:400}
.bd-ctl{display:flex;align-items:center;gap:8px}
.bd-ctl button{width:31px;height:31px;border-radius:9px;border:1.5px solid var(--cream3);background:#fff;font-size:17px;line-height:1;color:var(--dark);cursor:pointer;transition:border-color .15s,color .15s}
.bd-ctl button:hover{border-color:var(--accent);color:var(--accent)}
.bd-ctl > span{min-width:20px;text-align:center;font-size:15.5px;font-weight:700}
.bd-side{position:sticky;top:92px}
.bd-card{background:#fff;border-radius:20px;padding:24px;box-shadow:0 20px 52px rgba(0,0,0,.3)}
.bd-badge{display:inline-block;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--accent);background:rgba(197,114,56,.1);border-radius:100px;padding:5px 13px;margin:0 0 11px}
.bd-total{font-family:var(--serif);font-size:38px;font-weight:600;color:var(--dark);line-height:1.08;margin:0 0 16px}
.bd-lines{list-style:none;margin:0 0 16px;padding:0;border-top:1px solid var(--cream2)}
.bd-lines li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--cream2);font-size:14px}
.bd-lines b{white-space:nowrap;font-weight:600}
.bd-incl{font-size:12.5px;line-height:1.55;color:var(--mid);margin:0 0 16px}
.bd-go{width:100%;justify-content:center;font-size:16px;padding:14px}
.bd-fine{font-size:11.5px;line-height:1.5;color:var(--mid);margin:11px 0 0;text-align:center}
.bd-details{background:#fff;border-radius:20px;padding:30px;max-width:620px;margin:0 auto;text-align:center}
.bd-details h3{font-family:var(--serif);font-size:27px;font-weight:600;margin:0 0 18px}
.bd-back{background:none;border:none;font-family:var(--sans);font-size:14px;color:var(--mid);cursor:pointer;padding:0 0 14px;display:block}
.bd-back:hover{color:var(--accent)}
.bd-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bd-details label,.bd-l{display:block;text-align:left;font-size:13px;font-weight:600;margin-bottom:13px}
.bd-details label i{font-style:normal;font-weight:400;color:var(--mid)}
.bd-details input,.bd-details select{display:block;width:100%;margin-top:6px;padding:12px 14px;border:1px solid var(--cream3);border-radius:10px;font-family:var(--sans);font-size:16px;background:var(--cream);color:var(--dark)}
.bd-details input:focus,.bd-details select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(197,114,56,.15)}
.bd-invalid{border-color:#FF9C8A!important;box-shadow:0 0 0 3px rgba(255,156,138,.13)!important}
.bd-submit{width:100%;justify-content:center;font-size:16.5px;padding:14px;margin-top:6px}
.bd-err{font-size:13.5px;color:#FF9C8A;margin:11px 0 0}
.bd-done .bd-sub{padding-left:0;margin-bottom:20px}
.quiz-noscript{font-size:15px;color:var(--mid)}
.quiz-noscript a{color:var(--accent);font-weight:600}

/* Style gallery */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:42px;text-align:left}
.gal-i{margin:0;background:#fff;border:1px solid var(--cream2);border-radius:16px;overflow:hidden}
.gal-i img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--cream2)}
.gal-i figcaption{padding:18px 20px 20px}
.gal-i strong{display:block;font-size:17px;font-weight:600;margin-bottom:5px}
.gal-i span{font-size:14.5px;line-height:1.55;color:var(--mid)}
.gal-note{max-width:700px;margin:26px auto 0;font-size:14px;line-height:1.6;color:var(--mid);font-style:italic}

@media (max-width:1050px){
  .bd{grid-template-columns:1fr}
  .bd-side{position:static}
}
@media (max-width:720px){
  .hx-hint{font-size:11px;bottom:12px}
  .bd-step{padding:22px 18px}
  .bd-step h3{font-size:23px;padding-left:34px}
  .bd-sub{padding-left:34px}
  .bd-custom{grid-template-columns:1fr}
  .bd-row{grid-template-columns:1fr}
  .bd-details{padding:24px 18px}
  .bd-total{font-size:32px}
}

/* ══ Own identity: bar, overlay menu, night surfaces ═════════════════════ */
.bar{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:20px;padding:0 32px;height:72px;background:rgba(6,28,20,.82);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.07)}
.mark{display:flex;align-items:center;gap:11px;white-space:nowrap}
.mark-bulb{width:12px;height:12px;border-radius:50%;background:var(--copper);flex-shrink:0}
.mark-t{display:flex;flex-direction:column;line-height:1}
.mark-t{font-family:var(--serif);font-size:27px;font-weight:700;letter-spacing:.08em;color:var(--paper)}
.mark-t em{font-style:normal;font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--lit);margin-top:4px}
.bar-r{display:flex;align-items:center;gap:16px;margin-left:auto}
.bar-tel{font-size:15px;font-weight:600;color:var(--paper);white-space:nowrap}
.bar-tel:hover{color:var(--filament)}
.btn--sm{padding:10px 20px;font-size:14.5px}
.mv-open{display:flex;align-items:center;gap:9px;background:none;border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:9px 17px 9px 14px;cursor:pointer;font-family:var(--sans);transition:border-color .18s,background .18s}
.mv-open:hover{border-color:var(--filament);background:rgba(242,166,90,.09)}
.mv-open span{display:block;width:15px;height:1.5px;background:var(--paper);transition:transform .2s}
.mv-open span+span{margin-left:-15px;margin-top:5px}
.mv-open em{font-style:normal;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);margin-left:6px}

/* Overlay */
.mv{position:fixed;inset:0;z-index:400;background:var(--night);overflow-y:auto;animation:mv-fade .28s ease-out}
.mv[hidden]{display:none}
@keyframes mv-fade{from{opacity:0}to{opacity:1}}
.mv-in{max-width:var(--max);margin:0 auto;padding:88px 32px 40px;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.mv-h{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;font-weight:600}
.mv-h--2{margin-top:34px}
.mv-svc{display:flex;flex-direction:column}
.mv-svc a{display:flex;align-items:baseline;gap:15px;padding:9px 0;font-family:var(--serif);font-size:clamp(26px,3.1vw,40px);font-weight:500;line-height:1.14;color:var(--paper);transition:color .16s,transform .22s}
.mv-svc a:hover,.mv-svc a:focus-visible{color:var(--filament);transform:translateX(9px);outline:none}
.mv-i{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.08em;flex-shrink:0}
.mv-svc a:hover .mv-i{color:var(--filament)}
.mv-areas{display:flex;flex-wrap:wrap;gap:7px 9px}
.mv-areas a{border:1px solid var(--slate);border-radius:100px;padding:7px 15px;font-size:13.5px;color:var(--muted);transition:border-color .16s,color .16s}
.mv-areas a:hover{border-color:var(--filament);color:var(--filament)}
.mv-rest{display:flex;gap:22px;margin-top:30px;padding-top:22px;border-top:1px solid var(--slate)}
.mv-rest a{font-size:15px;font-weight:600;color:var(--paper)}
.mv-rest a:hover{color:var(--filament)}
.mv-prev{position:sticky;top:88px}
.mv-img{aspect-ratio:3/2;border-radius:16px;background:var(--deep) center/cover no-repeat;border:1px solid var(--slate);transition:opacity .26s ease}
.mv-img.swap{opacity:0}
.mv-cap{margin:14px 0 0;font-size:13.5px;color:var(--muted);letter-spacing:.02em}
.mv-close{position:absolute;top:20px;right:28px;width:44px;height:44px;border-radius:50%;border:1px solid var(--slate);background:none;color:var(--paper);font-size:26px;line-height:1;cursor:pointer;transition:border-color .16s,color .16s}
.mv-close:hover{border-color:var(--filament);color:var(--filament)}
.mv-foot{max-width:var(--max);margin:0 auto;padding:0 32px 40px;display:flex;gap:20px;align-items:baseline;font-size:14px;color:var(--muted)}
.mv-foot a{color:var(--filament);font-weight:600}

/* Night surfaces for the existing sections */
.trustbar{background:var(--deep);border-bottom:1px solid rgba(255,255,255,.06)}
.sec{color:var(--paper)}
.sec--cream{background:var(--deep)}
.card,.tier,.scard,.gal-i,.bd-step,.ptable,.measure{background:var(--deep);border-color:var(--slate);color:var(--paper)}
.card h3,.tier h3,.scard h3,.gal-i strong,.bd-step h3,.measure h3{color:var(--paper)}
.card p,.tier p,.scard p,.gal-i span,.measure p,.measure li,.bd-sub,.note,.gal-note,.bd-incl,.bd-fine,.foot-fine{color:var(--muted)}
.measure strong{color:var(--paper)}
.ptable td{border-color:var(--slate)}
.chip{background:var(--deep);border-color:var(--slate);color:var(--paper)}
.faq-i{border-color:var(--slate)}
.faq-i summary{color:var(--paper)}
.faq-i p{color:var(--muted)}
.procbar{background:var(--pine)}
.proc strong{color:var(--paper)}
.proc-d,.proc em{color:rgba(243,238,230,.66)}
.quote{background:var(--deep)}
.bd-card{background:var(--night);border:1px solid var(--slate)}
.bd-total{color:var(--paper)}
.bd-lines li{border-color:var(--slate)}
.bd-size{background:var(--night);border-color:var(--slate)}
.bd-size strong{color:var(--paper)}
.bd-add{background:var(--night);border-color:var(--slate)}
.bd-add-b strong{color:var(--paper)}
.bd-ctl button,.bd-custom input,.bd-custom select{background:var(--deep);border-color:var(--slate);color:var(--paper)}
.bd-details{background:var(--deep)}
.bd-details input,.bd-details select{background:var(--night);border-color:var(--slate);color:var(--paper)}
.bd-help{background:var(--night)}
.foot{background:var(--deep);border-top:1px solid var(--slate)}
.sticky-call{background:var(--deep)}
.sticky{background:var(--slate)}

@media (max-width:900px){
  .mv-in{grid-template-columns:1fr;gap:30px;padding:78px 20px 30px}
  .mv-prev{position:static;order:-1}
  .mv-img{aspect-ratio:16/9}
}
@media (max-width:720px){
  .bar{padding:0 16px;gap:12px;height:64px}
  .bar-tel,.bar .btn--sm{display:none}
  .mark-t{font-size:17px}
  .mv-open em{display:none}
  .mv-open{padding:10px 13px}
  .mv-svc a{font-size:23px}
  .mv-foot{padding:0 20px 30px;flex-direction:column;gap:6px}
}

/* ── Quick form: on arrival, not after a scroll ─────────────────────────── */
.hero-grid{position:relative;z-index:2;max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.15fr minmax(360px,420px);gap:52px;align-items:start}
.hero-in{max-width:none}
.hero h1{max-width:13em}
.qf{background:rgba(12,48,35,.9);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:26px;box-shadow:0 26px 64px rgba(0,0,0,.5)}
.qf-h{font-family:var(--serif);font-size:26px;font-weight:600;margin:0 0 5px;color:var(--paper)}
.qf-s{font-size:14px;color:var(--muted);margin:0 0 18px;line-height:1.5}
.qf-l{display:block;font-size:12.5px;font-weight:600;letter-spacing:.03em;color:var(--paper);margin-bottom:13px}
.qf-l i{font-style:normal;font-weight:400;color:var(--muted)}
.qf-l input{display:block;width:100%;margin-top:6px;padding:13px 15px;border:1px solid var(--slate);border-radius:11px;background:var(--night);color:var(--paper);font-family:var(--sans);font-size:16px;transition:border-color .16s,box-shadow .16s}
.qf-l input::placeholder{color:#6F8F82}
.qf-l input:focus{outline:none;border-color:var(--filament);box-shadow:0 0 0 3px rgba(242,166,90,.18)}
.qf-l input[aria-invalid="true"]{border-color:#E2705A;box-shadow:0 0 0 3px rgba(226,112,90,.16)}
.qf-l small{display:none;margin-top:6px;font-size:12.5px;font-weight:500;color:#E2705A}
.qf-l small.show{display:block}
.qf-go{width:100%;justify-content:center;margin-top:6px}
.qf-f{font-size:12px;color:var(--muted);margin:13px 0 0;text-align:center;line-height:1.5}
.qf-f a{color:var(--filament);font-weight:600}
.qf-done{text-align:center;padding:44px 26px}
.qf-done .qf-h{font-size:28px;margin-bottom:10px}
.qf-done p{font-size:14.5px;color:var(--muted);line-height:1.6;margin:0 0 18px}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .qf{max-width:520px}
}
@media (max-width:720px){
  .qf{padding:22px 18px}
  .qf-h{font-size:23px}
}
.bd-sqft{display:block;font-size:13px;font-weight:600;color:var(--filament);margin-bottom:4px}
.bd-size span{margin-bottom:2px}
.measure-h2{margin-top:26px!important}
.ptable--tight{margin-top:14px}
.ptable--tight td{padding:10px 16px;font-size:14.5px}

/* On a phone the trust strip and the bullet list repeat each other and push the
   form under the fold. Keep the strip short, drop the duplicate list, and the
   form lands in the first screen where it belongs. */
@media (max-width:720px){
  .trustbar{gap:6px 14px;padding:9px 14px;font-size:12px}
  .trustbar span:nth-child(n+4){display:none}
  .hero{padding:34px 20px 44px}
  .hero-points{display:none}
  .hero-lead{font-size:16.5px;margin-bottom:20px}
  .hero h1{font-size:clamp(32px,8.6vw,40px);margin-bottom:14px}
  .hero-cta{margin-bottom:26px}
  .hero-grid{gap:24px}
}

/* Gallery cards that actually do something */
.gal-sub{max-width:640px;margin:34px auto 0;font-size:15.5px;line-height:1.6;color:var(--muted)}
.gal-sub--2{margin-top:44px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--filament)}
.gal--looks{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.gal-i--pick{display:block;width:100%;padding:0;text-align:left;font-family:var(--sans);cursor:pointer;border:1px solid var(--slate);background:var(--deep);border-radius:16px;overflow:hidden;transition:border-color .16s,transform .16s,box-shadow .16s}
.gal-i--pick:hover{border-color:var(--filament);transform:translateY(-2px)}
.gal-i--pick:focus-visible{outline:2px solid var(--filament);outline-offset:2px}
.gal-i--pick.picked{border-color:var(--filament);box-shadow:0 0 0 1px var(--filament),0 12px 30px rgba(242,166,90,.18)}
.gal-b{display:block;padding:16px 18px 18px}
.gal-b strong{display:block;font-size:16.5px;font-weight:600;color:var(--paper);margin-bottom:5px}
.gal-b > span{display:block;font-size:14px;line-height:1.55;color:var(--muted);margin-bottom:11px}
.gal-cta{display:inline-block;font-style:normal;font-size:13px;font-weight:600;color:var(--filament);letter-spacing:.02em}
.gal-i--pick.picked .gal-cta{color:var(--lit)}
.gal-i--pick.picked .gal-cta::before{content:"✓ ";font-weight:700}

/* Colour selector inside the builder */
.bd-styles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
.bd-style{border:1.5px solid var(--slate);background:var(--night);border-radius:12px;padding:13px 15px;font-family:var(--sans);font-size:15px;font-weight:500;color:var(--paper);cursor:pointer;text-align:left;transition:border-color .15s,background .15s}
.bd-style:hover{border-color:var(--filament)}
.bd-style.on{border-color:var(--filament);background:rgba(242,166,90,.1)}

/* ══ Mobile: touch targets and legible type ══════════════════════════════
   Measured on a 375px viewport: counters were 31px tall, menu rows 15-21px,
   and the smallest type ran to 9.5px. Both fall short of what a thumb can hit
   reliably and what reads at arm's length, so the phone layout sets its own
   floors rather than inheriting the desktop scale. */
@media (max-width:760px){
  /* 44px is the smallest target Apple and Google both consider reliable. */
  .bd-ctl button{width:46px;height:46px;font-size:22px;border-radius:12px}
  .bd-ctl > span{min-width:34px;font-size:18px}
  .mv-open{min-height:46px;padding:0 16px}
  .mv-close{width:48px;height:48px;top:14px;right:16px}
  .mv-svc a{padding:13px 0;min-height:52px;align-items:center}
  .mv-areas a{padding:11px 18px;min-height:44px;display:inline-flex;align-items:center}
  .mv-rest a{min-height:44px;display:inline-flex;align-items:center}
  .mv-foot a{min-height:44px;display:inline-flex;align-items:center}
  .chip{padding:12px 20px;min-height:44px;display:inline-flex;align-items:center}
  .foot ul a{display:inline-flex;align-items:center;min-height:44px}
  /* A phone number is the highest-intent tap on the page; inline prose links
     can stay inline, but these get a real target. */
  a[href^="tel:"],a[href^="mailto:"]{display:inline-flex;align-items:center;min-height:44px}
  .mark{min-height:44px}
  .faq-i summary{padding:18px 0;min-height:56px;align-items:center}
  .gal-i--pick .gal-cta{display:inline-flex;align-items:center;min-height:32px}
  .bd-size,.bd-style{min-height:56px}
  .bar-tel,.sticky a{min-height:46px;display:inline-flex;align-items:center;justify-content:center}

  /* Nothing below 12px on a phone. */
  .mark-t em{font-style:normal;font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--lit);margin-top:4px}
  .mv-h{font-size:12px}
  .hx-hint{font-size:12px;padding:8px 16px}
  .qf-f,.bd-fine,.gal-note{font-size:12.5px}
  .bd-badge,.qf-l,.bd-sqft{font-size:13px}
  .bd-add-b > span,.proc em,.gal-b > span{font-size:13.5px}
  .foot,.foot-fine,.mv-foot{font-size:14px}
  .trustbar{font-size:12.5px}

  /* A phone has no use for a 1920px frame. */
  .hx-dark,.hx-lit,.hx--static{background-image:var(--sm)}

  /* The drag handle is centred on the split, so at either end half of it sits
     outside the frame. Pull it back in rather than letting it clip. */
  .hx-handle{width:52px;margin-left:-26px}
  .hx{clip-path:inset(0)}
}

/* <picture> keeps the same box the bare <img> had */
.gal-i picture,.bd-add picture{display:block}
.gal-i picture img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--slate)}
.bd-add picture img{width:100%;height:104px;object-fit:cover;display:block;background:var(--slate)}

/* What goes where */
.bulbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:42px;text-align:left}
.bulb{background:var(--deep);border:1px solid var(--slate);border-radius:16px;padding:24px}
.bulb strong{display:block;font-family:var(--serif);font-size:21px;font-weight:600;color:var(--paper);margin-bottom:6px}
.bulb-w{display:block;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--filament);font-weight:600;margin-bottom:11px}
.bulb p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}

/* ── QR survey (/yard/, /door/) ─────────────────────────────────────────── */
.scan{position:relative;overflow:hidden;background:var(--deep);padding:48px 20px 72px}
.scan-in{position:relative;z-index:1}
.scan-palms{position:absolute;inset:auto 0 0 0;width:100%;height:auto;opacity:.55;pointer-events:none}
.scan-in{max-width:560px;margin:0 auto}
.scan-h{font-family:var(--serif);font-size:clamp(36px,8vw,52px);line-height:1.05;font-weight:600;margin:0 0 12px;color:var(--paper)}
.scan-h em{color:var(--lit)}
.scan-lead{font-size:17px;line-height:1.55;color:#D5E3DC;margin:0 0 26px}
.sf{background:rgba(6,28,20,.72)}
.sf-set{border:0;padding:0;margin:0 0 22px;min-width:0}
.sf-set legend{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--paper);padding:0;margin:0 0 12px}
.sf-chips{display:flex;flex-wrap:wrap;gap:9px}
.sf-chip{position:relative;cursor:pointer}
.sf-chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.sf-chip span{display:inline-flex;align-items:center;min-height:46px;padding:0 16px;border:1.5px solid var(--slate);border-radius:100px;background:var(--night);color:var(--paper);font-size:15.5px;font-weight:500;transition:border-color .16s,background .16s,color .16s}
.sf-chip input:checked + span{border-color:var(--filament);background:var(--filament);color:#1A1208;font-weight:600}
.sf-chip input:focus-visible + span{outline:2px solid var(--lit);outline-offset:2px}
.sf-consent{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--muted);margin:2px 0 16px;cursor:pointer}
.sf-consent input{width:22px;height:22px;margin:0;flex-shrink:0;accent-color:var(--filament)}

/* ── Christmas dress ─────────────────────────────────────────────────────── */
.btn{background:var(--berry)}
.btn:hover{background:var(--berry2)}
.sticky-quote{background:var(--berry)!important;color:#fff!important}
.sf-chip input:checked + span{border-color:var(--lit);background:var(--berry);color:#fff}
h1,h2,h3,.sec-h,.scan-h,.qf-h{letter-spacing:.005em}
h1 em,h2 em{color:var(--lit)}
.procbar{background:var(--berry2)}

/* ── Early-booking offer popup ───────────────────────────────────────────── */
.of-lock{overflow:hidden}
.of[hidden],.of-tab[hidden]{display:none}
.of{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(4,18,13,.74);backdrop-filter:blur(5px);animation:of-in .22s ease-out}
.of-card{position:relative;width:100%;max-width:500px;max-height:calc(100dvh - 40px);overflow-y:auto;background:var(--deep);border:1px solid rgba(255,226,168,.22);border-radius:22px;padding:34px 30px 22px;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.of-card::before{content:"";position:absolute;top:0;left:30px;right:30px;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--berry),var(--lit),var(--berry))}
.of-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:28px;line-height:1;cursor:pointer}
.of-x:hover,.of-x:focus-visible{color:var(--paper);background:rgba(255,255,255,.08);outline:none}
.of-h{font-family:var(--serif);font-size:44px;font-weight:600;line-height:1.05;color:var(--paper);margin:0 0 10px}
.of-lead{font-size:15px;line-height:1.55;color:var(--muted);margin:0 0 22px}
.of .sf-set{margin-bottom:18px}
.of .sf-set legend{font-size:19px;margin-bottom:10px}
.of .sf-chip span{min-height:42px;padding:0 14px;font-size:14.5px}
.of-trust{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;margin:16px 0 0;padding:0;font-size:12.5px;color:var(--paper)}
.of-trust li::before{content:"\2713";color:var(--lit);margin-right:6px}
.of .qf-f{text-align:left;margin-top:10px}
.of-no{display:block;margin:12px auto 0;padding:10px 14px;border:0;background:none;color:var(--muted);font-family:var(--sans);font-size:13.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.of-no:hover{color:var(--paper)}
.of-tab{position:fixed;left:18px;bottom:18px;z-index:140;border:1px solid rgba(255,226,168,.35);border-radius:100px;padding:11px 18px;background:var(--berry);color:#fff;font-family:var(--sans);font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.of-tab:hover{background:var(--berry2)}
@keyframes of-in{from{opacity:0}to{opacity:1}}
@media (max-width:760px){
  .of{align-items:flex-end;padding:0}
  .of-card{max-width:none;max-height:92dvh;border-radius:22px 22px 0 0;padding:30px 20px calc(18px + env(safe-area-inset-bottom))}
  .of-h{font-size:36px}
  .of-tab{left:12px;bottom:70px}
}
@media (prefers-reduced-motion:reduce){.of{animation:none}}
.scan-offer{margin:0 0 20px;padding:13px 16px;border:1px solid rgba(255,226,168,.35);border-left:4px solid var(--berry);border-radius:12px;background:rgba(10,42,31,.7);font-size:15.5px;line-height:1.45;color:var(--paper)}
.scan-offer strong{color:var(--lit);font-size:17px}
.of-prog{margin:0 0 14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.of-sizes{flex-direction:column;align-items:stretch}
.of-sizes .sf-chip span{display:flex;width:100%;min-height:48px}
.of-skip{display:block;margin:2px 0 0;padding:10px 0;border:0;background:none;color:var(--lit);font-family:var(--sans);font-size:14.5px;font-weight:600;cursor:pointer}
@media (max-width:760px){.of--in .of-lead{display:none}}