/* ===========================================================================
247 EXPAT — v2 PROTOTYPE STYLESHEET
Loaded ONLY by the page IDs listed in src/_data/v2.json. Every other page on
the site continues to load site.css and is untouched by this file.
The reference points are the four sister sites, not a generic design system:
navy structure, one informational blue, one action colour with one job, warm
and cool grounds alternating down the page, navy-tinted shadows, and a single
hero photograph used as a low-opacity wash rather than a picture.
What is NOT inherited: the parents' refusal of a 400 weight. They are short
commercial sites. This one runs 2,000-word guides, and semibold body copy at
that length is exhausting to read. Headings and UI keep the family weights;
body copy is set properly.
======================================================================== */
:root{
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
--inner:1160px;
--gutter:clamp(20px,5vw,56px);
--band-y:clamp(44px,6vw,84px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;background:var(--paper);color:var(--ink);
font:var(--w-body) 1.0625rem/var(--lh-prose) var(--sans);
-webkit-font-smoothing:antialiased;
}
@media (min-width:800px){body{font-size:1.125rem}}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--navy)}
h1,h2,h3,h4{font-family:var(--sans);color:var(--navy);line-height:1.16;letter-spacing:-.018em;margin:0}
h1{font-weight:var(--w-display)}
h2,h3{font-weight:var(--w-head)}
strong{font-weight:var(--w-strong);color:var(--navy)}
hr{display:none}
:focus-visible{outline:3px solid var(--action);outline-offset:3px;border-radius:3px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;z-index:99;background:var(--navy);color:#fff;padding:10px 16px;border-radius:var(--r-btn)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- shared shells ---------------------------------------------- */
.wrap{max-width:var(--inner);margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:var(--band-y)}
.band-inner{max-width:var(--inner);margin-inline:auto;padding-inline:var(--gutter)}
.band--paper{background:var(--paper)}
.band--warm{background:var(--warm)}
.band--cool{background:var(--cool)}
.band--navy{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);color:#e8eef4}
.band--navy h2,.band--navy h3,.band--navy strong{color:#fff}
.band--navy a{color:#a8cde6}
.band--navy a:hover{color:#fff}
/* INVERTED-CONTEXT COLOURS, SET IN ONE PLACE.
Every rule below re-states a colour that was tuned for a light ground and is
unreadable on this one. They are collected here rather than patched at each
definition, because this estate has now shipped the same defect three times
in three different selectors: .a-hero strong (half a standfirst invisible),
and then .sec-body .link-pending — navy on navy, 1.00:1, eight spans across
six pages, rendering sentences that ended "…and where you'll fit: ."
A pending link is not a link; it stays undressed as one. It just has to be
legible. Emphasis likewise: --muted is a light-ground token and measured
2.35:1 here, making the emphasised word LESS visible than the prose. */
.band--navy .sec-body .link-pending{color:#fff}
.band--navy .sec-body>p em{color:#eaf1f7}
/* Focus must clear 3:1 against the ground it lands on (WCAG 1.4.11); the
--action ring measures 2.50:1 on navy, and the footer is navy sitewide. */
.band--navy :focus-visible,.site-footer :focus-visible{outline-color:#fff}
/* ---------- staging bar ------------------------------------------------- */
.staging-bar{background:var(--navy-deep);color:#fff;font:var(--w-strong) .72rem/1 var(--sans);
letter-spacing:.10em;text-transform:uppercase;text-align:center;padding:8px 12px}
/* ---------- header ------------------------------------------------------ */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.site-header .inner{display:flex;align-items:center;gap:clamp(14px,3vw,34px);
min-height:74px;max-width:var(--inner);margin-inline:auto;padding-inline:var(--gutter)}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.logo{height:34px;width:auto}
/* THE WORDMARK IS NOW A PICTURE OF ITSELF (V3, 2026-10-02).
It was live text in a system face, which meant the brand mark rendered in
whatever Helvetica-ish font the device happened to have — different on every
platform, and the one element on the page that must not vary. It is now
/assets/wordmark.svg: Archivo outlines, 1.7KB, no font download on the
critical path, no FOUT, identical on all 58 pages. Height not width, so the
two colour variants stay interchangeable. */
.brand picture{display:block;line-height:0}
.wordmark{display:block;height:26px;width:auto}
/* The compact mark is square, so it is sized by its own rule — 26px of a
wordmark and 26px of a square are not the same object. */
@media (max-width:619px){.site-header .wordmark{height:34px}}
/* Brand presence. 29px read as a header label rather than the mark of the
flagship site in the group; the header grows with it so nothing crowds. */
@media (min-width:960px){.wordmark{height:34px}.site-header .inner{min-height:84px}}
.nav{display:none;gap:clamp(12px,1.9vw,28px);margin-right:auto}
.nav a{color:var(--navy);font-weight:var(--w-strong);font-size:.965rem;text-decoration:none;
padding:8px 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--action)}
/* A hub that owns its slot but has no page yet. Not a link, and never labelled
with governance language — the reader simply cannot click it. */
.nav-pending{color:var(--muted);font-weight:var(--w-strong);font-size:.965rem;padding:8px 0;cursor:default}
.nav-panel .nav-pending{padding:11px 14px;display:block}
.header-cta{margin-left:auto}
@media (min-width:960px){.nav{display:flex}.header-cta{margin-left:0}}
.nav-toggle{margin-left:auto;position:relative}
.nav-toggle summary{list-style:none;cursor:pointer;font-weight:var(--w-strong);color:var(--navy);
border:1px solid var(--line-strong);border-radius:var(--r-btn);padding:9px 13px;font-size:.9rem}
.nav-toggle summary::-webkit-details-marker{display:none}
.nav-panel{position:absolute;right:0;top:calc(100% + 10px);background:#fff;border:1px solid var(--line);
border-radius:var(--r-card);box-shadow:var(--shadow-lg);min-width:230px;padding:8px;display:grid}
.nav-panel a{padding:11px 14px;text-decoration:none;color:var(--navy);font-weight:var(--w-strong);border-radius:var(--r-btn)}
.nav-panel a:hover{background:var(--warm)}
@media (min-width:960px){.nav-toggle{display:none}}
/* ---------- buttons ----------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.55em;background:var(--action);color:#fff;
font:var(--w-strong) 1rem/1 var(--sans);padding:14px 22px;border-radius:var(--r-btn);
text-decoration:none;border:1px solid var(--action);transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{color:#fff;box-shadow:var(--shadow);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--line-strong)}
.btn--ghost:hover{color:var(--navy);border-color:var(--navy);background:#fff}
.band--navy .btn--onnavy,.btn--onnavy{background:#fff;color:var(--navy);border-color:#fff}
.band--navy .btn--onnavy:hover,.btn--onnavy:hover{color:var(--navy);background:#fff}
.header-cta{padding:11px 18px;font-size:.94rem;flex:none}
.btn--inert,.btn[aria-disabled]{background:var(--line);border-color:var(--line-strong);color:var(--muted);pointer-events:none}
/* ---------- small type devices ------------------------------------------ */
.kicker{font:var(--w-strong) .76rem/1.3 var(--sans);letter-spacing:.13em;text-transform:uppercase;
color:var(--action);margin:0 0 .7em}
.band--navy .kicker{color:var(--action-bright)}
.eyebrow{font:var(--w-strong) .7rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rule{height:2px;width:56px;background:var(--action);border:0;margin:0 0 26px;display:block}
/* =========================================================================
HOMEPAGE
Optimism. Wider, lighter, more colour, more air than an article.
====================================================================== */
.home-hero{position:relative;overflow:hidden;background:
radial-gradient(120% 130% at 88% 8%, #fdf4ec 0%, rgba(253,244,236,0) 58%),
linear-gradient(178deg,var(--warm) 0%,#fffdfa 62%,var(--paper) 100%);
border-bottom:1px solid var(--line)}
.home-hero .band-inner{position:relative;display:grid;gap:clamp(32px,5vw,64px);
padding-block:clamp(44px,5vw,76px);align-items:center}
@media (min-width:940px){.home-hero .band-inner{grid-template-columns:minmax(0,1fr) minmax(0,.86fr)}}
.home-hero h1{font-size:clamp(2.05rem,1.25rem + 3.3vw,4rem);letter-spacing:-.032em;max-width:14ch}
.home-hero h1 em{font-style:normal;color:var(--action);display:block}
.home-hero .standfirst{font:var(--w-body) clamp(1.14rem,1rem + .65vw,1.42rem)/1.55 var(--serif);
color:var(--muted);max-width:44ch;margin:1.1em 0 0}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:2rem}
.hero-assure{display:flex;flex-wrap:wrap;gap:10px 22px;margin:2rem 0 0;padding:0;list-style:none;
font-size:.92rem;color:var(--muted)}
.hero-assure li{display:flex;align-items:flex-start;gap:.6em}
.hero-assure li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--action-bright);flex:none;margin-top:.55em}
/* journey chooser — the first real interaction */
.chooser{display:grid;gap:10px}
.chooser-head{font:var(--w-head) 1.12rem/1.3 var(--sans);color:var(--navy);margin:0 0 .2em}
.chooser-sub{font-size:.94rem;color:var(--muted);margin:0 0 1.1em}
.jrow{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);
border-left:4px solid var(--blue);border-radius:var(--r-btn);padding:15px 18px;text-decoration:none;
box-shadow:var(--shadow-sm);transition:border-left-color .14s ease,transform .14s ease,box-shadow .14s ease}
.jrow:hover{border-left-color:var(--action);transform:translateX(3px);box-shadow:var(--shadow)}
.jrow .jt{font-weight:var(--w-strong);color:var(--navy);font-size:1.02rem}
.jrow .jd{display:block;font-weight:400;color:var(--muted);font-size:.88rem;margin-top:2px}
.jrow .jgo{margin-left:auto;color:var(--action);font-weight:var(--w-head);flex:none}
.jrow--pending{border-left-color:var(--line-strong);box-shadow:none;background:var(--cool);cursor:default}
.jrow--pending .jgo{color:var(--muted)}
/* subject universe — a typographic row, not six cards */
.subjects{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.subjects .band-inner{padding-block:clamp(26px,3.4vw,40px)}
.subject-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:.55em clamp(14px,2.4vw,30px);margin:0;padding:0;list-style:none}
.subject-row li{display:flex;align-items:baseline;gap:clamp(14px,2.4vw,30px)}
.subject-row li:not(:last-child)::after{content:"·";color:var(--line-strong);font-weight:700}
.subject-row a{font:var(--w-head) clamp(1.1rem,.95rem + .7vw,1.6rem)/1.2 var(--sans);color:var(--navy);
text-decoration:none;letter-spacing:-.02em;border-bottom:2px solid transparent}
.subject-row a:hover{color:var(--action);border-bottom-color:var(--action)}
.subject-row .soon{font:var(--w-head) clamp(1.1rem,.95rem + .7vw,1.6rem)/1.2 var(--sans);
color:var(--line-strong);letter-spacing:-.02em}
/* section scaffolding used across the homepage */
.sec-top{max-width:60ch;margin:0 0 clamp(26px,3.4vw,42px)}
.sec-top h2{font-size:clamp(1.55rem,1.2rem + 1.35vw,2.3rem)}
.sec-top p{color:var(--muted);margin:.7em 0 0;font-size:1.03rem}
.sec-top--wide{max-width:72ch}
/* discovery: an editorial index, not a card grid */
.index-cols{display:grid;gap:clamp(26px,3.4vw,44px)}
@media (min-width:760px){.index-cols{grid-template-columns:1fr 1fr}}
@media (min-width:1060px){.index-cols--3{grid-template-columns:repeat(3,1fr)}}
.index-col h3{font-size:1.05rem;letter-spacing:.02em;padding-bottom:10px;border-bottom:2px solid var(--navy);margin-bottom:6px}
.index-list{list-style:none;margin:0;padding:0}
.index-list li{border-bottom:1px solid var(--line)}
.index-list a{display:block;padding:11px 0;text-decoration:none;color:var(--navy);font-weight:var(--w-strong);font-size:.99rem}
.index-list a span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
font-weight:400;color:var(--muted);font-size:.875rem;margin-top:3px;line-height:1.45}
.index-list a:hover{color:var(--action)}
.index-more{display:inline-block;margin-top:14px;font-weight:var(--w-strong);font-size:.95rem;text-decoration:none}
.index-more::after{content:" →"}
/* trust — evidence, stated plainly, no badges and no invented numbers */
.trust-grid{display:grid;gap:clamp(22px,3vw,40px)}
@media (min-width:760px){.trust-grid{grid-template-columns:repeat(3,1fr)}}
.trust-item h3{font-size:1.06rem;margin-bottom:.5em}
.trust-item p{margin:0;color:#d7e2ec;font-size:.99rem}
.band--navy .trust-item h3{color:#fff}
.trust-item .num{display:block;font:var(--w-display) 2.4rem/1 var(--sans);color:var(--action-bright);letter-spacing:-.03em;margin-bottom:.22em}
/* final routing */
.route-final{display:grid;gap:14px;margin-top:6px}
@media (min-width:820px){.route-final{grid-template-columns:1fr 1fr}}
.rf{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:26px 26px 24px;
box-shadow:var(--shadow-sm);text-decoration:none;display:block}
.rf:hover{box-shadow:var(--shadow);border-color:var(--line-strong)}
.rf h3{font-size:1.2rem;margin:.3em 0 .4em}
.rf p{margin:0;color:var(--muted);font-size:.97rem}
.rf .go{display:inline-block;margin-top:1em;color:var(--action);font-weight:var(--w-strong)}
/* =========================================================================
ARTICLE
====================================================================== */
.a-hero{position:relative;background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);
color:#e9eff5;overflow:hidden}
.a-hero--clarity{background:linear-gradient(160deg,#173a5c 0%,#102a45 100%)}
.a-hero .wash{position:absolute;inset:0;background-size:cover;background-position:50% 32%;opacity:.26;
filter:saturate(.86)}
.a-hero .wash::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(11,33,55,.30) 0%,rgba(11,33,55,.78) 100%)}
.a-hero .band-inner{position:relative;padding-block:clamp(40px,6vw,78px)}
.a-hero--split .band-inner{display:grid;gap:clamp(26px,4vw,54px);align-items:center}
@media (min-width:940px){.a-hero--split .band-inner{grid-template-columns:minmax(0,1fr) minmax(0,.72fr)}}
.a-hero .slot{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3);color:#bdd0df}
.a-hero .slot-id{color:#fff}
.a-hero .slot-line{color:#e6eef5}
.a-hero .slot-more summary{color:#a8cde6;border-bottom-color:#a8cde6}
.a-hero .slot-more dt{color:#fff}
.a-hero h1{color:#fff;font-size:clamp(1.95rem,1.3rem + 2.5vw,3.15rem);max-width:19ch;margin:.28em 0 0}
.a-hero .kicker{color:var(--action-bright);margin:14px 0 .5em}
.a-hero .standfirst{font:var(--w-body) clamp(1.1rem,1rem + .6vw,1.36rem)/1.6 var(--serif);
color:#d6e3ee;max-width:52ch;margin:1em 0 0}
.a-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin:26px 0 0;padding:16px 0 0;
border-top:1px solid rgba(255,255,255,.18);font-size:.86rem;color:#b9cbdb}
.a-meta strong{color:#fff;font-weight:var(--w-strong)}
.a-meta .flag{background:var(--action);color:#fff;padding:3px 9px;border-radius:var(--r-pill);
font-weight:var(--w-strong);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase}
.breadcrumb{font-size:.84rem;color:#a9bdcf;margin:0 0 4px}
.breadcrumb a{color:#cfe0ee;text-decoration:none}
.breadcrumb a:hover{color:#fff;text-decoration:underline}
.breadcrumb span{opacity:.55;margin:0 .45em}
.breadcrumb .link-pending{opacity:.75}
/* A destination that exists but is not live yet. The reader rule is that it is
simply not a link — never labelled, never dressed as one. Setting it in the
heading weight lets the sentence read as naming a thing rather than trailing
off, which is what a repaired lead-in needs. */
.sec-body .link-pending{font-weight:var(--w-strong);color:var(--navy)}
/* quick answer — replaces the KEY FACTS box */
.qa{background:var(--warm);border-bottom:1px solid var(--line)}
.qa .band-inner{padding-block:clamp(30px,4vw,52px)}
.qa h2{font-size:clamp(1.2rem,1.05rem + .5vw,1.45rem);margin-bottom:.85em}
.qa-list{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:88ch}
.qa-list li{display:grid;gap:2px 26px;padding:14px 0;border-top:1px solid var(--line-strong)}
.qa-list li:last-child{border-bottom:1px solid var(--line-strong)}
@media (min-width:720px){.qa-list li{grid-template-columns:minmax(120px,.3fr) minmax(0,1fr);gap:0 26px}}
.qa-t{font:var(--w-head) 1rem/1.45 var(--sans);color:var(--navy);margin:0}
.qa-d{margin:0;color:var(--ink);font-size:1rem;line-height:1.6}
/* A quick-answer item with no term spans both columns. Expressed on the child
rather than the , because the cardinality gate counts bare and a
class attribute there would make five published facts look like two. */
.qa-list li>.qa-d:only-child{grid-column:1/-1;max-width:78ch;font-size:1.03rem}
.qa-foot{margin:1.4em 0 0;font-size:.9rem;color:var(--muted)}
/* on this page — horizontal, before the prose, never a sidebar */
.onpage{background:var(--paper);border-bottom:1px solid var(--line)}
.onpage .band-inner{padding-block:22px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px}
.onpage p{margin:0;font:var(--w-strong) .74rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.onpage ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;margin:0;padding:0;counter-reset:op}
.onpage li{counter-increment:op}
.onpage a{display:inline-block;text-decoration:none;font-size:.88rem;font-weight:var(--w-strong);
color:var(--navy);background:var(--cool);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 14px}
.onpage a::before{content:counter(op) ". ";color:var(--muted);font-weight:400}
.onpage a:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.onpage a:hover::before{color:#9db8cd}
/* section heads + prose */
.sec-head{margin:0 0 1.25em;max-width:34ch}
.sec-kicker{font:var(--w-strong) .74rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;
color:var(--action);margin:0 0 .55em}
.band--navy .sec-kicker{color:var(--action-bright)}
.sec-kicker--num{font:var(--w-display) clamp(2.2rem,1.6rem + 1.6vw,3.2rem)/1 var(--sans);
color:var(--line-strong);letter-spacing:-.04em;text-transform:none;margin:0 0 .05em}
.band--warm .sec-kicker--num{color:#e2dccf}
.band--cool .sec-kicker--num{color:#d7dee5}
.band--navy .sec-kicker--num{color:rgba(255,255,255,.22)}
/* ⚠ NOT A VALUE CHANGE. Repairing the invalid clamp() finally activated this
step — the heading goes from ~27px to 34.4px at 1440 — and at that size two
section heads that appear on every v2 page break with a single word on the
second line: "Questions people actually / ask" and "Where most people go /
next", on eight release pages at 768 and 1440. text-wrap:balance is the
one-property remedy: it changes no authored value, and a browser without
support renders exactly what it renders today. */
.sec-head h2{font-size:clamp(1.5rem,1.2rem + 1.15vw,2.15rem);text-wrap:balance}
.band--lead .sec-head h2{font-size:clamp(1.65rem,1.25rem + 1.6vw,2.5rem)}
.sec-body{max-width:var(--measure)}
.band--intro .sec-body{max-width:68ch;font-size:1.06em}
.band--intro .sec-body>p:first-child{font-size:1.1em;color:var(--navy)}
.band--moment .sec-body{max-width:58ch}
.band--moment .sec-body p{font-family:var(--serif);font-size:1.12em;line-height:1.62;color:#dfe9f1}
.band--wide .sec-body{max-width:none}
.sec-body>p{margin:0 0 1.15em}
.sec-body>ul,.sec-body>ol{margin:0 0 1.3em;padding-left:1.3em}
.sec-body li{margin-bottom:.6em}
.sec-body h3{font-size:1.16rem;margin:1.9em 0 .6em}
.sec-body>p em{color:var(--muted)}
/* lead-in groups: bold-lead paragraphs set as information blocks */
.leadgroup{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
border-radius:var(--r-card);overflow:hidden;margin:0 0 1.6em;max-width:min(880px,100%)}
.lead-item{background:var(--paper);padding:20px 24px;display:grid;gap:4px}
.band--warm .lead-item,.band--cool .lead-item{background:var(--paper)}
.lead-k{margin:0;font:var(--w-head) 1.02rem/1.4 var(--sans);color:var(--navy);letter-spacing:-.01em}
.lead-v{color:var(--ink)}
.lead-v p{margin:0;font-size:.99rem;line-height:1.62}
@media (min-width:820px){
.leadgroup--who .lead-item,.leadgroup--trio .lead-item{grid-template-columns:minmax(170px,.32fr) minmax(0,1fr);gap:0 26px;align-items:baseline}
}
.leadgroup--route{gap:14px;background:none;border:0;border-radius:0}
@media (min-width:760px){.leadgroup--route{grid-template-columns:1fr 1fr}}
.leadgroup--route .lead-item{border:1px solid var(--line);border-top:3px solid var(--blue);
border-radius:var(--r-card);box-shadow:var(--shadow-sm)}
.leadgroup--route .lead-k{font-size:1.06rem}
/* process rail */
.rail{margin:2em 0 1.8em;max-width:min(960px,100%)}
.rail-label{font:var(--w-strong) .76rem/1.3 var(--sans);letter-spacing:.13em;text-transform:uppercase;
color:var(--muted);margin:0 0 14px}
.rail-steps{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);
border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
@media (min-width:640px){.rail-steps{grid-template-columns:repeat(3,1fr)}}
.rail-steps li{background:var(--paper);display:flex;gap:12px;align-items:flex-start;padding:15px 17px}
.rail-n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;
font:var(--w-head) .82rem/26px var(--sans);text-align:center}
.rail-t{font-size:.95rem;font-weight:var(--w-strong);color:var(--navy);line-height:1.4}
/* check row */
.checkrow{list-style:none;display:grid;gap:10px;margin:0 0 1.6em;padding:0;max-width:min(860px,100%)}
@media (min-width:720px){.checkrow{grid-template-columns:1fr 1fr}}
.checkrow li{display:flex;gap:12px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);
border-radius:var(--r-btn);padding:14px 16px;font-weight:var(--w-strong);color:var(--navy);font-size:.97rem}
.checkrow li::before{content:"✓";color:var(--action);font-weight:var(--w-head);flex:none}
/* decision device — the governed route rows, set as a decision instead of a grid */
.decision{display:grid;gap:10px;margin:0 0 1.2em;max-width:min(1000px,100%)}
.dec{display:grid;gap:6px 24px;background:var(--paper);border:1px solid var(--line);
border-left:4px solid var(--blue);border-radius:var(--r-btn);padding:16px 20px;box-shadow:var(--shadow-sm)}
@media (min-width:860px){.dec{grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr) minmax(0,1fr);align-items:baseline}}
.dec-if{font:var(--w-head) 1rem/1.42 var(--sans);color:var(--navy)}
.dec-if small{display:block;font:var(--w-strong) .68rem/1 var(--sans);letter-spacing:.12em;
text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.dec-then,.dec-next{font-size:.95rem;line-height:1.55;color:var(--ink)}
.dec-then small,.dec-next small{display:block;font:var(--w-strong) .68rem/1 var(--sans);letter-spacing:.12em;
text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.dec-next{color:var(--muted)}
.dec-head{display:none}
@media (min-width:860px){
.dec-head{display:grid;background:none;border:0;box-shadow:none;padding-block:0 2px}
.dec-head>*{font:var(--w-strong) .68rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dec small{display:none}
}
.dec-note{font-size:.9rem;color:var(--muted);margin:.2em 0 0;max-width:70ch}
.dec-note em{font-style:italic}
/* tables, kept where a table is genuinely the right object */
.table-caption{font:var(--w-strong) .74rem/1.3 var(--sans);letter-spacing:.13em;text-transform:uppercase;
color:var(--muted);margin:1.6em 0 .7em}
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper)}
table{border-collapse:collapse;width:100%;font-size:.96rem}
th,td{padding:13px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
thead th{background:var(--navy);color:#fff;font-weight:var(--w-strong);font-size:.82rem;
letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
tbody th{font-weight:var(--w-strong);color:var(--navy)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
tbody tr:nth-child(even){background:var(--cool)}
.table-source{font-size:.82rem;color:var(--muted);margin:.7em 0 1.6em}
/* callouts */
.callout{border-left:4px solid var(--blue);background:var(--blue-soft);padding:18px 22px;
border-radius:0 var(--r-btn) var(--r-btn) 0;margin:1.6em 0;max-width:min(820px,100%)}
.callout p{margin:0;font-size:.97rem}
.callout .label{display:block;font:var(--w-strong) .72rem/1 var(--sans);letter-spacing:.12em;
text-transform:uppercase;color:var(--blue);margin-bottom:.7em}
.callout--legal{background:var(--cool);border-left-color:var(--line-strong)}
.callout--legal .label{color:var(--muted)}
.callout--warn{background:var(--action-soft);border-left-color:var(--action)}
.callout--warn .label{color:var(--action)}
/* commercial help — honest about state, never a fake button */
.help{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--action);
border-radius:var(--r-card);padding:26px 28px;box-shadow:var(--shadow);max-width:min(880px,100%)}
.help h3{font-size:1.22rem;margin:.15em 0 .5em}
.help p{margin:0 0 1em;color:var(--ink);font-size:1rem}
.cta-options{display:flex;flex-wrap:wrap;gap:10px}
.disclosure{font-size:.87rem;color:var(--muted);margin:1em 0 0;max-width:min(880px,100%)}
.disclosure strong{color:var(--navy)}
.cta--disabled,.cta--informational{background:var(--cool);border:1px dashed var(--line-strong);border-top-width:1px;
border-radius:var(--r-card);padding:24px 26px;max-width:min(880px,100%)}
.cta--disabled h3,.cta--informational h3{font-size:1.12rem;margin:.4em 0 .5em}
.cta--disabled p,.cta--informational p{margin:0 0 .7em;color:var(--muted);font-size:.97rem}
.dev-flag{display:inline-block;background:var(--navy);color:#fff;font:var(--w-strong) .68rem/1 var(--sans);
letter-spacing:.11em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-pill)}
.dev-error{background:var(--action-soft);color:var(--action);padding:12px 16px;border-radius:var(--r-btn);font-weight:var(--w-strong)}
.footer-meta{font-size:.86rem;color:var(--muted)}
/* FAQs */
.faq{max-width:min(860px,100%);border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line-strong)}
.faq summary{cursor:pointer;list-style:none;padding:18px 44px 18px 0;position:relative;
font:var(--w-head) 1.06rem/1.45 var(--sans);color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:15px;font-size:1.5rem;font-weight:400;color:var(--action);line-height:1}
.faq details[open] summary::after{content:"−"}
.faq .answer{padding:0 0 20px;max-width:68ch}
.faq .answer p{margin:0;color:var(--ink);font-size:1rem}
/* related */
.related-grid{display:grid;gap:14px}
@media (min-width:760px){.related-grid{grid-template-columns:repeat(3,1fr)}}
.rel{display:block;text-decoration:none;background:var(--paper);border:1px solid var(--line);
border-radius:var(--r-card);padding:20px 22px;box-shadow:var(--shadow-sm)}
.rel:hover{box-shadow:var(--shadow);border-color:var(--line-strong)}
.rel h3{font-size:1.03rem;margin:.5em 0 .35em;line-height:1.35}
.rel p{margin:0;font-size:.9rem;color:var(--muted);line-height:1.5}
/* byline */
.byline{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:.88rem;color:var(--muted);
padding:16px 0 0;border-top:1px solid var(--line);margin-top:1.5em}
.byline--unresolved{color:var(--muted)}
/* next step */
.nextstep{background:var(--warm);border-top:1px solid var(--line)}
.nextstep .band-inner{display:grid;gap:26px;align-items:center}
@media (min-width:860px){.nextstep .band-inner{grid-template-columns:minmax(0,1fr) auto}}
.nextstep h2{font-size:clamp(1.4rem,1.15rem + .9vw,1.9rem)}
.nextstep p{margin:.6em 0 0;color:var(--muted);max-width:54ch}
/* =========================================================================
IMAGE SLOTS
A slot with no photograph does not become a grey box. It becomes a readable
brief, so the exact frame the design needs can be found or shot.
====================================================================== */
.slot{position:relative;border:1px solid var(--line-strong);border-radius:var(--r-card);
background:
linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.7)),
repeating-linear-gradient(135deg,var(--cool) 0 12px,#e9eef3 12px 24px);
padding:22px 24px;color:var(--muted);font-size:.84rem;line-height:1.5;display:flex;
flex-direction:column;justify-content:center;gap:8px}
.slot-id{margin:0;font:var(--w-strong) .68rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.slot-id::before{content:"◻ Image slot · ";color:var(--action);letter-spacing:.1em}
.slot-line{margin:0;color:var(--navy);font-weight:var(--w-strong);font-size:.92rem}
.slot-more summary{cursor:pointer;font-weight:var(--w-strong);color:var(--blue);font-size:.82rem;
list-style:none;display:inline-block;border-bottom:1px dotted var(--blue)}
.slot-more summary::-webkit-details-marker{display:none}
.slot-more dl{display:grid;gap:3px 16px;margin:12px 0 0;font-size:.79rem}
@media (min-width:560px){.slot-more dl{grid-template-columns:auto 1fr}}
.slot-more dt{font-weight:var(--w-strong);color:var(--navy);white-space:nowrap}
.slot-more dd{margin:0}
.slot--hero{min-height:min(34vw,372px)}
.slot--band{min-height:clamp(150px,18vw,240px);border-left:0;border-right:0;border-radius:0;text-align:center;align-items:center}
/* =========================================================================
FOOTER
====================================================================== */
.site-footer{background:var(--navy);color:#c5d5e2;padding-block:clamp(40px,5vw,64px);margin-top:0}
.site-footer .inner{max-width:var(--inner);margin-inline:auto;padding-inline:var(--gutter);
display:grid;gap:26px}
@media (min-width:860px){.site-footer .inner{grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr));gap:44px}}
/* The footer wordmark is the light variant file, not a recoloured font — see
the wordmark note in the header block. Height only. */
.site-footer .brand .wordmark{height:28px}
.site-footer p{color:#a9bdcf;font-size:.92rem}
.footer-links{display:grid;gap:9px;align-content:start}
.footer-links a{color:#d3e0ea;text-decoration:none;font-size:.93rem}
.footer-links a:hover{color:#fff;text-decoration:underline}
.footer-head{font:var(--w-strong) .72rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:#7f97ad;margin:0 0 4px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.13);margin-top:30px;padding-top:20px;
max-width:var(--inner);margin-inline:auto;padding-inline:var(--gutter);font-size:.85rem;color:#8fa6ba}
/* =========================================================================
MOTION
====================================================================== */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
html{scroll-behavior:smooth;scroll-padding-top:88px}
/* ---------- image figures ---------------------------------------------- */
.slotfig{margin:0}
.slotfig img{border-radius:var(--r-card);box-shadow:var(--shadow)}
.slotfig figcaption{font-size:.78rem;color:var(--muted);margin-top:8px}
.band--photo{padding:0}
.band--photo .slot{border-radius:0;border-left:0;border-right:0}
.band--photo .slotfig img{border-radius:0;box-shadow:none;width:100%;object-fit:cover;max-height:min(46vw,420px)}
.photo-caption{background:var(--warm);border-bottom:1px solid var(--line)}
.photo-caption .band-inner{padding-block:14px;font-size:.85rem;color:var(--muted)}
/* ---------- journey chooser section ------------------------------------ */
.chooser-sec .band-inner{display:grid;gap:clamp(24px,3.6vw,54px)}
@media (min-width:900px){.chooser-sec .band-inner{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:start}}
.chooser-sec .sec-top{margin-bottom:0;position:sticky;top:96px}
.chooser-alt{font-size:.95rem;color:var(--muted);margin-top:1.4em;padding-top:1.2em;border-top:1px solid var(--line-strong)}
@media (max-width:899px){.chooser-sec .sec-top{position:static}}
/* ---------- pull-out: one existing paragraph, given weight ---------------- */
.pullout{border-left:4px solid var(--action);background:var(--action-soft);
padding:20px 24px;border-radius:0 var(--r-card) var(--r-card) 0;margin:1.8em 0;
max-width:min(780px,100%)}
.pullout p{margin:0;font:var(--w-body) 1.06rem/1.6 var(--serif);color:var(--navy)}
.pullout strong{font-weight:var(--w-strong)}
.band--warm .pullout{background:#fff}
.band--navy .pullout{background:rgba(255,255,255,.07);border-left-color:var(--action-bright)}
.band--navy .pullout p{color:#eaf1f7}
/* ---------- two-column comparison panel ---------------------------------- */
.versus{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
background:var(--paper);box-shadow:var(--shadow-sm);max-width:min(900px,100%);margin-bottom:.4em}
.vs-head,.vs-row{display:grid;grid-template-columns:1fr 1fr}
.vs-head{background:var(--navy);color:#fff}
.vs-head span{padding:13px 20px;font:var(--w-strong) .78rem/1 var(--sans);
letter-spacing:.1em;text-transform:uppercase}
.vs-head span+span{border-left:1px solid rgba(255,255,255,.18)}
.vs-row{border-top:1px solid var(--line)}
.vs-row span{padding:15px 20px;font-size:.97rem;line-height:1.5}
.vs-a{color:var(--navy);font-weight:var(--w-strong);background:var(--cool)}
.vs-b{border-left:1px solid var(--line)}
/* ---------- timeline ------------------------------------------------------ */
.timeline{list-style:none;margin:0 0 .4em;padding:0 0 0 26px;position:relative;max-width:min(860px,100%)}
.timeline::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:var(--line-strong)}
.timeline li{position:relative;display:grid;gap:2px 26px;padding:14px 0}
@media (min-width:700px){.timeline li{grid-template-columns:minmax(150px,.42fr) minmax(0,1fr);align-items:baseline}}
.tl-dot{position:absolute;left:-26px;top:19px;width:16px;height:16px;border-radius:50%;
background:var(--paper);border:3px solid var(--action)}
.tl-k{font:var(--w-head) 1.02rem/1.4 var(--sans);color:var(--navy)}
.tl-v{font-size:.99rem;color:var(--ink);line-height:1.55}
/* ---------- CTA design preview (staging only) ---------------------------- */
.cta,.cta--preview{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--action);
border-radius:var(--r-card);padding:26px 28px;box-shadow:var(--shadow);max-width:min(880px,100%);position:relative}
.cta h3,.cta--preview h3{font-size:1.22rem;margin:.15em 0 .5em}
.cta p,.cta--preview p{margin:0 0 1.1em;font-size:1rem}
.preview-chip{position:absolute;top:-11px;right:18px;background:var(--navy);color:#fff;
font:var(--w-strong) .64rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
padding:6px 11px;border-radius:var(--r-pill)}
.btn--preview{cursor:not-allowed;opacity:.92}
.preview-note{margin:1em 0 0!important;font-size:.84rem;color:var(--muted)}
/* ---------- hero photography --------------------------------------------- */
.home-hero .slotfig img{border-radius:var(--r-card);box-shadow:var(--shadow-lg);
aspect-ratio:5/6;object-fit:cover;object-position:60% 55%;width:100%}
.home-hero .slotfig figcaption{margin-top:10px;font-size:.74rem;color:var(--muted)}
.a-hero-side .slotfig img{border-radius:var(--r-card);box-shadow:0 18px 44px rgba(0,0,0,.34);
aspect-ratio:4/5;object-fit:cover;object-position:50% 62%;width:100%}
.a-hero-side .slotfig figcaption{margin-top:9px;font-size:.72rem;color:#9db3c6}
@media (max-width:939px){
.a-hero-side .slotfig img{aspect-ratio:16/10}
.home-hero .slotfig img{aspect-ratio:4/3}
}
/* The global rule sets `strong` to navy. Inside the article hero that is navy
text on a navy ground — the emphasised half of the healthcare standfirst was
rendering all but invisible. */
.a-hero strong,.a-hero .standfirst strong{color:#fff}
.a-hero-side .slotfig img{max-height:520px}
/* A preview button must SHOW the production design — the point of the state is
that the commercial system can be judged. It is inert, not disabled-looking:
the generic `.btn[aria-disabled]` grey would hide exactly what we are here to
see. The PREVIEW chip and the note carry the "this does nothing yet". */
.btn.btn--preview{background:var(--action);border-color:var(--action);color:#fff;cursor:not-allowed}
.btn.btn--preview:hover{transform:none;box-shadow:none}
/* A full-bleed photo band has no inner wrap, so its credit needs one of its own
rather than sitting flush against the viewport edge. */
.band--photo .slotfig figcaption{max-width:var(--inner);margin:8px auto 0;
padding-inline:var(--gutter);font-size:.74rem;color:var(--muted)}
.band--photo+.band,.band--photo{border-block:1px solid var(--line)}
/* ---------- comparison panel, mobile -------------------------------------
VARIANT B. At 375px the desktop pairing gives each side 166px, which fits
but reads badly. The governed rows are two columns of CONTRASTING
STATEMENTS with no criterion column, so the usual "criterion / value /
value" mobile shape cannot be built without inventing criterion labels —
new copy on a governed surface. Instead each PAIR stays one bordered unit
and its two statements stack full width inside it, labelled from the
table's own column names via data-col. Pairing is preserved by the card
boundary; nothing is authored. Desktop is untouched. */
@media (max-width:640px){
.versus{border:0;box-shadow:none;background:none;border-radius:0;display:grid;gap:10px}
.vs-head{display:none}
.vs-row{display:block;border:1px solid var(--line);border-radius:var(--r-card);
background:var(--paper);box-shadow:var(--shadow-sm);overflow:hidden}
.vs-row span{display:block;padding:13px 16px 14px;font-size:.99rem;line-height:1.5}
.vs-row span::before{content:attr(data-col);display:block;
font:var(--w-strong) .66rem/1 var(--sans);letter-spacing:.13em;
text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.vs-a{background:var(--cool)}
.vs-b{border-left:0;border-top:1px solid var(--line)}
}
/* =========================================================================
ROUTER (hub) — VIS-00
The question is the event. No card grid: five different questions must not
be made to look like one repeated component.
====================================================================== */
.a-hero--router .band-inner{padding-block:clamp(30px,3.4vw,46px)}
/* A router is judged on how fast the routes appear. The hero states what the
section is and gets out of the way — a tall hero on a routing page pushes the
only thing the reader came for below the fold. */
.a-hero--router h1{font-size:clamp(1.8rem,1.3rem + 1.8vw,2.6rem)}
.a-hero--router .standfirst{max-width:76ch;font-size:clamp(1.02rem,.96rem + .35vw,1.16rem)}
.qlist{list-style:none;counter-reset:q;margin:0;padding:0;border-top:1px solid var(--line-strong);
max-width:min(940px,100%)}
.qlist li{counter-increment:q;border-bottom:1px solid var(--line-strong)}
.qlist a,.qlist .qlist-dead{display:grid;gap:4px;padding:22px 52px 22px 52px;text-decoration:none;
position:relative;color:inherit}
.qlist a:hover{background:var(--warm)}
.qlist a::before,.qlist .qlist-dead::before{content:counter(q);position:absolute;left:0;top:23px;
font:var(--w-head) .82rem/1.5 var(--sans);color:var(--muted)}
.qlist a::after{content:"→";position:absolute;right:14px;top:21px;color:var(--action);
font-weight:var(--w-head);transition:transform .14s ease}
.qlist a:hover::after{transform:translateX(4px)}
.qlist .q{font:var(--w-head) clamp(1.12rem,1rem + .7vw,1.5rem)/1.3 var(--sans);color:var(--navy);
letter-spacing:-.018em}
.qlist a:hover .q{color:var(--action)}
.qlist .a{font-size:1rem;color:var(--muted);line-height:1.55;max-width:62ch}
.qlist .qlist-dead .q{color:var(--muted)}
@media (max-width:560px){.qlist a,.qlist .qlist-dead{padding:18px 30px 18px 30px}}
.routecards{display:grid;gap:14px;max-width:min(940px,100%)}
@media (min-width:700px){.routecards{grid-template-columns:1fr 1fr}}
.routecard{display:grid;gap:5px;background:var(--paper);border:1px solid var(--line);
border-left:4px solid var(--blue);border-radius:var(--r-btn);padding:18px 22px;text-decoration:none;
box-shadow:var(--shadow-sm)}
.routecard:hover{border-left-color:var(--action);box-shadow:var(--shadow)}
.routecard--dead{border-left-color:var(--line-strong);background:var(--cool);box-shadow:none}
.rc-t{font:var(--w-strong) 1.03rem/1.35 var(--sans);color:var(--navy)}
.rc-d{font-size:.9rem;color:var(--muted);line-height:1.5}
/* =========================================================================
MASTHEAD HERO — the SECOND no-photography archetype.
Why a second one exists. Four of the ten v2 pages (MOV-01, MOV-02, VIS-12,
VIS-18) render the identical navy slab, and they do so for a non-reason:
none of them has a photograph. "No image" had become a default treatment,
so a 60-item checklist, a 13-step procedure, a two-route comparison and an
administrative explainer were all introduced by the same block of colour.
What this one does instead. The dark hero's job is atmosphere — it holds a
photograph, or stands in for one. A page with no photograph has no
atmosphere to hold, so this archetype gives the hero a different job: state
the page and get out of the way. It is set on a light ground and structured
by rules rather than by a colour field, so the masthead reads as the first
record of the document rather than as a lid on it.
Where the language comes from. Nothing here is invented. It is the .qlist
grammar already proven on VIS-00 — a hairline, a quiet label, the statement
as the event, a subordinate line under it — applied one level up. That is
deliberate: on the router the masthead and the five questions then read as
one continuous index instead of a banner followed by a list.
What supplies the variation. Only information the page already publishes:
the section identity in the eyebrow, the page's own opening sentence at a
fixed measure (so its length sets the block's height), and whatever
governed record the page actually has — which is why the router, carrying
no author, reviewer or reading time, ends at the rule while an article
carries a footing line beneath it. No gradient, no illustration, no counts,
no invented statistics, no dashboard furniture.
Opting in. Articles declare it: hero.treatment "masthead" in v2.json.
VIS-00 is wired here in CSS rather than declared, because _hub-v2.njk emits
a fixed .a-hero--router class and that layout is outside this change's
write lane. If hubs are ever to choose between the two heroes, the hub
layout needs the same one-line conditional the article layout now has.
====================================================================== */
.a-hero--masthead,
.a-hero--router{
background:var(--cool);
color:var(--ink);
border-bottom:1px solid var(--line-strong);
}
.a-hero--masthead .band-inner,
.a-hero--router .band-inner{padding-block:clamp(28px,3.4vw,48px)}
/* The statement sits on the same measure as the route list below it. */
.a-hero--masthead .a-hero-main,
.a-hero--router .a-hero-main{max-width:min(940px,100%)}
/* Breadcrumb is where-you-are, not part of the statement; the rule separates
the two. 2px navy, the same delimiter weight .qlist uses to open its list. */
.a-hero--masthead .breadcrumb,
.a-hero--router .breadcrumb{
color:var(--muted);
border-bottom:2px solid var(--navy);
padding-bottom:11px;
margin:0 0 clamp(15px,1.8vw,22px);
}
.a-hero--masthead .breadcrumb a,
.a-hero--router .breadcrumb a{color:var(--muted);text-decoration:none}
.a-hero--masthead .breadcrumb a:hover,
.a-hero--router .breadcrumb a:hover{color:var(--navy);text-decoration:underline}
.a-hero--masthead .breadcrumb span,
.a-hero--router .breadcrumb span{opacity:.45}
.a-hero--masthead .breadcrumb .link-pending,
.a-hero--router .breadcrumb .link-pending{opacity:1;color:var(--muted)}
.a-hero--masthead .kicker,
.a-hero--router .kicker{color:var(--action);margin:0 0 .6em}
/* Smaller than the navy hero's H1. On a colour field the title has to carry
the whole block; on a light ground it only has to be the largest thing. */
.a-hero--masthead h1,
.a-hero--router h1{
color:var(--navy);
font-size:clamp(1.8rem,1.28rem + 1.75vw,2.55rem);
max-width:20ch;
margin:0;
}
/* Fixed measure, so the page's own opening sentence sets the block height —
a four-sentence orientation lede and a one-line definition do not produce
the same masthead, and nothing had to be added to make that true. */
.a-hero--masthead .standfirst,
.a-hero--router .standfirst{
color:var(--ink);
font:var(--w-body) clamp(1.04rem,.98rem + .4vw,1.19rem)/1.62 var(--serif);
max-width:60ch;
margin:.9em 0 0;
}
.a-hero--masthead .standfirst em,
.a-hero--router .standfirst em{color:var(--muted)}
.a-hero--masthead strong,
.a-hero--masthead .standfirst strong,
.a-hero--router strong,
.a-hero--router .standfirst strong{color:var(--navy)}
/* The footing renders only what the page actually holds. A hub carries no
author, reviewer or reading time, so on VIS-00 nothing renders here at all
and the masthead simply ends — which is the honest difference between a
routing surface and a written document, not a styling accident. */
.a-hero--masthead .a-meta{
border-top:1px solid var(--line-strong);
color:var(--muted);
margin-top:clamp(20px,2.4vw,30px);
max-width:min(940px,100%);
}
.a-hero--masthead .a-meta strong{color:var(--navy)}
/* The router keeps its own ruling: the routes are what the reader came for,
so its standfirst runs wider and its title stays smaller. */
.a-hero--router h1{font-size:clamp(1.7rem,1.28rem + 1.35vw,2.3rem)}
.a-hero--router .standfirst{max-width:76ch;font-size:clamp(1.02rem,.96rem + .35vw,1.14rem)}
/* The masthead is the head of the document, not a lid on it, so the band that
follows opens closer than it would after a colour field. Without this the
router showed ~135px of empty ground between the statement and the first
route — a gap the navy slab used to justify and a light ground does not. */
.a-hero--masthead + .band,
.a-hero--router + .band{padding-top:clamp(30px,3.4vw,46px)}
.a-hero--router .band-inner{padding-block:clamp(28px,3.4vw,48px) clamp(18px,2.2vw,30px)}
/* Mobile: the rules are the structure, so they must not run edge to edge on a
narrow screen while the type sits inside the gutter. Nothing else changes —
the archetype is a single column at every width already. */
@media (max-width:560px){
.a-hero--masthead h1,
.a-hero--router h1{max-width:none}
.a-hero--masthead .breadcrumb,
.a-hero--router .breadcrumb{padding-bottom:9px;margin-bottom:14px}
}
/* =========================================================================
WORKLIST — the checklist primitive. Prototyped on MOV-01 only.
The problem this solves is not decoration. MOV-01 publishes sixty governed
actions and, before this, rendered them as sixty bullets each preceded by a
literal ☐ character — two markers competing on the same line, neither of
them a target, and no visual difference between the action and the sentence
explaining it. A reader working the list had nothing to aim at and nothing
to scan by.
Three decisions carry the design.
ONE COLUMN, NOT SIXTY CARDS. A card per item would turn one list into sixty
separate things and triple its length on a phone. This is a single ruled
column with a hairline between rows: the densest form that still separates.
THE GUTTER IS THE SCAN AXIS. Every box lands on one vertical line and every
wrapped line hangs clear of it, so the eye runs the boxes, not the prose.
That is the entire reason the ☐ leaves the text flow.
TWO TONES, ONE SENTENCE. Several of these items are a single sentence whose
bold half does not stand alone — "Check your passport's remaining validity
and renew it if it's close". Setting the action on its own line would break
the author's grammar. Weight and colour separate them instead: navy for the
action, muted for the explanation, one continuous line of prose.
NOTHING CLAIMS STATE. No counters, no totals, no progress, no interactive
checkbox. The site ships no client JavaScript, and this page's whole job is
to send the reader out to the page that explains an item, so a tickable box
would be emptied by the first link followed. The persistence a sixty-item
list genuinely needs is paper — which is why the print rules below are part
of the primitive rather than an afterthought.
====================================================================== */
:root{
--wl-gutter:32px; /* box + optical space; the scan axis sits at 0 */
--wl-box:20px; /* large enough for a pen nib at print size */
--wl-rule:rgba(18,48,79,.45); /* navy at ~3:1 on paper — seen, not shouted */
}
@media (max-width:560px){
:root{--wl-gutter:28px;--wl-box:19px}
}
.sec-body ul.worklist{
list-style:none;margin:.2em 0 1.5em;padding:0;
border-top:1px solid var(--line-strong);
font-size:.99em;
}
.sec-body li.wl-item{
display:grid;grid-template-columns:var(--wl-gutter) minmax(0,1fr);
align-items:start;
margin:0;padding:13px 0;
border-bottom:1px solid var(--line);
line-height:1.55;
break-inside:avoid;
}
.wl-box{
width:var(--wl-box);height:var(--wl-box);
margin-top:.2em;
border:2px solid var(--wl-rule);border-radius:4px;
background:var(--paper);
}
.wl-body{display:block}
/* The condition is the one thing that earns its own line, because it is the
one thing that lets a reader skip an item without reading it. The page's own
copy already promises this — "Route-specific items are marked" — and the
parenthetical is the author's, moved rather than written. */
display:block;margin-bottom:.15em;
font:var(--w-strong) .68rem/1.4 var(--sans);
letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.wl-act strong{color:var(--navy)}
.wl-ctx{color:var(--muted)}
.wl-ctx .link-pending{color:var(--navy)}
/* The single item the author marked ⚠ keeps its glyph and takes the action
colour on its box. In a column of sixty identical greys that is the only
difference the eye needs, and it is the author's emphasis being rendered,
not a status being invented. */
.wl-item--flag .wl-box{border-color:var(--action)}
/* On the dark band the same primitive inverts. It is the same list; it is not
a different component. */
.band--navy .worklist{border-top-color:rgba(255,255,255,.30)}
.band--navy .wl-item{border-bottom-color:rgba(255,255,255,.15)}
.band--navy .wl-box{border-color:rgba(255,255,255,.52);background:transparent}
.band--navy .wl-act strong{color:#fff}
.band--navy .wl-ctx{color:#c3d3e0}
/* -------------------------------------------------------------------------
PRINT. The completion mechanism, not a courtesy: a list worked over weeks
across devices needs an artefact that remembers, and the only one available
here is paper. Scoped with :has() so it never reaches the other v2 pages.
---------------------------------------------------------------------- */
@media print{
body:has(.worklist) .site-header,
body:has(.worklist) .onpage{display:none}
body:has(.worklist) .band{padding-block:14pt}
/* A phase heading must never be the last thing on a sheet. */
body:has(.worklist) .sec-head{break-after:avoid}
/* The dark band must print as ink on paper. Its colours are set at four
levels — the band, the moment's serif prose, headings, links — and the
moment rule outranks anything reasonable, so this flattens the whole
subtree instead of chasing each one. The first draft of these rules
recoloured only the headings, and eight of the sixty items printed in
near-white on white. */
body:has(.worklist) .band--navy{background:#fff}
body:has(.worklist) .band--navy,
body:has(.worklist) .band--navy *{color:#000!important;background-color:transparent}
body:has(.worklist) .band--navy .worklist{border-top-color:#000}
body:has(.worklist) .band--navy .wl-item{border-bottom-color:#999}
body:has(.worklist) .band--navy .wl-box{border-color:#000}
.sec-body ul.worklist{max-width:none;border-top:1pt solid #000}
.sec-body li.wl-item{padding:7pt 0;border-bottom:.5pt solid #999}
.wl-box{
width:13pt;height:13pt;border:1pt solid #000;border-radius:2pt;background:#fff;
-webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.wl-item--flag .wl-box{border-width:1.75pt;border-color:#000}
}
/* ============================================================================
V3 BRAND PASS — 2026-10-02.
SCOPE IS DELIBERATELY NARROW. The approved instruction was the global header
and wordmark, the homepage, and the Visas & Residency hub — explicitly NOT a
redesign of the 58 editorial pages. So the display face is applied by
SELECTOR, not to h1/h2 globally: .home-hero and .a-hero--masthead are the
homepage hero and VIS-00's hero, and the section heads below them belong to
those two pages. MOV-00, HEA-01, PRO-01, RET-01, MOV-01, MOV-02, VIS-12 and
VIS-18 render through this same stylesheet and are left exactly as they are.
Widening this is a decision, not a tidy-up.
========================================================================= */
.home-hero h1,
.home-hero .kicker,
.home-hero .subject-row a,
.home-hero .subject-row .soon,
.a-hero--masthead h1,
.a-hero--masthead .kicker,
.chooser-sec .sec-top h2,
.subjects .subject-row a,
.subjects .subject-row .soon,
.qlist .q,
.qlist .q-route,
.hub-band h2,
.hub-band-title{font-family:var(--display);font-synthesis-weight:none}
/* ---------- homepage hero: one object, not two ---------------------------
The warm gradient and the floating image card are gone. Navy carries the
brand; the photograph is the right half of the same band and bleeds off the
edge, which is what stops it reading as an illustration dropped beside the
text. On a phone the grid is one column and the image sits under the actions
at a fixed ratio — a portrait photograph at full width would otherwise push
the whole proposition below the fold. */
.home-hero{
position:relative;overflow:hidden;border-bottom:0;
background:
radial-gradient(90% 120% at 86% 4%, rgba(224,105,60,.22) 0%, rgba(224,105,60,0) 60%),
linear-gradient(158deg,var(--navy) 0%,var(--navy-deep) 100%);
color:#dbe6ef;
}
.home-hero .band-inner{
position:relative;display:grid;gap:clamp(28px,4vw,56px);
padding-block:clamp(38px,4.6vw,66px);align-items:center;
}
@media (min-width:940px){
.home-hero .band-inner{grid-template-columns:minmax(0,1.14fr) minmax(0,.78fr);
padding-block:clamp(52px,5.4vw,84px)}
/* The right column runs to the viewport edge. .band-inner is centred with a
max-width of --inner and a --gutter of padding, so the distance from its
content edge to the viewport edge is the gutter PLUS whatever centring
margin exists — which is zero on a narrow screen, hence the max(). 100vw
includes the scrollbar and so overshoots by ~15px; .home-hero clips it
with overflow:hidden rather than the page gaining a horizontal scroll. */
.home-hero .hero-img{
margin-right:calc(-1 * (var(--gutter) + max(0px, (100vw - var(--inner)) / 2)));
}
}
.home-hero .hero-text{position:relative;z-index:1}
/* CONTRAST, measured not assumed. --action-bright is 4.01:1 on navy, which is
AA for LARGE text and nothing else. The h1's third line keeps it — 34px at
weight 900 is large by any definition. The kicker is 12px bold, which is
normal text and needs 4.5:1, so it gets the lighter tint: 4.69:1, still
unmistakably the same orange. */
.home-hero .kicker{color:#e87a4e;margin:0 0 .7em}
/* ⚠ SPACES AROUND THE + ARE LOAD-BEARING. "1.3rem+3.6vw" is not valid CSS math
— the operator needs whitespace on both sides — and an invalid clamp() drops
the WHOLE declaration silently. This file has 19 more of them, all
pre-existing: every fluid type step in the v2 prototype has been falling back
rather than scaling. Held deliberately; fixing them resizes headings on ten
pages and that is a design decision. */
.home-hero h1{
color:#fff;font-weight:900;letter-spacing:-.035em;max-width:none;
font-size:clamp(2.3rem, 1.3rem + 3.6vw, 4.15rem);line-height:.98;
}
.home-hero h1 em{font-style:normal;display:block}
.home-hero h1 em:first-of-type{color:#fff}
.home-hero h1 em:last-of-type{color:var(--action-bright)}
.home-hero .standfirst{color:#b9cbdb;max-width:40ch;margin:1.05em 0 0;
font:var(--w-body) clamp(1.08rem, 1rem + .5vw, 1.3rem)/1.6 var(--serif)}
.home-hero .hero-assure{color:#94acc2}
.home-hero .hero-assure li::before{background:var(--action-bright)}
/* The photograph, integrated. No card, no radius on the bleeding edge, no
drop shadow — a shadow is what makes an image look stuck on. */
.home-hero .hero-img .slotfig{margin:0}
.home-hero .hero-img .slotfig img{
display:block;width:100%;height:auto;max-height:min(68vh,620px);object-fit:cover;
border-radius:var(--r-card);box-shadow:none;
}
@media (min-width:940px){
.home-hero .hero-img .slotfig img{border-radius:var(--r-card) 0 0 var(--r-card);
max-height:min(74vh,660px)}
}
@media (max-width:939px){
.home-hero .hero-img .slotfig img{aspect-ratio:16/10;max-height:none}
}
/* 11.5px credit line: normal text, so 4.5:1. #7d97ae was 4.43. */
.home-hero .hero-img .slotfig figcaption{color:#88a1b7;margin-top:8px;font-size:.72rem}
/* Staging-only: the slot brief renders where the photograph would be. It must
stay legible on navy or the one surface that proves the design is the one
surface nobody can read. */
.home-hero .hero-img .slot{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.26);color:#bdd0df}
.home-hero .hero-img .slot-id,.home-hero .hero-img .slot-more dt{color:#fff}
.home-hero .hero-img .slot-line{color:#e6eef5}
/* The hero's second button sits on navy now. btn--onnavy already exists for
the trust band; this only fixes the gap it leaves at hero scale. */
.home-hero .btn--onnavy{border-color:rgba(255,255,255,.5)}
.home-hero .btn--onnavy:hover{border-color:#fff;background:rgba(255,255,255,.1)}
/* ---------- VIS-00: the self-identification deck ------------------------
The route NAME is the payoff of picking a sentence, so it is a separate
element in the row rather than the first words of the explanation. The
masthead hero above it is unchanged: the 2026-09-20 ruling that chose it for
this page — a navy slab above a rule-separated index reads as two unrelated
objects — is still true of the deck below, which is still a rule-separated
index. */
.qlist .q-route{display:block;font-weight:800;font-size:.95rem;letter-spacing:.005em;
color:var(--action);margin-top:5px}
.qlist a:hover .q-route{color:var(--action)}
.qlist .qlist-dead .q-route{color:var(--muted)}
.qlist .q{letter-spacing:-.022em}
/* ---------- hub bands: the cluster, grouped ------------------------------
A hub that lists five children does not feel like a section. These are the
pages that already exist, grouped the way a reader would ask for them. Each
band is a heading, one line of orientation and a list of links — not cards,
because fifteen cards is a wall and these are not fifteen equal choices. */
.hub-bands{display:grid;gap:clamp(26px,3vw,40px);max-width:min(1040px,100%)}
@media (min-width:860px){.hub-bands{grid-template-columns:1fr 1fr}}
.hub-band{border-top:2px solid var(--navy);padding-top:16px}
.hub-band-title{font:800 1.14rem/1.3 var(--sans);color:var(--navy);letter-spacing:-.018em;margin:0}
.hub-band-body{margin:.45em 0 .9em;font-size:.95rem;color:var(--muted);line-height:1.55;max-width:46ch}
.hub-band ul{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line)}
.hub-band li{background:var(--paper)}
.hub-band li a{display:flex;align-items:baseline;gap:.6em;padding:11px 2px;text-decoration:none;
color:var(--navy);font-weight:var(--w-strong);font-size:.975rem;line-height:1.4}
.hub-band li a::after{content:"→";margin-left:auto;color:var(--action);flex:none;
transition:transform .14s ease}
.hub-band li a:hover{color:var(--action)}
.hub-band li a:hover::after{transform:translateX(4px)}
.band--warm .hub-band ul{background:var(--line-strong)}
.band--warm .hub-band li{background:var(--warm)}
/* =========================================================================
STATEMENT HERO (navy) — VIS-00 only, owner ruling 2026-10-02.
This supersedes the masthead for this page and no other. The masthead
reasoning still holds everywhere it is declared: a page with no photograph
has no atmosphere to hold, so the hero states the page and gets out of the
way. What changed is the brief, not the argument. Visas & Residency is to
read as one of the strongest destinations on the site, and after the V3 pass
strengthened everything around it the restrained hub became the quiet
exception.
The September objection — a navy slab above a rule-separated index reads as
two unrelated objects — is answered structurally rather than ignored. The
band that follows loses its top padding, so the route grid is pulled up
against the hero and the two read as one object. The hero gets the statement
and the supporting line; it does NOT get buttons, cards, counts or a second
homepage. The self-identification grid stays the page's functional object.
====================================================================== */
.a-hero--statement-navy{
background:
radial-gradient(85% 120% at 88% 0%, rgba(224,105,60,.20) 0%, rgba(224,105,60,0) 62%),
linear-gradient(158deg,var(--navy) 0%,var(--navy-deep) 100%);
color:#dbe6ef;
border-bottom:0;
}
.a-hero--statement-navy .band-inner{padding-block:clamp(26px,3.4vw,52px)}
.a-hero--statement-navy .a-hero-main{max-width:min(940px,100%)}
.a-hero--statement-navy .breadcrumb{margin:0 0 clamp(14px,1.6vw,20px)}
/* --action-bright is 4.01:1 on navy — AA for large text only, and this label is
12px bold. Same lighter tint the homepage kicker uses: 4.69:1. */
.a-hero--statement-navy .kicker{color:#e87a4e;margin:0 0 .45em}
.a-hero--statement-navy h1{
color:#fff;font-family:var(--display);font-synthesis-weight:none;font-weight:900;
font-size:clamp(2.05rem, 1.3rem + 2.7vw, 3.5rem);line-height:1.02;letter-spacing:-.032em;
max-width:17ch;margin:0;
}
.a-hero--statement-navy .standfirst{color:#b9cbdb;max-width:52ch;margin:1em 0 0}
.a-hero--statement-navy .a-meta{color:#8ea7bd;border-color:rgba(255,255,255,.16)}
.a-hero--statement-navy .a-meta strong{color:#cfe0ee}
/* ONE OBJECT, NOT TWO. The grid immediately below the statement loses its own
top padding; the hero's bottom padding is the whole gap. Adjacent-sibling so
it can only ever affect the band that actually follows this hero. */
.a-hero--statement-navy + .band{padding-top:0}
.a-hero--statement-navy + .band .band-inner{padding-top:clamp(20px, 2.4vw, 32px)}
.a-hero--statement-navy + .band .sec-head{margin-bottom:.9em}
/* ============================================================================
V3.1 HOMEPAGE — scale, rhythm and commercial hierarchy.
The brief was explicit that the problem was not word count: the page was
attractive and told a reader nothing about which of three businesses it is.
So the changes are structural. A five-row chooser that gave a buying
decision, an admin question and a whole cluster equal weight is replaced by
three pathways and everything else smaller. The hero carries the brand at a
scale the group's other sites already use. Bands alternate navy / warm /
navy / paper / warm / navy / paper so no two pale sections sit together.
Nothing here adds a URL, a claim or a promise. Every destination is a page
already in the 58.
========================================================================= */
/* ---------- hero: deeper, and line one dominates ----------------------- */
@media (min-width:940px){
.home-hero .band-inner{grid-template-columns:minmax(0,1.25fr) minmax(0,.72fr);
min-height:min(84vh, 820px);padding-block:clamp(56px, 5vw, 92px)}
}
.home-hero h1{display:block;line-height:.96}
.home-hero h1 .l1,.home-hero h1 .l2,.home-hero h1 .l3{display:block}
/* MOVE TO SPAIN. is the statement; the other two lines are its beat. */
.home-hero h1 .l1{font-size:clamp(2.6rem, 1.1rem + 5.1vw, 5.25rem);color:#fff}
.home-hero h1 .l2,
.home-hero h1 .l3{font-size:clamp(1.85rem, .85rem + 3.3vw, 3.4rem);letter-spacing:-.028em}
.home-hero h1 .l2{color:#fff;margin-top:.1em}
/* The orange closes, and carries the only colour in the headline.
4.01:1 on navy — AA for large text, which at 30-54px this is. */
.home-hero h1 .l3{color:var(--action-bright)}
.home-hero .standfirst{max-width:44ch;margin-top:1.15em}
/* VALUE STRIP. One restrained line, not three bullets with dots. */
.hero-strip{display:flex;flex-wrap:wrap;gap:.5em clamp(12px,1.6vw,22px);
margin:1.9rem 0 0;padding:0;list-style:none;font-size:.9rem;color:#a7bdd0}
.hero-strip li{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px)}
.hero-strip li:not(:first-child)::before{content:"";width:4px;height:4px;border-radius:50%;
background:var(--action-bright);flex:none}
@media (max-width:620px){
.hero-strip{display:grid;gap:.45em}
.hero-strip li::before{content:"";width:4px;height:4px;border-radius:50%;
background:var(--action-bright);flex:none}
}
/* A hero button is not a body button. */
.btn--big{font-size:1.02rem;padding:17px 30px}
@media (max-width:620px){.btn--big{width:100%;justify-content:center;text-align:center}}
/* ---------- the three pathways ------------------------------------------
Large blocks, not cards in a row of six. The number is the hierarchy signal
and the title is set in the display face, because these three are the page. */
/* Same remedy as .sec-head h2, same reason: at the now-correct size these
heads break with one word on the second line ("Already know you need a /
visa?"). One property, no authored value changed. */
.sec-top h2{text-wrap:balance}
.pathways-sec .sec-top{max-width:30ch}
.pathways{display:grid;gap:clamp(14px,1.6vw,20px);margin-top:clamp(22px,2.6vw,34px)}
@media (min-width:860px){.pathways{grid-template-columns:repeat(3,1fr)}}
.pathway{position:relative;display:grid;align-content:start;gap:.5rem;
background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
border-top:5px solid var(--navy);
padding:clamp(22px,2.4vw,32px) clamp(20px,2.2vw,30px) clamp(46px,3.4vw,54px);
text-decoration:none;box-shadow:var(--shadow-sm);
transition:border-top-color .15s ease, box-shadow .15s ease, transform .15s ease}
@media (min-width:860px){.pathway{min-height:260px}}
.pathway:hover{border-top-color:var(--action);box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.pw-n{font:800 .76rem/1 var(--sans);letter-spacing:.16em;color:var(--action)}
.pw-t{font-family:var(--display);font-synthesis-weight:none;font-weight:800;
font-size:clamp(1.3rem, 1.05rem + .7vw, 1.72rem);line-height:1.12;
letter-spacing:-.022em;color:var(--navy);text-wrap:balance}
.pw-d{font-size:.96rem;line-height:1.55;color:var(--muted)}
.pw-go{position:absolute;left:clamp(20px,2.2vw,30px);bottom:clamp(18px,2vw,24px);
color:var(--action);font-weight:var(--w-head);font-size:1.2rem;transition:transform .15s ease}
.pathway:hover .pw-go{transform:translateX(5px)}
.subject-row--sub{margin-top:clamp(26px,3vw,38px);padding-top:clamp(18px,2vw,24px);
border-top:1px solid var(--line-strong)}
/* A TRAILING separator dangles at the end of a wrapped line with nothing after
it. A leading one cannot. Same fix as the hero value strip. */
.subject-row--sub li:not(:last-child)::after{content:none}
.subject-row--sub li:not(:first-child)::before{content:"·";color:var(--line-strong);font-weight:700}
.subject-row--sub a,.subject-row--sub .soon{font-size:clamp(.98rem, .9rem + .35vw, 1.12rem)}
/* ---------- brand statement --------------------------------------------- */
.statement-sec .band-inner{padding-block:clamp(44px,5vw,78px)}
.statement{font-family:var(--display);font-synthesis-weight:none;font-weight:800;
font-size:clamp(1.65rem, 1.1rem + 2.1vw, 3rem);line-height:1.08;letter-spacing:-.03em;
color:#fff;margin:0;max-width:22ch;text-wrap:balance}
.statement em{display:block;font-style:normal;color:var(--action-bright)}
.steps{display:grid;gap:clamp(16px,2vw,26px);margin:clamp(30px,3.4vw,46px) 0 0;padding:0;list-style:none}
@media (min-width:780px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{display:grid;gap:.45rem;padding-top:16px;border-top:2px solid rgba(255,255,255,.22)}
.st-n{font:800 .78rem/1 var(--sans);letter-spacing:.16em;color:var(--action-bright)}
.st-t{font-weight:var(--w-strong);font-size:1.06rem;line-height:1.35;color:#eaf1f7;text-wrap:balance}
/* ---------- visa route chips -------------------------------------------- */
.routes-sec .sec-top{max-width:38ch}
.routechips{display:grid;gap:12px;margin-top:clamp(20px,2.4vw,30px)}
@media (min-width:620px){.routechips{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.routechips{grid-template-columns:repeat(3,1fr)}}
.chip{display:grid;gap:3px;padding:16px 20px;text-decoration:none;
background:var(--cool);border:1px solid var(--line);border-left:4px solid var(--blue);
border-radius:var(--r-btn);transition:border-left-color .14s ease, background .14s ease}
.chip:hover{border-left-color:var(--action);background:var(--action-soft)}
.ch-t{font-weight:var(--w-head);color:var(--navy);font-size:1.04rem}
.ch-d{font-size:.88rem;color:var(--muted);line-height:1.45}
.routes-more{margin:clamp(18px,2vw,26px) 0 0;font-weight:var(--w-strong)}
.routes-more a{color:var(--action)}
/* ============================================================================
V4 COMPONENT GRAMMAR — 2026-10-02.
Reference: the7.io/fse-corporate, for its VISUAL GRAMMAR and page hierarchy
only. None of its markup, CSS, colour or copy is used, and the two devices
that carry its authority — a metrics strip and a testimonial wall — are
deliberately absent, because 247 has neither genuine figures nor real
testimonials and inventing them is the one thing this estate never does.
What is adopted: section openings that announce themselves (eyebrow, large
head, one line of intro), service cards that carry an image instead of being
flat text rows, asymmetric image/content splits, a numbered process, large
CTA bands, and guide cards with a cluster label and a date. The job is to
make a hundred-page site read as intentional rather than as a pile of
articles.
⚠ FIVE PHOTOGRAPHS EXIST. Every image slot beyond them is declared `reused`
in images.json with the slot it borrows from. A composition that needs a
sixth photograph says so; it does not get filler.
========================================================================= */
/* ---------- section opening ------------------------------------------- */
.sec-open{max-width:46ch;margin:0 0 clamp(26px,3vw,42px)}
.sec-open .sec-kicker{margin:0 0 .7em}
.sec-open h2{font-family:var(--display);font-synthesis-weight:none;font-weight:800;
font-size:clamp(1.75rem, 1.2rem + 1.9vw, 2.9rem);line-height:1.08;letter-spacing:-.028em;
color:var(--navy);margin:0;text-wrap:balance}
.band--navy .sec-open h2{color:#fff}
.sec-open p{margin:.9em 0 0;color:var(--muted);font-size:1.02rem;line-height:1.6}
.band--navy .sec-open p{color:#b9cbdb}
.sec-open--wide{max-width:60ch}
/* is an inline wrapper and would introduce a line box between a
flex/grid parent and its ![]()
. display:contents removes it from layout
entirely, so every existing rule that targets `img` still applies. */
picture{display:contents}
/* ---------- service cards with imagery --------------------------------- */
.svccards{display:grid;gap:clamp(16px,1.8vw,24px)}
@media (min-width:760px){.svccards{grid-template-columns:repeat(3,1fr)}}
.svccard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
border-radius:var(--r-card);overflow:hidden;text-decoration:none;box-shadow:var(--shadow-sm);
transition:box-shadow .16s ease, transform .16s ease}
.svccard:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.svccard-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.svccard-img img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .4s ease}
.svccard:hover .svccard-img img{transform:scale(1.04)}
/* The wash is what stops six different photographs reading as six different
sites. It is navy, low, and identical on every card. */
.svccard-img::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg, rgba(18,48,79,.10) 0%, rgba(11,33,55,.55) 100%)}
.svccard-n{position:absolute;left:18px;top:16px;z-index:1;
font:800 .74rem/1 var(--sans);letter-spacing:.16em;color:#fff;
background:rgba(11,33,55,.55);backdrop-filter:blur(3px);padding:7px 10px;border-radius:var(--r-pill)}
.svccard-body{display:flex;flex-direction:column;gap:.55rem;flex:1;
padding:clamp(20px,2.2vw,28px)}
.svccard-t{font-family:var(--display);font-synthesis-weight:none;font-weight:800;
font-size:clamp(1.22rem, 1rem + .62vw, 1.56rem);line-height:1.14;letter-spacing:-.022em;
color:var(--navy);text-wrap:balance}
.svccard-d{font-size:.96rem;line-height:1.55;color:var(--muted)}
.svccard-go{margin-top:auto;padding-top:.9rem;font-weight:var(--w-head);font-size:.94rem;
color:var(--action);display:flex;align-items:center;gap:.45em}
.svccard-go::after{content:"→";transition:transform .16s ease}
.svccard:hover .svccard-go::after{transform:translateX(4px)}
/* ---------- asymmetric image / content split --------------------------- */
.split{display:grid;gap:clamp(26px,3.4vw,54px);align-items:center}
@media (min-width:940px){
.split{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.split--rev > :first-child{order:2}
}
.split-media{position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--navy)}
.split-media img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.split-media figure{margin:0}
.split-media figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:10px 14px;
font-size:.7rem;color:#dbe6ef;background:linear-gradient(180deg,rgba(11,33,55,0),rgba(11,33,55,.75))}
.split-body h2{font-family:var(--display);font-synthesis-weight:none;font-weight:800;
font-size:clamp(1.6rem, 1.15rem + 1.6vw, 2.6rem);line-height:1.1;letter-spacing:-.028em;
color:var(--navy);margin:0 0 .6em;text-wrap:balance}
.band--navy .split-body h2{color:#fff}
.split-body p{color:var(--muted);line-height:1.65;max-width:52ch}
.band--navy .split-body p{color:#b9cbdb}
.ticks{list-style:none;margin:1.5em 0 0;padding:0;display:grid;gap:.75em}
.ticks li{display:grid;grid-template-columns:auto 1fr;gap:.75em;align-items:start;
font-weight:var(--w-strong);color:var(--navy);line-height:1.45}
.band--navy .ticks li{color:#eaf1f7}
.ticks li::before{content:"";width:20px;height:20px;border-radius:50%;margin-top:.1em;
background:var(--action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center/13px no-repeat}
/* ---------- numbered process ------------------------------------------- */
.process{display:grid;gap:clamp(18px,2.2vw,30px);margin:0;padding:0;list-style:none;
counter-reset:pr}
@media (min-width:720px){.process{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.process{grid-template-columns:repeat(4,1fr)}}
.process li{counter-increment:pr;position:relative;padding-top:20px;
border-top:3px solid rgba(255,255,255,.22)}
.band--warm .process li,.band--paper .process li{border-top-color:var(--line-strong)}
.process li::before{content:"0" counter(pr);display:block;margin-bottom:.5em;
font:800 .8rem/1 var(--sans);letter-spacing:.16em;color:var(--action-bright)}
.band--warm .process li::before,.band--paper .process li::before{color:var(--action)}
.pr-t{display:block;font-family:var(--display);font-synthesis-weight:none;font-weight:800;
font-size:1.12rem;line-height:1.24;letter-spacing:-.018em;color:#fff;margin-bottom:.4em;text-wrap:balance}
.band--warm .pr-t,.band--paper .pr-t{color:var(--navy)}
.pr-d{display:block;font-size:.94rem;line-height:1.55;color:#b9cbdb}
.band--warm .pr-d,.band--paper .pr-d{color:var(--muted)}
/* ---------- large CTA band --------------------------------------------- */
.ctaband{background:linear-gradient(145deg,var(--navy) 0%,var(--navy-deep) 100%);
border-radius:var(--r-card);padding:clamp(28px,3.6vw,56px);display:grid;
gap:clamp(22px,3vw,44px);align-items:center}
@media (min-width:900px){.ctaband{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.ctaband h2{font-family:var(--display);font-synthesis-weight:none;font-weight:800;color:#fff;
font-size:clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem);line-height:1.1;letter-spacing:-.026em;
margin:0;text-wrap:balance}
.ctaband p{color:#b9cbdb;margin:.85em 0 0;line-height:1.6;max-width:46ch}
.ctaband-actions{display:flex;flex-wrap:wrap;gap:12px}
.ctaband .ticks li{color:#eaf1f7;font-size:.96rem}
/* ---------- guide cards -------------------------------------------------- */
.guidecards{display:grid;gap:clamp(14px,1.6vw,20px)}
@media (min-width:680px){.guidecards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1020px){.guidecards{grid-template-columns:repeat(3,1fr)}}
.guidecard{display:grid;align-content:start;gap:.5rem;background:var(--paper);
border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(18px,2vw,24px);
text-decoration:none;box-shadow:var(--shadow-sm);transition:box-shadow .15s ease,border-color .15s ease}
.guidecard:hover{box-shadow:var(--shadow);border-color:var(--line-strong)}
.gc-meta{display:flex;flex-wrap:wrap;gap:.5em .8em;font:800 .68rem/1.4 var(--sans);
letter-spacing:.13em;text-transform:uppercase;color:var(--action)}
.gc-meta .gc-date{color:var(--muted);font-weight:var(--w-strong);letter-spacing:.06em}
.gc-t{font-weight:var(--w-head);font-size:1.06rem;line-height:1.3;color:var(--navy);text-wrap:balance}
.guidecard:hover .gc-t{color:var(--action)}
.gc-d{font-size:.92rem;line-height:1.5;color:var(--muted)}
/* ---------- hub hero wash + service catalogue --------------------------- */
.a-hero-wash{position:absolute;inset:0;background-size:cover;background-position:50% 42%;
opacity:.30;z-index:0}
.a-hero-wash::after{content:"";position:absolute;inset:0;
background:linear-gradient(100deg, rgba(18,48,79,.95) 0%, rgba(18,48,79,.72) 48%, rgba(11,33,55,.55) 100%)}
.a-hero--statement-navy .band-inner{position:relative;z-index:1}
.routegrid{display:grid;gap:clamp(14px,1.6vw,20px)}
@media (min-width:680px){.routegrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.routegrid{grid-template-columns:repeat(3,1fr)}}
.routeitem{position:relative;display:grid;align-content:start;gap:.4rem;
background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--blue);
border-radius:var(--r-card);padding:clamp(20px,2.2vw,28px);text-decoration:none;
box-shadow:var(--shadow-sm);
transition:border-top-color .16s ease, box-shadow .16s ease, transform .16s ease}
.routeitem:hover{border-top-color:var(--action);box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.routeitem--dead{border-top-color:var(--line-strong);background:var(--cool);box-shadow:none}
.ri-n{font:800 .72rem/1 var(--sans);letter-spacing:.16em;color:var(--line-strong)}
/* The reader's own sentence is the LABEL; the route is the headline. Putting it
the other way round makes six products look like six questions. */
.ri-says{font-size:.93rem;line-height:1.45;color:var(--muted);font-style:italic}
.ri-route{font-family:var(--display);font-synthesis-weight:none;font-weight:800;
font-size:clamp(1.18rem, 1rem + .55vw, 1.45rem);line-height:1.14;letter-spacing:-.022em;
color:var(--navy);margin-top:.1em;text-wrap:balance}
.routeitem--dead .ri-route{color:var(--muted)}
.ri-d{font-size:.93rem;line-height:1.55;color:var(--muted)}
.ri-go{margin-top:.7rem;font-weight:var(--w-head);font-size:.92rem;color:var(--action);
display:flex;align-items:center;gap:.4em}
.ri-go::after{content:"→";transition:transform .16s ease}
.routeitem:hover .ri-go::after{transform:translateX(4px)}
.ri-pending{margin-top:.7rem;font-weight:var(--w-strong);font-size:.88rem;color:var(--muted)}
/* The hub's conversion block, given the weight of a band rather than a panel. */
.hubcta .cta,.hubcta .cta--preview,.hubcta .cta--informational{
background:linear-gradient(145deg,var(--navy) 0%,var(--navy-deep) 100%);
border:0;border-radius:var(--r-card);padding:clamp(28px,3.4vw,52px);color:#dbe6ef}
.hubcta .cta h3,.hubcta .cta--preview h3,.hubcta .cta--informational h3{
font-family:var(--display);font-synthesis-weight:none;font-weight:800;color:#fff;
font-size:clamp(1.45rem, 1.1rem + 1.3vw, 2.2rem);line-height:1.1;letter-spacing:-.026em;
margin:0;text-wrap:balance}
.hubcta .cta p,.hubcta .cta--preview p,.hubcta .cta--informational p{color:#b9cbdb;max-width:52ch}
.hubcta .cta-options{margin-top:1.5rem}
.hubcta .preview-chip{background:rgba(255,255,255,.14);color:#fff}
.hubcta .preview-note{color:#8ea7bd;font-size:.88rem}
/* ---------- v2 service page ---------------------------------------------- */
.a-hero--service .band-inner{padding-block:clamp(34px,4.2vw,70px)}
.svc-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.9rem}
@media (max-width:620px){.svc-hero-actions .btn{width:100%;justify-content:center;text-align:center}}
/* APPROVED 2026-10-02 for a quote/service journey, and only there. */
.svc-promise{margin:.9rem 0 0;font-weight:var(--w-strong);font-size:.94rem;color:var(--action-bright)}
@media (min-width:940px){.svc-split{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}
.svc-prose h2{font-family:var(--display);font-synthesis-weight:none;font-weight:800;
font-size:clamp(1.3rem, 1.1rem + .7vw, 1.7rem);line-height:1.15;letter-spacing:-.022em;
color:var(--navy);margin:1.9em 0 .5em;text-wrap:balance}
.svc-prose > h2:first-child{margin-top:0}
.svc-prose p{color:var(--ink);line-height:var(--lh-prose);max-width:62ch;margin:0 0 1em}
.svc-panel{background:var(--cool);border:1px solid var(--line);border-radius:var(--r-card);
padding:clamp(22px,2.4vw,30px);align-self:start}
.svc-h{font:var(--w-strong) .76rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);margin:0 0 1em}
.svc-panel .ticks{margin:0}
.svc-panel .ticks li{font-size:.96rem}
.svc-positioning{margin:1.3em 0 0;font-size:.92rem;color:var(--muted);line-height:1.55}
.pricesteps{counter-reset:ps;list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media (min-width:780px){.pricesteps{grid-template-columns:repeat(3,1fr)}}
.pricesteps li{counter-increment:ps;background:var(--paper);border:1px solid var(--line);
border-left:4px solid var(--action);border-radius:var(--r-btn);
padding:clamp(18px,2vw,24px);display:grid;gap:.35rem}
.ps-amt{font-family:var(--display);font-synthesis-weight:none;font-weight:900;
font-size:clamp(1.5rem, 1.2rem + 1vw, 2.1rem);line-height:1;letter-spacing:-.03em;color:var(--navy)}
.ps-when{font-size:.93rem;line-height:1.5;color:var(--muted)}
.svc-thirdparty{margin-top:clamp(26px,3vw,40px);max-width:70ch}
.svc-thirdparty p:last-child{color:var(--muted);line-height:1.6;margin:0;font-size:.96rem}
.svc-convert .enquiry,.svc-convert form{background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.16);border-radius:var(--r-card);
padding:clamp(24px,3vw,40px)}
.svc-convert h2,.svc-convert h3{font-family:var(--display);font-synthesis-weight:none;
font-weight:800;color:#fff;letter-spacing:-.024em;text-wrap:balance}
.svc-convert p,.svc-convert label{color:#c5d5e2}
.svc-convert input,.svc-convert select,.svc-convert textarea{
background:rgba(255,255,255,.95);border:1px solid var(--line-strong);border-radius:var(--r-btn);
padding:12px 14px;font:inherit;width:100%;color:var(--ink)}
/* The label and the value are adjacent spans with no whitespace between them.
site.css spaces them; v2.css had no rule, so the v2 service page rendered
"ServiceDigital Nomad Visa Service". */
.svc-convert .enq-svc{display:flex;flex-wrap:wrap;gap:.2em .7em;align-items:baseline;margin:0 0 1.4em}
.svc-convert .enq-svc span{font:var(--w-strong) .72rem/1.3 var(--sans);letter-spacing:.14em;
text-transform:uppercase;color:#8ea7bd}
.svc-convert .enq-svc strong{color:#fff}
.svc-convert .enq-field,.svc-convert fieldset{margin:0 0 1.1em;border:0;padding:0}
.svc-convert label{display:block;font-weight:var(--w-strong);font-size:.9rem;margin:0 0 .4em}
.svc-ask{margin-top:clamp(24px,2.8vw,36px);max-width:64ch}
.svc-ask .svc-h{color:#8ea7bd}
.svc-guide{background:var(--action-soft);border-left:4px solid var(--action);
border-radius:var(--r-btn);padding:clamp(20px,2.2vw,28px);max-width:74ch}
.svc-guide-k{font:var(--w-strong) .76rem/1.3 var(--sans);letter-spacing:.14em;
text-transform:uppercase;color:var(--action);margin:0 0 .7em}
.svc-guide p:last-child{margin:0;line-height:1.6}
/* ============================================================================
COMMERCIAL CTA — CONTRAST. Fix, 2026-10-02.
On MOV-00 the health CTA rendered as a stark white card on the navy
"moment" band with its own sentence almost invisible, and the disclosure
under it washed out to the point of being unreadable. Two separate causes,
both inherited rather than authored:
1. `.band--moment .sec-body p{color:#dfe9f1}` is a near-white, set for
prose ON the navy ground. The CTA card sits inside that band, so its
paragraph took the near-white too — on a white card.
2. `.disclosure{color:var(--muted)}` is #5a6875, which is correct on paper
and 1.9:1 on navy. The disclosure renders OUTSIDE the card, directly on
the band, so it took the navy ground and kept the paper colour.
The rule now: a commercial card always separates from its ground, and its
text colour is stated rather than inherited. Card wording, destination and
disclosure text are untouched — this is colour only.
========================================================================= */
/* A card on a DARK band is cream with navy text. */
.band--navy .cta, .band--navy .cta--preview, .band--navy .help,
.band--moment .cta, .band--moment .cta--preview{
background:var(--warm);
border:1px solid #e4ded2;
border-top:3px solid var(--action);
box-shadow:0 10px 30px rgba(5,18,32,.28);
}
.band--navy .cta h3, .band--navy .cta--preview h3,
.band--moment .cta h3, .band--moment .cta--preview h3{color:var(--navy)}
/* ⚠ font-family and size are restated because .band--moment sets a serif at
1.12em for its prose, and the card is not that prose. */
.band--navy .cta p, .band--navy .cta--preview p,
.band--moment .cta p, .band--moment .cta--preview p{
color:var(--ink); font-family:var(--sans); font-size:1rem; line-height:1.6;
}
/* The disclosure sits on the BAND, not in the card. On navy it has to be a
light tone; subordinate, never low-contrast. #c5d5e2 on navy is 8.6:1. */
/* A BAND'S LINK COLOUR MUST NOT REACH ITS BUTTONS.
`.band--navy a{color:#a8cde6}` (0,2,0) was beating `.btn{color:#fff}` (0,1,0),
so every button inside a navy band drew pale blue text on orange: 3.21:1.
White on --action is 5.37:1. Found on MOV-00's health CTA; it was equally
true of every other button on a navy ground. */
.band--navy a.btn, .band--moment a.btn{color:#fff}
.band--navy a.btn--onnavy, .band--moment a.btn--onnavy{color:var(--navy)}
.band--navy a.btn--ghost, .band--moment a.btn--ghost{color:#fff}
.band--navy .sec-body .disclosure, .band--moment .sec-body .disclosure,
.band--navy .disclosure, .band--moment .disclosure{color:#c5d5e2}
.band--navy .disclosure strong, .band--moment .disclosure strong{color:#fff}
.band--navy .disclosure a, .band--moment .disclosure a{color:#e87a4e}
/* A card on a PAPER band was white on white and relied on a hairline border to
exist at all. Cream separates it without introducing a colour. */
.band--paper .cta:not(.hubcta .cta), .band--paper .cta--preview:not(.hubcta .cta--preview){
background:var(--warm); border-color:#e4ded2;
}
/* On a WARM band the card keeps white, which is the separation that works there. */
/* The disclosure on a light ground was --muted at .87rem — readable, but it is
the sentence that says who provides the service, so it gets the body colour. */
.disclosure{color:var(--ink-soft, #4a6076)}
.band--warm .disclosure, .band--paper .disclosure, .band--cool .disclosure{color:#4a6076}
/* ---------- hub orientation layer --------------------------------------- */
.hubprose{display:grid;gap:clamp(22px,2.6vw,34px);max-width:min(1040px,100%)}
@media (min-width:880px){.hubprose{grid-template-columns:1fr 1fr;gap:clamp(26px,3vw,44px) clamp(32px,4vw,64px)}}
.hubprose-item h2{font-family:var(--display);font-synthesis-weight:none;font-weight:800;
font-size:clamp(1.18rem, 1rem + .6vw, 1.5rem);line-height:1.15;letter-spacing:-.022em;
color:var(--navy);margin:0 0 .5em;padding-top:14px;border-top:3px solid var(--action);
text-wrap:balance}
.hubprose-item p{margin:0;color:var(--ink);line-height:1.68;font-size:1rem;max-width:56ch}
.hubprose-item a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.hubprose-item a:hover{color:var(--action)}
.hubsections .sec-open{margin-bottom:clamp(20px,2.4vw,30px)}