/* DESIGN TOKENS */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;900&display=swap');

:root {
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-text-mut: rgba(19, 25, 46, 0.41);
  --color-text-desc: rgba(0, 0, 0, 0.55);

  --color-bubble-bg: #f3f3f5;
  --color-tag-bg: #f5f5ff;
  --color-tag-grn-bg: #e0ffe0;
  --color-tag-grn-txt: #258625;
  --color-tag-grn-border: rgba(37, 134, 37, 0.1);
  --color-award-bg: #3d3d3d;

  --sidebar-w: 380px;
  --sidebar-pad: 30px;
  --main-content-shift: 5vw;
  --home-case-card-height: 360px;
  --case-finale-image-width: 350px;
  --font-main: "Onest", -apple-system, sans-serif;
  --onest-tight-lh: 1.15;
  --onest-tight-ls: -0.02em;
  --onest-headers-lh: 1.2;
  --onest-headers-ls: -0.01em;
  --onest-body-lh: 1.38;
  --onest-body-ls: 0.01em;
  --onest-small-lh: 1.5;
  --onest-small-ls: 0.015em;
}

/* RESET */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-main);
  font-variation-settings: normal;
  text-rendering: optimizeLegibility;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
}

button {
  font-family: var(--font-main);
}

h1 {
  line-height: var(--onest-tight-lh);
  letter-spacing: var(--onest-tight-ls);
}

h2, h3 {
  line-height: var(--onest-headers-lh);
  letter-spacing: var(--onest-headers-ls);
}

h4, h5, h6 {
  line-height: var(--onest-headers-lh);
  letter-spacing: var(--onest-headers-ls);
}

p, span, div.bubble, .portfolio-card__desc, .body-text {
  line-height: var(--onest-body-lh);
  letter-spacing: var(--onest-body-ls);
}

.tag, .tag-green, .award-year, .caption {
  line-height: var(--onest-small-lh);
  letter-spacing: var(--onest-small-ls);
}

.is-bold {
  font-weight: 700;
  font-variation-settings: "wght" 700;
}

.lh-130 {
  line-height: 1.3;
}

.is-bold * {
  font-weight: inherit;
}

.lh-130 * {
  line-height: inherit;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

/* LAYOUT */
.layout {
  display: flex;
}

/* SIDEBAR (LEFT) */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  padding: var(--sidebar-pad) 0 var(--sidebar-pad) var(--sidebar-pad);
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  z-index: 10;
}

/* Scrollable container for left content */
.sidebar__scroll {
  flex: 1;
  overflow-y: auto;
  padding-right: var(--sidebar-pad);
  padding-bottom: 40px;
  /* Hide scrollbar visually but preserve functionality */
  scrollbar-width: none;
}

.sidebar__scroll::-webkit-scrollbar {
  display: none;
}

/* Fixed gradient above the buttons */
.sidebar__gradient {
  position: absolute;
  left: var(--sidebar-pad);
  right: 0;
  /* ~40px button + 30px gap */
  bottom: 70px;
  height: 60px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Fixed bottom buttons container */
.sidebar__buttons {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-right: var(--sidebar-pad);
  background: var(--color-bg);
  position: relative;
  z-index: 3;
}

.sidebar__buttons .btn {
  background: var(--color-bubble-bg);
  border: none;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: var(--onest-small-lh);
  letter-spacing: var(--onest-small-ls);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn--cv {
  background: var(--color-bubble-bg);
  color: var(--color-text);
}

.btn--tg {
  background: #0088ff !important;
  color: #fff;
}

.sidebar__buttons .btn:hover {
  filter: brightness(0.92);
}

.sidebar__buttons .btn:active {
  filter: brightness(0.88);
}

/* AVATAR */
.avatar-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(91.57deg, #5462ff 0%, #8e97ff 100%);
  padding: 2px;
  /* Emulates gradient border */
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}

.sidebar__avatar .avatar-wrap,
.mobile-nav-avatar {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: transparent;
  padding: 0;
  overflow: hidden;
}

.sidebar__avatar .avatar-new,
.mobile-nav-avatar .avatar-new {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center 24%;
}

.sidebar__avatar {
  padding-bottom: 16px;
}

/* SIDEBAR INFO */
.sidebar__info {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sidebar__name {
  font-size: 20px;
  font-weight: 700;
  line-height: var(--onest-headers-lh);
  letter-spacing: var(--onest-headers-ls);
  margin-bottom: 8px;
}

.sidebar__title {
  font-size: 18px;
  line-height: var(--onest-body-lh);
  letter-spacing: var(--onest-body-ls);
  margin-bottom: 16px;
}

.sidebar__tags {
  display: flex;
  flex-wrap: wrap;
}

.tag {
  background: var(--color-bg);
  border: 1.25px solid #ECECEC;
  padding: 8px 12px;
  border-radius: 100px;
  font-size: 14px;
  color: var(--color-text);
  font-weight: 400;
}

.tag + .tag {
  margin-left: -4px;
}

/* SIDEBAR LISTS */
.sidebar__section {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar__section-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar__section-header img {
  display: none;
}

.sidebar__section-title {
  font-size: 18px;
  color: var(--color-text-mut);
  line-height: var(--onest-small-lh);
  letter-spacing: var(--onest-small-ls);
  font-weight: 400;
}

.sidebar__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar__list li {
  font-size: 18px;
  line-height: var(--onest-body-lh);
  letter-spacing: var(--onest-body-ls);
}

.sidebar__list a {
  display: block;
  transition: color 120ms ease;
}

.sidebar__list a:hover,
.sidebar__list a:focus-visible {
  color: var(--color-text);
}

.sidebar__list-link--stacked {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

.sidebar__list-line {
  display: block;
}

.sidebar__list-nowrap {
  white-space: nowrap;
}

/* MAIN (RIGHT COLUMN) */
.main-content {
  margin-left: var(--sidebar-w);
  width: calc(100% - var(--sidebar-w));
  padding: var(--sidebar-pad) 80px 30px 60px;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.main-content--case {
  padding-top: var(--sidebar-pad);
}

.main__wrapper {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 100%;
  max-width: 816px;
  min-width: 0;
  transform: translateX(calc(-1 * var(--main-content-shift)));
}

/* BUBBLES */
.message-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.intro-quote-icon {
  margin-bottom: -4px;
  border-radius: 2px 20px 20px 20px;
}

.bubble {
  background: var(--color-bubble-bg);
  color: var(--color-text);
  padding: 12px 16px;
  border-radius: 20px;
  font-size: 18px;
  line-height: var(--onest-body-lh);
  letter-spacing: var(--onest-body-ls);
}

/* Tail on first bubble of group only */
.message-group > .bubble:first-of-type {
  border-radius: 2px 20px 20px 20px;
}

/* Chat section: left bubbles tail = bottom-left, right = bottom-right */
.chat-row--left .bubble {
  border-radius: 20px 20px 2px 20px;
}

.chat-row--right .bubble {
  border-radius: 20px 20px 20px 2px;
}

.bubble--with-avatars {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  border-radius: 20px;
}

.bubble-avatars {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.b-avatar {
  border-radius: 50%;
  border: 1px solid var(--color-bubble-bg);
  object-fit: cover;
}

.b-avatar:not(:first-child) {
  margin-left: -8px;
}

.b-avatar-1 { width: 28px; height: 28px; z-index: 1; }
.b-avatar-2 { width: 40px; height: 40px; z-index: 2; margin-left: -8px; }
.b-avatar-3 { width: 28px; height: 28px; z-index: 3; }
.b-avatar-4 { width: 28px; height: 28px; z-index: 4; }

/* CARDS */
.portfolio-card {
  border: 2px solid var(--color-bubble-bg);
  border-radius: 24px;
  display: flex;
  gap: 8px;
  position: relative;
  overflow: hidden;
  align-items: stretch;
  cursor: pointer;
}

/* Hover: gradient border only, no background tint */
.portfolio-card:hover {
  border-color: transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(91.57deg, #5462ff 0%, #8e97ff 100%) border-box;
}

/* Pressed: darker gradient border */
.portfolio-card:active {
  border-color: transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(91.57deg, #3a47cc 0%, #6b74cc 100%) border-box;
}

.portfolio-card__text {
  flex: 1 1 0;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.portfolio-card__header {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.portfolio-card__title {
  font-size: 40px;
  font-weight: 700;
  line-height: var(--onest-headers-lh);
  letter-spacing: var(--onest-headers-ls);
}

.portfolio-card__desc {
  color: var(--color-text-desc);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--onest-body-ls);
}

.tag-green {
  background: var(--color-tag-grn-bg);
  border: 1px solid var(--color-tag-grn-border);
  color: var(--color-tag-grn-txt);
  padding: 8px 12px;
  border-radius: 15px;
  font-size: 16px;
}

.portfolio-card__media {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.portfolio-card__media img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  min-width: 100%;
  object-fit: cover;
}

.portfolio-card__link {
  position: absolute;
  right: 12px;
  top: 12px;
  background: var(--color-bg);
  border-radius: 50%;
  padding: 4px;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.08);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio-card__link .portfolio-card-bg {
  position: absolute;
  width: 24px;
  height: 24px;
}

.portfolio-card__link .portfolio-card-icon {
  position: absolute;
  width: 12px;
  height: 12px;
}

/* FIRST CASE VISUAL (GLASS CARDS + BG IMAGE) */
.portfolio-card.js-tilt-card:not(.portfolio-card--process),
.award-box.js-tilt-card {
  --tilt-rotate-x: 0deg;
  --tilt-rotate-y: 0deg;
  --tilt-scale: 1;
}

.portfolio-card.js-tilt-card:not(.portfolio-card--process) .portfolio-card__text,
.award-box.js-tilt-card .award-copy,
.award-box.js-tilt-card .award-tooltip {
  transform-origin: left center;
  transform-style: flat;
}

.portfolio-card.js-tilt-card:not(.portfolio-card--process).is-tilting,
.award-box.js-tilt-card.is-tilting {
  transform: perspective(1300px) rotateX(var(--tilt-rotate-x)) rotateY(var(--tilt-rotate-y)) scale(var(--tilt-scale));
  transform-style: preserve-3d;
  will-change: transform;
  backface-visibility: hidden;
}

.portfolio-card.js-tilt-card:not(.portfolio-card--process).is-tilting .portfolio-card__text,
.award-box.js-tilt-card.is-tilting .award-copy,
.award-box.js-tilt-card.is-tilting .award-tooltip {
  transform: translateZ(1px) rotateY(calc(var(--tilt-rotate-y) * -1)) rotateX(calc(var(--tilt-rotate-x) * -1));
  backface-visibility: hidden;
  will-change: transform;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.portfolio-card--process {
  --tilt-rotate-x: 0deg;
  --tilt-rotate-y: 0deg;
  --tilt-scale: 1;
  min-height: 296px;
}

.portfolio-card--process.is-tilting {
  transform: perspective(1300px) rotateX(var(--tilt-rotate-x)) rotateY(var(--tilt-rotate-y)) scale(var(--tilt-scale));
  transform-style: preserve-3d;
  will-change: transform;
}

.portfolio-card__media--process {
  overflow: hidden;
}

.portfolio-card__media--process .case-process-visual {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 296px;
  background: #ffffff;
  container-type: inline-size;
  isolation: isolate;
  overflow: hidden;
}

.portfolio-card__media--process .case-process-visual__bg {
  position: absolute;
  left: 32px;
  top: 32px;
  width: calc(100% - 64px);
  height: calc(100% - 64px);
  transform: none;
  min-width: 0;
  object-fit: contain;
  object-position: center center;
  z-index: 1;
}

.portfolio-card__media--process .case-process-visual__grid {
  position: absolute;
  inset: 32px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
  z-index: 2;
  pointer-events: none;
  transform-style: preserve-3d;
}

.portfolio-card__media--process .case-process-visual__panel {
  background: rgba(255, 255, 255, 0.001);
  border: 2px solid rgba(240, 242, 246, 0.5);
  border-radius: 20px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;
  box-shadow: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.portfolio-card--process.is-tilting .case-process-visual__panel {
  transform: translate3d(var(--panel-x, 0px), var(--panel-y, 0px), var(--panel-z, 0px));
  will-change: transform;
}

.portfolio-card__media--process .case-process-visual__panel--tr,
.portfolio-card__media--process .case-process-visual__panel--br {
  justify-content: flex-end;
}

.portfolio-card__media--process .case-process-visual__panel--bl,
.portfolio-card__media--process .case-process-visual__panel--br {
  align-items: flex-end;
}

.portfolio-card__media--process .case-process-visual__text {
  margin: 0;
  color: #050507;
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.3;
  letter-spacing: 0.005em;
  font-weight: 600;
  max-width: 12ch;
}

.home-page .portfolio-card--process .portfolio-card__text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 32px;
}

.home-page .portfolio-card--process .portfolio-card__header {
  height: 100%;
  gap: 20px;
}

.home-page .portfolio-card--process .portfolio-card__desc {
  margin-top: auto;
  margin-bottom: 0;
}

.home-page .portfolio-card--system .portfolio-card__text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 32px;
}

.home-page .portfolio-card--system .portfolio-card__header {
  height: 100%;
  gap: 20px;
}

.home-page .portfolio-card--system .portfolio-card__desc {
  margin-top: auto;
  margin-bottom: 0;
}

.home-page .portfolio-card__link {
  display: none;
}

.home-page .portfolio-card__media {
  min-height: var(--home-case-card-height);
}

.home-page .portfolio-card__media--process .case-process-visual,
.home-page .portfolio-card__media--system .case-system-visual {
  min-height: var(--home-case-card-height);
  height: 100%;
}

.home-page .portfolio-card--process:hover,
.home-page .portfolio-card--process:active {
  border-color: var(--home-color-surface-muted);
  background: none;
}

.home-page .portfolio-card--system:hover,
.home-page .portfolio-card--system:active {
  border-color: var(--home-color-surface-muted);
  background: none;
}

.home-page .portfolio-card--redesign:hover,
.home-page .portfolio-card--redesign:active {
  border-color: var(--home-color-surface-muted);
  background: none;
}

.portfolio-card__media--process .case-process-visual__panel--tr .case-process-visual__text,
.portfolio-card__media--process .case-process-visual__panel--br .case-process-visual__text {
  text-align: right;
}

@container (max-width: 279px) {
  .portfolio-card__media--process .case-process-visual__bg {
    left: 16px;
    top: 16px;
    width: calc(100% - 32px);
    height: calc(100% - 32px);
  }

  .portfolio-card__media--process .case-process-visual__grid {
    inset: 16px;
    gap: 8px;
  }

  .portfolio-card__media--process .case-process-visual__panel {
    padding: 10px;
    border-radius: 14px;
  }

  .portfolio-card__media--process .case-process-visual__text {
    font-size: 12px;
    line-height: 1.2;
    max-width: 11ch;
  }
}

/* SECOND CASE VISUAL (GRADIENT BASE + COMPONENTS + GLASS OVERLAY) */
.portfolio-card--system {
  min-height: 296px;
}

.portfolio-card__media--system {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.portfolio-card__media--system .case-system-visual {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 296px;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.portfolio-card__media--system .case-system-visual__stage-wrap {
  position: absolute;
  inset: 32px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
}

.portfolio-card__media--system .case-system-visual__stage {
  position: relative;
  width: 418px;
  height: 296px;
  flex-shrink: 0;
  transform-origin: center top;
}

.portfolio-card__media--system .case-system-visual__stage::before {
  content: "";
  position: absolute;
  left: 235px;
  top: 86px;
  width: 62px;
  height: 33px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  z-index: 2;
}

.portfolio-card__media--system .case-system-visual__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
}

/* AWARDS */
.awards-grid {
  display: flex;
  gap: 20px;
  width: 100%;
}

.award-box {
  --award-tooltip-x: 24px;
  --award-tooltip-y: 72px;
  background: var(--color-bubble-bg);
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  position: relative;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 186px;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.award-year {
  background: var(--color-bg);
  border-radius: 100px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 400;
  font-variation-settings: "wght" 400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.award-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  align-self: stretch;
  flex: 1;
}

.award-text {
  color: var(--color-text);
  align-self: stretch;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  z-index: 2;
  max-width: none;
}

.award-flag {
  position: absolute;
  top: 0;
  right: 24px;
  width: 45px;
  height: 51.5px;
  z-index: 1;
}

.award-tooltip {
  position: absolute;
  left: var(--award-tooltip-x);
  top: var(--award-tooltip-y);
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px 17px 17px 17px;
  border: 1px solid #dd2590;
  background: #ee46bc;
  box-shadow: 2px 2px 6px 0 rgba(238, 70, 188, 0.16);
  color: #ffffff;
  font-family: "Inter", "Onest", sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
  will-change: left, top, opacity;
  z-index: 4;
}

.award-box.is-tooltip-visible .award-tooltip {
  opacity: 1;
}

/* PORTFOLIO GALLERY OVERRIDE */
.portfolio-card__media--gallery {
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio-card__media--gallery .gallery-placeholder {
  width: 100%;
  height: auto;
  object-fit: contain !important;
  transform: scale(-1, 1);
}

/* CHAT SECTION */
.chat-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.chat-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  width: 100%;
}

.chat-row--right {
  justify-content: flex-end;
}

.chat-row--left {
  justify-content: flex-start;
}

.chat-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: #bfb9f8;
  flex-shrink: 0;
}

.chat-avatar--border {
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  object-position: center 24%;
}



.chat-input-wrapper {
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(63, 73, 184, 0.1);
  border-radius: 20px;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  cursor: pointer;
}

.chat-input-wrapper:hover {
  filter: brightness(0.92);
}

.chat-input-wrapper:active {
  filter: brightness(0.88);
}

.chat-input-placeholder {
  color: rgba(28, 28, 30, 0.55);
  font-size: 20px;
  font-weight: 500;
}

/* MOBILE TOGGLE (Checkbox Hack) */
.mobile-topbar,
.mobile-topbar__lead,
.mobile-nav-name,
.mobile-topbar__buttons,
.mobile-topbar__back {
  display: none;
}

.mobile-nav-trigger {
  display: none;
}

.nav-toggle {
  display: none;
}

.sidebar-overlay {
  display: none;
}

/* RESPONSIVE DESIGN */
@media (max-width: 1024px) {

  /* Trigger setup */
  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    padding: 0 16px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(19, 25, 46, 0.08);
    z-index: 14;
  }

  .mobile-topbar__lead {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
  }

  .mobile-topbar__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
  }

  .mobile-topbar__back img {
    width: 20px;
    height: 20px;
  }

  .mobile-nav-trigger {
    display: flex;
    position: relative;
    top: auto;
    left: auto;
    z-index: auto;
    cursor: pointer;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
    container-type: inline-size;
  }

  .mobile-nav-avatar {
    width: 36px;
    height: 36px;
    box-shadow: none;
    background: transparent;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
  }

  .mobile-nav-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 600;
    line-height: var(--onest-headers-lh);
    letter-spacing: var(--onest-headers-ls);
  }

  .mobile-nav-name-last {
    display: inline;
  }

  .mobile-topbar__buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  .mobile-topbar__buttons .btn {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 8px;
    border: none;
    border-radius: 12px;
    font-weight: 500;
    font-size: 16px;
    gap: 6px;
    line-height: 1;
    letter-spacing: var(--onest-small-ls);
    white-space: nowrap;
    cursor: pointer;
  }

  .mobile-topbar__buttons .btn img {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  .mobile-topbar__buttons .btn span {
    line-height: 1;
  }

  .mobile-nav-trigger:focus-visible,
  .mobile-topbar__back:focus-visible,
  .mobile-topbar__buttons .btn:focus-visible {
    outline: 2px solid rgba(84, 98, 255, 0.5);
    outline-offset: 2px;
  }

  .sidebar__avatar {
    display: none;
  }

  .sidebar__buttons,
  .sidebar__gradient {
    display: none;
  }

  /* Right column full width by default */
  .main-content {
    margin-left: 0;
    width: 100%;
    padding: 76px 16px 32px;
  }

  .main__wrapper {
    transform: none;
  }

  /* Pop-over Sidebar */
  .sidebar {
    width: 60vw;
    transform: translateX(-100%);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1);
    padding: 16px 0 16px 16px;
    z-index: 20;
  }

  .sidebar__scroll {
    padding-right: 16px;
    padding-bottom: 16px;
  }

  .sidebar__info {
    gap: 8px;
  }

  .sidebar__name {
    font-size: 18px;
    margin-bottom: 6px;
  }

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

  .sidebar__section {
    margin-top: 28px;
    gap: 12px;
  }

  .sidebar__section-title {
    font-size: 14px;
  }

  .sidebar__list {
    gap: 10px;
  }

  .sidebar__list li {
    font-size: 15px;
  }

  .tag {
    padding: 6px 10px;
    font-size: 12px;
  }

  /* Overlay */
  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 15;
    opacity: 0;
    visibility: hidden;
    display: block;
  }

  /* Checkbox toggles states */
  .nav-toggle:checked~.layout .sidebar {
    transform: translateX(0);
  }

  .nav-toggle:checked~.layout .sidebar-overlay {
    opacity: 1;
    visibility: visible;
  }

  /* Awards stay horizontal */

  .bubble {
    font-size: 16px;
  }

  .chat-input-placeholder {
    font-size: 16px;
  }
}

@container (max-width: 170px) {
  .mobile-nav-name-last {
    display: none;
  }
}

@media (max-width: 768px) {
  .portfolio-card--process {
    flex-direction: column;
  }

  .portfolio-card--process .portfolio-card__text,
  .portfolio-card--process .portfolio-card__media,
  .portfolio-card--system .portfolio-card__text,
  .portfolio-card--system .portfolio-card__media {
    flex: 0 0 auto;
    width: 100%;
  }

  .portfolio-card--process .portfolio-card__media--process .case-process-visual {
    min-height: 300px;
  }

  .portfolio-card--system {
    flex-direction: column;
  }

  .portfolio-card--system .portfolio-card__media--system .case-system-visual {
    min-height: 296px;
  }

  .home-page .portfolio-card {
    height: auto;
    min-height: 0;
  }

  .home-page .portfolio-card__media {
    min-height: 0;
  }

  .home-page .portfolio-card__media--process .case-process-visual,
  .home-page .portfolio-card__media--system .case-system-visual {
    min-height: 300px;
  }
}

@media (max-width: 480px) {
  .portfolio-card__title {
    font-size: 32px;
  }

  .award-text {
    font-size: 18px;
  }

  .chat-avatar {
    width: 44px;
    height: 44px;
  }
}

/* HOMEPAGE CONSISTENCY OVERRIDES (index.html only) */
.home-page {
  --home-space-1: 4px;
  --home-space-2: 8px;
  --home-space-3: 12px;
  --home-space-4: 16px;
  --home-space-5: 20px;
  --home-space-6: 24px;
  --home-space-8: 32px;
  --home-radius-sm: 12px;
  --home-radius-md: 16px;
  --home-radius-lg: 20px;
  --home-radius-xl: 24px;
  --home-color-surface: #f4f5f8;
  --home-color-surface-muted: #f0f2f6;
  --home-color-text: #151822;
  --home-color-muted: #5b6377;
  --home-color-desc: rgba(32, 37, 51, 0.64);
}

.home-page .main-content {
  padding: var(--sidebar-pad) 72px var(--sidebar-pad) 56px;
}

.home-page .main__wrapper {
  gap: 40px;
}

.home-page .sidebar__info {
  gap: 12px;
}

.home-page .sidebar__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-page .sidebar__buttons {
  gap: var(--home-space-2);
}

.home-page .sidebar__buttons .btn {
  border-radius: var(--home-radius-sm);
  padding: 10px 14px;
}

.home-page .sidebar__avatar {
  padding-bottom: 18px;
}

.home-page .sidebar__name {
  margin-bottom: 0;
}

.home-page .sidebar__title {
  margin-bottom: 0;
}

.home-page .tag {
  border-color: #e4e7ee;
  border-radius: 999px;
}

.home-page .message-group {
  gap: 4px;
}

.home-page .intro-quote-icon--offset {
  margin-bottom: 14px;
}

.home-page .bubble {
  background: var(--home-color-surface);
  color: var(--home-color-text);
  border-radius: var(--home-radius-lg);
  padding: var(--home-space-3) var(--home-space-4);
}

.home-page .home-story-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.home-page .bubble--companies {
  --companies-badge-scale: 1;
  width: calc(388px * var(--companies-badge-scale));
  height: calc(136px * var(--companies-badge-scale));
  padding: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

.home-page .companies-badge {
  position: relative;
  width: 388px;
  height: 136px;
  background: #f3f3f5;
  border-radius: 30px;
  overflow: hidden;
  transform: scale(var(--companies-badge-scale));
  transform-origin: left top;
}

.home-page .companies-badge__frame {
  position: absolute;
  border-radius: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.home-page .companies-badge__frame {
  border: 4px solid #f3f3f5;
  background: #ffffff;
}

.home-page .companies-badge__frame--first {
  left: 20px;
  top: 12px;
  width: 112px;
  height: 112px;
  z-index: 1;
}

.home-page .companies-badge__frame--second {
  left: 96px;
  top: 12px;
  width: 112px;
  height: 112px;
  z-index: 2;
}

.home-page .companies-badge__frame--third {
  left: 176px;
  top: 12px;
  width: 112px;
  height: 112px;
  z-index: 3;
}

.home-page .companies-badge__frame--fourth {
  left: 256px;
  top: 12px;
  width: 112px;
  height: 112px;
  z-index: 4;
}

.home-page .companies-badge__image {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 400px;
  object-fit: cover;
  object-position: center;
  padding: 0;
  background: transparent;
}

.home-page .companies-badge__frame--first .companies-badge__image {
  transform: scale(1.06);
}

.home-page .companies-badge__frame--second .companies-badge__image {
  transform: scale(1.06);
}

.home-page .companies-badge__frame--third .companies-badge__image {
  transform: scale(1.06);
}

.home-page .companies-badge__frame--fourth .companies-badge__image {
  transform: scale(1.06);
}

.home-page .portfolio-card--redesign .portfolio-card__media {
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 32px 20px;
  box-sizing: border-box;
}

.home-page .portfolio-card--redesign .portfolio-card__media img {
  position: static;
  width: 100%;
  height: 100%;
  min-width: 0;
  transform: none;
  object-fit: contain;
  object-position: center;
}

.home-page .portfolio-card {
  border-color: var(--home-color-surface-muted);
  border-radius: var(--home-radius-xl);
  gap: var(--home-space-2);
  min-height: var(--home-case-card-height);
  height: var(--home-case-card-height);
}

.home-page .portfolio-card--process,
.home-page .portfolio-card--system {
  min-height: 296px;
  height: 296px;
}

.home-page .portfolio-card--process .portfolio-card__media,
.home-page .portfolio-card--system .portfolio-card__media {
  min-height: 296px;
}

.home-page [id^="case-"] {
  scroll-margin-top: 24px;
}

.home-page .portfolio-card__text {
  padding: 28px;
}

.home-page .portfolio-card__header {
  gap: 40px;
}

.home-page .portfolio-card__title {
  line-height: var(--onest-headers-lh);
  letter-spacing: var(--onest-headers-ls);
}

.home-page .portfolio-card__desc {
  color: var(--home-color-desc);
}

.home-page .portfolio-card--redesign .portfolio-card__text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 32px;
}

.home-page .portfolio-card--redesign .portfolio-card__header {
  height: 100%;
  gap: 20px;
}

.home-page .portfolio-card--redesign .portfolio-card__desc {
  margin-top: auto;
  margin-bottom: 0;
}

.home-page .portfolio-card__title-nowrap {
  white-space: nowrap;
}

.home-page .portfolio-card__desc--story {
  display: block;
}

.home-page .portfolio-card__desc-line {
  display: inline;
}

.home-page .portfolio-card__desc-line--primary {
  color: var(--home-color-text);
}

.home-page .portfolio-card__desc-line--secondary {
  color: var(--home-color-desc);
}

.home-page .portfolio-card__metric-line {
  display: inline;
}

.home-page .portfolio-card__metric {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: var(--home-color-text);
}

.home-page .portfolio-card__metric-text {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.home-page .text-strong {
  color: var(--home-color-text);
}

.home-page .text-muted {
  color: var(--home-color-desc);
}

.home-page .awards-grid {
  gap: 20px;
  flex-wrap: nowrap;
}

.home-page .award-box {
  background: var(--home-color-surface);
  border-radius: var(--home-radius-xl);
  padding: 24px;
}

.home-page .award-text {
  color: var(--home-color-text);
}

.home-page .chat-section {
  gap: var(--home-space-5);
}

.home-page .chat-row {
  gap: 10px;
}

.home-page .chat-input-wrapper {
  border: none;
  border-radius: var(--home-radius-lg);
  background: #f3f3f5;
  padding: 18px 22px;
  text-decoration: none;
  color: inherit;
  transition: filter 120ms ease;
}

.home-page .chat-input-wrapper:hover {
  filter: brightness(0.92);
}

.home-page .chat-input-wrapper:active {
  filter: brightness(0.88);
}

.home-page .chat-input-placeholder {
  color: var(--home-color-muted);
}

@media (max-width: 1024px) {
  .home-page .main-content {
    padding: 76px 16px 32px;
  }

  .home-page .main__wrapper {
    gap: 40px;
  }

  .home-page .awards-grid {
    gap: 20px;
  }

  .home-page .bubble--companies {
    --companies-badge-scale: 0.84;
  }
}

@media (max-width: 1500px) {
  .main__wrapper {
    transform: none;
  }
}

@media (max-width: 1188px) {
  .home-page .portfolio-card {
    flex-direction: column;
    height: auto;
    min-height: 0;
  }

  .home-page .portfolio-card__text,
  .home-page .portfolio-card__media {
    flex: 0 0 auto;
    width: 100%;
  }

  .home-page .portfolio-card__media {
    min-height: 320px;
  }

  .home-page .portfolio-card__media img {
    left: 0;
    width: 100%;
    min-width: 0;
    transform: none;
  }

  .home-page .portfolio-card__media--process .case-process-visual,
  .home-page .portfolio-card__media--system .case-system-visual {
    min-height: 300px;
    height: 300px;
  }

  .home-page .portfolio-card--process .portfolio-card__media {
    padding: 0 28px 28px;
    box-sizing: border-box;
  }

  .home-page .portfolio-card--redesign .portfolio-card__media {
    min-height: 280px;
  }

  .home-page .portfolio-card--redesign .portfolio-card__media img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
}

@media (max-width: 525px) {
  .awards-grid {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .home-page .main__wrapper {
    gap: 32px;
  }

  .home-page .portfolio-card__text {
    padding: var(--home-space-5);
  }

  .home-page .chat-input-wrapper {
    padding: var(--home-space-4) var(--home-space-5);
  }

  .home-page .bubble--companies {
    --companies-badge-scale: 0.6;
  }
}

.home-page .portfolio-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 816px;
  min-height: 310px;
  height: 310px;
}

.home-page .portfolio-card__text,
.home-page .portfolio-card__media {
  box-sizing: border-box;
}

.home-page .portfolio-card--process .portfolio-card__text,
.home-page .portfolio-card--system .portfolio-card__text,
.home-page .portfolio-card--redesign .portfolio-card__text {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home-page .portfolio-card--process .portfolio-card__header,
.home-page .portfolio-card--system .portfolio-card__header,
.home-page .portfolio-card--redesign .portfolio-card__header {
  gap: 48px;
  height: auto;
}

.home-page .portfolio-card--process .portfolio-card__desc,
.home-page .portfolio-card--system .portfolio-card__desc,
.home-page .portfolio-card--redesign .portfolio-card__desc {
  margin: 0;
}

.home-page .portfolio-card--process .portfolio-card__media,
.home-page .portfolio-card--system .portfolio-card__media,
.home-page .portfolio-card--redesign .portfolio-card__media {
  flex: 0 0 407px;
  width: 407px;
  min-width: 407px;
  min-height: 310px;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1189px) {
  .home-page .portfolio-card--process .portfolio-card__text,
  .home-page .portfolio-card--system .portfolio-card__text,
  .home-page .portfolio-card--redesign .portfolio-card__text {
    justify-content: flex-start;
  }

  .home-page .portfolio-card--process .portfolio-card__header,
  .home-page .portfolio-card--system .portfolio-card__header,
  .home-page .portfolio-card--redesign .portfolio-card__header {
    height: 100%;
    gap: 20px;
  }

  .home-page .portfolio-card--process .portfolio-card__desc,
  .home-page .portfolio-card--system .portfolio-card__desc,
  .home-page .portfolio-card--redesign .portfolio-card__desc {
    margin-top: auto;
    margin-bottom: 0;
  }
}

.home-page .portfolio-card__media--art {
  background: #fff;
}

.home-page .portfolio-card__picture {
  display: block;
  width: 100%;
  max-width: 407px;
  flex: 0 0 auto;
}

.home-page .portfolio-card__media picture .portfolio-card__picture-image {
  display: block;
  position: static;
  top: auto;
  left: auto;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-width: 0;
  transform: none;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 791px) {
  .home-page .portfolio-card--redesign {
    min-height: 310px;
    height: auto;
  }

  .home-page .portfolio-card--redesign .portfolio-card__text {
    padding: 32px;
  }

  .home-page .portfolio-card--redesign .portfolio-card__header {
    gap: 48px;
  }

  .home-page .portfolio-card--redesign .portfolio-card__media {
    align-items: center;
  }
}

@media (max-width: 696px) {
  .home-page .portfolio-card {
    flex-direction: column;
    gap: 32px;
    min-height: 0;
    height: auto;
  }

  .home-page .portfolio-card--process .portfolio-card__text,
  .home-page .portfolio-card--system .portfolio-card__text,
  .home-page .portfolio-card--redesign .portfolio-card__text {
    width: 100%;
    padding: 16px 16px 0;
  }

  .home-page .portfolio-card--process .portfolio-card__header,
  .home-page .portfolio-card--system .portfolio-card__header,
  .home-page .portfolio-card--redesign .portfolio-card__header {
    gap: 12px;
  }

  .home-page .portfolio-card--process .portfolio-card__title,
  .home-page .portfolio-card--system .portfolio-card__title,
  .home-page .portfolio-card--redesign .portfolio-card__title {
    font-size: 24px;
  }

  .home-page .portfolio-card--process .portfolio-card__desc,
  .home-page .portfolio-card--system .portfolio-card__desc,
  .home-page .portfolio-card--redesign .portfolio-card__desc,
  .home-page .award-text {
    font-size: 16px;
  }

  .home-page .portfolio-card--process .portfolio-card__media,
  .home-page .portfolio-card--system .portfolio-card__media,
  .home-page .portfolio-card--redesign .portfolio-card__media {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
  }

  .home-page .portfolio-card__picture {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .home-page .portfolio-card {
    gap: 32px;
  }

  .home-page .portfolio-card--process .portfolio-card__text,
  .home-page .portfolio-card--system .portfolio-card__text,
  .home-page .portfolio-card--redesign .portfolio-card__text {
    padding: 16px 16px 0;
  }

  .home-page .portfolio-card--process .portfolio-card__media,
  .home-page .portfolio-card--system .portfolio-card__media,
  .home-page .portfolio-card--redesign .portfolio-card__media {
    padding: 0;
  }
}

/* CASE DETAIL PAGE */
.case-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-bubble-bg);
  border: none;
  border-radius: 16px;
  padding: 8px 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: var(--onest-body-lh);
  letter-spacing: var(--onest-body-ls);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: filter 120ms ease;
}

.case-back-btn:hover {
  filter: brightness(0.92);
}

.case-back-btn:active {
  filter: brightness(0.88);
}

.case-back-btn img {
  width: 24px;
  height: 24px;
}

.home-page .sidebar__list a[href^="#case-"],
.case-nav-list a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: flex-start;
  min-height: 24px;
  position: relative;
  transition: color 160ms ease;
}

.home-page .sidebar__list a[href^="#case-"]:hover,
.home-page .sidebar__list a[href^="#case-"]:focus-visible,
.case-nav-list a:hover,
.case-nav-list a:focus-visible {
  color: #002342;
}

.home-page .sidebar__list a[href^="#case-"]:active,
.home-page .sidebar__list a[href^="#case-"].is-active,
.case-nav-list a:active,
.case-nav-list a.is-active {
  color: var(--color-text);
}

.case-reading-time {
  margin-top: 40px;
  font-size: 18px;
  line-height: var(--onest-small-lh);
  letter-spacing: var(--onest-small-ls);
  color: var(--color-text-mut);
}

.case-wrapper {
  gap: 80px;
  padding-top: 0;
}

.express-case-wrapper {
  max-width: 920px;
  gap: 0;
}

.express-case-page .sidebar__buttons {
  gap: 4px;
}

.process-case-wrapper {
  max-width: 920px;
  gap: 0;
}

.process-case-page .sidebar__buttons {
  gap: 4px;
}

.process-case-page .sidebar__info {
  gap: 16px;
}

.process-case-page .sidebar__name {
  font-size: 18px;
  font-weight: 400;
  line-height: var(--onest-body-lh);
  letter-spacing: var(--onest-body-ls);
  color: var(--color-text-mut);
  margin-bottom: 0;
}

.process-case-page .case-nav-list {
  gap: 12px;
}

.process-case-page .frame-2087331442 {
  width: 100%;
  max-width: 920px;
  height: auto;
  align-items: stretch;
  background: transparent;
  font-family: var(--font-main);
}

.process-case-page .frame-2087331442 * {
  font-family: inherit;
}

.process-case-page .frame-2136142924 .title4 {
  font-size: 44px;
}

.process-case-page .title4 {
  font-size: 40px;
  font-weight: 600;
  line-height: var(--onest-tight-lh);
  letter-spacing: var(--onest-tight-ls);
  color: var(--color-text);
}

.process-case-page .title5 {
  color: var(--color-text-mut);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--onest-body-ls);
}

.process-case-page .title6 {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--onest-tight-ls);
  color: var(--color-text);
}

.process-case-page .text {
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: 0.03em;
}

.process-case-page .title7,
.process-case-page .title9 {
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--onest-tight-ls);
}

.process-case-page .title8 {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: 0.03em;
}

.process-case-page .frame-2136142792,
.process-case-page .frame-2136142925,
.process-case-page .frame-2136142926 {
  scroll-margin-top: 30px;
}

.process-case-page .div2 > *,
.process-case-page .div3 > * {
  flex: 1 1 195px;
  max-width: 195px;
}

.process-case-page .frame-2136142727 > * {
  min-width: 0;
}

.process-case-page .frame-2131329946,
.process-case-page .frame-2131329947,
.process-case-page .frame-2131329948,
.process-case-page .frame-21313299462 {
  min-height: 128px;
}

.express-case-page .sidebar__info {
  gap: 16px;
}

.express-case-page .sidebar__name {
  font-size: 18px;
  font-weight: 400;
  line-height: var(--onest-body-lh);
  letter-spacing: var(--onest-body-ls);
  color: var(--color-text-mut);
  margin-bottom: 0;
}

.express-case-page .case-nav-list {
  gap: 12px;
}

.express-case-page .frame-2087331442 {
  width: 100%;
  max-width: 920px;
  font-family: var(--font-main);
}

.express-case-page .frame-2087331442 * {
  font-family: inherit;
}

.express-case-page .title4 {
  font-size: 44px;
  font-weight: 600;
  line-height: var(--onest-tight-lh);
  letter-spacing: var(--onest-tight-ls);
  color: var(--color-text);
}

.express-case-page .title5,
.express-case-page .title8 {
  color: var(--color-text);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: var(--onest-body-ls);
}

.express-case-page .title5 {
  color: var(--color-text-mut);
}

.express-case-page .title6,
.express-case-page .title7,
.express-case-page .title11,
.express-case-page .title16 {
  font-size: 40px;
  font-weight: 600;
  line-height: var(--onest-tight-lh);
  letter-spacing: var(--onest-tight-ls);
  color: var(--color-text);
}

.express-case-page .title9,
.express-case-page .title10,
.express-case-page .title12,
.express-case-page .title14,
.express-case-page .title15,
.express-case-page .title17,
.express-case-page .title18,
.express-case-page .title19,
.express-case-page .title20,
.express-case-page .text,
.express-case-page .div4 {
  line-height: var(--onest-body-lh);
  letter-spacing: var(--onest-body-ls);
  color: var(--color-text);
}

.express-case-page .title-20-span2 {
  color: #5462ff;
}

.express-case-page .frame-2136142806 {
  align-items: stretch;
}

.express-case-page .frame-2136142806 > * {
  flex: 1 1 0;
  min-width: 0;
}

.express-case-page .frame-2136142806 .title12,
.express-case-page .frame-2136142806 .title13,
.express-case-page .frame-2136142806 .title14 {
  font-size: 18px;
  font-weight: 400;
  line-height: var(--onest-body-lh);
  letter-spacing: var(--onest-body-ls);
  color: var(--color-text);
}

.express-case-page .frame-2136142806 .title14 {
  align-self: stretch;
}

.express-case-inline-link {
  color: #0088ff;
  text-decoration: none;
  transition: filter 120ms ease;
}

.express-case-inline-link:hover {
  filter: brightness(0.92);
}

.express-case-inline-link:active {
  filter: brightness(0.88);
}

.express-case-page .comment {
  width: max-content;
}

.express-case-page .div4 {
  color: #ffffff;
  white-space: nowrap;
}

.express-case-page .title21,
.express-case-page .title23 {
  font-size: 32px;
  font-weight: 600;
  line-height: var(--onest-tight-lh);
  letter-spacing: var(--onest-tight-ls);
  color: #ffffff;
}

.express-case-page .title22 {
  color: #ffffff;
}

.express-case-page .title-14-span2,
.express-case-page .title-20-span2 {
  color: #5462ff;
}

.express-case-page .frame-2136142871,
.express-case-page .frame-21361428712,
.express-case-page .frame-21361428713,
.express-case-page .frame-21361428714,
.express-case-page .frame-21361428715,
.express-case-page .frame-21361428716,
.express-case-page .frame-21361428717,
.express-case-page .frame-21361428718 {
  border: none;
  cursor: pointer;
  transition: filter 120ms ease;
}

.express-case-page .frame-2136142871:hover,
.express-case-page .frame-21361428712:hover,
.express-case-page .frame-21361428713:hover,
.express-case-page .frame-21361428714:hover,
.express-case-page .frame-21361428715:hover,
.express-case-page .frame-21361428716:hover,
.express-case-page .frame-21361428717:hover,
.express-case-page .frame-21361428718:hover {
  filter: brightness(0.95);
}

.express-case-page .frame-2136142871:active,
.express-case-page .frame-21361428712:active,
.express-case-page .frame-21361428713:active,
.express-case-page .frame-21361428714:active,
.express-case-page .frame-21361428715:active,
.express-case-page .frame-21361428716:active,
.express-case-page .frame-21361428717:active,
.express-case-page .frame-21361428718:active {
  filter: brightness(0.9);
}

.express-case-page .frame-2136142982 img,
.express-case-page .frame-2136142983 img,
.express-case-page .frame-2136142984 img,
.express-case-page .frame-2136142985 img,
.express-case-page .frame-2136142986 img,
.express-case-page .frame-2136142991 img,
.express-case-page .frame-2136142992 img,
.express-case-page .frame-2136142841 img,
.express-case-page .frame-2136142842 img,
.express-case-page .frame-2136142843 img {
  display: block;
}

.case-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  scroll-margin-top: 30px;
}

.case-page-title {
  font-size: 44px;
  font-weight: 600;
  line-height: var(--onest-tight-lh);
  letter-spacing: var(--onest-tight-ls);
  color: #1c1c1e;
}

.case-page-subtitle {
  font-size: 20px;
  font-weight: 500;
  line-height: var(--onest-body-lh);
  letter-spacing: var(--onest-body-ls);
  color: var(--color-text-mut);
}

.case-section-title {
  font-size: 40px;
  font-weight: 600;
  line-height: var(--onest-headers-lh);
  letter-spacing: var(--onest-headers-ls);
  color: #1c1c1e;
}

.case-text-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.case-text-block p,
.case-text {
  font-size: 18px;
  line-height: var(--onest-body-lh);
  letter-spacing: var(--onest-body-ls);
  color: #1c1c1e;
}

/* Problem cards (red) */
.problem-grid {
  background: #fff5f5;
  border-radius: 24px;
  border: 1px solid #ffc7c2;
  padding: 39px 41px;
  display: flex;
  gap: 39px;
  flex-wrap: wrap;
  overflow: hidden;
}

.problem-card {
  background: #ffafa3;
  padding: 16px;
  width: 195px;
  height: 195px;
  font-size: 16px;
  line-height: var(--onest-body-lh);
  letter-spacing: var(--onest-body-ls);
  color: #1c1c1e;
}

/* Success cards (green) */
.success-grid {
  background: #f4fff8;
  border-radius: 24px;
  border: 1px solid #19a648;
  padding: 39px 41px;
  display: flex;
  gap: 39px;
  flex-wrap: wrap;
  overflow: hidden;
}

.success-card {
  background: #75e199;
  padding: 16px;
  width: 195px;
  height: 195px;
  font-size: 16px;
  line-height: var(--onest-body-lh);
  letter-spacing: var(--onest-body-ls);
  color: #1c1c1e;
}

/* Strategy tags */
.strategy-tags {
  display: flex;
  flex-direction: column;
}

.strategy-tag {
  background: var(--color-tag-bg);
  border-radius: 20px;
  border: 5px solid #fff;
  padding: 16px 24px;
  font-size: 20px;
  line-height: var(--onest-small-lh);
  letter-spacing: var(--onest-small-ls);
  color: #3f49b8;
  margin-top: -10px;
}

.strategy-tag:first-child {
  margin-top: 0;
}

/* Case images with zoom */
.case-image-wrap {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
}

.case-image-wrap img {
  width: 100%;
  border-radius: 24px;
  display: block;
}

.case-image-zoom {
  position: absolute;
  right: 12px;
  top: 12px;
  background: #fff;
  border: none;
  border-radius: 50%;
  padding: 4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.08);
}

.case-image-zoom:hover {
  transform: none;
}

.case-image-zoom img {
  width: 24px;
  height: 24px;
  border-radius: 0;
}

/* Difficulty blocks */
.difficulty-block {
  background: var(--color-tag-bg);
  border-radius: 24px;
  padding: 16px 20px;
}

.difficulty-pair {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Business value rows */
.biz-value-row {
  display: flex;
  gap: 40px;
}

.biz-value-label {
  font-size: 18px;
  font-weight: 700;
  line-height: var(--onest-headers-lh);
  letter-spacing: var(--onest-headers-ls);
  color: #1c1c1e;
  width: 183px;
  flex-shrink: 0;
}

.biz-value-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.biz-value-content p {
  font-size: 18px;
  line-height: var(--onest-body-lh);
  letter-spacing: var(--onest-body-ls);
  color: #1c1c1e;
}

/* LIGHTBOX */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}

.lightbox.active {
  display: flex;
}

body.lightbox-open {
  overflow: hidden;
}

.lightbox__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
}

.lightbox__body {
  position: relative;
  max-width: calc(100vw - 140px);
  max-height: calc(100vh - 140px);
  overflow: hidden;
  cursor: zoom-in;
}

.lightbox__body.zoomed {
  cursor: grab;
  overflow: auto;
  scrollbar-width: none;
}

.lightbox__body.zoomed::-webkit-scrollbar {
  display: none;
}

.lightbox__body.dragging {
  cursor: grabbing;
}

.lightbox__img {
  max-width: calc(100vw - 140px);
  max-height: calc(100vh - 140px);
  border-radius: 12px;
  object-fit: contain;
  transition: none;
  transform-origin: center center;
}

.lightbox__body.zoomed .lightbox__img {
  max-width: none;
  max-height: none;
  cursor: grab;
}

.lightbox__close {
  position: fixed;
  top: 24px;
  right: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 48px;
  cursor: pointer;
  line-height: var(--onest-headers-lh);
  letter-spacing: var(--onest-headers-ls);
  padding: 4px 8px;
  z-index: 1001;
}

.lightbox__close:hover {
  opacity: 0.7;
}

@media (max-width: 1200px) {
  .process-case-page .frame-2087331442 {
    padding: 0 24px 112px 0;
  }

  .process-case-page .frame-2136142727 {
    flex-direction: column;
  }

  .express-case-page .frame-2087331442 {
    padding: 0 24px 112px 0;
  }

  .express-case-page .frame-2136142803,
  .express-case-page .frame-2136142804,
  .express-case-page .frame-2136142806,
  .express-case-page .frame-2136142827,
  .express-case-page .frame-2136142844,
  .express-case-page .frame-21361428062,
  .express-case-page .frame-2136142727 {
    flex-direction: column;
  }

  .express-case-page .frame-2136142982,
  .express-case-page .frame-2136142983,
  .express-case-page .frame-2136142984,
  .express-case-page .frame-2136142985,
  .express-case-page .frame-2136142986,
  .express-case-page .frame-2136142991,
  .express-case-page .frame-2136142992,
  .express-case-page .frame-2136142841,
  .express-case-page .frame-2136142842,
  .express-case-page .frame-2136142843,
  .express-case-page .frame-2136142825 {
    width: 100%;
    max-width: 100%;
  }

  .express-case-page .frame-2136142982,
  .express-case-page .frame-2136142983,
  .express-case-page .frame-2136142984,
  .express-case-page .frame-2136142985,
  .express-case-page .frame-2136142986 {
    height: auto;
    aspect-ratio: 374 / 197;
  }

  .express-case-page ._8-a-72583-a-fd-6-b-40-aa-8-ecc-12-b-1859647-ff-1,
  .express-case-page .image-209536072,
  .express-case-page ._3-efa-486-d-7-c-41-4-e-4-f-b-750-4-e-5-b-58-f-3-a-309-1,
  .express-case-page ._5444419-f-9957-4856-85-a-8-6-d-7043-c-252-f-3-1,
  .express-case-page ._9-df-1-d-0-e-8-f-6-fa-4-f-93-aab-7-1-a-692-be-4987-a-1 {
    position: relative;
    width: 100%;
    height: 100%;
    left: auto;
    top: auto;
  }

  .express-case-page .chat-info-1,
  .express-case-page .chat-info-12,
  .express-case-page ._2,
  .express-case-page ._22,
  .express-case-page .cffdeecf-60-e-5-4-b-26-aa-45-c-82648-eebe-5-c-1,
  .express-case-page ._8-a-84-e-25-b-4-f-13-4587-b-1-ed-7-fad-938-f-08-f-5-1,
  .express-case-page .b-58-e-4-ec-6-33-c-5-49-d-3-933-c-d-0-e-9-d-827-b-6-d-1-1,
  .express-case-page ._722-c-9-db-4-83-a-2-4-d-42-8597-b-0-c-850895-b-1-d-1,
  .express-case-page ._722-c-9-db-4-83-a-2-4-d-42-8597-b-0-c-850895-b-1-d-2,
  .express-case-page ._722-c-9-db-4-83-a-2-4-d-42-8597-b-0-c-850895-b-1-d-3,
  .express-case-page ._722-c-9-db-4-83-a-2-4-d-42-8597-b-0-c-850895-b-1-d-4 {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 767px) {
  .process-case-page .frame-2087331442 {
    padding: 0 0 96px;
    gap: 64px;
  }

  .process-case-page .frame-2136142924 .title4,
  .process-case-page .title4 {
    font-size: 36px;
  }

  .process-case-page .title6 {
    font-size: 28px;
  }

  .process-case-page .div2,
  .process-case-page .div3 {
    gap: 20px;
    padding: 20px;
  }

  .process-case-page .div2 > *,
  .process-case-page .div3 > *,
  .process-case-page .frame-2131329946,
  .process-case-page .frame-2131329947,
  .process-case-page .frame-2131329948,
  .process-case-page .frame-21313299462 {
    width: 100%;
    max-width: none;
    min-height: 0;
  }

  .express-case-page .frame-2087331442 {
    padding: 0 0 96px;
    gap: 56px;
  }

  .express-case-page .div2,
  .express-case-page .div3 {
    padding: 20px;
    gap: 20px;
  }

  .express-case-page .frame-2136142903,
  .express-case-page .frame-2136142904,
  .express-case-page .frame-2136142905,
  .express-case-page .frame-2136142906,
  .express-case-page .frame-2136142907,
  .express-case-page .frame-2136142908,
  .express-case-page .frame-21361429032,
  .express-case-page .frame-21361429042,
  .express-case-page .frame-21361429052,
  .express-case-page .frame-21361429062,
  .express-case-page .frame-21361429072,
  .express-case-page .frame-21361429082 {
    width: 100%;
    height: auto;
    min-height: 160px;
  }

  .express-case-page .title4 {
    font-size: 34px;
  }

  .express-case-page .title6,
  .express-case-page .title7,
  .express-case-page .title11,
  .express-case-page .title13,
  .express-case-page .title16 {
    font-size: 30px;
  }
}

/* PROCESS CASE: REBUILD */
.process-case-wrapper {
  max-width: 700px;
  gap: 0;
}

.process-case-layout {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 80px;
  font-family: var(--font-main);
}

.process-case-layout,
.process-case-layout * {
  font-family: inherit;
}

.process-case-hero,
.process-step,
.process-case-overview,
.process-finale {
  width: 100%;
}

.process-case-hero {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.process-case-title {
  margin: 0;
  font-size: 64px;
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: #1c1c1e;
}

.process-case-summary {
  margin: 0;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: var(--onest-body-ls);
  color: rgba(0, 0, 0, 0.5);
}

.process-case-overview {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.process-case-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.process-case-block-title,
.process-content-title,
.process-step-title {
  margin: 0;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: var(--onest-headers-ls);
  font-weight: 700;
  color: #1c1c1e;
}

.process-summary-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.process-summary-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.process-summary-item p,
.process-message-bubble,
.process-step-lead,
.process-card p,
.process-figure-caption,
.process-finale-label {
  margin: 0;
  font-size: 18px;
  line-height: var(--onest-body-lh);
  letter-spacing: var(--onest-body-ls);
}

.process-summary-index {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff5f5;
  color: #ff2100;
  font-size: 18px;
  line-height: 1;
}

.process-message-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.process-message-bubble {
  background: #f3f3f5;
  color: #000000;
  padding: 12px 16px;
  border-radius: 20px;
  max-width: 100%;
}

.process-message-bubble + .process-message-bubble {
  margin-top: 4px;
}

.process-step {
  display: flex;
  flex-direction: column;
  gap: 40px;
  scroll-margin-top: 30px;
}

.process-step-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.process-step-lead {
  color: #1c1c1e;
}

.process-step-header + .process-card-grid,
.process-step-header + .process-problem-stack {
  margin-top: -20px;
}

.process-content-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.process-content-block--metrics {
  gap: 24px;
}

.process-problem-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.process-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.process-card {
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.process-card--problem {
  background: #fff5f5;
  color: #1f0000;
}

.process-card--problem p {
  color: #1f0000;
}

.process-muted-quote {
  opacity: 0.5;
}

.process-solution-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.process-solution-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.process-solution-item p {
  margin: 0;
  font-size: 18px;
  line-height: var(--onest-body-lh);
  letter-spacing: var(--onest-body-ls);
  color: #1c1c1e;
  flex: 1;
}

.process-solution-index {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #dbffe7;
  color: #19a648;
  font-size: 18px;
  line-height: 1;
}

.process-inline-link {
  color: #0088ff;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.process-inline-link:hover {
  color: #006fd0;
}

.process-figure {
  margin: 0;
}

.process-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}

.process-figure--quote {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.process-figure--quote img {
  width: 144px;
  border-radius: 16px;
}

.process-figure-caption {
  color: #1c1c1e;
}

.process-metrics {
  display: grid;
  gap: 12px;
}

.process-metrics--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.process-metrics--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.process-metric-card {
  background: #19a648;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.process-metric-value {
  margin: 0;
  color: #ffffff;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.process-metric-value small {
  margin-left: 6px;
  font-size: 0.62em;
  color: rgba(255, 255, 255, 0.72);
}

.process-metric-text {
  margin: 0;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: 0.03em;
}

.process-finale {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.process-finale-label {
  color: #1c1c1e;
  text-align: center;
}

.process-figure--finale img {
  width: min(100%, var(--case-finale-image-width));
  max-width: var(--case-finale-image-width);
  border-radius: 24px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .process-case-layout {
    gap: 80px;
  }

  .process-case-title {
    font-size: 28px;
  }

  .process-case-summary,
  .process-summary-item p,
  .process-message-bubble,
  .process-step-lead,
  .process-card p,
  .process-solution-item p,
  .process-metric-text,
  .process-figure-caption,
  .process-finale-label {
    font-size: 16px;
  }

  .process-case-block-title,
  .process-content-title,
  .process-step-title,
  .process-metric-value {
    font-size: 24px;
  }

  .process-summary-index,
  .process-solution-index {
    font-size: 16px;
  }

  .process-step {
    gap: 32px;
  }

  .process-content-block {
    gap: 20px;
  }

  .process-metrics--three,
  .process-metrics--two {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 679px) {
  .process-summary-item {
    align-items: flex-start;
  }

  .process-card-grid {
    grid-template-columns: 1fr;
  }

  .process-card {
    min-height: 0 !important;
  }

  .process-solution-item {
    align-items: flex-start;
  }
}

/* DESIGN SYSTEM CASE */
.design-system-case-wrapper {
  max-width: 700px;
  gap: 0;
}

.design-system-case-page .sidebar__buttons {
  gap: 4px;
}

.design-system-case-page .sidebar__info {
  gap: 16px;
}

.design-system-case-page .sidebar__name {
  font-size: 18px;
  font-weight: 400;
  line-height: var(--onest-body-lh);
  letter-spacing: var(--onest-body-ls);
  color: var(--color-text-mut);
  margin-bottom: 0;
}

.design-system-case-page .case-nav-list {
  gap: 12px;
}

.design-system-case-layout {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 80px;
  font-family: var(--font-main);
}

.design-system-case-layout,
.design-system-case-layout * {
  font-family: inherit;
}

.design-system-hero,
.design-system-overview,
.design-system-section,
.design-system-finale {
  width: 100%;
}

.design-system-hero {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.design-system-title {
  margin: 0;
  color: #1c1c1e;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.design-system-summary,
.design-system-number-item p,
.design-system-message,
.design-system-text-block p,
.design-system-highlight,
.design-system-note-title,
.design-system-paragraph,
.design-system-difficulty-problem,
.design-system-difficulty-solution p,
.design-system-business-card p,
.design-system-finale-label {
  margin: 0;
  font-size: 18px;
  line-height: var(--onest-body-lh);
  letter-spacing: var(--onest-body-ls);
}

.design-system-summary {
  color: rgba(0, 0, 0, 0.5);
}

.design-system-overview,
.design-system-section {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.design-system-problem-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.design-system-section-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.design-system-section-title {
  margin: 0;
  color: #1c1c1e;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: var(--onest-headers-ls);
  font-weight: 700;
}

.design-system-number-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.design-system-number-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.design-system-number {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff5f5;
  color: #ff2100;
  font-size: 18px;
  line-height: 1;
}

.design-system-number--green {
  background: #dbffe7;
  color: #19a648;
}

.design-system-message-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.design-system-message {
  background: #f3f3f5;
  color: #000000;
  padding: 12px 16px;
  border-radius: 20px;
}

.design-system-message + .design-system-message {
  margin-top: 4px;
}

.design-system-text-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.design-system-highlight {
  color: #1c1c1e;
}

.design-system-inline-link {
  color: #0088ff;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.design-system-inline-link:hover {
  color: #006fd0;
}

.design-system-image {
  width: 100%;
}

.design-system-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.design-system-success-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.design-system-success-card {
  background: #dbffe7;
  border-radius: 24px;
  padding: 24px;
  color: #001908;
}

.design-system-success-card p {
  margin: 0;
  color: inherit;
  font-size: 18px;
  line-height: var(--onest-body-lh);
  letter-spacing: var(--onest-body-ls);
}

.design-system-scaling-note {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.design-system-note-title,
.design-system-paragraph {
  color: #1c1c1e;
}

.design-system-note-image {
  width: 144px;
  height: 144px;
  border-radius: 24px;
  object-fit: cover;
}

.design-system-risk-card {
  width: 100%;
  background: #fff5f5;
  border-radius: 24px;
  padding: 24px;
}

.design-system-risk-card p {
  margin: 0;
  color: #1f0000;
  font-size: 18px;
  line-height: var(--onest-body-lh);
  letter-spacing: var(--onest-body-ls);
}

.design-system-strategy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.design-system-number-list--green .design-system-number-item p {
  color: #1c1c1e;
}

.design-system-difficulties-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.design-system-difficulty-pair {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.design-system-difficulty-problem {
  color: #1c1c1e;
}

.design-system-difficulty-solution {
  background: #dbffe7;
  border-radius: 24px;
  padding: 24px;
}

.design-system-difficulty-solution p {
  color: #001908;
}

.design-system-business-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.design-system-business-card {
  background: #19a648;
  border-radius: 24px;
  padding: 24px;
}

.design-system-business-card p {
  color: #ffffff;
}

.design-system-business-card--wide {
  grid-column: 1 / -1;
}

.design-system-finale {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.design-system-finale-label {
  color: #1c1c1e;
  text-align: center;
}

.design-system-finale-figure {
  margin: 0;
}

.design-system-finale-figure img {
  display: block;
  width: min(100%, var(--case-finale-image-width));
  max-width: var(--case-finale-image-width);
  height: auto;
  border-radius: 24px;
  margin: 0 auto;
}

.design-system-section[id],
.design-system-overview[id] {
  scroll-margin-top: 30px;
}

@media (max-width: 767px) {
  .design-system-case-layout {
    gap: 80px;
  }

  .design-system-title {
    font-size: 34px;
  }

  .design-system-section-title {
    font-size: 24px;
  }

  .design-system-summary,
  .design-system-number-item p,
  .design-system-message,
  .design-system-text-block p,
  .design-system-highlight,
  .design-system-note-title,
  .design-system-paragraph,
  .design-system-difficulty-problem,
  .design-system-difficulty-solution p,
  .design-system-business-card p,
  .design-system-finale-label,
  .design-system-success-card p,
  .design-system-risk-card p {
    font-size: 16px;
  }

  .design-system-number {
    font-size: 16px;
  }

  .design-system-success-grid,
  .design-system-business-grid {
    grid-template-columns: 1fr;
  }

  .design-system-business-card--wide {
    grid-column: auto;
  }

  .design-system-finale-figure img {
    width: min(100%, var(--case-finale-image-width));
    max-width: var(--case-finale-image-width);
  }
}

@media (max-width: 679px) {
  .design-system-number-item {
    align-items: flex-start;
  }
}

/* REDESIGN CASE */
.redesign-case-wrapper {
  max-width: 700px;
  gap: 0;
}

.redesign-case-page .sidebar__buttons {
  gap: 4px;
}

.redesign-case-page .sidebar__info {
  gap: 16px;
}

.redesign-case-page .sidebar__name {
  font-size: 18px;
  font-weight: 400;
  line-height: var(--onest-body-lh);
  letter-spacing: var(--onest-body-ls);
  color: var(--color-text-mut);
  margin-bottom: 0;
}

.redesign-case-page .case-nav-list {
  gap: 12px;
}

.redesign-case-layout {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 80px;
  font-family: var(--font-main);
}

.redesign-case-layout,
.redesign-case-layout * {
  font-family: inherit;
}

.redesign-hero,
.redesign-section,
.redesign-finale {
  width: 100%;
}

.redesign-hero {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.redesign-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.redesign-section--split {
  gap: 40px;
}

.redesign-section-intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.redesign-title {
  margin: 0;
  color: #1c1c1e;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.redesign-summary,
.redesign-number-item p,
.redesign-message,
.redesign-text,
.redesign-stream-title,
.redesign-stream-link,
.redesign-rich-text p,
.redesign-note p,
.redesign-emphasis,
.redesign-business-text,
.redesign-finale-label {
  margin: 0;
  font-size: 18px;
  line-height: var(--onest-body-lh);
  letter-spacing: var(--onest-body-ls);
}

.redesign-summary {
  color: rgba(0, 0, 0, 0.5);
}

.redesign-section-title {
  margin: 0;
  color: #1c1c1e;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: var(--onest-headers-ls);
  font-weight: 700;
}

.redesign-number-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.redesign-number-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.redesign-number-badge {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
  letter-spacing: var(--onest-body-ls);
}

.redesign-number-list--danger .redesign-number-badge {
  background: #fff5f5;
  color: #ff2100;
}

.redesign-number-list--info .redesign-number-badge {
  background: #f0f8ff;
  color: #0088ff;
}

.redesign-message-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.redesign-message {
  background: #f3f3f5;
  color: #000000;
  padding: 12px 16px;
  border-radius: 20px;
}

.redesign-media-grid {
  display: grid;
  gap: 12px;
  align-items: start;
}

.redesign-media-grid--double {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.redesign-media-grid--triple {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.24fr) minmax(0, 1fr);
}

.redesign-media-grid--triple-equal {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.redesign-media-card {
  width: 100%;
  border: 1px solid #ececec;
  background: #ffffff;
}

.redesign-media-card > img {
  width: 100%;
  height: auto;
  display: block;
}

.redesign-media-grid--double .redesign-media-card,
.redesign-media-grid--triple .redesign-media-card {
  height: 100%;
}

.redesign-media-grid--double .redesign-media-card > img,
.redesign-media-grid--triple .redesign-media-card > img {
  height: 100%;
  object-fit: cover;
}

.redesign-stream-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.redesign-stream-card {
  min-height: 160px;
  background: #f3f3f5;
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: space-between;
}

.redesign-stream-card--focus {
  justify-content: space-between;
}

.redesign-stream-title {
  color: #000000;
}

.redesign-stream-link {
  color: #1c1c1e;
}

.redesign-inline-link {
  color: #0088ff;
  text-decoration: none;
}

.redesign-inline-link:hover {
  filter: brightness(0.92);
}

.redesign-rich-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.redesign-rich-text p,
.redesign-note p,
.redesign-text {
  color: #1c1c1e;
}

.redesign-rich-text strong {
  font-weight: 700;
}

.redesign-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.redesign-note img {
  flex: 0 0 18px;
  width: 18px;
  height: 28px;
}

.redesign-emphasis {
  color: #1c1c1e;
}

.redesign-emphasis-main {
  font-weight: 400;
}

.redesign-emphasis-note {
  color: rgba(0, 0, 0, 0.56);
}

.redesign-review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.redesign-review-pair {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.redesign-review-pair img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
  border: 1px solid #ececec;
  background: #ffffff;
}

.redesign-review-details {
  position: relative;
  padding-bottom: 42px;
}

.redesign-review-details-strip {
  display: flex;
  align-items: flex-end;
  overflow: visible;
}

.redesign-review-details-strip img {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 4px solid #ffffff;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.04);
}

.redesign-review-details-strip img + img {
  margin-left: -10px;
}

.redesign-review-comment {
  position: absolute;
  right: 8px;
  bottom: 0;
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.redesign-review-comment img {
  width: 14px;
  height: 14px;
  margin-top: 2px;
}

.redesign-review-bubble {
  background: #ee46bc;
  border-radius: 2px 17px 17px 17px;
  border: 1px solid #dd2590;
  padding: 6px 14px 7px 16px;
  color: #ffffff;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0;
  box-shadow: 2px 2px 7px rgba(238, 70, 188, 0.16);
  white-space: nowrap;
}

.redesign-business-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.redesign-business-card {
  background: #19a648;
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.redesign-business-value {
  margin: 0;
  color: #ffffff;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.redesign-business-text {
  color: #ffffff;
}

.redesign-finale {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.redesign-finale-label {
  color: #1c1c1e;
  text-align: center;
}

.redesign-finale-figure {
  margin: 0;
}

.redesign-finale-figure img {
  display: block;
  width: min(100%, var(--case-finale-image-width));
  max-width: var(--case-finale-image-width);
  height: auto;
  margin: 0 auto;
  border-radius: 24px;
}

.redesign-section[id] {
  scroll-margin-top: 30px;
}

@media (max-width: 767px) {
  .redesign-case-layout {
    gap: 80px;
  }

  .redesign-title {
    font-size: 34px;
  }

  .redesign-section-title,
  .redesign-business-value {
    font-size: 24px;
  }

  .redesign-summary,
  .redesign-number-item p,
  .redesign-message,
  .redesign-text,
  .redesign-stream-title,
  .redesign-stream-link,
  .redesign-rich-text p,
  .redesign-note p,
  .redesign-emphasis,
  .redesign-business-text,
  .redesign-finale-label {
    font-size: 16px;
  }

  .redesign-number-badge {
    font-size: 16px;
  }

  .redesign-media-grid--double,
  .redesign-media-grid--triple,
  .redesign-media-grid--triple-equal,
  .redesign-stream-grid,
  .redesign-review-grid,
  .redesign-business-grid {
    grid-template-columns: 1fr;
  }

  .redesign-stream-card {
    min-height: 0;
  }

  .redesign-review-details {
    padding-bottom: 0;
  }

  .redesign-review-details-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .redesign-review-details-strip img + img {
    margin-left: 0;
  }

  .redesign-review-comment {
    position: static;
    margin-top: 12px;
    justify-content: flex-end;
  }
}

@media (max-width: 679px) {
  .redesign-number-item {
    align-items: flex-start;
  }
}