:root{
  --bg:#ffffff;
  --ink:#0a0a0a;
  --line:#0a0a0a;
  --muted:#646464;
  --grid:#ececec;
  --accent:#00B4FF;
  --accent-text:#006b9e;
  --accent-glow:rgba(0,180,255,0.55);
  --card:#fafafa;
  --stroke:1.5px;
  --radius:0px;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --sans:'Space Grotesk', system-ui, -apple-system, sans-serif;
}

/* ===== POWER-ON INTRO ===== */
body.intro-open{overflow:hidden}
.site-intro[hidden]{display:none}
.site-intro{
  position:fixed;
  inset:0;
  z-index:99990;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px,42vw);
  min-height:100dvh;
  overflow:auto;
  background:
    linear-gradient(90deg,rgba(4,6,7,.06) 0 54%,rgba(4,6,7,.86) 72%,#050607 100%),
    url("assets/og.png?v=20260724-space-grotesk") center/cover no-repeat,
    #050607;
  color:#fff;
  opacity:0;
  transition:opacity .45s ease;
}
.site-intro.is-visible{opacity:1}
.site-intro.is-leaving{opacity:0;pointer-events:none}
.site-intro__art{position:relative;min-height:100dvh}
.site-intro__art-label{
  position:absolute;
  left:clamp(28px,4vw,72px);
  bottom:clamp(24px,4vw,56px);
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(4,6,7,.72);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.2em;
  color:rgba(255,255,255,.78);
}
.site-intro__panel{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:100dvh;
  padding:clamp(34px,5vw,76px);
  border-left:1px solid rgba(255,255,255,.24);
  background:rgba(5,6,7,.94);
  box-shadow:-30px 0 80px rgba(0,0,0,.42);
  transform:translateX(32px);
  transition:transform .65s cubic-bezier(.2,.8,.2,1);
}
.site-intro.is-visible .site-intro__panel{transform:translateX(0)}
.site-intro__status{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:clamp(38px,7vh,78px);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.2em;
  color:rgba(255,255,255,.66);
}
.site-intro__status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 14px var(--accent);
  animation:introPulse 1.6s ease-in-out infinite;
}
@keyframes introPulse{50%{opacity:.35;box-shadow:0 0 3px var(--accent)}}
.site-intro__copy{max-width:620px}
.site-intro__kicker{
  margin-bottom:16px;
  font-family:var(--mono);
  font-size:10px!important;
  line-height:1.6!important;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--accent)!important;
}
.site-intro__copy h2{
  max-width:620px;
  margin:0 0 22px;
  font-size:clamp(42px,5vw,82px);
  line-height:.92;
  letter-spacing:-.055em;
  color:#fff;
}
.site-intro__copy h2 span{color:var(--accent)}
.site-intro__copy>p:last-child{
  max-width:570px;
  font-size:clamp(15px,1.25vw,19px);
  line-height:1.55;
  color:rgba(255,255,255,.72);
}
.site-intro__cursor-guide{
  display:grid;
  grid-template-columns:190px 1fr;
  align-items:center;
  gap:26px;
  margin:clamp(34px,6vh,64px) 0 26px;
  padding:24px 0;
  border-top:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(255,255,255,.18);
}
.site-intro__cursor-guide strong{display:block;margin-bottom:7px;font-size:18px}
.site-intro__cursor-guide p{
  max-width:360px;
  font-size:13px;
  line-height:1.55;
  color:rgba(255,255,255,.62);
}
.site-intro__touch-help{display:none}
.site-intro__switch{position:relative;width:190px;height:50px;color:#fff}
.site-intro__wire{position:absolute;top:25px;height:1px;background:currentColor}
.site-intro__wire--left{left:0;width:31px}
.site-intro__wire--right{left:112px;width:35px}
.site-intro__contact{
  position:absolute;
  top:21px;
  width:9px;
  height:9px;
  border:2px solid currentColor;
  border-radius:50%;
  background:#050607;
}
.site-intro__contact--left{left:29px}
.site-intro__contact--right{left:104px}
.site-intro__lever{
  position:absolute;
  left:37px;
  top:24px;
  width:70px;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transform-origin:left center;
  transform:rotate(-25deg);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),color .2s ease;
}
.site-intro__lamp{
  position:absolute;
  left:151px;
  top:12px;
  width:27px;
  height:27px;
  border:1.5px solid currentColor;
  border-radius:50%;
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.site-intro__lamp::before,
.site-intro__lamp::after{
  content:"";
  position:absolute;
  left:5px;
  top:12px;
  width:15px;
  height:1px;
  background:currentColor;
  transform:rotate(45deg);
}
.site-intro__lamp::after{transform:rotate(-45deg)}
.site-intro.is-circuit-closed .site-intro__switch{color:var(--accent)}
.site-intro.is-circuit-closed .site-intro__lever{transform:rotate(0deg)}
.site-intro.is-circuit-closed .site-intro__lamp{
  border-color:var(--accent);
  background:var(--accent);
  box-shadow:0 0 22px color-mix(in srgb, var(--accent) 78%, transparent);
}
.site-intro.is-circuit-closed .site-intro__lamp::before,
.site-intro.is-circuit-closed .site-intro__lamp::after{opacity:0}
.site-intro__enter{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  width:100%;
  min-height:76px;
  padding:16px 20px;
  border:1px solid rgba(255,255,255,.48);
  background:transparent;
  color:#fff;
  text-align:left;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.site-intro__enter:hover,
.site-intro__enter:focus-visible{
  border-color:#fff;
  background:#fff;
  color:#050607;
  outline:none;
}
.site-intro__enter:active{transform:translateY(2px)}
.site-intro__enter-state{
  min-width:96px;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
}
.site-intro__enter-label{font-size:clamp(18px,1.6vw,24px);font-weight:600}
.site-intro__enter-arrow{font-size:28px}
.site-intro__skip{
  margin-top:14px;
  font-family:var(--mono);
  font-size:9px;
  line-height:1.5;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.footer-replay{padding:0;font:inherit;color:inherit;text-align:left}
.footer-replay:hover{text-decoration:underline;text-underline-offset:3px}

@media (max-width:900px){
  .site-intro{
    grid-template-columns:1fr;
    grid-template-rows:minmax(220px,34vh) auto;
    background-position:center top;
  }
  .site-intro__art{min-height:34vh}
  .site-intro__panel{
    min-height:66vh;
    padding:34px 26px 42px;
    border-top:1px solid rgba(255,255,255,.24);
    border-left:0;
    transform:translateY(24px);
  }
  .site-intro.is-visible .site-intro__panel{transform:translateY(0)}
  .site-intro__status{margin-bottom:28px}
  .site-intro__copy h2{font-size:clamp(38px,11vw,64px)}
  .site-intro__cursor-guide{margin:30px 0 22px}
  .site-intro__art-label{display:none}
}
@media (max-width:620px){
  .site-intro{grid-template-rows:minmax(180px,28vh) auto}
  .site-intro__art{min-height:28vh}
  .site-intro__panel{min-height:72vh}
  .site-intro__cursor-guide{grid-template-columns:1fr;gap:12px}
  .site-intro__switch{width:180px}
  .site-intro__enter{grid-template-columns:1fr auto;gap:10px}
  .site-intro__enter-state{grid-column:1/-1;min-width:0}
}
@media (pointer:coarse){
  .site-intro__desktop-help{display:none}
  .site-intro__touch-help{display:block}
  .site-intro .site-intro__lever{transform:rotate(0deg)}
  .site-intro .site-intro__switch{color:var(--accent)}
  .site-intro .site-intro__lamp{border-color:var(--accent);box-shadow:0 0 14px color-mix(in srgb, var(--accent) 52%, transparent)}
}
@media (prefers-reduced-motion:reduce){
  .site-intro,
  .site-intro__panel,
  .site-intro__lever,
  .site-intro__lamp,
  .site-intro__enter{transition:none}
  .site-intro__status-dot{animation:none}
}

/* ===== POWER-ON INTRO V2: fullscreen, centered, project slideshow ===== */
.site-intro{
  display:flex;
  align-items:stretch;
  justify-content:center;
  min-height:100dvh;
  overflow:hidden;
  background:#050607;
}
.site-intro__backdrop,
.site-intro__shade{
  position:absolute;
  inset:0;
}
.site-intro__backdrop{
  z-index:0;
  overflow:hidden;
  background:#050607;
}
.site-intro__slide{
  position:absolute;
  inset:-2%;
  margin:0;
  opacity:0;
  transform:scale(1.015);
  transition:opacity 1.8s ease,transform 8s ease-out;
}
.site-intro__slide.is-active{
  opacity:1;
  transform:scale(1.045);
}
.site-intro__slide img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  filter:saturate(.88) contrast(1.03);
}
.site-intro__slide figcaption{
  position:absolute;
  left:clamp(22px,3vw,48px);
  bottom:clamp(20px,3vw,40px);
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.34);
  font-family:var(--mono);
  font-size:9px;
  line-height:1.4;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.54);
}
.site-intro__shade{
  z-index:1;
  background:
    radial-gradient(circle at 50% 46%,rgba(0,0,0,.38) 0%,rgba(0,0,0,.60) 52%,rgba(0,0,0,.80) 100%),
    rgba(0,0,0,.22);
}
.site-intro__panel{
  position:relative;
  z-index:2;
  width:100%;
  min-height:100dvh;
  padding:clamp(30px,5vw,72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  box-shadow:none;
  text-align:center;
  transform:translateY(18px);
}
.site-intro.is-visible .site-intro__panel{transform:translateY(0)}
.site-intro__status{
  justify-content:center;
  margin-bottom:clamp(20px,3vh,34px);
}
.site-intro__copy{
  width:min(860px,100%);
  max-width:none;
}
.site-intro__copy h2{
  max-width:860px;
  margin:0 auto 22px;
  font-size:clamp(50px,7vw,104px);
  line-height:.88;
}
.site-intro__copy>p:last-child{
  max-width:720px;
  margin-inline:auto;
  color:rgba(255,255,255,.76);
}
.site-intro__cursor-guide{
  width:min(720px,100%);
  grid-template-columns:190px minmax(0,1fr);
  margin:clamp(28px,4.5vh,48px) 0 22px;
  padding:20px 22px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(5,6,7,.28);
  backdrop-filter:blur(8px);
  text-align:left;
}
.site-intro__cursor-guide p{max-width:430px}
.site-intro__enter{width:min(720px,100%)}
.site-intro__skip{text-align:center}

@media (max-width:900px){
  .site-intro{
    display:flex;
    min-height:100dvh;
    background:#050607;
  }
  .site-intro__panel{
    min-height:100dvh;
    padding:32px 26px;
    border:0;
    transform:translateY(18px);
  }
  .site-intro__status{margin-bottom:22px}
  .site-intro__copy h2{font-size:clamp(44px,10vw,78px)}
  .site-intro__cursor-guide{margin:28px 0 20px}
}
@media (max-width:620px){
  .site-intro{display:flex;min-height:100dvh}
  .site-intro__panel{
    min-height:100dvh;
    padding:24px 20px;
    overflow-y:auto;
  }
  .site-intro__copy h2{font-size:clamp(38px,11vw,60px)}
  .site-intro__copy>p:last-child{font-size:14px}
  .site-intro__cursor-guide{
    grid-template-columns:1fr;
    gap:10px;
    margin:22px 0 16px;
    padding:15px 16px;
    text-align:center;
  }
  .site-intro__switch{margin-inline:auto}
  .site-intro__enter{grid-template-columns:1fr auto;gap:10px}
  .site-intro__enter-state{grid-column:1/-1;min-width:0}
  .site-intro__slide figcaption{display:none}
}
@media (max-height:760px) and (min-width:621px){
  .site-intro__panel{padding-block:22px}
  .site-intro__status{margin-bottom:14px}
  .site-intro__copy h2{font-size:clamp(44px,8vh,68px);margin-bottom:14px}
  .site-intro__cursor-guide{margin:20px 0 14px;padding-block:14px}
  .site-intro__enter{min-height:64px}
}
@media (prefers-reduced-motion:reduce){
  .site-intro__slide{transition:none;transform:none}
  .site-intro__slide:not(:first-child){display:none}
}

/* ===== POWER-ON INTRO V3: layered project collage + single power control ===== */
.site-intro{
  background:#030405;
}
.site-intro__backdrop{
  inset:-5%;
  background:#030405;
}
.site-intro__project{
  --intro-rotate:0deg;
  --intro-rotate-end:2deg;
  --intro-drift-x:24px;
  --intro-drift-y:-20px;
  --intro-duration:9s;
  --intro-image-duration:13s;
  position:absolute;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.24);
  background:#0a0a0a;
  box-shadow:0 24px 70px rgba(0,0,0,.48);
  opacity:.82;
  transform:rotate(var(--intro-rotate)) scale(.96);
  animation:introProjectDrift var(--intro-duration) ease-in-out infinite alternate;
}
.site-intro__project img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  opacity:0;
  filter:saturate(1.08) contrast(1.04) brightness(.9);
  transform-origin:center;
  animation:introProjectImageMove var(--intro-image-duration) ease-in-out infinite alternate;
  transition:opacity 1.65s cubic-bezier(.22,.61,.36,1);
}
.site-intro__project img.is-active{
  opacity:1;
}
.site-intro__project figcaption{
  position:absolute;
  left:12px;
  bottom:12px;
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.26);
  background:rgba(3,4,5,.62);
  backdrop-filter:blur(8px);
  font-family:var(--mono);
  font-size:8px;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  z-index:3;
}
.site-intro__project--1{
  left:-5vw;top:3vh;
  width:42vw;height:46vh;
  z-index:2;
  --intro-rotate:-6deg;
  --intro-rotate-end:-2deg;
  --intro-drift-x:34px;
  --intro-drift-y:-26px;
  --intro-duration:8.5s;
  --intro-image-duration:12s;
}
.site-intro__project--2{
  right:-7vw;top:-7vh;
  width:39vw;height:50vh;
  z-index:3;
  --intro-rotate:7deg;
  --intro-rotate-end:3deg;
  --intro-drift-x:-30px;
  --intro-drift-y:28px;
  --intro-duration:10s;
  --intro-image-duration:14s;
}
.site-intro__project--3{
  left:6vw;bottom:-14vh;
  width:29vw;height:51vh;
  z-index:4;
  --intro-rotate:5deg;
  --intro-rotate-end:9deg;
  --intro-drift-x:-27px;
  --intro-drift-y:-32px;
  --intro-duration:9s;
  --intro-image-duration:11.5s;
}
.site-intro__project--4{
  right:2vw;bottom:-15vh;
  width:32vw;height:54vh;
  z-index:5;
  --intro-rotate:-5deg;
  --intro-rotate-end:-9deg;
  --intro-drift-x:32px;
  --intro-drift-y:-27px;
  --intro-duration:10.5s;
  --intro-image-duration:15s;
}
.site-intro__project--5{
  left:35vw;top:-10vh;
  width:29vw;height:38vh;
  z-index:1;
  --intro-rotate:-2deg;
  --intro-rotate-end:2deg;
  --intro-drift-x:24px;
  --intro-drift-y:26px;
  --intro-duration:11s;
  --intro-image-duration:13.5s;
}
.site-intro__project--6{
  right:35vw;bottom:1vh;
  width:20vw;height:35vh;
  z-index:6;
  --intro-rotate:8deg;
  --intro-rotate-end:4deg;
  --intro-drift-x:-28px;
  --intro-drift-y:-24px;
  --intro-duration:9.5s;
  --intro-image-duration:12.5s;
}
@keyframes introProjectDrift{
  from{transform:translate3d(0,0,0) rotate(var(--intro-rotate)) scale(.96)}
  to{transform:translate3d(var(--intro-drift-x),var(--intro-drift-y),0) rotate(var(--intro-rotate-end)) scale(1.06)}
}
@keyframes introProjectImageMove{
  from{transform:translate3d(-1.5%,1%,0) scale(1.025)}
  to{transform:translate3d(1.5%,-1%,0) scale(1.11)}
}
.site-intro__shade{
  background:
    radial-gradient(circle at 50% 45%,rgba(2,3,4,.44) 0%,rgba(2,3,4,.5) 38%,rgba(2,3,4,.67) 76%,rgba(2,3,4,.78) 100%),
    rgba(0,0,0,.14);
}
.site-intro__panel{
  gap:0;
  padding:clamp(24px,4vh,52px) clamp(22px,5vw,76px);
  background:transparent;
}
.site-intro__brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-bottom:clamp(22px,3.5vh,40px);
}
.site-intro__logo{
  width:clamp(220px,18vw,300px);
  height:auto;
  display:block;
  filter:brightness(0) invert(1);
}
.site-intro__copy{
  width:min(900px,100%);
}
.site-intro__copy h2{
  max-width:900px;
  font-size:clamp(48px,6.5vw,96px);
}
.site-intro__description{
  display:grid;
  gap:8px;
  max-width:700px;
  margin-inline:auto;
  font-size:clamp(15px,1.25vw,19px);
  line-height:1.58;
  color:rgba(255,255,255,.76);
}
.site-intro__enter{
  width:min(820px,100%);
  min-height:112px;
  margin-top:clamp(28px,4.5vh,48px);
  padding:18px 22px;
  grid-template-columns:minmax(220px,280px) minmax(0,1fr) auto auto;
  gap:22px;
  border-color:rgba(255,255,255,.34);
  background:rgba(3,4,5,.46);
  backdrop-filter:blur(16px);
  color:#fff;
}
.site-intro__enter:hover,
.site-intro__enter:focus-visible{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  color:#fff;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),0 18px 60px rgba(0,0,0,.28);
}
.site-intro__power-circuit{
  width:100%;
  display:block;
  color:rgba(255,255,255,.9);
}
.site-intro__power-circuit svg{
  width:100%;
  height:auto;
  display:block;
  overflow:visible;
}
.site-intro__power-input,
.site-intro__power-wire,
.site-intro__power-tail{
  transition:color .25s ease,filter .25s ease,opacity .25s ease;
}
.site-intro__power-lever{
  transform-box:view-box;
  transform-origin:90px 32px;
  transform:rotate(-24deg);
  transition:transform .34s cubic-bezier(.2,.8,.2,1),color .25s ease;
}
.site-intro__power-lamp{
  transition:fill .25s ease,stroke .25s ease,filter .25s ease;
}
.site-intro__power-lamp-x{
  transition:opacity .2s ease;
}
.site-intro.is-circuit-closed .site-intro__power-circuit{
  color:var(--accent);
}
.site-intro.is-circuit-closed .site-intro__power-lever{
  transform:rotate(0deg);
}
.site-intro.is-circuit-closed .site-intro__power-lamp{
  fill:var(--accent);
  stroke:var(--accent);
  filter:drop-shadow(0 0 7px var(--accent)) drop-shadow(0 0 18px var(--accent-glow));
}
.site-intro.is-circuit-closed .site-intro__power-lamp-x{opacity:0}
.site-intro.is-circuit-closed .site-intro__power-tail{filter:drop-shadow(0 0 5px var(--accent-glow))}
.site-intro__enter-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:7px;
  text-align:left;
}
.site-intro__enter-label{
  font-size:clamp(19px,1.7vw,24px);
  font-weight:650;
}
.site-intro__enter-copy .site-intro__desktop-help,
.site-intro__enter-copy .site-intro__touch-help{
  font-size:12px;
  line-height:1.45;
  color:rgba(255,255,255,.55);
}
.site-intro__enter-state{
  min-width:92px;
  padding-left:18px;
  border-left:1px solid rgba(255,255,255,.18);
  color:var(--accent);
  text-align:left;
}
.site-intro__enter-arrow{
  font-size:30px;
  transition:transform .25s ease;
}
.site-intro__enter:hover .site-intro__enter-arrow,
.site-intro__enter:focus-visible .site-intro__enter-arrow{transform:translateX(5px)}
.site-intro__skip{
  margin-top:14px;
  color:rgba(255,255,255,.34);
}

@media (max-width:900px){
  .site-intro__project{opacity:.72}
  .site-intro__project--1{left:-20vw;width:66vw;height:40vh}
  .site-intro__project--2{right:-24vw;width:68vw;height:42vh}
  .site-intro__project--3{left:-13vw;width:53vw;height:44vh}
  .site-intro__project--4{right:-9vw;width:48vw;height:47vh}
  .site-intro__project--5{left:32vw;width:40vw;height:30vh}
  .site-intro__project--6{display:none}
  .site-intro__panel{padding:26px 24px}
  .site-intro__brand{margin-bottom:24px}
  .site-intro__copy h2{font-size:clamp(44px,9vw,74px)}
  .site-intro__enter{
    grid-template-columns:minmax(190px,240px) minmax(0,1fr) auto;
    gap:16px;
  }
  .site-intro__enter-state{display:none}
}
@media (max-width:620px){
  .site-intro__panel{
    min-height:100dvh;
    padding:22px 18px;
    overflow-y:auto;
  }
  .site-intro__brand{margin-bottom:18px}
  .site-intro__logo{width:180px}
  .site-intro__copy h2{
    margin-bottom:16px;
    font-size:clamp(38px,11vw,56px);
  }
  .site-intro__description{gap:6px;font-size:13px}
  .site-intro__enter{
    min-height:0;
    margin-top:24px;
    padding:16px;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px 14px;
  }
  .site-intro__power-circuit{
    grid-column:1/-1;
    width:min(280px,100%);
    margin-inline:auto;
  }
  .site-intro__enter-copy{grid-column:1}
  .site-intro__enter-arrow{grid-column:2;grid-row:2}
  .site-intro__project figcaption{display:none}
  .site-intro__project--1{left:-38vw;top:2vh;width:88vw;height:36vh}
  .site-intro__project--2{right:-40vw;width:88vw;height:38vh}
  .site-intro__project--3{left:-22vw;bottom:-8vh;width:70vw;height:40vh}
  .site-intro__project--4{right:-25vw;bottom:-10vh;width:72vw;height:42vh}
  .site-intro__project--5{display:none}
}
@media (max-height:760px) and (min-width:621px){
  .site-intro__panel{padding-block:18px}
  .site-intro__brand{margin-bottom:14px}
  .site-intro__logo{width:200px}
  .site-intro__copy h2{font-size:clamp(42px,7.5vh,64px);margin-bottom:12px}
  .site-intro__enter{min-height:92px;margin-top:20px;padding-block:12px}
}
@media (prefers-reduced-motion:reduce){
  .site-intro__project{animation:none}
  .site-intro__project img{animation:none;transition:none}
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body{
  overflow-x:hidden;
  position:relative;
}

/* ===== Background circuit pattern ===== */
.bg-pattern{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:0.055;
}
.bg-pattern svg{width:100%;height:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ===== NAV ===== */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(8px);
  border-bottom:var(--stroke) solid var(--line);
}
.nav-inner{
  max-width:1400px;margin:0 auto;
  padding:18px 40px;
  display:flex;align-items:center;justify-content:space-between;
  position:relative;
}
.logo{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--ink);
  position:relative;
  padding:4px 0;
}
.logo-svg{
  height:22px;width:auto;display:block;color:var(--ink);
  transition:color .25s ease;
}
.logo:hover .logo-svg{color:var(--accent)}
.logo-node{
  width:8px;height:8px;border-radius:50%;
  border:var(--stroke) solid var(--line);
  background:var(--bg);
  flex-shrink:0;
  position:relative;
}
.logo-node::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:0;height:0;border-radius:50%;background:var(--accent);
  transition:width .25s ease, height .25s ease, box-shadow .25s ease;
}
.logo:hover .logo-node::after{
  width:4px;height:4px;box-shadow:0 0 6px var(--accent-glow);
}
.nav-links{
  display:flex;align-items:center;gap:0;
  position:relative;
}
.nav-links::before{
  content:"";position:absolute;left:0;right:0;top:50%;
  height:var(--stroke);background:var(--line);z-index:0;
}
.nav-link{
  position:relative;z-index:1;
  padding:10px 18px;
  background:var(--bg);
  font-size:14px;font-weight:500;
  border:var(--stroke) solid var(--line);
  margin-left:10px;
  transition:all .2s ease;
}
.nav-link:first-child{margin-left:0}
.nav-link:hover{background:var(--ink);color:var(--bg)}
.nav-link.active{background:var(--ink);color:var(--bg)}
.nav-cta{
  margin-left:10px;
  display:flex;align-items:center;gap:10px;
  padding:10px 16px 10px 14px;
  background:var(--accent);color:var(--ink);
  border:var(--stroke) solid var(--line);
  font-weight:600;font-size:14px;
  box-shadow:0 0 0 0 var(--accent-glow);
  animation:pulse-glow 2.4s ease-in-out infinite;
  position:relative;z-index:1;
}
@keyframes pulse-glow{
  0%,100%{box-shadow:0 0 0 0 var(--accent-glow)}
  50%{box-shadow:0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent)}
}

/* ===== HERO ===== */
.hero{
  position:relative;
  max-width:1400px;margin:0 auto;
  padding:120px 40px 80px;
  min-height:720px;
}
.hero-grid{
  display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center;
  position:relative;z-index:2;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--muted);
  padding:6px 14px;
  border:var(--stroke) solid var(--line);
  background:var(--bg);
  margin-bottom:28px;
}
.eyebrow .dot{
  width:8px;height:8px;border-radius:50%;background:var(--accent);
  animation:blink 1.2s ease-in-out infinite;
  box-shadow:0 0 8px var(--accent-glow);
}
@keyframes blink{50%{opacity:.25}}

/* ===== Pulse-path: stroom die langs een SVG-wire loopt =====
   Gebruikt op .wire-divider, .cta-side, .bg-pattern overlays.
   Een korte dash beweegt over een lange gap (dashoffset-animatie). */
.pulse-path{
  fill:none;
  stroke:var(--accent);
  stroke-width:2px;
  stroke-linecap:round;
  stroke-dasharray:30 9999;
  stroke-dashoffset:0;
  filter:drop-shadow(0 0 4px var(--accent-glow));
  animation:pulse-flow 5.5s linear infinite;
}
.pulse-path.fast{
  animation-duration:2.6s;
  stroke-width:2.5px;
}
@keyframes pulse-flow{
  0%   { stroke-dashoffset: 0;     opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { stroke-dashoffset: -2000; opacity: 0; }
}

/* ===== Wire-divider tussen secties — horizontale lijn met klein knooppunt ===== */
.wire-divider{
  position:relative;
  width:100%;height:60px;
  margin:0;
  pointer-events:none;
}
.wire-divider svg{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
}
.hero h1{
  font-size:clamp(42px, 6.2vw, 92px);
  line-height:0.95;letter-spacing:-0.03em;font-weight:700;
  margin-bottom:24px;
}
.hero h1 .accent{
  color:var(--accent);
  position:relative;display:inline-block;
}
.hero h1 .accent::after{
  content:"";position:absolute;left:0;right:0;bottom:8%;height:4px;
  background:var(--accent);opacity:.25;border-radius:2px;
}
.hero p.lead{
  font-size:19px;line-height:1.55;color:#333;max-width:540px;margin-bottom:40px;
}
.hero-ctas{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:14px 22px;
  border:var(--stroke) solid var(--line);
  font-weight:600;font-size:15px;
  background:var(--bg);
  transition:all .2s ease;
}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn.primary{background:var(--ink);color:var(--bg)}
.btn.primary:hover{background:var(--accent);color:var(--ink);border-color:var(--line)}
.btn .switch{
  width:34px;height:16px;position:relative;
  border:var(--stroke) solid currentColor;border-radius:20px;
}
.btn .switch::before{
  content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);
  width:10px;height:10px;border-radius:50%;background:currentColor;
  transition:left .25s ease;
}
.btn:hover .switch::before{left:20px}

/* ===== SWITCH-BUTTON (closes the circuit) ===== */
.push-btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:0;border:none;background:none;font-family:inherit;
  font-weight:600;font-size:13px;color:var(--ink);
  letter-spacing:0.08em;text-transform:uppercase;
  cursor:pointer;
  position:relative;
}
.push-btn-svg{
  width:108px;height:26px;display:block;color:var(--ink);
  flex-shrink:0;overflow:visible;
}
.push-btn-lever{
  transform-origin:16px 13px;
  transform:rotate(-32deg);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.push-btn-lamp{
  fill:var(--bg);
  transition:fill .25s ease, filter .25s ease;
}
.push-btn-lamp-rays{
  opacity:0;
  transform-origin:center;
  transition:opacity .25s ease .1s;
}
.push-btn:hover .push-btn-lever,
.push-btn.on .push-btn-lever,
.push-btn--demo .push-btn-lever{
  transform:rotate(0deg);
}
.push-btn:hover .push-btn-lamp,
.push-btn.on .push-btn-lamp,
.push-btn--demo .push-btn-lamp{
  fill:var(--accent);
  filter:drop-shadow(0 0 4px var(--accent-glow)) drop-shadow(0 0 10px var(--accent-glow));
}
.push-btn:hover .push-btn-lamp-rays,
.push-btn.on .push-btn-lamp-rays,
.push-btn--demo .push-btn-lamp-rays{opacity:1}
.push-btn-label{
  display:inline-flex;align-items:center;gap:10px;
  white-space:nowrap;
}
/* Diode-style arrow (right-pointing diode symbol) */
.diode-arrow{width:30px;height:12px;display:inline-block;color:currentColor;transition:transform .25s ease}
.push-btn:hover .diode-arrow,
a:hover .diode-arrow{transform:translateX(4px)}

/* Auto-demo animation — lever auto-closes every 4s */
@keyframes lever-auto{
  0%,55%,100%{transform:rotate(-32deg)}
  65%,85%{transform:rotate(0deg)}
}
@keyframes lamp-auto{
  0%,55%,100%{fill:var(--bg);filter:none}
  65%,85%{fill:var(--accent);filter:drop-shadow(0 0 4px var(--accent-glow)) drop-shadow(0 0 10px var(--accent-glow))}
}
@keyframes rays-auto{
  0%,55%,100%{opacity:0}
  65%,85%{opacity:1}
}
.push-btn--demo .push-btn-lever{animation:lever-auto 4.5s ease-in-out infinite}
.push-btn--demo .push-btn-lamp{animation:lamp-auto 4.5s ease-in-out infinite}
.push-btn--demo .push-btn-lamp-rays{animation:rays-auto 4.5s ease-in-out infinite}

/* Hero circuit visual */
.hero-visual{
  position:relative;aspect-ratio:1/1;max-width:520px;justify-self:end;
}
.hero-visual svg{width:100%;height:100%;display:block}
.circuit-label{
  position:absolute;font-family:var(--mono);font-size:11px;color:var(--muted);
  background:var(--bg);padding:2px 8px;border:1px solid var(--line);
  letter-spacing:0.08em;text-transform:uppercase;
}
.circuit-label.tl{top:4%;left:6%}
.circuit-label.tr{top:10%;right:2%}
.circuit-label.bl{bottom:8%;left:2%}
.circuit-label.br{bottom:14%;right:8%}

/* stats strip */
.hero-stats{
  margin-top:80px;
  display:grid;grid-template-columns:repeat(4,1fr);
  border:var(--stroke) solid var(--line);border-radius:var(--radius);
  background:var(--bg);
  overflow:hidden;
}
.stat{padding:24px 28px;border-right:var(--stroke) solid var(--line);position:relative}
.stat:last-child{border-right:none}
.stat .num{font-size:32px;font-weight:700;letter-spacing:-0.02em}
.stat .num .unit{color:var(--accent);font-size:22px}
.stat .lbl{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.stat .gauge{
  position:absolute;top:16px;right:16px;width:28px;height:28px;
  border:var(--stroke) solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;font-weight:600;
}

/* ===== SECTION HEADING ===== */
.section{
  max-width:1400px;margin:0 auto;
  padding:120px 40px;position:relative;
}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:40px;
  margin-bottom:60px;padding-bottom:24px;
  border-bottom:var(--stroke) solid var(--line);
  position:relative;
}
.section-head::after{
  content:"";position:absolute;bottom:-5px;left:0;
  width:10px;height:10px;background:var(--accent);border-radius:50%;
  box-shadow:0 0 12px var(--accent-glow);
}
.section-kicker{
  font-family:var(--mono);font-size:12px;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px;display:flex;align-items:center;gap:10px;
}
.section-kicker::before{
  content:"";width:24px;height:var(--stroke);background:var(--line);
}
.section-title{font-size:clamp(36px, 4.8vw, 64px);font-weight:700;letter-spacing:-0.02em;line-height:1}
.section-desc{max-width:380px;color:#333;font-size:16px;line-height:1.6}

/* ===== DIENSTEN ===== */
.services{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:var(--stroke) solid var(--line);border-radius:var(--radius);
  background:var(--bg);overflow:hidden;position:relative;
}
.service{
  position:relative;
  padding:36px 28px 32px;
  border-right:var(--stroke) solid var(--line);
  transition:background .3s ease;
  cursor:pointer;
}
.service:last-child{border-right:none}
.service:hover{background:#fafbff}
.service:hover .service-icon{color:var(--accent)}
.service:hover .service-icon circle,
.service:hover .service-icon rect,
.service:hover .service-icon path{filter:drop-shadow(0 0 6px var(--accent-glow))}
.service-no{
  font-family:var(--mono);font-size:11px;letter-spacing:0.12em;color:var(--muted);
  margin-bottom:24px;display:flex;justify-content:space-between;align-items:center;
}
.service-no .dot-empty{
  width:8px;height:8px;border-radius:50%;border:1.5px solid var(--line);
}
.service:hover .service-no .dot-empty{background:var(--accent);border-color:var(--accent)}
.service-icon{
  height:80px;margin:8px 0 28px;
  display:flex;align-items:center;color:var(--ink);
  transition:color .3s ease;
}
.service-icon svg{width:100%;height:100%;max-width:180px}
.service h3{font-size:22px;font-weight:600;letter-spacing:-0.01em;margin-bottom:10px}
.service p{font-size:14px;line-height:1.55;color:#555}
.service-tags{
  margin-top:20px;display:flex;flex-wrap:wrap;gap:6px;
}
.service-tag{
  font-family:var(--mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;
  padding:3px 8px;border:1px solid var(--line);border-radius:20px;color:#333;
}

/* ===== PORTFOLIO ===== */
.portfolio-bar{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:30px;gap:20px;flex-wrap:wrap;
}
.filters{display:flex;gap:10px;flex-wrap:wrap}
.filter{
  font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;
  padding:8px 16px;border:var(--stroke) solid var(--line);
  background:var(--bg);transition:all .2s ease;
}
.filter:hover{background:var(--ink);color:var(--bg)}
.filter.on{background:var(--ink);color:var(--bg)}

/* ===== FEATURED — 3 floating cards bovenin met foto + overlay ===== */

.featured-row{
  position:relative;
  display:grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items:center;
  gap:0;
  margin-top:32px;
}
.featured-wire{
  position:absolute;
  top:50%;
  left:20px;right:20px;
  height:var(--stroke);
  background:var(--line);
  transform:translateY(-50%);
  opacity:0.5;
  z-index:0;
}
.featured-card{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  border:var(--stroke) solid var(--line);
  background:var(--ink);
  z-index:1;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.featured-card:nth-child(2){transform:translateY(18px)}    /* middle card lower for "float" feel */
.featured-card:nth-child(4){transform:translateY(-12px)}   /* right card higher */
.featured-card:hover{
  transform:translateY(-10px);
  box-shadow:0 14px 0 -2px var(--line), 0 0 0 1px var(--accent);
}
.featured-card:nth-child(2):hover{transform:translateY(8px) scale(1.015)}
.featured-card:nth-child(4):hover{transform:translateY(-22px) scale(1.015)}

.featured-img{
  width:100%;height:100%;display:block;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.8,.2,1), filter .5s ease;
  filter:contrast(1.05);
}
.featured-card:hover .featured-img{
  transform:scale(1.05);
  filter:contrast(1.05);
}
.featured-overlay{
  position:absolute;left:0;right:0;bottom:0;
  padding:22px 22px 20px;
  color:#fff;
  background:linear-gradient(to top, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.75) 55%, rgba(10,10,10,0) 100%);
  pointer-events:none;
}
.featured-overlay h3{
  font-size:clamp(22px,1.9vw,28px);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.05;
  margin-bottom:6px;
}
.featured-overlay p{
  font-size:13px;
  line-height:1.4;
  color:rgba(255,255,255,0.78);
  margin-bottom:14px;
  max-width:360px;
}
.featured-btn{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:9px 16px;
  background:transparent;
  border:var(--stroke) solid #fff;
  color:#fff;
  font-family:inherit;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.14em;
  transition:all .25s ease;
}
.featured-btn:hover{
  background:var(--accent);
  color:var(--ink);
  border-color:var(--accent);
}
.featured-btn-contacts{
  display:inline-flex;
  align-items:center;
  gap:24px;          /* gap = where the mouse-switch lever visually drops in */
  position:relative;
}
.featured-btn-contacts::before{
  /* subtle horizontal wire between contacts, only visible on hover/on */
  content:"";position:absolute;top:50%;left:3px;right:3px;
  height:var(--stroke);background:currentColor;opacity:0;
  transform:translateY(-50%);
  transition:opacity .2s ease;
}
.featured-btn:hover .featured-btn-contacts::before,
.featured-btn.on .featured-btn-contacts::before{opacity:0.9}
.featured-btn-dot{
  width:6px;height:6px;border-radius:50%;background:currentColor;
  position:relative;z-index:1;
}

.featured-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  color:var(--ink);
  background:var(--bg);
  position:relative;z-index:2;
}
.featured-icon svg{
  width:72px;height:26px;display:block;color:currentColor;
  transition:color .3s ease, filter .3s ease;
}
.featured-row:hover .featured-icon svg{color:var(--accent);filter:drop-shadow(0 0 4px var(--accent-glow))}

/* ===== Variant labels (boven elke design-versie) ===== */
.variant{margin-top:48px}
.variant:first-of-type{margin-top:32px}
.variant-head{
  display:flex;align-items:center;gap:14px;
  margin-bottom:18px;
  padding-bottom:12px;
  border-bottom:var(--stroke) solid var(--line);
}
.variant-tag{
  font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  padding:4px 10px;background:var(--ink);color:var(--bg);
}
.variant-name{
  font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);
}

/* ===== VARIANT B — Polaroid prints ===== */
.polaroid-row{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:32px;
  padding:60px 0 30px;
}
.polaroid-wire{
  position:absolute;
  top:36px;
  left:8%;right:8%;
  height:0;
  border-top:1.5px dashed var(--line);
  opacity:0.55;
  z-index:0;
}
.polaroid{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
  transform-origin:top center;
}
.polaroid:nth-child(2){transform:rotate(-1.4deg) translateY(8px)}
.polaroid:nth-child(3){transform:rotate(0deg) translateY(-2px)}
.polaroid:nth-child(4){transform:rotate(1.6deg) translateY(12px)}
.polaroid:hover{transform:rotate(0deg) translateY(-8px) scale(1.02)}
.polaroid-pin{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  width:14px;height:14px;border-radius:50%;
  background:var(--accent);
  border:var(--stroke) solid var(--ink);
  box-shadow:0 2px 0 0 rgba(0,0,0,0.25);
  z-index:3;
}
.polaroid-frame{
  background:#fdfdfb;
  border:var(--stroke) solid var(--line);
  padding:14px 14px 18px;
  box-shadow:6px 6px 0 -1px var(--line);
  display:flex;flex-direction:column;
}
.polaroid-img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  background:var(--ink);
  filter:none;
  transition:filter .35s ease;
}
.polaroid:hover .polaroid-img{filter:none}
.polaroid-caption{
  padding:14px 4px 4px;
  display:flex;flex-direction:column;gap:8px;
}
.polaroid-stamp{
  font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--muted);
  border:var(--stroke) solid var(--line);
  padding:3px 8px;
  align-self:flex-start;
  transform:rotate(-1deg);
}
.polaroid-caption h3{
  font-size:clamp(18px,1.6vw,22px);font-weight:700;letter-spacing:-0.02em;line-height:1.1;
}
.polaroid-caption p{
  font-size:13px;line-height:1.5;color:#444;
}
.polaroid-btn{
  margin-top:6px;
  display:inline-flex;align-items:center;gap:10px;
  background:transparent;border:none;
  font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink);
  align-self:flex-start;
}
.polaroid-btn svg{width:48px;height:12px;display:block;color:currentColor}
.polaroid-btn-led{fill:var(--bg);transition:fill .25s ease, filter .25s ease}
.polaroid-btn:hover .polaroid-btn-led,
.polaroid-btn.on .polaroid-btn-led{
  fill:var(--accent);
  filter:drop-shadow(0 0 4px var(--accent-glow));
}

/* ===== VARIANT C — Component datasheet (IC chip) ===== */
.chip-row{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center;
  gap:0;
  margin-top:16px;
}
.chip{
  position:relative;
  background:#fafafa;
  border:var(--stroke) solid var(--line);
  padding:14px 16px 16px;
  display:flex;flex-direction:column;gap:12px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.chip:hover{transform:translateY(-4px);box-shadow:6px 6px 0 -1px var(--line)}
.chip-meta{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
}
.chip-code{
  background:var(--ink);color:var(--bg);
  padding:3px 8px;
}
.chip-cat{color:var(--muted)}
.chip-body{
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.chip-pins{
  display:flex;flex-direction:column;justify-content:space-around;
  position:absolute;top:0;bottom:0;
  height:100%;
}
.chip-pins--left{left:-12px}
.chip-pins--right{right:-12px}
.chip-pins span{
  display:block;
  width:12px;height:var(--stroke);
  background:var(--line);
}
.chip-photo{
  width:100%;
  aspect-ratio:1/1;
  border:1px solid var(--line);
  overflow:hidden;
  background:var(--ink);
  position:relative;
}
.chip-photo::after{
  /* subtle blueprint overlay */
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), color-mix(in srgb, var(--accent) 0%, transparent));
  pointer-events:none;
}
.chip-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:contrast(1.05);
  transition:filter .35s ease;
}
.chip:hover .chip-photo img{filter:contrast(1.05)}
.chip-foot{
  display:flex;flex-direction:column;gap:8px;
  padding-top:6px;border-top:var(--stroke) dashed var(--line);
}
.chip-foot h3{
  font-size:clamp(16px,1.4vw,20px);font-weight:600;letter-spacing:-0.01em;line-height:1.15;
}
.chip-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:0;background:transparent;border:none;
  font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink);
  align-self:flex-start;
}
.chip-btn svg{width:60px;height:14px;display:block;color:currentColor}
.chip-btn-led{fill:var(--bg);transition:fill .25s ease, filter .25s ease}
.chip-btn:hover .chip-btn-led,
.chip-btn.on .chip-btn-led{
  fill:var(--accent);
  filter:drop-shadow(0 0 4px var(--accent-glow));
}
/* PCB-trace tussen chips: dubbele parallelle lijntjes */
.chip-trace{
  align-self:stretch;
  display:flex;align-items:center;
  width:60px;
  color:var(--ink);
  opacity:0.7;
}
.chip-trace svg{width:100%;height:60px;display:block;color:currentColor}


/* ===== HERO + FEATURED COMBINED — 3 layout options ===== */

.hero-combo{
  max-width:1400px;
  margin:0 auto;
  padding:80px 40px;
  position:relative;
}
/* (border-top tussen opeenvolgende hero-combo's bewust verwijderd —
   secties lopen nu zonder zichtbare scheidslijn in elkaar over) */
.combo-head{
  display:flex;align-items:center;gap:14px;
  margin-bottom:32px;
  padding-bottom:14px;
  border-bottom:var(--stroke) solid var(--line);
}
.combo-head .variant-tag{
  font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  padding:5px 12px;background:var(--ink);color:var(--bg);
}
.combo-head .variant-name{
  font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);
}

/* ===== OPTION A — Poster trio met hero-banner ===== */
.hero-combo--a .ahero2{
  position:relative;
}
.ahero2-banner{
  position:relative;
  margin-bottom:32px;
  padding:32px 40px 28px;
  background:var(--bg);
  border:var(--stroke) solid var(--line);
  z-index:2;
}
.ahero2-banner-wire{
  position:absolute;
  bottom:-1px;
  left:8%;right:8%;
  height:var(--stroke);
  background:var(--line);
}
.ahero2-banner-wire::before{
  content:"";position:absolute;left:-6px;top:50%;
  width:8px;height:8px;border-radius:50%;background:var(--accent);
  transform:translateY(-50%);
  box-shadow:0 0 6px var(--accent-glow);
}
.ahero2-banner-text h1{
  font-size:clamp(36px,5vw,72px);
  line-height:0.95;letter-spacing:-0.03em;font-weight:700;
  margin-bottom:18px;
  max-width:900px;
}
.ahero2-banner-text h1 .accent{color:var(--accent);position:relative}
.ahero2-banner-text h1 .accent::after{
  content:"";position:absolute;left:0;right:0;bottom:8%;height:4px;
  background:var(--accent);opacity:.25;
}
.ahero2-banner-text .lead{font-size:16px;line-height:1.55;color:#333;max-width:680px;margin-bottom:24px}

.ahero2-posters{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:0;
  border:var(--stroke) solid var(--line);
  border-top:none;
  position:relative;
}
.ahero2-poster{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  border-right:var(--stroke) solid var(--line);
  background:var(--ink);
  transition:transform .4s ease;
}
.ahero2-poster:last-child{border-right:none}
.ahero2-poster:hover{transform:translateY(-4px)}
.ahero2-drop{
  /* vertical wire from banner edge down into the poster top */
  position:absolute;top:0;left:50%;
  width:var(--stroke);height:32px;
  background:var(--line);
  z-index:3;
  transform:translateX(-50%);
}
.ahero2-drop::after{
  content:"";position:absolute;bottom:0;left:50%;
  width:8px;height:8px;border-radius:50%;
  background:var(--bg);border:var(--stroke) solid var(--line);
  transform:translate(-50%, 50%);
  transition:background .25s ease, box-shadow .25s ease;
}
.ahero2-poster:hover .ahero2-drop::after{
  background:var(--accent);
  box-shadow:0 0 8px var(--accent-glow);
}
.ahero2-poster img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:none;
  transition:filter .5s ease, transform .8s ease;
}
.ahero2-poster:hover img{filter:none;transform:scale(1.04)}
.ahero2-poster-meta{
  position:absolute;top:0;left:0;right:0;
  padding:18px 20px;
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  color:#fff;
  z-index:2;
  pointer-events:none;
}
.ahero2-num{
  background:var(--accent);color:var(--ink);
  padding:3px 8px;
  font-weight:700;
}
.ahero2-cat{color:rgba(255,255,255,0.85)}
.ahero2-poster-overlay{
  position:absolute;left:0;right:0;bottom:0;
  padding:24px 22px 22px;
  color:#fff;
  background:linear-gradient(to top, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.55) 60%, rgba(10,10,10,0) 100%);
  z-index:2;
}
.ahero2-poster-overlay h3{
  font-size:clamp(20px,1.7vw,26px);font-weight:700;letter-spacing:-0.02em;line-height:1.05;margin-bottom:6px;
}
.ahero2-poster-overlay p{font-size:13px;line-height:1.4;color:rgba(255,255,255,0.78);margin-bottom:14px}

/* Generic LED-button used in A and C cards (legacy — nog gebruikt door ahero2-poster) */
.card-led-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:0;background:transparent;border:none;
  font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  color:inherit;
}
.card-led-btn svg{width:60px;height:14px;color:currentColor;display:block}
.card-led{fill:none;transition:fill .25s ease, filter .25s ease}
.card-led-btn:hover .card-led,
.card-led-btn.on .card-led,
.ahero2-poster:hover .card-led,
.chero2-card:hover .card-led,
.chero2-card:focus-visible .card-led,
.card-switch-btn:hover .card-led,
.card-switch-btn.on .card-led,
.bhero-mini:hover .card-led,
.bhero-mini:focus-visible .card-led,
.werk-tile:hover .card-led,
.werk-tile:focus-visible .card-led{
  fill:var(--accent);
  filter:drop-shadow(0 0 4px var(--accent-glow));
}

/* ===== card-switch-btn — full-width lijn + open schakeling rechts + label =====
   Visualisatie: ────────────────●  ●──◯  (lijn vanaf links, schakeling rechts)
   "See more" label rechts uitgelijnd onder de schakeling.
   LED is transparant met X-kruis bij off (matcht horizontale schematic-lijnen).
   Bij hover sluit de muiscursor de schakeling: LED wordt accent-blauw, X verdwijnt. */
.card-switch-btn{
  display:flex;flex-direction:column;
  align-items:stretch;          /* full breedte van card-info */
  gap:6px;
  padding:0;background:transparent;border:none;
  color:inherit;
  width:100%;
  margin-top:6px;
  text-decoration:none;
  /* cursor blijft over uit @media(pointer:fine) → button{cursor:none}, dus
     geen native pointer-handje bovenop onze custom switch-cursor */
}
.card-switch-track{
  display:flex;align-items:center;
  gap:0;
  width:100%;
  height:24px;
}
.card-switch-line{
  flex:1 1 auto;
  height:1.5px;
  background:currentColor;
}
.card-switch-svg{
  flex:0 0 auto;
  width:130px;height:24px;
  color:currentColor;display:block;
  overflow:visible;
}
.card-switch-lever{
  transform-origin:5px 12px;
  transform:rotate(-27deg);
  transition:transform .38s cubic-bezier(.2,.8,.2,1);
}
.chero2-card:hover .card-switch-lever,
.chero2-card:focus-visible .card-switch-lever,
.bhero-mini:hover .card-switch-lever,
.bhero-mini:focus-visible .card-switch-lever,
.werk-tile:hover .card-switch-lever,
.werk-tile:focus-visible .card-switch-lever,
.card-switch-btn:hover .card-switch-lever,
.card-switch-btn.on .card-switch-lever{
  transform:rotate(0deg);
}
.card-led-x{
  transition:opacity .25s ease;
}
.card-switch-btn:hover .card-led-x,
.card-switch-btn.on .card-led-x,
.chero2-card:hover .card-led-x,
.chero2-card:focus-visible .card-led-x,
.bhero-mini:hover .card-led-x,
.bhero-mini:focus-visible .card-led-x,
.werk-tile:hover .card-led-x,
.werk-tile:focus-visible .card-led-x{
  opacity:0;                    /* X verdwijnt zodra de LED brandt */
}
.card-switch-label{
  font-family:var(--mono);
  font-size:9.5px;letter-spacing:0.22em;text-transform:uppercase;font-weight:500;
  opacity:.55;
  align-self:flex-end;          /* "see more" rechts uitgelijnd */
  transition:opacity .25s ease, letter-spacing .25s ease;
}
.card-switch-btn:hover .card-switch-label,
.card-switch-btn.on .card-switch-label{
  opacity:.9;letter-spacing:0.26em;
}

/* ===== OPTION B — Cinematic feature (chero2-style overlay treatment) ===== */
.hero-combo--b .bhero{
  display:grid;
  grid-template-columns: 1.65fr 1fr;
  gap:24px;
  min-height:600px;
  perspective:1400px;
}
.bhero-feature{
  position:relative;
  overflow:hidden;
  border:var(--stroke) solid var(--line);
  background:var(--ink);
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  will-change:transform;
}
.bhero-feature:hover{
  box-shadow:10px 14px 0 -2px var(--line), 0 0 0 1px var(--accent);
}
.bhero-feature img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  filter:contrast(1.08) saturate(1.1) brightness(.82);
  transition:filter .5s ease, transform .8s ease;
  will-change:transform;
}
.bhero-feature:hover img{filter:contrast(1.08) saturate(1.1) brightness(.82)}
.bhero-feature-overlay{
  position:relative;z-index:2;
  padding:48px 56px 48px;
  display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;
  color:#fff;
  background:linear-gradient(to top, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.55) 55%, rgba(10,10,10,0.15) 100%);
}
.bhero-feature-overlay .eyebrow{
  background:transparent;border-color:rgba(255,255,255,0.4);color:rgba(255,255,255,0.85);
}
.bhero-feature-overlay h1{
  font-size:clamp(34px,4.5vw,68px);
  line-height:0.95;letter-spacing:-0.03em;font-weight:700;
  margin-bottom:20px;color:#fff;
}
.bhero-feature-overlay h1 .accent{color:var(--accent);position:relative;display:inline-block}
.bhero-feature-overlay h1 .accent::after{
  content:"";position:absolute;left:0;right:0;bottom:8%;height:4px;
  background:var(--accent);opacity:.25;
}
.bhero-feature-overlay .lead{
  font-size:16px;line-height:1.55;color:rgba(255,255,255,0.82);max-width:480px;margin-bottom:28px;
}
.bhero-feature-overlay .btn{
  background:transparent;color:#fff;border-color:#fff;
}
.bhero-feature-overlay .btn:hover{background:#fff;color:var(--ink)}
.bhero-feature-overlay .push-btn{color:#fff}
.bhero-feature-overlay .push-btn-svg{color:#fff}

/* LIVE-style tag matches chero2-live-tag */
.bhero-live-tag{
  position:absolute;top:18px;right:18px;z-index:4;
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;
  background:var(--ink);color:#fff;
  border:1px solid var(--accent);
  font-family:var(--mono);font-size:10px;letter-spacing:0.2em;font-weight:600;
  text-transform:uppercase;
  pointer-events:none;
}
.bhero-live-dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 6px var(--accent-glow);
  animation:blink 1.2s ease-in-out infinite;
}
.bhero-feature .bhero-live-tag{top:24px;left:24px;right:auto}

/* Side-stack of two mini cards — overlay-on-image style like chero2-card */
.bhero-side{
  display:flex;flex-direction:column;gap:24px;
}
.bhero-mini{
  position:relative;
  display:block;
  border:var(--stroke) solid var(--line);
  background:var(--ink);
  text-decoration:none;color:#fff;
  flex:1;min-height:0;
  overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  will-change:transform;
}
.bhero-mini:hover{
  box-shadow:10px 14px 0 -2px var(--line), 0 0 0 1px var(--accent);
}
.bhero-mini img,
.bhero-mini video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:contrast(1.08) saturate(1.1);
  transition:filter .5s ease, transform .8s ease;
  will-change:transform;
}
.bhero-mini:hover img,
.bhero-mini:hover video{filter:contrast(1.08) saturate(1.1)}
.bhero-mini-info{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:22px;
  display:flex;flex-direction:column;gap:6px;
  background:linear-gradient(to top, rgba(10,10,10,0.96) 0%, rgba(10,10,10,0.55) 70%, rgba(10,10,10,0) 100%);
  color:#fff;
}
.bhero-mini-cat{
  font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.78);
}
.bhero-mini-info h3{
  font-size:clamp(20px,1.7vw,26px);font-weight:700;letter-spacing:-0.02em;line-height:1.05;color:#fff;
}
.bhero-mini-info p{font-size:13px;line-height:1.4;color:rgba(255,255,255,0.78);margin-bottom:8px}
.bhero-mini-info .card-led-btn{color:#fff;align-self:flex-start;cursor:default}
.bhero-mini:hover .card-led-btn .card-led{
  fill:var(--accent);
  filter:drop-shadow(0 0 4px var(--accent-glow));
}

/* ===== OPTION C — Vaste rail (absolute) + scrollable LED-card combos ===== */
.hero-combo--c .chero2{
  position:relative;
  perspective:1400px;
  isolation:isolate;
}
.chero2-hero{
  position:relative;z-index:2;
  max-width:880px;
  margin:0 auto 36px;
  text-align:center;
}
.chero2-hero .eyebrow{margin-left:auto;margin-right:auto}
.chero2-hero h1{
  font-size:clamp(40px,5.5vw,80px);
  line-height:0.95;letter-spacing:-0.03em;font-weight:700;
  margin:0 auto 22px;
}
.chero2-hero h1 .accent{color:var(--accent);position:relative;display:inline-block}
.chero2-hero h1 .accent::after{
  content:"";position:absolute;left:0;right:0;bottom:8%;height:4px;
  background:var(--accent);opacity:.25;
}
.chero2-hero .lead{font-size:16px;line-height:1.55;color:#333;max-width:600px;margin:0 auto 28px}
.chero2-hero .hero-ctas{justify-content:center}

.chero2-carousel-area{
  position:relative;
}
/* === RAIL: absolute over the carousel area, fixed wire + diodes at chosen Y === */
.chero2-rail{
  position:absolute;
  top:30px;                     /* rail at TOP of carousel-area, above cards */
  left:0;right:0;
  display:flex;align-items:center;
  gap:12px;
  height:0;                     /* zero-height, content positioned by transform */
  z-index:3;pointer-events:none;
  transform:translateY(-50%);   /* center children vertically on top:30px */
}
.chero2-rail > *{pointer-events:auto}
.chero2-diode{
  position:absolute;
  top:30px;                     /* same Y as rail wire */
  width:72px;height:36px;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  background:var(--bg);
  border:none;
  cursor:pointer;
  color:var(--ink);
  transition:color .2s ease, transform .2s ease;
  transform:translateY(-50%);   /* center vertically on top:30px */
  z-index:8;                    /* ABOVE track (z:4) so clicks register */
  pointer-events:auto;
}
.chero2-diode--prev{left:0}
.chero2-diode--next{right:0}

/* Subtle prev/next labels below diodes — fade out when at scroll bound */
.chero2-diode::after{
  content:"";
  position:absolute;
  top:100%;left:50%;
  margin-top:8px;
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
  pointer-events:none;
  transition:opacity .25s ease, color .2s ease;
}
.chero2-diode--prev::after{content:"previous"}
.chero2-diode--next::after{content:"next"}
.chero2-diode--prev.at-start::after,
.chero2-diode--next.at-end::after{opacity:0}
.chero2-diode:hover::after{color:var(--accent)}


.chero2-diode:hover{color:var(--accent);transform:translateY(-50%) scale(1.06)}
.chero2-diode-icon{
  width:60px;height:33px;display:block;color:currentColor;
  transition:filter .2s ease, opacity .2s ease;
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
}
.chero2-diode{position:absolute;overflow:visible}
.chero2-diode-icon--battery,
.chero2-diode-icon--gnd{opacity:0;pointer-events:none}
.chero2-diode--prev.at-start .chero2-diode-icon--default{opacity:0}
.chero2-diode--prev.at-start .chero2-diode-icon--battery{opacity:1}
.chero2-diode--next.at-end .chero2-diode-icon--default{opacity:0}
.chero2-diode--next.at-end .chero2-diode-icon--gnd{opacity:1}
.chero2-diode.at-start,
.chero2-diode.at-end{cursor:default}
.chero2-diode.at-start:hover,
.chero2-diode.at-end:hover{transform:translateY(-50%)}
.chero2-diode:hover svg{filter:drop-shadow(0 0 5px var(--accent-glow))}
.chero2-diode:disabled{opacity:0.3;cursor:default;color:var(--muted)}
.chero2-rail-line{
  flex:1;
  position:relative;
  height:2px;
}
.chero2-rail-line::before{
  content:"";
  position:absolute;
  top:50%;left:0;right:0;
  height:var(--stroke);
  background:var(--line);
  transform:translateY(-50%);
}

/* === SCROLLABLE TRACK === */
.chero2-track{
  display:flex;
  gap:40px;                       /* was 32 — extra breathing room so 3D-tilted cards
                                     don't visually crowd their neighbours */
  overflow-x:auto;
  overflow-y:visible;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:0 20px 36px;            /* was 4 — buffer for close-side outward bulge
                                     of the first/last card when tilted at scroll edge */
  cursor:grab;
  position:relative;z-index:4;
}
.chero2-track::-webkit-scrollbar{display:none}
.chero2-track:active{cursor:grabbing}

/* SLOT has padding-top so LED+line fit INSIDE the slot box (no overflow clipping!) */
.chero2-slot{
  position:relative;
  flex:0 0 auto;
  width:calc((100% - 80px) / 3);  /* match new track gap (2 × 40px = 80) */
  min-width:280px;
  scroll-snap-align:center;
  padding-top:90px;             /* room for LED area ABOVE the card */
  z-index:1;
  will-change:transform;
}

/* Rail-LED: dezelfde 20px cirkel + fijn kruis als de LED in de RA/F1-kaarten. */
.chero2-led{
  position:absolute;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  width:20px;height:20px;
  box-sizing:border-box;
  border-radius:50%;
  border:1.5px solid currentColor;
  background:var(--bg);
  color:var(--line);
  padding:0;cursor:pointer;
  z-index:6;
  isolation:isolate;
  transition:background .25s ease, box-shadow .25s ease, color .25s ease, transform .2s ease;
}
.chero2-led::before,
.chero2-led::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:20px;
  height:1px;
  background:currentColor;
  pointer-events:none;
  transition:opacity .25s ease;
}
.chero2-led::before{transform:translate(-50%,-50%) rotate(45deg)}
.chero2-led::after{transform:translate(-50%,-50%) rotate(-45deg)}
/* Hover én actieve (chero2-live op de slot) → LED brandt vol blauw met glow.
   Voorheen draaide de active-state op .chero2-led.active, maar JS toggled
   .chero2-live op de slot — dus die selector vist hier nu op aan. */
.chero2-led:hover,
.chero2-slot.chero2-live > .chero2-led,
.chero2-led.active{
  background:var(--accent);
  color:var(--ink);
  box-shadow:0 0 6px var(--accent-glow), 0 0 14px var(--accent-glow);
}
.chero2-led:hover{transform:translateX(-50%) scale(1.08)}
.chero2-led:hover::before,
.chero2-led:hover::after,
.chero2-slot.chero2-live > .chero2-led::before,
.chero2-slot.chero2-live > .chero2-led::after,
.chero2-led.active::before,
.chero2-led.active::after{opacity:0}

/* Vertical line from LED bottom (slot.Y=40) to card top (slot.Y=90) */
.chero2-led-line{
  position:absolute;
  top:40px;
  left:50%;
  width:var(--stroke);
  height:50px;
  background:var(--line);
  opacity:0.4;
  transform:translateX(-50%);
  z-index:0;            /* BEHIND the card, in front of nothing else */
  pointer-events:none;
  transition:opacity .25s ease, background .25s ease, box-shadow .25s ease;
}
.chero2-slot:hover .chero2-led-line,
.chero2-slot.chero2-live .chero2-led-line{
  opacity:1;
  background:var(--accent);
  box-shadow:0 0 6px var(--accent-glow);
}

/* Drift now applied to CARD only — slot (with LED + line) stays static on the rail.
   Uses CSS `translate` (separate from `transform`) so it composes with JS-set 3D tilt. */
.chero2-track .chero2-slot:nth-of-type(3n+1) > .chero2-card{animation:chero2-drift-1 7s ease-in-out infinite}
.chero2-track .chero2-slot:nth-of-type(3n+2) > .chero2-card{animation:chero2-drift-2 8.5s ease-in-out infinite -2s}
.chero2-track .chero2-slot:nth-of-type(3n+3) > .chero2-card{animation:chero2-drift-3 9.5s ease-in-out infinite -4s}
@keyframes chero2-drift-1{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes chero2-drift-2{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes chero2-drift-3{0%,100%{translate:0 0}50%{translate:0 -5px}}
.chero2-slot:hover > .chero2-card{animation-play-state:paused}

/* Cards: BIG portrait photos */
.chero2-card{
  position:relative;
  z-index:2;            /* ABOVE the led-line so the line sits behind the image */
  display:block;
  overflow:hidden;
  border:var(--stroke) solid var(--line);
  background:var(--ink);
  text-decoration:none;color:#fff;
  aspect-ratio:4/5;
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  will-change:transform;
}
.chero2-card:hover{
  box-shadow:10px 14px 0 -2px var(--line), 0 0 0 1px var(--accent);
  z-index:2;
}
.chero2-card img,
.chero2-card video{
  width:100%;height:100%;
  object-fit:cover;display:block;
  filter:contrast(1.08) saturate(1.1);
  transition:filter .5s ease, transform .8s ease;
  will-change:transform;
}
.chero2-card:hover img,
.chero2-card:hover video,
.chero2-slot.chero2-live .chero2-card img,
.chero2-slot.chero2-live .chero2-card video{filter:contrast(1.08) saturate(1.1)}

/* Legacy chero2-live-tag — alleen nog voor de hardcoded bhero-feature in HTML (RA hero).
   Always visible (was opacity-toggled op .chero2-live). */
.chero2-live-tag,
.bhero-live-tag{
  position:absolute;top:18px;right:18px;z-index:4;
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;
  background:var(--ink);color:#fff;
  border:1px solid var(--accent);
  font-family:var(--mono);font-size:10px;letter-spacing:0.2em;font-weight:600;
}
.chero2-live-dot,
.bhero-live-dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 6px var(--accent-glow);
  animation:blink 1.2s ease-in-out infinite;
}

/* ===== chero2-credit / bhero-mini-credit — klant-credit op elke kaart =====
   Altijd zichtbaar (niet meer alleen op de actieve carousel-card).
   Pill sized to content (niet vol uitrekkend), tekst rechts uitgelijnd.
   Eerste regel: ● pulserende dot + eindklantnaam.
   Tweede regel (optioneel): dunne wire eronder + tussenpartij, in col-2 zodat
   de tekst exact onder de eindklant uitlijnt (niet in de smalle dot-kolom). */
.chero2-credit{
  position:absolute;top:14px;right:14px;z-index:4;
  display:flex;flex-direction:column;
  gap:4px;
  padding:8px 12px 9px;
  background:rgba(7,9,10,.52);
  color:#fff;
  border:1px solid rgba(255,255,255,.30);
  box-shadow:
    0 8px 24px rgba(0,0,0,.18),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  backdrop-filter:blur(12px) saturate(130%);
  width:max-content;                 /* pill groeit met content, niet 100% */
  max-width:calc(100% - 28px);       /* maar nooit breder dan kaart minus margin */
  pointer-events:none;
  text-align:right;
}
.bhero-mini .chero2-credit{top:12px;right:12px;padding:7px 10px 8px}
.chero2-credit-row{
  display:grid;
  grid-template-columns:7px 1fr;       /* dot-kolom + naam-kolom */
  column-gap:8px;
  align-items:center;
  min-height:14px;
}
.chero2-credit-row--via{
  margin-top:1px;                      /* alleen typografische hiërarchie */
}
.chero2-credit-dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 6px var(--accent-glow);
  animation:blink 1.2s ease-in-out infinite;
}
.chero2-credit-name{
  font-family:'Space Grotesk', sans-serif;
  font-size:12.5px;font-weight:600;letter-spacing:-0.005em;line-height:1.3;
  color:#fff;
  text-align:right;
  white-space:normal;                  /* sta wrapping toe binnen pill-breedte */
  overflow-wrap:break-word;
}
.chero2-credit-row--via .chero2-credit-name{
  grid-column:2;                       /* via-rij heeft geen dot — naam in kolom 2 zodat
                                          hij exact onder de eindklant-naam uitlijnt */
  font-weight:500;
  color:rgba(255,255,255,0.85);
  font-size:12px;
}
@media (max-width:980px){
  .chero2-credit{top:10px;right:10px;padding:6px 10px 7px;max-width:calc(100% - 20px)}
  .chero2-credit-name{font-size:11px}
  .chero2-credit-row--via .chero2-credit-name{font-size:10.5px}
}

.chero2-card-info{
  position:absolute;left:0;right:0;bottom:0;
  padding:22px;
  background:linear-gradient(to top, rgba(10,10,10,0.96) 0%, rgba(10,10,10,0.55) 70%, rgba(10,10,10,0) 100%);
  display:flex;flex-direction:column;gap:6px;
  color:#fff;z-index:2;
}
.chero2-cat{
  font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.78);
}
.chero2-card-info h3{
  font-size:clamp(20px,1.7vw,28px);font-weight:700;letter-spacing:-0.02em;line-height:1.05;
}
.chero2-card-info p{font-size:13px;line-height:1.4;color:rgba(255,255,255,0.78);margin-bottom:10px}
.chero2-card-info .card-led-btn{color:#fff;align-self:flex-start}
.chero2-card-info .card-led-btn:hover .card-led,
.chero2-card-info .card-led-btn.on .card-led{
  fill:var(--accent);
  filter:drop-shadow(0 0 4px var(--accent-glow));
}

/* Hide the original separate hero (replaced by combos) */
.hero{display:none}

/* ============================================================
   WERK PAGE — overzichtspagina alle projecten
   - Hero-intro hergebruikt .hero-combo--b is-landing styling
   - Filter-balk (categorieën) in schematic-LED look
   - Bento-grid met afwisselende tile-formaten (s/wide/tall/large)
   - Tiles erven de .bhero-mini overlay-styling van de homepage
   - Lazy-load via IntersectionObserver + handmatige Load more
   ============================================================ */

/* ----- Werk hero — compact intro variant ----- */
.werk-hero{padding-top:60px;padding-bottom:48px}
.werk-hero .bhero{
  display:block;
  min-height:auto;
}
.werk-hero .bhero-feature{
  min-height:340px;
  display:block;
  position:relative;
}
.werk-hero .bhero-feature-overlay{
  padding:56px 64px 56px;
  background:linear-gradient(110deg, rgba(10,10,10,0.94) 0%, rgba(10,10,10,0.72) 55%, rgba(10,10,10,0.35) 100%);
}
.werk-hero .bhero-feature-overlay h1{
  font-size:clamp(36px,4.6vw,64px);
  margin-bottom:18px;
  max-width:780px;
}
.werk-hero .bhero-feature-overlay .lead{
  max-width:560px;
  margin-bottom:0;
}
/* ----- Werk filter — schematic LED-chip rail ----- */
.werk-filter-section{
  max-width:1400px;margin:0 auto;
  padding:8px 40px 24px;
  position:relative;
}
.werk-filter-rail{
  position:relative;
  display:flex;align-items:center;
  gap:14px;
  padding:18px 0;
  flex-wrap:wrap;
}
.werk-filter-chips{
  display:flex;align-items:center;gap:8px;
  flex-wrap:wrap;
  position:relative;z-index:1;
}
.werk-chip{
  position:relative;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px 9px 14px;
  background:var(--bg);
  border:var(--stroke) solid var(--line);
  font-family:var(--mono);
  font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  font-weight:500;
  color:var(--ink);
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
  white-space:nowrap;
}
.werk-chip-led{
  width:8px;height:8px;border-radius:50%;
  border:var(--stroke) solid var(--line);
  background:var(--bg);
  flex-shrink:0;
  transition:background .2s ease, box-shadow .2s ease;
}
.werk-chip:hover{background:#f3f3f3}
.werk-chip.active{background:var(--ink);color:#fff}
.werk-chip.active .werk-chip-led{
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:0 0 8px var(--accent-glow);
}
/* ----- Werk grid (bento) ----- */
.werk-grid-section{
  max-width:1400px;margin:0 auto;
  padding:8px 40px 80px;
  position:relative;
}
.werk-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:160px;
  grid-auto-flow:dense;
  gap:24px;
}
/* Default = small (4 col x 2 rows) — comfortable square-ish tile */
.werk-tile{
  position:relative;
  grid-column:span 4;
  grid-row:span 2;
  border:var(--stroke) solid var(--line);
  background:var(--ink);
  overflow:hidden;
  display:block;
  text-decoration:none;color:#fff;
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, opacity .5s ease;
  will-change:transform;
  opacity:0;
}
.werk-tile.in{opacity:1}
.werk-tile:hover{
  box-shadow:10px 14px 0 -2px var(--line), 0 0 0 1px var(--accent);
}
.werk-tile[data-size="wide"]   {grid-column:span 8; grid-row:span 2}
.werk-tile[data-size="tall"]   {grid-column:span 4; grid-row:span 3}
.werk-tile[data-size="large"]  {grid-column:span 8; grid-row:span 3}
.werk-tile[data-size="hwide"]  {grid-column:span 6; grid-row:span 2}

.werk-tile img,
.werk-tile video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:contrast(1.08) saturate(1.1);
  transition:filter .5s ease, transform .8s ease;
  will-change:transform;
}
.werk-tile:hover img,
.werk-tile:hover video{filter:contrast(1.08) saturate(1.1)}

.werk-tile-info{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:22px;
  display:flex;flex-direction:column;gap:6px;
  background:linear-gradient(to top, rgba(10,10,10,0.96) 0%, rgba(10,10,10,0.55) 70%, rgba(10,10,10,0) 100%);
  color:#fff;
}
.werk-tile-cat{
  font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.78);
}
.werk-tile-info h3{
  font-size:clamp(18px,1.6vw,26px);font-weight:700;letter-spacing:-0.02em;line-height:1.05;color:#fff;
}
.werk-tile-info p{
  font-size:13px;line-height:1.4;color:rgba(255,255,255,0.78);margin-bottom:8px;
}
/* Compact info on small tiles, full on large/wide */
.werk-tile[data-size="small"] .werk-tile-info p{display:none}
.werk-tile-info .card-switch-btn{color:#fff}
.werk-tile-info .card-switch-btn:hover .card-led,
.werk-tile-info .card-switch-btn.on .card-led{
  fill:var(--accent);
  filter:drop-shadow(0 0 4px var(--accent-glow));
}

/* Empty state */
.werk-empty{
  grid-column:span 12;
  text-align:center;
  padding:80px 20px;
  font-family:var(--mono);
  font-size:12px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--muted);
}

/* ----- Load more ----- */
.werk-loadmore-wrap{
  margin-top:40px;
  display:flex;justify-content:center;
  position:relative;
}
.werk-loadmore-wrap::before{
  content:"";position:absolute;left:0;right:0;top:50%;
  height:var(--stroke);background:var(--line);opacity:.18;
}
.werk-loadmore{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:14px;
  padding:14px 22px 14px 18px;
  background:var(--bg);
  border:var(--stroke) solid var(--line);
  font-family:var(--mono);
  font-size:11px;letter-spacing:0.2em;text-transform:uppercase;
  font-weight:600;
  color:var(--ink);
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.werk-loadmore:hover{background:var(--ink);color:#fff}
.werk-loadmore:hover .werk-loadmore-led{
  background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 8px var(--accent-glow);
}
.werk-loadmore-led{
  width:9px;height:9px;border-radius:50%;
  border:var(--stroke) solid currentColor;
  background:var(--bg);
  transition:background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.werk-loadmore[disabled]{opacity:.35;cursor:not-allowed}
.werk-loadmore-count{opacity:.55;font-weight:500}

/* Sentinel (auto-load trigger) */
.werk-sentinel{
  height:1px;width:100%;
  margin-top:-200px;        /* trigger before user reaches the bottom */
  pointer-events:none;
}

/* ----- Responsive ----- */
@media (max-width:1100px){
  .werk-grid{grid-template-columns:repeat(8,1fr);grid-auto-rows:150px}
  .werk-tile             {grid-column:span 4; grid-row:span 2}
  .werk-tile[data-size="wide"]  {grid-column:span 8; grid-row:span 2}
  .werk-tile[data-size="tall"]  {grid-column:span 4; grid-row:span 3}
  .werk-tile[data-size="large"] {grid-column:span 8; grid-row:span 3}
  .werk-tile[data-size="hwide"] {grid-column:span 4; grid-row:span 2}
}

/* Compact responsive */
@media (max-width:980px){
  .hero-combo{padding:60px 28px}
  .ahero2-banner{padding:24px 20px}
  .ahero2-posters{grid-template-columns:1fr;gap:0}
  .ahero2-poster{aspect-ratio:4/3;border-right:none;border-bottom:var(--stroke) solid var(--line)}
  .ahero2-poster:last-child{border-bottom:none}
  .hero-combo--b .bhero{grid-template-columns:1fr;min-height:auto}
  .bhero-feature{min-height:480px}
  .bhero-feature-overlay{padding:32px 24px}
  .bhero-side{flex-direction:row}
  .bhero-mini{flex:1;aspect-ratio:4/3}
  .bhero-mini-info{padding:18px}
  .bhero-feature .bhero-live-tag{top:18px;left:18px}
  .chero2-track{gap:24px;padding:20px 16px 20px}
  .chero2-slot{width:min(70vw, 320px)}
  .chero2-rail{gap:10px;margin-bottom:24px}
  .chero2-led{width:20px;height:20px}
  .chero2-led::before,.chero2-led::after{width:20px}
  .chero2-diode{width:48px}
  .chero2-diode-icon{width:48px;height:26px}
  .hero-combo--c .chero{padding:30px 24px}
  .chero-titleblock{grid-template-columns:1fr;gap:24px}
  .chero-components{flex-direction:column}
  .chero-trace{display:none}

  /* Werk page mobile */
  .werk-hero .bhero-feature{min-height:380px}
  .werk-hero .bhero-feature-overlay{padding:36px 24px}
  .werk-filter-section{padding:8px 24px 18px}
  .werk-filter-rail{gap:10px;padding:14px 0}
  .werk-grid-section{padding:8px 24px 60px}
  .werk-grid{
    grid-template-columns:repeat(2,1fr);
    grid-auto-rows:140px;
    gap:14px;
  }
  .werk-tile,
  .werk-tile[data-size="wide"],
  .werk-tile[data-size="tall"],
  .werk-tile[data-size="large"],
  .werk-tile[data-size="hwide"]{grid-column:span 2;grid-row:span 2}
  .werk-tile[data-size="tall"],
  .werk-tile[data-size="large"]{grid-row:span 3}
  .werk-tile-info{padding:16px}
  .werk-tile[data-size="small"] .werk-tile-info p{display:block}
  .werk-empty{grid-column:span 2}
}

/* ===== CAROUSEL — 6 projecten, scrollable, met schematic navigatiebalk ===== */

.carousel-section{
  margin-top:100px;
  position:relative;
}
.carousel-track{
  display:flex;
  gap:28px;
  overflow-x:auto;
  overflow-y:visible;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:12px 8px 20px;
  margin:0 -8px;
}
.carousel-track::-webkit-scrollbar{display:none}
/* COVERFLOW: middelste kaart staat groot voorop, omliggende kaarten kleiner erachter */
.carousel-track{padding:60px 8px 40px;align-items:center}
.carousel-card{
  flex:0 0 auto;
  width:min(380px, 72vw);
  scroll-snap-align:center;
  display:flex;flex-direction:column;
  min-width:0;
  cursor:pointer;
  transform:scale(0.66);
  opacity:0.5;
  filter:blur(0.4px);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s ease, filter .45s ease, box-shadow .35s ease;
  transform-origin:center center;
  position:relative;
  z-index:1;
}
.carousel-card.adjacent{
  transform:scale(0.78);
  opacity:0.72;
  filter:blur(0px);
}
.carousel-card.active{
  transform:scale(1);
  opacity:1;
  filter:none;
  z-index:5;
}
.carousel-card.active:hover{transform:scale(1.02)}

.carousel-img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
  border:var(--stroke) solid var(--line);
  background:var(--ink);
  filter:none;
  transition:filter .3s ease;
}
.carousel-card.active .carousel-img,
.carousel-card:hover .carousel-img{filter:none}
.carousel-card.active{box-shadow:0 12px 0 -2px var(--line)}

.carousel-info{
  margin-top:14px;
  display:flex;flex-direction:column;gap:4px;
}
.carousel-cat{
  font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);
}
.carousel-info h4{
  font-size:18px;font-weight:600;letter-spacing:-0.01em;line-height:1.2;
}

/* "Open case" LED-knop binnen elke carousel-kaart */
.card-open{
  margin-top:14px;
  display:inline-flex;align-items:center;gap:12px;
  padding:0;background:transparent;border:none;
  font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink);
  align-self:flex-start;
}
.card-open-svg{width:56px;height:14px;display:block;color:currentColor;flex-shrink:0}
.card-open-led{fill:var(--bg);transition:fill .25s ease, filter .25s ease}
.card-open:hover .card-open-led,
.card-open.on .card-open-led,
.carousel-card.active .card-open-led{
  fill:var(--accent);
  filter:drop-shadow(0 0 4px var(--accent-glow));
}

/* Schematic pagination bar — diode | 6 contact-node buttons | diode */
.schematic-bar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  margin-top:40px;
  padding:22px 0 10px;
}
.sch-wire-bg{
  position:absolute;
  top:50%;
  left:20px;right:20px;
  height:var(--stroke);
  background:var(--line);
  transform:translateY(-50%);
  z-index:0;
}
.sch-diode{
  border:none;background:var(--bg);
  padding:8px 6px;
  cursor:pointer;
  color:var(--ink);
  transition:color .2s ease;
  position:relative;z-index:1;
  display:flex;align-items:center;
}
.sch-diode:hover{color:var(--accent)}
.sch-diode svg{width:40px;height:16px;display:block;color:currentColor;transition:filter .2s ease}
.sch-diode:hover svg{filter:drop-shadow(0 0 5px var(--accent-glow))}

.sch-nodes{
  display:flex;
  align-items:center;
  gap:0;
  position:relative;z-index:1;
}

/* Switch-node — just two contact dots + a lamp, NO lever.
   The mouse cursor IS the lever that bridges the contacts on hover. */
.sch-node{
  border:none;background:var(--bg);
  padding:6px 2px;
  cursor:pointer;
  color:var(--ink);
  position:relative;z-index:1;
  display:flex;align-items:center;
}
.sch-node-svg{
  width:96px;height:24px;display:block;color:currentColor;overflow:visible;
}
.sch-node-lamp{fill:var(--bg);transition:fill .22s ease, filter .22s ease}
.sch-node-rays{opacity:0;transition:opacity .22s ease .05s}
.sch-node:hover .sch-node-lamp,
.sch-node.active .sch-node-lamp{
  fill:var(--accent);
  filter:drop-shadow(0 0 4px var(--accent-glow)) drop-shadow(0 0 10px var(--accent-glow));
}
.sch-node:hover .sch-node-rays,
.sch-node.active .sch-node-rays{opacity:1}

/* keep old diode-arrow util if referenced */
.diode-arrow{width:30px;height:12px;display:inline-block;color:currentColor;transition:transform .25s ease}


/* Smooth parallax image transitions during tilt */
.chero2-card img,
.chero2-card video{transition:transform .35s cubic-bezier(.2,.8,.2,1), filter .5s ease;will-change:transform}
.chero2-card{transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease}

/* ===== CTA BANNER ===== */
.cta-banner{
  max-width:1400px;margin:80px auto;padding:0 40px;
}
.cta-inner{
  position:relative;
  border:var(--stroke) solid var(--line);
  background:var(--ink);color:var(--bg);
  padding:64px 56px;
  display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;
  overflow:hidden;
}
.cta-inner h2{font-size:clamp(32px,4vw,52px);line-height:1;letter-spacing:-0.02em;font-weight:700}
.cta-inner h2 span{color:var(--accent)}
.cta-inner .btn{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.cta-inner .btn:hover{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.cta-side{position:relative;height:140px}
.cta-side svg{position:absolute;inset:0;width:100%;height:100%;opacity:.9}

/* ===== FOOTER ===== */
footer{
  border-top:var(--stroke) solid var(--line);
  background:var(--bg);
  margin-top:60px;
}
.foot{
  max-width:1400px;margin:0 auto;padding:60px 40px 30px;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;
}
.foot h5{
  font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);
  margin-bottom:16px;
}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot a{font-size:14px}
.foot a:hover{color:var(--accent)}
.foot .brand{display:flex;flex-direction:column;gap:8px}
.foot .brand p{font-size:14px;color:#444;line-height:1.6;margin-top:12px;max-width:340px}
.foot-bottom{
  max-width:1400px;margin:0 auto;padding:20px 40px;
  border-top:var(--stroke) solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:0.1em;color:var(--muted);text-transform:uppercase;
}
.foot-bottom .ground{display:flex;align-items:center;gap:10px}
.foot-bottom .ground svg{width:18px;height:18px}

@media (max-width:980px){
  .cta-inner{grid-template-columns:1fr;padding:40px 28px}
  .foot{grid-template-columns:1fr 1fr;gap:24px}
}
@media (max-width:640px){
  .foot{grid-template-columns:1fr}
}

/* ===== CUSTOM SWITCH-CURSOR — the mouse is a schematic switch ===== */
@media (pointer: fine){
  body.custom-cursor-ready,
  body.custom-cursor-ready a,
  body.custom-cursor-ready button,
  body.custom-cursor-ready select,
  body.custom-cursor-ready .feat-thumb,
  body.custom-cursor-ready .sch-btn,
  body.custom-cursor-ready .sch-diode,
  body.custom-cursor-ready .push-btn{cursor:none}
  body.custom-cursor-ready input,
  body.custom-cursor-ready textarea{cursor:text}
}

.cursor{
  position:fixed;
  top:0;left:0;
  width:64px;height:24px;
  pointer-events:none;
  z-index:99999;
  color:#ffffff;
  mix-blend-mode:difference;
  will-change:transform;
  opacity:0;
  transition:opacity .2s ease;
}
.cursor.cursor--ready{opacity:1}
.cursor svg{width:100%;height:100%;display:block;overflow:visible}

/* Default state: cursor-lever staat OPEN, alleen dicht boven klikbare elementen */
.cursor-lever{
  transform-origin:14px 12px;
  transform:rotate(-28deg);
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.cursor.cursor--hover .cursor-lever,
.cursor.cursor--down .cursor-lever{transform:rotate(0deg)}
.cursor.cursor--down{filter:drop-shadow(0 0 5px var(--accent-glow))}


/* ============================================================
   3 NAV-HEADER CONCEPTEN — voor side-by-side vergelijking
   Wanneer je een concept kiest: behoud alleen die <header>,
   verwijder de wrapper .nav-concepts en de andere twee.
   ============================================================ */

.nav-concepts{
  position:relative;
  border-bottom:var(--stroke) solid var(--line);
  background:var(--bg);
}
.nav-concept{
  position:relative;
  padding:18px 40px 28px;
  border-bottom:1px dashed #d6d6d6;
}
.nav-concept:last-child{border-bottom:none}
.concept-tag{
  display:inline-block;
  font-family:var(--mono);
  font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--muted);
  padding:4px 10px;
  border:1px solid var(--line);
  background:var(--bg);
  margin-bottom:14px;
}

/* Override: wanneer NAV in een concept-wrapper zit, niet sticky maken */
.nav-concept .nav{
  position:relative;
  top:auto;
  border-bottom:var(--stroke) solid var(--line);
}
.nav-concept .nav-inner{
  padding:14px 24px;
  max-width:none;
}


/* ============================================================
   NAV CONCEPT A — "Live Wire"
   Eén ranke balk: logo links, links centraal, CTA rechts.
   Hairline-rail eronder met pulserende stroom — schakelschema-thema
   subtiel verwerkt zonder dat het visueel druk wordt.
   ============================================================ */
.nav-a{
  position:relative;
  background:var(--bg);
  border-bottom:none;
}
.nav-a-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;
  padding:18px 28px 22px;
  max-width:none;
}
.nav-a-logo{
  display:inline-flex;align-items:center;
  color:var(--ink);text-decoration:none;
}
.nav-a-logo svg{height:30px;width:auto;display:block;color:currentColor}
.nav-a-links{
  display:flex;align-items:center;gap:6px;
}
.nav-a-link{
  position:relative;
  font-family:var(--mono);
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  font-weight:500;
  padding:8px 14px;
  color:var(--ink);text-decoration:none;
  transition:color .2s ease, background .2s ease;
}
.nav-a-link:hover{background:#f3f3f3}
.nav-a-link--active{
  color:var(--accent);
}
.nav-a-link--active::after{
  content:"";position:absolute;left:50%;bottom:0;
  width:5px;height:5px;border-radius:50%;
  background:var(--accent);transform:translate(-50%,50%);
  box-shadow:0 0 8px var(--accent-glow);
}
.nav-a-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 18px 9px 14px;
  background:var(--ink);color:var(--bg);
  font-family:var(--mono);font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;font-weight:500;text-decoration:none;
  transition:transform .2s ease;
}
.nav-a-cta:hover{transform:translateX(2px)}

/* Temporary nav tools: replayable entrance + site-wide accent lab */
.accent-control{
  position:relative;
  display:flex;
  align-items:center;
}
.accent-control__toggle{
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:0;
  background:transparent;
  cursor:pointer;
}
.accent-control.is-open .accent-control__toggle{background:#f3f3f3}
.accent-control__swatch{
  width:12px;
  height:12px;
  flex:0 0 auto;
  border:1px solid var(--ink);
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent-glow);
}
html[data-accent-mode="spectrum"] .accent-control__swatch,
html[data-accent-mode="mixed"] .accent-control__swatch{
  background:conic-gradient(#ff375f,#ff9f0a,#ffd60a,#30d158,#64d2ff,#0a84ff,#bf5af2,#ff375f);
}
.accent-control__panel{
  position:absolute;
  top:calc(100% + 14px);
  right:0;
  z-index:50;
  width:320px;
  padding:18px;
  border:1.5px solid var(--ink);
  background:rgba(255,255,255,.96);
  box-shadow:8px 8px 0 var(--ink);
  backdrop-filter:blur(14px);
  color:var(--ink);
}
.accent-control__heading{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.accent-control__heading strong{
  font-family:var(--sans);
  font-size:18px;
  letter-spacing:-.02em;
}
.accent-control__heading span,
.accent-control__hint{
  font-family:var(--mono);
  font-size:9px;
  line-height:1.45;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.accent-control__modes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
  margin:16px 0;
}
.accent-control__modes button{
  min-height:34px;
  padding:7px 5px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:9px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.accent-control__modes button:hover{border-color:var(--ink)}
.accent-control__modes button.is-active{
  border-color:var(--ink);
  background:var(--ink);
  color:var(--bg);
}
.accent-control__colour-row{
  display:grid;
  grid-template-columns:1fr 40px 68px;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.accent-control__picker{
  width:40px;
  height:32px;
  padding:2px;
  border:1px solid var(--line);
  background:var(--bg);
  cursor:pointer;
}
.accent-control__value{
  font-variant-numeric:tabular-nums;
  text-align:right;
}
.accent-control__hint{margin-top:11px}

.nav-a-cta-led{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 8px var(--accent-glow);
  animation:blink 1.4s ease-in-out infinite;
}
.nav-a-wire{
  position:relative;height:1.5px;
  background:linear-gradient(to right,
    transparent 0%, var(--ink) 8%, var(--ink) 92%, transparent 100%);
  overflow:hidden;
}
.nav-a-wire::before{
  content:"";position:absolute;top:-1px;left:-20%;
  width:120px;height:3.5px;
  background:linear-gradient(to right, transparent, var(--accent), transparent);
  filter:drop-shadow(0 0 4px var(--accent-glow));
  animation:nav-a-pulse 4.5s linear infinite;
}
@keyframes nav-a-pulse{
  0%{left:-20%}
  100%{left:120%}
}

/* ===== all-projects-link — subtiele tekstlink onder de carousel naar /work/ =====
   Mono uppercase, dunne onderstreping in plaats van button. Op hover schuift de
   pijl iets naar rechts en kleurt de tekst accent-blauw. */
.all-projects-link{
  display:flex;justify-content:center;
  padding:36px 28px 56px;
}
.btn-subtle{
  display:inline-flex;align-items:center;gap:12px;
  padding:8px 0 9px;
  font-family:var(--mono);
  font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  font-weight:500;
  color:var(--ink);text-decoration:none;
  border-bottom:1px solid currentColor;
  transition:color .25s ease, gap .25s ease, border-color .25s ease;
}
.btn-subtle:hover{color:var(--accent);gap:18px;border-bottom-color:var(--accent)}
.btn-subtle-arrow{
  display:inline-block;
  width:18px;height:1px;background:currentColor;
  position:relative;
  transition:width .25s ease;
}
.btn-subtle-arrow::after{
  content:"";position:absolute;right:-1px;top:50%;
  width:6px;height:6px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}
.btn-subtle:hover .btn-subtle-arrow{width:24px}

/* ============================================================
   STUDIO / SERVICES / CONTACT — content pages
   ============================================================ */

/* Shared hero for studio + contact + services (light, calm) */
.studio-hero,
.contact-hero{
  max-width:1400px;margin:0 auto;
  padding:120px 40px 60px;
  position:relative;
}
.studio-hero-inner,
.contact-hero-inner{
  max-width:880px;
}
.studio-hero h1,
.contact-hero h1{
  font-size:clamp(40px, 6vw, 76px);
  line-height:1.04;
  letter-spacing:-0.02em;
  font-weight:600;
  margin-top:24px;
}
.studio-hero h1 .accent,
.contact-hero h1 .accent{color:var(--accent)}
.studio-hero .lead,
.contact-hero .lead{
  margin-top:28px;
  font-size:clamp(18px, 1.4vw, 22px);
  line-height:1.5;
  max-width:680px;
  color:var(--ink);
  opacity:.85;
}

/* Body sections — alternating bg for rhythm */
.studio-section,
.service-section{
  padding:80px 40px;
}
.studio-section--alt,
.service-section--alt{
  background:var(--card);
  border-top:1px solid var(--grid);
  border-bottom:1px solid var(--grid);
}
.studio-section-inner,
.service-inner{
  max-width:1080px;margin:0 auto;
}
.studio-section h2,
.service-section h2{
  font-size:clamp(28px, 3vw, 44px);
  line-height:1.12;
  letter-spacing:-0.015em;
  font-weight:600;
  margin-top:18px;
}
.studio-section h2 .accent,
.service-section h2 .accent{color:var(--accent)}
.studio-section p,
.service-section p{
  font-size:17px;line-height:1.65;
  margin-top:20px;
  max-width:760px;
  color:var(--ink);
  opacity:.82;
}
.studio-section p strong,
.service-section p strong{
  color:var(--ink);opacity:1;font-weight:600;
}
.studio-section p a,
.service-section p a{
  color:var(--ink);
  border-bottom:1px solid var(--ink);
  transition:color .2s ease, border-color .2s ease;
}
.studio-section p a:hover,
.service-section p a:hover{
  color:var(--accent);border-bottom-color:var(--accent);
}

/* Studio capabilities grid */
.studio-caps{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:32px;
  margin-top:36px;
}
.studio-caps li{
  border-top:2px solid var(--ink);
  padding-top:18px;
}
.studio-caps h3{
  font-size:18px;font-weight:600;
  letter-spacing:-0.01em;
  margin-bottom:10px;
}
.studio-caps p{
  font-size:15px;line-height:1.55;opacity:.78;
  margin-top:0;
}

/* Service-section lead paragraph (just under h2) */
.service-section .lead{
  font-size:clamp(18px, 1.4vw, 22px);
  line-height:1.5;
  margin-top:18px;
  max-width:760px;
  opacity:.9;
}

/* Service section H2 layout — eyebrow + h2 stacked */
.service-section .eyebrow,
.studio-section .eyebrow,
.studio-hero .eyebrow,
.contact-hero .eyebrow,
.services-index .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);
  font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ink);opacity:.7;
}
.service-section .btn-subtle{
  margin-top:28px;
}

/* Services index — anchor list at top */
.services-index{
  max-width:1080px;margin:0 auto;
  padding:24px 40px 8px;
}
.services-index ul{
  list-style:none;
  display:flex;flex-wrap:wrap;gap:8px 12px;
  border-top:1px solid var(--grid);
  border-bottom:1px solid var(--grid);
  padding:18px 0;
}
.services-index li a{
  font-family:var(--mono);
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  font-weight:500;
  padding:6px 12px;
  border:1px solid var(--grid);
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.services-index li a:hover{
  border-color:var(--ink);
  color:var(--accent);
  background:var(--card);
}

/* Contact block — 2x2 cards */
.contact-block{
  max-width:1080px;margin:0 auto;
  padding:40px 40px 80px;
}
.contact-block-inner{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:0;
}
.contact-card{
  padding:36px 32px;
  border-top:1px solid var(--grid);
  border-left:1px solid var(--grid);
}
.contact-card:nth-child(2n){
  border-right:1px solid var(--grid);
}
.contact-card:nth-last-child(-n+2){
  border-bottom:1px solid var(--grid);
}
.contact-card h2{
  font-size:24px;font-weight:600;
  letter-spacing:-0.01em;
  margin-top:14px;
}
.contact-card h2 a{
  color:var(--ink);
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.contact-card h2 a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.contact-card p{
  margin-top:14px;
  font-size:15px;line-height:1.55;opacity:.8;
}

/* Make the chero2-grid-card overlay anchor click-through the whole card */
.chero2-grid-card{position:relative;}
.chero2-grid-card > a:first-child{
  position:absolute;inset:0;z-index:5;
  text-indent:-9999px;
}

/* Mobile spacing */
@media (max-width:780px){
  .studio-hero,
  .contact-hero{padding:80px 24px 40px}
  .studio-section,
  .service-section{padding:56px 24px}
  .services-index{padding:16px 24px 0}
  .contact-block{padding:24px 24px 60px}
  .contact-card{padding:28px 22px}
}

/* Services page — dense catalogue rather than eight full-page chapters */
.services-page .studio-hero{
  padding-top:58px;
  padding-bottom:22px;
}
.services-page .studio-hero-inner{
  max-width:1120px;
}
.services-page .studio-hero h1{
  max-width:980px;
  margin-top:14px;
  font-size:clamp(38px, 4.6vw, 62px);
  line-height:1;
}
.services-page .studio-hero .lead{
  max-width:820px;
  margin-top:18px;
  font-size:clamp(16px, 1.15vw, 19px);
  line-height:1.45;
}
.services-page .services-index{
  max-width:1400px;
  padding:8px 40px 26px;
}
.services-page .services-index ul{
  gap:6px;
  padding:12px 0;
}
.services-page .services-index li a{
  display:block;
  padding:5px 9px;
  font-size:10px;
  letter-spacing:.13em;
}
.services-grid{
  max-width:1400px;
  margin:0 auto;
  padding:0 40px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  border-top:1px solid var(--grid);
  border-left:1px solid var(--grid);
}
.services-page .service-section{
  min-width:0;
  padding:32px;
  background:var(--bg);
  border:0;
  border-right:1px solid var(--grid);
  border-bottom:1px solid var(--grid);
  scroll-margin-top:92px;
}
.services-page .service-section--alt{
  background:var(--card);
}
.services-page .service-inner{
  max-width:none;
}
.services-page .service-section h2{
  margin-top:10px;
  font-size:clamp(24px, 2.2vw, 34px);
  line-height:1.05;
}
.services-page .service-section .lead{
  margin-top:12px;
  max-width:none;
  font-size:17px;
  line-height:1.4;
}
.services-page .service-section p{
  max-width:none;
  margin-top:12px;
  font-size:14px;
  line-height:1.52;
}
.services-page .cta-banner{
  margin:40px auto;
}
.services-page .cta-inner{
  padding:38px 42px;
}
.services-page .cta-inner h2{
  font-size:clamp(28px, 3.2vw, 42px);
}
.services-page .cta-side{
  height:96px;
}
.services-page footer{
  margin-top:40px;
}

@media (max-width:780px){
  .services-page .studio-hero{
    padding:40px 24px 18px;
  }
  .services-page .studio-hero h1{
    font-size:clamp(34px, 11vw, 48px);
  }
  .services-page .studio-hero .lead{
    margin-top:14px;
    font-size:16px;
  }
  .services-page .services-index{
    padding:6px 24px 20px;
  }
  .services-page .services-index ul{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding:10px 0;
    scrollbar-width:none;
  }
  .services-page .services-index ul::-webkit-scrollbar{
    display:none;
  }
  .services-page .services-index li{
    flex:0 0 auto;
  }
  .services-grid{
    grid-template-columns:1fr;
    padding:0 24px;
    border-left:0;
  }
  .services-page .service-section{
    padding:26px 0;
    border-right:0;
    background:var(--bg);
  }
  .services-page .service-section .lead{
    font-size:16px;
  }
  .services-page .cta-banner{
    margin:28px auto;
    padding:0 24px;
  }
  .services-page .cta-inner{
    padding:30px 24px;
  }
  .services-page .cta-side{
    display:none;
  }
  .services-page footer{
    margin-top:28px;
  }
}


/* ============================================================
   ALIGNMENT — nav header lijnt uit met hero-combo body content
   ------------------------------------------------------------
   .hero-combo gebruikt max-width:1400px met padding:80px 40px en
   margin:0 auto, dus de inhoud begint op brede schermen op
   ((vw - 1400)/2 + 40)px. De nav-concept-wrapper was full-width
   met padding:18px 40px, waardoor de logo's, links en CTA NIET
   uitlijnden met de content op brede schermen. We:
     1. Halen de horizontale padding van .nav-concept eraf zodat
        de full-width achtergrond/border bewaard blijft.
     2. Wikkelen elke nav-header inner-row in een gecentreerde
        max-width:1400px container met 40px horizontale padding —
        identiek aan .hero-combo.
     3. Lijnen de comparison-label .concept-tag uit met dezelfde
        formule als de hero-combo content.
   ============================================================ */
.nav-concept{
  padding-left:0;
  padding-right:0;
}
.concept-tag{
  margin-left:max(40px, calc((100vw - 1400px) / 2 + 40px));
}
.nav-a-inner,
.nav-b-meta,
.nav-b-main,
.nav-c-row{
  max-width:1400px;
  margin-left:auto;
  margin-right:auto;
  padding-left:40px;
  padding-right:40px;
  box-sizing:border-box;
}
/* nav-a-inner had max-width:none — expliciete override voor source order veiligheid */
.nav-concept .nav-a-inner{max-width:1400px}

/* Mobile: gebruik 28px padding zodat de nav uitlijnt met de mobile
   .hero-combo padding (60px 28px) — zie de @media (max-width:980px) regel. */
@media (max-width:980px){
  .nav-a-inner,
  .nav-b-meta,
  .nav-b-main,
  .nav-c-row{padding-left:28px;padding-right:28px}
  .concept-tag{margin-left:max(28px, calc((100vw - 1400px) / 2 + 28px))}
}

/* ============================================================
   SPACING — verklein de witruimte tussen
   .hero-combo.hero-combo--b.is-landing en
   .hero-combo.hero-combo--c.is-slider
   ------------------------------------------------------------
   Standaard heeft elke .hero-combo padding:80px 40px, dus de
   visuele afstand tussen twee secties was 80+80 = 160px. Dat
   was te ruim. We knippen de bottom van is-landing en de top
   van is-slider terug, zodat de twee secties strakker tegen
   elkaar aanstaan zonder dat de individuele secties te krap
   ogen. Andere .hero-combo varianten blijven onaangetast.
   ============================================================ */
.hero-combo.is-landing{padding-bottom:32px}
.hero-combo.is-slider{padding-top:32px}
@media (max-width:980px){
  .hero-combo.is-landing{padding-bottom:24px}
  .hero-combo.is-slider{padding-top:24px}
}

/* ============================================================
   LED-ICON UNIFICATIE
   ------------------------------------------------------------
   Brengt alle "LED sign" iconen op de site naar dezelfde visuele
   taal als de card-LED in de RA/F1-kaarten: een transparante,
   fijn omlijnde cirkel met een dun diagonaal kruis. In de
   ON-state vult de cirkel accent-blauw en verdwijnt het kruis.

   Geünificeerd:
     • .nav-a-cta-led   — live indicator op CTA (altijd ON)
     • .werk-chip-led   — categoriefilter chip (ON op .active)
     • .werk-loadmore-led — load-more knop (ON op :hover)
     • .logo-node       — logo node naast WAUD-svg (ON op :hover)

   Deze regels staan onderaan zodat ze via source-order de
   eerdere, oudere definities overrulen — geen HTML-aanpassingen
   nodig.
   ============================================================ */

/* === SHARED rules — geldt voor alle 4 LED-types === */
.nav-a-cta-led,
.werk-chip-led,
.werk-loadmore-led,
.logo-node{
  position:relative;
  border-radius:50%;
  flex-shrink:0;
  box-sizing:border-box;
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.nav-a-cta-led::before,
.nav-a-cta-led::after,
.werk-chip-led::before,
.werk-chip-led::after,
.werk-loadmore-led::before,
.werk-loadmore-led::after,
.logo-node::before,
.logo-node::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  height:1px;
  pointer-events:none;
  border-radius:0;            /* override eventuele 50% van de outer */
  transition:background .25s ease, opacity .25s ease;
}
.nav-a-cta-led::before,
.werk-chip-led::before,
.werk-loadmore-led::before,
.logo-node::before{transform:translate(-50%,-50%) rotate(45deg)}
.nav-a-cta-led::after,
.werk-chip-led::after,
.werk-loadmore-led::after,
.logo-node::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* === Specifieke sizes + state-rules per LED === */

/* nav-a-cta-led — 12px, altijd ON (live indicator op CTA) */
.nav-a-cta-led{
  width:12px;height:12px;
  border:var(--stroke) solid var(--ink);
  background:var(--accent);
  box-shadow:0 0 6px var(--accent-glow), 0 0 14px var(--accent-glow);
  animation:none;             /* override: was blink */
}
.nav-a-cta-led::before,
.nav-a-cta-led::after{
  width:8px;background:var(--ink);opacity:0;
}

/* werk-chip-led — 12px, OFF default, ON wanneer chip.active */
.werk-chip-led{
  width:12px;height:12px;
  border:var(--stroke) solid var(--line);
  background:var(--bg);
}
.werk-chip-led::before,
.werk-chip-led::after{
  width:8px;background:var(--line);
}
.werk-chip.active .werk-chip-led{
  background:var(--accent);
  border-color:var(--ink);
  box-shadow:0 0 6px var(--accent-glow), 0 0 14px var(--accent-glow);
}
.werk-chip.active .werk-chip-led::before,
.werk-chip.active .werk-chip-led::after{opacity:0}

/* werk-loadmore-led — 14px, OFF default, ON op button-hover */
.werk-loadmore-led{
  width:14px;height:14px;
  border:var(--stroke) solid currentColor;
  background:var(--bg);
}
.werk-loadmore-led::before,
.werk-loadmore-led::after{
  width:9px;background:currentColor;
}
.werk-loadmore:hover .werk-loadmore-led{
  background:var(--accent);
  border-color:var(--ink);
  box-shadow:0 0 6px var(--accent-glow), 0 0 14px var(--accent-glow);
}
.werk-loadmore:hover .werk-loadmore-led::before,
.werk-loadmore:hover .werk-loadmore-led::after{opacity:0}

/* logo-node — 12px, OFF default, ON op logo:hover */
.logo-node{
  width:12px;height:12px;
  border:var(--stroke) solid var(--line);
  background:var(--bg);
}
.logo-node::before,
.logo-node::after{
  width:8px;background:var(--line);
}
.logo:hover .logo-node{
  background:var(--accent);
  border-color:var(--ink);
  box-shadow:0 0 6px var(--accent-glow), 0 0 14px var(--accent-glow);
}
.logo:hover .logo-node::before,
.logo:hover .logo-node::after{opacity:0}

/* ============================================================
   PROJECT-DETAILPAGINA (project.html)
   ------------------------------------------------------------
   Eén template, slug uit URL. Drie hero-concepten staan
   stacked om naast elkaar te kunnen kiezen (zoals nav-concepts
   eerder op de homepage). Daaronder: long_text + tags + specs,
   image gallery, related projects, prev/next.
   ============================================================ */

/* ----- 404 / error state ----- */
.project-error{
  max-width:1400px;margin:0 auto;
  padding:120px 40px 80px;
  min-height:60vh;
  display:flex;align-items:center;
}
.project-error-inner{max-width:560px}
.project-error h1{
  font-size:clamp(36px,4.6vw,68px);
  line-height:0.95;letter-spacing:-0.03em;font-weight:700;
  margin:18px 0 18px;
}
.project-error p{font-size:17px;line-height:1.55;color:#333;margin-bottom:30px}

/* ----- Hero-concept wrapper (3 stacked designs ter keuze) ----- */
.phero-concepts{
  position:relative;
  border-bottom:var(--stroke) solid var(--line);
}
.phero-concept{
  position:relative;
  padding:18px 0 28px;
  border-bottom:1px dashed #d6d6d6;
}
.phero-concept:last-child{border-bottom:none}
.phero-concept .concept-tag{
  margin-left:max(40px, calc((100vw - 1400px) / 2 + 40px));
}

/* Shared: een hero-combo binnen een concept gebruikt geen extra paddings */
.phero-a-combo,
.phero-b-combo,
.phero-c-combo{
  padding:0 max(40px, calc((100vw - 1400px) / 2 + 40px));
  max-width:none;
  margin:0;
}
.phero-a-combo{padding-top:48px}

/* ----- Back link (gebruikt in alle 3 concepten) ----- */
.phero-back-link{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  font-weight:500;
  color:var(--ink);text-decoration:none;
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:gap .25s ease, color .25s ease, border-color .25s ease;
}
.phero-back-link:hover{
  color:var(--accent);gap:14px;
  border-bottom-color:var(--accent);
}
.phero-back-link--light{color:#fff}
.phero-back-link--light:hover{color:var(--accent);border-bottom-color:var(--accent)}
.phero-back-arrow{
  display:inline-block;
  width:14px;height:1px;background:currentColor;position:relative;
}
.phero-back-arrow::before{
  content:"";position:absolute;left:0;top:50%;
  width:6px;height:6px;
  border-left:1px solid currentColor;border-top:1px solid currentColor;
  transform:translateY(-50%) rotate(-45deg);
}

/* ============================================================
   HERO CONCEPT A — CINEMATIC (full-bleed image + overlay)
   Visueel identiek aan homepage hero-combo--b is-landing.
   ============================================================ */
.phero-a-feature{
  position:relative;
  width:100%;
  min-height:500px;
  border:var(--stroke) solid var(--line);
  background:var(--ink);
  overflow:hidden;
}
.phero-a-feature img,
.phero-a-feature video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  filter:contrast(1.08) saturate(1.1) brightness(.82);
}
.phero-a-overlay{
  position:relative;z-index:2;
  padding:48px 56px 56px;
  display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;min-height:500px;
  color:#fff;
  background:linear-gradient(to top, rgba(10,10,10,0.94) 0%, rgba(10,10,10,0.55) 55%, rgba(10,10,10,0.15) 100%);
}
.phero-back-row{
  position:absolute;top:24px;left:56px;
}
.phero-a-overlay .eyebrow{
  background:transparent;border-color:rgba(255,255,255,0.4);color:rgba(255,255,255,0.85);
}
.phero-a-overlay h1{
  font-size:clamp(40px,5vw,84px);
  line-height:0.95;letter-spacing:-0.03em;font-weight:700;
  margin-bottom:20px;color:#fff;
}
.phero-a-overlay .lead{
  font-size:17px;line-height:1.55;color:rgba(255,255,255,0.85);max-width:560px;margin-bottom:24px;
}
.phero-a-meta{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-family:var(--mono);
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.78);
}
.phero-a-meta-sep{opacity:.4}

/* ============================================================
   HERO CONCEPT B — SPLIT (image links 60%, content rechts 40%)
   ============================================================ */
.phero-b-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:40px;
  min-height:560px;
  align-items:stretch;
}
.phero-b-image{
  position:relative;
  border:var(--stroke) solid var(--line);
  background:var(--ink);
  overflow:hidden;
}
.phero-b-image img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  filter:contrast(1.08) saturate(1.1);
  transition:filter .5s ease;
}
.phero-b-image:hover img{filter:contrast(1.08) saturate(1.1)}
.phero-b-content{
  display:flex;flex-direction:column;
  padding:8px 0;
  gap:18px;
}
.phero-b-content .phero-back-link{
  align-self:flex-start;margin-bottom:8px;
}
.phero-b-content h1{
  font-size:clamp(40px,4.4vw,72px);
  line-height:0.95;letter-spacing:-0.03em;font-weight:700;
  margin:6px 0 8px;
}
.phero-b-content .lead{
  font-size:17px;line-height:1.55;color:#333;
  margin-bottom:6px;max-width:480px;
}
.phero-b-credit{
  border-top:var(--stroke) solid var(--line);
  padding-top:18px;
  margin-top:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 24px;
}
.phero-b-credit-row{display:flex;flex-direction:column;gap:3px}
.phero-b-credit-row dt{
  font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--muted);
}
.phero-b-credit-row dd{
  font-family:'Space Grotesk', sans-serif;
  font-size:14px;font-weight:600;letter-spacing:-0.005em;
  color:var(--ink);
}

/* ============================================================
   HERO CONCEPT C — EDITORIAL (masthead boven, image breed onder)
   ============================================================ */
.phero-c-masthead{
  padding:32px 0 36px;
  border-bottom:var(--stroke) solid var(--line);
  margin-bottom:0;
  display:flex;flex-direction:column;gap:18px;
}
.phero-c-meta-row{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap;
}
.phero-c-meta{
  font-family:var(--mono);
  font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--muted);
  display:inline-flex;align-items:center;gap:10px;
  flex-wrap:wrap;
}
.phero-c-sep{opacity:.4}
.phero-c-masthead h1{
  font-size:clamp(48px,7vw,120px);
  line-height:0.92;letter-spacing:-0.035em;font-weight:700;
  max-width:1100px;
}
.phero-c-masthead .lead{
  font-size:19px;line-height:1.5;color:#333;max-width:680px;
  margin-top:6px;
}
.phero-c-image{
  position:relative;
  margin-top:0;
  aspect-ratio:21/9;
  border:var(--stroke) solid var(--line);
  border-top:none;
  background:var(--ink);
  overflow:hidden;
}
.phero-c-image img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  filter:contrast(1.04) saturate(1.03);
}

/* ============================================================
   PROJECT BODY — long text + tags + specs aside
   ============================================================ */
.project-body{
  max-width:1400px;margin:0 auto;
  padding:80px 40px 60px;
}
.project-body-inner{
  display:grid;
  grid-template-columns:1.7fr 1fr;
  gap:56px;
  align-items:start;
}
.project-text .eyebrow{margin-bottom:18px}
.project-text p{
  font-size:18px;line-height:1.65;color:#222;
  max-width:680px;
  margin-bottom:28px;
  white-space:pre-line;
}
.project-tags{
  list-style:none;display:flex;flex-wrap:wrap;gap:8px;
  padding:0;margin:0;
}
.project-tag{
  font-family:var(--mono);
  font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;
  font-weight:500;
  padding:6px 12px;
  border:var(--stroke) solid var(--line);
  background:var(--bg);
  color:var(--ink);
}

/* Specs aside — datasheet look */
.project-specs{
  position:sticky;top:24px;
  border:var(--stroke) solid var(--line);
  background:var(--bg);
}
.project-specs-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;
  background:var(--ink);color:#fff;
  font-family:var(--mono);
  font-size:10.5px;letter-spacing:0.2em;text-transform:uppercase;
  font-weight:600;
}
.project-specs-rev{opacity:.55;font-weight:500}
.project-specs-list{padding:6px 16px 16px}
.project-spec-row{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:14px;
  padding:12px 0;
  border-bottom:1px dashed #d6d6d6;
  align-items:start;
}
.project-spec-row:last-child{border-bottom:none}
.project-spec-row dt{
  font-family:var(--mono);
  font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--muted);
  padding-top:2px;
}
.project-spec-row dd{
  font-family:'Space Grotesk', sans-serif;
  font-size:14px;line-height:1.4;font-weight:500;color:var(--ink);
}

/* ============================================================
   GALLERY — adapt naar 1, 2, 3+ images
   ============================================================ */
.project-gallery-section{
  max-width:1400px;margin:0 auto;
  padding:60px 40px 40px;
}
.project-gallery-head{
  display:flex;align-items:baseline;gap:18px;
  margin-bottom:32px;
  flex-wrap:wrap;
}
.project-gallery-head h2{
  font-size:clamp(28px,3vw,44px);
  line-height:0.95;letter-spacing:-0.02em;font-weight:700;
}
.project-gallery{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:160px;
  gap:18px;
}
.project-gallery-item{
  margin:0;overflow:hidden;
  border:var(--stroke) solid var(--line);
  background:var(--ink);
  position:relative;
}
.project-gallery-item img,
.project-gallery-item video{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:none;
  transition:filter .5s ease, transform .8s ease;
}
.project-gallery-item:hover img{filter:none;transform:scale(1.02)}
.project-gallery-item video{filter:none}
/* 1 image: full-width hero */
.project-gallery[data-count="1"] .project-gallery-item{grid-column:span 12;grid-row:span 4}
/* 2 images: 50/50 */
.project-gallery[data-count="2"] .project-gallery-item{grid-column:span 6;grid-row:span 3}
/* 3 images: large + 2 stacked small */
.project-gallery[data-count="3"] .project-gallery-item:nth-child(1){grid-column:span 8;grid-row:span 4}
.project-gallery[data-count="3"] .project-gallery-item:nth-child(2),
.project-gallery[data-count="3"] .project-gallery-item:nth-child(3){grid-column:span 4;grid-row:span 2}
/* 4+ images: bento mix */
.project-gallery:not([data-count="1"]):not([data-count="2"]):not([data-count="3"]) .project-gallery-item{grid-column:span 4;grid-row:span 2}
.project-gallery:not([data-count="1"]):not([data-count="2"]):not([data-count="3"]) .project-gallery-item:nth-child(4n+1){grid-column:span 8;grid-row:span 3}

/* Portrait-led photo series: preserve the full 3:4 compositions. */
.project-gallery[data-layout="portrait"]{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:auto;
}
.project-gallery[data-layout="portrait"] .project-gallery-item{
  grid-column:auto !important;
  grid-row:auto !important;
  aspect-ratio:3/4;
}

/* ============================================================
   RELATED PROJECTS
   ============================================================ */
.project-related-section{
  max-width:1400px;margin:0 auto;
  padding:60px 40px 60px;
}
.project-related-head{
  display:flex;align-items:baseline;gap:18px;
  margin-bottom:32px;flex-wrap:wrap;
}
.project-related-head h2{
  font-size:clamp(28px,3vw,44px);
  line-height:0.95;letter-spacing:-0.02em;font-weight:700;
}
.project-related-head h2 span{color:var(--accent)}
.project-related-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.project-related-card{
  position:relative;
  display:block;
  aspect-ratio:4/5;
  border:var(--stroke) solid var(--line);
  background:var(--ink);
  text-decoration:none;color:#fff;
  overflow:hidden;
  transition:box-shadow .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.project-related-card:hover{
  box-shadow:10px 14px 0 -2px var(--line), 0 0 0 1px var(--accent);
}
.project-related-card img,
.project-related-card video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  filter:none;
  transition:filter .5s ease;
}
.project-related-card:hover img,
.project-related-card:hover video{filter:none}
.project-related-credit{
  position:absolute;top:14px;right:14px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 11px 8px;
  background:var(--ink);color:#fff;
  border:1px solid var(--accent);
  font-family:'Space Grotesk', sans-serif;
  font-size:12px;font-weight:600;
  pointer-events:none;
}
.project-related-credit-dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 6px var(--accent-glow);
  animation:blink 1.2s ease-in-out infinite;
}
.project-related-info{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:22px;
  background:linear-gradient(to top, rgba(10,10,10,0.96) 0%, rgba(10,10,10,0.55) 70%, rgba(10,10,10,0) 100%);
  display:flex;flex-direction:column;gap:6px;
}
.project-related-cat{
  font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(255,255,255,0.78);
}
.project-related-info h3{
  font-size:clamp(20px,1.7vw,24px);font-weight:700;letter-spacing:-0.02em;line-height:1.05;
}
.project-related-info p{
  font-size:13px;line-height:1.4;color:rgba(255,255,255,0.78);
}

/* ============================================================
   PREV / NEXT NAVIGATION (onderaan)
   ============================================================ */
.project-nav-bottom{
  max-width:1400px;margin:0 auto;
  padding:36px 40px 60px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:24px;
  border-top:var(--stroke) solid var(--line);
}
.project-nav-item{
  display:flex;flex-direction:column;gap:6px;
  text-decoration:none;color:var(--ink);
  padding:14px 8px;
  transition:color .25s ease;
}
.project-nav-item:hover{color:var(--accent)}
.project-nav-prev{align-items:flex-start;text-align:left}
.project-nav-next{align-items:flex-end;text-align:right}
.project-nav-index{
  align-items:center;text-align:center;
  border-left:1px dashed #d6d6d6;border-right:1px dashed #d6d6d6;
  padding-left:24px;padding-right:24px;
}
.project-nav-dir{
  font-family:var(--mono);
  font-size:10.5px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--muted);
  display:inline-flex;align-items:center;gap:8px;
}
.project-nav-item:hover .project-nav-dir{color:var(--accent)}
.project-nav-name{
  font-size:clamp(20px,2vw,28px);
  font-weight:700;letter-spacing:-0.02em;line-height:1.1;
}
.project-nav-arrow{
  display:inline-block;
  width:16px;height:1px;background:currentColor;position:relative;
}
.project-nav-arrow::before{
  content:"";position:absolute;left:0;top:50%;
  width:6px;height:6px;
  border-left:1px solid currentColor;border-top:1px solid currentColor;
  transform:translateY(-50%) rotate(-45deg);
}
.project-nav-arrow--right::before{
  left:auto;right:0;
  transform:translateY(-50%) rotate(135deg);
}

/* ============================================================
   PROJECT PAGE — RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .phero-b-grid{grid-template-columns:1fr;gap:24px;min-height:auto}
  .phero-b-image{aspect-ratio:16/10}
  .phero-b-credit{grid-template-columns:1fr 1fr}
  .project-body-inner{grid-template-columns:1fr;gap:40px}
  .project-specs{position:relative;top:auto}
  .project-related-grid{grid-template-columns:1fr 1fr}
  .project-related-card:nth-child(3){grid-column:span 2}
}
@media (max-width:760px){
  .phero-a-feature,
  .phero-a-overlay{min-height:480px}
  .phero-a-overlay{padding:36px 24px 36px}
  .phero-back-row{top:18px;left:24px}
  .phero-c-masthead{padding:24px 0 28px}
  .phero-c-image{aspect-ratio:4/3}
  .project-body{padding:48px 24px 40px}
  .project-gallery-section,
  .project-related-section{padding:40px 24px}
  .project-gallery{grid-auto-rows:120px;gap:12px}
  .project-gallery[data-layout="portrait"]{grid-template-columns:1fr;grid-auto-rows:auto}
  .project-related-grid{grid-template-columns:1fr}
  .project-related-card:nth-child(3){grid-column:span 1}
  .project-nav-bottom{
    padding:28px 24px 40px;
    grid-template-columns:1fr;
    gap:6px;
  }
  .project-nav-prev,
  .project-nav-next,
  .project-nav-index{
    align-items:flex-start;text-align:left;
    border:none;padding:12px 0;
  }
  .phero-b-credit{grid-template-columns:1fr}
}

/* ============================================================
   PROJECT PAGE REFINEMENT — compact media + horizontal lightbox
   ============================================================ */
.project-gallery-section{padding:24px 40px 48px}
.project-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,300px));
  grid-auto-rows:auto;
  justify-content:start;
  gap:14px;
}
.project-gallery[data-count] .project-gallery-item{
  grid-column:auto !important;
  grid-row:auto !important;
}
.project-gallery-item{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:4/3;
  margin:0;
  padding:0;
  overflow:hidden;
  border:var(--stroke) solid var(--line);
  background:var(--ink);
  color:#fff;
  cursor:pointer;
  text-align:left;
}
.project-gallery-item img,
.project-gallery-item video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:none;
  transition:transform .6s ease;
}
.project-gallery-item:hover img,
.project-gallery-item:hover video{transform:scale(1.025)}
.project-gallery[data-layout="portrait"]{
  grid-template-columns:repeat(auto-fill,minmax(180px,240px));
  grid-auto-rows:auto;
}
.project-gallery[data-layout="portrait"] .project-gallery-item{aspect-ratio:3/4}
.project-gallery-expand,
.project-gallery-video-mark{
  position:absolute;
  z-index:2;
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(10,10,10,.72);
  backdrop-filter:blur(8px);
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:background .2s ease,border-color .2s ease;
}
.project-gallery-expand{right:10px;bottom:10px}
.project-gallery-video-mark{left:10px;bottom:10px}
.project-gallery-item:hover .project-gallery-expand{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--ink);
}

body.project-lightbox-open{overflow:hidden}
.project-lightbox[hidden]{display:none}
.project-lightbox{
  position:fixed;
  inset:0;
  z-index:12000;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:16px;
  padding:28px;
  background:rgba(5,5,5,.96);
  color:#fff;
  backdrop-filter:blur(16px);
}
.project-lightbox-stage{
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  touch-action:pan-y;
}
.project-lightbox-stage img,
.project-lightbox-stage video{
  display:block;
  width:auto;
  height:auto;
  max-width:calc(100vw - 112px);
  max-height:calc(100dvh - 118px);
  object-fit:contain;
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
}
.project-lightbox-close,
.project-lightbox-nav{
  position:absolute;
  z-index:3;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(10,10,10,.72);
  color:#fff;
  font-family:var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  backdrop-filter:blur(10px);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.project-lightbox-close{
  top:22px;
  right:22px;
  min-height:40px;
  padding:0 14px;
  font-size:9px;
}
.project-lightbox-nav{
  top:50%;
  width:48px;
  height:58px;
  transform:translateY(-50%);
  font-size:24px;
}
.project-lightbox-prev{left:22px}
.project-lightbox-next{right:22px}
.project-lightbox-close:hover,
.project-lightbox-nav:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--ink);
}
.project-lightbox-meta{
  display:flex;
  justify-content:center;
  gap:18px;
  min-width:0;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.7);
}
#project-lightbox-count{color:var(--accent);white-space:nowrap}
#project-lightbox-caption{
  max-width:min(720px,70vw);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.project-back-work{
  max-width:1400px;
  margin:0 auto;
  padding:10px 40px 72px;
}
.project-back-work-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  padding:0 20px;
  border:var(--stroke) solid var(--ink);
  background:var(--ink);
  color:var(--bg);
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.18em;
  text-decoration:none;
  text-transform:uppercase;
  transition:gap .2s ease,background .2s ease,color .2s ease;
}
.project-back-work-link:hover{
  gap:17px;
  background:var(--accent);
  color:var(--ink);
}
.project-back-work-link .switch{
  width:34px;
  height:16px;
  position:relative;
  flex:0 0 auto;
  border:var(--stroke) solid currentColor;
  border-radius:20px;
}
.project-back-work-link .switch::before{
  content:"";
  position:absolute;
  left:2px;
  top:50%;
  width:10px;
  height:10px;
  border-radius:50%;
  background:currentColor;
  transform:translateY(-50%);
  transition:left .25s ease;
}
.project-back-work-link:hover .switch::before{left:20px}

@media (max-width:1100px){
  .phero-a-combo{padding-top:36px}
}
@media (max-width:760px){
  .phero-a-combo{padding-top:24px}
  .phero-a-feature,
  .phero-a-overlay{min-height:420px}
  .project-gallery-section{padding:20px 24px 36px}
  .project-gallery,
  .project-gallery[data-layout="portrait"]{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:auto;
    gap:10px;
  }
  .project-gallery-item,
  .project-gallery[data-layout="portrait"] .project-gallery-item{aspect-ratio:4/3}
  .project-gallery-expand,
  .project-gallery-video-mark{padding:5px 7px;font-size:8px}
  .project-lightbox{padding:14px;gap:12px}
  .project-lightbox-stage img,
  .project-lightbox-stage video{
    max-width:calc(100vw - 28px);
    max-height:calc(100dvh - 104px);
  }
  .project-lightbox-close{top:14px;right:14px}
  .project-lightbox-nav{width:42px;height:52px}
  .project-lightbox-prev{left:14px}
  .project-lightbox-next{right:14px}
  .project-lightbox-meta{justify-content:flex-start;padding:0 4px;gap:10px}
  #project-lightbox-caption{max-width:70vw}
  .project-back-work{padding:8px 24px 52px}
  .project-back-work-link{width:100%;justify-content:center}
}

/* ============================================================
   CHERO2 — VARIANT: GRID-CAROUSEL (om-en-om, scrollable)
   ============================================================
   Tweede chero2-variant: een horizontale scrollende carousel
   waarin slots afwisselend boven (--up) en onder (--down) een
   gedeelde, vaste rail hangen. 5 slots zichtbaar = 3 boven + 2
   onder = de "om en om" layout. Door de track te scrollen komen
   er meer projecten in beeld; de rail + diode-knoppen blijven
   staan en de LEDs schuiven met de cards mee — exact zoals de
   slider-variant, alleen met deze tweerijige opmaak.

   Variabelen voor dimensie-consistentie:                        */
.chero2--grid{
  --grid-card-h: 320px;             /* card-hoogte — iets hoger dan vorige iteratie (280)
                                       voor een steviger beeldvlak. Card wordt 340×320
                                       (aspect ≈ 17:16, bijna vierkant maar met wat
                                       breedte-overhang door de extension). */
  --grid-rail-h: 120px;             /* rail-zone-hoogte: 45 streep + 30 LED + 45 streep */
  --grid-slot-w: 220px;             /* slot-breedte; card extends beyond it for a wider image plane */
  --grid-track-pad: 120px;          /* 60px zichtbare marge na de card-overhang */
  position:relative;
  z-index:2;
  isolation:isolate;
}

/* ----- Carousel-area: positioning context voor vaste rail + diodes ----- */
.chero2-grid-carousel-area{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  height:calc(var(--grid-card-h) * 2 + var(--grid-rail-h));
}

/* ----- Vaste rail: spant volle carousel-breedte op rail-Y, blijft staan
   terwijl de track eronder scrollt ----- */
.chero2-grid-rail{
  position:absolute;
  top:calc(var(--grid-card-h) + var(--grid-rail-h) / 2);
  left:0;right:0;
  height:0;
  z-index:3;
  pointer-events:none;
  transform:translateY(-50%);
}
.chero2-grid-rail-line{
  position:absolute;
  top:50%;
  left:0;right:0;
  height:var(--stroke);
  background:var(--line);
  transform:translateY(-50%);
}

.chero2-grid-rail-line::after{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:clamp(72px,8vw,126px);
  height:3px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    var(--accent) 34%,
    var(--accent) 66%,
    transparent 100%
  );
  box-shadow:
    0 0 8px var(--accent-glow),
    0 0 18px var(--accent-glow);
  transform:translate3d(-140px,-50%,0);
  opacity:0;
  animation:chero2-grid-pulse 6s linear infinite;
  will-change:transform,opacity;
}

@keyframes chero2-grid-pulse{
  0%{
    transform:translate3d(-140px,-50%,0);
    opacity:0;
  }
  8%{opacity:1;}
  92%{opacity:1;}
  100%{
    transform:translate3d(calc(100vw + 140px),-50%,0);
    opacity:0;
  }
}

/* ----- Diodes (prev/next nav) — vast aan beide kanten op rail-Y -----
   Hergebruikt de visuele taal van .chero2-diode (slider-variant): zelfde
   afmetingen, zelfde icon-states (default arrow / battery / GND), zelfde
   "previous"/"next" labels die uitfaden bij scroll-bound. */
.chero2-grid-diode{
  position:absolute;
  top:calc(var(--grid-card-h) + var(--grid-rail-h) / 2);
  width:72px;height:36px;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  background:var(--bg);
  border:none;
  cursor:pointer;
  color:var(--ink);
  transition:color .2s ease, transform .2s ease;
  transform:translateY(-50%);
  z-index:8;                        /* boven track (z:4) en rail (z:3) */
  overflow:visible;
  pointer-events:auto;
}
.chero2-grid-diode--prev{left:clamp(12px,2vw,32px)}
.chero2-grid-diode--next{right:clamp(12px,2vw,32px)}
.chero2-grid-diode:hover{color:var(--accent);transform:translateY(-50%) scale(1.06)}
.chero2-grid-diode:hover svg{filter:drop-shadow(0 0 5px var(--accent-glow))}
.chero2-grid-diode-icon{
  width:60px;height:33px;
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  display:block;
  color:currentColor;
  transition:opacity .2s ease;
}
.chero2-grid-diode-icon--battery,
.chero2-grid-diode-icon--gnd{opacity:0;pointer-events:none}
.chero2-grid-diode--prev.at-start .chero2-grid-diode-icon--default{opacity:0}
.chero2-grid-diode--prev.at-start .chero2-grid-diode-icon--battery{opacity:1}
.chero2-grid-diode--next.at-end .chero2-grid-diode-icon--default{opacity:0}
.chero2-grid-diode--next.at-end .chero2-grid-diode-icon--gnd{opacity:1}
.chero2-grid-diode.at-start,
.chero2-grid-diode.at-end{cursor:default}
.chero2-grid-diode.at-start:hover,
.chero2-grid-diode.at-end:hover{transform:translateY(-50%)}

/* Onderschriften — "previous" / "next" labels onder de diode */
.chero2-grid-diode::after{
  content:"";
  position:absolute;
  top:100%;left:50%;
  margin-top:8px;
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
  pointer-events:none;
  transition:opacity .25s ease, color .2s ease;
}
.chero2-grid-diode--prev::after{content:"previous"}
.chero2-grid-diode--next::after{content:"next"}
.chero2-grid-diode--prev.at-start::after,
.chero2-grid-diode--next.at-end::after{opacity:0}
.chero2-grid-diode:hover::after{color:var(--accent)}

/* ----- Scrollable track -----
   Volledige carousel-area-breedte; padding aan de zijkanten zodat de
   eerste en laatste slot niet onder de diodes verdwijnen. Gap is
   24px (was 40) zodat meerdere slots tegelijk zichtbaar blijven. */
.chero2-grid-track{
  --grid-edge-fade:clamp(28px,3vw,52px);
  --grid-edge-opacity:0.72;
  position:relative;
  display:flex;
  gap:24px;
  overflow-x:auto;
  overflow-y:visible;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:0 var(--grid-track-pad);
  cursor:grab;
  z-index:4;
  height:100%;
  -webkit-mask-image:linear-gradient(
    to right,
    rgba(0,0,0,var(--grid-edge-opacity)) 0,
    #000 var(--grid-edge-fade),
    #000 calc(100% - var(--grid-edge-fade)),
    rgba(0,0,0,var(--grid-edge-opacity)) 100%
  );
  mask-image:linear-gradient(
    to right,
    rgba(0,0,0,var(--grid-edge-opacity)) 0,
    #000 var(--grid-edge-fade),
    #000 calc(100% - var(--grid-edge-fade)),
    rgba(0,0,0,var(--grid-edge-opacity)) 100%
  );
}
.chero2-grid-track.at-start:not(.at-end){
  -webkit-mask-image:linear-gradient(
    to right,
    #000 0,
    #000 calc(100% - var(--grid-edge-fade)),
    rgba(0,0,0,var(--grid-edge-opacity)) 100%
  );
  mask-image:linear-gradient(
    to right,
    #000 0,
    #000 calc(100% - var(--grid-edge-fade)),
    rgba(0,0,0,var(--grid-edge-opacity)) 100%
  );
}
.chero2-grid-track.at-end:not(.at-start){
  -webkit-mask-image:linear-gradient(
    to right,
    rgba(0,0,0,var(--grid-edge-opacity)) 0,
    #000 var(--grid-edge-fade),
    #000 100%
  );
  mask-image:linear-gradient(
    to right,
    rgba(0,0,0,var(--grid-edge-opacity)) 0,
    #000 var(--grid-edge-fade),
    #000 100%
  );
}
.chero2-grid-track.at-start.at-end{
  -webkit-mask-image:none;
  mask-image:none;
}
.chero2-grid-track::-webkit-scrollbar{display:none}
.chero2-grid-track:active{cursor:grabbing}

/* ----- Slot ----- */
.chero2-grid-slot{
  flex:0 0 auto;
  width:var(--grid-slot-w);
  height:100%;
  position:relative;
  scroll-snap-align:center;
  z-index:1;
}

/* Card binnen slot: --up zit boven, --down zit onder. We overschrijven
   de aspect-ratio van .chero2-card met een expliciete height zodat alle
   cards exact even hoog zijn.

   left/right zijn NEGATIEF (-60 elk): de card steekt 60px buiten zijn
   slot uit aan iedere zijde. Card-breedte = slot_w + 120 = 340px, terwijl
   het slot zelf 220px blijft (5 slots zichtbaar = 3 boven + 2 onder).

   Cards in aangrenzende slots overlappen daardoor in X-positie, maar
   omdat ze in verschillende Y-helften staan (boven vs onder de rail) is
   er geen 2D-collision — alleen het visuele "verspringen"-effect.

   Card-hoogte is precies var(--grid-card-h) — GEEN verticale extensie:
   cards stoppen netjes boven de rail-zone (--up) of beginnen netjes
   eronder (--down), zodat de horizontale rail-lijn intact blijft. */
.chero2-grid-card{
  position:absolute;
  left:-70px;
  right:-70px;
  height:var(--grid-card-h);
  aspect-ratio:auto;                /* override base 4/5 op .chero2-card */
}

/* Carousel copy needs a local scrim: keep the photography vivid while every
   line of project information remains legible on both light and dark images. */
.chero2-grid-card .chero2-card-info{
  padding:72px 20px 18px;
  gap:5px;
  background:linear-gradient(
    to bottom,
    transparent 0%,
    transparent 42%,
    rgba(4,6,8,.12) 56%,
    rgba(4,6,8,.58) 78%,
    rgba(4,6,8,.88) 100%
  );
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.chero2-grid-card .chero2-cat,
.chero2-grid-card .chero2-card-info h3,
.chero2-grid-card .chero2-card-info p,
.chero2-grid-card .card-switch-label{
  text-shadow:0 2px 9px rgba(0,0,0,.9);
}

@media (prefers-reduced-motion:reduce){
  .chero2-grid-rail-line::after{
    left:50%;
    animation:none;
    opacity:.55;
    transform:translate(-50%,-50%);
  }
}
.chero2-grid-card .chero2-cat{
  color:rgba(255,255,255,.92);
  font-size:10.5px;
  font-weight:600;
}
.chero2-grid-card .chero2-card-info h3{
  font-size:clamp(21px,1.8vw,28px);
  color:#fff;
}
.chero2-grid-card .chero2-card-info p{
  max-width:30em;
  margin-bottom:5px;
  color:rgba(255,255,255,.92);
  font-size:14px;
  font-weight:500;
  line-height:1.38;
}
.chero2-grid-card .card-switch-label{
  opacity:.82;
  font-weight:600;
}
.chero2-grid-card .chero2-credit{
  background:rgba(7,9,10,.68);
  border-color:rgba(255,255,255,.42);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.chero2-grid-slot--up .chero2-grid-card{top:0}
.chero2-grid-slot--down .chero2-grid-card{bottom:0}

/* LED gecentreerd op rail-Y binnen het slot (overschrijft .chero2-led's
   slot-specifieke top:15px positionering). */
.chero2-grid-slot .chero2-led{
  position:absolute;
  top:calc(var(--grid-card-h) + var(--grid-rail-h) / 2);
  left:50%;
  transform:translate(-50%,-50%);
  z-index:6;
}
.chero2-grid-slot .chero2-led:hover{
  transform:translate(-50%,-50%) scale(1.08);
}

/* Verticaal streepje tussen LED en card-edge — 50px hoog, matcht
   visueel exact de slider-streep. */
.chero2-grid-led-line{
  position:absolute;
  left:50%;
  width:var(--stroke);
  background:var(--line);
  opacity:0.4;
  pointer-events:none;
  transform:translateX(-50%);
  transition:opacity .25s ease, background .25s ease, box-shadow .25s ease;
  z-index:1;
  height:50px;
}
/* --up: streep van card-onderkant (Y = card-h) naar net boven LED-rand */
.chero2-grid-slot--up .chero2-grid-led-line{
  top:var(--grid-card-h);
}
/* --down: streep van net onder LED-rand naar card-bovenkant */
.chero2-grid-slot--down .chero2-grid-led-line{
  top:calc(var(--grid-card-h) + var(--grid-rail-h) / 2 + 10px);
}

/* Hover op slot lights up zowel het streepje als de LED op de rail —
   precies hetzelfde gedrag als .chero2-slot:hover in slider-variant.
   De card en LED zijn beide kinderen van het slot, dus hover op de
   card triggert :hover op het slot en daarmee deze regels. */
.chero2-grid-slot:hover .chero2-grid-led-line{
  opacity:1;
  background:var(--accent);
  box-shadow:0 0 6px var(--accent-glow);
}
.chero2-grid-slot:hover > .chero2-led{
  background:var(--accent);
  color:var(--ink);
  box-shadow:0 0 6px var(--accent-glow), 0 0 14px var(--accent-glow);
}
.chero2-grid-slot:hover > .chero2-led::before,
.chero2-grid-slot:hover > .chero2-led::after{
  opacity:0;
}

/* ----- Responsive ----- */
@media (max-width:1100px){
  .chero2--grid{
    --grid-slot-w: 210px;
    --grid-card-h: 240px;
    --grid-track-pad: 90px;
  }
}
@media (max-width:760px){
  .chero2--grid{
    --grid-slot-w: 280px;
    --grid-card-h: 260px;
    --grid-rail-h: 100px;
    --grid-track-pad: 40px;
  }
  .chero2-grid-track{--grid-edge-fade:28px;--grid-edge-opacity:0.68;gap:22px}
  .chero2-grid-card .chero2-card-info{padding:40px 18px 16px}
  .chero2-grid-card .chero2-card-info h3{font-size:21px}
  .chero2-grid-card .chero2-card-info p{font-size:13px;line-height:1.35}
  .chero2-grid-diode{width:56px;height:30px}
  .chero2-grid-diode-icon{width:48px;height:26px}
  /* Op mobile geen horizontale extension — viewport te smal */
  .chero2-grid-card{left:0;right:0}
}

/* ============================================================
   P0 REPAIR SPRINT — mobile navigation, honest media placeholders,
   project intake and trust content.
   ============================================================ */

.nav-a-toggle{
  display:none;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--ink);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}
.nav-a-toggle span{
  display:block;
  width:20px;
  height:1.5px;
  background:currentColor;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-a.is-open .nav-a-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-a.is-open .nav-a-toggle span:nth-child(2){opacity:0}
.nav-a.is-open .nav-a-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav-a-logo img{display:block;width:auto;height:30px}

.project-media-placeholder{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:8px;
  min-height:180px;
  padding:24px;
  overflow:hidden;
  background:#0a0a0a;
  color:#fff;
  text-decoration:none;
  isolation:isolate;
}
.project-media-placeholder::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 42%),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(255,255,255,.07) 48px 49px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(255,255,255,.05) 48px 49px);
}
.project-media-placeholder::after{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  top:50%;
  z-index:-1;
  height:1px;
  background:linear-gradient(90deg, var(--accent), rgba(255,255,255,.2), transparent);
}
.project-media-placeholder span{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
}
.project-media-placeholder strong{
  max-width:80%;
  font-family:var(--sans);
  font-size:clamp(24px,3vw,48px);
  line-height:1;
}
.project-media-placeholder--hero{
  position:absolute;
  inset:0;
  z-index:0;
  justify-content:flex-start;
  padding:40px;
}
.project-media-placeholder--hero strong{font-size:clamp(48px,9vw,120px);opacity:.16}
.project-media-placeholder--card,
.project-media-placeholder--mini,
.project-media-placeholder--work,
.project-media-placeholder--related{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.project-media-placeholder--card strong,
.project-media-placeholder--mini strong,
.project-media-placeholder--work strong,
.project-media-placeholder--related strong{
  font-size:clamp(20px,2vw,34px);
  opacity:.28;
}
.project-media-placeholder--detail{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  justify-content:center;
}
.project-media-placeholder--gallery{
  width:100%;
  height:100%;
  min-height:320px;
}
.bhero-feature-overlay,
.chero2-credit,
.chero2-card-info,
.bhero-mini-info,
.werk-tile-info,
.project-related-credit,
.project-related-info{z-index:2}

.projects-grid-heading{
  max-width:780px;
  margin:0 auto 56px;
  padding:0 28px;
  text-align:center;
}
.projects-grid-heading h2{
  margin-top:20px;
  font-size:clamp(32px,4.4vw,64px);
  line-height:1.05;
}

@media (min-width:761px){
  .projects-grid-heading{max-width:1020px}
  .projects-grid-heading h2{
    font-size:clamp(34px,4vw,58px);
    white-space:nowrap;
  }
}

.project-intake{
  padding:24px 24px 88px;
}
.project-intake-inner{
  display:grid;
  grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
  gap:64px;
  max-width:1180px;
  margin:0 auto;
  padding:48px;
  border:1px solid var(--line);
  background:#fff;
}
.project-intake-copy h2{
  margin:24px 0 18px;
  font-size:clamp(30px,3.2vw,48px);
  line-height:1.08;
}
.project-intake-copy p{
  margin-bottom:28px;
  color:#444;
  font-size:17px;
  line-height:1.65;
}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.form-grid label{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.form-grid input,
.form-grid select,
.form-grid textarea{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  border:1px solid #b8b8b8;
  border-radius:0;
  background:#fff;
  color:var(--ink);
  font:400 15px/1.4 var(--sans);
  text-transform:none;
  letter-spacing:0;
}
.form-grid textarea{resize:vertical}
.form-grid input:focus-visible,
.form-grid select:focus-visible,
.form-grid textarea:focus-visible{
  outline:3px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset:2px;
  border-color:#007db3;
}
.form-span{grid-column:1/-1}
.form-actions{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:24px;
}
.form-privacy{
  max-width:720px;
  margin:16px 0 0;
  color:#555;
  font-size:13px;
  line-height:1.55;
}
.form-privacy a,
.form-status a{
  text-decoration:underline;
  text-underline-offset:3px;
}
.form-submit-circuit{
  min-height:54px;
  padding:10px 16px;
  border:var(--stroke) solid var(--ink);
  background:var(--bg);
  color:var(--ink);
  gap:14px;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.form-submit-circuit:hover,
.form-submit-circuit:focus-visible{
  background:var(--ink);
  color:var(--bg);
  outline:none;
}
.form-submit-circuit:focus-visible{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent);
}
.form-submit-circuit:active{transform:translateY(2px)}
.form-submit-circuit:disabled{
  cursor:wait;
  opacity:.62;
}
.form-submit-led-x{transition:opacity .25s ease}
.form-submit-circuit:focus-visible .push-btn-lever{transform:rotate(0deg)}
.form-submit-circuit:focus-visible .push-btn-lamp{
  fill:var(--accent);
  filter:drop-shadow(0 0 4px var(--accent-glow)) drop-shadow(0 0 10px var(--accent-glow));
}
.form-submit-circuit:hover .form-submit-led-x,
.form-submit-circuit:focus-visible .form-submit-led-x{opacity:0}
.form-status{
  max-width:280px;
  color:#666;
  font-size:13px;
  line-height:1.4;
}
.form-status.is-sending{color:#555}
.form-status.is-success{color:#147a38}
.form-status.is-error{color:#a30022}
.content-needed{
  padding-left:14px;
  border-left:3px solid #c40028;
  color:#a30022!important;
}
.content-needed::before{
  content:"TO COMPLETE";
  display:block;
  margin-bottom:5px;
  color:#c40028;
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
}
.content-media-needed{
  outline:3px solid #c40028;
  outline-offset:-3px;
}
.content-media-needed span,
.content-media-needed strong{
  color:#ff3b5c;
}
.content-media-needed span::before{
  content:"TO COMPLETE · ";
  font-weight:700;
}

.trust-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-top:48px;
}
.trust-card{
  border:1px solid #d7d7d7;
  background:#fff;
}
.project-media-placeholder--trust{
  min-height:260px;
}
.trust-card-body{padding:28px}
.trust-card h3{
  margin-bottom:12px;
  font-size:24px;
}
.trust-card p{
  margin:0;
  font-size:15px;
}
.trust-facts{
  list-style:none;
  margin:24px 0 0;
  padding:0;
}
.trust-facts li{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:15px 0;
  border-bottom:1px solid #e5e5e5;
  font-size:14px;
}
.trust-facts strong{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.trust-facts span{text-align:right}
.testimonial-placeholder{
  margin-top:20px;
  padding:32px;
  border:1px dashed #9b9b9b;
  background:#f8f8f8;
}
.testimonial-placeholder p{
  margin:18px 0 0;
  max-width:760px;
}

.legal-page{padding:100px 28px}
.legal-page-inner{max-width:860px;margin:0 auto}
.legal-page h1{
  margin:28px 0 24px;
  font-size:clamp(48px,7vw,86px);
  line-height:.98;
}
.legal-lead{
  max-width:720px;
  margin-bottom:72px;
  font-size:20px;
  line-height:1.6;
}
.legal-page section{
  padding:32px 0;
  border-top:1px solid #d6d6d6;
}
.legal-page h2{margin-bottom:14px;font-size:28px}
.legal-page p{margin:0 0 12px;font-size:16px;line-height:1.7}
.legal-note{
  margin-top:48px!important;
  padding:20px;
  background:#f3f3f3;
  font-size:13px!important;
}
.legal-footer{
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding:28px 40px;
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

@media (max-width:900px){
  .project-intake-inner{grid-template-columns:1fr;gap:40px;padding:36px}
  .trust-grid{grid-template-columns:1fr 1fr}
  .trust-card--facts{grid-column:1/-1}
}

@media (max-width:760px){
  .nav-a-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) 44px;
    gap:12px;
    padding:12px 20px;
  }
  .nav-a-logo{grid-column:1;grid-row:1}
  .nav-a-toggle{
    display:flex;
    grid-column:2;
    grid-row:1;
    justify-self:end;
  }
  .nav-a-links{
    grid-column:1/-1;
    grid-row:2;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    border-top:1px solid #d6d6d6;
  }
  .nav-a-link{
    display:flex;
    align-items:center;
    min-height:48px;
    padding:10px 2px;
    border-bottom:1px solid #e5e5e5;
  }
  .accent-control{
    display:block;
    border-bottom:1px solid #e5e5e5;
  }
  .accent-control__toggle{
    width:100%;
    border-bottom:0;
  }
  .accent-control__panel{
    position:static;
    width:100%;
    margin:0 0 14px;
    box-shadow:4px 4px 0 var(--ink);
  }
  .nav-a-cta{
    grid-column:1/-1;
    grid-row:3;
    min-height:48px;
    justify-content:center;
  }
  .nav-a.nav-ready:not(.is-open) .nav-a-links,
  .nav-a.nav-ready:not(.is-open) .nav-a-cta{display:none}
  .project-media-placeholder--hero{padding:24px}
  .projects-grid-heading{margin-bottom:32px}
  .project-intake{padding:0 20px 64px}
  .project-intake-inner{padding:28px 22px}
  .form-grid{grid-template-columns:1fr}
  .form-span{grid-column:auto}
  .form-actions{align-items:flex-start;flex-direction:column}
  .trust-grid{grid-template-columns:1fr}
  .trust-card--facts{grid-column:auto}
  .project-media-placeholder--trust{min-height:220px}
  .legal-page{padding:64px 24px}
  .legal-footer{flex-direction:column;padding:24px}
}

/* ===== HOMEPAGE COMPOSITION REFINEMENT =====
   The shell is widened by a restrained 120px on large displays. The extra
   room benefits the asymmetric hero and carousel while copy stays capped. */
:root{--waud-shell-max:1520px}
.hero-combo,
.cta-banner,
.nav-a-inner,
.foot,
.foot-bottom{
  max-width:var(--waud-shell-max);
}

#projects-grid{padding-top:36px}

@media (min-width:981px){
  .hero-combo.is-landing{
    padding-top:clamp(32px,5vh,52px);
    padding-bottom:18px;
  }
  .hero-combo.is-landing .bhero{
    min-height:clamp(520px,61vh,590px);
  }
}

/* A single low, wide venture feature in the same bordered, image-led family
   as the three opening cards. */
.photograb-feature{
  position:relative;
  max-width:var(--waud-shell-max);
  margin:0 auto;
  padding:24px 40px 0;
}
.photograb-feature__card{
  position:relative;
  display:block;
  min-height:clamp(280px,22vw,340px);
  overflow:hidden;
  border:var(--stroke) solid var(--line);
  background:var(--ink);
  color:#fff;
  transform:translateZ(0);
  transition:box-shadow .3s ease,transform .3s ease;
}
.photograb-feature__card:hover{
  box-shadow:10px 14px 0 -2px var(--line),0 0 0 1px var(--accent);
  transform:translateY(-2px);
}
.photograb-feature__card:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:4px;
}
.photograb-feature__image,
.photograb-feature__overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.photograb-feature__image{
  object-fit:cover;
  object-position:center 58%;
  filter:contrast(1.04) saturate(1.08);
  transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .4s ease;
}
.photograb-feature__card:hover .photograb-feature__image{
  transform:scale(1.018);
  filter:contrast(1.08) saturate(1.12);
}
.photograb-feature__overlay{
  background:
    linear-gradient(90deg,rgba(7,9,10,.94) 0%,rgba(7,9,10,.82) 36%,rgba(7,9,10,.28) 68%,rgba(7,9,10,.1) 100%),
    linear-gradient(0deg,rgba(7,9,10,.36),transparent 55%);
}
.photograb-feature__copy{
  position:relative;
  z-index:2;
  width:min(760px,68%);
  min-height:inherit;
  padding:38px 48px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
}
.photograb-feature__kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:12px;
  color:rgba(255,255,255,.78);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.photograb-feature__kicker .dot{
  width:7px;
  height:7px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 7px var(--accent-glow);
}
.photograb-feature__copy h2{
  color:#fff;
  font-size:clamp(36px,5vw,70px);
  line-height:.9;
  letter-spacing:-.04em;
}
.photograb-feature__description{
  max-width:650px;
  margin-top:15px;
  color:rgba(255,255,255,.86);
  font-size:clamp(14px,1.15vw,17px);
  line-height:1.5;
}
.photograb-feature__link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:20px;
  padding-bottom:5px;
  border-bottom:1px solid currentColor;
  color:#fff;
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.photograb-feature__link span{transition:transform .2s ease}
.photograb-feature__card:hover .photograb-feature__link span{transform:translateX(4px)}

@media (max-width:980px){
  #projects-grid{padding-top:32px}
  .photograb-feature{padding:20px 28px 0}
  .photograb-feature__card{min-height:360px}
  .photograb-feature__copy{
    width:min(700px,86%);
    padding:32px;
  }
}
@media (max-width:640px){
  #projects-grid{padding-top:28px}
  .photograb-feature{padding:12px 24px 0}
  .photograb-feature__card{min-height:390px}
  .photograb-feature__image{object-position:58% center}
  .photograb-feature__overlay{
    background:linear-gradient(0deg,rgba(7,9,10,.96) 0%,rgba(7,9,10,.76) 52%,rgba(7,9,10,.18) 100%);
  }
  .photograb-feature__copy{
    width:100%;
    padding:26px 22px;
  }
  .photograb-feature__description{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .photograb-feature__card,
  .photograb-feature__image,
  .photograb-feature__link span{transition:none}
}

/* ===== HOMEPAGE RAIL + POST-CAROUSEL REFINEMENT ===== */
.chero2--grid{
  --grid-slot-w:270px;
  --grid-track-pad:160px;
}
.chero2-grid-track{gap:28px}
.chero2-grid-card{
  left:-72px;
  right:-72px;
}
.chero2-grid-rail-line::after{
  width:clamp(46px,5vw,78px);
  height:2px;
  box-shadow:0 0 6px var(--accent-glow),0 0 12px var(--accent-glow);
}

.post-carousel-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  max-width:var(--waud-shell-max);
  margin:0 auto;
  padding:28px 40px 0;
}
.post-carousel-grid--single{grid-template-columns:minmax(0,1fr)}
.post-carousel-grid .photograb-feature,
.post-carousel-grid .cta-banner{
  max-width:none;
  margin:0;
  padding:0;
}
.post-carousel-grid .photograb-feature__card,
.post-carousel-grid .cta-inner{
  min-height:clamp(390px,34vw,500px);
  height:100%;
}
.post-carousel-grid .photograb-feature__copy{
  width:100%;
  padding:38px 40px;
  background:linear-gradient(0deg,rgba(7,9,10,.88) 0%,rgba(7,9,10,.35) 68%,transparent 100%);
}
.post-carousel-grid .photograb-feature__copy h2{
  font-size:clamp(36px,4.6vw,64px);
}
.post-carousel-grid .photograb-feature__description{max-width:560px}
.post-carousel-grid .cta-inner{
  position:relative;
  grid-template-columns:1fr;
  align-content:end;
  padding:38px 40px;
  transition:box-shadow .3s ease,transform .3s ease;
}
.post-carousel-grid .cta-inner:hover{
  box-shadow:10px 14px 0 -2px var(--line),0 0 0 1px var(--accent);
  transform:translateY(-2px);
}
.post-carousel-grid .cta-inner > div:first-child{
  position:relative;
  z-index:2;
  align-self:end;
}
.post-carousel-grid .cta-inner h2{
  max-width:520px;
  font-size:clamp(36px,4.6vw,64px);
}
.post-carousel-grid .cta-inner p{
  max-width:460px;
  margin-top:16px;
  color:rgba(255,255,255,.76);
  font-size:16px;
  line-height:1.5;
}
.post-carousel-grid .cta-inner .btn{margin-top:26px}
.post-carousel-grid .cta-side{
  position:absolute;
  right:20px;
  top:28px;
  width:min(54%,330px);
  color:var(--accent);
  opacity:.6;
  pointer-events:none;
}

.client-marquee{
  max-width:var(--waud-shell-max);
  margin:0 auto;
  padding:88px 40px 40px;
}
.client-marquee__heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:32px;
  padding-bottom:24px;
}
.client-marquee__heading h2{
  max-width:560px;
  font-size:clamp(28px,3vw,44px);
  line-height:1;
  text-align:right;
}
.client-marquee__viewport{
  overflow:hidden;
  border-block:1px solid #d9d9d9;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.client-marquee__track{
  display:flex;
  width:max-content;
  animation:client-marquee 38s linear infinite;
}
.client-marquee__group{
  display:flex;
  align-items:center;
  gap:clamp(38px,5vw,86px);
  padding:30px clamp(19px,2.5vw,43px);
  list-style:none;
}
.client-logo{
  flex:0 0 auto;
  color:#777;
  filter:grayscale(1);
  font-size:clamp(18px,2vw,30px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.04em;
  white-space:nowrap;
  opacity:.72;
  transition:color .25s ease,opacity .25s ease,transform .25s ease;
}
.client-logo:hover{color:#111;opacity:1;transform:translateY(-2px)}
.client-logo--f1{font-style:italic;letter-spacing:-.08em}
.client-logo--heineken{text-transform:uppercase;letter-spacing:.02em}
.client-logo--pepsi{text-transform:uppercase;font-weight:800}
.client-logo--tesa{padding:7px 12px;border:2px solid currentColor;border-radius:999px;text-transform:lowercase}
.client-logo--pompidou{font-family:var(--mono);font-size:clamp(15px,1.5vw,22px);letter-spacing:-.08em}
.client-logo--disaronno{text-transform:uppercase;letter-spacing:.08em}
.client-logo--net5{padding:6px 8px;border:2px solid currentColor}
.client-logo--stelz{letter-spacing:.12em}
.client-logo--plastic{max-width:154px;font-size:clamp(14px,1.4vw,20px);line-height:.88;white-space:normal}
@keyframes client-marquee{to{transform:translateX(-50%)}}

.foot .logo-node{display:none}
.foot-bottom .foot-legal{
  margin-left:auto;
  margin-right:28px;
}
.foot-bottom .foot-legal a:hover{color:var(--ink)}

@media (max-width:1100px){
  .chero2--grid{
    --grid-slot-w:240px;
    --grid-track-pad:138px;
  }
  .chero2-grid-card{left:-62px;right:-62px}
}
@media (max-width:820px){
  .post-carousel-grid{
    grid-template-columns:1fr;
    padding-inline:28px;
  }
  .post-carousel-grid .photograb-feature__card,
  .post-carousel-grid .cta-inner{min-height:390px}
  .client-marquee{padding:68px 28px 32px}
  .client-marquee__heading{
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
  }
  .client-marquee__heading h2{text-align:left}
}
@media (max-width:760px){
  .chero2--grid{
    --grid-slot-w:min(88vw,372px);
    --grid-track-pad:32px;
  }
  .chero2-grid-track{gap:18px}
  .post-carousel-grid{gap:16px;padding:18px 24px 0}
  .post-carousel-grid .photograb-feature__copy,
  .post-carousel-grid .cta-inner{padding:28px 24px}
  .post-carousel-grid .photograb-feature__card,
  .post-carousel-grid .cta-inner{min-height:360px}
  .post-carousel-grid .cta-side{width:70%;right:4px;top:18px}
  .client-marquee{padding:58px 24px 28px}
  .client-marquee__group{padding-block:24px}
  .foot-bottom{flex-wrap:wrap;gap:14px}
  .foot-bottom .foot-legal{order:3;width:100%;margin:0}
}
@media (prefers-reduced-motion:reduce){
  .client-marquee__track{animation:none}
  .client-marquee__viewport{overflow-x:auto}
}

/* ============================================================
   2026-07-27 ACCESSIBILITY + MOBILE REPAIR
   ============================================================ */

.skip-link{
  position:fixed;
  top:12px;
  left:12px;
  z-index:100000;
  padding:12px 16px;
  border:2px solid var(--ink);
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  transform:translateY(-160%);
  transition:transform .18s ease;
}
.skip-link:focus{transform:translateY(0)}
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

:where(
  a,
  button,
  input,
  select,
  textarea,
  [tabindex]:not([tabindex="-1"])
):focus-visible{
  outline:3px solid var(--accent-text);
  outline-offset:3px;
}
.nav-a-link--active,
.nav-a-link[aria-current="page"]{color:var(--accent-text)}

.bhero-feature-media{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
}

.form-field-error{
  display:block;
  margin-top:7px;
  color:#a30022;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.4;
}
.form-grid [aria-invalid="true"]{
  border-color:#a30022;
  box-shadow:0 0 0 1px #a30022;
}

.project-lightbox-close,
.project-lightbox-nav{
  min-width:44px;
  min-height:44px;
}
.project-lightbox-close:focus-visible,
.project-lightbox-nav:focus-visible{
  outline-color:#fff;
  box-shadow:0 0 0 3px var(--accent);
}

@media (max-width:760px){
  /* Compact single-row project browser: stable swipe, snap and no page overflow. */
  .chero2--grid{
    --grid-slot-w:min(82vw,344px);
    --grid-card-h:260px;
    --grid-rail-h:68px;
    --grid-track-pad:24px;
  }
  .chero2-grid-carousel-area{
    height:calc(var(--grid-card-h) + var(--grid-rail-h) + 16px);
    overflow:hidden;
    contain:layout paint;
  }
  .chero2-grid-track{
    height:100%;
    gap:16px;
    padding:var(--grid-rail-h) var(--grid-track-pad) 16px;
    align-items:flex-start;
    scroll-padding-inline:var(--grid-track-pad);
    touch-action:pan-x pan-y;
    overscroll-behavior-inline:contain;
  }
  .chero2-grid-slot{
    width:var(--grid-slot-w);
    height:var(--grid-card-h);
  }
  .chero2-grid-slot--up .chero2-grid-card,
  .chero2-grid-slot--down .chero2-grid-card{
    top:0;
    bottom:auto;
  }
  .chero2-grid-card{
    left:0;
    right:0;
    user-select:none;
    -webkit-user-drag:none;
  }
  .chero2-grid-card img,
  .chero2-grid-card video{-webkit-user-drag:none}
  .chero2-grid-slot .chero2-led,
  .chero2-grid-led-line{display:none}
  .chero2-grid-rail,
  .chero2-grid-diode{
    top:32px;
  }
  .chero2-grid-diode{
    width:44px;
    height:44px;
  }
  .chero2-grid-diode--prev{left:20px}
  .chero2-grid-diode--next{right:20px}
  .chero2-grid-diode-icon{width:44px;height:26px}
  .chero2-grid-card .chero2-cat,
  .chero2-grid-card .card-switch-label,
  .chero2-grid-card .chero2-credit{font-size:11px}

  /* One reachable row of 44px filter targets instead of a tall wrapped stack. */
  .werk-filter-rail{display:block}
  .werk-filter-chips{
    display:flex;
    flex-wrap:nowrap;
    gap:8px;
    overflow-x:auto;
    padding:4px 24px 10px;
    margin-inline:-24px;
    scroll-padding-inline:24px;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%);
  }
  .werk-filter-chips::-webkit-scrollbar{display:none}
  .werk-chip{
    flex:0 0 auto;
    min-height:44px;
    padding:10px 16px 10px 14px;
  }

  /* Services index behaves like an intentional horizontal control. */
  .services-page .services-index{position:relative}
  .services-page .services-index-inner{position:relative}
  .services-page .services-index ul{
    gap:8px;
    scroll-snap-type:x proximity;
    scroll-padding-inline:4px;
    padding:10px 0 28px;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 38px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 38px),transparent 100%);
  }
  .services-page .services-index li{scroll-snap-align:start}
  .services-page .services-index li a{
    display:flex;
    min-height:44px;
    align-items:center;
    padding:9px 12px;
    font-size:11px;
  }
  .services-page .services-index-inner::after{
    content:"Swipe services →";
    position:absolute;
    right:0;
    bottom:7px;
    color:var(--muted);
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.12em;
    text-transform:uppercase;
    pointer-events:none;
  }

  .form-grid input,
  .form-grid select,
  .form-grid textarea{font-size:16px}
  .project-lightbox-close{min-height:44px;font-size:11px}
  .project-lightbox-nav{width:44px;min-width:44px}
  .project-lightbox-meta{font-size:12px;line-height:1.35}
  #project-lightbox-caption{
    max-width:68vw;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .project-gallery-expand,
  .chero2-cat,
  .chero2-credit{font-size:11px}
  .photograb-feature__card{min-height:320px}
}

@media (max-width:390px){
  .hero-combo.is-landing{
    padding:24px 16px 12px;
  }
  .hero-combo.is-landing .bhero-feature{min-height:420px}
  .hero-combo.is-landing .bhero-feature-overlay{padding:26px 20px}
  .hero-combo.is-landing .bhero-feature-overlay h1{
    margin-bottom:14px;
    font-size:34px;
  }
  .hero-combo.is-landing .bhero-feature-overlay .lead{
    margin-bottom:18px;
    font-size:14px;
    line-height:1.45;
  }
  .hero-combo.is-landing .hero-ctas{gap:10px}
}

@media (prefers-reduced-motion:reduce){
  .skip-link{transition:none}
}

/* Final mobile rail sizing: intentionally wider cards with a visible gap. */
@media (max-width:760px){
  .chero2--grid{
    --grid-slot-w:min(88vw,372px);
    --grid-track-pad:32px;
  }
  .chero2-grid-track{gap:18px}
}

/* Carousel schematic: all circuit lines are exactly 1px heavier. */
#projects-grid .chero2-grid-rail-line{
  height:calc(var(--stroke) + 1px);
}
#projects-grid .chero2-grid-rail-line::after{height:3px}
#projects-grid .chero2-grid-led-line{
  width:calc(var(--stroke) + 1px);
}
#projects-grid .chero2-led{border-width:2.5px}
#projects-grid .card-switch-line{height:2.5px}
#projects-grid svg [stroke-width="1"]{stroke-width:2}
#projects-grid svg [stroke-width="1.2"]{stroke-width:2.2}
#projects-grid svg [stroke-width="1.3"]{stroke-width:2.3}
#projects-grid svg [stroke-width="1.5"]{stroke-width:2.5}
#projects-grid svg [stroke-width="2"]{stroke-width:3}
/* === 2026-07-31 audit implementation === */

/* Spectrum stays playful; copy on light surfaces uses its contrast-safe companion. */
.studio-hero .accent,
.contact-hero .accent,
.services-page .studio-hero .accent,
.section-head .accent{color:var(--accent-text)}
.cta-banner h2 span,
.cta-banner .accent{color:var(--accent)}

/* SERVICES — a coherent project journey backed by real work. */
.services-journey-hero{padding-bottom:34px}
.services-journey-hero .lead{max-width:760px}
.service-route-nav{max-width:1400px;margin:0 auto;padding:0 40px 34px}
.service-route-nav ol{
  list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:1px solid var(--grid);border-left:1px solid var(--grid);
}
.service-route-nav li{min-width:0}
.service-route-nav a{
  min-height:74px;display:flex;align-items:center;gap:12px;padding:14px 16px;
  border-right:1px solid var(--grid);border-bottom:1px solid var(--grid);
  font-family:var(--mono);font-size:10px;line-height:1.35;letter-spacing:.12em;text-transform:uppercase;
  transition:background .2s ease,color .2s ease;
}
.service-route-nav a:hover,
.service-route-nav a:focus-visible{background:var(--ink);color:var(--bg)}
.service-route-nav a span{color:var(--accent-text);font-weight:700}
.service-route-nav a:hover span,
.service-route-nav a:focus-visible span{color:var(--accent)}
.service-journey{max-width:1400px;margin:0 auto;padding:0 40px}
.service-phase{
  min-height:510px;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);
  border:1px solid var(--grid);border-bottom:0;scroll-margin-top:96px;background:var(--bg);
}
.service-phase:last-child{border-bottom:1px solid var(--grid)}
.service-phase--reverse{grid-template-columns:minmax(360px,.88fr) minmax(0,1.12fr)}
.service-phase--reverse .service-phase-media{order:2}
.service-phase-media{position:relative;min-height:510px;overflow:hidden;background:var(--ink)}
.service-phase-media::after{
  content:"";position:absolute;inset:auto 0 0;height:42%;
  background:linear-gradient(to top,rgba(0,0,0,.8),transparent);pointer-events:none;
}
.service-phase-media img{
  width:100%;height:100%;display:block;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.service-phase-media:hover img,
.service-phase-media:focus-visible img{transform:scale(1.025)}
.service-phase-media span{
  position:absolute;z-index:1;left:24px;bottom:22px;color:#fff;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
}
.service-phase-body{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:54px clamp(32px,4vw,68px);overflow:hidden;
}
.service-phase-body::before{
  content:"";position:absolute;top:30px;left:0;width:clamp(70px,10vw,150px);height:2px;
  background:linear-gradient(90deg,var(--accent),var(--grid));
}
.service-phase-index{
  position:absolute;top:18px;right:24px;font-family:var(--mono);
  font-size:clamp(46px,5vw,80px);line-height:1;color:var(--accent-text);opacity:.13;
}
.service-phase h2{
  max-width:520px;margin-top:14px;font-size:clamp(34px,4vw,62px);
  line-height:.98;letter-spacing:-.035em;
}
.service-phase .lead{
  max-width:560px;margin-top:22px;font-size:clamp(17px,1.45vw,21px);line-height:1.48;
}
.service-phase-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.service-phase-tags li{
  padding:7px 10px;border:1px solid var(--grid);font-family:var(--mono);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
}
.service-phase-cases{margin-top:24px;color:#444;font-size:14px;line-height:1.5}
.service-phase-cases a{color:var(--ink);border-bottom:1px solid currentColor}
.service-phase-cases a:hover{color:var(--accent-text)}
.service-outcomes{
  max-width:1400px;margin:38px auto 0;padding:40px;display:flex;align-items:flex-end;
  justify-content:space-between;gap:32px;border:1px solid var(--grid);
}
.service-outcomes h2{max-width:880px;margin-top:12px;font-size:clamp(28px,3.6vw,52px);line-height:1}
.cta-copy{margin-top:16px;opacity:.75;max-width:440px;font-size:16px;line-height:1.5}
.cta-copy + .btn{margin-top:26px}

/* STUDIO — trust before capability detail. */
.studio-hero--compact{padding-bottom:46px}
.studio-hero--compact .lead{max-width:760px}
.studio-proof{
  max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--grid);border-left:1px solid var(--grid);
}
.studio-proof div{
  min-height:126px;display:flex;flex-direction:column;justify-content:center;padding:22px;
  border-right:1px solid var(--grid);border-bottom:1px solid var(--grid);
}
.studio-proof strong{font-size:clamp(22px,2.4vw,34px);line-height:1}
.studio-proof span{
  margin-top:9px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.studio-section--compact{padding-top:72px;padding-bottom:72px}
.studio-section--compact h2{max-width:800px}
.studio-section--compact > .studio-section-inner > p{max-width:700px}
.studio-evidence-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:34px}
.studio-process-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:34px;
  border-top:1px solid var(--grid);border-left:1px solid var(--grid);
}
.studio-process-grid article{
  min-height:220px;padding:28px;border-right:1px solid var(--grid);border-bottom:1px solid var(--grid);
}
.studio-process-grid article > span{font-family:var(--mono);font-size:11px;color:var(--accent-text)}
.studio-process-grid h3{margin-top:44px;font-size:28px}
.studio-process-grid p{margin-top:12px;font-size:15px;line-height:1.55;color:#444}
.studio-voice blockquote{
  margin-top:26px;max-width:900px;padding:32px;border:1px solid #c40028;
  color:#a30022;font-size:clamp(22px,2.6vw,36px);line-height:1.25;
}

/* CONTACT — contact only. */
.contact-hero--compact{padding-bottom:42px}
.contact-hero--compact .lead{max-width:660px}
.contact-direct{
  max-width:1080px;margin:0 auto 54px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--grid);border-left:1px solid var(--grid);
}
.contact-direct > *{
  min-height:132px;display:flex;flex-direction:column;justify-content:center;padding:22px 26px;
  border-right:1px solid var(--grid);border-bottom:1px solid var(--grid);
}
.contact-direct span{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.contact-direct strong{margin-top:10px;font-size:clamp(19px,2vw,27px)}
.contact-direct small{margin-top:7px;color:var(--muted)}
.contact-direct a:hover strong{color:var(--accent-text)}
.contact-hero--compact + .contact-direct + .project-intake{padding-top:0}

/* Comfortable targets without changing the compact WAUD look. */
@media (pointer:coarse), (max-width:1024px){
  .nav-a-link,.nav-a-cta,.service-phase-cases a,.btn-subtle,footer a{
    min-height:44px;display:inline-flex;align-items:center;
  }
}

@media (max-width:900px){
  .service-route-nav ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-route-nav li:last-child{grid-column:1/-1}
  .service-phase,.service-phase--reverse{grid-template-columns:1fr;min-height:0}
  .service-phase--reverse .service-phase-media{order:0}
  .service-phase-media{min-height:0;aspect-ratio:16/10}
  .service-phase-body{min-height:410px}
  .service-outcomes{align-items:flex-start;flex-direction:column}
  .studio-proof{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:640px){
  .services-journey-hero{padding:40px 24px 28px}
  .service-route-nav{padding:0 24px 24px}
  .service-route-nav a{min-height:58px;padding:11px 12px;font-size:9px}
  .service-journey{padding:0 24px}
  .service-phase-media{aspect-ratio:4/3}
  .service-phase-body{min-height:0;padding:42px 24px 38px}
  .service-phase-body::before{top:22px;width:72px}
  .service-phase-index{top:18px;font-size:46px}
  .service-phase h2{font-size:36px}
  .service-phase .lead{font-size:17px}
  .service-phase-cases a{padding:10px 0}
  .service-outcomes{margin:24px 24px 0;padding:30px 24px}
  .services-page .cta-banner{padding:0 24px}
  .studio-proof{margin:0 24px;grid-template-columns:1fr 1fr}
  .studio-proof div{min-height:108px;padding:16px}
  .studio-evidence-grid,.studio-process-grid{grid-template-columns:1fr}
  .studio-section--compact{padding:56px 24px}
  .studio-process-grid article{min-height:180px}
  .studio-process-grid h3{margin-top:28px}
  .contact-direct{margin:0 24px 40px;grid-template-columns:1fr}
  .contact-direct > *{min-height:104px}
  .contact-hero--compact + .contact-direct + .project-intake{padding-top:0}
}
/* Final interaction sizing pass. */
.nav-a-link,.nav-a-cta{
  min-height:40px;
  display:inline-flex;
  align-items:center;
}
.service-phase-cases a,
footer a,
.form-privacy a{
  min-height:32px;
  display:inline-flex;
  align-items:center;
}
@media (pointer:coarse), (max-width:1024px){
  .form-privacy a{min-height:44px}
}

/* === 2026-07-31 feedback implementation === */

/* One shared shell: the homepage is the source of truth. */
:root{--waud-shell-max:1520px}
.nav-a-inner,
.foot,
.foot-bottom,
.hero-combo,
.werk-filter-section,
.werk-grid-section,
.project-body,
.project-gallery-section,
.project-related-section,
.project-back-work,
.studio-hero,
.studio-section-inner,
.contact-hero,
.contact-direct,
.project-intake-inner,
.service-route-nav,
.service-journey,
.service-outcomes{
  width:100%;
  max-width:var(--waud-shell-max);
  margin-inline:auto;
}
.nav-concept .nav-a-inner{max-width:var(--waud-shell-max)}

/* Homepage: rotating project hero and one consistent circuit-button language. */
.bhero-feature-media img{transition:opacity .42s ease,transform .75s cubic-bezier(.2,.8,.2,1)}
.bhero-feature.is-project-switching .bhero-feature-media img{opacity:.18;transform:scale(1.018)}
.hero-combo.is-landing .push-btn{color:#fff}
.hero-combo.is-landing .push-btn:hover{color:var(--accent)}
.post-card-action,
.post-card-push{color:#fff}
.post-card-action{margin-top:22px;pointer-events:none}
.post-card-action .card-switch-track{width:130px}
.photograb-feature__card:hover .post-card-action .card-switch-lever,
.photograb-feature__card:focus-visible .post-card-action .card-switch-lever{transform:rotate(0deg)}
.photograb-feature__card:hover .post-card-action .card-led,
.photograb-feature__card:focus-visible .post-card-action .card-led{
  fill:var(--accent);
  filter:drop-shadow(0 0 4px var(--accent-glow));
}
.photograb-feature__card:hover .post-card-action .card-led-x,
.photograb-feature__card:focus-visible .post-card-action .card-led-x{opacity:0}
.post-card-push{margin-top:26px}
.post-carousel-grid .cta-inner .post-card-push{margin-top:26px}

/* Circuit drawings use the same visual weight everywhere. */
:where(.push-btn-svg,.card-switch-svg,.chero2-grid-diode-icon) [stroke-width="1"]{stroke-width:1.5}
:where(.push-btn-svg,.card-switch-svg,.chero2-grid-diode-icon) [stroke-width="1.2"]{stroke-width:1.7}
:where(.push-btn-svg,.card-switch-svg,.chero2-grid-diode-icon) [stroke-width="1.3"]{stroke-width:1.8}
:where(.push-btn-svg,.card-switch-svg,.chero2-grid-diode-icon) [stroke-width="1.5"]{stroke-width:2}
:where(.push-btn-svg,.card-switch-svg,.chero2-grid-diode-icon) [stroke-width="1.8"]{stroke-width:2.2}
:where(.push-btn-svg,.card-switch-svg,.chero2-grid-diode-icon) [stroke-width="2"]{stroke-width:2.4}

/* Homepage rail: wider cards, clear gaps and a vertical drop that matches the rail. */
.chero2--grid{--grid-slot-w:286px;--grid-track-pad:176px}
.chero2-grid-track{gap:34px}
.chero2-grid-card{left:-86px;right:-86px}
#projects-grid .chero2-grid-led-line{width:3.5px}
#projects-grid .chero2-grid-rail-line{height:2.5px}
#projects-grid .chero2-grid-rail-line::after{height:3px}

/* Client logo movement now sits directly below the carousel; the two feature cards follow together. */
.client-marquee{padding-top:54px}
.post-carousel-grid{padding-top:28px}
.post-carousel-grid .photograb-feature__card,
.post-carousel-grid .cta-inner{min-height:clamp(410px,34vw,520px)}

/* Work: remove the unexplained gap and let the archive form a loose, dense mosaic. */
.werk-hero{padding-bottom:0}
.werk-filter-section{padding-top:0}
.werk-filter-rail{padding-top:18px}
.werk-grid{grid-auto-flow:dense;grid-auto-rows:126px;gap:22px}
.werk-tile[data-size="small"]{grid-column:span 4;grid-row:span 2}
.werk-tile[data-size="hwide"]{grid-column:span 5;grid-row:span 2}
.werk-tile[data-size="wide"]{grid-column:span 7;grid-row:span 2}
.werk-tile[data-size="large"]{grid-column:span 8;grid-row:span 3}
.werk-tile[data-size="tall"]{grid-column:span 4;grid-row:span 4}

/* Project detail: full-bleed hero, homepage-aligned copy and silent gallery openers. */
#phero-concepts{border-bottom:var(--stroke) solid var(--line)}
.phero-a-combo{width:100%;max-width:none;margin:0;padding:0}
.phero-a-feature{min-height:clamp(540px,70vh,780px);border-inline:0}
.phero-a-overlay{
  min-height:inherit;
  padding:56px max(40px,calc((100vw - var(--waud-shell-max))/2 + 40px));
}
.phero-back-row{left:max(40px,calc((100vw - var(--waud-shell-max))/2 + 40px))}
.project-gallery-expand{display:none!important}
.project-gallery-item{cursor:zoom-in}
.project-back-work{padding:38px 40px 70px}
.project-back-work-link{width:max-content}

/* Studio: a shorter page with one strong founder story instead of proof/process blocks. */
.studio-hero--compact{padding:72px 40px 42px}
.studio-hero-inner{max-width:980px}
.studio-section--compact{padding:64px 40px}
.studio-founder-grid{
  display:grid;
  grid-template-columns:minmax(320px,.8fr) minmax(0,1.2fr);
  gap:42px;
  align-items:stretch;
  margin-top:34px;
}
.studio-founder-grid .project-media-placeholder{min-height:520px}
.studio-founder-copy{padding:8px 0}
.studio-founder-copy h2{max-width:760px;margin:0 0 26px;font-size:clamp(36px,4vw,64px);line-height:.98}
.studio-founder-copy p{max-width:720px;margin-top:18px;font-size:clamp(16px,1.35vw,20px);line-height:1.58}
.studio-workshop-card{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  gap:0;
  margin-top:28px;
  border:1px solid var(--line);
}
.studio-workshop-card .project-media-placeholder{min-height:320px;border:0;border-right:1px solid var(--line)}
.studio-workshop-card>div:last-child{display:flex;flex-direction:column;justify-content:flex-end;padding:34px}
.studio-workshop-card h3{margin-top:18px;font-size:clamp(28px,3vw,46px);line-height:1}
.studio-workshop-card p{margin-top:16px;font-size:16px;line-height:1.55}
.studio-voice{padding-top:22px}

/* Contact: less empty height, one alignment system and a quicker route to the form. */
.contact-hero--compact{padding:68px 40px 26px}
.contact-hero-inner{max-width:900px}
.contact-direct{margin-bottom:26px;padding-inline:40px}
.project-intake{padding:0 40px 76px}
.project-intake-inner{
  grid-template-columns:minmax(280px,.62fr) minmax(0,1.38fr);
  gap:42px;
  padding:40px;
}
.form-submit-circuit:hover,
.form-submit-circuit:focus-visible{background:#000;color:#fff}
.form-submit-circuit:hover .push-btn-svg,
.form-submit-circuit:focus-visible .push-btn-svg{color:#fff}
.form-submit-circuit:hover .push-btn-lamp,
.form-submit-circuit:focus-visible .push-btn-lamp{fill:#fff;stroke:#fff;filter:none}

/* Entrance: larger imagery drawn slightly inward and clearer vertical rhythm. */
.site-intro__project--1{left:-1vw;top:1vh;width:47vw;height:50vh}
.site-intro__project--2{right:-2vw;top:-5vh;width:44vw;height:54vh}
.site-intro__project--3{left:9vw;bottom:-10vh;width:34vw;height:55vh}
.site-intro__project--4{right:7vw;bottom:-11vh;width:37vw;height:58vh}
.site-intro__project--5{left:34vw;top:-7vh;width:33vw;height:42vh}
.site-intro__project--6{right:33vw;bottom:2vh;width:24vw;height:39vh}
.site-intro__brand{margin-bottom:clamp(34px,5vh,58px)}
.site-intro__copy{width:min(1020px,100%)}
.site-intro__copy h2{max-width:1020px}
.site-intro__description{max-width:820px;margin-top:28px}
.site-intro__enter{margin-top:clamp(42px,6vh,68px)}

@media (max-width:1100px){
  .chero2--grid{--grid-slot-w:252px;--grid-track-pad:148px}
  .chero2-grid-card{left:-68px;right:-68px}
  .werk-grid{grid-template-columns:repeat(8,1fr)}
  .werk-tile[data-size="hwide"]{grid-column:span 4}
  .werk-tile[data-size="wide"],.werk-tile[data-size="large"]{grid-column:span 8}
  .studio-founder-grid{grid-template-columns:1fr 1.15fr}
}
@media (max-width:900px){
  .studio-founder-grid,.studio-workshop-card{grid-template-columns:1fr}
  .studio-founder-grid .project-media-placeholder{min-height:420px}
  .studio-workshop-card .project-media-placeholder{border-right:0;border-bottom:1px solid var(--line)}
  .project-intake-inner{grid-template-columns:1fr;gap:28px}
}
@media (max-width:760px){
  .nav-a-inner,.foot,.foot-bottom{padding-inline:24px}
  .hero-combo,.werk-filter-section,.werk-grid-section,.project-body,.project-gallery-section,.project-related-section,.project-back-work,.studio-hero,.studio-section-inner,.contact-hero,.contact-direct,.project-intake{padding-inline:24px}
  .chero2--grid{--grid-slot-w:min(90vw,382px);--grid-track-pad:24px}
  .chero2-grid-card{left:0;right:0}
  .client-marquee{padding-top:44px}
  .post-carousel-grid{grid-template-columns:1fr;padding-inline:24px}
  .werk-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:16px}
  .werk-tile,.werk-tile[data-size]{grid-column:1!important;grid-row:auto!important;aspect-ratio:4/3}
  .werk-tile[data-size="tall"]{aspect-ratio:3/4}
  .phero-a-feature{min-height:560px}
  .phero-a-overlay{padding:42px 24px}
  .phero-back-row{left:24px}
  .studio-hero--compact,.contact-hero--compact{padding-top:54px;padding-bottom:30px}
  .studio-section--compact{padding-block:48px}
  .studio-founder-grid .project-media-placeholder{min-height:360px}
  .studio-founder-copy h2{font-size:38px}
  .studio-workshop-card>div:last-child{padding:26px}
  .contact-direct{margin-inline:auto;padding-inline:24px}
  .project-intake{padding-bottom:60px}
  .project-intake-inner{padding:28px 22px}
  .site-intro__brand{margin-bottom:30px}
  .site-intro__description{margin-top:22px}
  .site-intro__enter{margin-top:34px}
}

/* Entrance description width correction */
.site-intro__copy{width:min(1120px,100%)}
.site-intro__copy h2{max-width:1040px}
.site-intro__description{
  width:min(1080px,calc(100vw - 32px));
  max-width:none;
}
@media (max-width:900px) and (min-width:621px){
  .site-intro__panel{padding-inline:14px}
  .site-intro__description{
    width:calc(100vw - 28px);
    font-size:14px;
  }
}

/* === 2026-07-31 interaction and layout correction === */

/* Dark-card circuit buttons: the inactive lamp is transparent, never white. */
.hero-combo.is-landing .push-btn-svg,
.post-card-action .push-btn-svg,
.post-card-push .push-btn-svg{color:#fff}
.hero-combo.is-landing .push-btn-lamp,
.post-card-action .push-btn-lamp,
.post-card-push .push-btn-lamp{fill:transparent}
.photograb-feature__card:hover .post-card-action .push-btn-lever,
.photograb-feature__card:focus-visible .post-card-action .push-btn-lever{transform:rotate(0deg)}
.photograb-feature__card:hover .post-card-action .push-btn-lamp,
.photograb-feature__card:focus-visible .post-card-action .push-btn-lamp,
.homepage-cta-card .post-card-push:hover .push-btn-lamp,
.homepage-cta-card .post-card-push:focus-visible .push-btn-lamp{
  fill:var(--accent);
  filter:drop-shadow(0 0 4px var(--accent-glow)) drop-shadow(0 0 10px var(--accent-glow));
}
.photograb-feature__card:hover .post-card-action .push-btn-lamp-x,
.photograb-feature__card:focus-visible .post-card-action .push-btn-lamp-x{opacity:0}
.post-card-action{display:inline-flex}
.post-card-push:hover,.post-card-push:focus-visible{color:var(--accent)}

/* Keep the wider carousel cards, but bring their slots closer together. */
.chero2-grid-track{gap:12px}
.chero2-grid-diode-icon--default{opacity:1!important}
.chero2-grid-diode-icon--battery,
.chero2-grid-diode-icon--gnd{display:none!important}

/* Both post-carousel cards tilt and use real project imagery. */
.photograb-feature__card,
.homepage-cta-card .cta-inner{
  transform-style:preserve-3d;
  will-change:transform;
}
.homepage-cta-card .cta-inner{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#090a0b;
}
.homepage-cta-bg,
.homepage-cta-overlay{position:absolute;inset:0;pointer-events:none}
.homepage-cta-bg{z-index:0;overflow:hidden}
.homepage-cta-bg img{
  position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;
  opacity:0;filter:saturate(.92) contrast(1.08);transition:opacity 1.25s ease;
}
.homepage-cta-bg img.is-active{opacity:1}
.homepage-cta-overlay{
  z-index:1;
  background:
    linear-gradient(0deg,rgba(5,6,7,.96) 0%,rgba(5,6,7,.72) 58%,rgba(5,6,7,.28) 100%),
    linear-gradient(90deg,rgba(5,6,7,.58),transparent 75%);
}
.homepage-cta-card .cta-inner>div:not(.homepage-cta-bg),
.homepage-cta-card .cta-inner>.homepage-cta-overlay~*{position:relative;z-index:2}
.homepage-cta-card .cta-side{z-index:2}

/* Services: four compact, equal-height capability cards. */
.service-route-nav ol{grid-template-columns:repeat(4,minmax(0,1fr))}
.service-journey--compact .service-phase,
.service-journey--compact .service-phase-media{height:390px;min-height:390px}
.service-journey--compact .service-phase{grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr)}
.service-journey--compact .service-phase--reverse{grid-template-columns:minmax(380px,.92fr) minmax(0,1.08fr)}
.service-journey--compact .service-phase-body{padding:38px clamp(30px,3.4vw,54px)}
.service-journey--compact .service-phase-body::before{top:22px}
.service-journey--compact .service-phase-index{top:14px;font-size:58px}
.service-journey--compact .service-phase h2{margin-top:10px;font-size:clamp(34px,3.4vw,50px)}
.service-journey--compact .service-phase .lead{margin-top:15px;font-size:17px;line-height:1.45}
.service-journey--compact .service-phase-tags{margin-top:18px}
.service-journey--compact .service-phase-cases{margin-top:18px;font-size:13px}
.service-phase-cases strong{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}

/* Studio follows one shell and one clear sequence: Wiebe, quotes, workshop. */
.studio-hero,
.studio-section-inner{max-width:var(--waud-shell-max)}
.studio-section--compact{padding-inline:40px}
.studio-section--compact>.studio-section-inner{width:100%}
.studio-founder-grid{grid-template-columns:minmax(340px,.82fr) minmax(0,1.18fr)}
.studio-quotes-section{padding-top:28px;background:#f7f7f7}
.studio-quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:32px}
.studio-quotes blockquote{
  min-height:250px;margin:0;padding:32px;display:flex;flex-direction:column;justify-content:flex-end;
  border:1px solid #c40028;color:#a30022;font-size:clamp(20px,2.2vw,32px);line-height:1.28;
}
.studio-workshop-section{padding-top:56px}
.studio-workshop-card{margin-top:26px}
.studio-workshop-card>div:last-child h2{max-width:620px;font-size:clamp(34px,3.5vw,54px);line-height:1}

/* Contact details form a vertical rail beside the intake form. */
.contact-hero{max-width:var(--waud-shell-max)}
.contact-layout{
  width:100%;max-width:var(--waud-shell-max);margin:0 auto;padding:0 40px 80px;
  display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:24px;align-items:stretch;
}
.contact-layout .contact-direct{
  width:100%;margin:0;padding:0;display:flex;flex-direction:column;
  border:1px solid var(--grid);border-bottom:0;
}
.contact-layout .contact-direct>*{
  flex:1;min-height:0;padding:26px 24px;border:0;border-bottom:1px solid var(--grid);
}
.contact-layout .contact-direct strong{font-size:clamp(18px,1.55vw,24px)}
.contact-layout .project-intake{width:100%;padding:0}
.contact-layout .project-intake-inner{
  width:100%;height:100%;max-width:none;margin:0;padding:38px;
  grid-template-columns:minmax(250px,.62fr) minmax(0,1.38fr);gap:38px;
}

@media (max-width:900px){
  .service-route-nav ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-route-nav li:last-child{grid-column:auto}
  .service-journey--compact .service-phase,
  .service-journey--compact .service-phase--reverse{height:auto;min-height:0;grid-template-columns:1fr}
  .service-journey--compact .service-phase-media{height:auto;min-height:0;aspect-ratio:16/9}
  .service-journey--compact .service-phase-body{min-height:330px}
  .studio-founder-grid{grid-template-columns:1fr}
  .studio-quotes{grid-template-columns:1fr}
  .studio-quotes blockquote{min-height:190px}
  .contact-layout{grid-template-columns:1fr;padding-inline:28px}
  .contact-layout .contact-direct{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--grid);border-right:0}
  .contact-layout .contact-direct>*{border-bottom:0;border-right:1px solid var(--grid)}
  .contact-layout .contact-direct>*:last-child{border-right:0}
  .contact-layout .project-intake-inner{grid-template-columns:1fr}
}
@media (max-width:640px){
  .chero2-grid-track{gap:16px}
  .studio-section--compact{padding-inline:24px}
  .contact-layout{padding:0 24px 60px}
  .contact-layout .contact-direct{display:flex;border-bottom:0}
  .contact-layout .contact-direct>*{min-height:104px;border-right:0;border-bottom:1px solid var(--grid)}
  .contact-layout .project-intake-inner{padding:28px 22px}
}

/* === 2026-07-31 spacing, mosaic and shell correction === */
:root{--waud-gutter:40px}

/* Every primary page region uses the homepage shell. */
:where(
  .nav-a-inner,.hero-combo,.client-marquee,.post-carousel-grid,
  .werk-filter-section,.werk-grid-section,.project-body,.project-gallery-section,
  .project-related-section,.project-back-work,.studio-hero,.contact-hero,
  .contact-layout,.service-route-nav,.service-journey,.cta-banner,.foot,.foot-bottom
){width:100%;max-width:var(--waud-shell-max);margin-inline:auto;box-sizing:border-box}
.studio-section-inner{
  width:100%;max-width:calc(var(--waud-shell-max) - (var(--waud-gutter) * 2));margin-inline:auto;
}
.service-outcomes{
  width:calc(100% - (var(--waud-gutter) * 2));
  max-width:calc(var(--waud-shell-max) - (var(--waud-gutter) * 2));
  margin-inline:auto;
}

/* Work hero and a gapless but still varied 12-column mosaic. */
.hero-combo.is-landing.werk-hero .bhero{min-height:0;height:auto}
.werk-hero .bhero-feature{min-height:340px}
.werk-grid{grid-auto-flow:dense;grid-auto-rows:126px}
.werk-tile[data-size="small"]{grid-column:span 4;grid-row:span 2}
.werk-tile[data-size="hwide"]{grid-column:span 5;grid-row:span 2}
.werk-tile[data-size="wide"]{grid-column:span 7;grid-row:span 2}
.werk-tile[data-size="large"]{grid-column:span 8;grid-row:span 3}
.werk-tile[data-size="tall"]{grid-column:span 4;grid-row:span 3}
.werk-tile[data-size="full"]{grid-column:1/-1;grid-row:span 2}

/* Services breathe as separate chapters; each image fades through related work. */
.service-journey--compact{display:grid;gap:34px}
.service-journey--compact .service-phase{border:1px solid var(--grid)!important}
.service-phase-media{isolation:isolate}
.service-phase-media .service-fade-image{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.25s ease,transform .5s cubic-bezier(.2,.8,.2,1);
}
.service-phase-media .service-fade-image.is-active{opacity:1}
.service-phase-media::after{z-index:1}
.service-phase-media>span{z-index:2}

/* Wiebe remains the lead story, but no longer consumes more space than the content earns. */
.studio-founder{padding-top:48px;padding-bottom:52px}
.studio-founder-grid{grid-template-columns:minmax(280px,.62fr) minmax(0,1.38fr);gap:38px;margin-top:28px}
.studio-founder-grid .project-media-placeholder{min-height:360px}
.studio-founder-copy h2{font-size:clamp(34px,3.5vw,52px);margin-bottom:20px}
.studio-founder-copy p{margin-top:14px;font-size:clamp(15px,1.15vw,18px);line-height:1.55}
.studio-quotes-section{padding-block:52px}
.studio-quote-card{
  min-height:280px;padding:26px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;
  border:1px solid var(--grid);background:#fff;
}
.studio-quote-logo{
  width:min(210px,58%);min-height:76px;padding:16px;display:flex;align-items:center;
  border:1px solid #c40028;background:#fff;font-size:13px!important;line-height:1.35!important;
}
.studio-quotes .studio-quote-card blockquote{
  min-height:0;padding:0;border:0;font-size:clamp(19px,2vw,29px);line-height:1.28;
}
.studio-workshop-section{padding-block:56px}

@media (max-width:1100px) and (min-width:761px){
  .werk-grid{grid-template-columns:repeat(8,1fr)}
  .werk-tile[data-size="small"],.werk-tile[data-size="hwide"],.werk-tile[data-size="tall"]{grid-column:span 4}
  .werk-tile[data-size="wide"],.werk-tile[data-size="large"],.werk-tile[data-size="full"]{grid-column:span 8}
  .werk-tile[data-size="tall"],.werk-tile[data-size="large"]{grid-row:span 3}
}
@media (max-width:980px){
  :root{--waud-gutter:28px}
}
@media (max-width:900px){
  .studio-founder-grid{grid-template-columns:minmax(250px,.7fr) minmax(0,1.3fr)}
  .studio-founder-grid .project-media-placeholder{min-height:330px}
}
@media (max-width:760px){
  :root{--waud-gutter:24px}
  .werk-grid{grid-template-columns:1fr;grid-auto-rows:auto}
  .werk-tile,.werk-tile[data-size]{grid-column:1!important;grid-row:auto!important}
  .werk-tile[data-size="full"]{aspect-ratio:4/3}
  .service-journey--compact{gap:24px}
  .studio-founder-grid{grid-template-columns:1fr}
  .studio-founder-grid .project-media-placeholder{min-height:300px}
  .studio-quote-card{min-height:240px}
}

/* === 2026-07-31 Studio uses the Work hero component === */
.hero-combo.is-landing.studio-hero--compact {
  padding-top: 34px;
  padding-bottom: 30px;
}
.studio-hero--compact .bhero-feature {
  min-height: 230px;
}
.studio-hero--compact .bhero-feature-overlay {
  padding: 24px 38px;
  background: linear-gradient(105deg, rgba(5,5,5,.94) 0%, rgba(5,5,5,.78) 58%, rgba(5,5,5,.48) 100%);
}
.studio-hero--compact .bhero-feature-media img {
  filter: contrast(1.08) saturate(.92) brightness(.78);
}
.studio-hero--compact .bhero-feature-overlay .eyebrow {
  align-self: flex-start;
  margin-bottom: 10px;
  color: #fff;
}
.studio-hero--compact .bhero-feature-overlay h1 {
  max-width: 980px;
  margin-bottom: 10px;
  color: #fff;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: .98;
}
.studio-hero--compact .bhero-feature-overlay h1 .accent,
.studio-hero--compact .bhero-feature-overlay .lead {
  color: #fff;
}
.studio-hero--compact .bhero-feature-overlay h1 .accent::after {
  background: #fff;
}
.studio-hero--compact .bhero-feature-overlay .lead {
  max-width: 720px;
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.45;
}
/* Founder copy uses the full shared content width. */
.studio-founder-grid {
  grid-template-columns: minmax(360px, .72fr) minmax(0, 1.28fr);
  gap: clamp(42px, 5vw, 80px);
}
.studio-founder-copy {
  width: 100%;
  padding-right: 0;
}
.studio-founder-copy h2,
.studio-founder-copy p {
  width: 100%;
  max-width: none;
}
@media (max-width: 760px) {
  .hero-combo.is-landing.studio-hero--compact {
    padding-top: 20px;
    padding-bottom: 24px;
  }
  .studio-hero--compact .bhero-feature {
    min-height: 280px;
  }
  .studio-hero--compact .bhero-feature-overlay {
    padding: 28px 24px;
  }
  .studio-founder-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}