/*
   NEUROSERVER — canonical service-detail geometry / M1
   Geometry is intentionally service-specific; typography family and motion
   tokens come from the shared site system.
*/

body.service-detail-template-page {
  --service-detail-page: min(94vw, 3000px);
  --service-detail-section-y: clamp(72px, 6vw, 116px);
  --service-detail-heading-gap: clamp(24px, 2.4vw, 40px);
  --service-detail-column-gap: clamp(36px, 5vw, 96px);
}

body.service-detail-template-page main.service-detail-template {
  overflow: clip;
}

body.service-detail-template-page main.service-detail-template > section > .container,
body.service-detail-template-page main.service-detail-template .catalog-section > .container,
body.service-detail-template-page main.service-detail-template .service-section > .container,
body.service-detail-template-page main.service-detail-template .page-section > .container {
  width: var(--service-detail-page) !important;
  max-width: 3000px !important;
  margin-inline: auto !important;
}

/* Hero geometry remains intact; the shared runtime adds restrained transforms
   to the existing visual. */
body.service-detail-template-page .service-detail-hero.ai-catalog-hero {
  min-height: min(760px, calc(100svh - var(--site-header-height)));
  padding-top: clamp(64px, 6vw, 108px);
  padding-bottom: clamp(68px, 6vw, 108px);
}

body.service-detail-template-page .service-detail-hero .ai-catalog-hero__grid {
  grid-template-columns: minmax(0, .97fr) minmax(560px, 1.03fr);
  gap: clamp(52px, 5vw, 116px);
}

body.service-detail-template-page .service-detail-hero h1 {
  max-width: 17ch;
  color: var(--site-ink);
  font-family: var(--site-display);
  font-size: var(--site-service-h1-size);
  font-weight: var(--site-display-weight);
  letter-spacing: var(--site-display-track);
  line-height: var(--site-display-line);
}

body.service-detail-template-page .service-detail-hero .ai-catalog-hero__copy,
body.service-detail-template-page .service-detail-hero .ai-catalog-hero__content {
  max-width: 980px;
}

body.service-detail-template-page .service-detail-hero .ai-catalog-hero__visual {
  min-height: clamp(420px, 31vw, 620px);
}

/* Canonical section rhythm. */
body.service-detail-template-page :where(
  .service-detail-context,
  .service-detail-sources,
  .service-detail-workflow,
  .service-detail-intake,
  .service-detail-faq,
  .service-detail-final
) {
  padding-top: var(--service-detail-section-y);
  padding-bottom: var(--service-detail-section-y);
}

body.service-detail-template-page .ai-section-head {
  max-width: 1540px;
  margin-bottom: var(--service-detail-heading-gap);
}

body.service-detail-template-page .ai-section-head h2,
body.service-detail-template-page .phase9-split-header h2,
body.service-detail-template-page .service-section__header h2,
body.service-detail-template-page .home-conv-system__head h2,
body.service-detail-template-page .home-conv-section__intro h2 {
  max-width: 19ch;
  color: var(--site-ink);
  font-family: var(--site-display);
  font-size: var(--site-service-h2-size);
  font-weight: var(--site-display-weight);
  letter-spacing: var(--site-display-track);
  line-height: var(--site-display-line);
  text-wrap: balance;
}

body.service-detail-template-page .ai-section-head > p,
body.service-detail-template-page .phase9-split-header > p,
body.service-detail-template-page .service-section__header > p,
body.service-detail-template-page .home-conv-system__head > p,
body.service-detail-template-page .home-conv-section__intro > p {
  max-width: 880px;
  color: var(--site-muted);
  font-family: var(--site-body);
  font-size: var(--site-body-size);
  line-height: 1.55;
}

body.service-detail-template-page .ai-section-head,
body.service-detail-template-page .phase9-split-header,
body.service-detail-template-page .home-conv-system__head,
body.service-detail-template-page .home-conv-section__intro {
  row-gap: clamp(6px, 0.6vw, 10px);
}

body.service-detail-template-page .phase9-split-header,
body.service-detail-template-page .service-section__header {
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  gap: var(--service-detail-column-gap);
  align-items: end;
  margin-bottom: var(--service-detail-heading-gap);
}

body.service-detail-template-page .phase22-eyebrow {
  width: fit-content;
  max-width: 100%;
  justify-self: start;
  align-self: start;
  flex: 0 0 auto;
}

/* Architecture and source path. */
body.service-detail-template-page .service-detail-architecture,
body.service-detail-template-page .service-detail-process {
  width: var(--service-detail-page);
  max-width: 3000px;
  margin-inline: auto;
  padding-top: var(--service-detail-section-y);
  padding-bottom: var(--service-detail-section-y);
}

body.service-detail-template-page .service-detail-architecture .home-conv-system__head {
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
  gap: var(--service-detail-column-gap);
  align-items: end;
  margin-bottom: var(--service-detail-heading-gap);
}

body.service-detail-template-page .service-detail-architecture .home-conv-system__map {
  min-height: 450px;
  padding: clamp(28px, 3vw, 56px);
  gap: clamp(28px, 3vw, 64px);
}

body.service-detail-template-page .service-detail-architecture .home-conv-system__core {
  min-height: 430px;
}

body.service-detail-template-page .service-detail-architecture .home-conv-system__core img {
  width: 125%;
  height: 125%;
}

body.service-detail-template-page .service-detail-sources .service-convergence-diagram {
  display: none;
}

body.service-detail-template-page .service-detail-sources .phase22-route {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border-radius: 16px;
}

body.service-detail-template-page .service-detail-sources .phase22-route-step {
  min-height: 190px;
  padding: clamp(24px, 2.2vw, 38px);
}

/* Working point: three substantial use cases. */
body.service-detail-template-page .service-detail-workflow .service-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.2vw, 22px);
}

body.service-detail-template-page .service-detail-workflow .service-card {
  min-height: 230px;
  padding: clamp(26px, 2vw, 38px);
}

/* Process: preserve the approved 3 + 2 desktop composition. */
body.service-detail-template-page .service-detail-process .home-conv-section__intro {
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  grid-template-areas:
    "kicker copy"
    "title copy";
  gap: 10px var(--service-detail-column-gap);
  align-items: end;
  margin-bottom: var(--service-detail-heading-gap);
}

body.service-detail-template-page .service-detail-process .home-conv-kicker {
  grid-area: kicker;
}

body.service-detail-template-page .service-detail-process h2 {
  grid-area: title;
}

body.service-detail-template-page .service-detail-process .home-conv-section__intro > p {
  grid-area: copy;
  align-self: end;
}

body.service-detail-template-page .service-detail-process .home-conv-route {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--home-line-strong);
}

body.service-detail-template-page .service-detail-process .home-conv-route article {
  grid-column: span 2;
  min-height: 248px;
  padding: 24px 30px 26px;
  border: 1px solid var(--home-line);
  border-top: 0;
}

body.service-detail-template-page .service-detail-process .home-conv-route article + article {
  padding-left: 30px;
}

body.service-detail-template-page .service-detail-process .home-conv-route article:nth-child(4) {
  grid-column: 2 / span 2;
}

body.service-detail-template-page .service-detail-process .home-conv-route article:nth-child(5) {
  grid-column: 4 / span 2;
}

body.service-detail-template-page .service-detail-process .home-conv-route img {
  width: clamp(64px, 4vw, 96px);
  height: clamp(64px, 4vw, 96px);
  margin: 20px 0 18px;
}

body.service-detail-template-page .service-detail-process .home-conv-route h3 {
  max-width: 18ch;
  font-family: var(--site-display);
  font-size: var(--site-service-h3-size);
  font-weight: var(--site-display-weight);
  letter-spacing: var(--site-display-track);
  line-height: 1.04;
}

body.service-detail-template-page .service-detail-process .home-conv-route p {
  max-width: 420px;
  font-family: var(--site-body);
  font-size: clamp(15px, .9vw, 18px);
}

/* Intake: explanation left, 2x2 client inputs right. */
body.service-detail-template-page .service-detail-intake > .container {
  display: grid;
  grid-template-columns: minmax(440px, .82fr) minmax(0, 1.18fr);
  gap: clamp(48px, 6vw, 120px);
  align-items: start;
}

body.service-detail-template-page .service-detail-intake .service-section__header {
  display: block;
  margin: 0;
}

body.service-detail-template-page .service-detail-intake .service-section__header h2 {
  max-width: 16ch;
  margin-top: 0;
}

body.service-detail-template-page .service-detail-intake .service-section__header > p {
  max-width: 600px;
  margin-top: clamp(8px, 0.8vw, 12px);
}

body.service-detail-template-page .service-detail-intake .service-process {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.2vw, 22px);
}

body.service-detail-template-page .service-detail-intake .service-process__step {
  min-height: 210px;
  padding: clamp(24px, 2vw, 34px);
}

body.service-detail-template-page .service-detail-intake .service-process__index {
  margin-bottom: 24px;
}

/* Keep numeric markers centered where the shared service rules make them
   inline labels. */
body.service-detail-template-page :where(
  .service-card__label,
  .service-process__index
) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  align-self: start;
  justify-self: start;
  box-sizing: border-box;
  flex: 0 0 auto;
  line-height: 1;
  text-align: center;
  vertical-align: middle;
}

body.service-detail-template-page :where(
  .phase22-route-step > span,
  .home-conv-route__number
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 2rem;
  height: 2rem;
  line-height: 1;
  text-align: center;
}

/* FAQ: 4 questions in a balanced 2x2 desktop matrix. */
body.service-detail-template-page .service-detail-faq {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

body.service-detail-template-page .service-detail-faq > .container {
  position: relative !important;
  width: var(--service-detail-page) !important;
  max-width: 3000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

body.service-detail-template-page .service-detail-faq .ai-section-head,
body.service-detail-template-page .service-detail-faq .ai-faq-list {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.service-detail-template-page .service-detail-faq .ai-faq-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

/* CTA: preserve the accepted component and its approved wide canvas. */
body.service-detail-template-page .service-detail-final .ai-final-cta {
  width: min(100%, 2400px);
  max-width: 2400px;
  padding: clamp(36px, 3.4vw, 58px);
  gap: clamp(36px, 5vw, 92px);
}

body.service-detail-template-page .service-detail-final .ai-final-cta h2 {
  max-width: 16ch;
  font-family: var(--site-display);
  font-size: clamp(34px, 2.8vw, 56px);
  font-weight: var(--site-display-weight);
  letter-spacing: var(--site-display-track);
  line-height: var(--site-display-line);
}

@media (max-width: 1500px) {
  body.service-detail-template-page {
    --service-detail-page: min(92vw, 1320px);
  }

  body.service-detail-template-page .service-detail-process .home-conv-route {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.service-detail-template-page .service-detail-process .home-conv-route article,
  body.service-detail-template-page .service-detail-process .home-conv-route article:nth-child(4),
  body.service-detail-template-page .service-detail-process .home-conv-route article:nth-child(5) {
    grid-column: auto;
  }

  body.service-detail-template-page .service-detail-process .home-conv-route article:last-child {
    grid-column: 1 / -1;
  }

  body.service-detail-template-page .service-detail-intake > .container {
    grid-template-columns: minmax(340px, .8fr) minmax(0, 1.2fr);
  }
}

@media (max-width: 980px) {
  body.service-detail-template-page {
    --service-detail-page: 92vw;
  }

  body.service-detail-template-page .service-detail-hero.ai-catalog-hero {
    min-height: 0;
    padding-top: 48px;
    padding-bottom: 64px;
  }

  body.service-detail-template-page .service-detail-hero .ai-catalog-hero__grid,
  body.service-detail-template-page .phase9-split-header,
  body.service-detail-template-page .service-section__header,
  body.service-detail-template-page .service-detail-architecture .home-conv-system__head,
  body.service-detail-template-page .service-detail-process .home-conv-section__intro,
  body.service-detail-template-page .service-detail-intake > .container,
  body.service-detail-template-page .service-detail-final .ai-final-cta {
    grid-template-columns: 1fr;
  }

  body.service-detail-template-page .service-detail-process .home-conv-section__intro {
    grid-template-areas:
      "kicker"
      "title"
      "copy";
    gap: 8px;
  }

  body.service-detail-template-page .phase9-split-header {
    row-gap: 14px;
  }

  body.service-detail-template-page .phase9-split-header h2,
  body.service-detail-template-page .service-detail-process .home-conv-section__intro h2 {
    margin-bottom: 0;
  }

  body.service-detail-template-page .service-detail-process .home-conv-section__intro > p {
    margin-top: 8px;
  }

  body.service-detail-template-page .service-detail-workflow .service-grid,
  body.service-detail-template-page .service-detail-sources .phase22-route,
  body.service-detail-template-page .service-detail-intake .service-process,
  body.service-detail-template-page .service-detail-faq .ai-faq-list {
    grid-template-columns: 1fr;
  }

  body.service-detail-template-page .service-detail-architecture .home-conv-system__map {
    min-height: 0;
  }

  body.service-detail-template-page .service-detail-intake > .container {
    grid-template-columns: 1fr;
  }

  body.service-detail-template-page .service-detail-faq > .container {
    width: var(--service-detail-page) !important;
  }
}

@media (max-width: 640px) {
  body.service-detail-template-page {
    --service-detail-page: 88vw;
    --service-detail-section-y: 56px;
  }

  body.service-detail-template-page .service-detail-hero h1 {
    max-width: 15ch;
    font-size: clamp(38px, 11vw, 52px);
  }

  body.service-detail-template-page .ai-section-head h2,
  body.service-detail-template-page .phase9-split-header h2,
  body.service-detail-template-page .service-section__header h2,
  body.service-detail-template-page .home-conv-system__head h2,
  body.service-detail-template-page .home-conv-section__intro h2 {
    font-size: clamp(32px, 9vw, 42px);
  }

  body.service-detail-template-page .service-detail-process .home-conv-route {
    grid-template-columns: 1fr;
  }

  body.service-detail-template-page .service-detail-process .home-conv-route article,
  body.service-detail-template-page .service-detail-process .home-conv-route article:last-child {
    grid-column: auto;
    min-height: 0;
  }
}