/* Proline Roofers Leeds */
:root{--blue:#0B5BC4;--blued:#08449A;--navy:#0B2F63;--navy2:#123B76;--char:#2B2E33;--ink:#22262B;--muted:#56606D;--sky:#EDF2F8;--line:#D3DCE7;--w:1200px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;font-family:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:17px;line-height:1.65;color:var(--ink);background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}
h1,h2,h3{font-family:'Archivo','Arial Narrow',Arial,sans-serif;font-stretch:78%;font-weight:800;line-height:1.02;margin:0 0 .45em;color:var(--char);letter-spacing:-.005em}
h2{font-size:clamp(2rem,4vw,3rem)}
h3{font-size:1.32rem;font-stretch:85%;font-weight:700;line-height:1.15}
p{margin:0 0 1em}
:focus-visible{outline:3px solid #F2B233;outline-offset:3px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 22px}
.narrow{max-width:900px}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--ink);padding:10px 14px;z-index:99}.skip:focus{left:10px}

/* roofline divider */
.sky{height:52px;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672 52" width="672" height="52"><g fill="%230B2F63"><path d="M0 46 L32 22 L64 46 L96 22 L128 46 L160 22 L192 46 L238 12 L284 46 L316 22 L348 46 L380 22 L412 46 L438 26 L464 46 L504 16 L544 46 L576 22 L608 46 L640 22 L672 46 L672 52 L0 52Z"/><rect x="44" y="21" width="10" height="17"/><rect x="41.5" y="18" width="14" height="4"/><rect x="172" y="21" width="10" height="17"/><rect x="169.5" y="18" width="14" height="4"/><rect x="328" y="21" width="10" height="17"/><rect x="325.5" y="18" width="14" height="4"/><rect x="447" y="24" width="10" height="17"/><rect x="445.4" y="21" width="14" height="4"/><rect x="588" y="21" width="10" height="17"/><rect x="585.5" y="18" width="14" height="4"/></g></svg>') repeat-x left bottom;background-size:auto 52px;margin-top:-1px}
.sky.foot-sky{margin-top:0}

/* header */
.hdr{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:18px;min-height:84px}
.logo{display:block;flex-shrink:0;line-height:0}
.logo img{height:62px;width:auto}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{color:var(--char);text-decoration:none;font-weight:600;font-size:.92rem;padding:10px 9px;white-space:nowrap;border-bottom:3px solid transparent}
.nav a:hover{color:var(--blue)}
.nav a[aria-current=page]{border-bottom-color:var(--blue);color:var(--blue)}
.hdr-call{flex-shrink:0}
.hdr-phone{display:block;text-decoration:none;color:var(--blue);font-family:'Archivo',sans-serif;font-stretch:80%;font-weight:800;font-size:1.45rem;line-height:1.1;white-space:nowrap}
.hdr-phone span{display:block;font-family:'Public Sans',sans-serif;font-size:.72rem;font-weight:600;color:var(--muted)}
.burger{display:none;margin-left:auto;background:none;border:2px solid var(--line);width:48px;height:44px;border-radius:4px;cursor:pointer}
.burger span,.burger span::before,.burger span::after{display:block;width:22px;height:2px;background:var(--char);margin:0 auto;position:relative;content:''}
.burger span::before{position:absolute;top:-7px}.burger span::after{position:absolute;top:7px}
@media (max-width:1240px){
 .burger{display:block}.hdr .wrap{position:relative}
 .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;padding:8px 22px 18px;margin:0;border-bottom:3px solid var(--blue);box-shadow:0 18px 30px -18px rgba(11,47,99,.35)}
 .nav.open{display:flex}.nav a{padding:13px 4px;border-bottom:1px solid var(--line);font-size:1.02rem}
 .nav a[aria-current=page]{border-bottom-color:var(--line)}
}
@media (max-width:640px){.hdr-phone{display:none}.logo img{height:50px}.hdr .wrap{min-height:72px}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:12px 24px;background:var(--blue);color:#fff;border:2px solid var(--blue);border-radius:4px;font-family:'Archivo',sans-serif;font-stretch:85%;font-weight:700;font-size:1.08rem;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}
.btn:hover{background:var(--blued);border-color:var(--blued)}
.btn.ghost{background:transparent;color:var(--char);border-color:var(--char)}.btn.ghost:hover{background:var(--char);color:#fff}
.btn.light{background:#fff;color:var(--navy);border-color:#fff}.btn.light:hover{background:var(--sky)}
.btn svg{width:18px;height:18px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* gable-shaped photo frame: blue ridge line over an image cut to a pitched roof */
.gable{position:relative;aspect-ratio:4/5;width:100%}
.gable img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:polygon(50% 11%,100% 37%,100% 100%,0 100%,0 37%)}
.gable::before{content:"";position:absolute;inset:0;background:var(--blue);clip-path:polygon(50% 0,100% 26%,100% 33%,50% 7%,0 33%,0 26%)}
.gable::after{content:"";position:absolute;top:9%;right:14%;width:9%;height:13%;background:var(--char);clip-path:polygon(0 18%,100% 0,100% 100%,0 100%)}

/* home hero */
.hero{padding:48px 0 0;background:#fff}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end}
.hero-txt{padding-bottom:56px}
.hero h1{font-size:clamp(3.2rem,8.4vw,6.6rem);font-stretch:72%;line-height:.92;margin-bottom:.32em}
.hero h1 small{display:block;font-size:.3em;font-stretch:90%;font-weight:700;color:var(--blue);line-height:1.2;margin-bottom:.5em;letter-spacing:.01em}
.lede{font-size:1.18rem;color:#3A414B;max-width:34em}
.hero .gable{max-width:470px;justify-self:end}
.jobs{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.jobs a{display:block;padding:7px 13px;border:1px solid var(--line);border-radius:999px;font-size:.88rem;font-weight:600;color:var(--char);text-decoration:none;background:#fff}
.jobs a:hover{border-color:var(--blue);color:var(--blue)}

/* quick quote */
.qwrap{background:var(--navy);color:#fff;padding:30px 0 34px}
.qbar{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:end}
.qbar h2{color:#fff;font-size:2rem;margin:0 0 .15em}
.qbar-head p{margin:0;color:#C9D6EA;font-size:.95rem}
.qbar .f{display:grid;grid-template-columns:1fr 1fr 1.3fr .8fr auto;gap:12px;align-items:end}
.qbar label{color:#DCE6F4}
.qbar .btn{background:#fff;color:var(--navy);border-color:#fff}.qbar .btn:hover{background:var(--sky)}

/* forms */
.f label{display:block;font-size:.85rem;font-weight:700;margin-bottom:5px}
.f input,.f select,.f textarea{width:100%;min-height:50px;padding:11px 13px;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1.5px solid #B9C5D4;border-radius:4px}
.f textarea{min-height:130px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--blue);outline:2px solid rgba(11,91,196,.25)}
.f .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.panel .f{display:grid;gap:16px}

/* sections */
.sec{padding:84px 0}
.sec.tint{background:var(--sky)}
.sec.dark{background:var(--navy);color:#E2EAF5}
.sec.dark h2,.sec.dark h3{color:#fff}
.sec-head{max-width:720px;margin-bottom:36px}
.sec-head p{color:var(--muted);font-size:1.08rem}
.sec.dark .sec-head p{color:#BFD0E8}
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.split.flip{grid-template-columns:.85fr 1.15fr}
.split figure img{border-radius:4px}
figure{margin:0}
figcaption{font-size:.86rem;color:var(--muted);margin-top:8px}
.facts{margin:0;border-top:4px solid var(--blue);background:var(--sky);padding:8px 24px}
.facts div{padding:13px 0;border-bottom:1px solid var(--line)}
.facts div:last-child{border-bottom:0}
.facts dt{font-size:.8rem;font-weight:700;color:var(--muted)}
.facts dd{margin:2px 0 0;font-weight:600}

/* services index */
.svc-list{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;border-top:2px solid var(--char)}
.svc-list a{display:grid;grid-template-columns:132px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);align-items:center}
.svc-list img{width:132px;height:112px;object-fit:cover;border-radius:3px}
.svc-list h3{margin-bottom:.25em}
.svc-list p{margin:0;color:var(--muted);font-size:.97rem}
.svc-list a:hover h3{color:var(--blue)}

/* dormer feature */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pair img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:3px}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding:6px 0 6px 28px}
.ticks li::before{content:"";position:absolute;left:2px;top:15px;width:14px;height:8px;border-left:3px solid var(--blue);border-bottom:3px solid var(--blue);transform:rotate(-45deg)}
.sec.dark .ticks li::before{border-color:#8DB6EE}
.cols2{columns:2;column-gap:32px}.cols2 li{break-inside:avoid}

/* gallery */
.gal{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:12px}
.gal li{position:relative;overflow:hidden;border-radius:3px}
.gal li.tall{grid-row:span 2}
.gal li.big{grid-row:span 2;grid-column:span 2}
.gal figure,.gal img{height:100%}
.gal img{width:100%;object-fit:cover}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:26px 12px 10px;color:#fff;font-size:.84rem;font-weight:600;background:linear-gradient(transparent,rgba(8,26,54,.85))}

/* review */
.rev{margin:0;border-left:6px solid var(--blue);padding:6px 0 6px 30px}
.rev blockquote{margin:0}
.rev p{font-family:'Archivo',sans-serif;font-stretch:88%;font-weight:600;font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.35;color:var(--char)}
.rev figcaption{font-size:.95rem;font-weight:700;color:var(--muted);margin-top:4px}

/* keyword lists */
.kw{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.kw h3{padding-bottom:10px;border-bottom:2px solid var(--char)}

/* steps (a real sequence) */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:s}
.steps li{counter-increment:s;padding-top:18px;border-top:4px solid var(--blue)}
.steps li::before{content:counter(s);display:block;font-family:'Archivo',sans-serif;font-stretch:75%;font-weight:800;font-size:2.4rem;line-height:1;color:var(--blue);margin-bottom:10px}
.steps p{color:var(--muted);margin:0}

/* why */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 56px}
.why div{padding-left:20px;border-left:3px solid #8DB6EE}
.why p{margin:0;color:#C9D6EA}

/* near me */
.near{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.near article{background:#fff;border:1px solid var(--line);border-top:4px solid var(--char);padding:26px 26px 20px}
.near p{color:var(--muted)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.chips li{font-size:.84rem;font-weight:600;padding:4px 11px;background:var(--sky);border-radius:999px}

/* faq */
.faq{max-width:860px;border-top:2px solid var(--char)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:19px 44px 19px 0;font-weight:700;font-size:1.06rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:24px;width:11px;height:11px;border-right:3px solid var(--blue);border-bottom:3px solid var(--blue);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);top:30px}
.faq details p{padding:0 0 20px;margin:0;color:#3A414B;max-width:70ch}

/* areas */
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{padding:6px 13px;border:1px solid rgba(255,255,255,.28);border-radius:999px;font-size:.9rem}
.area-grp{padding:34px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.3fr;gap:44px}
.area-grp:first-child{border-top:0;padding-top:0}
.area-grp .chips li{background:#fff;border:1px solid var(--line)}
.sec.tint .area-grp{border-color:#C8D3E1}

/* contact */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.bigphone{display:inline-block;font-family:'Archivo',sans-serif;font-stretch:75%;font-weight:800;font-size:clamp(2.4rem,5vw,3.5rem);line-height:1;color:var(--blue);text-decoration:none;margin:6px 0 20px}
.meta{list-style:none;margin:22px 0 0;padding:0}
.meta li{padding:12px 0;border-top:1px solid #C8D3E1}
.meta b{display:block;font-size:.8rem;color:var(--muted)}
.panel{background:#fff;border-top:5px solid var(--blue);padding:30px;box-shadow:0 22px 40px -28px rgba(11,47,99,.45)}

/* call band */
.band{background:var(--blue);color:#fff;padding:40px 0}
.band .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.band h2{color:#fff;margin:0 0 .15em;font-size:clamp(1.7rem,3vw,2.3rem)}
.band p{margin:0;color:#DCE8F8}

/* service pages */
.phero{background:var(--sky);padding:40px 0 0}
.phero-in{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:end}
.phero-txt{padding-bottom:48px}
.phero h1{font-size:clamp(2.6rem,6.2vw,4.8rem);font-stretch:72%;line-height:.95}
.phero .gable{max-width:380px;justify-self:end}
.crumbs{font-size:.88rem;color:var(--muted);margin-bottom:16px}
.crumbs a{color:var(--muted)}
.svc-body{display:grid;grid-template-columns:1fr 320px;gap:56px;align-items:start}
.svc-main>section{margin-bottom:46px}
.svc-main>section:last-child{margin-bottom:0}
.svc-main h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.answer{font-size:1.15rem;padding:20px 24px;background:var(--sky);border-left:5px solid var(--blue);margin:0}
.photos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.photos img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
.aside{position:sticky;top:104px}
.callbox{background:var(--navy);color:#DCE6F4;padding:26px;border-top:5px solid var(--blue)}
.callbox h3{color:#fff}
.callbox .num{display:block;font-family:'Archivo',sans-serif;font-stretch:75%;font-weight:800;font-size:2.2rem;color:#fff;text-decoration:none;line-height:1.1;margin-bottom:10px}
.callbox .btn{width:100%;background:#fff;color:var(--navy);border-color:#fff}
.aside nav{margin-top:22px;border-top:2px solid var(--char)}
.aside nav h3{margin:14px 0 6px;font-size:1.1rem}
.aside nav a{display:block;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none;font-weight:600;color:var(--char)}
.aside nav a:hover{color:var(--blue)}
.note{font-size:.95rem;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}

/* footer */
.foot{background:var(--navy);color:#C3D2E8;padding:30px 0 30px;font-size:.95rem}
.foot .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:36px}
.foot h3{color:#fff;font-size:1.1rem}
.foot .fname{font-family:'Archivo',sans-serif;font-stretch:78%;font-weight:800;font-size:1.6rem;color:#fff;margin-bottom:10px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{padding:4px 0}
.foot a{color:#E2EAF5;text-decoration:none}.foot a:hover{text-decoration:underline}
.foot .base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);font-size:.85rem;color:#9FB3D1}
.callbar{display:none}

@media (max-width:1060px){
 .qbar{grid-template-columns:1fr}
 .qbar .f{grid-template-columns:1fr 1fr}
 .qbar .f .btn{grid-column:1/-1}
 .steps{grid-template-columns:repeat(2,1fr)}
 .svc-body{grid-template-columns:1fr}
 .aside{position:static}
 .foot .grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
 .hero .wrap,.phero-in,.split,.split.flip,.contact,.area-grp{grid-template-columns:1fr}
 .hero-txt,.phero-txt{padding-bottom:0}
 .hero .gable,.phero .gable{justify-self:center;max-width:420px}
 .svc-list{grid-template-columns:1fr}
 .kw{grid-template-columns:1fr;gap:28px}
 .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
 .why,.near{grid-template-columns:1fr}
 .sec{padding:64px 0}
}
@media (max-width:640px){
 body{padding-bottom:62px}
 .svc-list a{grid-template-columns:96px 1fr;gap:14px}
 .svc-list img{width:96px;height:96px}
 .f .two,.qbar .f{grid-template-columns:1fr}
 .steps,.photos{grid-template-columns:1fr}
 .cols2{columns:1}
 .gal li.big{grid-column:span 2}
 .foot .grid{grid-template-columns:1fr}
 .panel{padding:22px 18px}
 .callbar{display:grid;grid-template-columns:1.3fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:70;box-shadow:0 -6px 18px rgba(0,0,0,.18)}
 .callbar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:62px;font-family:'Archivo',sans-serif;font-stretch:85%;font-weight:700;font-size:1.05rem;text-decoration:none;color:#fff;background:var(--blue)}
 .callbar a+a{background:var(--navy)}
 .callbar svg{width:18px;height:18px}
}