/* ==== css/pages.css ==== */
/* pages.css: the component pages (the service, industry, page and listing routes), loaded on those pages only, after the
   frame's stylesheet (fonts, tokens, base, sections, forms, national, motion, site). Tokens only, no new color. Base styles
   are the finished frame: nothing here hides anything; the reveals, the rinse edge and the timeline's lit steps stay in
   motion.css under html.motion-on, and every transition here sits inside prefers-reduced-motion: no-preference.
   Type keeps the house's two display voices: 800 at width 112 for the h1 and the section titles, 700 at width 100 for card,
   item and step titles; the mono face at 500 and 700 only, never under 11.5 px. Measures: prose 68ch, ledes 30em, captions
   60ch, the consent line and the preview notice 48ch. Every grid track is minmax(0, 1fr) with min-width: 0 children. */

/* ---------------------------------------------------------------- the hero (deck) */
.pg-hero { padding-block: 22px 44px; border-bottom: 1px solid var(--rule-dark); }
.pg-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.pg-hero-grid > * { min-width: 0; }
.pg-hero .crumbs { margin-bottom: 16px; }
/* phones: the trail shows the way back and the kicker names the page, so the trail's last item (the kicker's own words) is
   left to screen readers instead of wrapping onto a line that opens on a chevron (P2-FIXLIST item 14) */
@media (max-width: 759px) {
  .pg-hero .crumbs-list li[aria-current] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
.pg-hero .page-kicker { margin: 0 0 12px; }
.pg-hero-title .pivot { display: block; color: var(--sky); }
/* phones: the concept's phone voice (stretch 75 with its metric-matched fallback) at a size that follows the column, and the
   pivot phrase runs on in sky instead of forcing a new line, so every headline holds three lines from 320 px (P2-FIXLIST
   items 3 to 5; measured on all twenty pages from 320 to 759 px) */
@media (max-width: 759px) {
  .pg-hero-title { font-stretch: 75%; font-family: "Archivo Variable", "Archivo Variable Fallback 75", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(1.75rem, calc((100vw - 2 * var(--gutter)) * 0.105), 2.5rem); }
  .pg-hero-title .pivot { display: inline; }
}
.pg-hero-deck { margin-top: 16px; max-width: 60ch; color: var(--dim); font-size: 16.5px; line-height: 1.55; }
.pg-hero-deck a { color: var(--sky); }
.pg-hero-ctas { margin-top: 26px; }
/* phones: the inner pages' two hero actions stack at full width with the shared button's own padding and size. The national
   homepage's phone hero sets them side by side at 10 px padding and 14 px (national.css, 10/18), and the frame bundle carries
   that rule to every page, where a long label ran into its border at 375 px (the FoamStream post, seen 2026-10-20) */
@media (max-width: 759px) {
  .pg-hero-ctas { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pg-hero-ctas .btn { padding-inline: 22px; font-size: 16px; white-space: normal; }
}
.pg-hero-trust { margin-top: 20px; max-width: 60ch; }
.pg-hero-trust a { white-space: nowrap; }   /* a named job never breaks across lines (34 characters at most fit 320 px) */
.pg-hero-media { margin: 30px 0 0; min-width: 0; }
.pg-hero-frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--deck-2); box-shadow: 0 0 0 1px var(--rule-dark); }
.pg-hero-frame > picture { position: absolute; inset: 0; }
.pg-hero-frame img { width: 100%; height: 100%; object-fit: cover; }
.pg-hero-media .caption { max-width: 60ch; color: var(--dim); }
.pg-hero-summary { margin-top: 30px; padding: 24px; background: var(--deck-2); border: 1px solid var(--rule-dark); border-radius: var(--radius); color: var(--paper); }
.pg-hero-summary .kicker { margin-bottom: 18px; color: var(--sky); }
.pg-hero-summary .svc-method-points { gap: 14px; }
.pg-hero-summary .svc-method-points li { padding-top: 14px; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
@media (min-width: 760px) {
  .pg-hero { padding-block: 32px 64px; }
  .pg-hero-deck { font-size: var(--lede); }
  .pg-hero-frame { aspect-ratio: 3 / 2; }
}
/* the headline holds three lines or fewer from 320 to 1440 px (P2-FIXLIST items 3 to 5): from 1024 px the breadcrumb, the
   kicker and the h1 run the whole container above the deck and the picture, so the display size keeps its measure */
@media (min-width: 1024px) {
  .pg-hero-grid:has(> .pg-hero-media) { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); column-gap: 56px; align-items: start; }
  .pg-hero-head { grid-column: 1 / -1; }
  .pg-hero-copy { max-width: 48rem; }
  .pg-hero-grid:has(> .pg-hero-media) > .pg-hero-media { margin-top: 22px; }
  .pg-hero-grid:has(> .pg-hero-summary) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 64px; align-items: start; }
  .pg-hero-summary { margin-top: 22px; padding: 28px 32px; }
  .pg-hero-frame { aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------------- every section */
.pg-sec { position: relative; }
/* an untitled block (a callout, a pull quote, a figure) on the same surface continues the section before it */
.pg-sec.pg-join { padding-top: 0; margin-top: calc(var(--section) * -0.45); }
.pg-sec .section-head { max-width: 54rem; }
.pg-sec .section-head .lede { max-width: 34em; }
.pg-figure { margin: 0; min-width: 0; }
.pg-figure .caption { max-width: 60ch; }
.pg-frame { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--mist); box-shadow: 0 0 0 1px var(--rule); }
.surface-deck .pg-frame { background: var(--deck-2); }
.pg-frame img { width: 100%; }
.pg-figure--contained { max-width: 860px; }
/* from 1100 px the contained figure's caption stands in the column beside it, at the figure's foot, so the container's last
   third reads as the caption's margin instead of a missing column (P2-FIXLIST item 13) */
@media (min-width: 1100px) {
  .pg-figure--contained:has(> figcaption) { display: grid; grid-template-columns: minmax(0, 860px) minmax(0, 1fr); column-gap: 36px; align-items: end; max-width: none; }
  .pg-figure--contained > figcaption { margin: 0; padding-top: 12px; border-top: 2px solid var(--accent); max-width: 30ch; font-size: 13px; }
}
/* a figure never stands taller than about three quarters of the screen (pane_qa oversized at 1280 x 800: the wide ones at
   1160 px, a 4:3 one at 860 px): it crops to its focus point instead */
@media (min-width: 1024px) {
  .pg-figure--wide .pg-frame img, .pg-figure--contained .pg-frame img { max-height: min(72vh, 600px); object-fit: cover; }
}

/* ---------------------------------------------------------------- prose, with an optional aside */
.pg-prose { max-width: 68ch; min-width: 0; }
.pg-prose > * + * { margin-top: 1em; }
.pg-prose p { line-height: 1.65; }
.pg-prose h3 { margin-top: 1.7em; font-size: 1.375rem; }
.pg-prose > h3:first-child { margin-top: 0; }
ul.pg-list, ol.pg-list { display: grid; gap: 0.55em; padding-left: 1.3em; }
ul.pg-list { list-style: disc; }
ol.pg-list { list-style: decimal; padding-left: 1.75em; }
.pg-list li { padding-left: 0.2em; line-height: 1.6; }
.pg-list li::marker { color: var(--accent); font-family: var(--font-mono); font-weight: 500; }
.pg-prose-grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
.pg-prose-grid > * { min-width: 0; }
.pg-aside { display: grid; gap: 10px; align-content: start; padding: 22px 22px 24px; border-radius: var(--radius); background: var(--paper); box-shadow: inset 3px 0 0 var(--blue-text), 0 0 0 1px var(--line); }
.surface-paper .pg-aside { background: var(--mist); }
.pg-aside-title { font-size: 1.125rem; }
.pg-aside p { color: var(--ink); font-size: 15.5px; line-height: 1.55; }
@media (min-width: 1024px) { .pg-prose-grid { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 64px; align-items: start; } }

/* ---------------------------------------------------------------- split: copy beside a figure */
.pg-split { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
.pg-split > * { min-width: 0; }
.pg-split-copy .section-head { margin-bottom: 22px; }
.pg-split-actions { margin-top: 26px; }
@media (min-width: 1024px) {
  .pg-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; align-items: center; }
  .pg-split--media-left { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .pg-split--media-left > .pg-split-media { order: -1; }
}

/* ---------------------------------------------------------------- steps: the mission line (motion.js draws it through
   [data-timeline]; the finished frame is every step lit) */
.pg-steps { margin: 0; }
.pg-steps .mission-step h3 { font-size: 1.25rem; line-height: 1.2; color: var(--head); }
.pg-steps .mission-step p:not(.kicker) { color: var(--fg-2); }
.surface-paper .pg-steps .mission-step p:not(.kicker), .surface-mist .pg-steps .mission-step p:not(.kicker) { color: var(--ink); }
.surface-paper .pg-steps .mission-dot, .surface-mist .pg-steps .mission-dot { box-shadow: inset 0 0 0 2px var(--blue-text); }
@media (prefers-reduced-motion: no-preference) {
  /* on paper and mist an unlit step rests at .85 (its kicker 4.8:1, its body 8.6:1), as the homepage's method does */
  html.motion-on .surface-paper .pg-steps > [data-step], html.motion-on .surface-mist .pg-steps > [data-step] { opacity: .85; }
  html.motion-on .surface-paper .pg-steps > [data-step].is-lit, html.motion-on .surface-mist .pg-steps > [data-step].is-lit { opacity: 1; }
}
@media (min-width: 900px) {
  .pg-steps[data-items="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* five steps stand in a column until each has room for its sentence */
  .pg-steps[data-items="5"] { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .pg-steps[data-items="5"] .mission-step { padding: 0 0 0 32px; }
}
@media (min-width: 1100px) {
  .pg-steps[data-items="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
  .pg-steps[data-items="5"] .mission-step { padding: 30px 0 0; }
}

/* ---------------------------------------------------------------- grid: what we clean (cards, with or without photos) */
.pg-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.pg-card { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--radius); background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.pg-grid:not(.pg-grid--media) .pg-card { box-shadow: inset 3px 0 0 var(--blue-text), 0 0 0 1px var(--line); }
.pg-card-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: var(--mist); }
.pg-card-media.svc-media--type { background: var(--deck-2); }
.pg-card-media > picture { position: absolute; inset: 0; }
.pg-card-media img { width: 100%; height: 100%; object-fit: cover; }
.pg-card-body { display: grid; gap: 10px; align-content: start; padding: 20px 20px 22px; }
.pg-card-title { font-size: 1.25rem; }
.pg-card-text { color: var(--ink); line-height: 1.55; }
.pg-card.is-link:hover { box-shadow: 0 0 0 1px var(--blue-text); }
.pg-grid:not(.pg-grid--media) .pg-card.is-link:hover { box-shadow: inset 3px 0 0 var(--blue-text), 0 0 0 1px var(--blue-text); }
@media (min-width: 640px) { .pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1024px) { .pg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

/* a card's cover link: the title is the link and its box covers the card (one link, one tab stop) */
.pg-cover { color: var(--navy); text-decoration: none; }
.pg-cover::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--radius); }
.pg-cover:focus-visible { outline: none; }
.pg-cover:focus-visible::after { outline: 2px solid var(--blue); outline-offset: 2px; }
.pg-cover .arrow { display: inline-block; width: 0.72em; height: 0.72em; margin-left: 0.25em; vertical-align: -0.02em; color: var(--blue-text); }
.pg-card.is-link:hover .pg-cover, .pg-link-card:hover .pg-cover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.16em; }

/* ---------------------------------------------------------------- facts: tiles (the figure over its label) or rows */
.pg-facts { display: grid; margin: 0; }
.pg-facts--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border-radius: var(--radius); background: var(--rule); box-shadow: 0 0 0 1px var(--rule); }
.pg-facts--tiles > .pg-fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pg-facts--tiles .pg-fact { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; min-width: 0; padding: 16px 14px 18px 16px; background: var(--surface); }
.pg-fact-value { margin: 0; font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--accent); overflow-wrap: anywhere; }
.pg-fact-value.is-long { font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem); line-height: 1.25; text-wrap: balance; }
.pg-fact-label { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; line-height: 1.35; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }
.pg-facts--rows { border-top: 1px solid var(--rule); }
.pg-facts--rows .pg-fact { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.pg-facts--rows .pg-fact-value { font-size: 1.0625rem; color: var(--head); }
.pg-fact-text { margin: 0; color: var(--fg); line-height: 1.55; max-width: 62ch; }
.pg-facts-note { margin-top: 14px; max-width: 60ch; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
@media (min-width: 760px) { .pg-facts--rows .pg-fact { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 24px; align-items: baseline; } }
@media (min-width: 900px) {
  .pg-facts--tiles[data-items="3"], .pg-facts--tiles[data-items="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-facts--tiles[data-items="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pg-facts--tiles[data-items="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pg-facts--tiles > .pg-fact:last-child:nth-child(odd) { grid-column: auto; }
}

/* ---------------------------------------------------------------- callout: a note with the blue edge, or a band */
.pg-callout { display: grid; gap: 12px; max-width: 54rem; padding: 22px 22px 24px; border-radius: var(--radius); background: var(--paper); box-shadow: inset 3px 0 0 var(--blue-text), 0 0 0 1px var(--line); }
.surface-paper .pg-callout--note { background: var(--mist); }
.pg-callout-title { font-size: 1.375rem; }
.pg-callout-text { display: grid; gap: 10px; }
.pg-callout-text p { color: var(--ink); line-height: 1.6; max-width: 64ch; }
.pg-callout-action { margin-top: 4px; }
.pg-callout--band { max-width: none; padding: clamp(24px, 3.4vw, 48px); background: var(--band); box-shadow: none; }
.pg-callout--band .pg-callout-title { color: var(--paper); font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); }
.pg-callout--band .pg-callout-text p { color: var(--paper); font-size: var(--lede); line-height: 1.5; max-width: 40em; }

/* ---------------------------------------------------------------- checklist: named procedures, ticked (deck or light) */
.pg-checks { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.pg-check-group { min-width: 0; padding-top: 16px; border-top: 2px solid var(--accent); }
.pg-check-title { margin-bottom: 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; font-stretch: 100%; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.pg-check-group ul { margin: 0; padding: 0; list-style: none; }
.pg-check-group li { position: relative; padding: 9px 0 9px 24px; border-top: 1px solid var(--rule); color: var(--fg); line-height: 1.45; }
.pg-check-group li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 9px; height: 5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.pg-check-group li small { display: block; margin-top: 3px; color: var(--fg-2); font-size: 0.9em; line-height: 1.45; }
@media (min-width: 760px) { .pg-checks:not([data-items="1"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 28px; } }
@media (min-width: 1024px) { .pg-checks[data-items="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- testimonials: rows (the context beside the words) or cards */
.pg-quotes { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.pg-quote-card { min-width: 0; padding: 26px 22px 22px; border-radius: var(--radius); background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.pg-quote { margin: 0; }
.pg-quotes--single { max-width: 54rem; }
.pg-quotes--single .pg-quote-card { padding: clamp(26px, 3vw, 40px); }
.pg-quotes--single .pg-quote blockquote p { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem); }
.pg-quotes + .who-typicality { padding-top: 18px; }
/* a quote of several paragraphs opens each one and closes only the last, as the case plates do (.plate-quote) */
.pg-quote blockquote p:not(:last-child)::after { content: none; }
@media (min-width: 900px) { .pg-quotes:not(.pg-quotes--single) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.pg-quotes-rows .who-line a { color: var(--blue-text); }

/* ---------------------------------------------------------------- pull quote: the company's own words on the band */
.pg-pull { margin-top: 0; }
/* the drawn quotation mark (the motion layer's, on every quote) hangs in its own gutter: the quote starts clear of it, so the
   quote's own opening mark never sits under the drawing (P2-FIXLIST item 15) */
.pg .who-quote.motion-qmark-host { padding-left: 36px; }
.pg .band-quote.motion-qmark-host > figure { padding-left: 36px; }
@media (min-width: 760px) {
  .pg .who-quote.motion-qmark-host { padding-left: 42px; }
  .pg .band-quote.motion-qmark-host > figure { padding-left: 42px; }
}

/* ---------------------------------------------------------------- related links */
.pg-links { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.pg-link-card { position: relative; display: grid; gap: 8px; align-content: start; min-width: 0; padding: 20px 20px 22px; border-radius: var(--radius); background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.pg-link-card:hover { box-shadow: 0 0 0 1px var(--blue-text); }
.pg-link-title { font-size: 1.25rem; }   /* the display face never under 20 px (DT2; P2-FIXLIST item 18) */
.pg-link-card p { color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
@media (min-width: 640px) { .pg-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pg-links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
/* four cards stand two by two from 1024 px and four across from 1240 px; seven and eight run four across from 1240 px */
@media (min-width: 1024px) { .pg-links[data-items="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .pg-links:is([data-items="4"], [data-items="7"], [data-items="8"]) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- FAQ (the homepage's accordion, a wider answer) */
.pg-sec--faq .faq-a { max-width: 62ch; }

/* ---------------------------------------------------------------- the call to action band */
.pg-sec--cta { padding-block: clamp(48px, 5vw + 24px, 96px); }
.pg-cta { display: grid; gap: 24px; align-items: end; }
.pg-cta-copy { display: grid; gap: 14px; max-width: 44rem; }
.pg-cta-copy h2 { padding-bottom: 0.06em; }
.pg-cta-copy .lede { color: var(--fg-2); max-width: 36em; }
.pg-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 479px) { .pg-cta-actions .btn { width: 100%; } }
@media (min-width: 1024px) { .pg-cta { grid-template-columns: minmax(0, 1fr) auto; column-gap: 56px; } }

/* ---------------------------------------------------------------- video: a poster that loads the player only when pressed */
.pg-videos { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.pg-videos--single { max-width: 860px; }
.pg-video { display: grid; gap: 14px; align-content: start; min-width: 0; }
.pg-video-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius); background: var(--deck); box-shadow: 0 0 0 1px var(--rule); }
.pg-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pg-video-play { position: absolute; inset: 0; display: block; color: var(--paper); }
.pg-video-play > picture { position: absolute; inset: 0; }
.pg-video-play img { width: 100%; height: 100%; object-fit: cover; }
.pg-video-btn { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(15, 17, 52, .84); box-shadow: inset 0 0 0 2px var(--sky), 0 8px 24px rgba(15, 17, 52, .35); }
.pg-video-btn::before { content: ""; position: absolute; left: 28px; top: 23px; width: 22px; height: 26px; background: var(--paper); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.pg-video-play:hover .pg-video-btn { background: var(--deck); }
.pg-video-play:focus-visible { outline: none; }
.pg-video-play:focus-visible .pg-video-btn { outline: 3px solid var(--sky); outline-offset: 3px; }
.pg-video-body { display: grid; gap: 8px; }
.pg-video-title { font-size: 1.25rem; }
.pg-video-meta { font-family: var(--font-mono); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.pg-video-body p:not(.pg-video-meta) { color: var(--fg); line-height: 1.55; max-width: 60ch; }
@media (min-width: 760px) { .pg-videos:not(.pg-videos--single) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; } }

/* ---------------------------------------------------------------- forms on these pages: the lead form and the quote section */
.pg-sec--lead-form .form-sheet { max-width: 62rem; }
.pg-choice { margin: 0; padding: 0; border: 0; min-width: 0; }
.pg-choice > .form-label { display: block; margin-bottom: 8px; }
.pg-choice .seg { grid-template-columns: minmax(0, 1fr); }
/* checkboxes: the radio cards' look with a square mark that draws a check */
.seg.pg-choice-checkbox input { border-radius: 4px; }
.seg.pg-choice-checkbox input::before { width: 12px; height: 12px; border-radius: 0; clip-path: polygon(14% 46%, 0 64%, 42% 100%, 100% 18%, 84% 4%, 40% 66%); }
@media (min-width: 640px) { .pg-choice .seg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .pg-lead-form .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-choice .seg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* the consent line and the preview notice hold about 48 characters a line (the notice's box hugs its text); the phone link
   under a form is a full target on phones */
.form-consent label, .form-notice > span, #quote-form .form-consent label { max-width: 48ch; }
.form-notice, #quote-form .form-notice { width: fit-content; max-width: 100%; }
@media (max-width: 759px) {
  .form-help a[href^="tel"] { display: inline-flex; align-items: center; min-height: 44px; }
  /* the call bar steps aside while a lead form is on screen (pages.js sets the class), as it does over the quote form */
  html.pg-lead-in-view .callbar { transform: translateY(110%); visibility: hidden; }
}

/* ---------------------------------------------------------------- the office (the Colorado page's office block) */
.pg-office { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.pg-office > * { min-width: 0; }
.pg-office .map-office { display: grid; gap: 12px; align-content: start; padding: 24px 24px 26px; border-radius: var(--radius); background: var(--paper); box-shadow: inset 3px 0 0 var(--blue-text), 0 0 0 1px var(--line); }
.surface-paper .pg-office .map-office { background: var(--mist); }
.pg-office .map-office > * { min-width: 0; margin: 0; }
.pg-office .map-office-kicker { display: inline-flex; align-items: center; gap: 10px; }
.pg-office .map-office-title { font-size: clamp(1.625rem, 1.25rem + 1.2vw, 2.25rem); line-height: 1.08; color: var(--navy); }
.pg-office .map-office-line { max-width: 52ch; font-size: 16.5px; line-height: 1.6; color: var(--ink); }
.pg-office .map-office-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-top: 6px; }
.pg-office .map-office-directions { color: var(--blue-text); }
/* the office pin: the map's home glyph, a drop with an open center */
.pg-office .map-pin { position: relative; display: inline-block; flex: none; box-sizing: border-box; }
.pg-office .map-pin-corporate { width: 14px; height: 14px; margin: 1px; border-radius: 50% 50% 50% 0; background: var(--navy); box-shadow: 0 0 0 2px var(--blue); transform: rotate(-45deg); }
.pg-office .map-pin-corporate::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--paper); }
.pg-direct { display: grid; gap: 2px; align-content: start; justify-items: start; padding-top: 22px; border-top: 1px solid var(--rule); }
.pg-direct .kicker { margin-bottom: 6px; }
.pg-direct a { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; font-variant-numeric: tabular-nums; }
.pg-direct a.pg-direct-tel { font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); font-weight: 700; }
.pg-office-map { margin: 0; }
.pg-office-map-frame { overflow: hidden; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); }
.pg-office-map-credit { max-width: 60ch; }   /* the basemap's credit under the still, as the Colorado page prints it */
@media (min-width: 900px) {
  .pg-office { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: start; }
  .pg-direct { padding: 26px 0 0 28px; border-top: 0; border-left: 1px solid var(--rule); }
  .pg-office--map { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); row-gap: 28px; }
  .pg-office--map .pg-direct { padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--rule); }
  .pg-office--map .pg-office-map { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------------------------------------------------------------- compare: the before and after wipe (main.js drives it) */
.pg-compare { margin: 0; }
.pg-compare .caption { max-width: 60ch; }
.surface-deck .pg-compare-frame { box-shadow: 0 0 0 1px var(--rule-dark); }

/* ---------------------------------------------------------------- the franchise door (the notice and the counsel line under its button) */
.pg-franchise-media { position: relative; width: 100%; margin: 0 0 clamp(32px, 4vw, 56px); aspect-ratio: 21 / 9; max-height: 480px; overflow: hidden; }
.pg-franchise-media > picture { position: absolute; inset: 0; }
.pg-franchise-media img { width: 100%; height: 100%; object-fit: cover; }
.pg-sec--franchise:has(> .pg-franchise-media) { padding-top: 0; }
.pg-franchise-text p { color: var(--paper); }

/* ---------------------------------------------------------------- hover and press, only where motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  .pg-card, .pg-link-card { transition: box-shadow .16s ease; }
  .pg-cover .arrow { transition: transform .16s ease; }
  .pg-card.is-link:hover .pg-cover .arrow, .pg-link-card:hover .pg-cover .arrow { transform: translateX(3px); }
  .pg-video-btn { transition: transform .16s ease, background-color .16s ease; }
  .pg-video-play:hover .pg-video-btn { transform: scale(1.06); }
}

/* ---------------------------------------------------------------- print: the finished page */
@media print {
  .pg-video-btn { display: none; }
  .pg-hero { border-bottom: 0; }
}