/* Scoped CSS extracted from content/prototypes/blog-gsap.html */
.sds-article *, .sds-article *::before, .sds-article *::after { margin: 0; padding: 0; box-sizing: border-box; }.sds-article {
  --black: #000000;
  --white: #FFFFFF;
  --dark: #1A1A1A;
  --gray-900: #111111;
  --gray-800: #222222;
  --gray-700: #333333;
  --gray-600: #555555;
  --gray-400: #999999;
  --gray-300: #BBBBBB;
  --gray-200: #E0E0E0;
  --gray-100: #F5F5F5;
  --btn-bg: #32373C;
  --accent-blue: #0693E3;
  --accent-purple: #9B51E0;
  --heading: Helvetica, 'Helvetica Neue', Arial, sans-serif;
  --sans: -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --accent-font: 'Roboto Slab', Georgia, serif;
  --mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --max-width: 1200px;
  --content-width: 800px;
  --narrow-width: 640px;
}.sds-article { font-size: 16px; }.sds-article html.lenis, .sds-article html.lenis body { height: auto; }.sds-article .lenis.lenis-smooth { scroll-behavior: auto !important; }.sds-article {
  position: relative;
  font-family: var(--sans);
  background: var(--gray-900);
  color: var(--white);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}.sds-article /* ===== MESH GRADIENT — WebGL canvas ===== */
.mesh-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}.sds-article /* ===== GLASS SPHERES ===== */
.glass-cluster {
  position: absolute;
  pointer-events: none;
  z-index: 8; /* above section bg (1) + content (2-3), BELOW the site header (~12-20) so spheres never cover the nav on scroll */
}.sds-article .glass-cluster canvas {
  width: 100%; height: 100%;
  display: block;
}.sds-article .glass-cluster.cluster-1 {
  width: 480px; height: 480px;
  right: 2vw;
  /* top set by JS based on anchor section */
}.sds-article .glass-cluster.cluster-2 {
  width: 400px; height: 400px;
  left: 1vw;
  /* top set by JS based on anchor section */
}.sds-article /* ===== NAV ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 72px; padding: 0 48px;
  display: flex; justify-content: space-between; align-items: center;
  mix-blend-mode: difference;
}.sds-article .nav-logo {
  font-family: var(--heading);
  font-size: 18px; font-weight: 700;
  color: #fff; text-decoration: none; letter-spacing: -0.5px;
}.sds-article .nav-links { display: flex; gap: 32px; align-items: center; }.sds-article .nav-links a {
  font-family: var(--sans);
  font-size: 14px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase;
  color: #fff; text-decoration: none; opacity: 0.7;
  transition: opacity 0.3s;
}.sds-article .nav-links a:hover { opacity: 1; }.sds-article .nav-cta {
  font-family: var(--sans);
  font-size: 14px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase;
  color: #fff; text-decoration: none;
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 0; transition: all 0.3s ease;
}.sds-article .nav-cta:hover { background: #fff; color: var(--black); }.sds-article /* ===== HERO ===== */
.hero {
  height: 100vh; position: relative; overflow: hidden;
  background: var(--black);
}.sds-article .hero-image-wrap { position: absolute; inset: 0; overflow: hidden; }.sds-article .hero-image {
  width: 100%; height: 120%;
  object-fit: cover; object-position: center 30%;
  will-change: transform;
}.sds-article .hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.6) 70%, rgba(17,17,17,1) 100%),
    linear-gradient(to right, rgba(0,0,0,0.5) 0%, transparent 60%);
}.sds-article .hero-content {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 0 48px 10vh; z-index: 3;
}.sds-article .hero-number {
  position: absolute; top: 50%; right: 48px; transform: translateY(-50%);
  font-family: var(--heading);
  font-size: clamp(120px, 20vw, 280px);
  font-weight: 700; color: rgba(255,255,255,0.04);
  line-height: 1; pointer-events: none; z-index: 1;
}.sds-article .hero-pillar {
  font-family: var(--sans);
  font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gray-400); margin-bottom: 32px;
  position: relative; padding-left: 48px; opacity: 0;
}.sds-article .hero-pillar::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 32px; height: 1px; background: var(--gray-400);
}.sds-article .hero-title {
  font-family: var(--heading);
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 700; line-height: 1.05; letter-spacing: -2px;
  max-width: 1000px; color: var(--white); position: relative;
}.sds-article .hero-title .word { display: block; overflow: hidden; }.sds-article .hero-title .word-inner { display: inline-block; transform: translateY(110%); }.sds-article .hero-meta {
  margin-top: 48px;
  display: flex; gap: 32px; align-items: center;
  font-family: var(--sans); font-size: 14px; color: var(--gray-400); opacity: 0;
}.sds-article .hero-meta .line { width: 48px; height: 1px; background: var(--gray-600); }.sds-article /* ===== SPLIT INTRO ===== */
.split-intro {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 70vh; border-top: 1px solid var(--gray-800);
}.sds-article .split-left {
  padding: 100px 64px;
  display: flex; flex-direction: column; justify-content: center;
  border-right: 1px solid var(--gray-800);
  position: relative; z-index: 2;
}.sds-article .split-label {
  font-family: var(--sans);
  font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gray-400); margin-bottom: 24px;
}.sds-article .split-quote {
  font-family: var(--accent-font);
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.4; font-weight: 400; color: var(--gray-200);
}.sds-article .split-right {
  padding: 100px 64px;
  display: flex; align-items: center;
  position: relative; z-index: 2;
}.sds-article .split-right p {
  font-family: var(--sans); font-size: 16px; color: var(--gray-400); line-height: 1.7;
}.sds-article /* ===== CONTENT BLOCKS ===== */
.content-block {
  max-width: var(--content-width); margin: 0 auto;
  padding: 100px 24px;
}.sds-article .content-block.wide { max-width: var(--max-width); }.sds-article .content-block h2 {
  font-family: var(--heading);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700; line-height: 1.15; letter-spacing: -1px;
  color: var(--white); margin-bottom: 40px; position: relative;
}.sds-article .content-block h2 .h2-line { display: block; clip-path: inset(0 100% 0 0); }.sds-article .content-block p {
  margin-bottom: 28px; font-family: var(--sans);
  font-size: 16px; line-height: 1.7; color: var(--gray-400);
}.sds-article .content-block strong { color: var(--white); font-weight: 600; }.sds-article /* ===== IMAGE BREAK ===== */
.image-break {
  position: relative; height: 70vh; overflow: hidden;
}.sds-article .image-break img {
  width: 100%; height: 130%; object-fit: cover; will-change: transform;
}.sds-article .image-break-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--gray-900) 0%, transparent 15%, transparent 60%, rgba(0,0,0,0.7) 100%),
    rgba(0,0,0,0.3);
}.sds-article .image-break-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  text-align: center; padding: 0 48px 80px; z-index: 3;
}.sds-article .image-break-text .stat {
  font-family: var(--heading);
  font-size: clamp(64px, 10vw, 140px);
  font-weight: 700; color: var(--white);
  line-height: 1; letter-spacing: -3px; opacity: 0;
}.sds-article .image-break-text .stat-label {
  font-family: var(--sans);
  font-size: 16px; color: var(--gray-300);
  margin-top: 16px; max-width: 400px; line-height: 1.7; opacity: 0;
}.sds-article .image-break-text .stat-source {
  font-family: var(--mono);
  font-size: 11px; color: var(--gray-400);
  letter-spacing: 2px; text-transform: uppercase;
  margin-top: 12px; opacity: 0;
}.sds-article /* ===== STAT SCROLL ===== */
.stat-track {
  width: 100%; overflow: hidden;
  padding: 100px 0; position: relative;
  background: var(--dark);
  border-top: 1px solid var(--gray-800);
  border-bottom: 1px solid var(--gray-800);
}.sds-article .stat-track-inner { display: flex; width: max-content; }.sds-article .stat-card {
  flex: 0 0 auto; width: 50vw; min-width: 400px;
  padding: 60px 64px; border-right: 1px solid var(--gray-800);
}.sds-article .stat-number {
  font-family: var(--heading);
  font-size: clamp(56px, 8vw, 100px);
  font-weight: 700; color: var(--white); line-height: 1; letter-spacing: -2px;
}.sds-article .stat-label {
  font-family: var(--sans);
  font-size: 16px; color: var(--gray-400);
  margin-top: 16px; max-width: 320px; line-height: 1.7;
}.sds-article .stat-source {
  font-family: var(--mono);
  font-size: 11px; color: var(--gray-600);
  margin-top: 12px; letter-spacing: 2px; text-transform: uppercase;
}.sds-article /* ===== IMAGE + TEXT SPLIT ===== */
.image-text-split {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 70vh; overflow: hidden;
  border-top: 1px solid var(--gray-800);
  border-bottom: 1px solid var(--gray-800);
}.sds-article .image-text-split.reversed { direction: rtl; }.sds-article .image-text-split.reversed > * { direction: ltr; }.sds-article .its-image { position: relative; overflow: hidden; }.sds-article .its-image img {
  width: 100%; height: 100%; object-fit: cover; will-change: transform;
}.sds-article .its-content {
  padding: 80px 64px;
  display: flex; flex-direction: column; justify-content: center;
}.sds-article .its-content h2 {
  font-family: var(--heading);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700; line-height: 1.15; letter-spacing: -1px;
  margin-bottom: 24px; color: var(--white);
}.sds-article .its-content p {
  font-family: var(--sans);
  font-size: 16px; color: var(--gray-400); line-height: 1.7; margin-bottom: 20px;
}.sds-article .its-content strong { color: var(--white); font-weight: 600; }.sds-article /* ===== PARALLAX PULLQUOTE ===== */
.parallax-quote {
  height: 100vh; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 48px;
}.sds-article .parallax-quote-image {
  position: absolute; inset: -20%; will-change: transform;
}.sds-article .parallax-quote-image img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.15) saturate(0.3);
}.sds-article .parallax-quote-text {
  position: relative; z-index: 3;
}.sds-article .parallax-quote-text p {
  font-family: var(--heading);
  font-size: clamp(28px, 4.5vw, 56px);
  line-height: 1.15; font-weight: 700; letter-spacing: -1px;
  max-width: 900px; color: var(--white);
}.sds-article .parallax-quote-text .attr {
  font-family: var(--mono);
  font-size: 11px; color: var(--gray-400);
  letter-spacing: 2px; text-transform: uppercase; margin-top: 40px;
}.sds-article /* ===== STACKED POINTS ===== */
.stacked-section {
  position: relative; overflow: hidden;
  padding: 160px 48px;
  max-width: var(--max-width); margin: 0 auto;
}.sds-article .stacked-section .section-header { margin-bottom: 80px; position: relative; z-index: 2; }.sds-article .stacked-section .section-label {
  font-family: var(--sans);
  font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gray-400); margin-bottom: 16px;
}.sds-article .stacked-section .section-header h2 {
  font-family: var(--heading);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700; line-height: 1.15; letter-spacing: -1px; color: var(--white);
}.sds-article .stacked-point {
  display: grid; grid-template-columns: 200px 1fr;
  gap: 48px; padding: 48px 0;
  border-top: 1px solid var(--gray-800);
  opacity: 0; transform: translateX(-40px);
  position: relative; z-index: 2;
}.sds-article .point-label {
  font-family: var(--heading);
  font-size: 20px; font-weight: 700; color: var(--white); padding-top: 4px;
}.sds-article .point-body {
  font-family: var(--sans);
  font-size: 16px; color: var(--gray-400); line-height: 1.7;
}.sds-article .point-body strong { color: var(--white); font-weight: 600; }.sds-article /* ===== ARTICLE IMAGE =====
   Designed to host either a sparse cutout (PNG with transparency) OR a
   full-comp section image (rectangular JPG) without either looking
   "floating". Image is constrained + centered; caption sits directly below
   as a proper figcaption (not an overlay) with a hairline rule above it. */
.article-image {
  margin: 48px auto; position: relative;
  max-width: 880px; padding: 0 32px;
}.sds-article .article-image picture {
  display: block; max-width: 720px; margin: 0 auto;
}.sds-article .article-image img {
  width: 100%; height: auto; display: block;
  transition: transform 0.4s ease;
  /* Subtle elevation so the subject reads as intentional, not orphaned */
  filter: drop-shadow(0 20px 60px rgba(0,0,0,0.45));
}.sds-article .article-image:hover img { transform: scale(1.02); }.sds-article /* The article-image caption IS the closing/payoff statement of the section
   it punctuates — render it big, .sds-article declarative, .sds-article serif, .sds-article white. Not a humble
   image caption, .sds-article an italicized statement that lands. */
.article-image figcaption {
  max-width: 820px; margin: 40px auto 0;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-family: var(--heading);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.35; letter-spacing: -0.01em;
  color: var(--white); font-weight: 400;
  text-align: center; font-style: italic;
}.sds-article /* ===== CTA ===== */
.cta-section {
  padding: 160px 48px; text-align: center;
  position: relative; overflow: hidden;
  background: var(--black);
}.sds-article .cta-section .section-label {
  font-family: var(--sans);
  font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gray-400); margin-bottom: 24px;
  position: relative; z-index: 3;
}.sds-article .cta-section h2 {
  font-family: var(--heading);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 700; line-height: 1.1; letter-spacing: -2px;
  margin-bottom: 24px; color: var(--white);
  position: relative; z-index: 3;
}.sds-article .cta-section p {
  font-family: var(--sans);
  font-size: 18px; color: var(--gray-400);
  max-width: var(--narrow-width); margin: 0 auto 48px; line-height: 1.7;
  position: relative; z-index: 3;
}.sds-article .cta-btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 14px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--black); background: var(--white);
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
  text-decoration: none; border-radius: 0;
  transition: all 0.3s ease;
  position: relative; z-index: 3;
}.sds-article .cta-btn:hover { background: var(--gray-200); transform: translateY(-1px); }.sds-article /* ===== FOOTER ===== */
.footer {
  background: var(--black); padding: 80px 48px 40px;
  border-top: 1px solid rgba(255,255,255,0.1);
}.sds-article .footer-inner {
  max-width: var(--max-width); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: flex-start;
}.sds-article .footer-brand {
  font-family: var(--heading); font-size: 18px; font-weight: 700; color: var(--white);
}.sds-article .footer-tagline {
  font-family: var(--sans); font-size: 14px; color: var(--gray-400); margin-top: 8px;
}.sds-article .footer-links { display: flex; gap: 24px; }.sds-article .footer-links a {
  font-family: var(--sans);
  font-size: 14px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--gray-400); text-decoration: none; transition: color 0.3s ease;
}.sds-article .footer-links a:hover { color: var(--white); }.sds-article .footer-copy {
  max-width: var(--max-width); margin: 40px auto 0; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-family: var(--sans); font-size: 13px; color: var(--gray-600);
}.sds-article /* ===== PROGRESS BAR ===== */
.progress-bar {
  position: fixed; top: 0; left: 0; z-index: 200;
  height: 2px; width: 0%; background: var(--white);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 767px) {.sds-article .hero-content { padding: 0 24px 8vh; }.sds-article .nav { padding: 0 24px; }.sds-article .nav-links { display: none; }.sds-article .split-intro { grid-template-columns: 1fr; }.sds-article .split-left { border-right: none; border-bottom: 1px solid var(--gray-800); padding: 80px 24px; }.sds-article .split-right { padding: 80px 24px; }.sds-article .stacked-point { grid-template-columns: 1fr; gap: 16px; }.sds-article .stat-card { width: 85vw; min-width: 280px; padding: 40px 24px; }.sds-article .cta-section { padding: 100px 24px; }.sds-article .image-text-split { grid-template-columns: 1fr; }.sds-article .image-text-split.reversed { direction: ltr; }.sds-article .its-image { height: 50vh; }.sds-article .its-content { padding: 60px 24px; }.sds-article .image-break { height: 50vh; }.sds-article .footer-inner { flex-direction: column; gap: 32px; }.sds-article .stacked-section { padding: 100px 24px; }.sds-article .content-block { padding: 80px 24px; }.sds-article .mesh-canvas { /* responsive handled by WebGL resize */ }.sds-article .glass-cluster.cluster-1 { width: 240px; height: 240px; right: 50%; transform: translateX(50%); }.sds-article .glass-cluster.cluster-2 { width: 220px; height: 220px; left: 50%; transform: translateX(-50%); }
}.sds-article .approach-label {
  position: fixed; top: 80px; right: 24px; z-index: 200;
  background: var(--white); color: var(--black);
  font-family: var(--mono);
  font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase;
  padding: 8px 16px;
}.sds-article /* Post switcher — prototype only */
.post-switcher {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 250; display: flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,0.85); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 8px 14px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px;
}.sds-article .post-switcher .ps-label { color: rgba(255,255,255,0.4); margin-right: 4px; }.sds-article .post-switcher a {
  color: rgba(255,255,255,0.6); text-decoration: none; cursor: pointer;
  padding: 4px 10px; border-radius: 999px; transition: all 0.2s ease;
}.sds-article .post-switcher a:hover { color: #fff; background: rgba(255,255,255,0.1); }.sds-article .post-switcher a.active { color: #000; background: #fff; font-weight: 600; }

.sds-article { background: var(--gray-900); color: var(--white); overflow-x: hidden; position: relative; }
.sds-article-root { margin: 0; padding: 0; max-width: none; }

/* Round 3 WebGL guards/fallbacks */
.sds-article .hero .mesh-canvas { z-index: 2; opacity: 0.55; mix-blend-mode: screen; }
.sds-article .hero-image-wrap { z-index: 1; }
.sds-article .hero-overlay { z-index: 2; }
.sds-article .hero-content, .sds-article .hero-number { z-index: 3; }
.sds-article .cta-section .mesh-canvas { opacity: 0.7; }
.sds-article .sds-webgl-fallback > .mesh-canvas,
.sds-article .sds-webgl-disabled .mesh-canvas { display: none; }
.sds-article .sds-webgl-fallback::before,
.sds-article.sds-webgl-disabled .hero::before,
.sds-article.sds-webgl-disabled .cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at 25% 35%, rgba(12, 92, 108, 0.42), transparent 42%),
    radial-gradient(circle at 70% 62%, rgba(102, 72, 38, 0.35), transparent 44%);
}
.sds-article .glass-cluster.sds-webgl-fallback {
  background:
    radial-gradient(circle at 42% 38%, rgba(255,255,255,.26), transparent 8%),
    radial-gradient(circle at 50% 50%, rgba(90,58,18,.58), rgba(10,20,18,.42) 38%, transparent 60%);
  border-radius: 50%;
  opacity: .72;
  filter: blur(.1px);
}
.sds-article .glass-cluster.sds-webgl-fallback canvas { display: none; }
@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  .sds-article .mesh-canvas,
  .sds-article .glass-cluster { display: none !important; }
}