/* Casepagina's en projectenoverzicht. Bouwt voort op site.css. */
.sub .top__mark{box-shadow:0 0 0 1px var(--black)}

.case-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:100vh;min-height:100svh}
.case-hero__text{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:20px;padding:120px var(--pad) clamp(40px,7vh,80px)}
.case-hero__back{text-decoration:none;padding:10px 0;color:var(--grey)}
.case-hero__kicker{color:var(--orange)}
.case-hero h1{font-size:clamp(56px,8.4vw,144px);line-height:.84}
.case-hero__lead{margin:0;max-width:29em;font-size:clamp(18px,1.5vw,22px)}
.case-hero__media{position:relative;overflow:hidden;min-height:320px;background:#16151c}
.case-hero__media img,.case-hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-hero__media--logo{background:var(--white);display:flex;align-items:center;justify-content:center}
.case-hero__media--logo img{position:static;width:min(56%,420px);height:auto}

.case-quote{margin:0;background:var(--blue);color:var(--white);padding:clamp(56px,9vh,112px) var(--pad);display:flex;flex-direction:column;gap:28px}
.case-quote blockquote{margin:0;max-width:22em;font-family:var(--display);text-transform:uppercase;font-size:clamp(32px,4.6vw,76px);line-height:.96}
.case-quote figcaption{display:flex;flex-direction:column;gap:2px;font-size:16px}
.case-quote figcaption strong{font-size:13px;letter-spacing:.08em;text-transform:uppercase}

.case-body{max-width:1440px;margin:0 auto;padding:clamp(56px,9vh,112px) var(--pad) clamp(24px,4vh,48px)}
.case-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:16px 64px;padding:32px 0 36px;border-top:1px solid rgba(255,255,255,.4)}
.case-row:first-child{border-top:2px solid var(--white)}
.case-row h2{font-size:clamp(36px,3.8vw,60px);line-height:.92}
.case-row__body{display:flex;flex-direction:column;gap:16px;max-width:40em;font-size:clamp(17px,1.3vw,19px)}
.case-row__body p{margin:0}
.case-row__body ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.case-row__body li{padding-left:28px;position:relative}
.case-row__body li::before{content:"→";position:absolute;left:0;color:var(--orange)}

.case-momentum{background:var(--orange);color:var(--black);padding:clamp(56px,9vh,112px) var(--pad);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:20px 64px;align-items:start}
.case-momentum h2{font-size:clamp(44px,5.6vw,96px);line-height:.86}
.case-momentum p{margin:0;max-width:32em;font-size:clamp(19px,1.7vw,26px);line-height:1.45}
.case-link{margin:0;padding:clamp(32px,5vh,56px) var(--pad) 0}

.case-next{display:flex;flex-direction:column;gap:10px;padding:clamp(56px,9vh,112px) var(--pad);text-decoration:none;border-top:1px solid rgba(255,255,255,.4)}
.case-next .display{font-size:clamp(48px,8.4vw,144px);line-height:.86}
.case-next:hover{color:var(--white)}
.case-next:hover .display{color:var(--orange)}

.list-head{padding:clamp(140px,22vh,220px) var(--pad) clamp(32px,5vh,56px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 64px}
.list-head h1{font-size:clamp(72px,14vw,240px);line-height:.8}
.list-head p{margin:0;max-width:24em;font-size:clamp(18px,1.5vw,22px)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.4);border-top:1px solid rgba(255,255,255,.4);border-bottom:1px solid rgba(255,255,255,.4)}
.tile{display:flex;flex-direction:column;background:var(--black);text-decoration:none;color:var(--white)}
.tile:hover{color:var(--white)}
.tile__media{position:relative;overflow:hidden;aspect-ratio:16/10;background:#16151c}
.tile__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.tile:hover .tile__media img{transform:scale(1.04)}
.tile__media--logo{background:var(--white);display:flex;align-items:center;justify-content:center}
.tile__media--logo img{position:static;width:auto;height:70%}
.tile:hover .tile__media--logo img{transform:none}
.tile__text{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:28px var(--pad) 40px}
.tile__text h2{font-size:clamp(36px,4.2vw,68px);line-height:.9}
.tile:hover h2{color:var(--orange)}
.tile__text p{margin:0;max-width:30em;color:var(--grey)}

@media (max-width:800px){
  .case-hero{grid-template-columns:1fr;min-height:0}
  .case-hero__media{order:-1;aspect-ratio:4/3;min-height:0}
  .case-hero__text{padding:28px var(--pad) 40px}
  .case-hero__media{margin-top:0}
  .case-row,.case-momentum{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
}