/* V3 colour study. Layout, media and interaction remain the approved V2. */
:root{--paper:#F6F3EC;--ink:#18313C;--muted:#53636A;--line:#D6DAD5;--cyan:#0F6E80;--surface-shadow:0 18px 36px -18px #243A4033,0 5px 12px -6px #243A4024,inset 0 1px 0 #FFFFFF; color-scheme:light}
h1,h2,.package h3,form h3{text-shadow:0 1px 1px #FFFFFF80}
header,header.is-scrolled{background:#FAF9F5f5;color:var(--ink);backdrop-filter:blur(12px);box-shadow:0 2px 12px #243A4010}
.nav{border-bottom-color:#18313C12}.phone span{color:var(--muted)}
.hero{background:#364B50;--cyan:#80DDEC}
.hero:after{background:linear-gradient(90deg,#142C369e,#142C3618 78%),linear-gradient(0deg,#142C367a,transparent 48%)}
.hero h1{text-shadow:0 2px 20px #040E1AD9,0 1px 3px #040E1A99}
.hero-offer{background:#19333B85}
/* One glass material for every trust card, including the Google card. */
.trust-strip .trust-card{background:linear-gradient(135deg,#FFFFFF80,#FFFFFF0D 58%,#BED7CB38),#E7EEE9;border:1px solid #FFFFFFB3;box-shadow:0 14px 26px -16px #18313C66,0 4px 10px -6px #18313C33,inset 0 1px 0 #FFFFFF,inset 1px 0 0 #FFFFFF80,inset 0 -1px 0 #92B1A64D}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .trust-strip .trust-card{background:linear-gradient(135deg,#FFFFFF80,#FFFFFF0D 58%,#BED7CB38),#E7EEE9D9;-webkit-backdrop-filter:blur(20px) saturate(110%);backdrop-filter:blur(20px) saturate(110%)}
}
.trust-strip .trust-card p{color:#3D5159}
@media(prefers-reduced-transparency:reduce){.trust-strip .trust-card{background:linear-gradient(135deg,#FFFFFF80,#FFFFFF0D 58%,#BED7CB38),#E7EEE9;-webkit-backdrop-filter:none;backdrop-filter:none}}
.package,.package.featured,.package.storage{background:#FFFFFF;border-color:#D2D9D5}
.package.featured{border-color:#0F6E80}
.package-purchase{background:#F0F2ED;border-top-color:#D6DAD5}
.package-visual.product-bundle img{filter:url(#product-navy-key) drop-shadow(0 5px 5px #18313C26)}
@media(hover:hover) and (pointer:fine){.package:hover,.unsure:hover{border-color:#0F6E80;box-shadow:0 24px 40px -18px #243A4047,0 6px 16px -8px #243A4033,inset 0 1px 0 #FFFFFF}}
.storage-photo,.team-photo{outline-color:#18313C12}
form{background:#FFFFFF;border-color:#D2D9D5}
input,select,textarea{background:#FAFBF8;border-color:#9DAFAF;color:var(--ink)}
input::placeholder,textarea::placeholder{color:#607179}
.bill-attachment input::file-selector-button{background:#E4EFEC;color:var(--ink)}
.bill-remove{color:var(--teal)}.demo-result{background:#E9F2ED}.file-error{color:#A12D16}
.reviews{background-color:#EBEEE6;border-color:#D2D9D5;background-image:linear-gradient(90deg,#F6F3ECF2 0%,#F6F3ECA3 48%,#F6F3EC33),linear-gradient(0deg,#F6F3ECF5,transparent 75%),url('assets/review-installer-customer.webp')}
.reviews .review-rating>span:last-child{color:#46585F}
.reviews .review-card{background:#FFFFFFF5;border-color:#CDD7D2;box-shadow:0 12px 24px -12px #243A4033,inset 0 1px 0 #FFFFFF}
.review-avatar{background:#E5F0EC;color:#0F6E80}
.review-controls button{background:#FFFFFF;color:var(--teal);border-color:#A8BEBC;box-shadow:0 2px 6px #243A4010}
.review-controls button:hover:not(:disabled){background:#E5F0EC;border-color:#0F6E80}
.faq{border-color:#D2D9D5;background-image:linear-gradient(100deg,#F6F3EC80 0%,#F6F3ECB3 48%,#F6F3ECD6 100%),url('assets/roof-film-regenerated-poster.webp')}
.faq-list p{color:#3D5159}
footer.wrap{background:#EAEDE5;color:var(--ink)}
.footer-top p,.footer-terms,.footer-bottom{color:#53636A}
.footer-terms,.footer-bottom{border-top-color:#CAD3CD}
.mobile-bar{background:#FAF9F5F5;border-top-color:#D2D9D5;color:var(--ink);box-shadow:0 -3px 18px #243A4012}
@media(max-width:760px){
 .hero:after{background:linear-gradient(90deg,#142C36AA,#142C3635),linear-gradient(0deg,#142C3677,transparent 65%)}
 .reviews{background-image:linear-gradient(180deg,#F6F3ECD6,#F6F3EC99 230px,#F6F3ECEB 380px,#F6F3EC 470px),url('assets/review-installer-customer.webp')}
 .faq{background-image:linear-gradient(180deg,#F6F3EC85,#F6F3ECB3 40%,#F6F3ECD1),url('assets/roof-film-regenerated-poster.webp')}
}
/* Original dark wordmark includes transparent export padding. Match V2's visible logo size. */
.logo{width:263px;margin-left:-44px;margin-right:-36px}
.footer-top img{width:259px;margin-left:-43px;margin-right:-36px}
@media(max-width:760px){.logo{width:217px;margin-left:-36px;margin-right:-30px}.footer-top img{width:226px;margin-left:-38px;margin-right:-31px}}
@media(max-width:370px){.logo{width:190px;margin-left:-32px;margin-right:-26px}}
.logo,.footer-top img{max-width:none}

/* Transparent hero navigation, switching to ivory as soon as the page scrolls. */
header:not(.is-scrolled){background:transparent;color:#FFFFFF;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
header:not(.is-scrolled) .nav{border-bottom-color:#FFFFFF25}
header:not(.is-scrolled) .phone>span{color:#DCE5EB}
header:not(.is-scrolled) .phone .phone-number{color:#FFFFFF}
header:not(.is-scrolled) .phone-icon{color:#80DDEC}
header:not(.is-scrolled) nav,header:not(.is-scrolled) .phone{text-shadow:0 1px 5px #142C36AA}
.header-brand{position:relative;display:block;width:183px;height:42px}
.header-brand .logo{position:absolute;left:0;top:50%;transform:translateY(-50%)}
.header-brand .logo-light{display:block;width:183px;margin:0}
.header-brand .logo-dark{display:none}
header.is-scrolled .logo-light{display:none}
header.is-scrolled .logo-dark{display:block}
@media(max-width:760px){.header-brand{width:151px;height:35px}.header-brand .logo-light{width:151px}}
@media(max-width:370px){.header-brand{width:132px;height:31px}.header-brand .logo-light{width:132px}}

/* Match the ivory package surfaces for the undecided-visitor card. */
.unsure{background:#FFFFFF;border-color:#D2D9D5}