/* Outright's photographic hero: native CSS, a static image and restrained transitions. */
html{scroll-padding-top:115px}
header{position:fixed;inset:0 0 auto;z-index:30;background:linear-gradient(180deg,#0c1a25b8,transparent);border-bottom:1px solid #d8e7f11f;padding:17px max(5%,calc((100vw - 1160px)/2));transition:background-color .2s,border-color .2s}
.brand img{width:194px}
.header-actions{display:flex;align-items:center;gap:11px}
.call,.header-quote{display:inline-flex;align-items:center;justify-content:center;min-height:46px;font-size:13px;font-weight:700;line-height:1.3;padding:12px 18px;text-decoration:none;border-radius:3px;white-space:nowrap}
.call{border:1px solid #c4d9e18a;color:#fff;background:#132c3c33}
.call:hover{background:#25465c}
.header-quote{background:#bce4f6;border:1px solid #bce4f6;color:#142c3d}
.header-quote:hover{background:#d9f0fb;border-color:#d9f0fb}
.is-scrolled header{background:#122b3c;border-bottom-color:#5270855c}
.premium-hero{position:relative;isolation:isolate;display:block;width:100%;max-width:none;margin:0;padding:158px 0 76px;background:#162d3c;overflow:hidden}
.hero-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;z-index:-3}
.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#0a1a28ed 0%,#0d2233c7 42%,#132e4054 76%,#122b3c75 100%),linear-gradient(0deg,#0c2133d9 0%,transparent 65%)}
.hero-layout{width:min(1160px,90%);margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.96fr);gap:76px;align-items:start}
.premium-hero .hero-content{display:block;padding-top:40px;color:#fff}
.premium-hero .hero-rating{color:#e5edf4;font-size:13px;line-height:1.5}
.premium-hero .hero-rating span{color:#ddbf88}
.premium-hero h1{font-size:clamp(46px,4.45vw,64px);font-weight:600;line-height:1.09;letter-spacing:-2.2px;color:#fff;margin:28px 0 27px}
.premium-hero h1 span{color:#bedae9}
.premium-hero .intro{font-size:18px;line-height:1.8;color:#e0e8ee;max-width:485px;margin:0}
.premium-hero .hero-area{font-size:14px;line-height:1.8;color:#c5d6e2;max-width:470px;margin:24px 0 0}
.premium-hero .hero-area strong{color:#e7f0f6;font-weight:700}
.premium-hero .quote-form{width:100%;margin:0;padding:30px;background:linear-gradient(145deg,#2d485bf2,#162f43fa);border:1px solid #b5d5e555;border-top:3px solid #bce4f6;border-radius:5px;box-shadow:0 20px 55px #06142138;scroll-margin-top:118px}
.premium-hero .form-heading{font-size:28px}
.premium-hero .form-intro{margin-bottom:23px}
.premium-hero .roof-choices .roof-option,.premium-hero .roof-choices input:checked+.roof-option{min-height:124px}
.premium-hero .draft-note{margin-top:16px;padding-top:13px;font-size:10px}
.premium-hero .question-help{margin-bottom:16px}
.premium-hero .roof-choices{margin-bottom:21px}
.premium-hero .quote-form .button{min-height:56px}
.roof-result{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:center;padding-top:75px;margin-top:65px;border-top:1px solid #d6e1e7}
.roof-result h2{font-size:clamp(30px,3vw,41px)}
.roof-result p{font-size:16px;line-height:1.75;color:#536b7d;max-width:330px;margin-bottom:27px}
.roof-result .hero-project{width:100%;aspect-ratio:1;height:auto;max-width:560px;border-radius:6px}
.roof-result .hero-project img{width:100%;height:100%;object-fit:cover}
@media(max-width:1000px){
 .hero-layout{gap:35px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .premium-hero{padding-top:143px}
 .premium-hero h1{font-size:46px;letter-spacing:-1.8px}
 .premium-hero .hero-content{padding-top:29px}
 .premium-hero .intro{font-size:17px;line-height:1.75}
 .premium-hero .quote-form{padding:25px}
 .premium-hero .form-heading{font-size:26px}
 .roof-result{gap:45px}
}
@media(max-width:700px){
 html{scroll-padding-top:91px}
 header{padding:14px 5%;gap:10px}
 .brand img{width:135px}
 .header-actions{gap:7px}
 .call,.header-quote{min-height:44px;padding:10px 11px;font-size:11px}
 .premium-hero{display:block;padding:118px 0 42px;min-height:0}
 .hero-layout{display:grid;grid-template-columns:1fr;gap:33px;width:90%}
 .premium-hero .hero-content{display:block;padding:0}
 .hero-backdrop{object-position:52% 15%}
 .hero-shade{background:linear-gradient(180deg,#0d2432d9 0%,#122f40c2 36%,#102c40e8 100%),linear-gradient(90deg,#0b2031a6,transparent)}
 .premium-hero .hero-rating{font-size:11px}
 .premium-hero h1{font-size:clamp(32px,9.5vw,42px);line-height:1.13;letter-spacing:-1.4px;margin:23px 0 22px}
 .premium-hero .intro{font-size:16px;line-height:1.8;max-width:370px}
 .premium-hero .hero-area{font-size:13px;line-height:1.8;margin:20px 0 0;max-width:370px}
 .premium-hero .quote-form{order:initial;padding:25px 21px;scroll-margin-top:94px}
 .premium-hero .form-heading{font-size:26px}
 .premium-hero .roof-choices .roof-option,.premium-hero .roof-choices input:checked+.roof-option{min-height:79px}
 .roof-result{grid-template-columns:1fr;gap:25px;padding-top:40px;margin-top:40px}
 .roof-result h2 br{display:none}
 .roof-result p{font-size:15px;margin-bottom:22px;max-width:400px}
 .roof-result .hero-project{order:initial;margin:0;aspect-ratio:1}
 .roof-result .button{width:100%}
}
@media(prefers-reduced-motion:reduce){header{transition:none}}

/* A concise statement banner and a quote-led customer review feature. */
.proof.proof-banner{display:grid;grid-template-columns:1.65fr 1fr;align-items:center;gap:60px;padding:35px max(5%,calc((100vw - 1160px)/2));min-height:186px;background:linear-gradient(105deg,#e3edf4,#d3e4ef);border-block:1px solid #c8dce8}
.proof.proof-banner>.proof-statements{display:block;min-height:0;padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none}
.proof-banner .proof-statements p{display:block;margin:0;color:#3b5a70;font-size:28px;line-height:1.4;letter-spacing:-.5px}
.proof-banner .proof-statements p+p{margin-top:12px}
.proof-banner .proof-statements strong{font-size:inherit;line-height:inherit;font-weight:700;letter-spacing:inherit;color:#1d435d;white-space:nowrap}
.proof-banner .proof-statements span{display:inline;font-size:inherit;line-height:inherit;font-weight:400;letter-spacing:inherit;color:#3b5a70;max-width:none;margin:0}
.proof-banner .proof-quote{display:flex;flex-direction:column;gap:7px;justify-self:end;width:100%;max-width:330px;padding:0 0 0 35px;border-left:1px solid #99b6ca;color:#1c425c;text-decoration:none}
.proof-banner .proof-quote strong{font-size:23px;line-height:1.25;letter-spacing:-.5px;color:#1c425c}
.proof-banner .proof-quote>span{font-size:14px;font-weight:400;line-height:1.5;color:#48687e;margin:0}
.proof-banner .proof-quote small{font-size:13px;font-weight:700;line-height:1.4;margin-top:5px;text-decoration:underline;text-underline-offset:5px;color:#204f6d}
.proof-banner .proof-quote:hover small{text-decoration-thickness:2px}
.review-feature{display:grid;grid-template-columns:.8fr 1.45fr;gap:84px;align-items:start}
.review-intro h2{font-size:clamp(30px,3vw,41px);line-height:1.15;margin-bottom:29px}
.review-intro .google-rating{display:grid;grid-template-columns:auto 1fr;column-gap:15px;row-gap:5px;align-items:center;width:max-content}
.review-intro .google-rating b{font-size:54px;line-height:1;letter-spacing:-2px;grid-row:1/3;color:#254a64}
.review-intro .google-rating>span[aria-label]{font-size:16px;letter-spacing:3px;align-self:end}
.review-intro .google-rating>span:last-child{font-size:13px;line-height:1.5;align-self:start;color:#5a7080}
.all-reviews{display:inline-block;font-size:13px;font-weight:400;line-height:1.5;color:#4a6a81;margin-top:22px;text-underline-offset:4px}
.review-feature-carousel{padding:2px 0 0;min-width:0}
.review-feature .review-viewport{border-radius:0;overflow:hidden}
.review-feature .review-track{gap:20px}
.review-feature .review-card{flex:0 0 100%;padding:0 2px;background:none;border:0;border-radius:0;min-height:245px;display:flex;flex-direction:column}
.review-feature .review-stars{font-size:16px;letter-spacing:3px;margin:0;color:#94703d}
.review-feature .review-card blockquote{font-size:27px;font-weight:400;line-height:1.5;letter-spacing:-.45px;margin:23px 0 30px;color:#1d384b;max-width:690px}
.review-feature .review-person{display:flex;gap:13px;align-items:center;margin-top:auto}
.review-feature .review-initial{width:42px;height:42px;font-size:15px;background:#e5eef4;color:#335b76;flex-shrink:0}
.review-feature .review-person h3{font-size:16px;font-weight:700;letter-spacing:0;margin:0 0 4px;line-height:1.4}
.review-feature .review-person div>span{font-size:12px;line-height:1.4;color:#637d8e}
.review-feature .review-slider-controls{justify-content:flex-start;gap:20px;margin-top:28px}
.review-feature .review-slider-controls>button{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;min-height:48px;border-radius:50%;padding:0;background:#fff;border:1px solid #aac4d6;color:#1d435d;cursor:pointer;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}
.review-feature .review-slider-controls>button svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.review-feature .review-slider-controls>.review-next{background:#1d435d;border-color:#1d435d;color:#fff;box-shadow:0 3px 9px #193e551a}
.review-feature .review-slider-controls>.review-prev:hover{background:#e4f1f9;border-color:#7099b4}
.review-feature .review-slider-controls>.review-next:hover{background:#2c5f7f;border-color:#2c5f7f}
.review-feature .review-slider-controls button:focus-visible{outline:3px solid #6da9d0;outline-offset:4px}
.review-feature .review-dots{align-items:center;gap:11px;padding-inline:2px}
.review-feature .review-dots button{width:7px;height:7px;border-radius:9px;background:#c8d7e1;cursor:pointer;transition:width .18s ease,background-color .18s ease}
.review-feature .review-dots button.active{width:23px;background:#1d435d}
.review-feature .review-dots button:after{inset:-10px}
@media(prefers-reduced-motion:reduce){.review-feature .review-slider-controls button{transition:none}}
@media(max-width:1000px){.proof.proof-banner{grid-template-columns:1.4fr 1fr;gap:36px}.proof-banner .proof-statements p{font-size:24px}.proof-banner .proof-quote{padding-left:27px}.proof-banner .proof-quote strong{font-size:21px}.review-feature{gap:45px;grid-template-columns:.85fr 1.25fr}.review-feature .review-card blockquote{font-size:24px}.review-feature .review-card{min-height:275px}}
@media(max-width:700px){
 .proof.proof-banner{grid-template-columns:1fr;gap:22px;padding:27px 5% 29px;min-height:0}
 .proof-banner .proof-statements p{font-size:21px;letter-spacing:-.3px}
 .proof-banner .proof-statements p+p{margin-top:10px}
 .proof-banner .proof-quote{max-width:none;justify-self:start;border-left:0;border-top:1px solid #a9c2d2;padding:20px 0 0;gap:6px}
 .proof-banner .proof-quote strong{font-size:21px}
 .proof-banner .proof-quote>span{font-size:14px}
 .proof-banner .proof-quote small{font-size:13px;margin-top:4px}
 .review-feature{grid-template-columns:1fr;gap:31px}
 .review-intro h2{font-size:32px;margin-bottom:23px;max-width:350px}
 .review-intro h2 br{display:none}
 .review-intro .google-rating b{font-size:46px}
 .review-intro .google-rating>span[aria-label]{font-size:15px}
 .all-reviews{margin-top:17px;font-size:13px}
 .review-feature .review-card{min-height:260px}
 .review-feature .review-card blockquote{font-size:23px;line-height:1.55;margin:20px 0 26px;letter-spacing:-.3px}
 .review-feature .review-slider-controls{gap:15px;margin-top:23px}
 .review-feature .review-slider-controls>button{padding:0}
 .review-feature .review-person h3{font-size:16px}
}

/* Keep the comparison in the work showcase; reviews support the final enquiry. */
.roof-result-section .roof-result{margin-top:0;padding-top:0;border-top:0}

/* A connected, readable sequence from enquiry to roof replacement. */
.process{background:linear-gradient(115deg,#182e3e,#233f54);color:#fff}
.process h2{margin:0;max-width:800px}
.process-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:46px;list-style:none;margin:42px 0 36px;padding:0}
.process-steps li{position:relative;min-width:0}
.process-steps li:not(:last-child)::after{content:"";position:absolute;top:32px;left:86px;right:-24px;height:1px;background:#829eaf80}
.step-marker{position:relative;display:grid;place-items:center;width:64px;height:64px;margin-bottom:26px;border:1px solid #7293a955;border-radius:50%;background:#bedef2;color:#1d435d}
.step-marker svg{width:29px;height:29px;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.step-number{position:absolute;right:-7px;bottom:-3px;display:grid;place-items:center;width:27px;height:27px;border:3px solid #1e374a;border-radius:50%;background:#f5f9fc;color:#1d435d;font-size:13px;font-weight:700;line-height:1}
.process-steps h3{font-size:21px;font-weight:700;line-height:1.3;letter-spacing:-.45px;min-height:55px;margin:0 0 12px;color:#fff}
.process-steps p{max-width:330px;margin:0;color:#d0dee7;font-size:16px;line-height:1.65}
.process .process-cta{min-height:54px;padding:16px 26px;background:#bce4f6;color:#122d41;font-size:15px;box-shadow:0 4px 15px #0419251a}
.process .process-cta:hover{background:#d2ecf9;color:#122d41}
.process .process-cta:focus-visible{outline:3px solid #fff;outline-offset:5px}
@media(max-width:1000px){.process-steps{gap:30px}.process-steps li:not(:last-child)::after{right:-11px}.process-steps h3{font-size:20px}.process-steps p{font-size:15px}}
@media(max-width:700px){
 .process h2{font-size:32px;line-height:1.13;letter-spacing:-1.3px}
 .process-steps{grid-template-columns:1fr;gap:32px;margin:33px 0 30px}
 .process-steps li{padding-left:87px;min-height:112px}
 .process-steps li:not(:last-child)::after{top:84px;bottom:-12px;left:31px;right:auto;width:1px;height:auto}
 .step-marker{position:absolute;left:0;top:0;margin:0}
 .process-steps h3{font-size:20px;min-height:0;margin:1px 0 10px}
 .process-steps p{font-size:15px;line-height:1.65;max-width:none}
 .process .process-cta{width:100%;padding-inline:16px}
}

/* Service coverage with a quieter map and a clear next step. */
.service-area{grid-template-columns:.95fr 1.15fr;gap:64px;align-items:center}
.service-copy h2{font-size:clamp(30px,3vw,41px);line-height:1.13;letter-spacing:-1.4px;max-width:470px;margin:0}
.service-copy .service-regions{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;margin:26px 0 28px;font-size:16px;font-weight:700;line-height:1.4}
.service-regions li{padding:12px 0;border-bottom:1px solid #dce6ec;color:#294b63}
.service-area .service-cta{min-height:54px;padding:16px 26px;font-size:15px;background:#254c68;color:#fff}
.service-area .service-cta:hover{background:#346885;color:#fff}
.service-area .service-cta:focus-visible{outline:3px solid #80b4d5;outline-offset:4px}
.service-copy .service-contact{margin:20px 0 0;font-size:14px;color:#536877;line-height:1.65}
.service-contact a{display:inline-block;margin-top:4px;color:#234b66;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.service-area .service-map{height:410px;background:#eaf1f5;border:1px solid #d5e2ea;border-radius:12px}
.service-map.leaflet-container{font-family:Arial,Helvetica,sans-serif;cursor:default}
.service-map .leaflet-tile-pane{filter:grayscale(1);opacity:.64}
.service-map .leaflet-tile{outline:1px solid transparent}
.service-map .region-pin{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border:3px solid #fff;border-radius:50%;background:#24536f;box-shadow:0 0 0 1px #7699b0,0 2px 5px #193c5226}
.service-map .region-map-label{position:absolute;left:20px;top:-17px;display:block;transform:none;width:max-content;max-width:none;background:#ffffffef;color:#1d435d;border:1px solid #bbd0df;border-radius:6px;padding:8px 10px;font-size:12px;font-weight:700;line-height:1.25;box-shadow:0 2px 5px #1b3f5410;white-space:nowrap}
.service-map .region-map-label:before{content:"";position:absolute;left:-14px;top:50%;width:13px;height:1px;background:#668ba3}
.service-map .region-map-label.label-left{left:auto;right:20px}
.service-map .region-map-label.label-left:before{left:auto;right:-14px}
.service-map .leaflet-control-attribution{font-size:9px;background:#ffffffde;color:#536877;padding:3px 6px}
.service-map .leaflet-control-attribution a{color:#476a81}
@media(max-width:1000px){.service-area{gap:36px}.service-copy .service-regions{gap:0 18px;font-size:15px}.service-area .service-map{height:390px}}
@media(max-width:700px){
 .service-area{grid-template-columns:1fr;gap:28px}
 .service-copy h2{font-size:32px;max-width:430px}
 .service-copy .service-regions{margin:22px 0 24px;font-size:15px;gap:0 22px}
 .service-area .service-cta{width:100%;padding-inline:16px}
 .service-copy .service-contact{margin-top:18px;font-size:14px}
 .service-area .service-map{height:300px;border-radius:9px}
 .service-map .region-map-label{font-size:11px;padding:7px 8px;top:-15px}
}