/* Wrexham Roofing - static website stylesheet */
:root{--ink:#111814;--forest:#0b4f32;--green:#20b967;--dark:#101614;--red:#be1723;--paper:#fff;--mist:#f1f6f3;--line:#dbe6df;--text:#27362d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--text);font:17px/1.65 Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit}img{max-width:100%;display:block}.container{width:min(1180px,calc(100% - 40px));margin:auto}.narrow{max-width:860px}.skip-link{position:absolute;top:-90px;left:20px;background:#fff;color:#111;padding:12px;z-index:1000}.skip-link:focus{top:10px}.site-header{background:var(--dark);color:#fff;border-top:6px solid var(--red)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:35px;min-height:134px}.logo img{width:258px;height:auto;max-height:145px;object-fit:contain}.header-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}.header-right>span{font-size:12px;letter-spacing:.14em;font-weight:900;color:#c8dfd1}.top-phone{font-size:clamp(26px,3.6vw,45px);font-family:Impact,'Arial Narrow',Arial,sans-serif;letter-spacing:.015em;font-weight:900;text-decoration:none;color:#fff;animation:flash-light 2.1s steps(1,end) infinite}.header-quote{margin-top:12px;color:#d9ffe6;font-size:13px;text-decoration:none;font-weight:900;letter-spacing:.08em}.header-quote:hover{text-decoration:underline}.main-nav{background:#fff;box-shadow:0 3px 18px rgba(0,0,0,.07);position:relative;z-index:15;border-bottom:4px solid var(--green)}.nav-inner{display:flex;align-items:stretch;justify-content:space-between;gap:0}.main-nav a,.more-nav summary{display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;text-decoration:none;font-size:12px;letter-spacing:.04em;font-weight:900;line-height:1.3;padding:20px 9px;color:#111814;cursor:pointer}.main-nav a:hover,.main-nav a[aria-current=page],.more-nav[open]>summary{color:#fff;background:var(--forest)}.more-nav{position:relative}.more-nav summary{list-style:none}.more-nav summary::-webkit-details-marker{display:none}.more-links{position:absolute;right:0;top:100%;width:min(700px,94vw);padding:13px;background:#fff;box-shadow:0 12px 30px rgba(10,24,15,.18);display:grid;grid-template-columns:1fr 1fr;z-index:25;border:1px solid var(--line)}.more-links a{justify-content:flex-start;white-space:normal;text-align:left;padding:10px 14px}.hero{background:linear-gradient(140deg,#f2f7f3,#fff);border-bottom:1px solid var(--line)}.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:42px;min-height:530px;align-items:stretch}.hero-copy{padding:64px 0 54px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.eyebrow{font-size:12px;font-weight:900;letter-spacing:.17em;line-height:1.5;color:var(--forest);text-transform:uppercase;margin:0 0 16px}.eyebrow.light{color:#a5eebf}.dot{display:inline-block;background:var(--red);width:9px;height:9px;margin-right:10px;transform:rotate(45deg)}h1,h2,h3,.btn,.read-more,.benefits-bar,.media-caption,.header-quote{font-family:Impact,'Arial Narrow',Arial,Helvetica,sans-serif;font-weight:900;text-transform:uppercase}h1,h2,h3{color:var(--ink)}h1{font-size:clamp(49px,6.3vw,88px);line-height:.98;letter-spacing:-.013em;margin:0;max-width:740px}h2{font-size:clamp(34px,4.1vw,58px);line-height:1.05;letter-spacing:-.01em;margin:0 0 23px}h3{font-size:23px;line-height:1.1;margin:0 0 12px}p{margin:0 0 18px}.hero-lead{font-size:clamp(18px,2vw,23px);line-height:1.5;margin:22px 0 0;max-width:620px}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:53px;border:2px solid var(--dark);padding:12px 19px;text-decoration:none;font-size:19px;line-height:1.2;letter-spacing:.02em;cursor:pointer;transition:transform .15s ease,box-shadow .15s}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(17,24,20,.18)}.btn-dark{background:var(--dark);color:#fff}.btn-primary{background:var(--green);color:#081b10;border-color:var(--green)}.btn-outline{color:var(--dark);background:transparent}.btn-outline-light{color:#fff;border-color:#fff;background:transparent}.hero-trust{display:flex;flex-wrap:wrap;gap:13px;color:#4a5c51;font-size:11px;font-weight:900;letter-spacing:.02em}.hero-trust b{color:var(--forest);margin-right:5px}.hero-media{min-width:0;position:relative;min-height:430px;margin:30px 0 30px;overflow:hidden;background:#dce6df;border:7px solid #fff;box-shadow:0 8px 35px rgba(0,0,0,.12)}.hero-media>img{height:100%;width:100%;object-fit:cover;position:absolute;inset:0}.media-caption{position:absolute;bottom:16px;left:0;background:var(--dark);color:#fff;padding:10px 18px;font-size:15px;letter-spacing:.03em}.media-caption span{color:#b2f1c4;margin-left:14px}.benefits-bar{background:var(--forest);color:#fff}.benefits-bar .container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:16px 0;font-size:15px;letter-spacing:.03em}.section{padding:74px 0}.section-muted{background:var(--mist)}.section-title-row{display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:end;margin-bottom:32px}.section-title-row h2{margin:0}.section-title-row h2 em{font-style:normal;color:var(--forest)}.section-title-row p{font-size:19px}.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}.service-card{background:#fff;border:1px solid var(--line);border-bottom:5px solid var(--green);overflow:hidden}.service-image{display:block;overflow:hidden;background:#e2e8e4;height:205px}.service-image img{width:100%;height:100%;object-fit:cover;transition:transform .25s}.service-card:hover .service-image img{transform:scale(1.04)}.service-body{padding:20px}.service-body h3{font-size:25px;line-height:1.05}.service-body h3 a{text-decoration:none}.service-body p{font-size:15px;line-height:1.5;min-height:67px}.read-more{color:var(--forest);font-size:15px;letter-spacing:.03em;text-decoration:none;display:inline-flex;gap:8px;align-items:center}.read-more:hover{text-decoration:underline}.small-grid{gap:15px}.small-grid .service-image{height:170px}.small-grid .service-body{padding:15px}.small-grid .service-body h3{font-size:23px}.under-grid{margin-top:24px}.text-link{font-weight:900;text-decoration:underline;text-underline-offset:4px;color:var(--forest)}.split-feature{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.feature-image{min-width:0}.feature-image>img{height:470px;object-fit:cover;width:100%;border:8px solid #fff;box-shadow:0 5px 25px rgba(0,0,0,.08)}.tick-list{list-style:none;margin:21px 0 29px;padding:0}.tick-list li{position:relative;margin:0 0 10px;padding:11px 14px 11px 38px;border-left:4px solid var(--green);background:#fff;font-weight:700}.tick-list li::before{content:'✓';position:absolute;left:13px;color:var(--forest);font-weight:900}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.steps>div{padding:28px;background:var(--mist);border-top:6px solid var(--green)}.steps span{font:900 64px/1 Impact,Arial,sans-serif;color:var(--forest);display:block;margin-bottom:20px}.steps p{margin:0}.call-section{background:var(--dark);color:#fff;padding:58px 0;border-top:6px solid var(--red)}.call-section h2{color:#fff;margin-bottom:10px}.call-section p{color:#e5f0e8}.call-flex{display:flex;align-items:center;justify-content:space-between;gap:30px}.call-flex>div:first-child{max-width:670px}.call-actions{display:flex;flex-direction:column;gap:12px;min-width:260px}.area-chips{display:flex;flex-wrap:wrap;gap:9px;margin:23px 0 29px}.area-chips a{background:var(--dark);color:#fff;text-decoration:none;font-size:13px;font-weight:800;padding:9px 13px}.area-chips a:hover{background:var(--forest)}.intro-wide{max-width:800px;font-size:18px}.quote-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;max-width:940px}.quote-form label{display:block;font-size:14px;color:var(--ink);font-weight:800}.quote-form input,.quote-form select,.quote-form textarea{display:block;appearance:none;background:#fff;border:2px solid #bdcec3;border-radius:0;padding:13px;font:17px Arial,sans-serif;margin-top:7px;width:100%;min-width:0;color:var(--ink)}.quote-form input:focus,.quote-form textarea:focus,.quote-form select:focus{outline:3px solid #a2e7be;outline-offset:0;border-color:var(--forest)}.quote-form .full{grid-column:1/-1}.form-submit{display:flex;align-items:center;flex-wrap:wrap;gap:20px}.form-submit p{margin:0}.form-submit a{font-weight:900;color:var(--forest)}.bot-trap{position:absolute;left:-10000px;height:1px;width:1px;overflow:hidden}.narrow>p,.legal-copy p{font-size:18px}.article-rule{border-top:2px solid var(--line);margin:35px 0}.narrow h2:not(:first-child){margin-top:12px}.narrow .tick-list{margin-top:15px}.faq-list details{background:#fff;border:1px solid var(--line);margin:0 0 10px;padding:16px 20px}.faq-list summary{font-weight:900;cursor:pointer;font-size:18px;color:var(--ink)}.faq-list details[open]{border-left:5px solid var(--green)}.faq-list p{padding-top:14px;margin:0}.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.gallery-item{margin:0;background:#f1f5f2;border:1px solid var(--line)}.gallery-item img{height:210px;width:100%;object-fit:cover}.gallery-item figcaption{padding:10px 11px;font-size:12px;font-weight:800}.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:start}.contact-details{border-top:2px solid var(--line);margin:28px 0}.contact-details>div{padding:20px 0;border-bottom:1px solid var(--line)}.contact-details span{display:block;font-weight:900;color:var(--forest);font-size:12px;letter-spacing:.1em}.contact-details a,.contact-details strong{display:block;font-size:20px;font-weight:900;text-decoration:none;overflow-wrap:anywhere}.contact-details a[href^="tel"]{color:var(--ink);animation:flash-dark 2.1s steps(1,end) infinite}.contact-form-wrap{background:var(--mist);padding:30px}.contact-form-wrap h2{font-size:35px}.contact-form-wrap .quote-form{grid-template-columns:1fr}.contact-form-wrap .quote-form .full{grid-column:1}.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.area-entry{border:1px solid var(--line);padding:22px;background:var(--mist);scroll-margin-top:30px}.area-entry h3{font-size:26px}.area-entry p{font-size:15px}.legal-copy{line-height:1.7}.legal-copy h2{font-size:33px;margin:32px 0 13px}.legal-copy li{margin-bottom:9px}.small-note{font-size:13px;color:#62746a}.site-footer{background:var(--dark);color:#fff;border-top:7px solid var(--green);padding:54px 0 14px}.footer-grid{display:grid;grid-template-columns:1.15fr 1fr .75fr;gap:45px}.footer-brand img{width:230px;max-height:120px;object-fit:contain;margin-bottom:12px}.footer-brand p{color:#c5d8cb;max-width:280px}.footer-brand>a{display:block;text-decoration:none;margin:8px 0;color:#fff}.footer-brand .footer-phone{font:900 29px/1.2 Impact,'Arial Narrow',Arial,sans-serif;animation:flash-light 2.1s steps(1,end) infinite;white-space:nowrap}.footer-nav h2{color:#fff;font-size:21px;margin:8px 0 16px}.footer-nav>a,.socials>a{display:block;color:#d9e9de;font-size:14px;text-decoration:none;padding:4px 0}.footer-nav>a:hover,.socials a:hover{color:#b6f9cf;text-decoration:underline}.socials{border-top:1px solid #34443a;margin-top:15px;padding-top:12px;display:flex;gap:13px;flex-wrap:wrap}.footer-bottom{border-top:1px solid #33463b;margin-top:30px;padding-top:15px;display:flex;justify-content:space-between;color:#b1c4b5;font-size:12px}.mobile-contact{display:none}@keyframes flash-light{0%,100%{color:#fff}50%{color:#98ffc3}}@keyframes flash-dark{0%,100%{color:#111814}50%{color:#08653a}}@keyframes flash-button{0%,100%{background:#101614;border-color:#101614;color:#fff}50%{background:#0b633d;border-color:#0b633d;color:#fff}}.btn-flash{animation:flash-button 2.2s steps(1,end) infinite}.btn-flash:hover{animation-play-state:paused}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #e12d3b;outline-offset:2px}@media(max-width:1120px){.main-nav a,.more-nav summary{font-size:11px;padding:18px 6px}.hero-grid{gap:25px}}@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:0}.hero-copy{padding:45px 0 25px}.hero-media{min-height:330px;height:350px;margin:0 0 34px}.section-title-row,.split-feature,.contact-grid{grid-template-columns:1fr;gap:28px}.service-grid,.area-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-grid{grid-template-columns:1fr 1fr;gap:25px}.footer-brand{grid-column:1/-1}.call-flex{flex-direction:column;align-items:start}.call-actions{flex-direction:row}.nav-inner{overflow-x:auto;justify-content:flex-start}.main-nav a,.more-nav summary{font-size:12px;padding:17px 12px}.more-nav{position:static}.more-links{left:20px;right:20px;top:auto;width:auto}.hero-trust{gap:10px}.steps{grid-template-columns:1fr}}@media(max-width:600px){.container{width:min(100% - 28px,1180px)}body{font-size:16px;padding-bottom:68px}.header-inner{min-height:0;gap:12px;padding:12px 0}.logo img{width:156px;max-height:95px}.header-right>span{font-size:8px;letter-spacing:0}.top-phone{font-size:24px;white-space:nowrap}.header-quote{font-size:10px;letter-spacing:0}.hero-copy{padding:32px 0 24px}.hero h1{font-size:clamp(42px,10.7vw,63px);overflow-wrap:break-word}.hero-lead{font-size:17px;margin-top:17px}.hero-actions{margin:20px 0}.hero-actions .btn{font-size:16px}.hero-trust{font-size:10px}.hero-media{height:245px;min-height:245px;border-width:4px}.media-caption{font-size:12px;padding:9px}.media-caption span{margin-left:6px}.benefits-bar .container{justify-content:center;text-align:center;font-size:12px;gap:10px}.section{padding:46px 0}.section h2{font-size:clamp(35px,9vw,49px)}.service-grid,.area-grid,.photo-grid{grid-template-columns:1fr}.service-image{height:205px}.service-body p{min-height:0}.section-title-row{margin-bottom:24px}.feature-image>img{height:275px}.steps>div{padding:19px}.steps span{font-size:47px}.quote-form{grid-template-columns:1fr}.quote-form .full{grid-column:1}.call-section{padding:43px 0}.call-actions{flex-direction:column;min-width:0;width:100%}.call-actions .btn{width:100%}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.footer-bottom{flex-direction:column;gap:5px}.contact-form-wrap{padding:18px}.mobile-contact{position:fixed;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;bottom:0;left:0;right:0;background:#121a16;padding:5px;z-index:200;box-shadow:0 -5px 18px rgba(0,0,0,.18)}.mobile-contact a{display:flex;align-items:center;justify-content:center;min-height:52px;text-decoration:none;text-align:center;font:900 14px/1 Impact,'Arial Narrow',Arial,sans-serif;letter-spacing:.02em;color:#fff;animation:shimmer 2.8s ease-in-out infinite}.mobile-call{background:#0c8b4c}.mobile-email{background:#007db2;animation-delay:.4s!important}.mobile-quote{background:#ba196c;animation-delay:.8s!important}.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery-item img{height:130px}.gallery-item figcaption{font-size:11px}}@keyframes shimmer{0%,100%{filter:brightness(1)}50%{filter:brightness(1.4)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
/* Location landing pages, shared across the 21 towns and villages */
.crumbs{background:#eaf3ed;border-bottom:1px solid var(--line)}
.crumbs .container{display:flex;gap:11px;align-items:center;flex-wrap:wrap;padding:11px 0;font-size:13px;font-weight:700}
.crumbs a{color:var(--forest);text-decoration:underline;text-underline-offset:3px}
.crumbs span[aria-current="page"]{color:var(--ink)}
.location-hero .hero-grid{min-height:445px}
.location-hero .hero-copy{padding-top:48px;padding-bottom:48px}
.location-hero .hero-media{min-height:330px}
.location-hero h1{font-size:clamp(42px,5.6vw,78px);line-height:1.02}
.location-service-link{display:flex;flex-wrap:wrap;gap:28px;margin-top:25px}
.location-text-grid{display:grid;grid-template-columns:1.5fr .85fr;gap:55px;align-items:start}
.location-aside{background:#fff;padding:27px;border-top:6px solid var(--green);box-shadow:0 8px 22px rgba(10,24,15,.06)}
.location-aside h3{font-size:25px}.location-aside ol{padding-left:20px;margin:15px 0 25px}.location-aside li{padding-bottom:10px}
.location-aside .btn{font-size:16px;width:100%}.area-entry h3 a{color:var(--ink);text-decoration:none}.area-entry h3 a:hover{text-decoration:underline}
.area-intro{max-width:790px}
@media(max-width:860px){.location-text-grid{grid-template-columns:1fr;gap:28px}.location-hero .hero-media{min-height:320px}}
@media(max-width:600px){.location-hero h1{font-size:clamp(43px,10.2vw,62px)}.location-hero .hero-copy{padding:30px 0 20px}.location-hero .hero-media{min-height:240px}.location-aside{padding:19px}}