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

   A Bootstrap 5 theme. Bootstrap supplies the reset, the 12-column grid, the
   utilities and the JS components (collapse, carousel, dropdown, accordion,
   modal); everything below is the Parkside skin on top of it.

   The page structure is the client's own — the band order, the navy masthead
   with the mark centred, the gradient, the pill buttons and the clipped
   footer all come from their long-standing Joomla site. The *treatment* is
   modernised: a proper type scale, generous rhythm, soft layered shadows,
   hairline borders, restrained use of the gradient as an accent rather than a
   wash, and a hero that reads as photography rather than a bordered pill on a
   dimmed image.

   Sections
     1.  Fonts
     2.  Tokens + Bootstrap variable overrides
     3.  Base typography
     4.  Buttons
     5.  Header: top bar, masthead, navigation, search panel
     6.  Hero carousel
     7.  Sub-banner (interior pages)
     8.  Welcome band
     9.  Why choose us
     10. Featured property
     11. Property cards + latest band
     12. Team band
     13. Enquiry band + forms
     14. Portals strip
     15. Footer + copyright
     16. Interior page furniture
     17. Property browse + detail
     18. Tools + calculators
     19. Cookie consent + flashes
     20. Utilities + motion
     21. Responsive
   ========================================================================== */


/* 1. Fonts ================================================================= */
/* Open Sans, self-hosted. Variable file, so one download covers 300–700 and no
   request reaches a third party before the visitor has made a cookie choice. */

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/opensans-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: 'Open Sans';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/opensans-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 + Bootstrap variable overrides ================================= */

:root {
    /* Brand — measured from the client's own template. */
    --pk-grad-1: #4e68d8;
    --pk-grad-2: #ba75c9;
    --pk-gradient: linear-gradient(90deg, #4e68d8 0%, #ba75c9 100%);
    --pk-gradient-135: linear-gradient(135deg, #4e68d8 0%, #ba75c9 100%);
    --pk-navy: #151f42;
    --pk-navy-deep: #0b1330;
    --pk-purple: #9469be;

    /* Ink + ground. A slightly cool neutral ramp rather than flat greys. */
    --pk-ink: #1c2033;
    --pk-ink-soft: #4c5166;
    --pk-muted: #7b8095;
    --pk-line: #e6e8f0;
    --pk-line-strong: #d3d7e4;
    --pk-bg: #ffffff;
    --pk-bg-soft: #f6f7fb;
    --pk-bg-tint: #f0f2f9;

    /* Radii — pill stays for buttons (brand), everything else softens. */
    --pk-r-sm: 10px;
    --pk-r: 16px;
    --pk-r-lg: 24px;

    /* Layered shadows. Two stops each: a tight contact shadow and a wide
       ambient one, which reads far cleaner than the old 3px hard offset. */
    --pk-shadow-sm: 0 1px 2px rgba(20, 24, 50, .05), 0 4px 12px -6px rgba(20, 24, 50, .12);
    --pk-shadow: 0 1px 2px rgba(20, 24, 50, .05), 0 12px 28px -14px rgba(20, 24, 50, .22);
    --pk-shadow-lg: 0 2px 4px rgba(20, 24, 50, .06), 0 28px 54px -22px rgba(20, 24, 50, .32);

    /* Vertical rhythm. */
    --pk-band: clamp(56px, 7vw, 104px);
    --pk-band-tight: clamp(38px, 4.5vw, 64px);

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

    /* Bootstrap overrides. */
    --bs-body-font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-color: #4c5166;
    --bs-body-bg: #ffffff;
    --bs-link-color: #1c2033;
    --bs-link-hover-color: #4e68d8;
    --bs-border-color: #e6e8f0;
}


/* 3. Base typography ======================================================= */

html {
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
}

body {
    font-family: var(--bs-body-font-family);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
    color: var(--pk-ink-soft);
    background: var(--pk-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--bs-body-font-family);
    font-weight: 300;
    color: var(--pk-ink);
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin: 0 0 .6em;
}

/* Uppercase is the client's house style, but only where it earns its keep:
   the page and section heads. Card titles read better in sentence case. */
h1, .h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); text-transform: uppercase; letter-spacing: .005em; }
h2, .h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); text-transform: uppercase; letter-spacing: .005em; }
h3, .h3 { font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-weight: 400; letter-spacing: -0.005em; }
h4, .h4 { font-size: 1.15rem; font-weight: 600; }
h5, .h5 { font-size: 1rem; font-weight: 600; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

.lead {
    font-size: clamp(1.06rem, 1.5vw, 1.28rem);
    font-weight: 300;
    line-height: 1.55;
    color: var(--pk-ink-soft);
}

a {
    color: var(--pk-ink);
    text-decoration: none;
    transition: color .2s var(--pk-ease);
}
a:hover, a:focus-visible { color: var(--pk-grad-1); text-decoration: none; }

/* Body copy links stay underlined — they need to look like links. */
.pk-prose a, .pk-form-note a, .pk-welcome a { text-decoration: underline; text-underline-offset: .15em; }

hr {
    border: 0;
    border-top: 1px solid var(--pk-line);
    opacity: 1;
    margin: 2rem 0;
}

::selection { background: rgba(78, 104, 216, .16); }

:focus-visible {
    outline: 2px solid var(--pk-grad-1);
    outline-offset: 3px;
    border-radius: 3px;
}

img { max-width: 100%; height: auto; }
address { font-style: normal; }
small { font-size: .82em; }

.pk-eyebrow {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pk-grad-1);
    margin: 0 0 .85rem;
}

/* A gradient rule used to close a heading block. */
.pk-rule {
    width: 64px;
    height: 3px;
    border: 0;
    opacity: 1;
    border-radius: 3px;
    margin: 0 0 1.6rem;
    background: var(--pk-gradient);
}
.pk-rule-center { margin-left: auto; margin-right: auto; }

/* Ticked list. */
ul.pk-ticks { list-style: none; padding-left: 0; margin: 0 0 1.15rem; }
ul.pk-ticks li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: .75rem;
    line-height: 1.6;
}
ul.pk-ticks li::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: .72em;
    content: "\f00c";
    position: absolute;
    left: 0;
    top: .28em;
    width: 1.35rem;
    height: 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--pk-grad-1);
    background: rgba(78, 104, 216, .1);
}
ul.pk-ticks li strong { color: var(--pk-ink); font-weight: 600; }


/* 4. Buttons =============================================================== */

/* Single-class selector on purpose: an `a.pk-btn` here would out-specify the
   modifiers below and leave them white-on-white on anchors. */
.pk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: var(--pk-ink);
    background: transparent;
    border: 1px solid var(--pk-line-strong);
    border-radius: 999px;
    padding: 1rem 1.75rem;
    cursor: pointer;
    transition: background-color .25s var(--pk-ease), color .25s var(--pk-ease),
                border-color .25s var(--pk-ease), transform .25s var(--pk-ease),
                box-shadow .25s var(--pk-ease);
}

.pk-btn:hover,
.pk-btn:focus-visible {
    color: #fff;
    background: var(--pk-navy);
    border-color: var(--pk-navy);
    transform: translateY(-2px);
    box-shadow: var(--pk-shadow-sm);
    text-decoration: none;
}

/* The primary action — gradient, which is where the brand now earns attention
   instead of washing whole bands. */
.pk-btn-solid {
    color: #fff;
    background: var(--pk-gradient-135);
    border-color: transparent;
    background-size: 140% 100%;
    background-position: 0 0;
}
.pk-btn-solid:hover, .pk-btn-solid:focus-visible {
    color: #fff;
    background: var(--pk-gradient-135);
    background-size: 140% 100%;
    background-position: 100% 0;
    border-color: transparent;
    box-shadow: 0 12px 26px -12px rgba(78, 104, 216, .7);
}

/* Reversed — for the gradient bands and over photography. */
.pk-btn-light {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .55);
    backdrop-filter: blur(4px);
}
.pk-btn-light:hover, .pk-btn-light:focus-visible {
    background: #fff;
    border-color: #fff;
    color: var(--pk-navy);
}

.pk-btn-block { display: flex; width: 100%; }
.pk-btn-sm { font-size: .74rem; padding: .78rem 1.35rem; }

/* Read-more, as used on every card. A quiet text link with a moving arrow
   rather than a second competing button. */
.pk-readmore {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pk-grad-1);
    background: none;
    border: 0;
    padding: 0;
}
.pk-readmore::after {
    content: "\f061";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: .8em;
    transition: transform .25s var(--pk-ease);
}
.pk-readmore:hover, .pk-readmore:focus-visible { color: var(--pk-grad-2); text-decoration: none; }
.pk-readmore:hover::after { transform: translateX(4px); }


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

/* 5a. Top contact bar. */
.pk-topbar {
    background: var(--pk-gradient);
    color: #fff;
    padding: .6rem 0;
    font-size: .82rem;
}
.pk-topbar a, .pk-topbar a:visited { color: #fff; }
.pk-topbar a:hover { color: #fff; text-decoration: underline; }
.pk-topbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .4rem 1.5rem;
}
.pk-topbar-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    font-size: .9rem;
    margin-right: .3rem;
    transition: background-color .25s var(--pk-ease);
}
.pk-topbar-social a:hover { background: rgba(255, 255, 255, .2); text-decoration: none; }
.pk-topbar-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem 1.5rem;
    font-weight: 600;
    margin-left: auto;
}
.pk-topbar-contact i { margin-right: .45rem; opacity: .85; }

/* 5b. Masthead. */
.pk-masthead {
    background: var(--pk-navy);
    padding: 1.6rem 0 1.4rem;
    text-align: center;
}
.pk-masthead-logo { display: inline-block; }
.pk-masthead-logo img {
    display: block;
    margin: 0 auto;
    width: 150px;
    height: auto;
    transition: transform .3s var(--pk-ease);
}
.pk-masthead-logo:hover img { transform: translateY(-2px); }
.pk-masthead-logo:hover { text-decoration: none; }
.pk-masthead-tag {
    display: block;
    margin-top: .85rem;
    color: rgba(255, 255, 255, .62);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
}

/* 5c. Primary navigation. Sticks to the top once the masthead scrolls away. */
.pk-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--pk-navy-deep);
    padding: 0;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .07);
}

.pk-navbar .navbar-nav { margin: 0 auto; }

.pk-navbar .nav-link,
.pk-navbar .pk-nav-btn {
    position: relative;
    display: block;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .82);
    background: transparent;
    border: 0;
    padding: 1.1rem 1.2rem;
    transition: color .25s var(--pk-ease);
}

/* A gradient underline that grows from the centre, instead of the old solid
   block fill — lighter, and it doesn't shift the type. */
.pk-navbar .nav-link::after,
.pk-navbar .pk-nav-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: .55rem;
    height: 2px;
    border-radius: 2px;
    background: var(--pk-gradient);
    transition: left .25s var(--pk-ease), right .25s var(--pk-ease);
}

.pk-navbar .nav-link:hover,
.pk-navbar .nav-link:focus-visible,
.pk-navbar .pk-nav-btn:hover,
.pk-navbar .pk-nav-btn:focus-visible,
.pk-navbar .nav-link.active,
.pk-navbar .nav-item.show > .nav-link,
.pk-navbar .nav-item.show > .pk-nav-btn { color: #fff; text-decoration: none; }

.pk-navbar .nav-link:hover::after,
.pk-navbar .nav-link:focus-visible::after,
.pk-navbar .pk-nav-btn:hover::after,
.pk-navbar .pk-nav-btn:focus-visible::after,
.pk-navbar .nav-link.active::after,
.pk-navbar .nav-item.show > .nav-link::after,
.pk-navbar .nav-item.show > .pk-nav-btn::after { left: 1.2rem; right: 1.2rem; }

.pk-navbar .pk-nav-btn i { margin-left: .5rem; font-size: .82em; opacity: .7; }

/* Tools dropdown. */
.pk-navbar .dropdown-menu {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--pk-r-sm);
    margin-top: .35rem;
    padding: .4rem;
    min-width: 260px;
    background: #101a3d;
    box-shadow: var(--pk-shadow-lg);
}
.pk-navbar .dropdown-item {
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .84);
    border-radius: 8px;
    padding: .7rem .9rem;
    white-space: normal;
    transition: background-color .2s var(--pk-ease), color .2s var(--pk-ease);
}
.pk-navbar .dropdown-item:hover,
.pk-navbar .dropdown-item:focus,
.pk-navbar .dropdown-item.active {
    background: rgba(78, 104, 216, .3);
    color: #fff;
}

/* The Tools item carries its own caret; Bootstrap's would be a second one. */
.pk-navbar .dropdown-toggle::after { display: none; }

/* Burger. `display` is deliberately left to Bootstrap's .navbar-expand-lg rule
   (which hides it from lg up) and only set in the mobile block below — setting
   it here would win on cascade order and leave the button on at every width. */
.pk-navbar .navbar-toggler {
    align-items: center;
    gap: .5rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    color: #fff;
    padding: .5rem 1rem;
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin: .6rem 0;
}
.pk-navbar .navbar-toggler:focus { box-shadow: none; }

/* 5d. Search panel. */
.pk-searchpanel { background: var(--pk-bg-tint); border-bottom: 1px solid var(--pk-line); }
.pk-searchpanel-inner { padding: var(--pk-band-tight) 0; }
.pk-searchpanel h2 { font-size: clamp(1.2rem, 2vw, 1.6rem); margin-bottom: 1.4rem; }
.pk-searchpanel .form-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pk-muted);
    margin-bottom: .4rem;
}
.pk-searchpanel .form-control,
.pk-searchpanel .form-select {
    border: 1px solid var(--pk-line-strong);
    border-radius: var(--pk-r-sm);
    padding: .8rem .9rem;
    font-size: .95rem;
    color: var(--pk-ink);
    background-color: #fff;
}
.pk-searchpanel .form-control:focus,
.pk-searchpanel .form-select:focus {
    border-color: var(--pk-grad-1);
    box-shadow: 0 0 0 .2rem rgba(78, 104, 216, .15);
}


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

.pk-hero { position: relative; background: var(--pk-navy); }
.pk-hero .carousel-item { position: relative; }

.pk-hero-img {
    display: block;
    width: 100%;
    height: clamp(460px, 62vh, 760px);
    object-fit: cover;
    /* No blanket brightness filter — a scrim does the contrast work, so the
       photograph keeps its colour instead of going flat and grey. */
    filter: none;

    /* Rest at the drift's *start* value, not at 1. carousel-fade only moves
       .active onto the incoming slide once the cross-fade has finished, so for
       the whole fade the new photograph is already fully visible with no
       animation on it. If it rested at scale(1) it would jump straight to 1.06
       the instant .active landed — a visible jerk on an image the eye is
       already watching. Matching the resting state to the keyframe's `from`
       makes that class change invisible. */
    transform: scale(1.06);
    will-change: transform;
}

/* Slow drift on the visible slide only. The outgoing slide snaps back to the
   1.06 resting state when it loses .active, but that happens at transitionend,
   by which point it is at opacity 0 — so the snap is never seen. */
.carousel-item.active .pk-hero-img { animation: pk-kenburns 14s ease-out forwards; }
@keyframes pk-kenburns {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
}

.pk-hero-caption {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 0 0 clamp(3.5rem, 7vw, 6rem);
    /* Dark only where the type sits, and only as much as legibility needs. */
    background:
        linear-gradient(to top, rgba(8, 11, 28, .82) 0%, rgba(8, 11, 28, .45) 38%, rgba(8, 11, 28, .05) 68%, transparent 100%),
        linear-gradient(to right, rgba(8, 11, 28, .5) 0%, transparent 55%);
}
.pk-hero-caption > .container { width: 100%; }
.pk-hero-caption a { display: block; color: #fff; }
.pk-hero-caption a:hover { color: #fff; text-decoration: none; }

.pk-hero-panel {
    display: block;
    max-width: 46rem;
    color: #fff;
}

.pk-hero-panel .pk-hero-title {
    display: block;
    color: #fff;
    font-size: clamp(2.1rem, 5.2vw, 4rem);
    font-weight: 300;
    line-height: 1.04;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.pk-hero-panel small {
    display: block;
    max-width: 34rem;
    margin-top: 1.1rem;
    font-size: clamp(.98rem, 1.5vw, 1.18rem);
    font-weight: 300;
    line-height: 1.55;
    color: rgba(255, 255, 255, .88);
    text-transform: none;
}
.pk-hero-cue {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1.7rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .45);
    padding-bottom: .35rem;
    transition: gap .25s var(--pk-ease), border-color .25s var(--pk-ease);
}
.pk-hero-caption a:hover .pk-hero-cue { gap: 1rem; border-color: #fff; }

.pk-hero .carousel-control-prev,
.pk-hero .carousel-control-next { width: 7%; opacity: 0; transition: opacity .3s var(--pk-ease); }
.pk-hero:hover .carousel-control-prev,
.pk-hero:hover .carousel-control-next { opacity: .8; }
.pk-hero .carousel-control-prev:hover,
.pk-hero .carousel-control-next:hover { opacity: 1; }

/* Bars, not dots — the active one extends. */
.pk-hero .carousel-indicators {
    margin: 0 0 clamp(1.4rem, 3vw, 2.2rem);
    gap: .45rem;
    justify-content: flex-start;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(100% - 3rem, 1320px);
}
.pk-hero .carousel-indicators [data-bs-target] {
    width: 28px;
    height: 3px;
    border: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, .4);
    opacity: 1;
    margin: 0;
    transition: width .35s var(--pk-ease), background-color .35s var(--pk-ease);
}
.pk-hero .carousel-indicators .active { width: 58px; background: #fff; }


/* 7. Sub-banner (interior pages) =========================================== */

.pk-subbanner { position: relative; background: var(--pk-navy); }
.pk-subbanner img {
    display: block;
    width: 100%;
    height: clamp(260px, 30vw, 400px);
    object-fit: cover;
}
.pk-subbanner-caption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 0;
    color: #fff;
    background: linear-gradient(to top, rgba(8, 11, 28, .8) 0%, rgba(8, 11, 28, .55) 55%, rgba(8, 11, 28, .35) 100%);
}
.pk-subbanner-caption h1 {
    color: #fff;
    /* Auto side margins, not just `margin: 0` — the max-width makes this a
       narrow block, and without them a short title ("Recently let") sits hard
       left inside a centred caption while its text is centred in the box. */
    margin: 0 auto;
    max-width: 20ch;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .3);
}
.pk-subbanner-caption .pk-page-lede {
    max-width: 58ch;
    margin: 1rem auto 0;
    color: rgba(255, 255, 255, .88);
    font-size: clamp(.98rem, 1.4vw, 1.15rem);
    font-weight: 300;
    line-height: 1.55;
}

.pk-crumbs {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, .7);
}
.pk-crumbs a { color: rgba(255, 255, 255, .92); }
.pk-crumbs a:hover { color: #fff; }
.pk-crumbs span { margin: 0 .6rem; opacity: .5; }

/* Text-only header, when a page has no banner photograph. */
.pk-pagehead {
    background: var(--pk-bg-soft);
    border-bottom: 1px solid var(--pk-line);
    padding: var(--pk-band-tight) 0;
    text-align: center;
}
.pk-pagehead h1 { margin: 0 0 .5rem; }
.pk-pagehead .pk-crumbs { color: var(--pk-muted); }
.pk-pagehead .pk-crumbs a { color: var(--pk-ink); }
.pk-pagehead .pk-page-lede {
    margin: 0 auto;
    max-width: 62ch;
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    font-weight: 300;
}


/* 8. Welcome band ========================================================== */

.pk-welcome {
    background: var(--pk-bg);
    padding: var(--pk-band) 0 calc(var(--pk-band) + 2rem);
    text-align: center;
    position: relative;
}
.pk-welcome-inner { max-width: 62ch; margin: 0 auto; }
.pk-welcome h1 { margin-bottom: 1.2rem; }
.pk-welcome .lead { margin-bottom: 1.4rem; }
.pk-welcome p { color: var(--pk-ink-soft); }
.pk-welcome-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-top: 2rem;
    border-radius: 50%;
    color: var(--pk-grad-1);
    background: rgba(78, 104, 216, .09);
    font-size: 1.1rem;
    animation: pk-nudge 2.4s ease-in-out infinite;
}
@keyframes pk-nudge {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(5px); }
}


/* 9. Why choose us ========================================================= */

.pk-why {
    background: var(--pk-bg-soft);
    padding: var(--pk-band) 0;
    position: relative;
}
.pk-why h2 { text-align: center; margin: 0 0 .8rem; }
.pk-why .lead { text-align: center; margin: 0 auto 3rem; max-width: 52ch; }

.pk-why-card {
    position: relative;
    display: block;
    height: 100%;
    background: #fff;
    border: 1px solid var(--pk-line);
    border-radius: var(--pk-r);
    padding: 2rem 1.9rem 2rem 6.6rem;
    color: var(--pk-ink-soft);
    overflow: hidden;
    transition: transform .3s var(--pk-ease), box-shadow .3s var(--pk-ease), border-color .3s var(--pk-ease);
}
/* A gradient edge that wipes in on hover, rather than flooding the whole card
   and taking the copy with it. */
.pk-why-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--pk-gradient-135);
    transform: scaleY(0);
    transform-origin: 50% 0;
    transition: transform .35s var(--pk-ease);
}
.pk-why-card:hover,
.pk-why-card:focus-visible {
    color: var(--pk-ink-soft);
    text-decoration: none;
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--pk-shadow);
}
.pk-why-card:hover::before,
.pk-why-card:focus-visible::before { transform: scaleY(1); }

.pk-why-card h3 {
    margin: 0 0 .5rem;
    color: var(--pk-ink);
    transition: color .25s var(--pk-ease);
}
.pk-why-card:hover h3 { color: var(--pk-grad-1); }
.pk-why-card p { margin: 0; font-size: .95rem; line-height: 1.6; }

.pk-why-icon {
    position: absolute;
    top: 2rem;
    left: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 14px;
    background: rgba(78, 104, 216, .09);
    transition: background-color .3s var(--pk-ease);
}
.pk-why-card:hover .pk-why-icon { background: rgba(78, 104, 216, .16); }

/* A flat brand colour, not a background-clip gradient: an icon font draws its
   glyph in ::before, so there is no text on the <i> for the clip to apply to. */
.pk-why-icon i {
    display: block;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--pk-grad-1);
}


/* 10. Featured property ==================================================== */

.pk-featured { background: var(--pk-bg); padding: var(--pk-band) 0; }
.pk-featured h2 { text-align: left; margin: 0 0 2rem; }

.pk-featured-card {
    background: #fff;
    border: 1px solid var(--pk-line);
    border-radius: var(--pk-r);
    box-shadow: var(--pk-shadow-sm);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow .3s var(--pk-ease);
}
.pk-featured-card:hover { box-shadow: var(--pk-shadow); }
.pk-featured-figure {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--pk-bg-tint);
}
.pk-featured-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--pk-ease);
}
.pk-featured-card:hover .pk-featured-figure img { transform: scale(1.04); }
.pk-featured-body { padding: 1.9rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.pk-featured-body h3 { margin: 0 0 .75rem; font-size: clamp(1.25rem, 2vw, 1.6rem); }
.pk-featured-body h3 a { color: var(--pk-ink); }
.pk-featured-body h3 a:hover { color: var(--pk-grad-1); }


/* 11. Property cards + latest band ========================================= */

.pk-latest { position: relative; padding: var(--pk-band) 0; overflow: hidden; }
.pk-latest-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 70% 60% at 15% 0%, rgba(78, 104, 216, .07), transparent 70%),
        radial-gradient(ellipse 60% 60% at 90% 100%, rgba(186, 117, 201, .07), transparent 70%),
        var(--pk-bg-soft);
}
.pk-latest > .container { position: relative; z-index: 1; }
.pk-latest h2 { text-align: center; margin: 0 0 .8rem; }
.pk-latest .lead { text-align: center; margin: 0 auto 3rem; max-width: 52ch; }

.pk-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--pk-line);
    border-radius: var(--pk-r);
    overflow: hidden;
    transition: transform .3s var(--pk-ease), box-shadow .3s var(--pk-ease), border-color .3s var(--pk-ease);
}
.pk-card:hover {
    transform: translateY(-5px);
    border-color: transparent;
    box-shadow: var(--pk-shadow);
}

.pk-card-figure {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--pk-bg-tint);
}
.pk-card-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--pk-ease);
}
.pk-card:hover .pk-card-figure img { transform: scale(1.06); }

/* A floating pill, not a bar across the whole photo. */
.pk-card-flag {
    position: absolute;
    top: .85rem;
    left: .85rem;
    background: rgba(12, 16, 38, .78);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: .4rem .8rem;
}
.pk-card-flag-new { background: var(--pk-gradient-135); }

.pk-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.35rem 1.4rem 1.25rem;
}
.pk-card-body h3 {
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    margin: 0 0 .55rem;
    color: var(--pk-ink);
}
.pk-card-body h3 a { color: var(--pk-ink); }
.pk-card-body h3 a:hover { color: var(--pk-grad-1); }

.pk-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .35rem 1rem;
    padding-bottom: .85rem;
    margin-bottom: .85rem;
    border-bottom: 1px solid var(--pk-line);
}
.pk-card-price {
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--pk-ink);
    letter-spacing: -0.02em;
    margin: 0;
}
.pk-card-price small {
    font-size: .58em;
    font-weight: 500;
    color: var(--pk-muted);
    margin-left: .3rem;
}
.pk-card-icons { font-size: .84rem; color: var(--pk-muted); margin: 0; }
.pk-card-icons i { margin-right: .35rem; color: var(--pk-grad-1); }
.pk-card-icons span + span { margin-left: .8rem; }

.pk-card-desc {
    font-size: .9rem;
    line-height: 1.6;
    color: var(--pk-muted);
    margin: 0 0 1.15rem;
}
.pk-card-actions { margin-top: auto; margin-bottom: 0; }


/* 12. Team band ============================================================ */

.pk-staff { background: var(--pk-bg); padding: var(--pk-band) 0; }
.pk-staff h2 { margin-top: 0; }


/* 13. Enquiry band + forms ================================================= */

.pk-enquire { background: var(--pk-bg-soft); padding: var(--pk-band) 0; }

.pk-panel {
    background: #fff;
    border: 1px solid var(--pk-line);
    border-radius: var(--pk-r);
    padding: clamp(1.5rem, 2.4vw, 2.25rem);
    box-shadow: var(--pk-shadow-sm);
    height: 100%;
}
.pk-panel h2 { margin-top: 0; }
.pk-panel-flush { padding: 0; overflow: hidden; box-shadow: none; }
.pk-panel-flush img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Form controls, sitewide. */
.pk-form .form-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pk-muted);
    margin-bottom: .45rem;
}
.pk-form .form-control,
.pk-form .form-select {
    font-size: .95rem;
    font-weight: 400;
    color: var(--pk-ink);
    background-color: var(--pk-bg-soft);
    border: 1px solid transparent;
    border-radius: var(--pk-r-sm);
    padding: .85rem 1rem;
    box-shadow: none;
    transition: background-color .2s var(--pk-ease), border-color .2s var(--pk-ease), box-shadow .2s var(--pk-ease);
}
.pk-form .form-control::placeholder { color: var(--pk-muted); }
.pk-form .form-control:focus,
.pk-form .form-select:focus {
    background-color: #fff;
    border-color: var(--pk-grad-1);
    box-shadow: 0 0 0 .2rem rgba(78, 104, 216, .14);
}
.pk-form .form-control.is-invalid,
.pk-form .form-select.is-invalid { border-color: #d14343; background-color: #fff; }
.pk-form textarea.form-control { min-height: 8rem; }
.pk-form .invalid-feedback { display: block; font-size: .82rem; }
.pk-form-note { font-size: .84rem; color: var(--pk-muted); margin-top: 1rem; margin-bottom: 0; }

/* Contact detail lines with a leading icon. */
.pk-contact-line {
    position: relative;
    padding-left: 2.1rem;
    margin-bottom: .9rem;
    line-height: 1.6;
}
.pk-contact-line i {
    position: absolute;
    left: 0;
    top: .3em;
    width: 1.4rem;
    text-align: center;
    color: var(--pk-grad-1);
}


/* 14. Portals strip ======================================================== */

.pk-portals {
    background: var(--pk-bg);
    border-top: 1px solid var(--pk-line);
    padding: var(--pk-band-tight) 0;
    text-align: center;
}
.pk-portals p {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--pk-muted);
    margin-bottom: 1.6rem;
}
.pk-portals img {
    height: 26px;
    width: auto;
    margin: .7rem 1.4rem;
    filter: grayscale(1);
    opacity: .5;
    transition: filter .3s var(--pk-ease), opacity .3s var(--pk-ease);
}
.pk-portals img:hover { filter: none; opacity: 1; }


/* 15. Footer + copyright =================================================== */

.pk-footer {
    position: relative;
    background: var(--pk-navy);
    color: rgba(255, 255, 255, .68);
    font-size: .92rem;
    padding: var(--pk-band) 0 calc(var(--pk-band-tight));
}
/* The brand as a hairline at the top edge, rather than the whole panel. */
.pk-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--pk-gradient);
}
.pk-footer a { color: rgba(255, 255, 255, .78); }
.pk-footer a:hover { color: #fff; text-decoration: none; }
.pk-footer h2 {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 1.25rem;
}
.pk-footer p, .pk-footer li, .pk-footer address { font-size: .92rem; line-height: 1.7; }
.pk-footer address { color: rgba(255, 255, 255, .68); }

.pk-footer-links { list-style: none; padding: 0; margin: 0; }
.pk-footer-links li { margin-bottom: .55rem; }

.pk-footer-logo img { width: 112px; height: auto; margin-bottom: 1.25rem; }

.pk-footer-social { margin-top: 1.25rem; }
.pk-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    margin-right: .5rem;
    border-radius: 50%;
    font-size: .95rem;
    background: rgba(255, 255, 255, .07);
    transition: background-color .25s var(--pk-ease), transform .25s var(--pk-ease);
}
.pk-footer-social a:hover { background: var(--pk-grad-1); transform: translateY(-2px); }

.pk-footer-regulated { font-size: .88rem; line-height: 1.8; }

.pk-copyright {
    background: var(--pk-navy-deep);
    color: rgba(255, 255, 255, .55);
    text-align: center;
    padding: 1.4rem 0;
    font-size: .8rem;
}
.pk-copyright p { margin: 0 0 .5rem; font-size: .8rem; }
.pk-copyright a { color: rgba(255, 255, 255, .78); text-decoration: underline; }
.pk-copyright a:hover { color: #fff; }
.pk-copyright-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .2rem 0;
    font-size: .8rem;
}
.pk-copyright-links li::after { content: '·'; margin: 0 .7rem; opacity: .45; }
.pk-copyright-links li:last-child::after { display: none; }

/* Agency credit: the shared LOS mark and wordmark, at the foot of the brand
   column so it lines up under the logo. Quiet until hovered — it is a
   signature, not something a visitor came for. */
.pk-footer .pk-made-by {
    display: inline-flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: 1.7rem;
    text-decoration: none;
    opacity: .55;
    transition: opacity .2s ease;
}
.pk-footer .pk-made-by:hover { opacity: 1; }
.pk-made-by-label {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}
.pk-made-by-mark {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
}
.pk-made-by-mark img { height: 24px; width: auto; display: block; }


/* 16. Interior page furniture ============================================== */

.pk-section { padding: var(--pk-band) 0; }
.pk-section-tight { padding: var(--pk-band-tight) 0; }
.pk-section-grey { background: var(--pk-bg-soft); }
.pk-section-band { background: var(--pk-bg-tint); }

.pk-prose { max-width: 68ch; }
.pk-prose p, .pk-prose li { font-size: 1.02rem; line-height: 1.75; }
.pk-prose h2 { margin-top: 2.6rem; }
.pk-prose h2:first-child { margin-top: 0; }
.pk-prose h3 { margin-top: 2rem; }
.pk-prose ul, .pk-prose ol { padding-left: 1.2rem; margin-bottom: 1.15rem; }
.pk-prose li { margin-bottom: .5rem; }
.pk-prose > .lead:first-child { margin-bottom: 1.6rem; }

/* Numbered service/step rows. */
.pk-step { display: flex; gap: 1.2rem; padding: 1.4rem 0; border-top: 1px solid var(--pk-line); }
.pk-step:first-child { border-top: 0; padding-top: 0; }
.pk-step-index {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-size: .82rem;
    font-weight: 700;
    color: var(--pk-grad-1);
    background: rgba(78, 104, 216, .09);
    margin: 0;
}
.pk-step h3 { margin: .25rem 0 .4rem; }
.pk-step p { margin: 0; font-size: .95rem; line-height: 1.65; }

/* Area cards. */
.pk-area-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--pk-line);
    border-radius: var(--pk-r);
    padding: 1.6rem;
    color: var(--pk-ink-soft);
    transition: transform .3s var(--pk-ease), box-shadow .3s var(--pk-ease), border-color .3s var(--pk-ease);
}
.pk-area-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--pk-shadow);
    text-decoration: none;
    color: var(--pk-ink-soft);
}
.pk-area-card h2, .pk-area-card h3 { margin: 0 0 .5rem; color: var(--pk-ink); }
.pk-area-card h2 i, .pk-area-card h3 i { color: var(--pk-grad-1); margin-right: .55rem; font-size: .85em; }
.pk-area-card:hover h2, .pk-area-card:hover h3 { color: var(--pk-grad-1); }
.pk-area-card p { font-size: .92rem; line-height: 1.6; margin: 0 0 1.1rem; }
.pk-area-go {
    margin-top: auto;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pk-grad-1);
}

/* Guide cards. */
.pk-guide-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--pk-line);
    border-radius: var(--pk-r);
    padding: 1.9rem;
    transition: transform .3s var(--pk-ease), box-shadow .3s var(--pk-ease), border-color .3s var(--pk-ease);
}
.pk-guide-card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--pk-shadow); }
.pk-guide-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 14px;
    background: var(--pk-gradient-135);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 1.4rem;
    box-shadow: 0 10px 22px -12px rgba(78, 104, 216, .8);
}
.pk-guide-card h2, .pk-guide-card h3 { margin: 0 0 .6rem; }
.pk-guide-card p { font-size: .95rem; line-height: 1.65; color: var(--pk-ink-soft); }
.pk-guide-card .pk-readmore { margin-top: auto; align-self: flex-start; }

/* Guide tiles — the printed guide's cover, cropped to the photograph and
   title (the address block along the foot of every cover is identical). */
.pk-guide-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--pk-line);
    border-radius: var(--pk-r);
    overflow: hidden;
    color: var(--pk-ink-soft);
    transition: transform .3s var(--pk-ease), box-shadow .3s var(--pk-ease), border-color .3s var(--pk-ease);
}
.pk-guide-tile:hover,
.pk-guide-tile:focus-visible { transform: translateY(-4px); border-color: transparent; box-shadow: var(--pk-shadow); text-decoration: none; color: var(--pk-ink-soft); }
.pk-guide-tile-cover {
    display: block;
    aspect-ratio: 520 / 600;
    overflow: hidden;
    background: var(--pk-navy);
}
.pk-guide-tile-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform .6s var(--pk-ease);
}
.pk-guide-tile:hover .pk-guide-tile-cover img { transform: scale(1.03); }
.pk-guide-tile-cover.is-plain {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.6rem;
    color: #fff;
    background: radial-gradient(circle at 80% 15%, rgba(186, 117, 201, .35), transparent 55%), var(--pk-navy);
}
.pk-guide-tile-cover.is-plain i { font-size: 1.6rem; color: var(--pk-grad-2); }
.pk-guide-tile-cover.is-plain span { font-size: 1.45rem; line-height: 1.2; font-weight: 600; }
.pk-guide-tile-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.3rem 1.35rem; }
.pk-guide-tile h3 { font-size: 1.05rem; line-height: 1.35; margin: 0 0 .45rem; color: var(--pk-ink); }
.pk-guide-tile:hover h3 { color: var(--pk-grad-1); }
.pk-guide-tile-dek { display: block; font-size: .88rem; line-height: 1.55; margin-bottom: 1rem; }

.pk-guide-group + .pk-guide-group { margin-top: clamp(3rem, 5vw, 4.5rem); }
.pk-guide-group-head { max-width: 46rem; margin-bottom: 1.6rem; }
.pk-guide-group-head h2 { margin: 0 0 .35rem; }
.pk-guide-group-head p { margin: 0; color: var(--pk-ink-soft); }

/* A guide article. */
.pk-guide h2 { scroll-margin-top: 6rem; }
.pk-guide-signoff { font-weight: 600; color: var(--pk-ink); }
.pk-guide-signoff::before { content: "— "; color: var(--pk-grad-2); }
.pk-prose .pk-guide-points { list-style: none; padding-left: 0; margin: 1.4rem 0 1.6rem; counter-reset: pk-point; }
.pk-prose .pk-guide-points > li { position: relative; margin: 0 0 1.4rem; }
.pk-guide-points h3 { font-size: 1.08rem; font-weight: 600; margin: 0 0 .4rem; }
.pk-guide-points p { margin-bottom: .6rem; }
.pk-prose .pk-guide-points.is-numbered > li { padding-left: 2.9rem; counter-increment: pk-point; }
.pk-guide-points.is-numbered > li::before {
    content: counter(pk-point);
    position: absolute;
    left: 0;
    top: -.1rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    background: var(--pk-gradient-135);
}
.pk-guide-faq { margin: 1.4rem 0 1.6rem; }
.pk-guide-faq .accordion-body p + p { margin-top: .75rem; }
.pk-guide-faq .accordion-header { margin: 0; }
.pk-prose ul.pk-ticks { padding-left: 0; }
.pk-guide-tip {
    margin: 1.4rem 0 1.8rem;
    padding: 1.1rem 1.3rem;
    border-radius: var(--pk-r-sm);
    background: var(--pk-bg-tint);
    border-left: 3px solid var(--pk-grad-1);
}
.pk-guide-tip p { margin: 0; font-size: .96rem; }
.pk-guide-tip-label {
    display: block;
    margin-bottom: .3rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pk-grad-1);
}
.pk-guide-aside { height: auto; }
.pk-guide-download { display: flex; gap: 1rem; align-items: flex-start; }
.pk-guide-download > a { flex: none; width: 96px; }
.pk-guide-download img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: var(--pk-shadow-sm); }
.pk-guide-download .pk-btn { white-space: nowrap; }
.pk-prose .pk-btn { text-decoration: none; }
.pk-guide-download-inline { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.pk-guide-download-inline .pk-guide-filesize { margin-top: 0; }
.pk-guide-download p { font-size: .9rem; line-height: 1.5; }
.pk-guide-filesize { display: block; margin-top: .45rem; font-size: .75rem; color: var(--pk-ink-soft); }
.pk-guide-contents { padding-left: 1.1rem; margin: 0; }
.pk-guide-contents li { font-size: .9rem; margin-bottom: .35rem; }
.pk-guide-contents a { color: var(--pk-ink-soft); }
.pk-guide-contents a:hover { color: var(--pk-grad-1); }

/* Testimonial. */
.pk-quote {
    background: var(--pk-navy);
    color: #fff;
    padding: var(--pk-band) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.pk-quote::before {
    content: "\201C";
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14rem;
    line-height: 1;
    color: rgba(255, 255, 255, .05);
}
.pk-quote blockquote {
    position: relative;
    font-size: clamp(1.15rem, 2.2vw, 1.7rem);
    font-weight: 300;
    line-height: 1.5;
    max-width: 56ch;
    margin: 0 auto 1.2rem;
}
.pk-quote figcaption {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

/* Stat row. */
.pk-stat { text-align: center; }
.pk-stat-value {
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--pk-ink);
    margin: 0 0 .5rem;
}
.pk-stat-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pk-muted);
    margin: 0;
}

/* Call-to-action band. */
.pk-cta-band {
    position: relative;
    background: var(--pk-gradient-135);
    color: #fff;
    padding: var(--pk-band) 0;
    text-align: center;
    overflow: hidden;
}
.pk-cta-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 120%, rgba(255, 255, 255, .22), transparent 60%);
    pointer-events: none;
}
.pk-cta-band > .container { position: relative; z-index: 1; }
.pk-cta-band h2 { color: #fff; margin-top: 0; }
.pk-cta-band p, .pk-cta-band .lead { color: rgba(255, 255, 255, .9); }

/* Accordion (FAQs). */
.pk-faq .accordion-item {
    border: 1px solid var(--pk-line);
    border-radius: var(--pk-r-sm) !important;
    background: #fff;
    margin-bottom: .7rem;
    overflow: hidden;
}
.pk-faq .accordion-button {
    font-size: 1rem;
    font-weight: 500;
    color: var(--pk-ink);
    background: #fff;
    padding: 1.15rem 3rem 1.15rem 1.35rem;
    box-shadow: none;
}
.pk-faq .accordion-button:not(.collapsed) { color: var(--pk-grad-1); background: #fff; }
.pk-faq .accordion-button::after { position: absolute; right: 1.2rem; width: 1rem; height: 1rem; background-size: 1rem; }
.pk-faq .accordion-body { padding: 0 1.35rem 1.35rem; }
.pk-faq .accordion-body p { font-size: .95rem; line-height: 1.7; margin-bottom: 0; }

/* Empty-state / notice. */
.pk-notice {
    background: var(--pk-bg-soft);
    border: 1px solid var(--pk-line);
    border-radius: var(--pk-r);
    padding: 1.8rem;
    text-align: center;
}
.pk-notice p { margin: 0 0 .6rem; color: var(--pk-ink-soft); font-size: .95rem; }
.pk-notice p:last-child { margin-bottom: 0; }
.pk-notice h2 { font-size: 1.1rem; }

/* Image placeholder, used when a photograph has not been supplied. */
.pk-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 180px;
    padding: 1.2rem;
    text-align: center;
    background: var(--pk-bg-tint);
    color: var(--pk-muted);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}


/* 17. Property browse + detail ============================================= */

/* Tab row. Pills left, archive link right — see _propertyBrowseTabs.php for
   why /sold and /let are reached from here rather than from the navbar. */
.pk-browse-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .9rem 1.5rem;
    margin-bottom: 1.8rem;
}
/* The bar owns the spacing once the pills are inside it. */
.pk-browse-bar .pk-browse-tabs { margin-bottom: 0; }
.pk-browse-archive {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 1.5rem;
    padding-right: .2rem;
}

.pk-browse-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .3rem;
    padding: .3rem;
    background: var(--pk-bg-soft);
    border-radius: 999px;
    margin-bottom: 1.8rem;
}
.pk-browse-tabs a {
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--pk-ink-soft);
    border-radius: 999px;
    padding: .7rem 1.3rem;
    transition: background-color .25s var(--pk-ease), color .25s var(--pk-ease), box-shadow .25s var(--pk-ease);
}
.pk-browse-tabs a:hover { color: var(--pk-ink); }
.pk-browse-tabs a[aria-current="page"] {
    background: #fff;
    color: var(--pk-ink);
    box-shadow: var(--pk-shadow-sm);
}

/* Secondary line under a primary CTA — points somewhere else without setting
   up a two-button choice. */
.pk-cta-alt {
    margin: 1.1rem 0 0;
    font-size: .95rem;
    color: var(--pk-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .2rem .7rem;
}
/* Property alerts opt-in, shaped as a peer of .pk-card so the row still reads
   as one row: same white ground, same border, same radius, same hover lift,
   and height:100% to stay level with the listings beside it. What marks it as
   the one tile that asks for something rather than offering a listing is the
   gradient rule along its top edge and the icon — not a different colour box,
   which broke the grid and left every control styled for a dark ground. */
.pk-alert-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    color: var(--pk-ink-soft);
    border: 1px solid var(--pk-line);
    border-radius: var(--pk-r);
    padding: 1.75rem 1.5rem;
    overflow: hidden;
    position: relative;
    transition: transform .3s var(--pk-ease), box-shadow .3s var(--pk-ease), border-color .3s var(--pk-ease);
}
/* Sits flush into the rounded corners because the card clips its overflow. */
.pk-alert-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--pk-gradient);
}
.pk-alert-card:hover {
    transform: translateY(-5px);
    border-color: transparent;
    box-shadow: var(--pk-shadow);
}

.pk-alert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--pk-gradient-135);
    color: #fff;
    font-size: 1rem;
}

.pk-alert-title {
    color: var(--pk-ink);
    font-size: 1.18rem;
    line-height: 1.3;
    margin: 0 0 .6rem;
}
.pk-alert-copy {
    font-size: .9rem;
    line-height: 1.6;
    margin: 0 0 1.25rem;
}

/* Pushes the form to the foot of the card so the button lines up with the
   "read more" on the property cards either side of it. */
.pk-alert-form { margin-top: auto; }
.pk-alert-form .form-control {
    background: var(--pk-bg-soft);
    border: 1px solid var(--pk-line);
    border-radius: var(--pk-r-sm);
    font-size: .92rem;
    padding: .7rem .9rem;
    margin-bottom: .8rem;
}
.pk-alert-form .form-control:focus {
    background: #fff;
    border-color: var(--pk-grad-1);
    box-shadow: 0 0 0 3px rgba(78, 104, 216, .14);
}
.pk-alert-card .pk-consent { padding-left: 1.7rem; margin-bottom: 1rem; }
.pk-alert-card .pk-consent .form-check-input { margin-left: -1.7rem; margin-top: .18rem; }
.pk-alert-card .pk-consent .form-check-label {
    font-size: .82rem;
    line-height: 1.45;
    color: var(--pk-ink-soft);
}
/* Inherits the site-wide .pk-flash colours now the ground is white. */
.pk-alert-card .pk-flash {
    font-size: .86rem;
    padding: .7rem .9rem;
    margin-bottom: 1rem;
}
.pk-alert-note {
    font-size: .74rem;
    line-height: 1.5;
    color: var(--pk-muted);
    margin: .9rem 0 0;
}
/* Consent checkbox on the valuation tool — the label is a sentence, not a
   word, so it needs room to breathe next to the box. */
.pk-consent { padding-left: 1.9rem; }
.pk-consent .form-check-input { margin-left: -1.9rem; margin-top: .2rem; }
.pk-consent .form-check-label { font-size: .92rem; color: var(--pk-ink-soft); }

/* Comparable sales behind an estimate. */
.pk-sales-table { width: 100%; }
.pk-sales-table thead th {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pk-muted);
}

/* The featured (gated) tool on the tools index. */
.pk-tool-feature { border-color: var(--pk-line-strong); }

/* A quiet aside inside a panel — points somewhere else without competing
   with the form it sits under. */
.pk-inline-cta {
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--pk-line);
}

.pk-filters {
    background: var(--pk-bg-soft);
    border: 1px solid var(--pk-line);
    border-radius: var(--pk-r);
    padding: 1.4rem;
    margin-bottom: 1.6rem;
}
.pk-filters .form-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pk-muted);
    margin-bottom: .4rem;
}
.pk-filters .form-control,
.pk-filters .form-select {
    font-size: .92rem;
    background: #fff;
    border: 1px solid var(--pk-line-strong);
    border-radius: var(--pk-r-sm);
    padding: .7rem .9rem;
}
.pk-filters .form-control:focus,
.pk-filters .form-select:focus {
    border-color: var(--pk-grad-1);
    box-shadow: 0 0 0 .2rem rgba(78, 104, 216, .14);
}
.pk-result-count { font-size: .88rem; color: var(--pk-muted); margin-bottom: 1.6rem; }

/* Detail page. */
.pk-detail-gallery { margin-bottom: 2rem; }
.pk-detail-main {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--pk-r);
    background: var(--pk-bg-tint);
}
.pk-detail-main img { width: 100%; height: 100%; object-fit: cover; }
.pk-detail-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: .6rem;
    margin-top: .6rem;
}
.pk-detail-thumbs a {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--pk-r-sm);
    background: var(--pk-bg-tint);
    opacity: .68;
    transition: opacity .25s var(--pk-ease), box-shadow .25s var(--pk-ease);
}
.pk-detail-thumbs a:hover { opacity: 1; }
.pk-detail-thumbs a.is-active { opacity: 1; box-shadow: 0 0 0 2px var(--pk-grad-1); }
.pk-detail-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.pk-detail-price {
    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
    font-weight: 300;
    letter-spacing: -0.03em;
    color: var(--pk-ink);
    margin: 0 0 .8rem;
}
.pk-detail-price small { font-size: .4em; color: var(--pk-muted); margin-left: .4rem; letter-spacing: 0; }

.pk-detail-facts {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}
.pk-detail-facts li {
    font-size: .86rem;
    color: var(--pk-ink-soft);
    background: var(--pk-bg-soft);
    border-radius: 999px;
    padding: .5rem 1rem;
}
.pk-detail-facts i { color: var(--pk-grad-1); margin-right: .5rem; }

.pk-sticky { position: sticky; top: 5rem; }

.pk-badge {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .45rem 1rem;
    border-radius: 999px;
    background: var(--pk-gradient-135);
    color: #fff;
    margin-bottom: 1rem;
}
.pk-badge-new { background: var(--pk-gradient-135); }
.pk-badge-muted { background: var(--pk-muted); }

/* Documents (floorplan / EPC / brochure). */
.pk-doclist { list-style: none; padding: 0; margin: 0; }
.pk-doclist li + li { border-top: 1px solid var(--pk-line); }
.pk-doclist a {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .95rem 0;
    font-size: .92rem;
    color: var(--pk-ink-soft);
}
.pk-doclist a:hover { color: var(--pk-grad-1); text-decoration: none; }
.pk-doclist i {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: .95rem;
    color: var(--pk-grad-1);
    background: rgba(78, 104, 216, .09);
}
.pk-doclist strong { display: block; color: var(--pk-ink); font-weight: 600; }

/* Leaflet's default marker shadow doesn't apply to a divIcon. */
.pk-map-pin { background: none; border: 0; }

/* Tables. */
.pk-prose table th, .pk-panel table th { font-weight: 600; color: var(--pk-ink); white-space: nowrap; }
.pk-prose table td, .pk-prose table th,
.pk-panel table td, .pk-panel table th { font-size: .92rem; }
.table > :not(caption) > * > * { padding: .8rem .75rem; }
thead th { font-size: .72rem !important; font-weight: 700 !important; letter-spacing: .12em; text-transform: uppercase; color: var(--pk-muted) !important; }


/* 18. Tools + calculators ================================================== */

.pk-tool-panel {
    background: #fff;
    border: 1px solid var(--pk-line);
    border-radius: var(--pk-r);
    box-shadow: var(--pk-shadow-sm);
    padding: clamp(1.5rem, 2.4vw, 2.25rem);
}

/* Navy panel — the property sidebar's contact card and every calculator's
   result column use the same treatment. */
.pk-dark-panel,
.pk-tool-result {
    position: relative;
    background: var(--pk-navy);
    color: rgba(255, 255, 255, .74);
    border-radius: var(--pk-r);
    padding: clamp(1.5rem, 2.4vw, 2.25rem);
    overflow: hidden;
}
.pk-dark-panel::before,
.pk-tool-result::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--pk-gradient);
}
.pk-dark-panel h2, .pk-dark-panel h3,
.pk-tool-result h2, .pk-tool-result h3 { color: #fff; margin-top: 0; }
.pk-dark-panel p, .pk-dark-panel li,
.pk-tool-result p { color: rgba(255, 255, 255, .74); }
.pk-dark-panel a { color: #fff; }
.pk-dark-panel .pk-contact-line i,
.pk-tool-result .pk-contact-line i { color: rgba(255, 255, 255, .6); }

.pk-tool-figure {
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 .3rem;
    color: #fff;
}
.pk-tool-figure-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    margin: 0 0 1.6rem;
}
.pk-tool-table { width: 100%; margin-bottom: 0; }
.pk-tool-table th,
.pk-tool-table td {
    font-size: .9rem;
    font-weight: 400;
    padding: .8rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .8);
}
.pk-tool-table tr:last-child th,
.pk-tool-table tr:last-child td { border-bottom: 0; }
.pk-tool-table th { font-weight: 500; text-align: left; }
.pk-tool-table td:last-child { text-align: right; color: #fff; font-weight: 600; }
.pk-tool-table small { display: block; font-size: .72rem; color: rgba(255, 255, 255, .45); font-weight: 400; }

/* Repayment / interest-only toggle. tools.js flips .is-active. */
.pk-tool-type {
    display: inline-flex;
    gap: .3rem;
    padding: .3rem;
    background: var(--pk-bg-soft);
    border-radius: 999px;
}
.pk-tool-type-btn {
    padding: .6rem 1.25rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--pk-ink-soft);
    cursor: pointer;
    user-select: none;
    transition: background-color .25s var(--pk-ease), color .25s var(--pk-ease), box-shadow .25s var(--pk-ease);
}
.pk-tool-type-btn.is-active { background: #fff; color: var(--pk-ink); box-shadow: var(--pk-shadow-sm); }

.pk-glossary-term { border-top: 1px solid var(--pk-line); padding: 1.35rem 0; }
.pk-glossary-term:first-child { border-top: 0; }
.pk-glossary-term dt {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--pk-ink);
    margin: 0 0 .35rem;
    line-height: 1.35;
}
.pk-glossary-term dd { font-size: .96rem; line-height: 1.7; margin: 0; color: var(--pk-ink-soft); }

.pk-alpha-index { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 2.2rem; }
.pk-alpha-index a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--pk-ink-soft);
    background: var(--pk-bg-soft);
    transition: background-color .25s var(--pk-ease), color .25s var(--pk-ease);
}
.pk-alpha-index a:hover { background: var(--pk-grad-1); color: #fff; text-decoration: none; }


/* 19. Cookie consent + flashes ============================================= */

#cookieConsentPopup {
    display: none;
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    max-width: 34rem;
    margin: 0 auto;
    background: var(--pk-navy);
    color: rgba(255, 255, 255, .78);
    border-radius: var(--pk-r);
    padding: 1.5rem;
    box-shadow: var(--pk-shadow-lg);
}
#cookieConsentPopup p { font-size: .88rem; line-height: 1.6; color: rgba(255, 255, 255, .78); margin: 0 0 1.1rem; }
#cookieConsentPopup a { color: #fff; text-decoration: underline; }
.pk-cookie-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.pk-cookie-btn {
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    padding: .7rem 1.4rem;
    cursor: pointer;
    transition: background-color .25s var(--pk-ease), color .25s var(--pk-ease), border-color .25s var(--pk-ease);
}
.pk-cookie-btn:hover { background: rgba(255, 255, 255, .18); }
.pk-cookie-btn-accept { background: var(--pk-gradient-135); border-color: transparent; }
.pk-cookie-btn-accept:hover { filter: brightness(1.12); }

.pk-flash {
    background: #eef7f1;
    border: 1px solid #cbe6d6;
    border-left: 3px solid #2f7d52;
    border-radius: var(--pk-r-sm);
    color: #1d4c33;
    padding: 1rem 1.2rem;
    margin-bottom: 1.4rem;
    font-size: .95rem;
}
.pk-flash-error { background: #fdeeee; border-color: #f0d0ce; border-left-color: #b3261e; color: #7c1d17; }


/* 20. Utilities + motion =================================================== */

.pk-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.pk-visually-hidden:focus {
    position: static !important;
    width: auto; height: auto;
    margin: 0; clip: auto;
    padding: .7rem 1.2rem;
    background: var(--pk-navy);
    color: #fff;
}

.pk-num { font-variant-numeric: tabular-nums; }
.pk-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Scroll reveal. Content is visible by default and only animates once JS has
   marked the document — so a crawler, a reader-mode parser and a no-JS
   visitor all get the fully rendered page, never a blank one. */
.pk-js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--pk-ease), transform .6s var(--pk-ease);
}
.pk-js [data-reveal].is-visible { opacity: 1; transform: none; }


/* 21. Responsive =========================================================== */

@media (max-width: 991.98px) {
    .pk-navbar { position: static; }
    .pk-navbar .navbar-toggler { display: inline-flex; }
    .pk-navbar .navbar-nav { margin: 0; }
    .pk-navbar .nav-link,
    .pk-navbar .pk-nav-btn { padding: .85rem .25rem; text-align: left; width: 100%; }
    .pk-navbar .nav-link::after,
    .pk-navbar .pk-nav-btn::after { display: none; }
    .pk-navbar .nav-item + .nav-item { border-top: 1px solid rgba(255, 255, 255, .08); }
    .pk-navbar .dropdown-menu { box-shadow: none; background: rgba(255, 255, 255, .05); min-width: 0; margin: 0 0 .5rem; }
    .pk-navbar .navbar-collapse { padding-bottom: .8rem; }

    .pk-hero-img { height: clamp(420px, 62vh, 560px); }
    .pk-sticky { position: static; }
    .pk-prose { max-width: none; }
}

@media (max-width: 767.98px) {
    .pk-topbar { text-align: center; }
    .pk-topbar-inner { justify-content: center; }
    .pk-topbar-contact { margin-left: 0; justify-content: center; }

    .pk-masthead { padding: 1.15rem 0 1rem; }
    .pk-masthead-logo img { width: 112px; }
    .pk-masthead-tag { font-size: .6rem; letter-spacing: .2em; }

    .pk-hero-img { height: clamp(400px, 68vh, 520px); }
    .pk-hero-caption { padding-bottom: 4.5rem; }
    .pk-hero .carousel-control-prev,
    .pk-hero .carousel-control-next { display: none; }
    .pk-hero .carousel-indicators { width: calc(100% - 3rem); }

    .pk-why-card { padding: 5.9rem 1.4rem 1.6rem; }
    .pk-why-icon { top: 1.6rem; left: 1.4rem; }

    .pk-quote::before { font-size: 9rem; }
    .pk-browse-tabs { display: flex; width: 100%; }
    .pk-browse-tabs a { flex: 1 1 auto; text-align: center; padding: .7rem .6rem; }
    /* Pills take the full width here, so the archive link lands on its own
       line underneath rather than being squeezed alongside them. */
    .pk-browse-archive { width: 100%; }

    .pk-copyright-links { flex-direction: column; }
    .pk-copyright-links li::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .pk-js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
    .pk-topbar, .pk-navbar, .pk-searchpanel, .pk-hero,
    .pk-footer, .pk-copyright, #cookieConsentPopup { display: none !important; }
    body { font-size: 11pt; color: #000; }
}