:root{--ink:#131519;--blue:#2457f5;--muted:#606876;--line:#dce0e8;--light:#f3f5f8}*{box-sizing:border-box}body{margin:0;font:16px/1.7 Arial,Helvetica,sans-serif;color:var(--ink);background:#fff}h1,h2,h3,p{margin-top:0}a{color:inherit}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #7695ff;outline-offset:5px}.wrap{width:min(1240px,88%);margin:auto}.top{background:#0e1014;color:#a9b1bf;font-size:10px;letter-spacing:1.6px;padding:9px 0;text-transform:uppercase}.top .wrap{display:flex;justify-content:space-between;gap:20px}.header{background:#12151b;color:#fff}.nav{display:flex;justify-content:space-between;align-items:center;min-height:100px;gap:20px}.brand{display:flex;gap:11px;align-items:center;font-weight:800;letter-spacing:-1px;font-size:28px;text-decoration:none}.brand svg{width:32px;height:34px}.brand b{color:#698cff}.navlinks{display:flex;align-items:center;gap:29px;font-size:13px}.navlinks a{text-decoration:none;padding:6px 0;color:#ccd1da}.navlinks a[aria-current=page]{color:#fff;border-bottom:2px solid #7292ff}.navlinks a.cta{padding:11px 20px;color:white;background:var(--blue);border:0}.menubtn{display:none;background:none;color:white;border:1px solid #78808e;padding:8px 12px;font:inherit}.eyebrow{text-transform:uppercase;letter-spacing:2.4px;font-size:10px;font-weight:700;display:flex;align-items:center;gap:11px}.eyebrow:before{content:'';width:25px;height:2px;background:var(--blue)}.hero{background:#12151b;color:#fff;overflow:hidden}.homehero{display:grid;grid-template-columns:1.25fr .8fr;gap:6%;padding:75px 0 85px;align-items:center}.hero h1{font-size:clamp(48px,5.4vw,77px);letter-spacing:-3.3px;font-weight:600;line-height:1.05;margin:29px 0}.hero h1 span{color:#7e9cff}.lede{font-size:17px;max-width:530px;color:#b6bdca;line-height:1.85}.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;background:var(--blue);color:white;text-decoration:none;padding:14px 22px;font-size:12px;font-weight:700}.btn:after{content:'→';font-size:19px}.btn.secondary{background:transparent;border:1px solid #6d7688}.actions{display:flex;gap:15px;flex-wrap:wrap;margin-top:30px}.herofoot{font-size:10px;letter-spacing:1px;color:#8e98a9;margin-top:27px}.blueprint{border:1px solid #4b5d802e;background:linear-gradient(135deg,#25375970,#141920);padding:34px 25px 20px;position:relative}.blueprint:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#8298c909 1px,transparent 1px),linear-gradient(90deg,#8298c909 1px,transparent 1px);background-size:24px 24px}.blueprint svg{width:100%;height:auto;position:relative}.planlabel{position:relative;font-size:9px;letter-spacing:2px;color:#9dafcf;border-bottom:1px solid #6b7b9938;padding-bottom:15px;margin-bottom:10px}.planbottom{position:relative;border-top:1px solid #6b7b9938;padding:17px 0 0;display:flex;justify-content:space-between;gap:10px;font-size:9px;color:#b1bfd8;letter-spacing:.7px}.scopebar{border-bottom:1px solid var(--line);padding:22px 0}.scopebar .wrap{display:flex;justify-content:space-between;font-size:11px;gap:20px;color:#4b5565}.scopebar strong{color:var(--ink)}.section{padding:78px 0}.sectionhead{display:grid;grid-template-columns:1.2fr .8fr;gap:10%;align-items:end;margin-bottom:38px}h2{font-size:clamp(32px,3.3vw,46px);font-weight:600;line-height:1.15;letter-spacing:-1.8px;margin:18px 0 0}.sectionhead p,.muted{color:var(--muted);font-size:15px;margin:0}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.servicecard{border-top:2px solid var(--ink);padding:26px 0 0}.servicecard .num{font-size:10px;color:var(--blue);letter-spacing:1.4px}.servicecard h3{font-size:25px;line-height:1.25;letter-spacing:-.7px;margin:25px 0 18px}.servicecard p{font-size:14px;color:var(--muted)}.readmore{font-size:12px;font-weight:700;text-decoration:none;display:inline-block;margin-top:10px}.readmore:after{content:' →';color:var(--blue)}.light{background:var(--light)}.split{display:grid;grid-template-columns:1fr 1fr;gap:12%;align-items:start}.bodycopy p{font-size:15px;color:var(--muted)}.bodycopy h3{font-size:22px;line-height:1.3;margin-top:24px}.list{padding:0;list-style:none;margin:25px 0 0}.list li{padding:12px 0;border-top:1px solid var(--line);font-size:13px}.list li:before{content:'+';color:var(--blue);font-weight:700;margin-right:12px}.callout{background:var(--blue);color:#fff;padding:47px 0}.callrow{display:flex;justify-content:space-between;align-items:center;gap:30px}.callout h2{margin:0 0 9px;font-size:34px}.callout p{font-size:14px;color:#d4dfff;margin:0}.callout .btn{background:white;color:var(--ink)}.pagehero{padding:36px 0 65px}.crumb{font-size:11px;color:#929cac;margin-bottom:43px}.crumb a{text-decoration:none}.pagehero h1{max-width:950px;font-size:clamp(41px,4.4vw,66px);margin-bottom:22px}.pagehero .lede{max-width:690px}.rowservice{display:grid;grid-template-columns:90px 1fr 1fr;gap:40px;padding:37px 0;border-top:1px solid var(--line);align-items:start}.rowservice .num{font-size:13px;color:var(--blue)}.rowservice h2{font-size:32px;margin:0 0 20px}.rowservice p{font-size:14px;color:var(--muted)}.rowservice .list{margin:0}.step{display:grid;grid-template-columns:45px 1fr;gap:12px;border-top:1px solid var(--line);padding:25px 0}.step small{color:var(--blue);font-size:11px}.step h3{font-size:21px;margin:0 0 10px}.step p{font-size:14px;color:var(--muted);margin:0}.notes{border:1px solid var(--line);padding:30px}.notes h3{font-size:19px}.notes p{font-size:14px;color:var(--muted)}.contactpanel{background:var(--light);padding:37px}.contactpanel h2{margin-top:0;font-size:31px}.contactpanel a.mail{color:var(--blue);font-size:clamp(16px,2vw,24px);text-underline-offset:5px;overflow-wrap:anywhere}.contactpanel p{font-size:14px;color:var(--muted)}.contactpanel .btn{margin:20px 0}.contactitems{margin:28px 0 0;display:flex;flex-direction:column;gap:20px}.contactitems small{font-size:10px;letter-spacing:1.5px;color:var(--muted)}.contactitems p{margin:3px 0;font-size:15px}.footer{background:#101318;color:#c2c9d3;padding:50px 0 25px}.footgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:55px}.footer .brand{color:#fff}.footer p{font-size:12px;max-width:300px;color:#8894a7}.footer h3{font-size:10px;letter-spacing:1.5px;color:#fff;text-transform:uppercase}.footlinks{display:flex;flex-direction:column;gap:8px;font-size:12px}.footlinks a{text-decoration:none}.footbottom{border-top:1px solid #ffffff18;padding-top:22px;margin-top:37px;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:#8894a7}details{border-top:1px solid var(--line);padding:19px 0}summary{font-weight:600;font-size:15px;cursor:pointer}details p{color:var(--muted);font-size:14px;margin:15px 0 0}.servicesnote{font-size:12px;color:var(--muted);margin-top:40px}@media(max-width:850px){.nav{min-height:82px}.menubtn{display:block}.nav{position:relative}.navlinks{display:none;position:absolute;top:82px;left:-6.8%;right:-6.8%;z-index:5;background:#171c25;padding:20px 7%;flex-direction:column;align-items:stretch;gap:15px}.navlinks.open{display:flex}.homehero{grid-template-columns:1fr;padding:50px 0;gap:35px}.blueprint{max-width:500px;width:100%;margin:auto}.hero h1{letter-spacing:-2px}.scopebar .wrap{flex-wrap:wrap;justify-content:center;gap:10px 20px}.section{padding:54px 0}.sectionhead,.split{grid-template-columns:1fr;gap:27px}.grid3{grid-template-columns:1fr;gap:30px}.servicecard h3{margin-top:15px}.callrow{flex-direction:column;align-items:start}.rowservice{grid-template-columns:30px 1fr;gap:15px}.rowservice>div:last-child{grid-column:2}.footgrid{grid-template-columns:1fr 1fr;gap:25px}.footgrid>div:first-child{grid-column:1/-1}.top .wrap span:last-child{display:none}.pagehero{padding-bottom:48px}.crumb{margin-bottom:30px}.contactpanel{padding:25px}}@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* Four service pillars use the existing approved card styling. */
.servicegrid4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 52px}.servicegrid4 .servicecard h3{margin-top:21px}@media(max-width:650px){.servicegrid4{grid-template-columns:1fr;gap:30px}}

/* Put the four core offers into the primary visual hierarchy. */
.hero-services{margin-top:31px;display:flex;flex-wrap:wrap;gap:10px 21px;max-width:550px}.hero-services a{font-size:15px;font-weight:700;color:#dce5ff;text-decoration:none;border-bottom:1px solid #698cff;padding-bottom:3px}.serviceband{background:#2457f5;color:#fff}.serviceband .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.serviceband a{position:relative;padding:28px 22px 28px 0;text-decoration:none}.serviceband a+a{border-left:1px solid #ffffff42;padding-left:24px}.serviceband span{display:block;font-size:10px;letter-spacing:2px;color:#c2d1ff;margin-bottom:12px}.serviceband strong{font-size:clamp(19px,2vw,28px);font-weight:800;letter-spacing:-.6px;line-height:1.12;display:block}.serviceband i{font-size:21px;position:absolute;right:15px;top:27px;font-style:normal;color:#bcd0ff}.core-service h3{font-size:clamp(30px,3.1vw,43px);line-height:1.08;font-weight:800;letter-spacing:-1.6px;margin:19px 0 22px}.core-service .num{font-size:11px;color:#657084}.services-pagehero h1{font-size:clamp(36px,4.4vw,62px);line-height:1.15;letter-spacing:-2px}.hero h1 span{color:#7e9cff}
@media(max-width:850px){.serviceband .wrap{grid-template-columns:1fr 1fr}.serviceband a:nth-child(3){padding-left:0;border-left:0;border-top:1px solid #ffffff42}.serviceband a:nth-child(4){border-top:1px solid #ffffff42}.serviceband strong{font-size:25px}.core-service h3{font-size:34px}.hero-services a{font-size:14px}}@media(max-width:400px){.serviceband strong{font-size:21px}.serviceband a+a{padding-left:17px}.serviceband i{right:6px}.serviceband a:nth-child(3){padding-left:0}.hero-services{gap:9px 16px}}

/* The four core services are the homepage hero headline. */
.hero h1.hero-service-headline{font-size:clamp(36px,4.1vw,60px);font-weight:800;line-height:1.12;letter-spacing:-2px;margin:26px 0}.hero-service-headline a{display:block;color:#fff;text-decoration:none;margin-bottom:9px}.hero-service-headline a:last-child{color:#7e9cff;margin-bottom:0}.hero-service-headline a:hover{color:#a8bdff}.hero-service-headline a:focus-visible{outline:2px solid #7e9cff;outline-offset:4px}@media(max-width:850px){.hero h1.hero-service-headline{font-size:clamp(33px,6vw,54px);letter-spacing:-1.4px}}@media(max-width:400px){.hero h1.hero-service-headline{font-size:32px;letter-spacing:-1.2px}}

/* Six core services, compact and secondary to the homepage hero. */
.corebar{background:#2457f5;color:#fff}.corebar .wrap{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:stretch}.corebar a{display:flex;align-items:center;justify-content:center;text-align:center;padding:16px 9px;text-decoration:none;font-size:13px;font-weight:700;line-height:1.35}.corebar a+a{border-left:1px solid #ffffff38}.corebar a:hover{background:#1847dc}.servicesmenu{position:relative;padding:0;border:0}.servicesmenu summary{font-size:13px;font-weight:400;color:#ccd1da;cursor:pointer;list-style:none}.servicesmenu summary:after{content:' ▾';font-size:10px}.servicesmenu summary::-webkit-details-marker{display:none}.servicedrop{position:absolute;top:32px;left:-20px;z-index:10;width:290px;padding:13px 20px;background:#1c2330;box-shadow:0 12px 35px #0005;border:1px solid #455064}.navlinks .servicedrop a{display:block;padding:9px 0;color:#e5eaf4;font-size:12px;border-bottom:1px solid #ffffff12}.navlinks .servicedrop a:hover{color:#8fabff}.servicesmenu[open] summary{color:#fff}@media(max-width:1000px){.corebar a{font-size:12px;padding:14px 6px}}@media(max-width:850px){.corebar .wrap{grid-template-columns:repeat(3,minmax(0,1fr))}.corebar a:nth-child(4){border-left:0}.corebar a:nth-child(n+4){border-top:1px solid #ffffff30}.servicedrop{position:static;box-shadow:none;width:100%;margin-top:12px}.servicesmenu summary{font-size:14px}}@media(max-width:420px){.corebar a{font-size:11px;padding:12px 5px}}

.directory-nav{border-top:1px solid #ffffff15;background:#171d27}.directory-nav .wrap{display:flex;justify-content:flex-end;gap:34px;padding:11px 0}.directory-nav a{font-size:12px;color:#c6d5f4;text-decoration:none}.directory-nav a:hover{color:white}.directory-controls{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:24px}.directory-controls label{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:700;flex:1;max-width:500px}.directory-controls input{padding:13px 15px;border:1px solid #bdc6d6;background:#fff;font:14px Arial,sans-serif;color:#131519;width:100%;border-radius:0}.directory-controls>span{color:#606876;font-size:12px}.directory-empty{padding:33px;background:#f3f5f8;border:1px solid #dce0e8}.directory-empty h3{font-size:22px;margin-bottom:12px}.directory-empty p{font-size:14px;color:#606876;max-width:700px;margin:0}.directory-entry{padding:25px;border:1px solid #dce0e8;margin-bottom:15px}.directory-entry h3{font-size:22px;margin-bottom:15px}.directory-entry p{font-size:14px;color:#606876;margin:7px 0}.directory-entry a{font-size:13px;color:#2457f5}@media(max-width:650px){.directory-nav .wrap{justify-content:space-between;gap:10px}.directory-nav a{font-size:10px}.directory-controls{align-items:stretch;flex-direction:column;gap:12px}}

/* One unified header row across the site. */
.navlinks{gap:22px}.navlinks>a,.servicesmenu summary{font-size:12px}.navlinks a.cta{padding:11px 16px}.nav .brand{font-size:26px;gap:8px}.nav .brand svg{width:29px}@media(min-width:851px) and (max-width:1200px){.navlinks{gap:14px}.navlinks>a,.servicesmenu summary{font-size:11px}.nav .brand{font-size:23px}.navlinks a.cta{padding:10px 12px}.nav .brand svg{width:25px}}@media(max-width:1050px){.menubtn{display:block}.nav{position:relative;min-height:82px}.navlinks{display:none;position:absolute;top:82px;left:-6.8%;right:-6.8%;z-index:5;background:#171c25;padding:20px 7%;flex-direction:column;align-items:stretch;gap:15px}.navlinks.open{display:flex}.navlinks>a,.servicesmenu summary{font-size:14px}.servicedrop{position:static;box-shadow:none;width:100%;margin-top:12px}}

.hero h1 .roofers-red{color:#ef3038;}

/* Approved uploaded RoofCzar logo, prominent header size. */
.brand .roofczar-logo{display:block;width:200px;height:150px;object-fit:contain;max-width:none}.nav .brand{flex-shrink:0}.nav{min-height:154px}.footer .brand .roofczar-logo{width:180px;height:135px}@media(max-width:1050px){.nav{min-height:124px}.brand .roofczar-logo{width:160px;height:120px}.navlinks{top:124px}}

/* Larger logo requested by owner. */
.brand .roofczar-logo{width:300px;height:200px;object-fit:cover;object-position:center}.nav{min-height:204px}.footer .brand .roofczar-logo{width:240px;height:165px}@media(max-width:1200px) and (min-width:1051px){.navlinks{gap:10px}.navlinks>a,.servicesmenu summary{font-size:10px}}@media(max-width:1050px){.brand .roofczar-logo{width:240px;height:160px}.nav{min-height:164px}.navlinks{top:164px}}

/* Prominent homepage audience statement. */
.homehero .eyebrow{font-size:clamp(20px,2.2vw,30px);font-weight:700;line-height:1.3;letter-spacing:1px;margin-bottom:22px}

/* Refined header spacing and audience line. */
.homehero .eyebrow{font-size:16px;line-height:1.4;letter-spacing:1.2px;margin-bottom:18px}.homehero{padding-top:28px}.nav{min-height:164px}.nav .brand .roofczar-logo{height:160px}@media(max-width:1050px){.nav{min-height:134px}.nav .brand .roofczar-logo{height:130px}.navlinks{top:134px}.homehero{padding-top:24px}.homehero .eyebrow{font-size:14px}}

/* Single main navigation; compact space below logo on inner pages. */
.pagehero{padding-top:28px}@media(max-width:1050px){.pagehero{padding-top:24px}}

.recent-project .eyebrow{color:var(--blue);font-size:13px}.recent-project h2{font-size:clamp(34px,4vw,52px);margin:18px 0}.project-location{color:var(--muted);margin-bottom:28px}.recent-project .bodycopy h3{font-size:25px;line-height:1.3;margin-top:0}

/* Remove the navy raster backdrop while preserving original logo colors. */
.brand .roofczar-logo{filter:url(#roofczar-remove-navy)}

.consultation-form{max-width:950px;padding:32px;background:var(--light);border:1px solid var(--line)}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.formgrid label{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:600}.formgrid input,.formgrid select,.formgrid textarea{width:100%;padding:12px;border:1px solid #abb3bf;background:#fff;border-radius:2px;font:16px Arial;color:#131519}.formgrid .full{grid-column:1/-1}.formnote{font-size:13px;color:var(--muted);margin:20px 0}.formnote a{text-decoration:underline}.consultation-form button{cursor:pointer;border:0;font:inherit}.contactphone{font-size:26px;color:var(--blue);font-weight:700}.policycopy{max-width:900px}.policycopy h2{font-size:25px;margin-top:32px}@media(max-width:650px){.formgrid{grid-template-columns:1fr}.consultation-form{padding:20px}.navlinks .cta{white-space:normal}}