/* Winchester Roofing design system, wh- prefix. Palette sampled from the badge: brick #B04932, navy #1F2B37, gold #F2C063, cream #F4EDDA. v4 2026-09-20 */
:root{
  --wh-teal:#B04932; --wh-teal-dk:#8A3724; --wh-teal-lt:#F8EAE5;
  --wh-orange:#F2C063; --wh-orange-dk:#E3A93E;
  --wh-ink:#1F2B37; --wh-slate:#2C3A48; --wh-text:#2A2F36; --wh-muted:#5F6670;
  --wh-cream:#F4EDDA; --wh-line:#E6E3DE; --wh-white:#ffffff;
  --wh-radius:14px;
}
body .wh-page{ color:var(--wh-text); font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:17px; line-height:1.65; }
body .wh-page *{ box-sizing:border-box; }
body .wh-page h1,body .wh-page h2,body .wh-page h3,body .wh-page h4{ font-family:"Rubik","Inter",system-ui,sans-serif; color:var(--wh-ink); letter-spacing:-.01em; margin:0; }
body .wh-page h2{ font-size:clamp(1.7rem,3.2vw,2.5rem); font-weight:800; line-height:1.08; margin:0 0 .5em; }
body .wh-page h3{ font-size:1.22rem; font-weight:700; line-height:1.25; }
body .wh-page p{ margin:0 0 1em; }
body .wh-page a{ color:var(--wh-teal); }
body .wh-page .lead{ font-size:1.18rem; line-height:1.6; color:#3D444D; }
body .wh-page ul,body .wh-page ol{ padding-left:1.2em; margin:0 0 1em; }
body .wh-page li{ margin:.3em 0; }

/* release YOOtheme's 1200 container, the wh-wrap carries the measure */
body main.tm-main.uk-section{ padding-top:0; padding-bottom:0; }
body .tm-main > .uk-container{ max-width:none; padding-left:0; padding-right:0; }

/* rhythm */
.wh-wrap{ max-width:1200px; margin:0 auto; padding:0 24px; }
.wh-narrow{ max-width:780px; }
.wh-sec{ padding:84px 0; }
.wh-sec-sm{ padding:42px 0; }
@media (max-width:640px){ .wh-sec{ padding:56px 0; } }
.wh-alt{ background:#F8F6F2; }
.wh-cream{ background:var(--wh-cream); }

/* signature eyebrow: orange dotted dash, from the logo's dot rows */
.wh-label{ display:inline-flex; align-items:center; gap:12px; font-weight:800; text-transform:uppercase; letter-spacing:.18em; font-size:.74rem; color:var(--wh-orange); font-family:"Rubik","Inter",sans-serif; margin-bottom:14px; }
.wh-label::before{ content:""; width:28px; height:3px; border-radius:2px; background:var(--wh-orange); flex-shrink:0; }
.wh-label.on-dark{ color:var(--wh-cream); }
.wh-rule{ position:relative; height:2px; background:var(--wh-line); margin:24px 0; }
.wh-rule::before{ content:""; position:absolute; left:0; top:0; height:2px; width:90px; background:var(--wh-orange); }

/* buttons */
.wh-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 28px; border-radius:999px; font-family:"Rubik","Inter",sans-serif; font-weight:800; font-size:1rem; letter-spacing:.02em; text-decoration:none!important; transition:transform .15s,background .2s,box-shadow .2s,color .2s; border:2px solid transparent; cursor:pointer; }
.wh-btn-primary{ background:var(--wh-orange); color:#fff!important; }
.wh-btn-primary:hover,.wh-btn-primary:focus{ background:var(--wh-orange-dk); color:#fff!important; transform:translateY(-2px); box-shadow:0 10px 24px rgba(242,192,99,.32); }
.wh-btn-ghost{ background:transparent; color:#fff!important; border-color:rgba(255,255,255,.45); }
.wh-btn-ghost:hover,.wh-btn-ghost:focus{ background:#fff; color:var(--wh-ink)!important; border-color:#fff; transform:translateY(-2px); }
.wh-btn-teal{ background:var(--wh-teal); color:#fff!important; }
.wh-btn-teal:hover,.wh-btn-teal:focus{ background:var(--wh-teal-dk); color:#fff!important; transform:translateY(-2px); }
.wh-btn-outline{ background:transparent; color:var(--wh-teal)!important; border-color:var(--wh-teal); }
.wh-btn-outline:hover,.wh-btn-outline:focus{ background:var(--wh-teal); color:#fff!important; }
.wh-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:2em; }

/* hero */
.wh-hero{ position:relative; overflow:hidden; background:var(--wh-ink); background-image:linear-gradient(115deg,#7A2D1C 0%,#A5432D 55%,var(--wh-teal) 100%); padding:110px 0 0; color:#fff; }
.wh-hero::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(244,237,218,.16) 1.4px,transparent 1.6px); background-size:26px 26px; opacity:.55; pointer-events:none; }
.wh-hero::after{ content:""; position:absolute; right:-140px; top:-80px; width:640px; height:640px; background:url('/wp-content/uploads/wh/winchester-roofing-badge-transparent.png') center/contain no-repeat; opacity:.13; pointer-events:none; }
.wh-hero .wh-wrap{ position:relative; z-index:1; }
.wh-hero .wh-label{ color:var(--wh-cream); }
.wh-hero h1{ color:#fff; margin:0; line-height:1; letter-spacing:-.02em; }
.wh-hero h1 .l1{ display:block; font-weight:900; font-size:clamp(2.4rem,6.2vw,4.6rem); }
.wh-hero h1 .l2{ display:block; font-weight:800; font-size:clamp(1.15rem,2.6vw,1.8rem); color:var(--wh-orange); margin-top:.3em; }
.wh-hero p{ color:#FBF1ED; max-width:620px; margin:1.4em 0 0; font-size:1.15rem; line-height:1.6; }
.wh-hero .wh-btn-ghost{ border-color:rgba(244,237,218,.55); }
.wh-ticker{ position:relative; z-index:1; margin-top:56px; border-top:1px solid rgba(255,255,255,.18); display:flex; flex-wrap:wrap; gap:10px 28px; padding:22px 0 30px; }
.wh-ticker span,.wh-ticker a{ color:#F6E3DC; font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.wh-ticker span::before,.wh-ticker a::before{ content:""; width:7px; height:7px; background:var(--wh-orange); border-radius:50%; }
.wh-hero.sm{ padding:84px 0 64px; }
.wh-hero.sm h1 .l1{ font-size:clamp(2rem,4.8vw,3.4rem); }
.wh-hero.sm::after{ width:460px; height:460px; right:-120px; top:-40px; }
.wh-crumb{ display:flex; gap:8px; flex-wrap:wrap; font-size:.82rem; color:#EED6CD; margin-bottom:18px; }
.wh-crumb a{ color:#EED6CD; text-decoration:none; }
.wh-crumb span::before{ content:"/"; margin-right:8px; color:var(--wh-orange); }

/* promise band */
.wh-band{ background:var(--wh-ink); color:#fff; }
.wh-band .row{ display:grid; grid-template-columns:repeat(3,1fr); }
.wh-band .cell{ padding:30px 26px; border-left:1px solid rgba(255,255,255,.1); }
.wh-band .cell:first-child{ border-left:0; }
.wh-band .k{ font-family:"Rubik","Inter",sans-serif; font-weight:800; font-size:1.15rem; color:#fff; display:flex; align-items:center; gap:10px; }
.wh-band .k::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--wh-orange); flex:0 0 auto; }
.wh-band .d{ color:#BAC4CE; margin-top:.4em; font-size:.95rem; }
@media (max-width:760px){ .wh-band .row{ grid-template-columns:1fr; } .wh-band .cell{ border-left:0; border-top:1px solid rgba(255,255,255,.1); padding:20px 24px; } .wh-band .cell:first-child{ border-top:0; } }

/* two column */
.wh-two{ display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:start; }
@media (max-width:900px){ .wh-two{ grid-template-columns:1fr; gap:32px; } }
.wh-card{ background:#fff; border:1px solid var(--wh-line); border-radius:var(--wh-radius); padding:28px; }
.wh-card.teal{ background:var(--wh-teal); border-color:var(--wh-teal); color:#fff; }
.wh-card.teal h3{ color:#fff; }
.wh-card.teal p{ color:#F6E3DC; }
.wh-card.teal .wh-phone{ color:#fff; }
.wh-card.cream{ background:var(--wh-cream); border-color:#EADFC4; }
.wh-phone{ display:inline-block; font-family:"Rubik","Inter",sans-serif; font-weight:900; font-size:1.7rem; color:var(--wh-ink); text-decoration:none!important; line-height:1.1; margin:.2em 0 .5em; }
.wh-phone:hover{ color:var(--wh-orange); }

/* check list */
.wh-checks{ list-style:none; padding:0; margin:18px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; }
.wh-checks li{ position:relative; padding-left:32px; margin:0; }
.wh-checks li::before{ content:""; position:absolute; left:0; top:4px; width:20px; height:20px; border-radius:50%; background:var(--wh-teal); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E"); background-size:14px; background-position:center; background-repeat:no-repeat; }
.wh-checks.one{ grid-template-columns:1fr; }
@media (max-width:640px){ .wh-checks{ grid-template-columns:1fr; } }

/* services grid */
.wh-svc{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:36px; }
.wh-svc a{ display:flex; flex-direction:column; gap:10px; background:#fff; border:1px solid var(--wh-line); border-radius:var(--wh-radius); padding:26px 24px 24px; text-decoration:none!important; color:var(--wh-text); transition:transform .18s,box-shadow .2s,border-color .2s; position:relative; overflow:hidden; }
.wh-svc a::before{ content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:var(--wh-teal); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.wh-svc a:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(31,43,55,.12); border-color:#E3CFC8; }
.wh-svc a:hover::before{ transform:scaleX(1); }
.wh-svc .ic{ width:46px; height:46px; border-radius:12px; background:var(--wh-teal-lt); display:flex; align-items:center; justify-content:center; color:var(--wh-teal); }
.wh-svc .ic svg{ width:26px; height:26px; }
.wh-svc h3{ font-size:1.08rem; }
.wh-svc .desc{ color:var(--wh-muted); font-size:.95rem; line-height:1.5; }
.wh-svc .arw{ margin-top:auto; color:var(--wh-orange); font-weight:800; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; font-family:"Rubik","Inter",sans-serif; }
@media (max-width:1000px){ .wh-svc{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .wh-svc{ grid-template-columns:1fr; } }

/* why us dark */
.wh-why{ background:var(--wh-ink); color:#D8DEE5; position:relative; overflow:hidden; }
.wh-why::after{ content:""; position:absolute; left:-160px; bottom:-200px; width:560px; height:560px; background:url('/wp-content/uploads/wh/winchester-roofing-badge-transparent.png') center/contain no-repeat; opacity:.07; pointer-events:none; }
.wh-why .wh-wrap{ position:relative; z-index:1; }
.wh-why h2,.wh-why h3{ color:#fff; }
.wh-why .grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px 40px; margin-top:36px; }
.wh-why .item{ display:grid; grid-template-columns:44px 1fr; gap:16px; }
.wh-why .tick{ width:44px; height:44px; border-radius:12px; background:rgba(242,192,99,.16); border:1px solid rgba(242,192,99,.4); display:flex; align-items:center; justify-content:center; color:var(--wh-orange); font-family:"Rubik","Inter",sans-serif; font-weight:900; }
.wh-why p{ color:#BAC4CE; margin:.4em 0 0; }
@media (max-width:760px){ .wh-why .grid{ grid-template-columns:1fr; } }

/* steps */
.wh-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:36px; counter-reset:step; }
.wh-steps .st{ background:#fff; border:1px solid var(--wh-line); border-radius:var(--wh-radius); padding:28px 24px; }
.wh-steps .st::before{ counter-increment:step; content:"0" counter(step); display:block; font-family:"Rubik","Inter",sans-serif; font-weight:900; font-size:2rem; color:var(--wh-orange); line-height:1; margin-bottom:12px; }
@media (max-width:800px){ .wh-steps{ grid-template-columns:1fr; } }

/* area pills */
.wh-areas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.wh-areas a{ display:inline-flex; align-items:center; gap:10px; padding:12px 20px; border-radius:999px; background:#fff; border:1px solid var(--wh-line); color:var(--wh-ink); font-weight:700; text-decoration:none!important; transition:all .2s; }
.wh-areas a::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--wh-orange); }
.wh-areas a:hover{ background:var(--wh-teal); border-color:var(--wh-teal); color:#fff; }
.wh-areas a.now{ background:var(--wh-ink); border-color:var(--wh-ink); color:#fff; }

/* town cards */
.wh-towns{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px; }
.wh-towns a{ display:block; background:#fff; border:1px solid var(--wh-line); border-radius:var(--wh-radius); padding:26px; text-decoration:none!important; color:var(--wh-text); transition:transform .18s,box-shadow .2s; }
.wh-towns a:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(31,43,55,.12); }
.wh-towns .st{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--wh-orange); font-weight:800; font-family:"Rubik","Inter",sans-serif; }
.wh-towns h3{ margin:.3em 0 .4em; }
.wh-towns p{ color:var(--wh-muted); font-size:.95rem; margin:0; }
@media (max-width:900px){ .wh-towns{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .wh-towns{ grid-template-columns:1fr; } }

/* FAQ, restyled UIkit accordion */
.wh-faq .uk-accordion{ margin-top:28px; border-top:1px solid var(--wh-line); }
.wh-faq .uk-accordion > li{ margin:0; border-bottom:1px solid var(--wh-line); }
.wh-faq .uk-accordion-title{ font-family:"Rubik","Inter",sans-serif; font-weight:700; font-size:1.08rem; color:var(--wh-ink); padding:20px 44px 20px 0; position:relative; text-decoration:none; }
.wh-faq .uk-accordion-title::before{ content:""; position:absolute; right:0; top:50%; width:22px; height:22px; margin-top:-11px; border-radius:50%; background:var(--wh-teal-lt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23B04932' stroke-width='2.2' stroke-linecap='round' d='M10 5v10M5 10h10'/%3E%3C/svg%3E") center/12px no-repeat; }
.wh-faq .uk-open > .uk-accordion-title::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23B04932' stroke-width='2.2' stroke-linecap='round' d='M5 10h10'/%3E%3C/svg%3E"); }
.wh-faq .uk-accordion-content{ margin:0; padding:0 0 22px; color:var(--wh-text); }

/* CTA band */
.wh-cta{ background:var(--wh-orange); color:#fff; text-align:center; position:relative; overflow:hidden; }
.wh-cta .wh-wrap{ position:relative; z-index:1; }
.wh-cta h2{ color:#fff; font-size:clamp(1.8rem,3.6vw,2.7rem); }
.wh-cta p{ color:#FFF3E5; font-size:1.15rem; max-width:640px; margin:0 auto; }
.wh-cta .wh-actions{ justify-content:center; }
.wh-cta .wh-btn-primary{ background:var(--wh-ink); }
.wh-cta .wh-btn-primary:hover{ background:#121A22; box-shadow:0 10px 24px rgba(0,0,0,.25); }
.wh-cta .wh-btn-ghost{ border-color:rgba(255,255,255,.7); }
.wh-cta .wh-btn-ghost:hover{ color:var(--wh-orange-dk)!important; }

/* estimate: form + info */
.wh-estimate .wh-two{ grid-template-columns:1.15fr 1fr; }
.wh-formwrap{ background:#fff; border:1px solid var(--wh-line); border-radius:var(--wh-radius); padding:18px; min-height:640px; }
.wh-formwrap iframe{ min-height:600px; display:block; }
.wh-info h3{ margin-bottom:.4em; }
.wh-info .row{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:20px; }
.wh-info .it{ display:grid; grid-template-columns:42px 1fr; gap:14px; align-items:start; }
.wh-info .it .ic{ width:42px; height:42px; border-radius:11px; background:var(--wh-teal-lt); color:var(--wh-teal); display:flex; align-items:center; justify-content:center; }
.wh-info .it .ic svg{ width:22px; height:22px; }
.wh-info .it b{ display:block; color:var(--wh-ink); font-family:"Rubik","Inter",sans-serif; }
.wh-info .it p{ margin:0; color:var(--wh-muted); font-size:.95rem; }

/* prose */
.wh-prose h2{ font-size:clamp(1.45rem,2.6vw,2rem); margin-top:1.6em; }
.wh-prose h2:first-child{ margin-top:0; }
.wh-prose h3{ margin:1.4em 0 .5em; }

/* related list */
.wh-related{ list-style:none; padding:0; margin:18px 0 0; display:grid; grid-template-columns:1fr; gap:8px; }
.wh-related a{ display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border:1px solid var(--wh-line); border-radius:10px; text-decoration:none!important; color:var(--wh-ink); font-weight:700; background:#fff; }
.wh-related a::after{ content:"\2192"; color:var(--wh-orange); }
.wh-related a:hover{ border-color:var(--wh-teal); color:var(--wh-teal); }

/* notice */
.wh-notice{ background:var(--wh-cream); border:1px solid #EADFC4; border-radius:var(--wh-radius); padding:24px 28px; }
.wh-notice b{ color:var(--wh-ink); }

/* header chrome */
body .tm-toolbar.tm-toolbar-default{ background:var(--wh-ink)!important; background-image:none!important; color:#fff; }
body .tm-toolbar .uk-container{ max-width:none; padding-left:40px; padding-right:40px; }
.wh-tb{ display:flex; align-items:center; gap:22px; font-size:.86rem; color:#D8DEE5; }
.wh-tb a{ color:#fff; text-decoration:none; font-weight:700; }
.wh-tb a:hover{ color:var(--wh-orange); }
.wh-tb .wh-btn{ min-height:38px; padding:0 18px; font-size:.82rem; }
.wh-tb .dot::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--wh-orange); margin-right:8px; vertical-align:middle; }
body .tm-header .uk-navbar-container{ background:#fff; }
body .tm-header .uk-navbar-nav > li > a{ font-family:"Rubik","Inter",sans-serif; font-weight:700; color:var(--wh-ink); text-transform:none; font-size:.98rem; letter-spacing:0; min-height:88px; }
body .tm-header .uk-navbar-nav > li:hover > a,body .tm-header .uk-navbar-nav > li.uk-active > a{ color:var(--wh-teal); }
body .tm-header .uk-drop,body .tm-header .uk-navbar-dropdown,body .uk-navbar-container .uk-navbar-dropdown{ position:absolute!important; }
body .uk-navbar-dropdown{ background:#fff; border-radius:12px; box-shadow:0 18px 40px rgba(31,43,55,.16); padding:18px 22px; width:300px; }
body .uk-navbar-dropdown-nav > li > a{ color:var(--wh-ink); font-weight:600; padding:7px 0; }
body .uk-navbar-dropdown-nav > li > a:hover{ color:var(--wh-teal); }
body .uk-logo img{ max-height:64px; width:auto; }
body .uk-logo{ flex-shrink:0; }
body .uk-offcanvas-bar{ background:var(--wh-ink); }
body .uk-offcanvas-bar .uk-nav > li > a{ color:#fff; font-family:"Rubik","Inter",sans-serif; font-weight:700; font-size:1.05rem; }
body .uk-offcanvas-bar .uk-nav-sub a{ color:#BAC4CE; }
body .uk-offcanvas-bar .uk-nav-parent-icon > a::after{ filter:invert(1); }

/* mobile sticky call bar (HFCM Mobile Buttons) */
body .mobile-buttons{ display:none; }
@media (max-width:1099px){
  body .mobile-buttons{ display:flex!important; position:fixed; top:0; left:0; right:0; z-index:1000!important; width:100%; }
  body .mobile-buttons ul{ display:grid!important; grid-template-columns:1fr 1fr; width:100%; margin:0; padding:0; list-style:none; }
  body .mobile-buttons li{ margin:0; }
  body .mobile-buttons a{ display:flex; align-items:center; justify-content:center; height:60px; font-family:"Rubik","Inter",sans-serif; font-weight:800; font-size:.95rem; text-decoration:none; color:#fff; letter-spacing:.02em; }
  body .mobile-buttons .button-left{ background:var(--wh-orange); }
  body .mobile-buttons .button-right{ background:var(--wh-teal); }
  body .tm-page{ padding-top:60px; }
}

/* footer */
body footer.tm-footer,body .tm-footer .uk-section-default{ background:var(--wh-ink); }
body .tm-footer .uk-container.uk-container-expand,body footer .uk-container{ padding-left:0!important; padding-right:0!important; max-width:none!important; }
body footer .uk-grid.tm-grid-expand{ margin-left:0!important; }
body footer .uk-grid.tm-grid-expand > *{ padding-left:0!important; }
body footer .uk-section{ padding:0; }
.wh-footer{ background:var(--wh-ink); color:#BAC4CE; font-family:"Inter",system-ui,sans-serif; font-size:.95rem; }
.wh-footer .top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding:64px 0 48px; }
.wh-footer h4{ color:#fff; font-family:"Rubik","Inter",sans-serif; font-weight:800; font-size:.86rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 16px; }
.wh-footer ul{ list-style:none; padding:0; margin:0; }
.wh-footer li{ margin:0 0 9px; }
.wh-footer a{ color:#D8DEE5; text-decoration:none; }
.wh-footer a:hover{ color:var(--wh-orange); }
.wh-footer .mark{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.wh-footer .mark img{ width:64px; height:64px; display:block; }
.wh-footer .mark b{ display:block; color:#fff; font-family:"Rubik","Inter",sans-serif; font-weight:900; font-size:1.25rem; line-height:1.05; letter-spacing:-.01em; }
.wh-footer .mark span{ display:block; color:var(--wh-orange); font-family:"Rubik","Inter",sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; margin-top:4px; }
.wh-footer .brand p{ max-width:340px; margin:0 0 14px; }
.wh-footer .brand .wh-phone{ color:#fff; font-size:1.4rem; }
.wh-footer .bottom{ border-top:1px solid rgba(255,255,255,.1); padding:22px 0; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.85rem; color:#95A1AD; }
.wh-footer .bottom a{ color:#95A1AD; }
@media (max-width:900px){ .wh-footer .top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .wh-footer .top{ grid-template-columns:1fr; padding:48px 0 32px; } }
@media (max-width:1099px){ body{ padding-bottom:0; } }

/* ---- v2 specificity fixes (theme h1/h3/a rules were winning) ---- */
body .wh-page .wh-hero h1,body .wh-page .wh-hero h1 .l1{ color:#fff; }
body .wh-page .wh-hero h1 .l2{ color:var(--wh-orange); }
body .wh-page .wh-hero .wh-label{ color:var(--wh-cream); }
body .wh-page .wh-ticker a,body .wh-page .wh-ticker span{ color:#F6E3DC; }
body .wh-page .wh-crumb a{ color:#EED6CD; }
body .wh-page .wh-crumb a:hover{ color:#fff; }
body .wh-page .wh-why h2,body .wh-page .wh-why h3{ color:#fff; }
body .wh-page .wh-why p{ color:#BAC4CE; }
body .wh-page .wh-card.teal h3,body .wh-page .wh-card.teal .wh-phone{ color:#fff; }
body .wh-page .wh-card.teal p{ color:#F6E3DC; }
body .wh-page .wh-cta h2{ color:#fff; }
body .wh-page .wh-cta p{ color:#FFF3E5; }
body .wh-page .wh-band .k{ color:#fff; }
body .wh-page .wh-label.on-dark{ color:var(--wh-cream); }
body .wh-page .wh-svc a,body .wh-page .wh-towns a,body .wh-page .wh-areas a,body .wh-page .wh-related a{ color:var(--wh-ink); }
body .wh-page .wh-svc h3,body .wh-page .wh-towns h3{ color:var(--wh-ink); }
body .wh-page .wh-areas a:hover,body .wh-page .wh-areas a.now{ color:#fff; }
body .wh-page .wh-related a:hover{ color:var(--wh-teal); }
body .wh-page .wh-svc .arw,body .wh-page .wh-towns .st{ color:var(--wh-orange); }
body .wh-page .wh-svc .desc,body .wh-page .wh-towns p{ color:var(--wh-muted); }
@media (max-width:900px){ body .wh-page .wh-estimate .wh-two{ grid-template-columns:1fr; } }
body .uk-logo img{ max-height:80px; }
@media (max-width:1099px){
  body .mobile-buttons .button-left{ background:var(--wh-orange)!important; color:#fff!important; }
  body .mobile-buttons .button-right{ background:var(--wh-teal)!important; color:#fff!important; }
}

@media (prefers-reduced-motion:reduce){ .wh-page *{ transition:none!important; } }

/* v3 phone pass. mobile header is a separate YOOtheme header (tm-header-mobile), style it like the desktop one */
body .tm-header-mobile .uk-navbar-container{ background:#fff; border-bottom:1px solid var(--wh-line); }
body .tm-header-mobile .uk-container{ padding-left:24px!important; padding-right:24px!important; }
body .tm-header-mobile .uk-logo img{ max-height:56px; }
body .tm-header-mobile .uk-navbar-toggle{ color:var(--wh-ink); }
/* hero on phones: badge as a real element, no ghost watermark, tighter top */
.wh-hero-badge{ display:none; }
@media (max-width:760px){
  .wh-hero{ padding-top:56px; }
  .wh-hero::after,.wh-hero.sm::after{ display:none; }
  .wh-hero-badge{ display:block; width:88px; height:88px; margin:0 0 20px; filter:drop-shadow(0 6px 14px rgba(0,0,0,.25)); }
  .wh-label{ letter-spacing:.14em; font-size:.7rem; }
  .wh-hero h1 .l1{ font-size:2.35rem; }
  .wh-hero p{ font-size:1.05rem; }
  .wh-ticker{ margin-top:36px; gap:8px 18px; }
  .wh-actions{ gap:10px; }
  .wh-actions .wh-btn{ width:100%; }
}
/* towns on phones: two even columns instead of a ragged pill stack */
@media (max-width:640px){
  .wh-areas{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .wh-areas a{ padding:11px 10px; font-size:.86rem; justify-content:flex-start; white-space:nowrap; gap:8px; }
  .wh-formwrap{ padding:10px; }
  .wh-cta{ text-align:left; }
  .wh-cta p{ margin:0; }
  .wh-cta .wh-actions{ justify-content:flex-start; }
  .wh-footer .top{ gap:28px; }
}

/* v4: the 60px the page reserves for the fixed call bar showed the theme's grey html background, paint it white.
   footer lists sit two up on phones so the footer is half as tall. */
@media (max-width:1099px){ html,body{ background:#fff!important; } }

/* v5: footer centered on phones, Zack: "I like keeping things centered on that" */
@media (max-width:560px){
  .wh-footer .top{ grid-template-columns:1fr 1fr; gap:28px 16px; text-align:center; padding:44px 0 28px; }
  .wh-footer .brand{ grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; }
  .wh-footer .mark{ flex-direction:column; gap:10px; text-align:center; }
  .wh-footer .brand p{ max-width:320px; margin:0 auto 12px; }
  .wh-footer h4{ margin-bottom:12px; }
  .wh-footer .bottom{ justify-content:center; text-align:center; flex-direction:column; gap:6px; }
  .wh-footer .top > div:last-child{ grid-column:1 / -1; }  /* Company alone on the second row, centered across both columns */
}
/* v5: the call bar. The template's snippet CSS pushed body down 70px on top of the 60px the page reserves,
   so the header floated 130px down with a white hole above it. One reservation, the bar's own height. */
@media (max-width:1099px){
  html{ padding-top:0!important; margin-top:0!important; }
  body{ margin-top:0!important; padding-top:0!important; }
  body .tm-page{ padding-top:56px!important; margin-top:0!important; }  /* the template's mobile bar snippet sets .tm-page margin-top:70px, it collapsed through body and read as a body offset */
  body .mobile-buttons a{ height:56px; font-size:.92rem; letter-spacing:.01em; }
  body .tm-header-mobile .uk-navbar-container{ box-shadow:0 1px 0 var(--wh-line); }
}
/* v5: compact hero for the contact page, the form is the point of that page */
.wh-hero.compact{ padding:64px 0 48px; }
.wh-hero.compact::after{ display:none; }
.wh-hero.compact .wh-hero-badge{ display:none; }
@media (max-width:760px){
  .wh-hero.compact{ padding:36px 0 32px; }
  .wh-hero.compact h1 .l1{ font-size:2rem; }
  .wh-hero.compact p{ margin-top:.9em; }
  .wh-estimate.first{ padding-top:36px; }
}

/* reviews band */
.wh-reviews{ background:#fff; }
.wh-reviews-slot{ margin-top:10px; min-height:0; }
.wh-notice .wh-reviews-slot{ margin-top:14px; }

/* QA 2026-09-08: the fixed call bar's anchors were content-box, 2px taller and wider than their slot */
@media (max-width:1099px){ body .mobile-buttons a{ box-sizing:border-box; border:0; } }
/* the hero paragraph gap lost to body .wh-page p (0,1,2) */
body .wh-page .wh-hero p{ margin:1.4em 0 0; }
@media (max-width:760px){ body .wh-page .wh-hero.compact p{ margin-top:.9em; } }
.wh-tel{ white-space:nowrap; font-weight:700; }

/* ---- roofing palette roles, 2026-09-20. Gold is a fill and an on-dark accent only. ---- */
:root{ --wh-accent-text:#B04932; }
/* gold buttons and the gold call bar half carry navy text (8.6:1) */
.wh-btn-primary,body .wh-page .wh-btn-primary,body .wh-tb .wh-btn-primary{ color:var(--wh-ink)!important; }
.wh-btn-primary:hover,.wh-btn-primary:focus,body .wh-page .wh-btn-primary:hover,body .wh-page .wh-btn-primary:focus{ color:var(--wh-ink)!important; box-shadow:0 10px 24px rgba(31,43,55,.22); }
@media (max-width:1099px){ body .mobile-buttons .button-left{ color:var(--wh-ink)!important; } }
/* accent TEXT on light backgrounds is brick (5.5:1 on white), the gold stays in the dash and the dots */
.wh-label,body .wh-page .wh-label{ color:var(--wh-accent-text); }
body .wh-page .wh-label.on-dark,body .wh-page .wh-hero .wh-label,body .wh-page .wh-why .wh-label{ color:var(--wh-cream); }
body .wh-page .wh-svc .arw,body .wh-page .wh-towns .st{ color:var(--wh-accent-text); }
.wh-steps .st::before{ color:var(--wh-accent-text); }
.wh-related a::after{ color:var(--wh-accent-text); }
.wh-phone:hover{ color:var(--wh-accent-text); }
body .wh-page .wh-card.teal .wh-phone:hover{ color:var(--wh-orange); }
/* CTA band is gold, so everything on it is navy */
body .wh-page .wh-cta h2{ color:var(--wh-ink); }
body .wh-page .wh-cta p{ color:#33414F; }
body .wh-page .wh-cta .wh-btn-primary{ background:var(--wh-ink); color:#fff!important; }
body .wh-page .wh-cta .wh-btn-primary:hover,body .wh-page .wh-cta .wh-btn-primary:focus{ background:#121A22; color:#fff!important; }
body .wh-page .wh-cta .wh-btn-ghost{ color:var(--wh-ink)!important; border-color:rgba(31,43,55,.55); }
body .wh-page .wh-cta .wh-btn-ghost:hover,body .wh-page .wh-cta .wh-btn-ghost:focus{ background:var(--wh-ink); color:#fff!important; border-color:var(--wh-ink); }
/* v2: plain sections sat on the theme's grey page background, paint the page white */
body .wh-page{ background:#fff; }
/* gold sub headline on the brick hero is 3.3:1 at worst, keep it at large text size everywhere */
.wh-hero h1 .l2{ font-size:clamp(1.2rem,2.6vw,1.8rem); }
.wh-hero::after{ opacity:.10; }
/* header logo is the wide lockup with the empty margins cropped off */
body .uk-logo img{ max-height:72px; }
body .tm-header-mobile .uk-logo img{ max-height:52px; }
/* v3 render pass 2026-09-20 */
/* links inside the brick hero were brick on brick */
body .wh-page .wh-hero p a,body .wh-page .wh-hero a.wh-tel{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
/* body .wh-page p (0,1,2) was beating these: CTA paragraph centering, prose heading gap, list padding */
body .wh-page .wh-cta p{ margin:0 auto; }
@media (max-width:640px){ body .wh-page .wh-cta p{ margin:0; } }
body .wh-page .wh-prose h2{ margin-top:1.6em; }
body .wh-page .wh-prose h2:first-child,body .wh-page .wh-prose .wh-label + h2{ margin-top:0; }
body .wh-page ul.wh-checks,body .wh-page ul.wh-related{ padding-left:0; }
/* the footer sits outside .wh-page, so its wrap was content-box and 24px wider than the page measure */
.wh-footer,.wh-footer *{ box-sizing:border-box; }
/* v4: the template's own call bar rule leaves a 1px tan / green border on the two halves */
@media (max-width:1099px){ body .mobile-buttons a.button-left,body .mobile-buttons a.button-right{ border:0!important; } }

/* ---- where we work, 2026-09-20 (Zack on the Electrician site: "should be kind of centered, those little things there. Maybe add some maps") ---- */
/* the service area block is centered: label, heading, lead and the town pills */
body .wh-page .wh-sec:has(.wh-areas){ text-align:center; }
body .wh-page .wh-sec:has(.wh-areas) .wh-label{ justify-content:center; }
body .wh-page .wh-sec:has(.wh-areas) .lead{ margin-left:auto; margin-right:auto; }
body .wh-page .wh-areas{ justify-content:center; }
@media (max-width:640px){ body .wh-page .wh-areas a{ justify-content:center; } }
/* service area map: our own inline SVG, towns plotted from their coordinates, palette from the site variables */
.wh-map{ max-width:720px; margin:34px auto 0; background:var(--wh-cream); border:1px solid var(--wh-line); border-radius:var(--wh-radius); padding:10px; overflow:hidden; }
.wh-map svg{ display:block; width:100%; height:auto; }
/* Google Maps embed (Zack 2026-09-20, he wanted a Google map, not the drawn one) */
.wh-map.wh-gmap{ max-width:960px; padding:0; background:#fff; }
.wh-map.wh-gmap iframe{ display:block; width:100%; height:440px; border:0; }
@media (max-width:640px){ .wh-map.wh-gmap iframe{ height:320px; } }
.wh-map .arg{ opacity:.13; }
.wh-map .arg polygon{ fill:var(--wh-teal); stroke:var(--wh-teal); stroke-width:96; stroke-linejoin:round; }
.wh-map .lg .sw{ fill:var(--wh-teal); fill-opacity:.2; }
.wh-map .rc{ fill:none; stroke:var(--wh-line); stroke-width:10; stroke-linecap:round; stroke-linejoin:round; }
.wh-map .rd{ fill:none; stroke:#fff; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; }
.wh-map .sh rect{ fill:#fff; stroke:var(--wh-line); stroke-width:1.5; }
.wh-map .sh text{ font:700 11px "Inter",system-ui,sans-serif; fill:var(--wh-muted); letter-spacing:.04em; }
.wh-map .td{ fill:var(--wh-orange); stroke:#fff; stroke-width:3; }
.wh-map .hd{ fill:var(--wh-teal); stroke:#fff; stroke-width:3; }
.wh-map .hr{ fill:var(--wh-teal); fill-opacity:.16; }
.wh-map .tl{ font:800 16px "Rubik","Inter",system-ui,sans-serif; fill:var(--wh-ink); paint-order:stroke; stroke:var(--wh-cream); stroke-width:4px; stroke-linejoin:round; }
.wh-map .tl.hl{ font-size:18px; }
.wh-map .ts{ font:700 10px "Inter",system-ui,sans-serif; fill:var(--wh-muted); text-transform:uppercase; letter-spacing:.14em; paint-order:stroke; stroke:var(--wh-cream); stroke-width:3px; }
.wh-map .lg text{ font:700 12px "Inter",system-ui,sans-serif; fill:var(--wh-muted); }
.wh-map a{ text-decoration:none!important; cursor:pointer; }
.wh-map a:hover .tl,.wh-map a:focus .tl{ fill:var(--wh-teal); text-decoration:underline; }
.wh-map a:hover .td,.wh-map a:focus .td{ fill:var(--wh-teal); }
@media (max-width:640px){ .wh-map{ margin-top:26px; padding:6px; } .wh-map .tl{ font-size:22px; } .wh-map .tl.hl{ font-size:24px; } .wh-map .ts{ font-size:14px; } .wh-map .sh text{ font-size:14px; } .wh-map .lg text{ font-size:17px; } }