/* 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); }
  /* The headline turns light where it crosses the plate; a faint dark fade
     along the plate's left edge keeps a bright photo from swallowing it. */
  .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; }
/* The headline runs onto the plate. It is ink on the page and light on the
   photograph, switching at the plate's edge (half of .hero__in), so both
   halves read without a shadow or a box. */
@media (min-width: 900px) {
  .hero .h1 { --split: calc(min(100vw - 2 * var(--gutter), var(--wrap)) / 2);
    background: linear-gradient(to right, var(--theme-text) var(--split), var(--theme-light) var(--split)) 0 0 / 100% 100% no-repeat;
    -webkit-background-clip: text; background-clip: text; color: transparent; }
}
@media (min-width: 900px) and (forced-colors: active) { .hero .h1 { background: none; color: CanvasText; } }
.hero .lede { margin-top: 1.5em; max-width: 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); }