/* =====================================================================
   Service-area pages — "pa" design system (structural redesign)
   ---------------------------------------------------------------------
   inc/area-redesign.php re-renders the 13 /service-areas/ children into
   the pa-* components styled here: a clean editorial system on the site
   scheme (ink / paper / champagne).

   BACKGROUNDS ARE THE EXCEPTION, NOT THE RULE. The light sections paint
   nothing, so the drafting-grid linework behind .page_content_wrap reads
   through the whole page as one sheet; hairline seams mark the folds. Only
   two bands are painted, because only two mean something: the hero and the
   "why" band (ink). The closing CTA keeps its single definition in
   assets/cro/cro.css — light and contained, the same on every page.

   §L at the bottom keeps the LEGACY component styling used by the seven
   imported service sub-pages (kitchen, bathroom, healthcare…) that share
   paras-process-* / paras-nearby markup but are NOT re-rendered.
   ===================================================================== */

/* ---- frame -------------------------------------------------------------
   pa sections are not WPBakery stretched rows; they escape the 1170 content
   box with the 50vw trick and re-center their own .pa-wrap. */
.pa-page{ clear:both; }
/* The frame is keyed on the SECTIONS THEMSELVES, not on a `.pa-page >` ancestor.
   inc/reviews.php injects .pa-quotes straight into pages that have no .pa-page
   wrapper (home, the service sub-pages); when this was an ancestor rule those
   sections lost their padding entirely and collided with the rows above and
   below — the "bleeding testimonial".
   The closing CTA is deliberately NOT in this list: it is a <section> too, and
   full-bleeding it pinned it to the viewport's left edge while cro.css capped
   its width. It stays a normal contained block. */
.pa-hero, .pa-about, .pa-services, .pa-areas, .pa-chipsec, .pa-why,
.pa-process, .pa-quotes, .pa-editorial, .pa-market, .pa-consult,
.pa-faq, .pa-headonly, .pa-projects{
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding:var(--pi-sec-pad) 0;
  position:relative;
}
/* Width-only members of the frame: the designed pages' lede and gallery rows,
   and the founder blocks. Left out of the list above they stayed inside the
   theme's content column, which on a phone is ~38px narrower per side than the
   full-bleed sections around them — the lede (the first text on the page) sat
   58px from each edge while every card sat at 20px. Their padding is governed
   by their own rules, so only the escape is shared. */
.pa-lede-sec, .pa-passthru, .pa-founder{
  width:100vw;
  margin-left:calc(50% - 50vw);
  position:relative;
}
.pa-wrap{
  max-width:1170px;
  margin:0 auto;
  padding:0 clamp(20px, 3vw, 32px);
}
/* Passthrough rows: contained, and on the section rhythm.
   These are the builder's own stretched rows (the About page's promo, the
   projects slider, the quote band). They render NARROWER (1030) than the
   pa-* sections around them (1265), which is a real inconsistency — but
   full-bleeding them is NOT the fix: it re-measures the sc_promo's slider
   container from 1030 to 633, and that slider (Swiper v6, with a
   `.swiper-wrapper{display:grid}` conflict that leaves its internal slide
   model out of step with the DOM) parks its wrapper at a stale translateX
   OUTSIDE its overflow:hidden box — the images vanish entirely.
   The width is left alone until those components are rebuilt (see the
   home/about component revamp task); only the vertical rhythm is normalised
   here, which is safe and was the ragged part (105/0, 0/0 and 50/30 against
   the system's 89/89). */
.pa-pass{
  margin:0;
  /* flow-root: this wrapper has no padding or border, so without a block
     formatting context a builder row's vertical margin would collapse straight
     THROUGH it and land between sections. The row margins are also zeroed
     below, so this is belt-and-braces — but the builder adds per-row margins
     freely, and this stops the next one leaking. */
  display:flow-root;
}
.pa-page > .pa-pass > .vc_row{
  padding-top:var(--pi-sec-pad) !important;
  padding-bottom:var(--pi-sec-pad) !important;
  /* The builder also nudges individual rows with their own design options —
     the quote band carries `margin-top:105px`. .pa-pass has no padding or
     border, so that margin COLLAPSES straight through the wrapper and lands
     between the sections as a stray 87px gap, while the rest of the page sits
     flush at 0. The section rhythm above owns vertical spacing; per-row nudges
     do not get a vote. */
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* ---- band colours: only where a band MEANS something ---------------------
   This used to paint nine bands, alternating paper (#FAF8F4) and ivory
   (#F4F1EC). Those two creams are ~4 RGB points apart, so the alternation was
   invisible — it bought nothing, put a seam between identical colours (quotes
   → consult was literally ivory → ivory), and painted over the drafting-grid
   linework that is supposed to read through the whole page.
   The light sections are transparent now: the page is ONE continuous sheet of
   drafting paper, with §DRAW's drawings on top. Ink is kept only where the
   contrast is deliberate — the hero and the "why" band. */
.pa-hero, .pa-why, .pa-market{ background-color:var(--pi-panel-ink); }

/* =====================================================================
   §DRAW — architectural linework on the inner pages.
   ---------------------------------------------------------------------
   css/architectural-bg.css tiles the drafting grid behind .page_content_wrap
   and anchors the elevation behind the footer, but the pa-* bands are opaque
   and painted straight over it, so the redesigned pages lost the drawings
   entirely. Each band now carries its own drawing, chosen to suit the content
   and placed AWAY from the text column so it never fights the copy.
   The PNGs are pre-baked transparent linework at 9–13% alpha — no blend modes,
   no z-index, and they can never intercept a click.
   ===================================================================== */
/* =====================================================================
   INNER-PAGE DRAFTING MOTIF DISABLED 2026-07-17 — same reason as the home
   page: the client is a luxury COMMERCIAL fit-out specialist (jewellery
   showrooms, cafés, corporate offices), not an architect. Both the §DRAW
   linework backgrounds AND the drafting-sheet chrome (corner crop marks +
   sheet numbers) are neutralised here. Source rules kept, inert, below. */
.pa-about, .pa-market, .pa-editorial{ background-image:none !important; }
.pa-page > section::before,
.pa-page > section::after{ content:none !important; display:none !important; }

/* ---- ORIGINAL (inert) ------------------------------------------------- */
.pa-about{
  background-image:image-set(url(../assets/linework/plan.webp?v=4) type("image/webp"),
                   url(../assets/linework/plan.png?v=4) type("image/png"));
  background-repeat:no-repeat;
  background-position:right -12% top 12%;
  background-size:min(880px, 58%) auto;
}
.pa-editorial{
  background-image:image-set(url(../assets/linework/sketch.webp?v=4) type("image/webp"),
                   url(../assets/linework/sketch.png?v=4) type("image/png"));
  background-repeat:no-repeat;
  background-position:right -8% center;
  background-size:min(1000px, 62%) auto;
}
.pa-process{
  background-image:image-set(url(../assets/linework/elevation.webp?v=4) type("image/webp"),
                   url(../assets/linework/elevation.png?v=4) type("image/png"));
  background-repeat:no-repeat;
  background-position:left -10% bottom;
  background-size:min(820px, 52%) auto;
}
.pa-areas, .pa-chipsec{
  background-image:image-set(url(../assets/linework/plan.webp?v=4) type("image/webp"),
                   url(../assets/linework/plan.png?v=4) type("image/png"));
  background-repeat:no-repeat;
  background-position:left -14% bottom -10%;
  background-size:min(760px, 48%) auto;
}
/* the thank-you confirmation gets the sketch behind its steps */
.pa-ty__next{
  background-image:image-set(url(../assets/linework/sketch.webp?v=4) type("image/webp"),
                   url(../assets/linework/sketch.png?v=4) type("image/png"));
  background-repeat:no-repeat;
  background-position:right -12% bottom;
  background-size:min(880px, 56%) auto;
}
/* phones: the drawings would sit under the copy — pull them out of the way */
@media (max-width:767px){
  .pa-about, .pa-editorial, .pa-process, .pa-areas, .pa-chipsec, .pa-ty__next{
    background-size:min(620px, 130%) auto;
    background-position:center bottom -6%;
  }
}
.pa-headonly{ padding-bottom:0 !important; }

/* Closing CTA band — NOT restyled here on purpose.
   It used to get a full-bleed ink treatment on the re-rendered pages, which
   made the same component look like two different things: black + edge-to-edge
   on /services/ and the area pages, light + contained on /service-areas/.
   The band now keeps its ONE definition in assets/cro/cro.css (light mist,
   contained, hairline border) on every page that uses it. */
.pa-page > .pi-cta-band{
  margin-top:var(--pi-sec-pad);
  margin-bottom:var(--pi-sec-pad);
}

/* ---- home DNA: drafting-sheet chrome -----------------------------------
   The home page's fold system marks sections with corner crop marks and a
   ghost sheet numeral (wide-layout.css .pi-band). The pa sections carry the
   same DNA via a CSS counter so the redesigned pages read as the same set
   of drawings — light bands only; ink bands stay clean. */
.pa-page{ counter-reset: pa-sheet 1; }        /* sheet 01 = the hero */
.pa-page > section:not(.pi-cta-band){ counter-increment: pa-sheet; }
.pa-page > section.pa-about::before,
.pa-page > section.pa-areas::before,
.pa-page > section.pa-services::before,
.pa-page > section.pa-process::before,
.pa-page > section.pa-quotes::before,
.pa-page > section.pa-editorial::before,
.pa-page > section.pa-chipsec::before,
.pa-page > section.pa-faq::before{
  content: counter(pa-sheet, decimal-leading-zero);
  position:absolute;
  top:24px;
  right:40px;
  font-family:'Poppins', 'Poppins-fallback', sans-serif;
  font-weight:700;
  font-size:clamp(44px, 6vw, 84px);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px var(--pi-line);
  letter-spacing:.02em;
  pointer-events:none;
  user-select:none;
}
.pa-page > section.pa-about::after,
.pa-page > section.pa-areas::after,
.pa-page > section.pa-services::after,
.pa-page > section.pa-process::after,
.pa-page > section.pa-quotes::after,
.pa-page > section.pa-editorial::after,
.pa-page > section.pa-chipsec::after,
.pa-page > section.pa-faq::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--pi-line-strong), var(--pi-line-strong)),
    linear-gradient(var(--pi-line-strong), var(--pi-line-strong)),
    linear-gradient(var(--pi-line-strong), var(--pi-line-strong)),
    linear-gradient(var(--pi-line-strong), var(--pi-line-strong)),
    linear-gradient(var(--pi-line-strong), var(--pi-line-strong)),
    linear-gradient(var(--pi-line-strong), var(--pi-line-strong)),
    linear-gradient(var(--pi-line-strong), var(--pi-line-strong)),
    linear-gradient(var(--pi-line-strong), var(--pi-line-strong));
  background-repeat:no-repeat;
  background-size:
    24px 1px, 1px 24px,
    24px 1px, 1px 24px,
    24px 1px, 1px 24px,
    24px 1px, 1px 24px;
  background-position:
    28px 22px, 28px 22px,
    calc(100% - 28px) 22px, calc(100% - 28px) 22px,
    28px calc(100% - 22px), 28px calc(100% - 22px),
    calc(100% - 28px) calc(100% - 22px), calc(100% - 28px) calc(100% - 22px);
  pointer-events:none;
}
@media (max-width:767px){
  .pa-page > section::before{ font-size:36px !important; top:14px !important; right:16px !important; }
}

/* Fold partitions. With the light bands transparent there is no colour step
   between sections, so this hairline IS the partition — it stays. It is
   dropped either side of an ink band, where the colour change already reads. */
.pa-page > section + section{ border-top:1px solid var(--pi-line-faint); }
.pa-page > .pa-hero + section,
.pa-page > .pa-why + section,
.pa-page > .pa-market + section,
.pa-page > section + .pa-hero,
.pa-page > section + .pa-why,
.pa-page > section + .pa-market{ border-top:0; }

/* ---- shared type -------------------------------------------------------- */
.pa-kicker{
  font-family:'Poppins', 'Poppins-fallback', sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--pi-sepia-txt);
  margin:0 0 14px;
}
.pa-hero .pa-kicker, .pa-why .pa-kicker, .pa-market .pa-kicker{ color:var(--pi-accent); }

.page_content_wrap .pa-page h2.pa-title,
.page_content_wrap .pa-quotes h2.pa-title{
  color:var(--pi-text);
  margin:0 0 18px;
  max-width:20ch;
}
.pa-why .pa-title, .pa-market .pa-title{ color:var(--pi-ivory) !important; }

.pa-sub{
  color:var(--pi-text-soft);
  max-width:62ch;
  margin:0;
}
.pa-why .pa-sub, .pa-market .pa-sub{ color:var(--pi-ondark-soft); }

.pa-sechead{ margin-bottom:clamp(36px, 4.5vw, 60px); }

.pa-num{
  display:block;
  font-family:'Poppins', 'Poppins-fallback', sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--pi-accent-dk);
  margin-bottom:14px;
}

.pa-prose p{ color:var(--pi-text-soft); margin:0 0 1em; }
.pa-prose p:last-child{ margin-bottom:0; }
.pa-prose a{ color:var(--pi-sepia-txt); text-decoration:underline; text-decoration-color:var(--pi-accent-soft); text-underline-offset:3px; }
.pa-prose a:hover{ text-decoration-color:var(--pi-accent-dk); }
.pa-prose strong{ color:var(--pi-text); }

/* ---- hero ---------------------------------------------------------------- */
.pa-hero{
  /* command the fold: a tall hero with the headline anchored to the base
     reads more editorial/premium than a short banner. box-sizing:border-box
     so the top padding lives INSIDE min-height (content-box was inflating the
     hero and leaving a ~130px dead zone above the bottom-anchored content);
     the top pad now just clears the fixed header. */
  box-sizing:border-box;
  padding-top:clamp(96px, 10vw, 150px);
  min-height:clamp(500px, 72vh, 760px);
  display:flex;
  align-items:flex-end;
  /* scrim over photo — same in dark */
  background-image:
    linear-gradient(97deg, rgba(17,19,17,.96) 0%, rgba(17,19,17,.9) 42%, rgba(17,19,17,.62) 75%, rgba(17,19,17,.45) 100%),
    var(--pa-hero-img, none);
  background-size:cover;
  background-position:center right;
}
.pa-hero > .pa-wrap{ width:100%; }
@media (max-width:767px){
  .pa-hero{
    /* scrim over photo — same in dark */
    background-image:
      linear-gradient(180deg, rgba(17,19,17,.95) 0%, rgba(17,19,17,.85) 100%),
      var(--pa-hero-img, none);
    /* The desktop hero is deliberately tall (72vh) with the headline anchored to
       the base to "command the fold". On phones the fixed header is already
       cleared by the page's top offset, so that 96px top pad + 585px min-height
       left ~137px of dead space above the breadcrumb. Compact it: a modest
       min-height keeps real hero-image presence, and the top pad becomes plain
       breathing room, not header clearance. */
    padding-top:clamp(34px, 8vw, 54px);
    padding-bottom:clamp(40px, 9vw, 56px);
    min-height:clamp(340px, 56vh, 460px);
  }
}
.pa-crumbs{
  font-size:12px;
  letter-spacing:.06em;
  color:var(--pi-ondark-soft);
  margin-bottom:clamp(28px, 4vw, 52px);
}
.pa-crumbs a{ color:var(--pi-ondark-soft); transition:color .2s ease; }
.pa-crumbs a:hover{ color:var(--pi-accent); }
.pa-crumbs span[aria-hidden]{ margin:0 10px; opacity:.5; }
.pa-crumbs__here{ color:var(--pi-ondark); }

.page_content_wrap .pa-hero__title,
.page_content_wrap .pa-page h1.pa-hero__title{
  font-size:clamp(34px, 24px + 3.4vw, 64px) !important;
  line-height:1.1 !important;
  font-weight:500;
  color:var(--pi-ivory);
  letter-spacing:-.01em;
  margin:0 0 22px;
  max-width:18ch;
}
.pa-lede{
  font-size:clamp(15.5px, 15px + .3vw, 18px);
  line-height:1.7;
  color:var(--pi-ondark-soft);
  max-width:58ch;
  margin:0 0 40px;
}
.pa-hero__row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-top:34px;
  border-top:1px solid rgba(244,241,236,.14); /* on ink panel — same in dark; ondark-faint (.38) would triple it */
}
.pa-hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }

/* ivory outline button on ink (variant local to this system) */
.pi-btn--ghost-light{
  background:transparent !important;
  border:1px solid var(--pi-ondark-faint) !important;
  color:var(--pi-ivory) !important;
}
.pi-btn--ghost-light:hover{
  border-color:var(--pi-accent) !important;
  color:var(--pi-accent) !important;
  background:transparent !important;
}

/* rating chip (hero + about) */
.pa-rating{
  display:inline-flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
}
.pa-rating__score{
  font-family:'Poppins', 'Poppins-fallback', sans-serif;
  font-size:34px;
  font-weight:600;
  color:var(--pi-ivory);
  line-height:1;
}
.pa-rating__meta{ display:flex; flex-direction:column; gap:3px; }
.pa-rating__stars{ color:var(--pi-accent); font-size:13px; letter-spacing:3px; line-height:1; }
.pa-rating__label{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--pi-ondark-soft);
}
.pa-rating:hover .pa-rating__stars{ color:var(--pi-accent-dk); }

/* ---- about --------------------------------------------------------------- */
.pa-about__grid{
  display:grid;
  grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);
  gap:clamp(36px, 5vw, 76px);
  align-items:start;
}
.pa-about__media{ position:relative; margin:0; }
.pa-about__media img{
  width:100%;
  height:auto;
  display:block;
  box-shadow:0 30px 70px -34px var(--pi-shadow-lg);
  filter:var(--pi-photo-grade);   /* unify mixed-source client photos */
}
.pa-about__media .pa-rating{
  position:absolute;
  left:-18px;
  bottom:26px;
  background:var(--pi-panel-ink);
  padding:16px 22px;
  box-shadow:0 18px 40px -18px var(--pi-shadow-lg);
}

/* ---- services ------------------------------------------------------------ */
.pa-svc{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(28px, 3.5vw, 56px);
}
.pa-svc--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.pa-svc--4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.pa-svc__item{
  border-top:1px solid var(--pi-line);
  padding-top:22px;
  position:relative;
}
.pa-svc__item::before{
  content:"";
  position:absolute;
  top:-1px; left:0;
  width:44px; height:1px;
  background:var(--pi-accent-dk);
  transition:width .45s cubic-bezier(.22,.61,.36,1);
}
.pa-svc__item:hover::before{ width:100%; }
.page_content_wrap .pa-page .pa-svc__item h3,
.page_content_wrap .pa-page .pa-areacard h3,
.page_content_wrap .pa-page .pa-why__item h3,
.page_content_wrap .pa-page .pa-step__body h3,
.page_content_wrap .pa-page .pa-imgcard h3,
.page_content_wrap .pa-page .pa-editorial__body h3{
  /* card titles keep the clean sans voice UNDER the serif section heads —
     the blanket h1–h3 serif rule (typography.css) was leaking Fraunces onto
     these component titles (thin, esp. light-weight on the dark pa-why
     panel). Sans + a weight that actually applies (the plain 600 lost to
     typography's `!important` 500). */
  font-family:var(--pi-font-body) !important;
  font-size:clamp(17px, 16px + .5vw, 21px) !important;
  line-height:1.35 !important;
  font-weight:600 !important;
  margin:0 0 12px;
}
.pa-svc__item h3{ color:var(--pi-text); }
.pa-svc__link{
  display:inline-block;
  margin-top:16px;
  font-family:'Poppins', 'Poppins-fallback', sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pi-accent-dk);
}
.pa-svc__link:hover{ color:var(--pi-text); }

/* ---- image-led service cards (services hub) ----------------------------- */
.pa-imgcards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(24px, 3vw, 44px);
}
.pa-imgcards--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.pa-imgcard{ position:relative; }
.pa-imgcard__media{
  display:block;
  overflow:hidden;
  margin-bottom:20px;
}
.pa-imgcard__media img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
  filter:var(--pi-photo-grade);   /* unify mixed-source client photos */
  transition:transform var(--pi-dur-zoom) var(--pi-ease-lux);
}
.pa-imgcard:hover .pa-imgcard__media img{ transform:scale(1.04); }
.page_content_wrap .pa-page .pa-imgcard h3{
  font-size:clamp(18px, 16px + .8vw, 23px) !important;
  line-height:1.3 !important;
  font-weight:500;
  color:var(--pi-text);
  margin:0 0 10px;
}
.pa-imgcard .pa-svc__link{ margin-top:14px; }
@media (max-width:1023px){ .pa-imgcards{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .pa-imgcards, .pa-imgcards--2{ grid-template-columns:minmax(0,1fr); } }

/* ---- know-your-area cards ------------------------------------------------ */
.pa-areas__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1px;
  background:var(--pi-line-faint);           /* hairline grid seams */
  border:1px solid var(--pi-line-faint);
}
.pa-areas__grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.pa-areacard{
  background:var(--pi-bg-paper);
  padding:clamp(24px, 3vw, 40px);
  transition:background .3s ease;
}
.pa-areacard:hover{ background:var(--pi-surface-2); }
.pa-areacard h3{ color:var(--pi-text); margin-bottom:6px !important; }
.pa-areacard__tag{
  font-family:'Poppins', 'Poppins-fallback', sans-serif;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--pi-sepia-txt);
  margin:0 0 14px;
}

/* ---- areas-we-serve map (assets rendered by js/areas-map.js) --------------- */
.pa-map{
  position:relative;
  height:clamp(320px, 42vw, 480px);
  margin-bottom:28px;
  border:1px solid var(--pi-line);
  background:var(--pi-surface-2);
  overflow:hidden;
}
.pa-map__tiles{ position:absolute; inset:0; }
.pa-map__tiles img{
  position:absolute;
  width:256px; height:256px;
  max-width:none !important;
  filter:grayscale(1) sepia(.14) contrast(.92) brightness(1.04);
  pointer-events:none;
  user-select:none;
}
.pa-map__marker{
  position:absolute;
  transform:translate(-50%, -100%);   /* pin tip = the coordinate */
  z-index:3;
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  min-height:0 !important;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  box-shadow:none !important;
}
.pa-map__pin{
  display:block;
  width:22px; height:29px;
  fill:var(--pi-accent-dk);
  filter:drop-shadow(0 2px 4px var(--pi-shadow-lg));
  transition:transform .2s ease, fill .2s ease;
  transform-origin:bottom center;
}
.pa-map__marker:hover .pa-map__pin,
.pa-map__marker.is-tipped .pa-map__pin{ transform:scale(1.15); fill:var(--pi-ink); }
.pa-map__label{
  position:absolute;
  left:50%; bottom:calc(100% + 8px);
  transform:translateX(-50%);
  white-space:nowrap;
  text-align:left;
  background:var(--pi-panel-ink);
  color:var(--pi-ivory) !important;
  font-family:'Poppins', 'Poppins-fallback', sans-serif;
  padding:9px 13px;
  border-radius:3px;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:9;
  box-shadow:0 8px 20px -8px var(--pi-shadow-lg);
}
.pa-map__label::after{
  content:"";
  position:absolute;
  top:100%; left:50%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:var(--pi-panel-ink);
}
.pa-map__label strong{
  display:block;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--pi-ivory) !important;
}
.pa-map__label em{
  display:block;
  font-style:normal;
  font-size:10.5px;
  color:var(--pi-ondark-soft) !important;
  margin-top:2px;
}
.pa-map__marker:hover .pa-map__label,
.pa-map__marker.is-tipped .pa-map__label,
.pa-map__cluster:hover .pa-map__label{ opacity:1; }
.pa-map__label--list em{ line-height:1.5; }
.pa-map__count{ pointer-events:none; }
.pa-map__cluster{
  position:absolute;
  transform:translate(-50%, -50%);
  min-width:34px; height:34px;
  padding:0 8px;
  border-radius:50%;
  background:var(--pi-panel-ink);
  color:var(--pi-ivory);
  border:2px solid var(--pi-ondark);
  font-family:'Poppins', 'Poppins-fallback', sans-serif;
  font-size:13px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:4;
  box-shadow:0 2px 10px var(--pi-shadow-lg);
  transition:background .2s ease, transform .2s ease;
}
.pa-map__cluster:hover{ background:var(--pi-accent-dk); transform:translate(-50%,-50%) scale(1.08); }
.pa-map__zoom{
  position:absolute;
  top:12px; right:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  z-index:6;
}
.pa-map__zbtn{
  /* the theme's global button chrome (padding/bg) must not inflate these */
  width:34px !important;
  height:34px !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:1px solid rgba(25,27,25,.25) !important;   /* map chrome over OSM tiles — tiles don't theme */
  border-radius:4px !important;
  background:rgba(250,248,244,.95) !important; /* map chrome over OSM tiles */
  color:var(--pi-ink) !important;
  font-size:17px !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  line-height:1 !important;
  box-shadow:none !important;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.pa-map__zbtn:hover{ background:var(--pi-panel-ink) !important; color:var(--pi-ivory) !important; }
/* cluster badges get the same protection (they are <button>s too) */
.pa-map__cluster{ min-height:0 !important; padding:0 8px !important; box-shadow:0 2px 10px var(--pi-shadow-lg) !important; }
.pa-qbtn{ min-height:0 !important; padding:0 !important; }
.pa-map__attr{
  position:absolute;
  right:6px; bottom:4px;
  z-index:6;
  font-size:10px;
  color:rgba(25,27,25,.55);      /* map attribution over OSM tiles — constant */
  background:rgba(250,248,244,.8); /* map attribution over OSM tiles */
  padding:1px 6px;
  border-radius:3px;
}
.pa-map__attr a{ color:inherit; }

/* ---- chip cloud (areas we serve / nearby) --------------------------------- */
.pa-chipsec__note{ max-width:68ch; margin:-24px 0 32px; }
.pa-chips{ display:flex; flex-wrap:wrap; gap:10px; }
/* phones: the full list eats a screen — collapse to ~3 rows behind a toggle
   (area-pages.js adds .pa-chips--collapsible + the button when it overflows) */
@media (max-width:767px){
  .pa-chips--collapsible{
    max-height:150px;
    overflow:hidden;
    position:relative;
  }
  .pa-chips--collapsible::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:56px;
    background:linear-gradient(180deg, rgba(244,241,236,0) /* transparent stop of the ivory fade */, var(--pi-surface-2));
    pointer-events:none;
  }
  .pa-chipsec .pa-chips--collapsible.is-expanded{ max-height:none; }
  .pa-chips--collapsible.is-expanded::after{ content:none; }
}
.pa-chips__more{
  display:none;
  margin-top:14px;
  min-height:0 !important;
  padding:11px 22px !important;
  border:1px solid var(--pi-edge) !important;
  border-radius:999px !important;
  background:transparent !important;
  color:var(--pi-text) !important;
  font-family:'Poppins', 'Poppins-fallback', sans-serif !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  box-shadow:none !important;
}
@media (max-width:767px){ .pa-chips__more{ display:inline-block; } }
.pa-chip{
  display:inline-block;
  padding:10px 20px;
  border:1px solid var(--pi-edge);
  border-radius:999px;
  font-family:'Poppins', 'Poppins-fallback', sans-serif;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--pi-text);
  background:transparent;
  transition:background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
a.pa-chip:hover{
  background:var(--pi-panel-ink);
  border-color:var(--pi-panel-ink);
  color:var(--pi-ivory);
  transform:translateY(-2px);
}

/* ---- why band (ink) -------------------------------------------------------- */
.pa-why__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(24px, 3vw, 48px);
}
.pa-why__item{
  border-top:1px solid var(--pi-accent-soft);
  padding-top:20px;
}
.pa-why__item h3{ color:var(--pi-ivory); }
.pa-why__item .pa-prose p{ color:var(--pi-ondark-soft); font-size:15px; }

/* ---- process --------------------------------------------------------------- */
.pa-process__grid{
  display:grid;
  grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
  gap:clamp(36px, 5vw, 80px);
  align-items:start;
}
.pa-process__head{ position:sticky; top:calc(var(--pi-header-h, 90px) + 24px); margin-bottom:0; }
.pa-steps{ list-style:none; margin:0; padding:0; }
.pa-step{
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:24px;
  position:relative;
  padding-bottom:clamp(32px, 4vw, 52px);
}
.pa-step:last-child{ padding-bottom:0; }
.pa-step__rail{ position:relative; }
.pa-step__rail::after{
  content:"";
  position:absolute;
  left:50%; top:56px; bottom:-8px;
  width:1px;
  background:var(--pi-line);
}
.pa-step:last-child .pa-step__rail::after{ content:none; }
.pa-step__num{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px; height:52px;
  border:1px solid var(--pi-line-mid);
  border-radius:50%;
  font-family:'Poppins', 'Poppins-fallback', sans-serif;
  font-size:16px;
  font-weight:600;
  color:var(--pi-sepia-txt);
  background:var(--pi-bg-paper);
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.pa-step:hover .pa-step__num{
  background:var(--pi-accent);
  border-color:var(--pi-accent);
  color:var(--pi-on-accent);
}
.pa-step__tag{
  display:inline-block;
  font-family:'Poppins', 'Poppins-fallback', sans-serif;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--pi-accent-dk);
  border:1px solid var(--pi-accent-soft);
  border-radius:999px;
  padding:4px 12px;
  margin-bottom:12px;
}
.pa-step__body h3{ color:var(--pi-text); }
.pa-step__body p{ color:var(--pi-text-soft); margin:0; }

/* ---- quotes: scroll-snap carousel --------------------------------------------- */
.pa-quotes__top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.pa-quotes__head{ min-width:0; }
.pa-quotes__head .pa-sechead{ margin-bottom:18px; }
.pa-quotes__nav{ display:flex; align-items:center; gap:10px; margin-bottom:clamp(36px, 4.5vw, 60px); }
.pa-quotes__count{
  font-family:'Poppins', 'Poppins-fallback', sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--pi-text-soft) !important;
  margin-right:8px;
  font-variant-numeric:tabular-nums;
}
.pa-qbtn{
  width:46px; height:46px;
  border:1px solid var(--pi-edge);
  border-radius:50%;
  background:transparent;
  color:var(--pi-text);
  font-size:17px;
  line-height:1;
  cursor:pointer;
  transition:background .22s ease, color .22s ease, border-color .22s ease;
}
.pa-qbtn:hover{ background:var(--pi-panel-ink); border-color:var(--pi-panel-ink); color:var(--pi-ivory); }
.pa-qbtn[disabled]{ opacity:.35; cursor:default; background:transparent; color:var(--pi-text); border-color:var(--pi-edge); }
.pa-quotes__track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 2 * clamp(20px, 2.5vw, 36px)) / 3);   /* fixed tracks so the row overflows into a scroll (minmax(0,…) would shrink-to-fit) */
  gap:clamp(20px, 2.5vw, 36px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px;
}
.pa-quotes__track::-webkit-scrollbar{ display:none; }
.pa-quotes__track /* ---- Google-style review card (markup: inc/area-redesign.php) ------------
   Deliberately mimics the Google review UI users already know: white card,
   letter avatar, name + place, gold stars, and the real 4-colour "G". These
   Google colours are the ONE sanctioned exception to the site palette —
   the familiarity IS the design. */
a.g-summary,
.g-summary{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 18px;
  border:1px solid var(--pi-line);
  border-radius:999px;
  background:var(--pi-surface);
  text-decoration:none !important;
  margin-bottom:clamp(36px, 4.5vw, 60px);
}
.g-summary:hover{ border-color:var(--pi-accent-dk); }
.g-summary .g-mark{ position:static; width:18px; height:18px; }
.g-summary__score{
  font-family:'Poppins', 'Poppins-fallback', sans-serif;
  font-size:16px;
  font-weight:600;
  color:var(--pi-text) !important;
  line-height:1;
}
.g-summary__stars{ color:#FBBC05; font-size:13px; letter-spacing:1px; line-height:1; }
.g-summary__label{
  font-family:'Poppins', 'Poppins-fallback', sans-serif;
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.06em;
  color:var(--pi-text-soft) !important;
}

.pa-quote{
  margin:0;
  padding:24px 24px 26px;
  background:var(--pi-surface);
  border:1px solid var(--pi-line-faint);
  border-radius:8px;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.pa-quote:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 28px -12px var(--pi-shadow);
}
.g-mark{
  position:absolute;
  top:20px; right:20px;
  width:20px; height:20px;
  display:block;
}
.g-mark svg{ width:100%; height:100%; display:block; }

.g-rev__top{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  padding-right:28px;   /* clear of the G */
}
.g-rev__avatar{
  flex:0 0 auto;
  width:40px; height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Poppins', 'Poppins-fallback', sans-serif;
  font-size:17px;
  font-weight:500;
  color:var(--pi-on-accent) !important;
  background:var(--pi-sepia);
  line-height:1;
}
/* deterministic avatar tints (Google gives each initial its own colour) */
.g-rev__avatar[data-av="a"],.g-rev__avatar[data-av="h"],.g-rev__avatar[data-av="o"],.g-rev__avatar[data-av="v"]{ background:#7A5C42; }
.g-rev__avatar[data-av="b"],.g-rev__avatar[data-av="i"],.g-rev__avatar[data-av="p"],.g-rev__avatar[data-av="w"]{ background:#4A544F; }
.g-rev__avatar[data-av="c"],.g-rev__avatar[data-av="j"],.g-rev__avatar[data-av="q"],.g-rev__avatar[data-av="x"]{ background:#A47E42; }
.g-rev__avatar[data-av="d"],.g-rev__avatar[data-av="k"],.g-rev__avatar[data-av="r"],.g-rev__avatar[data-av="y"]{ background:#5B6B63; }
.g-rev__avatar[data-av="e"],.g-rev__avatar[data-av="l"],.g-rev__avatar[data-av="s"],.g-rev__avatar[data-av="z"]{ background:#8C6D4F; }
.g-rev__avatar[data-av="f"],.g-rev__avatar[data-av="m"],.g-rev__avatar[data-av="t"]{ background:#6E5A78; }
.g-rev__avatar[data-av="g"],.g-rev__avatar[data-av="n"],.g-rev__avatar[data-av="u"]{ background:#3E5A6B; }

.g-rev__who{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.g-rev__name{
  font-family:'Poppins', 'Poppins-fallback', sans-serif;
  font-size:14px;
  font-weight:600;
  color:var(--pi-text) !important;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.g-rev__meta{
  font-size:12px;
  color:#70757a !important;      /* Google's secondary grey */
  line-height:1.3;
}
.g-rev__stars{
  color:#FBBC05 !important;
  font-size:14px;
  letter-spacing:2px;
  line-height:1;
  margin-bottom:12px;
}

.pa-quote blockquote{
  margin:0;
  padding:0;
  border:0;
  background:none;
  flex:1;
}
.pa-quote blockquote p{
  font-size:14.5px;
  line-height:1.65;
  color:var(--pi-text-soft) !important;      /* Google's body grey */
  font-style:normal;
  margin:0 0 .7em;
  quotes:none;
}
.pa-quote blockquote p:last-child{ margin-bottom:0; }
.pa-quote blockquote::before, .pa-quote blockquote::after{ content:none; }

/* ---- editorial ------------------------------------------------------------------ */
.pa-editorial__grid{
  display:grid;
  grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
  gap:clamp(36px, 5vw, 80px);
  align-items:start;
}
.pa-editorial__head{ position:sticky; top:calc(var(--pi-header-h, 90px) + 24px); margin-bottom:0; }
.pa-editorial__body{ max-width:68ch; }
.page_content_wrap .pa-page .pa-editorial__body h3{
  font-size:clamp(19px, 17px + .8vw, 24px) !important;
  color:var(--pi-text);
  margin:1.8em 0 .6em;
  padding-top:.9em;
  border-top:1px solid var(--pi-line-faint);
}
.pa-editorial__body h3:first-child{ margin-top:0; padding-top:0; border-top:0; }

/* ---- market (ink split with stats) ------------------------------------------------ */
.pa-market__grid{
  display:grid;
  grid-template-columns:minmax(0, 6fr) minmax(0, 5fr);
  gap:clamp(36px, 5vw, 80px);
  align-items:start;
}
.pa-market__body p{ color:var(--pi-ondark-soft); }
.pa-market__body .pi-btn{ margin-top:18px; }
.pa-market__stats{ display:flex; flex-direction:column; }
.pa-stat{
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:20px;
  align-items:baseline;
  padding:20px 0;
  border-bottom:1px solid rgba(244,241,236,.12); /* on ink panel — same in dark */
}
.pa-stat:first-child{ padding-top:0; }
.pa-stat__fig{
  font-family:'Poppins', 'Poppins-fallback', sans-serif;
  font-size:clamp(24px, 22px + 1vw, 34px);
  font-weight:600;
  color:var(--pi-accent);
  line-height:1;
}
.pa-stat__label{ font-size:14px; line-height:1.6; color:var(--pi-ondark-soft); }

/* ---- consult (map + form) ----------------------------------------------------------- */
.pa-consult__note{ max-width:68ch; margin:-24px 0 40px; }
.pa-consult__grid{
  display:grid;
  grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
  gap:clamp(28px, 4vw, 60px);
  align-items:stretch;
}
.pa-consult__map{ position:relative; min-height:420px; border:1px solid var(--pi-line-faint); }
.pa-consult__map iframe{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  display:block;
  filter:grayscale(1) contrast(1.02);
  transition:filter .4s ease;
}
.pa-consult__map:hover iframe{ filter:grayscale(0); }
.pa-consult__form{
  background:var(--pi-bg-paper);
  border:1px solid var(--pi-line-faint);
  padding:clamp(24px, 3vw, 44px);
}
.page_content_wrap .pa-consult__form h2{
  font-size:var(--pi-fs-h3) !important;
  margin:0 0 22px;
}
/* Service-page consult (inc/service-hero.php) — injected NESTED inside a
   content column, so the shared section's 100vw full-bleed breakout would
   shift it off-centre. Keep it contained; the pa-wrap still caps the grid. */
.pa-consult.pa-consult--inline{
  width:100%;
  margin-left:0;
  margin-right:0;
}
.pa-consult.pa-consult--inline > .pa-wrap{ padding-left:0; padding-right:0; }

/* ---- faq ------------------------------------------------------------------------------ */
.pa-faq__grid{
  display:grid;
  grid-template-columns:minmax(0, 4fr) minmax(0, 8fr);
  gap:clamp(36px, 5vw, 80px);
  align-items:start;
}
.pa-faq__head{ position:sticky; top:calc(var(--pi-header-h, 90px) + 24px); margin-bottom:0; }
.pa-faq__body .vc_tta-accordion{ margin:0 !important; }

/* ---- color assertions ----------------------------------------------------
   NOTE ON SCOPING: quote rules are keyed on `.pa-quotes`, NOT `.pa-page`.
   inc/reviews.php injects the reviews section into pages that have no .pa-page
   wrapper (home, the service sub-pages). When these were `.pa-page`-scoped the
   theme won on those pages and painted a BLACK BOX (#161616) behind every
   review's text — the "bleeding testimonial". `.pa-quotes` is present in both
   contexts, so one rule covers both.
   The theme sets p/a colors at equal-or-higher specificity (scheme_default
   chains), which forced the palette to black. pa-* is our namespace — assert
   every text color here, scoped under .pa-page. */
.pa-page .pa-kicker, .pa-quotes .pa-kicker{ color:var(--pi-sepia-txt) !important; }
.pa-page .pa-hero .pa-kicker,
.pa-page .pa-why .pa-kicker,
.pa-page .pa-market .pa-kicker{ color:var(--pi-accent) !important; }
.pa-page .pa-sub{ color:var(--pi-text-soft) !important; }
.pa-page .pa-why .pa-sub,
.pa-page .pa-market .pa-sub{ color:var(--pi-ondark-soft) !important; }
.pa-page .pa-prose p, .pa-page .pa-prose li{ color:var(--pi-text-soft) !important; }
.pa-page .pa-prose a{ color:var(--pi-sepia-txt) !important; }
.pa-page .pa-prose strong{ color:var(--pi-text) !important; }
.pa-page .pa-why .pa-prose p{ color:var(--pi-ondark-soft) !important; }
.pa-page .pa-why .pa-prose a,
.pa-page .pa-market .pa-prose a{ color:var(--pi-accent) !important; }
.pa-page .pa-why .pa-prose strong,
.pa-page .pa-market .pa-prose strong{ color:var(--pi-ivory) !important; }
.pa-page .pa-market__body p{ color:var(--pi-ondark-soft) !important; }
.pa-page .pa-lede{ color:var(--pi-ondark-soft) !important; }
.pa-page .pa-crumbs, .pa-page .pa-crumbs a{ color:var(--pi-ondark-soft) !important; }
.pa-page .pa-crumbs a:hover{ color:var(--pi-accent) !important; }
.pa-page .pa-crumbs__here{ color:var(--pi-ondark) !important; }
.pa-page .pa-hero__title{ color:var(--pi-ivory) !important; }
.pa-page .pa-why__item h3, .pa-page .pa-market .pa-title{ color:var(--pi-ivory) !important; }
/* the theme paints blockquotes dark and treats figcaptions as image-caption
   overlays (absolute + gray band) — neutralize all of it inside quote cards */
.pa-quotes .pa-quote blockquote,
.pa-quotes .pa-quote blockquote p{
  background:transparent !important;
  color:var(--pi-text-soft) !important;
  font-style:normal !important;
  font-weight:400 !important;        /* the theme bolds blockquote copy */
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;               /* …and gives it 45px block margins */
  quotes:none !important;
}
.pa-quotes .pa-quote blockquote p + p{ margin-top:.7em !important; }
.pa-quotes .pa-quote blockquote::before,
.pa-quotes .pa-quote blockquote::after,
.pa-quotes .pa-quote blockquote p::before,
.pa-quotes .pa-quote blockquote p::after{ content:none !important; }
/* the theme treats figcaption as an image-caption overlay — the Google card
   has no figcaption any more, but keep the guard for any legacy markup */
.pa-page .pa-quote figcaption{
  color:var(--pi-text) !important;
  background:transparent !important;
  position:static !important;
  width:auto !important;
  padding:0 !important;
  font-style:normal !important;
  opacity:1 !important;
}
.pa-page .g-rev__stars, .pa-page .g-summary__stars{ color:#FBBC05 !important; }
.pa-page .pa-rating__stars{ color:var(--pi-accent) !important; }
.pa-page .pa-stat__label{ color:var(--pi-ondark-soft) !important; }
.pa-page .pa-stat__fig{ color:var(--pi-accent) !important; }
.pa-page .pa-step__body p{ color:var(--pi-text-soft) !important; }
.pa-page .pa-step__tag{ color:var(--pi-sepia-txt) !important; }
.pa-page .pa-areacard__tag{ color:var(--pi-sepia-txt) !important; }
.pa-page .pa-num{ color:var(--pi-sepia-txt) !important; }
.pa-page .pa-chip{ color:var(--pi-text) !important; }
.pa-page a.pa-chip:hover{ color:var(--pi-ivory) !important; }
.pa-page .pa-svc__link{ color:var(--pi-sepia-txt) !important; }
.pa-page .pa-svc__link:hover{ color:var(--pi-text) !important; }
.pa-page .pa-rating__score{ color:var(--pi-ivory) !important; }
.pa-page .pa-rating__label{ color:var(--pi-ondark-soft) !important; }

/* ---- reveals (gated on the shared pi-motion flag; JS stamps .pa-in) -------------------- */
html.pi-motion .pa-page [data-pa-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
html.pi-motion .pa-page [data-pa-reveal].pa-in{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion: reduce){
  html.pi-motion .pa-page [data-pa-reveal]{ opacity:1; transform:none; transition:none; }
}

/* ---- thank-you page ------------------------------------------------------ */
.pa-ty__hero{
  background:var(--pi-panel-ink);
  text-align:center;
  padding-top:clamp(72px, 9vw, 120px) !important;
}
.pa-ty__hero .pa-wrap{ max-width:820px; }
.pa-ty__tick{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:64px; height:64px;
  border-radius:50%;
  border:1px solid var(--pi-accent-soft);
  color:var(--pi-accent);
  margin-bottom:22px;
}
.pa-ty__tick svg{ width:30px; height:30px; }
.page_content_wrap .pa-ty__title,
.pa-ty__title{
  font-size:clamp(28px, 22px + 2.2vw, 46px) !important;
  line-height:1.15 !important;
  font-weight:500;
  color:var(--pi-ivory) !important;
  margin:0 0 20px;
}
.pa-ty__hero .pa-lede{ margin-left:auto; margin-right:auto; }
.pa-ty__hero .pa-hero__cta{ justify-content:center; }
.pa-ty__next{ background:var(--pi-bg-paper); }
.pa-ty__next .pa-wrap{ max-width:820px; }
.pa-ty__links{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:clamp(36px, 4vw, 52px);
  padding-top:28px;
  border-top:1px solid var(--pi-line-faint);
}

/* ---- responsive ------------------------------------------------------------------------ */
@media (max-width:1023px){
  .pa-about__grid,
  .pa-process__grid,
  .pa-editorial__grid,
  .pa-market__grid,
  .pa-consult__grid,
  .pa-faq__grid{ grid-template-columns:minmax(0,1fr); }
  .pa-process__head, .pa-editorial__head, .pa-faq__head{ position:static; }
  .pa-why__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .pa-svc{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .pa-quotes__track{ grid-auto-columns:calc((100% - clamp(20px, 2.5vw, 36px)) / 2); }
  .pa-about__media .pa-rating{ left:14px; }
  .pa-consult__map{ min-height:340px; }
}
@media (max-width:640px){
  .pa-svc, .pa-svc--4,
  .pa-why__grid,
  .pa-areas__grid, .pa-areas__grid--3{ grid-template-columns:minmax(0,1fr); }
  /* one review at a time — a peeking neighbour makes the card unreadable */
  .pa-quotes__track{ grid-auto-columns:100%; }
  .pa-quotes__top{ flex-direction:column; align-items:flex-start; }
  .pa-quotes__nav{ margin-bottom:20px; }
  .pa-hero__row{ flex-direction:column; align-items:flex-start; }
  .pa-hero__cta{ width:100%; }
  .pa-hero__cta .pi-btn{ flex:1 1 auto; text-align:center; }
  .pa-step{ grid-template-columns:44px minmax(0,1fr); gap:16px; }
  .pa-step__num{ width:42px; height:42px; font-size:14px; }
  .pa-step__rail::after{ top:46px; }
  .pa-consult__map{ min-height:280px; }
}

/* =====================================================================
   §L — LEGACY components (imported service sub-pages, NOT re-rendered:
   kitchen / bathroom / apartment / restaurant / healthcare / clinic /
   executive-office). They carry paras-process-* and paras-nearby markup
   plus inline old-gold styles from the live import.
   ===================================================================== */
.paras-process-label{
  color:var(--pi-sepia-txt) !important;
  letter-spacing:.22em !important;
}
.paras-process-number{
  width:54px !important;
  height:54px !important;
  border:1px solid var(--pi-line-mid) !important;
  color:var(--pi-sepia-txt) !important;
  font-family:'Poppins', 'Poppins-fallback', sans-serif !important;
  font-weight:600 !important;
  background:transparent !important;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.paras-process-card.active .paras-process-number,
.paras-process-card:hover .paras-process-number{
  background:var(--pi-accent) !important;
  border-color:var(--pi-accent) !important;
  color:var(--pi-on-accent) !important;
}
.paras-process-line{ background:var(--pi-line) !important; }
.paras-process-tag{
  border:1px solid var(--pi-line-mid) !important;
  border-radius:999px !important;
  color:var(--pi-sepia-txt) !important;
  letter-spacing:.18em !important;
  text-transform:uppercase;
  background:transparent !important;
}
.paras-process-row::-webkit-scrollbar-thumb{ background:var(--pi-accent) !important; }
.paras-process-row::-webkit-scrollbar-track{ background:var(--pi-line-faint) !important; }
@media (max-width:767px){
  .paras-process-number{ width:44px !important; height:44px !important; }
}

.paras-nearby-subtitle{ color:var(--pi-sepia-txt) !important; letter-spacing:.18em; }
.paras-nearby-line{ background:var(--pi-accent) !important; }

/* inline old-gold overrides (imported content hard-codes the old palette) */
.post_content h6.vc_custom_heading[style*="b9974f" i],
.post_content h6.vc_custom_heading[style*="806a3b" i],
.post_content h6.vc_custom_heading[style*="c4a55a" i]{
  color:var(--pi-sepia-txt) !important;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.post_content h2.vc_custom_heading[style*="c4a55a" i],
.post_content h2.vc_custom_heading[style*="b9974f" i],
.post_content h3.vc_custom_heading[style*="c4a55a" i],
.post_content h3.vc_custom_heading[style*="b9974f" i],
.post_content h4.vc_custom_heading[style*="c4a55a" i],
.post_content h4.vc_custom_heading[style*="b9974f" i]{
  color:var(--pi-text) !important;
}
.post_content span[style*="b9974f" i],
.post_content span[style*="c4a55a" i]{
  color:var(--pi-accent-dk) !important;
}
div.vc_column-inner.vc_custom_rating_box{
  background-color:var(--pi-panel-ink) !important;
  border:1px solid var(--pi-line);
  border-radius:0 !important;
}
.vc_custom_rating_box, .vc_custom_rating_box *{ color:var(--pi-ivory) !important; }

/* =====================================================================
   FOUNDER PAGE — /about-us/founder/
   A portrait-led opening block, a stat row, and a hero that keeps the
   photograph readable (the founder shot is a lit showroom interior, so the
   standard hero scrim crushes it; this one is lighter and weighted to the
   left where the type sits).
   ===================================================================== */

.pa-hero--founder::after{
  background:linear-gradient(100deg,
    rgba(21,18,14,.86) 0%, rgba(21,18,14,.72) 42%, rgba(21,18,14,.34) 100%);
}

.pa-founder{ padding-block:var(--pi-sec-pad); }
.pa-founder__grid{
  display:grid;
  grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:clamp(28px,4vw,64px);
  align-items:center;
}
.pa-founder__media{ margin:0; }
.pa-founder__media img{
  width:100%; height:auto; display:block;
  border-radius:4px;
  /* a hairline in the brand sepia rather than a shadow — the rest of the
     page uses flat, drawn edges, and a drop shadow would read as a widget */
  border:1px solid var(--pi-line);
}
.pa-founder__media figcaption{
  margin-top:12px;
  font-size:13px; letter-spacing:.01em;
  color:var(--pi-sepia-txt);
}
.pa-founder__quote{
  margin:14px 0 0; padding:0 0 0 clamp(16px,2vw,26px);
  border-left:2px solid var(--pi-accent);
}
/* Two classes on purpose: typography.css sets the body face on `.post_content p`
   at the same specificity as a single-class rule and loads later, so a lone
   `.pa-founder__quote p` lost the tie and the quote rendered in Montserrat 16px. */
.pa-founder .pa-founder__quote p{
  font-family:var(--pi-font-display,"Fraunces",Georgia,serif);
  font-size:clamp(21px,2.7vw,31px);
  line-height:1.28; font-weight:500;
  color:var(--pi-text); margin:0;
  text-wrap:balance;
}
.pa-founder__by{ margin:20px 0 0; display:flex; flex-direction:column; gap:2px; }
.pa-founder__name{ font-weight:700; color:var(--pi-text); letter-spacing:.01em; }
.pa-founder__role{
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pi-accent-dk);
}
.pa-founder__body .pa-prose{ margin-top:22px; }

/* stat row — figures are the proof, so they get the display face */
.pa-founder__stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--pi-line);
  border:1px solid var(--pi-line); border-radius:4px; overflow:hidden;
}
.pa-fstat{ background:var(--pi-bg-paper); padding:clamp(18px,2.4vw,30px) clamp(14px,2vw,24px); }
.pa-fstat__n{
  display:block;
  font-family:var(--pi-font-display,"Fraunces",Georgia,serif);
  font-size:clamp(26px,3.6vw,42px); line-height:1;
  color:var(--pi-accent-dk); font-variant-numeric:tabular-nums;
}
.pa-fstat__l{ display:block; margin-top:9px; font-size:13px; color:var(--pi-text-soft); }

@media (max-width:900px){
  .pa-founder__grid{ grid-template-columns:1fr; gap:26px; }
  .pa-founder__stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
  .pa-founder__stats{ grid-template-columns:1fr; }
}

/* editorial sections alternate sides so consecutive ones don't wall up */
.pa-editorial--flip .pa-editorial__grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.pa-editorial--flip .pa-editorial__head{ order:2; }
.pa-editorial--flip .pa-editorial__body{ order:1; }
@media (max-width:900px){
  .pa-editorial--flip .pa-editorial__head{ order:0; }
  .pa-editorial--flip .pa-editorial__body{ order:1; }
}

/* =====================================================================
   §DESIGNED-PAGE RHYTHM — body.pi-designed (the Phase-2 pages).
   ---------------------------------------------------------------------
   These pages run 12-15 pa-* sections back to back. With the standard
   frame each padded section meets its neighbour as a DOUBLE seam
   (76+76 mobile, 132+132 desktop) while the unpadded rows (lede,
   gallery passthroughs) meet at ~30px, so the page alternated cramped
   and cavernous. Here every section contributes HALF the rhythm per
   side: every seam, without exception, totals var(--pi-sec-pad).
   ===================================================================== */
body.pi-designed .pa-services, body.pi-designed .pa-areas,
body.pi-designed .pa-why, body.pi-designed .pa-process,
body.pi-designed .pa-quotes, body.pi-designed .pa-editorial,
body.pi-designed .pa-market, body.pi-designed .pa-consult,
body.pi-designed .pa-faq, body.pi-designed .pa-headonly{
  padding-top:calc(var(--pi-sec-pad) / 2);
  padding-bottom:calc(var(--pi-sec-pad) / 2);
}
/* unpadded rows join the same half-rhythm so no seam is ever ~30px */
body.pi-designed .pa-lede-sec,
body.pi-designed .pa-passthru{
  padding-top:calc(var(--pi-sec-pad) / 2);
  padding-bottom:calc(var(--pi-sec-pad) / 2);
}
/* the strips' own prose margins were sized for life INSIDE a text column;
   in a padded passthrough row they would stack onto the section rhythm */
body.pi-designed .pa-passthru .pi-gallery--mini{ margin-block:0; }
/* the hero keeps its full presence; first section after it needs no double */
body.pi-designed .pa-page--hero-only + .pa-lede-sec{ padding-top:calc(var(--pi-sec-pad) / 2); }
/* "Selected Work" heading hugs its gallery: heading below-pad collapses */
body.pi-designed .pa-workhead{ padding-bottom:0; }
body.pi-designed .pa-workhead + .pa-passthru{ padding-top:clamp(22px, 2vw, 34px); }
/* single closing band: clear space from the reviews above, flush to footer */
body.pi-designed .pa-closing{ margin-top:calc(var(--pi-sec-pad) / 2); margin-bottom:calc(var(--pi-sec-pad) / 2); }

/* =====================================================================
   §LEGAL — privacy policy and future terms pages.
   A legal page is READ, not scanned: it gets the site hero, then a single
   narrow column at a book measure instead of the 1000px content well
   (16.5px type across 1000px is ~120 characters a line, which is why the
   page read as an unstyled text wall).
   ===================================================================== */
.pa-legal{
  width:100vw; margin-left:calc(50% - 50vw); position:relative;
  padding:calc(var(--pi-sec-pad) / 1.4) 0;
}
.pa-legal__wrap{
  max-width:700px; margin:0 auto;
  padding:0 clamp(20px, 3vw, 32px);
}
.pa-legal__updated{
  font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--pi-accent-dk); margin:0 0 10px;
}
/* the blanket `.post_content.entry-content h2 { margin:20px 0 !important }`
   flattens the section rhythm here too, so the escapes need !important */
.post_content .pa-legal h2{
  font-size:clamp(22px, 2.4vw, 28px) !important;
  line-height:1.25 !important;
  margin:clamp(36px, 4.4vw, 58px) 0 12px !important;
  padding-top:clamp(18px, 2vw, 26px);
  border-top:1px solid var(--pi-line-faint);
}
.post_content .pa-legal h3{
  font-size:clamp(17px, 1.8vw, 20px) !important;
  margin:26px 0 8px !important;
}
.pa-legal p, .pa-legal li{
  color:var(--pi-text-soft);
  line-height:1.75;
}
.pa-legal ul{ padding-left:1.2em; margin:12px 0; }
.pa-legal li{ margin:8px 0; }
.pa-legal a{ color:var(--pi-accent-dk); }