/*
Theme Name: Pakstar Contracting
Theme URI: https://pakstar844.com/
Author: Pakstar Contracting Corp.
Description: Brooklyn contractor theme - roofing, masonry, exterior, violations, plumbing, remodeling. Service pages, area pages, gallery, reviews, blog and estimate form.
Version: 1.3.37
Requires at least: 5.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: pakstar
*/

:root{--g:#0F2A4A;--g2:#2A9468;--em:#6FD3A0;--am:#F5B324;--bg:#F2F5F9;--cd:#fff;--tx:#121A26;--mu:#5B6677;--bd:#D8DFE9;color-scheme:light}
html{scroll-padding-top:90px}*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:400 16px/1.65 Barlow,system-ui,sans-serif}
h1,h2,h3{font-family:'Barlow Condensed','Arial Narrow',sans-serif;line-height:1.02;margin:0;font-weight:700}
h2{font-size:clamp(32px,5vw,52px)}a{color:inherit}.w{max-width:1180px;margin:0 auto;padding:0 20px}.s{padding:76px 0}
#pb{position:fixed;top:0;left:0;height:4px;background:var(--em);z-index:60;width:0}
.tick{background:var(--am);color:#1a1200;overflow:hidden;white-space:nowrap;font-weight:600;font-size:14px;padding:6px 0}
.tick div{display:inline-block;animation:mq 34s linear infinite}.tick span{margin:0 26px}@keyframes mq{to{transform:translateX(-50%)}}
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);color:var(--tx);border-bottom:1px solid var(--bd);box-shadow:0 2px 14px rgba(15,42,74,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:14px}
.logo{font:700 31px 'Barlow Condensed';color:var(--g);text-decoration:none;letter-spacing:1px;white-space:nowrap;line-height:1}.logo small{display:block;font:500 11px Barlow;letter-spacing:2.4px;color:var(--g2)}
.main-nav{height:100%}.main-nav ul{margin:0;padding:0;list-style:none;display:flex;gap:2px;height:100%;align-items:center}.main-nav ul>li{list-style:none;height:100%;display:flex;align-items:center}
.main-nav ul>li>a{text-decoration:none;color:var(--tx);font-weight:600;padding:8px 14px;border-radius:6px;position:relative;white-space:nowrap}
.main-nav ul>li>a:after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;background:var(--em);border-radius:2px;transform:scaleX(0);transition:.25s}
.main-nav ul>li:hover>a,.main-nav ul>li>a.on{color:var(--g2)}.main-nav ul>li:hover>a:after,.main-nav ul>li>a.on:after{transform:scaleX(1)}
.hasdd{position:relative}
/* Simple dropdowns (Services, Areas): names only, one per line */
.mm{position:absolute;left:0;top:100%;min-width:250px;background:var(--cd);color:var(--tx);border-top:4px solid var(--em);border-radius:0 0 10px 10px;box-shadow:0 18px 40px rgba(15,42,74,.18);opacity:0;visibility:hidden;transform:translateY(10px);transition:.22s}
li:hover>.mm{opacity:1;visibility:visible;transform:none}
.mm .in{display:flex;flex-direction:column;padding:8px}
.mm .in a{display:block;padding:11px 14px;border-radius:8px;text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap;transition:.15s}
.mm .in a:hover{background:var(--bg);color:var(--g2)}
.hasdd>a:before{content:"";display:none}.hasdd>a{padding-right:26px}.hasdd>a i{position:absolute;right:1px;top:50%;width:6px;height:6px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-70%) rotate(45deg)}
.btn{display:inline-block;background:var(--am);color:#1a1200;padding:13px 24px;border-radius:6px;text-decoration:none;border:0;cursor:pointer;font:600 16px Barlow;transition:transform .2s,box-shadow .2s}.btn:hover{transform:translateY(-3px);box-shadow:0 8px 0 rgba(0,0,0,.2)}.btn.o{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.7)}.btn.sm{padding:10px 18px}
.bg{display:none;background:none;border:1.5px solid var(--g);color:var(--g);cursor:pointer;border-radius:6px;padding:8px 12px;font:600 15px Barlow}
#dr{position:fixed;inset:0;z-index:70;background:#fff;color:var(--tx);padding:20px;overflow:auto;transform:translateX(100%);transition:.35s}#dr.on{transform:none}
#dr details{border-bottom:1px solid rgba(255,255,255,.15);padding:6px 0;background:none;border-radius:0;border-left:0;border-right:0;border-top:0;margin:0}#dr summary{color:#fff;font-size:20px}#dr a{display:block;text-decoration:none;padding:16px 0;font:600 24px 'Barlow Condensed';border-bottom:1px solid var(--bd);color:var(--tx)}#dr a:hover{color:var(--g2);padding-left:8px}#dr .logo-img img{height:42px}#dr .logo{border:0;padding:0;color:var(--g);font-size:30px}#dr .sub{padding-left:14px;color:#C9D8EA}
:focus-visible{outline:3px solid var(--em);outline-offset:2px}
.hero{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 20% 0,#1F5FA8,#0F2A4A 60%,#081A30);color:#fff;padding:86px 0 96px}
.bricks{position:absolute;inset:0;pointer-events:none}.br{display:flex;margin-bottom:4px}.br:nth-child(even){margin-left:-56px}
.bk{flex:0 0 108px;height:34px;margin-right:4px;border-radius:3px;background:rgba(255,255,255,.055);animation:lay .7s cubic-bezier(.2,.9,.3,1.2) both}@keyframes lay{from{opacity:0;transform:translateY(-40px) rotate(-4deg)}}
.house{position:absolute;right:4%;bottom:-10px;width:min(560px,55%);opacity:.5;pointer-events:none}.house path{fill:none;stroke:var(--em);stroke-width:2.5;stroke-dasharray:900;stroke-dashoffset:900;animation:dr 3.2s .4s forwards ease-out}@keyframes dr{to{stroke-dashoffset:0}}
.hero .w{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(46px,7.6vw,92px);text-transform:uppercase}.rot{display:block;color:var(--em);height:1.05em;overflow:hidden}.rot span{display:block;animation:up .6s both}@keyframes up{from{transform:translateY(100%);opacity:0}}
.hero p{font-size:19px;max-width:54ch;color:#C9D8EA;margin:22px 0 28px}.row{display:flex;gap:12px;flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}.chips span{border:1px solid rgba(255,255,255,.25);padding:5px 14px;border-radius:40px;font-size:14px;background:rgba(0,0,0,.2)}
.fm{background:var(--cd);color:var(--tx);padding:26px;border-radius:12px;border-top:6px solid var(--em);box-shadow:0 20px 50px rgba(0,0,0,.3)}.fm h3{font-size:30px}.fm p{color:var(--mu);font-size:14px;margin:4px 0 14px}
.fm input,.fm select,.fm textarea{width:100%;margin-bottom:10px;padding:12px;border:1px solid var(--bd);border-radius:6px;background:var(--bg);color:var(--tx);font:inherit}.fm .btn{width:100%}
.ph{background:linear-gradient(135deg,var(--bd),transparent),repeating-linear-gradient(135deg,var(--bd) 0 10px,transparent 10px 20px),var(--cd);border:1px dashed var(--mu);border-radius:8px;display:grid;place-items:center;color:var(--mu);font-size:13px;text-align:center;padding:8px;transition:.5s}.ph b{font-size:34px;display:block}
.g{display:grid;gap:18px}.c3{grid-template-columns:repeat(3,1fr)}.c4{grid-template-columns:repeat(4,1fr)}.c2{grid-template-columns:1fr 1fr}
.hd{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:30px}.hd p{color:var(--mu);max-width:50ch;margin:8px 0 0}
.card{display:block;background:var(--cd);border:1px solid var(--bd);border-radius:12px;overflow:hidden;text-decoration:none;transition:transform .3s,box-shadow .3s,border-color .3s}
.card:hover{transform:translateY(-8px);border-color:var(--g2);box-shadow:0 16px 0 -8px var(--em)}.card:hover .ph{transform:scale(1.06)}.card .ph{aspect-ratio:4/3;border:0;border-radius:0}.card .im{overflow:hidden}
.card .t{padding:16px 18px 20px}.card h3{font-size:26px;margin-bottom:6px}.card p{margin:0;color:var(--mu);font-size:15px}.card small{color:var(--g2);font-weight:600}
.spec{background:var(--g);color:#fff;padding:30px;border-radius:12px;position:relative;overflow:hidden;transition:.3s}.spec:hover{transform:translateY(-6px)}.spec:before{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;background:var(--em);opacity:.16;border-radius:50%;transition:.5s}.spec:hover:before{transform:scale(2.2)}
.spec h3{font-size:34px;margin-bottom:10px}.spec p{color:#C9D8EA;margin:0 0 14px}.spec a{color:var(--am);font-weight:600}
.band{background:var(--g);color:#fff}.band p{color:#C9D8EA}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}.stats b{font:700 60px 'Barlow Condensed';color:var(--em);display:block;line-height:1}.stats span{color:#C9D8EA}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:30px}.steps div{border-top:4px solid var(--em);padding-top:14px}.steps b{font:700 24px 'Barlow Condensed';display:block}.steps span{color:#C9D8EA;font-size:15px}
.pills{display:flex;flex-wrap:wrap;gap:10px}.pills a,.pills button{padding:10px 18px;border:1.5px solid var(--g2);border-radius:40px;text-decoration:none;font:500 15px Barlow;background:var(--cd);color:var(--tx);cursor:pointer;transition:.2s}.pills a:hover,.pills .on{background:var(--g2);color:#fff}
.list{list-style:none;padding:0;margin:0}.list li{padding:12px 0 12px 36px;border-bottom:1px solid var(--bd);position:relative}.list li:before{content:"✓";position:absolute;left:0;color:#fff;background:var(--g2);width:22px;height:22px;border-radius:50%;font-size:13px;display:grid;place-items:center;top:15px}
details{background:var(--cd);border:1px solid var(--bd);border-radius:8px;margin-bottom:10px;padding:0 18px}summary{cursor:pointer;padding:16px 0;font-weight:600;display:flex;justify-content:space-between;list-style:none}summary:after{content:"+";font-size:22px;transition:.2s}details[open] summary:after{transform:rotate(45deg)}details p{color:var(--mu);margin:0 0 16px}
.two{display:grid;grid-template-columns:1.4fr .8fr;gap:40px;align-items:start}.stk{position:sticky;top:96px}
.side a{display:block;padding:12px 16px;border-left:4px solid var(--bd);text-decoration:none;font-weight:500;background:var(--cd);margin-bottom:6px;transition:.2s}.side a:hover,.side a.on{border-color:var(--em);background:var(--g);color:#fff;padding-left:22px}
.ba{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;margin:26px 0}.ba .ph{position:absolute;inset:0;border-radius:0}.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}.ba .ln{position:absolute;top:0;bottom:0;width:4px;background:var(--em);left:50%;pointer-events:none}
.stars{color:var(--am);letter-spacing:2px}.rc{background:var(--cd);border:1px solid var(--bd);border-radius:12px;padding:24px;position:relative}.rc:before{content:"“";font:700 90px 'Barlow Condensed';color:var(--em);opacity:.35;position:absolute;right:16px;top:-6px}.rc p{margin:10px 0 14px}.rc b{display:block}.rc small{color:var(--mu)}
.sl{overflow:hidden}.st{display:flex;transition:transform .7s cubic-bezier(.6,0,.2,1)}.st>div{flex:0 0 33.333%;padding:0 9px}.dots{display:flex;gap:8px;justify-content:center;margin-top:20px}.dots i{width:10px;height:10px;border-radius:9px;background:var(--bd);cursor:pointer;transition:.3s}.dots i.on{width:30px;background:var(--g2)}
.sum{display:flex;gap:30px;align-items:center;flex-wrap:wrap;background:var(--g);color:#fff;border-radius:12px;padding:28px;margin-bottom:28px}.sum b{font:700 72px 'Barlow Condensed';line-height:1}
.samp{font-size:13px;background:var(--am);color:#1a1200;display:inline-block;padding:3px 10px;border-radius:4px;margin-bottom:14px;font-weight:600}
.art{max-width:720px;margin:0 auto;font-size:18px}.art p{margin:0 0 20px}.art h1{font-size:clamp(40px,6vw,64px);margin:12px 0 20px}
.ph-hero{background:linear-gradient(120deg,#0F2A4A,#1F5FA8);color:#fff;padding:60px 0;position:relative;overflow:hidden}.ph-hero:after{content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;border:50px solid rgba(111,211,160,.1);border-radius:50%;animation:sp 20s linear infinite}@keyframes sp{to{transform:rotate(360deg) scale(1.1)}}
.ph-hero h1{font-size:clamp(40px,7vw,76px);text-transform:uppercase}.ph-hero p{color:#C9D8EA;max-width:60ch;font-size:18px}.crumb{font-size:14px;color:var(--em);margin-bottom:10px}.crumb a{text-decoration:none}
.site-footer{background:#081A30;color:#B9C9DC;padding:56px 0 24px;font-size:15px}.site-footer .g{grid-template-columns:1.4fr 1fr 1fr 1fr}.site-footer h3{color:#fff;font-size:22px;margin-bottom:10px}.site-footer a{display:block;text-decoration:none;padding:3px 0}.site-footer a:hover{color:var(--em)}
.rv{opacity:0;transform:translateY(30px);transition:opacity .7s,transform .7s}.rv.in{opacity:1;transform:none}.g>.rv:nth-child(3n+2){transition-delay:.1s}.g>.rv:nth-child(3n){transition-delay:.2s}
.call{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;background:var(--em);color:#04162B;font-weight:700;padding:14px 20px;border-radius:40px;text-decoration:none;animation:pl 2.4s infinite}@keyframes pl{50%{box-shadow:0 0 0 12px rgba(111,211,160,.2)}}
@media(max-width:1000px){.main-nav{display:none}.bg{display:block}.hero .w,.two{grid-template-columns:1fr}.c3,.c4,.steps,.stats{grid-template-columns:1fr 1fr}.site-footer .g{grid-template-columns:1fr 1fr}.stk{position:static}.st>div{flex-basis:50%}}
@media(max-width:560px){.c3,.c4,.c2,.steps{grid-template-columns:1fr}.s{padding:52px 0}.st>div{flex-basis:100%}.house{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none}.house path{stroke-dashoffset:0}}

[hidden]{display:none!important}
body.admin-bar .site-header{top:32px}@media(max-width:782px){body.admin-bar .site-header{top:46px}}
/* Below 600px WordPress's admin bar scrolls away with the page, so the sticky header must stick to the very top (a 46px offset left an empty strip above it while scrolling) */
@media(max-width:600px){body.admin-bar .site-header{top:0}}
.logo-img img{height:54px;width:auto;display:block}.logo-img a{display:block;line-height:0}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.pk-notice{background:var(--em);color:#04162B;font-weight:600;padding:12px 0;text-align:center}.pk-notice.err{background:#F5B324}
.art img{max-width:100%;height:auto;border-radius:10px}.art h2,.art h3{margin:28px 0 12px}
.pagination{margin-top:34px;display:flex;gap:8px;flex-wrap:wrap}.pagination a,.pagination span{padding:9px 16px;border:1.5px solid var(--g2);border-radius:40px;text-decoration:none}.pagination .current{background:var(--g2);color:#fff}
.card .im img{width:100%; height:203px;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s}.card:hover .im img{transform:scale(1.06)}
.map{border:0;width:100%;height:320px;border-radius:8px}

/* ---- images added in v1.3: team, service photo, real before/after, gallery ---- */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px}
.team-card{background:var(--cd);border:1px solid var(--bd);border-radius:12px;overflow:hidden;text-align:center;padding-bottom:12px}
.team-card .tp img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.team-card .ph{aspect-ratio:1;border:0;border-radius:0}
.team-card b{display:block;margin-top:10px;font:600 20px 'Barlow Condensed',sans-serif}
.team-card span{display:block;font-size:14px;color:var(--mu)}
.svc-photo{margin-bottom:24px}.svc-photo img{width:100%;height:auto;display:block;border-radius:10px}
.ba .ba-img{position:absolute;inset:0}.ba .ba-img img{width:100%;height:100%;object-fit:cover;display:block}
.pk-g-item img,.g>.rv>img{width:100%; height:230px;  aspect-ratio:1;object-fit:cover;display:block;border-radius:8px}

/* ---- Area page: full-width layout, multi-photo grid, map ---- */
.area-page{display:block}
.area-h{font-size:38px;margin:10px 0 18px}
.area-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:36px}
.area-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s}
.area-map{border-radius:14px;overflow:hidden;line-height:0;border:1px solid var(--bd)}
.area-page .card .t{padding:18px 20px}
@media(max-width:1000px){.area-gallery{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.area-gallery{grid-template-columns:1fr}.area-h{font-size:30px}}

/* ---- Blog post hero image ---- */
.art-img{margin:0 0 26px}.art-img img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;display:block}

/* ---- About page + team grid: full width, any number of members ---- */
.about-page{display:block}
.about-text{max-width:820px;margin-bottom:40px}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px;align-items:start}
.team-card{display:flex;flex-direction:column;height:100%;padding-bottom:16px}
.team-card .tp{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--cd)}
.team-card .tp img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center top;display:block}
.team-card .tp .ph{position:absolute;inset:0;aspect-ratio:auto}
.team-card b{padding:0 12px;overflow-wrap:anywhere}
.team-card span{padding:0 12px;overflow-wrap:anywhere}
@media(max-width:560px){.team-grid{grid-template-columns:repeat(2,1fr);gap:14px}}

/* ---- Area gallery items: fixed 4:3 photo + title/job caption ---- */
.area-gallery{align-items:start}
.ag-item{margin:0;background:var(--cd);border:1px solid var(--bd);border-radius:12px;overflow:hidden}
.ag-item .ag-img{display:block;overflow:hidden;cursor:default}
.ag-item img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s}
.ag-item figcaption{padding:12px 16px 14px}
.ag-item figcaption b{display:block;font:600 22px 'Barlow Condensed',sans-serif}
.ag-item figcaption span{display:block;font-size:14px;color:var(--mu)}


/* ---- v1.3.9 front page: lighter look, light-green accent only, real photos ---- */
.band-lt{background:#fff;color:var(--tx);border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.band-lt .stats b{color:var(--g2)}.band-lt .stats span{color:var(--mu)}
.spec .sp-img{margin:-30px -30px 18px;height:150px;overflow:hidden;position:relative}
.spec .sp-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}.spec:hover .sp-img img{transform:scale(1.06)}

/* Gallery tiles are links to the work post */
a.pk-g-item{display:block;color:inherit;text-decoration:none}

/* ---- v1.3.19 hero photo carousel (replaces the animated brick pattern) ---- */
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:#0F2A4A}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.4s ease;transform:scale(1.04)}
.hero-slide.on{opacity:1;animation:kb 9s ease-out forwards}@keyframes kb{to{transform:scale(1.12)}}
.hero-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,26,48,.86) 0%,rgba(15,42,74,.66) 55%,rgba(15,42,74,.5) 100%)}
.hero-dots{position:absolute;left:0;right:0;bottom:22px;z-index:2;display:flex;gap:8px;justify-content:center}
.hero-dots i{width:10px;height:10px;border-radius:9px;background:rgba(255,255,255,.4);cursor:pointer;transition:.3s}.hero-dots i.on{width:30px;background:var(--em)}
.hero.has-slides{background:#0F2A4A}
@media(prefers-reduced-motion:reduce){.hero-slide.on{animation:none;transform:none}}

/* ---- v1.3.22 About page redesign ---- */
.ab-kicker{display:inline-block;font:600 14px Barlow;letter-spacing:.12em;text-transform:uppercase;color:var(--g2);margin-bottom:10px}
.ab-intro{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.ab-text h2{font-size:clamp(34px,4.6vw,54px);margin-bottom:16px}
.ab-text p{font-size:18px;color:var(--mu);margin:0 0 14px}
.btn.o.ab-call{color:var(--g);border:2px solid var(--g);background:transparent}.btn.o.ab-call:hover{background:var(--g);color:#fff}
.ab-photos{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:200px 200px;gap:14px}
.ab-ph{border-radius:14px;overflow:hidden;background:var(--g)}
.ab-ph img{width:100%;height:100%;object-fit:cover;display:block}
.ab-ph.p1{grid-row:1/3}
.ab-photos.one{grid-template-columns:1fr;grid-template-rows:414px}.ab-photos.one .ab-ph.p1{grid-row:auto}
.ab-fallback{display:flex;align-items:center;justify-content:center;color:#fff;font:700 54px 'Barlow Condensed';letter-spacing:.1em;background:linear-gradient(120deg,#0F2A4A,#1F5FA8)}
.ab-badge{position:absolute;left:-22px;bottom:28px;background:var(--am);color:#1a1200;padding:14px 20px;border-radius:12px;box-shadow:0 12px 30px rgba(15,42,74,.25);text-align:center}
.ab-badge b{display:block;font:700 34px 'Barlow Condensed';line-height:1}.ab-badge span{font-size:14px;font-weight:600}
.ab-svc-card{display:block;background:var(--cd);border:1px solid var(--bd);border-radius:14px;padding:26px;text-decoration:none;transition:transform .3s,box-shadow .3s,border-color .3s}
.ab-svc-card:hover{transform:translateY(-6px);border-color:var(--g2);box-shadow:0 14px 0 -8px var(--em)}
.ab-svc-card i{font-style:normal;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:12px;background:var(--bg);font-size:26px;margin-bottom:14px}
.ab-svc-card h3{font-size:28px;margin-bottom:6px}.ab-svc-card p{margin:0;color:var(--mu);font-size:15px}
.ab-split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:stretch}
.ab-callout{background:var(--g);color:#fff;border-radius:16px;padding:38px;border-left:8px solid var(--am);position:relative;overflow:hidden}
.ab-callout .ab-kicker{color:var(--em)}.ab-callout h2{font-size:clamp(30px,4vw,44px);margin-bottom:12px}.ab-callout p{color:#C9D8EA;margin:0 0 22px;font-size:17px}
.ab-why h2{font-size:clamp(30px,4vw,44px);margin-bottom:12px}
.ab-disc{display:grid;grid-template-columns:1fr 1.2fr;gap:30px;align-items:center;background:var(--cd);border:1px solid var(--bd);border-radius:16px;padding:34px}
.ab-disc h2{font-size:clamp(30px,4vw,44px)}.ab-disc p{color:var(--mu);margin:8px 0 0}
@media(max-width:1000px){.ab-intro,.ab-split,.ab-disc{grid-template-columns:1fr}.ab-badge{left:14px}}
@media(max-width:560px){.ab-photos{grid-template-rows:150px 150px}.ab-photos.one{grid-template-rows:260px}.ab-callout{padding:26px}.ab-disc{padding:24px}}

/* ---- v1.3.22 Gallery page redesign: filter pills, bento grid, 9 per page ---- */
.gal-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.gal-bar .pills button em{font-style:normal;font-size:13px;opacity:.65;margin-left:4px}
.gal-bar .pills button.on{background:var(--g);border-color:var(--g);color:#fff}
.gal-count{margin:0;color:var(--mu);font-size:15px}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:240px;grid-auto-flow:dense;gap:16px}
.gal-item{position:relative;display:block;overflow:hidden;border-radius:14px;background:var(--g);color:#fff;text-decoration:none;animation:galIn .5s both}
.gal-item[hidden]{display:none}
.gal-item.big{grid-column:span 2;grid-row:span 2}
.gal-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto;border-radius:0;display:block;transition:transform .6s}
.gal-item:hover img{transform:scale(1.07)}
.gal-item:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(15,42,74,.88) 0,rgba(15,42,74,0) 55%);opacity:.9;transition:opacity .3s}
.gal-cap{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;z-index:2;transform:translateY(6px);transition:transform .3s}
.gal-item:hover .gal-cap{transform:none}
.gal-cap small{display:block;color:var(--em);font:600 13px Barlow;letter-spacing:.08em;text-transform:uppercase}
.gal-cap b{display:block;font:600 22px/1.1 'Barlow Condensed',sans-serif}
.gal-item.big .gal-cap b{font-size:32px}
.gal-go{position:absolute;right:14px;top:14px;z-index:2;width:36px;height:36px;border-radius:50%;background:var(--am);color:#1a1200;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.7);transition:.3s}
.gal-item:hover .gal-go{opacity:1;transform:none}
.gal-pager{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:34px}
.gal-pager button{min-width:44px;height:44px;padding:0 14px;border:1.5px solid var(--bd);border-radius:10px;background:var(--cd);color:var(--tx);font:600 16px Barlow;cursor:pointer;transition:.2s}
.gal-pager button:hover:not(:disabled){border-color:var(--g2);color:var(--g2)}
.gal-pager button.on{background:var(--g);border-color:var(--g);color:#fff}
.gal-pager button:disabled{opacity:.4;cursor:default}
@keyframes galIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(max-width:1000px){.gal-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:210px}}
@media(max-width:560px){.gal-grid{grid-auto-rows:170px;gap:10px}.gal-item.big{grid-column:span 2;grid-row:span 1}.gal-item.big .gal-cap b{font-size:26px}.gal-cap b{font-size:18px}.gal-go{opacity:1;transform:none}}

/* reCAPTCHA (v2 checkbox) inside forms */
.pk-captcha{margin:2px 0 12px;min-height:78px;overflow:hidden}.pk-captcha .g-recaptcha{transform-origin:0 0}
@media(max-width:380px){.pk-captcha .g-recaptcha{transform:scale(.85)}}

/* ---------- Service (trade) page ---------- */
.tp h2{font-size:clamp(30px,4vw,40px);margin:46px 0 14px}.tp .tp-main>h2:first-child{margin-top:0}
.tp-lead{font-size:18px;color:var(--mu);margin:0 0 14px;max-width:70ch}
.tp-does{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.tp-does li{position:relative;padding:13px 14px 13px 48px;background:var(--cd);border:1px solid var(--bd);border-radius:10px;font-weight:500;line-height:1.35}
.tp-does li:before{content:"\2713";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:var(--g2);color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center}
.tp-steps{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tp-steps div{background:var(--cd);border:1px solid var(--bd);border-top:4px solid var(--em);border-radius:10px;padding:16px}
.tp-steps b{font:700 22px 'Barlow Condensed',sans-serif;display:block;margin-bottom:4px}.tp-steps span{color:var(--mu);font-size:15px;line-height:1.45;display:block}
.tp-other{margin-top:20px}.tp-other h3{font-size:24px;margin-bottom:10px}
@media(max-width:560px){.tp-does,.tp-steps{grid-template-columns:1fr}}

/* ---------- Photo mosaic (service page) + hover zoom (service page, homepage, gallery) ---------- */
.tp-photos{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:12px}
.tp-ph{position:relative;margin:0;overflow:hidden;border-radius:14px;background:var(--g);cursor:zoom-in}
.tp-ph.w2{grid-column:span 2}.tp-ph.w4{grid-column:span 4}
.tp-photos.few{grid-auto-rows:260px}.tp-photos.few .tp-ph.w4{height:340px}
.tp-ph img,.pk-g-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1);border-radius:0}
.tp-ph:after,.pk-g-item:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(15,42,74,.55),rgba(15,42,74,0) 55%);opacity:0;transition:opacity .35s;pointer-events:none}
.tp-ph:hover img,.pk-g-item:hover img{transform:scale(1.12)}
.tp-ph:hover:after,.pk-g-item:hover:after{opacity:1}
/* little "+" badge that appears on hover */
.tp-ph .gal-go,.pk-g-item .gal-go{position:absolute;right:12px;top:12px;z-index:2;width:36px;height:36px;border-radius:50%;background:var(--am);color:#1a1200;font:700 22px/36px Barlow,sans-serif;text-align:center;font-style:normal;opacity:0;transform:scale(.7);transition:.3s}
.tp-ph:hover .gal-go,.pk-g-item:hover .gal-go{opacity:1;transform:none}
/* Homepage "Recent work" tiles */
figure.pk-g-item{position:relative;margin:0;overflow:hidden;border-radius:14px;height:230px;background:var(--g);cursor:zoom-in}
figure.pk-g-item img{height:100%}
.gal-item{cursor:zoom-in}
@media(max-width:1000px){.tp-photos{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}.tp-ph.w2,.tp-ph.w4{grid-column:span 2}}
@media(max-width:560px){.tp-photos{grid-auto-rows:140px;gap:8px}figure.pk-g-item{height:180px}.tp-ph .gal-go,.pk-g-item .gal-go{opacity:1;transform:none}}

/* ---------- Click-to-enlarge viewer ---------- */
#pk-lb{position:fixed;inset:0;z-index:100;background:rgba(8,26,48,.94);display:none;align-items:center;justify-content:center;padding:24px}
#pk-lb.on{display:flex}
#pk-lb img{max-width:min(92vw,1300px);max-height:84vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:lbIn .25s both}
@keyframes lbIn{from{opacity:0;transform:scale(.97)}}
#pk-lb button{position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;width:46px;height:46px;border-radius:50%;font:400 26px/46px Barlow,sans-serif;cursor:pointer;transition:.2s}
#pk-lb button:hover{background:var(--am);color:#1a1200}
#pk-lb .x{top:16px;right:16px}#pk-lb .pv{left:16px;top:50%;margin-top:-23px}#pk-lb .nx{right:16px;top:50%;margin-top:-23px}
#pk-lb .ct{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:#C9D8EA;font-size:14px}
@media(max-width:560px){#pk-lb .pv{left:6px}#pk-lb .nx{right:6px}}

/* ---------- Footer: stacked logo, working contact links, copyright line ---------- */
.site-footer .logo-img{display:inline-block;padding:0}
.site-footer .logo-img img{height:auto;width:130px;max-width:100%}
.site-footer .fc{margin-top:16px;line-height:1.9}
.site-footer .fc a{display:inline;padding:0;color:#D6E2F0;text-decoration:none;border-bottom:1px solid transparent;transition:.2s;word-break:break-word}
.site-footer .fc a:hover{color:var(--em);border-color:var(--em)}
.site-footer .fb{margin-top:30px;border-top:1px solid #1F3A5C;padding-top:14px;line-height:1.6}
.site-footer .fb a{display:inline;padding:0}

/* ---------- Collage banner (homepage) ---------- */
.cb{position:relative;overflow:hidden;background:#0F2A4A radial-gradient(120% 90% at 20% 0,#1F5FA8,#0F2A4A 60%,#081A30) no-repeat;background-size:cover;background-position:right center;color:#fff;padding:112px 0;isolation:isolate}
.cb:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,26,48,.3) 0%,rgba(8,26,48,.08) 36%,rgba(8,26,48,0) 50%)}
.cb-in{position:relative;max-width:1180px}
.cb-in>*{max-width:640px}
@media(min-width:1001px){.cb-in>*{max-width:min(560px,44vw)}.cb p{max-width:min(500px,40vw)}} /* keep the words inside the slanted navy panel (it reaches ~44% of the width at the bottom, ~57% at the top) */
.cb-k{display:inline-block;background:var(--am);color:#1a1200;font-weight:600;font-size:13px;letter-spacing:.4px;padding:5px 14px;border-radius:40px;margin-bottom:18px}
.cb h2{font-size:clamp(34px,4.2vw,58px);text-transform:uppercase;color:#fff;text-shadow:0 2px 16px rgba(8,26,48,.45)}
.cb p{font-size:18px;color:#D3E0EF;margin:22px 0 0;line-height:1.65;text-shadow:0 1px 10px rgba(8,26,48,.5)}
/* On laptop/tablet widths the photos start closer to the text, so shade the text side a bit more to keep the words easy to read */
@media(max-width:1500px){.cb:before{background:linear-gradient(90deg,rgba(8,26,48,.28) 0%,rgba(8,26,48,.12) 40%,rgba(8,26,48,0) 52%)}} /* the slanted navy panel is already part of the picture, so only a light extra shade here */
@media(max-width:1000px){.cb:before{background:linear-gradient(180deg,rgba(8,26,48,.5),rgba(8,26,48,.66))}}
@media(max-width:700px){
  .cb{padding:76px 0;text-align:left}
  .cb:before{background:linear-gradient(180deg,rgba(8,26,48,.5),rgba(8,26,48,.66))}
  .cb p{font-size:16.5px}
}
/* "Our services" heading directly under the banner: a bit of breathing room above and below it */
.s.s-after-cb{padding-top:72px}
.s-after-cb .hd{margin-bottom:42px}
@media(max-width:1000px){.s.s-after-cb{padding-top:56px}.s-after-cb .hd{margin-bottom:30px}}
@media(max-width:700px){.s.s-after-cb{padding-top:44px}.s-after-cb .hd{margin-bottom:24px}}

/* ---------- Responsive pass (whole site) ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip}
img,video,iframe,svg{max-width:100%}
/* Only inside blog-post text (.art). Do NOT use ".page" here: WordPress puts class "page" on <body> of every Page, which made this hit the header logo and the gallery tiles too. */
.art table{display:block;max-width:100%;overflow-x:auto}
.art img{height:auto}
input,select,textarea,button{max-width:100%}
.fm input,.fm select,.fm textarea{font-size:16px} /* 16px stops iPhones from zooming into the field */
@media(max-width:1000px){
  .s{padding:60px 0}
  .nav{height:64px}
  .logo-img img{height:46px}
  .hd{margin-bottom:22px}
  .site-footer .g{gap:28px 20px}
  .ph-hero{padding:48px 0}
}
@media(max-width:700px){
  body{font-size:15.5px}
  .w{padding:0 16px}
  .s{padding:48px 0}
  .hero{padding:54px 0 60px}
  .hero p{font-size:17px}
  .ph-hero{padding:38px 0}
  .ph-hero p{font-size:16px}
  .hd{align-items:flex-start}
  .hd .btn{padding:10px 18px}
  .btn{padding:12px 20px}
  .row .btn{flex:1 1 auto;text-align:center}
  .site-footer{padding:44px 0 90px}
  .site-footer .g{grid-template-columns:1fr 1fr}
  .site-footer .g>div:first-child{grid-column:1/-1}
  .site-footer .logo-img img{width:130px}
  .call{right:12px;padding:12px 16px;font-size:15px}
  .map,.area-map iframe{height:260px}
  .tick{font-size:13px}
}
@media(max-width:480px){
  .logo-img img{height:40px}
  .nav{gap:8px}
  .bg{padding:7px 10px;font-size:14px}
  .site-footer .g{grid-template-columns:1fr}
  .stats{gap:18px 10px}
  .stats b{font-size:44px}
  .pills button,.pills a{padding:8px 14px;font-size:14px}
  .fm{padding:18px}
  .call{padding:10px 14px;font-size:14px}
}
@media(hover:none){.btn:hover{transform:none;box-shadow:none}}