/* Detail Solar glass mockup. Tokens and rules from the "Detail Solar Website 2026 Glass" design (Inter, #fafaf7 paper, #0f1726 ink,
   #f5a623 amber, dark blurred glass pills), plus the layer that lets the live site's sky and sun scenes sit behind the page. */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400.ttf) format('truetype')}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-500.ttf) format('truetype')}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600.ttf) format('truetype')}
:root{--font-sans:Inter,system-ui,sans-serif;--font-serif:Inter,system-ui,sans-serif;--amber:#f5a623;--amber-light:#fcd34d;--white:#fff;--ink:#0f1726;--paper:#fafaf7}
html,body{margin:0;background:#050b16;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#f6f1e6;text-decoration:none}a:hover{color:#fcd34d}
input,select,textarea{color-scheme:dark}input::placeholder,textarea::placeholder{color:rgba(196,204,218,.55)}select option{background:#0b1424;color:#f6f1e6}
@media (prefers-reduced-transparency:reduce),(forced-colors:active){
[data-glass]{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-image:none!important;background-color:#0f1726!important;border-color:#fff!important;color:#fff!important}
[data-glass="light"]{background-color:#fff!important;border-color:#0f1726!important;color:#0f1726!important}}
@media (prefers-reduced-motion:no-preference){
html.js [data-rise],html.js [data-step]{opacity:0;transform:translateY(16px)}
html.js [data-rise][data-in],html.js [data-step][data-in]{opacity:1;transform:none;transition:opacity 400ms ease-out var(--d,0ms),transform 400ms ease-out var(--d,0ms)}
html.js #tl-line{transform:scaleY(0)}}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #fcd34d;outline-offset:2px;box-shadow:0 0 0 2px #050b16}
.gm-hero a:focus-visible,nav a:focus-visible,footer a:focus-visible{outline-color:#fcd34d}
summary{list-style:none}summary::-webkit-details-marker{display:none}
html.gm-d nav[aria-label="Main"] a[href^="tel:"]{white-space:nowrap}
@media (max-width:1040px){html.gm-d nav[aria-label="Main"] a[href^="tel:"]{display:none}}

/* Layering: live scene (z 0) behind the Glass page (z 1) */
.gm-root{position:relative;z-index:1;display:block}
.gm-wrap{position:relative;overflow-x:hidden;color:rgba(226,230,238,.86);font-size:17px;line-height:1.6;background:transparent}
.gm-root>.gm-wrap{min-height:100vh}

/* Hero card: the Glass design's rounded hero card, now a clear window onto the live sun or sky scene */
.gm-hero{background:transparent!important;border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 30px 80px rgba(2,6,14,.4)}
.gm-hero::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 28%)}
.gm-panel{box-sizing:content-box!important;padding:34px 38px;margin:-34px -38px;background:rgba(12,18,30,.52);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);border:1px solid rgba(255,255,255,.16);border-radius:30px;box-shadow:0 18px 50px rgba(2,6,14,.35),inset 0 1px 0 rgba(255,255,255,.14)}
.gm-panel a[data-glass]{background-color:rgba(255,255,255,.1)!important}
.gm-frame{position:absolute;right:22px;top:86px;bottom:22px;width:60%;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.3);box-shadow:0 18px 50px rgba(2,6,14,.4)}
.gm-frame img{width:100%;height:100%;object-fit:cover;object-position:0% 50%;display:block}
html.gm-m .gm-frame{left:22px;right:22px;top:92px;bottom:22px;width:auto}
html.gm-m .gm-panel{left:12px!important;right:12px!important;bottom:12px!important;margin:0!important;padding:22px 20px;border-radius:24px;width:auto!important;max-width:none!important}
html.gm-m .gm-hero{height:auto}
html.gm-m .gm-quote{background:transparent!important}

/* Hero text entrance (live site fadeUp stagger: 0.6s, 0.85s, 1.1s, 1.35s) */
@media (prefers-reduced-motion:no-preference){
.gm-panel>*{opacity:0;transform:translateY(12px);animation:fadeUp 1s forwards}
.gm-panel>*:nth-child(1){animation-delay:.6s}
.gm-panel>*:nth-child(2){animation-delay:.85s}
.gm-panel>*:nth-child(3){animation-delay:1.1s}
.gm-panel>*:nth-child(4){animation-delay:1.35s}
.gm-panel>*:nth-child(5){animation-delay:1.5s}
.gm-quote h1,.gm-quote h1+p{opacity:0;transform:translateY(12px);animation:fadeUp 1s .6s forwards}}

/* Dark glass sheet that scrolls over the fixed scene */
.gm-main:not(.gm-hero){background:radial-gradient(circle 900px at 100% 0%,rgba(245,166,35,.09),transparent 70%),radial-gradient(circle 1000px at 0% 62%,rgba(70,130,210,.10),transparent 70%),linear-gradient(180deg,rgba(6,13,26,.975),rgba(5,11,22,.99));border:1px solid rgba(255,255,255,.1);border-bottom:0;border-radius:36px 36px 0 0;margin:12px 12px 0;box-shadow:0 -1px 0 rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.08)}
html.gm-m .gm-main:not(.gm-hero){margin:10px 10px 0;border-radius:30px 30px 0 0}
.gm-quote{margin-bottom:12px}

/* Home hero: lite sun sits above the glass panel on phones */
html.gm-m #hero .hero-sun{top:96px!important;bottom:auto!important;height:clamp(92px,24vw,128px)}
#hero{min-height:0}

/* Ask bar: live component, tinted to the Glass dark pill so it reads on the paper sheet and the footer */
:root{--ask-spring:cubic-bezier(.32,.72,0,1);--ask-spring-ms:.38s}
body .ask-shell[data-astro-cid-pmyxn7tj]{--ask-glass:linear-gradient(165deg,rgba(18,26,42,.78),rgba(10,16,28,.7));--ask-glass-edge:rgba(255,255,255,.2);--ask-glass-shadow:0 18px 44px rgba(2,6,14,.4),0 2px 10px rgba(2,6,14,.3),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.2)}
/* phone: keep the Next pill clear of the Ask pill */
html.gm-m #next-pill{bottom:92px!important}
html.gm-m #pill-label{bottom:156px!important}

/* Room for the fixed Ask pill under the footer (the live ask.css pads the body; here the footer owns that space so the dark footer runs to the page end) */
body.gm-home,body.gm-inner{padding-bottom:0!important}
.gm-wrap footer::after{content:"";display:block;height:calc(5.6rem + env(safe-area-inset-bottom,0px))}
body.gm-quote-page .gm-wrap footer::after{display:none}