/* Variant A — editorial split. The photograph is a plate bled off the right
   edge at full hero height; the words sit left with a great deal of air. The
   trust statement runs beside a narrow label column, the offerings run four
   equal columns, the FAQ head sticks. Widest
   rhythm of the three. Axes moved vs B and C: hero geometry, alignment,
   scale, spacing rhythm, offering composition, image treatment, header
   density, section rhythm, decorative treatment, visual density. */
/* grounds */
.offerings { background: var(--theme-background); } .work { background: var(--theme-dark); color: var(--theme-light); } .offer { background: var(--theme-background); border-top: 1px solid var(--hairline); } .provider { background: var(--theme-background); } .steps { background: var(--theme-surface); } .faq { background: var(--theme-background); }
/* sequence */
.hero { order: 1; } .trust { order: 2; } .offerings { order: 3; } .work { order: 4; } .offer { order: 5; } .provider { order: 6; } .steps { order: 7; } .faq { order: 8; } .close { order: 9; }
:root { --sec-y: clamp(80px, 10vw, 152px); --hdr-h: 80px; --head-gap: clamp(32px, 4.5vw, 64px); }

/* hero: 5/7 split, plate bleeds right, copy centred on the plate's height */
.hero { overflow-x: clip; }
.hero__in { display: grid; gap: clamp(32px, 4vw, 56px); padding-block: clamp(40px, 6vw, 72px) 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% 35%); }
.hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(to bottom, color-mix(in oklab, var(--theme-text) 42%, transparent) 0%, color-mix(in oklab, var(--theme-text) 12%, transparent) 30%, transparent 48%),
  radial-gradient(ellipse 85% 80% at 50% 58%, transparent 55%, color-mix(in oklab, var(--theme-text) 30%, transparent) 100%); }
@media (min-width: 900px) {
  .hero__in { grid-template-columns: 6fr 6fr; gap: 0; padding-block: 0; min-height: min(calc(100svh - var(--hdr-h)), 880px); }
  .hero__copy { grid-column: 1 / span 2; grid-row: 1; align-self: end; z-index: 1; padding-block: clamp(64px, 8vw, 128px); pointer-events: none; }
  .hero__copy > * { pointer-events: auto; }
  .hero__copy .lede, .hero__copy .acts, .hero__copy .chip { max-width: 44ch; margin-right: 50%; }
  .hero__media { grid-column: 2; grid-row: 1; aspect-ratio: auto; margin-inline: 0 calc((min(100vw - 2 * var(--gutter), var(--wrap)) - 100vw) / 2); }
  /* a faint dark fade along the plate's left edge and top */
  .hero__media::after { background:
    linear-gradient(to right, color-mix(in oklab, var(--theme-dark) 38%, transparent) 0%, transparent 42%),
    linear-gradient(to bottom, color-mix(in oklab, var(--theme-dark) 30%, transparent) 0%, transparent 40%); }
}
.hero .h1 { max-width: 11ch; text-wrap: balance; }
/* The headline stays on the page side of the split. It is sized to the copy
   column, not the viewport, so no word runs under the plate or gets cut by
   its edge. */
@media (min-width: 900px) {
  .hero__copy { --col: calc(min(100vw - 2 * var(--gutter), var(--wrap)) / 2 - clamp(32px, 4vw, 64px)); }
  .hero .h1 { max-width: var(--col); font-size: min(var(--t-display), calc(var(--col) / 5.6)); overflow-wrap: break-word; }
}
.hero .lede { margin-top: 1.5em; max-width: min(40ch, var(--col, 40ch)); }

/* trust: label column, statement beside it */
.trust__in { grid-template-columns: 1fr; }
@media (min-width: 760px) { .trust__in { grid-template-columns: 3fr 9fr; align-items: start; column-gap: clamp(24px, 4vw, 64px); } .trust__label { padding-top: 0.6em; } }
.trust { padding-block: clamp(56px, 7vw, 112px); }
/* the firm's own statement stands alone: no label, still in the right-hand column */
@media (min-width: 760px) { .trust--plain .trust__line { grid-column: 2; } }
.trust__line { max-width: 30ch; font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.6rem); }

/* offerings: four equal columns, photograph over heading over sentence, all
   on one baseline; two across on a tablet, one on a phone */
.offerings__head { display: grid; }
@media (min-width: 900px) { .offerings__head { grid-template-columns: 5fr 7fr; column-gap: clamp(48px, 6vw, 104px); align-items: end; } .offerings__head .label { grid-column: 1 / -1; } .offerings__head .sec-intro { margin-top: 0; padding-bottom: 0.35em; } }
.offerings__list { grid-template-columns: 1fr; gap: clamp(40px, 5vw, 56px) clamp(24px, 2.5vw, 36px); }
.offering { gap: 0; align-content: start; }
.offering__media { aspect-ratio: 3 / 2; border-radius: 0; margin-bottom: 22px; }
@media (min-width: 640px) { .offering__media { aspect-ratio: 4 / 5; } }
.offering__body { gap: 10px; padding-top: 18px; border-top: 1px solid var(--hairline-strong); }
.offering .h3 { font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); line-height: 1.2; }
.offering__blurb { max-width: 36ch; }
@media (min-width: 640px) { .offerings__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .offerings__list { grid-template-columns: repeat(4, 1fr); } .offering .h3 { min-height: 2.4em; } }

/* work: ledger in the right column; gallery two across with the first spanning */
.work__in { max-width: 62rem; }
.work:not(.work--gallery) .work__list { border-top: 1px solid currentColor; }
.work:not(.work--gallery) .work__item { grid-template-columns: 4.5rem 1fr; padding-block: clamp(24px, 2.6vw, 36px); border-bottom-color: color-mix(in oklab, currentColor 22%, transparent); }
.work:not(.work--gallery) .work__n { font-family: var(--theme-heading); font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); letter-spacing: 0; color: var(--theme-accent); }
.work:not(.work--gallery) .work__title { font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2.1rem); line-height: 1.15; }
.work:not(.work--gallery) .work__meta { font-size: var(--t-body, 1rem); margin-top: 8px; }
.work .work__meta { color: color-mix(in oklab, currentColor 82%, transparent); }
.work .work__detail { color: color-mix(in oklab, currentColor 58%, transparent); }
.work--gallery .work__n { color: color-mix(in oklab, currentColor 58%, transparent); }
/* on a dark palette the ink ground is the page ground; a hairline keeps the
   work from running on out of the offerings */
.work { border-top: 1px solid color-mix(in oklab, currentColor 12%, transparent); }
@media (min-width: 900px) { .work__in { width: min(100% - 2 * var(--gutter), var(--wrap)); display: grid; grid-template-columns: 5fr 7fr; column-gap: clamp(48px, 6vw, 104px); max-width: none; } .work__head { margin: 0; } .work--gallery .work__in { grid-template-columns: 1fr; } .work--gallery .work__head { margin-bottom: var(--head-gap); } }
@media (min-width: 760px) { .work--gallery .work__list { grid-template-columns: 2fr 1fr; grid-auto-flow: dense; } .work--gallery .work__item:first-child { grid-row: span 2; } .work--gallery .work__item:first-child .work__media { aspect-ratio: auto; height: 100%; min-height: 560px; } .work--gallery .work__item:first-child { grid-template-rows: 1fr auto auto auto; } .work--gallery .work__item:nth-child(n+4) { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 48px); grid-template-rows: 1fr repeat(4, auto) 1fr; grid-template-areas: "media ." "media n" "media title" "media meta" "media detail" "media ."; } }

.offer { border-block: 0; }
/* no mid-page ask: transactions run straight into the partner */
.offer { display: none; }
.offer__in { padding-left: clamp(0px, 4vw, 48px); border-left: 1px solid var(--theme-accent); }
@media (min-width: 900px) { .offer__in { grid-template-columns: 1fr auto; align-items: end; column-gap: 48px; } .offer .btn { margin-top: 0; } }

/* provider: portrait 5/7, or copy alone on the left half of the measure */
.provider__in { grid-template-columns: 1fr; }
/* the portrait supports the name, never outweighs the page: a third of the
   width beside the name on a phone, about two-thirds its old size on desktop */
.provider--portrait .provider__in { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); column-gap: 20px; align-items: start; }
/* beside a portrait the name and line speak, not shout */
.provider--portrait { padding-block: calc(var(--sec-y) * 0.7); }
.provider--portrait .h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3.1rem); line-height: 1.02; }
.provider--portrait .provider__lead { font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.45rem); }
@media (min-width: 900px) { .provider--portrait .provider__in { grid-template-columns: 5fr 7fr; column-gap: clamp(48px, 6vw, 104px); align-items: center; } .provider--portrait .provider__media { max-width: 300px; justify-self: end; } }

/* steps: three across, ghost numerals behind */
.steps { --ghost: 1; }
.steps__list { grid-template-columns: 1fr; }
@media (min-width: 760px) { .steps__list { grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); } }
.steps__list { counter-reset: none; }
.step { border-top: 1px solid var(--hairline-strong); }

/* faq: head sticks beside the list */
.faq__in { max-width: 820px; }
@media (min-width: 900px) { .faq__in { width: min(100% - 2 * var(--gutter), var(--wrap)); display: grid; grid-template-columns: 5fr 7fr; column-gap: clamp(48px, 6vw, 104px); align-items: start; max-width: none; } .faq__head { position: sticky; top: calc(var(--hdr-h-shrunk) + 28px); margin: 0; } }

.close { background: var(--theme-dark); color: var(--theme-light); }
.close__in { max-width: 62ch; }
.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); }