/* ============================================================
   Power Pros — EES-theme clone (polished)
   Palette: brand green #89E302 (sampled from the logo emblem) · dark header/topbar
   Type: Poppins · Rhythm: 120px desktop / 64px mobile
   ============================================================ */
:root{
  /* Brand green sampled from the green box in the logo (#89E302). Because it is
     near-invisible as text on white, --orange-ink is the readable
     companion used for type, thin icon strokes and ticks on light
     surfaces; --orange stays the lime used for fills and dark surfaces. */
  --orange:#89E302;
  --orange-dark:#75C202;
  --orange-ink:#4D770D;
  --orange-pale:#E3F6C6;
  /* hover lift: --orange lightened, same hue, so buttons brighten without
     shifting colour */
  --orange-lift:#B0FF3A;
  --on-orange:#141710;
  --dark:#24272B;
  --dark-2:#1A1D20;
  --ink:#1C1E21;
  --gray:#5B5F52;
  --gray-light:#6B7060;
  --beige:#EEF3DC;
  --line:#E7E9DE;
  --shadow-sm:0 1px 2px rgba(20,23,14,.06),0 6px 16px rgba(20,23,14,.07);
  --shadow:0 2px 4px rgba(20,23,14,.05),0 14px 32px rgba(20,23,14,.10);
  --shadow-lg:0 4px 8px rgba(20,23,14,.06),0 28px 60px rgba(20,23,14,.15);
  --ring:0 0 0 1px rgba(20,23,14,.08);
  /* Hero overlay strength, 0 = photo untouched, 1 = almost black.
     Driven by the hero darkness slider and saved per browser. */
  --hero-dark:.74;
  /* Corner radii */
  --r-sm:10px;
  --r:16px;
  --r-lg:22px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font-family:'Poppins',sans-serif;font-weight:400;color:var(--gray);background:#fff;font-size:16.5px;line-height:1.75;overflow-x:hidden}
@supports (overflow-x:clip){html,body{overflow-x:clip}}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;border:0;background:none;cursor:pointer}
h1,h2,h3,h4{color:var(--ink);font-weight:700}
h2{font-size:44px;line-height:1.15;letter-spacing:-.01em;margin-bottom:20px}
h3{font-size:26px;line-height:1.25}
section{scroll-margin-top:110px}
.container{max-width:1220px;margin:0 auto;padding:0 28px}
.eyebrow{color:#0A84FF;font-weight:700;letter-spacing:.22em;text-transform:uppercase;font-size:14px;margin-bottom:14px}
.eyebrow--center{text-align:center}
.h-center{text-align:center}
.h-tight{margin-top:6px}
.lead-gray{font-size:19px;line-height:1.6;color:#5A5A5A;margin-bottom:8px}
.lead-orange{color:var(--orange-ink);font-weight:500}
.orange-strong{color:var(--orange-ink)}
:focus-visible{outline:3px solid var(--orange-ink);outline-offset:3px}
.btn-cta:focus-visible,.tab.is-active:focus-visible,.acc-item.is-open .acc-head:focus-visible,.wa-float:focus-visible{outline:3px solid var(--on-orange);outline-offset:-5px}

/* ---- scroll reveal (site.js tags targets with .reveal) ---- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
.reveal.in-view{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .tab-panel.is-active{animation:none}
  .workshots img,.why-video img{transition:none}
}

/* ============ TOP BAR ============ */
.topbar{background:#111316;color:#E4E6E9;font-size:14px}
.topbar-inner{display:flex;align-items:center;min-height:54px;flex-wrap:wrap}
.topbar-item{display:flex;align-items:center;gap:12px;padding:8px 38px 8px 0;margin-right:38px;border-right:1px solid rgba(255,255,255,.14)}
.topbar-item:last-child{border-right:0;margin-right:0}
.topbar-item a{transition:color .2s}
.topbar-item a:hover{color:var(--orange)}
.tico{width:20px;height:20px;stroke:var(--orange);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ============ HEADER (dark) ============ */
.site-header{background:var(--dark-2);position:sticky;top:0;z-index:60;box-shadow:0 2px 22px rgba(0,0,0,.35)}
.header-inner{display:flex;align-items:center;gap:40px;min-height:96px}
.logo{display:flex;align-items:center}
.logo-img{width:auto;height:calc(39px * var(--pp-logo-scale, 1))}
/* logo mark bounce: the header logo is split into two clipped copies of the
   same image — the wordmark sits still, the box bounces every 8s */
.site-header .logo{position:relative}
.site-header .logo-img{clip-path:inset(0 0 0 var(--logo-split,19.6%))}
.logo-spark{position:absolute;left:0;top:50%;height:100%;width:auto;pointer-events:none;
  clip-path:inset(0 calc(100% - var(--logo-split,19.6%)) 0 0);
  transform:translateY(-50%);
  animation:logo-bounce 8s infinite}
@keyframes logo-bounce{
  0%,78%{transform:translateY(-50%);animation-timing-function:cubic-bezier(.3,0,.5,1)}
  83%{transform:translateY(-92%);animation-timing-function:cubic-bezier(.5,0,.8,1)}
  88%{transform:translateY(-50%);animation-timing-function:cubic-bezier(.3,0,.5,1)}
  91.5%{transform:translateY(-70%);animation-timing-function:cubic-bezier(.5,0,.8,1)}
  95%{transform:translateY(-50%);animation-timing-function:cubic-bezier(.3,0,.5,1)}
  97%{transform:translateY(-58%);animation-timing-function:cubic-bezier(.5,0,.8,1)}
  98.5%,100%{transform:translateY(-50%)}
}
@media (prefers-reduced-motion:reduce){.logo-spark{animation:none}}
.main-nav{flex:1}
.main-nav ul{display:flex;justify-content:center;gap:40px}
.main-nav a{color:#F0F0F0;font-weight:500;font-size:16.5px;padding:8px 0;transition:color .2s}
.main-nav a:hover,.main-nav a.active{color:var(--orange)}
.main-nav a.active{text-decoration:underline;text-underline-offset:9px;text-decoration-thickness:2px}
.btn-cta{display:inline-flex;align-items:center;gap:10px;background:var(--orange);color:var(--on-orange);font-weight:700;font-size:16px;letter-spacing:.01em;padding:17px 28px;white-space:nowrap;transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.btn-cta svg{width:18px;height:18px;fill:currentColor;flex:none}
.btn-cta:hover{background:var(--orange-lift);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:10px}
.nav-toggle span{display:block;width:26px;height:3px;background:#fff;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ============ HERO ============ */
.hero{position:relative;min-height:940px;display:flex;align-items:center;overflow:hidden;background:var(--dark)}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease}
.hero-slide.is-active{opacity:1}
.hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,
  rgba(18,18,16,var(--hero-dark)) 0%,
  rgba(18,18,16,calc(var(--hero-dark) * .62 + max(0, var(--hero-dark) - .8) * 2)) 70%,
  rgba(18,18,16,calc(var(--hero-dark) * .70 + max(0, var(--hero-dark) - .8) * 2)) 100%)}
.hero-ribbon{position:absolute;top:0;left:0;width:62%;height:180px;background:var(--orange);clip-path:polygon(0 0,100% 0,0 100%);z-index:2}
.hero-ribbon--light{width:68%;height:206px;background:rgba(137,227,2,.4)}
.hero-content{position:relative;z-index:3;width:100%;padding-top:186px;padding-bottom:150px}
/* Angled bottom edge with a grey accent band, cutting into the white below */
.hero-cut{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(72px,8.5vw,150px);z-index:4;display:block;pointer-events:none}
.hero-cut-band{fill:#6F7173}
.hero-cut-fill{fill:#fff}
.hero-content h1{color:#fff;font-size:clamp(30px,5.4vw,64px);line-height:1.1;letter-spacing:-.015em;font-weight:700;max-width:820px;margin-bottom:clamp(14px,1.8vw,24px);text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero-content h1 span{color:var(--orange)}
.hero-content p{color:#EFEFEF;font-size:clamp(15.5px,1.55vw,19px);line-height:1.7;max-width:620px;font-weight:300;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:clamp(10px,1.2vw,16px);margin-top:clamp(22px,2.7vw,34px)}
.btn-hero{display:inline-flex;align-items:center;justify-content:center;gap:11px;font-size:clamp(14.5px,1.3vw,16px);font-weight:600;letter-spacing:.03em;padding:clamp(15px,1.6vw,20px) clamp(22px,2.7vw,34px);transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.btn-hero svg{width:20px;height:20px;fill:currentColor}
.btn-hero--call{background:var(--orange);color:var(--ink);border:2px solid transparent;box-shadow:0 3px 8px rgba(11,13,7,.30),0 14px 30px rgba(11,13,7,.26)}
.btn-hero--call:hover{background:var(--orange-lift);transform:translateY(-2px);box-shadow:0 4px 10px rgba(11,13,7,.36),0 18px 38px rgba(11,13,7,.30)}
.btn-hero--book{background:#fff;color:var(--ink);border:2px solid transparent;box-shadow:0 3px 8px rgba(11,13,7,.30),0 14px 30px rgba(11,13,7,.26)}
.btn-hero--book:hover{background:#F2F2F2;transform:translateY(-2px);box-shadow:0 4px 10px rgba(11,13,7,.36),0 18px 38px rgba(11,13,7,.30)}
.hero-ticks{display:flex;flex-wrap:wrap;gap:clamp(10px,1.1vw,14px) clamp(18px,2.5vw,32px);margin-top:clamp(22px,2.7vw,34px)}
.hero-ticks li{position:relative;padding-left:clamp(24px,2.3vw,30px);color:#fff;font-size:clamp(14px,1.3vw,16px);font-weight:500;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.hero-ticks li::before{content:"";position:absolute;left:2px;top:.42em;width:6px;height:11px;border-right:2.5px solid var(--orange);border-bottom:2.5px solid var(--orange);transform:rotate(45deg);filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}

/* ============ WELCOME ============ */
.welcome{padding:120px 0}
.welcome-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:64px;align-items:center}
.welcome-media{position:relative}
.welcome-photo{position:relative;width:100%;aspect-ratio:4/5;max-height:620px;object-fit:cover;object-position:center;box-shadow:var(--shadow)}
.dots{position:absolute;background-image:radial-gradient(#C9C9C9 2.2px,transparent 2.4px);background-size:22px 22px}
.dots--right{width:150px;height:150px;left:-36px;bottom:-36px}
.welcome-feats{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin:36px 0 10px}
.feat{display:flex;align-items:center;gap:20px}
.feat-ico{flex:none;width:96px;height:96px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(20,23,14,.14),0 12px 26px rgba(20,23,14,.18)}
.feat-ico svg{width:42px;height:42px;stroke:var(--on-orange);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.feat strong{font-size:20px;color:var(--ink);line-height:1.3;font-weight:600}
.ticklist{margin-top:26px}
.ticklist li{position:relative;padding:7px 0 7px 42px;color:#4A4A4A;font-size:17.5px}
.ticklist li::before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:13px;border-right:2.5px solid var(--orange-ink);border-bottom:2.5px solid var(--orange-ink);transform:rotate(45deg)}

/* ============ TWO-COL COPY ============ */
.twocol{padding:0 0 120px}
.twocol-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.twocol p,.callout-copy p{margin-bottom:18px}

/* ============ SERVICE CARDS ============ */
.svc-cards{padding:0 0 120px}
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;align-items:stretch}
.svc-card{position:relative;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.svc-img{flex:none;height:265px;background-size:cover;background-position:center}
.svc-panel{position:relative;flex:1;margin:-48px 0 0;padding:74px 40px 62px;color:#CFD3C6;clip-path:polygon(0 0,100% 34px,100% 100%,0 100%)}
.svc-panel--dark{background:var(--dark)}
.svc-panel--orange{background:var(--orange);color:#2C3A00}
.svc-panel h3{color:#fff;font-size:26px;font-weight:600;margin:24px 0 16px}
.svc-panel--orange h3{color:#1A1F00}
.svc-panel p{font-size:16px;font-weight:300;line-height:1.8}
.svc-ico{width:60px;height:60px;stroke:var(--orange);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.svc-ico text{stroke:none;fill:var(--orange)}
.svc-ico--white{stroke:#1A1F00}
.svc-ico--white text{fill:#1A1F00}

/* ============ FAQ ============ */
.faq{padding:0 0 120px}
.faq-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center}
.faq-media{position:relative}
.faq-media img{width:100%;aspect-ratio:3/4;object-fit:cover;box-shadow:var(--shadow)}
.dots--faq{top:auto;bottom:-40px;right:-40px;width:70px;height:220px}
.accordion{margin-top:38px}
.acc-item{margin-bottom:24px;box-shadow:var(--shadow-sm);background:#fff;transition:box-shadow .25s}
.acc-item:hover{box-shadow:var(--shadow)}
.acc-head{position:relative;display:block;width:100%;text-align:left;font-size:20px;font-weight:600;color:var(--ink);padding:26px 72px 26px 32px;transition:background .25s,color .25s}
.acc-head::after{content:"";position:absolute;right:34px;top:50%;width:10px;height:10px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:translateY(-70%) rotate(45deg);transition:transform .3s ease}
.acc-item:not(.is-open) .acc-head:hover{color:var(--orange-ink)}
.acc-item.is-open .acc-head{background:var(--orange);color:var(--on-orange)}
.acc-item.is-open .acc-head::after{transform:translateY(-30%) rotate(-135deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
.acc-item.is-open .acc-body{max-height:420px}
.acc-body p{padding:24px 32px 30px;color:var(--gray)}

/* ============ LOGO STRIP ============ */
.logostrip{padding:0 0 96px}
.logostrip-inner{display:flex;align-items:center;justify-content:space-between;gap:44px;flex-wrap:wrap}
.loglogo{font-weight:700;font-size:32px;opacity:.85;line-height:1.05;transition:opacity .2s}
.loglogo:hover{opacity:1}
.loglogo--google{color:#4285F4}
.loglogo--google small{display:block;font-size:12.5px;color:#FBBC05;font-weight:600;letter-spacing:.06em}
.loglogo--google small em{color:#9AA0A6;font-style:normal}
.loglogo--mybuilder{color:#1B6BB5;font-weight:400;font-size:30px}
.loglogo--mybuilder b{color:#E4342C;font-weight:700}
.loglogo--mybuilder em{font-style:normal;font-size:19px;color:#1B6BB5}
.loglogo--niceic{color:#111;letter-spacing:.02em;font-weight:800}
.loglogo--niceic b{color:#D8232A}
.loglogo--cg{color:#111;font-size:27px;text-align:left;line-height:1.1}
.loglogo--rated{color:#5B5B5B;font-weight:500;font-size:26px}
.loglogo--rated b{display:inline-block;background:#57A83C;color:#fff;width:36px;height:36px;text-align:center;line-height:36px;border-radius:7px;margin-right:8px;font-weight:800}

/* ============ STATS ============ */
.stats{background:var(--dark-2);padding:96px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{text-align:center;padding:10px 20px;border-right:1px solid rgba(255,255,255,.14)}
.stat:last-child{border-right:0}
.stat-ico{width:78px;height:78px;stroke:var(--orange);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:26px}
.stat-ico text{stroke:none;fill:var(--orange)}
.stat strong{display:block;color:#fff;font-size:56px;font-weight:700;line-height:1;margin-bottom:12px}
.stat span{color:#DEDEDE;font-size:18px;font-weight:300}

/* ============ CALLOUT COPY ============ */
.callout-copy{padding:120px 0 56px}
.ticklist--round li{font-size:18px}

/* ============ PRICING ============ */
.pricing{position:relative;padding:0 0 120px}
.ghost{position:absolute;left:2%;top:120px;width:190px;stroke:#E7E9DE;fill:none;stroke-width:2;pointer-events:none;z-index:0}
.pricing .container{position:relative;z-index:1}
.pricing h2{margin-bottom:32px}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:64px;max-width:1140px;margin:0 auto;padding-top:74px}
.price-card{position:relative;background:#fff;box-shadow:var(--shadow);text-align:center;padding:104px 40px 60px}
.price-card::after{content:"";position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(8deg);width:120px;height:190px;background:var(--orange-ink);opacity:.06;clip-path:polygon(62% 0,10% 58%,42% 58%,30% 100%,90% 40%,55% 40%)}
.price-ico{position:absolute;top:-70px;left:50%;transform:translateX(-50%);width:140px;height:140px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 6px rgba(20,23,14,.16),0 16px 34px rgba(20,23,14,.20);border:6px solid #fff}
.price-ico svg{width:58px;height:58px;stroke:var(--on-orange);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.price-amount{display:block;font-size:56px;line-height:1.05;font-weight:700;color:var(--ink);margin-bottom:10px;position:relative}
.price-name{display:block;color:var(--gray-light);font-size:20px;margin-bottom:32px;position:relative}
.price-list{position:relative;text-align:left;display:inline-block}
.price-list li{position:relative;padding:8px 0 8px 34px;color:#4A4A4A;font-size:17px}
.price-list li::before{content:"";position:absolute;left:3px;top:.72em;width:6px;height:12px;border-right:2.5px solid var(--orange-ink);border-bottom:2.5px solid var(--orange-ink);transform:rotate(45deg)}

/* ============ BASIC CALLOUT ============ */
.basic-callout{padding:0 0 120px;text-align:center}
.basic-sub{font-size:20px;color:var(--gray);max-width:680px;margin:0 auto 24px}
.basic-note{font-size:15px;color:var(--gray);font-weight:400;line-height:1.7;max-width:640px;margin:0 auto 44px}
.meter{width:230px;margin:0 auto 30px;display:block;filter:drop-shadow(0 10px 18px rgba(0,0,0,.12))}
.basic-lead{color:var(--gray);font-size:19px;max-width:680px;margin:14px auto 0}

/* ============ TESTIMONIALS ============ */
.testimonials{padding:0 0 120px}
.testimonials h2{margin-bottom:56px}
.review-track{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.review-card{background:#FAFAFA;border:1px solid #F0F0F0;padding:36px 28px;display:flex;flex-direction:column}
.review-card h4{font-size:19px;font-weight:600;margin-bottom:12px}
.stars{color:#FBBC05;font-size:23px;letter-spacing:3px;display:block;margin-bottom:14px}
.review-card p{font-size:15.5px;color:#555;line-height:1.75;flex:1}
.read-more{color:var(--gray)}
.review-src{display:flex;align-items:center;gap:12px;margin-top:22px}
.gmark{font-style:normal;font-weight:800;font-size:20px;width:36px;height:36px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:#4285F4;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.review-src small{color:#8A8A8A;font-size:12.5px;line-height:1.4}
.review-src small .gsrc{color:#4285F4;font-weight:600}

/* ============ WHY CHOOSE US ============ */
.why{position:relative;padding:120px 0}
.why-bg{position:absolute;inset:0;background:var(--beige);clip-path:polygon(0 0,72% 0,66% 100%,0 100%)}
.dots--why-left{left:16px;top:60px;width:130px;height:150px;opacity:.4}
.dots--why-right{right:20px;bottom:40px;top:auto;width:120px;height:170px;opacity:.5}
.why-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.why-copy .eyebrow,.why-copy .h-center{text-align:left}
.why-copy .h-center{margin-bottom:22px}
.why-lead{text-align:left;max-width:620px;margin:0 0 48px}
.why-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.why-card{background:#fff;box-shadow:var(--shadow-sm);text-align:center;padding:34px 16px}
.why-ico{display:flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50%;background:var(--orange-pale);margin:0 auto 20px;transition:background .25s}
.why-ico svg{width:36px;height:36px;stroke:var(--orange-ink);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
.why-card:hover .why-ico{background:var(--orange)}
.why-card:hover .why-ico svg{stroke:var(--on-orange)}
.why-card strong{font-size:18px;color:var(--ink);font-weight:600;line-height:1.3;letter-spacing:.01em}
.why-media{display:grid;grid-template-columns:1fr 1.15fr;gap:24px;align-items:center}
.why-media > img{width:100%;height:400px;object-fit:cover;box-shadow:var(--shadow)}
.why-video{position:relative;box-shadow:var(--shadow);overflow:hidden}
.why-video img{width:100%;height:470px;object-fit:cover;transition:transform .6s ease}
.why-video:hover img{transform:scale(1.04)}
.play-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:96px;height:96px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 38px rgba(0,0,0,.28);transition:transform .25s}
.why-video:hover .play-btn{transform:translate(-50%,-50%) scale(1.08)}
.play-btn svg{width:44px;height:44px;fill:var(--orange-ink)}

/* ============ GALLERY ============ */
.gallery{display:grid;grid-template-columns:repeat(4,1fr)}
.gal-item{display:block;height:330px;background-size:cover;background-position:center;position:relative;overflow:hidden}
.gal-item:not(.gal-item--more)::after{content:"";position:absolute;inset:0;background:rgba(137,227,2,0);transition:background .25s ease}
.gal-item:not(.gal-item--more):hover::after{background:rgba(137,227,2,.30)}
.gal-item--more{background:linear-gradient(135deg,var(--orange) 0%,var(--orange-dark) 100%);display:flex;align-items:center;justify-content:center}
.gal-item--more::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);background-size:56px 56px;transform:skewX(-12deg) scale(1.3)}
.gal-item--more span{position:relative;color:var(--on-orange);font-size:72px;font-weight:200;line-height:1;transition:transform .3s ease}
.gal-item--more:hover span{transform:rotate(90deg)}

/* ============ OTHER SERVICES / TABS ============ */
.other-svcs{padding:120px 0 96px}
.other-svcs h2{margin-bottom:56px}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);max-width:1140px;margin:0 auto 84px;box-shadow:var(--shadow);background:#fff}
.tab{font-size:20px;font-weight:600;color:var(--ink);padding:28px 20px;position:relative;transition:background .25s,color .25s}
.tab:not(.is-active):hover{background:var(--orange-pale);color:var(--orange-ink)}
.tab.is-active{background:var(--orange);color:var(--on-orange);box-shadow:inset 0 -5px 0 var(--on-orange)}
.tab.is-active::after{content:"";position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);border:14px solid transparent;border-top-color:var(--orange);border-bottom:0}
.tab-panel{display:none}
.tab-panel.is-active{display:block;animation:panelIn .4s ease both}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tab-grid{display:grid;grid-template-columns:.85fr 1.6fr;gap:56px}
.tab-intro h3{font-size:32px;font-weight:700;margin-bottom:24px}
.tab-intro p{margin-bottom:20px}
.tab-feats{display:grid;grid-template-columns:1fr 1fr;gap:40px 48px}
.tfeat{display:flex;gap:24px;align-items:flex-start}
.tfeat-ico{flex:none;width:96px;height:96px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center}
.tfeat-ico svg{width:40px;height:40px;stroke:var(--orange-ink);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tfeat strong{display:block;font-size:20px;color:var(--ink);font-weight:600;margin-bottom:10px;line-height:1.3}
.tfeat p{color:var(--gray);font-size:16px}

/* ============ WORK SHOTS ============ */
.workshots{padding:0 0 120px}
.workshots-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.workshots figure{position:relative;box-shadow:var(--shadow);overflow:hidden}
.workshots img{width:100%;height:420px;object-fit:cover;transition:transform .6s ease}
.workshots figure:hover img{transform:scale(1.04)}
.workshots figure::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:var(--dark)}

/* ============ CARD HOVERS (after .reveal so transitions merge) ============ */
.price-card,.why-card,.review-card,.svc-card{transition:opacity .6s ease,transform .35s ease,box-shadow .35s ease}
.price-card:hover{transform:translateY(-8px);box-shadow:0 24px 55px rgba(0,0,0,.13)}
.why-card:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(0,0,0,.10)}
.review-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.08)}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}

/* ============ FOOTER ============ */
.footer{background:var(--dark);color:#C9C9C9}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:60px;padding-top:96px;padding-bottom:72px}
.logo--footer .logo-img{height:45px}
.f-brand p{margin-top:22px;font-size:15px;font-weight:300;line-height:1.8}
.f-col h4{color:#fff;font-size:19px;font-weight:600;margin-bottom:24px}
.f-col li{margin-bottom:12px;font-size:15px}
.f-col a{transition:color .2s}
.f-col a:hover{color:var(--orange)}
.f-contact a{word-break:break-all}
.f-contact li:first-child a{color:#fff;font-size:22px;font-weight:600;letter-spacing:.02em;word-break:normal}
.footer-bar{border-top:1px solid rgba(255,255,255,.1);padding:26px 0;font-size:14px;color:#9A9A9A}

/* ============ WHATSAPP ============ */
.wa-float{position:fixed;right:32px;bottom:32px;z-index:80;width:68px;height:68px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(0,0,0,.28);transition:transform .25s ease,box-shadow .25s ease}
.wa-float:hover{transform:scale(1.07);box-shadow:0 14px 34px rgba(0,0,0,.34)}
.wa-float:active{transform:scale(.98)}
.wa-float svg{width:40px;height:40px}

/* ============ BOOK ONLINE ============ */
.book{background:var(--beige);padding:110px 0}
.book-inner{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.book-copy h2{margin-bottom:18px}
.book-phone{display:inline-flex;align-items:center;gap:16px;margin-top:32px}
.book-phone svg{flex:none;width:56px;height:56px;padding:15px;border-radius:50%;background:var(--orange);fill:var(--on-orange);box-shadow:0 10px 26px rgba(0,0,0,.14);transition:transform .2s}
.book-phone:hover svg{transform:translateY(-3px)}
.book-phone small{display:block;font-size:13px;color:var(--gray);letter-spacing:.04em}
.book-phone strong{display:block;font-size:26px;color:var(--ink);font-weight:700;line-height:1.2}
.book-form{background:#fff;box-shadow:var(--shadow);padding:44px 40px;display:flex;flex-direction:column;gap:18px}
.bf-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.book-form input,.book-form textarea{font-family:inherit;font-size:16px;color:var(--ink);padding:17px 18px;border:1px solid #DDD;outline:none;width:100%;transition:border-color .2s,box-shadow .2s;resize:vertical}
.book-form input::placeholder,.book-form textarea::placeholder{color:#9B9B9B}
.book-form input:focus,.book-form textarea:focus{border-color:var(--orange-ink);box-shadow:0 0 0 3px rgba(77,119,13,.22)}
.btn-book{background:var(--orange);color:var(--on-orange);font-weight:700;font-size:15px;letter-spacing:.08em;padding:19px 42px;align-self:flex-start;transition:background .2s,transform .2s,box-shadow .2s}
.btn-book:hover{background:var(--orange-lift);transform:translateY(-2px);box-shadow:0 2px 5px rgba(20,23,14,.16),0 14px 30px rgba(20,23,14,.22)}
.btn-book:focus-visible{outline:3px solid var(--on-orange);outline-offset:-5px}

/* ============ ROUNDED CORNERS ============ */
.btn-cta,.btn-hero,.btn-book{border-radius:var(--r-sm)}
.welcome-photo,.faq-media img,.why-media > img,.why-video,.workshots figure,
.svc-img,.gal-item,.book-form,.acc-item,.price-card,.review-card,.why-card,
.tfeat-ico,.hd-body,.booking-card{border-radius:var(--r)}
.svc-card{border-radius:var(--r);overflow:hidden}
.svc-img{border-radius:var(--r) var(--r) 0 0}
.svc-panel{border-radius:0 0 var(--r) var(--r)}
.tabs{border-radius:var(--r);overflow:hidden}
.book-form input,.book-form textarea{border-radius:var(--r-sm)}
.workshots figure::after{border-radius:0 0 var(--r) var(--r)}
.gallery{border-radius:0}

/* ============ HERO DARKNESS CONTROL ============ */
.hero-dim{position:fixed;right:32px;bottom:176px;z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.hd-toggle{display:inline-flex;align-items:center;gap:9px;background:var(--dark);color:#fff;font-size:13px;font-weight:600;letter-spacing:.03em;padding:12px 18px;border-radius:40px;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:background .2s,transform .2s}
.hd-toggle:hover{background:#000;transform:translateY(-2px)}
.hd-toggle svg{width:18px;height:18px;stroke:var(--orange);fill:none;stroke-width:1.9;stroke-linecap:round}
.hero-dim.is-open .hd-toggle{background:var(--orange);color:var(--on-orange)}
.hero-dim.is-open .hd-toggle svg{stroke:var(--on-orange)}
.hd-body{background:var(--dark);color:#fff;padding:16px 18px 14px;border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.38);width:236px}
.hd-body label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#BFBFBF;margin-bottom:10px}
.hd-body input[type=range]{width:100%;accent-color:var(--orange);cursor:pointer}
.hd-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.hd-foot output{font-size:13px;font-weight:600;color:var(--orange)}
.hd-reset{font-size:12px;color:#C8C8C8;text-decoration:underline;padding:4px 0}
.hd-reset:hover{color:#fff}
@media (max-width:760px){
    .hero-dim{left:14px;right:auto;bottom:70px;align-items:flex-start}
  .hd-toggle{padding:0;width:38px;height:38px;justify-content:center;border-radius:50%;opacity:.5}
  .hd-toggle:hover,.hd-toggle:focus-visible,.hero-dim.is-open .hd-toggle{opacity:1}
  .hd-toggle span{display:none}
  .hd-body{width:210px}
}

/* ============ IMAGE EDITOR ============ */
[hidden]{display:none !important}
.img-edit-bar{position:fixed;right:32px;bottom:232px;z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.ie-btn{display:inline-flex;align-items:center;gap:9px;background:var(--dark);color:#fff;font-size:13px;font-weight:600;letter-spacing:.03em;padding:12px 18px;border-radius:40px;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:background .2s,transform .2s}
.ie-btn:hover{background:#000;transform:translateY(-2px)}
.ie-btn svg{width:18px;height:18px;fill:currentColor}
.ie-toggle.is-on{background:var(--orange)}
.ie-toggle.is-on:hover{background:var(--orange-dark)}
.ie-download{background:#1F7A3D}
.ie-download:hover{background:#166030}
.ie-reset{background:#8A2B23}
.ie-reset:hover{background:#6E211B}
.ie-controls{position:absolute;top:12px;left:12px;z-index:30;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ie-pick,.ie-undo,.ie-focus{display:inline-flex;align-items:center;gap:7px;background:rgba(18,19,22,.86);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.04em;padding:8px 13px;border-radius:30px;box-shadow:0 4px 14px rgba(0,0,0,.35);transition:background .2s,color .2s,transform .2s,opacity .2s}
.ie-pick:hover,.ie-undo:not(:disabled):hover,.ie-focus:hover{background:var(--orange);color:var(--on-orange);transform:scale(1.04)}
.ie-pick svg{width:15px;height:15px;fill:currentColor}
.ie-undo svg,.ie-focus svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ie-undo:disabled{opacity:.35;cursor:not-allowed}
.ie-focus.is-on{background:var(--orange);color:var(--on-orange)}
/* While picking a focus point the image gets a crosshair and a lime ring.
   Do NOT set position here — .hero-slide is position:absolute;inset:0 and
   overriding it collapses the slide to zero height mid-click. */
.is-picking-focus{cursor:crosshair !important;outline:3px solid var(--orange);outline-offset:-3px}
.is-picking-focus *{cursor:crosshair !important}
.ie-focus-hint{position:fixed;left:50%;top:24px;transform:translateX(-50%);z-index:120;background:var(--orange);color:var(--on-orange);font-size:13px;font-weight:700;letter-spacing:.03em;padding:11px 20px;border-radius:40px;box-shadow:0 10px 30px rgba(0,0,0,.35);pointer-events:none}
/* the logo sits in a short dark bar — drop its controls just beneath it */
.ie-controls--logo{top:50%;transform:translateY(-50%);left:calc(100% + 14px);flex-wrap:nowrap;white-space:nowrap}
.ie-size{display:inline-flex;align-items:center;justify-content:center;width:32px;background:rgba(18,19,22,.86);color:#fff;font-size:16px;font-weight:700;padding:8px 0;border-radius:30px;box-shadow:0 4px 14px rgba(0,0,0,.35);transition:background .2s,color .2s,transform .2s}
.ie-size:hover{background:var(--orange);color:var(--on-orange);transform:scale(1.08)}
.is-editing-images [data-img-key]{outline:2px dashed rgba(137,227,2,.85);outline-offset:-2px}

/* ---- floating admin toggle (bottom-right, above the WhatsApp float) ---- */
@keyframes adminSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){}
@media (max-width:760px){
  .img-edit-bar{left:14px;right:auto;bottom:22px;align-items:flex-start}
  .ie-toggle{padding:0;width:38px;height:38px;justify-content:center;border-radius:50%;opacity:.5}
  .ie-toggle:hover,.ie-toggle:focus-visible,.ie-toggle.is-on{opacity:1}
  .ie-toggle span{display:none}
  .ie-btn{font-size:12px;padding:10px 14px}
}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  h2{font-size:36px}
  .main-nav ul{gap:22px}
  .main-nav a{font-size:16px}
  .hero{min-height:760px}
  .hero-content{padding-top:240px;padding-bottom:130px}
  .hero-ribbon{height:150px}
  .hero-ribbon--light{height:170px}
  .welcome-grid,.twocol-grid,.faq-grid,.tab-grid{gap:48px}
  .book-inner{grid-template-columns:1fr;gap:48px}
  .tab-feats{grid-template-columns:1fr;gap:34px}
  .tab-intro h3{font-size:28px}
  .svc-grid{grid-template-columns:repeat(2,1fr);gap:32px}
  .price-grid{grid-template-columns:repeat(3,1fr);gap:26px;max-width:100%}
  .review-track{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:1fr 1fr;gap:56px 0}
  .stat:nth-child(2n){border-right:0}
  .workshots-grid{grid-template-columns:repeat(3,1fr);gap:24px}
  .workshots img{height:300px}
  .gallery{grid-template-columns:1fr 1fr}
  .gal-item{height:280px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:44px}
  .why-bg{clip-path:none}
  .why-grid{grid-template-columns:1fr;gap:64px}
  .why-media{max-width:640px;margin:0 auto}
}
@media (max-width:960px){
  .btn-cta{order:2;margin-left:auto}
  .nav-toggle{display:flex;order:3;margin-left:12px}
  .main-nav{position:absolute;top:100%;left:0;right:0;background:var(--dark-2);border-top:3px solid var(--orange);box-shadow:0 24px 48px rgba(0,0,0,.45);padding:8px 28px 22px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .25s,transform .25s,visibility .25s}
  .main-nav.is-open{opacity:1;visibility:visible;transform:none}
  .main-nav ul{flex-direction:column;gap:0;justify-content:flex-start}
  .main-nav a{display:block;padding:15px 0;font-size:18px;color:#F0F0F0;border-bottom:1px solid rgba(137,227,2,.14)}
  .main-nav li:last-child a{border-bottom:0}
  .main-nav a:hover,.main-nav a.active{color:var(--orange);text-decoration:none}
}
@media (max-width:860px){
  .welcome-grid,.twocol-grid,.faq-grid,.tab-grid{grid-template-columns:1fr;gap:56px}
  .welcome-media{max-width:540px;margin:0 auto 36px}
  .faq-media{max-width:540px;margin:0 auto}
  .faq-media img{height:420px;aspect-ratio:auto}
  .dots--faq{display:none}
}
@media (max-width:760px){
  body{font-size:16px}
  h2{font-size:30px}
  h3{font-size:24px}
  .topbar-inner{justify-content:flex-start}
  .topbar-item{border-right:0;margin-right:0;padding:6px 0}
  .topbar-item:nth-child(1),.topbar-item:nth-child(2){display:none}
  .header-inner{min-height:80px;gap:16px}
  .btn-cta{padding:12px 16px;font-size:13px;letter-spacing:.03em}
  .hero{min-height:720px}
  .hero-ribbon{width:85%;height:110px}
  .hero-ribbon--light{width:92%;height:130px}
  .hero-content{padding-top:190px;padding-bottom:96px}
  .btn-hero{flex:1 1 100%}
  .hero-ticks{display:grid;grid-template-columns:1fr 1fr}
  .book{padding:64px 0}
  .book-form{padding:30px 22px}
  .bf-row{grid-template-columns:1fr;gap:16px}
  .btn-book{align-self:stretch;text-align:center}
  .welcome{padding:64px 0}
  .dots--right{display:none}
  .welcome-photo{aspect-ratio:1/1}
  .welcome-feats{grid-template-columns:repeat(2,1fr);gap:16px}
  .feat-ico{width:84px;height:84px}
  .feat-ico svg{width:38px;height:38px}
  .twocol,.svc-cards,.faq,.pricing,.basic-callout,.testimonials,.workshots{padding:0 0 64px}
  /* one card at a time on phones */
  .svc-grid{grid-template-columns:1fr;gap:32px;max-width:520px;margin:0 auto}
  .price-grid{grid-template-columns:1fr;gap:104px;max-width:420px;padding-top:74px}
  .workshots-grid{grid-template-columns:1fr;gap:28px;max-width:520px;margin:0 auto}
  .callout-copy{padding:64px 0 32px}
  .logostrip{padding:0 0 48px}
  .logostrip-inner{justify-content:center;gap:34px}
  .stats{padding:64px 0}
  .stats-grid{gap:44px 0}
  .stat{padding:0 10px}
  .stat-ico{width:64px;height:64px;margin-bottom:16px}
  .stat strong{font-size:42px}
  .stat span{font-size:16px}
  .review-track{grid-template-columns:1fr}
  .tabs{grid-template-columns:1fr}
  .tab.is-active::after{display:none}
  .tfeat-ico{width:84px;height:84px}
  .gallery{grid-template-columns:1fr 1fr}
  .gal-item{height:220px}
  .why{padding:64px 0}
  .other-svcs{padding:64px 0}
  .why-cards{grid-template-columns:1fr 1fr;gap:16px}
  .why-card{padding:30px 14px}
  .why-ico{width:80px;height:80px;margin-bottom:18px}
  .why-card strong{font-size:17px}
  .why-media{grid-template-columns:1fr;gap:22px}
  .why-media > img{height:280px}
  .why-video img{height:280px}
  .play-btn{width:84px;height:84px}
  .play-btn svg{width:36px;height:36px}
  .workshots img{height:380px}
  .footer-grid{grid-template-columns:1fr;gap:40px;padding-top:56px;padding-bottom:48px}
  .ghost{display:none}
  .wa-float{width:60px;height:60px;right:18px;bottom:18px}
  .wa-float svg{width:36px;height:36px}
}
@media (max-width:560px){
  .header-inner{gap:8px}
  .logo-img{height:calc(28px * var(--pp-logo-scale, 1))}
  .btn-cta{padding:11px 13px;font-size:11.5px;letter-spacing:.02em}
  .nav-toggle{padding:8px 4px}
  .hero-ticks{gap:10px 18px}
  .hero-ticks li{font-size:14px}
}
@media (max-width:480px){
  .topbar{font-size:14px}
  .tico{width:18px;height:18px}
  .acc-head{font-size:18px;padding:20px 56px 20px 22px}
  .acc-head::after{right:24px}
  .acc-body p{padding:18px 22px 24px}
  .price-ico{width:120px;height:120px;top:-60px}
  .price-ico svg{width:52px;height:52px}
  .price-card{padding:78px 24px 48px}
  .price-amount{font-size:46px}
  .eyebrow{font-size:13px}
}

/* ============================================================
   SERVICES DROPDOWN
   ============================================================ */
.has-sub{position:relative}
.has-sub>a{display:inline-flex;align-items:center;gap:7px}
/* the dropdown link is inline-flex for its arrow, so give every top-level nav
   link the same box model or "Services" sits lower than its neighbours */
@media(min-width:961px){
  .main-nav>ul{align-items:center}
  .main-nav>ul>li{display:flex;align-items:center}
  .main-nav>ul>li>a{display:inline-flex;align-items:center;gap:7px;line-height:1.3}
}
.has-sub>a::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.has-sub:hover>a::after{transform:rotate(225deg) translateY(1px)}
.subnav{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);min-width:296px;background:var(--dark-2);border-top:3px solid var(--orange);border-radius:0 0 var(--r-sm) var(--r-sm);box-shadow:0 24px 48px rgba(0,0,0,.45);padding:9px 0;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;z-index:70}
.has-sub:hover>.subnav,.has-sub:focus-within>.subnav{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.subnav a{display:block;padding:11px 24px;font-size:15px;font-weight:500;color:#E8E8E8;white-space:nowrap}
.subnav a:hover{background:rgba(137,227,2,.13);color:var(--orange)}
/* keep the dropdown inside the viewport on desktop - scroll if 12 items do not fit */
@media(min-width:961px){.subnav{max-height:calc(100vh - 200px);overflow-y:auto;overscroll-behavior:contain}}

/* ============================================================
   SERVICE PAGES
   ============================================================ */
.sp-hero{background:var(--dark);color:#fff;padding:66px 0 60px;border-bottom:4px solid var(--orange)}
.sp-crumb{font-size:13.5px;color:#9AA0A6;margin-bottom:16px}
.sp-crumb a{color:#9AA0A6}
.sp-crumb a:hover{color:var(--orange)}
.sp-hero h1{color:#fff;font-size:clamp(28px,4.3vw,47px);line-height:1.13;font-weight:700;max-width:900px;margin-bottom:16px}
.sp-lead{font-size:clamp(15.5px,1.5vw,18.5px);color:#E4E4E4;max-width:730px;line-height:1.72;font-weight:300}
.sp-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.sp-trust{display:flex;flex-wrap:wrap;gap:11px 26px;margin-top:26px}
.sp-trust li{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600}
.sp-trust li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none}
.sp-section{padding:62px 0}
.sp-section--alt{background:#F5F6F3}
.sp-section h2{font-size:clamp(23px,2.7vw,34px);font-weight:700;line-height:1.22;margin-bottom:16px;color:var(--ink)}
.sp-section h3{font-size:clamp(17px,1.7vw,20px);font-weight:700;margin-bottom:8px;color:var(--ink)}
.sp-section p{color:var(--gray);line-height:1.75;margin-bottom:14px;max-width:74ch}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));gap:20px;margin-top:26px}
.sp-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:var(--r-sm);padding:22px 24px;box-shadow:var(--shadow-sm)}
.sp-card p{margin-bottom:0;font-size:15px}
.sp-check{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:8px 28px;margin-top:22px}
.sp-check li{position:relative;padding-left:30px;color:var(--gray);line-height:1.65;margin-bottom:6px}
.sp-check li::before{content:"";position:absolute;left:5px;top:8px;width:11px;height:6px;border-left:2.5px solid var(--orange-ink);border-bottom:2.5px solid var(--orange-ink);transform:rotate(-45deg)}
.sp-quote{border-left:4px solid var(--orange);background:#fff;padding:17px 24px;border-radius:var(--r-sm);color:var(--ink);margin:16px 0;box-shadow:var(--shadow-sm)}
.sp-steps{counter-reset:sp;list-style:none;padding-left:0;margin-top:26px;display:grid;gap:18px}
.sp-steps li{counter-increment:sp;position:relative;padding-left:58px;color:var(--gray);line-height:1.7}
.sp-steps li::before{content:counter(sp);position:absolute;left:0;top:-3px;width:38px;height:38px;border-radius:50%;background:var(--orange);color:var(--on-orange);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:15px}
.sp-steps strong{color:var(--ink);display:block;margin-bottom:3px}
.sp-warn{background:#FFF7E6;border:1px solid #F0DCA8;border-left:4px solid #E0A106;border-radius:var(--r-sm);padding:22px 26px;margin-top:24px}
.sp-warn h3{margin-top:0}
.sp-warn p:last-child{margin-bottom:0}
.sp-band{background:var(--dark);color:#fff;padding:50px 0;text-align:center}
.sp-band h2{color:#fff;margin-bottom:12px;font-size:clamp(22px,2.5vw,31px);font-weight:700}
.sp-band p{color:#DADADA;margin:0 auto 24px;max-width:640px;line-height:1.7}
.sp-band .sp-ctas{justify-content:center;margin-top:0}
.sp-faq{margin-top:26px;max-width:920px}
.sp-faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:12px;box-shadow:var(--shadow-sm)}
.sp-faq summary{cursor:pointer;padding:18px 22px;font-weight:600;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:center;font-size:16px}
.sp-faq summary::-webkit-details-marker{display:none}
.sp-faq summary::after{content:"+";font-size:23px;color:var(--orange-ink);font-weight:700;line-height:1;flex:none}
.sp-faq details[open] summary::after{content:"\2212"}
.sp-faq .sp-answer{padding:0 22px 20px}
.sp-faq p{margin-bottom:10px;font-size:15.5px}
.sp-faq p:last-child{margin-bottom:0}
.sp-related{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.sp-related a{display:inline-block;background:#fff;border:1px solid #DCDFD7;border-radius:30px;padding:11px 21px;font-size:14.5px;font-weight:600;color:var(--ink);transition:background .2s,border-color .2s,color .2s}
.sp-related a:hover{border-color:var(--orange);background:var(--orange);color:var(--on-orange)}
.sp-note{font-size:13.5px;color:#8A8F86;margin-top:12px}
.sp-table{width:100%;border-collapse:collapse;margin-top:22px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.sp-table th,.sp-table td{padding:14px 18px;text-align:left;border-bottom:1px solid #EDEFEA;font-size:15px;color:var(--gray)}
.sp-table th{background:var(--dark);color:#fff;font-weight:600}
.sp-table tr:last-child td{border-bottom:0}
/* The burger menu owns the nav from 960px down, so the dropdown has to be an
   in-flow list from 960px down too - not from 760px, which left a 200px band
   where a tap-driven menu held floating hover panels. */
@media(max-width:960px){
  .subnav{position:static;transform:none;opacity:1;visibility:visible;min-width:0;background:transparent;border-top:0;box-shadow:none;padding:2px 0 10px}
  .subnav a{padding:11px 0 11px 16px;font-size:15.5px;color:#BFC4B8;border-bottom:1px solid rgba(137,227,2,.10)}
  .has-sub>a::after{display:none}
}
@media(max-width:760px){
  .sp-hero{padding:42px 0 40px}
  .sp-section{padding:44px 0}
  .sp-steps li{padding-left:50px}
}

/* ============================================================
   SERVICE PAGES - homepage visual language
   ============================================================ */
/* photo+copy sections reuse .welcome; --flip mirrors it */
.welcome--svc{padding:96px 0}
.welcome-grid--flip .welcome-media{order:2}
.welcome-grid--flip .welcome-copy{order:1}
.dots--left{width:150px;height:150px;right:-36px;bottom:-36px;left:auto}
/* warm beige for alternating bands, like the homepage rhythm */
.sp-section--alt{background:var(--beige)}
/* CTA band: dark like the homepage callouts, with the lime ribbon corner */
.sp-band{position:relative;overflow:hidden;background:var(--dark-2)}
.sp-band .container{position:relative;z-index:2}
.sp-band .eyebrow{color:var(--orange)}
/* eyebrows sit tight over sp-section headings */
.sp-section .eyebrow{margin-bottom:10px}
@media(max-width:760px){
  .welcome--svc{padding:64px 0}
  .welcome-grid--flip .welcome-media{order:0}
  .welcome-grid--flip .welcome-copy{order:0}
}

/* ============================================================
   SERVICE PAGE CARD GRIDS - homepage svc-card language
   Scoped to .sp-grid children so the standalone example-job
   card keeps its light treatment.
   ============================================================ */
.sp-grid{grid-template-columns:repeat(2,1fr);gap:34px;margin-top:34px}
.sp-grid > .sp-card{
  background:var(--dark);
  border:0;
  border-left:0;
  border-radius:var(--r);
  padding:42px 38px 38px;
  color:#CFD3C6;
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease;
}
.sp-grid > .sp-card::before{
  content:"";
  display:block;
  width:44px;height:44px;
  margin-bottom:20px;
  background:var(--orange);
  -webkit-mask:var(--sp-ico) center/contain no-repeat;
  mask:var(--sp-ico) center/contain no-repeat;
  --sp-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4.5 13.5H11l-1 8.5 8.5-11.5H12z'/%3E%3C/svg%3E");
}
/* four icons cycling, echoing the four different icons on the homepage */
.sp-grid > .sp-card:nth-child(4n+2)::before{--sp-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5zm-1 13-3.5-3.5 1.4-1.4L11 12.2l4.6-4.6 1.4 1.4z'/%3E%3C/svg%3E")}
.sp-grid > .sp-card:nth-child(4n+3)::before{--sp-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2v6H7v3a5 5 0 0 0 4 4.9V22h2v-6.1A5 5 0 0 0 17 11V8h-2V2h-2v6h-2V2z'/%3E%3C/svg%3E")}
.sp-grid > .sp-card:nth-child(4n+4)::before{--sp-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.7 5.6 18 9.3l-2.3-.6-.6-2.3 3.7-3.7A6 6 0 0 0 11 8.6L3.4 16.2a2 2 0 0 0 2.8 2.8l7.6-7.6a6 6 0 0 0 7.9-5.8z'/%3E%3C/svg%3E")}
.sp-grid > .sp-card h3{color:#fff;font-size:22px;font-weight:600;line-height:1.3;margin-bottom:12px}
.sp-grid > .sp-card p{color:#CFD3C6;font-size:15.5px;font-weight:300;line-height:1.8;margin-bottom:0}
.sp-grid > .sp-card a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.sp-grid > .sp-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
/* every third card takes the lime panel, like the homepage rhythm */
.sp-grid > .sp-card:nth-child(3n){background:var(--orange);color:#2C3A00}
.sp-grid > .sp-card:nth-child(3n) h3{color:#1A1F00}
.sp-grid > .sp-card:nth-child(3n) p{color:#2C3A00}
.sp-grid > .sp-card:nth-child(3n) a{color:#1A1F00}
.sp-grid > .sp-card:nth-child(3n)::before{background:#1A1F00}
/* on the beige bands the dark cards need no extra separation */
.sp-section--alt .sp-grid > .sp-card{box-shadow:var(--shadow-sm)}
@media(max-width:860px){
  .sp-grid{grid-template-columns:1fr;gap:24px}
  .sp-grid > .sp-card{padding:34px 28px 30px}
}

/* ============================================================
   SERVICES DROPDOWN - fix
   ".main-nav ul{display:flex}" also matches .subnav and has higher
   specificity than ".subnav", so on desktop the 12 links were laid
   out in one horizontal row that ran off the screen. Force a
   vertical panel, and split it into two columns on wide screens so
   all twelve are visible at once without scrolling.
   ============================================================ */
@media(min-width:961px){
  .main-nav .subnav{display:block;gap:0;justify-content:flex-start;max-height:calc(100vh - 190px);overflow-y:auto}
  .main-nav .subnav li{display:block}
}
@media(min-width:1040px){
  .main-nav .subnav{display:grid;grid-template-columns:1fr 1fr;min-width:640px;max-height:none;overflow:visible;padding:14px 0}
  .main-nav .subnav a{padding:11px 26px}
}

/* the hero's angled cut must be filled with whatever colour the section
   below it uses, or a stray white sliver shows above a beige band */
.hero--service .hero-cut-fill{fill:var(--pp-cut-fill,var(--beige))}

/* dotted ornaments are decoration - they belong behind the photo, not over it */
.faq-media img,.welcome-media .welcome-photo{position:relative;z-index:1}
.faq-media .dots,.welcome-media .dots{z-index:0}

/* one continuous WHITE body on service pages - no alternating bands
   (dark stats/CTA bands and the hero are unaffected) */
.sp-section,.sp-section--alt,.welcome--svc{background:#fff}
.hero--service .hero-cut-fill{fill:#fff}

/* ============================================================
   FAINT LOGO WATERMARKS
   The logo is scattered through the page background as a very
   faint grey mark. --wm-logo is set by js/logo-spark.js from the
   live header logo, so it follows any uploaded replacement.
   ============================================================ */
:root{--wm-logo:url("../images/logo-powerpros.png")}
.sp-section,.welcome--svc,.twocol,.callout-copy,.other-svcs{position:relative}
.sp-section > .container,.welcome--svc > .container,.twocol > .container,
.callout-copy > .container,.other-svcs > .container{position:relative;z-index:1}
.sp-section:nth-of-type(3n+1)::after,
.welcome--svc::after,
.twocol::after,.callout-copy::after,.other-svcs::after{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  /* square box showing only the emblem: the background is zoomed so the
     logo's left slice (the bolt square) fills it, cropping the wordmark */
  width:clamp(96px,11vw,180px);
  height:clamp(96px,11vw,180px);
  background:var(--wm-logo) left center/var(--wm-zoom,511%) auto no-repeat;
  filter:grayscale(1) brightness(.55);
  opacity:.06;
}
/* scattered placements so they never look tiled */
.sp-section:nth-of-type(6n+1)::after{right:3%;top:14%;transform:rotate(-7deg)}
.sp-section:nth-of-type(6n+4)::after{left:4%;bottom:11%;transform:rotate(6deg) scale(.82)}
.welcome--svc::after{right:5%;bottom:9%;transform:rotate(-11deg) scale(.9)}
.welcome--svc:nth-of-type(even)::after{right:auto;left:3%;top:12%;transform:rotate(9deg) scale(.78)}
.twocol::after{right:6%;top:10%;transform:rotate(5deg) scale(.95)}
.callout-copy::after{left:5%;bottom:12%;transform:rotate(-9deg)}
.other-svcs::after{right:4%;bottom:10%;transform:rotate(7deg) scale(1.05)}
@media(max-width:760px){
  .sp-section::after,.welcome--svc::after,.twocol::after,
  .callout-copy::after,.other-svcs::after{opacity:.05;width:86px;height:86px}
}

/* photo blocks: the image fills the height of the copy beside it instead of
   sitting at a fixed aspect with dead space. Applies to every welcome and FAQ
   block on every page; below 861px the grids stack and the photo reverts. */
@media(min-width:861px){
  .welcome-grid,.faq-grid{align-items:stretch}
  .welcome-media,.faq-media{display:flex}
  .welcome-photo,.faq-media img{height:100%;width:100%;max-height:none;aspect-ratio:auto;object-fit:cover}
}

/* call + book buttons sitting inside a light content section */
.sp-inline-ctas{margin-top:30px}
.sp-inline-ctas .btn-hero--book{border-color:#D8DCD2;box-shadow:var(--shadow-sm)}
.sp-inline-ctas .btn-hero--book:hover{border-color:var(--orange);background:#fff}

/* quote cards in photo+copy sections that have no per-quote answer:
   give them the FAQ card look (no chevron, since they do not expand) */
.faq-copy .sp-quote{
  background:#fff;
  border-left:0;
  border-radius:var(--r-sm);
  box-shadow:var(--shadow-sm);
  padding:22px 28px;
  margin:0 0 14px;
  font-size:17px;
  font-weight:600;
  line-height:1.45;
  color:var(--ink);
  transition:box-shadow .25s;
}
.faq-copy .sp-quote:hover{box-shadow:var(--shadow)}

/* flat buttons - no drop shadows */
.btn-hero,.btn-hero--call,.btn-hero--book,.btn-cta,.btn-book,
.sp-inline-ctas .btn-hero--book{box-shadow:none}
.btn-hero--call:hover,.btn-hero--book:hover,.btn-cta:hover,.btn-book:hover,
.sp-inline-ctas .btn-hero--book:hover{box-shadow:none}

/* town coverage list on service pages */
.sp-towns{gap:10px}
.sp-towns a{font-weight:500}

/* credentials list: two columns of four at every width, including mobile
   (type and indent tighten on small screens so the columns still read) */
.ticklist--two{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;row-gap:0}
@media(max-width:860px){
  .ticklist--two{column-gap:20px}
  .ticklist--two li{font-size:15px;padding:6px 0 6px 27px;line-height:1.45}
  .ticklist--two li::before{left:3px;top:.6em;width:6px;height:11px;border-width:2px}
}
@media(max-width:420px){
  .ticklist--two{column-gap:12px}
  .ticklist--two li{font-size:13.5px;padding:5px 0 5px 22px}
  .ticklist--two li::before{left:2px;width:5px;height:9px}
}

/* three service features side by side: icon above a centred label so all
   three fit across a phone as well as the desktop copy column */
.feat{flex-direction:column;align-items:flex-start;text-align:left;gap:12px}
.feat-ico{width:78px;height:78px}
.feat-ico svg{width:34px;height:34px}
.feat strong{font-size:16px}
@media(max-width:860px){
  .feat-ico{width:60px;height:60px;box-shadow:0 2px 4px rgba(20,23,14,.14),0 8px 18px rgba(20,23,14,.16)}
  .feat-ico svg{width:27px;height:27px}
  .feat strong{font-size:13px;line-height:1.35}
  .feat{gap:9px}
}
@media(max-width:420px){
  .feat-ico{width:52px;height:52px}
  .feat-ico svg{width:23px;height:23px}
  .feat strong{font-size:11.5px}
}

/* attribution under a quoted review */
.sp-attrib{display:block;margin-top:10px;font-size:14px;font-weight:600;color:var(--orange-ink);font-style:normal}

/* Header call control.
   Desktop: no button at all - white text with the phone icon and the number,
   so the header stays clean and the number itself is readable.
   Mobile: a lime button reading "Call us!", which is a far easier tap target
   than a line of text, and the number is one tap away anyway. */
.btn-cta{background:none;color:#fff;padding:0;box-shadow:none;font-size:17px;letter-spacing:.01em;gap:9px}
.btn-cta:hover{background:none;box-shadow:none;transform:none;color:var(--orange)}
.btn-cta:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.btn-cta .cta-label{display:none}
.btn-cta .cta-number{display:inline}
@media(max-width:760px){
  .btn-cta{background:var(--orange);color:var(--on-orange);padding:13px 20px;font-size:14.5px;letter-spacing:.02em;gap:8px}
  .btn-cta:hover,.btn-cta:active{background:var(--orange-lift);color:var(--on-orange);transform:none}
  .btn-cta:focus-visible{outline:3px solid var(--on-orange);outline-offset:-5px}
  .btn-cta .cta-label{display:inline}
  .btn-cta .cta-number{display:none}
  .btn-cta svg{width:17px;height:17px}
}
@media(max-width:420px){
  .btn-cta{padding:11px 15px;font-size:13.5px;gap:6px}
}



/* reviews page: show every review in a grid rather than a 4-across strip */
.review-track--all{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:26px}
.review-track--all .review-card{height:auto}

/* Every accordion panel is open by default, so the collapsed-height cap has
   to clear the longest answer on the site rather than the shortest. */
.acc-item.is-open .acc-body{max-height:1600px}

/* Inner-page hero: pull the crumb + heading up towards the green diagonal.
   Halves the gap that opened up once the ribbons shrank at these widths.
   The homepage / location heroes are vertically centred and keep their own
   spacing, so this is scoped to the service-style hero only. */
@media (max-width:1080px){
  .hero--service .hero-content{padding-top:200px}
}
@media (max-width:760px){
  .hero--service .hero-content{padding-top:155px}
}


/* --- Mobile: the Services / Areas dropdowns start closed ------------------
   The theme laid every child link out inline below 760px, so the menu ran to
   31 items before you reached Reviews. Each group now collapses and opens on
   tap. Above 760px nothing changes - the desktop hover menu is untouched. */
@media(max-width:960px){
  .main-nav .has-sub>a{display:flex;align-items:center;justify-content:space-between;width:100%}
  .main-nav .has-sub>a::after{content:"";display:block;flex:none;width:8px;height:8px;margin-right:6px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-3px);transition:transform .25s ease}
  .main-nav .has-sub.is-open>a{color:var(--orange)}
  .main-nav .has-sub.is-open>a::after{transform:rotate(225deg) translateY(2px)}
  .main-nav .has-sub>.subnav{max-height:0;overflow:hidden;opacity:0;visibility:hidden;padding:0;
    transition:max-height .3s ease,opacity .2s ease,padding .3s ease,visibility .3s}
  /* The desktop rule centres the panel with translateX(-50%). That is keyed
     off :hover/:focus-within, which a tap satisfies, and the cascade resolves
     per property - so without restating transform here the open in-flow panel
     slid half its own width off the left edge. */
  .main-nav .has-sub>.subnav,
  .main-nav .has-sub:hover>.subnav,
  .main-nav .has-sub:focus-within>.subnav{transform:none}
  .main-nav .has-sub.is-open>.subnav{max-height:1600px;opacity:1;visibility:visible;padding:2px 0 10px;transform:none}

  /* The panel hangs off a pinned sticky header, so page scrolling cannot bring
     an over-long menu back into view - it has to scroll itself. The calc is a
     floor for the case where the script has not sized it yet; site.js replaces
     it with the exact space left below the header. */
  .main-nav{max-height:calc(100vh - 140px);overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .main-nav::-webkit-scrollbar{width:4px}
  .main-nav::-webkit-scrollbar-thumb{background:rgba(137,227,2,.5);border-radius:4px}
}


/* Admin toggle - a small round "A" that lives in the footer bar next to the
   copyright. Muted while admin mode is off so it reads as part of the footer
   furniture, brand green while it is on so an editor can see the mode they
   are in at a glance. */
/* The button sits at the LEFT of the bar: the WhatsApp float is fixed at
   right:32px/bottom:32px with z-index 80, and would otherwise cover the
   button - and swallow its clicks - exactly when the footer is on screen. */
.footer-bar .container{display:flex;align-items:center;justify-content:flex-start;gap:16px}
.footer-bar .container .admin-btn{order:-1;position:relative;z-index:90}
.admin-btn{flex:none;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:700;line-height:1;
  background:rgba(255,255,255,.06);color:#A8A8A8;border:1px solid rgba(255,255,255,.30);
  transition:background .2s,color .2s,border-color .2s}
.admin-btn:hover,.admin-btn:focus-visible{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.34)}
.admin-btn.is-on{background:var(--orange);color:var(--on-orange);border-color:var(--orange)}
.admin-btn.is-on:hover{background:var(--orange-dark);border-color:var(--orange-dark);color:var(--on-orange)}
/* Fallback only, for any page without a footer bar - never leave an editor
   stranded in admin mode with no way to leave it. */
.admin-btn--float{position:fixed;left:20px;bottom:20px;z-index:90;box-shadow:0 4px 14px rgba(0,0,0,.28)}
@media(max-width:560px){
  .footer-bar .container{flex-direction:column;gap:14px;text-align:center}
}


/* Sitemap link in the footer bar. Kept on the left beside the copyright: the
   WhatsApp float is fixed to the bottom-right and would sit over anything
   pushed to that end of the row. */
.footer-sitemap{color:#9A9A9A;font-size:14px;padding-left:16px;border-left:1px solid rgba(255,255,255,.16);
  transition:color .2s}
.footer-sitemap:hover,.footer-sitemap:focus-visible{color:var(--orange)}
@media(max-width:560px){
  .footer-sitemap{border-left:0;padding-left:0}
}

/* Sitemap page: three columns of links that collapse on narrow screens. */
.sitemap-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:44px 40px}
.sitemap-group h2{font-size:19px;font-weight:700;color:var(--ink);margin-bottom:16px;
  padding-bottom:12px;border-bottom:2px solid var(--orange)}
.sitemap-list{list-style:none;margin:0;padding:0}
.sitemap-list li{border-bottom:1px solid var(--line)}
.sitemap-list li:last-child{border-bottom:0}
.sitemap-list a{display:block;padding:11px 0 11px 22px;position:relative;font-size:15.5px;
  color:var(--gray);transition:color .2s,padding-left .2s}
.sitemap-list a::before{content:"";position:absolute;left:2px;top:1.05em;width:6px;height:6px;
  border-right:2px solid var(--orange-ink);border-bottom:2px solid var(--orange-ink);
  transform:rotate(-45deg)}
.sitemap-list a:hover,.sitemap-list a:focus-visible{color:var(--orange-ink);padding-left:27px}