/* ==========================================================================
   Parkside Estates — main stylesheet
   Boutique estate agents, Woodside Park / Totteridge / Whetstone, North London.

   Built from the approved homepage design. The design ships as heavy inline
   styles; everything reusable has been lifted into the `pk-` classes below so
   the views stay readable and a change lands in one place.

   Sections
     1.  Fonts
     2.  Tokens
     3.  Base + reset
     4.  Layout primitives (grid, sections, rules)
     5.  Header / navigation
     6.  Hero
     7.  Search line
     8.  Intro + stats
     9.  Featured property
     10. Listing rows
     11. Services
     12. Testimonial
     13. Why Parkside (trust)
     14. Areas we cover
     15. Guides
     15. Valuation (dark band)
     17. Contact
     18. Footer
     19. Cookie consent
     20. Flash messages
     21. Property view
     22. Responsive
   ========================================================================== */


/* 1. Fonts ================================================================= */
/* Inter, self-hosted. Variable font, so one file serves 400–700. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/inter-latin-ext.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/inter-latin.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* 2. Tokens ================================================================ */

:root {
    /* Ground */
    --pk-bg:            #f3f5fe;
    --pk-bg-alt:        #eff1fd;
    --pk-ink:           #161826;
    --pk-ink-soft:      #4a4d59;
    --pk-ink-muted:     #75798c;
    --pk-ink-faint:     #8a8e9e;
    --pk-logo-bg:       #151f42;

    /* Brand gradient — the mark's own blue → violet → orchid */
    --pk-brand-1:       #5b6ad4;
    --pk-brand-2:       #8e7fd4;
    --pk-brand-3:       #c07fc0;
    --pk-accent:        #8e7fd4;
    --pk-accent-deep:   #5d5294;
    --pk-accent-light:  #b5abfc;
    --pk-accent-pale:   #d2cefd;

    /* Lines */
    --pk-line:          rgba(22, 24, 38, 0.14);
    --pk-line-strong:   rgba(22, 24, 38, 0.22);
    --pk-line-dark:     rgba(243, 245, 254, 0.35);

    /* Rhythm — every band shares one vertical scale */
    --pk-gutter:        clamp(18px, 4vw, 60px);
    --pk-band:          clamp(80px, 10vw, 150px);
    --pk-band-sm:       clamp(64px, 8vw, 120px);
    --pk-col-gap:       clamp(20px, 3vw, 44px);
}


/* 3. Base + reset ========================================================== */

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

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

body {
    margin: 0;
    background: var(--pk-bg);
    color: var(--pk-ink);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    font-feature-settings: "ss01" 1;
    text-wrap: pretty;
    overflow-x: hidden;
}

/* Sitewide wash, fixed to the viewport so it reads as one continuous surface
   rather than repeating per band — the same brand hues as the gradient
   wordmark and the dark bands, at a fraction of the strength, so plain bands
   aren't a single flat tone. Sits at z-index:-1, so any band with its own
   background (testimonial, valuation, footer) paints over it as normal. */
body::before {
    content: "";
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(1500px 950px at 0% 0%, rgba(91,106,212,0.30), transparent 78%),
        radial-gradient(1400px 950px at 100% 0%, rgba(192,127,192,0.26), transparent 78%),
        radial-gradient(1500px 1050px at 8% 100%, rgba(142,127,212,0.24), transparent 78%);
}

h1, h2, h3, h4, h5, h6 { color: var(--pk-ink); font-weight: 500; margin: 0; }
p { margin: 0; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
address { font-style: normal; }

a { color: var(--pk-ink); text-decoration: none; transition: color 0.18s ease, border-color 0.18s ease; }
a:hover { color: var(--pk-accent-deep); }

input, select, textarea, button { font: inherit; color: inherit; }

::selection { background: rgba(145, 132, 217, 0.22); }

:focus-visible {
    outline: 2px solid var(--pk-accent);
    outline-offset: 3px;
}

.pk-visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}


/* 4. Layout primitives ===================================================== */

.pk-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--pk-col-gap);
}

/* Column spans — c{start}-{span} */
.pk-c1-1  { grid-column: 1 / span 1; }
.pk-c1-3  { grid-column: 1 / span 3; }
.pk-c1-4  { grid-column: 1 / span 4; }
.pk-c1-5  { grid-column: 1 / span 5; }
.pk-c1-6  { grid-column: 1 / span 6; }
.pk-c1-7  { grid-column: 1 / span 7; }
.pk-c2-4  { grid-column: 2 / span 4; }
.pk-c2-9  { grid-column: 2 / span 9; }
.pk-c2-6  { grid-column: 2 / span 6; }
.pk-c4-8  { grid-column: 4 / span 8; }
.pk-c6-2  { grid-column: 6 / span 2; }
.pk-c6-7  { grid-column: 6 / span 7; }
.pk-c7-3  { grid-column: 7 / span 3; }
.pk-c7-4  { grid-column: 7 / span 4; }
.pk-c7-6  { grid-column: 7 / span 6; }
.pk-c8-2  { grid-column: 8 / span 2; }
.pk-c8-4  { grid-column: 8 / span 4; }
.pk-c8-5  { grid-column: 8 / span 5; }
/* Pairs with .pk-c1-7, leaving column 8 as a gutter — used by the property
   page's sidebar and the journey hubs' hero figure. Both were written
   against this class before it existed, so both were silently auto-placing
   (the property sidebar sat in the wrong column; the journey figure
   collapsed to a thumbnail) until it was added. */
.pk-c9-4  { grid-column: 9 / span 4; }
.pk-c10-3 { grid-column: 10 / span 3; }
.pk-c11-1 { grid-column: 11 / span 1; }
.pk-c11-2 { grid-column: 11 / span 2; }
.pk-c12-1 { grid-column: 12 / span 1; }

.pk-band          { padding: var(--pk-band) var(--pk-gutter) 0; }
.pk-band-tight    { padding: var(--pk-band-sm) var(--pk-gutter) 0; }
.pk-band-x        { padding-left: var(--pk-gutter); padding-right: var(--pk-gutter); }

/* Eyebrow — the small uppercase label that opens most bands */
.pk-eyebrow {
    font-size: 11.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pk-ink-muted);
}
.pk-eyebrow-accent { color: var(--pk-accent); }

.pk-lede { color: var(--pk-ink-soft); }

/* Gradient wordmark — the logo and small brand touches only. Deliberately
   NOT reused for headline text: filling large type with the gradient is the
   one look every AI-generated landing page reaches for first, and at hero
   size it reads as template rather than considered design. */
.pk-gradient-text {
    background: linear-gradient(96deg, var(--pk-brand-1), var(--pk-brand-2) 45%, var(--pk-brand-3));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* The hero's one emphasised word instead marks itself with a low highlighter
   stroke in the brand gradient, sitting behind the descender line — a single
   considered accent rather than a filled-in headline. */
.pk-highlight {
    background-image: linear-gradient(90deg, var(--pk-brand-1), var(--pk-brand-2) 50%, var(--pk-brand-3));
    background-repeat: no-repeat;
    background-position: 0 94%;
    background-size: 100% 0.07em;
}

.pk-hairline { height: 1px; border: 0; }
.pk-hairline-brand {
    background: linear-gradient(90deg, rgba(91,106,212,0.55), rgba(192,127,192,0.5) 60%, rgba(22,24,38,0.06));
}
.pk-hairline-brand-solid {
    background: linear-gradient(90deg, var(--pk-brand-1), var(--pk-brand-2) 50%, var(--pk-brand-3));
}

/* Underlined text CTA */
.pk-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--pk-ink);
    font-size: 14.5px;
}
.pk-cta:hover { border-color: var(--pk-accent); color: var(--pk-accent-deep); }
.pk-cta-quiet { border-bottom-color: rgba(22,24,38,0.2); color: var(--pk-ink-soft); }
.pk-cta-arrow { color: var(--pk-accent); transition: transform 0.18s ease; display: inline-block; }
.pk-cta:hover .pk-cta-arrow { transform: translateX(3px); }

/* Real buttons — reserved for the handful of actions that matter most (the
   hero's two primary paths, a document download): a filled or outlined
   rectangle reads as "do this now" in a way the underlined .pk-cta links,
   used everywhere else for secondary in-page links, deliberately don't. */
.pk-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    font-size: 14.5px;
    letter-spacing: 0.01em;
    border: 1px solid var(--pk-ink);
    border-radius: 2px;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.pk-btn .pk-cta-arrow { color: inherit; }
.pk-btn:hover .pk-cta-arrow { transform: translateX(3px); }
.pk-btn-primary {
    background: var(--pk-ink);
    border-color: var(--pk-ink);
    color: #fff;
}
.pk-btn-primary:hover {
    background: var(--pk-accent-deep);
    border-color: var(--pk-accent-deep);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -12px rgba(93, 82, 148, 0.55);
}
.pk-btn-outline {
    background: transparent;
    border-color: var(--pk-line-strong);
    color: var(--pk-ink);
}
.pk-btn-outline:hover {
    border-color: var(--pk-ink);
    background: rgba(22, 24, 38, 0.04);
    transform: translateY(-2px);
}
.pk-btn-sm {
    padding: 10px 18px;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Tabular figures — prices, phone numbers, counters */
.pk-num { font-variant-numeric: tabular-nums; }

/* Image slot — the branded placeholder shown until a photo is supplied */
.pk-figure { position: relative; overflow: hidden; }
.pk-figure img { width: 100%; height: 100%; object-fit: cover; }
.pk-slot {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: 24px; text-align: center;
    background:
        radial-gradient(600px 300px at 20% 10%, rgba(91,106,212,0.20), transparent 60%),
        radial-gradient(600px 320px at 80% 90%, rgba(192,127,192,0.18), transparent 62%),
        #e7e9f7;
    color: #6f7490;
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.pk-figcaption {
    position: absolute; left: 0; bottom: -30px;
    font-size: 11.5px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--pk-ink-muted);
}


/* 5. Header / navigation =================================================== */

.pk-header { position: relative; z-index: 30; }

.pk-header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 26px var(--pk-gutter) 22px;
}

.pk-logo { display: inline-flex; align-items: center; gap: 17px; }

/* The circular badge. The artwork is a JPEG whose circle is inscribed
   edge-to-edge in a square, so the only white is in the four corners —
   border-radius: 50% clips exactly that and nothing else.
   Scales with the viewport so it stays generous on a wide screen without
   crowding the nav on a narrow one. */
.pk-logo-badge {
    display: block;
    flex: none;
    width: clamp(60px, 5.4vw, 78px);
    height: clamp(60px, 5.4vw, 78px);
    border-radius: 50%;
    background: var(--pk-logo-bg);
}

/* Wordmark and strapline stack beside the badge. The name is real text rather
   than part of the image: legible at any size, and crawlable. */
.pk-logo-text { display: flex; flex-direction: column; gap: 4px; line-height: 1.1; }

.pk-logo-name {
    font-size: clamp(20px, 1.7vw, 24px);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--pk-ink);
}

.pk-logo-tag {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pk-ink-muted);
}

.pk-nav {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.2vw, 34px);
    font-size: 13.5px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: #3f424d;
}
.pk-nav a { color: inherit; }
.pk-nav a:hover,
.pk-nav a[aria-current="page"] { color: var(--pk-accent-deep); }

.pk-nav-phone {
    color: var(--pk-ink);
    padding-left: clamp(8px, 1.5vw, 18px);
    border-left: 1px solid var(--pk-line);
}

/* "Tools" disclosure menu. A panel of real links, so it is styled as a menu
   rather than reusing .pk-dropdown (which is a listbox for setting a form
   value). Opens on click, not hover — hover menus are unusable on touch and
   fire on every accidental pass on desktop. */
.pk-nav-menu { position: relative; display: inline-flex; }

.pk-nav-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    background: transparent;
    border: 0;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    cursor: pointer;
}
.pk-nav-menu-toggle:hover,
.pk-nav-menu-toggle[aria-expanded="true"],
.pk-nav-menu-toggle[aria-current="page"] { color: var(--pk-accent-deep); }
.pk-nav-menu-toggle .pk-dropdown-chevron { width: 12px; height: 12px; transition: transform 0.18s ease; }
.pk-nav-menu-toggle[aria-expanded="true"] .pk-dropdown-chevron { transform: rotate(180deg); }

.pk-nav-menu-panel {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    z-index: 40;
    min-width: 232px;
    display: flex;
    flex-direction: column;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--pk-line);
    border-radius: 10px;
    box-shadow: 0 18px 40px -14px rgba(22, 24, 38, 0.28), 0 3px 10px rgba(22, 24, 38, 0.08);
}
.pk-nav-menu-panel[hidden] { display: none; }

.pk-nav-menu-panel a {
    padding: 9px 12px;
    border-radius: 6px;
    color: var(--pk-ink-soft);
    white-space: nowrap;
    transition: background 0.16s ease, color 0.16s ease;
}
.pk-nav-menu-panel a:hover { background: var(--pk-bg-alt); color: var(--pk-ink); }
.pk-nav-menu-panel a[aria-current="page"] { color: var(--pk-accent-deep); background: var(--pk-bg-alt); }

.pk-nav-menu-all {
    margin-top: 4px;
    padding-top: 12px !important;
    border-top: 1px solid var(--pk-line);
    border-radius: 0 !important;
    font-size: 12.5px;
    letter-spacing: 0.06em;
}
.pk-nav-menu-all:hover { background: transparent !important; color: var(--pk-accent-deep) !important; }

/* Mobile menu toggle — hidden on desktop, shown by the responsive block */
.pk-nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--pk-line-strong);
    border-radius: 2px;
    padding: 7px 12px;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
}


/* 6. Hero ================================================================== */

/* stretch (grid's default) rather than end: the photo takes the copy
   column's full rendered height instead of sitting at a fixed size and
   bottom-aligning, which is what left a gap along its top edge before. */
.pk-hero { align-items: stretch; }

.pk-hero-copy {
    padding: clamp(56px, 8vw, 110px) 0 clamp(40px, 5vw, 64px) var(--pk-gutter);
}

.pk-hero-areas { margin-bottom: clamp(24px, 3vw, 38px); }

.pk-hero h1 {
    margin: 0 0 0 -0.055em;
    font-size: clamp(44px, 6.4vw, 96px);
    line-height: 0.98;
    letter-spacing: -0.035em;
}

.pk-hero-lede {
    margin-top: clamp(26px, 3vw, 40px);
    font-size: clamp(17px, 1.35vw, 19px);
    line-height: 1.55;
    max-width: 42ch;
    color: var(--pk-ink-soft);
}

.pk-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 3vw, 38px);
    margin-top: clamp(28px, 3.5vw, 44px);
    font-size: 14.5px;
}

/* Fills the grid row exactly — see the .pk-hero align-items note above. */
.pk-hero-figure { height: 100%; }

/* Rendered as a background-image div (see _image.php's $background option),
   not an <img> — background-attachment is the one thing an <img> can't do,
   and it's what makes the parallax below possible with zero JavaScript: no
   scroll listener, nothing to fail to run, nothing a browser can cache stale.
   Plain cover/center is already a complete, correct photo on its own; the
   fixed attachment is added on top by the media query underneath. */
.pk-hero-figure .pk-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* The parallax itself. Opt-in via the media query rather than a JS check,
   so "no preference" (the common case) gets it and "reduce" (an explicit
   accessibility choice) skips it — the browser enforces that, not a runtime
   check that can silently miss. Desktop-only: background-attachment:fixed
   is unreliable on mobile Safari/Chrome, where it would only add risk for
   an effect nobody scrolling with a thumb actually perceives as parallax. */
@media (prefers-reduced-motion: no-preference) and (min-width: 1001px) {
    .pk-hero-figure .pk-bg-image { background-attachment: fixed; }
}


/* 7. Search line =========================================================== */

.pk-search { margin-top: clamp(64px, 7vw, 96px); }

.pk-search-line {
    border-top: 1px solid var(--pk-line);
    border-bottom: 1px solid var(--pk-line);
    padding: clamp(22px, 3vw, 34px) 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px 18px;
    font-size: clamp(19px, 2.1vw, 28px);
    letter-spacing: -0.015em;
}

.pk-search-line span { color: var(--pk-ink-muted); }

.pk-search-field {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--pk-accent);
    padding: 0 0 4px;
    font-size: inherit;
    letter-spacing: inherit;
    color: var(--pk-ink);
    border-radius: 0;
}
.pk-search-field::placeholder { color: #a7abbd; }

/* Buy/rent is a two-option toggle, not free text, so it earns a real control
   instead of the plain underlined blanks either side of it. Built as a real
   button + listbox (Bootstrap 5's own .dropdown pattern) rather than a
   styled native <select> — a native select's internal text/arrow box is
   drawn by the OS, not CSS, so "centre the label" and "custom chevron" fight
   the browser instead of just working. This one is ours end to end. */
.pk-dropdown { position: relative; }

.pk-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 108px;
    background: #fff;
    border: 1px solid var(--pk-line-strong);
    border-radius: 3px;
    padding: 9px 16px;
    font: inherit;
    color: var(--pk-ink);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.pk-dropdown-toggle:hover { border-color: var(--pk-ink); }
.pk-dropdown-toggle:focus-visible {
    outline: none;
    border-color: var(--pk-accent);
    box-shadow: 0 0 0 3px rgba(145, 132, 217, 0.28);
}
.pk-dropdown-chevron { flex: none; width: 11px; height: 11px; transition: transform 0.18s ease; }
.pk-dropdown-toggle[aria-expanded="true"] .pk-dropdown-chevron { transform: rotate(180deg); }

/* The open menu — real elevation and rounded corners read as "this is a
   proper menu," not a form field, matching what opens when a BS5 dropdown
   toggle is clicked. */
.pk-dropdown-menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--pk-line);
    border-radius: 6px;
    box-shadow: 0 16px 36px rgba(22, 24, 38, 0.18);
    font-size: 15px;
}
.pk-dropdown-menu[hidden] { display: none; }
.pk-dropdown-menu li {
    padding: 9px 14px;
    border-radius: 4px;
    color: var(--pk-ink);
    cursor: pointer;
    white-space: nowrap;
}
.pk-dropdown-menu li:hover,
.pk-dropdown-menu li.is-active { background: var(--pk-bg-alt); }
.pk-dropdown-menu li[aria-selected="true"] { color: var(--pk-accent-deep); font-weight: 500; }

.pk-search-price { width: clamp(110px, 13vw, 170px); font-variant-numeric: tabular-nums; }

/* Submits the sentence as typed — sits right at the end of it, distinct from
   .pk-search-submit further along, which is a plain link to every property
   regardless of what's filled in above. */
.pk-search-go {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    background: var(--pk-ink);
    color: #fff;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}
.pk-search-go svg { width: 18px; height: 18px; }
.pk-search-go:hover { background: var(--pk-accent-deep); transform: translateY(-1px); }

.pk-search-submit {
    margin-left: auto;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--pk-ink);
    padding: 0 0 4px;
    font-size: clamp(15px, 1.3vw, 18px);
    letter-spacing: 0.02em;
    cursor: pointer;
}
.pk-search-submit:hover { color: var(--pk-accent-deep); border-color: var(--pk-accent); }


/* 8. Intro + stats ========================================================= */

/* No eyebrow/offset column any more — this is one centred block, not a grid
   row with an aside, so it earns its own width limit and margin auto rather
   than a grid-column slot. */
.pk-intro-inner {
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
}

.pk-intro-body {
    max-width: 54ch;
    margin: 0 auto;
    font-size: clamp(21px, 2.35vw, 32px);
    line-height: 1.42;
    letter-spacing: -0.018em;
}

.pk-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(20px, 3.5vw, 56px);
    margin-top: clamp(40px, 5vw, 64px);
    padding-top: 26px;
    border-top: 1px solid var(--pk-line);
}
.pk-stat-value {
    font-size: clamp(30px, 3.2vw, 44px);
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.pk-stat-label {
    margin-top: 10px;
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pk-ink-muted);
}


/* 9. Featured property ===================================================== */

.pk-featured { margin-top: var(--pk-band); }

.pk-featured-head {
    padding: 0 var(--pk-gutter) 22px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
}

.pk-featured-figure { height: clamp(300px, 46vw, 620px); position: relative; }

/* A soft fade along the photo's own bottom edge, independent of the card that
   sits over it — so the seam reads as one continuous surface at any width,
   rather than a hard-edged box that happens to stop 7 of 12 columns across. */
.pk-featured-figure::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 60%;
    background: linear-gradient(to bottom, transparent, rgba(10,11,20,0.65));
    pointer-events: none;
}

/* The card lifts over the photo's lower edge. Full width (not just the text
   column) so the meta row's top rule and the "Book a viewing" link reach the
   same right edge as the photo, instead of leaving columns 8-12 sitting empty
   for the card's whole height. */
.pk-featured-card {
    grid-column: 1 / span 12;
    margin-top: clamp(-90px, -6vw, -40px);
    position: relative;
    background: var(--pk-bg);
    padding: clamp(26px, 3.4vw, 44px) clamp(26px, 3.4vw, 48px) clamp(26px, 3vw, 36px) clamp(26px, 3.4vw, 48px);
    box-shadow: 0 -50px 70px -25px rgba(10,11,20,0.45);
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--pk-brand-1), var(--pk-brand-2) 50%, var(--pk-brand-3)) 1;
}
.pk-featured-card > * { max-width: 62ch; }
.pk-featured-card .pk-featured-meta { max-width: none; }

.pk-featured-card h2 {
    margin-bottom: 14px;
    font-size: clamp(28px, 3.6vw, 52px);
    line-height: 1.04;
    letter-spacing: -0.03em;
}

.pk-featured-price {
    margin-bottom: 22px;
    font-size: clamp(19px, 1.7vw, 24px);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.pk-featured-tenure {
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pk-ink-muted);
    margin-left: 10px;
}

.pk-featured-desc { margin-bottom: 26px; color: var(--pk-ink-soft); max-width: 52ch; }

.pk-featured-meta {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 3vw, 40px);
    padding-top: 20px;
    border-top: 1px solid var(--pk-line);
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #595d6c;
}
.pk-featured-meta a {
    margin-left: auto;
    color: var(--pk-ink);
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--pk-accent);
    padding-bottom: 3px;
}


/* 10. Listing rows ========================================================= */

.pk-listings-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--pk-line);
}
.pk-listings-head h2 {
    font-size: clamp(28px, 3.4vw, 46px);
    letter-spacing: -0.03em;
}
.pk-listings-head a {
    font-size: 13.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(22,24,38,0.2);
    padding-bottom: 4px;
}
.pk-listings-head a:hover { border-color: var(--pk-accent); }

/* Marks the worked examples as examples. Quiet enough not to fight the band,
   loud enough that nobody reads the rows below as live stock. */
.pk-examples-note {
    max-width: 64ch;
    margin-top: 20px;
    padding-left: 14px;
    border-left: 2px solid var(--pk-accent);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--pk-ink-muted);
}

.pk-row {
    align-items: center;
    padding: clamp(26px, 2.8vw, 38px) 0;
    border-bottom: 1px solid var(--pk-line);
}

.pk-row-index {
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--pk-accent);
    font-variant-numeric: tabular-nums;
}

/* Fixed 4:3, never a stretched letterbox. .pk-figure img is already
   object-fit: cover, so the photograph fills the box by cropping rather than
   distorting. The gradient edge and lift are unchanged. */
.pk-row-figure {
    aspect-ratio: 4 / 3;
    border-bottom: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--pk-brand-1), var(--pk-brand-2) 50%, var(--pk-brand-3)) 1;
    box-shadow: 0 30px 48px -20px rgba(22, 24, 38, 0.5), 0 10px 22px -10px rgba(22, 24, 38, 0.28);
}

.pk-row-status {
    margin-bottom: 10px;
    font-size: 11.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pk-ink-muted);
}
.pk-row-status-new { color: var(--pk-accent); }

.pk-row h3 {
    margin-bottom: 8px;
    font-size: clamp(20px, 1.9vw, 26px);
    letter-spacing: -0.024em;
}

/* Truncated to a couple of sentences in _listingCopy.php; the line-clamp is
   a belt-and-braces cap so an unusually long single sentence from the feed
   still can't stretch the row. */
.pk-row-desc {
    margin-bottom: 12px;
    color: var(--pk-ink-soft);
    max-width: 46ch;
    font-size: 14.5px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pk-row-meta {
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pk-ink-muted);
}

/* Sits above the address inside the copy block, not in its own right-hand
   column — so it is left-aligned, and "per month" runs inline after the
   figure rather than stacking underneath it. */
.pk-row-price {
    margin-bottom: 4px;
    font-size: clamp(20px, 1.9vw, 27px);
    letter-spacing: -0.022em;
    font-variant-numeric: tabular-nums;
    color: var(--pk-ink);
}
.pk-row-price small {
    margin-left: 6px;
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pk-ink-muted);
}

.pk-row h3 a { color: inherit; }
.pk-row h3 a:hover { color: var(--pk-accent-deep); }


/* 11. Services ============================================================= */

.pk-services { row-gap: clamp(28px, 4vw, 48px); }

/* The intro is much shorter than the six-item list beside it. Pinning it
   stops that gap reading as empty space — it just stays in view instead. */
.pk-services > .pk-c1-4 {
    align-self: start;
    position: sticky;
    top: clamp(24px, 4vw, 60px);
}

.pk-services h2 {
    margin-bottom: 18px;
    font-size: clamp(28px, 3.4vw, 46px);
    line-height: 1.04;
    letter-spacing: -0.03em;
    max-width: 14ch;
}

/* Fills the column below the lede rather than leaving it sitting on a sticky
   but otherwise empty pin for the rest of the section's scroll — a real
   secondary action (valuation) plus a direct line, not decoration. */
.pk-services-direct {
    margin-top: clamp(36px, 4vw, 52px);
    padding-top: clamp(24px, 3vw, 34px);
    border-top: 1px solid var(--pk-line);
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.pk-services-direct a { display: block; font-size: 15px; }

.pk-service {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 22px;
    padding: 24px 0;
    border-top: 1px solid var(--pk-line);
}
.pk-service:last-child { border-bottom: 1px solid var(--pk-line); }

.pk-service-index {
    font-size: 12px;
    color: var(--pk-accent);
    font-variant-numeric: tabular-nums;
}
.pk-service h3 {
    margin-bottom: 8px;
    font-size: clamp(19px, 1.8vw, 24px);
    letter-spacing: -0.02em;
}
.pk-service p { color: var(--pk-ink-soft); max-width: 56ch; }


/* 12. Testimonial ========================================================== */

.pk-testimonial {
    margin-top: var(--pk-band);
    background:
        radial-gradient(900px 420px at 18% 120%, rgba(192,127,192,0.16), transparent 62%),
        radial-gradient(1000px 500px at 78% -30%, rgba(91,106,212,0.18), transparent 60%),
        var(--pk-bg-alt);
}
.pk-testimonial-inner { padding: var(--pk-band-sm) var(--pk-gutter); }

.pk-testimonial blockquote {
    margin: 0;
    font-size: clamp(24px, 3.2vw, 44px);
    line-height: 1.22;
    letter-spacing: -0.028em;
    font-weight: 500;
    text-indent: -0.45em;
}
.pk-testimonial figcaption {
    margin-top: clamp(26px, 3vw, 40px);
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #595d6c;
}


/* 13. Why Parkside (trust) ================================================= */

.pk-trust {
    align-items: center;
    padding: var(--pk-band) 0 0;
}
.pk-trust-figure { height: clamp(300px, 40vw, 520px); }
.pk-trust-copy { padding-right: var(--pk-gutter); }
.pk-trust-copy h2 {
    margin: 18px 0 20px;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.06;
    letter-spacing: -0.03em;
}
.pk-trust-copy p { margin-bottom: 14px; color: var(--pk-ink-soft); }


/* 14. Areas we cover ======================================================= */

/* Same dark-band treatment as the valuation section below, so the two full-
   width "breaks" in the page read as one family rather than one-offs. */
.pk-areas-dark {
    margin-top: var(--pk-band);
    background:
        radial-gradient(900px 500px at 88% -20%, rgba(91,106,212,0.55), transparent 60%),
        radial-gradient(700px 420px at 8% 120%, rgba(192,127,192,0.34), transparent 62%),
        var(--pk-ink);
}
.pk-areas-inner { padding: var(--pk-band-sm) var(--pk-gutter); row-gap: clamp(28px, 3.5vw, 44px); }

.pk-areas-head { grid-column: 1 / -1; }
.pk-areas-head .pk-eyebrow { color: var(--pk-accent-light); }
.pk-areas-head h2 {
    margin-top: 10px;
    font-size: clamp(28px, 3.4vw, 44px);
    letter-spacing: -0.03em;
    color: #f7f8ff;
}

/* Map and card grid stretch to match each other's height — CSS Grid's default
   align-items:stretch, not a JS height-sync — so the map is never taller or
   shorter than the eight cards beside it. */
.pk-areas-map-wrap {
    position: relative;
    height: 100%;
    min-height: 340px;
    border-radius: 6px;
    overflow: hidden;
}
.pk-areas-map { height: 100%; background: var(--pk-bg-alt); }

.pk-areas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/* A card per area — icon, name, one-line description and an "Explore" link,
   filling in what used to be a bare list of underlined names. Hovering fills
   the card in the brand's deep accent, echoing the map pins' own colour. */
.pk-area-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: rgba(255,255,255,0.06);
    border-radius: 6px;
    transition: background 0.18s ease;
}
.pk-area-card:hover { background: var(--pk-accent-deep); }

.pk-area-card-top { display: flex; align-items: center; gap: 9px; }
.pk-area-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--pk-accent-light); }
.pk-area-card:hover .pk-area-icon { color: #fff; }

.pk-area-card .pk-area-name { font-size: 14.5px; font-weight: 600; color: #fff; }

.pk-area-desc {
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(243,245,254,0.6);
}
.pk-area-card:hover .pk-area-desc { color: rgba(255,255,255,0.85); }

.pk-area-link {
    margin-top: auto;
    padding-top: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pk-accent-light);
}
.pk-area-card:hover .pk-area-link { color: #fff; }
.pk-area-link .pk-cta-arrow { display: inline-block; transition: transform 0.18s ease; }
.pk-area-card:hover .pk-area-link .pk-cta-arrow { transform: translateX(3px); }

/* Caption printed over a photo itself — used on the neighbourhood figure and
   the contact page, so kept even though the areas band no longer needs it. */
.pk-caption-overlay {
    position: absolute; left: 12px; bottom: 10px;
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    color: #fff; background: rgba(22,24,38,0.55);
    padding: 4px 9px;
}

/* Custom pin — a drawn teardrop marker in the brand's deep accent, with a
   drop-shadow that follows its silhouette, rather than Leaflet's default
   blue-and-white marker image or a flat CSS dot. */
.pk-map-pin {
    cursor: pointer;
    transition: transform 0.18s ease;
    filter: drop-shadow(0 4px 8px rgba(22, 24, 38, 0.45));
}
.pk-map-pin svg { display: block; }
.pk-map-pin:hover { transform: translateY(-4px) scale(1.06); }

.pk-map-tooltip.leaflet-tooltip {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--pk-ink);
    background: #fff;
    border: 0;
    border-radius: 2px;
    box-shadow: 0 8px 20px rgba(22,24,38,0.18);
    padding: 6px 11px;
}
.pk-map-tooltip.leaflet-tooltip::before { display: none; }

/* Popups lose Leaflet's default triangle tip and gain the same rectilinear,
   shadow-lifted treatment as everything else in this design system. */
.pk-map-popup .leaflet-popup-content-wrapper {
    border-radius: 2px;
    box-shadow: 0 18px 40px rgba(22,24,38,0.28);
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--pk-brand-1), var(--pk-brand-3)) 1;
}
.pk-map-popup .leaflet-popup-tip-container { display: none; }
.pk-map-popup .leaflet-popup-content { margin: 13px 16px; font-size: 13.5px; line-height: 1.5; }
.pk-map-popup strong { font-size: 14.5px; letter-spacing: -0.01em; }
.pk-map-popup a {
    display: inline-block;
    margin-top: 4px;
    color: var(--pk-accent-deep);
    text-decoration: underline;
    text-decoration-color: var(--pk-accent-light);
    text-underline-offset: 4px;
}
.pk-map-popup .leaflet-popup-close-button { color: var(--pk-ink-muted) !important; }

/* Leaflet's own zoom control, restyled to the site's rectilinear, hairline
   language instead of its default rounded white squares. */
.pk-areas-map-wrap .leaflet-control-zoom {
    border: 1px solid var(--pk-line-strong) !important;
    border-radius: 2px !important;
    box-shadow: 0 10px 24px rgba(22,24,38,0.18) !important;
}
.pk-areas-map-wrap .leaflet-control-zoom a {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    background: #fff !important;
    color: var(--pk-ink) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
}
.pk-areas-map-wrap .leaflet-control-zoom-in { border-bottom: 1px solid var(--pk-line) !important; }
.pk-areas-map-wrap .leaflet-control-zoom a:hover {
    background: var(--pk-bg-alt) !important;
    color: var(--pk-accent-deep) !important;
}

.pk-areas-map-wrap .leaflet-control-attribution {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 10.5px;
    background: rgba(255,255,255,0.75) !important;
}


/* 15. Guides =============================================================== */

.pk-guides-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-bottom: 22px;
}
.pk-guides-head h2 {
    font-size: clamp(26px, 3vw, 40px);
    letter-spacing: -0.03em;
}

.pk-guide {
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 32px);
    padding: clamp(22px, 3vw, 30px) clamp(14px, 2vw, 22px);
    margin: 0 clamp(-14px, -2vw, -22px);
    border-top: 1px solid var(--pk-line);
    color: inherit;
    transition: background 0.18s ease;
}
.pk-guide:last-of-type { border-bottom: 1px solid var(--pk-line); }
.pk-guide:hover { background: rgba(145, 132, 217, 0.07); }

/* A drawn icon per guide, in the same square-tile language as the featured
   listing photos and the map pins — this is the "some spine" the text-only
   rows were missing, not just a colour or a shadow tweak. */
.pk-guide-icon {
    flex: none;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pk-bg-alt);
    border: 1px solid var(--pk-line);
    color: var(--pk-accent-deep);
    transition: border-color 0.18s ease, background 0.18s ease;
}
.pk-guide-icon svg { width: 24px; height: 24px; }
.pk-guide:hover .pk-guide-icon { background: #fff; border-color: var(--pk-accent-light); }

.pk-guide-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pk-guide-title { font-size: clamp(18px, 1.8vw, 24px); letter-spacing: -0.02em; }
.pk-guide-desc  { color: var(--pk-ink-muted); font-size: 15px; max-width: 56ch; }

/* Looks and reads as a real button — .pk-guide is already the clickable
   element, so this stays a span (a nested <a> would be invalid), styled with
   the same outline-button language as .pk-btn-outline. */
.pk-guide-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--pk-line-strong);
    border-radius: 2px;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pk-ink);
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.pk-guide:hover .pk-guide-btn {
    background: var(--pk-ink);
    border-color: var(--pk-ink);
    color: #fff;
}
.pk-guide:hover .pk-guide-btn .pk-cta-arrow { transform: translateX(3px); }


/* 16. Valuation (dark band) ================================================ */

.pk-valuation {
    margin-top: var(--pk-band);
    background:
        radial-gradient(900px 500px at 88% -20%, rgba(91,106,212,0.55), transparent 60%),
        radial-gradient(700px 420px at 8% 120%, rgba(192,127,192,0.34), transparent 62%),
        var(--pk-ink);
    color: var(--pk-bg);
}
.pk-valuation-inner {
    padding: var(--pk-band-sm) var(--pk-gutter);
    row-gap: clamp(32px, 4vw, 48px);
}
.pk-valuation .pk-eyebrow { color: var(--pk-accent-light); }
.pk-valuation h2 {
    font-size: clamp(30px, 4vw, 58px);
    line-height: 1.02;
    letter-spacing: -0.032em;
    color: #f7f8ff;
    max-width: 18ch;
}
.pk-valuation-lede {
    margin-bottom: clamp(26px, 3vw, 38px);
    color: rgba(243,245,254,0.78);
    max-width: 42ch;
}

.pk-valuation-form {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    align-items: baseline;
}
.pk-valuation-field {
    flex: 1 1 160px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--pk-line-dark);
    border-radius: 0;
    padding: 0 0 8px;
    font-size: 17px;
    color: #f7f8ff;
}
.pk-valuation-field::placeholder { color: rgba(243,245,254,0.45); }
.pk-valuation-field:focus-visible { outline-color: var(--pk-accent-light); }

.pk-valuation-submit {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--pk-accent-light);
    padding: 0 0 8px;
    font-size: 17px;
    color: var(--pk-accent-pale);
    cursor: pointer;
}
.pk-valuation-submit:hover { color: #fff; border-color: #fff; }

.pk-valuation-note { margin-top: 22px; font-size: 13px; color: rgba(243,245,254,0.5); }
.pk-valuation-note a { color: var(--pk-accent-pale); }
.pk-valuation-note a:hover { color: #fff; }


/* 17. Contact ============================================================== */

.pk-contact {
    padding: clamp(80px, 10vw, 140px) var(--pk-gutter) clamp(64px, 7vw, 100px);
    row-gap: clamp(40px, 5vw, 64px);
}
.pk-contact h2 {
    margin-bottom: 16px;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.06;
    letter-spacing: -0.03em;
}
.pk-contact-lede {
    margin-bottom: clamp(28px, 3vw, 40px);
    color: var(--pk-ink-soft);
    max-width: 38ch;
}

.pk-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 20px;
}
.pk-form-full { grid-column: 1 / -1; }

.pk-label {
    display: block;
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pk-ink-muted);
}
.pk-input {
    display: block;
    width: 100%;
    margin-top: 8px;
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--pk-line-strong);
    border-radius: 0;
    padding: 0 0 8px;
    font-size: 16px;
    letter-spacing: 0;
}
select.pk-input  { cursor: pointer; }
textarea.pk-input { min-height: 80px; resize: vertical; }
.pk-input:focus-visible { outline: none; border-bottom-color: var(--pk-accent); box-shadow: 0 1px 0 0 var(--pk-accent); }

.pk-form-submit {
    margin-top: clamp(26px, 3vw, 36px);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--pk-ink);
    padding: 0 0 6px;
    font-size: 16px;
    cursor: pointer;
}
.pk-form-submit:hover { color: var(--pk-accent-deep); border-color: var(--pk-accent); }

.pk-form-note { margin-top: 18px; font-size: 12.5px; color: var(--pk-ink-faint); }
.pk-form-error { margin-top: 6px; font-size: 12.5px; color: #b3261e; }

.pk-contact-figure { height: clamp(240px, 26vw, 380px); }

.pk-contact-label {
    margin-bottom: 10px;
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pk-ink-muted);
}
.pk-contact-block { margin-bottom: 30px; line-height: 1.7; }
.pk-contact-links { display: flex; flex-direction: column; gap: 7px; margin-bottom: 30px; }


/* 18. Footer =============================================================== */

.pk-footer { background: var(--pk-ink); color: #e9e9ed; }

.pk-footer-inner {
    padding: clamp(48px, 6vw, 80px) var(--pk-gutter) clamp(32px, 4vw, 48px);
    row-gap: 40px;
}

.pk-footer-logo {
    display: inline-block;
    padding: 20px 24px;
    margin-bottom: 22px;
    background: var(--pk-logo-bg);
}
.pk-footer-logo img { height: 92px; width: auto; }

.pk-footer-blurb { font-size: 14px; color: rgba(233,233,237,0.55); max-width: 30ch; }

.pk-footer-label {
    margin-bottom: 14px;
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(233,233,237,0.5);
}

.pk-footer-links { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.pk-footer-links a,
.pk-footer address,
.pk-footer-social a { color: rgba(233,233,237,0.82); }
.pk-footer a:hover { color: #fff; }

.pk-footer address { font-size: 14px; line-height: 1.75; }
.pk-footer-social { display: flex; gap: 14px; margin-top: 16px; font-size: 14px; }

.pk-footer-regulated { font-size: 13px; line-height: 2; color: rgba(233,233,237,0.62); }

.pk-footer-bar {
    padding: 18px var(--pk-gutter) 26px;
    border-top: 1px solid rgba(233,233,237,0.1);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    justify-content: space-between;
    font-size: 12.5px;
    color: rgba(233,233,237,0.5);
}
.pk-footer-bar a { color: inherit; }
.pk-footer-bar a:hover { color: var(--pk-accent-light); }
.pk-footer-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; }


/* 18b. Interior pages ====================================================== */
/* Everything below the homepage: page header, prose, property grid, and the
   honest "not written yet" note. */

.pk-page-head {
    padding: clamp(48px, 6vw, 88px) var(--pk-gutter) clamp(28px, 3.5vw, 44px);
    border-bottom: 1px solid var(--pk-line);
}
.pk-page-head h1 {
    margin: 14px 0 0;
    font-size: clamp(34px, 5vw, 68px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    max-width: 18ch;
}
/* .pk-page-head already closes with its own bottom padding plus a divider,
   so a band immediately following it doesn't need the full --pk-band top
   padding on top of that too — the combination read as one large dead gap
   before the next heading on every interior page. Only the top edge is
   trimmed; a .pk-band anywhere else on the page keeps the full rhythm. */
.pk-page-head + .pk-band { padding-top: clamp(28px, 3vw, 44px); }

.pk-page-lede {
    margin-top: clamp(18px, 2vw, 26px);
    font-size: clamp(17px, 1.35vw, 20px);
    line-height: 1.55;
    max-width: 56ch;
    color: var(--pk-ink-soft);
}

/* Breadcrumbs */
.pk-crumbs { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pk-ink-muted); }
.pk-crumbs a { color: inherit; }
.pk-crumbs a:hover { color: var(--pk-accent-deep); }
.pk-crumbs span { margin: 0 8px; color: #b2b6ca; }

/* Long-form copy */
.pk-prose { max-width: 68ch; }
.pk-prose h2 {
    margin: clamp(34px, 4vw, 52px) 0 14px;
    font-size: clamp(22px, 2.2vw, 30px);
    letter-spacing: -0.024em;
}
.pk-prose h3 {
    margin: clamp(24px, 3vw, 34px) 0 10px;
    font-size: clamp(18px, 1.7vw, 22px);
    letter-spacing: -0.02em;
}
.pk-prose p { margin-bottom: 16px; color: var(--pk-ink-soft); }
.pk-prose ul, .pk-prose ol { margin: 0 0 18px; padding-left: 20px; color: var(--pk-ink-soft); }
.pk-prose li { margin-bottom: 8px; }
.pk-prose a { border-bottom: 1px solid var(--pk-accent); }

/* Quick-facts panel — area landing pages */
.pk-quick-facts {
    align-self: start;
    padding: clamp(22px, 2.5vw, 30px);
    background: var(--pk-bg-alt);
    border: 1px solid var(--pk-line);
    border-radius: 10px;
}
.pk-quick-facts-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--pk-line);
}
.pk-quick-facts-row:last-of-type { border-bottom: none; }
.pk-quick-facts-label {
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pk-ink-muted);
    flex-shrink: 0;
}
.pk-quick-facts-value { font-size: 14.5px; text-align: right; line-height: 1.5; }

/* FAQ — area landing pages */
.pk-faq { border-top: 1px solid var(--pk-line); }
.pk-faq-item { padding: clamp(20px, 2.2vw, 26px) 0; border-bottom: 1px solid var(--pk-line); }
.pk-faq-item h3 { font-size: clamp(17px, 1.5vw, 19px); letter-spacing: -0.015em; margin-bottom: 8px; }
.pk-faq-item p { font-size: 14.5px; line-height: 1.7; color: var(--pk-ink-soft); max-width: 68ch; margin: 0; }

/* The three journey hubs, offered under the homepage services heading */
.pk-services-journeys {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: clamp(24px, 3vw, 34px);
    padding-top: clamp(20px, 2.4vw, 28px);
    border-top: 1px solid var(--pk-line);
}

/* Free tools — stamp duty / mortgage / yield calculators */
.pk-tool-card {
    padding: clamp(26px, 3vw, 40px);
    background: var(--pk-bg-alt);
    border: 1px solid var(--pk-line);
    border-radius: 10px;
}
.pk-tool-card .pk-form-grid { margin-top: 4px; }

.pk-tool-results {
    margin-top: clamp(24px, 3vw, 32px);
    padding-top: clamp(24px, 3vw, 32px);
    border-top: 1px solid var(--pk-line);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.pk-tool-result {
    padding: 18px;
    background: #fff;
    border: 1px solid var(--pk-line);
    border-radius: 8px;
    text-align: center;
}
.pk-tool-result-label {
    font-size: 11px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--pk-ink-muted);
    margin-bottom: 8px;
}
.pk-tool-result-value {
    font-size: clamp(22px, 2.2vw, 30px);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.pk-tool-result-value.is-accent { color: var(--pk-accent-deep); }
.pk-tool-note { margin-top: 14px; font-size: 12.5px; color: var(--pk-ink-faint); }

/* Repayment / interest-only — a real segmented control (same visual
   language as .pk-prop-tabs) rather than radio buttons styled as pills. */
.pk-tool-type {
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    width: 100%;
    background: #fff;
    border: 1px solid var(--pk-line);
    border-radius: 9px;
}
.pk-tool-type-btn {
    flex: 1 1 0;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--pk-ink-muted);
    text-align: center;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.pk-tool-type-btn:hover { color: var(--pk-ink); }
.pk-tool-type-btn.is-active {
    color: var(--pk-ink);
    background: var(--pk-bg-alt);
    box-shadow: 0 6px 16px -6px rgba(22, 24, 38, 0.22), 0 1px 3px rgba(22, 24, 38, 0.08);
}

/* Rate-band tables — stamp duty calculator, and anywhere else a simple
   figure-per-row table is useful. */
.pk-rate-table { border-top: 1px solid var(--pk-line); }
.pk-rate-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--pk-line);
    font-size: 14.5px;
}
.pk-rate-row-band { color: var(--pk-ink-soft); }
.pk-rate-row-rate { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Jargon buster — an alphabetised term list */
.pk-glossary-letter {
    font-size: clamp(28px, 3vw, 40px);
    letter-spacing: -0.03em;
    color: var(--pk-accent-deep);
    margin: clamp(36px, 4vw, 52px) 0 4px;
}
.pk-glossary-letter:first-child { margin-top: 0; }
.pk-glossary-term { padding: clamp(18px, 2vw, 22px) 0; border-bottom: 1px solid var(--pk-line); }
.pk-glossary-term dt { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
.pk-glossary-term dd { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--pk-ink-soft); max-width: 68ch; }

/* Sales / lettings tabs — three real routes, not a JS toggle (see
   _propertyBrowseTabs.php). Shared by the combined, for-sale and to-let
   pages so the same three tabs appear wherever you land. A proper segmented
   control — a tinted track with the active tab as a floating white pill —
   rather than plain underlined text, so it reads as a real switch instead
   of another row of links. overflow-y is pinned to hidden alongside the
   horizontal auto-scroll: setting only overflow-x computes the other axis
   to auto too, which was surfacing a stray native scrollbar on the right
   the moment the row's content was a fraction of a pixel taller than it. */
.pk-prop-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    margin-bottom: clamp(28px, 3.5vw, 44px);
    background: var(--pk-bg-alt);
    border: 1px solid var(--pk-line);
    border-radius: 9px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}
.pk-prop-tab {
    flex: none;
    padding: 11px 22px;
    border-radius: 6px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--pk-ink-muted);
    white-space: nowrap;
    transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.pk-prop-tab:hover { color: var(--pk-ink); }
.pk-prop-tab.is-active {
    color: var(--pk-ink);
    background: #fff;
    box-shadow: 0 6px 16px -6px rgba(22, 24, 38, 0.22), 0 1px 3px rgba(22, 24, 38, 0.08);
}

/* Filter bar — three simple controls (see _propertyFilters.php), filtered
   client-side by initPropertyFilters() in script.js. Given a real panel —
   tinted background, border, icons on each control — rather than a loose
   row of bare inputs sitting directly on the page. */
.pk-prop-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: clamp(18px, 2.2vw, 24px) clamp(20px, 2.5vw, 28px);
    margin-bottom: clamp(28px, 3vw, 44px);
    background: var(--pk-bg-alt);
    border: 1px solid var(--pk-line);
    border-radius: 10px;
}
.pk-prop-filters-label {
    flex: 0 0 100%;
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pk-ink-muted);
}
.pk-prop-filters-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.pk-filter-icon { width: 16px; height: 16px; color: var(--pk-accent-deep); flex-shrink: 0; }
.pk-dropdown-sm .pk-dropdown-toggle {
    min-width: 148px;
    padding: 12px 18px;
    font-size: 14.5px;
    box-shadow: 0 1px 2px rgba(22, 24, 38, 0.04);
}
.pk-dropdown-sm .pk-dropdown-toggle [data-dropdown-label] { margin-right: auto; text-align: left; }

.pk-filter-price-wrap { position: relative; }
.pk-filter-price-wrap .pk-filter-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.pk-filter-price {
    appearance: none;
    width: 148px;
    background: #fff;
    border: 1px solid var(--pk-line-strong);
    border-radius: 3px;
    padding: 12px 16px 12px 40px;
    font-size: 14.5px;
    color: var(--pk-ink);
    box-shadow: 0 1px 2px rgba(22, 24, 38, 0.04);
}
.pk-filter-price::placeholder { color: #a7abbd; }
.pk-filter-price:focus-visible { outline: 2px solid var(--pk-accent); outline-offset: 2px; }

.pk-prop-filter-count {
    margin-left: auto;
    font-size: 15px;
    font-weight: 600;
    color: var(--pk-ink);
    font-variant-numeric: tabular-nums;
}
.pk-prop-filter-count span { color: var(--pk-accent-deep); }

.pk-prop-empty {
    padding: clamp(40px, 5vw, 64px) 0;
    color: var(--pk-ink-muted);
    font-size: 15px;
}

/* Property grid — few properties, so each card is built to stand out on its
   own rather than reading as one dense catalogue: a bigger photo with the
   same lifted-card treatment as the listing rows and featured property
   (brand-gradient edge + deep shadow), and a real lift on hover. */
.pk-props {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: clamp(32px, 4vw, 56px);
}
.pk-prop { display: flex; flex-direction: column; color: inherit; transition: transform 0.22s ease; }
.pk-prop.is-filtered-out { display: none; }
.pk-prop:hover { transform: translateY(-4px); }
.pk-prop-figure {
    height: clamp(260px, 26vw, 340px);
    margin-bottom: 20px;
    border-bottom: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--pk-brand-1), var(--pk-brand-2) 50%, var(--pk-brand-3)) 1;
    box-shadow: 0 34px 54px -20px rgba(22, 24, 38, 0.5), 0 12px 24px -10px rgba(22, 24, 38, 0.3);
    transition: box-shadow 0.22s ease;
}
.pk-prop:hover .pk-prop-figure { box-shadow: 0 44px 70px -20px rgba(22, 24, 38, 0.6), 0 16px 30px -10px rgba(22, 24, 38, 0.35); }
.pk-prop:hover .pk-prop-title { color: var(--pk-accent-deep); }
.pk-prop-status {
    font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--pk-ink-muted); margin-bottom: 10px;
}
.pk-prop-title { font-size: clamp(21px, 2vw, 26px); letter-spacing: -0.025em; margin-bottom: 10px; }
.pk-prop-price {
    font-size: clamp(20px, 1.8vw, 24px); letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums; margin-bottom: 10px;
}
.pk-prop-meta {
    font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--pk-ink-muted);
}

/* Area index — the by-region pages, the area/guide pages' cross-link lists,
   and register-with-us's coverage list. Column gap matters here: with none,
   one item's trailing arrow sits flush against the next column's name (reads
   as "→Totteridge" rather than "Woodside Park →"). */
.pk-area-index {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0 40px;
    border-top: 1px solid var(--pk-line);
}
.pk-area-item {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 22px 0;
    border-bottom: 1px solid var(--pk-line);
    color: inherit;
}
.pk-area-item:hover { color: var(--pk-accent-deep); }
.pk-area-name { font-size: clamp(18px, 1.7vw, 23px); letter-spacing: -0.02em; }
.pk-area-arrow { color: var(--pk-accent); }

/* Honest empty state — used where copy or a feed is still outstanding.
   Says what is missing and what unblocks it, rather than shipping filler. */
.pk-pending {
    max-width: 62ch;
    margin-top: clamp(28px, 3.5vw, 44px);
    padding: 26px 28px;
    background: rgba(145, 132, 217, 0.07);
    border-left: 3px solid var(--pk-accent);
}
.pk-pending h2 {
    margin: 0 0 10px;
    font-size: 17px;
    letter-spacing: -0.01em;
}
.pk-pending p { font-size: 14.5px; color: var(--pk-ink-soft); margin-bottom: 10px; }
.pk-pending p:last-child { margin-bottom: 0; }
.pk-pending code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    background: rgba(22, 24, 38, 0.06);
    padding: 1px 5px;
}

/* Interior contact form — same controls as the homepage, own width */
.pk-form-narrow { max-width: 620px; }


/* 19. Cookie consent ======================================================= */

#cookieConsentPopup {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 200;
    width: min(720px, calc(100% - 32px));
    padding: 20px 22px;
    background: var(--pk-ink);
    color: #e9e9ed;
    border-top: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--pk-brand-1), var(--pk-brand-3)) 1;
    box-shadow: 0 18px 44px rgba(22, 24, 38, 0.28);
}
#cookieConsentPopup p { font-size: 13.5px; color: rgba(233,233,237,0.8); margin-bottom: 14px; }
#cookieConsentPopup a { color: var(--pk-accent-pale); }

.pk-cookie-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pk-cookie-btn {
    background: transparent;
    border: 1px solid rgba(233,233,237,0.35);
    border-radius: 2px;
    padding: 8px 18px;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #e9e9ed;
    cursor: pointer;
}
.pk-cookie-btn:hover { border-color: var(--pk-accent-light); color: #fff; }
.pk-cookie-btn-accept { border-color: var(--pk-accent-light); color: var(--pk-accent-pale); }


/* 20. Flash messages ======================================================= */

.pk-flash {
    padding: 14px 18px;
    margin-bottom: 22px;
    font-size: 14px;
    border-left: 3px solid var(--pk-accent);
    background: rgba(145, 132, 217, 0.10);
}
.pk-flash-error { border-left-color: #b3261e; background: rgba(179, 38, 30, 0.08); }


/* 21. Property view ========================================================= */

/* Light variant of .pk-btn — used inside the dark contact card below, where
   the standard dark-ink .pk-btn-primary would disappear against it. */
.pk-btn-light {
    background: #fff;
    border-color: #fff;
    color: var(--pk-ink);
}
.pk-btn-light:hover {
    background: var(--pk-accent-light);
    border-color: var(--pk-accent-light);
    color: var(--pk-ink);
    transform: translateY(-2px);
}

.pk-prop-status-badge {
    display: inline-block;
    padding: 6px 14px;
    margin-bottom: 14px;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--pk-accent-deep);
}
.pk-prop-status-badge.is-taken { background: var(--pk-ink-muted); }

.pk-prop-header h1 {
    font-size: clamp(28px, 3.4vw, 44px);
    letter-spacing: -0.03em;
    line-height: 1.08;
    max-width: 24ch;
}
.pk-prop-postcode { margin-top: 8px; color: var(--pk-ink-muted); font-size: 15px; }
.pk-prop-price {
    margin-top: 18px;
    font-size: clamp(26px, 2.6vw, 34px);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.pk-prop-price-suffix { font-size: 15px; color: var(--pk-ink-muted); font-weight: 400; }

/* Gallery */
.pk-prop-gallery-main {
    position: relative;
    display: block;
    width: 100%;
    height: clamp(320px, 46vw, 560px);
    padding: 0;
    border: 0;
    cursor: pointer;
    overflow: hidden;
    background: var(--pk-bg-alt);
}
.pk-prop-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.pk-prop-gallery-main:hover img { transform: scale(1.03); }
.pk-prop-gallery-count {
    position: absolute; right: 12px; bottom: 12px;
    display: flex; align-items: center; gap: 7px;
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    color: #fff; background: rgba(22,24,38,0.6);
    padding: 7px 12px;
}
.pk-prop-gallery-count svg { width: 14px; height: 14px; }

.pk-prop-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}
.pk-prop-thumb {
    flex: none;
    width: 92px;
    height: 66px;
    padding: 0;
    border: 2px solid transparent;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.18s ease, border-color 0.18s ease;
}
.pk-prop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-prop-thumb:hover { opacity: 0.9; }
.pk-prop-thumb.is-active { opacity: 1; border-color: var(--pk-accent-deep); }

/* Lightbox — plain fixed overlay, built the same dependency-free way as the
   rest of the page's interactivity (see initDropdowns in script.js). */
.pk-lightbox {
    position: fixed; inset: 0; z-index: 2000;
    display: none;
    flex-direction: column;
    background: rgba(15, 16, 26, 0.97);
}
.pk-lightbox.is-open { display: flex; }
.pk-lightbox-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px clamp(18px, 3vw, 36px);
    color: rgba(255,255,255,0.7);
    font-size: 13px;
}
.pk-lightbox-close {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
}
.pk-lightbox-close:hover { background: rgba(255,255,255,0.16); }
.pk-lightbox-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0 clamp(48px, 7vw, 96px) 24px;
    min-height: 0;
}
.pk-lightbox-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pk-lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
}
.pk-lightbox-nav:hover { background: rgba(255,255,255,0.18); }
.pk-lightbox-prev { left: clamp(8px, 2vw, 28px); }
.pk-lightbox-next { right: clamp(8px, 2vw, 28px); }

/* Meta row — bed / bath / type */
.pk-prop-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: clamp(24px, 3vw, 36px);
    padding-top: clamp(20px, 2.5vw, 28px);
    border-top: 1px solid var(--pk-line);
}
.pk-prop-meta-item { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--pk-ink-soft); }
.pk-prop-meta-item svg { width: 19px; height: 19px; color: var(--pk-accent-deep); flex-shrink: 0; }
.pk-prop-meta-item strong { color: var(--pk-ink); font-weight: 600; }

/* Panels — features / description sit under plain hairline rules rather than
   drop-shadow cards, matching the rest of the page's flatter language. */
.pk-prop-panel { margin-top: clamp(40px, 5vw, 64px); }
.pk-prop-panel h2 {
    margin-bottom: clamp(18px, 2vw, 26px);
    font-size: clamp(19px, 1.8vw, 23px);
    letter-spacing: -0.02em;
}

.pk-prop-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.pk-prop-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: var(--pk-ink-soft);
    line-height: 1.5;
}
.pk-prop-features svg { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; color: var(--pk-accent-deep); }

.pk-prop-description { color: var(--pk-ink-soft); font-size: 15px; line-height: 1.7; max-width: 68ch; }
.pk-prop-description p { margin-bottom: 1em; }

/* Sidebar */
.pk-prop-sidebar-col { align-self: start; position: sticky; top: clamp(24px, 4vw, 60px); }
.pk-prop-sidebar { display: flex; flex-direction: column; gap: 22px; }

.pk-prop-contact-card {
    padding: clamp(28px, 3vw, 36px);
    background:
        radial-gradient(700px 380px at 90% -20%, rgba(91,106,212,0.5), transparent 60%),
        radial-gradient(600px 340px at 5% 120%, rgba(192,127,192,0.3), transparent 62%),
        var(--pk-ink);
}
.pk-prop-contact-card .pk-eyebrow { color: var(--pk-accent-light); margin-bottom: 8px; }
.pk-prop-contact-card h3 { color: #fff; font-size: 21px; letter-spacing: -0.02em; margin-bottom: 20px; }
.pk-prop-contact-links { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.pk-prop-contact-links a {
    display: flex; align-items: center; gap: 10px;
    color: #f3f5fe; font-size: 15px;
}
.pk-prop-contact-links a:hover { color: var(--pk-accent-light); }
.pk-prop-contact-links svg { width: 17px; height: 17px; color: var(--pk-accent-light); flex-shrink: 0; }
.pk-prop-contact-card .pk-btn { width: 100%; justify-content: center; }
.pk-prop-contact-card .pk-btn + .pk-btn { margin-top: 10px; }

.pk-prop-docs {
    padding: clamp(20px, 2.5vw, 26px);
    border: 1px solid var(--pk-line);
}
.pk-prop-doc {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--pk-line);
}
.pk-prop-doc:last-child { border-bottom: 0; padding-bottom: 0; }
.pk-prop-doc:first-child { padding-top: 0; }
.pk-prop-doc-icon {
    flex: none;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: var(--pk-bg-alt);
    color: var(--pk-accent-deep);
}
.pk-prop-doc-icon svg { width: 19px; height: 19px; }
.pk-prop-doc-body { flex: 1 1 auto; min-width: 0; }
.pk-prop-doc-title { font-size: 13.5px; font-weight: 600; }
.pk-prop-doc-sub { font-size: 12px; color: var(--pk-ink-muted); }
.pk-prop-doc-arrow { color: var(--pk-ink-muted); flex-shrink: 0; }
.pk-prop-doc:hover .pk-prop-doc-icon { background: var(--pk-accent-pale); }
.pk-prop-doc:hover .pk-prop-doc-title { color: var(--pk-accent-deep); }

.pk-prop-map-wrap {
    position: relative;
    height: 220px;
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--pk-brand-1), var(--pk-brand-2) 50%, var(--pk-brand-3)) 1;
}
.pk-prop-map { height: 100%; background: var(--pk-bg-alt); }

.pk-prop-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--pk-ink-muted);
}
.pk-prop-back:hover { color: var(--pk-ink); }
.pk-prop-back svg { width: 15px; height: 15px; }


/* 22. Responsive =========================================================== */

@media (max-width: 1000px) {
    .pk-grid {
        grid-template-columns: 1fr;
        row-gap: 30px;
    }
    .pk-grid > * {
        grid-column: 1 / -1 !important;
        text-align: left !important;
    }

    /* Several sections are full-bleed .pk-grid on desktop and get their gutter
       from a *one-sided* padding on whichever child sits against the edge —
       .pk-hero-copy pads left only, .pk-trust-copy right only, because the
       other side is covered by the photograph beside it. Once stacked there
       is no photograph beside them, so both sides need a real gutter or the
       copy (and the hero's buttons) run straight off the screen edge. This
       block previously forced padding-right: 0 on every grid child, which
       actively caused that overflow rather than fixing it. */
    .pk-hero-copy,
    .pk-trust-copy {
        padding-left: var(--pk-gutter);
        padding-right: var(--pk-gutter);
    }

    /* No overlap at this width (margin-top is reset to 0 below), so the
       shadow/gradient line that sells the overlap on desktop would just be a
       stray mark above a card that no longer touches the photo. */
    .pk-featured-card {
        margin-top: 0;
        padding: 26px 0 0 0;
        box-shadow: none;
        border-top: 0;
        border-image: none;
    }

    /* Stacked single column here, so pinning the services intro would leave it
       sitting fixed near the top while the list scrolls past underneath it. */
    .pk-services > .pk-c1-4 { position: static; }
    .pk-hero-copy     { padding-bottom: 30px; }
    .pk-hero-figure   { height: clamp(260px, 52vw, 420px); }
    /* .pk-row-figure is deliberately not in this list — its 4:3 aspect-ratio
       governs at every width, and a fixed height here would override it back
       into a stretched crop on exactly the screens where it matters most. */
    .pk-trust-figure,
    .pk-contact-figure { height: clamp(200px, 40vw, 300px); }
    .pk-areas-map-wrap { height: clamp(240px, 50vw, 320px); min-height: 0; }
    .pk-areas-grid { margin-top: 24px; }

    .pk-guide {
        flex-wrap: wrap;
        margin: 0;
        padding: 22px 0;
    }
    .pk-guide-btn { margin-left: calc(54px + clamp(20px, 3vw, 32px)); }

    .pk-nav {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 12px 18px;
    }
    .pk-nav-phone { border-left: 0; padding-left: 0; }
    .pk-logo-tag { display: none; }

    .pk-trust { padding-top: var(--pk-band); }
    .pk-trust-copy { padding-right: 0; }

    /* Stacked single column here, so a pinned sidebar would float fixed
       above content that has already scrolled past it. */
    .pk-prop-sidebar-col { position: static; }

    /* Rows alternate image ←→ copy on desktop. Stacked, that alternation
       stops reading as a rhythm and just looks inconsistent — every other
       row leads with text while its neighbours lead with a photo. Explicit
       order puts the photograph first on every row, so the column reads
       index → image → details the whole way down. */
    .pk-row .pk-row-index  { order: 1; }
    .pk-row .pk-row-figure { order: 2; }
    .pk-row > div          { order: 3; }
}

@media (max-width: 640px) {
    .pk-prop-features { grid-template-columns: 1fr; }
    /* Full-width and stacked rather than side by side — at this width two
       real buttons (wider than the underlined links they replaced) can
       overflow the line rather than wrapping cleanly. */
    .pk-hero-actions { flex-direction: column; align-items: stretch; }
    .pk-hero-actions .pk-btn { justify-content: center; }

    .pk-form-grid { grid-template-columns: 1fr; }
    .pk-search-line { font-size: 19px; }
    .pk-search-submit { margin-left: 0; }
    .pk-nav { gap: 12px 16px; font-size: 13px; }

    .pk-header-inner { grid-template-columns: minmax(0, 1fr) auto; }

    /* Badge and name stay; the strapline is dropped by the 1000px rule above */
    .pk-logo { gap: 13px; }
    .pk-logo-badge { width: 54px; height: 54px; }
    .pk-logo-name { font-size: 18px; }

    /* Collapse the nav behind a toggle on small screens */
    .pk-nav-toggle { display: inline-block; }
    .pk-nav {
        display: none;
        grid-column: 1 / -1;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        padding-top: 8px;
    }
    .pk-nav.is-open { display: flex; }

    /* The nav is a stacked column here, so the tools panel expands in flow
       instead of floating over the links below it. */
    .pk-nav-menu { flex-direction: column; align-items: flex-start; width: 100%; }
    .pk-nav-menu-panel {
        position: static;
        min-width: 0;
        width: 100%;
        margin-top: 10px;
        padding: 6px;
        box-shadow: none;
        background: var(--pk-bg-alt);
    }
    .pk-nav-menu-panel a { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}