/* Diamo — Editorial specialist B2B (visual-direction L1–L7, C1–C10). Instrument Serif + Geist + Geist Mono. */
@font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/instrument-serif-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/instrument-serif-italic-latin.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/assets/fonts/geist-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/assets/fonts/geist-mono-latin.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --ink: #171513; --graphite: #24211E; --graphite-2: #2E2A26;
  --bone: #F7F2EA; --sand: #EADFD0; --sand-2: #E1D3C1; --paper: #FFFDF9;
  --copper: #9C5F2E; --copper-light: #D39A63; --copper-tint: #F0DCC4;
  --signal: #B3261E; --muted: #645C53; --muted-light: #B9AFA3;
  --line-dark: rgba(247, 242, 234, .14); --line-light: rgba(23, 21, 19, .12);
  --serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --wrap: 1240px; --gutter: clamp(1.25rem, 4.5vw, 3rem); --radius: 6px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
html { background: var(--ink); }
body { margin: 0; background: transparent; color: var(--ink); font: 400 1.0625rem/1.6 var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
main { background: var(--bone); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 3px; border-radius: 3px; }
.band-bone :focus-visible, .band-sand :focus-visible, .form-card :focus-visible { outline-color: var(--copper); }
p { margin: 0 0 1rem; }
h1, h2, h3 { margin: 0; font-weight: 400; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 860px; }
.nw { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 50; background: var(--copper-light); color: var(--ink); padding: .6rem 1rem; border-radius: var(--radius); font-weight: 600; }
.skip:focus { top: 1rem; }

/* Type */
.display { font-family: var(--serif); letter-spacing: -.012em; line-height: 1.02; }
.display em { font-style: italic; color: var(--muted); }
.display.light, .band-ink .display, .band-graphite .display { color: var(--bone); }
.band-ink .display em, .band-graphite .display em { color: var(--copper-light); }
h2.display { font-size: clamp(2.3rem, 5vw, 4rem); }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.55; color: #3A352F; max-width: 58ch; }
.lead-light { color: #D8CFC4; }
.label { font: 500 .78rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--copper); margin: 0 0 1.25rem; }
.label-light { color: var(--copper-light); }

/* Bands */
.band { position: relative; padding: clamp(4.5rem, 10vw, 8.5rem) 0; }
.band-tight { padding-top: 0; }
.band-ink { background: var(--ink); color: var(--bone); }
.band-graphite { background: var(--graphite); color: var(--bone); }
.band-bone { background: var(--bone); }
.band-sand { background: var(--sand); }
.grain { position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.band > .wrap { position: relative; }
.split-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.split-head .lead { margin: 0; }

/* Buttons & links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.1rem; padding: .8rem 1.4rem; border-radius: var(--radius); border: 0; font: 600 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: background-color .18s, color .18s, transform .18s; }
.btn .arrow { transition: transform .18s; }
.btn:hover .arrow, .link-arrow:hover .arrow { transform: translateX(3px); }
.btn-copper { background: var(--copper-light); color: var(--ink); }
.btn-copper:hover { background: #E3AD78; }
.btn-ink { background: var(--ink); color: var(--bone); }
.btn-ink:hover { background: var(--graphite-2); }
.btn-block { width: 100%; }
.btn[disabled], [data-sending="true"] .btn { opacity: .7; cursor: progress; }
.link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding: .25rem 0; }
.link-arrow .arrow { transition: transform .18s; }
.link-light { color: var(--bone); }
.link-arrow:not(.link-light) { color: var(--ink); }
.link-arrow:not(.link-light):hover { color: var(--copper); }

/* Header */
/* Opaque, no backdrop-filter: a blurred sticky bar repaints its whole layer on navigation and paints dark
   edge artefacts at the viewport sides on mobile. At .9 alpha over the dark hero the blur was invisible anyway. */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--ink); color: var(--bone); transition: box-shadow .2s; }
.site-header a, .site-header .lang { -webkit-tap-highlight-color: transparent; }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line-dark); }
.header-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
.brand { display: block; background: var(--bone); border-radius: 4px; padding: 5px 7px; }
.brand img { width: 38px; }
.nav { display: flex; align-items: center; gap: clamp(.8rem, 2.4vw, 2rem); }
.nav-links { display: flex; gap: clamp(1rem, 2.4vw, 2rem); margin: 0; padding: 0; list-style: none; }
.nav-links a { color: #D8CFC4; text-decoration: none; font-size: .95rem; padding: .6rem 0; }
.nav-links a:hover { color: var(--bone); }
.nav-cta { color: var(--ink); background: var(--copper-light); text-decoration: none; font-weight: 600; font-size: .92rem; padding: .55rem .95rem; border-radius: var(--radius); }
.nav-cta:hover { background: #E3AD78; }
/* One capsule, two real links. The links tile the whole control — there is no padding ring or separator
   that belongs to neither half — so the side you press is the language you get. The indicator is a separate
   element with its own view-transition-name; it slides because the browser animates it between the two
   documents, not because JavaScript moves it. */
.lang { position: relative; display: inline-flex; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-dark); font: 500 .75rem/1 var(--mono); letter-spacing: .06em; -webkit-tap-highlight-color: transparent; }
.lang-thumb { position: absolute; top: 3px; left: 3px; width: calc(50% - 6px); height: calc(100% - 6px); border-radius: 999px; background: var(--bone); view-transition-name: lang-thumb; }
.lang[data-active="en"] .lang-thumb { transform: translateX(calc(100% + 6px)); }
.lang-item { position: relative; z-index: 1; display: inline-grid; place-items: center; min-width: 2.7rem; min-height: 2.5rem; padding: 0 .1rem; border-radius: 999px; color: #D8CFC4; text-decoration: none; transition: color .2s ease; }
.lang-item:hover { color: var(--bone); }
.lang-item[aria-current="true"] { color: var(--ink); cursor: default; }
@media (max-width: 760px) { .nav-links { display: none; } }

/* C1 Hero */
.hero { padding: clamp(2.75rem, 5.5vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem); overflow: hidden; isolation: isolate; }
.hero-photo { position: absolute; inset: 0; z-index: -3; background: var(--ink); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 62%; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(23,21,19,.97) 0%, rgba(23,21,19,.88) 36%, rgba(23,21,19,.3) 60%, rgba(23,21,19,.04) 100%), linear-gradient(0deg, rgba(23,21,19,.8) 0%, rgba(23,21,19,0) 28%); }
.hero .grain { z-index: -1; }
.hero-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.hero-caption { display: flex; align-items: center; gap: .55rem; margin: 0; font: 500 .74rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--copper-light); }
.hero-caption::before { content: ''; width: 18px; height: 1px; background: var(--copper-light); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; align-items: center; }
.hero-title { font-size: clamp(2.9rem, 5.6vw, 5rem); line-height: .98; max-width: 17ch; }
.hero-title em { display: block; }
.hero-lede { margin-top: 1.5rem; font-size: clamp(1.08rem, 1.5vw, 1.25rem); color: #D8CFC4; max-width: 50ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.hero-art { margin: 0 calc(-1 * var(--gutter)) 0 0; }
.hero-svg { width: 100%; max-width: none; height: auto; overflow: visible; }
@media (min-width: 1360px) { .hero-svg { width: 112%; } }
.hv .hv-field circle { fill: #F7F2EA; }
.hv-field path { fill: none; stroke-width: .8; }
.hv-far path { stroke: rgba(247,242,234,.16); }
.hv-near { stroke: rgba(247,242,234,.13); }
.hv-hublinks { stroke: rgba(211,154,99,.28); stroke-dasharray: 2 4; }
.hv-orbits ellipse { fill: none; stroke: rgba(211,154,99,.42); stroke-width: .9; stroke-dasharray: 120 30 40 22; animation: hv-spin 60s linear infinite; transform-box: fill-box; }
.hv-orbits .hv-orbit-2 { stroke: rgba(247,242,234,.22); stroke-dasharray: 70 18; animation-duration: 44s; animation-direction: reverse; }
.hv-orbits .hv-orbit-3 { stroke: rgba(211,154,99,.55); stroke-dasharray: none; animation: none; }
@keyframes hv-spin { to { stroke-dashoffset: -420; } }
.hv-flows path { fill: none; stroke-width: 1.4; stroke-linecap: round; }
.hv-pulses circle { fill: #F4D2A8; }
.hv-frame { fill: rgba(23,21,19,.55); stroke: rgba(247,242,234,.42); stroke-width: 1; }
.hv-core { fill: var(--bone); }
.hv-hub-ring { fill: rgba(23,21,19,.35); stroke: rgba(211,154,99,.7); stroke-width: 1; }
.hv-hub-core { fill: var(--copper-light); }
.hv-hub-dot { fill: var(--ink); }
.hv-end-ring { fill: rgba(23,21,19,.45); stroke: rgba(247,242,234,.4); stroke-width: 1; }
.hv-end-core { fill: var(--bone); }
.hv-end-tax .hv-end-ring { stroke: rgba(179,38,30,.75); }
.hv-end-tax .hv-end-core { fill: #D9473D; }
.hv-tick { stroke: rgba(247,242,234,.35); stroke-width: 1; }
.hv-label { fill: rgba(247,242,234,.9); font: 500 12.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; text-anchor: middle; }
.hv-label-hub { fill: var(--copper-light); }
.hv-label-end { text-anchor: end; }
.hero-facts { display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; font: 500 .8rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #CFC5B9; }
.hero-facts li { display: flex; align-items: center; gap: .6rem; }
.hero-facts li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--copper-light); }
.hero-facts li:first-child::before { background: var(--signal); }

/* C2 Flow rail — business flow (5) above specialisms (7) */
.rail-legend { display: flex; flex-wrap: wrap; gap: .6rem 2rem; margin: 0 0 1.75rem; font: 500 .74rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rail-legend span { display: inline-flex; align-items: center; gap: .55rem; }
.lg-step::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--copper); background: var(--paper); }
.lg-area::before { content: ''; width: 18px; height: 12px; border-radius: 3px; background: var(--paper); box-shadow: inset 0 0 0 1.5px #CDBBA3; }
.rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.rail-stop { position: relative; display: grid; grid-template-rows: subgrid; grid-row: span 2; min-width: 0; }
.rail-stop:not(:last-child)::before { content: ''; position: absolute; top: 29px; left: 70px; width: calc(100% + 1.25rem - 80px); height: 2px; background: var(--copper); transform-origin: left; transition: transform .9s ease; }
.rail-stop:not(:last-child)::after { content: ''; position: absolute; top: 25px; left: calc(100% + 1.25rem - 18px); width: 8px; height: 8px; border-top: 2px solid var(--copper); border-right: 2px solid var(--copper); transform: rotate(45deg); }
.rail-stop:nth-child(2)::before { transition-delay: .15s; } .rail-stop:nth-child(3)::before { transition-delay: .3s; } .rail-stop:nth-child(4)::before { transition-delay: .45s; }
.js .rail:not(.is-in) .rail-stop::before { transform: scaleX(0); }
.rail-head { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .8rem; margin: 0; }
.rail-dot { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--paper); border: 2px solid var(--copper); color: var(--copper); }
.rail-name { font-family: var(--serif); font-size: 1.65rem; line-height: 1.05; }
.rail-areas { position: relative; display: grid; align-content: start; gap: .4rem; list-style: none; margin: 1.5rem 0 0; padding: 1.1rem 0 0; }
.rail-areas::before { content: ''; position: absolute; top: 0; left: 29px; width: 1px; height: 1.1rem; background: var(--sand-2); }
.rail-areas a { display: flex; align-items: baseline; gap: .55rem; padding: .6rem .7rem; border-radius: 4px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--sand-2); text-decoration: none; font-size: .92rem; line-height: 1.25; color: var(--ink); transition: box-shadow .18s, background .18s; }
.rail-areas a:hover { box-shadow: inset 0 0 0 1.5px var(--copper); }
.ra-n { font: 500 .7rem/1 var(--mono); color: var(--copper); }

/* C3 Bento */
.mods { display: grid; gap: 1rem; }
.mod { position: relative; border-radius: var(--radius); padding: clamp(1.5rem, 3.2vw, 3rem); min-width: 0; scroll-margin-top: 6rem; }
.mod p { margin: 0; font-size: 1rem; line-height: 1.55; }
.mod [id] { scroll-margin-top: 6rem; }
/* A · showcase (E-faktura + EDI) */
.exchange { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, .45fr) minmax(0, 1fr); align-items: center; gap: 0; margin-bottom: clamp(2rem, 4vw, 3rem); }
.ex-card { border-radius: var(--radius); padding: 1.1rem 1.2rem 1.2rem; min-width: 0; }
.ex-edi { background: rgba(247,242,234,.06); box-shadow: inset 0 0 0 1px rgba(247,242,234,.12); }
.ex-inv { background: var(--ink); box-shadow: inset 0 0 0 1px rgba(211,154,99,.35), 0 30px 60px -40px rgba(0,0,0,.8); }
.ex-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin: 0 0 .9rem !important; font: 500 .7rem/1 var(--mono) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-light) !important; }
.ex-kind { color: var(--copper-light); }
.ex-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .32rem .5rem; border-radius: 4px; background: rgba(211,154,99,.16); color: var(--copper-light); }
.ex-code { display: grid; gap: .3rem; font: 500 .76rem/1.4 var(--mono); color: #CFC5B9; overflow: hidden; }
.ex-code code { white-space: nowrap; }
.ex-code .hl { color: var(--copper-light); }
.ex-inv pre { margin: 0; overflow: hidden; font: 500 .72rem/1.7 var(--mono); color: #CFC5B9; white-space: pre; }
.ex-inv .t { color: var(--copper-light); }
.ex-mid { display: grid; gap: .2rem; justify-items: center; font: 500 .66rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-light); }
.ex-lane { width: 100%; height: 64px; }
.ex-track { stroke: rgba(211,154,99,.45); stroke-width: 1.2; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.ex-packet { fill: var(--copper-light); }
.ex-packet-back { fill: var(--bone); }
.showcase-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); padding-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid rgba(247,242,234,.12); }
/* B · mirror pair (P2P / O2C) */
.mod-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .95fr) minmax(0, 1fr); gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: center; }
.pair-block:last-child { text-align: right; }
.pair-block:last-child .tags { justify-content: flex-end; }
.spine { padding: 1.25rem 1rem 1.4rem; border-radius: var(--radius); background: var(--bone); }
.spine-head { text-align: center; font: 500 .7rem/1.2 var(--mono) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--copper); }
.spine-sides { display: flex; justify-content: space-between; margin: .9rem 0 .5rem !important; font: 500 .66rem/1 var(--mono) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.spine ol { position: relative; display: grid; gap: .55rem; list-style: none; margin: 0; padding: 0; }
.spine ol::before { content: ''; position: absolute; left: 50%; top: 12px; bottom: 12px; width: 2px; margin-left: -1px; background: var(--sand-2); }
.spine li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); align-items: center; gap: .5rem; }
.sp-l, .sp-r { padding: .55rem .5rem; border-radius: 4px; background: var(--paper); font: 500 .72rem/1.2 var(--mono); text-align: center; color: #4A4239; }
.sp-node { position: relative; z-index: 1; justify-self: center; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid var(--copper); }
.spine li:last-child .sp-l { background: var(--copper-light); color: var(--ink); }
.spine li:last-child .sp-r { background: var(--ink); color: var(--bone); }
.spine li:last-child .sp-node { background: var(--copper); }
/* C · feature split (network / CTC) */
.mod-feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.mod-ctc { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.nw-svg { width: 100%; height: auto; }
.nw-zone { fill: rgba(247,242,234,.025); stroke: rgba(247,242,234,.1); stroke-width: 1; stroke-dasharray: 2 5; }
.nw-spokes { fill: none; stroke: rgba(247,242,234,.2); stroke-width: .8; }
.nw-bridge { fill: none; stroke: var(--copper-light); stroke-width: 1.6; opacity: .75; }
.nw-pulses circle { fill: #F4D2A8; }
.nw-node { fill: var(--graphite-2); stroke: rgba(247,242,234,.6); stroke-width: 1.1; }
.nw-c { stroke: rgba(211,154,99,.8); }
.nw-hub { fill: var(--copper-light); }
.nw-hub-ring { fill: none; stroke: rgba(211,154,99,.45); stroke-width: 1; }
.nw-label { fill: rgba(247,242,234,.72); font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; text-anchor: middle; }
.nw-label-bridge { fill: var(--copper-light); }
.mod-ctc .feature-art { position: relative; padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 2rem); border-radius: var(--radius); background: var(--bone); }
.ctc-seq { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.ctc-seq li { position: relative; display: grid; justify-items: center; gap: .8rem; text-align: center; }
.ctc-seq li:not(:last-child)::before { content: ''; position: absolute; top: 22px; left: calc(50% + 30px); width: calc(100% - 60px); height: 2px; background: repeating-linear-gradient(90deg, var(--copper) 0 5px, transparent 5px 9px); }
.cs-mark { position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--paper); border: 2px solid var(--sand-2); }
.cs-0 .cs-mark::after { content: ''; width: 16px; height: 20px; border-radius: 2px; background: repeating-linear-gradient(180deg, var(--copper) 0 2px, transparent 2px 5px) 4px 5px / 8px 11px no-repeat, var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); }
.cs-1 .cs-mark { border-color: var(--copper); }
.cs-1 .cs-mark::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--copper); box-shadow: 0 0 0 6px rgba(156,95,46,.15); }
.cs-2 .cs-mark { width: 58px; height: 58px; margin-top: -6px; border: 2px solid var(--signal); color: var(--signal); box-shadow: 0 0 0 5px var(--bone), 0 0 0 6px rgba(179,38,30,.35); }
.cs-2 .cs-mark svg { width: 24px; height: 24px; }
.cs-3 .cs-mark { background: var(--ink); border-color: var(--ink); }
.cs-3 .cs-mark::after { content: ''; width: 10px; height: 10px; border-radius: 2px; background: var(--bone); }
.cs-label { font: 500 .72rem/1.25 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: #4A4239; }
.cs-2 .cs-label { color: var(--signal); }
.ctc-rt { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 1.6rem 0 0 !important; font: 500 .68rem/1 var(--mono) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rt-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0 rgba(179,38,30,.5); animation: rt-pulse 2.4s ease-out infinite; }
@keyframes rt-pulse { 70% { box-shadow: 0 0 0 9px rgba(179,38,30,0); } 100% { box-shadow: 0 0 0 0 rgba(179,38,30,0); } }
.ctc-stamp { position: absolute; top: .9rem; right: 1rem; padding: .3rem .55rem; border: 1.5px solid var(--signal); border-radius: 3px; transform: rotate(-6deg); font: 500 .66rem/1 var(--mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--signal); }
.tile { position: relative; display: flex; flex-direction: column; gap: 1.5rem; border-radius: var(--radius); padding: clamp(1.4rem, 2.6vw, 2.2rem); min-width: 0; transition: transform .2s, box-shadow .2s; scroll-margin-top: 6rem; }
.tile p { margin: 0; font-size: 1rem; line-height: 1.55; }
.tile-title { font-size: clamp(1.75rem, 2.8vw, 2.4rem); margin-bottom: .75rem; }
.tile-light { background: var(--paper); box-shadow: 0 1px 0 rgba(23,21,19,.04); }
.tile-light p { color: #3A352F; }
.tile-dark { background: var(--graphite); color: var(--bone); }
.tile-dark .tile-title { color: var(--bone); }
.tile-dark p { color: #D8CFC4; }
.tile-copper { background: var(--copper-tint); }
.tile-copper p { color: #3A2E22; }

.tags { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.tags li { font: 500 .74rem/1 var(--mono); padding: .45rem .6rem; border-radius: 4px; background: var(--sand); color: #4A4239; }
.tile-dark .tags li { background: rgba(247,242,234,.08); color: #E2D8CC; }
.tile-copper .tags li { background: rgba(255,253,249,.7); color: #4A3A2A; }
.tile-finance { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; list-style: none; margin: 0; padding: 0; justify-content: flex-end; }
.chips li { display: flex; align-items: center; gap: .6rem; font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 2rem); }
.chips li:not(:last-child)::after { content: '→'; font-family: var(--sans); font-size: 1rem; color: var(--copper); }
.chips li:nth-child(2) { padding: .3rem .9rem; border-radius: 999px; background: var(--ink); color: var(--copper-light); }
.modules-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 2rem; padding: 1.4rem clamp(1.4rem, 2.6vw, 2.2rem); border-radius: var(--radius); background: var(--sand-2); }
.modules-cta p { margin: 0; font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.1; }

/* C4 Mandate */
.mandate-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem 5rem; align-items: center; }
.mandate .lead { margin-top: 1.5rem; }
.timeline { position: relative; display: grid; gap: 0; list-style: none; margin: 0; padding: 0 0 0 2rem; }
.timeline::before { content: ''; position: absolute; left: 6px; top: .6rem; bottom: .6rem; width: 2px; background: linear-gradient(var(--copper-light), rgba(211,154,99,.2)); }
.timeline li { position: relative; display: grid; gap: .3rem; padding: 1.1rem 0 1.4rem; }
.timeline li::before { content: ''; position: absolute; left: calc(-2rem + 1px); top: 1.45rem; width: 12px; height: 12px; border-radius: 50%; background: var(--graphite); border: 2px solid var(--copper-light); }
.timeline li.is-now::before { background: var(--copper-light); box-shadow: 0 0 0 6px rgba(211,154,99,.18); }
.tl-when { font-family: var(--serif); font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; color: var(--bone); }
.tl-what { color: #D8CFC4; max-width: 38ch; }
.source { grid-column: 1 / -1; margin: 0; font: 500 .74rem/1.4 var(--mono); color: var(--muted-light); letter-spacing: .03em; }

/* C5 Expert */
/* C10 Paper-to-data split */
.shift-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.shift-media { position: relative; margin: 0; padding: 0 3.5rem 3.25rem 0; }
.shift-frame { position: relative; }
.shift-frame::before { content: ''; position: absolute; inset: 1.5rem -1.5rem -1.5rem 1.5rem; border-radius: var(--radius); background: var(--copper); }
.shift-frame img { position: relative; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--graphite); }
.shift-card { position: absolute; right: 0; bottom: 0; z-index: 2; width: min(300px, 64%); padding: 1rem 1.1rem 1.1rem; border-radius: var(--radius); background: var(--paper); box-shadow: 0 26px 50px -24px rgba(23,21,19,.5); }
.sc-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin: 0 0 .85rem; font: 500 .72rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sc-status { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .5rem; border-radius: 4px; background: var(--copper-tint); color: #7A4A22; }
.sc-status svg { width: 13px; height: 13px; }
.shift-card ul { display: grid; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.shift-card li { display: grid; grid-template-columns: minmax(0, 7.2rem) minmax(0, 1fr) 16px; align-items: center; gap: .6rem; font: 500 .74rem/1.2 var(--mono); color: var(--ink); }
.sc-bar { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--sand-2) 0 72%, transparent 72%); }
.shift-card li svg { color: var(--copper); transition: opacity .35s ease calc(var(--i) * .22s), transform .35s ease calc(var(--i) * .22s); }
.js .shift:not(.is-in) .shift-card li svg { opacity: 0; transform: scale(.6); }
.shift-copy .lead { margin-top: 1.5rem; }
.shift-compare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .9rem; align-items: stretch; margin-top: 2.25rem; }
.sc-col { padding: 1.15rem 1.25rem 1.2rem; border-radius: var(--radius); }
.sc-before { background: rgba(255,253,249,.6); color: #4A4239; }
.sc-after { background: var(--ink); color: var(--bone); }
.sc-label { margin: 0 0 .7rem; font: 500 .72rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sc-after .sc-label { color: var(--copper-light); }
.sc-col ul { display: grid; gap: .45rem; list-style: none; margin: 0; padding: 0; font-size: .95rem; line-height: 1.35; }
.sc-arrow { align-self: center; font: 400 2.1rem/1 var(--serif); color: var(--copper); }

/* C5 route graphic */
.route-svg { position: absolute; right: 1%; top: 5%; width: 56%; max-width: 400px; height: auto; pointer-events: none; }
.rt-dots circle { fill: rgba(156,95,46,.22); }
.rt-path { fill: none; stroke: var(--copper); stroke-width: 1.5; stroke-dasharray: 5 5; }
.rt-node circle { fill: var(--copper); }
.rt-home circle:last-child { fill: var(--signal); }
.rt-ring { fill: rgba(179,38,30,.1) !important; stroke: rgba(179,38,30,.45); stroke-width: 1; }
.rt-label { fill: #4A3A2A; font: 500 14px var(--mono); letter-spacing: .06em; text-transform: uppercase; text-anchor: middle; }
.rt-label-end { text-anchor: end; }
.rt-label-home { fill: var(--ink); font-size: 15px; text-anchor: start; }

.expert-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: stretch; }
.expert-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; min-height: 26rem; padding: clamp(1.6rem, 3vw, 2.6rem); border-radius: var(--radius); background: var(--sand); overflow: hidden; }
.expert-logo { position: relative; z-index: 1; width: 150px; mix-blend-mode: multiply; }
.expert-name { position: relative; z-index: 1; }
.expert-name .name { font-size: clamp(2.2rem, 3.6vw, 3rem); margin: 0; }
.expert-name .role { margin: .4rem 0 0; font: 500 .8rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--copper); }
.expert-text .lead { margin-top: 1.75rem; color: var(--ink); }
.expert-text p:not(.lead) { color: #3A352F; max-width: 60ch; }
.expert-links { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin-top: 1.75rem; }

/* C6 Engage */
.engage-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem 4rem; align-items: start; padding: clamp(2rem, 4vw, 3.25rem); border-radius: var(--radius); background: var(--sand); }
.engage-title { font-size: clamp(2rem, 3.6vw, 3rem); position: sticky; top: 7rem; }
.engage-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; list-style: none; margin: 0; padding: 0; }
.engage-list li { position: relative; padding: 1.1rem 1.2rem 1.2rem 1.2rem; border-radius: var(--radius); background: var(--paper); color: #3A352F; }
.engage-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.engage-list li::before { content: ''; display: block; width: 22px; height: 3px; margin-bottom: .8rem; background: var(--copper); border-radius: 2px; }
.engage-list strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.1; color: var(--ink); margin-bottom: .35rem; }

/* C11 Portfolio cards — graphite on bone; the whole card is the link (stretched ::after carries hit area and focus ring) */
.pf-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.pf-card { position: relative; display: flex; flex-direction: column; gap: .85rem; min-height: 17rem; padding: clamp(1.6rem, 3vw, 2.6rem); border-radius: var(--radius); background: var(--graphite); color: var(--bone); box-shadow: inset 0 0 0 1px rgba(247, 242, 234, .06); transition: transform .2s ease, box-shadow .2s ease; }
.pf-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(211, 154, 99, .55), 0 26px 50px -30px rgba(23, 21, 19, .55); }
.pf-meta { order: -1; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; margin: 0; font: 500 .74rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--copper-light); }
.pf-meta span:first-child { display: inline-flex; align-items: center; gap: .55rem; }
.pf-meta span:first-child::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--copper-light); }
.pf-meta span + span { color: var(--muted-light); }
.pf-name { font-size: clamp(2.2rem, 3.6vw, 3rem); color: var(--bone); }
.pf-text { margin: 0; color: #D8CFC4; max-width: 46ch; }
.pf-link { display: flex; align-items: center; gap: .45rem; min-height: 3rem; margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--line-dark); font: 500 .85rem/1.2 var(--mono); letter-spacing: .04em; color: var(--copper-light); text-decoration: none; }
.pf-link svg { transition: transform .18s ease; }
.pf-card:hover .pf-link svg { transform: translate(2px, -2px); }
.pf-link::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }
.pf-link:focus-visible { outline: none; }
.pf-link:focus-visible::after { outline: 2px solid var(--copper); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .pf-card:hover, .pf-card:hover .pf-link svg { transform: none; } }

/* C7 FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem 4rem; align-items: start; }
.faq-head { position: sticky; top: 7rem; }
.faq-list { display: grid; gap: .6rem; }
.faq details { background: var(--paper); border-radius: var(--radius); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.3rem 1.5rem; cursor: pointer; list-style: none; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-family: var(--serif); font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.15; color: var(--ink); }
.faq summary:hover h3 { color: var(--copper); }
.plus { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--sand); }
.plus::before, .plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .2s; }
.plus::after { transform: translate(-50%, -50%) rotate(90deg); }
details[open] .plus { background: var(--copper-light); }
details[open] .plus::after { transform: translate(-50%, -50%) rotate(0); }
.answer { padding: 0 1.5rem 1.4rem; }
.answer p { margin: 0; color: #3A352F; max-width: 64ch; }

/* C8 Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.contact .lead { margin-top: 1.5rem; }
.direct { margin-top: 2.5rem; padding: 1.6rem; border-radius: var(--radius); background: var(--graphite); }
.direct .label { margin-bottom: .75rem; }
.direct-name { font-size: 2rem; margin: 0 0 1rem; }
.direct dl { margin: 0; display: grid; gap: .8rem; }
.direct dl div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; }
.direct dt { font: 500 .74rem/1.6 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted-light); }
.direct dd { margin: 0; color: var(--bone); overflow-wrap: anywhere; }
.direct a { color: var(--bone); }
.direct a:hover { color: var(--copper-light); }
.form-card { background: var(--bone); color: var(--ink); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.4rem); }
.form-title { font-family: var(--serif); font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.1; margin: 0 0 1.5rem; }
.lead-form { position: relative; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.field { display: flex; flex-direction: column; margin-bottom: 1.1rem; }
.field label { font-size: .92rem; font-weight: 600; margin-bottom: .4rem; }
.opt { font-weight: 400; color: var(--muted); }
.field input, .field textarea { width: 100%; min-height: 3.1rem; padding: .75rem .9rem; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid #C9BCAB; border-radius: var(--radius); }
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--copper); outline-offset: 0; border-color: var(--copper); }
.hint { font-size: .85rem; color: var(--muted); margin-top: .35rem; }
.field-error { color: #9E1F18; font-size: .88rem; }
.field-error:not(:empty) { margin-top: .35rem; }
[aria-invalid="true"] { border-color: var(--signal) !important; }
.consent { display: flex !important; align-items: flex-start; gap: .7rem; font-weight: 400 !important; line-height: 1.5; }
.consent input { flex: none; width: 1.2rem; height: 1.2rem; margin: .18rem 0 0; accent-color: var(--copper); }
.consent a { color: var(--copper); }
.lead-form .btn-block { margin-top: .4rem; background: var(--ink); color: var(--bone); }
.lead-form .btn-block:hover { background: var(--graphite-2); }
.form-status { margin: 1rem 0 0; padding: .85rem 1rem; border-radius: var(--radius); font-size: .95rem; background: var(--sand); }
.form-status--ok { background: #E4EFE3; color: #1F5A2E; }
.form-status--error { background: #F6E1DE; color: #8E1C16; }
.form-status--info { background: var(--sand); color: #3A352F; }

/* C9 Footer */
.site-footer { padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; color: var(--ink); }
.footer-grid { display: grid; grid-template-columns: auto 1.6fr 1fr 1fr; gap: 2rem 3rem; align-items: start; }
.footer-mark { width: clamp(96px, 10vw, 132px); mix-blend-mode: multiply; }
.footer-brand p { margin: 0; color: #3A352F; line-height: 1.7; }
.footer-brand strong { color: var(--ink); font-weight: 600; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; align-content: start; }
.footer-links a { color: #3A352F; text-decoration: none; }
.footer-links a:hover { color: var(--copper); text-decoration: underline; }
.footer-copy { grid-column: 1 / -1; margin: 1.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line-light); font: 500 .74rem/1.4 var(--mono); color: var(--muted); letter-spacing: .04em; }

/* Documents */
.doc-hero { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 4.5rem); }
.doc-title { font-size: clamp(2.8rem, 6vw, 5rem); }
.doc-hero .lead { margin-top: 1.5rem; }
.doc-hero .link-light { color: var(--copper-light); }
.doc-body h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 2.5rem 0 .8rem; }
.doc-body > h2:first-child { margin-top: 0; }
.doc-body .policy-lead-form h2, .doc-body .policy-cookies h2 { margin-top: 2.5rem; }
.doc-body h3 { font-weight: 600; font-size: 1.05rem; margin: 1.6rem 0 .4rem; }
.doc-body p { color: #3A352F; max-width: 70ch; }
.doc-body .policy-lead-form h2, .doc-body .policy-cookies h2 { font-family: var(--serif); font-weight: 400; line-height: 1.05; }
.doc-body a { color: var(--copper); }
.doc-en { margin-top: 3.5rem; padding: 2rem clamp(1.4rem, 3vw, 2.4rem); border-radius: var(--radius); background: var(--sand); }
.nf .display em { display: block; }

/* Responsive */
@media (max-width: 1080px) {
  .shift-grid { grid-template-columns: 1fr; }
  .shift-media { max-width: 640px; }
  .footer-grid { grid-template-columns: auto 1fr 1fr; }
  .footer-brand { grid-column: 2 / -1; }
  .hero::before { background: linear-gradient(90deg, rgba(23,21,19,.95) 0%, rgba(23,21,19,.8) 55%, rgba(23,21,19,.45) 100%), linear-gradient(0deg, rgba(23,21,19,.85) 0%, rgba(23,21,19,0) 40%); }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { margin: 0; max-width: 620px; }
  .hero-svg { width: 100%; }
  .mod-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mod-pair .spine { grid-column: 1 / -1; grid-row: 2; max-width: 520px; width: 100%; justify-self: center; }
  .mod-feature, .mod-ctc { grid-template-columns: 1fr; }
  .mod-network .feature-art { max-width: 560px; }
  .mandate-grid, .expert-grid, .contact-grid { grid-template-columns: 1fr; }
  .expert-card { min-height: 18rem; }
}
@media (max-width: 760px) {
  body { font-size: 1rem; }
  .split-head, .engage-grid, .faq-grid { grid-template-columns: 1fr; }
  .faq-head { position: static; }
  .engage-title { position: static; }
  .chips { justify-content: flex-start; }
  .tile-finance { grid-template-columns: 1fr; }
  .rail { grid-template-columns: 1fr; grid-template-rows: none; }
  .rail-stop { display: grid; grid-template-columns: 60px minmax(0, 1fr); grid-template-rows: auto; grid-row: auto; column-gap: 1rem; padding-bottom: 1.4rem; }
  .rail-stop:not(:last-child)::before { top: 68px; left: 29px; width: 2px; height: auto; bottom: 8px; transform-origin: top; }
  .rail-stop:not(:last-child)::after { display: none; }
  .js .rail:not(.is-in) .rail-stop::before { transform: scaleY(0); }
  .rail-head { display: contents; }
  .rail-dot { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .rail-name { grid-column: 2; grid-row: 1; font-size: 1.45rem; min-height: 60px; display: flex; align-items: center; }
  .rail-areas { grid-column: 2; grid-row: 2; margin: .25rem 0 0; padding: 0; }
  .rail-areas::before { display: none; }
  .exchange { grid-template-columns: 1fr; gap: .5rem; }
  .ex-mid { grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; width: 100%; }
  .ex-lane { height: 44px; }
  .showcase-cols { grid-template-columns: 1fr; gap: 2.25rem; }
  .mod-pair { grid-template-columns: 1fr; }
  .mod-pair .spine { grid-row: auto; }
  .pair-block:last-child { text-align: left; }
  .pair-block:last-child .tags { justify-content: flex-start; }
  .ctc-seq { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; }
  .ctc-seq li:nth-child(2)::before { display: none; }
  .ex-inv pre, .ex-code { font-size: .66rem; }
  .ctc-stamp { display: none; }
  .mod-ctc .feature-art { text-align: center; }
  .engage-list { grid-template-columns: 1fr; }
  .pf-list { grid-template-columns: 1fr; }
  .pf-card { min-height: 0; }
  .field-row { grid-template-columns: 1fr; }
  .direct dl div { grid-template-columns: 1fr; gap: .15rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .hero-photo img { object-position: 42% 100%; }
  .hero::before { background: linear-gradient(180deg, rgba(23,21,19,.95) 0%, rgba(23,21,19,.88) 40%, rgba(23,21,19,.25) 66%, rgba(23,21,19,.7) 100%); }
  .shift-media { padding: 0 1.5rem 2.75rem 0; }
  .shift-frame::before { inset: 1rem -1rem -1rem 1rem; }
  .shift-card { width: 84%; }
  .shift-card li { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) 16px; }
  .shift-compare { grid-template-columns: 1fr; }
  .sc-arrow { justify-self: center; transform: rotate(90deg); }
  .route-svg { width: 56%; top: 3%; right: 0; opacity: .95; }
  .rt-label { font-size: 19px; }
  .rt-label-home { font-size: 20px; }
  .expert-logo { width: 118px; }
  .hero-actions .btn { width: 100%; }
  .nav-cta { padding: .55rem .75rem; }
  .brand img { width: 32px; }
  .hero-svg { width: 112%; margin-left: -6%; }
  .hv-label { font-size: 17px; }
  .nw-label { font-size: 16px; }
  .chips li { font-size: 1.35rem; }
  .chips { gap: .45rem; }
}
@media (max-width: 380px) { .lang-item { min-width: 2.35rem; } .nav { gap: .5rem; } .expert-logo { width: 80px; } .hv-label { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .shift:not(.is-in) .shift-card li svg { opacity: 1; transform: none; }
}

/* Cross-document view transitions: the language switch is a real navigation, so without this the browser
   tears down and repaints the whole page — the sticky bar flashing on the way out. Naming the header keeps it
   pinned and unrepainted across the two documents; the rest of the page cross-fades. Ignored where unsupported. */
@view-transition { navigation: auto; }
/* The whole language switch is ONE transition the browser owns: the old page fades out, the header and the
   indicator travel to their new positions, the new page fades in. Nothing in JavaScript drives a navigation,
   so there is no hand-off frame between a script animation and the browser's own. */
/* Sequenced, not crossed: the old content fades out over the ink canvas, then the new content fades in, so
   two sets of text are never legible on top of each other. The header and the indicator are named groups, so
   they are excluded from this fade and stay solid while they travel. */
::view-transition-old(root) { animation: vt-out .17s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .3s cubic-bezier(0, 0, .2, 1) .06s both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
.site-header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation-duration: .3s; animation-timing-function: cubic-bezier(.33, .01, .2, 1); }
::view-transition-group(lang-thumb) { animation-duration: .3s; animation-timing-function: cubic-bezier(.33, .01, .2, 1); }
::view-transition-old(site-header), ::view-transition-new(site-header) { animation-duration: .24s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}