/* =====================================================================
   BESSON DESIGN SYSTEM — single source of truth.
   Canonical tokens taken from the homepage (style.css + codex).
   Loaded LAST to normalize service / event / location components to one
   type, spacing, button and card standard. Tune values here only.
   ===================================================================== */
:root {
  /* Eyebrow (надзаголовок) */
  --ds-eyebrow-size: 12px;
  --ds-eyebrow-track: .24em;
  --ds-eyebrow-weight: 360;

  /* Section title (подзаголовок / H2) — equal everywhere */
  --ds-title-size: clamp(24px, 2.6vw, 36px);
  --ds-title-line: 1.02;
  --ds-title-track: .12em;
  --ds-title-weight: 900;

  /* Lead / hero lead */
  --ds-lead-size: clamp(16px, 1.25vw, 20px);
  --ds-lead-line: 1.5;
  --ds-hero-lead-size: clamp(18px, 1.7vw, 23px);
  --ds-hero-lead-line: 1.34;

  /* Cards */
  --ds-card-radius: 18px;
}

/* ---------- 1) WHITE BLOCKS = PURE WHITE ---------- */
body.service-detail-page section[data-theme="light"],
body.service-detail-page .besson-watermark-host--light {
  background: #fff !important;
}

/* ---------- EYEBROWS (надзаголовки) ---------- */
body.service-detail-page .project-eyebrow,
body.service-detail-page .howpath__kicker,
body.service-detail-page .faq-home__kicker {
  font-size: var(--ds-eyebrow-size) !important;
  letter-spacing: var(--ds-eyebrow-track) !important;
  font-weight: var(--ds-eyebrow-weight) !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
}

/* ---------- 7) SECTION TITLES «Что делает» = «Что входит» (equal) ---------- */
body.service-detail-page .service-ai-summary .project-section__title,
body.service-detail-page .service-intro .project-section__title {
  font-size: var(--ds-title-size) !important;
  line-height: var(--ds-title-line) !important;
  letter-spacing: var(--ds-title-track) !important;
  font-weight: var(--ds-title-weight) !important;
  text-align: left !important;
}
body.service-detail-page .service-ai-summary .project-section__title span,
body.service-detail-page .service-intro .project-section__title span {
  display: block !important;
}

/* ---------- 8) Copy aligned with the title (not the eyebrow) ---------- */
@media (min-width: 901px) {
  body.service-detail-page .service-ai-summary .service-intro__copy,
  body.service-detail-page .service-intro .service-intro__copy {
    align-self: start !important;
    padding-top: clamp(24px, 2.4vw, 34px) !important;
  }
}

/* ---------- LEADS / SUBTITLES ---------- */
body.service-detail-page .service-hero__lead {
  font-size: var(--ds-hero-lead-size) !important;
  line-height: var(--ds-hero-lead-line) !important;
}

/* ---------- 4) Form subheading must not exceed the form ---------- */
body.service-detail-page .contact__sub {
  max-width: 46ch;
  overflow-wrap: anywhere;
}

/* ---------- 5) Related cards never empty (dark fallback under image) ---------- */
body.service-detail-page .btl-rel-card {
  background-color: #0b0b0b !important;
}

/* ---------- CARDS ---------- */
body.service-detail-page .service-format-card {
  border-radius: var(--ds-card-radius) !important;
}