/* ===========================================================
   Joanna Frydrych — main stylesheet
   =========================================================== */

:root{
  --bg: #fafafa;
  --bg-alt: #f3f3f1;
  --surface: #ffffff;
  --surface-dark: #0d0d0d;
  --ink: #0a0a0a;
  --ink-2: #2a2a2a;
  --muted: #6b6b6b;
  --line: rgba(10,10,10,0.08);
  --line-strong: rgba(10,10,10,0.16);

  --teal: #2EC4B6;
  --teal-soft: #d0f2f5;
  --pink: #facae4;
  --pink-strong: #f7a4cf;
  --mint: #cfeeed;
  --gray-soft: #e6e6e6;
  --highlight: #ffe9c2;

  --maxw: 1240px;
  --pad-x: clamp(20px, 4vw, 56px);

  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Manrope', var(--font-sans);

  --tr: 220ms cubic-bezier(.22,.61,.36,1);

  --shadow-soft: 0 1px 2px rgba(10,10,10,.04), 0 8px 24px rgba(10,10,10,.06);
  --shadow-pop: 0 12px 40px rgba(10,10,10,.12);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font: 400 17px/1.55 var(--font-sans);
  font-feature-settings: 'ss01','cv01','cv11';
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering: optimizeLegibility;
}
img,svg,video{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none; transition: color var(--tr) }
a:hover{ color:var(--ink) }
button{ font: inherit }
hr{ border:0; border-top:1px solid var(--line); margin:0 }
::selection{ background: #1a1a1a; color: #fafafa }

.skip{ position:absolute; left:-9999px; top:0 }
.skip:focus{ left:8px; top:8px; background:#000; color:#fff; padding:8px 12px; z-index:9999; border-radius:8px }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad-x) }
.muted{ color:var(--muted) }

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky; top:0; z-index:50;
  background: rgba(250,250,250,0.78);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--tr), background var(--tr);
}
.site-header[data-scrolled="1"]{ border-color: var(--line) }
.site-header__inner{
  display:flex; align-items:center; gap:24px;
  padding-block: 16px;
}
.brand{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-display);
  font-weight: 700; letter-spacing:-0.01em;
  font-size: 18px;
}
.brand__mark{ color:var(--ink); display:inline-flex }
.brand__word{ white-space:nowrap }
.brand--footer{ font-size:22px }

.site-nav{ display:flex; gap:6px; margin-inline:auto }
.site-nav a{
  padding: 10px 14px;
  font-weight: 500;
  border-radius: var(--radius-pill);
  position: relative;
  color: var(--ink-2);
}
.site-nav a:hover{ background: rgba(10,10,10,0.05) }
.site-nav a[aria-current="page"]{ color: var(--ink) }
.site-nav a[aria-current="page"]::after{
  content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px; background:var(--ink); border-radius:2px;
}
.site-header__right{ display:flex; align-items:center; gap:12px }

.lang-switch{ display:inline-flex; gap:2px; padding:4px; border:1px solid var(--line); border-radius:var(--radius-pill) }
.lang-switch__btn{ padding: 4px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .04em; }
.lang-switch__btn.is-active{ background: var(--ink); color: #fafafa }
.lang-switch__btn:hover{ color: var(--ink) }
.lang-switch__btn.is-active:hover{ color: #fafafa }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 14px 22px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--tr), background var(--tr), color var(--tr), border-color var(--tr);
  white-space: nowrap;
}
.btn--primary{ background: var(--ink); color:#fafafa }
.btn--primary:hover{ background:#1a1a1a; transform: translateY(-1px); color:#fafafa }
.btn--ghost{ background: transparent; border-color: var(--line-strong); color: var(--ink) }
.btn--ghost:hover{ background: var(--ink); color:#fafafa }
.btn--sm{ padding: 9px 16px; font-size: 14px }

.link-arrow{
  display:inline-flex; align-items:center; gap:6px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid transparent;
}
.link-arrow:hover{ border-color: var(--ink) }

.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--ink); margin:4px 0; transition: transform var(--tr) }
.m-nav{ display:none; flex-direction:column; gap:8px; padding: 12px var(--pad-x) 24px; border-top:1px solid var(--line); background: var(--bg) }
.m-nav a{ padding: 10px 0; font-size: 22px; font-family: var(--font-display); font-weight: 600 }
.m-nav__lang{ display:flex; gap:8px; margin-top:12px }
.m-nav__lang a{ font-size:13px; padding:6px 12px; border:1px solid var(--line); border-radius:var(--radius-pill) }
.m-nav__lang a.is-active{ background: var(--ink); color:#fafafa }

/* ---------- Hero ---------- */
.eyebrow{
  font: 500 12px/1 var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
}
.hero{ padding: clamp(60px, 12vw, 140px) 0 clamp(36px, 8vw, 80px); position: relative; overflow: hidden }
.hero__title{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: clamp(36px, 7vw, 88px);
  margin: 0 0 28px;
  max-width: 18ch;
}
.hero__lead{ font-size: clamp(17px, 1.4vw, 22px); color: var(--ink-2); max-width: 60ch; margin: 0 0 24px }
.hero__meta{ display:flex; flex-wrap:wrap; gap:16px 24px; align-items:center; margin-top: 16px }
.hero--home .hero__title{ max-width: 16ch }
.hero--about .hero__title{ max-width: 22ch }
.hero--work .hero__title{ max-width: 20ch }

.hero__decor{ position:absolute; inset:0; pointer-events:none; z-index: 0 }
.hero__dot{ position:absolute; border-radius:50%; opacity:.45; filter: blur(40px) }
.hero__dot--teal{ width: 300px; height:300px; background: var(--teal-soft); top: -80px; right: -40px }
.hero__dot--pink{ width: 220px; height:220px; background: var(--pink); bottom: 10px; left: 18%; opacity:.35 }
.hero__dot--mint{ width: 180px; height:180px; background: var(--mint); top: 40%; right: 22%; opacity:.4 }
.hero .wrap{ position:relative; z-index:1 }

/* ---------- Section heads ---------- */
.section-head{ max-width: 64ch; margin: 0 0 48px }
.section-head__title{ font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 4vw, 44px); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 16px }
.section-head__lead{ font-size: 18px; color: var(--ink-2); margin: 0 }

/* ---------- Work grid (home + work index) ---------- */
.work-list{ padding: clamp(48px,8vw,96px) 0 }
.work-grid{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 32px;
}
.work-card{ position: relative }
.work-card__link{ display: block; border-radius: var(--radius-lg); overflow: hidden }
.work-card__media{
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/11;
}
.work-card__media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms cubic-bezier(.22,.61,.36,1);
}
.work-card:hover .work-card__media img{ transform: scale(1.03) }
.work-card__body{ padding: 22px 4px 8px }
.work-card__tags{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color: var(--muted); margin: 0 0 10px }
.work-card__title{ font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); margin: 0 0 6px; letter-spacing: -0.01em }
.work-card__sub{ color: var(--ink-2); margin: 0 0 14px }
.work-list--all .work-grid{ grid-template-columns: repeat(2, 1fr); gap: 40px 32px }

/* ---------- Services ---------- */
.services{ padding: clamp(48px,8vw,96px) 0; background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.services--about{ background: transparent; border: 0 }
.services-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px }
.service-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px 24px; min-height: 220px; display:flex; flex-direction: column; gap: 10px; position: relative }
.service-card__num{ font: 500 12px/1 var(--font-sans); letter-spacing: .18em; color: var(--muted); }
.service-card h3{ font-family: var(--font-display); font-weight: 700; font-size: 22px; margin: 8px 0 0; letter-spacing: -0.01em }
.service-card p{ color: var(--ink-2); margin: 0 }

/* ---------- Big statement ---------- */
.big-statement{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 4vw, 48px); line-height: 1.15; letter-spacing: -0.015em;
  margin: 0 0 22px; max-width: 26ch;
}
.big-statement__lead{ color: var(--ink-2); font-size: 19px; max-width: 60ch }
.about-mission{ padding: clamp(48px,8vw,120px) 0 }

/* ---------- Process list ---------- */
.process{ padding: clamp(48px,8vw,96px) 0; background: var(--surface-dark); color: #f3f3f3 }
.process .eyebrow{ color: rgba(255,255,255,.5) }
.process .section-head__title{ color: #f7f7f7 }
.process-list{ list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px }
.process-list li{ background: rgba(255,255,255,.04); padding: 28px 24px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.08) }
.process-list__num{ font-family: var(--font-display); font-weight: 700; font-size: 32px; color: var(--teal) }
.process-list__body h3{ font-family: var(--font-display); font-size: 22px; font-weight: 700; margin: 14px 0 8px; color: #f7f7f7 }
.process-list__body p{ color: rgba(255,255,255,0.72); margin: 0; font-size: 15px }

/* ---------- About CTA ---------- */
.about-cta{ padding: clamp(48px,8vw,96px) 0 }

/* ---------- Portrait ---------- */
.portrait .wrap{ padding-block: 16px }
.portrait img{ width:100%; border-radius: var(--radius-lg); object-fit: cover; max-height: 70vh }

/* ---------- Contact ---------- */
.contact{ padding: 0 0 clamp(48px,8vw,96px) }
.contact__grid{ display: grid; grid-template-columns: 1fr 2fr; gap: 56px; align-items: start }
.contact__info h3{ font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 0 0 6px; letter-spacing: -0.01em }
.contact__info a{ font-size: 19px; border-bottom: 1px solid var(--line); padding-bottom: 1px }

.contact-form{ display: grid; gap: 16px; max-width: 640px }
.field{ display: grid; gap: 6px }
.field span{ font-size: 13px; color: var(--muted); font-weight: 500; letter-spacing: 0.04em }
.field input, .field textarea{
  width: 100%; padding: 14px 16px;
  font: 400 16px/1.4 var(--font-sans); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px;
  transition: border-color var(--tr), box-shadow var(--tr);
}
.field input:focus, .field textarea:focus{
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(10,10,10,.07);
}
.alert{ padding: 14px 16px; border-radius: 14px; margin-bottom: 16px }
.alert--success{ background: var(--teal-soft); color: #0e3a36 }
.alert--error{ background: #ffe1e1; color: #6f2222 }

/* ---------- CTA section + footer ---------- */
.cta-section{ padding: clamp(60px,9vw,140px) 0; background: var(--surface-dark); color: #f3f3f3 }
.cta-section .eyebrow{ color: rgba(255,255,255,.5) }
.cta-section__title{ font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(36px, 6vw, 76px); line-height: 1.04; margin: 0 0 28px; max-width: 22ch; color: #f7f7f7 }
.cta-section .btn--primary{ background:#fafafa; color:#0a0a0a }
.cta-section .btn--primary:hover{ background:#fff; color:#0a0a0a }

.site-footer{ background:#0a0a0a; color:#bcbcbc; padding: clamp(40px,6vw,80px) 0 }
.site-footer__inner{ display:grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.08) }
.site-footer__brand p{ max-width: 50ch; color: #969696 }
.site-footer__brand .brand--footer{ color:#f7f7f7; margin-bottom: 8px }
.site-footer__nav, .site-footer__contact{ display: grid; gap: 8px; align-content:start }
.site-footer h3{ font-family: var(--font-display); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color:#f7f7f7; margin:0 0 8px }
.site-footer a{ color:#bcbcbc }
.site-footer a:hover{ color:#fff }
.site-footer__bottom{ display:flex; justify-content:space-between; padding-top: 24px; gap: 16px; flex-wrap: wrap }
.site-footer__bottom small{ color:#7a7a7a }

/* ===========================================================
   Case study
   =========================================================== */
.case-hero{ padding: clamp(40px, 8vw, 96px) 0; background: var(--surface-dark); color: #f3f3f3; position: relative }
.case-hero .eyebrow{ color: rgba(255,255,255,.55) }
.case-hero__grid{ display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center }
.case-hero__title{ font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 5vw, 64px); line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 22px; color:#f7f7f7 }
.case-hero__desc{ font-size: clamp(16px, 1.2vw, 19px); color: rgba(255,255,255,.78); max-width: 56ch; margin: 0 0 28px }
.case-hero__meta{ display:grid; grid-template-columns: repeat(2, max-content); gap: 16px 48px; margin: 0 }
.case-hero__meta dt{ font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 4px }
.case-hero__meta dd{ font-weight: 600; margin: 0; color: #f7f7f7 }
.case-hero__media{ aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; background: rgba(255,255,255,0.04) }
.case-hero__media img{ width:100%; height:100%; object-fit: cover }

.case-body{ padding: clamp(48px,8vw,120px) 0 }
.cs-block + .cs-block{ margin-top: clamp(48px, 7vw, 96px) }
.cs-wrap{ max-width: 1140px; margin: 0 auto; padding-inline: var(--pad-x) }
.cs-narrow{ max-width: 760px }
.cs-section-title{ font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 12px }
.cs-section-sub{ color: var(--ink-2); font-size: 18px; max-width: 60ch; margin: 0 0 32px }

/* eyebrow block */
.cs-eyebrow-tag{
  display:inline-block; padding: 6px 12px; border:1px solid var(--line); border-radius: var(--radius-pill);
  font: 600 12px/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2);
}

/* heading block */
.cs-heading.is-center .cs-wrap{ text-align: center }
.cs-heading-title{ font-family: var(--font-display); font-weight: 700; line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 12px }
.cs-heading h1.cs-heading-title{ font-size: clamp(34px, 5vw, 56px) }
.cs-heading h2.cs-heading-title{ font-size: clamp(28px, 4vw, 44px) }
.cs-heading h3.cs-heading-title{ font-size: clamp(22px, 2.6vw, 28px) }
.cs-heading-sub{ color: var(--ink-2); font-size: 18px; max-width: 60ch; margin: 0 }

/* paragraph + lead */
.cs-paragraph p{ font-size: 18px; line-height: 1.7; color: var(--ink-2); margin: 0 }
.cs-lead-text{ font-size: clamp(20px, 2vw, 26px); line-height: 1.4; color: var(--ink); font-family: var(--font-display); font-weight: 500; margin: 0 }

/* two-column problem/goal */
.cs-twocol-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px }
.cs-twocol-card{ border-radius: var(--radius-lg); padding: 28px 28px 24px; border: 1px solid var(--line); background: var(--surface) }
.cs-twocol-card--problem{ background: linear-gradient(180deg, var(--pink) 0%, #fff 80%) }
.cs-twocol-card--goal{ background: linear-gradient(180deg, var(--teal-soft) 0%, #fff 80%) }
.cs-twocol-card h3{ font-family: var(--font-display); font-size: 22px; margin: 0 0 14px; letter-spacing: -0.01em }
.cs-twocol-card ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.cs-twocol-card li{ position: relative; padding-left: 22px; color: var(--ink-2); font-size: 17px }
.cs-twocol-card li::before{ content:""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 2px; background: var(--ink) }

/* image block */
.cs-image .cs-figure{ border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-alt) }
.cs-image .cs-figure img{ width: 100%; height: auto; display: block }
.cs-image figcaption{ padding: 14px 4px 0; color: var(--muted); font-size: 14px }
.cs-image--narrow .cs-wrap{ max-width: 800px }
.cs-image--wide .cs-wrap{ max-width: 1320px }
.cs-image--full .cs-wrap{ max-width: none; padding: 0 }
.cs-image--full .cs-figure{ border-radius: 0 }

/* image-text */
.cs-image-text-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center }
.cs-image-text.is-right .cs-image-text-grid{ direction: rtl }
.cs-image-text.is-right .cs-image-text-grid > *{ direction: ltr }
.cs-image-text-media{ border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--bg-alt) }
.cs-image-text-media img{ width:100%; height:100%; object-fit: cover }
.cs-image-text-body h3{ font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 32px); margin: 0 0 14px; line-height:1.1; letter-spacing:-0.015em }
.cs-image-text-body p{ color: var(--ink-2); font-size: 17px; line-height:1.6; margin: 0 0 12px }
.cs-image-text-body .cs-caption{ color: var(--muted); font-size: 13px; line-height: 1.5; margin: 16px 0 0 }

/* gallery */
.cs-gallery-grid{ display:grid; gap: 16px }
.cs-cols-2{ grid-template-columns: repeat(2, 1fr) }
.cs-cols-3{ grid-template-columns: repeat(3, 1fr) }
.cs-cols-4{ grid-template-columns: repeat(4, 1fr) }
.cs-gallery-grid figure{ margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--bg-alt); aspect-ratio: 4/3 }
.cs-gallery-grid img{ width:100%; height:100%; object-fit: cover }

/* quote */
.cs-quote blockquote{ margin:0; padding: 0 }
.cs-quote p{ font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 12px }
.cs-quote cite{ font-style: normal; color: var(--muted); font-size: 14px; letter-spacing: .04em }

/* list */
.cs-list-items{ margin: 0; padding-left: 0; list-style: none; display: grid; gap: 10px }
.cs-list-items li{ padding-left: 22px; position: relative; font-size: 17px; color: var(--ink-2) }
.cs-list-items--bullet li::before{ content:""; position:absolute; left:0; top:10px; width:8px; height:8px; background:var(--ink); border-radius: 2px }
.cs-list-items--check li::before{ content:"✓"; position:absolute; left:0; top:0; color: var(--teal); font-weight:700 }
.cs-list-items--numbered{ counter-reset: nums; }
.cs-list-items--numbered li{ counter-increment: nums }
.cs-list-items--numbered li::before{ content: counter(nums, decimal-leading-zero) "."; position:absolute; left:0; top:0; color: var(--muted); font-weight:600 }

/* charts */
.cs-chart-title{ font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); letter-spacing:-0.01em; margin: 0 0 8px }
.cs-chart-sub{ color: var(--ink-2); margin: 0 0 22px; max-width: 60ch }
.cs-chart-figure{ display: grid; grid-template-columns: minmax(220px, 360px) 1fr; gap: 32px; align-items: center }
.cs-donut{ width: 100%; height: auto }
.cs-chart-legend{ list-style:none; padding:0; margin:0; display: grid; grid-template-columns: repeat(2, max-content); gap: 12px 32px }
.cs-chart-legend li{ display: flex; align-items: center; gap: 8px; font-size: 16px; }
.cs-legend-dot{ width: 14px; height: 14px; border-radius:50%; flex-shrink:0 }
.cs-legend-label{ color: var(--ink-2) }
.cs-legend-value{ font-weight: 700; color: var(--ink) }
.cs-chart-caption{ color: var(--muted); margin: 22px 0 0; font-size: 13px; max-width: 80ch }

.cs-bars{ list-style: none; padding: 0; margin: 0; display: grid; gap: 14px }
.cs-bar{ display: grid; grid-template-columns: 220px 1fr 80px; gap: 16px; align-items: center; font-size: 15px }
.cs-bar-label{ color: var(--ink-2) }
.cs-bar-track{ height: 14px; border-radius: 999px; background: var(--bg-alt); overflow: hidden; position: relative }
.cs-bar-fill{ display:block; height:100%; width: var(--w, 0%); border-radius: 999px; transition: width 800ms cubic-bezier(.22,.61,.36,1) }
.cs-bar-value{ font-weight: 700; text-align: right }

.cs-line{ width:100%; height: clamp(180px, 28vw, 260px); background: var(--bg-alt); border-radius: var(--radius); padding: 12px }
.cs-line-labels{ list-style:none; padding:0; margin: 8px 0 0; display: flex; justify-content: space-between; color: var(--muted); font-size: 13px }

/* stat grid */
.cs-stats-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px }
.cs-stat-card{ border-radius: var(--radius-lg); padding: 32px 28px; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px }
.cs-stat-value{ font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -0.025em }
.cs-stat-label{ font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink) }

/* persona */
.cs-personas-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px }
.cs-persona{
  display: grid; grid-template-columns: 120px 1fr; gap: 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px; align-items: start;
}
.cs-persona-img{ width: 120px; height: 120px; border-radius: 50%; overflow: hidden; background: var(--bg-alt) }
.cs-persona-img img{ width:100%; height:100%; object-fit: cover }
.cs-persona-body h4{ font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 0 0 4px }
.cs-persona-role{ font-size: 13px; color: var(--muted); margin: 0 0 12px }
.cs-persona-desc, .cs-persona-needs{ color: var(--ink-2); font-size: 15px; margin: 0 0 8px; line-height: 1.5 }

/* feature grid */
.cs-features-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px }
.cs-feature{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 26px }
.cs-feature-num{ font: 600 12px/1 var(--font-sans); letter-spacing: .18em; color: var(--teal); text-transform: uppercase }
.cs-feature h4{ font-family: var(--font-display); font-weight: 700; font-size: 22px; margin: 12px 0 8px; line-height: 1.15; letter-spacing: -0.01em }
.cs-feature p{ color: var(--ink-2); margin: 0 }

/* process steps (inside case) */
.cs-process-list{ list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px }
.cs-process-list li{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.cs-process-num{ font-family: var(--font-display); font-weight: 700; color: var(--teal) }
.cs-process-body h4{ margin: 12px 0 6px; font-family: var(--font-display) }

/* design system */
.cs-ds-image img{ width: 100%; border-radius: var(--radius-lg); margin-bottom: 24px }
.cs-ds-colors{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px }
.cs-ds-swatch{ display: grid; gap: 6px; padding: 16px; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius) }
.cs-ds-chip{ width: 100%; aspect-ratio: 16/9; border-radius: 12px; display: block; margin-bottom: 8px }
.cs-ds-swatch strong{ font-family: var(--font-display); font-size: 15px }
.cs-ds-swatch code{ font: 500 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color: var(--muted) }
.cs-ds-type{ display: grid; gap: 8px }
.cs-ds-type-row{ display: grid; grid-template-columns: 220px 1fr; padding: 14px 16px; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); align-items: center }
.cs-ds-type-label{ color: var(--muted); font-size: 13px }
.cs-ds-type-sample{ font-size: 32px; font-weight: 700 }
.cs-ds-notes{ color: var(--ink-2); font-size: 16px; margin-top: 18px }

/* iteration */
.cs-iteration-grid{ display:grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center }
.cs-iteration-media{ border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-alt) }
.cs-iteration-media img{ width:100%; height:auto }
.cs-iteration-tag{ display:inline-block; padding: 4px 10px; border-radius: 999px; background: var(--teal-soft); color: #145952; font: 600 12px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase }
.cs-iteration-body h4{ font-family: var(--font-display); font-weight: 700; font-size: clamp(20px,2vw,26px); margin: 12px 0 10px }
.cs-iteration-body p{ color: var(--ink-2) }

/* divider / cta */
.cs-divider hr{ border-top: 1px solid var(--line) }
.cs-cta-card{ background: var(--surface-dark); color: #f3f3f3; border-radius: var(--radius-lg); padding: clamp(32px,4vw,64px); text-align: center }
.cs-cta-card h3{ font-family: var(--font-display); font-weight: 700; font-size: clamp(24px,3vw,36px); margin: 0 0 12px; color: #f7f7f7 }
.cs-cta-card p{ color: rgba(255,255,255,.78); margin: 0 0 22px; font-size: 16px }

/* next-project */
.case-next{ padding: clamp(40px,6vw,80px) 0; border-top: 1px solid var(--line) }
.case-next__card{ display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface) }
.case-next__media{ border-radius: var(--radius); overflow: hidden; background: var(--bg-alt); aspect-ratio: 16/10 }
.case-next__media img{ width:100%; height:100%; object-fit: cover }
.case-next__body h3{ font-family: var(--font-display); font-weight: 700; font-size: clamp(22px,2.4vw,30px); margin: 0 0 8px; letter-spacing:-0.01em }
.case-next__body p{ color: var(--ink-2); margin: 0 0 12px }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .work-grid{ grid-template-columns: 1fr; gap: 28px }
  .services-grid{ grid-template-columns: repeat(2, 1fr) }
  .process-list{ grid-template-columns: repeat(2, 1fr) }
  .case-hero__grid{ grid-template-columns: 1fr; gap: 32px }
  .cs-image-text-grid{ grid-template-columns: 1fr; gap: 24px }
  .cs-image-text.is-right .cs-image-text-grid{ direction: ltr }
  .cs-twocol-grid{ grid-template-columns: 1fr }
  .cs-personas-grid{ grid-template-columns: 1fr }
  .cs-features-grid{ grid-template-columns: 1fr }
  .cs-stats-grid{ grid-template-columns: repeat(2,1fr) }
  .cs-process-list{ grid-template-columns: repeat(2,1fr) }
  .cs-chart-figure{ grid-template-columns: 1fr; max-width: 420px; margin: 0 auto }
  .cs-bar{ grid-template-columns: 140px 1fr 60px }
  .case-next__card{ grid-template-columns: 1fr }
  .site-footer__inner{ grid-template-columns: 1fr; gap: 16px }
  .contact__grid{ grid-template-columns: 1fr }
  .cs-ds-colors{ grid-template-columns: repeat(2,1fr) }
}
@media (max-width: 720px){
  .site-nav{ display:none }
  .nav-toggle{ display:block; margin-left:auto }
  .site-header__right{ gap: 8px }
  .lang-switch{ display: none }
  .m-nav.is-open{ display:flex }
  .work-list--all .work-grid{ grid-template-columns: 1fr }
  .services-grid{ grid-template-columns: 1fr }
  .process-list{ grid-template-columns: 1fr }
  .cs-stats-grid{ grid-template-columns: 1fr }
  .cs-process-list{ grid-template-columns: 1fr }
  .cs-bar{ grid-template-columns: 1fr; gap: 6px }
  .cs-bar-label, .cs-bar-value{ font-size: 13px }
  .cs-bar-value{ text-align: left }
  .cs-persona{ grid-template-columns: 1fr }
  .cs-persona-img{ width: 96px; height: 96px }
  .cs-ds-type-row{ grid-template-columns: 1fr; gap: 4px }
}

/* ===========================================================
   Case-study Timeline (TOC) — desktop sidebar + mobile FAB
   =========================================================== */

/* Make body relative so TOC can position inside */
.case-body{ position: relative }
.case-body__content{ scroll-margin-top: 90px }

/* Anchor target offset for sticky header */
.cs-block[id]{ scroll-margin-top: 90px }

/* Top progress bar (visible always inside case body) */
.case-progress{ position: fixed; top: 64px; left: 0; right: 0; height: 2px; background: transparent; z-index: 30; pointer-events: none }
.case-progress__fill{ display: block; height: 100%; width: var(--p, 0%); background: var(--ink); transition: width 120ms linear }

/* Vertical timeline (desktop) */
.case-toc{
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  max-height: calc(100vh - 140px);
  display: none;
}
.case-toc__inner{ position: relative; padding-left: 22px; max-height: 70vh; overflow: hidden }
.case-toc__label{
  font: 600 11px/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 14px 0;
}
.case-toc__list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; max-height: 60vh; overflow-y: auto; scrollbar-width: thin; mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%) }
.case-toc__rail{ position: absolute; left: 5px; top: 30px; bottom: 0; width: 2px; background: var(--line-strong); border-radius: 2px; overflow: hidden }
.case-toc__rail-fill{ display:block; width:100%; height: var(--p, 0%); background: var(--ink); border-radius: 2px; transition: height 200ms cubic-bezier(.22,.61,.36,1) }

.case-toc__item a{
  display: grid;
  grid-template-columns: 26px 14px auto;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  border-radius: 8px;
  padding: 4px 6px 4px 0;
  margin-left: -6px;
  transition: color var(--tr), background var(--tr);
}
.case-toc__num{
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: .04em; color: var(--muted); text-align: right;
}
.case-toc__dot{
  width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--bg);
  margin-left: -2px; box-shadow: 0 0 0 4px var(--bg);
  transition: background var(--tr), border-color var(--tr), transform var(--tr);
}
.case-toc__label-text{
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: max-width 240ms cubic-bezier(.22,.61,.36,1), color var(--tr);
}

.case-toc__item a:hover{ color: var(--ink) }
.case-toc__item a:hover .case-toc__dot{ border-color: var(--ink) }

.case-toc__item.is-active a{ color: var(--ink) }
.case-toc__item.is-active .case-toc__dot{ background: var(--ink); border-color: var(--ink); transform: scale(1.15) }
.case-toc__item.is-active .case-toc__num{ color: var(--ink) }

/* Mobile FAB + bottom sheet */
.case-toc-fab{
  position: fixed; right: 16px; bottom: 16px; z-index: 35;
  display: none; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--ink); color: #fafafa; border: 0; border-radius: 999px;
  font: 600 13px/1 var(--font-sans);
  box-shadow: 0 8px 24px rgba(10,10,10,.25);
  cursor: pointer;
  transition: transform var(--tr), opacity var(--tr);
}
.case-toc-fab:hover{ transform: translateY(-1px) }
.case-toc-fab.is-hidden{ opacity: 0; pointer-events: none; transform: translateY(20px) }
.case-toc-fab__num{ font-variant-numeric: tabular-nums; opacity: .85; font-weight: 700 }
.case-toc-fab__chev{ font-size: 14px; opacity: .85 }

.case-toc-sheet{ position: fixed; inset: 0; z-index: 60; display: none }
.case-toc-sheet[hidden]{ display: none !important }
.case-toc-sheet:not([hidden]){ display: block }
.case-toc-sheet__backdrop{ position: absolute; inset: 0; background: rgba(10,10,10,.55); animation: fadeIn 200ms ease both }
.case-toc-sheet__panel{
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--bg); border-radius: 24px 24px 0 0;
  max-height: 80vh; display: flex; flex-direction: column;
  animation: slideUp 320ms cubic-bezier(.22,.61,.36,1) both;
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -10px 40px rgba(0,0,0,.2);
}
@keyframes slideUp { from { transform: translateY(100%) } to { transform: translateY(0) } }
@keyframes fadeIn  { from { opacity: 0 } to { opacity: 1 } }
.case-toc-sheet__head{ display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 10px; border-bottom: 1px solid var(--line) }
.case-toc-sheet__head h2{ margin: 0; font-family: var(--font-display); font-size: 18px; letter-spacing: -0.01em }
.case-toc-sheet__close{ background: transparent; border: 0; font-size: 18px; cursor: pointer; padding: 8px; color: var(--ink) }
.case-toc-sheet__list{ list-style: none; margin: 0; padding: 8px 0 24px; overflow-y: auto; flex: 1 }
.case-toc-sheet__list li a{
  display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center;
  padding: 14px 20px; color: var(--ink); font-weight: 500; font-size: 16px;
  transition: background var(--tr);
}
.case-toc-sheet__list li a:hover, .case-toc-sheet__list li a.is-active{ background: rgba(10,10,10,.05) }
.case-toc-sheet__list li a.is-active .case-toc__num{ color: var(--ink) }
.case-toc-sheet__list .case-toc__num{ text-align: center; padding: 4px 6px; border-radius: 6px; background: rgba(10,10,10,.06); font-size: 11px }

/* Show timeline only on wide enough screens, otherwise FAB */
@media (min-width: 1280px){
  .case-toc{ display: block }
  /* Constrain main content width so timeline doesn't overlap text */
  .case-body__content .cs-wrap{ padding-right: max(var(--pad-x), 240px) }
  .case-body__content .cs-image--wide .cs-wrap,
  .case-body__content .cs-image--full .cs-wrap{ padding-right: var(--pad-x) }
}
@media (max-width: 1279.98px){
  .case-toc-fab{ display: inline-flex }
}
@media (max-width: 720px){
  .case-progress{ top: 56px }
  .case-toc-fab{ right: 12px; bottom: 12px; padding: 10px 14px; font-size: 12px }
  .case-toc-fab__label{ display: none }
  .case-toc-sheet__panel{ max-height: 75vh }
  .case-toc-sheet__list li a{ font-size: 15px; padding: 12px 18px }
  .cs-block[id]{ scroll-margin-top: 70px }
}
@media (prefers-reduced-motion: reduce){
  .case-toc-sheet__panel{ animation: none }
  .case-toc-sheet__backdrop{ animation: none }
  .case-toc__rail-fill, .case-progress__fill{ transition: none }
}

/* ===========================================================
   Entrance animations (scroll-triggered fade + rise)
   =========================================================== */
.reveal{ opacity: 0; transform: translateY(14px); transition: opacity 600ms cubic-bezier(.22,.61,.36,1), transform 600ms cubic-bezier(.22,.61,.36,1) }
.reveal.is-in{ opacity: 1; transform: none }
.reveal-stagger > *{ opacity: 0; transform: translateY(12px); transition: opacity 600ms cubic-bezier(.22,.61,.36,1), transform 600ms cubic-bezier(.22,.61,.36,1) }
.reveal-stagger.is-in > *{ opacity: 1; transform: none }
.reveal-stagger.is-in > *:nth-child(1){ transition-delay: 0ms }
.reveal-stagger.is-in > *:nth-child(2){ transition-delay: 80ms }
.reveal-stagger.is-in > *:nth-child(3){ transition-delay: 160ms }
.reveal-stagger.is-in > *:nth-child(4){ transition-delay: 240ms }
.reveal-stagger.is-in > *:nth-child(5){ transition-delay: 320ms }
.reveal-stagger.is-in > *:nth-child(6){ transition-delay: 400ms }

/* ---------- Per-block motion archetypes (case-study blocks) ---------- */
.cs-block.m-fade{ opacity: 0; transition: opacity 700ms cubic-bezier(.22,.61,.36,1) }
.cs-block.m-fade.is-in{ opacity: 1 }

.cs-block.m-rise{ opacity: 0; transform: translateY(14px); transition: opacity 600ms cubic-bezier(.22,.61,.36,1), transform 600ms cubic-bezier(.22,.61,.36,1) }
.cs-block.m-rise.is-in{ opacity: 1; transform: none }

.cs-block.m-rise-lg{ opacity: 0; transform: translateY(28px); transition: opacity 800ms cubic-bezier(.22,.61,.36,1), transform 800ms cubic-bezier(.22,.61,.36,1) }
.cs-block.m-rise-lg.is-in{ opacity: 1; transform: none }

.cs-block.m-zoom{ opacity: 0; transition: opacity 800ms cubic-bezier(.22,.61,.36,1) }
.cs-block.m-zoom .cs-figure img,
.cs-block.m-zoom .cs-image-text-media img{ transform: scale(1.04); transition: transform 900ms cubic-bezier(.22,.61,.36,1) }
.cs-block.m-zoom.is-in{ opacity: 1 }
.cs-block.m-zoom.is-in .cs-figure img,
.cs-block.m-zoom.is-in .cs-image-text-media img{ transform: none }

.cs-block.m-stagger{ opacity: 0; transition: opacity 500ms cubic-bezier(.22,.61,.36,1) }
.cs-block.m-stagger.is-in{ opacity: 1 }
.cs-block.m-stagger .cs-features-grid > *,
.cs-block.m-stagger .cs-personas-grid > *,
.cs-block.m-stagger .cs-process-list > li,
.cs-block.m-stagger .cs-list-items > li,
.cs-block.m-stagger .cs-twocol-grid > *,
.cs-block.m-stagger .cs-gallery-grid > *{
  opacity: 0; transform: translateY(10px);
  transition: opacity 500ms cubic-bezier(.22,.61,.36,1), transform 500ms cubic-bezier(.22,.61,.36,1);
}
.cs-block.m-stagger.is-in .cs-features-grid > *,
.cs-block.m-stagger.is-in .cs-personas-grid > *,
.cs-block.m-stagger.is-in .cs-process-list > li,
.cs-block.m-stagger.is-in .cs-list-items > li,
.cs-block.m-stagger.is-in .cs-twocol-grid > *,
.cs-block.m-stagger.is-in .cs-gallery-grid > *{ opacity: 1; transform: none }

/* Hero — fade in on load */
@keyframes heroIn { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
.hero .eyebrow{ animation: heroIn 700ms cubic-bezier(.22,.61,.36,1) both }
.hero__title{ animation: heroIn 800ms 80ms cubic-bezier(.22,.61,.36,1) both }
.hero__lead{ animation: heroIn 800ms 160ms cubic-bezier(.22,.61,.36,1) both }
.hero__meta{ animation: heroIn 800ms 220ms cubic-bezier(.22,.61,.36,1) both }
.case-hero .eyebrow{ animation: heroIn 700ms cubic-bezier(.22,.61,.36,1) both }
.case-hero__title{ animation: heroIn 800ms 80ms cubic-bezier(.22,.61,.36,1) both }
.case-hero__desc{ animation: heroIn 800ms 160ms cubic-bezier(.22,.61,.36,1) both }
.case-hero__meta{ animation: heroIn 800ms 220ms cubic-bezier(.22,.61,.36,1) both }
.case-hero__media{ animation: heroIn 900ms 220ms cubic-bezier(.22,.61,.36,1) both }

/* Donut: stroke-draw entrance */
.cs-donut path{
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 1200ms cubic-bezier(.22,.61,.36,1);
}
.cs-chart.is-in .cs-donut path{ stroke-dashoffset: 0 }

/* Bar: fill width animates from 0 when in view */
.cs-bar-fill{ width: 0; }
.cs-chart.is-in .cs-bar-fill{ width: var(--w, 0%); transition: width 900ms cubic-bezier(.22,.61,.36,1) }

/* Line: draw in */
.cs-line polyline{ stroke-dasharray: 1500; stroke-dashoffset: 1500; transition: stroke-dashoffset 1500ms cubic-bezier(.22,.61,.36,1) }
.cs-line circle{ opacity: 0; transition: opacity 300ms ease 800ms }
.cs-chart.is-in .cs-line polyline{ stroke-dashoffset: 0 }
.cs-chart.is-in .cs-line circle{ opacity: 1 }

/* Stat cards subtle pop */
.cs-stat-card{ transform-origin: center; }
.cs-stats.is-in .cs-stat-card{ animation: popIn 600ms cubic-bezier(.22,.61,.36,1) both }
.cs-stats.is-in .cs-stat-card:nth-child(2){ animation-delay: 80ms }
.cs-stats.is-in .cs-stat-card:nth-child(3){ animation-delay: 160ms }
.cs-stats.is-in .cs-stat-card:nth-child(4){ animation-delay: 240ms }
@keyframes popIn { from { opacity: 0; transform: scale(.96) translateY(8px) } to { opacity: 1; transform: none } }

/* Mobile chart polish */
@media (max-width: 720px){
  .cs-chart-figure{ grid-template-columns: 1fr; gap: 18px; max-width: 100% }
  .cs-donut{ max-width: 280px; margin: 0 auto }
  .cs-chart-legend{ grid-template-columns: 1fr 1fr; gap: 8px 16px }
  .cs-chart-legend li{ font-size: 14px }
  .cs-stats-grid{ gap: 12px }
  .cs-stat-card{ min-height: auto; padding: 24px 22px }
  .cs-stat-value{ font-size: 38px }
  .cs-stat-label{ font-size: 18px }
  .cs-process-list{ grid-template-columns: 1fr }
  .cs-features-grid{ gap: 16px }
  .cs-personas-grid{ gap: 16px }
  .cs-twocol-card{ padding: 22px 22px 20px }
  .cs-iteration-grid{ grid-template-columns: 1fr; gap: 18px }
  .cs-line{ height: 200px }
  .case-hero{ padding: 48px 0 32px }
  .case-hero__meta{ grid-template-columns: 1fr; gap: 12px }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important }
  .reveal, .reveal-stagger > *{ opacity: 1; transform: none }
  .cs-block.m-fade, .cs-block.m-rise, .cs-block.m-rise-lg, .cs-block.m-zoom, .cs-block.m-stagger{ opacity: 1; transform: none }
  .cs-block.m-zoom .cs-figure img, .cs-block.m-zoom .cs-image-text-media img{ transform: none }
  .cs-block.m-stagger .cs-features-grid > *, .cs-block.m-stagger .cs-personas-grid > *,
  .cs-block.m-stagger .cs-process-list > li, .cs-block.m-stagger .cs-list-items > li,
  .cs-block.m-stagger .cs-twocol-grid > *, .cs-block.m-stagger .cs-gallery-grid > *{ opacity: 1; transform: none }
  .cs-donut path, .cs-line polyline{ stroke-dashoffset: 0 }
  .cs-line circle{ opacity: 1 }
  .cs-bar-fill{ width: var(--w, 0%) }
}

/* dark mode follow-up (light always for now) */
@media (prefers-color-scheme: dark){
  /* keep light theme intentionally */
}