/* ===========================================================
   Stories for Live — shared design system
   Brand palette + fonts from merkpresentatie Stories for Live DEF.pdf
   =========================================================== */
:root{
  /* Exact brand palette */
  --beige:#f0ece6;
  --navy:#131228;
  --green:#b4c50b;
  --orange:#ec640d;
  --lavender:#7688c4;
  --purple:#5c4696;

  --bg:#0d0c1c;
  --bg-2:#131228;
  --surface:#1a1934;
  --surface-2:#211f40;
  --line:rgba(240,236,230,.10);
  --text:var(--beige);
  --muted:#a7a3bd;
  --muted-2:#74708f;

  --grad: linear-gradient(100deg, var(--purple) 0%, var(--lavender) 26%, var(--orange) 68%, var(--green) 100%);
  --grad-soft: linear-gradient(100deg, rgba(92,70,150,.20), rgba(118,136,196,.18) 30%, rgba(236,100,13,.18) 68%, rgba(180,197,11,.18));

  --maxw:1180px;
  --radius:18px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"proxima-nova",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:300;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
section{position:relative}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
h1,h2,h3,h4,h5{font-weight:700;letter-spacing:-.01em}

/* The brand "Live." mark — Proxima Nova bold, per logo lockup */
.live-mark{font-family:"proxima-nova",sans-serif;font-weight:700;letter-spacing:-.02em}

.eyebrow{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);font-weight:600}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 24px;border-radius:999px;font-weight:600;font-size:.92rem;
  font-family:inherit; /* <button> elements don't inherit the page font by default */
  min-height:44px;
  transition:transform .25s var(--ease), box-shadow .3s var(--ease), opacity .25s, background .3s;
  cursor:pointer;border:none;
}
.btn.btn-primary{background:var(--orange);color:#fff;box-shadow:0 8px 26px -8px rgba(236,100,13,.55)}
.btn.btn-primary:hover{transform:translateY(-2px);background:#f47425;color:#fff;box-shadow:0 14px 34px -8px rgba(236,100,13,.7)}
.btn-ghost{border:1px solid var(--line);color:var(--text);background:transparent}
.btn-ghost:hover{background:rgba(240,236,230,.05);transform:translateY(-2px)}

/* ---------- NAV ---------- */
header.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .4s var(--ease),border-color .4s var(--ease);border-bottom:1px solid transparent}
header.nav.scrolled{background:rgba(13,12,28,.72);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:42px;width:auto}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:.93rem;color:var(--muted);font-weight:500;transition:color .25s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text)}
.nav-toggle{display:none;background:none;border:none;color:var(--text);cursor:pointer;flex-direction:column;gap:5px;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.nav-toggle span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:.3s}
.nav-actions{display:flex;align-items:center;gap:12px}
/* Language toggle — gradient pill that crossfades per language:
   NL = orange→lavender, EN = apple green→purple (brand palette p.15) */
.lang-toggle{
  position:relative;overflow:hidden;isolation:isolate;
  background:transparent;border:1px solid rgba(240,236,230,.22);color:#fff;
  font-family:inherit;font-weight:700;font-size:.8rem;letter-spacing:.1em;
  padding:0 17px;border-radius:999px;cursor:pointer;min-height:38px;line-height:1;
  text-shadow:0 1px 6px rgba(19,18,40,.45);
  transition:transform .25s var(--ease),box-shadow .3s var(--ease),border-color .25s;
}
.lang-toggle::before,.lang-toggle::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  transition:opacity .65s var(--ease);
}
.lang-toggle::before{background:linear-gradient(115deg,var(--lavender),var(--purple));opacity:1}
.lang-toggle::after{background:linear-gradient(115deg,var(--purple),var(--lavender));opacity:0}
.lang-toggle.is-en::before{opacity:0}
.lang-toggle.is-en::after{opacity:1}
.lang-toggle:hover{transform:translateY(-1px);border-color:rgba(240,236,230,.4);box-shadow:0 8px 20px -8px rgba(0,0,0,.55)}

/* ---------- HOME HERO (gateway) ---------- */
.hero{min-height:100vh;display:flex;align-items:center;padding:120px 0 80px;overflow:hidden}
.hero-glow{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-glow .burst{position:absolute;right:-8%;top:46%;transform:translateY(-50%);width:min(640px,64vw);opacity:.85;filter:drop-shadow(0 0 60px rgba(92,70,150,.4));animation:floaty 9s ease-in-out infinite}
.hero-glow::before{content:"";position:absolute;right:0;top:50%;transform:translate(20%,-50%);width:640px;height:640px;border-radius:50%;background:radial-gradient(circle, rgba(236,100,13,.20), rgba(92,70,150,.14) 45%, transparent 70%);filter:blur(20px)}
@keyframes floaty{0%,100%{transform:translateY(-50%)}50%{transform:translateY(-54%)}}
.hero-inner{position:relative;z-index:2;width:100%}
.hero h1{font-size:clamp(2.5rem,6vw,4.6rem);line-height:1.03;font-weight:700;letter-spacing:-.02em;margin:22px 0 22px;max-width:780px}
.hero p.lead{font-size:clamp(1.05rem,2.1vw,1.28rem);color:var(--muted);max-width:580px;margin-bottom:46px;font-weight:300}

/* ---------- PATHWAYS (3 sub-brand cards) ---------- */
.pathways{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pathway{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px 26px;overflow:hidden;cursor:pointer;
  transition:transform .4s var(--ease),border-color .4s,background .4s;
  min-height:230px;
}
.pathway::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:var(--accent,var(--grad));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.pathway:hover{transform:translateY(-6px);border-color:rgba(240,236,230,.18);background:var(--surface-2)}
.pathway:hover::before{transform:scaleX(1)}
.pathway .pnum{font-size:.78rem;letter-spacing:.2em;color:var(--muted-2);font-weight:600}
.pathway h3{font-size:1.55rem;margin:14px 0 10px;font-weight:300}
.pathway p{color:var(--muted);font-size:.96rem;font-weight:300;flex:1}
.pathway .go{margin-top:18px;display:inline-flex;align-items:center;gap:8px;color:var(--text);font-weight:600;font-size:.92rem}
.pathway .go .arrow{transition:transform .3s var(--ease)}
.pathway:hover .go .arrow{transform:translateX(5px)}
.pathway .dot{width:40px;height:40px;border-radius:11px;background:var(--accent-soft,var(--grad-soft));border:1px solid var(--line);display:grid;place-items:center}

/* ---------- SUB-PAGE HERO ---------- */
.subhero{padding:150px 0 90px;overflow:hidden;position:relative}
.subhero::before{content:"";position:absolute;inset:0;background:var(--accent-glow,radial-gradient(60% 80% at 80% 20%,rgba(236,100,13,.18),transparent 60%));z-index:0}
.subhero .wrap{position:relative;z-index:2}
.subhero .crumb{color:var(--muted);font-size:.9rem;margin-bottom:22px;display:inline-flex;gap:8px;align-items:center}
.subhero .crumb a:hover{color:var(--text)}
.subhero h1{font-size:clamp(2.8rem,7vw,5.4rem);line-height:1.02;font-weight:300;letter-spacing:-.02em;margin-bottom:22px}
.subhero p.lead{font-size:clamp(1.08rem,2.2vw,1.4rem);color:var(--muted);max-width:640px;font-weight:300;margin-bottom:36px}
.subhero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- GENERIC SECTIONS ---------- */
.sec{padding:100px 0}
.sec-alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:660px;margin-bottom:52px}
.sec-head h2{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:14px 0 16px}
.sec-head h2.h2-lg{font-size:clamp(2.15rem,4.8vw,3.4rem)}
.sec-head p{color:var(--muted);font-size:1.06rem;font-weight:300}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;position:relative;overflow:hidden;transition:transform .4s var(--ease),border-color .4s,background .4s}
.card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--accent,var(--grad));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.card:hover{transform:translateY(-6px);border-color:rgba(240,236,230,.18);background:var(--surface-2)}
.card:hover::before{transform:scaleX(1)}
.card .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;background:var(--accent-soft,var(--grad-soft));border:1px solid var(--line);color:var(--text)}
.card h3{font-size:1.18rem;margin-bottom:9px}
.card p{color:var(--muted);font-size:.96rem;font-weight:300}

/* Elevations product cards: 2×2, picture on top + icon badge + text below */
.elev-products{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.prod-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:inherit;transition:transform .4s var(--ease),border-color .4s,background .4s}
.prod-card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;z-index:3;background:var(--accent,var(--grad));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.prod-card:hover{transform:translateY(-6px);border-color:rgba(240,236,230,.18);background:var(--surface-2)}
.prod-card:hover::before{transform:scaleX(1)}
.prod-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.prod-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s var(--ease)}
.prod-card:hover .prod-media img{transform:scale(1.05)}
.prod-body{padding:28px 28px 26px;display:flex;flex-direction:column;flex:1}
.prod-body h3{font-size:1.35rem;margin-bottom:9px}
.prod-body p{color:var(--muted);font-size:.98rem;font-weight:300;flex:1}
.prod-body em{display:block;font-style:normal;font-weight:600;color:var(--text);margin-bottom:7px}
.prod-go{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;color:var(--text)}
.prod-go .arrow{transition:transform .3s var(--ease)}
.prod-card:hover .prod-go .arrow{transform:translateX(5px)}

/* Video-embed placeholders (product pages): drop an <iframe> into a .video-slot */
.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.video-slot{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;
  background:var(--surface);border:1px dashed rgba(240,236,230,.2);
  display:grid;place-items:center;text-align:center;gap:12px;transition:border-color .3s var(--ease),background .3s var(--ease)}
.video-slot:hover{border-color:rgba(240,236,230,.34);background:var(--surface-2)}
.video-slot .vs-play{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft,var(--grad-soft));border:1px solid var(--line);color:var(--text)}
.video-slot .vs-label{color:var(--muted-2);font-size:.85rem;letter-spacing:.04em;font-weight:500}
.video-slot iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Single auto-playing video (AquaDrums intro) */
.video-single{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--surface);box-shadow:0 30px 60px -30px rgba(0,0,0,.6);scroll-margin-top:80px}
.video-single video{width:100%;height:100%;object-fit:cover;display:block}
/* mute / unmute toggle */
.vid-mute{position:absolute;right:16px;bottom:16px;z-index:5;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:#fff;
  background:rgba(13,12,28,.5);border:1px solid rgba(240,236,230,.3);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:background .25s,transform .25s}
.vid-mute:hover{background:rgba(13,12,28,.78);transform:translateY(-1px)}
.vid-mute svg{width:20px;height:20px;display:block}
.vid-mute .icon-on{display:none}
.vid-mute.unmuted .icon-off{display:none}
.vid-mute.unmuted .icon-on{display:block}
/* fullscreen toggle (mobile only) */
.vid-fs{display:none;position:absolute;right:70px;bottom:16px;z-index:5;width:46px;height:46px;border-radius:50%;
  place-items:center;cursor:pointer;color:#fff;
  background:rgba(13,12,28,.5);border:1px solid rgba(240,236,230,.3);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:background .25s}
.vid-fs svg{width:20px;height:20px;display:block}
@media(max-width:760px){
  .vid-fs{display:grid}
}
/* In fullscreen: show the whole frame (letterbox) so tilting to landscape fits the video */
video:fullscreen{object-fit:contain;background:#000}
video:-webkit-full-screen{object-fit:contain;background:#000}
/* All widths: video spans the full viewport width (full-bleed) */
.video-single{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-radius:0;border-left:0;border-right:0;box-shadow:none}

/* Animated "scroll down" cue in the banner (desktop only) */
.scroll-cue{display:none}
@media(min-width:761px){
  .scroll-cue{position:absolute;right:26px;bottom:22px;z-index:4;display:inline-flex;align-items:center;gap:11px;
    color:var(--beige);font-size:.9rem;font-weight:600;letter-spacing:.01em;text-shadow:0 1px 10px rgba(0,0,0,.55);transition:color .25s}
  .scroll-cue:hover{color:#fff}
  .scroll-cue-arrow{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
    background:rgba(13,12,28,.4);border:1px solid rgba(240,236,230,.28);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:scrollbob 1.8s ease-in-out infinite}
  .scroll-cue-arrow svg{width:20px;height:20px}
}
@keyframes scrollbob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* Product-detail content helpers (AquaDrums etc.) */
.ad-2{grid-template-columns:repeat(2,1fr)}
.ad-4{grid-template-columns:repeat(4,1fr)}
.accent-text{background:var(--accent,var(--grad));-webkit-background-clip:text;background-clip:text;color:transparent}
.pullquote-q{text-align:center;max-width:880px;margin:0 auto;font-size:clamp(1.55rem,3.6vw,2.5rem);font-weight:700;letter-spacing:-.02em;line-height:1.18}

/* Use-case cards with photo + overlaid title + text below (AquaDrums) */
.usecase-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .4s var(--ease),border-color .4s,background .4s}
.usecase-card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;z-index:3;background:var(--accent,var(--grad));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.usecase-card:hover{transform:translateY(-6px);border-color:rgba(240,236,230,.18);background:var(--surface-2)}
.usecase-card:hover::before{transform:scaleX(1)}
.uc-media{display:block;position:relative;aspect-ratio:3/2;overflow:hidden}
.uc-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .55s var(--ease)}
/* the purple screen sits at x=853-1198 of a 1200px-wide source photo — right at
   the image's own edge — so the crop window is pushed as far right as it can go
   (100%) to show the full screen instead of clipping part of it off */
.uc-media img[src*="opmaat-video"]{object-position:100% center}
.usecase-card:hover .uc-media img{transform:scale(1.05)}
.uc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,12,28,.9) 0%,rgba(13,12,28,.45) 42%,rgba(13,12,28,0) 78%)}
.uc-title{position:absolute;left:26px;right:26px;bottom:20px;z-index:2;margin:0;font-size:clamp(1.5rem,3vw,1.9rem);font-weight:700;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.55)}
.uc-body{padding:22px 26px 26px}
.uc-body p{color:var(--muted);font-size:.98rem;font-weight:300}
/* smaller image tiles — maatwerk (4 across on desktop) */
.uc-sm .uc-title{font-size:clamp(1rem,1.35vw,1.18rem);left:16px;right:16px;bottom:13px}
.uc-sm .uc-media::after{background:linear-gradient(to top,rgba(13,12,28,.9) 0%,rgba(13,12,28,.4) 46%,rgba(13,12,28,0) 80%)}
.uc-sm .uc-body{padding:14px 16px 18px}
.uc-sm .uc-body p{font-size:.9rem}

/* AquaDrums maatwerk: center-stage carousel (desktop) — one big tile in the
   middle with its text revealed, the neighbours peek smaller at the sides
   (titles always visible), the 4th card hides behind the center. Arrows
   rotate the ring; clicking a side tile slides it to the center. The stage
   height is set from JS (cards are absolutely positioned). */
.uc-carousel{position:relative}
.uc-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);color:var(--beige);
  transition:background .3s var(--ease),border-color .3s,color .3s}
.uc-nav:hover{background:var(--beige);border-color:var(--beige);color:var(--navy)}
.uc-nav:disabled{opacity:.28;cursor:default;pointer-events:none}
.uc-nav svg{width:20px;height:20px;display:block}
.uc-prev{left:10px}
.uc-next{right:10px}
/* carousel tiles: bigger titles, 25% shorter photos (3/2 → 2/1) */
.uc-stage .uc-media{aspect-ratio:2/1}
.uc-stage .uc-title{font-size:clamp(1.25rem,1.8vw,1.55rem)}
/* Center-stage carousel — ALL widths (mobile gets bigger cards + smaller
   arrows via the ≤760 overrides further down). */
.uc-stage{display:block;position:relative}
  /* Positioning uses `left` percentages of the stage — NO translateX(-50%).
     Percentage translates get re-resolved when a browser promotes the tile
     to its own compositing layer (hover starts a transition → Safari layer
     promotion), which visibly threw the centered tile to the right. `left`
     is resolved in layout, once, and can't drift. Card is 54% wide, so
     centered = left:23% ((100−54)/2); one slot = 58.32% (108% of the card). */
  .uc-stage .usecase-card{
    position:absolute;top:0;width:54%;left:23%;
    transform:none;
    transition:left .65s var(--ease),transform .65s var(--ease),opacity .5s var(--ease),filter .5s var(--ease),box-shadow .5s var(--ease);
  }
  /* NO keyframe animation on the card itself — starting one at the moment a
     tile becomes active kills the in-flight slide transition in some
     browsers (Safari), leaving the tile stuck off-center at the position it
     entered from. The highlight is a static glow instead. */
  .uc-stage .usecase-card.is-active{
    z-index:3;opacity:1;cursor:default;
    border-color:rgba(118,136,196,.45);background:var(--surface-2);
    box-shadow:0 24px 52px -16px rgba(118,136,196,.45);
  }
  .uc-stage .usecase-card.is-active::before{transform:scaleX(1)}
  .uc-stage .usecase-card.is-prev,
  .uc-stage .usecase-card.is-next{
    z-index:2;opacity:.55;cursor:pointer;filter:saturate(.7) brightness(.82);
  }
  .uc-stage .usecase-card.is-prev{left:-35.32%;transform:scale(.8)}
  .uc-stage .usecase-card.is-next{left:81.32%;transform:scale(.8)}
  .uc-stage .usecase-card.is-prev:hover,
  .uc-stage .usecase-card.is-next:hover{opacity:.85;filter:saturate(.9) brightness(.95)}
  /* ring carousel: both neighbours are always shown (last tile sits on the
     left of the first), so both arrows always have somewhere to go. A tile
     beyond the neighbours never dives behind the center — it slides out past
     the side it exited (off-l/off-r) and re-enters from the side it's needed
     on (JS snaps it between the two hidden slots while it's invisible). */
  .uc-stage .usecase-card.is-off-l,
  .uc-stage .usecase-card.is-off-r{z-index:1;opacity:0;pointer-events:none}
  .uc-stage .usecase-card.is-off-l{left:-93.64%;transform:scale(.8)}
  .uc-stage .usecase-card.is-off-r{left:139.64%;transform:scale(.8)}
  /* body text: only the centered tile shows it (titles stay visible on all —
     they're overlays on the photo). Hidden via opacity/translate so every
     card keeps the same box height. */
  .uc-stage .usecase-card .uc-body{
    opacity:0;transform:translateY(14px);
    transition:opacity .45s var(--ease) .22s,transform .45s var(--ease) .22s;
  }
  .uc-stage .usecase-card.is-active .uc-body{opacity:1;transform:none}

/* ---------- CONTACT PAGE ---------- */
/* single centered column: form panel → contact strip → booking widget */
.contact-grid{display:grid;grid-template-columns:1fr;gap:40px;max-width:820px;margin:0 auto}
/* wide desktop: form panel + booking panel side by side; strip spans the top */
@media(min-width:1000px){
  .contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:none;align-items:start}
  .contact-inline{grid-column:1 / -1}
  .contact-aside .booking-embed{height:1500px;margin-top:-250px}
}
.contact-form-panel,.contact-aside{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:34px 32px}
.contact-form-panel h2,.contact-aside h2{font-size:1.5rem;margin-bottom:8px}
.contact-aside>p{color:var(--muted);font-weight:300;margin-bottom:18px}
.contact-form-panel h2{margin-bottom:20px}
.ff{margin-bottom:16px;display:flex;flex-direction:column;gap:7px}
.ff label,.ff .ff-label{font-size:.86rem;font-weight:600;color:var(--beige)}
/* multi-select chips (onderwerp + elevations) — selected = brand purple;
   "Live." inside stays bold via the shared .live-mark class */
.chip-group{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  font:inherit;font-weight:500;font-size:.92rem;color:var(--muted);
  background:rgba(13,12,28,.55);border:1px solid var(--line);border-radius:999px;
  padding:9px 18px;min-height:44px;cursor:pointer;
  transition:border-color .25s,background .25s,color .25s,transform .25s var(--ease);
}
.chip:hover{border-color:rgba(240,236,230,.32);color:var(--text);transform:translateY(-1px)}
.chip[aria-pressed="true"]{background:var(--purple);border-color:var(--purple);color:#fff}
.chip[aria-pressed="true"]:hover{background:#6a51ab;border-color:#6a51ab}
.ff .form-error{margin:4px 0 0}
.ff input,.ff select,.ff textarea{
  width:100%;background:rgba(13,12,28,.55);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;color:var(--text);font:inherit;font-weight:300;
  transition:border-color .25s,background .25s;
}
.ff input:focus,.ff select:focus,.ff textarea:focus{border-color:var(--lavender);outline:none;background:rgba(13,12,28,.75)}
.ff textarea{resize:vertical;min-height:130px}
.ff select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a7a3bd' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.ff select option{background:var(--bg-2);color:var(--text)}
.ff-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ff-row .ff{margin-bottom:16px}
/* conditional field: slides open when Live. Elevations is chosen (class-driven;
   the [hidden] attribute is only the no-JS fallback and is lifted by main.js) */
.ff-conditional{max-height:0;opacity:0;margin-bottom:0;overflow:hidden;
  transition:max-height .45s var(--ease),opacity .4s var(--ease),margin-bottom .45s var(--ease)}
.ff-conditional.open{max-height:130px;opacity:1;margin-bottom:16px}
/* honeypot: invisible to people, tempting for bots */
.ff-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-msg{font-size:.92rem;margin:0 0 14px}
.form-error{color:#f47425}
.form-success{padding:14px 0 4px}
.form-success h3{font-size:1.3rem;margin-bottom:8px}
.form-success p{color:var(--muted);font-weight:300}
#cfSubmit{width:100%;justify-content:center}
#cfSubmit:disabled{opacity:.6;cursor:default;transform:none}
/* Google's booking page has no official theming — recolored from outside:
   1) invert() flips the white UI dark and keeps neutrals NEUTRAL (crisp
      near-white text), 2) hue-rotate() turns Google-blue accents into the
      brand purple, 3) mix-blend-mode:screen over the navy .booking-frame
      backdrop tints the dark background to the same blue as the contact
      form panel (var(--surface)) without staining the text. isolation
      limits the blend to the frame. Caveat: everything inside inverts,
      including avatars/photos — remove filter+blend to go back to light. */
.booking-frame{background:var(--surface);border-radius:var(--radius);isolation:isolate;overflow:hidden}
/* tall enough that Google's slot list + footer fit WITHOUT internal
   scrolling; overshoot is invisible (inverted white = navy = frame color) */
.booking-embed{display:block;width:100%;height:1260px;border:0;background:#fff;
  filter:invert(.94) hue-rotate(215deg) saturate(.75) contrast(1.28) brightness(1.05);
  mix-blend-mode:screen}
/* the subhero already carries 90px bottom padding — the section's own top
   padding would double the gap above the contact strip */
#bericht.sec{padding-top:0}
.page-contact .subhero{padding-bottom:40px}
.page-contact .subhero .lead{margin-bottom:0} /* its 36px margin doubled the gap above the strip */
/* booking aside: avatar with gradient ring + soft pulse, name below.
   The pulse animation lives on the WRAP (no transitions on it) — never
   animate an element that also transitions (carousel lesson). */
.booking-person{display:flex;flex-direction:column;align-items:flex-start;margin:2px 0 16px}
.booking-avatar-wrap{
  width:104px;height:104px;padding:4px;border-radius:50%;display:block;
  background:linear-gradient(135deg,var(--purple),var(--lavender));
  animation:avatarPulse 2.6s ease-in-out infinite;
}
.booking-avatar-wrap img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
@keyframes avatarPulse{
  0%{box-shadow:0 0 0 0 rgba(118,136,196,.45)}
  70%{box-shadow:0 0 0 14px rgba(118,136,196,0)}
  100%{box-shadow:0 0 0 0 rgba(118,136,196,0)}
}
.booking-name{font-family:"proxima-nova",sans-serif;font-weight:700;font-size:1.5rem;letter-spacing:-.01em;margin-top:12px;width:104px;text-align:center}
/* contact strip above the form */
.contact-inline{display:flex;flex-direction:column;gap:5px}
.contact-inline .brand-line{font-size:1.2rem;font-weight:300;margin-bottom:3px}
.contact-inline > a,.contact-inline > span{color:var(--muted);font-weight:300;width:fit-content;transition:color .25s}
.contact-inline .ci-row{display:flex}
.contact-inline .ci-label{flex:0 0 auto;min-width:11.3em}
.contact-inline a:hover{color:var(--lavender)}

/* Ambient motion (AquaDrums): floating tip titles, Ken Burns photos */
@keyframes gentleFloatSm{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.tips-band-titles h3{animation:gentleFloatSm 6s ease-in-out infinite}
.tips-band-titles h3:last-child{animation-delay:-3s}
@keyframes kenburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(-1.4%,1%)}}
#inzet .uc-media img{animation:kenburns 20s ease-in-out infinite alternate}
.quote-band-img{animation:kenburns 26s ease-in-out infinite alternate}
@keyframes ctaBreathe{
  0%,100%{box-shadow:0 8px 26px -8px rgba(236,100,13,.55)}
  50%{box-shadow:0 12px 36px -4px rgba(236,100,13,.85)}
}
.page-aquadrums .btn.btn-primary{animation:ctaBreathe 3.2s ease-in-out infinite}

/* AquaDrums banner hero (full-bleed mirrored photo, title on top) */
.ad-hero{position:relative;min-height:62vh;display:flex;align-items:flex-end;overflow:hidden}
.ad-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left center;transform:scaleX(-1)}
.ad-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#0d0c1c 0%,rgba(13,12,28,.82) 20%,rgba(13,12,28,.32) 50%,transparent 80%)}
.ad-hero-inner{position:relative;z-index:2;width:100%;padding-bottom:44px}
.ad-hero .crumb{color:var(--beige);font-size:.9rem;margin-bottom:16px;display:inline-flex;gap:8px;align-items:center;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.ad-hero .crumb a:hover{color:#fff}
.ad-hero-title{font-size:clamp(3.2rem,11vw,7.5rem);font-weight:700;letter-spacing:-.035em;line-height:.94;text-shadow:0 4px 34px rgba(0,0,0,.4)}

/* Intro block beneath the banner */
.ad-intro{padding:28px 0 24px}
.sec-tight-top{padding-top:48px}
.ad-video2{padding:0}
.ad-payoff{font-size:clamp(1.7rem,4.4vw,2.7rem);font-weight:800;letter-spacing:-.02em;line-height:1.04;margin-bottom:18px;
  background:var(--accent,linear-gradient(100deg,var(--purple),var(--lavender)));-webkit-background-clip:text;background-clip:text;color:transparent}
.ad-intro .lead{font-size:clamp(1.08rem,2.2vw,1.32rem);color:var(--muted);max-width:680px;font-weight:300}
.ad-intro .subhero-cta{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}

/* Quote band with full-bleed photo — brochure page-5 style */
.quote-band{position:relative;overflow:hidden;min-height:min(78vh,660px);display:flex;align-items:flex-end}
.quote-band-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:22% center}
.quote-band::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(13,12,28,.12) 35%,rgba(13,12,28,.5) 100%)}
.quote-band-inner{position:relative;z-index:2;width:100%;padding-bottom:58px;text-align:right}
.quote-band .qlabel{color:#fff;font-weight:700;font-size:1rem;margin-bottom:12px;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.quote-band .qtext{color:var(--green);font-weight:800;letter-spacing:-.02em;line-height:1.03;font-size:clamp(2rem,5.4vw,3.7rem);margin-left:auto;max-width:15ch;text-shadow:0 2px 22px rgba(0,0,0,.35)}

/* Tips: video block with the two tip titles pinned to its bottom (desktop);
   body text in the tinted transparent cards below. Mobile: full-frame 16:9
   video + horizontal snap-slider of the full cards. */
.tips-band{position:relative}
.tips-band-media{position:relative;height:min(52vh,470px);overflow:hidden}
.tips-band-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tips-band-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,12,28,.82) 0%,rgba(13,12,28,.26) 40%,rgba(13,12,28,.05) 72%)}
.tips-band-titles{position:absolute;left:0;right:0;bottom:20px;z-index:2;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.tips-band-titles h3{margin:0;text-align:center;font-size:clamp(1.4rem,2.7vw,1.8rem);font-weight:700;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.55)}
.tips-cards{padding:22px 0 0;gap:0}
.card.tip-card{overflow:visible;z-index:1;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);border-color:rgba(240,236,230,.15)}
.card.tip-card::before{display:none}
.card.tip-card:hover{transform:none}
.card.tip-card h3{color:#fff}
.card.tip-card p{color:var(--beige)}
.tip-h-m{display:none;font-size:1.16rem;margin-bottom:9px}
.card.tip-purple,.card.tip-purple:hover{background:linear-gradient(180deg,rgba(92,70,150,.48) 0%,rgba(92,70,150,.2) 52%,rgba(19,18,40,.5) 100%)}
.card.tip-orange,.card.tip-orange:hover{background:linear-gradient(180deg,rgba(236,100,13,.42) 0%,rgba(236,100,13,.17) 52%,rgba(19,18,40,.5) 100%)}

/* Rising glow (all widths): connects the video's pinned titles down toward the
   cards below, via a wrapper OUTSIDE `.tips-cards` so it isn't clipped by the
   rounded-corner overflow:hidden that box needs on desktop. Own stacking
   context (z-index:1) so the glow's z-index:-1 only sinks behind ITS OWN
   content, not behind the whole video block above it. */
.tips-shape{position:relative;z-index:1}
.tips-shape::before,.tips-shape::after{content:"";position:absolute;bottom:100%;height:90px;z-index:-1;pointer-events:none}
.tips-shape::before{left:0;width:50%;background:linear-gradient(to top,rgba(92,70,150,.55),transparent)}
.tips-shape::after{right:0;width:50%;background:linear-gradient(to top,rgba(236,100,13,.5),transparent)}
/* Old per-card glow retired everywhere — replaced by the shared .tips-shape glow above */
.card.tip-card::after{display:none}
/* Each card: square top (flush with the glow), rounded bottom, no border —
   applies at all widths. On mobile the two cards stay independent (swiped one
   at a time, so no seam risk); on desktop they ALSO get a merged single
   background below so there's no seam even when shown side by side. */
.card.tip-purple,.card.tip-orange{border-radius:0 0 var(--radius) var(--radius);border:none}

/* Desktop only: merge the two cards into one seamless painted surface (a
   single shared background on the parent, not two abutting elements) —
   requires overflow:hidden, which would break the mobile swipe, so it's
   scoped here. */
@media(min-width:761px){
  .tips-cards{
    overflow:hidden;border-radius:0 0 var(--radius) var(--radius);
    background-image:
      linear-gradient(180deg,rgba(92,70,150,.48) 0%,rgba(92,70,150,.2) 52%,rgba(19,18,40,.5) 100%),
      linear-gradient(180deg,rgba(236,100,13,.42) 0%,rgba(236,100,13,.17) 52%,rgba(19,18,40,.5) 100%);
    background-size:50% 100%,50% 100%;
    background-position:left top,right top;
    background-repeat:no-repeat,no-repeat;
  }
  .card.tip-purple,.card.tip-orange,.card.tip-purple:hover,.card.tip-orange:hover{background:none}
}

/* numbered steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:step}
.step{position:relative;padding-top:26px}
.step::before{counter-increment:step;content:"0" counter(step);font-size:2.3rem;font-weight:700;letter-spacing:-.03em;background:var(--accent,var(--grad));-webkit-background-clip:text;background-clip:text;color:transparent;display:block;margin-bottom:10px}
.step h4{font-size:1.08rem;margin-bottom:7px}
.step p{color:var(--muted);font-size:.93rem;font-weight:300}

/* simple feature list rows */
.rows{display:grid;gap:14px;max-width:780px}
.row{display:flex;gap:18px;align-items:flex-start;padding:22px 24px;background:var(--surface);border:1px solid var(--line);border-radius:14px;transition:background .35s,transform .35s var(--ease)}
.row:hover{background:var(--surface-2);transform:translateX(4px)}
.row .rk{font-weight:700;font-size:1.05rem;min-width:42px;color:var(--text)}
.row .rv h4{font-size:1.05rem;margin-bottom:5px}
.row .rv p{color:var(--muted);font-size:.95rem;font-weight:300}

/* ---------- CASES GRID ---------- */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.case-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .4s var(--ease),border-color .4s,background .4s}
.case-card::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:var(--accent,var(--grad));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);z-index:2}
.case-card:hover{transform:translateY(-6px);border-color:rgba(240,236,230,.18);background:var(--surface-2)}
.case-card:hover::before{transform:scaleX(1)}
.case-logo{background:var(--beige);height:132px;display:grid;place-items:center;padding:26px 30px}
.case-logo img{max-height:62px;max-width:80%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.85;transition:filter .3s var(--ease),opacity .3s var(--ease)}
.case-card:hover .case-logo img{filter:grayscale(0);opacity:1}
.case-body{padding:20px 24px 24px}
.case-body h3{font-size:1.16rem;margin-bottom:5px}
.case-body .sector{color:var(--muted);font-size:.9rem;font-weight:300}

/* ---------- CLIENTS / SOCIAL PROOF ---------- */
.clients-sec{padding:24px 0 36px}
.clients-head{text-align:center;max-width:640px;margin:0 auto 40px}
.clients-head .clients-line{color:var(--muted);font-size:1.05rem;font-weight:300;margin-top:12px}
/* Carousel: two identical groups scroll seamlessly (-50%), pause on hover.
   Vertical padding gives the hover-lift headroom so overflow:hidden doesn't
   clip the top of a chip as it rises. */
.clients-marquee{overflow:hidden;position:relative;padding:14px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
/* Desktop: carousel spans the full viewport width (full-bleed) */
@media(min-width:761px){
  .clients-marquee{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
}
.clients-track{display:flex;width:max-content;animation:clients-scroll 42s linear infinite}
.clients-marquee:hover .clients-track,.clients-track:focus-within{animation-play-state:paused}
.clients-group{display:flex;align-items:center;gap:16px;padding-right:16px;margin:0;list-style:none}
/* AquaDrums page (#referenties) shows only 4 logos — extra breathing room so
   the loop reads less repetitive. padding-right must always equal the gap:
   the seamless -50% marquee assumes track = exactly 2× group width. */
#referenties .clients-group{gap:44px;padding-right:44px}
/* The <li> is the beige chip (fixed height, hugs the logo); the <img> is sized
   by a single fixed HEIGHT so every logo reads at the same cap-height regardless
   of aspect ratio. Images are pre-trimmed to their content box. */
.clients-group li{
  position:relative;overflow:hidden;
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  height:78px;padding:0 26px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:14px;
  transition:transform .3s var(--ease),background .3s var(--ease);
}
/* On hover: the chip itself flips to the brand beige — these logos were all
   designed for a light backdrop in the first place, so showing their true
   original colors (filter:none below) against beige is naturally legible,
   without any per-logo trickery. */
.clients-group li:hover{transform:translateY(-3px);background:var(--beige);border-color:var(--beige)}
/* Uniform beige-toned look — but unlike a flat brightness(0)-crushed silhouette
   (which made every part of a logo identically flat, e.g. Fight Cancer/Open
   Universiteit/Defensie turning into solid white blobs), grayscale(1) keeps
   each logo's OWN internal light/dark relationships, contrast(0.55) compresses
   that range so even naturally-dark marks (Rabobank, Defensie) land light
   enough to read on the dark chip, brightness(1.75) lifts the whole thing into
   the beige family, and a light sepia/saturate nudges the neutral gray warm
   (matching brand beige #f0ece6) without erasing the light/dark variation
   between different parts of each logo (verified via per-logo min/max/spread
   pixel sampling, not just eyeballing). Hover reveals each logo's true
   original color (filter:none). */
.client{
  height:40px;width:auto;display:block;
  filter:grayscale(1) contrast(.55) brightness(1.75) sepia(15%) saturate(120%);
  opacity:.85;
  transition:filter .3s var(--ease),opacity .3s var(--ease);
}
/* Fight Cancer's badge has naturally low contrast (mid-tone circle + near-white
   text) — the universal compression above flattened them too close together.
   Boost contrast instead of compressing it: darker circle, brighter letters. */
.client[src*="fight-cancer"]{filter:grayscale(1) contrast(1.6) brightness(1.05) sepia(15%) saturate(120%)}
.clients-group li:hover .client{filter:none;opacity:1}
/* Icon/near-square marks get a small optical bump so they don't read smaller
   than the wide wordmarks at the same height. */
.client[src*="fight-cancer"],.client[src*="coa"],.client[src*="rabobank"]{height:50px}
@keyframes clients-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- CTA BAND ---------- */
.cta-band{padding:110px 0}
.cta-card{position:relative;overflow:hidden;border-radius:28px;padding:70px 50px;text-align:center;background:var(--surface);border:1px solid var(--line)}
.cta-card::before{content:"";position:absolute;inset:0;background:var(--accent,var(--grad));opacity:.10}
.cta-card::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;left:50%;top:-60%;transform:translateX(-50%);background:radial-gradient(circle,rgba(236,100,13,.4),transparent 65%);filter:blur(20px)}
.cta-card>*{position:relative;z-index:2}
.cta-card h2{font-size:clamp(1.9rem,4.4vw,3rem);font-weight:700;letter-spacing:-.02em;margin-bottom:14px}
.cta-card p{color:var(--muted);max-width:540px;margin:0 auto 30px;font-size:1.06rem;font-weight:300}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line);padding:58px 0 38px;background:var(--bg-2)}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
footer img.flogo{height:50px;margin-bottom:16px}
footer .col h5{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px}
footer .col a{display:block;color:var(--muted);font-size:.95rem;padding:5px 0;transition:color .25s;font-weight:300}
footer .col a:hover{color:var(--text)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:46px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted-2);font-size:.85rem}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- ACCESSIBILITY ---------- */
:focus-visible{outline:2px solid var(--lavender);outline-offset:3px;border-radius:6px}
.skip-link{position:absolute;left:16px;top:-60px;z-index:200;background:var(--surface);color:var(--text);padding:10px 18px;border-radius:8px;border:1px solid var(--line);font-weight:600;transition:top .25s var(--ease)}
.skip-link:focus{top:16px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  /* Carousel becomes a static, centered, wrapped logo wall */
  .clients-track{animation:none;flex-wrap:wrap;justify-content:center}
  .clients-group{flex-wrap:wrap;justify-content:center;padding-right:0}
  .clients-group[aria-hidden="true"]{display:none}
  .clients-marquee{-webkit-mask-image:none;mask-image:none}
}

/* ---------- LIVE. METHOD — interactive L·I·V·E model ---------- */
.live-letters{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.live-letter{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;
  font:inherit;color:var(--text);cursor:pointer;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px 22px;
  transition:transform .4s var(--ease),border-color .4s,background .4s,box-shadow .4s var(--ease);
}
.live-letter::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:var(--ll-grad);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.live-letter:hover,.live-letter:focus-visible{transform:translateY(-6px);border-color:transparent;background:var(--surface-2);box-shadow:0 22px 50px -22px var(--ll-glow);outline:none}
.live-letter:hover::before,.live-letter:focus-visible::before{transform:scaleX(1)}
.ll-char{font-family:"proxima-nova",sans-serif;font-weight:800;font-size:clamp(3.4rem,6vw,5rem);line-height:.9;letter-spacing:-.04em;background:var(--ll-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ll-name{font-family:"proxima-nova",sans-serif;font-weight:700;font-size:1.26rem;letter-spacing:-.01em;margin-top:4px}
.ll-sub{color:var(--muted);font-size:.9rem;font-weight:300}
.ll-cue{margin-top:10px;font-size:.82rem;font-weight:600;letter-spacing:.03em;background:var(--ll-grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-flex;align-items:center;gap:6px}
.ll-cue::after{content:"→";color:var(--lavender);transition:transform .3s var(--ease)}
.live-letter:hover .ll-cue::after{transform:translateX(4px)}
/* per-phase brand-spectrum gradients + glows (L purple · I lavender · V orange · E green) */
.ll-lev{--ll-grad:linear-gradient(135deg,var(--purple),var(--lavender));--ll-glow:rgba(92,70,150,.55)}
.ll-imm{--ll-grad:linear-gradient(135deg,var(--lavender),#9fb0e0);--ll-glow:rgba(118,136,196,.5)}
.ll-val{--ll-grad:linear-gradient(135deg,var(--orange),#f59a4b);--ll-glow:rgba(236,100,13,.5)}
.ll-eng{--ll-grad:linear-gradient(135deg,var(--green),#d7e34e);--ll-glow:rgba(180,197,11,.45)}

/* phase modal (pop-up) */
.phase-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px}
.phase-modal[hidden]{display:none}
.phase-modal-backdrop{position:absolute;inset:0;background:rgba(6,6,16,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s var(--ease)}
.phase-modal.open .phase-modal-backdrop{opacity:1}
.phase-modal-panel{position:relative;z-index:1;width:min(680px,100%);max-height:88vh;overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:36px 36px 40px;opacity:0;transform:translateY(16px) scale(.985);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.phase-modal.open .phase-modal-panel{opacity:1;transform:none}
.phase-modal-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:var(--surface-2);border:1px solid var(--line);color:var(--beige);transition:background .25s,color .25s,border-color .25s}
.phase-modal-close:hover{background:var(--beige);color:var(--navy);border-color:var(--beige)}
.phase-modal-close svg{width:18px;height:18px}
.phase-detail[hidden]{display:none}
.pd-head{display:flex;align-items:center;gap:18px;margin-bottom:22px;padding-right:44px}
.pd-char{font-family:"proxima-nova",sans-serif;font-weight:800;font-size:clamp(3rem,8vw,4.2rem);line-height:.9;letter-spacing:-.04em;background:var(--ll-grad);-webkit-background-clip:text;background-clip:text;color:transparent;flex:0 0 auto}
.pd-name{font-size:1.7rem;font-weight:700;letter-spacing:-.01em}
.pd-sub{color:var(--muted);font-weight:300;font-size:1rem;margin-top:2px}
.pd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.pd-cell{background:rgba(13,12,28,.5);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.pd-label{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;background:var(--ll-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pd-val{font-size:.9rem;font-weight:400;color:var(--text);line-height:1.35}
.pd-body p{color:var(--muted);font-weight:300;margin-bottom:14px}
.pd-body p:last-child{margin-bottom:0}
body.modal-open{overflow:hidden}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  .pathways{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .case-grid{grid-template-columns:repeat(2,1fr)}
}
/* Nav collapses to hamburger below 960px: the full link row needs ~900px,
   so 761–960px would otherwise wrap/overlap (content itself stays 2-col there). */
@media(max-width:960px){
  /* menu open → the top bar goes solid dark (same paint as the dropdown
     panel below it) instead of staying blurry-transparent over the page */
  header.nav.menu-open{background:rgba(13,12,28,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line)}
  .nav-links{position:fixed;inset:74px 0 auto 0;flex-direction:column;gap:0;background:rgba(13,12,28,.97);backdrop-filter:blur(14px);padding:10px 24px 24px;border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .4s var(--ease)}
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:14px 0;width:100%;border-bottom:1px solid var(--line);font-size:1rem}
  .nav-links .btn{margin-top:14px;justify-content:center}
  .nav-toggle{display:flex}
}
@media(max-width:760px){
  .cards,.steps,.case-grid,.elev-products,.video-grid{grid-template-columns:1fr}
  .live-letters{grid-template-columns:1fr 1fr;gap:12px}
  .live-letter{padding:20px 18px 18px}
  .phase-modal{padding:0}
  .phase-modal-panel{width:100%;max-height:100vh;border-radius:0;padding:30px 22px 34px}
  .pd-grid{grid-template-columns:1fr}
  .cta-card{padding:52px 24px}
  .sec{padding:74px 0}
  .clients-sec{padding:24px 0 36px}
  .subhero{padding:120px 0 70px}
  .ad-hero{min-height:56vh}
  .ad-hero-inner{padding-bottom:32px}
  .ad-intro{padding:40px 0 28px}
  /* shorter, wide-feeling band: the 16:9 full-bleed video below is 56.25vw
     tall, this sits just a little above that — and the shorter box means
     cover no longer has to blow the photo up to fill a tall frame, so
     nearly the full image width shows (less zoomed-in) */
  .quote-band{min-height:0;height:66vw}
  .quote-band .qtext{max-width:none}
  /* crop off the top 20% of the photo — object-position can't do this here
     (with cover in this tall container the image already fills the full
     height, so vertical positioning is a no-op). Instead: oversize the image
     box to 125% and anchor it to the bottom — the section's overflow:hidden
     clips the box's top fifth. */
  .quote-band-img{height:125%;top:auto;bottom:0}
  /* full-frame 16:9 video (baked-in quote stays visible). The dual-title bar
     pinned on the video is desktop-only here — on mobile only ONE card shows
     at a time (swipe), so a static two-title overlay no longer matches what's
     below it. Titles now live inside each card (.tip-h-m) instead, right where
     that card's own colour gradient is most vivid at the top — same "glow
     rising into the title" motif as desktop, just contained per-card rather
     than bleeding above the box (which would get clipped by this slider's
     forced overflow-y:auto, a side-effect of setting only overflow-x:auto). */
  .tips-band-media{height:auto;aspect-ratio:16/9}
  .tips-band-titles{display:none}
  .tip-h-m{display:block}
  /* horizontal snap-slider; card 2 peeks to invite sliding */
  .tips-cards{display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:14px;padding:18px 0 0;scrollbar-width:none}
  .tips-cards::-webkit-scrollbar{display:none}
  .tips-cards .tip-card{flex:0 0 84%;scroll-snap-align:start}
  /* Mobile carousels: same center-stage design as desktop, sized for a
     phone — the card is 76% wide (centered = left:12%), so each neighbour
     peeks ~6% at the edge; one slot = 82.08% (108% of the card). Arrows are
     smaller and hug the screen edges; a horizontal swipe also navigates
     (wired in main.js). */
  .uc-stage .usecase-card{width:76%;left:12%}
  .uc-stage .usecase-card.is-prev{left:-70.08%}
  .uc-stage .usecase-card.is-next{left:94.08%}
  .uc-stage .usecase-card.is-off-l{left:-152.16%}
  .uc-stage .usecase-card.is-off-r{left:176.16%}
  .uc-nav{width:40px;height:40px}
  .uc-nav svg{width:17px;height:17px}
  .uc-prev{left:4px}
  .uc-next{right:4px}
  .contact-form-panel,.contact-aside{padding:26px 20px}
  .booking-embed{height:1760px}
  .ff-row{grid-template-columns:1fr}
  .clients-group li{height:62px;padding:0 18px}
  .client{height:32px}
  .client[src*="fight-cancer"],.client[src*="coa"],.client[src*="rabobank"]{height:40px}
  .clients-group{gap:12px;padding-right:12px}
  #referenties .clients-group{gap:30px;padding-right:30px}
}

/* ---------- INTRO SPLASH (homepage, first visit only) ---------- */
#introSplash{position:fixed;inset:0;z-index:9999;background:var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease)}
#introSplash video{width:100%;height:100%;object-fit:cover}
#introSplash.out{opacity:0;transform:scale(1.06);filter:brightness(1.7) saturate(1.35);pointer-events:none}
@media(orientation:portrait){#introSplash video{object-fit:contain}}