/* Case-study modal.
   Kept in its own file so the Webflow export stays untouched and this is easy
   to remove. Uses only fonts and colours already defined by the site CSS. */

.case_modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 2rem 1.5rem 0;
  background-color: #0c0b0b8c;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.case_modal.is-open {
  display: flex;
}

/* The sheet itself. Clicking outside it (on .case_modal) closes the case. */
.case_dialog {
  position: relative;
  display: flex;
  flex-flow: column;
  width: 100%;
  max-width: 1400px;
  max-height: 100%;
  overflow: hidden;
  background-color: #fff;
  border: 0;
  border-radius: 8px 8px 0 0;
}

/* flex:1 + min-height:0 is what gives this a bounded height to scroll inside.
   With height:100% it just grows to the content and the dialog clips it. */
.case_modal_scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Cross only. Radius and border copy .contact_btn in the sticky side panel. */
.case_close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid #ebebeb;
  border-radius: 6px;
  background-color: #fff;
  color: #1b1a1a;
  font-family: Geist, Arial, sans-serif;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: all .22s cubic-bezier(.778, .2, .374, 1.007);
}

.case_close:hover {
  color: #5f5f5f;
  border-color: #1b1a1a33;
}

.case_close_x {
  font-size: 15px;
  line-height: 1;
}

/* ---- page rhythm -------------------------------------------------------- */

.case_page {
  /* No cap: the sheet's own max-width sets the width now, so the content
     grows with it instead of sitting in a 1100px column inside a wider sheet. */
  margin: 0 auto;
  --case-pad: 160px;
  padding: 5.5rem var(--case-pad) 6rem;
  display: flex;
  flex-flow: column;
  gap: 6rem;
}

/* Everything that reads as text sits 1.125rem inside the media column - the
   same offset .div-block-24 has against .designcase_wrapper on the main page. */
.case_col,
.case_numbers,
.case_tags,
.case_logo,
.case_testimonial,
.case_cta,
.case_media > .case_caption {
  margin-left: 1.125rem;
  margin-right: 1.125rem;
}

/* One narrative beat: a text column plus whatever images belong to it. */
.case_section {
  display: flex;
  flex-flow: column;
  gap: 2rem;
}

/* Narrative text never runs the full width - it stays readable. */
.case_col {
  display: flex;
  flex-flow: column;
  gap: 1.25rem;
  max-width: 640px;
}

.case_eyebrow {
  color: #5f5f5f;
  font-family: Geist, Arial, sans-serif;
  font-size: 14px;
  letter-spacing: -.35px;
  line-height: 120%;
  margin: 0;
}

.case_h1 {
  color: #0c0b0b;
  font-family: Geist, Arial, sans-serif;
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -2.2px;
  line-height: 112%;
  margin: 0;
}

.case_h2 {
  color: #0c0b0b;
  font-family: Geist, Arial, sans-serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -1.4px;
  line-height: 126%;
  margin: 0;
}

.case_body {
  color: #1b1a1a;
  font-family: Geist, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -.015rem;
  line-height: 152%;
  margin: 0;
}

/* Numbers and the line that matters, inside running text. */
.case_body strong {
  color: #0c0b0b;
  font-weight: 600;
}

.case_body.is-grey {
  color: #5f5f5f;
}

/* ---- header ------------------------------------------------------------- */

.case_header {
  display: flex;
  flex-flow: column;
  gap: 2rem;
}

.case_logo {
  height: 28px;
  width: auto;
  /* Without this the img stretches to the column's full width and the SVG
     floats in the middle of it. */
  align-self: flex-start;
}

.case_tags {
  display: flex;
  gap: 1rem;
}

.case_tag {
  color: #5f5f5f;
  font-family: Geist, Arial, sans-serif;
  font-size: 14px;
  letter-spacing: -.35px;
  line-height: 120%;
  margin: 0;
}

/* ---- facts (role / timeline / team) ------------------------------------- */

.case_facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  padding: 2rem 1.125rem;
  border-top: .7px solid #1b1a1a1a;
  border-bottom: .7px solid #1b1a1a1a;
}

.case_fact {
  display: flex;
  flex-flow: column;
  gap: .5rem;
}

/* ---- numbers strip ------------------------------------------------------ */

.case_numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2.5rem;
}

.case_arrow {
  width: .62em;
  height: .62em;
  margin: 0 .03em;
  vertical-align: -.02em;
}

.case_number {
  display: flex;
  flex-flow: column;
  gap: .5rem;
}

.case_number_value {
  color: #0c0b0b;
  font-family: Geist, Arial, sans-serif;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -2.4px;
  line-height: 108%;
  margin: 0;
}

/* ---- media -------------------------------------------------------------- */

.case_media {
  display: flex;
  flex-flow: column;
  gap: 1rem;
}

.case_media.is-pair {
  flex-flow: row;
}

.case_media.is-pair > * {
  flex: 1;
  min-width: 0;
}

.case_img {
  width: 100%;
  height: auto;
  display: block;
  border: .7px solid #1b1a1a1a;
  border-radius: 8px;
  overflow: hidden;
}

.case_img.is-plain {
  border: none;
}

.case_caption {
  color: #5f5f5f;
  font-family: Geist, Arial, sans-serif;
  font-size: 14px;
  letter-spacing: -.35px;
  line-height: 136%;
  margin: 0;
}

.case_embed {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.case_embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- verbatim user quotes ----------------------------------------------- */

.case_quotes {
  display: flex;
  flex-flow: column;
  gap: .75rem;
  max-width: 640px;
}

.case_quote {
  padding: 1rem 1.25rem;
  border-radius: 8px;
  background-color: #1b1a1a08;
  color: #1b1a1a;
  font-family: Geist, Arial, sans-serif;
  font-size: 16px;
  letter-spacing: -.015rem;
  line-height: 136%;
  margin: 0;
}

/* ---- constraint / aside note -------------------------------------------- */

.case_note {
  max-width: 640px;
  padding-left: 1.25rem;
  border-left: 2px solid var(--blue, #3e51fc);
  color: #5f5f5f;
  font-family: Geist, Arial, sans-serif;
  font-size: 16px;
  letter-spacing: -.015rem;
  line-height: 152%;
  margin: 0;
}

/* ---- list --------------------------------------------------------------- */

.case_list {
  display: flex;
  flex-flow: column;
  gap: 1.25rem;
  max-width: 640px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case_list_item {
  display: flex;
  flex-flow: column;
  gap: .375rem;
}

/* ---- testimonial -------------------------------------------------------- */

.case_testimonial {
  display: flex;
  flex-flow: column;
  gap: 1.5rem;
  max-width: 640px;
  padding: 2rem;
  border: .7px solid #1b1a1a1a;
  border-radius: 8px;
}

.case_person {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.case_avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  object-fit: cover;
}

/* ---- footer ------------------------------------------------------------- */

.case_footer {
  display: flex;
  flex-flow: column;
  gap: 1.5rem;
  padding-top: 4rem;
  border-top: .7px solid #1b1a1a1a;
}

/* ---- placeholder, only while the story is unwritten --------------------- */

.case_todo {
  padding: 1.25rem;
  border: 1px dashed #3e51fc66;
  border-radius: 8px;
  background-color: #3e51fc08;
  color: #3e51fc;
  font-family: Geist, Arial, sans-serif;
  font-size: 14px;
  letter-spacing: -.35px;
  line-height: 152%;
}

.case_todo b {
  font-weight: 600;
}

/* ---- end CTA: same buttons as the sticky side panel --------------------- */

.case_cta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.case_btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 2rem .75rem 1rem;
  background-color: #fff;
  border: 1px solid #ebebeb;
  border-radius: 6px;
  color: #1b1a1a;
  font-family: Geist, Arial, sans-serif;
  font-size: 14px;
  letter-spacing: -.35px;
  line-height: 120%;
  text-decoration: none;
  transition: all .22s cubic-bezier(.778, .2, .374, 1.007);
}

.case_btn:hover {
  transform: scale(.97);
}

.case_btn.is-primary {
  background-color: #0d0b0b;
  border-color: #0d0b0b;
  color: #fff;
}

.case_btn_icon {
  position: absolute;
  inset: .5rem .5rem auto auto;
  width: 14px;
  opacity: .5;
}

/* ---- makes a home-page case block clickable ----------------------------- */

.case_open {
  cursor: pointer;
  display: inline-flex;
  /* The home-page block is a stretching column flex, so hug the text. */
  align-self: flex-start;
  align-items: center;
  gap: .5rem;
  color: #1b1a1a;
  font-family: Geist, Arial, sans-serif;
  font-size: 14px;
  letter-spacing: -.35px;
  line-height: 120%;
  text-decoration: none;
  border-bottom: .7px solid #1b1a1a33;
  padding-bottom: .125rem;
  transition: color .12s, border-color .12s;
}

.case_open:hover {
  color: #5f5f5f;
  border-color: #1b1a1a1a;
}

/* Stops the page behind the modal from scrolling. */
body.case-modal-open {
  overflow: hidden;
}

@media screen and (max-width: 991px) {
  .case_modal { padding: 1.5rem 1rem 0; }
  .case_page {
    --case-pad: 96px;
    padding: 4rem var(--case-pad) 4.5rem;
    gap: 4rem;
  }
  .case_h1 { font-size: 34px; letter-spacing: -1.6px; }
  .case_h2 { font-size: 22px; letter-spacing: -1.05px; }
  .case_number_value { font-size: 32px; letter-spacing: -1.5px; }
}

@media screen and (max-width: 767px) {
  .case_modal { padding: 0; }
  .case_dialog { max-width: none; height: 100%; border: 0; border-radius: 0; }
  .case_close { top: .75rem; right: .75rem; }
  /* Without this the absolutely-positioned close pill cuts through whatever
     line of body text happens to scroll behind it. */
  .case_dialog:before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4rem;
    z-index: 15;
    pointer-events: none;
    background-image: linear-gradient(#fff 0%, #fff 62%, #ffffff00 100%);
  }
  .case_page { --case-pad: 40px; padding: 3.5rem var(--case-pad) 3.5rem; gap: 3rem; }
  .case_media.is-pair { flex-flow: column; }
  .case_h1 { font-size: 28px; letter-spacing: -1.2px; }
  .case_testimonial { padding: 1.5rem; }
}

/* Matches .rightcontent_wrapper's last step on the main page. */
@media screen and (max-width: 479px) {
  .case_page { --case-pad: 16px; padding: 3rem var(--case-pad) 3rem; }
}