/* About page — layout only; cards use global .scoop-card system */

.about-page {
  --ap-scoop-surround: var(--ds-color-bg);
}

.ap-section-head {
  max-width: 40rem;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.ap-section-head--center {
  margin-inline: auto;
  text-align: center;
}

/* Hero — sticky header is in document flow; no header-offset padding */

.about-page .ap-hero.padding {
  padding-top: clamp(20px, 2.5vw, 32px);
  padding-bottom: var(--ds-section-pad-y);
  overflow: visible;
}

.about-page .ap-hero .ds-breadcrumb {
  margin-bottom: var(--ds-space-5);
}

.ap-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}

.ap-hero-copy .ds-title {
  max-width: 13ch;
  margin-bottom: var(--ds-space-5);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.ap-hero-lead {
  max-width: 42ch;
  margin-bottom: var(--ds-space-5);
  font-size: var(--ds-text-md);
  line-height: var(--ds-leading-snug);
  color: var(--ds-color-text-muted, var(--ds-neutral-500));
}

.ap-hero-copy .ds-tag-list {
  margin-bottom: var(--ds-space-6);
}

.ap-hero-actions {
  margin-top: 0;
}

.ap-hero-visual {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  min-width: 0;
}

.ap-hero-card {
  --scoop-cut-bg: var(--ds-color-bg);
  background: var(--ds-color-bg);
  width: 100%;
}

.ap-hero-card .scoop-card-media {
  aspect-ratio: 16 / 10;
  max-height: min(360px, 42vh);
  min-height: 220px;
  overflow: hidden;
  border-radius: inherit;
}

.ap-hero-card .scoop-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.ap-hero-scoop {
  padding: 8px 0 0 10px;
}

.ap-hero-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-4);
}

.ap-hero-metric {
  --scoop-cut: var(--ds-scoop-cut-sm);
}

.ap-hero-metric .scoop-card-body {
  padding: var(--ds-space-5);
  padding-bottom: calc(var(--ds-space-5) + 20px);
  padding-right: calc(var(--ds-space-5) + 28px);
}

.ap-hero-metric .scoop-card-stat {
  font-size: var(--ds-text-2xl);
}

.ap-hero-metric .scoop-card-stat-label {
  display: block;
  margin-top: 2px;
}

.ap-hero-metric .scoop-cutout .scoop-cta--sm,
.ap-stats-grid .ap-stat-card .scoop-cutout .scoop-cta--sm {
  min-width: 36px;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 50%;
}

/* Mission */

.ap-muted {
  --ap-scoop-surround: var(--ds-color-bg-muted, var(--ds-color-surface-muted));
  background: var(--ds-color-bg-muted, var(--ds-color-surface-muted));
}

.ap-muted .scoop-card {
  --scoop-cut-bg: var(--ap-scoop-surround);
}

/* Story */

.ap-story-layout {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  max-width: 52rem;
}

.ap-story-prose p {
  margin: 0 0 var(--ds-space-4);
  font-size: var(--ds-text-md);
  line-height: var(--ds-leading-snug);
  color: var(--ds-color-text-muted, var(--ds-neutral-500));
}

.ap-story-prose p:last-child {
  margin-bottom: 0;
}

/* Why Krivon */

.ap-why-lead,
.ap-clients-lead,
.ap-approach-lead {
  margin: var(--ds-space-4) 0 0;
  max-width: 42ch;
  font-size: var(--ds-text-md);
  line-height: var(--ds-leading-snug);
  color: var(--ds-color-text-muted, var(--ds-neutral-500));
}

.ap-section-head--center .ap-why-lead,
.ap-section-head--center .ap-clients-lead {
  margin-inline: auto;
}

.ap-approach-lead a {
  color: var(--ds-color-brand);
  font-weight: var(--ds-font-weight-semibold);
  text-decoration: none;
}

.ap-approach-lead a:hover {
  text-decoration: underline;
}

.ap-why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-space-4);
  align-items: stretch;
}

.ap-why-card {
  height: 100%;
  background: var(--ds-color-surface-muted, var(--ds-color-bg-muted));
  --scoop-cut-bg: var(--ds-color-bg);
  transition: transform var(--ds-duration) var(--ds-ease-out);
}

.ap-why-card:hover {
  transform: translateY(-3px);
}

.ap-why-card .scoop-card-body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: var(--ds-space-6);
  padding-bottom: calc(var(--ds-space-6) + 24px);
  padding-right: calc(var(--ds-space-6) + 30px);
}

.ap-why-card .scoop-card-outcome {
  margin-top: auto;
  padding-top: var(--ds-space-4);
}

/* Clients */

.ap-clients-tags {
  justify-content: center;
  margin-bottom: var(--ds-space-5);
}

.ap-clients-note {
  margin: 0;
  text-align: center;
  font-size: var(--ds-text-sm);
  color: var(--ds-color-text-muted, var(--ds-neutral-500));
}

.ap-clients-note a {
  color: var(--ds-color-brand);
  text-decoration: none;
  font-weight: var(--ds-font-weight-semibold);
}

.ap-clients-note a:hover {
  text-decoration: underline;
}

/* Global (shared with marketing pages) */

.ap-global.mp-global,
.about-page .mp-global {
  --ap-scoop-surround: var(--ds-color-bg);
}

.ap-mission {
  --ap-scoop-surround: var(--ds-color-bg-muted, var(--ds-color-surface-muted));
  background: var(--ds-color-bg-muted, var(--ds-color-surface-muted));
}

.ap-mission-card {
  max-width: 52rem;
  margin-inline: auto;
  border-radius: var(--ds-radius-2xl);
  overflow: visible;
}

.ap-mission-body {
  padding: 0;
}

.ap-mission-quote {
  margin: 0;
  text-align: center;
}

.ap-mission-quote p {
  margin: 0 0 var(--ds-space-6);
  font-size: clamp(var(--ds-text-lg), 2.2vw, var(--ds-text-2xl));
  line-height: 1.45;
  font-weight: var(--ds-font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--ds-color-text-strong);
}

.ap-mission-quote footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-style: normal;
}

.ap-mission-quote cite {
  font-style: normal;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-font-weight-semibold);
  color: var(--ds-color-text-strong);
}

.ap-mission-quote footer span {
  font-size: var(--ds-text-xs);
  color: var(--ds-color-text-muted, var(--ds-neutral-500));
}

/* Approach */

.ap-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ds-space-4);
  align-items: stretch;
}

.ap-steps .ap-step-card {
  height: 100%;
}

.ap-steps .ap-step-card .scoop-card-body {
  padding: var(--ds-space-6);
  padding-bottom: calc(var(--ds-space-6) + 20px);
  padding-right: calc(var(--ds-space-6) + 28px);
}

.ap-steps .ap-step-card .scoop-card-title {
  font-size: var(--ds-text-lg);
}

/* Leadership */

.ap-leaders-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-5);
  align-items: stretch;
}

.ap-leader-card {
  --scoop-cut: var(--ds-scoop-cut-sm);
  --scoop-cut-bg: var(--ap-scoop-surround, var(--ds-color-bg));
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: var(--ds-scoop-radius) var(--ds-scoop-radius) 0 var(--ds-scoop-radius);
  background: var(--ds-color-surface-muted, var(--ds-color-bg-muted));
}

.ap-leader-card .scoop-card-media {
  grid-column: 1;
  grid-row: 1;
  flex: none;
  width: 100%;
  min-height: 0;
  height: 100%;
  align-self: stretch;
  border-radius: 0;
  border-top-left-radius: var(--ds-scoop-radius);
  border-bottom-left-radius: var(--ds-scoop-radius);
  overflow: hidden;
  background: var(--ds-neutral-0, #fff);
}

.ap-leader-card-media {
  aspect-ratio: auto;
  max-height: none;
}

.ap-leader-card .scoop-card-media img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}

.ap-leader-card .scoop-card-media.ap-leader-card-media--placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--ds-color-brand) 18%, var(--ds-neutral-900)) 0%, var(--ds-neutral-900) 55%);
}

.ap-leader-initials{
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: var(--ds-font-weight-semibold);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.92);
}

.ap-leader-card .scoop-card-body.ap-leader-card-body {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: var(--ds-space-4) var(--ds-space-5);
  padding-bottom: calc(var(--ds-space-4) + 20px);
  padding-right: calc(var(--ds-space-5) + 28px);
}

.ap-leader-card .scoop-cutout .scoop-cta {
  pointer-events: none;
  cursor: default;
}

.ap-leader-card-body .scoop-card-title{
  font-size: var(--ds-text-base);
  margin-bottom: var(--ds-space-1);
}

.ap-leader-card-body .scoop-card-desc{
  font-size: var(--ds-text-xs);
  line-height: var(--ds-leading-snug);
}

.ap-leader-card-body .scoop-card-desc + .scoop-card-desc{
  margin-top: var(--ds-space-2);
}

.ap-leader-role {
  margin: 0 0 var(--ds-space-2);
  font-size: 11px;
  font-weight: var(--ds-font-weight-medium);
  color: var(--ds-color-brand);
}

/* Values — bento panel + service-tile scoop cards */

.ap-values-panel {
  --ap-scoop-surround: var(--ds-color-bg-muted, var(--ds-color-surface-muted));
  --scoop-cut-bg: var(--ap-scoop-surround);
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--ds-radius-2xl);
  background: var(--ds-color-bg-muted, var(--ds-color-surface-muted));
  border: 0;
}

.ap-values-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(24px, 4vw, 40px);
  align-items: start;
}

.ap-values-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(4px, 1vw, 8px);
}

.ap-values-title {
  margin: 0 0 var(--ds-space-4);
  max-width: 16ch;
  font-size: clamp(var(--ds-text-xl), 2.4vw, var(--ds-text-3xl));
  line-height: 1.1;
  font-weight: var(--ds-font-weight-semibold);
  letter-spacing: -0.03em;
  color: var(--ds-color-text-strong);
}

.ap-values-lead {
  margin: 0;
  max-width: 38ch;
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-snug);
  color: var(--ds-color-text-muted, var(--ds-neutral-500));
}

.ap-values-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-4);
  align-items: stretch;
}

.ap-value-tile {
  height: 100%;
  min-height: 12.5rem;
  transition: transform var(--ds-duration) var(--ds-ease-out);
}

.ap-value-tile:hover {
  transform: translateY(-3px);
}

.ap-value-tile--featured,
.ap-value-tile.scoop-card--featured {
  background: var(--ds-color-bg);
  box-shadow: inset 3px 0 0 var(--ds-color-brand);
}

.ap-value-tile .scoop-card-body {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  gap: 0;
  flex: 1;
  min-height: 100%;
  padding: var(--ds-space-5);
  padding-bottom: calc(var(--ds-space-5) + 18px);
  padding-right: calc(var(--ds-space-5) + 28px);
}

.ap-value-tile .scoop-card-step {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 var(--ds-space-3);
  font-size: 11px;
  font-weight: var(--ds-font-weight-semibold);
  letter-spacing: 0.1em;
  line-height: 1;
  align-self: end;
}

.ap-value-tile .scoop-card-icon {
  grid-column: 2;
  grid-row: 1;
  width: 40px;
  height: 40px;
  margin: 0 0 var(--ds-space-3);
  align-self: start;
  justify-self: end;
}

.ap-value-tile .scoop-card-icon .icon {
  width: 18px;
  height: 18px;
}

.ap-value-tile .scoop-card-title {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0 0 var(--ds-space-2);
  font-size: var(--ds-text-base);
  line-height: 1.25;
}

.ap-value-tile .scoop-card-desc {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 0;
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-snug);
  color: var(--ds-color-text-muted, var(--ds-neutral-500));
}

.ap-value-tile .scoop-card-outcome {
  grid-column: 1 / -1;
  grid-row: 4;
  margin: var(--ds-space-4) 0 0;
  padding-top: var(--ds-space-3);
  border-top: 1px solid color-mix(in srgb, var(--ds-color-border) 55%, transparent);
  font-size: 10px;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

.ap-value-tile .scoop-cutout .scoop-cta {
  pointer-events: none;
  cursor: default;
}

/* Stats */

.ap-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ds-space-4);
  align-items: stretch;
}

.ap-stats-grid .ap-stat-card {
  height: 100%;
}

.ap-stats-grid .ap-stat-card .scoop-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 120px;
  padding: var(--ds-space-6);
  padding-bottom: calc(var(--ds-space-6) + 20px);
  padding-right: calc(var(--ds-space-6) + 28px);
}

/* CTA */

.ap-cta-card {
  overflow: visible;
}

.ap-cta-card .scoop-card-body {
  display: grid;
  gap: var(--ds-space-3);
  align-content: center;
  max-width: 40rem;
}

.ap-cta-card .scoop-card-body .btn {
  width: fit-content;
  margin-top: var(--ds-space-2);
}

.ap-cta-title {
  color: var(--ds-neutral-0);
  font-size: clamp(var(--ds-text-xl), 2.5vw, var(--ds-text-3xl));
}

.ap-cta-desc {
  color: color-mix(in srgb, var(--ds-neutral-0) 88%, transparent);
}

/* Responsive */

@media (max-width: 991px) {
  .ap-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--ds-space-7);
  }

  .ap-hero-copy .ds-title {
    max-width: none;
  }

  .ap-hero-visual {
    max-width: none;
    width: 100%;
  }

  .ap-hero-card .scoop-card-media {
    max-height: min(320px, 50vw);
  }

  .ap-why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ap-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ap-leaders-grid {
    grid-template-columns: 1fr;
    gap: var(--ds-space-4);
  }

  .ap-leader-card {
    grid-template-columns: 8rem minmax(0, 1fr);
  }

  .ap-values-layout {
    grid-template-columns: 1fr;
  }

  .ap-values-title {
    max-width: none;
  }

  .ap-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .ap-steps,
  .ap-stats-grid,
  .ap-values-grid {
    grid-template-columns: 1fr;
  }

  .ap-why-grid {
    grid-template-columns: 1fr;
  }

  .ap-hero-metrics {
    grid-template-columns: 1fr 1fr;
  }
}

/* Dark mode — scoop cutout backgrounds match section surround */

body.dark.about-page {
  --ap-scoop-surround: var(--ds-color-bg);
}

body.dark .ap-why-card,
body.dark .ap-timeline .ap-step-card {
  --scoop-cut-bg: var(--ap-scoop-surround, var(--ds-color-bg));
  background: var(--ds-color-surface-muted);
  border: 0;
}

body.dark .ap-muted {
  background: var(--ds-color-surface-muted);
}

body.dark .ap-mission,
body.dark .ap-values-panel {
  --ap-scoop-surround: var(--ds-color-surface-muted);
}

body.dark .ap-leader-card .scoop-card-media:not(.ap-leader-card-media--placeholder) {
  background: var(--ds-neutral-0, #fff);
}

body.dark .ap-step-card,
body.dark .ap-stat-card,
body.dark .ap-leader-card,
body.dark .ap-leader-bio-card,
body.dark .ap-leader-photo-card {
  --scoop-cut-bg: var(--ap-scoop-surround, var(--ds-color-bg));
  background: var(--ds-color-surface-muted);
  border: 0;
}

body.dark .ap-hero-card,
body.dark .ap-hero-metric {
  --scoop-cut-bg: var(--ap-scoop-surround, var(--ds-color-bg));
  background: var(--ds-color-surface-muted);
  border: 0;
}

body.dark .ap-values-panel .ap-value-tile {
  --scoop-cut-bg: var(--ap-scoop-surround);
  background: var(--ds-color-bg);
  border: 0;
}

body.dark .ap-mission-card {
  --scoop-cut-bg: var(--ap-scoop-surround, var(--ds-color-bg));
  background: var(--ds-color-surface-muted);
  border: 0;
}

body.dark .ap-cta-card {
  --scoop-cut-bg: var(--ds-color-bg);
  background: var(--ds-color-brand);
  border-color: transparent;
}

body.dark .ap-values-panel {
  background: var(--ds-color-surface-muted);
  border: 0;
}

body.dark .ap-mission {
  background: var(--ds-color-surface-muted);
}

body.dark .ap-value-tile--featured,
body.dark .ap-value-tile.scoop-card--featured {
  background: var(--ds-color-surface-muted);
  box-shadow: inset 3px 0 0 var(--ds-color-brand);
}