/* amresh.sr: voorkant ↔ achterkant, rustig verteld. Bouwt voort op styles.css (Zai). */
:root{
  --dark:#1d1c17;--live:#2fb344;
  --t:var(--ink);--c:var(--paper);--line:#cfcdc6;--soft:var(--muted);
  --chapter-gap:clamp(96px,12vw,200px);
}
.kicker{font-size:var(--step-small);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-light,#bfbdb5)}

/* ---------- HERO: live voorkant en achterkant ---------- */
.hero-live{position:relative;order:2;margin:0;min-height:0;background:var(--dark);overflow:hidden;isolation:isolate}
.hl-back,.hl-front{position:absolute;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.55)}
.hl-back img,.hl-front img{width:100%;height:100%;object-fit:cover;object-position:top left}
.hl-back{left:9%;right:-14%;top:10%;aspect-ratio:16/10;background:#fff}
.hl-front{left:-6%;width:78%;bottom:9%;aspect-ratio:16/10;border:6px solid var(--paper)}
.js .hl-back{animation:hlBack 1.4s var(--ease) .2s backwards}
.js .hl-front{animation:hlFront 1.4s var(--ease) .45s backwards}
@keyframes hlBack{from{opacity:0;transform:translate(6%,-4%)}}
@keyframes hlFront{from{opacity:0;transform:translate(-6%,6%)}}
.hl-tag{position:absolute;z-index:2;background:var(--paper);color:var(--ink);font-size:var(--step-small);font-weight:600;padding:6px 10px}
.hl-tag-back{top:calc(10% - 34px);left:9%}
.hl-tag-front{bottom:calc(9% - 34px);left:4%}
.toast{position:absolute;z-index:3;right:6%;top:50%;display:flex;gap:12px;align-items:flex-start;background:#fff;color:var(--ink);padding:14px 18px 14px 14px;min-width:min(300px,70%);box-shadow:0 20px 50px -10px rgba(0,0,0,.45);transition:opacity .35s,transform .45s var(--ease)}
.toast b{display:block;font-size:var(--step-small);font-weight:600}
.toast span{display:block;font-size:var(--step-small);color:var(--muted);font-variant-numeric:tabular-nums}
.toast.is-out{opacity:0;transform:translateY(10px)}
.toast-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--live);margin-top:5px;box-shadow:0 0 0 0 rgba(47,179,68,.5);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 8px rgba(47,179,68,0)}100%{box-shadow:0 0 0 0 rgba(47,179,68,0)}}
.hero-live .hero-cap{z-index:2;left:auto;right:0;display:flex;align-items:center;gap:12px;background:transparent;color:#9a988f}
.hl-back,.hl-front,.hl-tag{transition:opacity .6s ease,transform .8s var(--ease)}
.hero-live.is-out .hl-back{opacity:0;transform:translate(3%,-2%)}
.hero-live.is-out .hl-front{opacity:0;transform:translate(-3%,2%)}
.hero-live.is-out .hl-tag{opacity:0}
.hl-dots{display:inline-flex;gap:6px}
.hl-dots i{width:6px;height:6px;border-radius:50%;background:#5a5850;transition:background-color .4s}
.hl-dots i.on{background:var(--paper)}
/* Pauzeknop voor de wisselende hero (WCAG 2.2.2) */
.hl-pause{width:44px;height:44px;display:grid;place-items:center;background:transparent;border:2px solid #8d8b84;color:var(--paper);cursor:pointer;margin-left:4px;transition:border-color .2s}
.hl-pause:hover{border-color:var(--paper)}
.hl-pause span{width:12px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.is-paused .hl-pause span{width:0;height:0;border:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.pass .display{font-size:clamp(2.1rem,.4rem + 4.2vw,5.25rem)}
.pass-fields dd{font-size:var(--step-small);font-weight:600}

/* ---------- STELLING ---------- */
.thesis{background:var(--ink);color:var(--paper);padding-block:var(--section)}
.thesis-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(40px,5vw,72px) var(--gap)}
.thesis-grid{align-items:start;grid-template-rows:auto 1fr;row-gap:16px}
.thesis-copy{grid-column:1/7;grid-row:1/3;align-self:start;display:flex;flex-direction:column;gap:24px}
.thesis-copy .lead{max-width:46ch;color:#d9d7d0}
.versus{grid-column:8/13;grid-row:1;align-self:start;display:grid}
.versus .vs-col{grid-area:1/1;transition:opacity .35s ease,visibility .35s}
.thesis .versus .vs-col[hidden]{display:block;visibility:hidden;opacity:0}
/* schakelaar op het donkere vlak */
.thesis-grid .seg{grid-column:8/13;grid-row:2;align-self:start;display:grid;grid-template-columns:1fr 1fr;gap:4px;width:100%;padding:5px;margin:0;background:rgba(243,242,239,.1);border-radius:var(--r-lg)}
.thesis-grid .seg label{display:block}
.thesis-grid .seg span{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 12px;text-align:center;background:transparent;color:var(--paper);border-radius:var(--r);font-size:var(--step-body)}
.thesis-grid .seg label:hover span{background:rgba(243,242,239,.14)}
.thesis-grid .seg input:checked+span{background:var(--accent);color:var(--accent-ink)}
.thesis-grid .seg input:focus-visible+span{outline:3px solid var(--paper);outline-offset:-3px}
.vs-col{padding:clamp(24px,3vw,44px)}
.vs-col h3{font-size:var(--step-lead);font-weight:600;margin-bottom:20px}
.vs-col li{position:relative;padding-left:28px;line-height:1.45}
.vs-col li+li{margin-top:14px}
.vs-old{background:#33322b;color:#bfbdb5}
.vs-old li::before{content:"";position:absolute;left:2px;top:.66em;width:12px;height:2px;background:#8d8b84}
.vs-new{background:var(--paper);color:var(--ink)}
.vs-new li::before{content:"";position:absolute;left:0;top:.38em;width:14px;height:8px;border-left:3px solid var(--accent);border-bottom:3px solid var(--accent);transform:rotate(-45deg)}

/* ---------- Labels ---------- */
.case-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:var(--step-small);font-weight:600;color:var(--muted)}
.badge{display:inline-block;padding:3px 8px;font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--paper)}
.badge-live{background:#1f7a32;color:#fff}
.badge-live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff;margin-right:6px;vertical-align:1px}

/* ---------- Frames ---------- */
.browser{position:relative;background:#fff;padding-top:26px;box-shadow:0 30px 60px -30px rgba(0,0,0,.4);overflow:hidden}
.browser::before{content:"";position:absolute;inset:0 0 auto;height:26px;background-color:#ecebe6;background-repeat:no-repeat;
  background-image:radial-gradient(circle at 14px 13px,#e5484d 4px,transparent 4.5px),radial-gradient(circle at 28px 13px,#e8a317 4px,transparent 4.5px),radial-gradient(circle at 42px 13px,#2fb344 4px,transparent 4.5px)}
.browser-dark::before{background-color:#2f2e28}
.browser img,.browser video{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.phone{position:relative;background:#111;padding:9px;border-radius:34px;box-shadow:0 30px 60px -30px rgba(0,0,0,.5);width:100%;max-width:290px;margin-inline:auto}
.phone img,.phone video{display:block;width:100%;aspect-ratio:9/19;object-fit:cover;object-position:top;border-radius:26px;background:#fff}
figcaption{font-size:var(--step-small);color:var(--muted);margin-top:14px;line-height:1.4}

/* ---------- Verhaal: hoofdstukken ---------- */
.story{padding-bottom:clamp(48px,6vw,96px)}
.chapter{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:center;margin-top:var(--chapter-gap)}
.story>.chapter:first-child{margin-top:clamp(48px,6vw,96px)}
.chapter-media{grid-column:1/8;margin:0;min-width:0}
.chapter-text{grid-column:9/13;display:flex;flex-direction:column;gap:16px;max-width:40ch}
.chapter--flip .chapter-media{grid-column:6/13;grid-row:1}
.chapter--flip .chapter-text{grid-column:1/5;grid-row:1}
/* telefoon-hoofdstukken: tekst en telefoon als één gecentreerd paar, de telefoon neemt de minste ruimte */
@media (min-width:961px){
  .chapter:has(.is-phone),.chapter:has(.chapter-switch){column-gap:clamp(48px,7vw,112px);justify-content:center;grid-template-columns:minmax(0,300px) minmax(0,34rem)}
  .chapter--flip:has(.is-phone),.chapter--flip:has(.chapter-switch){grid-template-columns:minmax(0,34rem) minmax(0,300px)}
  .chapter:has(.is-phone) .chapter-media,.chapter:has(.chapter-switch) .chapter-media{grid-column:1;grid-row:1}
  .chapter:has(.is-phone) .chapter-text,.chapter:has(.chapter-switch) .chapter-text{grid-column:2;grid-row:1;max-width:none}
  .chapter--flip:has(.is-phone) .chapter-text,.chapter--flip:has(.chapter-switch) .chapter-text{grid-column:1}
  .chapter--flip:has(.is-phone) .chapter-media,.chapter--flip:has(.chapter-switch) .chapter-media{grid-column:2}
}
.chapter-media.is-phone{display:flex;flex-direction:column;align-items:center}
.chapter-media.is-phone figcaption{text-align:center}
.chapter-label{font-size:.8125rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text)}
.chapter-title{font-family:Archivo,sans-serif;font-weight:800;font-stretch:62%;font-variation-settings:"wdth" 62;text-transform:uppercase;line-height:.92;font-size:clamp(1.9rem,1rem + 2.2vw,3rem);text-wrap:balance}
.chapter-text p{line-height:1.55}
.chapter-see{font-size:var(--step-small);color:var(--muted);border-top:2px solid var(--line);padding-top:14px;margin-top:6px}
.chapter-see b{color:var(--ink);font-weight:600}

/* Twee telefoons naast elkaar */
.chapter-phones{display:grid;grid-template-columns:repeat(2,minmax(0,250px));justify-content:center;gap:clamp(20px,3vw,48px)}
.chapter-phones figure{margin:0;text-align:center}
.chapter-phones .phone{max-width:250px}

/* Telefoonvideo's met schakelaar: één tegelijk */
.chapter-switch{display:flex;flex-direction:column;align-items:center;gap:16px}
/* Schakelaar: donkere segmentbediening in de tekstkolom, bij de uitleg */
.chapter-text .seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;width:100%;max-width:340px;padding:5px;margin:8px 0;background:var(--ink);border-radius:var(--r-lg);box-shadow:0 12px 28px -14px rgba(38,37,30,.55)}
.chapter-text .seg label{display:block}
.chapter-text .seg span{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 10px;text-align:center;background:transparent;color:var(--paper);border-radius:var(--r);font-size:var(--step-body)}
.chapter-text .seg label:hover span{background:rgba(243,242,239,.14)}
.chapter-text .seg input:checked+span{background:var(--accent);color:var(--accent-ink)}
.chapter-text .seg input:focus-visible+span{outline:3px solid var(--paper);outline-offset:-3px}
.chapter-switch figure{margin:0;text-align:center}
.chapter-switch .phone{max-width:260px}

/* Voor/na: tekst boven, schuif breed, dashboardbeeld klein ernaast */
.chapter-actie{margin:8px 0 0}
.chapter-actie figcaption{margin-top:10px}

/* Verbindingslijn tussen voorkant en achterkant */
.link-line{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;margin:clamp(56px,7vw,96px) auto 0}
.link-line+.chapter{margin-top:clamp(48px,6vw,88px)}
.link-line::before{content:"";width:3px;height:clamp(64px,8vw,110px);background:repeating-linear-gradient(180deg,var(--line) 0 8px,transparent 8px 14px)}
.link-line em{font-style:normal;font-size:var(--step-small);font-weight:600;color:var(--muted);background:var(--bg);padding:4px 10px}
.link-dot{position:absolute;top:0;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--accent);animation:packetV 2.2s var(--ease) infinite}
@keyframes packetV{0%{top:0;opacity:0}15%{opacity:1}80%{opacity:1}100%{top:clamp(52px,8vw - 12px,98px);opacity:0}}

/* Voor/na-schuif */
.compare{position:relative;overflow:hidden;aspect-ratio:16/10;background:#fff;--pos:50%;user-select:none;touch-action:pan-y;box-shadow:0 30px 60px -30px rgba(0,0,0,.4)}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.cmp-b-wrap{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
.cmp-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:var(--paper);box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none}
.cmp-handle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M7 1 1 7l6 6M21 1l6 6-6 6' fill='none' stroke='%2326251e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/26px no-repeat;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.cmp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.compare:has(.cmp-range:focus-visible) .cmp-handle::after{outline:3px solid #fff;outline-offset:2px}
.cmp-tag{position:absolute;top:12px;font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;background:var(--ink);color:var(--paper);pointer-events:none}
.cmp-tag-a{left:12px}.cmp-tag-b{right:12px;background:var(--paper);color:var(--ink)}

/* Opbrengst */
.gains{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px);border-top:3px solid var(--line);padding-top:clamp(28px,3vw,40px)}
.gains li{display:flex;flex-direction:column;gap:8px}
.gains h3{font-size:var(--step-lead);font-weight:600;line-height:1.2}
.gains span{color:var(--muted);max-width:36ch}

/* ---------- HOMEPAGE: werk, kaarten naar de casepagina's ---------- */
.more-work{background:var(--paper);padding-block:var(--section)}
.more-intro{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:end;margin-bottom:clamp(48px,6vw,88px)}
.more-intro .head{grid-column:1/7}
.more-intro .lead{grid-column:8/13;max-width:42ch}
/* Carrousel: één case per dia, beeld 8/12 en tekst 4/12 */
.carousel{position:relative;display:flex;flex-direction:column;gap:clamp(16px,2vw,24px)}
/* Navigatie: namen boven de dia's; pijlen en teller staan op desktop naast "Bekijk de case" */
.carousel-bar{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:center;border-bottom:2px solid var(--line);padding-bottom:14px}
.carousel-tabs{grid-column:1/9;display:flex;flex-wrap:wrap;gap:0 6px;margin:0;padding:0;list-style:none}
.carousel-tabs button{display:inline-flex;align-items:baseline;gap:8px;font:600 var(--step-small)/1.2 Archivo,sans-serif;color:var(--muted);background:none;border:0;padding:8px 10px;min-height:44px;cursor:pointer;position:relative;transition:color .2s}
.carousel-tabs button span{font-variant-numeric:tabular-nums;color:var(--accent-text)}
.carousel-tabs button:hover{color:var(--ink)}
.carousel-tabs button[aria-current="true"]{color:var(--ink)}
.carousel-tabs button[aria-current="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-16px;height:2px;background:var(--accent)}
.carousel-arrows{grid-column:9/13;display:flex;align-items:center;gap:12px}
/* Desktop: de pijlen staan naast "Bekijk de case" van de actieve dia (app.js legt ze op .card-nav-slot) */
@media (min-width:961px){
  .carousel-arrows{position:absolute;z-index:4;top:0;left:0;opacity:0;transition:opacity .3s}
  .carousel-arrows.is-placed{opacity:1}
}
.carousel-count{font-size:var(--step-small);color:var(--muted);font-variant-numeric:tabular-nums;min-width:4.5em;text-align:center}
.carousel-count b{color:var(--ink);font-weight:600}
.carousel-arrow{width:44px;height:44px;display:grid;place-items:center;font-size:1.1rem;background:transparent;color:var(--ink);border:2px solid var(--ink);cursor:pointer;transition:background-color .2s,color .2s,opacity .2s,transform .15s}
.carousel-arrow:hover{background:var(--ink);color:var(--paper)}
.carousel-arrow:active{transform:scale(.95)}
.carousel-arrow:disabled{opacity:.3;cursor:default;background:transparent;color:var(--ink)}
.carousel-track{display:flex;gap:clamp(48px,8vw,120px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain;
  padding:44px 0 56px;margin:-12px 0 -56px}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.carousel-slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
.work-card{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:center;text-decoration:none;color:var(--ink)}
.card-visual{grid-column:1/9;grid-row:1;position:relative}
.card-visual.has-back{margin-bottom:clamp(36px,4vw,56px)}
.work-card .browser{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.work-card .work-card-text{grid-column:9/13;grid-row:1}
/* Klein beeld van de achterkant, over de rechteronderhoek van de website */
.card-back{position:absolute;right:3%;bottom:calc(-1 * clamp(36px,4vw,56px));width:44%;z-index:2}
.card-back.is-phone{width:clamp(110px,15%,170px);right:2%}
.card-back .browser,.card-back .phone{box-shadow:0 30px 60px -20px rgba(0,0,0,.55)}
.card-back .browser{border:4px solid var(--paper)}
.card-back .phone{padding:6px;border-radius:22px}
.card-back .phone img{border-radius:17px}
.card-tag{position:absolute;z-index:3;top:-14px;left:12px;background:var(--ink);color:var(--paper);font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;white-space:nowrap}
.card-tag-front{top:auto;bottom:calc(100% + 8px);left:0;background:transparent;color:var(--muted);padding:0}
.card-back .card-tag{background:var(--ink);color:var(--paper)}
.card-back.is-phone .card-tag{left:50%;transform:translateX(-50%)}
.carousel-slide:not(.is-current) .work-card-text{opacity:.35;transition:opacity .4s}
.carousel-slide.is-current .work-card-text{opacity:1;transition:opacity .4s .1s}
.work-card:hover .browser{transform:translateY(-6px);box-shadow:0 40px 70px -30px rgba(0,0,0,.45)}
.work-card h3{font-family:Archivo,sans-serif;font-weight:800;font-stretch:62%;font-variation-settings:"wdth" 62;text-transform:uppercase;line-height:.92;font-size:clamp(2.2rem,1rem + 3vw,3.6rem)}
.work-card p:not(.case-meta){color:var(--muted);max-width:44ch}
.work-card .textlink{align-self:flex-start;margin-top:4px}
.card-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px;padding-top:18px;border-top:2px solid var(--line);min-height:62px}
.card-actions .textlink{margin-top:0}
.card-nav-slot{flex:none;width:176px;height:44px}
.work-card:hover .textlink{text-underline-offset:8px;color:var(--accent-text)}
.work-card-text{display:flex;flex-direction:column;gap:14px}

/* ---------- CASEPAGINA ---------- */
.site-bar{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px var(--m);background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.site-bar nav{display:flex;align-items:center;gap:clamp(14px,2vw,28px);font-weight:600}
.site-bar nav a{text-decoration:none}
.site-bar nav a:hover{color:var(--muted)}
.site-bar-cta{background:var(--accent);color:var(--accent-ink)!important;padding:10px 16px}
.site-bar-cta:hover{background:var(--accent-deep);color:var(--accent-ink)!important}
.case-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding-top:clamp(40px,6vw,96px)}
.case-hero-copy{grid-column:1/11;display:flex;flex-direction:column;gap:24px}
.case-hero-title{font-family:Archivo,sans-serif;font-weight:800;font-stretch:62%;font-variation-settings:"wdth" 62;text-transform:uppercase;line-height:.9;font-size:var(--step-head);max-width:16ch;text-wrap:balance}
.case-hero-copy .lead{max-width:54ch}
.case-hero-media{grid-column:1/-1;margin:clamp(48px,6vw,88px) 0 0}
.case-facts{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px var(--gap);margin-top:clamp(36px,4vw,56px);padding-top:24px;border-top:2px solid var(--surface)}
.case-facts dt{font-size:var(--step-small);color:var(--muted)}
.case-facts dd{margin:4px 0 0;font-weight:600;line-height:1.35}
@media (min-width:961px){
  .case-hero-copy{grid-column:1/9;grid-row:1}
  .case-facts{grid-column:10/13;grid-row:1;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:18px;margin-top:0;padding:0 0 0 clamp(16px,2vw,28px);border-top:0;border-left:2px solid var(--surface)}
  .case-facts dt{font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase}
  .case-facts dd{font-size:var(--step-body);font-weight:600;line-height:1.35;margin-top:4px}
}
.case-end{padding-block:var(--section) 0;display:flex;flex-direction:column;gap:clamp(36px,4vw,56px)}
/* CTA: donker vlak, veerkrachtige binnenkomst, magnetische knop, meebewegende gloed */
.case-cta{--mx:70%;--my:30%;position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px clamp(32px,6vw,96px);background:var(--ink);color:var(--paper);padding:clamp(36px,6vw,88px)}
.case-cta::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(520px circle at var(--mx) var(--my),rgba(243,242,239,.16),transparent 65%);transition:opacity .4s}
.case-cta-title{grid-column:1;font-family:Archivo,sans-serif;font-weight:800;font-stretch:62%;font-variation-settings:"wdth" 62;text-transform:uppercase;line-height:.9;letter-spacing:-.01em;font-size:clamp(2.2rem,1rem + 4.4vw,5rem);text-wrap:balance;max-width:14ch}
.case-cta .lead{grid-column:1;max-width:34ch;opacity:.78}
.btn-cta{grid-column:2;grid-row:1/3;gap:14px;min-height:72px;padding:0 clamp(28px,3vw,44px);background:var(--paper);color:var(--ink);font-size:var(--step-lead);font-weight:600;position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.btn-cta:hover{background:var(--paper);color:var(--ink);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.btn-cta svg{width:1.3em;height:1.3em;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.btn-cta:hover svg{transform:translateX(6px)}
.btn-cta::after{content:'';position:absolute;inset:0 auto 0 -60%;width:40%;background:linear-gradient(100deg,transparent,rgba(38,37,30,.12),transparent);transform:skewX(-18deg)}
.case-cta.is-in .btn-cta::after{animation:cta-shine 3.4s 1.2s ease-in-out infinite}
@keyframes cta-shine{0%,60%{left:-60%}100%{left:130%}}
/* binnenkomst: springende opkomst per onderdeel */
.js .case-cta[data-reveal]>*{opacity:0;transform:translateY(36px) scale(.96);transition:opacity .6s,transform .9s cubic-bezier(.34,1.4,.64,1);transition-delay:calc(var(--d,0)*110ms)}
.js .case-cta[data-reveal].is-in>*{opacity:1;transform:none}
.js .case-cta[data-reveal].is-in .btn-cta{transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
@media (max-width:960px){.case-cta{grid-template-columns:1fr}.btn-cta{grid-column:1;grid-row:auto;justify-self:start}}
@media (prefers-reduced-motion:reduce){.btn-cta::after{display:none}.js .case-cta[data-reveal]>*{opacity:1;transform:none;transition:none}}
.case-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-block:var(--section)}
.case-nav a{display:flex;flex-direction:column;gap:6px;padding:clamp(24px,3vw,40px);background:var(--paper);text-decoration:none;transition:background-color .2s,color .2s}
.case-nav a:last-child{text-align:right;align-items:flex-end}
.case-nav span{font-size:var(--step-small);color:var(--muted)}
.case-nav b{font-family:Archivo,sans-serif;font-weight:800;font-stretch:62%;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(1.8rem,1rem + 2vw,2.6rem);line-height:.92}
.case-nav small{color:var(--muted)}
.case-nav a:hover{background:var(--ink);color:var(--paper)}
.case-nav a:hover span,.case-nav a:hover small{color:#bfbdb5}

/* ---------- Beweging uit ---------- */
@media (prefers-reduced-motion:reduce){
  .toast-dot,.link-dot{animation:none}
  .js .hl-back,.js .hl-front{animation:none}
  .work-card .browser{transition:none}
}

/* ---------- Tablet en telefoon ---------- */
@media (max-width:960px){
  /* Mobiel: eerst het hero-beeld, daarna de tekst (de kaart schuift er iets overheen) */
  .hero-live .hero-cap{display:flex;top:0;bottom:auto;right:0;left:auto;padding:6px 6px 6px 12px;background:rgba(29,28,23,.88);font-size:.8125rem}
  .hero-live .hero-cap [data-hl="cap"]{max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hero-live{order:0;min-height:0;height:56svh}
  .hl-back{left:12%;right:-30%;top:8%}
  .hl-front{left:-4%;width:86%;bottom:14%}
  .toast{right:4%;top:auto;bottom:4%}
  .hl-tag{display:none}
  .thesis-grid{grid-template-columns:1fr;grid-template-rows:none;row-gap:28px}
  .thesis-copy,.versus,.thesis-grid .seg{grid-column:1/-1;grid-row:auto}
  .thesis-grid .seg{max-width:460px}
  :root{--chapter-gap:clamp(80px,16vw,120px)}
  .chapter{grid-template-columns:minmax(0,1fr);gap:28px}
  .chapter-media,.chapter-text,.chapter--flip .chapter-media,.chapter--flip .chapter-text,
  .chapter-actie{grid-column:1/-1;grid-row:auto;max-width:none}
  .chapter--flip .chapter-media{order:0}
  .chapter[data-switch]{display:flex;flex-direction:column;align-items:stretch;gap:20px}
  .chapter[data-switch] .chapter-text{display:contents}
  .chapter[data-switch] .seg{order:1;align-self:center;max-width:380px}
  .chapter[data-switch] .chapter-media{order:2}
  .chapter[data-switch] .chapter-see{order:3}
  .chapter-actie{max-width:420px}
  .more-intro{grid-template-columns:1fr;gap:20px}
  .more-intro>*{grid-column:1/-1!important}
  .work-card{display:flex;flex-direction:column;align-items:stretch;gap:24px}
  .carousel-track{margin-top:-12px}
  .card-nav-slot{display:none}
  .card-actions{border-top:0;padding-top:0;min-height:0}
  .carousel-bar{grid-template-columns:1fr;gap:6px;order:-1;border-top:0;border-bottom:2px solid var(--line);padding:0 0 10px}
  .carousel-tabs,.carousel-arrows{grid-column:1/-1}
  .carousel-arrows{justify-content:space-between}
  .carousel-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .carousel-tabs::-webkit-scrollbar{display:none}
  .carousel-tabs button{white-space:nowrap}
  .carousel-tabs button[aria-current="true"]::after{top:auto;bottom:-12px}
  .case-hero-copy{grid-column:1/-1}
  .case-facts{grid-template-columns:1fr 1fr}
  .gains{grid-template-columns:1fr}
}
@media (max-width:560px){
  /* Hero op telefoon: compacter beeld, melding vrij van de tekstkaart, knop binnen het eerste scherm */
  .hero-live{height:34svh;min-height:250px}
  .hl-back{left:14%;right:-34%;top:17%}
  .hl-front{left:-4%;width:72%;bottom:24%}
  .toast{right:12px;bottom:36px;min-width:0;max-width:calc(100% - 24px);padding:10px 14px 10px 12px;gap:10px}
  .hero .pass .display{padding-top:22px;font-size:clamp(1.85rem,.2rem + 6.4vw,2.4rem)}
  .hero .pass-sub{font-size:1.0625rem;margin-top:12px;margin-bottom:18px}
  .hero .pass-foot{margin-top:0;gap:14px 20px}
  .hero .pass-foot .btn{flex:1 0 100%;text-align:center}
  .hero .pass-foot .textlink{margin-inline:auto}
  .chapter-phones{gap:14px}
  .phone{border-radius:24px;padding:6px}
  .phone img,.phone video{border-radius:19px}
  .chapter-media.is-phone .phone{max-width:240px}
  .case-facts{grid-template-columns:1fr}
  .case-nav{grid-template-columns:1fr}
  .case-nav a:last-child{text-align:left;align-items:flex-start}
  .site-bar nav a:not(.site-bar-cta){display:none}
}

/* ---------- Klikdoelen minimaal 44px (WCAG 2.5.5) ---------- */
.pass-nav a{padding-block:11px;min-width:44px;text-align:center}
.brand{min-height:44px}
.pass-foot .textlink{display:inline-flex;align-items:center;min-height:44px}
.seg span,.chips span{min-height:44px;display:flex;align-items:center}
.pc-nav a,.wa{display:inline-flex;align-items:center;min-height:44px}
.pc-nav a{min-width:44px;justify-content:center}
.pc-addr a{min-height:44px;display:inline-flex;align-items:center}
.site-bar nav a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}

/* Afronding (zie styles.css) */
.site-bar-cta,.btn-cta,.carousel-arrow,.hl-pause{border-radius:var(--r)}
.hl-back,.hl-front,.toast,.browser,.compare{border-radius:var(--r)}
.hl-tag,.badge,.card-tag,.cmp-tag{border-radius:var(--r-sm)}
.hero-live,.vs-old,.vs-new,.case-cta,.case-nav a{border-radius:var(--r-lg)}