/* Giant Entity: the prose pages (look-v3 sections 9, 12 and 13, Part B). Breadcrumbs, the doc
   layout (text in columns 1 to 7, the page's drawing sticky at 9 to 12 from 1100 px), the section
   compositions (steps, what you get, what to bring, an example, the work, the people, the
   promises, the shapes, the symptom pair), the services index and cards, the closing band, and the
   Questions accordion. The plain frame (.page-head, .page-section) is still used by the pages
   Part C has not recomposed yet. */

/* ---------- Breadcrumbs: small, slate, caret separators, 24 px targets ---------- */

.crumbs { padding-top: var(--sp-s); }
.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5em;
  list-style: none;
  padding: 0;
  font-size: var(--fs-small);
  color: var(--fg-muted);
}
.crumbs__list > li { display: inline-flex; align-items: center; gap: 0.5em; min-height: 1.5rem; }
.crumbs__list > li + li::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  background: currentColor;
  mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"%3E%3Cpath d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/%3E%3C/svg%3E') center / contain no-repeat;
}
.crumbs a { display: inline-flex; align-items: center; min-height: 1.5rem; color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.crumbs [aria-current] { color: var(--fg); }

/* ---------- The plain frame (pages not yet recomposed) ---------- */

.page-head { display: grid; gap: var(--sp-m); padding-block: var(--sp-l) var(--sp-xl); }
.page-head__title { max-width: 18ch; text-wrap: balance; overflow-wrap: break-word; }
.page-head__lede { font-size: var(--fs-lead); line-height: 1.4; max-width: 56ch; }

.page-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-m);
  padding-block: var(--sp-l);
}
.page-section > * { grid-column: 1 / -1; min-width: 0; }
.page-section__title { max-width: 24ch; text-wrap: balance; }
@media (min-width: 1100px) {
  .page-section__title { grid-column: 1 / span 10; }
  .page-section__body { grid-column: 4 / span 8; }
}
.prose h3 { margin-top: 1.8em; }
.prose h3 + * { margin-top: 0.5em; }
.prose li + li { margin-top: 0.45em; }
.prose > .actions,
.prose > p:has(> .link-cta:only-child) { margin-top: var(--sp-m); }
.prose ul.link-list { display: flex; flex-wrap: wrap; gap: 0.2em 1.25em; list-style: none; padding: 0; }
.prose ul.link-list li + li { margin-top: 0; }
.link-list a { display: inline-flex; align-items: center; min-height: 1.5rem; }
.page-section--close {
  margin-top: var(--sp-l);
  padding-block: var(--sp-xl);
  background: var(--surface);
  box-shadow: 0 0 0 100vmax var(--surface);
  clip-path: inset(0 -100vmax);
}

/* ---------- The doc layout ---------- */

.doc {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
}
.doc > * { grid-column: 1 / -1; min-width: 0; }
.doc__head { display: grid; align-content: start; padding-top: var(--sp-s); }
.doc__intro { display: grid; gap: var(--sp-m); align-content: start; padding-bottom: var(--sp-xl); }
.doc__head .crumbs { padding-top: 0; margin-bottom: var(--sp-m); }
.doc__title { max-width: 19ch; text-wrap: balance; overflow-wrap: break-word; }
.doc__lede { font-size: var(--fs-lead); line-height: 1.32; letter-spacing: -0.008em; }
.doc__lede p { max-width: 52ch; }
.doc__lede > * + * { margin-top: 0.8em; }
.doc__lead { display: flex; align-items: center; gap: var(--sp-xs); max-width: 44ch; color: var(--fg-muted); }
.doc__face { width: clamp(3rem, 2.4rem + 1.2vw, 5rem); flex: none; }
.portrait { aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1); background: var(--surface); }

/* the sticky drawing and what sits under it */
.doc__aside { padding-bottom: var(--sp-l); }
.doc__sticky { display: grid; gap: var(--sp-s); }
.doc__drawing .dw,
.doc__layer .dw,
.doc__layer .rc { max-height: min(52vh, 56rem); margin-inline: auto; }
.doc__layers { display: grid; }
.doc__layers > * { grid-area: 1 / 1; align-self: center; min-width: 0; transition: opacity 240ms var(--ease-in-out); }
.doc__layer--recipe { opacity: 0; visibility: hidden; transition: opacity 240ms var(--ease-in-out), visibility 0s linear 240ms; }
.is-recipe .doc__layer--recipe { opacity: 1; visibility: visible; transition: opacity 240ms var(--ease-in-out), visibility 0s; }
.is-recipe .doc__layer--body { opacity: 0; }

.toc { list-style: none; padding: 0; display: grid; border-top: 1px solid var(--line); }
.toc a {
  display: flex;
  align-items: center;
  gap: 0.7em;
  min-height: 2.75rem;
  border-bottom: 1px solid var(--line);
  text-decoration-line: none;
}
.toc a > span { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: text-decoration-color var(--dur-link) var(--ease-out); }
.toc a:hover > span { text-decoration-color: currentColor; }
.toc a[aria-current] { font-weight: 500; }
.toc a[aria-current] > span,
.toc a.is-lit > span { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.toc .glyph { height: 1rem; width: 1.25rem; flex: none; }
.toc .glyph svg, .toc__glyph { object-fit: contain; }

.legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5em; min-height: 1.6em; color: var(--fg-muted); }
.legend [data-legend-name] { color: var(--fg); font-weight: 500; }
.legend__sq { display: inline-block; width: 0.75rem; height: 0.75rem; flex: none; background: var(--m-top); transform: translateY(0.05em); }
.legend__pillar { margin-left: -0.5em; }

@media (min-width: 1100px) {
  .doc__head { grid-row: 1; padding-bottom: var(--sp-l); }
  .doc__intro { grid-column: 1 / span 7; grid-row: 2; }
  .doc__aside { grid-column: 9 / -1; grid-row: 2 / span 3; align-self: stretch; padding-top: 0.35rem; }
  .doc__first { grid-column: 1 / span 7; grid-row: 3; }
  .doc__main { grid-column: 1 / span 7; grid-row: 4; }
  .doc__stage { grid-row: 1 / span 3; }
  html.js .doc__sticky { position: sticky; top: var(--sp-m); }
  .rc-inline { display: none; }
}
@media (max-width: 1099px) {
  .doc__head { grid-row: 1; padding-bottom: var(--sp-m); }
  .doc__intro { grid-row: 2; padding-bottom: var(--sp-l); }
  .doc__aside { grid-row: 3; }
  .doc__first { grid-row: 4; }
  .doc__main { grid-row: 5; }
  .doc__stage { grid-row: 1 / span 4; }
  .doc__drawing .dw { max-height: 40vh; }
  .doc__layer--recipe { display: none; }
  .rc-inline { margin-bottom: var(--sp-m); }
  .rc-inline .rc { max-height: 46vh; }
}

/* the carbon stage behind the 3D and games pillar's head and first section */
.doc__stage { background: var(--carbon); box-shadow: 0 0 0 100vmax var(--carbon); clip-path: inset(0 -100vmax); z-index: -1; align-self: stretch; }
.doc__head.field-carbon,
.doc__intro.field-carbon,
.doc__first.field-carbon { background: none; }
.doc__first { padding-bottom: var(--sp-l); }
.on-carbon {
  --ground: var(--carbon);
  --fg: var(--porcelain);
  --fg-muted: var(--carbon-muted);
  --surface: var(--carbon-surface);
  --line: color-mix(in srgb, var(--porcelain) 16%, var(--carbon));
  --line-strong: color-mix(in srgb, var(--porcelain) 52%, var(--carbon));
  color: var(--fg);
}
.doc__aside { transition: color var(--dur-hover) var(--ease-out); }

/* ---------- Sections ---------- */

.sec { padding-block: var(--sp-l); }
.sec__title { max-width: 20ch; text-wrap: balance; overflow-wrap: break-word; }
/* the rule under a section title, drawn in from the left as the section arrives */
.sec__title::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: var(--sp-s);
  background: var(--line);
  transform-origin: left center;
  transition: transform 320ms var(--ease-out);
}
.rule-armed:not(.is-in) .sec__title::after,
.rule-armed:not(.is-in) .band__title::after { transform: scaleX(0); }
.sec__body { margin-top: var(--sp-m); }
.sec__body > * + * { margin-top: 1em; }
.sec__body > p,
.sec__body li p { max-width: var(--measure); }
.sec__body ul:not([class]),
.sec__body ol:not([class]) { padding-left: 1.2em; }
.sec__body ul:not([class]) li + li { margin-top: 0.45em; }
.sec__body > .actions,
.sec__body > p:has(> .link-cta:only-child) { margin-top: var(--sp-m); }
.sec__body > ul.link-list { display: flex; flex-wrap: wrap; gap: 0.2em 1.25em; list-style: none; padding: 0; }

/* full-width sections on the pages without a sticky drawing: the title left, the text right */
.sec--full { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.sec--full > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 1100px) {
  .sec--full:not(.sec--wide) > .sec__title { grid-column: 1 / span 5; }
  .sec--full:not(.sec--wide) > .sec__body { grid-column: 6 / -1; margin-top: 0; }
  .sec--full:not(.sec--wide) > .sec__title::after { display: none; }
  /* the rule runs the grid's width (the wrap's content), not the window's */
  .sec--full:not(.sec--wide) {
    padding-top: var(--sp-m);
    margin-top: var(--sp-m);
    background: linear-gradient(var(--line), var(--line)) top center / calc(100% - 2 * var(--margin)) 1px no-repeat;
  }
}

/* Steps: real list numbers at the heading step, in the ink, level with the step's first line. Not
   on a tile of the material: a filled number tile is the template's step badge, and rose and citron
   never carry text on a light ground (look-v3 section 3); the drawing beside carries the material. */
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; border-top: 1px solid var(--line); }
/* straight under the section title's own rule a list needs no second one */
.sec__body > :is(.steps, .gets, .who, .worklist, .combos__list, .qa-list):first-child,
.sec__body > .rc-inline:first-child + .steps,
.sec__body > .promises-list:first-child > .promise-row:first-child { border-top: 0; }
.steps__item {
  counter-increment: step;
  display: grid;
  grid-template-columns: calc(var(--fs-heading) * 0.8) minmax(0, 1fr);
  column-gap: var(--sp-m);
  align-items: start;
  padding-block: var(--sp-m);
  border-bottom: 1px solid var(--line);
}
.steps__item::before {
  content: counter(step);
  grid-row: 1 / span 2;
  font-size: var(--fs-heading);
  font-stretch: 125%;
  font-weight: var(--heading-weight);
  line-height: 0.8;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.steps__title { font-size: var(--fs-lead); font-weight: 500; line-height: 1.3; }
.steps__text > * + * { margin-top: 0.8em; }
.steps__title + .steps__text { margin-top: 0.4em; }
.steps__text p { max-width: 60ch; }
.steps--promises { counter-reset: none; }
.steps--promises .steps__item::before { content: none; }
.steps--promises .steps__item { grid-template-columns: minmax(0, 1fr); }

/* What you get: the lead as a row title, the detail beside it */
.gets { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.gets__item { display: grid; gap: 0.35em var(--sp-m); padding-block: var(--sp-s); border-bottom: 1px solid var(--line); }
.gets__lead { font-size: var(--fs-lead); font-weight: 500; line-height: 1.3; }
.gets__rest { color: var(--fg-muted); }
@media (min-width: 720px) {
  .gets__item { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .gets__item--plain .gets__rest { grid-column: 1 / -1; color: var(--fg); }
}

/* What to bring: a checklist still in plan, an empty box at each line */
.bring { list-style: none; padding: 0; display: grid; gap: 0.7em; }
.bring__item { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.9em; align-items: start; max-width: 64ch; }
.bring__box { width: 1rem; height: 1rem; margin-top: 0.3em; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--input-bg); }

/* Who it is for: the situations at the lead step, one per row */
.who { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.who > li { padding-block: var(--sp-xs); border-bottom: 1px solid var(--line); font-size: var(--fs-lead); line-height: 1.32; letter-spacing: -0.008em; max-width: none; }

/* An example: a statement */
.statement { font-size: var(--fs-lead); line-height: 1.38; letter-spacing: -0.008em; }
.statement p { max-width: 54ch; }
.statement > * + * { margin-top: 0.8em; }
.statement .link-cta { font-size: var(--fs-body); }

/* the work: plates with their four-part captions */
.plates { display: grid; gap: var(--sp-m) var(--gutter); margin-top: var(--sp-l) !important; }
@media (min-width: 720px) {
  .plates--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plates--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plates--3 > :first-child { grid-column: 1 / -1; }
}
.plates .plate__caption { grid-template-columns: none !important; }
.worklist { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.worklist > li,
.worklist__row { display: grid; gap: 0.3em; padding-block: var(--sp-s); border-bottom: 1px solid var(--line); }
.worklist__lead { font-size: var(--fs-lead); font-weight: 500; line-height: 1.3; }

/* the people a section names, with their portraits */
.people { display: grid; gap: var(--sp-s); }
.people__faces { display: flex; gap: var(--sp-2xs); }
.people__face { width: clamp(5rem, 4rem + 3vw, 9rem); }
.people__text > * + * { margin-top: 1em; }
@media (min-width: 720px) { .people { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-m); } }

/* a sub-service on its pillar page: its piece, the text, the facts */
.subsvc { display: grid; gap: var(--sp-s) var(--sp-m); }
.subsvc__art .dw { width: clamp(5rem, 3.5rem + 4vw, 10rem); max-height: 8rem; }
.subsvc__text > * + * { margin-top: 1em; }
.subsvc__fit { font-size: var(--fs-lead); line-height: 1.32; }
@media (min-width: 720px) { .subsvc { grid-template-columns: clamp(5rem, 3.5rem + 4vw, 10rem) minmax(0, 1fr); } }
.facts { display: grid; gap: var(--sp-xs) var(--gutter); margin-top: var(--sp-s) !important; padding-block: var(--sp-s); border-block: 1px solid var(--line); font-size: var(--fs-small); }
.facts dt { color: var(--fg-muted); }
.facts dd { margin-top: 0.2em; }
@media (min-width: 720px) { .facts { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 4fr); } }

/* the promises: full sentences at the heading step, weight 500, each with its rule */
.promises-list { list-style: none; padding: 0; display: grid; gap: var(--sp-m); }
.promise-row { display: grid; gap: 0.6em; padding-top: var(--sp-s); border-top: 1px solid var(--line); }
.promise-row__title { padding-bottom: 0.12em; font-size: var(--fs-heading); font-stretch: 125%; font-weight: 500; line-height: 1.04; letter-spacing: var(--track-heading); text-wrap: balance; max-width: 18ch; }
.promise-row__text { color: var(--fg-muted); max-width: 60ch; }

/* the shapes work takes */
.shapes { list-style: none; padding: 0; display: grid; gap: var(--sp-m) var(--gutter); }
.shapes__item { display: grid; gap: 0.5em; align-content: start; }
.shapes__art { height: clamp(6rem, 4rem + 4vw, 11rem); display: flex; align-items: flex-end; margin-bottom: var(--sp-xs); }
.shapes__art .dw { height: 100%; width: auto; max-width: 100%; margin: 0; }
.shapes__name { font-size: var(--fs-lead); font-weight: 500; line-height: 1.3; }
.shapes__item p { color: var(--fg-muted); }
@media (min-width: 720px) { .shapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sec--full .shapes, .page--services .shapes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* the symptom pair: tick what sounds like you, then choose what comes first */
.pair { display: grid; gap: var(--sp-m); }
.pair__set, .pair__first { border: 0; margin: 0; padding: 0; min-width: 0; }
.pair__chips { display: grid; gap: 0.6rem; }
.pair__chip,
.pair__chip > span { width: 100%; }
.pair__chip > span { min-height: 3.25rem; padding-block: 0.7em; line-height: 1.4; font-size: var(--fs-body); }
.pair__q { padding: 0; font-weight: 500; font-size: var(--fs-lead); }
.pair__radios .chip > span { text-align: left; }
.pair__list { padding-left: 1.2em; }

/* ---------- Pages without a sticky drawing: services and why ---------- */

.doc__art .dw { max-height: 34rem; }
@media (min-width: 1100px) {
  .doc--open .doc__art { grid-column: 8 / -1; grid-row: 2; align-self: start; }
}

/* The services index: a pillar row (name, situation, lead, its body), then its cards */
/* the rule between pillars runs the grid's width, like every other rule, not the window's */
.svc-pillar {
  padding-block: var(--sp-l) var(--sp-xl);
  background: linear-gradient(var(--line), var(--line)) top center / min(calc(100% - 2 * var(--margin)), calc(var(--wrap-max) - 2 * var(--margin))) 1px no-repeat;
}
.svc-pillar__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--sp-m); align-items: center; }
.svc-pillar__row > * { grid-column: 1 / -1; min-width: 0; }
.svc-pillar__text > * + * { margin-top: 0.8em; }
.svc-pillar__text p { font-size: var(--fs-lead); line-height: 1.32; max-width: 44ch; }
.svc-pillar__name a { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: max(2px, 0.04em); text-underline-offset: 0.12em; transition: text-decoration-color var(--dur-link) var(--ease-out); }
.svc-pillar__name a:hover { text-decoration-color: currentColor; }
.svc-pillar__name .icon { display: inline-block; width: 0.6em; height: 0.6em; margin-left: 0.2em; vertical-align: 0.05em; transition: transform var(--dur-hover) var(--ease-out); }
.svc-pillar__name a:hover .icon { transform: translateX(0.12em); }
.svc-pillar__art .dw { max-height: 18rem; }
.svc-pillar__more { margin-top: var(--sp-s); color: var(--fg-muted); }
@media (min-width: 1100px) {
  .svc-pillar__text { grid-column: 1 / span 7; }
  .svc-pillar__art { grid-column: 9 / -1; }
}
.vt-brand-and-websites { view-transition-name: drawing-brand-and-websites; }
.vt-workflow-and-automation { view-transition-name: drawing-workflow-and-automation; }
.vt-3d-and-games { view-transition-name: drawing-3d-and-games; }
::view-transition-group(drawing-brand-and-websites),
::view-transition-group(drawing-workflow-and-automation),
::view-transition-group(drawing-3d-and-games) { animation-duration: 320ms; animation-timing-function: var(--ease-in-out); }

/* Cards: paper, still; the drawing performs its gesture and the name underlines */
.cards { list-style: none; display: grid; gap: var(--gutter); margin-top: var(--sp-l); }
.card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.5em;
  padding: var(--sp-s);
  border-radius: var(--radius);
  background: var(--paper);
}
.card__art { height: 6rem; display: flex; align-items: flex-end; margin-bottom: var(--sp-s); }
.card__art .dw { height: 100%; width: auto; max-width: 100%; margin: 0; }
.card__name { font-size: var(--fs-lead); font-weight: 500; line-height: 1.25; }
.card__name a { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: text-decoration-color var(--dur-link) var(--ease-out); }
.card__name a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.card:hover .card__name a { text-decoration-color: currentColor; }
.card__name a:focus-visible { outline: none; }
.card:has(a:focus-visible) { outline: 2px solid var(--fg); outline-offset: 3px; }
.card__line { color: var(--fg-muted); font-size: var(--fs-small); max-width: 40ch; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cards--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* When a project needs more than one: the combinations beside the body they light */
.combos { display: grid; gap: var(--sp-l) var(--gutter); grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
.combos > * { grid-column: 1 / -1; min-width: 0; }
.combos__text > * + * { margin-top: 1em; }
.combos__list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.combos__list > li { display: grid; gap: 0.3em; padding-block: var(--sp-s); border-bottom: 1px solid var(--line); }
.combos__list > li.is-on .combos__lead { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.combos__lead { font-size: var(--fs-lead); font-weight: 500; line-height: 1.3; }
.combos__art .dw { max-height: 32rem; }
@media (min-width: 1100px) {
  .combos__text { grid-column: 1 / span 6; }
  .combos__art { grid-column: 8 / -1; }
}

/* Why: hand-offs beside the same hands, at 6 and 6 */
.why-pair { display: grid; gap: var(--sp-m) var(--gutter); padding-bottom: var(--sp-xl); }
.why-pair__fig { display: grid; gap: var(--sp-xs); }
.why-pair__fig .dw { max-height: 30rem; }
.why-pair__cap { font-size: var(--fs-small); color: var(--fg-muted); }
@media (min-width: 720px) { .why-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- The closing band: surface, full width, the body beside the call ---------- */

.band {
  margin-top: var(--sp-l);
  padding-block: var(--sp-xl);
  background: var(--surface);
}
.band__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--sp-l); align-items: center; }
.band__inner > * { grid-column: 1 / -1; min-width: 0; }
.band__text > * + * { margin-top: 1em; }
.band__text > .actions { margin-top: var(--sp-m); }
.band__title { max-width: 18ch; text-wrap: balance; }
.band__art .dw { max-height: 22rem; }
@media (min-width: 1100px) {
  .band__text { grid-column: 1 / span 6; }
  .band__art { grid-column: 8 / -1; }
}

/* ---------- Questions: the accordion, a glyph of the piece it concerns ---------- */

.qa-list { margin-top: var(--sp-s); border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); interpolate-size: allow-keywords; }
.qa__q {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  min-height: 3.5rem;
  padding-block: var(--sp-xs);
  list-style: none;
  cursor: pointer;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q > h3 { flex: 1; margin: 0; font-size: var(--fs-lead); font-weight: 500; line-height: 1.3; }
.qa__glyph { height: 1.5rem; width: 1.5rem; flex: none; }
.qa__plus { width: 1.25rem; height: 1.25rem; flex: none; transition: transform var(--dur-hover) var(--ease-out); }
.qa[open] .qa__plus { transform: rotate(45deg); }
.qa__q:hover > h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.qa__q:focus-visible { outline-offset: 2px; }
.qa__a { padding-bottom: var(--sp-s); }
.qa:has(.qa__glyph) .qa__a { padding-left: calc(1.5rem + var(--sp-xs)); }
.qa__a > * + * { margin-top: 1em; }
.qa::details-content { block-size: 0; overflow: clip; transition: block-size 240ms var(--ease-out), content-visibility 240ms allow-discrete; }
.qa[open]::details-content { block-size: auto; }
.page-section .qa__q::before { content: none; }

@media (forced-colors: active) {
  .legend__sq { forced-color-adjust: none; background: CanvasText; }
  .crumbs__list > li + li::before { background: CanvasText; }
}

/* a step or a deliverable whose lead runs on into its sentence */
.steps__line { font-size: var(--fs-lead); line-height: 1.32; letter-spacing: -0.008em; max-width: 46ch; }
.steps__line strong,
.gets__item--run strong { font-weight: 500; }
.gets__item--run { grid-template-columns: minmax(0, 1fr) !important; }
.gets__item--run p { font-size: var(--fs-lead); line-height: 1.32; max-width: 52ch; }

.subsvc-list > * + * { margin-top: var(--sp-l); }
.subsvc-list > p + p { margin-top: 1em; }
.subsvc__name { font-size: var(--fs-lead); font-weight: 500; line-height: 1.3; }
.subsvc__name a { text-decoration-thickness: 1px; }
.subsvc__name a:hover { text-decoration-thickness: 2px; }
.sec__body > h3 { margin-top: var(--sp-m); font-size: var(--fs-lead); font-weight: 500; line-height: 1.3; }
.sec__body > h3 + p { margin-top: 0.4em; }
/* a card's line is the copy's phrase after its name; it starts the card, so it starts with a capital */
.card__line::first-letter { text-transform: uppercase; }
.pair__text { min-width: 0; overflow-wrap: break-word; }
.pair__text strong { font-weight: 500; }