@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');:root{--black:#101111;--charcoal:#202222;--gold:#d9ad58;--cream:#f5f4f0;--gray:#777}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'DM Sans',Arial,sans-serif;color:var(--black);background:var(--cream)}a{text-decoration:none;color:inherit}.site-header{height:86px;padding:0 6%;background:#111;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:10}.brand{color:white;font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:800;letter-spacing:1px;white-space:nowrap}.brand b{color:var(--gold)}.brand small{font-size:11px;vertical-align:top;margin-left:4px;color:#aaa}.roof-mark{font-size:48px;line-height:0;vertical-align:-5px;color:var(--gold);font-weight:900}.site-header nav{display:flex;gap:34px;align-items:center}.site-header nav a{color:#eee;font-size:13px;font-weight:700}.site-header nav a:hover,.site-header nav a.active{color:var(--gold)}.site-header nav .nav-cta{background:var(--gold);color:#111;padding:14px 20px}.menu-toggle{display:none}.hero{background:linear-gradient(105deg,rgba(10,11,11,.98) 4%,rgba(15,16,16,.91) 58%,rgba(20,20,20,.72)),linear-gradient(145deg,#2b2e2e,#101111);color:white;min-height:670px;display:flex;align-items:center;position:relative;overflow:hidden}.hero:after{content:'⌃';font-size:850px;font-weight:900;position:absolute;right:-100px;top:-390px;opacity:.055;pointer-events:none}.hero-inner{max-width:1300px;margin:auto;width:88%;position:relative;z-index:1;padding:80px 0}.eyebrow{display:block;color:var(--gold);font-size:12px;letter-spacing:3px;font-weight:800;margin-bottom:23px}.eyebrow.dark{color:#9e742b}h1,h2,h3{font-family:'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;margin:0;line-height:.96}h1{font-size:clamp(65px,9vw,132px);letter-spacing:-1px}h1 em,h2 em{color:var(--gold);font-style:normal}.hero p{max-width:570px;font-size:17px;color:#c8c8c8;line-height:1.75;margin:32px 0}.actions{display:flex;gap:14px;flex-wrap:wrap}.btn{display:inline-block;padding:18px 28px;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;transition:.2s}.btn:hover{transform:translateY(-2px)}.primary{background:var(--gold);color:#111}.outline{border:1px solid #777;color:white}.light{background:white;color:#111}.hero-proof{display:flex;gap:40px;flex-wrap:wrap;margin-top:85px;font-size:10px;letter-spacing:1.3px;font-weight:800;color:#aaa}.hero-proof span:before{content:'◆';color:var(--gold);margin-right:12px}.section{max-width:1300px;margin:auto;padding:110px 6%}.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:40px}.section h2,.split h2,.cta h2,.page-hero h1{font-size:clamp(48px,6vw,82px)}.text-link{font-weight:800;font-size:13px;border-bottom:2px solid var(--gold);padding-bottom:8px;white-space:nowrap}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.service-card{background:white;padding:36px;min-height:330px;border:1px solid #e8e7e2;display:flex;flex-direction:column}.service-num{color:#9e742b;font-weight:800;font-size:13px}.symbol{font-size:57px;color:var(--gold);margin:25px 0}.service-card h3{font-size:34px}.service-card p{line-height:1.7;color:#666;font-size:14px}.service-card a{font-size:13px;font-weight:800;margin-top:auto}.split{display:grid;grid-template-columns:1fr 1fr;gap:90px;padding:100px max(6%,calc((100% - 1140px)/2))}.dark-panel{background:#191b1b;color:white}.split p{font-size:18px;line-height:1.85;color:#bbb;margin:0 0 30px}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.photo-placeholder{background:repeating-linear-gradient(135deg,#ddd,#ddd 2px,#e8e7e2 2px,#e8e7e2 15px);height:260px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#777;font-size:12px;font-weight:800;letter-spacing:1px;gap:15px;padding:20px}.photo-placeholder span{color:#111;font-size:15px}.cta{text-align:center;background:var(--gold);padding:100px 20px}.cta .eyebrow,.cta h2 em{color:#73511b}.cta p{margin:22px auto 35px;max-width:500px;line-height:1.7}.cta h2{font-size:clamp(64px,8vw,105px)}footer{background:#111;color:white;padding:55px 6% 25px}.footer-top{display:flex;justify-content:space-between;gap:25px;align-items:center}.footer-top p{color:#aaa;font-size:13px}.footer-links{display:flex;gap:30px;margin:40px 0;font-size:13px}.footer-bottom{border-top:1px solid #333;padding-top:25px;color:#888;font-size:11px;display:flex;justify-content:space-between;gap:20px}.page-hero{background:#1b1d1d;color:white;padding:100px 6%}.page-hero p{max-width:660px;color:#c5c5c5;line-height:1.8;font-size:17px}.content{max-width:1100px;margin:auto;padding:80px 6%}.content h2{font-size:50px;margin-bottom:20px}.content p,.content li{line-height:1.85;color:#555}.service-detail{padding:35px 0;border-bottom:1px solid #ddd;display:grid;grid-template-columns:1fr 2fr;gap:30px}.service-detail h3{font-size:36px}.tag{display:inline-block;background:#eee7d9;color:#77541c;padding:8px 13px;font-size:11px;font-weight:800;letter-spacing:1px;margin:8px 8px 0 0}.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:60px}.contact-form{background:white;padding:35px;display:grid;gap:16px}.contact-form label{font-size:12px;font-weight:800;display:grid;gap:7px}.contact-form input,.contact-form textarea,.contact-form select{font:inherit;border:1px solid #ccc;padding:14px;width:100%;background:#fff}.contact-form textarea{min-height:130px;resize:vertical}.contact-form button{border:0;cursor:pointer;text-align:left}.form-note{font-size:12px;color:#666}.notice{background:#fff7e6;padding:16px;border-left:4px solid var(--gold);font-size:13px;line-height:1.6}.gallery-page{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.gallery-page .photo-placeholder{height:330px}@media(max-width:800px){.site-header{height:74px}.menu-toggle{display:block;background:none;color:white;border:0;font-size:26px;cursor:pointer}.site-header nav{display:none;position:absolute;top:74px;left:0;right:0;background:#111;flex-direction:column;align-items:stretch;gap:0;padding:15px 6% 25px}.site-header nav.open{display:flex}.site-header nav a{padding:14px 0}.site-header nav .nav-cta{padding:14px}.hero{min-height:590px}.hero-proof{gap:15px;margin-top:55px}.cards,.gallery-grid,.split,.contact-grid{grid-template-columns:1fr}.split{gap:35px;padding:75px 6%}.section{padding:75px 6%}.section-head{align-items:start;flex-direction:column}.service-card{min-height:280px}.footer-top,.footer-bottom{flex-direction:column;align-items:start}.service-detail{grid-template-columns:1fr;gap:10px}.gallery-page{grid-template-columns:1fr}.hero p{font-size:15px}}

/* Roof Life official logo */
.brand{display:inline-flex;align-items:center;flex-shrink:0;line-height:1}.brand-logo{display:block;width:205px;max-width:40vw;height:auto;object-fit:contain}.footer-top .brand-logo{width:245px;max-width:65vw}@media(max-width:600px){.brand-logo{width:165px;max-width:48vw}.site-header{padding-left:4%;padding-right:4%}}

/* Real project gallery */
.project-card{margin:0;background:#fff;overflow:hidden;border:1px solid #e5e3dd}.project-card img{display:block;width:100%;height:275px;object-fit:cover}.gallery-page .project-card img{height:320px}.project-card figcaption{padding:18px 20px;font-size:14px;font-weight:800;letter-spacing:.3px}.project-card:hover img{filter:brightness(.94)}@media(max-width:800px){.project-card img,.gallery-page .project-card img{height:260px}}

/* Prominent submission confirmation and error states */
.form-feedback{padding:22px 24px;border:2px solid;border-radius:6px;line-height:1.5;scroll-margin-top:100px;outline-offset:4px}
.form-feedback[hidden]{display:none}
.form-feedback strong{display:block;font-size:19px;line-height:1.3}
.form-feedback p{margin:10px 0 0;font-size:14px;line-height:1.7}
.form-feedback.success{background:#eaf7ef;border-color:#27864d;color:#164d2e}
.form-feedback.success p{color:#164d2e}
.form-feedback.error{background:#fff0ee;border-color:#b83b2e;color:#7a231b}
.form-feedback.error p{color:#7a231b}
.contact-form button:disabled{opacity:.65;cursor:wait}