@import url("./state-farm.css?v=20261025-23");

.reveal-highlights { animation-delay: 560ms; }
.reveal-role { animation-delay: 840ms; }
.reveal-research { animation-delay: 1080ms; }

html, body {
  min-width: 0;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
body {
  width: 1512px;
  height: 5088px;
  overflow: visible;
}
.case-study-navigation {
  position: fixed;
  top: 60px;
  left: 33px;
  z-index: 2;
  display: block;
  width: 165px;
  height: 249px;
}
.case-study-crumbs {
  width: 121px;
}
.case-study-crumbs a:last-child {
  width: 53px;
  white-space: nowrap;
}
.detox-section-nav {
  position: absolute;
  top: 123px;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 165px;
}
.detox-section-link {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  font-size: 12px;
  line-height: 17px;
}
.detox-section-nav > .detox-section-link { color: #bababa; }
.detox-section-nav > .detox-section-link.is-active { color: #000; }
.detox-section-link.is-active { width: 165px; }
.detox-section-link > span { width: 9px; font-size: 14px; line-height: 20px; }
.detox-section-nav > .detox-section-link > span { visibility: hidden; }
.detox-section-nav > .detox-section-link.is-active > span { visibility: visible; }
.detox-section-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 152px;
  margin-left: 13px;
}
.detox-section-list .detox-section-link {
  position: relative;
  min-height: 17px;
  color: #bababa;
}
.detox-section-list .detox-section-link.is-active {
  color: #000;
  font-weight: 500;
}
.detox-section-list .detox-section-link.is-active::before {
  position: absolute;
  top: 0;
  left: -13px;
  content: "→";
  font-size: 14px;
  line-height: 20px;
}
.detox-section-list .detox-section-link:hover,
.detox-section-list .detox-section-link:focus-visible { color: #000; }
.detox-page {
  position: relative;
  width: 1512px;
  height: 5088px;
}
.detox-overview {
  position: absolute;
  top: 151px;
  left: 362px;
  display: flex;
  align-items: flex-start;
  gap: 70px;
  width: 1096px;
  height: 398px;
}
.detox-main-copy {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 80px;
  width: 459px;
  height: 398px;
}
.detox-intro {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 459px;
  height: 136px;
}
.detox-intro h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 29px;
}
.detox-intro p {
  flex: none;
  height: 85px;
  margin: 0;
  font-size: 12px;
  line-height: 17px;
}
.detox-prompt-line {
  display: block;
  margin-bottom: 17px;
}
.detox-metadata {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 40px;
  width: 321px;
  height: 182px;
  align-self: flex-start;
}
.detox-meta-role,
.detox-meta-project {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
}
.detox-meta-role { width: 305px; height: 17px; }
.detox-meta-project { gap: 40px; height: 125px; }
.detox-meta-row {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 14px;
  width: 100%;
  height: 17px;
  font-size: 12px;
  line-height: 17px;
}
.detox-meta-row .meta-label { flex: none; color: #000; }
.detox-meta-row .meta-value { width: 250px; color: #838383; }
.detox-meta-role .detox-meta-row { width: 296px; }
.detox-meta-role .meta-label { width: 32px; }
.detox-meta-role .meta-value { color: rgb(0 0 0 / 50%); }
.detox-meta-project .detox-meta-row { width: 321px; }
.detox-meta-project .meta-label { width: 57px; }
.detox-meta-toolbox { height: 68px; }
.detox-meta-toolbox .meta-label { width: 51px; }
.detox-meta-toolbox .meta-value { height: 68px; }
.detox-hero {
  display: block;
  flex: none;
  width: 567px;
  height: 364.35px;
  object-fit: contain;
}
.detox-lower-sections {
  position: absolute;
  top: 640px;
  left: 362px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 1069px;
  height: 1047px;
}
.detox-highlights {
  position: relative;
  top: auto;
  left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  width: 1069px;
  height: 640px;
}
.detox-highlights h2 {
  align-self: stretch;
  height: 23px;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
  text-align: left;
}
.detox-highlight-media {
  flex: none;
  width: 1069px;
  height: 595px;
  overflow: hidden;
  background: #fff;
}
.detox-highlight-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detox-role {
  position: relative;
  top: auto;
  left: auto;
  display: flex;
  align-items: center;
  gap: 78px;
  width: 1069px;
  height: 367px;
}
.detox-role-copy {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 22px;
  width: 459px;
  height: 113px;
}
.detox-role-copy h2 {
  flex: none;
  height: 23px;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
}
.detox-role-copy p {
  flex: none;
  height: 68px;
  margin: 0;
  font-size: 12px;
  line-height: 17px;
}
.detox-role-lead {
  display: block;
  margin-bottom: 17px;
}
.detox-role-media {
  display: block;
  flex: none;
  width: 531.5px;
  height: 367px;
  object-fit: cover;
}
.detox-research {
  position: absolute;
  top: 1778px;
  left: 362px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  width: 1069px;
  height: 667px;
}
.detox-research-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 1069px;
  height: 50px;
  text-align: left;
}
.detox-research-heading h2 {
  align-self: stretch;
  flex: none;
  height: 23px;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
}
.detox-research-heading p {
  align-self: stretch;
  flex: none;
  height: 17px;
  margin: 0;
  color: #838383;
  font-size: 12px;
  line-height: 17px;
}
.detox-research-frame {
  display: flex;
  flex: none;
  align-items: flex-start;
  width: 1069px;
  height: 595px;
  padding: 5px;
  background: #f4f4f4;
}
.detox-research-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  height: 100%;
}
.detox-research-tabs {
  display: flex;
  flex: none;
  gap: 5px;
  width: 531px;
  height: 38px;
}
.detox-research-tab {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 129px;
  height: 38px;
  padding: 0;
  border: 0;
  background: #f4f4f4;
  color: #838383;
  font: 500 12px/17px "Kalice-Trial", "Times New Roman", serif;
  cursor: pointer;
}
.detox-research-tab.is-active {
  background: #fff;
  color: #000;
}
.detox-research-tab:focus-visible {
  outline: 1px solid #000;
  outline-offset: -2px;
}
.detox-research-panel-area {
  flex: none;
  width: 100%;
  height: 542px;
  overflow: hidden;
  background: #fff;
}
.detox-research-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  background: #fff;
}
.detox-research-panel[hidden] { display: none; }
.detox-research-panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.detox-ideation {
  position: absolute;
  top: 2509px;
  left: 362px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  width: 1069px;
  height: 640px;
}
.detox-ideation-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 1069px;
  height: 23px;
}
.detox-ideation-heading h2 {
  align-self: stretch;
  flex: none;
  height: 23px;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
}
.detox-ideation-frame {
  display: flex;
  align-items: flex-start;
  flex: none;
  width: 1069px;
  height: 595px;
  padding: 5px;
  background: #f4f4f4;
}
.detox-ideation-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  height: 100%;
}
.detox-ideation-tabs {
  display: flex;
  flex: none;
  gap: 5px;
  width: 397px;
  height: 38px;
}
.detox-ideation-tab {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 129px;
  height: 38px;
  padding: 0;
  border: 0;
  background: #f4f4f4;
  color: #838383;
  font: 500 12px/17px "Kalice-Trial", "Times New Roman", serif;
  cursor: pointer;
}
.detox-ideation-tab.is-active {
  background: #fff;
  color: #000;
}
.detox-ideation-tab:focus-visible {
  outline: 1px solid #000;
  outline-offset: -2px;
}
.detox-ideation-panel-area {
  flex: none;
  width: 100%;
  height: 542px;
  overflow: hidden;
  background: #fff;
}
.detox-ideation-panel { width: 100%; height: 100%; background: #fff; }
.detox-ideation-panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.detox-ideation-panel[hidden] { display: none; }
.detox-features,
.detox-impact {
  position: absolute;
  left: 362px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  width: 1069px;
  height: 640px;
}
.detox-features { top: 3240px; }
.detox-impact { top: 3971px; }
.detox-features-heading,
.detox-impact-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 1069px;
  height: 23px;
}
.detox-features-heading h2,
.detox-impact-heading h2 {
  align-self: stretch;
  flex: none;
  height: 23px;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
}
.detox-features-frame,
.detox-impact-frame {
  flex: none;
  width: 1069px;
  height: 595px;
  background: #d9d9d9;
}
.detox-features-frame {
  display: flex;
  align-items: flex-start;
  padding: 5px;
  background: #f4f4f4;
}
.detox-feature-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  height: 100%;
}
.detox-feature-tabs {
  display: flex;
  flex: none;
  gap: 5px;
  width: 100%;
  height: 38px;
}
.detox-feature-tab { flex: 1 1 0; width: auto; min-width: 0; }
.detox-feature-panel-area {
  flex: none;
  width: 100%;
  height: 542px;
  overflow: hidden;
  background: #fff;
}
.detox-feature-panel { width: 100%; height: 100%; }
.detox-feature-panel[hidden] { display: none; }
.detox-impact-frame {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5px;
  background: #fff;
}
.detox-impact-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.detox-impact-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  height: 100%;
}
.detox-impact-tabs {
  display: flex;
  flex: none;
  gap: 5px;
  width: 665px;
  height: 38px;
}
.detox-impact-tab { width: 129px; }
.detox-impact-panel-area {
  flex: none;
  width: 100%;
  height: 542px;
  overflow: hidden;
  background: #fff;
}
.detox-impact-panel { width: 100%; height: 100%; }
.detox-impact-panel[hidden] { display: none; }
.detox-learnings {
  position: absolute;
  top: 4641px;
  left: 362px;
  display: flex;
  align-items: center;
  gap: 78px;
  width: 1068.5px;
  height: 367px;
}
.detox-learnings-copy {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  width: 459px;
  height: 85px;
}
.detox-learnings-copy h2 {
  align-self: stretch;
  flex: none;
  height: 29px;
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 29px;
}
.detox-learnings-copy p {
  align-self: stretch;
  flex: none;
  height: 34px;
  margin: 0;
  font-size: 12px;
  line-height: 17px;
}
.detox-learnings-media {
  display: block;
  flex: none;
  width: 531.5px;
  height: 367px;
  object-fit: cover;
}
.detox-research-panel h3 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
}
.detox-research-panel p {
  margin: 0;
  font-size: 12px;
  line-height: 17px;
}

@media (max-width: 1135px) {
  body, .detox-page { width: 100%; height: auto; min-height: 100%; }
  .case-study-navigation {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    margin: 32px 24px 40px;
  }
  .detox-section-nav { position: static; margin-top: 40px; }
  .detox-page { padding: 0 24px 80px; }
  .detox-overview {
    position: relative;
    top: auto;
    left: auto;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    height: auto;
  }
  .detox-main-copy { width: min(100%, 459px); }
  .detox-intro { width: 100%; height: auto; min-height: 136px; }
  .detox-intro p { height: auto; }
  .detox-metadata { align-self: flex-start; margin-top: 8px; }
  .detox-hero { width: 100%; height: auto; }
  .detox-lower-sections {
    position: relative;
    top: auto;
    left: auto;
    align-items: stretch;
    gap: 40px;
    width: min(100%, 1069px);
    height: auto;
    margin: 90px auto 0;
  }
  .detox-highlights {
    width: 100%;
    height: auto;
  }
  .detox-highlight-media { width: 100%; height: auto; aspect-ratio: 1069 / 595; }
  .detox-role {
    position: relative;
    top: auto;
    left: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    width: 100%;
    height: auto;
    margin: 0;
  }
  .detox-role-copy { width: min(100%, 459px); height: auto; }
  .detox-role-copy p { height: auto; }
  .detox-role-media { width: 100%; height: auto; aspect-ratio: 531.5 / 367; }
  .detox-research {
    position: relative;
    top: auto;
    left: auto;
    width: min(100%, 1069px);
    height: auto;
    margin: 140px auto 0;
  }
  .detox-research-heading { width: 100%; height: auto; min-height: 50px; }
  .detox-research-frame { width: 100%; height: auto; min-height: 595px; }
  .detox-research-content { width: 100%; height: auto; }
  .detox-research-tabs { width: min(100%, 531px); }
  .detox-research-tab { flex: 1 1 0; width: auto; }
  .detox-research-panel-area { width: 100%; height: auto; min-height: 552px; }
  .detox-ideation {
    position: relative;
    top: auto;
    left: auto;
    width: min(100%, 1069px);
    height: auto;
    margin: 80px auto 0;
  }
  .detox-ideation-heading { width: 100%; }
  .detox-ideation-frame { width: 100%; height: auto; min-height: 595px; }
  .detox-ideation-content { height: auto; }
  .detox-ideation-tabs { width: min(100%, 397px); }
  .detox-ideation-tab { flex: 1 1 0; width: auto; }
  .detox-ideation-panel-area { width: 100%; height: auto; min-height: 542px; }
  .detox-feature-content { height: auto; }
  .detox-feature-tabs { width: 100%; }
  .detox-feature-panel-area { width: 100%; height: auto; min-height: 542px; }
  .detox-impact-content { height: auto; }
  .detox-impact-tabs { width: min(100%, 665px); }
  .detox-impact-tab { flex: 1 1 0; width: auto; }
  .detox-impact-panel-area { width: 100%; height: auto; min-height: 542px; }
  .detox-features,
  .detox-impact {
    position: relative;
    top: auto;
    left: auto;
    width: min(100%, 1069px);
    height: auto;
    margin: 80px auto 0;
  }
  .detox-features-heading,
  .detox-impact-heading { width: 100%; }
  .detox-features-frame,
  .detox-impact-frame { width: 100%; height: auto; min-height: 595px; }
  .detox-learnings {
    position: relative;
    top: auto;
    left: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    width: min(100%, 1069px);
    height: auto;
    margin: 80px auto 0;
  }
  .detox-learnings-copy { width: min(100%, 459px); height: auto; }
  .detox-learnings-copy p { height: auto; }
  .detox-learnings-media { width: 100%; height: auto; aspect-ratio: 531.5 / 367; }
}
@media (max-width: 600px) {
  .detox-main-copy { height: auto; gap: 48px; }
  .detox-intro h1 { font-size: 18px; }
  .detox-metadata { width: 100%; }
  .detox-meta-role, .detox-meta-project, .detox-meta-project .detox-meta-row { width: 100%; }
  .detox-meta-role .detox-meta-row { width: 100%; }
  .detox-meta-row .meta-value { width: min(250px, calc(100vw - 130px)); }
  .detox-lower-sections { margin-top: 90px; }
  .detox-research { margin-top: 100px; gap: 28px; }
  .detox-research-heading h2 { height: auto; font-size: 18px; line-height: 25px; }
  .detox-research-tabs { gap: 3px; }
  .detox-research-tab { font-size: 10px; }
  .detox-ideation-tab { font-size: 10px; }
  .detox-research-panel-area { min-height: 360px; }
  .detox-ideation-panel-area,
  .detox-feature-panel-area,
  .detox-impact-panel-area { min-height: 360px; }
  .detox-feature-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: auto;
  }
  .detox-feature-tab {
    min-height: 38px;
    height: auto;
    padding: 4px;
    line-height: 13px;
  }
}