/* ============================================================
   Cozy Llama — redesign design system
   One stylesheet for every page. Brand tokens match the old
   styles.css values; layout/components are the 2026 refresh.
   ============================================================ */
:root{
  --navy:#0f172a; --navy2:#1e293b; --pink:#ec4899; --pink-d:#be3a7f; --pink-l:#fbcfe8;
  --cyan:#06b6d4; --cyan-l:#cffafe; --yellow:#fbbf24; --yellow-l:#fef3c7;
  --paper:#fafaf9; --card:#ffffff; --ink:#0f172a; --mut:#5b6472; --line:#0f172a14;
  --frau:'Fraunces',Georgia,serif; --out:'Outfit',system-ui,sans-serif; --fred:'Fredoka',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html.lock{overflow:hidden}
body{background:var(--paper);color:var(--ink);font-family:var(--out);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--pink);color:#fff}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:6px}

/* ---------- loader (homepage only) ---------- */
.loader{position:fixed;inset:0;z-index:200;background:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .5s,visibility .5s}
.loader.done{opacity:0;visibility:hidden}
.loader img{width:150px;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.loader-num{font:600 14px/1 var(--fred);letter-spacing:.35em;color:#fff9;text-transform:uppercase}
.loader-bar{width:min(240px,60vw);height:4px;border-radius:99px;background:#ffffff14;overflow:hidden}
.loader-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--pink),var(--cyan),var(--yellow))}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px clamp(16px,3.5vw,40px);background:#0f172aeb;backdrop-filter:blur(12px);box-shadow:0 1px 0 #ffffff12}
.nav .logo{display:flex;align-items:center;text-decoration:none}
.nav .logo img{height:46px;width:auto}
.nav-links{display:flex;align-items:center;gap:17px}
.nav-links>a{color:#ffffffb4;text-decoration:none;font:600 13px/1 var(--out);letter-spacing:.02em;transition:color .22s;padding:8px 0;border-bottom:2px solid transparent}
.nav-links>a:hover{color:var(--yellow)}
.nav-links>a.on{color:#fff;border-bottom-color:var(--pink)}
.drop{position:relative}
.drop>button{background:none;border:0;color:#ffffffb4;font:600 13px/1 var(--out);letter-spacing:.02em;cursor:pointer;padding:8px 0;display:flex;gap:5px;align-items:center;transition:color .22s}
.drop>button .dn{font-size:9px;opacity:.7}
.drop>button:hover{color:var(--yellow)}
.drop>button.hot{color:var(--pink);font-weight:800}
.drop>button.hot:hover{color:var(--yellow)}
.dmenu{position:absolute;top:100%;left:0;padding-top:12px;display:none;min-width:210px;z-index:110}
.drop:hover .dmenu,.drop:focus-within .dmenu{display:block}
.dmenu-in{background:#0b1120f6;border:1px solid #ffffff22;border-radius:16px;padding:9px;backdrop-filter:blur(12px);box-shadow:0 24px 60px -18px #000c}
.dmenu-in a{display:block;padding:10px 14px;border-radius:10px;color:#ffffffc9;font:600 13px/1.3 var(--out);text-decoration:none;white-space:nowrap}
.dmenu-in a:hover{background:#ffffff12;color:#fff}
.dmenu-wide{left:50%;transform:translateX(-50%)}
.dmenu-wide .dmenu-in{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;width:480px}
.dmenu-wide .dmenu-in a{white-space:normal}
@media (max-width:1120px){.nav-links>a:not(.pill),.drop{display:none}}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--yellow);color:var(--navy)!important;font:800 12.5px/1 var(--out);letter-spacing:.05em;padding:12px 20px;border-radius:99px;text-decoration:none;border:2px solid #0f172a30;transition:transform .22s;will-change:transform}
.pill:hover{transform:translateY(-1px)}
.burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:#ffffff14;border:1px solid #ffffff26;cursor:pointer;padding:0}
.burger svg{width:22px;height:22px;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
.burger .l2{transition:opacity .2s}
.burger.x .l2{opacity:0}
@media (max-width:1120px){.burger{display:inline-flex}}
.mnav{position:fixed;top:0;left:0;right:0;z-index:99;padding:86px 22px 26px;background:#0b1120f6;backdrop-filter:blur(14px);border-bottom:1px solid #ffffff1c;box-shadow:0 30px 60px -20px #000c;display:none;flex-direction:column;gap:4px;max-height:100svh;overflow-y:auto}
.mnav.open{display:flex}
.mnav a{color:#ffffffc9;text-decoration:none;font:700 17px/1 var(--out);padding:15px 10px;border-radius:12px;display:flex;justify-content:space-between;align-items:center}
.mnav a:hover{background:#ffffff10;color:#fff}
.mnav a.on{color:var(--yellow)}
.mnav a .arr{color:#ffffff4a;font-weight:600}
.mnav details{border-bottom:1px solid #ffffff10}
.mnav summary{list-style:none;cursor:pointer;color:#ffffffc9;font:700 17px/1 var(--out);padding:15px 10px;border-radius:12px;display:flex;justify-content:space-between;align-items:center}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:"\25BE";color:#ffffff4a;font-size:13px;transition:transform .25s}
.mnav details[open] summary::after{transform:rotate(180deg)}
.mnav details a{font:600 15px/1.3 var(--out);color:#ffffff9e;padding:11px 10px 11px 22px}
.mnav .towngrid{display:grid;grid-template-columns:1fr 1fr;padding-bottom:8px}
.mnav .towngrid a{padding:9px 10px 9px 22px;font-size:14px}
.mnav .mnav-call{margin-top:14px;background:var(--pink);color:#fff;font-weight:800;justify-content:center;gap:10px;padding:17px 10px;border-radius:99px}
.mnav .mnav-call:hover{background:var(--pink);color:#fff}

/* ---------- layout primitives ---------- */
.wrap{width:min(1160px,92vw);margin:0 auto}
.narrow{width:min(760px,92vw);margin:0 auto}
.sec{position:relative;padding:clamp(72px,9vw,120px) 0}
.eyebrow{font:600 11.5px/1 var(--fred);letter-spacing:.4em;text-transform:uppercase;margin-bottom:15px}
h1{font-family:var(--frau);font-weight:800;letter-spacing:-.015em;line-height:1.04;text-wrap:balance}
h2{font-family:var(--frau);font-weight:800;font-size:clamp(28px,3.8vw,46px);line-height:1.08;letter-spacing:-.012em;text-wrap:balance}
h3{font:800 20px/1.25 var(--out)}
.lede{margin-top:15px;font:500 17px/1.62 var(--out);color:var(--mut);max-width:40em}
.divider{width:70px;height:5px;border-radius:99px;margin-top:20px;background:linear-gradient(90deg,var(--pink),var(--cyan),var(--yellow))}
.center{text-align:center}.center .divider,.center .lede{margin-left:auto;margin-right:auto}
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.07s}.rv-d2{transition-delay:.14s}.rv-d3{transition-delay:.21s}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:800 15.5px/1 var(--out);padding:17px 30px;border-radius:99px;text-decoration:none;position:relative;overflow:hidden;transition:transform .22s;will-change:transform}
.btn:hover{transform:translateY(-2px)}
.btn-pink{background:var(--pink);color:#fff;border:2px solid #ffffff3d;box-shadow:0 10px 34px -10px #ec489980}
.btn-yellow{background:var(--yellow);color:var(--navy);border:2px solid #0f172a2b;box-shadow:0 10px 34px -10px #fbbf2470}
.btn-ghost{background:transparent;color:#fff;border:2px solid #ffffff42}
.btn-navy{background:var(--navy);color:#fff;border:2px solid #0f172a}
.shine::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,#ffffff55,transparent);transform:skewX(-20deg);animation:shine 3.6s ease-in-out infinite}
@keyframes shine{0%,60%{left:-80%}100%{left:160%}}
.chip{display:inline-flex;align-items:center;gap:7px;padding:11px 20px;border-radius:99px;font:600 14px/1 var(--out);text-decoration:none;transition:transform .2s,background .2s}
.chip:hover{transform:translateY(-2px)}
.chip-cyan{background:var(--cyan-l);color:#155e70}
.chip-yellow{background:var(--yellow-l);color:#7c5308}

/* ---------- inner-page hero ---------- */
.ihero{position:relative;overflow:hidden;padding:150px 0 76px;color:#fff;
  background:radial-gradient(760px 480px at 88% -12%,#ec489930,transparent 60%),
             radial-gradient(600px 440px at -6% 110%,#06b6d428,transparent 60%),
             linear-gradient(160deg,#0f172a 0%,#141d38 55%,#0f172a 100%)}
.ihero .eyebrow{color:var(--cyan)}
.ihero h1{font-size:clamp(34px,4.8vw,62px);color:#fff}
.ihero .lede{color:#ffffffb0}
.ihero .cta-row{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
.center .cta-row{justify-content:center}
.crumb{font:600 12.5px/1 var(--out);letter-spacing:.06em;color:#ffffff6e;margin-bottom:20px}
.crumb a{color:#ffffff9e;text-decoration:none}
.crumb a:hover{color:var(--yellow)}
.ihero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(26px,4vw,60px);align-items:center}
@media (max-width:860px){.ihero-grid{grid-template-columns:1fr}}
.ihero-art{position:relative}
.ihero-art img{border-radius:26px;border:1px solid #ffffff26;box-shadow:0 34px 80px -22px #000b;width:100%;height:auto}
.ihero-badge{position:absolute;left:-14px;bottom:-14px;background:var(--yellow);color:var(--navy);font:800 13px/1.3 var(--out);padding:13px 18px;border-radius:16px;box-shadow:0 18px 40px -14px #0009;transform:rotate(-3deg)}
.grad{background:linear-gradient(92deg,var(--yellow) 8%,var(--pink) 55%,var(--cyan) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- cards & grids ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:960px){.grid4{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px 28px;box-shadow:0 16px 44px -26px #0f172a3d;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 26px 60px -26px #0f172a52}
.card .ic{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:25px;margin-bottom:16px;color:#fff}
.card p{font:500 14.5px/1.6 var(--out);color:var(--mut);margin-top:8px}
.ic-cool{background:linear-gradient(135deg,var(--cyan),#2563eb)}
.ic-heat{background:linear-gradient(135deg,#fb923c,#e11d48)}
.ic-green{background:linear-gradient(135deg,#34d399,#0d9488)}
.ic-warm{background:linear-gradient(135deg,var(--yellow),#f97316)}
.ic-pink{background:linear-gradient(135deg,var(--pink),#be3a7f)}
.tag{display:inline-block;font:700 10.5px/1 var(--fred);letter-spacing:.24em;text-transform:uppercase;padding:7px 12px;border-radius:99px;margin-bottom:14px}
.tag-cyan{background:#06b6d426;color:#0a6a7d;border:1px solid #06b6d445}
.tag-yellow{background:var(--yellow-l);color:#7c5308}
.tag-pink{background:var(--pink-l);color:#9d2463}
.tag-green{background:#d1fae5;color:#065f46}

/* ---------- callouts ---------- */
.tip{border-radius:22px;padding:28px 30px;background:linear-gradient(135deg,var(--yellow-l),#fff);border:1.5px solid #fbbf2450}
.tip .tt{font:700 13px/1 var(--fred);letter-spacing:.22em;text-transform:uppercase;color:#92600a;margin-bottom:10px}
.tip p{font:500 15px/1.65 var(--out);color:#4d3c17}
.alert{border-radius:22px;padding:28px 30px;background:linear-gradient(135deg,#fdf1f6,#fff);border:1.5px solid #ec489945}
.alert .tt{font:700 13px/1 var(--fred);letter-spacing:.22em;text-transform:uppercase;color:var(--pink-d);margin-bottom:10px}
.alert p{font:500 15px/1.65 var(--out);color:#5b2242}
.diy{border-radius:22px;padding:26px 28px;background:linear-gradient(135deg,#ecfeff,#fff);border:1.5px solid #06b6d440;margin:22px 0}
.diy .tt{font:700 12.5px/1 var(--fred);letter-spacing:.22em;text-transform:uppercase;color:#0a6a7d;margin-bottom:9px}
.diy p{font:500 15px/1.62 var(--out);color:#164450}

/* ---------- bands ---------- */
.band{background:radial-gradient(700px 460px at 85% 0%,#ec489922,transparent 60%),var(--navy);color:#fff}
.band h2{color:#fff}.band .lede{color:#ffffff9a}
.band h3{color:#fff}
.glass{background:#ffffff0c;border:1px solid #ffffff1e;border-radius:24px;backdrop-filter:blur(8px)}
.cta-band{background:linear-gradient(135deg,var(--yellow) 0%,#f59e0b 48%,var(--pink) 100%);text-align:center}
.cta-band h2{color:var(--navy)}
.cta-band .lede{color:#0f172ab5;font-weight:600}
.cta-band .btn-white{margin-top:32px;display:inline-flex;align-items:center;gap:12px;background:#fff;color:var(--navy);font:800 clamp(18px,2.2vw,24px)/1 var(--out);padding:22px 42px;border-radius:99px;text-decoration:none;border:2px solid #0f172a1a;box-shadow:0 22px 60px -16px #0f172a5e;position:relative;overflow:hidden;transition:transform .22s}
.cta-band .btn-white:hover{transform:translateY(-2px)}
.cta-band .sub{margin-top:18px;font:600 14.5px/1 var(--out);color:#0f172aa8}
.cta-band .sub a{text-decoration:underline}
.photo-band{position:relative;min-height:clamp(400px,44vw,620px);background-size:cover;background-position:center 58%;display:flex;align-items:flex-end}
.photo-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0f172a00 0%,#0f172a1f 42%,#0f172ab8 82%,#0f172ae0 100%)}
.photo-band .wrap{position:relative;z-index:2;padding:0 0 40px;color:#fff}
.photo-band .cap{font:600 14px/1.5 var(--out);color:#ffffffd8;max-width:34em}

/* ---------- FAQ ---------- */
.faq{border:1px solid var(--line);border-radius:18px;background:#fff;margin-bottom:14px;overflow:hidden;box-shadow:0 10px 30px -22px #0f172a30}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:22px 26px;font:700 16.5px/1.35 var(--out)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:600 24px/1 var(--out);color:var(--pink);transition:transform .25s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 26px 24px;font:500 15px/1.65 var(--out);color:var(--mut);max-width:60em}

/* ---------- homepage hero + 3D stage ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;color:#fff;
  background:radial-gradient(900px 600px at 85% -10%,#ec489936,transparent 60%),
             radial-gradient(700px 520px at -8% 108%,#06b6d42e,transparent 60%),
             radial-gradient(560px 460px at 60% 55%,#fbbf2418,transparent 65%),
             linear-gradient(160deg,#0f172a 0%,#131c34 55%,#0f172a 100%)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;animation:orbpulse 7s ease-in-out infinite}
@keyframes orbpulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.12)}}
.hero-in{position:relative;z-index:2;width:min(1160px,92vw);margin:0 auto;padding:130px 0 70px;display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,5vw,68px);align-items:center}
@media (max-width:900px){.hero-in{grid-template-columns:1fr;text-align:center;padding-top:112px}}
.hero-logo{width:min(330px,66vw);height:auto;margin-bottom:26px;filter:drop-shadow(0 18px 40px #000a)}
@media (max-width:900px){.hero-logo{margin-left:auto;margin-right:auto}}
.hero .kicker{font:600 12px/1 var(--fred);letter-spacing:.42em;text-transform:uppercase;color:var(--cyan);margin-bottom:20px}
.hero h1{font-size:clamp(42px,6.2vw,82px);color:#fff}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.hero h1 .w i{display:inline-block;font-style:normal;transform:translateY(110%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.hero h1.in .w i{transform:translateY(0)}
.hero-sub{margin-top:20px;font:500 clamp(16px,1.6vw,19px)/1.55 var(--out);color:#ffffffc4;max-width:34em}
@media (max-width:900px){.hero-sub{margin-left:auto;margin-right:auto}}
.type-line{margin-top:13px;font:600 14px/1.4 var(--fred);letter-spacing:.14em;text-transform:uppercase;color:#ffffff7d;min-height:1.4em}
.type-line .caret{display:inline-block;width:2px;height:1em;background:var(--yellow);vertical-align:-2px;margin-left:3px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.hero-cta{margin-top:32px;display:flex;gap:15px;flex-wrap:wrap}
@media (max-width:900px){.hero-cta{justify-content:center}}
.stage{position:relative;height:min(470px,52vh);perspective:1300px;perspective-origin:50% 42%}
@media (max-width:900px){.stage{height:390px;width:100%;max-width:420px;margin:8px auto 0}}
.stage-in{position:absolute;top:0;bottom:0;left:50%;width:400px;margin-left:-200px;transform-style:preserve-3d;transition:transform .35s ease-out}
.tcard{position:absolute;border-radius:24px;transform-style:preserve-3d}
.thermo{left:50%;top:50%;width:min(290px,70%);aspect-ratio:.87;transform:translate(-50%,-50%) translateZ(30px);
  background:linear-gradient(165deg,#1e293b,#16203a);border:1px solid #ffffff1f;box-shadow:0 40px 90px -20px #000a,inset 0 1px 0 #ffffff24;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;padding:28px}
.dial{width:min(160px,56%);aspect-ratio:1;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--cyan) 0 30%,var(--yellow) 30% 62%,var(--pink) 62% 100%);animation:spin 26s linear infinite}
.dial::before{content:"";position:absolute;inset:9px;border-radius:50%;background:#111a30}
@keyframes spin{to{transform:rotate(360deg)}}
.dial b{position:relative;z-index:1;font:800 42px/1 var(--out);color:#fff;animation:spinback 26s linear infinite}
@keyframes spinback{to{transform:rotate(-360deg)}}
.dial b small{font:600 15px/1 var(--out);color:var(--yellow);vertical-align:top}
.thermo p{font:600 11.5px/1 var(--fred);letter-spacing:.34em;text-transform:uppercase;color:#ffffff85}
.thermo .stat{font:500 13px/1.5 var(--out);color:#ffffff6e;text-align:center}
.fchip{width:max-content;max-width:190px;padding:13px 17px;background:#ffffff14;border:1px solid #ffffff26;backdrop-filter:blur(8px);box-shadow:0 24px 50px -18px #000c;color:#fff;font:600 12.5px/1.35 var(--out);border-radius:17px;animation:float 6s ease-in-out infinite}
.fchip em{font-style:normal;display:block;font-weight:800;font-size:14.5px}
.fchip .stars{color:var(--yellow);letter-spacing:2px;font-size:11.5px}
.chip-rev{left:-4%;top:9%;transform:translateZ(90px)}
.chip-club{right:-13%;top:69%;transform:translateZ(120px);animation-delay:1.8s}
.chip-book{left:4%;bottom:2%;transform:translateZ(60px);animation-delay:3.1s}
@keyframes float{0%,100%{margin-top:0}50%{margin-top:-13px}}
@media (max-width:640px){
  .stage{height:auto;perspective:none;margin:18px auto 0}
  .stage-in{position:static;width:auto;margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;transform:none!important}
  .tcard{position:static}
  .thermo{transform:none;width:min(290px,88%);aspect-ratio:auto;padding:34px 28px}
  .fchip.chip-club,.fchip.chip-book{display:none}
  .fchip.chip-rev{transform:none;animation:none;max-width:290px}
}
.svc-sec{background:linear-gradient(180deg,var(--paper),#fdf7ef 70%,var(--paper))}
.svc{position:relative;display:block;text-decoration:none;color:#fff;border-radius:26px;padding:36px 32px;min-height:200px;overflow:hidden;border:1px solid #ffffff2b;box-shadow:0 22px 56px -24px #0f172a55;transition:transform .3s,box-shadow .3s;will-change:transform}
.svc:hover{box-shadow:0 32px 76px -24px #0f172a77}
.svc .glow{position:absolute;width:60%;aspect-ratio:1;border-radius:50%;filter:blur(60px);right:-12%;top:-24%;opacity:.75}
.svc-cool{background:linear-gradient(135deg,#06b6d4,#2563eb 55%,#4338ca)}
.svc-heat{background:linear-gradient(135deg,#fb923c,#ef4444 55%,#e11d48)}
.svc-club{background:linear-gradient(135deg,#34d399,#22c55e 55%,#0d9488)}
.svc-air{background:linear-gradient(135deg,#fbbf24,#eab308 55%,#f97316)}
.svc .ic{width:58px;height:58px;border-radius:17px;background:#ffffff24;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;font-size:27px;margin-bottom:16px}
.svc h3{font:800 23px/1.15 var(--out);margin-bottom:7px;color:#fff}
.svc p{font:500 14.5px/1.55 var(--out);color:#ffffffc0;max-width:30em}
.svc .go{position:absolute;right:24px;bottom:20px;font:700 13px/1 var(--out);color:#ffffffd9;opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s}
.svc:hover .go{opacity:1;transform:none}
.pin-wrap{position:relative;height:250vh;background:var(--navy)}
.pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;color:#fff;
  background:radial-gradient(800px 540px at 80% 0%,#ec489926,transparent 62%),radial-gradient(640px 500px at 6% 100%,#06b6d422,transparent 60%),var(--navy)}
.pin .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,66px);align-items:center}
@media (max-width:860px){.pin .wrap{grid-template-columns:1fr;gap:32px}}
.pin-copy .eyebrow{color:var(--yellow)}
.pin-copy h2{color:#fff}
.pin-copy .lede{color:#ffffff96}
.pin-bar{margin-top:32px;width:min(250px,100%);height:4px;border-radius:99px;background:#ffffff17;overflow:hidden}
.pin-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--cyan),var(--yellow))}
.promises{position:relative;min-height:290px}
@media (max-width:860px){.promises{min-height:225px}}
.promise{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:13px;padding:36px 38px;border-radius:26px;background:#ffffff0d;border:1px solid #ffffff1f;backdrop-filter:blur(10px);opacity:0;transform:translateY(42px) scale(.97);transition:opacity .5s,transform .5s cubic-bezier(.16,1,.3,1);pointer-events:none}
.promise.on{opacity:1;transform:none}
.promise .n{font:800 12.5px/1 var(--fred);letter-spacing:.3em;color:var(--cyan)}
.promise .em{font-size:38px;line-height:1}
.promise h3{font:800 25px/1.2 var(--out);color:#fff}
.promise p{font:500 15.5px/1.6 var(--out);color:#ffffffa6;max-width:30em}
.promise strong{color:#fff}
.rev-sec{background:linear-gradient(180deg,var(--paper),#f0fdf4)}
.rev-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:32px 28px;box-shadow:0 18px 46px -26px #0f172a3d;display:flex;flex-direction:column}
@media (min-width:861px){.rev-mid{margin-top:-20px}}
.stars{color:var(--yellow);font-size:18px;letter-spacing:3px;margin-bottom:15px}
.rev-card blockquote{font:italic 500 15.5px/1.65 var(--frau);color:#334155;flex:1}
.rev-card figcaption{margin-top:18px;font:700 13.5px/1 var(--out);color:var(--navy)}
.counters{display:flex;justify-content:center;gap:clamp(32px,7vw,86px);margin:0 0 48px;flex-wrap:wrap}
.counter{text-align:center}
.counter b{display:block;font:800 clamp(42px,5.6vw,66px)/1 var(--out);font-variant-numeric:tabular-nums;background:linear-gradient(92deg,var(--yellow),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.counter span{display:block;margin-top:7px;font:600 11.5px/1.4 var(--fred);letter-spacing:.28em;text-transform:uppercase;color:#ffffff80}
.marquee{overflow:hidden;padding:9px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:13px;width:max-content;animation:mq 36s linear infinite}
.marquee.rev .marquee-track{animation-direction:reverse;animation-duration:42s}
@keyframes mq{to{transform:translateX(-50%)}}
.town{white-space:nowrap;padding:11px 20px;border-radius:99px;border:1px solid #ffffff24;background:#ffffff0d;font:600 13.5px/1 var(--out);color:#ffffffc9;text-decoration:none;display:inline-block}
.town i{font-style:normal;color:var(--yellow);margin-right:7px}

/* ---------- article ---------- */
.art-head{padding:150px 0 56px;color:#fff;background:radial-gradient(700px 440px at 80% -10%,#06b6d430,transparent 62%),linear-gradient(160deg,#0f172a,#141d38)}
.art-head h1{font-size:clamp(30px,4vw,52px);color:#fff;max-width:19em}
.art-meta{display:flex;gap:20px;flex-wrap:wrap;margin-top:22px;font:600 13.5px/1 var(--out);color:#ffffff8c}
.art-body{padding:64px 0 90px}
.art-body p{font:400 17px/1.75 var(--out);color:#2b3444;margin:0 0 22px}
.art-body h2{font-size:clamp(24px,3vw,34px);margin:44px 0 16px}
.art-body h2 .num{color:var(--pink);margin-right:10px;font-family:var(--out);font-weight:800}
.art-body h3{margin:32px 0 12px}
.art-body ul,.art-body ol{margin:0 0 22px 24px;font:400 16.5px/1.7 var(--out);color:#2b3444}
.art-body li{margin-bottom:8px}
.art-body strong{color:var(--ink)}
.art-body a{color:var(--pink-d)}
.art-body img{border-radius:18px;margin:8px 0 22px}
.toc{border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 40px -26px #0f172a3d;padding:28px 30px;margin:0 0 36px}
.toc .tt{font:700 12.5px/1 var(--fred);letter-spacing:.24em;text-transform:uppercase;color:var(--pink-d);margin-bottom:14px}
.toc ol,.toc ul{margin:0;padding-left:22px}
.toc li{font:600 15px/1.9 var(--out);color:#2b3444}
.toc .pro{color:var(--pink-d);font-weight:700}

/* ---------- pricing ---------- */
.price{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:26px;padding:34px 30px;box-shadow:0 18px 50px -28px #0f172a44;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.price:hover{transform:translateY(-5px);box-shadow:0 30px 70px -28px #0f172a5c}
.price.hot{border-color:var(--pink);box-shadow:0 26px 64px -24px #ec489952}
.price .flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--pink);color:#fff;font:800 10.5px/1 var(--fred);letter-spacing:.2em;padding:8px 16px;border-radius:99px;white-space:nowrap}
.price .pname{font:700 13px/1 var(--fred);letter-spacing:.24em;text-transform:uppercase;color:var(--mut)}
.price .amt{margin:16px 0 4px;font:800 46px/1 var(--out);color:var(--navy)}
.price .amt small{font:600 16px/1 var(--out);color:var(--mut)}
.price .pdesc{font:500 14px/1.55 var(--out);color:var(--mut);margin-bottom:20px}
.price .math{margin-top:auto;border-top:1px dashed #0f172a22;padding-top:18px;font:500 14px/2 var(--out);color:var(--mut)}
.price .math b{color:var(--navy);float:right;font-variant-numeric:tabular-nums}
.price .save{margin-top:10px;background:var(--yellow-l);border-radius:12px;padding:10px 14px;font:700 14px/1.4 var(--out);color:#7c5308;text-align:center}
.season{border-radius:24px;padding:30px 28px;color:#fff;box-shadow:0 20px 50px -26px #0f172a66;transition:transform .25s}
.season:hover{transform:translateY(-4px)}
.season .s-lab{font:700 11.5px/1 var(--fred);letter-spacing:.3em;text-transform:uppercase;opacity:.85;margin-bottom:12px}
.season h3{color:#fff;margin-bottom:8px}
.season p{font:500 14px/1.6 var(--out);color:#ffffffd2}
.s-spring{background:linear-gradient(150deg,#34d399,#0d9488)}
.s-summer{background:linear-gradient(150deg,#fbbf24,#f97316)}
.s-fall{background:linear-gradient(150deg,#fb923c,#e11d48)}
.s-winter{background:linear-gradient(150deg,#06b6d4,#4338ca)}

/* ---------- tables & hours ---------- */
.hours{width:100%;border-collapse:collapse;font:500 15px/1.5 var(--out)}
.hours td{padding:13px 4px;border-bottom:1px solid var(--line);color:var(--mut)}
.hours td:last-child{text-align:right;font-weight:700;color:var(--ink)}
.hours tr:last-child td{border-bottom:none}
.table-scroll{overflow-x:auto}
.ctable{width:100%;border-collapse:collapse;font:500 14.5px/1.5 var(--out)}
.ctable th{font:700 12px/1.4 var(--fred);letter-spacing:.18em;text-transform:uppercase;color:var(--mut);text-align:left;padding:12px 14px;border-bottom:2px solid var(--line)}
.ctable td{padding:13px 14px;border-bottom:1px solid var(--line);color:#2b3444}
.ctable td b{color:var(--navy)}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field label{font:700 13.5px/1 var(--out);color:var(--ink)}
.field input,.field textarea,.field select{font:500 17px/1.4 var(--out);padding:14px 16px;border:1.5px solid #0f172a26;border-radius:14px;background:#fff;color:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--pink)}

/* ---------- footer ---------- */
footer{background:#0b1120;color:#fff;padding:66px 0 46px}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:34px;margin-bottom:44px}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}}
.fbrand img{height:52px;width:auto;margin-bottom:14px}
.fbrand .lic{font:500 11.5px/1.6 var(--out);letter-spacing:.1em;color:var(--yellow)}
.fbrand p{margin-top:12px;font:500 13px/1.65 var(--out);color:#ffffff70;max-width:26em}
footer h4{font:700 12px/1 var(--fred);letter-spacing:.28em;text-transform:uppercase;color:#ffffff8c;margin-bottom:16px}
footer ul{list-style:none}
footer li{margin-bottom:10px}
footer li a{color:#ffffff9c;text-decoration:none;font:500 14px/1.4 var(--out);transition:color .2s}
footer li a:hover{color:var(--yellow)}
.fbot{border-top:1px solid #ffffff14;padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font:500 12.5px/1.6 var(--out);color:#ffffff5e}
.fbot a{color:#ffffff8c}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.hero h1 .w i{opacity:1;transform:none}
  .promise{position:relative;opacity:1;transform:none;margin-bottom:16px}
  .promises{display:flex;flex-direction:column;min-height:0}
  .pin-wrap{height:auto}
  .pin{position:relative;height:auto;padding:90px 0}
  .marquee-track{animation:none}
  .loader{display:none}
}

/* Builder credit — homepage and /contact only, matching live-site policy */
.fcredit{background:#0b1120;text-align:center;padding:0 0 26px;font:500 12px/1.5 var(--out);color:#ffffff4e}
.fcredit a{color:#ffffff80;text-decoration:underline}
.fcredit a:hover{color:var(--yellow)}

/* ============================================================
   Motion v2 — continuous, input-coupled motion (award-site pass)
   All effects are transform/opacity only and fully disabled
   under prefers-reduced-motion via the existing global override.
   ============================================================ */

/* scroll progress bar (element injected by JS) */
.scrollbar{position:fixed;top:0;left:0;height:3px;width:100%;z-index:140;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--pink),var(--cyan),var(--yellow));pointer-events:none}

/* hero headline: staggered word cascade with settle */
.hero h1 .w i{transition-delay:calc(var(--wi,0)*80ms);transform:translateY(118%) rotate(4deg)}
.hero h1.in .w i{transform:none}

/* split-text section headings (JS wraps words; text-only h2s) */
h2.split{opacity:1;transform:none}
h2.split .sw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
h2.split .sw>span{display:inline-block;transform:translateY(125%) rotate(3deg);transition:transform .8s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*55ms)}
h2.split.in .sw>span{transform:none}

/* divider draws itself in (gated on html.js so no-JS pages keep it visible) */
html.js .divider{transform:scaleX(0);transform-origin:0 50%;transition:transform .9s .3s cubic-bezier(.16,1,.3,1)}
html.js .center .divider{transform-origin:50% 50%}
html.js .rv.in .divider,html.js .in .divider{transform:scaleX(1)}

/* cursor spotlight on cards (JS feeds --mx/--my) */
.card,.glass,.price,.rev-card{position:relative}
.card::after,.glass::after,.price::after,.rev-card::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .35s;pointer-events:none;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),#ec489916,transparent 65%)}
.glass::after{background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),#ffffff14,transparent 65%)}
.card:hover::after,.glass:hover::after,.price:hover::after,.rev-card:hover::after{opacity:1}

/* parallax photo bands: JS lifts the background into .pbg */
.photo-band{overflow:hidden}
.photo-band .pbg{position:absolute;left:0;right:0;top:-80px;bottom:-80px;background-size:cover;background-position:center 58%;will-change:transform}

/* marquee gets a shear under scroll velocity (JS-driven) */
.marquee-track{will-change:transform}

/* magnetic CTAs */
.btn,.pill,.cta-band .btn-white{will-change:transform}

/* ---------- services grid v2: light cards, one accent hue each ---------- */
.svc2{display:block;text-decoration:none;color:var(--ink);position:relative;overflow:hidden;padding:34px 30px 60px}
.svc2 .blob{position:absolute;width:230px;height:230px;border-radius:50%;filter:blur(64px);top:-80px;right:-70px;opacity:.16;background:var(--sc);pointer-events:none}
.svc2 .sk{font:700 11px/1 var(--fred);letter-spacing:.3em;text-transform:uppercase;color:var(--sc);margin-bottom:9px}
.svc2 h3{font:800 23px/1.2 var(--out);color:var(--navy);margin-bottom:4px}
.svc2 .go{position:absolute;right:28px;bottom:24px;font:700 13.5px/1 var(--out);color:var(--sc);opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s}
.svc2:hover .go{opacity:1;transform:none}
.svc2:hover{box-shadow:0 28px 64px -26px var(--scs)}
.sc-cool{--sc:#0e7490;--scs:#06b6d466}
.sc-heat{--sc:#c2410c;--scs:#ef444455}
.sc-club{--sc:#047857;--scs:#22c55e55}
.sc-air{--sc:#b45309;--scs:#f59e0b55}

/* ---------- branded browser scrollbar (ported from the old styles.css) ---------- */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--navy)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--pink),var(--cyan));border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#db2777,#0891b2)}
@supports not selector(::-webkit-scrollbar){
  html{scrollbar-color:var(--pink) var(--navy);scrollbar-width:thin}
}