/* Variant B — cinematic. The photograph is the ground of the whole first
   screen and the header sits transparent on it until the page scrolls; the
   words stand bottom-left. Below, the page is centred and denser: the
   offerings lead with one wide frame and three beneath it, steps run as a
   vertical ledger, the close inverts to ink. Same DOM, same behaviour, same
   tap geometry. */
/* grounds */
.work { background: var(--theme-background); } .offerings { background: var(--theme-surface); } .steps { background: var(--theme-background); } .offer { background: var(--accent-soft); } .provider { background: var(--theme-surface); } .faq { background: var(--theme-background); }
/* sequence */
.hero { order: 1; } .trust { order: 2; } .work { order: 3; } .offerings { order: 4; } .steps { order: 5; } .offer { order: 6; } .provider { order: 7; } .faq { order: 8; } .close { order: 9; }
:root { --sec-y: clamp(64px, 8vw, 120px); --hdr-h: 68px; --head-gap: clamp(20px, 3vw, 40px); --radius: 2px; }

/* header: transparent over the hero, solid once scrolled */
.hdr:not(.is-shrunk) { background: transparent; border-color: transparent; color: var(--theme-light); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* over the photo the logo reads in white, as a lockup made for a dark header
   does; the solid bar after scroll shows its own colours */
.hdr:not(.is-shrunk) .brand__logo { filter: brightness(0) invert(1); }
.hdr:not(.is-shrunk) .brand__city { color: color-mix(in oklab, var(--theme-light) 72%, transparent); }
.hero { margin-top: calc(-1 * var(--hdr-h)); }

/* hero: image as ground, copy bottom-left */
.hero { position: relative; isolation: isolate; color: var(--theme-light); background: var(--theme-dark); }
.hero__in { display: grid; min-height: min(100svh, 860px); align-content: end; justify-items: start; text-align: start; padding-block: calc(var(--hdr-h) + clamp(96px, 14vw, 180px)) clamp(48px, 7vw, 88px); }
.hero__copy { order: 2; position: relative; z-index: 1; display: grid; justify-items: start; max-width: 46rem; }
.hero__media { order: 1; position: absolute; inset: 0; z-index: 0; aspect-ratio: auto; background: var(--theme-dark); }
.hero__media img { filter: var(--media-grade) brightness(0.82); }
.hero__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(to top, color-mix(in oklab, var(--theme-dark) 92%, transparent) 0%, color-mix(in oklab, var(--theme-dark) 48%, transparent) 40%, transparent 66%),
  linear-gradient(to right, color-mix(in oklab, var(--theme-dark) 55%, transparent) 0%, transparent 60%),
  linear-gradient(to bottom, color-mix(in oklab, var(--theme-dark) 60%, transparent) 0%, transparent 32%); }
.hero .h1 { max-width: 12ch; }
.hero .lede { color: color-mix(in oklab, var(--theme-light) 84%, transparent); max-width: 44ch; }
.hero .chip { border-color: color-mix(in oklab, var(--theme-light) 40%, transparent); }
.hero .btn-ghost { border-color: color-mix(in oklab, var(--theme-light) 50%, transparent); }
.hero .btn-ghost:hover { background: color-mix(in oklab, var(--theme-light) 12%, transparent); border-color: var(--theme-light); }
.hero__media.media--fallback::after { background: linear-gradient(135deg, var(--theme-action), var(--theme-dark)); opacity: 0.9; }

/* trust: centred statement */
.trust { text-align: center; border-top: 1px solid color-mix(in oklab, var(--theme-light) 18%, transparent); }
.trust__ground { -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, transparent 30%, currentColor 100%); mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, transparent 30%, currentColor 100%); }
.trust__in { justify-items: center; }
.trust__line { margin-inline: auto; max-width: 28ch; }
.trust__src::before { display: none; }

/* offerings: one wide frame leads, three beneath */
.offerings__head { text-align: center; }
.offerings .h2, .offerings .sec-intro { margin-inline: auto; }
.offerings__list { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 36px); }
.offering { gap: 14px; }
.offering:first-child .offering__media { aspect-ratio: 16 / 9; }
.offering:first-child .offering__body { display: grid; gap: 8px; }
.offering:first-child .h3 { font-size: var(--t-h2); }
.offering:first-child .offering__blurb { font-size: var(--t-body); max-width: 52ch; }
@media (min-width: 760px) {
  .offerings__list { grid-template-columns: repeat(3, 1fr); }
  .offering:first-child { grid-column: 1 / -1; }
  .offering:first-child .offering__media { aspect-ratio: 21 / 9; }
  .offering:first-child .offering__body { grid-template-columns: 5fr 7fr; column-gap: clamp(24px, 4vw, 64px); align-items: start; padding-top: 8px; }
  .offering:first-child .offering__blurb { margin-top: 0.35em; }
}

/* work: two-column ledger */
@media (min-width: 760px) { .work__list { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 4vw, 64px); } .work:not(.work--gallery) .work__item:nth-child(2) { border-top: 1px solid var(--hairline-strong); margin-top: -1px; } .work--gallery .work__list { grid-template-columns: repeat(3, 1fr); } }
.work__head { text-align: center; }
.work .h2 { margin-inline: auto; }
.work--gallery .work__media { aspect-ratio: 5 / 4; }


.offer { text-align: center; border-block: 0; }
.offer__in { justify-items: center; }
.offer__title { max-width: 24ch; }

/* provider: centred, portrait small */
.provider__in { text-align: center; justify-items: center; }
.provider--portrait .provider__copy { max-width: 56ch; }
.provider--nameplate .provider__copy, .provider--expertise .provider__copy { text-align: start; width: 100%; }
.provider__media { width: min(100%, 300px); }
.provider__media::before { transform: translate(12px, 12px); }
@media (min-width: 800px) { .provider--portrait .provider__in { grid-template-columns: 1fr; } }

/* steps: vertical ledger, numerals in a gutter */
.steps--ghost .step { padding-top: 26px; }
.steps--ghost .step__n { position: static; font-size: var(--t-h2); color: var(--theme-accent); }
.steps__in { max-width: 760px; }
.steps__list { grid-template-columns: 1fr; gap: 0; }
.step { grid-template-columns: 72px 1fr; column-gap: 16px; padding-block: 26px; border-bottom: 1px solid var(--hairline); }
.step:first-child { border-top: 1px solid var(--hairline-strong); }
.step__n { grid-row: 1 / span 2; font-size: var(--t-h2); line-height: 1; padding-top: 2px; }
.step .h3 { grid-column: 2; }
.step p { grid-column: 2; max-width: 60ch; }

.faq__in { max-width: 760px; }
.faq__head { text-align: center; }
.faq .h2 { margin-inline: auto; }

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


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