/* Service pages (/buyout, /submittals and the next service line; generated by site/tools/gen-service.py): page
   composition on the six columns of partials/bays.html (BRIEF §0f). U = one of the six columns ((100% + gutter) / 6
   of a full-width row); a block starts and ends on a line, its text --cell-pad in from the line it starts at (+1 px
   after an inner line, which takes the block's first pixel). Each section takes a different split from its
   neighbours: Hero 4 + 2 over the full-width product media · KeyFacts 2 + 4 · Why: heading and intro on columns 1-4
   over the full-width chart · QuoteBand 2 + 4 · What cards 2+2+2 in a side-scrolling row, then 3 + 3 · Steps 2 + 4
   rows on Sky-2 · Pricing 3 + 3 · FAQ 2 + 4 (heading over a photo) · Related 3 + 3 one-row cards. Opaque objects
   (media stages, the motif's letter, cards, the quote tile, the chart, photos) cover the lines.
   Rhythm: one --section between two blocks on the same ground; at a change of surface (paper to the Roger Blue
   QuoteBand or the Sky-2 Steps band and back) the band's own side is halved (48 / 32 / 24), so the two paddings add
   up to one and a half rhythms instead of two empty ones stacked (Oct 8 "odd empty space").
   Section-level classes are svc-* (unique, so they also match the /styleguide copies, whose section carries .svc);
   overrides of shared components are scoped .svc <descendant>. */

/* ================= Hero: the same Page · Halves composition as /about =================
   The service mark sits in a full right-side square, not a small card floating over the open grid. Tablet and phone use
   the shared hero's text-then-square stack. A 24 px foot on the row keeps the square clear of the product stage. */
.svc-hero__row { padding-bottom: var(--s-24); }
.svc-hero__visual { align-items: center; justify-content: center; background: var(--sky-2); }
.svc-hero__visual > .motif { width: clamp(128px, 12vw, 176px); max-width: 100%; margin: 0; background: transparent; }

/* ================= KeyFacts on the paper ground (R2-F13 / §0f.6: the band after the hero's stage stays on paper, so
   no panel): from 1280 the definition (columns 1-2, H3 role) + the facts two to a row (columns 3-6), on the page's
   column edges; under 1280 the definition over the facts, two to a row on the halves (at 1024 two columns held the
   H3 seven lines deep, one word on its first). The IconBadges are the opaque objects, the lines run behind the
   sentences clear of their ends ========= */
.svc-facts__panel { display: flex; flex-direction: column; width: 100%; }
.svc-facts .facts { flex-direction: row; flex-wrap: wrap; gap: var(--s-48) 0; }
.svc-facts .svc-facts__item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-16); flex: 0 0 100%;
  min-width: 0; padding: 0 var(--cell-pad); }
.svc-def { max-width: 640px; }
/* under 1280 the badge beside its sentence (the text's first line centred on the badge): six facts stay one short
   column on phones instead of six badge-over-text stacks, and on the halves (768-1279) the sentences start a badge
   further in, clear of the column line they used to end on */
@media (max-width: 1279px) {
  .svc-facts .svc-facts__item { flex-direction: row; }
  .svc-facts .facts__t { flex: 1 1 0; min-width: 0; padding-top: calc((var(--s-48) - var(--lead-lh)) / 2); }
}
@media (min-width: 1280px) {
  /* the facts cell opens on the 2nd column edge (its first pixel), so the first fact of a row spans 2 columns exactly
     (half the cell + a quarter gutter) and the second fills to the margin line; text keeps the page's text edges */
  .svc-facts .svc-facts__item { padding-left: calc(var(--cell-pad) + 1px); }
  .svc-facts .svc-facts__item:nth-child(odd) { flex: 0 0 calc(50% + var(--gutter) / 4); }
  .svc-facts .svc-facts__item:nth-child(even) { flex: 1 1 calc(50% - var(--gutter) / 4 - 1px); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .svc-facts__row { flex-direction: column; }
  .svc-facts__row > .cell { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .svc-facts__row { row-gap: var(--s-48); }
  .svc-facts .svc-facts__item:nth-child(odd) { flex: 0 0 calc((100% + var(--gutter)) / 2 - var(--gutter) / 2); }
  .svc-facts .svc-facts__item:nth-child(even) { flex: 1 1 calc((100% + var(--gutter)) / 2 - var(--gutter) / 2 - 1px); padding-left: calc(var(--cell-pad) + 1px); }
}
@media (max-width: 767px) { .svc-facts__row { row-gap: var(--s-32); } .svc-facts .facts { row-gap: var(--s-32); } }

/* ================= Why: the heading, its intro under it (columns 1-4), then the chart, full width (R2-F5) ===========
   One reading line, no slab of paper under a one-line H2 beside a five-line intro. The intro's measure is the cell's
   (columns 1-4, under 75 characters of the lead) with the FIT measures below where a line would end on a column line */
.svc-intro__body { max-width: 640px; }
@media (min-width: 1024px) { .svc-intro__body { max-width: none; } }

/* CompareTable on the columns (one opaque object, the look of R2-F6 kept: rules, labels, the Sky "With Roger"
   column). Every cell is filled (paper; With Roger Sky), so the page's lines stop at the table's top rule and resume
   under its bottom rule instead of running into its sentences. >= 1024: each row's label on its own line across
   columns 1-4 (the Sky spacer continues the With Roger column over 5-6), then Today | AI-assisted | With Roger across
   columns 1-2 | 3-4 | 5-6. Tablet: the label, Today | AI-assisted halves, With Roger full width (components.css);
   phones: the stacked blocks (components.css). */
.svc .compare { border-bottom: 1px solid var(--rule); }
@media (min-width: 768px) { .svc .compare__row { background: var(--paper); } .svc .compare__row .compare__cell--roger { background: var(--sky); } }
@media (min-width: 1024px) {
  .svc .compare__row { flex-wrap: wrap; border-top: 0; }
  .svc .compare__row--head { display: flex; }
  .svc .compare__row--head > .compare__cell:first-child { display: none; }
  .svc .compare__lab { display: none; }
  .svc .compare__cell { padding: var(--s-16) var(--cell-pad) var(--s-32); border-top: 0; }
  .svc .compare__row > [role="rowheader"] { flex: 0 0 calc((100% + var(--gutter)) * 2 / 3 - var(--gutter) / 2);
    padding: var(--s-32) var(--cell-pad) 0; border-top: 1px solid var(--rule); }
  .svc .compare__rowhead { max-width: none; }
  .svc .compare__pad { display: flex; flex: 0 0 calc((100% + var(--gutter)) / 3 - var(--gutter) / 2); padding: 0; border-top: 1px solid var(--sky-line); }   /* exactly the rest of the line, so Today wraps under the label */
  .svc .compare__cell:nth-last-child(3) { flex: 0 0 calc((100% + var(--gutter)) / 3 - var(--gutter) / 2); }
  .svc .compare__cell:nth-last-child(2) { flex: 0 0 calc((100% + var(--gutter)) / 3); padding-left: calc(var(--cell-pad) + 1px); }
  .svc .compare__cell:last-child { flex: 1 1 0; padding-left: calc(var(--cell-pad) + 1px); }
  .svc .compare__cell--roger:last-child { padding-top: var(--s-16); padding-bottom: var(--s-32); }
  /* the head: the table's top rule on Today and AI-assisted, the 2 px Roger Blue rule on With Roger; labels level */
  .svc .compare__row--head > .compare__cell { padding-top: calc(var(--s-24) + 1px); padding-bottom: var(--s-24); border-top: 1px solid var(--rule); }
  .svc .compare__row--head > .compare__cell--roger { padding-top: var(--s-24); border-top: 2px solid var(--blue); }
}
@media (min-width: 768px) and (max-width: 1023px) { .svc .compare__row--head { display: none; } }

/* Service comparisons remain a three-way comparison on phones: the feature name and all three states occupy fixed,
   readable columns inside a keyboard-accessible horizontal scroller. */
.svc-compare__hint { display: none; }
@media (max-width: 767px) {
  .svc-hero__visual { display: none; }

  .svc-compare-scroll { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-color: var(--blue) var(--paper-2); scrollbar-width: thin; }
  .svc-compare-scroll:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
  .svc .svc-compare-scroll .compare { width: 732px; min-width: 732px; gap: 0; }
  .svc .svc-compare-scroll .compare__row { flex-wrap: nowrap; width: 100%; }
  .svc .svc-compare-scroll .compare__row--head { display: flex; }
  .svc .svc-compare-scroll .compare__row--head > .compare__cell:first-child { display: flex; }
  .svc .svc-compare-scroll .compare__cell { flex: 0 0 200px; padding: var(--s-16) var(--cell-pad); border-top: 0; }
  .svc .svc-compare-scroll .compare__row--head > .compare__cell { padding-top: calc(var(--s-24) + 2px); padding-bottom: var(--s-16); }
  .svc .svc-compare-scroll .compare__row--head > .compare__cell--roger { padding-top: var(--s-24); border-top: 2px solid var(--blue); }
  .svc .svc-compare-scroll .compare__row--head > .compare__cell:first-child,
  .svc .svc-compare-scroll .compare__row > [role="rowheader"] { flex-basis: 132px; }
  .svc .svc-compare-scroll .compare__row > [role="rowheader"] { padding-top: var(--s-16); padding-bottom: var(--s-16); }
  .svc .svc-compare-scroll .compare__rowhead { max-width: none; }
  .svc .svc-compare-scroll .compare__pad { display: none; }
  .svc .svc-compare-scroll .compare__lab { display: none; }
  .svc .svc-compare-scroll .compare__cell:nth-last-child(2),
  .svc .svc-compare-scroll .compare__cell--roger:last-child { padding: var(--s-16) var(--cell-pad); }
  .svc .svc-compare-scroll .compare__row--head > .compare__cell { padding-top: calc(var(--s-24) + 2px); }
  .svc .svc-compare-scroll .compare__row--head > .compare__cell--roger { padding-top: var(--s-24); }
  .svc-compare__hint { display: block; margin: var(--s-8) 0 0; padding-left: var(--cell-pad); color: var(--ink-3);
    font-family: var(--sans); font-size: 12px; line-height: 16px; }

  /* The second product crop is artwork only; the warranty promises remain in the flow. */
  .svc[data-name="Buyout"] .svc-proof--editor .svc-proof__media,
  .svc[data-name="Submittals"] .svc-proof--detail .svc-proof__media { display: none; }
}

/* ================= QuoteBand: the 1:1 photo (columns 1-2) + the QuoteTile (3-6), as the CustomerCarousel's pair ==== */
/* a band between two paper sections: its own side of each boundary is half a rhythm (48 / 32 / 24), so photo and tile
   sit one and a half rhythms from the chart above and the cards' heading below, not two (192 px of empty field) */
.svc-quote-band > .container { padding-top: var(--s-48); padding-bottom: var(--s-48); }
@media (max-width: 1023px) { .svc-quote-band > .container { padding-top: var(--s-32); padding-bottom: var(--s-32); } }
@media (max-width: 767px) { .svc-quote-band > .container { padding-top: var(--s-24); padding-bottom: var(--s-24); } }
.svc-quote__media { background: var(--blue-press); }
.svc-quote__fig { justify-content: space-between; gap: var(--s-32); }
/* desktop: the quote set one role up (the heading sizes, in the quote's own face and weight), so it runs across
   columns 3-6 and fills the tile instead of three short lines over an empty press */
@media (min-width: 1280px) { .svc-quote__fig > .t-quote { font-size: var(--h1-fs); line-height: var(--h1-lh); letter-spacing: var(--h1-ls); } }
@media (min-width: 1024px) and (max-width: 1279px) { .svc-quote__fig > .t-quote { font-size: var(--h2-fs); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); } }
@media (max-width: 767px) { .svc-quote__fig { gap: var(--s-24); } .row--stack-m > .svc-quote__media { align-self: stretch; } }

/* ================= What: the items as cards in a side-scrolling row, then the WarrantyBlock + product media ====== */
/* the heading led by the service's letter (Motif, 48 px: about the H2's line box, so it sits level with the first line) */
.svc-what__head { display: flex; flex-direction: row; align-items: flex-start; gap: var(--s-16); }
/* the chip and the H2 on one line at every width (no 2-line H2 beside empty columns, §0f.2); the chip's gap and size
   per band put the H2's end clear of the column lines (Oct 8 search over 768-1279): tablet 24 apart; 1024-1279, where
   the H2 holds 38 px while the lines move, the 32 px letter 12 apart, centred on the line */
@media (min-width: 768px) and (max-width: 1023px) { .svc-what__head { gap: var(--s-24); } }
@media (min-width: 1024px) and (max-width: 1279px) {
  .svc-what__head { align-items: center; gap: var(--s-12); }
  .svc-what__head > .motif { width: 32px; }
}
/* ItemCards: the Rail (components.css · Rail, site.js · Rail) at every width: three cards a view from 1024 (each on two
   columns, the inner lines down the gutters), two on tablets, one on phones; every snap rests on the column lines.
   A line whose cards all fit is a static row (the Rail marks it, its nav stays hidden). Cards in view share the
   tallest card's height. */
.svc-cards > li { display: flex; flex-direction: column; }
.svc-cards > li > .icard { flex: 1 1 auto; }
/* ItemCard: an opaque paper-2 card led by its IconBadge; not a link, so no hover state (only targets react) */
.icard { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-24); width: 100%; padding: var(--cell-pad); background: var(--paper-2); }
.icard__body { display: flex; flex-direction: column; gap: var(--s-8); }
.icard__text { color: var(--ink-2); max-width: 576px; }
/* the nav's count ("3 / 6": the last card in view of all, site.js · Rail), in the label role across from the buttons, so a
   phone that shows one card says how many follow; the slash is drawn (one 1 px stroke), the figures are derived marks.
   Inside the nav, which is aria-hidden like its buttons: assistive tech reads the list itself ("list, 6 items") */
.svc-rail .rail__nav { justify-content: space-between; }
.svc-rail__btns { display: flex; flex-direction: row; align-items: center; gap: var(--s-16); }
/* at the row's far end, its text a --cell-pad in from the margin line (clear of every inner line at every width) */
.svc-rail .rail__count { display: flex; flex-direction: row; align-items: center; gap: var(--s-4); padding-right: var(--cell-pad); color: var(--ink-3); }
.svc-rail .rail__slash { display: block; flex: none; width: 8px; height: 16px; }

/* the proof row on the cards' geometry, 3 + 3 from 768 (one gutter apart, so the centre line runs down the gutter;
   a Detail across columns 3-6 left half its 16:10 stage blank paper), phones stacked. The stage takes the row's
   height (its ratio is then a minimum), so the WarrantyBlock sets the height and neither side leaves paper under it */
.svc-proof { display: flex; flex-direction: row; align-items: stretch; gap: var(--gutter); width: 100%; }
.svc-proof__terms { display: flex; flex: 0 0 calc((100% - var(--gutter)) / 2); min-width: 0; }
.svc-proof__media { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
.svc-proof .warranty-band { flex: 1 1 auto; align-items: flex-start; justify-content: space-between; }
/* the WarrantyBlock on paper-2, so the media stage beside it is the row's one Sky object (R2-F13) */
.svc-warranty { --surface: var(--paper-2); background: var(--paper-2); }
.svc-proof__media > .media { flex: 1 1 auto; }
.svc-proof__media .media__stage { flex: 1 1 auto; }
/* the Detail's stage at 16:10 from 768 (its square left paper under the WarrantyBlock): the zoomed stamp and the
   sheet's first lines fill it */
@media (min-width: 768px) { .svc-proof .media[data-variant="detail"] .media__stage { aspect-ratio: 16 / 10; } }
@media (max-width: 767px) {
  .svc-proof { flex-direction: column; gap: var(--s-16); }
  .svc-proof__terms { flex: 0 0 auto; }
  .svc-proof__media > .media, .svc-proof__media .media__stage { flex: none; }
}

/* Media · Editor (gen-service.py editor(), proof 'editor'): the product window's scope lines at 1.5x, the edited one
   with its caret and its drawing-reference chip; whole-pixel sizes on the drawn UI's own scale (rows 48, ticks 24,
   bars 12), so the crop reads as a closer look at the hero's window, not the window again */
.media--editor .pui__doc { gap: var(--s-32); padding: var(--s-48); }
.media--editor .pui__group { gap: var(--s-12); }
.media--editor .pui__gh { gap: var(--s-16); height: 32px; padding: 0 var(--s-12); }
.media--editor .pui__bar { height: 12px; }
.media--editor .pui__bar--h { height: 16px; }
.media--editor .pui__bar--ref { width: 64px; }
.media--editor .pui .icon { width: 24px; height: 24px; }
.media--editor .pui__row { gap: var(--s-16); height: 48px; padding: 0 var(--s-12); }
.media--editor .pui__row--on { padding-left: 10px; }   /* 12 less the 2 px Roger Blue edge, so the ticks stay in line */
.media--editor .pui__caret { height: 24px; }
/* the drawing reference the edit is backed by: a paper chip (Sky-line edge) holding the scan icon and the sheet's bar */
.ed-ref { display: flex; flex-direction: row; align-items: center; flex: none; gap: var(--s-8); height: 32px; padding: 0 var(--s-8);
  background: var(--paper); border: 1px solid var(--sky-line); color: var(--blue); }
.media--editor .ed-ref .icon { width: 16px; height: 16px; }
.media--editor .ed-ref__bar { width: 32px; height: 8px; background: var(--sky-line); }
@container mframe (max-width: 439px) {
  .media--editor .pui__doc { gap: var(--s-24); padding: var(--s-24) var(--s-16); }
  .media--editor .pui__row, .media--editor .pui__gh { gap: var(--s-12); padding-right: var(--s-8); }
  .media--editor .pui__row:not(.pui__row--on) { padding-left: var(--s-8); }
  .media--editor .pui__row--on { padding-left: 6px; }
  .media--editor .pui__gh { padding-left: var(--s-8); }
  .media--editor .pui__bar--ref { width: 40px; }
}

/* ================= Steps: one paper row per step on the Sky-2 band, 8 apart (a ledger of opaque rows: the band's
   lines show in the seams and stop at every row, so no sentence meets one): number + title (columns 1-2) | icon +
   what happens (columns 3-6), so the numbers, the icons and the text each run down one column edge ============== */
.svc-steps .ledger { gap: var(--s-8); }
/* the band's own side of its two boundaries is half a rhythm (the paper sections keep theirs), so the ledger sits one
   and a half rhythms from the proof row above and the pricing plate below, not two */
.svc-steps > .container { padding-top: var(--s-48); padding-bottom: var(--s-48); }
@media (max-width: 1023px) { .svc-steps > .container { padding-top: var(--s-32); padding-bottom: var(--s-32); } }
@media (max-width: 767px) { .svc-steps > .container { padding-top: var(--s-24); padding-bottom: var(--s-24); } }
.svc .svc-steps__list { gap: var(--s-8); }
/* the ledger's head row: the band and the H2 on paper, so the heading is part of the object it names */
.svc-steps__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-24); padding: var(--s-48) var(--cell-pad) var(--s-32); background: var(--paper); }
@media (max-width: 1023px) { .svc-steps__head { padding: var(--s-32) var(--cell-pad) var(--s-24); } }
.svc .svc-step { background: var(--paper); padding: var(--s-24) var(--cell-pad); }
.svc-step__what { display: flex; flex-direction: row; align-items: flex-start; gap: var(--s-24); min-width: 0; }
/* the text's first line centred on the badge, as the title's is on the number */
.svc-step__what > .steps__text { flex: 1 1 0; min-width: 0; max-width: 576px; padding: calc((var(--s-48) - var(--body-lh)) / 2) 0 0; }
@media (min-width: 1024px) {
  .svc .svc-step { padding: var(--s-32) 0; }
  .svc .svc-step > .steps__head { flex: 0 0 calc((100% + var(--gutter)) / 3 - var(--gutter) / 2); padding-top: calc((var(--s-48) - var(--stat-lh)) / 2); }
  .svc-step__what { flex: 1 1 0; padding: 0 var(--cell-pad) 0 calc(var(--cell-pad) + 1px); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .svc .svc-step__what > .steps__text { padding-left: 0; }
  .svc-step__what { padding-left: calc(var(--s-48) + var(--s-24)); }   /* the icon under the title, as the text was */
}
@media (max-width: 767px) { .svc .svc-step { gap: var(--s-16); padding: var(--s-24) var(--cell-pad); } .svc-step__what { gap: var(--s-16); } }

/* Buyout: center badges against the full description, not just its first line. */
.svc[data-name="Buyout"] .svc-step__what { align-items: center; }
.svc[data-name="Buyout"] .svc-step__what > .steps__text { padding-top: 0; }
@media (min-width: 1024px) {
  .svc[data-name="Buyout"] .svc-step { align-items: center; }
  .svc[data-name="Buyout"] .svc-step > .steps__head { padding-top: 0; }
}

/* ================= Pricing: one two-tone plate: the terms on paper-2 (columns 1-3), the proof on Sky (4-6) ======== */
.svc .pricing__proof { justify-content: center; gap: var(--s-24); }
.svc .pricing__proof .icon-badge { background: var(--paper); }
.svc-pricing__terms { justify-content: center; padding-top: var(--s-48); padding-bottom: var(--s-48); background: var(--paper-2); }
@media (max-width: 1023px) { .svc .pricing { row-gap: 0; } }
@media (max-width: 767px) { .svc-pricing__terms { padding-top: var(--s-32); padding-bottom: var(--s-32); } }

/* ================= FAQ: "FAQ" (columns 1-2) + the questions (3-6) ================
   Its own section after Pricing (the mid-page CTABand · Inline it used to continue is not drawn, Oct 8 gate): the
   full-bleed rule and the section rhythm above it, Pricing keeping its own foot */
.svc-faq__title { padding: 0 var(--cell-pad); }
/* the tiles sit on the column edges (the questions cell is flush); their text keeps the page's text edge, 1 px after
   the line the tile covers */
.svc-faq .faq__item { padding-left: calc(var(--cell-pad) + 1px); }
@media (max-width: 767px) { .svc-faq .faq__item { padding-left: var(--cell-pad); } .svc-faq .row { row-gap: var(--s-24); } }
/* from 1280, where every question holds one line, the heading column keeps the list's rhythm: the title box is one
   closed question tall (its 24 px pads and the H3 line, components.css · FAQ), then the tiles' 8 px gap, so the 1:1
   photo starts level with the second question; photo and tiles keep the cards' gutter (half a gutter each side of the
   2nd column line, the line down the gap), and their text keeps its pad from the tile's edge. Below 1280 a wrapping
   question would move the second tile off the photo's top, so the photo steps out (the heading stays) */
@media (max-width: 1279px) { .svc-faq__photo { display: none; } }
@media (min-width: 1280px) {
  .svc-faq__head { gap: var(--s-8); padding-right: calc(var(--gutter) / 2); }
  .svc-faq__title { justify-content: center; min-height: calc(2 * var(--s-24) + var(--h3-lh)); }
  .svc-faq__photo { align-self: stretch; }
  .svc-faq__list { padding-left: calc(var(--gutter) / 2); }
  .svc-faq .faq__item { padding-left: var(--cell-pad); }
}

/* ================= Related: two cards on the cards' geometry (columns 1-3 | 4-6, the centre line in the gutter) ===
   Each card one row at its content's height (Oct 8: no tall, near-empty "plain blocks"): its mark (the other
   service's motif, or the topic's IconBadge), the H3 title beside it, the chevron at the far edge, --cell-pad in; the
   whole card is the target. Hover: the edge turns Roger Blue (Card), the title's underline and the chevron step
   (components.css · Related). */
.svc .related > .t-label { padding: 0 var(--cell-pad); }
.svc .related__list { flex-wrap: nowrap; gap: var(--gutter); }
.svc .related__item { flex: 1 1 0; min-width: 0; padding: 0; }
.svc .related__link { display: flex; flex-direction: row; align-items: center; flex: 1 1 auto; gap: var(--s-24);
  padding: var(--cell-pad); background: var(--paper-2); border: 1px solid var(--paper-2); transition: border-color var(--t-hover); }
.svc .related__lead { display: flex; flex: none; }
.svc .related__lead .icon-badge { background: var(--paper); }
/* the lead marks keep their own drawing: the Related chevron rule (components.css) sizes, fills and nudges every svg in
   the link, so it is undone here for the motif and the icon */
.svc .related__link .related__lead .motif__svg { width: 100%; height: 100%; fill: currentColor; translate: none; }
.svc .related__link .related__lead .icon > svg { width: 100%; height: 100%; fill: none; translate: none; }
.svc .related__foot { display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex: 1 1 0; min-width: 0; gap: var(--s-24); }
@media (hover: hover) { .svc .related__link:hover { border-color: var(--blue); } }
.svc .related__link:active { border-color: var(--blue-press); }
@media (max-width: 767px) {
  .svc .related__list { flex-direction: column; gap: var(--s-16); }
  .svc .related__item { flex: 0 0 auto; }
  .svc .related__link { gap: var(--s-16); }
}

/* ================= Fit (typography only, tools/gen-service.py FIT): a word group held on one line in one band ===== */
/* @gen-fit:begin (written by tools/gen-service.py from FIT; do not edit by hand) */
@media (max-width: 767px) { .nb-m { white-space: nowrap; } }
@media (max-width: 374px) { .nb-m1 { white-space: nowrap; } }
@media (min-width: 375px) and (max-width: 413px) { .nb-m2 { white-space: nowrap; } }
@media (min-width: 414px) and (max-width: 767px) { .nb-m3 { white-space: nowrap; } }
@media (min-width: 768px) and (max-width: 1023px) { .nb-t { white-space: nowrap; } }
@media (min-width: 768px) and (max-width: 825px) { .nb-t1 { white-space: nowrap; } }
@media (min-width: 826px) and (max-width: 1023px) { .nb-t2 { white-space: nowrap; } }
@media (min-width: 1024px) and (max-width: 1279px) { .nb-d1 { white-space: nowrap; } }
@media (min-width: 1024px) and (max-width: 1099px) { .nb-d1a { white-space: nowrap; } }
@media (min-width: 1100px) and (max-width: 1279px) { .nb-d1b { white-space: nowrap; } }
@media (min-width: 1280px) and (max-width: 1439px) { .nb-d2 { white-space: nowrap; } }
@media (min-width: 1440px) { .nb-d3 { white-space: nowrap; } }
@media (max-width: 767px) { .svc .fit-buyout-facts-def { text-wrap: wrap; } .svc .fit-buyout-hero-h1 { text-wrap: wrap; } .svc .fit-buyout-why-h2 { text-wrap: wrap; } }
@media (max-width: 374px) { .svc .fit-submittals-facts-def { text-wrap: wrap; } }
@media (min-width: 375px) and (max-width: 413px) { .svc .fit-submittals-why-h2 { text-wrap: wrap; max-width: 6.6em; } }
@media (min-width: 768px) and (max-width: 1023px) { .svc .fit-buyout-facts-def { text-wrap: wrap; max-width: 29em; } .svc .fit-buyout-facts-turnkey { text-wrap: wrap; max-width: 15em; } .svc .fit-buyout-hero-h1 { text-wrap: balance; max-width: 10em; } .svc .fit-buyout-why-body { text-wrap: wrap; max-width: 37em; } .svc .fit-submittals-facts-def { text-wrap: wrap; max-width: 30em; } .svc .fit-submittals-why-body { text-wrap: wrap; max-width: 25em; } }
@media (min-width: 768px) and (max-width: 825px) { .svc .fit-buyout-facts-executed-60-days { text-wrap: wrap; max-width: 10em; } }
@media (min-width: 826px) and (max-width: 1023px) { .svc .fit-buyout-why-h2 { text-wrap: wrap; max-width: 10em; } }
@media (min-width: 1024px) and (max-width: 1279px) { .svc .fit-buyout-facts-def { text-wrap: wrap; max-width: 25em; } .svc .fit-buyout-hero-h1 { text-wrap: wrap; } .svc .fit-buyout-hero-subhead { text-wrap: wrap; max-width: 30em; } .svc .fit-submittals-hero-h1 { text-wrap: wrap; } .svc .fit-submittals-hero-subhead { text-wrap: wrap; max-width: 23.5em; } .svc .fit-submittals-why-h2 { text-wrap: wrap; } }
@media (min-width: 1024px) and (max-width: 1099px) { .svc .fit-submittals-facts-rr-rates { text-wrap: wrap; max-width: 9.5em; } }
@media (min-width: 1100px) and (max-width: 1279px) { .svc .fit-buyout-facts-turnkey { text-wrap: wrap; max-width: 15em; } .svc .fit-submittals-facts-def { text-wrap: wrap; max-width: 28.5em; } .svc .fit-submittals-facts-delivered-in { text-wrap: wrap; max-width: 13em; } }
@media (min-width: 1280px) and (max-width: 1439px) { .svc .fit-buyout-facts-scope-gaps { text-wrap: wrap; max-width: 8em; } .svc .fit-buyout-hero-subhead { text-wrap: wrap; max-width: 23em; } .svc .fit-submittals-facts-def { text-wrap: wrap; } .svc .fit-submittals-facts-delivered-in { text-wrap: wrap; max-width: 13em; } .svc .fit-submittals-facts-review-time { text-wrap: wrap; max-width: 8.5em; } .svc .fit-submittals-hero-subhead { text-wrap: wrap; max-width: 21.5em; } }
@media (min-width: 1440px) { .svc .fit-buyout-facts-scope-gaps { text-wrap: wrap; max-width: 8em; } .svc .fit-submittals-facts-award-to-approval { text-wrap: wrap; max-width: 18em; } .svc .fit-submittals-facts-review-time { text-wrap: wrap; max-width: 8.5em; } .svc .fit-submittals-facts-rr-rates { text-wrap: wrap; max-width: 9.5em; } }
/* @gen-fit:end */