/* ==========================================================================
   Amiar & Kolesnik — case study pages
   Every rule is scoped to <main class="case-page">, so the case layout does
   not leak into the shared nav and footer, and the homepage rules from
   styles.css (.hero, .btn, .steps…) cannot override the case layout.
   Motion and hover effects come from animations.css (data-attributes).
   Reusable for every future case: only the content changes.
   ========================================================================== */

.case-page {
  --fg: #f6f7fb;
  --muted: #d4d4d6;
  --line: #f6f7fb;
  --line-subtle: #777981;
  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --container: 1280px;
  --gutter: 32px;

  --cs-panel: #151b1f;          /* client-brand panel behind line drawings */
  --cs-panel-line: rgba(254, 188, 56, 0.55);
  --cs-gap: 24px;

  display: block;
  overflow-x: clip;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: normal;
}
@media (min-width: 768px) { .case-page { --gutter: 64px; } }

.case-page :is(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; padding: 0; }
.case-page :is(ul, ol) { list-style: none; }
.case-page a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.case-page .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Type ---------- */
.case-page .mono { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.case-page .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 2.16px; text-transform: uppercase; color: var(--muted); }
.case-page .label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.case-page .h2 { font-size: 40px; line-height: 1.1; letter-spacing: -0.035em; font-weight: 600; color: var(--fg); text-wrap: balance; }
.case-page .h2--regular { font-weight: 400; letter-spacing: 0; }
@media (min-width: 768px) { .case-page .h2 { font-size: 48px; } }
/* Very narrow phones: keep long translated words (e.g. German compounds) inside the column. */
@media (max-width: 359.98px) { .case-page .h2 { font-size: 32px; } }
.case-page .lead { font-size: 16px; line-height: 1.7; color: var(--muted); }
.case-page .body-sm { font-size: 14px; line-height: 1.625; color: var(--muted); }

/* ---------- Buttons ---------- */
.case-page .btn {
  width: auto; height: auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 32px; font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 20px;
  white-space: nowrap; border: 1px solid transparent;
}
.case-page .btn--primary { background: var(--accent); color: var(--bg); }
.case-page .btn--ghost { border-color: var(--line-subtle); color: var(--fg); }

/* ---------- Hero (interactive dot field) ---------- */
.case-page .hero { height: auto; min-height: 0; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.case-page .hero .container { width: 100%; padding-top: 72px; padding-bottom: 88px; }
.case-page .hero__grid { display: grid; gap: 32px; margin-top: 56px; }
.case-page .hero__grid > * { align-self: center; max-width: 600px; }
.case-page .hero__title { margin: 0; padding-top: 32px; font-size: 48px; line-height: 1.04; letter-spacing: -0.035em; font-weight: 600; }
.case-page .hero__right { display: flex; flex-direction: column; justify-content: center; }
.case-page .hero__text { max-width: 520px; font-size: 18px; line-height: 1.7; color: var(--muted); text-wrap: pretty; }
.case-page .hero__buttons { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 48px; }
.case-page .hero__availability { display: flex; align-items: center; gap: 10px; padding-top: 24px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.44px; color: var(--muted); }
.case-page .cs-back { display: inline-flex; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.44px; text-transform: uppercase; color: var(--muted); }
@media (min-width: 768px) {
  .case-page .hero .container { padding-top: 96px; padding-bottom: 112px; }
  .case-page .hero__title { font-size: 76px; }
}
@media (min-width: 1024px) { .case-page .hero__grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Metrics ---------- */
.case-page .metrics { border-bottom: 1px solid var(--line); }
.case-page .metrics__grid { display: grid; grid-template-columns: 1fr 1fr; }
.case-page .metric { padding: 32px 24px 32px 0; }
.case-page .metric:nth-child(even) { padding-left: 24px; }
.case-page .metric__value { font-size: 36px; line-height: 40px; color: var(--fg); font-variant-numeric: tabular-nums; }
.case-page .metric__label { margin-top: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.3px; color: var(--muted); }
@media (min-width: 768px) {
  .case-page .metrics__grid { grid-template-columns: repeat(4, 1fr); }
  .case-page .metric { padding-left: 24px; }
  .case-page .metric:first-child { padding-left: 0; }
  .case-page .metric:not(:nth-child(4)) { border-right: 1px solid var(--line); }
}

/* ---------- Section head ---------- */
/* Use :nth-child(2), not :last-child — animations.js appends border spans (data-draw) at the end. */
.case-page .section { border-bottom: 1px solid var(--line); }
.case-page .section-head { display: grid; gap: 32px; align-items: start; padding: 96px 0 64px; border-bottom: 1px solid var(--line); }
.case-page .section-head > * { min-width: 0; }
.case-page .section-head .eyebrow { padding-top: 4px; }
.case-page .section-head .lead { margin-top: 24px; max-width: 646px; }
.case-page .section-head--8 .lead { max-width: 500px; line-height: 1.625; }
@media (min-width: 1024px) {
  .case-page .section-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 5vw, 64px); }
  .case-page .section-head > :first-child { grid-column: 1 / span 2; }
  .case-page .section-head > :nth-child(2) { grid-column: 3 / span 7; }
  .case-page .section-head--8 > :nth-child(2) { grid-column: 3 / span 8; }
}

/* ---------- Cards (challenge) ---------- */
.case-page .cards { display: grid; }
.case-page .card { display: flex; flex-direction: column; padding: 48px 0; }
.case-page .cards > .card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.case-page .card__title { margin-top: 16px; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; }
.case-page .card .body-sm { margin-top: 16px; }
@media (min-width: 768px) {
  .case-page .cards { grid-template-columns: 1fr 1fr; }
  .case-page .cards > .card:nth-child(odd) { padding-right: 32px; border-right: 1px solid var(--line); }
  .case-page .cards > .card:nth-child(even) { padding-left: 32px; }
}
@media (max-width: 767px) { .case-page .cards > .card:not(:nth-child(4)) { border-bottom: 1px solid var(--line); } }

/* ---------- Process (workflow) ---------- */
.case-page .steps { position: relative; display: grid; grid-template-columns: 1fr; border: 0; }
.case-page .step { padding: 48px 0; }
.case-page .step__title { margin: 16px 0 0; font-size: 20px; line-height: normal; font-weight: 400; }
.case-page .step .body-sm { margin-top: 16px; }
.case-page .process__note { margin: 0; padding: 32px 0; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; line-height: normal; letter-spacing: 1.44px; color: var(--muted); }
@media (min-width: 640px) { .case-page .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .case-page .steps { grid-template-columns: repeat(4, 1fr); }
  .case-page .step { padding-right: 32px; }
  .case-page .step + .step { border-left: 1px solid var(--line); padding-left: 32px; }
}

/* ---------- Facts row (client, market, team) ---------- */
.case-page .cs-facts { border-bottom: 1px solid var(--line); }
.case-page .cs-facts__grid { display: grid; grid-template-columns: 1fr 1fr; }
.case-page .cs-fact { padding: 24px 16px 28px 0; border-bottom: 1px solid var(--line-subtle); }
.case-page .cs-fact .label { margin-bottom: 10px; }
.case-page .cs-fact p { font-size: 15px; line-height: 1.45; color: var(--fg); }
.case-page .cs-fact p span { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.case-page .cs-fact a { color: var(--accent); }
@media (min-width: 1024px) {
  .case-page .cs-facts__grid { grid-template-columns: repeat(5, 1fr); }
  .case-page .cs-fact { border-bottom: 0; padding: 32px 24px 36px; }
  .case-page .cs-fact:first-child { padding-left: 0; }
  .case-page .cs-fact:not(:nth-child(5)) { border-right: 1px solid var(--line); }
}

/* ---------- Brand panel with a live drawing ---------- */
.case-page .cs-panel { position: relative; overflow: hidden; background: var(--cs-panel);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M 40 0 L 0 0 0 40' stroke='white' stroke-opacity='0.035' stroke-width='0.5' fill='none'/%3E%3C/svg%3E"); }
.case-page .cs-panel__corner { position: absolute; z-index: 1; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--cs-panel-line); }
.case-page .cs-panel__corner--tl { top: 16px; left: 18px; }
.case-page .cs-panel__corner--tr { top: 16px; right: 18px; }
.case-page .cs-panel__corner--bl { bottom: 14px; left: 18px; }
.case-page .cs-panel__corner--br { bottom: 14px; right: 18px; }
.case-page .cs-cover { padding: 48px 0; border-bottom: 1px solid var(--line); }
.case-page .cs-cover .cs-panel { padding: 64px 20px 56px; }
.case-page .cs-cover__inner { max-width: 980px; margin: 0 auto; }
@media (min-width: 768px) {
  .case-page .cs-cover { padding: 64px 0; }
  .case-page .cs-cover .cs-panel { padding: 96px 64px 80px; }
}

/* stage proportions for the excavator drawing (classes added by line-drawing.js) */
.case-page .u17-stage { position: relative; }
.case-page .u17-machine { width: 100%; }

/* ---------- Chapter header (Design / Development) ---------- */
.case-page .cs-chapter { padding: 96px 0 56px; border-bottom: 1px solid var(--line); }
.case-page .cs-chapter__grid { display: grid; gap: 24px; align-items: end; }
.case-page .cs-chapter__grid > * { min-width: 0; }
.case-page .cs-chapter__num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 2.16px; color: var(--accent); }
.case-page .cs-chapter__title { margin-top: 16px; font-size: clamp(32px, min(11vw, 14cqi), 64px); line-height: 0.95; letter-spacing: -0.045em; font-weight: 600; }
.case-page .cs-chapter__owner { display: flex; gap: 16px; align-items: center; }
.case-page .cs-chapter__owner img { width: 56px; height: 56px; object-fit: cover; object-position: top; filter: grayscale(.35); }
.case-page .cs-chapter__owner p { font-size: 14px; line-height: 1.5; color: var(--muted); }
.case-page .cs-chapter__owner strong { display: block; color: var(--fg); font-weight: 500; font-size: 16px; }
/* The chapter title is one word. Its size follows the column, so the longest
   translation (13 letters, e.g. "Développement") still fits on one line. */
.case-page .cs-chapter__grid > :first-child { container-type: inline-size; }
@media (min-width: 768px) { .case-page .cs-chapter__title { font-size: clamp(64px, min(11vw, 14cqi), 112px); } }
@media (min-width: 1024px) {
  .case-page .cs-chapter__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 5vw, 64px); }
  .case-page .cs-chapter__grid > :first-child { grid-column: 1 / span 7; }
  .case-page .cs-chapter__grid > :nth-child(2) { grid-column: 9 / span 4; }
}

/* ---------- Generic content block (section head + body) ---------- */
.case-page .cs-block { padding-bottom: 96px; border-bottom: 1px solid var(--line); }
.case-page .cs-block .section-head { border-bottom: 0; }

/* ---------- Two disciplines, equal weight ---------- */
.case-page .cs-split { display: grid; }
.case-page .cs-side { padding: 48px 0; }
.case-page .cs-side + .cs-side { border-top: 1px solid var(--line); }
.case-page .cs-side__role { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--accent); }
.case-page .cs-side__name { margin-top: 12px; font-size: 32px; line-height: 1.15; font-weight: 400; }
.case-page .cs-side__lead { margin-top: 16px; max-width: 460px; }
.case-page .cs-list { margin-top: 28px; border-top: 1px solid var(--line-subtle); }
.case-page .cs-list li { display: grid; grid-template-columns: 32px 1fr; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line-subtle); font-size: 15px; line-height: 1.5; color: var(--muted); }
.case-page .cs-list li::before { content: '→'; color: var(--accent); font-family: var(--font-mono); }
@media (min-width: 768px) {
  .case-page .cs-split { grid-template-columns: 1fr 1fr; }
  .case-page .cs-side:first-child { padding-right: 40px; border-right: 1px solid var(--line); }
  .case-page .cs-side + .cs-side { border-top: 0; padding-left: 40px; }
}

/* ---------- Research table ---------- */
.case-page .cs-table-wrap { overflow-x: auto; max-width: 100%; }
.case-page .cs-table { width: 100%; min-width: 680px; border-collapse: collapse; }
.case-page .cs-table th { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); text-align: left; font-family: var(--font-mono); font-weight: 400; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.case-page .cs-table td { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line-subtle); vertical-align: top; font-size: 15px; line-height: 1.5; color: var(--muted); }
.case-page .cs-table td:first-child { width: 38%; color: var(--fg); }
.case-page .cs-table td:last-child { color: var(--accent); }

/* ---------- Question chain (progressive disclosure) ---------- */
.case-page .cs-chain { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.case-page .cs-chain li { display: flex; flex-direction: column; gap: 10px; padding: 24px 16px 28px 0; border-bottom: 1px solid var(--line-subtle); }
.case-page .cs-chain .mono { color: var(--accent); }
.case-page .cs-chain h3 { font-size: 18px; line-height: 1.25; font-weight: 500; }
.case-page .cs-chain p { font-size: 13px; line-height: 1.5; color: var(--muted); }
.case-page .cs-chain li:nth-child(6) h3 { color: var(--accent); }
@media (min-width: 1024px) {
  .case-page .cs-chain { grid-template-columns: repeat(6, 1fr); }
  .case-page .cs-chain li { border-bottom: 0; padding: 32px 20px 0; }
  .case-page .cs-chain li:first-child { padding-left: 0; }
  .case-page .cs-chain li:not(:nth-child(6)) { border-right: 1px solid var(--line-subtle); }
}

/* ---------- Visual system ---------- */
.case-page .cs-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.case-page .cs-swatch__chip { height: 96px; border: 1px solid var(--line-subtle); }
.case-page .cs-swatch p { margin-top: 10px; font-size: 13px; color: var(--fg); }
.case-page .cs-swatch span { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.case-page .cs-type { display: grid; gap: 24px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line-subtle); }
.case-page .cs-type__aa { font-size: 96px; line-height: .8; letter-spacing: -0.03em; color: var(--fg); }
.case-page .cs-type .body-sm { margin-top: 12px; }
@media (min-width: 768px) {
  .case-page .cs-swatches { grid-template-columns: repeat(6, 1fr); }
  .case-page .cs-swatch__chip { height: 140px; }
  .case-page .cs-type { grid-template-columns: 1fr 1fr; }
}

/* ---------- Live drawings ---------- */
.case-page .cs-drawings { display: grid; gap: var(--cs-gap); }
.case-page .cs-drawing .cs-panel { display: flex; align-items: center; aspect-ratio: 4 / 3; padding: 44px 24px 36px; }
.case-page .cs-drawing .cs-panel > [data-drawing] { width: 100%; }
.case-page .cs-drawing h3 { margin-top: 20px; font-size: 18px; font-weight: 500; }
.case-page .cs-drawing p { margin-top: 8px; }
@media (min-width: 1024px) { .case-page .cs-drawings { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Screens ---------- */
.case-page .cs-shot { margin-top: 48px; }
.case-page .cs-shot__cap { display: grid; gap: 8px 32px; margin-bottom: 20px; }
.case-page .cs-shot__cap h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.case-page .cs-shot__frame { overflow: hidden; border: 1px solid var(--line-subtle); }
.case-page .cs-shot__frame img { width: 100%; height: auto; }
.case-page .cs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; background: #0a0e1a; }
@media (min-width: 768px) { .case-page .cs-cols { grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 16px; } }
@media (min-width: 1024px) { .case-page .cs-shot__cap { grid-template-columns: 2fr 5fr 5fr; align-items: baseline; } }

/* image + numbered notes */
.case-page .cs-annot { display: grid; gap: 32px; margin-top: 56px; }
.case-page .cs-notes { border-top: 1px solid var(--line); }
.case-page .cs-note { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line-subtle); }
.case-page .cs-note__n { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--accent); color: var(--accent); font-family: var(--font-mono); font-size: 11px; }
.case-page .cs-note h4 { font-size: 15px; font-weight: 500; }
.case-page .cs-note p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--muted); }
@media (min-width: 1024px) { .case-page .cs-annot { grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; } }

/* ---------- Tech stack ---------- */
.case-page .cs-stack { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.case-page .cs-tech { padding: 24px 16px 28px 0; border-bottom: 1px solid var(--line-subtle); }
.case-page .cs-tech .label { color: var(--accent); }
.case-page .cs-tech h3 { margin-top: 10px; font-size: 18px; font-weight: 500; line-height: 1.3; }
.case-page .cs-tech p { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--muted); }
@media (min-width: 1024px) {
  .case-page .cs-stack { grid-template-columns: repeat(4, 1fr); }
  .case-page .cs-tech { padding: 28px 24px 32px; }
  .case-page .cs-tech:nth-child(4n+1) { padding-left: 0; }
  .case-page .cs-tech:not(:nth-child(4n)) { border-right: 1px solid var(--line-subtle); }
}

/* ---------- Content model diagram ---------- */
.case-page .cs-model { display: grid; gap: 16px; }
.case-page .cs-model__col { display: grid; gap: 12px; align-content: start; }
.case-page .cs-model__col > .label { margin-bottom: 4px; }
.case-page .cs-box { padding: 20px 22px; border: 1px solid var(--line-subtle); }
.case-page .cs-box--main { border-color: var(--accent); }
.case-page .cs-box h4 { font-size: 16px; font-weight: 500; }
.case-page .cs-box > span { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.case-page .cs-box ul { margin-top: 14px; }
.case-page .cs-box li { padding: 8px 0; border-top: 1px dashed var(--line-subtle); font-size: 14px; color: var(--muted); }
.case-page .cs-model__arrow { text-align: center; font-family: var(--font-mono); font-size: 20px; color: var(--accent); transform: rotate(90deg); }
.case-page .cs-out { padding: 14px 18px; border-left: 2px solid var(--line); }
.case-page .cs-out h4 { font-size: 16px; font-weight: 500; }
.case-page .cs-out p { margin-top: 4px; font-size: 13px; color: var(--muted); }
.case-page .cs-out--hl { border-left-color: var(--accent); background: rgba(229, 206, 22, 0.06); }
.case-page .cs-out--hl h4 { color: var(--accent); }
@media (min-width: 1024px) {
  .case-page .cs-model { grid-template-columns: 5fr 1fr 5fr; align-items: center; }
  .case-page .cs-model__arrow { transform: none; }
}

/* ---------- Feature grid (3 × n) ---------- */
.case-page .cs-features { display: grid; border-top: 1px solid var(--line); }
.case-page .cs-feature { padding: 32px 0; border-bottom: 1px solid var(--line-subtle); }
.case-page .cs-feature .label { color: var(--accent); }
.case-page .cs-feature h3 { margin-top: 12px; font-size: 20px; font-weight: 500; line-height: 1.3; }
.case-page .cs-feature p { margin-top: 10px; }
@media (min-width: 768px) {
  .case-page .cs-features { grid-template-columns: 1fr 1fr; }
  .case-page .cs-feature:nth-child(odd) { padding-right: 32px; border-right: 1px solid var(--line-subtle); }
  .case-page .cs-feature:nth-child(even) { padding-left: 32px; }
}
@media (min-width: 1024px) {
  .case-page .cs-features { grid-template-columns: repeat(3, 1fr); }
  .case-page .cs-feature,
  .case-page .cs-feature:nth-child(odd),
  .case-page .cs-feature:nth-child(even) { padding: 36px 32px; border-right: 1px solid var(--line-subtle); }
  .case-page .cs-feature:nth-child(3n+1) { padding-left: 0; }
  .case-page .cs-feature:nth-child(3n) { border-right: 0; padding-right: 0; }
}

/* ---------- Outcome ---------- */
.case-page .cs-path { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.case-page .cs-path span { font-size: 18px; }
.case-page .cs-path i { font-style: normal; color: var(--accent); font-family: var(--font-mono); }
.case-page .cs-path b { padding: 4px 10px; background: var(--accent); color: var(--bg); font-weight: 500; }
.case-page .cs-quote { max-width: 820px; margin-top: 64px; font-size: 28px; line-height: 1.3; letter-spacing: -0.02em; }
.case-page .cs-quote span { color: var(--muted); }
@media (min-width: 768px) { .case-page .cs-quote { font-size: 40px; } }

/* ---------- Next step ---------- */
.case-page .cs-next { border-bottom: 1px solid var(--line); }
.case-page .cs-next .container { display: grid; gap: 40px; padding-top: 96px; padding-bottom: 96px; }
.case-page .cs-next__title { font-size: 40px; line-height: 1.05; letter-spacing: -0.035em; font-weight: 600; }
.case-page .cs-next__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
@media (min-width: 768px) { .case-page .cs-next__title { font-size: 64px; } }
@media (min-width: 1024px) {
  .case-page .cs-next .container { grid-template-columns: 7fr 5fr; align-items: end; }
  .case-page .cs-next__actions { justify-content: flex-end; }
}