:root{
  --navy:#06142f;
  --navy-2:#081b3d;
  --royal:#123f8b;
  --royal-2:#1d5fc4;
  --blue-soft:#87b6ff;
  --gold:#d5ad4f;
  --gold-2:#f0d184;
  --ink:#eef4ff;
  --muted:#b7c6df;
  --line:rgba(255,255,255,.11);
  --panel:rgba(10,30,66,.82);
  --panel-2:rgba(17,50,105,.58);
  --shadow:0 28px 80px rgba(0,0,0,.34);
  --container:min(1220px, calc(100% - 38px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 14% 7%,rgba(29,95,196,.25),transparent 24%),
    radial-gradient(circle at 88% 4%,rgba(213,173,79,.11),transparent 20%),
    linear-gradient(180deg,#05122b 0%,#071832 45%,#051329 100%);
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
.container{width:var(--container);margin:auto}
.section{position:relative;padding:96px 0;border-top:1px solid rgba(255,255,255,.06)}
.section-sm{padding:70px 0}
.section-kicker{
  color:var(--gold-2);font-size:.78rem;font-weight:900;letter-spacing:1.25px;text-transform:uppercase
}
.section-title{
  font-size:clamp(2.25rem,4.8vw,4.35rem);line-height:1.02;letter-spacing:-2.5px;margin:12px 0 16px
}
.section-copy{color:var(--muted);line-height:1.82;font-size:1.04rem;max-width:790px}
.headline-finish{
  background:linear-gradient(120deg,var(--gold) 0%,#ffe7a9 52%,var(--gold) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:goldText 6s linear infinite
}
@keyframes goldText{to{background-position:200% center}}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(18,63,139,.23),rgba(5,18,43,.84));
  box-shadow:var(--shadow);
}
.nav{
  position:sticky;top:0;z-index:1000;
  background:rgba(5,18,43,.78);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line)
}
.nav-inner{height:82px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:12px;font-weight:950}
.brand-mark{
  width:44px;height:44px;border-radius:13px;position:relative;
  background:linear-gradient(145deg,var(--royal-2),var(--royal));
  box-shadow:0 12px 30px rgba(29,95,196,.28);overflow:hidden
}
.brand-mark:before{
  content:"";position:absolute;left:10px;top:11px;width:24px;height:16px;
  border-left:4px solid #fff;border-top:4px solid #fff;transform:rotate(45deg)
}
.brand-mark:after{
  content:"";position:absolute;right:5px;bottom:7px;width:20px;height:10px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));transform:skew(-20deg);border-radius:3px
}
.nav-links{display:flex;gap:20px;align-items:center;color:#d7e4fb;font-size:.93rem}
.nav-links a{position:relative}
.nav-links a:after{content:"";position:absolute;left:0;bottom:-7px;width:0;height:2px;background:linear-gradient(90deg,var(--royal-2),var(--gold));transition:.25s}
.nav-links a:hover:after{width:100%}
.lang-toggle{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04)}
.lang-btn{border:0;background:transparent;color:#c7d5ed;padding:8px 10px;border-radius:999px;font-weight:900;font-size:.77rem;cursor:pointer}
.lang-btn.active{background:linear-gradient(135deg,var(--royal-2),var(--royal));color:white}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:14px;padding:15px 21px;border:1px solid transparent;
  font-weight:900;cursor:pointer;transition:.26s ease
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#0a1630;box-shadow:0 14px 34px rgba(213,173,79,.18)}
.btn-secondary{background:rgba(18,63,139,.28);border-color:rgba(135,182,255,.22);color:#eaf2ff}
.hero{padding:88px 0 58px;position:relative;overflow:hidden}
.hero:before{
  content:"";position:absolute;inset:-20% 0 auto;height:520px;
  background:
    radial-gradient(circle at 15% 40%,rgba(29,95,196,.28),transparent 35%),
    radial-gradient(circle at 80% 20%,rgba(213,173,79,.10),transparent 25%);
  pointer-events:none
}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(3.35rem,7vw,6.7rem);line-height:.9;letter-spacing:-4.7px;margin:22px 0 20px;max-width:930px}
.hero-copy{color:var(--muted);font-size:1.12rem;line-height:1.85;max-width:760px}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;
  border:1px solid rgba(135,182,255,.22);background:rgba(18,63,139,.24);color:#d9e8ff;
  font-size:.8rem;font-weight:900;text-transform:uppercase;letter-spacing:1px
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 16px rgba(213,173,79,.55)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero-media,.photo-panel,.section-visual,.image-tile,.booking-photo,.support-photo{
  position:relative;overflow:hidden;border-radius:28px;border:1px solid var(--line);box-shadow:var(--shadow)
}
.hero-media{min-height:610px}
.hero-media img,.photo-panel img,.section-visual img,.image-tile img,.booking-photo img,.support-photo img{
  width:100%;height:100%;object-fit:cover
}
.overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(3,12,29,.58))}
.media-badge,.image-caption{
  position:absolute;left:18px;right:18px;bottom:18px;padding:15px 16px;border-radius:16px;
  background:rgba(5,18,43,.76);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px)
}
.media-badge{display:flex;justify-content:space-between;gap:18px;align-items:center}
.pill{
  display:inline-flex;align-items:center;padding:8px 11px;border-radius:999px;
  background:rgba(213,173,79,.13);border:1px solid rgba(213,173,79,.23);color:#ffe0a0;font-size:.82rem;font-weight:900
}
.trust-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px
}
.trust-box{padding:15px;border-radius:16px;border:1px solid var(--line);background:rgba(8,27,61,.66)}
.trust-box b{display:block;color:#fff;margin-bottom:4px}.trust-box span{font-size:.84rem;color:var(--muted)}
.photo-panel,.section-visual{min-height:430px}
.image-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.image-tile{min-height:235px}
.service-card{padding:26px;min-height:310px;position:relative;overflow:hidden}
.service-card h3{font-size:1.3rem;margin:20px 0 9px}
.service-card p{color:var(--muted);line-height:1.7}
.icon{
  width:52px;height:52px;display:grid;place-items:center;border-radius:14px;
  background:rgba(29,95,196,.20);border:1px solid rgba(135,182,255,.18);font-size:1.35rem
}
.feature-box{padding:32px}
.feature-list{display:grid;gap:13px;margin-top:22px}
.feature-item{display:flex;gap:12px;align-items:flex-start}
.check{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(213,173,79,.17);color:var(--gold-2);font-weight:900}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.process-card{padding:23px}
.process-num{font-size:.76rem;font-weight:900;color:var(--gold-2);letter-spacing:1px}
.process-card h4{font-size:1.18rem;margin:11px 0 8px}.process-card p{color:var(--muted);line-height:1.65;margin:0}
.about-mega{
  display:grid;grid-template-columns:.93fr 1.07fr;gap:32px;align-items:stretch;
  padding:34px;border-radius:30px;border:1px solid var(--line);
  background:
    radial-gradient(circle at 10% 10%,rgba(29,95,196,.16),transparent 35%),
    linear-gradient(145deg,rgba(9,30,67,.95),rgba(5,18,43,.95));
  box-shadow:var(--shadow)
}
.about-mega .photo-panel{min-height:560px}
.about-values{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:25px}
.about-value{padding:17px;border-radius:16px;border:1px solid var(--line);background:rgba(18,63,139,.18)}
.about-value b{display:block;margin-bottom:4px}.about-value span{color:var(--muted);font-size:.88rem;line-height:1.55}
.booking-support-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:26px;align-items:start}
.booking-card,.support-card{padding:25px}
.booking-photo,.support-photo{min-height:235px;margin-bottom:21px}
.scheduler-shell{margin-top:20px;min-height:720px;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#fff}
.scheduler-shell iframe{display:block;width:100%;height:720px;border:0;background:white}
.scheduler-placeholder{min-height:720px;display:grid;place-items:center;text-align:center;padding:30px;background:#0b2250;color:#fff}
.scheduler-chip{display:inline-flex;padding:8px 11px;border-radius:999px;background:rgba(29,95,196,.20);border:1px solid rgba(135,182,255,.18);color:#d8e9ff;font-size:.77rem;font-weight:900;text-transform:uppercase;letter-spacing:.6px}
.support-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.support-form label{display:grid;gap:7px;font-size:.84rem;font-weight:850;color:#d7e4fb}
.support-form .full{grid-column:1/-1}
.support-form input,.support-form select,.support-form textarea{
  width:100%;border:1px solid rgba(255,255,255,.12);background:#0a214d;color:#fff;
  padding:14px 15px;border-radius:12px;outline:none
}
.support-form input:focus,.support-form select:focus,.support-form textarea:focus{border-color:rgba(135,182,255,.55);box-shadow:0 0 0 4px rgba(29,95,196,.18)}
.support-form textarea{min-height:145px;resize:vertical}
.faq-grid{display:grid;gap:13px;margin-top:26px}
.faq-item{padding:20px 21px}.faq-item h4{margin:0 0 8px}.faq-item p{margin:0;color:var(--muted);line-height:1.7}
.legal-center-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:28px}
.legal-card{padding:22px}
.legal-card h4{margin:12px 0 7px}.legal-card p{color:var(--muted);line-height:1.6;font-size:.93rem}
.legal-card a{color:#dce9ff;font-weight:900}
.page-hero{
  padding:78px 0 48px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(18,63,139,.22),rgba(5,18,43,.75));
}
.page-hero h1{font-size:clamp(2.8rem,6vw,5rem);line-height:.95;letter-spacing:-3px;margin:12px 0 12px}
.page-hero p{max-width:820px;color:var(--muted);line-height:1.8}
.content-page{padding:70px 0}
.legal-content{display:grid;gap:20px}
.legal-banner{min-height:320px}
.legal-block{
  padding:28px;border-radius:22px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(18,63,139,.18),rgba(5,18,43,.82))
}
.legal-block h2{margin:0 0 10px;font-size:1.48rem}.legal-block h3{margin:18px 0 8px}
.legal-block p,.legal-block li{color:var(--muted);line-height:1.78}
.legal-block ul{padding-left:20px}
.legal-nav{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}
.legal-nav a{padding:10px 13px;border-radius:999px;border:1px solid var(--line);background:rgba(18,63,139,.18);font-weight:850;font-size:.84rem}
.footer{padding:44px 0 58px;border-top:1px solid var(--line);background:#041026}
.footer-grid{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:start}
.footer-links{display:flex;flex-wrap:wrap;gap:12px 18px;margin-top:16px;color:#c9d8ef;font-size:.9rem}
.footer small{color:#91a7c8;line-height:1.6}
.motion-line,.glow-line{position:fixed;left:0;right:0;height:2px;z-index:1500;pointer-events:none;background:linear-gradient(90deg,transparent,var(--royal-2),var(--gold),transparent);opacity:.75}
.motion-line{top:0;animation:lineMove 7s linear infinite}.glow-line{bottom:0;animation:lineMove2 9s linear infinite}
@keyframes lineMove{from{transform:translateX(-40%)}to{transform:translateX(40%)}}
@keyframes lineMove2{from{transform:translateX(40%)}to{transform:translateX(-40%)}}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
.animated-border{position:relative;overflow:hidden}
.animated-border:before{
  content:"";position:absolute;inset:-1px;pointer-events:none;
  background:linear-gradient(120deg,transparent,rgba(135,182,255,.13),rgba(213,173,79,.14),transparent);
  transform:translateX(-125%);animation:shine 7s ease-in-out infinite
}
@keyframes shine{0%,16%{transform:translateX(-125%)}55%,65%{transform:translateX(125%)}100%{transform:translateX(125%)}}
@media(max-width:980px){
  .nav-links{display:none}
  .hero-grid,.grid-2,.about-mega,.booking-support-grid{grid-template-columns:1fr}
  .grid-3,.legal-center-grid{grid-template-columns:1fr}
  .grid-4,.process-grid,.trust-row,.about-values{grid-template-columns:1fr 1fr}
  .image-row{grid-template-columns:1fr}
  .hero-media{min-height:470px}.about-mega .photo-panel{min-height:430px}
}
@media(max-width:620px){
  :root{--container:min(100% - 22px,1220px)}
  .nav-inner{height:72px}.nav .btn-primary{display:none}
  .hero{padding-top:56px}.hero h1{letter-spacing:-3px}
  .grid-4,.process-grid,.trust-row,.about-values,.support-form,.footer-grid{grid-template-columns:1fr}
  .support-form .full{grid-column:auto}
  .section{padding:74px 0}
}

/* V14: full-width roofing backgrounds per section */
:root{
  --gold:#d8b15b;
  --gold-2:#f0cd7d;
}
.headline-finish{
  background:linear-gradient(135deg,#fff3c4 0%, var(--gold-2) 30%, var(--gold) 65%, #ffeec0 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero--bg,.bg-section{
  position:relative;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
}
.hero--bg::before,.bg-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg,rgba(2,9,24,.90) 0%, rgba(3,13,31,.72) 35%, rgba(4,17,42,.78) 70%, rgba(4,17,42,.90) 100%),
    radial-gradient(circle at 85% 15%, rgba(216,177,91,.18), transparent 28%),
    radial-gradient(circle at 15% 60%, rgba(49,104,199,.20), transparent 30%);
  pointer-events:none;
}
.bg-home{background-image:url('images/backgrounds/home-hero.png')}
.bg-services{background-image:url('images/backgrounds/services-replacement.png')}
.bg-underlayment{background-image:url('images/backgrounds/underlayment.png')}
.bg-repairs{background-image:url('images/backgrounds/repairs.png')}
.bg-installation{background-image:url('images/backgrounds/installation.png')}
.bg-solar{background-image:url('images/backgrounds/solar.png')}
.bg-inspection{background-image:url('images/backgrounds/inspection.png')}
.bg-about{background-image:url('images/backgrounds/about.png')}
.bg-book{background-image:url('images/backgrounds/booking.png')}
.bg-faq{background-image:url('images/backgrounds/faq.png')}
.bg-legal{background-image:url('images/backgrounds/legal.png')}
.hero--bg > .container,.bg-section > .container{position:relative;z-index:1}
.hero-grid-single{grid-template-columns:1fr}
.hero--bg{padding:112px 0 72px;min-height:100svh;display:grid;align-items:center}
.hero--bg .hero-panel{
  max-width:900px;
  padding:34px;
  border-radius:34px;
  background:linear-gradient(180deg,rgba(4,16,40,.72),rgba(4,16,40,.52));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 25px 60px rgba(0,0,0,.35);
  backdrop-filter:blur(10px);
}
.trust-row-hero .trust-box{background:rgba(255,255,255,.07)}
.bg-section{padding:108px 0}
.surface-panel{
  padding:32px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.11);
  background:linear-gradient(180deg,rgba(3,14,35,.70),rgba(3,14,35,.56));
  box-shadow:0 24px 54px rgba(0,0,0,.28);
  backdrop-filter:blur(11px);
}
.surface-panel .section-copy:last-child{margin-bottom:0}
.section-narrow{max-width:760px}
.feature-split{align-items:start}
.section-card-grid{margin-top:24px}
.booking-shell-head{margin-bottom:0}
.booking-bg-grid .card,.surface-panel .card,.surface-panel .about-value,.surface-panel .trust-box{
  background:rgba(5,20,48,.68);
  border-color:rgba(255,255,255,.10);
  backdrop-filter:blur(7px);
}
.booking-card,.support-card{
  background:linear-gradient(180deg,rgba(4,17,42,.82),rgba(4,17,42,.68));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
}
.support-form input,.support-form select,.support-form textarea{background:rgba(5,20,48,.92)}
.scheduler-shell{background:rgba(255,255,255,.96);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.faq-shell .faq-grid,.legal-shell .legal-center-grid{margin-top:24px}
.legal-card a{color:#ffdf95}
.hero--bg .hero-copy,.surface-panel .section-copy,.surface-panel p{max-width:980px}
@media(max-width:980px){
  .hero--bg{min-height:auto;padding:96px 0 64px}
  .surface-panel,.hero--bg .hero-panel{padding:24px}
}
@media(max-width:620px){
  .hero--bg{padding:86px 0 54px}
  .bg-section{padding:78px 0}
}


/* V15 credibility-heavy About + Netlify form polish */
.about-long{display:grid;gap:26px}
.about-lead{font-size:1.12rem;line-height:1.9;color:#d7e2f4;max-width:980px}
.credibility-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.credibility-stat{padding:22px;border:1px solid rgba(255,255,255,.12);border-radius:20px;background:rgba(4,17,42,.66);backdrop-filter:blur(8px)}
.credibility-stat strong{display:block;font-size:1.45rem;color:var(--gold-2);margin-bottom:6px}.credibility-stat span{color:var(--muted);line-height:1.5;font-size:.91rem}
.about-story-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:24px;align-items:start}
.about-story-card{padding:26px;border-radius:22px;border:1px solid rgba(255,255,255,.10);background:rgba(4,17,42,.66)}
.about-story-card h3{font-size:1.35rem;margin:0 0 10px}.about-story-card p{color:var(--muted);line-height:1.82;margin:0 0 14px}
.about-story-card p:last-child{margin-bottom:0}
.about-proof-list{display:grid;gap:12px}
.about-proof{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.about-proof:last-child{border-bottom:0}.about-proof-num{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(216,177,91,.14);border:1px solid rgba(216,177,91,.24);color:var(--gold-2);font-weight:900}
.experience-placeholder{margin-top:20px;padding:16px 18px;border-radius:16px;border:1px dashed rgba(240,205,125,.45);background:rgba(216,177,91,.09);color:#f7e5b7;line-height:1.6}
.netlify-note{margin-top:14px;padding:13px 15px;border-radius:14px;background:rgba(29,95,196,.15);border:1px solid rgba(135,182,255,.18);color:#cfe0f9;font-size:.88rem;line-height:1.55}
.honeypot{position:absolute!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;height:1px!important;width:1px!important;margin:-1px!important;padding:0!important;border:0!important}
.form-success{padding:80px 0;min-height:70vh;display:grid;align-items:center}.success-card{max-width:760px;margin:auto;padding:38px;border-radius:28px;background:rgba(4,17,42,.82);border:1px solid rgba(255,255,255,.11);box-shadow:var(--shadow);text-align:center}.success-card h1{font-size:clamp(2.4rem,6vw,4.8rem);line-height:.98;letter-spacing:-3px;margin:0 0 14px}.success-card p{color:var(--muted);line-height:1.8}
@media(max-width:980px){.credibility-stats{grid-template-columns:1fr 1fr}.about-story-grid{grid-template-columns:1fr}}
@media(max-width:620px){.credibility-stats{grid-template-columns:1fr}}


/* V16 verified experience stat */
.experience-stat{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:22px;
  align-items:center;
  margin-top:24px;
  padding:24px 26px;
  border-radius:22px;
  border:1px solid rgba(240,205,125,.28);
  background:
    radial-gradient(circle at 0% 50%,rgba(240,205,125,.12),transparent 35%),
    rgba(4,17,42,.72);
  box-shadow:0 18px 40px rgba(0,0,0,.22);
}
.experience-stat-number{
  font-size:clamp(3.6rem,8vw,6.4rem);
  line-height:.82;
  letter-spacing:-4px;
  font-weight:950;
  background:linear-gradient(135deg,#f7dc95 0%,#cfa84e 48%,#f1cd78 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.experience-stat b{
  display:block;
  font-size:clamp(1.25rem,2.4vw,2rem);
  margin-bottom:6px;
}
.experience-stat p{
  margin:0;
  color:var(--muted);
  line-height:1.65;
}
@media(max-width:620px){
  .experience-stat{grid-template-columns:1fr;gap:12px}
}


/* V17 Luxury palette + content refresh
   Royal blue + amethyst + deep sapphire. No gold / bronze / white accent system. */
:root{
  --navy:#040b22;
  --navy-2:#071431;
  --royal:#244fbd;
  --royal-2:#426ee8;
  --amethyst:#7b5cff;
  --violet:#9c77ff;
  --aqua:#70c7ff;
  --ink:#d8e5ff;
  --muted:#9fb2d8;
  --line:rgba(126,159,255,.17);
  --panel:rgba(6,19,49,.82);
  --panel-2:rgba(24,49,108,.58);
}

body{
  color:var(--ink);
  background:
    radial-gradient(circle at 16% 8%,rgba(52,91,211,.24),transparent 27%),
    radial-gradient(circle at 86% 4%,rgba(123,92,255,.20),transparent 22%),
    linear-gradient(180deg,#03091c 0%,#071229 48%,#030a1d 100%);
}

.brand-mark{
  background:linear-gradient(145deg,var(--royal-2),var(--amethyst));
  box-shadow:0 12px 32px rgba(79,101,255,.26);
}
.brand-mark:before{border-color:#8eb6ff}
.brand-mark:after{
  background:linear-gradient(90deg,var(--amethyst),var(--aqua));
}
.nav{background:rgba(3,10,29,.82)}
.nav-links,.footer-links{color:#b8cafa}
.lang-btn{color:#9fb2d8}
.lang-btn.active{
  background:linear-gradient(135deg,var(--royal-2),var(--amethyst));
  color:#dce8ff;
}

.btn-primary{
  background:linear-gradient(135deg,#365fd0 0%,#6d55e8 52%,#8666f2 100%);
  color:#dce7ff;
  box-shadow:0 16px 38px rgba(78,80,218,.28);
}
.btn-secondary{
  background:rgba(46,81,180,.27);
  border-color:rgba(123,144,255,.30);
  color:#c9d9ff;
}

.headline-finish{
  background:linear-gradient(120deg,#66a8ff 0%,#7d6cff 38%,#a46fff 70%,#69b8ff 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:violetFlow 6s linear infinite;
}
@keyframes violetFlow{to{background-position:200% center}}

.section-kicker,.process-num,.info-label{
  color:#8aa7ff;
}
.dot{
  background:var(--amethyst);
  box-shadow:0 0 18px rgba(123,92,255,.66);
}
.check{
  background:rgba(123,92,255,.17);
  color:#9c8cff;
}
.icon{
  background:rgba(73,103,220,.18);
  border-color:rgba(122,146,255,.20);
  color:#a8bcff;
}
.legal-card a{color:#8eb8ff}
.motion-line,.glow-line{
  background:linear-gradient(90deg,transparent,var(--royal-2),var(--amethyst),var(--aqua),transparent);
}

.hero--bg::before,.bg-section::before{
  background:
    linear-gradient(135deg,rgba(2,7,21,.91) 0%,rgba(4,14,37,.72) 34%,rgba(10,20,52,.77) 69%,rgba(3,10,28,.91) 100%),
    radial-gradient(circle at 86% 16%,rgba(123,92,255,.20),transparent 28%),
    radial-gradient(circle at 13% 65%,rgba(38,87,199,.24),transparent 31%);
}
.hero--bg .hero-panel,.surface-panel{
  border-color:rgba(109,137,255,.14);
  background:linear-gradient(180deg,rgba(4,14,37,.74),rgba(5,15,39,.58));
}
.booking-card,.support-card,.card{
  border-color:rgba(104,135,255,.14);
}
.card{
  background:linear-gradient(180deg,rgba(21,46,107,.28),rgba(4,13,36,.84));
}
.booking-card,.support-card{
  background:linear-gradient(180deg,rgba(5,18,48,.88),rgba(4,13,36,.72));
}
.support-form input,.support-form select,.support-form textarea{
  background:#081735;
  color:#cfdcff;
  border-color:rgba(116,145,255,.17);
}
.support-form input:focus,.support-form select:focus,.support-form textarea:focus{
  border-color:rgba(123,92,255,.58);
  box-shadow:0 0 0 4px rgba(123,92,255,.14);
}
.scheduler-chip{
  background:rgba(64,96,207,.21);
  border-color:rgba(119,145,255,.22);
  color:#a9c1ff;
}

/* useful-content layouts */
.decision-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.info-card{padding:26px}
.info-card h3{font-size:1.4rem;margin:10px 0 14px}
.info-card ul{margin:0;padding-left:20px;color:var(--muted);line-height:1.75}
.info-label{font-size:.76rem;font-weight:900;text-transform:uppercase;letter-spacing:1px}

.signal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.signal-item,.cost-item,.expect-grid>div{
  padding:20px;
  border-radius:18px;
  border:1px solid rgba(104,135,255,.14);
  background:rgba(5,18,48,.68);
}
.signal-item b,.cost-item b,.expect-grid b{display:block;margin-bottom:7px;font-size:1.05rem}
.signal-item span,.cost-item span,.expect-grid span{color:var(--muted);line-height:1.62}

.inspection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.inspection-item{padding:22px}
.inspection-item>span{font-size:.72rem;color:#839fff;font-weight:900;letter-spacing:1px}
.inspection-item h3{margin:9px 0 7px}.inspection-item p{margin:0;color:var(--muted);line-height:1.6}

.layer-list{display:grid;gap:11px;margin-top:26px}
.layer-list>div{
  display:grid;grid-template-columns:190px 1fr;gap:22px;align-items:start;
  padding:17px 0;border-bottom:1px solid rgba(109,137,255,.12)
}
.layer-list span{font-weight:900;color:#afc3ff;font-size:1.04rem}
.layer-list p{margin:0;color:var(--muted);line-height:1.65}

.timeline-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.timeline-card{padding:22px}
.timeline-card>b{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--royal-2),var(--amethyst));
  color:#dce7ff;margin-bottom:14px
}
.timeline-card h3{margin:0 0 7px}.timeline-card p{margin:0;color:var(--muted);line-height:1.6}

.solar-question-grid,.cost-grid,.prep-grid,.expect-grid,.lesson-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:28px
}
.question-card,.prep-card,.lesson-card{padding:22px}
.question-card b{display:block;font-size:1.05rem;margin-bottom:7px}
.question-card p,.prep-card p,.lesson-card p{margin:0;color:var(--muted);line-height:1.62}

.consent-line{
  display:flex!important;
  grid-template-columns:auto 1fr!important;
  align-items:flex-start!important;
  gap:9px!important;
  font-weight:600!important;
}
.consent-line input{width:auto!important;margin-top:3px}

.about-longform{
  padding:34px;
  margin-bottom:24px;
  border-radius:28px;
  border:1px solid rgba(103,133,255,.14);
  background:
    radial-gradient(circle at 10% 0%,rgba(80,94,224,.13),transparent 34%),
    linear-gradient(180deg,rgba(5,19,50,.86),rgba(4,14,38,.74));
  box-shadow:0 24px 54px rgba(0,0,0,.25);
}
.about-longform>p{
  color:var(--muted);
  line-height:1.85;
  font-size:1.03rem;
  max-width:980px;
}
.lesson-card h3{margin:0 0 8px}
.experience-stat{
  border-color:rgba(123,92,255,.28);
  background:
    radial-gradient(circle at 0% 50%,rgba(123,92,255,.14),transparent 35%),
    rgba(4,17,42,.74);
}
.experience-stat-number{
  background:linear-gradient(135deg,#5c92ff 0%,#775eff 50%,#9d6fff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* eliminate leftover gold/bronze visual references */
.pill{background:rgba(86,103,223,.16);border-color:rgba(116,141,255,.22);color:#a7bfff}
.about-value{background:rgba(30,55,126,.22)}
.legal-nav a{background:rgba(38,70,156,.20)}
.animated-border:before{
  background:linear-gradient(120deg,transparent,rgba(84,125,255,.14),rgba(135,93,255,.16),transparent);
}

/* Calendly shell in site colors; iframe itself is third-party content */
.scheduler-shell{
  border-color:rgba(105,135,255,.19);
  background:#071533;
}

@media(max-width:980px){
  .decision-grid,.signal-grid,.inspection-grid,.timeline-grid,.solar-question-grid,.cost-grid,.prep-grid,.expect-grid,.lesson-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .decision-grid,.signal-grid,.inspection-grid,.timeline-grid,.solar-question-grid,.cost-grid,.prep-grid,.expect-grid,.lesson-grid{grid-template-columns:1fr}
  .layer-list>div{grid-template-columns:1fr;gap:6px}
}


/* V18 — professional, restrained hero proportions */
.hero--bg{
  min-height:720px;
  padding:70px 0 64px;
  align-items:center;
  background-position:center 42%;
}

.hero--bg .hero-panel{
  max-width:780px;
  padding:28px 30px;
  border-radius:26px;
  background:linear-gradient(180deg,rgba(4,14,37,.76),rgba(4,14,37,.59));
  backdrop-filter:blur(8px);
}

.hero h1{
  max-width:760px;
  font-size:clamp(2.75rem,4.9vw,4.85rem);
  line-height:.94;
  letter-spacing:-3.4px;
  margin:18px 0 18px;
  text-wrap:balance;
}

.hero-copy{
  max-width:700px;
  font-size:1rem;
  line-height:1.72;
}

.hero-actions{
  margin-top:24px;
}

.hero--bg .btn{
  padding:13px 18px;
}

.hero--bg .eyebrow{
  padding:8px 11px;
  font-size:.72rem;
  letter-spacing:.8px;
}

.hero--bg .experience-stat{
  grid-template-columns:92px 1fr;
  gap:18px;
  margin-top:22px;
  padding:18px 20px;
  border-radius:18px;
}

.hero--bg .experience-stat-number{
  font-size:clamp(3.15rem,5vw,4.7rem);
  letter-spacing:-3px;
  line-height:.9;
}

.hero--bg .experience-stat b{
  font-size:1.22rem;
}

.hero--bg .experience-stat p{
  font-size:.9rem;
  line-height:1.55;
}

.hero--bg .trust-row{
  margin-top:20px;
}

@media (min-width:1200px){
  .hero--bg .container{
    width:min(1280px, calc(100% - 64px));
  }
}

@media(max-width:980px){
  .hero--bg{
    min-height:650px;
    padding:54px 0;
  }
  .hero--bg .hero-panel{
    max-width:700px;
    padding:24px;
  }
  .hero h1{
    font-size:clamp(2.6rem,7vw,4.15rem);
    line-height:.95;
    letter-spacing:-2.8px;
  }
  .hero-copy{
    font-size:.96rem;
  }
  .hero--bg .experience-stat{
    grid-template-columns:78px 1fr;
  }
  .hero--bg .experience-stat-number{
    font-size:3.6rem;
  }
}

@media(max-width:620px){
  .hero--bg{
    min-height:auto;
    padding:42px 0 48px;
  }
  .hero--bg .hero-panel{
    padding:20px;
    border-radius:22px;
  }
  .hero h1{
    font-size:clamp(2.35rem,11vw,3.35rem);
    line-height:.97;
    letter-spacing:-2.2px;
  }
  .hero--bg .experience-stat{
    grid-template-columns:1fr;
    gap:8px;
  }
  .hero--bg .experience-stat-number{
    font-size:3.35rem;
  }
}


/* V19 — image-forward hero, remove ugly tinted boxes */
.hero--bg::before{
  background:
    linear-gradient(90deg,
      rgba(2,7,19,.64) 0%,
      rgba(3,9,22,.44) 34%,
      rgba(4,11,27,.18) 62%,
      rgba(4,11,27,.06) 100%);
}

/* Make ALL section backgrounds show through more clearly */
.bg-section::before{
  background:
    linear-gradient(90deg,
      rgba(2,8,21,.54) 0%,
      rgba(3,10,26,.38) 42%,
      rgba(4,12,29,.22) 72%,
      rgba(4,12,29,.12) 100%);
}

/* Remove the giant vertical glass panel behind hero text */
.hero--bg .hero-panel{
  max-width:800px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}

/* Remove the purple pill/box above the headline */
.hero--bg .eyebrow{
  padding:0;
  border:0;
  background:transparent;
  border-radius:0;
  color:#b8caff;
  box-shadow:none;
}

/* Keep the dot, but make it tiny/subtle */
.hero--bg .eyebrow .dot{
  width:6px;
  height:6px;
  box-shadow:0 0 12px rgba(123,92,255,.45);
}

/* Add readable depth directly to text instead of putting it in a box */
.hero--bg h1{
  text-shadow:
    0 2px 2px rgba(0,0,0,.18),
    0 10px 34px rgba(0,0,0,.42);
}

.hero--bg .hero-copy{
  color:#b6c6e7;
  text-shadow:0 3px 16px rgba(0,0,0,.46);
}

/* Make the experience stat lighter and less blocky */
.hero--bg .experience-stat{
  max-width:690px;
  background:rgba(4,14,36,.34);
  border-color:rgba(113,139,255,.10);
  box-shadow:0 12px 34px rgba(0,0,0,.18);
  backdrop-filter:blur(4px);
}

/* Main content panels should be lighter so backgrounds remain visible */
.surface-panel{
  background:linear-gradient(
    180deg,
    rgba(4,14,37,.50),
    rgba(4,14,37,.38)
  );
  border-color:rgba(109,137,255,.10);
  backdrop-filter:blur(5px);
}

/* Cards stay readable, but less opaque */
.card,
.booking-card,
.support-card{
  background:linear-gradient(
    180deg,
    rgba(12,31,74,.56),
    rgba(4,13,36,.62)
  );
}

/* Make section images feel more vivid */
.hero--bg,
.bg-section{
  background-blend-mode:normal;
  filter:none;
}

@media(max-width:980px){
  .hero--bg::before{
    background:linear-gradient(90deg,
      rgba(2,7,19,.72) 0%,
      rgba(3,9,22,.50) 52%,
      rgba(4,11,27,.18) 100%);
  }
}

@media(max-width:620px){
  .hero--bg .experience-stat{
    background:rgba(4,14,36,.44);
  }
}

.lang-btn{cursor:pointer;user-select:none}
.lang-btn:focus-visible{outline:2px solid #7b7cff;outline-offset:3px}


/* V21 — improve readability without hiding the roofing image */
.hero--bg::before{
  background:
    linear-gradient(90deg,
      rgba(2,7,19,.72) 0%,
      rgba(3,9,22,.54) 34%,
      rgba(4,11,27,.28) 62%,
      rgba(4,11,27,.10) 100%);
}

.bg-section::before{
  background:
    linear-gradient(90deg,
      rgba(2,8,21,.61) 0%,
      rgba(3,10,26,.46) 42%,
      rgba(4,12,29,.29) 72%,
      rgba(4,12,29,.16) 100%);
}

/* Slight translucent text backing, not a big box */
.hero--bg .hero-panel{
  background:linear-gradient(
    90deg,
    rgba(3,11,28,.20) 0%,
    rgba(3,11,28,.10) 68%,
    rgba(3,11,28,0) 100%
  );
  border-radius:18px;
  padding:14px 18px 16px 0;
}

/* Stronger type contrast */
.hero--bg h1{
  text-shadow:
    0 2px 2px rgba(0,0,0,.22),
    0 8px 26px rgba(0,0,0,.58);
}

.hero--bg .hero-copy,
.hero--bg .eyebrow,
.hero--bg .experience-stat{
  text-shadow:0 3px 18px rgba(0,0,0,.52);
}

/* Fix clipping on the 40 */
.hero--bg .experience-stat{
  overflow:visible;
  align-items:center;
  padding-top:20px;
  padding-bottom:20px;
}

.hero--bg .experience-stat-number{
  line-height:1;
  padding-right:8px;
  padding-bottom:4px;
  overflow:visible;
  display:inline-block;
}

@media(max-width:620px){
  .hero--bg .hero-panel{
    padding:12px 10px 14px 0;
  }
  .hero--bg .experience-stat-number{
    line-height:1.02;
    padding-bottom:6px;
  }
}


/* V22 — interactive, visual, scan-friendly UI */

/* Hero: no title box; readability only behind lower content */
.hero--bg .hero-panel{
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.hero-lower-glass{
  margin-top:18px;
  max-width:720px;
  padding:18px 20px 20px;
  border-radius:20px;
  background:linear-gradient(90deg,rgba(3,11,29,.62),rgba(3,11,29,.42),rgba(3,11,29,.16));
  border:1px solid rgba(112,140,255,.09);
  backdrop-filter:blur(4px);
}
.hero--bg h1{
  max-width:780px;
  text-shadow:0 5px 28px rgba(0,0,0,.62);
}
.hero--bg .experience-stat{
  background:rgba(5,16,42,.38)!important;
  border-color:rgba(109,139,255,.11)!important;
}

/* Tabs */
.roof-choice-tabs{margin-top:26px}
.tab-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.tab-button{
  display:flex;align-items:center;gap:10px;
  padding:14px 18px;border-radius:15px;
  border:1px solid rgba(115,145,255,.14);
  background:rgba(6,20,51,.62);color:var(--ink);
  font-weight:900;cursor:pointer;transition:.25s ease
}
.tab-button:hover,.tab-button.active{transform:translateY(-2px);background:linear-gradient(135deg,rgba(48,83,190,.66),rgba(105,77,212,.62));border-color:rgba(136,152,255,.32)}
.tab-icon{font-size:1.18rem}
.tab-panel{display:none;padding:24px;border-radius:20px;background:rgba(5,18,47,.58);border:1px solid rgba(110,138,255,.12)}
.tab-panel.active{display:block;animation:fadePanel .28s ease}
@keyframes fadePanel{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:none}}
.tab-panel h3{margin:0 0 18px}
.mini-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini-check-grid>div{display:flex;align-items:center;gap:10px;padding:12px 13px;border-radius:14px;background:rgba(8,28,67,.66)}
.mini-check-grid span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:rgba(112,89,235,.20);color:#a99cff;font-weight:900}

/* Clickable visual cards */
.interactive-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.interactive-card{
  min-height:170px;text-align:left;padding:20px;
  border:1px solid rgba(112,140,255,.13);border-radius:18px;
  background:rgba(5,18,47,.62);color:var(--ink);
  cursor:pointer;transition:.25s ease
}
.interactive-card:hover{transform:translateY(-4px);border-color:rgba(126,115,255,.35);box-shadow:0 18px 36px rgba(0,0,0,.20)}
.visual-icon{display:block;font-size:1.65rem;margin-bottom:12px}
.interactive-card b{display:block;font-size:1.04rem;margin-bottom:5px}
.interactive-card small{display:block;color:#8197c2;margin-top:8px;font-size:.75rem}
.reveal-text{display:block;max-height:0;opacity:0;overflow:hidden;color:var(--muted);line-height:1.55;transition:.3s ease}
.interactive-card.open .reveal-text{max-height:160px;opacity:1;margin-top:8px}
.interactive-card.open small{display:none}

/* Roof layers accordion */
.accordion-list{display:grid;gap:10px;margin-top:26px}
.accordion-item{
  display:grid;grid-template-columns:44px 1fr auto;align-items:center;
  gap:12px;width:100%;padding:15px 16px;text-align:left;
  border:1px solid rgba(112,140,255,.13);border-radius:16px;
  background:rgba(5,18,47,.60);color:var(--ink);cursor:pointer;
  transition:.24s ease
}
.accordion-item:hover{background:rgba(15,36,84,.70)}
.accordion-icon{font-size:1.25rem}
.accordion-title{font-weight:900}
.accordion-plus{font-size:1.35rem;color:#9d91ff;transition:.2s}
.accordion-content{grid-column:2/4;max-height:0;opacity:0;overflow:hidden;color:var(--muted);line-height:1.6;transition:.28s ease}
.accordion-item.open .accordion-content{max-height:130px;opacity:1;padding-top:4px}
.accordion-item.open .accordion-plus{transform:rotate(45deg)}

/* Cost chips */
.expand-chip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:25px}
.expand-chip{
  text-align:left;padding:18px;border-radius:17px;
  border:1px solid rgba(112,140,255,.13);background:rgba(5,18,47,.62);
  color:var(--ink);cursor:pointer;transition:.24s ease
}
.expand-chip:hover{transform:translateY(-3px);border-color:rgba(128,115,255,.30)}
.expand-chip>span{font-size:1.35rem;display:block;margin-bottom:9px}
.expand-chip b{display:block}
.expand-chip em{display:block;max-height:0;opacity:0;overflow:hidden;margin-top:0;font-style:normal;color:var(--muted);line-height:1.5;transition:.28s ease}
.expand-chip.open em{max-height:140px;opacity:1;margin-top:9px}

/* Appointment prep prompts */
.prompt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:25px}
.prompt-card{
  text-align:left;padding:18px;border-radius:17px;border:1px solid rgba(112,140,255,.13);
  background:rgba(5,18,47,.62);color:var(--ink);cursor:pointer;transition:.24s ease
}
.prompt-card:hover{transform:translateY(-3px);border-color:rgba(128,115,255,.30)}
.prompt-card>span{font-size:1.35rem;display:block;margin-bottom:9px}
.prompt-card b{display:block}
.prompt-card small{display:block;max-height:0;opacity:0;overflow:hidden;color:var(--muted);line-height:1.5;transition:.28s ease}
.prompt-card.open small{max-height:120px;opacity:1;margin-top:8px}

/* More compact surface panels */
.surface-panel{padding:28px}
.section-copy{max-width:800px}
.section-title{margin-bottom:12px}

@media(max-width:980px){
  .interactive-card-grid,.expand-chip-grid,.prompt-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .mini-check-grid,.interactive-card-grid,.expand-chip-grid,.prompt-grid{grid-template-columns:1fr}
  .hero-lower-glass{padding:16px}
}

/* V23 cinematic aerial roofing video */
.cinematic-roof-video{position:relative;min-height:clamp(460px,65vw,760px);overflow:hidden;background:#050d21;isolation:isolate}
.roof-drone-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.video-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(2,7,20,.60) 0%,rgba(2,8,22,.25) 44%,rgba(2,8,22,.04) 76%),linear-gradient(0deg,rgba(2,8,22,.40),transparent 42%)}
.video-copy{position:absolute;left:max(24px,calc((100vw - 1180px)/2));bottom:clamp(36px,7vw,82px);max-width:650px;padding-right:24px;text-shadow:0 5px 28px rgba(0,0,0,.55)}
.video-kicker{display:inline-block;font-size:.78rem;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:#a8bdff;margin-bottom:10px}
.video-copy h2{font-size:clamp(2.3rem,5vw,4.8rem);line-height:.94;letter-spacing:-3px;margin:0 0 14px;color:#d8e5ff}
.video-copy h2 span{background:linear-gradient(120deg,#69aaff,#846cff,#a476ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.video-copy p{max-width:560px;color:#bac9e8;line-height:1.65;margin:0 0 18px}
.video-control{border:1px solid rgba(142,166,255,.24);background:rgba(5,16,43,.48);backdrop-filter:blur(8px);color:#d8e5ff;border-radius:999px;padding:10px 14px;font-weight:800;cursor:pointer}
.video-control:hover{background:rgba(38,67,151,.62)}
@media(max-width:620px){.cinematic-roof-video{min-height:520px}.video-copy{left:20px;bottom:30px}.video-copy h2{font-size:2.65rem;letter-spacing:-2px}.video-shade{background:linear-gradient(90deg,rgba(2,7,20,.64),rgba(2,8,22,.16))}}

/* V27 — cinematic video backgrounds across informational sections */
.section-video-bg{position:relative;overflow:hidden;isolation:isolate;background:#06122f!important}
.section-video-bg>.section-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;filter:saturate(.94) contrast(1.04)}
.section-video-bg>.section-video-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(3,10,28,.70),rgba(5,15,40,.42) 52%,rgba(5,15,40,.30)),linear-gradient(0deg,rgba(2,8,24,.50),rgba(2,8,24,.12) 55%,rgba(2,8,24,.34))}
.section-video-bg>.container{position:relative;z-index:1}
.section-video-bg .surface-panel{background:linear-gradient(135deg,rgba(4,14,38,.80),rgba(8,23,58,.64));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@media (prefers-reduced-motion:reduce){.section-bg-video{display:none}}

/* V27 — integrated solar tile section */
.bg-solar-tiles{position:relative;isolation:isolate;background-image:linear-gradient(90deg,rgba(2,8,24,.82) 0%,rgba(2,8,24,.64) 46%,rgba(2,8,24,.28) 100%),url('images/backgrounds/solar-tiles-sustainable-roofing.png')!important;background-size:cover!important;background-position:center!important;background-attachment:scroll!important}
.bg-solar-tiles:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(3,10,28,.48),transparent 45%)}
.solar-tiles-panel{max-width:940px;background:linear-gradient(135deg,rgba(4,13,35,.84),rgba(8,22,54,.58));backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.solar-lead{font-size:1.06rem}
.solar-benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px}
.solar-benefit{min-height:170px;text-align:left;padding:19px;border-radius:18px;border:1px solid rgba(122,151,255,.20);background:rgba(5,18,47,.68);color:var(--ink);cursor:pointer;transition:.25s ease}
.solar-benefit:hover,.solar-benefit.open{transform:translateY(-4px);border-color:rgba(133,117,255,.48);background:rgba(11,31,76,.80)}
.solar-benefit>span{display:block;font-size:1.55rem;margin-bottom:10px}.solar-benefit b{display:block;font-size:1rem}.solar-benefit small{display:block;color:var(--muted);line-height:1.5;margin-top:8px}
.solar-tiles-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:24px}.solar-tiles-actions>span{max-width:580px;color:#9fb2d7;font-size:.78rem;line-height:1.45}
@media(max-width:980px){.solar-benefit-grid{grid-template-columns:1fr 1fr}.bg-solar-tiles{background-position:62% center!important}}
@media(max-width:620px){.solar-benefit-grid{grid-template-columns:1fr}.solar-tiles-panel{padding:22px}.bg-solar-tiles{background-position:68% center!important}.section-video-bg>.section-video-shade{background:rgba(3,10,28,.58)}}

/* V28 — larger visual/emoji icons requested */
.tab-icon{font-size:2rem!important;line-height:1}
.visual-icon{font-size:2.7rem!important;line-height:1.05;margin-bottom:14px!important}
.accordion-icon{font-size:2.1rem!important;line-height:1}
.prompt-card>span{font-size:2.35rem!important;line-height:1.05;margin-bottom:12px!important}
.solar-benefit>span{font-size:2.65rem!important;line-height:1.05;margin-bottom:13px!important}
@media(max-width:620px){.tab-icon{font-size:1.75rem!important}.visual-icon{font-size:2.35rem!important}.accordion-icon{font-size:1.85rem!important}.prompt-card>span{font-size:2.05rem!important}.solar-benefit>span{font-size:2.3rem!important}}

/* V29 — solid premium UI: remove excessive glass/transparency */
/* Keep imagery/video visible around content, but make the actual UI panels solid and readable. */
.surface-panel,
.section-video-bg .surface-panel{
  background:#071733!important;
  border:1px solid #18346d!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:0 24px 54px rgba(0,0,0,.30)!important;
}
.card,.info-card,.timeline-card,.question-card,.prep-card,.lesson-card,
.signal-item,.cost-item,.expect-grid>div,.inspection-item,
.interactive-card,.accordion-item,.expand-chip,.prompt-card,
.tab-panel,.mini-check-grid>div{
  background:#0a1d42!important;
  border-color:#1d3c7c!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.interactive-card:hover,.accordion-item:hover,.expand-chip:hover,.prompt-card:hover,
.solar-benefit:hover,.solar-benefit.open{
  background:#102a5e!important;
}
.tab-button{
  background:#0a1d42!important;
  border-color:#1d3c7c!important;
}
.tab-button:hover,.tab-button.active{
  background:linear-gradient(135deg,#244fbd,#674fd4)!important;
}
.about-longform,.about-story-card,.credibility-stat,.experience-stat{
  background:#071733!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.about-value,.trust-box{background:#0a1d42!important}

/* Hero title stays directly on the photograph. Only the lower copy gets a strong, localized backing. */
.hero-lower-glass{
  background:#06152f!important;
  border-color:#1a3773!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:0 20px 46px rgba(0,0,0,.28);
}
.hero--bg .experience-stat{
  background:#0a1d42!important;
  border-color:#1d3c7c!important;
  backdrop-filter:none!important;
}

/* Solar Roofing: preserve the generated solar-tile image and use one solid copy panel, not glass. */
.bg-solar-tiles{
  background-image:linear-gradient(90deg,rgba(2,8,24,.54) 0%,rgba(2,8,24,.22) 45%,rgba(2,8,24,.04) 100%),url('images/backgrounds/solar-tiles-sustainable-roofing.png')!important;
}
.solar-tiles-panel{
  background:#071733!important;
  border:1px solid #1d3c7c!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:0 24px 54px rgba(0,0,0,.30)!important;
}
.solar-benefit{
  background:#0a1d42!important;
  border-color:#1d3c7c!important;
}

/* Videos should look like video, not like they are buried under a giant tinted sheet. */
.section-video-bg>.section-video-shade{
  background:linear-gradient(90deg,rgba(3,10,28,.28),rgba(3,10,28,.08) 58%,rgba(3,10,28,.02))!important;
}
.section-video-bg>.section-bg-video{filter:saturate(1.05) contrast(1.03)!important}

/* Support stays solid and intentionally has no video background. */
.booking-card,.support-card{
  background:#071733!important;
  border-color:#1d3c7c!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.support-form input,.support-form select,.support-form textarea{background:#0a1d42!important}

@media(max-width:620px){
  .section-video-bg>.section-video-shade{background:rgba(3,10,28,.20)!important}
}

/* V30: services + review marquee */
.offer-section{position:relative;background:linear-gradient(135deg,#071329 0%,#10265a 52%,#28145d 100%);padding:92px 0;overflow:hidden}
.offer-section:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 18%,rgba(94,77,255,.22),transparent 30%),radial-gradient(circle at 12% 85%,rgba(37,122,255,.16),transparent 30%);pointer-events:none}
.offer-shell{position:relative;z-index:1}
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.offer-card{display:flex;flex-direction:column;min-height:330px;padding:28px;border:1px solid rgba(141,176,255,.28);border-radius:24px;background:#0a1834;box-shadow:0 18px 50px rgba(0,0,0,.24);transition:transform .25s ease,border-color .25s ease}
.offer-card:hover{transform:translateY(-7px);border-color:rgba(155,136,255,.72)}
.offer-card .offer-icon{font-size:4.2rem;line-height:1;margin-bottom:24px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.3))}
.offer-card h3{font-size:1.55rem;margin:0 0 12px;color:#eef5ff}.offer-card p{color:#c5d4ea;line-height:1.65;margin:0}.offer-card a{margin-top:auto;padding-top:26px;font-weight:800;color:#a9c9ff;text-decoration:none}.solar-offer{background:linear-gradient(145deg,#0a1834,#21145a)}
.review-marquee-section{padding:88px 0;background:#050d1d;overflow:hidden;border-top:1px solid rgba(150,180,255,.16);border-bottom:1px solid rgba(150,180,255,.16)}
.review-heading{text-align:center;max-width:900px}.review-heading .section-copy{margin-left:auto;margin-right:auto}.review-disclosure{color:#9fb2ce;font-size:.82rem;margin:12px auto 0;max-width:720px}
.review-marquee{width:100%;overflow:hidden;margin-top:34px;padding:8px 0 18px;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.review-track{display:flex;width:max-content;gap:18px;animation:reviewScroll 38s linear infinite}.review-marquee:hover .review-track{animation-play-state:paused}
.review-card{width:min(390px,82vw);min-height:190px;padding:24px;border-radius:22px;background:#0b1a38;border:1px solid rgba(143,177,255,.24);box-shadow:0 14px 36px rgba(0,0,0,.24);white-space:normal}.review-card .stars{font-size:1.5rem;letter-spacing:.18em;color:#d7e6ff;margin-bottom:15px}.review-card p{font-size:1.02rem;line-height:1.58;color:#edf4ff;margin:0 0 18px}.review-card span{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:#91a9c9;font-weight:800}
@keyframes reviewScroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 9px))}}
@media(max-width:900px){.offer-grid{grid-template-columns:1fr}.offer-card{min-height:270px}.offer-card .offer-icon{font-size:3.8rem}.review-track{animation-duration:32s}}
@media(prefers-reduced-motion:reduce){.review-track{animation:none}}


/* V31 — make the two core roofing systems unmistakable on the homepage */
.hero-roofing-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 14px}
.hero-roof-choice{display:flex;align-items:center;gap:14px;padding:15px 16px;background:#0a1d42;border:1px solid #2850a0;border-radius:16px;color:#fff;text-decoration:none;transition:.2s ease;box-shadow:0 12px 28px rgba(0,0,0,.22)}
.hero-roof-choice:hover{transform:translateY(-3px);background:#102a5e;border-color:#6d82ff}
.hero-roof-choice-solar{border-color:#725ce1}
.hero-choice-icon{font-size:2.35rem;line-height:1}
.hero-roof-choice b{display:block;font-size:1.05rem;margin-bottom:3px}
.hero-roof-choice small{display:block;color:#c9d8ff;line-height:1.35}
.roofing-system-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.roofing-system-card{min-height:320px;justify-content:space-between}
.roofing-system-card h3{font-size:clamp(1.5rem,2.4vw,2.2rem)!important}
.system-label{display:block;color:#aebfff;font-size:.73rem;font-weight:800;letter-spacing:.12em;margin-bottom:9px}
.property-types{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:18px}
.property-types span{background:#0a1d42;border:1px solid #1d3c7c;border-radius:999px;padding:10px 15px;color:#dbe6ff}
@media(max-width:760px){.hero-roofing-choices,.roofing-system-grid{grid-template-columns:1fr!important}.hero-roof-choice{padding:13px}.hero-choice-icon{font-size:2rem}}

/* V32 solar tile photo gallery */
.solar-tile-gallery{display:grid;grid-template-columns:1.45fr .8fr;gap:16px;margin:24px 0 20px}
.solar-tile-photo{position:relative;margin:0;min-height:240px;border-radius:22px;overflow:hidden;border:1px solid #284d91;background:#06142e;box-shadow:0 18px 40px rgba(0,0,0,.3)}
.solar-tile-photo img{width:100%;height:100%;min-height:240px;object-fit:cover;display:block;transition:transform .55s ease}
.solar-tile-photo:hover img{transform:scale(1.035)}
.solar-tile-photo figcaption{position:absolute;left:16px;bottom:16px;padding:9px 13px;border-radius:999px;background:#071733;color:#eef6ff;border:1px solid #315aa2;font-weight:800;letter-spacing:.02em;box-shadow:0 8px 24px rgba(0,0,0,.28)}
@media(max-width:760px){.solar-tile-gallery{grid-template-columns:1fr}.solar-tile-photo,.solar-tile-photo img{min-height:210px}}

/* V33 financing CTA */
.btn-financing{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff!important;border:1px solid rgba(216,180,254,.75);box-shadow:0 10px 30px rgba(124,58,237,.35);font-weight:800;}
.btn-financing:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(168,85,247,.45);filter:brightness(1.08);}

/* V35 — aerial solar roofing motion background */
.solar-aerial-video-section{position:relative;overflow:hidden;background-image:url("images/backgrounds/solar-tiles-sustainable-roofing.png");}
.solar-aerial-video-section .solar-aerial-video{object-position:center center;filter:saturate(1.08) contrast(1.04) brightness(.9);}
.solar-aerial-video-section .solar-video-shade{background:linear-gradient(90deg,rgba(4,8,24,.28),rgba(14,21,52,.08) 48%,rgba(4,8,24,.22));}
.solar-aerial-video-section .solar-tiles-panel{position:relative;z-index:2;}
@media (prefers-reduced-motion:reduce){.solar-aerial-video-section .solar-aerial-video{display:none;}}

.contact-us-section{position:relative;background:linear-gradient(rgba(4,13,34,.52),rgba(7,12,31,.68)),url('images/homeowner_roof_consultation.png') center/cover no-repeat;background-attachment:scroll}
.contact-us-panel{background:rgba(7,16,40,.88);border:1px solid rgba(151,180,255,.25);border-radius:28px;padding:clamp(24px,4vw,52px);box-shadow:0 24px 70px rgba(0,0,0,.28)}
.contact-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:26px 0}.contact-info-card{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:18px;background:#0d1d46;border:1px solid rgba(151,180,255,.22);color:#fff;text-decoration:none}.contact-info-card span{font-size:1.7rem}.contact-info-card b{font-size:clamp(1rem,2vw,1.25rem);overflow-wrap:anywhere}.contact-info-card small{color:#c9d8ef}.contact-form-panel{margin-top:24px;background:#081634;padding:22px;border-radius:20px}@media(max-width:700px){.contact-info-grid{grid-template-columns:1fr}}

/* V41 — make the two primary roofing paths unmistakable in the hero */
.hero-roofing-choices{gap:20px;margin:28px 0 20px}
.hero-roof-choice{position:relative;min-height:132px;padding:26px 28px;gap:22px;border-width:2px;border-color:#4f78dc;border-radius:22px;background:linear-gradient(135deg,#0b2454 0%,#123a84 100%);box-shadow:0 20px 48px rgba(0,0,0,.38),0 0 0 1px rgba(118,164,255,.2) inset;overflow:hidden}
.hero-roof-choice::after{content:'→';margin-left:auto;font-size:2rem;font-weight:900;color:#dce8ff;transition:.2s ease}
.hero-roof-choice:hover{transform:translateY(-6px) scale(1.015);border-color:#9abaff;box-shadow:0 26px 58px rgba(0,0,0,.45),0 0 28px rgba(65,123,255,.24)}
.hero-roof-choice:hover::after{transform:translateX(5px)}
.hero-roof-choice-solar{background:linear-gradient(135deg,#26165c 0%,#5530a8 55%,#203d91 100%);border-color:#9d79ff;box-shadow:0 20px 48px rgba(0,0,0,.38),0 0 30px rgba(127,85,255,.18)}
.hero-roof-choice-solar:hover{border-color:#c8b5ff;box-shadow:0 26px 58px rgba(0,0,0,.45),0 0 34px rgba(147,104,255,.34)}
.hero-choice-icon{font-size:4rem;filter:drop-shadow(0 8px 14px rgba(0,0,0,.3))}
.hero-roof-choice b{font-size:1.55rem;line-height:1.05;letter-spacing:-.02em;margin-bottom:9px;text-transform:uppercase}
.hero-roof-choice small{font-size:1rem;font-weight:650;color:#e3ebff;line-height:1.45}
@media(max-width:760px){.hero-roof-choice{min-height:112px;padding:20px 18px;gap:15px}.hero-choice-icon{font-size:3.15rem}.hero-roof-choice b{font-size:1.3rem}.hero-roof-choice small{font-size:.9rem}.hero-roof-choice::after{font-size:1.5rem}}

/* V42 — long Repair / Replace selectors */
#decision .tab-buttons{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  width:100%;
  margin:28px 0 18px;
}
#decision .tab-button{
  width:100%;
  min-height:76px;
  justify-content:center;
  padding:18px 28px;
  border-radius:18px;
  font-size:1.22rem;
  letter-spacing:.01em;
  box-shadow:0 14px 32px rgba(0,0,0,.20);
}
#decision .tab-button .tab-icon{font-size:1.55rem}
@media (max-width:640px){
  #decision .tab-buttons{gap:12px}
  #decision .tab-button{min-height:68px;padding:15px 12px;font-size:1.08rem}
  #decision .tab-button .tab-icon{font-size:1.35rem}
}

/* V43: wider horizontal appointment presentation */
#book .container{max-width:1440px}
#book .booking-support-grid{display:block;width:100%}
#book .booking-card{display:grid;grid-template-columns:minmax(280px,.38fr) minmax(620px,1fr);column-gap:34px;align-items:start;padding:30px 32px}
#book .booking-card>.scheduler-chip,#book .booking-card>h3,#book .booking-card>p{grid-column:1}
#book .booking-card>.scheduler-shell{grid-column:2;grid-row:1 / span 4;margin-top:0;width:100%;min-height:610px}
#book .scheduler-shell iframe{height:610px}
#book .scheduler-placeholder{min-height:610px}
@media(max-width:1050px){#book .booking-card{display:block}#book .booking-card>.scheduler-shell{margin-top:22px}}

/* V44 footer vans + contact refinements */
.footer{overflow:hidden}
.footer-showcase{display:grid;grid-template-columns:minmax(180px,1fr) minmax(420px,2.15fr) minmax(180px,1fr);gap:22px;align-items:end;text-align:center}
.footer-center{position:relative;z-index:2;min-width:0}
.footer-brand{justify-content:center}
.footer-center .footer-links{justify-content:center}
.footer-center small{margin-left:auto;margin-right:auto}
.footer-copyright{margin-top:22px;color:#9fb2ce}
.footer-van-wrap{display:flex;align-items:flex-end;justify-content:center;min-width:0}
.footer-van-wrap img{width:min(100%,420px);height:auto;display:block;filter:drop-shadow(0 16px 24px rgba(0,0,0,.38));transform:translateY(8px)}
.footer-van-left img{transform:translateY(8px)}
.footer-van-right img{transform:translateY(8px)}
@media(max-width:980px){.footer-showcase{grid-template-columns:1fr 1.6fr 1fr;gap:8px}.footer-van-wrap img{width:100%}}
@media(max-width:720px){.footer-showcase{grid-template-columns:1fr 1fr}.footer-center{grid-column:1/-1;grid-row:1}.footer-van-wrap{grid-row:2}.footer-van-wrap img{max-width:300px}.footer-links{justify-content:center}}
/* V45 footer van clipping fix */
.footer{overflow:visible}
.footer-showcase{overflow:visible;padding-left:22px;padding-right:22px}
.footer-van-wrap{overflow:visible;padding:0 8px}
.footer-van-wrap img{max-width:100%;object-fit:contain;object-position:center bottom;transform:translateY(8px)}
@media(max-width:980px){.footer-showcase{padding-left:10px;padding-right:10px}.footer-van-wrap{padding:0 4px}}

/* V46 modern Sustainable Roofing LLC logo */
.site-logo{display:block;width:250px;max-width:31vw;height:auto;object-fit:contain}
.footer-logo{width:300px;max-width:60vw;margin-inline:auto}
@media(max-width:900px){.site-logo{width:205px;max-width:48vw}.footer-logo{width:250px;max-width:70vw}}
@media(max-width:560px){.site-logo{width:175px;max-width:55vw}.footer-logo{width:220px;max-width:76vw}}

/* V47: keep footer vans fully inside the visible footer area */
.footer-showcase{box-sizing:border-box;padding-left:44px;padding-right:44px}
.footer-van-left{justify-content:flex-start}
.footer-van-right{justify-content:flex-end}
.footer-van-left img,.footer-van-right img{width:min(100%,390px);max-width:390px;transform:translateY(8px) scale(.94);transform-origin:center bottom}
@media(max-width:1100px){.footer-showcase{padding-left:30px;padding-right:30px}.footer-van-left img,.footer-van-right img{transform:translateY(8px) scale(.90)}}
@media(max-width:720px){.footer-showcase{padding-left:18px;padding-right:18px}.footer-van-left,.footer-van-right{justify-content:center}.footer-van-left img,.footer-van-right img{width:100%;max-width:280px;transform:translateY(6px) scale(.92)}}
/* V48 motion + van positioning */
.footer-showcase{padding-left:34px!important;padding-right:34px!important;overflow:visible!important}
.footer-van-left{justify-content:flex-start!important;padding-left:26px!important;overflow:visible!important}
.footer-van-left img{width:min(94%,390px)!important;transform:translate(18px,8px)!important;object-fit:contain!important}
.footer-van-right{justify-content:flex-end!important;padding-right:18px!important;overflow:visible!important}
.footer-van-right img{width:min(94%,390px)!important;object-fit:contain!important}
.solar-tiles-panel{position:relative!important;padding-top:84px!important;overflow:visible!important}
.solar-corner-van{position:absolute;right:22px;top:14px;width:min(29vw,330px);height:auto;z-index:4;filter:drop-shadow(0 14px 22px rgba(0,0,0,.42));pointer-events:none}
@media(max-width:800px){.solar-corner-van{width:180px;right:8px;top:8px;opacity:.95}.solar-tiles-panel{padding-top:118px!important}.footer-showcase{padding-left:12px!important;padding-right:12px!important}.footer-van-left{padding-left:8px!important}.footer-van-left img{transform:translate(8px,8px)!important}}

/* independent animated color accents for text/card boxes */
.card,.surface-panel,.offer-card,.hero-roof-choice,.solar-benefit,.contact-card,.booking-card,.inspection-item,.cost-card,.layer-item,.warning-card,.property-types span{position:relative;isolation:isolate;overflow:hidden}
.card::before,.surface-panel::before,.offer-card::before,.hero-roof-choice::before,.solar-benefit::before,.contact-card::before,.booking-card::before,.inspection-item::before,.cost-card::before,.layer-item::before,.warning-card::before,.property-types span::before{content:"";position:absolute;inset:-65%;z-index:-1;opacity:.22;background:linear-gradient(115deg,transparent 25%,rgba(31,117,255,.72) 43%,rgba(139,74,255,.58) 56%,transparent 73%);animation:srSweepA 8s linear infinite;pointer-events:none}
.offer-card::before,.solar-benefit:nth-child(2n)::before,.cost-card:nth-child(2n)::before{animation-name:srSweepB;animation-duration:10.5s;background:linear-gradient(40deg,transparent 22%,rgba(105,70,255,.66) 42%,rgba(0,196,255,.5) 59%,transparent 76%)}
.hero-roof-choice::before,.inspection-item:nth-child(3n)::before,.warning-card:nth-child(3n)::before{animation-name:srSweepC;animation-duration:12s;background:radial-gradient(circle at 50% 50%,rgba(67,137,255,.62),rgba(111,61,255,.28) 32%,transparent 62%)}
.surface-panel::before,.booking-card::before,.contact-card::before{animation-duration:14s;opacity:.15}
@keyframes srSweepA{0%{transform:translate3d(-28%,-10%,0) rotate(0deg)}50%{transform:translate3d(25%,10%,0) rotate(12deg)}100%{transform:translate3d(-28%,-10%,0) rotate(0deg)}}
@keyframes srSweepB{0%{transform:translate3d(20%,-25%,0) rotate(12deg)}50%{transform:translate3d(-24%,20%,0) rotate(-9deg)}100%{transform:translate3d(20%,-25%,0) rotate(12deg)}}
@keyframes srSweepC{0%{transform:translate(-24%,-18%) scale(.9)}50%{transform:translate(24%,18%) scale(1.14)}100%{transform:translate(-24%,-18%) scale(.9)}}
@media(prefers-reduced-motion:reduce){.card::before,.surface-panel::before,.offer-card::before,.hero-roof-choice::before,.solar-benefit::before,.contact-card::before,.booking-card::before,.inspection-item::before,.cost-card::before,.layer-item::before,.warning-card::before,.property-types span::before{animation:none!important}}
/* V49: keep Solar Roofing van small and tucked into the upper-right corner */
.solar-tiles-panel{position:relative;overflow:hidden}
.solar-corner-van{right:18px!important;top:12px!important;width:clamp(120px,14vw,190px)!important;max-height:150px!important;object-fit:contain!important;object-position:top right!important;z-index:3!important}
@media(max-width:800px){.solar-corner-van{width:118px!important;right:8px!important;top:8px!important;max-height:96px!important}.solar-tiles-panel{padding-top:78px!important}}

/* V50: solar van tucked fully into the upper-right without touching headline */
.solar-tiles-panel{position:relative!important}
.solar-corner-van{right:16px!important;top:12px!important;width:clamp(88px,9vw,128px)!important;max-height:108px!important;object-fit:contain!important;object-position:top right!important;z-index:3!important;pointer-events:none!important}
@media(max-width:800px){.solar-corner-van{width:82px!important;right:7px!important;top:7px!important;max-height:72px!important}.solar-tiles-panel{padding-top:62px!important}}

/* V51 — crisp homepage: remove all glass/background blur */
body.homepage *, body.homepage *::before, body.homepage *::after,
.homepage *, .homepage *::before, .homepage *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Homepage global override */
body *, body *::before, body *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.offer-roof-comparison{width:100%;height:260px;margin:28px 0 10px;border-radius:24px;overflow:hidden;border:1px solid rgba(141,176,255,.35);box-shadow:0 18px 50px rgba(0,0,0,.28);background:#071329}
.offer-roof-comparison img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 53%}
@media(max-width:900px){.offer-roof-comparison{height:220px;border-radius:20px}}
@media(max-width:600px){.offer-roof-comparison{height:180px}.offer-roof-comparison img{object-position:center center}}

/* V53: stronger Contact Us headquarters eyebrow */
.contact-headquarters-kicker{
  font-size:clamp(1.15rem,2.15vw,1.75rem);
  font-weight:950;
  letter-spacing:1.8px;
  line-height:1.15;
  margin-bottom:14px;
  color:#9bb7ff;
  text-shadow:0 0 22px rgba(96,112,255,.38);
}
@media(max-width:640px){.contact-headquarters-kicker{font-size:1.05rem;letter-spacing:1.25px}}

/* V54: larger footer vans, fully contained with breathing room */
.footer-showcase{grid-template-columns:minmax(260px,1.28fr) minmax(390px,1.72fr) minmax(260px,1.28fr)!important;gap:8px!important;padding-left:18px!important;padding-right:18px!important;overflow:visible!important}
.footer-van-wrap{overflow:visible!important;padding:0!important;min-width:0!important}
.footer-van-left{justify-content:flex-start!important}
.footer-van-right{justify-content:flex-end!important}
.footer-van-left img,.footer-van-right img{width:min(100%,520px)!important;max-width:520px!important;height:auto!important;object-fit:contain!important;transform:translateY(10px)!important;filter:drop-shadow(0 18px 28px rgba(0,0,0,.4))!important}
@media(max-width:1100px){.footer-showcase{grid-template-columns:minmax(220px,1.15fr) minmax(360px,1.6fr) minmax(220px,1.15fr)!important;padding-left:12px!important;padding-right:12px!important}.footer-van-left img,.footer-van-right img{width:min(100%,460px)!important}}
@media(max-width:720px){.footer-showcase{grid-template-columns:1fr 1fr!important;padding-left:10px!important;padding-right:10px!important}.footer-center{grid-column:1/-1!important;grid-row:1!important}.footer-van-wrap{grid-row:2!important;justify-content:center!important}.footer-van-left img,.footer-van-right img{width:100%!important;max-width:340px!important;transform:translateY(6px)!important}}

/* V55 — independent living gradients across grouped cards */
@keyframes srGradientA{0%{background-position:0% 20%}50%{background-position:100% 80%}100%{background-position:0% 20%}}
@keyframes srGradientB{0%{background-position:100% 0%}45%{background-position:15% 100%}100%{background-position:100% 0%}}
@keyframes srGradientC{0%{background-position:0% 100%}55%{background-position:100% 15%}100%{background-position:0% 100%}}
@keyframes srGradientD{0%{background-position:80% 100%}50%{background-position:20% 0%}100%{background-position:80% 100%}}

/* Covers the site's repeating small-card families */
.offer-card,.interactive-card,.inspection-item,.timeline-card,.about-value,.prompt-card,.contact-info-card,.cost-card,.solar-benefit,.layer-item,.service-card,.warning-card,
[class*="material"] .card,[class*="grid"]>.card{
  background-image:linear-gradient(125deg,#081a3b 0%,#123a82 30%,#512b83 57%,#0a58a8 78%,#081a3b 100%)!important;
  background-size:320% 320%!important;
  animation:srGradientA 10s ease-in-out infinite!important;
  border-color:rgba(126,171,255,.32)!important;
}
.offer-card:nth-child(2n),.interactive-card:nth-child(2n),.inspection-item:nth-child(2n),.timeline-card:nth-child(2n),.about-value:nth-child(2n),.prompt-card:nth-child(2n),.contact-info-card:nth-child(2n),.cost-card:nth-child(2n),.solar-benefit:nth-child(2n),.layer-item:nth-child(2n),.service-card:nth-child(2n),.warning-card:nth-child(2n),[class*="grid"]>.card:nth-child(2n){animation-name:srGradientB!important;animation-duration:13s!important}
.offer-card:nth-child(3n),.interactive-card:nth-child(3n),.inspection-item:nth-child(3n),.timeline-card:nth-child(3n),.about-value:nth-child(3n),.prompt-card:nth-child(3n),.contact-info-card:nth-child(3n),.cost-card:nth-child(3n),.solar-benefit:nth-child(3n),.layer-item:nth-child(3n),.service-card:nth-child(3n),.warning-card:nth-child(3n),[class*="grid"]>.card:nth-child(3n){animation-name:srGradientC!important;animation-duration:16s!important}
.offer-card:nth-child(4n),.interactive-card:nth-child(4n),.inspection-item:nth-child(4n),.timeline-card:nth-child(4n),.about-value:nth-child(4n),.prompt-card:nth-child(4n),.contact-info-card:nth-child(4n),.cost-card:nth-child(4n),.solar-benefit:nth-child(4n),.layer-item:nth-child(4n),.service-card:nth-child(4n),.warning-card:nth-child(4n),[class*="grid"]>.card:nth-child(4n){animation-name:srGradientD!important;animation-duration:19s!important}

/* Keep the 40-year headline on one desktop line */
.about-section .section-title{font-size:clamp(1.7rem,2.45vw,2.85rem)!important;white-space:nowrap!important;letter-spacing:-.035em!important}
@media(max-width:900px){.about-section .section-title{white-space:normal!important}}
@media(prefers-reduced-motion:reduce){.offer-card,.interactive-card,.inspection-item,.timeline-card,.about-value,.prompt-card,.contact-info-card,.cost-card,.solar-benefit,.layer-item,.service-card,.warning-card,[class*="grid"]>.card{animation:none!important}}

/* V56 — moving color lives on CARD BORDERS, not just the card fill */
@keyframes srBorderA{0%{background-position:0 0,0% 50%}50%{background-position:0 0,100% 50%}100%{background-position:0 0,0% 50%}}
@keyframes srBorderB{0%{background-position:0 0,100% 0%}50%{background-position:0 0,0% 100%}100%{background-position:0 0,100% 0%}}
@keyframes srBorderC{0%{background-position:0 0,0% 100%}50%{background-position:0 0,100% 0%}100%{background-position:0 0,0% 100%}}
@keyframes srBorderD{0%{background-position:0 0,50% 0%}33%{background-position:0 0,100% 100%}66%{background-position:0 0,0% 70%}100%{background-position:0 0,50% 0%}}

.offer-card,.interactive-card,.inspection-item,.timeline-card,.about-value,.prompt-card,.contact-info-card,.cost-card,.solar-benefit,.layer-item,.service-card,.warning-card,
.property-types span,.hero-roof-choice,[class*="material"] .card,[class*="grid"]>.card{
  border:2px solid transparent!important;
  background-image:linear-gradient(135deg,rgba(8,20,49,.97),rgba(18,34,78,.96)),linear-gradient(110deg,#168bff,#6b52ff,#b343ff,#00c8ff,#168bff)!important;
  background-origin:border-box!important;
  background-clip:padding-box,border-box!important;
  background-size:100% 100%,320% 320%!important;
  animation:srBorderA 6.5s linear infinite!important;
  box-shadow:0 12px 34px rgba(0,0,0,.2),0 0 18px rgba(76,103,255,.12)!important;
}
.offer-card:nth-child(2n),.interactive-card:nth-child(2n),.inspection-item:nth-child(2n),.timeline-card:nth-child(2n),.about-value:nth-child(2n),.prompt-card:nth-child(2n),.contact-info-card:nth-child(2n),.cost-card:nth-child(2n),.solar-benefit:nth-child(2n),.layer-item:nth-child(2n),.service-card:nth-child(2n),.warning-card:nth-child(2n),.property-types span:nth-child(2n),.hero-roof-choice:nth-child(2n),[class*="grid"]>.card:nth-child(2n){animation-name:srBorderB!important;animation-duration:8.2s!important}
.offer-card:nth-child(3n),.interactive-card:nth-child(3n),.inspection-item:nth-child(3n),.timeline-card:nth-child(3n),.about-value:nth-child(3n),.prompt-card:nth-child(3n),.contact-info-card:nth-child(3n),.cost-card:nth-child(3n),.solar-benefit:nth-child(3n),.layer-item:nth-child(3n),.service-card:nth-child(3n),.warning-card:nth-child(3n),.property-types span:nth-child(3n),[class*="grid"]>.card:nth-child(3n){animation-name:srBorderC!important;animation-duration:10.4s!important}
.offer-card:nth-child(4n),.interactive-card:nth-child(4n),.inspection-item:nth-child(4n),.timeline-card:nth-child(4n),.about-value:nth-child(4n),.prompt-card:nth-child(4n),.contact-info-card:nth-child(4n),.cost-card:nth-child(4n),.solar-benefit:nth-child(4n),.layer-item:nth-child(4n),.service-card:nth-child(4n),.warning-card:nth-child(4n),[class*="grid"]>.card:nth-child(4n){animation-name:srBorderD!important;animation-duration:12.6s!important}

/* V56 — force the 40-year headline onto ONE desktop line */
#about .section-title{font-size:clamp(1.22rem,1.45vw,1.72rem)!important;line-height:1.08!important;letter-spacing:-.035em!important;white-space:nowrap!important;max-width:none!important}
#about .section-title .headline-finish{display:inline!important}
@media(max-width:900px){#about .section-title{font-size:clamp(1.45rem,5.5vw,2.35rem)!important;white-space:normal!important}}
@media(prefers-reduced-motion:reduce){.offer-card,.interactive-card,.inspection-item,.timeline-card,.about-value,.prompt-card,.contact-info-card,.cost-card,.solar-benefit,.layer-item,.service-card,.warning-card,.property-types span,.hero-roof-choice,[class*="material"] .card,[class*="grid"]>.card{animation:none!important}}

/* V57 — fast, clearly visible moving gradient borders on every grouped control/card */
@property --sr-angle { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes srRingSpin { to { --sr-angle:360deg; } }
@keyframes srRingSpinReverse { to { --sr-angle:-360deg; } }
@keyframes srRingPulse { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.35)} }

/* Include previously blank families shown in cost, roof layers, and repair/replace */
.offer-card,.interactive-card,.inspection-item,.timeline-card,.about-value,.prompt-card,.contact-info-card,.cost-card,.solar-benefit,.layer-item,.service-card,.warning-card,
.expand-chip,.accordion-item,.tab-button,.tab-panel,.mini-check-grid>div,.mini-check-grid>span,.trust-box,.expect-grid>div,.signal-item,
.property-types span,.hero-roof-choice,[class*="material"] .card,[class*="grid"]>.card{
  position:relative!important;
  border:2px solid transparent!important;
  background:
    linear-gradient(135deg,rgba(8,20,49,.98),rgba(18,34,78,.97)) padding-box,
    conic-gradient(from var(--sr-angle),#00d5ff,#176dff,#7b4dff,#d24cff,#6a5cff,#00d5ff) border-box!important;
  animation:srRingSpin 2.8s linear infinite!important;
  box-shadow:0 10px 28px rgba(0,0,0,.22),0 0 15px rgba(74,102,255,.2)!important;
}
/* Different neighboring motion patterns/speeds */
.offer-card:nth-child(2n),.interactive-card:nth-child(2n),.inspection-item:nth-child(2n),.timeline-card:nth-child(2n),.about-value:nth-child(2n),.prompt-card:nth-child(2n),.contact-info-card:nth-child(2n),.cost-card:nth-child(2n),.solar-benefit:nth-child(2n),.layer-item:nth-child(2n),.service-card:nth-child(2n),.warning-card:nth-child(2n),.expand-chip:nth-child(2n),.accordion-item:nth-child(2n),.tab-button:nth-child(2n),.mini-check-grid>*:nth-child(2n),.property-types span:nth-child(2n),[class*="grid"]>.card:nth-child(2n){animation:srRingSpinReverse 2.15s linear infinite!important}
.offer-card:nth-child(3n),.interactive-card:nth-child(3n),.inspection-item:nth-child(3n),.timeline-card:nth-child(3n),.about-value:nth-child(3n),.prompt-card:nth-child(3n),.contact-info-card:nth-child(3n),.cost-card:nth-child(3n),.solar-benefit:nth-child(3n),.layer-item:nth-child(3n),.service-card:nth-child(3n),.warning-card:nth-child(3n),.expand-chip:nth-child(3n),.accordion-item:nth-child(3n),.mini-check-grid>*:nth-child(3n),[class*="grid"]>.card:nth-child(3n){animation:srRingSpin 3.55s linear infinite!important}
.offer-card:nth-child(4n),.interactive-card:nth-child(4n),.inspection-item:nth-child(4n),.timeline-card:nth-child(4n),.about-value:nth-child(4n),.prompt-card:nth-child(4n),.contact-info-card:nth-child(4n),.cost-card:nth-child(4n),.solar-benefit:nth-child(4n),.layer-item:nth-child(4n),.service-card:nth-child(4n),.warning-card:nth-child(4n),.expand-chip:nth-child(4n),.accordion-item:nth-child(4n),.mini-check-grid>*:nth-child(4n),[class*="grid"]>.card:nth-child(4n){animation:srRingSpinReverse 4.1s linear infinite!important}

/* Active repair/replace remains bright while its border keeps moving */
#decision .tab-button.active{background:linear-gradient(135deg,#087dff,#744dff,#d35cff) padding-box,conic-gradient(from var(--sr-angle),#00e5ff,#2670ff,#8c4dff,#ff56d8,#00e5ff) border-box!important}

/* Guaranteed one-line desktop headline inside the actual About panel */
#about .about-shell .section-title{font-size:clamp(1.12rem,1.58vw,1.52rem)!important;line-height:1.05!important;letter-spacing:-.045em!important;white-space:nowrap!important;width:100%!important;max-width:100%!important;overflow:visible!important}
#about .about-shell .section-title .headline-finish{display:inline!important}
@media(max-width:900px){#about .about-shell .section-title{font-size:clamp(1.35rem,5vw,2.15rem)!important;white-space:normal!important}}

/* Bigger footer vans, but keep every pixel inside the footer */
.footer{overflow:hidden!important}
.footer-showcase{grid-template-columns:minmax(310px,1.38fr) minmax(390px,1.45fr) minmax(310px,1.38fr)!important;gap:0!important;padding:0 34px 0!important;overflow:visible!important}
.footer-van-wrap{overflow:visible!important;min-width:0!important}
.footer-van-left{justify-content:flex-start!important;padding-left:22px!important}
.footer-van-right{justify-content:flex-end!important;padding-right:22px!important}
.footer-van-left img,.footer-van-right img{width:min(100%,590px)!important;max-width:590px!important;transform:translateY(8px)!important;object-fit:contain!important;object-position:center bottom!important}
@media(max-width:1100px){.footer-showcase{grid-template-columns:minmax(250px,1.2fr) minmax(360px,1.45fr) minmax(250px,1.2fr)!important;padding:0 24px!important}.footer-van-left img,.footer-van-right img{max-width:500px!important}}
@media(max-width:720px){.footer-showcase{grid-template-columns:1fr 1fr!important;padding:0 14px!important}.footer-center{grid-column:1/-1!important}.footer-van-left,.footer-van-right{justify-content:center!important;padding:0 8px!important}.footer-van-left img,.footer-van-right img{max-width:360px!important}}

/* V58 — ensure hero 40 is never clipped */
.hero--bg .experience-stat{
  grid-template-columns:132px minmax(0,1fr)!important;
  padding-left:30px!important;
  overflow:visible!important;
}
.hero--bg .experience-stat-number{
  display:block!important;
  width:100%!important;
  min-width:118px!important;
  padding:8px 10px 8px 8px!important;
  margin-left:0!important;
  font-size:clamp(3rem,4.6vw,4.55rem)!important;
  line-height:1!important;
  letter-spacing:-2px!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
@media(max-width:620px){
  .hero--bg .experience-stat{grid-template-columns:96px minmax(0,1fr)!important;padding-left:18px!important}
  .hero--bg .experience-stat-number{min-width:88px!important;font-size:3rem!important;padding-left:4px!important}
}

/* V59 — What We Offer crew background */
.offer-section{
  background-image:linear-gradient(90deg,rgba(5,14,35,.12) 0%,rgba(7,17,43,.64) 34%,rgba(8,18,46,.72) 50%,rgba(7,17,43,.64) 66%,rgba(5,14,35,.12) 100%),url('what-we-offer-crew-background.png') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
.offer-section:before{background:linear-gradient(90deg,rgba(6,15,36,.04),rgba(20,25,75,.18) 43%,rgba(20,25,75,.18) 57%,rgba(6,15,36,.04)) !important;}
.offer-section .offer-shell{background:rgba(7,17,43,.78) !important;}
.offer-section .offer-roof-comparison{display:none !important;}
@media (max-width:900px){
  .offer-section{background-position:center center !important;}
  .offer-section .offer-shell{background:rgba(7,17,43,.86) !important;}
}

/* V60 footer van layout fix: keep both vans fully visible and balanced */
.footer{overflow:hidden!important}
.footer-showcase{
  width:min(96vw,1680px)!important;
  max-width:none!important;
  margin:0 auto!important;
  grid-template-columns:minmax(330px,1.2fr) minmax(430px,1.5fr) minmax(330px,1.2fr)!important;
  gap:24px!important;
  padding:34px 42px 22px!important;
  align-items:end!important;
  box-sizing:border-box!important;
}
.footer-van-wrap{min-width:0!important;overflow:visible!important;padding:0!important}
.footer-van-left{justify-content:flex-start!important}
.footer-van-right{justify-content:flex-end!important}
.footer-van-left img,.footer-van-right img{
  width:min(100%,500px)!important;
  max-width:500px!important;
  height:auto!important;
  transform:none!important;
  object-fit:contain!important;
  object-position:center bottom!important;
}
@media(max-width:1200px){
 .footer-showcase{width:98vw!important;grid-template-columns:minmax(260px,1.05fr) minmax(390px,1.45fr) minmax(260px,1.05fr)!important;padding-left:28px!important;padding-right:28px!important;gap:16px!important}
 .footer-van-left img,.footer-van-right img{width:min(100%,440px)!important}
}
@media(max-width:820px){
 .footer-showcase{grid-template-columns:1fr 1fr!important;padding:26px 16px 14px!important;gap:8px!important}
 .footer-center{grid-column:1/-1!important;grid-row:1!important}
 .footer-van-wrap{grid-row:2!important;justify-content:center!important}
 .footer-van-left img,.footer-van-right img{width:100%!important;max-width:320px!important}
}

/* V61 — clean right footer van: remove stray clipped fragment and favor right blank space */
.footer-van-right{justify-content:flex-end!important;padding-right:6px!important}
.footer-van-right img{object-position:right bottom!important}

/* V64 — keep the entire RIGHT footer van inside the visible footer */
.footer{overflow:hidden!important;}
.footer-showcase{padding-right:64px!important;}
.footer-van-right{
  justify-content:flex-end!important;
  padding-right:28px!important;
  overflow:visible!important;
}
.footer-van-right img{
  width:min(100%,445px)!important;
  max-width:445px!important;
  height:auto!important;
  transform:translateX(-10px)!important;
  object-fit:contain!important;
  object-position:right bottom!important;
}
@media(max-width:1200px){
  .footer-showcase{padding-right:42px!important;}
  .footer-van-right{padding-right:16px!important;}
  .footer-van-right img{width:min(100%,400px)!important;transform:translateX(-6px)!important;}
}
@media(max-width:820px){
  .footer-showcase{padding-right:16px!important;}
  .footer-van-right{padding-right:8px!important;justify-content:center!important;}
  .footer-van-right img{width:100%!important;max-width:300px!important;transform:none!important;}
}