/* ==========================================================
   angelov-design.com · cinematic edition
   Brand tokens: BUILD-PLAN.md, section 17.
   ========================================================== */

:root {
  /* Indigo (primary, from the logo) */
  --indigo-300: #94acfe;
  --indigo-400: #637fff;
  --indigo-500: #414ffe;
  --indigo-600: #2e00e9;
  --indigo-700: #2102b4;
  --indigo-900: #0c005b;
  /* Amber (accent) */
  --amber-400: #f5b75d;
  /* Ink (neutrals) */
  --ink-50: #f8fafe;
  --ink-200: #e1e4ed;
  --ink-400: #a2a4ac;
  --ink-800: #1d1f25;
  --ink-950: #04060a;

  /* Roles, light theme: white and indigo tinted grays */
  --ink-100: #eff2fa;
  --ink-600: #53555c;
  --ink-900: #0d0f15;
  --bg: #ffffff;
  --bg-alt: var(--ink-100);
  --surface: var(--ink-100);
  --surface-raised: #ffffff;
  --plate: var(--ink-50);
  --border: var(--ink-200);
  --text: var(--ink-900);
  --text-muted: var(--ink-600);
  /* Brand color: black. Indigo stays only in the logo. */
  --primary: var(--ink-900);
  --primary-text: var(--ink-900);
  --on-primary: #ffffff;
  --btn-radius: 999px;
  --accent: var(--amber-400);
  --on-accent: var(--ink-950);

  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  --gutter: 24px;
  --max: 1440px;
  --radius: 20px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

@media (min-width: 900px) {
  :root { --gutter: 48px; }
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--primary-text);
  outline-offset: 4px;
  border-radius: 4px;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--text);
  color: var(--bg);
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 16px; }

.mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-text);
  margin-bottom: 24px;
}

.aside {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15em;
  color: var(--primary);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: clamp(40px, 6vw, 80px);
}

section {
  padding: clamp(96px, 14vw, 200px) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}

/* Project themes: each case study carries its own brand.
   Set data-project on <body> (case study page) or on a work card. */
[data-project="co2-calculator"]  { --project: #09865c; --project-text: #096b4b; --on-project: #ffffff; --btn-radius: 8px;  --radius: 16px; }
[data-project="onebank"]         { --project: #2563eb; --project-text: #2a31a6; --on-project: #ffffff; --btn-radius: 12px; --radius: 22px; }
[data-project="stayfitar"]       { --project: #ff8421; --project-text: #a84d06; --on-project: #171b1e; --btn-radius: 10px; --radius: 18px; --project-fill: linear-gradient(100deg, #f6a768, #f56d00); }
/* STAYFITAR uses its orange gradient on filled elements */
body[data-project="stayfitar"] .btn--primary,
body[data-project="stayfitar"] .chapter-block blockquote,
body[data-project="stayfitar"] .chapter-block > .mono { background: var(--project-fill); }
[data-project="weider-bulgaria"] { --project: #e60000; --project-text: #d40000; --on-project: #ffffff; --btn-radius: 4px;  --radius: 6px; }
[data-project] { --primary: var(--project); --primary-text: var(--project-text); --on-primary: var(--on-project); }
[data-project="weider-bulgaria"] .page-title, [data-project="weider-bulgaria"] .chapter-block h2,
[data-project="weider-bulgaria"] .chapter-block h3, [data-project="weider-bulgaria"] .cs-summary__result p,
[data-project="stayfitar"] .page-title, [data-project="stayfitar"] .chapter-block h2,
[data-project="stayfitar"] .chapter-block h3, [data-project="stayfitar"] .cs-summary__result p { font-family: "Montserrat", var(--font-display); letter-spacing: -0.03em; }
body[data-project] .nav .btn--small { --btn-radius: 999px; }
body[data-project] .chapter-block .cards li { border-top: 3px solid var(--project); }
body[data-project] .cs-index a span { color: var(--project-text); }
body[data-project] .cs-summary__card { border-top: 4px solid var(--project); }
/* Home cards share one neutral look; each project's colors live only on its own case study page */
.card[data-project] { --primary-text: var(--ink-900); --radius: 20px; } /* the site radius, not the project one */
.card[data-project] .card__tags { color: var(--text-muted); }

/* Full-bleed gray bands behind some sections */
.stats, .pillars, .ai {
  background: var(--bg-alt);
  box-shadow: 0 0 0 100vmax var(--bg-alt);
  clip-path: inset(0 -100vmax);
}
.pillars .pillar, .ai .ai__card:not(.ai__card--lit) { background: var(--surface-raised); }

/* ---------- Grain ---------- */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 90;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.8s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); }
  75% { transform: translate(-2%, -1%); }
  100% { transform: translate(1%, 3%); }
}

/* ---------- Cursor (desktop with a fine pointer only) ---------- */
.cursor {
  mix-blend-mode: multiply;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 95;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--primary);
  pointer-events: none;
  opacity: 0;
  transition: width 0.3s var(--ease), height 0.3s var(--ease), margin 0.3s var(--ease), background 0.3s, border 0.3s;
}
.cursor.is-active { opacity: 0; }
.cursor.is-hover {
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  background: transparent;
  border: 1.5px solid var(--primary);
}
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px var(--gutter);
  transition: transform 0.5s var(--ease), background 0.3s;
}
.nav.is-hidden { transform: translateY(-110%); }
.nav.is-solid { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--border); }
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}
.nav__logo img { width: 40px; }
.nav__links { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 32px); font-size: 15px; }
.nav__links a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: var(--text-muted);
  transition: color 0.2s;
}
.nav__links a:not(.btn):hover { color: var(--text); }
.nav__toggle { display: none; }

/* Phones: a menu button opens a full screen menu with big, easy to tap links */
@media (max-width: 760px) {
  .nav__toggle { position: relative; z-index: 2; margin-left: auto; display: grid; place-content: center; gap: 6px; width: 48px; height: 48px; margin-right: -8px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
  .nav__toggle span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--ink-900); transition: transform 0.3s var(--ease); }
  .nav.is-open .nav__toggle span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav.is-open .nav__toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .nav__logo { position: relative; z-index: 2; }
  .nav.is-open { transform: none; background: none; box-shadow: none; backdrop-filter: none; }
  .nav__links { position: fixed; inset: 0; z-index: 1; flex-direction: column; align-items: stretch; gap: 0; padding: 104px var(--gutter) 40px; background: #fff; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity 0.3s ease, transform 0.3s var(--ease), visibility 0s linear 0.3s; }
  .nav.is-open .nav__links { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s ease, transform 0.3s var(--ease); }
  .nav__links li { border-bottom: 1px solid var(--border); }
  .nav__links a:not(.btn) { display: flex; min-height: 72px; color: var(--ink-900); font-family: var(--font-display); font-size: 34px; font-weight: 800; letter-spacing: -0.03em; }
  .nav__links li:last-child { margin-top: auto; border: 0; }
  .nav__links .btn--small { display: flex; justify-content: center; width: 100%; min-height: 56px; font-size: 17px; }
  body.menu-open { overflow: hidden; }
  body.menu-open .twin { display: none; } /* it sat on top of the Download CV button */
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: var(--btn-radius);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow 0.3s var(--ease), background 0.3s, color 0.3s, border-color 0.3s;
  will-change: transform;
}
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover { box-shadow: 0 12px 32px rgba(13, 15, 21, 0.22); transform: translateY(-1px); }
.btn--ghost { border: 1px solid var(--ink-200); color: var(--text); background: var(--surface-raised); }
.btn--ghost:hover { border-color: var(--text); }
.btn--small { min-height: 44px; padding: 0 18px; font-size: 14px; background: var(--text); color: #fff; }
.btn--small:hover { background: var(--ink-600); }

/* ---------- Film ---------- */
.film {
  position: relative;
  max-width: none;
  padding: 0;
  height: 400vh;
}
.film__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  /* The hero sits in normal flow at the bottom, always below the fixed nav. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(96px, 14vh, 140px) 0 clamp(32px, 7vh, 88px);
  background:
    radial-gradient(55% 50% at 62% 48%, rgba(13, 15, 21, 0.05), transparent 70%),
    var(--bg);
}
.film__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.film.has-frames .film__canvas { opacity: 1; }
.film.has-frames .knot { display: none; }

.knot { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
/* On wide screens the knot sits to the right, behind the empty space, so it never crosses the headline. */
@media (min-width: 1024px) { .knot { left: 22%; } }
.knot path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.knot__tangle { stroke: var(--ink-900); stroke-width: 2; opacity: 0.8; }
.knot__line { stroke: var(--ink-900); stroke-width: 2.4; }

.film__hero {
  position: relative;
  margin: 0 var(--gutter);
  max-width: 1200px;
  z-index: 2;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, min(8.4vw, 12.5vh), 152px);
  line-height: 0.95;
  letter-spacing: -0.045em;
}
.hero-title em {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--text);
}
/* Amber works as a highlighter, never as text on white. */
.hero-title em .line-mask, .hero-title em:not(:has(.line-mask)) {
  background: linear-gradient(transparent 62%, var(--accent) 62%);
  box-decoration-break: clone;
}
.hero-sub { margin-top: clamp(16px, 3vh, 28px); max-width: 620px; color: var(--text-muted); font-size: clamp(17px, 1.4vw, 20px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(20px, 4vh, 36px); }

.film__captions { position: absolute; top: 50%; right: var(--gutter); width: min(380px, 80vw); transform: translateY(-50%); z-index: 2; }
.caption { position: absolute; inset: 0 0 auto 0; opacity: 0; }
.caption .mono { color: var(--primary-text); }
.caption p { margin-top: 10px; font-family: var(--font-serif); font-style: italic; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.2; }

.film__skip {
  position: absolute;
  top: 96px;
  right: var(--gutter);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-muted);
  text-decoration: none;
}
.film__skip:hover { color: var(--text); }
.film__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(13, 15, 21, 0.08); z-index: 3; }
.film__progress span { display: block; height: 100%; width: 100%; background: var(--primary); transform-origin: left; transform: scaleX(0); }

/* ---------- Stats ---------- */
.stats { padding-top: clamp(80px, 10vw, 140px); padding-bottom: clamp(80px, 10vw, 140px); border-bottom: 1px solid var(--border); }
.stats__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; }
.stats__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(56px, 7vw, 112px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
}
.stats__list li:first-child .stats__num { color: var(--text); }
.stats__list li:first-child .stats__num, .marker {
  background: linear-gradient(transparent 62%, var(--accent) 62%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.stats__list li:first-child .stats__num { display: inline-block; padding: 0 0.06em; }
.marker .line-mask { overflow: visible; }
.stats__label { display: block; margin-top: 12px; color: var(--text-muted); max-width: 240px; }

/* ---------- Mission ---------- */
.mission__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5.2vw, 84px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  max-width: 1200px;
}
.mission__title .word { opacity: 0.16; }
.mission__title .marker { background-size: 100% 100%; }
.mission__sub { margin-top: 40px; max-width: 640px; color: var(--text-muted); font-size: 20px; }

/* ---------- Pillars ---------- */
.pillars__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.pillar {
  position: relative;
  padding: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pillar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 100%;
  height: 4px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.pillar:hover::before { transform: scaleX(1); }
.pillar__num { color: var(--primary-text); }
.pillar h3 { margin-top: 40px; font-family: var(--font-display); font-weight: 700; font-size: 34px; letter-spacing: -0.02em; line-height: 1.1; }
.pillar p { margin-top: 16px; color: var(--text-muted); }
/* Phones: no tall card, the title follows the number instead of sinking to the bottom */
@media (max-width: 640px) {
  .pillar { padding: 28px 24px; }
  .pillar h3 { margin-top: 24px; font-size: 28px; }
}

/* ---------- AI ---------- */
.ai__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.ai__card { padding: 36px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.ai__card h3 { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: -0.02em; }
.ai__card p { margin-top: 14px; color: var(--text-muted); }
.ai__card--lit { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.ai__card--lit p { color: rgba(255, 255, 255, 0.86); }

/* ---------- Work ---------- */
.work__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.card { grid-column: span 12; }
@media (min-width: 900px) {
  .card { grid-column: span 5; }
  .card--wide { grid-column: span 7; }
}
.card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.4s;
}
.card__link:hover { border-color: var(--ink-900); box-shadow: 0 24px 60px rgba(13, 15, 21, 0.08); }
.card__media { aspect-ratio: 16 / 10; background: #fff; border-bottom: 1px solid var(--border); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.card__media img { width: 100%; height: 100%; object-fit: contain; padding: 6%; transition: transform 0.8s var(--ease); }
.card__link:hover .card__media img { transform: scale(1.03); }
.card__body { padding: 32px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card__tags { color: var(--primary-text); }
.card__body h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3vw, 44px); letter-spacing: -0.03em; transition: transform 0.4s var(--ease); }
.card__link:hover .card__body h3 { transform: translateY(-4px); }
.card__body p { color: var(--text-muted); }
.card__cta { margin-top: auto; padding-top: 12px; font-weight: 600; color: var(--primary-text); }

/* ---------- CTA ---------- */
.cta { position: relative; min-height: 90vh; display: flex; flex-direction: column; justify-content: center; color: #fff; background: var(--primary); box-shadow: 0 0 0 100vmax var(--primary); clip-path: inset(0 -100vmax); }
.cta .btn--primary { background: #fff; color: var(--ink-900); }
.cta .btn--primary:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); }
.cta .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.cta .btn--ghost:hover { border-color: #fff; }
.cta__line { position: absolute; left: 0; right: 0; top: 30%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent); transform: scaleX(0); }
.cta__title em { font-style: normal; color: var(--accent); }
.cta__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, 11vw, 200px); line-height: 0.92; letter-spacing: -0.05em; }
.cta__sub { margin-top: 24px; font-size: 22px; color: rgba(255, 255, 255, 0.85); }
@media (max-width: 640px) {
  .cta { min-height: 0; padding-top: 96px; padding-bottom: 96px; } /* the 90vh band left a screen of empty dark on phones */
  .cta__sub { font-size: 19px; }
}

/* ---------- Footer ---------- */
.footer { background: var(--bg); position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px 24px; padding: 32px var(--gutter) 40px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 14px; }
/* The copyright sits in the middle; Back to top stays alone on the left, away from the AI twin */
.footer__copy { grid-column: 2; grid-row: 1; margin: 0; text-align: center; }
.footer__top { grid-column: 1; grid-row: 1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--text); font-weight: 500; text-decoration: none; }
.footer__top span { transition: transform 0.2s var(--ease); }
.footer__top:hover span { transform: translateY(-3px); }
@media (max-width: 640px) {
  .footer { grid-template-columns: 1fr; }
  .footer__copy { grid-column: 1; }
  .footer__top { grid-row: 2; }
}

/* ---------- Split text ---------- */
.word { display: inline-block; white-space: pre; }
.line-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; }

/* ---------- Mobile and reduced motion: no pinned film ---------- */
@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  .film { height: auto; }
  .film__stage { position: relative; height: auto; min-height: 100svh; padding: 120px 0 56px; }
  .film__captions, .film__progress { display: none; }
  .knot { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
  .mission__title .word { opacity: 1; }
}

/* ==========================================================
   Inner pages: case studies, about, contact, 404
   ========================================================== */
.page { padding-top: clamp(120px, 16vh, 180px); }
.page-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, min(9vw, 14vh), 152px);
  line-height: 0.95;
  letter-spacing: -0.045em;
}
.page-intro { margin-top: 28px; max-width: 760px; font-size: clamp(18px, 1.5vw, 22px); color: var(--text-muted); }
.nda-note { margin-top: 20px; max-width: 760px; font-size: 15px; color: var(--text-muted); border-left: 2px solid var(--primary); padding-left: 14px; }

.cs-summary { padding-top: 0; padding-bottom: 0; }
.cs-summary__card { display: flex; flex-wrap: wrap; gap: 40px; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.cs-summary__result { flex: 2 1 360px; }
.cs-summary__result p { margin-top: 10px; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2; letter-spacing: -0.02em; }
.cs-summary dl { flex: 1 1 280px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 0; }
.cs-summary dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-text); }
.cs-summary dd { margin: 4px 0 0; }

.cs-cover { padding-top: 40px; padding-bottom: 0; }
.plate { border-radius: var(--radius); background: var(--plate); border: 1px solid var(--border); overflow: hidden; }
.plate img { width: 100%; height: auto; }
.cs-cover .plate img { padding: 4%; }

.cs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px; padding-top: 64px; padding-bottom: 0; }
.cs-stats .stats__num { font-size: clamp(44px, 5vw, 80px); }
.cs-stats li:last-child .stats__num { color: var(--primary); }

.cs-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 56px; }
.cs-index { flex: 1 1 200px; min-width: 0; }
@media (min-width: 900px) { .cs-index { position: sticky; top: 110px; } }
.cs-index ol { display: grid; gap: 6px; }
.cs-index a { display: inline-flex; gap: 10px; min-height: 36px; align-items: center; text-decoration: none; color: var(--text-muted); font-size: 15px; transition: color 0.2s; }
.cs-index a:hover, .cs-index a.is-current { color: var(--text); }
.cs-index a span { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.cs-chapters { flex: 999 1 560px; min-width: 0; display: grid; gap: clamp(72px, 9vw, 120px); }
.chapter-block { scroll-margin-top: 110px; }
.chapter-block > .mono { color: var(--primary-text); }
.chapter-block h2 { margin: 8px 0 20px; font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 4.4vw, 64px); letter-spacing: -0.035em; line-height: 1; }
.chapter-block h3 { margin: 32px 0 12px; font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.01em; }
.chapter-block p { max-width: 720px; color: var(--text-muted); margin-bottom: 16px; }
.chapter-block p a { color: var(--primary-text); }
.chapter-block .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 20px 0 8px; }
.chapter-block .cards li { padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.chapter-block .cards strong { display: block; font-family: var(--font-display); font-size: 20px; letter-spacing: -0.01em; }
.chapter-block .cards span { display: block; margin-top: 8px; color: var(--text-muted); font-size: 16px; }
.chapter-block figure { margin: 28px 0 0; }
.chapter-block figcaption { margin-top: 10px; font-size: 14px; color: var(--text-muted); }
.chapter-block blockquote { margin: 32px 0 0; padding: 36px; border-radius: var(--radius); background: var(--primary); }
.chapter-block blockquote p { margin: 0; max-width: none; color: var(--on-primary); font-family: var(--font-serif); font-style: italic; font-size: clamp(28px, 3vw, 44px); line-height: 1.15; }
.chapter-block blockquote footer { margin-top: 12px; color: var(--on-primary); opacity: 0.8; font-size: 15px; }

.cs-actions { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 0; padding-bottom: 0; }
.cs-next { padding-bottom: clamp(96px, 12vw, 160px); }
.cs-next a { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 32px; border-top: 1px solid var(--border); text-decoration: none; }
.cs-next .mono { color: var(--text-muted); }
.cs-next strong { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 6vw, 96px); letter-spacing: -0.04em; line-height: 1; transition: color 0.3s; }
.cs-next a:hover strong { color: var(--primary); }

/* About (v3 bento system, spacing 16 / 24 / 40 / 64 / 96 px) */
main.page > .about-hero { padding-top: 40px; padding-bottom: 96px; display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { main.page > .about-hero { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; } }
.about-hero__photo { margin: 0; max-width: 520px; aspect-ratio: 969 / 1400; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--plate); }
.about-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.about-hero .page-title { font-size: clamp(44px, 5.2vw, 88px); }
.about-hero .page-intro { margin-top: 24px; }
.about-hero .hero-actions { margin-top: 40px; }
@media (max-width: 1023px) { .about-hero__photo { order: 2; max-width: 360px; } }
@media (max-width: 640px) { .about-hero__photo { max-width: 240px; } }

.about-steps { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .about-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .about-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.about-steps .mono { color: var(--text-muted); }
.about-proof { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); font-size: 15px !important; }
.about-proof a { color: var(--text); text-underline-offset: 3px; }
.bcard__list { margin-top: 8px; }

/* Key tools: a little macOS style Dock. Icons sit on a frosted shelf, grouped by what they're for;
   on hover the icon grows and lifts and its neighbors follow a bit, like the real Dock. */
.dock { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 0; width: fit-content; max-width: 100%; margin: 20px auto 0; padding: 18px 20px 14px; border: 1px solid var(--border); border-radius: 28px; background: linear-gradient(180deg, var(--ink-50), var(--ink-100)); }
.dock__group { padding: 0 20px; }
.dock__group + .dock__group { border-left: 1px solid var(--ink-200); }
.dock__label { margin: 0 0 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.dock__apps { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; }
.dock__app { display: grid; justify-items: center; gap: 8px; width: 64px; }
.dock__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; transform-origin: 50% 100%; transition: transform 0.25s var(--ease); filter: drop-shadow(0 6px 10px rgba(13, 15, 21, 0.16)); }
.dock__icon img { width: 100%; height: 100%; object-fit: contain; }
.dock__icon--text { background: var(--ink-900); color: #fff; font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.dock__name { font-size: 12px; font-weight: 500; line-height: 1.2; text-align: center; color: var(--text-muted); transition: color 0.2s; }
.dock__app:hover .dock__name { color: var(--text); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .dock__app:hover .dock__icon { transform: translateY(-10px) scale(1.3); }
  .dock__app:hover + .dock__app .dock__icon, .dock__app:has(+ .dock__app:hover) .dock__icon { transform: translateY(-4px) scale(1.12); }
}
@media (max-width: 699px) {
  .dock { display: grid; gap: 20px; width: auto; padding: 18px; }
  .dock__group { padding: 0; }
  .dock__group + .dock__group { padding-top: 18px; border-left: 0; border-top: 1px solid var(--ink-200); }
  .dock__apps { flex-wrap: wrap; gap: 12px 6px; }
  .dock__app { width: 54px; }
  .dock__icon { width: 46px; height: 46px; border-radius: 12px; }
  .dock__icon--text { font-size: 15px; }
}

/* A touch of color on About: the same amber highlighter as the home hero */
.page-title em { font-family: var(--font-serif); font-weight: 400; font-style: italic; letter-spacing: -0.02em; }
.page-title em .line-mask, .page-title em:not(:has(.line-mask)), .cs3-lede mark { background: linear-gradient(transparent 62%, var(--accent) 62%); box-decoration-break: clone; -webkit-box-decoration-break: clone; color: inherit; }

/* Phones: less air above the content, the portrait centered */
@media (max-width: 640px) {
  .page { padding-top: 104px; }
  main.page > .about-hero { padding-top: 0; padding-bottom: 64px; }
}
@media (max-width: 1023px) { .about-hero__photo { margin-inline: auto; } }

.about-cta { text-align: center; }
.about-cta .cs3-lede { margin: 0 auto 40px; }
.about-cta .hero-actions { justify-content: center; }

/* Contact form */
/* Contact (v3): the title on white, then a gray band with three ways to reach me and the form in a card */
main.page > .contact-hero { padding-top: 40px; padding-bottom: 64px; }
.contact-hero .page-intro { margin-top: 24px; }
.contact-bento { display: grid; gap: 16px; }
@media (min-width: 1024px) {
  /* The form card matches the height of the three cards beside it: the message box takes the extra room */
  .contact-bento { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr); align-items: stretch; }
  .contact-form-card .form { flex: 1; grid-template-rows: auto auto 1fr; }
  .contact-form-card .form > div:has(textarea) { display: flex; flex-direction: column; }
  .contact-form-card .form textarea { flex: 1; min-height: 160px; resize: none; }
}
.contact-ways { display: grid; gap: 16px; }
.contact-ways .btn { align-self: flex-start; margin-top: 8px; }
.contact-email { font-size: 19px; overflow-wrap: anywhere; }
.contact-form-card .form { margin-top: 8px; max-width: none; }
@media (max-width: 640px) {
  main.page > .contact-hero { padding-top: 0; }
  .contact-form-card .form button { justify-self: stretch; width: 100%; justify-content: center; }
}

.form { display: grid; gap: 22px; max-width: 640px; margin-top: 48px; }
.form label { display: block; margin-bottom: 8px; font-weight: 500; }
.form input, .form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 17px;
}
.form input:focus, .form textarea:focus { outline: 2px solid var(--primary-text); outline-offset: 2px; border-color: transparent; }
.form [aria-invalid="true"] { border-color: #d92d20; }
.form .error { margin-top: 8px; font-size: 15px; color: #b42318; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status { padding: 18px 20px; border-radius: 14px; }
.form__status--ok { background: #e7f6ee; color: #146c43; }
.form__status--error { background: #fdecea; color: #8a1c14; }
.form button { justify-self: start; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.form button[disabled] { opacity: 0.6; cursor: wait; }

/* Feature rows: device image on a light plate, text beside it, sides alternate */
.feature { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 40px; }
@media (min-width: 900px) {
  .feature { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .feature--flip .feature__media { order: 2; }
}
.feature__media { display: flex; align-items: center; justify-content: center; gap: 4%; padding: clamp(24px, 4vw, 48px); border-radius: var(--radius); background: var(--plate); border: 1px solid var(--border); }
.feature__media img { width: 100%; max-height: 520px; object-fit: contain; }
.feature__media--multi img { width: 46%; }
.feature__text h3 { margin: 0 0 12px; }
.feature__text p { margin: 0; }

/* Stronger project branding on case study pages */
body[data-project] .cs-summary__card { background: color-mix(in srgb, var(--project) 9%, #ffffff); border-color: color-mix(in srgb, var(--project) 28%, #ffffff); }
body[data-project] .cs-summary dt, body[data-project] .cs-summary__result .mono { color: var(--project-text) !important; }
body[data-project] .chapter-block > .mono { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 32px; padding: 0 10px; border-radius: var(--btn-radius); background: var(--project); color: var(--on-project); font-size: 13px; }
body[data-project] .cs-stats .stats__num { color: var(--project-text); }

/* Brand palette swatches inside a case study */
.swatches { display: flex; flex-wrap: wrap; gap: 28px; margin: 24px 0 8px; }
.swatches li { display: grid; gap: 10px; justify-items: start; font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.swatches span { display: block; width: 88px; height: 88px; border-radius: 14px; box-shadow: 0 1px 0 var(--border), 0 8px 20px rgba(13, 15, 21, 0.08); border: 1px solid var(--border); }
.swatches strong { color: var(--text); font-family: var(--font-body); font-size: 15px; }
.swatch-scale { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.swatch-scale li { display: grid; gap: 6px; justify-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.swatch-scale span { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border); }

/* Illustrations, galleries and videos inside case studies */
.chapter-block .illus { margin: 28px 0 0; max-width: 320px; }
.chapter-block .illus img { width: 100%; height: auto; }
.gallery { display: grid; gap: 16px; margin: 28px 0 0; }
.gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.gallery .plate { display: flex; align-items: center; justify-content: center; padding: 16px; }
.gallery .plate img { max-height: 620px; width: auto; max-width: 100%; }
.gallery figcaption { grid-column: 1 / -1; }
@media (max-width: 640px) { .gallery--2 { grid-template-columns: 1fr; } }
.plate--video video { display: block; width: 100%; height: auto; }
.feature__media--video video { width: 42%; height: auto; border-radius: 28px; box-shadow: 0 20px 40px rgba(13, 15, 21, 0.12); }

/* ==========================================================
   Case study v2: editorial, calm, one consistent rhythm.
   Spacing scale for case studies: 16 / 24 / 40 / 64 / 96 px.
   ========================================================== */
main.page > section { padding-top: 0; padding-bottom: 0; }
main.page section section { padding: 0; max-width: none; } /* nested sections (chapters) skip the home page section padding */
main.page > .cs-hero { padding-top: 40px; padding-bottom: clamp(96px, 9vw, 136px); }
main.page > .cs-summary { padding-bottom: 64px; }
main.page > .cs-cover { padding-bottom: 96px; }
main.page > .cs-stats { padding: 0 var(--gutter) 96px; max-width: var(--max); margin: 0 auto; }
main.page > .cs-body { padding-bottom: 96px; }
main.page > .cs-actions { padding-bottom: 96px; justify-content: center; }
main.page > .cs-next { padding-bottom: 96px; }

/* Summary: a statement and a spec row, no tinted box */
body[data-project] .cs-summary__card,
.cs-summary__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding: 40px 0 0;
  border: 0;
  border-top: 1px solid var(--ink-900);
  border-radius: 0;
  background: none;
}
.cs-summary__result .mono { color: var(--text-muted); }
body[data-project] .cs-summary__result .mono { color: var(--text-muted) !important; }
.cs-summary__result p { max-width: 980px; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.15; }
.cs-summary dl { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; border-top: 1px solid var(--border); }
.cs-summary dl > div { padding: 16px 24px 0 0; }
body[data-project] .cs-summary dt { color: var(--text-muted) !important; }
.cs-summary dd { font-weight: 500; }

/* Chapter heading: small project colored number, then the title */
.cs-chapters { gap: 96px; }
body[data-project] .chapter-block > .mono {
  display: block;
  min-width: 0;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--project-text);
  font-size: 14px;
}
.chapter-block h2 { margin: 8px 0 24px; font-size: clamp(32px, 3.6vw, 52px); }
.chapter-block h3 { margin: 64px 0 16px; font-size: 22px; } /* each method or topic gets its own breathing room */
.chapter-block h2 + h3 { margin-top: 24px; }
.chapter-block .swatches { margin: 24px 0 0; }
.chapter-block p { margin: 0 0 16px; }
.chapter-block > *:last-child { margin-bottom: 0; }

/* Spec list instead of boxed cards */
.chapter-block .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 40px; margin: 24px 0 0; }
.chapter-block .cards li,
body[data-project] .chapter-block .cards li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  padding: 20px 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: none;
}
.chapter-block .cards__n { font-family: var(--font-mono); font-size: 13px; color: var(--project-text, var(--text-muted)); padding-top: 3px; }
.chapter-block .cards strong { font-size: 18px; }
.chapter-block .cards span:not(.cards__n) { margin-top: 6px; font-size: 16px; }

/* Text beside an illustration, like the old portfolio */
.split { display: grid; gap: 40px; align-items: center; margin: 24px 0 0; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.split .illus { margin: 0; max-width: 360px; justify-self: center; }
.split__text > *:last-child { margin-bottom: 0; }

/* Figures and galleries share one rhythm */
.chapter-block figure, .chapter-block .feature, .gallery { margin-top: 40px; }
.plate, .feature__media { border-radius: 12px; }

/* Quote: large type, no colored block */
.chapter-block blockquote,
body[data-project="stayfitar"] .chapter-block blockquote {
  margin: 64px 0 0;
  padding: 0;
  border-radius: 0;
  background: none;
}
.chapter-block blockquote p { color: var(--text); font-size: clamp(30px, 3.4vw, 48px); }
.chapter-block blockquote p::before { content: "“"; display: block; height: 0.6em; color: var(--project, var(--text)); font-size: 2em; line-height: 1; }
.chapter-block blockquote footer { color: var(--text-muted); opacity: 1; }

/* Feature rows: tighter and aligned to the same rhythm */
.feature { gap: 40px; }
.feature + .feature { margin-top: 64px; }

/* Swatches: smaller, quieter */
.swatches span { width: 72px; height: 72px; border-radius: 10px; box-shadow: none; }

/* ==========================================================
   Hero (text only) and the story thread
   ========================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.hero {
  position: relative;
  max-width: none;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(110px, 16vh, 160px) var(--gutter) clamp(40px, 8vh, 88px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero__inner { max-width: 1240px; }
.hero__scroll { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); color: var(--text-muted); text-decoration: none; } /* bottom center: clear of the buttons and of the twin's invite on the right */
.hero__scroll:hover { color: var(--text); }
/* Below desktop width the hero sizes to its content: a full screen hero left a big empty gap
   above the headline on tablets and phones. The scroll hint only fits beside the buttons on
   wide screens; narrower, it ran into them and into the AI twin. */
@media (max-width: 1199px) { .hero__scroll { display: none; } }
@media (max-width: 1023px) {
  .hero { min-height: 0; justify-content: flex-start; padding-top: 128px; padding-bottom: 64px; }
}
/* Phones: the hero and page buttons stack, full width and the same size */
@media (max-width: 640px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; justify-content: center; text-align: center; }
}

/* ==========================================================
   Story: a sphere of software problems. On wide screens with motion, script.js adds
   .is-scene: the section pins for a short scroll, the canvas draws the sphere's tiles,
   the junk windows ride on its surface, scrolling flies you into it so everything
   scatters past, and the story files come out of the middle into the bento grid.
   Without the scene (no JS, phones, reduced motion) the clean grid is the default.
   ========================================================== */
.journey { position: relative; max-width: none; padding: 0; background: var(--ink-50); overflow: hidden; }
.journey__stage { position: relative; padding: 96px var(--gutter); }
.journey__sphere, .journey__intro, .junks { display: none; }

/* Scene mode: one screen tall, the grid centered in it, the sphere layers on top */
.journey.is-scene .journey__stage { display: flex; align-items: center; height: 100vh; height: 100svh; padding: 88px var(--gutter) 32px; }
.journey.is-scene .journey__sphere { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; pointer-events: none; }
.journey.is-scene .junks { position: absolute; inset: 0; z-index: 2; display: block; pointer-events: none; }
.journey.is-scene .journey__intro { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; margin: 0; padding: 0 var(--gutter); font-family: var(--font-display); font-size: clamp(32px, 4.4vw, 64px); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; text-align: center; color: var(--ink-900); pointer-events: none; }
.journey.is-scene .dash { width: 100%; }
.journey.is-scene .journey__stops { gap: 16px; }
.journey.is-scene .stop { padding: 42px 18px 16px; }
.journey.is-scene .stop__media { width: 60px; height: 90px; }
.journey.is-scene .stop__text { font-size: 14px; }
.journey.is-scene .journey__end { margin-top: 24px; }

/* Junk windows: problems on the sphere's surface; script.js places and scales them */
.junk { position: absolute; left: 0; top: 0; display: grid; gap: 4px; width: max-content; max-width: 260px; padding: 12px 34px 12px 14px; border: 1px solid var(--ink-400); border-radius: 6px; background: #fff; box-shadow: 0 12px 28px rgba(13, 15, 21, 0.16); font-size: 13px; line-height: 1.35; opacity: 0; will-change: transform, opacity; }
.junk::after { content: "×"; position: absolute; right: 8px; top: 6px; width: 18px; height: 18px; border-radius: 3px; font-size: 16px; line-height: 18px; text-align: center; color: var(--ink-600); }
.junk strong { color: #d93025; }
.junk span { color: var(--text-muted); }
.junk em { display: flex; gap: 4px; margin-top: 4px; font-style: normal; }
.junk b { padding: 2px 8px; border: 1px solid var(--ink-200); border-radius: 3px; font-weight: 500; background: var(--ink-50); }
.junk--todo { background: #fde68a; border-color: #f5b75d; }
.junk--todo strong, .junk--bell strong, .junk--tabs strong, .junk--xls strong { color: var(--ink-900); }
.junk__grid { display: block; width: 200px; height: 64px; background: linear-gradient(var(--ink-200) 1px, transparent 1px) 0 0 / 100% 16px, linear-gradient(90deg, var(--ink-200) 1px, transparent 1px) 0 0 / 40px 100%; }
.junk__bar { display: block; width: 200px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #d93025 3%, var(--ink-100) 3%); }

/* The bento grid: the intro across the top, then two rows of three files in order */
.dash { position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; }
.journey__stops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "head head head" "sales banners store" "banks meetings ai"; gap: 24px; margin: 0; padding: 0; list-style: none; }
.stop--knot { grid-area: head; } .stop--sales { grid-area: sales; } .stop--banners { grid-area: banners; } .stop--store { grid-area: store; }
.stop--banks { grid-area: banks; } .stop--meetings { grid-area: meetings; } .stop--ai { grid-area: ai; }

/* A file window: title bar with the file name, then picture, label, title and text */
.stop { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 18px; align-content: start; padding: 46px 22px 22px; border: 1px solid var(--ink-200); border-radius: 14px; background: #fff; box-shadow: 0 14px 34px rgba(13, 15, 21, 0.1); overflow: hidden; }
.stop::before { content: attr(data-file); position: absolute; left: 0; right: 0; top: 0; padding: 8px 14px 8px 52px; border-bottom: 1px solid var(--ink-100); background: var(--ink-50); font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stop::after { content: ""; position: absolute; left: 14px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-200); box-shadow: 12px 0 0 var(--ink-200), 24px 0 0 var(--ink-200); }
.stop__media { grid-row: 1 / span 3; width: 72px; height: 108px; margin: 0; }
.stop__media img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(13, 15, 21, 0.14)); }
.stop__label { font-size: 12px; color: var(--text-muted); }
.stop__title { margin: 2px 0 0; font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.1; letter-spacing: -0.02em; }
.stop__text { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-600); text-wrap: pretty; }
.stop--knot { grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: auto; align-items: baseline; column-gap: 16px; padding-top: 42px; }
.stop--knot .stop__label, .stop--knot .stop__title { white-space: nowrap; }
.stop--knot .stop__text { margin: 0; }

/* The way out under the grid */
.journey__end { margin-top: 40px; }
.journey__end a { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3vw, 44px); line-height: 1.05; letter-spacing: -0.03em; text-decoration: none; }
.journey__end a span { color: var(--text-muted); transition: color 0.2s; }
.journey__end a:hover span { color: var(--text); }

/* While the sphere scene is pinned, the floating twin steps aside so nothing covers it */
body.story-on .twin:not(.is-open) { opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s linear 0.3s; }
.twin { transition: opacity 0.3s; }

/* Small screens: the files as a plain vertical list */
@media (max-width: 899px) {
  .journey { background: none; }
  .journey__stage { padding: 64px var(--gutter); }
  .journey__stops { grid-template-columns: none; grid-template-areas: none; gap: 48px; }
  .stop, .stop--knot { grid-area: auto; display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: none; gap: 4px 20px; align-items: start; padding: 0; border: 0; background: none; box-shadow: none; }
  .stop::before, .stop::after { content: none; }
  .stop__media { display: block; grid-row: span 3; width: 120px; height: 120px; }
  .stop--knot { grid-template-columns: minmax(0, 1fr); } /* the intro has no picture */
  .stop__title { font-size: 24px; }
  .stop__text { margin: 0; font-size: 16px; color: var(--text-muted); }
  .stop--knot .stop__label, .stop--knot .stop__title { white-space: normal; }
  .journey__end { margin-top: 64px; }
  .journey__end a span { display: block; }
}

/* ---------- AI twin chat ---------- */
.twin { position: fixed; right: 20px; bottom: 20px; z-index: 85; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.twin__toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--ink-900); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 12px 32px rgba(13, 15, 21, 0.2); }
.twin__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(245, 183, 93, 0.25); }
.twin__panel { width: min(380px, calc(100vw - 40px)); max-height: min(560px, 70vh); display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 18px; background: #fff; box-shadow: 0 24px 64px rgba(13, 15, 21, 0.18); overflow: hidden; }
.twin__panel[hidden] { display: none; }
.twin__head { display: flex; gap: 12px; align-items: flex-start; padding: 16px 16px 12px; border-bottom: 1px solid var(--border); }
.twin__head strong { font-size: 16px; }
.twin__head p { margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--text-muted); }
.twin__head a { color: var(--text); }
.twin__close { margin-left: auto; width: 36px; height: 36px; flex: none; border: 0; border-radius: 10px; background: var(--surface); font-size: 20px; cursor: pointer; }
.twin__log { flex: 1; overflow-y: auto; padding: 16px; display: grid; gap: 10px; align-content: start; }
.twin__msg { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 1.45; }
.twin__msg--user { justify-self: end; background: var(--ink-900); color: #fff; }
.twin__msg--assistant { justify-self: start; background: var(--surface); }
.twin__msg.is-pending { color: var(--text-muted); }
.twin__chips { display: grid; gap: 8px; padding: 0 16px 12px; }
.twin__chips button { text-align: left; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.twin__chips button:hover { border-color: var(--ink-900); }
.twin__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.twin__form input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--ink-200); border-radius: 12px; font: inherit; font-size: 15px; }
.twin__chips[hidden] { display: none; }
.twin__log { min-height: 160px; }

/* AI twin as a character with an invite bubble */
.twin__toggle {
  position: relative;
  width: 76px;
  height: 76px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  overflow: visible;
  animation: twin-breathe 4s ease-in-out infinite;
}
.twin__toggle:hover { transform: translateY(-2px) scale(1.04); animation: none; }
.twin__avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: var(--surface); }
.twin__status { position: absolute; right: 4px; bottom: 4px; width: 14px; height: 14px; border-radius: 50%; background: #2fbf71; border: 2px solid #fff; }
@keyframes twin-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.twin__invite {
  position: relative;
  width: min(300px, calc(100vw - 40px));
  padding: 16px 40px 16px 16px;
  border-radius: 18px 18px 4px 18px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px rgba(13, 15, 21, 0.14);
  font-size: 15px;
  line-height: 1.45;
  animation: twin-pop 0.4s var(--ease);
}
.twin__invite[hidden] { display: none; }
.twin__invite p { margin: 0 0 12px; }
.twin__invite-go { min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--ink-900); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.twin__invite-close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; font-size: 18px; cursor: pointer; color: var(--text-muted); }
@keyframes twin-pop { from { opacity: 0; transform: translateY(8px) scale(0.96); } }
.twin__head-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: var(--surface); flex: none; }
@media (prefers-reduced-motion: reduce) { .twin__toggle, .twin__invite { animation: none; } }

/* ==========================================================
   AI twin v2: a full character at the bottom edge + a real chat panel
   ========================================================== */
.twin { right: 0; bottom: 0; gap: 0; }
.twin__toggle,
.twin__toggle:hover {
  width: clamp(96px, 8vw, 120px);
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  animation: none;
  transform: none;
  cursor: pointer;
}
.twin__figure {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  object-fit: contain;
  background: none;
  filter: drop-shadow(0 12px 24px rgba(13, 15, 21, 0.18));
  transform-origin: 50% 100%;
  transition: transform 0.4s var(--ease);
  animation: twin-sway 5s ease-in-out 1s infinite;
}
.twin__toggle:hover .twin__figure, .twin__toggle:focus-visible .twin__figure { transform: translateY(-6px) scale(1.03); }
@keyframes twin-peek { from { transform: translateX(110%); } }
/* 3D Spas slides in from the right edge a moment after the page opens (script.js adds .is-peeking) */
.twin.is-peeking .twin__toggle { animation: twin-peek 0.7s var(--ease) 1s backwards; }
@keyframes twin-sway { 0%, 100% { rotate: 0deg; } 50% { rotate: -2deg; } }
video.twin__figure { animation: none; } /* the 3D clip moves on its own */
/* Tucked into the right edge: about a fifth of him stays behind it, like he is peeking around the screen */
.twin__figure { translate: 20% 0; }
.twin.is-open .twin__toggle, .twin.is-open .twin__invite { display: none; }
.twin__status { display: none; }

/* Small "Curious? Ask me" bubble beside the figure; steps aside while the big invite is up */
.twin__tag {
  position: absolute;
  right: calc(100% - 34px); /* the figure sits 20% into the right edge, so the bubble follows it */
  top: 4%;
  z-index: 1;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 16px 16px 4px 16px;
  background: #fff;
  color: var(--ink-900);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(13, 15, 21, 0.14);
  transform-origin: 100% 100%;
  transition: transform 0.3s var(--ease);
  animation: twin-pop 0.4s var(--ease) 1.2s backwards, twin-tag-bob 4s ease-in-out 2s infinite;
}
.twin__toggle:hover .twin__tag, .twin__toggle:focus-visible .twin__tag { transform: scale(1.06); animation-play-state: paused; }
.twin:has(.twin__invite:not([hidden])) .twin__tag { display: none; }
@keyframes twin-tag-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }

/* The invite sits next to the figure with a small gap: the figure is clamp(96px, 8vw, 120px) wide with a
   fifth of it behind the screen edge, and the bubble stops just short of his raised hand */
.twin__invite {
  position: absolute;
  right: calc(clamp(96px, 8vw, 120px) * 0.8 + 10px);
  bottom: calc(clamp(96px, 8vw, 120px) * 0.5);
  border-radius: 18px 18px 4px 18px;
}

/* Panel: a clean assistant side card (white, hairline border, plain answers, boxed composer) */
.twin__panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: min(380px, calc(100vw - 32px));
  height: min(600px, calc(100vh - 100px));
  max-height: none;
  border: 1px solid var(--ink-200);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(13, 15, 21, 0.06), 0 16px 40px rgba(13, 15, 21, 0.12);
}
.twin__head { align-items: center; gap: 10px; padding: 16px 12px 8px 20px; background: #fff; color: var(--text); border: 0; }
.twin__head-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; background: var(--surface); border: 0; }
.twin__who { display: grid; line-height: 1.25; }
.twin__who strong { font-size: 16px; font-weight: 500; }
.twin__close { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; background: none; color: var(--text-muted); font-size: 22px; }
.twin__close:hover { background: var(--surface); color: var(--text); }

.twin__log { display: flex; flex-direction: column; gap: 12px; padding: 12px 20px 16px; min-height: 0; background: #fff; }
.twin__row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: center; }
.twin__row.is-first { margin-top: 8px; }
.twin__row-avatar { grid-column: 1; grid-row: 1; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; background: var(--surface); }
.twin__row-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* the header already names the twin; screen readers still hear it */
.twin__bubble { margin: 0; font-size: 15px; line-height: 1.55; }
.twin__row--bot .twin__bubble { grid-column: 1 / -1; color: var(--text); }
.twin__row--user { grid-template-columns: minmax(0, 1fr); justify-items: end; margin-top: 4px; }
.twin__row--user .twin__bubble { max-width: 85%; padding: 10px 16px; border-radius: 20px 20px 6px 20px; background: var(--surface); color: var(--text); }

/* Thinking: soft gray lines instead of bouncing dots */
.twin__bubble.is-typing { display: grid; gap: 8px; width: 100%; padding: 4px 0; }
.twin__bubble.is-typing .twin__line { display: block; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--ink-100) 0%, var(--ink-200) 50%, var(--ink-100) 100%) 0 0 / 200% 100%; animation: twin-shimmer 1.4s linear infinite; }
.twin__bubble.is-typing .twin__line:last-child { width: 55%; }
.twin__thinking { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 14px; font-weight: 500; font-style: normal; color: transparent; background: linear-gradient(90deg, var(--ink-400) 0%, var(--ink-900) 45%, var(--ink-400) 90%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; animation: twin-shimmer 1.6s linear infinite; }
.twin__thinking::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink-200); border-top-color: var(--ink-900); animation: twin-spin 0.9s linear infinite; }
@keyframes twin-shimmer { to { background-position: -200% 0; } }
@keyframes twin-spin { to { rotate: 360deg; } }

/* Suggestions: quiet rows that turn into a soft pill on hover */
.twin__log .twin__chips { display: grid; justify-items: start; gap: 2px; padding: 4px 0 0; }
.twin__log .twin__chips button { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border: 0; border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: 14px; font-weight: 400; text-align: left; cursor: pointer; }
.twin__log .twin__chips button::before { content: "\21AA"; color: var(--text-muted); font-size: 15px; }
.twin__log .twin__chips button:hover, .twin__log .twin__chips button:focus-visible { background: var(--surface); }

/* Composer: one rounded box with the send button inside */
.twin__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; margin: 0 12px 8px; padding: 12px 10px 10px 16px; border: 1px solid var(--ink-200); border-radius: 20px; background: #fff; box-shadow: none; }
.twin__form:focus-within { border-color: var(--ink-900); box-shadow: none; } /* focus ring needs 3:1 against white; Ink 400 was only 2.4:1 */
.twin__form input { grid-column: 1; border: 0; min-height: 40px; padding: 0; outline: none; font-size: 15px; background: none; }
.twin__form input::placeholder { color: var(--text-muted); }
.twin__form input:focus-visible { outline: none; }
.twin__send { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--ink-900); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s, color 0.2s; }
.twin__send svg { transform: rotate(-90deg); }
.twin__form:has(input:placeholder-shown) .twin__send { background: var(--ink-100); color: var(--ink-400); }
.twin__send:hover { background: var(--ink-600); }
.twin__note { margin: 0; padding: 0 20px 12px; font-size: 12px; text-align: center; color: var(--text-muted); background: #fff; }
.twin__note a { color: var(--text); }

@media (max-width: 640px) {
  .twin__toggle, .twin__toggle:hover { width: 84px; }
  .twin__invite { right: calc(84px * 0.8 + 8px); bottom: 42px; }
  .twin__panel { right: 8px; bottom: 8px; width: calc(100vw - 16px); height: calc(100svh - 16px); }
}
@media (prefers-reduced-motion: reduce) { .twin.is-peeking .twin__toggle, .twin__figure, .twin__tag, .twin__bubble.is-typing .twin__line, .twin__thinking, .twin__thinking::before { animation: none; } .twin__thinking { color: var(--text-muted); } }

/* The panel is a <section>: undo the page section spacing */
.twin__panel { padding: 0; margin: 0; max-width: none; }

/* ==========================================================
   Case study intro: mockup beside the project facts
   ========================================================== */
.cs-hero { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .cs-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; } }
.cs-hero__media img { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; }
.cs-hero__logo { display: block; width: auto; height: 32px; margin-top: 24px; }
.cs-hero .page-title { margin-top: 16px; font-size: clamp(40px, 4.4vw, 72px); line-height: 1; }
.cs-hero .page-intro { margin-top: 24px; font-size: 17px; line-height: 1.6; }
.cs-hero .nda-note { margin-top: 16px; font-size: 14px; }
.cs-hero__facts { display: grid; gap: 8px; margin-top: 24px; font-size: 16px; }
.cs-hero__facts > div { display: flex; flex-wrap: wrap; gap: 0 6px; }
.cs-hero__facts dt { font-weight: 600; color: var(--text); }
.cs-hero__facts dt::after { content: ":"; }
.cs-hero__facts dd { margin: 0; color: var(--text-muted); }
/* The tablet stretches to the height of the text beside it, so both columns share a top and bottom line */
.cs-hero:has(.tablet) { align-items: stretch; }
.cs-hero__media:has(.tablet) { display: flex; }
.cs-hero__media .tablet { flex: 1; display: flex; margin: 0; }
.cs-hero__media .tablet video { flex: 1; min-height: 0; height: 100%; object-fit: cover; object-position: 50% 0; }
/* Two phones drawn in CSS around the prototype videos, the second one a little lower */
.phones { display: flex; justify-content: center; align-items: flex-start; gap: clamp(16px, 2.4vw, 40px); }
.phone { width: min(42%, 260px); padding: 8px; border-radius: clamp(28px, 3vw, 44px); background: #16181d; box-shadow: inset 0 0 0 2px #2a2d35, 0 30px 60px rgba(13, 15, 21, 0.18); }
.phone:nth-child(2) { margin-top: clamp(32px, 5vw, 72px); }
.phone video { display: block; width: 100%; height: auto; border-radius: clamp(20px, 2.4vw, 36px); background: #fff; }

/* A landscape tablet drawn in CSS around the prototype video */
.tablet { padding: clamp(10px, 1.2vw, 18px); border-radius: clamp(20px, 2.2vw, 32px); background: #16181d; box-shadow: inset 0 0 0 2px #2a2d35, 0 30px 60px rgba(13, 15, 21, 0.18); }
.tablet video { display: block; width: 100%; height: auto; border-radius: clamp(8px, 1vw, 14px); background: #fff; }

/* ==========================================================
   Case study v3: bento system shared by all case studies.
   Cards: white, 1px hairline, soft radius, no shadows.
   Spacing scale: 16 / 24 / 40 / 64 / 96 px.
   ========================================================== */
:root { --radius-card: 20px; }
main.page > .cs3-hero { padding-top: 40px; padding-bottom: 64px; display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { main.page > .cs3-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.cs3-hero .page-title { font-size: clamp(48px, 6vw, 104px); }
.cs3-hero__lead { margin-top: 24px; max-width: 620px; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -0.02em; }
.cs3-hero .page-intro { margin-top: 16px; font-size: 17px; line-height: 1.6; }
.cs3-hero .nda-note { margin-top: 16px; font-size: 14px; }
.cs3-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }

/* Stage: layered device composition on a soft plate */
.stage { position: relative; display: flex; justify-content: center; align-items: flex-start; padding: 40px 16px 64px; border-radius: var(--radius-card); background: var(--plate); border: 1px solid var(--border); overflow: hidden; }
.stage__back { position: absolute; left: -6%; top: 14%; width: 46%; height: auto; opacity: 0.95; }
.stage__phone { position: relative; width: min(38%, 240px); }
.stage__phone--1 { z-index: 2; margin-left: 18%; }
.stage__phone--2 { z-index: 1; margin-top: 64px; margin-left: -6%; transform: rotate(5deg); }
.stage .phone { box-shadow: inset 0 0 0 2px #2a2d35; }

/* Meta bento */
main.page > .cs3-meta { padding-bottom: 96px; }

/* Chapters */
main.page > .cs3-ch { padding-top: 96px; padding-bottom: 96px; scroll-margin-top: 80px; }
/* Phones: 64 px between chapters instead of 96, and every button group stacks at full width */
@media (max-width: 640px) {
  main.page > .cs3-ch, main.page > .cs3-meta, main.page > .cs-next { padding-top: 64px; padding-bottom: 64px; }
  main.page > .cs3-meta, main.page > .cs-next { padding-top: 0; }
  main.page > .cs3-hero { padding-top: 8px; }
  .cs3-hero__actions, .cs-actions { flex-direction: column; align-items: stretch; }
  .cs3-hero__actions .btn, .cs-actions .btn, .bcard--link .btn { width: 100%; justify-content: center; text-align: center; }
}
.cs3-ch--band { background: var(--bg-alt); box-shadow: 0 0 0 100vmax var(--bg-alt); clip-path: inset(0 -100vmax); }
.cs3-ch__head { display: grid; gap: 8px; margin-bottom: 24px; }
.cs3-ch__head .mono { color: var(--project-text, var(--text-muted)); }
.cs3-ch__head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 4.4vw, 64px); line-height: 1; letter-spacing: -0.035em; }
.cs3-lede { max-width: 900px; margin-bottom: 40px; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.15; letter-spacing: -0.02em; }
.cs3-p { max-width: 720px; margin: 40px 0 0; color: var(--text-muted); }
.cs3-lede + .cs3-p { margin-top: -16px; margin-bottom: 40px; }
.cs3-h3 { margin: 64px 0 24px; font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.01em; }

/* Bento grid: six columns on desktop, two on tablets, one on phones */
.bento { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento .span-4, .bento .span-6 { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bento .span-1 { grid-column: span 1; }
  .bento .span-2 { grid-column: span 2; }
  .bento .span-3 { grid-column: span 3; }
  .bento .span-4 { grid-column: span 4; }
  .bento .span-6 { grid-column: span 6; }
  .bento .is-tall { grid-row: span 2; }
}
.bento--meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .bento--meta { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .bento--meta .bcard { grid-column: auto; } }
.bcard { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-raised); }
@media (min-width: 1024px) { .bcard { padding: 32px; } }
.bcard__kicker, .bcard__label, .bcard__note { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.bcard__kicker { color: var(--project-text, var(--text-muted)); margin-bottom: 8px; }
.bcard__title { font-family: var(--font-display); font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; }
.bcard p { color: var(--text-muted); font-size: 16px; line-height: 1.55; }
.bcard__list { display: grid; gap: 6px; color: var(--text-muted); font-size: 16px; }
.bcard--meta { padding: 20px 24px; }
.bcard__value { font-weight: 600; font-size: 17px; }
.bcard--stat { justify-content: space-between; gap: 16px; }
.bcard__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 5vw, 80px); line-height: 0.95; letter-spacing: -0.045em; color: var(--project-text, var(--text)); }
.bcard--stat .bcard__label { font-family: var(--font-body); font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--text); }
.bcard__quote p { color: var(--text); font-family: var(--font-serif); font-style: italic; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; }
.bcard__quote footer { margin-top: 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.bcard--quote { justify-content: space-between; }
.bcard--project { background: var(--project, var(--text)); border-color: transparent; color: var(--on-project, #fff); }
.bcard--project p, .bcard--project .bcard__kicker { color: var(--on-project, #fff); }
.bcard--project .bcard__title { font-size: clamp(24px, 2.4vw, 32px); }
.bcard--link { justify-content: center; }
.bcard--link .btn { align-self: flex-start; margin-top: 16px; }

/* Comparison matrix */
.matrix { margin: 40px 0 0; }
.matrix__scroll { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-raised); }
.matrix table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.matrix th, .matrix td { padding: 14px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--border); }
.matrix thead th { border-top: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }
.matrix tbody th { font-weight: 500; width: 34%; }
.matrix td { color: var(--text-muted); }
.matrix__mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; font-size: 12px; font-weight: 700; vertical-align: -5px; }
.matrix__mark--y { background: #e7f6ee; color: #146c43; }
.matrix__mark--n { background: #fdecea; color: #b42318; }
.matrix__mark--w { background: #fdf3e1; color: #8a5a00; }
.matrix__note { font-size: 14px; }
.matrix__legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; font-size: 14px; color: var(--text-muted); }
.matrix figcaption, .flow figcaption { margin-top: 8px; font-size: 14px; color: var(--text-muted); }

/* Flow strip: the screens in order, scrolls sideways on small screens */
.flow { margin: 0; }
.flow__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 1fr); gap: 24px; padding: 40px; overflow-x: auto; scroll-snap-type: x mandatory; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--plate); }
.flow__list li { display: grid; gap: 16px; align-content: start; scroll-snap-align: start; }
.flow__shot { display: flex; align-items: flex-end; justify-content: center; height: clamp(280px, 30vw, 420px); }
.flow__shot img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.flow__label { display: flex; gap: 10px; align-items: baseline; justify-content: center; font-weight: 500; font-size: 16px; }
.flow__n { font-family: var(--font-mono); font-size: 12px; color: var(--project-text, var(--text-muted)); }

/* Annotated close up: numbered pins on the screen, notes beside it */
.anno { display: grid; gap: 40px; align-items: center; margin-top: 64px; }
@media (min-width: 1024px) {
  .anno { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .anno--flip .anno__media { order: 2; }
}
.anno__media { display: flex; justify-content: center; padding: 40px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--plate); }
.anno__frame { position: relative; width: min(100%, 420px); }
.anno__frame img { width: 100%; height: auto; }
.anno__pin, .anno__n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--project, var(--text)); color: var(--on-project, #fff); font-family: var(--font-mono); font-size: 13px; font-weight: 500; flex: none; }
.anno__pin { position: absolute; transform: translate(-50%, -50%); box-shadow: 0 0 0 4px #ffffff; }
.anno__text .cs3-h3 { margin-top: 0; }
.anno__text .cs3-p { margin-top: 0; }
.anno__notes { display: grid; gap: 0; margin-top: 24px; border-top: 1px solid var(--border); }
.anno__notes li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.anno__notes strong { display: block; font-weight: 600; }
.anno__notes p { margin-top: 4px; color: var(--text-muted); font-size: 16px; }
.bcard__quote { margin: 0; }
@media (max-width: 699px) { .bento--meta .bcard:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 699px) {
  .stage { padding: 24px 8px 16px; }
  .stage__phone { width: 44%; }
  .anno__media, .flow__list { padding: 24px; }
}

/* Device stage v2: three whole phones side by side, nothing cropped */
.stage { align-items: center; padding: 64px 32px; overflow: visible; }
.stage__phone { flex: none; width: 30%; max-width: 230px; margin: 0; transform: none; }
.stage__phone--back { z-index: 1; margin-top: 40px; margin-right: -5%; transform: rotate(-6deg); }
.stage__phone--1 { z-index: 3; margin-left: 0; margin-top: 0; }
.stage__phone--2 { z-index: 2; margin-top: 72px; margin-left: -5%; transform: rotate(6deg); }
.phone img { display: block; width: 100%; height: auto; border-radius: clamp(20px, 2.4vw, 36px); background: #fff; }
@media (max-width: 699px) { .stage { padding: 40px 16px; } .stage__phone { width: 32%; } }

/* Flow strip with every screen in the same phone frame */
.flow__shot--phone { height: auto; align-items: flex-start; }
.flow__shot--phone .phone { width: 100%; max-width: 180px; padding: 6px; border-radius: 28px; box-shadow: inset 0 0 0 2px #2a2d35; }
.flow__shot--phone .phone img { border-radius: 22px; }
.flow__list:has(.flow__shot--phone) { grid-auto-columns: minmax(150px, 1fr); }
/* Bigger phones in the hero: the stage gets the wider column and the phones overlap more */
@media (min-width: 1024px) { main.page > .cs3-hero { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 48px; } }
.stage { padding: 56px 24px; }
.stage__phone { width: 39%; max-width: 320px; }
.stage__phone--back { margin-right: -11%; }
.stage__phone--2 { margin-left: -11%; }
@media (max-width: 699px) { .stage { padding: 32px 12px; } .stage__phone { width: 40%; } }
/* Smaller pins so they mark a spot without hiding the screen */
.anno__pin { width: 24px; height: 24px; font-size: 12px; box-shadow: 0 0 0 3px #ffffff; }
@media (max-width: 699px) { .anno__pin { width: 20px; height: 20px; font-size: 11px; box-shadow: 0 0 0 2px #ffffff; } }
/* Phone flow wraps into rows instead of scrolling, so no phone is ever cut at the edge */
.flow__list:has(.flow__shot--phone) { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 32px 24px; overflow: visible; }
.flow__shot--phone { justify-content: center; }
@media (max-width: 699px) { .flow__list:has(.flow__shot--phone) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } }
@media (min-width: 700px) { .flow__list:has(.flow__shot--phone) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .flow__list:has(.flow__shot--phone) { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

/* ---------- v3 shared parts for every project ---------- */
/* Cards follow each project's own radius (CO2 16, OneBank 22, STAYFITAR 18, Weider 6) */
[data-project] { --radius-card: var(--radius); }

/* Browser window drawn in CSS: a light bar with three dots, the page below */
.browser { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.browser__bar { display: flex; gap: 6px; padding: 10px 12px; background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-200); }
.browser img, .browser video { display: block; width: 100%; height: auto; }

/* Hero stage with a browser and a phone floating over its corner */
.stage--mixed { display: block; padding: 40px 24px 64px; }
.stage__browser { width: 86%; }
.stage__phone--float { position: absolute; right: 24px; bottom: 28px; z-index: 2; width: 25%; max-width: 180px; transform: none; margin: 0; }
@media (max-width: 699px) { .stage--mixed { padding: 24px 12px 40px; } .stage__browser { width: 90%; } .stage__phone--float { right: 12px; bottom: 16px; width: 30%; } }

/* Annotated close up inside a browser or a phone */
@media (min-width: 1024px) { .anno:has(.anno__media--browser) { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.anno__media--browser { padding: 24px; }
.anno__media--browser .browser, .anno__media--browser .anno__frame { width: 100%; }
.anno__media--phone .phone { width: min(100%, 300px); padding: 8px; }
.anno__media--phone .anno__frame { width: 100%; }
.anno__media--phone .anno__frame img { border-radius: clamp(20px, 2.4vw, 30px); }

/* Flow of browser screens: two per row, one on phones */
.flow__list:has(.flow__shot--browser) { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); overflow: visible; gap: 32px; }
@media (min-width: 700px) { .flow__list:has(.flow__shot--browser) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.flow__shot--browser { display: block; height: auto; }
.flow--browser .flow__label { justify-content: flex-start; }

/* Before/after: drag (or use the arrow keys) to move the divider */
.ba { margin: 40px 0 0; }
.ba--browser > .browser { max-width: 1100px; margin: 0 auto; }
.ba--phone > .phone { width: min(100%, 320px); margin: 0 auto; padding: 8px; position: relative; }
.ba__stack { position: relative; }
.ba__stack > img { display: block; width: 100%; height: auto; }
.ba--phone .ba__stack { overflow: hidden; border-radius: clamp(20px, 2.4vw, 30px); }
.ba--phone .ba__stack img { border-radius: 0; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__before img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(13, 15, 21, 0.25); pointer-events: none; }
.ba__line::after { content: "↔"; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--text); font-size: 18px; transform: translate(-50%, -50%); box-shadow: 0 0 0 1px rgba(13, 15, 21, 0.2); }
.ba__range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba:has(.ba__range:focus-visible) .ba__line::after { outline: 2px solid var(--primary-text); outline-offset: 3px; }
.ba__tag { position: absolute; z-index: 2; top: 52px; padding: 4px 10px; border-radius: 999px; background: rgba(13, 15, 21, 0.78); color: #fff; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; pointer-events: none; }
.ba--phone .ba__tag { top: 24px; }
.ba__tag--before { left: 16px; }
.ba__tag--after { right: 16px; }
.ba figcaption { margin-top: 16px; font-size: 14px; color: var(--text-muted); text-align: center; }

/* Pair: two framed screens side by side */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; padding: 40px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--plate); }
.pair figure { display: grid; gap: 16px; justify-items: center; align-content: start; margin: 0; }
.pair--phone .phone { width: 100%; max-width: 260px; padding: 8px; }
.pair figcaption { font-size: 15px; font-weight: 500; text-align: center; }
.pair__cap { margin-top: 8px; font-size: 14px; color: var(--text-muted); }
@media (max-width: 699px) { .pair { gap: 16px; padding: 20px 12px; } .pair--phone .phone { padding: 5px; border-radius: 26px; } }

/* Bento cards with an image or a palette */
.bcard__media { overflow: hidden; margin-bottom: 8px; border: 1px solid var(--border); border-radius: calc(var(--radius-card) * 0.6); background: var(--plate); }
.bcard__media img { display: block; width: 100%; height: auto; }
.bcard p a { color: var(--primary-text); }
.bcard__swatches { display: flex; flex-wrap: wrap; gap: 16px; margin: 8px 0; }
.bcard__swatches li { display: grid; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.bcard__swatches span { width: 56px; height: 56px; border: 1px solid var(--border); border-radius: 10px; }
.bcard__swatches strong { color: var(--text); font-family: var(--font-body); font-size: 14px; font-weight: 500; }
/* Mixed stage: the phone overlaps only the lower corner of the browser */
.stage--mixed { padding: 32px 24px 150px; }
.stage__browser { width: 84%; }
.stage__phone--float { width: 23%; bottom: 24px; right: 32px; }
@media (max-width: 699px) { .stage--mixed { padding: 20px 12px 96px; } .stage__phone--float { width: 28%; bottom: 14px; right: 14px; } }
@media (min-width: 1024px) { .anno--flip:has(.anno__media--browser) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); } }
/* Weider and STAYFITAR keep Montserrat headings in the v3 layout too */
[data-project="weider-bulgaria"] .cs3-ch__head h2, [data-project="weider-bulgaria"] .cs3-lede, [data-project="weider-bulgaria"] .cs3-hero__lead, [data-project="weider-bulgaria"] .bcard__num,
[data-project="stayfitar"] .cs3-ch__head h2, [data-project="stayfitar"] .cs3-lede, [data-project="stayfitar"] .cs3-hero__lead, [data-project="stayfitar"] .bcard__num { font-family: "Montserrat", var(--font-display); letter-spacing: -0.03em; }


/* ---------- Back to top: bottom left, opposite the AI twin ---------- */

/* ---------- Light phone frame for every case study (Minimal style): white body, hairline edge, soft shadow ---------- */
.phone, .stage .phone, .flow__shot--phone .phone, .pair--phone .phone, .ba--phone > .phone, .anno__media--phone .phone {
  background: linear-gradient(160deg, #ffffff 0%, #f3f4f6 55%, #e9eaee 100%);
  box-shadow: inset 0 0 0 1px rgba(13, 15, 21, 0.10), inset 0 0 0 2.5px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(13, 15, 21, 0.06), 0 24px 48px -24px rgba(13, 15, 21, 0.28);
}
.phone img, .phone video { box-shadow: 0 0 0 1px rgba(13, 15, 21, 0.08); }


/* ---------- Phone anatomy: frame, status bar, screen, home area ----------
   The bar and home area take the screen's own edge colors (--bt, --bb), so a screen
   never touches the rounded corners and nothing at its top gets cut. */
.phone { --r: 36px; --pad: 6px; position: relative; display: flex; flex-direction: column; padding: var(--pad); border-radius: var(--r); container-type: inline-size; }
.phone__bar { position: relative; display: flex; align-items: center; justify-content: space-between; height: 12cqw; padding: 0 7cqw 0 8cqw; border-radius: calc(var(--r) - var(--pad)) calc(var(--r) - var(--pad)) 0 0; background: var(--bt, #fff); color: #0d0f15; font-family: var(--font-body); font-size: 3.6cqw; font-weight: 600; flex: none; }
.phone[data-top="dark"] .phone__bar { color: #fff; }
.phone__island { position: absolute; top: 2.6cqw; left: 50%; width: 30cqw; height: 8.4cqw; border-radius: 999px; background: #0b0b0d; transform: translateX(-50%); }
.phone__sys { display: flex; gap: 1.2cqw; align-items: center; }
.phone__sys i { display: block; width: 3.4cqw; height: 2.4cqw; border-radius: 0.6cqw; background: currentColor; opacity: 0.9; }
.phone__sys i:last-child { width: 5.6cqw; }
.phone__screen { position: relative; background: var(--bt, #fff); }
.phone__screen > img, .phone__screen > video, .phone .phone__screen img, .phone .phone__screen video { display: block; width: 100%; height: auto; border-radius: 0 !important; box-shadow: none; }
.phone__home { position: relative; height: 7cqw; border-radius: 0 0 calc(var(--r) - var(--pad)) calc(var(--r) - var(--pad)); background: var(--bb, #fff); flex: none; }
.phone__home::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34cqw; height: 1.4cqw; border-radius: 999px; background: #0d0f15; opacity: 0.85; transform: translate(-50%, -50%); }
.phone[data-bottom="dark"] .phone__home::after { background: #fff; }
.ba--phone .phone__screen .ba__stack { border-radius: 0; }
.ba--phone .ba__tag { top: calc(12cqw + 14px); }
/* Sizes and radii per place */
.stage .phone { --r: 34px; }
.flow__shot--phone .phone { --r: 24px; --pad: 4px; }
.pair--phone .phone { --r: 32px; }
.anno__media--phone .phone, .anno__media--silver .phone, .ba--phone > .phone { --r: 38px; --pad: 7px; }
@media (max-width: 699px) { .stage .phone { --r: 22px; --pad: 4px; } .pair--phone .phone { --r: 24px; --pad: 4px; } .anno__media--phone .phone, .anno__media--silver .phone, .ba--phone > .phone { --r: 32px; } }
/* A clearer frame: slightly darker edge so white phones read on light plates */
.phone, .stage .phone, .flow__shot--phone .phone, .pair--phone .phone, .ba--phone > .phone, .anno__media--phone .phone, .anno__media--silver .phone {
  background: linear-gradient(160deg, #ffffff 0%, #eef0f3 55%, #dfe2e7 100%);
  box-shadow: inset 0 0 0 1px rgba(13, 15, 21, 0.16), inset 0 0 0 2px rgba(255, 255, 255, 0.85), 0 1px 2px rgba(13, 15, 21, 0.08), 0 18px 40px -18px rgba(13, 15, 21, 0.32);
}
/* Annotated phone with a gentle 2D tilt, no 3D distortion */
.anno__media--silver { padding: 56px 40px; }
.anno__media--silver .phone { width: min(100%, 290px); }
.phone--tilt { transform: rotate(-6deg); }
@media (max-width: 699px) { .anno__media--silver { padding: 40px 24px; } .anno__media--silver .phone { width: min(82%, 250px); } }
/* Phone flows: rows centered by the number of screens */
.flow__list:has(.flow__shot--phone) { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 24px; }
.flow__list:has(.flow__shot--phone) > li { flex: 0 1 calc((100% - (var(--n) - 1) * 24px) / var(--n)); min-width: 128px; max-width: 180px; }
@media (max-width: 699px) { .flow__list:has(.flow__shot--phone) > li { flex-basis: calc(50% - 12px); max-width: none; } }
@media (max-width: 699px) { .flow__list:has(.flow__shot--phone) > li { min-width: 0; } }
/* The floating phone in the browser + phone hero stays pinned to the stage corner */
.stage--mixed .phone.stage__phone--float { position: absolute; right: 32px; bottom: 24px; width: 23%; max-width: 180px; margin: 0; }
@media (max-width: 699px) { .stage--mixed .phone.stage__phone--float { right: 14px; bottom: 14px; width: 28%; } }

/* Mixed hero: a bigger browser, the phone overlapping its lower right corner */
.stage--mixed { padding: 28px 20px 64px; }
.stage--mixed .stage__browser { width: 94%; }
.stage--mixed .phone.stage__phone--float { right: 16px; bottom: 16px; width: 25%; max-width: 190px; }
@media (max-width: 699px) { .stage--mixed { padding: 16px 10px 48px; } .stage--mixed .stage__browser { width: 94%; } .stage--mixed .phone.stage__phone--float { right: 8px; bottom: 8px; width: 29%; } }

/* Stat cards: the label sits right under the number, the source note at the bottom */
.bcard--stat { justify-content: flex-start; gap: 12px; }
.bcard--stat .bcard__note { margin-top: auto; padding-top: 8px; }

/* CTA: the light line runs above the headline, not through it */
.cta__line { position: relative; top: auto; left: auto; right: auto; width: 100%; margin-bottom: clamp(32px, 5vw, 64px); }

/* ---------- Home project cards: the same frames and compositions as the case studies ---------- */
.card__media { container-type: size; background: var(--plate); }
.card__media .stage--card { width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: none; overflow: hidden; transition: transform 0.8s var(--ease); }
.card__link:hover .card__media .stage--card { transform: scale(1.03); }
.card__media .stage--card img, .card__media .stage--card video { width: 100%; height: auto; padding: 0; object-fit: initial; transform: none; transition: none; }
.card__link:hover .card__media .stage--card img { transform: none; }
/* Three phones, sized by the card's height so they always fit */
.stage--card:not(.stage--mixed) { display: flex; align-items: center; justify-content: center; }
.stage--card .phone.stage__phone { width: min(26cqw, 33cqh); max-width: none; }
.stage--card .stage__phone--back { margin-top: 6cqh; }
.stage--card .stage__phone--2 { margin-top: 10cqh; }
/* Browser plus phone */
.stage--card.stage--mixed { display: block; padding: 8cqh 6cqw 0; }
.stage--card .stage__browser { width: 82%; }
.stage--card.stage--mixed .phone.stage__phone--float { right: 6cqw; bottom: 6cqh; width: min(20cqw, 30cqh); max-width: none; }
.stage--card .phone { --r: 22px; --pad: 4px; }
/* Same media height in every card, so the cards in a row line up */
.card__media { aspect-ratio: auto; height: clamp(240px, 26vw, 380px); }
.stage--card .phone.stage__phone { width: min(26cqw, 36cqh); }
.stage--card .stage__phone--back { margin-top: 4cqh; }
.stage--card .stage__phone--2 { margin-top: 6cqh; }
[data-project="onebank"] .stage--card .phone.stage__phone { width: min(24cqw, 31cqh); }

/* ---------- Rhythm between blocks inside a chapter ----------
   Two bentos in a row keep the grid gap; any other block after a bento gets the 40px step. */
.cs3-ch > * + .bento { margin-top: 40px; }
.cs3-ch > .bento + .bento { margin-top: 16px; }
.cs3-ch > .cs3-h3 + .bento, .cs3-ch > .cs3-lede + .bento { margin-top: 0; }
.cs3-ch > .bento + .flow, .cs3-ch > .bento + .ba, .cs3-ch > .bento + .pair, .cs3-ch > .bento + .matrix, .cs3-ch > .bento + .cs3-quote { margin-top: 40px; }

/* ==========================================================
   Device Mockup Kit (Claude Design canvas, Clean style).
   Phone and tablet: #121418 body, #2A2D35 edge ring, kit shadow.
   Browser: white window, #F6F7F9 bar with dots and an address pill.
   Every mockup sits on the kit background #EEF0F3.
   ========================================================== */
:root { --mock-bg: #EEF0F3; --kit-body: #121418; --kit-ring: #2A2D35; }
.stage, .pair, .flow__list, .anno__media, .card__media { background: var(--mock-bg); }

/* Phone */
.phone, .stage .phone, .flow__shot--phone .phone, .pair--phone .phone, .ba--phone > .phone, .anno__media--phone .phone, .anno__media--silver .phone {
  background: var(--kit-body);
  box-shadow: 0 0 0 2px var(--kit-ring), 0 36px 64px -28px rgba(20, 24, 33, 0.45);
}
.phone__island { background: var(--kit-body); }
.stage .phone { --pad: 7px; --r: 36px; }
.flow__shot--phone .phone { --pad: 5px; --r: 23px; }
.pair--phone .phone { --pad: 8px; --r: 39px; }
.anno__media--phone .phone, .anno__media--silver .phone { --pad: 8px; --r: 43px; }
.ba--phone > .phone { --pad: 9px; --r: 46px; }
.card__media .stage--card .phone { --pad: 4px; --r: 18px; }

/* Tablet (portrait 834 × 1194) */
.tablet { position: relative; padding: 2.9%; border-radius: 7% / 5%; background: var(--kit-body); box-shadow: 0 0 0 2px var(--kit-ring), 0 36px 64px -28px rgba(20, 24, 33, 0.45); }
.tablet__cam { position: absolute; top: 1%; left: 50%; width: 1.2%; aspect-ratio: 1; border-radius: 50%; background: var(--kit-ring); transform: translateX(-50%); }
.tablet__screen { overflow: hidden; border-radius: 4.5% / 3.2%; aspect-ratio: 834 / 1194; background: #fff; }
.tablet__screen img, .tablet__screen video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Browser (desktop) */
.browser { border: 0; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(20, 24, 33, 0.08), 0 36px 64px -28px rgba(20, 24, 33, 0.3); }
.browser__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #F6F7F9; border-bottom: 1px solid #E3E6EB; }
.browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: #D5D9E0; }
.browser__url { flex: 0 1 45%; margin: 0 auto; height: 18px; border-radius: 9px; background: #fff; border: 1px solid #E3E6EB; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 11px; color: #4B5563; }
.browser__end { width: 39px; }

/* Responsive hero: desktop in the middle, tablet lower left, phone lower right (kit "Responsive hero") */
.stage.stage--responsive { display: block; position: relative; aspect-ratio: 16 / 10; padding: 0; overflow: visible; }
.stage--responsive > * { position: absolute; margin: 0; }
.stage--responsive .stage__desktop { left: 15%; top: 8%; width: 70%; }
.stage--responsive .stage__tablet { left: 4%; top: 44%; width: 22%; }
.stage--responsive .phone.stage__phone--kit { left: 76%; top: 34%; width: 17%; max-width: none; transform: none; --pad: 4px; --r: 18px; }
.stage--responsive .browser__bar { height: 22px; gap: 4px; padding: 0 8px; }
.stage--responsive .browser__bar i { width: 7px; height: 7px; }
.stage--responsive .browser__url { height: 13px; font-size: 9px; }
.stage--responsive .browser__end { width: 26px; }
@media (max-width: 699px) {
  .stage--responsive .stage__desktop { left: 6%; top: 6%; width: 84%; }
  .stage--responsive .stage__tablet { left: 2%; top: 46%; width: 24%; }
  .stage--responsive .phone.stage__phone--kit { left: 76%; top: 36%; width: 20%; --pad: 3px; --r: 13px; }
  .stage--responsive .browser__url { font-size: 7px; }
}

/* Duo phones (kit "Phone Duo"): two tilted phones, the second a little higher */
.stage.stage--duo { display: flex; justify-content: center; align-items: flex-start; gap: 6%; padding: 64px 24px 72px; }
.stage--duo .phone.stage__duo { width: 36%; max-width: 250px; margin: 0; }
.stage--duo .stage__duo--a { transform: rotate(-6deg); margin-top: 40px; }
.stage--duo .stage__duo--b { transform: rotate(5deg); }
@media (max-width: 699px) { .stage.stage--duo { padding: 40px 16px 48px; } .stage--duo .phone.stage__duo { --pad: 5px; --r: 26px; } }

/* Pairs of phones use the duo tilt too */
.pair--phone figure:nth-child(1) .phone { transform: rotate(-6deg); }
.pair--phone figure:nth-child(2) .phone { transform: rotate(5deg); }
.pair--phone { padding: 56px 40px 40px; }
.pair--phone figure { gap: 28px; }
/* Kit compositions inside the home cards: a 16:10 box centered in the media, phones sized by height */
.card__media .stage.stage--responsive { width: auto; height: 92%; max-width: 100%; aspect-ratio: 16 / 10; margin: auto; padding: 0; transform-origin: center; }
.card__media .stage--responsive .phone.stage__phone--kit { --pad: 3px; --r: 12px; }
.card__media .stage--responsive .browser__bar { height: 16px; padding: 0 6px; gap: 3px; }
.card__media .stage--responsive .browser__bar i { width: 5px; height: 5px; }
.card__media .stage--responsive .browser__url { height: 9px; font-size: 6px; }
.card__media .stage.stage--duo { align-items: center; gap: 5%; padding: 0; }
.card__media .stage--duo .phone.stage__duo { width: min(24cqw, 31cqh); --pad: 4px; --r: 18px; }
.card__media .stage--duo .stage__duo--a { margin-top: 6cqh; }
/* Tablet bezel in px (percent padding would follow the stage, not the tablet) */
.tablet { padding: 6px; border-radius: 16px; }
.tablet__screen { border-radius: 10px; }
.card__media .tablet { padding: 3px; border-radius: 9px; }
.card__media .tablet__screen { border-radius: 6px; }
@media (max-width: 699px) { .tablet { padding: 3px; border-radius: 9px; } .tablet__screen { border-radius: 6px; } }
@media (max-width: 699px) { .stage--responsive .phone.stage__phone--kit { top: 28%; width: 19%; } .stage--responsive .stage__tablet { top: 42%; } }
@media (max-width: 699px) { .stage--responsive .stage__desktop { left: 9%; top: 5%; width: 80%; } }

/* Icons and their text share one line box, so they line up exactly */
.matrix__cell { display: flex; align-items: flex-start; gap: 8px; }
.matrix__mark { flex: none; margin-right: 0; vertical-align: baseline; }
.matrix__note { line-height: 22px; }
.matrix__legend > span { display: inline-flex; align-items: center; gap: 8px; line-height: 22px; }
.matrix__legend .matrix__mark { margin: 0; }
.anno__notes li { align-items: flex-start; }
.anno__notes strong { line-height: 28px; }
.anno__n { margin-top: 0; }