/* ==========================================================================
   Verduurzaamwijs — design system
   Tokens, primitives and shared motion utilities for all pds-* widgets.
   Brand: "paars draagt, oranje wijst" — deep purple #17092A for text and
   surfaces, purple #6A248C as the carrying brand colour, orange #FF7F0D only
   for what gives direction (buttons, the next step), light #FFF4EA as ground.
   Logo: the owl-house (huis met uilenogen).
   ========================================================================== */

:root {
    /* --- Brand ------------------------------------------------------- */
    --pds-purple: #6A248C;
    --pds-purple-dark: #4E1A68;
    --pds-purple-light: #8E4AB0;
    --pds-purple-wash: #F3EAF7;

    --pds-orange: #FF7F0D;
    --pds-orange-dark: #E26A00;
    /* Orange is a brand colour, not a text colour: at small sizes on a light
       ground #FF7F0D only reaches 2.6:1. Use this darkened variant for text. */
    --pds-orange-ink: #A85405;
    --pds-orange-wash: #FFF4EA;

    /* --- Surfaces ---------------------------------------------------- */
    --pds-ink: #17092A;          /* darkest plum — full-bleed dark sections */
    --pds-ink-soft: #241041;     /* raised surface on ink */
    --pds-paper: #FFFFFF;
    --pds-bone: #FFF4EA;         /* warm light base — never white-on-white */
    --pds-bone-deep: #F8E6D5;

    /* --- Text -------------------------------------------------------- */
    --pds-title: #17092A;
    --pds-body: #554C60;
    --pds-muted: #6B6377;
    --pds-on-ink: #FFFFFF;
    --pds-on-ink-soft: rgba(255, 255, 255, .72);
    --pds-on-ink-faint: rgba(255, 255, 255, .46);

    /* --- Lines & signal ---------------------------------------------- */
    --pds-line: #E6DFE9;
    --pds-line-ink: rgba(255, 255, 255, .16);
    --pds-sage: #1F7A5A;         /* positive / energielabel signal */

    /* --- Type -------------------------------------------------------- */
    --pds-display: "SUSE", "DM Sans", system-ui, sans-serif;
    --pds-text: "DM Sans", system-ui, sans-serif;

    --pds-fs-hero: clamp(2.5rem, 5.3vw, 4.875rem);
    --pds-fs-h2: clamp(2rem, 3.6vw, 3.5rem);
    --pds-fs-h3: clamp(1.375rem, 1.9vw, 1.875rem);
    --pds-fs-lead: clamp(1.0625rem, 1.25vw, 1.3125rem);
    --pds-fs-body: 1.0625rem;
    --pds-fs-small: .9375rem;
    --pds-fs-eyebrow: .8125rem;

    /* --- Rhythm ------------------------------------------------------ */
    --pds-gutter: clamp(1.25rem, 5vw, 5.5rem);
    --pds-section-y: clamp(4.5rem, 9vw, 9.5rem);
    --pds-max: 1400px;
    --pds-max-narrow: 1120px;

    /* --- Shape ------------------------------------------------------- */
    --pds-r-sm: 10px;
    --pds-r: 18px;
    --pds-r-lg: 28px;
    --pds-r-xl: 40px;

    --pds-shadow-sm: 0 1px 2px rgba(23, 9, 42, .05), 0 4px 14px rgba(23, 9, 42, .05);
    --pds-shadow: 0 2px 6px rgba(23, 9, 42, .05), 0 18px 46px rgba(23, 9, 42, .09);
    --pds-shadow-lg: 0 4px 12px rgba(23, 9, 42, .06), 0 34px 80px rgba(23, 9, 42, .14);

    --pds-ease: cubic-bezier(.22, .61, .36, 1);
    --pds-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ==========================================================================
   Section shell — every pds widget renders its own full-bleed section
   ========================================================================== */

.pds {
    position: relative;
    width: 100%;
    font-family: var(--pds-text);
    color: var(--pds-body);
    font-size: var(--pds-fs-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

.pds__inner {
    width: 100%;
    max-width: var(--pds-max);
    margin-inline: auto;
    padding-inline: var(--pds-gutter);
}

.pds__inner--narrow {
    max-width: var(--pds-max-narrow);
}

/* Visually hidden, still announced. Used where an inline SVG mark carries the
   meaning and the link needs a name a screen reader can read out. */
.pds__sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.pds--pad {
    padding-block: var(--pds-section-y);
}

.pds--bone {
    background: var(--pds-bone);
}

.pds--paper {
    background: var(--pds-paper);
}

.pds--ink {
    background: var(--pds-ink);
    color: var(--pds-on-ink-soft);
}

/* ==========================================================================
   Typography primitives
   ========================================================================== */

.pds h1,
.pds h2,
.pds h3,
.pds h4 {
    font-family: var(--pds-display);
    color: var(--pds-title);
    line-height: 1.04;
    letter-spacing: -.025em;
    font-weight: 600;
    margin: 0;
    text-wrap: balance;
}

/* Headings on a dark ground. Declared after the base rule (same specificity)
   so it wins, and kept as the single source of truth for inverted sections —
   individual widgets must not need their own colour override. */
.pds--ink h1,
.pds--ink h2,
.pds--ink h3,
.pds--ink h4 {
    color: var(--pds-on-ink);
}

.pds p {
    font-family: var(--pds-text);
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    text-wrap: pretty;
}

.pds__h1 {
    font-size: var(--pds-fs-hero);
    letter-spacing: -.035em;
}

.pds__h2 {
    font-size: var(--pds-fs-h2);
}

.pds__h3 {
    font-size: var(--pds-fs-h3);
    line-height: 1.18;
    letter-spacing: -.018em;
}

.pds__lead {
    font-size: var(--pds-fs-lead);
    line-height: 1.6;
    color: var(--pds-body);
}

.pds--ink .pds__lead {
    color: var(--pds-on-ink-soft);
}

/* Eyebrow — small caps label with a brand tick */
.pds__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    font-family: var(--pds-text);
    font-size: var(--pds-fs-eyebrow);
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--pds-purple);
    margin: 0;
}

.pds--ink .pds__eyebrow {
    color: var(--pds-orange);
}

/* Every eyebrow opens with the brand mark instead of a plain rule, so the
   glyph from the header and the hero runs through every section. */
.pds__eyebrow-mark {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    /* Paars draagt: the mark is the brand purple on light sections, like the
       house in the logo; on ink it turns white, as the one-colour logo does. */
    color: var(--pds-purple);
}

.pds--ink .pds__eyebrow-mark {
    color: var(--pds-on-ink);
}

.pds__brand-mark {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

/* --- Brand mark ---------------------------------------------------------- */

/* The mark, alive: now and then the owl glances left and right. */
.pds__brand-mark-pupils {
    transform-box: view-box;
}

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

    .pds__brand-mark-pupils {
        animation: pds-mark-glance 7s var(--pds-ease) infinite;
    }
}

@keyframes pds-mark-glance {
    0%, 62%, 100% { transform: translateX(0); }
    68%, 74%      { transform: translateX(-3px); }
    80%, 86%      { transform: translateX(3px); }
}

/* Highlighted word inside a headline */
.pds__accent {
    color: var(--pds-purple);
}

.pds--ink .pds__accent {
    color: var(--pds-orange);
}

/* Highlight span around a single key word. It refuses to break so the mark
   stays one continuous shape — which also means it must stay short. Below the
   tablet breakpoint there is no room to guarantee that, so it gives way and
   wraps rather than pushing the headline out of its column. */
.pds__mark {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    max-inline-size: 100%;
}

@media (max-width: 900px) {

    .pds__mark {
        white-space: normal;
    }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.pds__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .875rem 1rem;
}

.pds__btn {
    --_bg: var(--pds-purple);
    --_fg: #fff;
    --_bd: var(--pds-purple);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    padding: 1.0625rem 1.75rem;
    border: 1px solid var(--_bd);
    border-radius: 999px;
    background: var(--_bg);
    color: var(--_fg);
    font-family: var(--pds-text);
    font-size: var(--pds-fs-small);
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .3s var(--pds-ease), border-color .3s var(--pds-ease),
                color .3s var(--pds-ease), transform .3s var(--pds-ease), box-shadow .3s var(--pds-ease);
}

.pds__btn:hover {
    --_bg: var(--pds-purple-dark);
    --_bd: var(--pds-purple-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(106, 36, 140, .26);
}

.pds__btn svg {
    flex: none;
    transition: transform .35s var(--pds-ease);
}

.pds__btn:hover svg {
    transform: translateX(4px);
}

.pds__btn--accent {
    --_bg: var(--pds-orange);
    --_bd: var(--pds-orange);
    --_fg: #1B0C05;
}

.pds__btn--accent:hover {
    --_bg: var(--pds-orange-dark);
    --_bd: var(--pds-orange-dark);
    --_fg: var(--pds-ink);
    box-shadow: 0 12px 28px rgba(255, 127, 13, .3);
}

.pds__btn--ghost {
    --_bg: transparent;
    --_fg: var(--pds-title);
    --_bd: var(--pds-line);
}

.pds__btn--ghost:hover {
    --_bg: transparent;
    --_fg: var(--pds-purple);
    --_bd: var(--pds-purple);
    box-shadow: none;
}

.pds--ink .pds__btn--ghost,
.pds__btn--ghost-ink {
    --_bg: transparent;
    --_fg: #fff;
    --_bd: rgba(255, 255, 255, .34);
}

.pds--ink .pds__btn--ghost:hover,
.pds__btn--ghost-ink:hover {
    --_bg: rgba(255, 255, 255, .1);
    --_fg: #fff;
    --_bd: rgba(255, 255, 255, .7);
    box-shadow: none;
}

/* Text link with animated rule */
.pds__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    font-size: var(--pds-fs-small);
    color: var(--pds-purple);
    text-decoration: none;
    padding-bottom: 2px;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1.5px;
    background-repeat: no-repeat;
    background-position: left 100%;
    transition: background-size .4s var(--pds-ease-out), color .3s var(--pds-ease);
}

.pds__link:hover {
    background-size: 100% 1.5px;
}

.pds__link svg {
    transition: transform .35s var(--pds-ease);
}

.pds__link:hover svg {
    transform: translateX(3px);
}

.pds--ink .pds__link {
    color: var(--pds-orange);
}

/* ==========================================================================
   Focus — visible for keyboard users everywhere
   ========================================================================== */

.pds a:focus-visible,
.pds button:focus-visible,
.pds summary:focus-visible,
.pds [tabindex]:focus-visible {
    outline: 3px solid var(--pds-orange);
    outline-offset: 3px;
    border-radius: 6px;
}

.pds--ink a:focus-visible,
.pds--ink button:focus-visible {
    outline-color: #fff;
}

/* ==========================================================================
   Media helpers
   ========================================================================== */

.pds__media {
    position: relative;
    overflow: hidden;
    background: var(--pds-bone-deep);
}

.pds__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ==========================================================================
   Section heading block (shared composition)
   ========================================================================== */

.pds__head {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 46ch;
}

.pds__head--wide {
    max-width: 62ch;
}

.pds__head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2.5rem 4rem;
    flex-wrap: wrap;
}

/* ==========================================================================
   Motion — opt-in reveals driven by pds-motion.js
   ========================================================================== */

/* The hidden start state is gated on .pds-js so that content stays visible
   when JavaScript is unavailable or fails to load. */
@media (prefers-reduced-motion: no-preference) {

    .pds-js .pds [data-pds-reveal] {
        opacity: 0;
        transform: translate3d(0, 26px, 0);
        transition: opacity .85s var(--pds-ease-out), transform .85s var(--pds-ease-out);
        transition-delay: var(--pds-delay, 0ms);
        will-change: opacity, transform;
    }

    .pds-js .pds [data-pds-reveal="fade"] {
        transform: none;
    }

    .pds-js .pds [data-pds-reveal="left"] {
        transform: translate3d(-28px, 0, 0);
    }

    .pds-js .pds [data-pds-reveal="right"] {
        transform: translate3d(28px, 0, 0);
    }

    .pds-js .pds [data-pds-reveal="scale"] {
        transform: scale(.955);
    }

    /* On a narrow viewport the sideways start position of a reveal sticks out
       past the gutter and gives the page a few pixels of horizontal scroll
       until the element animates in. There is no room for the movement there,
       so those reveals rise instead of sliding. */
    @media (max-width: 860px) {

        .pds-js .pds [data-pds-reveal="left"],
        .pds-js .pds [data-pds-reveal="right"] {
            transform: translate3d(0, 20px, 0);
        }
    }

    .pds-js .pds [data-pds-reveal].is-revealed {
        opacity: 1;
        transform: none;
        will-change: auto;
    }

    /* Image reveal — a clip wipe over the picture.
       The wipe is applied to the children, never to the observed element
       itself: a fully clipped element has zero visible area, so
       IntersectionObserver would never report it as visible and the reveal
       could never fire. */
    .pds-js .pds [data-pds-reveal="clip"] {
        opacity: 1;
        transform: none;
    }

    .pds-js .pds [data-pds-reveal="clip"] > * {
        clip-path: inset(0 0 100% 0);
        transition: clip-path 1.1s var(--pds-ease-out);
        transition-delay: var(--pds-delay, 0ms);
    }

    .pds-js .pds [data-pds-reveal="clip"].is-revealed > * {
        clip-path: inset(0 0 0 0);
    }
}

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

    .pds *,
    .pds *::before,
    .pds *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* The hidden attribute must win from any display we set on a component. A
   plain `.some-class { display: flex }` outranks the user-agent's
   `[hidden] { display: none }`, which silently un-hides collapsed panels. */
.pds [hidden] {
    display: none;
}

/* Screen-reader only */
.pds__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Composition primitives
   Shared surfaces the section widgets build their own layouts out of.
   ========================================================================== */

/* --- Media frame ---------------------------------------------------------
   The house style for any photo or video panel: deep radius, a hairline that
   reads on both light and dark grounds, and a soft top-light so a flat
   photograph still has some dimension against the page. */

.pds__frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--pds-r-lg);
    background: var(--pds-bone-deep);
    isolation: isolate;
}

.pds__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18),
                inset 0 1px 0 rgba(255, 255, 255, .3);
    pointer-events: none;
    z-index: 2;
}

.pds__frame > img,
.pds__frame > video,
.pds__frame > picture img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
}

.pds__video {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* Scrim so white type stays legible over any photograph */
.pds__scrim::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(23, 9, 42, .82) 0%, rgba(23, 9, 42, .38) 42%, rgba(23, 9, 42, .06) 100%);
    pointer-events: none;
}

/* --- Glass card ----------------------------------------------------------
   The floating panel that overlaps media in the reference designs. Frosting is
   progressive: without backdrop-filter support the fallback background is
   already opaque enough to read against. */

.pds__glass {
    position: relative;
    border-radius: var(--pds-r);
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: var(--pds-shadow);
    color: var(--pds-title);
}

@supports (backdrop-filter: blur(1px)) {

    .pds__glass {
        background: rgba(255, 255, 255, .78);
        backdrop-filter: blur(18px) saturate(1.4);
    }
}

.pds__glass--ink {
    background: rgba(36, 16, 65, .82);
    border-color: rgba(255, 255, 255, .14);
    color: #fff;
}

@supports (backdrop-filter: blur(1px)) {

    .pds__glass--ink {
        background: rgba(36, 16, 65, .62);
    }
}

/* --- Pill badge ----------------------------------------------------------- */

.pds__pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9375rem .5rem .75rem;
    border: 1px solid var(--pds-line);
    border-radius: 999px;
    background: var(--pds-paper);
    color: var(--pds-title);
    font-size: var(--pds-fs-eyebrow);
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1;
    white-space: nowrap;
}

.pds__pill svg {
    flex: none;
    color: var(--pds-purple);
}

.pds--ink .pds__pill {
    border-color: var(--pds-line-ink);
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.pds--ink .pds__pill svg {
    color: var(--pds-orange);
}

.pds__pill--accent {
    border-color: transparent;
    background: var(--pds-orange);
    color: #1B0C05;
}

.pds__pill--accent svg {
    color: inherit;
}

/* --- Icon tile ------------------------------------------------------------ */

.pds__tile {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: 14px;
    background: var(--pds-purple-wash);
    color: var(--pds-purple);
    transition: background-color .4s var(--pds-ease), color .4s var(--pds-ease),
                transform .4s var(--pds-ease);
}

.pds__tile svg {
    inline-size: 1.375rem;
    block-size: 1.375rem;
}

.pds--ink .pds__tile {
    background: rgba(255, 255, 255, .08);
    color: var(--pds-orange);
}

/* --- Stat ----------------------------------------------------------------- */

.pds__stat {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.pds__stat-value {
    display: flex;
    align-items: baseline;
    gap: .25rem;
    font-family: var(--pds-display);
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    font-weight: 600;
    line-height: .95;
    letter-spacing: -.04em;
    color: var(--pds-title);
    font-variant-numeric: tabular-nums;
}

.pds--ink .pds__stat-value {
    color: #fff;
}

.pds__stat-value small {
    font-size: .44em;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--pds-orange-ink);
}

.pds--ink .pds__stat-value small {
    color: var(--pds-orange);
}

.pds__stat-label {
    font-size: var(--pds-fs-small);
    line-height: 1.4;
    color: var(--pds-muted);
}

.pds--ink .pds__stat-label {
    color: var(--pds-on-ink-soft);
}

/* --- Avatar stack --------------------------------------------------------- */

.pds__avatars {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.pds__avatars li {
    inline-size: 2.375rem;
    block-size: 2.375rem;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--pds-paper);
    background: var(--pds-bone-deep);
    margin-inline-start: -.75rem;
}

.pds__avatars li:first-child {
    margin-inline-start: 0;
}

.pds__avatars img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

/* --- Dotted connector ----------------------------------------------------- */

.pds__dots {
    flex: 1;
    block-size: 1px;
    min-inline-size: 1.5rem;
    background-image: linear-gradient(to right, currentColor 0 4px, transparent 4px 9px);
    background-size: 9px 1px;
    background-repeat: repeat-x;
    opacity: .38;
}

/* --- Ambient decoration --------------------------------------------------- */

/* Film grain. An inline SVG so it costs no request and scales cleanly. */
.pds__grain::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .32;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Button label — lets a section slide the label under a moving icon
   ========================================================================== */

.pds__btn-label {
    display: inline-block;
}

/* ==========================================================================
   Marquee — shared track animation for ticker strips
   ========================================================================== */

.pds__marquee {
    display: flex;
    inline-size: max-content;
    animation: pds-marquee var(--pds-marquee-speed, 60s) linear infinite;
}

.pds__marquee--reverse {
    animation-direction: reverse;
}

.pds__marquee-viewport:hover .pds__marquee {
    animation-play-state: paused;
}

@keyframes pds-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

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

    .pds__marquee {
        animation: none;
    }

    .pds__marquee-viewport {
        overflow-x: auto;
    }
}

/* Fades the strip into the page instead of cutting it off mid-word. */
.pds__marquee-viewport {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* ==========================================================================
   Scroll-linked motion — driven by pds-motion.js
   ========================================================================== */

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

    /* Parallax: the script writes --pds-shift, the element decides what to do
       with it. Default is a vertical drift. */
    .pds-js [data-pds-parallax] {
        transform: translate3d(0, var(--pds-shift, 0px), 0);
        will-change: transform;
    }

    /* Word-by-word headline reveal. The words are wrapped server-side, so the
       heading is one plain string to anything that does not run scripts. */
    .pds-js .pds [data-pds-split] .pds__word {
        display: inline-block;
        overflow: hidden;
        vertical-align: bottom;
        /* A descender-safe overflow window: without the padding the tails of
           g/j/y get clipped once the word has finished animating. */
        padding-block-end: .12em;
        margin-block-end: -.12em;
    }

    .pds-js .pds [data-pds-split] .pds__word > span {
        display: inline-block;
        transform: translate3d(0, 105%, 0);
        transition: transform .9s var(--pds-ease-out);
        transition-delay: var(--pds-delay, 0ms);
    }

    .pds-js .pds [data-pds-split].is-revealed .pds__word > span {
        transform: none;
    }

    /* Pointer effects */
    .pds-js [data-pds-tilt] {
        transform: perspective(1100px)
                   rotateX(var(--pds-tilt-x, 0deg))
                   rotateY(var(--pds-tilt-y, 0deg));
        transition: transform .5s var(--pds-ease-out);
    }

    .pds-js [data-pds-magnet] {
        transition: transform .4s var(--pds-ease-out), background-color .3s var(--pds-ease),
                    border-color .3s var(--pds-ease), color .3s var(--pds-ease),
                    box-shadow .3s var(--pds-ease);
    }

    .pds-js [data-pds-magnet]:hover {
        transform: translate3d(var(--pds-pull-x, 0px), var(--pds-pull-y, 0px), 0);
    }
}

/* ==========================================================================
   Elementor container reset — sections govern their own spacing
   ========================================================================== */

.elementor-widget-container:has(> .pds) {
    display: contents;
}