.case-page {
  --case-ink: #000;
  --case-paper: #fff;
  --case-soft: #f3f3f1;
  --case-accent: #fcf88a;
  --case-muted: #888;
  --case-dark: #111;
  --case-text: #666;
  --case-line: #d8d8d4;
  --case-white-muted: rgb(255 255 255 / 0.62);
  --case-white-line: rgb(255 255 255 / 0.13);
  --case-black-soft: rgb(0 0 0 / 0.12);
  --product-ink: #42484e;
  --product-surface: #eef1f4;
  --product-blue: #1597f7;
  --product-blue-soft: #eaf2fb;
  --product-green: #43b45c;
  --product-lime: #9ddd35;
  --product-metal-dark: #838d94;
  --product-metal-mid: #aeb6bb;
  --product-metal-light: #bbc3c8;
  background: var(--case-paper);
}

.case-page main {
  overflow: clip;
}

.case-shell {
  width: min(1880px, calc(100% - 40px));
  margin-inline: auto;
}

.case-overline {
  margin: 0 0 min(20px, 1.042vw);
  color: var(--case-ink);
  font-size: min(18px, 0.938vw);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.case-overline--light {
  color: var(--case-white-muted);
}

.case-title {
  margin: 0;
  font-family: var(--gis-font-display-latin);
  font-size: min(112px, 5.833vw);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.92;
  text-transform: uppercase;
}

.case-lead {
  max-width: min(660px, 34.375vw);
  margin: 0;
  color: var(--case-text);
  font-size: min(26px, 1.354vw);
  font-weight: 500;
  line-height: 1.45;
}

.section-head {
  display: grid;
  align-items: end;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
  gap: min(90px, 4.688vw);
}

.section-head--dark .case-title,
.section-head--dark .case-lead {
  color: var(--case-paper);
}

.section-head--dark .case-lead {
  color: var(--case-white-muted);
}

.media-frame {
  overflow: hidden;
  margin: 0;
  border-radius: min(10px, 0.521vw);
  background: var(--case-soft);
}

.media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* HERO */

.case-hero {
  padding-top: min(112px, 5.833vw);
  padding-bottom: min(120px, 6.25vw);
}

.case-hero__grid {
  display: grid;
  margin-top: min(95px, 4.948vw);
  align-items: end;
  grid-template-columns: minmax(0, 1.35fr) minmax(380px, 0.65fr);
  gap: min(80px, 4.167vw);
}

.case-hero__copy h1 {
  margin: 0;
  font-family: var(--gis-font-display-latin);
  font-size: min(148px, 7.708vw);
  font-weight: 400;
  letter-spacing: -0.032em;
  line-height: 0.86;
  text-transform: uppercase;
}

.case-hero__summary {
  max-width: min(630px, 32.813vw);
  margin: 0 0 min(12px, 0.625vw);
  color: var(--case-text);
  font-size: min(26px, 1.354vw);
  line-height: 1.45;
}

.media-frame--cover {
  height: min(850px, 44.271vw);
  margin-top: min(86px, 4.479vw);
  border-radius: min(18px, 0.938vw);
}

.case-meta {
  display: grid;
  margin: min(48px, 2.5vw) 0 0;
  border-top: 2px solid var(--case-ink);
  border-bottom: 2px solid var(--case-ink);
  grid-template-columns: repeat(4, 1fr);
}

.case-meta > div {
  min-height: min(120px, 6.25vw);
  padding: min(24px, 1.25vw) min(28px, 1.458vw);
  border-right: 2px solid var(--case-ink);
}

.case-meta > div:last-child {
  border-right: 0;
}

.case-meta dt {
  margin-bottom: min(10px, 0.521vw);
  color: var(--case-muted);
  font-size: min(15px, 0.781vw);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.case-meta dd {
  margin: 0;
  font-size: min(24px, 1.25vw);
  line-height: 1.25;
}

/* ORIGIN */

.case-section {
  padding-block: min(145px, 7.552vw);
}

.case-quote {
  position: relative;
  display: grid;
  min-height: min(310px, 16.146vw);
  margin: min(92px, 4.792vw) 0 0;
  padding: min(48px, 2.5vw) min(56px, 2.917vw);
  overflow: hidden;
  align-content: center;
  border-radius: min(160px, 8.333vw) 8px 8px min(160px, 8.333vw);
  background: var(--case-soft);
  grid-template-columns: min(185px, 9.635vw) 1fr;
}

.case-quote__mark {
  align-self: center;
  font-family: var(--gis-font-display-latin);
  font-size: min(210px, 10.938vw);
  line-height: 0.6;
}

.case-quote p {
  margin: 0;
  align-self: end;
  font-family: var(--gis-font-display-latin);
  font-size: min(64px, 3.333vw);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.case-quote small {
  grid-column: 2;
  margin-top: min(18px, 0.938vw);
  color: var(--case-muted);
  font-size: min(18px, 0.938vw);
  line-height: 1.35;
}

.problem-grid {
  display: grid;
  margin-top: min(40px, 2.083vw);
  grid-template-columns: repeat(4, 1fr);
  gap: min(20px, 1.042vw);
}

.problem-grid article {
  min-height: min(320px, 16.667vw);
  padding: min(32px, 1.667vw);
  border-radius: min(8px, 0.417vw);
  background: var(--case-soft);
}

.problem-grid article strong {
  display: block;
  margin-bottom: min(70px, 3.646vw);
  color: var(--case-muted);
  font-family: var(--gis-font-display-latin);
  font-size: min(28px, 1.458vw);
  font-weight: 400;
}

.problem-grid article h3 {
  margin: 0 0 min(16px, 0.833vw);
  font-size: min(28px, 1.458vw);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}

.problem-grid article p {
  margin: 0;
  color: var(--case-text);
  font-size: min(18px, 0.938vw);
  line-height: 1.45;
}

.problem-grid .problem-grid__accent {
  background: var(--case-accent);
}

.problem-grid .problem-grid__accent p {
  color: var(--case-text);
}

/* AUDIENCE */

.audience,
.mobile-section {
  background: var(--case-accent);
}

.audience__inner,
.mobile-section__inner {
  padding-block: min(145px, 7.552vw);
}

.section-head--audience .case-lead {
  color: var(--case-text);
}

.segment-grid {
  display: grid;
  margin-top: min(95px, 4.948vw);
  grid-template-columns: repeat(3, 1fr);
  gap: min(20px, 1.042vw);
}

.segment-card {
  display: flex;
  min-height: min(520px, 27.083vw);
  padding: min(38px, 1.979vw);
  flex-direction: column;
  background: var(--case-white-muted);
}

.segment-card--round {
  border-radius: min(260px, 13.542vw) min(260px, 13.542vw) 8px 8px;
  padding-top: min(104px, 5.417vw);
}

.segment-card--arch {
  border-radius: 8px 8px min(260px, 13.542vw) min(260px, 13.542vw);
}

.segment-card--dark {
  background: var(--case-ink);
  color: var(--case-paper);
}

.segment-card > span {
  color: var(--case-muted);
  font-family: var(--gis-font-display-latin);
  font-size: min(22px, 1.146vw);
  line-height: 1;
}

.segment-card--dark > span {
  color: var(--case-text);
}

.segment-card h3 {
  margin: min(46px, 2.396vw) 0 min(26px, 1.354vw);
  font-family: var(--gis-font-display-latin);
  font-size: min(58px, 3.021vw);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.95;
}

.segment-card p {
  margin: 0 0 min(30px, 1.563vw);
  color: var(--case-text);
  font-size: min(19px, 0.99vw);
  font-style: italic;
  line-height: 1.5;
}

.segment-card--dark p {
  color: var(--case-muted);
}

.segment-card strong {
  margin-top: auto;
  font-size: min(18px, 0.938vw);
  letter-spacing: 0.02em;
}

/* APPROACH */

.approach,
.design-system {
  background: var(--case-ink);
  color: var(--case-paper);
}

.approach__inner,
.design-system__inner {
  padding-block: min(145px, 7.552vw);
}

.approach-grid {
  display: grid;
  margin-top: min(90px, 4.688vw);
  grid-template-columns: repeat(4, 1fr);
  gap: min(12px, 0.625vw);
}

.approach-grid article {
  min-height: min(330px, 17.188vw);
  padding: min(32px, 1.667vw);
  background: var(--case-dark);
}

.approach-grid strong {
  display: block;
  margin-bottom: min(90px, 4.688vw);
  color: var(--case-accent);
  font-family: var(--gis-font-display-latin);
  font-size: min(30px, 1.563vw);
  font-weight: 400;
}

.approach-grid h3 {
  margin: 0 0 min(14px, 0.729vw);
  font-size: min(24px, 1.25vw);
  line-height: 1.1;
}

.approach-grid p {
  margin: 0;
  color: var(--case-muted);
  font-size: min(17px, 0.885vw);
  line-height: 1.5;
}

.research-artifact {
  margin-top: min(120px, 6.25vw);
}

.blueprint-block {
  margin-top: min(150px, 7.813vw);
  padding-top: min(90px, 4.688vw);
}

.research-artifact__head {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: min(80px, 4.167vw);
  align-items: end;
}

.research-artifact__head .case-overline {
  margin: 0 0 min(20px, 1.042vw);
}

.research-artifact__head h3 {
  margin: 0;
  font-family: var(--gis-font-display-latin);
  font-size: min(72px, 3.75vw);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.92;
}

.research-artifact__head > p {
  max-width: min(760px, 39.583vw);
  margin: 0;
  color: var(--case-muted);
  font-size: min(19px, 0.99vw);
  line-height: 1.55;
}

.cjm-persona {
  display: grid;
  margin-top: min(48px, 2.5vw);
  padding: min(24px, 1.25vw) min(28px, 1.458vw);
  align-items: center;
  border-radius: min(18px, 0.938vw);
  background: var(--case-dark);
  grid-template-columns: auto auto 1fr;
  gap: min(28px, 1.458vw);
}

.cjm-persona > span {
  color: var(--case-text);
  font-size: min(12px, 0.625vw);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.cjm-persona > div {
  display: flex;
  padding-right: min(28px, 1.458vw);
  flex-direction: column;
}

.cjm-persona strong {
  color: var(--case-accent);
  font-family: var(--gis-font-display-latin);
  font-size: min(28px, 1.458vw);
  font-weight: 400;
  line-height: 1;
}

.cjm-persona small {
  margin-top: 5px;
  color: var(--case-muted);
  font-size: min(13px, 0.677vw);
}

.cjm-persona blockquote {
  margin: 0;
  color: var(--case-line);
  font-size: min(18px, 0.938vw);
  font-style: italic;
  line-height: 1.4;
}

.research-table-wrap {
  margin-top: min(30px, 1.563vw);
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-color: var(--case-text) var(--case-dark);
  scrollbar-width: thin;
}

.research-table {
  display: grid;
  min-width: 1500px;
  grid-template-columns: 170px repeat(6, minmax(205px, 1fr));
  gap: 3px;
}

.research-table__corner,
.research-stage,
.research-row-label,
.research-cell {
  border-radius: 8px;
}

.research-table__corner {
  background: transparent;
}

.research-stage {
  display: flex;
  min-height: 74px;
  padding: 12px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: var(--case-dark);
  text-align: center;
}

.research-stage span {
  color: var(--case-accent);
  font-family: var(--gis-font-display-latin);
  font-size: 13px;
  line-height: 1;
}

.research-stage strong {
  font-size: 13px;
  line-height: 1.2;
}

.research-row-label {
  display: flex;
  min-height: 112px;
  padding: 14px;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  background: var(--case-dark);
  color: var(--case-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-align: right;
}

.research-row-label small {
  display: block;
  margin-top: 5px;
  color: var(--case-text);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.research-row-label--accent {
  color: var(--case-accent);
}

.research-cell {
  display: flex;
  min-height: 112px;
  padding: 16px;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  background: var(--case-dark);
}

.research-cell strong {
  color: var(--case-soft);
  font-size: 14px;
  line-height: 1.28;
}

.research-cell p {
  margin: 0;
  color: var(--case-muted);
  font-size: 12px;
  line-height: 1.45;
}

.research-cell--muted {
  background: var(--case-dark);
}

.research-cell--muted strong {
  color: var(--case-muted);
}

.research-cell--pain {
  position: relative;
  overflow: hidden;
  background: var(--case-dark);
}

.research-cell--pain::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  content: '';
  background: repeating-linear-gradient(90deg, var(--case-muted) 0 8px, transparent 8px 14px);
}

.research-cell--pain strong {
  color: var(--case-soft);
}

.research-cell--solution {
  background: var(--case-accent);
  color: var(--case-ink);
}

.research-cell--solution strong,
.research-cell--solution p {
  color: var(--case-ink);
}

.research-cell--internal {
  background: var(--case-dark);
}

.research-cell--internal strong {
  color: var(--case-muted);
}

.research-cell--touch {
  background: var(--case-dark);
}

.research-cell--touch strong {
  color: var(--case-muted);
}

.research-cell--empty {
  align-items: center;
  color: var(--case-text);
  background: var(--case-dark);
  font-size: 14px;
}

.cjm-emotion {
  position: relative;
  min-height: 165px;
  padding: 6px 20px 18px;
  border-radius: 8px;
  background: var(--case-dark);
  grid-column: span 6;
}

.cjm-emotion svg {
  display: block;
  width: 100%;
  height: 145px;
  overflow: visible;
}

.cjm-emotion svg > line {
  stroke: var(--case-dark);
  stroke-width: 1;
}

.cjm-emotion__as-is,
.cjm-emotion__to-be {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.cjm-emotion__as-is {
  stroke: var(--case-text);
  stroke-width: 2;
  stroke-dasharray: 7 7;
}

.cjm-emotion__to-be {
  stroke: var(--case-accent);
  stroke-width: 3;
  stroke-linecap: round;
}

.cjm-emotion text {
  font-family: var(--gis-font-body);
  font-size: 10px;
  font-weight: 700;
  text-anchor: middle;
}

.cjm-emotion__labels text {
  fill: var(--case-accent);
}

.cjm-emotion__pain-labels text {
  fill: var(--case-text);
}

.cjm-emotion__legend {
  position: absolute;
  top: 12px;
  left: 18px;
  display: flex;
  gap: 18px;
  color: var(--case-text);
  font-size: 10px;
  font-weight: 700;
}

.cjm-emotion__legend span:first-child {
  color: var(--case-accent);
}

.research-findings {
  display: grid;
  margin-top: min(24px, 1.25vw);
  padding: min(24px, 1.25vw);
  align-items: start;
  border-radius: min(16px, 0.833vw);
  background: var(--case-dark);
  grid-template-columns: 170px 1fr;
  gap: min(24px, 1.25vw);
}

.research-findings > span {
  color: var(--case-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.research-findings > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.research-findings strong {
  display: inline-flex;
  min-height: 34px;
  padding: 7px 12px;
  align-items: center;
  border-radius: 999px;
  background: var(--case-accent);
  color: var(--case-ink);
  font-size: 11px;
  line-height: 1.25;
}

.blueprint-visibility {
  position: relative;
  display: flex;
  height: 34px;
  align-items: center;
  color: var(--case-text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  grid-column: 1 / -1;
}

.blueprint-visibility::before {
  width: 100%;
  height: 1px;
  content: '';
  background: repeating-linear-gradient(90deg, var(--case-white-line) 0 8px, transparent 8px 15px);
}

.blueprint-visibility span {
  position: absolute;
  right: 12px;
  padding-left: 10px;
  background: var(--case-ink);
}

.barriers-head {
  margin-top: min(78px, 4.063vw);
  font-family: var(--gis-font-display-latin);
  font-size: min(26px, 1.354vw);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
}

.barrier-grid {
  display: grid;
  margin-top: min(24px, 1.25vw);
  grid-template-columns: repeat(4, 1fr);
  gap: min(12px, 0.625vw);
}

.barrier-grid article {
  display: flex;
  min-height: min(330px, 17.188vw);
  padding: min(26px, 1.354vw);
  flex-direction: column;
  border: 1px solid var(--case-white-line);
  background: var(--case-dark);
}

.barrier-grid article > span {
  color: var(--case-text);
  font-size: min(13px, 0.677vw);
  letter-spacing: 0.08em;
}

.barrier-grid h3 {
  margin: min(42px, 2.188vw) 0 min(14px, 0.729vw);
  font-family: var(--gis-font-display-latin);
  font-size: min(28px, 1.458vw);
  font-weight: 400;
  line-height: 1.05;
}

.barrier-grid p {
  margin: 0 0 min(28px, 1.458vw);
  color: var(--case-muted);
  font-size: min(16px, 0.833vw);
  line-height: 1.45;
}

.barrier-grid article > strong {
  display: inline-flex;
  width: fit-content;
  margin-top: auto;
  padding: min(9px, 0.469vw) min(12px, 0.625vw);
  border-radius: 999px;
  background: var(--case-accent);
  color: var(--case-ink);
  font-size: min(12px, 0.625vw);
  line-height: 1.2;
}

.constraints-block {
  margin-top: min(92px, 4.792vw);
  padding-top: min(54px, 2.813vw);
  border-top: 1px solid var(--case-white-line);
}

.constraints-block__head {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: min(80px, 4.167vw);
  align-items: end;
}

.constraints-block__head h3 {
  margin: 0;
  font-family: var(--gis-font-display-latin);
  font-size: min(58px, 3.021vw);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.94;
}

.constraints-block__head > p:last-child {
  max-width: min(760px, 39.583vw);
  margin: 0;
  color: var(--case-muted);
  font-size: min(19px, 0.99vw);
  line-height: 1.55;
}

.constraints-grid {
  display: grid;
  margin-top: min(34px, 1.771vw);
  grid-template-columns: repeat(3, 1fr);
  gap: min(12px, 0.625vw);
}

.constraints-grid article {
  display: flex;
  min-height: min(292px, 15.208vw);
  padding: min(24px, 1.25vw);
  flex-direction: column;
  border: 1px solid var(--case-white-line);
  background: var(--case-dark);
}

.constraints-grid article > span {
  color: var(--case-text);
  font-size: min(13px, 0.677vw);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.constraints-grid h4 {
  margin: min(38px, 1.979vw) 0 min(14px, 0.729vw);
  font-family: var(--gis-font-display-latin);
  font-size: min(32px, 1.667vw);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.02;
}

.constraints-grid p {
  margin: 0 0 min(24px, 1.25vw);
  color: var(--case-muted);
  font-size: min(16px, 0.833vw);
  line-height: 1.5;
}

.constraints-grid article > strong {
  display: inline-flex;
  width: fit-content;
  margin-top: auto;
  padding: min(9px, 0.469vw) min(12px, 0.625vw);
  border-radius: 999px;
  background: var(--case-accent);
  color: var(--case-ink);
  font-size: min(12px, 0.625vw);
  line-height: 1.2;
}

/* FEATURE SECTIONS */

.feature {
  position: relative;
  padding-block: min(150px, 7.813vw);
}

.feature + .feature {
  border-top: 1px solid var(--case-line);
}

.feature__number {
  display: flex;
  width: min(110px, 5.729vw);
  height: min(110px, 5.729vw);
  margin-bottom: min(55px, 2.865vw);
  align-items: center;
  justify-content: center;
  border: 2px solid var(--case-ink);
  border-radius: 50%;
  font-family: var(--gis-font-display-latin);
  font-size: min(42px, 2.188vw);
  line-height: 1;
}

.feature__number--accent {
  border-color: var(--case-accent);
  background: var(--case-accent);
}

.feature__number--dark {
  background: var(--case-ink);
  color: var(--case-paper);
}

.feature--order,
.feature--finance {
  background: var(--case-soft);
}

/* ORDER ON SITE */

.order-flow {
  margin-top: min(88px, 4.583vw);
}

.order-flow__step {
  display: grid;
  grid-template-columns: minmax(260px, 0.48fr) minmax(0, 1.52fr);
  gap: min(28px, 1.458vw);
  align-items: start;
}

.order-flow__copy {
  position: sticky;
  top: 110px;
  padding-top: min(18px, 0.938vw);
}

.order-flow__copy > span,
.order-flow__branch > span,
.fulfillment-card header > span,
.order-flow__service span,
.order-impact__group > span {
  color: var(--case-muted);
  font-size: min(12px, 0.625vw);
  font-weight: 700;
  letter-spacing: 0.09em;
}

.order-flow__copy h3 {
  margin: min(34px, 1.771vw) 0 min(18px, 0.938vw);
  font-family: var(--gis-font-display-latin);
  font-size: min(48px, 2.5vw);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.96;
}

.order-flow__copy p {
  max-width: min(440px, 22.917vw);
  margin: 0;
  color: var(--case-text);
  font-size: min(17px, 0.885vw);
  line-height: 1.5;
}

.order-flow__tags {
  display: flex;
  margin-top: min(34px, 1.771vw);
  align-items: flex-start;
  flex-direction: column;
  gap: min(8px, 0.417vw);
}

.order-flow__tags strong {
  display: inline-flex;
  min-height: min(36px, 1.875vw);
  padding-inline: min(14px, 0.729vw);
  align-items: center;
  border-radius: 999px;
  background: var(--case-ink);
  color: var(--case-paper);
  font-size: min(11px, 0.573vw);
  letter-spacing: 0.04em;
  line-height: 1.1;
}

.order-screen {
  margin: 0;
  overflow: hidden;
  border-radius: min(16px, 0.833vw);
  background: var(--case-soft);
}

.order-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
}

.order-screen--cart {
  min-height: min(650px, 33.854vw);
  padding: min(18px, 0.938vw);
}

.order-flow__branch {
  display: grid;
  min-height: min(180px, 9.375vw);
  margin-top: min(78px, 4.063vw);
  padding-block: min(26px, 1.354vw);
  align-items: center;
  border-top: 1px solid var(--case-line);
  border-bottom: 1px solid var(--case-line);
  grid-template-columns: 0.45fr 1fr auto;
  gap: min(28px, 1.458vw);
}

.order-flow__branch > strong {
  font-family: var(--gis-font-display-latin);
  font-size: min(36px, 1.875vw);
  font-weight: 400;
  line-height: 1;
}

.order-flow__branch > div {
  display: flex;
  align-items: center;
  gap: min(8px, 0.417vw);
}

.order-flow__branch i,
.order-flow__branch b {
  display: inline-flex;
  min-height: min(44px, 2.292vw);
  padding-inline: min(18px, 0.938vw);
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: min(12px, 0.625vw);
  font-style: normal;
}

.order-flow__branch i {
  background: var(--case-accent);
  font-weight: 800;
}

.order-flow__branch b {
  padding-inline: min(6px, 0.313vw);
  color: var(--case-muted);
  font-weight: 500;
}

.order-flow__fulfillment {
  display: grid;
  margin-top: min(28px, 1.458vw);
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
  gap: min(18px, 0.938vw);
}

.fulfillment-card {
  min-width: 0;
  padding: min(20px, 1.042vw);
  border-radius: min(16px, 0.833vw);
  background: var(--case-soft);
}

.fulfillment-card--delivery {
  background: var(--product-blue-soft);
}

.fulfillment-card header {
  display: grid;
  min-height: min(92px, 4.792vw);
  grid-template-columns: auto 1fr;
  gap: min(18px, 0.938vw);
  align-items: start;
}

.fulfillment-card header > span {
  display: inline-flex;
  width: min(46px, 2.396vw);
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--case-ink);
  color: var(--case-paper);
  font-family: var(--gis-font-display-latin);
  font-size: min(15px, 0.781vw);
  font-weight: 400;
}

.fulfillment-card header strong {
  display: block;
  font-family: var(--gis-font-display-latin);
  font-size: min(30px, 1.563vw);
  font-weight: 400;
  line-height: 1;
}

.fulfillment-card header p {
  max-width: min(560px, 29.167vw);
  margin: min(8px, 0.417vw) 0 0;
  color: var(--case-text);
  font-size: min(14px, 0.729vw);
  line-height: 1.4;
}

.order-screen--delivery,
.order-screen--pickup {
  height: min(690px, 35.938vw);
  border-radius: min(12px, 0.625vw);
  background: var(--product-surface);
}

.order-screen--delivery {
  background: var(--product-blue-soft);
}

.order-flow__service {
  display: grid;
  min-height: min(260px, 13.542vw);
  margin-top: min(18px, 0.938vw);
  padding: min(34px, 1.771vw);
  align-items: center;
  border-radius: min(16px, 0.833vw);
  background: var(--case-ink);
  color: var(--case-paper);
  grid-template-columns: 1fr auto 1fr;
  gap: min(34px, 1.771vw);
}

.order-flow__service span {
  color: var(--case-muted);
}

.order-flow__service strong {
  display: block;
  margin-top: min(32px, 1.667vw);
  font-family: var(--gis-font-display-latin);
  font-size: min(34px, 1.771vw);
  font-weight: 400;
  line-height: 1;
}

.order-flow__service p {
  max-width: min(510px, 26.563vw);
  margin: min(12px, 0.625vw) 0 0;
  color: var(--case-muted);
  font-size: min(14px, 0.729vw);
  line-height: 1.45;
}

.order-flow__service-arrow {
  color: var(--case-accent);
  font-family: var(--gis-font-display-latin);
  font-size: min(68px, 3.542vw);
  line-height: 1;
}

.order-impact {
  display: grid;
  margin-top: min(20px, 1.042vw);
  grid-template-columns: 1.45fr 0.95fr;
  gap: min(18px, 0.938vw);
}

.order-impact__group {
  display: grid;
  overflow: hidden;
  border-radius: min(14px, 0.729vw);
  background: var(--case-soft);
  grid-template-columns: auto repeat(3, 1fr);
}

.order-impact__group--service {
  grid-template-columns: auto repeat(2, 1fr);
  background: var(--case-accent);
}

.order-impact__group > span {
  display: flex;
  padding: min(18px, 0.938vw);
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.order-impact__group article {
  min-height: min(190px, 9.896vw);
  padding: min(22px, 1.146vw);
}

.order-impact__group strong {
  display: block;
  font-family: var(--gis-font-display-latin);
  font-size: min(58px, 3.021vw);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.9;
}

.order-impact__group p {
  margin: min(36px, 1.875vw) 0 0;
  color: var(--case-text);
  font-size: min(14px, 0.729vw);
  line-height: 1.35;
}

.order-impact__group--service p {
  color: var(--case-text);
}

.catalog-case {
  margin-top: min(86px, 4.479vw);
}

.catalog-case__compare {
  display: grid;
  grid-template-columns: minmax(260px, 0.48fr) minmax(0, 1.52fr);
  gap: min(18px, 0.938vw);
}

.catalog-screen {
  min-width: 0;
  margin: 0;
}

.catalog-screen figcaption,
.catalog-screen__caption,
.catalog-case__flow figcaption {
  display: flex;
  min-height: min(48px, 2.5vw);
  margin-bottom: min(12px, 0.625vw);
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.catalog-screen figcaption span,
.catalog-screen__caption span,
.catalog-case__flow figcaption span {
  display: inline-flex;
  min-height: min(30px, 1.563vw);
  padding-inline: min(12px, 0.625vw);
  align-items: center;
  border-radius: 999px;
  background: var(--case-ink);
  color: var(--case-paper);
  font-family: var(--gis-font-display-latin);
  font-size: min(13px, 0.677vw);
  font-weight: 400;
  letter-spacing: 0.04em;
}

.catalog-screen--after .catalog-screen__caption span {
  background: var(--case-accent);
  color: var(--case-ink);
}

.catalog-screen figcaption strong,
.catalog-screen__caption strong,
.catalog-case__flow figcaption strong {
  font-size: min(14px, 0.729vw);
  letter-spacing: 0.055em;
  text-align: right;
}

.catalog-screen__frame,
.product-redesign,
.catalog-case__shot {
  overflow: hidden;
  border-radius: min(14px, 0.729vw);
  background: var(--product-surface);
}

.catalog-screen__frame--before,
.product-redesign {
  height: min(730px, 38.021vw);
}

.catalog-screen__frame--before {
  display: grid;
  place-items: start center;
  padding: min(20px, 1.042vw);
  background: var(--case-soft);
}

.catalog-screen__frame--before img {
  display: block;
  width: min(78%, 370px);
  height: auto;
  box-shadow: 0 18px 50px var(--case-black-soft);
}

.catalog-screen > p,
.catalog-case__flow figure > p {
  max-width: 620px;
  margin: min(15px, 0.781vw) 0 0;
  color: var(--case-text);
  font-size: min(15px, 0.781vw);
  line-height: 1.45;
}

.product-redesign {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--case-line);
  font-family: var(--gis-font-body);
}

.product-redesign__nav {
  display: flex;
  min-height: min(68px, 3.542vw);
  padding-inline: min(24px, 1.25vw);
  align-items: center;
  gap: min(24px, 1.25vw);
  background: var(--case-paper);
  color: var(--product-ink);
  font-size: min(12px, 0.625vw);
  font-weight: 700;
}

.product-redesign__nav i {
  width: min(31px, 1.615vw);
  aspect-ratio: 1;
  border: min(5px, 0.26vw) solid var(--product-blue);
  border-radius: 50%;
  box-shadow: inset 0 0 0 min(4px, 0.208vw) var(--product-lime);
}

.product-redesign__nav strong {
  padding: min(11px, 0.573vw) min(16px, 0.833vw);
  border-radius: min(10px, 0.521vw);
  background: var(--product-blue);
  color: var(--case-paper);
}

.product-redesign__nav b {
  min-width: min(130px, 6.771vw);
  margin-left: auto;
  padding: min(9px, 0.469vw) min(14px, 0.729vw);
  border: 1px solid var(--case-line);
  border-radius: 999px;
  color: var(--case-muted);
  font-size: min(10px, 0.521vw);
  font-weight: 500;
}

.product-redesign__body {
  display: grid;
  flex: 1;
  padding: min(28px, 1.458vw);
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.42fr);
  gap: min(22px, 1.146vw);
}

.product-redesign__main {
  min-width: 0;
}

.product-redesign__crumbs {
  color: var(--product-blue);
  font-size: min(10px, 0.521vw);
  font-weight: 700;
}

.product-redesign__main h3 {
  margin: min(12px, 0.625vw) 0 min(24px, 1.25vw);
  color: var(--product-ink);
  font-family: var(--gis-font-body);
  font-size: min(27px, 1.406vw);
  line-height: 1.08;
}

.product-redesign__product {
  display: grid;
  min-height: min(260px, 13.542vw);
  padding: min(18px, 0.938vw);
  align-items: center;
  border-radius: min(12px, 0.625vw);
  background: var(--case-paper);
  grid-template-columns: minmax(150px, 0.72fr) minmax(0, 1fr);
  gap: min(22px, 1.146vw);
}

.product-redesign__disc {
  width: min(190px, 9.896vw);
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--product-surface) 0 20%, transparent 21%),
    radial-gradient(circle at 42% 35%, var(--product-metal-light) 0 6%, transparent 7%),
    radial-gradient(circle at center, var(--product-metal-dark) 0 56%, var(--product-metal-mid) 57% 72%, var(--product-metal-dark) 73% 100%);
  box-shadow: inset -18px -14px 30px var(--case-black-soft), 0 16px 34px var(--case-black-soft);
  transform: scaleY(0.48) rotate(-7deg);
}

.product-redesign__variants {
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: min(8px, 0.417vw);
}

.product-redesign__variants span {
  padding: min(8px, 0.417vw) min(11px, 0.573vw);
  border: 1px solid var(--case-line);
  border-radius: min(7px, 0.365vw);
  background: var(--case-paper);
  color: var(--product-ink);
  font-size: min(10px, 0.521vw);
}

.product-redesign__variants span:nth-child(2) {
  border-color: var(--product-blue);
  box-shadow: inset 0 0 0 1px var(--product-blue);
  color: var(--product-blue);
}

.product-redesign__specs {
  display: grid;
  margin-top: min(16px, 0.833vw);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border-radius: min(10px, 0.521vw);
  background: var(--case-line);
}

.product-redesign__specs div {
  display: flex;
  min-height: min(58px, 3.021vw);
  padding: min(12px, 0.625vw);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--case-paper);
}

.product-redesign__specs span {
  color: var(--case-muted);
  font-size: min(9px, 0.469vw);
}

.product-redesign__specs strong {
  color: var(--product-ink);
  font-size: min(10px, 0.521vw);
}

.product-redesign__aside {
  display: flex;
  flex-direction: column;
  gap: min(12px, 0.625vw);
}

.product-redesign__price,
.product-redesign__docs {
  padding: min(20px, 1.042vw);
  border-radius: min(12px, 0.625vw);
  background: var(--case-paper);
}

.product-redesign__price > span {
  color: var(--case-muted);
  font-size: min(9px, 0.469vw);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.product-redesign__price > strong {
  display: block;
  margin-top: min(7px, 0.365vw);
  color: var(--product-ink);
  font-size: min(25px, 1.302vw);
}

.product-redesign__price small {
  display: block;
  margin-top: min(8px, 0.417vw);
  color: var(--product-green);
  font-size: min(9px, 0.469vw);
  line-height: 1.35;
}

.product-redesign__price button {
  width: 100%;
  min-height: min(42px, 2.188vw);
  margin-top: min(14px, 0.729vw);
  border: 0;
  border-radius: min(8px, 0.417vw);
  background: var(--product-blue);
  color: var(--case-paper);
  font-family: var(--gis-font-body);
  font-size: min(10px, 0.521vw);
  font-weight: 700;
}

.product-redesign__price button.is-secondary {
  margin-top: min(8px, 0.417vw);
  border: 1px solid var(--product-blue);
  background: var(--case-paper);
  color: var(--product-blue);
}

.product-redesign__docs {
  display: grid;
  gap: min(10px, 0.521vw);
}

.product-redesign__docs strong {
  color: var(--product-ink);
  font-size: min(11px, 0.573vw);
}

.product-redesign__docs span {
  padding: min(9px, 0.469vw) min(10px, 0.521vw);
  border-radius: min(7px, 0.365vw);
  background: var(--product-blue-soft);
  color: var(--product-blue);
  font-size: min(9px, 0.469vw);
  font-weight: 600;
}

.catalog-case__principles {
  display: grid;
  margin-top: min(18px, 0.938vw);
  grid-template-columns: repeat(3, 1fr);
  gap: min(12px, 0.625vw);
}

.catalog-case__principles article {
  min-height: min(205px, 10.677vw);
  padding: min(22px, 1.146vw);
  border: 1px solid var(--case-line);
  border-radius: min(10px, 0.521vw);
  background: var(--case-soft);
}

.catalog-case__principles article:nth-child(2) {
  background: var(--case-accent);
}

.catalog-case__principles span {
  color: var(--case-muted);
  font-family: var(--gis-font-display-latin);
  font-size: min(18px, 0.938vw);
}

.catalog-case__principles strong {
  display: block;
  margin-top: min(36px, 1.875vw);
  font-family: var(--gis-font-display-latin);
  font-size: min(25px, 1.302vw);
  font-weight: 400;
  line-height: 1;
}

.catalog-case__principles p {
  margin: min(12px, 0.625vw) 0 0;
  color: var(--case-text);
  font-size: min(14px, 0.729vw);
  line-height: 1.45;
}

.catalog-case__principles article:nth-child(2) p {
  color: var(--case-text);
}

.catalog-case__flow-head {
  display: flex;
  margin-top: min(84px, 4.375vw);
  padding-bottom: min(16px, 0.833vw);
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--case-line);
}

.catalog-case__flow-head span {
  color: var(--case-muted);
  font-size: min(12px, 0.625vw);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.catalog-case__flow-head strong {
  font-family: var(--gis-font-display-latin);
  font-size: min(36px, 1.875vw);
  font-weight: 400;
}

.catalog-case__flow {
  display: grid;
  margin-top: min(22px, 1.146vw);
  grid-template-columns: 1fr 1fr;
  gap: min(18px, 0.938vw);
}

.catalog-case__flow figure {
  min-width: 0;
  margin: 0;
}

.catalog-case__shot {
  height: min(540px, 28.125vw);
  padding: min(18px, 0.938vw);
}

.catalog-case__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
}

.catalog-case__shot--shipment {
  background: var(--product-surface);
}

.compare-grid {
  display: grid;
  margin-top: min(84px, 4.375vw);
  grid-template-columns: 1fr 1fr;
  gap: min(20px, 1.042vw);
}

.compare-grid figure {
  margin: 0;
}

.compare-grid figcaption {
  margin-bottom: min(12px, 0.625vw);
  color: var(--case-muted);
  font-size: min(15px, 0.781vw);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.compare-grid .media-frame {
  height: min(520px, 27.083vw);
}

.compare-grid .media-frame img {
  object-fit: contain;
  background: var(--case-soft);
}

.metric-row {
  display: grid;
  margin-top: min(20px, 1.042vw);
  grid-template-columns: repeat(3, 1fr);
  gap: min(20px, 1.042vw);
}

.metric-row--two {
  grid-template-columns: repeat(2, 1fr);
}

.metric-row article {
  min-height: min(220px, 11.458vw);
  padding: min(30px, 1.563vw);
  border-radius: min(8px, 0.417vw);
  background: var(--case-accent);
}

.metric-row strong {
  display: block;
  margin-bottom: min(42px, 2.188vw);
  font-family: var(--gis-font-display-latin);
  font-size: min(76px, 3.958vw);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.9;
}

.metric-row span {
  display: block;
  color: var(--case-text);
  font-size: min(19px, 0.99vw);
  line-height: 1.35;
}

.media-frame--flow {
  height: min(330px, 17.188vw);
  margin-top: min(80px, 4.167vw);
  background: var(--case-paper);
}

.media-frame--flow img {
  object-fit: contain;
}

.media-frame--shipment,
.media-frame--finance,
.media-frame--system {
  height: min(740px, 38.542vw);
  margin-top: min(20px, 1.042vw);
  background: var(--case-paper);
}

.media-frame--shipment img,
.media-frame--finance img,
.media-frame--system img {
  object-fit: contain;
}

.feature--objects {
  background: var(--case-soft);
}

.objects-story {
  display: grid;
  margin-top: min(84px, 4.375vw);
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: min(18px, 0.938vw);
}

.objects-story figure {
  min-width: 0;
  margin: 0;
}

.objects-story figcaption {
  display: flex;
  min-height: min(46px, 2.396vw);
  margin-bottom: min(12px, 0.625vw);
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.objects-story figcaption span {
  display: inline-flex;
  min-width: min(36px, 1.875vw);
  min-height: min(30px, 1.563vw);
  padding-inline: min(10px, 0.521vw);
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--case-ink);
  color: var(--case-paper);
  font-family: var(--gis-font-display-latin);
  font-size: min(13px, 0.677vw);
  font-weight: 400;
}

.objects-story figcaption strong {
  font-size: min(14px, 0.729vw);
  letter-spacing: 0.055em;
  text-align: right;
}

.objects-screen {
  overflow: hidden;
  border-radius: min(12px, 0.625vw);
  background: var(--product-surface);
}

.objects-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
}

.objects-story__list .objects-screen {
  height: min(520px, 27.083vw);
}

.objects-story__active .objects-screen {
  height: min(640px, 33.333vw);
}

.objects-story__list > p {
  max-width: 520px;
  margin: min(16px, 0.833vw) 0 0;
  color: var(--case-text);
  font-size: min(15px, 0.781vw);
  line-height: 1.45;
}

.objects-story__tags {
  display: flex;
  margin-top: min(14px, 0.729vw);
  flex-wrap: wrap;
  gap: min(7px, 0.365vw);
}

.objects-story__tags span {
  display: inline-flex;
  min-height: min(30px, 1.563vw);
  padding-inline: min(12px, 0.625vw);
  align-items: center;
  border-radius: 999px;
  background: var(--case-ink);
  color: var(--case-paper);
  font-size: min(11px, 0.573vw);
  font-weight: 700;
  letter-spacing: 0.045em;
}

.objects-story__tags span:nth-child(2) {
  background: var(--case-accent);
  color: var(--case-ink);
}

.objects-story__empty {
  display: grid;
  margin-top: min(72px, 3.75vw) !important;
  padding-top: min(28px, 1.458vw);
  border-top: 1px solid var(--case-line);
  grid-column: 1 / -1;
  grid-template-columns: minmax(260px, 0.56fr) minmax(0, 1.44fr);
  gap: min(36px, 1.875vw);
}

.objects-story__empty-copy h3 {
  margin: min(56px, 2.917vw) 0 0;
  font-family: var(--gis-font-display-latin);
  font-size: min(54px, 2.813vw);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.94;
}

.objects-story__empty-copy > p {
  max-width: 520px;
  margin: min(18px, 0.938vw) 0 0;
  color: var(--case-text);
  font-size: min(16px, 0.833vw);
  line-height: 1.45;
}

.objects-story__empty .objects-screen {
  height: min(470px, 24.479vw);
}

.objects-principles {
  display: grid;
  margin-top: min(18px, 0.938vw);
  grid-template-columns: repeat(3, 1fr);
  gap: min(12px, 0.625vw);
}

.objects-principles article {
  min-height: min(210px, 10.938vw);
  padding: min(24px, 1.25vw);
  border-radius: min(10px, 0.521vw);
  background: var(--case-paper);
}

.objects-principles article:nth-child(2) {
  background: var(--case-accent);
}

.objects-principles span {
  color: var(--case-muted);
  font-family: var(--gis-font-display-latin);
  font-size: min(18px, 0.938vw);
}

.objects-principles strong {
  display: block;
  margin-top: min(38px, 1.979vw);
  font-family: var(--gis-font-display-latin);
  font-size: min(26px, 1.354vw);
  font-weight: 400;
  line-height: 1;
}

.objects-principles p {
  margin: min(12px, 0.625vw) 0 0;
  color: var(--case-text);
  font-size: min(14px, 0.729vw);
  line-height: 1.45;
}

.orders-layout {
  display: grid;
  margin-top: min(85px, 4.427vw);
  grid-template-columns: minmax(250px, 0.55fr) minmax(250px, 0.55fr) minmax(0, 1.3fr);
  gap: min(20px, 1.042vw);
}

.orders-copy {
  min-height: min(430px, 22.396vw);
  padding: min(30px, 1.563vw);
  border-radius: min(8px, 0.417vw);
  background: var(--case-soft);
}

.orders-copy span {
  display: block;
  margin-bottom: min(100px, 5.208vw);
  color: var(--case-muted);
  font-family: var(--gis-font-display-latin);
  font-size: min(26px, 1.354vw);
}

.orders-copy h3 {
  margin: 0 0 min(18px, 0.938vw);
  font-family: var(--gis-font-display-latin);
  font-size: min(44px, 2.292vw);
  font-weight: 400;
  line-height: 1;
}

.orders-copy p {
  margin: 0;
  color: var(--case-text);
  font-size: min(18px, 0.938vw);
  line-height: 1.45;
}

.orders-schematic {
  min-height: min(430px, 22.396vw);
  padding: min(32px, 1.667vw);
  border-radius: min(8px, 0.417vw);
  background: var(--case-ink);
  color: var(--case-paper);
}

.orders-schematic__head,
.orders-schematic__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.orders-schematic__head {
  padding-bottom: min(28px, 1.458vw);
  font-family: var(--gis-font-display-latin);
  font-size: min(28px, 1.458vw);
}

.orders-schematic__row {
  min-height: min(90px, 4.688vw);
}

.orders-schematic__row b {
  font-size: min(19px, 0.99vw);
}

.orders-schematic__row i {
  padding: min(10px, 0.521vw) min(18px, 0.938vw);
  border-radius: 999px;
  background: var(--case-accent);
  color: var(--case-ink);
  font-size: min(14px, 0.729vw);
  font-style: normal;
  font-weight: 700;
}

/* MOBILE */

.mobile-grid {
  display: grid;
  margin-top: min(80px, 4.167vw);
  align-items: end;
  grid-template-columns: repeat(3, 1fr);
  gap: min(20px, 1.042vw);
}

.phone-card {
  min-height: min(620px, 32.292vw);
  padding: min(28px, 1.458vw);
  overflow: hidden;
  border-radius: min(180px, 9.375vw) min(180px, 9.375vw) min(10px, 0.521vw) min(10px, 0.521vw);
  background: var(--case-white-muted);
}

.phone-card--raised {
  transform: translateY(min(-48px, -2.5vw));
}

.phone-card > span {
  display: block;
  margin-top: min(60px, 3.125vw);
  text-align: center;
  font-family: var(--gis-font-display-latin);
  font-size: min(34px, 1.771vw);
}

.phone-card__device {
  position: relative;
  width: min(260px, 13.542vw);
  height: min(470px, 24.479vw);
  margin: min(38px, 1.979vw) auto -120px;
  padding: min(52px, 2.708vw) min(18px, 0.938vw) min(18px, 0.938vw);
  border: min(10px, 0.521vw) solid var(--case-ink);
  border-radius: min(46px, 2.396vw);
  background: var(--case-paper);
}

.phone-card__device::before {
  position: absolute;
  top: min(14px, 0.729vw);
  left: 50%;
  width: 34%;
  height: min(8px, 0.417vw);
  border-radius: 999px;
  content: '';
  background: var(--case-ink);
  transform: translateX(-50%);
}

.phone-card__device i,
.phone-card__device b {
  display: block;
  border-radius: min(8px, 0.417vw);
  background: var(--case-soft);
}

.phone-card__device i {
  height: min(62px, 3.229vw);
  margin-bottom: min(12px, 0.625vw);
}

.phone-card__device b {
  height: min(94px, 4.896vw);
  background: var(--case-accent);
}

/* DESIGN SYSTEM */

.media-frame--system {
  margin-top: min(85px, 4.427vw);
}

.system-grid {
  display: grid;
  margin-top: min(20px, 1.042vw);
  grid-template-columns: repeat(3, 1fr);
  gap: min(12px, 0.625vw);
}

.system-grid article {
  display: flex;
  min-height: min(150px, 7.813vw);
  padding: min(28px, 1.458vw);
  align-items: center;
  gap: min(34px, 1.771vw);
  background: var(--case-dark);
}

.system-grid strong {
  color: var(--case-accent);
  font-family: var(--gis-font-display-latin);
  font-size: min(36px, 1.875vw);
  font-weight: 400;
}

.system-grid span {
  color: var(--case-muted);
  font-size: min(18px, 0.938vw);
  line-height: 1.25;
}

/* RESULTS */

.results {
  overflow: hidden;
  background: var(--case-paper);
  color: var(--case-ink);
}

.results-poster {
  position: relative;
  min-height: min(1000px, 96vh);
  padding-top: min(34px, 1.771vw);
}

.results-poster__meta {
  position: absolute;
  z-index: 8;
  top: min(30px, 1.563vw);
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: min(18px, 0.938vw);
}

.results-poster__title {
  display: flex;
  flex-direction: column;
  color: var(--case-ink);
  font-family: var(--gis-font-display-latin);
  font-size: min(96px, 5vw);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.78;
}

.results-poster__title b {
  margin-top: min(16px, 0.833vw);
  color: var(--case-accent);
  font-size: 1.06em;
  font-weight: 400;
}

.results-poster__period {
  color: var(--case-text);
  font-size: min(13px, 0.677vw);
  font-weight: 700;
  letter-spacing: 0.09em;
}

.results-poster__story {
  position: relative;
  z-index: 6;
  width: min(57%, 1060px);
  margin-left: auto;
}

.results-poster__story h2 {
  margin: 0;
  font-family: var(--gis-font-display-latin);
  font-size: min(80px, 4.167vw);
  font-weight: 400;
  letter-spacing: -0.034em;
  line-height: 0.94;
}

.results-poster__copy {
  display: grid;
  margin-top: min(178px, 9.271vw);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: min(48px, 2.5vw);
}

.results-poster__copy p {
  margin: 0;
  color: var(--case-text);
  font-size: min(18px, 0.938vw);
  line-height: 1.48;
}

.results-bubbles {
  position: relative;
  min-height: min(540px, 28.125vw);
  margin-top: max(-20px, -1.042vw);
}

.result-bubble,
.result-orb {
  position: absolute;
  display: flex;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.result-bubble {
  z-index: 4;
  padding: min(18px, 0.938vw);
  flex-direction: column;
  text-align: center;
}

.result-bubble::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  content: '';
  background: repeating-radial-gradient(circle at 28% 34%, var(--case-black-soft) 0 1px, transparent 1px 5px);
  opacity: 0.28;
  pointer-events: none;
}

.result-bubble strong,
.result-bubble span,
.result-bubble small {
  position: relative;
  z-index: 1;
}

.result-bubble strong {
  font-family: var(--gis-font-display-latin);
  font-size: min(52px, 2.708vw);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.88;
}

.result-bubble span {
  margin-top: min(11px, 0.573vw);
  font-size: min(13px, 0.677vw);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.12;
}

.result-bubble small {
  margin-top: min(8px, 0.417vw);
  color: var(--case-text);
  font-size: min(14px, 0.729vw);
  line-height: 1.18;
}

.result-bubble--users {
  left: 0;
  bottom: -3%;
  width: 16.5%;
  background: var(--case-line);
}

.result-bubble--sessions {
  left: 13.2%;
  bottom: 17%;
  width: 13.5%;
  background: var(--case-dark);
  color: var(--case-paper);
}

.result-bubble--sessions small,
.result-bubble--support small {
  color: var(--case-white-muted);
}

.result-bubble--sessions::after,
.result-bubble--support::after {
  background: repeating-radial-gradient(circle at 30% 30%, var(--case-white-line) 0 1px, transparent 1px 5px);
}

.result-bubble--pageviews {
  left: 23%;
  bottom: -7%;
  width: 21.5%;
  background: var(--case-accent);
}

.result-bubble--pageviews strong {
  font-size: min(70px, 3.646vw);
}

.result-bubble--duration {
  left: 42%;
  bottom: 12%;
  width: 14%;
  background: var(--case-soft);
}

.result-bubble--support {
  right: 16%;
  bottom: -8%;
  width: 17%;
  background: var(--case-dark);
  color: var(--case-paper);
}

.result-bubble--returning {
  right: 0;
  bottom: 8%;
  width: 14.5%;
  background: var(--case-line);
}

.result-bubble--returning strong {
  font-size: min(42px, 2.188vw);
}

.result-orb {
  z-index: 2;
  background: var(--case-line);
}

.result-orb--a {
  top: -52%;
  left: 6%;
  width: 4.2%;
  background: var(--case-accent);
}

.result-orb--b {
  top: -32%;
  left: 13%;
  width: 7.4%;
  background: var(--case-line);
}

.result-orb--c {
  top: -4%;
  left: 4.2%;
  width: 6.4%;
  background: var(--case-dark);
}

.result-orb--d {
  left: 9.5%;
  bottom: 2%;
  width: 6.5%;
  background: var(--case-soft);
}

.result-orb--e {
  left: 42.5%;
  bottom: -3%;
  width: 7%;
  background: var(--case-line);
}

.result-orb--f {
  right: 31%;
  bottom: 0;
  width: 4.5%;
  background: var(--case-accent);
}

.result-orb--g {
  right: 12%;
  bottom: 0;
  width: 5%;
  background: var(--case-soft);
}

.result-orb--h {
  right: -1%;
  bottom: -2%;
  width: 5.5%;
  background: var(--case-accent);
}

/* FINALE */

.case-finale {
  background: var(--case-ink);
  color: var(--case-paper);
}

.case-finale__inner {
  display: flex;
  min-height: min(480px, 25vw);
  padding-block: min(90px, 4.688vw);
  align-items: center;
  justify-content: space-between;
  gap: min(70px, 3.646vw);
}

.case-finale h2 {
  margin: 0;
  font-family: var(--gis-font-display-latin);
  font-size: min(104px, 5.417vw);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.92;
}

.case-finale__inner > div > p:last-child {
  max-width: min(700px, 36.458vw);
  margin: min(28px, 1.458vw) 0 0;
  color: var(--case-muted);
  font-size: min(22px, 1.146vw);
  line-height: 1.4;
}

.case-finale__action {
  display: inline-flex;
  min-width: min(300px, 15.625vw);
  min-height: min(110px, 5.729vw);
  padding-inline: min(40px, 2.083vw);
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--case-accent);
  color: var(--case-ink);
  font-family: var(--gis-font-display-latin);
  font-size: min(32px, 1.667vw);
  line-height: 1;
  transition: transform 220ms var(--ease);
}

.case-finale__action:hover {
  transform: rotate(-2deg) scale(1.03);
}

.next-case {
  display: flex;
  min-height: min(180px, 9.375vw);
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.next-case > span {
  color: var(--case-muted);
  font-size: min(16px, 0.833vw);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.next-case > strong {
  font-family: var(--gis-font-display-latin);
  font-size: min(44px, 2.292vw);
  font-weight: 400;
}

@media (max-width: 1100px) {
  .case-shell {
    width: calc(100% - 32px);
  }

  .case-hero {
    padding-top: 96px;
  }

  .case-hero__grid,
  .section-head {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .case-title {
    font-size: clamp(58px, 9vw, 92px);
  }

  .case-lead,
  .case-hero__summary {
    max-width: 760px;
    font-size: 20px;
  }

  .case-hero__copy h1 {
    font-size: clamp(74px, 11vw, 118px);
  }

  .case-meta,
  .problem-grid,
  .approach-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .research-artifact__head {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .constraints-block__head {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .research-artifact__head > p {
    max-width: 760px;
    font-size: 18px;
  }

  .constraints-block__head > p:last-child {
    max-width: 760px;
    font-size: 18px;
  }

  .research-artifact__head h3 {
    font-size: clamp(52px, 7vw, 76px);
  }

  .cjm-persona {
    grid-template-columns: auto 1fr;
  }

  .cjm-persona blockquote {
    grid-column: 1 / -1;
  }

  .barrier-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .constraints-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .constraints-grid article:last-child {
    grid-column: 1 / -1;
  }

  .case-meta > div:nth-child(2) {
    border-right: 0;
  }

  .case-meta > div:nth-child(-n + 2) {
    border-bottom: 2px solid var(--case-ink);
  }

  .segment-grid,
  .mobile-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .segment-card--dark,
  .phone-card:last-child {
    grid-column: 1 / -1;
  }

  .approach-grid article:nth-child(2),
  .approach-grid article:nth-child(-n + 2) {
    border: 0;
  }

  .orders-layout {
    grid-template-columns: 1fr 1fr;
  }

  .objects-story {
    grid-template-columns: 0.82fr 1.18fr;
    gap: 14px;
  }

  .objects-story__list .objects-screen {
    height: 430px;
  }

  .objects-story__active .objects-screen {
    height: 520px;
  }

  .objects-story figcaption strong {
    font-size: 12px;
  }

  .objects-story__list > p,
  .objects-story__empty-copy > p {
    font-size: 15px;
  }

  .objects-story__empty {
    grid-template-columns: 0.7fr 1.3fr;
  }

  .objects-story__empty-copy h3 {
    font-size: 46px;
  }

  .objects-story__empty .objects-screen {
    height: 400px;
  }

  .objects-principles strong {
    font-size: 22px;
  }

  .objects-principles p {
    font-size: 13px;
  }

  .catalog-case__compare {
    grid-template-columns: minmax(220px, 0.52fr) minmax(0, 1.48fr);
  }

  .catalog-screen__frame--before,
  .product-redesign {
    height: 620px;
  }

  .product-redesign__nav span:nth-of-type(3) {
    display: none;
  }

  .product-redesign__body {
    grid-template-columns: minmax(0, 1fr) 230px;
  }

  .catalog-case__shot {
    height: 420px;
  }

  .orders-schematic {
    grid-column: 1 / -1;
  }

  .compare-grid .media-frame {
    height: 420px;
  }

  .media-frame--flow {
    height: 290px;
  }

  .media-frame--shipment,
  .media-frame--finance,
  .media-frame--system {
    height: 560px;
  }

  .metric-row strong {
    font-size: 56px;
  }

  .order-flow__step {
    grid-template-columns: 0.52fr 1.48fr;
    gap: 24px;
  }

  .order-flow__copy {
    top: 90px;
  }

  .order-flow__copy > span,
  .order-flow__branch > span,
  .fulfillment-card header > span,
  .order-flow__service span,
  .order-impact__group > span {
    font-size: 11px;
  }

  .order-flow__copy h3 {
    font-size: 38px;
  }

  .order-flow__copy p {
    max-width: 320px;
    font-size: 15px;
  }

  .order-flow__tags strong {
    min-height: 34px;
    padding-inline: 12px;
    font-size: 10px;
  }

  .order-screen--cart {
    min-height: 500px;
    padding: 14px;
  }

  .order-flow__branch {
    min-height: 150px;
    grid-template-columns: 0.42fr 1fr auto;
    gap: 20px;
  }

  .order-flow__branch > strong {
    font-size: 28px;
  }

  .order-flow__branch i,
  .order-flow__branch b {
    min-height: 40px;
    padding-inline: 14px;
    font-size: 11px;
  }

  .fulfillment-card {
    padding: 16px;
  }

  .fulfillment-card header {
    min-height: 84px;
    gap: 14px;
  }

  .fulfillment-card header > span {
    width: 42px;
    font-size: 13px;
  }

  .fulfillment-card header strong {
    font-size: 26px;
  }

  .fulfillment-card header p {
    font-size: 13px;
  }

  .order-screen--delivery,
  .order-screen--pickup {
    height: 520px;
  }

  .order-flow__service {
    min-height: 230px;
    padding: 28px;
    gap: 26px;
  }

  .order-flow__service strong {
    margin-top: 26px;
    font-size: 30px;
  }

  .order-flow__service p {
    font-size: 13px;
  }

  .order-flow__service-arrow {
    font-size: 54px;
  }

  .order-impact {
    grid-template-columns: 1fr;
  }

  .order-impact__group article {
    min-height: 170px;
    padding: 20px;
  }

  .order-impact__group strong {
    font-size: 50px;
  }

  .order-impact__group p {
    margin-top: 30px;
    font-size: 13px;
  }

  .results-poster {
    min-height: 980px;
    padding-top: 28px;
  }

  .results-poster__meta {
    top: 18px;
  }

  .results-poster__title {
    font-size: 76px;
  }

  .results-poster__period {
    font-size: 12px;
  }

  .results-poster__story {
    width: 63%;
  }

  .results-poster__story h2 {
    font-size: 64px;
  }

  .results-poster__copy {
    margin-top: 150px;
    gap: 32px;
  }

  .results-poster__copy p {
    font-size: 18px;
  }

  .results-bubbles {
    min-height: 520px;
    margin-top: 4px;
  }

  .result-bubble strong {
    font-size: 44px;
  }

  .result-bubble--pageviews strong {
    font-size: 60px;
  }

  .result-bubble--returning strong {
    font-size: 36px;
  }

  .result-bubble span {
    font-size: 12px;
  }

  .result-bubble small {
    font-size: 13px;
  }
}

@media (max-width: 700px) {
  .case-shell {
    width: calc(100% - 24px);
  }

  .case-hero {
    padding-top: 84px;
    padding-bottom: 72px;
  }

  .case-hero__grid {
    margin-top: 58px;
  }

  .case-hero__copy h1 {
    font-size: clamp(54px, 16vw, 82px);
    line-height: 0.9;
  }

  .case-overline {
    margin-bottom: 14px;
    font-size: 12px;
  }

  .case-title {
    font-size: clamp(48px, 14vw, 72px);
  }

  .case-lead,
  .case-hero__summary {
    font-size: 17px;
  }

  .media-frame--cover {
    height: 64vw;
    margin-top: 52px;
  }

  .case-meta,
  .problem-grid,
  .segment-grid,
  .approach-grid,
  .barrier-grid,
  .constraints-grid,
  .compare-grid,
  .metric-row,
  .metric-row--two,
  .orders-layout,
  .mobile-grid,
  .system-grid {
    grid-template-columns: 1fr;
  }

  .case-meta > div {
    min-height: 84px;
    padding: 16px;
    border-right: 0;
    border-bottom: 1px solid var(--case-ink);
  }

  .case-meta > div:last-child {
    border-bottom: 0;
  }

  .case-meta dt {
    font-size: 11px;
  }

  .case-meta dd {
    font-size: 17px;
  }

  .case-section,
  .feature,
  .results,
  .audience__inner,
  .approach__inner,
  .mobile-section__inner,
  .design-system__inner {
    padding-block: 86px;
  }

  .case-quote {
    min-height: 260px;
    margin-top: 52px;
    padding: 32px 24px;
    border-radius: 100px 8px 8px 8px;
    grid-template-columns: 1fr;
  }

  .case-quote__mark {
    font-size: 120px;
  }

  .case-quote p {
    font-size: 38px;
  }

  .case-quote small {
    grid-column: 1;
    font-size: 14px;
  }

  .problem-grid article,
  .segment-card,
  .approach-grid article,
  .orders-copy,
  .orders-schematic {
    min-height: 0;
  }

  .problem-grid article,
  .segment-card,
  .orders-copy,
  .orders-schematic {
    padding: 24px;
  }

  .problem-grid article strong,
  .approach-grid strong,
  .orders-copy span {
    margin-bottom: 44px;
  }

  .problem-grid article h3 {
    font-size: 24px;
  }

  .problem-grid article p,
  .segment-card p,
  .approach-grid p,
  .orders-copy p {
    font-size: 15px;
  }

  .segment-card,
  .segment-card--round,
  .segment-card--arch {
    min-height: 390px;
    border-radius: 80px 8px 8px 8px;
    padding-top: 52px;
  }

  .segment-card h3 {
    font-size: 46px;
  }

  .segment-card > span,
  .segment-card strong {
    font-size: 15px;
  }

  .approach-grid article {
    padding: 28px;
    border: 0;
    background: var(--case-dark);
  }

  .approach-grid h3 {
    font-size: 22px;
  }

  .research-artifact {
    margin-top: 72px;
  }

  .blueprint-block {
    margin-top: 88px;
    padding-top: 64px;
  }

  .constraints-block {
    margin-top: 72px;
    padding-top: 52px;
  }

  .research-artifact__head > p {
    font-size: 16px;
  }

  .constraints-block__head > p:last-child {
    font-size: 16px;
  }

  .constraints-block__head h3 {
    font-size: 44px;
  }

  .research-artifact__head h3 {
    font-size: clamp(44px, 13vw, 64px);
  }

  .cjm-persona {
    margin-top: 32px;
    padding: 20px;
    grid-template-columns: 1fr;
    gap: 14px;
    border-radius: 16px;
  }

  .cjm-persona > span {
    font-size: 11px;
  }

  .cjm-persona > div {
    padding: 0 0 14px;
    border: 0;
  }

  .cjm-persona strong {
    font-size: 26px;
  }

  .cjm-persona small {
    font-size: 12px;
  }

  .cjm-persona blockquote {
    font-size: 16px;
    grid-column: auto;
  }

  .research-table {
    min-width: 1320px;
    grid-template-columns: 145px repeat(6, minmax(190px, 1fr));
  }

  .research-stage {
    min-height: 64px;
  }

  .research-stage strong,
  .research-stage span {
    font-size: 12px;
  }

  .research-row-label,
  .research-cell {
    min-height: 104px;
  }

  .research-row-label {
    padding: 12px;
    font-size: 11px;
  }

  .research-cell {
    padding: 14px;
  }

  .research-cell strong {
    font-size: 13px;
  }

  .research-cell p {
    font-size: 11px;
  }

  .cjm-emotion {
    min-height: 150px;
  }

  .research-findings {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .research-findings strong {
    font-size: 10px;
  }

  .barriers-head {
    margin-top: 54px;
    font-size: 22px;
    line-height: 1.1;
  }

  .barrier-grid article {
    min-height: 280px;
    padding: 24px;
  }

  .barrier-grid article > span {
    font-size: 12px;
  }

  .barrier-grid h3 {
    margin-top: 36px;
    font-size: 26px;
  }

  .barrier-grid p {
    font-size: 15px;
  }

  .barrier-grid article > strong {
    padding: 8px 10px;
    font-size: 12px;
  }

  .constraints-grid article,
  .constraints-grid article:last-child {
    min-height: 0;
    padding: 24px;
    grid-column: auto;
  }

  .constraints-grid article > span {
    font-size: 12px;
  }

  .constraints-grid h4 {
    margin-top: 36px;
    font-size: 28px;
  }

  .constraints-grid p {
    font-size: 15px;
  }

  .constraints-grid article > strong {
    padding: 8px 10px;
    font-size: 12px;
  }

  .feature__number {
    width: 72px;
    height: 72px;
    margin-bottom: 38px;
    font-size: 28px;
  }

  .objects-story {
    margin-top: 56px;
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .objects-story figcaption {
    min-height: 38px;
    margin-bottom: 10px;
  }

  .objects-story figcaption span {
    min-width: 32px;
    min-height: 28px;
    padding-inline: 9px;
    font-size: 12px;
  }

  .objects-story figcaption strong {
    font-size: 12px;
  }

  .objects-story__list .objects-screen,
  .objects-story__active .objects-screen,
  .objects-story__empty .objects-screen {
    height: auto;
    aspect-ratio: 1.18;
  }

  .objects-story__active .objects-screen {
    aspect-ratio: 0.95;
  }

  .objects-story__list > p,
  .objects-story__empty-copy > p {
    margin-top: 12px;
    font-size: 15px;
  }

  .objects-story__tags {
    margin-top: 12px;
    gap: 6px;
  }

  .objects-story__tags span {
    min-height: 28px;
    padding-inline: 10px;
    font-size: 10px;
  }

  .objects-story__empty {
    margin-top: 10px !important;
    padding-top: 34px;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .objects-story__empty-copy h3 {
    margin-top: 36px;
    font-size: 42px;
  }

  .objects-principles {
    margin-top: 12px;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .objects-principles article {
    min-height: 0;
    padding: 22px;
  }

  .objects-principles span {
    font-size: 16px;
  }

  .objects-principles strong {
    margin-top: 26px;
    font-size: 25px;
  }

  .objects-principles p {
    font-size: 15px;
  }

  .catalog-case {
    margin-top: 54px;
  }

  .catalog-case__compare,
  .catalog-case__principles,
  .catalog-case__flow {
    grid-template-columns: 1fr;
  }

  .catalog-screen figcaption,
  .catalog-screen__caption,
  .catalog-case__flow figcaption {
    min-height: 40px;
    margin-bottom: 10px;
  }

  .catalog-screen figcaption span,
  .catalog-screen__caption span,
  .catalog-case__flow figcaption span {
    min-height: 28px;
    padding-inline: 10px;
    font-size: 12px;
  }

  .catalog-screen figcaption strong,
  .catalog-screen__caption strong,
  .catalog-case__flow figcaption strong {
    font-size: 12px;
  }

  .catalog-screen__frame--before {
    height: 470px;
    padding: 16px;
  }

  .catalog-screen__frame--before img {
    width: min(52%, 250px);
  }

  .catalog-screen > p,
  .catalog-case__flow figure > p {
    margin-top: 12px;
    font-size: 14px;
  }

  .catalog-screen--after {
    margin-top: 38px;
  }

  .product-redesign {
    height: auto;
    min-height: 720px;
    border-radius: 12px;
  }

  .product-redesign__nav {
    min-height: 58px;
    padding-inline: 14px;
    gap: 12px;
    font-size: 11px;
  }

  .product-redesign__nav i {
    width: 28px;
    border-width: 4px;
  }

  .product-redesign__nav strong {
    padding: 9px 12px;
  }

  .product-redesign__nav span,
  .product-redesign__nav b {
    display: none;
  }

  .product-redesign__body {
    padding: 18px;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .product-redesign__crumbs {
    font-size: 10px;
  }

  .product-redesign__main h3 {
    margin: 10px 0 18px;
    font-size: 24px;
  }

  .product-redesign__product {
    min-height: 230px;
    padding: 16px;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 16px;
  }

  .product-redesign__disc {
    width: 140px;
  }

  .product-redesign__variants {
    gap: 7px;
  }

  .product-redesign__variants span {
    padding: 7px 9px;
    font-size: 10px;
  }

  .product-redesign__specs {
    margin-top: 12px;
  }

  .product-redesign__specs div {
    min-height: 52px;
    padding: 10px;
  }

  .product-redesign__specs span,
  .product-redesign__specs strong {
    font-size: 9px;
  }

  .product-redesign__aside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .product-redesign__price,
  .product-redesign__docs {
    padding: 16px;
  }

  .product-redesign__price > span,
  .product-redesign__price small,
  .product-redesign__docs span {
    font-size: 9px;
  }

  .product-redesign__price > strong {
    font-size: 22px;
  }

  .product-redesign__price button {
    min-height: 40px;
    font-size: 10px;
  }

  .product-redesign__docs strong {
    font-size: 11px;
  }

  .catalog-case__principles {
    margin-top: 12px;
    gap: 8px;
  }

  .catalog-case__principles article {
    min-height: 0;
    padding: 22px;
  }

  .catalog-case__principles span {
    font-size: 16px;
  }

  .catalog-case__principles strong {
    margin-top: 34px;
    font-size: 25px;
  }

  .catalog-case__principles p {
    margin-top: 12px;
    font-size: 14px;
  }

  .catalog-case__flow-head {
    margin-top: 64px;
    padding-bottom: 14px;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .catalog-case__flow-head span {
    font-size: 11px;
  }

  .catalog-case__flow-head strong {
    font-size: 30px;
  }

  .catalog-case__flow {
    margin-top: 16px;
    gap: 38px;
  }

  .catalog-case__shot {
    height: 330px;
    padding: 12px;
  }

  .compare-grid .media-frame {
    height: 330px;
  }

  .compare-grid figcaption {
    font-size: 11px;
  }

  .metric-row article {
    min-height: 180px;
    padding: 24px;
  }

  .metric-row strong {
    margin-bottom: 34px;
    font-size: 56px;
  }

  .metric-row span {
    font-size: 16px;
  }

  .order-flow {
    margin-top: 58px;
  }

  .order-flow__step {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .order-flow__copy {
    position: static;
    padding-top: 0;
  }

  .order-flow__copy > span,
  .order-flow__branch > span,
  .order-flow__service span,
  .order-impact__group > span {
    font-size: 11px;
  }

  .order-flow__copy h3 {
    margin-top: 24px;
    font-size: 40px;
  }

  .order-flow__copy p {
    max-width: 100%;
    font-size: 16px;
  }

  .order-flow__tags {
    margin-top: 26px;
  }

  .order-flow__tags strong {
    min-height: 34px;
    padding-inline: 12px;
    font-size: 10px;
  }

  .order-screen--cart {
    min-height: 0;
    padding: 10px;
  }

  .order-screen--cart img {
    height: auto;
  }

  .order-flow__branch {
    min-height: 0;
    margin-top: 52px;
    padding-block: 24px;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .order-flow__branch > strong {
    font-size: 30px;
  }

  .order-flow__branch > div {
    flex-wrap: wrap;
  }

  .order-flow__branch i,
  .order-flow__branch b {
    min-height: 38px;
    padding-inline: 14px;
    font-size: 11px;
  }

  .order-flow__fulfillment {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .fulfillment-card {
    padding: 14px;
    border-radius: 14px;
  }

  .fulfillment-card header {
    min-height: 0;
    margin-bottom: 18px;
    grid-template-columns: auto 1fr;
  }

  .fulfillment-card header > span {
    width: 40px;
    font-size: 12px;
  }

  .fulfillment-card header strong {
    font-size: 26px;
  }

  .fulfillment-card header p {
    max-width: 100%;
    font-size: 13px;
  }

  .order-screen--delivery,
  .order-screen--pickup {
    height: auto;
  }

  .order-screen--delivery img,
  .order-screen--pickup img {
    height: auto;
  }

  .order-flow__service {
    min-height: 0;
    margin-top: 12px;
    padding: 24px;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .order-flow__service strong {
    margin-top: 20px;
    font-size: 30px;
  }

  .order-flow__service p {
    max-width: 100%;
    font-size: 14px;
  }

  .order-flow__service-arrow {
    font-size: 42px;
    transform: rotate(90deg);
    transform-origin: left center;
  }

  .order-impact {
    margin-top: 12px;
  }

  .order-impact__group,
  .order-impact__group--service {
    grid-template-columns: 1fr 1fr;
  }

  .order-impact__group > span {
    padding: 14px;
    border: 0;
    grid-column: 1 / -1;
    writing-mode: horizontal-tb;
    transform: none;
  }

  .order-impact__group article {
    min-height: 150px;
    padding: 18px;
    border: 0;
  }

  .order-impact__group article:nth-child(odd) {
    border: 0;
  }

  .order-impact__group strong {
    font-size: 48px;
  }

  .order-impact__group p {
    margin-top: 24px;
    font-size: 12px;
  }

  .media-frame--flow {
    height: 220px;
    margin-top: 52px;
  }

  .media-frame--shipment,
  .media-frame--finance,
  .media-frame--system {
    height: 360px;
  }

  .orders-copy span,
  .orders-schematic__head {
    font-size: 18px;
  }

  .orders-copy h3 {
    font-size: 38px;
  }

  .orders-schematic__row {
    min-height: 72px;
  }

  .orders-schematic__row b {
    font-size: 14px;
  }

  .orders-schematic__row i {
    padding: 8px 10px;
    font-size: 10px;
  }

  .phone-card,
  .phone-card--raised {
    min-height: 470px;
    transform: none;
  }

  .phone-card > span {
    margin-top: 46px;
    font-size: 28px;
  }

  .phone-card__device {
    width: 210px;
    height: 390px;
    margin-top: 26px;
    padding: 44px 14px 14px;
    border-width: 8px;
    border-radius: 36px;
  }

  .phone-card__device i {
    height: 50px;
  }

  .phone-card__device b {
    height: 82px;
  }

  .system-grid article {
    min-height: 100px;
    border: 0;
    background: var(--case-dark);
  }

  .system-grid strong {
    font-size: 26px;
  }

  .system-grid span {
    font-size: 14px;
  }

  .results-poster {
    min-height: 0;
    padding-top: 22px;
    padding-bottom: 36px;
  }

  .results-poster__meta {
    position: static;
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-between;
  }

  .results-poster__title {
    font-size: clamp(70px, 21vw, 94px);
  }

  .results-poster__title b {
    margin-top: 10px;
  }

  .results-poster__period {
    padding-top: 4px;
    font-size: 11px;
  }

  .results-poster__story {
    width: 100%;
    margin-top: 52px;
  }

  .results-poster__story h2 {
    font-size: clamp(46px, 13vw, 68px);
  }

  .results-poster__copy {
    margin-top: 54px;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .results-poster__copy p {
    font-size: 17px;
  }

  .results-bubbles {
    display: grid;
    min-height: 0;
    margin-top: 58px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .result-bubble,
  .result-bubble--users,
  .result-bubble--sessions,
  .result-bubble--pageviews,
  .result-bubble--duration,
  .result-bubble--support,
  .result-bubble--returning {
    position: static;
    width: auto;
    min-width: 0;
    padding: 18px;
    aspect-ratio: 1;
  }

  .result-bubble--pageviews,
  .result-bubble--support {
    grid-column: span 2;
    justify-self: center;
    width: min(78vw, 330px);
  }

  .result-bubble strong,
  .result-bubble--pageviews strong,
  .result-bubble--returning strong {
    font-size: clamp(42px, 13vw, 62px);
  }

  .result-bubble span {
    font-size: 12px;
  }

  .result-bubble small {
    font-size: 13px;
  }

  .result-orb {
    display: none;
  }

  .case-finale__inner {
    min-height: 520px;
    padding-block: 72px;
    align-items: flex-start;
    flex-direction: column;
  }

  .case-finale h2 {
    font-size: clamp(54px, 14vw, 76px);
  }

  .case-finale__inner > div > p:last-child {
    max-width: 100%;
    font-size: 17px;
  }

  .case-finale__action {
    min-width: 0;
    min-height: 72px;
    padding-inline: 28px;
    font-size: 24px;
  }

  .next-case {
    min-height: 150px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
  }

  .next-case > span {
    font-size: 12px;
  }

  .next-case > strong {
    font-size: 30px;
  }
}

/* TYPOGRAPHY SYSTEM — GIS case */
.case-page .case-overline,
.case-page .case-meta dt,
.case-page .research-findings > span,
.case-page .blueprint-visibility,
.case-page .barrier-grid article > span,
.case-page .constraints-grid article > span,
.case-page .order-flow__copy > span,
.case-page .order-flow__branch > span,
.case-page .order-flow__service span,
.case-page .order-impact__group > span,
.case-page .catalog-screen figcaption span,
.case-page .catalog-screen__caption span,
.case-page .catalog-case__flow figcaption span,
.case-page .catalog-case__flow-head span,
.case-page .objects-story figcaption span,
.case-page .catalog-case__principles span,
.case-page .objects-principles span,
.case-page .results-poster__period,
.case-page .next-case > span {
  font-size: var(--type-label);
  line-height: var(--leading-label);
}

.case-page .research-row-label small,
.case-page .cjm-emotion text,
.case-page .cjm-emotion__legend,
.case-page .product-redesign__nav b,
.case-page .product-redesign__crumbs,
.case-page .product-redesign__variants span,
.case-page .product-redesign__specs span,
.case-page .product-redesign__specs strong,
.case-page .product-redesign__price > span,
.case-page .product-redesign__price small,
.case-page .product-redesign__price button,
.case-page .product-redesign__docs span,
.case-page .objects-story__tags span,
.case-page .orders-schematic__row i {
  font-size: var(--type-micro);
  line-height: var(--leading-label);
}

.case-page .case-meta dd,
.case-page .case-quote small,
.case-page .segment-card > span,
.case-page .segment-card strong,
.case-page .research-artifact__head > p,
.case-page .constraints-block__head > p:last-child,
.case-page .cjm-persona blockquote,
.case-page .barrier-grid p,
.case-page .constraints-grid p,
.case-page .order-flow__copy p,
.case-page .catalog-screen > p,
.case-page .catalog-case__flow figure > p,
.case-page .metric-row span,
.case-page .objects-story__list > p,
.case-page .objects-story__empty-copy > p,
.case-page .orders-copy p,
.case-page .system-grid span,
.case-page .results-poster__copy p,
.case-page .case-finale__inner > div > p:last-child {
  font-size: var(--type-body-lg);
  line-height: var(--leading-body);
}

.case-page .case-lead,
.case-page .case-hero__summary,
.case-page .segment-card p,
.case-page .case-finale__action {
  font-size: var(--type-body-xl);
  line-height: var(--leading-body);
}

.case-page .problem-grid article p,
.case-page .approach-grid p,
.case-page .research-cell strong,
.case-page .research-cell p,
.case-page .research-cell--empty,
.case-page .cjm-persona > span,
.case-page .cjm-persona small,
.case-page .research-stage span,
.case-page .research-stage strong,
.case-page .research-row-label,
.case-page .research-findings strong,
.case-page .barrier-grid article > strong,
.case-page .constraints-grid article > strong,
.case-page .order-flow__tags strong,
.case-page .order-flow__branch i,
.case-page .order-flow__branch b,
.case-page .fulfillment-card header > span,
.case-page .fulfillment-card header p,
.case-page .order-flow__service p,
.case-page .order-impact__group p,
.case-page .catalog-screen figcaption strong,
.case-page .catalog-screen__caption strong,
.case-page .catalog-case__flow figcaption strong,
.case-page .product-redesign__nav,
.case-page .product-redesign__docs strong,
.case-page .catalog-case__principles p,
.case-page .compare-grid figcaption,
.case-page .objects-story figcaption strong,
.case-page .objects-principles p,
.case-page .orders-schematic__row b,
.case-page .result-bubble span,
.case-page .result-bubble small {
  font-size: var(--type-label);
  line-height: var(--leading-compact);
}

.case-page .problem-grid article strong,
.case-page .problem-grid article h3,
.case-page .approach-grid strong,
.case-page .approach-grid h3,
.case-page .cjm-persona strong,
.case-page .barriers-head,
.case-page .barrier-grid h3,
.case-page .constraints-grid h4,
.case-page .fulfillment-card header strong,
.case-page .product-redesign__main h3,
.case-page .product-redesign__price > strong,
.case-page .catalog-case__principles strong,
.case-page .objects-principles strong,
.case-page .orders-copy span,
.case-page .orders-schematic__head,
.case-page .phone-card > span,
.case-page .feature__number {
  font-size: var(--type-heading-md);
  line-height: var(--leading-heading);
}

.case-page .order-flow__branch > strong,
.case-page .order-flow__service strong,
.case-page .catalog-case__flow-head strong,
.case-page .orders-copy h3,
.case-page .system-grid strong,
.case-page .next-case > strong {
  font-size: var(--type-heading-lg);
  line-height: var(--leading-heading);
}

.case-page .case-quote p,
.case-page .segment-card h3,
.case-page .constraints-block__head h3,
.case-page .result-bubble strong {
  font-size: var(--type-heading-xl);
  line-height: var(--leading-display);
}

.case-page .research-artifact__head h3,
.case-page .order-flow__service-arrow,
.case-page .metric-row strong,
.case-page .results-poster__story h2,
.case-page .result-bubble--pageviews strong {
  font-size: var(--type-display-sm);
  line-height: var(--leading-display-tight);
}

.case-page .case-title,
.case-page .results-poster__title,
.case-page .case-finale h2 {
  font-size: var(--type-display-md);
  line-height: var(--leading-display-tight);
}

.case-page .case-hero__copy h1 {
  font-size: var(--type-display-lg);
  line-height: var(--leading-display-tight);
}

.case-page .case-quote__mark {
  font-size: var(--type-display-xl);
  line-height: var(--leading-display-tight);
}

.case-page .result-bubble--returning strong {
  font-size: var(--type-heading-lg);
}

/* Graphic cards: vertically center the whole text stack on desktop and mobile. */
.case-page .problem-grid article,
.case-page .segment-card,
.case-page .approach-grid article,
.case-page .barrier-grid article,
.case-page .constraints-grid article,
.case-page .catalog-case__principles article,
.case-page .objects-principles article,
.case-page .orders-copy,
.case-page .metric-row article,
.case-page .order-impact__group article {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.15vw, 22px);
  text-align: center;
}

.case-page .problem-grid article strong,
.case-page .problem-grid article h3,
.case-page .problem-grid article p,
.case-page .segment-card h3,
.case-page .segment-card p,
.case-page .segment-card strong,
.case-page .approach-grid article strong,
.case-page .approach-grid article h3,
.case-page .approach-grid article p,
.case-page .barrier-grid article h3,
.case-page .barrier-grid article p,
.case-page .barrier-grid article > strong,
.case-page .constraints-grid article h4,
.case-page .constraints-grid article p,
.case-page .constraints-grid article > strong,
.case-page .catalog-case__principles strong,
.case-page .catalog-case__principles p,
.case-page .objects-principles strong,
.case-page .objects-principles p,
.case-page .orders-copy span,
.case-page .orders-copy h3,
.case-page .orders-copy p,
.case-page .metric-row strong,
.case-page .metric-row span,
.case-page .order-impact__group strong,
.case-page .order-impact__group p {
  margin-top: 0;
  margin-bottom: 0;
}

.case-page .segment-card,
.case-page .segment-card--round,
.case-page .segment-card--arch {
  padding-block: clamp(24px, 2vw, 38px);
}

@media (max-width: 700px) {
  .case-page .problem-grid article,
  .case-page .segment-card,
  .case-page .approach-grid article,
  .case-page .barrier-grid article,
  .case-page .constraints-grid article,
  .case-page .catalog-case__principles article,
  .case-page .objects-principles article,
  .case-page .orders-copy,
  .case-page .metric-row article,
  .case-page .order-impact__group article {
    gap: 12px;
  }
}

/* The shared display token is too large for hard-broken hero lines on phones. */
@media (max-width: 700px) {
  .case-page .case-hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .case-page .case-hero__copy h1 {
    font-size: clamp(38px, 10.8vw, 64px);
    line-height: 0.94;
    letter-spacing: -0.04em;
  }
}

@media (max-width: 700px) {
  .case-page .case-hero {
    padding-top: 24px;
  }
}