/* Marlmont site stylesheet (2026-10-18 redesign, round four).
   The redesign's concise structure in the original site's consultancy language: the original page edge and section rhythm,
   white grounds, whole bordered cards with pictures, icon discs and a link at the foot, Navy panels with the blurred-tower
   wash, Literata in its display cut, Inter for text, the original buttons, header and footer.
   One file for the whole site; pages load nothing else except the cookie notice and the question widget. */

/* ---------- 1. Tokens ---------- */
@font-face { font-family: "Literata"; src: url("/fonts/Literata-Variable.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("/fonts/Literata-Italic-Variable.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/Inter-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --navy: #062543; --navy-3: #11406F;
  --ink: #062543; --text: #33475B; --muted: #5B6B78; --faint: #8593A0;
  --line: #D9DEE4; --line-dark: rgba(255, 255, 255, .16);
  --paper: #FFFFFF; --grey: #FBFCFD;
  --accent: #1F5F9F; --accent-dark: #9CCBF0;
  --serif: "Literata", ui-serif, Georgia, "Times New Roman", serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* the original page edge (css/layout.css + theme.css): 24px on a phone, 30 from 640, 44 from 1024, 56 from 1440, the
     container capped at 1760 with its gutter inside; one gap of 5.8vw between sections, as on the original */
  --max: 1760px; --gut: 24px; --g: 24px;
  --sec: clamp(64px, 5.8vw, 104px);
  --line-2: #B9C3CD; --tint: #FBFCFD;   /* the one tint: the pale blue #F7F9FB at half strength (2026-10-18, his request; back from the warm grey earlier the same day); --grey is the same colour; used sparingly, for emphasis or to break up a lot of white */
  --pad: clamp(22px, 1.9vw, 34px);      /* one inner padding for every card and cell */
  --pad-l: clamp(28px, 2.6vw, 44px);    /* and one for the larger panels */
  --inner: 1280px;   /* a narrower measure, kept for later use; the homepage runs every section full width (2026-10-18) */
  --hdr: 80px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --wash: url("/img/brand/wash-a.webp");
  /* names the cookie notice and the question widget read */
  --white: #FFFFFF; --grey-1: #FBFCFD; --grey-2: #E6E4DE; --slate: #5B6B78; --blue-deep: #11406F; --radius: 2px;
  --shadow-min: 0 1px 2px rgba(6, 37, 67, .08), 0 3px 10px -6px rgba(6, 37, 67, .16);
  --font-serif: var(--serif); --font-sans: var(--sans); --serif-weight: 420;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 17px/1.62 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "lnum" 1; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
p, li { text-wrap: pretty; }   /* no word left alone on a last line */
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: #CFE2F4; color: var(--navy); }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 12px 18px; background: var(--navy); color: #fff; font-weight: 600; transition: top .2s; }
.skip:focus { top: 12px; }
.icon { width: 24px; height: 24px; flex: none; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }   /* the spam trap in the sign-up form */

/* ---------- 3. Type: Literata in its display cut for headings, as on the original ---------- */
.h1, .h2, .h3, .h4, .serif { font-family: var(--serif); font-weight: 420; color: var(--ink); text-wrap: balance; }
.h1 { font-size: clamp(40px, 3.96vw, 66px); line-height: 1.06; letter-spacing: -.016em; font-variation-settings: "opsz" 72; }
.h2 { font-size: clamp(32px, 3.15vw, 52px); line-height: 1.13; letter-spacing: -.018em; font-variation-settings: "opsz" 72; }
.h3 { font-size: clamp(23px, 1.75vw, 29px); line-height: 1.27; letter-spacing: -.008em; font-variation-settings: "opsz" 36; }
.h4 { font-size: 21px; line-height: 1.3; letter-spacing: -.004em; font-variation-settings: "opsz" 24; }
.lede { font-size: clamp(17px, 1.2vw, 19px); line-height: 1.6; color: var(--text); max-width: 60ch; text-wrap: pretty; }
.meta { color: var(--muted); font-size: 14px; font-weight: 500; }
.note { font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.note--under { margin-top: 14px; }   /* a note under a table or box, at its original spacing (a larger gap was tried 2026-10-19 and taken back) */
.hl { color: var(--accent); }
.on-dark { color: rgba(255, 255, 255, .86); }
.on-dark .h1, .on-dark .h2, .on-dark .h3, .on-dark .h4 { color: #fff; }
.on-dark .lede { color: rgba(255, 255, 255, .84); }
.on-dark .note, .on-dark .meta { color: rgba(255, 255, 255, .64); }
.on-dark .hl { color: var(--accent-dark); }

/* ---------- 4. Layout ---------- */
:root { --gut: 24px; --split: clamp(40px, 5vw, 92px); }   /* --split: the one gap between words and the block beside them, in every such section (2026-10-19; a little wider the same day) */
@media (min-width: 640px) { :root { --gut: 30px; } }
@media (min-width: 1024px) { :root { --gut: 44px; } }
@media (min-width: 1440px) { :root { --gut: 56px; } }
.wrap { width: min(100% - 2 * var(--gut), var(--max) - 2 * var(--gut)); margin-inline: auto; }
/* every section runs the full page width, on the nav's edges (2026-10-18); --cw is that width, so pieces inside can be sized in proportion to it */
main .wrap { --cw: min(100vw - 2 * var(--gut), var(--max) - 2 * var(--gut)); }
/* every section sits on white and opens with the same gap; the last one closes with it too (the original's rhythm) */
.sec { padding-top: var(--sec); }
main > .sec:last-child { padding-bottom: var(--sec); }
/* a full-bleed row inside .wrap that runs off the right edge of the window */
.bleed-r { margin-right: calc(50% - 50vw); }
/* card groups need not run edge to edge: they sit halfway in from the page edge; headings and their text stay on the edges */
.inner { max-width: calc((100% + var(--inner)) / 2); margin-inline: auto; }   /* halfway between the 1280 measure and the page edge */
.grid { display: grid; gap: clamp(20px, 1.8vw, 28px); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.grid--2 { --cols: 2; } .grid--3 { --cols: 3; } .grid--4 { --cols: 4; }
.stack { display: grid; gap: var(--gap, 20px); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.actions--c { justify-content: center; }
.mt-l { margin-top: clamp(36px, 3.6vw, 56px); }

/* section heads: centered, or heading left with the text beside it */
.shead { display: grid; gap: 20px; max-width: 960px; margin-bottom: clamp(32px, 2.8vw, 48px); }
.shead--c { margin-inline: auto; text-align: center; justify-items: center; }
.shead--split { max-width: none; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 20px var(--g); }   /* the paragraph beside the heading's foot (top alignment was tried 2026-10-19 and taken back) */
.shead--split .h2 { max-width: 28ch; }
.shead--split .shead__side { display: grid; gap: 20px; justify-items: start; padding-bottom: 6px; }
.shead--row { max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; }

/* ---------- 5. Buttons: the original's (46px, slim, square, an arrow), and its hover: a fill that slides in from the left ---------- */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 46px; padding: 11px 18px; border: 1px solid var(--navy); border-radius: 2px; background: var(--navy); color: #fff; font: 550 15px/22px var(--sans); white-space: nowrap; --fill: var(--navy-3); transition: color .35s var(--ease), border-color .35s var(--ease); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fill); transform: scaleX(0); transform-origin: left center; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.btn:hover::before { transform: scaleX(1); }
.btn:hover { border-color: var(--fill); }
.btn .icon { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn--light { background: #fff; border-color: #fff; color: var(--navy); --fill: #DCE7F2; }
.btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); --fill: var(--navy); }
.btn--outline:hover { color: #fff; }
.btn--outline-light { background: transparent; color: #fff; border-color: #fff; --fill: #fff; }
.btn--outline-light:hover { color: var(--navy); }
.btn--block { width: 100%; }
.link { display: inline; color: var(--navy); font: 550 16px/22px var(--sans); }   /* inline, so a link that wraps keeps its chevron beside the last word */
.link .icon { display: inline-block; width: 10px; height: 10px; margin-left: 9px; vertical-align: 1px; transition: transform .3s var(--ease); }
.link:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.link:hover .icon { transform: translateX(3px); }
.nw { white-space: nowrap; }   /* a link's last word and its chevron, held together by the builder (core.keep_chevron, 2026-10-21) */
.on-dark .link, .hero .link { color: #fff; }
.arrow-btn { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line); background: #fff; color: var(--navy); transition: background .2s, border-color .2s, color .2s, opacity .2s; }
.arrow-btn:hover:not([disabled]) { background: var(--navy); border-color: var(--navy); color: #fff; }
.arrow-btn[disabled] { opacity: .35; cursor: default; }
.arrow-btn .icon { width: 18px; height: 18px; }
.arrow-btn--prev .icon { transform: scaleX(-1); }

/* ---------- 6. Header (the original's: clear over the Navy hero, white once the page moves) ---------- */
.hdr { position: sticky; top: 0; z-index: 140; height: var(--hdr); color: var(--navy); background: #fff; border-bottom: 1px solid var(--line); transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
html:not(.menu-open):not(.drawer-open) .has-dark-hero .hdr:not(.is-solid) { background: transparent; color: #fff; border-color: transparent; }
.hdr__in { display: flex; align-items: center; gap: 32px; height: 100%; }
.logo { display: block; width: 119px; height: 20px; flex: none; color: inherit; background: currentColor; -webkit-mask: url("/img/logo.svg") no-repeat left center / contain; mask: url("/img/logo.svg") no-repeat left center / contain; }
.nav { display: none; margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 30px; }
.nav__top { position: relative; display: inline-flex; align-items: center; gap: 7px; height: var(--hdr); padding: 0; border: 0; background: none; color: inherit; font: 550 14px/20px var(--sans); }
.nav__top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 26px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav__top:hover::after, .nav__item[data-open] .nav__top::after, .nav__top[aria-current="page"]::after { transform: scaleX(1); }
.nav__top .icon { width: 10px; height: 10px; transition: transform .25s var(--ease); }
.nav__item[data-open] .nav__top .icon { transform: rotate(180deg); }
.hdr__right { display: flex; align-items: center; gap: 28px; }
.hdr__login { font: 550 14px/20px var(--sans); }
.hdr__login:hover { text-decoration: underline; text-underline-offset: 5px; }
/* the header's Exploring fit button is solid (2026-10-18): Navy on the white header, white over a dark hero; its fill wipes a shade on hover */
.hdr__right .btn { min-height: 46px; padding: 12px 18px; font-size: 14px; line-height: 20px; gap: 16px; background: var(--navy); color: #fff; border-color: var(--navy); --fill: var(--navy-3); }
.hdr__right .btn:hover { color: #fff; border-color: var(--navy-3); }
html:not(.menu-open):not(.drawer-open) .has-dark-hero .hdr:not(.is-solid) .hdr__right .btn { background: #fff; color: var(--navy); border-color: #fff; --fill: #DCE7F2; }
html:not(.menu-open):not(.drawer-open) .has-dark-hero .hdr:not(.is-solid) .hdr__right .btn:hover { color: var(--navy); border-color: #DCE7F2; }

/* the menu: a full-width panel under the header, laid out like Belkins' (tiles above, grouped links below, a featured card beside) */
.panel { position: fixed; left: 0; right: 0; top: var(--hdr); z-index: 70; color: var(--navy); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(6, 37, 67, .35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s var(--ease), transform .28s var(--ease), visibility 0s .28s; }
.nav__item[data-open] .panel { opacity: 1; visibility: visible; transform: none; transition: opacity .22s var(--ease), transform .28s var(--ease), visibility 0s; }
.scrim { position: fixed; inset: var(--hdr) 0 0; z-index: 135; background: rgba(6, 37, 67, .45); opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.scrim.is-on { opacity: 1; visibility: visible; transition: opacity .25s, visibility 0s; }
/* the menu panel (2026-10-18): the original's lead + link columns + feature, merged with the new design's discs, tint and picture card, on one grid */
.panel__in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); column-gap: clamp(28px, 3vw, 56px); row-gap: 12px; padding-block: 40px; }
/* one row grid across the panel: the items (subgrid rows) and the feature; the lead column runs down beside them */
.panel__lead { grid-column: 1; grid-row: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; }
.panel__main { grid-column: 2; grid-row: 1 / span var(--mr, 5); display: grid; grid-template-columns: repeat(var(--tc, 2), minmax(0, 1fr)); grid-template-rows: subgrid; column-gap: 12px; }
.panel__main .panel__label { grid-column: 1 / -1; align-self: end; margin: 0; }
.panel__main--narrow { grid-template-columns: minmax(0, calc(50% - 6px)); }   /* one column of boxes, as wide as a box in the other menus */
/* two labelled columns of boxes (Insights: Writing, then Tools beside it, 2026-10-22): each label heads its own column and its boxes run down under it */
.panel__main--split { grid-auto-flow: column; }
.panel__main--split .panel__label { grid-column: auto; }
.panel__list { display: contents; }
.panel__hub { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); font: 420 clamp(26px, 2vw, 32px)/1.15 var(--serif); font-variation-settings: "opsz" 48; letter-spacing: -.01em; }
.panel__hub:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }   /* no arrow on the title (2026-10-18) */
.panel__intro { display: flex; flex-direction: column; align-items: flex-start; }
.panel__intro > .link { margin-top: 21px; }   /* the page link under the tagline */
/* the lead's rhythm, measured on the ink (tmp/rollout2/leadgap.mjs): 12px from title to tagline, then 24px to the page link and 24px to the points; the margins allow for each line's leading */
.panel__lead p { max-width: 40ch; margin-top: 15px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.panel__foot { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 23px; }
.panel__foot > .btn { margin-top: 20px; }   /* the call to action a set 44px under the points in every menu (24px gap + 20px), How we work's spacing (2026-10-19; it was pinned to the panel's foot, which left up to 200px in the taller menus) */
.panel__points { display: grid; gap: 9px; }
.panel__points li { display: flex; gap: 10px; align-items: flex-start; color: var(--navy); font-size: 14px; line-height: 1.45; }
.panel__points .icon { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--accent); }
.panel__label { margin-bottom: 12px; color: var(--muted); font: 500 13.5px/1.4 var(--sans); }
.pitem { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--line); background: #fff; transition: background .2s, border-color .2s; }
.pitem:hover { background: var(--tint); border-color: #C9CFD6; }
.pitem__icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 1px solid var(--line-2); border-radius: 50%; color: var(--navy); transition: background .25s, color .25s, border-color .25s; }
.pitem__icon .icon { width: 16px; height: 16px; }
.pitem:hover .pitem__icon { background: #EDF1F5; border-color: #C9CFD6; }   /* the circle greys softly on hover (never fills Navy, 2026-10-18) */
.pitem__t { display: block; color: var(--navy); font: 600 14.5px/1.35 var(--sans); }
.pitem__t { text-decoration: underline 1px transparent; text-underline-offset: 4px; transition: text-decoration-color .25s var(--ease); }
.pitem:hover .pitem__t { text-decoration-color: currentColor; }   /* the title underlines and its arrow moves on, like the site's other links */
.pitem__t .icon { display: inline-block; width: 10px; height: 10px; margin-left: 6px; vertical-align: 1px; transition: transform .3s var(--ease); }   /* inline, beside the last word */
.pitem:hover .pitem__t .icon { transform: translateX(3px); }
.pitem__d { display: block; margin-top: 3px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
/* the feature: the homepage hero cards' treatment (picture, Navy fall, kicker, serif title, a call to action); it leads to the menu's main page */
.panel__feature { position: relative; grid-column: 3; grid-row: 1 / -1; display: block; min-height: 340px; overflow: hidden; color: #fff; isolation: isolate; }
.panel__feature .pic { position: absolute; inset: 0; }
.panel__feature .pic > img { transition: transform 1.2s var(--ease); }
.panel__feature:hover .pic > img { transform: scale(1.04); }
.panel__feature .pic::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6, 37, 67, 0) 28%, rgba(6, 37, 67, .88)); }
.panel__fbody { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 24px; display: grid; gap: 10px; justify-items: start; }
.panel__fbody small { color: rgba(255, 255, 255, .88); font: 500 13px/18px var(--sans); }
.panel__fbody b { font: 420 23px/29px var(--serif); font-variation-settings: "opsz" 24; text-wrap: balance; text-decoration: underline 1px transparent; text-underline-offset: 5px; transition: text-decoration-color .3s var(--ease); }
.panel__feature:hover .panel__fbody b { text-decoration-color: currentColor; }
.panel__fgo { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font: 550 14.5px/20px var(--sans); }
.panel__fgo .icon { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.panel__feature:hover .panel__fgo .icon { transform: translateX(4px); }
.panel__more { background: var(--tint); }

.panel__rows { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: 12px clamp(28px, 3vw, 56px); align-items: baseline; padding-block: 22px 24px; }
.panel__rows .panel__label { grid-column: 1; margin: 0; }
.panel__links { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 8px 30px; }
.panel__links a { color: var(--navy); font: 500 14.5px/1.4 var(--sans); }
.panel__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.panel__links a .icon { display: inline-block; width: 10px; height: 10px; margin-left: 8px; vertical-align: 1px; transition: transform .3s var(--ease); }   /* the site's link chevron */
.panel__links a:hover .icon { transform: translateX(3px); }
.burger { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-left: auto; border: 1px solid currentColor; background: transparent; color: inherit; }
.burger .icon { width: 20px; height: 20px; }
.drawer { position: fixed; inset: var(--hdr) 0 0; z-index: 139; overflow-y: auto; background: #fff; color: var(--navy); padding: 8px var(--gut) 40px; opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.drawer[data-open] { opacity: 1; visibility: visible; transition: opacity .2s, visibility 0s; }
.drawer details { border-bottom: 1px solid var(--line); }
.drawer summary, .drawer__link { display: flex; align-items: center; justify-content: space-between; padding: 18px 2px; color: var(--navy); font: 420 21px/1.3 var(--serif); list-style: none; cursor: pointer; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary .icon { width: 12px; height: 12px; transition: transform .25s; }
.drawer details[open] summary .icon { transform: rotate(180deg); }
.drawer__link { border-bottom: 1px solid var(--line); }
.drawer__group { display: grid; gap: 2px; padding: 0 0 20px; }
.drawer__group a { padding: 8px 2px; color: var(--text); font-size: 16px; }
.drawer__group .drawer__hub { display: inline-flex; align-items: center; gap: 8px; justify-self: start; color: var(--navy); font-weight: 600; }   /* the section's own page, "Overview" (2026-10-20) */
.drawer__hub .icon { width: 11px; height: 11px; }
.drawer__group .drawer__label { margin-top: 14px; padding: 4px 2px; color: var(--accent); font: 600 13.5px/1.4 var(--sans); }   /* each list's label in the light blue, as card labels are (2026-10-20, the small grey one "looked bad") */
.drawer__cta { display: grid; gap: 12px; margin-top: 28px; }
html.drawer-open { overflow: hidden; }
html.drawer-open .hdr, html.menu-open .hdr { background: #fff; color: var(--navy); border-color: var(--line); }
@media (min-width: 1180px) { .nav { display: block; } .burger, .drawer { display: none; } .hdr__right { margin-left: 8px; } }
@media (max-width: 1179.98px) { .hdr__right { display: none; } :root { --hdr: 68px; } }

/* ---------- 7. Pictures ---------- */
.pic { position: relative; overflow: hidden; background: var(--navy) var(--wash) center / cover; }
.pic > img, .pic > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
a .pic > img { transition: transform 1.2s var(--ease); }
a:hover .pic > img { transform: scale(1.04); }

/* ---------- 8. Shared pieces: whole cards, icon discs, a link at the foot, hover ---------- */
/* a card is a whole box (all four sides); it lifts a little on hover, its picture eases in, its arrow moves */
.card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); background: #fff; transition: border-color .35s var(--ease), transform .45s var(--ease); }
.card .pic > img { transition: transform 1.2s var(--ease); }
@media (hover: hover) {
  .card--hover:hover { border-color: var(--line-2); transform: translateY(-4px); }
  .card--hover { cursor: pointer; }   /* anything that answers the cursor shows the pointer, never the text cursor */
  .card--hover:hover .pic > img { transform: scale(1.045); }
  .card--hover:hover .card__go .icon, .card--hover:hover .link .icon { transform: translateX(4px); }
  .card--hover:hover .link.card__go { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }   /* the whole card is the link, so its foot link answers too */
}
.card__body { display: flex; flex-direction: column; gap: 12px; flex: 1 0 auto; padding: var(--pad); }
.card__body > p:not([class]) { font-size: 16px; line-height: 1.6; }
.card__k { color: var(--accent); font-size: 14px; font-weight: 600; }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding: 18px var(--pad); border-top: 1px solid var(--line); color: var(--navy); font: 550 15px/22px var(--sans); }
.card__foot .icon { width: 12px; height: 12px; transition: transform .35s var(--ease); }
.card__go::after { content: ""; position: absolute; inset: 0; z-index: 3; }   /* the foot link makes the whole card clickable */
/* icon discs: always white with a hairline and a Navy icon (never a Navy-filled circle, 2026-10-18); a ghost version on Navy */
.disc { display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: #fff; color: var(--navy); border: 1px solid var(--line-2); }
.disc .icon { width: 20px; height: 20px; }
.disc--sm { width: 38px; height: 38px; } .disc--sm .icon { width: 17px; height: 17px; }
.disc--xs { width: 30px; height: 30px; } .disc--xs .icon { width: 14px; height: 14px; }
.disc--ghost, .npanel .disc, .promise__box--new .disc, .tests__t .disc { background: transparent; border-color: rgba(255, 255, 255, .34); color: #fff; }   /* on Navy: never a white fill */
/* lists with a small icon before each line */
.ilist { display: grid; width: fit-content; max-width: 100%; }   /* a ruled list is only as wide as its longest line, never the full column (the client, 2026-10-19: "that needs to be a rule") */
.ml .ilist, .vcol .ilist, .pchal__a .ilist, .tbox .ilist, .pfv__cols .ilist, .pnet__block .ilist { width: auto; }   /* inside a card's column the lines run to the card's edges */
.ilist li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--line); color: var(--navy); font-size: 15px; line-height: 1.5; }
.ilist li .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--accent); }
.ilist--muted li { color: var(--text); }
.ilist--muted li .icon { color: var(--faint); }
.on-dark .ilist li, .vcol--own .ilist li { color: rgba(255, 255, 255, .9); border-color: var(--line-dark); }
.on-dark .ilist li .icon, .vcol--own .ilist li .icon { color: var(--accent-dark); }
/* a Navy panel inside the page edge (never a full-bleed band) */
.npanel { background: var(--navy) var(--wash) center / cover no-repeat; color: rgba(255, 255, 255, .86); }
.npanel .h2, .npanel .h3, .npanel .h4 { color: #fff; }
.npanel .lede { color: rgba(255, 255, 255, .84); }
.npanel .link { color: #fff; }
.sec-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 28px; }
.sec-foot--c { justify-content: center; }

/* ---------- 9. Homepage hero: the original's layout (seven columns of words and two picture cards, five of case card) ---------- */
.hero { position: relative; margin-top: calc(-1 * var(--hdr)); padding-top: var(--hdr); background: var(--navy) var(--wash) center / cover no-repeat; color: #fff; }
.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: var(--g); padding-block: 52px 72px; }
.hero__copy { grid-column: 1 / 8; grid-row: 1; display: grid; gap: 20px; align-content: start; padding-bottom: clamp(40px, 3.9vw, 68px); }
.hero .h1 { color: #fff; }
.hero .h1 span { display: block; }
.hero__lede { max-width: 700px; color: rgba(255, 255, 255, .86); font-size: clamp(17px, 1.1vw, 18px); line-height: 1.6; }
.hero .actions { margin-top: 2px; }
.hero .btn { font-size: 14px; line-height: 20px; }
.hero .link { font-size: 15px; }
.hero__meta { color: rgba(255, 255, 255, .64); font-size: 14px; font-weight: 500; }
.hcard { position: relative; grid-row: 2; align-self: end; display: block; overflow: hidden; color: #fff; isolation: isolate; }
.hcard--a { grid-column: 1 / 5; height: clamp(320px, var(--cw) * .265, 470px); }   /* in proportion to the content width (428px on a 1616 page, as on the original) */
.hcard--b { grid-column: 5 / 8; height: calc(clamp(320px, var(--cw) * .265, 470px) - 28px); }
.hcard .pic { position: absolute; inset: 0; }
.hcard .pic > img { transition: transform 1.2s var(--ease); }
.hcard:hover .pic > img { transform: scale(1.04); }
.hcard__t b { text-decoration: underline 1px transparent; text-underline-offset: 5px; transition: text-decoration-color .3s var(--ease); }
.hcard:hover .hcard__t b { text-decoration-color: currentColor; }   /* the original: the title underlines on hover */
.hcard .pic::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6, 37, 67, 0) 40%, rgba(6, 37, 67, .82)); }
.hcard__t { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 22px; display: grid; gap: 8px; }
.hcard__t small { color: rgba(255, 255, 255, .88); font-size: 13px; line-height: 18px; font-weight: 500; }
.hcard__t b { font: 420 22px/28px var(--serif); font-variation-settings: "opsz" 24; text-wrap: balance; }
@media (max-width: 639.98px) { .hero .hcard__t { right: 58px; } }   /* phones: the chat disc shows on the first screen (2026-10-21, "put the widget above the fold"); the card's words stop short of its corner */
/* the dark shade over each picture card's photograph or film is drawn inside the picture's own frame (.pic::after), not on the card: on
   phones and tablets the browser moved the picture and a shade on the card as separate pieces while scrolling, and the shade drifted off
   it (2026-10-21, "the dark thing moves, it doesn't stay attached to the image/video"; "it was never glitching on desktop") */
/* ...and on phones, tablets and touch screens the picture frame reaches 2px past the card on every side, the overlap hidden by the card's own
   edge, so no thin line of the ground behind can flicker at the edge while the page scrolls (2026-10-21: "the edge of this is still
   glitching ... make it overlap, but hide the overlap") */
@media (max-width: 1023.98px), (pointer: coarse) {
  :is(.hcard, .hcase, .mtile, .panel__feature) { overflow: hidden; }
  html :is(.hcard .pic, .hcase > .pic, .mtile > .pic, .panel__feature .pic) { inset: -2px; }
  /* the card is trimmed as one finished image (a full mask), so the film or photograph and its shade end on exactly the same edge: with
     the card's overflow alone, a phone trimmed a playing film a fraction wider than the shade and a pale line showed down the edge
     (2026-10-21, "it's a little bit better, but it's still visible"). The keyboard ring is drawn just inside, where the mask keeps it. */
  :is(.hcard, .hcase, .mtile, .panel__feature) { -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000); }
  :is(.hcard, .hcase, .mtile, .panel__feature):focus-visible { outline-offset: -3px; }
}
/* the browser's own tap highlight (a translucent box over the whole link; dark on an iPhone) is off: it flashed over the picture cards and
   read as their shading jumping (2026-10-21, "on hover and click, the shadow still has the glitch") */
html { -webkit-tap-highlight-color: transparent; }
/* on hover the shading zooms with the picture, so it stays on the same part of it, instead of the picture sliding under a still shade */
:is(.hcard, .mtile, .panel__feature) .pic::after { transition: transform 1.2s var(--ease); }
:is(.hcard, .mtile, .panel__feature):hover .pic::after { transform: scale(1.04); }
/* touch screens: no zoom at all (a tap held the hover state while the next page loaded) */
@media (hover: none) {
  .hcard:hover .pic > img, .mtile:hover > .pic > img, .panel__feature:hover .pic > img, :is(.hcard, .mtile, .panel__feature):hover .pic::after { transform: none; }
}
.hcard__go { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font: 550 14.5px/20px var(--sans); }   /* the call to action, as on the menu feature cards */
.hcard__go .icon { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.hcard:hover .hcard__go .icon { transform: translateX(4px); }
.hcase { grid-column: 8 / 13; grid-row: 1 / 3; position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 520px; overflow: hidden; color: #fff; isolation: isolate; }
.hcase > .pic { position: absolute; inset: 0; z-index: -1; }
.hcase .pic > .hcase__film { opacity: 0; transition: opacity .9s var(--ease); }   /* one film per slide; the next fades in as the slide turns */
.hcase .pic > .hcase__film.is-on { opacity: 1; }
.hcase__t { text-decoration: underline 1px transparent; text-underline-offset: 6px; transition: text-decoration-color .3s var(--ease); }
.hcase:hover .hcase__t { text-decoration-color: currentColor; }   /* the whole card is the link: its title underlines and its button fills on hover */
.hcase:hover .btn::before { transform: scaleX(1); }
.hcase:hover .btn { border-color: var(--fill); }
.hcase:hover .btn .icon { transform: translateX(3px); }
.hcase > .pic::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6, 37, 67, .62) 0%, rgba(6, 37, 67, .1) 34%, rgba(6, 37, 67, 0) 60%, rgba(6, 37, 67, .34) 100%); }
.hcase__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 30px 32px 0; }
.hcase__slides { display: grid; flex: 1; min-width: 0; }   /* the slides shrink so the progress ticks stay inside the card */
.hcase__slide { grid-area: 1 / 1; display: grid; gap: 12px; opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.hcase__slide.is-on { opacity: 1; pointer-events: auto; }
.hcase__k { color: rgba(255, 255, 255, .88); font-size: 13px; line-height: 18px; font-weight: 500; }
.hcase__t { max-width: 24ch; font: 420 clamp(26px, 1.97vw, 34px)/1.18 var(--serif); font-variation-settings: "opsz" 36; letter-spacing: -.01em; text-wrap: balance; }
.hcase__bar { display: flex; gap: 8px; padding-top: 12px; }
.hcase__bar i { position: relative; width: 30px; height: 2px; background: rgba(255, 255, 255, .34); overflow: hidden; cursor: pointer; }
.hcase__bar i::before { content: ""; position: absolute; inset: -10px 0; }   /* a taller hit area */
.hcase__bar i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.hcase__bar i.is-done::after { transform: scaleX(1); }
.hcase__bar i.is-on::after { animation: fill var(--t, 6s) linear forwards; }
@keyframes fill { to { transform: scaleX(1); } }
.hcase__foot { padding: 32px; }
.hcase__foot .btn { min-height: 48px; }

/* ---------- 10. The logo strip (the previous pass): one centred line, the marks running beneath in full colour ---------- */
.logos { padding-top: calc(var(--sec) * .62); }
.logos__t { max-width: 760px; margin: 0 auto clamp(36px, 3.2vw, 52px); text-align: center; color: var(--muted); font-size: clamp(16px, 1.1vw, 18px); font-weight: 500; line-height: 1.5; text-wrap: balance; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; align-items: center; gap: clamp(56px, 5vw, 88px); width: max-content; animation: marquee 80s linear infinite; }
.marquee[data-paused] .marquee__track { animation-play-state: paused; }
.marquee__track img { height: var(--h, 26px); width: auto; max-width: 150px; object-fit: contain; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 11. The barriers (the previous pass): three pictures, each with its condition, three symptoms and the fix ---------- */
.barriers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); }
.barrier { display: grid; grid-template-rows: auto auto 1fr auto auto; border: 1px solid var(--line); background: #fff; }
.barrier .pic { aspect-ratio: 16 / 9; }
@media (min-width: 1280px) { .barrier .pic, .part .pic { aspect-ratio: 2 / 1; } }   /* full width: shorter pictures keep the three-across rows compact */   /* full width, so the pictures are shorter and the cards never feel drawn out */
.barrier__body { display: grid; gap: 12px; padding: var(--pad) var(--pad) 8px; }
.barrier__n { color: var(--accent); font: 420 15px/1 var(--serif); font-variation-settings: "opsz" 24; }
.barrier__body p { font-size: 16px; line-height: 1.6; }
.barrier__list { padding: 6px var(--pad) 0; }
.barrier__list li { padding: 11px 0; border-top: 1px solid var(--line); color: var(--navy); font-size: 15px; font-weight: 500; }
.barrier__go, .part__foot { padding: 18px var(--pad) 17px; border-top: 1px solid var(--line); }   /* measured on the pixels: the same space above and below the link (25px at 1440), 2026-10-19 */   /* one foot link row on every card: the barriers, the three parts, what sets our work apart */
.barrier__fix { display: flex; align-items: center; gap: 10px; padding: 16px var(--pad); border-top: 1px solid var(--line); background: var(--grey); color: var(--navy); font-size: 14.5px; font-weight: 500; }
.barrier__fix::before { content: ""; width: 18px; height: 2px; background: var(--navy); }   /* the dash starts on the same line as the card's other text (2026-10-21: "still have the little icons in there, but ... within that same padding") */
.barrier__fix--deep { background: var(--navy) var(--wash) center / cover; color: #fff; border-color: var(--navy); }
.barrier__fix--deep::before { background: var(--accent-dark); }

/* ---------- 12. Built for few buyers (the previous pass): one box, the two models beside the thesis, now with icons and a picture ---------- */
.thesis { display: grid; grid-template-columns: minmax(0, 7.8fr) minmax(0, 4.2fr); border: 1px solid var(--line); }   /* the label column is narrow, so the thesis panel and its picture get the room (2026-10-18) */
/* the two models side by side (2026-10-19): two equal columns; every cell carries its row's name (a light-blue label with its icon)
   over its value, on both sides; one padding in every cell, the same above and below; the right column keeps the tint */
.models { --mp: clamp(16px, 1.25vw, 22px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #fff; }   /* --mp: a tighter cell padding, so the table is shorter (2026-10-19) */
.models > div { padding: var(--mp) var(--pad) calc(var(--mp) - 1px); border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.5; }   /* measured on the ink: the same space above and below */
.models > .mh { padding-block: calc(var(--mp) - 3px) calc(var(--mp) - 1px); }   /* measured from the last line's baseline, the space your eye reads, 22px above and below at 1440 */   /* the heading row with more room above and below than the value cells (2026-10-19) */   /* the headings with the same space as every other cell */
.models .mv--us, .models .mh--us { border-left: 1px solid var(--line); color: var(--navy); background: #fff; }
.models .mh:not(.mh--us), .models .mv:not(.mv--us), .models .ml:not(.mv--us) { background: var(--grey); }   /* the traditional model is the greyed-out column, ours white (2026-10-19) */
.models .mh:not(.mh--us) { color: color-mix(in srgb, var(--navy) 66%, transparent); }   /* and its words a little softer */
.models .mh:not(.mh--us) .disc, .models .mh:not(.mh--us) small, .models .mv:not(.mv--us) .mv__k, .models .ml:not(.mv--us) .mv__k, .models .ml:not(.mv--us) .ml__h, .models .ml:not(.mv--us) .ilist .icon { opacity: .72; }
.models .mv:not(.mv--us) .mv__v { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.models .ml:not(.mv--us) .ilist li { color: color-mix(in srgb, var(--text) 72%, transparent); }
.models > .mk.mk--corner { display: none; }
.models .mh { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; align-content: center; font: 420 21px/1.3 var(--serif); font-variation-settings: "opsz" 24; color: var(--navy); }
.models .mh .disc { grid-row: span 2; }
.models .mh small { display: block; max-width: none; margin-top: 2px; font: 400 clamp(13px, .93vw, 14px)/1.45 var(--sans); color: var(--muted); text-wrap: balance; }   /* the full width of the column now (2026-10-19): one line where it fits, both wrapping together where it does not */
@media (max-width: 1399.98px) { .models .mh small { max-width: 26ch; } }   /* below where both fit on one line, both go to two */
.models .mv { display: grid; gap: 6px; align-content: start; }
.models .mv__k { display: flex; align-items: center; gap: 10px; color: var(--accent); font-size: 14px; font-weight: 600; line-height: 1.35; }
.models .mv__k .icon { width: 16px; height: 16px; flex: none; color: var(--accent); }
.models .mv__v { color: var(--muted); font: 420 clamp(16px, 1.15vw, 17.5px)/1.3 var(--serif); font-variation-settings: "opsz" 24; }   /* a step below the column headings (21px), 2026-10-19 */
.models .mv--us .mv__v { color: var(--navy); }
.models .ml { border-bottom: 0; display: grid; gap: 6px; align-content: start; }
.models .ml__h { margin-top: 2px; color: var(--muted); font-size: 14px; font-weight: 500; }
.models .ml .ilist { margin-top: 6px; }
.models .ml .ilist li { padding: 10px 0; }   /* each line between hairlines, the first under one too, so the heading over the list has the same space as the lines (2026-10-19) */
.models .ml .ilist li:last-child { padding-bottom: 0; }
.models > .ml { padding-bottom: calc(var(--mp) - 3px); }
.thesis__panel { display: flex; flex-direction: column; background: var(--navy) var(--wash) center / cover; color: rgba(255, 255, 255, .86); }
.thesis__panel > .pic { flex: 1 1 auto; min-height: 240px; }
.thesis__body { display: grid; gap: 18px; justify-items: start; padding: var(--pad-l); }
.thesis__body .h2 { color: #fff; font-size: clamp(28px, 2.5vw, 42px); }   /* a little smaller than a section heading (his request, 2026-10-18) */
.thesis__body p { font-size: 16.5px; line-height: 1.65; }
.thesis__body .link { color: #fff; margin-top: 4px; }

/* ---------- 13. The capability: a tall render beside the words, the figures as four boxes ---------- */
.capability { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; gap: var(--g) clamp(32px, 2.8vw, 52px); }   /* the mosaic and its words closer together, this section only (2026-10-19; was the --split gap, about 85px at 1710) */
.capability > .pic { grid-column: 1 / 7; grid-row: 1 / 3; min-height: 100%; }
.capability__words { grid-column: 7 / 13; display: grid; gap: 20px; align-content: start; padding-top: 4px; }
.capability__words > p { max-width: 62ch; }
.figs { grid-column: 7 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); align-content: end; }
/* 13b. The capability's left side as a mosaic (2026-10-18): a tall picture beside two stacked ones, filling the original tall picture's place */
.capability > .capm { --mg: clamp(24px, 2.2vw, 34px); grid-column: 1 / 7; grid-row: 1 / 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 13fr 7fr; gap: var(--mg); min-height: 100%; }   /* the render above, a shorter picture below (2026-10-19: three pictures) */
.capm__p { position: relative; overflow: hidden; } .capm__p .pic { position: absolute; inset: 0; }
.capm__p1 { grid-row: 1 / 3; }
.capm__p3:has(.capm__half) { display: grid; grid-template-rows: 1fr 1fr; gap: var(--mg); overflow: visible; }   /* split in half: two pictures, one above the other */
.capm__half { position: relative; overflow: hidden; } .capm__half .pic { position: absolute; inset: 0; }
.capm__half .pic > img { transform: scale(1.18); }   /* cropped in a little, not shown whole (2026-10-18) */
.capm__p1:has(.capm__part) { display: grid; grid-template-rows: 1fr 3fr; gap: var(--mg); overflow: visible; }   /* a quarter on top, the tower three quarters below */
.capm__part { position: relative; overflow: hidden; } .capm__part .pic { position: absolute; inset: 0; }
/* the crops of the mosaic's pictures (2026-10-19 set: a gold curtain wall, white fins, white tiers with a red edge, striped fields) */
.capm__part--b .pic > img { object-position: 50% 50%; }   /* the white fins, centred */
.capm__half:first-child .pic > img { object-position: 65% 100%; transform: scale(1.3); transform-origin: 70% 100%; }   /* the white tiers and their red edge, not the open sky */
.capm__part--t .pic > img { object-position: 50% 50%; }   /* the gold curtain wall */
.fig { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: clamp(150px, 11vw, 190px); padding: var(--pad); border: 1px solid var(--line); }
.fig b { color: var(--navy); font: 420 clamp(44px, 3.6vw, 62px)/1 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.02em; }
.fig span { color: var(--muted); font-size: 15px; line-height: 1.45; }
.fig--navy { background: var(--navy) var(--wash) center / cover; border-color: var(--navy); }
.fig--navy b { color: #fff; }
.fig--navy span { color: rgba(255, 255, 255, .8); }
.fig--word b { font-size: clamp(30px, 2.3vw, 40px); line-height: 1.1; }

/* ---------- 14. Three parts (the previous pass, the cards a little apart); the three-point strip under them ---------- */
.parts { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--g); }
.part { display: flex; flex-direction: column; border: 1px solid var(--line); background: #fff; }
.part .pic { aspect-ratio: 16 / 9; }
.part__body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: var(--pad) var(--pad) calc(var(--pad) - 4px); }
.parts:not(.pgrid) .part__body { padding-bottom: calc(var(--pad) - 14px); }   /* the homepage's three parts: 30px to the rule, as above */   /* the same space under the last line as above the first, measured to the baseline (2026-10-19) */
.part__sub { color: var(--accent); font-size: 14px; font-weight: 600; }
.part__body p:not([class]) { font-size: 16px; line-height: 1.6; }
.part__list { margin-top: 6px; }
.part__list li { padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--navy); }
.part__foot { margin-top: auto; }
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--g); border: 1px solid var(--line); background: var(--grey); }   /* the three points in the tint */
.point { display: flex; align-items: center; gap: 16px; padding: clamp(18px, 1.6vw, 24px) var(--pad); border-left: 1px solid var(--line); color: var(--navy); font-size: 15.5px; font-weight: 500; line-height: 1.45; }
.point:first-child { border-left: 0; }

/* ---------- 15. The pipeline: on white like every section; the stages of one mandate, drawn to scale, are one Navy block (no Navy sections, 2026-10-18) ---------- */
.cov { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--navy) var(--wash) center / cover no-repeat; color: rgba(255, 255, 255, .86); }
.cov__col { display: flex; flex-direction: column; gap: 14px; padding: 30px var(--pad); border-left: 1px solid var(--line-dark); transition: background .3s; }
.cov__col:first-child { border-left: 0; }
.cov__step { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.cov__n { color: #fff; font: 420 clamp(40px, 3.6vw, 60px)/1 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cov__what { color: rgba(255, 255, 255, .8); font-size: 15px; }
.cov__bar { position: relative; height: 4px; background: rgba(255, 255, 255, .12); }
.cov__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); min-width: 3px; background: var(--accent-dark); transform-origin: left; transition: transform 1.4s var(--ease); }
.js .cov:not(.is-in) .cov__bar i { transform: scaleX(0); }
.cov__ratio { margin-top: -4px; color: rgba(255, 255, 255, .72); font-size: 14px; line-height: 1.4; }
.cov__ratio b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) and (max-width: 1500px) { .cov__ratio { font-size: 13px; } }
.cov__col p:not([class]) { color: rgba(255, 255, 255, .72); font-size: 15px; line-height: 1.6; }
.cov__end { justify-content: flex-end; background: rgba(255, 255, 255, .06); }
.cov__end b { color: #fff; font: 420 clamp(22px, 1.7vw, 27px)/1.3 var(--serif); font-variation-settings: "opsz" 36; }
.cov__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 24px; }

/* ---------- 16. The commitment (the previous pass): the two promises, three numbered steps, the five tests ---------- */
.promise { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--line); }
.promise__box { display: grid; gap: 14px; align-content: start; padding: var(--pad-l); }
.promise__box--new { background: var(--navy) var(--wash) center / cover; color: rgba(255, 255, 255, .86); }
.promise__k { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; font-weight: 600; }
.promise__box--new .promise__k { color: var(--accent-dark); }
.promise__q { font: 420 clamp(19px, 1.35vw, 22px)/1.35 var(--serif); font-variation-settings: "opsz" 24; color: var(--ink); }
.promise__box--old { background: var(--grey); }   /* the usual promise in the grey, beside our commitment in Navy */
.promise__box--old .promise__q { color: var(--muted); }
/* the usual promise is struck through and our commitment underlined, each line drawn as the section arrives (2026-10-18); at rest both are drawn */
.promise__q .strike, .promise__q .mark { -webkit-box-decoration-break: clone; box-decoration-break: clone; background-repeat: no-repeat; }
.promise__q .strike { background-image: linear-gradient(rgba(91, 107, 120, .6), rgba(91, 107, 120, .6)); background-position: 0 60%; background-size: 100% 1px; }
.promise__q .mark { background-image: none; }   /* no underline on our commitment (his call, 2026-10-18); the usual promise keeps its strike-through */
.promise__box--new .promise__q { color: #fff; }
.promise__box p:not([class]) { max-width: 58ch; font-size: 16px; line-height: 1.6; }
.steps3 { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin-top: clamp(40px, 4vw, 56px); }
.shead + .steps3 { margin-top: 0; }
.steps3 li { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 1px solid var(--navy); }
.steps3__n { color: var(--accent); font: 420 30px/1 var(--serif); font-variation-settings: "opsz" 72; }
.steps3 p { font-size: 16px; line-height: 1.6; }
.tests { display: grid; grid-template-columns: auto repeat(5, minmax(0, 1fr)); align-items: stretch; margin-top: clamp(40px, 4vw, 56px); border: 1px solid var(--line); }
.tests__t { display: flex; align-items: center; max-width: 260px; padding: 20px var(--pad); background: var(--navy) var(--wash) center / cover; color: #fff; font: 420 19px/1.3 var(--serif); font-variation-settings: "opsz" 24; }
.test { display: flex; align-items: center; gap: 12px; padding: 20px; border-left: 1px solid var(--line); color: var(--navy); font-size: 15px; font-weight: 500; line-height: 1.4; }

/* ---------- 17. What sets the work apart: six cards, the picture on top, the same shape as the barriers and the three parts ---------- */
.why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); }
@media (max-width: 1279.98px) { .why { grid-template-columns: minmax(0, 1fr); } }   /* one column of panels until the page is wide enough for two */
/* What sets our work apart (2026-10-18): horizontal panels, the picture beside the words, so they read as capabilities, not posts */
.wcard { --sq: 220px; display: grid; grid-template-columns: var(--sq) minmax(0, 1fr); }   /* a square picture: its width is set to the panel's height (js/site.js 7d) */
.wcard > .pic { position: relative; min-height: 100%; }
.wcard > .pic > img { position: absolute; inset: 0; }
.wcard__body { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 28px clamp(20px, 1.6vw, 26px) 18px; }   /* the words sit in the middle: measured on the ink, 21px above the figure and below the link (2026-10-18) */   /* tighter, so the panels and their square pictures are shorter (2026-10-18) */
.wcard__fig { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }   /* the figure and its label on one line */   /* the figure, its label on the line under it */
.wcard__fig b { color: var(--navy); font: 420 clamp(28px, 1.9vw, 32px)/1 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.02em; }
.wcard__fig span { position: relative; top: 2.5px; color: var(--muted); font-size: 18px; line-height: 1.3; }   /* centred on the figure by eye: the box centre sat 2.5px high (2026-10-19) */   /* the figure's words larger, centred on the figure (2026-10-19) */
.wcard__fig--word b { font-size: clamp(24px, 1.6vw, 28px); line-height: 1.05; }
.wcard__t { margin-top: 9px; color: var(--ink); font: 420 clamp(17px, 1.12vw, 19px)/1.25 var(--serif); font-variation-settings: "opsz" 24; text-wrap: balance; }
.wcard__x { margin-top: 5.5px; color: var(--text); font-size: 14.5px; line-height: 1.5; }   /* on the ink, as far under the title as the link is under it: 19px (2026-10-19) */
.wcard .link { padding-top: 6px; font-size: 14.5px; }

/* ---------- 17b. A call to action between sections (after Belkins): one line, one button, in a Navy panel inside the page edges ---------- */
.ctaband { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; padding: clamp(28px, 3vw, 48px) var(--pad-l); }
.ctaband__t { display: grid; gap: 10px; }
.ctaband__t .h3 { color: #fff; font-size: clamp(24px, 2vw, 32px); }
.ctaband__t p { color: rgba(255, 255, 255, .8); font-size: 16px; }

/* ---------- 18. Results (the previous pass), each case now with its picture ---------- */
.cases__vp { display: flex; gap: var(--g); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 2px; }
.cases__vp::-webkit-scrollbar { display: none; }
.case { flex: 0 0 100%; scroll-snap-align: start;   /* one whole case at a time, nothing cut off at the page edge */
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4.6fr) minmax(0, 3.4fr); background: #fff; border: 1px solid var(--line); }
.case > .pic { min-height: 100%; }
.case__main { display: flex; flex-direction: column; gap: 16px; padding: var(--pad-l); }
.case__t { font: 420 clamp(23px, 2vw, 29px)/1.25 var(--serif); font-variation-settings: "opsz" 36; color: var(--ink); text-wrap: balance; }
.case__ch { color: var(--text); font-size: 16px; line-height: 1.6; }
.case__main .link { margin-top: auto; }
.case__stats { display: grid; gap: 12px; align-content: center; margin: 16px 16px 16px 0; padding: 16px; background: var(--grey); }   /* the light tint behind the figures (Navy was tried and he preferred this, 2026-10-18) */
.stat { padding: 20px 24px; border: 1px solid var(--line); background: #fff; }   /* each figure box outlined (2026-10-18) */
.stat b { display: block; font: 420 clamp(30px, 2.6vw, 40px)/1.05 var(--serif); font-variation-settings: "opsz" 72; color: var(--navy); }
.stat span { display: block; margin-top: 6px; color: var(--muted); font-size: 14.5px; line-height: 1.4; }
.case__stats .stat:first-child { border-color: var(--navy); background: var(--navy) var(--wash) center / cover; }   /* the headline figure in Navy, as the capability figures lead (2026-10-18) */
.case__stats .stat:first-child b { color: #fff; } .case__stats .stat:first-child span { color: rgba(255, 255, 255, .8); }
.cases__nav { display: flex; gap: 10px; }

/* ---------- 19. What your revenue is worth (the original's section, kept) ---------- */
.value { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); }
.value > .pic { min-height: 100%; }
.vcol { display: flex; flex-direction: column; gap: 14px; padding: var(--pad-l); border-left: 1px solid var(--line); }
.vcol__k { color: var(--navy); font-size: 14.5px; font-weight: 600; }
.vcol__n { margin-top: 10px; color: var(--navy); font: 420 clamp(48px, 4vw, 68px)/1 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.02em; }
.vcol__n small { font-size: .55em; margin-left: 4px; }
.vcol__l { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.vcol > p:not([class]) { font-size: 16px; line-height: 1.6; }
.vcol .ilist { margin-top: auto; padding-top: 10px; }
.vcol:not(.vcol--own) { background: var(--grey); }   /* rented revenue in the tint, beside owned revenue in Navy */
.vcol--own { background: var(--navy) var(--wash) center / cover; border-left-color: var(--navy); color: rgba(255, 255, 255, .86); }
.vcol--own .vcol__k, .vcol--own .vcol__n { color: #fff; }
.vcol--own .vcol__l { color: rgba(255, 255, 255, .7); }
.vnotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--g); border: 1px solid var(--line); }
.vnote { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 6px 18px; padding: var(--pad); border-left: 1px solid var(--line); }
.vnote:first-child { border-left: 0; }
.vnote .disc { grid-row: span 2; }
.vnote p { font-size: 15.5px; line-height: 1.6; }

/* ---------- 20. Who we take on: the words beside one box, its two columns read row for row ---------- */
.fit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--g) var(--split); align-items: start; }   /* the words, the one gap, the box (2026-10-19) */
.fit__lead { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.fit__lead .actions { margin-top: 8px; flex-direction: column; align-items: flex-start; gap: 28px; }   /* on the ink, the link sits as far under the button (32px) as the button under the words (2026-10-19) */
.fitbox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); }
.fitbox > * { padding-inline: var(--pad); }
.fitbox > :nth-child(even) { border-left: 1px solid var(--line); }
.fitbox__h { display: flex; align-items: center; gap: 14px; padding-block: 22px; border-bottom: 1px solid var(--line); background: #fff; }
.fitbox__h--no, .fitbox__c--no { background: var(--grey); }   /* where we are not is the greyed-out column, where we are a fit white (2026-10-19, as in the comparison table) */
.fitbox__h--no .h4 { color: color-mix(in srgb, var(--navy) 66%, transparent); } .fitbox__h--no .disc { opacity: .72; }
.fitbox__h .h4 { font-size: clamp(20px, 1.4vw, 23px); }
.fitbox__c { display: flex; gap: 12px; align-items: flex-start; padding-block: 14px; border-top: 1px solid var(--line); color: var(--navy); font-size: 15.5px; line-height: 1.5; }
.fitbox__h + .fitbox__h + .fitbox__c, .fitbox__h + .fitbox__h + .fitbox__c + .fitbox__c { border-top: 0; }
.fitbox__c .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--accent); }
.fitbox__c--no { color: color-mix(in srgb, var(--text) 72%, transparent); }
.fitbox__c--no .icon { color: var(--faint); }
.fitbox__c:empty { border-top-color: transparent; }

/* ---------- 21. Markets: the Perspectives card (picture, a line with the market's icon, the name, a link) ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); }
/* the market tiles (2026-10-18): picture cards like the hero's, the descriptor at the top, the name and "See the market" held to the foot */
.mtile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; aspect-ratio: 4 / 5; padding: 22px 24px 24px; overflow: hidden; color: #fff; isolation: isolate; }
.mtile > .pic { position: absolute; inset: 0; z-index: -2; }
.mtile > .pic > img { transition: transform 1.2s var(--ease); }
.mtile:hover > .pic > img { transform: scale(1.04); }
.mtile > .pic::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6, 37, 67, .82) 0%, rgba(6, 37, 67, .42) 16%, rgba(6, 37, 67, 0) 36%, rgba(6, 37, 67, 0) 50%, rgba(6, 37, 67, .38) 66%, rgba(6, 37, 67, .92) 100%); }
.mtile__k { display: flex; align-items: flex-start; gap: 9px; max-width: 30ch; color: #fff; font: 500 13.5px/1.45 var(--sans); text-shadow: 0 1px 12px rgba(6, 37, 67, .45); }
.mtile__k .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.mtile__b { display: grid; gap: 14px; justify-items: start; }
.mtile__t { color: #fff; font: 420 clamp(21px, 1.55vw, 26px)/1.22 var(--serif); font-variation-settings: "opsz" 24; text-wrap: balance; text-decoration: underline 1px transparent; text-underline-offset: 5px; transition: text-decoration-color .3s var(--ease); }
.mtile:hover .mtile__t { text-decoration-color: currentColor; }
.mtile__go { display: inline-flex; align-items: center; gap: 10px; font: 550 14.5px/20px var(--sans); }
.mtile__go .icon { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.mtile:hover .mtile__go .icon { transform: translateX(4px); }
/* each card shares its rows with the cards beside it, so the lines, names and links sit level across a row */
.mcard { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
.mcard .pic { aspect-ratio: 16 / 10; }
.mcard .card__body { display: grid; grid-template-rows: auto auto 1fr; gap: 10px; padding: var(--pad); }
.mcard__meta { display: flex; align-items: flex-start; gap: 8px; min-height: 2.9em; color: var(--muted); font-size: 13.5px; font-weight: 500; line-height: 1.45; }   /* two lines held, so the names sit level */
.mcard__meta .icon { width: 15px; height: 15px; margin-top: 2px; color: var(--accent); }
.mcard__t { font: 420 clamp(19px, 1.35vw, 22px)/1.3 var(--serif); font-variation-settings: "opsz" 24; color: var(--ink); text-wrap: balance; }
.mcard .link { align-self: end; padding-top: 10px; font-size: 15px; }

/* ---------- 22. How an engagement unfolds (the previous pass): four windows, each now a whole box ---------- */
.tl { position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--g); padding-top: 22px; }
/* the sequence (2026-10-18): a line along the row's top edge, a numbered step on it at each card, the last filled Navy */
.tl__item { position: relative; }   /* no line along the top: its draw-in was removed at his request (2026-10-18); the numbered steps stay */
.tl__n { position: absolute; top: -21px; left: var(--pad); display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--navy); border-radius: 50%; background: #fff; color: var(--navy); font: 420 15px/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.tl__item > .tl__when { margin-top: 18px; }
/* each window spans four shared rows, so the titles, texts and "What reaches you" boxes sit level across the row */
.tl__item { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; align-content: start; padding: var(--pad) var(--pad) 0; border: 1px solid var(--line); transition: border-color .35s var(--ease); }
.tl__when { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 14px; font-weight: 600; }
.tl__when .icon { width: 16px; height: 16px; }
.tl__item > p:not([class]) { font-size: 16px; line-height: 1.6; }
.reaches { display: grid; gap: 10px; align-content: start; align-self: stretch; margin-top: 6px; padding: 16px 18px 18px; background: var(--tint); color: var(--navy); font-size: 15px; line-height: 1.5; }
/* in the timeline, what reaches you is the card's bottom half (2026-10-18): edge to edge on the tint, below a rule level across the row */
.tl__item > .reaches { margin: 12px calc(-1 * var(--pad)) 0; padding: 22px var(--pad) var(--pad); border-top: 1px solid var(--line); font-size: 16px; line-height: 1.6; }   /* the same size as the text above it */
.reaches b { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 500; font-size: 13.5px; }
.reaches .icon { width: 18px; height: 18px; color: var(--accent); }

/* ---------- 23. FAQ: the heading beside the questions in one box; a plus that becomes a minus ---------- */
.faqs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--g) var(--split); align-items: start; }   /* the words, the one gap, the questions (2026-10-19) */
.faqs__aside .lede { max-width: none; }   /* the words fill their column up to the one gap */
.faqs__aside { display: grid; gap: 20px; justify-items: start; }
.faqs__aside .btn { margin-top: 8px; }
/* words beside clearly taller content stay in view while it scrolls (the client, 2026-10-19: "wherever there's content where it's clearly bigger
   on the other side of it, the left thing should be sticky"): the FAQ, the fit check on the homepage, the inquiry on Exploring fit */
@media (min-width: 1024px) { .faqs__aside, .fit__lead, .pinq__words { position: sticky; top: calc(var(--hdr) + 28px); align-self: start; } }
.faq { border: 1px solid var(--line); }
.faq__item + .faq__item { border-top: 1px solid var(--line); }
.faq__item { transition: background-color .35s var(--ease); }
.faq__item.is-open { background: var(--grey); }   /* the open question sits in the tint */
.faq__item.is-open .faq__q { background: transparent; }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 22px var(--pad); border: 0; background: #fff; color: var(--navy); text-align: left; font: 420 clamp(18px, 1.3vw, 21px)/1.35 var(--serif); font-variation-settings: "opsz" 24; transition: background .25s; }
.faq__q:hover { background: var(--tint); }
.faq__q .disc { position: relative; width: 34px; height: 34px; }
.faq__q .disc .icon { position: absolute; width: 14px; height: 14px; transition: opacity .3s var(--ease), transform .4s var(--ease); }
.faq__q .disc .icon--minus { opacity: 0; transform: rotate(-90deg); }
.faq__item.is-open .faq__q .disc .icon--plus { opacity: 0; transform: rotate(90deg); }
.faq__item.is-open .faq__q .disc .icon--minus { opacity: 1; transform: none; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { min-height: 0; overflow: hidden; }
.faq__a > div > div { padding: 0 clamp(64px, 5vw, 88px) 24px var(--pad); font-size: 16px; line-height: 1.65; opacity: 0; transform: translateY(-6px); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.faq__item.is-open .faq__a > div > div { opacity: 1; transform: none; transition-delay: .1s; }
.faq__a p + p { margin-top: 12px; }

/* ---------- 24. Perspectives: the original's boxed cards, running off the right edge, with arrows ---------- */
.reads { display: flex; gap: var(--g); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 2px 0 6px; scroll-padding-left: 0; }
.reads::-webkit-scrollbar { display: none; }
/* whole cards only, inside the page edges: four to a view, the arrows step through the rest */
.reads > .card { flex: 0 0 calc((100% - 3 * var(--g)) / 4); scroll-snap-align: start; }
.read .pic { aspect-ratio: 16 / 10; }
.read .card__body { gap: 10px; padding: var(--pad); }
.read__meta { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; font-weight: 500; }
.read__meta .icon { width: 14px; height: 14px; color: var(--accent); }
.read__t { font: 420 clamp(19px, 1.35vw, 22px)/1.3 var(--serif); font-variation-settings: "opsz" 24; color: var(--ink); text-wrap: balance; }
.read__d { margin-top: 2px; color: var(--text); font-size: 15px; line-height: 1.55; text-wrap: pretty; }   /* one sentence under the title (2026-10-19) */
.read .link { margin-top: auto; padding-top: 10px; font-size: 15px; }
.reads-nav { display: flex; align-items: center; gap: 10px; }

/* ---------- 25. Closing call to action: the original's (a Navy box beside four boxed points) ---------- */
.close { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border: 1px solid var(--line); }
.close__box { grid-column: 1 / 6; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: var(--pad-l); margin: -1px 0 -1px -1px; }
.close__box .actions { margin-top: 12px; }
.close__pts { grid-column: 6 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.close__pt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; align-content: center; padding: var(--pad-l); border-left: 1px solid var(--line); }
.close__pt:nth-child(n+3) { border-top: 1px solid var(--line); }
.close__pt .disc { grid-row: span 2; }
.close__pt b { color: var(--navy); font: 420 clamp(20px, 1.45vw, 24px)/1.3 var(--serif); font-variation-settings: "opsz" 36; }
.close__pt p { color: var(--muted); font-size: 15.5px; line-height: 1.6; }
/* the second design of the closing invitation (2026-10-19), alternating page by page with the first: the three points one under another */
.close--page .close__box .h2 { font-size: clamp(30px, 2.3vw, 40px); line-height: 1.14; text-wrap: balance; }   /* the pages' longer invitations on two lines, not three (2026-10-19) */
.close--page .close__box .lede { font-size: 16px; line-height: 1.7; }
.close--rows .close__pts { grid-template-columns: minmax(0, 1fr); }
.close--rows .close__pt { padding-block: clamp(26px, 2.2vw, 36px); }
.close--rows .close__pt:nth-child(n+2) { border-top: 1px solid var(--line); }

/* ---------- 26. Footer (the original's: the mark, eight destinations, the commentary sign-up, a rule, the legal row) ---------- */
.ftr { background: var(--navy) var(--wash) center / cover no-repeat; color: rgba(255, 255, 255, .78); }
.ftr { overflow-x: clip; }
.ftr__sign { position: relative; isolation: isolate; }
.ftr__sign::before, .ftr__sign::after { content: ""; position: absolute; left: 50%; width: 100vw; margin-left: -50vw; pointer-events: none; }
.ftr__sign::before { inset-block: 0; z-index: -1; background: rgba(0, 10, 24, .26); }   /* the sign-up band a shade deeper than the footer's picture, across the whole footer (2026-10-19) */
.ftr__sign::after { bottom: 0; height: 1px; background: var(--line-dark); }   /* its rule runs edge to edge (2026-10-19) */
.ftr__bar { position: relative; }
.ftr__bar::before { content: ""; position: absolute; top: 0; left: 50%; width: 100vw; height: 1px; margin-left: -50vw; background: var(--line-dark); pointer-events: none; }   /* the legal row keeps its rule, edge to edge, and no tint (2026-10-19) */
/* the footer (2026-10-18, layout C in Navy): sign-up across the top, office beside four columns, the legal row */
.ftr .logo { display: block; color: #fff; width: 124px; height: 21px; margin-bottom: 22px; }
.ftr__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; padding-block: clamp(52px, 4.4vw, 72px) 48px; }   /* more room above the columns; below, the original 48px (2026-10-19) */
/* from 1024 the mark, the four columns and Contact share one row, spaced evenly, each as wide as its words (2026-10-18) */
@media (min-width: 1360px) { .ftr__main { display: grid; grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); gap: clamp(40px, 3.5vw, 64px); } .ftr .ftr__nav { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(28px, 2.6vw, 48px); } }   /* the mark and office in a set column, close to five columns that spread across the rest (2026-10-18) */
@media (min-width: 760px) and (max-width: 1359.98px) { .ftr__brand { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 64px; align-items: start; } .ftr__brand .logo { grid-column: 1 / -1; } .ftr__brand > p { grid-column: 1; } .ftr__reach { grid-column: 2; grid-row: 2 / 4; margin-top: 0; } .ftr__brand .ftr__socs { grid-column: 1; } }   /* the mark on top; the line and the icons on the left, Get in touch on the right; the columns below */   /* the mark and Contact on one row, the columns below */
@media (min-width: 1024px) and (max-width: 1359.98px) { .ftr .ftr__nav { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ftr__brand p { margin-top: 2px; max-width: 34ch; color: rgba(255, 255, 255, .72); font-size: 15px; line-height: 1.65; }   /* the firm line under the mark, as first set (2026-10-18) */
.ftr__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(20px, 2vw, 32px); }
.ftr__h { margin-bottom: 16px; color: #fff; font: 600 14.5px/1.4 var(--sans); }
.ftr__h a, .ftr__col .ftr__h a { color: #fff; }   /* every column heading in white */
.ftr__h a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ftr__col ul { display: grid; gap: 11px; line-height: 1.4; }
.ftr__col a { color: rgba(255, 255, 255, .74); font-size: 14.5px; line-height: 1.4; }   /* a wrapped link keeps its lines close */
.ftr__col ul a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.ftr__reach { margin-top: 26px; }   /* the office and email under their own heading (2026-10-18) */
.ftr__reach .ftr__h { margin-bottom: 12px; }
.ftr__brand address { color: #fff; font-size: 15px; font-style: normal; line-height: 1.65; }
.ftr__mail { display: inline-block; margin-top: 14px; color: #fff; font-size: 15px; font-weight: 500; }
.ftr__mail:hover { text-decoration: underline; text-underline-offset: 5px; }
.ftr__socs { display: flex; gap: 10px; margin-top: 24px; }
.ftr__soc { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; color: #fff; transition: background .25s, border-color .25s, color .25s; }
.ftr__soc .icon { width: 17px; height: 17px; }
.ftr__soc:hover { background: #fff; border-color: #fff; color: var(--navy); }
/* the sign-up on a slim row of its own */
.ftr__sign { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 48px; align-items: center; padding-block: 40px; }
.ftr__sign h2 { color: #fff; font: 420 22px/1.3 var(--serif); font-variation-settings: "opsz" 24; }
.ftr__sign p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; max-width: 52ch; }
.ftr__sign form { position: relative; justify-self: end; width: 100%; max-width: 460px; }   /* the message sits under the field, out of the flow, so the field stays centred in the row */
.ftr__row { display: flex; gap: 14px; }   /* more room between the field and Subscribe (2026-10-20, was 8px) */
.ftr__row input { flex: 1; width: 0; min-width: 0; min-height: 46px; padding: 11px 14px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); color: #fff; font-size: 15px; }
.ftr__row input::placeholder { color: rgba(255, 255, 255, .55); }
.ftr__row input:focus { outline: none; border-color: #fff; }
.ftr__row button { min-height: 46px; padding: 0 18px; border: 1px solid #fff; border-radius: 2px; background: #fff; color: var(--navy); font: 550 14px/20px var(--sans); }
.ftr__msg { position: absolute; left: 0; right: 0; top: 100%; margin-top: 10px; color: rgba(255, 255, 255, .86); font-size: 13.5px; line-height: 1.45; }
.ftr__msg.is-ok { color: #fff; } .ftr__msg.is-ok::before { content: "\2713"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; background: #fff; color: var(--navy); font-size: 11px; font-weight: 700; vertical-align: 1px; }
.ftr__msg.is-error { color: #F3C6C6; }
.ftr__row button:disabled { opacity: .7; cursor: default; }
.ftr__msg:empty { display: none; }
.ftr__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 22px 28px; font-size: 13.5px; }
.ftr__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; }
.ftr__legal a:hover, .ftr__legal button:hover { color: #fff; }
.ftr__legal button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.ftr__copy { margin: 0; }

/* ---------- 27. Prose pages (articles, legal) ---------- */
.article { max-width: 760px; margin-inline: auto; }
.article h2 { margin: 48px 0 16px; font: 420 clamp(26px, 2.2vw, 32px)/1.2 var(--serif); font-variation-settings: "opsz" 72; color: var(--ink); }
.article p, .article li { font-size: 18px; line-height: 1.75; }
.article p + p { margin-top: 18px; }

/* ---------- 28. Arrival motion: quiet, and only for what starts below the fold ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); }
  .reveal.is-in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
  /* the pieces of a block arrive in turn and at their own pace (2026-10-18): --d is each one's place, --dur its pace (js/site.js 7) */
  .reveal-k .rv { opacity: 0; transform: translateY(18px); }
  .reveal-k.is-in .rv { opacity: 1; transform: none; transition: opacity var(--dur, .85s) var(--ease), transform calc(var(--dur, .85s) + .15s) var(--ease); transition-delay: var(--d, 0s); }
}
/* 28b. Small motion on icons (2026-10-18): a few details, each moving once as its section arrives, never a system.
   Icons in circles settle in, ticks draw themselves, the mail icon drops into its box; the pipeline's figures count up
   with their bars and its end arrow nudges forward now and then; market icons lift a little under the cursor.
   --t is each icon's place in its section, set by js/site.js. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes icon-settle { from { opacity: 0; transform: scale(.5) rotate(-28deg); } to { opacity: 1; transform: none; } }
  @keyframes icon-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
  @keyframes icon-drop { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
  @keyframes icon-nudge { 0%, 74%, 100% { transform: none; } 84% { transform: translateX(5px); } 92% { transform: translateX(-1px); } }
  :is(.reveal, .reveal-k).is-in :is(.mh, .point, .promise__k, .vnote, .fitbox__h, .close__pt) .disc > .icon,
  .js .cov.is-in .cov__step .disc > .icon { animation: icon-settle .75s cubic-bezier(.34, 1.45, .64, 1) backwards; animation-delay: calc(.3s + var(--t, 0s)); }
  :is(.reveal, .reveal-k) svg.icon:has(> use[href$="#check"]) { stroke-dasharray: 24; }
  :is(.reveal, .reveal-k).is-in svg.icon:has(> use[href$="#check"]) { animation: icon-draw .6s var(--ease) backwards; animation-delay: calc(.4s + var(--t, 0s)); }
  /* the engagement's numbered steps settle in turn (2026-10-18) */
  @keyframes tl-n { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
  .js .tl:is(.reveal, .reveal-k).is-in .tl__n { animation: tl-n .6s cubic-bezier(.34, 1.45, .64, 1) backwards; }
  .tl__item:nth-child(1) .tl__n { animation-delay: .3s; } .tl__item:nth-child(2) .tl__n { animation-delay: .7s; } .tl__item:nth-child(3) .tl__n { animation-delay: 1.1s; } .tl__item:nth-child(4) .tl__n { animation-delay: 1.5s; }
  /* 28c. Lines that draw themselves (2026-10-18): the struck-through promise, then our commitment underlined; crosses draw like ticks;
     the barriers' fix dash grows in. Each runs once, as its block arrives. */
  @keyframes icon-draw-x { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
  @keyframes dash-grow { from { transform: scaleX(0); } to { transform: none; } }
  .promise:is(.reveal, .reveal-k) .promise__q .strike { background-size: 0 1px; }
  .promise:is(.reveal, .reveal-k).is-in .promise__q .strike { background-size: 100% 1px; transition: background-size 1s cubic-bezier(.65, 0, .35, 1) .75s; }
  :is(.reveal, .reveal-k) svg.icon:has(> use[href$="#cross"]) { stroke-dasharray: 40; }
  :is(.reveal, .reveal-k).is-in svg.icon:has(> use[href$="#cross"]) { animation: icon-draw-x .7s var(--ease) backwards; animation-delay: calc(.4s + var(--t, 0s)); }
  .barrier__fix::before { transform-origin: left center; }
  :is(.reveal, .reveal-k):not(.is-in) .barrier__fix::before { transform: scaleX(0); }
  :is(.reveal, .reveal-k).is-in .barrier__fix::before { animation: dash-grow .7s var(--ease) backwards; animation-delay: calc(.9s + var(--d, 0s)); }
  :is(.reveal, .reveal-k).is-in .reaches .icon { animation: icon-drop .6s var(--ease) backwards; animation-delay: calc(.5s + var(--t, 0s)); }
  .js .cov:not(.is-in) .cov__step .disc > .icon { opacity: 0; }
  .cov__col:nth-child(2) { --t: .14s; } .cov__col:nth-child(3) { --t: .28s; } .cov__col:nth-child(4) { --t: .42s; }
  /* no ongoing animations anywhere (2026-10-18): the pipeline's end arrow no longer nudges on a loop */
  .mcard__meta .icon { transition: transform .45s var(--ease); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .card--hover:hover .mcard__meta .icon { transform: translateY(-2px) rotate(-8deg); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .marquee--light .marquee__track { flex-wrap: nowrap; justify-content: flex-start; width: max-content; }   /* in the hero, a still row of the first marks */
}

/* ---------- 29. Responsive ---------- */
@media (max-width: 1279.98px) {
  .tests { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tests__t { grid-column: 1 / -1; max-width: none; }
  .test { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 16px; border-top: 1px solid var(--line); }
  .test:nth-child(2) { border-left: 0; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mtile { aspect-ratio: 4 / 3; }
  .close__box { grid-column: 1 / -1; margin: -1px -1px 0; }
  .close__pts { grid-column: 1 / -1; }
  .close__pt:nth-child(odd) { border-left: 0; }
  .close__pt { border-top: 1px solid var(--line); }
  .case { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .case > .pic { grid-row: span 2; }
  .case__stats { grid-column: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 clamp(28px, 2.6vw, 40px) clamp(28px, 2.6vw, 40px); }
}
/* tablet: rows of three never leave one card alone on a row */
@media (min-width: 760px) and (max-width: 1023.98px) {
  .grid--3:not(:has(> :nth-child(4))) { --cols: 3; }
  .barriers { grid-template-columns: minmax(0, 1fr); }
  .barrier { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr auto auto; }
  .barrier .pic { grid-column: 1; grid-row: 1 / -1; aspect-ratio: auto; min-height: 100%; }
  .barrier > :not(.pic) { grid-column: 2; }
  .sw__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023.98px) {
  .reads > .card { flex-basis: calc((100% - var(--g)) / 2); }
  .hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; row-gap: var(--g); padding-block: 36px 56px; }
  .hero__copy { grid-column: 1 / -1; padding-bottom: 12px; }
  .hcard--a, .hcard--b { grid-row: auto; height: clamp(240px, 36vw, 340px); }
  .hcard--a { grid-column: 1; } .hcard--b { grid-column: 2; }
  .hcase { grid-column: 1 / -1; grid-row: auto; min-height: 460px; }
  .shead--split, .shead--row { grid-template-columns: minmax(0, 1fr); }
  .why { grid-template-columns: minmax(0, 1fr); }
  .thesis { grid-template-columns: minmax(0, 1fr); }
  .thesis__panel { flex-direction: row; }
  .thesis__panel > .pic { flex: 0 0 38%; min-height: 0; }
  .capability { grid-template-columns: minmax(0, 1fr); }
  .capability > .pic { grid-column: 1; grid-row: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .capability > .capm { grid-column: 1; grid-row: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .capability__words, .figs { grid-column: 1; }
  .parts { grid-template-columns: minmax(0, 1fr); }
  .points { grid-template-columns: minmax(0, 1fr); }
  .point { border-left: 0; border-top: 1px solid var(--line); }
  .point:first-child { border-top: 0; }
  .cov { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cov__col:nth-child(odd) { border-left: 0; }
  .cov__col:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
  .cov__end { grid-column: 1 / -1; }
  .promise { grid-template-columns: minmax(0, 1fr); }
  .steps3 { grid-template-columns: minmax(0, 1fr); }
  .case { grid-template-columns: minmax(0, 1fr); }
  .case > .pic { grid-row: auto; min-height: 0; aspect-ratio: 16 / 8; }
  .case__stats { grid-column: 1; }
  .value { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value > .pic { grid-column: 1 / -1; min-height: 0; aspect-ratio: 16 / 7; }
  .vcol:nth-of-type(1) { border-left: 0; }
  .vcol { border-top: 1px solid var(--line); }
  .vnotes { grid-template-columns: minmax(0, 1fr); }
  .vnote { border-left: 0; border-top: 1px solid var(--line); }
  .vnote:first-child { border-top: 0; }
  .fit { grid-template-columns: minmax(0, 1fr); }
  .fit__lead, .fitbox { grid-column: 1; }
  .fit__lead .actions { flex-direction: row; align-items: center; }
  .tl { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
  .faqs { grid-template-columns: minmax(0, 1fr); }
  .faqs__aside, .faq { grid-column: 1; }
  .ftr__main { grid-template-columns: minmax(0, 1fr); }
  .ftr .ftr__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ftr__sign { grid-template-columns: minmax(0, 1fr); } .ftr__sign form { justify-self: start; }
}
@media (max-width: 759.98px) {
  .reads > .card { flex-basis: 100%; }
  .grid--2, .grid--3, .grid--4, .barriers, .why { grid-template-columns: minmax(0, 1fr); --cols: 1; }
  .wcard { grid-template-columns: minmax(0, 1fr); } .wcard > .pic { min-height: 0; aspect-ratio: 16 / 9; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero .h1 span { display: inline; }
  .hcard--a, .hcard--b { grid-column: 1; height: 260px; }
  .hcase { min-height: 440px; }
  .hcase__top { flex-direction: column-reverse; gap: 16px; padding: 24px 24px 0; }
  .hcase__foot { padding: 24px; }
  /* on a phone the two models sit side by side and each row's name runs across both, above its values */
  .models > div { padding: 18px 14px; font-size: 14px; }
  .models .mh { grid-template-columns: minmax(0, 1fr); align-content: start; font-size: 18px; }
  .models > .mh { padding-block: 21px 17px; }
  .models .mh .disc { grid-row: auto; }
  .models .mv__v { font-size: 17px; }
  .thesis__panel { flex-direction: column; }
  .thesis__panel > .pic { flex: none; aspect-ratio: 16 / 9; }
  .figs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .fig { min-height: 130px; padding: 18px; }
  .cov { grid-template-columns: minmax(0, 1fr); }
  .cov__col { border-left: 0 !important; border-top: 1px solid var(--line-dark); }
  .cov__col:first-child { border-top: 0; }
  .tests { grid-template-columns: minmax(0, 1fr); }
  .test { flex-direction: row; align-items: center; padding: 16px 20px; border-left: 0; }
  .case__stats { grid-template-columns: minmax(0, 1fr); margin: 0 16px 16px; }
  .value { grid-template-columns: minmax(0, 1fr); }
  .vcol { border-left: 0; }
  /* on a phone the box reads as one list, then the other */
  .fitbox { display: flex; flex-direction: column; }
  .fitbox > :nth-child(even) { border-left: 0; }
  .fitbox__h--no, .fitbox__c--no { order: 2; }
  .fitbox__h--no { border-top: 1px solid var(--line); }
  .fitbox__c:empty { display: none; }
  .fitbox__c--yes:nth-last-child(2), .fitbox__c--yes:last-child { padding-bottom: 18px; }
  .tl, .tiles { grid-template-columns: minmax(0, 1fr); }
  .tl { row-gap: 40px; }
  .mtile { aspect-ratio: 16 / 11; }
  .fit__lead .actions { flex-direction: column; align-items: flex-start; }
  .close__pts { grid-template-columns: minmax(0, 1fr); }
  .close__pt { border-left: 0; }
  .ftr__nav { gap: 28px 20px; }
  .faq__a > div > div { padding-right: clamp(22px, 2vw, 30px); }
}
@media (max-width: 479.98px) { .actions .btn { width: 100%; } }


/* ---------- 30. Other pages (2026-10-18 rollout): every page opens with the homepage hero and uses the homepage sections; added here ---------- */
/* who owns what: three columns in one box, a circled icon over each, the lines level across the three */
.owners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); }
.owners > * { padding-inline: var(--pad); }
.owners > :not(.owners__c--1) { border-left: 1px solid var(--line); }
.owners__h { display: flex; align-items: center; gap: 14px; padding-block: 22px; border-bottom: 1px solid var(--line); background: var(--grey); }   /* the column heads in the tint */
.owners__h .h4 { font-size: clamp(20px, 1.4vw, 23px); }
.owners__c { display: flex; gap: 12px; align-items: flex-start; padding-block: 14px; border-top: 1px solid var(--line); color: var(--navy); font-size: 15.5px; line-height: 1.5; }
.owners__h + .owners__h + .owners__h + .owners__c, .owners__h + .owners__h + .owners__h + .owners__c + .owners__c, .owners__h + .owners__h + .owners__h + .owners__c + .owners__c + .owners__c { border-top: 0; }
.owners__c .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--accent); }
.owners__c:empty { border-top-color: transparent; }
@media (max-width: 759.98px) {
  .owners { display: flex; flex-direction: column; }
  .owners > * { border-left: 0 !important; }
  .owners__c--1 { order: 1; } .owners__c--2 { order: 2; } .owners__c--3 { order: 3; }
  .owners__h.owners__c--2, .owners__h.owners__c--3 { border-top: 1px solid var(--line); }
  .owners__c:empty { display: none; }
}
/* the hero of every page other than the homepage: the Who we serve hero everywhere (2026-10-18) - the words on the Navy, a vertical picture
   running to the right edge beside them, then a row that changes with the page type (the hub's pages, or a numbered strip of jump links) */
.phero { position: relative; margin-top: calc(-1 * var(--hdr)); color: #fff; }
.phero__top { position: relative; padding-top: var(--hdr); background: var(--navy) var(--wash) center / cover no-repeat; }
.phero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); min-height: clamp(400px, 30vw, 540px); align-items: center; padding-block: clamp(40px, 3.6vw, 64px); }
.phero__copy { grid-column: 1 / 7; display: grid; gap: 20px; justify-items: start; }
.phero .h1 { color: #fff; max-width: 20ch; }
.phero__lede { max-width: 60ch; color: rgba(255, 255, 255, .86); font-size: clamp(17px, 1.1vw, 18px); line-height: 1.6; text-wrap: pretty; }
.phero .actions { margin-top: 4px; }
.phero .btn { font-size: 14px; line-height: 20px; }
.phero .link { color: #fff; font-size: 15px; }
.phero__side { position: absolute; top: var(--hdr); right: 0; bottom: 0; left: calc(50% + var(--g)); }
.phero__side > .pic { position: absolute; inset: 0; }
/* under the buttons: the logos, or an article's key points */
.phero__logos { display: grid; gap: clamp(24px, 2vw, 32px); width: 100%; max-width: 640px; margin-top: clamp(18px, 1.8vw, 30px); }   /* the logos sit a little lower under their line */
.phero__logos p { color: rgba(255, 255, 255, .66); font-size: 14px; font-weight: 500; line-height: 1.5; }
.marquee--light .marquee__track { gap: clamp(36px, 3vw, 56px); animation-duration: 70s; }
.marquee--light img { height: calc(var(--h, 26px) * .78); opacity: .9; }   /* white versions with see-through knockouts (img/logos/light), never a filter */
/* the row for detail and market pages: a numbered strip of jump links fixed under the Navy, its last cell Navy to the window's edge */
.pstrip { position: relative; overflow: hidden; background: #fff; border-bottom: 1px solid var(--line); color: var(--navy); }
.pstrip__in { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.pstrip__c { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: clamp(22px, 1.9vw, 30px) var(--pad); border-left: 1px solid var(--line); color: var(--navy); cursor: pointer; }
.pstrip__c:first-child { border-left: 0; padding-left: 0; }
.pstrip__c:last-child { background: var(--navy); border-left-color: var(--navy); color: #fff; box-shadow: 0 0 0 100vmax var(--navy); clip-path: inset(0 -100vmax 0 0); }
.pstrip__c i { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line-2); border-radius: 50%; font-size: 12.5px; font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.pstrip__c:last-child i { border-color: rgba(255, 255, 255, .45); }
.pstrip__c b { font-size: clamp(15.5px, 1.05vw, 17px); font-weight: 500; line-height: 1.4; }
.pstrip__c--two { align-items: start; }
.pstrip__c--two i { margin-top: 2px; }
.pstrip__c--two b { display: grid; gap: 4px; font: 420 clamp(18px, 1.3vw, 21px)/1.3 var(--serif); font-variation-settings: "opsz" 24; }
.pstrip__c--two small { color: var(--muted); font: 400 14.5px/1.5 var(--sans); }
.pstrip__c--two:last-child small { color: rgba(255, 255, 255, .78); }
.pstrip__c--two .pstrip__chev { margin-top: 8px; }
.pstrip__chev { width: 12px; height: 12px; transition: transform .35s var(--ease); }
.pstrip__c--point { grid-template-columns: auto minmax(0, 1fr); align-items: start; cursor: default; font-size: 15px; line-height: 1.55; }
.pstrip__c--point .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--accent); }
.pstrip__c--point:last-child .icon { color: var(--accent-dark); }
.pstrip__c:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.pstrip__c--two:hover b { text-decoration: none; }
.pstrip__c--two:hover b > :first-child, .pstrip__c--two:hover b { text-decoration: none; }
.pstrip__c:hover .pstrip__chev { transform: translateY(2px); }
/* the row for hub pages: the hub's pages as a grid of links on the page */
.phub { display: grid; grid-template-columns: repeat(var(--c), minmax(0, 1fr)); column-gap: clamp(28px, 3vw, 48px); padding-top: clamp(16px, 1.4vw, 24px); }
.phub__i { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: 8px 16px; padding: 22px 0 26px; border-top: 1px solid var(--line); color: var(--navy); }
.phub__i:nth-child(-n+4) { border-top: 0; }
.phub[style*="--c:3"] .phub__i:nth-child(4) { border-top: 1px solid var(--line); }
.phub__i b { font: 420 clamp(21px, 1.6vw, 26px)/1.25 var(--serif); font-variation-settings: "opsz" 36; }
.phub__i span { grid-column: 1; color: var(--muted); font-size: 15px; line-height: 1.55; }
.phub__chev { grid-column: 2; grid-row: 1; align-self: center; width: 12px; height: 12px; transition: transform .35s var(--ease); }
.phub__i:hover b { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.phub__i:hover .phub__chev { transform: translateX(3px); }
/* tabs (after Belkins' collaboration tabs): the options on the left, the chosen one beside them */
.ptabs { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); border: 1px solid var(--line); }
.ptabs__list { display: grid; align-content: start; border-right: 1px solid var(--line); }
.ptabs__tab { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; width: 100%; padding: 24px var(--pad); border: 0; border-top: 1px solid var(--line); background: #fff; color: var(--navy); text-align: left; cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease); }
.ptabs__tab:first-child { border-top: 0; }
.ptabs__tab i { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line-2); border-radius: 50%; font-size: 12.5px; font-style: normal; font-weight: 600; }
.ptabs__tab b { display: block; font: 420 clamp(19px, 1.35vw, 22px)/1.3 var(--serif); font-variation-settings: "opsz" 24; }
.ptabs__tab small { display: block; margin-top: 6px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.ptabs__tab:hover:not([aria-selected="true"]) { background: var(--tint); }
.ptabs__tab[aria-selected="true"] { background: var(--navy) var(--wash) center / cover; color: #fff; }
.ptabs__tab[aria-selected="true"] small { color: rgba(255, 255, 255, .78); }
.ptabs__tab[aria-selected="true"] i { border-color: rgba(255, 255, 255, .4); }
.ptabs__panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); height: 100%; }
.ptabs__panel[hidden] { display: none; }
.ptabs__panel > .pic { min-height: 100%; }
.ptabs__body { display: grid; gap: 16px; align-content: start; padding: var(--pad-l); }
.ptabs__body > p { font-size: 16px; line-height: 1.6; }
.ptabs__get { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: var(--tint); color: var(--navy); font-size: 15px; line-height: 1.5; }
.ptabs__get b { display: block; margin-bottom: 4px; color: var(--muted); font-size: 13.5px; font-weight: 500; }
.ptabs__get .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }

/* challenge and response (after Belkins' challenge grid): the challenge in a box beside how we address it; the row is its link */
.pchals { display: grid; gap: var(--g); }
.pchal { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--line); background: #fff; transition: border-color .35s var(--ease), transform .45s var(--ease); }
.pchal__q { display: grid; gap: 12px; align-content: start; padding: var(--pad-l); }
.pchal__n { color: var(--accent); font: 420 15px/1 var(--serif); }
.pchal__q > p:not([class]) { max-width: 56ch; font-size: 16px; line-height: 1.6; }
.pchal__kind { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--muted); font-size: 14px; font-weight: 500; }
.pchal__kind .icon { width: 16px; height: 16px; color: var(--accent); }
.pchal__a { display: grid; gap: 14px; align-content: start; padding: var(--pad-l); background: var(--tint); }
.pchal__lead { color: var(--navy); font: 420 clamp(19px, 1.4vw, 22px)/1.4 var(--serif); font-variation-settings: "opsz" 24; text-wrap: pretty; }
.pchal__a .ilist li { border-color: var(--line-2); }
.pchal__a .link { margin-top: 4px; }
@media (hover: hover) {
  .pchal { cursor: pointer; }
  .pchal:hover { border-color: var(--line-2); transform: translateY(-3px); }
  .pchal:hover .link { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
  .pchal:hover .link .icon { transform: translateX(4px); }
}

/* the KPI panel (after Belkins): one Navy block, the words left, four figures right */
.pstat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--navy) var(--wash) center / cover no-repeat; color: rgba(255, 255, 255, .86); }
.pstat__words { display: grid; gap: 20px; align-content: center; justify-items: start; padding: clamp(36px, 3.6vw, 60px) clamp(32px, 4vw, 64px) clamp(36px, 3.6vw, 60px) var(--pad-l); }
.pstat__words .h2 { color: #fff; }
.pstat__words p { max-width: 56ch; font-size: 16.5px; line-height: 1.65; }
.pstat .link { color: #fff; }
.pstat__figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 1px solid var(--line-dark); }
.pstat__f { display: grid; gap: 12px; align-content: end; min-height: clamp(160px, 12vw, 210px); padding: var(--pad-l); border-top: 1px solid var(--line-dark); }
.pstat__f:nth-child(-n+2) { border-top: 0; }
.pstat__f:nth-child(even) { border-left: 1px solid var(--line-dark); }
.pstat__f b { color: #fff; font: 420 clamp(40px, 3.4vw, 58px)/1 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.02em; }
.pstat__f--word b { font-size: clamp(28px, 2.2vw, 38px); line-height: 1.1; }
.pstat__f span { color: rgba(255, 255, 255, .76); font-size: 15px; line-height: 1.45; }

/* the engagement as one rail (after Belkins' timeline): the stages on one line inside one box */
.prail { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); border: 1px solid var(--line); }
.prail::before { content: ""; position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--pad-l) + 19px); height: 1px; background: var(--line-2); }
.prail__s { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 12px; padding: var(--pad-l) var(--pad); }
.prail__n { position: relative; z-index: 1; display: inline-grid; place-items: center; justify-self: start; width: 38px; height: 38px; border: 1px solid var(--navy); border-radius: 50%; background: #fff; color: var(--navy); font-size: 13px; font-weight: 600; box-shadow: 0 0 0 8px #fff; }
.prail__when { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--accent); font-size: 14px; font-weight: 600; }
.prail__when .icon { width: 16px; height: 16px; }
.prail__s > p:not([class]) { font-size: 16px; line-height: 1.6; }
.prail__get { display: flex; gap: 10px; align-items: flex-start; align-self: end; margin-top: 6px; padding: 14px 16px; background: var(--tint); color: var(--navy); font-size: 15px; line-height: 1.5; }
.prail__get .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }

/* the representative week as a table */
.psit { border: 1px solid var(--line); }
.psit__t { padding: 22px var(--pad); color: var(--navy); font: 420 clamp(20px, 1.5vw, 24px)/1.3 var(--serif); font-variation-settings: "opsz" 36; }
.psit__r { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 2.4fr) minmax(0, 2.4fr) minmax(0, 1.2fr); gap: 24px; align-items: center; padding: 21px var(--pad); border-top: 1px solid var(--line); font-size: 15px; }
.psit__r--h { padding-block: 13px; background: var(--tint); color: var(--muted); font-size: 13.5px; font-weight: 600; }
.psit__r b { color: var(--navy); font: 420 17px/1.45 var(--serif); font-variation-settings: "opsz" 24; }
.psit__r em { color: var(--accent); font-size: 14px; font-style: normal; font-weight: 600; }
.psit__figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.psit__f { display: grid; gap: 8px; padding: var(--pad); border-left: 1px solid var(--line); }
.psit__f:first-child { border-left: 0; background: var(--navy) var(--wash) center / cover; color: #fff; }
.psit__f b { color: var(--navy); font: 420 clamp(34px, 2.8vw, 48px)/1 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.psit__f span { color: var(--muted); font-size: 14.5px; }
.psit__f:first-child b { color: #fff; }
.psit__f:first-child span { color: rgba(255, 255, 255, .8); }

/* points that open one at a time, beside a picture */
.pacc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--g) var(--split); align-items: center; }
.pacc > .pic { aspect-ratio: 1 / 1; }
.pacc__list { border: 1px solid var(--line); }
.pacc__i + .pacc__i { border-top: 1px solid var(--line); }
.pacc__i { transition: background-color .35s var(--ease); }
.pacc__i.is-open { background: var(--grey); }   /* the open point sits in the tint */
.pacc__q { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; width: 100%; padding: 20px var(--pad); border: 0; background: none; color: var(--navy); text-align: left; cursor: pointer; }
.pacc__q b { font: 420 clamp(19px, 1.35vw, 22px)/1.3 var(--serif); font-variation-settings: "opsz" 24; }
.pacc__q:hover b { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.pacc__chev { width: 12px; height: 12px; transition: transform .35s var(--ease); }
.pacc__i.is-open .pacc__chev { transform: rotate(180deg); }
.pacc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.pacc__i.is-open .pacc__a { grid-template-rows: 1fr; }
.pacc__a > div { overflow: hidden; }
.pacc__a p { padding: 0 var(--pad) 22px calc(var(--pad) + 54px); color: var(--text); font-size: 16px; line-height: 1.6; }

/* one result, opened up */
.pcase { display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(0, 6.2fr) minmax(0, 2.6fr); border: 1px solid var(--line); }
.pcase > .pic { min-height: 100%; }
.pcase__main { display: grid; gap: 16px; align-content: start; padding: var(--pad-l); }
.pcase__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--line); }   /* one rule above the three columns, not a piece over each (2026-10-19) */
.pcase__cols > div { display: grid; gap: 12px; align-content: start; }
.pcase__h { color: var(--navy); font: 420 18px/1.3 var(--serif); font-variation-settings: "opsz" 24; }
.pcase__cols p, .pcase__cols li { font-size: 15px; line-height: 1.55; }
.pcase__cols .ilist { gap: 10px; }
.pcase__cols .ilist li { display: block; padding: 0; border-top: 0; color: var(--text); }   /* the points without rules or ticks */
.pcase__main .link { margin-top: 4px; }
.pcase__stats { display: grid; background: var(--navy) var(--wash) center / cover no-repeat; }
.pcase__s { display: grid; gap: 8px; align-content: center; padding: var(--pad); border-top: 1px solid var(--line-dark); }
.pcase__s:first-child { border-top: 0; }
.pcase__s b { color: #fff; font: 420 clamp(32px, 2.6vw, 44px)/1 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.02em; }
.pcase__s span { color: rgba(255, 255, 255, .76); font-size: 14.5px; }

/* the results as a table (after Belkins' case table); each row is its link */
.pctab { border: 1px solid var(--line); }
.pctab__r { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3.6fr) minmax(0, 3.6fr) minmax(0, 1.8fr) 16px; gap: 24px; align-items: center; padding: 20px var(--pad); border-top: 1px solid var(--line); color: var(--text); transition: background-color .3s var(--ease); }
.pctab__r--h { padding-block: 13px; border-top: 0; background: var(--tint); color: var(--muted); font-size: 13.5px; font-weight: 600; }
a.pctab__r:hover { background: var(--tint); }
a.pctab__r:hover .pctab__t { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.pctab__m { color: var(--muted); font-size: 14px; font-weight: 500; }
.pctab__t { color: var(--navy); font: 420 18px/1.35 var(--serif); font-variation-settings: "opsz" 24; }
.pctab__c { font-size: 15px; line-height: 1.5; }
.pctab__f b { display: block; color: var(--navy); font: 420 clamp(26px, 2vw, 32px)/1 var(--serif); font-variation-settings: "opsz" 72; }
.pctab__f small { display: block; margin-top: 6px; color: var(--muted); font-size: 13.5px; }
.pctab__i { width: 12px; height: 12px; color: var(--navy); transition: transform .35s var(--ease); }
a.pctab__r:hover .pctab__i { transform: translateX(3px); }

/* questions answered in place, two to a row */
.pans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); }
.pans__i { display: grid; gap: 12px; align-content: start; padding: var(--pad-l) var(--pad); border: 1px solid var(--grey); background: var(--grey); }   /* filled with the tint, so a wall of answers is not a wall of white */
.pans__q { color: var(--navy); font: 420 clamp(20px, 1.45vw, 23px)/1.35 var(--serif); font-variation-settings: "opsz" 24; text-wrap: balance; }
.pans__i p { font-size: 16px; line-height: 1.6; }

/* where to go next: wide cards, the picture on the left */
.prels { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--g); }
.prel { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.prel .pic { min-height: 190px; }
.prel__body { display: grid; grid-template-rows: auto auto 1fr; gap: 10px; padding: var(--pad); }
.prel__meta { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; font-weight: 500; }
.prel__meta .icon { width: 14px; height: 14px; color: var(--accent); }
.prel__t { color: var(--ink); font: 420 clamp(19px, 1.35vw, 22px)/1.3 var(--serif); font-variation-settings: "opsz" 24; text-wrap: balance; }
.prel .link { align-self: end; font-size: 15px; }

/* a call to action in a box of its own */
.pnext { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); border: 1px solid var(--line); }
.pnext > .pic { min-height: 230px; }
.pnext__body { display: grid; gap: 14px; align-content: center; justify-items: start; padding: var(--pad-l); }
.pnext__body p { max-width: 64ch; font-size: 16.5px; line-height: 1.6; }
.pnext__body .btn { max-width: 100%; white-space: normal; text-align: left; }   /* a long label wraps instead of pushing the box wider */

/* how other pages end: the Navy invitation with three ticked points, a picture beside it */
.pclose { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pclose__box { display: grid; gap: 20px; align-content: center; justify-items: start; padding: clamp(36px, 4vw, 64px) var(--pad-l); }
.pclose__pts { display: grid; gap: 10px; margin: 4px 0; }
.pclose__pts li { display: flex; gap: 12px; align-items: flex-start; color: rgba(255, 255, 255, .86); font-size: 15.5px; line-height: 1.5; }
.pclose__pts b { color: #fff; font-weight: 600; }
.pclose__pts .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--accent-dark); }
.pclose > .pic { min-height: 100%; }

/* the markets as an index in one box; each row is its link */
.pidx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); }
.pidx__r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 18px; row-gap: 4px; align-content: start; padding: 22px var(--pad); border-top: 1px solid var(--line); color: var(--text); transition: background-color .3s var(--ease); }
.pidx__r:nth-child(-n+2) { border-top: 0; }
.pidx__r:nth-child(even) { border-left: 1px solid var(--line); }
.pidx__r .disc { grid-row: 1 / 4; }
.pidx__n { color: var(--navy); font: 420 clamp(19px, 1.35vw, 22px)/1.3 var(--serif); font-variation-settings: "opsz" 24; }
.pidx__b { grid-column: 2; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.pidx__d { grid-column: 2; color: var(--navy); font-size: 15px; font-weight: 500; }
.pidx__i { grid-column: 3; grid-row: 1; width: 12px; height: 12px; margin-top: 8px; color: var(--navy); transition: transform .35s var(--ease); }
.pidx__r:hover { background: var(--tint); }
.pidx__r:hover .pidx__n { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.pidx__r:hover .pidx__i { transform: translateX(3px); }

/* the market pages' hero (2026-10-19, live on Capital markets and private credit first): no buttons; under the introduction "Where
   growth stalls in this market" turns like the homepage hero's case card (a label, ticks, a circled icon and a serif line, js 3k),
   then what we deliver on one still line after a hairline */
.phero--glance .phero__copy { gap: 22px; }
.mglance { display: grid; gap: 14px; width: 100%; max-width: 640px; margin-top: 8px; }   /* close under the buttons (2026-10-19: the gap was too big) */   /* no box: set like the logos under the buttons on the other heroes */
.mglance__top { display: flex; align-items: baseline; gap: 12px; }
.mglance__n { color: rgba(255, 255, 255, .5); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }   /* a counter after the label, in place of progress ticks (2026-10-19) */
.mglance__n b { color: #fff; font-weight: 600; }
.mglance__k { color: rgba(255, 255, 255, .66); font-size: 14px; font-weight: 500; line-height: 1.5; }
.mglance__slides { display: grid; }
.mglance__s { grid-area: 1 / 1; display: flex; align-items: center; gap: 12px; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.mglance__s.is-on { opacity: 1; transform: none; }
.mglance__s .disc { width: 32px; height: 32px; }
.mglance__s .disc .icon { width: 14px; height: 14px; }
.mglance__s b { color: #fff; font: 420 clamp(17px, 1.15vw, 19px)/1.3 var(--serif); font-variation-settings: "opsz" 36; letter-spacing: -.01em; text-wrap: balance; }
.mglance__deliver { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; }
.mglance__deliver .icon { width: 14px; height: 14px; color: var(--accent-dark); }
.mglance__deliver span { color: rgba(255, 255, 255, .66); font-size: 14px; font-weight: 500; }
.mglance__deliver b { color: #fff; font-size: 14.5px; font-weight: 550; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .mglance__s { transition: none; } }
/* the network map (2026-10-19, the old site's "mandate in a circle" exhibit): the words beside an example panel; your mandate in a Navy
   circle at the left, two arcs around it, the five kinds of counterparty on the outer arc, the routes in below */
.pnet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--g) var(--split); align-items: center; }
.pnet__words { display: grid; gap: 20px; justify-items: start; }
.pnet__words > p { font-size: 17px; line-height: 1.62; }
.pnet__block { display: grid; gap: 22px; width: fit-content; max-width: 100%; }   /* the points and what you receive as one block, as wide as their words (2026-10-19) */
.pnet__gets { display: flex; gap: 12px; align-items: flex-start; padding: 16px 20px; border: 1px solid var(--line); background: var(--tint); color: var(--navy); font-size: 15px; line-height: 1.5; }   /* outlined, no wider than the block */
.pnet__gets b { display: block; margin-bottom: 4px; color: var(--muted); font-size: 13.5px; font-weight: 500; }
.pnet__gets .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--accent); flex: none; }
.pnet__panel { margin: 0; border: 1px solid var(--line); background: #fff; }
.pnet__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 22px var(--pad) 18px; border-bottom: 1px solid var(--line); }
.pnet__head p { color: var(--ink); font: 420 clamp(19px, 1.4vw, 22px)/1.3 var(--serif); font-variation-settings: "opsz" 24; }
.pnet__head span { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.pnet__head span .icon { width: 15px; height: 15px; }
.pnet__map { --cx: 64px; --r: 200px; --h: 360px; --d: 42px; --step: 21deg; --core: 104px; position: relative; overflow: hidden; height: var(--h); margin: 0; --ox: var(--pad); }   /* edge to edge in the panel: the circles run through to its left border (2026-10-19) */   /* the original height, flush with the lines above and below, so the outer circle runs off the top and the foot alike (2026-10-19) */
.pnet__rings::before, .pnet__rings::after { content: ""; position: absolute; top: 50%; left: calc(var(--cx) + var(--ox, 0px)); border: 1px solid #E4E9EF; border-radius: 50%; translate: -50% -50%; pointer-events: none; }   /* two fainter rings between the others */
.pnet__rings::before { width: calc(var(--r) * .8); height: calc(var(--r) * .8); }
.pnet__rings::after { width: calc(var(--r) * 1.55); height: calc(var(--r) * 1.55); }
.pnet__map::before, .pnet__map::after { content: ""; position: absolute; top: 50%; left: calc(var(--cx) + var(--ox, 0px)); border: 1px solid var(--line-2); border-radius: 50%; translate: -50% -50%; pointer-events: none; }
.pnet__map::before { width: calc(var(--r) * 1.1); height: calc(var(--r) * 1.1); }
.pnet__map::after { width: calc(var(--r) * 2); height: calc(var(--r) * 2); clip-path: inset(0 0 0 50%); }   /* the outer circle's right half only: no stray pieces in the left corners (2026-10-19) */
.pnet__core { position: absolute; z-index: 2; top: 50%; left: calc(var(--cx) + var(--ox, 0px)); translate: -50% -50%; display: grid; place-items: center; width: calc(var(--core) * .8); height: calc(var(--core) * .8); margin: 0; border: 1.5px solid var(--navy); border-radius: 50%; background: #fff; box-shadow: 0 0 0 8px var(--tint); color: var(--navy); }   /* the icon alone in a Navy ring (variant 3, chosen 2026-10-19); the words for screen readers only */
.pnet__core .icon { width: 38%; height: 38%; color: var(--navy); }
.pnet__pt { --a: calc((var(--i) - 2) * var(--step)); position: absolute; z-index: 2; left: calc(var(--cx) + var(--ox, 0px) + cos(var(--a)) * var(--r)); top: calc(50% + sin(var(--a)) * var(--r)); translate: calc(var(--d) / -2) -50%; display: flex; align-items: center; gap: 12px; color: var(--navy); font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.pnet__disc { display: grid; place-items: center; flex: none; width: var(--d); height: var(--d); border: 1px solid var(--navy); border-radius: 50%; background: #fff; }
.pnet__disc .icon { width: 42%; height: 42%; color: var(--navy); }
.pnet__foot { display: grid; gap: 12px; padding: 18px var(--pad) 22px; border-top: 1px solid var(--line); }
.pnet__sub { color: var(--muted); font-size: 13.5px; font-weight: 600; }
.pnet__routes { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pnet__routes li { display: flex; align-items: center; gap: 8px; color: var(--navy); font-size: 15px; font-weight: 500; }
.pnet__routes .icon { width: 15px; height: 15px; color: var(--accent); }
.pnet__note { padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
@media (max-width: 1279.98px) { .pnet { grid-template-columns: minmax(0, 1fr); } .pnet__map { --cx: 80px; --r: 230px; --h: 380px; --d: 44px; --core: 112px; } }
@media (max-width: 759.98px) { .pnet__map { --cx: 30px; --r: 112px; --h: 250px; --d: 32px; --core: 74px; --step: 24deg; margin-inline: 0; --ox: 10px; } .pnet__core { font-size: 10px; line-height: 12px; gap: 4px; } .pnet__core .icon { width: 20px; height: 20px; } .pnet__pt { gap: 8px; font-size: 12px; } }
@media (max-width: 359.98px) { .pnet__map { --cx: 24px; --r: 92px; --h: 220px; --d: 28px; --core: 64px; --step: 26deg; margin-inline: 0; --ox: 6px; } .pnet__core { font-size: 9px; line-height: 11px; } .pnet__core .icon { width: 17px; height: 17px; } .pnet__pt { gap: 6px; font-size: 11px; } }
@media (max-width: 1023.98px) {
  .phero__copy { grid-column: 1 / -1; }
  .phero__grid { min-height: 0; padding-block: 40px 36px; }
  .phero__side { position: relative; top: auto; left: auto; height: clamp(240px, 46vw, 380px); }
  .phub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phub__i:nth-child(n+3) { border-top: 1px solid var(--line) !important; }
  .phub__i:nth-child(-n+2) { border-top: 0 !important; }
  .pstrip__in { grid-template-columns: minmax(0, 1fr); }
  .pstrip__c { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .pstrip__c:first-child { border-top: 0; }
  .pstrip__c:last-child { padding-left: var(--pad); margin-left: calc(-1 * var(--pad)); border-top-color: var(--navy); clip-path: inset(0 -100vmax); }
  .ptabs { grid-template-columns: minmax(0, 1fr); }
  .ptabs__list { border-right: 0; border-bottom: 1px solid var(--line); }
  .ptabs__panel { grid-template-columns: minmax(0, 1fr); }
  .ptabs__panel > .pic { min-height: 0; aspect-ratio: 16 / 9; }
  .pchal { grid-template-columns: minmax(0, 1fr); }
  .pstat { grid-template-columns: minmax(0, 1fr); }
  .pstat__figs { border-left: 0; border-top: 1px solid var(--line-dark); }
  .prail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prail::before { display: none; }
  .prail__s:nth-child(n+3) { border-top: 1px solid var(--line); }
  .prail__s:nth-child(even) { border-left: 1px solid var(--line); }
  .psit__r { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 24px; }
  .psit__r b { grid-column: 1 / -1; }
  .psit__r--h { display: none; }
  .pacc { grid-template-columns: minmax(0, 1fr); }
  .pacc > .pic { aspect-ratio: 16 / 9; }
  .pcase { grid-template-columns: minmax(0, 1fr); }
  .pcase > .pic { min-height: 0; aspect-ratio: 16 / 9; }
  .pcase__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pcase__s { border-top: 0; border-left: 1px solid var(--line-dark); }
  .pcase__s:first-child { border-left: 0; }
  .pctab__r { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; }
  .pctab__r--h { display: none; }
  .pctab__m, .pctab__t, .pctab__c { grid-column: 1; }
  .pctab__f { grid-column: 1; }
  .pctab__i { grid-column: 2; grid-row: 1; }
  .prels { grid-template-columns: minmax(0, 1fr); }
  .pclose { grid-template-columns: minmax(0, 1fr); }
  .pclose > .pic { min-height: 0; aspect-ratio: 16 / 9; }
  .pidx { grid-template-columns: minmax(0, 1fr); }
  .pidx__r { border-left: 0 !important; border-top: 1px solid var(--line); }
  .pidx__r:first-child { border-top: 0; }
}
@media (max-width: 759.98px) {
  .phub { grid-template-columns: minmax(0, 1fr); }
  .phub__i:nth-child(n+2) { border-top: 1px solid var(--line) !important; }
  .pcase__cols, .pans { grid-template-columns: minmax(0, 1fr); }
  .prail { grid-template-columns: minmax(0, 1fr); }
  .prail__s { border-left: 0 !important; border-top: 1px solid var(--line); }
  .prail__s:first-child { border-top: 0; }
  .psit__r { grid-template-columns: minmax(0, 1fr); }
  .psit__figs { grid-template-columns: minmax(0, 1fr); }
  .psit__f { border-left: 0; border-top: 1px solid var(--line); }
  .psit__f:first-child { border-top: 0; }
  .pnext { grid-template-columns: minmax(0, 1fr); }
  .pnext > .pic { min-height: 0; aspect-ratio: 16 / 9; }
  .pcase__stats { grid-template-columns: minmax(0, 1fr); }
  .pcase__s { border-left: 0; border-top: 1px solid var(--line-dark); }
  .pcase__s:first-child { border-top: 0; }
  .prel { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .prel .pic { min-height: 150px; }
}

/* a picture and its words in one box */
.pfeat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border: 1px solid var(--line); }
.pfeat > .pic { min-height: 100%; aspect-ratio: auto; }
.pfeat--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pfeat--flip > .pic { order: 2; }
.pfeat__body { display: grid; gap: 18px; align-content: center; justify-items: start; padding: clamp(32px, 3.4vw, 56px) var(--pad-l); }
.pfeat__body > p { max-width: 62ch; font-size: 16.5px; line-height: 1.65; }
/* articles in a grid of whole cards */
.pgrid { row-gap: var(--g); }
.pgrid .pic { aspect-ratio: 16 / 10; }
.pgrid .part__body > p:not([class]) { font-size: 15.5px; }
/* forms other than the enquiry: the careers application */
.pform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px var(--g); padding: var(--pad-l); border: 1px solid var(--line); }
.pform__f { display: grid; gap: 8px; align-content: start; }   /* a field keeps its own height when its neighbour shows an error */
.pform__f--full { grid-column: 1 / -1; }
.pform label, .pform__lab { color: var(--navy); font-size: 15px; font-weight: 600; }
.pform input::placeholder, .pform textarea::placeholder { color: #A7B3BF; }
.pform input, .pform select, .pform textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--line-2); background: #fff; color: var(--navy); font-size: 16px; }
/* the dropdown's arrow drawn in, set in from the edge by the same 16px the words keep (2026-10-19) */
.pform select { appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23062543' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 18px center / 12px 8px; }
/* the resume: a box holding its own button and the file's name; only the button opens the picker (2026-10-19) */
.pform__file { position: relative; display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 7px 14px 7px 7px; border: 1px solid var(--line-2); background: #fff; min-width: 0; }
.pform .pform__file-in { position: absolute; left: 8px; top: 50%; width: 1px; height: 1px; padding: 0; min-height: 0; border: 0; opacity: 0; pointer-events: none; overflow: hidden; clip-path: inset(50%); }
.pform__file-btn { flex: none; padding: 6px 14px; line-height: 1.5; border: 1px solid var(--line-2); background: var(--tint); color: var(--navy); font-size: 14.5px; font-weight: 600; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.pform__file-btn:hover { border-color: var(--navy); }
.pform__file-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.pform__file-name { min-width: 0; overflow: hidden; color: var(--muted); font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
.pform__file.has-file .pform__file-name { color: var(--navy); }
.pform__file:has([aria-invalid="true"]) { border-color: #B42318; }
.pform textarea { min-height: 130px; resize: vertical; }
.pform input:focus, .pform select:focus, .pform textarea:focus { outline: none; border-color: var(--navy); }
.pform [aria-invalid="true"] { border-color: #B42318; }
.pform__err { color: #B42318; font-size: 14px; }
.pform__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.pform__status { font-size: 15px; color: var(--navy); }
@media (max-width: 1023.98px) { .pfeat, .pfeat--flip { grid-template-columns: minmax(0, 1fr); } .pfeat > .pic { order: 0; aspect-ratio: 16 / 9; min-height: 0; } }
@media (max-width: 759.98px) { .pform { grid-template-columns: minmax(0, 1fr); } }
/* a sent form: a confirmation panel over it (2026-10-21, "an actual pop-up over the form"), the same white box, a Navy tick, the thanks in
   the serif, what happens next and a way back; it fades in and its words settle up a little */
.pform { position: relative; }
.pform__done { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: var(--pad-l); background: #fff; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s linear .4s; }
.pform.is-sent .pform__done { opacity: 1; visibility: visible; transition: opacity .4s var(--ease); }
.pform__done-in { display: grid; justify-items: center; gap: 12px; max-width: 440px; text-align: center; transform: translateY(12px); transition: transform .7s cubic-bezier(.34, 1.3, .64, 1); }
.pform.is-sent .pform__done-in { transform: none; }
.pform__done-disc { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 8px; border-radius: 50%; background: var(--navy); color: #fff; }
.pform__done-disc .icon { width: 28px; height: 28px; stroke-dasharray: 24; }
.pform.is-sent .pform__done-disc .icon { animation: done-draw .6s var(--ease) .25s backwards; }
@keyframes done-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
.pform__done-t { color: var(--navy); font: 420 clamp(26px, 2vw, 32px)/1.2 var(--serif); font-variation-settings: "opsz" 36; outline: none; }
.pform__done-in p { color: var(--text); font-size: 16px; line-height: 1.6; text-wrap: balance; }
.pform__done-go { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; margin-top: 10px; }
.pform__done-again { padding: 10px 0; border: 0; background: none; color: var(--navy); font: 500 15px/1.4 var(--sans); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; cursor: pointer; }
.pform__done-again:hover { text-decoration-thickness: 2px; }
@media (prefers-reduced-motion: reduce) { .pform__done, .pform__done-in { transition: none; } .pform.is-sent .pform__done-disc .icon { animation: none; } }

/* the phone number's country-code picker (2026-10-21): the button joined to the number field, the list opening under both, searchable */
.tel { position: relative; display: flex; min-width: 0; }
.tel__cc { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 12px 0 14px; border: 1px solid var(--line-2); border-right: 0; background: #F4F7FA; color: var(--navy); font: 500 16px/1 var(--sans); font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.tel__cc:hover { background: #EEF3F8; }
.tel__cc[aria-expanded="true"] { border-color: var(--navy); }
.tel__cc:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.tel__cc .icon { width: 12px; height: 12px; opacity: .7; transition: transform .2s ease; }
.tel__cc[aria-expanded="true"] .icon { transform: rotate(180deg); }
.tel__flag { font-size: 18px; line-height: 1; }
.tel > input[type="tel"] { flex: 1 1 auto; min-width: 0; }
.tel__pop { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; min-width: 260px; border: 1px solid var(--navy); background: #fff; }
.pform .tel__q { min-height: 48px; border: 0; border-bottom: 1px solid var(--line); background: #fff; }
.pform .tel__q:focus { border-bottom-color: var(--line); }
.tel__list { max-height: 264px; margin: 0; padding: 4px 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.tel__list [role="option"] { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: var(--navy); font-size: 15px; line-height: 1.35; cursor: pointer; }
.tel__list [role="option"].is-active { background: #EEF3F8; }
.tel__list [aria-selected="true"] { font-weight: 600; }
.tel__name { flex: 1; min-width: 0; }
.tel__list b { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.tel__sep { height: 1px; margin: 4px 14px; background: var(--line); }
.tel__none { padding: 12px 14px; color: var(--muted); font-size: 15px; }

/* the fit check: questions with three answers each, the reading in a Navy block beside them */
.pquiz { display: grid; grid-template-columns: minmax(0, 7.6fr) minmax(0, 4.4fr); gap: var(--g); align-items: start; }
.pquiz__form { display: grid; gap: 10px; }
.pquiz__q { display: grid; gap: 14px; margin: 0; padding: 20px var(--pad) 22px; border: 1px solid var(--line); }
.pquiz__q legend { float: left; display: flex; align-items: center; gap: 14px; width: 100%; color: var(--navy); font: 420 clamp(19px, 1.35vw, 22px)/1.3 var(--serif); font-variation-settings: "opsz" 24; }
.pquiz__q legend i { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1px solid var(--line-2); border-radius: 50%; font: 600 12.5px/1 var(--sans); font-style: normal; }
.pquiz__opts { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pquiz__o { position: relative; cursor: pointer; }
.pquiz__o input { position: absolute; opacity: 0; pointer-events: none; }
.pquiz__o span { display: flex; align-items: center; min-height: 48px; height: 100%; padding: 10px 14px; border: 1px solid var(--line-2); color: var(--navy); font-size: 15px; line-height: 1.35; transition: border-color .25s var(--ease), background-color .25s var(--ease); }
.pquiz__o span { gap: 12px; }
.pquiz__o span::before { content: ""; flex: none; width: 16px; height: 16px; border: 1.5px solid #B9C3CD; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px #fff; transition: border-color .25s var(--ease), background-color .25s var(--ease); }   /* a round choice marker, so each option reads as one to click (2026-10-19) */
.pquiz__o:hover span { border-color: var(--navy); background: var(--tint); }
.pquiz__o:hover span::before { border-color: var(--navy); }
.pquiz__o input:checked + span { border-color: var(--navy); background: var(--tint); font-weight: 600; }
.pquiz__o input:checked + span::before { border-color: var(--navy); background: var(--navy); }
.pquiz__o input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.pquiz__out { position: sticky; top: calc(var(--hdr) + 28px); display: flex; flex-direction: column; gap: 14px; padding: var(--pad) var(--pad-l) calc(var(--pad) + 2px); }   /* shorter, and in view while the questions scroll (2026-10-19) */
.pquiz__count { display: flex; align-items: baseline; gap: 12px; color: rgba(255, 255, 255, .8); font-size: 15px; }
.pquiz__count b { color: #fff; font: 420 clamp(44px, 3.6vw, 62px)/1 var(--serif); font-variation-settings: "opsz" 72; }
.pquiz__t { color: #fff; font: 420 clamp(21px, 1.55vw, 25px)/1.35 var(--serif); font-variation-settings: "opsz" 36; text-wrap: balance; }
.pquiz__d { color: rgba(255, 255, 255, .84); font-size: 16px; line-height: 1.6; }
/* the coverage planner's figures */
/* the coverage planner's result, set like the other two tools (2026-10-19): the four counts narrowing, each with its bar */
.pcov__funnel { display: grid; gap: 16px; margin-top: 10px; padding-top: 20px; border-top: 1px solid var(--line-dark); }
.pcov__r { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 8px 16px; color: rgba(255, 255, 255, .84); font-size: 15px; }
.pcov__r b { color: #fff; font: 420 clamp(19px, 1.4vw, 22px)/1.2 var(--serif); font-variation-settings: "opsz" 24; font-variant-numeric: tabular-nums; }
.pcov__r:last-child b { color: var(--accent-dark); }
.pcov__bar { grid-column: 1 / -1; display: block; height: 4px; background: rgba(255, 255, 255, .12); }
.pcov__bar > i { display: block; width: max(4px, var(--w)); height: 100%; background: rgba(255, 255, 255, .78); transition: opacity .4s var(--ease); }
.pcov__r:last-child .pcov__bar > i { background: var(--accent-dark); }
.pcov.is-empty .pcov__bar > i { opacity: .35; }   /* the shape of the narrowing shows before a target is entered */
/* the sign-in form */
.pform--login { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
/* a legal page: the sections listed on the left, staying in view; the text on the right */
.plegal { display: grid; grid-template-columns: minmax(0, 3.4fr) minmax(0, 8.6fr); gap: var(--g) clamp(40px, 5vw, 96px); align-items: start; }
.plegal__idx { position: sticky; top: calc(var(--hdr) + 24px); padding: var(--pad); border: 1px solid var(--line); }
.plegal__idx ol { display: grid; gap: 2px; counter-reset: l; }
.plegal__idx a { display: block; padding: 8px 0; color: var(--navy); font-size: 15px; line-height: 1.45; }
.plegal__idx a:hover { text-decoration: underline; text-underline-offset: 4px; }
.plegal__body { display: grid; gap: clamp(36px, 3.4vw, 56px); max-width: 760px; }
.plegal__s { display: grid; gap: 14px; scroll-margin-top: calc(var(--hdr) + 24px); }
.plegal__h { color: var(--ink); font: 420 clamp(24px, 1.9vw, 30px)/1.25 var(--serif); font-variation-settings: "opsz" 36; }
.plegal__s p, .plegal__s li { font-size: 17px; line-height: 1.7; }
.plegal__s ul { display: grid; gap: 8px; padding-left: 20px; list-style: square; }
.plegal__s a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1023.98px) { .pquiz { grid-template-columns: minmax(0, 1fr); } .pquiz__out { position: static; } .plegal { grid-template-columns: minmax(0, 1fr); } .plegal__idx { position: static; } }
@media (max-width: 759.98px) { .pquiz__opts { grid-template-columns: minmax(0, 1fr); } }

/* the enquiry: the words beside the form */
.pinq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--g) clamp(40px, 5vw, 96px); align-items: start; }
.pinq__words { display: grid; gap: 18px; justify-items: start; }
.pinq__words > p { max-width: 56ch; font-size: 16.5px; line-height: 1.65; }
@media (max-width: 1023.98px) { .pinq { grid-template-columns: minmax(0, 1fr); } }

/* the tier check: boxes to select, the count and a reading in a Navy block beside them */
.chk { display: grid; grid-template-columns: minmax(0, 7.6fr) minmax(0, 4.4fr); gap: var(--g); align-items: start; }
.chk__list { display: grid; gap: 10px; }
.chk__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; width: 100%; padding: 18px var(--pad); border: 1px solid var(--line); background: #fff; color: var(--navy); text-align: left; cursor: pointer; transition: border-color .3s var(--ease), background-color .3s var(--ease); }
.chk__item { cursor: pointer; transition: border-color .25s var(--ease), background-color .25s var(--ease); }
.chk__item:hover { border-color: var(--navy); background: var(--tint); }   /* on hover the row answers: Navy edge, the tint, and its circle previews the tick (2026-10-19) */
.chk__item:hover:not([aria-pressed="true"]) .chk__box { border-color: var(--navy); }
.chk__item:hover:not([aria-pressed="true"]) .chk__x { opacity: 0; transform: scale(.7); }
.chk__item:hover:not([aria-pressed="true"]) .chk__v { opacity: .4; transform: none; }
.chk__item[aria-pressed="true"] { border-color: var(--navy); background: var(--tint); }
.chk__n { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line-2); border-radius: 50%; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chk__body { display: grid; gap: 4px; }
.chk__k { color: var(--muted); font-size: 13.5px; font-weight: 500; }
.chk__body b { font: 420 clamp(18px, 1.3vw, 21px)/1.3 var(--serif); font-variation-settings: "opsz" 24; }
.chk__d { color: var(--text); font-size: 15px; line-height: 1.5; }
.chk__box { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line-2); border-radius: 2px; background: #fff; transition: border-color .25s var(--ease); }
.chk__box .icon { position: absolute; width: 16px; height: 16px; transition: opacity .25s var(--ease), transform .3s var(--ease); }
.chk__x { width: 12px !important; height: 12px !important; color: #8C99A8; }   /* square boxes with a clear cross until chosen, nothing flashing (2026-10-20, "make these squares and don't make them flash. Put a cross in them") */
.chk__v { color: var(--navy); opacity: 0; transform: scale(.7); }
.chk__item[aria-pressed="true"] .chk__box { border-color: var(--navy); }
.chk__item[aria-pressed="true"] .chk__x { opacity: 0; transform: scale(.7); }
.chk__item[aria-pressed="true"] .chk__v { opacity: 1; transform: none; }
.chk__out { position: sticky; top: calc(var(--hdr) + 28px); display: flex; flex-direction: column; gap: 14px; padding: var(--pad) var(--pad-l) calc(var(--pad) + 2px); }   /* shorter, and in view while the list scrolls (2026-10-19) */
.chk__count { display: flex; align-items: baseline; gap: 12px; color: rgba(255, 255, 255, .8); font-size: 15px; }
.chk__count b { color: #fff; font: 420 clamp(44px, 3.6vw, 62px)/1 var(--serif); font-variation-settings: "opsz" 72; font-variant-numeric: tabular-nums; }
.chk__msg { color: #fff; font: 420 clamp(20px, 1.5vw, 24px)/1.35 var(--serif); font-variation-settings: "opsz" 36; text-wrap: pretty; }
.chk__out .note { color: rgba(255, 255, 255, .64); }
@media (max-width: 1023.98px) { .chk { grid-template-columns: minmax(0, 1fr); } .chk__out { position: static; } }
/* the acquisition-economics tool: your figures beside the reading */
.calc { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); border: 1px solid var(--line); }
.calc__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-content: start; padding: var(--pad-l); }   /* the column never grows past its box */
.calc__f { display: grid; gap: 10px; }
.calc__f label { display: grid; gap: 4px; color: var(--navy); font-size: 16px; font-weight: 600; }
.calc__f small { color: var(--muted); font-size: 14px; font-weight: 400; }
.calc__inp { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border: 1px solid var(--line-2); background: var(--tint); cursor: text; transition: border-color .25s var(--ease), background-color .25s var(--ease); }   /* a field: tinted, a text cursor, a grey example (2026-10-19) */
.calc__inp:hover { border-color: var(--navy); }
.calc__inp:focus-within { border-color: var(--navy); background: #fff; box-shadow: 0 0 0 3px #E3ECF5; }
.calc__inp input::placeholder { color: #A7B3BF; }
.calc__inp span { color: var(--muted); font-size: 15px; }
.calc__inp input { flex: 1; width: 100%; min-width: 0; padding: 12px 0; border: 0; background: transparent; color: var(--navy); font-size: 18px; font-variant-numeric: tabular-nums; outline: none; }
.calc__out { align-self: stretch; display: flex; flex-direction: column; gap: 14px; padding: var(--pad) var(--pad-l) calc(var(--pad) + 2px); margin: -1px -1px -1px 0; }   /* in view while the fields scroll (2026-10-19) */
.calc__k { color: rgba(255, 255, 255, .74); font-size: 14px; font-weight: 500; }
.calc__v { color: #fff; font: 420 clamp(48px, 4.4vw, 76px)/1 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.calc__eq { color: rgba(255, 255, 255, .64); font-size: 14px; font-variant-numeric: tabular-nums; }
/* the three measures under the count, each ticked as it passes (2026-10-19) */
.calc__ms { display: grid; margin-top: 6px; }
.calc__ms li { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line-dark); color: rgba(255, 255, 255, .72); font-size: 14.5px; line-height: 1.45; }
.calc__ms li:last-child { border-bottom: 1px solid var(--line-dark); }
.calc__ms b { display: block; color: #fff; font-weight: 600; }
.calc__mk { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 50%; color: transparent; transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.calc__mk .icon { width: 13px; height: 13px; }
.calc__ms li.is-on .calc__mk { border-color: #fff; background: #fff; color: var(--navy); }
.calc__t { margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--line-dark); color: #fff; font: 420 clamp(22px, 1.6vw, 26px)/1.3 var(--serif); font-variation-settings: "opsz" 36; text-wrap: balance; }
.calc__d { color: rgba(255, 255, 255, .84); font-size: 16px; line-height: 1.6; max-width: 56ch; }
.calc__out .actions { margin-top: 6px; }
.calc__ms + .calc__t { border-top: 0; padding-top: 8px; }
.calc__out .note { color: rgba(255, 255, 255, .6); }
@media (max-width: 1023.98px) { .calc { grid-template-columns: minmax(0, 1fr); } .calc__out { margin: 0 -1px -1px; } }

/* articles: the text beside its notes (key points, a figure, a quotation, a link), section by section */
.art { display: grid; gap: clamp(56px, 5vw, 88px); }
.art__sec { display: grid; grid-template-columns: minmax(0, 7.4fr) minmax(0, 4.6fr); gap: var(--g) clamp(40px, 5.4vw, 104px); align-items: start; scroll-margin-top: calc(var(--hdr) + 24px); }
.art__main { display: grid; gap: 18px; }
.art__h { margin-bottom: 4px; color: var(--ink); font: 420 clamp(28px, 2.3vw, 38px)/1.18 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.012em; text-wrap: balance; }
.art__main > p { max-width: 68ch; font-size: 18px; line-height: 1.75; text-wrap: pretty; }
.art__list { display: grid; max-width: 68ch; }
.art__list li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.65; }
.art__list li:last-child { border-bottom: 1px solid var(--line); }
.art__list .icon { width: 10px; height: 10px; margin-top: 9px; color: var(--accent); }
.art__list b { color: var(--navy); font-weight: 600; }
.art__side { padding-top: 8px; }
.aside { display: grid; gap: 14px; padding: var(--pad-l) var(--pad); border: 1px solid var(--line); }
.aside__h { color: var(--muted); font-size: 13.5px; font-weight: 600; }
.aside--fig { background: var(--grey); border-color: var(--grey); }
.aside--fig b { color: var(--navy); font: 420 clamp(44px, 3.6vw, 62px)/1 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.02em; }
.aside--fig span { color: var(--muted); font-size: 15px; line-height: 1.5; }
.aside--quote { background: var(--tint); border-color: var(--tint); }
.aside--quote p { color: var(--navy); font: 420 clamp(21px, 1.6vw, 26px)/1.4 var(--serif); font-variation-settings: "opsz" 36; text-wrap: pretty; }
.aside--link { position: relative; transition: border-color .35s var(--ease), transform .45s var(--ease); }
.aside__k { color: var(--navy); font: 420 clamp(20px, 1.45vw, 24px)/1.3 var(--serif); font-variation-settings: "opsz" 36; }
@media (hover: hover) {
  .aside--link:hover { border-color: var(--line-2); transform: translateY(-4px); }
  .aside--link:hover .link { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
  .aside--link:hover .link .icon { transform: translateX(4px); }
}
@media (max-width: 1023.98px) {
  .art__sec { grid-template-columns: minmax(0, 1fr); }
  .art__side { padding-top: 0; max-width: 560px; }
}

/* ---------- 31. The footer (2026-10-20), laid out after his reference site, in the site's own type: the mark, firm line
   and icons at the top left, Market commentary at the bottom left; on the right four columns, the links four across on the top row and
   two on the bottom ("put 4 on the top and 2 on the bottom"), the office and email filling the bottom row; a rule; the legal row ---------- */
.ftr { --fg: clamp(24px, 3vw, 48px); }
.ftr__top { display: grid; grid-template-columns: calc(clamp(300px, 24vw, 420px) + clamp(0px, 6vw - 70px, 56px)) repeat(4, minmax(0, 1fr)); gap: 56px var(--fg); align-items: start; padding-block: clamp(52px, 4.4vw, 72px) clamp(52px, 4.4vw, 64px); }
.ftr__links, .ftr__info { display: contents; }   /* the six groups, the office and the email share one grid of four columns, set a little right of the mark's column (2026-10-20, ~36px at 1760) */
.ftr__about { grid-area: 1 / 1; } .ftr__news { grid-area: 2 / 1; }
.ftr__about .logo { margin-bottom: 22px; }
.ftr__about p { max-width: 32ch; color: rgba(255, 255, 255, .72); font-size: 15px; line-height: 1.6; }
.ftr__follow .ftr__socs { margin-top: 0; }   /* the icons under their own heading, Follow us (2026-10-20) */
.ftr__follow .ftr__soc { width: 38px; height: 38px; border-color: rgba(255, 255, 255, .22); border-radius: 4px; }   /* square, as in the reference */
.ftr__links .ftr__h, .ftr__lbl { margin-bottom: 18px; color: #fff; font: 600 14.5px/1.4 var(--sans); }   /* the footer's own headings, not the reference site's spaced capitals (2026-10-20: "make it old style") */
.ftr__links .ftr__col ul { gap: 14px; }
.ftr__links .ftr__col a { font-size: 14.5px; white-space: nowrap; }
/* (2026-10-21, every page in the footer) the groups with long names (What we do, Markets) let a name run to two lines, balanced; Get in
   touch and Follow us share the eighth place on desktop, one above the other, so the seven groups and the contact make two rows of four */
.ftr__links .ftr__col--long a { white-space: normal; }
.ftr__links .ftr__col--long li { line-height: 1.45; text-wrap: balance; }
.ftr__contact { display: grid; gap: 34px; align-content: start; }
@media (max-width: 1023.98px) { .ftr__contact { display: contents; } }   /* phones and tablets place Get in touch and Follow us themselves (section 34) */
.ftr__lbl { display: flex; align-items: center; gap: 10px; }
.ftr__touch ul { display: grid; gap: 16px; }
.ftr__touch li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; }   /* each detail behind its icon, as enterprise footers set them */
.ftr__touch .icon { width: 18px; height: 18px; margin-top: 2px; color: rgba(255, 255, 255, .8); }
.ftr__touch address { color: rgba(255, 255, 255, .62); font-size: 14.5px; font-style: normal; line-height: 1.7; }   /* the office in grey, the email in white, as before */
.ftr__touch .ftr__mail { display: inline-block; margin-top: 0; color: #fff; font-size: 14.5px; font-weight: 500; }
.ftr__nh { display: flex; gap: 14px; align-items: flex-start; max-width: 420px; }   /* the original mail icon in its circle on the LEFT of the heading and line (2026-10-20; the right was tried) */
.ftr__nh .ftr__lbl { margin-bottom: 0; }
.ftr__nh p { max-width: 32ch; margin-top: 7px; color: rgba(255, 255, 255, .72); font-size: 14px; line-height: 1.5; text-wrap: balance; }
.ftr__news form { position: relative; max-width: 420px; margin-top: 20px; }
.ftr .ftr__bar::before { left: 0; width: 100%; margin-left: 0; }   /* the legal row's rule inside the page width, as in the reference */
@media (max-width: 1399.98px) {   /* the mark, line and icons beside the sign-up, then the links four across */
  .ftr__top { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 48px; }
  .ftr__about { grid-area: 1 / 1 / 2 / 3; } .ftr__news { grid-area: 1 / 3 / 2 / 5; }
}
@media (max-width: 1023.98px) {   /* the mark, then the sign-up, then the links three across */
  .ftr__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ftr__about { grid-area: 1 / 1 / 2 / 4; } .ftr__news { grid-area: 2 / 1 / 3 / 4; max-width: 460px; }
}
@media (max-width: 759.98px) {
  .ftr__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
  .ftr__about { grid-area: 1 / 1 / 2 / 3; } .ftr__news { grid-area: 2 / 1 / 3 / 3; }
}
@media (max-width: 419.98px) { .ftr__links .ftr__col a { white-space: normal; } .ftr__touch { grid-column: 1 / -1; } }   /* Get in touch across both columns on the narrowest phones */
/* the market pages' headings, two lines, a step smaller than other heroes (2026-10-19): "Capital markets / and private credit." at every width */
.phero:has(.pstrip__c--two) .h1 { font-size: clamp(34px, 3.3vw, 56px); }

/* ---------- 32. The market hero's glance, condensed (2026-10-19, variation 1 chosen): the label, the turning challenge and its icon on one line;
   what we deliver on one line under it. The outgoing challenge fades before the next arrives, so the two never overlap. ---------- */
.mglance { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 12px; }
.mglance__top { display: contents; }
.mglance__k { grid-column: 1; grid-row: 1; }
.mglance__n { display: none; }
.mglance__slides { grid-column: 2; grid-row: 1; }
.mglance__s { gap: 8px; transition: opacity .25s var(--ease); transform: none; }
.mglance__s.is-on { transition: opacity .45s var(--ease) .2s; }
.mglance__s .disc { width: 26px; height: 26px; }
.mglance__s .disc .icon { width: 12px; height: 12px; }
.mglance__s b { font: 600 14.5px/1.4 var(--sans); }
.mglance__deliver { grid-column: 1 / -1; margin-top: 0; }
.mglance__deliver b { font-size: 14px; }
@media (max-width: 519.98px) { .mglance { grid-template-columns: minmax(0, 1fr); } .mglance__slides { grid-column: 1; grid-row: 2; } }

/* ---------- 33. An article's margin (2026-10-19): each section's notes stay in view while its text scrolls past, as the legal index does;
   the call-to-action cards compact: a shorter picture, the destination's name in the light blue, a line, the link ---------- */
.art__side { position: sticky; top: calc(var(--hdr) + 28px); align-self: start; display: grid; gap: 14px; align-content: start; }
.aside--cta { position: relative; display: grid; grid-template-rows: auto 1fr; padding: 0; border: 1px solid var(--line); background: #fff; color: var(--navy); overflow: hidden; transition: border-color .35s var(--ease), transform .45s var(--ease); }
.aside--cta > .pic { aspect-ratio: 2 / 1; }
.aside--cta-2 > .pic { aspect-ratio: 5 / 2; }
.aside__body { display: grid; gap: 6px; align-content: start; padding: 18px 22px 20px; }
.aside__kick { color: var(--accent); font-size: 13px; font-weight: 600; line-height: 1.35; }
.aside--cta .aside__k { color: var(--ink); font-size: clamp(17px, 1.2vw, 19px); line-height: 1.35; }
.aside--cta .link { margin-top: 4px; font-size: 14.5px; }
@media (hover: hover) { .aside--cta:hover { border-color: var(--line-2); transform: translateY(-3px); } .aside--cta:hover .pic > img { transform: scale(1.04); } .aside--cta:hover .link { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; } }
@media (max-width: 1023.98px) { .art__side { position: static; } }
/* the choices pulse one at a time, on a different one each time, until one is chosen (2026-10-19, at his request): js/site.js 3l adds .is-pulse */
@keyframes pick-pulse { 0% { box-shadow: 0 0 0 0 rgba(6, 37, 67, .2); } 100% { box-shadow: 0 0 0 9px rgba(6, 37, 67, 0); } }
@keyframes pick-pulse-dot { 0% { box-shadow: inset 0 0 0 3px #fff, 0 0 0 0 rgba(6, 37, 67, .2); } 100% { box-shadow: inset 0 0 0 3px #fff, 0 0 0 8px rgba(6, 37, 67, 0); } }
.pquiz__o.is-pulse span::before { animation: pick-pulse-dot 1.4s var(--ease) 1; }

/* ==== ROLLOUT 2026-10-19: the section library's approved designs, live on every page ====
   Moved from css/library.css (.lib-prop scope) when the client approved the library ("all of the sections are now finalized"); scoped to
   main so they sit over the older rules exactly as they did in the library. Numbers refer to the library items. */
/* numbered circles as on the homepage timeline: a Navy hairline, serif figures */
main .pchal__n, main .ptabs__tab i, main .prail__n { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--navy); border-radius: 50%; background: #fff; color: var(--navy); font: 420 15px/1 var(--serif); font-style: normal; font-variant-numeric: lining-nums tabular-nums; }
main .pchal__n { justify-self: start; }

/* the figures panel: white, the figures in outlined boxes, the first in Navy (the homepage capability figures) */
main .pstat { gap: var(--g) var(--split); align-items: center; background: none; color: var(--text); }
main .pstat__words p { max-width: none; }
main .pstat__words { padding: 0; }
main .pstat__words .h2 { color: var(--ink); }
main .pstat__words p { color: var(--text); }
main .pstat .link { color: var(--navy); }
main .pstat__figs { gap: var(--g); border: 0; }
main .pstat__f, main .pstat__f:nth-child(-n+2), main .pstat__f:nth-child(even) { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: clamp(150px, 11vw, 190px); padding: var(--pad); border: 1px solid var(--line); }
main .pstat__f b { color: var(--navy); font-size: clamp(44px, 3.6vw, 62px); }
main .pstat__f--word b { font-size: clamp(30px, 2.3vw, 40px); }
main .pstat__f span { color: var(--muted); }
main .pstat__f:first-child { border-color: var(--navy); background: var(--navy) var(--wash) center / cover; }
main .pstat__f:first-child b { color: #fff; }
main .pstat__f:first-child span { color: rgba(255, 255, 255, .8); }

/* points that open: the picture as tall as the list; the homepage questions' plus and minus */
main .pacc__pm { position: relative; width: 34px; height: 34px; }
main .pacc__pm .icon { position: absolute; width: 14px; height: 14px; transition: opacity .3s var(--ease), transform .4s var(--ease); }
main .pacc__pm .icon--minus { opacity: 0; transform: rotate(-90deg); }
main .pacc__i.is-open .pacc__pm .icon--plus { opacity: 0; transform: rotate(90deg); }
main .pacc__i.is-open .pacc__pm .icon--minus { opacity: 1; transform: none; }
@media (min-width: 1024px) {
  main .pacc { align-items: stretch; }
  main .pacc > .pic { aspect-ratio: auto; min-height: clamp(320px, 24vw, 420px); }
  main .pacc__list { display: flex; flex-direction: column; }
  main .pacc__i { display: flex; flex: 1 0 auto; flex-direction: column; justify-content: center; }
}

/* one result, opened up: the figures in outlined boxes on the tint, the first in Navy (the homepage results) */
main .pcase__stats { gap: 12px; align-content: center; margin: 16px 16px 16px 0; padding: 16px; background: var(--grey); }
main .pcase__s, main .pcase__s:first-child { padding: 20px 24px; border: 1px solid var(--line); background: #fff; }
main .pcase__s b { color: var(--navy); font-size: clamp(30px, 2.6vw, 40px); line-height: 1.05; }
main .pcase__s span { color: var(--muted); }
main .pcase__s:first-child { border-color: var(--navy); background: var(--navy) var(--wash) center / cover; }
main .pcase__s:first-child b { color: #fff; }
main .pcase__s:first-child span { color: rgba(255, 255, 255, .8); }
@media (max-width: 1023.98px) { main .pcase__stats { margin: 0 16px 16px; } }

/* article text: the margin figures in outlined boxes, the quotes with a hairline */
main .aside--fig { border-color: var(--line); background: #fff; }
main .aside--quote { border-color: var(--line); }

/* questions answered: the hairline every other box has */
main .pans__i { border-color: var(--line); }
/* number 29 (2026-10-19, "they're super basic"; then "make them all white... put the heading next to the icon"): white boxes, the icon in
   the outlined circle with the question beside it, a fine rule under them, then the answer */
main .pans__i { gap: 0; padding: var(--pad); background: #fff; }
main .pans__head { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
main .pans__ic { width: 44px; height: 44px; } main .pans__ic .icon { width: 19px; height: 19px; }

/* related pages: upright cards, the picture above the words */
main .prel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
main .prel .pic { min-height: 0; aspect-ratio: 16 / 10; }
main .prel__t { font-size: clamp(20px, 1.5vw, 24px); }
main .prel__body { grid-template-rows: auto auto auto 1fr; }
main .prel__d { margin-top: 4px; font-size: 15.5px; line-height: 1.55; }   /* number 30: one sentence from the page it leads to (2026-10-19) */
main .prel .link { margin-top: 8px; }   /* the line sits a little off the title, the link a little further off the line (2026-10-19, "fix the padding") */
/* 06: the legal pages' hero without a picture: a shorter band, the words across more of it */
main .phero--plain .phero__grid { min-height: 0; padding-block: clamp(56px, 5vw, 88px); }
main .phero--plain .phero__copy { grid-column: 1 / 9; }
/* 07: "Picture and words", designs A and B (2026-10-19), on the homepage's proportions: a 12-column grid, the visual and the words
   side by side with the capability section's gap, the words at the homepage's 17px, the visual as tall as the words beside it */
main .pfv { --gapx: clamp(32px, 4vw, 72px); }
main .pfv__words { display: grid; gap: 20px; align-content: center; justify-items: start; }
main .pfv__words > p, main .pfv__cols p { max-width: none; font-size: 17px; line-height: 1.62; }   /* the words fill their column up to the one gap */
main .pfv__n { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border: 1px solid var(--navy); border-radius: 50%; background: #fff; color: var(--navy); font: 420 15px/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
/* A: no picture; the words on the left half, the points as boxes on the right half, as tall as the words, the first in Navy */
main .pfv--a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: var(--g); align-items: stretch; }
main .pfv--a { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split); }   /* the one gap between words and block */
main .pfv--a > .pfv__words, main .pfv--a > .pfv__boxes { grid-column: auto; }

main .pfv__boxes { display: grid; grid-auto-rows: 1fr; gap: var(--g); }
main .pfv__boxes li { display: flex; align-items: center; gap: 18px; padding: var(--pad); border: 1px solid var(--line); background: #fff; }
main .pfv__boxes li > div { display: grid; gap: 6px; }   /* the point, then its line, centred in the box */
main .pfv__boxes li span:not(.pfv__n) { color: var(--muted); font-size: 15px; line-height: 1.5; }
main .pfv__boxes li:first-child span:not(.pfv__n) { color: rgba(255, 255, 255, .8); }
main .pfv__boxes b { color: var(--ink); font: 420 clamp(18px, 1.3vw, 21px)/1.35 var(--serif); font-variation-settings: "opsz" 24; text-wrap: balance; }
main .pfv__boxes li:first-child { border-color: var(--navy); background: var(--navy) var(--wash) center / cover; }
main .pfv__boxes li:first-child b { color: #fff; }
main .pfv__boxes li:first-child .pfv__n { border-color: rgba(255, 255, 255, .5); background: transparent; color: #fff; }
/* 08: the challenges side by side (2026-10-19, "way too long"): one card each, the challenge above and the response on the tint below,
   both parts level across the row (subgrid); four to a row where a page has four */
main .pchals--row { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); grid-template-rows: auto auto; gap: 0 var(--g); }
main .pchals--row .pchal { grid-row: span 2; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; row-gap: 0; }
main .pchals--row .pchal__q { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: var(--pad) var(--pad) calc(var(--pad) - 8px); }   /* measured on the ink: the same space above the number and below the tag */
main .pchals--row .pchal__q .h3 { margin-top: 16px; }
main .pchals--row .pchal__q > p:not([class]) { margin-top: 10px; }
main .pchals--row .pchal__kind { margin-top: auto; padding-top: 18px; }   /* the label held to the foot of the white half, level across the row */
main .pchals--row .pchal__q .h3 { font-size: clamp(20px, 1.45vw, 24px); }
main .pchals--row .pchal__q > p:not([class]) { font-size: 15.5px; line-height: 1.55; }
main .pchals--row .pchal__a { display: flex; flex-direction: column; gap: 0; padding: calc(var(--pad) - 5px) var(--pad) calc(var(--pad) - 7px); border-top: 1px solid var(--line); }   /* its label's ink as far from the edge as the number above */
main .pchals--row .pchal__a .ilist { margin-top: 16px; }
main .pchals--row .pchal__a .link { margin-top: auto; padding-top: 20px; }   /* the link held to the foot, level across the row */
main .pchals--row .pchal__lead { font-size: clamp(16.5px, 1.05vw, 18.5px); line-height: 1.4; min-height: 2.8em; text-wrap: balance; }   /* always two lines, level across the row */
main .pchals--row .ilist li { padding: 10px 0; font-size: 14.5px; }
main .pchals--row .ilist li:last-child { border-bottom: 1px solid var(--line-2); }
@media (max-width: 1279.98px) {   /* stacked until the page is wide enough for the cards side by side, as the homepage's six panels are */
  main .pchals--row { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: var(--g); }
  main .pchals--row .pchal { grid-row: auto; grid-template-rows: none; }
}
/* 08: the halves labelled, the challenge and how we address it (2026-10-19); the label under the challenge a little larger */
main .pchals--row .pchal__top { display: flex; align-items: center; gap: 12px; }
main .pchals--row .pchal__lab { color: var(--accent); font-size: 14px; font-weight: 600; line-height: 1.4; }   /* the cards' label in the light blue, as on the homepage cards (.card__k, .part__sub) */
main .pchals--row .pchal__lab--a { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--accent); }
main .pchals--row .pchal__lab--a .icon { width: 15px; height: 15px; color: var(--accent); }
main .pchals--row .pchal__kind { gap: 10px; font-size: 14.5px; }
main .pchals--row .pchal__kind .icon { width: 20px; height: 20px; }
/* 08: each challenge's description on two lines, balanced, level across the row (2026-10-19) */
main .pchals--row .pchal__q > .pchal__d { margin-top: 10px; font-size: 15px; line-height: 1.55; min-height: 3.1em; text-wrap: balance; }
/* card labels in the light blue across the proposals, as on the homepage cards (2026-10-19): related pages, one result opened up */
main .prel__meta { color: var(--accent); font-size: 14px; font-weight: 600; }
main .pcase .meta { color: var(--accent); font-size: 14px; font-weight: 600; }
main .tboxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); }
main .tbox { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; overflow: hidden; }
main .tbox > .pic { aspect-ratio: 2 / 1; min-height: 0; }   /* a little taller than the old 16:9 cards, so the renders keep their tops */
main .tbox__mid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(28px, 2.6vw, 48px); align-items: start; padding: clamp(28px, 2.2vw, 36px) var(--pad-l) clamp(28px, 2.2vw, 36px); }
main .tbox__lead { display: grid; gap: 18px; align-content: start; }
main .tbox__head { display: flex; align-items: center; gap: 14px; }   /* the icon centred on the title and its line (2026-10-20) */
main .tbox__t { color: var(--ink); font: 420 clamp(21px, 1.5vw, 25px)/1.25 var(--serif); font-variation-settings: "opsz" 24; text-wrap: balance; }
main .tbox__l { margin-top: 4px; color: var(--accent); font-size: 14px; font-weight: 600; line-height: 1.4; }
main .tbox__x { color: var(--text); font-size: 16px; line-height: 1.65; text-wrap: pretty; }
main .tbox .ilist { align-self: start; margin-top: 2px; }
main .tbox .ilist li { padding: 12px 0; font-size: 15px; }
main .tbox .ilist li:last-child { border-bottom: 1px solid var(--line); }
main .tbox__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding: 22px var(--pad-l); border-top: 1px solid var(--line); background: var(--tint); }
main .tbox__get { display: grid; gap: 6px; flex: 1 1 260px; color: var(--navy); font-size: 15.5px; line-height: 1.5; }
main .tbox__get b { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; font-weight: 500; }
main .tbox__get .icon { width: 16px; height: 16px; color: var(--accent); }
main .tbox__foot .link { flex: none; font-size: 15px; }
@media (max-width: 1279.98px) { main .tbox__mid { grid-template-columns: minmax(0, 1fr); } }   /* narrower cards: the points under the words */
@media (max-width: 759.98px) { main .tboxes { grid-template-columns: minmax(0, 1fr); } main .tbox { grid-row: auto; grid-template-rows: none; } main .tbox > .pic { aspect-ratio: 16 / 9; } }
/* 11: three versions, each playing through on its own (2026-10-19) */
main .pacc[data-auto] .pacc__i { position: relative; }
main .pacc__a p { padding-right: var(--pad); }
/* 11 A: the time infographic beside the points (no pictures; the column layout kept, 2026-10-19): the moments across the top, a line per team
   under them (lines, not blocks), the open moment ringed; nothing solid */
main .pacc--time { align-items: stretch; }
main .ptime { display: grid; grid-template-rows: auto 1fr auto auto; margin: 0; border: 1px solid var(--line); background: #fff; }
main .ptime__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 22px var(--pad) 18px; border-bottom: 1px solid var(--line); }
main .ptime__head p { color: var(--ink); font: 420 clamp(19px, 1.4vw, 22px)/1.3 var(--serif); font-variation-settings: "opsz" 24; }
main .ptime__head span { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
main .ptime__head span .icon { width: 15px; height: 15px; }
main .ptime__grid { display: grid; grid-template-columns: max-content repeat(var(--n), minmax(0, 1fr)); align-content: center; row-gap: 6px; padding: 26px var(--pad) 28px; }
main .ptime__who { display: flex; align-items: center; padding-right: 18px; color: var(--navy); font-size: 14px; font-weight: 600; }
main .ptime__c { display: flex; align-items: center; justify-content: center; min-height: 36px; }
main .ptime__h { flex-direction: column; gap: 10px; padding-bottom: 14px; text-align: center; }
main .ptime__node { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line-2); border-radius: 50%; background: #fff; color: var(--navy); transition: border-color .4s var(--ease), box-shadow .4s var(--ease); }
main .ptime__node .icon { width: 16px; height: 16px; }
main .ptime__h b { max-width: 10ch; color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.35; text-wrap: balance; transition: color .4s var(--ease); }
main .ptime__h.is-on .ptime__node { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy), 0 0 0 5px var(--tint); }   /* ringed, not filled */
main .ptime__h.is-on b { color: var(--navy); }
main .ptime__line { display: block; width: 100%; height: 3px; }   /* lines that run on from column to column */
main .ptime__line.is-us { background: var(--navy); }
main .ptime__line.is-you { background: var(--accent); }
main .ptime__line.is-off { height: 0; border-top: 1px dashed var(--line-2); }
main .ptime__note { padding: 16px var(--pad) 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.55; }
main .ptime__go { padding: 14px var(--pad) 20px; }
main .ptime__go .link { font-size: 15px; }
/* 07b Words and points under 1024px, as in the library (2026-10-19; missed in the first copy): one column, the boxes under the words */
@media (max-width: 1023.98px) {
  main .pfv--a { grid-template-columns: minmax(0, 1fr); }
  main .pfv--a > * { grid-column: 1 / -1 !important; padding-right: 0; }
  main .pfv__boxes { grid-auto-rows: auto; margin-top: var(--g); }
}
/* 10 boxes between 1024 and 1440 (2026-10-19 check pass): each box is too narrow for words and points side by side, so the points sit under
   the words until 1440 (the library showed the side-by-side layout at 1710) */
@media (max-width: 1599.98px) { main .tbox__mid { grid-template-columns: minmax(0, 1fr); } }   /* side by side from 1600 (1440 still left three-line descriptions running to four) */
/* phones (2026-10-19 check pass): long button labels wrap inside their full-width button instead of being cut or pushing the column past
   the window; the network map's and the time infographic's heads let their corner label drop under the title */
@media (max-width: 479.98px) {
  .btn { white-space: normal; text-align: center; }
  .pnet__head, main .ptime__head { flex-wrap: wrap; row-gap: 6px; }
}
/* 07b with four points (the client, 2026-10-19: "only ever a maximum of three; if it's four, put them underneath the text"): the heading left
   and its words right, as a split section head, then the four points as a row of boxes under them, the first Navy, every box the same height */
main .pfv--row { display: grid; gap: clamp(36px, 3.2vw, 56px); }
main .pfv--row .pfv__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--g) var(--split); align-items: end; }
main .pfv--row .pfv__side { display: grid; gap: 16px; justify-items: start; }
main .pfv--row .pfv__side p { max-width: 62ch; font-size: 17px; line-height: 1.62; }
main .pfv--row .pfv__side .actions { margin-top: 4px; }
main .pfv__boxes--row { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-auto-rows: auto; margin-top: 0; }
main .pfv__boxes--row li { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 22px; padding: var(--pad) var(--pad) calc(var(--pad) + 2px); }
main .pfv__boxes--row li > div { gap: 8px; }
@media (max-width: 1279.98px) { main .pfv__boxes--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023.98px) { main .pfv--row .pfv__top { grid-template-columns: minmax(0, 1fr); align-items: start; } }
/* below 1280 the words under a heading stack beneath it instead of beside it: in the narrower column they ran taller than the heading (2026-10-20,
   "the text doesn't go past the heading") */
@media (max-width: 1279.98px) { .shead--split { grid-template-columns: minmax(0, 1fr); } main .pfv--row .pfv__top { grid-template-columns: minmax(0, 1fr); align-items: start; } }
@media (max-width: 639.98px) { main .pfv__boxes--row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 32. Client login (2026-10-20: "Have the client login page as an actual page"): one sign-in screen under the white header; a
   Navy panel on the left says what client access shows, the sign-in card sits on the tint on the right; stacked on narrow screens ---------- */
.plogin { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: calc(100vh - var(--hdr)); min-height: calc(100svh - var(--hdr)); }
.is-bare .plogin { min-height: 100vh; min-height: 100svh; }   /* no header or footer: the sign-in screen is the whole page (2026-10-20) */
.plogin__logo { color: #fff; width: 124px; height: 21px; }   /* the mark, leading home */
.plogin__side { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: clamp(48px, 6vw, 104px) clamp(24px, 4.4vw, 80px) clamp(32px, 3.4vw, 56px);
  background: var(--navy) var(--wash) center / cover no-repeat; color: rgba(255, 255, 255, .78); }
.plogin__t { color: #fff; font: 420 clamp(40px, 3.8vw, 64px)/1.05 var(--serif); font-variation-settings: "opsz" 72; }
.plogin__lede { max-width: 34ch; margin-top: 20px; color: rgba(255, 255, 255, .82); font-size: 17px; line-height: 1.6; }
.plogin__list { display: grid; gap: 14px; margin-top: 32px; padding: 0; list-style: none; }
.plogin__list li { display: flex; gap: 12px; align-items: flex-start; color: #fff; font-size: 15.5px; line-height: 1.5; }
.plogin__list .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: rgba(255, 255, 255, .8); }
.plogin__side > div { margin-block: auto; }   /* the words centred on the screen, level with the sign-in card; the note stays at the foot */
.plogin__side { justify-content: flex-start; }
.plogin__note { color: rgba(255, 255, 255, .62); font-size: 14px; line-height: 1.5; }
.plogin__main { display: grid; place-items: center; padding: clamp(40px, 5vw, 88px) clamp(20px, 4vw, 64px); background: var(--tint); }
.plogin__card { width: 100%; max-width: 460px; padding: clamp(28px, 2.6vw, 44px); border: 1px solid var(--line); background: #fff; }
.plogin__h { color: var(--navy); font: 420 clamp(30px, 2.4vw, 38px)/1.1 var(--serif); font-variation-settings: "opsz" 48; }
.plogin__sub { margin-top: 12px; color: var(--text); font-size: 15.5px; line-height: 1.6; }
.plogin .pform { max-width: none; margin-top: 28px; padding: 0; border: 0; }
.plogin .pform__foot { flex-direction: column; align-items: stretch; gap: 14px; }
.plogin .pform__foot .btn { width: 100%; }
.plogin__help { display: grid; gap: 8px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--text); font-size: 14.5px; line-height: 1.5; }
.plogin__help a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(6, 37, 67, .3); }
.plogin__help a:hover { text-decoration-color: currentColor; }
@media (max-width: 899.98px) {
  .plogin { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .plogin__side { gap: 32px; padding-block: 28px 36px; }
  .plogin__list, .plogin__note { display: none; }   /* on a phone the sign-in card comes first to hand: the panel keeps its heading and line */
  .plogin__main { padding-block: 32px 56px; }
}


/* ---------- 34. PHONE AND TABLET PASS (2026-10-21): "make sure the tablet and mobile are visually appealing and designed properly with
   tablet and mobile UX in mind ... specifically mobile". Every rule below sits in a media query under 1024px (the .ptime labels also
   1024-1279, where they overlapped), so desktop is untouched. Audit and tools: tmp/mobile-audit/ (BRIEF.md, mobilescan, try.mjs). ---------- */

/* ===== 34 · the shared pieces: header, drawer, footer, section heads, links, buttons (merge-shared-site.css) ===== */
/* ---------- PHONE AND TABLET PASS 2026-10-21: the shared pieces (header and drawer, footer, section heads, links, buttons, type, rhythm) ----------
   Nothing here applies at 1024px or wider. Phones are under 760px, tablets 760-1023px. */

/* --- links: the standalone section link ("See the engagement ›") keeps its size and place, and gets a 44px tall touch area round it.
   An absolutely placed ::after, so nothing moves; the card links (.card__go) are left out, since their ::after already makes the whole card the link */
@media (max-width: 1023.98px) {
  main a.link:not(.card__go) { position: relative; }
  main a.link:not(.card__go)::after { content: ""; position: absolute; inset: -12px -6px; }
}

/* --- the mark in the header and the footer (both lead home): a 44px tall touch area. The mark is drawn by a mask, which also clips any
   ::after, so the box itself grows by 12px above and below, the mask is held to the content box, and equal negative margins keep every
   position as it was (checked pixel for pixel) */
@media (max-width: 1023.98px) {
  .hdr .logo, .ftr .ftr__about .logo { box-sizing: content-box; padding-block: 12px; -webkit-mask-origin: content-box; mask-origin: content-box; -webkit-mask-clip: content-box; mask-clip: content-box; }
  .hdr .logo { margin-block: -12px; }
  .ftr .ftr__about .logo { margin-block: -12px 10px; }   /* 22px under the mark, as before */
}

/* --- buttons in a row of actions on a narrow phone: they already run the full width (under 480px); a long label that wraps now sits as two
   balanced, centred lines with its arrow after the last word, instead of a centred block with the arrow alone at the far right */
@media (max-width: 479.98px) {
  .actions .btn { display: block; text-align: center; text-wrap: balance; }
  .actions .btn .icon { display: inline-block; margin-left: 12px; vertical-align: middle; }
}

/* --- section heads on a phone: a centred head reads as the odd one out in a single column, and a centred paragraph of four or five lines
   reads badly; set it on the left edge like every other head */
@media (max-width: 759.98px) {
  .shead--c { margin-inline: 0; text-align: left; justify-items: start; }
}

/* --- a note under a table or box: no line longer than about 75 characters on a tablet (it ran to 113 at 820px) */
@media (min-width: 760px) and (max-width: 1023.98px) {
  main .note--under { max-width: 64ch; }
}

/* --- the drawer: every link a 44px row; the two buttons side by side under a rule, held at the foot of the screen while a long group is
   open (sticky: in place under the list when it all fits, pinned to the bottom when it does not) */
@media (max-width: 1023.98px) {
  .drawer { padding-bottom: 0; }
  .drawer details:last-of-type { border-bottom: 0; }
  .drawer__group a { padding-block: 9px; }
  .drawer__cta { position: sticky; bottom: 0; z-index: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 20px 0 calc(20px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: #fff; }
  .drawer__cta .btn { gap: 10px; padding-inline: 12px; white-space: nowrap; }
}
@media (max-width: 339.98px) { .drawer__cta { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1023.98px) and (max-height: 499.98px) { .drawer__cta { padding-block: 12px calc(12px + env(safe-area-inset-bottom, 0px)); } }   /* a phone on its side: a slimmer band */
/* on a tablet a group's links sit two across under their labels, so an open group is half as tall */
@media (min-width: 760px) and (max-width: 1023.98px) {
  .drawer__group { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g); }
  .drawer__group .drawer__hub, .drawer__group .drawer__label { grid-column: 1 / -1; }
}

/* --- the footer: every link a 44px touch row, the field at 16px so iOS does not zoom, the icons 44px */
@media (max-width: 1023.98px) {
  .ftr__links .ftr__col ul { gap: 0; }
  .ftr__links .ftr__col li a { display: block; padding-block: 12px; white-space: normal; }
  .ftr__links .ftr__h { margin-bottom: 6px; }   /* the heading 18px over its first link's words, as before */
  .ftr__h a, .ftr__touch .ftr__mail, .ftr__legal a, .ftr__legal button { display: inline-block; padding-block: 12px; margin-block: -12px; }
  .ftr__legal { row-gap: 24px; }
  .ftr__legal .cookie-footer-link { min-height: 0; }
  .ftr__follow .ftr__soc { width: 44px; height: 44px; }
  .ftr__row input { font-size: 16px; }
}
/* tablet: Get in touch beside the mark and Follow us beside the sign-up, so the right of the footer is not left blank; the links below */
@media (min-width: 760px) and (max-width: 1023.98px) {
  .ftr__top { row-gap: 44px; }
  .ftr__about { grid-area: 1 / 1 / 2 / 3; } .ftr__touch { grid-area: 1 / 3 / 2 / 4; }
  .ftr__news { grid-area: 2 / 1 / 3 / 3; max-width: 460px; } .ftr__follow { grid-area: 2 / 3 / 3 / 4; }
}
/* phone: one even 36px gap between the blocks (each link list's last 12px of touch area runs into the gap below it, so the words keep
   36px) */
@media (max-width: 759.98px) {
  .ftr__top { gap: 36px 16px; padding-block: 48px 44px; }
  .ftr__links .ftr__col { margin-bottom: -12px; }
}
@media (max-width: 419.98px) {   /* where Get in touch runs across both columns, Follow us does too, on one line */
  .ftr__follow { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .ftr__follow .ftr__h { margin-bottom: 0; }
}

/* ===== 34 · heroes: page heroes, the homepage hero, logo strip, client login (heroes.css) ===== */
/* ---------- Phone and tablet pass, 2026-10-21: heroes (the page hero .phero in its five forms, the homepage hero, its logo strip,
   the homepage's mid-page call to action panel, the client login panel). Nothing here applies at 1024px or wider. ---------- */

/* tablet and phone */
@media (max-width: 1023.98px) {
  /* homepage hero cards: white words over light pictures (the glass stair, the slit of sky) need a Navy fall that starts above the label */
  main .hcard .pic::after { background: linear-gradient(180deg, rgba(6, 37, 67, .04) 0%, rgba(6, 37, 67, .42) 30%, rgba(6, 37, 67, .8) 56%, rgba(6, 37, 67, .9) 100%); }
  /* the tall case card: its title runs further down the card than on a desktop, over cloud and pale sky on two of the four films */
  main .hcase > .pic::after { background: linear-gradient(180deg, rgba(6, 37, 67, .76) 0%, rgba(6, 37, 67, .62) 24%, rgba(6, 37, 67, .34) 44%, rgba(6, 37, 67, 0) 64%, rgba(6, 37, 67, .34) 100%); }
  /* the progress ticks turn the card by touch: a 44px tall hit area each (the old ::before was clipped by the tick's overflow) */
  main .hcase__bar i { width: 38px; height: 44px; margin: -21px -4px; padding: 21px 4px; background-clip: content-box; }
  main .hcase__bar i::after { inset: 21px 4px; }
  /* the legal pages' plain band: the words across the band, not two thirds of it */
  main .phero--plain .phero__copy { grid-column: 1 / -1; }
  /* the text links beside the heroes' buttons and in the homepage panel were 22px tall to a finger: a 44px hit area, the layout unmoved */
  main :is(.phero, .hero, .npanel.ctaband) .actions > .link { padding-block: 11px; margin-block: -11px; }
  /* the logos under the hero's words fade out over a wider edge, so no mark reads as cut off at the column's edge */
  main .phero__logos .marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
}

/* tablet only */
@media (min-width: 760px) and (max-width: 1023.98px) {
  /* the page hero as on a desktop: the words on the Navy, the picture beside them running to the right edge, the row under both;
     a full-width picture band under the words read as a stretched phone layout and pushed the row off the first screen */
  main .phero:not(.phero--plain) .phero__copy { grid-column: 1 / 8; }
  main .phero:not(.phero--plain) .phero__grid { min-height: 460px; padding-block: 44px 48px; }
  main .phero__side { position: absolute; top: var(--hdr); right: 0; bottom: 0; left: calc(var(--gut) + (100% - 2 * var(--gut) + var(--g)) * 7 / 12); height: auto; }
  /* the market glance: the label over the turning challenge, as on a phone, in the narrower column */
  main .phero .mglance { grid-template-columns: minmax(0, 1fr); }
  main .phero .mglance__slides { grid-column: 1; grid-row: 2; }
  /* homepage: the introduction at a readable measure (it ran about 90 characters a line across the page), the tall case card a little
     shorter, about 16:9 across the page */
  main .hero__lede { max-width: 60ch; }
  main .hcase { min-height: 400px; }
}
/* client login, stacked on a tablet (below 900px): the Navy panel kept only its heading and one line, a near-empty band over a near-empty
   tint; on a tablet it keeps what client access shows, the three points in a row under the line, and its note at the foot */
@media (min-width: 760px) and (max-width: 899.98px) {
  main .plogin__side { padding-block: 36px 40px; }
  main .plogin__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 28px; margin-top: 28px; }
  main .plogin__note { display: block; }
}

/* phone */
@media (max-width: 759.98px) {
  /* one heading size for every hero on a phone (40px on most pages and 34px on the market pages before): 36px on a 390 phone, a little
     less on the narrowest, so an article's title takes three lines rather than four */
  main .phero .phero__copy .h1, main .hero .h1 { font-size: clamp(32px, 9.2vw, 38px); line-height: 1.08; }
  /* the homepage logo strip fades out over a wider edge too, so no mark reads as cut off */
  main .logos .marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
  /* a hub page's links under its hero: compact rows (they ran about 130px each, six of them on the hub pages) */
  main .phub__i { gap: 6px 16px; padding: 18px 0 20px; }
}

/* ===== 34 · card sets: related pages, three parts, boxes, why, barriers, market tiles, perspectives (cards.css) ===== */
/* ---------- Phones and tablets: the card sets (2026-10-21 phone and tablet pass) ----------
   Related pages, the three parts and the article grids built on them, the boxes, What sets our work apart, the barriers, the market tiles
   and Perspectives. Nothing here reaches 1024px or wider: desktop is unchanged. */

/* Tablets, and wide phones from 560px: no card set one to a row with a picture across the whole width. Related pages, the three parts and
   the article grids become horizontal cards, the picture beside the words, as the barriers already are on a tablet; What sets our work
   apart keeps one picture width (it followed each panel's height, so the words started at a different place on each), so the words start
   on one line down the six panels. */
@media (min-width: 560px) and (max-width: 1023.98px) {
  main .prels { gap: 20px; }
  main .prel { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: none; }
  main .prel .pic { aspect-ratio: auto; min-height: 210px; }
  main .prel__body { grid-template-rows: none; align-content: center; }
  main .parts .part { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr) auto; }
  main .parts .part > .pic { grid-column: 1; grid-row: 1 / -1; aspect-ratio: auto; min-height: 100%; }
  main .parts .part__body, main .parts .part__foot { grid-column: 2; }
  main .pgrid .part > .pic { min-height: 230px; }
  main .wcard { grid-template-columns: 216px minmax(0, 1fr); }
  main .wcard > .pic { aspect-ratio: auto; min-height: 100%; }
}
/* Wide phones only (560-759px): what a tablet already has, where one card across the whole width ran too wide */
@media (min-width: 560px) and (max-width: 759.98px) {
  main .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  main .mtile { aspect-ratio: auto; min-height: 236px; }
  /* a box across the whole width: its words and its ticked points side by side, as on the widest screens */
  main .tbox__mid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; }
  /* Perspectives: two whole cards to a view, as on a tablet (one card across 700px had a picture over 400px tall) */
  main .reads > .card { flex-basis: calc((100% - var(--g)) / 2); }
}

/* Tablets only */
@media (min-width: 760px) and (max-width: 1023.98px) {
  /* the three points under the three parts sit three across again, each icon over its line */
  main .parts + .points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  main .parts + .points .point { flex-direction: column; align-items: flex-start; gap: 12px; border-top: 0; border-left: 1px solid var(--line); }
  main .parts + .points .point:first-child { border-left: 0; }
  /* the boxes, two to a row: in each foot the 'You receive' lines at the top and the link at the foot, both level across the row */
  main .tbox__foot { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; row-gap: 12px; }
  main .tbox__get { flex: none; }
  main .tbox__mid, main .tbox__foot { padding-inline: var(--pad); }   /* the cards are as narrow as a phone here: the words a little wider */
}

/* Tablets and phones: a long foot link in a box wraps inside the card instead of running past its edge; a card's link that runs to two
   lines splits evenly, so its arrow never sits alone on the second line */
@media (max-width: 1023.98px) {
  main .tbox__foot .link { flex: 0 1 auto; min-width: 0; max-width: 100%; }
  main :is(.tbox__foot .link, .wcard .link, .prel .link, .barrier__go, .part__foot) { text-wrap: balance; }
}

/* Phones */
@media (max-width: 759.98px) {
  /* the boxes (3.5 to 4.3 screens): a shorter picture, the words a little wider, tighter and even spacing */
  main .tboxes { gap: 16px; }
  main .tbox > .pic { aspect-ratio: 5 / 2; }
  main .tbox__mid { gap: 18px; padding: 24px 20px; }
  main .tbox__lead { gap: 14px; }
  main .tbox__x { font-size: 15.5px; line-height: 1.6; }
  main .tbox__foot { row-gap: 12px; padding: 18px 20px 20px; }
  main .tbox__get { flex-basis: 100%; }
  main .why, main .barriers { gap: 16px; }
  main .barrier .pic { aspect-ratio: 2 / 1; }   /* a shorter picture band; the first barrier's doorway keeps its arch */
  main .wcard__body { padding: 22px 20px 20px; }
  main .wcard__x { font-size: 15px; }
  /* the market tiles: the descriptor at the top, the name and link at the foot, more Navy behind both now the tiles are shorter */
  main .mtile > .pic::after { background: linear-gradient(180deg, rgba(6, 37, 67, .86) 0%, rgba(6, 37, 67, .58) 24%, rgba(6, 37, 67, .22) 42%, rgba(6, 37, 67, .38) 52%, rgba(6, 37, 67, .82) 72%, rgba(6, 37, 67, .94) 100%); }
}

/* Phones under 560px */
@media (max-width: 559.98px) {
  /* Related pages: a row each: the label, then a small picture beside the title, then the line and the link; the whole row is the link */
  main .prels { gap: 16px; }
  main .prel { grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto auto auto; column-gap: 16px; padding: var(--pad); }
  main .prel .pic { grid-column: 1; grid-row: 2; width: 88px; height: 88px; min-height: 0; aspect-ratio: auto; align-self: center; margin-top: 14px; }
  main .prel__body { display: contents; }
  main .prel__meta { grid-column: 1 / -1; grid-row: 1; }
  main .prel__t { grid-column: 2; grid-row: 2; align-self: center; margin-top: 14px; font-size: 19px; }
  main .prel__d { grid-column: 1 / -1; grid-row: 3; margin-top: 14px; font-size: 15px; }
  main .prel .link { grid-column: 1 / -1; grid-row: 4; justify-self: start; margin-top: 12px; }
  /* the article grids (Insights and the three series): the same rows, the foot link kept on its own ruled row */
  main .pgrid { gap: 16px; }
  main .pgrid .part { display: grid; grid-template-columns: calc(88px + var(--pad)) minmax(0, 1fr); grid-template-rows: auto auto auto auto; column-gap: 16px; }
  main .pgrid .part > .pic { grid-column: 1; grid-row: 2; width: 88px; height: 88px; aspect-ratio: auto; margin: 14px 0 0 var(--pad); align-self: center; }
  main .pgrid .part__body { display: contents; }
  main .pgrid .part__sub { grid-column: 1 / -1; grid-row: 1; padding: var(--pad) var(--pad) 0; }
  main .pgrid .part__body > .h3 { grid-column: 2; grid-row: 2; align-self: center; margin-top: 14px; padding-right: var(--pad); font-size: 20px; }
  main .pgrid .part__body > p:not([class]) { grid-column: 1 / -1; grid-row: 3; padding: 14px var(--pad) var(--pad); font-size: 15px; }
  main .pgrid .part__foot { grid-column: 1 / -1; grid-row: 4; }
  /* the three parts and What sets our work apart: a shorter picture band over the same words */
  main .parts:not(.pgrid) .part .pic, main .wcard > .pic { aspect-ratio: 5 / 2; }
  /* the market tiles: one to a row, shorter (two to a row left the names on four lines and the link breaking at 360-390px) */
  main .tiles { gap: 12px; }
  main .mtile { aspect-ratio: auto; min-height: 204px; gap: 22px; padding: 20px 20px 22px; }
}

/* ===== 34 · lists and answers: challenges, questions answered, points that open, FAQ, checklist, fit, who owns what, promises (lists.css) ===== */
/* ==== PHONE AND TABLET PASS 2026-10-21: lists and answers ====
   Challenge cards (.pchals), questions answered (.pans), points that open (.pacc), the homepage questions (.faqs), the checklist (.chk),
   the fit box (.fit), who owns what (.owners) and the two promises (.promise, with its steps and tests). Nothing here reaches 1024px. */

/* -- challenge and response cards -- */
@media (max-width: 1023.98px) {
  /* stacked, no card sits level with a neighbour, so the heights held for two lines only left gaps under one-line texts */
  main .pchals--row .pchal__q > .pchal__d, main .pchals--row .pchal__lead { min-height: 0; }
}
@media (min-width: 760px) and (max-width: 1023.98px) {
  /* tablet: each card a full-width horizontal card, the challenge on the left, the response on the tint beside it; the two labels
     level, the tag and the link held to the shared foot */
  main .pchals--row .pchal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  main .pchals--row .pchal__a { padding-top: calc(var(--pad) + 10px); border-top: 0; border-left: 1px solid var(--line); }
}
@media (max-width: 759.98px) {
  /* phone: the number beside its label and title, as a list entry's head, instead of on a row of its own above the title */
  main .pchals--row .pchal__q { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
  main .pchals--row .pchal__top { display: contents; }
  main .pchals--row .pchal__n { grid-column: 1; grid-row: 1 / span 2; }
  main .pchals--row .pchal__q .pchal__lab { grid-column: 2; grid-row: 1; align-self: end; }
  main .pchals--row .pchal__q .h3 { grid-column: 2; grid-row: 2; align-self: start; margin-top: 2px; }
  main .pchals--row .pchal__q > .pchal__d, main .pchals--row .pchal__kind { grid-column: 1 / -1; }
  main .pchals--row .pchal__q > .pchal__d { margin-top: 14px; }
  main .pchals--row .pchal__kind { padding-top: 14px; }
  main .pchals--row .pchal__a .ilist { margin-top: 12px; }
  main .pchals--row .pchal__a .link { padding-top: 16px; padding-bottom: 8px; margin-bottom: -8px; }   /* a 46px tap height */
}

/* -- questions answered -- */
@media (min-width: 760px) and (max-width: 1023.98px) {
  /* two to a row: the question rows share one height, so the rule under each question is level across the pair */
  main .pans__i { grid-row: span 2; grid-template-rows: subgrid; }
}
@media (max-width: 759.98px) {
  main .pans { gap: 16px; }
  main .pans__head { gap: 14px; padding-bottom: 16px; margin-bottom: 16px; }
  main .pans__ic { width: 40px; height: 40px; }
}

/* -- points that open -- */
@media (min-width: 760px) and (max-width: 1023.98px) {
  main .pacc > .pic { aspect-ratio: 5 / 2; }   /* a band over the list, not a second screen of picture */
}
@media (max-width: 759.98px) {
  /* the point's title given more of the row (it ran to three lines in 190px), at the homepage questions' 18px; the whole row stays the
     tap target, 70px or more */
  main .pacc__q { gap: 12px; padding-inline: 20px; }
  main .pacc__q b { font-size: 18px; }
  main .pacc__q .disc--sm { width: 34px; height: 34px; }
  main .pacc__pm { width: 30px; height: 30px; }
  main .pacc__a p { padding-inline: 20px; }   /* the answer across the box, under the icon, not in a 240px column */
}

/* -- the homepage questions, and the fit box: the list set apart from the button or link above it -- */
@media (max-width: 1023.98px) {
  main .faqs, main .fit { row-gap: 36px; }
}
@media (max-width: 759.98px) {
  main .faq__q { gap: 16px; }   /* the question given the width up to its plus, so fewer of them run to three lines */
}

/* -- the checklist: on a phone the number, the label and the box on one line, the condition and its line across the card under them -- */
@media (max-width: 759.98px) {
  main .chk__item { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n k box" "b b b" "d d d"; column-gap: 12px; row-gap: 0; padding: 20px; }
  main .chk__body { display: contents; }
  main .chk__n { grid-area: n; }
  main .chk__k { grid-area: k; }
  main .chk__box { grid-area: box; }
  main .chk__body b { grid-area: b; margin-top: 12px; }
  main .chk__d { grid-area: d; margin-top: 6px; }
}

/* -- who owns what: on a tablet the circled icon over each column's title, the columns' words given more of the width -- */
@media (min-width: 760px) and (max-width: 1023.98px) {
  main .owners > * { padding-inline: 20px; }
  main .owners__h { flex-direction: column; align-items: flex-start; gap: 12px; padding-block: 20px; }
  main .owners__c { gap: 10px; font-size: 15px; }
}

/* -- the two promises: side by side on a tablet, the three steps across under them -- */
@media (min-width: 760px) and (max-width: 1023.98px) {
  main .promise { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  main .steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 759.98px) {
  /* phone: each step's number on its title's line rather than a line of its own (the section ran to 2.8 screens at 360) */
  main .steps3 li { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: baseline; }
  main .steps3 li > p { grid-column: 1 / -1; }
}

/* ===== 34 · features and proof: picture and words, words and points, cases, results, figures, situations, value, pipeline, thesis, capability, network map (proof.css) ===== */
/* ---------- 34. Phones and tablets (2026-10-21 pass): features and proof ----------
   picture and words (pfeat), words and points (pfv), the case feature (pcase), the results table (pctab), the figures panel (pstat),
   the situations table (psit), the homepage results carousel, revenue worth, built for few buyers, the capability, the pipeline (cov)
   and the network map (pnet). Nothing here reaches 1024px or wider. */

/* --- picture and words: on a tablet the picture is a band over the words, not a near-square; the lines held to about 75 characters --- */
@media (min-width: 760px) and (max-width: 1023.98px) {
  main .pfeat > .pic { aspect-ratio: 12 / 5; }
  main .pfeat__body > p { max-width: 56ch; }
}

/* --- words and points --- */
@media (min-width: 760px) and (max-width: 1023.98px) {
  main .pfv__words > p, main .pfv--row .pfv__side p { max-width: 58ch; }
  /* the three points across the width, as the four-point row sets them: the number above its point */
  main .pfv--a .pfv__boxes { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; }
  main .pfv--a .pfv__boxes li { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 20px; padding: 24px 22px 26px; }
}
@media (max-width: 759.98px) {
  main .pfv__boxes { gap: 12px; }
  main .pfv__boxes li { gap: 16px; padding: 20px; }
  main .pfv__boxes li > div { flex: 1 1 auto; }
  /* the four-point row reads as the three-point boxes do on a phone: the number beside its point */
  main .pfv__boxes--row li { flex-direction: row; align-items: center; }
}

/* --- the figures panel --- */
@media (min-width: 760px) and (max-width: 1023.98px) {
  main .pstat__words p { max-width: 60ch; }
  /* the four figures in one row across the width */
  main .pstat__figs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  main .pstat__f, main .pstat__f:nth-child(-n+2), main .pstat__f:nth-child(even) { gap: 16px; min-height: 0; padding: 20px; }
  main .pstat__f b { font-size: 40px; }
  main .pstat__f--word b { font-size: 28px; }
}
@media (max-width: 759.98px) {
  main .pstat__figs { gap: 12px; }
  main .pstat__f, main .pstat__f:nth-child(-n+2), main .pstat__f:nth-child(even) { gap: 16px; min-height: 0; padding: 20px; }
  main .pstat__f b { font-size: min(40px, 10.2vw); }
  main .pstat__f--word b { font-size: min(28px, 7.2vw); }
}

/* --- the case feature --- */
@media (min-width: 760px) and (max-width: 1023.98px) {
  main .pcase > .pic { aspect-ratio: 3 / 1; }
  main .pcase__s, main .pcase__s:first-child { align-content: start; }   /* the three figures level across the row, whatever their labels' length */
}
@media (max-width: 759.98px) {
  main .pcase > .pic { aspect-ratio: 2 / 1; }
  main .pcase__cols { gap: 24px; }
  /* the three figures as rows, each figure beside its label (the labels on one line down the rows): as large, and shorter than three stacked boxes */
  main .pcase__stats { grid-template-columns: auto minmax(0, 1fr); gap: 10px 20px; margin: 0 10px 10px; padding: 10px; }
  main .pcase__s, main .pcase__s:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 20px; }
  main .pcase__s b { font-size: min(30px, 8.4vw); }   /* "Multiple" beside its label down to 320 */
  main .pcase__s span { line-height: 1.4; }
}

/* --- the results table --- */
@media (min-width: 760px) and (max-width: 1023.98px) {
  /* the result in its own column on the right, as the table has it on a desktop */
  main .pctab__r { grid-template-columns: minmax(0, 1fr) minmax(0, 150px) 12px; column-gap: 32px; }
  main .pctab__m { grid-row: 1; } main .pctab__t { grid-row: 2; } main .pctab__c { grid-row: 3; }
  main .pctab__f { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  main .pctab__i { grid-column: 3; grid-row: 1 / span 3; align-self: center; }
}
@media (max-width: 759.98px) {
  /* the title, the challenge and the result run the row's full width; only the meta line shares it with the arrow */
  main .pctab__t, main .pctab__c, main .pctab__f { grid-column: 1 / -1; }
  /* the figure and its label on one line */
  main .pctab__f { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 4px; }
  main .pctab__f small { margin-top: 0; }
}

/* --- the situations table: every value carries its column's name (the header row's own words), as the desktop header gives them --- */
@media (max-width: 1023.98px) {
  main .psit__r:not(.psit__r--h) > span::before, main .psit__r:not(.psit__r--h) > em::before { display: block; margin-bottom: 4px; color: var(--muted); font-size: 13px; font-style: normal; font-weight: 600; }
  main .psit__r:not(.psit__r--h) > span:nth-of-type(1)::before { content: "Who"; }
  main .psit__r:not(.psit__r--h) > span:nth-of-type(2)::before { content: "Source"; }
  main .psit__r:not(.psit__r--h) > em::before { content: "Timing"; }
  main .psit__r { align-items: start; }
}
@media (min-width: 760px) and (max-width: 1023.98px) {
  main .psit__r { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; }
}
@media (max-width: 759.98px) {
  /* the situation, then its three values as label and value lines, the labels in one column */
  main .psit__r { grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; padding-block: 20px; }
  main .psit__r b { grid-column: 1 / -1; margin-bottom: 6px; }
  main .psit__r:not(.psit__r--h) > span, main .psit__r:not(.psit__r--h) > em { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; }
  main .psit__r:not(.psit__r--h) > span::before, main .psit__r:not(.psit__r--h) > em::before { margin-bottom: 0; }
  main .psit__t { text-wrap: balance; }
  /* the headline figure across the top, the other two side by side under it */
  main .psit__figs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  main .psit__f:first-child { grid-column: 1 / -1; }
  main .psit__f:nth-child(3) { border-left: 1px solid var(--line); }
}

/* --- the homepage results carousel --- */
@media (min-width: 760px) and (max-width: 1023.98px) {
  /* the picture beside the words, the three figures across under both */
  main .cases__vp .case { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  main .cases__vp .case > .pic { grid-row: auto; aspect-ratio: auto; min-height: 100%; }
  main .cases__vp .case__stats { grid-column: 1 / -1; margin: 0 16px 16px; }
}
@media (max-width: 759.98px) {
  /* the figures as rows, each beside its label, as in the case feature */
  main .cases__vp .case__stats { grid-template-columns: auto minmax(0, 1fr); gap: 10px 20px; margin: 0 10px 10px; padding: 10px; }
  main .cases__vp .case__stats .stat { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 20px; }
  main .cases__vp .case__stats .stat b { font-size: min(30px, 8.4vw); }
  main .cases__vp .case__stats .stat span { margin-top: 0; }
}

/* --- what your revenue is worth --- */
@media (min-width: 760px) and (max-width: 1023.98px) {
  main .value > .pic { aspect-ratio: 3 / 1; }
}
@media (max-width: 759.98px) {
  main .value > .pic { aspect-ratio: 5 / 2; }
  main .vcol { gap: 10px; padding: 22px 24px 24px; }
  main .vcol__n { margin-top: 2px; }
  main .vcol .ilist li { padding-block: 9px; }
  /* each note's icon beside its heading, the words under both */
  main .vnote { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 14px; padding: 20px 24px 22px; }
  main .vnote .disc { grid-row: auto; width: 40px; height: 40px; }
  main .vnote p { grid-column: 1 / -1; }
}

/* --- built for few buyers: on a phone each model's "In practice" list runs the table's full width, one after the other --- */
@media (max-width: 759.98px) {
  main .models > .ml { grid-column: 1 / -1; border-left: 0; }
  main .models > .ml + .ml { border-top: 1px solid var(--line); }
  main .thesis__panel > .pic { aspect-ratio: 2 / 1; }
}

/* --- the capability --- */
@media (min-width: 760px) and (max-width: 1023.98px) {
  main .capability > .capm { aspect-ratio: 2 / 1; }
  main .capability__words > p { max-width: 58ch; }
}
@media (max-width: 759.98px) {
  main .capability > .capm { --mg: 12px; }
  main .capability .fig b { font-size: min(44px, 10.4vw); }   /* "1,500+" inside its box down to 360 */
}

/* --- the pipeline: on a phone each stage's count sits beside what it counts --- */
@media (max-width: 759.98px) {
  main .cov__col:not(.cov__end) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 14px 12px; padding: 26px var(--pad); }
  main .cov__col:not(.cov__end) > :not(.cov__n):not(.cov__what) { grid-column: 1 / -1; }
  main .cov__ratio { margin-top: -2px; }
}

/* --- the network map --- */
@media (min-width: 760px) and (max-width: 1023.98px) {
  main .pnet__words > p { max-width: 60ch; }
  /* the points and what you receive side by side across the width */
  main .pnet__block { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; width: 100%; column-gap: var(--g); }
}
@media (max-width: 759.98px) {
  /* the map a size larger, so its five labels and icons read at arm's length; every size eases down with the width to the sizes the
     narrowest phones already use (under 360px), so the longest label always ends inside the panel */
  main .pnet__map { --cx: 26px; --ox: clamp(6px, 2.2vw, 8px); --r: clamp(92px, calc(66vw - 133px), 210px); --h: clamp(230px, calc(var(--r) * 1.4 + 110px), 400px);
    --d: clamp(28px, calc(18px + 4vw), 42px); --core: clamp(64px, calc(var(--r) * .65), 84px); --step: 22deg; }
  main .pnet__pt { font-size: clamp(11px, 3.34vw, 13px); }
}

/* ===== 34 · steps, tools, forms and reading: timeline, next step, closing, calculators, forms, market index, legal, articles (flow.css) ===== */
/* ---------- PHONE AND TABLET PASS 2026-10-21: steps, tools, forms and reading (tl, pnext, close, calc, pinq, pquiz, pform, pidx,
   plegal, art). Nothing here applies at 1024px or wider. ---------- */

/* tablet and phone */
@media (max-width: 1023.98px) {
  /* the market index: the second row lost its rule once the two columns became one (the desktop rule clearing the first two rows' tops won) */
  main .pidx__r:nth-child(2) { border-top: 1px solid var(--line); }
  /* the legal index: each line a 44px row to tap */
  main .plegal__idx a { padding-block: 11px; }
  main .plegal__s a { padding-block: 12px; }   /* the links in the text: a 44px hit area, the lines unmoved */
  main .plegal__s > a { margin-block: -12px; justify-self: start; }   /* a link on its own line is a block: the same hit area, its place unchanged */
  /* the closing invitation's second link: a 44px hit area, its place unchanged (it is a flex item, so the padding is taken back in margin) */
  main .close__box .link { padding-block: 11px; margin-block: -11px; }
  /* the legal pages: the index as far from the first heading as the sections are from each other */
  main .plegal { row-gap: 36px; }
}

/* tablet only */
@media (min-width: 760px) and (max-width: 1023.98px) {
  /* the timeline with three steps: two across left the third alone on its row; each step is a row instead, its words beside what reaches you */
  main .tl:not(:has(> li:nth-child(4))) { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  main .tl:not(:has(> li:nth-child(4))) > .tl__item { grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--pad); align-content: start; padding-bottom: var(--pad); }
  main .tl:not(:has(> li:nth-child(4))) > .tl__item > :not(.reaches, .tl__n) { grid-column: 1; }
  main .tl:not(:has(> li:nth-child(4))) > .tl__item > .reaches { grid-column: 2; grid-row: 1 / span 3; align-content: center; margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0; padding: var(--pad); border-top: 0; border-left: 1px solid var(--line); }

  /* the closing invitation's four boxed points, two by two: the titles level across each row instead of centred on uneven descriptions */
  main .close:not(.close--rows) .close__pt { align-content: start; }

  /* the calculators: the reading beside the fields again, as on desktop, so the result changes next to the figure being typed */
  main .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  main .calc__out { margin: -1px -1px -1px 0; }
  main .pcov .calc__in { align-content: center; }   /* the planner's one field sits level with the middle of its reading, not over a blank */

  /* the market index: two columns, as on desktop; one column left each short row two-thirds empty */
  main .pidx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main .pidx__r:nth-child(-n+2) { border-top: 0; }
  main .pidx__r:nth-child(even) { border-left: 1px solid var(--line) !important; }

  /* the legal pages: the index in two columns (a full-width box with one short column was mostly empty); the text at about 70 characters */
  main .plegal__idx ol { display: block; columns: 2; column-gap: var(--g); }
  main .plegal__idx li { break-inside: avoid; }
  main .plegal__body { max-width: 620px; }

  /* articles: the text at about 70 characters a line (it ran to 83); the notes on the same measure, the link cards as horizontal cards */
  main .art__h, main .art__main > p, main .art__list { max-width: 640px; }
  main .art__side { max-width: 640px; }
  main .aside--cta { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: none; }
  main .aside--cta > .pic { aspect-ratio: auto; min-height: 150px; height: 100%; }
  main .aside--cta .aside__body { align-content: center; padding: 20px 24px; }
  main .aside--fig { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 28px; }   /* the figure beside its label: alone on the wider measure it left the box mostly empty */
}

/* phone */
@media (max-width: 759.98px) {
  /* the next-step box: a shorter picture band, the words with more of the width, the button full width */
  main .pnext > .pic { aspect-ratio: 2 / 1; }
  main .pnext__body { padding: 24px 22px 26px; }
  main .pnext__body .actions, main .pnext__body .btn { width: 100%; }

  /* the closing invitation: tighter points, each icon beside its title, the description under both */
  main .close__pt { padding: 20px 22px 22px; column-gap: 14px; row-gap: 8px; align-items: center; }
  main .close__pt .disc { grid-row: auto; width: 40px; height: 40px; }
  main .close__pt p { grid-column: 1 / -1; }
  main .close--rows .close__pt { padding-block: 20px 22px; }

  /* the calculators: the fields wider (the box's padding came to 28px a side) */
  main .calc__in { gap: 20px; padding: 26px 20px 24px; }
  main .calc__out { padding: 24px 22px 26px; }

  /* the forms: the fields wider, the send button full width */
  main .pform:not(.pform--login) { padding: 24px 20px; }
  main .pform:not(.pform--login) .pform__foot .btn { width: 100%; }
  /* the resume's button: a 44px hit area inside its box */
  main .pform__file-btn { position: relative; }
  main .pform__file-btn::after { content: ""; position: absolute; inset: -5px -4px; }

  /* the legal index: a ruled list of rows to tap */
  main .plegal__idx { padding-block: 6px; }
  main .plegal__idx a { padding-block: 12px; }
  main .plegal__idx li + li { border-top: 1px solid var(--line); }

  /* the fit check */
  main .pquiz__q { padding-inline: 20px; }
  main .pquiz__q legend { align-items: flex-start; }   /* the number level with the question's first line, not the middle of three */
  main .pquiz__q legend i { margin-top: -3px; }

  /* the market index: the icon beside the name, the description and what each market gets across the full width under them */
  main .pidx__r { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; row-gap: 6px; padding: 20px 22px 22px; }
  main .pidx__r .disc { grid-row: 1; align-self: center; }
  main .pidx__n { align-self: center; }
  main .pidx__i { align-self: center; margin-top: 0; }
  main .pidx__b, main .pidx__d { grid-column: 1 / -1; }
  main .pidx__b { margin-top: 4px; }

  /* articles: a phone's reading size (18px ran 36 characters a line) and shorter picture bands on the link cards */
  main .art__main > p { font-size: 17px; line-height: 1.7; }
  main .art__list li { font-size: 16px; line-height: 1.6; }
  main .aside--cta > .pic { aspect-ratio: 5 / 2; }
}

/* ===== 34 · the time infographic (.ptime) labels (lead.css) ===== */
/* 'Where each team's time goes' (.ptime): where the infographic is narrow (phones, and beside its list at 1024-1279) the four moment
   labels overlapped, because the lane names took a column of their own. There the lane names sit on their own rows, just above their
   lines, and the moments share the whole width. */
@media (max-width: 759.98px), (min-width: 1024px) and (max-width: 1279.98px) {
  main .ptime__grid { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); row-gap: 0; }
  main .ptime__who:empty { display: none; }
  main .ptime__who { grid-column: 1 / -1; padding: 14px 0 6px; font-size: 13px; }
  main .ptime__c:not(.ptime__h) { min-height: 12px; }
  main .ptime__h { padding-bottom: 4px; }
  main .ptime__h b { max-width: none; padding-inline: 3px; }
}
@media (max-width: 419.98px) {
  main .ptime__grid { padding-inline: 6px; }
  main .ptime__who { padding-inline: 10px; }
  main .ptime__h b { padding-inline: 1px; font-size: 12px; font-weight: 500; letter-spacing: -.01em; }
}

/* ===== 34 · touch screens at desktop widths: an iPad held sideways is 1024-1366px wide and gets the desktop layout, but it is still a
   finger, not a mouse. The same touch areas as on phones and tablets (absolutely placed ::after, so nothing moves) and a 16px sign-up
   field so iPadOS does not zoom. A mouse or trackpad (pointer: fine) never sees any of this. ===== */
@media (min-width: 1024px) and (pointer: coarse) {
  main a.link:not(.card__go), .ftr__links .ftr__col li a, .ftr__h a, .ftr__touch .ftr__mail, .ftr__legal a, .ftr__legal button, .ftr__follow .ftr__soc { position: relative; }
  main a.link:not(.card__go)::after { content: ""; position: absolute; inset: -12px -6px; }
  .ftr__links .ftr__col li a::after { content: ""; position: absolute; inset: -7px -4px; }   /* the links are 14px apart: each touch area stops at the gap's middle */
  .ftr__h a::after, .ftr__touch .ftr__mail::after, .ftr__legal a::after, .ftr__legal button::after { content: ""; position: absolute; inset: -12px -6px; }
  .ftr__follow .ftr__soc::after { content: ""; position: absolute; inset: -4px; }
  .ftr__row input { font-size: 16px; }
}

/* ===== 34 · points that open, on a tablet: an answer ran to 95 characters a line at 820px; held to a comfortable measure ===== */
@media (min-width: 760px) and (max-width: 1023.98px) { main .pacc__a p { max-width: 68ch; } }

/* ===== 34 · the footer with every page in it (2026-10-21): seven link groups. Tablet: four across, as on desktop (three across left Tools
   alone on a row), with the mark and sign-up over three columns and Get in touch and Follow us in the fourth beside them. Phone: Get in
   touch takes the place beside Tools, and Follow us runs across under both ===== */
@media (min-width: 760px) and (max-width: 1023.98px) {
  .ftr__top { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 20px; }
  .ftr__about { grid-area: 1 / 1 / 2 / 3; } .ftr__touch { grid-area: 1 / 3 / 2 / 5; }   /* half each, so the office keeps its three lines */
  .ftr__news { grid-area: 2 / 1 / 3 / 3; } .ftr__follow { grid-area: 2 / 3 / 3 / 5; }
}
@media (max-width: 759.98px) {
  .ftr__top { grid-auto-flow: row dense; }   /* Markets runs across both columns; the other six groups pair up around it */
  .ftr__links .ftr__col--markets { grid-column: 1 / -1; }
  .ftr__links .ftr__col--markets ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .ftr__touch { grid-column: 1 / -1; }
  .ftr__follow { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .ftr__follow .ftr__h { margin-bottom: 0; }
}

/* ===== 35. The footer as four stacked columns (2026-10-21: "fix the layout and the design ... there's a lot of white empty space and it just
   looks a bit off"). Each column is a stack of two groups (What we do + Tools, Who we serve + Markets, How we work + Insights, The firm +
   Get in touch + Follow us), so no group waits for a taller neighbour on its row and the four columns end close together; the sign-up sits
   straight under the firm line instead of a row below it; the mark's column is narrower, so the names have room. Phones keep the pairs
   of groups (the stacks open up, display: contents). Builder: core.footer(). ===== */
.ftr .ftr__top { grid-template-columns: clamp(260px, 21vw, 340px) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: clamp(48px, 5vw, 104px); row-gap: 40px; }
.ftr .ftr__about { grid-area: 1 / 1; }
.ftr .ftr__news { grid-area: 2 / 1; align-self: start; }
.ftr .ftr__follow { grid-area: 3 / 1; align-self: start; }   /* under the sign-up, so the mark's column carries on as far as the links */
.ftr .ftr__news form { max-width: 100%; }
.ftr .ftr__links { grid-area: 1 / 2 / 4 / 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--fg); align-items: start; }
@media (min-width: 1024px) {   /* each column as wide as its longest link and the space shared out evenly between them, so no gap looks wider than another (2026-10-21) */
  .ftr .ftr__links { grid-template-columns: repeat(4, minmax(0, max-content)); justify-content: space-between; }
}
.ftr .ftr__stack { display: flex; flex-direction: column; gap: 44px; }
.ftr .ftr__contact { display: flex; flex-direction: column; gap: 34px; }
.ftr .ftr__links .ftr__col a { white-space: normal; }
.ftr .ftr__links .ftr__col li { line-height: 1.45; text-wrap: balance; }
.ftr .ftr__follow > .ftr__touch { flex: 1 0 100%; margin-top: 30px; }   /* the office and email under Follow us, no heading (2026-10-21) */
.ftr .ftr__follow { flex-wrap: wrap; }   /* where Follow us is a row (heading beside the icons), the office and email take a line of their own */
.ftr .ftr__col--reading { max-width: 16em; }   /* Latest insights: the article titles wrap to the width of the links above, so the first column stays as narrow as before */
@media (max-width: 1399.98px) {   /* the firm line and the sign-up side by side above the four columns */
  .ftr .ftr__top { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; row-gap: 30px; }
  .ftr .ftr__about { grid-area: 1 / 1 / 3 / 2; } .ftr .ftr__news { grid-area: 1 / 2; max-width: 460px; }
  .ftr .ftr__follow { grid-area: 2 / 2; }   /* Follow us under the sign-up, beside the firm line */
  .ftr .ftr__links { grid-area: 3 / 1 / 4 / 3; margin-top: 18px; }
}
@media (max-width: 759.98px) {   /* phones: the stacks open up; the groups pair up as before, Markets across both columns */
  .ftr .ftr__top { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 36px 16px; }
  .ftr .ftr__about { grid-area: 1 / 1 / 2 / 3; } .ftr .ftr__news { grid-area: 2 / 1 / 3 / 3; max-width: none; }
  .ftr .ftr__links, .ftr .ftr__stack, .ftr .ftr__contact { display: contents; }
  .ftr .ftr__col--what { order: 1; } .ftr .ftr__col--how { order: 2; } .ftr .ftr__col--markets { order: 3; grid-column: 1 / -1; }
  .ftr .ftr__col--firm { order: 4; } .ftr .ftr__col--serve { order: 5; } .ftr .ftr__col--insights { order: 6; } .ftr .ftr__col--tools { order: 7; } .ftr .ftr__col--reading { order: 8; grid-column: 1 / -1; max-width: none; }   /* Latest insights across the phone */
  .ftr .ftr__touch { order: 8; grid-column: 1 / -1; } .ftr .ftr__follow { order: 9; grid-area: auto / 1 / auto / -1; }
  .ftr .ftr__links { margin-top: 0; }
}
@media (min-width: 760px) and (max-width: 1023.98px) {   /* four narrow columns on a tablet: the office keeps its three lines */
  .ftr .ftr__touch li { grid-template-columns: 16px minmax(0, 1fr); gap: 8px; }
  .ftr .ftr__touch address { font-size: 14px; white-space: nowrap; }
}

/* ===== 36. Exploring fit: the second inquiry form at the foot of the page (2026-10-21), one column under its centred heading, at a measure
   that keeps the fields comfortable (the form itself is the one at the top of the page, field ids iq2-*) ===== */
main .pinq--end { grid-template-columns: minmax(0, 1fr); max-width: 880px; margin-inline: auto; }
.pform label small { color: var(--muted); font-size: 13.5px; font-weight: 500; }   /* "(optional)" beside a label, in the fuller inquiry form (2026-10-21) */

/* ---------- 37. Exploring fit's own hero (2026-10-21). He chose variation A of four (the inquiry form in the hero), then, of three more
   versions, number 3: the Navy holds the heading, the words and the promises; the white form hangs well past the Navy's foot into a pale
   blue band, where the question and four links down the page sit beside it ("I did kind of like it where the thing was cut off over the
   top. The only problem... the section underneath was white"). The pale blue (--fh-tint) is firmer than the site's tint, which is so near
   white that the form would blend into it. The form is the fuller one: the company and the role (a title over it was tried and removed). Markup: scripts/site/fit_hero.py;
   earlier versions in tmp/retired-fit-hero-variants-2026-10-21/. Tablets and phones: the words, then the form (the Navy behind its top),
   then the links on the pale blue. ---------- */
.fh { --fh-tint: #EEF3F8; --fh-e: clamp(40px, 3.6vw, 64px); overflow: clip; }
/* the Navy ground, with its last 4px pale blue so no sliver of Navy shows where the hero meets the white section below */
.fh .phero__top { background: linear-gradient(var(--fh-tint), var(--fh-tint)) center bottom / 100% 4px no-repeat, var(--navy) var(--wash) center / cover no-repeat; }
.fh__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--g); row-gap: calc(2 * var(--fh-e)); align-items: start; padding-block: clamp(40px, 3.6vw, 64px) clamp(56px, 5vw, 88px); }
/* the words, and under them the pale blue: painted from --fh-e below the words to the hero's foot, beneath the form */
.fh__copy { position: relative; z-index: 1; grid-column: 1 / 6; grid-row: 1; display: grid; gap: 20px; justify-items: start; padding-top: clamp(8px, 1.6vw, 32px); }
.fh__copy::after { content: ""; position: absolute; z-index: -1; top: calc(100% + var(--fh-e)); bottom: -3000px; left: -100vw; right: -100vw; background: var(--fh-tint); }
.fh__ticks { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }   /* one under another on desktop, on one line on a tablet */
.fh__ticks li { display: flex; gap: 8px; align-items: center; color: #fff; font-size: 15px; font-weight: 500; line-height: 1.4; white-space: nowrap; }
.fh__ticks .icon { flex: none; width: 16px; height: 16px; color: var(--accent-dark); }
.fh__more { position: relative; z-index: 3; grid-column: 1 / 6; grid-row: 2; align-self: start; }
.fh__more-t { margin-bottom: 8px; color: var(--navy); font: 600 17px/1.4 var(--sans); }   /* Navy on the pale blue */
.fh__more-d { max-width: 520px; margin-bottom: 22px; color: var(--text); font-size: 15.5px; line-height: 1.55; }   /* a short line between the question and the links (2026-10-21); the links keep their 22px of room above */
.fh__cta { margin-top: 2px; }   /* the text link under the promises (2026-10-21) */
.fh__more ul { width: min(100%, 520px); border-top: 1px solid var(--line-2); }   /* longer rules, one length with the line above (2026-10-21: "make these longer and also make the text box above it longer"; full width was too long on a tablet, the longest link's width too short) */
.fh__more li { border-bottom: 1px solid var(--line-2); }
.fh__more a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding-block: 12px; color: var(--navy); font-size: 15.5px; font-weight: 500; line-height: 1.4; }
.fh__more a .icon { flex: none; width: 12px; height: 12px; opacity: .8; transition: transform .3s var(--ease); }
.fh__more a:hover span { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.fh__more a:hover .icon { transform: translateY(3px); }
.fh__form { position: relative; z-index: 2; grid-column: 7 / 13; grid-row: 1 / 3; }
.fh__form .pform { background: #fff; border-color: #fff; }
@media (min-width: 1024px) { .fh__form .pform textarea { min-height: 120px; } }
@media (max-width: 1023.98px) {
  .fh__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 36px; padding-bottom: 56px; }
  .fh__grid > * { grid-column: 1 / -1; grid-row: auto; }
  .fh__copy { padding-top: 0; }
  .fh__copy::after { display: none; }
  /* the Navy holds the words and the top of the form; the rest of the form and the links sit on the pale blue */
  .fh__form::before { content: ""; position: absolute; z-index: -1; top: 150px; bottom: -3000px; left: -100vw; right: -100vw; background: var(--fh-tint); }
  .fh__ticks { flex-direction: row; flex-wrap: wrap; gap: 10px 22px; }
  .fh__form { order: 2; }
  .fh__more { order: 3; }
}

/* ---------- 38. The footer on a phone (2026-10-22: "make sure it's well designed, I want company address, email, important links all
   available, right now it drags out quite far"). One column: the firm line, then the office, email and social icons, then each link group
   as one row that opens and closes (its first line, Overview, opens the group's own page), then the sign-up and the legal line. Tablets and
   desktops are unchanged: the toggle and the Overview line are hidden there. Without JavaScript every list stays open. ---------- */
.ftr__tog, .ftr__all { display: none; }
@media (max-width: 759.98px) {
  .ftr .ftr__top { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; gap: 0; padding-block: 44px 36px; }
  .ftr .ftr__about { grid-area: auto; order: -2; padding-bottom: 28px; }
  .ftr .ftr__follow { grid-area: auto; order: -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 16px; padding-bottom: 32px; }
  .ftr .ftr__follow > .ftr__touch { order: -1; flex: 1 0 100%; margin: 0 0 6px; }
  .ftr .ftr__news { grid-area: auto; order: 20; max-width: none; padding-top: 36px; }
  .ftr .ftr__links .ftr__col, .ftr .ftr__links .ftr__col--markets { grid-column: 1 / -1; margin: 0; border-top: 1px solid rgba(255, 255, 255, .16); }
  .ftr .ftr__col--what { order: 1; } .ftr .ftr__col--serve { order: 2; } .ftr .ftr__col--markets { order: 3; } .ftr .ftr__col--how { order: 4; }
  .ftr .ftr__col--firm { order: 5; } .ftr .ftr__col--insights { order: 6; } .ftr .ftr__col--reading { order: 7; max-width: none; } .ftr .ftr__col--tools { order: 8; border-bottom: 1px solid rgba(255, 255, 255, .16); }
  .js .ftr .ftr__links .ftr__h { position: relative; display: flex; align-items: center; min-height: 58px; margin: 0; font-size: 16px; }
  .js .ftr .ftr__links .ftr__h > a { padding: 0; margin: 0; }
  .js .ftr__tog { display: block; position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .js .ftr__tog:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
  .js .ftr__tog .icon { position: absolute; right: 2px; top: 50%; width: 14px; height: 14px; margin-top: -7px; opacity: .8; transition: transform .25s var(--ease); }
  .js .ftr__col.is-open .ftr__tog .icon { transform: rotate(180deg); }
  .js .ftr .ftr__links .ftr__col ul, .js .ftr .ftr__links .ftr__col--markets ul { display: none; }
  .js .ftr .ftr__links .ftr__col.is-open ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 0 14px; }
  .js .ftr__all { display: list-item; }
  .js .ftr__all a { color: #fff; font-weight: 600; }
}


/* ===== 38. Results that move (2026-10-26: "for the feature sections you can do some variations with them or have dynamic feature sections where
   they scroll or something as we have quite a few now"). sub.case_set: every result, the first varying by page.
   one tab per result (its market and term, its headline figure); the result under them changes every eight seconds while on screen, a line
   filling along the chosen tab's top; a chosen tab holds for one more turn, then the turning carries on; every result shares one cell, so the
   section never changes height. (A scrolling row of whole results was the other version shown; he chose the tabs.) ===== */
.pcset { display: grid; gap: 24px; }
.pcset__tabs { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pcset__tab { position: relative; display: grid; gap: 12px; align-content: start; min-width: 0; padding: 20px 24px 22px; border: 0; border-left: 1px solid var(--line);
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pcset__tab:first-child { border-left: 0; padding-left: 0; }
.pcset__tab .sw__time { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--navy); transform: scaleX(0); transform-origin: left; }
.pcset__tab[aria-selected="true"] .sw__time { transform: scaleX(1); }
.pcset.is-timed .pcset__tab[aria-selected="true"] .sw__time { transform: scaleX(0); animation: fill var(--t, 8s) linear forwards; }
.pcset__k { color: var(--accent); font-size: 13px; line-height: 18px; font-weight: 600; }
.pcset__f { display: grid; gap: 6px; }
.pcset__f b { color: var(--muted); font: 420 clamp(26px, 2.1vw, 34px)/1.05 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.01em; transition: color .3s var(--ease); }
.pcset__f small { color: var(--muted); font-size: 14px; line-height: 1.4; }
.pcset__tab[aria-selected="true"] .pcset__f b, .pcset__tab:hover .pcset__f b { color: var(--navy); }
.pcset__tab:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.pcset__stage { display: grid; }
.pcset__pane { grid-area: 1 / 1; display: grid; grid-template-rows: minmax(0, 1fr) auto; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s linear .6s; }
.pcset__pane.is-on { opacity: 1; visibility: visible; transition: opacity .6s var(--ease); }
@media (max-width: 1023.98px) {
  .pcset__tabs { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .pcset__tabs::-webkit-scrollbar { display: none; }
  .pcset__tab { flex: 0 0 min(40vw, 260px); scroll-snap-align: start; }
}
@media (max-width: 759.98px) { .pcset__tab { flex-basis: 64vw; } }

/* every result fills the height the tallest needs (no blank band under a shorter one): its words keep their places and "Read the case" stands
   at the foot; stacked (tablets and phones), the spare height goes to the words, never between the figures */
.pcset .pcase__main { display: flex; flex-direction: column; gap: 16px; }
.pcset .pcase__main .link { margin-top: auto; }
@media (max-width: 1023.98px) { .pcset .pcase { grid-template-rows: auto minmax(0, 1fr) auto; } }
/* the results in short (2026-10-27, search brief): the tabs' row as links to each case on Recent successes; every figure in Navy, the
   accent on hover; no panes beneath */
.pcstrip .pcset__tab { color: inherit; }
.pcstrip .pcset__f b { color: var(--navy); }
.pcstrip .pcset__tab:hover .pcset__f b, .pcstrip .pcset__tab:focus-visible .pcset__f b { color: var(--accent); }
.pcstrip .pcset__tab:hover small { color: var(--text); }
/* the results line (2026-10-27): a market page with no fitting result says where the results are, in one ruled row */
.pline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 40px; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pline p { margin: 0; max-width: 64ch; color: var(--text); font-size: 17px; line-height: 1.55; }
/* long page headings (2026-10-27): the search-phrase headings run to 40-58 characters; at the short names' 20ch they broke into three
   ragged lines ("Commercial / real estate and / infrastructure deal flow."). One size smaller and the words column's full width sets them
   on two lines from 1024 up; phones keep their own size (main .phero .phero__copy .h1) */
.phero .h1.h1--long { font-size: clamp(32px, 2.9vw, 48px); max-width: none; }
@media (max-width: 759.98px) { main .phero .phero__copy .h1.h1--long { font-size: clamp(28px, 7.8vw, 32px); } }