/* Service detail pages only. Load before layout-spacing.css.
   The shared type, spacing and glass-surface tokens remain the design contract. */
.service-detail {
  --service-detail-header-height: 4rem;
  --service-detail-nav-height: 4rem;
  --service-detail-border: var(--layout-divider-color);
  --service-detail-card-gap: var(--layout-grid-gap);
  color: var(--site-ink);
}

.service-detail :is(.service-detail-hero-copy, .service-detail-section-head,
  .service-issue-card, .service-support-card, .service-scope-row,
  .service-project-flow > li, .service-case-copy) {
  min-inline-size: 0;
}

.service-detail :is(h1, h2, h3) {
  font-weight: var(--type-heading-weight);
  color: var(--site-ink);
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}

.service-detail .eyebrow {
  margin: 0 0 var(--layout-label-gap);
  font-size: var(--type-eyebrow-size);
  font-weight: 700;
  line-height: var(--type-eyebrow-leading);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--site-label);
}

.service-detail .service-detail-hero {
  padding-block: clamp(1.75rem, 3vw, 3rem) var(--layout-section-space);
}

.service-detail .service-detail-hero .breadcrumb {
  margin: 0 0 clamp(3rem, 6.5vw, 6rem);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

.service-detail .service-detail-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(15rem, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.service-detail .service-detail-hero-copy h1 {
  --service-detail-title-size: clamp(2.25rem, calc(1.45rem + 3.2vw), 4.75rem);
  max-inline-size: 15em;
  margin: 0;
  font-size: var(--service-detail-title-size);
  line-height: 1.3;
  letter-spacing: var(--type-heading-tracking);
  text-wrap: balance;
}

.service-detail .service-detail-tagline {
  max-inline-size: 34em;
  margin: 2rem 0 0;
  font-size: clamp(1.125rem, calc(1rem + .4vw), 1.375rem);
  font-weight: var(--type-body-strong-weight);
  line-height: 1.8;
  letter-spacing: var(--type-body-tracking);
  color: var(--site-ink);
  text-wrap: pretty;
}

.service-detail .service-detail-summary {
  max-inline-size: 42em;
  margin: var(--layout-copy-gap) 0 0;
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
  letter-spacing: var(--type-body-tracking);
  color: var(--site-copy);
  text-wrap: pretty;
}

.service-detail .service-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2rem;
}

.service-detail .service-detail-hero-art {
  display: grid;
  place-items: center;
  min-inline-size: 0;
  align-self: center;
}

.service-detail .service-detail-hero-copy { container-type: inline-size; }

.service-detail .service-detail-hero-art img {
  display: block;
  inline-size: min(100%, 24rem);
  block-size: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

/* An editorial variant of compact navigation: ink, space and one current dot.
   At large reading sizes only this inner row can scroll horizontally. */
.service-detail .service-detail-nav {
  position: sticky;
  inset-block-start: var(--service-detail-header-height);
  z-index: 8;
  border-block: 0;
  border-block-end: 1px solid var(--service-detail-border);
  background: var(--surface-section-paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color var(--interaction-compact-duration) var(--interaction-ease);
}

.service-detail .service-detail-nav.is-stuck {
  background: var(--surface-card-readable-background);
}

.service-detail .service-detail-nav > .wrap {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: #b8c2bb transparent;
  scroll-padding-inline: .375rem;
}

.service-detail .service-detail-nav ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(.25rem, 1vw, 1rem);
  inline-size: 100%;
  min-inline-size: max-content;
  min-block-size: var(--service-detail-nav-height);
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-detail .service-detail-nav li {
  display: flex;
  align-items: stretch;
  flex: 1 0 auto;
}

.service-detail .service-detail-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2.75rem;
  inline-size: 100%;
  padding: .625rem clamp(.375rem, 1vw, 1rem);
  border: 0;
  border-radius: 0;
  background-color: transparent;
  font-size: var(--type-body-small-size);
  font-weight: var(--type-subheading-weight);
  line-height: 1.6;
  color: var(--site-copy);
  white-space: nowrap;
  cursor: pointer;
}

.service-detail .service-detail-nav a:is([aria-current="location"], :focus-visible, :active) {
  color: var(--site-ink);
}

.service-detail .service-detail-nav-label {
  position: relative;
}

.service-detail .service-detail-nav-label::before {
  content: "";
  position: absolute;
  inset-inline-start: -.375rem;
  inset-block-start: calc(50% - 1.5px);
  inline-size: 3px;
  block-size: 3px;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--interaction-compact-duration) var(--interaction-ease);
}

.service-detail .service-detail-nav a[aria-current="location"] .service-detail-nav-label::before {
  opacity: 1;
}

.service-detail .service-detail-nav a:focus-visible {
  outline: 2px solid var(--interaction-focus-color);
  outline-offset: -2px;
}

.service-detail .service-detail-section {
  padding-block: var(--layout-section-space);
  scroll-margin-block-start: calc(var(--service-detail-header-height) + var(--service-detail-nav-offset, var(--service-detail-nav-height)) + 1.5rem);
}

.service-detail .service-detail-section-head {
  max-inline-size: 58rem;
  margin-bottom: var(--layout-heading-gap);
}

.service-detail .service-detail-section-head h2 {
  margin: 0;
  font-size: var(--type-section-heading-size);
  line-height: 1.35;
  letter-spacing: var(--type-heading-tracking);
  text-wrap: balance;
}

.service-detail .service-detail-section-head > p:not(.eyebrow),
.service-detail .service-detail-intro p {
  max-inline-size: 48em;
  margin: var(--layout-copy-gap) 0 0;
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
  color: var(--site-copy);
  text-wrap: pretty;
}

.service-detail .service-detail-intro {
  max-inline-size: 48rem;
  margin: 0 0 var(--layout-heading-gap);
}

.service-detail .service-detail-intro p:first-child { margin-top: 0; }

/* Company examples follow the issue cards as a quiet editorial reading group. */
.service-detail .service-audience {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--layout-copy-gap);
  margin-block-start: var(--layout-heading-gap);
  padding-block-start: var(--layout-grid-row-gap);
  border-block-start: 1px solid var(--service-detail-border);
}

.service-detail :is(.service-audience-lead, .service-audience-examples) {
  min-inline-size: 0;
}

.service-detail :is(.service-audience-lead, .service-audience-examples li p) {
  min-inline-size: 0;
  margin: 0;
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
  letter-spacing: var(--type-body-tracking);
  color: var(--site-copy);
  overflow-wrap: anywhere;
  line-break: strict;
  text-wrap: pretty;
}

.service-detail .service-audience-lead { max-inline-size: 48em; }

.service-detail .service-audience-examples h3 {
  margin: 0 0 var(--layout-paragraph-gap);
  font-size: var(--type-step-heading-size);
  line-height: 1.65;
  letter-spacing: var(--type-heading-tracking);
}

.service-detail .service-audience-examples ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-detail .service-audience-examples li {
  display: grid;
  grid-template-columns: 2ch minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--layout-label-gap);
  min-inline-size: 0;
  padding-block: var(--layout-paragraph-gap);
  border-block-start: 1px solid var(--service-detail-border);
}

.service-detail .service-audience-examples li:last-child {
  border-block-end: 1px solid var(--service-detail-border);
}

.service-detail .service-audience-number {
  font-size: var(--type-body-small-size);
  font-weight: var(--type-subheading-weight);
  line-height: var(--type-body-small-leading);
  font-variant-numeric: tabular-nums;
  color: var(--site-blue);
}

@media (min-width: 1100px) {
  .service-detail .service-audience {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    column-gap: var(--layout-heading-gap);
  }
}

.service-detail :is(.service-issues-grid, .service-detail-support-grid, .service-case-grid) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--service-detail-card-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-detail :is(.service-issue-card, .service-support-card) {
  position: relative;
  margin: 0;
  padding: var(--layout-card-block) var(--layout-card-inline);
  border: var(--surface-card-border);
  border-radius: var(--surface-card-radius);
  background: var(--surface-card-readable-background);
  box-shadow: var(--surface-card-shadow);
}

.service-detail :is(.service-issue-card, .service-support-card) h3 {
  margin: 0 0 var(--layout-copy-gap);
  font-size: var(--type-step-heading-size);
  line-height: 1.65;
  letter-spacing: var(--type-heading-tracking);
  text-wrap: pretty;
}

.service-detail :is(.service-issue-card, .service-support-card) > p {
  margin: 0;
  font-size: var(--type-body-small-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-small-leading);
  color: var(--site-copy);
}

/* Connect each issue to the existing support themes without repeating their copy. */
.service-detail .service-issue-solutions {
  margin-block-start: var(--layout-copy-gap);
  padding-block-start: var(--layout-paragraph-gap);
  border-block-start: 1px solid var(--service-detail-border);
  color: var(--site-copy);
  font-size: var(--type-body-small-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-small-leading);
  letter-spacing: var(--type-body-tracking);
}

.service-detail .service-issue-solutions-label {
  margin: 0 0 .5rem;
  font: inherit;
  font-weight: var(--type-body-strong-weight);
}

.service-detail .service-issue-solutions ul {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-detail .service-issue-solutions li {
  display: flex;
  align-items: baseline;
  gap: .5em;
  min-inline-size: 0;
  overflow-wrap: anywhere;
  line-break: strict;
  text-wrap: pretty;
}

.service-detail .service-issue-solutions li > span:last-child {
  min-inline-size: 0;
}

.service-detail .service-issue-solution-marker {
  flex: none;
  font-family: var(--font-latin), var(--font-japanese);
}

/* Support themes use the same quiet glass surface as the shared site cards. */
.service-detail .service-scope-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--service-detail-card-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-detail .service-scope-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--layout-paragraph-gap);
  padding: var(--layout-compact-card-block) var(--layout-compact-card-inline);
  border: var(--surface-card-border);
  border-radius: var(--surface-card-radius);
  background: var(--surface-card-readable-background);
  box-shadow: var(--surface-card-shadow);
}

.service-detail .service-scope-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--layout-paragraph-gap);
  inline-size: 100%;
  min-inline-size: 0;
  margin-bottom: .5rem;
}

.service-detail .service-scope-number {
  flex: none;
  font-family: var(--font-latin), var(--font-japanese);
  font-size: var(--type-card-heading-size);
  font-weight: var(--type-body-weight);
  line-height: 1;
  letter-spacing: var(--type-heading-tracking);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--site-copy);
}

.service-detail .service-scope-icon {
  flex: none;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  margin-bottom: 0;
  color: var(--site-ink);
}

.service-detail .service-scope-icon * {
  vector-effect: non-scaling-stroke;
}

.service-detail .service-scope-row h3 {
  max-inline-size: 100%;
  margin: 0;
  font-size: var(--type-step-heading-size);
  line-height: 1.65;
  text-wrap: pretty;
}

.service-detail .service-scope-row p {
  max-inline-size: 100%;
  margin: 0;
  font-size: var(--type-body-small-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-small-leading);
  color: var(--site-copy);
  overflow-wrap: anywhere;
}

@media (min-width: 700px) {
  .service-detail .service-scope-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .service-detail .service-scope-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.service-detail .service-deliverables {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
  gap: 1.5rem clamp(2rem, 6vw, 6rem);
  margin-top: var(--layout-copy-gap);
  padding: var(--layout-card-block) var(--layout-card-inline);
  border: var(--surface-card-border);
  border-radius: var(--surface-card-radius);
  background: var(--surface-card-readable-background);
  box-shadow: var(--surface-card-shadow);
}

.service-detail .service-deliverables h3 {
  margin: 0;
  font-size: var(--type-body-size);
  line-height: 1.8;
}

.service-detail .service-deliverables ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .625rem 1.75rem;
  margin: 0;
  padding-inline-start: 1.1em;
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-leading);
  color: var(--site-copy);
}

.service-detail .service-deliverables li { padding-inline-start: .15em; }

.service-detail .service-project-flow {
  --service-project-node-size: 7rem;
  --service-project-column-gap: var(--layout-grid-row-gap);
  --service-project-row-gap: calc(var(--layout-grid-gap) * 2);
  --service-project-line-color: var(--layout-divider-color);
  --service-project-line-clearance: .5rem;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: 0 var(--service-project-column-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-detail #process .service-detail-section-head {
  margin-block-end: var(--layout-group-gap);
}

.service-detail .service-project-phase {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--layout-grid-gap);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
}

.service-detail .service-project-phase:nth-child(1) { --service-project-tint: 240 194 162; }
.service-detail .service-project-phase:nth-child(2) { --service-project-tint: 236 175 172; }
.service-detail .service-project-phase:nth-child(3) { --service-project-tint: 198 187 225; }
.service-detail .service-project-phase:nth-child(4) { --service-project-tint: 165 194 227; }
.service-detail .service-project-phase:nth-child(5) { --service-project-tint: 174 213 201; }

/* Each line runs only between adjacent circles; the last phase has no connector. */
.service-detail .service-project-phase:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--service-project-node-size) / 2 - .5px);
  inset-inline-start: calc(50% + var(--service-project-node-size) / 2 + var(--service-project-line-clearance));
  inline-size: calc(100% + var(--service-project-column-gap) - var(--service-project-node-size) - 2 * var(--service-project-line-clearance));
  block-size: 1px;
  background: var(--service-project-line-color);
  pointer-events: none;
}

.service-detail .service-project-phase:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--service-project-node-size) / 2);
  inset-inline-start: calc(150% + var(--service-project-column-gap) - var(--service-project-node-size) / 2 - var(--service-project-line-clearance));
  inline-size: .375rem;
  block-size: .375rem;
  background: var(--service-project-line-color);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 25% 50%);
  transform: translate(-100%, -50%);
  pointer-events: none;
}

.service-detail .service-project-node {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--service-project-node-size);
  block-size: var(--service-project-node-size);
  color: var(--site-ink);
}

.service-detail .service-project-node::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgb(var(--service-project-tint) / .72) 0%,
    rgb(var(--service-project-tint) / .52) 48%,
    rgb(var(--service-project-tint) / .12) 69%,
    rgb(var(--service-project-tint) / 0) 78%);
  filter: blur(.375rem);
  pointer-events: none;
}

.service-detail .service-project-step {
  position: absolute;
  inset-block-start: .375rem;
  inset-inline: 0;
  z-index: 1;
  margin: 0;
  font-family: var(--font-latin), var(--font-japanese);
  font-size: var(--type-caption-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--site-label);
  text-align: center;
}

.service-detail .service-project-icon {
  position: relative;
  z-index: 1;
  display: block;
  inline-size: 4rem;
  block-size: 4rem;
  margin-block-start: .5rem;
  overflow: visible;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-detail .service-project-icon * { vector-effect: non-scaling-stroke; }

.service-detail .service-project-copy {
  min-inline-size: 0;
  inline-size: 100%;
  max-inline-size: 20rem;
}

.service-detail .service-project-copy h3 {
  /* Two lines give the horizontal columns a shared reading start. Longer
     headings can still grow; the vertical layout does not reserve this space. */
  min-block-size: 3.3em;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.65;
  text-wrap: pretty;
}

.service-detail .service-project-copy p {
  margin: var(--layout-paragraph-gap) 0 0;
  font-size: var(--type-body-small-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-small-leading);
  color: var(--site-copy);
  text-wrap: pretty;
}

.service-detail .service-project-copy .service-project-output {
  margin-block-start: var(--layout-copy-gap);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  color: var(--site-label);
}

.service-detail .service-case-grid[data-count="1"] {
  grid-template-columns: minmax(0, 1fr);
  max-inline-size: 36rem;
}

.service-detail .service-case-grid[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-inline-size: 56rem;
}

/* A single relevant case becomes a composed feature, rather than a spare card. */
@media (min-width: 700px) {
  .service-detail .service-case-grid[data-count="1"] {
    max-inline-size: none;
  }

  .service-detail .service-case-grid[data-count="1"] .service-case-card {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--layout-heading-gap);
    block-size: auto;
  }

  .service-detail .service-case-grid[data-count="1"] .service-case-copy {
    padding-block: 0;
  }
}

.service-detail .service-case-grid > article { min-inline-size: 0; }

.service-detail .service-case-card {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  border-radius: var(--surface-card-radius);
  color: var(--site-ink);
}

.service-detail .service-case-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(40, 35, 44, .05);
  border-radius: var(--surface-card-radius);
  background: #fff;
}

.service-detail .service-case-media img {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  padding: clamp(20px, 5%, 40px);
  object-fit: contain;
}

.service-detail .service-case-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding-block: var(--layout-copy-gap) .5rem;
}

.service-detail .service-case-copy .eyebrow {
  margin-bottom: .75rem;
  font-size: var(--type-caption-size);
  overflow-wrap: anywhere;
}

.service-detail .service-case-copy h3 {
  margin: 0 0 1rem;
  font-size: var(--type-step-heading-size);
  line-height: 1.6;
  text-wrap: pretty;
}

.service-detail .service-case-copy > p:not(.eyebrow) {
  margin: 0;
  font-size: var(--type-body-small-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-small-leading);
  color: var(--site-copy);
}

.service-detail .faq-list {
  max-inline-size: 58rem;
  border-color: var(--service-detail-border);
}

.service-detail .faq-list details { border-color: var(--service-detail-border); }

.interior-theme .service-detail .faq-list summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--layout-label-gap);
  min-block-size: 2.75rem;
  padding-block: 1.5rem;
  padding-inline: 0;
  list-style: none;
  font-size: var(--type-body-size);
  font-weight: var(--type-subheading-weight);
  line-height: 1.8;
  color: var(--site-ink);
}

.service-detail .service-faq-question::-webkit-details-marker { display: none; }
.service-detail .service-faq-question::marker { content: ""; }
.service-detail .service-faq-label {
  min-inline-size: 0;
  flex: 1;
  overflow-wrap: anywhere;
  line-break: strict;
}
.service-detail .service-faq-toggle {
  position: relative;
  flex: 0 0 1.125rem;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin-block-start: .35em;
  color: var(--site-label);
}
.service-detail .service-faq-toggle::before,
.service-detail .service-faq-toggle::after {
  content: "";
  position: absolute;
  inset-inline: .125rem;
  inset-block-start: calc(50% - .5px);
  block-size: 1px;
  border-radius: 1px;
  background: currentColor;
  pointer-events: none;
}
.service-detail .service-faq-toggle::after {
  transform: rotate(90deg);
  transition: transform var(--interaction-compact-duration) var(--interaction-ease),
    opacity var(--interaction-compact-duration) var(--interaction-ease);
}
.service-detail details[open] > .service-faq-question .service-faq-toggle::after {
  transform: rotate(0);
  opacity: 0;
}
.service-detail .service-faq-question:focus-visible {
  outline: 2px solid var(--interaction-focus-color);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .service-detail .service-faq-toggle::after { transition: none; }
}

.service-detail .faq-list details p {
  max-inline-size: 48rem;
  padding-bottom: 1.5rem;
  font-size: var(--type-body-small-size);
  font-weight: 400;
  line-height: var(--type-body-small-leading);
  color: var(--site-copy);
}

.service-detail .service-detail-contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  justify-items: start;
  gap: var(--layout-grid-gap);
  padding: var(--layout-card-block) var(--layout-card-inline);
  border: var(--surface-card-border);
  border-radius: var(--surface-card-radius);
  background: var(--surface-card-readable-background);
  box-shadow: var(--surface-card-shadow);
}

.service-detail .service-detail-contact-inner > div {
  inline-size: 100%;
  min-inline-size: 0;
}

.service-detail .service-detail-contact-inner h2 {
  max-inline-size: 20em;
  margin: 0;
  font-size: clamp(1.75rem, calc(1.2rem + 1.5vw), 3rem);
  line-height: 1.5;
  text-wrap: balance;
}

.service-detail .service-detail-contact-inner p:not(.eyebrow) {
  margin: var(--layout-copy-gap) 0 0;
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  color: var(--site-copy);
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
  text-wrap: pretty;
}

.service-detail .service-detail-contact-inner > a {
  justify-self: start;
  max-inline-size: 100%;
}

/* Button surfaces and motion use the same shared interaction as the TOP hero. */
.service-detail .button.dark {
  min-block-size: 3.125rem;
  padding: .875rem 1.75rem;
  font-size: var(--type-body-small-size);
  font-weight: 700;
  line-height: 1.65;
  text-align: center;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .service-detail :is(.service-issue-card, .service-support-card, .service-scope-row,
    .service-deliverables, .service-detail-contact-inner) {
    background: var(--surface-card-background);
    -webkit-backdrop-filter: var(--surface-card-filter);
    backdrop-filter: var(--surface-card-filter);
  }

  .service-detail .service-detail-nav.is-stuck {
    background: rgba(249, 251, 249, .8);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
  }
}

/* Contrast the issue cards with a reading layout for the support itself. */
.service-detail .service-detail-support-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--service-detail-border);
}

.service-detail .service-support-card {
  padding: var(--layout-copy-gap) 0;
  border: 0;
  border-bottom: 1px solid var(--service-detail-border);
  border-radius: 0;
  background: transparent;
  box-shadow: var(--shadow-level-0);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.service-detail .service-support-card h3 {
  margin-bottom: var(--layout-paragraph-gap);
}

.service-detail .service-deliverables {
  margin-top: var(--layout-heading-gap);
}

@media (min-width: 1100px) {
  .service-detail :is(#support, #questions) > .wrap {
    display: grid;
    grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
    align-items: start;
    gap: var(--layout-heading-gap);
  }

  .service-detail :is(#support, #questions) .service-detail-section-head {
    margin-bottom: 0;
  }
}

@media (max-width: 1099px) {
  .service-detail :is(.service-issues-grid, .service-case-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-detail .service-issues-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .service-detail .service-issue-card {
    padding: var(--layout-compact-card-block) var(--layout-compact-card-inline);
  }
}

/* Five readable columns need the full wide-screen wrap; narrower screens
   keep the sequence vertical, with the inter-stage space inside each line. */
@media (max-width: 1439px) {
  .service-detail .service-project-flow {
    --service-project-node-size: 5rem;
    --service-project-column-gap: var(--layout-grid-gap);
    grid-template-columns: minmax(0, 1fr);
    max-inline-size: 60rem;
    gap: 0;
  }

  .service-detail .service-project-phase {
    display: grid;
    grid-template-columns: var(--service-project-node-size) minmax(0, 1fr);
    align-items: start;
    gap: 0 var(--service-project-column-gap);
    padding-block-end: var(--service-project-row-gap);
  }

  .service-detail .service-project-phase:not(:last-child)::before {
    inset-block-start: calc(var(--service-project-node-size) + var(--service-project-line-clearance));
    inset-block-end: var(--service-project-line-clearance);
    inset-inline-start: calc(var(--service-project-node-size) / 2 - .5px);
    inline-size: 1px;
    block-size: auto;
  }

  .service-detail .service-project-phase:not(:last-child)::after {
    inset-block-start: auto;
    inset-block-end: var(--service-project-line-clearance);
    inset-inline-start: calc(var(--service-project-node-size) / 2);
    clip-path: polygon(0 0, 50% 100%, 100% 0, 50% 25%);
    transform: translateX(-50%);
  }

  .service-detail .service-project-phase:last-child { padding-block-end: 0; }

  .service-detail .service-project-copy {
    max-inline-size: 40rem;
    padding-block-start: .375rem;
  }

  .service-detail .service-project-copy h3 {
    min-block-size: 0;
  }

  .service-detail .service-project-icon {
    inline-size: 3rem;
    block-size: 3rem;
  }
}

@media (min-width: 700px) and (max-width: 1099px) {
  .service-detail .service-case-grid[data-count="3"] > article:last-child {
    grid-column: 1 / -1;
    inline-size: calc((100% - var(--service-detail-card-gap)) / 2);
    justify-self: center;
  }
}

@media (max-width: 900px) {
  .service-detail { --service-detail-header-height: 3.5rem; }

  .service-detail .service-detail-hero-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(11rem, 1fr);
    gap: 1.5rem;
  }

  .service-detail .service-detail-hero-copy h1 { --service-detail-title-size: clamp(2.25rem, 4.8vw, 3rem); }

}

@media (max-width: 699px) {
  .service-detail { --service-detail-nav-height: 3.5rem; }

  .service-detail .service-detail-hero { padding-top: 1.5rem; }
  .service-detail .service-detail-hero .breadcrumb { margin-bottom: 2.75rem; }

  .service-detail .service-detail-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }

  .service-detail .service-detail-hero-copy h1 { --service-detail-title-size: clamp(2rem, 7.6vw, 3rem); }
  .service-detail .service-detail-tagline { margin-top: 1.5rem; }
  .service-detail .service-detail-actions { gap: .75rem 1.25rem; }

  .service-detail .service-detail-hero-art img { inline-size: min(72%, 14rem); }
  .service-detail .service-detail-nav ul { gap: .25rem; }
  .service-detail .service-detail-nav a { padding-inline: .375rem; }

  .service-detail :is(.service-issues-grid, .service-detail-support-grid,
    .service-case-grid, .service-case-grid[data-count="2"],
    .service-deliverables) {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-detail .service-issues-grid > :last-child:nth-child(odd) {
    grid-column: auto;
  }

  .service-detail :is(.service-issue-card, .service-scope-row,
    .service-deliverables, .service-detail-contact-inner) {
    border-radius: var(--surface-card-radius-small);
  }

  .service-detail .service-issue-card h3 { margin-bottom: 1rem; }
  .service-detail .service-deliverables { gap: 1rem; }
  .service-detail .service-deliverables ul { grid-template-columns: minmax(0, 1fr); }
  .service-detail .service-project-flow {
    --service-project-node-size: 4rem;
    --service-project-column-gap: var(--layout-grid-gap);
  }
  .service-detail .service-project-step { inset-block-start: .125rem; }
  .service-detail .service-project-icon { inline-size: 2.5rem; block-size: 2.5rem; }
  .service-detail .service-project-copy { padding-block-start: 0; }
  .service-detail .service-case-grid { gap: 2.5rem; }
  .service-detail .service-case-media { border-radius: var(--surface-card-radius-small); }
  .service-detail .service-case-copy { padding-bottom: 0; }
}

@supports (font-size: 1cqi) {
  .service-detail .service-detail-hero-copy h1 {
    font-size: min(var(--service-detail-title-size), calc(100cqi / var(--heading-unit-em, 1)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-detail .service-detail-nav { transition: none; }
  .service-detail .service-detail-nav-label::before { transition: none; }
}