/* Separate About statement and Services, scoped to this stage. */
.about-statement, .services-section { position: relative; }
.about-statement::after, .services-section::after {
  content: ""; position: absolute; left: 0; right: 0;
  bottom: calc(-1 * var(--section-gap)); height: var(--section-gap);
  background: #fff; pointer-events: none;
}
.about-statement {
  display: grid;
  grid-template-columns: 322fr 1118fr;
  grid-template-rows: 231px 157px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--section-gap);
}
.about-statement-label { grid-column: 1; grid-row: 1 / 3; padding: 24px var(--gutter); }
.about-statement-title {
  grid-column: 2; grid-row: 1;
  margin: 0; padding: 31px 32px;
  border-left: 1px solid var(--line);
  font-size: 63px; font-weight: 400; line-height: 56px; letter-spacing: -.065em;
}
.about-statement-lead {
  grid-column: 2; grid-row: 2;
  display: flex; align-items: center;
  margin: 0; padding: 28px 32px;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  font-size: 18px; font-weight: 500; line-height: 32px; letter-spacing: -.025em;
}
.about-statement-lead > span { max-width: 700px; }
.services-section {
  display: grid;
  grid-template-columns: 838fr 602fr;
  background: #fff;
  border-top: 1px solid var(--line);
  margin-bottom: var(--section-gap);
}
.services-menu { border: 1px solid var(--line); border-top: 0; padding: 0 0 23px 18px; }
.services-section-label {
  display: flex; align-items: center;
  min-height: 70px; margin: 0;
  font-size: 10px; font-weight: 400; line-height: 16px;
}
.service-choice {
  display: grid; grid-template-columns: 58px minmax(0,1fr) 30px;
  width: 100%; min-height: 108px; padding: 22px 18px 17px 0;
  appearance: none; cursor: pointer;
  border: 0; border-top: 1px solid var(--line);
  background: #fff; text-align: left;
}
.service-choice.is-active { background: var(--paper); }
.service-choice-number { font-family: var(--mono); color: var(--muted); font-size: 10px; line-height: 16px; }
.service-choice-title { display: block; font-size: 40px; font-weight: 400; line-height: 40px; letter-spacing: -.065em; }
.service-choice-summary { display: block; margin-top: 8px; font-size: 12px; line-height: 20px; color: var(--muted); }
.service-choice-arrow { justify-self: end; font-family: var(--mono); font-size: 20px; line-height: 24px; }
.service-choice.is-active .service-choice-arrow { visibility: hidden; }
.service-choice:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
.services-detail { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; padding: 24px; }
.service-detail-content[hidden] { display: none; }
.service-detail-intro { margin: 0; font-size: 17px; line-height: 26px; }
.service-includes-label { margin: 32px 0 16px; font-family: var(--mono); font-size: 18px; font-weight: 500; line-height: 26px; letter-spacing: .03em; text-transform: uppercase; }
.service-includes { margin: 0 0 26px; padding-left: 18px; font-size: 17px; line-height: 30px; }
.service-detail-result { margin: 0; font-size: 18px; font-weight: 500; line-height: 26px; }
.service-detail-title { margin: 0 0 24px; font-size: 40px; font-weight: 400; line-height: 1; letter-spacing: -.055em; }

@media (max-width: 1200px) and (min-width: 901px) {
  .about-statement-title { font-size: clamp(48px,4.45vw,64px); line-height: .9; padding-left: 24px; padding-right: 24px; }
  .about-statement-lead { padding-left: 24px; padding-right: 24px; }
  .service-choice-title { font-size: 34px; line-height: 36px; }
  .service-choice { grid-template-columns: 42px minmax(0,1fr) 24px; }
  .service-detail-intro, .service-includes, .service-detail-result { font-size: 16px; }
}
@media (max-width: 900px) {
  .about-statement { grid-template-columns: 1fr; grid-template-rows: auto; }
  .about-statement-label { grid-column: 1; grid-row: 1; }
  .about-statement-title { grid-column: 1; grid-row: 2; padding: 28px var(--gutter); border-left: 0; border-top: 1px solid var(--line); font-size: clamp(36px,6.2vw,56px); line-height: .95; }
  .about-statement-lead { grid-column: 1; grid-row: 3; padding: 32px var(--gutter); border-left: 0; }
  .services-section { grid-template-columns: 1fr; }
  .services-menu { padding-left: var(--gutter); }
  .service-choice { grid-template-columns: 44px minmax(0,1fr) 24px; }
  .service-choice-title { font-size: clamp(28px,5.5vw,40px); line-height: 1.05; }
  .services-detail { padding: 32px var(--gutter); min-height: 260px; }
  .service-includes-label { font-size: 18px; }
}
@media (max-width: 480px) {
  .about-statement-title { font-size: 36px; }
  .about-statement-title br { display: none; }
  .about-statement-lead, .service-detail-intro, .service-includes, .service-detail-result { font-size: 16px; line-height: 26px; }
  .service-choice { padding-right: var(--gutter); }
  .service-choice-summary { font-size: 12px; line-height: 18px; }
}

/* Match the selected service's measured type and list positions on desktop. */
@media (min-width: 1051px) {
  .services-detail { padding-bottom: 19.5px; }
  .service-detail-result { max-width: 530px; font-size: 17.15px; line-height: 27.5px; }
  .service-includes-label, .service-includes { position: relative; top: -5px; }
  .service-includes li { position: relative; }
  .service-includes li::marker { color: transparent; }
  .service-includes li::before {
    content: ""; position: absolute; left: -17px; top: 11px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--ink);
  }
}