.caseStudyPage .site-header {
  position: fixed;
  transform: translateY(0);
  transition: transform 240ms ease;
  will-change: transform;
}

.caseStudyPage .site-header.is-nav-hidden {
  transform: translateY(calc(-100% - 2px));
}

.caseStudy {
  --cs-ink: #20212a;
  --cs-blue: #008bc6;
  --cs-blue-dark: #008BC6;
  --cs-lime: #a7d500;
  --cs-orange: #ff5100;
  --cs-paper: #f4f5f0;
  --cs-white: #fff;
  overflow: hidden;
  background: var(--cs-paper);
  color: var(--cs-ink);
  padding-top: 118px;
}

.caseStudy .project-nav {
  border-top: 4px solid var(--green);
}

.caseStudy h1,
.caseStudy h2,
.caseStudy p,
.caseStudy figure { margin: 0; }

.caseStudy h1,
.caseStudy h2 {
  font-weight: 800;
  letter-spacing: -.045em;
}

.caseStudy h2 {
  font-size: clamp(50px, 6.3vw, 104px);
  line-height: .92;
}

.csShell {
  width: min(1540px, calc(100% - clamp(40px, 10vw, 160px)));
  margin-inline: auto;
}

.csKicker,
.csSectionTag {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
  line-height: 1.3;
  text-transform: uppercase;
}

.csHero {
  position: relative;
  min-height: 900px;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  grid-template-rows: 1fr auto;
  gap: 50px 5vw;
  padding: 72px clamp(24px, 6vw, 110px) 42px;
  overflow: hidden;
  background: var(--cs-blue);
  color: white;
}

.csHeroRings,
.csCloseRings {
  position: absolute;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle,
    transparent 0 76px,
    rgba(255,255,255,.12) 77px 145px
  );
}

.csHeroVisual {
  position: relative;
  min-height: 650px;
  display: grid;
  place-items: center;
}

.csHeroRings {
  top: 50%;
  left: 50%;
  width: min(960px, 65vw);
  aspect-ratio: 1;
  background: repeating-radial-gradient(
    circle,
    transparent 0 58px,
    rgba(255,255,255,.12) 58px 116px
  );
  transform: translate(-50%, -50%);
}

.csHeroCopy {
  position: relative;
  z-index: 2;
  align-self: center;
  max-width: 900px;
}

.csHero h1 {
  max-width: 920px;
  margin-top: 34px;
  font-size: clamp(74px, 8.4vw, 145px);
  line-height: .86;
}

.csHeroDek {
  max-width: 680px;
  margin-top: 40px !important;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.45;
}

.csHeroMark,
.csCloseMark {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: center;
  width: min(560px, 39vw);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: white;
  box-shadow: 0 30px 80px rgba(0, 65, 93, .3);
}

.csHeroMark img,
.csIdentityLogoCrop img,
.csCloseMark img {
  position: static;
  width: 64%;
  height: auto;
  max-width: 64%;
}

.csHeroFacts {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding-top: 28px;
  border-top: 4px solid rgba(255,255,255,.35);
}

.csHeroFacts div { padding-right: 36px; }
.csHeroFacts dt {
  margin-bottom: 9px;
  color: rgba(255,255,255,.66);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.csHeroFacts dd { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.35; }

.csIntro { padding-block: 130px 145px; }
.csSectionTag { color: var(--cs-blue-dark); }

.csIntroGrid {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  align-items: end;
  gap: 9vw;
  margin-top: 58px;
}

.csIntroGrid > div { max-width: 660px; }
.csIntroGrid p { font-size: 19px; line-height: 1.62; }
.csIntroGrid .csLead { margin-bottom: 24px; font-size: clamp(24px, 2.2vw, 34px); font-weight: 750; line-height: 1.32; }

.csIdentity {
  padding: 120px 0 0;
  background: var(--cs-ink);
  color: white;
}

.csIdentityCopy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 7vw;
}

.csIdentityCopy .csSectionTag { grid-column: 1 / -1; color: var(--cs-lime); }
.csIdentityCopy p:last-child { max-width: 620px; font-size: 19px; line-height: 1.62; }

.csIdentityLockups {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(280px, .72fr);
  align-items: stretch;
  gap: clamp(22px, 3vw, 46px);
  margin-top: 100px;
}

.csIdentityStage {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  border-radius: 50%;
  background: white;
}

.csIdentityLogoCrop {
  position: absolute;
  inset: 7.5%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: white;
}

.csIdentityLogoCrop img {
  width: 56%;
  max-width: 56%;
}

.csIdentityAlternates {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 34px);
}

.csIdentityAlternate {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  margin: 0;
  overflow: hidden;
  border: 4px solid rgba(255,255,255,.38);
  border-radius: 24px;
}

.csIdentityAlternate img {
  width: 58%;
  max-height: 220px;
  height: auto;
  align-self: center;
  margin: clamp(22px, 3vw, 40px) auto;
  object-fit: contain;
}

.csIdentityAlternate figcaption {
  padding: 18px 22px;
  border-top: 4px solid rgba(255,255,255,.38);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.csIdentityAlternateColor {
  background: white;
  color: var(--cs-ink);
}

.csIdentityAlternateColor figcaption {
  border-top-color: rgba(32,33,42,.2);
}

.csIdentityAlternateMono {
  background: var(--cs-ink);
  color: white;
}

.csIdentityAlternateMono img {
  opacity: .5;
}

.csPaletteStrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 110px;
  color: white;
}

.csPaletteStrip div { min-height: 190px; display: flex; flex-direction: column; justify-content: flex-end; padding: 30px clamp(20px, 3vw, 46px); }
.csPaletteStrip div:nth-child(1) { background: var(--cs-blue); }
.csPaletteStrip div:nth-child(2) { background: var(--cs-lime); color: var(--cs-ink); }
.csPaletteStrip div:nth-child(3) { background: var(--cs-orange); }
.csPaletteStrip div:nth-child(4) { background: var(--cs-ink); }
.csPaletteStrip span { font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.csPaletteStrip strong { margin-top: 8px; font-size: clamp(20px, 2vw, 30px); }

.csRingStory {
  padding-block: 135px 145px;
  background: white;
  color: var(--cs-ink);
}

.csRingStoryInner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(54px, 8vw, 130px);
}

.csRingCopy .csSectionTag { color: var(--cs-blue-dark); }
.csRingCopy h2 { margin-top: 42px; }
.csRingCopy > p { max-width: 670px; font-size: 19px; line-height: 1.62; }
.csRingCopy .csRingLead { margin-top: 38px; font-size: clamp(24px, 2.2vw, 34px); font-weight: 750; line-height: 1.32; }
.csRingCopy .csRingLead + p { margin-top: 24px; }

.csRingDiagram {
  padding: clamp(22px, 3vw, 44px);
  border-radius: 34px;
  background: var(--cs-blue);
  color: white;
}

.csRingField {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 28px;
  background: var(--cs-blue);
}

.csRingField::before {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    transparent 0 25%,
    rgba(255,255,255,.18) 25.5% 34%,
    transparent 34.5% 41%,
    rgba(255,255,255,.18) 41.5% 50%,
    transparent 50.5% 57%,
    rgba(255,255,255,.18) 57.5% 66%,
    transparent 66.5% 73%,
    rgba(255,255,255,.18) 73.5% 82%,
    transparent 82.5% 100%
  );
  content: "";
}

.csRingCore {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 42%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: white;
  color: var(--cs-ink);
  font-size: clamp(15px, 1.8vw, 28px);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}

.csRingNotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 26px;
  padding-top: 26px;
  border-top: 4px solid rgba(255,255,255,.35);
}
.csRingNotes div { display: flex; flex-direction: column; gap: 7px; }
.csRingNotes strong { font-size: 12px; letter-spacing: .11em; text-transform: uppercase; }
.csRingNotes span { color: rgba(255,255,255,.76); font-size: 15px; line-height: 1.4; }

.csLanding { padding-block: 145px 160px; }
.csLandingIntro,
.csEmailIntro,
.csBannerIntro {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  align-items: end;
  gap: 8vw;
}
.csLandingIntro h2,
.csEmailIntro h2,
.csBannerIntro h2 { margin-top: 42px; }
.csLandingIntro > p,
.csEmailIntro > p,
.csBannerIntro > p { max-width: 620px; font-size: 19px; line-height: 1.62; }

.csDeviceComposition {
  position: relative;
  margin-top: 90px;
  padding: clamp(40px, 4vw, 64px) clamp(28px, 5vw, 74px) clamp(72px, 6vw, 90px);
  border-radius: 36px;
  background: var(--cs-blue);
}

.csDesktopBrowser {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  border: 5px solid var(--cs-ink);
  border-radius: 20px;
  background: white;
  box-shadow: 16px 18px 0 rgba(32,33,42,.24);
}

.csDesktopBrowser figcaption {
  min-height: 48px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 0 18px;
  border-bottom: 4px solid var(--cs-ink);
  color: var(--cs-ink);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.csDesktopBrowser figcaption a { justify-self: end; color: var(--cs-orange); }

.csBrowserDots { display: flex; gap: 7px; }
.csBrowserDots i { width: 10px; height: 10px; border-radius: 50%; background: var(--cs-orange); }
.csBrowserDots i:nth-child(2) { background: var(--cs-lime); }
.csBrowserDots i:nth-child(3) { background: var(--cs-blue); }

.csBrowserViewport { height: 690px; overflow: hidden; background: white; }
.csBrowserViewport iframe,
.csTabletViewport iframe,
.csPhoneViewport iframe { width: 100%; height: 100%; border: 0; background: white; }

.csResponsiveDevices {
  position: relative;
  z-index: 2;
  width: max-content;
  max-width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(32px, 4vw, 56px);
  margin: 76px auto 0;
  padding: 0 20px 44px;
}

.csTabletBrowser,
.csPhoneBrowser {
  position: relative;
  box-sizing: content-box;
  margin: 0;
  border: 6px solid var(--cs-ink);
  background: white;
  box-shadow: 16px 18px 0 rgba(32,33,42,.24);
}

.csTabletBrowser {
  flex: 0 0 auto;
  width: 768px;
  zoom: .56;
  padding: 16px 16px 18px;
  border-radius: 32px;
}

.csTabletCamera {
  width: 8px;
  height: 8px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--cs-ink);
}

.csTabletViewport {
  width: 768px;
  height: 1024px;
  overflow: hidden;
  border: 3px solid var(--cs-ink);
  border-radius: 15px;
}

.csPhoneBrowser {
  flex: 0 0 auto;
  width: 390px;
  zoom: .64;
  padding: 20px 12px 16px;
  border-radius: 42px;
}
.csPhoneSpeaker { width: 70px; height: 7px; margin: 0 auto 14px; border-radius: 99px; background: var(--cs-ink); }
.csPhoneViewport { width: 390px; height: 844px; overflow: hidden; border: 3px solid var(--cs-ink); border-radius: 18px; }
.csPhoneBrowser::after {
  width: 82px;
  height: 6px;
  display: block;
  margin: 13px auto 0;
  border-radius: 99px;
  background: var(--cs-ink);
  content: "";
}
.csTabletViewport iframe,
.csPhoneViewport iframe { pointer-events: none; }
.csTabletBrowser figcaption,
.csPhoneBrowser figcaption {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  width: max-content;
  max-width: 100%;
  color: white;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.csSocial { padding-block: 130px 150px; background: var(--cs-lime); }
.csSocialIntro { display: grid; grid-template-columns: 1fr .75fr; gap: 6vw; align-items: end; }
.csSocialIntro .csSectionTag { grid-column: 1 / -1; color: var(--cs-ink); }
.csSocialIntro p:last-child { max-width: 560px; font-size: 19px; line-height: 1.58; }

.csSocialGrid {
  display: grid;
  grid-template-columns: 1.15fr .85fr .85fr;
  grid-template-rows: auto auto;
  gap: clamp(16px, 2vw, 30px);
  align-items: start;
  margin-top: 90px;
}
.csSocialCard { overflow: hidden; border: 4px solid var(--cs-ink); border-radius: 26px; box-shadow: 16px 18px 0 rgba(32,33,42,.16); }
.csSocialCard img { width: 100%; height: auto; }
.csSocialCard1 { grid-row: 1 / span 2; align-self: center; }
.csSocialCard2 { margin-top: 70px; }
.csSocialCard4 { grid-column: 2 / 4; width: 44%; justify-self: center; margin-top: -70px; }

.csEmail { padding-block: 140px 170px; background: var(--cs-ink); color: white; }
.csEmailIntro .csSectionTag { color: var(--cs-lime); }
.csEmailRail {
  width: min(1760px, calc(100% - 36px));
  display: grid;
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  gap: clamp(14px, 2vw, 28px);
  align-items: start;
  margin: 100px auto 0;
}
.csEmailCard { position: relative; overflow: hidden; border-radius: 18px; background: white; box-shadow: 0 24px 55px rgba(0,0,0,.22); }
.csEmailCard > img { width: 100%; height: auto; }
.csEmailLogoCover {
  position: absolute;
  right: 33%;
  bottom: 6.5%;
  width: 34%;
  height: 10%;
  display: grid;
  place-items: center;
  background: var(--cs-ink);
}
.csEmailLogoCover img { width: auto; height: 54%; max-height: 48px; aspect-ratio: 1; object-fit: contain; box-shadow: none !important; filter: none !important; }
.csEmailCard3 .csEmailLogoCover { bottom: 8.5%; }
.csEmailCard2 { margin-top: 110px; }
.csEmailCard3 { margin-top: 35px; }
.csEmailCard4 { margin-top: 155px; }

.csBanners { padding-block: 145px 165px; }
.csBannerWall {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(230px, .52fr);
  grid-template-rows: auto auto auto;
  gap: clamp(18px, 2vw, 32px);
  align-items: start;
  margin-top: 95px;
  padding: clamp(28px, 5vw, 74px);
  border-radius: 34px;
  background: white;
}
.csBannerWall figure { overflow: hidden; border: 4px solid var(--cs-ink); border-radius: 16px; background: white; box-shadow: 12px 14px 0 rgba(32,33,42,.12); }
.csBannerWall img { width: 100%; height: auto; }
.csBannerHero { grid-column: 1 / 4; }
.csBannerLeaderboard { grid-column: 1 / 3; }
.csBannerRectangle { grid-column: 1; grid-row: 3; width: 72%; justify-self: end; }
.csBannerHalfPage { grid-column: 3; grid-row: 2 / 4; }

.csClose {
  position: relative;
  min-height: 820px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: 7vw;
  padding: 110px clamp(24px, 7vw, 120px);
  overflow: hidden;
  background: var(--cs-blue);
  color: white;
}
.csCloseVisual {
  position: relative;
  min-height: 650px;
  display: grid;
  place-items: center;
}
.csCloseRings {
  top: 50%;
  left: 50%;
  width: min(950px, 65vw);
  aspect-ratio: 1;
  background: repeating-radial-gradient(
    circle,
    transparent 0 58px,
    rgba(255,255,255,.12) 58px 116px
  );
  transform: translate(-50%, -50%);
}
.csCloseCopy { position: relative; z-index: 2; max-width: 900px; }
.csCloseCopy .csSectionTag { color: white; }
.csCloseCopy h2 { margin-top: 44px; font-size: clamp(64px, 8vw, 130px); }
.csCloseCopy > p { max-width: 690px; margin-top: 40px; font-size: 20px; line-height: 1.58; }
.csCloseCopy a { display: inline-block; margin-top: 40px; padding-bottom: 6px; border-bottom: 4px solid currentColor; font-size: 13px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.csCloseMark { width: min(500px, 36vw); }

@media (max-width: 1050px) {
  .csHero { grid-template-columns: 1fr; padding-top: 64px; }
  .csHeroMark { width: min(570px, 70vw); }
  .csIdentityCopy,
  .csLandingIntro,
  .csEmailIntro,
  .csBannerIntro { grid-template-columns: 1fr; align-items: start; }
  .csIdentityCopy p:last-child,
  .csLandingIntro > p,
  .csEmailIntro > p,
  .csBannerIntro > p { margin-top: 34px; }
  .csIdentityLockups { grid-template-columns: 1fr; }
  .csIdentityStage { width: min(760px, 100%); justify-self: center; }
  .csIdentityAlternates { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .csIdentityAlternate img { max-height: none; }
  .csDesktopBrowser { width: 100%; }
  .csResponsiveDevices { gap: 32px; margin-top: 64px; }
  .csTabletBrowser { zoom: .48; }
  .csPhoneBrowser { zoom: .56; }
  .csEmailRail { grid-template-columns: repeat(2, minmax(260px, 1fr)); width: min(900px, calc(100% - 48px)); }
  .csEmailCard2 { margin-top: 90px; }
  .csEmailCard3 { margin-top: 0; }
  .csEmailCard4 { margin-top: 90px; }
}

@media (max-width: 760px) {
  .csShell { width: min(100% - 40px, 1540px); }
  .csHero { min-height: auto; padding: 54px 20px 36px; }
  .csHero h1 { font-size: clamp(66px, 19vw, 104px); }
  .csHeroVisual { min-height: min(680px, 100vw); }
  .csHeroRings { width: min(960px, 145vw); }
  .csHeroMark { width: min(520px, 90vw); }
  .csHeroFacts { grid-template-columns: 1fr; gap: 24px; }
  .csHeroFacts div { padding-right: 0; }
  .csIntro { padding-block: 90px 100px; }
  .csIntroGrid,
  .csSocialIntro,
  .csClose { grid-template-columns: 1fr; align-items: start; }
  .csIntroGrid { gap: 42px; }
  .csIdentity { padding-top: 90px; }
  .csIdentityLockups { margin-top: 70px; }
  .csIdentityAlternates { gap: 18px; }
  .csIdentityAlternate img { width: 54%; }
  .csPaletteStrip { grid-template-columns: 1fr 1fr; margin-top: 80px; }
  .csRingStory { padding-block: 95px 105px; }
  .csRingStoryInner { grid-template-columns: 1fr; }
  .csRingDiagram { width: min(680px, 100%); margin: 0 auto; }
  .csLanding { padding-block: 95px 110px; }
  .csDeviceComposition { padding: 28px 22px 52px; }
  .csDesktopBrowser { width: 100%; }
  .csDesktopBrowser figcaption { grid-template-columns: 1fr auto; }
  .csDesktopBrowser figcaption > span:nth-child(2) { display: none; }
  .csBrowserViewport { height: 500px; }
  .csResponsiveDevices { gap: 24px; margin-top: 52px; padding-inline: 12px; }
  .csTabletBrowser { zoom: .38; }
  .csPhoneBrowser { zoom: .46; }
  .csSocial { padding-block: 95px 105px; }
  .csSocialIntro { gap: 36px; }
  .csSocialGrid { grid-template-columns: 1fr 1fr; margin-top: 62px; }
  .csSocialCard1 { grid-row: auto; }
  .csSocialCard2 { margin-top: 46px; }
  .csSocialCard4 { grid-column: auto; width: 100%; margin-top: 46px; }
  .csEmail { padding-block: 100px 120px; }
  .csEmailRail { grid-template-columns: 1fr 1fr; margin-top: 70px; }
  .csEmailCard2,
  .csEmailCard4 { margin-top: 56px; }
  .csBanners { padding-block: 95px 110px; }
  .csBannerWall { grid-template-columns: 1fr 1fr; padding: 24px; }
  .csBannerHero { grid-column: 1 / 3; }
  .csBannerLeaderboard { grid-column: 1 / 3; }
  .csBannerRectangle { grid-column: 1; grid-row: 3; width: 100%; }
  .csBannerHalfPage { grid-column: 2; grid-row: 3; }
  .csClose { min-height: auto; padding-block: 100px; }
  .csCloseVisual { min-height: min(620px, 100vw); margin-top: 48px; }
  .csCloseRings { width: min(900px, 145vw); }
  .csCloseMark { width: min(480px, 80vw); justify-self: center; }
}

@media (max-width: 480px) {
  .caseStudy h2 { font-size: 52px; }
  .csHero h1 { font-size: 68px; }
  .csHeroDek { font-size: 19px; }
  .csIdentityStage { width: 100%; }
  .csIdentityAlternates { grid-template-columns: 1fr; }
  .csIdentityAlternate img { width: 50%; }
  .csPaletteStrip { grid-template-columns: 1fr; }
  .csPaletteStrip div { min-height: 125px; }
  .csRingNotes { grid-template-columns: 1fr; }
  .csDeviceComposition { padding: 18px 14px 38px; }
  .csBrowserViewport { height: 430px; }
  .csResponsiveDevices {
    flex-direction: column;
    align-items: center;
    gap: 60px;
    margin-top: 48px;
    padding: 0 0 34px;
  }
  .csTabletBrowser { width: 768px; zoom: .36; padding: 9px; border-width: 4px; border-radius: 20px; }
  .csPhoneBrowser { width: 390px; zoom: .52; padding: 12px 7px 9px; border-width: 4px; border-radius: 24px; }
  .csPhoneSpeaker { width: 44px; height: 5px; margin-bottom: 8px; }
  .csSocialGrid { gap: 13px; }
  .csSocialCard { border-radius: 14px; box-shadow: 8px 9px 0 rgba(32,33,42,.16); }
  .csEmailRail { grid-template-columns: 1fr; width: calc(100% - 40px); }
  .csEmailCard2,
  .csEmailCard3,
  .csEmailCard4 { margin-top: 0; }
  .csBannerWall { padding: 16px; gap: 14px; }
  .csCloseCopy h2 { font-size: 64px; }
}

@media (max-width: 360px) {
  .csTabletBrowser { zoom: .3; }
  .csPhoneBrowser { zoom: .46; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .caseStudyPage .site-header { transition: none; }
}