/* =====================================================================
   Case studies — 2026 design (Figma SJNO4zgwlsIRyYgGwk0GyY)
   Index 2004:3 · detail 2004:4 / 2024:11 / 2024:229 (one template).
   Loads after home-v2.css (tokens, chrome, CTA band). Desktop values are
   the 1440 frame; column widths are % of the 1280 content box so 1024–1440
   stays proportional. No mobile frames: mobile DERIVED from the Home 2026
   mobile system (stacked, gutter 20, Display 32–40).
   ===================================================================== */

/* Shared text link: 15/600 steel-600 + 14.6×12 arrow, gap 10 (41:3, 2014:24, 2024:8). */
.cs2-link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--bp2-font); font-weight: 600; font-size: 15px; line-height: 1; color: var(--bp2-steel-600); text-decoration: none; white-space: nowrap; }
.cs2-link:hover { color: var(--bp2-navy-700); }
.cs2-link__arrow { display: block; width: 14.6px; height: 12px; flex: none; }

/* ---- Hero 2004:82 — 1440×1080 photo, label + H1 at (80, 110) ---- */
.cs2-hero { position: relative; background: var(--bp2-navy-900); height: min(125vw, calc(100svh - 80px)); overflow: hidden; font-family: var(--bp2-font); }   /* phones: portrait 4:5 (469 at 375), never past the screen — 4:3 was 281, "tiny" (Vitaliy 2026-09-28) */
.cs2-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
.cs2-hero__inner { position: relative; max-width: var(--bp2-container-max); margin: 0 auto; padding: 32px var(--bp2-gutter) 0; box-sizing: border-box; }
.cs2-hero__content { display: flex; flex-direction: column; align-items: flex-start; }
.cs2-hero__label { font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: 1.32px; color: var(--bp2-white); text-transform: uppercase; }
.cs2-hero__title { margin: 8px 0 0; font-family: var(--bp2-font); font-weight: 900; font-size: clamp(28px, 8vw, 40px); line-height: 1.1; letter-spacing: -0.02em; color: var(--bp2-white); max-width: 900px; overflow-wrap: anywhere; }   /* "Telecommunication" is one 17-letter word: 40px would not fit 335 */

/* ---- Facts strip 2004:83 — 172 tall, navy-800 ---- */
.cs2-facts { background: var(--bp2-navy-800); font-family: var(--bp2-font); }
.cs2-facts__inner { max-width: var(--bp2-container-max); margin: 0 auto; padding: 32px var(--bp2-gutter); box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
.cs2-facts__fact { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cs2-facts__label { font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: 1.32px; color: var(--bp2-ondark-70); }
.cs2-facts__value { margin: 0; font-weight: 600; font-size: 20px; line-height: 26.4px; letter-spacing: -0.1px; color: var(--bp2-white); overflow-wrap: anywhere; }
.cs2-facts__fact:first-child { grid-column: 1 / -1; }   /* mobile: "Telecommunication access" ran into the PLATFORM column at 375 */

/* ---- Brief / Work / Outcome 2004:84·86·87 ---- */
.cs2-body { background: var(--bp2-white); font-family: var(--bp2-font); }
.cs2-body__inner { max-width: var(--bp2-container-max); margin: 0 auto; padding: 64px var(--bp2-gutter) 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 24px; }
.cs2-body--outcome .cs2-body__inner { padding-bottom: 64px; }
.cs2-body__heading { margin: 0; font-family: var(--bp2-font); font-weight: 800; font-size: 32px; line-height: 1.04; letter-spacing: -0.64px; color: var(--bp2-ink-900); }
.cs2-body__text { display: flex; flex-direction: column; gap: 22px; }
.cs2-body__text p { margin: 0; font-size: 17px; line-height: 27px; color: var(--bp2-ink-600); }

/* ---- Platform used 2024:2 — 418 tall ---- */
.cs2-platform { background: var(--bp2-white); font-family: var(--bp2-font); }
.cs2-platform__inner { max-width: var(--bp2-container-max); margin: 0 auto; padding: 64px var(--bp2-gutter); box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.cs2-platform__photo { width: 100%; max-width: 420px; aspect-ratio: 4 / 3; border-radius: 2px; overflow: hidden; }
.cs2-platform__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs2-platform__copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cs2-platform__label { font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: 1.32px; color: var(--bp2-ink-400); }
.cs2-platform__name { margin: 0; font-family: var(--bp2-font); font-weight: 800; font-size: 32px; line-height: 1.04; letter-spacing: -0.64px; color: var(--bp2-ink-900); white-space: nowrap; }
.cs2-platform__line { margin: 0; font-size: 16px; line-height: 26px; color: var(--bp2-ink-600); white-space: pre-wrap; }

/* ---- More case studies 2004:89 — grey-50 ---- */
.cs2-more { background: var(--bp2-grey-50); font-family: var(--bp2-font); }
.cs2-more__inner { max-width: var(--bp2-container-max); margin: 0 auto; padding: 64px var(--bp2-gutter); box-sizing: border-box; }
.cs2-more__header { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.cs2-more__heading { margin: 0; font-family: var(--bp2-font); font-weight: 800; font-size: 32px; line-height: 1.04; letter-spacing: -0.64px; color: var(--bp2-ink-900); }
.cs2-more__grid { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-direction: column; gap: 40px; }
.cs2-more__card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.cs2-more__photo { display: block; width: 100%; aspect-ratio: 620 / 465; border-radius: 2px; overflow: hidden; }
.cs2-more__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs2-more__label { margin-top: 22px; font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: 1.32px; color: var(--bp2-ink-600); }
.cs2-more__title { margin: 12px 0 0; font-family: var(--bp2-font); font-weight: 700; font-size: 24px; line-height: 1.22; letter-spacing: -0.24px; color: var(--bp2-ink-900); }
.cs2-more__title a { color: inherit; text-decoration: none; }
.cs2-more__text { margin: 12px 0 0; font-size: 14px; line-height: 22px; color: var(--bp2-ink-600); }

/* ---- Index header 2004:79 — 364 tall, navy-900 ---- */
.cs2-header { background: var(--bp2-navy-900); font-family: var(--bp2-font); }
.cs2-header__inner { max-width: var(--bp2-container-max); margin: 0 auto; padding: 64px var(--bp2-gutter); box-sizing: border-box; }
.cs2-header__title { margin: 0; font-family: var(--bp2-font); font-weight: 900; font-size: 40px; line-height: 44px; letter-spacing: -0.8px; color: var(--bp2-white); }
.cs2-header__lead { margin: 20px 0 0; max-width: 640px; font-size: 16px; line-height: 26px; color: var(--bp2-ondark-70); }

/* ---- Index list 2004:80 ---- */
.cs2-list { background: var(--bp2-white); font-family: var(--bp2-font); }
.cs2-list__inner { max-width: var(--bp2-container-max); margin: 0 auto; padding: 64px var(--bp2-gutter); box-sizing: border-box; display: flex; flex-direction: column; gap: 64px; }
.cs2-list__row { display: flex; flex-direction: column; gap: 28px; }
.cs2-list__photo { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 2px; overflow: hidden; }
.cs2-list__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs2-list__study { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.cs2-list__label { font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: 1.32px; color: var(--bp2-ink-400); }
.cs2-list__title { margin: 16px 0 0; font-family: var(--bp2-font); font-weight: 800; font-size: 32px; overflow-wrap: anywhere; line-height: 1.04; letter-spacing: -0.64px; color: var(--bp2-ink-900); }
.cs2-list__title a { color: inherit; text-decoration: none; }
.cs2-list__text { margin: 20px 0 0; font-size: 16px; line-height: 26px; color: var(--bp2-ink-600); }
.cs2-list__facts { align-self: stretch; margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--bp2-grey-100); display: flex; flex-direction: column; gap: 14px; }
.cs2-list__facts > div { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 22px; }
.cs2-list__facts dt { color: var(--bp2-ink-400); }
.cs2-list__facts dd { margin: 0; color: var(--bp2-ink-900); }
.cs2-list__link { margin-top: 34px; }

@media (min-width: 1024px) {
  /* Hero: 1080 at 1440 (4:3); content (80, 92) → 18 spacer → label y110, H1 flush under it. */
  /* Height: the frame's 1080 at 1440 (4:3) made the photo taller than any laptop screen and
     1500px at 2000 wide (Vitaliy 2026-09-28: "too huge"). Cap it to the visible screen under
     the 132px header, never more than 75vw or 1080, never under 560. Photo stays cover. */
  .cs2-hero { aspect-ratio: auto; height: clamp(560px, min(75vw, calc(100svh - 132px)), 1080px); }
  .cs2-hero__inner { padding-top: 110px; }
  .cs2-hero__title { margin-top: 0; font-size: 72px; line-height: 72px; letter-spacing: -1.8px; max-width: 70.3125%; }   /* 900 / 1280 */

  /* Facts: 172 tall, columns flex-1 (content 272 each at 1440), dividers 24px into cols 2–4. */
  .cs2-facts__inner { min-height: 172px; padding-top: 0; padding-bottom: 0; display: flex; align-items: center; gap: 0; }
  .cs2-facts__fact { flex: 1 1 0; padding: 0 24px 0 32px; }
  .cs2-facts__fact:first-child { padding-left: 0; grid-column: auto; }
  /* Dividers 2015:20–22 sit at quarters of the 1280 content box (x400/720/1040), NOT at the column
     edges (columns are 296/328/328/328) — three 1×54 steel-600 bars, vertically centred. */
  .cs2-facts__inner {
    --q: calc((100% - 2 * var(--bp2-gutter)) / 4);
    background-image: linear-gradient(var(--bp2-steel-600), var(--bp2-steel-600)), linear-gradient(var(--bp2-steel-600), var(--bp2-steel-600)), linear-gradient(var(--bp2-steel-600), var(--bp2-steel-600));
    background-size: 1px 54px; background-repeat: no-repeat;
    /* % in background-position resolves against (box − 1px image): +0.25px per quarter puts them back on 400/720/1040. */
    background-position: calc(var(--bp2-gutter) + var(--q) + 0.25px) 50%, calc(var(--bp2-gutter) + 2 * var(--q) + 0.5px) 50%, calc(var(--bp2-gutter) + 3 * var(--q) + 0.75px) 50%;
  }

  /* Body blocks: 104 top + 104 bottom, heading w420 ↔ text w720 at x640. */
  .cs2-body__inner { padding: 104px var(--bp2-gutter); flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 40px; }
  .cs2-body--outcome .cs2-body__inner { padding-bottom: 104px; }
  .cs2-body__heading { width: 32.8125%; flex: none; font-size: 52px; letter-spacing: -1.04px; }   /* 420 / 1280 */
  .cs2-body__text { width: 56.25%; flex: none; }                                                  /* 720 / 1280 */
  .cs2-body__text p { font-size: 19px; line-height: 30px; }   /* 19/1.6 drawn as 30px lines (2 lines = h60) */

  /* Platform used: photo 280×210 · 48 · copy · link at the right edge, all centred. */
  .cs2-platform__inner { padding: 104px var(--bp2-gutter); flex-direction: row; align-items: center; gap: 48px; }
  .cs2-platform__photo { width: 21.875%; max-width: none; flex: none; }   /* 280 / 1280 */
  .cs2-platform__name { font-size: 52px; letter-spacing: -1.04px; }
  .cs2-platform__link { margin-left: auto; }

  /* More: header y104 (link bottom-aligned 6 above the heading box), cards at y214, gap 40. */
  .cs2-more__inner { padding: 104px var(--bp2-gutter); }
  .cs2-more__header { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; }
  .cs2-more__heading { font-size: 52px; letter-spacing: -1.04px; }
  .cs2-more__header .cs2-link { margin-bottom: 6px; }
  .cs2-more__grid { margin-top: 56px; flex-direction: row; align-items: flex-start; }
  .cs2-more__card { flex: 1 1 0; }
  .cs2-more__title { font-size: 26px; letter-spacing: -0.26px; }

  /* Index header: 104 · H1 72 · 24 · lead 19/30.4 w640 · 104 → 364. */
  .cs2-header__inner { padding: 104px var(--bp2-gutter); }
  .cs2-header__title { font-size: 72px; line-height: 72px; letter-spacing: -1.8px; }
  .cs2-header__lead { margin-top: 24px; max-width: 50%; font-size: 19px; line-height: 30px; }   /* 640 / 1280 */

  /* Index list: rows 525 tall, 96 apart; photo 700 ↔ study 520, study centred on the photo. */
  .cs2-list__inner { padding: 104px var(--bp2-gutter); gap: 96px; }
  .cs2-list__row { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; }
  .cs2-list__row--flip { flex-direction: row-reverse; }
  .cs2-list__photo { width: 54.6875%; flex: none; }   /* 700 / 1280 */
  .cs2-list__study { width: 40.625%; flex: none; }    /* 520 / 1280 */
  .cs2-list__title { font-size: 52px; letter-spacing: -1.04px; }
}