/* ============================================================
   STUDIO WESTONIA — Homepage
   ============================================================ */

/* --- Hero (CKI-style parallax + dual marquee) --- */
.hero {
    position: relative;
    width: 100%;
    height: 200vh;
    z-index: 1;
}

.hero__sticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #0000FF;
    /* Default clip-path window — desktop. Mobile media query below
       overrides these. animations.js drives them on scroll so the
       video clip-path opens. .hero__mute reads the same vars via
       calc() so it stays pinned to the visible edge without a
       per-frame JS write. */
    --clip-t: 25%;
    --clip-r: 30%;
    --clip-b: 25%;
    --clip-l: 30%;
}

/* Background layers */
.hero__bg-layers {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__bg-base {
    position: absolute;
    inset: 0;
    background: #0000FF;
}

.hero__bg-noise {
    position: absolute;
    inset: -10%;
    opacity: 0.06;
    mix-blend-mode: overlay;
}

.hero__bg-noise svg {
    width: 100%;
    height: 100%;
}

/* Shared marquee base */
.hero__marquee {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    overflow: visible;
    pointer-events: none;
}

.hero__marquee--back { z-index: 1; }
.hero__marquee--front { z-index: 3; }

.hero__marquee-track {
    display: flex;
    width: max-content;
    animation: hero-marquee 28s linear infinite;
}

.hero__marquee-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 4vw;
    user-select: none;
}

.hero__marquee-studio {
    font-family: var(--font);
    font-weight: var(--font-medium);
    font-size: clamp(1.2vw, 2vw, 34px);
    letter-spacing: 0.5em;
    text-transform: uppercase;
    line-height: 1.2;
}

.hero__marquee-westonia {
    font-family: var(--font);
    font-weight: var(--font-bold);
    font-size: clamp(16vw, 20vw, 380px);
    line-height: 0.85;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Back marquee: solid white fill (visible behind video) */
.hero__marquee--back .hero__marquee-studio,
.hero__marquee--back .hero__marquee-westonia {
    color: #FFFFFF;
}

/* Front marquee: outline over video */
.hero__marquee--front .hero__marquee-studio,
.hero__marquee--front .hero__marquee-westonia {
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
}

@keyframes hero-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Central video window — smaller, sharp corners.
   clip-path is driven by CSS vars on .hero__sticky so JS only has
   to write the vars, not the full clip-path string + mute button
   position each frame. contain:paint forces a stacking context so
   the clip-path mask doesn't invalidate ancestor paint regions. */
.hero__video {
    position: absolute;
    inset: 0;
    z-index: 2;
    clip-path: inset(var(--clip-t, 25%) var(--clip-r, 30%) var(--clip-b, 25%) var(--clip-l, 30%));
    will-change: clip-path;
    overflow: hidden;
    contain: paint;
}

/* Force the iframe + poster onto their own GPU layer so the
   clip-path scrub on the parent doesn't trigger a main-thread
   repaint of the playing video plane each frame. translate3d +
   backface-visibility:hidden is the well-supported recipe; combined
   with the existing transform centering it stays a single transform. */
.hero__video iframe,
.hero__video img#heroPoster {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.78vh;
    height: 100%;
    min-width: 100%;
    transform: translate3d(-50%, -50%, 0);
    backface-visibility: hidden;
    border: none;
}

/* Hero mute/unmute button — follows the clip-path edge via the
   same --clip-* vars that animations.js drives on scroll. CSS calc
   keeps it in sync without a per-frame JS style write. */
.hero__mute {
    position: absolute;
    bottom: calc(var(--clip-b, 25%) + 1.5%);
    right: calc(var(--clip-r, 30%) + 1.5%);
    width: 40px;
    height: 40px;
    background: var(--blue);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    color: var(--white);
    pointer-events: auto;
    transition: background 0.3s ease, transform 0.3s ease;
}

@media (hover:hover){
.hero__mute:hover {
    background: var(--deep-blue);
    transform: scale(1.1);
}
}

.hero__mute svg {
    width: 20px;
    height: 20px;
}

/* Default: muted — show muted icon */
.hero__mute .hero__mute-vol { display: none; }
.hero__mute .hero__mute-off { display: block; }

.hero__mute:not(.is-muted) .hero__mute-vol { display: block; }
.hero__mute:not(.is-muted) .hero__mute-off { display: none; }

/* Content layer */
.hero__content {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.hero__content > * {
    pointer-events: auto;
}

/* Scattered phrases */
.hero__phrase {
    position: absolute;
    font-family: var(--font);
    color: var(--white);
}

.hero__phrase--tl {
    top: clamp(1.5rem, 3vh, 3rem);
    left: clamp(1.5rem, 3vw, 3rem);
    font-size: clamp(1.6rem, 3vw, 2.8rem);
    font-weight: var(--font-bold);
    font-style: italic;
    opacity: 0.5;
}

.hero__phrase--tr {
    top: clamp(5.5rem, 9vh, 7rem);
    right: clamp(1.5rem, 3vw, 3rem);
    font-size: clamp(0.6rem, 0.85vw, 0.8rem);
    font-weight: var(--font-medium);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.45;
}

.hero__phrase--bl {
    bottom: clamp(6rem, 14vh, 10rem);
    left: clamp(1.5rem, 3vw, 3rem);
    font-size: clamp(0.9rem, 1.3vw, 1.15rem);
    font-weight: var(--font-light);
    line-height: 1.5;
    opacity: 0.55;
}

.hero__phrase--br {
    bottom: clamp(1.5rem, 3vh, 3rem);
    right: clamp(1.5rem, 3vw, 3rem);
    font-size: clamp(1.6rem, 3vw, 2.8rem);
    font-weight: var(--font-bold);
    font-style: italic;
    opacity: 0.5;
}

.hero__cta {
    position: absolute;
    bottom: clamp(9%, 12vh, 15%);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.hero__scroll-indicator {
    position: absolute;
    bottom: clamp(1.5rem, 3vh, 2.5rem);
    left: clamp(1.5rem, 3vw, 3rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    opacity: 0.35;
    animation: heroScrollBounce 2.5s ease-in-out infinite;
}

.hero__scroll-indicator span {
    font-size: 0.6rem;
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--white);
}

.hero__scroll-indicator svg {
    width: 16px;
    height: 16px;
}

@keyframes heroScrollBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

/* Hero responsive — clip-path values must match the GSAP starting
   values in animations.js (startTop/Right/Bottom/Left for mobile)
   so the first paint already shows the same shape the scroll
   animation will animate from. Same goes for the .hero__mute
   position — it must sit at the bottom-right corner of the clipped
   video from frame 0, not at the desktop coordinates inherited from
   the base rule. GSAP also sets these inline on every scroll-tick
   (startBottom + 1.5%, startRight + 1.5%) so first paint and
   first scroll-tick agree. */
@media (max-width: 768px) {
    /* On mobile the hero is one viewport tall and scrolls past
       normally — no sticky 100vh dead zone. The 200vh + sticky
       trick exists only to give the desktop GSAP scroll-trigger
       enough scroll distance to scrub the clip-path animation.
       Since the hero GSAP is fully gated off on mobile (see
       animations.js !IS_MOBILE), there's nothing left to scrub
       and the sticky just felt like resistance. */
    .hero {
        height: 100vh;
        height: 100dvh;
    }
    .hero__sticky {
        position: relative;
        /* Mobile clip — top and bottom equal so the video sits
           dead-centre at 50 % of the hero (= 50 vh on mobile, where
           .hero is 100 dvh). Video height: 40 %. Sides 8 % keep it
           wide on a narrow viewport. .hero__video clip-path +
           .hero__mute bottom auto-follow via these vars. */
        --clip-t: 30%;
        --clip-r: 8%;
        --clip-b: 30%;
        --clip-l: 8%;
    }

    .hero__marquee-westonia {
        font-size: 22vw;
    }

    .hero__marquee-studio {
        font-size: 2vw;
    }

    /* Below 768 px both top phrases sit just under the 60 px nav so
       they don't get hidden behind the (transparent) header nav bar.
       tr is offset slightly lower so its uppercase line aligns with
       the visual baseline of the larger italic tl. */
    .hero__phrase--tl {
        top: calc(60px + 1rem);
        font-size: clamp(1.2rem, 4vw, 1.8rem);
    }

    .hero__phrase--tr {
        top: calc(60px + 1.5rem);
    }

    .hero__phrase--br {
        font-size: clamp(1.2rem, 4vw, 1.8rem);
        /* "meer beeld." sits just under the video clip edge.
           With --clip-b: 30% the video bottom is 30 % from the
           bottom of the hero; 27 % places the line a small
           breathing gap below it. */
        bottom: 27%;
    }

    .hero__phrase--bl {
        font-size: 0.8rem;
    }

    /* Bottom cluster (br + cta + usp) hugs the video's bottom edge
       so the whole composition reads as one centered group instead
       of empty space between the video and a bottom-stuck cluster. */
    .hero__cta {
        bottom: 15%;
    }

    .hero__usp {
        bottom: 9%;
    }

    /* Centre the mute button horizontally on mobile so it sits in
       the middle of the video clip area (the desktop "right edge"
       anchoring looks off-centre on a narrow viewport). Bottom
       still follows --clip-b via the unconditional rule above. */
    .hero__mute {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 480px) {
    .hero__sticky {
        /* Mirror of the 768 px clip — video centred at 50 vh. */
        --clip-t: 30%;
        --clip-r: 8%;
        --clip-b: 30%;
        --clip-l: 8%;
    }

    .hero__marquee-westonia {
        font-size: 28vw;
    }

    .hero__marquee-studio {
        font-size: 3vw;
    }

    /* On the smallest phones tr was previously hidden — now it's
       brought back as a small uppercase line under the nav, paired
       with tl on the opposite side. Both anchored relative to the
       60 px mobile nav height. */
    .hero__phrase--tl {
        top: calc(60px + 0.75rem);
        font-size: 1.1rem;
    }

    .hero__phrase--tr {
        top: calc(60px + 1.1rem);
        display: block;
        font-size: 0.65rem;
    }

    .hero__phrase--bl {
        display: none;
    }

    .hero__phrase--br {
        font-size: 1.1rem;
        bottom: 27%;
    }

    .hero__cta {
        bottom: 14%;
    }

    .hero__usp {
        bottom: 8.5%;
    }

    .hero__mute {
        width: 34px;
        height: 34px;
        /* Centering (right:auto; left:50%; transform) is inherited
           from the 768 px block — no re-declaration needed. */
    }

    .hero__mute svg {
        width: 17px;
        height: 17px;
    }
}

/* --- Pakketten --- */
.pakketten {
    position: relative;
    overflow: hidden;
}

.pakketten__title-wrap {
    margin-bottom: clamp(2rem, 4vw, 4rem);
}

.pakketten__intro {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.7;
    color: rgba(0, 0, 0, 0.6);
    max-width: 640px;
    margin-top: 1rem;
}

.pakketten__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
}

.pakket-card {
    background-color: #0000FF;
    color: #FFFFFF;
    border-radius: 0;
    padding: clamp(2rem, 3vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 380px;
    transition: transform var(--transition);
    position: relative;
    overflow: hidden;
}

@media (hover:hover){
.pakket-card:hover {
    transform: translateY(-6px);
}
}

.pakket-card__number {
    font-size: 0.75rem;
    font-weight: var(--font-medium);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 1.5rem;
}

.pakket-card__title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: var(--font-bold);
    margin-bottom: 1rem;
    line-height: 1.1;
}

.pakket-card__desc {
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.85;
    flex-grow: 1;
}

.pakket-card__solution {
    display: block;
    font-size: 0.8rem;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.pakket-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    font-size: 0.85rem;
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: gap var(--transition);
}

@media (hover:hover){
.pakket-card__link:hover {
    gap: 0.85rem;
}
}

.pakket-card__link svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.pakketten__cta {
    text-align: center;
    margin-top: clamp(2rem, 4vw, 3rem);
}

/* --- Portfolio Parallax (CKI-style) --- */
.pp {
    position: relative;
    background: var(--white);
}

.pp__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.pp__noise {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    opacity: 0.025;
}

/* ── Low-perf + reduced-motion guards ──────────────────────────
   Mirror the inline-hero rules for the rest of home.css: skip
   the second feTurbulence noise filter (.pp__noise) and stop
   any infinite or scrub-driven decoration on weaker hardware.
   The page still looks identical except for missing sensor
   noise, which is purely decorative. */
.is-reduced-motion .pp__noise,
.is-low-perf       .pp__noise { display: none; }

/* Sticky headline + logo — stays centered while items scroll past */
.pp__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

.pp__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: clamp(200px, 35vw, 500px);
    width: auto;
    fill: var(--blue);
    opacity: 0.05;
}

.pp__label {
    position: relative;
    font-size: 0.7rem;
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(0, 0, 0, 0.3);
    margin-bottom: 1.5rem;
}

.pp__headline {
    position: relative;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: var(--font-black);
    line-height: 1.05;
    color: var(--black);
}

.pp__line {
    display: block;
    transform: translateY(30px);
    transition: transform 0.9s ease;
}

.pp__line.is-visible {
    transform: translateY(0);
}

/* Items container — overlaps sticky, items flow past it */
.pp__items {
    position: relative;
    margin-top: -100vh;
    padding-top: 100vh;
    padding-bottom: 4rem;
}

/* Each item: card + video on opposite sides, center gap for sticky text */
.pp__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: clamp(6rem, 14vh, 12rem) var(--container-padding);
}

.pp__card {
    flex: 0 0 30%;
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
    padding: clamp(1.5rem, 2.5vw, 2.5rem);
    position: relative;
}

.pp__img {
    flex: 0 0 50%;
    overflow: hidden;
    position: relative;
}

/* Left: card left, video right (default) */
/* Right: video left, card right */
.pp__item--right {
    flex-direction: row-reverse;
}

.pp__num {
    display: block;
    font-size: 0.7rem;
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--blue);
    margin-bottom: 1.5rem;
}

.pp__title {
    font-size: clamp(1.4rem, 2.5vw, 2.2rem);
    font-weight: var(--font-black);
    color: var(--black);
    line-height: 1.1;
    margin-bottom: 1rem;
}

.pp__desc {
    font-size: clamp(0.85rem, 1vw, 0.95rem);
    line-height: 1.65;
    color: rgba(0, 0, 0, 0.55);
}

.pp__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    font-size: 0.75rem;
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--black);
    transition: gap var(--transition), color var(--transition);
}

@media (hover:hover){
.pp__link:hover {
    gap: 0.85rem;
    color: var(--blue);
}
}

.pp__link svg {
    width: 16px;
    height: 16px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Video embed inside .pp__img */
.pp__video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--black);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* Aspect ratio variants — set data-ratio on .pp__video */
.pp__video[data-ratio="9:16"] { aspect-ratio: 9 / 16; max-height: 65vh; width: auto; }
.pp__video[data-ratio="1:1"]  { aspect-ratio: 1 / 1; }
.pp__video[data-ratio="4:3"]  { aspect-ratio: 4 / 3; }
.pp__video[data-ratio="4:5"]  { aspect-ratio: 4 / 5; max-height: 60vh; width: auto; }

/* Iframe fades in when player is ready — until then, the YouTube
   thumbnail (set as background-image via JS) shows as poster.
   If player fails, .is-failed keeps the thumbnail visible. */
.pp__video iframe {
    position: absolute;
    inset: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.pp__video.is-ready iframe {
    opacity: 1;
}

/* Clickable overlay — navigates to project page */
.pp__video-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: pointer;
}

/* Mute toggle button — brand style */
.pp__mute {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    width: 36px;
    height: 36px;
    background: var(--blue);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    pointer-events: auto;
    transition: background var(--transition), transform var(--transition);
}

@media (hover:hover){
.pp__mute:hover {
    background: var(--deep-blue);
    transform: scale(1.1);
}
}

.pp__mute svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--white);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pp__mute svg polygon {
    fill: var(--white);
    stroke: none;
}

/* Default state: muted — show muted icon */
.pp__mute .pp__ico-vol { display: none; }
.pp__mute .pp__ico-muted { display: block; }

/* Unmuted: swap icons */
.pp__video:not(.is-muted) .pp__mute .pp__ico-vol { display: block; }
.pp__video:not(.is-muted) .pp__mute .pp__ico-muted { display: none; }

.pp__cta {
    position: relative;
    text-align: center;
    padding: clamp(3rem, 8vh, 6rem) var(--container-padding) clamp(5rem, 12vh, 10rem);
}

.pp__cta-text {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: rgba(0, 0, 0, 0.4);
    margin-bottom: 1.5rem;
}

/* PP Responsive */
@media (max-width: 1100px) {
    .pp__card { flex: 0 0 34%; }
    .pp__img { flex: 0 0 46%; }
}

@media (max-width: 900px) {
    /* PP sticky stays sticky on mobile too — same overlap pattern as
       desktop. Gives the same visual feel: headline + W icon stay
       centered while the project cards scroll past. */
    .pp__sticky {
        position: sticky;
        top: 0;
        height: 100vh;
    }

    .pp__line {
        opacity: 1;
        transform: none;
    }

    .pp__item {
        flex-direction: column;
        padding-top: clamp(3rem, 6vh, 5rem);
        padding-bottom: clamp(4rem, 8vh, 6rem);
    }

    .pp__item:last-child {
        border-bottom: none;
    }

    .pp__item--right {
        flex-direction: column;
    }

    .pp__card { flex: none; width: 100%; }
    .pp__img { flex: none; width: 100%; }

    .pp__video[data-ratio="9:16"] { max-height: 55vh; }
    .pp__video[data-ratio="4:5"]  { max-height: 50vh; }

    .pp__icon {
        height: clamp(150px, 30vw, 350px);
    }
}

@media (max-width: 480px) {
    .pp__headline {
        font-size: 2rem;
    }

    /* Keep the W icon visible on the smallest viewports too, just
       a touch smaller to fit. */
    .pp__icon {
        display: block;
        height: clamp(140px, 50vw, 240px);
    }

    .pp__mute {
        width: 32px;
        height: 32px;
        bottom: 0.5rem;
        right: 0.5rem;
    }

    .pp__mute svg {
        width: 15px;
        height: 15px;
    }
}

/* --- Workflow --- */
.workflow {
    position: relative;
    overflow-x: clip;
}

.workflow__arena {
    position: relative;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.workflow__heading {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 4rem);
}

/* Second heading "Zo werken wij." that appears below the cleaned-up
   grid on mobile only — desktop still uses the single-heading text-
   swap animation in the pinned chaos timeline. */
.workflow__heading--end {
    display: none;
}
@media (max-width: 1024px) {
    .workflow__heading--end {
        display: block;
        text-align: center;
        margin-top: clamp(2rem, 5vw, 3rem);
        margin-bottom: 0;
    }
}

.workflow__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(1rem, 2vw, 2rem);
    position: relative;
    z-index: 2;
}

.workflow-step {
    position: relative;
    padding: clamp(1.5rem, 2vw, 2rem);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0;
    background: var(--white);
    transition: border-color var(--transition), background var(--transition);
}

@media (hover:hover){
.workflow-step:hover {
    border-color: var(--blue);
    background: rgba(0, 0, 255, 0.04);
}
}

.workflow-step__number {
    font-size: clamp(2rem, 3vw, 3.5rem);
    font-weight: var(--font-black);
    color: var(--blue);
    line-height: 1;
    margin-bottom: 1rem;
}

.workflow-step__title {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    font-weight: var(--font-bold);
    color: var(--black);
    margin-bottom: 0.75rem;
}

.workflow-step__desc {
    font-size: 0.85rem;
    line-height: 1.55;
    color: rgba(0, 0, 0, 0.55);
}

/* Fake chaos steps — hidden by default so there's no pile of grey
   boxes stacked at the arena's top/left before GSAP scatters them
   into their chaos positions. animations.js flips these to
   display:block (via gsap.set) once the workflow timeline is
   configured, so a visitor without JS never sees the decoration —
   which is fine, the real numbered steps are the actual content. */
.workflow-step--fake {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(130px, 15vw, 190px);
    z-index: 1;
    border-style: dashed;
    border-color: rgba(0, 0, 0, 0.15);
}

.workflow-step--fake .workflow-step__number {
    color: rgba(0, 0, 0, 0.25);
}

.workflow-step--fake .workflow-step__title {
    color: rgba(0, 0, 0, 0.45);
}

.workflow-step--fake .workflow-step__desc {
    color: rgba(0, 0, 0, 0.3);
}

/* Mobile-only extra fake — animations.js only flips it to block
   inside the (max-width:1024px) matchMedia branch, so desktop
   never renders it and we can keep the CSS default at "none" from
   the parent .workflow-step--fake rule. */

/* Smaller watermark in workflow + pakketten */
.workflow .brand-watermark--section,
.pakketten .brand-watermark--section {
    width: clamp(95px, 16vw, 220px);
}

/* SVG chaos lines */
.workflow__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.workflow__chaos-path {
    fill: none;
    stroke: var(--blue);
    stroke-width: 1.5;
    stroke-opacity: 0.15;
    stroke-dasharray: 8 6;
}

/* Scroll hint */
.workflow__scroll-hint {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: rgba(0, 0, 0, 0.25);
    font-size: 0.65rem;
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    z-index: 3;
}

.workflow__scroll-hint svg {
    width: 18px;
    height: 18px;
    animation: wfBounce 2s ease-in-out infinite;
}

@keyframes wfBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

/* --- Team Preview --- */
.team-preview {
    position: relative;
}

.team-preview__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 2vw, 2rem);
    margin-top: clamp(2rem, 4vw, 4rem);
    max-width: 900px;
}

.team-card {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    aspect-ratio: 3/4;
}

.team-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

@media (hover:hover){
.team-card:hover .team-card__img {
    transform: none;
}
}

.team-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 50%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(1.5rem, 2vw, 2rem);
}

.team-card__icon {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 30px;
    height: auto;
    fill: var(--blue);
}

.team-card__name {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: var(--font-bold);
    color: var(--white);
}

.team-card__role {
    font-size: 0.85rem;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.25rem;
}

.team-preview__cta {
    margin-top: clamp(2rem, 4vw, 3rem);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .pakketten__grid {
        grid-template-columns: 1fr;
    }

    .workflow__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .workflow__arena {
        min-height: auto;
    }

    .workflow__lines {
        display: none !important;
    }

    .workflow-step--fake {
        width: clamp(100px, 28vw, 160px);
    }
}

@media (max-width: 768px) {
    .workflow__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Smaller chaos boxes on mobile so the warboel is visible
       above the fold alongside the heading instead of dominating
       the whole viewport. Real cards stay full-width (single col),
       fake cards shrink to ~40% so multiple fit in view. */
    .workflow-step {
        padding: 1rem 1.25rem;
    }

    .workflow-step__number {
        font-size: 1.6rem;
        margin-bottom: 0.5rem;
    }

    .workflow-step__title {
        font-size: 0.95rem;
        margin-bottom: 0.4rem;
    }

    .workflow-step__desc {
        font-size: 0.78rem;
        line-height: 1.45;
    }

    .workflow-step--fake {
        width: clamp(110px, 38vw, 150px);
        max-width: none;
        padding: 0.75rem 0.9rem;
    }

    .workflow-step--fake .workflow-step__number {
        font-size: 1.2rem;
        margin-bottom: 0.3rem;
    }

    .workflow-step--fake .workflow-step__title {
        font-size: 0.78rem;
        margin-bottom: 0.25rem;
    }

    .workflow-step--fake .workflow-step__desc {
        font-size: 0.7rem;
        line-height: 1.35;
    }

    /* Heading: smaller on mobile so the chaos has visual breathing
       room instead of being pushed below the fold. */
    .workflow__heading {
        font-size: clamp(1.75rem, 7vw, 2.6rem);
        margin-bottom: 1.5rem;
    }

    .pakket-card {
        min-height: auto;
    }

    /* Tighten vertical rhythm on mobile: PP CTA hugs the videos above
       and keeps its bottom padding so it doesn't crash into the next
       section. (Inverse of the desktop default.) */
    .pp__cta {
        padding-top: 0;
    }

    /* PP videos block: keep top spacing, drop the bottom so the CTA
       sits closer to the last video card. */
    .pp__items {
        padding-bottom: 0;
    }

    /* Team preview grid sits flush under its heading */
    .team-preview__grid {
        margin-top: 0;
    }
}

@media (max-width: 600px) {
    .team-preview__grid {
        grid-template-columns: 1fr;
    }
}