/* =============================================================================
   Kazi Kings design system
   Loaded after the Bootstrap 4.6.2 CDN stylesheet. Plain CSS, no build step.

   1. Tokens            8. Pagination              15. Site header & drawer
   2. Base & type       9. Tables                  16. Site footer
   3. Brand re-theme   10. Overlays & alerts       17. Page banner & flash
   4. Buttons          11. Navs, breadcrumb, progress  18. Listing card
                                                   19. Homepage
                                                   20. Search results & map
                                                   21. Property page
                                                   22. Pricing & FAQ
                                                   23. Contact page
                                                   24. Shopper sign-in & account
   5. Forms            12. Empty & loading states
   6. Cards            13. Utilities
   7. Badges & pills   14. Reduced motion

   Every colour, shadow and radius comes from the custom properties in
   section 1, so a dark theme or a per-account palette is one block later.

   About !important: Bootstrap's CDN build declares its colour utilities
   (.bg-primary, .text-primary, .border-primary, .text-muted ...) with
   !important. Re-colouring those requires matching it; nothing else here
   uses it except the spacing utilities, which follow Bootstrap's convention.
   ============================================================================= */


/* 1. Tokens ================================================================ */
@import url('../fonts/HouschkaPro/stylesheet.css');

:root {
    /* Brand - blue sampled from public/images/logo.png */
    --kk-primary: #1870b8;
    --kk-primary-hover: #135a94;
    --kk-primary-active: #114f82;
    --kk-primary-rgb: 24, 112, 184;
    --kk-primary-soft: rgba(24, 112, 184, .1);
    --kk-navy: #0b3a5e;
    --kk-navy-deep: #072a45;
    --kk-accent: #f5a524;
    --kk-accent-hover: #e8940c;

    /* Feedback. The brief's #16a34a and #0284c7 only reach 3.3:1 and 4.1:1
       with white text; these are the next shade of the same hues (>= 4.5:1). */
    --kk-success: #15803d;
    --kk-success-hover: #116a33;
    --kk-warning: #f59e0b;
    --kk-warning-hover: #d97706;
    --kk-danger: #dc2626;
    --kk-danger-hover: #b91c1c;
    --kk-info: #0369a1;
    --kk-info-hover: #075985;

    /* Neutrals */
    --kk-gray-100: #f7f8fa;
    --kk-gray-200: #edeff3;
    --kk-gray-300: #dde1e8;
    --kk-gray-400: #b8bec9;
    --kk-gray-500: #8b93a1;
    --kk-gray-600: #6b7280;
    --kk-gray-700: #4b5563;
    --kk-gray-800: #1f2937;
    --kk-gray-900: #111827;
    --kk-white: #fff;

    /* Semantic surfaces */
    --kk-body-bg: var(--kk-white);
    --kk-surface: var(--kk-white);
    --kk-surface-muted: var(--kk-gray-100);
    --kk-text: var(--kk-gray-900);
    --kk-text-muted: var(--kk-gray-600);
    --kk-border: var(--kk-gray-200);
    --kk-border-strong: var(--kk-gray-300);

    /* Elevation */
    --sh-1: 0 1px 2px rgba(16, 24, 40, .06);
    --sh-2: 0 4px 12px rgba(16, 24, 40, .08);
    --sh-3: 0 12px 32px rgba(16, 24, 40, .12);
    --kk-hairline: 0 0 0 1px rgba(17, 24, 39, .05);

    /* Shape */
    --kk-radius-sm: .375rem;
    --kk-radius: .5rem;
    --kk-radius-lg: .875rem;
    --kk-radius-pill: 50rem;

    /* Type */
    --kk-font-body: "Houschka Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --kk-font-heading: "Houschka Pro", var(--kk-font-body);
    --kk-text-12: .75rem;
    --kk-text-14: .875rem;
    --kk-text-16: 1rem;
    --kk-text-18: 1.125rem;
    --kk-text-20: 1.25rem;
    --kk-text-24: 1.5rem;
    --kk-text-30: 1.875rem;
    --kk-text-38: 2.375rem;
    --kk-text-48: 3rem;
    --kk-text-60: 3.75rem;

    /* Spacing (8px rhythm) and controls */
    --kk-space-1: .25rem;
    --kk-space-2: .5rem;
    --kk-space-3: 1rem;
    --kk-space-4: 1.5rem;
    --kk-space-5: 3rem;
    --kk-space-6: 4rem;
    --kk-space-7: 6rem;
    --kk-space-8: 8rem;
    --kk-control-h: 3rem;
    --kk-control-h-sm: 2.5rem;
    --kk-control-h-lg: 3.5rem;
    --kk-focus-ring: 0 0 0 3px rgba(24, 112, 184, .12);

    /* Motion */
    --kk-duration: 150ms;
    --kk-ease: cubic-bezier(.2, 0, 0, 1);
}


/* 2. Base & type =========================================================== */

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Anchor jumps (#location, #enquire) land below the sticky header.
       --kk-header-h is the header's live height, set by kazikings.js. */
    scroll-padding-top: calc(var(--kk-header-h, 4rem) + 1rem);
}

body {
    font-family: var(--kk-font-body);
    font-size: var(--kk-text-16);
    line-height: 1.65;
    color: var(--kk-text);
    background-color: var(--kk-body-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.display-1,
.display-2,
.display-3,
.display-4 {
    font-family: var(--kk-font-heading);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--kk-gray-900);
    text-wrap: balance;
}

/* The larger sizes scale down on phones instead of wrapping word by word. */
h1,
.h1 {
    font-size: clamp(var(--kk-text-30), 1.5rem + 2.5vw, var(--kk-text-48));
}

h2,
.h2 {
    font-size: clamp(var(--kk-text-24), 1.25rem + 1.75vw, var(--kk-text-38));
}

h3,
.h3 {
    font-size: clamp(var(--kk-text-24), 1.25rem + 1vw, var(--kk-text-30));
}

h4,
.h4 {
    font-size: var(--kk-text-24);
}

h5,
.h5 {
    font-size: var(--kk-text-20);
}

h6,
.h6 {
    font-size: var(--kk-text-18);
}

.display-1 {
    font-size: clamp(var(--kk-text-38), 1.75rem + 4vw, var(--kk-text-60));
    font-weight: 800;
    line-height: 1.1;
}

.display-2 {
    font-size: clamp(var(--kk-text-30), 1.5rem + 3vw, var(--kk-text-48));
    font-weight: 800;
    line-height: 1.1;
}

.display-3 {
    font-size: var(--kk-text-38);
    font-weight: 700;
    line-height: 1.1;
}

.display-4 {
    font-size: var(--kk-text-30);
    font-weight: 700;
    line-height: 1.1;
}

p {
    text-wrap: pretty;
}

.lead {
    font-size: var(--kk-text-20);
    font-weight: 400;
    color: var(--kk-gray-700);
}

small,
.small {
    font-size: var(--kk-text-14);
}

strong,
b {
    font-weight: 600;
}

hr {
    border-top-color: var(--kk-border);
}

mark,
.mark {
    background-color: rgba(245, 165, 36, .25);
    padding: 0 .2em;
}

code {
    padding: .125rem .375rem;
    border-radius: var(--kk-radius-sm);
    background-color: var(--kk-gray-100);
    color: var(--kk-gray-800);
    font-size: 87.5%;
}

a {
    color: var(--kk-primary);
    transition: color var(--kk-duration) ease;
}

a:hover {
    color: var(--kk-primary-active);
}

/* A link inside a sentence must not rely on colour alone (WCAG 1.4.1) */
p a:not([class]) {
    text-decoration: underline;
    text-underline-offset: .15em;
}

/* Section kicker above a heading ("For rent", "Our team") */
.kk-eyebrow {
    display: inline-block;
    margin-bottom: var(--kk-space-2);
    font-size: var(--kk-text-14);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kk-primary);
}

/* Prices, counts, table figures: digits line up */
.kk-num {
    font-variant-numeric: tabular-nums;
}

.kk-font-heading {
    font-family: var(--kk-font-heading);
}

.font-weight-semibold {
    font-weight: 600 !important;
}

.font-weight-extrabold {
    font-weight: 800 !important;
}

/* Keyboard focus: a solid ring for keyboard users only. Inputs keep their
   own border + halo instead (section 5). */
a:focus,
button:focus,
.btn:focus,
summary:focus,
[tabindex]:focus {
    outline: 0;
    box-shadow: none;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--kk-primary);
    outline-offset: 2px;
}

.kk-on-dark a:focus-visible,
.kk-on-dark button:focus-visible,
.kk-on-dark .btn:focus-visible {
    outline-color: var(--kk-white);
}


/* 3. Brand re-theme (Bootstrap colour utilities) =========================== */

.text-primary {
    color: var(--kk-primary) !important;
}

a.text-primary:hover,
a.text-primary:focus {
    color: var(--kk-primary-active) !important;
}

.btn {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
    /* background: #f3d078;
    background: -moz-linear-gradient(top, #f7dfa5, #f0c14b);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7dfa5), color-stop(100%, #f0c14b));
    background: -webkit-linear-gradient(top, #f7dfa5, #f0c14b); */
}

.text-success {
    color: var(--kk-success) !important;
}

.text-danger {
    color: var(--kk-danger) !important;
}

.text-warning {
    color: var(--kk-warning-hover) !important;
}

.text-info {
    color: var(--kk-info) !important;
}

.text-muted {
    color: var(--kk-text-muted) !important;
}

.text-dark,
.text-body {
    color: var(--kk-text) !important;
}

.text-accent {
    color: var(--kk-accent) !important;
}

/* Bootstrap's 50% white fails 4.5:1 on navy; 78% clears 7:1 */
.text-white-50 {
    color: rgba(255, 255, 255, .78) !important;
}

.bg-primary {
    background-color: var(--kk-primary) !important;
}

.bg-success {
    background-color: var(--kk-success) !important;
}

.bg-danger {
    background-color: var(--kk-danger) !important;
}

.bg-warning {
    background-color: var(--kk-warning) !important;
}

.bg-info {
    background-color: var(--kk-info) !important;
}

.bg-light {
    background-color: var(--kk-gray-100) !important;
}

.bg-dark {
    background-color: var(--kk-gray-900) !important;
}

.bg-accent {
    background-color: var(--kk-accent) !important;
}

.bg-navy {
    background-color: var(--kk-navy) !important;
}

.border {
    border-color: var(--kk-border-strong) !important;
}

.border-top,
.border-right,
.border-bottom,
.border-left {
    border-color: var(--kk-border) !important;
}

.border-primary {
    border-color: var(--kk-primary) !important;
}

.border-danger {
    border-color: var(--kk-danger) !important;
}

.rounded {
    border-radius: var(--kk-radius) !important;
}

.rounded-lg {
    border-radius: var(--kk-radius-lg) !important;
}

.rounded-sm {
    border-radius: var(--kk-radius-sm) !important;
}

.shadow-sm {
    box-shadow: var(--sh-1) !important;
}

.shadow {
    box-shadow: var(--sh-2) !important;
}

.shadow-lg {
    box-shadow: var(--sh-3) !important;
}


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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kk-space-2);
    padding: .7rem 1.5rem;
    font-size: var(--kk-text-16);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    border-radius: var(--kk-radius);
    transition: color var(--kk-duration) ease, background-color var(--kk-duration) ease,
        border-color var(--kk-duration) ease, box-shadow var(--kk-duration) ease,
        transform var(--kk-duration) ease;
}

.btn:not(:disabled):not(.disabled):active {
    transform: translateY(1px);
}

.btn:disabled,
.btn.disabled {
    opacity: .55;
    cursor: not-allowed;
}

.btn[aria-busy="true"] {
    cursor: progress;
}

/* Bootstrap's coloured focus glow is replaced by the ring in section 2. */
.btn:focus,
.btn.focus,
.btn:not(:disabled):not(.disabled):active:focus,
.btn:not(:disabled):not(.disabled).active:focus,
.show>.btn.dropdown-toggle:focus {
    box-shadow: none;
}

.btn-sm {
    padding: .5rem .875rem;
    font-size: var(--kk-text-14);
    border-radius: var(--kk-radius-sm);
}

.btn-lg {
    padding: .875rem 1.75rem;
    font-size: var(--kk-text-18);
    border-radius: var(--kk-radius);
}

.btn-block {
    display: flex;
}

.btn>.fa-solid,
.btn>.fa-regular,
.btn>.fa-brands,
.btn>.kk-icon {
    flex-shrink: 0;
}

/* Solid variants */
.btn-primary {
    color: var(--kk-white);
    background-color: var(--kk-primary);
    border-color: var(--kk-primary);
}

.btn-primary:hover {
    color: var(--kk-white);
    background-color: var(--kk-primary-hover);
    border-color: var(--kk-primary-hover);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
    color: var(--kk-white);
    background-color: var(--kk-primary-active);
    border-color: var(--kk-primary-active);
}

.btn-primary:disabled,
.btn-primary.disabled {
    color: var(--kk-white);
    background-color: var(--kk-primary);
    border-color: var(--kk-primary);
}

.btn-accent {
    color: var(--kk-gray-900);
    background-color: var(--kk-accent);
    border-color: var(--kk-accent);
}

.btn-accent:hover,
.btn-accent:not(:disabled):not(.disabled):active {
    color: var(--kk-gray-900);
    background-color: var(--kk-accent-hover);
    border-color: var(--kk-accent-hover);
}

.btn-secondary {
    color: var(--kk-white);
    background-color: var(--kk-gray-600);
    border-color: var(--kk-gray-600);
}

.btn-secondary:hover,
.btn-secondary:not(:disabled):not(.disabled):active {
    color: var(--kk-white);
    background-color: var(--kk-gray-700);
    border-color: var(--kk-gray-700);
}

.btn-success {
    color: var(--kk-white);
    background-color: var(--kk-success);
    border-color: var(--kk-success);
}

.btn-success:hover,
.btn-success:not(:disabled):not(.disabled):active {
    color: var(--kk-white);
    background-color: var(--kk-success-hover);
    border-color: var(--kk-success-hover);
}

.btn-danger {
    color: var(--kk-white);
    background-color: var(--kk-danger);
    border-color: var(--kk-danger);
}

.btn-danger:hover,
.btn-danger:not(:disabled):not(.disabled):active {
    color: var(--kk-white);
    background-color: var(--kk-danger-hover);
    border-color: var(--kk-danger-hover);
}

.btn-warning {
    color: var(--kk-gray-900);
    background-color: var(--kk-warning);
    border-color: var(--kk-warning);
}

.btn-warning:hover {
    color: var(--kk-gray-900);
    background-color: var(--kk-warning-hover);
    border-color: var(--kk-warning-hover);
}

.btn-info {
    color: var(--kk-white);
    background-color: var(--kk-info);
    border-color: var(--kk-info);
}

.btn-info:hover {
    color: var(--kk-white);
    background-color: var(--kk-info-hover);
    border-color: var(--kk-info-hover);
}

.btn-light {
    color: var(--kk-gray-900);
    background-color: var(--kk-gray-100);
    border-color: var(--kk-gray-100);
}

.btn-light:hover,
.btn-light:not(:disabled):not(.disabled):active {
    color: var(--kk-gray-900);
    background-color: var(--kk-gray-200);
    border-color: var(--kk-gray-200);
}

.btn-dark {
    color: var(--kk-white);
    background-color: var(--kk-gray-900);
    border-color: var(--kk-gray-900);
}

.btn-dark:hover {
    color: var(--kk-white);
    background-color: var(--kk-gray-800);
    border-color: var(--kk-gray-800);
}

/* White button for photos and dark bands */
.btn-white {
    color: var(--kk-gray-900);
    background-color: var(--kk-white);
    border-color: var(--kk-white);
}

.btn-white:hover,
.btn-white:not(:disabled):not(.disabled):active {
    color: var(--kk-gray-900);
    background-color: var(--kk-gray-100);
    border-color: var(--kk-gray-100);
}

/* Outline variants */
.btn-outline-primary {
    color: var(--kk-primary);
    border-color: var(--kk-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active {
    color: var(--kk-white);
    background-color: var(--kk-primary);
    border-color: var(--kk-primary);
}

.btn-outline-secondary {
    color: var(--kk-gray-800);
    border-color: var(--kk-border-strong);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active {
    color: var(--kk-gray-900);
    background-color: var(--kk-gray-100);
    border-color: var(--kk-gray-400);
}

.btn-outline-danger {
    color: var(--kk-danger);
    border-color: var(--kk-danger);
}

.btn-outline-danger:hover,
.btn-outline-danger:not(:disabled):not(.disabled):active {
    color: var(--kk-white);
    background-color: var(--kk-danger);
    border-color: var(--kk-danger);
}

.btn-outline-light {
    color: var(--kk-white);
    border-color: rgba(255, 255, 255, .6);
}

.btn-outline-light:hover,
.btn-outline-light:not(:disabled):not(.disabled):active {
    color: var(--kk-gray-900);
    background-color: var(--kk-white);
    border-color: var(--kk-white);
}

/* Quiet button: no fill until hover (toolbars, row actions) */
.btn-ghost {
    color: var(--kk-gray-700);
    background-color: transparent;
    border-color: transparent;
}

/* Icon-only button: a square target with the glyph centred in it */
.kk-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* WhatsApp: the brand's own green, because a WhatsApp action in any other
   colour is not read as one. */
.kk-btn-whatsapp {
    color: var(--kk-white);
    background-color: #25d366;
    border-color: #25d366;
}

.kk-btn-whatsapp:hover,
.kk-btn-whatsapp:focus,
.kk-btn-whatsapp:not(:disabled):not(.disabled):active {
    color: var(--kk-white);
    background-color: #1ebe5b;
    border-color: #1ebe5b;
}

.btn-ghost:hover,
.btn-ghost[aria-expanded="true"] {
    color: var(--kk-gray-900);
    background-color: var(--kk-gray-100);
}

.btn-ghost.active {
    color: var(--kk-primary);
    background-color: var(--kk-primary-soft);
}

.btn-link {
    color: var(--kk-primary);
    font-weight: 600;
}

.btn-link:hover {
    color: var(--kk-primary-active);
}

/* Square icon-only button. Always give it an aria-label. */
.btn-icon {
    width: var(--kk-control-h);
    height: var(--kk-control-h);
    padding: 0;
}

.btn-icon.btn-sm {
    width: var(--kk-control-h-sm);
    height: var(--kk-control-h-sm);
}

.btn-icon.btn-lg {
    width: var(--kk-control-h-lg);
    height: var(--kk-control-h-lg);
}


/* 5. Forms ================================================================= */

label,
.col-form-label {
    margin-bottom: .375rem;
    font-size: var(--kk-text-14);
    font-weight: 600;
    color: var(--kk-gray-800);
}

.kk-required {
    margin-left: .125rem;
    color: var(--kk-danger);
}

.form-group {
    margin-bottom: var(--kk-space-4);
}

.form-text {
    margin-top: .375rem;
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
}

.form-control,
.custom-select {
    height: var(--kk-control-h);
    padding: .6875rem 1rem;
    font-size: var(--kk-text-16);
    line-height: 1.5;
    color: var(--kk-gray-900);
    border-color: var(--kk-border-strong);
    border-radius: var(--kk-radius);
    transition: border-color var(--kk-duration) ease, box-shadow var(--kk-duration) ease;
}

.custom-select {
    padding-right: 2.5rem;
    background-position: right 1rem center;
}

.form-control::placeholder {
    color: var(--kk-gray-600);
    opacity: 1;
}

.form-control:hover:not(:focus):not(:disabled):not(.is-invalid),
.custom-select:hover:not(:focus):not(:disabled):not(.is-invalid) {
    border-color: var(--kk-gray-400);
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--kk-primary);
    box-shadow: var(--kk-focus-ring);
}

.form-control:disabled,
.form-control[readonly],
.custom-select:disabled {
    background-color: var(--kk-gray-100);
}

.form-control-sm,
.custom-select-sm {
    height: var(--kk-control-h-sm);
    padding: .4375rem .75rem;
    font-size: var(--kk-text-14);
    border-radius: var(--kk-radius-sm);
}

/* Room for the arrow, so the chosen option is never drawn under it */
.custom-select-sm {
    padding-right: 2rem;
    background-position: right .625rem center;
}

.form-control-lg,
.custom-select-lg {
    height: var(--kk-control-h-lg);
    padding: .9375rem 1.25rem;
    font-size: var(--kk-text-18);
}

textarea.form-control {
    height: auto;
    min-height: 7.5rem;
    resize: vertical;
}

/* Errors only - Bootstrap's green "valid" styling is not used */
.form-control.is-invalid,
.custom-select.is-invalid {
    border-color: var(--kk-danger);
}

.form-control.is-invalid:focus,
.custom-select.is-invalid:focus {
    border-color: var(--kk-danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .15);
}

.invalid-feedback {
    margin-top: .375rem;
    font-size: var(--kk-text-14);
    color: var(--kk-danger);
}

.was-validated .form-control:valid,
.form-control.is-valid,
.was-validated .custom-select:valid,
.custom-select.is-valid {
    border-color: var(--kk-border-strong);
    padding-right: 1rem;
    background-image: none;
}

/* Input groups */
.input-group-text {
    padding: .6875rem 1rem;
    color: var(--kk-gray-700);
    background-color: var(--kk-gray-100);
    border-color: var(--kk-border-strong);
    border-radius: var(--kk-radius);
}

.input-group>.form-control:not(:last-child),
.input-group>.custom-select:not(:last-child) {
    border-right-width: 0;
}

.input-group>.input-group-append>.btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Leading icon inside a field (search, suburb) */
.kk-input-icon {
    position: relative;
}

.kk-input-icon>.kk-icon {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    color: var(--kk-gray-600);
    pointer-events: none;
}

.kk-input-icon>.form-control {
    padding-left: 2.625rem;
}

/* Checkboxes, radios, switches */
.custom-control {
    min-height: 1.65rem;
    padding-left: 1.875rem;
}

.custom-control-label {
    margin-bottom: 0;
    font-weight: 400;
    color: var(--kk-gray-800);
    cursor: pointer;
}

.custom-control-label::before,
.custom-control-label::after {
    top: .2rem;
    left: -1.875rem;
    width: 1.25rem;
    height: 1.25rem;
}

/* Outline must reach 3:1 against white to be findable */
.custom-control-label::before {
    border-color: var(--kk-gray-500);
}

.custom-checkbox .custom-control-label::before {
    border-radius: var(--kk-radius-sm);
}

.custom-control-input:checked~.custom-control-label::before {
    border-color: var(--kk-primary);
    background-color: var(--kk-primary);
}

.custom-control-input:focus~.custom-control-label::before {
    box-shadow: none;
}

.custom-control-input:focus-visible~.custom-control-label::before {
    outline: 2px solid var(--kk-primary);
    outline-offset: 2px;
}

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
    border-color: var(--kk-primary);
}

.custom-control-input:not(:disabled):active~.custom-control-label::before {
    background-color: rgba(24, 112, 184, .2);
    border-color: var(--kk-primary);
}

.custom-control-input.is-invalid~.custom-control-label {
    color: var(--kk-gray-800);
}

.custom-control-input.is-invalid~.custom-control-label::before {
    border-color: var(--kk-danger);
}

.custom-switch {
    padding-left: 3rem;
}

.custom-switch .custom-control-label::before {
    left: -3rem;
    width: 2.25rem;
    border-radius: var(--kk-radius-pill);
}

.custom-switch .custom-control-label::after {
    top: calc(.2rem + 3px);
    left: calc(-3rem + 3px);
    width: calc(1.25rem - 6px);
    height: calc(1.25rem - 6px);
    background-color: var(--kk-gray-500);
}

.custom-switch .custom-control-input:checked~.custom-control-label::after {
    transform: translateX(1rem);
}

.custom-file-label {
    border-color: var(--kk-border-strong);
    border-radius: var(--kk-radius);
}

/* Anti-spam field: off-screen, not display:none (many bots skip hidden fields) */
.kk-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Related fields with a small heading (PMS form sections) */
.kk-fieldset {
    margin-bottom: var(--kk-space-5);
}

.kk-fieldset>legend {
    margin-bottom: var(--kk-space-3);
    font-family: var(--kk-font-heading);
    font-size: var(--kk-text-18);
    font-weight: 700;
}


/* 6. Cards ================================================================= */

/* Soft elevation instead of hard borders. The hairline is a shadow, so the
   card keeps a crisp edge on white without a grey border. */
.card {
    border: 0;
    border-radius: var(--kk-radius-lg);
    box-shadow: var(--kk-hairline), var(--sh-1);
}

.card-header,
.card-footer {
    padding: 1rem 1.5rem;
    background-color: var(--kk-surface);
    border-color: var(--kk-border);
}

.card-header:first-child {
    border-radius: var(--kk-radius-lg) var(--kk-radius-lg) 0 0;
}

.card-footer:last-child {
    border-radius: 0 0 var(--kk-radius-lg) var(--kk-radius-lg);
}

.card-body {
    padding: 1.5rem;
}

.card-title {
    font-family: var(--kk-font-heading);
    font-size: var(--kk-text-18);
    font-weight: 700;
}

.card-img-top {
    border-top-left-radius: var(--kk-radius-lg);
    border-top-right-radius: var(--kk-radius-lg);
}

/* Card that lifts on hover: elevation 2 -> 3 and a 2px rise */
.kk-card-hover {
    box-shadow: var(--kk-hairline), var(--sh-2);
    transition: box-shadow var(--kk-duration) var(--kk-ease), transform var(--kk-duration) var(--kk-ease);
}

.kk-card-hover:hover,
.kk-card-hover:focus-within {
    box-shadow: var(--kk-hairline), var(--sh-3);
    transform: translateY(-2px);
}

/* Flat card on a muted surface (filter panels, summaries) */
.kk-card-muted {
    background-color: var(--kk-surface-muted);
    box-shadow: none;
}

/* Stat / KPI card. A size container, so the figure shrinks to fit a narrow
   column ("UGX 14.2M" in a quarter-width card) instead of wrapping. */
.kk-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--kk-space-3);
    height: 100%;
    padding: var(--kk-space-4);
    container-type: inline-size;
}

.kk-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    font-size: var(--kk-text-20);
    color: var(--kk-primary-active);
    background-color: var(--kk-primary-soft);
    border-radius: var(--kk-radius);
}

.kk-stat__body {
    min-width: 0;
}

.kk-stat__label {
    margin-bottom: var(--kk-space-1);
    font-size: var(--kk-text-14);
    font-weight: 500;
    color: var(--kk-text-muted);
}

.kk-stat__value {
    margin-bottom: var(--kk-space-1);
    font-family: var(--kk-font-heading);
    font-size: var(--kk-text-30);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--kk-gray-900);
}

.kk-stat__delta {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-1);
    font-size: var(--kk-text-12);
    font-weight: 600;
}

@container (max-width: 15rem) {
    .kk-stat__value {
        font-size: var(--kk-text-24);
    }
}

.kk-stat__delta--up {
    color: var(--kk-success);
}

.kk-stat__delta--down {
    color: var(--kk-danger);
}

.kk-stat__delta--flat {
    color: var(--kk-text-muted);
}

.kk-stat__context {
    font-size: var(--kk-text-12);
    color: var(--kk-text-muted);
}


/* 7. Badges & pills ======================================================== */

.badge {
    padding: .375em .625em;
    font-size: var(--kk-text-12);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .01em;
    border-radius: var(--kk-radius-sm);
}

.badge-pill {
    padding-right: .75em;
    padding-left: .75em;
    border-radius: var(--kk-radius-pill);
}

.badge-primary {
    color: var(--kk-white);
    background-color: var(--kk-primary);
}

.badge-secondary {
    color: var(--kk-white);
    background-color: var(--kk-gray-600);
}

.badge-success {
    color: var(--kk-white);
    background-color: var(--kk-success);
}

.badge-danger {
    color: var(--kk-white);
    background-color: var(--kk-danger);
}

.badge-warning {
    color: var(--kk-gray-900);
    background-color: var(--kk-warning);
}

.badge-info {
    color: var(--kk-white);
    background-color: var(--kk-info);
}

.badge-light {
    color: var(--kk-gray-800);
    background-color: var(--kk-gray-200);
}

.badge-dark {
    color: var(--kk-white);
    background-color: var(--kk-gray-900);
}

.badge-accent {
    color: var(--kk-gray-900);
    background-color: var(--kk-accent);
}

/* Listing badges - solid labels that sit on property photos */
.kk-listing-badge {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .3125rem .625rem;
    font-size: var(--kk-text-12);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .02em;
    border-radius: var(--kk-radius-sm);
    box-shadow: var(--sh-1);
}

.kk-listing-badge--sale {
    color: var(--kk-white);
    background-color: var(--kk-primary);
}

.kk-listing-badge--rent {
    color: var(--kk-gray-900);
    background-color: var(--kk-accent);
}

.kk-listing-badge--sold {
    color: var(--kk-white);
    background-color: var(--kk-danger);
}

.kk-listing-badge--leased {
    color: var(--kk-white);
    background-color: var(--kk-gray-800);
}

/* Pale amber, so it can't be mistaken for the amber "For Rent" badge */
.kk-listing-badge--under-offer {
    color: #78350f;
    background-color: #fde68a;
}

.kk-listing-badge--new {
    color: var(--kk-white);
    background-color: var(--kk-success);
}

.kk-listing-badge--featured {
    color: var(--kk-gray-900);
    background-color: var(--kk-white);
}

.kk-listing-badge--inspection {
    color: var(--kk-white);
    background-color: var(--kk-navy);
}

/* Status pills - soft tint + dot, for tables and lists */
.kk-pill {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .625rem;
    font-size: var(--kk-text-12);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    border-radius: var(--kk-radius-pill);
}

.kk-pill::before {
    content: "";
    width: .375rem;
    height: .375rem;
    border-radius: 50%;
    background-color: currentColor;
}

.kk-pill--primary {
    color: var(--kk-primary-active);
    background-color: rgba(24, 112, 184, .1);
}

.kk-pill--success {
    color: #166534;
    background-color: rgba(21, 128, 61, .12);
}

.kk-pill--warning {
    color: #92400e;
    background-color: rgba(245, 158, 11, .16);
}

.kk-pill--danger {
    color: #991b1b;
    background-color: rgba(220, 38, 38, .1);
}

.kk-pill--info {
    color: var(--kk-info-hover);
    background-color: rgba(3, 105, 161, .1);
}

.kk-pill--neutral {
    color: var(--kk-gray-700);
    background-color: rgba(107, 114, 128, .12);
}


/* 8. Pagination ============================================================ */

/* Separate rounded tiles; works with Laravel's pagination::bootstrap-4 view
   unchanged. */
.pagination {
    flex-wrap: wrap;
    gap: var(--kk-space-2);
    margin-bottom: 0;
}

.pagination .page-item .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--kk-control-h-sm);
    height: var(--kk-control-h-sm);
    margin-left: 0;
    padding: .5rem .875rem;
    font-weight: 600;
    color: var(--kk-gray-800);
    border-color: var(--kk-border-strong);
    border-radius: var(--kk-radius);
    transition: color var(--kk-duration) ease, background-color var(--kk-duration) ease, border-color var(--kk-duration) ease;
}

.pagination .page-item .page-link:hover {
    color: var(--kk-primary);
    background-color: var(--kk-gray-100);
    border-color: var(--kk-gray-400);
}

.pagination .page-item .page-link:focus {
    box-shadow: none;
}

.pagination .page-item.active .page-link {
    color: var(--kk-white);
    background-color: var(--kk-primary);
    border-color: var(--kk-primary);
    box-shadow: var(--sh-2);
}

.pagination .page-item.disabled .page-link {
    color: var(--kk-gray-500);
    background-color: transparent;
    border-color: var(--kk-border);
}

.pagination-sm .page-item .page-link {
    min-width: 2rem;
    height: 2rem;
    padding: .25rem .625rem;
}

/* "Load more" alternative */
.kk-load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kk-space-3);
    text-align: center;
}

.kk-load-more__count {
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
}

.kk-load-more .progress {
    width: 100%;
    max-width: 15rem;
    height: .25rem;
}


/* 9. Tables ================================================================ */

.table {
    margin-bottom: 0;
    color: var(--kk-gray-800);
}

.table th,
.table td {
    padding: .875rem 1rem;
    vertical-align: middle;
    border-top-color: var(--kk-border);
}

.table thead th {
    border-top: 0;
    border-bottom: 1px solid var(--kk-border);
    background-color: var(--kk-gray-100);
    font-size: var(--kk-text-12);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kk-gray-600);
    white-space: nowrap;
}

.table-sm th,
.table-sm td {
    padding: .5rem .75rem;
}

.table-hover tbody tr:hover {
    background-color: rgba(24, 112, 184, .04);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--kk-gray-100);
}

.table-bordered,
.table-bordered th,
.table-bordered td {
    border-color: var(--kk-border);
}

/* Card holding a table: scrolls sideways on phones instead of widening the page */
.kk-table-card {
    overflow: hidden;
}

.kk-table-card .table-responsive {
    margin-bottom: 0;
}

.kk-table-card .card-header,
.kk-table-card .card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kk-space-3);
}

/* Row of controls above a table or list: search grows, buttons keep their size */
.kk-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-2);
}

.kk-toolbar>.form-control,
.kk-toolbar>.custom-select {
    flex: 1 1 14rem;
    width: auto;
    min-width: 10rem;
}

.kk-toolbar>.btn {
    flex-shrink: 0;
}

/* From 576px the controls share one line and the field gives way */
@media (min-width: 576px) {
    .kk-toolbar {
        flex-wrap: nowrap;
    }
}

/* Header row stays visible while a long table scrolls in its container */
.kk-table-sticky {
    max-height: 70vh;
    overflow: auto;
}

.kk-table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Cell with thumbnail + two lines of text */
.kk-cell-media {
    display: flex;
    align-items: center;
    gap: var(--kk-space-3);
    min-width: 12rem;
}

.kk-cell-media__thumb {
    width: 3.5rem;
    height: 2.625rem;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--kk-radius-sm);
    background-color: var(--kk-gray-200);
}

.kk-cell-media__title {
    display: block;
    font-weight: 600;
    color: var(--kk-gray-900);
}

.kk-cell-media__meta {
    display: block;
    font-size: var(--kk-text-12);
    color: var(--kk-text-muted);
}


/* 10. Overlays & alerts ==================================================== */

.dropdown-menu {
    min-width: 12rem;
    padding: .5rem 0;
    border-color: var(--kk-border);
    border-radius: var(--kk-radius-lg);
    box-shadow: var(--sh-3);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
    padding: .5rem 1rem;
    font-size: var(--kk-text-14);
    color: var(--kk-gray-800);
}

.dropdown-item>i {
    width: 1rem;
    text-align: center;
    color: var(--kk-gray-600);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--kk-gray-900);
    background-color: var(--kk-gray-100);
}

.dropdown-item.active,
.dropdown-item:active {
    color: var(--kk-white);
    background-color: var(--kk-primary);
}

.dropdown-item.active>i,
.dropdown-item:active>i {
    color: inherit;
}

.dropdown-item.text-danger>i {
    color: inherit;
}

.dropdown-divider {
    border-top-color: var(--kk-border);
}

.dropdown-header {
    padding: .5rem 1rem;
    font-size: var(--kk-text-12);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kk-gray-600);
}

.modal-content {
    border: 0;
    border-radius: var(--kk-radius-lg);
    box-shadow: var(--sh-3);
}

.modal-backdrop {
    background-color: var(--kk-gray-900);
}

.modal-backdrop.show {
    opacity: .55;
}

.modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom-color: var(--kk-border);
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    gap: var(--kk-space-2);
    padding: 1rem 1.5rem;
    border-top-color: var(--kk-border);
}

.modal-footer>* {
    margin: 0;
}

.modal-title {
    font-size: var(--kk-text-20);
}

.close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--kk-text-24);
    font-weight: 400;
    color: var(--kk-gray-700);
    text-shadow: none;
    border-radius: var(--kk-radius);
    opacity: 1;
}

.close:not(:disabled):not(.disabled):hover {
    color: var(--kk-gray-900);
    background-color: rgba(17, 24, 39, .06);
    opacity: 1;
}

.modal-header .close {
    margin: -.5rem -.5rem -.5rem auto;
    padding: 0;
}

.tooltip {
    font-family: var(--kk-font-body);
    font-size: var(--kk-text-14);
}

.tooltip.show {
    opacity: 1;
}

.tooltip-inner {
    padding: .375rem .625rem;
    background-color: var(--kk-gray-900);
    border-radius: var(--kk-radius-sm);
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: var(--kk-gray-900);
}

.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: var(--kk-gray-900);
}

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--kk-space-3);
    padding: 1rem 1.25rem;
    border-radius: var(--kk-radius);
}

.alert>.kk-icon {
    margin-top: .25rem;
    font-size: var(--kk-text-18);
    flex-shrink: 0;
}

.alert-heading {
    margin-bottom: var(--kk-space-1);
    font-size: var(--kk-text-16);
    font-weight: 700;
    color: inherit;
}

.alert p:last-child,
.alert ul:last-child {
    margin-bottom: 0;
}

.alert-link {
    font-weight: 600;
}

.alert-primary {
    color: #0b3a5e;
    background-color: #edf4fa;
    border-color: #cfe0f0;
}

.alert-success {
    color: #14532d;
    background-color: #ecf7f0;
    border-color: #c6e6d2;
}

.alert-warning {
    color: #78350f;
    background-color: #fef6e7;
    border-color: #fbe2b4;
}

.alert-danger {
    color: #7f1d1d;
    background-color: #fdeeee;
    border-color: #f7cdcd;
}

.alert-info {
    color: #0c4a6e;
    background-color: #eaf4fa;
    border-color: #c3def0;
}

.alert-dismissible {
    padding-right: 1.25rem;
}

.alert-dismissible .close {
    position: static;
    width: 2rem;
    height: 2rem;
    margin: -.25rem -.5rem -.25rem auto;
    padding: 0;
    font-size: var(--kk-text-20);
    color: inherit;
}


/* 11. Navs, breadcrumb, progress, list group =============================== */

.nav-link {
    padding: .5rem 1rem;
    font-weight: 500;
}

.nav-tabs {
    border-bottom-color: var(--kk-border);
}

.nav-tabs .nav-link {
    color: var(--kk-gray-600);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.nav-tabs .nav-link:hover {
    color: var(--kk-gray-900);
    border-bottom-color: var(--kk-gray-300);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--kk-primary);
    background-color: transparent;
    border-bottom-color: var(--kk-primary);
}

.nav-pills .nav-link {
    color: var(--kk-gray-700);
    border-radius: var(--kk-radius-pill);
}

.nav-pills .nav-link:hover {
    color: var(--kk-gray-900);
    background-color: var(--kk-gray-100);
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: var(--kk-white);
    background-color: var(--kk-primary);
}

.breadcrumb {
    padding: 0;
    margin-bottom: 0;
    font-size: var(--kk-text-14);
    background-color: transparent;
    border-radius: 0;
}

.breadcrumb-item+.breadcrumb-item {
    padding-left: .5rem;
}

.breadcrumb-item+.breadcrumb-item::before {
    padding-right: .5rem;
    color: var(--kk-gray-500);
}

.breadcrumb-item.active {
    color: var(--kk-gray-600);
}

.breadcrumb a {
    color: var(--kk-gray-700);
}

.breadcrumb a:hover {
    color: var(--kk-primary);
}

.progress {
    height: .5rem;
    background-color: var(--kk-gray-200);
    border-radius: var(--kk-radius-pill);
}

.progress-bar {
    background-color: var(--kk-primary);
}

.list-group-item {
    padding: .875rem 1.25rem;
    border-color: var(--kk-border);
}

.list-group-item.active {
    background-color: var(--kk-primary);
    border-color: var(--kk-primary);
}

.list-group-item-action:hover {
    background-color: var(--kk-gray-100);
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: .15em;
}


/* 12. Empty & loading states =============================================== */

.kk-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 30rem;
    margin: 0 auto;
    padding: var(--kk-space-6) var(--kk-space-3);
    text-align: center;
}

.kk-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: var(--kk-space-4);
    font-size: var(--kk-text-30);
    color: var(--kk-primary-active);
    background-color: var(--kk-primary-soft);
    border-radius: 50%;
    box-shadow: 0 0 0 .5rem rgba(24, 112, 184, .05);
}

.kk-empty__title {
    margin-bottom: var(--kk-space-2);
    font-size: var(--kk-text-20);
}

.kk-empty__text {
    margin-bottom: var(--kk-space-4);
    color: var(--kk-text-muted);
}

.kk-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--kk-space-2);
}

/* Skeletons: shape-matched placeholders while content loads */
@keyframes kk-shimmer {
    from {
        background-position: 150% 0;
    }

    to {
        background-position: -50% 0;
    }
}

.kk-skeleton {
    display: block;
    background: linear-gradient(90deg, var(--kk-gray-200) 25%, var(--kk-gray-100) 50%, var(--kk-gray-200) 75%);
    background-size: 200% 100%;
    border-radius: var(--kk-radius-sm);
    animation: kk-shimmer 1.4s ease-in-out infinite;
}

.kk-skeleton--text {
    height: .875rem;
    margin-bottom: var(--kk-space-2);
}

.kk-skeleton--title {
    width: 60%;
    height: 1.25rem;
    margin-bottom: var(--kk-space-3);
}

.kk-skeleton--media {
    aspect-ratio: 4 / 3;
    border-radius: 0;
}

.kk-skeleton--circle {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
}


/* 13. Utilities (only what Bootstrap 4 lacks) ============================== */

/* Font Awesome icons get a fixed box so text never jumps when they load */
.kk-icon {
    display: inline-block;
    width: 1.25em;
    text-align: center;
}

/* Section spacers 6-8 (64 / 96 / 128px), vertical only */
.mt-6,
.my-6 {
    margin-top: var(--kk-space-6) !important;
}

.mb-6,
.my-6 {
    margin-bottom: var(--kk-space-6) !important;
}

.pt-6,
.py-6 {
    padding-top: var(--kk-space-6) !important;
}

.pb-6,
.py-6 {
    padding-bottom: var(--kk-space-6) !important;
}

.mt-7,
.my-7 {
    margin-top: var(--kk-space-7) !important;
}

.mb-7,
.my-7 {
    margin-bottom: var(--kk-space-7) !important;
}

.pt-7,
.py-7 {
    padding-top: var(--kk-space-7) !important;
}

.pb-7,
.py-7 {
    padding-bottom: var(--kk-space-7) !important;
}

.mt-8,
.my-8 {
    margin-top: var(--kk-space-8) !important;
}

.mb-8,
.my-8 {
    margin-bottom: var(--kk-space-8) !important;
}

.pt-8,
.py-8 {
    padding-top: var(--kk-space-8) !important;
}

.pb-8,
.py-8 {
    padding-bottom: var(--kk-space-8) !important;
}

/* Page section rhythm: 64px on phones, 96px from lg */
.kk-section {
    padding-top: var(--kk-space-6);
    padding-bottom: var(--kk-space-6);
}

@media (min-width: 992px) {
    .kk-section {
        padding-top: var(--kk-space-7);
        padding-bottom: var(--kk-space-7);
    }
}

/* Type scale: .kk-text-12 ... .kk-text-60 */
.kk-text-12 {
    font-size: var(--kk-text-12);
}

.kk-text-14 {
    font-size: var(--kk-text-14);
}

.kk-text-16 {
    font-size: var(--kk-text-16);
}

.kk-text-18 {
    font-size: var(--kk-text-18);
}

.kk-text-20 {
    font-size: var(--kk-text-20);
}

.kk-text-24 {
    font-size: var(--kk-text-24);
}

.kk-text-30 {
    font-size: var(--kk-text-30);
}

.kk-text-38 {
    font-size: var(--kk-text-38);
}

.kk-text-48 {
    font-size: var(--kk-text-48);
}

.kk-text-60 {
    font-size: var(--kk-text-60);
}

/* Flex gap (BS5's gap-* classes do nothing in Bootstrap 4) */
.kk-gap-1 {
    gap: var(--kk-space-1);
}

.kk-gap-2 {
    gap: var(--kk-space-2);
}

.kk-gap-3 {
    gap: var(--kk-space-3);
}

.kk-gap-4 {
    gap: var(--kk-space-4);
}

/* Aspect-ratio boxes: images never shift the layout while loading */
.kk-ratio-4x3,
.kk-ratio-16x9,
.kk-ratio-3x2,
.kk-ratio-1x1 {
    position: relative;
    overflow: hidden;
}

.kk-ratio-4x3 {
    aspect-ratio: 4 / 3;
}

.kk-ratio-16x9 {
    aspect-ratio: 16 / 9;
}

.kk-ratio-3x2 {
    aspect-ratio: 3 / 2;
}

.kk-ratio-1x1 {
    aspect-ratio: 1 / 1;
}

.kk-ratio-4x3>img,
.kk-ratio-16x9>img,
.kk-ratio-3x2>img,
.kk-ratio-1x1>img,
.kk-ratio-4x3>iframe,
.kk-ratio-16x9>iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Lets flex children shrink below content width so text can truncate */
.kk-min-w-0 {
    min-width: 0;
}

.kk-clamp-2,
.kk-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kk-clamp-2 {
    -webkit-line-clamp: 2;
}

.kk-clamp-3 {
    -webkit-line-clamp: 3;
}

.kk-surface-muted {
    background-color: var(--kk-surface-muted);
}

/* Skip link: hidden until focused, then pinned top-left */
.kk-skip-link {
    position: absolute;
    top: var(--kk-space-2);
    left: var(--kk-space-2);
    z-index: 1090;
    padding: var(--kk-space-2) var(--kk-space-3);
    font-weight: 600;
    color: var(--kk-white);
    background-color: var(--kk-gray-900);
    border-radius: var(--kk-radius);
    transform: translateY(-200%);
    transition: transform var(--kk-duration) ease;
}

.kk-skip-link:focus,
.kk-skip-link:hover {
    color: var(--kk-white);
    transform: translateY(0);
}

main:focus {
    outline: 0;
}


/* 14. Reduced motion ======================================================= */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .btn,
    .kk-card-hover,
    .kk-skip-link,
    .pagination .page-link {
        transition: none;
    }

    .btn:not(:disabled):not(.disabled):active,
    .kk-card-hover:hover,
    .kk-card-hover:focus-within {
        transform: none;
    }

    .kk-skeleton {
        animation: none;
    }
}


/* 15. Site header & drawer ================================================= */

/* Utility bar */
.kk-topbar {
    font-size: var(--kk-text-14);
    color: rgba(255, 255, 255, .85);
    background-color: var(--kk-navy);
}

.kk-topbar .container {
    display: flex;
    align-items: center;
    gap: var(--kk-space-4);
    min-height: 2.5rem;
}

.kk-topbar__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-1) var(--kk-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-topbar__item,
.kk-topbar__list a {
    display: inline-flex;
    align-items: center;
    gap: var(--kk-space-2);
    color: inherit;
}

.kk-topbar__list a:hover {
    color: var(--kk-white);
    text-decoration: none;
}

.kk-topbar .kk-icon {
    color: var(--kk-accent);
}

/* Sticky header: shrinks and gains a shadow once the page scrolls */
.kk-header {
    background-color: var(--kk-surface);
    box-shadow: 0 1px 0 var(--kk-border);
    transition: box-shadow var(--kk-duration) ease;
}

.kk-header.is-scrolled {
    box-shadow: var(--sh-2);
}

.kk-navbar {
    padding: .5rem 0;
    transition: padding var(--kk-duration) ease;
}

.kk-header.is-scrolled .kk-navbar {
    padding: .25rem 0;
}

.kk-navbar__brand {
    margin-right: var(--kk-space-4);
    padding: 0;
}

/* Logo: 44px tall at the top of the page, 36px once scrolled, 36/32px on
   phones. Sized by height alone so the file's own ratio sets the width: the
   box is the artwork, with no dead space between it and the menu. */
.kk-navbar__brand {
    min-width: 0;
}

.kk-navbar__logo {
    display: block;
    width: auto;
    max-width: calc(100vw - 8rem);
    height: 2.75rem;
    object-fit: contain;
    object-position: left center;
    transition: height var(--kk-duration) ease;
}

.kk-header.is-scrolled .kk-navbar__logo {
    height: 2.25rem;
}

@media (max-width: 575.98px) {
    .kk-navbar__logo {
        height: 2.25rem;
    }

    .kk-header.is-scrolled .kk-navbar__logo {
        height: 2rem;
    }
}

.kk-navbar__toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--kk-control-h);
    height: var(--kk-control-h);
    padding: 0;
    font-size: var(--kk-text-20);
    color: var(--kk-gray-900);
    border: 0;
    border-radius: var(--kk-radius);
}

.kk-navbar__toggler:hover {
    background-color: var(--kk-gray-100);
}

/* Links (buttons for dropdown toggles, so they get a reset) */
.kk-navbar .nav-link {
    display: flex;
    align-items: center;
    gap: .25rem;
    width: 100%;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--kk-gray-800);
    /* Two-word labels ("For rent", "Contact us") keep to one line, so the
       row of menus stays the same height whatever the viewport. */
    white-space: nowrap;
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--kk-radius);
}

.kk-navbar .nav-link:hover,
.kk-navbar .nav-link[aria-expanded="true"] {
    color: var(--kk-primary);
}

.kk-navbar .nav-link.active {
    color: var(--kk-primary);
}

.kk-navbar .dropdown-toggle::after {
    margin-left: .375rem;
    transition: transform var(--kk-duration) ease;
}

.kk-navbar .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.kk-navbar__actions {
    display: flex;
    align-items: center;
    gap: var(--kk-space-2);
}

.kk-navbar__account>.kk-icon {
    font-size: var(--kk-text-18);
}

/* Desktop: inline menu with an underline on the current section */
@media (min-width: 1200px) {
    .kk-navbar .navbar-nav .nav-link {
        position: relative;
        padding: .5rem .75rem;
    }

    .kk-navbar .navbar-nav .nav-link.active::before {
        content: "";
        position: absolute;
        right: .75rem;
        bottom: -.125rem;
        left: .75rem;
        height: 2px;
        background-color: var(--kk-primary);
        border-radius: 2px;
    }

    .kk-navbar .dropdown-menu {
        margin-top: .5rem;
    }
}

/* Below xl: the collapse becomes an off-canvas drawer.
   Bootstrap 4's collapse animates height with an inline style; the drawer
   slides instead, so height is pinned (the one !important here) and the
   collapse transition is switched off to let it finish instantly. */
@media (max-width: 1199.98px) {
    .kk-drawer {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        flex-direction: column;
        align-items: stretch;
        width: min(22rem, 86vw);
        height: 100% !important;
        padding: 0 var(--kk-space-4) var(--kk-space-4);
        overflow-y: auto;
        overscroll-behavior: contain;
        background-color: var(--kk-surface);
        box-shadow: var(--sh-3);
    }

    .kk-drawer.show,
    .kk-drawer.collapsing {
        display: flex;
    }

    .kk-drawer.collapsing {
        transition: none;
    }

    .kk-drawer.show {
        animation: kk-drawer-in .25s var(--kk-ease);
    }

    .kk-drawer.show.is-closing {
        animation: kk-drawer-out .2s var(--kk-ease) forwards;
    }

    .kk-drawer__head {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 calc(-1 * var(--kk-space-4)) var(--kk-space-2);
        padding: var(--kk-space-3) var(--kk-space-3) var(--kk-space-3) var(--kk-space-4);
        background-color: var(--kk-surface);
        border-bottom: 1px solid var(--kk-border);
    }

    .kk-drawer__head .kk-navbar__logo {
        max-width: calc(100% - 3.5rem);
        height: 2.25rem;
    }

    .kk-drawer .navbar-nav {
        margin-bottom: var(--kk-space-4);
    }

    .kk-drawer .nav-item {
        border-bottom: 1px solid var(--kk-border);
    }

    .kk-drawer .nav-link {
        justify-content: space-between;
        padding: .875rem 0;
        font-size: var(--kk-text-16);
        border-radius: 0;
    }

    .kk-drawer .nav-link.active {
        color: var(--kk-primary);
    }

    .kk-drawer .dropdown-menu {
        margin: 0 0 var(--kk-space-2);
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    .kk-drawer .dropdown-item {
        padding: .625rem var(--kk-space-3);
        font-size: .9375rem;
        border-radius: var(--kk-radius);
    }

    .kk-drawer .dropdown-header {
        padding: .625rem var(--kk-space-3);
    }

    .kk-drawer .kk-navbar__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .kk-drawer .kk-navbar__actions .btn {
        width: 100%;
    }

    /* Account reads as one more row of the menu, not a floating button */
    .kk-drawer .kk-navbar__account {
        justify-content: flex-start;
        margin-bottom: var(--kk-space-2);
        padding-right: 0;
        padding-left: 0;
    }

    .kk-drawer .kk-navbar__account:hover {
        background-color: transparent;
        color: var(--kk-primary);
    }

    .kk-drawer .kk-navbar__actions .dropdown-menu {
        position: static;
        float: none;
    }

    .kk-drawer__contact {
        display: flex;
        flex-direction: column;
        gap: var(--kk-space-2);
        margin-top: auto;
        padding-top: var(--kk-space-4);
        font-size: var(--kk-text-14);
    }

    .kk-drawer__contact a {
        display: inline-flex;
        align-items: center;
        gap: var(--kk-space-2);
        color: var(--kk-gray-700);
    }

    .kk-drawer__contact .kk-icon {
        color: var(--kk-primary);
    }
}

@keyframes kk-drawer-in {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes kk-drawer-out {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.kk-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1;
    background-color: rgba(17, 24, 39, .5);
    opacity: 0;
    transition: opacity .2s ease;
}

.kk-drawer-backdrop.is-visible {
    opacity: 1;
}

/* Page behind an open drawer does not scroll */
body.kk-drawer-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {

    .kk-header,
    .kk-navbar,
    .kk-navbar__logo,
    .kk-drawer-backdrop {
        transition: none;
    }

    .kk-drawer.show,
    .kk-drawer.show.is-closing {
        animation: none;
    }
}


/* 16. Site footer ========================================================== */

.kk-footer {
    padding-top: var(--kk-space-6);
    font-size: .9375rem;
    color: rgba(255, 255, 255, .78);
    background-color: var(--kk-navy-deep);
}

.kk-footer a {
    color: rgba(255, 255, 255, .78);
}

.kk-footer a:hover {
    color: var(--kk-white);
}

.kk-footer__logo {
    display: block;
    width: auto;
    height: 2.75rem;
}

.kk-footer__tagline {
    max-width: 22rem;
    margin-bottom: var(--kk-space-4);
}

.kk-footer__title {
    margin-bottom: var(--kk-space-3);
    font-size: var(--kk-text-16);
    font-weight: 700;
    letter-spacing: 0;
    color: var(--kk-white);
}

.kk-footer__links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-footer__links li+li {
    margin-top: .625rem;
}

.kk-footer__contact {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    margin-bottom: var(--kk-space-3);
    font-style: normal;
}

.kk-footer__contact>* {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--kk-space-2);
}

.kk-footer__contact .kk-icon {
    margin-top: .25rem;
    color: var(--kk-accent);
}

.kk-footer__hours {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .25rem var(--kk-space-3);
    margin: 0;
}

.kk-footer__hours dt {
    font-weight: 600;
    color: var(--kk-white);
}

.kk-footer__hours dd {
    margin: 0;
}

.kk-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    transition: background-color var(--kk-duration) ease, border-color var(--kk-duration) ease;
}

.kk-footer__social a:hover {
    background-color: var(--kk-accent);
    border-color: var(--kk-accent);
    color: var(--kk-gray-900);
}

.kk-footer__bottom {
    padding: var(--kk-space-4) 0;
    font-size: var(--kk-text-14);
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.kk-footer__bottom .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kk-space-2) var(--kk-space-4);
}

.kk-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kk-space-1) var(--kk-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}


/* 17. Page banner & flash ================================================== */

.kk-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--kk-space-6) 0 var(--kk-space-5);
    color: rgba(255, 255, 255, .85);
    background-color: var(--kk-navy);
}

@media (min-width: 992px) {
    .kk-banner {
        padding: var(--kk-space-7) 0 var(--kk-space-6);
    }
}

.kk-banner__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Navy scrim: dense behind the text on the left, lighter to the right */
.kk-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, rgba(11, 58, 94, .95) 0%, rgba(11, 58, 94, .86) 45%, rgba(11, 58, 94, .6) 100%);
}

.kk-banner__title {
    max-width: 48rem;
    margin-bottom: var(--kk-space-2);
    color: var(--kk-white);
}

.kk-banner__subtitle {
    max-width: 40rem;
    margin-bottom: 0;
    font-size: var(--kk-text-18);
    color: rgba(255, 255, 255, .85);
}

.kk-banner .breadcrumb {
    margin-bottom: var(--kk-space-3);
}

.kk-banner .breadcrumb a {
    color: rgba(255, 255, 255, .8);
}

.kk-banner .breadcrumb a:hover {
    color: var(--kk-white);
}

.kk-banner .breadcrumb-item.active {
    color: var(--kk-white);
}

.kk-banner .breadcrumb-item+.breadcrumb-item::before {
    color: rgba(255, 255, 255, .55);
}

.kk-flash {
    padding-top: var(--kk-space-4);
}

.kk-flash .alert:last-child {
    margin-bottom: 0;
}


/* 18. Listing card ========================================================= */

.kk-listing {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    background-color: var(--kk-surface);
    border-radius: var(--kk-radius-lg);
    box-shadow: var(--kk-hairline), var(--sh-2);
    transition: box-shadow var(--kk-duration) var(--kk-ease), transform var(--kk-duration) var(--kk-ease);
}

.kk-listing:hover,
.kk-listing:focus-within {
    box-shadow: var(--kk-hairline), var(--sh-3);
    transform: translateY(-2px);
}

/* Photo: locked to 4:3 so nothing shifts while it loads */
.kk-listing__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--kk-gray-200);
}

.kk-listing__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s var(--kk-ease);
}

.kk-listing:hover .kk-listing__media img {
    transform: scale(1.04);
}

.kk-listing.is-unavailable .kk-listing__media img {
    filter: grayscale(.4);
}

.kk-listing__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--kk-text-30);
    color: var(--kk-gray-400);
}

.kk-listing__badges {
    position: absolute;
    top: .75rem;
    left: .75rem;
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    max-width: calc(100% - 4.5rem);
}

.kk-listing__count {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .5rem;
    font-size: var(--kk-text-12);
    font-weight: 600;
    color: var(--kk-white);
    background-color: rgba(17, 24, 39, .72);
    border-radius: var(--kk-radius-sm);
}

.kk-listing.is-unavailable .kk-listing__count {
    bottom: 2.5rem;
}

.kk-listing__availability {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: .4375rem .75rem;
    font-size: var(--kk-text-12);
    font-weight: 600;
    color: var(--kk-white);
    background-color: rgba(17, 24, 39, .8);
}

/* Save button: above the stretched card link */
.kk-listing__fav {
    position: absolute;
    top: .625rem;
    right: .625rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    font-size: var(--kk-text-16);
    color: var(--kk-gray-800);
    background-color: rgba(255, 255, 255, .94);
    border: 0;
    border-radius: 50%;
    box-shadow: var(--sh-1);
    transition: color var(--kk-duration) ease, transform var(--kk-duration) ease;
}

.kk-listing__fav:hover {
    color: var(--kk-danger);
    transform: scale(1.06);
}

.kk-listing__fav.is-saved {
    color: var(--kk-danger);
}

.kk-listing__fav:disabled {
    opacity: .7;
}

.kk-listing__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 1rem 1.25rem .75rem;
}

.kk-listing__price {
    margin-bottom: .25rem;
    font-family: var(--kk-font-heading);
    font-size: var(--kk-text-20);
    font-weight: 700;
    line-height: 1.3;
    color: var(--kk-primary);
}

.kk-listing__period {
    font-family: var(--kk-font-body);
    font-size: var(--kk-text-14);
    font-weight: 500;
    color: var(--kk-text-muted);
}

.kk-listing__title {
    display: -webkit-box;
    margin-bottom: .25rem;
    overflow: hidden;
    font-family: var(--kk-font-body);
    font-size: var(--kk-text-16);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.kk-listing__title a {
    color: var(--kk-gray-900);
}

.kk-listing__title a:hover {
    color: var(--kk-primary);
    text-decoration: none;
}

/* The whole card is the link (stretched-link); show the focus ring on the card */
.kk-listing__title a:focus-visible {
    outline: 0;
}

.kk-listing__title a:focus-visible::after {
    outline: 2px solid var(--kk-primary);
    outline-offset: -2px;
    border-radius: var(--kk-radius-lg);
}

.kk-listing__location {
    display: flex;
    align-items: baseline;
    gap: .25rem;
    margin-bottom: .75rem;
    overflow: hidden;
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.kk-listing__location .kk-icon {
    color: var(--kk-primary);
}

/* Spec row sits at the bottom of the body so rows of cards line up */
.kk-listing__specs {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem 1rem;
    margin: auto 0 0;
    padding: .75rem 0 0;
    font-size: var(--kk-text-14);
    color: var(--kk-gray-700);
    list-style: none;
    border-top: 1px solid var(--kk-border);
}

.kk-listing__specs li {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    white-space: nowrap;
}

.kk-listing__specs .kk-icon {
    color: var(--kk-gray-500);
}

.kk-listing__footer {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 1.25rem 1rem;
}

.kk-listing__agent {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    font-size: var(--kk-text-14);
    color: var(--kk-gray-700);
}

.kk-listing__agent img,
.kk-listing__initials {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 50%;
}

.kk-listing__initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--kk-text-12);
    font-weight: 700;
    color: var(--kk-primary-active);
    background-color: var(--kk-primary-soft);
}

.kk-listing__enquire {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    margin-left: auto;
}

/* List variant: photo left, details right (from md). Also applied to every
   card in a results grid switched to list view (.is-list). */
@media (min-width: 768px) {

    .kk-listing--list,
    .is-list>.kk-listing {
        display: grid;
        grid-template-columns: minmax(15rem, 38%) minmax(0, 1fr);
        grid-template-rows: 1fr auto;
    }

    .kk-listing--list .kk-listing__media,
    .is-list>.kk-listing .kk-listing__media {
        grid-row: 1 / 3;
        aspect-ratio: auto;
        min-height: 13rem;
    }

    .kk-listing--list .kk-listing__body,
    .is-list>.kk-listing .kk-listing__body {
        padding: 1.25rem 4rem .75rem 1.5rem;
    }

    .kk-listing--list .kk-listing__footer,
    .is-list>.kk-listing .kk-listing__footer {
        padding: .5rem 1.5rem 1.25rem;
    }
}

/* Card linked to a hovered map pin */
.kk-listing.is-highlighted {
    box-shadow: 0 0 0 2px var(--kk-primary), var(--sh-3);
}

@media (prefers-reduced-motion: reduce) {

    .kk-listing,
    .kk-listing__media img,
    .kk-listing__fav {
        transition: none;
    }

    .kk-listing:hover,
    .kk-listing:focus-within,
    .kk-listing:hover .kk-listing__media img {
        transform: none;
    }
}


/* 19. Homepage ============================================================= */

/* Hero: full-bleed photo under a dark scrim, headline and search centred */
.kk-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--kk-space-6) 0 var(--kk-space-5);
    color: rgba(255, 255, 255, .88);
    background-color: var(--kk-navy);
}

@media (min-width: 992px) {
    .kk-hero {
        padding: 7rem 0 5rem;
    }
}

.kk-hero__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kk-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(7, 42, 69, .62) 0%, rgba(7, 42, 69, .78) 55%, rgba(7, 42, 69, .92) 100%);
}

.kk-hero__intro {
    max-width: 46rem;
    margin: 0 auto var(--kk-space-5);
    text-align: center;
}

.kk-hero__title {
    margin-bottom: var(--kk-space-3);
    font-size: clamp(2.125rem, 1.4rem + 3.2vw, var(--kk-text-60));
    font-weight: 800;
    line-height: 1.1;
    color: var(--kk-white);
}

.kk-hero__lead {
    margin: 0;
    font-size: clamp(1.0625rem, 1rem + .4vw, var(--kk-text-20));
    color: rgba(255, 255, 255, .88);
}

.kk-hero__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 2rem;
    margin: var(--kk-space-4) 0 0;
    padding: 0;
    font-size: var(--kk-text-14);
    list-style: none;
}

.kk-hero__stats strong {
    font-size: var(--kk-text-16);
    color: var(--kk-white);
}

/* Search panel */
.kk-search {
    max-width: 70rem;
    margin: 0 auto;
}

.kk-search__tabs {
    display: flex;
    gap: .25rem;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Real radios, visually replaced by their labels (still keyboard operable) */
.kk-search__tab-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.kk-search__tab {
    margin: 0;
    padding: .625rem 1.25rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--kk-white);
    background-color: rgba(255, 255, 255, .16);
    border-radius: var(--kk-radius-lg) var(--kk-radius-lg) 0 0;
    cursor: pointer;
    transition: background-color var(--kk-duration) ease, color var(--kk-duration) ease;
}

.kk-search__tab:hover {
    background-color: rgba(255, 255, 255, .26);
}

.kk-search__tab-input:checked+.kk-search__tab {
    color: var(--kk-gray-900);
    background-color: var(--kk-white);
}

.kk-search__tab-input:focus-visible+.kk-search__tab {
    outline: 2px solid var(--kk-white);
    outline-offset: 2px;
}

.kk-search__panel {
    padding: 1.25rem;
    color: var(--kk-text);
    background-color: var(--kk-white);
    border-radius: 0 var(--kk-radius-lg) var(--kk-radius-lg) var(--kk-radius-lg);
    box-shadow: var(--sh-3);
}

.kk-search__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: end;
}

.kk-search__row--advanced {
    padding-top: 1rem;
}

@media (min-width: 576px) {
    .kk-search__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kk-search__field--grow,
    .kk-search__submit {
        grid-column: 1 / -1;
    }
}

@media (min-width: 992px) {
    .kk-search__panel {
        padding: 1.5rem;
    }

    .kk-search__row {
        grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) auto;
    }

    .kk-search__row--advanced {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .kk-search__field--grow,
    .kk-search__submit {
        grid-column: auto;
    }
}

.kk-search__field label:not(.custom-control-label) {
    margin-bottom: .375rem;
    font-size: var(--kk-text-12);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kk-gray-600);
}

.kk-search__field--check {
    display: flex;
    align-items: center;
    min-height: var(--kk-control-h);
}

.kk-search__submit .btn {
    height: var(--kk-control-h);
    padding-right: 1.75rem;
    padding-left: 1.75rem;
}

.kk-search__more {
    margin-top: .75rem;
    padding: 0;
}

/* Action cards */
.kk-actions {
    padding-top: var(--kk-space-5);
}

.kk-action {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem;
    color: var(--kk-text);
}

.kk-action:hover {
    color: var(--kk-text);
    text-decoration: none;
}

.kk-action__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    font-size: var(--kk-text-20);
    color: var(--kk-primary-active);
    background-color: var(--kk-primary-soft);
    border-radius: var(--kk-radius);
}

.kk-action__title {
    margin-bottom: .25rem;
    font-family: var(--kk-font-heading);
    font-size: var(--kk-text-18);
    font-weight: 700;
}

.kk-action__text {
    margin-bottom: 1rem;
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
}

.kk-action__arrow {
    margin-top: auto;
    color: var(--kk-primary);
    transition: transform var(--kk-duration) ease;
}

.kk-action:hover .kk-action__arrow {
    transform: translateX(4px);
}

/* Popular places */
.kk-place {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    height: 100%;
    padding: 1rem 1.25rem;
    color: var(--kk-text);
}

.kk-place:hover {
    color: var(--kk-text);
    text-decoration: none;
}

.kk-place__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    color: var(--kk-primary-active);
    background-color: var(--kk-primary-soft);
    border-radius: 50%;
}

.kk-place__name {
    display: block;
    font-weight: 700;
    color: var(--kk-gray-900);
}

.kk-place__count {
    display: block;
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
}

/* Property type chips */
.kk-types {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-type {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem 1.125rem;
    font-weight: 600;
    color: var(--kk-gray-800);
    background-color: var(--kk-white);
    border-radius: var(--kk-radius-pill);
    box-shadow: var(--kk-hairline), var(--sh-1);
    transition: color var(--kk-duration) ease, box-shadow var(--kk-duration) ease;
}

.kk-type:hover {
    color: var(--kk-primary);
    text-decoration: none;
    box-shadow: var(--kk-hairline), var(--sh-2);
}

.kk-type .kk-icon {
    color: var(--kk-primary);
}

/* About */
.kk-about__media {
    border-radius: var(--kk-radius-lg);
    box-shadow: var(--sh-3);
}

.kk-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    margin: var(--kk-space-4) 0;
}

.kk-stats>div {
    display: flex;
    flex-direction: column-reverse;
}

.kk-stats dt {
    font-size: var(--kk-text-14);
    font-weight: 500;
    color: var(--kk-text-muted);
}

.kk-stats dd {
    margin: 0;
    font-family: var(--kk-font-heading);
    font-size: var(--kk-text-30);
    font-weight: 800;
    line-height: 1.1;
    color: var(--kk-primary);
}

/* Why choose us */
.kk-reason {
    height: 100%;
}

.kk-reason__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    font-size: var(--kk-text-20);
    color: var(--kk-primary);
    background-color: var(--kk-white);
    border-radius: 50%;
    box-shadow: var(--kk-hairline), var(--sh-1);
}

.kk-reason__title {
    margin-bottom: .5rem;
    font-size: var(--kk-text-18);
}

.kk-reason__text {
    margin-bottom: 0;
    font-size: .9375rem;
    color: var(--kk-gray-700);
}

/* Call-to-action band */
.kk-cta {
    padding: var(--kk-space-6) 0;
    background: linear-gradient(120deg, var(--kk-navy) 0%, var(--kk-primary-active) 100%);
}

.kk-cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kk-space-4);
}

.kk-cta__title {
    margin-bottom: .5rem;
    color: var(--kk-white);
}

.kk-cta__text {
    margin: 0;
    font-size: var(--kk-text-18);
    color: rgba(255, 255, 255, .85);
}

.kk-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

@media (prefers-reduced-motion: reduce) {

    .kk-search__tab,
    .kk-action__arrow,
    .kk-type {
        transition: none;
    }

    .kk-action:hover .kk-action__arrow {
        transform: none;
    }
}


/* 20. Search results & map ================================================= */

/* Shorter banner for results pages */
.kk-banner--compact {
    padding: var(--kk-space-5) 0 var(--kk-space-4);
}

@media (min-width: 992px) {
    .kk-banner--compact {
        padding: 3.5rem 0 2.5rem;
    }
}

.kk-banner--compact .kk-banner__title {
    font-size: clamp(1.75rem, 1.4rem + 1.5vw, var(--kk-text-38));
}

.kk-banner--compact .kk-banner__subtitle {
    font-size: var(--kk-text-16);
}

.kk-banner__links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: var(--kk-space-3);
}

.kk-banner__links a {
    padding: .25rem .75rem;
    font-size: var(--kk-text-14);
    color: var(--kk-white);
    background-color: rgba(255, 255, 255, .14);
    border-radius: var(--kk-radius-pill);
}

.kk-banner__links a:hover {
    color: var(--kk-white);
    text-decoration: none;
    background-color: rgba(255, 255, 255, .26);
}

/* Sticky filter bar - sits directly under the sticky site header */
.kk-filters-wrap {
    position: sticky;
    top: var(--kk-header-h, 4rem);
    z-index: 1010;
    padding: .75rem 0;
    background-color: var(--kk-surface);
    box-shadow: 0 1px 0 var(--kk-border), var(--sh-1);
}

/* Same width as the results + map below it, not the 1240px page container */
.kk-filters-wrap__inner {
    max-width: 100rem;
    margin: 0 auto;
    padding: 0 12px;
}

@media (min-width: 576px) {
    .kk-filters-wrap__inner {
        padding: 0 var(--kk-space-4);
    }
}

.kk-filters__bar {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.kk-filters__location {
    flex: 2 1 14rem;
    min-width: 0;
}

.kk-filters__actions {
    display: flex;
    flex-shrink: 0;
    gap: .5rem;
}

.kk-filters__toggle .badge {
    margin-left: .125rem;
}

.kk-filters__main {
    display: flex;
    flex: 5 1 auto;
    gap: .5rem;
    min-width: 0;
}

.kk-filters__main>div {
    flex: 1 1 8.5rem;
    min-width: 0;
}

.kk-filters__main>.kk-filters__price {
    display: flex;
    flex: 2 1 17.5rem;
    gap: .5rem;
}

.kk-filters__price>div {
    flex: 1 1 0;
    min-width: 0;
}

.kk-filters__main .custom-select {
    padding-right: 2rem;
    padding-left: .875rem;
    background-position: right .75rem center;
}

.kk-filters__panel {
    margin-top: .75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--kk-border);
}

.kk-filters--enhanced:not(.is-open) .kk-filters__panel {
    display: none;
}

.kk-filters.is-open .kk-filters__panel {
    max-height: calc(100vh - var(--kk-header-h, 4rem) - 8rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.kk-filters__panel .form-group {
    margin-bottom: 1rem;
}

.kk-filters__group {
    margin-bottom: .5rem;
    font-size: var(--kk-text-12);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kk-gray-600);
}

.kk-filters__panel-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: .5rem;
}

/* Below 1200px: location + buttons; the other fields open with "Filters" */
@media (max-width: 1199.98px) {
    .kk-filters__bar {
        flex-wrap: wrap;
    }

    .kk-filters__main {
        display: grid;
        flex-basis: 100%;
        order: 3;
        grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    }

    .kk-filters__main>.kk-filters__price {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kk-filters--enhanced:not(.is-open) .kk-filters__main {
        display: none;
    }

    .kk-filters.is-open {
        max-height: calc(100vh - var(--kk-header-h, 4rem) - 1.5rem);
        overflow-y: auto;
    }

    .kk-filters.is-open .kk-filters__panel {
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 575.98px) {

    .kk-filters__toggle-label,
    .kk-filters__submit span {
        display: none;
    }

    .kk-filters__toggle,
    .kk-filters__submit {
        padding-right: .875rem;
        padding-left: .875rem;
    }
}

/* Results beside the map */
.kk-results {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kk-space-4);
    max-width: 100rem;
    margin: 0 auto;
    padding: var(--kk-space-4) 12px var(--kk-space-6);
}

@media (min-width: 576px) {
    .kk-results {
        padding-right: var(--kk-space-4);
        padding-left: var(--kk-space-4);
    }
}

@media (min-width: 992px) {
    .kk-results {
        grid-template-columns: minmax(0, 1fr) minmax(22rem, 36%);
    }

    .kk-results.is-map-hidden {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The floating Map button would cover the open filter panel on phones */
body.kk-filters-open .kk-results__map-fab {
    display: none;
}

.kk-results__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-bottom: 1rem;
}

.kk-results__count {
    margin: 0;
    color: var(--kk-gray-700);
}

.kk-results__count strong {
    font-size: var(--kk-text-18);
    color: var(--kk-gray-900);
}

.kk-results__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.kk-results__controls .custom-select {
    width: auto;
}

.kk-results__views .btn.active {
    color: var(--kk-primary);
    background-color: var(--kk-primary-soft);
}

.kk-results__map-toggle {
    display: none;
}

@media (min-width: 992px) {
    .kk-results__map-toggle {
        display: inline-flex;
    }
}

/* Active filter chips */
.kk-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.kk-chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .3125rem .625rem .3125rem .75rem;
    font-size: var(--kk-text-14);
    font-weight: 500;
    color: var(--kk-primary-active);
    background-color: var(--kk-primary-soft);
    border-radius: var(--kk-radius-pill);
    transition: background-color var(--kk-duration) ease;
}

.kk-chip:hover {
    color: var(--kk-primary-active);
    text-decoration: none;
    background-color: rgba(24, 112, 184, .2);
}

.kk-chip .kk-icon {
    width: auto;
    font-size: var(--kk-text-12);
}

.kk-chips--links .kk-chip {
    padding-right: .75rem;
}

.kk-chips__clear {
    margin-left: .25rem;
    font-size: var(--kk-text-14);
    font-weight: 600;
}

.kk-results__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
    gap: var(--kk-space-4);
    transition: opacity var(--kk-duration) ease;
}

.kk-results__grid.is-list {
    grid-template-columns: minmax(0, 1fr);
}

.kk-results__grid.is-loading {
    opacity: .45;
    pointer-events: none;
}

.kk-results__pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: var(--kk-space-5);
}

.kk-results__range {
    margin: 0;
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
}

.kk-results__empty {
    padding-bottom: var(--kk-space-4);
}

.kk-results__empty .kk-empty {
    padding-bottom: var(--kk-space-4);
}

.kk-results__suggest {
    padding: 0 var(--kk-space-4) var(--kk-space-3);
    text-align: center;
}

.kk-results__suggest-title {
    margin-bottom: .75rem;
    font-weight: 600;
}

.kk-results__suggest .kk-chips {
    justify-content: center;
    margin-bottom: 0;
}

.kk-results__account {
    margin: var(--kk-space-3) var(--kk-space-4) 0;
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
    text-align: center;
}

/* Map panel: sticky beside the results from lg; a full-screen overlay on phones */
.kk-results__map {
    display: none;
    position: relative;
}

@media (min-width: 992px) {

    /* Header + the ~4.5rem filter bar + a gap */
    .kk-results__map {
        display: block;
        position: sticky;
        top: calc(var(--kk-header-h, 4rem) + 5.75rem);
        height: calc(100vh - var(--kk-header-h, 4rem) - 7rem);
        min-height: 24rem;
        overflow: hidden;
        border-radius: var(--kk-radius-lg);
        box-shadow: var(--kk-hairline), var(--sh-2);
    }

    .kk-results.is-map-hidden .kk-results__map {
        display: none;
    }
}

.kk-map {
    width: 100%;
    height: 100%;
    background-color: var(--kk-gray-200);
}

.kk-results__map-note {
    position: absolute;
    right: 4rem;
    bottom: .75rem;
    left: .75rem;
    z-index: 450;
    display: flex;
    gap: .375rem;
    width: max-content;
    max-width: calc(100% - 4.75rem);
    margin: 0;
    padding: .375rem .625rem;
    font-size: var(--kk-text-12);
    color: var(--kk-gray-700);
    background-color: rgba(255, 255, 255, .94);
    border-radius: var(--kk-radius-sm);
    box-shadow: var(--sh-1);
}

.kk-results__map-close {
    display: none;
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 1000;
    box-shadow: var(--sh-2);
}

.kk-results__map.is-fullscreen {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1040;
    height: auto;
}

.kk-results__map.is-fullscreen .kk-results__map-close {
    display: inline-flex;
}

.kk-results__map-fab {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    z-index: 1020;
    padding: .625rem 1.25rem;
    border-radius: var(--kk-radius-pill);
    box-shadow: var(--sh-3);
    transform: translateX(-50%);
}

@media (min-width: 992px) {
    .kk-results__map-fab {
        display: none;
    }
}

body.kk-map-open {
    overflow: hidden;
}

/* Price pins (Leaflet divIcon): the tip sits exactly on the coordinate */
.kk-pin-wrap {
    background: none;
    border: 0;
}

.kk-pin {
    position: relative;
    display: inline-block;
    padding: .25rem .5rem;
    font: 700 .75rem/1.2 var(--kk-font-body);
    color: var(--kk-white);
    white-space: nowrap;
    background-color: var(--kk-primary);
    border-radius: var(--kk-radius-pill);
    box-shadow: var(--sh-2);
    transform: translate(-50%, calc(-100% - 6px));
    cursor: pointer;
    transition: background-color var(--kk-duration) ease, transform var(--kk-duration) ease;
}

.kk-pin::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    border: 5px solid transparent;
    border-top-color: var(--kk-primary);
    border-bottom: 0;
    transform: translateX(-50%);
}

.kk-pin--approx::before {
    content: "≈ ";
}

.kk-pin.is-active {
    background-color: var(--kk-navy);
    transform: translate(-50%, calc(-100% - 6px)) scale(1.1);
}

.kk-pin.is-active::after {
    border-top-color: var(--kk-navy);
}

.leaflet-marker-icon:focus-visible .kk-pin {
    outline: 2px solid var(--kk-navy);
    outline-offset: 2px;
}

.leaflet-container {
    font-family: var(--kk-font-body);
}

.leaflet-popup-content-wrapper {
    border-radius: var(--kk-radius);
    box-shadow: var(--sh-3);
}

.leaflet-popup-content {
    margin: .75rem 1rem;
    line-height: 1.4;
}

.kk-popup__title {
    display: block;
    margin-bottom: .25rem;
    font-weight: 700;
    color: var(--kk-gray-900);
}

.kk-popup__meta {
    display: block;
    font-size: var(--kk-text-12);
    color: var(--kk-text-muted);
}

.kk-popup__approx {
    display: block;
    margin-top: .25rem;
    font-size: var(--kk-text-12);
    color: #92400e;
}

@media (prefers-reduced-motion: reduce) {

    .kk-chip,
    .kk-results__grid,
    .kk-pin {
        transition: none;
    }
}


/* 21. Property page ======================================================== */

/* WhatsApp green, darkened to reach 5.4:1 with white text */
.btn-whatsapp {
    color: var(--kk-white);
    background-color: #0f7a3d;
    border-color: #0f7a3d;
}

.btn-whatsapp:hover,
.btn-whatsapp:not(:disabled):not(.disabled):active {
    color: var(--kk-white);
    background-color: #0b6331;
    border-color: #0b6331;
}

.kk-prewrap {
    white-space: pre-line;
}

.kk-detail__crumbs {
    padding: var(--kk-space-4) 0 var(--kk-space-3);
}

.kk-detail__crumbs .breadcrumb {
    flex-wrap: nowrap;
}

.kk-detail__crumbs .breadcrumb-item {
    flex-shrink: 0;
}

.kk-detail__crumbs .breadcrumb-item.active {
    flex-shrink: 1;
    min-width: 0;
}

/* Gallery: one row of equal tiles, the video's among them -------------- */

.kk-gallery {
    position: relative;
}

/* Columns come from data-count, which the template sets to the number of
   tiles, so a row is always full: one hero, or two, three or four across.
   Every tile is then the same width by construction. */
.kk-gallery__grid {
    display: grid;
    grid-template-columns: repeat(var(--kk-gallery-cols, 4), minmax(0, 1fr));
    gap: .5rem;
    overflow: hidden;
    border-radius: var(--kk-radius-lg);
}

.kk-gallery__grid[data-count="1"] {
    --kk-gallery-cols: 1;
}

.kk-gallery__grid[data-count="2"] {
    --kk-gallery-cols: 2;
}

.kk-gallery__grid[data-count="3"] {
    --kk-gallery-cols: 3;
}

.kk-gallery__grid[data-count="4"] {
    --kk-gallery-cols: 4;
}

/* Phones: two across at the most. Four tiles at 90px each are not worth
   showing anybody. */
@media (max-width: 767.98px) {

    .kk-gallery__grid[data-count="3"],
    .kk-gallery__grid[data-count="4"] {
        --kk-gallery-cols: 2;
    }
}

/* Every tile the same shape: 4:3, or 16:9 when it is the only one. Photo and
   video tiles share this rule, so the two are always exactly the same size. */
.kk-gallery__tile {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0;
    overflow: hidden;
    background-color: var(--kk-gray-200);
    border: 0;
}

.kk-gallery__grid[data-count="1"] .kk-gallery__tile {
    aspect-ratio: 16 / 9;
}

.kk-gallery__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s var(--kk-ease), filter var(--kk-duration) ease;
}

.kk-gallery__tile:hover img {
    transform: scale(1.03);
    filter: brightness(.94);
}

.kk-gallery__tile:focus-visible {
    outline-offset: -3px;
}

/* Play badge over the video's poster frame */
.kk-gallery__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2rem, 1rem + 2vw, 3.25rem);
    color: var(--kk-white);
    background-color: rgba(7, 42, 69, .3);
    transition: background-color var(--kk-duration) ease;
}

.kk-gallery__tile--video:hover .kk-gallery__play {
    background-color: rgba(7, 42, 69, .45);
}

/* "+N" on the last tile: how many more are in the lightbox behind it. */
.kk-gallery__overflow {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--kk-font-heading);
    font-size: clamp(1.25rem, .75rem + 1.5vw, 2rem);
    font-weight: 700;
    color: var(--kk-white);
    background-color: rgba(7, 42, 69, .55);
}

/* A property with no photos at all */
.kk-gallery__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    aspect-ratio: 16 / 6;
    min-height: 12rem;
    color: var(--kk-text-muted);
    background-color: var(--kk-gray-100);
    border-radius: var(--kk-radius-lg);
}

.kk-gallery__empty .kk-icon {
    font-size: var(--kk-text-30);
    color: var(--kk-gray-400);
}

/* Lightbox: dark full-screen modal. Bootstrap sets an inline padding-right
   for scrollbar compensation, which a full-screen dialog must not have. */
.kk-lightbox {
    padding: 0 !important;
}

.kk-lightbox .modal-dialog {
    max-width: none;
    height: 100%;
    margin: 0;
}

.kk-lightbox .modal-content {
    height: 100%;
    color: var(--kk-white);
    background-color: #0a0e16;
    /* opaque: even 3% see-through shows the page on dark */
    border-radius: 0;
}

.kk-lightbox__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
}

.kk-lightbox__counter {
    margin: 0;
    font-size: var(--kk-text-14);
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
}

.kk-lightbox__close {
    color: var(--kk-white);
}

.kk-lightbox__close:hover {
    color: var(--kk-white);
    background-color: rgba(255, 255, 255, .12);
}

.kk-lightbox__stage {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0 3.75rem;
    touch-action: pan-y;
}

.kk-lightbox__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(94vw, 84rem);
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}

/* A photo, an uploaded video and a YouTube player all get the same frame:
   one width, one cap on the height, and the medium letterboxed inside it.
   Stepping through the gallery therefore moves nothing - the stage is the
   same size on every slide, whatever kind of media it is holding. */
.kk-lightbox__figure img,
.kk-lightbox__figure video,
.kk-lightbox__figure iframe {
    width: 100%;
    max-height: calc(100vh - 14rem);
    aspect-ratio: 16 / 9;
    object-fit: contain;
    border: 0;
    background-color: #000;
    border-radius: var(--kk-radius);
    user-select: none;
}

/* Phones: a 4:3 frame, which suits the photographs. The video letterboxes
   inside it rather than the photographs being shrunk to a letterbox. */
@media (max-width: 767.98px) {

    .kk-lightbox__figure img,
    .kk-lightbox__figure video,
    .kk-lightbox__figure iframe {
        aspect-ratio: 4 / 3;
    }
}

.kk-lightbox__caption {
    margin-top: .75rem;
    font-size: var(--kk-text-14);
    color: rgba(255, 255, 255, .8);
    text-align: center;
}

.kk-lightbox__caption:empty {
    display: none;
}

.kk-lightbox__nav {
    position: absolute;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    font-size: var(--kk-text-18);
    color: var(--kk-white);
    background-color: rgba(255, 255, 255, .12);
    border: 0;
    border-radius: 50%;
    transform: translateY(-50%);
}

.kk-lightbox__nav:hover {
    background-color: rgba(255, 255, 255, .24);
}

.kk-lightbox__nav:focus-visible {
    outline-color: var(--kk-white);
}

.kk-lightbox__nav--prev {
    left: .5rem;
}

.kk-lightbox__nav--next {
    right: .5rem;
}

.kk-lightbox__nav:disabled {
    opacity: .3;
}

.kk-lightbox__thumbs {
    display: flex;
    gap: .5rem;
    padding: .75rem 1rem 1rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.kk-lightbox__thumb {
    flex-shrink: 0;
    padding: 0;
    overflow: hidden;
    background: none;
    border: 2px solid transparent;
    border-radius: var(--kk-radius-sm);
    opacity: .55;
    transition: opacity var(--kk-duration) ease, border-color var(--kk-duration) ease;
}

.kk-lightbox__thumb img {
    display: block;
    width: 4.5rem;
    height: 3.375rem;
    object-fit: cover;
}

.kk-lightbox__thumb:hover {
    opacity: .85;
}

.kk-lightbox__thumb.is-active {
    border-color: var(--kk-white);
    opacity: 1;
}

@media (max-width: 575.98px) {
    .kk-lightbox__stage {
        padding: 0;
    }

    .kk-lightbox__nav {
        top: auto;
        bottom: 1rem;
        transform: none;
        background-color: rgba(0, 0, 0, .45);
    }
}

/* Media shortcuts under the gallery */
.kk-detail__media-links {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: .75rem;
}

/* Brokerage fee notice under the gallery. Informational, not a warning, so
   amber rather than the danger red. */
.kk-viewing-fee {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: var(--kk-space-3);
    padding: .875rem 1rem;
    font-size: var(--kk-text-14);
    line-height: 1.45;
    color: var(--kk-gray-800);
    background-color: rgba(245, 165, 36, .12);
    border: 1px solid rgba(245, 165, 36, .4);
    border-left: 4px solid var(--kk-accent);
    border-radius: var(--kk-radius);
}

.kk-viewing-fee__icon {
    flex: 0 0 auto;
    margin-top: .125rem;
    color: var(--kk-accent-hover);
}

.kk-viewing-fee strong {
    color: var(--kk-gray-900);
}

.kk-viewing-fee__amount {
    white-space: nowrap;
}

/* Title block */
.kk-detail__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--kk-space-3) var(--kk-space-5);
    padding: var(--kk-space-4) 0 var(--kk-space-3);
}

.kk-detail__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}

.kk-detail__type {
    font-size: var(--kk-text-14);
    font-weight: 600;
    color: var(--kk-gray-700);
}

.kk-detail__title {
    margin-bottom: .5rem;
    font-size: clamp(var(--kk-text-24), 1.2rem + 1.5vw, var(--kk-text-38));
}

.kk-detail__location {
    display: flex;
    align-items: baseline;
    gap: .375rem;
    margin-bottom: .25rem;
    font-size: var(--kk-text-18);
    color: var(--kk-gray-700);
}

.kk-detail__location .kk-icon {
    color: var(--kk-primary);
}

.kk-detail__meta {
    margin: 0;
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
}

.kk-detail__price-block {
    flex-shrink: 0;
    text-align: left;
}

@media (min-width: 768px) {
    .kk-detail__price-block {
        text-align: right;
    }
}

.kk-detail__price {
    margin: 0;
    font-family: var(--kk-font-heading);
    font-size: clamp(var(--kk-text-24), 1.2rem + 1.2vw, var(--kk-text-30));
    font-weight: 800;
    line-height: 1.2;
    color: var(--kk-primary);
}

.kk-detail__period {
    font-family: var(--kk-font-body);
    font-size: var(--kk-text-16);
    font-weight: 500;
    color: var(--kk-text-muted);
}

.kk-detail__negotiable {
    margin: .25rem 0 0;
    font-size: var(--kk-text-14);
    font-weight: 600;
    color: var(--kk-success);
}

.kk-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

@media (min-width: 768px) {
    .kk-detail__actions {
        justify-content: flex-end;
    }
}

.kk-detail__save.is-saved {
    color: var(--kk-danger);
    border-color: rgba(220, 38, 38, .4);
}

/* Spec row */
.kk-detail__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin: 0 0 var(--kk-space-4);
    padding: var(--kk-space-3) 0;
    list-style: none;
    border-top: 1px solid var(--kk-border);
    border-bottom: 1px solid var(--kk-border);
}

.kk-detail__specs li {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.kk-detail__spec-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    font-size: var(--kk-text-18);
    color: var(--kk-primary-active);
    background-color: var(--kk-primary-soft);
    border-radius: var(--kk-radius);
}

.kk-detail__specs strong {
    display: block;
    font-family: var(--kk-font-heading);
    font-size: var(--kk-text-18);
    line-height: 1.2;
}

.kk-detail__spec-label {
    display: block;
    font-size: var(--kk-text-12);
    color: var(--kk-text-muted);
}

/* Two columns: content + sticky contact */
.kk-detail__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kk-space-5);
    padding-bottom: var(--kk-space-6);
}

@media (min-width: 992px) {
    .kk-detail__body {
        grid-template-columns: minmax(0, 1fr) 23.5rem;
    }

    .kk-detail__sticky {
        position: sticky;
        top: calc(var(--kk-header-h, 4rem) + 1.5rem);
    }
}

.kk-detail__section {
    padding-bottom: var(--kk-space-5);
    margin-bottom: var(--kk-space-5);
    border-bottom: 1px solid var(--kk-border);
}

.kk-detail__section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.kk-detail__heading {
    margin-bottom: var(--kk-space-3);
    font-size: var(--kk-text-24);
}

/* Read more */
.kk-readmore.is-collapsible:not(.is-open) .kk-readmore__content {
    max-height: 12rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
    mask-image: linear-gradient(180deg, #000 60%, transparent);
}

.kk-readmore__toggle {
    margin-top: .5rem;
}

/* Key facts */
.kk-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 0 var(--kk-space-4);
    margin: 0;
}

.kk-facts>div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .625rem 0;
    border-bottom: 1px dashed var(--kk-border);
}

.kk-facts dt {
    font-weight: 400;
    color: var(--kk-text-muted);
}

.kk-facts dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
}

/* Features */
.kk-features {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--kk-space-4);
}

.kk-features__title {
    margin-bottom: .75rem;
    font-family: var(--kk-font-body);
    font-size: var(--kk-text-14);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kk-gray-600);
}

.kk-features__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-features__list li {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .3125rem 0;
}

.kk-features__list .kk-icon {
    color: var(--kk-primary);
}

/* Location */
.kk-detail__address {
    display: flex;
    gap: .5rem;
    margin-bottom: var(--kk-space-3);
}

.kk-detail__address>.kk-icon {
    margin-top: .3rem;
    color: var(--kk-primary);
}

.kk-detail__map {
    height: 22rem;
    margin-bottom: var(--kk-space-3);
    overflow: hidden;
    background-color: var(--kk-gray-200);
    border-radius: var(--kk-radius-lg);
}

.kk-detail__location-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}

.kk-detail__note {
    display: flex;
    gap: .5rem;
    margin: var(--kk-space-3) 0 0;
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
}

.kk-detail__note .kk-icon {
    margin-top: .2rem;
}

/* Contact card */
.kk-contact {
    padding: var(--kk-space-4);
    margin-bottom: var(--kk-space-4);
    box-shadow: var(--kk-hairline), var(--sh-2);
}

.kk-contact__agent {
    display: flex;
    align-items: center;
    gap: .875rem;
    margin-bottom: var(--kk-space-3);
}

.kk-contact__avatar {
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 50%;
}

.kk-contact__avatar--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--kk-font-heading);
    font-size: var(--kk-text-18);
    font-weight: 700;
    color: var(--kk-primary-active);
    background-color: var(--kk-primary-soft);
}

.kk-contact__label {
    margin: 0;
    font-size: var(--kk-text-12);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kk-gray-600);
}

.kk-contact__name {
    margin: 0;
    font-family: var(--kk-font-heading);
    font-size: var(--kk-text-18);
    font-weight: 700;
    line-height: 1.3;
}

.kk-contact__agency {
    display: flex;
    align-items: baseline;
    gap: .375rem;
    margin: .125rem 0 0;
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
}

.kk-contact__quick {
    display: grid;
    gap: .5rem;
    margin-bottom: var(--kk-space-3);
}

.kk-contact__quick .btn {
    margin: 0;
}

.kk-contact__form {
    padding-top: var(--kk-space-3);
    border-top: 1px solid var(--kk-border);
}

.kk-contact__title {
    margin-bottom: var(--kk-space-3);
    font-size: var(--kk-text-18);
}

.kk-contact__form .form-group {
    margin-bottom: 1rem;
}

.kk-contact__form textarea.form-control {
    min-height: 6rem;
}

.kk-contact__privacy {
    margin: .75rem 0 0;
    font-size: var(--kk-text-12);
    color: var(--kk-text-muted);
    text-align: center;
}

.kk-contact__more {
    display: grid;
    gap: .5rem;
    margin-top: var(--kk-space-3);
    padding-top: var(--kk-space-3);
    border-top: 1px solid var(--kk-border);
}

.kk-contact__more .btn {
    margin: 0;
}

.kk-contact__preview {
    margin: 0;
    padding-top: var(--kk-space-3);
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
    border-top: 1px solid var(--kk-border);
}

/* Costs panel */
.kk-costs {
    padding: var(--kk-space-4);
}

.kk-costs__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: var(--kk-space-3);
    font-size: var(--kk-text-18);
}

.kk-costs__title .kk-icon {
    color: var(--kk-primary);
}

.kk-costs__result {
    margin-bottom: var(--kk-space-3);
}

.kk-costs__amount {
    display: block;
    font-family: var(--kk-font-heading);
    font-size: var(--kk-text-24);
    font-weight: 800;
    line-height: 1.2;
    color: var(--kk-gray-900);
}

.kk-costs__per {
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
}

.kk-costs .form-group {
    margin-bottom: .75rem;
}

.kk-costs label {
    font-size: var(--kk-text-12);
}

.kk-costs__lines {
    margin: 0;
}

.kk-costs__lines>div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    font-size: var(--kk-text-14);
    border-bottom: 1px dashed var(--kk-border);
}

.kk-costs__lines dt {
    font-weight: 400;
    color: var(--kk-text-muted);
}

.kk-costs__lines dd {
    margin: 0;
    font-weight: 600;
}

.kk-costs__lines>.kk-costs__total {
    font-size: var(--kk-text-16);
    border-bottom: 0;
}

.kk-costs__total dt {
    font-weight: 600;
    color: var(--kk-gray-900);
}

.kk-costs__total dd {
    color: var(--kk-primary);
}

.kk-costs__note {
    margin: .75rem 0 0;
    font-size: var(--kk-text-12);
    color: var(--kk-text-muted);
}

/* Dialog extras */
.kk-modal-subtitle {
    margin: .125rem 0 0;
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
}

.kk-modal-note {
    display: flex;
    gap: .5rem;
    margin: 0;
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
}

.kk-modal-note .kk-icon {
    margin-top: .2rem;
}

.kk-video .modal-content {
    overflow: hidden;
    background-color: #000;
}

.kk-video__close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 2;
    color: var(--kk-white);
    background-color: rgba(0, 0, 0, .5);
}

.kk-video__close:not(:disabled):not(.disabled):hover {
    color: var(--kk-white);
    background-color: rgba(0, 0, 0, .7);
}

.kk-video iframe {
    border: 0;
}

/* Similar properties: four across on desktop, a swipeable row on phones */
.kk-similar {
    display: grid;
    grid-auto-columns: minmax(16.5rem, 82%);
    grid-auto-flow: column;
    gap: var(--kk-space-4);
    margin: -.5rem;
    padding: .5rem .5rem 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.kk-similar>.kk-listing {
    scroll-snap-align: start;
}

@media (min-width: 768px) {
    .kk-similar {
        grid-auto-columns: calc((100% - 2 * var(--kk-space-4)) / 2.2);
    }
}

@media (min-width: 1200px) {
    .kk-similar {
        grid-auto-columns: calc((100% - 3 * var(--kk-space-4)) / 4);
        overflow: visible;
    }
}

/* Phone action bar */
.kk-actionbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1025;
    display: flex;
    gap: .5rem;
    padding: .625rem .75rem calc(.625rem + env(safe-area-inset-bottom));
    background-color: var(--kk-surface);
    box-shadow: 0 -1px 0 var(--kk-border), 0 -8px 24px rgba(16, 24, 40, .08);
}

.kk-actionbar .btn {
    flex: 1 1 0;
    padding-right: .5rem;
    padding-left: .5rem;
}

@media (max-width: 991.98px) {
    body:has(.kk-actionbar) {
        padding-bottom: 4.5rem;
    }
}

@media (min-width: 992px) {
    .kk-actionbar {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .kk-gallery__tile img,
    .kk-lightbox__thumb {
        transition: none;
    }

    .kk-gallery__tile:hover img {
        transform: none;
    }
}

/* Print: the facts, not the chrome */
@media print {

    .kk-topbar,
    .kk-header,
    .kk-footer,
    .kk-no-print,
    .kk-contact__form,
    .kk-contact__more,
    .kk-contact__quick,
    .kk-gallery__all,
    .kk-gallery__tile:not(.kk-gallery__tile--main),
    .kk-skip-link {
        display: none !important;
    }

    .kk-gallery__grid {
        display: block;
        height: auto;
    }

    .kk-gallery__tile--main {
        aspect-ratio: 16 / 9;
        max-height: 9cm;
    }

    .kk-detail__body {
        display: block;
    }

    .kk-readmore__content {
        max-height: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .kk-contact,
    .kk-costs {
        box-shadow: none;
        border: 1px solid #ccc;
        break-inside: avoid;
    }

    body:has(.kk-actionbar) {
        padding-bottom: 0;
    }
}


/* 22. Pricing & FAQ ======================================================== */

/* Monthly / yearly switch: real radios styled as a segmented control */
.kk-billing {
    display: flex;
    justify-content: center;
    gap: .25rem;
    width: max-content;
    max-width: 100%;
    margin: 0 auto var(--kk-space-5);
    padding: .3125rem;
    background-color: var(--kk-gray-100);
    border: 1px solid var(--kk-border);
    border-radius: var(--kk-radius-pill);
}

.kk-billing__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.kk-billing__option {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .5rem 1.25rem;
    font-size: var(--kk-text-14);
    font-weight: 600;
    color: var(--kk-gray-700);
    border-radius: var(--kk-radius-pill);
    cursor: pointer;
    transition: background-color var(--kk-duration) ease, color var(--kk-duration) ease;
}

.kk-billing__input:checked+.kk-billing__option {
    color: var(--kk-white);
    background-color: var(--kk-gray-900);
    box-shadow: var(--sh-1);
}

.kk-billing__input:focus-visible+.kk-billing__option {
    outline: 2px solid var(--kk-primary);
    outline-offset: 2px;
}

.kk-billing__save {
    padding: .125rem .5rem;
    font-size: var(--kk-text-12);
    color: #166534;
    background-color: rgba(21, 128, 61, .14);
    border-radius: var(--kk-radius-pill);
}

.kk-billing__input:checked+.kk-billing__option .kk-billing__save {
    color: var(--kk-gray-900);
    background-color: var(--kk-accent);
}

/* Plan cards */
.kk-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
    gap: var(--kk-space-4);
    align-items: stretch;
}

.kk-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--kk-space-4);
    container-type: inline-size;
    /* the price shrinks to stay on one line */
    background-color: var(--kk-surface);
    border-radius: var(--kk-radius-lg);
    box-shadow: var(--kk-hairline), var(--sh-2);
}

.kk-plan--popular {
    box-shadow: 0 0 0 2px var(--kk-primary), var(--sh-3);
}

@media (min-width: 1200px) {
    .kk-plan--popular {
        transform: translateY(-.5rem);
    }
}

.kk-plan__ribbon {
    position: absolute;
    top: 0;
    left: 50%;
    padding: .25rem .875rem;
    font-size: var(--kk-text-12);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kk-white);
    white-space: nowrap;
    background-color: var(--kk-primary);
    border-radius: var(--kk-radius-pill);
    transform: translate(-50%, -50%);
}

.kk-plan__name {
    margin-bottom: .25rem;
    font-size: var(--kk-text-20);
}

.kk-plan__tagline {
    min-height: 3em;
    margin-bottom: var(--kk-space-3);
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
}

.kk-plan__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .375rem;
    margin-bottom: .25rem;
}

.kk-plan__amount {
    font-family: var(--kk-font-heading);
    font-size: var(--kk-text-30);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.kk-plan__period {
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
}

@container (max-width: 17rem) {
    .kk-plan__amount {
        font-size: var(--kk-text-24);
    }
}

.kk-plan__note {
    min-height: 2.9em;
    margin-bottom: var(--kk-space-3);
    font-size: var(--kk-text-12);
    color: var(--kk-text-muted);
}

.kk-plan__desc {
    margin: var(--kk-space-3) 0 0;
    font-size: var(--kk-text-14);
    color: var(--kk-gray-700);
}

.kk-plan__limits,
.kk-plan__features {
    margin: 0;
    padding: 0;
    font-size: var(--kk-text-14);
    list-style: none;
}

.kk-plan__limits {
    margin-top: var(--kk-space-3);
    padding-top: var(--kk-space-3);
    border-top: 1px solid var(--kk-border);
}

.kk-plan__limits li,
.kk-plan__features li {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .3125rem 0;
}

.kk-plan__limits .kk-icon {
    color: var(--kk-gray-500);
}

.kk-plan__features {
    margin-top: .5rem;
}

.kk-plan__features .kk-icon {
    color: var(--kk-success);
}

.kk-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 2rem;
    margin: var(--kk-space-5) 0 0;
    padding: var(--kk-space-4) 0 0;
    font-size: var(--kk-text-14);
    font-weight: 500;
    color: var(--kk-gray-700);
    list-style: none;
    border-top: 1px solid var(--kk-border);
}

.kk-trust li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.kk-trust .kk-icon {
    color: var(--kk-primary);
}

/* Comparison table: first column stays put while the plans scroll on phones */
.kk-compare th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 11rem;
    font-weight: 500;
    background-color: var(--kk-surface);
}

.kk-compare thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
}

.kk-compare thead th {
    font-size: var(--kk-text-14);
    letter-spacing: 0;
    text-transform: none;
    color: var(--kk-gray-900);
}

.kk-compare__price {
    display: block;
    margin-top: .125rem;
    font-size: var(--kk-text-12);
    font-weight: 500;
    color: var(--kk-text-muted);
}

.kk-compare td {
    min-width: 8rem;
}

.kk-compare__group th {
    padding-top: 1.25rem;
    font-size: var(--kk-text-12);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kk-gray-600);
    background-color: var(--kk-gray-100);
}

.kk-compare__yes {
    color: var(--kk-success);
}

.kk-compare__no {
    color: var(--kk-gray-400);
}

/* FAQ accordion */
.kk-faq-wrap {
    max-width: 48rem;
}

.kk-faq {
    border-top: 1px solid var(--kk-border);
}

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

.kk-faq__q {
    margin: 0;
    font-family: var(--kk-font-body);
    font-size: var(--kk-text-18);
}

.kk-faq__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1.125rem 0;
    font-weight: 600;
    color: var(--kk-gray-900);
    text-align: left;
    background: none;
    border: 0;
}

.kk-faq__toggle:hover {
    color: var(--kk-primary);
}

.kk-faq__toggle .kk-icon {
    flex-shrink: 0;
    color: var(--kk-gray-500);
    transition: transform var(--kk-duration) ease;
}

.kk-faq__toggle[aria-expanded="true"] .kk-icon {
    transform: rotate(180deg);
}

.kk-faq__a {
    margin: 0;
    padding: 0 0 1.25rem;
    color: var(--kk-gray-700);
}

@media (prefers-reduced-motion: reduce) {

    .kk-billing__option,
    .kk-faq__toggle .kk-icon {
        transition: none;
    }
}


/* 23. Contact page ========================================================= */

.kk-contact-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kk-space-4);
    align-items: start;
}

@media (min-width: 992px) {
    .kk-contact-page {
        grid-template-columns: minmax(0, 1fr) 22rem;
        gap: var(--kk-space-5);
    }
}

.kk-contact-page__form {
    padding: var(--kk-space-4);
    box-shadow: var(--kk-hairline), var(--sh-2);
}

@media (min-width: 768px) {
    .kk-contact-page__form {
        padding: var(--kk-space-5);
    }
}

.kk-contact-page__title {
    margin-bottom: .25rem;
    font-size: var(--kk-text-24);
}

.kk-contact-page__intro {
    margin-bottom: var(--kk-space-4);
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
}

.kk-contact-page__actions {
    margin-top: var(--kk-space-4);
}

.kk-contact-page__aside {
    display: grid;
    gap: var(--kk-space-3);
}

.kk-office {
    padding: var(--kk-space-4);
}

.kk-office--muted {
    background-color: var(--kk-surface-muted);
    box-shadow: none;
}

.kk-office__title {
    margin-bottom: var(--kk-space-3);
    font-size: var(--kk-text-18);
}

.kk-office__text {
    margin-bottom: .5rem;
    font-size: var(--kk-text-14);
    color: var(--kk-gray-700);
}

/* Cards are flex columns: keep a lone link-button its own width, left-aligned */
.kk-office>.btn-link {
    align-self: flex-start;
}

.kk-office__list {
    display: grid;
    gap: var(--kk-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-office__list li {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
}

.kk-office__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    color: var(--kk-primary-active);
    background-color: var(--kk-primary-soft);
    border-radius: var(--kk-radius);
}

.kk-office__label {
    display: block;
    font-size: var(--kk-text-12);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kk-gray-600);
}

.kk-office__list a {
    font-weight: 600;
    word-break: break-word;
}

.kk-office__hours {
    margin: var(--kk-space-3) 0 0;
    padding-top: var(--kk-space-3);
    font-size: var(--kk-text-14);
    border-top: 1px solid var(--kk-border);
}

.kk-office__hours>div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .25rem 0;
}

.kk-office__hours dt {
    font-weight: 400;
    color: var(--kk-text-muted);
}

.kk-office__hours dd {
    margin: 0;
    font-weight: 600;
}

.kk-office__social {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: var(--kk-space-3) 0 0;
    padding: 0;
    list-style: none;
}

.kk-office__links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-office__links li+li {
    margin-top: .5rem;
}

.kk-office__links a {
    font-weight: 600;
}

.kk-contact-map__canvas {
    height: 24rem;
    background-color: var(--kk-gray-200);
}


/* 24. Shopper sign-in & account ============================================ */

/* Split screen: photo + pitch on the left from lg, form on the right */
.kk-auth {
    /* Photo tint and pitch-icon colour, so a themed portal can swap them. */
    --kk-portal-tint-top: rgba(7, 42, 69, .25);
    --kk-portal-tint-bottom: rgba(7, 42, 69, .9);
    --kk-portal-point: var(--kk-accent);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: calc(100vh - var(--kk-header-h, 5rem));
    background-color: var(--kk-surface-muted);
}

@media (min-width: 992px) {
    .kk-auth {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    }
}

.kk-auth__media {
    position: relative;
    display: none;
    overflow: hidden;
    isolation: isolate;
}

@media (min-width: 992px) {
    .kk-auth__media {
        display: flex;
        align-items: flex-end;
    }
}

.kk-auth__media img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kk-auth__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, var(--kk-portal-tint-top) 0%, var(--kk-portal-tint-bottom) 75%);
}

.kk-auth__pitch {
    padding: var(--kk-space-6) var(--kk-space-5);
    color: rgba(255, 255, 255, .9);
}

.kk-auth__pitch-title {
    margin-bottom: var(--kk-space-3);
    font-family: var(--kk-font-heading);
    font-size: var(--kk-text-30);
    font-weight: 800;
    line-height: 1.2;
    color: var(--kk-white);
}

.kk-auth__points {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-auth__points li {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    font-size: var(--kk-text-18);
}

.kk-auth__points .kk-icon {
    color: var(--kk-portal-point);
}

.kk-auth__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--kk-space-5) 12px;
}

@media (min-width: 576px) {
    .kk-auth__panel {
        padding: var(--kk-space-6) var(--kk-space-4);
    }
}

.kk-auth__card {
    width: 100%;
    max-width: 28rem;
    padding: var(--kk-space-4);
    background-color: var(--kk-surface);
    border-radius: var(--kk-radius-lg);
    box-shadow: var(--kk-hairline), var(--sh-2);
}

@media (min-width: 576px) {
    .kk-auth__card {
        padding: var(--kk-space-5);
    }
}

.kk-auth__title {
    margin-bottom: .5rem;
    font-size: var(--kk-text-30);
}

.kk-auth__subtitle {
    margin-bottom: var(--kk-space-4);
    color: var(--kk-text-muted);
}

.kk-auth__help {
    margin: var(--kk-space-3) 0 0;
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
    text-align: center;
}

.kk-auth__footer {
    margin-top: var(--kk-space-4);
    padding-top: var(--kk-space-4);
    font-size: var(--kk-text-14);
    text-align: center;
    border-top: 1px solid var(--kk-border);
}

.kk-auth__footer p {
    margin-bottom: .5rem;
}

.kk-auth__footer p:last-child {
    margin-bottom: 0;
}

.kk-auth__footer a {
    font-weight: 600;
}

.kk-auth__other {
    color: var(--kk-text-muted);
}

/* Show / hide password (button added by kazikings.js) */
.kk-password {
    position: relative;
}

.kk-password>.form-control {
    padding-right: 4.5rem;
}

.kk-password__toggle {
    position: absolute;
    top: 50%;
    right: .375rem;
    padding: .375rem .625rem;
    font-size: var(--kk-text-14);
    font-weight: 600;
    color: var(--kk-primary);
    background: none;
    border: 0;
    border-radius: var(--kk-radius-sm);
    transform: translateY(-50%);
}

.kk-password__toggle:hover {
    background-color: var(--kk-primary-soft);
}

/* Account header + tabs */
.kk-account-head {
    padding-top: var(--kk-space-4);
    background-color: var(--kk-surface-muted);
    border-bottom: 1px solid var(--kk-border);
}

.kk-account-head .breadcrumb {
    margin-bottom: var(--kk-space-3);
}

.kk-account-head__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kk-space-3);
    margin-bottom: var(--kk-space-4);
}

.kk-account-head__who {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.kk-account-head__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    font-family: var(--kk-font-heading);
    font-size: var(--kk-text-20);
    font-weight: 800;
    color: var(--kk-white);
    background-color: var(--kk-primary);
    border-radius: 50%;
}

.kk-account-head__title {
    margin: 0;
    font-size: clamp(var(--kk-text-24), 1.2rem + 1vw, var(--kk-text-30));
}

.kk-account-head__meta {
    margin: 0;
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
    word-break: break-word;
}

.kk-account-tabs {
    display: flex;
    gap: .25rem;
    margin-bottom: -1px;
    overflow-x: auto;
}

.kk-account-tabs__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    font-weight: 600;
    color: var(--kk-gray-700);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.kk-account-tabs__link:hover {
    color: var(--kk-gray-900);
    text-decoration: none;
}

.kk-account-tabs__link.active {
    color: var(--kk-primary);
    border-bottom-color: var(--kk-primary);
}

.kk-account-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: var(--kk-space-3);
}

.kk-account-bar__count {
    margin: 0;
    color: var(--kk-gray-700);
}

.kk-account-bar__count strong {
    font-size: var(--kk-text-18);
    color: var(--kk-gray-900);
}

.kk-account-note {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin: var(--kk-space-4) 0 0;
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
}

/* Inquiries & viewings */
.kk-account-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kk-space-5);
}

@media (min-width: 992px) {
    .kk-account-cols {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
}

.kk-account-section-title {
    margin-bottom: var(--kk-space-3);
    font-size: var(--kk-text-20);
}

.kk-account-section-title .kk-num {
    color: var(--kk-text-muted);
    font-weight: 600;
}

.kk-activity {
    flex-direction: row;
    gap: 1rem;
    margin-bottom: var(--kk-space-3);
    padding: 1rem;
}

.kk-activity__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7rem;
    height: 5.25rem;
    flex-shrink: 0;
    overflow: hidden;
    color: var(--kk-gray-400);
    background-color: var(--kk-gray-200);
    border-radius: var(--kk-radius);
}

.kk-activity__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kk-activity__body {
    flex: 1 1 auto;
    min-width: 0;
}

.kk-activity__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.kk-activity__title {
    margin: 0 0 .25rem;
    font-family: var(--kk-font-body);
    font-size: var(--kk-text-16);
    font-weight: 600;
    letter-spacing: 0;
}

.kk-activity__title a {
    color: var(--kk-gray-900);
}

.kk-activity__title a:hover {
    color: var(--kk-primary);
}

.kk-activity__meta {
    margin-bottom: .5rem;
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
}

.kk-activity__text {
    margin: 0;
    font-size: var(--kk-text-14);
    color: var(--kk-gray-700);
}

.kk-activity__note {
    margin: .75rem 0 0;
    padding: .625rem .75rem;
    font-size: var(--kk-text-14);
    background-color: var(--kk-gray-100);
    border-radius: var(--kk-radius);
}

@media (max-width: 575.98px) {
    .kk-activity__thumb {
        width: 4.5rem;
        height: 3.5rem;
    }
}

.kk-viewing {
    flex-direction: row;
    gap: 1rem;
    margin-bottom: var(--kk-space-3);
    padding: 1rem;
}

.kk-viewing__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    height: 3.75rem;
    flex-shrink: 0;
    line-height: 1;
    background-color: var(--kk-primary-soft);
    border-radius: var(--kk-radius);
}

.kk-viewing__month {
    font-size: var(--kk-text-12);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kk-primary-active);
}

.kk-viewing__day {
    font-family: var(--kk-font-heading);
    font-size: var(--kk-text-24);
    font-weight: 800;
    color: var(--kk-gray-900);
}


/* 25. User guide =========================================================== */

/* Quick start: four numbered, linked steps on a muted band */
.kk-guide-start {
    background-color: var(--kk-surface-muted);
    border-bottom: 1px solid var(--kk-border);
}

.kk-guide-start__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kk-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 576px) {
    .kk-guide-start__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .kk-guide-start__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.kk-guide-start__link {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    height: 100%;
    padding: var(--kk-space-4);
    color: var(--kk-gray-700);
    background-color: var(--kk-surface);
    border: 1px solid var(--kk-border);
    border-radius: var(--kk-radius-lg);
    box-shadow: var(--sh-1);
    transition: border-color var(--kk-duration) ease, box-shadow var(--kk-duration) ease;
}

.kk-guide-start__link:hover,
.kk-guide-start__link:focus {
    color: var(--kk-gray-700);
    text-decoration: none;
    border-color: rgba(var(--kk-primary-rgb), .45);
    box-shadow: var(--sh-2);
}

.kk-guide-start__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: .25rem;
    font-weight: 700;
    color: var(--kk-white);
    background-color: var(--kk-primary);
    border-radius: 50%;
}

.kk-guide-start__title {
    font-family: var(--kk-font-heading);
    font-size: var(--kk-text-18);
    font-weight: 700;
    line-height: 1.3;
    color: var(--kk-gray-900);
}

.kk-guide-start__link:hover .kk-guide-start__title {
    color: var(--kk-primary);
}

.kk-guide-start__text {
    font-size: var(--kk-text-14);
}

/* Layout: contents list beside a readable column of text */
.kk-guide-wrap {
    padding-top: var(--kk-space-5);
    padding-bottom: var(--kk-space-6);
}

.kk-guide {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kk-space-5);
}

@media (min-width: 992px) {
    .kk-guide {
        grid-template-columns: 15rem minmax(0, 1fr);
        gap: var(--kk-space-6);
        align-items: start;
    }
}

.kk-guide__body {
    max-width: 46rem;
}

/* Contents: folded card on phones and tablets, sticky list from lg */
.kk-guide__nav {
    background-color: var(--kk-surface-muted);
    border: 1px solid var(--kk-border);
    border-radius: var(--kk-radius-lg);
}

.kk-guide__nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: var(--kk-control-h);
    padding: .75rem 1rem;
    font-weight: 600;
    color: var(--kk-gray-900);
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--kk-radius-lg);
}

.kk-guide__nav-toggle span {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
}

.kk-guide__nav-toggle .kk-icon {
    color: var(--kk-primary);
}

.kk-guide__nav-toggle>.kk-icon {
    color: var(--kk-gray-500);
    transition: transform var(--kk-duration) ease;
}

.kk-guide__nav-toggle[aria-expanded="true"]>.kk-icon {
    transform: rotate(180deg);
}

.kk-guide__nav-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .125rem;
    margin: 0;
    padding: 0 .5rem .75rem;
    list-style: none;
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .kk-guide__nav-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: .5rem;
    }
}

.kk-guide__nav-link {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .75rem;
    font-size: var(--kk-text-14);
    font-weight: 500;
    line-height: 1.35;
    color: var(--kk-gray-700);
    border-radius: var(--kk-radius);
}

.kk-guide__nav-link .kk-icon {
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
    color: var(--kk-gray-500);
}

.kk-guide__nav-link:hover,
.kk-guide__nav-link[aria-current="true"] {
    color: var(--kk-primary);
    text-decoration: none;
    background-color: var(--kk-primary-soft);
}

.kk-guide__nav-link[aria-current="true"] {
    font-weight: 700;
}

.kk-guide__nav-link:hover .kk-icon,
.kk-guide__nav-link[aria-current="true"] .kk-icon {
    color: var(--kk-primary);
}

.kk-guide__nav-title {
    margin: 0 0 .5rem;
    padding: 0 .75rem;
    font-size: var(--kk-text-12);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kk-gray-600);
}

@media (min-width: 992px) {
    .kk-guide__nav {
        position: sticky;
        top: calc(var(--kk-header-h, 4rem) + 1.5rem);
        max-height: calc(100vh - var(--kk-header-h, 4rem) - 3rem);
        overflow-y: auto;
        background: none;
        border: 0;
        border-radius: 0;
    }

    /* Always open beside the guide, whatever the toggle last did */
    .kk-guide__nav-collapse.collapse {
        display: block;
    }

    .kk-guide__nav-list {
        padding: 0;
    }
}

/* Sections */
.kk-guide__section {
    padding-bottom: var(--kk-space-5);
    margin-bottom: var(--kk-space-5);
    border-bottom: 1px solid var(--kk-border);
}

.kk-guide__section:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.kk-guide__body p,
.kk-guide__list {
    color: var(--kk-gray-700);
}

.kk-guide__body strong {
    color: var(--kk-gray-900);
}

/* Links inside running text (steps and lists as well as paragraphs) are
   underlined, so they don't rely on colour alone */
.kk-guide__body a:not([class]) {
    text-decoration: underline;
    text-underline-offset: .15em;
}

.kk-guide__title {
    display: flex;
    align-items: center;
    gap: .875rem;
    margin-bottom: var(--kk-space-3);
    font-size: clamp(var(--kk-text-24), 1.2rem + 1vw, var(--kk-text-30));
}

.kk-guide__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.125rem;
    color: var(--kk-primary);
    background-color: var(--kk-primary-soft);
    border-radius: var(--kk-radius);
}

.kk-guide__subtitle {
    margin: var(--kk-space-4) 0 .75rem;
    font-size: var(--kk-text-20);
}

.kk-guide__list {
    margin-bottom: var(--kk-space-3);
    padding-left: 1.25rem;
}

.kk-guide__list li+li {
    margin-top: .5rem;
}

.kk-guide__list li::marker {
    color: var(--kk-primary);
}

/* Numbered steps joined by a thin line */
.kk-steps {
    margin: 0 0 var(--kk-space-3);
    padding: 0;
    list-style: none;
    counter-reset: kk-step;
}

.kk-steps>li {
    position: relative;
    padding: 0 0 1.25rem 3rem;
    color: var(--kk-gray-700);
    counter-increment: kk-step;
}

.kk-steps>li:last-child {
    padding-bottom: 0;
}

.kk-steps>li::before {
    content: counter(kk-step);
    position: absolute;
    top: -.125rem;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: var(--kk-text-14);
    font-weight: 700;
    color: var(--kk-primary);
    background-color: var(--kk-surface);
    border: 2px solid var(--kk-primary);
    border-radius: 50%;
}

.kk-steps>li::after {
    content: "";
    position: absolute;
    top: 2.125rem;
    bottom: .25rem;
    left: calc(1rem - 1px);
    width: 2px;
    background-color: var(--kk-gray-200);
}

.kk-steps>li:last-child::after {
    display: none;
}

/* The step's lead sentence sits on its own line; bold words later in the
   step stay inline */
.kk-steps>li>strong:first-child {
    display: block;
    margin-bottom: .125rem;
}

/* Tip / notice */
.kk-guide-note {
    display: flex;
    gap: .75rem;
    margin: var(--kk-space-3) 0;
    padding: 1rem 1.25rem;
    background-color: rgba(var(--kk-primary-rgb), .05);
    border-left: 3px solid var(--kk-primary);
    border-radius: 0 var(--kk-radius) var(--kk-radius) 0;
}

.kk-guide-note>.kk-icon {
    flex-shrink: 0;
    margin-top: .3rem;
    color: var(--kk-primary);
}

.kk-guide__body .kk-guide-note p {
    margin: 0;
    color: var(--kk-gray-800);
}

/* Tables */
.kk-guide__table {
    margin-bottom: var(--kk-space-3);
}

.kk-guide__table tbody th,
.kk-guide__table tbody td {
    vertical-align: top;
}

.kk-guide__table tbody th {
    font-weight: 600;
    color: var(--kk-gray-900);
}

@media (max-width: 575.98px) {

    .kk-guide__table th,
    .kk-guide__table td {
        padding: .75rem;
    }
}

/* Status meanings: pill, then what it means */
.kk-guide__states {
    display: grid;
    gap: .5rem;
    margin: 0 0 var(--kk-space-3);
}

.kk-guide__states>div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .375rem;
    padding: .75rem 1rem;
    background-color: var(--kk-surface-muted);
    border-radius: var(--kk-radius);
}

@media (min-width: 576px) {
    .kk-guide__states>div {
        grid-template-columns: 10rem minmax(0, 1fr);
        align-items: center;
        gap: 1rem;
    }
}

.kk-guide__states dt {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin: 0;
    font-weight: inherit;
}

.kk-guide__states dd {
    margin: 0;
    color: var(--kk-gray-700);
}

/* "Still stuck?" box under the troubleshooting answers */
.kk-guide-help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: var(--kk-space-4);
    padding: var(--kk-space-4);
    background-color: var(--kk-surface-muted);
    border: 1px solid var(--kk-border);
    border-radius: var(--kk-radius-lg);
}

.kk-guide-help__title {
    margin-bottom: .25rem;
    font-size: var(--kk-text-20);
}

.kk-guide__body .kk-guide-help__text {
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {

    .kk-guide-start__link,
    .kk-guide__nav-toggle>.kk-icon {
        transition: none;
    }
}


/* 26. Portal sign-in (layouts.auth) ======================================== */

/* Shell: slim brand bar, the page, a small footer - no marketplace menu */
.kk-auth-body {
    --kk-header-h: 4.5rem;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--kk-surface-muted);
}

.kk-auth-body>main {
    display: flex;
    /* Shrinkable, so the fixed-height shell never pushes the body taller than
       the viewport: a form that does not fit scrolls inside main instead
       (main carries Bootstrap's `overflow-auto`), keeping its own top edge -
       and the footer - where they are. */
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.kk-auth-body .kk-auth {
    flex: 1 0 auto;
    min-height: 0;
}

.kk-auth-bar {
    background-color: var(--kk-surface);
    border-bottom: 1px solid var(--kk-border);
}

.kk-auth-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: var(--kk-header-h);
    padding: 0 16px;
}

@media (min-width: 992px) {
    .kk-auth-bar__inner {
        padding: 0 var(--kk-space-5);
    }
}

.kk-auth-bar__brand {
    display: inline-flex;
    flex-shrink: 1;
    min-width: 0;
}

.kk-auth-bar__brand img {
    width: auto;
    max-width: 100%;
    height: 2.5rem;
    object-fit: contain;
    object-position: left center;
}

.kk-auth-bar__back {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: .5rem;
    font-size: var(--kk-text-14);
    font-weight: 600;
    color: var(--kk-gray-700);
}

.kk-auth-bar__back:hover {
    color: var(--kk-primary);
}

.kk-auth-bar__tag {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: .5rem;
    padding: .375rem .75rem;
    font-size: var(--kk-text-12);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kk-white);
    background-color: rgba(255, 255, 255, .12);
    border-radius: var(--kk-radius-pill);
}

.kk-auth-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .25rem 1.5rem;
    padding: var(--kk-space-3) 16px;
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
    border-top: 1px solid var(--kk-border);
}

.kk-auth-foot p {
    display: flex;
    gap: .5rem;
    margin: 0;
}

.kk-auth-foot a {
    color: var(--kk-gray-700);
}

/* Card extras */
.kk-auth__card--wide {
    max-width: 40rem;
}

.kk-auth__eyebrow {
    margin-bottom: .5rem;
    font-size: var(--kk-text-12);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kk-primary);
}

.kk-auth__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin: .25rem 0 var(--kk-space-4);
    font-size: var(--kk-text-14);
}

.kk-auth__row .custom-control {
    margin-bottom: 0 !important;
}

.kk-auth__fieldset {
    min-width: 0;
    margin: 0 0 var(--kk-space-3);
    padding: 0;
    border: 0;
}

.kk-auth__fieldset legend {
    width: 100%;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    font-family: var(--kk-font-heading);
    font-size: var(--kk-text-18);
    font-weight: 700;
    color: var(--kk-gray-900);
    border-bottom: 1px solid var(--kk-border);
}

/* "My username is also used in another workspace" */
.kk-disclosure {
    margin: -.25rem 0 1rem;
}

.kk-disclosure>summary {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--kk-text-14);
    font-weight: 600;
    color: var(--kk-primary);
    cursor: pointer;
    list-style: none;
}

.kk-disclosure>summary::-webkit-details-marker {
    display: none;
}

.kk-disclosure>summary::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--kk-duration) ease;
}

.kk-disclosure[open]>summary::before {
    transform: rotate(45deg);
}

.kk-disclosure>summary:hover {
    text-decoration: underline;
}

.kk-disclosure>.form-group {
    margin-top: .75rem;
}

/* Who signs in here (landlord / tenant), on the photo panel */
.kk-auth__portals {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-auth__portals li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    background-color: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--kk-radius-lg);
}

.kk-auth__portals .kk-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
    color: var(--kk-navy-deep);
    background-color: var(--kk-accent);
    border-radius: 50%;
}

.kk-auth__portals strong {
    display: block;
    margin-bottom: .125rem;
    font-size: var(--kk-text-18);
    color: var(--kk-white);
}

.kk-auth__portals span {
    color: rgba(255, 255, 255, .85);
}

.kk-auth__pitch-note {
    margin: var(--kk-space-3) 0 0;
    color: rgba(255, 255, 255, .88);
}

.kk-auth__pitch-note a {
    font-weight: 600;
    color: var(--kk-white);
    text-decoration: underline;
}

/* Sign-in check: the sum and its answer */
.kk-auth__sum {
    margin-bottom: var(--kk-space-3);
    padding: 1.25rem;
    font-family: var(--kk-font-heading);
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .02em;
    text-align: center;
    color: var(--kk-gray-900);
    background-color: var(--kk-primary-soft);
    border-radius: var(--kk-radius-lg);
}

.kk-auth__answer {
    height: var(--kk-control-h-lg);
    font-size: var(--kk-text-24);
    font-weight: 700;
    text-align: center;
}

/* Platform admin console: dark shell, centred card, no photo */
.kk-auth-body--platform {
    background-color: var(--kk-navy-deep);
}

.kk-auth-body--platform .kk-auth-bar {
    background-color: var(--kk-navy);
    border-bottom-color: rgba(255, 255, 255, .08);
}

.kk-auth-body--platform .kk-auth-foot {
    color: rgba(255, 255, 255, .7);
    border-top-color: rgba(255, 255, 255, .08);
}

.kk-auth-solo {
    display: flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    padding: var(--kk-space-5) 16px;
}

.kk-auth-solo .kk-auth__card {
    max-width: 26rem;
}

/* One page per portal, one colour per portal ------------------------------
   Landlord, tenant and shopper each sign in on their own page, so each page
   carries its own colour and photo as well as its own words. A theme block
   re-maps the primary and focus tokens, so every button, link, chip and
   focus ring inside the section follows it without a per-portal rule
   anywhere else. The body class repeats the palette for the slim top bar,
   which sits outside the section. Platform admin keeps the dark shell above.

   Landlord stays the brand blue; the tenant portal is teal, so the two
   pages behind /landlord/login and /tenant/login can never be confused; a
   shopper account is amber. The /login chooser carries the same two
   palettes, so the way in matches the page it leads to. */
.kk-auth--landlord,
.kk-auth-body--landlord,
.kk-portal-choice--landlord {
    --kk-primary: #1870b8;
    --kk-primary-hover: #135a94;
    --kk-primary-active: #114f82;
    --kk-primary-soft: rgba(24, 112, 184, .1);
    --kk-focus-ring: 0 0 0 3px rgba(24, 112, 184, .12);
    --kk-portal-tint-top: rgba(7, 42, 69, .3);
    --kk-portal-tint-bottom: rgba(7, 42, 69, .92);
    --kk-portal-point: var(--kk-accent);
}

.kk-auth--tenant,
.kk-auth-body--tenant,
.kk-portal-choice--tenant {
    --kk-primary: #0f766e;
    --kk-primary-hover: #0b5f59;
    --kk-primary-active: #0a4f4a;
    --kk-primary-soft: rgba(15, 118, 110, .1);
    --kk-focus-ring: 0 0 0 3px rgba(15, 118, 110, .14);
    --kk-portal-tint-top: rgba(4, 47, 46, .35);
    --kk-portal-tint-bottom: rgba(4, 47, 46, .92);
    --kk-portal-point: #5eead4;
}

.kk-auth--shopper {
    --kk-primary: #b45309;
    --kk-primary-hover: #92400e;
    --kk-primary-active: #78350f;
    --kk-primary-soft: rgba(180, 83, 9, .1);
    --kk-focus-ring: 0 0 0 3px rgba(180, 83, 9, .14);
    --kk-portal-tint-top: rgba(69, 26, 3, .3);
    --kk-portal-tint-bottom: rgba(69, 26, 3, .9);
    --kk-portal-point: #fcd34d;
}

/* The portal's name over the photo, so the page names itself before the
   form is read. The portal's own colour as the background, not a translucent
   white: photos are unpredictable and white-on-white left it unreadable. */
.kk-auth__tag {
    position: absolute;
    top: var(--kk-space-3);
    left: var(--kk-space-3);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .5rem .875rem;
    font-size: var(--kk-text-12);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kk-white);
    background-color: var(--kk-primary);
    border-radius: var(--kk-radius-pill);
    box-shadow: var(--sh-2);
}

/* The same name again on the card, this time in the portal's colour. */
.kk-auth__eyebrow--portal {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: var(--kk-space-3);
    padding: .375rem .75rem;
    color: var(--kk-primary);
    background-color: var(--kk-primary-soft);
    border-radius: var(--kk-radius-pill);
}

/* Colour bar along the top of the card, matching the portal. */
.kk-auth__card--portal {
    border-top: 4px solid var(--kk-primary);
}

/* The portal's name in the slim top bar, in the portal's colour. Hidden on
   phones, where the bar only has room for the logo and the way back. */
.kk-auth-bar__aside {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: .5rem 1rem;
}

.kk-auth-bar__portal {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: .5rem;
    padding: .375rem .75rem;
    font-size: var(--kk-text-12);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kk-primary);
    background-color: var(--kk-primary-soft);
    border-radius: var(--kk-radius-pill);
}

@media (max-width: 575.98px) {
    .kk-auth-bar__portal {
        display: none;
    }
}

.kk-auth-body--landlord .kk-auth-bar,
.kk-auth-body--tenant .kk-auth-bar {
    border-bottom-color: var(--kk-primary);
}

@media (prefers-reduced-motion: reduce) {
    .kk-disclosure>summary::before {
        transition: none;
    }
}


/* 27. Landlord portal shell (layouts.dashboard) ============================ */

.kk-portal {
    --kk-sidebar-w: 16.5rem;
    --kk-header-h: 4rem;
    background-color: var(--kk-surface-muted);
}

/* Sidebar: always shown from lg, a slide-out menu below it */
.kk-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    width: var(--kk-sidebar-w);
    max-width: 85vw;
    color: rgba(255, 255, 255, .8);
    background-color: var(--kk-navy-deep);
    transform: translateX(-100%);
    transition: transform .2s var(--kk-ease);
    visibility: hidden;
}

.kk-sidebar-open .kk-sidebar {
    transform: none;
    visibility: visible;
    box-shadow: var(--sh-3);
}

.kk-sidebar-open {
    overflow: hidden;
}

.kk-portal__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background-color: rgba(7, 42, 69, .55);
}

@media (min-width: 992px) {
    .kk-sidebar {
        transform: none;
        visibility: visible;
    }

    .kk-portal__backdrop {
        display: none;
    }

    .kk-sidebar-open {
        overflow: visible;
    }
}

.kk-sidebar__head {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    height: var(--kk-header-h);
    padding: 0 1rem 0 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.kk-sidebar__brand {
    display: inline-flex;
    min-width: 0;
}

.kk-sidebar__brand img {
    width: auto;
    max-width: 100%;
    height: 2.25rem;
    object-fit: contain;
    object-position: left center;
}

.kk-sidebar__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--kk-white);
    background: none;
    border: 0;
    border-radius: var(--kk-radius);
}

.kk-sidebar__close:hover {
    background-color: rgba(255, 255, 255, .1);
}

@media (min-width: 992px) {
    .kk-sidebar__close {
        display: none;
    }
}

.kk-sidebar__account {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem .5rem;
}

.kk-sidebar__account-label {
    font-size: var(--kk-text-12);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kk-accent);
}

.kk-sidebar__account-name {
    overflow: hidden;
    font-weight: 600;
    color: var(--kk-white);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kk-sidebar__nav {
    flex: 1 1 auto;
    padding: .5rem .75rem 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.kk-sidebar__group {
    margin: 1rem .5rem .375rem;
    font-size: var(--kk-text-12);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

.kk-sidebar__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-sidebar__link {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .5rem .75rem;
    font-size: var(--kk-text-14);
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, .82);
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--kk-radius);
}

.kk-sidebar__link .kk-icon {
    flex-shrink: 0;
    width: 1.125rem;
    text-align: center;
    color: rgba(255, 255, 255, .6);
}

.kk-sidebar__link:hover,
.kk-sidebar__link:focus {
    color: var(--kk-white);
    text-decoration: none;
    background-color: rgba(255, 255, 255, .08);
}

.kk-sidebar__link.is-active {
    font-weight: 700;
    color: var(--kk-white);
    background-color: rgba(255, 255, 255, .12);
    box-shadow: inset 3px 0 0 var(--kk-accent);
}

.kk-sidebar__link.is-active .kk-icon,
.kk-sidebar__link:hover .kk-icon {
    color: var(--kk-accent);
}

.kk-sidebar__link:focus-visible {
    outline: 2px solid var(--kk-accent);
    outline-offset: -2px;
}

.kk-sidebar__text {
    flex: 1 1 auto;
    min-width: 0;
}

.kk-sidebar__badge {
    flex-shrink: 0;
    min-width: 1.5rem;
    padding: .0625rem .4375rem;
    font-size: var(--kk-text-12);
    font-weight: 700;
    line-height: 1.5;
    color: var(--kk-navy-deep);
    text-align: center;
    background-color: var(--kk-accent);
    border-radius: var(--kk-radius-pill);
}

.kk-sidebar__foot {
    flex-shrink: 0;
    padding: .75rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.kk-sidebar__foot form {
    margin: 0;
}

/* Main column */
.kk-portal__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
}

@media (min-width: 992px) {
    .kk-portal__main {
        margin-left: var(--kk-sidebar-w);
    }
}

.kk-portal-bar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: .75rem;
    height: var(--kk-header-h);
    padding: 0 16px;
    background-color: var(--kk-surface);
    border-bottom: 1px solid var(--kk-border);
}

@media (min-width: 992px) {
    .kk-portal-bar {
        padding: 0 var(--kk-space-5);
    }
}

.kk-portal-bar__menu {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-left: -.5rem;
    font-size: 1.125rem;
    color: var(--kk-gray-800);
    background: none;
    border: 0;
    border-radius: var(--kk-radius);
}

.kk-portal-bar__menu:hover {
    background-color: var(--kk-gray-100);
}

@media (min-width: 992px) {
    .kk-portal-bar__menu {
        display: none;
    }
}

.kk-portal-bar__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: var(--kk-text-20);
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .kk-portal-bar__title {
        font-size: var(--kk-text-24);
    }
}

.kk-portal-bar__actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: .25rem;
}

.kk-portal-bar__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.125rem;
    color: var(--kk-gray-700);
    border-radius: 50%;
}

.kk-portal-bar__icon:hover {
    color: var(--kk-primary);
    background-color: var(--kk-gray-100);
}

.kk-portal-bar__dot {
    position: absolute;
    top: .25rem;
    right: .125rem;
    min-width: 1.25rem;
    padding: 0 .3125rem;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.25rem;
    color: var(--kk-white);
    text-align: center;
    background-color: var(--kk-danger);
    border: 2px solid var(--kk-surface);
    border-radius: var(--kk-radius-pill);
}

.kk-portal-user {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    padding: .25rem .5rem .25rem .25rem;
    color: var(--kk-gray-800);
    background: none;
    border: 0;
    border-radius: var(--kk-radius-pill);
}

.kk-portal-user:hover,
.kk-portal-user[aria-expanded="true"] {
    background-color: var(--kk-gray-100);
}

.kk-portal-user>.kk-icon {
    font-size: .75rem;
    color: var(--kk-gray-500);
}

.kk-portal-user__avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: var(--kk-text-14);
    font-weight: 700;
    color: var(--kk-primary);
    object-fit: cover;
    background-color: var(--kk-primary-soft);
    border-radius: 50%;
}

.kk-portal-user__who {
    display: none;
    flex-direction: column;
    line-height: 1.25;
    text-align: left;
}

@media (min-width: 768px) {
    .kk-portal-user__who {
        display: flex;
    }
}

.kk-portal-user__name {
    font-size: var(--kk-text-14);
    font-weight: 600;
}

.kk-portal-user__role {
    font-size: var(--kk-text-12);
    color: var(--kk-text-muted);
}

.kk-portal-user__menu {
    min-width: 15rem;
}

.kk-portal-user__menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.kk-portal-user__menu .dropdown-item .kk-icon {
    width: 1rem;
    color: var(--kk-gray-500);
    text-align: center;
}

.kk-portal-user__menu form {
    margin: 0;
}

.kk-portal-user__head {
    display: flex;
    flex-direction: column;
    padding: .5rem 1.5rem .75rem;
    margin-bottom: .25rem;
    font-size: var(--kk-text-14);
    border-bottom: 1px solid var(--kk-border);
}

.kk-portal-user__head span {
    font-size: var(--kk-text-12);
    color: var(--kk-text-muted);
}

.kk-portal__content {
    flex: 1 0 auto;
    padding: var(--kk-space-4) 16px var(--kk-space-5);
}

@media (min-width: 992px) {
    .kk-portal__content {
        padding: var(--kk-space-5) var(--kk-space-5) var(--kk-space-6);
    }
}

.kk-portal__content:focus {
    outline: 0;
}

.kk-portal-flash .alert:last-child {
    margin-bottom: var(--kk-space-4);
}

.kk-portal-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .25rem 1rem;
    padding: 1rem 16px;
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
    border-top: 1px solid var(--kk-border);
}

@media (min-width: 992px) {
    .kk-portal-foot {
        padding: 1rem var(--kk-space-5);
    }
}

.kk-portal-foot a {
    color: var(--kk-gray-700);
}

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

/* Existing portal screens: Bootstrap 5 names and the old theme's classes,
   restyled in the design system so every screen matches the new shell
   before it is rebuilt. Scoped to the portal. */
.kk-portal .form-label {
    display: inline-block;
    margin-bottom: .375rem;
    font-size: var(--kk-text-14);
    font-weight: 600;
    color: var(--kk-gray-800);
}

.kk-portal .row.g-2 {
    row-gap: .5rem;
}

.kk-portal .row.g-3 {
    row-gap: 1rem;
}

.kk-portal .row.g-4 {
    row-gap: 1.5rem;
}

.kk-portal .gap-2 {
    gap: .5rem;
}

.kk-portal .gap-3 {
    gap: 1rem;
}

.kk-portal .fw-bold {
    font-weight: 700;
}

/* BS5 badges (badge bg-*) have no text colour in BS4 */
.kk-portal .badge.bg-success,
.kk-portal .badge.bg-danger,
.kk-portal .badge.bg-primary,
.kk-portal .badge.bg-info,
.kk-portal .badge.bg-secondary,
.kk-portal .badge.bg-dark {
    color: var(--kk-white);
}

.kk-portal .badge.bg-warning,
.kk-portal .badge.bg-light {
    color: var(--kk-gray-900);
}

.kk-portal .bg-opacity-10.bg-primary {
    color: var(--kk-primary);
    background-color: var(--kk-primary-soft) !important;
}

.kk-portal .bg-opacity-10.bg-success {
    color: var(--kk-success);
    background-color: rgba(21, 128, 61, .1) !important;
}

.kk-portal .bg-opacity-10.bg-warning {
    color: #92400e;
    background-color: rgba(245, 158, 11, .14) !important;
}

.kk-portal .bg-opacity-10.bg-danger {
    color: var(--kk-danger);
    background-color: rgba(220, 38, 38, .1) !important;
}

.kk-portal .page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: var(--kk-space-4);
}

.kk-portal .page-header h4 {
    margin: 0;
    font-size: var(--kk-text-20);
}

.kk-portal .card-header h5,
.kk-portal .card-header h6 {
    font-size: var(--kk-text-16);
    font-weight: 700;
}

.kk-portal .notification-item {
    display: flex;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--kk-border);
}

.kk-portal .notification-item.unread {
    background-color: rgba(var(--kk-primary-rgb), .05);
    box-shadow: inset 3px 0 0 var(--kk-primary);
}

.kk-portal .notification-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
}

.kk-portal .notification-content {
    flex: 1 1 auto;
    min-width: 0;
}

.kk-portal .notification-title {
    font-weight: 600;
    color: var(--kk-gray-900);
}

.kk-portal .notification-text {
    font-size: var(--kk-text-14);
    color: var(--kk-gray-700);
}

.kk-portal .notification-time {
    margin-top: .25rem;
    font-size: var(--kk-text-12);
    color: var(--kk-text-muted);
}

.kk-portal .empty-state {
    padding: var(--kk-space-5) 1rem;
    color: var(--kk-text-muted);
    text-align: center;
}

.kk-portal .empty-state i {
    margin-bottom: 1rem;
    font-size: 2.5rem;
    color: var(--kk-gray-400);
}

.kk-portal .profile-photo-upload {
    position: relative;
    display: inline-block;
}

.kk-portal .profile-avatar-lg,
.kk-portal .profile-initials-lg {
    width: 6.25rem;
    height: 6.25rem;
    border-radius: 50%;
}

.kk-portal .profile-avatar-lg {
    object-fit: cover;
    border: 3px solid var(--kk-border);
}

.kk-portal .profile-initials-lg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--kk-text-30);
    font-weight: 700;
    color: var(--kk-white);
    background-color: var(--kk-primary);
}

.kk-portal .logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kk-primary);
    background-color: var(--kk-primary-soft);
    border-radius: 50%;
}


/* 28. Landlord dashboard =================================================== */

.kk-dash-welcome {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-bottom: var(--kk-space-4);
}

.kk-dash-welcome__title {
    margin-bottom: .25rem;
    font-size: clamp(var(--kk-text-20), 1rem + 1vw, var(--kk-text-30));
}

.kk-dash-welcome__meta {
    margin: 0;
    color: var(--kk-text-muted);
}

.kk-dash-welcome__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.kk-dash-welcome__actions .btn .kk-icon {
    margin-right: .5rem;
}

/* Four headline figures: 1 column, 2 from sm, 4 from xl */
.kk-dash-stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kk-space-3);
    margin-bottom: var(--kk-space-4);
}

@media (min-width: 576px) {
    .kk-dash-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .kk-dash-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Icon beside the figure, so four cards stay short */
.kk-dash-stats .kk-stat {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
}

.kk-dash-stats .kk-stat__icon {
    flex-shrink: 0;
}

.kk-dash-stats .kk-stat__value {
    font-size: var(--kk-text-24);
    white-space: nowrap;
}

/* Payments beside the side panels from xl */
.kk-dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kk-space-4);
    align-items: start;
}

@media (min-width: 1200px) {
    .kk-dash-grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

.kk-dash-side {
    display: grid;
    gap: var(--kk-space-4);
}

/* Panel: a card with a title row */
.kk-panel {
    overflow: hidden;
}

.kk-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--kk-border);
}

.kk-panel__title {
    margin: 0;
    font-size: var(--kk-text-18);
}

.kk-panel__link {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: .375rem;
    font-size: var(--kk-text-14);
    font-weight: 600;
}

.kk-panel__row-link {
    font-size: var(--kk-text-14);
    font-weight: 600;
}

.kk-panel__empty {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin: 0;
    padding: 1.25rem;
    color: var(--kk-gray-700);
}

.kk-panel__empty .kk-icon {
    color: var(--kk-success);
}

.kk-panel__note {
    margin: 0;
    padding: .75rem 1.25rem 1.25rem;
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
}

.kk-panel .kk-empty {
    padding: var(--kk-space-4) 1.25rem;
}

.kk-dash-table th[scope="row"] {
    font-weight: 600;
    color: var(--kk-gray-900);
    white-space: nowrap;
}

.kk-dash-table td,
.kk-dash-table th {
    padding: .875rem 1rem;
}

.kk-dash-table th:first-child,
.kk-dash-table td:first-child {
    padding-left: 1.25rem;
}

.kk-dash-table__sub {
    display: block;
    font-size: var(--kk-text-12);
    font-weight: 400;
    color: var(--kk-text-muted);
}

/* Needs attention */
.kk-attention {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-attention li+li {
    border-top: 1px solid var(--kk-border);
}

.kk-attention__item {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .875rem 1.25rem;
    color: var(--kk-gray-800);
}

.kk-attention__item:hover {
    color: var(--kk-gray-900);
    text-decoration: none;
    background-color: var(--kk-gray-100);
}

.kk-attention__item>.kk-icon {
    flex-shrink: 0;
    font-size: .75rem;
    color: var(--kk-gray-400);
}

.kk-attention__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: .875rem;
    border-radius: 50%;
}

.kk-attention__icon--danger {
    color: var(--kk-danger);
    background-color: rgba(220, 38, 38, .1);
}

.kk-attention__icon--primary {
    color: var(--kk-primary);
    background-color: var(--kk-primary-soft);
}

.kk-attention__icon--warning {
    color: #92400e;
    background-color: rgba(245, 158, 11, .16);
}

.kk-attention__icon--neutral {
    color: var(--kk-gray-700);
    background-color: var(--kk-gray-200);
}

.kk-attention__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--kk-text-14);
}

/* Small label / number pairs */
.kk-mini-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}

.kk-mini-stats>div {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--kk-border);
}

.kk-mini-stats>div:not(:nth-child(3n)) {
    border-right: 1px solid var(--kk-border);
}

.kk-mini-stats dt {
    font-size: var(--kk-text-12);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kk-text-muted);
}

.kk-mini-stats dd {
    margin: 0;
    font-family: var(--kk-font-heading);
    font-size: var(--kk-text-24);
    font-weight: 700;
    color: var(--kk-gray-900);
}


/* 29. Portal screens: lists, forms and detail pages ======================== */

/* Icons inside portal buttons and menu items */
.kk-portal .btn>.kk-icon:first-child:not(:last-child) {
    margin-right: .5rem;
}

.kk-portal .btn>.kk-icon:last-child:not(:first-child) {
    margin-left: .5rem;
    font-size: .75em;
}

.kk-portal .dropdown-item {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.kk-portal .dropdown-item>.kk-icon {
    width: 1rem;
    color: var(--kk-gray-500);
    text-align: center;
}

.kk-portal .dropdown-item.text-danger>.kk-icon {
    color: inherit;
}

.kk-portal .dropdown-menu form {
    margin: 0;
}

.kk-portal .modal-title {
    font-size: var(--kk-text-20);
}

/* Breadcrumbs above a sub-page */
.kk-portal-crumbs {
    margin-bottom: var(--kk-space-3);
    padding: 0;
    font-size: var(--kk-text-14);
    background: none;
}

/* Page head: a one-line summary and the page's main actions */
.kk-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin-bottom: var(--kk-space-3);
}

.kk-page-head__lead {
    margin: 0;
    color: var(--kk-gray-700);
}

.kk-page-head__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Filter card: status chips and a search box */
.kk-filter {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin-bottom: var(--kk-space-3);
    padding: .875rem 1rem;
}

.kk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.kk-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.5rem;
    padding: .375rem .875rem;
    font-size: var(--kk-text-14);
    font-weight: 600;
    color: var(--kk-gray-700);
    background-color: var(--kk-gray-100);
    border: 1px solid var(--kk-border);
    border-radius: var(--kk-radius-pill);
}

.kk-chip:hover {
    color: var(--kk-primary);
    text-decoration: none;
    border-color: rgba(var(--kk-primary-rgb), .4);
}

.kk-chip.is-active {
    color: var(--kk-white);
    background-color: var(--kk-primary);
    border-color: var(--kk-primary);
}

.kk-chip__count {
    min-width: 1.5rem;
    padding: 0 .375rem;
    font-size: var(--kk-text-12);
    text-align: center;
    background-color: rgba(17, 24, 39, .08);
    border-radius: var(--kk-radius-pill);
}

/* Darker, not lighter: white on a white tint of the primary is only ~3.5:1 */
.kk-chip.is-active .kk-chip__count {
    background-color: rgba(0, 0, 0, .2);
}

.kk-filter__form {
    display: flex;
    flex: 1 1 18rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    max-width: 32rem;
}

.kk-filter__search {
    flex: 1 1 12rem;
}

/* List table; below md each row becomes a small card with labels */
.kk-rtable th,
.kk-rtable td {
    padding: .875rem 1rem;
}

.kk-rtable th:first-child,
.kk-rtable td:first-child {
    padding-left: 1.25rem;
}

.kk-rtable__main {
    font-weight: 400;
}

.kk-rtable__title {
    font-weight: 600;
    color: var(--kk-gray-900);
}

.kk-rtable__title:hover {
    color: var(--kk-primary);
}

.kk-rtable__sub {
    display: block;
    font-size: var(--kk-text-12);
    font-weight: 400;
    color: var(--kk-text-muted);
}

.kk-rtable__pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.kk-rtable__actions {
    white-space: nowrap;
}

.kk-rtable__actions,
.kk-rtable__actions .dropdown {
    text-align: right;
}

.kk-rtable__actions>* {
    display: inline-block;
    vertical-align: middle;
}

.kk-icon-btn {
    min-width: 2.25rem;
}

@media (max-width: 767.98px) {
    .kk-rtable thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .kk-rtable,
    .kk-rtable tbody,
    .kk-rtable tr,
    .kk-rtable th,
    .kk-rtable td {
        display: block;
        width: 100%;
    }

    .kk-rtable tr {
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--kk-border);
    }

    .kk-rtable tr:last-child {
        border-bottom: 0;
    }

    .kk-rtable th,
    .kk-rtable td,
    .kk-rtable th:first-child,
    .kk-rtable td:first-child {
        padding: .25rem 0;
        border: 0;
    }

    .kk-rtable td[data-label] {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        text-align: right;
    }

    .kk-rtable td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: var(--kk-text-14);
        font-weight: 600;
        color: var(--kk-text-muted);
        text-align: left;
    }

    .kk-rtable td[data-label] .kk-rtable__sub {
        display: inline;
        margin-left: .25rem;
    }

    .kk-rtable .kk-rtable__actions {
        display: flex;
        gap: .5rem;
        padding-top: .75rem;
        text-align: left;
    }
}

.kk-panel__foot {
    display: flex;
    justify-content: center;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--kk-border);
}

.kk-panel__foot .pagination {
    margin: 0;
}

/* Forms in a card, in titled sections */
.kk-form-card {
    padding: var(--kk-space-4) 1.25rem;
}

@media (min-width: 768px) {
    .kk-form-card {
        padding: var(--kk-space-5);
    }
}

.kk-form-section {
    min-width: 0;
    margin: 0 0 var(--kk-space-4);
    padding: 0;
    border: 0;
}

.kk-form-section__title {
    width: 100%;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    font-family: var(--kk-font-heading);
    font-size: var(--kk-text-18);
    font-weight: 700;
    color: var(--kk-gray-900);
    border-bottom: 1px solid var(--kk-border);
}

.kk-form-section__help {
    margin-top: -.25rem;
    color: var(--kk-text-muted);
}

.kk-form-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding-top: var(--kk-space-3);
    border-top: 1px solid var(--kk-border);
}

.kk-form-wizard {
    display: grid;
    gap: 1rem;
}

.kk-form-wizard__nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .5rem;
    border: 1px solid var(--kk-border);
    border-radius: .75rem;
    background: var(--kk-surface-muted);
}

.kk-form-step {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--kk-text-muted);
    font-size: var(--kk-text-12);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: .5rem .9rem;
    transition: all .2s ease;
}

.kk-form-step.is-current,
.kk-form-step:hover,
.kk-form-step:focus-visible {
    background: var(--kk-brand);
    color: #fff;
    border-color: var(--kk-brand);
    outline: none;
}

.kk-form-wizard__panels {
    min-height: 12rem;
}

.kk-form-step-panel {
    display: block;
}

.kk-form-step-panel[hidden],
.kk-form-step-panel:not(.is-current) {
    display: none;
}

.kk-form-type-block {
    padding: 1rem;
    border: 1px solid var(--kk-border);
    border-radius: .75rem;
    background: var(--kk-surface-muted);
}

.kk-form-type-block[hidden] {
    display: none;
}

.kk-form-type-block+.kk-form-type-block {
    margin-top: 1rem;
}

/* Profile header on a detail page */
.kk-profile {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 1.5rem;
    margin-bottom: var(--kk-space-4);
    padding: 1.25rem;
}

@media (min-width: 768px) {
    .kk-profile {
        padding: var(--kk-space-4);
    }
}

.kk-profile__avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    font-family: var(--kk-font-heading);
    font-size: var(--kk-text-24);
    font-weight: 700;
    color: var(--kk-primary);
    background-color: var(--kk-primary-soft);
    border-radius: 50%;
}

.kk-profile__body {
    flex: 1 1 16rem;
    min-width: 0;
}

.kk-profile__name {
    margin-bottom: .5rem;
    font-size: clamp(var(--kk-text-20), 1rem + 1vw, var(--kk-text-30));
}

.kk-profile__pills {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-bottom: .75rem;
}

.kk-profile__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem 1.5rem;
    margin: 0;
    padding: 0;
    color: var(--kk-gray-700);
    list-style: none;
}

.kk-profile__meta li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    word-break: break-word;
}

.kk-profile__meta .kk-icon {
    color: var(--kk-gray-500);
}

.kk-profile__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Detail page: main column and a side column from xl */
.kk-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kk-space-4);
    align-items: start;
}

@media (min-width: 1200px) {
    .kk-detail-grid {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
}

.kk-detail-grid__main,
.kk-detail-grid__side {
    display: grid;
    gap: var(--kk-space-4);
    min-width: 0;
}

/* Label / value facts */
.kk-facts {
    padding: .5rem 1.25rem 1.25rem;
}

.kk-facts__title {
    margin: 1rem 0 .5rem;
    font-family: var(--kk-font-body);
    font-size: var(--kk-text-12);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kk-text-muted);
}

.kk-facts__list {
    margin: 0;
}

.kk-facts__list>div {
    display: grid;
    grid-template-columns: minmax(7rem, 2fr) minmax(0, 3fr);
    gap: 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--kk-gray-100);
}

.kk-facts__list dt {
    font-weight: 500;
    color: var(--kk-gray-600);
}

.kk-facts__list dd {
    margin: 0;
    color: var(--kk-gray-900);
    word-break: break-word;
}

/* A dated list of updates (tenant requests) */
.kk-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-timeline__item {
    padding: 1rem 1.25rem;
}

.kk-timeline__item+.kk-timeline__item {
    border-top: 1px solid var(--kk-border);
}

.kk-timeline__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin-bottom: .375rem;
}

.kk-timeline__date {
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
}

.kk-timeline__text {
    margin: 0;
    color: var(--kk-gray-900);
}

.kk-timeline__note {
    margin: .5rem 0 0;
    padding: .5rem .75rem;
    font-size: var(--kk-text-14);
    color: var(--kk-gray-700);
    background-color: var(--kk-gray-100);
    border-radius: var(--kk-radius);
}


/* 30. About page and the homepage's "property in Uganda" section =========== */

.kk-about__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: var(--kk-space-3);
}

.kk-about__actions .btn>.kk-icon {
    margin-left: .5rem;
}

.kk-about__subhead,
.kk-seo__subtitle {
    margin-bottom: var(--kk-space-3);
    font-size: var(--kk-text-20);
}

.kk-about__strong {
    font-weight: 600;
    color: var(--kk-gray-900);
}

/* Who it's for: auto-fitting cards */
.kk-audiences {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kk-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 576px) {
    .kk-audiences {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .kk-audiences {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .kk-audiences {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .kk-audience {
        padding: 1.25rem;
    }
}

.kk-audience {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--kk-space-4);
}

.kk-audience__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    color: var(--kk-primary);
    background-color: var(--kk-primary-soft);
    border-radius: var(--kk-radius);
}

.kk-audience__title {
    margin-bottom: .5rem;
    font-size: var(--kk-text-20);
}

.kk-audience__text {
    flex: 1 1 auto;
    color: var(--kk-gray-700);
}

.kk-audience__link {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-weight: 600;
}

/* What property management covers */
.kk-feature-list {
    margin: 0;
    padding: .5rem 1.5rem;
    list-style: none;
}

.kk-feature-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .875rem 0;
    color: var(--kk-gray-800);
}

.kk-feature-list li+li {
    border-top: 1px solid var(--kk-border);
}

.kk-feature-list__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--kk-primary);
    background-color: var(--kk-primary-soft);
    border-radius: 50%;
}

/* Four simple steps */
.kk-simple-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: var(--kk-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: kk-simple;
}

.kk-simple-step {
    position: relative;
    counter-increment: kk-simple;
}

.kk-simple-step__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    color: var(--kk-white);
    background-color: var(--kk-primary);
    border-radius: 50%;
}

.kk-simple-step__icon::after {
    content: counter(kk-simple);
    position: absolute;
    top: -.25rem;
    left: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    font-size: var(--kk-text-12);
    font-weight: 700;
    color: var(--kk-navy-deep);
    background-color: var(--kk-accent);
    border: 2px solid var(--kk-white);
    border-radius: 50%;
}

.kk-simple-step__title {
    margin-bottom: .375rem;
    font-size: var(--kk-text-18);
}

.kk-simple-step__text {
    margin: 0;
    color: var(--kk-gray-700);
}

/* "Explore properties by": groups of search links */
.kk-explore {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--kk-space-4) var(--kk-space-3);
}

.kk-explore__title {
    margin-bottom: .625rem;
    font-family: var(--kk-font-body);
    font-size: var(--kk-text-12);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kk-text-muted);
}

.kk-explore__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-explore__list li+li {
    margin-top: .375rem;
}

.kk-explore__list a {
    color: var(--kk-gray-800);
}

.kk-explore__list a:hover {
    color: var(--kk-primary);
}

/* Homepage section above the footer */
.kk-seo {
    background-color: var(--kk-surface);
    border-top: 1px solid var(--kk-border);
}

.kk-seo__title {
    margin-bottom: var(--kk-space-3);
    font-size: clamp(var(--kk-text-24), 1.1rem + 1.2vw, var(--kk-text-30));
}

.kk-seo p {
    color: var(--kk-gray-700);
}

.kk-seo__more {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-weight: 600;
}


/* 31. Shared portal screens: settings, notifications, tenant home ========= */

.kk-panel__body {
    padding: 1.25rem;
}

.kk-panel__body>p {
    color: var(--kk-gray-700);
}

.kk-panel__hint {
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
}

/* Settings: a narrow column (photo, sign-in check) beside the forms */
.kk-settings {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kk-space-4);
    align-items: start;
}

@media (min-width: 992px) {
    .kk-settings {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }
}

.kk-settings__side,
.kk-settings__main {
    display: grid;
    gap: var(--kk-space-4);
    min-width: 0;
}

.kk-settings__fixed {
    margin: .25rem 0 .75rem;
}

.kk-account-card {
    padding: var(--kk-space-4) 1.25rem 1.25rem;
}

.kk-account-card__who {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--kk-space-3);
    text-align: center;
}

.kk-account-card__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    margin-bottom: .75rem;
    font-family: var(--kk-font-heading);
    font-size: var(--kk-text-30);
    font-weight: 700;
    color: var(--kk-primary);
    object-fit: cover;
    background-color: var(--kk-primary-soft);
    border-radius: 50%;
}

.kk-account-card__name {
    margin-bottom: .25rem;
    font-size: var(--kk-text-20);
}

.kk-account-card__sub {
    margin: 0;
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
    word-break: break-word;
}

.kk-account-card__form .form-control-file {
    font-size: var(--kk-text-14);
}

/* Notifications */
.kk-notices {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-notice {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.kk-notice+.kk-notice {
    border-top: 1px solid var(--kk-border);
}

.kk-notice.is-unread {
    background-color: rgba(var(--kk-primary-rgb), .04);
    box-shadow: inset 3px 0 0 var(--kk-primary);
}

.kk-notice__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
}

.kk-notice__icon--primary {
    color: var(--kk-primary);
    background-color: var(--kk-primary-soft);
}

.kk-notice__icon--success {
    color: var(--kk-success);
    background-color: rgba(21, 128, 61, .1);
}

.kk-notice__icon--warning {
    color: #92400e;
    background-color: rgba(245, 158, 11, .16);
}

.kk-notice__icon--danger {
    color: var(--kk-danger);
    background-color: rgba(220, 38, 38, .1);
}

.kk-notice__body {
    flex: 1 1 auto;
    min-width: 0;
}

.kk-notice__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .125rem;
    font-weight: 600;
    color: var(--kk-gray-900);
}

.kk-notice__new {
    padding: 0 .5rem;
    font-size: var(--kk-text-12);
    font-weight: 700;
    color: var(--kk-white);
    background-color: var(--kk-primary);
    border-radius: var(--kk-radius-pill);
}

.kk-notice__text {
    margin: 0 0 .25rem;
    color: var(--kk-gray-700);
}

.kk-notice__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin: 0;
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
}

.kk-notice__action {
    flex-shrink: 0;
    margin: 0;
}

/* Tenant home */
@media (min-width: 1200px) {
    .kk-dash-stats--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.kk-landlord__name {
    margin-bottom: .5rem;
    font-weight: 700;
    color: var(--kk-gray-900);
}

.kk-landlord__contact {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-landlord__contact li {
    display: flex;
    align-items: center;
    gap: .625rem;
    word-break: break-word;
}

.kk-landlord__contact .kk-icon {
    color: var(--kk-gray-500);
}

/* Platform admin: a slightly different accent on the account label */
.kk-portal--platform .kk-sidebar__account-label {
    color: #7dd3fc;
}

/* Filter form that uses the whole filter card (no chips beside it) */
.kk-filter__form--full {
    flex-basis: 100%;
    justify-content: flex-start;
    max-width: none;
}

.kk-filter__form--full .kk-filter__search {
    flex: 1 1 16rem;
    max-width: 32rem;
}

.kk-filter__select {
    flex: 0 1 12rem;
    width: auto;
}


/* 32. Portal records: short forms, delete buttons, the confirm dialog ===== */

/* A form with only a few fields reads better at a line length */
.kk-form-card--narrow {
    max-width: 48rem;
}

/* Delete buttons are forms; keep them inline with the buttons beside them */
.kk-delete {
    display: inline-block;
    margin: 0;
}

.kk-rtable__actions .kk-delete,
.kk-profile__actions .kk-delete {
    vertical-align: middle;
}

/* Shared "are you sure?" dialog (layouts.portal, portal.js) */
.kk-confirm .modal-body {
    color: var(--kk-gray-700);
}

.kk-confirm .modal-footer {
    flex-wrap: wrap;
    gap: .5rem;
}

.kk-confirm .modal-footer>* {
    margin: 0;
}

/* Icons inside secondary table text, e.g. the location pin */
.kk-rtable__sub .kk-icon {
    margin-right: .125rem;
    font-size: .875em;
    color: var(--kk-gray-400);
}

/* An icon in the profile badge instead of initials */
.kk-profile__avatar .kk-icon {
    font-size: var(--kk-text-20);
}

/* A short list of links with a pill each, e.g. a room's listings */
.kk-link-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-link-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding: .75rem 1.25rem;
    border-top: 1px solid var(--kk-border);
}

.kk-link-list li:first-child {
    border-top: 0;
}

.kk-link-list a {
    font-weight: 600;
    word-break: break-word;
}

/* Filter form with labelled fields (dates need a visible label) */
.kk-filter__form--fields {
    flex-basis: 100%;
    align-items: flex-end;
    justify-content: flex-start;
    max-width: none;
}

.kk-filter__field {
    display: flex;
    flex: 0 1 11rem;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.kk-filter__field--grow {
    flex: 1 1 14rem;
    max-width: 22rem;
}

.kk-filter__field label {
    margin: 0;
    font-size: var(--kk-text-12);
    font-weight: 600;
    color: var(--kk-text-muted);
}

.kk-filter__buttons {
    display: flex;
    gap: .5rem;
}

@media (max-width: 575.98px) {

    .kk-filter__field,
    .kk-filter__field--grow {
        flex: 1 1 100%;
        max-width: none;
    }
}

/* A worked-out figure under a money form, e.g. what a rent payment covers */
.kk-rent-summary {
    margin: 0;
    padding: .75rem 1rem;
    font-weight: 500;
    color: var(--kk-gray-900);
    background-color: var(--kk-primary-soft);
    border-radius: var(--kk-radius);
}

/* The quieter half of a record's title: "UGX 350,000 from Peter" */
.kk-profile__name-sub {
    font-family: var(--kk-font-body);
    font-size: .6em;
    font-weight: 500;
    color: var(--kk-gray-600);
}

/* Billing: the current plan, plan cards and usage against the limits */
.kk-billing__plan {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem 1rem;
    margin-bottom: .75rem;
    font-family: var(--kk-font-heading);
    font-size: var(--kk-text-24);
    font-weight: 700;
    color: var(--kk-gray-900);
}

.kk-billing__price {
    font-family: var(--kk-font-body);
    font-size: var(--kk-text-16);
    font-weight: 500;
    color: var(--kk-gray-600);
}

.kk-billing__pay {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.25rem;
}

.kk-billing__pay form {
    margin: 0;
}

.kk-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 1rem;
    padding: 1.25rem;
}

.kk-plan-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    border: 1px solid var(--kk-border);
    border-radius: var(--kk-radius-lg, .75rem);
}

.kk-plan-card.is-current {
    border-color: var(--kk-primary);
    box-shadow: 0 0 0 1px var(--kk-primary);
}

.kk-plan-card__name {
    margin-bottom: .25rem;
    font-size: var(--kk-text-18);
}

.kk-plan-card__price {
    margin-bottom: .75rem;
    font-size: var(--kk-text-20);
    font-weight: 700;
    color: var(--kk-gray-900);
}

.kk-plan-card__price span {
    font-size: var(--kk-text-14);
    font-weight: 500;
    color: var(--kk-gray-600);
}

.kk-plan-card__limits {
    flex: 1 1 auto;
    margin: 0 0 1rem;
    padding: 0;
    font-size: var(--kk-text-14);
    color: var(--kk-gray-700);
    list-style: none;
}

.kk-plan-card__limits li+li {
    margin-top: .25rem;
}

.kk-plan-card__form {
    display: grid;
    gap: .5rem;
    margin: 0;
}

.kk-plan-card__current {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-weight: 600;
    color: var(--kk-primary);
}

.kk-usage {
    margin: 0;
    padding: .5rem 1.25rem 1.25rem;
    list-style: none;
}

.kk-usage__item {
    padding: .75rem 0;
    border-bottom: 1px solid var(--kk-gray-100);
}

.kk-usage__item:last-child {
    border-bottom: 0;
}

.kk-usage__top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .375rem;
    color: var(--kk-gray-700);
}

.kk-usage__count {
    font-weight: 600;
    color: var(--kk-gray-900);
}

.kk-usage__count.is-full {
    color: var(--kk-danger, #b42318);
}

.kk-usage__bar {
    height: .375rem;
    background-color: var(--kk-gray-100);
}

.kk-usage__note {
    margin: .375rem 0 0;
    font-size: var(--kk-text-12);
    color: var(--kk-text-muted);
}

/* A subscription invoice */
.kk-invoice {
    max-width: 48rem;
}

.kk-invoice__head,
.kk-invoice__parties,
.kk-invoice__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding: 1.25rem;
}

.kk-invoice__head {
    border-bottom: 1px solid var(--kk-border);
}

.kk-invoice__title {
    margin-bottom: .25rem;
    font-size: var(--kk-text-24);
}

.kk-invoice__date {
    margin: 0;
    color: var(--kk-gray-600);
}

.kk-invoice__foot {
    align-items: center;
    border-top: 1px solid var(--kk-border);
}

/* First-run welcome (onboarding) */
.kk-welcome {
    max-width: 44rem;
    margin: 0 auto;
    padding: var(--kk-space-4) 1.25rem;
}

@media (min-width: 768px) {
    .kk-welcome {
        padding: var(--kk-space-5);
    }
}

.kk-welcome__intro {
    margin-bottom: var(--kk-space-3);
    text-align: center;
}

.kk-welcome__intro .kk-profile__avatar {
    margin-bottom: 1rem;
}

.kk-welcome__title {
    margin-bottom: .5rem;
    font-size: clamp(var(--kk-text-20), 1rem + 1vw, var(--kk-text-30));
}

.kk-welcome__lead {
    margin: 0;
    color: var(--kk-gray-700);
}

.kk-welcome__steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: .75rem;
    margin: 0 0 var(--kk-space-4);
    padding: 0;
    list-style: none;
    counter-reset: welcome;
}

.kk-welcome__steps li {
    padding: .75rem;
    font-size: var(--kk-text-14);
    color: var(--kk-gray-600);
    background-color: var(--kk-gray-100);
    border-radius: var(--kk-radius);
    counter-increment: welcome;
}

.kk-welcome__steps li::before {
    content: counter(welcome);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: .5rem;
    font-weight: 700;
    color: var(--kk-gray-700);
    background-color: var(--kk-white);
    border-radius: 50%;
}

.kk-welcome__steps li.is-current {
    color: var(--kk-gray-900);
    background-color: var(--kk-primary-soft);
}

.kk-welcome__steps li.is-current::before {
    color: var(--kk-white);
    background-color: var(--kk-primary);
}

.kk-welcome__steps strong,
.kk-welcome__steps span {
    display: block;
}

.kk-welcome__steps strong {
    color: var(--kk-gray-900);
}

.kk-welcome__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding-top: var(--kk-space-3);
    border-top: 1px solid var(--kk-border);
}

.kk-welcome__actions form {
    margin: 0;
}

/* Reports: the overview cards and the money-in-by-month bars */
.kk-report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--kk-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-report-card {
    position: relative;
    flex-direction: column;
    padding: 1.25rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.kk-report-card:hover,
.kk-report-card:focus-within {
    border-color: rgba(var(--kk-primary-rgb), .4);
    box-shadow: 0 .5rem 1.5rem rgba(17, 24, 39, .08);
}

.kk-report-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1rem;
    font-size: var(--kk-text-18);
    color: var(--kk-primary);
    background-color: var(--kk-primary-soft);
    border-radius: var(--kk-radius);
}

.kk-report-card__title {
    margin-bottom: .375rem;
    font-size: var(--kk-text-18);
}

.kk-report-card__title a {
    color: var(--kk-gray-900);
}

.kk-report-card__title a:hover {
    color: var(--kk-primary);
    text-decoration: none;
}

.kk-report-card__text {
    margin-bottom: 1rem;
    color: var(--kk-gray-700);
}

.kk-report-card__figure {
    margin: auto 0 0;
    padding-top: .75rem;
    font-weight: 600;
    color: var(--kk-gray-900);
    border-top: 1px solid var(--kk-border);
}

.kk-legend {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: var(--kk-text-12);
    color: var(--kk-gray-600);
}

.kk-legend__rent,
.kk-legend__water {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    border-radius: 2px;
}

.kk-legend__water {
    margin-left: .5rem;
}

.kk-legend__rent,
.kk-income__rent {
    background-color: var(--kk-primary);
}

.kk-legend__water,
.kk-income__water {
    background-color: #38bdf8;
}

.kk-income__bar-col {
    width: 40%;
    min-width: 8rem;
}

.kk-income__bar {
    display: flex;
    height: .625rem;
    overflow: hidden;
    background-color: var(--kk-gray-100);
    border-radius: var(--kk-radius-pill);
}

.kk-income__rent,
.kk-income__water,
.kk-legend__rent,
.kk-legend__water {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* Listings: a row with its cover photo */
.kk-listing-row {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.kk-thumb {
    flex-shrink: 0;
    width: 4rem;
    height: 3rem;
    object-fit: cover;
    border-radius: var(--kk-radius);
}

.kk-thumb--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--kk-gray-400);
    background-color: var(--kk-gray-100);
}

/* What's left before a listing can be published */
.kk-checklist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-checklist li {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .25rem 0;
    color: var(--kk-gray-700);
}

.kk-checklist .kk-icon {
    font-size: .625rem;
    color: var(--kk-warning, #d97706);
}

.kk-publish__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

.kk-publish__actions form {
    margin: 0;
}

.kk-panel__count {
    margin-left: .375rem;
    font-family: var(--kk-font-body);
    font-size: var(--kk-text-14);
    font-weight: 500;
    color: var(--kk-text-muted);
}

/* Listing photos */
.kk-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--kk-border);
}

.kk-upload .form-group {
    flex: 1 1 18rem;
}

.kk-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-photo {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--kk-border);
    border-radius: var(--kk-radius);
}

.kk-photo__image {
    position: relative;
    aspect-ratio: 4 / 3;
    max-width: 100%;
    background-color: var(--kk-gray-100);
}

.kk-photo__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kk-photo__cover {
    position: absolute;
    top: .5rem;
    left: .5rem;
    padding: .125rem .5rem;
    font-size: var(--kk-text-12);
    font-weight: 600;
    color: var(--kk-white);
    background-color: var(--kk-primary);
    border-radius: var(--kk-radius-pill);
}

.kk-photo__form {
    display: grid;
    gap: .375rem;
    padding: .75rem .75rem 0;
}

.kk-photo__form .btn {
    justify-self: start;
}

.kk-photo__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-top: auto;
    padding: .75rem;
}

.kk-photo__actions form {
    margin: 0;
}

/* Take-it-down panel at the foot of a record */
.kk-danger-zone {
    margin-top: var(--kk-space-4);
    border-color: rgba(220, 38, 38, .35);
}

.kk-danger-zone p {
    color: var(--kk-gray-700);
}

/* Rarely needed fields, folded away */
.kk-form-more {
    margin-bottom: var(--kk-space-4);
    padding: 1rem 1.25rem;
    background-color: var(--kk-gray-100);
    border-radius: var(--kk-radius);
}

.kk-form-more summary {
    font-weight: 600;
    color: var(--kk-gray-900);
    cursor: pointer;
}

.kk-amenities {
    min-width: 0;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}

.kk-amenities .kk-facts__title {
    margin-top: 0;
}

.kk-amenities__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0 1rem;
}

/* Enquiries and viewing requests: a message with its reply form */
.kk-messages {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-message {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem 1.5rem;
    padding: 1.25rem;
    border-top: 1px solid var(--kk-border);
}

.kk-message:first-child {
    border-top: 0;
}

.kk-message.is-new {
    box-shadow: inset 3px 0 0 var(--kk-primary);
}

@media (min-width: 992px) {
    .kk-message {
        grid-template-columns: minmax(0, 1fr) 17rem;
    }
}

.kk-message__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem .625rem;
    margin-bottom: .5rem;
}

.kk-message__name {
    margin: 0;
    font-family: var(--kk-font-body);
    font-size: var(--kk-text-16);
    font-weight: 700;
}

.kk-message__when {
    font-size: var(--kk-text-12);
    color: var(--kk-text-muted);
}

.kk-message__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
    margin: 0 0 .5rem;
    padding: 0;
    font-size: var(--kk-text-14);
    list-style: none;
}

.kk-message__meta li {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    min-width: 0;
    word-break: break-word;
}

.kk-message__meta .kk-icon,
.kk-message__date .kk-icon {
    color: var(--kk-gray-500);
}

.kk-message__date {
    margin-bottom: .5rem;
    font-size: var(--kk-text-14);
}

.kk-message__text {
    margin: 0;
    padding: .625rem .875rem;
    color: var(--kk-gray-900);
    white-space: pre-line;
    background-color: var(--kk-gray-100);
    border-radius: var(--kk-radius);
}

.kk-message__form {
    align-self: start;
    padding: 1rem;
    background-color: var(--kk-gray-100);
    border-radius: var(--kk-radius);
}

.kk-message__form label {
    margin-bottom: .25rem;
    font-size: var(--kk-text-12);
    font-weight: 600;
}

.kk-message__form .form-group {
    margin-bottom: .75rem;
}

/* Views a day: thin CSS bars */
.kk-spark {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 10rem;
}

.kk-spark__bar {
    flex: 1 1 0;
    min-height: 2px;
    background-color: var(--kk-primary);
    border-radius: 2px 2px 0 0;
}

.kk-spark__axis {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .5rem;
    font-size: var(--kk-text-12);
    color: var(--kk-text-muted);
}

/* Sign-in: /login's "which portal?" choice */
.kk-portal-choices {
    display: grid;
    gap: .75rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.kk-portal-choice {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    color: var(--kk-gray-900);
    border: 1px solid var(--kk-border);
    border-radius: var(--kk-radius-lg, .875rem);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.kk-portal-choice:hover,
.kk-portal-choice:focus {
    color: var(--kk-gray-900);
    text-decoration: none;
    border-color: var(--kk-primary);
    box-shadow: 0 0 0 1px var(--kk-primary);
}

.kk-portal-choice__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--kk-primary);
    background-color: var(--kk-primary-soft);
    border-radius: var(--kk-radius);
}

.kk-portal-choice__body {
    flex: 1 1 auto;
    min-width: 0;
}

.kk-portal-choice__body strong,
.kk-portal-choice__body span {
    display: block;
}

.kk-portal-choice__body span {
    font-size: var(--kk-text-14);
    color: var(--kk-gray-600);
}

.kk-portal-choice>.kk-icon:last-child {
    color: var(--kk-gray-400);
}

/* Right details on the wrong portal's sign-in: a way across */
.kk-auth__switch {
    margin-bottom: 1rem;
}

/* Landlord sign-up: "how it works" steps, the list/manage choice, and the summary once sent */
.kk-auth__steps {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.kk-auth__steps li+li {
    margin-top: .5rem;
}

.kk-choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
}

.kk-request-summary {
    margin: 0 0 1rem;
    padding: 1rem 1.25rem;
    background-color: var(--kk-gray-100);
    border-radius: var(--kk-radius);
}

.kk-request-summary>div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .25rem 0;
}

.kk-request-summary dt {
    font-weight: 500;
    color: var(--kk-gray-600);
}

.kk-request-summary dd {
    margin: 0;
    font-weight: 600;
    color: var(--kk-gray-900);
    text-align: right;
    word-break: break-word;
}

/* Printing a portal page (an invoice): just the page itself */
@media print {

    .kk-sidebar,
    .kk-portal-bar,
    .kk-portal-foot,
    .kk-portal-crumbs,
    .kk-portal-flash,
    .kk-skip-link {
        display: none !important;
    }

    .kk-portal__main {
        margin: 0 !important;
        padding: 0 !important;
    }

    .kk-portal .card {
        border: 0;
        box-shadow: none;
    }
}


/* 33. Long-form pages: blog, articles, legal =============================== */

/* Running text. The guide has its own scoped version of this (section 25);
   this one is for anything rendered from Markdown (blog posts) or hand-written
   policy copy. Kept separate so the guide's layout is not disturbed. */
.kk-prose {
    font-size: var(--kk-text-18);
    line-height: 1.7;
    color: var(--kk-gray-700);
}

.kk-prose>*+* {
    margin-top: var(--kk-space-3);
}

.kk-prose__lede {
    font-size: var(--kk-text-20);
    line-height: 1.6;
    color: var(--kk-gray-800);
}

.kk-prose h2 {
    margin-top: var(--kk-space-5);
    margin-bottom: var(--kk-space-2);
    font-size: clamp(var(--kk-text-24), 1.2rem + 1vw, var(--kk-text-30));
}

.kk-prose h3 {
    margin-top: var(--kk-space-4);
    margin-bottom: var(--kk-space-2);
    font-size: var(--kk-text-20);
}

.kk-prose strong {
    color: var(--kk-gray-900);
}

/* Links in running text are underlined, so they never rely on colour alone. */
.kk-prose a {
    text-decoration: underline;
    text-underline-offset: .15em;
}

.kk-prose ul,
.kk-prose ol {
    padding-left: 1.25rem;
    margin-bottom: var(--kk-space-3);
}

.kk-prose li+li {
    margin-top: .5rem;
}

.kk-prose li::marker {
    color: var(--kk-primary);
}

.kk-prose blockquote {
    padding: var(--kk-space-3) var(--kk-space-4);
    margin: var(--kk-space-4) 0;
    font-size: var(--kk-text-20);
    color: var(--kk-gray-800);
    background-color: var(--kk-surface-muted);
    border-left: 3px solid var(--kk-primary);
    border-radius: 0 var(--kk-radius) var(--kk-radius) 0;
}

.kk-prose blockquote p:last-child {
    margin-bottom: 0;
}

.kk-prose code {
    padding: .125rem .375rem;
    font-size: .9em;
    color: var(--kk-gray-900);
    background-color: var(--kk-gray-100);
    border-radius: var(--kk-radius-sm);
}

.kk-prose pre {
    padding: var(--kk-space-3);
    overflow-x: auto;
    background-color: var(--kk-gray-900);
    border-radius: var(--kk-radius);
}

.kk-prose pre code {
    padding: 0;
    color: var(--kk-gray-100);
    background: none;
}

.kk-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--kk-radius-lg);
}

.kk-prose hr {
    margin: var(--kk-space-5) 0;
    border-top-color: var(--kk-border);
}

.kk-prose table {
    width: 100%;
    font-size: var(--kk-text-16);
}

.kk-prose th,
.kk-prose td {
    padding: .625rem .75rem;
    border-bottom: 1px solid var(--kk-border);
}

/* Sidebar card: lists, chips and a call to action beside long text. */
.kk-aside-card {
    padding: var(--kk-space-4);
}

.kk-aside-card+.kk-aside-card {
    margin-top: var(--kk-space-3);
}

.kk-aside-card__title {
    margin-bottom: var(--kk-space-2);
    font-size: var(--kk-text-18);
}

.kk-aside-card__note {
    margin: var(--kk-space-2) 0 0;
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
}

.kk-aside-card__list,
.kk-aside-card__chips {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-aside-card__list li+li {
    margin-top: var(--kk-space-3);
    padding-top: var(--kk-space-3);
    border-top: 1px solid var(--kk-border);
}

.kk-aside-card__list a {
    display: block;
    font-weight: 600;
    color: var(--kk-gray-900);
}

.kk-aside-card__list a:hover {
    color: var(--kk-primary);
}

.kk-aside-card__meta {
    display: block;
    margin-top: .125rem;
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
}

.kk-aside-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.kk-aside-card--accent {
    background-color: var(--kk-primary-soft);
    border-color: transparent;
}

/* Post cards ------------------------------------------------------------- */

.kk-post-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kk-space-4);
}

@media (min-width: 768px) {
    .kk-post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .kk-post-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.kk-post-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--kk-surface);
    border-radius: var(--kk-radius-lg);
    box-shadow: var(--kk-hairline), var(--sh-2);
    transition: box-shadow var(--kk-duration) ease, transform var(--kk-duration) ease;
}

.kk-post-card:hover {
    box-shadow: var(--kk-hairline), var(--sh-3);
    transform: translateY(-2px);
}

.kk-post-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--kk-gray-200);
}

.kk-post-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--kk-duration) var(--kk-ease);
}

.kk-post-card:hover .kk-post-card__media img {
    transform: scale(1.03);
}

.kk-post-card__body {
    padding: var(--kk-space-3);
}

.kk-post-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
    margin-bottom: .5rem;
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
}

.kk-post-card__category {
    font-size: var(--kk-text-12);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kk-primary);
}

.kk-post-card__title {
    margin-bottom: .5rem;
    font-size: var(--kk-text-24);
    line-height: 1.25;
}

.kk-post-card__excerpt {
    margin: 0;
    color: var(--kk-text-muted);
}

/* Wide: photo beside the text, for the lead post and the related strip. */
@media (min-width: 768px) {
    .kk-post-card--wide {
        flex-direction: row;
        align-items: stretch;
    }

    .kk-post-card--wide .kk-post-card__media {
        flex: 0 0 45%;
        aspect-ratio: auto;
    }

    .kk-post-card--wide .kk-post-card__body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: var(--kk-space-4);
    }

    .kk-post-card--wide .kk-post-card__title {
        font-size: clamp(var(--kk-text-24), 1.3rem + 1vw, var(--kk-text-30));
    }
}

/* Article page ----------------------------------------------------------- */

.kk-article-head {
    padding: var(--kk-space-5) 0 var(--kk-space-3);
}

.kk-article-head .breadcrumb {
    margin-bottom: var(--kk-space-3);
}

.kk-article-head__category {
    margin-bottom: .5rem;
    font-size: var(--kk-text-12);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kk-primary);
}

.kk-article-head__title {
    max-width: 46rem;
    margin-bottom: var(--kk-space-2);
}

.kk-article-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .625rem;
    margin: 0;
    color: var(--kk-text-muted);
}

.kk-article-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--kk-radius-lg);
}

.kk-article {
    padding-top: var(--kk-space-4);
}

.kk-article__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kk-space-3);
    margin-top: var(--kk-space-5);
    padding-top: var(--kk-space-4);
    border-top: 1px solid var(--kk-border);
}

.kk-article__foot-link {
    font-size: var(--kk-text-14);
    color: var(--kk-text-muted);
}

.kk-article__foot-link span {
    font-weight: 600;
    color: var(--kk-primary);
    text-decoration: underline;
}

/* The cover preview on the platform's post form */
.kk-cover-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kk-space-3);
    margin-bottom: var(--kk-space-3);
    padding: var(--kk-space-3);
    background-color: var(--kk-surface-muted);
    border-radius: var(--kk-radius-lg);
}

.kk-cover-preview img {
    width: 10rem;
    height: auto;
    border-radius: var(--kk-radius);
}


/* 34. Team, sitemap and finished listings ================================= */

.kk-team {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kk-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 576px) {
    .kk-team {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .kk-team {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.kk-team__card {
    padding: var(--kk-space-4);
    text-align: center;
}

.kk-team__photo,
.kk-team__initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    margin-bottom: var(--kk-space-3);
    border-radius: 50%;
}

.kk-team__photo {
    object-fit: cover;
}

.kk-team__initials {
    font-family: var(--kk-font-heading);
    font-size: var(--kk-text-30);
    font-weight: 700;
    color: var(--kk-primary);
    background-color: var(--kk-primary-soft);
}

.kk-team__name {
    margin-bottom: .125rem;
    font-size: var(--kk-text-20);
}

.kk-team__role {
    margin-bottom: .5rem;
    font-size: var(--kk-text-14);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kk-primary);
}

.kk-team__bio {
    margin: 0;
    color: var(--kk-text-muted);
}

.kk-sitemap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kk-space-5) var(--kk-space-4);
}

@media (min-width: 768px) {
    .kk-sitemap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .kk-sitemap {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Places and blog lists run long: give them the full width, in columns. */
.kk-sitemap__group--wide {
    grid-column: 1 / -1;
}

.kk-sitemap__title {
    margin-bottom: var(--kk-space-3);
    padding-bottom: .5rem;
    font-size: var(--kk-text-18);
    border-bottom: 1px solid var(--kk-border);
}

.kk-sitemap__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kk-sitemap__list li+li {
    margin-top: .625rem;
}

.kk-sitemap__list--columns {
    columns: 2;
    column-gap: var(--kk-space-4);
}

@media (min-width: 992px) {
    .kk-sitemap__list--columns {
        columns: 4;
    }
}

.kk-sitemap__more {
    margin: var(--kk-space-3) 0 0;
    font-size: var(--kk-text-14);
}

.kk-sitemap__more a {
    font-weight: 600;
}

.kk-sitemap__count {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: var(--kk-space-5);
    padding-top: var(--kk-space-4);
    color: var(--kk-text-muted);
    border-top: 1px solid var(--kk-border);
}

.kk-sitemap__count .kk-icon {
    color: var(--kk-primary);
}

/* A finished listing: the price line becomes the outcome. */
.kk-listing__outcome {
    margin-bottom: .5rem;
    font-family: var(--kk-font-heading);
    font-size: var(--kk-text-24);
    font-weight: 800;
    color: var(--kk-gray-900);
}

.kk-listing--outcome .kk-listing__media img {
    filter: saturate(.75);
}

@media (prefers-reduced-motion: reduce) {

    .kk-post-card:hover,
    .kk-post-card:hover .kk-post-card__media img {
        transform: none;
    }
}