/* =========================================================

   CRAFTSBYHAMILTON

   AVARA SKINCARE — CASE STUDY

   RESPONSIVE EDITORIAL SYSTEM

   ========================================================= */

/* =========================================================

   01. FOUNDATION / RESET

========================================================= */

main.ch-case-study,
main.ch-case-study *,
main.ch-case-study *::before,
main.ch-case-study *::after {
  box-sizing: border-box;
}

main.ch-case-study {
  --cbh-black: #000;

  --cbh-white: #fff;

  --cbh-red: #ff0000;

  --cbh-grey: #555;

  --cbh-line: #000;

  display: block !important;

  width: 100% !important;

  max-width: 100% !important;

  margin: 0 !important;

  padding: 0 !important;

  background: var(--cbh-white) !important;

  color: var(--cbh-black) !important;

  font-family: "Poppins", sans-serif !important;

  overflow: hidden !important;
}

main.ch-case-study h1,
main.ch-case-study h2,
main.ch-case-study h3,
main.ch-case-study p,
main.ch-case-study figure {
  margin-top: 0 !important;
}

main.ch-case-study figure {
  margin-left: 0 !important;

  margin-right: 0 !important;
}

main.ch-case-study img {
  display: block !important;

  max-width: 100% !important;
}

main.ch-case-study a {
  color: inherit;
}

/* =========================================================

   02. HERO

========================================================= */

main.ch-case-study .ch-case-study__hero-image {
  position: relative !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 100% !important;

  height: 88vh !important;

  min-height: 620px !important;

  margin: 0 !important;

  padding: 0 !important;

  overflow: hidden !important;

  background: #fff !important;
}

/* HERO IMAGE */

main.ch-case-study .ch-case-study__hero-image > img {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;

  height: 100% !important;

  max-width: none !important;

  object-fit: cover !important;

  object-position: center center !important;
}

/* HERO OVERLAY */

main.ch-case-study .ch-case-study__hero-overlay {
  position: absolute !important;

  inset: 0 !important;

  z-index: 2 !important;

  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.2) 0%,

    rgba(0, 0, 0, 0.04) 35%,

    rgba(0, 0, 0, 0.25) 60%,

    rgba(0, 0, 0, 0.86) 100%
  ) !important;

  pointer-events: none !important;
}

/* =========================================================

   03. HERO CONTENT

========================================================= */

main.ch-case-study .ch-case-study__hero-content {
  position: relative !important;

  z-index: 3 !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  width: 100% !important;

  max-width: 1250px !important;

  margin: 0 auto !important;

  padding: 30px 50px !important;

  color: #fff !important;

  text-align: center !important;
}

/* EYEBROW */

main.ch-case-study .ch-case-study__hero-content .ch-case-study__eyebrow {
  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 12px !important;

  margin: 0 0 22px !important;

  color: #fff !important;

  font-size: 11px !important;

  font-weight: 600 !important;

  line-height: 1.4 !important;

  letter-spacing: 0.17em !important;

  text-transform: uppercase !important;

  text-align: center !important;
}

/* EYEBROW LINE */

main.ch-case-study
  .ch-case-study__hero-content
  .ch-case-study__eyebrow::before {
  content: "" !important;

  display: block !important;

  width: 35px !important;

  height: 1px !important;

  flex: 0 0 35px !important;

  background: var(--cbh-red) !important;
}

/* =========================================================
   AVARA CASE STUDY
   HERO CTA
========================================================= */

main.ch-case-study .ch-case-study__hero-button {
  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 14px !important;

  margin-top: 32px !important;

  padding: 15px 24px !important;

  background: #ff0000 !important;
  color: #ffffff !important;

  font-family: "Poppins", sans-serif !important;

  font-size: 11px !important;
  font-weight: 600 !important;

  line-height: 1 !important;
  letter-spacing: 0.12em !important;

  text-align: center !important;
  text-decoration: none !important;

  text-transform: uppercase !important;

  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease !important;
}


/* ARROW */

main.ch-case-study .ch-case-study__hero-button i {
  font-size: 12px !important;

  transition:
    transform 0.3s ease !important;
}


/* DESKTOP HOVER */

@media (hover: hover) and (pointer: fine) {

  main.ch-case-study .ch-case-study__hero-button:hover {
    color: #000000 !important;
    

    transform: translateY(-2px) !important;
  }

  main.ch-case-study .ch-case-study__hero-button:hover i {
    transform: translateX(5px) !important;
  }

}


/* TABLET */

@media (max-width: 1000px) {

  main.ch-case-study .ch-case-study__hero-button {
    margin-top: 28px !important;
  }

}


/* MOBILE */

@media (max-width: 700px) {

  main.ch-case-study .ch-case-study__hero-button {
    margin-top: 24px !important;

    padding: 14px 21px !important;

    font-size: 10px !important;
  }

}


/* SMALL PHONES */

@media (max-width: 420px) {

  main.ch-case-study .ch-case-study__hero-button {
    margin-top: 22px !important;

    padding: 13px 19px !important;

    font-size: 9px !important;

    letter-spacing: 0.1em !important;
  }

  main.ch-case-study .ch-case-study__hero-button i {
    font-size: 10px !important;
  }

}

/* TITLE */

main.ch-case-study .ch-case-study__title {
  display: block !important;

  width: 100% !important;

  max-width: 1150px !important;

  margin: 0 auto !important;

  padding: 0 !important;

  color: #fff !important;

  font-size: clamp(58px, 9vw, 140px) !important;

  font-weight: 500 !important;

  line-height: 0.88 !important;

  letter-spacing: -0.07em !important;

  text-align: center !important;

  text-wrap: balance;
}

/* DESCRIPTION */

main.ch-case-study .ch-case-study__hero-content .ch-case-study__intro {
  display: block !important;

  width: 100% !important;

  max-width: 620px !important;

  margin: 25px auto 0 !important;

  color: rgba(255, 255, 255, 0.9) !important;

  font-size: 14px !important;

  font-weight: 400 !important;

  line-height: 1.7 !important;

  text-align: center !important;
}

/* =========================================================

   04. PROJECT INTRO

========================================================= */

main.ch-case-study .ch-case-study__intro-section {
  display: grid !important;

  grid-template-columns:
    minmax(120px, 0.25fr)
    minmax(0, 1fr) !important;

  gap: clamp(40px, 7vw, 110px) !important;

  width: min(1320px, calc(100% - 80px)) !important;

  margin: 0 auto !important;

  padding: clamp(80px, 9vw, 130px) 0 !important;

  background: #fff !important;
}

/* LABEL */

main.ch-case-study .ch-case-study__intro-label {
  margin: 0 !important;

  padding-top: 6px !important;

  color: var(--cbh-red) !important;

  font-size: 11px !important;

  font-weight: 600 !important;

  line-height: 1.5 !important;

  letter-spacing: 0.17em !important;

  text-transform: uppercase !important;
}

/* CONTENT */

main.ch-case-study .ch-case-study__intro-content {
  width: 100% !important;

  max-width: 900px !important;
}

main.ch-case-study .ch-case-study__intro-content h2 {
  width: 100% !important;

  max-width: 880px !important;

  margin: 0 0 38px !important;

  color: #000 !important;

  font-size: clamp(40px, 5vw, 72px) !important;

  font-weight: 500 !important;

  line-height: 0.96 !important;

  letter-spacing: -0.06em !important;

  text-wrap: balance;
}

main.ch-case-study .ch-case-study__intro-content p {
  width: 100% !important;

  max-width: 680px !important;

  margin: 0 0 18px !important;

  color: #000 !important;

  font-size: 14px !important;

  line-height: 1.8 !important;
}

main.ch-case-study .ch-case-study__intro-content p:last-child {
  margin-bottom: 0 !important;
}

/* =========================================================

   05. PROJECT INFO

========================================================= */

main.ch-case-study .ch-case-study__project-info {
  display: grid !important;

  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

  width: min(1320px, calc(100% - 80px)) !important;

  margin: 0 auto !important;

  padding: 0 0 50px !important;

  border-bottom: 1px solid #000 !important;
}

main.ch-case-study .ch-case-study__project-info > div {
  min-width: 0 !important;

  margin: 0 !important;

  padding: 22px 35px 22px 0 !important;

  border-top: 1px solid #000 !important;
}

main.ch-case-study .ch-case-study__project-info span {
  display: block !important;

  margin: 0 0 8px !important;

  color: var(--cbh-red) !important;

  font-size: 9px !important;

  font-weight: 600 !important;

  line-height: 1.5 !important;

  letter-spacing: 0.16em !important;

  text-transform: uppercase !important;
}

main.ch-case-study .ch-case-study__project-info strong {
  display: block !important;

  max-width: 350px !important;

  margin: 0 !important;

  font-size: 13px !important;

  font-weight: 500 !important;

  line-height: 1.6 !important;
}

/* =========================================================

   06. GENERAL IMAGE

========================================================= */

main.ch-case-study .ch-case-study__image {
  display: block !important;

  width: min(1240px, calc(100% - 80px)) !important;

  margin: 75px auto !important;

  padding: 0 !important;
}

main.ch-case-study .ch-case-study__image img {
  display: block !important;

  width: 100% !important;

  height: auto !important;

  max-width: 100% !important;

  margin: 0 !important;
}

/* LARGE */

main.ch-case-study .ch-case-study__image--large {
  width: min(1080px, calc(100% - 80px)) !important;
}

/* FULL BLEED */

main.ch-case-study .ch-case-study__image--full {
  width: 100% !important;

  margin-left: 0 !important;

  margin-right: 0 !important;
}

main.ch-case-study .ch-case-study__image--full img {
  width: 100% !important;
}

/* CAPTION */

main.ch-case-study .ch-case-study__image figcaption {
  margin: 10px 0 0 !important;

  color: var(--cbh-red) !important;

  font-size: 9px !important;

  font-weight: 600 !important;

  line-height: 1.5 !important;

  letter-spacing: 0.15em !important;

  text-transform: uppercase !important;
}

/* =========================================================

   07. SECTION HEADERS

========================================================= */

main.ch-case-study .ch-case-study__section {
  width: min(1320px, calc(100% - 80px)) !important;

  margin: 150px auto 60px !important;

  padding: 0 !important;
}

main.ch-case-study .ch-case-study__section-header {
  width: min(900px, 100%) !important;

  margin-left: auto !important;

  margin-right: 0 !important;
}

/* EYEBROW */

main.ch-case-study .ch-case-study__section-header .ch-case-study__eyebrow {
  display: flex !important;

  align-items: center !important;

  gap: 10px !important;

  margin: 0 0 20px !important;

  color: var(--cbh-red) !important;

  font-size: 9px !important;

  font-weight: 600 !important;

  line-height: 1.5 !important;

  letter-spacing: 0.17em !important;

  text-transform: uppercase !important;
}

main.ch-case-study
  .ch-case-study__section-header
  .ch-case-study__eyebrow::before {
  content: "" !important;

  display: block !important;

  width: 25px !important;

  height: 1px !important;

  background: var(--cbh-red) !important;
}

/* HEADING */

main.ch-case-study .ch-case-study__section-header h2 {
  width: 100% !important;

  max-width: 880px !important;

  margin: 0 0 28px !important;

  color: #000 !important;

  font-size: clamp(45px, 6vw, 84px) !important;

  font-weight: 500 !important;

  line-height: 0.92 !important;

  letter-spacing: -0.065em !important;

  text-wrap: balance;
}

/* DESCRIPTION */

main.ch-case-study .ch-case-study__section-header > p:last-child {
  width: 100% !important;

  max-width: 620px !important;

  margin: 0 !important;

  color: #555 !important;

  font-size: 14px !important;

  line-height: 1.8 !important;
}

/* =========================================================

   08. TWO COLUMN

========================================================= */

main.ch-case-study .ch-case-study__two-column {
  display: grid !important;

  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  gap: clamp(20px, 3vw, 45px) !important;

  width: min(1240px, calc(100% - 80px)) !important;

  margin: 70px auto !important;

  padding: 0 !important;
}

main.ch-case-study .ch-case-study__two-column .ch-case-study__image {
  width: 100% !important;

  margin: 0 !important;
}

/* =========================================================

   09. THREE COLUMN

========================================================= */

main.ch-case-study .ch-case-study__three-column {
  display: grid !important;

  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

  gap: 20px !important;

  width: min(1240px, calc(100% - 80px)) !important;

  margin: 70px auto !important;

  padding: 0 !important;
}

main.ch-case-study .ch-case-study__three-column .ch-case-study__image {
  width: 100% !important;

  margin: 0 !important;
}

/* =========================================================

   10. SPLIT LAYOUT

========================================================= */

main.ch-case-study .ch-case-study__split {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(260px, 0.5fr) !important;

  gap: clamp(40px, 7vw, 110px) !important;

  align-items: center !important;

  width: min(1240px, calc(100% - 80px)) !important;

  margin: 90px auto !important;

  padding: 0 !important;
}

main.ch-case-study .ch-case-study__split .ch-case-study__image {
  width: 100% !important;

  margin: 0 !important;
}

main.ch-case-study .ch-case-study__split-content {
  width: 100% !important;

  max-width: 420px !important;

  margin: 0 !important;
}

/* SPLIT EYEBROW */

main.ch-case-study .ch-case-study__split-content .ch-case-study__eyebrow {
  display: flex !important;

  align-items: center !important;

  gap: 10px !important;

  margin: 0 0 18px !important;

  color: var(--cbh-red) !important;

  font-size: 9px !important;

  font-weight: 600 !important;

  line-height: 1.5 !important;

  letter-spacing: 0.16em !important;

  text-transform: uppercase !important;
}

main.ch-case-study
  .ch-case-study__split-content
  .ch-case-study__eyebrow::before {
  content: "" !important;

  width: 22px !important;

  height: 1px !important;

  background: var(--cbh-red) !important;
}

/* SPLIT HEADING */

main.ch-case-study .ch-case-study__split-content h3 {
  margin: 0 0 20px !important;

  color: #000 !important;

  font-size: clamp(32px, 4vw, 56px) !important;

  font-weight: 500 !important;

  line-height: 0.95 !important;

  letter-spacing: -0.055em !important;
}

/* SPLIT TEXT */

main.ch-case-study
  .ch-case-study__split-content
  p:not(.ch-case-study__eyebrow) {
  margin: 0 !important;

  color: #555 !important;

  font-size: 13px !important;

  line-height: 1.8 !important;
}

/* =========================================================

   11. OUTCOME

========================================================= */

main.ch-case-study .ch-case-study__outcome {
  width: min(1320px, calc(100% - 80px)) !important;

  margin: 130px auto 0 !important;

  padding: 70px 0 !important;

  border-top: 1px solid #000 !important;

  border-bottom: 1px solid #000 !important;
}

/* EYEBROW */

main.ch-case-study .ch-case-study__outcome .ch-case-study__eyebrow {
  display: flex !important;

  align-items: center !important;

  gap: 10px !important;

  margin: 0 0 20px !important;

  color: var(--cbh-red) !important;

  font-size: 9px !important;

  font-weight: 600 !important;

  line-height: 1.5 !important;

  letter-spacing: 0.17em !important;

  text-transform: uppercase !important;
}

main.ch-case-study .ch-case-study__outcome .ch-case-study__eyebrow::before {
  content: "" !important;

  width: 25px !important;

  height: 1px !important;

  background: var(--cbh-red) !important;
}

/* OUTCOME HEADING */

main.ch-case-study .ch-case-study__outcome h2 {
  max-width: 1000px !important;

  margin: 0 0 30px !important;

  color: #000000 !important;

  font-size: clamp(25px, 7vw, 80px) !important;

  font-weight: 500 !important;

  line-height: 0.9 !important;

  letter-spacing: -0.07em !important;

  text-wrap: balance;
}

/* OUTCOME TEXT */

main.ch-case-study .ch-case-study__outcome > p:last-child {
  max-width: 630px !important;

  margin: 0 !important;

  color: #000 !important;

  font-size: 14px !important;

  line-height: 1.8 !important;
}

/* =========================================================

   12. NEXT PROJECT

========================================================= */

/*

   NEXT PROJECT

   - No top line

   - Pushed further to the right

   - Editorial layout inspired by the reference

*/

main.ch-case-study .ch-case-study__navigation {
  display: flex !important;

  justify-content: flex-end !important;

  width: min(1320px, calc(100% - 80px)) !important;

  margin: 0 auto !important;

  padding: 70px 0 100px !important;
}

main.ch-case-study .ch-case-study__navigation a {
  position: relative !important;

  display: block !important;

  width: min(620px, 100%) !important;

  margin: 0 0 0 auto !important;

  padding: 25px 45px 0 0 !important;

  text-decoration: none !important;
}

/* TOP LINE REMOVED */

main.ch-case-study .ch-case-study__navigation a::before {
  content: none !important;

  display: none !important;
}

/* LABEL */

main.ch-case-study .ch-case-study__navigation span {
  display: block !important;

  margin: 0 0 12px !important;

  color: var(--cbh-red) !important;

  font-size: 10px !important;

  font-weight: 600 !important;

  line-height: 1.5 !important;

  letter-spacing: 0.16em !important;

  text-transform: uppercase !important;
}

/* NEXT PROJECT TITLE */

main.ch-case-study .ch-case-study__navigation strong {
  display: block !important;

  margin: 0 !important;

  color: #000000 !important;

  font-size: 20px !important;

  font-weight: 500 !important;

  line-height: 0.9 !important;

  letter-spacing: -0.07em !important;

  text-wrap: balance;
}

/* ARROW */

main.ch-case-study .ch-case-study__navigation i {
  position: absolute !important;

  right: 0 !important;

  bottom: 5px !important;

  font-size: 20px !important;

  color: #000000 !important;
}

/* =========================================================

   13. TABLET

========================================================= */

@media (max-width: 1000px) {
  main.ch-case-study .ch-case-study__hero-image {
    height: 80vh !important;

    min-height: 580px !important;
  }

  main.ch-case-study .ch-case-study__hero-content {
    padding: 30px !important;
  }

  main.ch-case-study .ch-case-study__intro-section,
  main.ch-case-study .ch-case-study__section,
  main.ch-case-study .ch-case-study__outcome,
  main.ch-case-study .ch-case-study__project-info,
  main.ch-case-study .ch-case-study__navigation {
    width: calc(100% - 60px) !important;
  }

  main.ch-case-study .ch-case-study__image,
  main.ch-case-study .ch-case-study__image--large,
  main.ch-case-study .ch-case-study__two-column,
  main.ch-case-study .ch-case-study__three-column,
  main.ch-case-study .ch-case-study__split {
    width: calc(100% - 60px) !important;
  }

  /* INTRO */

  main.ch-case-study .ch-case-study__intro-section {
    grid-template-columns: 1fr !important;

    gap: 25px !important;
  }

  main.ch-case-study .ch-case-study__intro-label {
    padding-top: 0 !important;
  }

  /* SECTION */

  main.ch-case-study .ch-case-study__section-header {
    margin-left: 0 !important;
  }

  /* THREE COLUMN */

  main.ch-case-study .ch-case-study__three-column {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* SPLIT */

  main.ch-case-study .ch-case-study__split {
    grid-template-columns: 1fr !important;

    gap: 40px !important;
  }

  main.ch-case-study .ch-case-study__split-content {
    max-width: 700px !important;
  }

  /* PROJECT INFO */

  main.ch-case-study .ch-case-study__project-info {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* NEXT PROJECT */

  main.ch-case-study .ch-case-study__navigation a {
    width: min(620px, 100%) !important;

    margin-left: auto !important;

    margin-right: 0 !important;
  }
}

/* =========================================================

   14. MOBILE

========================================================= */

@media (max-width: 700px) {
  main.ch-case-study {
    width: 100% !important;

    max-width: 100% !important;

    overflow: hidden !important;
  }

  /* HERO */

  main.ch-case-study .ch-case-study__hero-image {
    height: 78svh !important;

    min-height: 500px !important;
  }

  main.ch-case-study .ch-case-study__hero-content {
    padding: 20px !important;
  }

  main.ch-case-study .ch-case-study__hero-content .ch-case-study__eyebrow {
    gap: 8px !important;

    margin-bottom: 15px !important;

    font-size: 7px !important;

    letter-spacing: 0.11em !important;
  }

  main.ch-case-study
    .ch-case-study__hero-content
    .ch-case-study__eyebrow::before {
    width: 18px !important;

    flex-basis: 18px !important;
  }

  main.ch-case-study .ch-case-study__title {
    max-width: 100% !important;

    font-size: clamp(46px, 15vw, 74px) !important;

    line-height: 0.88 !important;

    letter-spacing: -0.06em !important;
  }

  main.ch-case-study .ch-case-study__hero-content .ch-case-study__intro {
    max-width: 500px !important;

    margin-top: 18px !important;

    font-size: 12px !important;

    line-height: 1.65 !important;
  }

  /* =======================================================

     INTRO

  ======================================================= */

  main.ch-case-study .ch-case-study__intro-section {
    display: block !important;

    width: calc(100% - 40px) !important;

    padding: 65px 0 !important;
  }

  main.ch-case-study .ch-case-study__intro-label {
    margin-bottom: 20px !important;

    font-size: 8px !important;
  }

  main.ch-case-study .ch-case-study__intro-content h2 {
    margin-bottom: 25px !important;

    font-size: clamp(34px, 10vw, 52px) !important;

    line-height: 0.96 !important;
  }

  main.ch-case-study .ch-case-study__intro-content p {
    font-size: 12.5px !important;

    line-height: 1.8 !important;
  }

  /* =======================================================

     PROJECT INFO

  ======================================================= */

  main.ch-case-study .ch-case-study__project-info {
    display: block !important;

    width: calc(100% - 40px) !important;

    padding-bottom: 40px !important;
  }

  main.ch-case-study .ch-case-study__project-info > div {
    padding: 18px 0 !important;
  }

  /* =======================================================

     IMAGES

  ======================================================= */

  main.ch-case-study .ch-case-study__image,
  main.ch-case-study .ch-case-study__image--large {
    width: calc(100% - 24px) !important;

    margin: 45px auto !important;
  }

  main.ch-case-study .ch-case-study__image--full {
    width: 100% !important;

    margin-left: 0 !important;

    margin-right: 0 !important;
  }

  main.ch-case-study .ch-case-study__image figcaption {
    margin-top: 8px !important;

    font-size: 7px !important;
  }

  /* =======================================================

     TWO COLUMN

  ======================================================= */

  main.ch-case-study .ch-case-study__two-column {
    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 25px !important;

    width: calc(100% - 24px) !important;

    margin: 45px auto !important;
  }

  main.ch-case-study .ch-case-study__two-column .ch-case-study__image {
    width: 100% !important;

    margin: 0 !important;
  }

  /* =======================================================

     THREE COLUMN

  ======================================================= */

  main.ch-case-study .ch-case-study__three-column {
    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 25px !important;

    width: calc(100% - 24px) !important;

    margin: 45px auto !important;
  }

  main.ch-case-study .ch-case-study__three-column .ch-case-study__image {
    width: 100% !important;

    margin: 0 !important;
  }

  /* =======================================================

     SPLIT

  ======================================================= */

  main.ch-case-study .ch-case-study__split {
    display: flex !important;

    flex-direction: column !important;

    gap: 30px !important;

    width: calc(100% - 24px) !important;

    margin: 60px auto !important;
  }

  main.ch-case-study .ch-case-study__split .ch-case-study__image {
    width: 100% !important;

    margin: 0 !important;
  }

  main.ch-case-study .ch-case-study__split-content {
    width: 100% !important;

    max-width: 100% !important;
  }

  main.ch-case-study .ch-case-study__split-content h3 {
    margin-bottom: 18px !important;

    font-size: 34px !important;

    line-height: 0.95 !important;
  }

  main.ch-case-study
    .ch-case-study__split-content
    p:not(.ch-case-study__eyebrow) {
    font-size: 12.5px !important;

    line-height: 1.8 !important;
  }

  /* =======================================================

     SECTION

  ======================================================= */

  main.ch-case-study .ch-case-study__section {
    width: calc(100% - 40px) !important;

    margin: 90px auto 45px !important;

    padding: 0 !important;
  }

  main.ch-case-study .ch-case-study__section-header {
    width: 100% !important;

    margin: 0 !important;
  }

  main.ch-case-study .ch-case-study__section-header .ch-case-study__eyebrow {
    margin-bottom: 15px !important;

    font-size: 7px !important;
  }

  main.ch-case-study .ch-case-study__section-header h2 {
    margin-bottom: 20px !important;

    font-size: clamp(38px, 10.5vw, 56px) !important;

    line-height: 0.94 !important;
  }

  main.ch-case-study .ch-case-study__section-header > p:last-child {
    font-size: 12.5px !important;

    line-height: 1.8 !important;
  }

  /* =======================================================

     OUTCOME

  ======================================================= */

  main.ch-case-study .ch-case-study__outcome {
    width: calc(100% - 40px) !important;

    /*

       NO HUGE BOTTOM MARGIN.

       This is what removes the large gap before Next Project.

    */

    margin: 80px auto 0 !important;

    padding: 45px 0 !important;
  }

  main.ch-case-study .ch-case-study__outcome .ch-case-study__eyebrow {
    margin-bottom: 15px !important;

    font-size: 7px !important;
  }

  main.ch-case-study .ch-case-study__outcome h2 {
    margin-bottom: 22px !important;

    font-size: clamp(40px, 11vw, 60px) !important;

    line-height: 0.92 !important;
  }

  main.ch-case-study .ch-case-study__outcome > p:last-child {
    font-size: 12.5px !important;

    line-height: 1.8 !important;
  }

  /* =======================================================

     NEXT PROJECT

  ======================================================= */

  main.ch-case-study .ch-case-study__navigation {
    width: calc(100% - 40px) !important;

    /*

       Reduced from 90px top + 120px bottom.

    */

    margin: 0 auto !important;

    padding: 50px 0 70px !important;
  }

  main.ch-case-study .ch-case-study__navigation a {
    width: 100% !important;

    margin-left: auto !important;

    margin-right: 0 !important;

    padding: 20px 40px 0 0 !important;
  }

  main.ch-case-study .ch-case-study__navigation span {
    margin-bottom: 10px !important;

    font-size: 7px !important;
  }

  main.ch-case-study .ch-case-study__navigation strong {
    font-size: clamp(42px, 12vw, 64px) !important;

    line-height: 0.9 !important;
  }

  main.ch-case-study .ch-case-study__navigation i {
    right: 0 !important;

    bottom: 4px !important;

    font-size: 20px !important;
  }
}

/* =========================================================

   15. SMALL PHONES

========================================================= */

@media (max-width: 420px) {
  main.ch-case-study .ch-case-study__hero-image {
    height: 74svh !important;

    min-height: 460px !important;
  }

  main.ch-case-study .ch-case-study__hero-content {
    padding: 16px !important;
  }

  main.ch-case-study .ch-case-study__title {
    font-size: 46px !important;
  }

  main.ch-case-study .ch-case-study__hero-content .ch-case-study__intro {
    font-size: 11.5px !important;
  }

  main.ch-case-study .ch-case-study__intro-section,
  main.ch-case-study .ch-case-study__section,
  main.ch-case-study .ch-case-study__outcome,
  main.ch-case-study .ch-case-study__project-info,
  main.ch-case-study .ch-case-study__navigation {
    width: calc(100% - 32px) !important;
  }

  main.ch-case-study .ch-case-study__intro-section {
    padding: 55px 0 !important;
  }

  main.ch-case-study .ch-case-study__intro-content h2 {
    font-size: 34px !important;
  }

  main.ch-case-study .ch-case-study__section {
    margin-top: 75px !important;

    margin-bottom: 40px !important;
  }

  main.ch-case-study .ch-case-study__section-header h2 {
    font-size: 36px !important;
  }

  main.ch-case-study .ch-case-study__outcome {
    margin-top: 65px !important;

    padding: 40px 0 !important;
  }

  main.ch-case-study .ch-case-study__outcome h2 {
    font-size: 39px !important;
  }

  main.ch-case-study .ch-case-study__navigation {
    padding-top: 40px !important;

    padding-bottom: 55px !important;
  }

  main.ch-case-study .ch-case-study__navigation a {
    width: 100% !important;

    margin-left: auto !important;

    margin-right: 0 !important;
  }
}

/* =========================================================

   16. DESKTOP HOVER

========================================================= */

@media (hover: hover) and (pointer: fine) {
  main.ch-case-study .ch-case-study__image img {
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) !important;
  }

  main.ch-case-study .ch-case-study__image:hover img {
    transform: scale(1.01) !important;
  }

  main.ch-case-study .ch-case-study__navigation a::before {
    transform-origin: left !important;

    transition: transform 0.4s ease !important;
  }

  main.ch-case-study .ch-case-study__navigation a:hover::before {
    transform: scaleX(0.25) !important;
  }

  main.ch-case-study .ch-case-study__navigation i {
    transition:
      transform 0.3s ease,
      color 0.3s ease !important;
  }

  main.ch-case-study .ch-case-study__navigation a:hover i {
    color: var(--cbh-red) !important;

    transform: translateX(8px) !important;
  }
}

/* =========================================================

   17. ACCESSIBILITY

========================================================= */

main.ch-case-study a:focus-visible {
  outline: 2px solid var(--cbh-red) !important;

  outline-offset: 4px !important;
}

/* =========================================================

   18. REDUCED MOTION

========================================================= */

@media (prefers-reduced-motion: reduce) {
  main.ch-case-study *,
  main.ch-case-study *::before,
  main.ch-case-study *::after {
    scroll-behavior: auto !important;

    transition: none !important;

    animation: none !important;
  }
}

/* =========================================================

   19. PRINT

========================================================= */

@media print {
  main.ch-case-study {
    overflow: visible !important;
  }

  main.ch-case-study .ch-case-study__hero-image {
    height: auto !important;

    min-height: 0 !important;
  }

  main.ch-case-study .ch-case-study__hero-image > img {
    position: static !important;

    width: 100% !important;

    height: auto !important;
  }

  main.ch-case-study .ch-case-study__hero-overlay {
    display: none !important;
  }

  main.ch-case-study .ch-case-study__hero-content {
    position: static !important;

    padding: 40px !important;

    color: #000 !important;
  }

  main.ch-case-study .ch-case-study__title {
    color: #000 !important;
  }
}