/* =========================================================
   North Shore Garage Doors — style.css  (Framer-style system)
   Premium: glass nav, gradient heroes, bento, marquees, motion.
   ========================================================= */
:root{
  --bg:#070b14; --bg2:#0c1322; --panel:#101a2e;
  --ink:#0c1322; --ink2:#1b2740; --slate:#52617a; --muted:#8696ad;
  --cloud:#f4f7fb; --cloud2:#eaf0f8; --white:#fff; --line:#e4eaf3;
  --gold:#f0b552; --gold2:#e09a36; --gold-deep:#c9882f; --gold-soft:#fbeed3;
  --cyan:#5fd0c8; --violet:#8a7bf0; --green:#1f9d63;
  --star:#f5b301;
  --disp:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --r:22px; --r-sm:14px;
  --shadow-sm:0 2px 12px rgba(12,19,34,.06);
  --shadow:0 18px 48px rgba(12,19,34,.12);
  --shadow-lg:0 34px 80px rgba(12,19,34,.20);
  --maxw:1200px; --header-h:74px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%}
body{font-family:var(--body);color:var(--ink);background:var(--cloud);line-height:1.65;font-size:16px;overflow-x:hidden;overflow-wrap:break-word}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;line-height:1.08;letter-spacing:-.03em;color:var(--ink)}
section{position:relative}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.section{padding:88px 0}
.bg-cloud{background:var(--cloud)}
.bg-navy{background:var(--bg);color:#dce6f3}
.center{text-align:center}

/* eyebrow + headings */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:.2em;color:var(--gold2);margin-bottom:16px}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--gold2)}
.center .eyebrow{justify-content:center}
.center .eyebrow::after{content:"";width:24px;height:1px;background:var(--gold2)}
.section-title{font-size:clamp(2rem,5vw,3.1rem);margin-bottom:16px}
.section-intro{color:var(--slate);font-size:1.1rem;max-width:660px}
.center .section-intro{margin-left:auto;margin-right:auto}
.grad{background:linear-gradient(100deg,#e09a36,#f0b552 35%,#5fd0c8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;animation:nsg-shine 6s linear infinite}
@keyframes nsg-shine{to{background-position:200% center}}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--disp);font-weight:600;font-size:1rem;padding:14px 26px;border-radius:50px;cursor:pointer;border:1px solid transparent;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .25s;white-space:nowrap;overflow:hidden;will-change:transform}
.btn>*{position:relative;z-index:1}
.btn svg{width:18px;height:18px}
.btn::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.4) 50%,transparent 80%);transform:translateX(-130%) skewX(-15deg)}
.btn:hover::after{transform:translateX(130%) skewX(-15deg);transition:transform .75s var(--ease)}
.btn-primary,.btn-gold{background:linear-gradient(135deg,#f4c06a,#e09a36);color:#2a1a05;box-shadow:0 12px 30px rgba(224,154,54,.34)}
.btn-primary:hover,.btn-gold:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(224,154,54,.46)}
.btn-call{background:linear-gradient(135deg,#26a96b,#178253);color:#fff;box-shadow:0 12px 30px rgba(31,157,99,.3)}
.btn-call:hover{transform:translateY(-3px)}
.btn-text{background:linear-gradient(135deg,#2f7df0,#1c5fd0);color:#fff;box-shadow:0 12px 30px rgba(40,110,220,.3)}
.btn-text:hover{transform:translateY(-3px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink2);transform:translateY(-3px)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-3px)}
.btn-glass,.btn-outline-light{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.24);backdrop-filter:blur(10px)}
.btn-glass:hover,.btn-outline-light:hover{background:rgba(255,255,255,.16);transform:translateY(-3px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-block{width:100%}
.btn-lg{padding:16px 30px;font-size:1.05rem}

/* topbar */
.topbar{background:var(--bg);color:#b9c8df;font-size:.84rem;font-family:var(--disp);font-weight:500}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:9px;padding-bottom:9px}
.topbar a{color:#fff;font-weight:600}
.topbar .dot{color:var(--gold)}
@media(max-width:720px){.topbar .topbar-areas{display:none}.topbar .container{justify-content:center}}

/* ---------- header: dark glass ---------- */
.header{position:sticky;top:0;z-index:60;padding:10px 0;transition:padding .35s var(--ease)}
.header .container{display:flex;align-items:center;justify-content:space-between;gap:18px;height:auto;padding:11px 14px 11px 20px;border-radius:50px;background:rgba(11,18,32,.62);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(16px) saturate(160%);transition:.35s var(--ease)}
.header.scrolled{padding:6px 0}
.header.scrolled .container{background:rgba(7,11,20,.9);box-shadow:0 14px 40px rgba(0,0,0,.4)}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand .logo-mark{width:38px;height:38px;flex-shrink:0}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-text b{font-family:var(--disp);font-weight:700;color:#fff;font-size:1rem;letter-spacing:-.01em}
.brand-text span{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600}
.nav{display:flex;align-items:center;gap:2px}
.nav a{font-family:var(--disp);font-weight:500;font-size:.9rem;color:#c7d3e8;padding:9px 14px;border-radius:50px;transition:.2s}
.nav a:hover,.nav a.is-active{background:rgba(255,255,255,.1);color:#fff}
.header-cta{display:flex;align-items:center;gap:12px}
.header-phone{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.header-phone small{font-size:.62rem;color:#8696ad;text-transform:uppercase;letter-spacing:.1em}
.header-phone b{font-family:var(--disp);font-size:1.04rem;color:#fff}
.header .btn-primary{padding:11px 20px;font-size:.9rem}
.nav-toggle{display:none;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);width:44px;height:44px;border-radius:50%;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.nav-toggle span{width:20px;height:2px;background:#fff;border-radius:2px;transition:.25s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1040px){.nav,.header-phone{display:none}.nav-toggle{display:flex}}
@media(max-width:560px){.header .btn-primary{display:none}.header .container{gap:10px;padding-left:16px}}

/* mobile drawer */
.mobile-nav{position:fixed;inset:0 0 0 auto;width:min(86%,360px);background:var(--bg2);color:#fff;z-index:80;transform:translateX(100%);transition:transform .35s var(--ease);box-shadow:var(--shadow-lg);padding:24px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;border-left:1px solid rgba(255,255,255,.08)}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav .mn-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.mobile-nav .mn-head b{color:#fff!important}
.mobile-nav .mn-close{background:rgba(255,255,255,.1);border:none;width:42px;height:42px;border-radius:12px;font-size:1.4rem;cursor:pointer;color:#fff}
.mobile-nav a.mn-link{font-family:var(--disp);font-weight:500;color:#dbe6f5;padding:14px 12px;border-radius:12px;border-bottom:1px solid rgba(255,255,255,.07)}
.mobile-nav a.mn-link:hover,.mobile-nav a.mn-link.is-active{background:rgba(255,255,255,.08);color:#fff}
.mobile-nav .mn-cta{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.overlay{position:fixed;inset:0;background:rgba(4,7,14,.6);backdrop-filter:blur(2px);z-index:70;opacity:0;visibility:hidden;transition:.35s}
.overlay.open{opacity:1;visibility:visible}

/* ---------- HERO (home) ---------- */
.hero{position:relative;margin-top:calc(-1 * (var(--header-h) + 20px));min-height:100svh;display:flex;align-items:center;padding:150px 0 90px;overflow:hidden;background:var(--bg)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg picture{display:block;width:100%;height:100%}
.hero-bg img{width:100%;height:100%;object-fit:cover;animation:nsg-zoom 20s ease-in-out infinite alternate}
@media(max-width:760px){.hero-bg img{object-position:center}}
@keyframes nsg-zoom{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,11,20,.74),rgba(7,11,20,.6) 42%,rgba(7,11,20,.94))}
.blob{position:absolute;border-radius:50%;filter:blur(72px);opacity:.5;z-index:1;pointer-events:none}
.blob.b1{width:440px;height:440px;background:radial-gradient(circle,rgba(240,181,82,.6),transparent 70%);top:-120px;right:-80px;animation:nsg-drift 16s ease-in-out infinite}
.blob.b2{width:380px;height:380px;background:radial-gradient(circle,rgba(95,208,200,.4),transparent 70%);bottom:-120px;left:-100px;animation:nsg-drift 20s ease-in-out infinite reverse}
@keyframes nsg-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-30px)}}
.hero .container{position:relative;z-index:2}
.hero-content{max-width:760px}
.hero .pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:8px 16px;border-radius:50px;font-size:.82rem;font-weight:600;margin-bottom:24px;color:#fff;backdrop-filter:blur(8px)}
.hero .pill b{color:var(--gold)}
.hero h1{color:#fff;font-size:clamp(2.6rem,7vw,5rem);line-height:1.04;margin-bottom:20px}
.hero h1 .hl{background:linear-gradient(100deg,#f4c06a,#f0b552 30%,#5fd0c8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;animation:nsg-shine 6s linear infinite}
.hero p.lead{font-size:clamp(1.05rem,2.2vw,1.28rem);color:#cdd9ec;max-width:56ch;margin-bottom:30px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px}
.hero-trust{display:flex;flex-wrap:wrap;gap:12px}
.gcard{display:flex;align-items:center;gap:13px;padding:14px 18px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(14px)}
.gcard .ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(240,181,82,.26),rgba(95,208,200,.18));color:var(--gold);flex-shrink:0}
.gcard .ic svg{width:21px;height:21px}
.gcard b{display:block;font-family:var(--disp);color:#fff;font-size:1.02rem}
.gcard small{color:var(--muted);font-size:.8rem}
.scroll-cue{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:3;width:26px;height:42px;border:2px solid rgba(255,255,255,.4);border-radius:14px;display:flex;justify-content:center;padding-top:7px}
.scroll-cue span{width:4px;height:8px;border-radius:3px;background:var(--gold);animation:nsg-cue 1.8s var(--ease) infinite}
@keyframes nsg-cue{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}80%,100%{opacity:0;transform:translateY(10px)}}
@media(max-width:760px){.scroll-cue{display:none}.hero{margin-top:calc(-1 * (var(--header-h) + 4px))}}

/* marquee */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.hero .marquee{margin-top:54px}
.marquee .track{display:flex;gap:44px;width:max-content;animation:nsg-scroll 28s linear infinite}
.marquee .track span{font-family:var(--disp);font-weight:600;font-size:1rem;color:#90a2bd;display:flex;align-items:center;gap:44px;white-space:nowrap}
.marquee .track span::after{content:"✦";color:var(--gold)}
@keyframes nsg-scroll{to{transform:translateX(-50%)}}
.areas-marquee{background:var(--cloud2);padding:34px 0;border-block:1px solid var(--line)}
.areas-marquee .track{animation-duration:34s}
.areas-marquee .track span{color:#41526b}
.areas-marquee .track span::after{content:"•";color:var(--gold2)}

/* ---------- sub-page hero (cinematic, photo background) ---------- */
.page-hero{position:relative;background:var(--bg);color:#fff;padding:128px 0 60px;margin-top:calc(-1 * (var(--header-h) + 20px));overflow:hidden;min-height:400px;display:flex;align-items:center}
.page-hero .ph-bg{position:absolute;inset:0;z-index:0}
.page-hero .ph-bg picture,.page-hero .ph-bg img{display:block;width:100%;height:100%;object-fit:cover}
.page-hero .ph-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,11,20,.95) 0%,rgba(7,11,20,.85) 44%,rgba(7,11,20,.55) 100%)}
.page-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(45% 60% at 90% 10%,rgba(240,181,82,.18),transparent 60%),
  radial-gradient(45% 60% at 0% 100%,rgba(95,208,200,.12),transparent 60%)}
.page-hero .container{position:relative;z-index:2}
.page-hero .eyebrow{color:var(--gold)}
.page-hero .eyebrow::before,.page-hero .eyebrow::after{background:var(--gold)}
.page-hero h1{color:#fff;font-size:clamp(2.1rem,5.6vw,3.4rem);margin-bottom:14px;max-width:18ch;text-shadow:0 2px 24px rgba(0,0,0,.4)}
.page-hero p{color:#dbe6f5;max-width:60ch;font-size:1.1rem;text-shadow:0 1px 16px rgba(0,0,0,.45)}
.page-hero .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.82rem;margin-bottom:18px;color:#b9c8df;font-family:var(--disp);font-weight:500}
.breadcrumb a{color:#dbe6f5}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb .sep{color:#6b7e9b}
@media(max-width:760px){.page-hero{margin-top:calc(-1 * (var(--header-h) + 4px));padding-top:116px;min-height:58svh}}

/* ---------- bento (home services / gallery) ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;grid-auto-rows:210px}
.tile{position:relative;border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;color:#fff;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .6s var(--ease)}
.tile:hover img{transform:scale(1.08)}
.tile::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,11,20,0) 8%,rgba(7,11,20,.35) 48%,rgba(7,11,20,.9) 100%)}
.tile .t-in{position:relative;z-index:2}
.tile h3{font-size:1.4rem;margin-bottom:4px;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.tile p{font-size:.92rem;color:#eaf0f8;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.tile .arrow{position:absolute;top:22px;right:22px;z-index:2;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);transition:.3s var(--ease);color:#fff}
.tile:hover .arrow{background:var(--gold);color:#2a1a05;transform:rotate(-45deg)}
.tile .arrow svg{width:18px;height:18px}
.tile.solid{background:linear-gradient(150deg,#13203b,#0b1424);justify-content:center}
.tile.solid::after{display:none}
.tile.solid h3{font-size:1.5rem}.tile.solid p{margin-top:6px;color:#9fb0c8}
.t-wide{grid-column:span 2}.t-tall{grid-row:span 2}
@media(max-width:860px){.bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}.t-tall{grid-row:span 1}}
@media(max-width:520px){.bento{grid-template-columns:1fr;grid-auto-rows:170px}.t-wide{grid-column:span 1}}

/* ---------- service cards (sub-pages) ---------- */
.grid{display:grid;gap:24px}
.services-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.service-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease);position:relative}
.service-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:4;background:linear-gradient(90deg,var(--gold),var(--gold2));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.service-card:hover::before{transform:scaleX(1)}
.service-card .sc-img{position:relative;aspect-ratio:4/3;overflow:hidden}
.service-card .sc-img img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.service-card:hover .sc-img img{transform:scale(1.07)}
.service-card .sc-ico{position:absolute;left:18px;bottom:-22px;width:52px;height:52px;border-radius:15px;background:linear-gradient(135deg,#f4c06a,#e09a36);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);color:#2a1a05}
.service-card .sc-ico svg{width:26px;height:26px}
.service-card .sc-body{padding:34px 24px 26px;display:flex;flex-direction:column;flex:1}
.service-card h3{font-size:1.25rem;margin-bottom:10px}
.service-card p{color:var(--slate);font-size:.96rem;margin-bottom:18px;flex:1}
.service-card .sc-link{font-family:var(--disp);font-weight:600;color:var(--gold2);font-size:.92rem;display:inline-flex;align-items:center;gap:7px}
.service-card .sc-link svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.service-card:hover .sc-link svg{transform:translateX(5px)}

/* steps */
.steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px 24px;text-align:center;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.step:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.step .step-num{width:56px;height:56px;margin:0 auto 18px;border-radius:50%;background:linear-gradient(135deg,#13203b,#0b1424);color:#fff;font-family:var(--disp);font-weight:700;font-size:1.3rem;display:flex;align-items:center;justify-content:center;border:1px solid rgba(240,181,82,.3)}
.step h3{font-size:1.14rem;margin-bottom:8px}
.step p{color:var(--slate);font-size:.93rem}

/* door styles */
.doors-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.door-card{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:1/1;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.door-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.door-card img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.door-card:hover img{transform:scale(1.07)}
.door-card .door-label{position:absolute;left:0;right:0;bottom:0;padding:34px 22px 20px;color:#fff;background:linear-gradient(to top,rgba(7,11,20,.94) 12%,rgba(7,11,20,.45) 58%,transparent)}
.door-card .door-label b{font-family:var(--disp);font-size:1.2rem;display:block;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.door-card .door-label span{font-size:.85rem;color:#dbe6f5;text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* openers */
.opener-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.opener-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.opener-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.opener-card.featured{border:2px solid var(--gold);box-shadow:0 20px 55px rgba(224,154,54,.22)}
.opener-card .oc-img{background:linear-gradient(160deg,#f7f9fc,#e9eef6);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;position:relative;padding:14px}
.opener-card .oc-img img{height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.opener-badge{position:absolute;top:12px;left:12px;background:linear-gradient(135deg,#f4c06a,#e09a36);color:#2a1a05;font-family:var(--disp);font-weight:700;font-size:.7rem;padding:6px 12px;border-radius:50px;text-transform:uppercase;letter-spacing:.05em}
.opener-tag{position:absolute;top:12px;right:12px;background:var(--ink);color:#fff;font-size:.72rem;padding:5px 11px;border-radius:50px;font-weight:600;font-family:var(--disp)}
.opener-card .oc-body{padding:22px;display:flex;flex-direction:column;flex:1}
.opener-card .oc-model{font-size:.74rem;font-weight:700;color:var(--gold2);text-transform:uppercase;letter-spacing:.1em;margin-bottom:5px;font-family:var(--disp)}
.opener-card h3{font-size:1.18rem;margin-bottom:12px}
.opener-card ul{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;flex:1}
.opener-card ul li{display:flex;gap:9px;font-size:.9rem;color:var(--slate)}
.opener-card ul li svg{width:17px;height:17px;color:var(--green);flex-shrink:0;margin-top:3px}
.opener-more{display:none;margin-top:24px}
.opener-more.show{display:grid}
.opener-toggle-wrap{text-align:center;margin-top:32px}

/* springs */
.spring-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));align-items:stretch}
.spring-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;position:relative;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.spring-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.spring-card.popular{border:2px solid var(--gold);box-shadow:0 20px 55px rgba(224,154,54,.2)}
.spring-pop{position:absolute;top:0;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#f4c06a,#e09a36);color:#2a1a05;font-family:var(--disp);font-weight:700;font-size:.72rem;padding:6px 18px;border-radius:0 0 12px 12px;text-transform:uppercase;letter-spacing:.06em}
.spring-card .sp-img{background:linear-gradient(160deg,#f7f9fc,#e9eef6);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;padding:18px}
.spring-card .sp-img img{height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.spring-card .sp-body{padding:26px;display:flex;flex-direction:column;flex:1;text-align:center}
.spring-card h3{font-size:1.35rem;margin-bottom:6px}
.spring-card .sp-cycles{font-family:var(--disp);font-weight:700;color:var(--gold2);font-size:1.1rem;margin-bottom:4px}
.spring-card .sp-life{color:var(--muted);font-size:.86rem;margin-bottom:18px}
.spring-card ul{text-align:left;display:flex;flex-direction:column;gap:10px;margin-bottom:20px;flex:1}
.spring-card ul li{display:flex;gap:9px;font-size:.92rem;color:var(--slate)}
.spring-card ul li svg{width:17px;height:17px;color:var(--green);flex-shrink:0;margin-top:3px}
.warranty-note{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;color:var(--gold2);font-weight:600;margin-bottom:18px;justify-content:center;font-family:var(--disp)}
.warranty-note svg{width:16px;height:16px;flex-shrink:0}

/* strata */
.strata{background:linear-gradient(150deg,var(--bg),var(--bg2));color:#dce6f3}
.strata-grid{display:grid;gap:44px;align-items:center}
.strata h2,.strata .section-title{color:#fff;font-size:clamp(1.9rem,4.6vw,2.7rem);margin-bottom:14px}
.strata .eyebrow{color:var(--gold)}.strata .eyebrow::before{background:var(--gold)}
.strata p{color:#c4d2e6;margin-bottom:18px}
.strata-feats{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;margin:22px 0 28px}
.strata-feats li{display:flex;gap:11px;font-size:.95rem;color:#e3ebf6;min-width:0}
.strata-feats svg{width:22px;height:22px;color:var(--gold);flex-shrink:0;margin-top:2px}
.strata-img{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg)}
.strata-img img{width:100%;height:100%;object-fit:cover}
@media(max-width:760px){.strata-feats{grid-template-columns:1fr}}

/* about / feature */
.about-grid{display:grid;gap:48px;align-items:center}
.about-media{position:relative}
.about-media img{border-radius:var(--r);box-shadow:var(--shadow);width:100%}
.about-badge{position:absolute;right:-10px;bottom:-22px;background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:18px 22px;display:flex;align-items:center;gap:14px;border:1px solid var(--line)}
.about-badge .ab-num{font-family:var(--disp);font-weight:700;font-size:2rem;background:linear-gradient(135deg,var(--gold2),var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1}
.about-badge small{font-size:.82rem;color:var(--slate);font-weight:600}
.feature-list{display:grid;gap:18px;margin-top:24px}
.feature{display:flex;gap:16px}
.feature .f-ico{width:48px;height:48px;border-radius:14px;background:var(--gold-soft);display:flex;align-items:center;justify-content:center;color:var(--gold2);flex-shrink:0}
.feature .f-ico svg{width:24px;height:24px}
.feature h4{font-size:1.05rem;margin-bottom:3px;font-family:var(--disp)}
.feature p{color:var(--slate);font-size:.93rem}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr));gap:20px;margin-top:38px}
.stat{text-align:center;padding:24px 10px;background:#fff;border:1px solid var(--line);border-radius:var(--r);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.stat:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.stat b{display:block;font-family:var(--disp);font-weight:700;font-size:2rem;background:linear-gradient(135deg,var(--ink),var(--gold2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1}
.stat span{color:var(--slate);font-size:.86rem;margin-top:6px;display:block}

/* statband (dark) */
.statband{background:linear-gradient(150deg,var(--bg),var(--bg2));color:#fff}
.statband .container{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:60px 22px;text-align:center}
.statband .sb{min-width:0}
.statband .sb b{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(2.2rem,6vw,3.4rem);background:linear-gradient(135deg,#f4c06a,#5fd0c8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1}
.statband .sb span{display:block;margin-top:8px;color:#9fb0c8;font-size:.88rem;font-weight:500}
@media(max-width:620px){.statband .container{grid-template-columns:repeat(2,1fr);gap:38px 14px}}

/* service areas */
.areas-wrap{display:grid;gap:36px;align-items:center}
.areas-list{display:flex;flex-wrap:wrap;gap:10px}
.areas-list li{background:#fff;border:1px solid var(--line);border-radius:50px;padding:10px 18px;font-size:.9rem;font-weight:600;color:var(--ink2);display:flex;align-items:center;gap:7px;font-family:var(--disp);transition:.2s var(--ease)}
.areas-list li:hover{border-color:var(--gold);transform:translateY(-2px)}
.areas-list li svg{width:15px;height:15px;color:var(--gold2)}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.gallery figure{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.gallery figure:hover img{transform:scale(1.07)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 16px 14px;color:#fff;font-weight:600;font-size:.9rem;font-family:var(--disp);text-shadow:0 1px 10px rgba(0,0,0,.6);background:linear-gradient(to top,rgba(7,11,20,.92) 10%,rgba(7,11,20,.4) 60%,transparent)}

/* reviews */
.reviews-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.review:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.review .stars{color:var(--star);letter-spacing:2px;margin-bottom:14px}
.review p{color:var(--ink2);font-size:.98rem;margin-bottom:20px;flex:1}
.review .rv-author{display:flex;align-items:center;gap:12px}
.review .rv-avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#13203b,#0b1424);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;border:1px solid rgba(240,181,82,.3)}
.review .rv-author b{display:block;font-family:var(--disp);color:var(--ink);font-size:.96rem}
.review .rv-author small{color:var(--muted);font-size:.82rem}
.review .rv-where{margin-left:auto;color:#4285f4;font-weight:700;font-size:.8rem}

/* FAQ */
.faq{max-width:840px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:12px;overflow:hidden;transition:box-shadow .25s var(--ease),border-color .25s}
.faq-item:hover{border-color:#cdd9ea}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:22px 24px;font-family:var(--disp);font-weight:600;color:var(--ink);font-size:1.04rem;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-q:hover{color:var(--gold2)}
.faq-q .faq-icon{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--cloud);display:flex;align-items:center;justify-content:center;transition:.3s var(--ease);color:var(--gold2)}
.faq-item.open .faq-icon{background:linear-gradient(135deg,#f4c06a,#e09a36);color:#2a1a05;transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.faq-a p{padding:0 24px 22px;color:var(--slate);font-size:.97rem}

/* CTA band (dark mesh) */
.cta-band{position:relative;overflow:hidden;color:#fff;text-align:center;background:var(--bg)}
.cta-band .cta-bg{position:absolute;inset:0;z-index:0}
.cta-band .cta-bg img{width:100%;height:100%;object-fit:cover;opacity:.18}
.cta-band::before{content:"";position:absolute;inset:0;z-index:1;background:
  radial-gradient(40% 60% at 18% 20%,rgba(240,181,82,.24),transparent 60%),
  radial-gradient(40% 60% at 82% 28%,rgba(138,123,240,.22),transparent 60%),
  radial-gradient(50% 60% at 50% 92%,rgba(95,208,200,.2),transparent 60%)}
.cta-band .container{position:relative;z-index:2;padding:96px 22px}
.cta-band .eyebrow{color:var(--gold)}.cta-band .eyebrow::before,.cta-band .eyebrow::after{background:var(--gold)}
.cta-band h2{color:#fff;font-size:clamp(2.1rem,6vw,3.6rem);margin-bottom:16px}
.cta-band p{color:#cdd9ec;font-size:1.15rem;max-width:54ch;margin:0 auto 30px}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* contact */
.contact-grid{display:grid;gap:40px}
.contact-grid>*,.about-grid>*,.strata-grid>*,.areas-wrap>*,.hero-grid>*{min-width:0}
.contact-info h3{font-size:1.5rem;margin-bottom:8px}
.contact-list{display:grid;gap:18px;margin:24px 0}
.contact-list li{display:flex;gap:15px;align-items:flex-start;min-width:0}
.contact-list li>div{min-width:0}
.contact-list a{overflow-wrap:anywhere}
.contact-list .ci-ico{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#13203b,#0b1424);color:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(240,181,82,.25)}
.contact-list .ci-ico svg{width:22px;height:22px;flex-shrink:0}
.contact-list small{display:block;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;font-family:var(--disp)}
.contact-list b{font-family:var(--disp);color:var(--ink);font-size:1.06rem}
.hours-card{background:var(--cloud);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-top:6px}
.hours-card h4{margin-bottom:10px;font-size:1rem;font-family:var(--disp)}
.hours-card .hrow{display:flex;justify-content:space-between;font-size:.92rem;color:var(--slate);padding:6px 0;border-bottom:1px dashed var(--line)}
.hours-card .hrow:last-child{border:none}
.hours-card .hrow b{color:var(--ink);font-family:var(--body);font-weight:700}
.emergency-tag{display:inline-flex;align-items:center;gap:8px;margin-top:12px;color:var(--green);font-weight:700;font-size:.9rem;font-family:var(--disp)}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px;box-shadow:var(--shadow)}
.form-card h3{font-size:1.4rem;margin-bottom:6px}
.form-card>p{color:var(--slate);font-size:.94rem;margin-bottom:20px}
.form-row{display:grid;gap:16px;margin-bottom:16px}
.form-row.two{grid-template-columns:1fr 1fr}
.field{min-width:0}
.field label{display:block;font-size:.85rem;font-weight:600;color:var(--ink2);margin-bottom:6px;font-family:var(--disp)}
.field input,.field select,.field textarea{width:100%;min-width:0;max-width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;font-family:var(--body);font-size:.97rem;color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .2s var(--ease),transform .2s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold2);box-shadow:0 0 0 3px rgba(224,154,54,.14);transform:translateY(-1px)}
.field textarea{resize:vertical;min-height:110px}
.form-note{font-size:.82rem;color:var(--muted);margin-top:12px;text-align:center}
.form-success{display:none;background:#e9f8f0;border:1.5px solid #b6e6cd;color:#137a4d;border-radius:14px;padding:18px;text-align:center;font-weight:600}
.form-success.show{display:block}

/* footer */
.footer{background:#05080f;color:#9fb0c8;padding:70px 0 0}
.footer a{color:#c7d3e8}
.footer a:hover{color:var(--gold)}
.footer-grid{display:grid;gap:36px;grid-template-columns:1.4fr 1fr 1fr 1.2fr}
.footer .brand-text b{color:#fff}
.footer-col h4{color:#fff;font-size:1.02rem;margin-bottom:16px;font-family:var(--disp)}
.footer-col ul{display:flex;flex-direction:column;gap:10px}
.footer-col ul li{font-size:.93rem}
.footer-about p{font-size:.93rem;margin:16px 0;max-width:300px}
.footer-social{display:flex;gap:10px}
.footer-social a{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;transition:.2s var(--ease)}
.footer-social a:hover{background:var(--gold);color:var(--bg);transform:translateY(-3px)}
.footer-social svg{width:19px;height:19px}
.footer-contact li{display:flex;gap:11px;align-items:flex-start;margin-bottom:12px;font-size:.93rem}
.footer-contact svg{width:18px;height:18px;color:var(--gold);flex-shrink:0;margin-top:3px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.09);margin-top:50px;padding:24px 0;font-size:.85rem}
.footer-bottom .container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center}
.footer-bottom .fb-links{display:flex;gap:18px;flex-wrap:wrap}

/* promise / financing-warranty cards */
.promise{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:34px 26px;text-align:center;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.promise:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.promise .p-ico{width:60px;height:60px;margin:0 auto 18px;border-radius:18px;background:var(--gold-soft);display:flex;align-items:center;justify-content:center;color:var(--gold2)}
.promise .p-ico svg{width:30px;height:30px}
.promise h3{font-size:1.22rem;margin-bottom:10px}
.promise p{color:var(--slate);font-size:.95rem}

/* desktop sticky quote bar */
.quotebar{position:fixed;left:0;right:0;bottom:0;z-index:56;transform:translateY(115%);transition:transform .45s var(--ease);background:rgba(7,11,20,.93);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.1);color:#fff}
.quotebar.show{transform:translateY(0)}
.quotebar .container{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 22px}
.qb-text b{font-family:var(--disp);color:#fff;font-size:1.04rem}
.qb-text span{color:#9fb0c8;margin-left:6px}
.qb-cta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.qb-cta .btn{padding:11px 20px;font-size:.92rem}
.qb-close{background:rgba(255,255,255,.1);border:none;color:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1.2rem;flex-shrink:0}
.qb-close:hover{background:rgba(255,255,255,.2)}
@media(max-width:760px){.quotebar{display:none}}

/* sticky mobile bar + to-top */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;background:rgba(7,11,20,.92);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.08);padding:9px 10px;gap:8px;grid-template-columns:1fr 1fr 1fr}
.mobile-bar .btn{padding:13px 6px;font-size:.9rem;gap:5px}
.mobile-bar .btn svg{width:16px;height:16px}
@media(max-width:760px){.mobile-bar{display:grid}body{padding-bottom:70px}}
.to-top{position:fixed;right:18px;bottom:84px;z-index:54;width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;border:1px solid rgba(240,181,82,.3);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:.25s var(--ease)}
.to-top.show{opacity:1;visibility:visible}
.to-top svg{width:22px;height:22px}
@media(min-width:761px){.to-top{bottom:88px}}

/* ---------- before/after compare slider ---------- */
.ba-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:24px;flex-wrap:wrap}
.ba-tab{font-family:var(--disp);font-weight:600;font-size:.9rem;padding:9px 20px;border-radius:50px;border:1px solid var(--line);background:#fff;color:var(--ink2);cursor:pointer;transition:.2s var(--ease)}
.ba-tab:hover{border-color:var(--gold);transform:translateY(-2px)}
.ba-tab.is-on{background:linear-gradient(135deg,#f4c06a,#e09a36);color:#2a1a05;border-color:transparent;box-shadow:0 8px 20px rgba(224,154,54,.3)}
.ba-compare[hidden]{display:none}
.ba-compare{position:relative;max-width:920px;margin:0 auto;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r);box-shadow:var(--shadow-lg);user-select:none;touch-action:none;cursor:ew-resize;--pos:50%}
.ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-top{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-tag{position:absolute;top:14px;z-index:3;background:rgba(7,11,20,.7);color:#fff;font-family:var(--disp);font-weight:600;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:6px 13px;border-radius:50px;backdrop-filter:blur(6px);pointer-events:none}
.ba-tag-b{left:14px}.ba-tag-a{right:14px}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);transform:translateX(-50%);width:46px;z-index:4;display:flex;align-items:center;justify-content:center;cursor:ew-resize}
.ba-handle::before{content:"";position:absolute;top:0;bottom:0;width:3px;background:#fff;box-shadow:0 0 14px rgba(0,0,0,.3)}
.ba-handle .knob{position:relative;width:46px;height:46px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);color:var(--ink)}
.ba-handle .knob svg{width:24px;height:24px}
.ba-handle:focus-visible{outline:none}
.ba-handle:focus-visible .knob{outline:3px solid var(--gold);outline-offset:3px}

/* parallax helper + clipped frame */
.parallax{will-change:transform}
.pframe{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);box-shadow:var(--shadow)}
.pframe img{position:absolute;top:-8%;left:0;width:100%;height:116%;object-fit:cover}
@media(max-width:840px){.pframe{aspect-ratio:16/11}}

/* responsive grids */
@media(min-width:760px){
  .strata-grid{grid-template-columns:1.05fr .95fr}
  .about-grid{grid-template-columns:1fr 1.05fr}
  .areas-wrap{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr 1.1fr}
}
@media(max-width:760px){
  .section{padding:64px 0}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-about{grid-column:1/-1}
  .form-row.two{grid-template-columns:1fr}
  .about-badge{position:static;margin-top:16px;display:inline-flex}
}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}
/* Hero/CTA buttons must keep their width and wrap (never shrink + clip text) */
.hero-actions .btn,.cta-actions .btn{flex:0 0 auto}
@media(max-width:430px){.hero-actions .btn,.cta-actions .btn{flex:1 1 100%}}
/* On very narrow phones let button labels wrap so they never force overflow */
@media(max-width:430px){.btn{white-space:normal}}

/* focus + selection */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:8px}
::selection{background:var(--gold);color:#2a1a05}

/* ---------- pricing (hidden by default) ---------- */
.price-tag{display:none}
body.show-prices .price-tag{display:block}
.sp-price{margin:2px 0 8px;line-height:1}
.sp-price span{font-size:.78rem;color:var(--muted);font-family:var(--disp);font-weight:600;margin-right:6px;text-transform:uppercase;letter-spacing:.06em}
.sp-price b{font-family:var(--disp);font-weight:700;font-size:2rem;background:linear-gradient(135deg,var(--ink),var(--gold2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.price-hint{margin-top:24px;color:var(--slate);font-size:.92rem}
body.show-prices .price-hint{display:none}
.price-toggle{font-family:var(--disp);font-weight:600;font-size:.85rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#c7d3e8;padding:6px 16px;border-radius:50px;cursor:pointer;transition:.2s var(--ease)}
.price-toggle:hover{background:rgba(240,181,82,.16);border-color:var(--gold);color:#fff}
body.show-prices .price-toggle{background:var(--gold);color:#2a1a05;border-color:transparent}

/* free cable replacement — gentle green glow */
.free-cables{display:inline-flex;align-items:center;gap:8px;background:rgba(31,157,99,.12);color:#157a4d;border:1px solid rgba(31,157,99,.4);border-radius:50px;padding:9px 16px;font-weight:700;font-family:var(--disp);font-size:.84rem;margin:4px 0 6px;animation:nsg-greenglow 2.4s ease-in-out infinite}
.free-cables svg{width:16px;height:16px;color:#1f9d63;flex-shrink:0}
@keyframes nsg-greenglow{0%,100%{box-shadow:0 0 0 0 rgba(31,157,99,0)}50%{box-shadow:0 0 20px 2px rgba(31,157,99,.4)}}

/* spring discount badges */
.sp-extras{display:flex;flex-direction:column;gap:8px;margin:6px 0 4px;text-align:left}
.sp-extras li{display:flex;gap:9px;font-size:.86rem;color:var(--gold2);font-weight:600;font-family:var(--disp)}
.sp-extras li svg{width:17px;height:17px;flex-shrink:0;margin-top:1px;color:var(--gold2)}

/* floating CTAs — subtle glow */
.mobile-bar .btn-primary,.quotebar .btn-gold{animation:nsg-ctaglow 2.8s ease-in-out infinite}
@keyframes nsg-ctaglow{0%,100%{box-shadow:0 8px 22px rgba(224,154,54,.34)}50%{box-shadow:0 0 24px 3px rgba(240,181,82,.6),0 8px 22px rgba(224,154,54,.34)}}

/* door cards — caption BELOW image (no text over photo) */
.door-card{aspect-ratio:auto;background:#fff;border:1px solid var(--line);display:block}
.door-card .dc-img{aspect-ratio:1/1;overflow:hidden}
.door-card .dc-img img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.door-card:hover .dc-img img{transform:scale(1.07)}
.door-card .dc-cap{padding:16px 18px 18px}
.door-card .dc-cap b{font-family:var(--disp);font-size:1.12rem;color:var(--ink);display:block}
.door-card .dc-cap span{font-size:.85rem;color:var(--slate)}

@media(prefers-reduced-motion:reduce){.free-cables,.mobile-bar .btn-primary,.quotebar .btn-gold{animation:none}}

/* reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[style*="--d"]{transition-delay:var(--d)}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-bg img,.blob,.marquee .track,.scroll-cue span,.grad,.hero h1 .hl{animation:none!important}
  .btn::after{display:none}
  html{scroll-behavior:auto}
}