/* home.css , homepage-only sections. Shared vars/buttons/reveal/wrap system
   now live in pg-base.css (loaded before this file on every page). */
#pg .wrap--wide{max-width:1440px;margin:0 auto;padding:0 40px;width:100%}

/* ═══════════════════════════════════════════════════════════
   1. HERO - Architectural split
   ═══════════════════════════════════════════════════════════ */
#pg .hero{
  display:grid;
  grid-template-columns:45fr 55fr;
  align-items:stretch;
  min-height:100vh;
  overflow:hidden;
  margin-top:0;
}
#pg .hero__panel{
  background:var(--darker);
  padding:clamp(64px,8vh,120px) clamp(40px,5vw,88px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
  overflow:hidden;
}
/* Subtle dot grid texture */
#pg .hero__panel::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:36px 36px;z-index:0;
}
/* Orange hairline accent at left edge */
#pg .hero__panel::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__panel-inner{position:relative;z-index:1}
#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:28px;display:block;
}
#pg .hero__title{
  font-family:var(--font-h);
  font-size:clamp(38px,4.5vw,72px);
  line-height:1.05;
  letter-spacing:-.025em;
  color:#fff;
  margin-bottom:28px;
}
#pg .hero__title em{font-style:normal;font-weight:300;display:block;font-size:.7em;letter-spacing:-.01em;color:rgba(255,255,255,.65);margin-bottom:4px}
#pg .hero__sub{
  font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:44px;
}
#pg .hero__cta{display:flex;gap:14px;flex-wrap:wrap}
/* Trust bullets bar below CTA */
#pg .hero__trust{
  display:flex;flex-direction:column;gap:10px;
  margin-top:52px;padding-top:40px;
  border-top:1px solid rgba(255,255,255,.1);
}
#pg .hero__trust-item{
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:rgba(255,255,255,.65);font-weight:500;
}
#pg .hero__trust-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--orange);flex-shrink:0;
}
/* Right image panel */
#pg .hero__image{
  position:relative;overflow:hidden;
}
#pg .hero__image-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  /* The hero image is cut to the desktop box's 0.88:1, so at desktop this is a
     no-op. Under 900px the box becomes a wide band (about 2.3:1 at 820px), and
     a plain centre crop pushes the technician low and fills the frame with
     decking. 62%/38% keeps him, the water spray, the river and the city
     skyline in the band at every narrow width. */
  object-position:62% 38%;
  transition:transform 8s ease;
}
/* Blend edge toward dark panel */
#pg .hero__image::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to right,var(--darker) 0%,rgba(38,50,56,.15) 25%,transparent 55%);
  pointer-events:none;
}
/* Hero caption removed - badge images caused grey artefacts */

/* ═══════════════════════════════════════════════════════════
   2. INTRO - "From homes to offices"
   ═══════════════════════════════════════════════════════════ */
#pg .intro{background:var(--cream);padding:clamp(80px,10vw,140px) 0}
#pg .intro__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(48px,6vw,96px);align-items:start;
}
#pg .intro__overline{
  font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--orange);margin-bottom:20px;display:flex;align-items:center;gap:12px;
}
#pg .intro__overline::before{content:'';width:28px;height:1.5px;background:var(--orange)}
#pg .intro__title{
  font-family:var(--font-h);font-size:clamp(28px,3.2vw,44px);
  font-weight:800;line-height:1.12;letter-spacing:-.02em;
  color:var(--dark);margin-bottom:28px;
}
#pg .intro__body p{font-size:16px;color:var(--muted);line-height:1.75;margin-bottom:12px}
#pg .intro__body p strong{color:var(--dark)}
#pg .intro__body p:last-child{margin-bottom:0}
#pg .intro__bullets{
  display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;
  margin:32px 0 0;padding:0;list-style:none;
}
#pg .intro__bullets li{
  display:flex;align-items:center;gap:10px;
  font-size:14px;font-weight:600;color:var(--dark);
}
#pg .intro__bullets li::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--orange);flex-shrink:0;
}
/* Video side */
#pg .intro__video-wrap{position:relative}
/* Intro clip frame. PORTRAIT, and deliberately capped narrow.
   The footage is 480x848 and that is its true ceiling, so the only way to show it
   sharp is to render it into few CSS pixels: 240px wide is 480 device pixels at
   DPR2, which is exactly native. Widening this frame does not reveal more detail,
   it just upscales. It was a 16/9 frame until 2026-08-05, which cropped away about
   68% of a portrait clip and then upscaled what was left. Do not widen it without
   new footage. */
#pg .intro__video-frame{
  border-radius:24px;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,.07);
  aspect-ratio:480/848;max-width:240px;margin-left:auto;margin-right:auto;
  position:relative;background:#26323833;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
#pg .intro__video-frame:hover{transform:translateY(-5px);box-shadow:0 8px 24px rgba(0,0,0,.14),0 24px 64px rgba(0,0,0,.2),0 48px 120px rgba(0,0,0,.12)}
#pg .intro__video-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:10}
/* Orange accent corner */
#pg .intro__accent{
  position:absolute;bottom:-16px;right:-16px;
  width:80px;height:80px;
  border-radius:0 0 20px 0;
  background:var(--orange);opacity:.15;
  pointer-events:none;
}
/* Reviews strip */
#pg .intro__reviews{
  margin-top:28px;border-radius:18px;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.07),0 20px 48px rgba(0,0,0,.04);
  border:1px solid var(--border);background:#fff;
}
/* Static trust score badge - clean, centred, tight fit */
#pg .trust-score{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 28px 6px;text-align:center}
#pg .trust-score__num{font-family:var(--font-h);font-size:38px;font-weight:800;color:var(--dark);line-height:1;display:block}
#pg .trust-score__stars{font-size:20px;color:var(--orange);letter-spacing:3px;line-height:1;flex-shrink:0;display:block}
#pg .trust-score__count{font-size:13px;color:var(--muted);font-weight:500;letter-spacing:.04em;line-height:1;display:block}
#pg .trust-score__text{display:none}
/* Full reviews widget in testimonials section */
#pg .testimonials__reviews{
  margin-top:40px;border-radius:18px;overflow:visible;
  box-shadow:0 2px 8px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.07),0 20px 48px rgba(0,0,0,.04);
  border:1px solid var(--border);background:#fff;
}
#pg .testimonials__reviews iframe{border-radius:18px}

/* ═══════════════════════════════════════════════════════════
   3. WHY PURIFIED GROUP - Dark, numbered
   ═══════════════════════════════════════════════════════════ */
#pg .why{background:var(--darker);padding:clamp(80px,10vw,140px) 0;overflow:hidden}
#pg .why__header{text-align:center;margin-bottom:64px}
#pg .why__title{
  font-family:var(--font-h);font-size:clamp(32px,4vw,52px);
  font-weight:800;letter-spacing:-.02em;color:#fff;margin-top:0;
}
#pg .why__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
#pg .why-card{
  background:rgba(255,255,255,.04);
  padding:48px 32px;
  border-radius:20px;
  position:relative;overflow:hidden;
  transition:background .25s var(--ease),box-shadow .25s var(--ease);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 4px 16px rgba(0,0,0,.18),0 12px 40px rgba(0,0,0,.22);
}
#pg .why-card:hover{background:rgba(255,255,255,.08);box-shadow:0 8px 24px rgba(0,0,0,.28),0 20px 56px rgba(0,0,0,.3)}
/* Giant number watermark */
#pg .why-card__num{
  position:absolute;top:-12px;right:16px;
  font-family:var(--font-h);font-size:110px;font-weight:800;
  color:rgba(255,255,255,.04);line-height:1;pointer-events:none;
  transition:color .25s var(--ease);
}
#pg .why-card:hover .why-card__num{color:rgba(255,165,3,.08)}
#pg .why-card__icon{
  width:72px;height:72px;object-fit:contain;object-position:center;
  margin-bottom:24px;position:relative;z-index:1;
  max-width:100%;
}
#pg .why-card__title{
  font-family:var(--font-h);font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange);margin-bottom:12px;position:relative;z-index:1;
}
#pg .why-card__text{
  font-size:14px;color:rgba(255,255,255,.6);
  line-height:1.65;margin:0;position:relative;z-index:1;
}
#pg .why-card__line{
  position:absolute;bottom:0;left:0;width:0;height:2px;
  background:var(--orange);transition:width .35s var(--ease);
}
#pg .why-card:hover .why-card__line{width:100%}

/* ═══════════════════════════════════════════════════════════
   SUSTAINABILITY - Orange editorial card
   ═══════════════════════════════════════════════════════════ */
#pg .sustain-wrap{
  padding:clamp(48px,7vw,80px) clamp(20px,4vw,56px);
  background:var(--cream);
}
#pg .sustain{
  background:var(--orange);
  padding:clamp(64px,8vw,100px) clamp(48px,6vw,88px);
  position:relative;overflow:hidden;
  max-width:1100px;margin:0 auto;
  border-radius:32px;
}
/* Large faint text behind */
#pg .sustain::before{
  content:'PURE';
  position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  font-family:var(--font-h);font-size:clamp(160px,22vw,280px);font-weight:800;
  color:rgba(255,255,255,.1);line-height:1;pointer-events:none;letter-spacing:-.04em;
}
#pg .sustain__inner{max-width:760px;position:relative;z-index:1}
#pg .sustain__q-mark{
  font-family:var(--font-h);font-size:80px;font-weight:800;
  color:rgba(255,255,255,.3);line-height:.8;margin-bottom:16px;
}
#pg .sustain__text{
  font-family:var(--font-h);
  font-size:clamp(20px,2.5vw,30px);
  font-weight:600;line-height:1.45;
  color:#fff;margin-bottom:20px;
}
#pg .sustain__text:last-child{
  font-size:clamp(15px,1.8vw,18px);
  font-weight:400;color:rgba(255,255,255,.75);
  font-family:var(--font-b);
}

/* ═══════════════════════════════════════════════════════════
   4. SERVICES - Alternating-height mosaic
   ═══════════════════════════════════════════════════════════ */
#pg .services{background:var(--warm);padding:clamp(80px,10vw,140px) 0}
#pg .services__header{margin-bottom:48px}
#pg .services__title{
  font-family:var(--font-h);font-size:clamp(30px,3.5vw,48px);
  font-weight:800;letter-spacing:-.02em;color:var(--dark);
}
#pg .services__grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:280px 240px 280px 240px;
  grid-template-areas:"res com sol" "res nano sol" "pres gut hosp" "comsol comsol comsol";
  gap:14px;
}
#pg .services__grid .svc:nth-child(1){grid-area:res}
#pg .services__grid .svc:nth-child(2){grid-area:com}
#pg .services__grid .svc:nth-child(3){grid-area:sol}
#pg .services__grid .svc:nth-child(4){grid-area:nano}
#pg .services__grid .svc:nth-child(5){grid-area:pres}
#pg .services__grid .svc:nth-child(6){grid-area:gut}
#pg .services__grid .svc:nth-child(7){grid-area:hosp}
#pg .services__grid .svc:nth-child(8){grid-area:comsol;background-position:center 75%}
#pg .svc{
  display:block;position:relative;border-radius:20px;
  overflow:hidden;background-size:cover;background-position:center;
  height:100%;min-height:220px;
  text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,.08),0 12px 36px rgba(0,0,0,.1),0 24px 72px rgba(0,0,0,.06);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
#pg .svc:hover{transform:translateY(-6px);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)}

/* ─── Service card artwork ────────────────────────────────────────────────
   A CSS background cannot carry a srcset, so resolution is selected two ways
   at once here and both are needed:

   - media queries pick the tier for the card's CSS SIZE at that breakpoint
   - image-set() x descriptors pick the file for the DEVICE PIXEL RATIO

   The x descriptors are the part that was missing. Without them every
   candidate is treated as 1dppx, so a 375px phone at DPR 3 took the 480w file
   for a card box measuring 1005 device pixels - a 2.1x upscale, which is
   exactly the blur Chris spotted on the commercial solar card during the phone
   walkthrough. It affected all eight cards, not just that one.

   Keep the widths in step with what scripts/build-images*.mjs actually emits;
   the largest tier for a few of these families is 820, which is a 1.2x upscale
   at DPR 3 rather than a true 3x file. That is visually fine and deliberate -
   shipping a 2800w file to a phone to chase the last of it would cost far more
   than it buys. */
#pg .svc-bg--winres{background-image:url('/images/window-residential-480.jpg');background-image:image-set(url('/images/window-residential-480.avif') type('image/avif') 1x, url('/images/window-residential-480.webp') type('image/webp') 1x, url('/images/window-residential-480.jpg') type('image/jpeg') 1x, url('/images/window-residential-640.avif') type('image/avif') 2x, url('/images/window-residential-640.webp') type('image/webp') 2x, url('/images/window-residential-640.jpg') type('image/jpeg') 2x)}
#pg .svc-bg--wincom{background-image:url('/images/window-commercial-480.jpg');background-image:image-set(url('/images/window-commercial-480.avif') type('image/avif') 1x, url('/images/window-commercial-480.webp') type('image/webp') 1x, url('/images/window-commercial-480.jpg') type('image/jpeg') 1x, url('/images/window-commercial-768.avif') type('image/avif') 2x, url('/images/window-commercial-768.webp') type('image/webp') 2x, url('/images/window-commercial-768.jpg') type('image/jpeg') 2x)}
#pg .svc-bg--solres{background-image:url('/images/solar-residential-cleaning-perth-480.jpg');background-image:image-set(url('/images/solar-residential-cleaning-perth-480.avif') type('image/avif') 1x, url('/images/solar-residential-cleaning-perth-480.webp') type('image/webp') 1x, url('/images/solar-residential-cleaning-perth-480.jpg') type('image/jpeg') 1x, url('/images/solar-residential-cleaning-perth-900.avif') type('image/avif') 2x, url('/images/solar-residential-cleaning-perth-900.webp') type('image/webp') 2x, url('/images/solar-residential-cleaning-perth-900.jpg') type('image/jpeg') 2x)}
#pg .svc-bg--nano{background-image:url('/images/nanocoating-480.jpg');background-image:image-set(url('/images/nanocoating-480.avif') type('image/avif') 1x, url('/images/nanocoating-480.webp') type('image/webp') 1x, url('/images/nanocoating-480.jpg') type('image/jpeg') 1x, url('/images/nanocoating-640.avif') type('image/avif') 2x, url('/images/nanocoating-640.webp') type('image/webp') 2x, url('/images/nanocoating-640.jpg') type('image/jpeg') 2x)}
#pg .svc-bg--press{background-image:url('/images/pressure-480.jpg');background-image:image-set(url('/images/pressure-480.avif') type('image/avif') 1x, url('/images/pressure-480.webp') type('image/webp') 1x, url('/images/pressure-480.jpg') type('image/jpeg') 1x, url('/images/pressure-768.avif') type('image/avif') 2x, url('/images/pressure-768.webp') type('image/webp') 2x, url('/images/pressure-768.jpg') type('image/jpeg') 2x)}
#pg .svc-bg--gutter{background-image:url('/images/gutter-480.jpg');background-image:image-set(url('/images/gutter-480.avif') type('image/avif') 1x, url('/images/gutter-480.webp') type('image/webp') 1x, url('/images/gutter-480.jpg') type('image/jpeg') 1x, url('/images/gutter-768.avif') type('image/avif') 2x, url('/images/gutter-768.webp') type('image/webp') 2x, url('/images/gutter-768.jpg') type('image/jpeg') 2x)}
#pg .svc-bg--hosp{background-image:url('/images/hospitality-480.jpg');background-image:image-set(url('/images/hospitality-480.avif') type('image/avif') 1x, url('/images/hospitality-480.webp') type('image/webp') 1x, url('/images/hospitality-480.jpg') type('image/jpeg') 1x, url('/images/hospitality-640.avif') type('image/avif') 2x, url('/images/hospitality-640.webp') type('image/webp') 2x, url('/images/hospitality-640.jpg') type('image/jpeg') 2x)}
#pg .svc-bg--solcom{background-image:url('/images/solcom-card-480.jpg');background-image:image-set(url('/images/solcom-card-480.avif') type('image/avif') 1x, url('/images/solcom-card-480.webp') type('image/webp') 1x, url('/images/solcom-card-480.jpg') type('image/jpeg') 1x, url('/images/solcom-card-900.avif') type('image/avif') 2x, url('/images/solcom-card-900.webp') type('image/webp') 2x, url('/images/solcom-card-900.jpg') type('image/jpeg') 2x)}

@media(min-width:600px){
#pg .svc-bg--winres{background-image:url('/images/window-residential-640.jpg');background-image:image-set(url('/images/window-residential-640.avif') type('image/avif') 1x, url('/images/window-residential-640.webp') type('image/webp') 1x, url('/images/window-residential-640.jpg') type('image/jpeg') 1x, url('/images/window-residential-820.avif') type('image/avif') 2x, url('/images/window-residential-820.webp') type('image/webp') 2x, url('/images/window-residential-820.jpg') type('image/jpeg') 2x)}
#pg .svc-bg--wincom{background-image:url('/images/window-commercial-768.jpg');background-image:image-set(url('/images/window-commercial-768.avif') type('image/avif') 1x, url('/images/window-commercial-768.webp') type('image/webp') 1x, url('/images/window-commercial-768.jpg') type('image/jpeg') 1x, url('/images/window-commercial-1200.avif') type('image/avif') 2x, url('/images/window-commercial-1200.webp') type('image/webp') 2x, url('/images/window-commercial-1200.jpg') type('image/jpeg') 2x)}
#pg .svc-bg--solres{background-image:url('/images/solar-residential-cleaning-perth-900.jpg');background-image:image-set(url('/images/solar-residential-cleaning-perth-900.avif') type('image/avif') 1x, url('/images/solar-residential-cleaning-perth-900.webp') type('image/webp') 1x, url('/images/solar-residential-cleaning-perth-900.jpg') type('image/jpeg') 1x, url('/images/solar-residential-cleaning-perth-1200.avif') type('image/avif') 2x, url('/images/solar-residential-cleaning-perth-1200.webp') type('image/webp') 2x, url('/images/solar-residential-cleaning-perth-1200.jpg') type('image/jpeg') 2x)}
#pg .svc-bg--nano{background-image:url('/images/nanocoating-640.jpg');background-image:image-set(url('/images/nanocoating-640.avif') type('image/avif') 1x, url('/images/nanocoating-640.webp') type('image/webp') 1x, url('/images/nanocoating-640.jpg') type('image/jpeg') 1x, url('/images/nanocoating-820.avif') type('image/avif') 2x, url('/images/nanocoating-820.webp') type('image/webp') 2x, url('/images/nanocoating-820.jpg') type('image/jpeg') 2x)}
#pg .svc-bg--press{background-image:url('/images/pressure-768.jpg');background-image:image-set(url('/images/pressure-768.avif') type('image/avif') 1x, url('/images/pressure-768.webp') type('image/webp') 1x, url('/images/pressure-768.jpg') type('image/jpeg') 1x, url('/images/pressure-1200.avif') type('image/avif') 2x, url('/images/pressure-1200.webp') type('image/webp') 2x, url('/images/pressure-1200.jpg') type('image/jpeg') 2x)}
#pg .svc-bg--gutter{background-image:url('/images/gutter-768.jpg');background-image:image-set(url('/images/gutter-768.avif') type('image/avif') 1x, url('/images/gutter-768.webp') type('image/webp') 1x, url('/images/gutter-768.jpg') type('image/jpeg') 1x, url('/images/gutter-1200.avif') type('image/avif') 2x, url('/images/gutter-1200.webp') type('image/webp') 2x, url('/images/gutter-1200.jpg') type('image/jpeg') 2x)}
#pg .svc-bg--hosp{background-image:url('/images/hospitality-640.jpg');background-image:image-set(url('/images/hospitality-640.avif') type('image/avif') 1x, url('/images/hospitality-640.webp') type('image/webp') 1x, url('/images/hospitality-640.jpg') type('image/jpeg') 1x, url('/images/hospitality-820.avif') type('image/avif') 2x, url('/images/hospitality-820.webp') type('image/webp') 2x, url('/images/hospitality-820.jpg') type('image/jpeg') 2x)}
#pg .svc-bg--solcom{background-image:url('/images/solcom-card-900.jpg');background-image:image-set(url('/images/solcom-card-900.avif') type('image/avif') 1x, url('/images/solcom-card-900.webp') type('image/webp') 1x, url('/images/solcom-card-900.jpg') type('image/jpeg') 1x, url('/images/solcom-card-2800.avif') type('image/avif') 2x, url('/images/solcom-card-2800.webp') type('image/webp') 2x, url('/images/solcom-card-2800.jpg') type('image/jpeg') 2x)}
}

@media(min-width:1100px){
#pg .svc-bg--winres{background-image:url('/images/window-residential-820.jpg');background-image:image-set(url('/images/window-residential-820.avif') type('image/avif') 1x, url('/images/window-residential-820.webp') type('image/webp') 1x, url('/images/window-residential-820.jpg') type('image/jpeg') 1x, url('/images/window-residential-820.avif') type('image/avif') 2x, url('/images/window-residential-820.webp') type('image/webp') 2x, url('/images/window-residential-820.jpg') type('image/jpeg') 2x)}
#pg .svc-bg--wincom{background-image:url('/images/window-commercial-1200.jpg');background-image:image-set(url('/images/window-commercial-1200.avif') type('image/avif') 1x, url('/images/window-commercial-1200.webp') type('image/webp') 1x, url('/images/window-commercial-1200.jpg') type('image/jpeg') 1x, url('/images/window-commercial-1200.avif') type('image/avif') 2x, url('/images/window-commercial-1200.webp') type('image/webp') 2x, url('/images/window-commercial-1200.jpg') type('image/jpeg') 2x)}
#pg .svc-bg--solres{background-image:url('/images/solar-residential-cleaning-perth-1200.jpg');background-image:image-set(url('/images/solar-residential-cleaning-perth-1200.avif') type('image/avif') 1x, url('/images/solar-residential-cleaning-perth-1200.webp') type('image/webp') 1x, url('/images/solar-residential-cleaning-perth-1200.jpg') type('image/jpeg') 1x, url('/images/solar-residential-cleaning-perth-1200.avif') type('image/avif') 2x, url('/images/solar-residential-cleaning-perth-1200.webp') type('image/webp') 2x, url('/images/solar-residential-cleaning-perth-1200.jpg') type('image/jpeg') 2x)}
#pg .svc-bg--nano{background-image:url('/images/nanocoating-820.jpg');background-image:image-set(url('/images/nanocoating-820.avif') type('image/avif') 1x, url('/images/nanocoating-820.webp') type('image/webp') 1x, url('/images/nanocoating-820.jpg') type('image/jpeg') 1x, url('/images/nanocoating-820.avif') type('image/avif') 2x, url('/images/nanocoating-820.webp') type('image/webp') 2x, url('/images/nanocoating-820.jpg') type('image/jpeg') 2x)}
#pg .svc-bg--press{background-image:url('/images/pressure-1200.jpg');background-image:image-set(url('/images/pressure-1200.avif') type('image/avif') 1x, url('/images/pressure-1200.webp') type('image/webp') 1x, url('/images/pressure-1200.jpg') type('image/jpeg') 1x, url('/images/pressure-1200.avif') type('image/avif') 2x, url('/images/pressure-1200.webp') type('image/webp') 2x, url('/images/pressure-1200.jpg') type('image/jpeg') 2x)}
#pg .svc-bg--gutter{background-image:url('/images/gutter-1200.jpg');background-image:image-set(url('/images/gutter-1200.avif') type('image/avif') 1x, url('/images/gutter-1200.webp') type('image/webp') 1x, url('/images/gutter-1200.jpg') type('image/jpeg') 1x, url('/images/gutter-1200.avif') type('image/avif') 2x, url('/images/gutter-1200.webp') type('image/webp') 2x, url('/images/gutter-1200.jpg') type('image/jpeg') 2x)}
#pg .svc-bg--hosp{background-image:url('/images/hospitality-820.jpg');background-image:image-set(url('/images/hospitality-820.avif') type('image/avif') 1x, url('/images/hospitality-820.webp') type('image/webp') 1x, url('/images/hospitality-820.jpg') type('image/jpeg') 1x, url('/images/hospitality-820.avif') type('image/avif') 2x, url('/images/hospitality-820.webp') type('image/webp') 2x, url('/images/hospitality-820.jpg') type('image/jpeg') 2x)}
#pg .svc-bg--solcom{background-image:url('/images/solcom-card-2800.jpg');background-image:image-set(url('/images/solcom-card-2800.avif') type('image/avif') 1x, url('/images/solcom-card-2800.webp') type('image/webp') 1x, url('/images/solcom-card-2800.jpg') type('image/jpeg') 1x, url('/images/solcom-card-2800.avif') type('image/avif') 2x, url('/images/solcom-card-2800.webp') type('image/webp') 2x, url('/images/solcom-card-2800.jpg') type('image/jpeg') 2x)}
}

/* Bento size variants */
#pg .svc--tall{grid-row:span 2}
#pg .svc--wide{grid-column:span 2}
/* Overlay */
#pg .svc::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(38,50,56,.92) 0%,rgba(38,50,56,.35) 60%,transparent 100%);
  transition:opacity .28s var(--ease);z-index:1;
}
#pg .svc:hover::before{opacity:.85}
/* Orange left edge on hover */
#pg .svc::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);z-index:2;
}
#pg .svc:hover::after{transform:scaleX(1)}
#pg .svc__body{
  position:absolute;bottom:0;left:0;right:0;
  padding:24px 22px;z-index:3;
}
#pg .svc__title{
  font-family:var(--font-h);font-size:17px;font-weight:700;
  color:#fff;margin-bottom:6px;letter-spacing:-.01em;line-height:1.2;
}
#pg .svc__sub{font-size:13px;color:rgba(255,255,255,.65);line-height:1.4;margin:0}
#pg .svc__cta{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--orange);margin-top:10px;
  opacity:0;transform:translateX(-8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
#pg .svc:hover .svc__cta{opacity:1;transform:none}

/* ═══════════════════════════════════════════════════════════
   5. RESULTS - Asymmetric mosaic
   ═══════════════════════════════════════════════════════════ */
#pg .results{background:var(--darker);padding:clamp(80px,10vw,140px) 0;border:3px solid var(--orange);border-radius:32px;overflow:hidden;margin:0 clamp(16px,3.5vw,56px)}
#pg .results__header{text-align:center;margin-bottom:64px}
#pg .results__headline{
  font-family:var(--font-h);line-height:1.05;
  letter-spacing:-.025em;color:#fff;
}
#pg .results__headline span{
  display:block;font-size:clamp(32px,4.5vw,68px);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:clip;
}
#pg .results__headline span:nth-child(2){
  color:var(--orange);
}
#pg .results__sub{
  margin-top:24px;font-size:15px;
  color:rgba(255,255,255,.6);line-height:1.7;max-width:780px;margin-left:auto;margin-right:auto;white-space:nowrap;
}
/* Before/after slider - dark section, on-brand orange frame border */
#pg .results .ba-slider__frame{border:3px solid var(--orange);box-shadow:0 4px 12px rgba(0,0,0,.12),0 12px 40px rgba(0,0,0,.18),0 24px 80px rgba(0,0,0,.12)}
#pg .results .ba-slider__caption{color:rgba(255,255,255,.6)}
/* Static result tiles - genuine single result shots, no before/after claim */
#pg .results__tiles{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin-top:32px;
}
#pg .result-tile{
  position:relative;border-radius:20px;overflow:hidden;
  background:transparent;
  border:3px solid var(--orange);
  box-shadow:0 4px 12px rgba(0,0,0,.12),0 12px 40px rgba(0,0,0,.18),0 24px 80px rgba(0,0,0,.12);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
#pg .result-tile:hover{transform:translateY(-6px);box-shadow:0 8px 20px rgba(0,0,0,.18),0 24px 64px rgba(0,0,0,.28),0 48px 120px rgba(0,0,0,.18)}
#pg .result-tile img{
  width:100%;height:auto;display:block;aspect-ratio:1410/1182;object-fit:cover;
  transition:transform .5s var(--ease);
}
#pg .result-tile:hover img{transform:scale(1.02)}
#pg .results__tiles .results__tile-slider .ba-slider__frame{border:3px solid var(--orange);border-radius:20px;box-shadow:0 4px 12px rgba(0,0,0,.12),0 12px 40px rgba(0,0,0,.18),0 24px 80px rgba(0,0,0,.12)}
#pg .results__tiles .results__tile-slider .ba-slider__caption{color:rgba(255,255,255,.6);margin-top:12px}
#pg .result-tile__label{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(to top,rgba(38,50,56,.97) 0%,rgba(38,50,56,.6) 55%,transparent 100%);
  padding:56px 20px 20px;
  font-family:var(--font-h);font-size:15px;font-weight:700;
  color:#fff;letter-spacing:.02em;
  z-index:5;
}

/* ═══════════════════════════════════════════════════════════
   6. TESTIMONIALS - Featured quote layout
   ═══════════════════════════════════════════════════════════ */
#pg .testimonials{background:var(--cream);padding:clamp(80px,10vw,140px) 0}
#pg .testimonials__header{text-align:center;margin-bottom:64px}
#pg .testimonials__title{
  font-family:var(--font-h);font-size:clamp(30px,3.5vw,48px);
  font-weight:800;letter-spacing:-.02em;color:var(--dark);
  margin-bottom:12px;
}
#pg .testimonials__sub{
  font-size:16px;color:var(--muted);line-height:1.65;max-width:520px;
  margin:0 auto;
}
#pg .testimonials__grid{
  display:grid;grid-template-columns:1.3fr 1fr;
  gap:28px;align-items:start;
}
/* Featured large testimonial */
#pg .t-featured{
  background:var(--dark);border-radius:24px;
  padding:52px 48px;position:relative;overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.18),0 24px 64px rgba(0,0,0,.24),0 48px 100px rgba(0,0,0,.14);
}
#pg .t-featured::before{
  content:'"';position:absolute;top:-24px;left:32px;
  font-family:var(--font-h);font-size:160px;font-weight:800;
  color:rgba(255,165,3,.12);line-height:1;pointer-events:none;
}
#pg .t-featured__stars{color:var(--orange);font-size:20px;letter-spacing:3px;margin-bottom:24px}
#pg .t-featured__quote{
  font-family:var(--font-h);font-size:clamp(18px,2vw,24px);
  font-weight:600;line-height:1.5;color:#fff;
  font-style:italic;margin-bottom:32px;position:relative;z-index:1;
}
#pg .t-featured__name{font-size:15px;font-weight:700;color:var(--orange)}
#pg .t-featured__service{font-size:13px;color:rgba(255,255,255,.5);margin-top:4px}
/* Two small testimonials stacked */
#pg .t-stack{display:flex;flex-direction:column;gap:16px}
#pg .t-card{
  background:#fff;border-radius:18px;padding:28px 24px;
  box-shadow:0 2px 8px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.07),0 20px 48px rgba(0,0,0,.04);
  border:1px solid var(--border);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
#pg .t-card:hover{transform:translateY(-4px);box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 40px rgba(0,0,0,.12),0 32px 80px rgba(0,0,0,.08)}
#pg .t-card__stars{color:var(--orange);font-size:14px;letter-spacing:2px;margin-bottom:12px}
#pg .t-card__quote{font-size:14px;color:var(--muted);line-height:1.7;font-style:italic;margin-bottom:16px}
#pg .t-card__name{font-size:13px;font-weight:700;color:var(--dark)}
#pg .t-card__service{font-size:12px;color:var(--orange);font-weight:600;margin-top:3px}

/* ═══════════════════════════════════════════════════════════
   7. DISCOVER WHY - Video section
   ═══════════════════════════════════════════════════════════ */
#pg .discover{background:var(--dark);padding:clamp(80px,10vw,140px) 0;overflow:hidden;border:3px solid var(--orange);border-radius:32px;margin:0 clamp(16px,3.5vw,56px)}
#pg .discover__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(48px,6vw,96px);align-items:center;
}
/* Ghost "SEE IT" text behind heading */
#pg .discover__left{position:relative}
#pg .discover__ghost{
  position:absolute;top:-48px;left:-16px;
  font-family:var(--font-h);font-size:clamp(80px,12vw,160px);
  font-weight:800;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);
  line-height:1;pointer-events:none;white-space:nowrap;
}
#pg .discover__title{
  font-family:var(--font-h);font-size:clamp(28px,3vw,42px);
  font-weight:800;letter-spacing:-.02em;color:#fff;
  margin-bottom:24px;line-height:1.15;position:relative;z-index:1;
}
#pg .discover__title em{font-style:normal;color:var(--orange)}
#pg .discover__body{
  font-size:16px;color:rgba(255,255,255,.7);line-height:1.75;
  margin-bottom:36px;position:relative;z-index:1;
}
#pg .discover__body strong{color:rgba(255,255,255,.9)}
#pg .discover__body p{margin-bottom:10px}
#pg .discover__body p:last-child{margin-bottom:0}
/* Discover clip frame. 4:5 PORTRAIT, matching the footage's native shape.
   The source is 2574x3218, so unlike the intro clip this one can fill the whole
   column and stay sharp: 525 CSS px at DPR2 wants 1050 device pixels and the
   delivered file is 1080 wide. Was 16/9 until 2026-08-05, which cropped a
   portrait clip into landscape and threw away most of the frame. */
#pg .vid-frame{
  border-radius:24px;overflow:hidden;
  aspect-ratio:4/5;position:relative;background:#26323833;
  box-shadow:0 4px 16px rgba(0,0,0,.2),0 16px 48px rgba(0,0,0,.3),0 32px 80px rgba(0,0,0,.22);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
#pg .vid-frame:hover{transform:translateY(-5px);box-shadow:0 8px 24px rgba(0,0,0,.28),0 24px 72px rgba(0,0,0,.42),0 48px 120px rgba(0,0,0,.28)}
#pg .vid-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:10}

/* ═══════════════════════════════════════════════════════════
   8. WHAT SETS APART - Numbered cards
   ═══════════════════════════════════════════════════════════ */
#pg .apart{background:#fff;padding:clamp(80px,10vw,140px) 0}
#pg .apart__header{text-align:center;margin-bottom:64px}
#pg .apart__title{
  font-family:var(--font-h);font-size:clamp(30px,3.5vw,48px);
  font-weight:800;letter-spacing:-.02em;color:var(--dark);
}
#pg .apart__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
#pg .apart-card{
  background:var(--cream);border-radius:20px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.05),0 8px 28px rgba(0,0,0,.07),0 20px 56px rgba(0,0,0,.05);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
#pg .apart-card:hover{transform:translateY(-6px);box-shadow:0 8px 20px rgba(0,0,0,.1),0 20px 56px rgba(0,0,0,.15),0 40px 100px rgba(0,0,0,.1)}
#pg .apart-card__img-wrap{position:relative;overflow:hidden}
#pg .apart-card__img{
  width:100%;aspect-ratio:3/2;object-fit:contain;object-position:center;display:block;
  padding:12px;background:var(--cream);
  transition:transform .45s var(--ease);
}
#pg .apart-card:hover .apart-card__img{transform:scale(1.04)}
#pg .apart-card__num{
  position:absolute;top:16px;left:16px;
  width:40px;height:40px;border-radius:10px;
  background:var(--orange);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-h);font-size:15px;font-weight:800;color:#fff;
}
#pg .apart-card__body{padding:28px 24px}
#pg .apart-card__title{
  font-family:var(--font-h);font-size:15px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--dark);
  margin-bottom:12px;line-height:1.3;
}
#pg .apart-card__text{font-size:14px;color:var(--muted);line-height:1.65;margin:0}

/* ═══════════════════════════════════════════════════════════
   LOGO CAROUSEL
   ═══════════════════════════════════════════════════════════ */
#pg .logos{padding:60px 0;background:#FFA503;overflow:hidden;border-top:3px solid #FFA503}
#pg .logos__heading{
  text-align:center;font-family:var(--font-h);font-size:15px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:#1c2a30;margin:0 auto 40px;padding:0 32px;position:relative;
  display:table;
}
#pg .logos__heading::after{
  content:'';display:block;width:36px;height:3px;background:#1c2a30;opacity:.5;
  margin:14px auto 0;border-radius:2px;
}
/* The track holds exactly two identical sets and NO gap of its own. Each set
   carries the inter-logo gap plus a matching trailing gap, so one set is
   exactly the seamless loop distance and translateX(-50%) lands on it to the
   pixel. Putting the gap on the track instead leaves the loop half a gap
   short, which read as a 30px snap once every 40 seconds. */
#pg .logos__track{display:flex;gap:0;align-items:center;animation:marquee 40s linear infinite;width:max-content}
#pg .logos__set{display:flex;gap:60px;align-items:center;padding-right:60px}
#pg .logos__pic{display:block;flex-shrink:0;line-height:0}
#pg .logos__track:hover{animation-play-state:paused}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* Fixed HEIGHT (not a fixed box) so every logo shares the same optical scale
   regardless of its native aspect ratio , a thin wide wordmark and a square
   icon both read as the same visual weight. Width is intentionally auto. */
#pg .logos__img{height:48px;width:auto;max-width:220px;object-fit:contain;object-position:center;flex-shrink:0;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.15))}
#pg .logos__img--wide{height:58px}
#pg .logos__img--lowres{height:40px}

/* ═══════════════════════════════════════════════════════════
   9. CALL NOW CTA - Bold typographic
   ═══════════════════════════════════════════════════════════ */
#pg .callnow{background:var(--darker);padding:clamp(80px,10vw,120px) 0;position:relative;overflow:hidden;border-top:3px solid var(--orange);border-bottom:3px solid var(--orange)}
/* Huge background type */
#pg .callnow::before{
  content:'CALL';
  position:absolute;right:-20px;top:50%;transform:translateY(-50%);
  font-family:var(--font-h);font-size:clamp(120px,18vw,240px);font-weight:800;
  color:rgba(255,255,255,.04);line-height:1;letter-spacing:-.04em;pointer-events:none;
}
#pg .callnow__inner{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap;
}
#pg .callnow__left{}
#pg .callnow__heading{
  font-family:var(--font-h);font-size:clamp(28px,4vw,52px);
  font-weight:800;letter-spacing:-.02em;color:#fff;
  margin-bottom:12px;
}
#pg .callnow__phone{
  font-family:var(--font-h);font-size:clamp(36px,5vw,72px);
  font-weight:800;letter-spacing:-.03em;color:var(--orange);
  display:block;line-height:1.1;margin-bottom:20px;
}
#pg .callnow__sub{font-size:16px;color:rgba(255,255,255,.6);line-height:1.65;max-width:460px}

/* ═══════════════════════════════════════════════════════════
   10. CONTACT FORM
   ═══════════════════════════════════════════════════════════ */
#pg .contact{background:var(--cream);padding:clamp(80px,10vw,140px) 0}
#pg .contact__grid{display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:start}
#pg .contact__form-title{
  font-family:var(--font-h);font-size:clamp(28px,3vw,40px);
  font-weight:800;letter-spacing:-.02em;color:var(--dark);margin-bottom:36px;
}
#pg .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
#pg .form-row--full{grid-template-columns:1fr;margin-bottom:14px}
#pg .form-group{display:flex;flex-direction:column;gap:6px}
#pg .form-group label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dark)}
#pg .form-group input,
#pg .form-group select,
#pg .form-group textarea{
  padding:13px 18px;border:1.5px solid rgba(0,0,0,.1);border-radius:14px;
  font-size:15px;font-family:var(--font-b);color:var(--text);
  background:#fff;outline:none;width:100%;
  transition:border-color .2s,box-shadow .2s;
  box-shadow:0 2px 6px rgba(0,0,0,.04),0 6px 16px rgba(0,0,0,.04);
}
#pg .form-group input:focus,
#pg .form-group select:focus,
#pg .form-group textarea:focus{
  border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,165,3,.12);
}
#pg .form-group select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23637381' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:38px;
}
#pg .form-submit{margin-top:24px}
#pg .form-submit .btn{width:100%;padding:17px;font-size:14px}
/* Info panel */
#pg .contact__info{
  background:var(--darker);border-radius:24px;
  overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,.1),0 16px 48px rgba(0,0,0,.16),0 32px 80px rgba(0,0,0,.12);
}
#pg .contact__map-link{display:block;transition:opacity .2s}
#pg .contact__map-link:hover{opacity:.9}
#pg .contact__map-link img{width:100%;height:200px;object-fit:cover;display:block}
#pg .contact__info-body{padding:36px 32px}
#pg .contact__block{margin-bottom:28px}
#pg .contact__block:last-child{margin-bottom:0}
#pg .contact__block h3{
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange);margin-bottom:12px;
}
#pg .contact__block p{
  font-size:15px;color:rgba(255,255,255,.75);line-height:1.65;margin-bottom:6px;
  font-weight:400;
}
#pg .contact__block a{color:rgba(255,255,255,.9);font-weight:600}
#pg .contact__block a:hover{color:var(--orange)}

/* ═══════════════════════════════════════════════════════════
   11. HAVE A QUESTION - Image + card overlay
   ═══════════════════════════════════════════════════════════ */
#pg .question{position:relative;min-height:420px;display:flex;align-items:center;overflow:hidden;max-width:1000px;margin:0 auto;border-radius:32px;border:3px solid var(--orange)}
/* Was question-bg (a real Purified van shot). Retired 2026-07-26: the van
   livery carried the OLD phone number 0467 234 406 and the old domain
   purifiedwindowcleaning.com.au, both legible in the untinted right-hand
   half of the scrim. Old-brand images are banned; see the about-tom
   exception note for the one documented exception, which this is not.
   Replaced with one of Tom's own approved shots (audit-report.md keeper
   "glass revolving-door entrance, ultra-wide angle, city skyline
   reflected") - no people, no signage, no vehicle livery. */
#pg .question__bg{
  position:absolute;inset:0;
  background-image:url('/images/commercial-entrance-glass-perth-1200.jpg');
  background-image:image-set(url('/images/commercial-entrance-glass-perth-1200.avif') type('image/avif'), url('/images/commercial-entrance-glass-perth-1200.webp') type('image/webp'));
  background-size:cover;background-position:center;
}
#pg .question__bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to right,rgba(38,50,56,.95) 0%,rgba(38,50,56,.7) 55%,transparent 100%);
}
#pg .question__card{
  position:relative;z-index:1;padding:clamp(64px,8vw,100px) clamp(40px,5vw,88px);
  max-width:600px;
}
#pg .question__title{
  font-family:var(--font-h);font-size:clamp(36px,5vw,64px);
  font-weight:800;letter-spacing:-.025em;color:#fff;
  margin-bottom:16px;line-height:1.05;
}
#pg .question__sub{
  font-size:17px;color:rgba(255,255,255,.7);
  line-height:1.6;margin-bottom:36px;
}

/* ═══════════════════════════════════════════════════════════
   12. FAQ - Dark card accordion
   ═══════════════════════════════════════════════════════════ */
#pg .faq{background:var(--cream);padding:clamp(80px,10vw,140px) 0}
#pg .faq__header{text-align:center;margin-bottom:64px}
#pg .faq__title{
  font-family:var(--font-h);font-size:clamp(30px,3.5vw,48px);
  font-weight:800;letter-spacing:-.02em;color:var(--dark);margin-bottom:14px;
}
#pg .faq__sub{font-size:16px;color:var(--muted);max-width:560px;margin:0 auto;line-height:1.65}
#pg .faq__list{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
#pg .faq-item{
  background:var(--dark);border-radius:16px;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  transition:box-shadow .25s ease,transform .25s ease,border-color .25s 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.open{border-color:rgba(255,165,3,.3);box-shadow:0 8px 24px rgba(0,0,0,.24)}
#pg .faq-q{
  display:flex;justify-content:space-between;align-items:center;
  padding:24px 28px;cursor:pointer;gap:24px;user-select:none;
  font-family:var(--font-h);font-size:18px;font-weight:600;
  color:#fff;transition:color .2s ease;
}
#pg .faq-item.open .faq-q{color:var(--orange)}
#pg .faq-icon{
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,165,3,.2);border:none;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background .2s,transform .35s var(--ease);
}
#pg .faq-item.open .faq-icon{background:var(--orange);transform:rotate(45deg)}
#pg .faq-icon svg{width:12px;height:12px;stroke:var(--orange);stroke-width:2.5;fill:none;transition:stroke .2s}
#pg .faq-item.open .faq-icon svg{stroke:#fff}
#pg .faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .4s var(--ease),padding .3s var(--ease);
  padding:0 28px;
}
#pg .faq-item.open .faq-a{max-height:400px;padding:0 28px 28px}
#pg .faq-a p{
  font-size:15px;color:rgba(255,255,255,.72);line-height:1.8;margin:0;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.12);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media(max-width:900px){
  #pg .hero{grid-template-columns:1fr;min-height:auto}
  #pg .hero__panel{padding:80px 32px 64px;justify-content:flex-start}
  #pg .hero__image{min-height:360px}
  #pg .intro__grid,
  #pg .discover__grid,
  #pg .contact__grid{grid-template-columns:1fr;gap:40px}
  #pg .testimonials__grid{grid-template-columns:1fr}
  #pg .why__grid{grid-template-columns:repeat(2,1fr)}
  #pg .apart__grid{grid-template-columns:1fr 1fr}
  #pg .apart-card:last-child{grid-column:1 / -1;max-width:calc(50% - 12px);margin:0 auto}
  #pg .services__grid{grid-template-columns:1fr 1fr;grid-template-rows:auto;grid-template-areas:none}
  #pg .services__grid .svc:nth-child(1),
  #pg .services__grid .svc:nth-child(2),
  #pg .services__grid .svc:nth-child(3),
  #pg .services__grid .svc:nth-child(4),
  #pg .services__grid .svc:nth-child(5),
  #pg .services__grid .svc:nth-child(6),
  #pg .services__grid .svc:nth-child(7),
  #pg .services__grid .svc:nth-child(8){grid-area:auto}
  #pg .services__grid .svc.svc--tall{grid-row:span 2}
  #pg .callnow__inner{flex-direction:column;text-align:center}
  #pg .wrap--wide{padding:0 28px}
  #pg .logos__img{height:38px}
  #pg .logos__img--wide{height:46px}
  #pg .logos__img--lowres{height:32px}
}
@media(max-width:580px){
  #pg .wrap,#pg .wrap--wide,#pg .wrap--narrow{padding:0 20px}
  #pg .why__grid,
  #pg .apart__grid,
  #pg .results__tiles{grid-template-columns:1fr}
  /* Undo the tablet centring of the odd third card. At 900px the apart grid is
     two columns and the last card spans both, capped to one column's width and
     centred so it does not stretch across the full row. Here the grid is a
     single column, so that cap left the "Expert Team" card rendering 156px wide
     next to its 335px siblings - what Chris saw on the phone walkthrough. The
     tablet rule above stays exactly as it is; this only resets it below 580. */
  #pg .apart-card:last-child{grid-column:auto;max-width:none;margin:0}
  #pg .services__grid{grid-template-columns:1fr;grid-template-areas:none}
  #pg .svc--tall,#pg .svc--short{height:320px}
  #pg .form-row{grid-template-columns:1fr}
  #pg .intro__bullets{grid-template-columns:1fr}
  #pg .hero__trust{display:none}
  /* Scale back shadows on mobile so they don't overpower small screens */
  #pg .svc,#pg .t-card,#pg .apart-card,#pg .why-card,#pg .result-tile{box-shadow:0 4px 16px rgba(0,0,0,.1),0 8px 32px rgba(0,0,0,.1)}
  #pg .t-featured,#pg .vid-frame,#pg .contact__info{box-shadow:0 8px 28px rgba(0,0,0,.2)}
  #pg .intro__video-frame{box-shadow:0 6px 24px rgba(0,0,0,.12)}
  #pg .logos{padding:40px 0}
  #pg .logos__img{height:32px}
  #pg .logos__img--wide{height:38px}
  #pg .logos__img--lowres{height:26px}
}