/* service.css , shared template for all 7 service pages. Ported from Chris's
   commercial-solar-panel-cleaning-perth custom code. Shared vars/buttons/
   reveal/wrap system live in pg-base.css (loaded before this file on every
   page) , this file holds only the section styles unique to service pages. */

/* ═══════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════ */
#pg .hero{background:var(--darker);padding:0 0 clamp(20px,3vh,40px) 0;overflow:hidden;position:relative}
#pg .hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px);background-size:38px 38px;z-index:0}
#pg .hero::after{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(to bottom,transparent 0%,var(--orange) 30%,var(--orange) 70%,transparent 100%)}
#pg .hero__inner{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:clamp(80px,9vh,120px) 32px 0}
#pg .hero__eyebrow{font-family:var(--font-b);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:24px;display:block;animation:heroEyebrowSlide .7s var(--ease-pro) .1s both}
#pg .hero__h1{font-family:var(--font-h);font-size:clamp(34px,4.5vw,68px);line-height:1.05;letter-spacing:-.025em;color:#fff;margin-bottom:22px;animation:heroH1Rise .8s var(--ease-pro) .2s both}
#pg .hero__sub{font-size:clamp(14px,1.6vw,17px);font-weight:400;color:rgba(255,255,255,.65);max-width:640px;line-height:1.7;margin-bottom:28px;animation:heroFadeUp .7s var(--ease-pro) .35s both}
#pg .hero__cta{animation:heroFadeUp .7s var(--ease-pro) .5s both;padding-bottom:20px}
#pg .hero .btn-group{margin-top:12px}
#pg .hero__trust{display:flex;flex-direction:column;gap:9px;margin-top:24px;padding-top:32px;border-top:1px solid rgba(255,255,255,.1);animation:heroFadeUp .7s var(--ease-pro) .65s both}
#pg .hero__trust-item{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,.6);font-weight:500}
#pg .hero__trust-dot{width:6px;height:6px;border-radius:50%;background:var(--orange);flex-shrink:0}
#pg .hero__img-wrap{margin-top:56px;border-radius:24px;overflow:hidden;position:relative;width:100%;max-width:100%;border:3px solid var(--orange);box-shadow:0 4px 16px rgba(255,165,3,.15),0 16px 48px rgba(0,0,0,.22),0 32px 80px rgba(0,0,0,.18)}
#pg .hero__img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:24px;animation:heroFadeUp .9s var(--ease-pro) .75s both}

/* ═══════════════════════════════════════════════════════════
   INTRO
   ═══════════════════════════════════════════════════════════ */
#pg .intro{background:var(--cream);padding:clamp(72px,9vw,120px) 0}
#pg .intro__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,88px);align-items:stretch}
#pg .intro__overline{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--orange);margin-bottom:18px;display:flex;align-items:center;gap:12px}
#pg .intro__overline::before{content:'';width:28px;height:1.5px;background:var(--orange)}
#pg .intro__h2{font-family:var(--font-h);font-size:clamp(26px,3vw,40px);font-weight:800;line-height:1.12;letter-spacing:-.02em;color:var(--dark);margin-bottom:24px}
#pg .intro__body p{font-size:16px;color:var(--muted);line-height:1.78;margin-bottom:14px}
#pg .intro__body p strong{color:var(--dark)}
#pg .intro__body p:last-child{margin-bottom:0}
#pg .intro__img-wrap{max-width:360px;height:100%;margin-left:auto;border-radius:20px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.08),0 16px 48px rgba(0,0,0,.1),0 32px 80px rgba(0,0,0,.06);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
#pg .intro__img-wrap:hover{transform:translateY(-5px);box-shadow:0 8px 24px rgba(0,0,0,.14),0 24px 64px rgba(0,0,0,.18),0 48px 120px rgba(0,0,0,.1)}
#pg .intro__img{width:100%;height:100%;min-height:280px;object-fit:cover;display:block}
/* Designed alternative to the intro photo, used where no distinct photo exists
   for the slot. Same column footprint as .intro__img-wrap. */
#pg .intro__aside{max-width:360px;margin-left:auto}

/* ═══════════════════════════════════════════════════════════
   FEATURES
   ═══════════════════════════════════════════════════════════ */
#pg .features{background:var(--dark);padding:clamp(72px,9vw,120px) 0}
#pg .features__header{text-align:center;margin-bottom:56px}
#pg .features__h2{font-family:var(--font-h);font-size:clamp(26px,3vw,40px);font-weight:800;letter-spacing:-.02em;color:#fff}
#pg .features__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
#pg .features__grid--4{grid-template-columns:repeat(4,1fr)}
#pg .feature-card{background:rgba(255,255,255,.04);border-radius:20px;padding:36px 28px;border:1px solid rgba(255,255,255,.07);box-shadow:0 4px 16px rgba(0,0,0,.18),0 12px 40px rgba(0,0,0,.22);transition:background .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);position:relative;overflow:hidden}
#pg .feature-card:hover{background:rgba(255,255,255,.08);transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.28),0 20px 56px rgba(0,0,0,.3)}
#pg .feature-card__line{position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--orange);transition:width .35s var(--ease)}
#pg .feature-card:hover .feature-card__line{width:100%}
#pg .feature-card__icon{width:32px;height:32px;margin-bottom:18px;display:block;color:var(--orange)}
#pg .feature-card__icon svg{width:100%;height:100%}
#pg .feature-card__title{font-family:var(--font-h);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:10px}
#pg .feature-card__text{font-size:14px;color:rgba(255,255,255,.6);line-height:1.65;margin:0}

/* ═══════════════════════════════════════════════════════════
   RESPONSE STRIP (pulse badge, e.g. above features grid)
   ═══════════════════════════════════════════════════════════ */
#pg .response-strip{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto 44px;padding:18px 32px;border-radius:9999px;background:rgba(255,165,3,.08);border:1.5px solid rgba(255,165,3,.22);max-width:560px}
@media(min-width:680px){
  #pg .response-strip{max-width:none;width:max-content}
  #pg .response-strip__text{white-space:nowrap}
}
#pg .response-strip__dot{width:9px;height:9px;border-radius:50%;background:var(--orange);flex-shrink:0;box-shadow:0 0 0 3px rgba(255,165,3,.2);animation:responsePulse 2.2s ease infinite}
#pg .response-strip__text{font-size:13px;font-weight:600;color:rgba(255,255,255,.72);letter-spacing:.03em}
#pg .response-strip__text strong{color:var(--orange);font-weight:700}
@keyframes responsePulse{0%,100%{box-shadow:0 0 0 3px rgba(255,165,3,.2)}50%{box-shadow:0 0 0 7px rgba(255,165,3,.06)}}

/* ═══════════════════════════════════════════════════════════
   STAT STRIP
   ═══════════════════════════════════════════════════════════ */
#pg .stats{background:var(--orange);padding:clamp(48px,6vw,80px) 0}
#pg .stats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;text-align:center}
#pg .stat-item{padding:0 32px;border-right:1px solid rgba(255,255,255,.25)}
#pg .stat-item:last-child{border-right:none}
#pg .stat-item__num{font-family:var(--font-h);font-size:clamp(36px,5vw,64px);font-weight:800;color:#fff;line-height:1;display:block;margin-bottom:8px}
#pg .stat-item__label{font-size:13px;font-weight:600;color:rgba(255,255,255,.8);letter-spacing:.06em;text-transform:uppercase;line-height:1.4}

/* ═══════════════════════════════════════════════════════════
   SERVICE CARDS
   ═══════════════════════════════════════════════════════════ */
#pg .services{background:var(--warm);padding:clamp(72px,9vw,120px) 0}
#pg .services__header{margin-bottom:48px}
#pg .services__h2{font-family:var(--font-h);font-size:clamp(26px,3vw,40px);font-weight:800;letter-spacing:-.02em;color:var(--dark)}
#pg .services__sub{font-size:16px;color:var(--muted);margin-top:12px;max-width:640px;line-height:1.7}
#pg .services__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:900px;margin:0 auto}
/* Exactly 3 cards (contact-us, get-a-quote) orphan the 3rd into an unbalanced
   lone column under the default 2-col grid - switch those to a true 3-col
   row instead. :has() scoping leaves the 4-card pages' 2x2 layout untouched.
   min-width guard keeps this from outranking the max-width:900px single-column
   stack rule below on specificity (the :has() pseudo-class adds weight the
   plain mobile selector doesn't have). */
@media(min-width:901px){
  #pg .services__grid:has(.svc-card:nth-child(3):last-child){grid-template-columns:repeat(3,1fr);max-width:1100px}
}
#pg .svc-card{border-radius:20px;background:#fff;padding:40px 32px;border:2px solid var(--orange);box-shadow:0 4px 16px rgba(255,165,3,.1),0 12px 40px rgba(0,0,0,.07),0 24px 72px rgba(0,0,0,.04);transition:transform .28s var(--ease),box-shadow .28s var(--ease);display:flex;flex-direction:column}
#pg .svc-card:hover{transform:translateY(-6px);box-shadow:0 8px 24px rgba(255,165,3,.18),0 20px 56px rgba(0,0,0,.12),0 40px 100px rgba(0,0,0,.07)}
#pg .svc-card__icon{width:40px;height:40px;margin-bottom:20px;display:block;color:var(--orange)}
#pg .svc-card__icon svg{width:100%;height:100%}
#pg .svc-card__title{font-family:var(--font-h);font-size:19px;font-weight:800;color:var(--dark);margin-bottom:12px;letter-spacing:-.01em}
#pg .svc-card__body{font-size:14px;color:var(--muted);line-height:1.7;flex:1}
#pg .svc-card__body p{margin:0 0 8px}
#pg .svc-card__body p:last-child{margin-bottom:0}
#pg .svc-card__contact-link{display:block;color:var(--orange);font-weight:700;text-decoration:underline;white-space:nowrap;margin-bottom:8px}

/* ═══════════════════════════════════════════════════════════
   SPLIT SECTIONS
   ═══════════════════════════════════════════════════════════ */
#pg .split{padding:clamp(72px,9vw,112px) 0}
#pg .split__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px);align-items:stretch}
#pg .split__img-wrap{height:100%;border-radius:20px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.22),0 16px 48px rgba(0,0,0,.3),0 32px 80px rgba(0,0,0,.2)}
#pg .split__img{width:100%;height:100%;min-height:280px;object-fit:cover;display:block}
#pg .split__eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);display:block;margin-bottom:14px}
#pg .split__h2{font-family:var(--font-h);font-size:clamp(24px,2.8vw,38px);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:#fff;margin-bottom:20px}
#pg .split__body p{font-size:15px;color:rgba(255,255,255,.7);line-height:1.75;margin-bottom:14px}
#pg .split__body p:last-child{margin-bottom:0}
#pg .split__list{list-style:none;padding:0;margin-top:20px}
#pg .split__list li{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:14px;font-weight:600;color:rgba(255,255,255,.85);display:flex;align-items:flex-start;gap:10px}
#pg .split__list li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--orange);flex-shrink:0;margin-top:6px}
#pg .split__list li:last-child{border-bottom:none}
/* .split__list is written for the dark split sections. The hospitality list on
   the commercial window page reuses it inside a light .intro section, where
   white-on-cream is barely legible. This modifier flips the text and rule
   colours to the light-section palette; the bullet, spacing and weight stay
   identical so the two read as the same component. */
#pg .split__list--light li{color:var(--dark);border-bottom-color:rgba(54,69,79,.14)}
#pg .split--dark{background:var(--darker)}
#pg .split--mid{background:var(--dark)}

/* ═══════════════════════════════════════════════════════════
   TIERS
   ═══════════════════════════════════════════════════════════ */
#pg .tiers{background:var(--darker);padding:clamp(72px,9vw,120px) 0;position:relative}
#pg .tiers__header{text-align:center;margin-bottom:56px}
#pg .tiers__h2{font-family:var(--font-h);font-size:clamp(28px,3.5vw,48px);font-weight:800;letter-spacing:-.025em;color:#fff}
#pg .tiers__sub{font-size:15px;color:rgba(255,255,255,.55);margin-top:12px}
#pg .tiers__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
#pg .tier-card{border-radius:20px;padding:40px 32px;border:2px solid var(--orange);background:rgba(255,255,255,.04);box-shadow:0 4px 16px rgba(0,0,0,.22),0 12px 40px rgba(255,165,3,.1);min-height:100%;display:flex;flex-direction:column;transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
#pg .tier-card:hover{transform:translateY(-5px);box-shadow:0 8px 28px rgba(0,0,0,.3),0 20px 56px rgba(255,165,3,.18)}
#pg .tier-card__label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:8px;display:block}
#pg .tier-card__title{font-family:var(--font-h);font-size:22px;font-weight:800;color:#fff;margin-bottom:20px;min-height:3.2rem;line-height:1.2;letter-spacing:-.01em}
#pg .tier-card hr{border:none;border-top:1px solid rgba(255,255,255,.1);margin-bottom:20px}
#pg .tier-card__list{list-style:none;padding:0;margin:0 0 28px;flex:1}
#pg .tier-card__list li{padding:7px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:13px;font-weight:600;color:rgba(255,255,255,.8)}
#pg .tier-card__list li:last-child{border-bottom:none}
#pg .tier-card .btn{width:100%;text-align:center;display:block;margin-top:auto}

/* ═══════════════════════════════════════════════════════════
   AREAS WE SERVE
   ═══════════════════════════════════════════════════════════ */
#pg .areas{background:var(--cream);padding:clamp(72px,9vw,120px) 0}
#pg .areas__header{text-align:center;margin-bottom:56px}
#pg .areas__h2{font-family:var(--font-h);font-size:clamp(26px,3vw,40px);font-weight:800;letter-spacing:-.02em;color:var(--dark);margin-bottom:0}
#pg .areas__sub{font-size:16px;color:var(--muted);max-width:640px;margin:12px auto 0;line-height:1.7}
#pg .areas__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:48px}
#pg .area-card{border-radius:20px;overflow:hidden;border:2px solid var(--orange);background:#fff;box-shadow:0 4px 16px rgba(255,165,3,.1),0 12px 40px rgba(0,0,0,.07);transition:transform .28s var(--ease),box-shadow .28s var(--ease);display:flex;flex-direction:column;text-decoration:none;color:inherit}
#pg .area-card:hover{transform:translateY(-6px);box-shadow:0 8px 24px rgba(255,165,3,.18),0 20px 56px rgba(0,0,0,.12)}
#pg .area-card__img-wrap{overflow:hidden;position:relative}
#pg .area-card__img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;transition:transform .4s var(--ease)}
#pg .area-card:hover .area-card__img{transform:scale(1.04)}
#pg .area-card__body{padding:24px;flex:1;display:flex;flex-direction:column}
#pg .area-card__title{font-family:var(--font-h);font-size:20px;font-weight:800;color:var(--dark);margin-bottom:8px;letter-spacing:-.01em}
#pg .area-card__desc{font-size:13px;color:var(--muted);line-height:1.6;flex:1;margin-bottom:16px}
#pg .area-card__link{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin-top:auto;display:inline-flex;align-items:center;gap:4px}
#pg .area-card:hover .area-card__link{gap:8px}
#pg .areas__links{border-top:1px solid var(--border);padding-top:32px;text-align:center}
#pg .areas__links p{font-size:14px;color:var(--muted);line-height:2.2}
#pg .areas__links a{color:var(--orange-a11y);font-weight:600;text-decoration:underline;text-underline-offset:3px}
#pg .areas__links a:hover{color:var(--darker)}
/* Coverage note sits under the suburb list. The list runs at line-height 2.2,
   so anything under ~40px reads as another line of the list rather than a
   separate statement - matches the 32px+ rhythm the areas block already uses
   above its own border. */
#pg .areas__links p.areas__note{font-size:15px;color:var(--muted);line-height:1.75;max-width:660px;margin:44px auto 0;text-wrap:pretty}
#pg .intro__body p.intro__note{margin-top:26px}
@media (max-width:900px){
  #pg .areas__links p.areas__note{margin-top:32px}
}

/* ═══════════════════════════════════════════════════════════
   REVIEWS
   ═══════════════════════════════════════════════════════════ */
#pg .reviews{background:var(--dark);padding:clamp(72px,9vw,112px) 0}
#pg .reviews__header{text-align:center;margin-bottom:48px}
#pg .reviews__h2{font-family:var(--font-h);font-size:clamp(26px,3vw,40px);font-weight:800;letter-spacing:-.02em;color:#fff}
#pg .reviews__sub{font-size:15px;color:rgba(255,255,255,.55);margin-top:10px}
#pg .reviews__widget{border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.07);background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.18),0 16px 48px rgba(0,0,0,.22)}
#pg .reviews__widget iframe{width:100%;min-width:100%;border:0;display:block}

/* ═══════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════ */
#pg .faq{background:var(--darker);padding:clamp(72px,9vw,120px) 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
#pg .faq__header{text-align:center;margin-bottom:52px}
#pg .faq__eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);display:block;margin-bottom:14px}
#pg .faq__h2{font-family:var(--font-h);font-size:clamp(26px,3vw,40px);font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.15}
#pg .faq__wrap{max-width:880px;margin:0 auto}
#pg .faq-item{margin-bottom:12px;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:var(--dark);box-shadow:0 2px 10px rgba(0,0,0,.18);transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
#pg .faq-item:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.24);border-color:rgba(255,165,3,.25)}
#pg .faq-item.active{border-color:rgba(255,165,3,.3);box-shadow:0 8px 24px rgba(0,0,0,.24)}
#pg .faq-question{padding:20px 24px;font-size:16px;font-weight:700;color:#fff;cursor:pointer;line-height:1.45;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:color .2s ease}
#pg .faq-item.active .faq-question{color:var(--orange)}
#pg .faq-question::after{content:"+";width:30px;height:30px;border-radius:50%;background:rgba(255,165,3,.12);color:var(--orange);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:400;flex-shrink:0;transition:transform .3s var(--ease),background .25s var(--ease)}
#pg .faq-item.active .faq-question::after{transform:rotate(45deg);background:rgba(255,165,3,.2)}
#pg .faq-answer{display:none;padding:0 24px 22px;font-size:15px;font-weight:400;line-height:1.75;color:rgba(255,255,255,.7);border-top:1px solid rgba(255,255,255,.07)}

/* ═══════════════════════════════════════════════════════════
   TOPICAL AUTHORITY
   ═══════════════════════════════════════════════════════════ */
#pg .topical{background:var(--cream);padding:clamp(72px,9vw,120px) 0}
#pg .topical__h2{font-family:var(--font-h);font-size:clamp(24px,2.8vw,38px);font-weight:800;letter-spacing:-.02em;color:var(--dark);margin-bottom:32px;line-height:1.15}
#pg .topical__body p{font-size:16px;color:var(--muted);line-height:1.78;margin-bottom:18px}
#pg .topical__body p strong{color:var(--dark)}
#pg .topical__body p:last-child{margin-bottom:0}
#pg .topical__body a,#pg .intro__body a,#pg .split__body a{color:var(--orange-a11y);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ═══════════════════════════════════════════════════════════
   QUOTE FORM (form embed + sticky trust sidebar)
   ═══════════════════════════════════════════════════════════ */
#pg .quote-grid{display:grid;grid-template-columns:340px 1fr;gap:clamp(32px,4vw,56px);align-items:start}
/* Enquiry-form section (class="contact" id="pg-enquire" on contact-us/get-a-quote)
   had no matching background/padding rule at all in this stylesheet - it
   inherited zero vertical section spacing, sitting flush against the
   dividers above and below. Standard section rhythm restored to match
   intro/services/features in this same file. */
#pg #pg-enquire{background:var(--cream);padding:clamp(72px,9vw,120px) 0}
#pg .quote-form-title{font-family:var(--font-h);font-size:clamp(22px,2.4vw,30px);font-weight:800;color:var(--dark);letter-spacing:-.02em;margin-bottom:24px}
#pg .quote-embed-wrap{background:#fff;border-radius:18px;overflow:visible;min-height:1226px;width:100%;box-shadow:0 2px 8px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.07);padding:32px 28px;box-sizing:border-box}
#pg .quote-embed-wrap iframe{display:block;width:100%;min-height:1226px}
#pg .trust-aside{background:var(--darker);border-radius:20px;overflow:hidden;position:sticky;top:32px;box-shadow:0 8px 24px rgba(0,0,0,.2),0 24px 64px rgba(0,0,0,.24)}
#pg .trust-aside__header{background:var(--orange);padding:26px 28px 20px;text-align:center}
#pg .trust-aside__score{font-family:var(--font-h);font-size:44px;font-weight:800;color:#fff;line-height:1}
#pg .trust-aside__stars{font-size:17px;color:rgba(255,255,255,.92);letter-spacing:3px;margin:6px 0 4px;display:block}
#pg .trust-aside__review-count{font-size:12px;font-weight:600;color:rgba(255,255,255,.82);letter-spacing:.04em}
#pg .trust-aside__body{padding:28px}
#pg .trust-aside__section-label{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:16px;display:block}
#pg .trust-item{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07)}
#pg .trust-item:last-of-type{border-bottom:none}
#pg .trust-item__icon{width:34px;height:34px;border-radius:10px;background:rgba(255,165,3,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
#pg .trust-item__icon svg{width:14px;height:14px;stroke:var(--orange);stroke-width:2;fill:none}
#pg .trust-item__text strong{display:block;font-size:13px;font-weight:700;color:#fff;margin-bottom:3px}
#pg .trust-item__text span{font-size:12px;color:rgba(255,255,255,.5);line-height:1.5}
#pg .trust-aside__divider{height:1px;background:rgba(255,255,255,.1);margin:22px 0}
#pg .trust-aside__contact-label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:10px;display:block}
#pg .trust-aside__phone{font-family:var(--font-h);font-size:20px;font-weight:800;color:var(--orange);letter-spacing:-.01em;display:block;margin-bottom:10px;transition:opacity .2s}
#pg .trust-aside__phone:hover{opacity:.8}
#pg .trust-aside__email-row{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.5)}
#pg .trust-aside__email-row svg{width:14px;height:14px;stroke:var(--orange);stroke-width:2;fill:none;flex-shrink:0}
#pg .trust-aside__email-row a{color:rgba(255,255,255,.65);font-weight:500;transition:color .2s}
#pg .trust-aside__email-row a:hover{color:var(--orange)}
@media(max-width:900px){
  #pg .quote-grid{grid-template-columns:1fr;gap:32px}
  #pg .trust-aside{position:static}
}

/* ═══════════════════════════════════════════════════════════
   FINAL CTA
   ═══════════════════════════════════════════════════════════ */
#pg .cta{background:var(--dark);padding:clamp(72px,9vw,120px) 0 150px 0;border-top:3px solid var(--orange);margin-bottom:0}
#pg .cta__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px);align-items:center}
#pg .cta__eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);display:block;margin-bottom:14px}
#pg .cta__h2{font-family:var(--font-h);font-size:clamp(26px,3vw,42px);font-weight:800;color:#fff;line-height:1.12;letter-spacing:-.025em;margin-bottom:20px}
#pg .cta__body{font-size:15px;color:rgba(255,255,255,.7);line-height:1.75;margin-bottom:32px}
#pg .cta__list{list-style:none;padding:0;margin:20px 0}
#pg .cta__list li{padding:7px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:14px;font-weight:600;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:10px}
#pg .cta__list li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--orange);flex-shrink:0}
#pg .cta__list li:last-child{border-bottom:none}
#pg .cta__img-wrap{border-radius:20px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.22),0 16px 48px rgba(0,0,0,.3),0 32px 80px rgba(0,0,0,.2)}
#pg .cta__img{width:100%;height:clamp(260px,28vw,420px);object-fit:cover;display:block}

/* ═══════════════════════════════════════════════════════════
   HERO KEYFRAMES
   ═══════════════════════════════════════════════════════════ */
@keyframes heroEyebrowSlide{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes heroH1Rise{from{opacity:0;transform:translateY(32px) scale(.93)}to{opacity:1;transform:none}}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  #pg .hero__eyebrow,#pg .hero__h1,#pg .hero__sub,#pg .hero__cta,#pg .hero__trust,#pg .hero__img{animation:none;opacity:1;transform:none}
  #pg .response-strip__dot{animation:none}
}

/* ═══════════════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════════════ */
@media(max-width:900px){
  #pg .intro__grid,#pg .split__grid,#pg .cta__grid{grid-template-columns:1fr;gap:32px}
  #pg .intro__img-wrap{max-width:320px;margin:0 auto}
  #pg .intro__aside{max-width:420px;margin:0 auto}
  #pg .features__grid{grid-template-columns:repeat(2,1fr)}
  #pg .services__grid,#pg .tiers__grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}
  #pg .stats__grid{grid-template-columns:1fr;gap:24px}
  #pg .stat-item{border-right:none;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:24px}
  #pg .stat-item:last-child{border-bottom:none;padding-bottom:0}
  /* Keep a top gap under the sticky header. This rule used to be
     "padding:0 20px", which zeroed the desktop 90px top padding. Below 769px
     the .hero rule further down restores breathing room, but nothing covered
     769-900, so at 820 the eyebrow sat flush against the 103px header - the
     tight hero Chris flagged on the tablet walkthrough. The clamp lands around
     57-90px through that band, matching the 100px at 375 and 90px at 1440. */
  #pg .hero__inner{padding:clamp(56px,7vh,90px) 20px 0}

  /* Suburb cards: three up from 581px, not one.
     A single column made each card 780px wide at 820 with a 776px image, and
     the cards only ship a 480w file, so that was a 1.6x upscale at DPR 1 and
     3.2x at DPR 2 - the blur on the tablet walkthrough was a symptom of the
     layout, not the images. Three up puts them at about 249px, which the 480w
     file covers cleanly even at DPR 2, and it reads as the quick visual glance
     these are meant to be rather than nine full-width banners.
     Tap targets stay well past the 44px minimum: the cards are ~250x300. */
  #pg .areas__grid{grid-template-columns:repeat(3,1fr);gap:16px}
  #pg .area-card__body{padding:16px 14px}
  #pg .area-card__title{font-size:16px;margin-bottom:5px}
  #pg .area-card__desc{font-size:12px;line-height:1.5;margin-bottom:10px}
  #pg .area-card__link{font-size:11px;letter-spacing:.06em}
}
@media(max-width:580px){
  /* Two up on a phone rather than one: same "glance" intent, and it keeps the
     image render width (about 158px) far below the 480w source. */
  #pg .areas__grid{grid-template-columns:repeat(2,1fr);gap:12px}
  #pg .area-card__body{padding:13px 11px}
  #pg .area-card__title{font-size:14px}
  #pg .area-card__desc{font-size:11px;margin-bottom:8px}
  #pg .area-card__link{font-size:10px}
}
@media(max-width:600px){
  #pg .features__grid{grid-template-columns:1fr}
  #pg .btn-group{flex-direction:column;align-items:flex-start}
  /* The enquiry form wrapper's 28px side padding left the iframe 279px wide at
     375. Google's reCAPTCHA widget is a fixed 302px and does not shrink, so it
     overflowed inside the iframe and the box rendered clipped - the cut-off
     reCAPTCHA from the phone walkthrough. Narrowing the wrapper padding gives
     the iframe 319px at 375, enough for the widget to sit whole.
     Wrapper only: the iframe element, its attributes and the GHL embed script
     are untouched, and GHL's own height auto-resize still drives the height
     (measured setting 1310px at 375 after this change). */
  #pg .quote-embed-wrap{padding:24px 8px}
}
@media(max-width:768px){
  #pg .hero{padding:clamp(70px,12vh,100px) 0 clamp(20px,3vh,32px) 0}
  #pg .hero__trust{padding-top:24px}
  #pg .reviews__widget iframe,
  #pg iframe[src*="leadconnectorhq"]{
    min-height:900px;
    height:auto;
    width:100%;
    max-width:100%;
    border:none;
    display:block;
  }
}

/* ─── Universal image hover lift ─────────────────────────────────────── */
#pg .hero__img-wrap,
#pg .split__img-wrap,
#pg .cta__img-wrap{
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
  cursor:default;
}
#pg .hero__img-wrap:hover,
#pg .split__img-wrap:hover,
#pg .cta__img-wrap:hover{
  transform:translateY(-5px);
}
#pg .hero__img-wrap:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.28),0 24px 64px rgba(0,0,0,.36),0 48px 120px rgba(0,0,0,.22);
}
#pg .split__img-wrap:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.28),0 24px 64px rgba(0,0,0,.36),0 48px 120px rgba(0,0,0,.24);
}
#pg .cta__img-wrap:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.28),0 24px 64px rgba(0,0,0,.36),0 48px 120px rgba(0,0,0,.24);
}

/* ═══════════════════════════════════════════════════════════
   PLACEHOLDER IMAGE BLOCK , suburb pages awaiting real photography.
   Applied alongside the existing hero__img/intro__img/split__img/cta__img
   classes so it inherits the correct aspect-ratio/sizing, replace the
   element with a normal <picture> once real images are ready.
   ═══════════════════════════════════════════════════════════ */
#pg .placeholder-img{display:flex;align-items:center;justify-content:center;text-align:center;background:repeating-linear-gradient(45deg,#eef0f2,#eef0f2 12px,#e4e7ea 12px,#e4e7ea 24px);border:2px dashed #b8bfc6;color:#5a6470;font-family:var(--font-b);font-weight:600;font-size:13px;line-height:1.5;padding:16px}

/* ═══════════════════════════════════════════════════════════
   HERO , PHOTO BACKGROUND VARIANT , content pages (About, Get a
   Quote, Contact, FAQs) use a full-bleed photo hero with dark
   overlay instead of the side-by-side hero__img-wrap card used on
   service/suburb pages. Background image set inline per page via
   style="background-image:...".
   ═══════════════════════════════════════════════════════════ */
#pg .hero--photo{background-size:cover;background-position:center;min-height:clamp(420px,58vh,620px);display:flex;align-items:center}
#pg .hero--photo::before{background-color:transparent;background-image:linear-gradient(180deg,rgba(20,26,31,.84) 0%,rgba(20,26,31,.72) 45%,rgba(20,26,31,.92) 100%);background-size:cover;background-repeat:no-repeat}
#pg .hero--photo .hero__inner{padding-top:clamp(60px,7vh,100px);padding-bottom:clamp(40px,5vh,60px)}

/* ═══════════════════════════════════════════════════════════
   A-Z SUBURB DIRECTORY , Contact page "All Areas We Cover".
   ═══════════════════════════════════════════════════════════ */
#pg .az-directory{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:28px 32px;margin-top:8px}
#pg .az-directory__letter{display:block;font-family:var(--font-h);font-size:20px;color:var(--orange);margin-bottom:10px;padding-bottom:6px;border-bottom:2px solid rgba(255,165,3,.25)}
#pg .az-directory__links{display:flex;flex-direction:column;gap:6px}
#pg .az-directory__links a{font-size:14px;color:var(--dark);text-decoration:none;transition:color .2s var(--ease)}
#pg .az-directory__links a:hover{color:var(--orange)}

/* ═══════════════════════════════════════════════════════════
   RELATED READING , service page links to relevant blog posts.
   ═══════════════════════════════════════════════════════════ */
#pg .related-reading{padding:56px 0}
#pg .related-reading__label{font-family:var(--font-b);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);display:block;margin-bottom:16px}
#pg .related-reading__h2{font-family:var(--font-h);font-size:clamp(22px,2.4vw,28px);font-weight:800;color:var(--dark);letter-spacing:-.01em;margin-bottom:24px}
#pg .related-reading__list{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--border)}
#pg .related-reading__list a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 4px;border-bottom:1px solid var(--border);
  font-family:var(--font-h);font-size:16px;font-weight:700;color:var(--dark);
  text-decoration:none;transition:color .2s var(--ease),padding-left .2s var(--ease);
}
#pg .related-reading__list a:hover{color:var(--orange);padding-left:8px}
#pg .related-reading__list a::after{content:'→';font-weight:400;flex-shrink:0;color:var(--orange)}