/* ==========================================================================
   Towemer Wealth · site styles
   Reads tokens.css. Never hardcode a value that has a token.
   ========================================================================== */

/* ---- faces come from tokens.css, which the build generates from
   client.config.json. They were hardcoded here, which is how the first
   client's typeface outlived the first client. ---- */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---- shared shapes ------------------------------------------------------ */
.wrap{max-width:var(--content-max);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font-size:var(--t-label);font-weight:var(--w-medium);letter-spacing:var(--t-label-ls);
  text-transform:uppercase;color:var(--text-muted)}
.lead{font-size:var(--t-body-lg);line-height:var(--t-body-lg-lh);max-width:54ch;color:var(--text-muted)}
.lead strong{color:var(--text);font-weight:var(--w-medium)}

.btn{display:inline-block;font:inherit;font-size:var(--t-body-sm);font-weight:var(--w-medium);
  line-height:1;padding:16px 26px;border-radius:var(--radius);text-decoration:none;
  background:var(--accent);color:var(--text-on-accent);border:1px solid var(--accent);
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn--ghost:hover{background:transparent;border-color:var(--text)}
.btn--onaccent{background:var(--c-chalk);color:var(--c-aubergine);border-color:var(--c-chalk)}
.btn--onaccent:hover{background:var(--c-aubergine-tint);border-color:var(--c-aubergine-tint)}
.btn-row{display:flex;gap:var(--s-3);flex-wrap:wrap}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--text-on-accent);
  padding:12px 18px;z-index:100}
.skip:focus{left:var(--gutter);top:var(--s-2)}

/* ---- header ------------------------------------------------------------- */
/* Guidelines section 6: the nav is a Petrol Ink bar, lockup left, Linen right.
   It is the first Petrol Ink on the page and it sets the brand before a word
   is read. */
.site-head{position:sticky;top:0;z-index:60;background:var(--c-ink-deep);
  border-bottom:1px solid rgb(var(--ground-rgb) / .16)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
  min-height:74px;padding-block:var(--s-3)}
.brand{display:inline-flex;align-items:center;color:var(--c-chalk);text-decoration:none;flex:none}
.brand svg{display:block;width:172px;height:auto}
/* Header carries the mark alone. The wordmark lockups are for print, covers and the
   footer, never the nav bar. */
.brand--mark svg{width:auto;height:34px}
/* One control, at every width. A wealth practice does not need eight links
   competing with its own name. MENU opens the whole field. */
.nav-toggle{order:3;margin-left:clamp(20px,3vw,40px)}
.nav-toggle summary{list-style:none;cursor:pointer;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--c-chalk);
  padding:12px 0 12px 20px;display:inline-flex;align-items:center;gap:12px}
.nav-toggle summary::-webkit-details-marker{display:none}
.nav-toggle summary::after{content:"";width:22px;height:9px;
  border-top:1px solid currentColor;border-bottom:1px solid currentColor;
  transition:transform var(--dur-fast) var(--ease)}
.nav-toggle[open] summary::after{transform:rotate(90deg)}

.site-nav{position:fixed;inset:74px 0 0;background:var(--c-ink-deep);
  display:none;flex-direction:column;justify-content:center;
  gap:0;padding:0 var(--gutter) 10vh;overflow-y:auto}
.site-head .wrap:has(.nav-toggle[open]) .site-nav{display:flex}
/* Nothing here sizes a link. The overlay holds two different kinds of list
   and this rule used to size both of them at fifty four pixels, which turned
   an email address into a headline. Sizing lives with each list. */
.site-nav{color:var(--c-chalk)}

.head-signin{color:rgb(var(--ground-rgb) / .62);text-decoration:none;
  font-size:var(--t-body-sm)}
.head-signin:hover{color:var(--c-chalk)}
.head-cta{flex:none;order:2;display:flex;align-items:center;gap:var(--s-5);
  margin-left:auto}
/* Guidelines section 6: primary CTA as a Linen block. */
.head-cta .btn{background:var(--c-chalk);color:var(--c-ink-deep);border-color:var(--c-chalk)}
.head-cta .btn:hover{background:var(--c-hairline);border-color:var(--c-hairline)}

@media (max-width:940px){
  .head-signin{display:none}
  .head-cta{margin-left:var(--s-4)}
}
/* On a phone the wordmark, a call to action and the menu control do not fit
   on one bar at the sizes they take on a desktop. The bar was 89 pixels wider
   than the screen, which is what puts a sideways scroll on a whole page. The
   call to action is in the hero and in the menu, so on the narrowest screens
   the bar keeps the wordmark and the menu and nothing else. */
@media (max-width:640px){
  .site-head .wrap{gap:var(--s-3)}
  .head-cta .btn{padding:10px 14px;font-size:13px}
  .nav-toggle{margin-left:var(--s-3)}
  .nav-toggle summary{padding-left:0;gap:9px}
}
@media (max-width:460px){
  .head-cta{display:none}
}


/* ---- hero --------------------------------------------------------------- */
/* The hero carries Petrol Ink, which the guidelines call the default state of
   the brand and put at about 55 per cent of a page. Reversed out, it is the
   first thing a client sees and it is unmistakably Towemer rather than another
   beige adviser site. */
.hero{position:relative;background:var(--c-ink-deep);color:var(--c-chalk);
  padding-block:clamp(78px,11vw,168px) 0;overflow:hidden}
/* The overlap used to be a panel starting partway across the hero, which
   put a vertical seam through the headline. A device that cuts a word in half
   is not a device. The two panels now share a horizontal edge instead: Petrol
   Ink above, Petrol under the stat row, meeting on the line where the reading
   stops and the facts start. */
.hero > *{position:relative;z-index:1}
.hero h1{font-size:var(--t-display-1);line-height:var(--t-display-1-lh);
  letter-spacing:var(--t-display-1-ls);font-weight:300;
  max-width:17ch;text-wrap:balance;color:var(--c-chalk)}
.hero .lead{margin-top:var(--s-6);color:rgb(var(--ground-rgb) / .78);max-width:58ch}
.hero .lead strong{color:var(--c-chalk)}
.hero .btn-row{margin-top:var(--s-7)}
.hero .btn{background:var(--c-chalk);color:var(--c-ink-deep);border-color:var(--c-chalk)}
.hero .btn:hover{background:var(--c-hairline);border-color:var(--c-hairline)}
.hero .btn--ghost{background:transparent;color:var(--c-chalk);
  border-color:rgb(var(--ground-rgb) / .42)}
.hero .btn--ghost:hover{background:transparent;border-color:var(--c-chalk)}
/* Guidelines section 6, stat row: hairline divided cells, mono figure over a
   mono label. */
/* Petrol, run the full width of the window behind the stat row. The band is
   painted as an outward shadow and clipped vertically, which is how a thing
   inside a centred column reaches both edges of the screen. Petrol Ink above,
   Petrol below, sharing a horizontal edge: the overlap from the guidelines,
   landing on the line where the reading stops and the facts start, rather
   than through the middle of a word. */
.hero-meta{position:relative;margin-top:clamp(52px,7vw,96px);
  background:var(--c-ink);clip-path:inset(0 -100vmax);
  box-shadow:0 0 0 100vmax var(--c-ink);
  padding:clamp(26px,3vw,40px) 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0}
.hero-meta div{padding:0 clamp(12px,1.6vw,20px) 0 clamp(18px,2.6vw,36px);
  border-left:1px solid rgb(var(--ground-rgb) / .26)}
.hero-meta div:first-child{padding-left:0;border-left:0}
.hero-meta div .k{display:block;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;
  color:rgb(var(--ground-rgb) / .66)}
.hero-meta div .v{display:block;margin-top:10px;font-size:20px;
  font-weight:300;color:var(--c-chalk)}
@media (max-width:640px){
  .hero-meta{grid-template-columns:1fr 1fr;row-gap:clamp(18px,4vw,26px)}
  .hero-meta div:nth-child(odd){padding-left:0;border-left:0}
}

.rise{animation:rise var(--dur-slow) var(--ease) both}
.rise-2{animation-delay:90ms}
.rise-3{animation-delay:170ms}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rise{animation:none}}

/* ---- the rings ----------------------------------------------------------
   The brochure's contour nest, drawn by Claude outputs/rings.py. It gives the
   suite its edge precisely because it is rare: the homepage hero, and a crop
   at a handful of section breaks. Never on every panel, never on a card.

   Hero: the whole nest, off to the right, turning once every nine minutes.
   At that speed the eye reads drift, not animation. No rotation at all for
   anyone who has asked their device for less motion. */
.hero:not(.hero--page)::before{content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(94vmax,1180px);aspect-ratio:1;right:calc(min(94vmax,1180px) * -.48);top:50%;
  margin-top:calc(min(94vmax,1180px) / -2);
  background:url("rings-drift.svg") no-repeat center/contain;opacity:.5;
  animation:rings-drift 540s linear infinite;will-change:transform}
@keyframes rings-drift{to{transform:rotate(360deg)}}
@media (max-width:760px){.hero:not(.hero--page)::before{opacity:.3;right:-62vmax}}
@media (prefers-reduced-motion:reduce){.hero:not(.hero--page)::before{animation:none}}

/* Section breaks: a fragment of the outer rings only, cut by the section's
   own edge so the nest is never whole. Low contrast on purpose. It sits inside
   the section's box, so no section needs overflow hidden, which would break
   the sticky columns some sections carry. */
.sec--rings{position:relative}
.sec--rings > *{position:relative;z-index:1}
.sec--rings::after{content:"";position:absolute;z-index:0;pointer-events:none;top:0;right:0;
  width:clamp(220px,36vw,540px);aspect-ratio:440/260;
  background:url("rings-crop.svg") no-repeat right top/contain;opacity:.9;
  /* the arcs leave from the section's corner and dissolve, so no line ever
     stops dead in open space */
  -webkit-mask-image:radial-gradient(ellipse at top right,black 30%,transparent 74%);
  mask-image:radial-gradient(ellipse at top right,black 30%,transparent 74%)}
.sec--rings.sec--rings-low::after{top:auto;bottom:0;right:auto;left:0;transform:rotate(180deg)}
.sec--accent.sec--rings::after,.sec--ink.sec--rings::after,.sec--data.sec--rings::after{opacity:.42}

/* Draw-in for the rail. Applied by script only, so with no JS the line is
   simply there. Nothing is ever parked invisible waiting on an observer. */
.js .rail-track[data-draw]{transform:scaleX(0)}
.js .rail-admission[data-draw]{transform:scaleY(0)}
.js .dot[data-draw]::before{opacity:0}
.js .rail-track.drawn{transform:scaleX(1);transition:transform 900ms var(--ease)}
.js .rail-admission.drawn{transform:scaleY(1);transition:transform 500ms var(--ease) 800ms}
.js .dot.drawn::before{opacity:1;transition:opacity 320ms var(--ease) var(--d,0ms)}
@media (prefers-reduced-motion:reduce){
  .js .rail-track[data-draw],.js .rail-admission[data-draw]{transform:none}
  .js .dot[data-draw]::before{opacity:1}
  .js .rail-track.drawn,.js .rail-admission.drawn,.js .dot.drawn::before{transition:none}
}

/* ---- section frame ------------------------------------------------------ */
.sec{padding-block:var(--section-y)}
/* Guidelines section 3: maximum two background colours on a page, and the warm
   off-white is for cards sitting on Linen, never for a full width band. A
   section that used to take the off-white now simply sits on Linen, and the
   contrast in the page comes from Petrol Ink instead. */
.sec--stone{background:transparent}
.sec--accent{background:var(--accent);color:var(--text-on-accent)}
.sec-title{font-size:var(--t-display-2);line-height:var(--t-display-2-lh);
  letter-spacing:var(--t-display-2-ls);font-weight:var(--w-regular);max-width:20ch;
  text-wrap:balance}
.sec-intro{margin-top:var(--s-5);max-width:var(--prose-max);color:var(--text-muted);
  font-size:var(--t-body-lg);line-height:var(--t-body-lg-lh)}

/* ---- the line ------------------------------------------------------------
   The brand device and the product are the same object: a timeline of a
   listing, with the aperture rule standing at admission. Private to the left,
   public to the right. This is the one place the rule appears.
   -------------------------------------------------------------------------- */
.line-sec .lead{margin-top:var(--s-5)}

.rail{margin-top:clamp(52px,7vw,88px);position:relative}
.rail-sides{position:relative;display:flex;justify-content:space-between;margin-bottom:var(--s-4);
  font-size:var(--t-label);font-weight:var(--w-medium);letter-spacing:var(--t-label-ls);
  text-transform:uppercase;color:var(--text-muted)}
.rail-sides .adm{position:absolute;left:74%;transform:translateX(-50%);
  color:var(--accent);white-space:nowrap}
.rail-line{position:relative;height:2px}

.rail-track{position:absolute;inset:0;height:2px;background:var(--line);
  transform-origin:left center}
.rail-track::after{content:"";position:absolute;left:0;top:0;height:2px;width:74%;
  background:var(--text)}
.rail-admission{position:absolute;left:74%;top:-38px;height:80px;width:1px;z-index:0;
  background:var(--aperture);transform-origin:top center}
.rail-dots{z-index:1}

.rail-dots{position:absolute;inset:0;height:0}
.dot{position:absolute;top:-13px;transform:translateX(-50%);
  width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;border-radius:50%}
.dot::before{content:"";width:9px;height:9px;border-radius:50%;
  background:var(--bg-raised);box-shadow:inset 0 0 0 2px var(--text-muted);
  transition:background var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease)}
.dot:hover::before{box-shadow:inset 0 0 0 2px var(--text);transform:scale(1.25)}
.dot[aria-selected="true"]::before{background:var(--accent);
  box-shadow:0 0 0 5px var(--bg-raised),0 0 0 6px var(--accent);transform:scale(1)}
.dot .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

.rail-scale{margin-top:var(--s-7);position:relative;height:18px;
  font-size:var(--t-caption);color:var(--text-muted);font-variant-numeric:tabular-nums}
.rail-scale span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.rail-scale span:first-child{transform:none}
.rail-scale span:last-child{transform:translateX(-100%)}
.rail-note{margin-top:var(--s-3);font-size:var(--t-caption);color:var(--text-muted)}

/* detail panel */
.stage{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line);
  padding-top:clamp(24px,3vw,36px);
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(24px,5vw,72px);align-items:start;min-height:210px}
.stage-head{display:flex;align-items:baseline;gap:var(--s-4);flex-wrap:wrap}
.stage h3{font-size:var(--t-h1);line-height:var(--t-h1-lh);letter-spacing:var(--t-h1-ls);
  font-weight:var(--w-medium)}
.stage .when{font-size:var(--t-label);font-weight:var(--w-medium);
  letter-spacing:var(--t-label-ls);text-transform:uppercase;color:var(--accent);
  font-variant-numeric:tabular-nums}
.stage .what{margin-top:var(--s-4);color:var(--text-muted);max-width:56ch}
.stage .ours{border-left:2px solid var(--accent);padding-left:var(--s-5)}
.stage .ours .k{font-size:var(--t-label);font-weight:var(--w-medium);
  letter-spacing:var(--t-label-ls);text-transform:uppercase;color:var(--text-muted);
  display:block;margin-bottom:var(--s-3)}
.stage .ours p{font-size:var(--t-body-lg);line-height:var(--t-body-lg-lh)}
.stage-swap{animation:swap var(--dur-base) var(--ease) both}
@keyframes swap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.rail-nav{margin-top:var(--s-6);display:flex;gap:var(--s-2)}
.rail-nav button{font:inherit;font-size:var(--t-body-sm);font-weight:var(--w-medium);
  padding:11px 16px;background:transparent;color:var(--text);
  border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease)}
.rail-nav button:hover:not(:disabled){border-color:var(--text)}
.rail-nav button:disabled{color:var(--text-muted);cursor:default;opacity:.55}

@media (max-width:820px){
  .stage{grid-template-columns:1fr;gap:var(--s-6)}
  .rail-scale span:not(:first-child):not(:last-child){display:none}
}
/* Below this width a horizontal rail stops being readable. The line goes
   vertical, which is also the only orientation the brand rule is allowed. */
@media (max-width:640px){
  .rail-sides,.rail-scale,.rail-note{display:none}
  .rail-track{height:auto}
  .rail-track::after{display:none}
  .rail-admission{display:none}
  .rail-dots{height:auto;display:grid;gap:0;border-left:1px solid var(--line);
    padding-left:var(--s-5)}
  .dot{position:static;transform:none;width:100%;height:auto;justify-items:start;
    display:flex;align-items:center;gap:var(--s-4);padding:14px 0;text-align:left;
    border-bottom:1px solid var(--line);border-radius:0}
  .dot::before{flex:none;margin-left:calc(-1 * var(--s-5) - 5px);background:var(--bg-raised)}
  .dot .sr{position:static;width:auto;height:auto;overflow:visible;clip-path:none;
    font-size:var(--t-body-sm);font-weight:var(--w-medium);color:var(--text)}
  .dot[aria-selected="true"] .sr{color:var(--accent)}
}

/* ---- services: ordered because the order carries meaning ---------------- */
.services{margin-top:clamp(40px,6vw,72px);list-style:none;counter-reset:svc}
.services > li{counter-increment:svc;border-top:1px solid var(--line)}
.services > li:last-child{border-bottom:1px solid var(--line)}
.services a.row{display:grid;grid-template-columns:60px minmax(0,1fr) minmax(0,1.5fr) 22px;
  gap:clamp(16px,3vw,40px);align-items:baseline;padding-block:var(--s-6);
  text-decoration:none;color:inherit;transition:background var(--dur-fast) var(--ease)}
.services a.row:hover{background:var(--bg-raised)}
.services .num{font-size:var(--t-label);font-weight:var(--w-medium);
  letter-spacing:var(--t-label-ls);color:var(--text-muted);font-variant-numeric:tabular-nums}
.services .num::before{content:"0" counter(svc)}
.services h3{font-size:var(--t-h2);line-height:var(--t-h2-lh);letter-spacing:var(--t-h2-ls);
  font-weight:var(--w-medium)}
.services p{color:var(--text-muted);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);
  max-width:52ch}
.services .arrow{color:var(--accent);justify-self:end;font-size:var(--t-body);
  transition:transform var(--dur-fast) var(--ease)}
.services a.row:hover .arrow{transform:translateX(4px)}
@media (max-width:820px){
  .services a.row{grid-template-columns:44px minmax(0,1fr);row-gap:var(--s-3)}
  .services .num{grid-row:1}
  .services h3{grid-column:2}
  .services p{grid-column:2}
  .services .arrow{grid-column:2;justify-self:start}
}

/* ---- process ------------------------------------------------------------ */
.steps{margin-top:clamp(40px,6vw,72px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line)}
.steps > li{background:var(--bg);padding:clamp(24px,3.4vw,40px);list-style:none;
  display:flex;flex-direction:column;gap:var(--s-4)}
.steps .k{font-size:var(--t-label);font-weight:var(--w-medium);
  letter-spacing:var(--t-label-ls);text-transform:uppercase;color:var(--text-muted)}
.steps h3{font-size:var(--t-h3);line-height:var(--t-h3-lh);letter-spacing:var(--t-h3-ls);
  font-weight:var(--w-medium)}
.steps p{color:var(--text-muted);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh)}
@media (max-width:820px){.steps{grid-template-columns:1fr}}

/* ---- discipline: the one bold moment ------------------------------------ */
.sec--accent .sec-title{max-width:22ch}
.sec--accent .body{margin-top:clamp(32px,4vw,56px);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);
  align-items:center}
@media (max-width:820px){.sec--accent .body{grid-template-columns:1fr;align-items:start}}
/* Scoped to unclassed paragraphs only. A bare `.sec--accent p` outranks any
   single class on the same element, which silently killed .quote and .bigline.
   Anything with its own class now styles itself. */
.sec--accent p:not([class]){color:var(--c-aubergine-tint);font-size:var(--t-body-lg);
  line-height:var(--t-body-lg-lh);max-width:52ch}
.sec--accent p:not([class]) + p:not([class]){margin-top:var(--s-4)}
.sec--accent p:not([class]) strong{color:var(--c-chalk);font-weight:var(--w-medium)}
.quote{font-family:var(--font-quote);font-style:italic;font-weight:300;
  font-size:clamp(27px,3.7vw,46px);line-height:1.24;letter-spacing:-.012em;
  color:var(--c-chalk);max-width:19ch;text-wrap:balance}

/* ---- insights ----------------------------------------------------------- */
.notes{margin-top:clamp(40px,6vw,72px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Guidelines section 3: the warm off-white is for cards sitting on Linen.
   As a full width band it read as a white box on beige, which is what it was
   doing before. Here it is doing the job it was specified for, and three
   cards read as three rather than as one continuous slab. */
.notes > li{background:var(--c-surface);list-style:none}
.notes a{display:flex;flex-direction:column;gap:var(--s-3);height:100%;
  padding:clamp(24px,3vw,36px) clamp(20px,2.4vw,30px);text-decoration:none;color:inherit;
  transition:background var(--dur-base) var(--ease),color var(--dur-base) var(--ease)}
.notes a:hover{background:var(--c-ink-deep);color:var(--c-chalk)}
.notes a:hover .k,.notes a:hover p{color:rgb(var(--ground-rgb) / .74)}
.notes a:hover .arrow{color:var(--c-chalk)}
.notes .k{font-size:var(--t-label);font-weight:var(--w-medium);
  letter-spacing:var(--t-label-ls);text-transform:uppercase;color:var(--text-muted)}
.notes h3{font-size:var(--t-h3);line-height:var(--t-h3-lh);letter-spacing:var(--t-h3-ls);
  font-weight:var(--w-medium);text-wrap:balance}
.notes p{color:var(--text-muted);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);
  margin-bottom:auto}
.notes .arrow{color:var(--accent);font-size:var(--t-body-sm)}
@media (max-width:820px){.notes{grid-template-columns:1fr}}
.sec-foot{margin-top:var(--s-6)}
.link{color:var(--accent);text-decoration:none;font-weight:var(--w-medium);
  font-size:var(--t-body-sm);border-bottom:1px solid transparent}
.link:hover{border-bottom-color:var(--accent)}

/* ---- closing cta -------------------------------------------------------- */
.closer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,5vw,80px);align-items:end}
.closer .not{border-top:1px solid var(--line);padding-top:var(--s-5)}
.closer .not .k{display:block;font-size:var(--t-label);font-weight:var(--w-medium);
  letter-spacing:var(--t-label-ls);text-transform:uppercase;color:var(--text-muted);
  margin-bottom:var(--s-3)}
.closer .not ul{list-style:none;display:grid;gap:var(--s-2)}
.closer .not li{color:var(--text-muted);font-size:var(--t-body-sm);
  line-height:var(--t-body-sm-lh);padding-left:18px;position:relative}
.closer .not li::before{content:"";position:absolute;left:0;top:0.62em;width:8px;height:1px;
  background:var(--accent)}
@media (max-width:820px){.closer{grid-template-columns:1fr}}

/* ---- footer ------------------------------------------------------------- */
/* Linen, not the warm off white. A full width band of near white on beige
   is the thing that was wrong in every other place it appeared. */
.site-foot{background:transparent;border-top:1px solid var(--line);
  padding-block:clamp(48px,6vw,80px) clamp(32px,4vw,48px)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,4vw,56px)}
/* The mark inherits Linen from the dark bar at the top of the page. On the
   footer's light ground that made it invisible, which is what it was. */
.site-foot .brand{color:var(--c-ink-deep)}
.foot-top .brand svg{width:auto;height:74px}
.foot-top .addr{margin-top:var(--s-5);font-size:var(--t-body-sm);
  line-height:var(--t-body-sm-lh);color:var(--text-muted)}
.foot-col h2{font-size:var(--t-label);font-weight:var(--w-medium);
  letter-spacing:var(--t-label-ls);text-transform:uppercase;color:var(--text-muted);
  margin-bottom:var(--s-4)}
.foot-col ul{list-style:none;display:grid;gap:var(--s-3)}
.foot-col a{color:var(--text);text-decoration:none;font-size:var(--t-body-sm);
  border-bottom:1px solid transparent}
.foot-col a:hover{border-bottom-color:var(--accent)}
@media (max-width:820px){.foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.foot-top{grid-template-columns:1fr}}

.risk{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line);
  padding-top:var(--s-5);font-size:var(--t-caption);line-height:var(--t-caption-lh);
  color:var(--text-muted);max-width:none}
.risk strong{color:var(--text);font-weight:var(--w-medium)}
.risk a{color:var(--accent)}
.foot-legal{margin-top:var(--s-5);display:flex;justify-content:space-between;
  gap:var(--s-5);flex-wrap:wrap;font-size:var(--t-caption);color:var(--text-muted)}


/* ==========================================================================
   Page heroes, secondary pages
   ========================================================================== */
.hero--page{padding-block:clamp(44px,7vw,96px) clamp(36px,5vw,72px)}
.hero--page .eyebrow{margin-bottom:var(--s-5)}
.hero--page h1{font-size:var(--t-display-2);line-height:var(--t-display-2-lh);
  letter-spacing:var(--t-display-2-ls);max-width:22ch}
.hero--page .lead{max-width:62ch;margin-top:var(--s-5)}
.closer-simple .sec-intro{max-width:var(--prose-max)}

/* ==========================================================================
   The book. The picture that settles what a listing costs.
   ========================================================================== */
.book{margin-top:clamp(36px,5vw,60px);display:grid;gap:3px;
  --col:minmax(0,1fr);}
.bk-head,.bk-row{display:grid;grid-template-columns:78px var(--col) 108px;
  gap:clamp(12px,2vw,24px);align-items:center}
.bk-head{font-size:var(--t-label);font-weight:var(--w-medium);
  letter-spacing:var(--t-label-ls);text-transform:uppercase;color:var(--text-muted);
  padding-bottom:var(--s-3);border-bottom:1px solid var(--line);margin-bottom:var(--s-3)}
.bk-p,.bk-v{font-variant-numeric:tabular-nums;font-size:var(--t-body-sm)}
.bk-v{text-align:right;color:var(--text-muted)}
.bk-v em{font-style:normal;display:inline-block;margin-left:10px;font-size:var(--t-label);
  letter-spacing:var(--t-label-ls);text-transform:uppercase;color:var(--accent);
  font-weight:var(--w-medium)}
.bk-bar{display:block;height:26px;background:var(--bg);position:relative;overflow:hidden}
.sec--stone .bk-bar{background:var(--c-limestone)}
.bk-bar i{display:block;height:100%;width:var(--w);background:var(--c-aubergine-tint);
  transform-origin:left center}
.bk-row.is-struck .bk-p{font-weight:var(--w-medium);color:var(--accent)}
.bk-row.is-struck .bk-bar i{background:var(--accent)}
.bk-row.is-struck .bk-v{color:var(--text)}
.js .book[data-book] .bk-bar i{transform:scaleX(0)}
.js .book.drawn .bk-bar i{transform:scaleX(1);
  transition:transform 720ms var(--ease) calc(var(--i) * 70ms)}
@media (prefers-reduced-motion:reduce){
  .js .book[data-book] .bk-bar i,.js .book.drawn .bk-bar i{transform:scaleX(1);transition:none}}
.bk-note{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line);
  font-size:var(--t-caption);line-height:var(--t-caption-lh);color:var(--text-muted);
  max-width:70ch}
@media (max-width:620px){
  .bk-head,.bk-row{grid-template-columns:62px var(--col) 74px;gap:10px}
  .bk-v em{display:block;margin:3px 0 0}
}

/* ==========================================================================
   Long form lists on the secondary pages
   ========================================================================== */
.stages-long{margin-top:clamp(40px,6vw,72px);list-style:none;counter-reset:st}
.stages-long > li{counter-increment:st;display:grid;
  grid-template-columns:180px minmax(0,1fr);gap:clamp(20px,4vw,56px);
  padding:clamp(26px,3.4vw,40px) 0;border-top:1px solid var(--line)}
.stages-long > li:last-child{border-bottom:1px solid var(--line)}
.st-when{font-size:var(--t-label);font-weight:var(--w-medium);
  letter-spacing:var(--t-label-ls);text-transform:uppercase;color:var(--accent);
  font-variant-numeric:tabular-nums}
.stages-long h3{font-size:var(--t-h2);line-height:var(--t-h2-lh);
  letter-spacing:var(--t-h2-ls);font-weight:var(--w-medium)}
.stages-long p{margin-top:var(--s-4);color:var(--text-muted);max-width:62ch}
.st-ours{border-left:2px solid var(--accent);padding-left:var(--s-4);color:var(--text)!important}
.st-ours span{display:block;font-size:var(--t-label);font-weight:var(--w-medium);
  letter-spacing:var(--t-label-ls);text-transform:uppercase;color:var(--text-muted);
  margin-bottom:var(--s-2)}
@media (max-width:760px){.stages-long > li{grid-template-columns:1fr;gap:var(--s-4)}}

/* Five items. A three column grid leaves a dead cell, so this is a list of rows. */
.wrong{margin-top:clamp(36px,5vw,60px);list-style:none;counter-reset:wr}
.wrong > li{counter-increment:wr;display:grid;
  grid-template-columns:56px minmax(0,1fr) minmax(0,1.35fr);
  gap:clamp(16px,3vw,44px);align-items:baseline;padding:clamp(22px,3vw,32px) 0;
  border-top:1px solid rgb(var(--ground-rgb) / .2)}
.wrong > li:last-child{border-bottom:1px solid rgb(var(--ground-rgb) / .2)}
.wrong > li::before{content:"0" counter(wr);font-size:var(--t-label);
  letter-spacing:var(--t-label-ls);color:var(--c-aubergine-tint);opacity:.75;
  font-variant-numeric:tabular-nums;font-weight:var(--w-medium)}
.wrong h3{font-size:var(--t-h2);line-height:var(--t-h2-lh);letter-spacing:var(--t-h2-ls);
  font-weight:var(--w-medium);color:var(--c-chalk)}
.wrong p{color:var(--c-aubergine-tint);font-size:var(--t-body-sm);
  line-height:var(--t-body-sm-lh);max-width:52ch}
@media (max-width:820px){
  .wrong > li{grid-template-columns:42px minmax(0,1fr);row-gap:var(--s-3)}
  .wrong p{grid-column:2}
}

.beliefs{margin-top:clamp(36px,5vw,60px);list-style:none;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line)}
@media (max-width:720px){.beliefs{grid-template-columns:1fr}}
.beliefs > li{background:var(--bg-raised);padding:clamp(24px,3vw,34px)}
.beliefs h3{font-size:var(--t-h3);line-height:var(--t-h3-lh);letter-spacing:var(--t-h3-ls);
  font-weight:var(--w-medium)}
.beliefs p{margin-top:var(--s-3);color:var(--text-muted);font-size:var(--t-body-sm);
  line-height:var(--t-body-sm-lh)}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(32px,6vw,88px);align-items:start}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;gap:var(--s-8)}}
.cform{display:grid;gap:var(--s-5)}
.fld{display:grid;gap:var(--s-2)}
.fld label{font-size:var(--t-label);font-weight:var(--w-medium);
  letter-spacing:var(--t-label-ls);text-transform:uppercase;color:var(--text-muted)}
.fld label span{text-transform:none;letter-spacing:0;font-weight:var(--w-regular)}
.fld input,.fld textarea,.fld select{font:inherit;font-size:var(--t-body);color:var(--text);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;width:100%;transition:border-color var(--dur-fast) var(--ease)}
.fld textarea{resize:vertical;line-height:1.55}
/* A menu wears the same box as an input, with our own chevron so the two do
   not sit side by side looking like different form systems. */
.fld select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23666' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px}
.fld input:hover,.fld textarea:hover,.fld select:hover{border-color:var(--text-muted)}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--accent);outline:none;
  box-shadow:0 0 0 3px var(--c-aubergine-tint)}
.cform .btn{justify-self:start}
.fnote{font-size:var(--t-caption);color:var(--text-muted)}
.cside{display:grid;gap:var(--s-7)}
.cblock h2{font-size:var(--t-label);font-weight:var(--w-medium);
  letter-spacing:var(--t-label-ls);text-transform:uppercase;color:var(--text-muted);
  padding-bottom:var(--s-3);border-bottom:1px solid var(--line);margin-bottom:var(--s-4)}
.cblock p{font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh)}
.cblock .muted{color:var(--text-muted)}


/* ==========================================================================
   About: a third ground so the page is not two bands alternating
   ========================================================================== */
/* This was the near black used for body text, not one of the five brand
   colours, and next to Petrol Ink it read as a third dark. */
.sec--ink{background:var(--c-ink-deep);color:var(--c-chalk)}
.sec--ink .sec-title{color:var(--c-chalk)}
.sec--ink .sec-intro{color:var(--c-pewter)}

/* Figures band. Numbers do the talking, so they are set large and tabular. */
.statband{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line)}
.stats > li{background:var(--bg);padding:clamp(26px,3.6vw,44px) clamp(18px,2.4vw,32px);
  display:flex;flex-direction:column;gap:var(--s-3)}
.s-v{font-size:clamp(34px,4.6vw,60px);line-height:.95;letter-spacing:-.04em;
  font-weight:var(--w-regular);font-variant-numeric:tabular-nums}
.s-k{font-size:var(--t-label);font-weight:var(--w-medium);letter-spacing:var(--t-label-ls);
  text-transform:uppercase;color:var(--text-muted);line-height:1.5}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Three facts rather than four (About, 9 October 2026): three columns, and one
   per row on a phone, so no empty cell shows the rule colour. */
.stats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){.stats--3{grid-template-columns:1fr}}

/* Venues. Fourteen codes set as a typographic field, which is the scale of the
   firm shown rather than claimed. */
.venues{margin-top:clamp(40px,5vw,64px);list-style:none;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px;
  background:rgb(var(--ground-rgb) / .14);border:1px solid rgb(var(--ground-rgb) / .14)}
.venues > li{background:var(--c-graphite);padding:clamp(18px,2.2vw,26px);
  display:flex;flex-direction:column;gap:6px;
  transition:background var(--dur-base) var(--ease)}
.venues > li:hover{background:var(--c-graphite)}
.v-code{font-size:clamp(20px,2.2vw,27px);line-height:1;letter-spacing:-.03em;
  font-weight:var(--w-medium)}
.v-city{font-size:var(--t-label);letter-spacing:var(--t-label-ls);text-transform:uppercase;
  color:var(--c-pewter)}

/* What a client gets. Four rows, hairline separated, no dead cells. */
.gives{margin-top:clamp(36px,5vw,60px);list-style:none;counter-reset:gv}
.gives > li{counter-increment:gv;display:grid;
  grid-template-columns:56px minmax(0,1fr) minmax(0,1.3fr);gap:clamp(16px,3vw,48px);
  align-items:baseline;padding:clamp(24px,3vw,36px) 0;border-top:1px solid var(--line)}
.gives > li:last-child{border-bottom:1px solid var(--line)}
.gives > li::before{content:"0" counter(gv);font-size:var(--t-label);
  letter-spacing:var(--t-label-ls);color:var(--accent);font-weight:var(--w-medium);
  font-variant-numeric:tabular-nums}
.gives h3{font-size:var(--t-h2);line-height:var(--t-h2-lh);letter-spacing:var(--t-h2-ls);
  font-weight:var(--w-medium)}
.gives p{color:var(--text-muted);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);
  max-width:52ch}
@media (max-width:820px){
  .gives > li{grid-template-columns:42px minmax(0,1fr);row-gap:var(--s-3)}
  .gives p{grid-column:2}
}

/* A single line, set large, as a break between dense sections. */
.sec--line{padding-block:clamp(56px,8vw,120px)}
.bigline{font-size:clamp(28px,4.4vw,58px);line-height:1.06;letter-spacing:-.035em;
  color:var(--c-chalk);max-width:24ch;text-wrap:balance}


/* ==========================================================================
   What we do: commitment against liquidity
   ========================================================================== */
.matrix-head{max-width:var(--prose-max)}
.matrix{margin-top:clamp(40px,5vw,64px);display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:900px){.matrix{grid-template-columns:1fr;gap:var(--s-7)}}

.mx-plot{position:relative;aspect-ratio:1.28;border:1px solid var(--line);background:var(--bg);
  padding:clamp(30px,4vw,46px)}
.mx-grid{position:absolute;inset:clamp(30px,4vw,46px);
  background-image:linear-gradient(to right,var(--line) 1px,transparent 1px),
    linear-gradient(to top,var(--line) 1px,transparent 1px);
  background-size:25% 25%;opacity:.55}
.mx-ax{position:absolute;font-size:var(--t-label);font-weight:var(--w-medium);
  letter-spacing:var(--t-label-ls);text-transform:uppercase;color:var(--text-muted);
  white-space:nowrap}
.mx-ax-y {top:12px;    left:16px}
.mx-ax-y2{bottom:38px; left:16px}
.mx-ax-x {bottom:12px; left:16px}
.mx-ax-x2{bottom:12px; right:16px}

.mx-pts{position:absolute;inset:clamp(30px,4vw,46px)}
.pt{position:absolute;transform:translate(-50%,50%);background:none;border:0;padding:0;
  cursor:pointer;display:flex;align-items:center;gap:10px;white-space:nowrap}
.pt-dot{width:13px;height:13px;border-radius:50%;background:var(--bg);flex:none;
  box-shadow:inset 0 0 0 2px var(--text-muted);
  transition:box-shadow var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease)}
.pt-label{font-size:var(--t-body-sm);font-weight:var(--w-medium);color:var(--text-muted);
  transition:color var(--dur-fast) var(--ease)}
.pt:hover .pt-dot{box-shadow:inset 0 0 0 2px var(--text);transform:scale(1.15)}
.pt:hover .pt-label{color:var(--text)}
.pt[aria-selected="true"] .pt-dot{background:var(--accent);
  box-shadow:0 0 0 5px var(--bg),0 0 0 6px var(--accent)}
.pt[aria-selected="true"] .pt-label{color:var(--accent)}
.js .mx-pts .pt{opacity:0;transform:translate(-50%,50%) scale(.85)}
.js .mx-pts.drawn .pt{opacity:1;transform:translate(-50%,50%) scale(1);
  transition:opacity 420ms var(--ease),transform 420ms var(--ease)}
.js .mx-pts.drawn .pt:nth-child(2){transition-delay:90ms}
.js .mx-pts.drawn .pt:nth-child(3){transition-delay:180ms}
.js .mx-pts.drawn .pt:nth-child(4){transition-delay:270ms}
@media (prefers-reduced-motion:reduce){
  .js .mx-pts .pt{opacity:1;transform:translate(-50%,50%)}
  .js .mx-pts.drawn .pt{transition:none}}
@media (max-width:560px){.pt-label{display:none}}

.mx-panel{border-top:2px solid var(--accent);padding-top:var(--s-5)}
.mx-panel h3{font-size:var(--t-h1);line-height:var(--t-h1-lh);letter-spacing:var(--t-h1-ls);
  font-weight:var(--w-medium)}
.mx-what{margin-top:var(--s-3);color:var(--text-muted)}
.mx-facts{margin-top:var(--s-6);display:grid;gap:0}
.mx-facts > div{padding:var(--s-4) 0;border-top:1px solid var(--line)}
.mx-facts dt{font-size:var(--t-label);font-weight:var(--w-medium);
  letter-spacing:var(--t-label-ls);text-transform:uppercase;color:var(--text-muted);
  margin-bottom:6px}
.mx-facts dd{font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh)}
.bigline-sub{margin-top:var(--s-6);color:var(--c-aubergine-tint);font-size:var(--t-body-lg);
  line-height:var(--t-body-lg-lh);max-width:56ch}

/* ==========================================================================
   How we work: anatomy of a note
   ========================================================================== */
.note-x{margin-top:clamp(36px,5vw,60px);display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:900px){.note-x{grid-template-columns:1fr;gap:var(--s-7)}}
.nt-doc{background:var(--bg);border:1px solid var(--line);display:grid}
.nt-doc-head{display:flex;justify-content:space-between;padding:16px 22px;
  border-bottom:1px solid var(--line);font-size:var(--t-label);font-weight:var(--w-medium);
  letter-spacing:var(--t-label-ls);text-transform:uppercase;color:var(--text-muted)}
.nt-part{display:grid;grid-template-columns:46px minmax(0,1fr);gap:16px;align-items:baseline;
  text-align:left;font:inherit;background:none;border:0;border-bottom:1px solid var(--line);
  padding:20px 22px;cursor:pointer;color:var(--text);
  transition:background var(--dur-fast) var(--ease)}
.nt-part:last-child{border-bottom:0}
.nt-part:hover{background:var(--bg-raised)}
.nt-i{font-size:var(--t-label);letter-spacing:var(--t-label-ls);color:var(--text-muted);
  font-variant-numeric:tabular-nums;font-weight:var(--w-medium)}
.nt-t{font-size:var(--t-h3);line-height:var(--t-h3-lh);letter-spacing:var(--t-h3-ls);
  font-weight:var(--w-medium)}
.nt-part[aria-selected="true"]{background:var(--c-aubergine-tint)}
.nt-part[aria-selected="true"] .nt-i{color:var(--accent)}
.nt-panel{border-top:2px solid var(--accent);padding-top:var(--s-5);position:sticky;top:120px}
.nt-panel h3{font-size:var(--t-h1);line-height:var(--t-h1-lh);letter-spacing:var(--t-h1-ls);
  font-weight:var(--w-medium)}
.nt-panel p{margin-top:var(--s-4);color:var(--text-muted);font-size:var(--t-body-lg);
  line-height:var(--t-body-lg-lh)}
@media (max-width:900px){.nt-panel{position:static}}

.steps-dark{margin-top:clamp(36px,5vw,60px);list-style:none;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgb(var(--ground-rgb) / .16);
  border:1px solid rgb(var(--ground-rgb) / .16)}
@media (max-width:760px){.steps-dark{grid-template-columns:1fr}}
.steps-dark > li{background:rgb(var(--ground-rgb) / .05);padding:clamp(24px,3vw,36px);
  display:flex;flex-direction:column;gap:var(--s-3)}
.steps-dark .k{font-size:var(--t-label);font-weight:var(--w-medium);
  letter-spacing:var(--t-label-ls);text-transform:uppercase;color:var(--accent)}
.steps-dark .k{color:var(--c-hairline)}
.steps-dark h3{font-size:var(--t-h2);line-height:var(--t-h2-lh);letter-spacing:var(--t-h2-ls);
  font-weight:var(--w-medium)}
.steps-dark p{color:rgb(var(--ground-rgb) / .74);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh)}

/* Block rather than grid. The fee schedule is stamped in here from the same
   place the Financial Services Guide stamps it, and a grid gap on top of the
   schedule's own margins spaced the two pages differently. */
.feebox{margin-top:clamp(28px,4vw,44px);border-left:2px solid var(--accent);
  padding-left:clamp(20px,3vw,32px)}
.feebox > * + *{margin-top:var(--s-4)}
.feebox p{color:var(--text-muted);max-width:62ch}

/* ==========================================================================
   Insights
   ========================================================================== */
.filters{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-bottom:clamp(28px,4vw,44px)}
.fbtn{font:inherit;font-size:var(--t-body-sm);font-weight:var(--w-medium);padding:10px 18px;
  border:1px solid var(--line);background:transparent;color:var(--text-muted);
  border-radius:var(--radius);cursor:pointer;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.fbtn:hover{color:var(--text);border-color:var(--text-muted)}
.fbtn.is-on{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}
.notes--index{margin-top:0}
/* The index holds any number of cards, so a short last row must not show the
   rule colour as a filled block (eleven cards, 9 October 2026). Here the rules
   belong to the cards rather than to the gaps between them. */
.notes--index{background:transparent;gap:0;border-bottom:0;border-left:1px solid var(--line)}
.notes--index > li{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.notes--index a[aria-disabled="true"]{cursor:default}
.notes--index a[aria-disabled="true"]:hover{background:var(--bg)}
.nt-foot{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);
  padding-top:var(--s-4);border-top:1px solid var(--line);margin-top:var(--s-4)}
.nt-foot time{font-size:var(--t-caption);color:var(--text-muted);font-variant-numeric:tabular-nums}
.nt-soon{font-size:var(--t-label);font-weight:var(--w-medium);letter-spacing:var(--t-label-ls);
  text-transform:uppercase;color:var(--text-muted)}

/* ==========================================================================
   Long form prose, and pages waiting on someone else
   ========================================================================== */
.hero--article h1{max-width:20ch}
.byline{margin-top:var(--s-5);font-size:var(--t-caption);color:var(--text-muted)}
.byline time{font-variant-numeric:tabular-nums}
/* An article's hero is the dark one every page has. The byline and the link
   back to the index were styled for a light ground and all but disappeared on
   Petrol Ink (9 October 2026). */
.hero .byline{color:rgb(var(--ground-rgb) / .66)}
.hero .eyebrow a{color:var(--c-chalk);text-decoration:none;border-bottom:1px solid rgb(var(--ground-rgb) / .4)}
.hero .eyebrow a:hover{border-bottom-color:var(--c-chalk)}
.hero--doc h1{max-width:16ch}
.prose-page{max-width:var(--prose-max)}
.prose-page > * + *{margin-top:var(--s-5)}
.prose-page h2{font-size:var(--t-h2);line-height:var(--t-h2-lh);letter-spacing:var(--t-h2-ls);
  font-weight:var(--w-medium);margin-top:clamp(38px,4.5vw,60px)}
.prose-page p{font-size:var(--t-body);line-height:1.72;color:var(--text-muted)}
.prose-page p strong{color:var(--text);font-weight:var(--w-medium)}
.prose-page .drop{font-size:var(--t-body-lg);line-height:1.64;color:var(--text)}
.prose-list{list-style:none;counter-reset:pl;display:grid;gap:var(--s-4)}
.prose-list > li{counter-increment:pl;position:relative;padding-left:38px;
  color:var(--text-muted);line-height:1.68}
.prose-list > li::before{content:"0" counter(pl);position:absolute;left:0;top:.15em;
  font-size:var(--t-label);letter-spacing:var(--t-label-ls);color:var(--accent);
  font-weight:var(--w-medium);font-variant-numeric:tabular-nums}
.prose-list strong{color:var(--text);font-weight:var(--w-medium)}
.prose-note{margin-top:clamp(38px,4.5vw,56px);padding-top:var(--s-5);
  border-top:1px solid var(--line);font-size:var(--t-caption)!important;
  line-height:var(--t-caption-lh)!important}
.prose-note a{color:var(--accent)}

.pending{border-left:2px solid var(--accent);padding-left:clamp(20px,3vw,32px);
  max-width:66ch;display:grid;gap:var(--s-4)}
.pending h2{font-size:var(--t-h2);line-height:var(--t-h2-lh);letter-spacing:var(--t-h2-ls);
  font-weight:var(--w-medium)}
.pending p{color:var(--text-muted);line-height:1.68}
.pending p strong{color:var(--text);font-weight:var(--w-medium)}
.pending--tight h2{font-size:var(--t-h3)}

/* --- named transactions ------------------------------------------------ */
/* The bar is the amount raised at offer, scaled to the largest in the list.
   There is deliberately no second bar and no percentage: any figure that
   could be read as a return is a performance claim and stays off the site. */
.deals{margin-top:clamp(36px,5vw,60px);list-style:none;border-top:1px solid var(--line)}
.deals > li{border-bottom:1px solid var(--line);padding:clamp(20px,2.6vw,28px) 0;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:var(--s-6);row-gap:var(--s-3);align-items:baseline}
.deals h3{grid-column:1;grid-row:1;font-size:var(--t-h2);line-height:var(--t-h2-lh);letter-spacing:var(--t-h2-ls);
  font-weight:var(--w-medium)}
.deals .d-meta{grid-column:1;grid-row:2;font-size:var(--t-label);letter-spacing:var(--t-label-ls);
  text-transform:uppercase;font-weight:var(--w-medium);color:var(--text-muted)}
.deals .d-amt{grid-column:2;grid-row:1/3;text-align:right;font-variant-numeric:tabular-nums;
  font-size:var(--t-h2);line-height:1.1;letter-spacing:-0.02em;font-weight:var(--w-medium)}
.deals .d-amt span{display:block;margin-top:6px;font-size:var(--t-label);
  letter-spacing:var(--t-label-ls);text-transform:uppercase;color:var(--text-muted);
  font-variant-numeric:normal}
.deals .d-bar{grid-column:1/-1;grid-row:3;position:relative;height:7px;
  background:var(--data-tint);margin-top:var(--s-4)}
.sec--stone .deals .d-bar{background:var(--c-ink-tint)}
.deals .d-bar > span{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);
  transition:width 1000ms var(--ease)}
.deals.drawn .d-bar > span{width:var(--w)}
@media (max-width:620px){
  .deals > li{grid-template-columns:1fr}
  .deals h3,.deals .d-meta,.deals .d-amt,.deals .d-bar{grid-column:1;grid-row:auto}
  .deals .d-amt{text-align:left}
  .deals .d-amt span{display:inline;margin-left:var(--s-3)}
}
@media (prefers-reduced-motion:reduce){
  .deals .d-bar > span{transition:none;width:var(--w)}
}

/* --- fee model --------------------------------------------------------- */
.fees{margin:var(--s-6) 0 var(--s-5);list-style:none;display:grid;gap:var(--s-4)}
.fees > li{display:flex;align-items:baseline;gap:var(--s-5)}
.fees .f-n{flex:none;min-width:74px;font-size:var(--t-h1);line-height:1;
  letter-spacing:-0.025em;font-weight:var(--w-medium);font-variant-numeric:tabular-nums;
  color:var(--accent)}
.fees .f-d{color:var(--text-muted);line-height:1.5}

/* --- footer address, second line --------------------------------------- */
.foot-top .addr--reg{margin-top:var(--s-4);color:var(--text-muted);max-width:46ch}
.fnote--bad{color:var(--accent);font-weight:var(--w-medium)}

/* ==========================================================================
   Colour, version 1.1
   Aubergine stays the primary and the only colour in the mark. Ink carries
   anything that is data. Brass carries editorial. Neither new colour can be
   read as a market direction, which is the constraint that decided them.
   ========================================================================== */

/* ---- brass: the editorial voice ---------------------------------------- */
.eyebrow{color:var(--edit-text)}
.sec--ink .eyebrow,.sec--data .eyebrow,.sec--accent .eyebrow{color:var(--edit-on-dark)}
.services .num{color:var(--edit-text)}
.gives > li::before{color:var(--edit-text)}
.notes .k,.notes--index .k{color:var(--edit-text)}
.stage .when{color:var(--edit-text)}
.closer .not li::before{background:var(--edit)}
.deals .d-meta{color:var(--text-muted)}
.v-city{color:var(--edit-on-dark)}
.fees .f-n{color:var(--edit-text)}

/* ---- ink: everything that carries data --------------------------------- */
.s-v{color:var(--data)}
.rail-track::after{background:var(--data)}
.dot::before{box-shadow:inset 0 0 0 2px var(--data-soft)}
.dot:hover::before{box-shadow:inset 0 0 0 2px var(--data)}
.bk-bar i{background:var(--data-tint)}
.deals .d-amt{color:var(--data)}
.deals .d-bar > span{background:var(--data)}

/* ==========================================================================
   Motion
   Everything below is applied by script and only by script. Nothing on this
   site is ever parked invisible waiting for JavaScript that might not run.
   ========================================================================== */

/* ---- reveal on scroll --------------------------------------------------- */
.rv{opacity:0;transform:translateY(14px)}
.rv-in{opacity:1;transform:none;
  transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease);
  transition-delay:var(--rv-d,0ms)}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .rv-in{transition:none}
}

/* ---- scroll progress: the aperture rule, laid on its side --------------- */
.scrollrule{position:fixed;inset:0 0 auto 0;height:2px;z-index:60;pointer-events:none;
  background:transparent}
.scrollrule > i{display:block;height:100%;width:100%;background:var(--c-ui-negative);
  transform:scaleX(0);transform-origin:left center}

/* ---- header, once you have left the top -------------------------------- */
.site-head{transition:background var(--dur-base) var(--ease),
  box-shadow var(--dur-base) var(--ease)}
/* This used to fade the bar to a pale translucent panel, which was right when
   the bar was Linen with dark links on it. The bar is Petrol Ink now and the
   type on it is Linen, so fading it turned the wordmark, Sign in and Menu
   into pale type on a pale ground the moment anybody scrolled. The bar stays
   solid. Only the shadow arrives, which is all the cue a reader needs. */
.site-head.is-stuck{background:var(--c-ink-deep);
  box-shadow:0 14px 34px -26px rgb(0 0 0 / .7)}

/* ---- cursor tracking: the underline grows from where you point --------- */
.services > li,.gives > li,.deals > li{position:relative}
.services > li::after,.gives > li::after,.deals > li::after,
.stick-list > li::after{content:"";position:absolute;
  left:0;right:0;bottom:-1px;height:2px;background:var(--c-ui-negative);
  transform:scaleX(0);transform-origin:var(--mx,50%) 50%;
  transition:transform var(--dur-base) var(--ease);pointer-events:none}
.services > li:hover::after,.gives > li:hover::after,.deals > li:hover::after,
.services > li:focus-within::after{transform:scaleX(1)}
.deals > li::after{background:var(--data)}
.gives > li::after{background:var(--edit)}
@media (prefers-reduced-motion:reduce){
  .services > li::after,.gives > li::after,.deals > li::after{transition:none}
}

/* ---- figures that count up --------------------------------------------- */
.stats > li{position:relative}
.stats > li::before{content:"";position:absolute;left:clamp(18px,2.4vw,32px);
  right:clamp(18px,2.4vw,32px);top:0;height:2px;background:var(--edit);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur-slow) var(--ease);transition-delay:var(--rv-d,0ms)}
.statband.drawn .stats > li::before{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .stats > li::before{transform:scaleX(1);transition:none}
}

/* ==========================================================================
   The exchange strip
   Fourteen codes, running. It is a list of venues, never a list of prices:
   nothing here moves up or down and nothing here is a number.
   ========================================================================== */
/* Petrol Ink, not the near black used for body text. */
.strip{background:var(--c-ink-deep);color:var(--c-chalk);overflow:hidden;
  margin-top:clamp(40px,5vw,64px);
  border-block:1px solid rgb(var(--ground-rgb) / .14);position:relative}
.strip::before,.strip::after{content:"";position:absolute;top:0;bottom:0;width:clamp(40px,8vw,120px);
  z-index:2;pointer-events:none}
/* These faded the ends of the ticker to the near black the strip used to sit
   on. On Petrol Ink they were a dark smear over the first and last cell. */
.strip::before{left:0;background:linear-gradient(90deg,var(--c-ink-deep),transparent)}
.strip::after{right:0;background:linear-gradient(270deg,var(--c-ink-deep),transparent)}
.strip-track{display:flex;width:max-content;animation:strip 46s linear infinite}
.strip:hover .strip-track,.strip:focus-within .strip-track{animation-play-state:paused}
@keyframes strip{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.strip .venues{margin:0;display:flex;background:none;border:0;gap:0;
  grid-template-columns:none}
.strip .venues > li{background:none;border-right:1px solid rgb(var(--ground-rgb) / .14);
  padding:clamp(20px,2.4vw,30px) clamp(26px,3vw,44px);flex:none;min-width:168px}
.strip .venues > li:hover{background:rgb(var(--secondary-rgb) / .55)}
@media (prefers-reduced-motion:reduce){
  .strip-track{animation:none;width:100%;flex-wrap:wrap}
  .strip .venues{flex-wrap:wrap}
  .strip [data-clone]{display:none}
}

/* ==========================================================================
   Dark data section. One per page at most, and only where the page has an
   actual chart to show. It is the visual full stop between two light halves.
   ========================================================================== */
.sec--data{background:var(--bg-data);color:var(--c-chalk)}
.sec--data .sec-title{color:var(--c-chalk)}
.sec--data .sec-intro{color:var(--data-on-dark)}
.sec--data .bk-head{color:var(--data-on-dark)}
.sec--data .bk-bar{background:rgb(var(--ground-rgb) / .08)}
.sec--data .bk-bar i{background:var(--data)}
.sec--data .bk-p{color:var(--c-chalk)}
.sec--data .bk-v{color:var(--data-on-dark)}
.sec--data .bk-v em{color:var(--data-on-dark)}
.sec--data .bk-row.is-struck .bk-p{color:var(--c-brass-light)}
.sec--data .bk-row.is-struck .bk-bar i{background:var(--c-brass)}
.sec--data .bk-row.is-struck .bk-v{color:var(--c-chalk)}
.sec--data .bk-note{border-top-color:rgb(var(--ground-rgb) / .16);color:var(--data-on-dark)}
.sec--data .link{color:var(--c-brass-light)}
.sec--data .link:hover{border-bottom-color:var(--c-brass-light)}

/* One more brass moment per page: the closing call to action. */
.closer .not .k{color:var(--edit-text)}
.rail-sides .adm{color:var(--edit-text)}
.notes .arrow,.notes--index .arrow{color:var(--edit-text)}
.notes a:hover .arrow{color:var(--accent)}

/* ==========================================================================
   The headline typing in
   Only applied once the script has split the line, so with no script the
   sentence is on the page in full from the first paint.
   ========================================================================== */
.tw .tw-w{white-space:nowrap}
.tw .tw-c{opacity:0;position:relative}
.tw .tw-c.tw-on{opacity:1}
.tw .tw-c.is-caret::after{content:"";position:absolute;right:-0.07em;top:.06em;bottom:.14em;
  width:.045em;background:var(--accent);animation:caret 620ms steps(1) infinite}
@keyframes caret{0%,50%{opacity:1}50.01%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .tw .tw-c{opacity:1}
  .tw .tw-c.is-caret::after{display:none}
}

/* Sign in sits on the Petrol Ink bar, so it is reversed out like everything
   else up there. Quiet next to the CTA, never invisible. */
.head-signin{font-size:var(--t-body-sm);color:rgb(var(--ground-rgb) / .62);
  margin-right:var(--s-5);text-decoration:none}
.head-signin:hover{color:var(--c-chalk)}
@media (max-width:860px){.head-signin{display:none}}


/* ==========================================================================
   Register: the account opening wizard. Same field system as the contact
   form (.fld), plus a progress line, choice tiles, document cards and a busy
   state. Zero radius, hairlines, aubergine for the chosen state. No green and
   no red: a completed document card is aubergine like everything else.
   Rebuilt 24 September 2026 from client feedback. Seven short pages instead
   of four long ones, and the documents page reads as four things rather than
   as a process.
   ========================================================================== */
.reg-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s-9);align-items:start}
@media (max-width:860px){.reg-grid{grid-template-columns:1fr;gap:var(--s-8)}}

/* The progress line. Seven steps will not fit as a rail of labelled columns on
   a phone, so it is one line of text over a hairline track. */
.reg-prog{display:grid;gap:var(--s-2);margin-bottom:var(--s-7)}
.reg-prog-txt{display:flex;gap:var(--s-3);align-items:baseline;
  font-size:var(--t-caption);color:var(--text-muted)}
.reg-prog-txt b{font-size:var(--t-label);letter-spacing:var(--t-label-ls);
  text-transform:uppercase;font-weight:var(--w-medium);color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.reg-prog-track{height:2px;background:var(--line);position:relative;overflow:hidden}
.reg-prog-track span{position:absolute;inset:0 auto 0 0;background:var(--accent);
  transition:width var(--dur-slow,.5s) var(--ease)}

.reg-form{display:grid;gap:var(--s-5)}
.reg-pane{display:none;gap:var(--s-5)}
.reg-pane.active{display:grid}
.reg-pane [hidden]{display:none}
.reg-h{font-size:var(--t-h2);line-height:var(--t-h2-lh);letter-spacing:var(--t-h2-ls);font-weight:var(--w-regular)}
.reg-p{font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);color:var(--text-muted);max-width:var(--measure)}
.reg-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
.reg-three{display:grid;grid-template-columns:1.2fr 1fr .8fr;gap:var(--s-5)}
@media (max-width:600px){.reg-two,.reg-three{grid-template-columns:1fr}}

/* Choice tiles. Two across where there is room, because five account types in
   one column pushes the button below the fold on a laptop. */
.reg-choice{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
@media (max-width:520px){.reg-choice{grid-template-columns:1fr}}
.reg-choice>button{font:inherit;text-align:left;background:var(--bg);color:var(--text);
  border:1px solid var(--line);border-radius:var(--radius);padding:var(--s-4) var(--s-5);
  display:grid;gap:var(--s-1);align-content:start;cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.reg-choice>button b{font-weight:var(--w-medium)}
.reg-choice>button span{font-size:var(--t-caption);color:var(--text-muted)}
.reg-choice>button:hover{border-color:var(--text-muted)}
.reg-choice>button[aria-pressed="true"]{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent)}
.reg-choice>button[aria-pressed="true"] span{color:var(--c-aubergine-tint)}
.reg-choice>button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

/* Address. One box that finds the address, with the four plain boxes behind
   it. With no lookup key configured the four boxes are simply there. */
.reg-addr{display:grid;gap:var(--s-5)}
.reg-addr-fields{display:grid;gap:var(--s-5)}
.reg-addr-fields[hidden]{display:none}
.reg-lookup{position:relative}
.reg-sugg{list-style:none;margin:0;padding:0;position:absolute;top:100%;left:0;right:0;z-index:20;
  background:var(--bg);border:1px solid var(--line);border-top:0;max-height:260px;overflow:auto;
  box-shadow:0 12px 28px rgba(0,0,0,.08)}
.reg-sugg[hidden]{display:none}
.reg-sugg li{padding:12px 16px;cursor:pointer;font-size:var(--t-body-sm);
  border-top:1px solid var(--line)}
.reg-sugg li:first-child{border-top:0}
.reg-sugg li:hover,.reg-sugg li:focus{background:var(--c-aubergine-tint);outline:none}
.reg-manual{justify-self:start;font:inherit;font-size:var(--t-caption);background:none;border:0;
  padding:0;color:var(--text-muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.reg-manual:hover{color:var(--text)}

/* Documents. Four cards, each its own drop target, each ticking when a file
   lands. Three people who opened an account said the old page made this look
   like a process; it has to read as four things and nothing else. */
.reg-docs{display:grid;gap:var(--s-3)}
.reg-docs[hidden]{display:none}
.reg-doc{position:relative;display:grid;grid-template-columns:auto 1fr auto;
  gap:var(--s-4);align-items:center;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--s-4) var(--s-5);cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.reg-doc:hover,.reg-doc.over{border-color:var(--accent)}
.reg-doc .ico{width:26px;height:26px;color:var(--text-muted);flex:none}
.reg-doc .txt{display:grid;gap:2px;min-width:0}
.reg-doc .txt b{font-weight:var(--w-medium)}
.reg-doc .txt>span{font-size:var(--t-caption);color:var(--text-muted);
  line-height:1.45;overflow-wrap:anywhere}
.reg-doc .mark{width:22px;height:22px;border:1px solid var(--line);border-radius:var(--radius);flex:none}
.reg-doc input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.reg-doc:focus-within{outline:2px solid var(--focus-ring);outline-offset:3px}
.reg-doc.filled{border-color:var(--accent)}
.reg-doc.filled .ico{color:var(--accent)}
.reg-doc.filled .mark{background:var(--accent);border-color:var(--accent);position:relative}
.reg-doc.filled .mark::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;
  border:solid var(--text-on-accent);border-width:0 1.5px 1.5px 0;transform:rotate(43deg)}

/* "I will do this later". A quiet way out, not a third equal choice: attaching
   the documents is the ordinary path and should not have to be chosen. */
.reg-later{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);align-items:baseline;
  font-size:var(--t-caption);color:var(--text-muted)}
.reg-later button{font:inherit;background:none;border:0;padding:0;color:var(--text-muted);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.reg-later button:hover{color:var(--text)}
.reg-later button[aria-pressed="true"]{color:var(--accent);font-weight:var(--w-medium);text-decoration:none}
.reg-later button[aria-pressed="true"]::before{content:"\2713\00a0"}

.reg-bank{display:grid;gap:var(--s-5)}
.reg-bank[hidden]{display:none}

/* Tick boxes, laid out like the tiles so the page keeps one rhythm. */
.reg-check{border:0;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
@media (max-width:520px){.reg-check{grid-template-columns:1fr}}
.reg-check legend{font-size:var(--t-label);font-weight:var(--w-medium);
  letter-spacing:var(--t-label-ls);text-transform:uppercase;color:var(--text-muted);
  padding:0;margin-bottom:var(--s-2);grid-column:1/-1}
.reg-check label{display:flex;gap:var(--s-3);align-items:center;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--radius);padding:12px var(--s-4);
  font-size:var(--t-body-sm);transition:border-color var(--dur-fast) var(--ease)}
.reg-check label:hover{border-color:var(--text-muted)}
.reg-check input{accent-color:var(--accent);width:16px;height:16px;flex:none}
.reg-check label:has(input:checked){border-color:var(--accent)}

.fld input[type=file]{padding:12px;cursor:pointer}
.reg-pw{position:relative}
.reg-pw input{padding-right:72px}
.reg-pwtoggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);font:inherit;
  font-size:var(--t-caption);background:none;border:0;color:var(--text-muted);cursor:pointer;padding:8px 10px}
.reg-pwtoggle:hover{color:var(--text)}
.reg-pwnote{font-size:var(--t-caption);color:var(--text-muted);min-height:1.2em}
.reg-pwnote.warn{color:var(--caution,#8A6A1F)}
.reg-pwnote.ok{color:var(--accent)}

.fld.invalid input,.fld.invalid select{border-color:var(--accent);box-shadow:0 0 0 3px var(--c-aubergine-tint)}
/* A field we will check rather than one that stops the application. J, 20
   September 2026: a BSB with a digit missing is saved as typed and flagged for
   an adviser; it never blocks the applicant. */
.fld.check input,.fld.check select{border-color:var(--caution,#8A6A1F)}
.fld.check::after{content:"We will check this with you.";display:block;margin-top:6px;
  font-size:var(--t-caption);color:var(--text-muted)}
.reg-err{display:none;font-size:var(--t-caption);color:var(--accent);font-weight:var(--w-medium)}
.reg-err.show{display:block}
.reg-nav{display:flex;gap:var(--s-3);align-items:center}
#wiz-back{display:none}
#wiz-back.show{display:inline-flex}
.btn[aria-busy="true"]{opacity:.65;cursor:progress}
.reg-done[hidden]{display:none}
.reg-done{display:grid;gap:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--line)}
.reg-done h2{font-size:var(--t-h2);line-height:var(--t-h2-lh);letter-spacing:var(--t-h2-ls);font-weight:var(--w-regular)}
.reg-done p{max-width:var(--measure)}
.reg-done ul{margin:0 0 0 1.2em;color:var(--text-muted);font-size:var(--t-body-sm)}

/* ==========================================================================
   Homepage narrative components.
   The page argues a case now rather than explaining a mechanism, so it needs
   three things the old layout did not have: a thesis statement, a numbered
   list of reasons, and a two column split for a claim beside a pull quote.
   Guidelines section 5: square corners, hairlines, no gradients.
   ========================================================================== */

.thesis{max-width:20ch}
.sec--stone .sec-intro + .sec-intro{margin-top:var(--s-5)}

/* The reasons. Guidelines section 6, stat row logic applied to prose: mono
   figure, hairline division, generous air between items. */
.cases{margin-top:clamp(40px,6vw,72px);list-style:none;display:grid;gap:0}
/* ==========================================================================
   The commitments. A list of four or five paragraphs is a wall of text however
   it is set, so the heading and a counter hold still on the left while the
   commitments move past on the right and the one you are reading lights up.
   Nothing is hidden: with no script every item is at full strength.
   ========================================================================== */
.stick{margin-top:clamp(34px,4.4vw,60px);display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(32px,6vw,90px);align-items:start}
.stick-side{position:sticky;top:112px;align-self:start}
.stick-side .sec-title{max-width:13ch}
.stick-count{margin-top:clamp(24px,3vw,40px);font-family:var(--font-mono);
  font-size:12px;letter-spacing:.22em;color:var(--c-hairline);
  display:flex;align-items:baseline;gap:10px}
.stick-count .n{font-size:clamp(30px,3.4vw,44px);letter-spacing:-.01em;
  color:var(--c-chalk);line-height:1}
.stick-bar{margin-top:var(--s-4);height:1px;width:min(100%,220px);
  background:rgb(var(--ground-rgb) / .24);overflow:hidden}
.stick-bar i{display:block;height:100%;width:100%;background:var(--c-hairline);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur-base) var(--ease)}

.stick-list{list-style:none;display:grid;gap:0;margin:0;padding:0}
.stick-list > li{position:relative;display:grid;
  grid-template-columns:clamp(46px,5.5vw,86px) minmax(0,1fr);
  gap:0 clamp(16px,2.6vw,40px);padding:clamp(28px,3.6vw,44px) 0;
  border-top:1px solid rgb(var(--ground-rgb) / .2)}
.stick-list > li:last-child{border-bottom:1px solid rgb(var(--ground-rgb) / .2)}
.stick-list .num{grid-column:1;grid-row:1 / span 2;align-self:start;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.18em;
  color:var(--c-hairline);padding-top:7px;
  transition:color var(--dur-base) var(--ease)}
.stick-list h3{grid-column:2;grid-row:1;font-size:clamp(20px,2.2vw,26px);
  line-height:1.26;font-weight:400;letter-spacing:-.012em;color:var(--c-chalk);
  max-width:30ch;text-wrap:balance}
.stick-list p{grid-column:2;grid-row:2;margin-top:var(--s-3);
  color:rgb(var(--ground-rgb) / .7);font-size:var(--t-body);
  line-height:var(--t-body-lh);max-width:64ch}
/* The lit state. Only applied once the script is running, so a page without
   it shows everything at full strength rather than everything dimmed. */
.js .stick-list.live > li{opacity:.56;transition:opacity var(--dur-base) var(--ease)}
.js .stick-list.live > li.is-on{opacity:1}
.js .stick-list.live > li.is-on .num{color:var(--c-chalk)}
@media (prefers-reduced-motion:reduce){
  .js .stick-list.live > li{opacity:1}
  .stick-bar i{transition:none}
}
@media (max-width:900px){
  .stick{grid-template-columns:1fr;gap:var(--s-6)}
  .stick-side{position:static}
  .stick-count,.stick-bar{display:none}
}
@media (max-width:640px){
  .stick-list > li{grid-template-columns:1fr;gap:var(--s-2)}
  .stick-list .num,.stick-list h3,.stick-list p{grid-column:1;grid-row:auto}
  .stick-list .num{padding-top:0}
}

/* A claim beside a pull quote. The quote is the one place the page raises its
   voice, so it gets the display face and nothing else competes with it. */
.split{margin-top:clamp(36px,5vw,64px);display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,6vw,88px);align-items:start}
.split > div > p{font-size:var(--t-body);line-height:var(--t-body-lh);
  max-width:60ch;color:var(--text-muted)}
.split > div > p + p{margin-top:var(--s-4)}
.split > div > p strong{color:var(--text);font-weight:var(--w-medium)}
.sec--accent .split > div > p{color:rgb(var(--ground-rgb) / .74)}
.sec--accent .split > div > p strong{color:var(--c-chalk)}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:var(--s-6)}}


/* ==========================================================================
   Interface tokens for the two things on this page a reader can operate.
   A component written once has to work on Linen and on Petrol Ink, so the
   colours it uses are named here and flipped by the section, rather than
   every rule being written twice.
   ========================================================================== */
/* --ui-btn is the section's own ground. A cell that does not set it shows
   the container's hairline colour instead, which turns a row of divided
   cells into one solid bar. That is what the year rail was doing. */
.sec{--ui-line:var(--line);--ui-fg:var(--text);--ui-mut:var(--text-muted);
  --ui-fill:var(--c-limestone);--ui-sel:var(--c-ink-deep);--ui-selfg:var(--c-chalk);
  --ui-mark:var(--c-ink);--ui-btn:var(--c-surface)}
.sec--accent{--ui-line:rgb(var(--ground-rgb) / .26);--ui-fg:var(--c-chalk);
  --ui-mut:rgb(var(--ground-rgb) / .72);--ui-fill:rgb(var(--ground-rgb) / .07);
  --ui-sel:var(--c-chalk);--ui-selfg:var(--c-ink-deep);--ui-mark:var(--c-hairline);
  --ui-btn:var(--c-ink-deep)}
/* Sage Mist, at the weight the kit gives it, so the dark panels are not one
   flat field either. */
.sec--accent .opanel{background:rgb(var(--ground-rgb) / .04)}
/* On Petrol Ink the body colour is a dark grey, which is invisible. Any
   prose in a reversed section reverses with it. */
.sec--accent .sec-intro,.sec--accent .lead{color:rgb(var(--ground-rgb) / .76)}
.sec--accent .sec-intro strong,.sec--accent .lead strong{color:var(--c-chalk)}
.sec--accent .sec-title{color:var(--c-chalk)}

.ask{margin-top:clamp(34px,4.6vw,58px);font-family:var(--font-mono);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ui-mark)}

/* ---- the rail: a row of pressable cells, hairline separated ------------- */
.rail-x{margin-top:var(--s-4);display:flex;flex-wrap:wrap;gap:1px;
  background:var(--ui-line);border:1px solid var(--ui-line)}
.rail-x button{flex:1 1 0;min-width:74px;font:inherit;font-family:var(--font-mono);
  font-size:13px;letter-spacing:.04em;background:var(--ui-btn);color:var(--ui-fg);
  border:0;border-radius:0;padding:15px 6px;cursor:pointer;text-align:center;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.rail-x button:hover{background:var(--ui-fill)}
.rail-x button[aria-selected="true"]{background:var(--ui-sel);color:var(--ui-selfg)}
.rail-x button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-4px}
.rail-x--steps button{flex:1 1 180px;min-width:0;text-align:left;
  padding:16px clamp(12px,1.6vw,20px);display:grid;gap:6px;
  font-family:var(--font-sans);font-size:var(--t-body-sm);letter-spacing:0}
.rail-x--steps button .n{font-family:var(--font-mono);font-size:11px;
  letter-spacing:.22em;color:var(--ui-mark)}
.rail-x--steps button[aria-selected="true"] .n{color:inherit;opacity:.66}

/* ---- the panel underneath ---------------------------------------------- */
.opanel{background:var(--ui-btn);border:1px solid var(--ui-line);border-top:0;
  padding:clamp(22px,2.6vw,34px) clamp(20px,2.6vw,36px) clamp(24px,2.8vw,36px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:820px){.opanel{grid-template-columns:1fr;gap:var(--s-6)}}
.opanel h3{font-size:clamp(19px,2.1vw,25px);line-height:1.26;font-weight:400;
  letter-spacing:-.012em;color:var(--ui-fg);max-width:26ch}
.opanel p{margin-top:var(--s-3);color:var(--ui-mut);font-size:var(--t-body-sm);
  line-height:var(--t-body-sm-lh);max-width:56ch}
.opanel .kv{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ui-mark);display:block;margin-bottom:var(--s-2)}
/* The distance to the date is the thing the reader is working out, so it is
   set as a figure rather than buried in a sentence. */
.opanel .figure{display:block;font-size:clamp(34px,4.6vw,60px);line-height:1;
  font-weight:300;letter-spacing:-.03em;color:var(--ui-fg);margin:2px 0 var(--s-5)}
.opanel .figure small{font-size:clamp(15px,1.5vw,19px);letter-spacing:0;
  color:var(--ui-mut);margin-left:10px}
.opanel .swap{animation:oswap var(--dur-base) var(--ease) both}
@keyframes oswap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.opanel .swap{animation:none}}

/* the holdings that mature in the chosen year */
.olist{list-style:none;display:grid;gap:0}
.olist li{padding:var(--s-3) 0;border-top:1px solid var(--ui-line)}
.olist li:first-child{border-top:0;padding-top:0}
.olist .nm{display:block;color:var(--ui-fg);font-size:var(--t-body-sm);
  line-height:1.4}
.olist .meta{display:block;margin-top:5px;font-family:var(--font-mono);
  font-size:11px;letter-spacing:.1em;color:var(--ui-mut)}

/* ---- the schedule: coupon dates as ticks, face value as the block ------- */
.sched{margin-top:clamp(22px,2.8vw,34px)}
.sched-track{position:relative;height:34px}
.sched-track::before{content:"";position:absolute;left:0;right:0;top:16px;height:1px;
  background:var(--ui-line)}
.sched-track i{position:absolute;top:10px;width:1px;height:13px;
  background:var(--c-ink);opacity:0;
  transition:opacity 320ms var(--ease)}
.sched-track.drawn i{opacity:.85}
/* The one moment on the page worth pointing at, so it takes the Signal the
   kit reserves for about three per cent of a page. */
.sched-track b{position:absolute;top:2px;right:0;width:4px;height:29px;
  background:var(--c-ui-negative)}
.sched-foot{margin-top:var(--s-2);display:flex;justify-content:space-between;
  gap:var(--s-4);font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  color:var(--ui-mut)}
.sched-key{margin-top:var(--s-4);display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);
  font-size:var(--t-caption);color:var(--ui-mut)}
.sched-key span{display:inline-flex;align-items:center;gap:9px}
.sched-key span::before{content:"";width:1px;height:12px;background:var(--ui-mark)}
.sched-key span::before{background:var(--c-ink)}
.sched-key span.blk::before{width:4px;height:12px;background:var(--c-ui-negative)}
@media (prefers-reduced-motion:reduce){.sched-track i{opacity:.85;transition:none}}

/* The honest paragraph. It sits under the interactive because that is where a
   reader is when the question occurs to them. */
.caveat{margin-top:clamp(22px,2.8vw,34px);padding-top:var(--s-4);
  border-top:1px solid var(--ui-line);color:var(--ui-mut);
  font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);max-width:78ch}
.caveat strong{color:var(--ui-fg);font-weight:var(--w-medium)}

/* ---- products side by side (home SITE-10, deposits and bonds SITE-28) ------
   A real table on a wide screen, because a reader compares along a row and
   down a column at once. Under 760px every row becomes a block with the
   column names written in, so nothing depends on a header that has scrolled
   out of view. A row or a column for a product the firm does not place is
   taken out at build (data-product), and the table closes up around it. */
.cmp{width:100%;margin-top:clamp(36px,5vw,60px);border-collapse:collapse;
  table-layout:fixed;font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh)}
.cmp th,.cmp td{text-align:left;vertical-align:top;
  padding:var(--s-5) var(--s-5) var(--s-5) 0;border-top:1px solid var(--ui-line)}
.cmp thead th{font-family:var(--font-mono);font-size:11px;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ui-mark);
  padding-top:0;padding-bottom:var(--s-3);border-top:0}
.cmp tbody tr:last-child > *{border-bottom:1px solid var(--ui-line)}
.cmp thead th:first-child,.cmp tbody th{width:18%}
.cmp--q thead th:first-child,.cmp--q tbody th{width:22%}
.cmp tbody th{font-weight:var(--w-regular);font-size:var(--t-h3);line-height:var(--t-h3-lh);
  letter-spacing:var(--t-h3-ls);color:var(--ui-fg);padding-right:var(--s-6)}
.cmp--q tbody th{font-size:var(--t-body);line-height:1.45;letter-spacing:0}
.cmp tbody th a{color:inherit;text-decoration:none;border-bottom:1px solid var(--ui-line);
  transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.cmp tbody th a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.cmp td{color:var(--ui-mut)}
.cmp .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cmp + .caveat{margin-top:var(--s-5);border-top:0;padding-top:0}
@media (max-width:760px){
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .cmp thead th:first-child,.cmp tbody th,.cmp--q tbody th{width:auto}
  .cmp tbody tr{padding:var(--s-5) 0 var(--s-6);border-top:1px solid var(--ui-line)}
  .cmp tbody tr:last-child{border-bottom:1px solid var(--ui-line)}
  .cmp tbody tr > *,.cmp tbody tr:last-child > *{border:0;padding:0}
  .cmp tbody tr > th{padding:0 0 var(--s-2)}
  .cmp tbody tr > td{padding-top:var(--s-4)}
  .cmp td::before{content:attr(data-k);display:block;margin-bottom:5px;
    font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--ui-mark)}
}

/* A ghost button on Petrol Ink. The filled one beside it is the Linen
   block the guidelines specify for a primary call. */
.btn--ghostaccent{background:transparent;color:var(--c-chalk);
  border-color:rgb(var(--ground-rgb) / .42)}
.btn--ghostaccent:hover{background:transparent;border-color:var(--c-chalk)}

/* ==========================================================================
   The overlay menu. Six links at fifty four pixels is a trend, not a design,
   and on a regulated firm's site a menu that carries nothing but page names
   wastes the one full screen the reader has given you. Indexed list at a size
   you can read, a line of explanation on each, and a column with the things
   somebody opening a menu is usually actually looking for.
   ========================================================================== */
.nav-inner{width:100%;max-width:var(--content-max);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(32px,6vw,96px);align-items:start}
.nav-main{counter-reset:nv}
.site-nav a{display:block;color:var(--c-chalk);text-decoration:none}
.nav-main a{counter-increment:nv;position:relative;
  display:grid;grid-template-columns:clamp(38px,4vw,62px) 1fr;
  align-items:baseline;gap:0 clamp(14px,2vw,28px);
  font-size:clamp(21px,2.3vw,30px);line-height:1.2;font-weight:300;
  letter-spacing:-.015em;padding:clamp(13px,1.5vw,19px) 0;
  border-bottom:1px solid rgb(var(--ground-rgb) / .14);
  transition:color var(--dur-fast) var(--ease)}
.nav-main a:first-child{border-top:1px solid rgb(var(--ground-rgb) / .14)}
.nav-main a::before{content:counter(nv,decimal-leading-zero);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;
  font-weight:400;color:var(--c-hairline);
  transition:color var(--dur-fast) var(--ease)}
.nav-main a::after{content:"";position:absolute;right:2px;top:50%;
  width:22px;height:1px;background:var(--c-hairline);
  transform:translateX(-14px) scaleX(0);transform-origin:right center;
  transition:transform var(--dur-base) var(--ease)}
.nav-main a:hover,.nav-main a[aria-current="page"]{color:var(--c-hairline)}
.nav-main a:hover::before{color:var(--c-chalk)}
.nav-main a:hover::after{transform:translateX(0) scaleX(1)}

.nav-side{display:grid;gap:var(--s-2);padding-top:var(--s-3)}
.nav-side .kv{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--c-hairline);margin-top:var(--s-5)}
.nav-side .kv:first-child{margin-top:0}
.nav-side p{font-size:var(--t-body-sm);line-height:1.5;
  color:rgb(var(--ground-rgb) / .74)}
.nav-side a{display:inline;color:var(--c-chalk);
  border-bottom:1px solid rgb(var(--ground-rgb) / .3);padding-bottom:2px}
.nav-side a:hover{border-bottom-color:var(--c-chalk)}
.nav-side .nav-addr{color:rgb(var(--ground-rgb) / .58);max-width:34ch}
@media (max-width:860px){
  .nav-inner{grid-template-columns:1fr;gap:var(--s-7)}
  .nav-side .kv{margin-top:var(--s-4)}
}
@media (max-height:620px){
  .nav-main a{font-size:clamp(18px,2vw,22px);padding:9px 0}
  .nav-side{display:none}
}

/* Signal, where a reader's eye is meant to go on a light ground. */
.link{color:var(--c-ui-negative)}
.link:hover{color:var(--c-ui-negative)}
.notes .arrow{color:var(--c-ui-negative)}
.notes a:hover .arrow{color:var(--c-chalk)}
/* A short mark before a section label. Signal on Linen, Sage Mist on Petrol
   Ink, because Signal is too dark to read against Petrol Ink. */
.eyebrow{display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:26px;height:1px;flex:none;
  background:var(--c-ui-negative)}
.sec--accent .eyebrow::before,.hero .eyebrow::before{background:var(--c-hairline)}
.hero--article .eyebrow{display:inline-flex}

/* The column beside the menu. Reference sizes, not headline sizes. */
.nav-side a{display:inline;font-size:var(--t-body);line-height:1.45;
  font-weight:400;letter-spacing:0;padding:0;color:var(--c-chalk);
  border-bottom:1px solid rgb(var(--ground-rgb) / .3);
  transition:border-color var(--dur-fast) var(--ease)}
.nav-side a:hover{border-bottom-color:var(--c-chalk)}
/* What is behind each link, set quietly under it. */
.nav-main .d{display:block;grid-column:2;margin-top:6px;
  font-family:var(--font-sans);font-size:var(--t-body-sm);line-height:1.45;
  letter-spacing:0;font-weight:400;color:rgb(var(--ground-rgb) / .5);
  transition:color var(--dur-fast) var(--ease)}
.nav-main a:hover .d{color:rgb(var(--ground-rgb) / .74)}
@media (max-height:700px){.nav-main .d{display:none}}

/* ==========================================================================
   A long reference list, folded into something a reader operates. The rail and
   the panel are the same components the homepage uses, so a reader who has
   worked one has worked all of them.
   ========================================================================== */
.folded{display:none}
.js .folded{display:block}
.js .is-folded{display:none}
.folded .rail-x{margin-top:clamp(34px,4.4vw,58px)}
.folded .opanel{min-height:clamp(150px,15vw,196px);align-content:start}
.folded .opanel .kv{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.folded .opanel .kv .of{color:var(--ui-mut);opacity:.85}
.folded .opanel h3{font-size:clamp(21px,2.5vw,30px);max-width:22ch}
.folded .opanel p{font-size:var(--t-body);line-height:var(--t-body-lh);
  max-width:60ch;margin-top:0}
.folded .fold-count{margin-top:var(--s-4);font-family:var(--font-mono);
  font-size:11px;letter-spacing:.22em;color:var(--ui-mut)}

/* The five things light as they pass, same as the commitments. */
.js .wrong.live > li{opacity:.56;transition:opacity var(--dur-base) var(--ease)}
.js .wrong.live > li.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){.js .wrong.live > li{opacity:1}}

/* A ticker needs enough on it to be worth moving. With a home market and a
   marker it sits still, lines up with the column the rest of the page uses,
   and reads as a statement rather than as decoration. */
.strip--still{overflow:visible}
.strip--still::before,.strip--still::after{display:none}
.strip--still .strip-track{width:100%;animation:none;transform:none;
  max-width:var(--content-max);margin-inline:auto;
  padding-inline:var(--gutter)}
.strip--still .venues{width:100%}
.strip--still .venues > li{flex:1 1 0;min-width:0}
.strip--still .venues > li:first-child{padding-left:0}
.strip--still .venues > li:last-child{border-right:0}
@media (max-width:640px){.strip--still .venues{flex-wrap:wrap}
  .strip--still .venues > li{flex:1 1 100%;border-right:0;
    border-bottom:1px solid rgb(var(--ground-rgb) / .14)}}

/* ==========================================================================
   Legal documents. The Financial Services Guide, privacy, terms, disclaimer.

   These are the four pages a client reads properly and the four a regulator
   reads first, so they get a component rather than a wall of prose. A long
   document behaves like a document: a contents rail that stays with you and
   says where you are, sections numbered so a person can quote one back at us
   over the phone, and a copy to keep at the foot of it.

   Everything below is built from the same five brand colours and the same
   scale as the rest of the site. Nothing here is a new idea. It is the sticky
   rail from the homepage commitments, applied to a document.
   ========================================================================== */

/* ---- the band under the title ------------------------------------------
   Version, date, section count and the download, on the Petrol band the hero
   already uses. A reader who wants the PDF and nothing else stops here. */
/* .hero--page carries a bottom padding, which on every other page is right.
   Here the band is the last thing in the hero and has to sit on its edge, so
   the padding is taken off the hero rather than fought with a margin. */
.hero--page:has(.doc-meta){padding-bottom:0}
.doc-meta{position:relative;margin-top:clamp(46px,6vw,80px);
  background:var(--c-ink);clip-path:inset(0 -100vmax);
  box-shadow:0 0 0 100vmax var(--c-ink);
  padding:clamp(22px,2.6vw,34px) 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  align-items:end;gap:0}
.doc-meta > div{padding:0 clamp(12px,1.6vw,20px) 0 clamp(18px,2.6vw,36px);
  border-left:1px solid rgb(var(--ground-rgb) / .26)}
.doc-meta > div:first-child{padding-left:0;border-left:0}
.doc-meta .k{display:block;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:rgb(var(--ground-rgb) / .66)}
.doc-meta .v{display:block;margin-top:10px;font-size:17px;font-weight:300;
  color:var(--c-chalk);line-height:1.3}
.doc-meta a.v{text-decoration:none;border-bottom:1px solid rgb(var(--ground-rgb) / .4);
  padding-bottom:3px;transition:border-color var(--dur-fast) var(--ease)}
.doc-meta a.v:hover{border-bottom-color:var(--c-chalk)}
.doc-meta a.v::after{content:" \2193"}
@media (max-width:700px){
  .doc-meta{grid-template-columns:1fr 1fr;row-gap:clamp(18px,4vw,26px)}
  .doc-meta > div:nth-child(odd){padding-left:0;border-left:0}
}

/* ---- the document body -------------------------------------------------
   Two columns on a wide screen, one on a narrow one. The rail is sticky and
   holds every section, so at no point in a fourteen section document is the
   reader unable to see the shape of the whole thing. */
.doc{display:grid;gap:clamp(32px,5vw,72px);
  grid-template-columns:minmax(210px,266px) minmax(0,1fr);
  align-items:start}
@media (max-width:900px){.doc{grid-template-columns:1fr}}

.doc-nav{position:sticky;top:104px;align-self:start;
  border-top:1px solid var(--line);padding-top:var(--s-4)}
@media (max-width:900px){.doc-nav{position:static;top:auto}}
.doc-nav .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-muted);display:block}
.doc-nav ol{list-style:none;margin-top:var(--s-4);counter-reset:dn;
  max-height:min(58vh,600px);overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--c-hairline) transparent}
@media (max-width:900px){
  .doc-nav ol{max-height:none;overflow:visible;columns:2;column-gap:var(--s-6)}
}
@media (max-width:560px){.doc-nav ol{columns:1}}
.doc-nav li{counter-increment:dn;break-inside:avoid}
.doc-nav a{display:grid;grid-template-columns:30px 1fr;gap:10px;
  align-items:baseline;padding:9px 0;text-decoration:none;
  color:var(--text-muted);font-size:14px;line-height:1.4;
  border-top:1px solid transparent;
  transition:color var(--dur-fast) var(--ease)}
.doc-nav li + li a{border-top-color:rgb(var(--accent-rgb) / .14)}
.doc-nav a::before{content:counter(dn,decimal-leading-zero);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  color:var(--c-hairline)}
.doc-nav a:hover{color:var(--text)}
.doc-nav a[aria-current="true"]{color:var(--c-ink-deep);font-weight:var(--w-medium)}
.doc-nav a[aria-current="true"]::before{color:var(--c-ui-negative)}

/* A hairline that fills as the reader moves through the document. It is the
   only moving part on these pages and it is doing a job: on a document this
   long, how much is left is a real question. */
.doc-prog{height:2px;background:rgb(var(--accent-rgb) / .16);margin-bottom:var(--s-4)}
.doc-prog > i{display:block;height:100%;width:0;background:var(--c-ink);
  transition:width 120ms linear}
@media (prefers-reduced-motion:reduce){.doc-prog > i{transition:none}}

/* ---- a section ---------------------------------------------------------- */
.doc-body > * + *{margin-top:clamp(48px,6vw,86px)}
.doc-sec{scroll-margin-top:104px;max-width:70ch}
.doc-sec > .n{display:block;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted)}
.doc-sec > .n::before{content:"";display:inline-block;width:18px;height:1px;
  background:var(--c-ui-negative);vertical-align:middle;margin-right:12px}
.doc-sec h2{margin-top:var(--s-4);font-size:clamp(23px,2.6vw,32px);
  line-height:1.16;letter-spacing:-.025em;font-weight:300;color:var(--text);
  max-width:24ch;text-wrap:balance}
.doc-sec .standfirst{margin-top:var(--s-4);font-size:var(--t-body-lg);
  line-height:1.58;color:var(--c-ink);max-width:52ch}
.doc-sec p{margin-top:var(--s-5);font-size:var(--t-body);line-height:1.72;
  color:var(--text-muted)}
.doc-sec p strong{color:var(--text);font-weight:var(--w-medium)}
.doc-sec h3{margin-top:var(--s-6);font-size:var(--t-h3);line-height:var(--t-h3-lh);
  letter-spacing:var(--t-h3-ls);font-weight:var(--w-medium);color:var(--text)}
.doc-sec a{color:var(--c-ink);text-decoration:none;
  border-bottom:1px solid rgb(var(--accent-rgb) / .34)}
.doc-sec a:hover{border-bottom-color:var(--c-ink)}

/* A plain list inside a section. Square markers, because the brand has no
   round corner anywhere else either. */
.doc-list{margin-top:var(--s-5);list-style:none}
.doc-list > li{position:relative;padding-left:26px;margin-top:var(--s-3);
  font-size:var(--t-body);line-height:1.68;color:var(--text-muted)}
.doc-list > li::before{content:"";position:absolute;left:0;top:.62em;
  width:7px;height:1px;background:var(--c-ui-negative)}
.doc-list > li strong{color:var(--text);font-weight:var(--w-medium)}

/* ---- the facts block ---------------------------------------------------
   Who we are, what we hold, where to write. A reader checking a licence
   number against a register wants it in one place, not in a paragraph. */
.doc-facts{margin-top:var(--s-6);border-top:1px solid var(--c-graphite);
  padding-top:var(--s-5);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--s-5) clamp(20px,3vw,40px)}
.doc-facts .k{display:block;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted)}
.doc-facts .v{display:block;margin-top:8px;font-size:var(--t-body-sm);
  line-height:1.55;color:var(--text)}
.doc-facts .v a{color:var(--c-ink);text-decoration:none;
  border-bottom:1px solid rgb(var(--accent-rgb) / .34)}

/* ---- the fee table ------------------------------------------------------
   The most carefully read block on the site. Figures in the mono face the
   brand reserves for exactly this, the rate first and what it is charged on
   next, so a reader gets the number before the sentence. */
.doc-fee{margin-top:var(--s-6);border-top:1px solid var(--c-graphite)}
.doc-fee > li{list-style:none;display:grid;
  grid-template-columns:minmax(96px,124px) minmax(0,1fr);
  gap:var(--s-4) clamp(16px,2.4vw,32px);align-items:baseline;
  padding:var(--s-5) 0;border-bottom:1px solid var(--line)}
.doc-fee .r{font-family:var(--font-mono);font-size:clamp(19px,2.1vw,25px);
  font-weight:500;letter-spacing:-.02em;color:var(--c-ink-deep);
  font-variant-numeric:tabular-nums}
.doc-fee .r small{display:block;margin-top:6px;font-size:11px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
.doc-fee .d{font-size:var(--t-body);line-height:1.62;color:var(--text)}
.doc-fee .d em{display:block;margin-top:8px;font-style:normal;
  font-size:var(--t-body-sm);line-height:1.6;color:var(--text-muted)}
@media (max-width:520px){.doc-fee > li{grid-template-columns:1fr;gap:var(--s-3)}}
/* A heading inside the schedule, where one rate table gives way to another. */
.doc-fee-h{margin-top:var(--s-7);font-family:var(--font-mono);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--c-ink)}
.doc-fee-h + .doc-fee{margin-top:var(--s-4)}
/* Written out at both specificities on purpose. Inside a document section the
   rule .doc-sec p wins on specificity and set this at body size, while on the
   marketing page it fell to the caption size, so the same schedule read at two
   different sizes on two pages. */
.doc-fee-note,.doc-sec p.doc-fee-note,.feebox p.doc-fee-note{
  margin-top:var(--s-4);font-size:var(--t-body-sm);
  line-height:var(--t-body-sm-lh);color:var(--text-muted);max-width:62ch}
.doc-fee-h + .doc-fee-note{margin-top:var(--s-3)}

/* A worked example, so the percentages become an amount. */
.doc-worked{margin-top:var(--s-6);background:var(--c-surface);
  padding:clamp(22px,3vw,32px);border-left:2px solid var(--c-ink)}
.doc-worked .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-muted)}
.doc-worked p{margin-top:var(--s-3)}
.doc-worked .sum{margin-top:var(--s-5);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:var(--s-4)}
.doc-worked .sum .a{display:block;font-family:var(--font-mono);font-size:20px;
  font-weight:500;color:var(--c-ink-deep);font-variant-numeric:tabular-nums}
.doc-worked .sum .b{display:block;margin-top:4px;font-size:13px;line-height:1.45;
  color:var(--text-muted)}

/* ---- a marker the firm has still to answer ------------------------------
   Deliberately visible. The house rule is that nothing about how this firm
   operates gets invented, so an unanswered question looks like an unanswered
   question rather than like prose. */
.doc-ask{margin-top:var(--s-6);border-left:2px solid var(--c-ui-negative);
  padding:var(--s-2) 0 var(--s-2) clamp(18px,2.6vw,28px)}
.doc-ask .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--c-ui-negative)}
.doc-ask p{margin-top:var(--s-3)}

/* ---- for your records --------------------------------------------------- */
.doc-save{background:var(--c-ink-deep);color:var(--c-chalk);
  padding:clamp(34px,4.6vw,56px);display:grid;gap:var(--s-6);
  grid-template-columns:minmax(0,1fr) auto;align-items:center}
@media (max-width:720px){.doc-save{grid-template-columns:1fr}}
.doc-save .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:rgb(var(--ground-rgb) / .66)}
.doc-save h2{margin-top:var(--s-3);font-size:clamp(22px,2.5vw,30px);
  line-height:1.16;letter-spacing:-.025em;font-weight:300;color:var(--c-chalk);
  max-width:26ch;text-wrap:balance}
.doc-save p{margin-top:var(--s-4);font-size:var(--t-body-sm);line-height:1.62;
  color:rgb(var(--ground-rgb) / .74);max-width:52ch}
.doc-save .btn{background:var(--c-chalk);color:var(--c-ink-deep);
  border-color:var(--c-chalk);white-space:nowrap}
.doc-save .btn:hover{background:var(--c-hairline);border-color:var(--c-hairline)}
.doc-save .meta{margin-top:var(--s-3);font-family:var(--font-mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgb(var(--ground-rgb) / .56);text-align:right}
@media (max-width:720px){.doc-save .meta{text-align:left}}

/* ---- print -------------------------------------------------------------
   The PDF is rendered from this page, so print is not an afterthought here.
   It is the second deliverable, and Chrome is handed the same file. */
/* ---- Signal accents ----------------------------------------------------
   J asked for the oxblood through the site as accents, not blocks. So Signal is
   a rule, a tick, an active state, or the one figure or line that matters, and
   it is never a filled panel or a background. It reads on Linen at better than
   7 to 1. On Petrol Ink it does not read at all, so on a dark ground it only
   ever sits against something light, such as the end of a pale bar. --signal
   comes from client.config.json through the generated token file. */
::selection{background:var(--signal);color:var(--c-chalk)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.site-head :focus-visible,.hero :focus-visible,.sec--accent :focus-visible,
.sec--ink :focus-visible,.sec--data :focus-visible{outline-color:var(--c-chalk)}

/* the mark before a section label: at one pixel it did not register */
.eyebrow::before{height:2px;background:var(--signal)}
.sec--accent .eyebrow::before,.sec--ink .eyebrow::before,.sec--data .eyebrow::before,
.hero .eyebrow::before{height:1px;background:var(--c-hairline)}

/* the rule over each figure in a stat row */
.stats > li::before{background:var(--signal)}

/* service numbers, 01 to 05 */
.services .num{color:var(--signal)}

/* the chosen point on the commitment chart, and the rule over what it opens */
.pt[aria-selected="true"] .pt-dot{background:var(--signal);box-shadow:0 0 0 3px rgb(var(--signal-rgb) / .16)}
.mx-panel{border-top-color:var(--signal)}

/* the struck price in a book chart is the one bar that matters: its end is
   marked in Signal, against the pale bar, so it reads on either ground */
.bk-row.is-struck .bk-bar{overflow:visible}
.bk-row.is-struck .bk-bar::after{content:"";position:absolute;top:-5px;bottom:-5px;
  left:calc(var(--w) - 1px);width:3px;background:var(--signal);pointer-events:none}
.js .book[data-book] .bk-row.is-struck .bk-bar::after{opacity:0}
.js .book.drawn .bk-row.is-struck .bk-bar::after{opacity:1;
  transition:opacity var(--dur-fast) var(--ease) 700ms}
@media (prefers-reduced-motion:reduce){
  .js .book[data-book] .bk-row.is-struck .bk-bar::after{opacity:1;transition:none}}

/* a card lifts with a Signal edge rather than only a colour change */
.notes a:hover{box-shadow:inset 0 2px 0 var(--signal)}

/* fields: the one being filled in is marked in Signal */
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--signal)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--signal)}

.link:hover{border-bottom-color:var(--signal)}

/* A text link on Petrol Ink was set in Signal and could not be read. On a dark
   ground a link is Linen, underlined. */
.sec--accent .link,.sec--ink .link{color:var(--c-chalk);
  border-bottom:1px solid rgb(var(--ground-rgb) / .42)}
.sec--accent .link:hover,.sec--ink .link:hover{color:var(--c-chalk);border-bottom-color:var(--c-chalk)}

@media print{
  .site-head,.site-nav,.head-cta,.skip,.site-foot,.doc-nav,.doc-prog,
  .doc-save,.closer,.closer-simple{display:none !important}
  html{scroll-behavior:auto}
  /* The reveal animation starts elements at zero opacity and animates them in.
     A print renderer takes the page at time zero, so without this the title,
     the standfirst and the whole meta band come out blank. */
  .rise,.rise-2,.rise-3{animation:none !important;opacity:1 !important;
    transform:none !important}
  body{background:#fff;color:#000;font-size:10.5pt;line-height:1.5}
  .hero,.hero--doc{background:#fff !important;color:#000 !important;
    padding-block:0 !important}
  .hero h1{color:#000 !important;font-size:26pt;max-width:none}
  .hero .lead{color:#333 !important;font-size:12pt}
  .hero .eyebrow{color:#666 !important}
  .doc-meta{background:none !important;box-shadow:none !important;
    clip-path:none !important;border-top:1pt solid #000;border-bottom:1pt solid #000;
    padding:10pt 0;margin-top:16pt;grid-template-columns:repeat(3,1fr)}
  .doc-meta > div{border-left:0;padding:0 8pt 0 0}
  .doc-meta .k{color:#666 !important}
  .doc-meta .v{color:#000 !important;font-size:10pt}
  .doc-meta .dl-cell{display:none}
  .doc{display:block}
  .doc-sec{max-width:none}
  .doc-sec h2{break-after:avoid;page-break-after:avoid;font-size:15pt;
    color:#000 !important;max-width:none}
  /* On screen the standfirst is held to 52 characters so it reads as a
     standfirst. On an A4 page that measure makes it look like a caption, so it
     takes the full column and keeps only its size and its colour. */
  .doc-sec .standfirst{color:#222 !important;font-size:11.5pt;max-width:none;
    line-height:1.45}
  /* A section number stranded at the foot of a page, with its heading over the
     leaf, is the one break this document must not make. */
  .doc-sec > .n,.doc-sec h2,.doc-sec h3{break-after:avoid;page-break-after:avoid}
  .doc-sec p,.doc-list > li{color:#222 !important}
  .doc-sec > .n{color:#666 !important}
  .doc-body > * + *{margin-top:26pt}
  .doc-fee .r{color:#000 !important;font-size:13pt}
  .doc-fee > li{break-inside:avoid;page-break-inside:avoid}
  .doc-worked{background:#f2f2f2 !important;border-left:2pt solid #000;
    break-inside:avoid;page-break-inside:avoid}
  .doc-ask{border-left:2pt solid #000}
  .doc-ask .k{color:#000 !important}
  .doc-facts{break-inside:avoid;page-break-inside:avoid}
  .sec{padding-block:0}
  a{color:#000 !important;border-bottom:0 !important}
  @page{margin:18mm 16mm 20mm}
}