/* Gemaakt door bouw-thema.js uit de draft v2.19 (09-10-2026) – niet met de hand aanpassen; aanvullingen staan in wp.css. */
/* =====================================================================
   SEBAS website draft v2.3 — 2026-09-18 (v2.2 + witte cases, strook zonder scrollbar, tolerante route)
   Deliberately single-theme: dark cartographic base + light mist sections.
   ===================================================================== */
:root{
  color-scheme: dark;
  --night:#0b191e; --deep:#071419; --ink:#173b36; --btn:#10252b; --panel:#10252b;
  --mist:#f0f5f1; --paper:#f7f9f7; --admin:#edf0eb;
  --text:#1b2b29; --muted:#566a66;
  --on:#eef4f1; --on-2:#a8bcb7; --on-3:#6f8783;
  --hair:rgba(238,244,241,.14); --hair-2:rgba(238,244,241,.28);
  --line:rgba(23,59,54,.14); --line-2:rgba(23,59,54,.3);
  --orange:#f3943c; --amber:#f2ad3a; --green:#91c575; --mint:#44b297; --teal:#19a6a1;
  --grad:linear-gradient(95deg,#f3943c 0%,#f2ad3a 24%,#91c575 52%,#44b297 76%,#19a6a1 100%);
  --danger:#b3261e; --ok:#2e7d4f;
  --font:"Montserrat","Segoe UI",Arial,Helvetica,sans-serif;
  --wrap:1280px; --gut:clamp(16px,4vw,48px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:90px;background:var(--night)}
body{margin:0;background:var(--night);color:var(--on);font:400 17px/1.65 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.02;text-wrap:balance}
h2{font-size:clamp(34px,5vw,68px)}
h3{font-size:clamp(20px,1.8vw,24px);letter-spacing:-.015em;line-height:1.2}
p{margin:0}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.skip{position:absolute;left:12px;top:-80px;background:var(--orange);color:#1c1204;padding:10px 14px;z-index:500;font-weight:700}
.skip:focus{top:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.kicker{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--on-2)}
.kicker::before{content:"";width:28px;height:2px;background:var(--grad)}
.light .kicker{color:var(--muted)}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--on-2);max-width:56ch}
.light .lede{color:var(--muted)}
.draftbar{position:relative;z-index:120;background:var(--amber);color:#1e1500;font-size:12.5px;font-weight:700;text-align:center;padding:6px 16px}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 15px/1 var(--font);padding:17px 24px;border-radius:999px;border:1.5px solid transparent;text-decoration:none;cursor:pointer;touch-action:manipulation;transition:transform .25s var(--ease),background-color .2s,border-color .2s,color .2s,box-shadow .25s}
.btn svg{transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn.cta{background:var(--orange);color:#1c1204;box-shadow:0 10px 30px -10px rgba(243,148,60,.7)}
.btn.cta:hover{background:#f7a45a;transform:translateY(-2px)}
.btn.ghost{border-color:var(--hair-2);color:var(--on);background:rgba(255,255,255,.03);backdrop-filter:blur(6px)}
.btn.ghost:hover{border-color:var(--on)}
.light .btn.ghost{border-color:var(--line-2);color:var(--ink);background:transparent}
.light .btn.ghost:hover{border-color:var(--ink)}
.btn.dark{background:var(--ink);color:#fff}
.btn.dark:hover{background:var(--btn)}
.btn.sm{padding:10px 16px;font-size:13.5px}

/* ---------- Header ---------- */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:100;transition:background-color .3s,border-color .3s;border-bottom:1px solid transparent}
header.site.solid,body:not(.home) header.site{background:rgba(7,20,25,.86);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--hair)}
body.home header.site{margin-bottom:-84px}
.hbar{display:flex;align-items:center;gap:24px;height:84px}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:40px;width:auto}
nav.main{display:flex;gap:2px;margin-left:auto}
nav.main a{position:relative;color:var(--on);text-decoration:none;font-size:14px;font-weight:600;padding:10px 14px}
nav.main a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
nav.main a:hover::after,nav.main a[aria-current="page"]::after{transform:scaleX(1)}
.hactions{display:flex;align-items:center;gap:12px}
.langsw{display:flex;border:1px solid var(--hair-2);border-radius:999px;padding:3px}
.langsw button{background:none;border:0;color:var(--on-2);font:700 12px var(--font);padding:6px 10px;border-radius:999px;cursor:pointer}
.langsw button[aria-pressed="true"]{background:var(--on);color:var(--night)}
.menubtn{display:none;background:none;border:1px solid var(--hair-2);color:var(--on);border-radius:999px;padding:9px 14px;font:700 13px var(--font);cursor:pointer}
.mobilenav{display:none}
@media (max-width:1060px){
  nav.main,.hactions .btn{display:none}
  .menubtn{display:inline-flex}
  .hactions{margin-left:auto}
  .mobilenav:not([hidden]){display:grid;gap:0;padding:6px var(--gut) 22px;background:rgba(7,20,25,.97);border-top:1px solid var(--hair);overscroll-behavior:contain}
  .mobilenav a{color:var(--on);text-decoration:none;font-weight:700;font-size:20px;padding:14px 2px;border-bottom:1px solid var(--hair)}
  .mobilenav .btn{margin-top:16px;font-size:15px}
}

/* ---------- Sections ---------- */
section{position:relative;padding-block:clamp(72px,10vw,140px)}
.light{background:var(--mist);color:var(--text)}
.light h2,.light h3{color:var(--ink)}
.paper{background:var(--paper)}
.white{background:#fff}
.deep{background:var(--deep)}
.topo{position:relative;isolation:isolate}
.topo::before{content:"";position:absolute;inset:0;background:url(../img/topo.webp) center/cover;opacity:.32;z-index:-1}
.head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(40px,6vw,72px)}
.head > div{display:grid;gap:20px}
@media (max-width:860px){.head{grid-template-columns:1fr}}

/* reveal: visible at rest, only a small lift when it arrives */
@media (prefers-reduced-motion:no-preference){
  .rv{transition:transform .9s var(--ease)}
  .rv.pre{transform:translateY(28px)}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(92vh,920px);display:grid;align-items:end;padding:150px 0 0;overflow:hidden;background:var(--deep)}
.slides{position:absolute;inset:0}
.slides figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.6s ease}
.slides figure.on{opacity:1}
.slides img{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:no-preference){
  .slides figure.on img{animation:kb 12s linear both}
  @keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.12)}}
}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(7,20,25,.94) 0%,rgba(7,20,25,.72) 38%,rgba(7,20,25,.12) 75%),
  linear-gradient(0deg,rgba(7,20,25,1) 0%,rgba(7,20,25,0) 34%),
  linear-gradient(180deg,rgba(7,20,25,.7) 0%,rgba(7,20,25,0) 22%);pointer-events:none}
.hero .gridlines{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(238,244,241,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(238,244,241,.06) 1px,transparent 1px);
  background-size:96px 96px;mask-image:linear-gradient(90deg,#000 0%,transparent 70%)}
.hero-inner{position:relative;z-index:2;width:100%}
.hero h1{font-size:clamp(52px,9.6vw,148px);font-weight:900;letter-spacing:-.05em;line-height:.9;margin-top:22px}
.hero h1 span{display:block}
/* Brand tagline (brand kit): Montserrat ExtraBold, tracking -15, capitals. FUNCTION #44b498 and
   VISUALLY #f3943c; the rest white on dark backgrounds, #1e1e1e on light ones. */
.tagline{font-weight:800;letter-spacing:-.015em;text-transform:uppercase;color:#fff}
.tagline .tf{color:#44b498}
.tagline .tv{color:#f3943c}
.tagline .nw{white-space:nowrap}
.light .tagline,.tagline.on-light{color:#1e1e1e}
.slogan{margin-top:26px;font-size:clamp(15px,1.6vw,21px);line-height:1.25}
.hero .lede{margin-top:22px;color:#c6d5d1}
.hero .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.proof{position:relative;z-index:2;margin-top:clamp(48px,7vw,96px);border-top:1px solid var(--hair);background:linear-gradient(180deg,rgba(7,20,25,.2),rgba(7,20,25,.7));backdrop-filter:blur(8px)}
.proof .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:stretch}
.proof .item{padding:22px 24px 24px 0;display:grid;gap:2px;border-right:1px solid var(--hair);margin-right:24px}
.proof strong{font-size:clamp(22px,2.4vw,32px);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.proof span{font-size:13px;color:var(--on-2)}
.slidectl{display:flex;align-items:center;gap:12px;padding:16px 0}
.slidectl .dots{display:flex;gap:6px}
.slidectl .dots button{width:26px;height:4px;border:0;border-radius:2px;background:var(--hair-2);cursor:pointer;padding:0;position:relative;overflow:hidden}
.slidectl .dots button[aria-current="true"]{background:var(--hair-2)}
.slidectl .dots button[aria-current="true"]::after{content:"";position:absolute;inset:0;background:var(--grad);transform-origin:left;animation:fill var(--dur,8s) linear both}
.paused .slidectl .dots button::after{animation-play-state:paused!important}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.iconbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--hair-2);background:rgba(7,20,25,.4);color:var(--on);display:grid;place-items:center;cursor:pointer}
.slidecap{position:absolute;right:var(--gut);top:118px;z-index:2;font-size:11.5px;font-weight:600;letter-spacing:.08em;color:var(--on-2);text-transform:uppercase;display:flex;gap:10px;align-items:center}
.slidecap::before{content:"";width:8px;height:8px;border:1.5px solid var(--orange);border-radius:50%}
@media (max-width:760px){
  .proof .wrap{grid-template-columns:1fr 1fr 1fr}
  .proof .item{padding:16px 10px 16px 0;margin-right:10px}
  .proof .item:nth-child(3){border-right:0;margin-right:0}
  .slidectl{grid-column:1/-1;border-top:1px solid var(--hair);padding:12px 0}
  .slidecap{display:none}
}

/* ---------- Service tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1100px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.tiles{grid-template-columns:1fr}}
.tile{position:relative;min-height:520px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;border-radius:18px;isolation:isolate;text-decoration:none;color:var(--on);background:var(--panel)}
@media (max-width:600px){.tile{min-height:420px}}
/* Phone, homepage only: compact service rows (photo + title); the full text is on the Diensten page. */
@media (max-width:600px){
  #diensten-kort .tiles{gap:10px}
  #diensten-kort .tile{min-height:0;height:136px;border-radius:14px}
  #diensten-kort .tile .body{padding:16px 18px}
  #diensten-kort .tile p,#diensten-kort .tile .chips{display:none}
  #diensten-kort .tile .tag{top:14px;left:16px;font-size:10px;padding:4px 8px}
  #diensten-kort .tile h3{font-size:20px;display:flex;justify-content:space-between;align-items:center;gap:12px}
  #diensten-kort .tile h3::after{content:"→";font-weight:700}
}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease),filter .6s}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,20,25,.1) 0%,rgba(7,20,25,.55) 45%,rgba(7,20,25,.96) 100%);transition:background .5s}
.tile:hover img,.tile:focus-visible img{transform:scale(1.08)}
.tile .bar{position:absolute;top:0;left:0;right:0;height:4px}
.tile .body{padding:28px 26px 26px;display:grid;gap:12px}
.tile .tag{position:absolute;top:22px;left:24px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:rgba(7,20,25,.6);border:1px solid var(--hair-2);backdrop-filter:blur(6px)}
.tile p{color:#c9d7d3;font-size:15.5px;line-height:1.55}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;border:1px solid var(--hair-2);color:var(--on);font-variant-numeric:tabular-nums}
.light .chip{border-color:var(--line-2);color:var(--ink)}
.chip.warn{border-color:#e0a13b;color:#7a4a00;background:#fff3db}

/* ---------- Sector explorer ---------- */
.explorer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
@media (max-width:900px){.explorer{grid-template-columns:1fr}}
.stagepic{position:sticky;top:110px;aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:var(--panel)}
@media (max-width:900px){.stagepic{position:relative;top:0;aspect-ratio:16/10}}
.stagepic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .7s,transform 1.4s var(--ease)}
.stagepic img.on{opacity:1;transform:scale(1)}
.stagepic .coord{position:absolute;left:18px;bottom:18px;display:flex;gap:8px;align-items:center;font-size:12px;font-weight:700;letter-spacing:.06em;background:rgba(7,20,25,.72);padding:8px 12px;border-radius:999px;backdrop-filter:blur(6px)}
.stagepic .coord i{width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(243,148,60,.25)}
.slist{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.slist a{display:grid;grid-template-columns:48px 1fr 32px;gap:16px;align-items:center;padding:24px 0;border-bottom:1px solid var(--hair);text-decoration:none;color:var(--on);transition:padding .4s var(--ease)}
.slist a .n{font-size:13px;font-weight:700;color:var(--on-3);font-variant-numeric:tabular-nums}
.slist a h3{font-size:clamp(22px,2.6vw,34px);letter-spacing:-.03em}
.slist a p{color:var(--on-2);font-size:15px;margin-top:6px;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--ease),opacity .4s}
.slist a .arr{width:32px;height:32px;border-radius:50%;border:1px solid var(--hair-2);display:grid;place-items:center;transition:background .3s,transform .3s}
.slist a.on,.slist a:hover,.slist a:focus-visible{padding-left:10px}
.slist a.on p,.slist a:hover p,.slist a:focus-visible p{max-height:80px;opacity:1}
.slist a.on .arr{background:var(--orange);border-color:var(--orange);color:#1c1204;transform:rotate(-45deg)}
@media (max-width:900px){.slist a p{max-height:none;opacity:1}}

/* ---------- Photo strip (own captures) ---------- */
.stripwrap{position:relative;margin-top:clamp(28px,4vw,44px)}
.strip{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none}
.strip::-webkit-scrollbar{width:0;height:0;display:none}
.strip:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.striprail{display:flex;gap:14px;padding-inline:var(--gut);padding-block:4px;width:max-content}
.shot{position:relative;flex:none;width:clamp(240px,30vw,400px);aspect-ratio:4/3;border-radius:16px;overflow:hidden;scroll-snap-align:center;text-decoration:none;background:var(--panel);isolation:isolate}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.shot::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,20,25,.88) 0%,rgba(7,20,25,.1) 55%,rgba(7,20,25,0) 100%);opacity:.9}
.shot:hover img,.shot:focus-visible img{transform:scale(1.05)}
.shot .cap{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;display:grid;gap:2px;color:var(--on)}
.shot .cap b{font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.shot .cap span{font-size:12px;font-weight:600;color:#c3d3cf;font-variant-numeric:tabular-nums}
.stripnav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line-2);background:rgba(255,255,255,.94);color:var(--ink);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 8px 24px -8px rgba(7,20,25,.35);transition:background .2s,transform .2s var(--ease)}
.stripnav:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.stripnav.prev{left:max(8px,calc(var(--gut) - 23px))}
.stripnav.next{right:max(8px,calc(var(--gut) - 23px))}
/* Phone: one whole photo at a time (no half-visible neighbour), with smaller arrows. */
@media (max-width:620px){.striprail{gap:var(--gut)}.shot{width:calc(100vw - 2*var(--gut))}.stripnav{width:38px;height:38px}}
.note{font-size:13px;color:var(--on-3);margin-top:14px}
.light .note{color:var(--muted)}

/* ---------- Featured case ---------- */
.featured{position:relative;min-height:min(86vh,820px);display:grid;align-items:end;overflow:hidden;isolation:isolate;padding:0}
.featured > img{position:absolute;inset:0;width:100%;height:120%;object-fit:cover;z-index:-2;will-change:transform}
.featured::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(7,20,25,.97) 0%,rgba(7,20,25,.55) 45%,rgba(7,20,25,.15) 100%)}
.featured .wrap{width:100%;padding-block:clamp(56px,8vw,110px)}
.featured h2{font-size:clamp(40px,6.4vw,96px);max-width:12ch;margin-top:18px}
.featured .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;margin-top:28px}
@media (max-width:860px){.featured .row{grid-template-columns:1fr}}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:40px;border-radius:18px;overflow:hidden;background:rgba(7,20,25,.55);border:1px solid var(--hair);backdrop-filter:blur(10px)}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr}}
.stats div{padding:22px 22px 24px;border-right:1px solid var(--hair);display:grid;gap:4px;align-content:start}
.stats div:last-child{border-right:0}
.stats b{font-size:clamp(24px,2.8vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.stats span{font-size:12.5px;color:var(--on-2)}
.stats .chip{justify-self:start;margin-top:6px}

/* ---------- Process steps (numbered cards) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;list-style:none;padding:0;margin:0;counter-reset:step}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.steps{grid-template-columns:1fr}}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 24px 28px;display:grid;gap:10px;align-content:start;overflow:hidden}
.step::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad)}
.step .no{font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--muted);font-variant-numeric:tabular-nums}
.step h3{font-size:22px;color:var(--ink)}
.step p{color:var(--muted);font-size:15.5px;line-height:1.55}
.step:last-child{background:var(--ink);border-color:var(--ink)}
.step:last-child .no{color:#9fb8b2}
.step:last-child h3{color:#fff}
.step:last-child p{color:#c6d5d1}

/* ---------- Heritage viewer ---------- */
.fixed{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:center}
@media (max-width:900px){.fixed{grid-template-columns:1fr}}
.fv{border-radius:22px;overflow:hidden;background:#000;border:1px solid var(--hair)}
.fv .view{position:relative;height:clamp(360px,62vh,640px);overflow:hidden;cursor:grab;touch-action:none}
.fv .view img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:center;transition:opacity .4s}
.fv .tabs{display:flex;flex-wrap:wrap;gap:6px;padding:12px;border-top:1px solid var(--hair);background:var(--deep)}
.fv .tabs button{font:700 12.5px var(--font);padding:8px 12px;border-radius:999px;border:1px solid var(--hair-2);background:none;color:var(--on-2);cursor:pointer}
.fv .tabs button[aria-selected="true"]{background:var(--on);color:var(--night);border-color:var(--on)}
.fv .zoom{position:absolute;right:12px;top:12px;display:grid;gap:6px;z-index:2}
.fv .hint{position:absolute;left:12px;bottom:12px;font-size:11.5px;color:var(--on-2);background:rgba(0,0,0,.6);padding:5px 9px;border-radius:999px}
.mini{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hair);margin-top:28px}
.mini div{padding:16px 0;border-bottom:1px solid var(--hair);display:grid;gap:2px}
.mini b{font-size:26px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mini span{font-size:12.5px;color:var(--on-2)}

/* ---------- Case bento / grid ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(0,auto);gap:14px}
.card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:380px;border-radius:18px;overflow:hidden;isolation:isolate;text-decoration:none;color:var(--on);background:var(--panel)}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease)}
.card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(7,20,25,.95) 0%,rgba(7,20,25,.35) 55%,rgba(7,20,25,0) 100%)}
.card:hover img,.card:focus-visible img{transform:scale(1.06)}
.card .body{padding:24px;display:grid;gap:8px}
.card .meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#cfdcd8}
.card h3{font-size:clamp(20px,2vw,28px)}
.card .go{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;background:rgba(7,20,25,.6);border:1px solid var(--hair-2);display:grid;place-items:center;backdrop-filter:blur(6px);transition:background .3s,transform .3s}
.card:hover .go{background:var(--orange);color:#1c1204;transform:rotate(-45deg)}
.bento.four .card:nth-child(1){grid-column:span 7;grid-row:span 3;min-height:680px}
.bento.four .card:nth-child(n+2){grid-column:span 5;min-height:0}
@media (min-width:901px){.bento.four{grid-template-rows:repeat(3,minmax(210px,1fr))}}
/* Fewer than 4 featured cases: 1 = one wide card, 2 = two equal halves, 3 = one big + two stacked. */
@media (min-width:901px){
  .bento.four.n1,.bento.four.n2{grid-template-rows:none}
  .bento.four.n1 .card:nth-child(1){grid-column:1/-1;grid-row:auto;min-height:520px}
  .bento.four.n2 .card:nth-child(n){grid-column:span 6;grid-row:auto;min-height:520px}
  .bento.four.n3{grid-template-rows:repeat(2,minmax(260px,1fr))}
  .bento.four.n3 .card:nth-child(1){grid-row:span 2;min-height:560px}
}
@media (max-width:900px){.bento{grid-template-columns:1fr}.bento .card{grid-column:auto!important;grid-row:auto!important;min-height:360px!important}}

.casegrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:1000px){.casegrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.casegrid{grid-template-columns:1fr}}
.casegrid .card{min-height:440px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filters button{font:700 13.5px var(--font);padding:10px 16px;border-radius:999px;border:1px solid var(--hair-2);background:none;color:var(--on-2);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--on);color:var(--night);border-color:var(--on)}
.casegrid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.casegrid.three{grid-template-columns:1fr}}
.casegrid.three .card{min-height:420px}
.viewsw{display:inline-flex;border:1px solid var(--hair-2);border-radius:999px;padding:3px;flex:none}
.viewsw button{font:700 13px var(--font);border:0;background:none;color:var(--on-2);padding:8px 16px;border-radius:999px;cursor:pointer}
.viewsw button[aria-pressed="true"]{background:var(--on);color:var(--night)}
/* ---------- Case timeline ---------- */
.tline{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:0}
.tline::before{content:"";position:absolute;left:78px;top:10px;bottom:10px;width:2px;background:linear-gradient(180deg,var(--hair-2),var(--hair))}
.ti{display:grid;grid-template-columns:78px minmax(0,1fr);gap:0 34px;padding:18px 0}
.tyr{position:relative;display:grid;gap:2px;align-content:start;padding-top:10px;text-align:right;padding-right:22px}
.tyr strong{font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tyr span{font-size:11.5px;font-weight:700;color:var(--on-3);font-variant-numeric:tabular-nums}
.tyr::after{content:"";position:absolute;right:-7px;top:18px;width:12px;height:12px;border-radius:50%;background:var(--night);border:2px solid var(--orange)}
.tcard{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:24px;align-items:center;text-decoration:none;color:var(--on);border:1px solid var(--hair);border-radius:18px;padding:14px;background:rgba(16,37,43,.5);transition:border-color .3s,transform .4s var(--ease)}
.tcard:hover,.tcard:focus-visible{border-color:var(--hair-2);transform:translateX(6px)}
.tim{border-radius:12px;overflow:hidden;aspect-ratio:16/10;background:var(--panel)}
.tim img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.tcard:hover .tim img{transform:scale(1.05)}
.tcopy{display:grid;gap:6px;padding-right:10px}
.tcopy p{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--on-3)}
.tcopy h3{font-size:clamp(20px,2vw,26px)}
.tcopy span{color:var(--on-2);font-size:15px}
.tcopy b{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;margin-top:4px}
@media (max-width:900px){
  .tline::before{left:8px}
  .ti{grid-template-columns:1fr;gap:10px;padding:14px 0 22px 34px}
  .tyr{text-align:left;padding:0;grid-auto-flow:column;justify-content:start;gap:10px;align-items:baseline}
  .tyr::after{right:auto;left:-34px;top:6px}
  .tcard{grid-template-columns:1fr;gap:14px}
}
/* v2.18: featured cases (homepage + cases page) — up to 4 thumbnails side by side on desktop, 2 per row on a tablet */
.casegrid.topn{grid-template-columns:repeat(4,minmax(0,1fr))}   /* always thumbnail size, also with fewer than 4 */
.casegrid.topn .card{min-height:0;aspect-ratio:1/1}
.casegrid.topn .card .body{padding:18px}
.casegrid.topn .card h3{font-size:clamp(18px,1.6vw,22px)}
.casegrid.topn .card .go{top:12px;right:12px;width:36px;height:36px}
@media (max-width:1000px){.casegrid.topn{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card .csub{display:none}
/* "Next case" stands apart from the image gallery above it */
.nextcase{padding-top:0}
.nextcase .wrap{border-top:1px solid var(--line);padding-top:clamp(36px,5vw,64px)}
/* Phone: featured cases are compact rows (photo + title), like the services;
   the grid shows more per case; the timeline becomes a dense list along the year line. */
@media (max-width:620px){
  #cases-kort .bento .card,.casegrid.three .card,.casegrid.topn .card{min-height:0!important;height:150px;aspect-ratio:auto}
  .casegrid.topn{grid-template-columns:1fr}
  #cases-kort .bento{gap:10px}
  #cases-kort .card .body,.casegrid.three .card .body,.casegrid.topn .card .body{padding:16px 18px}
  #cases-kort .card .meta,#cases-kort .card p,.casegrid.three .card .meta,.casegrid.three .card p,.casegrid.topn .card .meta,.casegrid.topn .card p{display:none}
  #cases-kort .card h3,.casegrid.three .card h3,.casegrid.topn .card h3{font-size:20px}
  #cases-kort .card .go,.casegrid.three .card .go,.casegrid.topn .card .go{top:12px;right:12px;width:34px;height:34px}
  #cg .card{min-height:0;display:grid;grid-template-rows:auto auto;justify-content:stretch;background:#fff;border:1px solid var(--line);border-radius:16px;color:var(--text)}
  #cg .card::before{display:none}
  #cg .card img{position:relative;inset:auto;height:auto;aspect-ratio:16/10;z-index:0}
  #cg .card .body{padding:14px 16px 16px;gap:6px}
  #cg .card .meta{color:var(--muted);font-size:11px}
  .light #cg .card h3{color:var(--ink);font-size:20px}
  #cg .card .csub{display:block;color:var(--muted);font-size:14px;line-height:1.45}
  .ti{padding:6px 0 10px 34px;gap:6px}
  .tcard{grid-template-columns:104px minmax(0,1fr);gap:12px;padding:8px;border-radius:14px}
  .tim{aspect-ratio:4/3;border-radius:9px}
  .tcopy{gap:3px;padding-right:4px}
  .tcopy p{font-size:10px;letter-spacing:.06em}
  .tcopy p,.tcopy span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .tcopy h3{font-size:16px;line-height:1.2}
  .tcopy span{font-size:13px;line-height:1.35}
  .tcopy b{display:none}
  .tcard:hover,.tcard:focus-visible{transform:none}
}

/* ---------- light variants (cases page) ---------- */
/* Image cards keep their own light-on-dark type, also inside a light section. */
.light .card h3,.light .tile h3,.light .shot .cap b{color:var(--on)}
.light .filters button,.light .viewsw{border-color:var(--line-2)}
.light .filters button{color:var(--muted)}
.light .filters button:hover{border-color:var(--ink);color:var(--ink)}
.light .filters button[aria-pressed="true"],.light .viewsw button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.light .viewsw button{color:var(--muted)}
.light .tline::before{background:linear-gradient(180deg,var(--line-2),var(--line))}
.light .tyr strong{color:var(--ink)}
.light .tyr span{color:var(--muted)}
.light .tyr::after{background:#fff}
.light .tcard{background:var(--paper);border-color:var(--line);color:var(--text)}
.light .tcard:hover,.light .tcard:focus-visible{border-color:var(--ink);background:#fff}
.light .tcopy p{color:var(--muted)}
.light .tcopy h3{color:var(--ink)}
.light .tcopy span{color:var(--muted)}
.light .tcopy b{color:var(--ink)}

/* ---------- Software ---------- */
/* Was ".sw", which the admin toggle rows also use; their later rule removed the side margins here. */
.swgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:start}
@media (max-width:900px){.swgrid{grid-template-columns:1fr}}
.swlist{display:grid;gap:10px}
.swlist div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;padding:20px 22px;border-radius:14px;background:rgba(16,37,43,.72);border:1px solid var(--hair);backdrop-filter:blur(8px);transition:border-color .3s,transform .3s var(--ease)}
.swlist div:hover{border-color:var(--hair-2);transform:translateX(6px)}
.swlist strong{font-size:15.5px}
.swlist span{color:var(--on-2);font-size:14.5px;font-variant-numeric:tabular-nums}
@media (max-width:560px){.swlist div{grid-template-columns:1fr;gap:4px}}

/* ---------- Closing CTA ---------- */
.closing{padding-block:clamp(72px,10vw,130px)}
.closebox{position:relative;border-radius:28px;overflow:hidden;padding:clamp(36px,6vw,88px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;isolation:isolate;background:var(--ink)}
.closebox::before{content:"";position:absolute;inset:0;z-index:-1;background:url(../img/topo.webp) center/cover;opacity:.55;mix-blend-mode:screen}
.closebox::after{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--grad)}
.closebox h2{font-size:clamp(38px,6vw,88px);max-width:12ch}
@media (max-width:760px){.closebox{grid-template-columns:1fr}}
.safety{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:center;margin-top:28px;padding-top:28px;border-top:1px solid var(--hair)}
.safety p{color:var(--on-2);max-width:62ch;font-size:15px}

/* ---------- Inner page hero ---------- */
.phero{position:relative;min-height:min(70vh,620px);display:grid;grid-template-columns:minmax(0,1fr);align-items:end;overflow:hidden;isolation:isolate;padding:150px 0 clamp(40px,6vw,72px)}
.phero > .wrap{width:100%}   /* auto margins made it as wide as its widest content (the sector tabs) */
.phero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(11,25,30,1) 0%,rgba(11,25,30,.55) 50%,rgba(11,25,30,.35) 100%)}
.phero h1{font-size:clamp(40px,7vw,104px);font-weight:900;letter-spacing:-.045em;line-height:.95;margin-top:18px;max-width:16ch}
.phero .lede{margin-top:20px;color:#cddad6}
.phero.plain{min-height:0;padding-top:170px;background:var(--night)}
.phero.plain::before{display:none}
.crumbs{font-size:13px;font-weight:600;color:var(--on-2)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--on)}

.gains{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1000px){.gains{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.gains{grid-template-columns:1fr}}
.gains div{background:#fff;border-radius:16px;padding:26px;display:grid;gap:10px;align-content:start;border:1px solid var(--line)}
.gains i{width:36px;height:4px;border-radius:2px;background:var(--grad)}
.gains b{color:var(--ink);font-size:18px}
.gains span{color:var(--muted);font-size:15px}
.sectabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-top:28px;scrollbar-width:thin}
.sectabs a{flex:none;text-decoration:none;font-weight:700;font-size:13.5px;padding:9px 15px;border-radius:999px;border:1px solid var(--hair-2);color:var(--on-2)}
.sectabs a[aria-current="page"]{background:var(--on);color:var(--night);border-color:var(--on)}

/* case detail */
.metricbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border-radius:18px;overflow:hidden;border:1px solid var(--hair);background:var(--panel)}
.metricbar div{padding:22px;border-right:1px solid var(--hair);display:grid;gap:4px;align-content:start}
.metricbar b{font-size:clamp(22px,2.4vw,32px);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.metricbar span{font-size:12.5px;color:var(--on-2)}
.story{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,5vw,80px);align-items:start}
@media (max-width:900px){.story{grid-template-columns:1fr}}
.chapter{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:34px 0;border-top:1px solid var(--line)}
.chapter:first-child{border-top:0;padding-top:0}
.chapter .k{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:8px}
.chapter h3{font-size:clamp(24px,2.6vw,34px);color:var(--ink)}
.chapter p{margin-top:14px;color:#33443f;font-size:17.5px;max-width:62ch;white-space:pre-line}
@media (max-width:600px){.chapter{grid-template-columns:1fr;gap:6px}}
.side{position:sticky;top:110px;display:grid;gap:16px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px}
.side dl{margin:0;display:grid}
.side dl div{display:grid;grid-template-columns:100px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.side dt{color:var(--muted);font-weight:600;font-size:13px}
.side dd{margin:0;color:var(--ink);font-weight:600}
.gal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.gal button{all:unset;cursor:zoom-in;border-radius:14px;overflow:hidden;position:relative;background:var(--panel)}
.gal button:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.gal button:hover img{transform:scale(1.05)}
.gal button:nth-child(1){grid-column:span 8;aspect-ratio:16/10}
.gal button:nth-child(2){grid-column:span 4}
.gal button:nth-child(3){grid-column:span 5;aspect-ratio:4/3}
.gal button:nth-child(4){grid-column:span 7;aspect-ratio:auto}
.gal button:nth-child(5){grid-column:span 12;aspect-ratio:21/8}
@media (max-width:700px){.gal button{grid-column:span 12!important;aspect-ratio:4/3!important}}
dialog.lb{border:0;padding:0;background:transparent;max-width:94vw;max-height:92vh}
dialog.lb::backdrop{background:rgba(3,10,12,.92)}
dialog.lb img{max-width:94vw;max-height:86vh;object-fit:contain;border-radius:10px}
dialog.lb form{display:flex;justify-content:flex-end;margin-bottom:8px}

/* about */
.about{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:start}
@media (max-width:900px){.about{grid-template-columns:1fr}}
.about .prose{display:grid;gap:18px;font-size:18px;color:#34453f}
.about .prose p:first-child{font-size:clamp(20px,2vw,26px);line-height:1.45;color:var(--ink);font-weight:600;letter-spacing:-.01em}
.stack{position:relative;height:clamp(420px,56vw,640px)}
.stack img{position:absolute;border-radius:18px;object-fit:cover;box-shadow:0 30px 60px -30px rgba(7,20,25,.6)}
.stack img:nth-child(1){left:0;top:0;width:64%;height:72%}
.stack img:nth-child(2){right:0;bottom:0;width:58%;height:58%;border:6px solid var(--mist)}
.contact{display:grid;border-top:1px solid var(--line);margin-top:10px}
.contact div{display:grid;grid-template-columns:140px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.contact dt{color:var(--muted);font-weight:600;font-size:13px}
.contact dd{margin:0;color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.contact a{color:var(--ink)}

/* ---------- Form ---------- */
.formwrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:960px){.formwrap{grid-template-columns:1fr}}
form.req{display:grid;gap:22px}
.fs{border:1px solid var(--line);border-radius:18px;padding:clamp(20px,3vw,32px);margin:0;display:grid;gap:16px;background:#fff}
.fs legend{display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px;color:var(--ink);padding:0 8px;letter-spacing:-.01em}
.fs legend span{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:13px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:620px){.row2{grid-template-columns:1fr}}
.field{display:grid;gap:6px}
.field label,.field .fl{font-weight:700;font-size:14px;color:var(--ink)}
.hint{font-size:13px;color:var(--muted)}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],select,textarea{font:500 16px var(--font);color:var(--text);background:var(--paper);border:1.5px solid var(--line-2);border-radius:12px;padding:13px 14px;width:100%;min-width:0;transition:border-color .2s,background .2s}
input:hover,select:hover,textarea:hover{border-color:var(--ink)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(243,148,60,.55);outline-offset:0;border-color:var(--ink);background:#fff}
textarea{min-height:130px;resize:vertical}
.area{display:grid;grid-template-columns:1fr 100px;gap:8px}
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.check{position:relative;display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line-2);border-radius:14px;padding:14px;cursor:pointer;font-size:15px;font-weight:600;color:var(--ink);transition:border-color .2s,background .2s}
.check:hover{border-color:var(--ink)}
.check:has(input:checked){border-color:var(--ink);background:#eef5f1;box-shadow:inset 0 0 0 1px var(--ink)}
.check input{margin-top:3px;accent-color:var(--ink);width:18px;height:18px;flex:none}
.check small{display:block;color:var(--muted);font-size:12.5px;font-weight:500}
.check.wide{grid-column:1/-1;border-style:dashed}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:inline-block;padding:10px 16px;border-radius:999px;border:1.5px solid var(--line-2);font-weight:700;font-size:14px;color:var(--ink)}
.seg input:checked + span{background:var(--ink);color:#fff;border-color:var(--ink)}
.seg input:focus-visible + span{outline:3px solid var(--orange);outline-offset:2px}
.err{color:var(--danger);font-size:13.5px;font-weight:700}
.invalid{border-color:var(--danger)!important}
.aside{position:sticky;top:110px;display:grid;gap:16px}
.aside .pic{border-radius:18px;overflow:hidden;aspect-ratio:4/3}
.aside .pic img{width:100%;height:100%;object-fit:cover}
.infobox{border-radius:16px;background:var(--ink);color:var(--on);padding:24px;display:grid;gap:10px;font-size:15px}
.infobox b{font-size:17px}
.infobox ul{margin:0;padding-left:18px;color:var(--on-2);display:grid;gap:4px}
.success{border-radius:18px;background:#fff;border:1px solid var(--ok);padding:32px;display:grid;gap:12px;color:var(--text)}
.success pre{white-space:pre-wrap;font:13.5px/1.6 var(--font);background:var(--paper);padding:14px;border-radius:10px;margin:0}

/* ---------- Client zone ---------- */
.cz{background:var(--admin);color:var(--text)}
.cz-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:22px;padding:16px 20px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.who{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted)}
.who i{width:36px;height:36px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#0b191e;font-style:normal;font-weight:800}
.plist{display:grid;gap:10px}
.prow{background:#fff;border-radius:16px;border:1px solid var(--line);overflow:hidden}
.prow > button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:64px 1fr auto 28px;gap:18px;align-items:center;width:100%;padding:12px 18px 12px 12px;cursor:pointer}
.prow > button:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.prow .thumb{width:64px;height:48px;border-radius:10px;object-fit:cover;background:var(--mist)}
.prow .pt{font-weight:800;color:var(--ink);font-size:16px}
.prow .ps{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.prow .car{width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;transition:transform .3s;color:var(--ink)}
.prow > button[aria-expanded="true"] .car{transform:rotate(90deg);background:var(--ink);color:#fff}
@media (max-width:700px){.prow > button{grid-template-columns:56px 1fr 28px}.prow .upd,.prow .status{grid-column:2}}
.status{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;padding:5px 11px;border-radius:999px;white-space:nowrap;justify-self:start}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st-proc{background:#fff0dc;color:#8a4b00}
.st-quote{background:#eaf0f6;color:#34475f}
.st-plan{background:#f4efdf;color:#6b5a1e}
.st-avail{background:#e2f3ea;color:#17683f}
.st-ended{background:#eceeed;color:#5a605e}
.st-done{background:#dff0ee;color:#135e59}
.pdetail{padding:6px 18px 22px;display:grid;gap:14px;border-top:1px solid var(--line)}
.linkrow{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;border-radius:12px;padding:14px 16px;background:var(--paper);border:1px solid var(--line)}
@media (max-width:700px){.linkrow{grid-template-columns:1fr}}
.ltype{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;white-space:nowrap}
.viewer{background:var(--deep);color:var(--on);border-radius:14px;overflow:hidden}
.viewer .vbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--hair);font-size:13px}
.viewer .stage{position:relative;height:clamp(320px,62vh,640px);overflow:hidden;background:#050f12}
.viewer.full{position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;border-radius:0;padding-top:env(safe-area-inset-top,0px)}
.viewer.full .stage{flex:1;height:auto}
.viewer select,.vbtn{font:700 12.5px var(--font);background:#10252b;color:var(--on);border:1px solid var(--hair-2);padding:7px 11px;border-radius:999px;cursor:pointer;width:auto}
.vbtn[aria-pressed="true"]{background:var(--on);color:var(--deep)}
.viewer .meta{padding:10px 14px;border-top:1px solid var(--hair);font-size:12px;color:var(--on-2);display:flex;flex-wrap:wrap;gap:6px 20px;font-variant-numeric:tabular-nums}
.lazy{position:relative;height:220px;display:grid;place-items:center;text-align:center;overflow:hidden;isolation:isolate}
.lazy img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(14px) brightness(.45);transform:scale(1.1);z-index:-1}
.lazy div{display:grid;gap:10px;justify-items:center;padding:16px}
.lazy p{font-size:13px;color:var(--on-2);max-width:44ch}
.pan{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.pan img{position:absolute;left:0;top:0;max-width:none;user-select:none;-webkit-user-drag:none}
.pan .b{clip-path:inset(0 0 0 var(--cut,100%))}
.ov{position:absolute;inset:0;width:100%;height:100%}
.abh{position:absolute;top:0;bottom:0;left:var(--cut);width:2px;background:#fff;pointer-events:none}
.abr{position:absolute;left:14px;right:14px;bottom:52px;z-index:3}
.mout{position:absolute;left:12px;bottom:12px;z-index:3;background:rgba(7,20,25,.85);border:1px solid var(--hair);padding:6px 11px;border-radius:999px;font-size:12.5px;font-variant-numeric:tabular-nums}
.zoomctl{position:absolute;right:12px;top:12px;z-index:3;display:grid;gap:6px}
.fallback{position:relative;display:grid;place-items:center;min-height:240px;text-align:center;isolation:isolate;padding:28px 20px}
.fallback img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(10px) brightness(.35);z-index:-1}
.fallback b{font-size:17px;display:block;margin-bottom:6px}
.fallback p{font-size:13.5px;color:var(--on-2);max-width:46ch;margin:0 auto}
.linkbroken{font:700 12.5px var(--font);background:none;border:0;color:inherit;opacity:.75;text-decoration:underline;cursor:pointer;padding:4px}

/* ---------- Footer ---------- */
footer.site{background:var(--deep);padding-block:72px 28px;border-top:1px solid var(--hair);font-size:14.5px;position:relative;overflow:hidden}
.fbig{font-size:clamp(14px,1.5vw,20px);line-height:1.3;margin-top:36px}
/* client-zone sign-in (the one way in, also for the admin) */
.zlogin{max-width:520px;display:grid;gap:18px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(20px,4vw,32px)}
.zlogin [data-step]{display:grid;gap:16px;justify-items:start}
.zlogin [data-step] .field{width:100%}
.zlogin [data-step][hidden]{display:none}
.zlogin #zSent{color:var(--ink);font-weight:600}
.zlogin .zerr{color:var(--danger);font-weight:600;font-size:14.5px}
.zlogin .zerr:empty{display:none}
.zdemo{border-top:1px solid var(--line);padding-top:14px;display:grid;gap:10px;font-size:13px;color:var(--muted)}
.zdemo .chips{align-items:center}
.zdemo .chip{font:600 12.5px var(--font);cursor:pointer;background:none;overflow-wrap:anywhere;text-align:left}
.zdemo .chip:hover{border-color:var(--ink)}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.fgrid{grid-template-columns:1fr}}
footer h4{margin:0 0 14px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-3);font-weight:700}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{text-decoration:none;color:var(--on)}
footer a:hover{color:var(--orange)}
.fbottom{margin-top:28px;padding-top:18px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;color:var(--on-3);font-size:12.5px;font-variant-numeric:tabular-nums}
.legal{max-width:70ch;display:grid;gap:16px;color:#34453f}
/* terms and conditions page */
.terms{max-width:78ch;gap:0}
.terms .tmeta{font-size:13.5px;font-weight:700;color:var(--muted);margin-bottom:14px}
.terms .tnote{background:#fff3db;border:1px solid #e9b75b;color:#5e3c00;border-radius:12px;padding:12px 16px;margin-bottom:18px;font-size:14.5px}
.ttoc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin-bottom:28px}
.ttoc ol{list-style:none;margin:0;padding:0;columns:2 240px;column-gap:28px}
.ttoc li{break-inside:avoid}
.ttoc button{all:unset;cursor:pointer;display:block;padding:5px 0;font-size:14.5px;font-weight:600;color:var(--ink)}
.ttoc button:hover{text-decoration:underline}
.ttoc button:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.tch{padding:22px 0;border-top:1px solid var(--line);scroll-margin-top:100px;display:grid;gap:10px}
.tch h2{font-size:clamp(20px,2.2vw,26px);color:var(--ink);letter-spacing:-.02em;margin-bottom:4px}
.tch p{font-size:15.5px;line-height:1.65;display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:4px}
.tch p:not(:has(.tnr)){display:block}
.tnr{font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.tfoot{margin-top:18px;font-size:13px;color:var(--muted)}
.adm textarea.termsed{min-height:420px;font:13px/1.55 ui-monospace,Consolas,monospace}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* =====================================================================
   v2.0 — admin (beheer) + embedded 3D viewer
   ===================================================================== */
body.admin header.site,body.admin footer.site{display:none}
body.admin{background:var(--admin);color:var(--text)}
.adm{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:calc(100vh - 30px)}
@media (max-width:900px){.adm{grid-template-columns:minmax(0,1fr)}}   /* minmax: a wide table may not stretch the page */
.adm-side{background:var(--deep);color:var(--on);padding:22px 16px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:calc(100vh - 30px);overflow:auto}
@media (max-width:900px){.adm-side{position:relative;height:auto}}
.adm-side .logo img{height:34px}
.adm-side nav{display:grid;gap:2px}
.adm-side nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;text-decoration:none;color:var(--on-2);font-weight:600;font-size:14px}
.adm-side nav a:hover{background:rgba(255,255,255,.05);color:var(--on)}
.adm-side nav a[aria-current="page"]{background:var(--on);color:var(--deep)}
.adm-side nav a .cnt{margin-left:auto;font-size:11px;font-weight:800;background:var(--orange);color:#1c1204;border-radius:999px;padding:2px 7px}
.adm-side nav .grp{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--on-3);padding:14px 12px 4px}
.adm-side .foot{margin-top:auto;font-size:12px;color:var(--on-3);border-top:1px solid var(--hair);padding-top:12px;display:grid;gap:6px;font-variant-numeric:tabular-nums}
.adm-side .foot a{color:var(--on-2)}
.adm-navwrap{display:flex;flex-direction:column;gap:18px;flex:1}
.adm-menubtn{display:none}
/* Phone/tablet: a slim sticky bar with the current page and a Menu button; the menu opens as one list. */
@media (max-width:900px){
  .adm-side{position:sticky;top:0;z-index:50;height:auto;padding:10px 16px;gap:0;overflow:visible;box-shadow:0 6px 20px rgba(0,0,0,.25)}
  .adm-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .adm-side .logo img{height:28px;width:auto}
  .adm-menubtn{display:inline-flex;align-items:center;gap:10px;min-width:0;font:700 13px var(--font);color:var(--on);background:none;border:1px solid var(--hair-2);border-radius:999px;padding:7px 8px 7px 14px;cursor:pointer}
  .adm-menubtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--on-2);font-weight:600}
  .adm-menubtn b{background:var(--on);color:var(--deep);border-radius:999px;padding:4px 10px}
  .adm-side:not(.open) .adm-navwrap{display:none}
  .adm-navwrap{max-height:calc(100vh - 110px);overflow:auto;overscroll-behavior:contain;padding:10px 0 6px;margin-top:10px;border-top:1px solid var(--hair)}
  .adm-side nav a{padding:11px 12px;font-size:15px}
  .adm-side .foot{margin-top:0}
  /* Boxes may not grow with their widest content (a table, a long word): tables scroll inside their box. */
  .adm-main .card2,.adm-main .grid2 > *,.adm-main .grid3 > *,.adm-main .grid4 > *,.adm-main .kpi{min-width:0}
  .adm-main{overflow-wrap:anywhere}
  .adm-main .card2{padding:16px}
}
@media (max-width:700px){
  .adm-main .tbl:not(.mtbl),.drawer .tbl:not(.mtbl){min-width:0!important;width:100%}
  .adm-main .tbl:not(.mtbl) thead,.drawer .tbl:not(.mtbl) thead{display:none}
  .adm-main .tbl:not(.mtbl) :is(tbody,tr,td),.drawer .tbl:not(.mtbl) :is(tbody,tr,td){display:block}
  .adm-main .tbl:not(.mtbl) tr,.drawer .tbl:not(.mtbl) tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .adm-main .tbl:not(.mtbl) tr:last-child,.drawer .tbl:not(.mtbl) tr:last-child{border-bottom:0}
  .adm-main .tbl:not(.mtbl) td,.drawer .tbl:not(.mtbl) td{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;border:0!important;padding:3px 0!important;width:auto!important;text-align:left!important;white-space:normal!important}
  .adm-main .tbl:not(.mtbl) td:empty,.drawer .tbl:not(.mtbl) td:empty{display:none}
  .adm-main .tbl td[data-lbl]::before,.drawer .tbl td[data-lbl]::before{content:attr(data-lbl);flex:0 0 96px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .adm-main .tbl td > .row,.drawer .tbl td > .row{flex-wrap:wrap!important}
  .adm-main .tbl td > div,.drawer .tbl td > div{flex:1 1 180px;min-width:0}
}
.adm-main{padding:24px clamp(16px,3vw,40px) 60px;min-width:0}
.adm-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-bottom:22px}
.adm-top h1{font-size:clamp(26px,3vw,36px);color:var(--ink);letter-spacing:-.03em}
.adm-top p{color:var(--muted);font-size:14.5px;margin-top:4px}
.warnbar{display:flex;gap:12px;align-items:flex-start;background:#fff3db;border:1px solid #e9b75b;color:#5e3c00;border-radius:12px;padding:12px 16px;font-size:13.5px;margin-bottom:20px}
.warnbar b{color:#4a2f00}
.card2{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
.card2 h2{font-size:18px;letter-spacing:-.01em;color:var(--ink);margin-bottom:12px;line-height:1.3}
.card2 h3{font-size:15px;color:var(--ink);margin:14px 0 8px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1100px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid3{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}
.stack16{display:grid;gap:16px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:grid;gap:2px;text-decoration:none;color:var(--text)}
.kpi b{font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
.kpi span{font-size:13px;color:var(--muted)}
.kpi.warn{border-color:#e9b75b;background:#fffaf0}
.kpi.bad{border-color:#e7a19c;background:#fff5f4}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:620px}
.tblwrap{overflow-x:auto;position:relative}   /* relative: hidden (.sr) labels in cells stay inside the scroll box */
.tbl th{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);background:transparent}
.tbl td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:hover td{background:#f7faf8}
.tbl td:first-child{font-weight:600;color:var(--ink)}
.tbl img{width:56px;height:40px;object-fit:cover;border-radius:6px;display:block}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.p-ok{background:#e2f3ea;color:#17683f}.p-warn{background:#fff0dc;color:#8a4b00}.p-bad{background:#fde7e5;color:#9b2119}.p-mute{background:#eceeed;color:#5a605e}.p-info{background:#e6f0f7;color:#2c4a66}
.abtn{font:700 13px var(--font);padding:8px 13px;border-radius:999px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap}
.abtn:hover{border-color:var(--ink)}
.abtn.pri{background:var(--ink);color:#fff;border-color:var(--ink)}
.abtn.pri:hover{background:var(--btn)}
.abtn.cta{background:var(--orange);border-color:var(--orange);color:#1c1204}
.abtn.danger{color:var(--danger);border-color:#e7a19c}
.abtn.sm{padding:5px 10px;font-size:12px}
.abtn:disabled{opacity:.45;cursor:not-allowed}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.row.between{justify-content:space-between}
.fld{display:grid;gap:5px}
.fld label,.fld .fl{font-size:12.5px;font-weight:700;color:var(--ink)}
.fld .hint{font-size:12px}
.adm input[type=text],.adm input[type=email],.adm input[type=number],.adm input[type=date],.adm select,.adm textarea{font:500 14px var(--font);padding:9px 11px;border-radius:9px;background:#fff}
.adm textarea{min-height:90px}
.bi{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* NL / EN badge in front of a field label (everywhere in the admin, also in the text tabs) */
.adm .lang,.drawer .lang{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.1em;line-height:1;color:#fff;background:var(--ink);border-radius:4px;padding:3px 6px;margin-right:8px;vertical-align:1px}
.adm .lang.en,.drawer .lang.en{background:var(--teal)}
.lgpanes .stack16{gap:16px!important}
.tpair{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:6px 12px}
.tpair .hint{grid-column:1/-1}
.lgpanes[data-mode="both"] .tpair,.drawer .tpair{grid-template-columns:1fr}
@media (min-width:1100px){.lgpanes:not([data-mode="both"]) .tpair{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}}
@media (max-width:760px){.bi{grid-template-columns:1fr}}
.cnt-ok{color:var(--ok);font-size:11.5px;font-weight:700}
.cnt-bad{color:var(--danger);font-size:11.5px;font-weight:700}
/* toggle switch */
.sw{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.sw:last-child{border-bottom:0}
.sw .t b{display:block;font-size:14px;color:var(--ink)}
.sw .t span{font-size:12.5px;color:var(--muted)}
.tg{position:relative;flex:none;width:44px;height:26px}
.tg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.tg i{position:absolute;inset:0;border-radius:999px;background:#8e9a96;transition:background .2s}
.tg i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.tg input:checked + i{background:var(--mint)}
.tg input:checked + i::after{transform:translateX(18px)}
.tg input:focus-visible + i{outline:3px solid var(--orange);outline-offset:2px}
.tg input:disabled + i{opacity:.4}
.seg2{display:inline-flex;border:1.5px solid var(--line-2);border-radius:999px;padding:2px;background:#fff}
.seg2 button{font:700 12.5px var(--font);border:0;background:none;padding:6px 12px;border-radius:999px;cursor:pointer;color:var(--muted)}
.seg2 button[aria-pressed="true"]{background:var(--ink);color:#fff}
/* Segmented control: light track, thin dividers between the options (hidden next to the chosen one) */
.seg2{gap:2px;background:#eef3f1;border-color:var(--line)}
.seg2 button{position:relative;transition:background .15s,color .15s}
.seg2 button:not([aria-pressed="true"]):hover{background:rgba(23,59,54,.08);color:var(--ink)}
.seg2 button + button::before{content:"";position:absolute;left:-2px;top:25%;bottom:25%;width:1px;background:var(--line-2)}
.seg2 button[aria-pressed="true"]::before,.seg2 button[aria-pressed="true"] + button::before{display:none}
.seg2 button[aria-pressed="true"]{box-shadow:0 1px 3px rgba(7,20,25,.25)}
.new{font-size:10px;font-weight:800;letter-spacing:.08em;background:#e6f0f7;color:#2c4a66;border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:middle}
/* drawer */
.drawer{position:fixed;inset:0;z-index:600;display:flex;justify-content:flex-end;background:rgba(7,20,25,.45)}
.drawer .panel{width:min(980px,100%);height:100%;overflow:auto;background:var(--admin);padding:22px clamp(16px,3vw,32px) 80px;box-shadow:-20px 0 60px rgba(0,0,0,.25);overscroll-behavior:contain}
.drawer .phead{position:sticky;top:-22px;z-index:2;background:var(--admin);display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;margin-top:-14px;border-bottom:1px solid var(--line);margin-bottom:18px}
.drawer .phead h2{font-size:22px;color:var(--ink);letter-spacing:-.02em}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-weight:700;font-size:14px;z-index:900;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.mediagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.mcard{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;align-content:start}
.mcard .ph{all:unset;box-sizing:border-box;position:relative;display:block;aspect-ratio:4/3;background:var(--mist);cursor:pointer;overflow:hidden}
.mcard .ph:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.mcard .ph img{width:100%;height:100%;object-fit:cover;display:block}
.mcard .b{padding:10px 12px;display:grid;gap:4px;font-size:12px}
.mcard .b b{font-size:12.5px;color:var(--ink);overflow-wrap:anywhere}
.mcard .b .u{color:var(--muted)}
/* v2.14 media library: toolbar, project label, small tiles */
.mtools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mtools #mq{flex:1 1 240px;width:auto}
.mtools #mcount{margin-left:auto}
.upinfo{margin:12px 0 0}
.upinfo ol{margin:8px 0 0 18px;display:grid;gap:4px}
.mcard .mlab{position:absolute;left:8px;top:8px;max-width:calc(100% - 16px);background:rgba(7,20,25,.82);color:#fff;font:700 10.5px var(--font);padding:4px 8px;border-radius:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mediagrid.small{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.mediagrid.small .mcard .b{display:none}
.mediagrid.small .mcard .mlab{font-size:9.5px;padding:3px 6px}
.imeta-auto{font-weight:500;color:var(--muted);font-size:11.5px}
/* v2.14 case editor: featured toggle, NL/EN tabs, key-figure preview */
.abtn.cefeat[aria-pressed="true"]{background:#fff3db;border-color:#e9b75b;color:#5e3c00}
.lgpanes[data-mode="nl"] [data-lgpane="en"],.lgpanes[data-mode="en"] [data-lgpane="nl"]{display:none}
.lgpanes[data-mode="both"]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media (max-width:760px){.lgpanes[data-mode="both"]{grid-template-columns:1fr}.lgboth{display:none}}
.lgdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--orange);margin-left:6px;vertical-align:middle}
.lgdot[hidden]{display:none}
.mprev{margin-top:14px;background:var(--night);color:var(--on);border-radius:14px;padding:14px 16px;display:grid;gap:10px}
.mprev .kicker{color:var(--on-2)}
.mprev .metricbar{background:transparent}
.checklist{display:grid;gap:8px}
.chk{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.chk .ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px}
.chk.bad .ic{background:#fde7e5;color:#9b2119}.chk.warn .ic{background:#fff0dc;color:#8a4b00}.chk.ok .ic{background:#e2f3ea;color:#17683f}
.chk b{color:var(--ink);font-size:14px}
.chk p{font-size:13px;color:var(--muted);margin-top:2px}
.sortrow{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:6px}
.sortrow .mv{display:grid;gap:2px}
.sortrow .mv button{border:1px solid var(--line-2);background:#fff;border-radius:6px;width:26px;height:20px;line-height:1;cursor:pointer;font-size:11px;color:var(--ink)}
.sortrow img{width:64px;height:40px;object-fit:cover;border-radius:6px}
.login{min-height:calc(100vh - 30px);display:grid;place-items:center;padding:24px;background:var(--deep)}
.login .box{width:min(440px,100%);background:#fff;border-radius:20px;padding:32px;display:grid;gap:16px;color:var(--text)}
.login .box h1{font-size:28px;color:var(--ink)}
.previewbox{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#000}
.previewbox iframe{display:block;width:100%;height:clamp(380px,60vh,640px);border:0}
.lk{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:8px}
@media (max-width:700px){.lk{grid-template-columns:1fr}}
.codeblock{font:12px/1.5 ui-monospace,Consolas,monospace;background:#0b191e;color:#cfe0db;padding:14px;border-radius:10px;overflow:auto;max-height:340px;white-space:pre}
/* v2.5 admin additions */
.fdot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--orange);border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.35);pointer-events:none}
.fdot.big{width:22px;height:22px;margin:-11px 0 0 -11px;border-width:3px}
.fpimg{position:relative;display:inline-block;max-width:100%;cursor:crosshair;line-height:0;border-radius:10px;overflow:hidden}
.fpimg img{display:block;max-width:100%;max-height:55vh;width:auto;height:auto}
.croprow{display:grid;grid-template-columns:2.4fr 1.4fr 1fr .62fr;gap:12px;margin-top:14px;align-items:end}
.croprow figure{margin:0;display:grid;gap:6px}
.croprow .crop{overflow:hidden;border-radius:8px;background:var(--mist);border:1px solid var(--line)}
.croprow .crop img{width:100%;height:100%;object-fit:cover;display:block}
.croprow figcaption{font-size:11.5px;color:var(--muted);line-height:1.3}
@media (max-width:700px){.croprow{grid-template-columns:1fr 1fr}}
.imgbtn{all:unset;box-sizing:border-box;position:relative;display:block;flex:none;width:96px;height:64px;border-radius:8px;overflow:hidden;cursor:pointer;background:var(--mist)}
.imgbtn img{width:100%;height:100%;object-fit:cover;display:block}
.imgbtn span{position:absolute;inset:auto 0 0 0;background:rgba(7,20,25,.72);color:#fff;font-size:11px;font-weight:700;text-align:center;padding:2px 0}
.imgbtn:hover span,.imgbtn:focus-visible span{background:var(--orange);color:#1c1204}
.imgbtn:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.sortrow.slide{grid-template-columns:auto 1fr auto auto;align-items:center}
.slidebody{display:flex;gap:12px;align-items:center;min-width:0}
.slidebody .stack16{flex:1}
.slidebody input{padding:6px 9px!important;font-size:13px!important;width:100%}
.picker{position:fixed;inset:0;z-index:700;background:rgba(7,20,25,.55);display:grid;place-items:center;padding:24px}
.picker .pbox{background:var(--admin);border-radius:16px;padding:20px;width:min(1100px,100%);max-height:90vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.picker h2{font-size:20px;color:var(--ink)}
.pkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pkgrid button{all:unset;box-sizing:border-box;display:grid;gap:4px;background:#fff;border:2px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;padding-bottom:6px}
.pkgrid button:hover,.pkgrid button:focus-visible{border-color:var(--ink)}
.pkgrid button.cur{border-color:var(--mint)}
.pkgrid img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.pkgrid span{font-size:11.5px;color:var(--muted);padding:0 8px;overflow-wrap:anywhere}
.ceimgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ceimg{position:relative;display:grid;gap:6px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px}
.ceimg img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;display:block}
.ceimg .cov{position:absolute;top:12px;left:12px;background:var(--orange);color:#1c1204;font-size:11px;font-weight:800;border-radius:999px;padding:2px 8px;z-index:1}
.chips.edit{display:flex;flex-wrap:wrap;gap:6px}
.chips.edit .chip{display:inline-flex;align-items:center;gap:6px;background:#eef3f1;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 11px;font-size:13px;font-weight:600}
.chips.edit .chip button{border:0;background:#fff;border-radius:50%;width:20px;height:20px;cursor:pointer;font-size:14px;line-height:1;color:var(--danger)}
.casetbl td.num{white-space:nowrap}
.mtbl td{padding:6px}
.mtbl input[type=text]{padding:6px 8px!important;font-size:13px!important}
.mtbl .mv{display:grid;gap:2px}
.mtbl .mv button{border:1px solid var(--line-2);background:#fff;border-radius:6px;width:26px;height:18px;line-height:1;cursor:pointer;font-size:10px;color:var(--ink)}
.noimg{display:grid;place-items:center;width:56px;height:40px;border-radius:6px;background:var(--mist);font-size:10px;color:var(--muted);text-align:center}
details.seopage{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px}
details.seopage summary,details.later summary,details.card2 > summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
details.seopage summary::-webkit-details-marker,details.card2 > summary::-webkit-details-marker{display:none}
details.seopage summary::before,details.card2 > summary::before{content:"›";font-weight:800;color:var(--ink);transition:transform .2s;display:inline-block}
details[open].seopage > summary::before,details[open].card2 > summary::before{transform:rotate(90deg)}
.tgl .tgtxt{font-size:12.5px;font-weight:700;color:var(--ink)}
.tbl tr.off td{color:var(--muted)}
.tbl tr.off .tgtxt{color:var(--danger)}
.tbl tr.editing td{background:#f7faf8}
.tbl tr.editing input,.tbl tr.editing select{padding:6px 8px!important;font-size:13px!important;min-width:0;width:100%}
.custgrid{grid-template-columns:1fr}
/* "newer version available" bar (local draft only) */
.devbar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:950;display:flex;align-items:center;gap:14px;max-width:calc(100vw - 32px);padding:10px 12px 10px 18px;border-radius:14px;background:var(--amber);color:#1e1500;font:600 14px var(--font);box-shadow:0 12px 32px rgba(0,0,0,.3)}
.devbar button{flex:none;font:700 13px var(--font);border:0;border-radius:999px;padding:8px 14px;background:#1e1500;color:#fff;cursor:pointer}
/* Klanten: organisations as clickable rows */
.orglist{display:grid;gap:8px}
.orgrow{all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,2fr) auto 16px;gap:14px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;font:500 14px var(--font);color:var(--text);transition:border-color .2s}
.orgrow:hover{border-color:var(--ink)}
.orgrow:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.orgrow .on{display:grid;gap:2px;min-width:0}
.orgrow .on b{color:var(--ink);font-size:15px}
.orgrow .op{color:var(--text);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orgrow .op .off{color:var(--muted)}
.orgrow .oc{font-size:12.5px;color:var(--muted);white-space:nowrap}
.orgrow .arr{font-size:22px;line-height:1;color:var(--ink)}
@media (max-width:700px){.orgrow{grid-template-columns:minmax(0,1fr) 16px;gap:4px 10px}.orgrow .on,.orgrow .op,.orgrow .oc{grid-column:1}.orgrow .op{white-space:normal}.orgrow .arr{grid-column:2;grid-row:1/4}}
/* v2.13: organisations open in place */
.orgitem{border:1px solid var(--line);border-radius:12px;background:#fff;transition:border-color .2s}
.orgitem:hover,.orgitem.open{border-color:var(--ink)}
.orgitem .orgrow{border:0;width:100%}
.orgrow .arr{transition:transform .2s}
.orgitem.open .orgrow .arr{transform:rotate(90deg)}
.orgpanel{border-top:1px solid var(--line);padding:4px 16px 16px;background:#fbfcfb;border-radius:0 0 12px 12px}
.osec{padding:14px 0;border-bottom:1px solid var(--line)}
.osec h3{font-size:14px;color:var(--ink);margin-bottom:10px}
.pform{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;align-items:end}
.pform.add{margin-top:12px;padding:12px;border:1px dashed var(--line-2);border-radius:10px;background:#fff}
.pform .fld label .hint{font-weight:500}
/* assign box */
.asbox{border:1px solid var(--line);border-radius:12px;padding:12px 14px 14px;margin:14px 0 0;display:grid;gap:12px}
.asbox legend{font-weight:700;font-size:13px;color:var(--ink);padding:0 6px}
.asall{display:inline-flex;gap:8px;align-items:center;font-size:14px;cursor:pointer;color:var(--ink)}
.aspeople{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-top:8px}
.aschip{display:flex;gap:10px;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#f4f7f5;cursor:pointer}
.aschip:has(input:checked){border-color:var(--ink);background:#e8f1ee}
.aschip span{display:grid;gap:1px;min-width:0}
.aschip b{font-size:13.5px;color:var(--ink)}
.aschip small{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aschip.off{opacity:.6}
/* v2.6: own suggestion list (replaces the native datalist popup) and in-place confirmations */
.adm input[type=text][data-list],input[type=text][data-list]{padding-right:28px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23173b36' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:10px 6px}
.combo{position:fixed;z-index:800;max-height:260px;max-width:min(460px,calc(100vw - 16px));overflow:auto;background:#fff;border:1px solid var(--line-2);border-radius:10px;box-shadow:0 12px 32px rgba(7,20,25,.22);padding:4px;font:500 14px var(--font);color:var(--text)}
.combo [role=option]{display:grid;gap:1px;padding:7px 10px;border-radius:7px;cursor:pointer}
.combo [role=option] span{font-size:12px;color:var(--muted)}
.combo [role=option]:hover,.combo [role=option].act{background:#eef3f1}
.combo [role=option][aria-selected=true]{font-weight:700;color:var(--ink)}
.warnbar.confirm.inline{margin:10px 0;grid-column:1/-1}
/* embedded 3D viewer in client zone */
.viewer .stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#071419}