/* ==========================================================================
   Kuringen Park — New design system (global header/footer + instapkans page)
   Scoped under .site-header, .site-footer and .wb to avoid clashing with the
   legacy theme styles.
   ========================================================================== */

:root {
    --kp-green: #1c3a23;
    --kp-green-text: #233330;
    --kp-beige: #e9ebe5;
    --kp-accent: #aebe91;
    --kp-white: #fff;
    --kp-muted: #6c757d;
    --kp-border: rgba(211, 211, 211, 0.4);
    --kp-serif: "Inria Serif", Georgia, "Times New Roman", serif;
    --kp-sans: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --kp-shell: clamp(20px, 7.5vw, 120px); /* horizontal page gutter */
    --kp-section-y: clamp(56px, 8vw, 120px);
    --kp-radius-pill: 35px;
    --kp-header-h: 92px; /* sticky header height, used to overlay the hero */
}

/* --------------------------------------------------------------------------
   Shared layout helpers
   -------------------------------------------------------------------------- */
/* The legacy `body { overflow-x: hidden }` mutates overflow-y to `auto`, turning
   <body> into a scroll container and breaking the sticky header. `clip` keeps
   overflow-y visible (so <html> stays the scroller) while still preventing any
   horizontal overflow. Leave <html> untouched so page scrolling keeps working.
   `body.is-menu` matches the legacy mobile rule's specificity so the sticky
   header keeps working on mobile too. */
body,
body.is-menu {
    overflow-x: clip;
}

.wb,
.site-header,
.site-footer {
    box-sizing: border-box;
}

.wb *,
.site-header *,
.site-footer * {
    box-sizing: inherit;
}

.wb-shell {
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: var(--kp-shell);
}

/* Forms */
form:not(:first-child),
.hbspt-form:not(:first-child) {
    margin-top: 2.5rem;
}
form label,
form .gfield_label {
    font-family: var(--kp-serif) !important;
    font-weight: 700;
}

input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    width: 100%;
    padding: 6px 14px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: transparent;
    font-family: var(--kp-sans);
    font-size: 1rem;
}

.inputs-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}

.inputs-list > li {
    margin: 0;
}

.inputs-list label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
}

.inputs-list input[type="checkbox"],
.inputs-list input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--kp-green);
    flex-shrink: 0;
}

fieldset {
    max-width: 100%;
    width: 100%;
}

.hbspt-form form fieldset + fieldset {
    margin-top: 1rem;
    display: block;
}

.hs_recaptcha {
    margin-top: 1rem;
}

form .actions {
    margin-top: 2rem;

    [type="submit"] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5em;
        padding: 12px 24px;
        border: 1px solid transparent;
        border-radius: var(--kp-radius-pill);
        font-family: var(--kp-serif);
        font-size: clamp(15px, 1.4vw, 17.6px);
        line-height: 1.2;
        text-decoration: none;
        cursor: pointer;
        transition:
            background-color 0.25s ease,
            color 0.25s ease,
            border-color 0.25s ease,
            transform 0.25s ease;

        background: var(--kp-green);
        color: var(--kp-white);
    }
}

.card-main {
    background-color: var(--kp-green);
    padding: clamp(1.25rem, 3vw, 2rem);
    color: var(--kp-white);
}

.card-accent {
    background-color: var(--kp-accent);
    padding: clamp(1.25rem, 3vw, 2rem);
}

/* --------------------------------------------------------------------------
   Form theming on a dark band — white labels, ghost inputs, light pill submit.
   Scoped to .kp-bg-dark so any dark section's form is themed the same way and
   is easy to tweak in one place.
   -------------------------------------------------------------------------- */
.kp-bg-dark label,
.kp-bg-dark .gfield_label {
    color: var(--kp-white) !important; /* beat Gravity Forms' framework label colour */
    font-family: var(--kp-sans);
    font-weight: 500;
    font-size: 14px;
}

.kp-bg-dark input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.kp-bg-dark textarea,
.kp-bg-dark select {
    color: var(--kp-white);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.kp-bg-dark input::placeholder,
.kp-bg-dark textarea::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.kp-bg-dark input:focus,
.kp-bg-dark textarea:focus {
    outline: none;
    border-color: var(--kp-accent);
}

/* Gravity Forms ships a high-specificity framework button style and the legacy
      theme hard-codes #gform_submit_button_1, so !important is needed to re-theme. */
.kp-bg-dark .gform_button,
.kp-bg-dark button[type="submit"],
.kp-bg-dark input[type="submit"] {
    margin-top: 4px;
    padding: 12px 28px !important;
    border: 0 !important;
    border-radius: var(--kp-radius-pill) !important;
    background: var(--kp-beige) !important;
    color: var(--kp-green) !important;
    font-family: var(--kp-serif);
    font-size: 17px;
    cursor: pointer;
    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}

.kp-bg-dark .gform_button:hover,
.kp-bg-dark button[type="submit"]:hover,
.kp-bg-dark input[type="submit"]:hover {
    background: #fff !important;
    transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.wb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: var(--kp-radius-pill);
    font-family: var(--kp-serif);
    font-size: clamp(15px, 1.4vw, 17.6px);
    width: fit-content;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.wb-btn:hover {
    transform: translateY(-1px);
}

.wb-btn--dark {
    background: var(--kp-green);
    color: var(--kp-white);
}

.wb-btn--dark:hover {
    background: #15301c;
    color: var(--kp-white);
}

.wb-btn--light {
    background: var(--kp-beige);
    color: var(--kp-green);
}

.wb-btn--light:hover {
    background: #fff;
    color: var(--kp-green);
}

/* ==========================================================================
   GLOBAL HEADER
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    /* Overlay the hero (and first section) without taking up layout space. */
    margin-bottom: calc(-1 * var(--kp-header-h));
    font-family: var(--kp-sans);
    transition:
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-block: 18px;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    color: var(--kp-white);
}

.site-logo img {
    display: block;
    height: 56px;
    width: auto;
}

.site-logo .site-logo__green {
    display: none;
}

/* Primary nav */
.site-nav {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.2vw, 32px);
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.2vw, 32px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__list a {
    color: var(--kp-green-text);
    font-size: 17.6px;
    font-weight: 300;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.site-nav__list a:hover {
    opacity: 0.65;
}

.site-nav__list .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    margin-left: 7px;
    width: 0.55em;
    height: 0.55em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

/* Dropdown submenu */
.site-nav__list .sub-menu {
    position: absolute;
    margin: 12px 0 0;
    padding: 12px 0;
    list-style: none;
    background: var(--kp-white);
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s;
    z-index: 5;
}

.site-nav__list li {
    position: relative;
}

.site-nav__list li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.site-nav__list .sub-menu a {
    display: block;
    padding: 8px 20px;
    color: var(--kp-green-text);
    white-space: nowrap;
}

.site-header__cta {
    flex-shrink: 0;
}

body:has(main > .kp-bg-dark:first-child) .site-header__cta {
    background: var(--kp-white);
    color: var(--kp-green);
}

/* Over a dark hero (and before the header turns solid on scroll) the nav links
   need to be light. Scoped to pages that actually have a hero, and to desktop
   only — the mobile slide-in panel has a light background and keeps dark links. */
@media (min-width: 769px) {
    body:has(.home-hero) .site-header:not(.is-solid) .site-nav__list > li > a,
    body:has(.wb-hero) .site-header:not(.is-solid) .site-nav__list > li > a,
    body:has(.brochure-page) .site-header:not(.is-solid) .site-nav__list > li > a,
    body:has(.appointment-page) .site-header:not(.is-solid) .site-nav__list > li > a,
    body:has(.contact-page) .site-header:not(.is-solid) .site-nav__list > li > a {
        color: var(--kp-white);
    }
}

/* Hamburger */
.site-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.site-burger span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--kp-white);
    transition:
        transform 0.3s ease,
        opacity 0.3s ease,
        background-color 0.3s ease;
}

/* Scrolled / solid state for legibility over non-hero pages */
.site-header.is-solid {
    background: var(--kp-beige);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.site-header.is-solid .site-logo__white {
    display: none;
}

.site-header.is-solid .site-logo__green {
    display: block;
}

.site-header.is-solid .site-burger span {
    background: var(--kp-green);
}

/* ==========================================================================
   GLOBAL FOOTER
   ========================================================================== */
.site-footer {
    background: var(--kp-white);
    color: var(--kp-green-text);
    font-family: var(--kp-sans);
    padding-block: clamp(40px, 6vw, 72px);
}

.site-footer__top {
    border-top: 1px solid rgba(28, 58, 35, 0.2);
    padding-top: clamp(32px, 5vw, 64px);
    display: grid;
    grid-template-columns: minmax(160px, 220px) repeat(3, 1fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
}

.site-footer .site-logo {
    color: var(--kp-green);
}

.site-footer .site-logo img {
    height: 60px;
}

.site-footer .site-logo__white {
    display: none;
}

.site-footer .site-logo__green {
    display: block;
}

.site-footer__col h2 {
    margin: 0 0 24px;
    font-family: var(--kp-serif);
    font-weight: 700;
    font-size: 18px;
    text-transform: none;
    color: var(--kp-green);
}

.site-footer__groups {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.site-footer__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 300;
    font-size: 17px;
}

.site-footer__list a {
    display: inline;
    color: var(--kp-green-text);
    line-height: 1.6;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.site-footer__list a:hover {
    opacity: 0.65;
}

.site-footer__bottom {
    margin-top: clamp(28px, 4vw, 48px);
    padding-top: 20px;
    border-top: 1px solid rgba(28, 58, 35, 0.12);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: var(--kp-muted);
}

.site-footer__bottom a {
    color: var(--kp-muted);
    text-decoration: underline;
}

/* ==========================================================================
   instapkans LANDING PAGE
   ========================================================================== */
.wb {
    font-family: var(--kp-sans);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.5;
    color: var(--kp-green-text);
    overflow-x: clip;
}

.wb p {
    margin: 0 0 1em;
}

.wb p:last-child {
    margin-bottom: 0;
}

.wb h1,
.wb h2,
.wb h3 {
    font-family: var(--kp-serif);
    font-weight: 400;
    text-transform: none;
    margin: 0;
    line-height: 1.25;
    color: inherit;
}

.wb__title {
    font-size: clamp(32px, 4.6vw, 55px);
}

.wb__subtitle {
    font-size: clamp(26px, 3.4vw, 45px);
}

.wb__lead {
    max-width: 575px;
    font-size: 17px;
    line-height: 1.5;
}

.wb-section {
    padding-block: var(--kp-section-y);
}

.wb-section--flush-top {
    padding-top: 0;
}

/* ---- Hero ---- */
.wb-hero {
    position: relative;
    display: flex;
    min-height: clamp(560px, 80vh, 760px);
    background: var(--kp-green);
    color: var(--kp-white);
    isolation: isolate;
    overflow: hidden;
}

/* Image bleeds to the right screen edge; the seam keeps the ~51/49 split. */
.wb-hero__media {
    position: absolute;
    inset-block: 0;
    inset-inline: 51.25% 0;
    z-index: 0;
}

.wb-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Content rides on .wb-shell so it lines up with the rest of the page.
   The inner grid keeps the text in the green half, clear of the image. */
.wb-hero__shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 51.25% 48.75%;
    align-items: center;
    padding-block: clamp(120px, 16vh, 180px) clamp(48px, 8vh, 80px);
}

.wb-hero__leaf {
    position: absolute;
    left: -4%;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(200px, 48%, 380px);
    z-index: 0;
    opacity: 0.08;
    filter: brightness(0) invert(1);
    pointer-events: none;
}

.wb-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 670px;
    padding-inline-end: clamp(16px, 2vw, 40px);
}

.wb-hero__title {
    font-size: clamp(38px, 5.4vw, 70px);
}

.wb-hero__text {
    max-width: 575px;
}

/* ---- Generic intro header (title + lead) ---- */
.wb-heading {
    display: flex;
    flex-direction: column;
    gap: 19px;
    margin-bottom: 64px;
}

.wb-heading--flush {
    margin-bottom: 0;
}

/* ---- Why / USP columns ---- */
.wb-usps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(32px, 4vw, 64px);
}

.wb-usp {
    display: flex;
    flex-direction: column;
    gap: 24px;
    color: var(--kp-green);
}

.wb-usp__icon {
    width: 58px;
    height: 60px;
}

.wb-usp__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wb-usp h3 {
    font-size: clamp(20px, 2vw, 24px);
}

.wb-usp p {
    font-size: 17px;
}

/* ---- Quote block ---- */
.wb-quote {
    background: var(--kp-green);
    color: var(--kp-white);
    padding: clamp(32px, 5vw, 64px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 7vw, 120px);
    align-items: center;
}

.wb-quote__body {
    display: flex;
    gap: 32px;
}

.wb-quote__rule {
    flex-shrink: 0;
    width: 2px;
    align-self: stretch;
    background: var(--kp-beige);
    border-radius: 999px;
}

.wb-quote__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.wb-quote__mark {
    font-family: var(--kp-serif);
    padding-top: 0.25em;
    font-size: 160px;
    line-height: 0.2;
    color: var(--kp-beige);
}

.wb-quote__text {
    font-family: var(--kp-serif);
    font-size: clamp(19px, 2vw, 24px);
    line-height: 1.3;
}

.wb-quote__author {
    color: var(--kp-beige);
    font-size: 17px;
}

.wb-quote__side h2 {
    margin-bottom: 12px;
}

/* ---- Form section ---- */
.wb-form-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 4vw, 64px);
    align-items: stretch;
}

.wb-form-section__media {
    min-height: 320px;
    border-radius: 2px;
    overflow: hidden;
}

.wb-form-section__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wb-form-section__body {
    color: var(--kp-green);
}

/* ---- Highlight (full-bleed image + card) ---- */
.wb-highlight {
    position: relative;
    display: flex;
    align-items: flex-end; /* card sits at the bottom of the section */
    min-height: clamp(560px, 82vh, 880px);
    /* White-space below the card; the image fills everything above it. */
    margin-block-end: clamp(48px, 11vw, 10rem);
    isolation: isolate;
    overflow-x: clip;
}

.wb-highlight__shell {
    /* .wb-shell keeps the card's left edge aligned to the page container. */
    width: 100%;
}

.wb-highlight__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.wb-highlight__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wb-highlight__card {
    background: var(--kp-beige);
    color: var(--kp-green-text);
    padding: clamp(32px, 4vw, 64px);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    /* Bleed past the shell's right gutter out to the viewport edge. */
    margin-right: calc(50% - 50vw);
    transform: translateY(20%);
}

.wb-highlight__text {
    flex: 1 1 420px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wb-highlight__text h2 {
    color: #000;
}

/* ---- Location (dark, numbered list) ---- */
.wb-location {
    background: var(--kp-green);
    color: var(--kp-white);
}

.wb-location__grid {
    display: grid;
    grid-template-columns: minmax(0, 575px) minmax(0, 445px);
    gap: clamp(40px, 8vw, 222px);
    justify-content: space-between;
}

.wb-location__intro {
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.wb-location__items {
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 4vw, 64px);
}

.wb-step {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.wb-step__num {
    flex-shrink: 0;
    font-family: var(--kp-serif);
    font-size: 40px;
    line-height: 1;
    color: var(--kp-beige);
    min-width: 47px;
}

.wb-step__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wb-step__body h3 {
    font-size: clamp(20px, 2vw, 24px);
}

/* ---- Terms (checklist + image) ---- */
.wb-terms {
    display: grid;
    grid-template-columns: minmax(0, 575px) 1fr;
    gap: clamp(40px, 8vw, 120px);
    align-items: start;
}

.wb-terms__list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 64px;
}

.wb-term {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    color: var(--kp-green);
}

.wb-term__icon {
    flex-shrink: 0;
    width: 33px;
    height: 34px;
}

.wb-term__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wb-term__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wb-term__body h3 {
    font-family: var(--kp-serif);
    font-weight: 700;
    font-size: 18px;
}

.wb-terms__media {
    align-self: stretch;
    min-height: 0;
    border-radius: 2px;
    overflow: hidden;
    contain: size;
}

.wb-terms__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Final CTA ---- */
.wb-cta {
    padding-bottom: clamp(56px, 8vw, 120px);
}

.wb-cta__inner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--kp-green);
    color: var(--kp-white);
    padding: clamp(32px, 5vw, 64px);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
}

.wb-cta__leaf {
    position: absolute;
    right: -4%;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(260px, 34%, 540px);
    z-index: -1;
    opacity: 0.25;
    filter: brightness(0) invert(1);
    pointer-events: none;
}

.wb-cta__text {
    flex: 1 1 480px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wb-cta__text h2 {
    max-width: 717px;
}

/* ==========================================================================s
   Shares the design tokens, .wb-shell container and .wb-btn pills with the
   rest of the new design. Scoped under .home.
   ========================================================================== */
.home,
.aanbod-page,
.brochure-page,
.appointment-page,
.contact-page {
    font-family: var(--kp-sans);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.5;
    color: var(--kp-green-text);
    overflow-x: clip;
}

p {
    margin: 0 0 1em;
}

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

h1,
h2,
h3 {
    font-family: var(--kp-serif);
    font-weight: 400;
    text-transform: none;
    line-height: 1.25;
    color: inherit;
}

main.home ul,
main.aanbod-page ul {
    margin: 0 0 1em;
    padding-left: 1.1em;
}

main.home li,
main.aanbod-page li {
    margin-bottom: 4px;
}

.home__title {
    font-size: clamp(32px, 4.6vw, 55px);
}

.home__lead {
    max-width: 575px;
}

.home-section,
.kp-section {
    padding-block: var(--kp-section-y);
}

.home-section--flush-bottom {
    padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   Background utilities — full-width section colour bands. Pair with .kp-section
   for vertical rhythm. .kp-bg-dark flips text/headings to white so forms and
   copy on a dark band can be themed via the .kp-bg-dark scope.
   -------------------------------------------------------------------------- */
.kp-bg-beige {
    background: var(--kp-beige);
}

.kp-bg-dark {
    background: var(--kp-green);
    color: var(--kp-white);
}

.kp-bg-dark:first-child {
    padding-top: calc(var(--kp-section-y) * 1.5);
}

.kp-bg-dark h1,
.kp-bg-dark h2,
.kp-bg-dark h3 {
    color: var(--kp-white);
}

.home-heading {
    display: flex;
    flex-direction: column;
    gap: 19px;
    margin-bottom: clamp(32px, 4vw, 64px);
}

/* WYSIWYG buttons (legacy field markup) restyled as design pills. */
:is(.home, .aanbod-page) .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    margin-top: 8px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: var(--kp-radius-pill);
    font-family: var(--kp-serif);
    font-size: clamp(15px, 1.4vw, 17.6px);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

:is(.home, .aanbod-page) .btn:hover {
    transform: translateY(-1px);
}

:is(.home, .aanbod-page) .btn.green-bg {
    background: var(--kp-green);
    color: var(--kp-white);
}

:is(.home, .aanbod-page) .btn.green-bg:hover {
    background: #15301c;
}

:is(.home, .aanbod-page) .btn.white-bg {
    background: var(--kp-beige);
    color: var(--kp-green);
}

:is(.home, .aanbod-page) .btn.white-bg:hover {
    background: #fff;
}

/* ---- Hero ---- */
.home-hero {
    position: relative;
    display: flex;
    min-height: clamp(560px, 80vh, 715px);
    background: var(--kp-green);
    color: var(--kp-white);
    isolation: isolate;
    overflow: hidden;
}

.home-hero__media {
    position: absolute;
    inset-block: 0;
    inset-inline: 42.5% 0;
    z-index: 3;
}

.home-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-hero__shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 42.5% 57.5%;
    align-items: end;
    padding-block: clamp(120px, 16vh, 180px) clamp(48px, 8vh, 80px);
}

.home-hero__leaf {
    position: absolute;
    left: 2%;
    bottom: 0;
    width: clamp(200px, 48%, 560px);
    z-index: 0;
    opacity: 0.08;
    filter: brightness(0) invert(1);
    pointer-events: none;
}

.home-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 540px;
    padding-inline-end: clamp(16px, 2vw, 40px);
}

.home-hero__inner h1 {
    font-size: clamp(38px, 5.4vw, 70px);
    white-space: pre-line;
    margin-bottom: 32px;
}

.home-hero__inner .btn {
    margin-top: 0;
}

/* Sales badge on the hero image */
.kp-badge {
    position: absolute;
    right: clamp(20px, 5vw, 64px);
    bottom: clamp(24px, 6vh, 72px);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: clamp(130px, 14vw, 190px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--kp-accent);
    color: var(--kp-green);
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--kp-serif);
    letter-spacing: 0.05em;
    transform: rotate(15deg);
}

.kp-badge__line {
    font-size: clamp(13px, 1.3vw, 16px);
}

.kp-badge__num {
    font-size: clamp(34px, 4vw, 52px);
    letter-spacing: 0;
    line-height: 1;
}

/* ---- Intro ---- */
.home-intro h2 {
    font-size: clamp(32px, 4.6vw, 55px);
    margin-bottom: 19px;
}

.home-intro p {
    max-width: 724px;
}

/* ---- Aanbod card ---- */
.home-aanbod {
    margin-top: 3rem;
    background: var(--kp-beige);
    padding: clamp(28px, 4vw, 64px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
}

.home-aanbod__body {
    color: var(--kp-green-text);
}

.home-aanbod__body h2 {
    font-size: clamp(26px, 3vw, 36px);
    margin-bottom: 16px;
}

.home-aanbod__body ul {
    list-style: none;
    padding-left: 0;
    margin: 1.25em 0;
}

.home-aanbod__body li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
}

.home-aanbod__body li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--kp-green);
}

.home-aanbod__body span.price {
    display: inline-block;
    margin-top: 0.25em;
    font-family: var(--kp-serif);
    font-weight: 400;
    font-size: clamp(20px, 2vw, 28px);
    color: var(--kp-green);
}

.home-aanbod__media {
    align-self: stretch;
    min-height: 320px;
    border-radius: 2px;
    overflow: hidden;
}

.home-aanbod__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Split (image + copy) ---- */
.home-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}

.home-split__media {
    border-radius: 2px;
    overflow: hidden;
    min-height: 320px;
}

.home-split__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-split__body h2 {
    font-size: clamp(26px, 3.4vw, 45px);
    margin-bottom: 19px;
}

/* video play overlay */
.home-video {
    position: relative;
    display: block;
    height: 100%;
}

.home-video__btn {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(28, 58, 35, 0.85);
    color: #fff;
    font-size: 22px;
    transition:
        transform 0.25s ease,
        background-color 0.25s ease;
}

.home-video:hover .home-video__btn {
    transform: scale(1.08);
    background: var(--kp-green);
}

/* ---- Ligging (green band) ---- */
.home-ligging {
    background: var(--kp-green);
    color: var(--kp-white);
    padding-block: var(--kp-section-y);
}

.home-ligging__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
}

.home-ligging__media {
    border-radius: 2px;
    overflow: hidden;
}

.home-ligging__media img {
    width: 100%;
    height: auto;
    display: block;
}

.home-ligging h2 {
    font-size: clamp(28px, 3.4vw, 45px);
    margin-bottom: 19px;
}

/* ---- FAQ ---- */
.home-faq__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 120px);
    align-items: start;
}

.home-faq__list {
    display: flex;
    flex-direction: column;
}

.home-faq__item {
    border-bottom: 1px solid var(--kp-border);
}

.home-faq__item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 0;
    font-size: 17px;
    font-weight: 400;
}

.home-faq__item summary::-webkit-details-marker {
    display: none;
}

.home-faq__item summary::after {
    content: "+";
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--kp-green);
    transition: transform 0.2s ease;
}

.home-faq__item[open] summary::after {
    content: "\2013"; /* en-dash */
}

.home-faq__answer {
    padding: 0 0 18px;
    font-size: 16px;
}

.home-faq__media {
    border-radius: 2px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
}

.home-faq__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- News ---- */

.home-news {
    background: var(--kp-beige);
    overflow-x: clip;
}
.home-news__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    margin-bottom: clamp(32px, 4vw, 56px);
}

.home-news .swiper {
    overflow: visible;
}

.home-news__leaf {
    width: clamp(180px, 24vw, 320px);
    height: auto;
}

.home-news__nav {
    margin-top: 2rem;
    display: flex;
    justify-content: end;
    gap: 12px;
}

.home-news__arrow {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--kp-green);
    background: transparent;
    color: var(--kp-green);
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.home-news__arrow:hover {
    background: var(--kp-green);
    color: #fff;
}

.home-card {
    display: flex;
    flex-direction: column;
    height: auto;
}

.home-card__media {
    display: block;
    border-radius: 2px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    margin-bottom: 20px;
}

.home-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.home-card__media:hover img {
    transform: scale(1.04);
}

.home-card__date {
    font-size: 14px;
    color: var(--kp-muted);
    margin-bottom: 8px;
}

.home-card__title {
    font-size: clamp(19px, 2vw, 22px);
    margin-bottom: 12px;
}

.home-card__title a {
    color: inherit;
    text-decoration: none;
}

.home-card__intro {
    font-size: 15px;
    margin-bottom: 20px;
}

.home-card__cta {
    align-self: flex-start;
    margin-top: auto;
}

/* ---- Brochure CTA ---- */
.home-brochure {
    padding-top: calc(var(--kp-section-y) * 1.5);
}
.home-brochure__card {
    position: relative;
    background: var(--kp-green);
    color: var(--kp-white);
    padding: clamp(32px, 5vw, 64px);
    isolation: isolate;
}

.home-brochure__leaf {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translateY(20%);
    width: clamp(220px, 40%, 560px);
    z-index: -1;
    opacity: 0.12;
    filter: brightness(0) invert(1);
    pointer-events: none;
}

.home-brochure__body {
    max-width: 560px;
}

.home-brochure__body h2 {
    font-size: clamp(28px, 3.4vw, 40px);
    margin-bottom: 16px;
}

.home-brochure__media {
    position: absolute;
    height: 150%;
    right: clamp(24px, 6vw, 96px);
    bottom: 0;
    z-index: 1;
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.35));
}

.home-brochure__media img {
    height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}

/* ---- Contact ---- */
.home-contact__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 84px);
    align-items: start;
}

.home-contact__media {
    border-radius: 2px;
    overflow: hidden;
    align-self: stretch;
    min-height: 420px;
}

.home-contact__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-contact__form {
    margin-top: 8px;
}

.home-contact__form label,
.home-contact__form .gfield_label {
    font-family: var(--kp-sans);
    font-weight: 500;
    font-size: 14px;
    color: var(--kp-green-text);
}

.home-contact__form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.home-contact__form textarea,
.home-contact__form select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--kp-border);
    border-radius: 6px;
    background: #fff;
    font-family: var(--kp-sans);
    font-size: 16px;
    color: var(--kp-green-text);
}

.home-contact__form input:focus,
.home-contact__form textarea:focus {
    outline: none;
    border-color: var(--kp-accent);
}

/* !important: override Gravity Forms' framework button style + the legacy
   hard-coded #gform_submit_button_1 rule. */
.home-contact__form .gform_button,
.home-contact__form button[type="submit"],
.home-contact__form input[type="submit"] {
    margin-top: 4px;
    padding: 12px 28px !important;
    border: 0 !important;
    border-radius: var(--kp-radius-pill) !important;
    background: var(--kp-green) !important;
    color: #fff !important;
    font-family: var(--kp-serif);
    font-size: 17px;
    cursor: pointer;
    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}

.home-contact__form .gform_button:hover,
.home-contact__form button[type="submit"]:hover,
.home-contact__form input[type="submit"]:hover {
    background: #15301c !important;
    transform: translateY(-1px);
}

/* ==========================================================================
   HOMEPAGE — RESPONSIVE
   ========================================================================== */
@media (max-width: 992px) {
    .home-aanbod,
    .home-split,
    .home-ligging__grid,
    .home-faq__grid,
    .home-contact__grid {
        grid-template-columns: 1fr;
    }

    .home-split__media,
    .home-aanbod__media {
        order: -1;
    }

    .home-brochure__card {
        display: flex;
        flex-direction: column;
    }

    .home-brochure__body {
        max-width: none;
    }

    .home-brochure__media {
        order: -1;
        position: revert;
        width: 100%;
        max-width: 320px;
    }

    .home-contact__media {
        min-height: 320px;
    }
}

@media (max-width: 768px) {
    .home-hero {
        flex-direction: column;
        min-height: 0;
    }

    .home-hero__media {
        position: static;
        order: -1;
        width: 100%;
        height: 46vh;
        min-height: 280px;
    }

    .home-hero__shell {
        grid-template-columns: 1fr;
        padding-block: 48px 56px;
    }

    .home-hero__inner {
        max-width: none;
    }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 992px) {
    .wb-usps {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .wb-quote,
    .wb-form-section,
    .wb-terms,
    .wb-location__grid {
        grid-template-columns: 1fr;
    }

    .wb-form-section__media,
    .wb-terms__media {
        min-height: 280px;
        order: -1;
    }

    .site-footer__top {
        grid-template-columns: 1fr 1fr;
    }

    .site-footer .site-logo {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    /* Hero stacks: image on top, content on green below */
    .wb-hero {
        flex-direction: column;
        min-height: 0;
    }

    .wb-hero__media {
        position: static;
        order: -1;
        width: 100%;
        height: 42vh;
        min-height: 260px;
    }

    .wb-hero__shell {
        grid-template-columns: 1fr;
        padding-block: 48px 56px;
    }

    .wb-hero__inner {
        max-width: none;
    }

    .wb-hero__title {
        font-size: clamp(34px, 9vw, 48px);
    }

    .wb-form {
        grid-template-columns: 1fr;
    }

    /* Card keeps symmetric gutters on small screens instead of bleeding right. */
    .wb-highlight__card {
        margin-right: 0;
    }

    /* Header becomes a slide-in mobile menu */
    .site-burger {
        display: flex;
        position: relative;
        z-index: 60;
    }

    .site-nav {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(82vw, 360px);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
        padding: 96px 28px 40px;
        background: var(--kp-beige);
        /* box-shadow: -16px 0 50px rgba(0, 0, 0, 0.2); */
        transform: translateX(100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
    }

    .site-header.menu-open .site-nav {
        transform: translateX(0);
    }

    .site-nav__list {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        width: 100%;
    }

    .site-nav__list a {
        display: block;
        padding: 10px 0;
        color: var(--kp-green);
        font-size: 20px;
    }

    .site-nav__list .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: transparent;
        margin: 0 0 0 12px;
        padding: 0;
    }

    .site-header__cta {
        margin-top: 12px;
    }

    /* burger turns into an X when menu open */
    .site-header.menu-open .site-burger span {
        background: var(--kp-green);
    }

    .site-header.menu-open .site-burger span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .site-header.menu-open .site-burger span:nth-child(2) {
        opacity: 0;
    }

    .site-header.menu-open .site-burger span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

@media (max-width: 560px) {
    .site-footer__top {
        grid-template-columns: 1fr;
    }

    .wb-quote__side h2 br {
        display: none;
    }
}

/* ==========================================================================
   AANBOD PAGE
   Reuses the shared base (.aanbod scope), .wb-shell, .home-section, .kp-badge
   and the brochure CTA component.
   ========================================================================== */

/* Header sits over a bright photo here, so force the dark logo/burger while
   the header is transparent (it already swaps to solid on scroll). Nav links
   are dark by default, which reads fine over the sky. */
body:has(.aanbod-hero) .site-header:not(.is-solid) .site-logo__white {
    display: none;
}

body:has(.aanbod-hero) .site-header:not(.is-solid) .site-logo__green {
    display: block;
}

body:has(.aanbod-hero) .site-header:not(.is-solid) .site-burger span {
    background: var(--kp-green);
}

/* ---- Hero (full-bleed image + badge) ---- */
.aanbod-hero {
    position: relative;
    min-height: clamp(460px, 80vh, 715px);
    background: var(--kp-green);
    isolation: isolate;
    overflow: hidden;
}

.aanbod-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.aanbod-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Apartment types ---- */
/* Each type is its own full-width section (so alternating rows can carry a
   beige band); .aanbod-type is the .wb-shell grid inside it. */
.aanbod-type {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 104px);
}

.aanbod-type--image-left .aanbod-type__media {
    order: -1;
}

.aanbod-type__title {
    font-size: clamp(28px, 3.4vw, 45px);
    margin-bottom: 19px;
}

.aanbod-type__text {
    margin-bottom: 32px;
    max-width: 56ch;
}

.aanbod-page .aanbod-specs {
    list-style: none;
    padding-left: 0;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.aanbod-page .aanbod-spec {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.aanbod-spec__icon {
    flex-shrink: 0;
    width: 22px;
    text-align: center;
    color: var(--kp-accent);
    font-size: 18px;
    line-height: 1;
}

.aanbod-spec__text {
    font-size: 17px;
    font-family: var(--kp-serif);
    font-weight: 700;
}

.aanbod-type .bottom-wrap {
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    flex-wrap: wrap;
}

.aanbod-type__price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
}

.aanbod-type__amount {
    font-family: var(--kp-serif);
    font-weight: 700;
    color: var(--kp-green);
}

.aanbod-type__amount > .price {
    font-size: clamp(22px, 2.4vw, 28px);
}
.aanbod-type__note {
    font-size: 14px;
    font-style: italic;
    color: var(--kp-muted);
}

.aanbod-type__media {
    border-radius: 2px;
    overflow: hidden;
    height: 100%;
    position: relative;
}

.aanbod-type__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (min-width: 992px) {
    .aanbod-type__media img {
        position: absolute;
        inset: 0;
    }
}

/* ---- Duurzaamheid (image + overlapping card) — mirrors .wb-highlight ---- */
.aanbod-duurzaamheid {
    position: relative;
    display: flex;
    align-items: flex-end; /* card sits at the bottom of the section */
    min-height: clamp(560px, 89vh, 1000px);
    /* White-space below the card; the image fills everything above it. */
    margin-block-end: clamp(100px, 15vw, 14rem);
    isolation: isolate;
    overflow-x: clip;
}

.aanbod-duurzaamheid__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.aanbod-duurzaamheid__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aanbod-duurzaamheid__shell {
    /* .wb-shell keeps the card's left edge aligned to the page container. */
    width: 100%;
}

.aanbod-duurzaamheid__card {
    background: var(--kp-beige);
    color: var(--kp-green-text);
    padding: clamp(32px, 4vw, 64px);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    /* Bleed past the shell's right gutter out to the viewport edge. */
    margin-right: calc(50% - 50vw);
    transform: translateY(48%);
}

.aanbod-duurzaamheid__text {
    flex: 1 1 480px;
}

.aanbod-duurzaamheid__card h2 {
    font-size: clamp(26px, 3.2vw, 42px);
    margin-bottom: 16px;
}

/* ---- Contact (layout only; colours come from .kp-bg-dark) ---- */
.aanbod-contact {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.aanbod-contact__leaf {
    position: absolute;
    left: -3%;
    bottom: 0;
    width: clamp(220px, 34%, 470px);
    opacity: 0.08;
    filter: brightness(0) invert(1);
    z-index: -1;
    pointer-events: none;
}

.aanbod-contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: clamp(40px, 5vw, 96px);
    align-items: start;
}

/* ---- Aanbod responsive ---- */
@media (max-width: 992px) {
    .aanbod-type,
    .aanbod-contact__grid {
        grid-template-columns: 1fr;
    }

    .aanbod-type__media,
    .aanbod-type--image-left .aanbod-type__media {
        order: -1;
    }
}

@media (max-width: 768px) {
    /* Stack image above the card on small screens — more robust for the longer
       copy than overlaying it. */
    .aanbod-duurzaamheid {
        display: block;
        min-height: 0;
        margin-block-end: var(--kp-section-y);
    }

    .aanbod-duurzaamheid__bg {
        position: static;
        height: 56vw;
        min-height: 240px;
    }

    .aanbod-duurzaamheid__card {
        transform: none;
        margin-top: 32px;
        margin-right: 0;
    }
}

/* ==========================================================================
   BROCHURE PAGE
   One dark band (.kp-bg-dark provides bg + form theming): copy + form left,
   brochure mock-up over a leaf watermark right.
   ========================================================================== */
.brochure-page__section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.brochure-page__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
}

.brochure-page__title {
    font-size: clamp(32px, 4.6vw, 55px);
    margin-bottom: 16px;
}

.brochure-page__intro {
    margin-bottom: 2.5rem;
}

.brochure-page__lead {
    max-width: 480px;
    margin-bottom: clamp(28px, 4vw, 48px);
}

.brochure-page__form {
    max-width: 660px;
}

.brochure-page__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
}

.brochure-page__leaf {
    position: absolute;
    right: 0;
    bottom: 0;
    width: clamp(320px, 90%, 640px);
    opacity: 0.08;
    filter: brightness(0) invert(1);
    z-index: -1;
    pointer-events: none;
}

.brochure-page__mockup {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    height: auto;
    display: block;
    filter: drop-shadow(0 30px 55px rgba(0, 0, 0, 0.4));
}

@media (max-width: 992px) {
    .brochure-page__grid {
        grid-template-columns: 1fr;
    }

    .brochure-page__media {
        order: -1;
        min-height: 0;
    }
}

/* ==========================================================================
   APPOINTMENT PAGE
   Split band (mirrors the home hero): green panel + form on the left, a
   full-height image bleeding to the right edge. .kp-bg-dark provides the green
   background, white text and the dark-band form theming.
   ========================================================================== */
.appointment-page__section {
    position: relative;
    display: flex;
    min-height: clamp(620px, 86vh, 880px);
    isolation: isolate;
    overflow: hidden;
}

.appointment-page__media {
    position: absolute;
    inset-block: 0;
    inset-inline: 57.4% 0; /* image fills the right ~43% */
    z-index: 0;
    margin-top: 120px;
}

.appointment-page__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.appointment-page__shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 57.4% 42.6%;
    align-items: center;
    /* Top padding clears the overlaying sticky header. */
    padding-block: clamp(120px, 16vh, 180px) clamp(48px, 8vh, 80px);
}

.appointment-page__content {
    max-width: 640px;
    padding-inline-end: clamp(24px, 4vw, 64px);
}

.appointment-page__title {
    font-size: clamp(32px, 4.6vw, 55px);
    margin-bottom: 16px;
}

.appointment-page__lead {
    max-width: 480px;
    margin-bottom: clamp(24px, 3vw, 40px);
}

@media (max-width: 768px) {
    .appointment-page__section {
        flex-direction: column;
        min-height: 0;
    }

    .appointment-page__media {
        position: static;
        order: -1;
        width: 100%;
        height: 42vh;
        min-height: 260px;
    }

    .appointment-page__shell {
        grid-template-columns: 1fr;
        padding-block: 48px 56px;
    }

    .appointment-page__content {
        max-width: none;
        padding-inline-end: 0;
    }
}

/* Keep the HubSpot form iframe within its column (it otherwise forces a fixed
   width and overflows on small screens). Internal form styling is managed in
   HubSpot. */
.appointment-page__form iframe.hs-form-iframe,
.appointment-page__form iframe {
    width: 100% !important;
    max-width: 100%;
}

/* HubSpot renders the consent/fine-print as <legend class="hs-field-desc">, which
   Bootstrap's reboot inflates via `legend { font-size: calc(1.275rem + .3vw) }`.
   Reset it to small print. */
.hs-field-desc {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
}

/* ==========================================================================
   contact PAGE
   Split band (mirrors the home hero): green panel + form on the left, a
   full-height image bleeding to the right edge. .kp-bg-dark provides the green
   background, white text and the dark-band form theming.
   ========================================================================== */
.contact-page__section {
    position: relative;
    display: flex;
    min-height: clamp(620px, 86vh, 880px);
    isolation: isolate;
    overflow: hidden;
}

.contact-page__media {
    position: absolute;
    inset-block: 0;
    inset-inline: 57.4% 0; /* image fills the right ~43% */
    z-index: 0;
    margin-top: 120px;
}

.contact-page__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.contact-page__shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 57.4% 42.6%;
    align-items: center;
    /* Top padding clears the overlaying sticky header. */
    padding-block: clamp(120px, 16vh, 180px) clamp(48px, 8vh, 80px);
}

.contact-page__content {
    max-width: 640px;
    padding-inline-end: clamp(24px, 4vw, 64px);
}

.contact-page__title {
    font-size: clamp(32px, 4.6vw, 55px);
    margin-bottom: 16px;
}

.contact-page__lead {
    max-width: 480px;
    margin-bottom: clamp(24px, 3vw, 40px);
}

@media (max-width: 768px) {
    .contact-page__section {
        flex-direction: column;
        min-height: 0;
    }

    .contact-page__media {
        position: static;
        order: -1;
        width: 100%;
        height: 42vh;
        min-height: 260px;
    }

    .contact-page__shell {
        grid-template-columns: 1fr;
        padding-block: 48px 56px;
    }

    .contact-page__content {
        max-width: none;
        padding-inline-end: 0;
    }
}