/* ==========================================================================
   Verduurzaamwijs — site header
   Self-contained: declares the brand tokens it needs so it also works on
   pages that do not load the Elementor design system.
   ========================================================================== */

:root {
    --pdsh-purple: #6A248C;
    --pdsh-purple-dark: #4E1A68;
    --pdsh-purple-wash: #F3EAF7;
    --pdsh-orange: #FF7F0D;
    --pdsh-ink: #17092A;
    --pdsh-body: #554C60;
    --pdsh-muted: #857C8E;
    --pdsh-line: #E6DFE9;
    --pdsh-bone: #FFF4EA;
    --pdsh-h: 78px;
    --pdsh-top-h: 40px;
    /* Full height of the header — top strip plus bar. The hero reserves this
       much padding so its background can run underneath. */
    --pdsh-header-h: calc(var(--pdsh-top-h) + var(--pdsh-h));
    /* Same content column as the page shell (--pds-max / --pds-gutter in
       pds-core.css): 1400px of content with the gutter outside it, so the logo
       and the hero heading start on exactly the same line. Mirrored here so the
       header keeps its column on pages without the Elementor design system. */
    --pdsh-gutter: clamp(1.25rem, 5vw, 5.5rem);
    --pdsh-max: 1400px;
    --pdsh-shell: calc(var(--pdsh-max) + (var(--pdsh-gutter) * 2));
    --pdsh-display: "SUSE", "DM Sans", system-ui, sans-serif;
    --pdsh-text: "DM Sans", system-ui, sans-serif;
    --pdsh-ease: cubic-bezier(.22, .61, .36, 1);
    --pdsh-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Skip link */
.pds-skip {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -140%);
    z-index: 999;
    padding: .875rem 1.5rem;
    border-radius: 0 0 12px 12px;
    background: var(--pdsh-ink);
    color: #fff;
    font-family: var(--pdsh-text);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform .25s var(--pdsh-ease);
}

.pds-skip:focus {
    transform: translate(-50%, 0);
    outline: 3px solid var(--pdsh-orange);
    outline-offset: 2px;
}

/* ==========================================================================
   Bar
   ========================================================================== */

/* The header scrolls away with the page — it is deliberately NOT sticky.
   Persistent access to phone and CTA is handled by the global sticky footer
   bar (see sticky-cta.css), which appears once the hero is behind you.
   `position: relative` is kept so the mega menu still uses the header as its
   containing block. */
.pds-header {
    position: relative;
    z-index: 90;
    width: 100%;
    background: #fff;
}

/* On a page that opens with the hero the header has no ground of its own: it
   is lifted out of the flow so the hero starts at the very top of the page and
   its gradient — and the sky drawn on top of it — carries on straight through
   the bar and the top strip. The hero reserves --pdsh-header-h of padding for
   this (see pds-hero.css). Other pages keep the solid white header. */
body:has(.pds-hero) .pds-header {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    background: transparent;
}

/* The one seam that would give it away: the top strip's divider. */
body:has(.pds-hero) .pds-header__top-sep {
    background: rgba(23, 9, 42, .14);
}

.pds-header *,
.pds-mobile * {
    box-sizing: border-box;
}

.pds-header__bar {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.75rem);
    width: 100%;
    max-width: var(--pdsh-shell);
    min-height: var(--pdsh-h);
    margin-inline: auto;
    padding-inline: var(--pdsh-gutter);
}

/* ==========================================================================
   Top bar — USP's, Google reviews and contact details
   ========================================================================== */

.pds-header__top {
    height: var(--pdsh-top-h);
    overflow: hidden;
    background: transparent;
    color: var(--pdsh-body);
    transition: height .3s var(--pdsh-ease), opacity .3s var(--pdsh-ease);
}

/* Collapse the strip while the mobile panel is open: that panel is positioned
   from the header's bottom edge down and would otherwise sit under it. */
body.pds-nav-open .pds-header__top {
    height: 0;
    opacity: 0;
}

.pds-header__top-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(1rem, 3vw, 2.5rem);
    width: 100%;
    max-width: var(--pdsh-shell);
    height: var(--pdsh-top-h);
    margin-inline: auto;
    padding-inline: var(--pdsh-gutter);
    font-family: var(--pdsh-text);
    font-size: .8125rem;
    line-height: 1;
}

/* No auto margin here: the whole strip is right-aligned, so the USP's and this
   group stay together at the end of the row instead of splitting apart. */
.pds-header__top-end {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: right;
}

.pds-header__top-sep {
    width: 1px;
    height: 16px;
    background: var(--pdsh-line);
}

/* --- USP's --------------------------------------------------------------- */

.pds-usps {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.pds-usps__item {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    font-weight: 500;
    white-space: nowrap;
}

.pds-usps__item svg {
    flex: none;
    color: var(--pdsh-orange);
}

/* --- Google reviews ------------------------------------------------------ */

.pds-reviews {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    padding: .3125rem .625rem;
    border-radius: 999px;
    background: rgba(23, 9, 42, .04);
    color: var(--pdsh-ink);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .25s var(--pdsh-ease);
}

.pds-reviews:hover {
    background: rgba(23, 9, 42, .08);
}

.pds-reviews__logo {
    display: block;
    width: 14px;
    height: 14px;
}

.pds-reviews__logo svg {
    display: block;
    width: 100%;
    height: 100%;
}

.pds-reviews__score {
    font-weight: 700;
    letter-spacing: -.01em;
}

.pds-reviews__stars {
    display: inline-flex;
    gap: 1px;
    color: #FBBC05;
}

.pds-reviews__stars svg {
    display: block;
}

.pds-reviews__count {
    color: var(--pdsh-muted);
}

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

.pds-contact {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.pds-contact__link {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    color: var(--pdsh-body);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color .25s var(--pdsh-ease);
}

.pds-contact__link svg {
    flex: none;
    color: var(--pdsh-orange);
}

.pds-contact__link:hover {
    color: var(--pdsh-purple);
}

/* ==========================================================================
   Brand
   ========================================================================== */

.pds-header__brand {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    margin-inline-end: auto;
    text-decoration: none;
    flex: none;
}

/* The delivered horizontal logo, inlined by developercode_brand_logo(). Its
   height is the one knob; the viewBox keeps the ratio. */
.pds-header__logo {
    display: block;
    height: 40px;
    width: auto;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.pds-header__nav {
    display: block;
}

.pds-header__list {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pds-header__item {
    position: relative;
}

/* The `a` catch-all styles the top-level nav pills. Links inside the mega
   panel bring their own styling, so they are excluded here — otherwise this
   0,2,0 selector beats their own 0,1,0 rules and strips them bare.
   `:where()` keeps the exclusion at zero specificity. */
.pds-header__link,
.pds-header__list a:not(:where(.pds-mega a)) {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .625rem .875rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-family: var(--pdsh-text);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1;
    color: var(--pdsh-body);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: color .25s var(--pdsh-ease), background-color .25s var(--pdsh-ease);
}

.pds-header__link:hover,
.pds-header__list a:not(:where(.pds-mega a)):hover,
.pds-header__item--has-panel:hover .pds-header__toggle {
    color: var(--pdsh-ink);
    background: rgba(106, 36, 140, .07);
}

.pds-header__toggle svg {
    transition: transform .3s var(--pdsh-ease);
}

.pds-header__item--has-panel:hover .pds-header__toggle svg,
.pds-header__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* --- Dropdown panel ------------------------------------------------------ */

.pds-header__panel {
    position: absolute;
    top: calc(100% + .625rem);
    left: 50%;
    z-index: 5;
    width: 21rem;
    padding: .625rem;
    border: 1px solid var(--pdsh-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(23, 9, 42, .06), 0 28px 60px rgba(23, 9, 42, .13);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -8px);
    transition: opacity .28s var(--pdsh-ease), transform .28s var(--pdsh-ease), visibility .28s;
}

.pds-header__item--has-panel:hover .pds-header__panel,
.pds-header__item--has-panel:focus-within .pds-header__panel,
.pds-header__toggle[aria-expanded="true"] + .pds-header__panel {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.pds-header__panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pds-header__panel a {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    padding: .75rem .875rem;
    border-radius: 12px;
    white-space: normal;
}

.pds-header__panel strong {
    font-family: var(--pdsh-display);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--pdsh-ink);
}

.pds-header__panel span {
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--pdsh-muted);
}

.pds-header__panel a:hover strong {
    color: var(--pdsh-purple);
}

/* ==========================================================================
   Mega menu
   The list item goes static so the panel can span the whole header width;
   the sticky header itself becomes the containing block.
   ========================================================================== */

.pds-header__item--mega {
    position: static;
}

.pds-header__toggle[aria-expanded="true"] {
    color: var(--pdsh-purple);
    background: rgba(106, 36, 140, .09);
}

.pds-mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    padding: .75rem var(--pdsh-gutter) 1.75rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .3s var(--pdsh-ease), transform .34s var(--pdsh-ease-out), visibility .3s;
}

/* Soft scrim so the panel reads as a layer above the page */
.pds-mega::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(23, 9, 42, .1), rgba(23, 9, 42, 0) 64%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s var(--pdsh-ease);
}

.pds-header__item--mega.is-open .pds-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pds-header__item--mega.is-open .pds-mega::before {
    opacity: 1;
}

.pds-mega__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, .85fr);
    width: 100%;
    max-width: var(--pdsh-max);
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid var(--pdsh-line);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(23, 9, 42, .07), 0 38px 90px rgba(23, 9, 42, .17);
}

/* --- Left column: solutions ---------------------------------------------- */

.pds-mega__main {
    padding: 1.75rem 1.875rem 1.625rem;
}

.pds-mega__label {
    margin: 0 0 1rem;
    font-family: var(--pdsh-text);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pdsh-purple);
}

.pds-mega__label--invert {
    color: rgba(255, 255, 255, .62);
}

.pds-mega__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pds-mega__card {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: .875rem;
    border-radius: 16px;
    text-decoration: none;
    white-space: normal;
    transition: background-color .24s var(--pdsh-ease), transform .24s var(--pdsh-ease);
}

.pds-mega__card:hover {
    background: var(--pdsh-purple-wash);
    transform: translateX(2px);
}

.pds-mega__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 13px;
    background: var(--pdsh-bone);
    color: var(--pdsh-purple);
    transition: background-color .24s var(--pdsh-ease), color .24s var(--pdsh-ease),
                transform .34s var(--pdsh-ease-out);
}

.pds-mega__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.pds-mega__card:hover .pds-mega__icon {
    background: var(--pdsh-purple);
    color: #fff;
    transform: rotate(-6deg) scale(1.06);
}

.pds-mega__card-text {
    display: flex;
    flex-direction: column;
    gap: .1875rem;
    min-width: 0;
}

.pds-mega__card-text strong {
    font-family: var(--pdsh-display);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--pdsh-ink);
}

.pds-mega__card-text span {
    font-family: var(--pdsh-text);
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--pdsh-muted);
}

/* --- Audience row: who the advice is for --------------------------------- */

.pds-mega__label--sub {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--pdsh-line, rgba(23, 9, 42, .1));
}

.pds-mega__audience {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pds-mega__audience a {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .625rem .75rem;
    border-radius: 14px;
    text-decoration: none;
    white-space: normal;
    transition: background-color .24s var(--pdsh-ease), transform .24s var(--pdsh-ease);
}

.pds-mega__audience a:hover {
    background: var(--pdsh-purple-wash);
    transform: translateX(2px);
}

.pds-mega__audience-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 10px;
    background: var(--pdsh-bone);
    color: var(--pdsh-purple);
}

.pds-mega__audience-icon svg {
    width: 1rem;
    height: 1rem;
}

.pds-mega__audience a > span:last-child {
    display: flex;
    flex-direction: column;
    gap: .0625rem;
    min-width: 0;
}

.pds-mega__audience strong {
    font-family: var(--pdsh-display);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--pdsh-ink);
}

.pds-mega__audience a > span:last-child > span {
    font-family: var(--pdsh-text);
    font-size: .75rem;
    line-height: 1.35;
    color: var(--pdsh-muted);
}

@media (max-width: 1180px) {

    .pds-mega__audience {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pds-mega__all {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.25rem;
    padding: .5rem 0;
    font-family: var(--pdsh-text);
    font-size: .875rem;
    font-weight: 600;
    color: var(--pdsh-purple);
    text-decoration: none;
    background: none;
}

.pds-mega__all:hover {
    color: var(--pdsh-purple-dark);
    background: none;
}

.pds-mega__all svg {
    transition: transform .28s var(--pdsh-ease);
}

.pds-mega__all:hover svg {
    transform: translateX(4px);
}

/* --- Right column: USPs + call to action --------------------------------- */

.pds-mega__aside {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.875rem;
    /* Photo sits underneath; the two gradients above it are the readability
       scrim that keeps the white USP text and CTA legible on any crop. */
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(255, 127, 13, .32), transparent 60%),
        linear-gradient(160deg, rgba(94, 21, 128, .92), rgba(23, 9, 42, .95) 78%),
        url("../image/mega-aside.webp") center / cover no-repeat,
        var(--pdsh-ink);
    color: rgba(255, 255, 255, .74);
}

.pds-mega__usps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pds-mega__usp {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.pds-mega__usp-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 9px;
    background: rgba(255, 255, 255, .1);
    color: var(--pdsh-orange);
}

.pds-mega__usp-icon svg {
    width: 1rem;
    height: 1rem;
}

.pds-mega__usp-text {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
}

.pds-mega__usp-text strong {
    font-family: var(--pdsh-display);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
}

.pds-mega__usp-text span {
    font-family: var(--pdsh-text);
    font-size: .8125rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .6);
}

.pds-mega__cta {
    margin-top: auto;
    padding-top: 1.5rem;
}

.pds-mega__cta-title {
    margin: 0 0 .375rem;
    font-family: var(--pdsh-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
}

.pds-mega__cta-text {
    margin: 0 0 1rem;
    font-family: var(--pdsh-text);
    font-size: .8125rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .62);
}

.pds-mega__cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .875rem 1.25rem;
    border-radius: 999px;
    background: var(--pdsh-orange);
    color: #1B0C05;
    font-family: var(--pdsh-text);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .26s var(--pdsh-ease), transform .26s var(--pdsh-ease),
                box-shadow .26s var(--pdsh-ease);
}

.pds-mega__cta-btn:hover {
    background: #FF8B26;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 127, 13, .34);
}

.pds-mega__cta-btn svg {
    transition: transform .28s var(--pdsh-ease);
}

.pds-mega__cta-btn:hover svg {
    transform: translateX(4px);
}

.pds-mega__cta-phone {
    display: block;
    margin-top: .75rem;
    font-family: var(--pdsh-text);
    font-size: .8125rem;
    color: rgba(255, 255, 255, .78);
    text-align: center;
    text-decoration: none;
}

.pds-mega__cta-phone:hover {
    color: #fff;
}

/* --- Staggered entrance --------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

    .pds-mega__grid > li,
    .pds-mega__usp,
    .pds-mega__all,
    .pds-mega__cta {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity .38s var(--pdsh-ease-out), transform .38s var(--pdsh-ease-out);
    }

    .pds-header__item--mega.is-open .pds-mega__grid > li,
    .pds-header__item--mega.is-open .pds-mega__usp,
    .pds-header__item--mega.is-open .pds-mega__all,
    .pds-header__item--mega.is-open .pds-mega__cta {
        opacity: 1;
        transform: none;
    }

    .pds-mega__grid > li:nth-child(1) { transition-delay: .04s; }
    .pds-mega__grid > li:nth-child(2) { transition-delay: .08s; }
    .pds-mega__grid > li:nth-child(3) { transition-delay: .12s; }
    .pds-mega__grid > li:nth-child(4) { transition-delay: .16s; }
    .pds-mega__grid > li:nth-child(5) { transition-delay: .2s; }
    .pds-mega__grid > li:nth-child(6) { transition-delay: .24s; }
    .pds-mega__all { transition-delay: .28s; }

    .pds-mega__usp:nth-child(1) { transition-delay: .1s; }
    .pds-mega__usp:nth-child(2) { transition-delay: .16s; }
    .pds-mega__usp:nth-child(3) { transition-delay: .22s; }
    .pds-mega__usp:nth-child(4) { transition-delay: .28s; }
    .pds-mega__cta { transition-delay: .32s; }
}

/* ==========================================================================
   Actions
   ========================================================================== */

.pds-header__actions {
    display: flex;
    align-items: center;
    gap: .625rem;
    flex: none;
}

.pds-header__phone {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    padding: .5rem .625rem;
    border-radius: 999px;
    font-family: var(--pdsh-text);
    font-size: .875rem;
    font-weight: 600;
    color: var(--pdsh-body);
    text-decoration: none;
    transition: color .25s var(--pdsh-ease);
}

.pds-header__phone:hover {
    color: var(--pdsh-purple);
}

.pds-header__cta {
    display: inline-flex;
    align-items: center;
    padding: .8125rem 1.375rem;
    border-radius: 999px;
    background: var(--pdsh-ink);
    color: #fff;
    font-family: var(--pdsh-text);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .28s var(--pdsh-ease), transform .28s var(--pdsh-ease),
                box-shadow .28s var(--pdsh-ease);
}

.pds-header__cta:hover {
    background: var(--pdsh-purple);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(106, 36, 140, .25);
}

/* --- Burger -------------------------------------------------------------- */

/* The mark is deliberately not a hamburger: three arrow bars in the EU
   energy-label form, one colour per proposition — uitvoering (ink),
   energielabel (orange), subsidie (purple), stepping longer as they descend
   the way a label scale does. Open cross-fades the mark for a plain cross,
   which stays unambiguous where a folded-arrow X would not. */
.pds-header__burger {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--pdsh-line);
    border-radius: 12px;
    background: #fff;
    color: var(--pdsh-ink);
    cursor: pointer;
    transition: border-color .28s var(--pdsh-ease), box-shadow .28s var(--pdsh-ease);
}

.pds-header__burger:hover {
    border-color: var(--pdsh-purple);
    box-shadow: 0 6px 16px rgba(106, 36, 140, .14);
}

.pds-header__burger-mark,
.pds-header__burger-close {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    transition: opacity .22s var(--pdsh-ease), transform .32s var(--pdsh-ease);
}

.pds-header__burger-mark svg,
.pds-header__burger-close svg {
    display: block;
}

/* Closed: mark visible, cross parked. */
.pds-header__burger-close {
    opacity: 0;
    transform: rotate(-90deg) scale(.6);
}

.pds-header__burger[aria-expanded="true"] .pds-header__burger-mark {
    opacity: 0;
    transform: rotate(90deg) scale(.6);
}

.pds-header__burger[aria-expanded="true"] .pds-header__burger-close {
    opacity: 1;
    transform: none;
}

/* Uitvoering, energielabel, subsidie — top to bottom. The fills are inline
   currentColor first, so the mark still reads if this sheet is late. */
.pds-burger__bar--work {
    fill: var(--pdsh-ink);
}

.pds-burger__bar--label {
    fill: var(--pdsh-orange);
}

.pds-burger__bar--grant {
    fill: var(--pdsh-purple);
}

/* ==========================================================================
   Mobile panel
   ========================================================================== */

/* The header is not sticky, so the panel cannot assume a fixed offset: JS sets
   --pdsh-panel-top to the header's live bottom edge when the panel opens
   (0 once the header has scrolled out of view). */
.pds-mobile {
    position: fixed;
    inset: var(--pdsh-panel-top, var(--pdsh-h)) 0 0;
    z-index: 89;
    overflow-y: auto;
    background: #fff;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .3s var(--pdsh-ease), transform .3s var(--pdsh-ease);
}

.pds-mobile[hidden] {
    display: none;
}

.pds-mobile.is-open {
    opacity: 1;
    transform: none;
}

.pds-mobile__inner {
    padding: 1.75rem clamp(1.25rem, 5vw, 2.5rem) 3rem;
}

.pds-mobile__label {
    margin: 1.75rem 0 .75rem;
    font-family: var(--pdsh-text);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--pdsh-purple);
}

.pds-mobile__label:first-child {
    margin-top: 0;
}

.pds-mobile__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--pdsh-line);
}

.pds-mobile__list a {
    display: block;
    padding: 1rem 0;
    border-bottom: 1px solid var(--pdsh-line);
    font-family: var(--pdsh-display);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--pdsh-ink);
    text-decoration: none;
}

.pds-mobile__list a:hover {
    color: var(--pdsh-purple);
}

/* Solution rows with icon + description */

.pds-mobile__list--cards a {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .875rem 0;
}

.pds-mobile__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 12px;
    background: var(--pdsh-bone);
    color: var(--pdsh-purple);
}

.pds-mobile__icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.pds-mobile__card-text {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
}

.pds-mobile__card-text strong {
    font-family: var(--pdsh-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--pdsh-ink);
}

.pds-mobile__card-text span {
    font-family: var(--pdsh-text);
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--pdsh-muted);
}

/* Promo block — the mega menu's USPs + CTA, folded into the mobile panel */

.pds-mobile__promo {
    margin-top: 2.25rem;
    padding: 1.5rem;
    border-radius: 22px;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(255, 127, 13, .3), transparent 60%),
        linear-gradient(160deg, var(--pdsh-purple-dark), var(--pdsh-ink) 78%);
}

.pds-mobile__label--invert {
    margin-top: 0;
    color: rgba(255, 255, 255, .6);
}

.pds-mobile__usps {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin: 0 0 1.375rem;
    padding: 0;
    list-style: none;
}

.pds-mobile__usps li {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-family: var(--pdsh-text);
    font-size: .9375rem;
    font-weight: 500;
    color: #fff;
}

.pds-mobile__usp-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9px;
    background: rgba(255, 255, 255, .1);
    color: var(--pdsh-orange);
}

.pds-mobile__usp-icon svg {
    width: .9375rem;
    height: .9375rem;
}

.pds-mobile__footer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2.25rem;
}

.pds-mobile__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1.0625rem 1.5rem;
    border-radius: 999px;
    background: var(--pdsh-orange);
    color: #1B0C05;
    font-family: var(--pdsh-text);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
}

.pds-mobile__phone {
    font-family: var(--pdsh-text);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--pdsh-body);
    text-align: center;
    text-decoration: none;
}

body.pds-nav-open {
    overflow: hidden;
}

/* ==========================================================================
   Fallback footer (pages without the Elementor footer widget)
   ========================================================================== */

.pds-footer-fallback {
    padding: 2.5rem 0;
    background: #fff;
    border-top: 1px solid var(--pdsh-line);
    color: var(--pdsh-body);
}

.pds-footer-fallback__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    justify-content: space-between;
    max-width: 1400px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 5vw, 5.5rem);
    font-family: var(--pdsh-text);
    font-size: .875rem;
}

.pds-footer-fallback a {
    margin-right: 1.25rem;
    color: var(--pdsh-ink);
    font-weight: 600;
    text-decoration: none;
}

.pds-footer-fallback a:hover {
    color: var(--pdsh-purple);
}

/* ==========================================================================
   Focus
   ========================================================================== */

.pds-header a:focus-visible,
.pds-header button:focus-visible,
.pds-mobile a:focus-visible {
    outline: 3px solid var(--pdsh-orange);
    outline-offset: 3px;
    border-radius: 8px;
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (max-width: 1440px) {

    /* Keep the strip on one line: drop the last USP first. */
    .pds-usps__item:nth-child(3) {
        display: none;
    }
}

@media (max-width: 1240px) {

    .pds-usps__item:nth-child(2) {
        display: none;
    }

    .pds-contact {
        gap: 1rem;
    }
}

@media (max-width: 1180px) {

    .pds-header__phone span {
        display: none;
    }

    .pds-header__list {
        gap: 0;
    }

    .pds-header__link,
    .pds-header__list a:not(:where(.pds-mega a)) {
        padding-inline: .625rem;
        font-size: .875rem;
    }

    .pds-mega__inner {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    }

    .pds-mega__main,
    .pds-mega__aside {
        padding: 1.375rem 1.5rem;
    }
}

/* Short viewports: let the panel scroll instead of running off screen. */
@media (max-height: 780px) {

    .pds-mega__inner {
        max-height: calc(100vh - var(--pdsh-h) - var(--pdsh-top-h) - 3rem);
        overflow-y: auto;
    }
}

@media (max-width: 1024px) {

    .pds-header__nav {
        display: none;
    }

    /* The number is still one tap away — the top strip keeps it and the mobile
       panel repeats it — so the bar drops the duplicate and keeps the CTA. */
    .pds-header__phone {
        display: none;
    }

    .pds-header__burger {
        display: block;
    }

    .pds-usps {
        display: none;
    }
}

@media (max-width: 768px) {

    /* Mail address no longer fits — the phone number stays. */
    .pds-contact__link[href^="mailto"] {
        display: none;
    }
}

@media (max-width: 600px) {

    /* On the root, not on .pds-header: the hero and the mobile panel read
       these too, and they must all agree on how tall the header is. */
    :root {
        --pdsh-h: 68px;
        --pdsh-top-h: 36px;
    }

    .pds-header__top-inner {
        font-size: .75rem;
    }

    .pds-reviews__count {
        display: none;
    }

    .pds-header__cta {
        display: none;
    }

    .pds-header__logo {
        height: 32px;
    }
}

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

    .pds-header,
    .pds-header *,
    .pds-mobile,
    .pds-mobile * {
        transition-duration: .001ms !important;
    }
}