/* ==========================================================================
   Phoenix Pixel Studio — inner page design system
   EVERY rule is scoped under .ppx-page so the old template footer and any
   remaining legacy markup on the page keep their original styling untouched.
   ========================================================================== */

.ppx-page{
  --pg-brand:#0f77b9;
  --pg-brand-700:#0a5482;
  --pg-ink:#0d1b2a;
  --pg-body:#4b5b6b;
  --pg-muted:#7b8a99;
  --pg-line:#e3e8ee;
  --pg-soft:#f6f8fa;
  --pg-tint:#eef6fc;
  --pg-tint-2:#d3e6f4;
  --pg-fh:'Plus Jakarta Sans',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --pg-fb:'IBM Plex Sans',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --pg-r:3px;
  --pg-r-lg:6px;
  --pg-ease:cubic-bezier(.22,1,.36,1);
  --pg-sh:0 2px 6px rgba(13,27,42,.05),0 12px 26px rgba(13,27,42,.09);
  --pg-sh-sm:0 1px 2px rgba(13,27,42,.06),0 1px 3px rgba(13,27,42,.05);
  --pg-sh-brand:0 4px 14px rgba(15,119,185,.24);

  font-family:var(--pg-fb);font-size:16px;line-height:1.7;color:var(--pg-body);
  display:block;
}
.ppx-page *,.ppx-page *::before,.ppx-page *::after{box-sizing:border-box}
.ppx-page ul{margin:0;padding:0;list-style:none}
.ppx-page p{margin:0}
.ppx-page figure{margin:0}
.ppx-page img{max-width:100%;height:auto;display:block}
.ppx-page a{color:inherit;text-decoration:none;transition:color .3s var(--pg-ease)}
.ppx-page h1,.ppx-page h2,.ppx-page h3,.ppx-page h4,.ppx-page h5,.ppx-page h6{
  margin:0;color:var(--pg-ink);font-family:var(--pg-fh);
  font-weight:700;line-height:1.22;letter-spacing:-.015em;
}
/* the same grade the home page applies, so photographs match across the site */
.ppx-page img.pg-graded,.ppx-page .pg-svc-media img,.ppx-page .pg-prd-media img,
.ppx-page .pg-gallery img,.ppx-page .pg-shot img,.ppx-page .pg-split-media img{
  filter:saturate(.94) contrast(1.04);
}

.ppx-page .pg-wrap{width:100%;max-width:1250px;margin:0 auto;padding:0 24px}
.ppx-page .pg-section{padding:clamp(66px,8vw,110px) 0}
.ppx-page .pg-soft{background:var(--pg-soft)}
.ppx-page .pg-centred{text-align:center}

/* ---- shared bits ---- */
.ppx-page .pg-eyebrow{
  display:inline-flex;align-items:center;gap:9px;color:var(--pg-brand);
  font-family:var(--pg-fh);font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:.18em;
}
.ppx-page .pg-eyebrow::before{content:"";width:22px;height:2px;background:var(--pg-brand);flex:none}
.ppx-page .pg-eyebrow.pg-light{color:#fff}
.ppx-page .pg-eyebrow.pg-light::before{background:#fff}
.ppx-page .pg-centred .pg-eyebrow{justify-content:center}

.ppx-page .pg-head h2{font-size:clamp(27px,3.5vw,40px);margin-top:16px}
.ppx-page .pg-head.pg-light h2{color:#fff}

.ppx-page .pg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:var(--pg-r);cursor:pointer;border:1.5px solid var(--pg-brand);
  font-family:var(--pg-fh);font-weight:700;font-size:15px;
  background:var(--pg-brand);color:#fff;
  transition:background .25s var(--pg-ease),border-color .25s var(--pg-ease),
             color .25s var(--pg-ease),box-shadow .25s var(--pg-ease);
}
.ppx-page .pg-btn:hover{background:var(--pg-brand-700);border-color:var(--pg-brand-700);
  color:#fff;box-shadow:var(--pg-sh-brand)}
.ppx-page .pg-btn i{font-size:12px;transition:transform .25s var(--pg-ease)}
.ppx-page .pg-btn:hover i{transform:translateX(3px)}

/* reveal on scroll */
.ppx-page [data-pg-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--pg-ease),transform .8s var(--pg-ease);transition-delay:var(--d,0ms)}
.ppx-page [data-pg-reveal].pg-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .ppx-page [data-pg-reveal]{opacity:1!important;transform:none!important}
}

/* ---- page hero ---- */
.ppx-page .pg-hero{position:relative;background:var(--pg-ink) center/cover no-repeat;overflow:hidden}
.ppx-page .pg-hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(9,20,32,.90) 0%,rgba(9,20,32,.78) 46%,rgba(9,20,32,.50) 100%)}
.ppx-page .pg-hero .pg-wrap{position:relative;z-index:2;
  padding-top:clamp(58px,7vw,92px);padding-bottom:clamp(58px,7vw,92px)}
.ppx-page .pg-hero h1{color:#fff;font-size:clamp(32px,4.6vw,52px);font-weight:800;
  letter-spacing:-.022em;margin-bottom:18px}
.ppx-page .pg-crumb{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  color:rgba(255,255,255,.60);font-size:14.5px;font-weight:400}
.ppx-page .pg-crumb a{color:#fff}
.ppx-page .pg-crumb a:hover{color:var(--pg-brand)}
/* separator is CSS-drawn, not an icon glyph — no webfont dependency, so it
   can never fall back to a tofu box */
.ppx-page .pg-crumb li:not(:first-child)::before{content:"";width:5px;height:5px;
  border-radius:50%;background:rgba(255,255,255,.45);margin-right:12px;flex:none}
.ppx-page .pg-crumb li{display:flex;align-items:center}

/* ---- intro (two column) ---- */
.ppx-page .pg-intro{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(36px,5vw,70px);align-items:start}
.ppx-page .pg-years{
  position:relative;margin-top:38px;padding:34px 32px;border-radius:var(--pg-r-lg);overflow:hidden;
  background:var(--pg-ink);color:#fff;border-left:3px solid var(--pg-brand);
}
.ppx-page .pg-years > *{position:relative;z-index:2}
.ppx-page .pg-years .pg-yr{max-height:96px;width:auto;margin-bottom:20px}
/* the years figure is now live text rather than a baked-in "04+" image, so it
   follows PPX_YEARS in includes/site-config.php */
.ppx-page .pg-years .pg-yr-num{font-family:var(--pg-fh);font-weight:700;color:#fff;
  font-size:clamp(56px,8vw,96px);line-height:1;letter-spacing:-.04em;margin-bottom:16px}
.ppx-page .pg-years .pg-yr-num span{color:var(--pg-brand);margin-left:4px}
.ppx-page .pg-years h3{color:#fff;font-size:clamp(20px,2.3vw,26px)}
.ppx-page .pg-years .pg-mark{width:56px;height:56px;border-radius:var(--pg-r);object-fit:contain;
  background:#fff;padding:8px;margin-bottom:22px}

.ppx-page .pg-lede{font-size:clamp(17px,1.7vw,19px);line-height:1.8}
.ppx-page .pg-lede span{color:var(--pg-brand);font-family:var(--pg-fh);
  font-weight:700;font-size:1.35em;line-height:1}

.ppx-page .pg-cover{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
.ppx-page .pg-cover .pg-card{
  padding:30px 26px;border-radius:var(--pg-r-lg);background:#fff;
  border:1px solid var(--pg-line);transition:all .4s var(--pg-ease);
}
.ppx-page .pg-cover .pg-card:hover{transform:translateY(-3px);box-shadow:var(--pg-sh);border-color:var(--pg-tint-2)}
.ppx-page .pg-cover .pg-ic{width:48px;height:48px;border-radius:var(--pg-r);display:grid;place-items:center;
  background:var(--pg-tint);color:var(--pg-brand);font-size:23px;margin-bottom:18px;
  transition:background .25s var(--pg-ease),color .25s var(--pg-ease)}
.ppx-page .pg-cover .pg-card:hover .pg-ic{background:var(--pg-brand);color:#fff;transform:none}
.ppx-page .pg-cover span{display:block;font-family:var(--pg-fh);font-weight:700;font-size:11.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--pg-brand);margin-bottom:7px}
.ppx-page .pg-cover h4{font-size:18px;margin-bottom:9px}
.ppx-page .pg-cover p{font-size:15px;line-height:1.7}

/* Signature block. One logo, left-aligned, with a descriptor line under it -
   it previously stacked the square brand mark above the full logo, which shows
   that same mark and the company name again, so the logo read as duplicated. */
.ppx-page .pg-author{display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  margin-top:34px;padding:22px 24px;border-radius:var(--pg-r-lg);background:var(--pg-soft);
  border:1px solid var(--pg-line)}
.ppx-page .pg-author .pg-sign{display:block;height:42px;max-height:42px;
  width:auto;max-width:100%;object-fit:contain;object-position:left center}
.ppx-page .pg-author .pg-author-role{font-family:var(--pg-fb);font-weight:600;
  font-size:14px;color:var(--pg-muted);margin:0}

/* ---- USP cards on a light section ----
   .pg-grid4 was only ever styled inside the dark .pg-choose band; these rules
   give the same cards a light-background treatment for products.php. */
.ppx-page .pg-section .pg-grid4 .pg-card{
  position:relative;padding:38px 28px;border-radius:var(--pg-r-lg);overflow:hidden;
  background:#fff;border:1px solid var(--pg-line);transition:all .4s var(--pg-ease);
}
.ppx-page .pg-section .pg-grid4 .pg-card:hover{
  transform:translateY(-3px);box-shadow:var(--pg-sh);border-color:var(--pg-tint-2)}
.ppx-page .pg-section .pg-grid4 .pg-ghost{position:absolute;right:-10px;bottom:-20px;
  font-size:92px;line-height:1;color:var(--pg-tint);z-index:1}
.ppx-page .pg-section .pg-grid4 .pg-ic{
  position:relative;z-index:2;width:50px;height:50px;border-radius:var(--pg-r);
  display:grid;place-items:center;margin-bottom:20px;font-size:24px;
  background:var(--pg-tint);color:var(--pg-brand);
  transition:background .25s var(--pg-ease),color .25s var(--pg-ease);
}
.ppx-page .pg-section .pg-grid4 .pg-card:hover .pg-ic{
  background:var(--pg-brand);color:#fff;transform:none}
.ppx-page .pg-section .pg-grid4 h4{position:relative;z-index:2;font-size:19px;margin-bottom:12px}
.ppx-page .pg-section .pg-grid4 p{position:relative;z-index:2;font-size:15px;line-height:1.7}

/* ---- contact page ---- */
.ppx-page .pg-contact-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.ppx-page .pg-contact-card{
  display:block;padding:30px 24px 26px;border-radius:var(--pg-r-lg);background:#fff;
  border:1px solid var(--pg-line);text-align:center;
  transition:transform .3s var(--pg-ease),box-shadow .3s var(--pg-ease),border-color .3s var(--pg-ease);
}
.ppx-page a.pg-contact-card:hover{transform:translateY(-3px);box-shadow:var(--pg-sh);border-color:var(--pg-tint-2)}
.ppx-page .pg-contact-card .pg-ic{
  width:48px;height:48px;margin:0 auto 18px;border-radius:var(--pg-r);display:grid;place-items:center;
  background:var(--pg-tint);color:var(--pg-brand);font-size:23px;
  transition:background .25s var(--pg-ease),color .25s var(--pg-ease);
}
.ppx-page a.pg-contact-card:hover .pg-ic{background:var(--pg-brand);color:#fff;transform:none}
.ppx-page .pg-contact-card span{display:block;font-family:var(--pg-fh);font-weight:700;
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--pg-brand);margin-bottom:9px}
.ppx-page .pg-contact-card h4{font-size:17px;margin-bottom:5px;overflow-wrap:anywhere}
/* an e-mail address is one long unbreakable token - size it so it fits the card
   rather than letting it split mid-word */
.ppx-page .pg-contact-card h4.pg-mail{font-size:clamp(13.5px,1.15vw,15.5px);letter-spacing:-.01em}
.ppx-page .pg-contact-card p{font-size:14.5px;color:var(--pg-muted)}

.ppx-page .pg-form-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(26px,4vw,44px);align-items:start}
.ppx-page .pg-form-side{
  position:relative;overflow:hidden;padding:clamp(30px,3.5vw,40px);border-radius:var(--pg-r-lg);color:#fff;
  background:var(--pg-ink);border-top:3px solid var(--pg-brand);
}
.ppx-page .pg-form-side > *{position:relative;z-index:2}
.ppx-page .pg-form-side h3{color:#fff;font-size:clamp(21px,2.4vw,26px);margin:14px 0 12px}
.ppx-page .pg-form-side p{color:rgba(255,255,255,.72);font-size:15px}
.ppx-page .pg-form-points{margin:26px 0 30px}
.ppx-page .pg-form-points li{display:flex;align-items:flex-start;gap:12px;
  font-size:15px;line-height:1.7;color:rgba(255,255,255,.88);margin-bottom:12px}
.ppx-page .pg-form-points i{flex:none;color:var(--pg-brand);font-size:16px;margin-top:4px}
.ppx-page .pg-form-side .pg-btn-ghost{background:transparent;color:#fff;
  border:1.6px solid rgba(255,255,255,.4);box-shadow:none}
.ppx-page .pg-form-side .pg-btn-ghost:hover{background:#fff;color:var(--pg-brand);border-color:#fff}

.ppx-page .pg-form-main{padding:clamp(28px,4vw,42px);border-radius:var(--pg-r-lg);
  background:#fff;border:1px solid var(--pg-line);box-shadow:var(--pg-sh-sm)}
.ppx-page .pg-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:26px}
.ppx-page .pg-fields .pg-full{grid-column:1 / -1}
.ppx-page .pg-fields label{display:block}
.ppx-page .pg-fields label > span{display:block;margin-bottom:8px;
  font-family:var(--pg-fh);font-weight:600;font-size:13.5px;color:var(--pg-ink)}
.ppx-page .pg-fields label em{color:var(--pg-brand);font-style:normal;margin-left:3px}
.ppx-page .pg-fields input,.ppx-page .pg-fields textarea{
  width:100%;padding:14px 16px;border-radius:var(--pg-r);background:#fff;
  border:1px solid var(--pg-line);font-family:var(--pg-fb);font-size:15px;
  color:var(--pg-ink);transition:border-color .25s var(--pg-ease),box-shadow .25s var(--pg-ease);
}
.ppx-page .pg-fields textarea{resize:vertical;min-height:130px}
.ppx-page .pg-fields input:focus,.ppx-page .pg-fields textarea:focus{
  outline:0;border-color:var(--pg-brand);box-shadow:0 0 0 3px rgba(15,119,185,.12)}
.ppx-page .pg-fields ::placeholder{color:var(--pg-muted);opacity:1}

.ppx-page .pg-note{padding:16px 22px;border-radius:var(--pg-r);margin-bottom:26px;
  font-size:15px;line-height:1.6}
.ppx-page .pg-note-ok{background:#eef8f2;border-left:3px solid #1f9d55;color:#155e35}
.ppx-page .pg-note-bad{background:#fdeeed;border-left:3px solid #c91323;color:#7f1d1d}

.ppx-page .pg-branches{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.ppx-page .pg-branch{overflow:hidden;border-radius:var(--pg-r-lg);background:#fff;
  border:1px solid var(--pg-line);transition:all .45s var(--pg-ease)}
.ppx-page .pg-branch:hover{box-shadow:var(--pg-sh);border-color:var(--pg-tint-2)}
.ppx-page .pg-map{aspect-ratio:16/9;background:var(--pg-soft)}
.ppx-page .pg-map iframe{width:100%;height:100%;border:0;display:block}
.ppx-page .pg-branch-info{padding:26px 28px 28px}
.ppx-page .pg-branch-info h4{display:flex;align-items:center;gap:11px;font-size:19px;margin-bottom:12px}
.ppx-page .pg-branch-info h4 i{color:var(--pg-brand)}
.ppx-page .pg-branch-info p{font-size:15px;margin-bottom:16px}

@media (max-width:1080px){
  .ppx-page .pg-contact-cards{grid-template-columns:repeat(2,1fr)}
  .ppx-page .pg-form-grid,.ppx-page .pg-branches{grid-template-columns:1fr}
}
@media (max-width:560px){
  .ppx-page .pg-contact-cards{grid-template-columns:1fr}
  .ppx-page .pg-fields{grid-template-columns:1fr}
}

/* ---- product cards (products.php) ---- */
.ppx-page .pg-prd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:26px}
.ppx-page .pg-prd{
  display:flex;flex-direction:column;overflow:hidden;background:#fff;
  border:1px solid var(--pg-line);border-radius:var(--pg-r-lg);transition:all .45s var(--pg-ease);
}
.ppx-page .pg-prd:hover{transform:translateY(-3px);box-shadow:var(--pg-sh);border-color:var(--pg-tint-2)}
.ppx-page .pg-prd-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--pg-soft)}
.ppx-page .pg-prd-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--pg-ease)}
.ppx-page .pg-prd:hover .pg-prd-media img{transform:scale(1.07)}
.ppx-page .pg-prd-cat{
  position:absolute;left:14px;top:14px;padding:5px 11px;border-radius:var(--pg-r);
  background:var(--pg-brand);
  font-family:var(--pg-fh);font-weight:700;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;
}
.ppx-page .pg-prd-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.ppx-page .pg-prd-body h3{font-size:18.5px;margin-bottom:10px}
.ppx-page .pg-prd-body p{font-size:15px;line-height:1.65;margin-bottom:16px}
.ppx-page .pg-prd-specs{margin-bottom:20px}
.ppx-page .pg-prd-specs li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.7}
/* CSS-drawn tick — the template ships Font Awesome 5 Pro, so asking for the
   Free family here rendered a tofu box */
.ppx-page .pg-prd-specs li::before{
  content:"";position:absolute;left:3px;top:.5em;width:5px;height:9px;
  border:2px solid var(--pg-brand);border-top:0;border-left:0;transform:rotate(45deg);
}
/* the link row sits at the foot of the card so every card's links line up,
   whether it carries one link or two */
.ppx-page .pg-prd-links{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;
  gap:10px 20px;padding-top:4px}
.ppx-page .pg-prd-body .pg-more{margin-top:0}
.ppx-page .pg-prd-links .pg-more-alt{color:var(--pg-ink)}
.ppx-page .pg-prd-links .pg-more-alt:hover{color:var(--pg-brand)}

/* ---- about gallery ---- */
.ppx-page .pg-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ppx-page .pg-gallery figure{position:relative;overflow:hidden;border-radius:var(--pg-r-lg);
  box-shadow:var(--pg-sh-sm);background:#fff}
.ppx-page .pg-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .9s var(--pg-ease)}
.ppx-page .pg-gallery figure:hover img{transform:scale(1.07)}
.ppx-page .pg-gallery figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:38px 22px 18px;
  background:linear-gradient(180deg,rgba(8,20,31,0),rgba(8,20,31,.82));
  color:#fff;font-family:var(--pg-fh);font-weight:700;font-size:15px;letter-spacing:-.01em;
}
@media (max-width:900px){ .ppx-page .pg-gallery{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .ppx-page .pg-gallery{grid-template-columns:1fr} }

/* ---- why choose us ---- */
.ppx-page .pg-choose{position:relative;background:var(--pg-ink) center/cover no-repeat;overflow:hidden;
  padding:clamp(66px,8vw,110px) 0}
.ppx-page .pg-choose::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,20,32,.94),rgba(9,20,32,.90))}
.ppx-page .pg-choose .pg-wrap{position:relative;z-index:2}
.ppx-page .pg-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
/* on the dark band the four cards share hairline rules instead of floating */
.ppx-page .pg-choose .pg-grid4{gap:1px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--pg-r-lg);overflow:hidden}
.ppx-page .pg-choose .pg-card{position:relative;padding:34px 26px;overflow:hidden;
  background:rgba(255,255,255,.03);border:0;transition:background .3s var(--pg-ease)}
.ppx-page .pg-choose .pg-card:hover{background:rgba(255,255,255,.08);transform:none}
.ppx-page .pg-choose .pg-ghost{position:absolute;right:-10px;bottom:-20px;font-size:92px;
  color:rgba(255,255,255,.045);pointer-events:none}
.ppx-page .pg-choose .pg-ic{position:relative;z-index:2;width:50px;height:50px;border-radius:var(--pg-r);
  display:grid;place-items:center;background:var(--pg-brand);color:#fff;font-size:24px;
  margin-bottom:20px}
.ppx-page .pg-choose h4{position:relative;z-index:2;color:#fff;font-size:17.5px;margin-bottom:10px}
.ppx-page .pg-choose p{position:relative;z-index:2;color:rgba(255,255,255,.70);font-size:14.5px;line-height:1.65}

/* ---- facts / counters ---- */
.ppx-page .pg-facts{position:relative;background:var(--pg-ink) center/cover no-repeat;overflow:hidden;
  padding:clamp(66px,8vw,110px) 0}
.ppx-page .pg-facts::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,20,32,.94),rgba(9,20,32,.90))}
.ppx-page .pg-facts .pg-wrap{position:relative;z-index:2}
.ppx-page .pg-facts-grid{display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(36px,5vw,64px);align-items:center}
.ppx-page .pg-counts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--pg-r-lg);overflow:hidden}
.ppx-page .pg-count{padding:30px 18px;text-align:center;
  background:rgba(255,255,255,.03);transition:background .3s var(--pg-ease)}
.ppx-page .pg-count:hover{background:rgba(255,255,255,.08);transform:none}
.ppx-page .pg-count .pg-ic{font-size:28px;color:var(--pg-brand);margin-bottom:14px;display:block}
.ppx-page .pg-count .pg-num{font-family:var(--pg-fh);font-weight:800;color:#fff;
  font-size:clamp(28px,3.2vw,38px);line-height:1;margin-bottom:8px;letter-spacing:-.03em}
.ppx-page .pg-count h5{color:rgba(255,255,255,.70);font-family:var(--pg-fb);
  font-weight:400;font-size:14px;line-height:1.5}

/* ==========================================================================
   SERVICE PAGES — listing grid + service detail
   ========================================================================== */

/* ---- section head variants ---- */
.ppx-page .pg-head.pg-centred{max-width:760px;margin-left:auto;margin-right:auto;text-align:center}
.ppx-page .pg-head .pg-sub{margin-top:20px;font-size:16.5px;line-height:1.8}
.ppx-page .pg-head.pg-light .pg-sub{color:rgba(255,255,255,.72)}

/* ---- services listing grid ---- */
.ppx-page .pg-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:clamp(34px,4vw,50px)}
.ppx-page .pg-svc{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--pg-line);border-radius:var(--pg-r-lg);overflow:hidden;
  transition:transform .3s var(--pg-ease),box-shadow .3s var(--pg-ease),border-color .3s var(--pg-ease)}
.ppx-page .pg-svc:hover{transform:translateY(-3px);box-shadow:var(--pg-sh);border-color:var(--pg-tint-2)}
.ppx-page .pg-svc-media{position:relative;aspect-ratio:16/10;background:var(--pg-soft);overflow:hidden}
.ppx-page .pg-svc-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--pg-ease)}
.ppx-page .pg-svc:hover .pg-svc-media img{transform:scale(1.05)}
/* one flat scrim at the foot of the frame, enough to seat the label */
.ppx-page .pg-svc-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
  background:linear-gradient(180deg,rgba(9,20,32,0),rgba(9,20,32,.55))}
.ppx-page .pg-svc-num{display:none}
.ppx-page .pg-svc-ic{position:absolute;z-index:3;left:16px;bottom:14px;width:34px;height:34px;
  border-radius:var(--pg-r);display:grid;place-items:center;background:var(--pg-brand);color:#fff;
  font-size:18px}
.ppx-page .pg-svc-body{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px}
.ppx-page .pg-svc-cat{display:block;font-family:var(--pg-fh);font-weight:700;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--pg-brand);margin-bottom:8px}
.ppx-page .pg-svc h3{font-size:18.5px;line-height:1.4;margin-bottom:10px}
.ppx-page .pg-svc h3 a:hover{color:var(--pg-brand)}
.ppx-page .pg-svc p{font-size:15px;line-height:1.65;margin-bottom:20px}

/* "read more" link — the arrow is CSS-drawn, never a webfont glyph */
.ppx-page .pg-more{margin-top:auto;display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  font-family:var(--pg-fh);font-weight:700;font-size:14px;color:var(--pg-brand)}
.ppx-page .pg-more:hover{color:var(--pg-ink)}
.ppx-page .pg-arw{width:24px;height:24px;border-radius:var(--pg-r);flex:none;display:grid;place-items:center;
  background:var(--pg-tint);transition:background .25s var(--pg-ease),transform .25s var(--pg-ease)}
.ppx-page .pg-arw::before{content:"";width:5px;height:5px;border:2px solid var(--pg-brand);
  border-left:0;border-bottom:0;transform:rotate(45deg) translate(-1px,1px)}
.ppx-page .pg-more:hover .pg-arw{background:var(--pg-brand);transform:translateX(3px)}
.ppx-page .pg-more:hover .pg-arw::before{border-color:#fff}

/* ---- detail layout ---- */
.ppx-page .pg-detail{display:grid;grid-template-columns:minmax(0,1fr) 340px;
  gap:clamp(30px,4vw,56px);align-items:start}
.ppx-page .pg-aside{position:sticky;top:104px;display:grid;gap:20px}

.ppx-page .pg-panel{background:#fff;border:1px solid var(--pg-line);border-radius:var(--pg-r-lg);
  padding:26px 24px;box-shadow:var(--pg-sh-sm)}
.ppx-page .pg-panel h4{font-size:17px;padding-bottom:16px;margin-bottom:18px;
  border-bottom:1px solid var(--pg-line)}
.ppx-page .pg-navlist li+li{margin-top:8px}
.ppx-page .pg-navlist a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--pg-r);
  background:var(--pg-soft);color:var(--pg-ink);font-weight:500;font-size:14.5px;line-height:1.4;
  transition:background .25s var(--pg-ease),color .25s var(--pg-ease)}
.ppx-page .pg-navlist a::after{content:"";margin-left:auto;flex:none;width:6px;height:6px;
  border:2px solid var(--pg-muted);border-left:0;border-bottom:0;transform:rotate(45deg);
  transition:border-color .25s var(--pg-ease)}
.ppx-page .pg-navlist a:hover{background:var(--pg-tint);color:var(--pg-brand)}
.ppx-page .pg-navlist a:hover::after{border-color:var(--pg-brand)}
.ppx-page .pg-navlist .pg-on a{background:var(--pg-brand);color:#fff;font-weight:600}
.ppx-page .pg-navlist .pg-on a::after{border-color:#fff}

.ppx-page .pg-help{position:relative;overflow:hidden;border-radius:var(--pg-r-lg);padding:28px 24px;color:#fff;
  background:var(--pg-ink);border-top:3px solid var(--pg-brand)}
.ppx-page .pg-help>*{position:relative;z-index:2}
.ppx-page .pg-help .pg-ic{width:46px;height:46px;border-radius:var(--pg-r);display:grid;place-items:center;
  background:var(--pg-brand);font-size:22px;margin-bottom:18px}
.ppx-page .pg-help h4{color:#fff;font-size:18px;margin-bottom:8px;border:0;padding:0}
.ppx-page .pg-help p{color:rgba(255,255,255,.70);font-size:14.5px;line-height:1.65}
.ppx-page .pg-help .pg-tel{display:inline-flex;align-items:center;gap:11px;margin-top:16px;
  font-family:var(--pg-fh);font-weight:700;font-size:19px;color:#fff}
.ppx-page .pg-help .pg-tel i{font-size:19px;color:var(--pg-brand)}
.ppx-page .pg-help .pg-tel:hover{color:var(--pg-brand)}
.ppx-page .pg-help .pg-btn{width:100%;margin-top:22px}

.ppx-page .pg-facts-mini li{display:flex;align-items:flex-start;gap:14px;font-size:14.5px;line-height:1.6}
.ppx-page .pg-facts-mini li+li{margin-top:14px;padding-top:14px;border-top:1px solid var(--pg-line)}
.ppx-page .pg-facts-mini i{flex:none;width:40px;height:40px;border-radius:var(--pg-r);display:grid;place-items:center;
  background:var(--pg-tint);color:var(--pg-brand);font-size:18px}
.ppx-page .pg-facts-mini strong{display:block;font-family:var(--pg-fh);font-weight:700;color:var(--pg-ink);font-size:15px}

/* ---- detail main column ---- */
.ppx-page .pg-shot{border-radius:var(--pg-r-lg);overflow:hidden;border:1px solid var(--pg-line);
  margin-bottom:clamp(30px,4vw,44px)}
.ppx-page .pg-shot img{width:100%;aspect-ratio:16/8;object-fit:cover}
.ppx-page .pg-body h2{font-size:clamp(25px,3.1vw,35px);margin-bottom:18px}
.ppx-page .pg-body p+p{margin-top:16px}
.ppx-page .pg-block+.pg-block{margin-top:clamp(42px,5vw,62px)}

.ppx-page .pg-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,32px);align-items:center;
  padding:24px;border-radius:var(--pg-r-lg);background:var(--pg-soft);border:1px solid var(--pg-line);
  transition:box-shadow .45s var(--pg-ease),border-color .45s var(--pg-ease)}
.ppx-page .pg-split:hover{box-shadow:var(--pg-sh);border-color:var(--pg-tint-2)}
.ppx-page .pg-split+.pg-split{margin-top:24px}
.ppx-page .pg-split-media{border-radius:var(--pg-r-lg);overflow:hidden;aspect-ratio:4/3;background:var(--pg-tint)}
.ppx-page .pg-split-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--pg-ease)}
.ppx-page .pg-split:hover .pg-split-media img{transform:scale(1.06)}
.ppx-page .pg-split.pg-rev .pg-split-media{order:-1}
.ppx-page .pg-split-text{padding:6px 8px 6px 12px}

/* lead block — the service photo sitting beside the overview copy */
.ppx-page .pg-split.pg-lead{background:transparent;border:0;padding:0;align-items:center}
.ppx-page .pg-split.pg-lead:hover{box-shadow:none}
.ppx-page .pg-split.pg-lead .pg-split-text{padding:0}
.ppx-page .pg-split.pg-lead .pg-split-media{aspect-ratio:1/1.02;border:1px solid var(--pg-line);
  border-radius:var(--pg-r-lg)}

/* a block with no photo of its own — the copy takes the full width instead of
   padding the layout out with an image that has nothing to do with the service */
.ppx-page .pg-split.pg-noimg{grid-template-columns:1fr;padding:30px 28px}
.ppx-page .pg-split.pg-noimg .pg-ticks{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;margin-top:20px}
.ppx-page .pg-split.pg-noimg .pg-ticks li+li{margin-top:0}
.ppx-page .pg-split .pg-ic{width:48px;height:48px;border-radius:var(--pg-r);display:grid;place-items:center;
  background:var(--pg-brand);color:#fff;font-size:22px;margin-bottom:16px}
.ppx-page .pg-kicker{display:block;font-family:var(--pg-fh);font-weight:700;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pg-brand);margin-bottom:8px}
.ppx-page .pg-split h4{font-size:21px;margin-bottom:10px}
.ppx-page .pg-split p{font-size:15px;line-height:1.7}

/* CSS-drawn tick — no webfont dependency */
.ppx-page .pg-ticks{margin-top:18px}
.ppx-page .pg-ticks li{position:relative;padding-left:32px;font-size:15px;line-height:1.7}
.ppx-page .pg-ticks li+li{margin-top:10px}
.ppx-page .pg-ticks li::before{content:"";position:absolute;left:0;top:.22em;width:20px;height:20px;
  border-radius:var(--pg-r);background:var(--pg-tint)}
.ppx-page .pg-ticks li::after{content:"";position:absolute;left:7px;top:.44em;width:5px;height:9px;
  border:2px solid var(--pg-brand);border-top:0;border-left:0;transform:rotate(45deg)}
.ppx-page .pg-ticks.pg-two{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px}
.ppx-page .pg-ticks.pg-two li+li{margin-top:0}

.ppx-page .pg-chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.ppx-page .pg-chip{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:var(--pg-r);
  background:#fff;border:1px solid var(--pg-line);color:var(--pg-ink);font-weight:500;font-size:14.5px;
  transition:border-color .25s var(--pg-ease),color .25s var(--pg-ease)}
.ppx-page .pg-chip::before{content:"";width:5px;height:5px;background:var(--pg-brand)}
.ppx-page .pg-chip:hover{border-color:var(--pg-brand);color:var(--pg-brand)}

/* ---- process steps ---- */
.ppx-page .pg-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:clamp(34px,4vw,50px)}
.ppx-page .pg-step{position:relative;padding:30px 24px;border-radius:var(--pg-r-lg);background:#fff;
  border:1px solid var(--pg-line);overflow:hidden;
  transition:transform .3s var(--pg-ease),box-shadow .3s var(--pg-ease),border-color .3s var(--pg-ease)}
.ppx-page .pg-step:hover{transform:translateY(-3px);box-shadow:var(--pg-sh);border-color:var(--pg-tint-2)}
.ppx-page .pg-step .pg-ghost-n{position:absolute;right:16px;bottom:-10px;font-family:var(--pg-fh);
  font-weight:800;font-size:64px;line-height:1;color:var(--pg-soft);pointer-events:none}
.ppx-page .pg-step>*{position:relative;z-index:2}
.ppx-page .pg-step .pg-n{width:44px;height:44px;border-radius:var(--pg-r);display:grid;place-items:center;
  background:var(--pg-tint);color:var(--pg-brand);font-family:var(--pg-fh);font-weight:700;font-size:16px;
  margin-bottom:16px;transition:background .25s var(--pg-ease),color .25s var(--pg-ease)}
.ppx-page .pg-step:hover .pg-n{background:var(--pg-brand);color:#fff}
.ppx-page .pg-step h5{font-size:17.5px;margin-bottom:9px}
.ppx-page .pg-step p{font-size:14.5px;line-height:1.7}

/* ---- FAQ ---- */
.ppx-page .pg-faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,4vw,56px);align-items:start}
.ppx-page .pg-faq{display:grid;gap:14px}
.ppx-page .pg-q{background:#fff;border:1px solid var(--pg-line);border-radius:var(--pg-r);overflow:hidden;
  transition:box-shadow .35s var(--pg-ease),border-color .35s var(--pg-ease)}
.ppx-page .pg-q[open]{border-color:var(--pg-tint-2)}
.ppx-page .pg-q summary{display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;
  padding:18px 20px;font-family:var(--pg-fh);font-weight:600;font-size:16px;line-height:1.45;color:var(--pg-ink)}
.ppx-page .pg-q summary::-webkit-details-marker{display:none}
.ppx-page .pg-q summary:hover{color:var(--pg-brand)}
.ppx-page .pg-q summary::after{content:"";margin-left:auto;flex:none;width:26px;height:26px;border-radius:var(--pg-r);
  background-color:var(--pg-tint);background-repeat:no-repeat;background-position:center,center;
  background-image:linear-gradient(var(--pg-brand),var(--pg-brand)),linear-gradient(var(--pg-brand),var(--pg-brand));
  background-size:12px 2px,2px 12px;transition:all .35s var(--pg-ease)}
.ppx-page .pg-q[open] summary::after{background-color:var(--pg-brand);
  background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-size:12px 2px,0 12px}
.ppx-page .pg-q .pg-a{padding:0 22px 22px;font-size:15.5px;line-height:1.8}
.ppx-page .pg-q[open] .pg-a{animation:pgReveal .45s var(--pg-ease)}
@keyframes pgReveal{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

/* ---- CTA band ---- */
.ppx-page .pg-cta{position:relative;overflow:hidden;border-radius:var(--pg-r-lg);color:#fff;
  padding:clamp(34px,4vw,50px);background:var(--pg-ink);border-top:3px solid var(--pg-brand);
  display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
.ppx-page .pg-cta>*{position:relative;z-index:2}
.ppx-page .pg-cta .pg-eyebrow{margin-bottom:14px}
.ppx-page .pg-cta h3{color:#fff;font-size:clamp(22px,2.6vw,30px);margin-bottom:10px}
.ppx-page .pg-cta p{color:rgba(255,255,255,.72);max-width:560px;font-size:15.5px}
.ppx-page .pg-cta-btns{display:flex;gap:12px;flex-wrap:wrap}
.ppx-page .pg-btn-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.42)}
.ppx-page .pg-btn-ghost:hover{background:#fff;border-color:#fff;color:var(--pg-ink);box-shadow:none}

/* ---- responsive ---- */
@media (max-width:1180px){
  .ppx-page .pg-detail{grid-template-columns:minmax(0,1fr) 300px}
  .ppx-page .pg-svc-grid{gap:22px}
}
@media (max-width:1080px){
  .ppx-page .pg-intro,.ppx-page .pg-facts-grid{grid-template-columns:1fr}
  .ppx-page .pg-grid4{grid-template-columns:repeat(2,1fr)}
  .ppx-page .pg-counts{grid-template-columns:repeat(4,1fr)}
  .ppx-page .pg-detail,.ppx-page .pg-faq-grid{grid-template-columns:1fr}
  .ppx-page .pg-aside{position:static;grid-template-columns:1fr 1fr;margin-top:40px}
  .ppx-page .pg-svc-grid{grid-template-columns:repeat(2,1fr)}
  .ppx-page .pg-steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .ppx-page{font-size:16px}
  .ppx-page .pg-counts{grid-template-columns:repeat(2,1fr)}
  .ppx-page .pg-cover{grid-template-columns:1fr}
  .ppx-page .pg-aside{grid-template-columns:1fr}
  .ppx-page .pg-cta{grid-template-columns:1fr}
}
@media (max-width:760px){
  .ppx-page .pg-split{grid-template-columns:1fr}
  .ppx-page .pg-split.pg-rev .pg-split-media{order:0}
  .ppx-page .pg-split.pg-lead.pg-rev .pg-split-media{order:-1}
  .ppx-page .pg-split.pg-lead .pg-split-media{aspect-ratio:4/3}
  .ppx-page .pg-split-text{padding:4px}
  .ppx-page .pg-ticks.pg-two,
  .ppx-page .pg-split.pg-noimg .pg-ticks{grid-template-columns:1fr}
  .ppx-page .pg-ticks.pg-two li+li,
  .ppx-page .pg-split.pg-noimg .pg-ticks li+li{margin-top:10px}
}
@media (max-width:640px){
  .ppx-page .pg-svc-grid{grid-template-columns:1fr}
  .ppx-page .pg-steps{grid-template-columns:1fr}
}
@media (max-width:560px){
  .ppx-page .pg-wrap{padding:0 18px}
  .ppx-page .pg-grid4{grid-template-columns:1fr}
  .ppx-page .pg-author .pg-sign{height:34px;max-height:34px}
  .ppx-page .pg-cta{border-radius:var(--pg-r-lg)}
  .ppx-page .pg-cta-btns .pg-btn{width:100%}
}