/* ==========================================================================
   PES Homepage / Service Page — scoped styles
   Loaded only on page-pes-homepage.php and page-pes-servicepage.php

   Sizing model: the Figma file is a 1728px-wide desktop board. --u is one
   "Figma pixel" expressed as a share of the viewport, so calc(var(--u) * N)
   renders at EXACTLY N px when the viewport is 1728px wide (edge of board =
   edge of screen), and scales proportionally above/below that — clamped
   where a value shouldn't shrink below readable or grow past the design.
   ========================================================================== */

:root {
    --u: calc(100vw / 1728);
    --pes-green-dark: #18453b;
    --pes-green-ink: #091a16;
    --pes-teal: #2e806e;
    --pes-teal-hover: #22604f;
    --pes-rust: #98571a;
    --pes-rust-border: #b47d50;
    --pes-rust-tint: rgba(180, 125, 80, .3);
    --pes-cream: #f6f6f6;
    --pes-cream-alt: #f8f8f8;
    --pes-white: #fefefe;
    --pes-font-head: 'Optima', Georgia, serif;
    --pes-font-body: 'Source Sans Pro', 'Montserrat', sans-serif;
    --pes-font-script: 'WindSong', cursive;
}

/* smooth in-page jumps (hero CTA -> #services/#steps/#contact anchors) —
   gated behind the same reduced-motion check the JS reveals use, so it
   doesn't fight a user's OS-level motion preference. */
@media (prefers-reduced-motion: no-preference) {
    html:has(.pes-page) {
        scroll-behavior: smooth;
    }
}

.pes-page {
    background: var(--pes-white);
}

@media only screen and (min-width: 1025px) {
    /* Desktop/laptop only — below this, .pes-hero__content (and the Events
       page header) already carry their own dedicated header-clearance
       padding for the stacked mobile/tablet layout; adding this on top of
       that padding doubled up into a large blank gap above the hero photo. */
    .pes-page {
        padding-top: 75px;
    }
}

.pes-page img {
    max-width: 100%;
    display: block;
}

.pes-page h1,
.pes-page h2,
.pes-page h3,
.pes-page h4,
.pes-page h5,
.pes-page h6 {
    /* Figma: section headings (h1/h2) are Optima Regular — only card/row
       titles (h3, set bold explicitly below) use Optima Bold. text-wrap:
       balance keeps multi-line titles from wrapping into a short ragged
       last line. */
    font-family: var(--pes-font-head);
    font-weight: 400;
    line-height: 1.05;
    margin: 0;
    color: var(--pes-green-dark);
    text-wrap: balance;
}

.pes-page p {
    font-family: var(--pes-font-body);
    color: var(--pes-green-ink);
    line-height: 1.55;
    margin: 0;
    text-wrap: balance;
}

/* Every other run of copy in this theme — card/button/list text, quotes —
   gets the same even-line-length treatment as headings and body copy above.
   Browsers already cap balance to short blocks internally, so this is safe
   to apply broadly; it simply no-ops past that length. */
.pes-page li,
.pes-page blockquote,
.pes-page cite,
.pes-page .pes-eyebrow,
.pes-page .pes-btn span {
    text-wrap: balance;
}

/* ---- shared helpers ---- */
/* .pes-wrap: full-bleed outer gutter only, used where a section has no
   single centered content block (e.g. the hero's left-aligned column). */

.pes-wrap {
    position: relative;
    z-index: 5;
    max-width: 1728px;
    margin: 0 auto;
    padding: 0 20px;
}

/* .pes-box-N: an exact-width content box (N = Figma px at 1728 reference),
   centered, that reaches its full Figma width once the viewport is wide
   enough and otherwise fills the viewport minus a 40px gutter. */

.pes-box-960  { width: min(960px, 100% - 40px);  margin: 0 auto; position: relative; z-index: 5; }
.pes-box-1114 { width: min(1114px, 100% - 40px); margin: 0 auto; position: relative; z-index: 5; }
.pes-box-1156 { width: min(1156px, 100% - 40px); margin: 0 auto; position: relative; z-index: 5; }
.pes-box-1338 { width: min(1338px, 100% - 40px); margin: 0 auto; position: relative; z-index: 5; }
.pes-box-1389 { width: min(1389px, 100% - 40px); margin: 0 auto; position: relative; z-index: 5; }
.pes-box-1452 { width: min(1452px, 100% - 40px); margin: 0 auto; position: relative; z-index: 5; }
.pes-box-1466 { width: min(1466px, 100% - 40px); margin: 0 auto; position: relative; z-index: 5; }
.pes-box-1373 { width: min(1373px, 100% - 40px); margin: 0 auto; position: relative; z-index: 5; }
.pes-box-1242 { width: min(1242px, 100% - 40px); margin: 0 auto; position: relative; z-index: 5; }

.pes-section {
    position: relative;
}

.pes-eyebrow {
    --ls: 3;
    --fs: 20;
    display: block;
    font-family: var(--pes-font-body);
    font-weight: 600;
    letter-spacing: clamp(1.5px, calc(var(--u) * var(--ls)), calc(var(--ls) * 1px));
    text-transform: uppercase;
    font-size: clamp(calc(var(--fs) * .65px), calc(var(--u) * var(--fs)), calc(var(--fs) * 1px));
    color: var(--pes-green-ink);
    margin-bottom: 12px;
}

.pes-script-bg {
    position: absolute;
    z-index: 1;
    font-family: var(--pes-font-script);
    font-weight: 400;
    white-space: nowrap;
    pointer-events: none;
    line-height: 1;
    user-select: none;
}

/* ---- buttons ---- */

.pes-btn {
    --gap: 25;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, calc(var(--u) * var(--gap)), calc(var(--gap) * 1px));
    height: clamp(50px, calc(var(--u) * 65), 65px);
    padding: 0 clamp(16px, calc(var(--u) * 23), 23px);
    border-radius: 10px;
    background: var(--pes-teal);
    color: var(--pes-white) !important;
    font-family: var(--pes-font-body);
    font-weight: 600;
    font-size: clamp(.85rem, calc(var(--u) * 18), 1.125rem);
    letter-spacing: .4px;
    text-transform: capitalize;
    text-align: left;
    line-height: 1.25;
    box-shadow: 0 4px 5px rgba(14, 40, 34, .25);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, background-color .35s ease;
}

/* light sweeps across the button on hover — overflow:hidden above clips it
   to the button's own rounded corners; painted above the icon/label since
   an absolutely-positioned pseudo paints after their static in-flow boxes. */
.pes-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    transition: left .6s ease;
}

.pes-btn:hover::before {
    left: 130%;
}

/* a slow, soft breathing glow on the hero's primary CTA only — draws the
   eye on first load without turning every button on the page into a
   flashing distraction. box-shadow, not scale, so it never nudges layout. */
@keyframes pes-btn-pulse {
    0%, 100% { box-shadow: 0 4px 5px rgba(14, 40, 34, .25), 0 0 0 0 rgba(46, 128, 110, .35); }
    50%      { box-shadow: 0 4px 5px rgba(14, 40, 34, .25), 0 0 0 14px rgba(46, 128, 110, 0); }
}

.pes-hero .pes-btn {
    animation: pes-btn-pulse 2.8s ease-in-out infinite;
}

.pes-hero .pes-btn:hover {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .pes-hero .pes-btn { animation: none; }
    .pes-btn::before { transition: none; }
}

/* Each button sets --w (its Figma width in px) inline; falls back to
   content-driven sizing if omitted. min-width (not width) so it never
   clips if the CMS text runs longer than the Figma copy. */
.pes-btn[style*="--w"] {
    min-width: clamp(180px, calc(var(--u) * var(--w)), calc(var(--w) * 1px));
}

.pes-btn:hover,
.pes-btn:focus {
    background: var(--pes-teal-hover);
    color: var(--pes-white) !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 18px rgba(14, 40, 34, .28);
}

.pes-btn--dark {
    background: var(--pes-green-dark);
}

.pes-btn--dark:hover,
.pes-btn--dark:focus {
    background: #0e2b24;
}

.pes-btn__icon {
    flex: none;
    width: clamp(18px, calc(var(--u) * 35), 35px);
    height: clamp(18px, calc(var(--u) * 35), 35px);
}

.pes-btn__icon img {
    width: 100%;
    height: 100%;
    filter: brightness(0) invert(1);
}

.pes-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(16px, calc(var(--u) * 35), 35px);
    align-items: center;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.pes-hero {
    position: relative;
    height: clamp(560px, calc(var(--u) * 925), 925px);
    /* NOT overflow:hidden — the readability glow behind .pes-hero__content
       (::before, further below) deliberately bleeds past that box's own
       edges so it can fully back text of any length, and its blur needs
       real room past that edge to fade out. Clipping at this level cut
       that blur off mid-fade, showing as a hard edge along the sides of
       the hero once the page settled. The one thing that actually NEEDS
       cropping — the oversized decorative ellipse graphic — gets its own
       dedicated overflow:hidden wrapper (.pes-hero__crop) below instead. */
    background: #efe6da;
    /* the theme's base stylesheet puts padding-top on every bare <section>
       (up to 80px at wide viewports) — reset it, this section positions
       its own content via .pes-hero__inset instead. */
    padding: 0;
}

.pes-hero__crop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

@media only screen and (max-width: 1024px) {
    /* Below 1024px, the split desktop layout (absolutely-positioned text
       column pinned toward its 543px max-width, image forced into
       whatever space is left) runs out of room — the column stays wide
       while the photo's subject gets crowded/cropped into a narrow sliver
       next to it. Switch to the same clean full-width stacked layout used
       on phones well before that gets cramped, rather than only at 640px.
       No top padding here — .pes-hero__content (below) already carries its
       own top padding for header clearance; stacking both here AND there
       doubled it to dead space before any text. */
    .pes-hero { height: auto; min-height: 640px; padding: 0 0 60px; }
}

.pes-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.pes-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pes-hero__content::before {
    /* readability scrim, scoped to the text itself rather than the whole
       hero — a soft cream glow that bleeds out from behind the heading/
       body/button and fades to nothing, so the photo stays fully visible
       everywhere else instead of getting washed out edge-to-edge.
       Negative z-index keeps it behind this element's own text/button
       (its stacking-context children) while still painting above
       .pes-hero__bg (z-index:0), since .pes-hero__content itself is
       z-index:5.

       A hand-tuned multi-stop radial-gradient once showed a visible ring
       here (worse against the service hero's high-contrast green-lawn
       photo) — that's Mach banding: the eye perceives an edge wherever a
       gradient's RATE of change shifts between stops, even though the
       color values are continuous. A real Gaussian blur has no such
       discontinuity, so a plain solid-color shape, blurred heavily, is
       what actually produces a clean falloff.

       A FIXED-size circle (the earlier approach here) covered short copy
       fine but not longer headlines/paragraphs — a 3-line headline or a
       long body paragraph could run past the circle's edge and lose its
       backing glow entirely. inset (negative = bleed outward) instead
       sizes this to the text's OWN rendered box, so it always fully backs
       whatever length the copy happens to be, on every page and at every
       width, with no per-breakpoint tuning needed. A blurred solid shape
       doesn't have the gradient-squash problem a stretched ellipse would
       — the blur softens evenly regardless of the box's aspect ratio, so
       this is safe to size non-square. */
    content: '';
    position: absolute;
    z-index: -1;
    inset: -60px;
    border-radius: 60px;
    background: rgba(239, 230, 218, .95);
    filter: blur(clamp(50px, calc(var(--u) * 80), 80px));
    pointer-events: none;
    /* On a forced reload (e.g. Safari's own "reduce privacy protections"
       reload), this heavy a blur can briefly paint before its GPU
       compositing layer catches up — the shape's sharp true edge flashes
       for a moment before the blur "arrives" a beat later. will-change
       alone didn't fully stop it in Safari specifically, so this stacks
       the older, more forceful translateZ/backface-visibility layer-
       promotion hack on top — belt and suspenders for the same goal:
       get this on its own GPU layer before first paint, not after. */
    will-change: filter;
    transform: translateZ(0);
    backface-visibility: hidden;
}

@media only screen and (min-width: 1025px) {
    /* Desktop/laptop only — lighter glow so the photo shows through more.
       Mobile/tablet keep the original, stronger .95 above: their hero photos
       sit directly behind smaller body text at a tighter column width, so
       they need the fuller scrim for reliable contrast. */
    .pes-hero__content::before {
        background: rgba(239, 230, 218, .45);
    }
}

.pes-hero__ellipse {
    /* Home hero: Figma shows this asset through an 872x929 window, but the
       SVG's own native size is 1372x1429 (confirmed via its viewBox) —
       position the full asset so it's centered on that window instead of
       resizing it, which would distort its aspect ratio. The service hero
       uses a DIFFERENT ellipse SVG with its own native size (1590x1482),
       so these are overridable per-instance via inline custom properties. */
    --ew: 1372;
    --el: -392;
    --et: -192;
    position: absolute;
    left: calc(var(--u) * var(--el));
    top: calc(var(--u) * var(--et));
    width: calc(var(--u) * var(--ew));
    z-index: 1;
    opacity: .9;
    pointer-events: none;
}

.pes-hero__script {
    --sl: 446;
    --st: 564;
    right:0;
    top: calc(var(--u) * var(--st));
    font-size: clamp(4rem, calc(var(--u) * 385), 24rem);
    color: #fff;
    opacity: .2;
}

@media only screen and (max-width: 1024px) {
    .pes-hero__script { left: unset; right:0px; top: auto; bottom: -50px; }
}

.pes-hero__content {
    /* Figma: left:144 (204 on the service page); top: calc(50% + 83px);
       translateY(-50%) — positions directly against .pes-hero (its nearest
       positioned ancestor), centering the block's OWN height around a point
       offset below true center so it's correct at any copy length. */
    --inset: 144;
    --y-offset: 40;
    position: absolute;
    left: clamp(20px, calc(var(--u) * var(--inset)), calc(var(--inset) * 1px));
    top: calc(50% + var(--u) * var(--y-offset));
    transform: translateY(-50%);
    z-index: 5;
    /* explicit, not just relying on the visible default — the readability
       glow behind this text (::before) bleeds outward past this box's own
       edges via a negative inset, so anything that clips this box's
       overflow would cut that bleed short. */
    overflow: visible;
    /* wider than the 543px Figma spec for the body copy — the h1 has no
       width constraint of its own, so it was inheriting the same narrow
       column as the paragraph beneath it and wrapping small/cramped on
       longer headlines. The paragraph has its own separate, narrower
       max-width (below) independent of this column, so widening this
       only gives the heading more room — it doesn't widen the body text. */
    width: min(700px, calc(100% - 40px));
}

.pes-hero--wide .pes-hero__content {
    /* Our Process only — its headline runs longer than the other hero
       pages, so it gets the wider column; the rest keep the 700px width
       above. */
    width: min(900px, calc(100% - 40px));
}

@media only screen and (max-width: 1024px) {
    /* position:relative (not static!) — this still flows normally like
       static (no top/left offset applied), but stays a positioned element
       so its z-index:5 keeps working. .pes-hero__bg is position:absolute
       with z-index:0, and per CSS stacking rules ANY positioned element
       paints above plain in-flow content regardless of z-index value —
       so with position:static here (no longer "positioned" at all), the
       background was painting over this text completely. */
    .pes-hero__content { position: relative; left: 0; padding: 110px 20px 0; transform: none; width: 100%; max-width: 900px; }
}

/* .secondary_toolbar (the green reviews bar) only turns on at min-width:64em
   (1024px) — the same number this section's own max-width:1024px stacked
   layout switches off at. Right at that width (an iPad Pro 12.9" in
   portrait: 1024px exactly) the fixed header is tallest (118px, both bars)
   while this section still assumes the shorter mobile header (110px), so
   the headline's top edge clipped under the reviews bar. Bump clearance
   just for that narrow band. */
@media only screen and (min-width: 1000px) and (max-width: 1024px) {
    .pes-hero__content { padding-top: 150px; }
}

.pes-hero h1 {
    font-size: clamp(2.15rem, calc(var(--u) * 86), 5.4rem);
    text-transform: capitalize;
    margin-bottom: clamp(16px, calc(var(--u) * 20), 20px);
}

.pes-hero p.pes-hero__body {
    /* clamp floor: calc(var(--u)*473) alone has no minimum, so it shrinks
       toward 0 at narrow widths — below the ~1090px this reaches its own
       320px floor, the stacked layout (above) already caps the whole
       content column at 600px, so this only needs a sane minimum, not the
       literal Figma ratio. */
    max-width: clamp(320px, calc(var(--u) * 473), 473px);
    font-size: clamp(1rem, calc(var(--u) * 22), 1.375rem);
    line-height: calc(32 / 22);
    margin-bottom: clamp(24px, calc(var(--u) * 40), 40px);
}

@media only screen and (max-width: 1024px) {
    .pes-hero p.pes-hero__body { max-width: 100%; }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* tablet only (phones keep the full-width line above) — at 100% width
       here the paragraph's tail ran out toward the edge of the readability
       glow behind it, where its blur has already faded out, so the text
       lost contrast against the photo. A narrower column keeps the whole
       paragraph within the glow's solid center instead of its soft edge. */
    .pes-hero p.pes-hero__body { max-width: 60vw; }
}

/* ==========================================================================
   ABOUT / SPLIT BLOCK (image + copy, reused shape for About / Realtors / CTA)
   ========================================================================== */

.pes-split {
    display: flex;
    flex-direction: column;
    gap: clamp(30px, calc(var(--u) * 100), 100px);
    align-items: center;
    justify-content: center;
}

@media only screen and (min-width: 900px) {
    .pes-split { flex-direction: row; }
    .pes-split--reverse { flex-direction: row-reverse; }
}

.pes-split__media {
    --media-h: 608;
    --media-w: 820;
    flex: 0 0 auto;
    width: 100%;
    max-width: 560px;
    position: relative;
    /* Figma: rounded-bl + rounded-tr only (top-right / bottom-left) */
    border-radius: 0 clamp(60px, calc(var(--u) * 200), 200px) 0 clamp(60px, calc(var(--u) * 200), 200px);
    overflow: hidden;
    aspect-ratio: var(--media-w) / var(--media-h);
}

@media only screen and (min-width: 900px) {
    /* min(), not a bare calc — every other proportional value in this file
       is capped at its Figma-reference px value once the viewport passes
       1728px; this one wasn't, so above that width it kept growing while
       .pes-split__body (flex:1, no floor) got squeezed to make room —
       body text crushed into a ~290px column on a 2200px-wide screen. */
    .pes-split__media { width: min(calc(var(--u) * var(--media-w)), calc(var(--media-w) * 1px)); max-width: none; }
    .pes-split--reverse .pes-split__media { width: min(calc(var(--u) * var(--media-w)), calc(var(--media-w) * 1px)); }
}

.pes-split__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pes-split__body {
    --body-w: 532;
    flex: 1 1 auto;
    width: 100%;
}

@media only screen and (min-width: 900px) {
    /* clamp floor: calc(var(--u)*var(--body-w)) alone has no minimum, so
       right after this breakpoint activates (row layout + this cap, both
       gated the same way) it's briefly too narrow — e.g. ~277px at exactly
       900px for the default 532 reference — before --u scales it back up
       to something comfortable. */
    .pes-split__body { max-width: clamp(320px, calc(var(--u) * var(--body-w)), calc(var(--body-w) * 1px)); }
}

.pes-split__body h2 {
    font-size: clamp(1.9rem, calc(var(--u) * 55), 3.4rem);
    margin-bottom: clamp(14px, calc(var(--u) * 20), 20px);
}

.pes-split__body p {
    font-size: clamp(.95rem, calc(var(--u) * 18), 1.125rem);
    line-height: calc(28 / 18);
    margin-bottom: clamp(14px, calc(var(--u) * 18), 18px);
}

.pes-split__body p:last-of-type {
    margin-bottom: clamp(24px, calc(var(--u) * 40), 40px);
}

/* ==========================================================================
   BANNER STRIP (textured full-bleed statement band)
   ========================================================================== */

.pes-banner {
    position: relative;
    text-align: center;
    color: #fff;
    padding: clamp(65px, calc(var(--u) * 130), 130px) 0;
    overflow: hidden;
    background-color: var(--pes-rust);
}

.pes-banner__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.pes-banner__bg img {
    width: 100%;
    height: 100%;
    /* texture, not a photo with a subject — stretch instead of cropping,
       since the asset (2:1) is much squarer than this banner (~4:1) and
       object-fit:cover was cutting off most of Figma's gradient spread */
    object-fit: fill;
}

.pes-banner__script {
    /* Centered on the section and anchored to the bottom edge (bleeding
       under it — .pes-banner has overflow:hidden, so this is always
       clipped cleanly) rather than the old Figma-literal offset-from-center
       placement, which positioned this by the string's own Figma-reference
       width and left it noticeably off-center for any other wording. */
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    font-size: clamp(4rem, calc(var(--u) * 343), 21.5rem);
    color: #fff;
    opacity: .35;
    mix-blend-mode: soft-light;
}

.pes-banner__inner {
    position: relative;
    z-index: 5;
}

.pes-banner h2 {
    color: #fff;
    font-size: clamp(1.9rem, calc(var(--u) * 55), 3.4rem);
    margin-bottom: clamp(14px, calc(var(--u) * 20), 20px);
}

.pes-banner p {
    color: #fff;
    font-size: clamp(1rem, calc(var(--u) * 22), 1.375rem);
    line-height: calc(28 / 22);
}

/* ==========================================================================
   SECTION PADDING (applies the same rhythm Figma uses: py-100 for most
   blocks) — kept generic so every .pes-section gets it.
   ========================================================================== */

.pes-section {
    padding: clamp(65px, calc(var(--u) * 130), 130px) 0;
}

/* ==========================================================================
   SERVICES — homepage grid (4 cards + addon banner)
   ========================================================================== */

.pes-services-head {
    text-align: center;
    max-width: 960px;
    margin: 0 auto clamp(30px, calc(var(--u) * 50), 50px);
}

.pes-services-head h2 {
    font-size: clamp(1.9rem, calc(var(--u) * 55), 3.4rem);
    margin-bottom: clamp(14px, calc(var(--u) * 20), 20px);
}

.pes-services-head p {
    font-size: clamp(1rem, calc(var(--u) * 22), 1.375rem);
    line-height: calc(28 / 22);
}

.pes-services-head:has(p + p) p {
    /* Multi-paragraph bodies (e.g. the Referral page's "why" copy): the
       site-wide text-wrap:balance (.pes-page p) picks each paragraph's
       line-break width independently, based on that paragraph's own
       length. Two centered paragraphs of different lengths then render
       as different-width blocks stacked on top of each other — a
       lopsided/wedge shape instead of a clean rectangle. Reverting to
       plain wrapping here makes every line run the full column width,
       so multi-paragraph bodies stack as one consistent block. Singular
       bodies elsewhere (the common case for this component) are
       untouched and keep their balanced last line. */
    text-wrap: wrap;
}

.pes-services-head p:not(:last-child) {
    /* Paragraph spacing for multi-paragraph bodies — plain margin:0
       (site-wide default) ran every paragraph straight into the next
       with no break at all. */
    margin-bottom: clamp(16px, calc(var(--u) * 24), 24px);
}

.pes-services-grid {
    /* 3 across on desktop — Post-Sale Disposition (the former 4th card)
       moved out into its own addon-style block below, so this grid only
       ever renders 3 cards now. A flex-wrap + min-width approach here
       previously broke unevenly at in-between viewports where the cards'
       min-width floor exceeded the box width — grid's 1fr tracks shrink
       together instead of wrapping, so the row never breaks above the
       mobile breakpoint. */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, calc(var(--u) * 50), 50px);
    margin-bottom: clamp(30px, calc(var(--u) * 50), 50px);
}

@media only screen and (max-width: 1040px) {
    .pes-services-grid { grid-template-columns: repeat(2, 1fr);}
}

@media only screen and (max-width: 640px) {
    .pes-services-grid { grid-template-columns: 1fr; }
}

.pes-service-card {
    /* min-width:0 overrides the grid item's default min-width:auto — without
       it, a card with longer paragraph text refuses to shrink below that
       text's intrinsic width, so the grid's 1fr tracks stop being equal and
       every card (and its circle photo, sized off the card's own width)
       ends up a different size. */
    position: relative;
    min-width: 0;
    min-height: clamp(420px, calc(var(--u) * 637), 637px);
    overflow: hidden;
    border-radius: clamp(12px, calc(var(--u) * 20), 20px);
    /* Figma: the circle photo bleeds to the card's edges — only the text
       below it is inset, so padding lives on the text, not the card. The
       3px left/right replaces what used to be a literal border (now a
       ::before overlay below) so the photo still measures the same. */
    padding: clamp(3px, calc(var(--u) * 3), 3px) clamp(3px, calc(var(--u) * 3), 3px) clamp(20px, calc(var(--u) * 30), 30px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--pes-white);
}

@media only screen and (max-width: 640px) {
    /* min-height above exists to keep cards equal-height across a desktop
       row of 3 — once stacked single-column (see .pes-services-grid's own
       640px breakpoint above), there's no row left to match, so it just
       forces a tall card with a big empty gap under shorter paragraph
       text. Let each card size to its own content instead. Placed after
       the base rule (not inside that earlier breakpoint block) so it
       actually wins the cascade tie instead of being overridden by the
       unconditional rule above it in source order. */
    .pes-service-card { min-height: auto; }
}

.pes-service-card::before {
    /* Figma: this isn't a flat-color border — it's transparent right behind
       the photo, fading in to rgba(180,125,80,.3) by the text below. A
       plain `border` can't do a gradient, so this masks a gradient down to
       just a border-width ring. */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 3px;
    background: linear-gradient(to bottom,
        rgba(180, 125, 80, 0) 0%,
        rgba(180, 125, 80, 0) 40%,
        rgba(180, 125, 80, .3) 70%,
        rgba(180, 125, 80, .3) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.pes-service-card__img {
    /* position:relative + absolute/inset:0 img (below) instead of a plain
       width/height:100% img — a percentage height against this wrapper's
       aspect-ratio-derived (not explicit) height doesn't resolve, so a
       portrait-oriented source photo (home-svc-liquidation.jpg is
       1000x1179, taller than wide, unlike the other three cards' landscape
       photos) fell back to its own intrinsic ratio and stretched the whole
       circle taller than the other three. Absolute positioning removes the
       img from flow entirely so it can never feed back into this box's
       size, whatever the source photo's own aspect ratio is. */
    position: relative;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: visible;
    margin-bottom: clamp(50px, calc(var(--u) * 90), 90px);
    flex: none;
}

/* Both breakpoints below resize this wrapper itself, not the <img> inside
   it — .pes-service-card__icon is positioned (bottom:0, translateY(50%))
   relative to THIS box, so shrinking only the img while leaving the
   wrapper full-size left the icon pinned to the wrapper's original edge,
   detached from the now-smaller visible photo. Ordered widest-max-width
   first so the narrower query correctly wins below 64em, where both are
   true at once. */
@media (max-width: 1350px) {
    .pes-service-card__img {
        width: 56%;
    }
}

@media (max-width: 64em) {
    .pes-service-card__img {
        width: 35%;
    }
}

.pes-service-card__img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.pes-service-card h3 {
    color: var(--pes-rust);
    font-weight: 700;
    font-size: clamp(1.3rem, calc(var(--u) * 30), 1.875rem);
    margin-bottom: clamp(10px, calc(var(--u) * 20), 20px);
    padding: 0 clamp(16px, calc(var(--u) * 30), 30px);
}

.pes-service-card p {
    font-size: clamp(.9rem, calc(var(--u) * 16), 1rem);
    line-height: calc(24 / 16);
    padding: 0 clamp(16px, calc(var(--u) * 30), 30px);
}

.pes-service-card__icon {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    width: clamp(64px, calc(var(--u) * 123), 123px);
    height: clamp(64px, calc(var(--u) * 123), 123px);
    border-radius: 50%;
    background: var(--pes-white);
    z-index: 2;
}

.pes-service-card__icon img {
    /* the icon SVGs have width/height="123" baked into the file itself, so
       without this the <img> always rendered at a fixed 123px — ignoring
       the badge's own responsive clamp above entirely and overflowing
       badly out of its circle at every width where the badge shrinks
       below 123px (i.e. almost everywhere but the widest desktop view). */
    display: block;
    width: 100%;
    height: 100%;
}

.pes-addon {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border: 3px solid var(--pes-rust);
    border-radius: clamp(12px, calc(var(--u) * 20), 20px);
    overflow: hidden;
    background: var(--pes-rust-tint);
    margin-bottom: clamp(30px, calc(var(--u) * 45), 45px);
}

@media only screen and (min-width: 900px) {
    .pes-addon { flex-direction: row; align-items: stretch; min-height: calc(var(--u) * 298); }
}

.pes-addon__body {
    display: flex;
    align-items: center;
    gap: clamp(20px, calc(var(--u) * 50), 50px);
    padding: clamp(24px, calc(var(--u) * 35), 35px) clamp(20px, calc(var(--u) * 50), 50px);
    flex: 1 1 55%;
}

.pes-addon__icon {
    flex: none;
    width: clamp(70px, calc(var(--u) * 123), 123px);
    height: clamp(70px, calc(var(--u) * 123), 123px);
}

.pes-addon__icon img {
    /* icon SVG has width/height="123" baked into the file — without this
       it renders at that fixed size regardless of the wrapper's own
       responsive clamp above. */
    display: block;
    width: 100%;
    height: 100%;
}

.pes-addon__text span.pes-eyebrow {
    color: var(--pes-rust);
}

.pes-addon__text h3 {
    color: var(--pes-rust);
    font-weight: 700;
    font-size: clamp(1.3rem, calc(var(--u) * 30), 1.875rem);
    margin: 6px 0 clamp(10px, calc(var(--u) * 20), 20px);
}

.pes-addon__text p {
    font-size: clamp(.9rem, calc(var(--u) * 16), 1rem);
    line-height: calc(24 / 16);
}

.pes-addon__media {
    position: relative;
    flex: 1 1 45%;
    min-height: 220px;
}

.pes-addon__media img {
    /* absolute + inset so the image's own intrinsic aspect ratio can never
       inflate the flex row's auto-computed height — it just fills whatever
       height the row (driven by min-height / the text side) ends up with */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   SERVICES — service page detailed list (5 rows)
   ========================================================================== */

.pes-service-rows {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, calc(var(--u) * 50), 50px);
}

.pes-service-row {
    display: flex;
    flex-direction: column;
    border: 3px solid var(--pes-rust);
    border-radius: clamp(12px, calc(var(--u) * 20), 20px);
    overflow: hidden;
    background: var(--pes-white);
}

.pes-service-row--addon {
    background: var(--pes-rust-tint);
}

@media only screen and (min-width: 900px) {
    .pes-service-row { flex-direction: row; align-items: stretch; min-height: calc(var(--u) * 298); }
}

.pes-service-row__body {
    display: flex;
    align-items: center;
    gap: clamp(20px, calc(var(--u) * 50), 50px);
    padding: clamp(24px, calc(var(--u) * 53.5), 53.5px) clamp(20px, calc(var(--u) * 50), 50px);
    flex: 1 1 55%;
}

.pes-service-row__icon {
    flex: none;
    width: clamp(64px, calc(var(--u) * 123), 123px);
    height: clamp(64px, calc(var(--u) * 123), 123px);
}

.pes-service-row__icon img {
    /* icon SVG has width/height="123" baked into the file — without this
       it renders at that fixed size regardless of the wrapper's own
       responsive clamp above. */
    display: block;
    width: 100%;
    height: 100%;
}

.pes-service-row__text h3 {
    color: var(--pes-rust);
    font-weight: 700;
    font-size: clamp(1.3rem, calc(var(--u) * 30), 1.875rem);
    margin-bottom: clamp(10px, calc(var(--u) * 20), 20px);
}

.pes-service-row__text p {
    font-size: clamp(.9rem, calc(var(--u) * 18), 1.125rem);
    line-height: calc(28 / 18);
}

@media only screen and (max-width: 899px) {
    /* below .pes-service-row's own row/column breakpoint, the icon sat
       beside the title+paragraph (a row within the row). Stack it above
       instead, so the card reads icon, then title, then paragraph, then
       the photo (.pes-service-row__media, already last in source order
       and already full-width below this same breakpoint). */
    .pes-service-row__body {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

.pes-service-row__media {
    position: relative;
    flex: 1 1 45%;
    min-height: 220px;
    align-self: stretch;
}

.pes-service-row__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   FEATURES GRID — homepage "why us" 2x2 with checkerboard scalloped corners
   ========================================================================== */

.pes-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(20px, calc(var(--u) * 50), 50px);
}

@media only screen and (min-width: 700px) {
    .pes-features {
        grid-template-columns: repeat(2, 1fr);
        column-gap: clamp(24px, calc(var(--u) * 60), 60px);
        row-gap: clamp(24px, calc(var(--u) * 50), 50px);
    }
}

.pes-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(16px, calc(var(--u) * 40), 40px);
    background: var(--pes-white);
    border: 4px solid var(--pes-rust-border);
    padding: clamp(24px, calc(var(--u) * 30), 30px);
    min-height: calc(var(--u) * 300);
}

/* Below the 2-column breakpoint, use one consistent scalloped corner for
   every card (same convention as .pes-features--triple, which is always
   single-column) — the diagonal pairing below only makes visual sense
   once cards actually sit in a 2x2 grid; applied to a single stacked
   column it just reads as an arbitrary mix of corners. */
.pes-feature {
    border-radius: 0 clamp(40px, calc(var(--u) * 100), 100px) 0 clamp(40px, calc(var(--u) * 100), 100px);
}

/* Figma pairs cards diagonally (1st+4th share one corner treatment, 2nd+3rd
   the other), not by row/column — so the rounded corners meet the OPPOSITE
   card's rounded corner across the center gap, and the square corners land
   on the outer edge of the grid. This is NOT a simple nth-child(2n)
   checkerboard. Only applies once the grid is actually 2 columns. */
@media only screen and (min-width: 800px) {
    .pes-feature:nth-child(1),
    .pes-feature:nth-child(4) {
        border-radius: 0 clamp(40px, calc(var(--u) * 100), 100px) 0 clamp(40px, calc(var(--u) * 100), 100px);
    }

    .pes-feature:nth-child(2),
    .pes-feature:nth-child(3) {
        border-radius: clamp(40px, calc(var(--u) * 100), 100px) 0 clamp(40px, calc(var(--u) * 100), 100px) 0;
    }
}

@media only screen and (min-width: 800px) {
    .pes-feature { flex-direction: row; text-align: left; }
}

.pes-feature__icon {
    flex: none;
    width: clamp(90px, calc(var(--u) * 160), 160px);
}

.pes-feature__icon img {
    /* icon SVGs are 160x250 (portrait) with that size baked into the
       file — width:100% + height:auto scales it proportionally to this
       wrapper's own responsive width above instead of rendering at a
       fixed 160x250 regardless of viewport. */
    display: block;
    width: 100%;
    height: auto;
}

.pes-feature h3 {
    font-weight: 700;
    font-size: clamp(1.4rem, calc(var(--u) * 35), 2.2rem);
    line-height: 1.1;
    margin-bottom: clamp(10px, calc(var(--u) * 20), 20px);
}

.pes-feature p {
    font-size: clamp(.95rem, calc(var(--u) * 18), 1.125rem);
    line-height: calc(28 / 18);
}

/* service-page 3-up "why choose us" variant — single scalloped corner, no
   checkerboard, always column layout */

.pes-features--triple {
    grid-template-columns: 1fr;
    gap: clamp(20px, calc(var(--u) * 75), 75px);
}

@media only screen and (min-width: 800px) {
    .pes-features--triple { grid-template-columns: repeat(3, 1fr); }
}

.pes-features--triple .pes-feature {
    flex-direction: column;
    text-align: center;
    border-radius: 0 clamp(40px, calc(var(--u) * 100), 100px) 0 clamp(40px, calc(var(--u) * 100), 100px);
    min-height: calc(var(--u) * 560);
    justify-content: center;
}

.pes-features--triple .pes-feature__icon {
    width: clamp(90px, calc(var(--u) * 160), 160px);
}

/* ==========================================================================
   TESTIMONIAL
   ========================================================================== */

.pes-testimonial {
    text-align: center;
    max-width: 966px;
    margin: 0 auto;
}

.pes-testimonial__quote {
    width: clamp(80px, calc(var(--u) * 140), 140px);
    margin: 0 auto clamp(20px, calc(var(--u) * 30), 30px);
}

.pes-testimonial__track {
    /* every slide shares the same grid cell — grid auto-sizes the row to
       the tallest slide, so switching reviews never jumps the layout, and
       there's no display:none/absolute-positioning fight to keep in sync. */
    display: grid;
}

.pes-testimonial__slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease;
    pointer-events: none;
}

.pes-testimonial__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.pes-testimonial blockquote {
    /* reset the theme's base <blockquote> styling (background-color:#444,
       border-left:1px solid #848484, padding) — this is a plain quote block
       in our design, not the theme's default pull-quote treatment */
    background-color: transparent;
    border-left: none;
    padding: 0;
    font-family: var(--pes-font-head);
    font-size: clamp(1.6rem, calc(var(--u) * 45), 2.8rem);
    line-height: 1.4;
    color: var(--pes-green-dark);
    text-wrap: balance;
    margin: 0 0 clamp(16px, calc(var(--u) * 30), 30px);
    font-style: normal;
}

.pes-testimonial cite {
    display: block;
    font-family: var(--pes-font-body);
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--pes-rust);
    font-style: normal;
    font-size: clamp(1rem, calc(var(--u) * 28), 1.75rem);
}

.pes-testimonial__dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: clamp(20px, calc(var(--u) * 30), 30px);
}

.pes-testimonial__dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--pes-rust);
    background: transparent;
    cursor: pointer;
}

.pes-testimonial__dots button.is-active {
    background: var(--pes-rust);
}

.pes-badges {
    /* Figma pins these to the page edges (62px inset), independent of the
       narrower 966px testimonial column above it — span the full section
       width instead of nesting inside that column. */
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1728px;
    margin: clamp(30px, calc(var(--u) * 50), 50px) auto 0;
    padding: 0 clamp(24px, calc(var(--u) * 62), 62px);
    opacity: .2;
}

.pes-badges img {
    height: clamp(56px, calc(var(--u) * 106), 106px);
    width: auto;
}

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */

.pes-faq {
    position: relative;
    padding: clamp(65px, calc(var(--u) * 130), 130px) 0;
    overflow: hidden;
    color: #fff;
    text-align: center;
    background-color: var(--pes-rust);
}

.pes-faq__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.pes-faq__bg img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.pes-faq__script {
    /* Centered on the section and anchored flush to the bottom edge
       (bleeding under it — .pes-faq has overflow:hidden, so this is always
       clipped cleanly), matching .pes-banner__script. Replaces the old
       Figma-literal left offset, which positioned this by that specific
       word's own rendered width and left it off-center generally. */
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    font-size: clamp(4.5rem, calc(var(--u) * 385), 24rem);
    color: #fff;
    opacity: .35;
    mix-blend-mode: soft-light;
}

.pes-faq h2 {
    position: relative;
    z-index: 5;
    color: #fff;
    font-size: clamp(2rem, calc(var(--u) * 65), 4.1rem);
    max-width: 752px;
    margin: 0 auto clamp(30px, calc(var(--u) * 50), 50px);
}

.pes-faq__list {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, calc(var(--u) * 50), 50px);
    text-align: left;
}

.pes-faq-item {
    border-radius: clamp(10px, calc(var(--u) * 20), 20px);
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(62, 38, 18, .35);
}

.pes-faq-item__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    min-height: clamp(70px, calc(var(--u) * 108), 108px);
    text-align: left;
    background: var(--pes-white);
    border: none;
    cursor: pointer;
    padding: clamp(18px, calc(var(--u) * 30), 30px) clamp(20px, calc(var(--u) * 50), 50px);
    font-family: var(--pes-font-head);
    font-weight: 400;
    font-size: clamp(1.2rem, calc(var(--u) * 30), 1.875rem);
    line-height: 1.2;
    color: var(--pes-rust);
}

.pes-faq-item__q .pes-faq-item__toggle {
    flex: none;
    width: clamp(20px, calc(var(--u) * 36), 36px);
    height: clamp(20px, calc(var(--u) * 36), 36px);
    position: relative;
}

.pes-faq-item__q .pes-faq-item__toggle::before,
.pes-faq-item__q .pes-faq-item__toggle::after {
    content: '';
    position: absolute;
    background: var(--pes-rust);
    border-radius: 2px;
    transition: transform .3s ease;
}

.pes-faq-item__q .pes-faq-item__toggle::before {
    left: 0; top: 50%; width: 100%; height: 3px; transform: translateY(-50%);
}

.pes-faq-item__q .pes-faq-item__toggle::after {
    top: 0; left: 50%; width: 3px; height: 100%; transform: translateX(-50%);
}

.pes-faq-item.is-open .pes-faq-item__toggle::after {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
}

.pes-faq-item__a {
    height: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, .75);
}

.pes-faq-item__a-inner {
    padding: clamp(20px, calc(var(--u) * 50), 50px);
}

.pes-faq-item__a p {
    font-size: clamp(.95rem, calc(var(--u) * 18), 1.125rem);
    line-height: calc(28 / 18);
}

/* ==========================================================================
   PROCESS STEPS (Our Process page — numbered rows, no Figma reference;
   built from the site's existing rust/green/Optima system for visual
   consistency with the rest of the site)
   ========================================================================== */

.pes-process-steps {
    --marker: clamp(64px, calc(var(--u) * 96), 96px);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(32px, calc(var(--u) * 50), 50px);
    margin: clamp(30px, calc(var(--u) * 60), 60px) 0;
}

/* the connecting timeline line, threaded behind every marker plate from the
   center of the first icon to the center of the last. --line-top/--line-
   bottom default to "half the marker" here, which is only correct if every
   step's text block is exactly as tall as its marker — in practice the text
   is taller, so the last step's row (and so this container's own bottom
   edge) extends past its marker. pes-pages.js measures the real marker
   positions and overrides these two custom properties inline once the page
   loads, which is what actually lands this on the last icon's center; the
   values below are just the pre-JS/no-JS fallback. */
.pes-process-steps::before {
    content: '';
    position: absolute;
    left: calc(var(--marker) / 2);
    top: var(--line-top, calc(var(--marker) / 2));
    bottom: var(--line-bottom, calc(var(--marker) / 2));
    width: 2px;
    background: var(--pes-rust-tint);
    transform: translateX(-50%);
    z-index: 0;
}

.pes-process-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 35);
}

.pes-process-step__marker {
    flex: none;
    position: relative;
    z-index: 1;
    width: var(--marker);
    height: var(--marker);
    border-radius: 50%;
    background: var(--pes-cream);
    border: 1px solid var(--pes-rust-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pes-process-step__marker img {
    width: 62%;
    height: 62%;
    object-fit: contain;
}

.pes-process-step__label {
    display: block;
    font-family: var(--pes-font-body);
    font-weight: 700;
    color: var(--pes-rust);
    font-size: clamp(.75rem, calc(var(--u) * 14), .875rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: clamp(4px, calc(var(--u) * 6), 6px);
}

.pes-process-step__text {
    /* nudge the text block down slightly so its label/heading line up with
       the marker's own vertical center instead of its top edge */
    padding-top: clamp(8px, calc(var(--u) * 14), 14px);
}

.pes-process-step__text h3 {
    font-weight: 700;
    color: var(--pes-green-dark);
    font-size: clamp(1.15rem, calc(var(--u) * 24), 1.5rem);
    margin-bottom: clamp(6px, calc(var(--u) * 10), 10px);
}

.pes-process-step__text p {
    font-size: clamp(.95rem, calc(var(--u) * 18), 1.125rem);
    line-height: calc(28 / 18);
}

/* ==========================================================================
   CONTACT FORM (Gravity Forms embed, restyled to match the PES system)
   ========================================================================== */

.pes-call-note__phone {
    color: var(--pes-teal);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .15s ease;
}

.pes-call-note__phone:hover,
.pes-call-note__phone:focus-visible {
    color: var(--pes-teal-hover);
}

.pes-form-wrap {
    max-width: 760px;
    margin: clamp(30px, calc(var(--u) * 50), 50px) auto 0;
}

.pes-form-wrap .gform_wrapper {
    font-family: var(--pes-font-body);
}

.pes-form-wrap .gfield_label {
    font-family: var(--pes-font-body);
    font-weight: 600;
    color: var(--pes-green-ink);
    font-size: .95rem;
    margin-bottom: 6px;
}

.pes-form-wrap .ginput_container input:not([type="radio"]):not([type="checkbox"]),
.pes-form-wrap .ginput_container select,
.pes-form-wrap .ginput_container textarea {
    width: 100%;
    font-family: var(--pes-font-body);
    font-size: 1rem;
    color: var(--pes-green-ink);
    background: var(--pes-white);
    border: 1px solid var(--pes-rust-border);
    border-radius: 8px;
    padding: 14px 16px;
}

.pes-form-wrap .ginput_container textarea {
    min-height: 120px;
}

/* radio / checkbox choices — the base theme gives every <input> a
   margin-bottom (sized for stacked text fields above), which also caught
   these and pushed each choice's label down onto its own line instead of
   sitting beside its input. gchoice is GF's own wrapper per choice; make
   it a row and reset the input's margin so input + label sit side by
   side, then restyle the control itself to match the form's rust/teal
   palette instead of the browser default. */
.pes-form-wrap .gfield_radio,
.pes-form-wrap .gfield_checkbox {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pes-form-wrap .gchoice {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pes-form-wrap .gchoice input[type="radio"],
.pes-form-wrap .gchoice input[type="checkbox"] {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--pes-teal);
}

.pes-form-wrap .gchoice label {
    font-family: var(--pes-font-body);
    color: var(--pes-green-ink);
    font-size: 1rem;
    cursor: pointer;
}

.pes-form-wrap .ginput_container input:focus,
.pes-form-wrap .ginput_container select:focus,
.pes-form-wrap .ginput_container textarea:focus {
    outline: none;
    border-color: var(--pes-teal);
}

.pes-form-wrap .gform_footer {
    margin-top: 10px;
}

.pes-form-wrap .gform_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 65px;
    padding: 0 32px;
    border-radius: 10px;
    background: var(--pes-teal);
    color: var(--pes-white);
    font-family: var(--pes-font-body);
    font-weight: 600;
    font-size: 1.125rem;
    text-transform: capitalize;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 5px rgba(14, 40, 34, .25);
    transition: background-color .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}

.pes-form-wrap .gform_button:hover {
    background: var(--pes-teal-hover);
    transform: translateY(-3px);
}

.pes-form-wrap .ginput_container_fileupload .gform_drop_area {
    border-radius: 10px;
    border-color: var(--pes-rust-border);
    background: var(--pes-cream-alt);
}

.pes-form-wrap .ginput_container_fileupload .gform_button_select_files {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 20px;
    border-radius: 10px;
    background: var(--pes-teal);
    color: var(--pes-white);
    font-family: var(--pes-font-body);
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color .35s ease;
}

.pes-form-wrap .ginput_container_fileupload .gform_button_select_files:hover {
    background: var(--pes-teal-hover);
}

.pes-form-wrap .validation_error,
.pes-form-wrap .gfield_validation_message {
    color: var(--pes-rust);
    font-family: var(--pes-font-body);
}

.pes-form-wrap .gform_confirmation_message {
    font-family: var(--pes-font-head);
    font-size: 1.375rem;
    color: var(--pes-green-dark);
    text-align: center;
    padding: 40px 0;
}

/* ==========================================================================
   CARD HOVER LIFT
   Desktop-only micro-interaction so cards feel as alive as the buttons do —
   the same lift + deepened shadow language already used on .pes-btn:hover.
   ========================================================================== */

@media (hover: hover) {
    .pes-service-row,
    .pes-feature,
    .pes-addon {
        transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
    }

    .pes-addon:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 30px rgba(24, 69, 59, .18);
    }

    .pes-service-row:hover,
    .pes-feature:hover {
        transform: translateY(-4px);
    }
}

/* ==========================================================================
   MOBILE STICKY CALL BAR
   Phone + consultation shortcuts pinned to the bottom of the screen once a
   visitor is on a phone — the two actions people actually want mid-scroll,
   always in thumb's reach instead of a scroll back up to the header.
   ========================================================================== */

.pes-mobile-cta {
    display: none;
}

@media only screen and (max-width: 640px) {
    body:has(.pes-page) {
        /* keeps the fixed bar from ever sitting on top of the footer's own
           last line of content */
        padding-bottom: 74px;
    }

    .pes-mobile-cta {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        gap: 10px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: var(--pes-white);
        box-shadow: 0 -6px 20px rgba(0, 0, 0, .15);
        animation: pes-mobile-cta-in .6s cubic-bezier(.2, .8, .2, 1) .4s both;
    }

    @keyframes pes-mobile-cta-in {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    @media (prefers-reduced-motion: reduce) {
        .pes-mobile-cta { animation: none; }
    }

    .pes-mobile-cta__call,
    .pes-mobile-cta__form {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 48px;
        border-radius: 8px;
        font-family: var(--pes-font-body);
        font-weight: 600;
        font-size: .85rem;
        text-align: center;
        white-space: nowrap;
        color: var(--pes-white) !important;
    }

    .pes-mobile-cta__call {
        background: var(--pes-green-dark);
    }

    .pes-mobile-cta__form {
        background: var(--pes-teal);
    }

    .pes-mobile-cta__icon {
        width: 18px;
        height: 18px;
        flex: none;
    }

    .pes-mobile-cta__icon img {
        width: 100%;
        height: 100%;
    }
}

/* ==========================================================================
   Our Events page
   ========================================================================== */

.pes-events-header {
    /* .website_header is position:fixed (base theme), so it's out of
       document flow and would otherwise overlap this page's first section —
       .pes-hero handles this itself elsewhere, but this is a plain
       .pes-section, so clear the header's height (70px mobile up to ~174px
       at the 1728px Figma width) plus breathing room explicitly. Smaller
       than the desktop override below — .pes-page adds nothing at this
       width, and mobile/tablet want a tighter gap regardless. */
    padding-top: clamp(70px, calc(var(--u) * 160), 160px);
    padding-bottom: 0;
    text-align: center;
}

@media only screen and (min-width: 1000px) and (max-width: 1024px) {
    /* Right at this width (an iPad Pro 12.9" in portrait: 1024px exactly),
       the fixed header is at its tallest for the "mobile/tablet" range
       (118px, both bars) while the clamp() above — scaled for the whole
       0-1024px span — is only partway to its own max there, so it fell
       short of actual header clearance. Same fix .pes-hero__content already
       needed for this identical narrow band. */
    .pes-events-header {
        padding-top: 150px;
    }
}

@media only screen and (min-width: 1025px) {
    /* Desktop/laptop, on top of the 75px .pes-page already contributes at
       this width (see .pes-page above). */
    .pes-events-header {
        padding-top: clamp(90px, calc(var(--u) * 150), 150px);
    }
}

.pes-events-header h1 {
    font-size: clamp(2rem, calc(var(--u) * 64), 4rem);
}

.pes-events-header p {
    max-width: 640px;
    margin: clamp(14px, calc(var(--u) * 20), 20px) auto 0;
    font-size: clamp(1rem, calc(var(--u) * 20), 1.25rem);
    line-height: 1.55;
}

.pes-events-listings {
    min-height: 400px;
}

.pes-referral-form {
    /* No card background here — the intro/heading lives in the section
       above (.pes-events-header), so this section has nothing of its own to
       justify the base .pes-section top padding; it just read as a large
       dead gap under a color change. Small, deliberate gap instead. */
    padding-top: clamp(20px, calc(var(--u) * 40), 40px);
}

/* ==========================================================================
   REFERRAL PAGE — tabbed "Become a Partner" / "Refer a Client" forms
   ========================================================================== */

/* Qualified with the section class (2 classes) to outrank the generic
   ".pes-page h2 { margin:0 }" reset (1 class + 1 type) — a bare
   ".pes-referral-tabs__title" tied that reset on specificity and lost on
   source order, leaving margin-bottom:0 and the title jammed against the
   tab buttons below it. Same bug as the .pes-referral-tabs__intro fix
   above; worth remembering whenever a new heading/paragraph is added
   inside this component. */
.pes-referral-tabs .pes-referral-tabs__title {
    text-align: center;
    font-size: clamp(1.9rem, calc(var(--u) * 55), 3.4rem);
    margin-bottom: clamp(20px, calc(var(--u) * 30), 30px);
}

.pes-referral-tabs__nav {
    display: flex;
    /* Matches .pes-form-wrap's own max-width below, so the tab switcher
       reads as the form's title bar rather than a freestanding control. */
    max-width: 760px;
    margin: 0 auto clamp(24px, calc(var(--u) * 40), 40px);
    border: 2px solid var(--pes-rust-border);
    border-radius: 8px;
    /* Clips each button's inner corners square, so only the group's own
       outer corners stay rounded even though every button below is
       border-radius:0 and flush against its neighbor. */
    overflow: hidden;
}

.pes-referral-tabs__btn {
    flex: 1 1 50%;
    font-family: var(--pes-font-body);
    font-weight: 600;
    font-size: 1rem;
    color: var(--pes-green-dark);
    background: var(--pes-white);
    border: none;
    border-radius: 0;
    padding: 14px 28px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.pes-referral-tabs__btn:not(:last-child) {
    /* The only visible seam between the two halves — everything else
       about the divider between them is gone (gap, individual borders). */
    border-right: 2px solid var(--pes-rust-border);
}

.pes-referral-tabs__btn:hover {
    background: var(--pes-rust-tint);
}

.pes-referral-tabs__btn.is-active {
    background: var(--pes-teal);
    color: var(--pes-white);
}

@media only screen and (max-width: 480px) {
    .pes-referral-tabs__btn { padding: 14px 10px; font-size: .9rem; }
}

.pes-referral-tabs__panel[hidden] {
    display: none;
}

.pes-referral-tabs .pes-referral-tabs__intro {
    /* qualified with the section class (2 classes) so this outranks the
       generic ".pes-page p { margin:0 }" typography reset (1 class + 1
       type) — a bare ".pes-referral-tabs__intro" tied that reset on
       specificity and lost on source order, leaving margin:0 in place and
       the paragraph flush left instead of centered under the tab buttons. */
    text-align: center;
    max-width: 640px;
    margin: 0 auto clamp(20px, calc(var(--u) * 30), 30px);
    color: var(--pes-green-ink);
    line-height: 1.55;
}