/* Secondary pages: an open, left-aligned editorial system in Golos. */
.sp-page,
.service-directory {
  --interior-ink: #111;
  --interior-muted: #555;
  --interior-red: #bc3230;
  --interior-rule: #dedede;
  --interior-step: 2rem;
  --interior-tail: 4rem;
  --section-step: var(--interior-step);
  --section-tail: var(--interior-tail);
  color: var(--interior-muted);
  font-family: "Golos Text", sans-serif;
  text-align: left;
}

.sp-page :is(h1, h2, h3, h4),
.service-directory :is(h1, h2, h3, h4) {
  text-align: left;
}

/* Leave the black PageHero surface and its display treatment intact. */
.sp-page .rhythm-section,
.service-directory .rhythm-section {
  padding-block: var(--interior-step) var(--interior-tail);
  border-top: 1px solid var(--interior-rule);
  border-bottom: 0;
}

.sp-page .rhythm-section > .container,
.sp-page .rhythm-section .band-inner {
  width: 100%;
  max-width: none;
  padding-inline: var(--layout-gutter, 1.25rem);
}

.sp-page .section-label,
.service-directory .section-label {
  margin: 0 0 var(--interior-step);
  color: var(--interior-red);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: left;
}

.sp-page .rhythm-section :is(.subhead, .section-head),
.service-directory .rhythm-section h2 {
  margin: 0 0 var(--interior-step);
  color: var(--interior-ink);
  font-family: "Golos Text", sans-serif;
  font-size: clamp(1.75rem, 4cqi, 3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-align: left;
  text-wrap: balance;
}

/* About page: legible measures, squared details and no floating card treatment. */
body:has(.site-rail) main.sp-about .about-bio {
  display: block;
  margin: 0;
  padding: 0;
}
body:has(.site-rail) main.sp-about .about-bio__inner {
  width: 100%;
  max-width: 68ch;
  margin: 0;
  padding: 0;
}
body:has(.site-rail) main.sp-about .section-head {
  text-align: left;
  font-weight: 400;
}
.sp-about .about-stats {
  gap: 1.5rem 1rem;
  border-color: var(--interior-rule);
  text-align: left;
}

.sp-about .about-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  text-align: left;
}

.sp-about .about-stat__n {
  color: var(--interior-red);
  font-family: "Golos Text", sans-serif;
  font-weight: 400;
}

.sp-about .about-stat__l,
.sp-about .about-company__role {
  max-width: 34ch;
  color: var(--interior-muted);
  font-size: 1rem;
  line-height: 1.55;
  text-align: left;
}

.sp-about .about-bio {
  display: block;
}

.sp-about .about-bio__inner {
  max-width: 68ch;
  margin: 0;
  color: var(--interior-ink);
  font-size: 1.0625rem;
  line-height: 1.75;
  text-align: left;
}

.sp-about .about-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.sp-about .about-card {
  min-width: 0;
  gap: 1.25rem;
  padding: 1.5rem 0;
  border: 0;
  border-top: 1px solid var(--interior-rule);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: var(--interior-ink);
  text-align: left;
}

.sp-about .about-card--dark {
  border-color: var(--interior-ink);
  background: var(--interior-ink);
  color: #fff;
  padding-inline: 1.25rem;
}

.sp-about .about-card__eyebrow {
  color: var(--interior-muted);
  font-size: 0.875rem;
}

.sp-about .about-card__title {
  margin: 0;
  color: var(--interior-ink);
  font-family: "Golos Text", sans-serif;
  font-size: clamp(1.375rem, 2.7cqi, 2rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-align: left;
}

.sp-about .about-card--dark .about-card__title {
  color: #fff;
}

.sp-about .about-card__list li {
  align-items: flex-start;
  padding-block: 1rem;
  border-color: var(--interior-rule);
  color: var(--interior-muted);
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
}

.sp-about .about-card__list li b {
  color: var(--interior-ink);
  font-family: "Golos Text", sans-serif;
  font-size: 1rem;
  font-weight: 500;
}

.sp-about .about-card--dark .about-card__list li,
.sp-about .about-card--dark .about-card__list li b {
  color: #fff;
}

.sp-about .about-card--dark .about-card__list li {
  border-color: rgb(255 255 255 / 24%);
}

.sp-about .about-roles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--interior-rule);
}

.sp-about .about-roles li {
  padding: 1rem 0;
  border: 0;
  border-bottom: 1px solid var(--interior-rule);
  border-radius: 0;
  background: transparent;
  color: var(--interior-ink);
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
}

.sp-about .about-companies {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--interior-rule);
}

.sp-about .about-company {
  min-width: 0;
  padding: 1.25rem 0;
  border: 0;
  border-bottom: 1px solid var(--interior-rule);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  text-align: left;
}

.sp-about .about-company__name {
  margin: 0 0 0.5rem;
  color: var(--interior-ink);
  font-family: "Golos Text", sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
}

/* Services directory: the details read as a clear two-column catalogue. */
.service-directory {
  padding: 0;
  container-type: inline-size;
}

.service-directory__list {
  width: 100%;
}

.service-directory .service-directory__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  padding: var(--interior-step) var(--layout-gutter, 1.25rem) var(--interior-tail);
  border-top: 1px solid var(--interior-rule);
  border-bottom: 0;
  background: #fff;
  scroll-margin-top: 6rem;
  text-align: left;
}

.service-directory .service-directory__name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
  text-align: left;
}

.service-directory .service-directory__name .section-label {
  margin-bottom: var(--interior-step);
}

.service-directory .service-directory__name h2 {
  margin: 0 0 1rem;
  color: var(--interior-ink);
  font-family: "Golos Text", sans-serif;
  font-size: clamp(1.625rem, 3.2cqi, 2.5rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.03em;
  overflow-wrap: break-word;
  text-align: left;
}

.service-directory .service-directory__link {
  min-height: 2.75rem;
  margin: 0;
  color: var(--interior-red);
  font-size: 1rem;
  line-height: 1.4;
  text-align: left;
}

.service-directory .service-directory__description {
  min-width: 0;
  color: var(--interior-muted);
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: break-word;
  text-align: left;
}

.service-directory .service-directory__description p {
  max-width: 68ch;
  margin: 0 0 1.5rem;
}

.service-directory .service-directory__description details {
  max-width: 68ch;
  border-top: 1px solid var(--interior-rule);
}

.service-directory .service-directory__description summary {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding-block: 0.75rem;
  color: var(--interior-ink);
  font-size: 1rem;
  line-height: 1.5;
  cursor: pointer;
  text-align: left;
  justify-content: space-between;
  gap: 1rem;
}
.service-directory .service-directory__description summary::after {
  content: "+";
  color: var(--interior-red);
  font-size: 1.5rem;
  font-weight: 400;
}
.service-directory .service-directory__description details[open] summary::after {
  content: "−";
}

.service-directory .service-directory__description ul {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
  color: var(--interior-muted);
  list-style: disc;
}

.service-directory .service-directory__description li {
  padding-left: 0.25rem;
}

.service-directory .service-directory__description li + li {
  margin-top: 0.75rem;
}

/* The services index is an open catalogue: copy first, artwork alongside, action at the edge. */
.service-directory .service-directory__item {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  padding: 2rem var(--layout-gutter, 1.25rem);
  border: 0;
  border-top: 1px solid #e7e7e7;
  background: #fff;
}

.service-directory .service-directory__head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  min-width: 0;
}

.service-directory .service-directory__name .section-label {
  margin-bottom: 0.75rem;
}

.service-directory .service-directory__name h2 {
  margin-bottom: 0;
  font-size: clamp(1.75rem, 5.2cqi, 3rem);
}

.service-directory .service-directory__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  min-height: 3rem;
  padding: 0.75rem 1.125rem;
  margin: 0;
  background: var(--interior-red);
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  text-align: center;
}

.service-directory .service-directory__link:hover {
  background: #922321;
  text-decoration: none;
}

.service-directory .service-directory__description {
  font-size: 1rem;
}

.service-directory .service-directory__description p {
  margin-bottom: 1.25rem;
}

.service-directory .service-directory__description h3 {
  margin: 0 0 0.75rem;
  color: var(--interior-ink);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
}

.service-directory .service-directory__description ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-directory .service-directory__description li {
  padding: 0.7rem 0;
  border-top: 1px solid #e7e7e7;
  line-height: 1.5;
}

.service-directory .service-directory__description li + li {
  margin-top: 0;
}

.service-directory .service-directory__image {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #080808;
}

.service-directory .service-directory__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.sp-page :is(a, button, summary):focus-visible,
.service-directory :is(a, button, summary):focus-visible {
  outline: 2px solid var(--interior-red);
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .sp-page,
  .service-directory {
    --interior-step: 2.5rem;
    --interior-tail: 6rem;
  }

  .sp-about .about-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }

  .sp-about .about-card {
    padding-block: 1.5rem;
  }

  .sp-about .about-card--dark {
    padding-inline: 1.5rem;
  }

  .sp-about .about-roles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
  }

  .sp-about .about-companies {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
  }

  .service-directory .service-directory__item {
    grid-template-columns: minmax(0, 1.15fr) minmax(13rem, 0.85fr);
    grid-template-areas:
      "head image"
      "description image";
    align-items: start;
    column-gap: clamp(2rem, 5cqi, 5rem);
    row-gap: 1.5rem;
    padding-block: 2.5rem;
  }

  .service-directory .service-directory__head {
    grid-area: head;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .service-directory .service-directory__name {
    flex: 1 1 auto;
  }

  .service-directory .service-directory__name h2 {
    font-size: clamp(1.75rem, 3.4cqi, 2.75rem);
  }

  .service-directory .service-directory__link {
    align-self: flex-end;
  }

  .service-directory .service-directory__description {
    grid-area: description;
  }

  .service-directory .service-directory__image {
    grid-area: image;
    align-self: stretch;
    min-height: 18rem;
    aspect-ratio: auto;
  }

  .service-directory .service-directory__description {
    font-size: 1.125rem;
  }
}

@media (min-width: 1024px) {
  .sp-page,
  .service-directory {
    --interior-step: 3.125rem;
    --interior-tail: 8.125rem;
  }

  .service-directory .service-directory__item {
    padding-block: 3rem;
  }

  .service-directory .service-directory__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .service-directory .service-directory__link {
    flex: 0 0 auto;
    margin-bottom: 0.125rem;
  }

  .service-directory .service-directory__image {
    min-height: 21rem;
  }

  .sp-about .about-roles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 3rem;
  }

  .sp-about .about-companies {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 2rem;
  }
}

/* Situation prompts on service detail pages are useful as a scanable set of cards. */
.service-detail #when .sd-trigger-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}

.service-detail #when .sd-trigger-grid li {
  padding: 1.5rem 0;
  border: 0;
  border-top: 1px solid #d9d9d9;
  background: transparent;
  line-height: 1.55;
}

.service-detail #when .sd-trigger-grid li strong {
  display: block;
  margin-bottom: 0.625rem;
  color: #111;
}

@media (min-width: 768px) {
  .service-detail #when .sd-trigger-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}