/* ==========================================================================
Peak Leather Widgets — shared design system
--------------------------------------------------------------------------
Ported from the approved static mockup (draft/design-1-rugged-heritage).
Every class is `pl-` prefixed so nothing collides with the theme, Elementor,
or another plugin.
SECTION BACKGROUNDS: widgets emit `pl-section pl-section--{token}` via the
Section_Background trait. Text and accent colours are paired against those
tokens BELOW — never hardcode a colour on a component, or it will be
unreadable the first time that component lands on a different background.
========================================================================== */
:root {
/* Core palette — sampled from live site + logo
v2 round 2: v1's charcoal was an olive-*green*-gray (#393D32), a cool hue that
clashes with the warm maroon/rust/cream around it and reads as murky/institutional
rather than "leather workshop." Rehued it warm (brown-gray, same darkness family)
so it belongs next to the leather tones instead of fighting them. maroon and rust
are also lifted a notch — same hue, same identity, just enough headroom that large
panels of them don't read as near-black. Grain texture eased back further too.
Client-approved hues (maroon/cream/rust) are unchanged in hue — only lightness moved. */
--charcoal: #463B32; /* was olive-green #393D32 → rehued warm brown-gray to match the leather palette */
--charcoal-light: #5A4B3F;
--maroon: #4C2518; /* lifted from #411F15 — hero/card bg with a bit more life, same deep leather brown */
--maroon-light: #79422E; /* lifted from #5A2C1E — brighter hero focal point, less murky */
--cream: #FAF6EC; /* whitened from #F1E3C8 — text color only now (dark-section copy, buttons) */
--cream-dim: #EDE4D2; /* whitened from #E4D3AE (v1) / #EAD9B8 — secondary text on dark sections */
--cream-bg: #F1E3C8; /* the original tan-cream — light section backgrounds, kept separate from --cream so whitening the font didn't drag the bg along with it */
--rust: #743018; /* lifted from #672714 — same burnt-orange accent, less heavy at full-panel size */
--rust-light: #96442A; /* lifted from #8A3A20 to match */
/* --rust-light is only legible on CREAM. On charcoal/maroon or a photo
overlay it lands at ~1.6:1 — effectively invisible. --rust-pale is the
same accent lifted until it clears 4.5:1 on charcoal (4.61) so eyebrows
on dark panels stay readable instead of disappearing. */
--rust-pale: #D99B77;
--olive-gray: #676758; /* tertiary alternating section bg */
--teal: #3F5C61; /* minimal accent, pulled from logo mountain illustration */
--ink: #241611; /* near-black brown for high-contrast text on cream */
--font-heading: 'Sora', sans-serif;
--font-body: 'Jost', sans-serif;
--radius-sm: 4px;
--radius-md: 8px;
--container: 1240px;
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 2rem;
--space-lg: 4rem;
--space-xl: 6rem;
--shadow-card: 0 10px 30px -12px rgba(36, 22, 17, 0.35);
}
/* -------------------------------------------------------------------------
Reset
------------------------------------------------------------------------- */
/* SCOPED RESET — do not make these global.
In the static mockup these were plain element rules (body, a, ul, h1-h4, p,
img, section, *). Inside WordPress a global reset like that is destructive:
it restyles the theme, all post content, comment lists, the admin bar and
Elementor's own editor UI, not just our widgets.
Every widget root carries `.pl-scope`, so the reset lands only on our markup.
`:root` custom properties above stay global on purpose — they're inert. */
.pl-scope,
.pl-scope *,
.pl-scope *::before,
.pl-scope *::after { box-sizing: border-box; }
.pl-scope {
position: relative; /* was `section { position: relative }` — the
grain overlay and hero ridge are absolute */
font-family: var(--font-body);
font-weight: 300;
color: var(--ink); /* section tokens below override this */
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.pl-scope img { max-width: 100%; display: block; }
.pl-scope a { color: inherit; text-decoration: none; }
/* Nav/button/card links intentionally carry no underline — but an inline text
link inside a sentence needs one to read as a link at all. The mockup set
this per-instance (style="text-decoration:underline") on every such link;
a reusable widget has no per-instance style to reach for, so it lives here. */
.pl-note a,
.pl-legal a { text-decoration: underline; }
.pl-scope ul { list-style: none; margin: 0; padding: 0; }
.pl-scope h1,
.pl-scope h2,
.pl-scope h3,
.pl-scope h4 {
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.15;
margin: 0 0 var(--space-sm);
letter-spacing: -0.01em;
color: inherit;
}
.pl-scope p { margin: 0 0 var(--space-sm); }
.pl-container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 1.5rem;
}
.pl-eyebrow {
font-family: var(--font-heading);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
/* v2: opacity removed — it was dragging the rust-on-cream eyebrows down to
~3:1 contrast. The color already chosen per-context (rust / cream-dim)
is legible at full strength; size + letter-spacing carry the "eyebrow" feel. */
margin-bottom: 0.75rem;
display: inline-block;
}
/* The static mockup set this per-instance with an inline style, since each
eyebrow's HTML was hand-written once. A reusable widget has no per-instance
inline style to reach for, so the accent has to live here instead — keyed to
the section token, same as every other text/background pairing. Rust/maroon
sections are deliberately absent: their base text colour (cream) already
reads fine for an eyebrow with no override, matching the mockup. */
.pl-section--cream .pl-eyebrow { color: var(--rust); }
.pl-section--charcoal .pl-eyebrow,
.pl-section--image .pl-eyebrow { color: var(--cream-dim); }
/* Leather-grain texture overlay, used on dark sections
v2: eased back so it reads as texture, not a murky film over the copy. */
.pl-section--grain::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.2;
mix-blend-mode: overlay;
background-image:
repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px),
repeating-linear-gradient(25deg, rgba(0,0,0,0.02) 0px, rgba(0,0,0,0.02) 1px, transparent 1px, transparent 4px);
}
/* -------------------------------------------------------------------------
Buttons
------------------------------------------------------------------------- */
.pl-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.02em;
padding: 0.9rem 1.9rem;
border-radius: var(--radius-sm);
border: 2px solid transparent;
cursor: pointer;
transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
white-space: nowrap;
}
.pl-btn:hover { transform: translateY(-2px); }
/* Same specificity bug again: .pl-scope a { color: inherit; } (0,1,1) beats a
single class (0,1,0), so every button's text silently inherited the AMBIENT
text colour instead of its own. Masked on dark-section buttons (Hero, CTA
Banner) purely by luck — ambient colour there is already cream — but broke
visibly on .pl-btn--dark sitting on a cream section (Category Rows), where
ambient colour is --ink: near-black text on a near-black button. */
.pl-scope .pl-btn--primary { background: var(--rust); color: var(--cream); }
.pl-btn--primary:hover { background: var(--rust-light); }
.pl-scope .pl-btn--outline { border-color: var(--cream); color: var(--cream); background: transparent; }
.pl-btn--outline:hover { background: rgba(241, 227, 200, 0.1); }
.pl-scope .pl-btn--dark { background: var(--charcoal); color: var(--cream); }
.pl-btn--dark:hover { background: var(--charcoal-light); }
/* Trackpad "rubber-band" overscroll (scrolling past the very top or bottom)
reveals whatever colour sits behind the document — the browser's canvas,
which defaults to white if html/body never set one. The fixed header makes
this specifically visible as a white flash above the charcoal bar, since
nothing else on the page claims that space. Charcoal here matches the
header, so an overscroll bounce blends in instead of flashing white. */
html { background-color: var(--charcoal); }
/* The colour-match above covers the canvas per spec, but on macOS trackpads
Chrome's elastic bounce past the top can still show through underneath the
fixed header regardless — that reveal doesn't reliably paint with the
document's own background in every case. Stopping the bounce itself is the
more direct fix: nothing to reveal if the page never elastically overscrolls. */
html, body { overscroll-behavior-y: none; }
/* -------------------------------------------------------------------------
Header / Nav
------------------------------------------------------------------------- */
.pl-header {
/* position: sticky doesn't work here — Elementor's Theme Builder wraps the
header location in a div sized to exactly fit its content (85px, no
slack), and sticky can only "float" within its own containing block's
height. With zero slack, it scrolls away after the first pixel of scroll.
Fixed positioning sidesteps the containing-block limit entirely; the
.pl-header__spacer below (rendered only when this is active) reserves the
space fixed positioning removes from the document flow. */
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: var(--charcoal);
/* Set explicitly even though every current child sets its own colour: the
scoped reset defaults to --ink, so anything added here later would be
near-invisible on the charcoal bar. Dark surface => light text, always. */
color: var(--cream);
border-bottom: 1px solid rgba(241, 227, 200, 0.12);
}
.pl-header--static { position: static; }
/* WordPress's admin bar pushes the whole page down via `margin-top` on
(32px desktop, 46px on its own <782px breakpoint) — that shifts the
spacer/hero/everything in normal flow, but a `position: fixed` element
ignores ancestor margin entirely and stays glued to the true viewport top.
Result: the header renders 32px too high, and that exact gap sits blank
between the header and the shifted content below it. Only ever visible
logged in (admin-bar is absent for public visitors), but real either way. */
body.admin-bar .pl-header { top: 32px; }
@media screen and (max-width: 782px) {
/* WP core switches its own admin bar to `position: absolute` below this
breakpoint — it scrolls away with the page instead of staying pinned, so
there's no permanently-reserved space for our fixed header to sit under.
Keeping the 46px offset here left a phantom gap (scrolled content
showing through) above the header the moment the page scrolled past
where the admin bar used to be. Resetting to top:0 lets the admin bar
(z-index 99999, ours is 100) simply overlay the header for that first
screen, exactly like it overlays the rest of the page. */
body.admin-bar .pl-header { top: 0; }
}
.pl-header__spacer { height: 85px; }
.pl-header .pl-container {
display: flex;
align-items: center;
justify-content: space-between;
height: 84px;
}
.pl-brand {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--cream);
}
.pl-brand img { height: 52px; width: auto; border-radius: var(--radius-sm); }
.pl-brand__name {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.05rem;
line-height: 1.2;
}
.pl-brand__name span {
display: block;
font-family: var(--font-body);
font-weight: 300;
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
opacity: 0.7;
}
.pl-nav { display: flex; align-items: center; gap: var(--space-md); }
.pl-nav ul { display: flex; gap: 1.75rem; align-items: center; }
.pl-nav a {
color: var(--cream);
font-family: var(--font-heading);
font-size: 0.92rem;
font-weight: 600;
position: relative;
padding: 0.35rem 0;
}
.pl-nav a::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -4px;
height: 2px;
background: var(--rust-pale);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.2s ease;
}
.pl-nav a:hover::after,
.pl-nav .pl-nav__has-children:hover a::after { transform: scaleX(1); }
/* .pl-nav a's own padding/position rules above win over .pl-btn by specificity — restore button styling explicitly */
.pl-nav .pl-btn { padding: 0.9rem 1.9rem; position: static; }
.pl-nav .pl-btn::after { display: none; }
.pl-nav__has-children { position: relative; }
.pl-nav__children {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: var(--charcoal);
border: 1px solid rgba(241,227,200,0.15);
border-radius: var(--radius-sm);
padding: 0.5rem;
min-width: 200px;
box-shadow: var(--shadow-card);
opacity: 0;
visibility: hidden;
translate: 0 6px;
transition: opacity 0.15s ease, translate 0.15s ease;
}
.pl-nav__has-children:hover .pl-nav__children { opacity: 1; visibility: visible; translate: 0 0; }
.pl-nav__children a { display: block; padding: 0.6rem 0.9rem; border-radius: var(--radius-sm); font-weight: 500; }
.pl-nav__children a:hover { background: rgba(241,227,200,0.08); }
.pl-nav__children a::after { display: none; }
.pl-nav__toggle { display: none; background: none; border: none; color: var(--cream); font-size: 1.6rem; cursor: pointer; }
@media (max-width: 900px) {
.pl-nav { position: fixed; inset: 84px 0 0 0; background: var(--charcoal); flex-direction: column; padding: var(--space-md) 1.5rem; transform: translateX(100%); transition: transform 0.25s ease; overflow-y: auto; }
.pl-nav.pl-open { transform: translateX(0); }
.pl-nav ul { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
.pl-nav ul > li { width: 100%; border-bottom: 1px solid rgba(241,227,200,0.1); }
.pl-nav a { display: block; padding: 1rem 0; }
.pl-nav .pl-btn { margin-top: 1rem; width: 100%; justify-content: center; }
.pl-nav__children { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: none; background: rgba(0,0,0,0.15); display: none; }
.pl-nav__has-children.pl-open .pl-nav__children { display: block; }
.pl-nav__toggle { display: block; }
}
/* -------------------------------------------------------------------------
Hero
------------------------------------------------------------------------- */
.pl-hero {
background: radial-gradient(120% 140% at 50% 0%, var(--maroon-light) 0%, var(--maroon) 55%, #2c150e 100%);
color: var(--cream);
padding: var(--space-xl) 0 calc(var(--space-xl) + 40px);
text-align: center;
overflow: hidden;
}
.pl-hero .pl-container { position: relative; z-index: 1; max-width: 860px; }
.pl-hero__logo { width: 190px; margin: 0 auto var(--space-md); filter: drop-shadow(0 18px 30px rgba(0,0,0,0.45)); }
.pl-hero h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); margin-bottom: var(--space-sm); }
.pl-hero p.pl-lead { font-size: 1.15rem; font-weight: 300; color: var(--cream-dim); max-width: 620px; margin: 0 auto var(--space-md); }
.pl-hero__ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: var(--space-sm); }
.pl-hero__ridge {
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 90px;
background: var(--cream-bg);
clip-path: polygon(0 100%, 0 55%, 8% 62%, 18% 40%, 30% 60%, 42% 30%, 55% 58%, 68% 20%, 78% 50%, 90% 35%, 100% 55%, 100% 100%);
}
.pl-hero.pl-hero--sub { padding: calc(var(--space-lg) + 20px) 0 calc(var(--space-lg) + 60px); }
.pl-breadcrumb { font-size: 0.85rem; color: var(--cream-dim); margin-bottom: var(--space-sm); }
.pl-breadcrumb a:hover { text-decoration: underline; }
/* -------------------------------------------------------------------------
Trust strip
------------------------------------------------------------------------- */
.pl-trust-strip { background: var(--charcoal); color: var(--cream); padding: 1.75rem 0; }
.pl-trust-strip .pl-container {
display: flex; flex-wrap: wrap; gap: 1.5rem;
justify-content: space-between; align-items: center;
font-family: var(--font-heading); font-size: 0.88rem; font-weight: 600;
letter-spacing: 0.03em;
}
.pl-trust-strip .pl-item { display: flex; align-items: center; gap: 0.6rem; opacity: 0.92; }
/* --rust-light on charcoal is ~1.6:1 — the icons were all but invisible.
--rust-pale is the same accent lifted to read on a dark bar. */
.pl-trust-strip .pl-item svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--rust-pale); }
/* -------------------------------------------------------------------------
Section helpers
------------------------------------------------------------------------- */
.pl-section { padding: var(--space-xl) 0; }
/* Bleed layouts supply their own spacing and the photo must touch the section
edges, so the standard vertical padding is removed. */
.pl-section--flush { padding: 0; }
/* For a mockup section that got split into two widgets (a checklist grid that
used to sit inside the same section as the copy above it) — each half's own
full .pl-section padding would otherwise stack into a doubled gap at the
seam. 1.25rem each side sums to the mockup's original ~2.5rem internal gap. */
.pl-section--flush-bottom { padding-bottom: 1.25rem; }
.pl-section--flush-top { padding-top: 1.25rem; }
.pl-section--cream { background: var(--cream-bg); color: var(--ink); }
.pl-section--charcoal { background: var(--charcoal); color: var(--cream); }
.pl-section--rust { background: var(--rust); color: var(--cream); }
.pl-section--olive { background: var(--olive-gray); color: var(--cream); }
.pl-section--maroon { background: var(--maroon); color: var(--cream); }
.pl-section-head { max-width: 680px; margin: 0 auto var(--space-lg); text-align: center; }
.pl-section-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.pl-section-head p { opacity: 0.85; font-size: 1.05rem; }
/* -------------------------------------------------------------------------
Services feature grid (cards)
------------------------------------------------------------------------- */
.pl-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 1000px) { .pl-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pl-card-grid { grid-template-columns: 1fr; } }
.pl-service-card {
background: var(--maroon);
border-radius: var(--radius-md);
overflow: hidden;
color: var(--cream);
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pl-service-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -14px rgba(36,22,17,0.5); }
.pl-service-card .pl-thumb {
aspect-ratio: 4/3;
background: linear-gradient(150deg, var(--rust), var(--maroon-light));
display: flex; align-items: center; justify-content: center;
color: var(--cream); opacity: 0.9;
overflow: hidden;
position: relative;
}
.pl-service-card .pl-thumb svg { width: 42px; height: 42px; }
.pl-service-card .pl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pl-service-card .pl-body { padding: 1.4rem 1.5rem 1.7rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.pl-service-card h3 { font-size: 1.15rem; margin: 0; }
.pl-service-card p { font-size: 0.92rem; color: var(--cream-dim); margin: 0; flex: 1; }
.pl-service-card .pl-link { font-family: var(--font-heading); font-size: 0.85rem; font-weight: 700; color: var(--cream); display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; }
/* whole card is the click target — the ::after stretches the existing link
over the card, so there's still just one link and one focus stop for
keyboard/screen-reader users (nesting an around the card would be invalid) */
/* Whole-card click target. Opt-in via the widget's "Make whole card clickable"
switch, so a card without a link doesn't get a pointer cursor for nothing.
The ::after stretches the EXISTING link over the card — there's still one
link and one focus stop, which wrapping the card in an would ruin. */
.pl-service-card { position: relative; }
.pl-service-card--clickable { cursor: pointer; }
.pl-service-card--clickable .pl-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pl-service-card--clickable:focus-within { outline: 2px solid var(--rust-pale); outline-offset: 3px; }
.pl-service-card--clickable .pl-link:focus-visible { outline: none; }
.pl-service-card .pl-link svg { width: 16px; height: 16px; transition: translate 0.2s ease; }
.pl-service-card:hover .pl-link svg { translate: 4px 0; }
/* -------------------------------------------------------------------------
Alternating feature block (used sparingly)
------------------------------------------------------------------------- */
.pl-media--contained { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.pl-media--contained.pl-reverse .pl-media { order: 2; }
.pl-media--contained .pl-media {
aspect-ratio: 4/3;
border-radius: var(--radius-md);
background: linear-gradient(135deg, var(--rust-light), var(--maroon));
position: relative;
overflow: hidden;
box-shadow: var(--shadow-card);
}
.pl-media--contained .pl-media img { width: 100%; height: 100%; object-fit: cover; }
.pl-media--contained .pl-media.pl-placeholder { display: flex; align-items: center; justify-content: center; color: var(--cream); }
.pl-media--contained h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
@media (max-width: 800px) {
.pl-media--contained, .pl-media--contained.pl-reverse { grid-template-columns: 1fr; }
.pl-media--contained.pl-reverse .pl-media { order: 0; }
}
/* -------------------------------------------------------------------------
Edge-to-edge asymmetric split
Photo bleeds off the viewport edge and takes the larger share, stretching
to whatever height the copy needs — so a long text column can never leave
the image floating in dead space the way a fixed-aspect box does.
------------------------------------------------------------------------- */
.pl-media--bleed { display: grid; grid-template-columns: 1.06fr 0.94fr; align-items: stretch; gap: 0; }
.pl-media--bleed.pl-img-right { grid-template-columns: 0.94fr 1.06fr; }
.pl-media--bleed.pl-img-right .pl-bleed__media { order: 2; }
.pl-bleed__media { position: relative; min-height: 440px; overflow: hidden; }
.pl-bleed__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pl-bleed__copy { display: flex; flex-direction: column; justify-content: center; padding: var(--space-lg) clamp(1.5rem, 3.5vw, 3.5rem); }
.pl-bleed__copy .pl-bleed__inner { max-width: 560px; }
.pl-bleed__copy h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
/* keep the copy's outer edge lined up with the site container */
.pl-media--bleed:not(.pl-img-right) .pl-bleed__copy { padding-right: max(1.5rem, calc((100vw - var(--container)) / 2 + 1.5rem)); }
.pl-media--bleed.pl-img-right .pl-bleed__copy { padding-left: max(1.5rem, calc((100vw - var(--container)) / 2 + 1.5rem)); align-items: flex-end; }
.pl-media--bleed.pl-img-right .pl-bleed__copy .pl-bleed__inner { margin-left: auto; }
@media (max-width: 880px) {
.pl-media--bleed, .pl-media--bleed.pl-img-right { grid-template-columns: 1fr; }
.pl-media--bleed.pl-img-right .pl-bleed__media { order: 0; }
.pl-bleed__media { min-height: 280px; }
.pl-bleed__copy,
.pl-media--bleed:not(.pl-img-right) .pl-bleed__copy,
.pl-media--bleed.pl-img-right .pl-bleed__copy { padding: var(--space-md) 1.5rem; align-items: stretch; }
.pl-bleed__copy .pl-bleed__inner { max-width: none; margin: 0; }
}
/* -------------------------------------------------------------------------
Overlapping layered card
Large photo with the copy card lapping over its edge. Only used where the
copy is short — a long block would outgrow the photo it sits on.
------------------------------------------------------------------------- */
.pl-media--overlap { position: relative; padding: var(--space-lg) 1.5rem; }
.pl-overlap__media { position: relative; width: 70%; aspect-ratio: 16/10; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); }
.pl-media--overlap.pl-img-right .pl-overlap__media { margin-left: auto; }
.pl-overlap__media img { width: 100%; height: 100%; object-fit: cover; }
.pl-overlap__card {
position: absolute; top: 50%; transform: translateY(-50%);
width: 46%; padding: 2.5rem;
border-radius: var(--radius-md);
box-shadow: 0 28px 60px -18px rgba(36,22,17,0.55);
background: var(--cream-bg); color: var(--ink);
}
.pl-media--overlap:not(.pl-img-right) .pl-overlap__card { right: 1.5rem; }
.pl-media--overlap.pl-img-right .pl-overlap__card { left: 1.5rem; }
.pl-overlap__card h2 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
.pl-overlap__card p { font-size: 0.95rem; }
.pl-overlap__card p:last-child { margin-bottom: 0; }
.pl-overlap__card .pl-eyebrow { color: var(--rust); }
/* on a light section the card inverts, so it reads as a separate plane */
.pl-section--cream .pl-overlap__card { background: var(--charcoal); color: var(--cream); }
.pl-section--cream .pl-overlap__card p { color: var(--cream-dim); }
.pl-section--cream .pl-overlap__card .pl-eyebrow { color: var(--rust-pale); }
/* .pl-contact always has its own fixed charcoal background (like .pl-overlap__card,
it inverts regardless of the section token) — the general section-token eyebrow
rule above was colouring it rust, which reads poorly against the dark panel
underneath. Same 3-class-specificity pattern as the overlap-card rule above so
it wins regardless of source order or which section token wraps it. */
.pl-scope .pl-contact .pl-eyebrow { color: var(--rust-pale); }
/* Mobile: the side-by-side overlap can't survive a narrow column, so the photo
becomes a full-bleed bed and the card floats on top of it with the photo
showing on all four sides. Keeps the layered intent instead of collapsing to
a timid -3rem nudge, and it's immune to how long the copy runs. */
@media (max-width: 900px) {
.pl-media--overlap {
position: relative;
padding: 5.25rem 1.5rem 3.25rem; /* keeps the container's side gutter */
overflow: hidden;
}
.pl-overlap__media,
.pl-media--overlap.pl-img-right .pl-overlap__media {
position: absolute; inset: 0;
width: auto; height: auto; margin: 0;
aspect-ratio: auto; border-radius: 0; box-shadow: none;
}
.pl-overlap__media img { width: 100%; height: 100%; object-fit: cover; }
/* scrim so a cream card still separates from a light photo */
.pl-overlap__media::after {
content: ""; position: absolute; inset: 0;
background: rgba(36,22,17,0.32);
}
.pl-overlap__card,
.pl-media--overlap:not(.pl-img-right) .pl-overlap__card,
.pl-media--overlap.pl-img-right .pl-overlap__card {
/* relative + z-index, NOT static: the photo bed above is absolutely
positioned, so an in-flow card would paint underneath it */
position: relative; z-index: 1;
transform: none; width: auto;
left: auto; right: auto; margin: 0;
box-shadow: 0 30px 64px -20px rgba(0,0,0,0.75);
}
}
/* -------------------------------------------------------------------------
Before / After showcase
------------------------------------------------------------------------- */
.pl-showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .pl-showcase { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pl-showcase { grid-template-columns: 1fr; } }
.pl-showcase__card {
border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card);
/* was --charcoal, identical to this section's own background — the card had
no visible edge and the caption looked like it was floating loose on the
page. Lighter fill + hairline border gives it a boundary against section-charcoal. */
background: var(--charcoal-light);
border: 1px solid rgba(241,227,200,0.14);
}
.pl-showcase__media { aspect-ratio: 4/3; overflow: hidden; background: var(--charcoal); position: relative; }
.pl-showcase__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-showcase__card .pl-caption { padding: 1rem 1.2rem 1.3rem; }
.pl-showcase__card .pl-caption .pl-cat { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-dim); }
.pl-showcase__card .pl-caption p { color: var(--cream-dim); font-size: 0.9rem; margin: 0.25rem 0 0; }
/* -------------------------------------------------------------------------
Before / After (single two-image comparison section)
------------------------------------------------------------------------- */
.pl-before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 700px) { .pl-before-after { grid-template-columns: 1fr; } }
.pl-before-after__pane {
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
border-radius: var(--radius-md);
background: var(--charcoal);
margin: 0;
}
.pl-before-after__pane img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-before-after__badge {
position: absolute;
top: 0.75rem;
left: 0.75rem;
z-index: 1;
font-family: var(--font-heading);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--cream);
background: rgba(70, 59, 50, 0.7);
padding: 0.3rem 0.65rem;
border-radius: 999px;
}
/* .pl-scope p's reset (margin: 0 0 var(--space-sm)) outranks a single-class
selector — an element selector plus a class beats a class alone. Prefixed
with .pl-scope to match that specificity, or this margin silently loses. */
.pl-scope .pl-before-after__caption { text-align: center; font-size: 0.9rem; margin: var(--space-md) 0 0; }
.pl-section--charcoal .pl-before-after__caption,
.pl-section--rust .pl-before-after__caption,
.pl-section--maroon .pl-before-after__caption,
.pl-section--image .pl-before-after__caption { color: var(--cream-dim); }
.pl-scope .pl-note {
/* v2: was ink at 55% opacity (~2:1 contrast on cream) — now a plain,
slightly muted solid tone that still reads as de-emphasized. */
text-align: center; font-size: 0.85rem; color: var(--charcoal);
margin: var(--space-md) 0 0;
}
/* Used on both light and dark sections. The charcoal default is the cream
pairing; on a dark section it was being fixed case-by-case with an inline
style, and the ones that got missed rendered near-invisible. Handled here
so it can't be forgotten on the next section that uses it. */
.pl-section--charcoal .pl-note,
.pl-section--rust .pl-note,
.pl-section--maroon .pl-note,
.pl-section--image .pl-note { color: var(--cream-dim); }
/* -------------------------------------------------------------------------
Values / promise strip
------------------------------------------------------------------------- */
.pl-value-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 800px) { .pl-value-cols { grid-template-columns: 1fr; } }
.pl-value-col { text-align: center; }
.pl-value-col .pl-icon {
width: 56px; height: 56px; margin: 0 auto 1rem;
border-radius: 50%; border: 2px solid var(--rust);
display: flex; align-items: center; justify-content: center;
color: var(--rust);
}
.pl-value-col .pl-icon svg { width: 26px; height: 26px; }
.pl-value-col h3 { font-size: 1.05rem; }
.pl-value-col p { font-size: 0.92rem; color: var(--charcoal); }
/* This block appears on BOTH cream and dark sections. The defaults above are
the cream pairing; on a dark section --charcoal body text lands at 1:1
against a --charcoal background (i.e. invisible), so both the copy and the
icon have to flip. */
.pl-section--charcoal .pl-value-col p,
.pl-section--rust .pl-value-col p,
.pl-section--maroon .pl-value-col p,
.pl-section--image .pl-value-col p { color: var(--cream-dim); }
.pl-section--charcoal .pl-value-col .pl-icon,
.pl-section--rust .pl-value-col .pl-icon,
.pl-section--maroon .pl-value-col .pl-icon,
.pl-section--image .pl-value-col .pl-icon { border-color: var(--rust-pale); color: var(--rust-pale); }
/* -------------------------------------------------------------------------
Services landing — category list
------------------------------------------------------------------------- */
.pl-category-row {
display: grid; grid-template-columns: 220px 1fr auto;
gap: 2rem; align-items: center;
padding: 2rem 0; border-bottom: 1px solid rgba(36,22,17,0.12);
}
.pl-category-row:last-child { border-bottom: none; }
.pl-category-row .pl-num { font-family: var(--font-heading); font-size: 0.85rem; font-weight: 700; color: var(--rust); letter-spacing: 0.08em; }
.pl-category-row .pl-thumb { width: 100%; aspect-ratio: 16/10; border-radius: var(--radius-md); background: linear-gradient(140deg, var(--rust), var(--maroon)); display: flex; align-items: center; justify-content: center; color: var(--cream); box-shadow: var(--shadow-card); overflow: hidden; position: relative; }
.pl-category-row .pl-thumb svg { width: 32px; height: 32px; }
.pl-category-row .pl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pl-category-row h3 { font-size: 1.3rem; margin-bottom: 0.4rem; }
.pl-category-row p { font-size: 0.95rem; opacity: 0.8; margin-bottom: 0; max-width: 46ch; }
@media (max-width: 800px) {
.pl-category-row { grid-template-columns: 1fr; text-align: left; }
.pl-category-row .pl-cta { justify-self: start; }
}
/* -------------------------------------------------------------------------
Sub-service list (used on service sub-pages)
------------------------------------------------------------------------- */
.pl-detail-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
/* a card that spans the full row when the grid has an odd card out */
.pl-detail-card.pl-span-2 { grid-column: span 2; }
@media (max-width: 700px) {
.pl-detail-cards { grid-template-columns: 1fr; }
/* the span MUST be cleared here — a span-2 item against a 1-column track
makes the browser generate an implicit second column, which silently
re-creates the two-column layout and leaves the grid narrower than its
container (uneven auto-sized tracks). */
.pl-detail-card.pl-span-2 { grid-column: auto; }
}
.pl-detail-card {
background: var(--cream-bg); border: 1px solid rgba(36,22,17,0.12);
border-radius: var(--radius-md); padding: 1.5rem;
/* pinned regardless of enclosing section — this card always has its own
light background, so its text must always be the dark-on-cream pair,
never inherited from a dark section wrapping it */
color: var(--ink);
}
.pl-detail-card h4 { font-size: 1.05rem; display: flex; align-items: center; gap: 0.6rem; color: var(--ink); }
.pl-detail-card h4 svg { width: 20px; height: 20px; color: var(--rust); flex-shrink: 0; }
.pl-detail-card p { font-size: 0.92rem; opacity: 0.8; margin: 0; color: var(--ink); }
/* -------------------------------------------------------------------------
Contact form
------------------------------------------------------------------------- */
.pl-contact {
display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
background: var(--charcoal); color: var(--cream);
border-radius: var(--radius-md); padding: var(--space-lg);
box-shadow: var(--shadow-card);
}
@media (max-width: 860px) { .pl-contact { grid-template-columns: 1fr; padding: var(--space-md); } }
/* Cognito's own mounted