/* ============================================================
   Magic Season Lighting — v2
   Brand teal / silver-white / aqua, Montserrat display + Inter body.
   ============================================================ */
:root{
  /* brand: the logo's deep teal, with silver-white and an aqua accent */
  --teal:#08373d; --deep:#062a2f; --teal-2:#0c454c; --teal-3:#125a62;
  --white:#fff; --mist:#eef4f3; --mist-2:#dbe7e6; --mist-line:#d3e0df;
  --accent:#7fdcd2; --accent-l:#c8f3ee; --accent-d:#0e7f7b;
  --silver:#a9b8b9;
  --text:#0b2a2e; --muted:#51686a; --muted-d:#a9c2c3;
  --line-d:rgba(255,255,255,.12);
  --shell:1240px; --r:22px; --r-sm:14px;
  --e:cubic-bezier(.22,.61,.36,1); --e-out:cubic-bezier(.16,1,.3,1);
  --f-disp:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--teal);color:var(--text);font-family:var(--f-body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3,h4{margin:0;font-family:var(--f-disp);font-weight:800;letter-spacing:-.02em;line-height:1.05;text-wrap:balance}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
.shell{width:min(100% - 48px,var(--shell));margin-inline:auto}
.ic{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--accent);color:var(--teal);padding:10px 16px;border-radius:0 0 10px 0}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hl{background:linear-gradient(100deg,#e9fbf9 0%,var(--accent) 55%,#52c6ba 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- shared type ---------- */
.eyebrow{display:block;font-family:var(--f-disp);font-size:.75rem;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--accent)}
.eyebrow--line{display:flex;align-items:center;gap:16px}
.eyebrow--line::before{content:"";width:34px;height:1px;flex-shrink:0;background:linear-gradient(90deg,transparent,var(--accent))}
.h2{font-size:clamp(2rem,4.2vw,2.75rem);margin-top:16px}
.lead{font-size:1.06rem;color:var(--muted);max-width:58ch}
.sec{position:relative;padding:clamp(72px,9vw,120px) 0}
.sec--white{background:var(--white)}
.sec--mist{background:var(--mist)}
.sec--dark{background:var(--teal);color:var(--white)}
.sec--dark .lead{color:var(--muted-d)}
.head{margin-bottom:clamp(36px,5vw,56px)}
.head--split{display:grid;grid-template-columns:1fr 1fr;gap:24px 60px;align-items:end}
.head__side{display:grid;gap:18px;justify-items:start}
.head--center{text-align:center;display:grid;justify-items:center;gap:0}
.head--center .lead{margin-top:18px}
.head--work{grid-template-columns:1fr auto;align-items:end}
.head--work .lead{margin-top:18px}
.tlink{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-disp);font-weight:700;font-size:.92rem;
  border-bottom:1.5px solid currentColor;padding-bottom:3px;transition:gap .3s var(--e-out),color .3s}
.tlink:hover{gap:13px;color:var(--accent-d)}
.tlink--hl{color:var(--accent);border-color:transparent}
.tlink--hl:hover{color:var(--accent-l)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;border-radius:999px;
  font-family:var(--f-disp);font-weight:700;font-size:.92rem;line-height:1;white-space:nowrap;
  transition:transform .3s var(--e-out),box-shadow .3s,background .3s,border-color .3s,color .3s}
.btn:hover{transform:translateY(-2px)}
.btn--sm{padding:11px 20px;font-size:.86rem}
.btn--block{width:100%}
.btn--primary{background:#f3f9f8;color:var(--teal);box-shadow:0 10px 34px -10px rgba(255,255,255,.55)}
.btn--primary:hover{background:#fff;box-shadow:0 12px 38px -8px rgba(255,255,255,.7)}
.btn--glass{color:var(--white);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18)}
.btn--glass:hover{background:rgba(255,255,255,.14)}
.btn--line{color:var(--white);border:1px solid rgba(255,255,255,.2);background:rgba(6,42,47,.4)}
.btn--line:hover{border-color:var(--accent);color:var(--accent-l)}
.btn--ink{background:var(--teal);color:var(--white)}
.btn--ink:hover{background:var(--teal-3)}
.btn--outline{border:1.5px solid rgba(6,42,47,.18);color:var(--text)}
.btn--outline:hover{border-color:var(--teal)}
button[disabled]{opacity:.7;cursor:progress}

/* ---------- top line / progress ---------- */
.topline{position:fixed;top:0;left:0;right:0;height:3px;z-index:320;background:rgba(127,220,210,.28)}
.topline span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;will-change:transform;
  background:linear-gradient(90deg,var(--accent),#e9fbf9)}

/* ---------- nav ---------- */
.nav{position:fixed;top:3px;left:0;right:0;z-index:300;padding:18px 0;color:var(--white);
  transition:padding .35s var(--e),background .35s,box-shadow .35s}
.nav.is-stuck{padding:10px 0;background:rgba(6,42,47,.96);box-shadow:0 14px 40px -18px rgba(0,0,0,.9)}
.nav__in{display:flex;align-items:center;gap:28px}
.brand{display:block;flex-shrink:0}
.brand img{height:66px;width:auto;transition:height .35s var(--e)}
.nav.is-stuck .brand img{height:52px}
.nav__links{display:flex;gap:30px;margin-left:18px}
.nav__links a{position:relative;font-family:var(--f-disp);font-weight:600;font-size:.86rem;color:rgba(255,255,255,.86);padding:6px 0;transition:color .25s}
.nav__links a:hover,.nav__links a.is-active{color:var(--accent)}
.nav__links a.is-active::after{content:"";position:absolute;left:50%;bottom:-7px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--accent)}
.nav__act{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav__phone .ic{color:var(--accent)}
.burger{display:none;width:44px;height:44px;border-radius:12px;position:relative;border:1px solid rgba(255,255,255,.18)}
.burger span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--white);transition:transform .35s var(--e-out),opacity .25s,top .35s var(--e-out)}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
.burger[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){top:21px;transform:rotate(-45deg)}
.mmenu{position:fixed;inset:0;z-index:290;background:rgba(6,42,47,.98);color:var(--white);padding:110px 28px 32px;
  display:flex;flex-direction:column;justify-content:space-between;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.mmenu.is-open{opacity:1;visibility:visible}
.mmenu nav{display:grid;gap:4px}
.mmenu nav a{font-family:var(--f-disp);font-weight:800;font-size:1.9rem;letter-spacing:-.02em;padding:10px 0}
.mmenu__foot{display:grid;gap:10px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;color:var(--white);
  padding:130px 0 84px;isolation:isolate;overflow:hidden;background:var(--teal)}
.hero__media{position:absolute;inset:0;z-index:-1}
.hero__stack{position:absolute;inset:0}
/* the photo holds still; only the lights move */
.hero__img,.hero__mask,.hero__bulbs{position:absolute;inset:0;width:100%;height:100%}
.hero__img{object-fit:cover;object-position:center 62%}
.hero__mask{pointer-events:none}
.hero__bulbs{pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity 1.2s var(--e)}
.hero__bulbs.is-live{opacity:1}
/* the house starts dark from first paint when the script will run */
.js .hero__mask{background:rgba(6,7,12,.74)}
.js .hero__mask.is-drawn{background:none}
.hero__scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(6,42,47,.93) 0%,rgba(6,42,47,.72) 36%,rgba(6,42,47,.18) 66%,rgba(6,42,47,.3) 100%),
  linear-gradient(180deg,rgba(6,42,47,.6) 0%,transparent 26%,transparent 68%,rgba(6,42,47,.92) 100%)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:48px;align-items:center;width:min(100% - 48px,var(--shell))}
.hero__title{font-size:clamp(2.6rem,5.6vw,4rem);margin:22px 0 22px}
.hero__rot{display:block;white-space:nowrap;padding-right:.08em;
  background:linear-gradient(100deg,#e9fbf9 0%,var(--accent) 55%,#52c6ba 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:opacity .38s var(--e),transform .38s var(--e)}
.hero__rot.is-swapping{opacity:0;transform:translateY(-14px)}
/* the accent takes the colours of the scene on the house */
.hero__rot[data-scene="christmas"]{background-image:linear-gradient(100deg,#ff6b5e,#ffd9c9 30%,#4fe08a 62%,#ff6b5e)}
.hero__rot[data-scene="halloween"]{background-image:linear-gradient(100deg,#ffa14a,#ffd08a 28%,#b777ff 64%,#ffa14a)}
.hero__rot[data-scene="game"]{background-image:linear-gradient(100deg,#5b9dff,#eef4ff 36%,#5b9dff 70%,#eef4ff)}
.hero__sub{font-size:clamp(1rem,1.5vw,1.12rem);color:rgba(255,255,255,.82);max-width:54ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
/* the quick-quote card is the hero's main action; the button would only repeat it */
.hero__cta .btn--primary{display:none}
.hero__micro{margin-top:14px;font-size:.84rem;color:rgba(255,255,255,.6);letter-spacing:.01em}
.hero__trust{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;font-size:.88rem;color:rgba(255,255,255,.78)}
.hero__trust li{display:flex;align-items:center;gap:8px}
.hero__trust .ic{width:16px;height:16px;color:var(--accent)}
/* quick quote card in the hero: smoked glass, so the house still shows through */
.qq{position:relative;justify-self:end;width:100%;max-width:410px;border-radius:24px;overflow:hidden;color:var(--white);
  background:linear-gradient(160deg,rgba(9,52,58,.7),rgba(4,28,32,.8));
  border:1px solid rgba(200,243,238,.22);box-shadow:0 40px 90px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08)}
.qq{scroll-margin-top:86px}
/* a string of lights along the top edge, like a lit roofline */
.qq__lights{display:block;height:12px;position:relative;border-bottom:1px solid rgba(200,243,238,.12)}
.qq__lights::before,.qq__lights::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,#f4fffd 0 2.4px,transparent 3.4px),radial-gradient(circle,var(--accent) 0 2.4px,transparent 3.4px);
  background-size:36px 12px,36px 12px;background-position:9px 50%,27px 50%;background-repeat:repeat-x}
.qq__lights::after{filter:blur(3px);opacity:.9;animation:twinkle 3.2s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.35}to{opacity:1}}
.qq__body{padding:22px 24px 20px}
/* Google rating: the strongest trust signal, right where they decide */
/* "★★★★★ Rated 4.8 on G" */
.rated{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.rated .stars{font-size:1.05em;letter-spacing:2px}
.rated b{font-family:var(--f-disp);font-weight:800;color:var(--white)}
.rated em{font-style:normal;color:rgba(255,255,255,.6)}
.rated .glogo{width:1.25em;height:1.25em}
.hero__rating a{display:inline-flex}
.stars{color:#ffc83d;letter-spacing:1px;font-size:.92em}
.qq__h{font-size:1.4rem;margin:8px 0 14px;letter-spacing:-.025em;color:var(--white)}
.qq__pick{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:10px}
.qq__pick label{position:relative;cursor:pointer}
.qq__pick input{position:absolute;opacity:0;pointer-events:none}
.qq__pick span{display:grid;justify-items:center;gap:1px;padding:11px 6px 10px;border-radius:14px;text-align:center;
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.14);transition:border-color .2s,background .2s,transform .2s var(--e-out)}
.qq__pick span .ic{width:19px;height:19px;color:rgba(255,255,255,.6);margin-bottom:4px;transition:color .2s}
.qq__pick b{font-family:var(--f-disp);font-weight:700;font-size:.84rem;line-height:1.2}
.qq__pick small{font-size:.68rem;color:rgba(255,255,255,.55);line-height:1.3}
.qq__pick label:hover span{border-color:rgba(127,220,210,.55);transform:translateY(-1px)}
.qq__pick input:checked + span{border-color:var(--accent);background:rgba(127,220,210,.14)}
.qq__pick input:checked + span .ic{color:var(--accent)}
.qq__pick input:checked + span::after{content:"";position:absolute;top:7px;right:7px;width:14px;height:14px;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308373d' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 10 16.5 18 8'/%3E%3C/svg%3E") center/10px no-repeat}
.qq__pick input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.qq__fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qq__f--wide{grid-column:1 / -1}
.qq__f label{position:relative;display:block}
.qq__f .ic{position:absolute;left:14px;top:50%;margin-top:-9px;color:rgba(255,255,255,.55);pointer-events:none;transition:color .2s}
.qq__f input{width:100%;height:50px;padding:0 12px 0 42px;border-radius:14px;font:inherit;font-size:1rem;color:var(--white);
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.16);transition:border-color .2s,background .2s,box-shadow .2s;appearance:none;-webkit-appearance:none}
.qq__f input::placeholder{color:rgba(255,255,255,.55)}
.qq__f input:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.12);box-shadow:0 0 0 4px rgba(127,220,210,.18)}
.qq__f input:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 40px #0b3a40 inset;caret-color:#fff}
.qq__f label:focus-within .ic{color:var(--accent)}
.qq__f em{display:block;font-style:normal;font-size:.76rem;color:#ffb4a8;margin:5px 0 0 4px}
.qq__f em:empty{display:none}
.qq__f.is-bad input{border-color:#ff8f7e}
.qq__go{height:54px;margin-top:12px;font-size:.98rem;position:relative;overflow:hidden}
/* a slow sheen across the button (transform only, so it never repaints the page) */
.qq__go::after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);opacity:.5;
  transform:translateX(-150%) skewX(-20deg);animation:sheen 4.5s var(--e) infinite}
@keyframes sheen{0%,70%{transform:translateX(-150%) skewX(-20deg)}100%{transform:translateX(450%) skewX(-20deg)}}
.qq__trust{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 16px;margin-top:13px;font-size:.78rem;color:rgba(255,255,255,.72)}
.qq__trust li{display:flex;align-items:center;gap:5px}
.qq__trust .ic{width:14px;height:14px;color:#3ddc97;stroke-width:2.4}
.qq__privacy{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;font-size:.72rem;color:rgba(255,255,255,.55)}
.qq__privacy .ic{width:12px;height:12px}
/* one real review at the moment of doubt, right under the button */
.qq__quote{margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.1);text-align:center}
.qq__quote blockquote{margin:0;min-height:2.9em;display:flex;align-items:center;justify-content:center;font-size:.86rem;line-height:1.45;font-style:italic;color:rgba(255,255,255,.88)}
.qq__quote blockquote,.qq__quote figcaption{transition:opacity .45s var(--e)}
.qq__quote.is-fading blockquote,.qq__quote.is-fading figcaption{opacity:0}
.qq__quote figcaption{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:4px;font-size:.72rem;color:rgba(255,255,255,.6)}
.qq__quote .stars{font-size:.72rem;letter-spacing:1px}
.qq__quote .glogo{width:12px;height:12px}
.qq__note{margin-top:10px;text-align:center;font-size:.82rem;color:rgba(255,255,255,.75)}
.qq__note:empty{display:none}
.qq__note.is-bad{color:#ffb4a8}
/* sent: the card becomes a confirmation */
.qq.is-done .qq__body{display:none}
.qq__done{padding:24px 24px 22px;text-align:center;animation:fadeUp .5s var(--e-out)}
.qq__done[hidden]{display:none}
/* ---------- "we've got it" — shared by both forms ----------
   A string of lights switches on bulb by bulb, then a check draws itself. */
.done__lights{display:flex;justify-content:center;gap:10px;margin:0 0 18px}
.done__lights i{width:8px;height:8px;border-radius:50%;background:rgba(127,220,210,.18);
  animation:bulbOn .35s var(--e) forwards}
.done__lights i:nth-child(odd){--on:#f4fffd}
.done__lights i:nth-child(even){--on:var(--accent)}
.done__lights i:nth-child(1){animation-delay:0.11s}
.done__lights i:nth-child(2){animation-delay:0.17s}
.done__lights i:nth-child(3){animation-delay:0.23s}
.done__lights i:nth-child(4){animation-delay:0.29s}
.done__lights i:nth-child(5){animation-delay:0.35s}
.done__lights i:nth-child(6){animation-delay:0.41s}
.done__lights i:nth-child(7){animation-delay:0.47s}
.done__lights i:nth-child(8){animation-delay:0.53s}
.done__lights i:nth-child(9){animation-delay:0.59s}
.done__lights i:nth-child(10){animation-delay:0.65s}
.done__lights i:nth-child(11){animation-delay:0.71s}
.done__lights i:nth-child(12){animation-delay:0.77s}
.done__lights i:nth-child(13){animation-delay:0.83s}
@keyframes bulbOn{to{background:var(--on);box-shadow:0 0 10px 2px var(--on)}}
.tick{display:block;width:62px;height:62px;margin:0 auto 14px}
.tick__c{fill:rgba(61,220,151,.14);stroke:#3ddc97;stroke-width:2.5;stroke-dasharray:150;stroke-dashoffset:150;animation:tickDraw .7s .85s var(--e-out) forwards}
.tick__p{fill:none;stroke:#3ddc97;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:tickDraw .45s 1.35s var(--e-out) forwards}
@keyframes tickDraw{to{stroke-dashoffset:0}}
.done__q{margin:4px 0 10px;font-family:var(--f-disp);font-weight:700;font-size:.95rem}
.qq__done .done__q{color:#fff}
.qq__done .qq__h{margin:0 0 6px;outline:none}
.qq__done > p{color:rgba(255,255,255,.75);font-size:.95rem}
.qq__next{display:grid;gap:8px;margin:18px 0;text-align:left}
.qq__next li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.07);font-size:.9rem;font-weight:500}
.qq__next b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;flex-shrink:0;background:var(--accent);color:var(--teal);font-family:var(--f-disp);font-size:.75rem}
.qq__doneBtns{display:grid;gap:10px;justify-items:center}
.qq__doneBtns .btn{justify-self:stretch}
.qq__call{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem;color:var(--accent)}
.qq__call .ic{width:16px;height:16px}
.hero__scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:grid;justify-items:center;gap:8px;
  font-family:var(--f-disp);font-size:.62rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.hero__scroll::after{content:"";width:1px;height:28px;background:linear-gradient(var(--accent),transparent);animation:drip 2s var(--e) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- countdown strip ---------- */
.strip{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 24px;text-align:center;
  background:var(--deep);color:rgba(255,255,255,.86);border-block:1px solid rgba(127,220,210,.28);
  font-family:var(--f-disp);font-weight:600;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;transition:color .3s}
.strip[hidden]{display:none}
.strip b{color:var(--accent)}
.strip .ic{color:var(--accent);transition:transform .3s var(--e-out)}
.strip:hover{color:var(--white)}
.strip:hover .ic{transform:translateX(4px)}
.hero__countdown-i{font-size:1.05rem;letter-spacing:0}

/* ---------- reviews ---------- */
.reviews{background:var(--white);padding:clamp(36px,4.5vw,52px) 0 clamp(32px,4vw,44px);overflow:hidden}
.reviews[hidden]{display:none}
/* the rail: an endless row of cards drifting left; pauses on hover/touch.
   Edge fades are plain overlays — a CSS mask over a moving row makes phones
   repaint the whole strip every frame. */
.reviews__rail{position:relative}
.reviews__rail::before,.reviews__rail::after{content:"";position:absolute;top:0;bottom:0;width:clamp(24px,6vw,90px);z-index:2;pointer-events:none}
.reviews__rail::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.reviews__rail::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
.reviews__track{display:flex;align-items:flex-start;gap:16px;width:max-content;padding:2px 0 10px;
  will-change:transform;backface-visibility:hidden;animation:marquee var(--dur,60s) linear infinite}
.reviews__rail.is-held .reviews__track,.reviews.is-off .reviews__track{animation-play-state:paused}
/* hover-pause only where there's a real mouse: on phones a tap leaves the row
   "hovered" and it would stay frozen */
@media (hover:hover) and (pointer:fine){.reviews__rail:hover .reviews__track{animation-play-state:paused}}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.rv{flex:0 0 auto;width:min(360px,80vw);padding:20px 22px 22px;border-radius:18px;background:var(--white);border:1px solid #e6ebeb;
  box-shadow:0 8px 24px -20px rgba(6,42,47,.35)}
.rv__top{display:flex;align-items:center;gap:12px}
.rv__av{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;flex-shrink:0;color:#fff;font-family:var(--f-disp);font-weight:700;font-size:1rem}
.rv__who{flex:1;min-width:0;line-height:1.25}
.rv__who b{display:block;font-family:var(--f-disp);font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv__who span{font-size:.78rem;color:#6b7b7c}
.rv .glogo{width:20px;height:20px;flex-shrink:0}
.rv .stars{display:block;margin:10px 0 6px;font-size:.92rem;letter-spacing:1.5px}
.rv p{font-size:.92rem;line-height:1.55;color:var(--text);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.reviews__all{margin-top:16px;text-align:center}
.reviews__all a{font-family:var(--f-disp);font-weight:600;font-size:.92rem;color:var(--text);border-bottom:2px solid var(--accent-d);padding-bottom:2px;transition:color .2s}
.reviews__all a:hover{color:var(--accent-d)}

/* the two offers, each with its own quote button */
.offers{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.offer{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:var(--white);border:1px solid var(--mist-line);
  transition:transform .4s var(--e-out),box-shadow .4s}
.offer:hover{transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(6,42,47,.5)}
.offer--hl{background:var(--teal);color:var(--white);border-color:var(--teal)}
.offer__img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--deep)}
.offer__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e-out)}
.offer:hover .offer__img img{transform:scale(1.05)}
.offer__tag{position:absolute;top:14px;left:14px;padding:7px 12px;border-radius:999px;background:rgba(6,42,47,.75);color:var(--accent);
  font-family:var(--f-disp);font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.offer__b{display:flex;flex-direction:column;gap:14px;flex:1;padding:clamp(24px,3vw,34px)}
.offer h3{font-size:clamp(1.4rem,2.2vw,1.75rem)}
.offer p{color:var(--muted)}
.offer--hl p{color:var(--muted-d)}
.offer ul{display:grid;gap:9px;margin-bottom:8px}
.offer li{display:flex;align-items:center;gap:10px;font-size:.95rem}
.offer li .ic{width:16px;height:16px;color:var(--accent-d);flex-shrink:0}
.offer--hl li .ic{color:var(--accent)}
.offer .btn{align-self:flex-start;margin-top:auto}
.offers__also{margin-top:22px;text-align:center;color:var(--muted);font-size:.95rem}
.offers__also a{color:var(--accent-d);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---------- scenes ---------- */
.scenes{overflow:hidden}
.scenes::before{content:"";position:absolute;right:-10%;top:30%;width:50%;height:60%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(127,220,210,.16),transparent)}
.stage{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:22px;align-items:stretch;position:relative}
.stage__view{position:relative;border-radius:var(--r);overflow:hidden;min-height:100%;background:var(--deep);border:1px solid var(--line-d)}
.stage__view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--e)}
.stage__view img.is-on{opacity:1}
.stage__foot{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:22px;
  padding:26px 30px;border-radius:var(--r);background:var(--teal-2);border:1px solid var(--line-d)}
.stage__foot h3{font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.15}
.stage__foot p{margin-top:8px;color:var(--muted-d);font-size:.98rem;max-width:62ch}
.stage__cta{flex-shrink:0}

/* ---------- the app (iPhone) ---------- */
.phone{display:flex}
.phone__body{position:relative;width:100%;aspect-ratio:9/19;border-radius:46px;padding:10px;
  background:linear-gradient(160deg,#2c3a3c,#131b1c 55%,#0a0f10);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(200,243,238,.14),inset 0 1px 0 rgba(255,255,255,.12)}
.phone__island{position:absolute;top:20px;left:50%;width:30%;height:22px;margin-left:-15%;border-radius:999px;background:#05090a;z-index:3}
.phone__screen{height:100%;border-radius:37px;overflow:hidden;padding:16px 15px 16px;display:flex;flex-direction:column;gap:9px;
  background:linear-gradient(175deg,#0f2a2e,#0a1d20 50%,#071517)}
.phone__top{display:flex;justify-content:space-between;align-items:center;padding:0 10px;height:22px;
  font-family:var(--f-body);font-size:.7rem;font-weight:600;color:rgba(255,255,255,.8)}
.phone__sig{display:inline-flex;align-items:flex-end;gap:2px}
.phone__sig i{width:3px;border-radius:1px;background:rgba(255,255,255,.8)}
.phone__sig i:nth-child(1){height:5px}.phone__sig i:nth-child(2){height:7px}.phone__sig i:nth-child(3){height:9px}
.phone__sig b{width:18px;height:9px;margin-left:4px;border-radius:3px;border:1px solid rgba(255,255,255,.7);
  background:linear-gradient(90deg,rgba(255,255,255,.8) 70%,transparent 70%)}
.phone__head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;padding:12px 13px;border-radius:16px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.phone__head b{display:block;font-family:var(--f-disp);font-weight:700;font-size:.9rem;color:#fff}
.phone__head i{display:block;font-style:normal;font-size:.72rem;color:rgba(255,255,255,.55);margin-top:2px}
.phone__power{position:relative;width:46px;height:28px;border-radius:999px;flex-shrink:0;background:rgba(255,255,255,.16);transition:background .3s}
.phone__power::after{content:"";position:absolute;inset:-8px -5px}   /* a full-size tap target */
.phone__power span{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .3s var(--e-out)}
.phone__power.is-on{background:var(--accent-d)}
.phone__power.is-on span{transform:translateX(18px)}
.phone__label{font-family:var(--f-disp);font-size:.6rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.42);margin:2px 0 -3px 4px}
.phone__scenes{display:grid;gap:5px}
.pscene{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:13px;text-align:left;
  font-family:var(--f-disp);font-weight:600;font-size:.82rem;color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);transition:background .25s,border-color .25s,color .25s}
.pscene span{width:16px;height:16px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 0 10px -1px var(--a)}
.pscene:hover{background:rgba(255,255,255,.1)}
/* "Any Color": a colour wheel until it's picked, then the colour that's showing */
.pscene--any span{background:conic-gradient(#ff2a3c,#ff9a1f,#ffe14d,#22e05f,#2fd3ff,#2f6bff,#a347ff,#ff4fd8,#ff2a3c);box-shadow:0 0 10px -1px rgba(160,120,255,.8)}
.pscene--any.is-on span{background:var(--c,#ff2a3c);box-shadow:0 0 10px 0 var(--c,#ff2a3c);transition:background .4s,box-shadow .4s}
.pscene--any em{margin-left:auto;font-style:normal;font-family:var(--f-body);font-weight:600;font-size:.7rem;color:rgba(255,255,255,.6)}
.pscene--any em:empty{display:none}
.pscene--any.is-on em{color:#fff}
.pscene--any.is-on:has(em:not(:empty))::after{margin-left:8px}
.pscene.is-on{color:#fff;background:rgba(127,220,210,.16);border-color:rgba(127,220,210,.55)}
.pscene.is-on::after{content:"";margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px 1px var(--accent)}
.phone__now{padding:10px 12px;border-radius:13px;background:rgba(255,255,255,.04)}
.stage__bulbs{display:flex;gap:5px;flex-wrap:nowrap;overflow:hidden}
.stage__bulbs i{width:6px;height:6px;border-radius:50%;flex-shrink:0;transition:background .5s,box-shadow .5s}
.phone__bright{margin-top:auto;padding:10px 12px;border-radius:13px;font-size:.76rem;color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}
.phone__bright i{display:block;height:6px;margin-top:9px;border-radius:6px;background:rgba(255,255,255,.14)}
.phone__bright b{display:block;width:78%;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent-d),var(--accent));transition:width .5s var(--e)}
.phone.is-off .phone__bright b{width:0}
.phone__row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:13px;
  font-size:.76rem;color:rgba(255,255,255,.7);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}
.phone__toggle{position:relative;width:34px;height:20px;border-radius:999px;background:rgba(255,255,255,.16);flex-shrink:0}
.phone__toggle span{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .3s var(--e-out)}
.phone__toggle.is-on{background:var(--accent-d)}
.phone__toggle.is-on span{transform:translateX(14px)}
/* until the visitor taps, the scene list breathes to invite a tap */
.phone.is-demo .pscene.is-on::after{animation:invite 1.4s var(--e) infinite}
@keyframes invite{50%{transform:scale(1.8);opacity:.6}}

/* ---------- why us ---------- */
.why{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(36px,6vw,84px);align-items:center}
.why__photo{position:relative;margin:0;border-radius:var(--r);aspect-ratio:4/5;background:var(--teal)}
.why__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 0%;border-radius:var(--r)}   /* top-anchored: the installer's head is right at the top edge */
.why__photo::after{content:"";position:absolute;inset:0;border-radius:var(--r);background:linear-gradient(180deg,transparent 50%,rgba(6,42,47,.9))}
.why__photo figcaption{position:absolute;left:24px;right:24px;bottom:22px;z-index:2;color:var(--white);
  font-family:var(--f-disp);font-weight:800;font-size:1.2rem;line-height:1.25;letter-spacing:-.015em}
.why__photo figcaption .eyebrow{margin-bottom:8px;font-size:.66rem}
.feats{display:grid;grid-template-columns:1fr 1fr;gap:30px 34px;margin-top:38px}
.feat{display:flex;gap:16px;align-items:flex-start}
.feat__i{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;flex-shrink:0;color:var(--accent-d);
  background:rgba(127,220,210,.14);border:1px solid rgba(127,220,210,.3)}
.feat b{display:block;font-family:var(--f-disp);font-weight:800;font-size:1.04rem;letter-spacing:-.015em;line-height:1.25}
.feat p{margin-top:8px;font-size:.92rem;color:var(--muted);line-height:1.6}
.steps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(48px,6vw,72px);border-radius:var(--r);background:var(--white);
  border:1px solid var(--mist-line);overflow:hidden}
.steps li{padding:30px 30px 32px;border-left:1px solid var(--mist-line)}
.steps li:first-child{border-left:0}
.steps span{display:block;font-family:var(--f-disp);font-weight:800;font-size:2.4rem;letter-spacing:-.03em;line-height:1;color:var(--mist-2);margin-bottom:14px;
  -webkit-text-stroke:1px rgba(127,220,210,.35)}
.steps b{font-family:var(--f-disp);font-weight:800;font-size:1.08rem;letter-spacing:-.015em}
.steps p{margin-top:8px;font-size:.92rem;color:var(--muted)}

/* ---------- in-section calls to action ---------- */
.cta-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 28px;margin-top:22px;
  padding:22px 28px;border-radius:var(--r);background:var(--white);border:1px solid var(--mist-line)}
.cta-row p{font-size:1.02rem;color:var(--muted)}
.cta-row p b{font-family:var(--f-disp);font-weight:800;color:var(--text);letter-spacing:-.01em}
.cta-row__btns,.band__btns{display:flex;flex-wrap:wrap;gap:10px}
.cta-row .btn--outline .ic{color:var(--accent-d)}
.band{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px 32px;margin-top:clamp(28px,4vw,40px);
  padding:clamp(24px,3vw,34px) clamp(24px,3.4vw,40px);border-radius:var(--r);
  background:linear-gradient(120deg,var(--teal-2),var(--teal-3));border:1px solid rgba(127,220,210,.3)}
.band h3{font-size:clamp(1.3rem,2.2vw,1.65rem)}
.band p{margin-top:6px;color:var(--muted-d)}

/* ---------- gallery ---------- */
/* an even grid: three across, every tile the same size */
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.gal__i{position:relative;margin:0;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;cursor:pointer;background:var(--deep);border:1px solid var(--line-d);
  transition:border-color .3s,transform .4s var(--e-out)}
.gal__i--more{display:none}
.gal__i img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e-out)}
.gal__i::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,42,47,.15) 40%,rgba(6,42,47,.9))}
.gal__i:hover{border-color:rgba(127,220,210,.6)}
.gal__i::before{content:"";position:absolute;top:12px;right:12px;z-index:2;width:30px;height:30px;border-radius:50%;
  background:rgba(6,42,47,.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7'/%3E%3C/svg%3E") center/14px no-repeat;
  transition:transform .3s var(--e-out)}
.gal__i:hover::before{transform:scale(1.1)}
.gal__i:hover img{transform:scale(1.06)}
.gal__i figcaption{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;display:grid;gap:3px}
.gal__i figcaption i{order:-1;font-style:normal;font-family:var(--f-disp);font-size:.62rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.gal__i figcaption b{font-family:var(--f-disp);font-weight:800;font-size:1.04rem;letter-spacing:-.015em;line-height:1.2}
/* a string of lights, as a divider — the logo's silver-white and aqua */
.lights{height:14px;margin-top:clamp(40px,5vw,64px);
  background-image:
    radial-gradient(circle,#f4fffd 0 2.5px,transparent 3.5px),radial-gradient(circle,var(--accent) 0 2.5px,transparent 3.5px),
    linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14));
  background-size:56px 14px,56px 14px,100% 1px;
  background-position:0 50%,28px 50%,0 50%;
  background-repeat:repeat-x,repeat-x,no-repeat;
  filter:drop-shadow(0 0 5px rgba(127,220,210,.6))}
.lights--warm{margin:0 0 clamp(36px,5vw,56px)}

/* ---------- FAQ ---------- */
.faqs{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,80px);align-items:start}
.faqs__side{position:sticky;top:110px}
.faqs__side .lead,.why__copy .lead{margin-top:18px}
.faqs__btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.faqs__btns .ic{color:var(--accent-d)}
.faqs__btns .btn--ink .ic{color:var(--white)}
.acc{border-radius:var(--r);background:var(--white);border:1px solid var(--mist-line);overflow:hidden}
.acc details{border-top:1px solid var(--mist-line)}
.acc details:first-child{border-top:0}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px 26px;
  font-family:var(--f-disp);font-weight:800;font-size:1.06rem;letter-spacing:-.015em;line-height:1.3}
.acc summary::-webkit-details-marker{display:none}
.acc__i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;flex-shrink:0;color:var(--accent-d);
  border:1px solid rgba(127,220,210,.45);transition:transform .35s var(--e-out),background .3s,color .3s}
.acc__i .ic{width:15px;height:15px}
.acc details[open] .acc__i{transform:rotate(180deg);background:var(--teal);color:var(--white);border-color:transparent}
.acc p{padding:0 72px 26px 26px;font-size:.96rem;color:var(--muted);line-height:1.7}
.acc p a{color:var(--accent-d);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.acc details[open] p{animation:fadeUp .4s var(--e-out)}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- quote ---------- */
.quote{overflow:hidden;isolation:isolate}
.quote__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.16;z-index:-1}
.quote::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--teal) 0%,rgba(6,42,47,.6) 40%,var(--teal) 100%)}
.quote__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:center}
.quote__copy .h2{font-size:clamp(2.2rem,4.8vw,3.2rem)}
.quote__copy .lead{margin-top:18px}
.quote__list{display:grid;gap:10px;margin:26px 0 30px;color:rgba(255,255,255,.88)}
.quote__list li{display:flex;align-items:center;gap:10px}
.quote__list .ic{color:var(--accent)}
.quote__hours{margin-top:16px;font-size:.84rem;color:rgba(255,255,255,.55)}
.form{position:relative;padding:clamp(26px,3vw,38px);border-radius:var(--r);background:var(--white);color:var(--text);
  border:1px solid rgba(127,220,210,.35);box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.form h3{font-size:1.5rem}
.form__sub{margin:6px 0 20px;font-size:.92rem;color:var(--muted)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:block;margin-bottom:14px}
.field span{display:block;font-family:var(--f-disp);font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field span small{font-size:1em;letter-spacing:.06em;text-transform:none;font-weight:500;opacity:.8}
.field input,.field select,.field textarea{width:100%;padding:14px 15px;border-radius:12px;font:inherit;font-size:1rem;color:var(--text);
  background:var(--mist);border:1.5px solid var(--mist-line);transition:border-color .25s,box-shadow .25s;appearance:none;-webkit-appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2351686a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:40px}
.field textarea{resize:vertical;min-height:90px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(127,220,210,.2)}
.field em{display:block;font-style:normal;font-size:.8rem;color:#c0392b;margin-top:5px}
.field em:empty{display:none}
.field.is-bad input,.field.is-bad select{border-color:#c0392b}
.form__note{margin-top:14px;text-align:center;font-size:.86rem;color:var(--muted)}
.form__note a{color:var(--accent-d);font-weight:600;white-space:nowrap}
.form__note.is-bad{color:#c0392b}
.form__note.is-ok{color:#1d7a46;font-weight:600}
.form.is-done > :not(.form__done){display:none}
.form__done{text-align:center;padding:6px 0 2px;animation:doneIn .55s var(--e-out)}
.form__done[hidden]{display:none}
@keyframes doneIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.form__done h3{font-size:1.6rem;outline:none}
.form__doneLead{margin:8px auto 18px;max-width:34ch;color:var(--muted)}
.form__done .done__lights i{background:rgba(6,42,47,.1)}
.form__done .done__lights i:nth-child(odd){--on:#ffd27a}
.form__done .done__lights i:nth-child(even){--on:#0e7f7b}
.form__done .tick__c{fill:#e6f6ef;stroke:#1d8a5f}
.form__done .tick__p{stroke:#1d8a5f}
.done__next{display:grid;gap:8px;margin:0 0 18px;text-align:left}
.done__next li{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;background:var(--mist);font-size:.92rem;font-weight:500}
.done__next b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;flex-shrink:0;background:var(--teal);color:#fff;font-family:var(--f-disp);font-size:.75rem}
.form__done .done__q{color:var(--text)}
.form__done .btn{min-height:54px}
.form__doneHours{margin-top:10px;font-size:.8rem;color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- footer ---------- */
.foot{background:#041f23;color:rgba(255,255,255,.7);padding:64px 0 26px;border-top:1px solid rgba(127,220,210,.22)}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px}
.foot__grid p{margin-top:18px;font-size:.92rem;max-width:36ch}
.foot__cta{margin-top:20px}
.foot__col{display:grid;gap:10px;align-content:start;font-size:.92rem}
.foot__col h4{font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.foot__col a{transition:color .25s}
.foot__col a:hover{color:var(--accent-l)}
.foot__bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:44px;padding-top:22px;border-top:1px solid var(--line-d);font-size:.82rem;color:rgba(255,255,255,.5)}
.foot__bar a:hover{color:var(--accent-l)}

/* ---------- photo viewer ---------- */
.lb{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;background:rgba(4,30,34,.97);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;color:var(--white)}
.lb.is-open{opacity:1;visibility:visible}
.lb__fig{margin:0;width:min(1100px,94vw);text-align:center;align-self:flex-start;margin-top:max(76px,8vh)}   /* pinned to the top: a two-line caption never moves the photo or arrows */
.lb__fig img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:14px}
.lb__fig figcaption{margin-top:16px;font-family:var(--f-disp);font-weight:700;font-size:1.05rem}
.lb__count{margin:6px 0 16px;font-size:.78rem;font-weight:600;letter-spacing:.14em;color:rgba(255,255,255,.5)}
.lb__x{position:absolute;top:20px;right:22px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;font-size:1.6rem;line-height:1;
  color:var(--white);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);transition:background .25s,color .25s}
.lb__x:hover{background:var(--accent);color:var(--teal)}
/* next / previous: white arrows sitting on the photo, so it's obvious there's more */
/* a fixed stage: every photo sits inside the same box, so the arrows never move —
   tap them as fast as you like. Taps on the stage never close the viewer. */
.lb__media{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:min(72vh,calc(100vh - 230px))}
.lb__nav{position:absolute;top:50%;display:grid;place-items:center;width:48px;height:48px;margin-top:-24px;border-radius:50%;
  color:var(--teal);background:rgba(255,255,255,.92);box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .2s var(--e-out),background .2s}
.lb__nav .ic{width:20px;height:20px;stroke-width:2.2}
.lb__nav:hover{background:#fff;transform:scale(1.08)}
.lb__prev{left:12px}
.lb__prev .ic{transform:rotate(180deg)}
.lb__next{right:12px}

/* ---------- sticky call + quote bar (phones) ---------- */
.mbar{display:none}

/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--e-out),transform .8s var(--e-out)}
.js .reveal.is-in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .nav__links{display:none}
  .burger{display:block}
}
@media (max-width:1080px){
  .nav__links{gap:20px;margin-left:6px}
}
@media (max-width:1180px) and (min-width:901px){
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:36px}
  .hero__title{font-size:clamp(2.4rem,5vw,3.4rem)}
  .hero .eyebrow .hide-s{display:none}
}
@media (max-width:900px){
  .head--split{grid-template-columns:1fr}
  .head--work{grid-template-columns:1fr}
  .hero{padding:118px 0 72px}
  .hero__grid{grid-template-columns:1fr;gap:34px}
  .qq{max-width:520px;justify-self:stretch}
  .hero__cta .btn--primary{display:inline-flex}
  .offers{grid-template-columns:1fr}
  .hero__scroll{display:none}
  .stage{grid-template-columns:minmax(0,1fr);gap:12px}
  .phone,.phone__body,.phone__screen{min-width:0}
  /* explicit height: every child of the frame is absolutely positioned, and
     iOS Safari collapses a stretched grid item like that to zero even with
     aspect-ratio set, which hid the house on iPhones */
  .stage__view{min-height:0;height:calc((100vw - 48px) * .625)}
  /* on narrow screens the phone becomes its controls: one row of scenes under the photo */
  .phone__body{aspect-ratio:auto;border-radius:24px;padding:6px}
  .phone__island,.phone__top,.phone__label,.phone__now,.phone__bright,.phone__row{display:none}
  .phone__screen{border-radius:19px;padding:10px;gap:10px}
  .phone__head{margin-top:0;padding:9px 12px}
  /* every theme visible at once: three across, two across on phones */
  .phone__scenes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .pscene{min-width:0;padding:9px 10px;gap:8px}
  .pscene b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pscene.is-on::after{display:none}
  .stage__foot{flex-direction:column;align-items:flex-start;padding:22px}
  .why{grid-template-columns:1fr}
  .why__photo{max-width:460px;width:100%}
  .steps{grid-template-columns:1fr}
  .steps li{border-left:0;border-top:1px solid var(--mist-line)}
  .steps li:first-child{border-top:0}
  .gal{grid-template-columns:1fr 1fr}
  .faqs{grid-template-columns:1fr}
  .faqs__side{position:static}
  .quote__grid{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav__phone span,.nav__cta{display:none}
  .nav__phone{padding:0;width:44px;height:44px}
  .mbar{display:grid;grid-template-columns:auto 1fr;gap:10px;position:fixed;left:12px;right:12px;
    bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:280;padding:8px;border-radius:20px;
    background:rgba(6,42,47,.96);border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 44px -12px rgba(0,0,0,.9);
    transform:translateY(150%);transition:transform .45s var(--e-out)}
  .mbar.is-on{transform:none}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:14px;
    font-family:var(--f-disp);font-weight:700;font-size:.95rem}
  .mbar__call{padding:0 20px;color:var(--white);background:rgba(255,255,255,.08)}
  .mbar__go{color:var(--teal);background:#f3f9f8}
  .foot{padding-bottom:110px}
}
@media (max-width:640px){
  .shell,.hero__grid{width:min(100% - 36px,var(--shell))}
  .hide-s,.hero__trust .hide-s{display:none}
  /* phones: the lit house gets its own clear frame at the top (sized by width
     only, so the canvas never resizes while the browser toolbar slides), and
     the headline starts where the photo fades into teal */
  .hero{min-height:0;display:block;padding:calc(100vw - 6px) 0 40px}
  .hero__media{bottom:auto;height:calc(100vw + 70px)}
  .hero__scrim{background:linear-gradient(180deg,rgba(6,42,47,.7) 0%,rgba(6,42,47,0) 22%,rgba(6,42,47,0) 58%,rgba(6,42,47,.82) 80%,var(--teal) 100%)}
  .hero .eyebrow{font-size:.66rem;letter-spacing:.2em;margin-bottom:10px}
  .hero .eyebrow--line::before{display:none}
  .hero__grid{gap:26px}
  .hero__title{font-size:clamp(1.9rem,9.1vw,2.6rem);margin:0 0 14px}
  .hero__rot{white-space:nowrap}          /* one line, so the swap never shifts the page */
  .hero__sub{font-size:.98rem}
  .hero__cta{margin-top:22px;gap:10px}
  .hero__cta{display:grid;grid-template-columns:1.25fr 1fr}
  .hero__cta .btn{padding:15px 14px}
  .qq__body,.qq__done{padding:20px 18px 18px}
  .qq__h{font-size:1.28rem}
  .qq__fields{grid-template-columns:1fr}
  .rv{width:78vw;padding:18px 18px 20px}
  .rv p{font-size:.88rem;-webkit-line-clamp:6}
  .offer .btn{align-self:stretch}
  .qq{background:linear-gradient(160deg,rgba(9,52,58,.82),rgba(4,28,32,.9))}
  .qq__trust{gap:4px 12px;font-size:.74rem}
  .qq__pick span{padding:11px 4px 10px}
  .hero__trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:20px;font-size:.82rem}
  .strip{font-size:.68rem;letter-spacing:.08em;padding:12px 16px;gap:8px}
  .stage__view{height:calc((100vw - 36px) * .75)}
  .stage__foot .btn{width:100%}
  .feats{grid-template-columns:1fr;gap:24px}
  .sec{padding:60px 0}
  .head{margin-bottom:28px}
  .why__photo{aspect-ratio:1/1}
  .faqs__btns{display:none}              /* the sticky Call / Free Quote bar covers it */
  .faqs__side .lead{margin-top:12px}
  /* steps: number beside the text, so three steps don't fill a whole screen */
  .steps li{display:grid;grid-template-columns:2.7rem 1fr;gap:2px 12px;align-items:start;padding:20px 20px 22px}
  .steps span{grid-row:span 2;font-size:1.9rem;margin:2px 0 0}
  .steps p{margin-top:2px}
  .cta-row{padding:20px}
  .cta-row__btns,.band__btns{width:100%}
  .cta-row__btns .btn,.band__btns .btn{flex:1 1 100%}
  .band{padding:24px 20px}
  .gal{gap:10px}
  .gal__i figcaption{left:12px;right:12px;bottom:10px}
  .gal__i figcaption b{font-size:.9rem}
  .gal__i figcaption i{display:none}
  .acc summary{padding:18px;font-size:.98rem}
  .acc p{padding:0 18px 20px}
  .form__row{grid-template-columns:1fr;gap:0}
  /* quote section on phones: a short intro, then a light, airy form.
     The checklist, hours and call button are trimmed — the form's own note
     carries the phone number. */
  .quote{padding:56px 0 64px}
  .quote .lights--warm{margin-bottom:28px}
  .quote__grid{gap:22px}
  .quote__copy .h2{font-size:2.05rem}
  .quote__copy .lead{margin-top:10px;font-size:.98rem}
  .quote__list,.quote__hours,.quote__copy > .btn{display:none}
  .form{padding:22px 18px 18px;border-radius:20px}
  .form h3{font-size:1.32rem}
  .form__sub{margin:4px 0 16px;font-size:.88rem}
  .field{margin-bottom:12px}
  .field span{font-family:var(--f-body);font-size:.84rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text);margin-bottom:6px}
  .field span small{font-weight:400;color:var(--muted)}
  .field input,.field select,.field textarea{padding:13px 14px;background-color:var(--white);border-color:#cfdcdb}
  .field textarea{min-height:78px}
  .form .btn--block{min-height:54px;margin-top:4px}
  .form__note{margin-top:12px;font-size:.84rem}
  .foot__grid{grid-template-columns:1fr 1fr;gap:28px 18px}
  .foot__grid > div:first-child,.foot__col:last-child{grid-column:1 / -1}
  .lb__nav{width:44px;height:44px;margin-top:-22px}
  .lb__media{height:min(62vh,calc(100vh - 250px))}
  .lb__prev{left:8px}
  .lb__next{right:8px}
}
/* small phones (iPhone SE and similar) */
@media (max-width:520px){
  .phone__scenes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pscene--any em{display:none}   /* the dot and "On · Purple" above already say which colour */
}
@media (max-width:360px){
  .pscene{padding:9px 8px;gap:7px;font-size:.78rem}
  .pscene span{width:13px;height:13px}
  .qq__pick b{font-size:.78rem}
  .hero__cta .btn{font-size:.86rem;padding:14px 10px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .js .hero__mask{background:none}
  .hero__scroll::after{animation:none}
  .phone.is-demo .pscene.is-on::after{animation:none}
  .qq__lights::after,.qq__go::after{animation:none}
  .reviews__track{animation:none}
  .done__lights i{animation:none;background:var(--on)}
  .tick__c,.tick__p{animation:none;stroke-dashoffset:0}
  .reviews__rail{overflow-x:auto}
  .reviews__rail::before,.reviews__rail::after{display:none}
}

/* ---------- brand accents on light sections ----------
   The aqua accent is for dark teal backgrounds; on white and mist it would be
   too pale to read, so eyebrows and rules switch to the deeper teal there. */
.sec--white .eyebrow,.sec--mist .eyebrow{color:var(--accent-d)}
.sec--white .eyebrow--line::before,.sec--mist .eyebrow--line::before{background:linear-gradient(90deg,transparent,var(--accent-d))}
.sec--mist .why__photo .eyebrow,.offer--hl .eyebrow{color:var(--accent)}
.steps span{-webkit-text-stroke:1px rgba(14,127,123,.4)}
.foot .brand img{height:88px}
@media (max-width:640px){
  .brand img{height:54px}
  .nav.is-stuck .brand img{height:46px}
  .foot .brand img{height:76px}
}