/* ==========================================================================
   Putzfee — new-version design system
   Spec: docs/superpowers/specs/2026-07-20-putzfee-homepage-design.md
   Loaded only by the new-version pages. Does not touch putzfee.css.
   ========================================================================== */

/* --- Self-hosted fonts (no Google requests — see spec §6) ---------------- */

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/outfit-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/outfit-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+2020,
                   U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/outfit-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/outfit-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+2020,
                   U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Jakarta';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/jakarta-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Jakarta';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/jakarta-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+2020,
                   U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Jakarta';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/jakarta-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Jakarta';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/jakarta-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+2020,
                   U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Jakarta';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/jakarta-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Jakarta';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/jakarta-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+2020,
                   U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Jakarta';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/jakarta-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Jakarta';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/jakarta-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+2020,
                   U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

/* Playfair Display — the v3 serif display face (GPT redesign 2026-07-29). */
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 600;
    font-display: block;
    src: url('../fonts/playfair-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 600;
    font-display: block;
    src: url('../fonts/playfair-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+2020,
                   U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    font-display: block;
    src: url('../fonts/playfair-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    font-display: block;
    src: url('../fonts/playfair-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+2020,
                   U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
    /* Colour — Top Clean brand (color-experiment): NAVY #083A4F, GOLD #A58D66,
       AQUA #C0D5D6, TEAL #407E8C, SAND #E5E1DD. Light base: sand ground,
       navy ink, teal interactive, gold reserved for CTAs + small details. */
    --bg:        #F4F2ED;   /* warm sand paper — v3 page ground (GPT mockup) */
    /* One step lighter, for sections that need to read as separate from the
       page ground. Images placed on it are baked to pure white and blended
       with mix-blend-mode: multiply, so they need no colour matching. */
    --bg-soft:   #FFFEFB;   /* near-white: needs clear daylight between it and
                               the sand ground, or the hero arc doesn't read */
    --red:       #407E8C;   /* TEAL — the interactive accent (name kept so the
                               ~60 existing usages need no churn) */
    --red-deep:  #2E6472;   /* deep teal: hovers; clears AA on --bg */
    /* Brand extras */
    --navy:       #083A4F;
    --gold:       #A58D66;
    --gold-light: #C9B491;
    --gold-deep:  #8A7350;
    --aqua:       #C0D5D6;
    --aqua-soft:  #DCE9EA;  /* blob / tinted-section fill */
    --sand:       #E5E1DD;
    /* Header ground — near-white sand so the bar reads as paper. */
    --bg-shade:      #FAF8F4;
    /* Deep end of the mobile hero's bottom gradient — full brand AQUA,
       clearly darker/bluer than the top of the screen. */
    --bg-shade-deep: #C0D5D6;
    --ink:       #083A4F;   /* NAVY — never pure black */
    --muted:     #4F6A76;   /* navy-grey, AA on --bg */
    /* Gold-tinted hairlines — one of the "small golden details". */
    --hairline:  rgba(165, 141, 102, .38);

    /* putzfee.css sets this to #1A1A1A for the inner pages; override so they
       use the brand navy rather than near-black. */
    --c-text:    #083A4F;
    /* Legacy putzfee.css palette, remapped to the Top Clean family so the
       inner pages (services/blog grids, detail pages) follow the rebrand. */
    --c-bg:           #F4F2ED;
    --c-primary:      #407E8C;
    --c-primary-dark: #2E6472;
    --c-pink:         #C0D5D6;
    --c-beige-dark:   #C9B491;
    --c-beige-light:  #E9E6DF;
    --c-red-light:    #C0D5D6;
    --c-text-muted:   #4F6A76;

    /* Type — serif display (v3), sans body. */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'Jakarta', system-ui, sans-serif;

    /* Header */
    --header-h: 84px;   /* room for the 80px logo */

    /* --- Arc geometry (spec §3.1–3.2) ---------------------------------
       --step MUST be 360deg / 18 = 20deg, otherwise the wheel has a gap
       that becomes visible as it rotates through the top.

       NON-OVERLAP: cards are packed tightest at their INNER ends, not at
       their tops — the circle is smaller down there. The binding constraint
       is therefore at the disc edge, the innermost point still visible:

           2 * disc-r * sin(step/2)  >  card-w

       Checking this at --R instead is wrong and reports ~4x more clearance
       than really exists.

       HOW MANY CARDS ARE FULLY VISIBLE is set by R against the viewport, and
       counter-intuitively a BIGGER circle shows FEWER: the arc flattens and
       widens, pushing the +/-60deg cards past the screen edges. Horizontal
       extremes of a card at wheel-angle t:

           xmax(t) = R*sin(t) + (w/2)*cos(t)
           xmin(t) = (R-h)*sin(t) - (w/2)*cos(t)

       The count wobbles as the wheel turns, so the target is "never more
       than 5". The worst case is mid-step, when cards land at +/-10, +/-30,
       +/-50 rather than 0, +/-20, +/-40 — so the binding condition is the
       50deg card, not the 60deg one:

           xmax(30) <= 50vw   (keep 4 full)   and   xmax(50) > 50vw
       R = 60vw satisfies both and gives a steady 4-5 cards, never 6.
       R is in vw and the card scales with it: pin either to px and the count
       drifts from screen to screen.
       ------------------------------------------------------------------- */
    --count:   18;
    --step:    20deg;
    --card-w:  min(13vw, 240px);
    --card-h:  calc(var(--card-w) * 1.5);   /* 2:3 — taller than the old 3:4 */
    --cut:     calc(var(--card-h) * .28);   /* leaves 72% of the card visible */
    --R:       60vw;                        /* radius to the card's OUTER edge */
    --disc-r:  calc(var(--R) - var(--card-h) + var(--cut));

    /* Circle centre, measured from the top of the hero.
       The offset must clear the header. A card's top CORNERS orbit at
       sqrt(R^2 + (w/2)^2), slightly further than R, so the highest point any
       card reaches is  cy - sqrt(R^2 + (w/2)^2)  — not cy - R.
       desktop: sqrt(850^2 + 105^2) = 856  ->  topmost = 950 - 856 = 94px */
    --cy:      calc(var(--R) + 100px);
}

@media (max-width: 768px) {
    :root {
        --header-h: 64px;   /* room for the 58px mobile logo */
        /* Denser wheel than desktop: one full card centred with ~2/3 of
           each ±20° neighbour visible at a ~390px viewport. Two rules
           bind card width W to radius R:
             non-overlap (see desktop comment):  R >= 3.96*W + 34.6
             2/3-neighbour visibility at 390px:  R ≈ 570 - 0.44*W
           Solving both: W ≈ 122px, R ≈ 518px. Labels get their size back
           by dropping to compact display names on the longest services
           (see .pf-card__name--short). */
        --card-w:   min(31vw, 130px);
        --R:         max(133vw, 518px);
        /* Bigger offset than desktop: it drops the whole arc down the screen,
           and since the content is positioned off the disc apex, the headline,
           body and buttons follow it down by the same amount. */
        --cy:        calc(var(--R) + 130px);
    }
    /* The matching padding-top override lives with the other mobile hero
       rules further down — this block sits above .pf-hero, and at equal
       specificity source order would cancel it here. */
}

/* Very short phones (iPhone SE and similar). The content sits at
   1.08*card-w + 174 regardless of R, so the only way to lift it is a smaller
   card — which costs label size. Same two formulas as above at a ~12%
   smaller scale, so the buttons stay above the fold. */
@media (max-width: 768px) and (max-height: 700px) {
    :root {
        --card-w: min(27vw, 108px);
        --R:      max(116vw, 462px);
        --cy:     calc(var(--R) + 92px);
    }
    .pf-hero { padding-top: calc(var(--cy) - var(--disc-r) + 26px); }
    .pf-hero__title   { font-size: clamp(1.4rem, 6.4vw, 1.7rem); }
    .pf-hero__body    { margin-top: 12px; font-size: .95rem; }
    .pf-hero__actions { margin-top: 20px; gap: 10px; }
}

/* Very short windows only. The space above the content is 100px + 0.72*card-h,
   so a short screen needs a smaller CARD — shrinking the circle frees nothing. */
@media (max-height: 620px) and (min-width: 769px) {
    :root { --card-w: min(10vw, 170px); }
    .pf-hero { padding-bottom: 40px; }
    .pf-hero__title   { font-size: clamp(1.6rem, 2.2vw, 2.1rem); }
    .pf-hero__actions { margin-top: 24px; }
}

/* --- Base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* The wheel is wider than the viewport by design. Clipping here rather
       than on .hero keeps `position: sticky` working elsewhere on the page
       (see spec §4.2 — horizontal overflow silently breaks sticky).
       `clip`, not `hidden`: hidden still lets the viewport be scrolled
       programmatically (momentum/JS), clip removes the scroll range. */
    overflow-x: clip;
}

a { color: inherit; text-decoration: none; }

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

:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
    border-radius: 4px;
}

.pf-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--red);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 10px 0;
}
.pf-skip:focus { left: 0; }

.pf-container {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 28px;
}
@media (max-width: 768px) {
    .pf-container { padding-inline: 20px; }
}

/* --- Header (spec §3.6) --------------------------------------------------- */

.pf-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 300;
    height: var(--header-h);
    display: flex;
    align-items: center;
    transition: box-shadow .3s ease;

    /* v3: near-white sand bar, reads as paper against the sand ground. */
    background: linear-gradient(180deg, #FDFCFA, var(--bg-shade));

    /* Muted grey stepped down for the slightly darker ground. */
    --c-text-muted: #46626E;
}

/* The gradient is always on now, so scrolling only adds lift — no colour
   change, and no hairline rule on the bottom edge. */
.pf-header.is-stuck {
    box-shadow: 0 6px 24px rgba(46, 31, 27, .06);
}

.pf-nav {
    display: grid;
    /* Logo and the lang+CTA cluster naturally differ in width, so plain
       space-between flex left the links off-centre, drifting toward the
       logo. Two equal side tracks force the middle one to sit at the true
       horizontal centre of the header regardless of that imbalance. */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
}

.pf-logo { justify-self: start; }

/* Height lives on .pf-logo__img below — this selector is (0,1,1) and would
   silently outrank the class rule if it set one (it did, at 34px, which kept
   the logo tiny no matter what .pf-logo__img said). */
.pf-logo img { width: auto; }

/* Top Clean logo — gold on white JPEG; multiply hides the white box on any
   light ground (header, footer). The brightness nudge pushes the JPEG's
   compression-grey whites to true white so no box edge survives multiply. */
.pf-logo__img {
    height: 80px;
    width: auto;
    /* The alpha logo has a genuinely transparent ground — no multiply
       needed (multiply broke below the fixed header's own background). */
}

/* Desktop: the logo grows past the bar WITHOUT growing the bar (Sandro
   2026-07-31). Houses + broom + TOP CLEAN sit above the header's bottom
   line; EIFEL-MOSEL, GmbH and the stars hang below it. A soft white glow
   behind the overhang keeps that text readable over whatever scrolls by
   (the logo file is white-ground + multiply, so the glow acts as its
   paper). */
@media (min-width: 769px) {
    .pf-logo { position: relative; }
    .pf-logo::before {
        content: '';
        position: absolute;
        left: 50%;
        /* Centred on the EIFEL-MOSEL/GmbH/stars band (the image is shifted
           13px down; the sub-line lives in its lower quarter). */
        top: 52px;
        transform: translateX(-50%);
        width: 175%;
        height: 115px;
        /* Soft feathered pool, not a white plate: opacity falls away well
           before the box edge, and the blur melts any remaining contour. */
        background: radial-gradient(50% 50% at 50% 50%,
            rgba(255, 255, 255, .98) 0%,
            rgba(255, 255, 255, .92) 45%,
            rgba(255, 255, 255, .55) 68%,
            rgba(255, 255, 255, 0) 86%);
        filter: blur(7px);
        pointer-events: none;
    }
    .pf-logo__img {
        position: relative;
        height: 110px;
        transform: translateY(13px);
    }
}

/* Mobile: same overhang mechanic, scaled to the 64px bar. */
@media (max-width: 768px) {
    .pf-logo { position: relative; }
    .pf-logo::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 38px;
        transform: translateX(-50%);
        width: 175%;
        height: 88px;
        background: radial-gradient(50% 50% at 50% 50%,
            rgba(255, 255, 255, .98) 0%,
            rgba(255, 255, 255, .92) 45%,
            rgba(255, 255, 255, .55) 68%,
            rgba(255, 255, 255, 0) 86%);
        filter: blur(6px);
        pointer-events: none;
    }
    .pf-logo__img {
        position: relative;
        height: 84px;
        transform: translateY(11px);
    }
}

.pf-nav__links {
    display: flex;
    align-items: center;
    justify-self: center;
    gap: 38px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-nav__links a {
    /* Navy, per the Top Clean light design — quiet, premium; the gold
       underline on hover carries the brand accent. */
    color: var(--navy);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 17.5px;
    letter-spacing: .01em;
    position: relative;
    padding-block: 6px;
}

/* Underline grows from the left — one small, consistent hover idiom.
   Gold: one of the brand's "small details". */
.pf-nav__links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1.5px;
    width: 100%;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.pf-nav__links a:hover::after,
.pf-nav__links a[aria-current="page"]::after { transform: scaleX(1); }

.pf-nav__right {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 18px;
}

.pf-lang {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 16px;
    font-weight: 700;
    color: var(--red-deep);
}
.pf-lang a { opacity: .45; transition: opacity .2s; }
.pf-lang a:hover { opacity: .8; }
.pf-lang a.is-active { opacity: 1; }
.pf-lang span { opacity: .3; }

/* Header CTA pill — outlined pill, solid red icon circle. */
.pf-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 3px 20px 3px 3px;
    border-radius: 999px;
    border: 1.5px solid var(--gold);
    background: transparent;
    color: var(--navy);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16.5px;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .22s ease, color .22s ease, transform .22s ease;
}

.pf-cta__icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: var(--navy);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1),
                background-color .22s ease, color .22s ease;
}

/* Hover fills the pill with the golden gradient; navy text stays for AA. */
.pf-cta:hover {
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: var(--navy);
    transform: translateY(-1px);
}
.pf-cta:hover .pf-cta__icon {
    background: var(--navy);
    color: var(--gold-light);
    transform: rotate(45deg);
}

@media (max-width: 900px) {
    /* Mobile header is logo + language + burger; the CTA lives in the drawer. */
    .pf-cta { display: none; }
}

.pf-burger {
    display: none;
    background: none;
    border: 0;
    padding: 8px;
    margin-right: -8px;
    color: var(--red);
    cursor: pointer;
}

@media (max-width: 900px) {
    .pf-nav__links { display: none; }
    .pf-burger     { display: block; }
    /* With the links gone, the 3-column grid would auto-place the lang+burger
       cluster into the middle track and it drifts to the centre. Two tracks:
       logo left, cluster pinned right. */
    .pf-nav { grid-template-columns: 1fr auto; }
}

/* Mobile drawer. Closed state is display:none rather than an off-canvas
   transform — an off-canvas panel adds page width, and that horizontal
   overflow silently breaks `position: sticky` elsewhere (spec §3.6). */
.pf-drawer { display: none; }

.pf-drawer.is-open {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: 290;
    padding: 18px 20px 26px;
    background: var(--bg);
    box-shadow: 0 14px 30px rgba(46, 31, 27, .10);
    animation: pf-drawer-in .22s cubic-bezier(.4, 0, .2, 1);
}

@keyframes pf-drawer-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pf-drawer a {
    color: var(--red);
    font-weight: 500;
    font-size: 17px;
    padding: 12px 0;
    border-bottom: 1px solid var(--hairline);
}
.pf-drawer a:last-child { border-bottom: 0; }

/* --- Buttons -------------------------------------------------------------- */

.pf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 32px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15.5px;
    line-height: 1;
    letter-spacing: .01em;
    border: 1.5px solid var(--red);
    cursor: pointer;
    transition: background-color .22s ease, color .22s ease,
                border-color .22s ease, transform .22s ease;
}

/* Primary CTA: the brand's golden gradient. Navy text, not white — white on
   this gold measures ~2.4:1 (fails AA); navy clears it comfortably. */
.pf-btn--solid {
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    border-color: var(--gold);
    color: var(--navy);
}
.pf-btn--solid:hover {
    background: linear-gradient(135deg, var(--gold), #937C57);
    border-color: #937C57;
    transform: translateY(-2px);
}

.pf-btn--ghost { background: transparent; color: var(--red); }
.pf-btn--ghost:hover {
    background: var(--red);
    color: #fff;
    transform: translateY(-2px);
}

/* --- Scroll stacking: pinned hero, benefits slides over ------------------ */

/* Taller than the viewport, so the sticky hero has travel to stay pinned
   through. The extra height IS the length of the effect.

   200svh paired with the -100svh pull on .pf-benefits below is the exact
   geometry for "one scroll does both". Deriving it: with pin height H,
   overlap X and viewport vh, the next section's top sits at H - X - scrollY.
   For it to start just off-screen we need H - X >= vh, and for it to finish
   exactly covering at the end of the pin (scrollY = H - vh) we need X = vh.
   Together those force H = 2vh, X = vh. */
.pf-pin {
    position: relative;
    height: 200svh;
}

.pf-hero__veil {
    position: absolute;
    inset: 0;
    z-index: 4;             /* over the cards and the disc, under the header */
    background: #fff;
    opacity: var(--p, 0);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    /* No pin, no fade — sections just follow one another. The overlap has to
       be undone too, or benefits would sit on top of the hero with nothing
       animating it away. */
    .pf-pin { height: auto; }
    .pf-hero { position: static; }
    .pf-hero__veil { display: none; }
    .pf-benefits { margin-top: 0; }
}

/* --- Hero: the arc ------------------------------------------------------- */

.pf-hero {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 100svh;
    /* Clean blue gradient: near-white at the arc, deepening into aqua at
       the fold. */
    background: linear-gradient(180deg, var(--bg-soft) 30%, #DEEBED 100%);
    /* Content begins just below the apex of the disc. */
    /* The trailing value is the breathing room between the arc and the
       headline — the disc apex sits at (cy - disc-r). */
    padding-top: calc(var(--cy) - var(--disc-r) + 64px);
    padding-bottom: 56px;
    isolation: isolate;
    /* The lower half of the wheel sits below the fold — clip it so cards
       never bleed into the section that follows. */
    overflow: hidden;
}

/* Origin point of the circle. Zero-sized so rotation happens about it. */
.pf-wheel-origin {
    position: absolute;
    left: 50%;
    top: var(--cy);
    width: 0;
    height: 0;
    z-index: 1;
}

.pf-wheel {
    position: absolute;
    width: 0;
    height: 0;
    will-change: rotate;
}

.pf-card {
    position: absolute;
    /* Pull the box left by half its width so its TOP-CENTRE sits exactly on
       the origin point before any transform runs. */
    left: calc(var(--card-w) / -2);
    top: 0;
    width: var(--card-w);
    height: var(--card-h);
    border-radius: 14px;
    overflow: hidden;
    background: #CFE0E2;
    /* Rotate about the card's top-centre, then step straight out along the
       rotated axis. The top-centre lands on the circle of radius --R and the
       card points radially outward.

       Do NOT write this as translate(-50%, -R): transform-origin defaults to
       the element's CENTRE, so the -50% shifts each card sideways by half its
       width and pushes it out to sqrt((w/2)^2 + R^2). The ring goes lopsided
       and card corners swing above the top of the screen. */
    transform-origin: 50% 0;
    transform: rotate(calc(var(--i) * var(--step)))
               translateY(calc(-1 * var(--R)));
    /* Kept deliberately faint. 18 overlapping shadows pool into a visible
       wash around the arc, and that wash outlines the disc that is supposed
       to be invisible. */
    box-shadow: 0 4px 14px rgba(46, 31, 27, .07);
    transition: box-shadow .3s ease;
}

.pf-card img {
    width: 100%;
    /* Fit the photo into the VISIBLE part of the card, not the whole card.
       The disc covers everything below 72% at the card's centre and 74.4% at
       its edges, so a full-height image loses its bottom quarter — which is
       exactly where the tools and the action usually are. 78% clears the
       edge case with margin to spare.

       At a 2:3 card every source crops horizontally, never vertically, so
       object-position Y only does anything for the taller portrait sources
       (11-14, 18). */
    height: 78%;
    object-fit: cover;
    /* per-image focal point set inline — spec §3.3 */
}

.pf-card:hover { box-shadow: 0 12px 34px rgba(46, 31, 27, .18); }

/* Service name, curved along the card's cut edge. */
.pf-card__label {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;   /* never blocks dragging the wheel */
    overflow: visible;
    /* Above the scrim. ::after is the element's last child, so without an
       explicit z-index it paints over the label and washes the text out. */
    z-index: 2;
}

.pf-card__label text {
    /* 6.2 card-local units; the card is 100 units wide, so this tracks the
       card size automatically. Sized so the longest service name
       ("PV-Anlagen- & Solarreinigung") still fits inside the card. */
    font-family: var(--font-body);
    font-size: 6.2px;
    font-weight: 500;       /* medium, not bold */
    letter-spacing: .02px;
    fill: #fff;
}

/* Compact name variant — only rendered for services whose full name is too
   long for the mobile font size; hidden everywhere except mobile. */
.pf-card__name--short { display: none; }

@media (max-width: 768px) {
    .pf-card__label text {
        /* Larger card-local units than desktop: the 6.2 cap existed to fit
           "PV-Anlagen- & Solarreinigung"; on mobile the longest names swap
           to compact display names instead (--short), so the floor rises.
           8.7 units on a ~122px card ≈ 10.6px rendered. */
        font-size: 8.7px;
    }
    /* A card that has a compact name shows it instead of the full one —
       the full string no longer fits at this size. Cards without a short
       variant keep the full name. */
    .pf-card__name--short { display: block; }
    .pf-card__name--full:has(+ .pf-card__name--short) { display: none; }
}

/* Scrim behind the label rather than a shadow on each glyph — the same
   approach as the old site's cards. It darkens the photo underneath, so the
   text stays legible without haloed letters.

   Sits under .pf-card__label in source order, so the label paints on top.
   The stops are eased: a plain two-stop gradient shows a visible band edge
   against these photos. */
.pf-card::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Stops are percentages of the WHOLE card, because the disc hides
       everything below 72% (--cut leaves 72% of the card visible). The
       gradient therefore has to reach full strength by 72%, where the label
       sits — anchoring it to the card's real bottom edge buries the dark end
       behind the disc and only the transparent top shows. */
    background: linear-gradient(to bottom,
        rgba(28, 16, 12, 0)   40%,
        rgba(28, 16, 12, .14) 52%,
        rgba(28, 16, 12, .32) 60%,
        rgba(28, 16, 12, .52) 67%,
        rgba(28, 16, 12, .60) 72%,
        rgba(28, 16, 12, .60) 100%);
    pointer-events: none;
    z-index: 1;
}



/* The disc. Same colour as the page, so it reads as an arc-shaped cut
   across the card bottoms rather than as a visible circle. Spec §3.1. */
.pf-disc {
    position: absolute;
    left: 50%;
    top: var(--cy);
    width:  calc(var(--disc-r) * 2);
    height: calc(var(--disc-r) * 2);
    margin-left: calc(var(--disc-r) * -1);
    margin-top:  calc(var(--disc-r) * -1);
    border-radius: 50%;
    background: var(--bg);
    z-index: 2;
    pointer-events: none;
}

.pf-hero__content {
    position: relative;
    z-index: 3;
    max-width: 900px;   /* wide enough that the German headline lands on 2 lines */
    margin-inline: auto;
    text-align: center;
}

.pf-hero__title {
    /* Measure in em, not px, so it scales with the font size and both
       languages break onto 2 lines at every width. The English headline is
       shorter than the German one and would otherwise sit on a single line
       wide enough to run over the cards. */
    max-width: 15em;
    margin: 0 auto;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.75rem, 2.9vw, 2.75rem);
    line-height: 1.12;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.pf-hero__body {
    margin: 22px auto 0;
    max-width: 560px;
    color: var(--muted);
    font-size: clamp(1rem, 1.6vw, 1.125rem);
    line-height: 1.65;
    text-wrap: pretty;
}

.pf-hero__actions {
    margin-top: 38px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

@media (max-width: 768px) {
    /* Wider gap between the arc and the headline than on desktop. */
    .pf-hero {
        padding-top: calc(var(--cy) - var(--disc-r) + 44px);
        padding-bottom: 56px;
    }
    /* The screen darkens toward its bottom edge — same warm family as the
       ground, fading in below the CTA buttons. Sits over the disc (z2 later
       in paint order) but under the content (z3); mobile only. */
    .pf-hero::after {
        content: '';
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 40%;
        background: linear-gradient(to bottom,
            rgba(243, 219, 208, 0),
            var(--bg-shade-deep));
        z-index: 2;
        pointer-events: none;
    }
    .pf-hero__body { margin-top: 16px; }
    .pf-hero__actions { margin-top: 30px; }
    .pf-btn { padding: 14px 26px; font-size: 15px; }
    .pf-card { border-radius: 11px; }
}

/* --- Benefits ------------------------------------------------------------ */

.pf-benefits {
    position: relative;
    z-index: 5;             /* slides OVER the pinned hero */
    background: var(--bg);
    /* Pulled up over the pinned hero so it is already rising on the very
       first scroll. Without this it sits below the hero in flow and cannot
       appear until the pin finishes — so the opening gestures only faded the
       hero and nothing seemed to move. */
    margin-top: -100svh;
    /* Tight top padding: with the heading gone the figures are the first
       thing the rising section shows, so they should arrive early. */
    padding: clamp(38px, 4.5vw, 64px) 0 clamp(40px, 5vw, 72px);
    /* Its own top edge is the "curtain" — a soft shadow sells the overlap. */
    box-shadow: 0 -24px 48px rgba(46, 31, 27, .06);
}

.pf-stats {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.pf-stat {
    padding: 8px clamp(12px, 2.5vw, 32px);
    text-align: center;
    border-left: 1px solid var(--hairline);
}
.pf-stat:first-child { border-left: 0; }

.pf-stat__value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    line-height: 1;
    letter-spacing: -.03em;
    /* Golden gradient figures — big brand moment. The solid color is the
       fallback where background-clip:text is unsupported. */
    color: var(--gold-deep);
    background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Tabular figures stop the number jittering as it counts up. */
    font-variant-numeric: tabular-nums;
}

.pf-stat__label {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: clamp(.8rem, .95vw, .9rem);
    line-height: 1.4;
}

@media (max-width: 768px) {
    /* Same three-across layout as desktop, just tighter. Labels are given
       their own line and allowed to wrap — "Erfolgreiche Projekte" needs two
       lines in a ~124px column — so the columns are top-aligned to keep the
       numbers on one baseline. */
    .pf-stats { align-items: start; }
    .pf-stat  { padding: 4px 6px; }

    .pf-stat__value {
        font-size: clamp(1.25rem, 6.4vw, 1.85rem);
        letter-spacing: -.02em;
    }
    .pf-stat__label {
        margin-top: 8px;
        font-size: clamp(.66rem, 2.9vw, .8rem);
        line-height: 1.3;
        text-wrap: balance;
    }
}

/* --- Service area --------------------------------------------------------- */

.pf-area {
    position: relative;
    z-index: 5;             /* same layer as benefits — above the pinned hero */
    /* The map's decorative ellipse (::before, -20% right inset) pokes past
       the viewport on phones and gave the page a horizontal scroll range. */
    overflow-x: clip;
    background: var(--bg-soft);
    /* Small top padding: the benefits section above already contributes its
       own bottom padding, and the map's square leaves internal air at the top
       — three stacked gaps read as a void. */
    padding: clamp(16px, 2vw, 40px) 0 clamp(64px, 8vw, 112px);
}

.pf-area__inner {
    display: grid;
    /* Text column slightly narrower than the map's, and a tighter gap, so the
       two read as one group. */
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(24px, 3vw, 48px);
}

/* Large statement heading; the place names carry the accent colour. */
.pf-area__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 4vw, 3.3rem);
    line-height: 1.1;
    letter-spacing: -.025em;
    text-wrap: balance;
}

/* Golden gradient place names in the service-area heading. */
.pf-area__place {
    color: var(--gold-deep);
    background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pf-area__body {
    margin: clamp(18px, 2.4vw, 26px) 0 0;
    max-width: 46ch;
    color: var(--muted);
    font-size: clamp(.98rem, 1.15vw, 1.08rem);
    line-height: 1.65;
    text-wrap: pretty;
}

/* Supporting line, set apart by a rule rather than a bullet or heading. */
.pf-area__note {
    margin: clamp(18px, 2.4vw, 26px) 0 0;
    padding-left: 18px;
    border-left: 2px solid var(--gold);
    max-width: 42ch;
    color: var(--muted);
    font-size: clamp(.92rem, 1.1vw, 1.02rem);
    line-height: 1.6;
    text-wrap: pretty;
}

.pf-area__map {
    /* The image's own background is matched to --bg, so it sits on the page
       without a panel or border — the map appears to float.

       Capped, and not left to fill the column: a full-width square is ~576px
       tall against ~217px of text, which centres the row and opens a large
       void above the heading. */
    /* Matches the artwork's own pixels, so `contain` fills the frame exactly.
       The three-region map (Rheinland-Pfalz + Saarland + Luxemburg, 2026-08-03)
       is a near-square blob where the old two-shape map was 4:3 wide — keeping
       the 4:3 frame would letterbox it and shed ~30% of its size.

       Max-width came down with it: at 620 the taller frame runs to ~684px
       against ~450px of text, which opens a void either side of the heading. */
    aspect-ratio: 1088 / 1200;
    width: 100%;
    max-width: 540px;
    /* Pulled toward the text rather than parked on the right margin, so the
       map and the copy read as one group. */
    justify-self: start;
}

.pf-area__map img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* The image's background is baked to pure white, and white multiplied by
       anything is that thing — so the square dissolves into whatever colour
       sits behind it. Matching a hex instead leaves a faint rectangle: WebP
       drifts by a unit or two, which is enough to see against a flat area,
       and it breaks again whenever the section colour changes. */
    mix-blend-mode: multiply;
}

@media (max-width: 860px) {
    .pf-area__inner {
        grid-template-columns: 1fr;
        gap: clamp(20px, 5vw, 36px);
    }
    /* Text first, map beneath — the heading should lead on a phone. */
    .pf-area__text { order: 1; }
    .pf-area__map {
        order: 2;
        max-width: 460px;
        margin-inline: auto;
        justify-self: center;
    }
    .pf-area__body,
    .pf-area__note { max-width: none; }
}

/* --- Before / after banner ------------------------------------------------ */

.pf-ba {
    position: relative;
    /* The surplus over the sticky child is the scrub distance. Trimmed from
       185svh for v3 — the long runway read as a blank band in full-page
       captures and made the wipe feel slow. */
    height: 150svh;
    --p: 0;                 /* 0 = all "before", 1 = all "after" */
    background: var(--bg-soft);
    z-index: 5;             /* above the pinned hero, like the sections before it */
}

.pf-ba__sticky {
    position: sticky;
    top: var(--header-h);
    height: calc(100svh - var(--header-h));
    display: grid;
    place-items: center;
    padding-inline: 20px;
}

.pf-ba__banner {
    position: relative;
    width: min(1180px, 100%);
    aspect-ratio: 16 / 7;
    border-radius: clamp(18px, 2vw, 34px);
    overflow: hidden;
    background: #CFE0E2;
    box-shadow: 0 24px 60px rgba(46, 31, 27, .16);
}

.pf-ba__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    user-select: none;
    -webkit-user-drag: none;
}

.pf-ba__img--before { z-index: 1; }

/* The "after" frame sits on top and is uncovered left to right. At --p 0 none
   of it shows; at 1 it covers the whole banner. */
.pf-ba__img--after {
    z-index: 2;
    clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0);
}

.pf-ba__scrim {
    position: absolute;
    inset: 0;
    z-index: 3;
    /* Confined to an ellipse behind the title instead of covering the frame.
       A full-height wash greyed the whole photo — visible as a haze over both
       states — while the only place it is actually needed is behind the text,
       which crosses the white house walls where white-on-white would vanish.
       Edges and corners now show the photo untouched. */
    background:
        radial-gradient(62% 34% at 50% 50%,
            rgba(28, 16, 12, .58) 0%,
            rgba(28, 16, 12, .34) 55%,
            transparent 78%);
    pointer-events: none;
}

.pf-ba__title {
    position: absolute;
    z-index: 4;
    inset: 0;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 0 clamp(20px, 5vw, 64px);
    text-align: center;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.35rem, 3.6vw, 3.1rem);
    line-height: 1.12;
    letter-spacing: -.02em;
    text-wrap: balance;
    pointer-events: none;
}

/* Small corner tags so the wipe is legible as before-vs-after, not a glitch. */
.pf-ba__tag {
    position: absolute;
    z-index: 4;
    bottom: clamp(12px, 1.6vw, 22px);
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(.62rem, 1vw, .78rem);
    letter-spacing: .08em;
    text-transform: uppercase;
    pointer-events: none;
}

/* Each tag fades out as its own side of the wipe disappears.
   v3 colours per the GPT mockup: BEFORE teal, AFTER gold, white text. */
.pf-ba__tag--before {
    right: clamp(12px, 1.6vw, 22px);
    opacity: calc(1 - var(--p) * 1.6);
    background: var(--red);
    color: #fff;
}
.pf-ba__tag--after {
    left: clamp(12px, 1.6vw, 22px);
    opacity: calc(var(--p) * 1.6 - .1);
    background: var(--gold);
    color: #fff;
}

@media (max-width: 768px) {
    /* 16:7 at phone width is a letterbox slot barely 140px tall — too short
       for the photo to read. */
    .pf-ba__banner { aspect-ratio: 4 / 3; }

    /* No pin on mobile, and the section is exactly the card plus its padding.

       The three things wanted here cannot all hold at once. Pinning freezes
       the page, but the pinned box must fill the viewport or the neighbouring
       sections stay on screen and drift while the card holds still; and a 4:3
       card cannot fill a full-screen box without leaving ~576px of empty
       background. Keeping the card's shape means giving up the freeze — which
       buys back both fixed distances and zero empty space, since nothing
       stands still and the section is only as tall as its contents. */
    .pf-ba {
        height: auto;
        padding-block: clamp(28px, 7vw, 56px);
    }
    .pf-ba__sticky {
        position: static;
        height: auto;
        padding: 0 20px;
        place-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* No scrub: show the finished result rather than a half-wiped frame. */
    .pf-ba { height: auto; --p: 1; }
    .pf-ba__sticky {
        position: static;
        height: auto;
        padding-block: clamp(56px, 8vw, 104px);
    }
    .pf-ba__tag { display: none; }
}

/* Cursor affordance: the wheel can be dragged. */
.pf-wheel-origin { cursor: grab; }
.pf-wheel-origin.is-dragging { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .pf-btn:hover { transform: none; }
}

/* ==========================================================================
   Carried over from the previous version — reviews, blog, footer
   --------------------------------------------------------------------------
   Copied as-is so these read exactly as they did before. They were written
   against the old token names, so those are declared here rather than
   rewriting the rules; several are the same palette values under a different
   name. Where a new-version token exists it is aliased to it, so a change to
   the design system still reaches these blocks.
   ========================================================================== */

.pf-legacy,
.site-footer {
    --c-bg:           var(--bg);
    --c-primary:      var(--red);
    --c-pink:         var(--aqua);
    --c-beige-dark:   var(--gold-light);
    --c-beige-light:  #DDE7E8;
    --c-white:        #FFFFFF;
    --c-text:         var(--ink);
    --c-text-muted:   var(--muted);

    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-lg:   1.125rem;
    --fs-2xl:  1.5rem;
    --fs-4xl:  2.25rem;

    --container-max: 1200px;
    --radius-md:     12px;
    --shadow-sm:     0 2px 8px rgba(0, 0, 0, .06);

    font-family: var(--font-body);
}

.pf-legacy .container,
.site-footer .container {
    width: 100%; max-width: var(--container-max);
    margin: 0 auto; padding: 0 1.5rem;
}
.pf-legacy .section-title {
    font-family: var(--font-display);
    font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl));
    font-weight: 700; color: var(--c-text);
    margin: 0;
}

/* --- Reviews / blog carousel --------------------------------------------- */

/* --bg-soft, matching the service-area section, rather than the page ground. */
.pf-legacy.reviews-section {
    padding: 5rem 0;
    overflow: hidden;
    /* The page's near-white sand ground, like the other light sections. */
    background: var(--bg-soft);
}

/* Reviews, blog and FAQ run back to back on the same background, so each
   pair's padding stacked into a large void between one section's cards and
   the next heading — 160px, then 176px once the FAQ followed. The seam
   between any adjacent pair collapses to one consistent 3rem; a section with
   nothing of its kind after it keeps its full 5rem. Falls back to the
   original spacing where :has() is unsupported. */
.pf-legacy.reviews-section:has(+ .pf-legacy.reviews-section),
.pf-legacy.reviews-section:has(+ .pf-faq) { padding-bottom: 4.5rem; }

.pf-legacy.reviews-section + .pf-legacy.reviews-section,
.pf-legacy.reviews-section + .pf-faq { padding-top: 0; }
.pf-legacy .section-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 2rem;
}
.pf-legacy .carousel-controls { display: flex; align-items: center; gap: 0.75rem; }
.pf-legacy .show-all-link { font-size: var(--fs-sm); font-weight: 600; color: var(--c-primary); white-space: nowrap; transition: opacity 0.2s; }
.pf-legacy .show-all-link:hover { opacity: 0.75; }
/* No ring — the arrow itself is the control, so it is sized up to stay an
   easy target now that the 44px circle is gone. The button box keeps its
   44px so the tap area does not shrink with the visible shape. */
.pf-legacy .carousel-btn {
    width: 44px; height: 44px;
    border: 0; background: none; color: var(--c-primary);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: color 0.2s, transform 0.2s; flex-shrink: 0;
    padding: 0;
}
.pf-legacy .carousel-btn svg { width: 30px; height: 30px; }
.pf-legacy .carousel-btn:hover:not(:disabled) { color: var(--red-deep); transform: scale(1.12); }
.pf-legacy .carousel-btn:active:not(:disabled) { transform: scale(.96); }
/* End of list in that direction — same colour, lighter, and inert. */
.pf-legacy .carousel-btn:disabled { opacity: .35; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
    .pf-legacy .carousel-btn:hover,
    .pf-legacy .carousel-btn:active { transform: none; }
}
.pf-legacy .reviews-track-wrapper { overflow: hidden; }
.pf-legacy .reviews-track {
    display: flex; gap: 1.5rem;
    transition: transform 0.4s ease;
    will-change: transform;
}
.pf-legacy .review-card {
    flex: 0 0 calc((100% - 3rem) / 3.5);
    background: var(--c-white); border-radius: var(--radius-md);
    overflow: hidden; box-shadow: var(--shadow-sm);
}
.pf-legacy .review-photo {
    position: relative; height: 220px; overflow: hidden; background: var(--c-beige-light);
}
.pf-legacy .review-photo img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; transition: opacity 0.6s ease;
}
.pf-legacy .review-photo img.hidden { opacity: 0; pointer-events: none; }
.pf-legacy .review-photo__label {
    position: absolute; bottom: 0.75rem; left: 0.75rem;
    background: rgba(0, 0, 0, .55); color: white;
    padding: 0.2rem 0.6rem; border-radius: 20px;
    font-size: var(--fs-xs); font-weight: 600; z-index: 2;
}
.pf-legacy .review-photo__arrows {
    position: absolute; inset: 0; display: flex;
    justify-content: space-between; align-items: center;
    padding: 0 0.75rem; z-index: 2;
}
.pf-legacy .photo-arrow {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255, 255, 255, .85); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--c-text); transition: background 0.2s; flex-shrink: 0;
}
.pf-legacy .photo-arrow:hover { background: var(--c-white); }
.pf-legacy .review-body { padding: 1.25rem; }
.pf-legacy .review-text {
    font-size: var(--fs-sm); color: var(--c-text); line-height: 1.6;
    margin: 0 0 0.75rem; font-style: italic;
}
.pf-legacy .review-name { font-size: var(--fs-sm); font-weight: 600; color: var(--c-primary); margin: 0; }

@media (max-width: 768px) {
    .pf-legacy .review-card { flex: 0 0 85%; }
}

/* --- Footer --------------------------------------------------------------- */

/* Same wash as the header — same palette colours, same anchoring at the left
   and right edges, so the two ends of the page rhyme. The radii are given in
   percentages of the element, so on a tall footer they read as soft vertical
   bands rather than the header's thin horizontal ones. */
.site-footer {
    position: relative;
    /* Above the z-5 section layer (.pf-area, .pf-faq…): the curved cap
       overlaps the section before it and must not paint underneath. */
    z-index: 6;
    padding: 4rem 0 0;
    /* v3: navy footer (GPT mockup). Re-scoping the legacy colour variables
       recolors every descendant rule without touching them individually. */
    background: linear-gradient(180deg, #0A4159, var(--navy));
    --c-text:       #F4F2ED;
    --c-text-muted: #B7C8D0;
    --c-primary:    #C9B491;   /* link hovers go gold-light on navy */
}

/* Curved cap: the footer's top edge is a shallow bowl like the hero arc —
   navy rises at both sides, dips to the straight footer line at the centre.
   Same complement-of-a-circle gradient; R=250vw keeps it a LITTLE arch
   (edge rise = 250 − √(250² − 50²) ≈ 5vw). Transparent inside the circle,
   so whatever section sits above shows through the dip. */
.site-footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    /* 1px into the footer, not exactly on its edge — at fractional device
       pixel scales the seam otherwise renders as a hairline light line. */
    bottom: calc(100% - 1px);
    height: clamp(30px, 6vw, 90px);
    pointer-events: none;
    background: radial-gradient(250vw circle
            at 50vw calc(-250vw + clamp(30px, 6vw, 90px) + 1px),
            transparent calc(250vw - 1px),
            #0A4159 250vw);
}
.site-footer .footer-grid {
    /* Three equal columns so the groups sit at even intervals. The old
       1.5fr first column pushed Contact 501px from Links but Brand only 350px
       from Contact, reading as uneven spacing. */
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 3rem; padding-bottom: 3rem;
}
/* The Top Clean mark is roughly square (crescent + wordmark), not a wide
   strip — it needs real height to stay legible. */
.site-footer .footer-col__logo {
    /* White chip: the logo artwork sits on a white ground, and multiply
       against navy would go muddy — so keep the white and shape it. */
    height: 96px;
    width: auto;
    padding: 8px 12px;
    background: #fff;
    border-radius: 14px;
    margin-bottom: 0.75rem;
}
.site-footer .footer-col__tagline { font-size: var(--fs-sm); color: var(--c-text-muted); margin: 0 0 1rem; }
.site-footer .footer-col__title {
    font-size: var(--fs-sm); font-weight: 700; color: var(--c-text);
    text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 1rem;
}
.site-footer .footer-links { display: flex; flex-direction: column; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
/* The <li> would otherwise take its line box from the inherited 17px body
   text while the link inside is 14px, making each list row 5px taller than a
   contact row and the two columns step unevenly. */
.site-footer .footer-links li { font-size: var(--fs-sm); line-height: 1.6; }
.site-footer .footer-links a { font-size: var(--fs-sm); color: var(--c-text-muted); transition: color 0.2s; }
.site-footer .footer-links a:hover { color: var(--c-primary); }
.site-footer .footer-contact-info { display: flex; flex-direction: column; gap: 0.6rem; }
.site-footer .footer-contact-info span { font-size: var(--fs-sm); color: var(--c-text-muted); }
.site-footer .footer-bar {
    border-top: 1px solid rgba(0, 0, 0, .08); padding: 1.25rem 0;
    display: flex; justify-content: space-between; align-items: center;
    font-size: var(--fs-xs); color: var(--c-text-muted);
}
.site-footer .footer-bar-links { display: flex; gap: 1.5rem; }
.site-footer .footer-bar-links a { color: var(--c-text-muted); transition: color 0.2s; }
.site-footer .footer-bar-links a:hover { color: var(--c-primary); }

@media (max-width: 768px) {
    .site-footer .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .site-footer .footer-bar .container { flex-direction: column; gap: 0.75rem; text-align: center; }
}

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

.pf-faq {
    position: relative;
    z-index: 5;
    background: var(--bg-soft);
    padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 110px);
}

.pf-faq__inner { max-width: 860px; }

.pf-faq__title {
    margin: 0 0 clamp(28px, 4vw, 44px);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    letter-spacing: -.02em;
}

.pf-faq__list { border-top: 1px solid var(--hairline); }

.pf-faq__item { border-bottom: 1px solid var(--hairline); }

.pf-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: clamp(16px, 2.2vw, 22px) 0;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(1rem, 1.5vw, 1.12rem);
    line-height: 1.4;
    color: var(--ink);
    list-style: none;          /* Firefox */
    transition: color .2s ease;
}
.pf-faq__q::-webkit-details-marker { display: none; }   /* Safari */
.pf-faq__q:hover { color: var(--red-deep); }

.pf-faq__icon {
    flex-shrink: 0;
    color: var(--gold);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.pf-faq__item[open] .pf-faq__icon { transform: rotate(45deg); }   /* + becomes x */

.pf-faq__a {
    padding-bottom: clamp(18px, 2.4vw, 24px);
    max-width: 68ch;
}
.pf-faq__a p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
    text-wrap: pretty;
}

.pf-faq__cta {
    margin-top: clamp(32px, 4vw, 48px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.pf-faq__cta p {
    margin: 0;
    color: var(--muted);
    max-width: 46ch;
}

@media (prefers-reduced-motion: reduce) {
    .pf-faq__icon { transition: none; }
}

/* --- Inner pages ---------------------------------------------------------- */

/* The header is fixed, so pages without a hero that reserves space for it need
   the offset here. */
.pf-inner { padding-top: var(--header-h); }

/* Plain page title, replacing the old full-width coloured banner. */
.pf-pagehead {
    background: var(--bg);
    padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 3vw, 40px);
}
.pf-pagehead__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--ink);
}

/* Optional supporting line under the title. */
.pf-pagehead__lede {
    margin: 14px 0 0;
    max-width: 62ch;
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    line-height: 1.7;
    color: var(--muted);
}
.pf-pagehead--center .pf-pagehead__lede { margin-inline: auto; }

/* When a page head sits directly above a legacy listing section, the head's
   bottom padding already provides the gap — the section's own 4–5rem top
   padding would double it. */
.pf-pagehead + .services-section,
.pf-pagehead + .blog-section,
.pf-pagehead + .contact-section { padding-top: 0; }

/* --- Services listing v3 (mockup 2026-07-31) ------------------------------ */

.sv-filter {
    background: var(--bg-soft);
    padding: 6px 0 clamp(20px, 3vw, 34px);
}
/* Each filter is its own standalone pill button (Sandro 2026-07-31), not
   segments of one shared capsule. */
.sv-filter__bar {
    display: flex;
    gap: 10px;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    padding: 4px 2px;      /* room for the pills' shadows */
    overflow-x: auto;
    scrollbar-width: none;
}
.sv-filter__bar::-webkit-scrollbar { display: none; }
.sv-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 19px;
    border: 1px solid rgba(8, 58, 79, .1);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(8, 58, 79, .06);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .92rem;
    color: var(--muted);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.sv-pill svg { width: 16px; height: 16px; flex: none; }
.sv-pill:hover { color: var(--red-deep); border-color: rgba(64, 126, 140, .4); }
.sv-pill.is-active {
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    border-color: var(--gold);
    color: #fff;
}

.sv-filter__bar--left { margin-inline: 0; }

/* Blog listing: empty-filter note + the pre-footer CTA band. */
.bl-empty {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: .95rem;
}
.bl-cta { background: var(--bg-soft); padding: clamp(10px, 2vw, 24px) 0 clamp(48px, 7vw, 90px); }
.bl-cta__band {
    display: grid;
    /* Narrow band, text + button close together — full container width left
       a void between them (Sandro 2026-07-31). */
    grid-template-columns: 1fr auto;
    align-items: stretch;
    max-width: 880px;
    margin-inline: auto;
    border-radius: 24px;
    /* One gold surface with a soft gradient (Sandro 2026-07-31). */
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 62%, var(--gold-deep));
    overflow: hidden;
}
.bl-cta__gold {
    position: relative;
    padding: clamp(26px, 4vw, 48px) clamp(26px, 4.4vw, 56px);
}
.bl-cta__spark {
    position: absolute;
    top: 22px;
    right: clamp(30px, 5vw, 70px);
    width: 26px;
    height: 26px;
    color: #fff;
    opacity: .9;
}
.bl-cta__gold h2 {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    letter-spacing: -.02em;
    color: #fff;
}
.bl-cta__gold p { margin: 0; color: rgba(255, 255, 255, .88); max-width: 34ch; }
.bl-cta__action {
    display: flex;
    /* Button anchored to the band's bottom-right (Sandro 2026-07-31). */
    justify-content: flex-end;
    align-items: flex-end;
    padding: clamp(24px, 3.6vw, 44px);
}

@media (max-width: 700px) {
    .bl-cta__band { grid-template-columns: 1fr; }
    .bl-cta__action { padding-top: 0; }
}

.sv-group { background: var(--bg-soft); padding: clamp(22px, 3.4vw, 44px) 0 clamp(26px, 4vw, 52px); }
.sv-group[hidden] { display: none; }

.sv-group__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: clamp(18px, 2.6vw, 30px);
}
.sv-group__spark { width: 17px; height: 17px; flex: none; color: var(--gold); }
.sv-group__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.3rem, 2.2vw, 1.75rem);
    letter-spacing: -.02em;
    color: var(--ink);
}
.sv-group__rule { flex: 1; height: 1.5px; background: var(--hairline); }

.sv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 2vw, 24px);
}

.sv-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(8, 58, 79, .06);
    transition: transform .22s ease, box-shadow .22s ease;
}
.sv-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(8, 58, 79, .12);
}
.sv-card[hidden] { display: none; }
.sv-card__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.sv-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px 18px;
}
.sv-card__tag {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.sv-card__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.08rem;
    line-height: 1.25;
    color: var(--ink);
}
.sv-card__desc {
    font-size: .85rem;
    line-height: 1.5;
    color: var(--muted);
    padding-right: 26px;
}
.sv-card__arrow {
    position: absolute;
    right: 14px;
    bottom: 16px;
    color: var(--gold);
    transition: transform .22s ease;
}
.sv-card:hover .sv-card__arrow { transform: translateX(3px); }

.sv-steps { background: var(--bg-soft); padding: clamp(36px, 5.4vw, 70px) 0 clamp(30px, 4.4vw, 56px); }
.sv-steps__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 0 clamp(26px, 4vw, 44px);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.3rem, 2.3vw, 1.8rem);
    letter-spacing: -.02em;
    text-align: center;
    color: var(--ink);
}
/* Gold hairlines flanking the title, fading toward the page edges. */
.sv-steps__title::before,
.sv-steps__title::after {
    content: '';
    flex: 1;
    height: 1.5px;
}
.sv-steps__title::before { background: linear-gradient(90deg, transparent, rgba(165, 141, 102, .55)); }
.sv-steps__title::after  { background: linear-gradient(90deg, rgba(165, 141, 102, .55), transparent); }
.sv-steps__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 3vw, 40px);
}
/* Each step is a card (mockup 2026-07-31): number + icon on the top row,
   title and copy beneath, in a white box with a light border. */
.sv-step {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 14px;
    background: #fff;
    border: 1px solid rgba(8, 58, 79, .08);
    border-radius: 16px;
    padding: clamp(18px, 2.4vw, 28px);
    box-shadow: 0 6px 18px rgba(8, 58, 79, .04);
}
/* Faint arrow in the gap between the boxes, desktop rows only. */
@media (min-width: 901px) {
    .sv-step:not(:last-child)::after {
        content: '\2192';
        position: absolute;
        right: calc(-1 * clamp(9px, 1.5vw, 20px) - 10px);
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.25rem;
        line-height: 1;
        color: rgba(64, 126, 140, .35);
    }
}
.sv-step__num {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(2rem, 2.7vw, 2.6rem);
    line-height: 1;
    color: var(--red);
}
.sv-step__icon { justify-self: start; color: rgba(64, 126, 140, .65); }
.sv-step__icon svg { width: 30px; height: 30px; display: block; }
.sv-step__body {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 10px;
}
.sv-step__t { font-weight: 700; font-size: .96rem; color: var(--ink); }
.sv-step__d { font-size: .86rem; line-height: 1.55; color: var(--muted); }

.sv-cta { background: var(--bg-soft); padding: 0 0 clamp(48px, 7vw, 90px); }
.sv-cta__panel {
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(135deg, #DCE9EA, #C8DBDC);
}
.sv-cta__text {
    padding: clamp(26px, 4.4vw, 52px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
.sv-cta__text h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    letter-spacing: -.02em;
    color: var(--ink);
}
.sv-cta__text p { margin: 0 0 6px; color: var(--muted); max-width: 42ch; }

@media (max-width: 900px) {
    .sv-grid { grid-template-columns: repeat(2, 1fr); }
    .sv-steps__grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 700px) {
    .sv-filter__bar { justify-content: flex-start; }
}
@media (max-width: 560px) {
    /* Phones keep TWO cards per row (Sandro 2026-07-31), scaled down. */
    .sv-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .sv-card { border-radius: 13px; }
    .sv-card__body { padding: 10px 12px 14px; gap: 4px; }
    .sv-card__tag { font-size: .56rem; }
    .sv-card__name { font-size: .95rem; }
    .sv-card__desc { font-size: .76rem; padding-right: 18px; }
    .sv-card__arrow { right: 10px; bottom: 12px; width: 14px; height: 14px; }
}

/* --- Contact v3 (mockup 2026-07-31) --------------------------------------- */

.ct-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(18px, 2.6vw, 32px);
    align-items: start;
}
.ct-card {
    /* Swapped with the aside (Sandro): the form sits on the ice-blue wash. */
    background: linear-gradient(160deg, #EAF2F4, #DFEAEE);
    border-radius: 24px;
    padding: clamp(22px, 3vw, 40px);
}
.ct-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    font-size: .9rem;
    color: var(--muted);
}
.ct-note svg { flex: none; color: var(--gold-deep); }

.ct-aside {
    /* Swapped with the form card (Sandro): page ground + gold line. */
    background: var(--bg-soft);
    border: 1.5px solid var(--gold-light);
    border-radius: 24px;
    padding: clamp(24px, 3.4vw, 44px) clamp(22px, 3vw, 36px);
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2.4vw, 26px);
}
.ct-aside h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    letter-spacing: -.02em;
    color: var(--ink);
}
.ct-aside__rows { display: flex; flex-direction: column; gap: 16px; }
.ct-aside__row { display: flex; gap: 14px; align-items: center; }
.ct-aside__ico {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(138, 115, 80, .55);
    color: var(--gold-deep);
    flex: none;
}
.ct-aside__ico svg { width: 19px; height: 19px; }
.ct-aside__row > span:last-child { display: flex; flex-direction: column; gap: 1px; }
.ct-aside__label {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(8, 58, 79, .6);
}
.ct-aside__value { font-weight: 600; color: var(--ink); word-break: break-word; }
a.ct-aside__value:hover { color: var(--gold-deep); }
.ct-aside__hint { margin: 0; font-size: .92rem; color: rgba(8, 58, 79, .75); }
.ct-aside__social { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ct-aside__social a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(8, 58, 79, .4);
    color: var(--navy);
    transition: background-color .2s ease, color .2s ease;
}
.ct-aside__social a:hover { background: var(--navy); color: #fff; }

.ct-steps { background: var(--bg-soft); padding: clamp(18px, 2.6vw, 32px) 0 0; }
.ct-steps__band {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(16px, 2.6vw, 40px);
    background: #DCE9EA;
    border-radius: 20px;
    padding: clamp(18px, 2.6vw, 30px) clamp(20px, 3vw, 40px);
}
.ct-steps__label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--ink);
    margin-right: clamp(4px, 1vw, 16px);
}
.ct-step { display: inline-flex; align-items: center; gap: 10px; }
.ct-step__num {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: .9rem;
}
.ct-step__t { font-size: .92rem; font-weight: 600; color: var(--ink); }

.ct-area { background: var(--bg-soft); padding: clamp(18px, 2.6vw, 32px) 0 0; }
.ct-area__band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(20px, 3vw, 44px);
    /* Same luminous aqua-to-gold ground as the about sections. */
    background:
        radial-gradient(85% 55% at -5% 45%,
            rgba(192, 213, 214, .78) 0%,
            rgba(192, 213, 214, .32) 48%,
            transparent 76%),
        radial-gradient(70% 55% at 105% 58%,
            rgba(165, 141, 102, .42) 0%,
            rgba(229, 225, 221, .32) 52%,
            transparent 78%),
        linear-gradient(145deg,
            #E8F2F2 0%, #F8F5EF 46%, #F4EBDD 72%, #E3C894 100%);
    border-radius: 24px;
    padding: clamp(22px, 3.4vw, 44px);
}
.ct-area__text h2 {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--ink);
}
.ct-area__text p { margin: 0 0 12px; color: rgba(8, 58, 79, .75); }
.ct-area__note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink) !important;
}
.ct-area__note svg { flex: none; color: var(--gold-deep); }
.ct-area__map img {
    width: 100%;
    /* Capped and centred: the map artwork is taller than it is wide, so at the
       full column width it drives the band to ~840px and strands the copy at
       the top over a large void. 420px keeps the band at roughly the height it
       had with the old wide map. */
    max-width: 420px;
    margin-inline: auto;
    height: auto;
    display: block;
    mix-blend-mode: multiply;
}

.ct-faq { background: var(--bg-soft); padding: clamp(28px, 4.4vw, 56px) 0 clamp(48px, 7vw, 90px); }
.ct-faq__list { max-width: 760px; margin-inline: auto; }

@media (max-width: 860px) {
    .ct-grid { grid-template-columns: 1fr; }
    .ct-area__band { grid-template-columns: 1fr; }
}

/* --- About v3 (mockup 2026-07-31) ----------------------------------------- */

.ab-stats { background: var(--bg-soft); padding: 6px 0 clamp(26px, 4vw, 46px); }
.ab-stats .tc-stats { margin-top: 0; }

.ab-split { background: var(--bg-soft); padding: clamp(24px, 4vw, 56px) 0; }
.ab-split__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(26px, 4vw, 56px);
}
.ab-split__text .sv-group__spark { margin-bottom: 10px; }
.ab-split__title {
    margin: 0 0 clamp(14px, 2vw, 20px);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--ink);
}
.ab-split__title span { display: block; }
.ab-gold { color: var(--gold); }
.ab-split__text p { margin: 0 0 12px; color: var(--muted); line-height: 1.7; max-width: 52ch; }
.ab-split__media img {
    width: 100%;
    height: auto;
    border-radius: 22px;
    display: block;
    box-shadow: 0 14px 36px rgba(8, 58, 79, .1);
}

.ab-center-title {
    margin: 0 0 clamp(24px, 3.6vw, 40px);
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    letter-spacing: -.02em;
    color: var(--ink);
}

.ab-values {
    /* Same luminous aqua-to-gold ground as the meet panel below. */
    background:
        radial-gradient(85% 55% at -5% 45%,
            rgba(192, 213, 214, .78) 0%,
            rgba(192, 213, 214, .32) 48%,
            transparent 76%),
        radial-gradient(70% 55% at 105% 58%,
            rgba(165, 141, 102, .42) 0%,
            rgba(229, 225, 221, .32) 52%,
            transparent 78%),
        linear-gradient(145deg,
            #E8F2F2 0%, #F8F5EF 46%, #F4EBDD 72%, #E3C894 100%);
    padding: clamp(34px, 5vw, 64px) 0;
}
.ab-values__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 2vw, 24px);
}
.ab-value {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
    border-radius: 16px;
    padding: clamp(20px, 2.6vw, 30px);
    box-shadow: 0 8px 24px rgba(8, 58, 79, .05);
}
.ab-value__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid rgba(8, 58, 79, .18);
    color: var(--navy);
    margin-bottom: 4px;
}
.ab-value__icon svg { width: 24px; height: 24px; }
.ab-value__t { font-weight: 700; color: var(--ink); }
.ab-value__d { font-size: .88rem; line-height: 1.55; color: var(--muted); }

.ab-how { background: var(--bg-soft); padding: clamp(34px, 5vw, 64px) 0; }
.ab-how__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 2vw, 24px);
}
.ab-how__step { position: relative; text-align: center; }
.ab-how__num {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}
/* Connecting line between the circles (desktop rows). */
@media (min-width: 761px) {
    .ab-how__step:not(:last-child)::before {
        content: '';
        position: absolute;
        top: 23px;
        left: calc(50% + 30px);
        width: calc(100% - 60px + clamp(14px, 2vw, 24px));
        height: 1.5px;
        background: var(--hairline);
    }
}
.ab-how__t {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--ink);
    margin-bottom: 6px;
}
.ab-how__d { display: block; font-size: .86rem; line-height: 1.55; color: var(--muted); max-width: 30ch; margin-inline: auto; }

.ab-local {
    background: var(--bg-soft);
    padding: clamp(24px, 4vw, 56px) 0;
    /* Kept after the map's circle was removed (Sandro 2026-08-03) — cheap
       insurance for anything else that overhangs on a phone. */
    overflow-x: clip;
}
.ab-local__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(26px, 4vw, 56px);
}
.ab-local__text .sv-group__spark { margin-bottom: 10px; }
.ab-local__text p { margin: 0 0 20px; color: var(--muted); line-height: 1.7; max-width: 48ch; }
/* The 20px separated the copy from the "service area" button, which is gone
   (Sandro 2026-08-03). Left dangling it offsets this centred column. */
.ab-local__text p:last-child { margin-bottom: 0; }
.ab-local__map {
    /* Capped so the taller three-region artwork does not run to ~780px and
       overrun the section. */
    max-width: 500px;
    margin-inline: auto;
}
.ab-local__map img {
    width: 100%;
    height: auto;
    display: block;
    /* Still multiplied: the artwork's white ground has to dissolve into the
       section behind it, circle or no circle. */
    mix-blend-mode: multiply;
}

.ab-meet { background: var(--bg-soft); padding: clamp(10px, 2vw, 24px) 0 clamp(24px, 3.6vw, 48px); }
.ab-meet__panel {
    display: grid;
    /* Image side widened (Sandro 2026-07-31). */
    grid-template-columns: .85fr 1.15fr;
    border-radius: 24px;
    overflow: hidden;
    /* Same luminous aqua-to-gold ground as the mobile homepage hero. */
    background:
        radial-gradient(85% 55% at -5% 45%,
            rgba(192, 213, 214, .78) 0%,
            rgba(192, 213, 214, .32) 48%,
            transparent 76%),
        radial-gradient(70% 55% at 105% 58%,
            rgba(165, 141, 102, .42) 0%,
            rgba(229, 225, 221, .32) 52%,
            transparent 78%),
        linear-gradient(145deg,
            #E8F2F2 0%, #F8F5EF 46%, #F4EBDD 72%, #E3C894 100%);
}
.ab-meet__text {
    padding: clamp(26px, 4vw, 52px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(16px, 2.4vw, 24px);
}
.ab-meet__text h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    letter-spacing: -.02em;
    color: var(--ink);
}
.ab-meet__rows { display: flex; flex-direction: column; gap: 12px; }
.ab-meet__rows a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    font-size: .95rem;
    transition: color .2s ease;
}
.ab-meet__rows a:hover { color: var(--gold-deep); }
.ab-meet__ico {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(165, 141, 102, .6);
    color: var(--gold-deep);
    flex: none;
}
.ab-meet__ico svg { width: 18px; height: 18px; }
.ab-meet__social { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ab-meet__social a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(165, 141, 102, .6);
    color: var(--gold-deep);
    transition: background-color .2s ease, color .2s ease;
}
.ab-meet__social a:hover { background: var(--gold); color: #fff; }
.ab-meet__media { min-height: 260px; }
.ab-meet__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ab-ready { background: var(--bg-soft); padding: 0 0 clamp(48px, 7vw, 90px); }
.ab-ready__band {
    display: flex;
    align-items: center;
    gap: clamp(18px, 3vw, 36px);
    border-radius: 20px;
    padding: clamp(22px, 3.4vw, 40px) clamp(22px, 3.6vw, 48px);
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
}
.ab-ready__spark { width: 34px; height: 34px; flex: none; color: #fff; opacity: .9; }
.ab-ready__text { flex: 1; }
.ab-ready__text h2 {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.25rem, 2.2vw, 1.7rem);
    letter-spacing: -.02em;
    color: var(--navy);
}
.ab-ready__text p { margin: 0; color: rgba(8, 58, 79, .8); font-size: .95rem; }
.ab-ready__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 999px;
    background: var(--navy);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    white-space: nowrap;
    transition: background-color .2s ease, transform .2s ease;
}
.ab-ready__btn:hover { background: #0A4159; transform: translateY(-1px); }

@media (max-width: 900px) {
    .ab-values__grid { grid-template-columns: 1fr; }
    .ab-how__grid { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
}
@media (max-width: 760px) {
    .ab-split__inner,
    .ab-local__inner { grid-template-columns: 1fr; }
    .ab-split__media { order: -1; }
    .ab-meet__panel { grid-template-columns: 1fr; }
    .ab-meet__media { min-height: 200px; order: -1; }
    .ab-ready__band { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
    .ab-how__grid { grid-template-columns: 1fr; }
    .ab-how__step { text-align: left; }
    .ab-how__d { margin-inline: 0; }
}

/* --- Contact page --------------------------------------------------------- */

.pf-pagehead,
.contact-section { background: var(--bg-soft); }

/* Borderless fields. The white fill on --bg-soft is what defines the field
   now, so the old 1.5px grey outline goes. The select is included so it
   matches the inputs rather than keeping the browser's own chrome. */
.contact-section .form-group input,
.contact-section .form-group select,
.contact-section .form-group textarea {
    border: 0;
    background: #fff;
    border-radius: 10px;
    /* The panel opposite uses 0 2px 8px rgba(0,0,0,.06); the fields are much
       smaller, so they need a touch more to separate from --bg-soft — at the
       old .05 the white-on-near-white edge was invisible. */
    box-shadow: 0 2px 10px rgba(46, 31, 27, .10),
                0 1px 2px rgba(46, 31, 27, .06);
    transition: box-shadow .2s ease;
}

/* With no border, focus needs its own visible state — otherwise keyboard
   users have nothing telling them which field they are in. */
.contact-section .form-group input:focus,
.contact-section .form-group select:focus,
.contact-section .form-group textarea:focus {
    outline: none;
    /* Ring plus the resting shadow, so focusing does not flatten the field. */
    box-shadow: 0 0 0 2px var(--red),
                0 2px 10px rgba(46, 31, 27, .10);
}

.contact-section .form-group select {
    width: 100%;
    padding: .75rem 2.5rem .75rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink);
    appearance: none;
    /* Chevron, since appearance:none removes the native one. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23407E8C' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    cursor: pointer;
}

/* Contact page: page title centred, and the two blocks share a baseline —
   headings on one line, and the form's first field lines up with the top of
   the info card. The card's own <h3> moved out into .pf-block__title so both
   headings sit in the same flow rather than one being inside a padded box. */
.pf-pagehead--center { text-align: center; }

/* Flex column so the title's bottom margin and the card's top margin do not
   COLLAPSE into one. Collapsed, the card's offset was swallowed by the title's
   margin and the card sat a label's height too high. */
.pf-block { display: flex; flex-direction: column; }

.pf-block__title {
    margin: 0 0 clamp(18px, 2.4vw, 26px);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.25rem, 1.8vw, 1.6rem);
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--ink);
}
.contact-section .contact-grid { align-items: start; }
.contact-section .contact-info-panel { margin: 0; }

/* Side by side, drop the card by exactly one label block — the label's line
   box plus its margin — so its top edge meets the first INPUT rather than the
   label above it. Derived from the label's own type, not a fixed pixel value,
   so it stays correct if the label size changes. Only above 768px, where the
   grid is two columns; stacked, the offset would just be a stray gap. */
@media (min-width: 769px) {
    .contact-section .pf-block--info .contact-info-panel {
        margin-top: calc(0.875rem * 1.6 + 0.4rem);
    }
}

/* --- Custom select -------------------------------------------------------
   A native <select>'s dropdown is drawn by the operating system and cannot be
   styled — hence the grey OS panel. This replaces it with real elements. The
   native select stays in the DOM (visually hidden) and still carries the
   value, so the form works unchanged without JS.
   ------------------------------------------------------------------------- */

.pf-select { position: relative; }

/* Visually hidden once enhanced, but still submitted with the form.
   Selector includes the element type so it outranks
   `.contact-section .form-group select`, which sets width:100%. */
.pf-select--on select.pf-select__native {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

.pf-select__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: .75rem 1rem;
    border: 0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(61, 56, 53, .10), 0 1px 2px rgba(61, 56, 53, .06);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: box-shadow .2s ease;
}
.pf-select__button[aria-expanded="true"],
.pf-select__button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--red), 0 2px 10px rgba(61, 56, 53, .10);
}
.pf-select__button[data-placeholder="true"] { color: var(--muted); }

.pf-select__chev {
    flex-shrink: 0;
    color: var(--red);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.pf-select__button[aria-expanded="true"] .pf-select__chev { transform: rotate(180deg); }

/* Opens BELOW the button and scrolls inside itself, so it never covers the
   fields above it. */
.pf-select__panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 292px;
    overflow-y: auto;
    overscroll-behavior: contain;   /* scrolling the list does not scroll the page */
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(61, 56, 53, .16), 0 2px 6px rgba(61, 56, 53, .08);
    scrollbar-width: thin;
    scrollbar-color: var(--red) transparent;
}
.pf-select__panel[hidden] { display: none; }

.pf-select__panel::-webkit-scrollbar { width: 8px; }
.pf-select__panel::-webkit-scrollbar-thumb {
    background: rgba(64, 126, 140, .45);
    border-radius: 999px;
    border: 2px solid #fff;
}

.pf-select__option {
    padding: 10px 12px;
    border-radius: 9px;
    font-size: .96rem;
    line-height: 1.35;
    color: var(--ink);
    cursor: pointer;
}
.pf-select__option[aria-selected="true"] {
    color: var(--red-deep);
    font-weight: 600;
}
/* One highlight style for both mouse and keyboard, so they never disagree. */
.pf-select__option.is-active {
    background: var(--bg);
    color: var(--red-deep);
}

@media (prefers-reduced-motion: reduce) {
    .pf-select__chev { transition: none; }
}

/* --- About page ----------------------------------------------------------- */

/* Page ground matches the home page's service-area section, and the CTA strip
   drops its beige band to sit on the same colour — it read as a separate slab
   rather than part of the page. */
/* --bg-soft across these pages, matching the home page's service-area
   section. .services-section is included so the services grid and the CTA
   strip below it read as one page rather than two bands. */
.about-section,
.services-section,
.blog-section,
.cta-strip { background: var(--bg-soft); }

/* One display face for EVERY main title (Sandro 2026-07-31) — the legacy
   pages' H1s and banner headings join the v3 serif. Sizes stay with their
   own rules; only family and tracking change. */
.service-detail__title,
.service-detail__faq-title,
.page-banner h1,
.section-title {
    font-family: var(--font-display);
    letter-spacing: -.02em;
}
/* Post titles match the service-detail titles: navy ink, not teal. */
.page-banner h1 { color: var(--ink); }

/* Serif display type on the legacy-styled pages, matching the v3 sections.
   Sizes stay with putzfee.css; only family, colour and tracking change. */
.about-split__text .about-title,
.cta-strip h2 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
}
.about-split__text .about-title {
    margin: 0 0 1.5rem;
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.1;
}

/* Brand portrait in the about frame — the oversized corner echoes the hero
   blob. The photo is an interim stand-in until the client sends a real team
   shot; the frame keeps working with any portrait-crop image. */
.about-split__img {
    border-radius: 24px 110px 24px 24px;
    background: var(--aqua-soft);
    /* Cap the portrait crop — uncapped, the photo's natural height drives the
       whole grid row to ~950px and the text drowns beside it. */
    max-height: 560px;
}

/* Side by side, the frame matches the text column's height instead of holding
   a fixed 4:3. Locked to 4:3 it shrank as the viewport narrowed while the text
   grew taller with each extra line wrap, so the text overran the frame by up
   to 280px — the two can only stay level if one follows the other. */
@media (min-width: 769px) {
    .about-split { align-items: stretch; }
    .about-split__img {
        aspect-ratio: auto;
        height: 100%;
        min-height: 300px;
    }
}

/* --- Contact block -------------------------------------------------------- */

.pf-reach {
    background: var(--bg-soft);
    padding: 0 0 clamp(56px, 7vw, 96px);
}

/* One wrapper for heading and cards, so the heading is measured against
   exactly the width the three cards occupy rather than the full container. */
.pf-reach__inner {
    max-width: 900px;
    margin-inline: auto;
    text-align: center;
}

.pf-reach__title {
    margin: 0 0 clamp(22px, 3vw, 34px);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.6vw, 2.2rem);
    line-height: 1.18;
    letter-spacing: -.02em;
    color: var(--ink);
    text-wrap: balance;
}

.pf-reach__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0;
}

/* --red-deep, not --red: normal-size text needs 4.5:1 and Bright Red on
   --bg-soft is 3.99. The heading above can stay --red — large text needs 3.0. */
.pf-reach__link {
    position: relative;
    padding: 4px clamp(14px, 1.6vw, 22px);
    color: var(--red-deep);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(.95rem, 1.15vw, 1.05rem);
    line-height: 1.4;
    transition: color .2s ease;
}
.pf-reach__link:hover { color: var(--red); text-decoration: underline; }

/* Short rule between items rather than a border around each. */
.pf-reach__link + .pf-reach__link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5px;
    height: 18px;
    background: var(--hairline);
}

.pf-reach__social {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: clamp(22px, 3vw, 32px) 0 0;
    padding: 0;
    list-style: none;
}
.pf-reach__social a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid rgba(64, 126, 140, .5);
    color: var(--red-deep);
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.pf-reach__social a:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 700px) {
    /* Stacked, a rule would sit at the start of each line, not between items. */
    .pf-reach__links { flex-direction: column; }
    .pf-reach__link + .pf-reach__link::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pf-reach__social a:hover { transform: none; }
}

/* Review photos are unedited stock and read colder/louder than the
   brand-toned art around them. A gentle desaturate + warm shift pulls them
   toward the sand/beige family without touching the files. */
.review-photo img {
    filter: saturate(.78) sepia(.14) hue-rotate(-8deg) brightness(1.02);
}

/* Brand wordmark instead of the boxed logo image (Sandro 2026-07-31):
   just the name, straight on the navy, gold sparkle beside it. */
.site-footer .footer-brand {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 .75rem;
}
.site-footer .footer-brand img {
    height: 24px;      /* the logo's own letterforms, gold, transparent */
    width: auto;
    display: block;
}
.site-footer .footer-brand__spark {
    width: 15px;
    height: 15px;
    flex: none;
    margin-top: 2px;
    color: var(--gold-light);
}

/* Footer social row, under the contact details. */
.site-footer .footer-social {
    display: flex;
    flex-direction: row;   /* .footer-col children stack; this row must not */
    gap: 8px;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}
.site-footer .footer-social a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    /* Gold rings on navy, matching the contact icons (mockup 2026-07-31). */
    border: 1.5px solid rgba(201, 180, 145, .6);
    color: var(--gold-light);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.site-footer .footer-social a:hover {
    background: var(--gold-light);
    border-color: var(--gold-light);
    color: var(--navy);
}

/* The email and phone are links now, so they need the same treatment as the
   spans they replaced. Each row carries a gold icon (mockup 2026-07-31). */
.site-footer .footer-contact-info a,
.site-footer .footer-contact-info > span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    transition: color .2s ease;
}
.site-footer .footer-contact-info a:hover { color: var(--c-primary); }
.site-footer .footer-contact-info .fci {
    flex: none;
    color: var(--gold-light);
}

/* Homepage blog carousel cards — match the /blog listing card text styling.
   These blog-card__* classes are defined in putzfee.css, which the homepage
   does not load, so they are repeated here for the homepage (pf.css). */
.blog-card__cat {
    font-size: var(--fs-xs); font-weight: 600; color: var(--c-primary);
    text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.5rem;
}
.blog-card__title {
    font-size: var(--fs-lg); font-weight: 600; color: var(--c-text);
    margin: 0 0 0.5rem; line-height: 1.3;
}
.blog-card__date { font-size: var(--fs-xs); color: var(--c-text-muted); margin: 0; }


/* ==========================================================================
   v3 homepage (GPT redesign 2026-07-29) — hero, stats, blog. The old wheel
   hero (.pf-pin/.pf-hero/.pf-wheel/.pf-disc/.pf-benefits) is no longer in the
   markup; its CSS above is dead and can be deleted after the brand-v2 review.
   ========================================================================== */

.tc-eyebrow {
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin: 0 0 14px;
}

/* --- Hero ----------------------------------------------------------------- */

.tc-hero {
    /* The header is fixed; the hero reserves its own space. */
    padding-top: calc(var(--header-h) + clamp(16px, 2.6vw, 36px));
    padding-bottom: clamp(40px, 6vw, 72px);
    overflow: hidden;   /* the blob leaks past the media box */
}

.tc-hero__grid {
    display: grid;
    /* Text column widened (the media is absolute on desktop, so its column
       is only a spacer) — buys room for a larger one-line headline. */
    grid-template-columns: minmax(0, 1.18fr) minmax(0, .92fr);
    align-items: center;
    gap: clamp(28px, 4vw, 56px);
}

.tc-hero__title {
    font-family: var(--font-display);
    font-weight: 700;
    /* Sized so EACH sentence holds one line at the largest size the widened
       column allows (Sandro 2026-07-31: bigger, but still one line each).
       Mobile has its own curve in the 768 block. */
    font-size: clamp(1.9rem, 3.6vw, 3.4rem);
    line-height: 1.12;
    letter-spacing: -.01em;
    margin: 0 0 clamp(16px, 2vw, 22px);
    color: var(--navy);
}
.tc-hero__title-a,
.tc-hero__title-b { display: block; }
.tc-hero__title-b { color: var(--gold); }

.tc-hero__body {
    font-size: clamp(1rem, 1.3vw, 1.13rem);
    line-height: 1.65;
    color: var(--muted);
    max-width: 44ch;
    margin: 0 0 clamp(22px, 3vw, 30px);
}

.tc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.tc-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    border: 0;              /* the contact form uses it on a <button> */
    cursor: pointer;
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: .95rem;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .22s ease, color .22s ease,
                border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.tc-btn svg { flex: none; transition: transform .22s ease; }
.tc-btn:hover svg { transform: translateX(3px); }

.tc-btn--gold {
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: #fff;
    box-shadow: 0 8px 22px rgba(165, 141, 102, .35);
}
.tc-btn--gold:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    transform: translateY(-1px);
}

.tc-btn--ghost {
    border: 1.5px solid rgba(8, 58, 79, .35);
    color: var(--navy);
    background: transparent;
}
.tc-btn--ghost:hover {
    border-color: var(--red);
    color: var(--red-deep);
    transform: translateY(-1px);
}

/* Photo inside an organic shape, aqua blob behind it — the mockup's motif.
   The blob is anchored to the TOP-RIGHT and leaks past the section edge
   (mockup: the aqua wave runs up behind the header area). */
.tc-hero__media {
    position: relative;
    width: 100%;
    max-width: 560px;
    justify-self: end;
}
.tc-hero__blob {
    position: absolute;
    inset: -14% -22% 2% -10%;
    background: var(--aqua-soft);
    border-radius: 54% 46% 52% 48% / 58% 50% 50% 42%;
    transform: rotate(-8deg);
    z-index: 0;
}
.tc-hero__media picture { position: relative; z-index: 1; display: block; }
.tc-hero__sparkle {
    position: absolute;
    top: -7%;
    left: -9%;
    width: clamp(18px, 2vw, 28px);
    height: auto;
    color: var(--gold);
    z-index: 2;
}
.tc-hero__img {
    width: 100%;
    /* height:auto beats the height="941" attribute hint — without it the
       attribute wins and aspect-ratio is ignored. */
    height: auto;
    /* Tall crop of the landscape source — the mockup's photo is nearly
       square. The cleaner stands right of centre, so bias the crop there. */
    aspect-ratio: 10 / 9;
    object-fit: cover;
    object-position: 68% 32%;
    display: block;
    border-radius: 44% 24px 24px 32% / 48% 24px 24px 36%;
}

/* Desktop (GPT mockup): the photo is not framed inside the grid — it fills
   the whole right side of the screen, top to bottom, and the NEXT section's
   whitish ground (--bg-soft, same as .pf-area) rises over its bottom as a
   huge arc. The arc is one giant circle whose centre sits left of the page
   middle, so its edge runs high under the buttons and dips toward the right
   — the stat cards ride on it. */
@media (min-width: 769px) {
    .tc-hero { position: relative; }

    /* The grid's right column becomes a spacer; the media leaves the flow
       and takes the full right half of the viewport. */
    .tc-hero__media {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(52vw, 980px);
        max-width: none;
        z-index: 0;
    }
    .tc-hero__media picture { height: 100%; }   /* keeps base relative z-1 */
    .tc-hero__img {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
        object-position: 68% 30%;
        /* Slight zoom-out. cover can't scale below its fill ratio, so shrink
           the rendered img instead — the bottom gap this opens (~8% of the
           hero) stays hidden under the pale arc, and the left gap just moves
           the elliptical edge inward. Top/right stay flush via the origin. */
        transform: scale(.92);
        transform-origin: top right;
        /* The whole left edge is one convex arc (mockup): both left corners
           share a big horizontal radius with 50% vertical radii, so the edge
           is a half-ellipse — furthest left at mid-height, receding toward
           the top and the (arc-covered) bottom. No straight vertical cut. */
        border-radius: clamp(140px, 13vw, 280px) 0 0 clamp(140px, 13vw, 280px)
                       / 50% 0 0 50%;
    }
    .tc-hero__blob {
        inset: auto;
        top: -12%;
        left: -16%;
        width: 72%;
        height: 64%;
    }
    .tc-hero__sparkle {
        top: 4%;
        left: 6%;
    }

    /* Text stays above the photo if the columns ever meet. */
    .tc-hero__content { position: relative; z-index: 2; }

    /* Taller hero so the full-bleed photo has room to breathe. */
    .tc-hero__grid {
        min-height: calc(100svh - var(--header-h) - clamp(220px, 26vh, 300px));
    }

    /* The arc — the BOTTOM of a ball, symmetric (mockup): the pale ground's
       top edge is a wide bowl. Lowest point at the horizontal CENTRE of the
       viewport, hidden behind the stat-card row; both edges sweep UP toward
       the sides. Drawn as a band whose top is carved by a circle hanging
       from directly above (centre x = 50vw) — radial gradient: transparent
       inside the ball, --bg-soft outside (a plain element can only be the
       ball itself, not its complement).
       Geometry: R = 130vw ⇒ edge rise = 130 − √(130² − 50²) = 10vw — a
       gentle bow; smaller R made the edges climb too high. The dip
       sits clamp(75px,6vw,100px) above the band's bottom — just above the
       hero's bottom padding at every width, so the lowest point always stays
       hidden BEHIND the stat cards and never peeks out under them — and the
       band is tall enough that the curve never leaves it at the edges
       (which would flatten into a straight line). */
    .tc-hero::after {
        content: '';
        position: absolute;
        z-index: 1;
        pointer-events: none;
        left: 0;
        right: 0;
        bottom: 0;
        height: clamp(420px, 30vw, 700px);
        background: radial-gradient(130vw circle
                at 50vw calc(-130vw + clamp(420px, 30vw, 700px)
                             - clamp(75px, 6vw, 100px)),
                transparent calc(130vw - 1px),
                var(--bg-soft) 130vw);
    }

    /* Stat cards sit on the arc. */
    .tc-hero .pf-container:last-of-type {
        position: relative;
        z-index: 2;
    }
}

/* --- Stat cards ----------------------------------------------------------- */

.tc-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 2vw, 24px);
    margin: clamp(36px, 5vw, 60px) 0 0;
    padding: 0;
}

.tc-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 16px;
    align-items: center;
    background: #fff;
    border-radius: 20px;
    padding: clamp(16px, 2.4vw, 26px) clamp(16px, 2.6vw, 30px);
    box-shadow: 0 10px 30px rgba(8, 58, 79, .07);
    margin: 0;
}

/* Bare icons — no tinted chip behind them (Sandro 2026-07-30); the icon's
   central element carries gold via .ico-gold on its path. */
.tc-stat__icon {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    color: var(--navy);
}
.tc-stat__icon svg { width: 46px; height: 46px; }
.tc-stat__icon .ico-gold { stroke: var(--gold); }

.tc-stat__value {
    /* Jakarta, not Playfair: the serif's antique figures read as
       handwriting at a glance (Sandro 2026-08-01). */
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1.1;
    color: var(--navy);
}
/* Homepage hero only: Outfit's geometric digits, made for numerals — and
   the labels ride along in the same face so the card reads as one piece. */
.tc-hero .tc-stat__value {
    font-family: 'Outfit', var(--font-body);
}
.tc-hero .tc-stat__label {
    /* Clearly distinct from body text: small caps-style label under the
       big digits (Sandro 2026-08-01 — Outfit alone looked unchanged). */
    font-family: 'Outfit', var(--font-body);
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.tc-stat__label {
    font-size: clamp(.72rem, 1vw, .88rem);
    color: var(--muted);
    margin: 2px 0 0;
}

/* --- Service-area map on an aqua circle (mockup) -------------------------- */

.pf-area__map {
    position: relative;
}
.pf-area__map::before {
    content: '';
    position: absolute;
    inset: -8% -20% -8% -8%;
    background: var(--aqua-soft);
    border-radius: 50%;
    opacity: .55;
}
.pf-area__map img {
    position: relative;   /* above the circle; multiply drops the white bg */
}
/* No circle on phones (Sandro 2026-08-03) — the map sits on the section's own
   ground instead. Same breakpoint the section stacks at, so the circle goes
   with the two-column layout it was drawn for. */
@media (max-width: 860px) {
    .pf-area__map::before { display: none; }
}

/* --- Legacy sections on the v3 ground ------------------------------------- */

.pf-legacy .section-title {
    font-family: var(--font-display);
    color: var(--navy);
}

/* --- Blog: featured + list (mockup layout) -------------------------------- */

.tc-blog {
    padding: clamp(48px, 7vw, 84px) 0;
    /* Same luminous aqua-to-gold ground as the mobile hero / about panel. */
    background:
        radial-gradient(85% 55% at -5% 45%,
            rgba(192, 213, 214, .78) 0%,
            rgba(192, 213, 214, .32) 48%,
            transparent 76%),
        radial-gradient(70% 55% at 105% 58%,
            rgba(165, 141, 102, .42) 0%,
            rgba(229, 225, 221, .32) 52%,
            transparent 78%),
        linear-gradient(145deg,
            #E8F2F2 0%, #F8F5EF 46%, #F4EBDD 72%, #E3C894 100%);
}

.tc-blog__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: clamp(22px, 3vw, 34px);
}

/* Track arrows — desktop has no track, so they only exist on mobile. */
.tc-blog__nav { display: none; }
.tc-blog__navbtn {
    background: none;
    border: 0;
    padding: 4px;
    color: var(--red);
    cursor: pointer;
    transition: color .2s ease, transform .2s ease;
}
.tc-blog__navbtn:hover:not(:disabled)  { color: var(--red-deep); transform: scale(1.12); }
.tc-blog__navbtn:active:not(:disabled) { transform: scale(.96); }
/* End of track: the arrow you can't use goes light, like the reviews. */
.tc-blog__navbtn:disabled { opacity: .35; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
    .tc-blog__navbtn:hover, .tc-blog__navbtn:active { transform: none; }
}

.tc-blog__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    color: var(--navy);
    margin: 0;
}

.tc-blog__viewall {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: .9rem;
    color: var(--gold-deep);
    white-space: nowrap;
    transition: color .2s ease;
}
.tc-blog__viewall:hover { color: var(--navy); }
.tc-blog__viewall svg { transition: transform .2s ease; }
.tc-blog__viewall:hover svg { transform: translateX(3px); }

.tc-blog__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(18px, 2.6vw, 32px);
    align-items: start;
}

.tc-blog__featured {
    display: block;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(8, 58, 79, .07);
    transition: transform .22s ease, box-shadow .22s ease;
    padding-bottom: 22px;
}
.tc-blog__featured:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(8, 58, 79, .12);
}

.tc-blog__featured-img {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 18px;
}
.tc-blog__featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tc-blog__featured .tc-blog__cat,
.tc-blog__featured .tc-blog__posttitle,
.tc-blog__featured .tc-blog__date { padding: 0 22px; }

.tc-blog__cat {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 7px;
}

.tc-blog__posttitle {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1.32;
    color: var(--navy);
    margin-bottom: 8px;
}

.tc-blog__date {
    display: block;
    font-size: .8rem;
    color: var(--muted);
}

.tc-blog__list {
    display: grid;
    gap: clamp(12px, 1.8vw, 18px);
}

.tc-blog__row {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 16px;
    align-items: center;
    background: #fff;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 8px 24px rgba(8, 58, 79, .06);
    transition: transform .22s ease, box-shadow .22s ease;
}
.tc-blog__row:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(8, 58, 79, .1);
}

.tc-blog__thumb {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 11px;
    overflow: hidden;
}
.tc-blog__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tc-blog__row .tc-blog__posttitle { font-size: 1rem; margin-bottom: 5px; }
.tc-blog__row .tc-blog__cat { margin-bottom: 5px; }

/* Side by side at EVERY width (Sandro 2026-07-31: mobile keeps the desktop
   composition): the three rows share the featured card's exact height —
   equal thirds, thumbs growing to fill each row. */
.tc-blog__grid { align-items: stretch; }
.tc-blog__list { grid-template-rows: repeat(3, 1fr); }
.tc-blog__row { align-items: stretch; }
.tc-blog__thumb { height: 100%; aspect-ratio: auto; }
.tc-blog__rowbody { align-self: center; }

/* --- v3 responsive -------------------------------------------------------- */

@media (max-width: 768px) {
    /* Mobile mockup (Sandro 2026-07-30): a full-bleed aqua panel first, the
       photo inside it as a CIRCLE, and the page ground rising over the
       panel's foot as a symmetric bowl arc (edges up) — same radial-gradient
       complement mechanic as the desktop arc. Then the copy on sand. */
    .tc-hero {
        padding-top: var(--header-h);
        /* Layered luminous ground (Sandro's spec 2026-07-31): pale-aqua
           glow upper/left, warm ivory centre, champagne-gold lower-right —
           soft overlapping pools, no flat beige. */
        background:
            radial-gradient(85% 55% at -5% 45%,
                rgba(192, 213, 214, .78) 0%,
                rgba(192, 213, 214, .32) 48%,
                transparent 76%),
            radial-gradient(70% 55% at 105% 58%,
                rgba(165, 141, 102, .42) 0%,
                rgba(229, 225, 221, .32) 52%,
                transparent 78%),
            radial-gradient(75% 38% at 50% 100%,
                rgba(192, 213, 214, .32) 0%,
                transparent 72%),
            linear-gradient(145deg,
                #E8F2F2 0%, #F8F5EF 46%, #F4EBDD 72%, #E3C894 100%);
    }
    .tc-hero__grid { grid-template-columns: 1fr; gap: 0; }
    .tc-hero__media {
        order: -1;
        position: relative;
        /* width:auto, not the base 100%: with 100% the box stays at the grid
           area's width and the negative margins only SHIFT it left, leaving
           a bare strip on the right; auto lets them widen it to full bleed. */
        width: auto;
        max-width: none;
        justify-self: stretch;
        margin: 0 calc(50% - 50vw);      /* bleed to the viewport edges */
        /* Soft aqua pool behind the photo rather than one flat fill. */
        background: linear-gradient(170deg, #DCE9EA 0%, var(--aqua) 64%, #B3CCCD 100%);
        /* Aqua extends below the photo, so its sweep stays visible between
           the photo's arc and the panel's own curved foot. */
        padding: 0 0 clamp(48px, 14vw, 64px);
        /* The panel's foot is the sweeping bowl: masked to the inside of a
           circle hanging from above (edges up, dip at the centre), so the
           hero's gradient ground shows through beneath the curve. */
        -webkit-mask-image: radial-gradient(150vw circle
                at 50vw calc(100% - clamp(28px, 9vw, 40px) - 150vw),
                #000 calc(150vw - .5px), transparent 150vw);
                mask-image: radial-gradient(150vw circle
                at 50vw calc(100% - clamp(28px, 9vw, 40px) - 150vw),
                #000 calc(150vw - .5px), transparent 150vw);
    }
    /* The photo's own bottom edge: a smooth editorial arc (elliptical mask
       bulging down at the centre), not a straight cut. */
    .tc-hero__media picture {
        -webkit-mask-image: radial-gradient(115% 100% at 50% 0%,
                #000 calc(100% - .5px), transparent 100%);
                mask-image: radial-gradient(115% 100% at 50% 0%,
                #000 calc(100% - .5px), transparent 100%);
    }
    .tc-hero__blob { display: none; }    /* the panel IS the blue now */
    .tc-hero__sparkle { top: 22px; left: 20px; }
    /* Putzfee-reference geometry: the photo fills the upper-RIGHT of the
       panel — flush with the right edge, almost to the top — with one big
       soft arched cutout on its left edge (half-ellipse, like the desktop
       hero). A substantial aqua strip stays visible left of it. */
    .tc-hero__img {
        width: 84vw;
        height: clamp(240px, 64vw, 330px);
        aspect-ratio: auto;
        max-height: none;
        margin-left: auto;
        margin-right: 0;
        /* Pulled up so the photo's top tucks under the fixed header — kills
           any aqua sliver above it regardless of rendering environment. */
        margin-top: clamp(-34px, -7vw, -22px);
        display: block;
        border-radius: clamp(90px, 30vw, 160px) 0 0 clamp(90px, 30vw, 160px)
                       / 50% 0 0 50%;
        object-fit: cover;
        object-position: 58% 30%;
    }
    .tc-hero__media picture { position: relative; z-index: 1; }
    /* Phone headline curve: as large as one line per sentence allows. */
    .tc-hero__title { font-size: clamp(1.5rem, 7vw, 1.85rem); }

    /* Text pulled up into the band's sand area, close under the curve.
       z-index lifts it above the positioned media panel it now overlaps. */
    .tc-hero__content {
        position: relative;
        z-index: 3;
        padding-top: 0;
        margin-top: clamp(-30px, -6.5vw, -22px);
    }
    .tc-hero__actions { flex-direction: column; align-items: stretch; }
    .tc-btn { justify-content: center; }

    .tc-stats { gap: 10px; }
    .tc-stat {
        grid-template-columns: 1fr;
        /* Fixed icon and value rows: every card's number sits on the SAME
           horizontal line no matter how its icon is shaped or how many
           lines its label wraps to (Sandro 2026-08-01). */
        grid-template-rows: 44px 36px 1fr;
        justify-items: center;
        align-items: center;
        text-align: center;
        row-gap: 4px;
        padding: 14px 8px;
    }
    .tc-stat__label { align-self: start; }
    .tc-stat__icon { grid-row: auto; }
    .tc-stat__icon svg { width: 34px; height: 34px; }

    /* Mobile: no gradient — the same sand ground as the sections around it
       (the aqua-gold gradient stays desktop-only, Sandro 2026-07-31). */
    .tc-blog { background: var(--bg-soft); padding-top: 1.25rem; }

    /* The desktop 5rem + 48px seam read as a void on phones. */
    .pf-legacy.reviews-section { padding-bottom: 1.75rem; }

    /* Blog as a swipe carousel — same architecture as the reviews section
       (Sandro 2026-07-31): one horizontal snap track, every post a uniform
       photo-top card, next card peeking at the edge. */
    .tc-blog__nav { display: flex; align-items: center; gap: .75rem; }
    /* Title left; on the right a small stack — arrows on top, "Alle
       anzeigen" underneath them (Sandro 2026-08-01). */
    .tc-blog__header {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "title nav"
            "title viewall";
        align-items: start;
        row-gap: 4px;
    }
    .tc-blog__title {
        grid-area: title;
        margin-right: auto;
        /* Splits evenly if it has to wrap on very narrow phones instead of
           dropping one short word to its own line. */
        text-wrap: balance;
        padding-right: 10px;
    }
    .tc-blog__nav { grid-area: nav; justify-self: end; }
    .tc-blog__viewall { grid-area: viewall; justify-self: end; }

    .tc-blog__grid {
        display: flex;
        align-items: stretch;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin: 0 calc(50% - 50vw);      /* swipe area bleeds edge to edge */
        padding: 4px 20px 18px;
        scrollbar-width: none;
    }
    .tc-blog__grid::-webkit-scrollbar { display: none; }
    .tc-blog__list { display: contents; }  /* rows join the track directly */
    .tc-blog__featured,
    .tc-blog__row {
        flex: 0 0 78vw;
        max-width: 340px;
        scroll-snap-align: center;
    }
    /* Rows take the featured card's shape: photo on top, text below. */
    .tc-blog__row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0 0 14px;
        border-radius: 20px;
    }
    .tc-blog__thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: 20px 20px 0 0;
        margin-bottom: 12px;
    }
    .tc-blog__rowbody { padding: 0 16px; align-self: stretch; }
    .tc-blog__row .tc-blog__posttitle { font-size: 1rem; line-height: 1.3; }
    .tc-blog__featured { padding-bottom: 14px; }
    .tc-blog__featured-img { margin-bottom: 12px; }
    .tc-blog__featured .tc-blog__cat,
    .tc-blog__featured .tc-blog__posttitle,
    .tc-blog__featured .tc-blog__date { padding: 0 16px; }
    .tc-blog__featured .tc-blog__posttitle { font-size: 1rem; line-height: 1.3; }
}

@media (prefers-reduced-motion: reduce) {
    .tc-btn, .tc-btn svg, .tc-blog__featured, .tc-blog__row,
    .tc-blog__viewall svg { transition: none; }
}

/* --- Homepage: even section rhythm on mobile ------------------------------ */

/* Sandro 2026-08-03: the gaps between homepage sections ran 56 / 99 / 117 /
   48 / 122px on a phone. Every one of those boundaries is padding only —
   nothing adds margin across a section edge — so giving every section the
   same block padding makes each gap exactly twice it, and keeps it that way
   if the content changes.

   Scoped to the homepage: the same sections appear on inner pages, where the
   reviews/FAQ run of :has() seam rules deliberately collapses the spacing.

   Placed last in the file and matching .pf-legacy explicitly, because
   `.pf-legacy.reviews-section` (two classes) would otherwise outrank this. */
@media (max-width: 860px) {
    .page-home main > section,
    .page-home main > section.pf-legacy {
        padding-block: var(--sec-gap-m, 44px);
    }

    /* Two edges are not section-to-section and keep their own value: the hero
       has to clear the fixed header, and the FAQ meets the footer's curve. */
    .page-home .tc-hero {
        padding-top: calc(var(--header-h) + clamp(16px, 2.6vw, 36px));
    }
    .page-home .pf-faq {
        padding-bottom: clamp(64px, 8vw, 110px);
    }

    /* The blog's swipe track carries its own space under the cards, which the
       eye reads as part of the seam — leaving that boundary 18px wider than
       the rest. The section gives back exactly what the track adds, so the
       two together still measure --sec-gap-m. Declared once and used in both
       places so they cannot drift apart. */
    .page-home .tc-blog {
        --track-pad-b: 18px;
        padding-bottom: calc(var(--sec-gap-m, 44px) - var(--track-pad-b));
    }
    .page-home .tc-blog__grid { padding-bottom: var(--track-pad-b); }
}