/* Hallmark · shape: Conversational FAQ · genre: modern-minimal · theme: Dusk (deal 1/3, seed ai-led-delivery-consultancy-banks-7528·21b61e72·2026-11-06·r0) · job: hire · draw: a29305
 * hero: poster · nav: edge-aligned (swapped from floating pill, which directions A to C already use) · footer: statement · imagery: photographs, library 1 (hero) + owner 1 (desk) + team portraits 4 · signature: the hero pane, about 10% sampled against 100% checked, opened again as the lending case · dusk: fog/periwinkle-apricot/glass
 * axes: dark/grotesk-sans/cool · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: P and S, a question-led page can read coy; every answer is a fact from the owner's content, and the hero's proof pane carries the real 10% to 100% outcome */
/* Hallmark · dismissed 25 · .steps p is one sentence per step, legal from 28ch */
/* Hallmark · dismissed 29 · the glass pane is the Dusk material, lit edge and offset shadow, no glow or halo */
/* Hallmark · dismissed 42 · edge-aligned nav is chosen and stamped, four page anchors and one contact pill */
/* Hallmark · dismissed 58 · the page total counts the four hidden service panes; about 440 words show at once */
/* Hallmark · dismissed 46a · 70%+, <12 mo, 18 mo and 100% are the owner's case figures from content.ts */
/* Hallmark · dismissed 77 · contact and work pages are short by nature: one list or one set of details, then the footer */
/* Hallmark · answered F7 · pills sit on controls, the sector tags and the two data bars, which are rounded tracks not boxes */
/* Hallmark · waive 77 · next-case band on each case page, one link set at section size · a case page ends by handing the reader to the next case */
/* Hallmark · dismissed 77 · case pages: the next-case band is one link at section size, used once a page */
/* Hallmark · answered F19 · three weights in running use: display 500, body 400, controls and row heads 600 */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --hero-ink: var(--color-day-ink);
  --hero-muted: var(--color-day-muted);
  --bar-before: var(--color-accent-2);
  --bar-after: var(--color-accent);
  --nav-h: 80px;
}

/* chrome */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-inner); }
.skip:focus-visible { top: var(--space-md); }

.nav { position: absolute; inset: 0 0 auto 0; z-index: var(--z-sticky-nav); color: var(--hero-ink); --color-focus: var(--color-accent-deep); }
.nav__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav-h); }
.nav__mark { display: inline-flex; align-items: center; min-height: 44px; color: inherit; border-radius: var(--radius-inner); }
.nav__mark svg { width: 112px; height: auto; }
.nav__nav { display: flex; align-items: center; }
.nav__links { display: flex; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; }
.nav__links a, .nav__talk { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; border-radius: var(--radius-inner); }
.nav__links a:hover, .nav__talk:hover { text-decoration: underline; }
.nav__talk { padding-inline: var(--space-md); border: 1px solid color-mix(in oklab, var(--hero-ink) 40%, transparent); border-radius: var(--radius-pill); transition: background-color var(--dur-short) var(--ease-out); }
.nav__talk:hover { text-decoration: none; background: color-mix(in oklab, var(--color-fog) 60%, transparent); }
.nav__toggle { display: none; }

/* controls */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 600 0.9375rem/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-light) 35%, transparent); transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-hi); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn--ghost { background: color-mix(in oklab, var(--color-fog) 70%, transparent); color: var(--hero-ink); border-color: color-mix(in oklab, var(--hero-ink) 40%, transparent); box-shadow: none; }
.btn--ghost:hover { background: color-mix(in oklab, var(--color-fog) 55%, transparent); }

/* hero */
.hero { position: relative; display: grid; align-items: end; min-height: 100dvh; padding-block: calc(var(--nav-h) + var(--space-2xl)) var(--space-4xl); isolation: isolate; }
.hero__photo { position: absolute; inset: 0; margin: 0; z-index: 0; }
.hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, color-mix(in oklab, var(--color-fog) 45%, transparent), transparent 16%),
    radial-gradient(ellipse 52% 60% at 74% 60%, color-mix(in oklab, var(--color-fog) 92%, transparent) 30%, transparent 88%),
    linear-gradient(to bottom, transparent 86%, var(--color-paper)); }
.hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; }
.hero__text { grid-column: 7 / span 6; grid-row: 1; color: var(--hero-ink); --color-focus: var(--color-day-ink); }
.hero__text h1 { max-width: 13ch; font-size: clamp(2.75rem, 4.6vw + 0.5rem, 5.25rem); line-height: 1.02; }
.hero__text .lead { margin-top: var(--space-lg); color: var(--hero-ink); max-width: 30ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }

.glass { background: var(--glass); border-radius: var(--radius-card); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35); backdrop-filter: blur(var(--glass-blur)) saturate(1.35); box-shadow: var(--glass-hi), var(--shadow-card); }
.sample { grid-column: 1 / span 5; grid-row: 1; margin: 0; padding: var(--space-xl); color: var(--color-ink); background: color-mix(in oklab, var(--color-paper-2) 88%, transparent); }
.sample figcaption { font-size: var(--text-sm); color: var(--color-ink-2); max-width: 32ch; }
.sample__rows { display: grid; gap: var(--space-lg); margin: var(--space-lg) 0 0; }
.sample__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-md); row-gap: var(--space-xs); padding-top: var(--space-lg); border-top: 1px solid color-mix(in oklab, var(--color-light) 10%, transparent); }
.sample__row dt { align-self: end; font-size: var(--text-sm); color: var(--color-muted); }
.sample__row dd { margin: 0; }
.sample__fig { grid-column: 2; grid-row: 1; font: 500 var(--text-3xl)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink-2); }
.sample__row--after .sample__fig { font-size: clamp(2.75rem, 3.4vw + 0.5rem, 3.75rem); color: var(--color-ink); }
.sample__bar { grid-column: 1 / -1; height: 6px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-light) 8%, transparent); overflow: hidden; }
.sample__bar span { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--bar-before); transform: scaleX(var(--share)); transform-origin: left center; }
.sample__row--after .sample__bar span { background: var(--bar-after); }
.sample__note { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-ink-2); }

/* sections */
.sec { padding-block: var(--section-gap) 0; }
.sec--services { padding-top: var(--section-gap-s); }
.sec--process { padding-top: var(--section-gap-l); }
.sec--start { padding-block: var(--section-gap) var(--section-gap-s); }
.head { margin-bottom: var(--space-2xl); }
.head .lead { margin-top: var(--space-md); color: var(--color-muted); }
.head--split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; }
.head--split h2 { grid-column: 1 / span 6; }
.head--split .lead { grid-column: 8 / span 5; margin: 0; }

/* what we build: a ruled list beside one pane */
.tour { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.tour__list { grid-column: 1 / span 4; display: flex; flex-direction: column; border-top: 1px solid var(--color-rule); }
.tour__list [role="tab"] { display: flex; align-items: center; gap: var(--space-sm); min-height: 72px; padding: 0 var(--space-xs); border: 0; border-bottom: 1px solid var(--color-rule); background: transparent; color: var(--color-muted); font-size: var(--text-lg); text-align: left; cursor: pointer; transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.tour__list [role="tab"]::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--color-accent); opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.tour__list [role="tab"]:hover { color: var(--color-ink); background: color-mix(in oklab, var(--color-light) 3%, transparent); }
.tour__list [role="tab"][aria-selected="true"] { color: var(--color-ink); }
.tour__list [role="tab"][aria-selected="true"]::before { opacity: 1; }
.tour__list [role="tab"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.tour__panes { grid-column: 6 / span 7; }
.pane { min-height: 400px; padding: var(--space-2xl); border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: var(--glass-hi), var(--shadow-card); }
.pane + .pane { margin-top: var(--space-lg); }
.js .pane + .pane { margin-top: 0; }
.pane:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.pane h3 { font-size: var(--text-2xl); max-width: 22ch; }
.pane p { margin-top: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.5; max-width: 46ch; }
.pane__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap-columns); margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.pane__points li { padding-block: var(--space-sm); border-top: 1px solid color-mix(in oklab, var(--color-light) 10%, transparent); color: var(--color-ink-2); }
.js .pane.is-in { animation: pane-in var(--dur-long) var(--ease-out); }
@keyframes pane-in { from { opacity: 0; } to { opacity: 1; } }

/* the lending case, in a bone well */
.well { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); padding: var(--space-3xl) var(--space-2xl); border-radius: var(--radius-card); background: var(--color-well); color: var(--color-well-ink); --color-focus: var(--color-accent-deep); }
.case__lead { grid-column: 1 / span 5; }
.case__why { margin-top: var(--space-xl); max-width: 20ch; font: 500 var(--text-3xl)/1.12 var(--font-display); letter-spacing: var(--tracking-display); }
.case__label { margin-top: var(--space-md); max-width: 34ch; color: var(--color-well-muted); font-size: var(--text-lead); line-height: 1.45; }
.case__table { grid-column: 7 / span 6; align-self: end; width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.case__table th, .case__table td { padding: var(--space-md) var(--space-sm) var(--space-md) 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-well-rule); }
.case__table thead th { padding-top: 0; font-size: var(--text-sm); font-weight: 400; color: var(--color-well-muted); }
.case__table tbody th { font-weight: 600; white-space: nowrap; }
.case__table td { color: var(--color-well-muted); }
.case__table td:last-child { color: var(--color-well-ink); }
.case__aside { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }

/* engagement steps */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; padding-top: var(--space-lg); border-top: 1px solid var(--color-ink-2); }
.steps li::before { content: counter(step); display: block; margin-bottom: var(--space-xl); font-size: var(--text-sm); color: var(--color-accent); font-variant-numeric: tabular-nums; }
.steps h3 { font-size: var(--text-3xl); }
.steps p { margin-top: var(--space-sm); color: var(--color-muted); max-width: 28ch; }
.steps .steps__sub { margin-top: var(--space-md); color: var(--color-ink); font-size: var(--text-lg); line-height: 1.35; }

/* trust */
.trust { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; }
.trust__text { grid-column: 1 / span 5; }
.trust__text .lead { margin-top: var(--space-md); color: var(--color-muted); }
.verbs { margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.verbs li { padding-block: var(--space-md); border-top: 1px solid var(--color-rule); color: var(--color-muted); }
.verbs b { display: inline-block; min-width: 5.5em; color: var(--color-ink); font-weight: 600; }
.trust__photo { grid-column: 7 / span 6; margin: 0; aspect-ratio: 4 / 5; min-height: 440px; border-radius: var(--radius-card); }
.trust__photo > img { outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }

/* more cases, an index */
.index { margin: var(--space-2xl) 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--color-rule); }
.index li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); }
.index__sector { grid-column: 1 / span 3; color: var(--color-muted); }
.index__fig { grid-column: 4 / span 3; font: 500 var(--text-display-s)/1 var(--font-display); letter-spacing: var(--tracking-display); white-space: nowrap; }
.index__what { grid-column: 7 / span 6; color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.45; max-width: 40ch; }

/* team */
.team { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.team__lead { grid-column: 1 / span 5; }
.team__stat { margin-top: var(--space-xl); max-width: 18ch; font: 500 var(--text-2xl)/1.2 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink-2); }
.team__stat .num { color: var(--color-ink); }
.people { grid-column: 7 / span 6; margin: 0; padding: 0; list-style: none; }
.people li { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--space-lg); align-items: center; padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.people li:last-child { border-bottom: 1px solid var(--color-rule); }
.people img { grid-row: 1 / span 2; width: 88px; height: 88px; object-fit: cover; border-radius: var(--radius-inner); filter: grayscale(1) contrast(1.05); }
.people__name { align-self: end; font-size: var(--text-lg); color: var(--color-ink); }
.people__role { align-self: start; font-size: var(--text-sm); color: var(--color-muted); }

/* start */
.start { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; }
.start > div:first-child { grid-column: 1 / span 6; }
.start .lead { margin-top: var(--space-md); color: var(--color-muted); max-width: 34ch; }
.contact { grid-column: 7 / span 6; margin: 0; }
.contact > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-md); align-items: baseline; padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.contact > div:last-child { border-bottom: 1px solid var(--color-rule); }
.contact dt { font-size: var(--text-sm); color: var(--color-muted); }
.contact dd { margin: 0; font: 500 var(--text-2xl)/1.15 var(--font-display); letter-spacing: var(--tracking-display); }
.contact a { color: var(--color-ink); text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; border-radius: var(--radius-inner); }
.contact a:hover { color: var(--color-accent-hi); }

/* footer */
.foot { padding-block: var(--space-3xl) var(--space-xl); background: var(--color-shade); }
.foot__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; }
.foot__mail { grid-column: 9 / span 4; justify-self: end; font: 500 var(--text-2xl)/1.2 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; border-radius: var(--radius-inner); }
.foot__mail:hover { color: var(--color-accent-hi); }
.foot__line { grid-column: 1 / span 8; max-width: 20ch; font: 500 var(--text-section)/1.05 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: 0; padding: 0; list-style: none; }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); text-decoration: none; white-space: nowrap; border-radius: var(--radius-inner); }
.foot__links a:hover { color: var(--color-ink); text-decoration: underline; }
.foot__legal { color: var(--color-muted); font-size: var(--text-sm); }
.foot__credit { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-xs); }

/* the one reveal: the hero pane's two rows settle and their bars grow */
.js .sample__row { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 180ms + 120ms); }
.js .sample__bar span { transform: scaleX(0); transition: transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 180ms + 280ms); }
.js .sample.is-in .sample__row { opacity: 1; transform: none; }
.js .sample.is-in .sample__bar span { transform: scaleX(var(--share)); }

@media (prefers-reduced-motion: reduce) {
  .js .sample__row { opacity: 1; transform: none; transition: none; }
  .js .sample__bar span { transform: scaleX(var(--share)); transition: none; }
  .js .pane.is-in { animation: none; }
  .btn, .tour__list [role="tab"], .nav__talk { transition: none; }
}

/* the lending case link inside the well */
.case__more { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-lg); color: var(--color-well-ink); font-weight: 600; text-decoration-color: var(--color-accent-deep); text-decoration-thickness: 2px; border-radius: var(--radius-inner); }
.case__more:hover { color: var(--color-accent-deep); }

/* case page */
.page-case { --hero-ink: var(--color-ink); }
.page-case .nav { position: relative; --color-focus: var(--color-accent); }
.page-case .nav__talk:hover { background: var(--color-paper-2); }
.nav__links a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.chero { display: grid; align-items: center; min-height: calc(100svh - var(--nav-h)); padding-block: var(--space-2xl) var(--space-3xl); }
.chero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; }
.chero__text { grid-column: 1 / span 6; }
.chero__crumb { margin-bottom: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); }
.chero__crumb a { color: var(--color-ink-2); border-radius: var(--radius-inner); }
.chero h1 { max-width: 12ch; }
.chero .lead { margin-top: var(--space-lg); color: var(--color-ink-2); max-width: 40ch; }
.sample--case { grid-column: 8 / span 5; grid-row: auto; background: var(--color-paper-2); border-radius: var(--radius-card); box-shadow: var(--glass-hi), var(--shadow-card); }
.page-case .sample__row { opacity: 1; transform: none; }
.page-case .sample__bar span { transform: scaleX(var(--share)); }
.story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.story h3 { padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-ink-2); }
.story ul { margin: 0; padding: 0; list-style: none; }
.story li { padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); color: var(--color-ink-2); }
.story__col:last-child li { color: var(--color-ink); }
.sec--why { padding-top: var(--section-gap-l); }
.why { max-width: 24ch; font-size: clamp(2.25rem, 3.4vw + 0.75rem, 4rem); line-height: 1.08; }
.why__after { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-lead); }
.page-case .start .lead a { color: var(--color-ink); border-radius: var(--radius-inner); }

/* page to page: the proof pane carries over between the homepage and the case, the rest settles like fog clearing */
@view-transition { navigation: auto; }
::view-transition-group(case-proof) { animation-duration: 760ms; animation-timing-function: var(--ease-out); }
::view-transition-old(root) { animation: vt-out 280ms var(--ease-in) both; }
::view-transition-new(root) { animation: vt-in 560ms var(--ease-out) 160ms both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
.js.vt-in .sample__row { opacity: 1; transform: none; transition: none; }
.js.vt-in .sample__bar span { transform: scaleX(var(--share)); transition: none; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* inner pages */
.page-inner { --hero-ink: var(--color-ink); }
.page-inner .nav, .page-404 .nav { --color-focus: var(--color-accent); }
.page-inner .nav { position: relative; }
.page-inner .nav__talk:hover { background: var(--color-paper-2); }
.nav__talk[aria-current="page"] { background: var(--color-paper-2); }
.more { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-xl); }
.more a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); font-weight: 600; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; border-radius: var(--radius-inner); }
.more a:hover { color: var(--color-accent-hi); }
.more__note { font-size: var(--text-sm); color: var(--color-muted); }
.more--team { grid-column: 7 / span 6; margin-top: 0; }
.index__row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; color: inherit; text-decoration: none; border-radius: var(--radius-inner); transition: background-color var(--dur-short) var(--ease-out); }
.index li:has(.index__row) { display: block; padding: 0; }
.index__row { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); padding-block: var(--space-xl); }
.index__row:hover .index__what { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.index__row:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

.phero { padding-block: var(--space-3xl) var(--section-gap-s); }
.phero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; }
.phero__text { grid-column: 1 / span 8; }
.phero h1 { max-width: 16ch; }
.phero .lead { margin-top: var(--space-lg); color: var(--color-ink-2); max-width: 46ch; }
.phero__aside { grid-column: 9 / span 4; max-width: 16ch; font: 500 var(--text-2xl)/1.2 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink-2); }
.phero__aside .num { color: var(--color-ink); }
.page-inner .sec:first-of-type { padding-top: 0; }
.page-inner .phero + .sec { padding-top: 0; }
.page-inner .phero + .sec--gap { padding-top: var(--section-gap); }

/* work index */
.wlist { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--color-rule); }
.wrow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-2xl); border-top: 1px solid var(--color-rule); color: inherit; text-decoration: none; border-radius: var(--radius-inner); }
.wrow:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.wrow__sector { grid-column: 1 / span 2; color: var(--color-muted); font-size: var(--text-sm); }
.wrow__fig { grid-column: 3 / span 4; font: 500 clamp(3rem, 5vw + 1rem, 5.5rem)/0.95 var(--font-display); letter-spacing: -0.03em; white-space: nowrap; }
.wrow__body { grid-column: 7 / span 6; display: grid; gap: var(--space-xs); }
.wrow__title { font: 500 var(--text-2xl)/1.15 var(--font-display); letter-spacing: var(--tracking-display); }
.wrow__label { color: var(--color-muted); max-width: 46ch; }
.wrow:hover .wrow__title { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.16em; }

/* case pages */
.sample--single { display: grid; gap: var(--space-md); }
.single__fig { margin-top: var(--space-lg); font: 500 clamp(4rem, 6vw + 1rem, 7rem)/0.95 var(--font-display); letter-spacing: -0.035em; color: var(--color-ink); justify-self: start; }
.single__label { color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.45; max-width: 30ch; }
.srow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); padding-block: var(--space-2xl) var(--space-3xl); border-top: 1px solid var(--color-rule); }
.srow h3 { grid-column: 1 / span 4; font-size: var(--text-2xl); }
.srow ul { grid-column: 6 / span 7; margin: 0; padding: 0; list-style: none; }
.srow li { padding-block: var(--space-md); color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.4; }
.srow li + li { border-top: 1px solid color-mix(in oklab, var(--color-rule) 60%, transparent); }
.srow--out li { color: var(--color-ink); }
.sec--next { padding-top: var(--section-gap); }
.next { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-sm) var(--gap-columns); align-items: baseline; padding: var(--space-2xl); border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: var(--glass-hi); color: inherit; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.next:hover { background: var(--color-paper-3); }
.next:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.next__label { grid-column: 1 / -1; color: var(--color-muted); font-size: var(--text-sm); }
.next__title { grid-column: 1 / span 8; font: 500 var(--text-section)/1.05 var(--font-display); letter-spacing: var(--tracking-display); }
.next__fig { grid-column: 9 / span 4; justify-self: end; font: 500 var(--text-display-s)/1 var(--font-display); color: var(--color-accent); white-space: nowrap; }
.next__all { margin-top: var(--space-md); }
.next__all a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); border-radius: var(--radius-inner); }

/* services and process blocks */
.block { padding-top: var(--section-gap-l); }
.block__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); padding-top: var(--space-2xl); border-top: 1px solid var(--color-rule); }
.block__head { grid-column: 1 / span 5; }
.block__n { margin-bottom: var(--space-lg); color: var(--color-accent); font-size: var(--text-sm); }
.block__head h2 { font-size: clamp(2rem, 2vw + 1rem, 3rem); max-width: 16ch; }
.block__short { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-lead); }
.block__body { grid-column: 7 / span 6; }
.block__title { font: 500 var(--text-2xl)/1.2 var(--font-display); letter-spacing: var(--tracking-display); }
.block__text { color: var(--color-ink-2); font: 500 var(--text-2xl)/1.3 var(--font-display); letter-spacing: var(--tracking-display); max-width: 30ch; }
.block__title + .block__text { margin-top: var(--space-md); }
.points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap-columns); margin: var(--space-xl) 0 0; }
.points > div { padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); }
.points dt { font-weight: 600; }
.points dd { margin: var(--space-2xs) 0 0; color: var(--color-muted); }
.block__body .points { grid-template-columns: minmax(0, 1fr); }
.points--rows { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-2xl); }
.points--rows > div { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); padding-block: var(--space-xl); }
.points--rows dt { grid-column: 1 / span 5; font: 500 var(--text-2xl)/1.2 var(--font-display); letter-spacing: var(--tracking-display); }
.points--rows dd { grid-column: 7 / span 6; margin: 0; font-size: var(--text-lead); line-height: 1.45; }
.points--four { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--space-2xl); }
.ticks { margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.ticks li { padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); color: var(--color-muted); }
.sec--plat, .sec--why2 { padding-top: var(--section-gap); }
.plat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; }
.plat h2 { grid-column: 1 / span 6; }
.plat__body { grid-column: 7 / span 6; }
.plat__list { margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.plat__list li { padding-block: var(--space-md); border-top: 1px solid var(--color-rule); font: 500 var(--text-xl)/1.2 var(--font-display); }
.plat__line { color: var(--color-ink-2); font: 500 var(--text-2xl)/1.25 var(--font-display); letter-spacing: var(--tracking-display); }

/* about */
.sectors { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.sectors li { padding: var(--space-xs) var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); color: var(--color-ink-2); font-size: var(--text-sm); }
.bios { margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.bio { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); }
.bio img { grid-column: 1 / span 3; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-inner); filter: grayscale(1) contrast(1.05); }
.bio__text { grid-column: 5 / span 7; padding-bottom: var(--space-lg); }
.bio h3 { font-size: var(--text-2xl); }
.bio__role { margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); }
.bio__intro { margin-top: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.5; max-width: 48ch; }
.bio__more { margin-top: var(--space-sm); }
.bio__more summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); font-weight: 600; cursor: pointer; border-radius: var(--radius-inner); }
.bio__more summary:hover { color: var(--color-accent-hi); }
.bio__more p { margin-top: var(--space-xs); color: var(--color-muted); max-width: 60ch; }
.vals { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.vals__head { grid-column: 1 / span 5; }
.sec--far { padding-top: var(--section-gap-l); }
.vals__list { grid-column: 7 / span 6; margin: 0; padding: 0; list-style: none; }
.vals__list li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-md); padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.val__t { font: 500 var(--text-lg)/1.3 var(--font-display); }
.val__d { color: var(--color-muted); }

/* contact and 404 */
.contact--page dd { font-size: var(--text-3xl); }
.contact__next { margin-top: var(--space-2xl); color: var(--color-muted); }
.contact__next a { color: var(--color-ink); border-radius: var(--radius-inner); }
.sec--contact { padding-bottom: var(--section-gap); }
.hero--404 .hero__text h1 { max-width: 12ch; }

/* tablets and phones */
@media (max-width: 60rem) {
  :root { --nav-h: 64px; }
  .nav__links a, .nav__talk { font-size: var(--text-md); }
  .nav__nav { position: relative; }
  .js .nav__toggle { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-md); border: 1px solid color-mix(in oklab, var(--hero-ink) 40%, transparent); border-radius: var(--radius-pill); background: transparent; color: inherit; font-weight: 600; cursor: pointer; }
  .nav__toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .js .nav__links { display: none; }
  .js .nav.is-open .nav__links { display: flex; flex-direction: column; gap: 0; position: absolute; right: 0; top: calc(100% + var(--space-xs)); min-width: 13rem; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); box-shadow: var(--shadow-card); --color-focus: var(--color-accent); }
  .nav__talk { display: none; }

  .hero { display: block; min-height: 0; padding: 0; }
  .hero__photo { position: relative; inset: auto; height: 46svh; min-height: 300px; max-height: 480px; }
  .hero__scrim { bottom: auto; height: 46svh; min-height: 300px; max-height: 480px; background: linear-gradient(to bottom, color-mix(in oklab, var(--color-fog) 55%, transparent), transparent 30%), linear-gradient(to bottom, transparent 70%, var(--color-paper)); }
  .hero__grid { display: block; margin-top: calc(-1 * var(--space-xl)); }
  .hero__text { --hero-ink: var(--color-ink); --color-focus: var(--color-accent); }
  .hero__text .btn--ghost { background: transparent; }
  .hero__text .btn--ghost:hover { background: var(--color-paper-2); }
  .hero__text h1 { font-size: clamp(2.5rem, 7vw + 1rem, 4rem); }
  .hero__actions { margin-top: var(--space-lg); }
  .sample { margin-top: var(--space-2xl); padding: var(--space-lg); }

  .head--split, .tour, .well, .trust, .team, .start, .chero__grid, .story { display: block; }
  .phero__grid, .block__grid, .plat, .vals, .srow, .bio { display: block; }
  .phero__aside { margin-top: var(--space-xl); }
  .block__body, .plat__body, .vals__list, .srow ul { margin-top: var(--space-lg); }
  .wrow { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); padding-block: var(--space-xl); }
  .wrow__sector, .wrow__fig, .wrow__body { grid-column: 1; }
  .points--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .next { grid-template-columns: minmax(0, 1fr); padding: var(--space-xl) var(--space-lg); }
  .next__title, .next__fig { grid-column: 1; justify-self: start; }
  .bios { display: block; }
  .bio img { width: 120px; }
  .bio__text { margin-top: var(--space-md); }
  .index__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-xs); }
  .more--team { justify-content: flex-start; }

  .sample--case { margin-top: var(--space-2xl); }
  .story__col + .story__col { margin-top: var(--space-2xl); }
  .chero { min-height: 0; padding-top: var(--space-xl); }
  .head--split .lead { margin-top: var(--space-md); }
  .tour__panes { margin-top: var(--space-xl); }
  .pane { min-height: 0; padding: var(--space-xl) var(--space-lg); }
  .well { padding: var(--space-2xl) var(--space-lg); }
  .case__table { margin-top: var(--space-2xl); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-2xl); }
  .trust__photo { margin-top: var(--space-2xl); min-height: 0; aspect-ratio: 4 / 3; }
  .trust__photo > img { object-position: 45% 20% !important; }
  .tour__list { display: none; }
  .js .tour .pane[hidden] { display: block !important; }
  .tour__panes { display: grid; gap: var(--space-lg); margin-top: 0; }
  .foot__top { display: block; }
  .foot__mail { display: inline-block; margin-top: var(--space-lg); font-size: var(--text-xl); }
  .index li { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-xs); }
  .index__sector { grid-column: 1; grid-row: 1; align-self: center; }
  .index__fig { grid-column: 2; grid-row: 1; }
  .index__what { grid-column: 1 / -1; font-size: var(--text-md); }
  .people { margin-top: var(--space-2xl); }
  .contact { margin-top: var(--space-2xl); }
}

@media (max-width: 40rem) {
  .tour__list [role="tab"] { min-height: 56px; font-size: var(--text-md); }
  .pane__points { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps li::before { margin-bottom: var(--space-md); }
  .case__table thead { display: none; }
  .case__table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-md); padding-block: var(--space-md); border-bottom: 1px solid var(--color-well-rule); }
  .case__table tbody th { grid-column: 1 / -1; padding: 0 0 var(--space-xs); border: 0; }
  .case__table td { padding: 0; border: 0; }
  .case__table td::before { content: attr(data-label); display: block; font-size: var(--text-sm); color: var(--color-well-muted); }
  .people li { grid-template-columns: 64px minmax(0, 1fr); }
  .people img { width: 64px; height: 64px; }
  .foot__line { font-size: var(--text-2xl); }
  .points, .points--four { grid-template-columns: minmax(0, 1fr); }
  .points--rows > div { display: block; }
  .block__text { font: 400 var(--text-lead)/1.5 var(--font-body); letter-spacing: 0; }
  .points--rows dd { margin-top: var(--space-xs); }
  .contact--page dd { font-size: var(--text-xl); overflow-wrap: break-word; }
  .vals__list li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
}