/* /werk/ — proof-first machinepark. Geen galerij van kaartjes, maar drie brede
   productiedelen met het echte platform als ankerpunt. */
.werk-kop { padding-bottom: clamp(34px, 5vw, 62px); }
.werk-kop .intro { max-width: 62ch; }

.werk-machine {
  background: #F3F0EA;
  border-top: 1px solid #E4DED5;
  border-bottom: 1px solid #E4DED5;
  padding: clamp(48px, 7vw, 84px) 0;
}
.werk-machinekop {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  column-gap: clamp(32px, 6vw, 76px);
  align-items: end;
  padding-bottom: clamp(32px, 5vw, 54px);
}
.werk-machinekop .mono-label { grid-column: 1 / -1; margin-bottom: 13px; }
.werk-machinekop h2 {
  font-family: var(--font-kop); font-weight: 800;
  font-size: clamp(34px, 5vw, 58px); line-height: .98; letter-spacing: -.035em;
  color: var(--navy); max-width: 11ch;
}
.werk-machinekop h2 em { color: var(--koper); font-style: normal; }
.werk-machinekop > p:last-child { color: var(--tekst-muted); font-size: clamp(16px, 1.7vw, 18px); max-width: 58ch; }

.werk-case {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
  padding: clamp(42px, 6vw, 70px) 0;
  border-top: 1px solid #D7D0C6;
  color: var(--inkt);
}
.werk-case::after {
  content: ""; position: absolute; left: 0; top: -1px;
  width: 64px; height: 2px; background: var(--koper);
  transform: scaleX(.18); transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.werk-case:hover::after, .werk-case:focus-visible::after { transform: scaleX(1); }
.werk-case:focus-visible { outline: 2px solid var(--koper); outline-offset: 8px; }
.werk-case-copy { min-width: 0; }
.werk-index {
  display: block; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--label); margin-bottom: 15px;
}
.werk-case h3 {
  font-family: var(--font-kop); font-weight: 800; font-size: clamp(30px, 4vw, 46px);
  line-height: 1.03; letter-spacing: -.03em; color: var(--navy); max-width: 13ch;
}
.werk-case-copy > p { margin-top: 17px; font-size: 16px; line-height: 1.68; color: var(--tekst-muted); max-width: 47ch; }
.werk-metrics { display: flex; gap: 0; margin: 27px 0 0; }
.werk-metrics > div { min-width: 122px; padding-right: 22px; }
.werk-metrics > div + div { border-left: 1px solid #D7D0C6; padding-left: 22px; }
.werk-metrics dt { font-family: var(--font-kop); font-weight: 800; font-size: 24px; line-height: 1; color: var(--navy); }
.werk-metrics dd { margin-top: 7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--label); }
.werk-door {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 24px;
  color: var(--koper); font-weight: 600; border-bottom: 1px solid rgba(196,98,45,.35);
}
.werk-door span { transition: transform .2s ease; }
.werk-case:hover .werk-door span { transform: translateX(4px); }

.werk-platformbeeld {
  position: relative; margin: 0; overflow: hidden; border-radius: 14px;
  background: #071321; box-shadow: 0 24px 56px rgba(11,21,38,.18);
}
.werk-platformbeeld img { display: block; width: 100%; height: auto; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.werk-case:hover .werk-platformbeeld img { transform: scale(1.015); }
.werk-platformbeeld figcaption {
  position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 11px; border: 1px solid rgba(232,238,248,.14); border-radius: 7px;
  background: rgba(7,19,33,.82); color: rgba(232,238,248,.78); backdrop-filter: blur(8px);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
}
.werk-livepunt, .werk-ui-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--mk-groen); flex-shrink: 0; }

.werk-interface {
  min-width: 0; overflow: hidden; border: 1px solid #263550; border-top: 3px solid var(--koper);
  border-radius: 14px; background: var(--navy); color: var(--navy-licht);
  box-shadow: 0 20px 48px rgba(11,21,38,.16);
}
.werk-ui-kop, .werk-ui-voet {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}
.werk-ui-kop { padding: 15px 18px; border-bottom: 1px solid var(--mk-rand-donker); color: var(--koper-hover); }
.werk-ui-status { display: inline-flex; align-items: center; gap: 8px; color: var(--mk-groen); }
.werk-ui-voet { padding: 13px 18px; border-top: 1px solid var(--mk-rand-donker); color: var(--navy-gedempt); }
.werk-ui-voet strong { color: var(--koper-hover); font-weight: 500; }

.werk-chat-body { min-height: 230px; display: flex; flex-direction: column; justify-content: center; padding: 28px 26px; }
.werk-chat-body > p { max-width: 78%; padding: 11px 15px; font-size: 14px; line-height: 1.5; }
.werk-chat-in { align-self: flex-start; background: rgba(232,238,248,.08); color: var(--mk-tekst-donker); border-radius: 4px 14px 14px 14px; }
.werk-chat-uit { align-self: flex-end; margin-top: 11px; background: var(--koper); color: #FFF4EA; border-radius: 14px 14px 4px 14px; }
.werk-overdracht { display: flex; justify-content: space-between; gap: 12px; margin-top: 25px; padding-top: 13px; border-top: 1px dashed var(--mk-rand-donker); font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; color: var(--navy-gedempt); }
.werk-overdracht b { color: var(--mk-groen); font-weight: 500; text-transform: uppercase; }

.werk-case-omgekeerd .werk-case-copy { order: 2; }
.werk-case-omgekeerd .werk-interface { order: 1; }
.werk-briefing-body { min-height: 230px; padding: 20px 24px; }
.werk-briefing-body > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--mk-rand-donker); font-size: 13.5px; color: var(--mk-tekst-donker); }
.werk-briefing-body > div:first-child { border-top: 0; }
.werk-briefing-body b { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--mk-groen); text-transform: uppercase; }
.werk-briefing-body .werk-afwijking b { color: var(--koper-hover); }
.werk-trend::before { content: "↗ "; }
.werk-gereed::before { content: "✓ "; }

.werk-overig { padding-top: clamp(62px, 8vw, 96px); padding-bottom: clamp(68px, 9vw, 110px); }
.werk-overig-kop { margin-bottom: clamp(24px, 4vw, 42px); }
.werk-overig-kop h2 { margin-top: 10px; font-family: var(--font-kop); font-weight: 800; font-size: clamp(32px, 4.5vw, 50px); color: var(--navy); letter-spacing: -.03em; }

@media (max-width: 820px) {
  .werk-machinekop { grid-template-columns: 1fr; }
  .werk-machinekop h2 { max-width: none; }
  .werk-machinekop > p:last-child { margin-top: 17px; }
  .werk-case { grid-template-columns: 1fr; gap: 30px; }
  .werk-case-omgekeerd .werk-case-copy, .werk-case-omgekeerd .werk-interface { order: initial; }
  .werk-case h3 { max-width: 18ch; }
  .werk-platformbeeld { max-width: 680px; }
  .werk-interface { width: 100%; max-width: 560px; }
}
@media (max-width: 560px) {
  .werk-kop { padding-bottom: 32px; }
  .werk-machine { padding: 42px 0; }
  .werk-machinekop { padding-bottom: 27px; }
  .werk-case { padding: 38px 0; gap: 25px; }
  .werk-case h3 { font-size: 31px; }
  .werk-case-copy > p { font-size: 15.5px; line-height: 1.6; }
  .werk-metrics > div { min-width: 0; flex: 1; padding-right: 14px; }
  .werk-metrics > div + div { padding-left: 14px; }
  .werk-metrics dt { font-size: 21px; }
  .werk-platformbeeld { border-radius: 10px; }
  .werk-platformbeeld figcaption { left: 9px; bottom: 9px; max-width: calc(100% - 18px); }
  .werk-chat-body, .werk-briefing-body { min-height: 215px; padding: 20px 17px; }
  .werk-chat-body > p { max-width: 90%; font-size: 13.5px; }
  .werk-ui-voet span { max-width: 23ch; }
}
@media (prefers-reduced-motion: reduce) {
  .werk-case::after, .werk-door span, .werk-platformbeeld img { transition: none; }
  .werk-case:hover .werk-platformbeeld img { transform: none; }
}