/* Variant A — editorial split. Left-aligned, generous air, image as a full-height
   plate bled off the right edge, cards as an open 2×2 gallery, offer and provider
   asymmetric. Axes moved vs B: hero geometry, alignment, scale, spacing
   rhythm, card composition, image treatment, header density, decorative
   treatment, visual density. */
:root { --sec-y: clamp(72px, 10vw, 144px); --hdr-h: 80px; --head-gap: clamp(24px, 3.5vw, 44px); }

/* The plate bleeds off the right edge and runs the full hero height; a boxed
   thumbnail floating in cream is what made the split read as a template. */
.hero { overflow-x: clip; }
.hero__in { display: grid; gap: clamp(28px, 4vw, 56px); padding-block: clamp(32px, 6vw, 64px) 0; }
.hero__copy { order: 1; }
.hero__media { order: 2; aspect-ratio: 4 / 3; margin-inline: calc(-1 * var(--gutter)); }
.hero__media img { object-position: var(--focus, 50% 30%); }
/* A soft vignette on the plate: the edges and the top recede a little, so a
   bright wall or poster behind the people stops pulling the eye. */
.hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(to bottom, color-mix(in oklab, var(--theme-text) 50%, transparent) 0%, color-mix(in oklab, var(--theme-text) 15%, transparent) 30%, transparent 45%),
  radial-gradient(ellipse 80% 75% at 50% 58%, transparent 55%, color-mix(in oklab, var(--theme-text) 35%, transparent) 100%); }
@media (min-width: 900px) {
  .hero__in { grid-template-columns: 5fr 7fr; gap: clamp(48px, 6vw, 96px); padding-block: 0; min-height: min(calc(90svh - var(--hdr-h)), 780px); }
  .hero__copy { align-self: center; padding-block: clamp(56px, 7vw, 112px); }
  .hero__media { aspect-ratio: auto; margin-inline: 0 calc((min(100vw - 2 * var(--gutter), var(--wrap)) - 100vw) / 2); }
}
.hero .h1 { max-width: 16ch; font-size: clamp(2.3rem, 1.5rem + 2.4vw, 3.6rem); }
.hero .lede { margin-top: 1.4em; max-width: 42ch; }

.trust__in { grid-template-columns: 1fr; }
@media (min-width: 700px) { .trust__in { grid-template-columns: 160px 1fr; align-items: baseline; gap: 24px; } }

.cards { grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards { grid-template-columns: 1fr 1fr; } }
.card { gap: 16px; }
.card__body { display: grid; gap: 4px; padding-right: 8px; }
.card__media { border-radius: 2px; }
.card__n { margin-bottom: 4px; }

.offer__in { padding-left: clamp(0px, 4vw, 48px); border-left: 2px solid var(--theme-accent); }

.provider__in { grid-template-columns: 1fr; }
.provider--expertise .provider__copy, .provider--nameplate .provider__copy { max-width: 62ch; }

.steps__list { grid-template-columns: 1fr; }
@media (min-width: 760px) { .steps__list { grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); } }
.step { padding-top: 20px; border-top: 1px solid var(--theme-line); }

.faq__in { max-width: 820px; margin-inline: 0; }
@media (min-width: 900px) { .faq__in { width: min(100% - 2 * var(--gutter), var(--wrap)); display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: start; max-width: none; } .faq .sec-head { position: sticky; top: calc(var(--hdr-h-shrunk) + 24px); } }

.close { background: var(--theme-surface); }
.close__in { max-width: 62ch; }