/* Variant C — stacked gallery. The headline stands alone and centred on the
   page ground; the photograph sits beneath it as a wide frame on a tinted
   band, never behind the words. The offerings run four across with the
   first at double width, the offer is a solid band in the action colour,
   the provider splits title from text, the numerals go large, the FAQ runs
   in two columns. Same DOM, same behaviour, same tap geometry. */
/* grounds */
.offerings { background: var(--theme-background); } .work { background: var(--theme-surface); } .steps { background: var(--theme-background); } .provider { background: var(--theme-surface); } .faq { background: var(--theme-background); }
/* sequence */
.hero { order: 1; } .trust { order: 2; } .offerings { order: 3; } .work { order: 4; } .steps { order: 5; } .offer { order: 6; } .provider { order: 7; } .faq { order: 8; } .close { order: 9; }
:root { --sec-y: clamp(72px, 8.5vw, 128px); --hdr-h: 72px; --head-gap: clamp(24px, 3.5vw, 48px); --radius: 0px; }

/* hero: words above, frame below on a band */
.hero { position: relative; overflow-x: clip; isolation: isolate; }

.hero__in { display: grid; justify-items: center; text-align: center; gap: clamp(32px, 5vw, 64px); padding-block: clamp(48px, 7vw, 96px) 0; }
.hero__copy { order: 1; display: grid; justify-items: center; }
.hero .h1 { max-width: 20ch; margin-inline: auto; }
.hero .lede { max-width: 50ch; margin: 1em auto 0; }
.hero .acts { justify-content: center; }
.hero__media { order: 2; width: 100vw; margin-inline: calc(50% - 50vw); aspect-ratio: 4 / 3; }
@media (min-width: 760px) { .hero__media { aspect-ratio: 21 / 9; max-height: 78svh; } }
.hero__media img { object-position: var(--focus, 50% 40%); }
.hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, color-mix(in oklab, var(--theme-text) 22%, transparent) 0%, transparent 36%); }

/* trust: big centred statement, label above */
.trust { text-align: center; padding-block: clamp(56px, 8vw, 128px); }
.trust__in { justify-items: center; max-width: 60rem; }
.trust__line { max-width: 24ch; font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem); }
.trust__src::before { display: none; }

/* offerings: four across, the first doubled */
.offerings__list { grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 36px) clamp(14px, 2vw, 24px); }
.offering { gap: 14px; align-content: start; }
.offering__media { aspect-ratio: 4 / 5; }
.offering:first-child { grid-column: 1 / -1; }
.offering:first-child .offering__media { aspect-ratio: 16 / 10; }
@media (min-width: 960px) {
  .offerings__list { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .offering:first-child { grid-column: 1; }
  .offering:first-child .offering__media { aspect-ratio: auto; height: 100%; }
  .offering:first-child { grid-template-rows: 1fr auto; }
  .offering:first-child .offering__body { align-self: end; }
}

/* work: ledger, generous */
.work__in { max-width: 70rem; }
.work__item { padding-block: 26px; }
@media (min-width: 760px) { .work--gallery .work__list { grid-template-columns: 1fr 1fr; } .work--gallery .work__item:first-child { grid-column: 1 / -1; } .work--gallery .work__item:first-child .work__media { aspect-ratio: 21 / 9; } }

/* offer: a solid band in the action colour */
.offer { background: var(--theme-action); color: var(--theme-action-text); border-block: 0; }
.offer .btn-primary { background: var(--theme-action-text); color: var(--theme-action); }
.offer .btn-primary:hover { background: color-mix(in oklab, var(--theme-action-text) 88%, var(--theme-action)); }
@media (min-width: 800px) { .offer__in { grid-template-columns: 1fr auto; align-items: end; column-gap: 48px; } .offer .btn { margin-top: 0; } }

/* provider: title split from text; a portrait takes a narrow column */
.provider__media { width: min(100%, 420px); }
@media (min-width: 900px) {
  .provider--portrait .provider__in { grid-template-columns: 4fr 7fr; align-items: end; column-gap: clamp(32px, 5vw, 96px); }
  .provider--portrait .provider__media { width: 100%; }
}

/* steps: ghost numerals behind, very large, on a surface band after the gallery */
.steps__list { grid-template-columns: 1fr; gap: clamp(28px, 3vw, 48px); }
@media (min-width: 760px) { .steps__list { grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); } }


/* faq: two columns */
@media (min-width: 900px) {
  .faq__in { width: min(100% - 2 * var(--gutter), var(--wrap)); max-width: none; }
  .faq__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 80px); align-items: start; }
}

.close { text-align: center; background: var(--theme-dark); color: var(--theme-light); }
.close .btn-ghost { border-color: color-mix(in oklab, var(--theme-light) 45%, transparent); }
.close__in { display: grid; justify-items: center; max-width: none; }
.close__title { max-width: 18ch; }
.close .acts { justify-content: center; }

/* the mid-page ask stays in the page but is not shown */
.offer { display: none; }