/* ==========================================================================
   Case study design system — shared by every case study.
   Font: SF Pro via the system font stack (renders SF Pro on Apple devices;
   SF Pro itself can't be self-hosted under Apple's licence). Inter Tight is
   the fallback elsewhere. Each case study picks .cs--light or .cs--dark.
   ========================================================================== */
.cs {
  --cs-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter Tight", "Helvetica Neue", Arial, sans-serif;

  /* type scale */
  --cs-display: clamp(56px, 8vw, 168px);
  --cs-h2: clamp(32px, 3.5vw, 64px);
  --cs-h3: clamp(22px, 1.9vw, 34px);
  --cs-lead: clamp(20px, 1.75vw, 32px);
  --cs-body: clamp(16px, 1.15vw, 21px);
  --cs-small: clamp(13px, .85vw, 15px);
  --cs-label: clamp(11px, .72vw, 13px);

  /* spacing */
  --cs-gutter: clamp(20px, 5.5vw, 110px);
  --cs-section: clamp(110px, 16vh, 220px);
  --cs-radius: 0px;   /* sharp edges everywhere */
  --cs-max: 1480px;

  /* motion */
  --cs-ease: cubic-bezier(.2, .8, .2, 1);

  font-family: var(--cs-font);
  color: var(--cs-ink);
  background: var(--cs-bg);
  -webkit-font-smoothing: antialiased;
}
.cs--light {
  --cs-bg: #f4f4f2; --cs-ink: #121212; --cs-mute: rgba(18, 18, 18, .56);
  --cs-line: rgba(18, 18, 18, .14); --cs-card: #ffffff; --cs-soft: #e9e9e6; --cs-accent: #1f6bff;
}
.cs--dark {
  --cs-bg: #0c0c0d; --cs-ink: #f2f2ef; --cs-mute: rgba(242, 242, 239, .56);
  --cs-line: rgba(242, 242, 239, .14); --cs-card: #17171a; --cs-soft: #202024; --cs-accent: #8db4ff;
}

/* view + scroller */
.view--case { overflow: hidden; touch-action: none; }
.cs-scroll { position: absolute; inset: 0; overflow: hidden; }
.cs-inner { will-change: transform; }
.cs-wrap { width: min(var(--cs-max), 100% - var(--cs-gutter) * 2); margin: 0 auto; }
.cs-section { padding-top: var(--cs-section); }
.cs-section + .cs-full, .cs-full + .cs-full { padding-top: calc(var(--cs-section) * .55); }

/* typography primitives */
.cs-label { font-size: var(--cs-label); font-weight: 500; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 1.2em; }
.cs-it { font-style: italic; font-weight: 300; letter-spacing: -.02em; }
.cs-h2 { font-size: var(--cs-h2); font-weight: 500; line-height: 1.02; letter-spacing: -.035em; margin: 0 0 .7em; }
.cs-body { font-size: var(--cs-body); line-height: 1.45; letter-spacing: -.012em; margin: 0 0 1em; color: var(--cs-ink); }
.cs-body--mute { color: var(--cs-mute); }
.cs-lead { font-size: var(--cs-lead); line-height: 1.25; letter-spacing: -.025em; margin: 0; }
.cs-caption { font-size: var(--cs-small); color: var(--cs-mute); margin-top: .9em; letter-spacing: -.01em; }
.cs-rule { height: 1px; background: var(--cs-line); border: 0; margin: 0 0 1.4em; }

/* reveal on scroll */
[data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1.1s var(--cs-ease), transform 1.2s var(--cs-ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }

/* media */
.cs-img { display: block; width: 100%; height: auto; border-radius: var(--cs-radius); background: var(--cs-soft); }
.cs-img--plain { background: none; border-radius: 0; }
img[data-src] { opacity: 0; transition: opacity .8s var(--cs-ease); }
img.is-loaded { opacity: 1; }

/* ---------- hero ---------- */
.cs-hero { position: relative; min-height: 100vh; padding: calc(var(--gutter) * 4.2) 0 calc(var(--gutter) * 2.4); display: flex; flex-direction: column; justify-content: space-between; }
.cs-hero__object {
  position: absolute; left: 50%; top: 46%; width: clamp(280px, 30vw, 560px); transform: translate(-50%, -50%);
  opacity: .18; filter: blur(1.5px) saturate(.75); pointer-events: none; z-index: 0;
}
.cs-hero__object img { width: 100%; height: auto; display: block; }
.cs--dark .cs-hero__object { opacity: .14; filter: blur(2px) saturate(.6); }
.cs-hero__top { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, 1fr); align-items: start; }
.cs-hero__kicker { grid-column: 1 / 7; font-size: var(--cs-display); line-height: .88; letter-spacing: -.045em; font-weight: 500; text-transform: uppercase; margin: 0; }
.cs-hero__kicker .cs-it { display: block; text-transform: uppercase; }
.cs-hero__title { grid-column: 7 / 13; margin: 18vh 0 0; font-size: var(--cs-display); line-height: .88; letter-spacing: -.045em; font-weight: 500; text-transform: uppercase; }
.cs-hero__title .cs-it { display: block; }
.cs-hero__bottom { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; margin-top: 8vh; }
.cs-hero__overview { grid-column: 1 / 7; }
.cs-hero__overview .cs-lead { max-width: 21em; }
.cs-hero__meta { grid-column: 8 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 20px; align-content: start; }
.cs-meta__k { font-size: var(--cs-label); font-weight: 500; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 .5em; color: var(--cs-mute); }
.cs-meta__v { font-size: var(--cs-small); line-height: 1.35; margin: 0; }
.cs-stats { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 7vh; padding-top: 22px; border-top: 1px solid var(--cs-line); }
.cs-stat__v { font-size: var(--cs-h2); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.cs-stat__k { font-size: var(--cs-small); color: var(--cs-mute); margin-top: .5em; }

/* ---------- hero media (grows to full-bleed on scroll) ---------- */
.cs-hm { height: 165vh; position: relative; }
.cs-hm__sticky { position: absolute; left: 0; right: 0; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; }
.cs-hm__frame { width: 100%; height: 100%; overflow: hidden; border-radius: var(--cs-radius); transform-origin: 50% 50%; will-change: transform; background: var(--cs-soft); }
.cs-hm__frame img { width: 100%; height: 100%; object-fit: contain; padding: 9vh 4vw 4vh; box-sizing: border-box; display: block; will-change: transform; }

/* ---------- chapter + collage ---------- */
.cs-chapter { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.cs-chapter__label { grid-column: 1 / 4; }
.cs-chapter__text { grid-column: 4 / 10; }
.cs-gallery { display: grid; gap: clamp(12px, 1.4vw, 24px); margin-top: 7vh; align-items: stretch; }
.cs-chapter + .cs-gallery { margin-top: 7vh; }
.cs-gallery__item { margin: 0; will-change: translate; }
.cs-gallery__item[data-reveal] { opacity: 1; transform: none; clip-path: inset(18% 0 0 0 round var(--cs-radius)); transition: clip-path 1.3s var(--cs-ease); }
.cs-gallery__item[data-reveal].is-in { clip-path: inset(0 0 0 0 round var(--cs-radius)); }
.cs-gallery__frame img { will-change: transform; }
.cs-gallery__frame { height: clamp(240px, 30vw, 520px); border-radius: var(--cs-radius); overflow: hidden; background: var(--cs-soft); }
.cs-gallery__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-gallery__item.is-cut .cs-gallery__frame { background: var(--cs-card); }
.cs-gallery__item.is-cut .cs-gallery__frame img { object-fit: contain; object-position: 50% 100%; padding: clamp(14px, 2vw, 32px) clamp(14px, 2vw, 32px) 0; }
.cs-chips { margin: 1.6em 0 0; }

/* ---------- quote ---------- */
.cs-quote { width: min(980px, 100%); margin-left: auto; margin-right: auto; }
.cs-quote__text { font-size: var(--cs-h3); line-height: 1.22; letter-spacing: -.025em; margin: 0 0 1em; font-weight: 400; }
.cs-quote__by { font-size: var(--cs-label); text-transform: uppercase; letter-spacing: .02em; color: var(--cs-mute); }

/* ---------- brief ---------- */
.cs-brief { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.cs-brief .cs-label { grid-column: 1 / 4; }
.cs-brief__text { grid-column: 4 / 12; font-size: var(--cs-h2); line-height: 1.08; letter-spacing: -.035em; margin: 0; font-weight: 400; }

/* ---------- process ---------- */
.cs-roles { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6vh; }
.cs-chip { font-size: var(--cs-small); padding: .55em 1.1em; border-radius: 0; border: 1px solid var(--cs-line); background: var(--cs-card); }
.cs-phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--cs-line); }
.cs-phase { padding: 28px 26px 10px 0; border-right: 1px solid var(--cs-line); }
.cs-phase + .cs-phase { padding-left: 26px; }
.cs-phase:last-child { border-right: 0; }
.cs-phase__t { font-size: var(--cs-small); color: var(--cs-mute); }
.cs-phase__n { font-size: var(--cs-h3); letter-spacing: -.03em; margin: .25em 0 .9em; font-weight: 500; }
.cs-phase ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cs-phase li { font-size: var(--cs-small); }
.cs-phase__bar { height: 2px; background: var(--cs-accent); transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--cs-ease); margin-bottom: 18px; }
.is-in .cs-phase__bar { transform: scaleX(1); }

/* ---------- insights ---------- */
.cs-insights { display: flex; flex-direction: column; border-top: 1px solid var(--cs-line); }
.cs-insight { display: grid; grid-template-columns: minmax(120px, 2fr) 5fr 5fr; align-items: center; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--cs-line); }
.cs-insight__v { font-size: var(--cs-h2); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.cs-insight__bar { height: 10px; border-radius: 99px; background: var(--cs-soft); overflow: hidden; }
.cs-insight__bar i { display: block; height: 100%; width: var(--v); background: var(--cs-accent); border-radius: inherit; transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--cs-ease); }
.is-in .cs-insight__bar i { transform: scaleX(1); }
.cs-insight__t { font-size: var(--cs-body); line-height: 1.35; }

/* ---------- principles / features / learnings (numbered lists) ---------- */
.cs-intro { font-size: var(--cs-lead); line-height: 1.25; letter-spacing: -.025em; max-width: 24em; margin: 0 0 6vh; }
.cs-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.cs-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
.cs-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.cs-item { border-top: 1px solid var(--cs-line); padding-top: 18px; }
.cs-grid2 .cs-item { padding-bottom: 34px; }
.cs-item__n { font-size: var(--cs-label); color: var(--cs-mute); margin-bottom: 1.4em; display: block; }
.cs-item__t { font-size: var(--cs-h3); font-weight: 500; letter-spacing: -.03em; margin: 0 0 .5em; line-height: 1.1; }
.cs-item__b { font-size: var(--cs-small); line-height: 1.5; color: var(--cs-mute); margin: 0; }

/* ---------- full-bleed media ---------- */
.cs-full { position: relative; }
.cs-full__frame { overflow: hidden; border-radius: var(--cs-radius); margin: 0 auto; }
.cs-full--md .cs-full__frame, .cs-full--md .cs-caption { max-width: min(1040px, 100%); margin-left: auto; margin-right: auto; }
.cs-full--lg .cs-full__frame, .cs-full--lg .cs-caption { max-width: min(1280px, 100%); margin-left: auto; margin-right: auto; }
.cs-full__frame img { width: 100%; height: auto; display: block; transform: scale(1.03); will-change: transform; }
.cs-full__frame.is-panel { background: var(--cs-card); padding: clamp(16px, 2.4vw, 40px); }
.cs-full__frame.is-panel img { border-radius: calc(var(--cs-radius) * .6); }

/* ---------- carousel ---------- */
.cs-car { position: relative; }
.cs-car__view { overflow: hidden; user-select: none; -webkit-user-select: none; }

.cs-car__track { display: flex; gap: clamp(26px, 2.8vw, 52px); will-change: transform; }
.cs-car { padding-top: calc(var(--cs-section) * .7); }
.cs-car__slide { flex: none; width: min(25vw, 33vh); min-width: 190px; margin: 0; opacity: 1; }
.cs-car--wide .cs-car__slide { width: min(44vw, 70vh); min-width: 260px; }
.cs-car__card { transition: transform .7s var(--cs-ease), box-shadow .7s var(--cs-ease); transform-origin: 50% 50%; }
.cs-car__slide:hover .cs-car__card { transform: scale(1.045); box-shadow: 0 24px 50px rgba(0, 0, 0, .12); }
.cs--dark .cs-car__slide:hover .cs-car__card { box-shadow: 0 24px 50px rgba(0, 0, 0, .45); }
.cs-car__view { cursor: none; padding: 18px 0; }
.cs-car__card { background: var(--cs-card); border-radius: calc(var(--cs-radius) * 1.3); padding: clamp(14px, 1.4vw, 26px); }
.cs-car__card img { width: 100%; height: auto; display: block; border-radius: calc(var(--cs-radius) * .8); pointer-events: none; }
.cs-car__cap { font-size: var(--cs-small); margin-top: 1em; color: var(--cs-mute); min-height: 2.6em; }
.cs-car__ui { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; font-size: var(--cs-label); text-transform: uppercase; letter-spacing: .02em; }
.cs-car__btns { display: flex; gap: 18px; }
.cs-car__btns button { font: inherit; text-transform: uppercase; color: var(--cs-ink); opacity: 1; transition: opacity .3s; }
.cs-car__btns button:disabled { opacity: .3; cursor: default; }

/* ---------- metric ---------- */
.cs-metric { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; }
.cs-metric__v { grid-column: 1 / 7; font-size: clamp(120px, 19vw, 360px); line-height: .8; letter-spacing: -.06em; font-weight: 500; margin: 0; }
.cs-metric__side { grid-column: 7 / 13; }
.cs-metric__side .cs-lead { margin-bottom: 1em; }
.cs-metric__quote { margin-top: 5vh; padding-top: 20px; border-top: 1px solid var(--cs-line); }

/* ---------- iterations ---------- */
.cs-iter { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding: 6vh 0; border-top: 1px solid var(--cs-line); }
.cs-iter:last-child { border-bottom: 1px solid var(--cs-line); }
.cs-iter__media { grid-column: 1 / 5; }
.cs-iter__media img { border-radius: var(--cs-radius); width: 100%; height: auto; display: block; background: var(--cs-soft); }
.cs-iter__body { grid-column: 6 / 13; }
.cs-iter__name { font-size: var(--cs-h3); font-weight: 500; letter-spacing: -.03em; margin: 0 0 1.4em; }
.cs-iter__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cs-iter__k { font-size: var(--cs-label); text-transform: uppercase; letter-spacing: .02em; color: var(--cs-mute); margin: 0 0 .7em; }
.cs-iter__v { font-size: var(--cs-small); line-height: 1.5; margin: 0; }
.cs-iter__v--out { font-weight: 500; }

/* ---------- split ---------- */
.cs-split { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; }
.cs-split__text { grid-column: 1 / 6; }
.cs-split__media { grid-column: 7 / 13; position: relative; }
.cs-split--flip .cs-split__text { grid-column: 8 / 13; grid-row: 1; }
.cs-split--flip .cs-split__media { grid-column: 1 / 7; grid-row: 1; }
.cs-split__media.is-panel { background: var(--cs-card); border-radius: var(--cs-radius); padding: clamp(16px, 2.4vw, 40px); }
.cs-split__media.is-panel > img { background: none; border-radius: calc(var(--cs-radius) * .6); }
.cs-split__extra { position: absolute; width: 38%; right: -6%; bottom: -10%; box-shadow: 0 30px 60px rgba(0, 0, 0, .12); border-radius: var(--cs-radius); }

/* ---------- design system specimen ---------- */
.cs-sys { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 6vh; }
.cs-sys__font { grid-column: 1 / 7; background: var(--cs-card); border-radius: var(--cs-radius); padding: clamp(24px, 3vw, 54px); }
.cs-sys__aa { font-family: "Lato", var(--cs-font); font-size: clamp(90px, 11vw, 210px); line-height: .9; letter-spacing: -.03em; font-weight: 700; margin: 0; }
.cs-sys__name { font-size: var(--cs-h3); margin: .4em 0 1.4em; letter-spacing: -.02em; }
.cs-sys__weights { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-sys__scale { grid-column: 8 / 13; align-self: end; display: flex; flex-direction: column; gap: 14px; }
.cs-sys__scale div { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--cs-line); padding-bottom: 12px; }
.cs-sys__colors { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.cs-swatch { border-radius: var(--cs-radius); overflow: hidden; background: var(--cs-card); }
.cs-swatch__c { aspect-ratio: 1 / 1.05; }
.cs-swatch__t { padding: 12px 14px 14px; font-size: var(--cs-small); }
.cs-swatch__t span { display: block; color: var(--cs-mute); margin-top: .2em; font-variant-numeric: tabular-nums; }

/* ---------- personas ---------- */
.cs-personas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.cs-persona__img { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--cs-radius); background: var(--cs-soft); margin-bottom: 18px; }
.cs-persona__img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(.94) saturate(.86); }
.cs--dark .cs-persona__img img { filter: contrast(.92) saturate(.8) brightness(.88); }
.cs-persona__name { font-size: var(--cs-h3); font-weight: 500; letter-spacing: -.03em; margin: 0; }
.cs-persona__meta { font-size: var(--cs-small); color: var(--cs-mute); margin: .3em 0 1.4em; }
.cs-persona__k2 { margin-top: 1.2em; }

.cs-personas--cutout .cs-persona__img { background: linear-gradient(180deg, color-mix(in srgb, var(--cs-accent) 14%, var(--cs-card)), var(--cs-card)); }
.cs-personas--cutout .cs-persona__img img { object-fit: contain; object-position: 50% 100%; }

/* ---------- target groups ---------- */
.cs-targets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.cs-target { margin: 0; }
.cs-target img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--cs-radius); display: block; background: var(--cs-soft); filter: contrast(.94) saturate(.86); }
.cs-target figcaption { font-size: var(--cs-small); margin-top: .8em; }

/* ---------- comparison table ---------- */
.cs-table-wrap { overflow-x: auto; border-radius: var(--cs-radius); background: var(--cs-card); padding: clamp(8px, 1.2vw, 18px) clamp(12px, 1.8vw, 28px); }
.cs-table { width: 100%; border-collapse: collapse; font-size: var(--cs-small); min-width: 720px; }
.cs-table th, .cs-table td { padding: 14px 10px; text-align: center; border-bottom: 1px solid var(--cs-line); font-weight: 400; }
.cs-table thead th { color: var(--cs-mute); font-size: var(--cs-label); text-transform: uppercase; letter-spacing: .02em; }
.cs-table tbody tr:last-child th, .cs-table tbody tr:last-child td { border-bottom: 0; }
.cs-table tbody th { text-align: left; white-space: nowrap; }
.cs-table .is-us { background: color-mix(in srgb, var(--cs-accent) 10%, transparent); color: var(--cs-ink); }
.cs-tick { display: inline-block; width: 18px; height: 18px; border-radius: 50%; position: relative; vertical-align: middle; }
.cs-tick.is-yes { background: color-mix(in srgb, var(--cs-accent) 85%, transparent); }
.cs-tick.is-yes::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid var(--cs-bg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cs-tick.is-no { border: 1.5px solid var(--cs-line); }
.cs-tick.is-no::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 1.5px; background: var(--cs-mute); }

/* ---------- quote cards ---------- */
.cs-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 24px); }
.cs-qcard { margin: 0; background: var(--cs-card); border-radius: var(--cs-radius); padding: clamp(20px, 2vw, 32px); display: flex; flex-direction: column; justify-content: space-between; gap: 2em; min-height: 200px; }
.cs-qcard blockquote { margin: 0; font-size: clamp(17px, 1.3vw, 23px); line-height: 1.3; letter-spacing: -.02em; }
.cs-qcard figcaption { font-size: var(--cs-label); text-transform: uppercase; letter-spacing: .02em; color: var(--cs-mute); }

/* ---------- journey steps ---------- */
.cs-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.4vw, 24px); }
.cs-step__img { aspect-ratio: 1; border-radius: var(--cs-radius); background: var(--cs-step-bg, var(--cs-card)); overflow: hidden; margin-bottom: 16px; display: grid; place-items: end center; }
.cs-step__img img { width: 88%; height: 88%; object-fit: contain; object-position: 50% 100%; display: block; }
.cs-step__t { font-size: var(--cs-body); margin: .3em 0 0; letter-spacing: -.015em; }

/* ---------- gentle photo grade (photos only — never product screens) ---------- */
img.is-photo { filter: contrast(.94) saturate(.88) brightness(.98); }
.cs--dark img.is-photo { filter: contrast(.92) saturate(.82) brightness(.86); }

/* ---------- placeholders (screens to come) ---------- */
.cs-ph {
  width: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: .4em;
  padding: clamp(16px, 2vw, 28px); border-radius: var(--cs-radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cs-accent) 7%, transparent), transparent 60%),
    repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--cs-ink) 3%, transparent) 14px 15px),
    var(--cs-card);
  border: 1px dashed var(--cs-line); color: var(--cs-mute);
}
.cs-ph__k { font-size: var(--cs-label); text-transform: uppercase; letter-spacing: .04em; }
.cs-ph__t { font-size: var(--cs-body); color: var(--cs-ink); letter-spacing: -.015em; }
.cs-gallery__frame .cs-ph, .cs-hm__frame .cs-ph { height: 100%; aspect-ratio: auto !important; border: 0; border-radius: 0; }
.cs-car__card .cs-ph { border: 0; }

/* ---------- drag cursor for horizontal sections ---------- */
.cs-drag {
  position: fixed; left: 0; top: 0; z-index: 30; width: 84px; height: 84px; border-radius: 50%;
  background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .18), inset 0 0 0 1.5px rgba(0, 0, 0, .08);
  display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .25s;
}
.cs-drag__arrows { width: 44px; height: 18px; fill: none; stroke: #1b1a1a; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
body.is-dragcursor .ring { opacity: 0 !important; }
@media (hover: none) { .cs-drag { display: none; } .cs-car__view { cursor: auto; } }

.cs-full__frame, .cs-gallery__frame, .cs-split__media, .cs-iter__media, .cs-persona__img, .cs-target img, .cs-step__img { transform-origin: 50% 0%; will-change: transform; }
.cs .cs-chip, .cs-hm__frame { border-radius: 0 !important; }

.cs-car.is-static .cs-car__view { cursor: auto; }
.cs-car.is-static .cs-car__track { transform: none !important; justify-content: center; }
.cs-gallery__item { translate: none !important; }
.cs-gallery__frame img, .cs-full__frame > img { transform: none !important; }

/* ---------- media sits directly on the page (no boxes behind images) ---------- */
.cs-car__card { background: none !important; padding: 0 !important; }
.cs-full__frame, .cs-full__frame.is-panel, .cs-split__media.is-panel, .cs-gallery__frame, .cs-iter__media img, .cs-hm__frame, .cs-img { background: none !important; }
.cs-full__frame.is-panel, .cs-split__media.is-panel { padding: 0 !important; }
.cs-gallery__item.is-cut .cs-gallery__frame { background: none !important; }
.cs-car__card img, .cs-iter__media img { filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .18)); }
.cs--dark .cs-car__card img, .cs--dark .cs-iter__media img { filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .55)); }
.cs-iter__media img { max-height: 70vh; width: auto; max-width: 100%; margin: 0 auto; }

/* ---------- information architecture tree ---------- */
.cs-tree { display: grid; grid-template-columns: auto 1fr; gap: 0 clamp(24px, 4vw, 72px); align-items: center; }
.cs-tree__root, .cs-tree__node { display: inline-block; border: 1px solid var(--cs-line); padding: .6em 1.2em; font-size: var(--cs-body); letter-spacing: -.01em; }
.cs-tree__root { border-color: var(--cs-accent); color: var(--cs-ink); }
.cs-tree__branches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; border-left: 1px solid var(--cs-line); padding-left: clamp(20px, 3vw, 48px); }
.cs-tree__branch ul { list-style: none; margin: 16px 0 0; padding: 0 0 0 16px; border-left: 1px solid var(--cs-line); display: flex; flex-direction: column; gap: 10px; }
.cs-tree__branch li { font-size: var(--cs-small); color: var(--cs-mute); position: relative; }
.cs-tree__branch li::before { content: ""; position: absolute; left: -16px; top: .7em; width: 10px; height: 1px; background: var(--cs-line); }

/* ---------- annotated screen ---------- */
.cs-annot { display: grid; grid-template-columns: 1fr minmax(240px, 30%) 1fr; gap: clamp(20px, 3vw, 56px); align-items: center; margin-top: 4vh; }
.cs-annot__phone img { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .5)); }
.cs-annot__col { display: flex; flex-direction: column; gap: 6vh; }
.cs-annot__note { border-top: 1px solid var(--cs-line); padding-top: 14px; }
.cs-annot__t { font-size: var(--cs-label); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 .6em; }
.cs-annot__d { font-size: var(--cs-small); line-height: 1.5; color: var(--cs-mute); margin: 0; }
@media (max-width: 900px) { .cs-tree { grid-template-columns: 1fr; } .cs-tree__branches { grid-template-columns: repeat(2, 1fr); border-left: 0; padding-left: 0; margin-top: 20px; } .cs-annot { grid-template-columns: 1fr; } }

/* ---------- impact ---------- */
.cs-impact .cs-grid4 .cs-item { padding-top: 26px; }
.cs-impact__v { font-size: clamp(52px, 6vw, 110px); font-weight: 500; letter-spacing: -.05em; line-height: .9; margin: 0 0 .25em; }

/* ---------- next ---------- */
.cs-next { height: 100vh; position: relative; display: grid; place-items: center; text-align: center; margin-top: var(--cs-section); overflow: hidden; }
.cs-next__object { position: absolute; left: 50%; top: 52%; width: clamp(260px, 30vw, 480px); aspect-ratio: 1; transform: translate(-50%, -50%); perspective: 900px; }

/* soft pearl shapes (original, CSS-only) for the "next case study" moment */
.cs-shape { position: absolute; inset: 0; margin: auto; animation: cs-float 9s ease-in-out infinite; filter: drop-shadow(0 40px 60px rgba(60, 50, 40, .12)); }
.cs--dark .cs-shape { filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .6)) brightness(.82); }
.cs-shape i { position: absolute; inset: 0; border-radius: inherit; background: conic-gradient(from 200deg, rgba(255, 190, 170, .0), rgba(255, 200, 180, .35), rgba(180, 210, 255, .3), rgba(220, 255, 230, .25), rgba(255, 190, 170, .0)); mix-blend-mode: soft-light; filter: blur(14px); opacity: .9; }
.cs-shape--sphere { width: 82%; height: 82%; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffffff 0 6%, #f6f4f1 18%, #e3e0dc 46%, #c9c5c1 74%, #b4b0ad 100%); }
.cs-shape--pill { width: 44%; height: 92%; border-radius: 999px; transform: rotate(-28deg);
  background: linear-gradient(100deg, #b9b5b1 0%, #ece9e6 30%, #ffffff 42%, #e2dfdb 62%, #bdb9b5 100%); }
.cs-shape--torus { width: 92%; height: 92%; border-radius: 50%; transform: rotateX(58deg) rotateZ(-12deg);
  background: radial-gradient(circle, transparent 0 31%, #b8b4b0 33%, #e9e6e2 40%, #ffffff 45%, #e4e1dd 52%, #bfbbb7 62%, transparent 64%); }
.cs-shape--torus i { -webkit-mask: radial-gradient(circle, transparent 0 32%, #000 34% 62%, transparent 64%); mask: radial-gradient(circle, transparent 0 32%, #000 34% 62%, transparent 64%); }
.cs-shape--cube { width: 64%; height: 64%; border-radius: 22%; transform: rotate(45deg) rotateX(18deg) rotateY(-14deg);
  background: linear-gradient(135deg, #ffffff 0%, #eeebe8 32%, #d6d2ce 64%, #bcb8b4 100%);
  box-shadow: inset 10px 10px 30px rgba(255, 255, 255, .9), inset -14px -14px 34px rgba(120, 110, 100, .18); }
@keyframes cs-float { 0%, 100% { translate: 0 -2%; rotate: 0deg; } 50% { translate: 0 2%; rotate: 4deg; } }
@media (prefers-reduced-motion: reduce) { .cs-shape { animation: none; } }
.cs-next__inner { position: relative; z-index: 1; }
.cs-next__k { font-size: clamp(40px, 5vw, 96px); line-height: .9; letter-spacing: -.03em; margin: 0; transition: opacity .4s, transform .6s var(--cs-ease); }
.cs-next__name { font-size: clamp(54px, 6.6vw, 130px); line-height: .92; letter-spacing: -.045em; font-weight: 500; text-transform: uppercase; margin: 0; }
.cs-next__hint { margin-top: 1.6em; font-size: var(--cs-label); text-transform: uppercase; letter-spacing: .02em; display: inline-block; position: relative; padding-bottom: 4px; }
.cs-next__hint i { position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; transform-origin: left; transform: scaleX(var(--pull, 0)); }
.cs-next__letter { display: block; font-size: var(--cs-h3); margin-top: .8em; min-height: 1.2em; color: var(--cs-mute); }
.cs-next.is-loading .cs-next__k { opacity: 0; transform: translateY(-20px); }

/* theme-aware chrome while a case study is open */
body[data-view="case"] { background: var(--case-bg, #f4f4f2); }
body[data-view="case"][data-case-theme="light"] { --fg: #121212; --case-bg: #f4f4f2; }
body[data-view="case"][data-case-theme="dark"] { --fg: #f2f2ef; --case-bg: #0c0c0d; }
body[data-view="case"] .ftr__pill, body[data-view="case"] .ftr__copy { opacity: 0; visibility: hidden; }
body[data-view="case"] .ftr__copy { color: var(--fg); }
.veil { position: fixed; inset: 0; z-index: 7; pointer-events: none; opacity: 0; background: #f4f4f2; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .cs-hero__kicker, .cs-hero__title, .cs-hero__overview, .cs-hero__meta, .cs-chapter__label, .cs-chapter__text,
  .cs-brief .cs-label, .cs-brief__text, .cs-metric__v, .cs-metric__side, .cs-iter__media, .cs-iter__body,
  .cs-split__text, .cs-split__media, .cs-split--flip .cs-split__text, .cs-split--flip .cs-split__media,
  .cs-sys__font, .cs-sys__scale { grid-column: 1 / -1; grid-row: auto; }
  .cs-hero__title { margin-top: 10vh; }
  .cs-hero__meta { margin-top: 5vh; grid-template-columns: repeat(2, 1fr); }
  .cs-stats, .cs-grid4, .cs-personas, .cs-targets, .cs-steps { grid-template-columns: repeat(2, 1fr); }
  .cs-quotes { grid-template-columns: 1fr; }
  .cs-gallery { grid-template-columns: 1fr !important; }
  .cs-phases, .cs-grid2, .cs-grid3, .cs-iter__cols { grid-template-columns: 1fr; }
  .cs-phase { border-right: 0; padding-left: 0 !important; border-bottom: 1px solid var(--cs-line); }
  .cs-insight { grid-template-columns: 1fr; gap: 10px; }
  .cs-iter__media { margin-bottom: 4vh; }
  .cs-split__media { margin-top: 5vh; }
  .cs-sys__colors { grid-template-columns: repeat(3, 1fr); }
  .cs-car__slide { width: min(58vw, 30vh); }
  .cs-car--wide .cs-car__slide { width: min(80vw, 60vh); }
}

/* ==========================================================================
   Design-system specimens (layers, ramps, tokens, scales, anatomy, log)
   ========================================================================== */
.cs-layers { list-style: none; margin: 5vh 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--cs-line); }
.cs-layer { padding: 22px 18px 0 0; position: relative; }
.cs-layer + .cs-layer { padding-left: 18px; border-left: 1px solid var(--cs-line); }
.cs-layer::after { content: "→"; position: absolute; right: -7px; top: -11px; background: var(--cs-bg); color: var(--cs-mute); font-size: 14px; line-height: 1; padding: 4px 0; }
.cs-layer:last-child::after { display: none; }
.cs-layer__t { font-size: var(--cs-h3); letter-spacing: -.03em; margin: .5em 0 .2em; }
.cs-layer__m { font-size: var(--cs-small); color: var(--cs-accent); margin: 0 0 1em; }
.cs-layer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cs-layer li { font-size: var(--cs-small); color: var(--cs-mute); }

.cs-ramps { margin-top: 5vh; display: flex; flex-direction: column; gap: 6px; }
.cs-ramp { display: grid; grid-template-columns: minmax(70px, 1fr) repeat(11, 1fr); gap: 6px; align-items: center; }
.cs-ramp i { height: clamp(28px, 3.4vw, 54px); display: block; }
.cs-ramp--head span, .cs-ramp__n { font-size: var(--cs-label); color: var(--cs-mute); letter-spacing: .02em; }
.cs-ramp__n { color: var(--cs-ink); }

.cs-tokens__intro { max-width: 52ch; }
.cs-tokens { margin-top: 5vh; border-top: 1px solid var(--cs-ink); }
.cs-tokens__row { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--cs-line); font-size: var(--cs-small); align-items: center; font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: -.02em; }
.cs-tokens__row span { position: relative; }
.cs-tokens__row span + span::before { content: "→"; position: absolute; left: -20px; color: var(--cs-mute); font-family: var(--cs-font); }
.cs-tokens__row--head { font-family: var(--cs-font); font-size: var(--cs-label); text-transform: uppercase; letter-spacing: .03em; color: var(--cs-mute); }
.cs-tokens__row--head span::before { display: none; }
.cs-tokens__sw { display: inline-block; width: 22px; height: 22px; vertical-align: middle; margin-right: 12px; box-shadow: inset 0 0 0 1px var(--cs-line); }
.cs-tokens__row em { font-style: normal; color: var(--cs-mute); margin-left: 10px; }

.cs-scales { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(28px, 4vw, 80px); margin-top: 4vh; }
.cs-scales__type > div { display: grid; grid-template-columns: 52px 64px 1fr; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cs-line); }
.cs-scales__s { font-family: Inter, var(--cs-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-scales__k { font-size: var(--cs-label); color: var(--cs-ink); }
.cs-scales__v { font-size: var(--cs-label); color: var(--cs-mute); font-variant-numeric: tabular-nums; }
.cs-scales__sp { display: grid; grid-template-columns: 90px 1fr 28px; align-items: center; gap: 10px; padding: 5px 0; }
.cs-scales__sp i { display: block; height: 10px; background: var(--cs-accent); opacity: .85; min-width: 1px; }
.cs-scales__radii { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 12px; }
.cs-scales__radii div { display: flex; flex-direction: column; gap: 4px; }
.cs-scales__radii i { width: 44px; height: 44px; border-top: 2px solid var(--cs-ink); border-left: 2px solid var(--cs-ink); margin-bottom: 6px; }
.cs-scales__k2 { margin-top: 4vh !important; }

.cs-anat { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(28px, 4vw, 80px); margin-top: 4vh; align-items: start; }
.cs-anat__grid { display: grid; gap: 22px 18px; align-items: center; }
.cs-anat__h { font-size: var(--cs-label); color: var(--cs-mute); text-transform: uppercase; letter-spacing: .03em; }
.cs-anat__props > div { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid var(--cs-line); }
.cs-anat__props > div:first-child { border-top: 1px solid var(--cs-ink); }
.cs-anat__pn { font-size: var(--cs-small); }
.cs-anat__pk { font-size: 10px; letter-spacing: .06em; color: var(--cs-accent); align-self: center; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.cs-anat__pv { grid-column: 1 / -1; font-size: var(--cs-small); color: var(--cs-mute); }

/* BMC button specimen, values from the library's tokens */
.ds-btn { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border-radius: 4px; font: 500 12px/18px Inter, var(--cs-font); border: 1px solid transparent; white-space: nowrap; }
.ds-btn svg { width: 14px; height: 14px; }
.ds-btn--primary { background: #1e52ee; color: #fff; }
.ds-btn--primary.is-hover { background: #1843c6; }
.ds-btn--primary.is-focused { background: #1e52ee; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #7fa1ff; }
.ds-btn--primary.is-disabled { background: #c2d1ff; }
.ds-btn--secondary { background: #fff; color: #3c495d; border-color: #8591a3; }
.ds-btn--secondary.is-hover { background: rgba(18, 25, 38, .1); }
.ds-btn--secondary.is-focused { background: #f1f5f9; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #7fa1ff; }
.ds-btn--secondary.is-disabled { background: #f1f5f9; color: #bfcad9; border-color: #d8dfe9; }
.ds-btn--tertiary { background: transparent; color: #3c495d; }
.ds-btn--tertiary.is-hover { background: rgba(18, 25, 38, .1); }
.ds-btn--tertiary.is-focused { background: #fff; box-shadow: 0 0 0 2px #7fa1ff; }
.ds-btn--tertiary.is-disabled { color: #bfcad9; }
.ds-btn--destructive { background: #d92d20; color: #fff; }
.ds-btn--destructive.is-hover { background: #b42318; }
.ds-btn--destructive.is-focused { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #fda29b; }
.ds-btn--destructive.is-disabled { background: #fecdca; }

.cs-log { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 5vh; border-top: 1px solid var(--cs-line); }
.cs-log__m { padding: 0 20px 0 0; }
.cs-log__m + .cs-log__m { padding-left: 20px; border-left: 1px solid var(--cs-line); }
.cs-log__bar { height: 80px; display: flex; align-items: flex-end; margin: 22px 0 14px; }
.cs-log__bar i { display: block; width: 100%; height: var(--v); background: var(--cs-accent); }
.cs-log__n { font-size: var(--cs-h3); letter-spacing: -.03em; margin: .2em 0 1em; }
.cs-log__n span { font-size: var(--cs-small); color: var(--cs-mute); letter-spacing: 0; }
.cs-log ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cs-log li { font-size: var(--cs-small); line-height: 1.45; color: var(--cs-mute); }
.cs-log li b { font-weight: 500; color: var(--cs-ink); display: block; }

@media (max-width: 900px) {
  .cs-layers { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .cs-layer + .cs-layer { border-left: 0; padding-left: 0; }
  .cs-layer::after { display: none; }
  .cs-ramp { grid-template-columns: 56px repeat(11, 1fr); gap: 3px; }
  .cs-tokens__row { grid-template-columns: 1fr; gap: 6px; }
  .cs-tokens__row span + span::before { position: static; margin-right: 8px; }
  .cs-tokens__row--head { display: none; }
  .cs-scales, .cs-anat { grid-template-columns: 1fr; }
  .cs-anat__grid { overflow-x: auto; }
  .cs-log { grid-template-columns: 1fr; }
  .cs-log__m + .cs-log__m { border-left: 0; padding-left: 0; border-top: 1px solid var(--cs-line); margin-top: 20px; }
}

/* WebGL layer for images entering with the project-card bend */
.cs-gl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

/* ==========================================================================
   Live phone: a long screen that scrolls inside a device frame.
   Geometry matches the static mockups: 960 × 2009 device, 30px bezel,
   124px screen radius, 390pt design width.
   ========================================================================== */
.cs-dev { position: relative; width: 100%; aspect-ratio: 960 / 2009; container-type: inline-size; border-radius: 16% / 7.65%; background: #1a1a1c; box-shadow: inset 0 0 0 2px #54545a; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .18)); cursor: ns-resize; }
.cs--dark .cs-dev { filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .55)); }
.cs-dev__screen { position: absolute; left: 3.125cqw; top: 3.125cqw; width: 93.75cqw; height: 202.97cqw; border-radius: 12.92cqw; overflow: hidden; background: #000; isolation: isolate; }
.cs-dev__img { display: block; width: 100%; height: auto; will-change: transform; user-select: none; -webkit-user-drag: none; }
/* fixed bars: slices of the same image, pinned to the top/bottom of the screen */
.cs-dev__pin { position: absolute; left: 0; right: 0; z-index: 1; background-size: 100% auto; background-repeat: no-repeat; pointer-events: none; }
.cs-dev__pin--t { top: 0; height: calc(var(--pin-t) * 93.75cqw / 390); background-position: top center; }
.cs-dev__pin--b { bottom: 0; height: calc(var(--pin-b) * 93.75cqw / 390); background-position: bottom center; }
.cs-dev::after { content: ""; position: absolute; z-index: 2; left: 50%; top: 5.625cqw; width: 26.04cqw; height: 7.29cqw; transform: translateX(-50%); border-radius: 4cqw; background: #000; pointer-events: none; }
.cs-dev.no-island::after { display: none; }
/* slim iOS-style scroll indicator */
.cs-dev__bar { position: absolute; z-index: 3; top: 0; right: 1.2cqw; width: 1.1cqw; min-height: 6cqw; border-radius: 1cqw; background: rgba(128, 128, 128, .7); opacity: 0; transition: opacity .4s; pointer-events: none; will-change: transform; }
/* hint: shows until the screen is first scrolled */
.cs-dev__hint { position: absolute; z-index: 3; left: 50%; bottom: calc(var(--pin-b) * 93.75cqw / 390 + 7cqw); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 2.2cqw; padding: 2.4cqw 4.4cqw; border-radius: 8cqw; background: rgba(12, 12, 13, .72); color: #fff; font: 500 3.6cqw/1 var(--cs-font); letter-spacing: .02em; text-transform: uppercase; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; opacity: 0; transition: opacity .5s; }
.cs-dev__hint svg { width: 3.2cqw; height: 4.8cqw; fill: none; stroke: currentColor; stroke-width: 1.4; }
.cs-dev__hint svg path { animation: cs-wheel 1.6s ease-in-out infinite; }
@keyframes cs-wheel { 0%, 100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(3px); opacity: .2; } }
.cs-dev.is-scrollable .cs-dev__hint { opacity: 1; }
.cs-dev.is-used .cs-dev__hint { opacity: 0; }
/* the live phone takes the card's place; no zoom on hover so scrolling stays precise */
.cs-car__slide:hover .cs-car__card:has(.cs-dev) { transform: none; box-shadow: none; }

/* ==========================================================================
   Atomic levels + type pairing (Quivio)
   ========================================================================== */
.cs-ramp i.is-empty { background: none; }
.cs-atomic { margin-top: 5vh; border-top: 1px solid var(--cs-ink); }
.cs-atomic__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 96px); padding: clamp(36px, 6vh, 72px) 0; border-bottom: 1px solid var(--cs-line); align-items: start; }
.cs-atomic__t { font-size: var(--cs-h2); font-weight: 500; letter-spacing: -.035em; line-height: 1; margin: .35em 0 .4em; }
.cs-atomic__d { font-size: var(--cs-body); line-height: 1.45; color: var(--cs-mute); margin: 0 0 1.4em; max-width: 46ch; }
.cs-atomic__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cs-line); }
.cs-atomic__list li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--cs-line); font-size: var(--cs-small); }
.cs-atomic__list em { font-style: normal; color: var(--cs-mute); text-align: right; }

.cs-tp { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: clamp(24px, 4vw, 72px); margin-top: 4vh; align-items: start; }
.cs-tp__aa { font-size: clamp(80px, 9vw, 160px); line-height: .9; margin: 0 0 .15em; color: var(--cs-ink); font-weight: 600; letter-spacing: -.02em; }
.cs-tp__name { font-size: var(--cs-h3); font-weight: 600; margin: 0 0 .2em; }
.cs-tp__role { font-family: var(--cs-font); font-size: var(--cs-small); color: var(--cs-mute); margin: 0 0 1.4em; }
.cs-tp__sample { font-size: 18px; font-weight: 500; margin: 0; padding-top: 14px; border-top: 1px solid var(--cs-line); }
.cs-tp__scale > div { display: grid; grid-template-columns: 56px 44px 1fr; gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--cs-line); }
.cs-tp__line { font-family: Montserrat, var(--cs-font); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; color: #152d40; }

/* ---------- Quivio specimens (real token values, placed on the page) ---------- */
.qv-spec { font-family: Montserrat, var(--cs-font); color: #152d40; }
.qv-cap { font-family: var(--cs-font); font-size: var(--cs-label); text-transform: uppercase; letter-spacing: .03em; color: var(--cs-mute); margin: 0 0 12px; }
.qv-cap:not(:first-child) { margin-top: 28px; }
.qv-dots { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13px; font-weight: 500; }
.qv-dots span { display: inline-flex; align-items: center; gap: 8px; }
.qv-dots i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.qv-dots i.is-ring { background: none; border: 3px solid; width: 12px; height: 12px; box-sizing: border-box; }
.qv-checks { display: flex; gap: 18px; align-items: center; }
.qv-cb, .qv-rd { width: 18px; height: 18px; border: 1.5px solid #c0c3c5; border-radius: 5px; display: inline-block; position: relative; background: #fff; box-sizing: border-box; flex: none; }
.qv-rd { border-radius: 50%; }
.qv-cb.is-on, .qv-cb.is-ind { background: #53c3dd; border-color: #53c3dd; }
.qv-cb.is-on::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.qv-cb.is-ind::after { content: ""; position: absolute; left: 3px; right: 3px; top: 7px; height: 2px; background: #fff; }
.qv-rd.is-on { border-color: #53c3dd; }
.qv-rd.is-on::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #53c3dd; }
.qv-cb.is-dis { background: #f1f3f4; border-color: #e5e8ea; }
.qv-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.qv-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid #e5e8ea; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 500; color: #3a4f5f; white-space: nowrap; }
.qv-pill i { width: 8px; height: 8px; border-radius: 50%; }
.qv-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qv-in { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 500; color: #3a4f5f; }
.qv-in b { display: flex; align-items: center; height: 38px; padding: 0 12px; border: 1px solid #c0c3c5; border-radius: 8px; background: #fff; font-weight: 500; font-size: 13px; color: #152d40; box-sizing: border-box; }
.qv-in b.is-ph { color: #85929c; }
.qv-in.is-focus b { border-color: #53c3dd; box-shadow: 0 0 0 4px #cfeef5; }
.qv-in.is-focus em { width: 1px; height: 16px; background: #152d40; margin-left: 2px; animation: qv-caret 1s steps(1) infinite; }
@keyframes qv-caret { 50% { opacity: 0; } }
.qv-in.is-err b { border-color: #f04438; }
.qv-in small { color: #f04438; font-size: 11px; }
.qv-in.is-dis b { background: #f1f3f4; color: #85929c; border-color: #e5e8ea; }
.qv-tip { position: relative; display: inline-block; padding: 8px 12px; border-radius: 8px; background: #152d40; color: #fff; font-size: 12px; font-weight: 500; }
.qv-tip::after { content: ""; position: absolute; left: 22px; bottom: -5px; width: 10px; height: 10px; background: #152d40; transform: rotate(45deg); }
.qv-table { font-family: Inter, var(--cs-font); font-size: 13px; border: 1px solid #e5e8ea; border-radius: 10px; overflow: hidden; background: #fff; }
.qv-tr { display: grid; grid-template-columns: 2.2fr 1.4fr .9fr .6fr; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid #edeff1; color: #152d40; }
.qv-tr.is-h { border-top: 0; background: #f6f7f7; color: #60707d; font-weight: 600; font-size: 12px; }
.qv-tr span { display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; overflow: hidden; }
.qv-tr span.is-num { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.qv-tr .qv-pill { font-family: Montserrat, var(--cs-font); }
.qv-av { width: 24px; height: 24px; border-radius: 50%; background: #c3daec; color: #1d547f; display: grid; place-items: center; font-size: 10px; font-weight: 600; flex: none; }
.qv-shells { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 48px); align-items: center; }
.qv-phone { width: 190px; height: 390px; border: 6px solid #152d40; border-radius: 30px; overflow: hidden; display: flex; flex-direction: column; background: #f6f7f7; }
.qv-phone__hdr { background: #2a7bbb; height: 64px; padding: 26px 14px 0; display: flex; justify-content: space-between; box-sizing: border-box; }
.qv-phone__hdr i { width: 54px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.75); }
.qv-phone__hdr i + i { width: 14px; height: 14px; border-radius: 50%; margin-top: -3px; }
.qv-phone__tabs { display: flex; gap: 6px; padding: 10px 12px; background: #fff; }
.qv-phone__tabs b, .qv-phone__tabs i { flex: 1; height: 18px; border-radius: 9px; background: #edeff1; }
.qv-phone__tabs b { background: #53c3dd; }
.qv-phone__body { flex: 1; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.qv-phone__body i { height: 46px; border-radius: 10px; background: #fff; border: 1px solid #e5e8ea; }
.qv-phone__cta { height: 30px; margin: 0 12px 8px; border-radius: 8px; background: #53c3dd; }
.qv-phone__nav { height: 40px; background: #fff; border-top: 1px solid #e5e8ea; display: flex; justify-content: space-around; align-items: center; }
.qv-phone__nav i { width: 14px; height: 14px; border-radius: 4px; background: #c0c3c5; }
.qv-phone__nav i.is-on { background: #2a7bbb; }
.qv-legend p { margin: 0 0 16px; font-size: 13px; color: #60707d; }
.qv-legend b { display: block; color: #152d40; font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.qv-products { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--cs-line); }
.qv-products > div { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--cs-line); }
.qv-products > div:nth-child(odd) { border-right: 1px solid var(--cs-line); }
.qv-products > div:nth-child(even) { padding-left: 16px; }
.qv-products p { font-size: 17px; font-weight: 600; margin: 4px 0 4px; color: #152d40; }
.qv-products small { font-family: var(--cs-font); font-size: 13px; color: var(--cs-mute); line-height: 1.4; display: block; }
.qv-pn { font-family: var(--cs-font); font-size: 11px; color: #2a7bbb; }
@media (max-width: 900px) {
  .cs-atomic__row, .cs-tp { grid-template-columns: 1fr; }
  .qv-inputs, .qv-shells { grid-template-columns: 1fr; }
  .qv-tr { grid-template-columns: 2fr 1.4fr .8fr; }
  .qv-tr span:nth-child(3) { display: none; }
}

/* cross-reference to another case study */
.cs-xref { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 24px 48px; align-items: end; padding: 32px 0; border-top: 1px solid var(--cs-line); border-bottom: 1px solid var(--cs-line); }
.cs-xref .cs-label { margin: 0; }
.cs-xref__t { font-size: var(--cs-lead); line-height: 1.25; letter-spacing: -.025em; margin: 0; }
.cs-xref__a { display: inline-flex; align-items: center; gap: 10px; color: var(--cs-ink); text-decoration: none; font-size: var(--cs-body); border-bottom: 1px solid currentColor; padding-bottom: 4px; white-space: nowrap; }
.cs-xref__a svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .4s var(--cs-ease); }
.cs-xref__a:hover svg { transform: translate(2px, -2px); }
@media (max-width: 900px) { .cs-xref { grid-template-columns: 1fr; } }

/* gallery items that must show the whole image (desktop screenshots) */
.cs-gallery__item.is-full .cs-gallery__frame { height: auto; overflow: visible; }
.cs-gallery__item.is-full .cs-gallery__frame img { height: auto; object-fit: initial; }
.cs-gallery:has(.is-full) { align-items: start; }
/* framed desktop screenshots get a soft lift off the page */
img[src*="/agent-fabric/"]:not([src*="cover"]) { filter: drop-shadow(0 22px 44px rgba(18, 24, 38, .16)); }