/* Case-study template. Layout is proportional to the live site's 1440px canvas:
   --u is one design pixel, so spacing scales down with the viewport. */
body { --page-bg: var(--paper); }
/* --u scales with the window at every width (no max width), like the live site; --uf stops growing at
   1440 and is used for type and the intro, which stay at their 1440 sizes on wider screens. */
.cs { --u: calc(100vw / 1440); --uf: min(1px, var(--u)); --us: 1px; padding-top: calc(var(--uf) * 200); }
/* Vertical spacing between blocks (--us) stays at its design size, and media blocks keep 24px side
   margins at every width: the 1440 canvas is stretched so its 24px inset lands on the window edge. */
@media (min-width: 810px) {
  .cs .cs-canvas { width: calc((100% - 48px) * 1440 / 1392); margin-left: calc(24px - (100% - 48px) * 24 / 1392); }
}

/* Intro */
.cs-intro { display: grid; grid-template-columns: 42.0833% 49.1667%; column-gap: 6.0417%; min-height: calc(908 * var(--uf)); padding: 0 1.6667% 0 4.1667%; align-items: start; }
.cs-intro__text { padding-top: calc(var(--uf) * 79); }
.cs-intro__logo { width: auto; max-width: 160px; height: calc(var(--uf) * 77); min-height: 48px; object-fit: contain; object-position: left center; }
.cs-intro hr { border: 0; border-top: 1px solid rgba(0, 0, 0, 0.25); margin: calc(var(--uf) * 40) 0 calc(var(--uf) * 36); }
.cs-intro__heading { margin-top: 12px; }
.cs-intro__cols { display: grid; grid-template-columns: 400fr 206fr; column-gap: 36px; margin-top: calc(var(--uf) * 55); }
.cs-intro__body p + p { margin-top: 1em; }
.cs-intro__body strong { font-weight: 700; }
.cs-intro__body a { text-decoration: underline; }
.cs-intro__services { border-left: 1px solid rgba(0, 0, 0, 0.25); padding-left: 16px; align-self: stretch; }
.cs-intro__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 10px; }
.cs-intro__services ul { padding-left: 18px; }
.cs-intro__hero { position: relative; margin-top: calc(var(--uf) * 38); }
.cs-intro__slides { position: relative; aspect-ratio: 708 / 637; overflow: hidden; background: #ddd; }
.cs-intro__slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.cs-intro__slides img.is-active { opacity: 1; }
.cs-intro__title { position: absolute; top: 5.085%; left: 5.085%; width: 75%; margin: 0; color: #fff; font-size: calc(var(--uf) * 55); line-height: 1.1; }
.cs-intro__down { display: block; width: 61px; margin: 10px 0 0 7px; }
/* From 1400px the intro breaks out of the 1440 canvas and the hero keeps growing with the window,
   as on the live site: half the width up to 1599, then a fixed 684px text column beside it. */
@media (min-width: 1400px) {
  .cs-intro { width: 100vw; margin-left: calc(50% - 50vw); padding: 0 38px 0 60px; grid-template-columns: calc(50vw - 114px) minmax(0, 1fr); column-gap: 28px; align-items: end; min-height: 0; }
  .cs-intro__hero { align-self: start; }
  .cs-intro__text { padding-top: 0; margin-bottom: 73px; } /* bottom-aligned with the slideshow, above the scroll arrow */
  .cs-intro__title { top: 36px; left: 36px; }
}
@media (min-width: 1600px) { .cs-intro { grid-template-columns: 684px minmax(0, 1fr); } }
@media (min-width: 1800px) {
  .cs-intro { padding-right: 48px; grid-template-columns: min(684px, (100vw - 140px) * 0.375) minmax(0, 1fr); column-gap: 32px; }
  .cs-intro__hero { margin-top: 12px; }
}

/* Blocks */
.cs-canvas { position: relative; width: 100%; }
.cs-item { position: absolute; overflow: hidden; }
.cs-item > .media-fill, .cs-item > .lottie { position: absolute; inset: 0; width: 100%; height: 100%; }
.cs-item[data-carousel] > .media-fill { opacity: 0; transition: opacity 1.2s ease; }
.cs-item[data-carousel] > .media-fill.is-active { opacity: 1; }
.cs-intro__title { transition: opacity 1.2s ease; }
.cs-intro__title.is-hidden { opacity: 0; }
.cs-item iframe { border: 0; }
.cs-film-panel { position: absolute; inset: 0; }
.cs-film-inset { position: absolute; }
.lottie--missing { background: rgba(0, 0, 0, 0.06); }
.cs-mrow { position: relative; }
.cs-caption { position: absolute; top: 0; }
/* Hidden at once on load; the transition only runs on the way in. Media rows are masked off and wiped open left to right when they scroll into view (site.js initMediaWipes) */
.wipe .cs-item { clip-path: inset(0 100% 0 0); }
.wipe .cs-caption { opacity: 0; }
.wipe.is-in .cs-item { clip-path: inset(0); transition: clip-path 1.1s cubic-bezier(0.65, 0, 0.35, 1); }
.wipe.is-in .cs-caption { opacity: 1; transition: opacity 0.8s var(--ease) 0.5s; }
/* Grid images: panel covers (in the image's background colour) slide off to the right in turn */
.wipe .cs-item.cs-item--panels { clip-path: none; }
.cs-cover { position: absolute; transform-origin: right center; pointer-events: none; }
.wipe.is-in .cs-cover { transform: scaleX(0); transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1); }
/* Stats fade and rise into place one by one (site.js initStats) */
.cs-stats.stagger .cs-stat { opacity: 0; transform: translateY(60px); }
.cs-stats.stagger.is-in .cs-stat { opacity: 1; transform: none; transition: opacity 0.8s var(--ease), transform 1s var(--ease); }
.cs-caption .cs-cap + .cs-cap { margin-top: 8px; }
.cs-trow { display: flex; align-items: flex-start; }
.cs-cell { flex: none; }

/* Key figures (Manrope numbers with a caption, ruled rows) */
.cs-stats { width: 75%; margin: 0 auto; border-bottom: 1px solid; border-color: rgba(0, 0, 0, 0.15); }
.theme-dark .cs-stats, .cs-stats--light { border-color: rgba(255, 255, 255, 0.25); }
.cs-stat { display: grid; grid-template-columns: 744fr 300fr; column-gap: calc(36 * var(--u)); align-items: center; padding: calc(41 * var(--u)) 0; border-top: 1px solid; border-color: inherit; }
.cs-stat__n { margin: 0; text-align: right; font: 300 calc(76 * var(--uf)) / 1 "Manrope", var(--font-body); font-feature-settings: "cv09", "cv03", "cv04", "cv11"; }
.cs-stat__t { margin: 0; max-width: 300px; }
.cs-text .t-eyebrow + * { margin-top: 10px; }

/* Previous / next */
.cs-pn { display: flex; justify-content: space-between; padding: 24px 36px calc(var(--u) * 140); }
.cs-pn a { display: block; width: 88px; height: 88px; padding: 18px; transition: transform 0.3s var(--ease); }
.cs-pn__prev:hover { transform: translateX(-6px); }
.cs-pn__next:hover { transform: translateX(6px); }

/* Tablet: captions move under the media */
@media (max-width: 1099.98px) {
  .cs-caption { position: static; width: auto !important; max-width: 560px; margin: 16px 0 0 1.6667%; }
  .cs-caption .cs-cap { font-size: 14px; }
  .cs-mrow { overflow-x: clip; }
}
/* Tablet: with the caption underneath, a row's media stretches across the page between the 24px margins */
@media (min-width: 810px) and (max-width: 1099.98px) {
  .cs .cs-mrow > .cs-canvas { width: calc((100% - 48px) * 1440 / var(--xw)); margin-left: calc(24px - (100% - 48px) * var(--x0) / var(--xw)); }
  .cs-mrow > .cs-caption { margin-left: 24px; }
}

/* Mobile */
@media (max-width: 809.98px) {
  .cs { --u: 0.5px; --us: 0.5px; padding-top: 120px; }
  .cs-intro { display: flex; flex-direction: column-reverse; align-items: stretch; min-height: 0; padding: 0 24px; }
  .cs-intro__hero { margin: 0 0 40px; }
  .cs-intro__title { font-size: 23px; }
  .cs-intro__text { padding-top: 0; margin-bottom: 73px; } /* bottom-aligned with the slideshow, above the scroll arrow */
  .cs-intro__cols { grid-template-columns: 1fr 120px; column-gap: 16px; margin-top: 20px; }
  .cs-intro__down { margin: 24px auto 0; }
  .cs-canvas { aspect-ratio: auto !important; display: flex; flex-direction: column; gap: 16px; padding: 0 24px; }
  .cs-item { position: relative; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; aspect-ratio: var(--ar); }
  .cs-caption { margin: 16px 24px 0; }
  .cs-trow { flex-direction: column; padding: 0 24px; }
  .cs-stats { width: auto; margin: 24px 24px 0; }
  .cs-stat { grid-template-columns: 1fr; row-gap: 10px; padding: 36px 0 40px; }
  .cs-stat__t { max-width: none; }
  .cs-stat__n { font-size: 54px; text-align: left; }
  .cs-cell { margin-left: 0 !important; width: 100% !important; }
  .cs-cell + .cs-cell { margin-top: 16px; }
  .cs-pn { padding: 24px 8px 64px; }
  .cs-pn a { width: 64px; height: 64px; padding: 14px; }
}

/* Row of square tiles drifting left in an endless loop (Health Check in a Box): three to a screen on tablet
   and desktop, one and a bit on phones. site.js initSliders repeats the tiles and sets the loop length. */
.cs-slider { overflow: hidden; }
.cs-slider__track { display: flex; gap: 86px; width: max-content; margin: 0; padding: 0 0 0 50px; list-style: none; }
.cs-slider__track.is-moving { animation: cs-belt var(--belt-time, 60s) linear infinite; }
.cs-slider__track.is-paused { animation-play-state: paused; }
@keyframes cs-belt { to { transform: translateX(calc(-1 * var(--belt, 0px))); } }
.cs-slider .cs-slide { position: relative; flex: none; width: calc((100vw - 272px) / 3); aspect-ratio: 1; background: #fff; }
.cs-slide > .media-fill, .cs-slide > .lottie { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-slide > .lottie.is-loaded + .media-fill { opacity: 0; }
.cs-slide__inset { position: absolute; inset: 0; }
.cs-slide__inset > .media-fill { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 809.98px) {
  .cs-slider__track { gap: 24px; padding-left: 24px; }
  .cs-slider .cs-slide { width: calc(83.3333vw - 24px) !important; height: auto !important; aspect-ratio: 1 !important; }
}