.mk-case-page {
  --case-dark: #082932;
  --case-aqua: #FC5B34;
  --case-paper: #fff;
  --case-blue: #eaf5f9;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--case-paper);
  color: var(--case-dark);
  font-family: inherit;
  overflow-x: clip;
  overflow-y: visible;
}
@media (min-width:1000px){.mk-case-footer .col.-main>.cta{display:none!important}}
@media (max-width:999px){.mk-case-footer .col.-social>.cta{display:none!important}}
@media (max-width:999px){
  html.mk-case-boot body.mk-page-project .TheFooter.mk-case-footer{
    background-color:var(--cms-footer-bg,#0a2129)!important;
    color:var(--cms-footer-text,#f8f7f3)!important;
  }
}
.mk-page-project .TheFooter.mk-case-footer .title,
.mk-page-project .TheFooter.mk-case-footer .text,
.mk-page-project .TheFooter.mk-case-footer .link,
.mk-page-project .TheFooter.mk-case-footer .label,
.mk-page-project .TheFooter.mk-case-footer .copyrights,
.mk-page-project .TheFooter.mk-case-footer .mk-footer-extras,
.mk-page-project .TheFooter.mk-case-footer .mk-footer-extras a,
.mk-page-project .TheFooter.mk-case-footer .mk-footer-extras p{
  color:var(--cms-footer-text,#f8f7f3)!important;
}
.mk-page-project.mk-case-footer-in-view .TheFooter.mk-case-footer .OglStar{
  opacity:1!important;
}
.mk-case-quote{
  margin-bottom:clamp(48px,6vw,96px);
}
.mk-case-quote + .mk-case-breakout{
  margin-top:clamp(24px,3vw,52px);
}
.mk-case-page * {
  box-sizing: border-box;
}
.mk-case-wrap,
.mk-case-summary__inner,
.mk-case-content-grid {
  width: min(calc(100% - 112px), 970px);
  margin-inline: auto;
}
body.mk-page-project .mk-case-page + * {
  position: relative;
}
.mk-case-hero {
  position: relative;
  display: flex;
  min-height: 1120px;
  flex-direction: column;
  align-items: center;
  padding-top: 211px;
  background: #fff;
  color: #fff;
  text-align: center;
}
.mk-case-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 228px;
  z-index: 0;
  background-color: var(--case-hero-bg, var(--case-dark));
  background-image: var(--case-hero-image, none);
  background-position: center;
  background-size: cover;
}
.mk-case-back {
  position: relative;
  z-index: 2;
  display: block;
  width: 73px;
  height: 30px;
  color: var(--case-aqua);
  transition: transform 0.35s ease;
}
.mk-case-back:hover {
  transform: translateX(-8px);
}
.mk-case-back svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
}
.mk-case-hero h1 {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 80px 0 -26px;
  padding: 0 4vw;
  font-family: Spectral, serif;
  font-size: 9.09090909090909vw;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0;
}

@media only screen and (max-width:1024px){.mk-case-hero h1{font-size:10rem}}
@media only screen and (max-width:768px){.mk-case-hero h1{font-size:3.6rem}}
@media (max-width:396px){.mk-case-hero h1{font-size:36px}}
@media (min-width:1100px){.mk-case-hero h1{font-size:100px}}
.mk-case-hero__visual {
  position: relative;
  z-index: 1;
  width: min(45vw, 690px);
  height: auto;
  min-height: 720px;
  margin: 0;
  overflow: hidden;
  background: #d9e0e3;
  transform: rotate(4deg);
  transform-origin: center center;
}
.mk-case-hero__visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 720px;
  object-fit: cover;
}
.mk-case-hero__visual canvas {
  z-index: 2;
  clip-path:inset(1px);
}
.mk-case-summary {
  padding: 94px 0 134px;
  background: #fff;
  background-position: center;
  background-size: cover;
}
.mk-case-statement {
  max-width: 980px;
  margin: 0 auto 135px;
  text-align: center;
  font-size: clamp(38px, 4.7vw, 72px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.045em;
}
.mk-case-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 38px;
  margin: 0;
}
.mk-case-facts > div {
  min-width: 0;
}
.mk-case-facts dt {
  margin-bottom: 23px;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
}
.mk-case-facts dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
}
.mk-case-copy {
  padding: 118px 0 126px;
  background-position: center;
  background-size: cover;
}
.mk-case-copy--challenge {
  background-color: var(--case-blue);
}
.mk-case-copy--solution {
  background-color: var(--case-blue);
}
.mk-case-content-grid {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 43px;
}
.mk-case-copy h2,
.mk-case-kicker {
  margin: 3px 0 0;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
}
.mk-case-copy h3 {
  margin: 0 0 35px;
  font-family: inherit;
  font-size: clamp(34px, 3.4vw, 54px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.mk-case-copy p {
  max-width: 780px;
  margin: 0;
  font-size: clamp(17px, 1.35vw, 21px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
}
.mk-case-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.7vw, 28px);
  padding: clamp(74px, 9vw, 135px) max(5vw, calc((100vw - 1160px) / 2));
  background: #fff;
  background-position: center;
  background-size: cover;
}
.mk-case-gallery__item {
  width: 100%;
  height: auto;
  margin: 0;
  overflow: hidden;
}
.mk-case-gallery__item:first-child {
  grid-column: 1/-1;
}
.mk-case-gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  height: 100%;
  min-height: 0;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.mk-case-gallery__item:first-child img {
  aspect-ratio: 16/9;
}
.mk-case-gallery > .mk-case-copy {
  grid-column: 1/-1;
  margin-inline: calc(-1 * max(5vw, calc((100vw - 1160px) / 2)));
}
.mk-case-secondary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.7vw, 28px);
  padding: clamp(74px, 9vw, 135px) max(5vw, calc((100vw - 1160px) / 2));
  margin: 0;
  background-position: center;
  background-size: cover;
}
.mk-case-secondary-grid figure {
  margin: 0;
  min-height: 0;
}
.mk-case-secondary-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/5;
}
.mk-case-word-clip{display:inline-block;overflow:hidden;vertical-align:top}.mk-case-word{display:inline-block;opacity:0;transform:translateY(115%);will-change:transform,opacity}
.mk-case-rows{display:flex;flex-direction:column;gap:clamp(14px,1.4vw,24px);padding:clamp(80px,10vw,150px) 0;background:#fff;overflow:hidden}
.mk-case-rows__row{display:flex;gap:clamp(14px,1.4vw,24px);width:max-content;will-change:transform}
.mk-case-rows__row--1{transform:translate3d(-12vw,0,0)}.mk-case-rows__row--2{transform:translate3d(12vw,0,0)}
.mk-case-rows__item{display:block;width:clamp(300px,31vw,510px);aspect-ratio:16/10;margin:0;overflow:hidden}
.mk-case-rows__item img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.mk-case-breakout{background:#fff;overflow-x:clip;overflow-y:visible;margin-bottom:clamp(90px,9vw,150px)}.mk-case-breakout__scroll{position:relative;height:270vh}.mk-case-breakout__pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}.mk-case-breakout__grid{display:grid;grid-template-columns:repeat(var(--breakout-columns,3),auto);gap:1vw;width:min-content;will-change:gap}.mk-case-breakout__item{margin:0;overflow:hidden;border-radius:1rem;width:31vw;height:31vh;display:grid;place-items:center;will-change:width,height}.mk-case-breakout__item.is-center{position:relative;z-index:2}.mk-case-breakout__item img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.mk-case-video,
.mk-case-flex {
  padding: 118px 0 126px;
  background-position: center;
  background-size: cover;
}
.mk-case-quote{padding:clamp(90px,11vw,170px) 0;background:#fff8d9;color:#082932}.mk-case-quote__inner{display:grid;grid-template-columns:minmax(150px,20%) minmax(0,1fr);gap:clamp(50px,8vw,130px);align-items:start;width:82.8571428571vw;max-width:1160px;margin:0 auto}.mk-case-quote blockquote{max-width:900px;margin:0;font-family:Work Sans,Arial,Helvetica,sans-serif;font-size:clamp(34px,3.5vw,54px);font-weight:300;line-height:1.08;letter-spacing:-.035em}.mk-case-quote__person{display:flex;align-items:center;gap:14px;padding-top:.3em}.mk-case-quote__person img{flex:0 0 auto;width:56px;height:56px;border-radius:50%;object-fit:cover}.mk-case-quote__person p{display:flex;flex-direction:column;margin:0;font-size:14px;line-height:1.35}.mk-case-quote__person strong{font-weight:600}.mk-case-quote__person span{opacity:.68}.mk-case-detail-gallery{padding:clamp(80px,10vw,150px) 0;background:#fff}.mk-case-detail-gallery__inner{width:82.8571428571vw;max-width:1160px;margin:0 auto}.mk-case-detail-gallery--grid,.mk-case-detail-gallery--masonry{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.5vw,24px);columns:auto}.mk-case-detail-gallery figure,.mk-case-detail-gallery--masonry figure{margin:0;overflow:hidden;aspect-ratio:16/10;background:#eaf5f9;display:flex;align-items:center;justify-content:center;break-inside:auto}.mk-case-detail-gallery img,.mk-case-detail-gallery--masonry img{display:block;width:100%;height:100%;object-fit:contain!important;object-position:center;aspect-ratio:auto!important;transform:none!important}
.mk-case-video h2,
.mk-case-flex h2 {
  max-width: 620px;
  margin: 0 0 35px;
  font-family: inherit;
  font-size: clamp(34px, 3.5vw, 56px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.05em;
}
.mk-case-video video,
.mk-case-flex video {
  display: block;
  width: 100%;
  margin-top: 55px;
}
.mk-case-flex > div > p:not(.mk-case-kicker) {
  max-width: 780px;
  margin-left: 233px;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 300;
  line-height: 1.55;
}
.mk-case-next-wrap{padding:clamp(110px,14vw,220px) 0;background:#eaf5f9}.mk-case-next{display:flex;align-items:center;width:82.8571428571vw;max-width:1320px;margin:0 auto;color:#082932;text-decoration:none}.mk-case-next__media{position:relative;order:2;width:38.0357142857vw;max-width:615px;aspect-ratio:4/5;overflow:hidden;transform:translateY(30px) rotate(4deg);transition:transform .9s cubic-bezier(.16,1,.3,1)}.mk-case-next__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .9s cubic-bezier(.16,1,.3,1)}.mk-case-next__content{order:1;width:43.1428571429vw;max-width:700px;padding-left:4.6875vw;transform:translateY(-30px)}.mk-case-next__content>span{display:block;margin-bottom:28px;text-transform:uppercase;font-size:11px;letter-spacing:.14em}.mk-case-next__content strong{display:block;font-family:Spectral,serif;font-size:clamp(56px,5.47vw,88px);font-weight:800;line-height:.93;letter-spacing:-.055em}.mk-case-next__content p{max-width:440px;margin:26px 0 0;font-size:clamp(17px,1.56vw,25px);line-height:1.55}.mk-case-next:hover .mk-case-next__media{transform:translateY(20px) rotate(2deg)}.mk-case-next:hover .mk-case-next__media img{transform:scale(1.035)}
@media (max-width: 767px) {
  .mk-case-wrap,
  .mk-case-summary__inner,
  .mk-case-content-grid {
    width: calc(100% - 40px);
  }
  .mk-case-hero {
    min-height: 0;
    padding-top: 132px;
  }
  .mk-case-back {
    width: 58px;
  }
  .mk-case-hero h1 {
    margin: 60px 0 40px;
    font-size: 36px;
  }
  .mk-case-hero__visual {
    width: calc(100% - 56px);
    min-height: 62vh;
  }
  .mk-case-hero__visual img {
    min-height: 62vh;
  }
  .mk-case-summary {
    padding: 65px 0 80px;
  }
  .mk-case-statement {
    margin-bottom: 75px;
    font-size: 35px;
  }
  .mk-case-facts {
    grid-template-columns: 1fr 1fr;
    gap: 40px 24px;
  }
  .mk-case-copy {
    padding: 80px 0;
  }
  .mk-case-content-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .mk-case-copy h3 { font-size: clamp(34px,9.5vw,48px); }
  .mk-case-gallery__item img {
    aspect-ratio: 4/3;
  }
  .mk-case-gallery{grid-template-columns:1fr;padding-inline:20px}.mk-case-gallery__item:first-child{grid-column:auto}.mk-case-gallery > .mk-case-copy{grid-column:auto;margin-inline:-20px}.mk-case-secondary-grid{padding-inline:20px}
  .mk-case-secondary-grid {
    grid-template-columns: 1fr;
  }
  .mk-case-secondary-grid figure {
    min-height: 65vh;
  }
  .mk-case-flex > div > p:not(.mk-case-kicker) {
    margin: 30px 0 0;
  }
  .mk-case-quote__inner{display:flex;width:calc(100% - 40px);flex-direction:column-reverse;gap:34px}.mk-case-quote blockquote{font-size:clamp(30px,8.5vw,42px)}.mk-case-quote__person{padding-top:0}.mk-case-detail-gallery__inner{width:calc(100% - 40px)}.mk-case-detail-gallery--grid,.mk-case-detail-gallery--masonry{grid-template-columns:1fr;columns:auto}
  .mk-case-next-wrap{padding:80px 20px}.mk-case-next{display:block;width:100%}.mk-case-next__media{width:82%;margin-left:auto;transform:rotate(4deg)}.mk-case-next__content{width:100%;padding:0;margin-top:-20px;transform:none;position:relative;z-index:2}.mk-case-next__content strong{font-size:clamp(52px,14vw,78px)}.mk-case-next__content p{font-size:18px}.mk-case-rows{padding:70px 0}.mk-case-rows__row{gap:.75rem}.mk-case-rows__item{width:72vw}.mk-case-breakout__scroll{height:320svh}.mk-case-breakout__pin{position:sticky;top:0;height:100svh;padding:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.mk-case-breakout__grid{grid-template-columns:repeat(3,auto);width:min-content;gap:2vw;transform:none;contain:layout paint}.mk-case-breakout__item{width:29vw;height:24svh;aspect-ratio:auto;contain:layout paint}
}





/* MK case live-site CTA: explicit external navigation only on the single project. */
.mk-case-live-link{display:inline-flex;align-items:center;gap:14px;margin-top:52px;color:var(--case-dark);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.mk-case-live-link svg{width:34px;height:34px;fill:none;stroke:var(--case-aqua);stroke-width:1.6;transition:transform .4s cubic-bezier(.19,1,.22,1)}
.mk-case-live-link:hover svg{transform:translate(4px,-4px)}
@media(max-width:767px){.mk-case-live-link{margin-top:42px}}
.mk-case-breakout.is-breakout-pinned .mk-case-breakout__pin{position:relative;top:auto;width:100%;height:100vh}
@media(max-width:767px){.mk-case-breakout.is-breakout-pinned .mk-case-breakout__pin{height:100svh}}
@media(max-width:767px){.mk-case-breakout{margin-bottom:88px}}


/* One reveal system on desktop + mobile; same easing/timing as the existing case motion. */
.mk-case-media-reveal{opacity:0;transform:translate3d(0,42px,0) scale(.985);transition:opacity .72s ease var(--mk-case-reveal-delay,0s),transform .94s cubic-bezier(.16,1,.3,1) var(--mk-case-reveal-delay,0s);will-change:transform,opacity}
.mk-case-media-reveal.is-inview{opacity:1;transform:translate3d(0,0,0) scale(1)}
@media(max-width:767px){
  .mk-case-media-reveal{transform:translate3d(0,30px,0) scale(.99)}
  .mk-case-media-reveal.is-inview{transform:translate3d(0,0,0) scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .mk-case-word,.mk-case-media-reveal{opacity:1!important;transform:none!important;transition:none!important}
  [data-case-breakout] .mk-case-breakout__scroll{height:auto!important}
  [data-case-breakout] .mk-case-breakout__pin{position:static!important;height:auto!important;padding:1rem!important}
  [data-case-breakout] .mk-case-breakout__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;gap:.75rem!important}
  [data-case-breakout] .mk-case-breakout__item{width:100%!important;height:auto!important;aspect-ratio:16/10!important;border-radius:.75rem!important}
}

/* 2026-08-23 case marquee tuning: mobile horizontal swipe without blocking native vertical scroll. */
@media (max-width:999px){
  [data-case-rows] .mk-case-rows__row{touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;cursor:grab}
  [data-case-rows] .mk-case-rows__row.is-swiping{cursor:grabbing}
  [data-case-rows] .mk-case-rows__item,[data-case-rows] img{-webkit-user-drag:none;user-drag:none}
}


/* v161 — round arrow beneath Volgend project, matching the requested reference. */
.mk-case-next__arrow{display:grid;width:clamp(92px,8.7vw,132px);height:clamp(92px,8.7vw,132px);margin-top:clamp(34px,3vw,52px);border-radius:50%;background:#FC5B34;place-items:center;color:#082932;overflow:hidden;transition:transform .55s cubic-bezier(.16,1,.3,1),background-color .3s ease}
.mk-case-next__arrow svg{width:42%;height:42%;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.mk-case-next:hover .mk-case-next__arrow{transform:scale(1.045)}
.mk-case-next:hover .mk-case-next__arrow svg{transform:translate(5px,-5px)}
@media(max-width:767px){.mk-case-next__arrow{width:104px;height:104px;margin:34px auto 0}}