/*
Theme Name: Easytile Roofing Solutions
Theme URI: https://easytileroofingsolutions.com
Author: Easytile Roofing Solutions
Description: Premium black, charcoal, silver and gold custom WordPress theme for Easytile Roofing Solutions, South Wales.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: easytile-roofing
*/
:root{--bg:#08090b;--bg2:#0e1013;--panel:#12151a;--panel2:#171b21;--gold:#d7ae36;--gold2:#f0ca5a;--white:#f7f7f5;--silver:#cfd2d7;--muted:#aeb3ba;--line:rgba(215,174,54,.34);--radius:20px;--shadow:0 18px 50px rgba(0,0,0,.34)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--white);font-family:Arial,Helvetica,sans-serif;line-height:1.58}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.wrap{width:min(1200px,92%);margin:auto}.gold{color:var(--gold2)}.muted{color:var(--muted)}
.site-top{background:#050607;border-bottom:1px solid #1d2025;color:#c8ccd2;font-size:13px}.site-top .wrap{display:flex;justify-content:space-between;gap:20px;padding:8px 0;flex-wrap:wrap}.header{position:sticky;top:0;z-index:99;background:rgba(7,8,10,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.07)}.header-row{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:88px}.logo img{width:210px;max-height:72px;object-fit:contain}.nav{display:flex;gap:21px;align-items:center;font-size:14px;font-weight:700}.nav a{padding:32px 0 28px;border-bottom:2px solid transparent}.nav a:hover,.nav .current{color:var(--gold2);border-color:var(--gold)}.nav .drop{position:relative}.nav .dropmenu{display:none;position:absolute;top:72px;left:-15px;width:270px;background:#0d0f12;border:1px solid var(--line);box-shadow:var(--shadow);padding:10px}.nav .drop:hover .dropmenu{display:block}.nav .dropmenu a{display:block;padding:10px 12px;border:0;color:#ddd}.nav .dropmenu a:hover{background:#171a1f;color:var(--gold2)}.call-btn,.gold-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border:1px solid var(--gold);background:linear-gradient(135deg,#b48412,#e0bb4b);color:#0b0c0e;font-weight:800;text-transform:uppercase;letter-spacing:.02em}.outline-btn{display:inline-flex;padding:12px 20px;border:1px solid var(--gold);color:#fff;font-weight:800;text-transform:uppercase}.mobile-toggle{display:none;background:none;color:#fff;border:1px solid var(--gold);padding:9px 12px;font-size:20px}
.hero{min-height:650px;position:relative;display:flex;align-items:center;background:linear-gradient(90deg,rgba(5,6,8,.98) 0%,rgba(5,6,8,.9) 39%,rgba(5,6,8,.26) 74%),url('assets/images/hero-roof.jpg') center/cover no-repeat;border-bottom:1px solid var(--gold)}.hero-content{max-width:750px;padding:75px 0}.eyebrow{color:var(--gold2);font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.hero h1{font-size:clamp(48px,7vw,86px);line-height:.96;margin:13px 0 18px;letter-spacing:-.04em}.hero h1 span{color:var(--gold2)}.hero .lead{font-size:18px;color:#e1e3e7;max-width:650px}.buttons{display:flex;gap:14px;flex-wrap:wrap;margin-top:27px}.badge30{position:absolute;right:7%;bottom:40px;background:rgba(10,11,13,.92);border:2px solid var(--gold);padding:22px 28px;text-align:center;min-width:150px}.badge30 strong{display:block;color:var(--gold2);font-size:44px;line-height:1}.badge30 span{font-size:12px;letter-spacing:.08em}
.icon-strip{border-bottom:1px solid var(--gold);background:#0b0c0e}.icon-grid{display:grid;grid-template-columns:repeat(7,1fr)}.icon-item{padding:18px 10px;text-align:center;border-right:1px solid var(--line);font-size:12px;text-transform:uppercase}.icon-item:last-child{border-right:0}.icon-item b{display:block;color:var(--gold2);font-size:23px;margin-bottom:4px}
section{padding:78px 0}.section-head{text-align:center;margin-bottom:34px}.section-head .eyebrow{margin-bottom:6px}.section-head h2{font-size:clamp(32px,4.4vw,52px);margin:0}.section-head p{max-width:760px;margin:12px auto 0;color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}.service-card{background:linear-gradient(180deg,#171a1f,#0f1114);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}.service-card img{height:185px;width:100%;object-fit:cover}.service-card .pad{padding:20px}.service-card h3{margin:0 0 8px;font-size:18px}.service-card p{color:var(--muted);font-size:14px;margin:0 0 16px}.learn{color:var(--gold2);font-size:12px;font-weight:800;text-transform:uppercase}.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:center}.split-image{border:1px solid var(--line);box-shadow:var(--shadow)}.checks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.check{color:#d8dbe0}.check:before{content:'✓';color:var(--gold2);font-weight:900;margin-right:9px}
.gallery-shell{overflow:hidden}.gallery-track{display:flex;gap:12px;transition:transform .45s ease}.gallery-tile{min-width:calc(25% - 9px);border:1px solid var(--line);background:#111;position:relative;overflow:hidden}.gallery-tile img{width:100%;height:220px;object-fit:cover}.gallery-tile span{position:absolute;left:0;right:0;bottom:0;padding:11px 12px;background:linear-gradient(transparent,rgba(0,0,0,.95));font-weight:700}.gallery-controls{display:flex;justify-content:center;gap:10px;margin-top:16px}.round-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--gold);background:#0d0f12;color:var(--gold2);font-size:22px}.ai-note{font-size:12px;color:#777e87;text-align:center;margin-top:10px}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.review{background:#101216;border:1px solid #292d33;padding:25px;min-height:210px}.stars{color:var(--gold2);letter-spacing:.13em}.review p{color:#e3e5e9}.review small{color:#9198a1}.coverage{background:#0f1114;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.coverage-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:32px;align-items:center}.mapbox{position:relative;min-height:390px;border:1px solid var(--line);overflow:hidden;background:#0b0e11}.mapbox iframe{width:100%;height:390px;border:0;filter:grayscale(1) invert(.88) hue-rotate(175deg) brightness(.74) contrast(1.2)}.area-pills{display:flex;flex-wrap:wrap;gap:9px}.pill{padding:9px 12px;border:1px solid var(--line);background:#12151a;color:#ddd}
.page-hero{padding:85px 0 55px;background:linear-gradient(90deg,rgba(5,6,8,.96),rgba(5,6,8,.6)),url('assets/images/hero-roof.jpg') center/cover;border-bottom:1px solid var(--gold)}.page-hero h1{font-size:clamp(42px,6vw,70px);margin:5px 0 5px}.breadcrumbs{font-size:13px;color:#b1b6bd}.content-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px}.content-panel{background:#101216;border:1px solid rgba(255,255,255,.08);padding:28px}.content-panel h2,.content-panel h3{color:#fff}.content-panel h2{font-size:32px}.content-panel h3{font-size:23px;margin-top:30px}.content-panel p,.content-panel li{color:#c6cad0}.content-panel ul{padding-left:20px}.info-box{border-left:3px solid var(--gold);background:#171a1f;padding:18px 20px;margin:22px 0}.roof-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.spec{border:1px solid var(--line);background:#0d0f12;padding:14px}.spec b{color:var(--gold2);display:block}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.gallery-grid figure{margin:0;border:1px solid var(--line);background:#111;overflow:hidden}.gallery-grid img{height:240px;width:100%;object-fit:cover;cursor:pointer}.gallery-grid figcaption{padding:10px 12px;font-size:13px;color:#c7cbd0}.filterbar{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:20px}.filterbar button{background:#111318;color:#fff;border:1px solid var(--gold);padding:9px 13px;cursor:pointer}.filterbar button.active{background:var(--gold);color:#08090b}
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:25px}.contact-panel,.form-panel{background:#101216;border:1px solid var(--line);padding:27px}.contact-line{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08)}.contact-line:last-child{border:0}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:13px}.contact-form input,.contact-form textarea,.contact-form select{width:100%;background:#0a0c0f;color:#fff;border:1px solid #333840;padding:13px}.contact-form textarea{grid-column:1/-1;min-height:160px}.contact-form .full{grid-column:1/-1}.notice{padding:12px 14px;background:#162119;border:1px solid #2f6e3d;color:#d7f4dc;margin-bottom:18px}.hp{position:absolute;left:-9999px}
.footer{background:#050607;border-top:1px solid var(--gold);padding:48px 0 22px}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .9fr 1fr;gap:30px}.footer-logo{width:220px}.footer h4{color:var(--gold2);margin:0 0 12px}.footer p,.footer li,.footer a{color:#aeb3ba;font-size:13px}.footer ul{list-style:none;padding:0;margin:0}.footer li{margin:7px 0}.copyright{border-top:1px solid #1e2126;margin-top:30px;padding-top:18px;font-size:12px;color:#6f7680;display:flex;justify-content:space-between;gap:20px}.floating{position:fixed;right:16px;bottom:16px;z-index:98}
.lightbox{display:none;position:fixed;z-index:200;inset:0;background:rgba(0,0,0,.94);align-items:center;justify-content:center;padding:30px}.lightbox.open{display:flex}.lightbox img{max-width:min(1200px,95vw);max-height:90vh}.lightbox button{position:absolute;right:25px;top:20px;background:none;border:0;color:#fff;font-size:38px}
@media(max-width:980px){.nav{display:none;position:absolute;top:87px;left:0;right:0;background:#08090b;padding:18px 5%;flex-direction:column;align-items:flex-start}.nav.open{display:flex}.nav a{padding:8px 0}.nav .dropmenu{position:static;display:block;background:none;border:0;box-shadow:none;padding:0 0 0 16px}.mobile-toggle{display:block}.header .call-btn{display:none}.cards{grid-template-columns:repeat(2,1fr)}.icon-grid{grid-template-columns:repeat(4,1fr)}.split,.coverage-grid,.content-grid,.contact-grid{grid-template-columns:1fr}.badge30{position:static;display:inline-block;margin-top:25px}.gallery-tile{min-width:calc(50% - 6px)}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.logo img{width:165px}.site-top{display:none}.header-row{min-height:76px}.nav{top:75px}.hero{min-height:600px}.hero-content{padding:55px 0}.hero h1{font-size:46px}.cards,.reviews,.gallery-grid,.footer-grid{grid-template-columns:1fr}.checks,.roof-specs{grid-template-columns:1fr}.icon-grid{grid-template-columns:repeat(2,1fr)}.gallery-tile{min-width:85%}.contact-form{grid-template-columns:1fr}.contact-form textarea,.contact-form .full{grid-column:1}.copyright{display:block}.page-hero{padding:55px 0 35px}}

/* v3 dual contact additions */
.header-phones{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.secondary-call{background:transparent!important;color:#fff!important}
.floating-contacts{position:fixed;right:18px;bottom:18px;z-index:45;display:flex;gap:8px;flex-direction:column;align-items:flex-end}
.floating-contacts .floating{position:static!important}
.floating-second{background:#111!important;color:#f2c94c!important}
@media(max-width:1100px){.header-phones .secondary-call{display:none}.site-top .wrap{font-size:.78rem}}
@media(max-width:700px){.site-top .wrap{display:block;text-align:center}.site-top .wrap>div+div{margin-top:4px}.floating-contacts{right:10px;bottom:10px}.header-phones{display:none}}