.case-page { height: 7391px; }

/* --sx is the section's own left offset, so dividers can be placed relative to the page edge. */
.case-section {
  --sx: 0px;
  position: absolute;
  left: var(--sx);
  width: 1517px;
  z-index: 1;
}

.case-section > .divider {
  left: calc(20px - var(--sx)); 
  width: 1512px; 
}

.case-divider { bottom: -0.5px; }

.case-heading {
  position: absolute;
  top: 0;
  margin: 0;
  font-family: var(--f-grotesk);
  font-weight: 400;
  font-size: 75px;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
}

.case-text {
  position: absolute;
  margin: 0;
  font-family: var(--f-display);
  font-size: 35px;
  line-height: 45px;
  text-transform: uppercase;
}
.case-text p { margin: 0; }

.case-media,
.case-hero__media,
.services__media,
.identity__media {
  position: absolute;
  overflow: hidden;
}
.case-hero__media img,
.services__media img,
.identity__media img {
  position: absolute;
  max-width: none;
}

/* ---------- Hero ---------- */
.case-hero { --sx: -5px; top: 331px; height: 1312px; }

.case-hero__title {
  position: absolute;
  left: 42px;
  top: 0;
  width: 922px;
  height: 136px;
  margin: 0;
  display: flex;
  align-items: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 140px;
  line-height: 45px;
  text-transform: uppercase;
  white-space: nowrap;
}

.case-hero__subtitle {
  position: absolute;
  left: 42px;
  top: 183px;
  width: 1002px;
  margin: 0;
  font-family: var(--f-grotesk);
  font-size: 35px;
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.case-hero__divider-top { top: 243.5px; }

.case-hero__media { left: 120.5px; top: 284px; width: 1276px; height: 957px; }
.case-hero__media img { left: -16.95%; top: -16.87%; width: 133.85%; height: 133.85%; }

/* ---------- Brief ---------- */
.brief { --sx: -5px; top: 1729px; height: 809px; }

.brief__heading { left: 539.5px; transform: translateX(-50%); }
.brief__text { left: 44px; top: 142px; width: 1427px; }

/* ---------- Services ---------- */
.services { --sx: -5px; top: 2538px; height: 662px; }

.services__media { left: 75px; top: 11px; width: 640px; height: 640px; }
.services__media img { left: -25.02%; top: -0.03%; width: 149.99%; height: 100%; }

.services__rule { position: absolute; left: 757.5px; top: 0; }

.services__heading { left: 1474px; top: 71px; transform: translateX(-100%); }

.services__list {
  position: absolute;
  left: 954px;
  top: 217px;
  width: 508px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--f-display);
  font-size: 35px;
  line-height: 45px;
  text-align: right;
  text-transform: uppercase;
}

.services__divider { top: 659.5px; }

/* ---------- Concept ---------- */
.concept { --sx: -8px; top: 3284px; height: 585px; }

.concept__heading { left: 270px; transform: translateX(-50%); }
/* Narrower than the Figma box (1429px) so lines break where they do in the design. */
.concept__text { left: 45px; top: 145px; width: 1418px; }

/* ---------- Brand identity ---------- */
.identity { --sx: -5px; top: 3919px; height: 2198px; }

.identity__heading { right: 46px; text-align: right; }
.identity__palette-text { left: 42px; top: 162px; width: 1432px; }

.swatches {
  position: absolute;
  left: 503px;
  top: 488px;
  display: grid;
  grid-template-columns: repeat(4, 242px);
  grid-auto-rows: 363px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.swatch {
  padding-top: var(--ly);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-display);
  font-size: 35px;
  line-height: 45px;
  text-transform: uppercase;
}
.swatch span {
  display: block;
  width: var(--lw);
  margin-left: var(--lx);
  text-align: right;
}

.identity__media { left: 45px; top: 1289px; width: 819px; height: 819px; }
.identity__media img { left: -25.03%; top: 0; width: 150.07%; height: 100%; }

.identity__type-text { left: 889px; top: 1289px; width: 484px; text-align: right; }

/* ---------- Outcome ---------- */
.outcome { --sx: -2px; top: 6181px; height: 513px; }

.outcome__heading { left: 358px; transform: translateX(-100%); }
.outcome__text { left: 39px; top: 139px; width: 1331px; }

/* ---------- Link buttons ---------- */
.btn-website { left: 161px; top: 6833px; width: 461px; height: 128px; }
.btn-website .pill-btn__fill { inset: 0 0 6px 0; background: var(--c-cyan); border-radius: 60px; }
.btn-website .pill-btn__border { inset: 6px 0 0 0; border-radius: 60px; }
.btn-website .pill-btn__label { top: 39px; left: 7px; right: 6px; }

.btn-github { left: 859px; top: 6832px; width: 512px; height: 130px; }
.btn-github .pill-btn__fill { inset: 0 26px 8px 25px; border-radius: 60px; }
.btn-github .pill-btn__border { inset: 8px 26px 0 25px; border-radius: 60px; }
.btn-github .pill-btn__label { top: 46px; }

.btn-website .pill-btn__label,
.btn-github .pill-btn__label {
  font-size: 64px;
  line-height: 45px;
  text-transform: none;
  white-space: nowrap;
}

/* ---------- Footer ---------- */
.footer--case { top: 7122px; height: 269px; }
.footer--case .footer__inner { left: 371px; }
.case--bsff .case-hero__subtitle { left: 141px; width: 804px; }

.case--bsff .case-hero__media { left: 126px; top: 288px; width: 1270px; height: 953px; }
.case--bsff .case-hero__media img { left: -17.48%; top: -17.34%; width: 135.02%; height: 134.9%; }

.case--bsff .brief__heading { top: -10px; left: 546.5px; }

.case--bsff .services__media { left: 40px; top: 95px; width: 674px; height: 411px; }

.case--bsff .concept__text { width: 1429px; }

.case--bsff .swatches { left: 45px; top: 430px; grid-template-columns: repeat(5, 242px); }

.case--bsff .identity__type-text { left: 45px; top: 1256px; width: 1039px; text-align: left; }

.case--bsff .identity__media { left: 515px; top: 1557px; width: 959px; height: 584px; }

.case--bsff .services__media img,
.case--bsff .identity__media img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case--bsff .outcome__text { left: 42px; top: 127px; }

.case--caveau .case-hero__title {
  top: -115px;
  width: 1475px;
  height: 272px;
  line-height: 136px;
  white-space: normal;
}
.case--caveau .case-hero__subtitle { left: 159px; width: 768px; }

.case--caveau .case-hero__media { left: 120px; top: 284px; width: 1282px; height: 962px; }
.case--caveau .case-hero__media img { left: -18.03%; top: -17.93%; width: 136.07%; height: 136.03%; }

.case--caveau .brief__heading { top: -10px; left: 546.5px; }
.case--caveau .brief__text { left: 42px; top: 207px; }

.case--caveau .services__media { left: 219px; top: 28px; width: 302px; height: 623px; }
.case--caveau .services__media img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case--caveau .concept__text { width: 1429px; }

.case--caveau .identity__palette-text { left: 45px; top: 156px; width: 1338px; }
.case--caveau .swatches { left: 277px; top: 381px; }
.case--caveau .identity__type-text { left: 45px; top: 963px; width: 1039px; text-align: left; }

.case--caveau .identity__media { left: 459px; top: 1275px; width: 897px; height: 598px; }
.case--caveau .identity__media img { left: -19.19%; top: -19.22%; width: 138.38%; height: 138.4%; }

.case--caveau .outcome__text { left: 42px; top: 127px; }

/* ---------- Phones (up to 767px): stacked case page ---------- */
@media (max-width: 767px) {
  .case-page { height: auto; }

  .case-page .case-section {
    position: relative;
    left: 0;
    top: auto;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 48px 0;
  }
  .case-page .case-section > * {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    width: auto;
    height: auto;
    margin: 0;
    transform: none;
    white-space: normal;
  }
  .case-page .case-section > .divider {
    width: 100%;
    height: 1px;
    object-fit: fill;
  }

  .case-page .case-heading {
    font-size: 40px;
    line-height: 1.1;
    text-align: left;
  }
  .case-page .case-text {
    font-size: 12px;
    line-height: 1.5;
  }
  .case-page .case-text p + p { margin-top: 1em; }

  /* Hero */
  .case-page .case-hero__title {
    font-size: 56px;
    line-height: 1;
    height: auto;
  }
  .case-page .case-hero__subtitle {
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
  }
  .case-page .case-hero__media { aspect-ratio: 4 / 3; overflow: hidden; }

  /* Images inside the media boxes fill them */
  .case-page .case-hero__media img,
  .case-page .services__media img,
  .case-page .identity__media img {
    position: absolute;
    left: 0;
    top: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }
  .case-page .services__media { aspect-ratio: 4 / 5; overflow: hidden; }
  .case-page .identity__media { aspect-ratio: 4 / 3; overflow: hidden; }

  /* Services */
  .case-page .services__rule { display: none; }
  .case-page .services__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
  }

  /* Identity */
  .case-page .identity__heading,
  .case-page .identity__type-text { text-align: left; }
  .case-page .swatches {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .case-page .swatch {
    min-height: 96px;
    padding: 14px 12px;
    font-size: 11px;
    line-height: 1.2;
  }
  .case-page .swatch span {
    display: block;
    width: auto;
    margin-left: 0;
    text-align: left;
  }

  /* Link buttons */
  .case-page .btn-website,
  .case-page .btn-github {
    display: block;
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 420px;
    height: 84px;
    margin-top: 24px;
  }
  .case-page .btn-website .pill-btn__fill,
  .case-page .btn-github .pill-btn__fill { inset: 0 0 6px 0; }
  .case-page .btn-website .pill-btn__border,
  .case-page .btn-github .pill-btn__border { inset: 6px 0 0 0; }
  .case-page .btn-website .pill-btn__label,
  .case-page .btn-github .pill-btn__label {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    white-space: normal;
  }

  /* Footer */
  .case-page .footer--case { top: auto; height: auto; }
  .footer--case .footer__inner { left: auto; top: auto; }
}