/* Services only: Rejouice opening and Buro panels/FAQ, using Home's type roles. */
@media (scripting: enabled) {
  .inner-page--services .inner-header {
    container-type: inline-size;
  }
}
/* Use the available header space, including when the reader enlarges the page. */
@container (width < 1024px) {
  .inner-page--services .inner-nav,
  .inner-page--services .inner-header-cta {
    display: none;
  }
  .inner-page--services .inner-menu-button {
    display: block;
    grid-column: -2;
  }
}
.services-opening {
  min-height: 90svh;
  border-bottom: 1px solid var(--paak-border-on-light);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(340px, 1fr);
  row-gap: var(--paak-lower-row-space);
  align-items: start;
  padding: calc(var(--paak-inner-header-height) + var(--paak-lower-heading-gap))
    var(--paak-lower-gutter) 0;
}
.inner-page--services .services-opening h1 {
  --services-opening-indent: var(--paak-indent-wide);
  width: 100%;
  font-size: var(--paak-type-statement);
  line-height: var(--paak-leading-statement);
  letter-spacing: var(--paak-tracking-statement);
  text-indent: var(--services-opening-indent);
  text-wrap: wrap;
}
.services-opening h1 > span {
  display: inline-block;
  max-width: 100%;
  text-indent: 0;
}
.services-opening h1 > span:first-child {
  max-width: calc(100% - var(--services-opening-indent));
}
.inner-page--services .about-capabilities {
  padding-top: 0;
}
.services-capabilities-intro {
  padding: var(--paak-lower-copy-gap) var(--paak-lower-gutter) 0;
  margin-bottom: calc(
    var(--paak-lower-heading-gap) + var(--paak-lower-copy-gap) +
      var(--paak-lower-row-space)
  );
  align-items: start;
}
.services-capabilities-intro h2 {
  grid-column: 1 / span 5;
}
.services-capabilities-intro p {
  grid-column: 7 / -1;
  max-width: var(--paak-lower-copy-measure);
  font-size: var(--paak-type-body);
  line-height: var(--paak-leading-body);
}
.services-images {
  padding: 0 var(--paak-lower-gutter) var(--paak-lower-section-space);
  align-items: start;
}
.services-image--1 {
  grid-column: 1 / span 8;
}
.services-image--2 {
  grid-column: 9 / span 4;
  margin-top: var(--paak-lower-section-compact);
}
.services-image > img,
.services-image-placeholder {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.services-image--2 > img,
.services-image--2 .services-image-placeholder {
  aspect-ratio: 1400 / 934;
}
.services-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-surface-2, #f5f5f5);
  border: 1px solid var(--paak-border-on-light);
  color: var(--paak-muted-on-light);
  font-size: var(--paak-type-body);
}
.services-image figcaption {
  margin-top: var(--paak-lower-copy-gap);
  font-size: var(--paak-type-body);
}

/* Buro's full-width numbered disclosures, adapted to the shared white Paak system. */
.services-questions {
  padding: 0 var(--paak-lower-gutter) var(--paak-lower-section-space);
}
.services-questions-intro {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--paak-lower-gap);
  align-items: start;
  margin-bottom: var(--paak-lower-heading-gap);
}
.inner-page--services #services-questions-title {
  grid-column: 1 / span 5;
  font-size: var(--paak-type-section);
  line-height: var(--paak-leading-heading);
  letter-spacing: var(--paak-tracking-statement);
}
.services-questions-intro p {
  grid-column: 7 / -1;
  color: var(--paak-surface-dark);
}
.services-questions ol {
  grid-column: 1 / -1;
  list-style: none;
  padding: 0;
}
.services-question {
  border-top: 1px solid var(--paak-border-on-light);
}
.services-question:last-child {
  border-bottom: 1px solid var(--paak-border-on-light);
}
.services-question summary {
  position: relative;
  min-height: 44px;
  padding: var(--paak-lower-copy-gap) 0;
  list-style: none;
  cursor: pointer;
  font-size: var(--paak-type-conversation);
  line-height: var(--paak-leading-emphasis);
  letter-spacing: var(--paak-tracking-emphasis);
}
.services-question summary::-webkit-details-marker {
  display: none;
}
.inner-page--services .services-question h3 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--paak-lower-gap);
  min-width: 0;
  font-size: var(--paak-type-conversation);
  line-height: var(--paak-leading-emphasis);
  letter-spacing: var(--paak-tracking-emphasis);
}
.services-question-number {
  grid-column: 1 / span 3;
  white-space: nowrap;
}
.services-question-title {
  grid-column: 4 / -1;
  min-width: 0;
  padding-right: 44px;
}
.services-question summary::before,
.services-question summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: calc(var(--paak-lower-copy-gap) + 0.55em);
  width: 18px;
  height: 1.5px;
  background: currentColor;
}
.services-question summary::after {
  transform: rotate(90deg);
  transition:
    transform 160ms ease-out,
    opacity 160ms ease-out;
}
.services-question details[open] summary::after {
  transform: rotate(0deg);
  opacity: 0;
}
.services-question summary:hover .services-question-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.services-question-answer {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--paak-lower-gap);
  padding-bottom: var(--paak-lower-row-space);
}
.services-question-answer p {
  grid-column: 4 / span 8;
  min-width: 0;
  max-width: 64ch;
  font-size: var(--paak-type-conversation);
  line-height: var(--paak-leading-emphasis);
  color: var(--paak-surface-dark);
  letter-spacing: var(--paak-tracking-emphasis);
}
@media (prefers-reduced-motion: reduce) {
  .services-question summary::after {
    transition: none;
  }
}
/* Same title, introduction and step roles as the selected Home process. */
.inner-page--services .services-method .inner-label {
  font-size: var(--paak-type-section);
  line-height: var(--paak-leading-heading);
  letter-spacing: var(--paak-tracking-statement);
  grid-column: 1 / span 4;
}
.services-method .inner-detail {
  grid-column: 5 / -1;
}
.inner-page--services .services-method-intro {
  font-size: var(--paak-type-heading);
  line-height: var(--paak-leading-heading);
  letter-spacing: var(--paak-tracking-heading);
  color: var(--paak-surface-dark);
}
.services-method .inner-row {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.services-method .inner-row h3 {
  grid-column: 1 / span 2;
}
.inner-page--services .services-method .inner-row p {
  grid-column: 3 / -1;
  max-width: 42ch;
  color: var(--paak-surface-dark);
}
.inner-page--services .inner-row h3 {
  font-size: var(--paak-type-body);
  line-height: var(--paak-leading-body);
  letter-spacing: var(--paak-tracking-body);
}
@media (width >= 1024px) {
  .inner-page--services {
    --services-home-type-progress: calc((100vw - 1512px) / 1048px);
    --paak-type-section: clamp(
      33px,
      calc(40px + 16px * var(--services-home-type-progress)),
      56px
    );
    --paak-type-feature: var(--paak-type-section);
    --paak-type-heading: clamp(
      22px,
      calc(26px + 8px * var(--services-home-type-progress)),
      34px
    );
    --paak-type-caption: clamp(
      22px,
      calc(23.5px + 6.5px * var(--services-home-type-progress)),
      30px
    );
  }
}
@media (width >= 1651px) {
  .inner-page--services {
    --services-home-composition-scale: calc(100vw / 1651px);
    --paak-type-statement: calc(64px * 100vw / 1512px);
    --paak-type-section: calc(
      42.1221374px * var(--services-home-composition-scale)
    );
    --paak-type-heading: calc(
      27.0610687px * var(--services-home-composition-scale)
    );
    --paak-type-caption: calc(
      24.36211832px * var(--services-home-composition-scale)
    );
  }
}
@media (width < 1024px) and (width >= 768px) {
  .inner-page--services .services-opening h1 {
    --services-opening-indent: calc((100vw - var(--paak-lower-gutter) * 2) / 6);
  }
}
@media (width < 768px) {
  .inner-page--services {
    --paak-type-statement: clamp(28px, 7.69vw, 34px);
  }
  .inner-page--services .services-opening h1 {
    --services-opening-indent: 0px;
  }
  .services-capabilities-intro h2,
  .services-capabilities-intro p {
    grid-column: 1 / -1;
  }
  .services-capabilities-intro {
    row-gap: var(--paak-lower-copy-gap);
  }
  .services-image--1,
  .services-image--2 {
    grid-column: 1 / -1;
  }
  .services-image--2 {
    margin-top: 0;
    width: 75%;
    justify-self: end;
  }
  .services-images {
    row-gap: var(--paak-lower-row-space);
  }
  .services-questions-intro {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    row-gap: var(--paak-lower-copy-gap);
    margin-bottom: var(--paak-lower-row-space);
  }
  .inner-page--services #services-questions-title,
  .services-questions-intro p {
    grid-column: 1 / -1;
  }
  .services-question-number {
    grid-column: 1;
  }
  .services-question-title,
  .services-question-answer p {
    grid-column: 2 / -1;
  }
  .inner-page--services .services-question h3,
  .services-question-answer {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .inner-page--services .services-method .inner-label,
  .services-method .inner-detail {
    grid-column: 1 / -1;
  }
  .services-method .inner-row {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .services-method .inner-row h3,
  .inner-page--services .services-method .inner-row p {
    grid-column: 1 / -1;
  }
}

/* The closing uses Home's separate display role, including wide composition. */
@media (width >= 1024px) {
  .inner-page--services :is(.paak-contact-close, .paak-contact-footer) {
    --paak-type-statement: clamp(
      60px,
      calc(77.6992px + 24.3008px * var(--services-home-type-progress)),
      102px
    );
  }
}
@media (width >= 1651px) {
  .inner-page--services :is(.paak-contact-close, .paak-contact-footer) {
    --paak-type-statement: calc(
      80.92287557px * var(--services-home-composition-scale)
    );
  }
}