/* =========================================================
   Gautam Prabhu — Portfolio
   Stylesheet: design tokens + global styles
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Colors */
  --bone: #F4EFE4;
  --bone-soft: #EDE7DA;
  --charcoal: #1F1D1A;
  --teal: #2B7A78;
  --teal-deep: #1F5C5A;
  --muted: #6B6660;
  --rule: rgba(31, 29, 26, 0.12);
  --rule-soft: rgba(31, 29, 26, 0.06);

  /* Typography */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  /* Layout */
  --container: 1280px;
  --container-narrow: 980px;
  --pad-x: clamp(20px, 4vw, 48px);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Anchor targets for scroll links ---------- */
/* These are dedicated scroll targets that don't animate, so smooth-scroll
   calculations remain stable even when sibling content has reveal animations.
   They're divs (non-focusable), so anchor clicks don't focus a case card and
   trigger the focus outline. */
.anchor {
  display: block;
  height: 0;
  overflow: hidden;
  scroll-margin-top: 96px;
}
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  background: var(--charcoal);
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1;
}

img, svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button { font: inherit; cursor: pointer; border: none; background: none; }

::selection { background: var(--charcoal); color: var(--bone); }

/* ---------- Typography defaults ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
}

p { margin: 0; }

em { font-style: italic; }

.accent {
  color: var(--teal);
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 400;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* =========================================================
   NAVIGATION
   ========================================================= */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bone);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), backdrop-filter 0.3s var(--ease);
}

.site-nav.is-scrolled {
  border-bottom-color: var(--rule);
  backdrop-filter: saturate(140%) blur(12px);
  background: rgba(244, 239, 228, 0.85);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 22px;
  padding-bottom: 22px;
}

.logo {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--charcoal);
  line-height: 1;
  font-variation-settings: "opsz" 24;
  font-feature-settings: "kern" 1, "liga" 1;
}
.logo em {
  font-style: italic;
  color: var(--teal);
  font-variation-settings: "opsz" 72;
  font-feature-settings: "kern" 1, "liga" 1, "swsh" 1, "ss01" 1, "ss02" 1, "ss03" 1, "ss04" 1;
  padding-left: 2px;
  padding-right: 4px;
}
.nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
}
.nav-links a {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--charcoal);
  position: relative;
  padding: 4px 0;
  transition: color 0.25s var(--ease);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--teal);
  transition: width 0.3s var(--ease);
}
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }
.nav-links a.active { color: var(--charcoal); }

/* =========================================================
   BUTTONS / CTAs
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background-color 0.25s var(--ease),
              color 0.25s var(--ease),
              transform 0.25s var(--ease),
              border-color 0.25s var(--ease);
  cursor: pointer;
  white-space: nowrap;
}

.btn .arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease);
}
.btn:hover .arrow { transform: translateX(4px); }

.btn-primary {
  background: var(--charcoal);
  color: var(--bone);
}
.btn-primary:hover {
  background: var(--teal);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--charcoal);
  border: 1px solid var(--charcoal);
}
.btn-secondary:hover {
  background: var(--teal);
  color: var(--bone);
  border-color: var(--teal);
  transform: translateY(-1px);
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  padding-top: clamp(56px, 9vh, 110px);
  padding-bottom: clamp(60px, 8vw, 120px);
  position: relative;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

.hero-main {
  min-width: 0; /* allow headline to wrap inside grid */
}

/* ----- Hero index (top-right case study list) ----- */
.hero-index {
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: rise 1s var(--ease-out) 0.18s both;
}

.hero-index ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-index a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 18px;
  align-items: baseline;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--charcoal);
  padding: 4px 0;
  border-top: 1px solid var(--rule);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.hero-index .num {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transform: translateY(-1px);
  transition: color 0.25s var(--ease);
}

.hero-index .label {
  font-weight: 400;
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}

.hero-index .hero-index-arrow {
  font-size: 14px;
  color: var(--teal);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  line-height: 1;
}

.hero-index a:hover {
  border-top-color: var(--teal);
}
.hero-index a:hover .num {
  color: var(--charcoal);
}
.hero-index a:hover .hero-index-arrow {
  opacity: 1;
  transform: translateY(0);
}

.hero-headline {
  font-size: clamp(44px, 6.5vw, 96px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.98;
  max-width: 16ch;
  margin-bottom: clamp(24px, 2.5vw, 36px);
  font-variation-settings: "opsz" 144;
}

.hero-headline em.accent {
  letter-spacing: -0.04em;
  font-weight: 500;
  font-variation-settings: "opsz" 144;
}

.hero-subtext {
  font-family: var(--font-body);
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.45;
  max-width: 52ch;
  color: var(--charcoal);
  margin-bottom: clamp(28px, 3.5vw, 48px);
  font-weight: 400;
}
.hero-subtext em.accent {
  font-size: 1.05em;
  letter-spacing: -0.005em;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-meta {
  margin-top: clamp(56px, 9vh, 110px);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.hero-meta span {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.hero-meta em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--teal);
  font-weight: 400;
  letter-spacing: 0;
}

/* =========================================================
   SECTION HEADERS (used across sections)
   ========================================================= */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: clamp(48px, 6vw, 80px);
}

.section-title {
  font-size: clamp(32px, 4.2vw, 56px);
  max-width: 22ch;
  letter-spacing: -0.025em;
}

/* =========================================================
   SELECTED WORK / CASE CARDS
   ========================================================= */
.work {
  padding-top: clamp(80px, 12vw, 160px);
  padding-bottom: clamp(60px, 8vw, 120px);
  border-top: 1px solid var(--rule);
}

.case-cards {
  display: flex;
  flex-direction: column;
  gap: clamp(80px, 10vw, 140px);
}

.case-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  position: relative;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  transition: border-color 0.3s var(--ease);
}

.case-card:hover { border-top-color: var(--teal); }

.case-card:nth-of-type(even) {
  grid-template-columns: 1fr 1.15fr;
}
.case-card:nth-of-type(even) .case-card-media { order: 2; }
.case-card:nth-of-type(even) .case-card-body { order: 1; }

.case-card-media {
  aspect-ratio: 4 / 3;
  background: var(--bone-soft);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.case-card-media img,
.case-card-media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.case-card:hover .case-card-media img,
.case-card:hover .case-card-media svg { transform: scale(1.02); }

.case-card-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.case-number {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.case-title {
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  max-width: 18ch;
}
.case-title em {
  font-style: italic;
  color: var(--charcoal);
}

.case-impact {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 42ch;
  margin-top: 4px;
}

.case-link {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--charcoal);
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  width: fit-content;
  transition: color 0.25s var(--ease);
}
.case-link::after {
  content: '→';
  display: inline-block;
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
  color: var(--charcoal);
}
.case-card:hover .case-link::after {
  transform: translateX(6px);
  color: var(--teal);
}

/* =========================================================
   ABOUT
   ========================================================= */
.about {
  padding-top: clamp(80px, 12vw, 160px);
  padding-bottom: clamp(80px, 12vw, 160px);
  border-top: 1px solid var(--rule);
}

.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.about-photo {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bone-soft);
}
.about-photo img {
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(0.9);
}

.about-content {
  display: flex;
  flex-direction: column;
  padding-top: 2px;
}
.about-content > .eyebrow {
  margin-bottom: 14px;
}

.about-title {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: clamp(28px, 3vw, 40px);
  font-variation-settings: "opsz" 36;
}
.about-title em.accent {
  letter-spacing: -0.03em;
  font-weight: 500;
  font-variation-settings: "opsz" 60;
}

.about-paragraphs {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.about-paragraphs p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--charcoal);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--charcoal);
  color: var(--bone);
  padding-top: clamp(80px, 10vw, 120px);
  padding-bottom: 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
  margin-bottom: clamp(60px, 8vw, 100px);
}

.footer-headline {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--bone);
  max-width: 14ch;
}
.footer-headline em {
  font-style: italic;
  color: #7DB8B6; /* lighter teal for dark background */
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 239, 228, 0.5);
  margin-bottom: 18px;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--bone);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
  padding-bottom: 1px;
}
.footer-col a:hover {
  border-bottom-color: #7DB8B6;
}

.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(244, 239, 228, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(244, 239, 228, 0.55);
}
.footer-bottom em {
  font-family: var(--font-display);
  font-style: italic;
  color: rgba(244, 239, 228, 0.75);
}

/* =========================================================
   ENTRANCE ANIMATIONS
   ========================================================= */
@keyframes rise {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero animates on load */
.hero-headline {
  animation: rise 1s var(--ease-out) both;
}
.hero-subtext {
  animation: rise 1s var(--ease-out) 0.15s both;
}
.hero-ctas {
  animation: rise 1s var(--ease-out) 0.3s both;
}
.hero-meta {
  animation: rise 1s var(--ease-out) 0.45s both;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   RESPONSIVE — Tablet
   ========================================================= */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero-index {
    padding-top: 0;
    order: -1; /* show index above the headline on narrower screens */
    max-width: 360px;
  }
  .hero-index .label {
    white-space: normal;
  }

  .case-card,
  .case-card:nth-of-type(even) {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .case-card:nth-of-type(even) .case-card-media { order: unset; }
  .case-card:nth-of-type(even) .case-card-body { order: unset; }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .about-photo {
    max-width: 420px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-headline {
    grid-column: 1 / -1;
    margin-bottom: 16px;
  }
}

/* =========================================================
   RESPONSIVE — Mobile
   ========================================================= */
@media (max-width: 640px) {
  .nav-links { gap: 22px; }
  .nav-links a { font-size: 14px; }

  .hero { padding-top: 48px; }
  .hero-headline { letter-spacing: -0.03em; }

  .hero-meta {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    margin-top: 64px;
  }

  .hero-ctas .btn { font-size: 14px; padding: 12px 22px; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
}

/* =========================================================
   CASE STUDY PAGES
   Shared styles used across all case study templates.
   Builds on the homepage's design tokens and patterns —
   no new colors, no new fonts.
   ========================================================= */

.cs-page {
  /* Each major section gets its own breathing room; tight bottom on header */
}

/* ---------- Back link ---------- */
.cs-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  margin-top: clamp(24px, 4vw, 48px);
  margin-bottom: clamp(40px, 6vw, 72px);
  transition: color 0.25s var(--ease);
}
.cs-back-arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease);
}
.cs-back:hover { color: var(--charcoal); }
.cs-back:hover .cs-back-arrow {
  transform: translateX(-4px);
  color: var(--teal);
}

/* ---------- Page header ---------- */
.cs-header {
  padding-top: 8px;
  padding-bottom: clamp(48px, 7vw, 96px);
}

/* Two-column header: title block left, metadata sidebar right.
   Title column wider to give the H1 generous room and shift the
   metadata to the far right. Aligns to the bottom so both columns
   share the same baseline. */
.cs-header-grid {
  display: grid;
  grid-template-columns: 2fr 0.7fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: end;
}

.cs-header-main {
  /* Holds eyebrow + title + lead */
}

.cs-eyebrow {
  margin-bottom: 24px;
  display: block;
}

.cs-title {
  font-size: clamp(40px, 5.6vw, 80px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.0;
  max-width: 18ch;
  margin-bottom: clamp(24px, 2.5vw, 36px);
  font-variation-settings: "opsz" 144;
  animation: rise 1s var(--ease-out) both;
}
.cs-title em.accent {
  letter-spacing: -0.04em;
  font-weight: 500;
  font-variation-settings: "opsz" 144;
}

.cs-lead {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
  max-width: 56ch;
  color: var(--charcoal);
  font-weight: 400;
  animation: rise 1s var(--ease-out) 0.15s both;
}

/* ---------- Metadata sidebar ---------- */
.cs-meta {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0;
  padding: 0;
  animation: rise 1s var(--ease-out) 0.3s both;
}
.cs-meta-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.cs-meta-item dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--charcoal);
}

/* ---------- Hero image ---------- */
.cs-hero-image {
  padding-bottom: clamp(80px, 10vw, 140px);
}

/* ---------- Generic section ---------- */
.cs-section {
  padding-top: clamp(80px, 10vw, 140px);
  padding-bottom: clamp(40px, 5vw, 60px);
  border-top: 1px solid var(--rule);
}
.cs-section + .cs-section { border-top: 1px solid var(--rule); }

/* Two-column section layout: title left (sticky-feeling), body right */
.cs-section-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.cs-section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 96px; /* clears sticky nav */
}

.cs-section-title {
  font-size: clamp(32px, 3.8vw, 52px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  max-width: 14ch;
  font-variation-settings: "opsz" 72;
}

.cs-subsection-title {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
  max-width: 18ch;
  font-variation-settings: "opsz" 48;
}

.cs-section-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--charcoal);
}
.cs-section-body p { color: var(--charcoal); }
.cs-section-body p em { font-style: italic; color: var(--charcoal); }

.cs-body-lead {
  font-size: 19px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--charcoal);
}

/* ---------- Issue / problem list ---------- */
.cs-issue-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cs-issue-list li {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}
.cs-issue-list li:last-child { border-bottom: 1px solid var(--rule); }
.cs-issue-num {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cs-issue-text {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--charcoal);
}

.cs-result-block {
  margin-top: 16px;
  padding: 24px 28px;
  background: var(--bone-soft);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cs-result-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cs-result-list li {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--charcoal);
  padding-left: 18px;
  position: relative;
}
.cs-result-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 1px;
  background: var(--teal);
}

/* ---------- Figures (images + captions) ---------- */
.cs-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cs-figure-media {
  /* No border, no fill, no shadow — the asset itself fills the box.
     The image sits flush on the page background; clip-path on the
     <img> below crops the thin dark line baked into the source
     screenshots so the edges read clean. */
  border-radius: 6px;
  overflow: hidden;
}
.cs-figure-media img {
  width: 100%;
  height: auto;
  display: block;
  /* Shave 1–2px off the image to crop the thin dark line baked into
     the source screenshots. */
  clip-path: inset(1px 1px 2px 1px);
}

.cs-figure-hero .cs-figure-media {
  /* Slightly more presence for the cover shot */
  border-radius: 8px;
}

/* "Before" / supporting figure — narrower than the hero, centered.
   Reads as evidence rather than a primary visual moment. */
.cs-figure-wide {
  margin-top: clamp(48px, 6vw, 80px);
  max-width: 86%;
  margin-left: auto;
  margin-right: auto;
}

.cs-caption {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.cs-caption-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-right: 8px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Steps (Shifting the approach) ---------- */
.cs-steps {
  list-style: none;
  margin: clamp(48px, 6vw, 80px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}
.cs-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 32px 32px 36px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.cs-step:nth-child(odd) {
  border-right: 1px solid var(--rule);
  padding-right: 40px;
}
.cs-step:nth-child(even) {
  padding-left: 40px;
}

.cs-step-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  color: var(--teal);
  font-variation-settings: "opsz" 72;
}
.cs-step-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cs-step-body p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--charcoal);
  margin: 0;
}

/* ---------- Two Mindsets diagram ---------- */
.cs-mindsets {
  margin-top: clamp(56px, 7vw, 96px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.cs-mindsets-eyebrow {
  display: block;
}

.cs-mindsets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.cs-mindset {
  padding: clamp(28px, 3.5vw, 44px) clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 28px;
  background: var(--bone);
}
.cs-mindset:first-child {
  border-right: 1px solid var(--rule);
}

.cs-mindset-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cs-mindset-name {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--charcoal);
  font-variation-settings: "opsz" 60;
  margin: 0;
}
.cs-mindset-quote {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.4;
  color: var(--teal);
  font-weight: 400;
  font-variation-settings: "opsz" 36;
  max-width: 28ch;
  margin: 4px 0 0;
}
.cs-mindset-quote em {
  font-style: italic;
}

.cs-mindset-viz {
  background: var(--bone-soft);
  border-radius: 6px;
  padding: 20px 22px;
  border: 1px solid var(--rule-soft);
}
.cs-mindset-viz svg {
  width: 100%;
  height: auto;
  display: block;
}

.cs-mindset-meta {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
}
.cs-mindset-meta > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cs-mindset-meta dt {
  /* eyebrow handles it */
}
.cs-mindset-meta dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--charcoal);
  max-width: 36ch;
}

/* ---------- Pull quote ---------- */
/* Left-aligned editorial pull. The blockquote's own max-width controls
   line length; the outer figure flows at the container's natural width
   so the teal hairline rule lands cleanly against the body grid. */
.cs-pullquote {
  margin: clamp(64px, 8vw, 112px) 0 clamp(48px, 6vw, 80px);
  padding: 0 0 0 clamp(24px, 3vw, 40px);
  border-left: 1px solid var(--teal);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cs-pullquote blockquote {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--charcoal);
  margin: 0;
  font-variation-settings: "opsz" 72;
  max-width: 36ch;
}
.cs-pullquote blockquote em {
  font-style: italic;
}
.cs-pullquote blockquote em.accent {
  color: var(--teal);
  font-style: italic;
}

.cs-pullquote-closing {
  margin-top: clamp(48px, 6vw, 80px);
  margin-bottom: 0;
}

/* ---------- Design opportunity ---------- */
.cs-opportunity {
  margin-top: clamp(48px, 6vw, 80px);
}
.cs-opportunity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cs-opportunity-list li {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--charcoal);
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.cs-opportunity-list li:last-child { border-bottom: 1px solid var(--rule); }
.cs-opportunity-list li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
  transform: translateY(-2px);
}

/* ---------- Solution blocks ---------- */
.cs-solution {
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--rule);
}
.cs-solution:first-of-type { /* unused but reserved */ }

.cs-solution-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: baseline;
  margin-bottom: 20px;
}
.cs-solution-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  color: var(--teal);
  line-height: 1;
  font-variation-settings: "opsz" 72;
}
.cs-solution-titles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cs-solution-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--charcoal);
  font-variation-settings: "opsz" 72;
  margin: 0;
}
.cs-solution-tag {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.cs-solution-body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--charcoal);
  max-width: 64ch;
  margin: 0 0 clamp(32px, 4vw, 56px);
}

/* Solution image group: stacked full-width.
   Each screen gets the room it needs; the 01 / 02 caption numbering
   carries the "these are a pair" relationship without forcing both
   into the same outer dimensions. */
.cs-figure-pair {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
}

/* ---------- Process / supporting figure modifier ----------
   For research and process artifacts (whiteboards, surveys, low-fi
   wireframes) that should read as evidence rather than primary
   visuals. Constrains either a solo .cs-figure or a .cs-figure-pair
   container to roughly half-width and centers it. */
.cs-figure.cs-figure-process,
.cs-figure-pair.cs-figure-process {
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- White-background figure modifier ----------
   For assets whose internal background is white rather than bone —
   e.g. flow diagrams or iteration boards. The thin rule + soft
   shadow give the white card visual containment against the bone
   page so it reads as an intentional artifact rather than a stray. */
.cs-figure.cs-figure-on-white .cs-figure-media {
  border: 1px solid rgba(43, 36, 26, 0.08);
  box-shadow: 0 1px 2px rgba(43, 36, 26, 0.04),
              0 8px 24px rgba(43, 36, 26, 0.06);
  border-radius: 6px;
}

/* ---------- Spacing: figures following section text or step lists ----------
   When a .cs-figure or .cs-figure-pair sits directly after the
   section-grid intro text, or after a .cs-steps / .cs-process block,
   give it room to breathe so it doesn't butt up against prior content. */
.cs-section-grid + .cs-figure,
.cs-section-grid + .cs-figure-pair,
.cs-steps + .cs-figure,
.cs-steps + .cs-figure-pair,
.cs-process + .cs-figure,
.cs-process + .cs-figure-pair,
.cs-figure + .cs-figure,
.cs-figure-pair + .cs-figure,
.cs-figure + .cs-figure-pair,
.cs-figure-pair + .cs-figure-pair {
  margin-top: clamp(48px, 6vw, 80px);
}

/* ---------- Hero figure size cap ----------
   Slight max-width cap so the hero doesn't dominate the page —
   especially for screenshots that already include a browser frame. */
.cs-figure-hero {
  max-width: 88%;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Per-figure width modifiers ----------
   Named percentage caps for individual figures or pairs that don't
   match the broader cs-figure-process / cs-figure-hero defaults.
   Used to dial in specific assets to specific sizes within a layout. */
.cs-figure.cs-figure-w88 {
  max-width: 88%;
  margin-left: auto;
  margin-right: auto;
}
.cs-figure.cs-figure-w68 {
  max-width: 68%;
  margin-left: auto;
  margin-right: auto;
}
.cs-figure.cs-figure-w59 {
  max-width: 59%;
  margin-left: auto;
  margin-right: auto;
}
.cs-figure.cs-figure-w47 {
  max-width: 47%;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Outcomes ---------- */
.cs-outcomes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cs-outcomes li {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--charcoal);
  padding: 22px 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  align-items: baseline;
}
.cs-outcomes li:last-child { border-bottom: 1px solid var(--rule); }
.cs-outcome-mark {
  display: inline-block;
  width: 12px;
  height: 1px;
  background: var(--teal);
  transform: translateY(-4px);
}

/* ---------- Reflection ---------- */
.cs-inline-eyebrow {
  margin-bottom: 4px;
}
.cs-improve-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cs-improve-list li {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--charcoal);
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}
.cs-improve-list li:last-child { border-bottom: 1px solid var(--rule); }

/* ---------- Up next ---------- */
.cs-up-next {
  padding-top: clamp(80px, 10vw, 140px);
  padding-bottom: clamp(80px, 10vw, 140px);
  border-top: 1px solid var(--rule);
  margin-top: clamp(64px, 8vw, 112px);
}

.cs-up-next-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding: 32px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.3s var(--ease);
}
.cs-up-next-card:hover {
  border-top-color: var(--teal);
  border-bottom-color: var(--teal);
}

.cs-up-next-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cs-up-next-num {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}
.cs-up-next-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--charcoal);
  font-variation-settings: "opsz" 72;
  margin: 0;
}
.cs-up-next-title em {
  font-style: italic;
  color: var(--charcoal);
}
.cs-up-next-arrow {
  font-size: 28px;
  color: var(--charcoal);
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
  line-height: 1;
}
.cs-up-next-card:hover .cs-up-next-arrow {
  transform: translateX(8px);
  color: var(--teal);
}

/* ---------- Phone screenshots ----------
   Used for hero rows and workflow sequences. The source PNGs are
   already device-framed, so the wrapper just constrains width and
   handles responsive layout. */
.cs-phones {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.cs-phones-2up {
  grid-template-columns: repeat(2, 1fr);
  /* Sized so each phone matches the per-phone width of the 3-up hero
     strip. Hero is 3 phones across an 88%-capped container; 2-up at
     ~57% width with the same gap lands roughly the same physical
     size per phone. */
  max-width: 57%;
  margin-left: auto;
  margin-right: auto;
}
.cs-phones-3up {
  grid-template-columns: repeat(3, 1fr);
  /* Capped to match the hero image's 88% width, keeping the strip
     uniformly inset from the container edge alongside other figures. */
  max-width: 88%;
  margin-left: auto;
  margin-right: auto;
}
/* Hero variant: a touch more breathing room on top/bottom and a
   slightly larger gap to read as a deliberate hero strip */
.cs-phones-hero {
  margin-bottom: clamp(20px, 3vw, 36px);
  gap: clamp(24px, 3.5vw, 48px);
}

.cs-phone {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cs-phone-media {
  /* Phones already have their own background via the device frame —
     no border, no fill, no clip-path needed (unlike .cs-figure-media
     which crops a thin baked-in line from desktop screenshots). */
}
.cs-phone-media img {
  width: 100%;
  height: auto;
  display: block;
}

/* Single phone, centered (e.g. the "Before" legacy screenshot).
   The caption is allowed to be wider than the phone itself so the
   text wraps naturally across two lines instead of being squeezed. */
.cs-figure-phone-solo {
  margin: clamp(48px, 6vw, 80px) auto 0;
  /* Sits at 50% — renders a few px wider than the hero phones, which
     reads fine when it's alone with its "Before" label rather than
     side-by-side with peers. */
  max-width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.cs-figure-phone-solo .cs-phone {
  max-width: 56%;
  width: 100%;
}
.cs-figure-phone-solo .cs-caption {
  text-align: center;
  max-width: 100%;
}

/* Centered caption beneath hero phone strip */
.cs-caption-centered {
  text-align: center;
  max-width: 80ch;
  margin: clamp(20px, 2.5vw, 32px) auto 0;
}

/* ---------- Process (vertical 3-step) ----------
   Alternative to .cs-steps (2x2 grid). Used when a process has 3
   numbered phases that benefit from longer prose per step. */
.cs-process {
  list-style: none;
  margin: clamp(48px, 6vw, 80px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule);
}
.cs-process-step {
  display: grid;
  grid-template-columns: clamp(72px, 8vw, 112px) 1fr;
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(36px, 4.5vw, 56px) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.cs-process-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 6vw, 80px);
  line-height: 0.9;
  color: var(--teal);
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.02em;
}
.cs-process-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 64ch;
}
.cs-process-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--charcoal);
  font-variation-settings: "opsz" 48;
  margin: 0;
}
.cs-process-body p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--charcoal);
  margin: 0;
}

/* ---------- System plate (design system specimen wrapper) ----------
   Frames a horizontal design-system specimen as a curated plate
   rather than a floating image. Soft bone background, hairline
   border, internal eyebrow tag in the top-left. */
.cs-system-plate-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cs-system-plate {
  background: var(--bone-soft);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  padding: clamp(28px, 3.5vw, 48px);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
}
.cs-system-plate-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.cs-system-plate-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--charcoal);
  letter-spacing: 0.01em;
  /* Subtle separator between eyebrow and the contextual label */
  position: relative;
  padding-left: 14px;
}
.cs-system-plate-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 1px;
  background: var(--muted);
  transform: translateY(-50%);
}
.cs-system-plate-body img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* ---------- Workflow sequence (used inside cs-solution) ---------- */
.cs-workflow {
  margin-top: clamp(48px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 32px);
}
.cs-workflow-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
/* Trailing em-dash on the eyebrow — sits at the eyebrow's own
   text size and baseline, which keeps it visually aligned with
   the small-caps label rather than the much larger title. */
.cs-workflow-head .eyebrow::after {
  content: ' —';
  margin-left: 6px;
  color: var(--muted);
}
.cs-workflow-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--charcoal);
  font-variation-settings: "opsz" 48;
  margin: 0;
}

/* Spaced inline eyebrow — used when stacking two eyebrowed lists
   in the same body column (Reflection: What worked / What I'd improve) */
.cs-inline-eyebrow-spaced {
  margin-top: clamp(20px, 2.5vw, 32px);
}

/* =========================================================
   CASE STUDY — RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  .cs-section-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cs-section-head {
    position: static;
  }
  /* Header collapses; meta becomes horizontal strip below title block */
  .cs-header-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .cs-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 32px;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
  }
  .cs-mindsets-grid {
    grid-template-columns: 1fr;
  }
  .cs-mindset:first-child {
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
  .cs-steps {
    grid-template-columns: 1fr;
  }
  .cs-step:nth-child(odd) {
    border-right: none;
    padding-right: 0;
  }
  .cs-step:nth-child(even) {
    padding-left: 0;
  }
  .cs-step {
    padding: 28px 0;
  }
  .cs-figure-pair {
    gap: 28px;
  }
  .cs-figure-wide,
  .cs-figure-hero,
  .cs-figure.cs-figure-process,
  .cs-figure-pair.cs-figure-process,
  .cs-figure.cs-figure-w68,
  .cs-figure.cs-figure-w59,
  .cs-figure.cs-figure-w47 {
    max-width: 100%;
  }
  .cs-up-next-card {
    grid-template-columns: 1fr auto;
    gap: 16px 24px;
  }
  .cs-up-next-meta {
    grid-column: 1 / -1;
  }

  /* Mobile case study patterns */
  .cs-phones-3up {
    grid-template-columns: 1fr 1fr;
    /* Third phone wraps onto its own row, centered */
  }
  .cs-phones-3up .cs-phone:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 50%;
    justify-self: center;
  }
  .cs-phones-2up {
    max-width: 100%;
  }
  .cs-figure-phone-solo {
    max-width: 50%;
  }
  .cs-process-step {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .cs-process-num {
    font-size: 56px;
  }
}

@media (max-width: 640px) {
  .cs-meta {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .cs-result-block {
    padding: 20px;
  }
  .cs-mindset {
    padding: 28px 20px;
  }
  .cs-pullquote blockquote {
    font-size: 24px;
  }
  .cs-up-next-arrow {
    font-size: 22px;
  }

  /* Mobile case study patterns */
  .cs-phones-3up,
  .cs-phones-2up {
    grid-template-columns: 1fr;
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
  .cs-phones-3up .cs-phone:nth-child(3) {
    grid-column: auto;
    max-width: 100%;
  }
  .cs-figure-phone-solo {
    max-width: 70%;
  }
  .cs-system-plate {
    padding: 20px;
  }
}