/* Geist-inspired foundations, adapted to FASCIACLAD. */
:root{
 --background:#fafafa;--foreground:#171717;--card:#fff;--secondary:#f2f2f2;
 --muted-foreground:#666;--border:#e5e5e5;--primary:#a96b42;--ink:#171717;--ink-foreground:#fafafa;
 --ds-radius:6px;--ds-shadow:0 1px 2px #0000000a;
 --ds-font:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
 --ds-space-1:4px;--ds-space-2:8px;--ds-space-3:12px;--ds-space-4:16px;--ds-space-6:24px;--ds-space-8:32px;
}
body{font-family:var(--ds-font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,.button,button,.number,.eyebrow,.customer-group>legend,.address-group>legend{font-family:var(--ds-font)}
h1,h2{font-weight:600;letter-spacing:-.045em;line-height:1.12}h3{font-weight:600;letter-spacing:-.02em}
h1{font-size:clamp(36px,4.7vw,64px)}h2{font-size:clamp(28px,3vw,40px)}
p{line-height:1.65}.intro{font-size:18px;line-height:1.65}.eyebrow{font-size:12px;font-weight:600;letter-spacing:.1em}
header{border-color:var(--border)}header nav{gap:24px;font-size:14px;font-weight:500}
header nav a{border-radius:var(--ds-radius)}header nav a:hover,header nav a:focus-visible{background:var(--secondary);box-shadow:0 0 0 6px var(--secondary)}
header nav a[aria-current]{color:#8c5734;border-bottom-color:#c89b79}
.button,button,.button.outline:not(.contact-phone):not(.contact-whatsapp){font-family:var(--ds-font);font-size:14px;font-weight:500;line-height:20px;gap:8px;padding:11px 18px;min-height:44px;border-radius:var(--ds-radius);box-shadow:var(--ds-shadow)}
.button:not(.outline):not(.contact-whatsapp),button:not(.outline):not(.contact-whatsapp),.button.contact-phone,button.contact-phone,.band .button,footer .button.footer-contact.contact-phone{background:#fffaf6;border-color:#d4b69f;color:#69472f;box-shadow:var(--ds-shadow)}
.button:not(.outline):not(.contact-whatsapp):hover,button:not(.outline):not(.contact-whatsapp):hover,.button.contact-phone:hover,button.contact-phone:hover,.band .button:hover,footer .button.footer-contact.contact-phone:hover{background:#f6e9de;border-color:#be9677;color:#543b29;box-shadow:var(--ds-shadow)}
.button.outline:not(.contact-phone):not(.contact-whatsapp){background:var(--card);border-color:#d6d6d6;color:var(--foreground)}
.button.outline:not(.contact-phone):not(.contact-whatsapp):hover{background:var(--secondary);border-color:#c7c7c7}
.hero-secondary.button.outline,.home-hero .hero-secondary{background:#ffffff12;color:white;border-color:#ffffff80}
.button:active,button:active{transform:translateY(1px)}
.button:disabled,button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #a96b42;outline-offset:3px}
.card,.panel,.home-services .card,.roofline-pair figure{background:var(--card);border-color:var(--border);border-radius:8px;box-shadow:var(--ds-shadow)}
.address-group{background:#fafafa;border-color:var(--border);border-radius:8px}
input:not([type=radio]):not([type=checkbox]),textarea{font-family:var(--ds-font);font-size:16px;color:var(--foreground);background:var(--card);border:1px solid #d6d6d6;border-radius:var(--ds-radius);box-shadow:var(--ds-shadow);min-height:44px}
input:not([type=radio]):not([type=checkbox]):hover,textarea:hover{border-color:#b5b5b5}
label,legend{font-size:14px;font-weight:500}.hint{font-size:13px;line-height:1.5}
.types label{border-radius:var(--ds-radius);border-color:var(--border);background:white}
.types label:has(:checked){background:#fbf1e8;border-color:#c89b79;color:#69472f}
.home-proof{background:#f6eee7;color:#69472f;border-bottom:1px solid #ead9ca}
.detail-section{background:#f5f5f5}.home-proof span{color:inherit}
@media(max-width:600px){header nav{gap:20px}.wrap{padding-top:40px;padding-bottom:40px}.contact-grid{padding-top:0}.panel{padding:24px}.intro{font-size:16px}}
@media(max-width:360px){header nav{gap:12px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.button:active,button:active{transform:none}}

/* Primary actions: soft orange gradient, with accessible dark labels. */
.button:not(.outline):not(.contact-whatsapp),button:not(.outline):not(.contact-whatsapp),.button.contact-phone,button.contact-phone,.band .button,footer .button.footer-contact.contact-phone{
 background:linear-gradient(180deg,#ffd8b5 0%,#f2aa72 100%);border-color:#d99a6a;color:#4b2f1d;box-shadow:inset 0 1px 0 #ffffff80,0 1px 2px #0000000d;
}
.button:not(.outline):not(.contact-whatsapp):hover,button:not(.outline):not(.contact-whatsapp):hover,.button.contact-phone:hover,button.contact-phone:hover,.band .button:hover,footer .button.footer-contact.contact-phone:hover{
 background:linear-gradient(180deg,#ffd0a5 0%,#eca064 100%);border-color:#c8895b;color:#4b2f1d;box-shadow:inset 0 1px 0 #ffffff66,0 2px 4px #00000012;
}

/* Navigation: grey hover, orange current page, no underline. */
header nav a{border-bottom:0;text-decoration:none}
header nav a:hover,header nav a:focus-visible{border-bottom:0;text-decoration:none}
header nav a[aria-current],header nav a[aria-current]:hover,header nav a[aria-current]:focus-visible,header nav a:active{
 background:linear-gradient(180deg,#ffd8b5 0%,#f2aa72 100%);color:#4b2f1d;border-bottom:0;box-shadow:0 0 0 6px #f5b986;text-decoration:none;
}

/* WhatsApp actions match the soft primary gradient in green. */
.button.contact-whatsapp,button.contact-whatsapp,footer .button.footer-contact.contact-whatsapp,.photo-help .photo-whatsapp{
 background:linear-gradient(180deg,#d2efdb 0%,#98d4ae 100%);border:1px solid #78b98e;color:#16472a;box-shadow:inset 0 1px 0 #ffffff80,0 1px 2px #0000000d;
}
.button.contact-whatsapp .contact-icon,button.contact-whatsapp .contact-icon,.photo-help .photo-whatsapp .contact-icon{color:#166534}
.button.contact-whatsapp:hover,button.contact-whatsapp:hover,footer .button.footer-contact.contact-whatsapp:hover,.photo-help .photo-whatsapp:hover{
 background:linear-gradient(180deg,#c3e8cf 0%,#86c99e 100%);border-color:#63a87a;color:#16472a;box-shadow:inset 0 1px 0 #ffffff66,0 2px 4px #00000012;
}

/* Top navigation current page: solid orange with white text. */
header nav a[aria-current],header nav a[aria-current]:hover,header nav a[aria-current]:focus-visible,header nav a:active{
 background:#b95416;color:#fff;border-bottom:0;box-shadow:0 0 0 6px #b95416;text-decoration:none;
}

/* Compact navigation highlights in the logo orange. */
header nav a{position:relative;isolation:isolate;background:transparent;box-shadow:none;border:0;min-height:44px;padding:8px 10px;line-height:20px;transition:color .16s ease}
header nav a::before{content:"";position:absolute;inset:6px 0;border-radius:6px;z-index:-1;background:transparent;transition:background-color .16s ease}
header nav a:hover,header nav a:focus-visible{background:transparent;box-shadow:none;border:0;color:var(--foreground)}
header nav a:hover::before,header nav a:focus-visible::before{background:#eeefed}
header nav a[aria-current],header nav a[aria-current]:hover,header nav a[aria-current]:focus-visible,header nav a:active{background:transparent;box-shadow:none;border:0;color:#fff}
header nav a[aria-current]::before,header nav a[aria-current]:hover::before,header nav a[aria-current]:focus-visible::before,header nav a:active::before{background:#ff650b}
@media(max-width:600px){header nav{gap:8px}header nav a{padding-inline:8px}}
@media(max-width:360px){header nav{gap:2px}header nav a{padding-inline:6px}}
@media(prefers-reduced-motion:reduce){header nav a,header nav a::before{transition:none}}

/* Preview option: primary buttons in a logo-orange gradient. */
.button:not(.outline):not(.contact-whatsapp),button:not(.outline):not(.contact-whatsapp),.button.contact-phone,button.contact-phone,.band .button,footer .button.footer-contact.contact-phone{
 background:linear-gradient(180deg,#ff853d 0%,#ff650b 100%);border-color:#ef5c06;color:#321a0b;box-shadow:inset 0 1px 0 #ffffff66,0 1px 2px #0000000d;
}
.button:not(.outline):not(.contact-whatsapp):hover,button:not(.outline):not(.contact-whatsapp):hover,.button.contact-phone:hover,button.contact-phone:hover,.band .button:hover,footer .button.footer-contact.contact-phone:hover{
 background:linear-gradient(180deg,#ff792b 0%,#ef5c06 100%);border-color:#da5100;color:#321a0b;box-shadow:inset 0 1px 0 #ffffff55,0 2px 4px #00000012;
}

/* White labels and inherited icons on orange primary actions. */
.button:not(.outline):not(.contact-whatsapp),button:not(.outline):not(.contact-whatsapp),.button.contact-phone,button.contact-phone,.band .button,footer .button.footer-contact.contact-phone,
.button:not(.outline):not(.contact-whatsapp):hover,button:not(.outline):not(.contact-whatsapp):hover,.button.contact-phone:hover,button.contact-phone:hover,.band .button:hover,footer .button.footer-contact.contact-phone:hover{color:#fff}

/* Service photo framing: focus fascia photo on the roof edge. */
.lovable-services .service-photo{width:100%;height:240px;overflow:hidden;border:1px solid var(--border);border-radius:6px;background:#f5f5f5}
.lovable-services .service-photo img{display:block;width:100%;height:100%;border:0;border-radius:0;object-fit:cover}
.lovable-services .service-photo.fascia-zoom img{transform:scale(1.65);transform-origin:62% 30%;object-position:62% 30%}
@media(max-width:800px){.lovable-services .service-photo{grid-column:2;height:auto;aspect-ratio:4/3}.lovable-services .service-photo img{height:100%;aspect-ratio:auto}}

/* Service descriptions use clean white panels. */
.home-services .card,.home-services .card>div{background:#fff;background-image:none;color:#171717}
.home-services .card h3{color:#171717}
.home-services .card p{color:#525252}
.home-services .card:last-child>img{object-fit:cover}
.lovable-services .service-photo img{transform:none;object-position:center}


/* Deep links from home cards land below the header. */
.service-row{scroll-margin-top:24px}

/* Gallery cards are buttons: keep them white, not the orange button style. */
.job-gallery .gallery-item.gallery-item{background:var(--card);background-image:none;border:1px solid var(--border);color:var(--foreground);border-radius:8px;box-shadow:var(--ds-shadow);padding:0;display:block;text-align:left}
.job-gallery .gallery-item.gallery-item:hover{background:var(--secondary);background-image:none;color:var(--foreground)}
.job-gallery .gallery-item.gallery-item span{color:var(--foreground)}

/* Hero overlay: black, darkest behind the text on the left, fading lighter to the right. */
.home-hero .hero-shade{background:linear-gradient(90deg,rgba(8,8,8,.92) 0%,rgba(8,8,8,.85) 30%,rgba(8,8,8,.55) 65%,rgba(8,8,8,.3) 100%)}
@media(max-width:800px){.home-hero .hero-shade{background:linear-gradient(90deg,rgba(8,8,8,.9) 0%,rgba(8,8,8,.75) 60%,rgba(8,8,8,.6) 100%)}}

/* Slightly shorter header: logo scaled ~12%, less vertical padding. */
header{min-height:0;padding-top:12px;padding-bottom:12px}
header>a:first-child{width:228px}
header>a:first-child img{width:360px}
@media(max-width:800px){header{padding-top:10px;padding-bottom:10px}header>a:first-child{width:170px}header>a:first-child img{width:268px}}
@media(max-width:480px){header{gap:6px}header>a:first-child{width:176px}header>a:first-child img{width:282px}}

/* Proof strip under the hero: uppercase, spaced like the eyebrow labels. */
.home-proof span{text-transform:uppercase;letter-spacing:.08em;font-size:13px}

/* Footer, rebuilt: four even columns on desktop, two on tablet, one on phones. */
footer.site-footer{display:block;background:#161616;color:#f4f3f0;padding:64px max(24px,calc((100vw - 1128px)/2)) 28px;font-size:14px}
footer.site-footer .footer-grid{display:grid;grid-template-columns:1.15fr 1fr 1.1fr .85fr;gap:48px;align-items:start}
footer.site-footer .footer-grid>*{min-width:0}
footer.site-footer h2{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#ff8a45;margin:0 0 16px}
footer.site-footer p{color:#c9c8c4;margin:0 0 10px;line-height:1.55;font-size:14px}
footer.site-footer .footer-logo-link{display:inline-block;margin:-4px 0 18px}
footer.site-footer .footer-logo-link img{display:block;width:180px;height:auto;background:none;border-radius:0;clip-path:none;margin:0;mix-blend-mode:normal}
footer.site-footer .footer-tagline{font-size:16px;font-weight:600;color:#f4f3f0;max-width:240px}
footer.site-footer .footer-coverage{margin:0;max-width:none}
footer.site-footer .footer-actions{display:flex;flex-direction:column;gap:10px}
footer.site-footer .footer-actions>p{margin:0 0 6px}
footer.site-footer .footer-contact{margin:0;min-height:48px;font-size:15px;justify-content:flex-start;gap:12px;padding:0 16px;border-radius:8px;width:100%}
footer.site-footer .button.footer-contact,footer.site-footer .button.footer-contact.contact-whatsapp,footer.site-footer .button.footer-contact:not(.contact-phone){background:transparent;background-image:none;color:#f4f3f0;border:1px solid #4a4a48;box-shadow:none}
footer.site-footer .button.footer-contact:hover{background:#ffffff10;border-color:#77756f;color:#fff}
footer.site-footer .button.footer-contact.contact-phone{background:#ff650b;background-image:none;border-color:#ff650b;color:#fff}
footer.site-footer .button.footer-contact.contact-phone:hover{background:#e95a06;border-color:#e95a06;color:#fff}
footer.site-footer .footer-explore{display:flex;flex-direction:column;gap:2px;border:0;padding:0}
footer.site-footer .footer-explore h2{width:auto;margin-bottom:12px}
footer.site-footer .footer-explore a{display:flex;align-items:center;gap:10px;min-height:36px;padding:0;color:#e7e6e2;font-size:14px;text-decoration:none}
footer.site-footer .footer-explore a:hover{color:#ff8a45}
footer.site-footer .facebook-link{margin-top:8px}
footer.site-footer small{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin-top:48px;padding-top:20px;border-top:1px solid #2e2e2c;color:#8f8e89;font-size:12px}
@media(max-width:960px){footer.site-footer .footer-grid{grid-template-columns:1fr 1fr;gap:40px 32px}}
@media(max-width:600px){footer.site-footer{padding:44px 20px 24px}footer.site-footer .footer-grid{grid-template-columns:1fr;gap:32px}footer.site-footer .footer-grid>*+*{border-top:1px solid #2e2e2c;padding-top:28px}footer.site-footer .footer-contact{justify-content:center}footer.site-footer small{flex-direction:column;margin-top:32px}}
footer.site-footer .footer-grid>*{grid-column:auto;grid-row:auto}
footer.site-footer .footer-explore{align-items:flex-start;text-align:left}
footer.site-footer .footer-explore a{border:0;box-shadow:none}

/* Footer contact group: Call, WhatsApp, Email and Facebook share one size, spacing, icon and hover. */
footer.site-footer .footer-actions{gap:10px}
footer.site-footer .footer-actions .button.footer-contact.footer-contact{display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;min-height:48px;margin:0;padding:0 16px;border-radius:8px;font:600 15px/1.2 var(--ds-font,Geist,system-ui,sans-serif);background:transparent;background-image:none;color:#f4f3f0;border:1px solid #4a4a48;box-shadow:none;text-decoration:none;transition:background-color .16s ease,border-color .16s ease,color .16s ease}
footer.site-footer .footer-actions .button.footer-contact.footer-contact .contact-icon{width:20px;height:20px;flex:none;color:currentColor;stroke-width:1.75}
footer.site-footer .footer-actions .button.footer-contact.footer-contact:hover,footer.site-footer .footer-actions .button.footer-contact.footer-contact:focus-visible{background:#262624;border-color:#8a8882;color:#fff}
footer.site-footer .footer-actions .button.footer-contact.footer-contact.contact-phone{background:#ff650b;border-color:#ff650b;color:#fff}
footer.site-footer .footer-actions .button.footer-contact.footer-contact.contact-phone:hover,footer.site-footer .footer-actions .button.footer-contact.footer-contact.contact-phone:focus-visible{background:#e2580a;border-color:#e2580a;color:#fff}
footer.site-footer .footer-actions .button.footer-contact.footer-contact:active{transform:translateY(1px)}
@media(max-width:600px){footer.site-footer .footer-actions .button.footer-contact.footer-contact{justify-content:center}}

/* Stop the footer flashing at the top before the page content renders (layout shift). */
main:empty{min-height:100vh}

/* Hidden anti-spam field and send error box */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.send-error{margin-top:16px;padding:16px;border:1px solid #e3b4ab;background:#fdf3f1;border-radius:8px;color:#7a2a1d}
.send-error p{color:#7a2a1d;margin:6px 0 12px}.send-error .actions{display:flex;flex-wrap:wrap;gap:10px}
.send-error[hidden]{display:none}

/* Services intro: text left, roofline illustration right; stacks on smaller screens. */
.services-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center}
.services-intro-text{min-width:0}
.services-intro-image{margin:0;min-width:0}
.services-intro-image img{display:block;width:100%;height:auto}
@media(max-width:900px){.services-intro{grid-template-columns:1fr;gap:32px}}