/* =========================================================
   DNA Studio — case pages (Bellavia, Sweet Blossom, Alira, Cuadra)
   Loaded after style.css; reuses its tokens and components.
   ========================================================= */

:root { --fs-h3: 32px; --fs-case-name: var(--fs-display); }
@media (max-width: 1023px) { :root { --fs-h3: 26px; --fs-case-name: 72px; } }
@media (max-width: 767px)  { :root { --fs-h3: 22px; --fs-case-name: 44px; } }

/* ---------- Hero ---------- */
.case-hero {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding-top: 96px;
}
.breadcrumb {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-label-xs);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.breadcrumb a { transition: color .25s; }
.breadcrumb a:hover { color: var(--text-accent); }
.breadcrumb span { color: var(--text-muted); }

.case-title { display: flex; flex-direction: column; gap: 24px; }
.case-title__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label-m);
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-accent);
}
.case-title__name {
  font-weight: 600;
  font-size: var(--fs-case-name);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.case-title__lead {
  max-width: 74.5%; /* 954 / 1280 */
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.case-title__lead em, .serif-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h1-serif);
  letter-spacing: 0;
  color: var(--text-accent);
}

.case-meta {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--border-subtle);
}
.case-meta div { display: flex; flex-direction: column; gap: 12px; }
.case-meta dt, .label-muted {
  font-family: var(--font-mono);
  font-size: var(--fs-label-xs);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.case-meta dd { margin: 0; font-size: var(--fs-body-m); line-height: 1.6; }

.case-hero__image {
  position: relative;
  aspect-ratio: 1280 / 720;
  overflow: hidden;
  border-radius: 2px;
}
.case-hero__image img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 01 Business DNA ---------- */
.genes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.genes::before { /* strand line through node centres */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 19.5px;
  height: 1px;
  background: var(--border-default);
}
.gene { position: relative; display: flex; flex-direction: column; gap: 28px; }
.gene__node { position: relative; width: 40px; height: 40px; }
.gene__node img { position: absolute; width: 190%; max-width: none; left: -45%; top: -45%; }
.gene__text { display: flex; flex-direction: column; gap: 28px; }
.gene__word {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-xl-serif);
  line-height: 1;
  color: var(--text-accent);
}
.gene__desc { font-size: var(--fs-body-m); line-height: 1.6; }

/* ---------- 02 Before → After ---------- */
.ba-head, .ba-row {
  display: grid;
  grid-template-columns: 15.1% 40.57% 1fr; /* 193 / 519 / rest */
  gap: 24px;
}
.ba-head {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: var(--fs-label-xs);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ba-head span:last-child { color: var(--text-accent); }
.ba-row { padding-block: 28px; border-bottom: 1px solid var(--border-subtle); }
.ba-row__topic {
  font-family: var(--font-mono);
  font-size: var(--fs-label-xs);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-accent);
}
.ba-row__before { font-size: var(--fs-body-l); line-height: 1.4; color: var(--text-muted); }
.ba-row__after { display: flex; gap: 16px; font-size: var(--fs-body-l); line-height: 1.4; }
.ba-row__after img { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }

/* ---------- 03 Inside the site ---------- */
.blocks { display: flex; flex-direction: column; gap: 140px; }
.block {
  display: flex;
  align-items: center;
  gap: 24px;
}
.block--reverse { flex-direction: row-reverse; }

.browser {
  flex: 0 0 66.04%; /* 845 / 1280 */
  overflow: hidden;
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.browser__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; }
.browser__bar img { width: 10px; height: 10px; }
.browser__url {
  flex: 1;
  margin-right: 54px;
  padding: 4px 16px;
  border-radius: 999px;
  background: var(--bg-page);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.browser__screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 843.34 / var(--h); /* --h = screen height from the design */
}
.browser__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* crop of one long screenshot (Alira) */
.browser__screen img.crop { position: absolute; left: 0; width: 100%; height: var(--ih); top: var(--it); object-fit: fill; max-width: none; }

.block__caption { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.block__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label-xs);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-accent);
}
.block__title { font-weight: 400; font-size: var(--fs-h3); line-height: 1.25; }
.block__goal {
  display: flex;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: var(--fs-label-caption);
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-accent);
}
.block__goal span { color: var(--text-muted); }

/* ---------- Extra pages (Sweet Blossom) ---------- */
.pages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.page-shot { display: flex; flex-direction: column; gap: 16px; }
.page-shot__title { font-weight: 400; font-size: var(--fs-body-l); line-height: 1.4; }
.page-shot__img {
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  aspect-ratio: 410.67 / var(--h);
}
.page-shot__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---------- 04 Client path ---------- */
.path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}
.path::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 11.5px;
  height: 1px;
  background: var(--border-default);
}
.path__step { position: relative; display: flex; flex-direction: column; gap: 20px; }
.path__node { position: relative; width: 24px; height: 24px; }
.path__node img { position: absolute; width: 250%; max-width: none; left: -75%; top: -75%; }
.path__num {
  font-family: var(--font-mono);
  font-size: var(--fs-label-xs);
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.path__title {
  font-family: var(--font-mono);
  font-size: var(--fs-label-lead);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.feature {
  display: grid;
  grid-template-columns: 40.57% 1fr;
  gap: 132.67px;
  align-items: center;
}
.feature__text { display: flex; flex-direction: column; gap: 24px; }
.feature__heading {
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.feature__heading em {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h1-serif);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--text-accent);
}
.feature__text p:last-child { font-size: var(--fs-body-l); line-height: 1.4; }

/* Rebuilt client UI — each case sets its own colours/fonts via --ui-* */
.client-ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 56px 48px;
  border-radius: 2px;
  background: var(--ui-bg);
  color: var(--ui-ink);
  font-family: var(--ui-text-font);
}
.client-ui__badge {
  padding: 8px 18px;
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
  font-weight: 500;
  white-space: pre;
}
.client-ui__card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 20px 40px rgba(26,26,26,.08);
}
.client-ui__heading { font-family: var(--ui-head-font); font-weight: var(--ui-head-weight, 400); font-size: 28px; color: var(--ui-ink); }
.client-ui__sub { font-size: 17px; color: var(--ui-muted); }
.client-ui__options { display: flex; gap: 8px; }
.client-ui__options span {
  flex: 1;
  padding-block: 12px;
  border-radius: 999px;
  background: var(--ui-chip);
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}
.client-ui__options span.is-active { background: var(--ui-chip-active); color: #fff; }
.client-ui__btn {
  padding-block: 18px;
  border-radius: 999px;
  background: var(--ui-btn);
  color: var(--ui-btn-ink, #fff);
  font-size: 17px;
  font-weight: 500;
  text-align: center;
}
.client-ui__note { font-size: 14px; color: var(--ui-muted); text-align: center; }

/* ---------- 05 Look & feel ---------- */
.look { display: grid; grid-template-columns: 628fr 628fr; gap: 24px; align-items: start; }
.look__col { display: flex; flex-direction: column; gap: 20px; }
.look__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-accent);
}
.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.swatch { display: flex; flex-direction: column; gap: 12px; }
.swatch i { display: block; height: 200px; border-radius: 2px; background: var(--c); }
.swatch i.outlined { border: 1px solid var(--border-default); }
.swatch span {
  font-family: var(--font-mono);
  font-size: var(--fs-label-caption);
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.swatch span + span { color: var(--text-muted); }

.specimen {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  border-radius: 2px;
  background: var(--ui-bg);
  font-size: 40px;
  line-height: normal;
}
.specimen small { font-size: 16px; }

.fullpage {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 80px;
  padding-block: 96px;
  border-radius: 2px;
  background: var(--ui-bg);
  overflow: hidden;
}
.fullpage__desktop { width: 460px; aspect-ratio: 460 / var(--h); border-radius: 8px; overflow: hidden; box-shadow: 0 30px 60px rgba(26,26,26,.18); }
.fullpage__mobile {
  width: 230px;
  margin-top: 200px;
  border: 6px solid var(--ui-frame, #1a1a1a);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(26,26,26,.18);
}
.fullpage img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fullpage__mobile { aspect-ratio: 230 / var(--h); }

/* ---------- 06 What's inside ---------- */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.fact { display: flex; flex-direction: column; gap: 16px; padding-top: 32px; border-top: 1px solid var(--border-subtle); }
.fact strong { font-weight: 400; font-size: var(--fs-xl); line-height: 1; letter-spacing: -0.02em; }
.fact span { font-size: var(--fs-body-m); line-height: 1.6; }

/* ---------- Next case + CTA ---------- */
.next { gap: 48px; }
.next__row { display: grid; grid-template-columns: 1fr 40.57%; gap: 24px; align-items: center; }
.next__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.next__name {
  font-size: var(--fs-xl);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  transition: color .25s;
}
.next__name:hover { color: var(--text-accent); }
.next__text p:not(.label-muted) { font-size: var(--fs-body-l); line-height: 1.4; }
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--text-primary);
  transition: transform .3s;
}
.icon-btn img { width: 20px; height: 20px; }
.icon-btn:hover, .next__row:hover .icon-btn { background: var(--accent-hover); filter: drop-shadow(0 0 20px rgba(169,177,138,.1)) drop-shadow(0 0 10px rgba(169,177,138,.2)); }
.icon-btn:active { background: var(--accent-pressed); }
.next__image { display: block; position: relative; aspect-ratio: 519.34 / 435; overflow: hidden; border-radius: 2px; }
.next__image img { position: absolute; max-width: none; transition: transform .6s ease; }
.next__image:hover img { transform: scale(1.03); }

.case-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding-top: 112px;
  padding-bottom: 0;
  text-align: center;
}
.case-cta h2 {
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.case-cta h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h1-serif);
  letter-spacing: 0;
  color: var(--text-accent);
}
.next { padding-bottom: var(--section-gap); }

/* =========================================================
   Tablet & mobile — everything stacks
   ========================================================= */
@media (max-width: 1023px) {
  .case-hero { gap: 40px; padding-top: 64px; }
  .case-title { gap: 20px; }
  .case-title__lead { max-width: none; }
  .case-meta { grid-template-columns: 1fr 1fr; gap: 24px; }
  .case-hero__image { aspect-ratio: 688 / 427; }

  /* genes: vertical strand */
  .genes { grid-template-columns: 1fr; gap: 40px; }
  .genes::before { left: 15.5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .gene { flex-direction: row; align-items: center; gap: 24px; }
  .gene__node { width: 32px; height: 32px; flex-shrink: 0; }
  .gene__text { gap: 4px; }
  .gene__word { font-size: var(--fs-h1-serif); line-height: 1.2; }

  .ba-head { display: none; }
  .ba-row { grid-template-columns: 1fr; gap: 12px; padding-block: 24px; }
  .ba-row:first-of-type { border-top: 1px solid var(--border-subtle); }

  .blocks { gap: 80px; }
  .block, .block--reverse { flex-direction: column; align-items: stretch; gap: 32px; }
  .block--reverse .browser { order: -1; }
  .browser { flex: none; width: 100%; }

  .pages { grid-template-columns: 1fr 1fr; }

  .path { grid-template-columns: 1fr; gap: 28px; }
  .path::before { left: 11.5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .path__step { flex-direction: row; align-items: center; gap: 20px; }
  .path__node { flex-shrink: 0; }

  .feature { grid-template-columns: 1fr; gap: 24px; }

  .look { grid-template-columns: 1fr; gap: 48px; }
  .fullpage { gap: 40px; padding: 64px 24px; }
  .fullpage__desktop { width: 300px; }
  .fullpage__mobile { width: 150px; margin-top: 0; border-width: 4px; border-radius: 16px; }

  .next__row { grid-template-columns: 1fr 1fr; }
  .case-cta { padding-top: 80px; }
}

@media (max-width: 767px) {
  .case-hero { gap: 32px; padding-top: 40px; }
  .case-title { gap: 16px; }
  .case-hero__image { aspect-ratio: 350 / 298; }

  .genes { gap: 32px; }
  .genes::before { left: 13.5px; }
  .gene { gap: 20px; }
  .gene__node { width: 28px; height: 28px; }
  .gene__node img { width: 228.6%; left: -64.29%; top: -64.29%; }

  .ba-row { gap: 8px; }

  .block, .block--reverse { gap: 24px; }
  .browser { border-radius: 8px; }
  .browser__bar { padding: 8px 12px; gap: 6px; }
  .browser__bar img { width: 8px; height: 8px; }
  .browser__url { margin-right: 0; font-size: 10px; }

  .pages { grid-template-columns: 1fr; }
  .path { gap: 24px; }
  .path__title { white-space: normal; }

  .client-ui { padding: 32px 16px; }
  .client-ui__card { padding: 20px; }
  .client-ui__heading { font-size: 24px; }
  .client-ui__options { flex-wrap: wrap; }
  .client-ui__options span { flex: 1 1 40%; font-size: 15px; }
  .client-ui__badge { white-space: normal; text-align: center; }

  .swatches { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
  .swatch i { height: 112px; }
  .specimen { font-size: 28px; padding: 24px; }

  .fullpage { padding: 48px 16px; }
  .fullpage__desktop { display: none; }
  .fullpage__mobile { width: 230px; border-width: 6px; border-radius: 24px; }

  .facts { grid-template-columns: 1fr 1fr; row-gap: 40px; }

  .next__row { grid-template-columns: 1fr; gap: 32px; }
  .next__image { order: -1; }
  .case-cta h2 { font-size: var(--fs-h2); }
  .case-cta h2 em { font-size: calc(var(--fs-h2) * 1.1); }
  .case-cta .btn { width: 100%; height: 64px; padding-inline: 40px; }
  .case-cta .btn img { width: 32px; height: 32px; }
}

/* Ukrainian words are longer: a slightly smaller serif keeps the four genes in line */
:lang(uk) .gene__word { font-size: clamp(56px, 5.6vw, 80px); }
@media (max-width: 1023px) { :lang(uk) .gene__word { font-size: var(--fs-h1-serif); } }
/* longer Ukrainian step names may wrap instead of pushing the row wider */
:lang(uk) .path__title { white-space: normal; font-size: clamp(16px, 1.5vw, 24px); }
@media (min-width: 1024px) and (max-width: 1279px) { .path__title { font-size: 18px; } }