/* Site-wide design layer v2: clean, tinted page, white bordered cards, photo-led. Same font (Cairo), same navy + orange. Loads after every other stylesheet. */
:root{--bg:#f1f4f8;--surface:#fff;--card:#fff;--band2:#e6ecf3;--line:#cfd7e1;--field:#9eacbc;--muted:#3f5165;--tint:#ffe0cb;--shadow:0 1px 2px rgba(20,40,60,.10),0 10px 26px rgba(20,40,60,.10);
--page-ink:#14283c;--page-muted:#3f5165;--page-surface:#fff;--page-line:#cfd7e1;--page-accent:#c2410c}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--card:#172637;--band2:#0c1723;--field:#3a5068;--tint:rgba(255,122,46,.14);--shadow:none;--page-ink:#f1efe9;--page-muted:#a3b2c2;--page-surface:#172637;--page-line:#2a3d52;--page-accent:#ff7a2e}}
:root[data-theme="dark"]{--card:#172637;--band2:#0c1723;--field:#3a5068;--tint:rgba(255,122,46,.14);--shadow:none;--page-ink:#f1efe9;--page-muted:#a3b2c2;--page-surface:#172637;--page-line:#2a3d52;--page-accent:#ff7a2e}

header{background:var(--card);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}
.tape{display:none}
.btn{border-radius:14px}
.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--ink)}
.btn.wa,.hero .cta .btn.wa{background:#168a3f;color:#fff;border-color:#168a3f}

/* titles */
h2.t::before{content:"";display:block;width:34px;height:4px;border-radius:4px;background:var(--accent);margin-bottom:14px}
.sub{font-size:18px;line-height:1.8;color:var(--muted)}
.crumb{color:var(--muted);font-size:14px}
.crumb a{color:var(--muted);text-decoration:none;font-weight:600}
.crumb a:hover{color:var(--accent-text)}

/* hero (light) */
.hero{background:var(--bg);color:var(--page-ink);--ink:var(--page-ink);--muted:var(--page-muted);--surface:var(--page-surface);--line:var(--page-line);--accent-text:var(--page-accent)}
.hero .lead2,.hero .lead{color:var(--muted)}
.hero .kicker{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:0;font-size:15px;font-weight:700;color:var(--accent-text)}
.hero .kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.hero .svcline{color:var(--ink);font-weight:700}
.hero .btn:not(.wa):not(.ghost){background:var(--accent);color:#14283c;border-color:var(--accent)}
.hero h1{letter-spacing:-.3px}
.hero .ticks li{font-weight:700}

/* panels and cards */
.band{background:var(--band2);color:var(--ink)}
.band .sub{color:var(--muted)}
.band .btn.ghost{background:var(--card);color:var(--ink);border-color:var(--ink)}
#contact.band{background:var(--band);color:var(--band-ink)}
#contact.band .sub{color:color-mix(in srgb,var(--band-ink) 72%,transparent)}
#contact.band .btn.ghost,.band.dark .btn.ghost{background:transparent;color:var(--band-ink);border-color:var(--band-ink)}
.card,.rv{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:28px}
.grid .card .ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--tint);color:var(--accent-text);font-size:24px;margin-bottom:16px}
.grid .card h3{font-size:19px}
.grid .card p{font-size:15.5px}
.card.quote{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:36px}
.card.warranty{border:1px solid var(--line);border-inline-start:5px solid var(--accent)}
.photo,.af img{border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow)}

/* forms */
input,select,textarea{background:var(--card);border:1px solid var(--field);border-radius:12px;padding:13px 14px}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 4px var(--tint)}
.quote .btn{min-height:54px;font-size:18px}

/* lists, faq, chips */
.why{gap:8px 56px}
.why div{border-bottom:0;border-top:1px solid var(--field);padding:20px 0 14px}
.why b{font-size:19px;margin-bottom:2px}
details{background:transparent;border:0;border-bottom:1px solid var(--field);border-radius:0;margin:0}
summary{padding:20px 4px;font-size:18px}
summary::after{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--tint);flex:none;font-size:20px}
details p{padding:0 4px 20px;color:var(--muted)}
.chips li{background:var(--card);border:1px solid var(--line);padding:8px 20px;box-shadow:0 1px 2px rgba(20,40,60,.06)}
.chips li.all{background:var(--accent);border-color:var(--accent)}

/* guide articles */
.art p,.art li{line-height:1.95}
.art a:not(.btn){color:var(--accent-text);text-decoration-thickness:2px;text-underline-offset:3px}
.af{margin-inline:0}
.af figcaption{color:var(--muted);font-size:14px;margin-top:8px}

footer{background:var(--card);color:var(--muted);border-top:1px solid var(--line)}

@media (min-width:861px){
.hero{padding:64px 0 56px}
.hero h1{font-size:clamp(34px,4.4vw,54px);line-height:1.2}
section{padding:80px 0}
section[style*="padding-top:0"]{padding-top:0!important}
}
@media (max-width:860px){.card.quote{padding:22px;border-radius:22px}}
/* light band on inner pages: inline band-ink (white) made the call button invisible */
.band:not(#contact):not(.dark) .btn.ghost[style]{color:var(--ink)!important;border-color:var(--ink)!important}
/* dark contact band: readable orange on hover (dark orange failed contrast on navy) */
#contact.band a[href^="tel:"]:not(.btn):hover,#contact.band a[href^="mailto:"]:hover,#contact.band a[href^="https://wa.me"]:not(.btn):hover{color:var(--accent)}

/* quote form on phones: one field per row (the two floors stay side by side), consistent heights, no clipped text */
@media (max-width:560px){
#qf .two{grid-template-columns:1fr;gap:0}
#qf .two:nth-of-type(3){grid-template-columns:1fr 1fr;gap:10px}
#qf .two>div{margin-bottom:12px;min-width:0}
#qf label{display:block;margin-bottom:6px;font-size:14px;line-height:1.4}
#qf input:not([type=checkbox]),#qf select{width:100%;min-height:48px;font-size:16px;padding:10px 12px;box-sizing:border-box;text-overflow:ellipsis}
#qf input[type=date]{font-size:16px;-webkit-appearance:none;appearance:none;text-align:start;display:block}
#qf fieldset{margin:4px 0 14px}
#qf .checks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#qf .checks label{display:flex;align-items:center;gap:8px;margin:0;font-size:15px}
}