:root{    --ground:#181E27; --surface:#1F2733; --hairline:#2A3442; --hairline-2:#38455A;
    --ink:#E9EDF2; --ink-2:#8B97A6;
    --lime:#C3F53C; --cyan:#4FC3D9; --amber:#F2A93B;
    --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
    --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
    --serif:"Newsreader",Georgia,serif;
    --ease:cubic-bezier(.22,1,.36,1);
    --gutter:24px;
    --margin:clamp(20px,6vw,120px);
    --sect:clamp(96px,11vw,176px);       /* between sections */
    --beat:clamp(56px,7vw,100px);        /* head → content, content → closing line */
    --lead:clamp(28px,3vw,40px);         /* eyebrow → heading */
    /* the index ladder: label type, and the standalone numbers that mark a thing */
    --ix:12px; --num:13px;
    /* the type ladder: every role on the page takes one of these */
    --t-h2:clamp(1.75rem,4.3vw,3.45rem);          /* section statement */
    --t-quote:clamp(1.5rem,2.9vw,2.5rem);     /* closing line */
    --t-state:clamp(1.5rem,2.4vw,2.125rem);   /* a statement in a list: loop steps, control rules */
    --t-name:clamp(1.25rem,1.9vw,1.625rem);   /* a named thing: functions, stages */
    --t-card:clamp(1rem,1.3vw,1.1875rem);     /* a card's title */
    --t-sf:clamp(1.0625rem,1.45vw,1.375rem);  /* standfirst */

    /* the figure system */
    --p:3.8s; --travel:cubic-bezier(.45,0,.25,1);
    --o-ln:.30; --o-soft:.14; --o-tk:.20; --o-edge:.17;

    /* the loop stack */
    --strip:48px; --h1:440px; --gap:24px; --stack-top:clamp(24px,9vh,88px);
  }
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:clamp(16px,3vw,40px);}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
    line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
.wrap{padding-inline:var(--margin);}
.page{max-width:1560px;margin-inline:auto;}
::selection{background:var(--lime);color:var(--ground);}
/* ---------- the top row: where you are in the SITE (the rail is where you are in the page) ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:30;pointer-events:none;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    padding:clamp(16px,2vw,26px) var(--margin) 0;}
.top > *{pointer-events:auto;}
/* The bar sits over the page, so the page has to stop at it. A scrim that is
     absent on the opening screen - where the bar is meant to float - and fades
     in the moment anything is scrolled under it. The blur and the darkening
     fade out together through one mask, so the bar has no edge of its own. */
.top::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 34px);
    z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);
    background:linear-gradient(180deg,var(--ground) 0%,rgba(24,30,39,.92) 50%,rgba(24,30,39,0) 100%);
    -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 100%);}
.top.is-bg::before{opacity:1;}
.top__brand{display:flex;align-items:center;gap:12px;text-decoration:none;
    font-family:var(--mono);font-size:var(--ix);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);}
.top__brand .sdmark{height:22px;margin:0;}
.top__brand:hover{color:var(--lime);}
.top__nav{display:flex;gap:26px;margin:0;padding:0;list-style:none;}
.top__nav a{font-family:var(--mono);font-size:var(--ix);letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-2);text-decoration:none;padding:6px 0;position:relative;transition:color .35s var(--ease);}
.top__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--lime);
    transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);}
.top__nav a:hover,.top__nav a.is-cur{color:var(--ink);}
.top__nav a.is-cur::after,.top__nav a:hover::after{transform:none;}
.top__nav a:focus-visible,.top__brand:focus-visible{outline:2px solid var(--lime);outline-offset:4px;}
@media (max-width:760px){
.top__nav{gap:18px;}
.top__nav a{font-size:10px;}
}
/* the page carries a grain, so the ground reads as a surface rather than a void */
.grain{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;pointer-events:none;
    opacity:.038;background-repeat:repeat;}
/* ---------- the ground ----------
     The page is set on twelve columns, so the ground is measured by them: one
     hairline halfway down every second gutter. A line on a column edge makes
     the last interval a column and every other one a column plus a gutter, and
     the eye reads the last as a mistake; halfway down a gutter the rhythm is
     even the whole way across. */
.field{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;
    padding-inline:var(--margin);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 86%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 86%,transparent 100%);}
.field__page{max-width:1560px;height:100%;margin-inline:auto;
    display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);}
.field__page > i{display:block;height:100%;position:relative;}
.field__page > i:nth-child(even):not(:last-child)::after{content:"";position:absolute;
    top:0;bottom:0;right:calc(var(--gutter) / -2);width:1px;background:var(--hairline);opacity:.75;}
@media (max-width:760px){
.field__page{grid-template-columns:repeat(6,1fr);}
.field__page > i:nth-child(n+7){display:none;}
.field__page > i:nth-child(6)::after{display:none;}
}
/* the page sits on the ground, not under it */
.wrap{position:relative;z-index:1;}
/* ---------- roles ---------- */
/* index - where you are in the document. The number is the dimmer half: an
     index says where, not what, and the label is what has to be read. The slash
     belongs to the number, held to it by thin spaces. */
.ix{font-family:var(--mono);font-size:var(--ix);letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink-2);margin:0;display:block;}
/* ---------- the heading ----------
     One heading across both pages: the same size, weight, tracking and line, the
     operative words in the serif, and the same arrival - a word at a time,
     rising out of its own line. */
h2{font-weight:500;letter-spacing:-.032em;line-height:1.1;margin:0;text-wrap:balance;}
h2{font-size:var(--t-h2);}
/* the operative words. The serif is the page's one other voice, matched to the
     sans on the x-height rather than the em, and set one step heavier because a
     serif reads lighter at the same size. An accent breaks as one thing. */
h2 .hl{font-family:var(--serif);font-weight:600;font-size:1.07em;
    letter-spacing:-.012em;white-space:nowrap;}
.hl{color:var(--lime);}
.standfirst{font-size:var(--t-sf);letter-spacing:-.012em;line-height:1.45;
    color:var(--ink);max-width:36ch;margin:0;}
/* headline reveal: each word rises out of a mask when the heading enters view */
/* the mask is cut, not overflowed: a box with overflow:hidden crops the side
     bearings of the serif and the tails of the descenders, and the accent words
     are exactly the ones that have them. The masks sit on the baseline, not on
     their own top edge - two faces in one line have boxes of different heights. */
.rv .wm{display:inline-block;vertical-align:baseline;padding-bottom:.16em;margin-bottom:-.16em;
    -webkit-clip-path:inset(-0.32em -0.1em .16em -0.1em);clip-path:inset(-0.32em -0.1em .16em -0.1em);}
.rv .w{display:inline-block;white-space:nowrap;transform:translateY(112%);
    transition:transform .86s var(--ease);}
.rv.is-rv .w{transform:none;}
/* anything else that should arrive: fade-rise once */
.in{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.in.is-in{opacity:1;transform:none;}
/* ---------- section frame ---------- */
section{padding-block:var(--sect);}
.head{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:start;}
/* ---------- the seam ----------
     Every section opens the same way: a hairline the width of the screen with
     the section's index cut into it at the left margin. The rule genuinely
     stops at the index and starts again after it, so the same seam works over a
     figure as over the page. */
.seam{position:relative;display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);
    margin-bottom:clamp(30px,4vw,56px);}
.in.seam{opacity:1;transform:none;}
.seam .ix{flex:0 0 auto;}
.seam__ln{flex:1 1 auto;height:1px;background:var(--hairline-2);
    transform:scaleX(0);transform-origin:left center;transition:transform 1.15s var(--ease);}
.seam::before{content:"";position:absolute;top:50%;right:100%;width:50vw;height:1px;
    background:var(--hairline-2);transform:scaleX(0);transform-origin:right center;
    transition:transform 1.15s var(--ease);}
.seam.is-in .seam__ln,.seam.is-in::before{transform:none;}
.head h2{grid-column:1 / span 7;}
.head .standfirst{grid-column:9 / span 4;margin-top:.5em;}
/* the mark itself, in its own colour, small: identity is a signature, not a wallpaper */
.sdmark{height:26px;width:auto;display:block;margin-right:6px;align-self:center;}
/* ================= FOOTER ================= */
footer{border-top:1px solid var(--hairline);
    padding-block:clamp(56px,6vw,88px) calc(clamp(72px,8vw,104px) + env(safe-area-inset-bottom,0px));}
.foot{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);}
.foot__a{grid-column:1 / span 3;}
.foot__b{grid-column:4 / span 3;}
.foot__d{grid-column:7 / span 3;}
.foot__c{grid-column:10 / span 3;}
/* the blocks are equal, so what separates them is the measure of the type,
     not the width of the box */
.foot__a p{max-width:26ch;}
.foot__reg{margin-top:12px!important;font-family:var(--mono);font-size:.75rem!important;letter-spacing:.06em;}
.foot__adr{margin-top:12px!important;line-height:1.55;}
.foot p,.foot a{font-size:.875rem;color:var(--ink-2);margin:0;text-decoration:none;}
.foot a:hover{color:var(--ink);}
.foot__nav{display:flex;flex-direction:column;gap:12px;}
.foot__legal{margin-top:clamp(40px,5vw,64px);display:flex;flex-wrap:wrap;gap:8px 28px;
    font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);opacity:.65;}
/* the legal line: two of its items are pages of their own */
.foot__legal a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;
    transition:color .3s var(--ease),border-color .3s var(--ease);}
.foot__legal a:hover{color:var(--lime);border-color:var(--lime);}
@media (max-width:900px){
.head h2,.head .standfirst{grid-column:1 / -1;}
.head .standfirst{margin-top:28px;}
.foot__a,
.foot__b,
.foot__c,
.foot__d{grid-column:1 / -1;}
.foot__b,.foot__c,.foot__d{margin-top:36px;}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
.rv .w{transform:none;transition:none;}
.in{opacity:1;transform:none;transition:none;}
}
/* the mark: a canvas, so it can turn; it takes the colour of the lockup it sits in */
.top__brand .nsmark{height:25px;width:25px;margin:0;display:block;}
/* ============ L · a legal page ============
   Clauses, not paragraphs: the number and the name on the left, the text on the
   right, one hairline to a clause. The reading measure is wider than the body
   column elsewhere on the site, because a clause is read once and in full. */
.lg{margin-top:var(--beat);display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gutter);}
.lg__row{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);
  padding-block:clamp(22px,2.6vw,34px);border-top:1px solid var(--hairline);}
.lg__k{grid-column:1 / span 3;margin:0;font-family:var(--mono);font-size:var(--ix);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);display:flex;gap:14px;
  align-items:baseline;line-height:1.5;}
.lg__k i{font-style:normal;font-size:var(--num);color:var(--hairline-2);}
.lg__t{grid-column:5 / span 7;}
.lg__t p{margin:0;color:var(--ink-2);font-size:1.0625rem;max-width:62ch;}
.lg__t p + p{margin-top:1.05em;}
.lg__t b{font-weight:400;color:var(--ink);}
.lg__t a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hairline-2);
  transition:color .3s var(--ease),border-color .3s var(--ease);}
.lg__t a:hover{color:var(--lime);border-color:var(--lime);}
/* the stamp: when this text came into force, set as a record */
.lg__stamp{margin:clamp(40px,5vw,64px) 0 0;padding-top:18px;border-top:1px solid var(--hairline);
  font-family:var(--mono);font-size:var(--ix);letter-spacing:.14em;text-transform:uppercase;
  color:var(--hairline-2);}
.lg__stamp b{font-weight:400;color:var(--ink-2);}
@media (max-width:900px){
.lg__row{grid-template-columns:1fr;gap:14px;}
.lg__k,.lg__t{grid-column:1 / -1;}
.lg__t p{max-width:none;}
}
/* ---- L2 · the same notice in two languages ----
   Section 7(3) wants the notice in the national language and in English. The
   toggle is a pressable thing, so it is allowed its rounded border; it appears
   only once the script that makes it work has run. Without the script both
   blocks stand, separated by a full section of air. */
.lgx{display:none;margin:var(--lead) 0 clamp(34px,4.4vw,62px);gap:10px;flex-wrap:wrap;}
.lgx__b{font-family:var(--mono);font-size:var(--ix);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);background:none;border:1px solid var(--hairline);border-radius:999px;
  padding:10px 18px 9px;cursor:pointer;
  transition:color .35s var(--ease),border-color .35s var(--ease);}
.lgx__b:hover{color:var(--ink);border-color:var(--hairline-2);}
.lgx__b.is-cur{color:var(--lime);border-color:var(--lime);}
.lgx__b:focus-visible{outline:2px solid var(--lime);outline-offset:4px;}
.lgx__b:active{transform:scale(.975);}
.lgb + .lgb{margin-top:var(--sect);padding-top:var(--sect);border-top:1px solid var(--hairline);}
html.l-en .lgb[data-l="ms"],html.l-ms .lgb[data-l="en"]{display:none;}
html.l-en .lgb + .lgb,html.l-ms .lgb + .lgb{margin-top:0;padding-top:0;border-top:0;}
/* ---------- what used to sit on the elements themselves ----------
   Moved here so no element carries a style attribute: the pages are then
   served under a policy that forbids inline style outright, and a class of
   injection stops being possible at the browser rather than at the server. */
.v1{color:var(--ink);font-size:1rem;}
.v2{margin-top:12px;}
@keyframes travel{0%{offset-distance:0%;opacity:0;}6%{opacity:1;}94%{offset-distance:100%;opacity:1;}100%{offset-distance:100%;opacity:0;}}
@keyframes edge{0%{stroke-dashoffset:101;stroke-opacity:0;}2%{stroke-opacity:var(--o-edge);}9%{stroke-dashoffset:0;}84%{stroke-dashoffset:0;stroke-opacity:var(--o-edge);}94%{stroke-opacity:0;}100%{stroke-dashoffset:101;stroke-opacity:0;}}