@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Manrope:wght@300..700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ── Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 27px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--accent); color: var(--on-accent); }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
/* Any element with data-theme repaints itself: used for light (ivory) sections inside the graphite page. */
[data-theme] { background: var(--canvas); color: var(--ink); }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--header-h) + var(--space-6)); }

/* Responsive frame: every section is a size container, so components adapt to
   the width they are given (the page, or a 390px phone frame in a preview). */
.b-section, .b-header, .b-footer, .b-frame { container-type: inline-size; }
.b-container { width: 100%; max-width: calc(var(--container-max) + 2 * var(--gutter-lg)); margin-inline: auto; padding-inline: var(--gutter-sm); }
@container (min-width: 720px) { .b-container { padding-inline: var(--gutter-lg); } }
.b-section { position: relative; padding-block: var(--space-16); border-top: 1px solid var(--line); }
@media (min-width: 720px) { .b-section { padding-block: var(--space-24); } }
.b-frame .b-section { padding-block: var(--space-16); }

/* ── Type helpers ─────────────────────────────────── */
.b-display { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(44px, 7.4cqi, 96px); line-height: .95; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.b-heading { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(36px, 5cqi, 52px); line-height: 1.05; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.b-heading-s { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 32px; line-height: 1.15; color: var(--ink); }
.b-display em, .b-heading em, .b-heading-s em { font-style: normal; color: var(--accent); }
.b-lead { margin: var(--space-8) 0 0; max-width: var(--measure); font-size: 18px; line-height: 28px; font-weight: 300; color: var(--ink-muted); }
@container (min-width: 720px) { .b-lead { font-size: 20px; line-height: 32px; } }
.b-body { margin: 0; max-width: var(--measure); color: var(--ink-muted); }
.b-label { font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }

/* Section header: heading (+ aside on wide screens) */
.b-sechead { display: grid; gap: var(--space-6); margin-bottom: var(--space-12); }
.b-sechead .b-lead { margin: 0; }
@container (min-width: 960px) { .b-sechead { grid-template-columns: 7fr 5fr; align-items: end; gap: var(--space-12); margin-bottom: var(--space-16); } .b-sechead .b-lead { margin: 0; justify-self: end; } }

/* ── Links & buttons ──────────────────────────────── */
.b-link { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.b-link:hover { color: var(--ink); }
.b-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); height: 52px; padding: 0 28px; border: 1px solid transparent; border-radius: var(--radius-xs); font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .3s cubic-bezier(.2,.7,.1,1), color .3s, border-color .3s; }
.b-btn svg { width: 16px; height: 16px; transition: transform .4s cubic-bezier(.2,.7,.1,1); }
.b-btn:hover svg { transform: translateX(4px); }
.b-btn--primary { background: var(--accent); color: var(--on-accent); }
.b-btn--primary:hover { background: var(--ink); color: var(--canvas); }
.b-btn--outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.b-btn--outline:hover { border-color: var(--accent); color: var(--accent); }
.b-btn--text { height: auto; padding: 6px 0; color: var(--ink); border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; }
.b-btn--text:hover { color: var(--accent); border-color: var(--accent); }
.b-btn--sm { height: 40px; padding: 0 20px; }
.b-btn--block { width: 100%; }
.b-btn[disabled], .b-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.b-btn:focus-visible, .b-link:focus-visible, .b-nav a:focus-visible, .b-burger:focus-visible, .b-wordmark:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

/* ── Wordmark (logo slot) ─────────────────────────── */
.b-wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.b-wordmark__name { font-family: var(--font-serif); font-size: 28px; line-height: 1; letter-spacing: -.01em; }
.b-wordmark__tag { font-family: var(--font-mono); font-size: 10px; line-height: 1; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.b-wordmark img { height: 28px; width: auto; }
.b-wordmark__mark { flex: none; width: 26px; height: 26px; color: var(--accent); transition: transform .6s cubic-bezier(.2,.7,.1,1); }
.b-wordmark:hover .b-wordmark__mark { transform: translateY(-2px); }
.b-wordmark__name { align-self: center; }
@container (max-width: 479px) { .b-wordmark__tag { display: none; } }


/* ── Header ───────────────────────────────────────── */
.b-header { position: sticky; top: 0; z-index: 20; background: var(--canvas); border-bottom: 1px solid var(--line); }
.b-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); height: 64px; }
.b-nav { display: none; align-items: center; gap: var(--space-8); }
.b-nav a { font-size: 14px; line-height: 22px; color: var(--ink-muted); text-decoration: none; transition: color .3s; }
.b-nav a:hover, .b-nav a[aria-current] { color: var(--ink); }
.b-header__cta { display: none; }
.b-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 7px; width: 44px; height: 44px; padding: 0 10px; margin-right: -10px; background: none; border: 0; cursor: pointer; }
.b-burger span { display: block; height: 1px; background: var(--ink); transition: transform .3s; }
.b-header[data-open] .b-burger span:first-child { transform: translateY(4px) rotate(45deg); }
.b-header[data-open] .b-burger span:last-child { transform: translateY(-4px) rotate(-45deg); }
.b-mobilenav { display: none; padding: var(--space-6) 0 var(--space-8); border-top: 1px solid var(--line); }
.b-header[data-open] .b-mobilenav { display: block; }
.b-header[data-open] { box-shadow: var(--shadow-float); }
.b-mobilenav a:not(.b-btn) { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); font-family: var(--font-serif); font-size: 32px; line-height: 1.15; color: var(--ink); text-decoration: none; }
.b-mobilenav a:not(.b-btn) small { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-faint); }
.b-mobilenav .b-btn { margin-top: var(--space-8); width: 100%; }
@container (min-width: 880px) {
  .b-header__bar { height: var(--header-h); }
  .b-nav, .b-header__cta { display: flex; }
  .b-burger, .b-mobilenav, .b-header[data-open] .b-mobilenav { display: none; }
}

/* ── Hero ─────────────────────────────────────────── */
.b-hero { border-top: 0; padding-block: var(--space-16) var(--space-12); overflow: hidden; }
.b-hero__grid { display: grid; gap: var(--space-12); align-items: center; }
.b-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-12); }
.b-hero__art { width: 100%; max-width: 340px; justify-self: center; color: var(--sage); }
.b-hero__meta { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--space-16); border-top: 1px solid var(--line); }
.b-hero__meta div { padding: var(--space-4) var(--space-4) 0 0; }
.b-hero__meta .b-label { display: block; color: var(--accent); margin-bottom: var(--space-1); }
.b-hero__meta p { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
@media (min-width: 960px) { .b-hero { padding-block: var(--space-36) var(--space-24); } }
.b-frame .b-hero { padding-block: var(--space-16) var(--space-12); }
@container (max-width: 559px) { .b-hero__actions .b-btn { width: 100%; } }
@container (min-width: 960px) {
  .b-hero__grid { grid-template-columns: 1.35fr 1fr; gap: var(--space-16); }
  .b-hero__art { max-width: 520px; }
  .b-hero__meta { grid-template-columns: repeat(4, 1fr); margin-top: var(--space-24); }
  .b-hero__meta div { padding: var(--space-6) var(--space-6) 0 0; }
}
/* Route illustration classes (inline SVG) */
.b-art-line { fill: none; stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.b-art-faint { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.b-art-route { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.b-art-node { fill: var(--canvas); stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.b-art-dot { fill: var(--accent); }
.b-art-sage { fill: var(--sage); }
.b-art-text { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; fill: var(--ink-faint); }

/* ── Services (two practices) ─────────────────────── */
.b-practices { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.b-practice { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8) var(--space-6); background: var(--canvas); }
.b-practice--panel { background: var(--panel); }
.b-practice--panel .b-heading-s, .b-practice--panel .b-caps li { color: var(--on-panel); }
.b-practice--panel .b-body { color: var(--on-panel-muted); }
.b-practice--panel .b-practice__num, .b-practice--panel .b-practice__icon, .b-practice--panel .b-caps li::before { color: var(--accent-on-panel); }
.b-practice__top { display: flex; justify-content: space-between; align-items: flex-start; }
.b-practice__num { font-family: var(--font-serif); font-size: 64px; line-height: .8; color: var(--accent); }
.b-practice__icon { width: 40px; height: 40px; color: var(--accent); }
.b-caps { list-style: none; margin: auto 0 0; padding: 0; border-top: 1px solid var(--line); }
.b-practice--panel .b-caps, .b-practice--panel .b-caps li { border-color: #ffffff1f; }
.b-caps li { display: grid; grid-template-columns: 40px 1fr; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 24px; color: var(--ink); }
.b-caps li::before { content: counter(cap, decimal-leading-zero); counter-increment: cap; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--accent); padding-top: 3px; }
.b-caps { counter-reset: cap; }
@container (min-width: 800px) { .b-practices { grid-template-columns: 1fr 1fr; } .b-practice { padding: var(--space-12); min-height: 560px; } }

/* ── Partners (companies we work with) ────────────── */
.b-logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.b-logo { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; padding: var(--space-6); background: var(--surface-sunken); color: var(--ink-muted); text-decoration: none; transition: background-color .4s, color .4s; }
.b-logo img, .b-logo svg { max-height: 34px; max-width: 88%; width: auto; opacity: .72; transition: opacity .4s; }
.b-logo img { filter: grayscale(1); }
.b-logo--invert img { filter: grayscale(1) invert(1) brightness(1.4); }
.b-logo:hover { background: var(--surface-raised); color: var(--ink); }
.b-logo:hover img, .b-logo:hover svg { opacity: 1; }
.b-logo__cap { position: absolute; left: var(--space-4); bottom: var(--space-3); font-family: var(--font-mono); font-size: 10px; line-height: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); opacity: 0; transition: opacity .4s; }
.b-logo:hover .b-logo__cap, .b-logo:focus-visible .b-logo__cap { opacity: 1; }
.b-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.b-logo--empty { flex-direction: column; gap: var(--space-2); }
.b-logo--empty span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
@container (min-width: 600px) { .b-logos { grid-template-columns: repeat(3, 1fr); } }
@container (min-width: 900px) { .b-logos--five { grid-template-columns: repeat(5, 1fr); } }
@container (min-width: 1000px) { .b-logos { grid-template-columns: repeat(4, 1fr); } .b-logos--five { grid-template-columns: repeat(5, 1fr); } .b-logo__cap { left: var(--space-6); bottom: var(--space-4); } }
.b-quote { display: grid; gap: var(--space-8); margin: var(--space-16) 0 0; padding-top: var(--space-12); border-top: 1px solid var(--line); }
.b-quote blockquote { margin: 0; font-family: var(--font-serif); font-size: clamp(26px, 3.6cqi, 40px); line-height: 1.2; color: var(--ink); text-wrap: pretty; }
.b-quote blockquote::before { content: "\201C"; display: block; height: .55em; font-size: 2.4em; line-height: 1; color: var(--accent); }
.b-quote figcaption { display: flex; flex-direction: column; gap: var(--space-1); }
.b-quote figcaption strong { font-weight: 600; font-size: 19px; line-height: 1.3; color: var(--ink); }
@container (min-width: 960px) { .b-quote { grid-template-columns: 8fr 3fr; align-items: end; gap: var(--space-16); } }

/* ── Forms ────────────────────────────────────────── */
.b-field { display: flex; flex-direction: column; gap: var(--space-2); }
.b-field > label, .b-field > .b-field__label { font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.b-field__opt { color: var(--ink-faint); letter-spacing: .08em; text-transform: none; }
.b-input { width: 100%; height: 52px; padding: 0; background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 26px; transition: border-color .3s, box-shadow .3s; -webkit-appearance: none; appearance: none; }
textarea.b-input { height: auto; min-height: 132px; padding: var(--space-3) 0; resize: vertical; }
.b-input::placeholder { color: var(--ink-faint); }
.b-input:hover { border-bottom-color: var(--ink-muted); }
.b-input:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1px 0 0 var(--accent); }
.b-input:disabled { opacity: .5; }
.b-field__hint { font-size: 13px; line-height: 20px; color: var(--ink-faint); }
.b-field--error .b-input { border-bottom-color: var(--danger); box-shadow: 0 1px 0 0 var(--danger); }
.b-field--error .b-field__hint { color: var(--danger); }
.b-select { position: relative; }
.b-select .b-input { padding-right: 32px; cursor: pointer; }
.b-select .b-input option { background: var(--surface-raised); color: var(--ink); }
.b-select::after { content: ""; position: absolute; right: 4px; bottom: 22px; width: 8px; height: 8px; border-right: 1px solid var(--ink-muted); border-bottom: 1px solid var(--ink-muted); transform: rotate(45deg); pointer-events: none; }
/* choice chips (radio group) */
.b-choices { display: flex; flex-wrap: wrap; gap: var(--space-2); border: 0; margin: 0; padding: 0; }
.b-choices legend { padding: 0; margin-bottom: var(--space-3); font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.b-chip { position: relative; }
.b-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.b-chip span { display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-size: 14px; color: var(--ink-muted); transition: all .3s; }
.b-chip:hover span { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.b-chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.b-chip input:focus-visible + span { box-shadow: var(--focus-ring); }
/* checkbox */
.b-check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 13px; line-height: 20px; color: var(--ink-muted); cursor: pointer; }
.b-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; display: grid; place-content: center; }
.b-check input::after { content: ""; width: 9px; height: 5px; border-left: 1.5px solid var(--on-accent); border-bottom: 1.5px solid var(--on-accent); transform: rotate(-45deg) translate(1px,-1px); opacity: 0; }
.b-check input:checked { background: var(--accent); border-color: var(--accent); }
.b-check input:checked::after { opacity: 1; }
.b-check--error { color: var(--danger); }
.b-check--error input { border-color: var(--danger); }
.b-check input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* form layout */
.b-form { display: grid; gap: var(--space-8) var(--space-6); }
.b-form__row { display: grid; gap: var(--space-8) var(--space-6); }
.b-form__foot { display: flex; flex-direction: column; gap: var(--space-4); align-items: stretch; }
@container (min-width: 480px) { .b-form__row { grid-template-columns: 1fr 1fr; } }
.b-alert { display: flex; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 22px; }
.b-alert svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.b-alert--success { color: var(--success); }
.b-alert--error { color: var(--danger); }

/* ── Contact section ──────────────────────────────── */
.b-contact__grid { display: grid; gap: var(--space-12); }
.b-contact__panel { container-type: inline-size; padding: var(--space-8) var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-xs); }
.b-details { list-style: none; margin: var(--space-12) 0 0; padding: 0; border-top: 1px solid var(--line); }
.b-details li { display: grid; gap: var(--space-1); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.b-details a, .b-details span:not(.b-label) { font-size: 17px; color: var(--ink); text-decoration: none; }
.b-details a:hover { color: var(--accent); }
@container (min-width: 960px) {
  .b-contact__grid { grid-template-columns: 5fr 7fr; gap: var(--space-16); align-items: start; }
  .b-contact__panel { padding: var(--space-12); }
}
@container (min-width: 520px) { .b-form__foot { flex-direction: row; align-items: center; justify-content: space-between; } }

/* Registered office card */
.b-legal { position: relative; margin-top: var(--space-12); padding: var(--space-6); border: 1px solid var(--line); background: var(--surface-raised); overflow: hidden; }
.b-legal__mark { position: absolute; right: -14px; bottom: -14px; width: 96px; height: 96px; color: var(--accent); opacity: .12; }
.b-legal__row { position: relative; display: grid; gap: var(--space-2); }
.b-legal__row + .b-legal__row { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.b-legal address { font-style: normal; font-size: 16px; line-height: 26px; color: var(--ink); }
.b-legal span:not(.b-label) { font-size: 16px; color: var(--ink); }
@container (min-width: 720px) { .b-legal { padding: var(--space-8); } }

/* ── Footer ───────────────────────────────────────── */
.b-footer { background: var(--surface-sunken); border-top: 1px solid var(--line); padding-block: var(--space-16) var(--space-8); }
.b-footer__big { margin: 0 0 var(--space-12); font-family: var(--font-serif); font-size: clamp(56px, 13cqi, 176px); line-height: .9; letter-spacing: -.03em; color: var(--ink); }
.b-footer__big em { font-style: normal; color: var(--accent); }
@media (min-width: 880px) { .b-footer { padding-block: var(--space-24) var(--space-8); } }
.b-frame .b-footer { padding-block: var(--space-16) var(--space-8); }
.b-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8) var(--space-6); padding-block: var(--space-8); border-top: 1px solid var(--line); }
.b-footer__cols h4 { margin: 0 0 var(--space-4); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.b-footer__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.b-footer__cols a, .b-footer__cols li { font-size: 14px; line-height: 22px; color: var(--ink-muted); text-decoration: none; }
.b-footer__cols a:hover { color: var(--ink); }
.b-footer__legal { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-6); border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-faint); }
.b-footer__legal a { color: var(--ink-faint); }
@container (min-width: 880px) {
  .b-footer__cols { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .b-footer__legal { flex-direction: row; justify-content: space-between; }
}

/* Hero facts strip */
.b-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: var(--space-16) 0 0; border-top: 1px solid var(--line); }
.b-facts div { padding: var(--space-6) var(--space-4) var(--space-4) 0; }
.b-facts dt { font-family: var(--font-serif); white-space: nowrap; font-size: clamp(30px, 3.3cqi, 48px); line-height: 1; letter-spacing: -.01em; color: var(--ink); transition: color .4s; }
.b-facts dd { margin: var(--space-3) 0 0; max-width: 16rem; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.b-facts div:hover dt { color: var(--accent); }
@container (min-width: 960px) {
  .b-facts { grid-template-columns: repeat(4, 1fr); margin-top: var(--space-24); }
  .b-facts div { padding: var(--space-8) var(--space-6) 0; border-left: 1px solid var(--line); }
  .b-facts div:first-child { padding-left: 0; border-left: 0; }
}
.b-services + .b-modes { margin-top: var(--space-16); }

/* ══ Practice sections (Technology, Logistics) ═══════ */
.b-switch { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-8); }
.b-switch a { display: inline-flex; align-items: center; gap: var(--space-3); height: 44px; padding: 0 20px 0 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--ink); text-decoration: none; font-size: 14px; transition: background-color .4s, border-color .4s, color .4s; }
.b-switch a span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--accent); transition: color .4s; }
.b-switch a:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.b-switch a:hover span { color: var(--on-accent); }
.b-switch a:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

.b-phead { display: grid; gap: var(--space-8); margin-bottom: var(--space-12); }
.b-phead__num { display: block; font-family: var(--font-serif); font-size: clamp(88px, 13cqi, 168px); line-height: .78; letter-spacing: -.03em; color: var(--accent); }
.b-phead__title { margin: var(--space-4) 0 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(40px, 6cqi, 72px); line-height: 1; letter-spacing: -.015em; color: var(--ink); }
.b-phead .b-lead { margin-top: 0; }
.b-phead__body { display: grid; gap: var(--space-6); align-content: end; }
@container (min-width: 960px) { .b-phead { grid-template-columns: 5fr 7fr; gap: var(--space-16); align-items: end; margin-bottom: var(--space-16); } }

.b-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.b-tags li { padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); transition: border-color .4s, color .4s; }
.b-tags li:hover { border-color: var(--accent); color: var(--ink); }

/* Service cards: hairline grid, 1 / 2 / 3 columns */
.b-services { display: grid; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
@container (min-width: 640px) { .b-services { grid-template-columns: 1fr 1fr; } }
@container (min-width: 1000px) { .b-services { grid-template-columns: repeat(3, 1fr); } }
.b-service { position: relative; display: flex; flex-direction: column; gap: var(--space-4); min-height: 300px; padding: var(--space-8) var(--space-6); background: var(--canvas); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; transition: background-color .5s cubic-bezier(.2,.7,.1,1); }
.b-service::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.2,.7,.1,1); }
.b-service:hover { background: var(--surface-raised); }
.b-service:hover::before { transform: scaleX(1); }
.b-service__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-4); }
.b-service__num { font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: .14em; color: var(--ink-faint); transition: color .4s; }
.b-service:hover .b-service__num { color: var(--accent); }
.b-service__icon { width: 36px; height: 36px; color: var(--ink-muted); transition: color .4s, transform .7s cubic-bezier(.2,.7,.1,1); }
.b-service:hover .b-service__icon { color: var(--accent); transform: translateY(-4px); }
.b-service h3 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 28px; line-height: 1.1; color: var(--ink); }
.b-service p { margin: 0; font-size: 15px; line-height: 25px; color: var(--ink-muted); }
.b-service__list { list-style: none; margin: auto 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.b-service__list li { font-family: var(--font-mono); font-size: 11px; line-height: 18px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.b-service__list li + li::before { content: "·"; margin-right: var(--space-3); color: var(--line-strong); }
.b-service { min-height: 0; }
@container (min-width: 720px) { .b-service { min-height: 300px; padding: var(--space-12) var(--space-8) var(--space-8); } }

/* Engagement models */
.b-models { display: grid; gap: var(--space-8); margin-top: var(--space-16); }
.b-models__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 32px; line-height: 1.15; color: var(--ink); }
.b-models__grid { display: grid; gap: 0; border-top: 1px solid var(--line); }
.b-model { display: grid; gap: var(--space-2); padding: var(--space-6) 0; border-bottom: 1px solid var(--line); }
.b-model strong { font-weight: 600; font-size: 17px; color: var(--ink); }
.b-model p { margin: 0; font-size: 15px; line-height: 25px; color: var(--ink-muted); }
@container (min-width: 960px) {
  .b-models { grid-template-columns: 4fr 8fr; gap: var(--space-16); }
  .b-models__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); border-top: 0; }
  .b-model { border-bottom: 0; border-top: 1px solid var(--line); padding: var(--space-6) 0 0; }
}

/* Transport modes band, the one emerald block on the page */
.b-modes { position: relative; margin-top: var(--space-16); background: var(--panel); color: var(--on-panel); overflow: hidden; }
.b-modes__route { display: block; width: 100%; height: 72px; }
.b-modes__route .rt { fill: none; stroke: var(--on-panel-muted); stroke-width: 1; stroke-dasharray: 3 7; opacity: .6; }
.b-modes__route .rt-live { fill: none; stroke: var(--accent-on-panel); stroke-width: 1.5; stroke-dasharray: 3 7; animation: b-dash 1.6s linear infinite; }
.b-modes__route .dot { fill: var(--accent-on-panel); }
.b-modes__grid { display: grid; grid-template-columns: 1fr 1fr; }
.b-mode { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-6); border-top: 1px solid #ffffff1a; transition: background-color .5s; }
.b-mode:nth-child(odd) { border-right: 1px solid #ffffff1a; }
.b-mode:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
.b-mode svg { width: 44px; height: 44px; color: var(--accent-on-panel); transition: transform .8s cubic-bezier(.2,.7,.1,1); }
.b-mode:hover { background: #ffffff0d; }
.b-mode:hover svg { transform: translateX(10px); }
.b-mode strong { font-family: var(--font-serif); font-weight: 400; font-size: 28px; line-height: 1.1; }
.b-mode span { font-size: 14px; line-height: 22px; color: var(--on-panel-muted); }
.b-modes__head { display: grid; gap: var(--space-2); padding: var(--space-8) var(--space-6) var(--space-6); }
.b-modes__head strong { font-family: var(--font-serif); font-weight: 400; font-size: 32px; line-height: 1.1; }
.b-modes__head span { font-size: 15px; line-height: 25px; color: var(--on-panel-muted); max-width: 36rem; }
@container (min-width: 900px) {
  .b-modes__grid { grid-template-columns: repeat(5, 1fr); }
  .b-mode { padding: var(--space-8); border-top: 1px solid #ffffff1a; border-right: 1px solid #ffffff1a; }
  .b-mode:last-child, .b-mode:last-child:nth-child(odd) { border-right: 0; grid-column: auto; }
  .b-modes__head { grid-template-columns: 5fr 7fr; align-items: end; gap: var(--space-16); padding: var(--space-12) var(--space-8) var(--space-8); }
}

/* ══ Process ═════════════════════════════════════════ */
.b-steps { position: relative; display: grid; gap: 0; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.b-step { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: var(--space-4); padding-bottom: var(--space-12); }
.b-step::before { content: ""; position: absolute; left: 11px; top: 28px; bottom: 0; width: 1px; background: var(--line-strong); }
.b-step:last-child::before { display: none; }
.b-step__node { position: relative; z-index: 1; width: 23px; height: 23px; margin-top: 3px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--canvas); transition: background-color .5s, border-color .5s, transform .5s; }
.b-step__node::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .5s cubic-bezier(.2,.7,.1,1); }
.b-step:hover .b-step__node, .b-step.is-revealed .b-step__node { border-color: var(--accent); }
.b-step:hover .b-step__node::after, .b-step.is-revealed .b-step__node::after { transform: scale(1); }
.b-step:hover .b-step__node { transform: scale(1.15); }
.b-step__num { display: block; margin-bottom: var(--space-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--accent); }
.b-step h3 { margin: 0 0 var(--space-3); font-family: var(--font-serif); font-weight: 400; font-size: 28px; line-height: 1.1; color: var(--ink); }
.b-step p { margin: 0; max-width: 28rem; font-size: 15px; line-height: 25px; color: var(--ink-muted); }
@container (min-width: 900px) {
  .b-steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }
  .b-step { grid-template-columns: 1fr; gap: var(--space-6); padding-bottom: 0; }
  .b-step::before { left: 24px; right: calc(-1 * var(--space-8)); top: 14px; bottom: auto; width: auto; height: 1px; }
  .b-step__node { margin-top: 3px; }
}

/* ══ Motion ══════════════════════════════════════════ */
@keyframes b-dash { to { stroke-dashoffset: -20; } }
@keyframes b-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } }
.b-art-route { animation: b-dash 1.8s linear infinite; }
.b-art-pulse { fill: none; stroke: var(--accent); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: b-pulse 2.6s cubic-bezier(.2,.7,.1,1) infinite; }
.b-art-pulse--late { animation-delay: 1.3s; }
.b-hero__art { transition: transform 1.2s cubic-bezier(.2,.7,.1,1); will-change: transform; }
.b-header { transition: box-shadow .4s, background-color .4s; }
.b-header.is-scrolled { box-shadow: 0 12px 32px -22px #000000cc; }
/* Scroll reveal: only when JS has marked the page (content stays visible without JS) */
@keyframes b-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.b-motion [data-reveal] { opacity: 0; }
.b-motion [data-reveal].is-revealed { opacity: 1; animation: b-rise .9s cubic-bezier(.2,.7,.1,1) both; animation-delay: calc(var(--i, 0) * 90ms); }
@media (prefers-reduced-motion: reduce) {
  .b-art-route, .b-art-pulse, .b-modes__route .rt-live { animation: none; }
  .b-motion [data-reveal], .b-motion [data-reveal].is-revealed { opacity: 1; animation: none; }
  .b-hero__art { transform: none !important; }
}

/* ── Preview helpers ──────────────────────────────── */
.b-demo { padding: var(--space-8); }
.b-demo-row { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; }
.b-phones { display: flex; gap: 32px; padding: 32px; align-items: flex-start; background: var(--surface-sunken); }
.b-phone { flex: none; width: 390px; height: 780px; overflow: hidden; background: var(--canvas); border: 1px solid var(--line-strong); border-radius: 28px; }
.b-phone > .b-frame { height: 100%; overflow: hidden; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }