/* ============================================================
   Kosma Technology — kosmatechnology.com
   styles.css · vanilla CSS · no build step
   ============================================================ */

/* -- Brand tokens ------------------------------------------- */
:root {
  /* Color */
  --kosma-navy:        #1F2937;   /* header bar, primary text on light */
  --kosma-navy-deep:   #111827;   /* deepest text, footer ground */
  --kosma-blue:        #0B91FF;   /* signature accent, K-blade, links, large display */
  --kosma-blue-deep:   #0876D6;   /* hover/active state for accent (4.59:1) */
  --kosma-blue-text:   #076AC2;   /* WCAG AA on white for small text labels (5.46:1) */
  --kosma-sky:         #E4F0F8;   /* subtle band, the cap-statement strip */
  --kosma-sky-deep:    #C9DCEC;   /* slightly stronger sky for borders */
  --kosma-sky-band:    #DCE9F4;   /* slightly stronger band background */
  --kosma-steel:       #646B77;   /* secondary text, eyebrow labels (5.37:1 on white, 4.88:1 on warm) */
  --kosma-steel-soft:  #9CA3AF;   /* tertiary, dividers */
  --kosma-paper:       #FAFAF9;   /* off-white canvas option */
  --kosma-paper-warm:  #F5F4EF;   /* warm paper for editorial bands */
  --kosma-paper-tint:  #F0EFE9;   /* slightly stronger warm tint for lead practice */
  --kosma-line:        #E5E7EB;   /* hairline divider */

  /* Type */
  --font-display: 'Source Serif 4', 'Source Serif Pro', 'Iowan Old Style', 'Georgia', serif;
  --font-body:    'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Spacing scale (8pt grid) */
  --space-1:  0.5rem;
  --space-2:  1rem;
  --space-3:  1.5rem;
  --space-4:  2rem;
  --space-5:  3rem;
  --space-6:  4rem;
  --space-7:  6rem;
  --space-8:  8rem;
  --space-9:  12rem;

  /* Layout */
  --content-max:    1200px;
  --content-narrow: 720px;
  --content-wide:   1400px;

  /* Type scale (clamp for fluid responsive) */
  --t-display: clamp(3rem, 7.5vw, 6rem);
  --t-h1:      clamp(2.5rem, 5.5vw, 4.5rem);
  --t-h2:      clamp(1.875rem, 3.5vw, 2.75rem);
  --t-h3:      clamp(1.25rem, 2vw, 1.5rem);
  --t-eyebrow: 0.75rem;
  --t-body:    1.125rem;
  --t-small:   0.9375rem;
  --t-tiny:    0.8125rem;
}

/* -- Self-hostable fonts ------------------------------------
   To self-host, download Source Serif 4 and Public Sans from
   fonts.google.com, place .woff2 files in /assets/fonts/, and
   uncomment below.
   ------------------------------------------------------------ */
/*
@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/fonts/SourceSerif4-Variable.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/fonts/SourceSerif4-Italic-Variable.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/assets/fonts/PublicSans-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
*/

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--kosma-navy-deep);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--kosma-blue-text);
  text-decoration: none;
  text-underline-offset: 0.2em;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

a:hover { color: var(--kosma-navy-deep); text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--kosma-blue);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip link — accessibility baseline */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--kosma-navy);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 100;
  font-weight: 600;
}
.skip-link:focus { top: 0; color: #fff; text-decoration: none; }

/* -- Type ---------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--kosma-navy-deep);
  margin: 0;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); letter-spacing: -0.018em; }
h3 {
  font-size: var(--t-h3);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kosma-blue-text);
  margin: 0 0 var(--space-2);
  display: inline-block;
}

.eyebrow-steel { color: var(--kosma-steel); }

.lede {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.5;
  color: var(--kosma-navy);
  font-weight: 400;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
  letter-spacing: 0.02em;
}

/* Display headline — for hero. Source Serif 4 italic provides editorial emphasis without quirk */
.display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 400;
  font-variation-settings: "opsz" 60;
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--kosma-navy-deep);
}

.display em {
  font-style: italic;
  font-variation-settings: "opsz" 60;
  font-weight: 400;
  color: var(--kosma-navy);
}

/* -- Layout -------------------------------------------------- */
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.container-narrow {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.container-wide {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

@media (min-width: 768px) {
  .container, .container-narrow, .container-wide { padding: 0 var(--space-5); }
}

section { padding: var(--space-7) 0; }
.section-tight { padding: var(--space-5) 0; }
.section-tight-top { padding-top: calc(var(--space-7) * 0.8); }
.section-loose { padding: var(--space-8) 0; }

@media (max-width: 640px) {
  section { padding: var(--space-6) 0; }
  .section-loose { padding: var(--space-7) 0; }
}

/* -- Header / nav ------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--kosma-line);
}

.site-header__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0.875rem var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .site-header__inner { padding: 1rem var(--space-5); }
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: inherit;
}
.site-logo:hover { text-decoration: none; }
.site-logo__mark { height: 32px; width: auto; flex-shrink: 0; }
.site-logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 3px;
}
.site-logo__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--kosma-navy-deep);
  font-variation-settings: "opsz" 24;
}
.site-logo__tag {
  font-family: var(--font-body);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kosma-steel);
}

@media (max-width: 480px) {
  .site-logo__text { display: none; }
  .site-logo__mark { height: 28px; }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-nav a {
  color: var(--kosma-navy);
  font-weight: 500;
  font-size: var(--t-small);
}

.site-nav a:hover { color: var(--kosma-blue); text-decoration: none; }

.site-nav .cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: var(--kosma-navy);
  color: #fff;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-size: var(--t-tiny);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 160ms ease, transform 160ms ease;
}

.site-nav .cta:hover {
  background: var(--kosma-blue);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

/* Tighten nav spacing and sizing on small screens so Capabilities,
   About, and the CTA all fit in iPhone-class viewports without
   hiding any items. */
@media (max-width: 560px) {
  .site-nav {
    gap: var(--space-2);
  }
  .site-nav .nav-link {
    font-size: var(--t-tiny);
  }
  .site-nav .cta {
    padding: 0.5rem 0.75rem;
    font-size: 0.6875rem;
    gap: 0.3em;
  }
}

@media (max-width: 380px) {
  .site-nav .cta svg {
    display: none;
  }
}

/* -- Hero ---------------------------------------------------- */
.hero {
  padding: var(--space-7) 0 var(--space-8);
  position: relative;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .hero { padding: var(--space-8) 0 var(--space-9); }
}

.hero__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

@media (min-width: 768px) {
  .hero__inner { padding: 0 var(--space-5); }
}

.display .line {
  display: block;
  opacity: 0;
  transform: translateY(12px);
  animation: lineRise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.display .line:nth-child(1) { animation-delay: 60ms; }
.display .line:nth-child(2) { animation-delay: 200ms; }
.display .line:nth-child(3) { animation-delay: 340ms; }

@keyframes lineRise {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .display .line {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.hero__sub {
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  color: var(--kosma-steel);
  font-weight: 400;
  margin: var(--space-3) 0 var(--space-5);
  max-width: 36ch;
}

/* Hero proof — single oversized stat that anchors the headline */
.hero__proof {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: end;
}

.hero__proof::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 4px;
  background: var(--kosma-blue);
}

@media (min-width: 900px) {
  .hero__proof {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: end;
  }
}

.hero__proof-stat {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 4.25vw, 3.5rem);
  font-weight: 600;
  font-variation-settings: "opsz" 60;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--kosma-navy-deep);
  margin: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}

.hero__proof-stat .accent {
  color: var(--kosma-blue);
  font-style: normal;
  font-weight: 700;
}

.hero__proof-meta {
  font-family: var(--font-body);
  font-size: var(--t-small);
  letter-spacing: 0;
  color: var(--kosma-steel);
  line-height: 1.55;
  max-width: 36ch;
}

.hero__proof-meta strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--kosma-blue-text);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.6em;
}

/* Credential strip with inline seals */
.cred-strip {
  background: var(--kosma-sky);
  border-top: 1px solid var(--kosma-sky-deep);
  border-bottom: 1px solid var(--kosma-sky-deep);
  padding: 1.125rem 0;
  margin-top: var(--space-5);
}

.cred-strip__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}

@media (min-width: 768px) {
  .cred-strip__inner { padding: 0 var(--space-5); }
}

.cred-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--kosma-navy-deep);
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.cred-badge img {
  height: 32px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.cred-badge--cert {
  color: var(--kosma-blue-text);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.cred-badge--text {
  font-weight: 500;
  color: var(--kosma-navy);
  font-size: 0.9375rem;
  white-space: nowrap;
}

.cred-strip .sep {
  color: var(--kosma-sky-deep);
  font-weight: 400;
  font-size: 0.875rem;
}

@media (max-width: 640px) {
  .cred-strip { padding: 0.875rem 0; }
  .cred-badge img { height: 28px; }
  .cred-badge, .cred-badge--text { font-size: 0.875rem; }
}

/* -- Section titles ----------------------------------------- */
.section-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--kosma-line);
}

.section-title__num {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--kosma-blue-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
}

.section-title__text {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.05;
  color: var(--kosma-navy-deep);
  margin: 0;
}

/* -- Mission split — mission text + founder credentials ----- */
.mission-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}

@media (min-width: 900px) {
  .mission-split {
    grid-template-columns: 2fr 1fr;
    gap: var(--space-7);
  }
}

.mission-text .lede {
  margin: 0;
  font-size: clamp(1.3125rem, 2.1vw, 1.625rem);
  color: var(--kosma-navy-deep);
  line-height: 1.45;
}

.mission-text .eyebrow-steel {
  color: var(--kosma-blue-text);
  font-weight: 700;
}

.founder-card {
  padding: 0 0 0 var(--space-3);
  border-left: 1px solid var(--kosma-line);
  font-family: var(--font-body);
}

@media (min-width: 900px) {
  .founder-card { padding-left: var(--space-4); }
}

.founder-card__label {
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kosma-blue-text);
  margin: 0 0 var(--space-2);
}

.founder-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.75vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--kosma-navy-deep);
  margin: 0 0 var(--space-3);
}

.founder-card__creds {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.founder-card__creds li {
  padding: 0.55rem 0;
  border-top: 1px solid var(--kosma-line);
  font-size: 0.875rem;
  color: var(--kosma-navy);
  line-height: 1.4;
}

.founder-card__creds li:last-child { padding-bottom: 0; }
.founder-card__creds li strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--kosma-steel);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.2em;
}
.practices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--kosma-line);
}

@media (min-width: 768px) {
  .practices { grid-template-columns: repeat(2, 1fr); }
}

.practice {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--kosma-line);
  position: relative;
}

@media (min-width: 768px) {
  .practice { padding: var(--space-5) var(--space-4); }
  .practice:first-child {
    padding-left: var(--space-4);
    padding-right: var(--space-5);
    border-right: 1px solid var(--kosma-line);
  }
  .practice:last-child { padding-right: 0; padding-left: var(--space-5); }
}

.practice--lead {
  position: relative;
}

.practice--lead::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--kosma-blue);
}

.practice--lead .practice__num {
  color: var(--kosma-blue-text);
  font-weight: 600;
}

.practice__num {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--kosma-blue-text);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-3);
  display: block;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.practice__title {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 2.75vw, 2.125rem);
  font-weight: 400;
  letter-spacing: -0.018em;
  margin: 0 0 var(--space-3);
  color: var(--kosma-navy-deep);
  line-height: 1.1;
}

.practice__lede {
  font-size: var(--t-body);
  color: var(--kosma-navy);
  margin-bottom: var(--space-3);
  line-height: 1.55;
}

.practice__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.practice__list li {
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--kosma-navy);
  padding-left: 1.1em;
  position: relative;
  line-height: 1.45;
}

.practice__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  background: var(--kosma-blue);
}

.practice__status {
  font-family: var(--font-body);
  font-size: var(--t-tiny);
  color: var(--kosma-steel);
  margin-top: var(--space-3);
  font-style: italic;
  line-height: 1.5;
}

/* -- Year 2 Horizon block ---------------------------------- */
.horizon {
  margin-top: var(--space-6);
  padding: var(--space-4) 0 0 var(--space-5);
  border-top: 1px solid var(--kosma-line);
  border-left: 4px solid var(--kosma-blue);
  max-width: 70ch;
}

.horizon__label {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kosma-blue-text);
  margin: 0 0 var(--space-2);
  display: block;
}

.horizon__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.25vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--kosma-navy-deep);
  margin: 0 0 var(--space-2);
}

.horizon__body {
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--kosma-navy);
  margin: 0;
}

/* -- Certification seals --------------------------------- */
.seals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.seal {
  display: inline-block;
  flex-shrink: 0;
}

.seal img {
  display: block;
  width: auto;
  height: auto;
}

/* Capabilities page seals — larger, in the designations row */
.seals-cap .seal img {
  height: 90px;
  width: auto;
}

/* Footer seals — sized to match the Capabilities page treatment */
.seals-footer {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-3);
}

.seals-footer .seal img {
  height: 80px;
  width: auto;
  background: #fff;
  padding: 6px;
  border-radius: 4px;
}

@media (max-width: 480px) {
  .seals-cap .seal img { height: 72px; }
  .seals-footer .seal img { height: 64px; }
}

/* -- Differentiators (editorial card) ---------------------- */
.diffs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 900px) {
  .diffs { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}

.diff {
  padding: var(--space-4);
  background: var(--kosma-paper-warm);
  border: 1px solid var(--kosma-line);
  border-top: 3px solid var(--kosma-blue);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.diff__num {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--kosma-blue-text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

.diff__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
  color: var(--kosma-navy-deep);
}

.diff__body {
  font-size: var(--t-small);
  color: var(--kosma-navy);
  line-height: 1.55;
  margin: 0;
}

/* -- Identifiers block (capabilities, contact, footer) ------ */
.identifiers {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.6rem var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--t-small);
  align-items: baseline;
}

.identifiers dt {
  color: var(--kosma-steel);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--t-tiny);
}

.identifiers dd {
  margin: 0;
  color: var(--kosma-navy-deep);
  word-break: break-word;
}

.identifiers dd .accent { color: var(--kosma-blue-text); font-weight: 600; }

/* -- Experience cards (capabilities) ------------------------ */
.experience {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 900px) {
  .experience { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}

.case {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--kosma-navy-deep);
}

.case__attr {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kosma-steel);
  margin-bottom: var(--space-2);
}

.case__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 var(--space-3);
  color: var(--kosma-navy-deep);
}

.case__body {
  font-size: var(--t-small);
  color: var(--kosma-navy);
  line-height: 1.65;
  margin: 0 0 var(--space-3);
}

.case__meta {
  font-family: var(--font-body);
  font-size: var(--t-tiny);
  color: var(--kosma-steel);
  font-style: italic;
}

/* -- Capability list (capabilities page) -------------------- */
.cap-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cap-list li {
  position: relative;
  padding: 0.625rem 0 0.625rem 1.25rem;
  border-bottom: 1px solid var(--kosma-line);
  font-size: var(--t-body);
  color: var(--kosma-navy);
  line-height: 1.55;
}

.cap-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1em;
  width: 6px;
  height: 6px;
  background: var(--kosma-blue);
}

.cap-list li:last-child { border-bottom: none; }

/* -- Two-column comp grid (capabilities) -------------------- */
.cap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 900px) {
  .cap-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}

.cap-grid__col h3 {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--kosma-blue);
  display: inline-block;
}

/* -- CTA strip ----------------------------------------------- */
.cta-strip {
  background: var(--kosma-navy-deep);
  color: #fff;
  padding: var(--space-6) 0;
}

.cta-strip__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .cta-strip__inner { padding: 0 var(--space-5); }
}

.cta-strip h2 {
  color: #fff;
  font-size: clamp(1.225rem, 2.45vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 28ch;
  line-height: 1.25;
}

.cta-strip__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.875rem 1.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-small);
  letter-spacing: 0.01em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 200ms ease;
  text-decoration: none;
}

.btn-primary {
  background: var(--kosma-blue);
  color: #fff;
}

.btn-primary:hover {
  background: #fff;
  color: var(--kosma-navy-deep);
  text-decoration: none;
}

.btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.3);
}

.btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: #fff;
  color: #fff;
  text-decoration: none;
}

/* -- Footer --------------------------------------------------- */
.site-footer {
  background: var(--kosma-navy-deep);
  color: #D1D5DB;
  padding: var(--space-6) 0 var(--space-4);
  font-size: var(--t-small);
}

.site-footer__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

@media (min-width: 768px) {
  .site-footer__inner { padding: 0 var(--space-5); }
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-6);
  }
}

.site-footer h4 {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kosma-blue);
  margin: 0 0 var(--space-3);
}

.site-footer a {
  color: #fff;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--kosma-blue);
  text-decoration: underline;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer__brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.site-footer__brand-mark {
  height: 40px;
  width: auto;
  flex-shrink: 0;
}

.site-footer__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 4px;
}

.site-footer__brand-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: #fff;
  font-variation-settings: "opsz" 24;
}

.site-footer__brand-tag {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kosma-blue);
}

.site-footer__brand p {
  color: #9CA3AF;
  font-size: var(--t-small);
  line-height: 1.65;
  margin: 0;
  max-width: 38ch;
}

.site-footer .identifiers dt { color: var(--kosma-steel-soft); }
.site-footer .identifiers dd { color: #fff; }
.site-footer .identifiers dd .accent { color: var(--kosma-blue); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
  font-size: var(--t-tiny);
  color: var(--kosma-steel-soft);
}

.site-footer__bottom a { color: var(--kosma-steel-soft); }
.site-footer__bottom a:hover { color: #fff; }

/* -- Page hero (capabilities, accessibility) ---------------- */
.page-hero {
  padding: var(--space-6) 0 var(--space-5);
  border-bottom: 1px solid var(--kosma-line);
}

.page-hero h1 {
  font-size: var(--t-h1);
  margin-bottom: var(--space-3);
}

.page-hero .lede { max-width: 60ch; margin: 0; }

/* -- About page hero — logo-forward, two-column ------------- */
.page-hero--about {
  padding: 3.5rem 0 4rem;
  border-bottom: 1px solid var(--kosma-line);
  position: relative;
}

@media (min-width: 768px) {
  .page-hero--about {
    padding: 5rem 0 6rem;
  }
}

/* Eyebrow with the 4px Kosma Blue signature rule above it.
   Replaces the previous absolute-positioned ::before on the hero —
   the rule now sits in document flow tied to the eyebrow it marks. */
.eyebrow--ruled::before {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  background: var(--kosma-blue);
  margin-bottom: var(--space-3);
}

.page-hero--about .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
  padding-top: var(--space-3);
}

@media (min-width: 768px) {
  .page-hero--about .container {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

.page-hero--about h1 {
  font-size: clamp(1.875rem, 3.5vw, 2.625rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 var(--space-3);
}

.page-hero--about h1 em {
  font-style: italic;
  color: var(--kosma-navy);
}

.page-hero--about .lede {
  font-size: var(--t-body);
  color: var(--kosma-steel);
  max-width: 48ch;
  line-height: 1.55;
  margin: 0;
}

/* Hero firm logo — color version, centered in right column,
   fades in on page load. */
.hero-logo {
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: 0 auto;
  display: block;
  opacity: 0;
  transform: translateY(10px);
  animation: hero-logo-rise 900ms ease-out 200ms forwards;
}

@media (min-width: 768px) {
  .hero-logo {
    max-width: 280px;
  }
}

@keyframes hero-logo-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* -- Two-column page layout --------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 2fr; gap: var(--space-6); }
}

.split__label {
  position: sticky;
  top: 5.5rem;
}

/* Disable sticky on viewports below the 2-column .split breakpoint.
   On single-column mobile, the .split__label sits above the content
   in document flow — sticky would float it over the content as the
   user scrolls, overlapping inner labels. */
@media (max-width: 899px) {
  .split__label {
    position: static;
    top: auto;
  }
}

.split__label .eyebrow { display: block; margin-bottom: var(--space-1); }

.split__label h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin: 0;
  letter-spacing: -0.018em;
}

/* ============================================================
   ABOUT PAGE COMPONENTS
   - DIRECT, OPERATOR, AFFILIATIONS, CERTIFICATIONS reuse .split
   - PRINCIPLES: .principles-stack with .principle blocks
   - PROGRAMS: .program-cards with horizontal layout
   - Section dividers: 1px hairline between consecutive sections
   ============================================================ */

/* -- Section divider between about-page sections -----------
   Dividers are semantic, not structural. Default behavior is
   to draw a rule between consecutive sections; the
   .about-section--continuous modifier suppresses it where two
   sections describe the same topic from different angles. */
.about-section + .about-section {
  border-top: 1px solid var(--kosma-line);
}

.about-section + .about-section.about-section--continuous {
  border-top: none;
}

/* -- DIRECT section: 2-column, photo stacked at top of right ---
   Right column flows top-down: portrait, name, byline, contact.
   The photo provides the right-side visual anchor by virtue of
   sitting at the top of the right column. */
.direct-content {
  display: flex;
  flex-direction: column;
}

.direct-portrait {
  margin: 0 0 var(--space-4);
  width: 100%;
  max-width: 320px;
}

@media (min-width: 768px) {
  .direct-portrait {
    max-width: 340px;
  }
}

.direct-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 55% 25%;
  border-radius: 4px;
}

.direct-name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--kosma-navy-deep);
  margin: 0 0 var(--space-2);
}

.direct-byline {
  font-family: var(--font-body);
  font-size: var(--t-small);
  color: var(--kosma-steel);
  margin: 0 0 var(--space-4);
}

.direct-contact {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.6rem var(--space-3);
  margin: 0;
  align-items: baseline;
  max-width: 60ch;
}

.direct-contact dt {
  font-family: var(--font-body);
  font-size: var(--t-tiny);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--kosma-steel);
  margin: 0;
}

.direct-contact dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-small);
  color: var(--kosma-navy-deep);
  word-break: break-word;
}

/* -- OPERATOR: three blocks, descending visual weight -------- */
.operator-stack {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;  /* 40px desktop */
}

@media (max-width: 640px) {
  .operator-stack { gap: 1.5rem; }  /* 24px mobile */
}

.operator-block {
  margin: 0;
}

.operator-block__label {
  font-family: var(--font-body);
  font-size: 0.6875rem;  /* slightly smaller than section labels (0.75rem) */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--kosma-blue-text);
  margin: 0 0 var(--space-2);
}

.operator-block p {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--kosma-navy);
  margin: 0 0 var(--space-3);
  max-width: 60ch;
}

.operator-block p:last-child {
  margin-bottom: 0;
}

.operator-block__sub-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem var(--space-3);
  margin: var(--space-3) 0 0;
  align-items: baseline;
}

.operator-block__sub-list dt {
  font-family: var(--font-body);
  font-size: var(--t-tiny);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--kosma-steel);
  margin: 0;
}

.operator-block__sub-list dd {
  margin: 0;
  font-size: var(--t-small);
  color: var(--kosma-navy);
  line-height: 1.5;
}

/* CERTIFICATIONS block within OPERATOR — tighten the existing list */
.operator-block--certifications .certifications {
  margin-top: 0;
}

/* -- PRINCIPLES: vertical stack ---------------------------- */
.principles-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

@media (max-width: 640px) {
  .principles-stack { gap: var(--space-4); }
}

.principle {
  margin: 0;
}

.principle__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--kosma-navy-deep);
  margin: 0 0 0.4em;
}

.principle__attribution {
  font-family: var(--font-body);
  font-size: var(--t-tiny);
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.05em;
  color: var(--kosma-steel);
  margin: 0 0 var(--space-2);
}

.principle__body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--kosma-navy);
  margin: 0;
  max-width: 60ch;
}

/* -- PROGRAMS: horizontal cards ---------------------------- */
.programs-header {
  margin-bottom: var(--space-5);
}

.programs-header .eyebrow {
  display: block;
  margin-bottom: var(--space-2);
}

.programs-header h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin: 0;
  letter-spacing: -0.018em;
}

.program-cards {
  display: flex;
  flex-direction: column;
}

.program-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
}

.program-card + .program-card {
  border-top: 1px solid var(--kosma-line);
}

.program-card__logo {
  flex: 0 0 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  background: transparent;
  min-height: 110px;
}

.program-card__logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Square / circular logos (e.g. VIP badge) — sized by height
   so the circle fills vertical space without expanding wider
   than its natural aspect ratio. */
.program-card__logo--square img {
  max-height: 95px;
  max-width: 95px;
}

/* Horizontal wordmark logos (e.g. Project Opportunity) — sized
   by width so the wordmark uses the container's horizontal room;
   max-height caps how tall the wordmark can render. */
.program-card__logo--wordmark img {
  max-height: 56px;
  max-width: 100%;
}

.program-card__content {
  flex: 1;
  min-width: 0;
}

.program-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--kosma-navy-deep);
  margin: 0 0 var(--space-2);
}

.program-card__body {
  font-family: var(--font-body);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--kosma-navy);
  margin: 0 0 var(--space-2);
  max-width: 60ch;
}

.program-card__link {
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.05em;
  color: var(--kosma-blue-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  /* Touch target: 44px minimum hit area per WCAG */
  padding: 0.625rem 0;
  margin: -0.625rem 0;
  min-height: 44px;
}

.program-card__link:hover {
  color: var(--kosma-blue);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .program-card__logo {
    flex: 0 0 100px;
    min-height: 80px;
  }
  .program-card__logo--square img {
    max-height: 64px;
    max-width: 64px;
  }
  .program-card__logo--wordmark img {
    max-height: 40px;
    max-width: 100%;
  }
}

/* -- AFFILIATIONS list ------------------------------------- */
.affiliations,
.certifications {
  list-style: none;
  padding: 0;
  margin: 0;
}

.affiliations li,
.certifications li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--kosma-line);
  font-family: var(--font-body);
  color: var(--kosma-navy);
  line-height: 1.5;
}

.affiliations li {
  font-size: var(--t-body);
}

.certifications li {
  /* Minimal weight — list format only */
  font-size: var(--t-small);
}

.affiliations li:last-child,
.certifications li:last-child {
  border-bottom: none;
}

.affiliations__name,
.certifications__name {
  color: var(--kosma-navy-deep);
}

.affiliations__sep,
.certifications__sep {
  color: var(--kosma-steel-soft);
  margin: 0 0.4em;
}

.affiliations__role {
  color: var(--kosma-steel);
}

.affiliations__context {
  display: block;
  font-size: var(--t-small);
  color: var(--kosma-steel);
  margin-top: 0.25em;
}

.certifications__status {
  font-family: var(--font-body);
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.05em;
  color: var(--kosma-blue-text);
}

/* ============================================================
   END ABOUT PAGE COMPONENTS
   ============================================================ */

/* -- Quiet utility classes ---------------------------------- */
.text-center { text-align: center; }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }
.muted { color: var(--kosma-steel); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }

/* ============================================================
   CAPABILITIES PAGE COMPONENTS
   - Practice card with Methods / Tools / Standards subsections
   - Metric card (case-study primary number)
   - Before/After diagram (CSS only, no images)
   - Pull quote
   - Year 2 Horizon
   - Verify section blocks
   ============================================================ */

/* -- Verify section: two blocks separated by a hairline ----- */
.verify-block {
  margin-bottom: var(--space-4);
}

.verify-block + .verify-block {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--kosma-line);
}

.verify-block__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kosma-blue-text);
  margin: 0 0 var(--space-3);
}

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

.verify-engagement li {
  position: relative;
  padding: 0.625rem 0 0.625rem 1.25rem;
  border-bottom: 1px solid var(--kosma-line);
  font-size: var(--t-body);
  color: var(--kosma-navy);
  line-height: 1.55;
}

.verify-engagement li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1em;
  width: 6px;
  height: 6px;
  background: var(--kosma-blue);
}

.verify-engagement li:last-child { border-bottom: none; }

/* -- Practice cards (capabilities page) — Methods/Tools/Stds - */
.practice-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 900px) {
  .practice-cards {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }
}

.practice-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.practice-card__icon {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.4em;
  vertical-align: -0.08em;
  color: currentColor;
  flex-shrink: 0;
}

.practice-card__num {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--kosma-blue-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

.practice-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--kosma-navy-deep);
  margin: 0;
}

.practice-card__lede {
  font-size: var(--t-small);
  color: var(--kosma-navy);
  line-height: 1.55;
  margin: 0;
}

.practice-card__table {
  border: 1px solid var(--kosma-line);
  background: #fff;
}

.subsection {
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--kosma-line);
}

.subsection:last-child {
  border-bottom: none;
}

.subsection__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kosma-blue-text);
  margin: 0 0 0.625rem;
}

.subsection__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.subsection__list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.875rem;
  color: var(--kosma-navy);
  line-height: 1.45;
}

.subsection__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  background: var(--kosma-blue);
}

.practice-card__depth {
  font-family: var(--font-body);
  font-size: var(--t-tiny);
  font-style: italic;
  color: var(--kosma-steel);
  line-height: 1.5;
  margin: 0;
}

.practice-card__depth strong {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--kosma-blue-text);
  display: inline-block;
  margin-right: 0.5em;
}

/* -- Pull quote ------------------------------------------- */
.pull-quote {
  padding: var(--space-5) 0;
  text-align: left;
  border-top: 1px solid var(--kosma-line);
  border-bottom: 1px solid var(--kosma-line);
  margin: 0;
}

.pull-quote-section {
  padding: var(--space-3) 0;
}

.pull-quote__text {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--kosma-navy-deep);
  margin: 0;
  max-width: 36ch;
}

.pull-quote__text::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--kosma-blue);
  margin-bottom: var(--space-3);
}

.pull-quote__body {
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 1.8vw, 1.4rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--kosma-navy);
  margin: var(--space-3) 0 0;
  max-width: 56ch;
}

.pull-quote__cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-style: normal;
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--kosma-steel);
}

/* -- Year 2 Horizon: lighter variant for capabilities page -- */
.horizon--subordinate {
  margin: var(--space-5) 0 var(--space-3);
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  border-top: none;
  border-left: 2px solid var(--kosma-line);
  max-width: 60ch;
}

.horizon--subordinate .horizon__label {
  font-size: 0.6875rem;
  color: var(--kosma-steel);
  font-weight: 600;
  letter-spacing: 0.12em;
  margin-bottom: 0.625rem;
}

.horizon--subordinate .horizon__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--kosma-navy);
  margin: 0 0 0.625rem;
}

.horizon--subordinate .horizon__body {
  font-size: var(--t-small);
  color: var(--kosma-steel);
  line-height: 1.55;
  margin: 0;
}

/* -- Evidence section: case studies (vertical, full-width) -- */
.case-studies {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.case-study {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.case-study + .case-study {
  padding-top: var(--space-7);
  border-top: 1px solid var(--kosma-line);
}

/* -- Metric card (case-study primary number) ---------------- */
.metric-card {
  padding: var(--space-4);
  background: var(--kosma-paper-warm);
  border: 1px solid var(--kosma-line);
  border-left: 3px solid var(--kosma-blue);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.metric-card__tags {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kosma-blue-text);
}

.metric-card__tags .sep {
  color: var(--kosma-steel-soft);
  margin: 0 0.4em;
  font-weight: 400;
}

.metric-card__stat {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 4.25vw, 3rem);
  font-weight: 600;
  font-variation-settings: "opsz" 60;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--kosma-navy-deep);
  margin: 0;
}

.metric-card__stat .accent {
  color: var(--kosma-blue);
  font-weight: 700;
}

.metric-card__stat .arrow {
  display: inline-block;
  margin: 0 0.3em;
  color: var(--kosma-steel);
  font-style: normal;
}

.metric-card__subtitle {
  font-family: var(--font-body);
  font-size: var(--t-small);
  color: var(--kosma-navy);
  line-height: 1.55;
  margin: 0;
  max-width: 50ch;
}

/* -- Before/After diagram (pure CSS, no images) ------------- */
.ba-diagram {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-items: stretch;
}

@media (min-width: 768px) {
  .ba-diagram {
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-3);
    align-items: stretch;
  }
}

.ba-box {
  padding: var(--space-3);
  border: 1px solid var(--kosma-line);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ba-box__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kosma-steel);
  margin: 0;
}

.ba-box--after .ba-box__label {
  color: var(--kosma-blue-text);
}

.ba-box__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ba-box__list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.875rem;
  color: var(--kosma-navy);
  line-height: 1.45;
}

.ba-box__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  background: var(--kosma-steel-soft);
}

.ba-box--after .ba-box__list li::before {
  background: var(--kosma-blue);
}

/* Connector arrow — between BEFORE and AFTER boxes */
.ba-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-2);
  color: var(--kosma-blue);
}

.ba-arrow svg {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .ba-arrow {
    transform: rotate(90deg);
    padding: var(--space-1) 0;
  }
}

/* -- Case study narrative + attribution --------------------- */
.case-study__narrative {
  font-size: var(--t-body);
  color: var(--kosma-navy);
  line-height: 1.65;
  margin: 0;
  max-width: 70ch;
}

.case-study__attribution {
  font-family: var(--font-body);
  font-size: var(--t-tiny);
  font-style: italic;
  color: var(--kosma-steel);
  line-height: 1.5;
  margin: 0;
  padding-top: var(--space-2);
}

/* ============================================================
   END CAPABILITIES COMPONENTS
   ============================================================ */


/* -- Print -------------------------------------------------- */
@media print {
  .site-header, .site-footer, .cta-strip, .skip-link { display: none; }
  body { color: #000; }
  a { color: #000; text-decoration: underline; }
  section, .hero { padding: 1rem 0; }
}