/* Shared presentation for the portfolio case stories. */
.experimental-27-july .case-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid #383838;
  border-radius: 24px;
  overflow: hidden;
  background: #090909;
}
.case-feature > * { min-width: 0; }
.case-feature__heading {
  grid-column: 1 / -1;
  padding: clamp(28px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: end;
}
.experimental-27-july .case-feature__heading h3 {
  margin: 0;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(42px, 6vw, 80px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.055em;
  text-transform: none;
}
.case-feature__heading p { margin: 0; max-width: 36ch; color: #c4c4c4; font-size: 19px; line-height: 1.5; }
.case-feature__heading h3 { overflow-wrap: anywhere; }
.case-feature__heading h3 span { display: block; margin-top: 20px; font-size: clamp(19px, 2vw, 25px); line-height: 1.3; letter-spacing: -.02em; color: #ccc; }
.case-feature__media { grid-column: 1 / -1; background: #151515; padding: 0 clamp(20px, 5vw, 64px) 42px; }
.case-feature__media img { display: block; width: 100%; height: auto; border-radius: 12px; }
.case-feature__result {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
  padding: 34px clamp(28px, 5vw, 64px);
  color: #111;
  background: #e8e8e5;
}
.case-feature__result strong { font: 600 clamp(36px, 5.5vw, 68px)/1.1 "Manrope", Arial, sans-serif; letter-spacing: -.055em; }
.case-feature__result p { margin: 0; font-size: 18px; line-height: 1.5; max-width: 36ch; }
.case-feature__work { grid-column: 1 / -1; padding: clamp(28px, 5vw, 64px); }
.experimental-27-july .case-feature__label { margin: 0 0 32px; font: 500 28px/1.2 "Manrope", Arial, sans-serif; text-transform: none; letter-spacing: -.03em; }
.case-work { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 48px; }
.case-work li { display: grid; grid-template-columns: 32px 1fr; gap: 15px; border-top: 1px solid #393939; padding-top: 22px; }
.case-work__number { color: #999; font-size: 14px; padding-top: 5px; }
.experimental-27-july .case-work h4 { margin: 0 0 12px; font: 600 clamp(20px, 2vw, 25px)/1.25 "Manrope", Arial, sans-serif; text-transform: none; letter-spacing: -.025em; }
.case-work p { margin: 0; font-size: 16px; line-height: 1.65; color: #bfbfbf; }
.case-platform { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; font-size: 14px; color: #fff; }
.case-platform img { width: 20px; height: 20px; filter: invert(1); }
.case-feature__footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px clamp(28px, 5vw, 64px); border-top: 1px solid #393939; }
.case-feature__footer a { color: #d4d4d4; text-decoration: none; font-size: 16px; }
.case-feature__footer button { cursor: pointer; border: 0; border-radius: 9px; background: #efefec; color: #111; padding: 19px 24px; font: 600 16px/1.3 "Manrope", Arial, sans-serif; }
.case-feature__footer button span { margin-left: 22px; }
.case-feature__footer :is(a,button):focus-visible { outline: 3px solid #aaa; outline-offset: 5px; }
@media(max-width:700px) {
  .experimental-27-july .case-feature { grid-template-columns: minmax(0,1fr); border-radius: 18px; }
  .case-feature__heading, .case-feature__result { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .case-feature__heading p { font-size: 17px; }
  .case-feature__media { padding: 0 12px 24px; }
  .case-work { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .case-feature__footer { flex-direction: column; align-items: stretch; }
  .case-feature__footer a { padding: 8px 0; }
  .case-feature__footer button { padding: 18px 12px; }
  .case-feature__footer button span { margin-left: 8px; }
}