/* =========================================================
   CamoGun – aanvullingen op style.css
   v3 · 25-10-2026: nieuw logo, hero, werkwijze-foto's,
   uitgelicht werk, portfolio-pagina, partners, Cerakote Europe
   ========================================================= */

/* ---------- logo (ovaal, transparant) ---------- */
.logo{background:none;padding:0;border-radius:0}
.logo img{height:78px;width:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.solid .logo img{height:62px}
.nav{height:100px}.solid .nav{height:80px}
.logo,.logo img{transition:height .4s var(--ease)}
.foot-logo img{height:110px}
@media(max-width:960px){.logo img,.solid .logo img{height:58px}.nav,.solid .nav{height:76px}.mobmenu{top:76px;height:calc(100vh - 76px);height:calc(100dvh - 76px)}}

/* ---------- hero: hele foto zichtbaar ---------- */
.hero-media{aspect-ratio:8/7}
.hero-media img{transform:none!important}
@media(max-width:900px){.hero-media{aspect-ratio:8/7}}

/* ---------- werkwijze: vierkante foto per stap ---------- */
.step-img{margin-top:22px;width:100%;max-width:360px;aspect-ratio:1/1;border-radius:var(--r);
  box-shadow:0 24px 50px -28px rgba(0,0,0,.7);
  opacity:.28;filter:grayscale(.85) brightness(.85);transform:translateY(10px) scale(.985);
  transition:opacity .7s var(--ease-out),filter .7s var(--ease-out),transform .9s var(--ease-out)}
.step-img img{transform:scale(1.04);transition:transform 1.4s var(--ease-out)}
.step.on .step-img{opacity:1;filter:none;transform:none}
.step.on .step-img img{transform:none}
.step-img::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--o);z-index:1;
  transform:scaleY(0);transform-origin:top;transition:transform .8s var(--ease-out) .15s}
.step.on .step-img::before{transform:scaleY(1)}
.step-img figcaption{position:absolute;right:10px;bottom:10px;z-index:1;background:rgba(20,21,18,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--txt-dk);
  font:600 .72rem Barlow,sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:2px}
@media(max-width:560px){.step{grid-template-columns:48px 1fr;gap:16px}.num{width:48px;height:48px;font-size:1.1rem}
  .steps::before,.steps::after{left:23px}.step-img{max-width:none}}

/* ---------- uitgelicht werk (homepage) ---------- */
.work{padding:var(--sec) 0;background:var(--g-ddd);color:var(--w)}
.work .kicker{color:var(--o)}
.work-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:44px}
.work-head p{color:var(--muted-dk);max-width:44ch}
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(190px,21vw,290px);gap:16px;
  grid-template-areas:"a a b" "a a c" "d d e" "f g g"}
.bento>figure{position:relative;margin:0}
.bento>figure:nth-child(1){grid-area:a}.bento>figure:nth-child(2){grid-area:b}.bento>figure:nth-child(3){grid-area:c}
.bento>figure:nth-child(4){grid-area:d}.bento>figure:nth-child(5){grid-area:e}.bento>figure:nth-child(6){grid-area:f}
.bento>figure:nth-child(7){grid-area:g}
.bento button{display:block;width:100%;height:100%;text-align:left}
.bento .media{height:100%}
.bento .media img{transition:transform 1s var(--ease-out)}
.bento button:hover img{transform:scale(1.045)}
.tile-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:space-between;align-items:end;gap:12px;
  padding:40px 18px 16px;background:linear-gradient(transparent,rgba(14,15,12,.82));border-radius:0 0 var(--r) var(--r);pointer-events:none}
.tile-cap b{font:700 1.3rem/1.05 'Barlow Condensed',sans-serif;text-transform:uppercase;color:var(--w)}
.tile-cap span{color:var(--o);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;white-space:nowrap}
.work-foot{display:flex;justify-content:center;margin-top:44px}
@media(max-width:900px){.bento{grid-template-columns:1fr 1fr;grid-auto-rows:auto;grid-template-areas:"a a" "b c" "d d" "e f" "g g"}
  .bento>figure{aspect-ratio:4/3}.bento>figure:nth-child(1){aspect-ratio:4/3}
  .bento>figure:nth-child(4),.bento>figure:nth-child(7){aspect-ratio:2.75/1}}
@media(max-width:560px){.bento{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "d" "e" "f" "g"}
  .bento>figure:nth-child(4),.bento>figure:nth-child(7){aspect-ratio:2/1}}

/* ---------- Cerakote Europe doorverwijzing ---------- */
.ce{padding:clamp(70px,9vw,120px) 0;background:var(--sand)}
.ce-card{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(28px,5vw,64px);align-items:center;background:var(--w);
  border-left:6px solid var(--o);border-radius:var(--r);padding:clamp(28px,4vw,52px);box-shadow:0 30px 60px -40px rgba(29,31,26,.45)}
.ce-logo{width:clamp(150px,18vw,220px);height:auto}
.ce-card h2{font-size:clamp(2rem,4vw,3rem)}
.ce-card p{color:var(--muted);margin-top:14px;max-width:62ch}
.ce-card ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ce-card li{padding:6px 12px;border:1px solid var(--line);border-radius:40px;font-size:.9rem;font-weight:600;color:var(--g)}
@media(max-width:900px){.ce-card{grid-template-columns:1fr}.ce-card .btn{justify-self:start}}

/* ---------- Wat is Cerakote: foto 4:3, geen extra zoom ---------- */
.cera-media .media{aspect-ratio:4/3}
.cera-media img{transform:none!important}

/* ---------- partners ---------- */
.partners .logos{grid-template-columns:repeat(4,1fr);border:0;background:none;gap:14px}
.partners .logos li{border:0!important;background:var(--w);border-radius:var(--r);box-shadow:0 1px 0 var(--line),0 18px 40px -34px rgba(29,31,26,.5);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.partners .logos li:hover{transform:translateY(-4px);box-shadow:0 1px 0 var(--line),0 26px 50px -30px rgba(29,31,26,.5)}
.partners .logos a,.partners .logos .nolink{display:grid;place-items:center;height:140px;padding:26px 28px;text-decoration:none}
.partners .logos img{max-height:72px;max-width:100%;width:auto;filter:none;opacity:1}
.partners .logos a:hover img{transform:none}
.partners .logos li.dark{background:#1d1f1a}
.partners .logos li.tall a{padding:14px}
.partners .logos li.tall img{max-height:112px}
.partners .logos .empty-logo{font:800 1.5rem/1 'Barlow Condensed',sans-serif;letter-spacing:.04em;color:var(--g)}
@media(max-width:900px){.partners .logos{grid-template-columns:1fr 1fr}.partners .logos a,.partners .logos .nolink{height:116px;padding:20px}
  .partners .logos img{max-height:56px}}

/* ---------- offerteformulier ---------- */
.form-hint{font-size:.85rem;color:var(--muted);margin-top:-8px}
.form-hint a{color:var(--o-d);font-weight:600}

/* ---------- portfolio-pagina ---------- */
.pf-hero{position:relative;background:var(--g);color:var(--w);padding:170px 0 70px;overflow:hidden;isolation:isolate}
.pf-hero .camo{opacity:.45}
.pf-hero .kicker{color:var(--o)}
.pf-hero h1{font-size:clamp(3rem,8vw,6.4rem);font-weight:800;line-height:.92}
.pf-hero p:not(.kicker){margin-top:20px;color:var(--txt-dk);font-size:1.12rem;max-width:58ch}
.pf{padding:clamp(40px,6vw,80px) 0 clamp(60px,8vw,100px);background:var(--g-ddd);color:var(--w)}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.filters button{min-height:44px;padding:10px 18px;border-radius:40px;border:1.5px solid var(--line-dk);color:var(--txt-dk);font-weight:600;font-size:.95rem;transition:all .25s}
.filters button:hover{border-color:var(--o);color:var(--o)}
.filters button[aria-pressed="true"]{background:var(--o);border-color:var(--o);color:var(--g-dd)}
.filters button span{opacity:.6;font-weight:500;margin-left:4px}
.masonry{columns:3 320px;column-gap:16px}
.masonry figure{break-inside:avoid;margin:0 0 16px;position:relative}
.masonry figure[hidden]{display:none}
.masonry button{display:block;width:100%;text-align:left}
.masonry .media{background:var(--g-d)}
.masonry .media img{height:auto;transition:transform .9s var(--ease-out)}
.masonry button:hover img{transform:scale(1.04)}
.masonry .tile-cap{padding:34px 14px 12px}
.masonry .tile-cap b{font-size:1.12rem}
.pf-cta{margin-top:56px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:30px 34px;
  background:var(--o);color:var(--g-dd);border-radius:var(--r)}
.pf-cta h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.pf-cta .btn{background:var(--g-dd);color:var(--w)}
.pf-cta .btn:hover{background:var(--g)}

/* ---------- kruimelpad ---------- */
.crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:.85rem;color:var(--muted-dk);margin-bottom:22px;list-style:none}
.crumbs a{color:var(--txt-dk);text-decoration:none}
.crumbs a:hover{color:var(--o)}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.5}

/* ---------- actief menu-item op subpagina's ---------- */
.menu a[aria-current="page"]::after{transform:scaleX(1)}

@media(prefers-reduced-motion:reduce){.step-img{opacity:1;filter:none;transform:none}.step-img::before{transform:none}}

/* ---------- officieel Cerakote-certificeringszegel bij de werkplaats-foto ---------- */
.stamp-seal{background:none;width:150px;height:auto;right:-40px;top:-46px;display:block;filter:drop-shadow(0 14px 26px rgba(0,0,0,.35))}
.stamp-seal img{width:100%;height:auto;display:block}
@media(max-width:900px){.stamp-seal{width:112px;right:10px;top:-40px}}

/* =========================================================
   v4 · 26-10-2026: compacter, horizontale rijen
   ========================================================= */
:root{--sec:clamp(64px,8vw,108px)}
.partners,.ce{padding:clamp(56px,6vw,88px) 0}

/* kop boven een horizontale rij */
.row-head{display:flex;justify-content:space-between;align-items:end;gap:20px 48px;flex-wrap:wrap;margin-bottom:34px}
.row-head h2{max-width:16ch}
.row-head p{max-width:46ch;color:var(--txt-dk);font-size:1.02rem}
.work .row-head p{color:var(--muted-dk)}
.process-h{padding:var(--sec) 0}

/* carrousel */
.carousel{position:relative}
.c-track{display:flex;gap:20px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
  list-style:none;cursor:grab;outline:none;-webkit-overflow-scrolling:touch}
.c-track::-webkit-scrollbar{display:none}
.c-track:focus-visible{outline:3px solid var(--o);outline-offset:6px}
.c-track>*{scroll-snap-align:start;flex:0 0 auto}
.c-track.dragging{scroll-snap-type:none;cursor:grabbing}
.c-track.dragging *{pointer-events:none}
.c-track img{user-select:none;-webkit-user-drag:none}
.c-ui{display:flex;align-items:center;gap:24px;margin-top:26px}
.c-bar{flex:1;height:2px;background:var(--line-dk);overflow:hidden;border-radius:2px}
.c-bar span{display:block;height:100%;width:30%;background:var(--o);transition:transform .15s linear}
.c-nav{display:flex;gap:10px}
.c-nav button{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line-dk);color:var(--w);font-size:1.3rem;transition:border-color .25s,color .25s,opacity .25s}
.c-nav button:hover:not(:disabled){border-color:var(--o);color:var(--o)}
.c-nav button:disabled{opacity:.3;cursor:default}

/* werkwijze als kaarten naast elkaar */
.hs{width:calc((100% - 60px)/4);background:var(--g-d);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  border-top:3px solid var(--o)}
.hs .media{aspect-ratio:4/3;border-radius:0}
.hs .media img{transition:transform 1s var(--ease-out)}
.hs:hover .media img{transform:scale(1.04)}
.hs figcaption{position:absolute;right:10px;bottom:10px;z-index:1;background:rgba(20,21,18,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:var(--txt-dk);font:600 .72rem Barlow,sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:2px}
.hs-body{padding:20px 22px 26px}
.hs-num{display:inline-block;font:800 1rem 'Barlow Condensed',sans-serif;letter-spacing:.14em;color:var(--o);margin-bottom:6px}
.hs h3{font-size:1.6rem;margin-bottom:8px;color:var(--w)}
.hs p{color:var(--txt-dk);font-size:.96rem}
@media(max-width:1100px){.hs{width:calc((100% - 40px)/3)}}
@media(max-width:800px){.hs{width:calc((100% - 20px)/2)}}
@media(max-width:560px){.hs{width:84%}.c-nav button{width:46px;height:46px}}

/* uitgelicht werk: foto's in hun eigen verhouding naast elkaar */
.w-track{gap:16px}
.wcard{position:relative;margin:0;height:clamp(230px,28vw,380px);aspect-ratio:var(--ar);max-width:88vw}
.wcard button{display:block;width:100%;height:100%;text-align:left}
.wcard .media{height:100%}
.wcard .media img{transition:transform 1s var(--ease-out)}
.wcard button:hover img{transform:scale(1.045)}
.wcard-cta{display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:3/4;padding:28px;background:var(--o);color:var(--g-dd);
  text-decoration:none;border-radius:var(--r);transition:background .3s}
.wcard-cta:hover{background:#ffb04f}
.wcard-cta span{font:800 clamp(1.9rem,3vw,2.6rem)/.95 'Barlow Condensed',sans-serif;text-transform:uppercase}
.wcard-cta em{font-style:normal;font-weight:600}
.wcard-cta em::after{content:" →"}

/* partners: één bewegende rij */
.belt{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.belt-track{display:flex;gap:14px;width:max-content;list-style:none;padding:8px 0 20px;animation:belt 48s linear infinite}
.belt:hover .belt-track,.belt:focus-within .belt-track{animation-play-state:paused}
.belt li{flex:0 0 auto;width:230px;background:var(--w);border-radius:var(--r);box-shadow:0 1px 0 var(--line),0 18px 40px -34px rgba(29,31,26,.5)}
.belt li.dark{background:#1d1f1a}
.belt a,.belt .nolink{display:grid;place-items:center;height:124px;padding:22px 24px}
.belt img{max-height:66px;max-width:100%;width:auto;height:auto}
.belt li.tall a{padding:8px}
.belt li.tall img{max-height:106px}
@keyframes belt{to{transform:translateX(calc(-50% - 7px))}}
@media(max-width:700px){.belt li{width:176px}.belt a,.belt .nolink{height:100px;padding:16px}.belt img{max-height:52px}.belt li.tall img{max-height:84px}}

/* laser-werkwijze: vier kaarten naast elkaar */
.hgrid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hgrid li{background:rgba(255,255,255,.04);border:1px solid var(--line-dk);border-top:3px solid var(--o);border-radius:var(--r);padding:24px 22px 26px}
.hgrid h3{font-size:1.5rem;margin:4px 0 8px;color:var(--w)}
.hgrid p{color:var(--txt-dk);font-size:.96rem}
.lz-process .files{margin-top:34px}
@media(max-width:900px){.hgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.hgrid{grid-template-columns:1fr}}

/* bewegende balken blijven bewegen, ook met 'animaties beperken' (rustiger tempo) */
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:mq 60s linear infinite!important}
  .belt-track{animation:belt 80s linear infinite!important}
}

/* voor/na: tekst links, schuif rechts */
.ba-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(32px,5vw,72px);align-items:center}
.ba-grid .sec-head{margin:0;max-width:none}
.ba-grid .ba{width:100%;margin:0}
@media(max-width:960px){.ba-grid{grid-template-columns:1fr}.ba-grid .sec-head{text-align:left}}
.foot-big{margin-bottom:36px}

/* =========================================================
   v5 · 26-10-2026: werkwijze in één oogopslag, partners stil
   ========================================================= */
/* werkwijze: 6 compacte kaarten, alles direct zichtbaar */
.hs-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hs-grid .hs{width:auto;display:grid;grid-template-columns:clamp(120px,11vw,160px) 1fr;border-top:0;border-left:3px solid var(--o)}
.hs-grid .hs .media{aspect-ratio:auto;height:100%;min-height:150px}
.hs-grid .hs figcaption{display:none}
.hs-grid .hs-body{padding:16px 18px 18px}
.hs-grid .hs h3{font-size:1.35rem;margin-bottom:6px}
.hs-grid .hs p{font-size:.9rem;line-height:1.5}
@media(max-width:1000px){.hs-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.hs-grid{grid-template-columns:1fr}.hs-grid .hs{grid-template-columns:110px 1fr}.hs-grid .hs .media{min-height:120px}}

/* uitgelicht werk: rij loopt door tot de rand van het scherm, kleinere foto's = meer in beeld */
.carousel-bleed .c-track{margin-right:calc((100% - 100vw) / 2);padding-right:var(--gut)}
.w-track .wcard{height:clamp(180px,15vw,220px)}
@media(max-width:560px){.w-track .wcard{height:200px}}

/* partners: stilstaand raster, 5 + 4 gecentreerd */
.partners .logos-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.partners .logos-grid li{width:calc((100% - 56px) / 5)}
.partners .logos-grid a,.partners .logos-grid .nolink{height:130px}
@media(max-width:900px){.partners .logos-grid li{width:calc((100% - 28px) / 3)}}
@media(max-width:560px){.partners .logos-grid li{width:calc((100% - 14px) / 2)}.partners .logos-grid a,.partners .logos-grid .nolink{height:104px}}
/* v6: werkwijze breder dan de tekstkolom, grotere foto's */
@media(min-width:1001px){
.hs-grid{--hsw:min(1640px,calc(100vw - 2 * var(--gut) - 20px));width:var(--hsw);margin-left:calc(50% - var(--hsw) / 2);gap:20px}
.hs-grid .hs{grid-template-columns:clamp(170px,14vw,270px) 1fr}
.hs-grid .hs .media{min-height:clamp(200px,15vw,270px)}
.hs-grid .hs-body{padding:22px 24px 24px}
.hs-grid .hs h3{font-size:1.5rem}
.hs-grid .hs p{font-size:.98rem}
}
@media(min-width:1001px){#werkwijze .row-head{--hsw:min(1640px,calc(100vw - 2 * var(--gut) - 20px));width:var(--hsw);margin-left:calc(50% - var(--hsw) / 2)}}