/* Makosch Africa — site stylesheet
   World: Makosch UK brand (charcoal, light-grey plate, blue-grey fields, Ortica Linear,
   letter-spaced wide caps, the M device) + the approved Africa draft (numbered chapters,
   hairlines, square corners).
   Rule: every homepage section fits one laptop screen (1280×800 and up), so type and spacing
   scale with the viewport height as well as its width. */

@font-face { font-family: "Ortica Linear"; src: url("../assets/fonts/ortica/orticalinear-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Ortica Linear"; src: url("../assets/fonts/ortica/orticalinear-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  --charcoal: #353838;
  --charcoal-2: #2b2d2d;
  --plate: #e4e4e7;
  --ink: #2f3232;
  --ink-2: rgba(47, 50, 50, .76);
  --on-dark: #e4e4e7;
  --on-dark-2: rgba(228, 228, 231, .68);
  --on-dark-copy: rgba(228, 228, 231, .88);
  --blue: #89a6a7;
  --blue-ink: #1d2828;
  --blue-ink-2: rgba(29, 40, 40, .9);
  --hair-light: rgba(47, 50, 50, .22);
  --hair-dark: rgba(228, 228, 231, .18);
  --hair-blue: rgba(29, 40, 40, .3);

  --f-serif: "Ortica Linear", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(16px, 3vw, 48px);
  --maxw: 1600px;
  --hd-h: 76px;
  /* Optional strip above the header (review builds only); --hd-b is the header's bottom edge. */
  --strip: 0px;
  --hd-b: calc(var(--hd-h) + var(--strip));
  --col-gap: clamp(16px, 2vw, 32px);
  /* Section rhythm: shrinks on short screens so a section stays within one screen. */
  --sec-pad: clamp(48px, min(6.4vw, 8.6svh), 112px);
  --h2: 300 clamp(36px, min(3.9vw, 7.2svh), 66px)/1.02 var(--f-serif);
  --body: 300 clamp(17px, min(1.3vw, 2.4svh), 21px)/1.5 var(--f-serif);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: #5c6060 var(--charcoal-2); }
body {
  margin: 0;
  background: var(--charcoal);
  color: var(--on-dark);
  font: 400 16px/1.6 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3 { margin: 0; }
::selection { background: var(--blue); color: var(--blue-ink); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--charcoal-2); }
::-webkit-scrollbar-thumb { background: #5c6060; border: 3px solid var(--charcoal-2); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: 12px; z-index: 100; padding: 12px 16px; background: var(--plate); color: var(--ink); font: 600 13px/1 var(--f-sans); transform: translateY(-160%); transition: transform .2s var(--ease); }
.skip:focus { transform: none; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Links and calls to action ---------- */

/* Navigation keeps the letter-spaced caps; every call to action is set in the serif, as on makosch.co.uk. */
.hd__nav a, .ft__head, .hd__menu {
  font-family: var(--f-sans);
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.arrow { width: 17px; height: 10px; flex: none; overflow: visible; transition: transform .35s var(--ease-out); }
.arrow path, .arrow-ext path { fill: none; stroke: currentColor; stroke-width: 1.4; }
.arrow-ext { width: 10px; height: 10px; flex: none; overflow: visible; transition: transform .35s var(--ease-out); }

/* Call to action (option C2, chosen by the owner on 24.09.2026): no box. The label in the serif at
   reading size, the arrow in a filled square, a line underneath that retracts on hover.
   --c is the label, line and square colour; --a the arrow inside the square. */
.btn {
  --c: var(--ink); --a: var(--plate);
  display: inline-flex; align-items: center; gap: 18px;
  margin: 0; padding: 0 0 12px; border: 0; border-radius: 0; cursor: pointer;
  font: 300 clamp(20px, 1.55vw, 24px)/1.2 var(--f-serif); letter-spacing: -.01em;
  color: var(--c); text-decoration: none; white-space: nowrap;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .5s var(--ease-out), color .25s var(--ease);
}
.btn:hover { background-size: 0 1px; background-position: 100% 100%; }
.btn > .arrow { box-sizing: content-box; padding: 17px 14px; background: var(--c); color: var(--a); transition: transform .4s var(--ease-out); }
.btn > .arrow-ext { width: 10px; height: 10px; padding: 17px 17.5px; }
.btn:hover > .arrow { transform: translateX(6px); }
.btn:active > .arrow { transform: translateX(3px); }
.btn--lg { gap: 20px; font-size: clamp(22px, 1.9vw, 28px); }
.btn--lg > .arrow { padding: 19px 16px; }
.btn--solid { --c: var(--ink); --a: var(--plate); }
.btn--plate { --c: var(--plate); --a: var(--charcoal); }
.btn--block { display: flex; width: 100%; justify-content: space-between; }
/* While a call to action is on screen, its arrow repeats a small "go" inside its square. */
.is-live > .arrow path, .is-live .deeper__arrow .arrow path { animation: nudge 4.4s var(--ease-out) .5s infinite; }
.btn:hover > .arrow path, .deeper:hover .deeper__arrow path { animation: none; }

@keyframes nudge {
  0%, 30%, 100% { transform: none; opacity: 1; }
  10% { transform: translateX(16px); opacity: 0; }
  11% { transform: translateX(-14px); opacity: 0; }
}

.textlink {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 4px 0 8px;
  font: 300 clamp(18px, 1.3vw, 20px)/1.2 var(--f-serif); letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .45s var(--ease-out);
}
.textlink:hover { background-size: 0 1px; background-position: 100% 100%; }
.textlink:hover .arrow { transform: translateX(5px); }

/* ---------- Header ---------- */

.hd {
  position: fixed; top: var(--strip); left: 0; right: 0; z-index: 60;
  height: calc(var(--hd-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  color: var(--ink);
  transition: color .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.hd[data-tone="dark"] { color: var(--on-dark); }
.hd.is-solid { background: rgba(228, 228, 231, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--hair-light); }
.hd.is-solid[data-tone="dark"] { background: rgba(43, 45, 45, .86); box-shadow: 0 1px 0 var(--hair-dark); }
.hd__in { height: var(--hd-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.hd__logo { justify-self: start; display: block; padding: 6px 0; }
.lockup {
  display: block; width: 118px; aspect-ratio: 1000 / 474;
  background: currentColor;
  -webkit-mask: url("../assets/brand/lockup-mask.png") center / contain no-repeat;
  mask: url("../assets/brand/lockup-mask.png") center / contain no-repeat;
}
.hd__nav { display: flex; align-items: center; gap: clamp(20px, 2.2vw, 36px); }
.hd__nav a { font-size: 12px; text-decoration: none; padding: 10px 0; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 4px) / 0 1px no-repeat; transition: background-size .4s var(--ease-out); }
.hd__nav a:hover { background-size: 100% 1px; }
.hd__end { justify-self: end; display: flex; align-items: center; gap: 12px; }
.hd__cta { gap: 12px; padding-bottom: 6px; font-size: 17px; }
.hd__cta > .arrow { padding: 11px 9px; }
.hd[data-tone="dark"] .hd__cta { --c: var(--plate); --a: var(--charcoal); }
.hd__menu { display: none; align-items: center; gap: 12px; height: 44px; padding: 0 2px 0 12px; background: none; border: 0; color: inherit; cursor: pointer; font-size: 12px; line-height: 1; }
.hd__menu-icon { position: relative; width: 22px; height: 10px; }
.hd__menu-icon i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .35s var(--ease-out), top .35s var(--ease-out); }
.hd__menu-icon i:first-child { top: 0; }
.hd__menu-icon i:last-child { top: 8.5px; }
.hd__menu[aria-expanded="true"] .hd__menu-icon i:first-child { top: 4.25px; transform: rotate(45deg); }
.hd__menu[aria-expanded="true"] .hd__menu-icon i:last-child { top: 4.25px; transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 55;
  padding-top: calc(var(--hd-b) + env(safe-area-inset-top, 0px) + 24px);
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--charcoal); color: var(--on-dark);
}
.menu[hidden] { display: none; }
.menu__nav { display: flex; flex-direction: column; }
.menu__nav a { padding: 16px 0; border-bottom: 1px solid var(--hair-dark); font: 300 clamp(30px, 8.4vw, 44px)/1.05 var(--f-serif); text-decoration: none; }
.menu__foot { display: grid; gap: 22px; }
.menu__contact { display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--on-dark-2); }
.menu__contact a { text-decoration: none; }

/* ---------- Hero: the M window ---------- */

.hero { position: relative; height: 300svh; background: var(--plate); color: var(--ink); }
.hero__stage { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; }
.hero__photo { position: absolute; inset: 0; background: #1b1d1d; transform: scale(1.14); transform-origin: 50% 58%; will-change: transform; }
.hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; }
.hero__photo .hero__photo-soft { opacity: 0; }
.hero__shade {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 22, 22, .74) 0%, rgba(20, 22, 22, .62) 48%, rgba(20, 22, 22, .34) 72%, rgba(20, 22, 22, .6) 100%);
}
.hero__plate { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 22px 38px rgba(18, 20, 20, .26)); }
.hero__plate-fill { fill: var(--plate); }
/* Headline top left, sub and CTAs to its right, the M window below across the full width. */
.hero__layout {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: clamp(20px, 5svh, 64px);
  padding: calc(var(--hd-b) + clamp(16px, 4svh, 48px)) var(--gutter) clamp(18px, 3.6svh, 40px);
  transform-origin: 0 0; will-change: transform, opacity;
  pointer-events: none;
}
.hero__head, .hero__mwrap { width: 100%; max-width: calc(var(--maxw) - 2 * var(--gutter)); margin-inline: auto; }
/* Reading order: headline, then the sub and both CTAs on one hairline row, then the window. */
.hero__head { display: grid; gap: clamp(18px, 3.4svh, 36px); }
.hero__title {
  pointer-events: auto;
  font: 300 clamp(44px, min(5.6vw, 9.6svh), 104px)/.98 var(--f-serif);
  letter-spacing: -.024em; color: var(--ink);
}
.hero__title span { display: block; }
.hero__title-b { color: var(--ink-2); }
.hero__aside { display: flex; align-items: center; justify-content: space-between; gap: 18px 40px; padding-top: clamp(14px, 2.2svh, 22px); border-top: 1px solid var(--hair-light); pointer-events: auto; }
.hero__sub { max-width: 40ch; font: 300 clamp(17px, 1.35vw, 22px)/1.38 var(--f-serif); color: var(--ink); text-wrap: pretty; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
/* The M is as wide as the page allows and as tall as the space left under the headline. */
.hero__mwrap { position: relative; flex: 1 1 0; min-height: 0; container-type: size; }
.hero__m { position: absolute; left: 0; right: 0; bottom: 0; margin-inline: auto; width: min(100cqw, 100cqh * 2.9864); aspect-ratio: 854.44 / 286.11; }

.hero__statement {
  position: absolute; inset: 0; display: flex; align-items: stretch;
  padding: calc(var(--hd-b) + clamp(28px, 8svh, 104px)) var(--gutter) clamp(28px, 7svh, 88px);
  opacity: 0; visibility: hidden; color: var(--plate); pointer-events: none;
}
.statement { display: flex; flex-direction: column; width: min(100%, 1240px); margin-inline: auto; }
.statement__lead { margin-bottom: clamp(12px, 2.2svh, 28px); font: 300 clamp(22px, 2vw, 32px)/1.2 var(--f-serif); color: var(--on-dark-2); }
.statement__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgba(228, 228, 231, .24); }
.statement__line { display: grid; grid-template-columns: clamp(48px, 6vw, 96px) minmax(0, 1fr); align-items: baseline; padding: clamp(14px, 2.6svh, 30px) 0; border-top: 1px solid rgba(228, 228, 231, .24); }
.statement__no { font: 300 clamp(16px, 1.3vw, 21px)/1 var(--f-serif); color: var(--on-dark-2); }
.statement__text { font: 300 clamp(28px, min(3.6vw, 6.4svh), 60px)/1.08 var(--f-serif); letter-spacing: -.018em; text-wrap: balance; }
.statement__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: auto; padding-top: clamp(36px, 7svh, 80px); padding-left: clamp(48px, 6vw, 96px); pointer-events: auto; }
.statement__note { font: 300 17px/1.4 var(--f-serif); color: var(--on-dark-2); }
.hero__statement.is-static { position: relative; inset: auto; opacity: 1; visibility: visible; background: var(--charcoal); padding-block: clamp(80px, 10vw, 140px); }

/* ---------- Reach: the network figures on the map ---------- */

.reach { background: var(--blue); color: var(--blue-ink); padding-block: calc(var(--sec-pad) * .9); overflow: hidden; }
.reach__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
.reach__side { grid-column: 1 / span 6; display: grid; gap: clamp(26px, 5svh, 56px); }
.reach__title { max-width: 20ch; font: 300 clamp(32px, min(3.3vw, 6svh), 56px)/1.02 var(--f-serif); letter-spacing: -.016em; text-wrap: balance; }
.figs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(18px, 2.2vw, 36px); row-gap: clamp(24px, 4.6svh, 48px); }
.fig { position: relative; display: grid; align-content: start; gap: 10px; padding-top: clamp(16px, 2.4svh, 24px); }
.fig:first-child { grid-column: 1 / -1; }
/* UK "Data Points": a hairline with a small square; both draw when the figures come into view. */
.fig::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 1px; background: var(--hair-blue); transform-origin: 0 50%; transition: transform 1.1s var(--ease-out) var(--d, 0s); }
.fig::after { content: ""; position: absolute; left: 0; top: 0; width: 7px; height: 7px; background: currentColor; transition: transform .5s var(--ease-out) var(--d, 0s); }
.fig__num { font: 300 clamp(34px, min(3.2vw, 5.8svh), 56px)/.95 var(--f-serif); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.fig:first-child .fig__num { font-size: clamp(58px, min(6vw, 10.6svh), 108px); }
.fig__label { font: 300 clamp(15px, 1.1vw, 18px)/1.3 var(--f-serif); color: var(--blue-ink-2); }
.figs.is-pending .fig::before { transform: scaleX(0); }
.figs.is-pending .fig::after { transform: scale(0); }
.reach__note { max-width: 46ch; font: 300 15px/1.45 var(--f-serif); color: var(--blue-ink-2); }
.reach__right { grid-column: 7 / -1; display: grid; gap: clamp(16px, 3svh, 28px); }
.reach__map { margin: 0 calc(var(--gutter) * -1) 0 0; }
.reach--chapter { padding-block: var(--sec-pad); }
.reach--chapter .reach__grid { align-items: start; }
.reach--chapter .reach__side { grid-column: 2 / span 5; }
.reach .chapter__index { color: var(--blue-ink-2); border-top-color: var(--hair-blue); }
.reach .chapter__no { color: var(--blue-ink); }
/* The map never pushes the section past one screen: its height is capped, its width follows. */
.reach__map .map__svg { width: auto; max-width: 100%; max-height: calc(100svh - var(--hd-b) - var(--sec-pad) * 1.8 - 150px); margin-left: auto; }

/* The map: world in quiet dots, Africa lifted, routes that draw once and then carry pulses. */
.map { position: relative; }
.map__svg { width: 100%; height: auto; max-width: none; overflow: hidden; }
.map__land { fill: none; stroke: rgba(29, 40, 40, .26); stroke-width: 4.4; stroke-linecap: round; }
.map__land--af { stroke: rgba(244, 245, 245, .92); stroke-width: 5; }
.map__arc { fill: none; stroke: rgba(29, 40, 40, .58); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease-out) calc(var(--i) * .07s + .15s); }
.map.is-in .map__arc { stroke-dashoffset: 0; }
.map__pulse { fill: #fff; }
.map__pulses { opacity: 0; transition: opacity 1s var(--ease) 1.4s; }
.map.is-in .map__pulses { opacity: 1; }
.map__pt, .map__hub, .map__chip { opacity: 0; transition: opacity .6s var(--ease) calc(var(--i, 0) * .08s + .9s); }
.map.is-in .map__pt, .map.is-in .map__hub, .map.is-in .map__chip { opacity: 1; }
.map__pt rect { fill: var(--blue-ink); }
/* African currencies: outlined square with a dot. Trading currencies: solid squares. Off-map: chips. */
.map__hub-box { fill: var(--blue); stroke: var(--blue-ink); stroke-width: 1.8; }
.map__hub-dot { fill: var(--blue-ink); }
.map__ring { fill: none; stroke: var(--blue-ink); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.map__chip rect { fill: var(--blue-ink); }
.map .map__chip text { fill: var(--blue); font-size: 19px; letter-spacing: .02em; }
.map.is-live .map__ring { animation: ring 3.6s var(--ease-out) infinite; animation-delay: calc(var(--i) * .6s); }
.map text { font: 400 21px var(--f-serif); fill: var(--blue-ink); }
.map__hub text { font-size: 19px; }
.map__caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 10px; font: 300 15px/1.4 var(--f-serif); color: var(--blue-ink-2); }
.map__key { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--blue-ink); }
.map__key-item { display: inline-flex; align-items: center; gap: 8px; }
.map__key-item i { flex: none; }
.map__key-hub { width: 11px; height: 11px; border: 1.3px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 4px 4px no-repeat; }
.map__key-mkt { width: 8px; height: 8px; background: currentColor; }
.map__key-route { width: 22px; height: 1px; background: currentColor; }
@keyframes ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.6); } }

/* ---------- Chapters ---------- */

.chapter { padding-block: var(--sec-pad); }
.chapter--dark { background: var(--charcoal); color: var(--on-dark); }
.chapter__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.chapter__index { grid-column: 1; grid-row: 1; align-self: start; width: 48px; display: flex; flex-direction: column; gap: 10px; margin-top: .55em; padding-top: 14px; border-top: 1px solid var(--hair-dark); color: var(--on-dark-2); }
.chapter__no { font: 300 34px/1 var(--f-serif); color: var(--on-dark); }
.chapter__name { font: 300 18px/1.3 var(--f-serif); }
.chapter__title { grid-column: 2 / span 10; font: 300 clamp(42px, min(5vw, 8.6svh), 88px)/.98 var(--f-serif); letter-spacing: -.018em; text-wrap: balance; }
.chapter__body { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: clamp(48px, 7vw, 104px); padding-top: 30px; border-top: 1px solid var(--hair-dark); }
.copy { grid-column: 4 / span 6; display: grid; gap: .9em; font: 300 clamp(20px, 1.8vw, 27px)/1.36 var(--f-serif); color: var(--on-dark-copy); }
.copy__head { margin-bottom: .1em; font: 400 clamp(21px, 1.8vw, 28px)/1.2 var(--f-serif); letter-spacing: -.01em; color: var(--on-dark); }

.chapter--plate { background: var(--plate); color: var(--ink); }
.chapter--blue { background: var(--blue); color: var(--blue-ink); }
.chapter--plate .chapter__index { color: var(--ink-2); border-top-color: var(--hair-light); }
.chapter--blue .chapter__index { color: var(--blue-ink-2); border-top-color: var(--hair-blue); }
.chapter--plate .chapter__no, .chapter--blue .chapter__no { color: inherit; }
.chapter--plate .chapter__body { border-top-color: var(--hair-light); }
.copy--ink { color: var(--ink-2); }
.copy--ink .copy__head { color: var(--ink); }
.muted { color: var(--ink-2); }
.chapter--dark .muted { color: var(--on-dark-2); }
[id] { scroll-margin-top: var(--hd-b); }

/* ---------- Deeper links: the paths into the site ---------- */

.chapter__links { grid-column: 2 / -1; margin-top: clamp(40px, 6svh, 80px); }
/* Split (subpages, owner's choice 24.09.2026): the headline beside the text at reading size, so a
   long section stays within one screen. Columns 2-6 hold the headline (and an optional fact at the
   foot), columns 7-12 the text and its link. */
.split .chapter__grid { align-items: start; }
.split .split__head { grid-column: 2 / span 5; grid-row: 1; align-self: start; }
.split .chapter__title.split__head { font: var(--h2); letter-spacing: -.016em; }
.split__fact { grid-column: 2 / span 5; grid-row: 2; align-self: end; display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--hair-dark); max-width: 320px; }
.split__fact-num { font: 300 clamp(58px, min(6vw, 10.6svh), 108px)/.9 var(--f-serif); letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.split__fact-label { font: 400 17px/1.3 var(--f-serif); color: var(--on-dark-2); }
.split .split__body { grid-column: 7 / -1; grid-row: 1 / span 2; margin-top: 0; padding-top: .3em; }
.split__body:has(> .split__copy, > .hsteps) { display: grid; gap: clamp(24px, 4svh, 60px); }
.split__copy { display: grid; gap: .8em; max-width: 60ch; font: var(--body); color: var(--on-dark-copy); }
.chapter--plate .split__copy { color: var(--ink-2); }
.chapter--blue .split__copy { color: var(--blue-ink-2); }
.split .indep__copy { align-self: start; gap: .9em; }
.chapter__links--pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
/* Link panels: no box either. The title in the serif, one line of description, the arrow in a
   filled square; the line underneath retracts on hover while the square steps forward. */
.deeper {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title arrow" "desc arrow";
  align-items: center; column-gap: 28px; row-gap: 6px; max-width: 760px;
  padding: 0 0 clamp(14px, 2.2svh, 20px); color: inherit; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .5s var(--ease-out);
}
.deeper:hover { background-size: 0 1px; background-position: 100% 100%; }
.deeper__title { grid-area: title; font: 300 clamp(26px, min(2.2vw, 4svh), 34px)/1.1 var(--f-serif); letter-spacing: -.014em; }
.deeper__desc { grid-area: desc; max-width: 52ch; font: 300 clamp(15px, 1.15vw, 18px)/1.4 var(--f-serif); opacity: .78; }
.deeper__arrow {
  grid-area: arrow; display: grid; place-items: center;
  width: clamp(46px, 3.6vw, 54px); aspect-ratio: 1;
  background: var(--tile, var(--ink)); color: var(--tile-arrow, var(--plate));
  transition: transform .4s var(--ease-out);
}
.deeper:hover .deeper__arrow { transform: translateX(6px); }
.deeper--dark { --tile: var(--plate); --tile-arrow: var(--charcoal); }
.deeper--blue { --tile: var(--blue-ink); --tile-arrow: var(--blue); }

/* ---------- 01: The problem + Anatomy of a transfer (a rate line, scrubbed by the scroll) ---------- */

.problem__title { grid-column: 2 / span 7; }
.problem__copy { grid-column: 9 / -1; grid-row: 1; align-self: end; display: grid; gap: .8em; padding-top: 18px; border-top: 1px solid var(--hair-dark); font: var(--body); color: var(--on-dark-copy); }
.problem__copy .copy__head { font-size: clamp(20px, 1.6vw, 25px); }

.anatomy { position: relative; height: 380vh; margin-top: clamp(40px, 7svh, 88px); }
/* One pinned stage. Headline and a phrase per step on top, the rate line across the full width, the
   five steps underneath with a line that follows the scroll. No figures (Ben, 25.09.2026): the lines
   only show how the parts relate. site.js writes the scroll phases: --pm the real rate draws, --pn/--pg
   the price is agreed, --pc/--ct the rate moves until it is converted, --py/--pb/--cs the rate you get
   and the spread, --cf1..3 the charges, --pr what arrives, --p the step line. */
.xf {
  --p: 0; --pm: 0; --pn: 0; --pg: 0; --pc: 0; --ct: 0; --py: 0; --pb: 0; --cs: 0; --cf1: 0; --cf2: 0; --cf3: 0; --pr: 0;
  position: sticky; top: var(--hd-b); height: calc(100svh - var(--hd-b)); min-height: 540px;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap);
  align-content: center; row-gap: clamp(14px, 2.8svh, 30px);
}
.xf__head { grid-column: 1 / span 5; grid-row: 1; align-self: end; }
.xf__title { font: 300 clamp(30px, min(3vw, 5.6svh), 50px)/1.02 var(--f-serif); letter-spacing: -.015em; }
.xf__intro { margin-top: 10px; max-width: 42ch; font: 300 clamp(15px, min(1.15vw, 2.1svh), 18px)/1.45 var(--f-serif); color: var(--on-dark-2); }
.xf__figure { grid-column: 7 / -1; grid-row: 1; align-self: end; text-align: right; }
.xf__cap { font: 300 clamp(15px, 1.25vw, 19px)/1.3 var(--f-serif); color: var(--on-dark-2); }
.xf__big { margin-top: 2px; font: 300 clamp(38px, min(4.2vw, 7.6svh), 72px)/1 var(--f-serif); letter-spacing: -.022em; white-space: nowrap; }
.xf__viz { grid-column: 1 / -1; grid-row: 2; position: relative; }

/* The rate line. Positions are in % of the chart: x = units / 10, y = units / 1.3 (the SVG is 1000 × 130). */
.rl { height: clamp(170px, 28svh, 250px); margin-top: 4px; }
.rl__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rl__mkt { fill: none; stroke: var(--on-dark); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.rl__mkt--after { stroke: rgba(228, 228, 231, .38); stroke-dasharray: 3 5; }
.rl__you { fill: none; stroke: var(--blue); stroke-width: 1.5px; vector-effect: non-scaling-stroke; opacity: var(--py); }
.rl__band { fill: var(--blue); fill-opacity: .2; stroke: none; opacity: var(--pb); }
.rl__name { position: absolute; left: 0; font: 300 13px/1 var(--f-serif); white-space: nowrap; }
.rl__name--mkt { top: calc(27.7% - 20px); color: var(--on-dark); opacity: var(--pm); }
.rl__name--you { top: calc(56.92% + 10px); color: var(--blue); opacity: var(--py); }
/* What the agreed price was worth: a dashed level from the moment it was agreed. */
.rl__guide { position: absolute; left: 30%; right: 0; top: 18.46%; border-top: 1px dashed rgba(228, 228, 231, .55); transform-origin: 0 0; transform: scaleX(var(--pg)); }
.rl__glab { position: absolute; right: 0; top: calc(18.46% - 21px); font: 300 13px/1 var(--f-serif); color: var(--on-dark-2); white-space: nowrap; opacity: var(--pg); }
.rl__mark { position: absolute; z-index: 2; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--charcoal); border: 1.5px solid var(--on-dark); opacity: var(--o); }
.rl__mark--agreed { --o: var(--pn); left: 30%; top: 18.46%; }
.rl__mark--conv { --o: var(--pc); left: 70%; top: 43.08%; }
.rl__mark b { position: absolute; font: 400 13px/1 var(--f-serif); color: var(--on-dark); white-space: nowrap; }
.rl__mark--agreed b { left: 50%; bottom: 14px; transform: translateX(-50%); }
.rl__mark--conv b { right: 14px; bottom: 12px; }
/* The payment's value at the moment of conversion, as a column that steps down part by part. */
.rl__col { position: absolute; left: calc(70% - 8px); width: 16px; transform-origin: 50% 0; }
.rl__col--t { top: 18.46%; height: 24.62%; background: repeating-linear-gradient(-45deg, var(--blue) 0 1.5px, var(--charcoal) 1.5px 7px); box-shadow: inset 0 0 0 1px rgba(137, 166, 167, .55); transform: scaleY(var(--ct)); }
.rl__col--s { top: 43.08%; height: 23.07%; background: var(--blue); transform: scaleY(var(--cs)); }
.rl__col--f { top: 66.15%; height: 13.85%; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 2px; padding-top: 2px; }
.rl__col--f i { background: #9aa0a0; transform-origin: 50% 0; }
.rl__col--f i:nth-child(1) { transform: scaleY(var(--cf1)); }
.rl__col--f i:nth-child(2) { transform: scaleY(var(--cf2)); }
.rl__col--f i:nth-child(3) { transform: scaleY(var(--cf3)); }
.rl__lab { position: absolute; left: calc(70% + 18px); transform: translateY(-50%); font: 300 clamp(14px, 1.1vw, 17px)/1.2 var(--f-serif); color: var(--on-dark-2); white-space: nowrap; }
.rl__lab--t { top: 30.77%; opacity: var(--ct); }
.rl__lab--s { top: 54.62%; opacity: var(--cs); }
.rl__lab--f { top: 73.08%; opacity: var(--cf1); }
/* What arrives: the level it ends on, beneath what it was worth. */
.rl__arr { position: absolute; left: 70%; right: 0; top: 80%; height: 2px; margin-top: -1px; background: var(--plate); transform-origin: 0 0; transform: scaleX(var(--pr)); }
.rl__alab { position: absolute; right: 0; top: calc(80% + 10px); font: 400 13px/1 var(--f-serif); color: var(--on-dark); white-space: nowrap; opacity: var(--pr); }

/* The steps: a row of five with a line that follows the scroll; the current step's text below. */
.xf__steps { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--col-gap); list-style: none; margin: 0; padding: 0; }
.xf__steps .anatomy__step { display: contents; }
.xf__steps .anatomy__label { grid-row: 1; display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; color: rgba(228, 228, 231, .42); font: 400 clamp(15px, 1.15vw, 18px)/1.25 var(--f-serif); transition: color .35s var(--ease); }
.xf__no { font: 300 13px/1 var(--f-serif); }
.xf__steps .anatomy__step.is-on .anatomy__label { color: var(--on-dark-2); }
.xf__steps .anatomy__step.is-current .anatomy__label { color: var(--on-dark); }
.xf__steps p { grid-row: 3; grid-column: 1 / -1; max-width: 62ch; margin-top: 14px; opacity: 0; transform: translateY(8px); pointer-events: none; font: 300 clamp(17px, min(1.35vw, 2.4svh), 21px)/1.45 var(--f-serif); color: var(--on-dark-copy); transition: opacity .45s var(--ease), transform .55s var(--ease-out); }
.xf__steps .anatomy__step.is-current p { opacity: 1; transform: none; pointer-events: auto; }
.xf__progress { grid-column: 1 / -1; grid-row: 3; align-self: start; position: relative; height: 1px; margin-top: calc(clamp(15px, 1.15vw, 18px) * 1.25 + 12px); background: var(--hair-dark); }
.xf__progress i { position: absolute; inset: 0; background: var(--plate); transform: scaleX(var(--p)); transform-origin: 0 50%; }
.xf__end { grid-column: 1 / -1; grid-row: 4; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; }
.xf__note { max-width: 70ch; font: 300 14px/1.45 var(--f-serif); color: var(--on-dark-2); }
.xf__cta { opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), visibility 0s linear .5s; }
.xf.is-end .xf__cta { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), visibility 0s; }

/* ---------- 02: FX analysis — headline and points left, the sentence as three rows right ---------- */

.analysis .chapter__grid { align-items: start; }
.fxa { grid-column: 2 / -1; grid-row: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); column-gap: clamp(48px, 8.5vw, 160px); row-gap: 32px; align-items: start; }
.fxa__title { font: var(--h2); letter-spacing: -.016em; text-wrap: balance; }
.fxa__points { list-style: none; margin: clamp(22px, 4svh, 40px) 0 0; padding: 0; display: grid; gap: 12px; font: 300 clamp(17px, 1.3vw, 20px)/1.3 var(--f-serif); color: var(--ink-2); }
.fxa__points li { display: flex; align-items: center; gap: 14px; }
.fxa__points li::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--ink); }
.fxa__tool { position: relative; }
/* Inside the flow (details, result) the tool takes the full width and the points step aside. */
.fxa.is-flow { grid-template-columns: minmax(0, 1fr); }
.fxa.is-flow .fxa__points { display: none; }

/* A row: the connecting word, then the blank on its own line; the row's hairline is the field line. */
.fxrow { padding: clamp(10px, 1.8svh, 16px) 0 clamp(8px, 1.4svh, 12px); border-bottom: 1px solid rgba(47, 50, 50, .28); transition: border-color .25s var(--ease); }
.fxrow:first-of-type { padding-top: 0; }
.fxrow:focus-within { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.fxrow__w { display: block; font: 300 15px/1.3 var(--f-serif); color: var(--ink-2); }
.fxrow__in { display: flex; align-items: baseline; gap: 14px; margin-top: 4px; font: 300 clamp(30px, min(2.9vw, 5.2svh), 44px)/1.2 var(--f-serif); letter-spacing: -.012em; }
.fxrow__amt, .fxrow__date {
  flex: 1; min-width: 0; margin: 0; padding: 0;
  font: inherit; letter-spacing: inherit; color: var(--ink); background: transparent;
  border: 0; border-radius: 0; font-variant-numeric: lining-nums tabular-nums;
}
.fxrow__amt::placeholder { color: rgba(47, 50, 50, .26); }
.fxrow__amt:focus, .fxrow__date:focus { outline: none; }
.fxrow__amt[aria-invalid="true"], .fxrow__date[aria-invalid="true"] { color: #a33a2b; }
.fxrow__date { font-size: .82em; color-scheme: light; }
.fxrow__date::-webkit-calendar-picker-indicator { opacity: .45; cursor: pointer; }
.ccy {
  flex: none; display: inline-flex; align-items: center; gap: .26em; margin: 0; padding: .06em .32em .08em;
  font: inherit; font-size: .8em; letter-spacing: .01em; color: var(--ink); cursor: pointer;
  background: rgba(137, 166, 167, .26); border: 0; border-radius: 0;
  transition: background-color .25s var(--ease);
}
.ccy:hover, .ccy[aria-expanded="true"] { background: rgba(137, 166, 167, .5); }
.ccy__caret { width: .38em; height: .24em; overflow: visible; transition: transform .3s var(--ease-out); }
.ccy__caret path { fill: none; stroke: currentColor; stroke-width: 1.4; }
.ccy[aria-expanded="true"] .ccy__caret { transform: rotate(180deg); }

/* Your rate: space kept, shown only once both amounts are in. */
.fxa__rate { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 1.6em; margin: clamp(14px, 2.4svh, 22px) 0 clamp(12px, 2svh, 18px); font: 300 15px/1.3 var(--f-serif); color: var(--ink-2); visibility: hidden; }
.fxa__rate b { font: 400 clamp(20px, 1.7vw, 26px)/1.1 var(--f-serif); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.fxa__tool.has-rate .fxa__rate { visibility: visible; animation: rise .45s var(--ease-out); }

/* Step changes slide in. */
.fxa__step, .fxr { animation: stepin .6s var(--ease-out); }
.fxa__step { min-width: 0; margin: 0; padding: 0; border: 0; }
@keyframes stepin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Details: the form on the left, the visitor's result already on the right, blurred until sent. */
.fxa__tool[data-stage="2"]:not(.is-manual) { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: clamp(28px, 4vw, 72px); align-items: start; }
.fxa__legend { padding: 0; font: 300 clamp(24px, 2.2vw, 34px)/1.2 var(--f-serif); letter-spacing: -.01em; }
.fxa .field label { color: var(--ink-2); }
.fxa .field__opt { color: rgba(47, 50, 50, .5); }
.fxa .field input {
  width: 100%; min-width: 0; padding: 10px 0 11px; background: transparent;
  border: 0; border-bottom: 1px solid rgba(47, 50, 50, .34); border-radius: 0;
  color: var(--ink); font: 300 clamp(19px, 1.5vw, 22px)/1.2 var(--f-serif);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.fxa .field input:focus { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.fxa .field input[aria-invalid="true"] { border-bottom-color: #a33a2b; }
.fxa .consent { color: var(--ink-2); }
.fxa .consent input { accent-color: var(--ink); }
.fxa .consent a { color: var(--ink); }
.fxa .calc__error { color: #a33a2b; }
.fxa .calc__manual { border-left-color: var(--ink); background: rgba(137, 166, 167, .18); color: var(--ink); }
.fxa .calc__back { color: var(--ink-2); }
.fxa .calc__back:hover { color: var(--ink); }
.fxa [disabled] { opacity: .55; cursor: progress; }

/* Shared form pieces. */
.field { display: grid; gap: 8px; padding-top: clamp(14px, 2.4svh, 22px); min-width: 0; }
.field label { font: 300 16px/1.3 var(--f-serif); }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; font: 300 15px/1.45 var(--f-serif); cursor: pointer; }
.consent input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.calc__error { margin-top: 16px; font: 300 15px/1.45 var(--f-serif); }
.calc__manual { margin-top: 18px; padding: 12px 14px; border-left: 1px solid; font: 300 15px/1.45 var(--f-serif); }
.calc__fallback { margin-top: 10px; font: 300 15px/1.45 var(--f-serif); }
.calc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: clamp(20px, 3.4svh, 30px); }
.calc__back { padding: 8px 0; background: none; border: 0; cursor: pointer; font: 300 16px/1 var(--f-serif); text-decoration: underline; text-underline-offset: 5px; }
.calc__figures { margin: 16px 0 0; }
.calc__figures div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: clamp(8px, 1.4svh, 12px) 0; border-bottom: 1px solid; }
.calc__figures dt { font: 300 16px/1.3 var(--f-serif); }
.calc__figures dd { margin: 0; font: 400 clamp(18px, 1.4vw, 21px)/1.2 var(--f-serif); font-variant-numeric: lining-nums tabular-nums; text-align: right; }
.calc__note { margin-top: 14px; font: 300 14px/1.5 var(--f-serif); }
.calc__preview { margin-top: 10px; font: 300 14px/1.45 var(--f-serif); }

/* The result. */
.fxr { position: relative; container-type: inline-size; }
.fxr__in { display: grid; gap: 18px 56px; }
@container (min-width: 700px) {
  .fxr__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "main side" "foot foot"; align-items: end; }
  .fxr__main { grid-area: main; }
  .fxr__side { grid-area: side; }
  .fxr__foot { grid-area: foot; }
}
.fxr__lead { font: 300 clamp(18px, 1.5vw, 22px)/1.3 var(--f-serif); color: var(--ink-2); }
.fxr__big { font: 300 clamp(84px, 9vw, 150px)/.9 var(--f-serif); letter-spacing: -.045em; font-variant-numeric: lining-nums tabular-nums; }
.fxr__sub { max-width: 32ch; margin-top: 12px; font: 300 clamp(19px, 1.6vw, 24px)/1.35 var(--f-serif); color: var(--ink); text-wrap: pretty; }
.fxa__tool.is-manual .fxr__big, .fxa__tool.is-manual .fxr__side { display: none; }
.fxa__tool.is-manual[data-stage="2"] .fxr { display: none; }
.fxr .calc__figures { margin-top: 8px; }
.fxr .calc__figures div { border-bottom-color: var(--hair-light); }
.fxr .calc__figures dt { color: var(--ink-2); }
.fxr .calc__figures dd { color: var(--ink); }
.fxr .calc__fallback, .fxr .calc__note { color: var(--ink-2); }
.fxr .calc__preview { color: #8a5a1f; }
.fxr__foot .calc__actions { margin-top: 18px; }
.fxr__year dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.fxr__vol { display: inline-flex; align-items: baseline; gap: 6px; color: var(--ink); }
.fxr__vol input { width: 6em; min-width: 3em; padding: 0 2px 2px; background: transparent; border: 0; border-bottom: 1px solid rgba(47, 50, 50, .4); border-radius: 0; color: var(--ink); font: 400 16px/1.2 var(--f-serif); font-variant-numeric: lining-nums tabular-nums; }
.fxr__vol input:focus { outline: none; border-bottom-color: var(--ink); background: rgba(137, 166, 167, .18); }
.rateline { position: relative; height: 78px; margin: 4px 0 6px; }
.rateline__track { position: absolute; left: 0; right: 0; top: 34px; height: 1px; background: var(--hair-light); }
.rateline__gap { position: absolute; top: 30px; height: 9px; background: var(--blue); transform-origin: 0 50%; }
.rateline__pt { position: absolute; top: 0; display: grid; justify-items: center; transform: translateX(-50%); font: 300 13px/1.2 var(--f-serif); color: var(--ink-2); white-space: nowrap; }
.rateline__pt b { font-weight: 300; }
.rateline__pt i { width: 1px; height: 26px; margin-top: 4px; background: var(--ink); }
.rateline__pt em { margin-top: 6px; font: 400 16px/1 var(--f-serif); font-style: normal; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.fxa__tool[data-stage="3"] .rateline__gap { animation: grow 1.1s var(--ease-out) .25s both; }
@keyframes grow { from { transform: scaleX(0); } }
/* While the details are asked for, the result waits under a blur. */
.fxr__lock { display: none; }
.fxa__tool[data-stage="2"] .fxr__in { filter: blur(11px); opacity: .75; user-select: none; pointer-events: none; }
.fxa__tool[data-stage="2"] .fxr__lock { position: absolute; inset: 0; display: grid; place-items: center; }
.fxr__lock span { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--charcoal); color: var(--plate); font: 400 16px/1 var(--f-serif); box-shadow: 0 18px 40px -18px rgba(10, 12, 12, .5); }
.fxr__lock span::before { content: ""; width: 8px; height: 8px; background: var(--blue); }
.fxa__tool[data-stage="3"] .fxr__in { animation: unblur .9s var(--ease-out); }
@keyframes unblur { from { filter: blur(11px); opacity: .75; } to { filter: none; opacity: 1; } }

/* The currency picker. */
.ccy-pop {
  position: absolute; z-index: 30; left: 0; top: 0;
  width: min(580px, calc(100vw - 2 * var(--gutter))); max-height: min(460px, 64svh);
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: var(--charcoal); color: var(--on-dark);
  box-shadow: 0 34px 80px -24px rgba(10, 12, 12, .6);
  animation: popin .28s var(--ease-out);
}
.ccy-pop[hidden] { display: none; }
@keyframes popin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ccy-pop__find { margin: 14px 14px 4px; padding: 11px 12px; background: rgba(228, 228, 231, .07); border: 1px solid var(--hair-dark); border-radius: 0; color: var(--on-dark); font: 300 17px/1.2 var(--f-serif); }
.ccy-pop__find::placeholder { color: rgba(228, 228, 231, .45); }
.ccy-pop__find:focus { outline: none; border-color: var(--plate); }
.ccy-pop__list { overflow: auto; padding: 2px 14px 16px; overscroll-behavior: contain; }
.ccy-pop__group { margin: 14px 0 6px; font: 300 14px/1.2 var(--f-serif); color: var(--on-dark-2); }
.ccy-pop__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.ccy-opt { display: grid; grid-template-columns: 3.3em minmax(0, 1fr); align-items: baseline; column-gap: 8px; padding: 9px 10px; background: transparent; border: 1px solid transparent; color: var(--on-dark); cursor: pointer; text-align: left; font: 300 16px/1.25 var(--f-serif); }
.ccy-opt b { font-weight: 400; letter-spacing: .02em; }
.ccy-opt span { color: var(--on-dark-2); font-size: 14px; }
.ccy-opt em { grid-column: 2; font-style: normal; font-size: 12.5px; color: rgba(228, 228, 231, .5); }
.ccy-opt:hover, .ccy-opt:focus-visible { background: rgba(228, 228, 231, .08); border-color: var(--hair-dark); outline: none; }
.ccy-opt[aria-pressed="true"] { background: var(--plate); color: var(--charcoal); }
.ccy-opt[aria-pressed="true"] span, .ccy-opt[aria-pressed="true"] em { color: var(--ink-2); }
.ccy-pop__none { padding: 14px 0; font: 300 16px/1.4 var(--f-serif); color: var(--on-dark-2); }

/* ---------- 03: How Makosch works (one screen: four steps, one photo) ---------- */

.hww__main { grid-column: 2 / span 7; grid-row: 1; display: grid; gap: clamp(16px, 3svh, 34px); align-content: start; }
.hww__main > .deeper { margin-top: clamp(20px, 5svh, 56px); }
.hww__title { font: var(--h2); letter-spacing: -.016em; text-wrap: balance; }
.hww__steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair-dark); }
.hww__step { position: relative; border-bottom: 1px solid var(--hair-dark); }
.hww__step h3 { margin: 0; font: inherit; }
.hww__tab {
  display: flex; align-items: baseline; gap: 18px; width: 100%;
  padding: clamp(8px, 1.15svh, 15px) 0; background: none; border: 0;
  color: var(--on-dark-2); cursor: pointer; text-align: left;
}
.hww__no { flex: none; width: 34px; font: 300 16px/1 var(--f-serif); }
.hww__name { font: 300 clamp(26px, min(2.5vw, 4.6svh), 42px)/1.04 var(--f-serif); letter-spacing: -.016em; transition: color .3s var(--ease); }
.hww__tab:hover .hww__name, .hww__step.is-on .hww__name { color: var(--on-dark); }
.hww__step.is-on .hww__no { color: var(--on-dark); }
/* The bar under the open step fills while it is shown, then the next step opens. */
.hww__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--plate); transform: scaleX(0); transform-origin: 0 50%; }
.hww.is-auto .hww__step.is-on .hww__bar { animation: fill var(--hww-dur, 6.5s) linear forwards; }
.hww.is-paused .hww__step.is-on .hww__bar, .hww.is-hidden .hww__step.is-on .hww__bar, .hww.is-stopped .hww__step.is-on .hww__bar { animation-play-state: paused; }
.hww__panel p { max-width: calc(46ch + 52px); padding: 0 0 clamp(10px, 1.8svh, 18px) 52px; font: var(--body); color: var(--on-dark-copy); animation: rise .5s var(--ease-out); }
.hww__visual { grid-column: 10 / -1; grid-row: 1; position: relative; align-self: start; aspect-ratio: 4 / 5; }
.hww__media { position: absolute; inset: 0; overflow: hidden; background: #1b1d1d; }
.hww__photo { position: absolute; inset: 0; margin: 0; overflow: hidden; opacity: 0; transition: opacity .9s var(--ease); }
.hww__photo.is-on { opacity: 1; }
.hww__photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 2.4s var(--ease-out); }
.hww__photo.is-on img { transform: none; }
@keyframes fill { to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- 04: Independence ---------- */

.indep__title { grid-column: 2 / span 7; grid-row: 1; align-self: center; font: 300 clamp(52px, min(6.6vw, 11.4svh), 116px)/.92 var(--f-serif); letter-spacing: -.03em; }
.indep__title span { display: block; }
.indep__fig { grid-column: 9 / -1; grid-row: 1; align-self: center; margin: 0; }
.indep__fig svg { display: block; width: 100%; height: auto; max-height: calc(100svh - var(--hd-b) - 470px); margin-left: auto; overflow: visible; }
.indep__points { grid-column: 2 / -1; list-style: none; margin: clamp(28px, 5.2svh, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
.indep__points li { padding-top: 16px; border-top: 1px solid var(--hair-blue); }
.indep__points h3 { font: 400 clamp(20px, 1.6vw, 25px)/1.2 var(--f-serif); }
.indep__points p { margin-top: 10px; font: 300 clamp(16px, min(1.2vw, 2.2svh), 19px)/1.5 var(--f-serif); color: var(--blue-ink-2); }
.indep .chapter__links { margin-top: clamp(40px, 7.4svh, 96px); }
.indep__copy { grid-column: 7 / -1; display: grid; gap: .9em; margin-top: clamp(28px, 3.4vw, 48px); font: 300 clamp(19px, 1.5vw, 23px)/1.42 var(--f-serif); color: var(--blue-ink-2); }
/* The diagram: your business, Makosch, and ten identical lines to the broker partners. */
.nd__line { fill: none; stroke: var(--blue-ink); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease-out) .5s; }
.nd__line--in { transition-delay: .1s; transition-duration: .7s; }
.nd__sq { fill: var(--blue-ink); }
.nd__m { fill: var(--blue-ink); }
.nd__label { font: 400 17px var(--f-serif); fill: var(--blue-ink); }
.indep__fig.is-in .nd__line { stroke-dashoffset: 0; }

/* ---------- 05: Industries ---------- */

.inds .chapter__grid { align-items: stretch; }
.inds__main { grid-column: 2 / span 6; grid-row: 1; display: grid; gap: clamp(18px, 3.2svh, 34px); align-content: start; justify-items: start; }
.inds__title { font: var(--h2); letter-spacing: -.016em; text-wrap: balance; }
.inds__list { width: 100%; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); border-top: 1px solid var(--hair-light); }
.inds__item { position: relative; display: flex; align-items: center; gap: 12px; padding: clamp(9px, 1.55svh, 14px) 0; border-bottom: 1px solid var(--hair-light); color: var(--ink-2); text-decoration: none; transition: color .3s var(--ease); }
.inds__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-out); }
.inds__thumb { display: none; }
.inds__name { flex: 1; font: 300 clamp(17px, min(1.35vw, 2.5svh), 21px)/1.2 var(--f-serif); }
.inds__item .arrow { opacity: 0; transform: translateX(-8px); transition: opacity .3s var(--ease), transform .4s var(--ease-out); }
.inds__item:hover, .inds__item:focus-visible, .inds__item.is-on { color: var(--ink); }
.inds__item:hover::after, .inds__item:focus-visible::after, .inds__item.is-on::after { transform: none; }
.inds__item:hover .arrow, .inds__item:focus-visible .arrow, .inds__item.is-on .arrow { opacity: 1; transform: none; }
.inds__all { margin-top: 4px; }
.chapter--dark .inds__list { border-top-color: var(--hair-dark); }
.chapter--dark .inds__item { border-bottom-color: var(--hair-dark); color: var(--on-dark-2); }
.chapter--dark .inds__item::after { background: var(--plate); }
.chapter--dark .inds__item:hover, .chapter--dark .inds__item:focus-visible, .chapter--dark .inds__item.is-on { color: var(--on-dark); }

/* The stage: one M window, the brand's own shape, with the industry's photo; the industry below it. */
.inds__stage { grid-column: 8 / -1; grid-row: 1; position: relative; display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 3.2svh, 32px); color: var(--on-dark); }
.inds__win {
  position: relative; margin: 0 calc(var(--gutter) * -1) 0 0; aspect-ratio: 854.44 / 286.11; overflow: hidden; background: #1b1d1d;
}
.inds__shot { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1s var(--ease); }
.inds__shot.is-on { opacity: 1; }
.inds__shot img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 7s linear; }
.inds__shot.is-on img { transform: scale(1); }
/* The line under the window fills while an industry is shown; the pause control sits at its end. */
/* No pause button since 15.10.2026 (Nils): pointing at the stage pauses it, choosing an industry stops it. */
.inds__bar { display: flex; align-items: center; gap: 14px; min-height: 36px; }
.inds__timer { flex: 1; height: 1px; background: var(--hair-dark); }
.inds__timer i { display: block; height: 100%; background: var(--plate); transform: scaleX(0); transform-origin: 0 50%; }
.inds__timer i.is-run { animation: fill var(--inds-dur, 5s) linear forwards; }
.inds__stage.is-paused .inds__timer i, .inds__stage.is-stopped .inds__timer i { animation-play-state: paused; }
/* Name and text keep their room (two and three lines), so nothing moves while the industries change. */
.inds__card { display: grid; justify-items: start; gap: 12px; transition: opacity .25s var(--ease), transform .35s var(--ease-out); }
.inds__card.is-swap { opacity: 0; transform: translateY(8px); }
.inds__card-name { min-height: 2.04em; font: 300 clamp(30px, min(2.9vw, 5.4svh), 50px)/1.02 var(--f-serif); letter-spacing: -.016em; text-wrap: balance; }
.inds__card-text { max-width: 44ch; min-height: 4.35em; font: 300 clamp(16px, min(1.25vw, 2.3svh), 20px)/1.45 var(--f-serif); color: var(--on-dark-copy); }
.inds__card-cta { margin-top: 4px; }
/* Pause control for the parts that advance on their own (WCAG 2.2.2). */
.autoplay {
  position: absolute; z-index: 4; top: 16px; right: 16px;
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 1px solid rgba(228, 228, 231, .5); background: rgba(20, 22, 22, .42); color: var(--plate);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.autoplay:hover { background: rgba(20, 22, 22, .72); border-color: var(--plate); }
.autoplay__icon { width: 10px; height: 12px; background: linear-gradient(90deg, currentColor 0 34%, transparent 34% 66%, currentColor 66%); }
.autoplay[aria-pressed="true"] .autoplay__icon { width: 0; height: 0; background: none; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; transform: translateX(2px); }
.autoplay--inline { position: static; flex: none; width: 36px; height: 36px; }

/* ---------- 06: Introducers ---------- */

.intro__title { grid-column: 2 / span 9; font-size: clamp(38px, min(4.2vw, 7.6svh), 72px); }
.points { grid-column: 2 / -1; list-style: none; margin: clamp(32px, 6svh, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 36px; }
.points--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.points__item { padding-top: 20px; border-top: 1px solid var(--hair-dark); }
.points__item h3 { font: 400 clamp(20px, 1.6vw, 26px)/1.2 var(--f-serif); }
.points__item p { margin-top: 10px; font: 300 clamp(17px, min(1.3vw, 2.3svh), 20px)/1.48 var(--f-serif); color: var(--on-dark-copy); }
.stagesec .points { margin-top: clamp(40px, 9svh, 112px); row-gap: 44px; }
.stagesec .points__item { padding-top: 24px; }
.stagesec .points__item p { margin-top: 14px; }
.stagesec__cta { grid-column: 2 / -1; margin-top: clamp(40px, 7svh, 88px); }
.intro__cta { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(32px, 5svh, 60px); }
.intro__direct { font: 300 17px/1.4 var(--f-serif); color: var(--on-dark-2); }
.intro__direct a { color: var(--on-dark); text-underline-offset: 5px; }

/* ---------- 07: Makosch Africa teaser ---------- */

.about-t__main { grid-column: 2 / span 6; grid-row: 1; display: grid; gap: clamp(18px, 3svh, 32px); align-content: start; }
.about-t__title { font: var(--h2); letter-spacing: -.016em; text-wrap: balance; }
.about-t__copy { display: grid; gap: .8em; font: var(--body); color: var(--ink-2); }
.about-t__links { display: grid; gap: 10px; margin-top: 4px; }
.about-t__side { grid-column: 8 / -1; grid-row: 1; align-self: stretch; display: grid; }
.about-t__photo { margin: 0; min-height: 320px; overflow: hidden; background: #1b1d1d; }
.about-t__photo img { width: 100%; height: 100%; object-fit: cover; }
/* ---------- Homepage: client cases (05) ---------- */

.hcases__head { grid-column: 2 / span 8; }
.hcases__lead { margin-top: 14px; max-width: 52ch; font: var(--body); color: var(--ink-2); }
.hcases__list { grid-column: 2 / -1; list-style: none; margin: clamp(32px, 6svh, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 32px; }
.hcase__link { display: flex; flex-direction: column; gap: 12px; height: 100%; padding-top: 18px; border-top: 1px solid var(--hair-light); color: var(--ink); text-decoration: none; }
.hcase__label { font: 400 16px/1.3 var(--f-serif); color: var(--ink-2); }
.hcase__title { font: 300 clamp(22px, min(1.9vw, 3.6svh), 30px)/1.18 var(--f-serif); letter-spacing: -.01em; text-wrap: balance; }
.hcase__more { display: inline-flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 14px; font: 300 19px/1.2 var(--f-serif); }
.hcase__more .arrow { box-sizing: content-box; padding: 11px 9px; background: var(--ink); color: var(--plate); transition: transform .4s var(--ease-out); }
.hcase__link:hover .hcase__more .arrow, .hcase__link:focus-visible .hcase__more .arrow { transform: translateX(6px); }
.hcase__link:hover .hcase__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
/* Industries with a client case carry a quiet tag in the homepage list and on the overview cards. */
.ctag { display: inline-block; margin-left: 10px; padding: 2px 7px 3px; font: 400 12px/1.2 var(--f-serif); letter-spacing: .01em; border: 1px solid currentColor; opacity: .72; vertical-align: .2em; white-space: nowrap; }

/* ---------- How we work (draft for Ben): steps, comparison, questions ---------- */

.hsteps { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--hair-light); }
.hstep { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 12px; padding: clamp(12px, 2svh, 22px) 0; border-bottom: 1px solid var(--hair-light); }
.hstep__no { font: 300 16px/1.6 var(--f-serif); color: var(--ink-2); }
.hstep h3 { font: 400 clamp(18px, min(1.4vw, 2.6svh), 23px)/1.25 var(--f-serif); }
.hstep p { margin-top: 6px; max-width: 58ch; font: 300 clamp(16px, min(1.2vw, 2.2svh), 19px)/1.48 var(--f-serif); color: var(--ink-2); }
.hcompare__head { grid-column: 2 / span 8; }
.hcompare__lead { margin-top: 16px; max-width: 58ch; font: var(--body); color: var(--ink-2); }
.hcompare__list { grid-column: 2 / -1; list-style: none; margin: clamp(32px, 6svh, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 28px; }
.hcomp { padding-top: 18px; border-top: 1px solid var(--hair-light); }
.hcomp h3 { font: 400 clamp(20px, 1.6vw, 25px)/1.2 var(--f-serif); }
.hcomp p { margin-top: 10px; font: 300 clamp(16px, min(1.2vw, 2.2svh), 19px)/1.48 var(--f-serif); color: var(--ink-2); }
.hcompare__cta { grid-column: 2 / -1; margin-top: clamp(32px, 6svh, 72px); }
.hwq .faq__side { grid-column: 2 / span 4; }
.hwq .faq__list { grid-column: 7 / -1; }
/* Facts only Ben can supply: visible in the draft so nothing passes for final copy. */
.tbc { padding: 0 6px; border: 1px dashed currentColor; border-radius: 2px; font-style: italic; opacity: .85; }

/* ---------- FAQ ---------- */

.faq__side { grid-column: 1 / span 4; grid-row: 1; align-self: start; display: grid; gap: 18px; }
.faq__title { font: var(--h2); letter-spacing: -.015em; }
.faq__more { font: 300 18px/1.4 var(--f-serif); color: var(--blue-ink-2); }
.faq__more a { color: var(--blue-ink); text-underline-offset: 5px; }
.faq__list { grid-column: 6 / -1; grid-row: 1; border-top: 1px solid var(--hair-blue); }
.faq__item h3 { margin: 0; }
.faq__item button {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%;
  padding: clamp(16px, 2.6svh, 22px) 0; background: none; border: 0; border-bottom: 1px solid var(--hair-blue);
  color: var(--blue-ink); cursor: pointer; text-align: left;
  font: 300 clamp(20px, min(1.7vw, 3.2svh), 27px)/1.3 var(--f-serif);
}
.faq__item button:hover .plus { transform: rotate(90deg); }
.plus { width: 14px; height: 14px; flex: none; transition: transform .4s var(--ease-out); }
.plus path { fill: none; stroke: currentColor; stroke-width: 1.4; }
.faq__item button[aria-expanded="true"] .plus { transform: rotate(45deg); }
.faq__a p { max-width: 62ch; padding: 6px 0 24px; font: 300 clamp(17px, 1.35vw, 21px)/1.5 var(--f-serif); color: var(--blue-ink-2); }
.faq__a a { color: var(--blue-ink); text-underline-offset: 4px; }

/* ---------- Subpages ---------- */

.phero { background: var(--plate); color: var(--ink); padding: calc(var(--hd-b) + clamp(40px, min(7vw, 9svh), 112px)) 0 clamp(40px, min(6vw, 8svh), 96px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(24px, 3.6vw, 48px); font: 300 16px/1.2 var(--f-serif); color: var(--ink-2); }
.crumbs a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; }
.phero__title { max-width: 16ch; font: 300 clamp(46px, min(6.4vw, 11svh), 96px)/1.06 var(--f-serif); letter-spacing: -.025em; text-wrap: balance; }
.phero__lead { max-width: 48ch; margin-top: clamp(20px, min(3vw, 4svh), 40px); font: 300 clamp(19px, 1.6vw, 24px)/1.42 var(--f-serif); color: var(--ink-2); }
.phero__lead--2 { margin-top: 12px; }
.phero--split { padding-bottom: clamp(32px, 5svh, 64px); }
.phero__split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 24px; align-items: end; }
.phero--split .phero__title { grid-column: 1 / span 7; max-width: none; font-size: clamp(40px, min(4.6vw, 8.4svh), 80px); }
.phero--split .phero__lead { grid-column: 9 / -1; margin: 0; }
.copy--full { grid-column: auto; }
.lead-sec__body { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: stretch; }
.lead-sec__photo { grid-column: 1 / span 4; margin: 0; min-height: 320px; overflow: hidden; background: #1b1d1d; }
.lead-sec__photo img { width: 100%; height: 100%; object-fit: cover; }
.lead-sec__copy { grid-column: 6 / -1; }
.lead-sec__name { font: 300 clamp(40px, min(5vw, 8.4svh), 84px)/.98 var(--f-serif); letter-spacing: -.02em; }
.lead-sec__text { display: grid; gap: .8em; max-width: 60ch; font: var(--body); color: var(--on-dark-copy); }
.lead-sec__role { margin: 12px 0 clamp(20px, 3.6svh, 32px); font: 400 17px/1.3 var(--f-serif); color: var(--on-dark-2); }
.lead-sec__contact { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: clamp(20px, 3.6svh, 32px); padding-top: 20px; border-top: 1px solid var(--hair-dark); font-size: 15px; color: var(--on-dark-2); }
.lead-sec__contact a { text-decoration: none; }
.lead-sec__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; margin-top: clamp(24px, 4svh, 40px); }
.lead-sec__foot .lead-sec__contact { margin: 0; padding: 0; border: 0; }

/* About: the network figures as the UK "Data Points" ledger. */
.proof { background: var(--blue); color: var(--blue-ink); padding-block: clamp(80px, 9vw, 136px); }
.proof__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: clamp(40px, 5vw, 76px); }
.proof__title { grid-column: 1 / span 6; max-width: 14ch; font: 300 clamp(36px, 4.2vw, 66px)/1.02 var(--f-serif); letter-spacing: -.014em; }
.ledger { grid-column: 1 / span 8; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--hair-blue); }
.ledger__row {
  --split: calc((100% - 24px) * 5 / 12 + 24px);
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 24px; align-items: start;
  padding: 26px 0 22px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 8px 8px no-repeat,
    linear-gradient(currentColor, currentColor) var(--split) 0 / 8px 8px no-repeat;
}
.ledger__row::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--hair-blue); transform-origin: 0 50%; transition: transform 1.2s var(--ease-out); transition-delay: var(--d, 0s); }
.ledger__num { font: 300 clamp(52px, 5.6vw, 92px)/.95 var(--f-serif); letter-spacing: -.02em; font-variant-numeric: lining-nums; white-space: nowrap; }
.ledger__label { padding-top: .35em; font: 300 clamp(19px, 1.55vw, 25px)/1.3 var(--f-serif); }
.proof__note { grid-column: 10 / -1; grid-row: 2; align-self: end; max-width: 30ch; font: 300 17px/1.5 var(--f-serif); color: var(--blue-ink-2); }

/* Industries overview: one card per industry. */
.icards { background: var(--plate); color: var(--ink); padding-bottom: var(--sec-pad); }
.icards__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) var(--col-gap); }
.icard { display: grid; gap: 14px; text-decoration: none; color: var(--ink); }
.icard__photo { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #1b1d1d; }
.icard__photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease-out); }
.icard:hover .icard__photo img { transform: scale(1.07); }
.icard__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 12px; border-top: 1px solid var(--hair-light); }
.icard__name { font: 300 clamp(24px, 2vw, 32px)/1.1 var(--f-serif); letter-spacing: -.012em; }
.icard__row .arrow { flex: none; transition: transform .4s var(--ease-out); }
.icard:hover .icard__row .arrow { transform: translateX(6px); }
.icard__text { font: 300 17px/1.45 var(--f-serif); color: var(--ink-2); }

/* Industry pages */
.ihero { background: var(--plate); color: var(--ink); padding: calc(var(--hd-b) + clamp(28px, 5svh, 64px)) 0 clamp(36px, 6svh, 112px); }
.ihero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 32px; align-items: center; }
.ihero__copy { grid-column: 1 / span 6; }
.ihero__title { font: 300 clamp(46px, min(5.6vw, 9svh), 96px)/.96 var(--f-serif); letter-spacing: -.026em; text-wrap: balance; }
.ihero__text { max-width: 46ch; margin-top: clamp(20px, 3.4svh, 34px); font: 300 clamp(18px, 1.45vw, 23px)/1.45 var(--f-serif); color: var(--ink-2); }
.ihero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(24px, 4svh, 40px); }
.ihero__window {
  grid-column: 7 / -1; margin: 0; aspect-ratio: 854.44 / 286.11; overflow: hidden; background: #1b1d1d;
  -webkit-mask: url("../assets/brand/m-mask.svg") center / calc(84% + 16% * var(--q, 1)) auto no-repeat;
  mask: url("../assets/brand/m-mask.svg") center / calc(84% + 16% * var(--q, 1)) auto no-repeat;
}
.ihero__window img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.16 - .16 * var(--q, 1))); }
.isec__head { grid-column: 2 / span 9; font: var(--h2); letter-spacing: -.016em; text-wrap: balance; }
/* Where the currency risk sits: four steps on one line, the exposure marked along it. */
.flow { grid-column: 2 / -1; list-style: none; margin: clamp(36px, 6svh, 72px) 0 0; padding: 30px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); position: relative; }
.flow::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hair-dark); }
.flow::after { content: ""; position: absolute; left: 5px; right: calc((100% - 3 * var(--col-gap)) / 4 - 6px); top: -1px; height: 3px; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; transition: transform 2.2s var(--ease-out) .3s; }
.flow.is-in::after { transform: none; }
.flow__step { position: relative; }
.flow__step::before { content: ""; position: absolute; left: 0; top: -35px; width: 11px; height: 11px; background: var(--plate); }
.flow__no { display: block; font: 300 16px/1 var(--f-serif); color: var(--on-dark-2); }
.flow__label { display: block; margin-top: 12px; max-width: 16ch; font: 300 clamp(21px, 1.8vw, 28px)/1.2 var(--f-serif); letter-spacing: -.01em; }
.flow__note { grid-column: 2 / -1; margin-top: 28px; max-width: 60ch; font: 300 16px/1.45 var(--f-serif); color: var(--on-dark-2); }
.flow__key { display: inline-block; width: 32px; height: 3px; margin-right: 14px; vertical-align: middle; background: var(--blue); }
.looks { grid-column: 2 / -1; list-style: none; margin: clamp(32px, 5svh, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
.looks li { padding-top: 18px; border-top: 1px solid var(--hair-light); }
.looks__no { display: block; font: 300 16px/1 var(--f-serif); color: var(--ink-2); }
.looks__text { display: block; margin-top: 14px; font: 300 clamp(20px, 1.7vw, 27px)/1.3 var(--f-serif); letter-spacing: -.008em; }
/* In practice: one real client case per industry page, where one exists. Two halves on one axis
   (columns 2-6 and 7-12): the head beside the story, findings beside actions, the outcome beside
   the call to action, so the case reads as a composed page and fits one screen. */
.icase__head { grid-column: 2 / span 5; align-self: baseline; }
.icase__lead { grid-column: 7 / -1; align-self: baseline; }
.icase__title { font: 300 clamp(24px, min(2.3vw, 4.2svh), 36px)/1.15 var(--f-serif); letter-spacing: -.012em; text-wrap: balance; }
.icase__sit { max-width: 60ch; margin-top: 14px; font: var(--body); color: var(--blue-ink-2); text-wrap: pretty; }
.icase__col { margin-top: clamp(22px, 3.6svh, 60px); padding-top: 18px; border-top: 1px solid var(--hair-blue); }
.icase__col--found { grid-column: 2 / span 5; }
.icase__col--did { grid-column: 7 / -1; }
.icase__h { font: 400 17px/1.3 var(--f-serif); color: var(--blue-ink-2); }
.icase__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.icase__list li { display: grid; grid-template-columns: 7px minmax(0, 1fr); column-gap: 14px; font: 300 clamp(16px, min(1.2vw, 2.2svh), 19px)/1.4 var(--f-serif); color: var(--blue-ink-2); text-wrap: pretty; }
.icase__list li::before { content: ""; width: 7px; height: 7px; margin-top: .6em; background: var(--blue-ink); }
.icase__changed { grid-column: 2 / span 5; margin-top: clamp(22px, 3.4svh, 56px); font: 300 clamp(18px, 1.45vw, 23px)/1.4 var(--f-serif); color: var(--blue-ink); text-wrap: pretty; }
.icase__label { display: block; margin-bottom: 6px; font: 400 15px/1.3 var(--f-serif); color: var(--blue-ink-2); }
.icase .btn--solid { --c: var(--blue-ink); --a: var(--blue); }
.icase__cta { grid-column: 7 / -1; align-self: end; margin-top: clamp(22px, 3.4svh, 56px); }
/* Exposure and focus in one screen (industry pages), ending on a jump to the calculator below. */
.irisk__flow, .irisk__looks, .irisk__cta { grid-column: 2 / -1; }
.irisk__flow { margin-top: clamp(24px, 3.6svh, 64px); }
.irisk__flow .flow { margin-top: 0; }
.irisk__looks { margin-top: clamp(24px, 3.6svh, 60px); }
.irisk__h { font: 400 17px/1.3 var(--f-serif); color: var(--on-dark-2); }
.irisk .looks { margin-top: 14px; }
.irisk .looks li { padding-top: 14px; border-top-color: var(--hair-dark); }
.irisk .looks__no { color: var(--on-dark-2); }
.irisk .looks__text { margin-top: 10px; font-size: clamp(17px, min(1.35vw, 2.5svh), 21px); color: var(--on-dark-copy); }
.irisk__cta { margin-top: clamp(24px, 3.6svh, 56px); }
.chapter--blue .btn--solid { --c: var(--blue-ink); --a: var(--blue); }
.stages { grid-column: 2 / -1; list-style: none; margin: clamp(32px, 5svh, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); }
.stages li { padding-top: 18px; border-top: 1px solid var(--hair-blue); }
.stages h3 { font: 300 clamp(26px, 2.4vw, 38px)/1.05 var(--f-serif); letter-spacing: -.014em; }
.stages p { margin-top: 12px; font: 300 clamp(16px, 1.2vw, 19px)/1.48 var(--f-serif); color: var(--blue-ink-2); }
.band { background: var(--plate); color: var(--ink); padding-block: clamp(24px, 4svh, 48px) 0; }
.band__box { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 24px; align-items: center; padding: clamp(28px, 4vw, 64px); background: var(--blue); color: var(--blue-ink); }
.band__copy { grid-column: 1 / span 7; }
.band__title { font: 300 clamp(32px, 3.2vw, 52px)/1.04 var(--f-serif); letter-spacing: -.016em; }
.band__text { margin-top: 12px; max-width: 52ch; font: 300 clamp(17px, 1.35vw, 21px)/1.45 var(--f-serif); color: var(--blue-ink-2); }
.band__cta { grid-column: 9 / -1; justify-self: end; }
.band .btn--solid { --c: var(--blue-ink); --a: var(--blue); }
.others { background: var(--plate); color: var(--ink); padding-block: var(--sec-pad) 0; }
.others__title { font: var(--h2); letter-spacing: -.016em; }
.others__list { list-style: none; margin: clamp(24px, 4svh, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); border-top: 1px solid var(--hair-light); }
.others__list a { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--hair-light); text-decoration: none; color: var(--ink-2); transition: color .3s var(--ease); }
.others__list a:hover { color: var(--ink); }
.others__list img { width: 52px; height: 52px; object-fit: cover; flex: none; }
.others__list span { flex: 1; font: 300 clamp(18px, 1.4vw, 21px)/1.25 var(--f-serif); }
.others__list .arrow { opacity: .5; transition: transform .4s var(--ease-out), opacity .3s var(--ease); }
.others__list a:hover .arrow { opacity: 1; transform: translateX(4px); }

/* ---------- Closing box ---------- */

.close { background: var(--plate); padding-block: clamp(32px, 4.6svh, 96px); }
.close__box {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: clamp(28px, 4.6svh, 72px);
  padding: clamp(32px, min(5vw, 6.6svh), 84px);
  background: var(--charcoal); color: var(--on-dark);
}
.close__title { grid-column: 1 / span 6; align-self: center; font: 300 clamp(34px, min(4vw, 6svh), 66px)/1.02 var(--f-serif); letter-spacing: -.016em; text-wrap: balance; }
.close__window {
  grid-column: 7 / -1; align-self: center; margin: 0;
  position: relative; aspect-ratio: 854.44 / 286.11; overflow: hidden; background: #1b1d1d;
}
.close__window img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(calc(1.18 - .18 * var(--q, 1))); }
.close__row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-top: 24px; border-top: 1px solid var(--hair-dark); }
.close__direct { grid-column: 1 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--on-dark-2); }
.close__direct a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease-out); }
.close__direct a:hover { background-size: 100% 1px; }
.close__copy { grid-column: 7 / -1; display: grid; gap: 24px; justify-items: start; }
.close__text { max-width: 46ch; font: 300 clamp(18px, 1.45vw, 22px)/1.42 var(--f-serif); color: var(--on-dark-copy); }
.close__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 30px; }

/* ---------- Footer ---------- */

.ft { background: var(--charcoal-2); color: var(--on-dark); padding: clamp(72px, 8vw, 112px) 0 calc(36px + env(safe-area-inset-bottom, 0px)); }
.ft__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid var(--hair-dark); }
.lockup--ft { width: 168px; }
.ft__strap { margin-top: 30px; max-width: 26ch; font: 300 24px/1.3 var(--f-serif); color: var(--on-dark-2); }
.ft__head { font-size: 11px; color: var(--on-dark-2); }
.ft__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.ft__list a { font-size: 15px; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease-out); }
.ft__list a:hover { background-size: 100% 1px; }
.ft__ext { display: inline-flex; align-items: center; gap: 8px; }
.ft__ext:hover .arrow-ext { transform: translate(2px, -2px); }
.ft__legal { display: flex; justify-content: space-between; gap: 24px; padding-top: 24px; font: 300 15px/1.5 var(--f-serif); color: var(--on-dark-2); }
.ft__legal-links { display: flex; gap: 24px; }
.ft__legal a { text-decoration: none; border-bottom: 1px solid currentColor; }

/* ---------- Mobile CTA bar ---------- */

.mbar { display: none; }

/* ---------- Reveals ---------- */

.js-rv .rv:not(.in) { opacity: 0; transform: translateY(26px); }
.js-rv .rv { transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay: var(--d, 0s); }
/* Ledger rows (About): the hairline draws, then figure and label rise. */
.js-rv .ledger__row.rv:not(.in) { opacity: 1; transform: none; }
.js-rv .ledger__row:not(.in)::before { transform: scaleX(0); }
.js-rv .ledger__row > * { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--d, 0s) + .18s); }
.js-rv .ledger__row:not(.in) > * { opacity: 0; transform: translateY(18px); }

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .hd__nav { display: none; }
  .hd__menu { display: inline-flex; }
  .hd__in { grid-template-columns: 1fr auto; }
}

/* Portrait screens and tablets: headline, sub and CTAs stack; the M fills what is left. */
@media (max-width: 1024px), (orientation: portrait) {
  .hero__layout { gap: clamp(26px, 4.4svh, 44px); }
  .hero__title { font-size: clamp(40px, min(9vw, 7.4svh), 92px); line-height: 1.02; }
  .hero__title span { display: inline; }
  .hero__aside { flex-direction: column; align-items: flex-start; }
  .hero__mwrap { flex: 0 0 auto; container-type: normal; }
  .hero__m { position: relative; width: 100%; }
}

/* Full pages (owner, 24.09.2026): on laptop and desktop every section fills one screen under the
   header. Words and layouts stay as they are; the content spreads out: the headline at the head, the
   closing link at the foot, the extra height as air in between, photos growing with the page.
   Interactive parts (calculator, accordions) stay compact so nothing jumps while they open. A section
   with more content than one screen simply grows. Phones and tablets keep natural heights. */
@media (min-width: 1101px) {
  .chapter:not(.problem), .reach, .band, .others, .close { display: flex; flex-direction: column; min-height: calc(100svh - var(--hd-b)); }
  .chapter:not(.problem) > .wrap, .reach > .wrap, .band > .wrap, .others > .wrap, .close > .wrap { flex: 1; }
  .phero, .ihero { display: flex; flex-direction: column; min-height: 100svh; }
  .phero > .wrap, .ihero > .wrap { flex: 1; display: flex; flex-direction: column; }
  .phero > .wrap > .phero__title, .phero > .wrap > .phero__split { margin-top: auto; }
  .phero > .wrap > .phero__lead, .phero > .wrap > .phero__split { margin-bottom: auto; }
  .ihero__grid { flex: 1; }

  /* Stacked sections: the rows spread from head to foot. */
  .indep > .chapter__grid, .irisk > .chapter__grid, .icase > .chapter__grid, .hcases > .chapter__grid, .hcompare > .chapter__grid,
  .ihow > .chapter__grid, .intro > .chapter__grid, .stagesec > .chapter__grid { align-content: space-between; }
  .intro__cta, .stagesec__cta { align-self: end; }
  /* Split headline sized to its column (columns 2-6 are about 0.4 of the content width, and "Independent"
     is about 5.8em wide), so it keeps clear of the text beside it on wide screens. */
  .split .indep__title { font-size: clamp(52px, min(11.4svh, calc((min(100vw, var(--maxw)) - 2 * var(--gutter)) * .066)), 116px); }
  /* Independence carries the most: its fixed gaps shrink to a minimum, the page height adds the air back. */
  .indep__points { margin-top: clamp(24px, 3svh, 40px); }
  .indep .chapter__links { margin-top: clamp(28px, 4svh, 48px); }

  /* Side-by-side sections: the columns take the full height; in each, the last element sits at the foot. */
  .problem > .chapter__grid { min-height: calc(100svh - var(--hd-b) - var(--sec-pad) - clamp(40px, 7svh, 88px)); }
  .fxa { align-items: stretch; }
  .fxa__head { display: flex; flex-direction: column; justify-content: space-between; }
  .fxa__tool { align-self: end; }
  /* Once the calendar or the email note is open the tool runs long: the text beside it stays together at the top. */
  .fxa:has(.an[data-stage="ready"]) .fxa__head, .fxa:has(.an[data-stage="sent"]) .fxa__head { justify-content: flex-start; }
  .hww__main { display: flex; flex-direction: column; }
  .hww__main > .deeper { margin-top: auto; }
  /* A clear gap before "How we work in detail" even when the page has no air to spare (owner): the steps
     keep a fixed distance to it and give up a little of their own height instead. */
  .hww__steps { margin-bottom: clamp(36px, 5.6svh, 88px); }
  .hww__tab { padding-block: clamp(6px, .8svh, 15px); }
  .hww__name { font-size: clamp(26px, min(2.5vw, 4svh), 42px); }
  .inds__main { align-content: space-between; }
  .faq__side { align-self: stretch; align-content: space-between; }
  .about-t .chapter__grid { grid-template-rows: minmax(0, 1fr); }
  .about-t__main { display: flex; flex-direction: column; gap: 0; }
  .about-t__copy { margin-top: clamp(32px, 8svh, 88px); }
  .about-t__links { margin-top: auto; padding-top: clamp(36px, 7svh, 88px); }
  .lead-sec__copy { display: flex; flex-direction: column; }
  .lead-sec__foot { margin-top: auto; padding-top: clamp(24px, 4svh, 48px); }
  .split .chapter__grid { align-items: stretch; }
  .split__body:has(> .split__copy, > .hsteps) { display: flex; flex-direction: column; }
  .split__body > .split__cta, .split__body > .deeper { margin-top: auto; }
  .split .indep__copy { align-self: stretch; display: flex; flex-direction: column; }
  .hsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); border-top: 0; }
  .hstep { grid-template-columns: 34px minmax(0, 1fr); border-bottom: 0; border-top: 1px solid var(--hair-light); }
  .hwq .faq__item button { padding-block: clamp(12px, 2svh, 22px); }
  .reach__grid { align-items: stretch; }
  .reach__side, .reach__right { align-content: space-between; }
  .reach--chapter .reach__right { align-content: center; }
  .close > .wrap, .band > .wrap, .others > .wrap { display: flex; flex-direction: column; }
  .close__box { flex: 1; align-content: space-between; }
  /* The blue band keeps its size and sits in the middle of its page: the air is plate, not an empty box. */
  .band { padding-block: var(--sec-pad); }
  .band > .wrap { justify-content: center; }
  .others { padding-bottom: var(--sec-pad); }
  .others__list { margin-top: auto; }
}

/* Short laptop screens (1366x768 and similar, about 650px of page height): the densest sections (closing
   box, About story and network, client cases) would run past one screen, so rhythm and a few sizes step
   down a notch. Taller screens are unchanged. */
@media (min-width: 1101px) and (max-height: 700px) {
  :root { --sec-pad: clamp(40px, 7svh, 112px); }
  .close__window { grid-column: 8 / -1; }
  .icase__title { font-size: clamp(22px, min(2.3vw, 3.8svh), 36px); }
  .icase__col { margin-top: clamp(18px, 3svh, 60px); }
  .icase__list { gap: 6px; }
  .irisk__flow, .irisk__looks, .irisk__cta { margin-top: 18px; }
  .flow__label { font-size: clamp(19px, 1.6vw, 28px); }
  .split__body:has(> .split__copy, > .hsteps) { gap: 20px; }
  .lead-sec__role { margin-bottom: 16px; }
  .inds__stage { gap: 12px; }
}

@media (max-width: 1100px) {
  .reach__side { grid-column: 1 / -1; }
  .reach__right { grid-column: 1 / -1; margin-top: 36px; }
  .reach__map { margin: 0 calc(var(--gutter) * -1); }
  .reach__map .map__svg { width: 100%; max-height: none; }
  .map__caption { padding-inline: var(--gutter); }
  .problem__title { grid-column: 2 / -1; }
  .problem__copy { grid-column: 2 / -1; grid-row: 2; margin-top: 36px; }
  .fxa { grid-template-columns: minmax(0, 1fr); }
  .fxa__tool[data-stage="2"]:not(.is-manual) { grid-template-columns: minmax(0, 1fr); }
  .fxa__tool[data-stage="2"] .fxr { margin-top: 36px; }
  .hww__main { grid-column: 2 / -1; }
  .hww__visual { display: none; }
  .indep__title { grid-column: 2 / -1; }
  .indep__fig { grid-column: 2 / span 9; grid-row: 2; margin-top: 36px; }
  .indep__points { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .inds__main { grid-column: 2 / -1; }
  .inds__stage { display: none; }
  .inds__list { grid-template-columns: minmax(0, 1fr); }
  .inds__item .arrow { opacity: 1; transform: none; }
  .inds__thumb { display: block; width: 56px; height: 56px; flex: none; object-fit: cover; }
  .points, .points--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-t__main, .about-t__side { grid-column: 2 / -1; }
  .about-t__side { grid-row: 2; margin-top: 40px; }
  .about-t__photo { aspect-ratio: 16 / 10; min-height: 0; }
  .faq__side, .faq__list { grid-column: 1 / -1; }
  .faq__list { grid-row: 2; margin-top: 32px; }
  .phero__split { display: block; }
  .phero--split .phero__lead { margin-top: 24px; }
  .indep__copy { grid-column: 2 / -1; }
  .split .split__head, .split .split__body, .split__fact { grid-column: 2 / -1; grid-row: auto; }
  .split .split__body { margin-top: clamp(24px, 4svh, 40px); padding-top: 0; }
  .split__fact { margin-top: 32px; }
  .hcases__head { grid-column: 2 / -1; }
  .hcompare__head { grid-column: 2 / -1; }
  .hcompare__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hwq .faq__side, .hwq .faq__list { grid-column: 2 / -1; }
  .hcases__list { grid-template-columns: minmax(0, 1fr); }
  .reach--chapter .reach__side, .reach--chapter .reach__right { grid-column: 2 / -1; }
  .chapter__links--pair { grid-template-columns: 1fr; }
  .proof__title { grid-column: 1 / -1; }
  .ledger { grid-column: 1 / -1; }
  .proof__note { grid-column: 1 / span 8; grid-row: auto; }
  .close__title { grid-column: 1 / -1; }
  .close__window { grid-column: 1 / -1; }
  .close__row { display: flex; flex-direction: column; }
  .close__direct { order: 2; margin-top: 36px; }
  .close__copy { grid-column: 1 / -1; }
  .icards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ihero__copy, .ihero__window { grid-column: 1 / -1; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .flow::before, .flow::after { display: none; }
  .flow__step { padding-top: 22px; border-top: 1px solid var(--hair-dark); }
  .flow__step::before { top: -6px; }
  .looks, .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .icase__head, .icase__lead, .icase__col, .icase__changed, .icase__cta { grid-column: 2 / -1; align-self: start; }
  .icase__lead { margin-top: 22px; }
  .band__copy, .band__cta { grid-column: 1 / -1; justify-self: start; }
  .others__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones and small tablets: the stage stacks; only the current step shows under the rate line. */
@media (max-width: 900px) {
  .anatomy { height: 420vh; margin-top: 56px; }
  .xf { align-content: center; row-gap: 16px; }
  .xf__head, .xf__figure { grid-column: 1 / -1; }
  .xf__figure { grid-row: 2; text-align: left; }
  .xf__viz { grid-row: 3; }
  .xf__steps, .xf__progress { grid-row: 4; }
  .xf__end { grid-row: 5; }
  .xf__title { font-size: clamp(26px, 7vw, 34px); }
  .xf__intro { display: none; }
  .xf__big { font-size: clamp(30px, 8.4vw, 44px); }
  .xf__steps { grid-template-columns: minmax(0, 1fr); }
  .xf__steps .anatomy__step:not(.is-current) .anatomy__label { display: none; }
  .xf__steps p { grid-row: 2; margin-top: 12px; }
  .xf__progress { margin-top: calc(clamp(15px, 1.15vw, 18px) * 1.25 + 10px); }
  .rl__name, .rl__glab, .rl__alab, .rl__mark b { font-size: 12px; }
  .rl__lab { font-size: 13px; line-height: 1.15; left: calc(70% + 14px); max-width: calc(30% - 14px); white-space: normal; }
  /* A narrow chart makes the line steeper: both names move clear of it. */
  .rl__name--mkt { top: calc(22% - 20px); }
  .rl__mark--conv b { bottom: auto; top: 10px; }
}

@media (max-width: 760px) {
  :root { --hd-h: 64px; --sec-pad: 72px; }
  .hd__cta { display: none; }
  .hero__ctas .btn, .statement__cta .btn, .calc__actions .btn, .intro__cta .btn, .ihero__ctas .btn, .band__cta .btn, .close__actions .btn, .xf__cta, .inds__card-cta, .icase__cta .btn, .stagesec__cta .btn, .split__cta .btn, .irisk__cta .btn, .lead-sec__foot .btn, .hcompare__cta .btn {
    display: flex; width: 100%; justify-content: space-between; white-space: normal;
  }
  .lockup { width: 100px; }

  .hero { height: 280svh; }
  .hero__layout { gap: 22px; padding: calc(var(--hd-b) + 20px) var(--gutter) 18px; }
  .hero__title { font-size: clamp(40px, 12.4vw, 50px); line-height: 1.02; }
  .hero__aside { align-items: stretch; }
  .hero__sub { font-size: 18px; }
  .hero__ctas { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero__ctas .textlink { align-self: center; }
  .statement__line { grid-template-columns: 40px minmax(0, 1fr); }
  .statement__text { font-size: clamp(26px, 7.4vw, 33px); line-height: 1.12; }
  .statement__cta { padding-left: 0; flex-direction: column; align-items: stretch; }
  .hero__statement { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  .statement__note { font-size: 15px; text-align: center; }

  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .fig__num { font-size: clamp(38px, 11vw, 46px); }
  .fig:first-child .fig__num { font-size: clamp(56px, 17vw, 72px); }
  .fig__label { font-size: 16px; }
  .map text { font-size: 38px; }
  .map__hub text { font-size: 36px; }
  .map__land { stroke-width: 6; }
  .map__land--af { stroke-width: 6.4; }
  .map__arc { stroke-width: 3; }
  .map__pulse { r: 7px; }
  .map__chip { transform-box: fill-box; transform-origin: center; transform: scale(1.8); }

  .chapter__grid, .chapter__body { display: block; }
  /* Let's talk: the grid is gone here, so the blocks keep their distance themselves. */
  .talk__cal { margin-top: 24px; }
  .talk__form { margin-top: 56px; }
  .talk__side { margin-top: 28px; }
  .chapter__index { float: right; margin: .35em 0 0 16px; padding: 0; border: 0; }
  .chapter__name { display: none; }
  .chapter__no { font-size: 22px; opacity: .7; }
  .chapter__title, .intro__title { font-size: clamp(36px, 10vw, 46px); line-height: 1.04; }
  .fxa__title, .hww__title, .inds__title, .about-t__title, .faq__title, .isec__head, .others__title { font-size: clamp(32px, 9vw, 40px); line-height: 1.05; }
  .chapter__body { margin-top: 56px; }
  .copy { font-size: 21px; line-height: 1.42; }
  .problem__copy { margin-top: 32px; }
  .fxa, .hww__main, .inds__main, .about-t__main { display: block; }
  /* align-content on a block container makes it a formatting context, which would sit beside the floated
     chapter number and lose its width (a 64 px strip); phones stack these columns as plain blocks. */
  .hww__main, .inds__main, .about-t__main { align-content: normal; }
  .hwq .faq__side { display: block; }
  .hwq .faq__side > * + * { margin-top: 16px; }
  .hcompare__list { grid-template-columns: minmax(0, 1fr); }
  .fxa > * + *, .hww__main > * + *, .inds__main > * + *, .about-t__main > * + * { margin-top: 22px; }
  .about-t__main > .about-t__copy { margin-top: 36px; }
  .about-t__main > .about-t__links { margin-top: 56px; }
  .fxa__tool { margin-top: 28px; }
  .fxa__points { margin-top: 18px; gap: 8px; font-size: 17px; }
  .fxrow__in { font-size: clamp(26px, 7.6vw, 32px); }
  .ccy-pop { position: fixed; z-index: 66; left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; max-height: 72svh; }
  .ccy-pop__grid { grid-template-columns: minmax(0, 1fr); }
  .fxr__big { font-size: clamp(72px, 22vw, 96px); }
  .field-grid { grid-template-columns: minmax(0, 1fr); }
  .hww__main { margin-top: 0; }
  .hww__steps { margin-top: 8px; }
  .hww__panel p { padding-left: 52px; }
  .indep__title { font-size: clamp(48px, 14vw, 62px); }
  .indep__fig { margin: 32px 0 0; }
  .nd__label { font-size: 19px; }
  .indep__points { margin-top: 32px; }
  .inds__main { margin-top: 0; }
  .inds__list { margin-top: 8px; }
  .inds__all { width: 100%; }
  .points, .points--4 { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .intro__cta { flex-direction: column; align-items: stretch; }
  .about-t__side { display: grid; grid-template-columns: minmax(0, 1fr); }
  .faq__item button { font-size: 20px; padding: 18px 0; }
  .chapter__links { margin-top: 40px; }
  .deeper { column-gap: 16px; }
  .deeper__arrow { width: 46px; }
  .lead-sec__body { display: block; }
  .lead-sec__photo { aspect-ratio: 4 / 3; min-height: 0; margin-bottom: 32px; }
  .split .split__body, .split__fact { margin-top: 28px; }
  .split__fact-num { font-size: clamp(56px, 17vw, 72px); }
  .reach--chapter .reach__grid, .reach--chapter .reach__side { display: block; }
  .reach--chapter .reach__side > * + * { margin-top: 28px; }
  .lead-sec__name { font-size: clamp(40px, 11vw, 52px); }
  .phero__title { font-size: clamp(40px, 11vw, 54px); line-height: 1.02; }
  .icards__grid { grid-template-columns: minmax(0, 1fr); }
  .ihero__title { font-size: clamp(40px, 11vw, 54px); line-height: 1.02; }
  .ihero__ctas { flex-direction: column; align-items: stretch; }
  .ihero__ctas .textlink { align-self: flex-start; }
  .flow, .looks, .stages, .others__list { grid-template-columns: minmax(0, 1fr); }
  .band { padding-top: 16px; }
  .band .wrap { padding-inline: 10px; }
  .band__box { padding: 32px 20px; }
  .band__cta { width: 100%; }

  .close { padding-block: 16px; }
  .close > .wrap { padding-inline: 10px; }
  .close__box { padding: 40px 20px 36px; row-gap: 36px; }
  .close__title { font-size: clamp(31px, 8.8vw, 38px); line-height: 1.06; text-wrap: pretty; }
  .close__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .close__actions .textlink { align-self: flex-start; }

  .ft__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* The brand and the contact column (the e-mail address is wider than half a phone) take the full width. */
  .ft__brand, .ft__grid > div:last-child { grid-column: 1 / -1; }
  .ft__legal { flex-direction: column; }
  .ft { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }

  .mbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex; align-items: center; gap: 14px;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--charcoal); color: var(--on-dark);
    box-shadow: 0 -1px 0 var(--hair-dark);
    transform: translateY(100%); visibility: hidden;
    transition: transform .5s var(--ease-out), visibility 0s linear .5s;
  }
  .mbar.is-on { transform: none; visibility: visible; transition: transform .5s var(--ease-out), visibility 0s; }
  .mbar__m { width: 46px; height: auto; flex: none; fill: var(--plate); }
  /* One call to action in the phone bar: Let's talk (Nils, 15.10.2026). */
  .mbar__cta { margin-left: auto; gap: 10px; padding-bottom: 4px; font-size: 17px; }
  .mbar__cta > .arrow { padding: 10px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .hero { height: auto; }
  .hero__stage { position: relative; height: 100svh; }
  .hero__photo { transform: none; }
  .js-rv .rv:not(.in), .js-rv .ledger__row:not(.in) > * { opacity: 1; transform: none; }
  .js-rv .ledger__row:not(.in)::before { transform: none; }
  .deeper:hover { transform: none; }
  .anatomy { height: auto; }
  .xf { position: relative; top: auto; height: auto; padding-block: 24px; }
  .xf__steps { display: block; }
  .xf__steps .anatomy__step { display: block; }
  .xf__steps .anatomy__step .anatomy__label, .xf__steps .anatomy__step:not(.is-current) .anatomy__label { display: flex; padding-bottom: 4px; }
  .xf__steps p { opacity: 1; transform: none; margin: 0 0 14px; }
  .xf__progress { display: none; }
  .xf__cta { opacity: 1; visibility: visible; transform: none; }
  .fxa__tool[data-stage="2"] .fxr__in { filter: blur(11px); }
  .map__arc { stroke-dashoffset: 0; }
  .map__pt, .map__hub, .map__chip { opacity: 1; }
  .map__pulses { display: none; }
  .figs.is-pending .fig::before, .figs.is-pending .fig::after { transform: none; }
  .nd__line { stroke-dashoffset: 0; }
  .flow::after { transform: none; }
}

/* ---------- Review build: draft strip ---------- */

.review-strip {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: var(--strip);
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px;
  background: #f0cfa6; color: #2b2d2d;
  font: 500 12px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .01em; text-align: center;
}
.review-strip b { font-weight: 700; }
@media (max-width: 760px) { .review-strip__long { display: none; } }


/* =====================================================================================================
   BRIEF VERSION — the Consolidated Copy & Design Update Brief of 12 October 2026, followed 1:1.
   Everything below overrides the draft's rules for the sections the brief changes.
   ===================================================================================================== */

/* ---------- 01 · Beyond the exchange rate: benchmark, execution, spread, deductions (brief §02) ---------- */
.xf { --pe: 0; --pf: 0; --pq: 0; }
.xf__big { max-width: 24ch; min-height: 2.06em; margin-left: auto; font-size: clamp(28px, min(2.6vw, 4.8svh), 46px); line-height: 1.03; letter-spacing: -.018em; white-space: normal; text-wrap: balance; }
.rl__name { top: 0; color: var(--on-dark); opacity: var(--pm); }
/* The rate you saw earlier: a marker, and a dashed level that runs up to the moment of execution. */
.rl__mark--saw { --o: var(--pn); left: 30%; top: 18.46%; }
.rl__mark--saw b { left: 50%; bottom: 14px; transform: translateX(-50%); }
.rl__guide { right: 30%; }
/* Execution: one vertical marker. The spot rate is agreed here and stays fixed. */
.rl__exec { position: absolute; left: 70%; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: var(--on-dark); transform-origin: 50% 0; transform: scaleY(var(--pe)); }
.rl__elab { position: absolute; left: calc(70% + 10px); top: 0; font: 400 13px/1 var(--f-serif); color: var(--on-dark); white-space: nowrap; opacity: var(--pe); }
/* Before execution the market moved: shown left of the marker, apart from the costs. */
.rl__col--t { left: calc(70% - 20px); width: 12px; }
/* Under the line, next to the marker, so the moving market never runs through it. */
.rl__lab--t { left: auto; right: calc(30% + 28px); top: calc(43.08% + 14px); transform: none; text-align: right; }
/* At execution: the benchmark at that moment, the provider's rate below it, the gap between them the spread. */
.rl__mark--bench { --o: var(--pb); left: 70%; top: 43.08%; }
.rl__col--s { left: calc(70% + 8px); width: 12px; transform: scaleY(var(--pb)); }
.rl__lab--s { left: calc(70% + 30px); opacity: var(--pb); }
.rl__fixed { position: absolute; left: 70%; right: 0; top: 66.15%; height: 2px; margin-top: -1px; background: var(--blue); transform-origin: 0 0; transform: scaleX(var(--pf)); }
.rl__flab { position: absolute; left: 85%; top: calc(66.15% + 8px); transform: translateX(-50%); font: 300 13px/1 var(--f-serif); color: var(--blue); white-space: nowrap; opacity: var(--pf); }
/* Fees and charges: deducted from what you receive, never a move of the market line. */
.rl__col--f { left: calc(70% + 8px); width: 12px; }
.rl__lab--f { left: calc(70% + 30px); }
/* The end: what you receive against the benchmark at execution (not the rate seen earlier). */
.rl__bench { position: absolute; left: 70%; right: 0; top: 43.08%; border-top: 1px dashed rgba(228, 228, 231, .7); transform-origin: 0 0; transform: scaleX(var(--pq)); }
.rl__gap { position: absolute; right: 0; top: 43.08%; height: 36.92%; width: 1px; background: var(--on-dark); transform-origin: 50% 0; transform: scaleY(var(--pq)); }
.rl__gap::before, .rl__gap::after { content: ""; position: absolute; right: 0; width: 8px; height: 1px; background: var(--on-dark); }
.rl__gap::before { top: 0; }
.rl__gap::after { bottom: 0; }
.rl__gaplab { position: absolute; right: 0; top: calc(80% + 28px); font: 400 13px/1.2 var(--f-serif); color: var(--on-dark); text-align: right; white-space: nowrap; opacity: var(--pq); }

/* ---------- 04 · Independent by design: larger diagram, the new line beneath it (brief §05) ---------- */
.indep--b .indep__lead { grid-column: 2 / span 6; grid-row: 1; align-self: center; }
.indep--b .indep__title { font-size: clamp(36px, min(3.4vw, 6.2svh), 60px); line-height: 1.02; letter-spacing: -.022em; }
.indep--b .indep__sub { color: var(--blue-ink-2); }
.indep--b .indep__copy { margin-top: clamp(18px, 3svh, 30px); max-width: 44ch; font: var(--body); }
.indep--b .indep__fig { grid-column: 8 / -1; grid-row: 1; }
.indep--b .indep__fig svg { width: 100%; max-height: calc(100svh - var(--hd-b) - 410px); }
.indep__cap { margin-top: 12px; text-align: right; font: 300 clamp(18px, 1.5vw, 24px)/1.3 var(--f-serif); color: var(--blue-ink); }
.indep--b .indep__points { margin-top: clamp(18px, 3svh, 44px); }
@media (min-width: 1101px) { .indep--b .indep__points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.indep--b .tbc { margin-left: 6px; font-size: 13px; vertical-align: middle; }

/* ---------- 06 · Industries: a selector, one statement each, nothing to leave for (brief §07) ---------- */
button.inds__item { width: 100%; margin: 0; padding-inline: 0; border: 0; border-bottom: 1px solid var(--hair-light); border-radius: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.chapter--dark button.inds__item { border-bottom-color: var(--hair-dark); }
.inds__item[aria-pressed="true"] { color: var(--on-dark); }
.inds__stmt { display: none; }

/* ---------- Let's talk (brief §09) ---------- */
.talk .chapter__grid { row-gap: 48px; }
.talk__book { grid-column: 1 / span 3; display: grid; gap: 18px; align-content: start; }
.talk__cal { grid-column: 4 / -1; }
.talk .cal { max-width: 860px; }  /* HubSpot's wide card (month and times side by side) at its own width */
.talk__form { grid-column: 1 / span 7; }
.talk__side { grid-column: 9 / -1; display: grid; gap: 18px; align-content: start; }
.talk__form, .talk__side { padding-top: clamp(32px, 5svh, 56px); border-top: 1px solid var(--hair-dark); }
.talk__title { font: 300 clamp(28px, min(2.6vw, 4.6svh), 44px)/1.05 var(--f-serif); letter-spacing: -.014em; }
.talk__fields { margin-top: 8px; }
.talk .field label { color: var(--on-dark-2); }
.talk .field__opt { color: rgba(228, 228, 231, .5); }
.talk .field input, .talk .field textarea {
  width: 100%; min-width: 0; padding: 10px 0 11px; background: transparent;
  border: 0; border-bottom: 1px solid rgba(228, 228, 231, .34); border-radius: 0;
  color: var(--on-dark); font: 300 clamp(19px, 1.5vw, 22px)/1.3 var(--f-serif); resize: vertical;
}
.talk .field input:focus, .talk .field textarea:focus { outline: none; border-bottom-color: var(--plate); box-shadow: 0 1px 0 var(--plate); }
.talk .field [aria-invalid="true"] { border-bottom-color: #e08a7a; }
.talk .consent { color: var(--on-dark-2); }
.talk .consent a { color: var(--on-dark); }
.talk .calc__error { color: #f0a493; }
.talk__done { margin-top: 16px; font: 300 17px/1.45 var(--f-serif); color: var(--on-dark-copy); outline: none; }
.talk__direct { display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--on-dark-2); }
.talk__direct a { text-decoration: none; }

@media (min-width: 1101px) {
  .approach > .chapter__grid { align-content: space-between; }
  .hcases > .chapter__grid { align-content: center; }
}
@media (max-width: 1100px) {
  .approach__title, .approach__intro { grid-column: 2 / -1; grid-row: auto; }
  .approach__intro { margin-top: 24px; }
  .indep--b .indep__lead, .indep--b .indep__fig { grid-column: 2 / -1; grid-row: auto; }
  .indep--b .indep__fig { margin-top: 32px; }
  .indep--b .indep__fig svg { max-height: none; }
  .hcases__head { grid-column: 2 / -1; }
  .talk__book, .talk__cal, .talk__form, .talk__side { grid-column: 1 / -1; }
  .talk__side { padding-top: 0; border-top: 0; }
  /* Phones and tablets: the chosen industry's statement opens under its name. */
  .inds__item[aria-pressed="true"] + .inds__stmt { display: block; padding: 2px 0 16px 68px; font: 300 16px/1.45 var(--f-serif); color: var(--on-dark-copy); }
}
@media (max-width: 900px) {
  .rl__long { display: none; }
  .rl__elab, .rl__flab, .rl__gaplab { font-size: 12px; }
  .rl__lab--t { right: calc(30% + 24px); }
  .rl__gaplab { top: calc(80% + 24px); white-space: normal; max-width: 30%; }
  .xf--brief .rl, .rl { margin-bottom: 18px; }
  .xf__big { font-size: clamp(24px, 6.6vw, 32px); max-width: none; margin-left: 0; }
}
@media (max-width: 760px) {
  .hcases__nav { display: none; }
}
/* Hidden steps and optional fields stay hidden even where a layout rule sets display. */
.an [hidden], .talk [hidden] { display: none !important; }
/* The draft calculator split its second step into two columns; the analysis keeps one. */
.fxa__tool.an[data-stage] { display: block; }
@media (max-width: 900px) {
  .rl__flab { display: none; }
  .rl__lab--s, .rl__lab--f { left: calc(70% + 24px); }
}


/* =====================================================================================================
   REVIEW CALL 13 OCTOBER 2026 (Ben Mitchell, Nils) and Nils' comments in the brief artifact.
   Sections 03 and 05 and the analysis tool come in three versions each; the site shows version 1,
   the option artifacts show all three.
   ===================================================================================================== */

/* ---------- Kept from the brief version (shared by the analysis head, the contact page and section 03) ---------- */
.fxa__copy { display: grid; gap: .7em; max-width: 52ch; margin-top: clamp(16px, 3svh, 28px); font: var(--body); color: var(--ink-2); }
.fxa__assure { margin-top: clamp(14px, 2.4svh, 22px); font: 400 14px/1.4 var(--f-sans); letter-spacing: .02em; color: var(--ink-2); }
.fxa__direct { margin-top: clamp(12px, 2.2svh, 22px); }
/* The booking calendar (HubSpot, embedded by site.js; Nils, 22.10.2026). The frame holds the calendar's height while it
   loads, so the page does not jump; the link under it opens the same calendar if the embed cannot load. */
.cal { min-width: 0; }
.cal__frame { position: relative; min-height: 615px; }
/* The page runs a dark colour scheme; a light one on the frame keeps HubSpot's page transparent around its card. */
.cal__frame iframe { position: relative; z-index: 1; display: block; min-width: 0 !important; color-scheme: light; }
.cal.is-loading .cal__frame::before { content: "Loading the calendar…"; position: absolute; inset: 0; display: grid; place-items: center; font: 300 16px/1.4 var(--f-serif); opacity: .6; }
.cal.is-failed .cal__frame, .cal.is-preview .cal__frame { min-height: 0; }
.cal__note { padding: 28px 24px; border: 1px dashed currentColor; font: 300 16px/1.45 var(--f-serif); opacity: .8; }
.cal__open { margin-top: 10px; font: 300 14px/1.4 var(--f-serif); opacity: .85; }
.cal__open a { color: inherit; text-underline-offset: 4px; }
.cal.is-failed .cal__open { font-size: 17px; opacity: 1; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Booking layer: the calendar opens where a booking button is clicked (Nils, 22.10.2026) ---------- */
.bookx { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: clamp(12px, 3svh, 32px) clamp(12px, 3vw, 40px); }
.bookx[hidden] { display: none; }
.bookx__scrim { position: absolute; inset: 0; background: rgba(24, 27, 27, .74); }
.bookx__panel {
  position: relative; width: min(100%, 940px); max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(18px, 2.4svh, 28px) clamp(18px, 2.4vw, 32px); background: var(--charcoal); color: var(--on-dark);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .7); animation: stepin .45s var(--ease-out);
}
.bookx__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(12px, 1.8svh, 20px); }
.bookx__title { font: 300 clamp(28px, min(2.6vw, 4.6svh), 40px)/1.05 var(--f-serif); letter-spacing: -.014em; }
.bookx__close {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--hair-dark);
  background: none; color: var(--on-dark); cursor: pointer; transition: border-color .25s var(--ease);
}
.bookx__close:hover, .bookx__close:focus-visible { border-color: var(--on-dark); }
.bookx__close .plus { transform: rotate(45deg); }
.bookx .cal { max-width: 860px; }
/* In the layer the new-tab link only shows when the embed cannot load, so a laptop screen holds the whole calendar. */
.bookx .cal:not(.is-failed):not(.is-preview) .cal__open { display: none; }
.bookx__alt { margin-top: 4px; font: 300 15px/1.45 var(--f-serif); color: var(--on-dark-2); }
.bookx__alt a { color: var(--on-dark); text-underline-offset: 4px; }
@media (max-width: 760px) {
  .bookx { padding: 0; place-items: stretch; }
  .bookx__panel { width: 100%; height: 100%; max-height: none; padding: 0 var(--gutter) calc(24px + env(safe-area-inset-bottom)); animation-name: rise; }
  .bookx__head {
    position: sticky; top: 0; z-index: 2; margin: 0 calc(-1 * var(--gutter)) 12px; padding: 10px var(--gutter);
    background: var(--charcoal); border-bottom: 1px solid var(--hair-dark);
  }
}
.approach__title { grid-column: 2 / span 7; }
.approach__intro { grid-column: 9 / -1; grid-row: 1; font: var(--body); color: var(--on-dark-copy); }

/* ---------- 01 · The copy beside the title, no subheading or line (as on the About page) ---------- */
.problem__copy { align-self: start; padding-top: clamp(6px, 1.4svh, 16px); border-top: 0; }
/* The stage's own headline sits where the chart title was; the example moved into the note. */
.xf__figure { grid-column: 1 / span 8; text-align: left; }
.xf__big { max-width: 21ch; min-height: 2.04em; margin-left: 0; font-size: clamp(30px, min(3vw, 5.6svh), 50px); line-height: 1.02; }
.xf__cap { margin-bottom: 4px; }
@media (min-width: 1101px) {
  /* 01 now opens with a short head; the chart follows straight after instead of a screen later. */
  .problem > .chapter__grid { min-height: 0; }
  .problem .anatomy { margin-top: clamp(24px, 4svh, 56px); }
}

/* ---------- 03 · Shared head: title left, intro right at the top, no line (as on the About page) ---------- */
.approach__intro { align-self: start; padding-top: clamp(6px, 1.4svh, 16px); border-top: 0; }

/* Version 1 · The line runs through: it draws with the scroll, each step lights as the line reaches it,
   and at the end it runs on to the edge, so nothing looks unfinished. Steps are "Step 1–4". */
.ap1 { --ap: 0; grid-column: 2 / -1; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); list-style: none; margin: clamp(40px, 8svh, 96px) 0 0; padding: 38px 0 0; }
.ap1::before, .ap1::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--hair-dark); }
.ap1::after { top: 4px; height: 3px; background: var(--plate); transform: scaleX(var(--ap)); transform-origin: 0 50%; }
.ap1__step { position: relative; opacity: .32; transition: opacity .6s var(--ease); }
.ap1__step.is-on, .ap1__step:hover, .ap1__step:focus-within { opacity: 1; }
.ap1__sq { position: absolute; left: 0; top: -38px; width: 12px; height: 12px; border: 1.5px solid var(--plate); background: var(--charcoal); transition: background .4s var(--ease), transform .5s var(--ease-out); }
.ap1__step.is-on .ap1__sq { background: var(--plate); }
.ap1__step.is-cur .ap1__sq { transform: scale(1.4); }
.ap1__no { display: block; font: 300 15px/1 var(--f-serif); color: var(--on-dark-2); }
.ap1__name { margin-top: 12px; font: 300 clamp(26px, min(2.3vw, 4.2svh), 38px)/1.08 var(--f-serif); letter-spacing: -.014em; }
.ap1__text { max-width: 30ch; margin-top: 12px; font: 300 clamp(16px, min(1.2vw, 2.2svh), 19px)/1.5 var(--f-serif); color: var(--on-dark-copy); }

/* Version 2 · Steps that open in turn: the open step takes the room, the line fills step by step and
   runs to the edge on the last one. Hover or tap opens a step; it advances on its own while in view. */
.ap2 { grid-column: 2 / -1; position: relative; margin-top: clamp(40px, 8svh, 96px); }
.ap2__list { display: flex; gap: var(--col-gap); list-style: none; margin: 0; padding: 0; }
.ap2__step { position: relative; flex: 1 1 0; min-width: 0; min-height: clamp(150px, 23svh, 220px); padding-top: 30px; transition: flex-grow .8s var(--ease-out); }
.ap2__step.is-on { flex-grow: 2.4; }
.ap2__bar { position: absolute; left: 0; right: calc(-1 * var(--col-gap)); top: 5px; height: 1px; background: var(--hair-dark); }
.ap2__step:last-child .ap2__bar { right: 0; }
.ap2__bar i { position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--plate); transform: scaleX(0); transform-origin: 0 50%; }
.ap2__step.is-done .ap2__bar i, .ap2.is-held .ap2__step.is-on .ap2__bar i { transform: none; }
.ap2.is-run .ap2__step.is-on .ap2__bar i { animation: ap2fill var(--ap2-t, 5s) linear forwards; }
@keyframes ap2fill { to { transform: none; } }
.ap2__head { margin: 0; font: inherit; }
.ap2__btn { display: flex; align-items: center; gap: 14px; width: 100%; padding: 0; border: 0; background: none; color: var(--on-dark-2); font: 300 clamp(24px, min(2.1vw, 3.9svh), 34px)/1.1 var(--f-serif); letter-spacing: -.012em; text-align: left; cursor: pointer; transition: color .3s var(--ease); }
.ap2__btn:hover, .ap2__step.is-on .ap2__btn { color: var(--on-dark); }
.ap2__name { transition: font-size .6s var(--ease-out); }
.ap2__step.is-on .ap2__name { font-size: clamp(30px, min(2.8vw, 5svh), 46px); }
.ap2__sq { position: absolute; left: 0; top: 0; width: 12px; height: 12px; border: 1.5px solid var(--plate); background: var(--charcoal); transition: background .35s var(--ease); }
.ap2__step.is-on .ap2__sq, .ap2__step.is-done .ap2__sq { background: var(--plate); }
.ap2__body { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .7s var(--ease-out), opacity .45s var(--ease); }
.ap2__step.is-on .ap2__body { max-height: 10em; opacity: 1; }
.ap2__body p { max-width: 36ch; padding-top: 14px; font: 300 clamp(17px, min(1.3vw, 2.4svh), 21px)/1.5 var(--f-serif); color: var(--on-dark-copy); }
.ap2__play { position: absolute; right: 0; bottom: 100%; margin-bottom: 18px; }

/* Version 3 · An ongoing loop: the line runs through the four stages and returns along the bottom
   ("as your requirements evolve"), so the process reads as a relationship, not a one-off. */
.ap3 { --ap3-in: 26px; grid-column: 2 / -1; position: relative; margin-top: clamp(40px, 8svh, 96px); padding-left: var(--ap3-in); }
.ap3__track { position: absolute; inset: 0; pointer-events: none; }
.ap3__svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.ap3__loop { fill: none; stroke: var(--hair-dark); stroke-width: 1; }
.ap3__trail { fill: none; stroke: var(--plate); stroke-width: 3; }
.ap3__dot { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--plate); box-shadow: 0 0 0 6px rgba(228, 228, 231, .12); will-change: transform; }
.ap3__list { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); list-style: none; margin: 0; padding: 38px 0 0; }
.ap3__step { position: relative; opacity: .38; transition: opacity .5s var(--ease); }
.ap3__step.is-on, .ap3__step:hover, .ap3__step:focus-within { opacity: 1; }
.ap3__sq { position: absolute; left: 0; top: -38px; width: 12px; height: 12px; margin: -6px 0 0 -6px; padding: 0; border: 1.5px solid var(--plate); background: var(--charcoal); cursor: pointer; transition: background .35s var(--ease); }
.ap3__sq::after { content: ""; position: absolute; inset: -10px; }
.ap3__step.is-on .ap3__sq { background: var(--plate); }
.ap3__name { font: 300 clamp(26px, min(2.3vw, 4.2svh), 38px)/1.08 var(--f-serif); letter-spacing: -.014em; }
.ap3__text { max-width: 30ch; margin-top: 12px; font: 300 clamp(16px, min(1.2vw, 2.2svh), 19px)/1.5 var(--f-serif); color: var(--on-dark-copy); }
.ap3__return { position: relative; display: flex; justify-content: center; height: 1px; margin-top: clamp(30px, 5svh, 52px); }
.ap3__return span { transform: translateY(-52%); padding: 0 18px; background: var(--charcoal); font: 300 clamp(16px, 1.2vw, 19px)/1 var(--f-serif); color: var(--on-dark-2); transition: color .4s var(--ease); }
.ap3.is-return .ap3__return span { color: var(--on-dark); }
.ap3__play { position: absolute; right: 0; bottom: 100%; margin-bottom: 18px; }

/* ---------- 02 · FX analysis: four details plus where to send it, a short working moment, then call or email ---------- */
.fxa.is-started .fxa__direct { display: none; }
.an {
  --an-ink: var(--ink); --an-ink-2: var(--ink-2); --an-hair: rgba(47, 50, 50, .24); --an-ph: rgba(47, 50, 50, .3); --an-bg: var(--plate);
  position: relative; color: var(--an-ink);
}
.an__form { display: block; }
.an__q { min-width: 0; margin: 0; padding: clamp(8px, 1.4svh, 13px) 0 clamp(7px, 1.2svh, 11px); border: 0; border-bottom: 1px solid var(--an-hair); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.an__q:focus-within { border-bottom-color: var(--an-ink); box-shadow: 0 1px 0 var(--an-ink); }
.an__l { float: left; width: 100%; padding: 0; font: 300 15px/1.3 var(--f-serif); color: var(--an-ink-2); }
.an__lq { display: none; }
.an__in { clear: both; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-top: 2px; font: 300 clamp(26px, min(2.4vw, 4.4svh), 38px)/1.2 var(--f-serif); letter-spacing: -.012em; }
.an__word { flex: none; font-size: .5em; color: var(--an-ink-2); }
.an__hint { margin-top: 3px; font: 300 14px/1.4 var(--f-serif); color: var(--an-ink-2); }
/* Date and time read as type, not as form controls; the native picker opens on click. */
.an__pick { position: relative; flex: none; display: inline-flex; cursor: pointer; }
.an__pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; color-scheme: light; cursor: pointer; }
.an__pick input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.an__pickv { border-bottom: 1px solid transparent; font-variant-numeric: lining-nums; white-space: nowrap; transition: border-color .25s var(--ease); }
.an__pick:hover .an__pickv { border-bottom-color: var(--an-hair); }
.an__pick:focus-within .an__pickv { border-bottom-color: var(--an-ink); }
.an__pickv.is-empty { color: var(--an-ph); }
.an__pick--time .an__pickv { font-size: .7em; }
.an__pick [aria-invalid="true"] + .an__pickv { color: #a33a2b; border-bottom-color: #a33a2b; }
.an__tzw { position: relative; flex: none; font-size: .46em; }
.an__tzw::after { content: ""; position: absolute; right: 2px; top: 50%; width: .4em; height: .4em; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; color: var(--an-ink-2); transform: translateY(-75%) rotate(45deg); pointer-events: none; }
.an__tz { appearance: none; -webkit-appearance: none; margin: 0; padding: 2px 1.2em 2px 0; border: 0; border-radius: 0; background: none; color: var(--an-ink-2); font: inherit; cursor: pointer; }
.an__tz option { color: #1d2020; }
.an .ccy { padding: 0 0 1px; font-size: 1em; background: none; border-bottom: 1px solid transparent; color: var(--an-ink); }
.an .ccy:hover, .an .ccy[aria-expanded="true"] { background: none; border-bottom-color: var(--an-ink); }
.an__swap, .an__unit { display: inline-flex; align-items: center; justify-content: center; margin: 0; border: 0; background: none; color: var(--an-ink-2); cursor: pointer; transition: color .25s var(--ease), border-color .25s var(--ease); }
.an__swap { align-self: center; width: 36px; height: 36px; margin-left: 6px; padding: 0; border: 1px solid var(--an-hair); }
.an__swap svg, .an__unit svg { width: 16px; height: 11px; overflow: visible; transition: transform .5s var(--ease-out); }
.an__swap path, .an__unit path { fill: none; stroke: currentColor; stroke-width: 1.3; }
.an__swap:hover, .an__unit:hover { color: var(--an-ink); border-color: var(--an-ink); }
.an__swap.is-turn svg, .an__unit.is-turn svg { transform: rotate(180deg); }
.an__unit { flex: none; gap: 8px; padding: 4px 0; font: 300 .46em/1.2 var(--f-serif); }
.an__numw { flex: 1 1 4.2em; min-width: 0; }
.an__num { width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--an-ink); font: inherit; letter-spacing: inherit; font-variant-numeric: lining-nums tabular-nums; }
.an__num:focus { outline: none; }
.an__num::placeholder { color: var(--an-ph); }
.an__num[aria-invalid="true"] { color: #a33a2b; }
.an__side { flex: none; display: inline-flex; gap: .9em; font-size: .46em; }
.an__side button { position: relative; margin: 0; padding: 2px 0; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--an-ink-2); font: inherit; cursor: pointer; }
.an__side button + button::before { content: ""; position: absolute; left: -.5em; top: 22%; bottom: 22%; width: 1px; background: var(--an-hair); }
.an__side button[aria-pressed="true"] { color: var(--an-ink); border-bottom-color: var(--an-ink); }
.an__ccy { flex: none; font-size: .7em; color: var(--an-ink-2); }
.an__contact { gap: 6px 28px; }
.an__f { flex: 1 1 11em; min-width: 0; }
.an__f input { width: 100%; margin: 0; padding: 2px 0 3px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: none; color: var(--an-ink); font: 300 .62em/1.3 var(--f-serif); letter-spacing: 0; }
.an__f input:focus { outline: none; border-bottom-color: var(--an-ink); }
.an__f input::placeholder { color: var(--an-ph); }
.an__f input[aria-invalid="true"] { border-bottom-color: #a33a2b; }
.an__privacy { margin-top: 10px; font: 300 14px/1.45 var(--f-serif); color: var(--an-ink-2); }
.an__privacy a { color: var(--an-ink); text-underline-offset: 3px; }
.an .calc__error { color: #a33a2b; }
.an__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: clamp(12px, 2.2svh, 22px); }
.an__prev, .an__next { display: none; }

/* The live line: one square per detail, filled as soon as the detail is in; the line follows and runs on
   to the end once everything is there. The same line carries the working moment after "Analyse". */
.an__track { --line: 0%; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; margin: 0 0 clamp(6px, 1.2svh, 12px); padding: 0; }
.an__track::before, .an__track::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--an-hair); }
.an__track::after { right: auto; top: 4px; height: 3px; width: var(--line); background: var(--an-ink); transition: width .7s var(--ease-out); }
.an__track button { display: grid; justify-items: start; gap: 7px; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: default; }
.an__track i { position: relative; z-index: 1; width: 12px; height: 12px; border: 1.5px solid var(--an-ink); background: var(--an-bg); transition: background .35s var(--ease); }
.an__track li.is-done i { background: var(--an-ink); }
.an__track li.is-pop i { animation: anpop .5s var(--ease-out); }
@keyframes anpop { 40% { transform: scale(1.55); } }
.an__tk { font: 300 13px/1.2 var(--f-serif); color: var(--an-ink-2); }
.an__tv { display: none; }

/* The working moment: four honest lines, each ticking off with a value the page really worked out. */
.an__run, .an__ready, .an__sent { animation: stepin .6s var(--ease-out); }
.an__h { padding: 0; font: 300 clamp(26px, min(2.3vw, 4.2svh), 36px)/1.15 var(--f-serif); letter-spacing: -.012em; color: var(--an-ink); outline: none; }
.an__runbar { position: relative; display: block; height: 1px; margin: clamp(14px, 2.4svh, 22px) 0 2px; background: var(--an-hair); overflow: hidden; }
.an__runbar i { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: var(--an-ink); transform: scaleX(0); transform-origin: 0 50%; }
.an.is-running .an__runbar i { transform: none; transition: transform var(--an-run, 3.2s) linear; }
.an__lines { list-style: none; margin: 0; padding: 0; }
.an__lines li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: baseline; gap: 16px; padding: clamp(10px, 1.8svh, 16px) 0; border-bottom: 1px solid var(--an-hair); opacity: .3; transition: opacity .4s var(--ease); }
.an__lines li.is-on { opacity: 1; }
.an__lines i { align-self: center; width: 11px; height: 11px; border: 1.5px solid var(--an-ink); transition: background .3s var(--ease); }
.an__lines li.is-on:not(.is-done) i { animation: anwork .9s var(--ease) infinite; }
.an__lines li.is-done i { background: var(--an-ink); }
@keyframes anwork { 50% { background: var(--an-ink); transform: scale(.7); } }
.an__lk { font: 300 clamp(17px, 1.3vw, 20px)/1.3 var(--f-serif); }
.an__lv { font: 400 clamp(15px, 1.15vw, 18px)/1.3 var(--f-serif); font-variant-numeric: lining-nums tabular-nums; text-align: right; opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .55s var(--ease-out); }
.an__lines li.is-done .an__lv { opacity: 1; transform: none; }

/* Ready: the visitor's own numbers in a ticket (nothing estimated), what the analysis will show, then a choice. */
.an__rtext { max-width: 54ch; margin-top: 10px; font: 300 clamp(16px, min(1.2vw, 2.2svh), 19px)/1.5 var(--f-serif); color: var(--an-ink-2); }
.an__ticket { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; margin: clamp(12px, 2.2svh, 20px) 0 0; }
.an__ticket div { display: grid; gap: 3px; padding: clamp(8px, 1.4svh, 12px) 0; border-top: 1px solid var(--an-hair); }
.an__ticket dt { font: 300 13px/1.2 var(--f-serif); color: var(--an-ink-2); }
.an__ticket dd { margin: 0; font: 400 clamp(16px, 1.25vw, 19px)/1.25 var(--f-serif); font-variant-numeric: lining-nums tabular-nums; }
.an__k { font: 300 14px/1.3 var(--f-serif); color: var(--an-ink-2); }
.an__shows { margin-top: clamp(10px, 1.8svh, 16px); }
.an__shows ul { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 6px 0 0; padding: 0; }
.an__shows li { display: inline-flex; align-items: center; gap: 10px; font: 300 clamp(15px, 1.15vw, 18px)/1.3 var(--f-serif); }
.an__shows li::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--blue); }
.an__choicek { margin-top: clamp(14px, 2.6svh, 24px); }
.an__ready > .calc__back { margin-top: 8px; }
/* In the tool the calendar keeps HubSpot's compact card (the month, then the times) at the card's own width. */
.an .cal { max-width: 400px; margin-top: 10px; }
.an__alt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin-top: 16px; font: 300 16px/1.4 var(--f-serif); color: var(--an-ink-2); }
.an__alt .calc__back { color: var(--an-ink); }
.an__sentcall { margin-top: 20px; }

/* Option B · One detail at a time: one question per screen, the line above becomes the summary. */
.an--b .an__track { margin-bottom: clamp(26px, 5svh, 52px); }
.an--b .an__track button { gap: 6px; }
.an--b .an__track li.is-done button, .an--b .an__track li.is-cur button { cursor: pointer; }
.an--b .an__track li.is-cur i { box-shadow: 0 0 0 3px var(--an-bg), 0 0 0 4px var(--an-ink); }
.an--b .an__track li.is-cur .an__tk { color: var(--an-ink); }
.an--b .an__tv { display: block; max-width: calc(100% - 8px); min-height: 1.3em; overflow: hidden; font: 400 13px/1.3 var(--f-serif); color: var(--an-ink); white-space: nowrap; text-overflow: ellipsis; }
.an--b .an__q { display: none; padding: 0; border-bottom: 0; box-shadow: none; }
.an--b .an__q.is-cur { display: block; animation: stepin .5s var(--ease-out); }
.an--b .an__lr { display: none; }
.an--b .an__lq { display: block; margin-bottom: clamp(14px, 2.4svh, 22px); font: 300 clamp(28px, min(2.6vw, 4.8svh), 42px)/1.12 var(--f-serif); letter-spacing: -.014em; color: var(--an-ink); }
.an--b .an__in { padding-bottom: 8px; border-bottom: 1px solid var(--an-ink); font-size: clamp(30px, min(3vw, 5.4svh), 46px); }
.an--b .an__hint { margin-top: 10px; }
.an--b .an__privacy, .an--b .an__go { display: none; }
.an--b[data-step="4"] .an__privacy { display: block; }
.an--b[data-step="4"] .an__go { display: flex; flex: 1; width: auto; }
.an--b .an__next { display: inline-flex; }
.an--b[data-step="4"] .an__next { display: none; }
.an--b .an__prev { display: inline-block; }
.an--b[data-step="0"] .an__prev { visibility: hidden; }
.an--b .an__actions { justify-content: space-between; margin-top: clamp(22px, 4svh, 40px); }

/* Option C · The M ticket: a dark panel under an M window; while the request is prepared the window
   opens over the whole panel, as in the hero, then closes again for the result. */
.an__m { display: none; }
.an--c {
  --an-ink: var(--on-dark); --an-ink-2: var(--on-dark-2); --an-hair: rgba(228, 228, 231, .22); --an-ph: rgba(228, 228, 231, .32); --an-bg: var(--charcoal);
  --mh: clamp(70px, 11svh, 108px);
  padding: 0 clamp(20px, 2.2vw, 36px) clamp(20px, 3svh, 34px); overflow: hidden; background: var(--charcoal); color: var(--an-ink);
  box-shadow: 0 34px 60px -40px rgba(10, 12, 12, .7); color-scheme: dark;
}
.an--c .an__m { display: block; position: absolute; left: 0; right: 0; top: 0; z-index: 0; height: var(--mh); overflow: hidden; transition: height .9s var(--ease-out); }
.an--c .an__mwin { position: absolute; inset: 0; -webkit-mask: url("../assets/brand/m-mask.svg") center / auto 64% no-repeat; mask: url("../assets/brand/m-mask.svg") center / auto 64% no-repeat; transition: -webkit-mask-size 1.1s var(--ease-out), mask-size 1.1s var(--ease-out); }
.an--c .an__mwin img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.an--c .an__m::after { content: ""; position: absolute; inset: 0; background: rgba(43, 45, 45, 0); transition: background .9s var(--ease); }
.an--c > :not(.an__m):not(.ccy-pop) { position: relative; z-index: 1; }
.an--c .an__form, .an--c .an__ready, .an--c .an__sent { padding-top: calc(var(--mh) + clamp(8px, 1.4svh, 14px)); }
.an--c .an__run { padding-top: clamp(28px, 5svh, 52px); }
.an--c.is-running .an__m { height: 100%; }
.an--c.is-running .an__mwin { -webkit-mask-size: auto 1400%; mask-size: auto 1400%; }
.an--c.is-running .an__m::after { background: rgba(43, 45, 45, .62); }
.an--c .an__track { display: none; }
.an--c .an__pick input { color-scheme: dark; }
.an--c .btn--solid { --c: var(--plate); --a: var(--charcoal); }
.an--c .calc__back { color: var(--an-ink-2); }
.an--c .calc__back:hover { color: var(--an-ink); }
.an--c .calc__error { color: #f0a493; }
.an--c .an__num[aria-invalid="true"], .an--c .an__pick [aria-invalid="true"] + .an__pickv { color: #f0a493; }
.an--c .field label { color: var(--on-dark-2); }
.an--c .field__opt { color: rgba(228, 228, 231, .5); }
.an--c .field input { color: var(--on-dark); border-bottom-color: rgba(228, 228, 231, .34); }
.an--c .field input:focus { border-bottom-color: var(--plate); box-shadow: 0 1px 0 var(--plate); }

/* ---------- 05 · Case studies: picture and the challenge on the homepage, the full case on its own page ---------- */
.hcases__head { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 40px; }
.hcases__head > div:first-child { max-width: 64ch; }
.hcases__lead { margin-top: 10px; }
.hcases__end { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.hcases__nav { display: flex; gap: 8px; }
.hcases__nav button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ink); background: none; color: var(--ink); cursor: pointer; }
.hcases__nav button:first-child svg { transform: scaleX(-1); }
.hcases__nav button:disabled { opacity: .3; cursor: default; }
.cs__label { font: 400 14px/1.2 var(--f-serif); }
.cs__k { display: block; font: 300 13px/1.2 var(--f-serif); color: var(--ink-2); }
.cs__more { display: inline-flex; align-items: center; gap: 12px; font: 300 18px/1.2 var(--f-serif); }
.cs__more .arrow { box-sizing: content-box; padding: 10px 8px; background: var(--ink); color: var(--plate); transition: transform .4s var(--ease-out); }

/* Option 1 · Photo cards: three in view, the arrows move one card. */
.cs1 { grid-column: 2 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: max(270px, calc((100% - 2 * var(--col-gap)) / 3)); column-gap: var(--col-gap); list-style: none; margin: clamp(16px, 2.8svh, 34px) 0 0; padding: 0 0 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(47, 50, 50, .4) transparent; }
.cs1__item { scroll-snap-align: start; }
.cs1__card { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; }
.cs1__photo { position: relative; display: block; height: clamp(150px, 26svh, 280px); overflow: hidden; background: #1b1d1d; }
.cs1__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.cs1__card:hover .cs1__img, .cs1__card:focus-visible .cs1__img { transform: scale(1.045); }
.cs1__photo .cs__label { position: absolute; left: 0; bottom: 0; padding: 7px 12px 8px; background: var(--plate); color: var(--ink); }
.cs1__title { margin-top: 14px; font: 300 clamp(19px, min(1.55vw, 2.9svh), 24px)/1.2 var(--f-serif); letter-spacing: -.01em; text-wrap: balance; }
.cs1__card .cs__k { margin-top: 10px; }
.cs1__teaser { margin-top: 3px; font: 300 clamp(15px, min(1.1vw, 2svh), 17px)/1.45 var(--f-serif); color: var(--ink-2); }
.cs1__card .cs__more { margin-top: auto; padding-top: 12px; }
.cs1__card:hover .cs__more .arrow, .cs1__card:focus-visible .cs__more .arrow { transform: translateX(6px); }
.cs1__item.is-todo .cs1__card { opacity: .55; }
.cs1__item.is-todo .cs1__img, .cs2__item.is-todo .cs2__img, .cs3__slide.is-todo .cs3__img { filter: grayscale(1); }

/* Option 2 · Photo grid: all six at once; the challenge opens over the photo on hover (always shown on touch). */
.cs2 { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); list-style: none; margin: clamp(16px, 2.8svh, 34px) 0 0; padding: 0; }
.cs2__tile { position: relative; display: block; height: clamp(170px, calc((100svh - var(--hd-b) - 2 * var(--sec-pad) - 150px) / 2), 320px); overflow: hidden; background: #1b1d1d; color: var(--plate); text-decoration: none; }
.cs2__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.cs2__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 22, 22, 0) 25%, rgba(20, 22, 22, .82) 100%); transition: background .5s var(--ease); }
.cs2__text { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; padding: clamp(14px, 2svh, 20px) clamp(14px, 1.4vw, 22px); }
.cs2 .cs__label { color: rgba(228, 228, 231, .78); }
.cs2__title { font: 300 clamp(19px, min(1.5vw, 2.8svh), 24px)/1.18 var(--f-serif); letter-spacing: -.01em; text-wrap: balance; }
.cs2__more { display: grid; gap: 6px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s var(--ease-out), opacity .4s var(--ease); }
.cs2__tile:hover .cs2__more, .cs2__tile:focus-visible .cs2__more { max-height: 14em; opacity: 1; }
.cs2__tile:hover .cs2__shade, .cs2__tile:focus-visible .cs2__shade { background: rgba(20, 22, 22, .74); }
.cs2__tile:hover .cs2__img, .cs2__tile:focus-visible .cs2__img { transform: scale(1.05); }
.cs2 .cs__k { margin-top: 4px; color: rgba(228, 228, 231, .7); }
.cs2__teaser { font: 300 clamp(14px, 1.05vw, 16px)/1.45 var(--f-serif); color: var(--on-dark-copy); }
.cs2 .cs__more { margin-top: 6px; font-size: 16px; }
.cs2 .cs__more .arrow { background: var(--plate); color: var(--charcoal); }
.cs2__item.is-todo .cs2__tile { opacity: .6; }
@media (hover: none) {
  .cs2__more { max-height: none; opacity: 1; }
  .cs2__shade { background: rgba(20, 22, 22, .62); }
}

/* Option 3 · Feature and index: one case large, the others named underneath; it moves on by itself. */
.cs3 { grid-column: 2 / -1; margin-top: clamp(16px, 2.8svh, 34px); }
.cs3__stage { display: grid; }
.cs3__slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--col-gap); opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s linear .6s; }
.cs3__slide.is-on { opacity: 1; visibility: visible; transition: opacity .6s var(--ease); }
.cs3__photo { position: relative; height: clamp(210px, 38svh, 400px); overflow: hidden; background: #1b1d1d; }
.cs3__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7s linear; }
.cs3__slide.is-on .cs3__img { transform: none; }
.cs3__photo .cs__label { position: absolute; left: 0; bottom: 0; padding: 7px 12px 8px; background: var(--plate); color: var(--ink); }
.cs3__text { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.cs3__title { font: 300 clamp(26px, min(2.5vw, 4.6svh), 42px)/1.08 var(--f-serif); letter-spacing: -.016em; text-wrap: balance; }
.cs3__text .cs__k { margin-top: 8px; }
.cs3__teaser { max-width: 46ch; font: 300 clamp(16px, min(1.2vw, 2.2svh), 19px)/1.5 var(--f-serif); color: var(--ink-2); }
.cs3__cta { align-self: flex-start; margin-top: 10px; }
.cs3__foot { display: flex; align-items: flex-start; gap: 20px; margin-top: clamp(14px, 2.4svh, 26px); }
.cs3__index { flex: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 14px; list-style: none; margin: 0; padding: 0; }
.cs3__pick { display: grid; gap: 10px; width: 100%; margin: 0; padding: 0 0 4px; border: 0; background: none; color: var(--ink-2); font: 300 15px/1.25 var(--f-serif); text-align: left; cursor: pointer; transition: color .25s var(--ease); }
.cs3__pick:hover, .cs3__pick.is-on { color: var(--ink); }
.cs3__bar { position: relative; height: 1px; background: var(--hair-light); }
.cs3__bar i { position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.cs3__pick.is-on .cs3__bar i { transform: none; }
.cs3.is-run .cs3__pick.is-on .cs3__bar i { transform: scaleX(0); animation: ap2fill 6.5s linear forwards; }
.cs3__play { flex: none; margin-top: -14px; }

/* The case-studies page: one case per screen, photo and story side by side. */
.cphero .phero__title { max-width: none; }
.cphero .phero__lead { max-width: 58ch; }
.cindex { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: clamp(22px, 3.6svh, 40px); }
.cindex__link { padding-bottom: 4px; font: 300 clamp(17px, 1.3vw, 20px)/1.3 var(--f-serif); color: var(--ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .45s var(--ease-out); }
.cindex__link:hover { background-size: 0 1px; background-position: 100% 100%; }
.cstudy .chapter__grid { align-items: start; row-gap: clamp(18px, 3svh, 36px); }
.cstudy__title { grid-column: 2 / span 9; grid-row: 1; font: 300 clamp(30px, min(3.2vw, 5.8svh), 54px)/1.04 var(--f-serif); letter-spacing: -.018em; text-wrap: balance; }
.cstudy__photo { grid-column: 2 / span 3; grid-row: 2; margin: 0; }
.cstudy__img { width: 100%; height: clamp(200px, 40svh, 420px); object-fit: cover; }
.cstudy__photo figcaption { margin-top: 10px; font: 400 15px/1.3 var(--f-serif); opacity: .8; }
.cstudy__body { grid-column: 5 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: clamp(14px, 2.4svh, 24px); }
.cstudy__block { padding-top: 14px; border-top: 1px solid var(--hair-dark); }
.chapter--plate .cstudy__block { border-top-color: var(--hair-light); }
.chapter--blue .cstudy__block { border-top-color: var(--hair-blue); }
.cstudy__k { font: 400 clamp(18px, 1.4vw, 22px)/1.2 var(--f-serif); }
.cstudy__block p, .cstudy__block li { font: 300 clamp(15px, min(1.1vw, 2.05svh), 18px)/1.5 var(--f-serif); }
.cstudy__block p { margin-top: 10px; }
.cstudy__block ul { display: grid; gap: 7px; list-style: none; margin: 10px 0 0; padding: 0; }
.cstudy__block li { position: relative; padding-left: 18px; }
.cstudy__block li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: currentColor; opacity: .7; }
.cstudy__block--result { grid-column: 1 / -1; }
.cstudy__block--result p { font: 300 clamp(19px, 1.5vw, 24px)/1.35 var(--f-serif); }
.chapter--dark .cstudy__block p, .chapter--dark .cstudy__block li { color: var(--on-dark-copy); }
.chapter--plate .cstudy__block p, .chapter--plate .cstudy__block li { color: var(--ink-2); }
.chapter--blue .cstudy__block p, .chapter--blue .cstudy__block li { color: var(--blue-ink-2); }
.cstudy--todo .cstudy__todo { grid-column: 2 / span 7; font: var(--body); opacity: .8; }
@media (min-width: 1101px) {
  .cstudy > .chapter__grid { align-content: center; }
}

/* ---------- 04 · Independent by design: no line under the diagram, labels on one baseline ---------- */
.indep--b .indep__fig svg { max-height: calc(100svh - var(--hd-b) - 380px); }

/* ---------- Tablets and phones ---------- */
@media (max-width: 1100px) {
  .ap1, .ap3__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .ap1::after { display: none; }
  .ap1__step { opacity: 1; }
  .ap1__step .ap1__sq { background: var(--plate); }
  .ap2__list { flex-wrap: wrap; }
  .ap3 { padding-left: 0; }
  .ap3__track { display: none; }
  .ap3__step { opacity: 1; padding-top: 16px; border-top: 1px solid var(--hair-dark); }
  .ap3__sq { display: none; }
  .ap3__list { padding-top: 0; }
  /* No loop is drawn here, so its label would only repeat the end of the Support text (Nils, 21.10.2026). */
  .ap3__return { display: none; }
  .ap3__play { display: none; }
  .hcases__head { grid-column: 2 / -1; }
  .cs2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs3__slide { grid-template-columns: minmax(0, 1fr); }
  .cs3__index { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .cstudy__title, .cstudy__photo, .cstudy__body { grid-column: 2 / -1; grid-row: auto; }
  .cstudy__img { height: clamp(200px, 46vw, 380px); }
}
@media (max-width: 900px) {
  .xf__figure { grid-row: 1; }
  .xf__viz { grid-row: 2; }
  .xf__steps, .xf__progress { grid-row: 3; }
  .xf__end { grid-row: 4; }
  .xf__big { font-size: clamp(26px, 7.4vw, 36px); }
}
@media (max-width: 760px) {
  .ap1, .ap3__list { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  .ap1::before { display: none; }
  .ap1__step { padding-top: 16px; border-top: 1px solid var(--hair-dark); }
  .ap1__sq { display: none; }
  .ap2__list { flex-direction: column; gap: 0; }
  .ap2__step { min-height: 0; padding: 16px 0 14px; border-top: 1px solid var(--hair-dark); }
  .ap2__bar, .ap2__play { display: none; }
  .ap2__sq { position: static; }
  .ap2__step.is-on .ap2__name { font-size: clamp(26px, 7vw, 32px); }
  .an__in { font-size: clamp(24px, 7vw, 30px); }
  .an__track .an__tk { font-size: 12px; }
  .an__ticket { grid-template-columns: minmax(0, 1fr); }
  .an__lines li { grid-template-columns: 12px minmax(0, 1fr); }
  .an__lv { grid-column: 2; text-align: left; }
  .an--b .an__tk { display: none; }
  .an--b .an__tv { display: none; }
  .hcases__nav { display: none; }
  .cs1 { grid-auto-columns: minmax(250px, 82%); }
  .cs2 { grid-template-columns: minmax(0, 1fr); }
  .cs2__tile { height: 260px; }
  .cs3__index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cstudy__body { grid-template-columns: minmax(0, 1fr); }
}

/* Case pages: a next step after every second case; the analysis says plainly what this draft does not send. */
.cstudy__cta { grid-column: 1 / -1; margin-top: 4px; }
.an__lines li.is-draft i { border-style: dashed; }
.an__lines li.is-draft .an__lv { opacity: 1; transform: none; color: var(--an-ink-2); font-style: italic; }
.an__runerror { margin-top: 14px; }

/* Wide screens: each row's label beside its details (a typeset form), so all five rows fit one screen. */
@media (min-width: 761px) {
  /* A legend only leaves the fieldset's border when it floats; the details sit beside it (a flex box keeps clear of floats). */
  .an:not(.an--b) { --lw: clamp(92px, 7.6vw, 118px); }
  .an:not(.an--b) .an__l { width: var(--lw); margin-right: 14px; padding-top: clamp(9px, .9vw, 15px); line-height: 1.25; }
  .an:not(.an--b) .an__in { clear: none; padding-top: 0; }
  .an:not(.an--b) .an__hint { margin-left: calc(var(--lw) + 14px); }
  .an:not(.an--b) .an__q::after { content: ""; display: block; clear: both; }
  .an__pick--date .an__pickv { font-size: .9em; }
}
.an__in { font-size: clamp(24px, min(2.2vw, 4svh), 36px); }
.an__f { flex: 1 1 150px; }
.an__f input { font-size: .66em; }
/* 05: the lead on one line, a little less photo on short screens. */
.hcases__head > div:first-child { flex: 1; max-width: none; }
.cs1__photo { height: clamp(140px, 19svh, 280px); }
.cs1__title { margin-top: 10px; }
.cs1__card .cs__k { margin-top: 8px; }
.cs1__card .cs__more { padding-top: 8px; }
/* Case pages: the photo column carries the next step, so the story keeps its room. */
.cstudy__side { grid-column: 2 / span 3; grid-row: 2; display: grid; gap: clamp(16px, 2.6svh, 28px); align-content: start; }
.cstudy__side .cstudy__photo { grid-column: auto; grid-row: auto; }
.cstudy__side .cstudy__cta { margin-top: 0; }
@media (max-width: 1100px) { .cstudy__side { grid-column: 2 / -1; grid-row: auto; } }
@media (min-width: 1101px) {
  /* Every stage of the analysis starts at the top, level with the title (the old calculator sat at the foot). */
  .fxa__tool.an { align-self: start; }
}
/* Look C: a slimmer M band and slightly smaller details, so the dark panel stays within one screen. */
.an--c { --mh: clamp(58px, 8.4svh, 88px); }
.an--c .an__mwin { -webkit-mask-size: auto 78%; mask-size: auto 78%; }
.an--c .an__in { font-size: clamp(22px, min(1.95vw, 3.6svh), 32px); }
.an--c .an__q { padding-block: clamp(6px, 1.1svh, 10px); }
/* Look C after the working moment: the M has opened and gives the panel to the result. */
.an--c:not([data-stage="form"]):not(.is-running) .an__m { height: 0; }
.an--c .an__ready, .an--c .an__sent { padding-top: clamp(22px, 3.4svh, 34px); }
.an--c .an__ticket div { padding-block: clamp(6px, 1.1svh, 10px); }
.an--c .an__h { font-size: clamp(22px, min(1.9vw, 3.5svh), 30px); }
.an--c .an__rtext { font-size: clamp(15px, min(1.05vw, 2svh), 17px); }
.an--c .an__ticket dd { font-size: clamp(15px, 1.1vw, 17px); }
.an--c .an__shows li { font-size: clamp(14px, 1vw, 16px); }
.an--c .an__choicek { margin-top: clamp(10px, 1.8svh, 18px); }

/* =====================================================================================================
   VERSION 4 (15 October 2026): Nils chose 03 version 3, 05 option 1 and look A for the analysis tool,
   with more pop and less of a financial-services feel; the time is optional; the squares fill in order.
   ===================================================================================================== */

/* 02 on the brand's blue-grey: the tool reads less like a bank form and more like the rest of the site. */
.analysis.chapter--blue .fxa__copy, .analysis.chapter--blue .fxa__assure { color: var(--blue-ink-2); }
.chapter--blue .an:not(.an--c) { --an-ink: var(--blue-ink); --an-ink-2: var(--blue-ink-2); --an-hair: var(--hair-blue); --an-ph: rgba(29, 40, 40, .66); --an-bg: var(--blue); }
.chapter--blue .an:not(.an--c) .btn--solid, .analysis.chapter--blue .btn--solid { --c: var(--blue-ink); --a: var(--plate); }
.chapter--blue .an:not(.an--c) .calc__error, .chapter--blue .an:not(.an--c) .an__num[aria-invalid="true"], .chapter--blue .an:not(.an--c) .an__pick [aria-invalid="true"] + .an__pickv { color: #6b1709; }
.chapter--blue .an:not(.an--c) .an__pick [aria-invalid="true"] + .an__pickv { border-bottom-color: #6b1709; }
.chapter--blue .an:not(.an--c) .an__shows li::before { background: var(--an-ink); }
.chapter--blue .an:not(.an--c) .calc__back { color: var(--blue-ink-2); }
.analysis.chapter--blue .fxa .field label { color: var(--blue-ink-2); }
.analysis.chapter--blue .fxa .field input { border-bottom-color: rgba(29, 40, 40, .4); color: var(--blue-ink); }

/* The time: optional, behind a small control, so nobody feels asked for something they don't know. */
.an__addtime { flex: none; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 3px 0; border: 0; border-bottom: 1px dashed currentColor; background: none; color: var(--an-ink-2); font: 300 .46em/1.2 var(--f-serif); cursor: pointer; transition: color .25s var(--ease); }
.an__addtime svg { width: 10px; height: 10px; flex: none; }
.an__addtime path, .an__notime path { fill: none; stroke: currentColor; stroke-width: 1.4; }
.an__addtime:hover, .an__addtime:focus-visible { color: var(--an-ink); border-bottom-style: solid; }
.an__timegroup { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.an__notime { align-self: center; display: inline-grid; place-items: center; width: 26px; height: 26px; margin: 0; padding: 0; border: 1px solid var(--an-hair); background: none; color: var(--an-ink-2); cursor: pointer; }
.an__notime svg { width: 9px; height: 9px; }
.an__notime:hover, .an__notime:focus-visible { color: var(--an-ink); border-color: var(--an-ink); }

/* The visitor's own result, live: what they received (or paid) at their rate, counting to the new figure. */
.an__out { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; width: fit-content; max-width: 100%; margin: 8px 0 2px; padding: 7px 14px 8px; background: var(--plate); color: var(--ink); }
.an__outk { font: 300 14px/1.2 var(--f-serif); color: var(--ink-2); }
.an__outv { font: 400 clamp(20px, 1.7vw, 26px)/1.1 var(--f-serif); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; }
.an__out.is-new { animation: anout .6s var(--ease-out); }
@keyframes anout { from { opacity: 0; transform: translateY(6px); } }
@media (min-width: 761px) {
  .an:not(.an--b) .an__out { margin-left: calc(var(--lw) + 14px); }
}

/* ---------- Nils' comments in Version 4 (15.10.2026), first done in the artifact, here tuned to one screen ---------- */
/* 01: the chart sits lower, so the benchmark name and "The rate you saw" no longer crowd each other. */
.rl { margin-top: clamp(34px, 5.4svh, 56px); }
.rl__name { top: clamp(-36px, -3.8svh, -24px); }
/* 02 (look A): each detail in its own quiet box instead of a run of hairlines, so the form reads calmer. */
.an--a .an__q {
  padding: clamp(7px, 1.05svh, 12px) clamp(12px, 1.2vw, 18px);
  background: rgba(228, 228, 231, .3); border: 1px solid rgba(29, 40, 40, .14);
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.an--a .an__q + .an__q { margin-top: 5px; }
.an--a .an__q:focus-within { background: rgba(228, 228, 231, .52); border-color: var(--an-ink); box-shadow: none; }
.an--a .an__hint { font-size: 13px; opacity: .8; }
.an--a .an__privacy { margin-top: 12px; }
/* 04: a bigger diagram on every screen; the headline steps down a size so it keeps to two lines in its narrower column. */
.indep--b .indep__lead { grid-column: 2 / span 5; }
.indep--b .indep__fig { grid-column: 7 / -1; }
.indep--b .indep__title { font-size: clamp(34px, min(3vw, 5.7svh), 54px); }
.indep--b .indep__fig svg { width: 100%; max-height: max(340px, calc(100svh - var(--hd-b) - 290px)); }
@media (max-width: 1100px) {
  .indep--b .indep__lead, .indep--b .indep__fig { grid-column: 2 / -1; }
  .indep--b .indep__fig svg { max-height: none; }
}
@media (max-width: 760px) {
  .indep--b .indep__fig { margin: 36px calc(var(--gutter) * -.5) 0; }
  .nd__label { font-size: 21px; }
}

/* ---------- Phones (15.10.2026): mobile check of Version 5 ---------- */
@media (max-width: 900px) {
  /* 01: the pinned chart starts at the top and fits the phone screen, so its headline is never cut off. */
  .xf { align-content: start; padding-top: clamp(10px, 2svh, 18px); row-gap: 12px; }
  .rl { height: clamp(130px, 21svh, 190px); margin-top: 30px; }
  .xf__steps p { margin-top: 8px; font-size: 16px; line-height: 1.45; }
  .xf__note { font-size: 12.5px; }
}
@media (max-width: 900px) and (max-height: 720px) {
  /* iPhone SE and other short screens: a little more compact, so the note stays above the phone bar. */
  .xf__big { font-size: clamp(22px, 6.4vw, 28px); }
  .rl { height: 118px; margin-top: 26px; }
  .xf__steps p { font-size: 14.5px; line-height: 1.4; }
  .xf__note { font-size: 12px; line-height: 1.35; }
}
@media (max-width: 760px) {
  /* 02: the small controls get a finger-sized target; the time zone at 16px so the iPhone does not zoom in. */
  .an__word { font-size: 15px; }
  .an__side { gap: 16px; font-size: 15px; }
  .an__side button { padding: 9px 0; }
  .an__side button + button::before { left: -8px; }
  .an__unit { padding: 9px 0; font-size: 14px; }
  .an__addtime { padding: 8px 0; font-size: 15px; }
  .an__tzw { font-size: 16px; }
  .an__notime { width: 34px; height: 34px; }
  /* 05: the lead keeps the full width; "All case studies" goes underneath (it squeezed the lead on wide phones). */
  .hcases__head > div:first-child { flex-basis: 100%; }
  /* Case pages: the next step follows the story instead of standing between photo and text. */
  .cstudy > .chapter__grid { position: relative; display: flex; flex-direction: column; }
  .cstudy .chapter__index { position: absolute; top: .35em; right: var(--gutter); margin: 0; }
  .cstudy .cstudy__title { order: 0; padding-right: 56px; }
  .cstudy__side { display: contents; }
  .cstudy__photo { order: 1; }
  .cstudy__body { order: 2; margin-top: 22px; }
  .cstudy__cta { order: 3; margin-top: 22px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .cstudy__side { display: contents; }
  .cstudy__side .cstudy__photo { grid-column: 2 / -1; }
  .cstudy__cta { order: 9; grid-column: 2 / -1; }
}

/* ---------- Nils' comments in the phone preview (15.10.2026) ---------- */
/* 01: all parts of the rate line in one layer. On larger screens it is the chart's own box; phones widen it. */
.xf { --pz: 0; }
.rl__in { position: absolute; inset: 0; }
@media (max-width: 760px) {
  /* From the spread on, the chart zooms in as you scroll and the execution marker moves left, but only until "The rate
     you saw" reaches the left edge, so that point stays in view (Nils, second round); its label then starts at the dot
     instead of centring over it. The benchmark's name stays at the left edge. */
  .anatomy__stage { overflow-x: clip; }
  .rl__in { right: auto; left: calc(-37% * var(--pz)); width: calc(100% + 37% * var(--pz)); }
  .rl__mark--saw b { transform: translateX(calc(-50% * (1 - var(--pz)))); }
  .rl__lab { max-width: none; white-space: nowrap; }
  /* More air between the labels and the lines and bars they name. */
  .rl__lab--s, .rl__lab--f { left: calc(70% + 34px); }
  .rl__lab--t { right: calc(30% + 36px); top: calc(43.08% + 18px); }
  .rl__elab { left: calc(70% + 14px); }
  /* What you receive labels the line it starts, left of the marker; the difference sits under its bracket, in two lines. */
  .rl__alab { right: calc(30% + 16px); top: calc(80% - 6px); text-align: right; }
  .rl__gaplab { top: calc(80% + 12px); right: 0; max-width: calc(30% - 12px); line-height: 1.12; }
  /* The spread and the charges get bands of about the same height, so each label has air above and below it
     (illustrative, not to scale, as the note says). */
  .rl__lab { line-height: 1; }
  .rl__col--s { height: 18.92%; }
  .rl__lab--s { top: 52.54%; }
  .rl__fixed { top: 62%; }
  .rl__col--f { top: 62%; height: 18%; }
  .rl__lab--f { top: 71%; }
  /* The headline takes the full width, so every step's headline fits on two lines and the chart keeps its place. */
  .xf__figure { grid-column: 1 / -1; }
  .xf__big { max-width: none; }
  /* On short screens the two labels left of the marker would read as one: the earlier one gives way. */
  .rl__lab--t { opacity: calc(var(--ct) * (1 - var(--pr))); }

  /* Opening: as in Version 5, only the call to action sits a little lower (Nils, second round: the photo panel of
     Version 6 is out). */
  .hero__ctas { margin-top: 18px; }

  /* After the first screen the logo's M shows the opening's photo, as if cut out of it; the letters stay as they are. */
  .lockup { position: relative; }
  .lockup::after {
    content: ""; position: absolute; inset: 0; clip-path: inset(17% 0 20% 0);
    background: url("../assets/img/uk-terminal-800.jpg") 40% 60% / 260% auto no-repeat;
    opacity: 0; transition: opacity .5s var(--ease);
  }
  .hd.is-photo .lockup::after { opacity: 1; }
  /* Option (review only): the photo in the bar's M instead. */
  .lg-bottom .lockup::after { content: none; }
  .lg-bottom .mbar__m {
    width: 62px; height: 21px; fill: transparent;
    background: url("../assets/img/uk-terminal-800.jpg") 40% 60% / 600% auto no-repeat;
    -webkit-mask: url("../assets/brand/m-mask.svg") center / contain no-repeat;
    mask: url("../assets/brand/m-mask.svg") center / contain no-repeat;
  }
}
@supports not (overflow: clip) {
  @media (max-width: 760px) { .anatomy__stage { overflow: hidden; } }
}

/* ---------- Nils' comments in the phone preview of Version 7 (16.10.2026) ----------
   First done in that artifact by another Claude (larger body copy, more air under the rules in the lists; live state in
   archive/v7-live/), here taken into the source, limited to what this page has, and joined with the industries and the
   founding year. */
@media (max-width: 760px) {
  /* Body text a size larger on phones; the headlines stay as they are. */
  :root { --body: 300 19px/1.5 var(--f-serif); }
  .ap3__text, .points__item p, .indep__points p, .inds__card-text, .faq__a p, .cstudy__block p, .cstudy__block li { font-size: 19px; }
  .hero__sub, .indep__copy { font-size: 20px; }
  .intro__direct, .inds__name { font-size: 18px; }
  .cs1__teaser { font-size: 17px; }
  .reach__note, .fig__label, .deeper__desc, .xf__cap, .consent, .calc__error, .field label { font-size: 16.5px; }
  .an__privacy { font-size: 15px; }
  .an--a .an__hint { font-size: 14px; }
  .xf__steps p { font-size: 17px; }
  .xf__note { font-size: 13px; }
  /* 01 stays on one screen with the larger text: two pixels less between its rows. */
  .xf { row-gap: 10px; }
  /* More air under the rule that opens each item in the lists. */
  .ap3__step, .points__item, .indep__points li, .problem__copy { padding-top: 28px; }
  .statement__line { padding-top: 26px; }
  .ap3__text { margin-top: 14px; }
  /* 06: the chosen industry's statement opens with air under its line, the same for every industry. */
  .inds__item[aria-pressed="true"] + .inds__stmt { padding-top: 16px; font-size: 19px; }
  /* About: the founding year sits clear of the line above it. */
  .split__fact { padding-top: 26px; }
}
@media (max-width: 760px) and (max-height: 720px) {
  /* iPhone SE: the statement keeps its call to action above the phone bar. */
  .statement__line { padding-top: 20px; }
}

/* ---------- Guy's observations, passed on by Ben and Nils (20.10.2026) ---------- */
/* The M windows outside the hero: the photo stays unmasked; an SVG plate in the background colour with an M-shaped hole
   lies over it, as in the hero. site.js grows the hole from 84 to 100 % as the window comes into view. */
.mwin__plate { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mwin__fill { fill: var(--charcoal); }
/* The first line now reads "Your foreign exchange should work harder" (about 19.2 times the type size wide): on laptop and
   desktop the type sets itself so that line stays one line and the opening keeps its two-line headline. */
@media (min-width: 1025px) and (orientation: landscape) {
  .hero__title { font-size: clamp(40px, min(5.6vw, 9.6svh, calc((min(100vw, var(--maxw)) - 2 * var(--gutter)) / 19.6)), 104px); }
}
/* Tablets and phones: the longer headline wraps into even lines; on phones a little smaller, so it keeps to four lines and
   the M window stays on the first screen. */
@media (max-width: 1024px), (orientation: portrait) {
  .hero__title { text-wrap: balance; }
}
@media (max-width: 760px) {
  .hero__title { font-size: clamp(38px, 11.2vw, 46px); }
}

/* ---------- 02 · FX analysis: the entry (Nils, 20.10.2026: option 2 of the entry options, with the rate as an option) ----------
   Guy found the entry messy; this one asks for what the bank's confirmation shows. A crisp label over a field that looks like
   a field; example values small and pale, so they never read as data. The :is() lists keep the options page's variants. */
/* Shared: a crisp label over a field that looks like a field; example values small and pale, so they never read as data. */
.an:is(.an--d, .an--e, .an--f, .an--g, .an--h) .an__q { padding: 0; border: 0; box-shadow: none; }
.an:is(.an--d, .an--e, .an--f, .an--g, .an--h) .an__hint, .an:is(.an--d, .an--e, .an--f, .an--g, .an--h) .an__out { margin-left: 0; }
.an:is(.an--d, .an--e, .an--f, .an--g, .an--h) .an__hint { margin-top: 7px; font-size: 13.5px; opacity: 1; }
.anx__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2svh, 22px) 18px; }
.anx__q--wide { grid-column: 1 / -1; }
.anx__lab { float: left; width: 100%; margin-bottom: 8px; padding: 0; font: 600 11.5px/1.2 var(--f-sans); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; color: var(--an-ink-2); }
.anx__lab + * { clear: both; }
.anx__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.anx__box {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 14px;
  background: rgba(228, 228, 231, .42); border: 1px solid rgba(29, 40, 40, .2); color: var(--an-ink);
  font: 300 22px/1.2 var(--f-serif); font-variant-numeric: lining-nums;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.anx__box:hover { border-color: rgba(29, 40, 40, .45); }
.anx__box:focus-within, .anx__box[aria-expanded="true"] { background: rgba(228, 228, 231, .78); border-color: var(--an-ink); }
.an:is(.an--d, .an--e, .an--f, .an--g, .an--h) .an__numw { flex: 1 1 12em; }
.an:is(.an--d, .an--e, .an--f, .an--g, .an--h) .an__num, .an:is(.an--d, .an--e, .an--f, .an--g, .an--h) .an__f input { min-height: 52px; padding: 0; font: 300 22px/1.2 var(--f-serif); }
.an:is(.an--d, .an--e, .an--f, .an--g, .an--h) .an__f { flex: 1 1 12em; }
.an:is(.an--d, .an--e, .an--f, .an--g, .an--h) .an__f input { width: 100%; border: 0; }
.an:is(.an--d, .an--e, .an--f, .an--g, .an--h) .an__num::placeholder, .an:is(.an--d, .an--e, .an--f, .an--g, .an--h) .an__f input::placeholder { color: rgba(29, 40, 40, .45); font-size: 17px; }
.an:is(.an--d, .an--e, .an--f, .an--g, .an--h) .an__pick { flex: 1 1 12em; justify-content: space-between; }
.an:is(.an--d, .an--e, .an--f, .an--g, .an--h) .an__pickv { border: 0; }
.an:is(.an--d, .an--e, .an--f, .an--g, .an--h) .an__pickv.is-empty { color: rgba(29, 40, 40, .45); font-size: 17px; }
.anx__ico { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .7; }
.an:is(.an--d, .an--e, .an--f, .an--g, .an--h) .ccy { min-width: 6.2em; justify-content: space-between; padding: 0 14px; font: 300 22px/1.2 var(--f-serif); }
.an:is(.an--d, .an--e, .an--f, .an--g, .an--h) .ccy:hover { background: rgba(228, 228, 231, .6); }
/* Sold and bought share the row, the swap between them. */
.anx__pair { flex-wrap: nowrap; }
.an:is(.an--d, .an--f) .anx__pair .ccy { flex: 1 1 0; min-width: 0; }
.anx__mini { font: 300 16px/1.2 var(--f-serif); color: var(--an-ink-2); }
.an:is(.an--d, .an--e, .an--f, .an--g, .an--h) .anx__swap { width: 42px; height: 42px; margin: 0; border-color: rgba(29, 40, 40, .25); }
.anx__fix .an__num { flex: 1 1 auto; min-width: 0; }
.anx__unit { flex: none; font: 300 16px/1.2 var(--f-serif); color: var(--an-ink-2); white-space: nowrap; }
.anx__fix--pre .anx__unit { padding-right: 10px; border-right: 1px solid rgba(29, 40, 40, .2); }
.anx__link {
  display: inline-block; text-align: left; margin: 8px 0 0; padding: 0; border: 0; background: none; color: var(--an-ink-2);
  font: 300 15px/1.35 var(--f-serif); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer;
}
.anx__link:hover { color: var(--an-ink); }
.an:is(.an--d, .an--e, .an--f, .an--g, .an--h) .an__unit.anx__link { gap: 0; font-size: 15px; }
.anx__row--time { margin-top: 2px; }
.anx__time { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.anx__time .anx__box { min-height: 44px; font-size: 18px; }
.anx__time .an__tzw { font-size: 16px; }
.anx__x { display: inline-grid; place-items: center; width: 36px; height: 36px; margin: 0; border: 0; background: none; color: var(--an-ink-2); cursor: pointer; }
.anx__x svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 1.4; }
.anx__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.anx__two .anx__box { display: flex; }
.an:is(.an--d, .an--e, .an--f, .an--g, .an--h) .an__privacy { margin-top: 16px; }
.an:is(.an--d, .an--e, .an--f, .an--g, .an--h) .an__out { margin-top: 10px; }

/* E: what you sold, what you received and the rate, side by side; the live line shows what follows from them. */
.anx__amt { flex-wrap: nowrap; }
.anx__amt .anx__ccybtn { flex: none; }
.anx__amt .an__numw { flex: 1 1 auto; min-width: 0; }
.anx__result { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; min-height: 0; }
.anx__result .an__out { margin: 0; }
.anx__result .anx__link { margin: 0; }

.anx__opt { font-weight: 400; letter-spacing: .06em; opacity: .75; }
.an.an--e .anx__either { margin-top: 0; }
.an.an--e .anx__amt .ccy { min-width: 4.4em; }
.an.an--e .anx__result { min-height: 0; }
@media (max-width: 760px) {
  .anx__grid, .anx__two { grid-template-columns: minmax(0, 1fr); }
  .anx__box, .an:is(.an--d, .an--e, .an--f, .an--g, .an--h) .ccy { font-size: 20px; }
  .an:is(.an--d, .an--e, .an--f, .an--g, .an--h) .an__num, .an:is(.an--d, .an--e, .an--f, .an--g, .an--h) .an__f input { font-size: 20px; }
}


/* ==========================================================================
   Live additions (The Presence, 16.10.2026, updated 22.10.2026 for version 12)
   – appended by integrieren.py. Archivo self-hosted (variable, latin +
   latin-ext, SIL OFL), legal pages and 404.
   ========================================================================== */
@font-face { font-family: "Archivo"; src: url("../assets/fonts/archivo/archivo-latin-ext-wdth-wght.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; src: url("../assets/fonts/archivo/archivo-latin-wdth-wght.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Legal pages: the hero stays short so the text starts on the first screen. */
@media (min-width: 1101px) {
  .phero--legal { min-height: 0; }
  .phero--legal > .wrap > .phero__title { margin-top: 0; margin-bottom: 0; }
  .phero--legal > .wrap > .phero__lead { margin-top: clamp(24px, min(3vw, 4svh), 40px); margin-bottom: 0; }
  .chapter.legal { min-height: 0; }
}
.legal { padding-top: clamp(32px, 4vw, 64px); border-top: 1px solid var(--hair-light); }
.legal__body { max-width: 70ch; display: grid; gap: .85em; font: 300 clamp(17px, 1.25vw, 20px)/1.55 var(--f-serif); color: var(--ink-2); }
.legal__body h2 { margin-top: 1.4em; font: 400 clamp(21px, 1.6vw, 26px)/1.25 var(--f-serif); letter-spacing: -.01em; color: var(--ink); }
.legal__body h2:first-of-type { margin-top: .6em; }
.legal__body ul { display: grid; gap: .5em; list-style: none; margin: 0; padding: 0; }
.legal__body li { position: relative; padding-left: 20px; }
.legal__body li::before { content: ""; position: absolute; left: 0; top: .66em; width: 6px; height: 6px; background: currentColor; opacity: .7; }
.legal__body a { color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; overflow-wrap: anywhere; }
.legal__meta { font: 400 13px/1.3 var(--f-sans); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }

/* 404 */
.phero__actions { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; margin-top: clamp(24px, 3.6vw, 44px); }