/* About / cases: route-scoped finishing layer. Shared covers and CTA stay intact. */
body:has(.site-rail) main:is(.sp-about, .sp-cases) {
  --interior-step: 2rem;
  --interior-tail: 4rem;
  --section-step: var(--interior-step);
  --section-tail: var(--interior-tail);
  --sp-rule: #dedede;
  background: #fff;
}

body:has(.site-rail) main:is(.sp-about, .sp-cases) .rhythm-section {
  margin: 0;
  padding-block: var(--interior-step) var(--interior-tail);
  border-top: 1px solid var(--sp-rule);
  background: #fff;
}

body:has(.site-rail) main:is(.sp-about, .sp-cases) .section-label {
  margin: 0 0 var(--interior-step);
  color: #bc3230;
  font:
    400 1rem/1.4 "Golos Text",
    sans-serif;
}

body:has(.site-rail) main:is(.sp-about, .sp-cases) .rhythm-section :is(.section-head, .subhead) {
  margin: 0 0 var(--interior-step);
  color: #111;
  font:
    400 clamp(1.75rem, 4cqi, 3rem)/1.1 "Golos Text",
    sans-serif;
  letter-spacing: -0.035em;
  text-align: left;
}

body:has(.site-rail) main.sp-about .about-stats {
  margin: 0;
  padding: 0;
  border: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1.25rem;
}

body:has(.site-rail) main.sp-about .about-stat {
  min-width: 0;
  gap: 1rem;
}

body:has(.site-rail) main.sp-about .about-stat__n {
  color: #bc3230;
  font:
    400 clamp(2.25rem, 5cqi, 4rem)/1 "Golos Text",
    sans-serif;
  letter-spacing: -0.04em;
}

body:has(.site-rail) main.sp-about :is(.about-stat__l, .about-company__role) {
  margin: 0;
  color: #555;
  font-size: 1rem;
  line-height: 1.6;
}

body:has(.site-rail) main.sp-about .about-bio__inner {
  max-width: 68ch;
  color: #555;
  font-size: 1.0625rem;
  line-height: 1.7;
}

body:has(.site-rail) main.sp-about .about-bio__inner p + p {
  margin-top: 1.5rem;
}

body:has(.site-rail) main.sp-about :is(.about-roles, .about-companies, .about-grid) {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 2rem;
}

body:has(.site-rail) main.sp-about .about-roles {
  margin: 0;
  padding: 0;
  list-style: none;
}

body:has(.site-rail) main.sp-about .about-roles li {
  padding-block: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.5;
}

body:has(.site-rail) main.sp-about .about-card {
  padding: 1.5rem 0;
  gap: 1.5rem;
  border: 0;
  border-top: 1px solid var(--sp-rule);
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

body:has(.site-rail) main.sp-about .about-card__eyebrow {
  color: #bc3230;
  font-size: 0.875rem;
  line-height: 1.4;
}

body:has(.site-rail) main.sp-about .about-card__title {
  font:
    400 clamp(1.5rem, 2.7cqi, 2rem)/1.2 "Golos Text",
    sans-serif;
  letter-spacing: -0.025em;
}

body:has(.site-rail) main.sp-about .about-card__list li {
  padding-block: 1rem;
  gap: 0.5rem;
}

body:has(.site-rail) main.sp-about .about-card__list li:first-child {
  padding-top: 0;
}

body:has(.site-rail) main.sp-about .about-company {
  padding-block: 1.5rem;
}

body:has(.site-rail) main.sp-cases .cards-2 {
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

body:has(.site-rail) main.sp-cases .case {
  min-width: 0;
  padding: 1.5rem 0 0;
  gap: 1.5rem;
  border: 0;
  border-top: 1px solid var(--sp-rule);
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

body:has(.site-rail) main.sp-cases :is(.case__top, .case__foot) {
  gap: 1.5rem;
}

body:has(.site-rail) main.sp-cases .case__tags {
  gap: 0.5rem;
}

body:has(.site-rail) main.sp-cases .case__tag {
  font-size: 0.875rem;
  padding: 0.375rem 0.625rem;
  line-height: 1.35;
  letter-spacing: 0;
}

body:has(.site-rail) main.sp-cases :is(.case__title, .case--letters__title) {
  margin: 0 0 1rem;
  color: #111;
  font:
    400 clamp(1.5rem, 2.7cqi, 2rem)/1.2 "Golos Text",
    sans-serif;
  letter-spacing: -0.025em;
}

body:has(.site-rail) main.sp-cases :is(.case__desc, .case__result) {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0;
}

body:has(.site-rail) main.sp-cases .case__result {
  color: #111;
}

body:has(.site-rail) main.sp-cases .case__result img {
  margin-top: 0.125rem;
}

body:has(.site-rail) main.sp-cases .case--letters {
  justify-content: flex-start;
  gap: 1.5rem;
}

body:has(.site-rail) main.sp-cases .case--letters__title {
  margin-bottom: 0;
}

body:has(.site-rail) main.sp-cases .case--letters__count {
  margin: 0;
  color: #555;
  font-size: 1rem;
  line-height: 1.5;
}

body:has(.site-rail) main.sp-cases .case--letters__btn {
  min-height: 3rem;
}

body:has(.site-rail) main.sp-cases .case--letters__img,
body:has(.site-rail) main.sp-cases .case--letters__img img {
  border-radius: 0;
}

@media (min-width: 768px) {
  body:has(.site-rail) main:is(.sp-about, .sp-cases) {
    --interior-step: 2.5rem;
    --interior-tail: 6rem;
  }

  body:has(.site-rail) main.sp-about :is(.about-roles, .about-companies, .about-grid),
  body:has(.site-rail) main.sp-cases .cards-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:has(.site-rail) main.sp-cases .cards-2 {
    gap: 3rem 2rem;
  }
}

@media (min-width: 1024px) {
  body:has(.site-rail) main:is(.sp-about, .sp-cases) {
    --interior-step: 3.125rem;
    --interior-tail: 8.125rem;
  }

  body:has(.site-rail) main.sp-about .about-roles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  body:has(.site-rail) main.sp-about :is(.about-stats, .about-companies) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}