:root {
  --color-canvas: #f7f5f2;
  --color-surface: #ffffff;
  --color-ink: #171717;
  --color-muted: #60656b;
  --color-line: #ddd9d3;
  --color-primary: #1b7444;
  --color-primary-deep: #105333;
  --color-primary-soft: #e5f1e9;
  --color-secondary: #415d9d;
  --color-secondary-soft: #e8edf7;
  --color-accent: #9a600a;
  --color-accent-soft: #f7edd3;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --section-space: clamp(68px, 8vw, 104px);
  --layout-max: 1120px;
  --layout-reading: 790px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --focus-ring: 3px solid rgba(27, 116, 68, .28);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font: 16px/1.7 "DM Sans", Arial, Helvetica, sans-serif;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
}

button {
  font: inherit;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 4px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.ds-container {
  width: min(calc(100% - 48px), var(--layout-max));
  margin-inline: auto;
}

.ds-reading {
  width: min(100%, var(--layout-reading));
}

.ds-eyebrow {
  margin: 0 0 var(--space-4);
  color: var(--color-primary);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.ds-display-title,
.ds-section-title {
  margin-top: 0;
  color: var(--color-ink);
  font-weight: 600;
  letter-spacing: -.02em;
}

.ds-display-title {
  max-width: 980px;
  margin-bottom: var(--space-5);
  font-size: clamp(2.7rem, 5vw, 4.75rem);
  line-height: 1.06;
}

.ds-section-title {
  margin-bottom: var(--space-5);
  font-size: clamp(1.8rem, 3vw, 2.75rem);
  line-height: 1.15;
}

.ds-subtitle {
  margin: 0 0 var(--space-3);
  color: var(--color-ink);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
}

.ds-body {
  margin-top: 0;
  color: var(--color-muted);
}

.ds-intro {
  max-width: var(--layout-reading);
  color: var(--color-muted);
  font-size: 1.08rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(221, 217, 211, .85);
  background: rgba(247, 245, 242, .92);
  backdrop-filter: blur(16px);
}

.site-nav {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.site-brand {
  color: var(--color-ink);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -.02em;
  text-decoration: none;
}

.site-note {
  color: var(--color-muted);
  font-size: .9rem;
}

.case-hero {
  padding-block: clamp(68px, 9vw, 116px) 70px;
}

.case-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-top: 44px;
}

.case-fact {
  padding-top: 15px;
  border-top: 1px solid var(--color-line);
}

.case-fact small {
  display: block;
  margin-bottom: 5px;
  color: var(--color-muted);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.case-fact strong {
  color: var(--color-ink);
  font-weight: 500;
}

.case-hero-visual {
  margin-top: 58px;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.case-section {
  padding-block: var(--section-space);
  border-top: 1px solid var(--color-line);
}

.case-section-layout {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}

.case-section-label {
  position: sticky;
  top: 100px;
  color: var(--color-primary);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ds-card {
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.ds-callout {
  margin: var(--space-7) 0;
  padding: 28px clamp(24px, 5vw, 48px);
  border-left: 3px solid var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-ink);
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  line-height: 1.4;
}

.ds-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.ds-button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.ds-button-primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #ffffff;
}

.ds-button-primary:hover {
  border-color: var(--color-primary-deep);
  background: var(--color-primary-deep);
  color: #ffffff;
}

.case-next {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding-top: 34px;
  border-top: 1px solid var(--color-line);
}

@media (max-width: 860px) {
  .case-section-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .case-section-label {
    position: static;
  }

  .case-facts {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .ds-container {
    width: min(calc(100% - 30px), var(--layout-max));
  }

  .site-note {
    display: none;
  }

  .case-hero {
    padding-block: 54px 52px;
  }

  .case-section {
    padding-block: 56px;
  }

  .case-facts {
    grid-template-columns: 1fr;
  }

  .case-next {
    flex-direction: column;
  }

  .ds-button {
    width: 100%;
  }
}