/* ==========================================================================
   Sena Kuruca — Portfolio
   00 Fonts · 01 Tokens · 02 Base · 03 Layout · 04 Components · 05 Sections · 06 Motion
   ========================================================================== */

/* ---------- 00 FONTS ----------
   Playfair Display (SIL OFL 1.1 — see assets/fonts/PlayfairDisplay-OFL.txt).
   Static 400 roman + italic only: the hero uses no other weights. */
@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/PlayfairDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/PlayfairDisplay-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- 01 TOKENS ---------- */
:root {
  color-scheme: dark;

  /* Color */
  --c-bg: #07080a;
  --c-bg-raised: #0c0e12;
  --c-surface: rgba(255, 255, 255, 0.035);
  --c-surface-hover: rgba(255, 255, 255, 0.07);
  --c-text: #f2f3f5;
  --c-text-muted: #a3a9b4;   /* 8.6:1 on bg */
  --c-text-subtle: #7c828d;  /* 4.9:1 on bg */
  --c-accent: #8fb4ff;
  --c-accent-soft: #cddcff;
  --c-border: rgba(255, 255, 255, 0.09);
  --c-border-strong: rgba(255, 255, 255, 0.18);
  --c-border-hover: rgba(255, 255, 255, 0.34);
  --c-glass: rgba(16, 18, 23, 0.42);
  --c-glass-strong: rgba(14, 16, 20, 0.78);
  --c-focus: #8fb4ff;

  /* Typography */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hero: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-micro: 0.6875rem;                                    /* 11 — eyebrows, indices */
  --fs-small: 0.875rem;                                     /* 14 — UI */
  --fs-body: 1rem;                                          /* 16 */
  --fs-lead: clamp(1.0625rem, 0.97rem + 0.4vw, 1.25rem);    /* 17–20 */
  --fs-statement: clamp(1.25rem, 1rem + 0.7vw, 1.625rem);   /* 20–26 — hero positioning */
  --fs-h3: clamp(2rem, 1.2rem + 2.6vw, 3.75rem);            /* 32–60 — project titles (Playfair) */
  --fs-section: clamp(3rem, 1.6rem + 4.4vw, 6rem);          /* 48–96 — Works title (Playfair), below the hero name */
  --fs-h2: clamp(3.25rem, 1.5rem + 7vw, 9rem);              /* 52–144 — section titles */
  --fs-display: clamp(4rem, 7.2vw, 7rem);                   /* 64–112 — the name */

  --lh-tight: 0.9;
  --lh-snug: 1.18;
  --lh-body: 1.55;
  --tracking-display: -0.025em;
  --tracking-eyebrow: 0.16em;

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --gutter: clamp(1rem, 0.4rem + 3vw, 4rem);
  --grid-gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  --section-space: clamp(6rem, 3rem + 10vw, 12rem);
  --project-space: clamp(5rem, 2rem + 9vw, 11rem);
  --container: 1680px;

  /* Shape */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --border: 1px solid var(--c-border);

  /* Elevation */
  --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 32px -12px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 0 4px rgba(143, 180, 255, 0.14), 0 12px 40px -12px rgba(143, 180, 255, 0.5);
  --blur-glass: blur(18px) saturate(150%);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-base: 450ms;
  --dur-slow: 900ms;
  --dur-reveal: 1300ms;

  /* Chrome */
  --nav-top: 16px;
  --nav-h: 52px;
  --z-nav: 50;
}

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

html {
  background: var(--c-bg);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-top) + var(--nav-h) + var(--space-4));
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
em { font-style: italic; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }

::selection { background: rgba(143, 180, 255, 0.35); color: #fff; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: calc(var(--z-nav) + 1);
  padding: var(--space-3) var(--space-4);
  background: var(--c-text);
  color: var(--c-bg);
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
  font-weight: 500;
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

/* ---------- 03 LAYOUT ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- 04 COMPONENTS ---------- */

/* Eyebrow — mono, tracked, quiet */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.4;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* Missing-content placeholder */
.is-placeholder { color: var(--c-text-subtle); letter-spacing: 0.02em; }
.is-missing {
  text-decoration: underline dashed rgba(143, 180, 255, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  cursor: not-allowed;
}

/* Monogram */
.monogram {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(143, 180, 255, 0.45);
  font-family: var(--font-hero);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1;
  padding-bottom: 2px;
  color: var(--c-text);
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

/* Buttons */
.btn {
  --btn-h: 48px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--btn-h);
  padding: 0 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn--lg { --btn-h: 56px; padding: 0 1.75rem; font-size: 1rem; }

/* Label roll: the text-shadow copy slides in from below — no duplicate text for AT */
.btn__label {
  display: inline-block;
  height: 1.3em;
  line-height: 1.3em;
  overflow: hidden;
}
.btn__text {
  display: inline-block;
  text-shadow: 0 1.3em 0 currentColor;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover .btn__text,
.btn:focus-visible .btn__text { transform: translateY(-1.3em); }

.btn__icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover .btn__icon--down { transform: translateY(2px); }
.btn:hover .btn__icon--diag { transform: translate(2px, -2px); }

.btn--primary { background: var(--c-text); color: #0a0b0d; }
.btn--primary:hover { background: #fff; box-shadow: var(--shadow-glow); }

.btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--c-border-strong);
  color: var(--c-text);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--c-border-hover); }

/* Category pill */
.pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 0.625rem;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--c-text-muted);
  white-space: nowrap;
}

/* Text link */
.link {
  display: inline-block;
  padding-block: 0.625rem;
  color: var(--c-text-muted);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-base) var(--ease-out);
}
.link:hover { color: var(--c-text); text-decoration-color: currentColor; }
.link.is-missing { text-decoration-style: dashed; text-decoration-color: rgba(143, 180, 255, 0.45); }

/* Arrow link — "View Project" */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--c-text);
  white-space: nowrap;
}
.link-arrow__label { /* resting hairline + solid line that draws in on hover */
  padding-bottom: 2px;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(rgba(242, 243, 245, 0.28), rgba(242, 243, 245, 0.28));
  background-size: 0% 1px, 100% 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-slow) var(--ease-out);
}
.link-arrow__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--c-border-strong);
  border-radius: 50%;
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.link-arrow__icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-base) var(--ease-out);
}
.link-arrow:hover .link-arrow__label,
.link-arrow:focus-visible .link-arrow__label,
.project.is-hover .link-arrow__label { background-size: 100% 1px, 100% 1px; }
.project__cta:focus-visible { border-radius: var(--radius-pill); }
.link-arrow:hover .link-arrow__icon,
.link-arrow:focus-visible .link-arrow__icon,
.project.is-hover .link-arrow__icon { background: var(--c-text); border-color: var(--c-text); color: var(--c-bg); }
.link-arrow:hover .link-arrow__icon svg,
.project.is-hover .link-arrow__icon svg { transform: translateX(2px); }

.status-note {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-subtle);
}

/* Grain overlay */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- NAVIGATION ---------- */
.nav {
  position: fixed;
  top: var(--nav-top);
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  display: flex;
  justify-content: center;
  padding-inline: var(--gutter);
  pointer-events: none;
}
.nav__bar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--nav-h);
  padding: 0 6px;
  background: var(--c-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
  transition: background-color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out);
}
.nav.is-scrolled .nav__bar { background: var(--c-glass-strong); border-color: var(--c-border-strong); }
/* Scrolling down slides the bar up out of view; scrolling up brings it back (script.js initNav) */
.nav { transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.nav.is-hidden { transform: translateY(calc(-100% - var(--nav-top) - 8px)); opacity: 0; }
.nav.is-hidden .nav__bar { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav__bar { background: var(--c-glass-strong); }
}

.nav__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
}
.nav__mark:hover .monogram { border-color: var(--c-accent); background: rgba(143, 180, 255, 0.08); }

.nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 0.875rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-text-muted);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.nav__link:hover { color: var(--c-text); background: var(--c-surface-hover); }
.nav__link[aria-current="true"] { color: var(--c-text); }
.nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: var(--c-accent);
  opacity: 0;
  transform: scale(0);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.nav__link[aria-current="true"]::after { opacity: 1; transform: scale(1); }
.nav__link.is-missing { text-decoration: none; }
.nav__link.is-missing::before {
  content: "";
  position: absolute;
  left: 0.875rem;
  right: 0.875rem;
  bottom: 9px;
  border-bottom: 1px dashed rgba(143, 180, 255, 0.45);
}

@media (max-width: 559px) {
  .nav__item--home { display: none; }   /* the monogram is the home link */
  .nav__link { padding: 0 0.75rem; }
}

/* ---------- 05 SECTIONS ---------- */

/* ===== HERO ===== */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  /* Fallback when WebGL is unavailable */
  background:
    radial-gradient(55% 65% at 84% 14%, rgba(78, 118, 196, 0.42), transparent 70%),
    radial-gradient(35% 55% at 102% 58%, rgba(44, 76, 150, 0.35), transparent 70%),
    var(--c-bg);
}
.hero__backdrop { position: absolute; inset: 0; z-index: -1; }
.hero__canvas {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2s var(--ease-out);
}
.hero__canvas.is-live { opacity: 1; }
.hero__shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(48% 42% at 50% 54%, rgba(7, 8, 10, 0.55), rgba(7, 8, 10, 0) 100%),
    linear-gradient(to top, var(--c-bg) 0%, rgba(7, 8, 10, 0.5) 22%, rgba(7, 8, 10, 0) 50%);
}

.hero__inner {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-top: calc(var(--nav-top) + var(--nav-h) + var(--space-6));
  padding-bottom: var(--space-5);
  will-change: transform;
}

/* One visible gap between every line of the centred stack (Collection, name, title, statement,
   buttons). --hero-gap is the space between the letters; each margin subtracts the empty
   leading its own line box carries above or below the ink, measured at 1440 px. */
.hero__body { --hero-gap: 3.25rem; }
.hero__collection { margin-bottom: calc(var(--hero-gap) - 1.5rem); }
@media (min-width: 1024px) {
  .hero__body .hero__statement { max-width: none; white-space: nowrap; text-wrap: nowrap; }   /* outranks the base rule below */
}

/* One centred vertical stack: name → title → statement → actions */
.hero__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-6);
  text-align: center;
}

.hero__name {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.24em;
  font-family: var(--font-hero);
  font-weight: 400;
  font-size: var(--fs-display);
  font-kerning: normal;
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--c-text);
}

/* Line mask for the vertical rise */
.mask {
  display: inline-block;
  overflow: hidden;
  padding: 0 0.04em 0.12em;
  margin-bottom: -0.12em;
  vertical-align: bottom;
}
.mask__inner { display: inline-block; }

.hero__descriptor {
  margin-top: calc(var(--hero-gap) - 1.0625rem);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-text-muted);
}
.nowrap { white-space: nowrap; }

.hero__statement {
  max-width: 31ch;
  margin-top: calc(var(--hero-gap) - 0.625rem);
  font-size: clamp(1.125rem, 0.95rem + 0.5vw, 1.375rem);   /* 18–22, light: one quiet line on wide screens */
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--c-text);
  text-wrap: balance;
}
.hero__statement em {
  font-family: var(--font-hero);
  font-style: italic;
  font-size: 1.04em;
  letter-spacing: 0;
  color: var(--c-accent-soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: calc(var(--hero-gap) - 0.1875rem);
}

.scroll-cue {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.scroll-cue:hover { color: var(--c-text); }
.scroll-cue__line {
  position: relative;
  width: 1px;
  height: 32px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}
.scroll-cue__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-text);
  transform: translateY(-100%);
  animation: scroll-cue 2.4s var(--ease-in-out) infinite;
}
@keyframes scroll-cue {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero__name { font-size: clamp(4.5rem, 10vw, 6.25rem); }   /* tablets: more room vertically, name can carry a little more */
}

@media (max-width: 767px) {
  .hero__inner {
    gap: var(--space-5);
    padding-top: calc(var(--nav-top) + var(--nav-h) + var(--space-5));
    padding-bottom: var(--space-4);
  }
  .hero__name {
    flex-direction: column;
    align-items: center;
    font-size: clamp(3.25rem, 17vw, 5rem);
    line-height: 1;
  }
  .hero__body { --hero-gap: 2.25rem; }
  /* the stacked name and smaller text carry less leading here */
  .hero__collection { margin-bottom: calc(var(--hero-gap) - 0.9375rem); }
  .hero__descriptor { margin-top: calc(var(--hero-gap) - 0.625rem); font-size: var(--fs-body); }
  .hero__actions { align-self: stretch; }
  .hero__actions .btn { flex: 1 1 0; min-width: 0; padding-inline: var(--space-4); }
  .scroll-cue__line { height: 24px; }
}

/* ===== SELECTED WORKS ===== */
.work { padding-top: var(--section-space); }

.work__intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-5);
  align-items: end;
  padding-bottom: var(--space-9);
}
.work__title {
  grid-column: 1 / span 8;
  font-family: var(--font-hero);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.05rem + 1.9vw, 2.75rem);   /* 28–44: a step below the project titles (--fs-h3, 32–60) */
  line-height: 1;
  letter-spacing: -0.015em;
}
.work__aside {
  grid-column: 9 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-bottom: 0.5em;
}
.work__lede { max-width: 34ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--c-text-muted); }
.work__count { color: var(--c-text-subtle); }

@media (max-width: 1023px) {
  .work__title, .work__aside { grid-column: 1 / -1; }
  .work__aside { padding-bottom: 0; }
}

.projects {
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-item {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  padding-top: var(--space-6);
  padding-bottom: var(--project-space);
  border-top: var(--border);
}
.project-item:last-child { padding-bottom: var(--section-space); }

.project { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 1024px) {
  .project--offset-right { grid-column: 3 / -1; }
  .project--offset-left  { grid-column: 1 / span 10; }
}

.project__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "tag   index"
    "title title"
    "meta  cta"
    "desc  desc";
  align-items: center;
  column-gap: var(--space-5);
  margin-bottom: var(--space-7);
}
.project__tag   { grid-area: tag; justify-self: start; }
.project__index { grid-area: index; justify-self: end; color: var(--c-text-subtle); font-variant-numeric: tabular-nums; }
.project__title {
  grid-area: title;
  margin: var(--space-5) 0 var(--space-3);
  font-family: var(--font-hero);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.project__title .is-placeholder { font-style: italic; }
.project__meta  { grid-area: meta; font-size: 0.9375rem; color: var(--c-text-muted); }
.project__meta-sep { margin-inline: 0.5em; color: var(--c-text-subtle); }
.project__cta   { grid-area: cta; justify-self: end; }
.project__desc {
  grid-area: desc;
  max-width: 58ch;
  margin-top: var(--space-4);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-muted);
}

@media (max-width: 767px) {
  .project__header {
    grid-template-areas:
      "tag   index"
      "title title"
      "meta  meta"
      "desc  desc"
      "cta   cta";
    margin-bottom: var(--space-6);
  }
  .project__cta { justify-self: start; margin-top: var(--space-3); }
}

/* Project visual — the doorway into the case study */
.project__visual {
  position: relative;
  isolation: isolate;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--c-bg-raised);
  -webkit-tap-highlight-color: transparent;
}
.project--offset-right .project__visual,
.project--offset-left .project__visual { aspect-ratio: 3 / 2; }
@media (max-width: 767px) {
  .project__visual,
  .project--offset-right .project__visual,
  .project--offset-left .project__visual { aspect-ratio: 4 / 5; }
}

.project__visual::before { /* hairline inner border */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: inherit;
  pointer-events: none;
}
.project__visual::after { /* hover overlay */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(4, 5, 7, 0.55), rgba(4, 5, 7, 0) 55%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
}

/* Parallax layer (scroll) wraps the hover layer (scale) so they never fight */
.project__media {
  position: absolute;
  inset: -5% 0;
  transform: translate3d(0, var(--py, 0px), 0);
}
.project__frame {
  position: absolute;
  inset: 0;
  transition: transform 1.4s var(--ease-out);
}
.project__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Phone composition — the real product screens, each in a restrained CSS frame,
   over an independent CSS ambient layer. Sizes use container-height units so the
   group scales with the card. Only flat 2D transforms touch the screens, so the
   UI is never perspective-distorted. */
.phone-stage {
  position: absolute;
  inset: 0;
  container-type: size;
  background: linear-gradient(180deg, #0a1534 0%, #071029 58%, #050a1a 100%);
}

/* Ambient layer — navy base, a key light that falls on the main phone, three broad
   ribbons of light drifting slowly, and a dim floor. Ribbons are wide, soft-edged
   elliptical arcs (radial-gradient rings) animated with transform only, so they stay
   on the compositor. The only motion in the visual is this slow drift. */
.ambient {
  --focus-x: 50%;                       /* horizontal position of the main phone */
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(30% 46% at var(--focus-x) 47%, rgba(64, 112, 222, 0.32), rgba(64, 112, 222, 0) 72%),
    radial-gradient(70% 60% at 78% 8%, rgba(54, 98, 200, 0.2), rgba(54, 98, 200, 0) 70%),
    linear-gradient(180deg, #0a1534 0%, #071029 58%, #050a1a 100%);
}
.ambient__ribbon {
  position: absolute;
  left: -40%;
  width: 180%;
  aspect-ratio: 2.2 / 1;
  background: radial-gradient(50% 50% at 50% 100%,
    rgba(44, 98, 226, 0) 60%,
    rgba(44, 98, 226, 0.16) 72%,
    rgba(104, 152, 250, 0.4) 81%,
    rgba(44, 98, 226, 0.16) 89%,
    rgba(44, 98, 226, 0) 100%);
  will-change: transform;
  animation: ribbon-drift 32s var(--ease-in-out) infinite alternate;
}
.ambient__ribbon--1 { top: 2%; --r0: -12deg; --r1: -8deg; --x0: -3%; --x1: 3%; --y1: 2%; }
.ambient__ribbon--2 { top: 32%; left: -70%; width: 220%; opacity: 0.6; --r0: 6deg; --r1: 2deg; --x0: 4%; --x1: -3%; --y1: -2%; animation-duration: 40s; animation-delay: -11s; }
.ambient__ribbon--3 { top: -28%; left: -10%; width: 160%; opacity: 0.45; --r0: 16deg; --r1: 20deg; --x0: -2%; --x1: 3%; --y1: 2%; animation-duration: 48s; animation-delay: -23s; }
@keyframes ribbon-drift {
  from { transform: translate3d(var(--x0), 0, 0) rotate(var(--r0)); }
  to   { transform: translate3d(var(--x1), var(--y1), 0) rotate(var(--r1)) scale(1.04); }
}
.ambient.is-paused .ambient__ribbon { animation-play-state: paused; }

.ambient__floor { /* dims the ribbons below the horizon; a soft pool of light under the main phone */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  background:
    radial-gradient(26% 70% at var(--focus-x) 0%, rgba(76, 124, 232, 0.22), rgba(76, 124, 232, 0) 72%),
    linear-gradient(180deg, rgba(5, 10, 26, 0.5) 0%, rgba(5, 10, 26, 0.84) 30%, rgba(4, 8, 20, 0.95) 100%);
}
.ambient__floor::before { /* horizon */
  content: "";
  position: absolute;
  top: 0;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg, rgba(120, 165, 255, 0), rgba(120, 165, 255, 0.24) 47%, rgba(120, 165, 255, 0));
}
.ambient__floor::after { /* restrained reflection: the main phone's light on the floor, not its UI */
  content: "";
  position: absolute;
  top: 0;
  left: var(--focus-x);
  width: 34cqh;
  height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(50% 100% at 50% 0%, rgba(110, 150, 240, 0.16), rgba(110, 150, 240, 0) 75%);
}

/* Phone frame — one restrained CSS bezel; the screen image itself is untouched. */
.phone {
  --h: 76cqh;
  --bezel: calc(var(--h) * 0.015);
  --radius: calc(var(--h) * 0.072);
  --x: 0cqh;
  --y: 0cqh;
  --turn: 0deg;
  --tilt: 0deg;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: block;
  height: var(--h);
  width: calc((var(--h) - 2 * var(--bezel)) * var(--ratio, 0.4491) + 2 * var(--bezel));
  padding: var(--bezel);
  border-radius: var(--radius);
  background: linear-gradient(145deg, #3a404c 0%, #14171d 28%, #0b0d11 62%, #272b34 100%);
  box-shadow:
    inset 0 0 0 1px rgba(200, 215, 240, 0.2),
    inset 0 0 0 2.5px #0a0b0e,
    var(--elevation);
  /* perspective ≈ 3× the phone height: a gentle turn, matching the reference */
  transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) perspective(calc(var(--h) * 3.1)) rotateY(var(--turn)) rotate(var(--tilt));
  transition: transform 1.4s var(--ease-out);
}
.phone::before,
.phone::after { /* side buttons, on the frame only */
  content: "";
  position: absolute;
  width: calc(var(--h) * 0.006);
  border-radius: 2px;
  background: linear-gradient(90deg, #1b1e25, #343944);
}
.phone::before { right: calc(var(--h) * -0.004); top: 24%; height: 10%; }
.phone::after  { left: calc(var(--h) * -0.004); top: 19%; height: 13%; }
.phone__screen {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--radius) - var(--bezel));
  background: #1c3563;
}
.phone__screen img { width: 100%; height: 100%; object-fit: contain; } /* frame is sized to the image ratio: no crop, no stretch */

/* Composition (per the supplied reference) — the focal phone centred and in front;
   the two supporting phones at ~89% of its height, slightly lower, a narrow gap on
   each side, their inner edges turned gently toward the viewer. Offsets are in
   container-height units around the stage centre, so proportions hold at any width. */
.phone--main {                          /* Durumum › Harcamalarım */
  --h: 82cqh;
  --y: 1cqh;
  z-index: 3;
  --elevation: 0 54px 90px -36px rgba(0, 0, 0, 0.85), 0 22px 40px -22px rgba(0, 0, 0, 0.6);
}
.phone--left,
.phone--right {
  --h: 73cqh;
  --y: 3.6cqh;
  z-index: 2;
  --elevation: 0 40px 70px -32px rgba(0, 0, 0, 0.75), 0 16px 30px -18px rgba(0, 0, 0, 0.5);
}
.phone--left  { --x: -39.5cqh; --turn: -14deg; }   /* Finansal Özet */
.phone--right { --x: 39.5cqh;  --turn: 14deg; }    /* Giyim ve Aksesuar Harcamaları */
/* Hover / focus: the focal phone lifts a touch, the supporting phones ease apart */
.project.is-hover .phone--main,
.project__visual:focus-visible .phone--main  { --y: -0.4cqh; }
.project.is-hover .phone--left,
.project__visual:focus-visible .phone--left  { --x: -41cqh; }
.project.is-hover .phone--right,
.project__visual:focus-visible .phone--right { --x: 41cqh; }

@media (max-width: 767px) {
  /* Narrow 4:5 card: same arrangement, re-proportioned — the supporting phones tuck
     partly behind the focal phone so all three stay large enough to read. */
  .phone--main  { --h: 70cqh; --y: -4cqh; }
  .phone--left,
  .phone--right { --h: 60cqh; --y: -2cqh; }
  .phone--left  { --x: -20.8cqh; --turn: -12deg; }
  .phone--right { --x: 20.8cqh;  --turn: 12deg; }
  .project.is-hover .phone--main,
  .project__visual:focus-visible .phone--main  { --y: -5cqh; }
  .project.is-hover .phone--left,
  .project__visual:focus-visible .phone--left  { --x: -21.4cqh; }
  .project.is-hover .phone--right,
  .project__visual:focus-visible .phone--right { --x: 21.4cqh; }
  .ambient__ribbon { aspect-ratio: 1.4 / 1; }
  .ambient__floor::after { width: 38cqh; }
}

/* Project-02 variant of the phone composition — same frames and ambient as project-01, with
   its own tone and arrangement: a midnight-violet ambient and side phones tucked behind the
   main one, staggered (left raised, right lowered) and turned a little more. */
.ambient--midnight {
  background:
    radial-gradient(30% 46% at var(--focus-x) 47%, rgba(112, 96, 236, 0.3), rgba(112, 96, 236, 0) 72%),
    radial-gradient(70% 60% at 22% 6%, rgba(78, 70, 196, 0.2), rgba(78, 70, 196, 0) 70%),
    linear-gradient(180deg, #120f34 0%, #0c0a27 58%, #07061a 100%);
}
.ambient--midnight .ambient__ribbon {
  background: radial-gradient(50% 50% at 50% 100%,
    rgba(92, 80, 230, 0) 60%,
    rgba(92, 80, 230, 0.15) 72%,
    rgba(150, 138, 255, 0.36) 81%,
    rgba(92, 80, 230, 0.15) 89%,
    rgba(92, 80, 230, 0) 100%);
}
.ambient--midnight .ambient__floor {
  background:
    radial-gradient(26% 70% at var(--focus-x) 0%, rgba(118, 104, 240, 0.2), rgba(118, 104, 240, 0) 72%),
    linear-gradient(180deg, rgba(8, 6, 26, 0.5) 0%, rgba(8, 6, 26, 0.84) 30%, rgba(6, 5, 20, 0.95) 100%);
}
.ambient--midnight .ambient__floor::before { background: linear-gradient(90deg, rgba(160, 150, 255, 0), rgba(160, 150, 255, 0.22) 47%, rgba(160, 150, 255, 0)); }
.ambient--midnight .ambient__floor::after  { background: radial-gradient(50% 100% at 50% 0%, rgba(150, 138, 250, 0.15), rgba(150, 138, 250, 0) 75%); }

.phone-stage--cascade .phone--main  { --h: 80cqh; --y: 0.5cqh; }
.phone-stage--cascade .phone--left,
.phone-stage--cascade .phone--right { --h: 70cqh; }
.phone-stage--cascade .phone--left  { --x: -33cqh; --y: -3cqh; --turn: -16deg; }   /* Ixam AI sheet */
.phone-stage--cascade .phone--right { --x: 33cqh;  --y: 5cqh;  --turn: 16deg; }    /* Keşfet › Özet */
.project.is-hover .phone-stage--cascade .phone--main,
.project__visual:focus-visible .phone-stage--cascade .phone--main  { --y: -0.9cqh; }
.project.is-hover .phone-stage--cascade .phone--left,
.project__visual:focus-visible .phone-stage--cascade .phone--left  { --x: -34.5cqh; }
.project.is-hover .phone-stage--cascade .phone--right,
.project__visual:focus-visible .phone-stage--cascade .phone--right { --x: 34.5cqh; }
@media (max-width: 767px) {
  .phone-stage--cascade .phone--main  { --h: 64cqh; --y: -3cqh; }
  .phone-stage--cascade .phone--left,
  .phone-stage--cascade .phone--right { --h: 55cqh; }
  .phone-stage--cascade .phone--left  { --x: -19.5cqh; --y: -6cqh; --turn: -12deg; }
  .phone-stage--cascade .phone--right { --x: 19.5cqh;  --y: 1cqh;  --turn: 12deg; }
  .project.is-hover .phone-stage--cascade .phone--main,
  .project__visual:focus-visible .phone-stage--cascade .phone--main  { --y: -4cqh; }
  .project.is-hover .phone-stage--cascade .phone--left,
  .project__visual:focus-visible .phone-stage--cascade .phone--left  { --x: -20.3cqh; }
  .project.is-hover .phone-stage--cascade .phone--right,
  .project__visual:focus-visible .phone-stage--cascade .phone--right { --x: 20.3cqh; }
}

/* Live screen (project-02 main phone) — the İşTrade entry screen, then the real investment
   dashboard. Layers are flat 2x exports placed in app px of the 393-wide frame (--s); the
   phone screen's overflow and radius clip every layer, moving or not. */
.screen-live {
  --s: calc(100cqw / 393);
  --scroll-to: 424;                     /* app px: brings the watchlist header to the content top */
  position: relative;
  background: #fff;
  container-type: size;
  isolation: isolate;
}
/* Every layer keeps its own export ratio (overrides the cover/contain img rules) */
.screen-live img { position: absolute; display: block; max-width: none; height: auto; object-fit: fill; }
.scene__entry,
.scene__dash { position: absolute; inset: 0; }

/* 1 · Entry — the İşTrade welcome screen; the coin rolls in along its shelf */
.screen-live .scene__entry-screen { left: 0; top: 0; width: 100%; }
.screen-live .scene__coin     { left: calc(32 * var(--s)); top: calc(183.5 * var(--s)); width: calc(185.5 * var(--s)); }
.screen-live .scene__wordmark { left: 50%; top: calc(482.2 * var(--s)); width: calc(180.6 * var(--s)); transform: translateX(-50%); }
.screen-live .scene__button   { left: 50%; top: calc(598.9 * var(--s)); width: calc(278.5 * var(--s)); transform: translateX(-50%); }

/* 2 · Dashboard — content scrolls under the fixed nav and bottom bars. The bottom bars are
   flat exports on white, so multiply drops the white and a backdrop blur stands in for their
   Figma glass (radii from the file: follow bar 50, tab pill 10). */
.scene__dash { background: #fff; isolation: isolate; }
.scene__scroll { position: absolute; inset: 0 0 auto; }
.screen-live .scene__content { left: 0; top: 0; width: 100%; height: auto; }
.screen-live .scene__nav  { left: 0; top: 0; width: 100%; }   /* opaque, as the nav renders in Figma: nothing shows behind the status bar */
.screen-live .scene__bars { left: 0; bottom: 0; width: 100%; mix-blend-mode: multiply; }
.scene__glass { position: absolute; }
.scene__glass--follow {
  left: calc(21 * var(--s));
  bottom: calc(116 * var(--s));
  width: calc(351 * var(--s));
  height: calc(72 * var(--s));
  border-radius: calc(12 * var(--s));
  -webkit-backdrop-filter: blur(calc(25 * var(--s)));
  backdrop-filter: blur(calc(25 * var(--s)));
}
.scene__glass--tabs,
.scene__glass--assistant {
  bottom: calc(33 * var(--s));
  height: calc(62 * var(--s));
  border-radius: 999px;
  -webkit-backdrop-filter: blur(calc(5 * var(--s)));
  backdrop-filter: blur(calc(5 * var(--s)));
}
.scene__glass--tabs      { left: calc(21 * var(--s)); width: calc(281 * var(--s)); }
.scene__glass--assistant { left: calc(310 * var(--s)); width: calc(62 * var(--s)); }

/* Timeline states (script.js initScenes): entry → coin → dash → scroll → done.
   "final" is the resting frame without motion (reduced motion, no observer). */
[data-scene][data-state="entry"] .scene__coin {
  opacity: 0;
  transform: translate(calc(70 * var(--s)), calc(-26 * var(--s))) rotate(-14deg);
}
[data-scene][data-state="entry"] .scene__dash,
[data-scene][data-state="coin"] .scene__dash { opacity: 0; transform: translateY(calc(22 * var(--s))); }
[data-scene]:is([data-state="dash"], [data-state="scroll"], [data-state="done"], [data-state="final"]) .scene__entry {
  opacity: 0;
  transform: translateY(calc(-10 * var(--s)));
}
[data-scene]:is([data-state="scroll"], [data-state="done"], [data-state="final"]) .scene__scroll {
  transform: translateY(calc(var(--scroll-to) * -1 * var(--s)));
}
[data-scene]:not([data-state="final"]) .scene__coin {
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s var(--ease-out);
}
[data-scene]:not([data-state="final"]) .scene__entry,
[data-scene]:not([data-state="final"]) .scene__dash {
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);   /* the quick cut from entry to dashboard */
}
[data-scene]:not([data-state="final"]) .scene__scroll {
  transition: transform 2.8s cubic-bezier(0.45, 0.05, 0.25, 1);
}

.project__badge {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  height: 44px;
  padding: 0 6px 0 1.125rem;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-pill);
  background: var(--c-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  font-size: var(--fs-small);
  font-weight: 500;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.project__badge-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-text);
  color: var(--c-bg);
}
.project__badge-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-slow) var(--ease-out);
}

.project.is-hover .project__frame,
.project__visual:focus-visible .project__frame { transform: scale(1.035); }
.project.is-hover .project__visual::after,
.project__visual:focus-visible::after { opacity: 1; }
.project.is-hover .project__badge,
.project__visual:focus-visible .project__badge { opacity: 1; transform: none; }
.project.is-hover .project__badge-icon svg { transform: translateX(2px); }

@media (hover: none) {
  .project__badge { opacity: 1; transform: none; right: var(--space-4); bottom: var(--space-4); }
  /* Over product screens: centred below the phones so it never covers the UI */
  .project__visual--phones .project__badge { right: auto; left: 50%; transform: translateX(-50%); }
}

/* Placeholder visual (until real imagery is supplied) */
.placeholder-visual {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 80% at var(--gx, 78%) var(--gy, 22%), hsla(var(--hue, 220), 70%, 58%, 0.26), transparent 62%),
    radial-gradient(50% 60% at 10% 100%, hsla(var(--hue, 220), 60%, 40%, 0.14), transparent 70%),
    linear-gradient(180deg, #0e1117 0%, #090b0f 100%);
}
.placeholder-visual::before { /* quiet 12-column grid — a nod to systems thinking */
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}
.placeholder-visual__num {
  position: absolute;
  left: 4%;
  bottom: -0.16em;
  font-family: var(--font-hero);
  font-style: italic;
  font-size: clamp(9rem, 26vw, 26rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.16);
}
.placeholder-visual__label {
  position: absolute;
  top: calc(4.6% + var(--space-5)); /* clear the parallax overscan */
  left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-subtle);
}

.noscript-note { padding-block: var(--space-8); color: var(--c-text-muted); }

/* ===== CONTACT ===== */
.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--section-space);
  border-top: var(--border);
}
.contact__glow {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -55%;
  width: min(140vw, 1800px);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(70, 108, 196, 0.26), rgba(70, 108, 196, 0.06) 60%, transparent);
  pointer-events: none;
}
.contact__title {
  max-width: 15ch;
  margin: var(--space-5) 0 var(--space-8);
  font-family: var(--font-hero);
  font-weight: 400;
  font-size: clamp(2.75rem, 1.5rem + 4vw, 5.5rem);   /* 44–88: below the hero name (--fs-display), above project titles */
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.contact__title em { color: var(--c-accent-soft); }
.contact__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-6) var(--space-8);
}
.contact__lede { max-width: 36ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--c-text-muted); }
.contact__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.contact__email {
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--c-text-subtle);
}
@media (max-width: 767px) {
  .contact__actions { width: 100%; }
  .contact__actions .btn { flex: 1 1 0; min-width: 0; padding-inline: var(--space-4); }
}

/* ===== FOOTER ===== */
.footer {
  border-top: var(--border);
  padding-block: var(--space-7) var(--space-6);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;   /* name | © and back to top (the link list was removed) */
  align-items: start;
  gap: var(--space-6) var(--space-9);
}
.footer__name { font-family: var(--font-hero); font-size: 1.5rem; line-height: 1.2; color: var(--c-text); }
.footer__role { margin-top: var(--space-1); }
.footer__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  text-align: right;
}
.footer__meta .link { padding-block: var(--space-2); }

@media (max-width: 767px) {
  .footer__inner { grid-template-columns: 1fr; gap: var(--space-5); }
  .footer__meta { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; }
}

/* ===== CASE STUDY ===== */
.case-hero { padding-top: calc(var(--nav-top) + var(--nav-h) + var(--space-9)); }
.case-hero .project__header { margin-top: var(--space-7); }   /* shells without caseStudy data */
.case-hero__back { margin-left: -0.125rem; }

/* Small mono label used across the case study ("Process", "Constraint", …) */
.case-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.4;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-subtle);
}

/* Hero (no floating nav on case studies): back link + index → title → summary →
   facts → process, over a quieter, smaller copy of the Home hero light (same HERO_FRAG
   shader via initHeroLight), confined to the right and shaded away from the text. */
.case-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: var(--space-9);
  /* Fallback when WebGL is unavailable: the Home hero's fallback light, dimmed */
  background:
    radial-gradient(40% 60% at 92% 6%, rgba(78, 118, 196, 0.2), transparent 70%),
    radial-gradient(28% 50% at 102% 52%, rgba(44, 76, 150, 0.16), transparent 70%),
    var(--c-bg);
}
.case-intro__backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 64%;                     /* a smaller stage: the light stays on the right */
}
.case-intro__canvas {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2s var(--ease-out);
}
.case-intro__canvas.is-live { opacity: 0.6; }
.case-intro__shade { /* same idea as .hero__shade: melt the light into the page, keep the text side dark */
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--c-bg) 0%, rgba(7, 8, 10, 0.6) 22%, rgba(7, 8, 10, 0) 55%),
    linear-gradient(to top, var(--c-bg) 0%, rgba(7, 8, 10, 0.8) 34%, rgba(7, 8, 10, 0) 70%);
}
@media (max-width: 767px) {
  .case-intro__backdrop { width: 100%; }
  .case-intro__canvas.is-live { opacity: 0.5; }
}
.case-intro__inner { padding-top: clamp(1.5rem, 0.75rem + 2.5vw, 3.5rem); }
.case-intro__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.case-intro__back { margin-left: -0.125rem; color: var(--c-text); }
.case-intro__index { font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.case-intro__title {
  margin-top: clamp(3rem, 1.5rem + 4.5vw, 6.5rem);
  font-family: var(--font-hero);
  font-weight: 400;
  font-size: var(--fs-section);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.case-intro__summary {
  max-width: 34em;               /* ≈ two balanced lines on desktop */
  margin-top: var(--space-5);
  font-size: clamp(1.1875rem, 0.95rem + 0.75vw, 1.6875rem);   /* 19–27px */
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: rgba(242, 243, 245, 0.86);
  text-wrap: balance;
}
.case-intro__summary--wide { max-width: 58em; }   /* longer summaries: about two lines on desktop */

/* Small, muted, tracked labels — facts and "Project process" */
.case-facts__label,
.case-facts dt {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.case-process { margin-top: var(--space-8); padding-top: var(--space-8); border-top: var(--border); }
.case-process__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 36px; }
.case-process__title { font-size: 0.875rem; }   /* one step above the fact labels: it heads a whole row */
.case-process__nav { display: none; gap: var(--space-2); }
.case-process.is-scrollable .case-process__nav { display: flex; }
.case-process__btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: var(--border);
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.case-process__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.case-process__btn--prev svg { transform: rotate(180deg); }
.case-process__btn:hover:not(:disabled) { border-color: var(--c-border-hover); background: var(--c-surface-hover); }
.case-process__btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.case-process__btn:disabled { opacity: 0.35; cursor: default; }
.case-process__list {
  --gap: var(--space-6);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(8.5rem, 1fr);   /* six or seven steps fit one row from ~1200px */
  gap: var(--gap);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.case-process__list::-webkit-scrollbar { display: none; }
/* Seven or more steps keep the six-step width (project-01), so the row scrolls with the arrows
   rather than squeezing every step */
@media (min-width: 768px) {
  .case-process__list:has(> .case-process__step:nth-child(7)) { grid-auto-columns: calc((100% - 5 * var(--gap)) / 6); }
}
.case-process__list:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 4px; border-radius: var(--radius-sm); }
.case-process__step { position: relative; min-width: 0; padding-top: var(--space-4); border-top: 1px solid var(--c-border-strong); scroll-snap-align: start; }
.case-process__step:not(:last-child)::after { /* the arrow to the next step, centred in the gap on the top rule */
  content: "→";
  position: absolute;
  top: 0;
  right: calc(var(--gap) / -2);
  font-size: 0.875rem;
  line-height: 1;
  color: #6a92e4;
  transform: translate(50%, -55%);
}
.case-process__num { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tracking-eyebrow); color: var(--c-text-subtle); font-variant-numeric: tabular-nums; }
.case-process__label { margin-top: var(--space-2); font-size: 1rem; font-weight: 500; line-height: 1.3; color: var(--c-text); }
.case-process__detail { margin-top: var(--space-1); font-size: 0.8125rem; line-height: 1.45; color: var(--c-text-muted); }
/* Steps arrive one after another, left to right, once on load */
@keyframes process-step-in { from { opacity: 0; transform: translate3d(-8px, 0, 0); } }
.js .case-process__step { animation: process-step-in var(--dur-slow) var(--ease-out) both; animation-delay: calc(250ms + var(--i, 0) * 90ms); }
@media (prefers-reduced-motion: reduce) { .js .case-process__step { animation: none; } }
@media (max-width: 767px) {
  .case-process__list { grid-auto-columns: 68%; }   /* one step and the start of the next */
}

.case-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-7) var(--grid-gap);
  margin: var(--space-8) 0 0;
  padding-top: var(--space-7);
  border-top: var(--border);
}
.case-facts dd { margin: var(--space-2) 0 0; font-size: 1.0625rem; line-height: 1.4; color: var(--c-text); }
.case-facts__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--dur-base) var(--ease-out);
}
.case-facts__link:hover { text-decoration-color: currentColor; }
.case-facts__link:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; border-radius: 2px; }
.case-facts__arrow { font-size: 0.875em; transition: transform var(--dur-base) var(--ease-out); }
.case-facts__link:hover .case-facts__arrow { transform: translate(2px, -2px); }
.case-facts__sources { max-width: 90ch; margin-top: var(--space-5); font-size: 0.75rem; line-height: 1.5; color: var(--c-text-subtle); }
@media (max-width: 1023px) { .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--grid-gap); } }
@media (max-width: 359px)  { .case-facts { grid-template-columns: 1fr; } }

/* The hero visual is above the fold: never stage it behind a scroll reveal */
.reveal-ready .case-hero .project__visual-wrap,
.reveal-ready .case-hero--intro .project__visual-wrap { opacity: 1; transform: none; }

/* Sections */
.cs-section { padding-top: var(--section-space); }
.cs-section--last { padding-bottom: var(--section-space); }
.cs-head { max-width: 62rem; margin-bottom: var(--space-8); }
.cs-head__index,
.cs-brief__label {   /* every numbered section label ("01 — …", "02 — …") shares this */
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.cs-head__title {
  margin-top: var(--space-5);         /* label → heading: same gap as label → Background paragraph */
  font-family: var(--font-hero);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.cs-head__intro { max-width: 56ch; margin-top: var(--space-5); font-size: var(--fs-lead); line-height: 1.5; color: var(--c-text-muted); }

.cs-block { margin-top: var(--space-9); }
.cs-head + .cs-block { margin-top: 0; }
.cs-subtitle { font-size: 1.25rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.cs-note { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--c-text-subtle); }
.cs-note--center { margin-top: var(--space-6); text-align: center; }
.cs-caption { margin-top: var(--space-4); font-size: 0.8125rem; line-height: 1.5; color: var(--c-text-subtle); }

/* Two-column editorial split: narrative (7/12) + aside (4/12) */
.cs-split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-7) var(--grid-gap);
  align-items: start;
}
.cs-split__main { grid-column: 1 / span 7; }
.cs-split__side { grid-column: 9 / -1; }
@media (max-width: 1023px) { .cs-split__main, .cs-split__side { grid-column: 1 / -1; } }

.cs-prose p { max-width: 64ch; color: var(--c-text-muted); }
.cs-prose p + p { margin-top: var(--space-5); }
.cs-prose strong { font-weight: 500; color: var(--c-text); }
.cs-prose .cs-lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--c-text); }

.cs-meta { display: grid; gap: var(--space-4); margin: 0; }
.cs-meta > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border);
}
.cs-meta dt { font-size: var(--fs-small); color: var(--c-text); }
.cs-meta dd { margin: 0; font-size: var(--fs-small); color: var(--c-text-muted); }

/* 01 Background & Challenge — label, one wide editorial paragraph (typed in on scroll), three goal cards */
.cs-brief { position: relative; isolation: isolate; }
.cs-brief::before { /* the low navy haze that carries on from the hero, kept behind and to the right */
  content: "";
  position: absolute;
  top: -10%;
  right: 0;
  z-index: -1;
  width: 55%;
  height: 80%;
  background: radial-gradient(50% 55% at 70% 25%, rgba(54, 92, 196, 0.12), rgba(54, 92, 196, 0) 70%);
  pointer-events: none;
}
.cs-brief__text {
  max-width: 78rem;              /* ≈ five lines on a wide desktop */
  margin-top: var(--space-5);
  font-size: clamp(1.25rem, 0.9rem + 1.1vw, 1.875rem);   /* 20–30px */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--c-text-muted);
  text-wrap: pretty;             /* no single word stranded on the last line */
}
.cs-brief__text--sm {          /* section intros under a serif heading (05 Validate): one step down */
  max-width: 62rem;
  font-size: clamp(1.0625rem, 0.92rem + 0.55vw, 1.375rem);   /* 17–22px */
  line-height: 1.55;
}
.cs-brief__text--full { max-width: none; }   /* the full content width, same type (project-02 Background: three lines on desktop) */
.cs-brief__text p + p { margin-top: 1em; }   /* multi-paragraph intros (07 Outcome) */
.cs-brief__text strong { font-weight: 500; color: var(--c-text); }   /* a real loaded weight, not a synthesized bold */

.cs-goal-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}
.cs-goal-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid rgba(160, 172, 196, 0.16);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
}
.cs-goal-card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(79, 124, 245, 0.1);
  color: #6a92e4;
}
.cs-goal-card__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cs-goal-card__label {
  padding-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.cs-goal-card__text { margin-top: var(--space-3); font-size: 1.125rem; line-height: 1.5; color: var(--c-text); }
@media (max-width: 1023px) {
  .cs-goal-cards { grid-template-columns: 1fr; gap: var(--space-4); }
  .cs-goal-card { padding: var(--space-5); }
}

/* Typing reveal (script.js initTyping): every character is already laid out, only its
   opacity changes, so line wrapping and the section height never move. */
/* Scroll-linked text (script.js initScrollText): dimmed words light up as the paragraph scrolls in */
.cs-scroll-text__w { opacity: 0.18; transition: opacity 240ms linear; }
.cs-scroll-text__w.is-on { opacity: 1; }

/* Research — "What usage told us": each live screen inside the same CSS phone (one width,
   one frame, one screen viewport in the Bütçe proportion) on a smoked-glass card. Screens
   taller than the viewport scroll inside it; the frame never moves and nothing is cropped. */
.cs-shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--grid-gap);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.cs-shot { min-width: 0; }
.cs-shot__card {
  display: flex;
  justify-content: center;
  padding: var(--space-5);
  border: 1px solid rgba(180, 195, 225, 0.14);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 30% at 50% 0%, rgba(120, 150, 220, 0.08), rgba(120, 150, 220, 0) 70%),
    linear-gradient(145deg, rgba(24, 32, 50, 0.72), rgba(12, 16, 26, 0.58));
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 12px 32px rgba(0, 0, 0, 0.18);
}

/* Phone: thin metallic edge (gradient border), black bezel, small island. Same for all three. */
.cs-phone {
  --phone-w: 15rem;
  position: relative;
  width: min(var(--phone-w), 100%);
  padding: 0.4375rem;
  border: 1.5px solid transparent;
  border-radius: 2.5rem;
  background:
    linear-gradient(#050608, #050608) padding-box,
    linear-gradient(150deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.07) 28%, rgba(255, 255, 255, 0.04) 64%, rgba(255, 255, 255, 0.22)) border-box;
  box-shadow: 0 18px 36px -22px rgba(0, 0, 0, 0.75);
}
.cs-phone::before { /* dynamic island — kept inside the screenshots' own status bar */
  content: "";
  position: absolute;
  top: 0.75rem;
  left: 50%;
  z-index: 2;
  width: 24%;
  height: 0.875rem;
  border-radius: 999px;
  background: #000;
  transform: translateX(-50%);
}
.cs-phone__screen {   /* fixed viewport: the clip and the rounded corners */
  position: relative;
  overflow: hidden;
  aspect-ratio: 585 / 1266;
  border-radius: 2rem;
  background: #fff;
}
.cs-phone__scroll {   /* the part that moves; scrollbar hidden, scrolling kept */
  height: 100%;
  overflow-y: auto;
  overscroll-behavior-y: auto;   /* at either end, the page takes over the scroll */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cs-phone__scroll::-webkit-scrollbar { display: none; }
.cs-phone__screen:not(.is-scrollable) .cs-phone__scroll { overflow: hidden; }   /* fits as-is: nothing to scroll */
.cs-phone__scroll img { display: block; width: 100%; height: auto; }

/* Scroll cues, shared by every internally scrollable screen on the page ([data-scroll-cue],
   script.js initScrollCues): a small, always-visible "Scroll to explore ↓" pill near the bottom
   of the viewport that steps aside once the end is reached. Harcamalarım also keeps a soft fade
   in its own light grey, which goes at the end too. */
.cs-phone__screen.has-cue::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 3.5rem;
  background: linear-gradient(to bottom, rgba(242, 243, 247, 0), rgba(242, 243, 247, 0.92));
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.cs-phone__screen.has-cue.is-end::after { opacity: 0; }
.cs-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 0.75rem;
  z-index: 2;
  padding: 0.3125rem 0.625rem;
  border-radius: 999px;
  background: rgba(15, 18, 26, 0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.92);
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
[data-scroll-cue].is-end .cs-scroll-hint,
[data-scroll-cue].is-scrolling .cs-scroll-hint { opacity: 0; }
.cs-phone__scroll:focus-visible { outline: none; }
.cs-phone__screen:has(.cs-phone__scroll:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 3px; }

/* "What usage told us": a screen recording of the live screens before the redesign
   (script.js initLiveProto) on the left, the three usage insights on the right. Each view is a
   real screenshot export (585 pt wide, labels translated to English); screens push in from the
   right and slide back as in iOS, long screens scroll by moving the canvas (--sy in points over
   --sd ms), and the bottom tab bar stays pinned over every view. A dot marks each tap. */
.cs-live {
  display: grid;
  /* the prototype column is just wide enough for the phone and its controls on one row */
  grid-template-columns: minmax(0, 37.5rem) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-7) clamp(3rem, 1rem + 5vw, 7rem);
  margin-top: var(--space-6);
}
.cs-live__proto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  margin: 0;
  padding: var(--space-6) var(--space-5);
  border: 1px solid rgba(180, 195, 225, 0.14);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 30% at 50% 0%, rgba(120, 150, 220, 0.08), rgba(120, 150, 220, 0) 70%),
    linear-gradient(145deg, rgba(24, 32, 50, 0.72), rgba(12, 16, 26, 0.58));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 12px 32px rgba(0, 0, 0, 0.18);
}
.cs-live__proto .case-label { margin: 0; }
.cs-phone.cs-live__phone { --phone-w: 18rem; }
.cs-live__screen { container-type: inline-size; }
.cs-live__view {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #fff;
  transform: translateX(100%);
  transition: transform 460ms cubic-bezier(0.32, 0.72, 0, 1), filter 460ms cubic-bezier(0.32, 0.72, 0, 1);
}
.cs-live__view.is-active { z-index: 2; transform: none; }
.cs-live__view.is-under { transform: translateX(-28%); filter: brightness(0.82); }
.cs-live__view.is-leaving { z-index: 3; }
.cs-live__view .cs-phone__scroll { overflow: hidden; }
.cs-live__canvas {
  position: relative;
  transform: translateY(calc(var(--sy, 0) * -100cqw / var(--pts, 585)));
  transition: transform var(--sd, 0ms) cubic-bezier(0.45, 0, 0.25, 1);
}
.cs-live__canvas img { display: block; width: 100%; height: auto; }
.cs-live__bar { z-index: 4; }
/* Each screen's own navigation bar and tab bar (cropped from the same export) stay pinned
   while its content scrolls underneath, and slide with the screen on push and back */
.cs-live__top,
.cs-live__bot { position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none; }
.cs-live__top { top: 0; }
.cs-live__bot { bottom: 0; }
.cs-live__top img,
.cs-live__bot img { display: block; width: 100%; height: auto; }
/* Overlays inside a view: a bottom sheet over a dimmed screen, or the same screen in another
   state (a different month) that fades in on top */
.cs-live__layer { position: absolute; inset: 0; z-index: 4; opacity: 0; transition: opacity 240ms var(--ease-out); pointer-events: none; }
.cs-live__layer.is-on { opacity: 1; }
.cs-live__layer img { display: block; width: 100%; height: auto; }
.cs-live__layer--sheet { background: rgba(8, 12, 20, 0.42); transition-duration: 300ms; }
.cs-live__layer--sheet img { position: absolute; left: 0; bottom: 0; transform: translateY(100%); transition: transform 460ms cubic-bezier(0.32, 0.72, 0, 1); }
.cs-live__layer--sheet.is-on img { transform: none; }
/* A sheet that is its own screen (project-02 Ixam chat): it slides up over the screen below,
   which stays put under a dim layer; header and input are pinned inside the rounded panel and
   the chat scrolls between them. Its pieces fade up one by one; text lines type out left to
   right (--d = how long a line takes). */
.cs-live__layer--dim { background: rgba(8, 12, 20, 0.42); transition-duration: 300ms; }
.cs-live__view--sheet { background: none; transform: translateY(100%); }
.cs-live__screen:has(> .cs-live__view--sheet.is-active) > .cs-live__view.is-under { transform: none; filter: none; }
/* Tabs on one screen (project-02 Discover): a tab replaces the one before in place, no slide */
.cs-live__view--tab { transform: none; opacity: 0; transition: opacity 260ms var(--ease-out); }
.cs-live__view--tab.is-active { opacity: 1; }
.cs-live__screen:has(> .cs-live__view--tab.is-active) > .cs-live__view.is-under { transform: none; filter: none; }
.cs-live__panel {
  position: absolute;
  inset: calc(54 * 100cqw / 393) 0 0;
  overflow: hidden;
  border-radius: calc(24 * 100cqw / 393) calc(24 * 100cqw / 393) 0 0;
  background: #e4efff;
}
.cs-live__chat { position: absolute; left: 0; right: 0; top: calc(70 * 100cqw / 393); bottom: calc(101 * 100cqw / 393); overflow: hidden; }
.cs-live__chat .cs-live__canvas { height: calc(var(--ch) * 100cqw / 393); }
.cs-live__panel-top, .cs-live__panel-bot { position: absolute; left: 0; right: 0; z-index: 2; }
.cs-live__panel-top { top: 0; }
.cs-live__panel-bot { bottom: 0; }
.cs-live__panel img, .cs-live__block img { display: block; width: 100%; height: auto; }
.cs-live__block {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--y) * 100cqw / 393);
  opacity: 0;
  transform: translateY(calc(10 * 100cqw / 393));
  transition: opacity 320ms var(--ease-out), transform 420ms cubic-bezier(0.32, 0.72, 0, 1);
}
.cs-live__block.is-on { opacity: 1; transform: none; }
.cs-live__block--type { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path var(--d, 900ms) linear; }
.cs-live__block--type.is-on { clip-path: inset(0 0 0 0); }
.cs-live__screen.is-reset .cs-live__block { transition: none; }
.cs-live__layer--blur { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }   /* the screen behind a sheet softens, as in the İş Trade designs */
/* A recording of one dashboard card rather than a phone (Regular Payments): the card keeps its
   16 pt corners and grows or shrinks to the height of the tab that is showing (--h, export px) */
.cs-live__player:has(> .cs-live__card) { container-type: inline-size; width: 100%; }
.cs-live__card {
  --h: 1263;
  position: relative;
  width: min(100%, 23rem);
  border-radius: calc(16 / 369 * min(100cqw, 23rem));
  overflow: hidden;
  filter: drop-shadow(0 28px 40px rgba(0, 0, 0, 0.5));
}
.cs-live__card::before { content: ""; display: block; padding-top: calc(var(--h) / 1107 * 100%); transition: padding-top 420ms cubic-bezier(0.32, 0.72, 0, 1); }
.cs-live__card:has([data-layer="bills"].is-on) { --h: 1725; }
.cs-live__card:has([data-layer="subs"].is-on) { --h: 2187; }
.cs-live__card:has([data-layer="loans"].is-on) { --h: 1806; }
.cs-live__card .cs-live__view { background: none; }
.cs-live__card.is-reset::before { transition: none; }
/* A recording on its own (Final UI chapter): the phone, then its controls */
.cs-live__player { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
/* Rewinding to the start: fade to black, jump back without transitions, fade in */
.cs-live__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #050608;
  opacity: 0;
  pointer-events: none;
  transition: opacity 360ms var(--ease-out);
}
.cs-live__screen.is-rewind::after { opacity: 1; }
.cs-live__screen.is-reset .cs-live__view,
.cs-live__screen.is-reset .cs-live__canvas,
.cs-live__screen.is-reset .cs-live__layer,
.cs-live__screen.is-reset .cs-live__layer img { transition: none; }
.cs-live__tap {
  position: absolute;
  left: calc(var(--tx, 0) * 100cqw / var(--pts, 585));
  top: calc(var(--ty, 0) * 100cqw / var(--pts, 585));
  z-index: 5;
  width: calc(64 / 585 * 100cqw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(16, 22, 34, 0.34);   /* reads on the white screens and the blue headers */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 3.5px rgba(16, 22, 34, 0.22), 0 3px 12px rgba(10, 20, 40, 0.3);
  opacity: 0;
  translate: -50% -50%;
  pointer-events: none;
}
.cs-live__tap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 3.5px rgba(16, 22, 34, 0.2);
  opacity: 0;
}
.cs-live__tap.is-on { animation: cs-live-tap 720ms var(--ease-out); }
.cs-live__tap.is-on::after { animation: cs-live-ripple 720ms var(--ease-out); }
@keyframes cs-live-tap {
  0% { opacity: 0; scale: 1.35; }
  25% { opacity: 1; scale: 1; }
  45% { opacity: 1; scale: 0.8; }
  100% { opacity: 0; scale: 0.9; }
}
@keyframes cs-live-ripple {
  0%, 40% { opacity: 0; scale: 1; }
  50% { opacity: 1; }
  100% { opacity: 0; scale: 2.1; }
}
.cs-live__controls { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }   /* chips, then restart and play/pause together below */
.cs-live__buttons { display: flex; gap: var(--space-2); }
.cs-live__toggle { flex: none; }
.cs-live__steps { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.cs-live__steps li {
  padding: 0.25rem 0.625rem;
  border: 1px solid rgba(180, 195, 225, 0.16);
  border-radius: 999px;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--c-text-muted);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.cs-live__steps li.is-current { color: var(--c-text); border-color: rgba(106, 146, 228, 0.6); background: rgba(106, 146, 228, 0.16); }
.cs-live__toggle {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(180, 195, 225, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: var(--c-text);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.cs-live__toggle:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(180, 195, 225, 0.4); }
.cs-live__toggle:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.cs-live__toggle svg { width: 0.875rem; height: 0.875rem; fill: currentColor; }
.cs-live__restart svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cs-live__icon-pause,
.cs-live__toggle.is-playing .cs-live__icon-play { display: none; }
.cs-live__toggle.is-playing .cs-live__icon-pause { display: inline; }
.cs-live__insights { display: grid; gap: 2.5rem; max-width: 34rem; margin: 0; padding: 0; list-style: none; }
.cs-live__insights .cs-shot__trend { margin-top: 0; }
/* Where there is room (desktop, and the stacked layout on wide phones/tablets) the four insights
   sit in a 2 × 2 grid that spans the column, each under a hairline like the case facts */
@media (min-width: 1200px) {
  .cs-live__insights { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) clamp(2rem, 1rem + 2.5vw, 4rem); max-width: none; }
  .cs-live__insights > li { padding-top: var(--space-5); border-top: var(--border); }
}
@media (max-width: 1199px) {
  .cs-live { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2.5rem, 5vw, 4rem); }
}
@media (max-width: 899px) {
  .cs-live { grid-template-columns: 1fr; }
  .cs-live__insights { gap: var(--space-6); }
}
@media (min-width: 600px) and (max-width: 899px) {
  .cs-live__insights { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gap); max-width: none; }
  .cs-live__insights > li { padding-top: var(--space-5); border-top: var(--border); }
}
@media (max-width: 599px) {
  .cs-live__proto { padding-inline: var(--space-4); }
}

.cs-shot__trend { display: block; margin-top: var(--space-4); color: #6a92e4; }
.cs-shot__trend svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cs-shot__title { margin-top: var(--space-3); font-size: 1.125rem; font-weight: 500; line-height: 1.35; color: var(--c-text); }
.cs-shot__text { max-width: 40ch; margin-top: var(--space-2); color: var(--c-text-muted); }
@media (max-width: 767px) {
  .cs-shots { grid-template-columns: 1fr; gap: var(--space-7); }
  .cs-phone { --phone-w: 14.5rem; }
}

/* Discovery reuses the Background goal cards, with a figure between label and text */
.cs-block .cs-goal-cards { margin-top: var(--space-6); }
.cs-goal-card__heading { padding-top: 0.25rem; font-size: 1.0625rem; font-weight: 500; line-height: 1.35; color: var(--c-text); }
.cs-goal-card__count { margin-right: 0.15em; font-weight: 500; color: #6a92e4; font-variant-numeric: tabular-nums; }
.cs-goal-card__desc { margin-top: var(--space-2); font-size: var(--fs-small); line-height: 1.55; color: var(--c-text-muted); }

/* Discovery cards: "View details →" opens the card's bottom sheet (.cs-sheet, script.js initSheets).
   Styled like the case-facts link, in the card's count blue. */
.cs-goal-card > div:has(> .cs-goal-card__more) { display: flex; flex-direction: column; align-self: stretch; }   /* links line up at the card bottoms */
.cs-goal-card__desc:has(+ .cs-goal-card__more) { margin-bottom: var(--space-4); }
.cs-goal-card__more {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.4em;
  margin-top: auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  color: #6a92e4;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-base) var(--ease-out);
}
.cs-goal-card__more [aria-hidden] { transition: transform var(--dur-base) var(--ease-out); }
.cs-goal-card__more:hover { color: var(--c-accent-soft); text-decoration-color: currentColor; }
.cs-goal-card__more:hover [aria-hidden] { transform: translateX(3px); }
.cs-goal-card__more:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; border-radius: 2px; }

/* Bottom sheet: a modal <dialog> anchored to the bottom of the viewport that slides up. The
   header (title and close) stays put while the body scrolls on its own; the page behind is
   locked (html.has-sheet) and dimmed by the backdrop. */
.cs-sheet {
  inset: auto 0 0;
  width: min(100%, 72rem);
  max-width: none;
  height: auto;
  max-height: 88vh;
  max-height: 88dvh;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-text);
  overflow: visible;
}
.cs-sheet::backdrop { background: rgba(4, 5, 7, 0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cs-sheet__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: inherit;
  border: 1px solid var(--c-border-strong);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--c-bg-raised);
  box-shadow: 0 -24px 64px rgba(0, 0, 0, 0.5);
}
.cs-sheet__handle {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  width: 2.5rem;
  height: 4px;
  border-radius: 2px;
  background: var(--c-border-strong);
  translate: -50% 0;
}
.cs-sheet__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--gutter) var(--space-4);
  border-bottom: var(--border);
}
.cs-sheet__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid rgba(180, 195, 225, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: var(--c-text);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.cs-sheet__close:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(180, 195, 225, 0.4); }
.cs-sheet__close:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.cs-sheet__close svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.cs-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-6) var(--gutter) var(--space-8);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cs-sheet__body > :first-child { margin-top: 0; }
.cs-sheet__body > .cs-block + .cs-block { margin-top: var(--space-8); }   /* sub-sections in one sheet (project-01 interviews) */
html.has-sheet { overflow: hidden; scrollbar-gutter: stable; }
.cs-sheet[open] .cs-sheet__panel { animation: cs-sheet-in var(--dur-base) var(--ease-out); }
.cs-sheet[open]::backdrop { animation: cs-sheet-fade var(--dur-base) var(--ease-out); }
.cs-sheet.is-closing .cs-sheet__panel { animation: cs-sheet-out 280ms var(--ease-in-out) forwards; }
.cs-sheet.is-closing::backdrop { animation: cs-sheet-fade 280ms var(--ease-in-out) reverse forwards; }
@keyframes cs-sheet-in { from { transform: translateY(100%); } }
@keyframes cs-sheet-out { to { transform: translateY(100%); } }
@keyframes cs-sheet-fade { from { opacity: 0; } }
/* Wide sheet (What people said): on desktop it widens and the four insight cards sit side by
   side with no carousel; tablets and phones keep the swipeable row and its dots. */
@media (min-width: 1200px) {
  .cs-sheet--wide { width: min(100%, 100rem); }
  .cs-sheet--wide .cs-ins__track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
    -webkit-mask-image: none;
    mask-image: none;
    cursor: auto;
  }
  .cs-sheet--wide .cs-ins__dots { display: none; }
}
@media (max-width: 767px) {
  .cs-sheet { max-height: 92vh; max-height: 92dvh; }
  .cs-sheet__head { padding-top: var(--space-5); }
}
/* Literature & trend review sheet (project-01): market statistics, a research feature and
   source cards. Built from the section head, persona card, goal-card icon and trait-row patterns;
   charts use only figures printed in the cited reports. */
.cs-mkt__head { margin-bottom: var(--space-7); }
.cs-mkt__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); margin: 0; padding: 0; list-style: none; }
.cs-mkt__stats + .cs-note { margin-top: var(--space-4); }
.cs-mkt__stat {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
}
.cs-mkt__stat-head { display: flex; align-items: center; gap: var(--space-4); }
.cs-mkt__label { font-family: var(--font-mono); font-size: var(--fs-micro); line-height: 1.5; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--c-text-muted); }
.cs-mkt__figure { margin-top: var(--space-5); font-family: var(--font-hero); font-size: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); line-height: 1; font-variant-numeric: lining-nums; }
.cs-mkt__desc { margin-top: var(--space-3); font-size: var(--fs-small); line-height: 1.55; color: var(--c-text-muted); }
.cs-mkt__chart { margin: auto 0 0; padding-top: var(--space-6); }
.cs-mkt__chart figcaption { margin-top: var(--space-3); font-size: 0.75rem; line-height: 1.5; color: var(--c-text-subtle); }
/* Bars start at zero; --v is the value and --max the scale top */
.cs-mkt__bars { --max: 120.4; display: flex; align-items: flex-end; gap: var(--space-2); height: 9rem; margin: 0; padding: 0; list-style: none; }
.cs-mkt__bars--pct { --max: 40; }   /* still zero-based, so 32 : 37 keeps its true ratio */
.cs-mkt__bars li { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; height: 100%; font-size: var(--fs-micro); line-height: 1.3; text-align: center; color: var(--c-text-subtle); }
.cs-mkt__bar { display: block; width: 100%; max-width: 3rem; height: calc((100% - 2.6rem) * var(--v) / var(--max)); border-radius: 4px 4px 2px 2px; background: rgba(106, 146, 228, 0.32); }
.cs-mkt__bars li.is-current .cs-mkt__bar { background: #6a92e4; }
.cs-mkt__bars b { margin-top: var(--space-2); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--c-text); }
.cs-mkt__bars b em { margin-left: 0.25em; font-style: normal; color: #6a92e4; }
.cs-mkt__bars li > span:last-child { white-space: nowrap; }
.cs-mkt__donut-wrap { display: flex; align-items: center; gap: var(--space-5); }
.cs-mkt__donut { flex: none; width: 7.5rem; height: 7.5rem; }
.cs-mkt__donut circle { fill: none; stroke-width: 6; }
.cs-mkt__donut-rest { stroke: rgba(255, 255, 255, 0.1); }
.cs-mkt__donut-part { stroke: #6a92e4; }
.cs-mkt__donut text { font-family: var(--font-hero); font-size: 8px; fill: var(--c-text); }
.cs-mkt__chart.cs-mkt__donut-wrap figcaption { display: grid; gap: var(--space-2); margin-top: 0; }
.cs-mkt__key { display: inline-flex; align-items: center; gap: 0.5em; font-size: var(--fs-small); color: var(--c-text-muted); }
.cs-mkt__key::before { content: ""; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.cs-mkt__key--part::before { background: #6a92e4; }
.cs-mkt__survey { font-size: 0.75rem; color: var(--c-text-subtle); }
.cs-mkt__source {
  align-self: flex-start;
  display: inline-block;
  margin-top: var(--space-5);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--c-text-subtle);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-base) var(--ease-out);
}
.cs-mkt__source:hover { color: var(--c-text); text-decoration-color: currentColor; }
.cs-mkt__source:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; border-radius: 2px; }
.cs-mkt__feature {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-8);
  padding: var(--space-7);
  border: var(--border);
  border-radius: var(--radius-lg);
  background: radial-gradient(80% 70% at 100% 0%, rgba(106, 146, 228, 0.1), rgba(106, 146, 228, 0) 70%), var(--c-surface);
}
.cs-mkt__chip {
  display: inline-flex;
  padding: 0.25rem 0.625rem;
  border: 1px solid rgba(106, 146, 228, 0.4);
  border-radius: 999px;
  background: rgba(106, 146, 228, 0.12);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent-soft);
}
.cs-mkt__feature-title { margin-top: var(--space-4); font-family: var(--font-hero); font-weight: 400; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.15; text-wrap: balance; }
.cs-mkt__feature .cs-mkt__desc { max-width: 60ch; }
.cs-mkt__facts { margin: 0; }
.cs-mkt__sources { margin-top: var(--space-8); }
.cs-src-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.cs-src {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-5);
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.cs-src:hover { border-color: var(--c-border-hover); background: var(--c-surface-hover); }
.cs-src:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.cs-src .cs-goal-card__icon { width: 2.5rem; height: 2.5rem; }
.cs-src .cs-goal-card__icon svg { width: 18px; height: 18px; }
.cs-src__title { margin-top: var(--space-4); font-size: 1rem; font-weight: 500; line-height: 1.35; color: var(--c-text); }
.cs-src__desc { margin-top: var(--space-2); font-size: var(--fs-small); line-height: 1.5; color: var(--c-text-muted); }
.cs-src__meta { margin-top: auto; padding: var(--space-4) var(--space-6) 0 0; font-family: var(--font-mono); font-size: var(--fs-micro); line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-subtle); }
.cs-src__ext {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-5);
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--c-text-subtle);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.cs-src:hover .cs-src__ext { stroke: var(--c-text); transform: translate(1px, -1px); }
@media (max-width: 1199px) { .cs-src-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .cs-mkt__stats { grid-template-columns: 1fr; }
  .cs-mkt__feature { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-6); }
  .cs-src-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) { .cs-src-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .cs-sheet[open] .cs-sheet__panel, .cs-sheet[open]::backdrop,
  .cs-sheet.is-closing .cs-sheet__panel, .cs-sheet.is-closing::backdrop { animation: none; }
}

/* Research insights: one row of cards in the insight-card scroller (.cs-ins, script.js
   initInsights), equal heights so the quotes line up */
.cs-ins__track.cs-insights { align-items: stretch; }
.cs-insight {
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--card-w);
  scroll-snap-align: start;
  padding: var(--space-5);
  border: 1px solid rgba(160, 172, 196, 0.16);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
}
.cs-insight__num { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tracking-eyebrow); color: var(--c-text-subtle); }
.cs-insight__title { margin-top: var(--space-2); font-family: var(--font-hero); font-weight: 400; font-size: 1.375rem; line-height: 1.2; text-wrap: balance; }
.cs-insight > p { margin: var(--space-3) 0 var(--space-5); font-size: var(--fs-small); line-height: 1.55; color: var(--c-text-muted); }
.cs-insight .cs-quote { margin-top: auto; }
.cs-insight .cs-quote p { font-size: 1rem; }
.cs-quote { margin: var(--space-5) 0 0; padding-left: var(--space-5); border-left: 1px solid rgba(143, 180, 255, 0.45); }
.cs-quote p { max-width: 48ch; font-family: var(--font-hero); font-style: italic; font-size: 1.1875rem; line-height: 1.45; color: var(--c-text); }
.cs-quote footer { margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--c-text-subtle); }

.cs-personas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.cs-persona {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
}
/* Small illustrative portrait (AI-generated, Figma "Portfolio — Persona Portraits"), top right,
   no taller than the share figure beside it so it never reaches the name below. */
.cs-persona__portrait {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(106, 146, 228, 0.45), 0 0 0 4px rgba(106, 146, 228, 0.07);
}
.cs-persona__share { font-family: var(--font-hero); font-size: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); line-height: 1; }
.cs-persona__name { margin-top: var(--space-4); font-size: 1.125rem; font-weight: 500; line-height: 1.3; }
.cs-persona__segment { margin-top: var(--space-1); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--c-text-subtle); }
.cs-persona__traits { display: grid; gap: var(--space-2); margin: var(--space-5) 0 0; }
.cs-persona__traits > div { display: flex; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-2); border-top: var(--border); font-size: var(--fs-small); }
.cs-persona__traits dt { color: var(--c-text-muted); }
.cs-persona__traits dd { margin: 0; text-align: right; color: var(--c-text); }
.cs-persona__design { margin-top: auto; padding-top: var(--space-5); font-size: var(--fs-small); color: var(--c-text-muted); }
@media (max-width: 1023px) { /* one card per swipe; the list scrolls, never the page */
  .cs-personas {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(16rem, 46%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-3);
  }
  .cs-persona { scroll-snap-align: start; }
}
@media (max-width: 767px) { .cs-personas { grid-auto-columns: 84%; } }

/* Structure map — thin-line tree on a raised board */
.cs-map {
  margin: 0;
  padding: var(--space-8) var(--space-6);
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--c-bg-raised);
}
.cs-map__root { display: flex; flex-direction: column; align-items: center; }
.cs-map__stem,
.cs-map__root::after { width: 1px; height: var(--space-5); background: var(--c-border-strong); }
.cs-map__root::after { content: ""; }
.cs-node {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  background: var(--c-bg);
  font-size: var(--fs-small);
  line-height: 1.3;
  text-align: center;
  color: var(--c-text);
}
.cs-node--muted { border-style: dashed; color: var(--c-text-muted); }
.cs-node--key { border-color: rgba(143, 180, 255, 0.6); background: rgba(143, 180, 255, 0.06); font-weight: 500; color: var(--c-accent-soft); }
.cs-node--leaf { border-color: var(--c-border); font-size: 0.8125rem; color: var(--c-text-muted); }
.cs-map__branches {
  --gap: var(--space-4);
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gap);
  margin: 0;
  padding: var(--space-5) 0 0;
  list-style: none;
}
.cs-map__branches::before { /* bus between the first and last branch centres */
  content: "";
  position: absolute;
  top: 0;
  left: calc((100% - 5 * var(--gap)) / 12);
  right: calc((100% - 5 * var(--gap)) / 12);
  height: 1px;
  background: var(--c-border-strong);
}
.cs-map__branch { position: relative; display: flex; flex-direction: column; align-items: stretch; }
.cs-map__branch::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--space-5));
  left: 50%;
  width: 1px;
  height: var(--space-5);
  background: var(--c-border-strong);
}
.cs-map__branch ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.cs-map__branch ul li::before { content: ""; display: block; width: 1px; height: var(--space-4); margin-inline: auto; background: var(--c-border); }
.cs-map .cs-caption { margin-top: var(--space-7); text-align: center; }
@media (max-width: 1023px) { /* vertical tree with a left rail */
  .cs-map { padding: var(--space-6) var(--space-5); }
  .cs-map__root { align-items: flex-start; }
  .cs-map__stem, .cs-map__root::after { margin-left: var(--space-5); }
  .cs-map__branches {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-left: var(--space-5);
    padding: 0 0 0 var(--space-5);
    border-left: 1px solid var(--c-border-strong);
  }
  .cs-map__branches::before { display: none; }
  .cs-map__branch { align-items: flex-start; }
  .cs-map__branch::before { top: 20px; left: calc(-1 * var(--space-5)); width: var(--space-5); height: 1px; }
  .cs-map__branch ul { gap: var(--space-2); margin-top: var(--space-2); padding-left: var(--space-5); border-left: 1px solid var(--c-border); }
  .cs-map__branch ul li::before { display: none; }
  .cs-node { justify-content: flex-start; text-align: left; }
  .cs-map .cs-caption { text-align: left; }
}

/* Finding → decision rows */
.cs-decisions { margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.cs-decisions li {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--grid-gap);
  padding-block: var(--space-5);
  border-top: var(--border);
}
.cs-decisions li:last-child { border-bottom: var(--border); }
.cs-decisions__finding { position: relative; padding-right: var(--space-7); color: var(--c-text); }
.cs-decisions__finding::after { content: "→"; position: absolute; top: 0; right: var(--space-3); color: var(--c-accent); }
.cs-decisions__decision { max-width: 60ch; color: var(--c-text-muted); }
@media (max-width: 767px) {
  .cs-decisions li { grid-template-columns: 1fr; gap: var(--space-2); }
  .cs-decisions__finding { padding-right: 0; }
  .cs-decisions__finding::after { content: none; }
  .cs-decisions__decision { padding-left: var(--space-4); border-left: 1px solid rgba(143, 180, 255, 0.45); }
}

/* Finding → decision (end of 02 Research): number · finding + priority · arrow · decision + note ·
   real UI excerpt. Rows grow with their notes; columns stay aligned. Stacks below 1024px. */
.cs-fd { margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.cs-fd__row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 3.2fr) 1.75rem minmax(0, 4.6fr) minmax(0, 4.2fr);
  align-items: start;
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-top: var(--border);
}
.cs-fd__row:last-child { border-bottom: var(--border); }
.cs-fd__num { padding-top: 0.1rem; font-size: 0.8125rem; color: var(--c-text-subtle); font-variant-numeric: tabular-nums; }
.cs-fd__finding p { margin-top: var(--space-3); font-weight: 500; line-height: 1.45; color: var(--c-text); }
.cs-fd__arrow { padding-top: 2.1rem; color: #6a92e4; }
.cs-fd__decision { padding-top: 2.1rem; }   /* lines the decision up with the finding text, below the pill */
.cs-fd__decision > p { max-width: 54ch; color: var(--c-text-muted); }
.cs-fd__decision > p:first-child { color: var(--c-text); }
.cs-fd__explain { margin-top: var(--space-2); font-size: var(--fs-small); line-height: 1.55; }

/* Priority pill — one size and shape; restrained tints with readable text */
.cs-prio {
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  padding: 0 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.cs-prio--high { background: rgba(229, 96, 110, 0.14); color: #f2a0a8; box-shadow: inset 0 0 0 1px rgba(229, 96, 110, 0.3); }
.cs-prio--mid  { background: rgba(226, 172, 74, 0.13); color: #ecc580; box-shadow: inset 0 0 0 1px rgba(226, 172, 74, 0.3); }
.cs-prio--low  { background: rgba(96, 186, 146, 0.13); color: #95d6b6; box-shadow: inset 0 0 0 1px rgba(96, 186, 146, 0.3); }

/* Supporting notes — Technical Constraint, Reflection, Stakeholder Constraint share one style */
.cs-fd__note {
  max-width: 54ch;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(160, 172, 196, 0.16);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.025);
}
.cs-fd__note-title { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text-muted); }
.cs-fd__note p:last-child { margin-top: var(--space-1); font-size: var(--fs-small); line-height: 1.55; color: var(--c-text-muted); }

/* UI preview — one component for all six rows: a fixed window onto the same phone (one width,
   frame and screen scale for all). Each phone carries the full-width real screen and is moved up
   by --focus (points on the 393pt screen) so the linked component sits at the top of the window;
   .is-top phones show their screen from the very top, island included. The window clips the
   phone above and below, never at the sides. */
.cs-fd__preview {
  --pw: 17.5rem;                                          /* phone width, identical in every row */
  --win: 18.75rem;                                        /* window height, identical in every row */
  --s: calc((var(--pw) - 0.875rem - 3px) / 393);          /* screen px per design point */
  --lead: calc(0.75rem - 0.4375rem - 1.5px);              /* target sits 12px under the window top */
  position: relative;
  height: var(--win);
  overflow: hidden;
  border: 1px solid rgba(160, 172, 196, 0.14);
  border-radius: var(--radius-md);
  background: #0b1426;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.cs-fd__preview .cs-phone {
  --phone-w: var(--pw);
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--pw);
  transform: translate(-50%, calc(var(--lead) - var(--focus, 0) * var(--s)));
}
.cs-fd__preview .cs-phone.is-top { --lead: 1rem; }
.cs-fd__preview .cs-phone:not(.is-top)::before { display: none; }   /* the island is off-window */
.cs-fd__preview .cs-phone__screen { aspect-ratio: auto; border-radius: 2rem; }
.cs-fd__preview .cs-phone__screen img { display: block; width: 100%; height: auto; }
/* A single UI component instead of a phone (project-02, row 04): same window, the component centred
   in it at the phones' width */
.cs-fd__preview--component { display: grid; place-items: center; }
.cs-fd__preview--component img { display: block; width: var(--pw); max-width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45)); }
/* The page shows the first rows; "View more" under the list opens all of them in a sheet */
.cs-fd__more { display: flex; justify-content: center; margin-top: var(--space-6); }
.cs-fd__more .cs-goal-card__more { align-self: auto; margin-top: 0; font-size: var(--fs-body); }
.cs-sheet .cs-fd__row:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 1023px) {
  .cs-fd__row { grid-template-columns: 2rem minmax(0, 1fr); row-gap: var(--space-4); }
  .cs-fd__arrow { display: none; }
  .cs-fd__decision, .cs-fd__preview { grid-column: 2; padding-top: 0; }
  .cs-fd__preview { --pw: 15rem; --win: 17rem; max-width: 28rem; }
}

/* Insight card showcase (end of 02 Research): the İşCep insight cards side by side straight on
   the page, as many as the content width fits; the rest continue in the same row and are reached
   by swiping, trackpad or dragging. The row clips at the content edge and snaps card by card
   (script.js initInsights). */
.cs-ins { margin-top: var(--space-6); }
.cs-ins__frame {
  --card-w: 21.5rem;
  --gap: var(--grid-gap);
}
.cs-ins__track {
  display: flex;
  align-items: flex-start;       /* each card hugs its own text */
  gap: var(--gap);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), transparent);
}
.cs-ins__track::-webkit-scrollbar { display: none; }
.cs-ins__track:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 4px; }
.cs-ins__track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.cs-ins__track.is-end { -webkit-mask-image: none; mask-image: none; }
@media (hover: hover) and (pointer: fine) { .cs-ins__track { cursor: grab; } }

/* The product card in İşCep's dark UI (Figma 2:263319, "Faydalı Bilgiler" dark): same width for
   every variant, height hugging its content */
.cs-ins-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--card-w);
  scroll-snap-align: start;
  overflow: hidden;
  border-radius: 1rem;
  background: #1c1d20;
  color: #fff;
  font-family: var(--font-sans);
}
.cs-ins-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid #25272b;
}
.cs-ins-card__title { font-size: 1.0625rem; font-weight: 500; color: #fff; }
.cs-ins-card__head svg { width: 20px; height: 20px; fill: none; stroke: #8e8e93; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cs-ins-card__body { padding: 1.125rem 1.25rem 1.25rem; }
.cs-ins-card__body p { font-size: 0.9375rem; line-height: 1.6; color: #fff; }
.cs-ins-card__cta {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  margin-top: 0.875rem;
  padding: 0 1rem;
  border-radius: 0.5rem;
  background: #3c7dff;
  font-size: 0.78125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #f2f2f7;
}
/* Position dots (the first card in view) */
.cs-ins__dots { display: flex; justify-content: center; gap: 0.25rem; margin-top: var(--space-5); }
.cs-ins__dot {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.cs-ins__dot::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin: auto;
  border-radius: 50%;
  background: rgba(160, 172, 196, 0.35);
  transition: background-color var(--dur-fast) var(--ease-out), width var(--dur-base) var(--ease-out);
}
.cs-ins__dot[aria-current="true"]::before { width: 1rem; border-radius: 3px; background: #6a92e4; }
.cs-ins__dot:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; border-radius: 4px; }
@media (max-width: 767px) {
  .cs-ins__frame { --card-w: 82%; --gap: var(--space-3); }
}

/* Scope calls: the goal-card icon, then the label and text running the card's full width with
   the same inset on both sides */
.cs-scope {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-8);
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
}
.cs-scope .case-label { padding-top: 0.25rem; }
.cs-scope p:last-child { margin-top: var(--space-3); color: var(--c-text-muted); text-wrap: pretty; }
@media (max-width: 767px) {
  .cs-scope { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5); }   /* icon above the text */
  .cs-scope .cs-goal-card__icon { width: 2.5rem; height: 2.5rem; }
  .cs-scope .cs-goal-card__icon svg { width: 18px; height: 18px; }
}

/* ---------- Project-02 additions (İşTrade & Wealth Management) ---------- */
/* Source tag on finding rows: same pill as the priority tags, in a neutral blue */
.cs-prio--src { background: rgba(106, 146, 228, 0.12); color: #a9c2f2; box-shadow: inset 0 0 0 1px rgba(106, 146, 228, 0.3); }

/* Competitive landscape — theme · what competitors do · the gap (stacks per row on mobile) */
.cs-gap { margin-top: var(--space-6); border-top: var(--border); }
.cs-gap__row {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 5.6fr) minmax(0, 4fr);
  gap: var(--grid-gap);
  padding-block: var(--space-4);
  border-bottom: var(--border);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--c-text-muted);
}
.cs-gap__row--head {
  padding-block: var(--space-3);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-subtle);
}
.cs-gap__theme { font-weight: 500; color: var(--c-text); }
.cs-gap__gap { color: var(--c-accent-soft); }
.cs-gap__gap b {
  display: inline-block;
  margin-left: 0.35em;
  padding: 0 0.4em;
  border-radius: 4px;
  background: rgba(106, 146, 228, 0.14);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .cs-gap__row { grid-template-columns: 1fr; gap: var(--space-1); }
  .cs-gap__row--head { display: none; }
  .cs-gap__gap { margin-top: var(--space-1); }
}

/* Four segment cards: the persona card without portrait or share figure */
.cs-personas--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs-personas--four .cs-persona__name { margin-top: 0; }
@media (max-width: 1023px) { .cs-personas--four { grid-template-columns: none; } }

/* Priority matrix — 2 × 2, impact high on the left, uncertainty high on top (as on the workshop board) */
.cs-matrix { margin: var(--space-6) 0 0; }
.cs-matrix__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-left: var(--space-6);
  overflow: hidden;
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--c-border);
}
.cs-matrix__cell { padding: var(--space-6); background: var(--c-bg-raised); }
.cs-matrix__cell--first { background: linear-gradient(160deg, rgba(64, 112, 222, 0.16), rgba(64, 112, 222, 0.04)), var(--c-bg-raised); }
.cs-matrix__cell--bet   { background: linear-gradient(160deg, rgba(143, 180, 255, 0.08), rgba(143, 180, 255, 0.02)), var(--c-bg-raised); }
.cs-matrix__label { font-family: var(--font-hero); font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem); line-height: 1.2; color: var(--c-text); }
.cs-matrix__meta { margin-top: var(--space-1); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--c-text-subtle); }
.cs-matrix__cell ul { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.cs-matrix__cell li { position: relative; padding-left: var(--space-4); font-size: var(--fs-small); line-height: 1.5; color: var(--c-text-muted); }
.cs-matrix__cell li::before { content: ""; position: absolute; top: 0.6em; left: 0; width: 6px; height: 1px; background: #6a92e4; }
.cs-matrix__axis {
  position: absolute;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-subtle);
}
.cs-matrix__axis--y { top: 50%; left: calc(-1 * var(--space-6)); transform: translate(-50%, -50%) rotate(-90deg) translateY(50%); white-space: nowrap; }
.cs-matrix__axis--x { display: none; }
.cs-matrix .cs-caption { margin-top: var(--space-5); }
@media (max-width: 767px) {
  .cs-matrix__grid { grid-template-columns: 1fr; margin-left: 0; }
  .cs-matrix__axis--y { display: none; }
  .cs-matrix__cell { padding: var(--space-5); }
  .cs-matrix__cell--first { order: -1; }   /* quick wins lead when the quadrants stack */
}
.cs-quote--wide { margin-top: var(--space-7); }
.cs-quote--wide p { max-width: 60ch; font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem); }

/* Structure tree (project-02): a multi-level information architecture. Desktop: branches
   fan out under a bus line like the IA board; chains run straight down. Below 1024px it
   becomes an indented list on a left rail. Column widths follow each branch's leaf count
   (flex-grow set inline). */
.cs-tree { --tick: var(--space-5); --c-line: var(--c-border-strong); }
.cs-tree ul { position: relative; display: flex; justify-content: center; margin: 0; padding: var(--tick) 0 0; list-style: none; }
.cs-tree > ul { padding-top: 0; }
.cs-tree li { position: relative; flex: 1 1 0; min-width: 0; padding: var(--tick) 0.375rem 0; }
.cs-tree li::before,
.cs-tree li::after {   /* the bus, half on each side of the node's own drop */
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  width: 50%;
  height: var(--tick);
  border-top: 1px solid var(--c-line);
}
.cs-tree li::after { right: auto; left: 50%; border-left: 1px solid var(--c-line); }
.cs-tree li:first-child::before,
.cs-tree li:last-child::after { border-top: 0; }
.cs-tree li:only-child { padding-top: 0; }   /* a chain: just the drop from the parent */
.cs-tree li:only-child::before,
.cs-tree li:only-child::after { display: none; }
.cs-tree ul ul::before { content: ""; position: absolute; top: 0; left: 50%; height: var(--tick); border-left: 1px solid var(--c-line); }
.cs-tree .cs-node { max-width: 11.5rem; min-height: 44px; margin-inline: auto; font-size: 0.8125rem; }   /* boxes, as on the board; the column only sets the spacing */
.cs-tree li > .cs-node + .cs-node { margin-top: var(--space-2); }
.cs-tree__edge { display: block; margin-bottom: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--c-text-subtle); text-align: center; }
.cs-node--ai { border-color: rgba(143, 180, 255, 0.6); background: rgba(143, 180, 255, 0.07); color: var(--c-accent-soft); }
.cs-node--ai::before { content: "✦"; margin-right: 0.4em; font-size: 0.75em; color: #8fb4ff; }
/* Project-01 IA: a page name with its contents underneath, and the board's "new feature" flag */
.cs-node--stack { flex-direction: column; gap: 0.2rem; }
.cs-node__sub { font-size: 0.75rem; line-height: 1.35; color: var(--c-text-subtle); }
.cs-node--new { border-color: rgba(143, 180, 255, 0.6); background: rgba(143, 180, 255, 0.07); }
.cs-node__flag { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8fb4ff; }
@media (max-width: 1023px) {
  .cs-tree ul { display: block; margin-left: var(--space-5); padding: 0 0 0 var(--space-4); border-left: 1px solid var(--c-line); }
  .cs-tree > ul { margin-left: var(--space-5); }
  .cs-tree ul ul::before { display: none; }
  .cs-tree li,
  .cs-tree li:only-child { padding: var(--space-3) 0 0; }
  .cs-tree li::before,
  .cs-tree li:only-child::before { /* tick from the rail to the node */
    display: block;
    top: calc(var(--space-3) + 22px);
    right: auto;
    left: calc(-1 * var(--space-4));
    width: var(--space-4);
    height: 0;
    border-top: 1px solid var(--c-line);
  }
  .cs-tree li::after { display: none; }
  .cs-tree .cs-node { display: inline-flex; max-width: none; margin-inline: 0; justify-content: flex-start; text-align: left; }
  .cs-tree li > .cs-node + .cs-node { display: flex; width: fit-content; }
  .cs-tree__edge { text-align: left; }
  .cs-tree .cs-node--stack { align-items: flex-start; }
  .cs-tree ul ul { margin-left: var(--space-4); }
}

/* Sticky tab bar: the screen's own bottom bar (cropped from the same export) stays pinned over
   the scrolling screen, as in the app. At the end of the scroll it lines up exactly with the bar
   in the image. --bar is its height in app px; the scroll hint sits just above it. */
.cs-phone__screen.has-sticky { container-type: inline-size; }
.cs-phone__sticky { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; }
.cs-phone__sticky img { display: block; width: 100%; height: auto; }
/* Frosted glass under a transparent sticky bar, placed in app px like the Figma layer (--b = blur radius) */
.cs-phone__glass {
  position: absolute;
  left: calc(var(--x) / 393 * 100cqw);
  top: calc(var(--y) / 393 * 100cqw);
  width: calc(var(--w) / 393 * 100cqw);
  height: calc(var(--h) / 393 * 100cqw);
  border-radius: calc(var(--r) / 393 * 100cqw);
  -webkit-backdrop-filter: blur(calc(var(--b) / 393 * 100cqw));
  backdrop-filter: blur(calc(var(--b) / 393 * 100cqw));
}
.cs-phone__sticky img { position: relative; }
.cs-phone__screen.has-sticky .cs-scroll-hint { z-index: 3; bottom: calc(var(--bar) / 393 * 100cqw + 0.5rem); }

/* Screens that open as a sheet (no status bar): no island over their header */
.cs-phone.cs-phone--no-island::before { display: none; }

/* "Also in the concept": the wireframe gallery inside a regular section */
.cs-gallery--flat { margin-top: var(--space-6); max-width: none; }

/* Wireframes board — full-bleed raised band */
.cs-section--board {
  margin-top: var(--section-space);
  padding-block: var(--space-10);
  border-block: var(--border);
  background: var(--c-bg-raised);
}
.cs-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.cs-gallery .cs-caption { text-align: center; color: var(--c-text-muted); }
@media (max-width: 1023px) { /* swipe through screens; the gallery scrolls, never the page */
  .cs-gallery {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(15rem, 40%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-4);
  }
  .cs-gallery__item { scroll-snap-align: start; }
}
@media (max-width: 767px) { .cs-gallery { grid-auto-columns: 72%; } }

/* Wireframes and Final UI reuse the Research phone (.cs-phone): same width, frame and screen.
   Concept screens scroll inside it in greyscale; Final UI screens, ~3% taller than the screen,
   are fitted to its height (no crop, no scroll) and centred on the black screen ground. */
.cs-gallery__item .cs-phone,
.cs-chapter__media .cs-phone { margin-inline: auto; }
.cs-phone__scroll--wire img { filter: grayscale(1); }   /* luminosity treatment, as in the Figma file */
.cs-phone__screen--fit { display: flex; justify-content: center; background: #050608; }
.cs-phone__screen--fit img { width: auto; max-width: 100%; height: 100%; }

/* Usability-test results — stacked bars (palette validated for CVD on the dark surface) */
.cs-results {
  --c-direct: #6a92e4;
  --c-indirect: #3d5aa6;
  --c-fail: #c46c4c;
  margin: var(--space-9) 0 0;
  padding: var(--space-7);
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--c-bg-raised);
}
.cs-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--c-text-muted);
}
.cs-legend li { display: flex; align-items: center; gap: var(--space-2); }
.cs-legend__swatch { width: 10px; height: 10px; border-radius: 2px; }
.cs-legend__swatch--direct { background: var(--c-direct); }
.cs-legend__swatch--indirect { background: var(--c-indirect); }
.cs-legend__swatch--fail { background: var(--c-fail); }
.cs-results__rows { display: grid; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.cs-result {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr) minmax(0, 15rem);
  align-items: center;
  gap: var(--space-5);
}
.cs-result__task { font-size: var(--fs-small); color: var(--c-text); }
.cs-result__value { font-size: 0.8125rem; text-align: right; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.cs-bar { display: flex; gap: 2px; height: 14px; }
.cs-bar__seg { flex-basis: 0; min-width: 4px; transition: filter var(--dur-fast) var(--ease-out); }
.cs-bar__seg:first-child { border-radius: 4px 0 0 4px; }
.cs-bar__seg:last-child { border-radius: 0 4px 4px 0; }
.cs-bar__seg:only-child { border-radius: 4px; }
.cs-bar__seg:hover { filter: brightness(1.18); }
.cs-bar__seg--direct { background: var(--c-direct); }
.cs-bar__seg--indirect { background: var(--c-indirect); }
.cs-bar__seg--fail { background: var(--c-fail); }
.cs-results .cs-caption { margin-top: var(--space-6); }
/* Caption on the left, "See what changed" (opens its sheet) at the bottom right */
.cs-results__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-top: var(--space-6); }
.cs-results__foot .cs-caption { margin: 0; }
.cs-results__foot .cs-goal-card__more { align-self: auto; margin: 0 0 0 auto; font-size: var(--fs-body); }
.cs-sheet .cs-decisions li:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 767px) {
  .cs-results { padding: var(--space-5); }
  .cs-result { grid-template-columns: 1fr; gap: var(--space-2); }
  .cs-result__value { text-align: left; }
}

/* Final UI chapters — alternate screen and text sides */
.cs-chapter {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-7) var(--grid-gap);
  align-items: center;
  padding-block: var(--space-9);
  border-top: var(--border);
}
.cs-chapter__media {
  grid-column: 1 / span 6;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-md);
  background:
    radial-gradient(55% 45% at 50% 42%, rgba(64, 112, 222, 0.24), rgba(64, 112, 222, 0) 72%),
    linear-gradient(180deg, #0a1534 0%, #071029 60%, #050a1a 100%);
}
.cs-chapter__text { grid-column: 8 / -1; }
.cs-chapter--reverse .cs-chapter__media { grid-column: 7 / -1; order: 2; }
.cs-chapter--reverse .cs-chapter__text { grid-column: 1 / span 5; order: 1; }
.cs-chapter__title {
  margin-top: var(--space-4);
  font-family: var(--font-hero);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
  line-height: 1.12;
  text-wrap: balance;
}
.cs-chapter__text > p:not(.eyebrow) { max-width: 44ch; margin-top: var(--space-5); color: var(--c-text-muted); }
.cs-chapter__text .eyebrow { color: var(--c-text-subtle); }
.cs-card-shot { max-width: 23rem; margin-inline: auto; }
.cs-card-shot img { width: 100%; height: auto; filter: drop-shadow(0 28px 40px rgba(0, 0, 0, 0.5)); }
@media (max-width: 1023px) {
  .cs-chapter__media,
  .cs-chapter__text,
  .cs-chapter--reverse .cs-chapter__media,
  .cs-chapter--reverse .cs-chapter__text { grid-column: 1 / -1; order: 0; }
  .cs-chapter__media { padding: var(--space-7) var(--space-5); }
}

.case-note {
  margin-block: var(--space-8) var(--section-space);
  padding: var(--space-6);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--radius-sm);
  color: var(--c-text-muted);
}
.case-note p + p { margin-top: var(--space-2); }
.case-next {
  padding-block: var(--space-8) var(--section-space);
  border-top: var(--border);
}
.case-next .project__title { margin-top: var(--space-3); }

/* ---------- 06 MOTION ---------- */

/* Hero intro — only staged when JS is present */
.js .hero .mask__inner { transform: translate3d(0, 108%, 0); }
.js .hero [data-intro] { opacity: 0; transform: translate3d(0, 14px, 0); }

.js.is-ready .hero .mask__inner {
  transform: none;
  transition: transform var(--dur-reveal) var(--ease-out);
}
.js.is-ready .hero .mask:nth-child(2) .mask__inner { transition-delay: 90ms; }
.js.is-ready .hero [data-intro] {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(350ms + var(--i, 0) * 90ms);
}

/* Scroll reveals — staged only when JS confirms motion is allowed */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }

.reveal-ready .project__header > * {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
.reveal-ready .project__header > .project__title  { transition-delay: 60ms; }
.reveal-ready .project__header > .project__meta,
.reveal-ready .project__header > .project__cta    { transition-delay: 140ms; }
.reveal-ready .project__visual-wrap {
  opacity: 0;
  transform: translate3d(0, 48px, 0) scale(0.94);
  transform-origin: 50% 0;
  transition: opacity 1.1s var(--ease-out) 120ms, transform 1.6s var(--ease-out) 120ms;
}
.reveal-ready .project-item.is-in .project__header > *,
.reveal-ready .project-item.is-in .project__visual-wrap { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .js .hero .mask__inner,
  .js .hero [data-intro] { opacity: 1; transform: none; }
  .scroll-cue__line::after { transform: none; }
  .project.is-hover .project__frame { transform: none; }
  .ambient__ribbon { animation: none; }
  .hero__inner { will-change: auto; }
}

/* ===== RESUME (resume/index.html) =====
   An editorial career archive built from the site's own tokens: Playfair for headings and
   figures, Geist for text, Geist Mono for dates and labels. A sticky section index on wide
   screens (a thin progress bar on small ones) and a timeline whose line fills as it scrolls
   (script.js initResume). */
.nav__link[aria-current="page"] { color: var(--c-text); }
.nav__link[aria-current="page"]::after { opacity: 1; transform: scale(1); }

.rs-hero { padding-top: clamp(8rem, 5rem + 8vw, 13rem); }
.rs-hero__title {
  grid-column: 1 / span 8;
  align-self: start;
  font-family: var(--font-hero);
  font-weight: 400;
  font-size: clamp(3rem, 1.4rem + 6vw, 7.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.rs-hero__title em, .rs-close__title em { font-style: italic; color: var(--c-accent-soft); }
.rs-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: var(--grid-gap);
  row-gap: var(--space-7);
}
.rs-hero__lead { grid-column: 1 / span 8; display: grid; align-content: start; gap: var(--space-7); }
/* Portrait: a medium rounded rectangle beside the introduction, the name and title under it */
.rs-portrait { grid-column: 10 / -1; grid-row: 1 / span 2; align-self: start; margin: 0; }
.rs-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: 50% 35%;
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--c-bg-raised);
}
.rs-portrait figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4); margin-top: var(--space-4); }
.rs-portrait__name { font-weight: 500; font-size: var(--fs-small); color: var(--c-text); }
.rs-portrait__role { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.9; color: var(--c-text-subtle); }
.rs-hero__intro { font-size: clamp(1.0625rem, 0.92rem + 0.45vw, 1.3125rem); max-width: 42em; font-weight: 300; line-height: 1.55; color: var(--c-text); text-wrap: pretty; }   /* 17–21, light; a measure for two lines on desktop */
.rs-hero__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); align-content: start; margin: 0; }
.rs-hero__meta dd { margin: var(--space-2) 0 0; font-size: var(--fs-small); line-height: 1.55; color: var(--c-text-muted); }

/* Career path: five stops on one hairline */
.rs-path {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: var(--space-9) 0 0;
  padding: 0;
  list-style: none;
  border-top: var(--border);
}
.rs-path li { position: relative; padding-top: var(--space-5); }
.rs-path li::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-bg);
  border: 1px solid var(--c-border-hover);
}
.rs-path li:last-child::before { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 4px rgba(143, 180, 255, 0.14); }
.rs-path__year { display: block; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tracking-eyebrow); color: var(--c-text-subtle); }
.rs-path__what { display: block; margin-top: var(--space-2); font-size: var(--fs-small); line-height: 1.45; color: var(--c-text-muted); }
.rs-path li:last-child .rs-path__what { color: var(--c-text); }

.rs-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); margin-top: var(--space-8); }

/* Layout: sticky index + content */
.rs-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  margin-top: var(--section-space);
}
.rs-index { grid-column: 1 / span 2; position: sticky; top: 7.5rem; align-self: start; display: flex; gap: var(--space-4); }
.rs-index__track { position: relative; flex: none; width: 1px; background: var(--c-border); }
.rs-index__fill { position: absolute; inset: 0 0 auto; height: calc(var(--p, 0) * 100%); background: var(--c-accent); }
.rs-index ol { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.rs-index a {
  display: flex;
  gap: var(--space-3);
  padding: 0.125rem 0;
  font-size: var(--fs-small);
  color: var(--c-text-subtle);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.rs-index a:hover, .rs-index a[aria-current="true"] { color: var(--c-text); }
.rs-index__num { font-family: var(--font-mono); font-size: var(--fs-micro); line-height: 1.9; letter-spacing: 0.08em; color: var(--c-text-subtle); }
.rs-index a[aria-current="true"] .rs-index__num { color: var(--c-accent); }
.rs-index a:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 4px; border-radius: var(--radius-xs); }
.rs-content { grid-column: 4 / -1; min-width: 0; }

.rs-section { scroll-margin-top: 6rem; }
/* The Work link lands with the project's category pill 24px under the top edge. The nav hides
   while scrolling down, so this cancels the page's nav-sized scroll-padding and the item's own
   top padding. */
.project-item { scroll-margin-top: calc(var(--space-5) - var(--space-6) - var(--nav-top) - var(--nav-h) - var(--space-4)); }
.rs-section + .rs-section { margin-top: var(--section-space); }
.rs-head { padding-bottom: var(--space-6); border-bottom: var(--border); }
.rs-head__title {
  margin-top: var(--space-4);
  font-family: var(--font-hero);
  font-weight: 400;
  font-size: clamp(2rem, 1.3rem + 2vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.012em;
}

/* 01 Impact: large figures */
.rs-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.rs-figure { padding: var(--space-7) var(--grid-gap) var(--space-7) 0; border-bottom: var(--border); }
.rs-figure:nth-child(even) { padding-left: var(--grid-gap); padding-right: 0; border-left: var(--border); }
.rs-figure__num {
  font-family: var(--font-hero);
  font-weight: 400;
  font-size: clamp(3.25rem, 2rem + 3.6vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
}
.rs-figure__arrow { margin: 0 0.12em; font-family: var(--font-sans); font-size: 0.5em; vertical-align: 0.3em; color: var(--c-accent); }
.rs-figure__unit { font-family: var(--font-sans); font-size: 0.24em; letter-spacing: 0; color: var(--c-text-muted); }
.rs-figure__text { max-width: 38ch; margin-top: var(--space-4); font-size: var(--fs-small); line-height: 1.6; color: var(--c-text-muted); }
.rs-figure__link {
  display: inline-flex;
  gap: 0.4em;
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  font-weight: 500;
  color: #6a92e4;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.rs-figure__link span { transition: transform var(--dur-base) var(--ease-out); }
.rs-figure__link:hover { color: var(--c-accent-soft); }
.rs-figure__link:hover span { transform: translateX(3px); }

/* 02 Career: a timeline whose line fills as the roles scroll past */
.rs-timeline { position: relative; margin: var(--space-7) 0 0; padding: 0 0 0 var(--space-7); list-style: none; }
.rs-timeline::before, .rs-timeline::after { content: ""; position: absolute; left: 5px; top: 0.4rem; width: 1px; }
.rs-timeline::before { bottom: 0; background: var(--c-border); }
.rs-timeline::after { height: calc(var(--p, 0) * (100% - 0.4rem)); background: linear-gradient(180deg, var(--c-accent), rgba(143, 180, 255, 0.35)); }
.rs-role { position: relative; }
.rs-role + .rs-role { margin-top: var(--space-9); }
.rs-role__marker {
  position: absolute;
  left: calc(-1 * var(--space-7));
  top: 0.15rem;
  z-index: 1;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--c-bg);
  border: 1px solid var(--c-border-hover);
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.rs-role.is-active .rs-role__marker { background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 0 0 5px rgba(143, 180, 255, 0.14); }
.rs-role__dates { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.08em; line-height: 1.6; color: var(--c-text-subtle); }
.rs-role__company {
  margin-top: var(--space-3);
  font-family: var(--font-hero);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.rs-role__for { font-family: var(--font-sans); font-size: 0.42em; letter-spacing: 0; color: var(--c-text-muted); white-space: nowrap; }
.rs-role__title { margin-top: var(--space-2); font-weight: 500; color: var(--c-text); }
.rs-role__where { margin-left: var(--space-2); font-weight: 400; font-size: var(--fs-small); color: var(--c-text-subtle); }
.rs-role__context { max-width: 62ch; margin-top: var(--space-5); font-size: var(--fs-lead); line-height: 1.55; color: var(--c-text-muted); }
.rs-role__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--grid-gap); margin-top: var(--space-6); }
.rs-role__label { margin-bottom: var(--space-3); }
.rs-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.rs-list li { position: relative; padding-left: 1.1rem; font-size: var(--fs-small); line-height: 1.6; color: var(--c-text-muted); }
.rs-list li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 0.45rem; height: 1px; background: var(--c-border-hover); }
.rs-list--accent li { color: var(--c-text); }
.rs-list--accent li::before { background: var(--c-accent); }
.rs-role__work { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.rs-role__work a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 0.875rem;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  color: var(--c-text-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.rs-role__work a:hover { color: var(--c-text); border-color: var(--c-border-hover); background: var(--c-surface); }
.rs-role__work a:focus-visible, .rs-figure__link:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.rs-role__awards { margin-top: var(--space-5); font-size: var(--fs-small); color: var(--c-text-subtle); }
.rs-earlier { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--grid-gap); margin: 0; padding: 0; list-style: none; }
.rs-earlier__role { margin-top: var(--space-2); font-weight: 500; color: var(--c-text); }
.rs-earlier__org { margin-top: var(--space-1); font-size: var(--fs-small); color: var(--c-text-muted); }

/* 03 Practice: numbered rows, the skills as one quiet line each */
.rs-practice { margin: 0; padding: 0; list-style: none; }
.rs-practice li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--space-2) var(--grid-gap);
  align-items: baseline;
  padding: var(--space-6) 0;
  border-bottom: var(--border);
  transition: background-color var(--dur-base) var(--ease-out);
}
.rs-practice li:hover { background: linear-gradient(90deg, rgba(143, 180, 255, 0.04), transparent 70%); }
.rs-practice__num { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.08em; color: var(--c-text-subtle); transition: color var(--dur-fast) var(--ease-out); }
.rs-practice li:hover .rs-practice__num { color: var(--c-accent); }
.rs-practice__name { font-family: var(--font-hero); font-weight: 400; font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem); line-height: 1.2; }
.rs-practice__skills { font-size: var(--fs-small); line-height: 1.75; color: var(--c-text-muted); }
.rs-skill { white-space: nowrap; }   /* a skill never splits; the slash stays at the end of its line */
.rs-skill:not(:last-child)::after { content: "/"; content: "/" / ""; margin: 0 0.55em 0 0.6em; color: var(--c-border-hover); }
.rs-practice__skills { display: flex; flex-wrap: wrap; row-gap: 0.15rem; }
@media (max-width: 767px) { .rs-skill { white-space: normal; } }

/* 04 Education & more: quieter columns */
.rs-quiet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--grid-gap); margin-top: var(--space-7); }
.rs-quiet__col--wide { grid-column: 1 / -1; }
.rs-quiet__label { margin-bottom: var(--space-4); font-weight: 400; }
.rs-quiet__label:not(:first-child) { margin-top: var(--space-7); }
.rs-quiet__main { font-weight: 500; color: var(--c-text); }
.rs-quiet__main + .rs-quiet__main { margin-top: var(--space-2); }
.rs-quiet__sub { margin-top: var(--space-1); font-size: var(--fs-small); font-weight: 400; line-height: 1.55; color: var(--c-text-muted); }
.rs-quiet__main .rs-quiet__sub { margin-left: var(--space-2); }
.rs-awards { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.rs-certs { display: grid; margin: 0; }
.rs-certs > div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); column-gap: var(--grid-gap); padding: var(--space-4) 0; border-top: var(--border); }
.rs-certs dt { grid-row: span 9; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.08em; line-height: 1.9; color: var(--c-text-subtle); }
.rs-certs dd { grid-column: 2; margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--c-text-muted); }
.rs-certs dd + dd { margin-top: var(--space-2); }
.rs-certs dd span { margin-left: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-subtle); }

.rs-close { margin-top: var(--section-space); padding-top: var(--space-8); padding-bottom: var(--section-space); border-top: var(--border); }
.rs-close .rs-close__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 54rem; margin-top: var(--space-7); }   /* the Reach Out modal's two actions, side by side */
@media (max-width: 767px) { .rs-close .rs-close__actions { grid-template-columns: 1fr; } }
.rs-close__title { font-family: var(--font-hero); font-weight: 400; font-size: clamp(2.5rem, 1.5rem + 3.4vw, 5rem); line-height: 1; letter-spacing: -0.015em; }

@media (max-width: 1023px) {
  /* stacked: title, then the portrait at a modest width, then the introduction */
  .rs-hero__title, .rs-hero__lead { grid-column: 1 / -1; }
  .rs-portrait { grid-column: 1 / -1; grid-row: auto; width: min(100%, 22rem); }
  .rs-content { grid-column: 1 / -1; }
  /* the index becomes a thin reading-progress bar along the top edge */
  .rs-index { position: fixed; top: 0; left: 0; right: 0; z-index: 5; height: 2px; pointer-events: none; }
  .rs-index ol { display: none; }
  .rs-index__track { width: 100%; height: 2px; background: transparent; }
  .rs-index__fill { inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); height: 100%; }
}
@media (max-width: 767px) {
  .rs-hero__meta, .rs-role__cols, .rs-earlier, .rs-quiet { grid-template-columns: 1fr; }
  .rs-portrait { width: min(100%, 18rem); }
  .rs-path { grid-template-columns: 1fr; gap: 0; border-top: 0; border-left: var(--border); margin-left: 3px; }
  .rs-path li { padding: 0 0 var(--space-5) var(--space-5); }
  .rs-path li::before { top: 0.3rem; left: -4px; }
  .rs-figures { grid-template-columns: 1fr; }
  .rs-figure, .rs-figure:nth-child(even) { padding: var(--space-6) 0; border-left: 0; }
  .rs-timeline { padding-left: var(--space-6); }
  .rs-role__marker { left: calc(-1 * var(--space-6)); }
  .rs-practice li { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .rs-practice__skills { grid-column: 2; }
  .rs-certs > div { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .rs-role__where { display: block; margin: var(--space-1) 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-role__marker, .rs-index a, .rs-practice li, .rs-figure__link span { transition: none; }
}

/* Reach Out modal (index.html #sheet-contact): the project bottom sheet, made small and centred
   on wide screens. Same panel, border, radius, close button, backdrop and open/close handling
   (script.js initSheets); it only differs in size, position and its rise-and-fade animation.
   On phones it stays a bottom sheet with its handle. */
.cs-sheet--modal { width: min(100%, 30rem); }
.cs-sheet--modal .cs-sheet__body { padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); }   /* clear the home indicator on phones */
.cs-modal__desc { font-size: var(--fs-lead); line-height: 1.5; color: var(--c-text-muted); }
.cs-modal__actions { display: grid; gap: var(--space-3); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.cs-modal__action {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 4.5rem;
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  color: var(--c-text);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.cs-modal__action:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--c-border-hover); }
.cs-modal__action:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
/* Email me: a quiet, dark navy surface with a hairline border; hover lifts it a shade and the
   arrow nudges right (the shared .cs-modal__action rule). LinkedIn stays the outlined row. */
.cs-modal__action--primary {
  border: 0.5px solid rgba(143, 180, 255, 0.2);
  background: linear-gradient(180deg, #172238, #131c2f);
  color: var(--c-text);
}
.cs-modal__action--primary:hover {
  border-color: rgba(143, 180, 255, 0.3);
  background: linear-gradient(180deg, #1c2943, #172238);
}
.cs-modal__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-sm);
  background: rgba(143, 180, 255, 0.1);
  color: #8fb4ff;
}
.cs-modal__action--primary .cs-modal__icon { background: rgba(143, 180, 255, 0.1); color: #8fb4ff; }
.cs-modal__icon svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cs-modal__text { display: grid; flex: 1; gap: 0.2rem; min-width: 0; }
.cs-modal__label { font-weight: 500; line-height: 1.3; }
.cs-modal__sub { overflow: hidden; font-size: var(--fs-small); line-height: 1.4; color: var(--c-text-muted); text-overflow: ellipsis; white-space: nowrap; }
.cs-modal__action--primary .cs-modal__sub { color: var(--c-text-muted); }
.cs-modal__arrow { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-base) var(--ease-out); }
.cs-modal__action:hover .cs-modal__arrow { transform: translateX(3px); }
.cs-modal__action[target="_blank"]:hover .cs-modal__arrow { transform: translate(2px, -2px); }
@media (min-width: 768px) {
  .cs-sheet--modal { inset: 0; margin: auto; width: min(calc(100% - 2 * var(--gutter)), 30rem); height: fit-content; max-height: min(36rem, 88dvh); }
  .cs-sheet--modal .cs-sheet__panel { border-bottom: 1px solid var(--c-border-strong); border-radius: var(--radius-lg); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); }
  .cs-sheet--modal .cs-sheet__handle { display: none; }
  .cs-sheet--modal .cs-sheet__head { padding: var(--space-5) var(--space-6) var(--space-4); }
  .cs-sheet--modal .cs-sheet__body { padding: var(--space-5) var(--space-6) var(--space-6); }
  .cs-sheet--modal[open] .cs-sheet__panel { animation-name: cs-modal-in; }
  .cs-sheet--modal.is-closing .cs-sheet__panel { animation-name: cs-modal-out; }
}
@keyframes cs-modal-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
@keyframes cs-modal-out { to { opacity: 0; transform: translateY(10px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) {
  .cs-modal__action, .cs-modal__arrow { transition: none; }
}

/* Homepage CTAs (hero and contact; .cta-lum on their button rows): luminous outlines in the Email me button's language. A dark navy surface
   with a hairline gradient stroke that catches light at the top-left and bottom-right; the
   stroke is a masked ::before so hover can brighten it smoothly (gradients don't transition).
   See Works keeps the stronger surface and stroke, Reach Out the quieter one. No glow, blur or
   sheen; size, label roll and placement are the existing .btn ones. */
.cta-lum .btn--primary,
.cta-lum .btn--ghost {
  border-color: transparent;
  color: var(--c-text);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.cta-lum .btn--primary { background: linear-gradient(180deg, #172238, #131c2f); }
.cta-lum .btn--ghost { background: rgba(14, 19, 31, 0.55); }
.cta-lum .btn--primary::before,
.cta-lum .btn--ghost::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(115deg,
    rgba(214, 228, 255, 0.62) 0%,
    rgba(143, 180, 255, 0.22) 32%,
    rgba(143, 180, 255, 0.1) 55%,
    rgba(143, 180, 255, 0.24) 78%,
    rgba(214, 228, 255, 0.5) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0.75;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.cta-lum .btn--ghost::before { opacity: 0.42; }
.cta-lum .btn--primary:hover { background: linear-gradient(180deg, #1c2943, #172238); box-shadow: none; }
.cta-lum .btn--ghost:hover { background: rgba(20, 28, 45, 0.65); border-color: transparent; }
.cta-lum .btn--primary:hover::before { opacity: 1; }
.cta-lum .btn--ghost:hover::before { opacity: 0.7; }
.cta-lum .btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .cta-lum .btn--primary::before, .cta-lum .btn--ghost::before { transition: none; }
}