/* =========================================================================
   Pro Paving & Driveways — "Bond"
   -------------------------------------------------------------------------
   Design language: paving-bond offsets, the logo's concentric diamond as a
   structural motif, gold on near-black.

   Two rules this file obeys throughout, both learned the hard way on Astra:
   1. Blanket element resets are wrapped in :where() so they carry (0,0,0)
      specificity and never out-rank a component class.
   2. Interactive states are declared at TWO classes (.pp .pp-btn:hover) so
      Astra's own a:hover / button:hover (0,1,1) cannot repaint them.
   ========================================================================= */

:root {
	/* ink */
	--pp-ink:      #0C0D0F;
	--pp-ink-2:    #16181C;
	--pp-ink-3:    #22262C;
	--pp-ink-4:    #313741;

	/* paper */
	--pp-paper:    #FFFFFF;
	--pp-sand:     #F6F3EE;
	--pp-sand-2:   #EDE7DE;

	/* gold — sampled from the logo PNG, not guessed */
	--pp-gold:     #B98C42;   /* button fills, rules, motif */
	--pp-gold-lt:  #D8BC7C;   /* accent TEXT on dark  10.6:1 */
	--pp-gold-dk:  #8C5A20;   /* accent TEXT on light  5.8:1 */

	/* white on gold is 3.05:1 and fails AA. Gold buttons always take a dark
	   label — 6.38:1 — exactly as on the J R Fabrications build. */
	--pp-on-gold:  #0C0D0F;

	/* text */
	--pp-body:     #2A2D33;
	--pp-muted:    #5A6068;
	--pp-body-inv: #C9CDD4;
	--pp-muted-inv:#9AA0A9;

	--pp-line:      rgba(12,13,15,.12);
	--pp-line-inv:  rgba(255,255,255,.14);

	--pp-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--pp-text:    "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--pp-max:     1280px;
	--pp-gut:     clamp(20px, 5vw, 56px);
	--pp-r:       4px;               /* paving is square-edged; so are we */
	--pp-shadow:  0 1px 2px rgba(12,13,15,.06), 0 12px 32px -12px rgba(12,13,15,.20);
	--pp-shadow-lg: 0 2px 4px rgba(12,13,15,.08), 0 32px 64px -24px rgba(12,13,15,.34);

	--pp-ease:    cubic-bezier(.22,.61,.36,1);
}

/* ---------- resets (all :where()-wrapped) -------------------------------- */

:where(.pp) *,
:where(.pp) *::before,
:where(.pp) *::after { box-sizing: border-box; }

:where(.pp) a         { color: inherit; text-decoration: none; }
:where(.pp) ul,
:where(.pp) ol        { margin: 0; padding: 0; list-style: none; }
:where(.pp) figure    { margin: 0; }
:where(.pp) img       { max-width: 100%; height: auto; display: block; }
:where(.pp) h1,
:where(.pp) h2,
:where(.pp) h3,
:where(.pp) h4        { margin: 0; font-family: var(--pp-display); font-weight: 700; line-height: 1.06; letter-spacing: -.02em; }
:where(.pp) p         { margin: 0; }
:where(.pp) button    { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.pp {
	font-family: var(--pp-text);
	color: var(--pp-body);
	background: var(--pp-paper);
	-webkit-font-smoothing: antialiased;
}

/* Sideways overflow is clipped on the ROOT, and with `clip` rather than
   `hidden`. overflow:hidden on <body> turns it into a scroll container, which
   silently kills `position: sticky` on the header — it stops pinning and, in
   some engines, stops compositing the sections underneath it altogether.
   `clip` does the same visual job without creating a scroll container. */
html { overflow-x: clip; }
@supports not (overflow-x: clip) {
	html { overflow-x: hidden; }
}

.pp .site,
.pp #page,
.pp #content,
.pp .ast-container { max-width: none; padding: 0; margin: 0; }

/* ---------- layout primitives ------------------------------------------- */

.pp-wrap {
	width: 100%;
	max-width: var(--pp-max);
	margin-inline: auto;
	padding-inline: var(--pp-gut);
}
.pp-wrap--wide { max-width: 1560px; }
.pp-wrap--narrow { max-width: 760px; }

.pp-sec { padding-block: clamp(64px, 9vw, 132px); position: relative; }
.pp-sec--tight { padding-block: clamp(48px, 6vw, 88px); }
.pp-sec--ink  { background: var(--pp-ink);   color: var(--pp-body-inv); }
.pp-sec--ink2 { background: var(--pp-ink-2); color: var(--pp-body-inv); }
.pp-sec--sand { background: var(--pp-sand); }

.pp-sec--ink h1, .pp-sec--ink h2, .pp-sec--ink h3, .pp-sec--ink h4,
.pp-sec--ink2 h1, .pp-sec--ink2 h2, .pp-sec--ink2 h3, .pp-sec--ink2 h4 { color: #fff; }

/* ---------- type -------------------------------------------------------- */

.pp-h1 { font-size: clamp(2rem, 3.6vw, 3.15rem); line-height: 1.08; }
.pp-h2 { font-size: clamp(1.65rem, 3vw, 2.5rem); }
.pp-h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); letter-spacing: -.015em; }
.pp-h4 { font-size: 1.1rem; letter-spacing: -.01em; }

.pp-lead   { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.6; color: var(--pp-muted); }
.pp-sec--ink .pp-lead, .pp-sec--ink2 .pp-lead { color: var(--pp-body-inv); }

.pp-prose p { margin-block: 0 1.1em; line-height: 1.72; font-size: 1.0625rem; }
.pp-prose p:last-child { margin-bottom: 0; }
.pp-prose h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-block: 1.8em .55em; }
.pp-prose h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); margin-block: 1.6em .45em; }
.pp-prose h2:first-child, .pp-prose h3:first-child { margin-top: 0; }
.pp-prose strong { font-weight: 700; color: var(--pp-ink); }
.pp-sec--ink .pp-prose strong, .pp-sec--ink2 .pp-prose strong { color: #fff; }
.pp-prose a:not(.pp-btn) { color: var(--pp-gold-dk); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pp .pp-prose a:not(.pp-btn):hover { color: var(--pp-ink); }
.pp-sec--ink .pp-prose a:not(.pp-btn), .pp-sec--ink2 .pp-prose a:not(.pp-btn) { color: var(--pp-gold-lt); }

/* eyebrow — small caps label with the diamond mark */
.pp-eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--pp-display);
	font-size: .75rem; font-weight: 700;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--pp-gold-dk);
	margin-bottom: 18px;
}
.pp-sec--ink .pp-eyebrow, .pp-sec--ink2 .pp-eyebrow, .pp-hero .pp-eyebrow { color: var(--pp-gold-lt); }
.pp-eyebrow::before {
	content: ""; width: 9px; height: 9px; flex: none;
	background: currentColor;
	transform: rotate(45deg);
}

/* ---------- the diamond motif ------------------------------------------- */
/* Concentric diamonds lifted from the logo. Used as a section mark and as a
   list bullet. Drawn in CSS so it inherits colour and never 404s. */

.pp-diamond {
	width: 34px; height: 34px; flex: none;
	display: grid; place-items: center;
	color: var(--pp-gold);
}
.pp-diamond::before,
.pp-diamond::after {
	content: ""; grid-area: 1/1;
	border: 1.5px solid currentColor;
	transform: rotate(45deg);
}
.pp-diamond::before { width: 26px; height: 26px; }
.pp-diamond::after  { width: 12px; height: 12px; background: currentColor; }

/* horizontal rule with a diamond node in the middle */
.pp-rule {
	display: flex; align-items: center; gap: 14px;
	color: var(--pp-line);
}
.pp-sec--ink .pp-rule, .pp-sec--ink2 .pp-rule { color: var(--pp-line-inv); }
.pp-rule::before, .pp-rule::after { content: ""; height: 1px; background: currentColor; flex: 1; }
.pp-rule > span { width: 7px; height: 7px; background: var(--pp-gold); transform: rotate(45deg); flex: none; }

/* ticked list */
.pp-ticks { display: grid; gap: 12px; }
.pp-ticks li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.55; }
.pp-ticks li::before {
	content: ""; width: 8px; height: 8px; margin-top: .5em; flex: none;
	background: var(--pp-gold); transform: rotate(45deg);
}
.pp-sec--ink .pp-ticks li::before, .pp-sec--ink2 .pp-ticks li::before { background: var(--pp-gold-lt); }

/* two-column list on wider screens */
.pp-ticks--2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .pp-ticks--2 { grid-template-columns: 1fr 1fr; column-gap: 32px; } }

/* ---------- Astra neutralisers ------------------------------------------- */
/*
 * Astra's dynamic CSS paints EVERY bare button and EVERY link with
 * --ast-global-color-1 (#045cb4, a royal blue) on hover and focus:
 *
 *   a:hover, a:focus                       { color: var(--ast-global-color-1) }
 *   button:hover, button:focus, .menu-toggle:hover, input[type=submit]:hover…
 *       { color:#fff; background-color: var(--ast-global-color-1); … }
 *
 * Anything of ours without its own two-class state rule inherits that blue.
 * These resets are wrapped in :where() so they contribute NO specificity —
 * they land at (0,1,1), the same as Astra's, and win purely because our
 * stylesheet is enqueued after Astra's inline block. Every component rule
 * below is (0,2,0) or higher, so none of them are affected by this.
 */
:where(.pp) a:hover,
:where(.pp) a:focus { color: inherit; }
:where(.pp) button:hover,
:where(.pp) button:focus,
:where(.pp) input[type="submit"]:hover,
:where(.pp) input[type="submit"]:focus {
	color: inherit;
	background-color: transparent;
	border-color: inherit;
}

/* Astra also puts `padding: 12px 24px` on every bare button, which inflated
   our square icon buttons into rectangles — the burger rendered 50x46 against
   a 46px box, and the carousel arrows became ovals under a 50% radius. */
.pp .pp-burger,
.pp .pp-grx__arrow,
.pp .pp-drawer__toggle {
	padding: 0;
	min-width: 0;
	box-sizing: border-box;
}

/* ---------- buttons ------------------------------------------------------ */
/* Every state is declared at two classes. Astra sets button:hover and a:hover
   from --ast-global-color-1 at (0,1,1); a single class loses that fight. */

.pp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	font-family: var(--pp-display); font-weight: 700; font-size: .95rem;
	letter-spacing: .01em;
	padding: 15px 26px;
	border-radius: var(--pp-r);
	border: 1.5px solid transparent;
	transition: background .18s var(--pp-ease), color .18s var(--pp-ease), border-color .18s var(--pp-ease), transform .18s var(--pp-ease);
	text-align: center;
	-webkit-tap-highlight-color: transparent;
	cursor: pointer;
}
.pp .pp-btn:active { transform: translateY(1px); }
.pp .pp-btn:focus-visible { outline: 3px solid var(--pp-gold-lt); outline-offset: 3px; }

/* primary — gold fill, DARK label (6.38:1). Never white on gold. */
.pp .pp-btn--gold,
.pp .pp-btn--gold:link,
.pp .pp-btn--gold:visited { background: var(--pp-gold); color: var(--pp-on-gold); border-color: var(--pp-gold); }
.pp .pp-btn--gold:hover,
.pp .pp-btn--gold:focus   { background: var(--pp-gold-lt); color: var(--pp-on-gold); border-color: var(--pp-gold-lt); }

/* dark fill */
.pp .pp-btn--ink,
.pp .pp-btn--ink:link,
.pp .pp-btn--ink:visited { background: var(--pp-ink); color: #fff; border-color: var(--pp-ink); }
.pp .pp-btn--ink:hover,
.pp .pp-btn--ink:focus   { background: var(--pp-ink-3); color: #fff; border-color: var(--pp-ink-3); }

/* outline on dark */
.pp .pp-btn--ghost,
.pp .pp-btn--ghost:link,
.pp .pp-btn--ghost:visited { background: transparent; color: #fff; border-color: rgba(255,255,255,.36); }
.pp .pp-btn--ghost:hover,
.pp .pp-btn--ghost:focus   { background: rgba(255,255,255,.10); color: #fff; border-color: #fff; }

/* outline on light */
.pp .pp-btn--line,
.pp .pp-btn--line:link,
.pp .pp-btn--line:visited { background: transparent; color: var(--pp-ink); border-color: var(--pp-line); }
.pp .pp-btn--line:hover,
.pp .pp-btn--line:focus   { background: var(--pp-ink); color: #fff; border-color: var(--pp-ink); }

.pp-btn--lg  { padding: 18px 32px; font-size: 1.02rem; }
.pp-btn--sm  { padding: 11px 18px; font-size: .85rem; }
.pp-btn--full{ width: 100%; }

.pp-btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* text link with a moving arrow */
.pp-link {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--pp-display); font-weight: 700; font-size: .92rem;
	color: var(--pp-gold-dk);
}
.pp-sec--ink .pp-link, .pp-sec--ink2 .pp-link, .pp-card--ink .pp-link { color: var(--pp-gold-lt); }
.pp-link svg { transition: transform .22s var(--pp-ease); }
.pp .pp-link:hover svg { transform: translateX(5px); }

/* ---------- header ------------------------------------------------------- */
/* Solid and sticky rather than transparent-over-hero. It takes up layout space,
   so the hero sits below it as its own block instead of being half-covered —
   and the nav never has to be legible over an unpredictable photograph. */

.pp-header {
	position: sticky; top: 0; z-index: 90;
	background: var(--pp-ink);
	border-bottom: 1px solid var(--pp-line-inv);
}
.pp-header__in {
	display: flex; align-items: center; gap: 20px;
	height: 72px;
}
@media (min-width: 1080px) { .pp-header__in { height: 88px; } }

.pp-brand { display: flex; align-items: center; flex: none; margin-right: auto; }
.pp-brand img { height: 34px; width: auto; }
@media (min-width: 1080px) { .pp-brand img { height: 42px; } }
.pp-brand__text { font-family: var(--pp-display); font-weight: 800; color: #fff; font-size: 1.05rem; line-height: 1.1; letter-spacing: -.01em; }
.pp-brand__text span { display: block; font-size: .68rem; letter-spacing: .18em; color: var(--pp-gold-lt); font-weight: 700; }

/* nav */
.pp-nav { display: none; }
@media (min-width: 1080px) { .pp-nav { display: block; } }
.pp-nav > ul { display: flex; align-items: center; gap: 2px; }
.pp-nav a {
	display: block; padding: 10px 13px; border-radius: var(--pp-r);
	font-family: var(--pp-display); font-weight: 600; font-size: .93rem;
	color: rgba(255,255,255,.86);
	transition: color .16s var(--pp-ease), background .16s var(--pp-ease);
}
.pp .pp-nav a:hover,
.pp .pp-nav a:focus { color: #fff; background: rgba(255,255,255,.10); }
.pp-nav .current-menu-item > a,
.pp-nav .current-menu-ancestor > a,
.pp-nav .current_page_item > a { color: var(--pp-gold-lt); }

/* dropdowns */
.pp-nav li { position: relative; }
.pp-nav .sub-menu {
	position: absolute; top: 100%; left: 0; min-width: 250px;
	background: var(--pp-ink-2);
	border: 1px solid var(--pp-line-inv);
	border-radius: var(--pp-r);
	padding: 8px;
	box-shadow: var(--pp-shadow-lg);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .16s var(--pp-ease), transform .16s var(--pp-ease), visibility .16s;
	display: block;
}
.pp-nav li:hover > .sub-menu,
.pp-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.pp-nav .sub-menu a { font-size: .9rem; font-weight: 500; padding: 10px 12px; }

.pp-header__cta { display: none; align-items: center; gap: 12px; }
@media (min-width: 1080px) { .pp-header__cta { display: flex; } }
.pp-header__tel {
	display: inline-flex; align-items: center; gap: 9px;
	font-family: var(--pp-display); font-weight: 700; font-size: 1rem;
	color: #fff;
}
.pp .pp-header__tel:hover { color: var(--pp-gold-lt); }
.pp-header__tel small { display: block; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--pp-muted-inv); font-weight: 600; }

/* burger */
.pp-burger {
	display: grid; place-items: center; width: 46px; height: 46px; flex: none;
	border: 1px solid rgba(255,255,255,.24); border-radius: var(--pp-r);
	background: transparent; color: #fff;
	-webkit-tap-highlight-color: transparent;
}
@media (min-width: 1080px) { .pp-burger { display: none; } }
.pp .pp-burger:hover,
.pp .pp-burger:focus { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); }
.pp .pp-burger:focus-visible { outline: 3px solid var(--pp-gold-lt); outline-offset: 2px; }
.pp-burger span { display: block; width: 20px; height: 2px; background: currentColor; position: relative; transition: background .15s; }
.pp-burger span::before,
.pp-burger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; transition: transform .22s var(--pp-ease); }
.pp-burger span::before { top: -6px; }
.pp-burger span::after  { top: 6px; }
.pp-burger[aria-expanded="true"] span { background: transparent; }
.pp-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.pp-burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* mobile drawer */
.pp-drawer {
	position: fixed; inset: 0; z-index: 89;
	background: var(--pp-ink);
	padding: 88px var(--pp-gut) 40px;
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0; visibility: hidden; transform: translateY(-10px);
	transition: opacity .22s var(--pp-ease), transform .22s var(--pp-ease), visibility .22s;
}
.pp-drawer[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1080px) { .pp-drawer { display: none; } }
.pp-drawer a { color: #fff; }
.pp-drawer > ul > li { border-bottom: 1px solid var(--pp-line-inv); }
.pp-drawer > ul > li > a { display: block; padding: 16px 0; font-family: var(--pp-display); font-weight: 700; font-size: 1.2rem; }
.pp-drawer .sub-menu { padding: 0 0 14px 2px; display: grid; gap: 2px; }
.pp-drawer .sub-menu a { display: block; padding: 10px 0; color: var(--pp-body-inv); font-size: .98rem; }
.pp-drawer__foot { margin-top: 28px; display: grid; gap: 12px; }

/* Collapsible groups. Services and Areas carry 29 links between them, which
   pushed the drawer to 1,832px against an 812px viewport — you had to scroll
   past every service to reach Projects. The parent link still navigates; the
   chevron beside it opens the group.

   The collapsed state hangs off .pp-drawer__has-sub, which only JS adds, so
   without scripting every link is still present and reachable. */
.pp-drawer__has-sub {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
}
.pp-drawer__has-sub > a { grid-column: 1; }
.pp-drawer__has-sub > .sub-menu { grid-column: 1 / -1; display: none; }
.pp-drawer__has-sub.is-open > .sub-menu { display: grid; }

.pp-drawer__toggle {
	grid-column: 2;
	width: 48px; height: 48px;
	display: grid; place-items: center;
	color: var(--pp-gold-lt);
	border: 1px solid var(--pp-line-inv); border-radius: var(--pp-r);
	background: transparent;
	-webkit-tap-highlight-color: transparent;
}
.pp .pp-drawer__toggle:hover,
.pp .pp-drawer__toggle:focus { background: rgba(255,255,255,.10); color: var(--pp-gold-lt); }
.pp .pp-drawer__toggle:focus-visible { outline: 3px solid var(--pp-gold-lt); outline-offset: 2px; }
.pp-drawer__toggle svg { transition: transform .22s var(--pp-ease); }
.pp-drawer__has-sub.is-open > .pp-drawer__toggle svg { transform: rotate(180deg); }

/* body scroll lock while the drawer is open */
.pp-locked { overflow: hidden; }

/* ---------- hero --------------------------------------------------------- */
/* Split: copy on a solid dark panel, photograph alongside it. Nothing is ever
   set over an image, so the type stays crisp and the photo stays clean. Kept
   deliberately short — the services and the work should be reachable without
   scrolling past a full screen of banner. */

.pp-hero {
	background: var(--pp-ink);
	color: #fff;
	display: grid;
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.pp-hero { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
}

.pp-hero__in {
	display: flex; flex-direction: column; justify-content: center;
	padding: clamp(38px, 5vw, 66px) var(--pp-gut);
	min-height: clamp(320px, 46vw, 480px);
}
@media (min-width: 1440px) {
	/* keep the copy aligned with the page grid rather than drifting left */
	.pp-hero__in { padding-left: max(var(--pp-gut), calc((100vw - var(--pp-max)) / 2)); }
}
.pp-hero--page .pp-hero__in { min-height: clamp(240px, 30vw, 330px); }

.pp-hero__body { max-width: 34rem; }
.pp-hero .pp-h1 { color: #fff; text-wrap: balance; }
.pp-hero__lead {
	margin-top: 18px;
	font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.62;
	color: var(--pp-body-inv); max-width: 46ch;
}
.pp-hero__btns { margin-top: 26px; }

.pp-hero__media {
	position: relative;
	background: var(--pp-ink-2);
	min-height: clamp(180px, 42vw, 260px);
	/* Copy first on small screens: the headline and the quote button should be
	   on the first screen, not below a banner photograph. */
}
@media (min-width: 900px) { .pp-hero__media { min-height: 0; } }
.pp-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* a thin gold seam between panel and photograph */
@media (min-width: 900px) {
	.pp-hero__media::before {
		content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
		background: linear-gradient(to bottom, var(--pp-gold), rgba(185,140,66,0));
		z-index: 1;
	}
}

/* breadcrumb */
.pp-crumbs { font-size: .84rem; color: var(--pp-muted-inv); margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pp-crumbs a { color: var(--pp-body-inv); }
.pp .pp-crumbs a:hover { color: var(--pp-gold-lt); }
.pp-crumbs span[aria-hidden] { color: var(--pp-ink-4); }

/* trust strip — full width, directly under the hero */
.pp-hero__strip {
	background: var(--pp-ink-2);
	border-top: 1px solid var(--pp-line-inv);
	border-bottom: 1px solid var(--pp-line-inv);
}
.pp-hero__strip ul {
	display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
	background: var(--pp-line-inv);
}
@media (min-width: 900px) { .pp-hero__strip ul { grid-template-columns: repeat(4, 1fr); } }
.pp-hero__strip li {
	background: var(--pp-ink-2);
	padding: 18px clamp(16px, 2.4vw, 28px);
	display: flex; align-items: center; gap: 12px;
}
/* Class-based, not `.pp-hero__strip span`. An element selector here is
   (0,1,1) and silently out-ranks the .pp-diamond component (0,1,0) — it
   repainted the motif grey and forced display:block, which collapsed it
   into a bar. Same trap as the Astra resets noted at the top of this file. */
.pp-hero__strip__t { display: block; font-family: var(--pp-display); font-size: .98rem; color: #fff; line-height: 1.2; }
.pp-hero__strip__s { display: block; font-size: .78rem; color: var(--pp-muted-inv); margin-top: 3px; }
.pp-hero__strip .pp-diamond { width: 26px; height: 26px; }
.pp-hero__strip .pp-diamond::before { width: 19px; height: 19px; }
.pp-hero__strip .pp-diamond::after { width: 8px; height: 8px; }

/* ---------- section headers ---------------------------------------------- */

.pp-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 60px); }
.pp-head--center { margin-inline: auto; text-align: center; }
.pp-head--center .pp-eyebrow { justify-content: center; }
.pp-head p { margin-top: 18px; }
.pp-head__row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; justify-content: space-between; margin-bottom: clamp(36px, 5vw, 60px); }
.pp-head__row .pp-head { margin-bottom: 0; }

/* ---------- the bond grid ------------------------------------------------ */
/* Service cards laid like a stretcher bond: alternate rows shift half a card,
   the way a paviour offsets courses so the joints never line through. */

.pp-bond { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px)  { .pp-bond { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .pp-bond { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

@media (min-width: 1080px) and (prefers-reduced-motion: no-preference) {
	/* the offset itself — courses 2 and 4 drop by a third of a card */
	.pp-bond > *:nth-child(3n+2) { transform: translateY(34px); }
	.pp-bond > *:nth-child(3n+3) { transform: translateY(68px); }
	.pp-bond { margin-bottom: 68px; }
}

.pp-card {
	position: relative;
	display: flex; flex-direction: column;
	background: var(--pp-paper);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-r);
	overflow: hidden;
	transition: border-color .2s var(--pp-ease), box-shadow .2s var(--pp-ease);
	min-height: 100%;
}
.pp .pp-card:hover { border-color: var(--pp-gold); box-shadow: var(--pp-shadow); }
.pp-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--pp-ink-2); overflow: hidden; }
.pp-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--pp-ease); }
.pp .pp-card:hover .pp-card__media img { transform: scale(1.05); }
.pp-card__body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pp-card__body .pp-h3 { text-wrap: balance; }
.pp-card__body p { color: var(--pp-muted); line-height: 1.6; font-size: .97rem; }
.pp-card__body .pp-link { margin-top: auto; padding-top: 10px; }

/* whole card clickable without nesting anchors */
.pp-card__link::after { content: ""; position: absolute; inset: 0; }

/* placeholder for services with no photograph yet — a drawn bond pattern
   rather than a stock photo of somebody else's driveway */
.pp-card__media--pattern,
.pp-fig--pattern {
	background:
		repeating-linear-gradient(90deg, var(--pp-ink-3) 0 78px, transparent 78px 80px),
		repeating-linear-gradient(0deg,  var(--pp-ink-3) 0 38px, transparent 38px 40px),
		linear-gradient(140deg, var(--pp-ink-2), var(--pp-ink));
	background-size: 80px 40px, 80px 40px, 100% 100%;
	position: relative;
}
.pp-card__media--pattern::after,
.pp-fig--pattern::after {
	content: ""; position: absolute; inset: 0;
	background: repeating-linear-gradient(90deg, transparent 0 40px, rgba(185,140,66,.13) 40px 41px);
	background-position: 0 20px;
}

/* dark variant */
.pp-card--ink { background: var(--pp-ink-2); border-color: var(--pp-line-inv); color: var(--pp-body-inv); }
.pp-card--ink .pp-h3 { color: #fff; }
.pp-card--ink .pp-card__body p { color: var(--pp-muted-inv); }

/* ---------- process ------------------------------------------------------ */

.pp-steps { display: grid; gap: 1px; background: var(--pp-line-inv); border: 1px solid var(--pp-line-inv); border-radius: var(--pp-r); overflow: hidden; }
@media (min-width: 700px)  { .pp-steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1120px) { .pp-steps { grid-template-columns: repeat(5, 1fr); } }
.pp-step { background: var(--pp-ink); padding: 30px 26px 34px; display: flex; flex-direction: column; gap: 12px; }
.pp-step__n {
	font-family: var(--pp-display); font-weight: 800; font-size: 2.4rem; line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--pp-gold);
	letter-spacing: -.03em;
}
.pp-step h3 { font-size: 1.12rem; color: #fff; }
.pp-step p  { font-size: .93rem; line-height: 1.6; color: var(--pp-muted-inv); }

/* ---------- the build-up diagram ----------------------------------------- */
/* A labelled cross-section of a driveway. The single most useful thing on the
   site for someone comparing quotes — it shows exactly what the excavation
   depth line in a quotation is actually buying. */

.pp-buildup { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 940px) { .pp-buildup { grid-template-columns: 1.05fr .95fr; } }
.pp-buildup__fig {
	border: 1px solid var(--pp-line-inv);
	border-radius: var(--pp-r);
	background: var(--pp-ink-2);
	padding: clamp(18px, 3vw, 32px);
}
.pp-buildup__fig svg { width: 100%; height: auto; display: block; }
.pp-buildup__cap { margin-top: 16px; font-size: .84rem; color: var(--pp-muted-inv); line-height: 1.55; }

/* ---------- projects ----------------------------------------------------- */

.pp-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.pp-filter a {
	display: inline-block; padding: 9px 16px; border-radius: 100px;
	border: 1px solid var(--pp-line-inv);
	font-family: var(--pp-display); font-weight: 600; font-size: .86rem;
	color: var(--pp-body-inv);
	transition: background .16s var(--pp-ease), color .16s var(--pp-ease), border-color .16s var(--pp-ease);
}
.pp .pp-filter a:hover,
.pp .pp-filter a:focus { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.36); }
.pp .pp-filter a[aria-current="page"] { background: var(--pp-gold); color: var(--pp-on-gold); border-color: var(--pp-gold); }

.pp-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .pp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .pp-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

.pp-tile {
	position: relative; display: block; overflow: hidden;
	border-radius: var(--pp-r); background: var(--pp-ink-2);
	aspect-ratio: 4 / 3;
}
.pp-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--pp-ease); }
.pp .pp-tile:hover img { transform: scale(1.06); }
.pp-tile__cap {
	position: absolute; inset: auto 0 0 0; padding: 46px 20px 18px;
	background: linear-gradient(to top, rgba(12,13,15,.94), rgba(12,13,15,0));
	color: #fff;
}
.pp-tile__cap strong { display: block; font-family: var(--pp-display); font-weight: 700; font-size: 1.02rem; line-height: 1.24; }
.pp-tile__cap span { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pp-gold-lt); margin-top: 6px; font-weight: 600; }

/* "show more" on smaller screens — the page size cannot vary server-side
   because StackCDN caches per-URL */
.pp-showmore { margin-top: 28px; text-align: center; }
.pp-grid > .is-hidden { display: none; }

/* ---------- before / after ----------------------------------------------- */

.pp-ba {
	position: relative; overflow: hidden; border-radius: var(--pp-r);
	background: var(--pp-ink-2); aspect-ratio: 3 / 2;
	touch-action: pan-y;
	cursor: ew-resize;
	user-select: none;
}
.pp-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pp-ba__after { clip-path: inset(0 0 0 var(--pp-split, 50%)); }
.pp-ba__handle {
	position: absolute; top: 0; bottom: 0; left: var(--pp-split, 50%);
	width: 2px; background: #fff; transform: translateX(-1px);
	pointer-events: none;
}
.pp-ba__handle::after {
	content: ""; position: absolute; top: 50%; left: 50%;
	width: 46px; height: 46px; margin: -23px 0 0 -23px;
	border-radius: 50%; background: var(--pp-gold);
	box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.pp-ba__tag {
	position: absolute; top: 14px; padding: 6px 12px; border-radius: 3px;
	font-family: var(--pp-display); font-size: .72rem; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase;
	background: rgba(12,13,15,.76); color: #fff; pointer-events: none;
}
.pp-ba__tag--b { left: 14px; }
.pp-ba__tag--a { right: 14px; }
.pp-ba input[type="range"] {
	position: absolute; inset: 0; width: 100%; height: 100%;
	opacity: 0; margin: 0; cursor: ew-resize;
}
.pp-ba input[type="range"]:focus-visible ~ .pp-ba__handle::after { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- stats / figures ---------------------------------------------- */

.pp-stats { display: grid; gap: 1px; background: var(--pp-line); border: 1px solid var(--pp-line); border-radius: var(--pp-r); overflow: hidden; }
@media (min-width: 560px) { .pp-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .pp-stats { grid-template-columns: repeat(4, 1fr); } }
.pp-stat { background: var(--pp-paper); padding: 28px 24px; }
.pp-sec--ink .pp-stats, .pp-sec--ink2 .pp-stats { background: var(--pp-line-inv); border-color: var(--pp-line-inv); }
.pp-sec--ink .pp-stat { background: var(--pp-ink); }
.pp-sec--ink2 .pp-stat { background: var(--pp-ink-2); }
.pp-stat strong { display: block; font-family: var(--pp-display); font-weight: 800; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1; letter-spacing: -.03em; color: var(--pp-gold-dk); }
.pp-sec--ink .pp-stat strong, .pp-sec--ink2 .pp-stat strong { color: var(--pp-gold-lt); }
.pp-stat span { display: block; margin-top: 10px; font-size: .9rem; color: var(--pp-muted); line-height: 1.5; }
.pp-sec--ink .pp-stat span, .pp-sec--ink2 .pp-stat span { color: var(--pp-muted-inv); }

/* ---------- split feature ------------------------------------------------ */

.pp-split { display: grid; gap: clamp(32px, 5vw, 68px); align-items: center; }
@media (min-width: 900px) { .pp-split { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .pp-split--flip .pp-split__media { order: 2; } }
.pp-split__media { border-radius: var(--pp-r); overflow: hidden; aspect-ratio: 4 / 3; background: var(--pp-ink-2); }
.pp-split__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- areas -------------------------------------------------------- */

.pp-areas { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.pp-area {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 16px 18px;
	border: 1px solid var(--pp-line-inv); border-radius: var(--pp-r);
	font-family: var(--pp-display); font-weight: 600; font-size: .98rem;
	color: #fff;
	transition: background .16s var(--pp-ease), border-color .16s var(--pp-ease);
}
.pp .pp-area:hover { background: rgba(255,255,255,.08); border-color: var(--pp-gold); }
.pp-area svg { color: var(--pp-gold-lt); flex: none; }

/* ---------- FAQ ---------------------------------------------------------- */

.pp-faq { display: grid; gap: 0; border-top: 1px solid var(--pp-line); }
.pp-sec--ink .pp-faq, .pp-sec--ink2 .pp-faq { border-top-color: var(--pp-line-inv); }
.pp-faq details { border-bottom: 1px solid var(--pp-line); }
.pp-sec--ink .pp-faq details, .pp-sec--ink2 .pp-faq details { border-bottom-color: var(--pp-line-inv); }
.pp-faq summary {
	list-style: none; cursor: pointer;
	display: flex; gap: 18px; align-items: flex-start; justify-content: space-between;
	padding: 22px 0;
	font-family: var(--pp-display); font-weight: 700; font-size: 1.06rem; line-height: 1.4;
	color: var(--pp-ink);
}
.pp-sec--ink .pp-faq summary, .pp-sec--ink2 .pp-faq summary { color: #fff; }
.pp-faq summary::-webkit-details-marker { display: none; }
.pp-faq summary::after {
	content: ""; flex: none; width: 12px; height: 12px; margin-top: 7px;
	border-right: 2px solid var(--pp-gold); border-bottom: 2px solid var(--pp-gold);
	transform: rotate(45deg); transition: transform .22s var(--pp-ease);
}
.pp-faq details[open] summary::after { transform: rotate(-135deg); }
.pp-faq__a { padding: 0 0 24px; max-width: 68ch; }
.pp-faq__a p { line-height: 1.7; color: var(--pp-muted); }
.pp-sec--ink .pp-faq__a p, .pp-sec--ink2 .pp-faq__a p { color: var(--pp-body-inv); }
.pp-faq__a p + p { margin-top: .9em; }

/* ---------- forms -------------------------------------------------------- */

.pp-form { display: grid; gap: 16px; }
.pp-form__row { display: grid; gap: 16px; }
@media (min-width: 620px) { .pp-form__row--2 { grid-template-columns: 1fr 1fr; } }
.pp-field { display: grid; gap: 7px; }
.pp-field > label,
.pp-form label {
	font-family: var(--pp-display); font-weight: 600; font-size: .84rem;
	letter-spacing: .04em; text-transform: uppercase; color: var(--pp-muted);
}
.pp-sec--ink .pp-form label, .pp-sec--ink2 .pp-form label, .pp-formcard .pp-form label { color: var(--pp-muted-inv); }
.pp-form input[type="text"],
.pp-form input[type="email"],
.pp-form input[type="tel"],
.pp-form select,
.pp-form textarea {
	width: 100%;
	font-family: var(--pp-text); font-size: 1rem;
	padding: 14px 16px;
	color: var(--pp-ink);
	background: var(--pp-paper);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-r);
	transition: border-color .16s var(--pp-ease), box-shadow .16s var(--pp-ease);
	appearance: none;
}
.pp-form textarea { min-height: 132px; resize: vertical; }
.pp-form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6068' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 16px center;
	padding-right: 42px;
}
.pp .pp-form input:focus,
.pp .pp-form select:focus,
.pp .pp-form textarea:focus {
	outline: none; border-color: var(--pp-gold);
	box-shadow: 0 0 0 3px rgba(185,140,66,.22);
}
.pp-form__note { font-size: .84rem; color: var(--pp-muted); line-height: 1.55; }
.pp-sec--ink .pp-form__note, .pp-formcard .pp-form__note { color: var(--pp-muted-inv); }
.pp-form__msg { padding: 14px 16px; border-radius: var(--pp-r); font-size: .95rem; line-height: 1.55; }
.pp-form__msg--ok   { background: rgba(46,125,50,.12); border: 1px solid rgba(46,125,50,.4); color: #1B5E20; }
.pp-form__msg--err  { background: rgba(198,40,40,.10); border: 1px solid rgba(198,40,40,.36); color: #B71C1C; }
.pp-sec--ink .pp-form__msg--ok, .pp-formcard .pp-form__msg--ok { color: #A5D6A7; }
.pp-sec--ink .pp-form__msg--err, .pp-formcard .pp-form__msg--err { color: #EF9A9A; }
/* honeypot */
.pp-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pp-formcard {
	background: var(--pp-ink-2);
	border: 1px solid var(--pp-line-inv);
	border-radius: var(--pp-r);
	padding: clamp(24px, 4vw, 40px);
	color: var(--pp-body-inv);
}
.pp-formcard h2, .pp-formcard h3 { color: #fff; }

/* Ninja Forms, dressed to match. NF renders its own markup so these have to
   reach into its classes; kept in one block so it is obvious what is theirs. */
.pp .nf-form-cont .nf-field-label label { font-family: var(--pp-display); font-weight: 600; font-size: .84rem; letter-spacing: .04em; text-transform: uppercase; color: var(--pp-muted-inv); margin-bottom: 7px; }
.pp .nf-form-cont .nf-field-element input[type="text"],
.pp .nf-form-cont .nf-field-element input[type="email"],
.pp .nf-form-cont .nf-field-element input[type="tel"],
.pp .nf-form-cont .nf-field-element select,
.pp .nf-form-cont .nf-field-element textarea {
	width: 100%; font-family: var(--pp-text); font-size: 1rem; padding: 14px 16px;
	color: var(--pp-ink); background: var(--pp-paper);
	border: 1px solid var(--pp-line); border-radius: var(--pp-r); height: auto;
}
.pp .nf-form-cont .nf-field-element textarea { min-height: 132px; }
.pp .nf-form-cont .nf-error-msg { color: #EF9A9A; font-size: .85rem; }
.pp .nf-form-cont .submit-wrap input[type="button"],
.pp .nf-form-cont input[type="submit"] {
	background: var(--pp-gold); color: var(--pp-on-gold);
	font-family: var(--pp-display); font-weight: 700; font-size: 1rem;
	padding: 16px 30px; border: 1.5px solid var(--pp-gold); border-radius: var(--pp-r);
	width: auto; height: auto; cursor: pointer;
}
.pp .nf-form-cont .submit-wrap input[type="button"]:hover,
.pp .nf-form-cont .submit-wrap input[type="button"]:focus,
.pp .nf-form-cont input[type="submit"]:hover,
.pp .nf-form-cont input[type="submit"]:focus {
	background: var(--pp-gold-lt); color: var(--pp-on-gold); border-color: var(--pp-gold-lt);
}
.pp .nf-form-cont .nf-form-title { display: none; }

/* ---------- CTA band ----------------------------------------------------- */

.pp-cta { position: relative; overflow: hidden; background: var(--pp-ink); color: #fff; }
.pp-cta__bg { position: absolute; inset: 0; opacity: .28; }
.pp-cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.pp-cta__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--pp-ink) 12%, rgba(12,13,15,.55) 100%); }
.pp-cta__in { position: relative; display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .pp-cta__in { grid-template-columns: 1.15fr .85fr; gap: 56px; } }
.pp-cta h2 { color: #fff; }
.pp-cta p { margin-top: 16px; color: var(--pp-body-inv); font-size: 1.06rem; line-height: 1.62; }
.pp-cta__panel { display: grid; gap: 12px; }
.pp-cta__tel {
	display: flex; align-items: center; gap: 14px;
	padding: 20px 22px; border-radius: var(--pp-r);
	border: 1px solid var(--pp-line-inv); background: rgba(255,255,255,.05);
}
.pp-cta__tel strong { font-family: var(--pp-display); font-size: 1.5rem; color: #fff; line-height: 1; display: block; }
.pp-cta__tel span { display: block; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pp-muted-inv); margin-bottom: 6px; }
.pp .pp-cta__tel:hover { border-color: var(--pp-gold); }

/* ---------- footer ------------------------------------------------------- */

.pp-footer { background: var(--pp-ink); color: var(--pp-body-inv); padding-top: clamp(56px, 7vw, 92px); }
.pp-footer__top { display: grid; gap: 40px; padding-bottom: 52px; }
@media (min-width: 760px)  { .pp-footer__top { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .pp-footer__top { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px; } }
.pp-footer h4 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pp-gold-lt); margin-bottom: 18px; font-weight: 700; }
.pp-footer nav ul { display: grid; gap: 11px; }
.pp-footer nav a { font-size: .95rem; color: var(--pp-body-inv); }
.pp .pp-footer nav a:hover { color: var(--pp-gold-lt); }
.pp-footer__brand img { height: 58px; width: auto; margin-bottom: 20px; }
.pp-footer__brand p { font-size: .95rem; line-height: 1.68; color: var(--pp-muted-inv); max-width: 38ch; }
.pp-footer__contact { display: grid; gap: 12px; margin-top: 22px; }
.pp-footer__contact a { display: flex; align-items: center; gap: 11px; font-size: .98rem; }
.pp-footer__contact svg { color: var(--pp-gold-lt); flex: none; }
.pp .pp-footer__contact a:hover { color: var(--pp-gold-lt); }
.pp-social { display: flex; gap: 10px; margin-top: 22px; }
.pp-social a {
	display: grid; place-items: center; width: 42px; height: 42px;
	border: 1px solid var(--pp-line-inv); border-radius: var(--pp-r); color: #fff;
	transition: background .16s var(--pp-ease), border-color .16s var(--pp-ease);
}
.pp .pp-social a:hover { background: rgba(255,255,255,.1); border-color: var(--pp-gold); color: var(--pp-gold-lt); }
/* an inline SVG with only a viewBox and no CSS size expands to its container
   width — one unstyled icon once produced a 351px-tall footer void */
.pp-social svg { width: 19px; height: 19px; display: block; }

.pp-footer__bar {
	border-top: 1px solid var(--pp-line-inv);
	padding-block: 26px;
	display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between;
	font-size: .84rem; color: var(--pp-muted-inv);
}
.pp-footer__bar nav ul { display: flex; flex-wrap: wrap; gap: 20px; }
.pp-footer__bar nav a { font-size: .84rem; }

/* ---------- mobile call bar ---------------------------------------------- */

.pp-callbar {
	position: fixed; inset: auto 0 0 0; z-index: 88;
	display: grid; grid-template-columns: 1fr 1fr;
	background: var(--pp-ink); border-top: 1px solid var(--pp-line-inv);
	padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 1080px) { .pp-callbar { display: none; } }
.pp-callbar--3 { grid-template-columns: 1fr 1fr 1fr; }
.pp .pp-callbar__wa,
.pp .pp-callbar__wa:link,
.pp .pp-callbar__wa:visited { background: #1FA855; color: #fff; }
.pp .pp-callbar__wa:hover,
.pp .pp-callbar__wa:focus  { background: #17914a; color: #fff; }
.pp-callbar a {
	display: flex; align-items: center; justify-content: center; gap: 9px;
	padding: 16px 10px;
	font-family: var(--pp-display); font-weight: 700; font-size: .96rem;
	color: #fff; -webkit-tap-highlight-color: transparent;
}
.pp .pp-callbar__quote,
.pp .pp-callbar__quote:link,
.pp .pp-callbar__quote:visited { background: var(--pp-gold); color: var(--pp-on-gold); }
.pp .pp-callbar__quote:hover,
.pp .pp-callbar__quote:focus  { background: var(--pp-gold-lt); color: var(--pp-on-gold); }
.pp-callbar svg { flex: none; }

/* clear the call bar so it never covers the last line of the footer, and lift
   Astra's own scroll-to-top above it */
@media (max-width: 1079px) {
	.pp-footer__bar { padding-bottom: 84px; }
	.pp #ast-scroll-top { bottom: 76px; }
}

/* Astra's scroll-to-top is painted from --ast-global-color-1, a royal blue
   (#045cb4), and its own selectors are (0,1,1) so a single class loses.
   Repaint it in the brand palette rather than adding a second button. */
.pp #ast-scroll-top,
.pp #ast-scroll-top:visited {
	background: var(--pp-gold); color: var(--pp-on-gold);
	border-radius: var(--pp-r); border: 1px solid var(--pp-gold);
}
.pp #ast-scroll-top:hover,
.pp #ast-scroll-top:focus {
	background: var(--pp-gold-lt); color: var(--pp-on-gold); border-color: var(--pp-gold-lt);
}
.pp #ast-scroll-top .ast-icon { color: inherit; }

/* Ninja Forms lays every field full width; these pair them up like the
   theme-native form. NF puts our container_class on .nf-field-container. */
.pp .nf-form-cont .nf-form-fields-required {
	font-size: .8rem; color: var(--pp-muted-inv); margin: 0 0 18px;
}
.pp .nf-form-cont .ninja-forms-req-symbol { color: var(--pp-gold-lt); }
@media (min-width: 620px) {
	.pp .nf-form-cont .nf-form-layout > form > .nf-form-content { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
	.pp .nf-form-cont .nf-field-container { grid-column: 1 / -1; }
	.pp .nf-form-cont .pp-nf-half { grid-column: span 1; }
}
.pp .nf-form-cont .nf-field-container { margin-bottom: 16px; }
.pp .nf-form-cont .pp-nf-note {
	font-size: .88rem; line-height: 1.55; color: var(--pp-muted-inv);
	border-left: 3px solid var(--pp-gold); padding-left: 16px; margin: 0;
}
.pp .nf-form-cont .pp-nf-note a { color: var(--pp-gold-lt); text-decoration: underline; }
.pp .nf-form-cont .submit-container { grid-column: 1 / -1; }
.pp .nf-form-cont .nf-response-msg,
.pp .nf-form-cont .nf-success-msg {
	color: var(--pp-body-inv); font-size: 1rem; line-height: 1.6;
}
.pp .nf-form-cont .nf-success-msg strong { color: #fff; }

/* ---------- scroll reveal ------------------------------------------------ */

/* The hidden state is gated on .pp-js, which main.js sets on <html> before
   anything else. If the script fails, is blocked, or the observer never fires,
   the page simply renders — content must never depend on JS to be visible. */
@media (prefers-reduced-motion: no-preference) {
	.pp-js .pp-rv { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--pp-ease), transform .6s var(--pp-ease); }
	.pp-js .pp-rv.is-in { opacity: 1; transform: none; }
	/* bond offsets are transforms too — keep them on the revealed state so the
	   two rules do not fight */
	@media (min-width: 1080px) {
		.pp-js .pp-bond > .pp-rv { transform: none; }
		.pp-js .pp-bond > .pp-rv.is-in:nth-child(3n+2) { transform: translateY(34px); }
		.pp-js .pp-bond > .pp-rv.is-in:nth-child(3n+3) { transform: translateY(68px); }
	}
}

/* ---------- lightbox ----------------------------------------------------- */

.pp-lb {
	position: fixed; inset: 0; z-index: 200;
	background: rgba(8,9,10,.96);
	display: grid; place-items: center; padding: 24px;
	opacity: 0; visibility: hidden; transition: opacity .2s var(--pp-ease), visibility .2s;
}
.pp-lb[data-open="true"] { opacity: 1; visibility: visible; }
.pp-lb img { max-width: min(1400px, 96vw); max-height: 86vh; width: auto; border-radius: var(--pp-r); }
.pp-lb__cap { margin-top: 14px; color: var(--pp-body-inv); font-size: .9rem; text-align: center; max-width: 70ch; }
.pp-lb__close {
	position: absolute; top: 18px; right: 18px; width: 46px; height: 46px;
	display: grid; place-items: center; color: #fff;
	border: 1px solid var(--pp-line-inv); border-radius: var(--pp-r);
	background: transparent;
}
.pp .pp-lb__close:hover, .pp .pp-lb__close:focus { background: rgba(255,255,255,.12); color: #fff; }
.pp-lb__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 52px; height: 52px; display: grid; place-items: center; color: #fff;
	border: 1px solid var(--pp-line-inv); border-radius: var(--pp-r); background: rgba(12,13,15,.5);
}
.pp .pp-lb__nav:hover, .pp .pp-lb__nav:focus { background: rgba(255,255,255,.14); color: #fff; }
.pp-lb__nav--prev { left: 18px; }
.pp-lb__nav--next { right: 18px; }

/* ---------- pagination --------------------------------------------------- */

.pp-pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 44px; }
.pp-pager .page-numbers {
	display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px;
	border: 1px solid var(--pp-line-inv); border-radius: var(--pp-r);
	font-family: var(--pp-display); font-weight: 600; font-size: .92rem; color: var(--pp-body-inv);
}
.pp .pp-pager a.page-numbers:hover { background: rgba(255,255,255,.1); color: #fff; }
.pp-pager .page-numbers.current { background: var(--pp-gold); color: var(--pp-on-gold); border-color: var(--pp-gold); }

/* ---------- misc --------------------------------------------------------- */

.pp-skip {
	position: absolute; left: -9999px; top: 0; z-index: 300;
	background: var(--pp-gold); color: var(--pp-on-gold); padding: 12px 20px;
	font-family: var(--pp-display); font-weight: 700;
}
.pp-skip:focus { left: 12px; top: 12px; }

.pp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* a flex/grid child defaults to min-width:auto, which lets a wide table shove
   the whole page sideways however much overflow-x you set */
.pp-scroll, .pp-buildup > * { min-width: 0; }

.pp-note {
	border-left: 3px solid var(--pp-gold);
	padding: 4px 0 4px 18px;
	color: var(--pp-muted); font-size: .97rem; line-height: 1.65;
}
.pp-sec--ink .pp-note, .pp-sec--ink2 .pp-note { color: var(--pp-body-inv); }

.pp-map { border-radius: var(--pp-r); overflow: hidden; border: 1px solid var(--pp-line-inv); }
.pp-map iframe { display: block; width: 100%; height: 380px; border: 0; filter: grayscale(1) contrast(1.05) invert(.9) hue-rotate(180deg); }

.pp-center { text-align: center; }
.pp-mt { margin-top: clamp(32px, 4vw, 52px); }

@media print {
	.pp-header, .pp-callbar, .pp-drawer, .pp-cta { display: none !important; }
}

/* ---------- touch targets ------------------------------------------------ */
/* Footer and drawer links sit at 19–21px of text. Fine with a mouse, fiddly
   with a thumb, so they get real vertical padding below the desktop breakpoint
   rather than relying on the line box. */
@media (max-width: 1079px) {
	.pp-footer nav ul { gap: 0; }
	.pp-footer nav a { display: block; padding-block: 9px; }
	.pp-footer__contact { gap: 2px; }
	.pp-footer__contact a { padding-block: 9px; }
	.pp-footer__bar nav ul { gap: 0 22px; }
	.pp-footer__bar nav a { display: inline-block; padding-block: 8px; }
	.pp-prose a:not(.pp-btn) { padding-block: 2px; }
}


/* ---------------------------------------------------------------- reviews --
   Google panel. Only rendered once a review link is set, so it can never go
   out as an empty badge — see pp_google_reviews_panel(). */
.pp-gr {
	display: flex; align-items: center; gap: 18px;
	max-width: 520px; margin: 28px auto 0;
	padding: 18px 22px;
	background: #fff;
	border: 1px solid var(--pp-line); border-radius: var(--pp-r);
	box-shadow: 0 2px 10px rgba(12,13,15,.06);
	text-decoration: none;
}
.pp-sec--ink .pp-gr, .pp-sec--ink2 .pp-gr { border-color: var(--pp-line-inv); }
.pp-gr__logo { flex: none; display: grid; place-items: center; }
.pp-gr__text { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; }
.pp-gr__stars { display: flex; gap: 2px; color: #F5A623; }
.pp .pp-gr__label { color: var(--pp-ink); font-weight: 600; }
.pp-gr__go { flex: none; color: var(--pp-gold-dk); }
.pp .pp-gr:hover, .pp .pp-gr:focus { border-color: var(--pp-gold); }
.pp .pp-gr:hover .pp-gr__label, .pp .pp-gr:focus .pp-gr__label { color: var(--pp-gold-dk); }
.pp .pp-gr:focus-visible { outline: 3px solid var(--pp-gold-dk); outline-offset: 3px; }

/* WhatsApp buttons keep the platform green so they read as what they are,
   rather than as another gold CTA competing with "Request a free quote". */
.pp .pp-btn--wa,
.pp .pp-btn--wa:link,
.pp .pp-btn--wa:visited { border-color: #1FA855; color: #1FA855; background: transparent; }
.pp .pp-btn--wa:hover,
.pp .pp-btn--wa:focus  { background: #1FA855; color: #fff; border-color: #1FA855; }
.pp .pp-btn--wa:focus-visible { outline: 3px solid #1FA855; outline-offset: 3px; }
.pp-sec--ink .pp-btn--wa, .pp-cta .pp-btn--wa { color: #4ED98A; border-color: #4ED98A; }
.pp-sec--ink .pp-btn--wa:hover, .pp-cta .pp-btn--wa:hover,
.pp-sec--ink .pp-btn--wa:focus, .pp-cta .pp-btn--wa:focus { background: #1FA855; color: #fff; border-color: #1FA855; }

/* ------------------------------------------------- live Google reviews --
   Rendered only when the Places API returns reviews; otherwise the simpler
   .pp-gr link panel above is used instead. */
.pp-grx { margin-top: 30px; }
.pp-grx__head {
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
	padding: 18px 22px; margin-bottom: 20px;
	background: #fff; border: 1px solid var(--pp-line); border-radius: var(--pp-r);
}
.pp-sec--ink .pp-grx__head, .pp-sec--ink2 .pp-grx__head { border-color: var(--pp-line-inv); }
.pp-grx__agg { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1 1 auto; }
.pp .pp-grx__score { font-family: var(--pp-display); font-size: 1.7rem; line-height: 1; color: var(--pp-ink); }
.pp .pp-grx__count { color: var(--pp-muted); font-size: .95rem; }
.pp-gr__stars, .pp-grx__stars { display: inline-flex; gap: 2px; color: #F5A623; }
.pp-gr__star { display: inline-flex; }
.pp-gr__star.is-empty { color: var(--pp-line); }

/* Carousel. Scroll-snap does the work, so it keeps native touch momentum on
   phones and still works if the JS never runs — the arrows are progressive
   enhancement on top of a plain scrollable list. */
.pp-grx__carousel { position: relative; }
.pp-grx__list {
	list-style: none; margin: 0; padding: 4px;
	display: grid; gap: 16px;
	grid-auto-flow: column;
	/* A definite track width, NOT minmax(0, …) — with a min of 0 the tracks just
	   shrink to fit the container and the carousel never overflows or scrolls. */
	grid-auto-columns: 82%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}
@media (prefers-reduced-motion: reduce) { .pp-grx__list { scroll-behavior: auto; } }
@media (min-width: 700px)  { .pp-grx__list { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (min-width: 1040px) { .pp-grx__list { grid-auto-columns: calc((100% - 32px) / 3); } }
.pp-grx__list > * { scroll-snap-align: start; }
.pp .pp-grx__list:focus-visible { outline: 3px solid var(--pp-gold-dk); outline-offset: 2px; }

.pp-grx__nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; }
/* Two classes, explicit padding and border-box: Astra puts padding on every
   bare `button`, which inflated these into ovals against a 50% radius. */
.pp .pp-grx__arrow {
	box-sizing: border-box;
	width: 44px; height: 44px; min-width: 0; flex: 0 0 44px;
	padding: 0; margin: 0; line-height: 0;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--pp-line); border-radius: 50%;
	background: #fff; color: var(--pp-ink);
	-webkit-tap-highlight-color: transparent;
}
.pp-grx__arrow--prev svg { transform: rotate(180deg); }
/* Plain :focus is neutralised first — a mouse click used to leave the button
   painted gold. :focus-visible comes after so keyboard users still get it. */
.pp .pp-grx__arrow:focus { background: #fff; color: var(--pp-ink); border-color: var(--pp-line); }
.pp .pp-grx__arrow:hover,
.pp .pp-grx__arrow:focus-visible { background: var(--pp-gold); color: var(--pp-on-gold); border-color: var(--pp-gold); }
.pp .pp-grx__arrow:focus-visible { outline: 3px solid var(--pp-gold-dk); outline-offset: 2px; }
.pp .pp-grx__arrow[disabled] { opacity: .3; pointer-events: none; background: #fff; color: var(--pp-ink); border-color: var(--pp-line); }
.pp-grx__item {
	display: grid; gap: 10px; height: 100%;
	grid-template-rows: auto auto 1fr auto;
	padding: 20px; background: #fff;
	border: 1px solid var(--pp-line); border-radius: var(--pp-r);
}
.pp-sec--ink .pp-grx__item, .pp-sec--ink2 .pp-grx__item { border-color: var(--pp-line-inv); }
.pp-grx__who { display: flex; align-items: center; gap: 10px; }
.pp-grx__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.pp-grx__avatar--none {
	display: grid; place-items: center;
	background: var(--pp-gold); color: var(--pp-on-gold);
	font-family: var(--pp-display); font-weight: 700;
}
.pp .pp-grx__who strong { display: block; color: var(--pp-ink); font-size: .98rem; }
.pp .pp-grx__when { color: var(--pp-muted); font-size: .85rem; }
.pp .pp-grx__text {
	margin: 0; font-size: .97rem;
	/* Clamped so every card is the same height; the full review is one click
	   away on Google, which is where it lives anyway. */
	display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical;
	overflow: hidden;
}
.pp .pp-grx__src { font-size: .85rem; color: var(--pp-gold-dk); align-self: end; }

/* ---------- revisions, October 2026 -------------------------------------- */

/* Below 1080px the call bar is pinned to the bottom of the screen with the
   same three actions, so the hero does not repeat them; the copy is shorter
   and the photograph moves up. Same breakpoint as .pp-callbar. */
@media (max-width: 1079.98px) {
	.pp-hero .pp-hero__btns { display: none; }
}
@media (max-width: 899.98px) {
	.pp-hero__in,
	.pp-hero--page .pp-hero__in { min-height: 0; padding-bottom: 30px; }
}

/* Google rating in the hero */
.pp .pp-rating,
.pp .pp-rating:link,
.pp .pp-rating:visited {
	display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
	margin-top: 22px; padding: 9px 14px;
	background: rgba(255,255,255,.06);
	border: 1px solid var(--pp-line-inv); border-radius: var(--pp-r);
	color: var(--pp-body-inv); font-size: .92rem; line-height: 1.2;
	text-decoration: none;
}
.pp a.pp-rating:hover,
.pp a.pp-rating:focus { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.3); color: #fff; }
.pp-rating__g { display: inline-flex; }
.pp-rating .pp-gr__stars { color: #F5A623; }
.pp-rating__t strong { color: #fff; font-family: var(--pp-display); font-size: 1rem; margin-right: 3px; }
.pp-hero__btns { margin-top: 22px; }

/* Facebook / Instagram buttons beside WhatsApp: the button keeps the
   surrounding outline style, the icon carries the brand colour. */
.pp .pp-btn--facebook svg  { color: #4A9BFF; }
.pp .pp-btn--instagram svg { color: #F06A8A; }
.pp .pp-btn--facebook:hover svg, .pp .pp-btn--facebook:focus svg,
.pp .pp-btn--instagram:hover svg, .pp .pp-btn--instagram:focus svg { color: currentColor; }

/* Portrait photographs (e.g. the drainage trench) — uncropped source, and a
   taller frame where the layout is a single column so more of it shows. */
.pp-card__media--tall img { object-position: 50% 45%; }
@media (max-width: 719.98px) {
	.pp-card__media--tall { aspect-ratio: 4 / 5; }
}
.pp-hero__media--tall img { object-position: 50% 50%; }
@media (max-width: 899.98px) {
	.pp-hero__media--tall { aspect-ratio: 1 / 1; min-height: 0; }
}

/* Photo uploader inside the quote form (inc/photos.php) */
.pp-photos { display: grid; gap: 10px; margin: 4px 0 18px; }
.pp .pp-photos__label { font-family: var(--pp-display); font-weight: 600; font-size: .84rem; letter-spacing: .04em; text-transform: uppercase; color: var(--pp-muted-inv); }
.pp-photos__label span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.pp .pp-photos__hint { margin: 0; font-size: .9rem; color: var(--pp-muted-inv); }
.pp-photos__drop {
	position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
	padding: 14px; border: 1px dashed rgba(255,255,255,.3); border-radius: var(--pp-r);
	cursor: pointer;
}
.pp-photos__drop:hover, .pp-photos__drop:focus-within { border-color: var(--pp-gold-lt); background: rgba(255,255,255,.04); }
.pp-photos__drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pp-photos__drop:focus-within { outline: 3px solid var(--pp-gold); outline-offset: 2px; }
.pp-photos__btn {
	display: inline-flex; padding: 9px 16px; border-radius: var(--pp-r);
	background: var(--pp-gold); color: var(--pp-on-gold);
	font-family: var(--pp-display); font-weight: 700; font-size: .92rem;
}
.pp-photos__or { color: var(--pp-muted-inv); font-size: .88rem; }
.pp-photos__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.pp-photos__list:empty { display: none; }
.pp-photos__item { position: relative; aspect-ratio: 1; border-radius: var(--pp-r); overflow: hidden; background: var(--pp-ink-2); }
.pp-photos__item img { width: 100%; height: 100%; object-fit: cover; }
.pp-photos__item.is-loading img { opacity: .4; }
.pp-photos__item.is-loading::after {
	content: ""; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px;
	border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%;
	animation: pp-spin .8s linear infinite;
}
@keyframes pp-spin { to { transform: rotate(360deg); } }
.pp .pp-photos__rm {
	position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; min-width: 0; padding: 0;
	display: grid; place-items: center; border: 0; border-radius: 50%;
	background: rgba(12,13,15,.75); color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
}
.pp .pp-photos__rm:hover, .pp .pp-photos__rm:focus { background: var(--pp-ink); color: #fff; }
.pp .pp-photos__err { margin: 0; color: #EF9A9A; font-size: .88rem; }
.pp .pp-photos__err[hidden] { display: none; }
.pp .nf-form-cont input[type="submit"][disabled] { opacity: .55; cursor: progress; }