/* ==========================================================================
   Marathon Trends — site layer
   --------------------------------------------------------------------------
   Everything the multi-page platform adds on top of base.css: the mega-menu
   navigation, interior page furniture, editorial typography, the data
   visualisations and the Where Is The Strength explorer.

   Rules: use the tokens base.css already defines, never raw hex. Every new
   surface must read correctly in all four themes (emerald / teal / black /
   mono), which it does for free as long as colours come from var().
   ========================================================================== */

/* ---------- accessibility & shell -------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--gold);color:var(--bg);
  padding:12px 20px;font:700 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
button:focus:not(:focus-visible){outline:none}
main{display:block}
.u-center{text-align:center}
.u-muted{color:var(--muted)}
/* Separates a prose block from a component above it — a chart, a flow, a band —
   which carry their own margins on one side only. */
.u-mt{margin-top:30px}
/* A figure's own heading, where the figure is a bare component rather than a
   framed panel with a head of its own. */
.u-fig{font:400 17px/1.3 var(--serif);margin:0 0 20px;color:var(--text)}
.lede{font-size:17px;line-height:1.75;color:var(--t1);max-width:62ch}

/* ---------- navigation -------------------------------------------------
   The home page keeps the original transparent-over-hero treatment; every
   other page gets a solid sticky bar from the first pixel.

   --nav-h is the live height of the header. app.js measures it and keeps it
   up to date, because the bar changes height when it gains .scrolled and the
   sub-nav has to sit flush underneath it — a hard-coded offset leaves a strip
   of page content showing between the two sticky bars.                     */
:root{--nav-h:63px}

.nav{position:sticky;top:0}
body[data-nav="over"] .nav{position:absolute;top:36px}
body[data-nav="over"] .nav.scrolled{position:fixed;top:0}
/* Sticky already pins to the top once scrolled, so an interior page must not
   inherit base.css's position:fixed — that pulls the bar out of flow and jumps
   the page up by its own height. */
body[data-nav="solid"] .nav,
body[data-nav="solid"] .nav.scrolled{position:sticky;top:0}
body[data-nav="solid"] .nav{background:rgba(var(--bg-rgb),.86);backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);padding:16px 0}
.navin{position:relative}
.logo img{display:block;height:26px;width:auto}
.nav.scrolled .logo img{height:23px}

.links{align-items:center;gap:0}
.navitem{position:relative}
.navitem>a{display:flex;align-items:center;gap:6px;padding:10px 15px;opacity:.82;font-weight:500}
.navitem>a:after{left:15px;width:0}
.navitem:hover>a,.navitem.on>a{opacity:1;color:var(--gold2)}
.navitem.on>a:after{width:calc(100% - 30px)}
.navitem .caret{width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .35s var(--ease);opacity:.6}
.navitem.open .caret{transform:rotate(225deg) translate(-1px,-1px);opacity:1}

/* mega panel */
.mega{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px);
  width:min(760px,92vw);z-index:210;padding:26px;
  background:linear-gradient(160deg,var(--bg2),var(--card));
  border:1px solid var(--line);box-shadow:0 50px 100px -40px #000e,inset 0 1px 0 rgba(var(--text-rgb),.05);
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s}
.navitem.open .mega{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;visibility:visible}
.mega:before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.mega-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:26px}
.mega-intro h3{font:400 27px/1.1 var(--serif);margin:10px 0 10px}
.mega-intro p{font-size:12px;line-height:1.7;color:var(--muted);margin:0 0 18px}
.mega-intro .mega-all{display:inline-flex;align-items:center;gap:7px;font:700 9px/1 var(--sans);
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold2);transition:gap .3s var(--ease)}
.mega-intro .mega-all:hover{gap:12px}
.mega-links{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.mega-link{display:block;padding:13px 16px;background:var(--card);transition:background .3s var(--ease),padding .3s var(--ease)}
.mega-link:hover{background:var(--hover);padding-left:21px}
.mega-link b{display:block;font:500 12.5px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--text)}
.mega-link span{display:block;margin-top:3px;font-size:10.5px;letter-spacing:0;text-transform:none;color:var(--t4)}
.mega-link:hover b{color:var(--gold2)}
.mega-link.is-feature{background:linear-gradient(120deg,var(--lift),var(--card))}
.mega-link.is-feature b:after{content:"Live";margin-left:8px;font:700 8px/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--green);vertical-align:middle}
.mega-link.is-cta b{color:var(--gold2)}

.nav-tail{display:flex;align-items:center;gap:10px}
.nav-login{font:700 9px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--l3);padding:11px 14px;transition:.35s var(--ease);white-space:nowrap}
.nav-login:hover{border-color:var(--gold);color:var(--gold2)}
.nav-login{display:inline-flex;align-items:center;gap:6px;cursor:pointer;background:none}
.nav-caret{flex:none;opacity:.7;transition:transform .3s var(--ease)}
[data-login-toggle][aria-expanded="true"] .nav-caret{transform:rotate(180deg)}

/* The sign-in menu. Anchored to its button rather than to the viewport, so it
   stays put while the header shrinks on scroll. */
.login-menu{position:relative}
.login-pop{position:absolute;top:calc(100% + 10px);right:0;z-index:95;width:290px;
  background:var(--bg2);border:1px solid var(--l3);border-radius:10px;overflow:hidden;
  box-shadow:0 26px 60px -18px #000d}
.login-pop[hidden]{display:none}
.login-pop a{display:block;padding:13px 15px;text-decoration:none;
  border-bottom:1px solid var(--l1);transition:background .25s var(--ease)}
.login-pop a:last-child{border-bottom:0}
.login-pop a:hover{background:var(--hover)}
.login-pop a:focus-visible{outline:1px solid var(--gold);outline-offset:-2px}
.login-pop b{display:flex;align-items:center;gap:7px;
  font:700 9.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold2)}
/* The arrow marks a link that leaves for a custodian's own portal. Small, but
   the difference between "your holdings" and "the research board" is worth
   signalling before the click rather than after it. */
.login-pop b svg{flex:none;opacity:.65}
.login-pop a:hover b svg{opacity:1}
.login-pop span{display:block;margin-top:6px;font-size:11px;line-height:1.6;color:var(--muted)}

/* mobile navigation */
.hamb{display:none;position:relative;z-index:320;width:42px;height:38px;border:1px solid var(--l4);
  background:none;cursor:pointer;padding:0}
.hamb i{position:absolute;left:11px;width:18px;height:1px;background:var(--text);transition:.35s var(--ease)}
.hamb i:nth-child(1){top:13px}.hamb i:nth-child(2){top:18px}.hamb i:nth-child(3){top:23px}
body.mnav-open .hamb i:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.mnav-open .hamb i:nth-child(2){opacity:0}
body.mnav-open .hamb i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:310;background:var(--bg);overflow:auto;padding:96px 0 60px;
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
body.mnav-open{overflow:hidden}
body.mnav-open .mnav{opacity:1;pointer-events:auto}
.mnav-sec{border-top:1px solid var(--l1)}
.mnav-sec:last-of-type{border-bottom:1px solid var(--l1)}
.mnav-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:19px 0;background:none;border:0;color:var(--text);cursor:pointer;
  font:400 24px/1.1 var(--serif);text-align:left}
.mnav-head .pm{position:relative;width:16px;height:16px;flex:none}
.mnav-head .pm:before,.mnav-head .pm:after{content:"";position:absolute;left:50%;top:50%;background:var(--gold);
  transform:translate(-50%,-50%);transition:.35s var(--ease)}
.mnav-head .pm:before{width:14px;height:1px}
.mnav-head .pm:after{width:1px;height:14px}
.mnav-sec.open .mnav-head{color:var(--gold2)}
.mnav-sec.open .pm:after{opacity:0;transform:translate(-50%,-50%) rotate(90deg)}
.mnav-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.mnav-sec.open .mnav-sub{grid-template-rows:1fr}
.mnav-sub>div{overflow:hidden}
.mnav-sub a{display:block;padding:11px 0 11px 2px;font-size:13px;color:var(--muted);border-bottom:1px solid var(--l1)}
.mnav-sub a:last-child{border-bottom:0;padding-bottom:20px}
.mnav-sub a:hover{color:var(--gold2)}
.mnav-foot{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.mnav-foot .btn{flex:1 1 160px;text-align:center}

/* ---------- page hero (interior) --------------------------------------- */
.phero{position:relative;overflow:hidden;padding:132px 0 64px;
  background:linear-gradient(150deg,var(--lift),var(--bg2) 52%,var(--bg))}
body[data-nav="solid"] .phero{padding-top:84px}
.phero:before{content:"";position:absolute;width:760px;height:760px;border-radius:50%;right:-240px;top:-320px;
  background:radial-gradient(circle,rgba(var(--gold-rgb),.11),transparent 62%);filter:blur(24px)}
.phero:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.1;
  background-image:linear-gradient(rgba(var(--text-rgb),.14) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--text-rgb),.14) 1px,transparent 1px);background-size:64px 64px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 70%);mask-image:linear-gradient(180deg,transparent,#000 70%)}
.phero .container{position:relative;z-index:2}
.phero-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:56px;align-items:end}
.phero h1{font:400 clamp(40px,5.6vw,74px)/1.08 var(--serif);letter-spacing:-.035em;margin:16px 0 0}
.phero h1 em{font-style:normal;color:var(--gold2)}
.phero-lead{margin:22px 0 0;font-size:15.5px;line-height:1.78;color:var(--t1);max-width:56ch}
.phero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.phero-facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.phero-fact{background:rgba(var(--bg2-rgb),.72);padding:16px 18px}
.phero-fact b{display:block;font:400 24px/1 var(--num);font-variant-numeric:tabular-nums;color:var(--gold2)}
.phero-fact span{display:block;margin-top:7px;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}

/* breadcrumbs */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t5)}
.crumbs a{transition:color .3s}
.crumbs a:hover{color:var(--gold2)}
.crumbs i{font-style:normal;opacity:.45}
.crumbs [aria-current]{color:var(--gold2)}

/* section sub-navigation: the sibling pages of the current section */
.subnav{position:sticky;top:var(--nav-h);z-index:90;background:rgba(var(--deep-rgb),.9);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--l1)}
.subnav-in{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.subnav-in::-webkit-scrollbar{display:none}
.subnav a{white-space:nowrap;padding:15px 15px;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--t4);border-bottom:1px solid transparent;transition:.3s var(--ease)}
.subnav a:hover{color:var(--text)}
.subnav a[aria-current]{color:var(--gold2);border-bottom-color:var(--gold)}
.subnav .subnav-label{padding:15px 16px 15px 0;margin-right:6px;border-right:1px solid var(--l1);
  font:700 9px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);flex:none}
/* Whatever comes first in the rail holds the page's left edge, so a section
   that prints no label starts flush with the heading above it rather than
   indented by one tab's padding. Where the label is printed it already sits
   flush and this changes nothing. */
.subnav-in > a:first-child{padding-left:0}

/* The password reveal. The button sits inside the field's box rather than
   beside it, so the row keeps the same width as every other field. */
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;padding-right:44px}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;display:grid;place-items:center;
  background:none;border:0;cursor:pointer;color:var(--t4);
  transition:color .25s var(--ease)}
.pw-eye:hover{color:var(--gold2)}
.pw-eye:focus-visible{outline:1px solid var(--gold);outline-offset:-2px}
.pw-eye svg[hidden]{display:none}

/* The sign-in code. Spaced and tabular so six digits read as six digits, and
   wide enough that a pasted code is never clipped. */
.code-input{letter-spacing:.5em;font-variant-numeric:tabular-nums;font-family:var(--num);
  font-size:18px;text-align:center;padding-left:.5em}

/* The name field on the signed-in card. */
.name-set{margin-top:22px;padding-top:18px;border-top:1px solid var(--l2);text-align:left}
.name-set[hidden]{display:none}
.name-set label{display:block;font:700 9px/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.name-row{display:flex;gap:8px}
.name-row input{flex:1;min-width:0;padding:11px 13px;background:var(--card);
  border:1px solid var(--l3);color:var(--text);font:400 13px var(--sans);
  transition:border-color .25s var(--ease)}
.name-row input:focus{outline:none;border-color:var(--gold)}
.name-row .btn{flex:none;padding:11px 18px}

/* ---------- the signed-in greeting -------------------------------------
   Sits above the hero eyebrow and is deliberately quiet: a line of type with a
   hairline down its left edge, not a card or a banner. The home page's job is
   still to say what the firm does — being recognised should feel like the page
   knowing you, not like an interruption before the argument starts.
   ------------------------------------------------------------------------ */
.hello{display:flex;align-items:center;flex-wrap:wrap;gap:0 9px;
  margin:0 0 20px;padding:0 0 0 15px;position:relative;
  font-size:12.5px;line-height:1.7;color:var(--muted)}
.hello:before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:2px;
  background:linear-gradient(var(--gold),transparent)}
/* A lit dot, the same one the ticker uses for a live feed — the page is showing
   something that is true right now. */
.hello i{width:5px;height:5px;border-radius:50%;flex:none;background:var(--green);
  box-shadow:0 0 7px var(--green)}
.hello b{color:var(--text);font-weight:600}
.hello a{color:var(--gold2);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--gold) 45%,transparent);
  padding-bottom:1px;transition:border-color .3s var(--ease),color .3s var(--ease)}
.hello a:hover{color:var(--text);border-bottom-color:var(--gold)}
@media(max-width:620px){ .hello{font-size:11.5px} }

/* ---------- editorial typography --------------------------------------- */
.prose{max-width:70ch;font-size:15px;line-height:1.85;color:var(--t1)}
/* The class is doubled to buy specificity, not by accident. This rule is what
   separates one block from the next, but `.prose p` and `.prose ul` below reset
   margin to 0 and — being (0,1,1) against this rule's (0,1,0) — used to win,
   whatever the source order. The result was that consecutive paragraphs across
   the whole site ran together into one block with no gap at all. */
.prose.prose>*+*{margin-top:22px}
/* A heading for a turn inside a section, a step below the section's own. */
.section-head.is-sub{margin-bottom:30px}
.section-head.is-sub h2{font:400 clamp(27px,3.1vw,39px)/1.1 var(--serif)}
.section-head.is-sub p{max-width:400px;font-size:13px}

.prose h2{font:400 clamp(30px,3.4vw,42px)/1.08 var(--serif);color:var(--text);margin-top:56px}
.prose h3{font:400 25px/1.2 var(--serif);color:var(--text);margin-top:42px}
.prose h4{font:700 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:36px}
.prose p{margin:0}
.prose strong{color:var(--text);font-weight:600}
.prose em{color:var(--gold2);font-style:italic}
.prose a:not(.btn){color:var(--gold2);border-bottom:1px solid color-mix(in srgb,var(--gold) 40%,transparent);
  transition:border-color .3s}
.prose a:not(.btn):hover{border-color:var(--gold)}
.prose ul,.prose ol{margin:0;padding-left:20px}
.prose li{margin:9px 0}
.prose li::marker{color:var(--gold)}
.prose blockquote{margin:34px 0;padding:2px 0 2px 26px;border-left:1px solid var(--gold);
  font:400 21px/1.6 var(--serif);color:var(--text)}
.prose hr{border:0;border-top:1px solid var(--l2);margin:44px 0}

/* pull quote */
/* NB: the padding here is overridden further down (see "Pull quote — centred"),
   which is the rule that actually lands. Left as it was rather than tuned, so
   there is only one place that decides this. */
.pull{position:relative;margin:0;padding:44px 46px;border:1px solid var(--line);
  background:linear-gradient(155deg,var(--bg2),var(--card))}
.pull:before{content:"\201C";position:absolute;left:22px;top:2px;font:120px var(--serif);color:var(--gold);opacity:.16;line-height:1}
.pull p{position:relative;margin:0;font:400 clamp(21px,2.4vw,29px)/1.45 var(--serif);color:var(--text)}
.pull footer{position:relative;background:none;padding:0;margin-top:26px;font-size:10px;line-height:1.7;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold2)}
.pull footer:before{display:none}

/* ---------- a note on the attribution lines ------------------------------
   Every attribution on this site is small, uppercase and letterspaced, and
   each was set through the `font` shorthand with no line-height. The shorthand
   resets line-height to `normal` when it is omitted, roughly 1.2, so at
   8.5–11px the name ends up in a box barely taller than its own capitals and
   reads as welded to the quote above it however much margin sits between them.

   Leading is the fix rather than more margin: the space has to be *around* the
   line, not only before it. Margin alone just pushes a cramped line further
   down the page.

   The leading is set on each rule — .pull footer just above, and .lead-quote
   cite and .lead2-quote cite further down — rather than in one shared rule up
   here, precisely because a later `font` shorthand would silently wipe a
   shared rule. That is the trap that produced this in the first place.

   .qrail-q cite is deliberately left alone. It is not a stacked attribution:
   it sits inline beside its quote in the sticky subnav rail, so leading there
   would grow the height of that strip rather than give the name any air. */

/* two-column editorial split */
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.split.wide-left{grid-template-columns:1.1fr .9fr}
.split-sticky{position:sticky;top:calc(var(--nav-h) + var(--subnav-h, 0px) + 26px)}

/* numbered / lettered enumeration */
.enum{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.enum-row{display:grid;grid-template-columns:64px 1fr;gap:22px;padding:24px 26px;background:var(--card);
  transition:background .4s var(--ease)}
.enum-row:hover{background:var(--hover)}
.enum-row b{font:400 30px/1 var(--num);font-variant-numeric:tabular-nums;color:var(--gold);opacity:.7;
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.enum-row h3{font:400 21px/1.25 var(--serif);margin:0 0 8px;color:var(--text);
  transition:color .4s var(--ease)}
.enum-row p{margin:0;font-size:13px;line-height:1.78;color:var(--muted);
  transition:color .4s var(--ease)}

/* Reading a row.

   The ground already shifted on hover; what it did not do was say which row
   the pointer is on once the eye has moved to the text. Three things answer
   that, and no one of them is asked to carry it alone: the heading warms to
   the strength colour, the ordinal steps up out of its resting opacity, and a
   hairline runs down the leading edge.

   Colour is deliberately not the only signal. The mono theme flattens --green
   to near-white on purpose, and a reader who cannot separate green from cream
   is in the same position — for both, the rule and the ordinal still move.

   :focus-within earns its place because these rows carry links on several
   pages: a keyboard reader arriving by Tab gets the same row marked that a
   pointer would have marked. */
.enum-row{position:relative}
.enum-row:after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--green);transform:scaleY(0);transform-origin:top;
  transition:transform .45s var(--ease)}
.enum-row:hover:after,.enum-row:focus-within:after{transform:scaleY(1)}
.enum-row:hover h3,.enum-row:focus-within h3{color:var(--green)}
.enum-row:hover p,.enum-row:focus-within p{color:var(--t1)}
.enum-row:hover b,.enum-row:focus-within b{opacity:1;transform:translateY(-2px)}

/* The definition rows are the same idea at a smaller scale. They have no
   ground of their own to shift, so the term and its text carry it. */
.defrow dt,.defrow dd{transition:color .4s var(--ease)}
.defrow:hover dt{color:var(--green)}
.defrow:hover dd{color:var(--text)}

/* The panels that already have a hover of their own keep it, and take only
   the heading colour, so one gesture means one thing across the site. */
.tri h3,.wcard h3,.card h3{transition:color .4s var(--ease)}
.tri:hover h3,.wcard:hover h3,.card:hover h3{color:var(--green)}

@media(prefers-reduced-motion:reduce){
  .enum-row:after{transition:none}
  .enum-row:hover b,.enum-row:focus-within b{transform:none}
}

/* key-value definition rows */
.deflist{display:grid;gap:0;border-top:1px solid var(--l2)}
.defrow{display:grid;grid-template-columns:230px 1fr;gap:28px;padding:20px 0;border-bottom:1px solid var(--l2)}
.defrow dt{font:700 9.5px/1.6 var(--num);font-variant-numeric:tabular-nums;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.defrow dd{margin:0;font-size:13.5px;line-height:1.8;color:var(--t1)}

/* generic panel */
.panelbox{padding:32px 34px;border:1px solid var(--line);background:linear-gradient(155deg,var(--bg2),var(--card));position:relative;overflow:hidden}
.panelbox:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(260px 150px at 12% 0%,rgba(var(--gold-rgb),.09),transparent 70%)}
.panelbox>*{position:relative}
.panelbox h3{font:400 24px/1.2 var(--serif);margin:10px 0 12px}
.panelbox p{font-size:13px;line-height:1.78;color:var(--muted);margin:0 0 16px}

/* notice / disclosure block */
.notice{display:flex;gap:16px;padding:22px 24px;border:1px solid var(--l2);background:var(--card);
  font-size:11.5px;line-height:1.8;color:var(--t3)}
.notice .notice-ic{flex:none;width:26px;height:26px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;color:var(--gold);font-size:12px}
.notice b{color:var(--t1);font-weight:600}

/* ---------- data visualisation ----------------------------------------- */
/* horizontal comparison bars */
.bars{display:grid;gap:14px}
.bar-row{display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:center}
.bar-row .bar-name{font-size:12px;color:var(--t1)}
.bar-row .bar-val{font:600 12px var(--sans);color:var(--gold2);font-variant-numeric:tabular-nums;font-family:var(--num)}
.bar-track{grid-column:1/-1;height:5px;background:var(--l1);position:relative;overflow:hidden}
.bar-fill{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--gold),var(--gold2));
  transition:width 1.1s var(--ease)}
.bar-row.is-alt .bar-fill{background:linear-gradient(90deg,var(--cyan),var(--green))}
.bar-row.is-neg .bar-fill{background:linear-gradient(90deg,color-mix(in srgb,var(--red) 70%,transparent),var(--red))}
/* For the row that is the exception to the set rather than a member of it —
   drawn in the same shape, deliberately without the accent. */
.bar-row.is-muted .bar-fill{background:linear-gradient(90deg,var(--l5),var(--t5))}
.bar-row.is-muted .bar-val{color:var(--t4)}
.bar-row.is-neg .bar-val{color:var(--red)}

/* donut / ring */
.ring-wrap{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.ring{position:relative;width:180px;height:180px;flex:none}
.ring svg{transform:rotate(-90deg);width:100%;height:100%}
.ring circle{fill:none;stroke-width:14}
.ring .ring-bg{stroke:var(--l1)}
.ring .ring-seg{stroke-linecap:butt;transition:stroke-dasharray 1.1s var(--ease)}
.ring-mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring-mid b{display:block;font:400 28px/1 var(--num);font-variant-numeric:tabular-nums;color:var(--text)}
.ring-mid span{display:block;margin-top:6px;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ring-key{display:grid;gap:11px;flex:1;min-width:200px}
.ring-key div{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--t1)}
.ring-key i{width:9px;height:9px;flex:none;border-radius:2px}
.ring-key b{margin-left:auto;font:600 12px var(--sans);color:var(--gold2);font-variant-numeric:tabular-nums;font-family:var(--num)}

/* chart frame shared by every canvas visual */
.chart{position:relative;border:1px solid var(--l2);background:linear-gradient(160deg,var(--bg2),var(--card));padding:20px}
.chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.chart-head h3{font:400 19px/1.2 var(--serif);margin:0}
.chart-head span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--t4)}
.chart canvas{display:block;width:100%}
.chart-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;font-size:10px;color:var(--muted)}
.chart-legend i{display:inline-block;width:14px;height:2px;margin-right:7px;vertical-align:middle}

/* institutional table */
.tablewrap{overflow-x:auto;border:1px solid var(--l2)}
.dtable{width:100%;border-collapse:collapse;font-size:12.5px;min-width:560px}
.dtable th{position:sticky;top:0;background:var(--bg2);text-align:left;padding:14px 16px;
  font:700 9px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid var(--line);white-space:nowrap}
.dtable td{padding:14px 16px;border-bottom:1px solid var(--l1);color:var(--t1);vertical-align:top}

/* Sortable headings. The button is injected by sort-table.js, so a page whose
   script never ran keeps the plain heading it always had — the padding lives
   on the button rather than the cell so the whole heading is the hit target,
   not just the words. */
/* The class is set by the script as it builds the button, so the cell and its
   button never both hold the padding — no :has() dependency for layout. */
.dtable th.is-sortable{padding:0}
.th-sort{display:flex;align-items:center;gap:7px;width:100%;padding:14px 16px;
  background:none;border:0;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;
  text-align:inherit;transition:color .25s var(--ease)}
.dtable .num .th-sort{justify-content:flex-end}
.th-sort:hover{color:var(--gold2)}
.th-sort:focus-visible{outline:1px solid rgba(var(--gold-rgb),.6);outline-offset:-3px}
/* The indicator holds its space unsorted, so nothing shifts sideways when a
   column becomes the sorted one. */
.th-sort i{width:7px;height:9px;flex:none;position:relative;opacity:.32;
  transition:opacity .25s var(--ease)}
.th-sort i:before,.th-sort i:after{content:"";position:absolute;left:0;
  border-left:3.5px solid transparent;border-right:3.5px solid transparent}
.th-sort i:before{top:0;border-bottom:4px solid currentColor}
.th-sort i:after{bottom:0;border-top:4px solid currentColor}
.th-sort:hover i{opacity:.6}
.th-sort[data-dir]:not([data-dir=""]){color:var(--gold2)}
.th-sort[data-dir="asc"] i,.th-sort[data-dir="desc"] i{opacity:1}
.th-sort[data-dir="asc"] i:after{opacity:.22}
.th-sort[data-dir="desc"] i:before{opacity:.22}
.dtable tbody tr{transition:background .3s}
.dtable tbody tr:hover{background:rgba(var(--gold-rgb),.045)}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable .num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--num);white-space:nowrap}
.dtable .pos{color:var(--green)}
.dtable .neg{color:var(--red)}

/* ---------- content collections (insights / research / videos) ---------- */
.filters{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
  padding:18px 0;border-top:1px solid var(--l2);border-bottom:1px solid var(--l2);margin-bottom:40px}
.chipset{display:flex;flex-wrap:wrap;gap:7px}
.chipbtn{border:1px solid var(--l3);background:none;color:var(--muted);cursor:pointer;
  padding:9px 15px;font:700 9px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  transition:.3s var(--ease)}
.chipbtn:hover{border-color:var(--gold);color:var(--gold2)}
.chipbtn[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--bg)}
.searchbox{position:relative;min-width:230px;flex:1;max-width:320px}
.searchbox input{width:100%;background:var(--card);border:1px solid var(--l3);color:var(--text);
  padding:11px 12px 11px 36px;font:400 12.5px var(--sans);outline:none;transition:.3s}
.searchbox input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.12)}
.searchbox svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--t5);pointer-events:none}
.result-count{font-size:10px;font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:.14em;text-transform:uppercase;color:var(--t4);white-space:nowrap}

.collection{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.item{display:grid;grid-template-columns:118px 1fr auto;gap:26px;align-items:center;
  padding:26px 28px;background:var(--card);transition:background .4s var(--ease),padding .4s var(--ease)}
.item:hover{background:var(--hover);padding-left:34px}
.item-date{font-size:9.5px;font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.item-main h3{font:400 23px/1.25 var(--serif);margin:0 0 8px;color:var(--text);transition:color .3s}
.item:hover .item-main h3{color:var(--gold2)}
.item-main p{margin:0;font-size:12.5px;line-height:1.75;color:var(--muted);max-width:70ch}
.item-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tagpill{font:700 8.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--t3);
  border:1px solid var(--l3);padding:6px 9px}
.item-go{color:var(--gold);font-size:18px;transition:transform .35s var(--ease)}
.item:hover .item-go{transform:translate(4px,-4px)}
.item[hidden]{display:none}
.empty{padding:60px 20px;text-align:center;color:var(--t4);font-size:13px;background:var(--card)}

/* featured article strip */
.feature{display:grid;grid-template-columns:1.15fr .85fr;gap:0;border:1px solid var(--line);
  background:linear-gradient(150deg,var(--bg2),var(--card));margin-bottom:36px}
.feature-body{padding:44px 46px}
.feature-body h3{font:400 clamp(28px,3vw,40px)/1.1 var(--serif);margin:14px 0 16px}
.feature-body p{font-size:14px;line-height:1.8;color:var(--t1);margin:0 0 26px;max-width:52ch}
.feature-viz{position:relative;border-left:1px solid var(--line);min-height:300px;display:grid;place-items:center;padding:30px}

/* ---------- team ------------------------------------------------------- */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* A column, so the credentials line can be pushed to the foot of the card.
   Grid rows are equal height whatever the longest bio in them is, and without
   this the rule above each set of credentials floats at a different height in
   every card of the row. */
.person{position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:30px 28px 26px;border:1px solid var(--l2);
  background:linear-gradient(155deg,var(--bg2),var(--card));transition:transform .45s var(--ease),border-color .45s var(--ease)}
.person:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.person .avatar{width:56px;height:56px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  font:400 19px var(--serif);color:var(--gold2);background:var(--lift);margin-bottom:20px}
.person h3{font:400 22px/1.2 var(--serif);margin:0 0 5px}
.person .role{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
/* The bio owns the gap below itself, so the credentials never sit tight
   against a paragraph that runs the full height of the card. */
.person p{margin:0 0 18px;font-size:12.5px;line-height:1.8;color:var(--muted)}
/* auto, not a fixed margin: it takes up whatever slack the row's tallest card
   leaves, which lines the credentials up along the foot of every card. */
.person .yrs{margin-top:auto;padding-top:14px;border-top:1px solid var(--l2);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--t4)}

/* Full profile, folded away until asked for. */
.person-more{margin-bottom:18px}
.person-more>summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font:700 9px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);
  list-style:none;transition:color .3s var(--ease)}
.person-more>summary::-webkit-details-marker{display:none}
.person-more>summary:after{content:"";width:5px;height:5px;border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .3s var(--ease)}
.person-more[open]>summary:after{transform:rotate(-135deg) translate(-2px,-2px)}
.person-more>summary:hover{color:var(--gold)}
.person-more>summary:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.person-more p:first-of-type{margin-top:16px}
.person-more p:last-child{margin-bottom:0}

/* Portrait cards.

   The headshots are monochrome on white, which would punch a bright hole in a
   dark card. They are dimmed and warmed to sit in the palette, and come back to
   full on approach — the same "lights up on hover" language the holdings and
   the allocation board already use. A member with no photo keeps the initials
   badge, so the grid never has a gap in it. */
.person .avatar-img{padding:0;overflow:hidden;background:var(--lift);
  transition:border-color .45s var(--ease),transform .45s var(--ease)}
.person .avatar-img img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;
  display:block;filter:grayscale(1) contrast(1.04) brightness(.86) sepia(.12);
  opacity:.9;transition:filter .5s var(--ease),opacity .5s var(--ease),transform .6s var(--ease)}
.person.has-photo:hover .avatar-img{border-color:var(--gold);transform:scale(1.04)}
.person.has-photo:hover .avatar-img img{filter:grayscale(.15) contrast(1.02) brightness(1) sepia(0);
  opacity:1;transform:scale(1.06)}

/* A little more room to breathe once there is a face at the top of the card. */
.person.has-photo .avatar{width:72px;height:72px;margin-bottom:18px}

/* A reason with no figure. base.css sets the numeral and the caption; this only
   promotes the caption when there is no numeral above it, so the row keeps the
   presence the other three cards have. */

/* ==========================================================================
   WhatsApp — a direct line to the desk, on every page.

   Two things are already fixed to the viewport: the Connect tab, which is a
   vertical strip at mid-right above 1300px and a horizontal button at the
   bottom-right below it, and the theme dock at bottom-left. So this sits at the
   bottom-right on wide screens (where Connect is centred) and lifts above
   Connect once Connect drops into that corner.

   The glyph takes --green rather than WhatsApp's own hex: the site carries four
   palettes, and a fixed brand colour would sit outside all of them in the
   monochrome theme.
   ========================================================================== */

.wa-float{position:fixed;right:20px;bottom:20px;z-index:80;
  display:flex;align-items:center;gap:0;overflow:hidden;
  width:54px;height:54px;padding:0 14px;border-radius:27px;
  border:1px solid color-mix(in srgb,var(--green) 40%,transparent);
  background:var(--card);color:var(--green);text-decoration:none;
  box-shadow:0 15px 50px #0008;
  transition:width .4s var(--ease),border-color .4s var(--ease),
    background .4s var(--ease),color .4s var(--ease)}
.wa-float svg{flex-shrink:0;transition:transform .4s var(--ease)}
.wa-label{white-space:nowrap;opacity:0;font:700 10px var(--sans);letter-spacing:.15em;
  text-transform:uppercase;transition:opacity .3s var(--ease);margin-left:10px}

.wa-float:hover,.wa-float:focus-visible{width:158px;border-color:var(--green);
  background:var(--green);color:var(--bg)}
.wa-float:hover .wa-label,.wa-float:focus-visible .wa-label{opacity:1}
.wa-float:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- the chat panel ------------------------------------------------
   Anchored to the same corner as the float and rising out of it. Sized to a
   conversation, not to the viewport: this is one question, not a support
   console, and a panel that filled the screen would read as an interruption.
   ------------------------------------------------------------------------ */
.wa-chat{position:fixed;right:20px;bottom:88px;z-index:81;width:330px;max-width:calc(100vw - 32px);
  background:var(--bg2);border:1px solid var(--l3);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 70px -20px #000d;
  opacity:0;transform:translateY(10px) scale(.98);transform-origin:100% 100%;
  transition:opacity .24s var(--ease),transform .24s var(--ease)}
.wa-chat.open{opacity:1;transform:none}

.wa-chat-head{display:flex;align-items:center;gap:11px;padding:13px 14px;
  background:var(--green);color:var(--bg)}
.wa-avatar{width:34px;height:34px;border-radius:50%;object-fit:contain;flex:none;
  background:var(--bg);padding:5px}
.wa-who{display:flex;flex-direction:column;gap:2px;min-width:0;margin-right:auto}
.wa-who b{font:600 13px var(--sans);letter-spacing:.01em}
.wa-who span{font-size:10.5px;opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-x{background:none;border:0;color:inherit;cursor:pointer;padding:5px;opacity:.75;
  display:grid;place-items:center;border-radius:50%;transition:opacity .25s var(--ease)}
.wa-x:hover{opacity:1}
.wa-x:focus-visible{outline:2px solid var(--bg);outline-offset:1px}

/* A quiet weave behind the messages, the way a chat has a wallpaper — enough
   to read as a conversation rather than a form. */
.wa-chat-body{padding:16px 14px 6px;max-height:46vh;overflow-y:auto;background:
  repeating-linear-gradient(135deg,transparent,transparent 9px,
    rgba(var(--gold-rgb),.02) 9px,rgba(var(--gold-rgb),.02) 18px),var(--bg)}
.wa-bubble{margin:0 0 8px;max-width:88%;padding:10px 13px;
  background:var(--card);border:1px solid var(--l2);border-radius:2px 12px 12px 12px;
  font-size:12.5px;line-height:1.65;color:var(--t1)}
.wa-bubble-2{color:var(--muted);font-size:12px}

/* The visitor's own message, and the desk's answers, are told apart the way a
   thread does it: side, corner and ground, not colour alone. */
.wa-bubble-me{margin-left:auto;background:color-mix(in srgb,var(--green) 16%,var(--card));
  border-color:color-mix(in srgb,var(--green) 30%,transparent);
  border-radius:12px 2px 12px 12px;color:var(--text)}
.wa-bubble-ok{border-color:color-mix(in srgb,var(--green) 34%,transparent);color:var(--text)}
.wa-bubble-err{border-color:color-mix(in srgb,var(--red) 40%,transparent);color:var(--red)}

.wa-chat-foot{display:flex;flex-direction:column;gap:8px;padding:10px 12px 4px;background:var(--bg)}
.wa-chat-foot[hidden]{display:none}
.wa-chat-foot.is-sending{opacity:.55;pointer-events:none}
.wa-send-row{display:flex;align-items:flex-end;gap:8px}
.wa-num{padding:9px 13px;border:1px solid var(--l3);border-radius:18px;background:var(--card);
  color:var(--text);font:400 12.5px/1.4 var(--sans);transition:border-color .25s var(--ease)}
.wa-num:focus{outline:none;border-color:color-mix(in srgb,var(--green) 55%,transparent)}
.wa-num[hidden]{display:none}

/* The number, once given. Quiet enough to stay out of the way of the message
   box, loud enough that a wrong digit is noticed before the second message. */
.wa-to{display:flex;align-items:baseline;gap:7px;margin:0 0 2px;padding:0 4px;
  font-size:10.5px;color:var(--t5)}
.wa-to[hidden]{display:none}
.wa-to b{color:var(--t1);font-weight:600;font-variant-numeric:tabular-nums;font-family:var(--num)}
.wa-to button{margin-left:auto;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:var(--green);text-decoration:underline;text-underline-offset:2px}
.wa-to button:hover{color:var(--g2)}
.wa-to button:focus-visible{outline:1px solid var(--gold);outline-offset:2px}
/* Off-screen rather than display:none — a filler that only reads the layout
   would skip a hidden field, and skipping it is the point of the trap. */
.wa-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.wa-chat-foot textarea{flex:1;resize:none;overflow:auto;max-height:132px;
  padding:10px 12px;border:1px solid var(--l3);border-radius:18px;background:var(--card);
  color:var(--text);font:400 12.5px/1.5 var(--sans);transition:border-color .25s var(--ease)}
.wa-chat-foot textarea:focus{outline:none;border-color:color-mix(in srgb,var(--green) 55%,transparent)}
.wa-send{flex:none;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
  background:var(--green);color:var(--bg);display:grid;place-items:center;
  transition:transform .25s var(--ease),filter .25s var(--ease)}
.wa-send:hover{filter:brightness(1.08)}
.wa-send:active{transform:scale(.94)}
.wa-send:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* Said plainly rather than discovered: the send does leave for WhatsApp. */
.wa-note{margin:0;padding:0 14px 12px;background:var(--bg);
  font-size:9.5px;letter-spacing:.06em;color:var(--t5);text-align:center}

@media (max-width:620px){
  .wa-chat{right:16px;left:16px;width:auto;bottom:132px}
}
@media (prefers-reduced-motion:reduce){
  .wa-chat{transition:none}
  .wa-send:active{transform:none}
}

/* Below 1300px the Connect button takes the bottom-right corner, so step over it. */
@media (max-width:1300px){ .wa-float{bottom:78px} }
@media (max-width:1300px){ .wa-chat{bottom:146px} }

/* On a phone the pair would eat the corner, so the label never expands and the
   button shrinks to the standard tap target. */
@media (max-width:620px){
  .wa-float{width:50px;height:50px;padding:0 12px;bottom:74px;right:16px}
  .wa-float:hover,.wa-float:focus-visible{width:50px;background:var(--card);color:var(--green)}
  .wa-label{display:none}
}

@media (prefers-reduced-motion:reduce){
  .wa-float,.wa-float svg,.wa-label{transition:none}
}

/* ---------- the investment team --------------------------------------- */

/* The principal reads as a feature rather than as a wider card: portrait on
   one side, the argument on the other, with the three facts that matter set as
   figures instead of buried in the prose. */
.lead-person{display:grid;grid-template-columns:260px 1fr;gap:44px;align-items:center;
  position:relative;overflow:hidden;margin-bottom:26px;padding:38px 40px;
  border:1px solid var(--l2);background:linear-gradient(150deg,var(--bg2),var(--card));
  transition:border-color .5s var(--ease)}
.lead-person:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .6s var(--ease);
  background:radial-gradient(420px 220px at 14% 0%,color-mix(in srgb,var(--gold) 12%,transparent),transparent 70%)}
.lead-person:hover{border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.lead-person:hover:before{opacity:1}
.lead-person>*{position:relative;z-index:1}

.lead-portrait{width:260px;height:260px;overflow:hidden;border:1px solid var(--line);
  background:var(--lift)}
.lead-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block;
  filter:grayscale(1) contrast(1.05) brightness(.88) sepia(.1);
  transition:filter .6s var(--ease),transform .8s var(--ease)}
.lead-person:hover .lead-portrait img{filter:grayscale(.1) brightness(1) sepia(0);transform:scale(1.05)}

.lead-body h3{font:400 34px/1.1 var(--serif);margin:12px 0 6px;color:var(--text)}
.lead-body .role{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);
  margin-bottom:16px}
.lead-body p{margin:0;font-size:13.5px;line-height:1.85;color:var(--muted);max-width:62ch}

.lead-facts{display:flex;flex-wrap:wrap;gap:38px;margin:26px 0 24px;padding-top:22px;
  border-top:1px solid var(--l2)}
.lead-facts b{display:block;font:400 30px/1 var(--serif);color:var(--gold2);
  font-variant-numeric:tabular-nums;font-family:var(--num)}
.lead-facts span{display:block;margin-top:7px;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t4)}

.lead-more{display:inline-flex;align-items:center;gap:8px;font:700 9.5px var(--sans);
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold2);text-decoration:none}
.lead-more svg{transition:transform .35s var(--ease)}
.lead-more:hover svg{transform:translateX(4px)}

/* The chip names the part of the process each person owns, so the grid reads as
   the framework staffed rather than as a list of job titles. */
.person-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.person-focus{flex-shrink:0;font:700 8px var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold2);padding:5px 9px;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--gold) 24%,transparent);
  transition:border-color .45s var(--ease),background .45s var(--ease)}
.person:hover .person-focus{border-color:var(--gold);
  background:color-mix(in srgb,var(--gold) 10%,transparent)}

/* The same radial lift the holdings cards use, so the page belongs to the site. */
.person:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .5s var(--ease);
  background:radial-gradient(300px 160px at 20% 0%,color-mix(in srgb,var(--gold) 10%,transparent),transparent 70%)}
.person:hover:before{opacity:1}
.person>*{position:relative;z-index:1}
.person.has-photo .avatar{width:84px;height:84px;margin-bottom:0}

@media (max-width:1080px){
  .lead-person{grid-template-columns:200px 1fr;gap:32px;padding:30px}
  .lead-portrait{width:200px;height:200px}
}
@media (max-width:720px){
  .lead-person{grid-template-columns:1fr;gap:26px;text-align:left}
  .lead-portrait{width:150px;height:150px}
  .lead-facts{gap:26px}
}

@media (max-width:900px){ .people{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .people{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  .person .avatar-img,.person .avatar-img img{transition:none}
  .person.has-photo:hover .avatar-img,.person.has-photo:hover .avatar-img img{transform:none}
}

/* ---------- vertical timeline ------------------------------------------ */
.tline{position:relative;padding-left:40px}
.tline:before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(var(--gold),color-mix(in srgb,var(--gold) 15%,transparent))}
.tline-item{position:relative;padding:0 0 46px}
.tline-item:last-child{padding-bottom:0}
.tline-item:before{content:"";position:absolute;left:-36px;top:7px;width:9px;height:9px;border-radius:50%;
  background:var(--bg);border:1px solid var(--gold);transition:.45s var(--ease)}
.tline-item.in:before{background:var(--gold);box-shadow:0 0 0 4px rgba(var(--gold-rgb),.16)}

/* A light running down the rail, continuously.

   The obvious way to do this would be a head on a timer plus a pulse on each
   marker, delayed by its position — which is what the journey does, and it
   works there because those stages are equal-width columns whose positions are
   known. Here they are not: every entry is as tall as its own paragraph, so
   any delay worked out in advance would drift out of step with the marker it
   was meant to light, and would drift differently the moment someone edits the
   copy.

   So nothing is timed against anything. The glow is simply wide enough to
   contain the markers and paints over them as it passes, which makes each one
   brighten exactly when the light reaches it — by construction rather than by
   arithmetic. Edit the text, add an entry, and it stays correct.

   The rail sits at left:9px and the markers span 4px to 13px, so a 21px band
   from -1px covers both. It stops short of the text, which starts at 40px. */
.tline:after{content:"";position:absolute;left:-1px;top:6px;bottom:6px;width:21px;
  pointer-events:none;
  background:radial-gradient(ellipse 9px 56px at 50% 0,
    rgba(var(--gold2-rgb),.95), rgba(var(--gold-rgb),.34) 38%, transparent 70%);
  background-repeat:no-repeat;background-size:100% 124px;background-position:50% -124px;
  animation:tlineRun 7.5s linear infinite}
/* Percentages in background-position are measured against the box minus the
   image, so 100% is the last position that still fits and the extra 124px
   carries it fully off the bottom before it wraps. */
@keyframes tlineRun{
  from{background-position:50% -124px}
  to  {background-position:50% calc(100% + 124px)}
}
.tline-year{font:700 10px/1 var(--num);font-variant-numeric:tabular-nums;letter-spacing:.18em;color:var(--gold);margin-bottom:10px}
.tline-item h3{font:400 24px/1.2 var(--serif);margin:0 0 9px}
.tline-item p{margin:0;font-size:13px;line-height:1.8;color:var(--muted);max-width:62ch}
@media(prefers-reduced-motion:reduce){.tline:after{animation:none;opacity:0}}

/* ---------- forms ------------------------------------------------------ */
.formcard{padding:38px 40px;border:1px solid var(--line);background:linear-gradient(155deg,var(--bg2),var(--card))}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.formgrid .full{grid-column:1/-1}
.fldw{margin:14px 0}
.fldw label{display:block;color:var(--t4);font-size:9px;letter-spacing:.15em;text-transform:uppercase;margin:0 0 7px}
.fldw label .req{color:var(--gold)}
.fldw input,.fldw select,.fldw textarea{width:100%;background:var(--card);border:1px solid var(--l3);
  color:var(--text);padding:12px 13px;outline:none;font:400 13px var(--sans);transition:.3s}
.fldw input:focus,.fldw select:focus,.fldw textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.12)}
.fldw textarea{min-height:110px;resize:vertical}
.fldw .hint{margin-top:6px;font-size:10.5px;color:var(--t5)}
.fldw.err input,.fldw.err select,.fldw.err textarea{border-color:var(--red)}
.fldw .err-msg{display:none;margin-top:6px;font-size:10.5px;color:var(--red)}
.fldw.err .err-msg{display:block}
.checkrow{display:flex;gap:11px;align-items:flex-start;margin:20px 0 4px;font-size:11.5px;line-height:1.7;color:var(--muted)}
.checkrow input{width:15px;height:15px;flex:none;margin-top:2px;accent-color:var(--gold)}
.formcard .btn{margin-top:20px}
.formnote{margin-top:18px;font-size:10.5px;line-height:1.8;color:var(--t5)}
.formstate{display:none;align-items:flex-start;gap:12px;margin-top:18px;padding:16px 18px;font-size:12px;line-height:1.7}
.formstate.show{display:flex}
.formstate.ok{color:var(--green);border:1px solid rgba(var(--green-rgb),.3);background:rgba(var(--green-rgb),.06)}
.formstate.bad{color:var(--red);border:1px solid color-mix(in srgb,var(--red) 35%,transparent);
  background:color-mix(in srgb,var(--red) 8%,transparent)}

/* login */
.loginwrap{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);
  background:linear-gradient(150deg,var(--bg2),var(--card))}
.loginside{padding:48px 46px;border-right:1px solid var(--line)}
.loginside h2{font:400 clamp(30px,3.4vw,44px)/1.05 var(--serif);margin:14px 0 16px}
.loginside p{font-size:13.5px;line-height:1.8;color:var(--muted);max-width:44ch}
.loginform{padding:48px 46px}

/* ---------- CTA band --------------------------------------------------- */
.ctaband{position:relative;overflow:hidden;padding:88px 0;border-top:1px solid var(--line);
  background:linear-gradient(140deg,var(--bg2),var(--bg))}
.ctaband:before{content:"";position:absolute;width:620px;height:620px;border-radius:50%;left:-200px;bottom:-340px;
  background:radial-gradient(circle,rgba(var(--cyan-rgb),.1),transparent 62%)}
.ctaband .container{position:relative;display:flex;align-items:center;justify-content:space-between;gap:44px;flex-wrap:wrap}
.ctaband h2{font:400 clamp(30px,3.8vw,50px)/1.05 var(--serif);margin:12px 0 0;max-width:18ch}
.ctaband p{margin:16px 0 0;font-size:13.5px;line-height:1.8;color:var(--muted);max-width:46ch}
.ctaband .actions{margin:0;opacity:1;animation:none}

/* next / previous page pager */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line)}
.pager a{padding:32px 34px;background:var(--bg);transition:background .4s var(--ease)}
.pager a:hover{background:var(--alt)}
.pager a:last-child{text-align:right}
.pager span{display:block;font:700 9px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--t5)}
.pager b{display:block;margin-top:11px;font:400 24px/1.15 var(--serif);color:var(--text);transition:color .3s}
.pager a:hover b{color:var(--gold2)}

/* ---------- footer upgrade --------------------------------------------- */
.foot{grid-template-columns:1.2fr repeat(5,1fr);gap:28px}
.foot-cols h4{margin:0 0 4px}
/* The column heading is now a link. It has to keep looking like a heading —
   .foot a is a block at 11px with its own margins, none of which belongs on
   this one. */
.foot-cols h4 a{display:inline;margin:0;font-size:inherit;letter-spacing:inherit;
  text-transform:inherit;color:inherit}
.foot-cols h4 a:hover{color:var(--gold2)}
.foot .foot-note{margin-top:14px;font-size:10.5px;line-height:1.8;color:var(--t6);max-width:34ch}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;margin-top:34px;padding-top:20px;
  border-top:1px solid var(--l1);font-size:10px;color:var(--t6)}
.foot-legal a{display:inline;margin:0;font-size:10px}
.foot-legal .sep{opacity:.4}

/* ======================================================================
   WHERE IS THE STRENGTH — the flagship interactive experience.
   Four tiers: Market → Sector → Industry → Leadership. Shows conclusions
   (ranks, direction, breadth) and never the inputs that produced them.
   ====================================================================== */
.wis{background:var(--deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* the tier rail across the top */
.wis-flow{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-bottom:0}
.wis-step{position:relative;background:var(--card);padding:20px 22px;text-align:left;border:0;cursor:pointer;
  color:var(--text);font-family:var(--sans);transition:background .4s var(--ease)}
.wis-step:hover{background:var(--hover)}
.wis-step[aria-selected="true"]{background:linear-gradient(150deg,var(--lift),var(--card))}
.wis-step[aria-selected="true"]:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold)}
.wis-step .n{font:700 9px/1 var(--sans);letter-spacing:.18em;color:var(--gold);opacity:.6}
.wis-step[aria-selected="true"] .n{opacity:1}
.wis-step .t{display:block;margin-top:11px;font:400 20px/1.1 var(--serif)}
.wis-step .d{display:block;margin-top:7px;font-size:10.5px;line-height:1.6;color:var(--t4)}
.wis-step:disabled{cursor:not-allowed;opacity:.45}

.wis-stage{border:1px solid var(--line);border-top:0;background:linear-gradient(165deg,var(--bg2),var(--card));
  padding:32px 34px;min-height:520px}
.wis-pane{display:none;animation:wisIn .5s var(--ease)}
.wis-pane.on{display:block}
@keyframes wisIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.wis-pane-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--l2)}
.wis-pane-head h3{font:400 clamp(24px,2.8vw,34px)/1.1 var(--serif);margin:9px 0 0}
.wis-pane-head p{margin:9px 0 0;font-size:12.5px;line-height:1.7;color:var(--muted);max-width:56ch}
.wis-asof{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--t5);white-space:nowrap}

/* tier 1 — market regime */
.regime{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:start}
.gauge{position:relative;padding:26px 28px;border:1px solid var(--l2);background:var(--card)}
.gauge-title{font:700 9px/1 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--gold)}
.gauge-read{display:flex;align-items:baseline;gap:14px;margin:18px 0 6px}
.gauge-read b{font:400 clamp(30px,4vw,46px)/1 var(--num);font-variant-numeric:tabular-nums;color:var(--text)}
.gauge-read span{font:700 10px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--green)}
.gauge-scale{position:relative;height:8px;margin:24px 0 10px;background:linear-gradient(90deg,
  color-mix(in srgb,var(--red) 55%,transparent),var(--l3) 45%,var(--green))}
.gauge-needle{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--text);
  box-shadow:0 0 0 3px rgba(var(--bg-rgb),.75);transition:left 1.1s var(--ease)}
.gauge-ends{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t5)}
.gauge-note{margin:20px 0 0;font-size:12px;line-height:1.75;color:var(--muted)}
.breadth{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.breadth-row{display:grid;grid-template-columns:1fr 78px 96px;gap:16px;align-items:center;
  padding:15px 18px;background:var(--card);font-size:12px}
.breadth-row .lbl{color:var(--t1)}
.breadth-row .val{text-align:right;font:600 13px var(--sans);color:var(--gold2);font-variant-numeric:tabular-nums;font-family:var(--num)}
.breadth-row .mini{height:4px;background:var(--l1);position:relative;overflow:hidden}
.breadth-row .mini i{position:absolute;inset:0 auto 0 0;width:0;background:var(--green);transition:width 1s var(--ease)}

/* tier 2 — sectors */
.sectors{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.sect{position:relative;overflow:hidden;text-align:left;padding:20px 20px 18px;cursor:pointer;
  border:1px solid var(--l2);background:var(--card);color:var(--text);font-family:var(--sans);
  transition:transform .4s var(--ease),border-color .4s var(--ease)}
.sect:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.sect[aria-pressed="true"]{border-color:var(--gold);background:linear-gradient(150deg,var(--lift),var(--card))}
.sect-rank{font:700 9px/1 var(--num);font-variant-numeric:tabular-nums;letter-spacing:.16em;color:var(--gold)}
.sect h4{font:400 18px/1.2 var(--serif);margin:12px 0 14px;font-weight:400}
/* display:block matters — this is a <span> inside a block button, and height
   has no effect on a non-replaced inline box, so the track collapsed to 0x0
   and no sector meter ever drew. */
.sect-meter{display:block;height:5px;background:color-mix(in srgb,var(--text) 7%,transparent);position:relative;overflow:hidden;margin-bottom:12px}
.sect-meter i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--cyan),var(--green));
  transition:width 1s var(--ease)}
.sect.is-weak .sect-meter i{background:linear-gradient(90deg,color-mix(in srgb,var(--red) 50%,transparent),var(--red))}
.sect-foot{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--t4)}
.sect-dir{display:flex;gap:2px;font-size:8px}
.sect-dir .up{color:var(--green)}.sect-dir .down{color:var(--red)}.sect-dir .flat{color:var(--gold)}

/* --- tier 1 entrance -------------------------------------------------------
   The panel assembles itself: cards rise in rank order, then their meters
   grow. --i is the card's index, set in strength.js, so the cascade follows
   the ordering rather than the DOM happening to be in that order. The meters
   only ever restate the standing they were given — deliberately no number,
   because the copy beside them says the meter is not a score.

   Every rule here is scoped to .anim, which strength.js adds when it starts
   the entrance and removes once it is over. That matters: the hidden state
   lives only while something is actively animating it, so a browser that
   never advances the transition — a tab backgrounded through load — ends up
   with plain, visible cards instead of an empty panel. Same reasoning as the
   reveal safety net in app.js. */
.sectors.anim .sect{opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  transition-delay:calc(var(--i,0) * 55ms)}
.sectors.anim.in .sect{opacity:1;transform:translateY(0)}
/* Hover has to beat the entrance rule, or a card cannot lift until it ends. */
.sectors.anim.in .sect:hover{transform:translateY(-4px);transition-delay:0s}
.sectors.anim .sect-meter i{transition:width 1.05s var(--ease);
  transition-delay:calc(var(--i,0) * 55ms + 260ms)}

/* A brighter head on the bar, so the eye reads where it stops. */
.sect-meter i:after{content:"";position:absolute;right:0;top:0;bottom:0;width:14px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--g5) 70%,transparent))}
.sect.is-weak .sect-meter i:after{background:linear-gradient(90deg,transparent,
  color-mix(in srgb,var(--red) 60%,transparent))}
.sect:hover .sect-meter i{filter:brightness(1.25)}

@media(prefers-reduced-motion:reduce){
  .sectors.anim .sect{opacity:1;transform:none;transition:none;transition-delay:0s}
  .sectors.anim .sect-meter i{transition:none;transition-delay:0s}
}

/* tier 3 — industries */
.ind-head{display:grid;grid-template-columns:34px 1fr repeat(3,58px) 92px;gap:14px;align-items:center;
  padding:0 16px 11px;font:700 8.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--t5)}
.ind-head span:not(:nth-child(2)){text-align:center}
.ind-head span:last-child{text-align:right}
.ind-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  max-height:420px;overflow:auto}
.ind-row{display:grid;grid-template-columns:34px 1fr repeat(3,58px) 92px;gap:14px;align-items:center;
  width:100%;text-align:left;padding:13px 16px;background:var(--card);border:0;cursor:pointer;
  color:var(--text);font-family:var(--sans);transition:background .3s var(--ease)}
.ind-row:hover{background:var(--hover)}
.ind-row[aria-pressed="true"]{background:linear-gradient(120deg,var(--lift),var(--card))}
.ind-row .rk{font:600 11px var(--sans);color:var(--t5);font-variant-numeric:tabular-nums;font-family:var(--num)}
.ind-row[aria-pressed="true"] .rk{color:var(--gold)}
.ind-row .nm{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ind-row .tf{text-align:center;font-size:10px}
.ind-row .tf .up{color:var(--green)}.ind-row .tf .down{color:var(--red)}.ind-row .tf .flat{color:var(--gold)}
.ind-row .st{display:flex;justify-content:flex-end;gap:2px}
.ind-row .st i{width:4px;height:15px;background:var(--l3);border-radius:1px}
.ind-row .st i.on{background:var(--green)}
.ind-row .st i.mid{background:var(--gold)}

/* tier 4 — leadership */
.leaders{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.leader{position:relative;overflow:hidden;padding:20px;border:1px solid var(--l2);background:var(--card);
  transition:transform .4s var(--ease),border-color .4s var(--ease)}
.leader:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--gold) 40%,transparent)}
.leader-top{display:flex;align-items:center;justify-content:space-between;gap:9px}
.leader-top b{font:500 13px/1.2 var(--sans);letter-spacing:.02em;margin-right:auto}
/* The company's own mark, at the size of the line it sits on. The icon-set
   marks are full-bleed squares, so they fill the disc; the hand-sourced ones
   are drawn on transparency and need a light ground under them. */
.leader-logo{width:22px;height:22px;flex-shrink:0;border-radius:50%;object-fit:contain;
  padding:3px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.leader-logo.is-tile{padding:0;object-fit:cover;background:none}
.leader canvas{display:block;width:100%;height:46px;margin:14px 0 10px}
.leader-foot{display:flex;justify-content:space-between;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t4)}
.leader-foot b{color:var(--gold2);font-weight:600;letter-spacing:0;text-transform:none;font-size:11px}

/* method / confidentiality note */
.wis-method{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-top:0}
.wis-method div{background:var(--card);padding:20px 22px}
.wis-method h5{margin:0 0 8px;font:700 9px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.wis-method p{margin:0;font-size:11.5px;line-height:1.75;color:var(--muted)}

.wis-loading{padding:70px 20px;text-align:center;color:var(--t4);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase}
.wis-locked{padding:40px 34px;border:1px dashed color-mix(in srgb,var(--gold) 35%,transparent);
  background:rgba(var(--gold-rgb),.04);text-align:center}
.wis-locked h4{font:400 24px/1.2 var(--serif);margin:0 0 10px}
.wis-locked p{margin:0 auto 20px;font-size:12.5px;line-height:1.75;color:var(--muted);max-width:48ch}

/* ---------- motion ------------------------------------------------------ */
.stagger>*{opacity:0;transform:translateY(24px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:0s}
.stagger.in>*:nth-child(2){transition-delay:.07s}
.stagger.in>*:nth-child(3){transition-delay:.14s}
.stagger.in>*:nth-child(4){transition-delay:.21s}
.stagger.in>*:nth-child(5){transition-delay:.28s}
.stagger.in>*:nth-child(6){transition-delay:.35s}
.stagger.in>*:nth-child(7){transition-delay:.42s}
.stagger.in>*:nth-child(8){transition-delay:.49s}

/* ---------- responsive -------------------------------------------------- */
@media(max-width:1180px){
  .links{gap:0}
  .navitem>a{padding:10px 11px;font-size:9.5px}
  .foot{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:1080px){
  .split{gap:40px}
  .people{grid-template-columns:repeat(2,1fr)}
  .wis-flow{grid-template-columns:repeat(2,1fr);grid-auto-flow:row}
  .wis-flow .wis-step:last-child:nth-child(odd){grid-column:1/-1}
}
@media(max-width:1000px){
  .links,.login-menu{display:none}
  .hamb{display:block}
  .phero-grid{grid-template-columns:1fr;gap:34px;align-items:start}
  .phero-facts{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .split,.split.wide-left{grid-template-columns:1fr;gap:34px}
  .split-sticky{position:static}
  .loginwrap{grid-template-columns:1fr}
  .loginside{border-right:0;border-bottom:1px solid var(--line)}
  .feature{grid-template-columns:1fr}
  .feature-viz{border-left:0;border-top:1px solid var(--line);min-height:220px}
  .regime{grid-template-columns:1fr}
  .wis-method{grid-template-columns:1fr}
}
@media(max-width:760px){
  .phero{padding:104px 0 48px}
  body[data-nav="solid"] .phero{padding-top:68px}
  .subnav{top:57px}
  .item{grid-template-columns:1fr;gap:12px;padding:22px 20px}
  .item:hover{padding-left:24px}
  .item-go{display:none}
  .people{grid-template-columns:1fr}
  .formgrid{grid-template-columns:1fr}
  .formcard,.loginside,.loginform,.feature-body{padding:28px 24px}
  .defrow{grid-template-columns:1fr;gap:8px}
  .pager{grid-template-columns:1fr}
  .pager a:last-child{text-align:left}
  .enum-row{grid-template-columns:44px 1fr;gap:16px;padding:20px}
  .pull{padding:32px 26px}
  .wis-stage{padding:22px 18px}
  .ind-head,.ind-row{grid-template-columns:26px 1fr 46px 46px 46px;gap:8px;padding-left:12px;padding-right:12px}
  .ind-head span:last-child,.ind-row .st{display:none}
  .foot{grid-template-columns:1fr 1fr}
  .ctaband{padding:64px 0}
}
@media(max-width:520px){
  .wis-flow{grid-template-columns:1fr;grid-auto-flow:row}
  .filters{gap:14px}
  .searchbox{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .stagger>*{opacity:1;transform:none}
  .reveal,.reveal-scale{opacity:1;transform:none}
}

/* The prototype pinned the FAQ rail to a fixed offset, which predates the
   section sub-nav. Clear both sticky bars instead. */
.faq-aside{top:calc(var(--nav-h) + var(--subnav-h, 0px) + 26px)}

/* ---------- hero ranking teaser ----------------------------------------
   The "Where's the Strength" block in the hero card. The block itself is no
   longer one big link — it carries the horizon tabs, and a button inside an
   anchor is not something a browser can be asked to make sense of — so the
   footer row is the link out to the full ranking. Row styling lives with the
   rest of the card, further down under HERO SIGNAL CARD. */
.sector-block{display:block;color:inherit}
.sector-block .sector-list{cursor:default}
.sector-open:focus-visible{outline:2px solid var(--gold2);outline-offset:4px}

/* ---------- industry ranking board --------------------------------------

   Forty-five rows of ordinals is a lot to read and almost nothing to see. The
   colouring below is the report's own heatmap: every rank cell carries a wash
   whose strength comes from where that rank sits in the field, so the shape of
   an industry across three horizons reads before any figure does. --tint and
   --a are set per cell by the page; a cell with neither stays plain, which is
   most of them.
   ------------------------------------------------------------------------ */
.rank-table td{transition:background-color .3s var(--ease)}
.rank-table .rk{font-variant-numeric:tabular-nums;font-family:var(--num);color:var(--gold);font-weight:600}
.rank-table .hcell{position:relative;background-color:rgba(var(--tint,var(--gold-rgb)),var(--a,0))}

/* A gold rule between every column, header included, so the board reads as a
   ruled ledger rather than as floating numbers. Softer than --line, which at
   24% would put nine hard edges through a table that already carries a colour
   wash; at 13% it separates the columns without competing with them. The rule
   goes on the leading edge of each cell after the first, so the table keeps a
   clean outer edge. */
.rank-table th + th,
.rank-table tbody tr[data-cat] td + td{
  border-left:1px solid color-mix(in srgb,var(--gold) 13%,transparent)}

.rank-table .dir{white-space:nowrap;letter-spacing:3px;font-size:11px}
.rank-table .dir .up{color:var(--green)}
.rank-table .dir .down{color:var(--red)}
.rank-table .dir .flat{color:var(--gold)}
.rank-table tr[hidden]{display:none}
.rank-table .sector-tag{font:700 8.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--t4);border:1px solid var(--l3);padding:5px 8px;white-space:nowrap;
  transition:color .3s var(--ease),border-color .3s var(--ease)}
.rank-table tbody tr:hover .sector-tag{color:var(--t1);border-color:var(--l4)}

/* Above or below the benchmark is the one genuinely binary column, so it is
   marked rather than merely coloured — colour alone would leave it unreadable
   to a reader who cannot separate the two, and invisible in the mono theme. */
.vs{display:inline-flex;align-items:center;gap:7px;font-size:11.5px}
.vs i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.rank-table .above-yes{color:var(--green)}
.rank-table .above-no{color:var(--red)}
.rank-table .above-no i{background:none;box-shadow:inset 0 0 0 1px currentColor}

/* The row under the pointer gets the same leading hairline the panels use, so
   one gesture means one thing across the site. */
.rank-table tbody tr[data-cat]{position:relative}
.rank-table tbody tr[data-cat] td:first-child{box-shadow:inset 2px 0 0 transparent;
  transition:box-shadow .3s var(--ease)}
.rank-table tbody tr[data-cat]:hover td:first-child{box-shadow:inset 2px 0 0 var(--green)}
.rank-table tbody tr[data-cat]:hover .rk{color:var(--gold2)}
.rank-table td a{transition:color .3s var(--ease)}
.rank-table tbody tr:hover td a{color:var(--gold2)}
.rank-locked td{background:repeating-linear-gradient(135deg,transparent,transparent 6px,
  rgba(var(--gold-rgb),.03) 6px,rgba(var(--gold-rgb),.03) 12px);text-align:center;
  padding:34px 20px;color:var(--muted);font-size:12.5px}

/* The stat band sizes itself to however many stats it was given. base.css
   hard-codes five; ui.js sets --cols from the array it renders, so removing a
   stat closes the row rather than leaving an empty column behind. */
.keystats .container{grid-template-columns:repeat(var(--cols,5),1fr)}

/* ---------- board glyphs ------------------------------------------------
   The same icon table the home hero's card draws from, so an industry wears
   one picture across the site. See app/public/js/industry-icons.js. */
.bt-name button,.bt-locked{display:flex;align-items:center;gap:10px;text-align:left}
.bt-glyph{width:17px;height:17px;flex:none;color:var(--gold);opacity:.82;
  transition:color .3s var(--ease),opacity .3s var(--ease)}
.bt-name button:hover .bt-glyph{color:var(--gold2);opacity:1}

/* ---------- withheld rows -----------------------------------------------
   The forty industries an anonymous reader can see the shape of. The blur is
   presentation and nothing else — what makes these safe is that the cells are
   empty: no rank, no horizon standing, no trend ever reaches the document.
   See lockedRows() in app/public/js/strength.js. */
/* The call to action floats over the foot of the board rather than sitting
   under it, so it is on the blurred rows the moment the table comes into view.

   Anchored to the frame, not to the scrollport: a sticky footer would have to
   be the last thing inside .tablewrap, and an element already flush with the
   bottom of its containing block has nowhere to stick to. The frame does not
   scroll, so the banner holds the bottom of the board however far down the
   rows the reader has gone.

   Transparent to the pointer apart from the button itself — the board scrolls
   underneath it, and a banner that swallowed the wheel over a third of the
   table would be a worse trade than the one it is making. */
#wis .board-frame{position:relative}
#wis .board-signin{position:absolute;left:0;right:0;bottom:0;z-index:4;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:56px 26px 26px;text-align:center;
  background:linear-gradient(180deg,rgba(var(--bg-rgb),0),rgba(var(--bg-rgb),.88) 42%,
    rgba(var(--bg-rgb),.97))}
#wis .board-signin p{margin:0;font:400 20px/1.25 var(--serif);color:var(--text)}
#wis .board-signin span{font-size:12px;line-height:1.7;color:var(--muted);max-width:46ch}
#wis .board-signin .btn{margin-top:5px;pointer-events:auto}

/* The way back for someone who already has an account. Deliberately quiet —
   the enquiry is the path being offered, this is the one being kept open. */
.gate-signin{margin-top:14px;font-size:11.5px;color:var(--t4);pointer-events:auto}
.gate-signin a{color:var(--gold2);border-bottom:1px solid rgba(var(--gold-rgb),.4);
  padding-bottom:1px;transition:border-color .3s var(--ease)}
.gate-signin a:hover{border-bottom-color:var(--gold2)}

.board-locked{filter:blur(3.6px);opacity:.5;pointer-events:none;user-select:none}
.board-locked td{padding-top:11px;padding-bottom:11px}
.board-locked .bt-locked{color:var(--t3);font-size:12.5px}
.board-locked .bt-glyph{color:var(--t4);opacity:.7}
.lk-bar{display:inline-block;height:8px;border-radius:4px;
  background:rgba(var(--text-rgb),.15);vertical-align:middle}
.board-locked .num .lk-bar{min-width:18px}
/* The blur is the whole effect, so a reader who has asked for less motion
   still gets it — but the rows stop competing for attention. */
@media (prefers-reduced-motion:reduce){.board-locked{opacity:.4}}

/* ---------- leadership card: live price + weekly line -------------------- */
.leader-price{display:flex;align-items:baseline;gap:9px;margin:10px 0 2px;min-height:19px}
.leader-price .lp-val{font:600 15px/1 var(--sans);color:var(--text);font-variant-numeric:tabular-nums;font-family:var(--num)}
.leader-price .lp-chg{font:600 10.5px/1 var(--sans);font-variant-numeric:tabular-nums;font-family:var(--num);color:var(--t5)}
.leader-price .lp-chg.up{color:var(--green)}
.leader-price .lp-chg.down{color:var(--red)}
.leader-scale{margin-top:-4px;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--t6)}

/* A leadership card opens the same dialog a holding does. The card already
   clips its own overflow, so the prompt parks just below the bottom edge and
   slides up on approach rather than needing a layer over the figures. */
.leader-live{cursor:pointer}
.leader-live:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.leader-live:after{content:"Open chart";position:absolute;right:0;bottom:0;left:0;
  padding:8px 10px;text-align:center;z-index:2;pointer-events:none;
  background:linear-gradient(0deg,rgba(var(--bg-rgb),.94),rgba(var(--bg-rgb),.62));
  border-top:1px solid color-mix(in srgb,var(--gold) 26%,transparent);
  font:700 8.5px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold2);
  opacity:0;transform:translateY(100%);transition:.35s var(--ease)}
.leader-live:hover:after,.leader-live:focus-visible:after{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.leader-live:after{transition:opacity .2s linear;transform:none}}

/* ==========================================================================
   Sector allocation — the exposure board on Portfolio Construction.
   Percentages only: no position names, no rupee figures. Tokens throughout,
   so it reads correctly in emerald, teal, black and monochrome.
   ========================================================================== */

.alloc{margin-top:48px}

/* The limits list sits full width under the board, so it splits rather than
   running to a 1,400px measure. */
@media (min-width:900px){
  .limits-wide .enum{grid-template-columns:1fr 1fr}
  .limits-wide .enum-row:nth-child(2n){border-left:1px solid var(--line)}
}
.alloc-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding-bottom:18px;border-bottom:1px solid var(--line)}
.alloc-top h2{margin:6px 0 0}
.alloc-count{flex-shrink:0;font:700 9px var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--t4);white-space:nowrap;padding-bottom:6px}

.alloc-body{display:grid;grid-template-columns:200px 1fr;gap:48px;align-items:center;margin-top:32px}

.alloc-ring{position:relative;width:200px;height:200px}
.alloc-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.alloc-bg{fill:none;stroke:var(--l2);stroke-width:15}
/* The slice steps out along its own mid-angle (--dx/--dy, worked out when the
   ring is drawn), thickens, and picks up a glow in its own colour. Siblings
   fade rather than disappear, so the ring still reads as a whole. */
.alloc-arc{fill:none;stroke-width:15;
  transition:stroke-width .3s var(--ease),opacity .3s var(--ease),
    transform .35s var(--ease),filter .3s var(--ease)}
.alloc-ring.is-hot .alloc-arc{opacity:.32}
.alloc-ring.is-hot .alloc-arc.is-on,.alloc-arc.is-on{opacity:1;stroke-width:19;
  transform:translate(var(--dx,0),var(--dy,0));
  filter:drop-shadow(0 0 7px var(--c,var(--gold)))}

/* The row lifts with it, so the pair reads as one object. */
.alloc-row{transition:border-color .3s var(--ease)}
.alloc-row.is-on{border-bottom-color:var(--c,var(--gold))}
.alloc-row.is-on .alloc-name{color:var(--c,var(--text))}
.alloc-row .alloc-name{transition:color .3s var(--ease)}
.alloc-row.is-on .alloc-track i{filter:drop-shadow(0 0 5px var(--c,var(--gold)))}

/* The centre readout is swapped on hover, so it should not jump as it changes. */
.alloc-mid b,.alloc-mid span{transition:color .3s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .alloc-arc{transition:none}
  .alloc-arc.is-on{transform:none}
  .alloc-row{transition:none}
}
.alloc-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;pointer-events:none;padding:0 34px}
.alloc-mid b{display:block;font:400 25px/1 var(--serif);color:var(--text);font-variant-numeric:tabular-nums;font-family:var(--num)}
.alloc-mid span{display:block;margin-top:5px;font:700 7.5px var(--sans);letter-spacing:.13em;
  text-transform:uppercase;color:var(--t4);line-height:1.35}

/* Two columns of rows, like a fact sheet rather than a chart. */
.alloc-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 44px}
.alloc-row{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline;
  padding:10px 0 11px;border-bottom:1px solid var(--l2)}
.alloc-name{font:500 12.5px/1.25 var(--sans);color:var(--text)}
.alloc-pct{font:600 12.5px/1 var(--sans);color:var(--c,var(--gold2));font-variant-numeric:tabular-nums;font-family:var(--num)}
.alloc-track{grid-column:1 / -1;height:3px;margin-top:7px;background:var(--l2);overflow:hidden}
.alloc-track i{display:block;height:100%;width:0;background:var(--c,var(--gold));
  transition:width 1s var(--ease)}
/* The bars grow with the reveal, so the section animates in as one thing. */
.alloc:not(.in) .alloc-track i{width:0 !important}

@media (max-width:900px){
  .alloc-body{grid-template-columns:1fr;gap:32px;justify-items:center}
  .alloc-list{grid-template-columns:1fr;width:100%;gap:6px}
  .alloc-top{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .alloc-track i{transition:none}
}

/* ==========================================================================
   Holding price history — the dialog a home-page holding opens into.
   Tokens only, so it reads correctly in emerald, teal, black and mono.
   ========================================================================== */

/* The hero's intraday strip is a button that opens the same dialog.
   base.css sizes .spark-wrap and is left alone; these rules only undo the UA's
   button chrome and add the affordance. A 64px strip has no room for the
   corner glyph the holding cards use, so it says what it does in words. */
button.spark-wrap{display:block;width:100%;padding:0;border:0;background:none;
  font:inherit;color:inherit;text-align:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none}
button.spark-wrap:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.spark-open{position:absolute;inset:0;z-index:2;display:flex;align-items:center;
  justify-content:center;gap:8px;pointer-events:none;
  opacity:0;transition:opacity .35s var(--ease);
  background:linear-gradient(0deg,rgba(var(--bg-rgb),.62),rgba(var(--bg-rgb),.28));
  font:700 9px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold2)}
button.spark-wrap:hover .spark-open,
button.spark-wrap:focus-visible .spark-open{opacity:1}
.spark-open i{width:13px;height:13px;background:var(--gold2);
  -webkit-mask:no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l5-6 4 3 5-7'/%3E%3Cpath d='M15 7h4v4'/%3E%3C/svg%3E");
  mask:no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l5-6 4 3 5-7'/%3E%3Cpath d='M15 7h4v4'/%3E%3C/svg%3E")}
/* Motion-reduced visitors get the same affordance, just without the fade. */
@media (prefers-reduced-motion:reduce){.spark-open{transition:none}}

.hold-live{cursor:pointer}
.hold-live:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* A quiet affordance: the card only advertises that it opens on approach. */
.hold-live:after{content:"";position:absolute;right:18px;bottom:16px;width:13px;height:13px;
  z-index:2;opacity:0;transform:translateY(4px);transition:.45s var(--ease);pointer-events:none;
  background:var(--gold);
  -webkit-mask:no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l5-6 4 3 5-7'/%3E%3Cpath d='M15 7h4v4'/%3E%3C/svg%3E");
  mask:no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l5-6 4 3 5-7'/%3E%3Cpath d='M15 7h4v4'/%3E%3C/svg%3E")}
.hold-live:hover:after,.hold-live:focus-visible:after{opacity:.9;transform:translateY(0)}

/* An author `display` beats the UA's [hidden]{display:none}, so every surface
   below that sets one has to opt back in — otherwise a closed dialog keeps its
   box, stays hit-testable and swallows clicks over the middle of the page. */
.hc[hidden],.hc-scrim[hidden],.hc-state[hidden]{display:none}

.hc-scrim{position:fixed;inset:0;z-index:400;background:rgba(var(--ov-rgb),.72);
  backdrop-filter:blur(5px);opacity:0;transition:opacity .3s var(--ease)}
.hc-scrim.open{opacity:1}

.hc{position:fixed;z-index:401;left:50%;top:50%;width:min(880px,94vw);
  transform:translate(-50%,-46%) scale(.97);opacity:0;
  transition:opacity .3s var(--ease),transform .35s var(--ease);
  background:linear-gradient(165deg,var(--bg2),var(--card));
  border:1px solid var(--line);box-shadow:0 50px 110px -40px #000,0 0 0 1px rgba(var(--bg-rgb),.5);
  display:flex;flex-direction:column;overflow:hidden}
.hc.open{opacity:1;transform:translate(-50%,-50%) scale(1)}

.hc-head{display:flex;align-items:center;gap:16px;padding:22px 24px 16px;
  border-bottom:1px solid color-mix(in srgb,var(--text) 8%,transparent)}
.hc-head .crest{width:46px;height:46px;--c1:var(--gold);--c2:var(--gold2)}
.hc-head .crest i{width:36px;height:36px;font-size:12px}
.hc-head .crest-logo{width:36px;height:36px;padding:6px}
.hc-id{min-width:0;flex:1}
.hc-id h3{font:24px var(--serif);font-weight:400;margin:0;line-height:1.1;color:var(--text)}
.hc-tags{display:flex;align-items:center;gap:9px;margin-top:7px}
.hc-tags .hold-role{margin-top:0}
.hc-sym{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--t5)}
/* Resolution and depth of the plotted series. Empty while it loads, and
   :empty keeps the gap from showing before there is anything to say. */
.hc-res{font:700 9px var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold2);padding:4px 9px;
  border:1px solid color-mix(in srgb,var(--gold) 22%,transparent)}
.hc-res:empty{display:none}
.hc-quote{text-align:right;flex-shrink:0}
.hc-quote .lp-val{display:block;font:600 19px/1 var(--sans);color:var(--text);font-variant-numeric:tabular-nums;font-family:var(--num)}
.hc-quote .lp-chg{display:block;margin-top:6px;font:600 10.5px/1 var(--sans);
  font-variant-numeric:tabular-nums;font-family:var(--num);color:var(--t5)}
.hc-quote .lp-chg.up{color:var(--green)}
.hc-quote .lp-chg.down{color:var(--red)}
.hc-x{flex-shrink:0;width:32px;height:32px;line-height:1;font-size:20px;cursor:pointer;
  background:none;color:var(--t4);border:1px solid color-mix(in srgb,var(--text) 10%,transparent);
  transition:.3s var(--ease)}
.hc-x:hover{color:var(--text);border-color:var(--gold)}

.hc-readout{display:flex;align-items:baseline;gap:14px;padding:12px 24px;
  background:color-mix(in srgb,var(--deep) 45%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--text) 6%,transparent)}
.hc-rd-date{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--t5);
  min-width:96px}
.hc-rd-price{font:600 15px/1 var(--sans);color:var(--text);font-variant-numeric:tabular-nums;font-family:var(--num)}
.hc-rd-chg{font:600 10.5px/1 var(--sans);color:var(--t5);font-variant-numeric:tabular-nums;font-family:var(--num)}
.hc-rd-chg.up{color:var(--green)}
.hc-rd-chg.down{color:var(--red)}

.hc-plot{position:relative;height:min(46vh,340px);padding:4px 6px 0}
.hc-plot canvas{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none}
.hc-plot canvas.grabbing{cursor:grabbing}
.hc-state{position:absolute;inset:0;display:grid;place-items:center;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t5)}

.hc-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px 24px 18px;border-top:1px solid color-mix(in srgb,var(--text) 8%,transparent)}
.hc-stats{display:flex;gap:28px}
.hc-stat em{display:block;font-style:normal;font-size:8px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.hc-stat b{font:600 12.5px/1 var(--sans);color:var(--text);font-variant-numeric:tabular-nums;font-family:var(--num)}
.hc-stat b.up{color:var(--green)}
.hc-stat b.down{color:var(--red)}
.hc-tools{display:flex;align-items:center;gap:7px}
.hc-hint{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--t6);
  margin-right:6px}
.hc-btn{width:28px;height:28px;cursor:pointer;background:none;color:var(--t3);
  font:600 13px/1 var(--sans);border:1px solid color-mix(in srgb,var(--text) 12%,transparent);
  transition:.3s var(--ease)}
.hc-btn:hover{color:var(--gold2);border-color:var(--gold)}
.hc-btn-wide{width:auto;padding:0 11px;font-size:9.5px;letter-spacing:.12em}

@media(max-width:720px){
  .hc-head{padding:18px 16px 14px;gap:12px;flex-wrap:wrap}
  .hc-head .crest{display:none}
  .hc-readout,.hc-foot{padding-left:16px;padding-right:16px}
  .hc-plot{height:44vh}
  .hc-foot{flex-direction:column;align-items:flex-start;gap:14px}
  .hc-stats{gap:20px}
  .hc-hint{display:none}
}

/* ==========================================================================
   Section rail — an in-page index built by reading.js from the headings the
   page already carries. The dashes sit in the page margin; the labels are
   absolutely positioned so they never widen the rail, and carry their own
   background so they stay legible on the narrower screens where they have to
   overlap the text column. reading.js measures the margin and decides whether
   a label can stand open or should wait to be asked for.
   ========================================================================== */

.srail{position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:60;
  max-height:74vh;display:flex;align-items:center;pointer-events:none}
.srail-off{display:none}
.srail-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;
  pointer-events:auto}
.srail-link{position:relative;display:block;padding:6px 0;text-decoration:none;
  color:var(--t6);transition:color .35s var(--ease)}
.srail-dot{display:block;width:16px;height:1px;background:currentColor;opacity:.55;
  transition:width .4s var(--ease),opacity .4s var(--ease),box-shadow .4s var(--ease)}
.srail-text{position:absolute;left:30px;top:50%;transform:translateY(-50%) translateX(-8px);
  white-space:nowrap;opacity:0;pointer-events:none;
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--t1);
  background:color-mix(in srgb,var(--bg2) 94%,transparent);
  border:1px solid color-mix(in srgb,var(--gold) 22%,transparent);
  padding:6px 10px;box-shadow:0 12px 30px -16px #000;
  transition:opacity .35s var(--ease),transform .4s var(--ease)}

.srail-link.on{color:var(--gold2)}
.srail-link.on .srail-dot{width:28px;opacity:1;box-shadow:0 0 10px var(--gold)}
.srail-link:hover,.srail-link:focus-visible{color:var(--text)}
.srail-link:hover .srail-dot{width:28px;opacity:1}
.srail-link:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

/* Asked for: hovering or tabbing the rail opens every label. */
.srail:hover .srail-text,.srail:focus-within .srail-text{opacity:1;transform:translateY(-50%) translateX(0)}
/* Enough margin to stand clear of the text: the current section stays named. */
.srail-roomy .srail-link.on .srail-text{opacity:1;transform:translateY(-50%) translateX(0);
  color:var(--gold2)}

@media(prefers-reduced-motion:reduce){.srail-dot,.srail-text,.srail-link{transition:none}}

/* ==========================================================================
   Monthly investor notes — the band at the top of Research Papers. The newest
   note is given the room it is worth; the back catalogue sits beneath it.
   ========================================================================== */

.notes{margin-top:34px}
.note{position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:26px 28px 22px;background:linear-gradient(160deg,var(--bg2),var(--card));
  border:1px solid var(--l2);transition:transform .45s var(--ease),border-color .45s var(--ease),
  box-shadow .45s var(--ease)}
.note:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--gold) 45%,transparent);
  box-shadow:0 30px 60px -34px #000}
.note:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);
  opacity:0;transition:opacity .45s var(--ease)}
.note:hover:before{opacity:.8}

.note-when{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.note-when b{font:700 10px/1 var(--num);font-variant-numeric:tabular-nums;letter-spacing:.18em;text-transform:uppercase;color:var(--gold2)}
.note-when span{font-size:9px;font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:.14em;text-transform:uppercase;color:var(--t5)}

.note h3{font:400 clamp(26px,3vw,36px)/1.12 var(--serif);margin:0 0 14px;color:var(--text)}
.note h4{font:400 20px/1.2 var(--serif);margin:0 0 10px;color:var(--text)}
.note p{margin:0;font-size:13px;line-height:1.8;color:var(--muted)}
.note-lead p{font-size:14.5px;max-width:68ch}
.note-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:auto;padding-top:20px}
.note-go{flex-shrink:0;font-size:9.5px;padding:11px 18px}

.note-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.note-grid .note{padding:22px 22px 18px;cursor:pointer}
.note-grid .note:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Position decides presentation: the artwork opens on the stage and is put
   away in the grid, so promoting a note is a single node move. */
.note-grid .nart{display:none}
.note-grid .note h3{font:400 20px/1.2 var(--serif)}
.note-grid .note .note-body{padding:0}
.note-grid .note .item-tags .tagpill:nth-child(n+3){display:none}
.note-stage .note{padding:0}
.note-stage .note h3{font:400 clamp(26px,3vw,36px)/1.12 var(--serif)}
.note-stage .note p{font-size:14.5px;max-width:68ch}
.note-new{font-style:normal;font-size:8px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold2);border:1px solid color-mix(in srgb,var(--gold) 35%,transparent);
  padding:3px 7px}
/* Replayed on promotion so the swap reads as a change, not a jump-cut. */
@keyframes noteIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.note-in{animation:noteIn .5s var(--ease)}

@media(max-width:1000px){.note-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  .note-grid{grid-template-columns:1fr}
  .note{padding:20px 18px 16px}
  .note-foot{flex-direction:column;align-items:flex-start;gap:12px}
}

/* --- note artwork ----------------------------------------------------------
   The cover drawing on the lead note. Inline SVG, so its colours come from the
   palette and it reads in every theme. Text inside an SVG does not inherit the
   page font, so the label classes set it explicitly. */
.note-art{padding:0}
.note-art .note-body{padding:24px 28px 22px;display:flex;flex-direction:column;flex:1}
.nart{margin:0;position:relative;background:linear-gradient(170deg,
  color-mix(in srgb,var(--deep) 65%,transparent),transparent)}
.nart svg{display:block;width:100%;height:auto}

/* ---- videos: the subscribe panel ----
   The page ends on a single action, so the mark carries the panel rather than
   decorating a heading. Mark and button open the same channel; the mark is
   redundant to a screen reader once the button is read, so it is labelled and
   the glyph inside it hidden. */
/* The band's own container is a two-column row with the words on the left and
   the actions on the right. There are no words here, so it stacks and centres
   instead; everything else about the panel is the site-wide closing band. */
.ytsub .container{flex-direction:column;justify-content:center;gap:26px;text-align:center}
.ytsub-mark{display:block;width:clamp(92px,13vw,148px);color:#FF0033;
  transition:transform .4s var(--ease),filter .4s var(--ease)}
.ytsub-mark svg{display:block;width:100%;height:auto;fill:currentColor}
.ytsub-mark:hover{transform:translateY(-4px);filter:drop-shadow(0 16px 36px rgba(255,0,51,.34))}
@media(prefers-reduced-motion:reduce){.ytsub-mark{transition:none}.ytsub-mark:hover{transform:none}}
.nart-idx{padding:14px 28px 0;font:700 9px var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--t5)}
.nart-k{font:600 15px var(--num);fill:var(--text)}
.nart-s{font:700 9px var(--sans);letter-spacing:.14em;text-transform:uppercase;fill:var(--t5)}
.nart-now{fill:var(--green)}
.nart-cap{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:12px 28px 14px;border-top:1px solid color-mix(in srgb,var(--text) 7%,transparent)}
.nart-cap span{font-size:12px;color:var(--t1)}
.nart-cap em{font-style:normal;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--t6)}

@media(max-width:640px){
  .note-art .note-body{padding:20px 18px 16px}
  .nart-cap{padding:10px 18px 12px}
  .nart-idx{padding:12px 18px 0}
  /* The SVG scales to about a quarter here, which would render a 15px label at
     four pixels. Sizes are in user units, so they have to grow to compensate;
     the date sublabels give way rather than shrink to nothing — the caption
     and the note beneath both carry the period. */
  .nart-k{font-size:36px}
  .nart-s{display:none}
}
.nart-fig{font:400 54px var(--num);fill:var(--gold2)}
.nart-ref{fill:var(--t4)!important;font-size:13px}
.nart-sub{fill:var(--t6)}
.nart-sm{font-size:34px}
/* Timeline values sit close to their labels, so they take a middle size. */
.nart-mid{font-size:19px}

/* ==========================================================================
   Home — the sections the recommended structure added: the belief triad, the
   investment loop, the exit flow, the thinking columns, the two paths and the
   closing conversation. Tokens only, so all four themes come for free.
   ========================================================================== */

/* --- 03 · the investment belief ------------------------------------------ */
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:44px;
  background:var(--line);border:1px solid var(--line)}
.tri{position:relative;padding:36px 32px 32px;background:var(--bg);
  transition:background .5s var(--ease)}
.tri:hover{background:var(--card)}
.tri-n{display:block;font:700 10px/1 var(--num);font-variant-numeric:tabular-nums;letter-spacing:.2em;color:var(--gold);
  margin-bottom:22px}
.tri h3{font:400 clamp(23px,2.4vw,30px)/1.15 var(--serif);margin:0 0 10px;color:var(--text)}
.tri-tag{display:block;font:700 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:0 0 14px}
.tri p{margin:0 0 22px;font-size:13.5px;line-height:1.8;color:var(--muted)}
.tri:before{content:"";position:absolute;left:0;top:0;width:2px;height:0;background:var(--gold);
  transition:height .5s var(--ease)}
.tri:hover:before{height:100%}

/* --- 05 · when strength breaks ------------------------------------------- */
.break{padding:30px 30px 26px;background:linear-gradient(165deg,var(--bg2),var(--card));
  border:1px solid var(--line)}
.break h3{font:400 30px/1.1 var(--serif);margin:10px 0 22px;color:var(--text)}
.break-flow{list-style:none;margin:0;padding:0}
.break-flow li{position:relative;padding:0 0 22px 26px}
.break-flow li:before{content:"";position:absolute;left:5px;top:6px;width:7px;height:7px;
  border-radius:50%;background:var(--green)}
.break-flow li:after{content:"";position:absolute;left:8px;top:17px;bottom:0;width:1px;
  background:color-mix(in srgb,var(--text) 12%,transparent)}
.break-flow li:last-child{padding-bottom:0}
.break-flow li:last-child:after{display:none}
.break-flow li.is-exit:before{background:var(--red)}
.break-flow b{display:block;font:700 9.5px/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold2);margin-bottom:7px}
.break-flow li.is-exit b{color:var(--red)}
.break-flow span{display:block;font-size:12.5px;line-height:1.75;color:var(--muted)}
.break-note{margin:20px 0 18px;padding-top:18px;font-size:12px;line-height:1.75;color:var(--t3);
  border-top:1px solid color-mix(in srgb,var(--text) 9%,transparent)}

/* --- 07 · how we think --------------------------------------------------- */
.think{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:40px 0 44px;
  background:var(--line);border:1px solid var(--line)}
.think-col{display:block;padding:28px 26px;background:var(--bg);text-decoration:none;
  transition:background .45s var(--ease)}
.think-col:hover{background:var(--card)}
.think-col h3{font:400 20px/1.25 var(--serif);margin:14px 0 0;color:var(--text);
  transition:color .4s var(--ease)}
.think-col:hover h3{color:var(--gold2)}

/* --- 08 · the creed ------------------------------------------------------ */
.creed{margin:54px 0 0;text-align:center;font:400 clamp(26px,3.4vw,42px)/1.25 var(--serif);
  color:var(--text)}
.creed em{font-style:normal;color:var(--gold2)}

/* --- 09 · two paths ------------------------------------------------------ */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px}
.path{display:flex;flex-direction:column;padding:36px 34px 32px;
  background:linear-gradient(160deg,var(--bg2),var(--card));border:1px solid var(--l2);
  transition:border-color .45s var(--ease),transform .45s var(--ease)}
.path:hover{border-color:color-mix(in srgb,var(--gold) 45%,transparent);transform:translateY(-4px)}
.path h3{font:400 clamp(24px,2.6vw,32px)/1.15 var(--serif);margin:16px 0 14px;color:var(--text)}
.path p{margin:0 0 20px;font-size:13.5px;line-height:1.8;color:var(--muted)}
.path-list{list-style:none;margin:0 0 26px;padding:0}
.path-list li{position:relative;padding:8px 0 8px 22px;font-size:12.5px;color:var(--t1);
  border-top:1px solid color-mix(in srgb,var(--text) 8%,transparent)}
.path-list li:before{content:"";position:absolute;left:2px;top:15px;width:8px;height:1px;
  background:var(--gold)}
.path .btn{margin-top:auto;align-self:flex-start}

/* --- 10 · the closing conversation ---------------------------------------
   Named .closing, not .close: base.css already owns .close for the drawer's
   close button, and that rule floats its element right, sets a pointer cursor
   and rotates it 90 degrees on hover. A section wearing the same class picked
   all of it up — it broke out of the flow so the footer no longer cleared it,
   and it span on hover. */
.closing{padding:clamp(90px,13vw,160px) 0;background:var(--deep);
  border-top:1px solid color-mix(in srgb,var(--gold) 16%,transparent)}
.closing-in{text-align:center;max-width:820px}
.closing h2{font:400 clamp(38px,6vw,72px)/1.05 var(--serif);margin:0 0 22px;color:var(--text)}
.closing h2 em{font-style:normal;color:var(--gold2)}
.closing p{margin:0 auto 34px;max-width:56ch;font-size:14.5px;line-height:1.85;color:var(--muted)}
.closing-reach{display:flex;justify-content:center;flex-wrap:wrap;gap:1px;margin-top:56px;
  background:var(--line);border:1px solid var(--line)}
.closing-reach>a,.closing-reach>.reach-cell{flex:1 1 200px;padding:20px 18px;background:var(--deep);
  text-decoration:none;transition:background .4s var(--ease)}
.closing-reach>a:hover,.closing-reach>.reach-cell:hover{background:var(--bg2)}
.closing-reach .reach-cell a{color:inherit;text-decoration:none;transition:color .3s var(--ease)}
.closing-reach .reach-cell a:hover{color:var(--gold2)}
.closing-reach span{display:block;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.closing-reach b{font:600 13px/1.4 var(--sans);color:var(--text);word-break:break-word}

@media(max-width:1000px){
  .triad,.think{grid-template-columns:1fr}
  .paths{grid-template-columns:1fr}
}
@media(max-width:640px){
  .tri,.path{padding:26px 22px}
}

/* A section head is a two-column title/blurb row at full width. Inside a split
   column there is no room for that — the flex row squeezes the headline into
   one word per line — so it stacks and the type steps down a size. */
.split .section-head{display:block;margin-bottom:26px}
.split .section-head h2{font:400 clamp(32px,3.4vw,48px)/1.1 var(--serif)}
.split .section-head p{margin-top:16px;max-width:none}

/* The funnel's closing stage: the same node the spine runs through, marked as
   a return rather than another step. Dashed, so it reads as the loop closing
   instead of a sixth thing to do. */
.f-repeat .fcard{background:none;border-style:dashed;
  border-color:color-mix(in srgb,var(--gold) 32%,transparent)}
.f-repeat .fdot{font-size:26px;color:var(--gold2);
  border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.f-repeat.active .fdot{transform:scale(1.12) rotate(-140deg)}
.f-repeat .fghost{opacity:.25}

/* ==========================================================================
   Home video panel — a row of videos looping leftward, in the site's own
   container width so it lines up with every other section. Card chrome (.vid
   and everything inside it) is base.css; only the card width and the
   travelling track live here.
   ========================================================================== */

.vreel-stage{position:relative}
.vreel-row{overflow:hidden}

/* The track is wider than the row and is moved by transform, so the overflow is
   clipped rather than scrolled — no scrollbar, and no snapping to fight. */
.vreel-track{display:flex;gap:16px;will-change:transform}

/* Four across at the container's width — the same card the Videos page uses,
   thumbnail above the title, summary beneath. base.css already styles all of
   it; only the width is set here, so the row divides evenly instead of using
   the standalone card's clamped width. */
.vreel-row .vid{flex:0 0 calc((100% - 48px) / 4)}
.vreel-row .vid-body p{font-size:12.5px;line-height:1.55;color:var(--muted);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* The cards lift on hover in base.css; inside a clipped row that would crop the
   raised edge, so the lift is dropped and the border carries the hover. */
.vreel-stage .vid:hover{transform:none}

@media(max-width:1080px){ .vreel-row .vid{flex:0 0 calc((100% - 32px) / 3)} }
@media(max-width:820px){ .vreel-row .vid{flex:0 0 calc((100% - 16px) / 2)} }
@media(max-width:560px){ .vreel-row .vid{flex:0 0 86%} }

/* base.css drops the arrows below 700px, where the old rail could still be
   swiped. This row is clipped rather than scrollable, so without the arrows a
   phone — or anyone who has asked for reduced motion — has no way to reach the
   rest of the set. Keep them, smaller. */
@media(max-width:700px){
  .vreel .reel-nav{display:flex}
  .vreel .reel-nav button{width:32px;height:32px}
  .vreel .reel-head{flex-wrap:wrap;gap:14px}
}

/* ==========================================================================
   Admin console. Deliberately plain — a tool, not a page of the site.
   ========================================================================== */

/* The way in is the risk-disclosure label, which must keep reading as the
   label it already was: same weight, same colour, no underline, no cursor
   change beyond a link's own. */
.disc-admin{color:inherit;text-decoration:none}
.disc-admin:hover{color:inherit}

.adm{max-width:1080px;padding-block:clamp(28px,4vw,54px)}
.adm-head h1{font:400 clamp(26px,3vw,36px)/1.1 var(--serif);margin:10px 0 6px;color:var(--text)}
.adm-sub{font-size:13px;color:var(--muted);margin:0}

.adm-card{margin-top:22px;padding:clamp(18px,2.2vw,28px);
  background:linear-gradient(160deg,var(--bg2),var(--card));
  border:1px solid color-mix(in srgb,var(--gold) 13%,transparent)}
.adm-card h2{font:400 20px/1.2 var(--serif);margin:0 0 10px;color:var(--text)}
.adm-note{font-size:12.5px;line-height:1.6;color:var(--muted);margin:0 0 18px;max-width:70ch}
.adm-note a{color:var(--gold2)}

.adm-login{max-width:380px;display:grid;gap:14px}
/* The console hides the form by setting `hidden` once the session is confirmed,
   and `[hidden]{display:none}` comes from the user-agent sheet — which the rule
   above outranks, so the form stayed on screen sitting over the panel. */
.adm-login[hidden]{display:none}
.adm-login label{display:grid;gap:6px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold2);font-weight:700}
.adm input{width:100%;padding:11px 12px;font:inherit;font-size:13.5px;color:var(--text);
  background:color-mix(in srgb,var(--deep) 55%,transparent);
  border:1px solid color-mix(in srgb,var(--text) 14%,transparent);border-radius:0}
.adm input:focus{outline:none;border-color:var(--gold)}

.adm-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:22px;font-size:12px;color:var(--muted)}
.adm-bar b{color:var(--text)}

.adm-rows{display:grid;gap:8px;overflow-x:auto}
/* Columns come from FIELDS in admin.js — restating them here is what let the
   two drift apart whenever a field was added. */
.adm-row{display:grid;gap:8px;align-items:center;min-width:1180px}
.adm-row select{width:100%}
/* A sector or cap band the ranking export supplied, not something typed. It is
   shown but not saved (admin.js), so it reads as a stated value rather than an
   entered one — and turns solid the moment it is overtyped. */
.adm-row .is-derived{color:var(--t3);font-style:italic;
  border-color:color-mix(in srgb,var(--gold) 26%,transparent)}
/* The exposure editor: two plain columns, name and percentage. */
.adm-row.adm-pair{min-width:0;grid-template-columns:1fr 110px 34px}
/* The grievance tables carry counts rather than names, so they fit the column
   without the holdings editor's horizontal scroll. */
.adm-row.adm-narrow{min-width:0}
.adm-fixed{font-size:12px;color:var(--muted);padding-right:8px}
.adm-sub{font:700 9px var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold2);margin:26px 0 10px}
.adm-field{display:block;margin:4px 0 2px;max-width:320px}
.adm-field span{display:block;font:700 9px var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold2);margin-bottom:7px}
.adm-field em{display:block;margin-top:7px;font-style:normal;font-size:11px;color:var(--t4)}
.adm-row-head{font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold2);font-weight:700;padding-bottom:2px}
.adm-del{width:34px;height:34px;background:none;cursor:pointer;font-size:17px;line-height:1;
  color:var(--muted);border:1px solid color-mix(in srgb,var(--text) 14%,transparent);
  transition:.3s var(--ease)}
.adm-del:hover{border-color:var(--gold);color:var(--gold2)}

.adm-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.adm-spacer{flex:1}
.adm-weight{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* The broker connection, said as a state rather than a colour: the dot has a
   ring when it is off and a fill when it is on, so the difference survives a
   monochrome theme and a reader who cannot separate the two hues. */
.adm-kite{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.adm-kite-state{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted)}
.adm-kite-state i{width:9px;height:9px;border-radius:50%;flex:none;
  box-shadow:inset 0 0 0 1.5px currentColor}
.adm-kite-state b{font-weight:500}
.adm-kite-state[data-state="on"]{color:var(--green)}
.adm-kite-state[data-state="on"] i{background:currentColor;box-shadow:0 0 8px currentColor}
.adm-kite-state[data-state="off"]{color:var(--red)}
.adm-kite-state[data-state="unknown"]{color:var(--t5)}

/* Investor accounts. An email and a date fit the column, so this table is not
   the holdings editor's horizontal scroll — it is four columns that collapse
   to two on a phone rather than a grid dragged sideways. */
.adm-acct-new{display:grid;gap:16px;margin-top:4px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));align-items:end}
.adm-acct-new .adm-field{max-width:none;margin:0}
.adm-row.adm-acct{grid-template-columns:minmax(0,1fr) auto auto minmax(34px,auto);gap:12px}
.adm-acct-who{display:grid;gap:2px;min-width:0}
.adm-acct-who b{font-weight:500;font-size:13px;color:var(--text);overflow-wrap:anywhere}
.adm-acct-who em{font-style:normal;font-size:11.5px;color:var(--t4)}
.adm-acct-seen{font-size:11.5px;color:var(--muted)}
.adm-acct-none{margin:2px 0 0}
.adm-mini{padding:8px 13px;font-size:9.5px}
/* Armed for the second click: it stops being a dismissal × and starts reading
   as the irreversible thing it is. */
.adm-del.is-armed{width:auto;padding:0 12px;font:700 9.5px/1 var(--sans);
  letter-spacing:.14em;text-transform:uppercase;border-color:#e06a5a;color:#e06a5a}
@media(max-width:700px){
  /* The date drops to its own line under the address; the two controls stay on
     the first, so closing an account never lands under a stray finger. */
  .adm-row.adm-acct{grid-template-columns:minmax(0,1fr) auto auto;row-gap:8px}
  .adm-acct-seen{grid-column:1/-1;order:1}
}

.adm-msg{margin-top:14px;font-size:12.5px;color:var(--gold2);line-height:1.7;
  /* The ranking upload reports its warnings one per line, and they are set
     as text rather than markup — so the line breaks have to survive. */
  white-space:pre-line}
.adm-msg.is-bad{color:#e06a5a}

@media(max-width:700px){
  .adm-bar{flex-wrap:wrap}
}

/* A pair of cards, not a row of three. The base .card reserves 300px of height
   so a row of three article teasers lines up; two short cards held to that are
   mostly empty space, and a two-item set in a three-column grid leaves a hole
   where the third would be. */
.cards.cards-pair{grid-template-columns:repeat(2,1fr)}
.cards-pair .card{min-height:0}
@media(max-width:760px){.cards.cards-pair{grid-template-columns:1fr}}

/* ---------- step flow ----------------------------------------------------
   A chain of stages joined by arrows. The arrow lives in the gap between two
   steps as a pseudo-element on the second one, so no empty separator elements
   are needed and the markup stays an ordered list. */
/* --- the trend cycle -----------------------------------------------------

   Five stages on one track, lit in sequence as a line travels through them.

   The whole sequence is CSS. `.jrny` carries the site's own .reveal class, so
   the observer that already runs on every page adds .in when the section is
   seen, and everything below keys off that — no second observer, no timers,
   and it inherits the safety net that forces .in a few seconds after load if
   the observer never reports.

   Each stage's --i is its index. Multiplying it gives both the staggered
   arrival and the moment each stage lights, so the stages activate as the line
   reaches them rather than merely near when it does. STEP is the interval; the
   track's duration is five of them, which is what keeps the two in step when
   either is retuned.

   Only opacity and transform are animated. Nothing here reflows, so the
   travelling line costs no layout work on any frame.
   ------------------------------------------------------------------------ */
.jrny{--step:.42s;--dur:calc(var(--step) * 5);
  /* The repeating round trip: --cycle is one full turn of the mechanism, and
     --sweep is the part of it the line spends crossing the stages. The rest of
     the turn is the return path, which is why the sweep is not the whole cycle
     — the pause at the right-hand end is the arc doing its work. */
  --cycle:6.4s;--sweep:calc(var(--cycle) * .72);
  position:relative;margin:34px 0 0}

.jrny-track{position:absolute;left:0;right:0;top:33px;height:1px;background:var(--l2);
  overflow:hidden}
/* Drawn once, when the section is first seen: the journey building itself. */
.jrny-track i{display:block;height:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  box-shadow:0 0 12px rgba(var(--gold-rgb),.45)}
.jrny.in .jrny-track i{transform:scaleX(1);transition:transform var(--dur) linear}

/* And then kept moving. A trend that persists is not a thing that happened
   once, so the line does not stop when it arrives — it keeps running the
   circuit, and the page argues its point for as long as anyone is reading it.
   This also means a reader who reaches the section late has not missed
   anything, which a one-shot reveal cannot promise.

   The sweep is one composited transform on a 1px strip. Its width is 40% of
   the track, so translating it from -50% to 200% of its own width walks its
   centre from the far left of the track to the far right — which is the
   arithmetic the dot delays below depend on. */
.jrny-track:after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;
  background:linear-gradient(90deg,transparent,var(--gold2) 45%,#fff 50%,var(--gold2) 55%,transparent);
  opacity:0;will-change:transform}
.jrny.in .jrny-track:after{animation:jrnySweep var(--cycle) linear infinite;
  animation-delay:var(--dur)}
@keyframes jrnySweep{
  0%   {transform:translateX(-50%);opacity:0}
  6%   {opacity:.85}
  66%  {opacity:.85}
  72%  {transform:translateX(200%);opacity:0}
  100% {transform:translateX(200%);opacity:0}
}

/* One column per stage, from --n. Hard-coding five here left a phantom column
   the first time this was used with four, which pushed every node off the
   fraction of the track its own timing was derived from. */
.jrny-stages{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:0;
  margin:0;padding:0;list-style:none;position:relative}

.jrny-stage{position:relative;padding:0 20px 0 0;
  /* Room for the explanation is reserved at rest, so revealing it moves
     nothing. A row of five that reflowed on hover would shove the caption
     under it every time the pointer crossed the section. */
  min-height:186px;
  opacity:0;transform:translateY(12px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  transition-delay:calc(var(--i) * var(--step))}
.jrny.in .jrny-stage{opacity:1;transform:translateY(0)}
.jrny-stage:last-child{padding-right:0}

/* The node on the track. It fills as the line arrives, which is the moment
   the stage reads as "reached". */
.jrny-dot{position:absolute;left:0;top:28px;width:11px;height:11px;border-radius:50%;
  background:var(--bg);border:1px solid var(--l4);box-sizing:border-box;
  transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
  transition-delay:calc(var(--i) * var(--step))}
.jrny.in .jrny-dot{background:var(--gold);border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(var(--gold-rgb),.14)}
/* Each node answers as the line passes it. --f is the node's own position
   along the track, worked out by the component, and the sweep's centre crosses
   that fraction of the track at that fraction of --sweep — so the delay is
   literally the position. The two cannot drift, because they are one number. */
.jrny.in .jrny-dot{animation:jrnyPing var(--cycle) ease-out infinite;
  animation-delay:calc(var(--dur) + var(--f) * var(--sweep))}
@keyframes jrnyPing{
  0%,100%{box-shadow:0 0 0 4px rgba(var(--gold-rgb),.14)}
  6%     {box-shadow:0 0 0 7px rgba(var(--gold-rgb),.30)}
  22%    {box-shadow:0 0 0 4px rgba(var(--gold-rgb),.14)}
}

.jrny-n{display:block;padding-top:52px;font:400 12px/1 var(--num);font-variant-numeric:tabular-nums;letter-spacing:.18em;
  color:var(--gold);opacity:.75;transition:opacity .4s var(--ease)}
.jrny-cue{display:block;width:24px;height:24px;margin:16px 0 12px;color:var(--t4);
  transition:color .45s var(--ease),transform .45s var(--ease)}
.jrny-stage h3{font:400 17px/1.28 var(--serif);margin:0;color:var(--text);
  transition:color .4s var(--ease)}
/* Folded away visually, never removed: it stays in the document for a screen
   reader, and for anyone arriving by keyboard the :focus-within rule below
   brings it up exactly as hovering would. */
.jrny-stage p{margin:10px 0 0;font-size:12.5px;line-height:1.7;color:var(--muted);
  max-width:24ch;opacity:0;transform:translateY(-4px);
  transition:opacity .4s var(--ease),transform .4s var(--ease)}

/* :focus-within, not :focus-visible, for the reveal. focus-visible answers
   "should this look focused", which a browser decides from how the focus was
   given — a stage focused by script or by a pointer would not match it, and
   the explanation would stay folded for a reader who got there another way.
   The ring is a different question, and does use focus-visible. */
.jrny-stage:hover .jrny-cue,.jrny-stage:focus-within .jrny-cue{color:var(--gold)}
.jrny-stage:hover h3,.jrny-stage:focus-within h3{color:var(--gold2)}
.jrny-stage:hover .jrny-n,.jrny-stage:focus-within .jrny-n{opacity:1}
.jrny-stage:hover p,.jrny-stage:focus-within p{opacity:1;transform:translateY(0)}
.jrny-stage:focus{outline:none}
.jrny-stage:focus-visible{outline:1px solid rgba(var(--gold-rgb),.5);outline-offset:10px}

/* The return path, and the reason this is a cycle rather than a list. It is
   drawn only after the line has finished its run, so the loop reads as a
   consequence of the sequence rather than as part of it. */
.jrny-loop{position:relative;margin-top:2px;height:34px}
.jrny-loop svg{display:block;width:100%;height:34px;overflow:visible}
.jrny-loop path{fill:none;stroke:var(--gold);stroke-width:1;vector-effect:non-scaling-stroke;
  stroke-dasharray:3 4;opacity:0;transition:opacity .8s var(--ease);transition-delay:var(--dur)}
.jrny.in .jrny-loop path{opacity:.42;
  /* Marching the dashes back toward stage 01 — the return leg, drawn at the
     same period as the sweep so the whole figure reads as one mechanism. */
  animation:jrnyReturn var(--cycle) linear infinite}
@keyframes jrnyReturn{to{stroke-dashoffset:-70}}
.jrny-loop-label{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  padding:0 12px;background:var(--bg);
  font:700 8.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  opacity:0;transition:opacity .8s var(--ease);transition-delay:calc(var(--dur) + .15s)}
.jrny.in .jrny-loop-label{opacity:.85}

/* A sequence that ends.

   Same mechanism, one deliberate difference: the track stops at the last node
   instead of running past it, and there is no return path. That is not a
   styling choice — a position's life genuinely ends at the exit, and a loop
   drawn under it would claim the opposite of what the page is arguing.

   The last node is capped rather than merely being the last one drawn, so the
   terminus reads as a terminus even when the line is not moving. */
.jrny.is-terminal .jrny-track{right:calc(100% / var(--n))}
.jrny.is-terminal .jrny-stage.is-end .jrny-dot:after{content:"";position:absolute;
  left:50%;top:50%;width:1px;height:15px;margin:-7.5px 0 0 -.5px;background:var(--gold);
  opacity:.65}
.jrny.is-terminal .jrny-stage.is-end .jrny-dot{box-shadow:0 0 0 4px rgba(var(--gold-rgb),.18)}

/* Vertical on a narrow screen: the same journey turned on its side, with the
   track running down the left of the stages rather than across the top. */
@media(max-width:860px){
  .jrny-stages{grid-template-columns:1fr;gap:26px}
  .jrny-track{left:5px;right:auto;top:6px;bottom:34px;width:1px;height:auto}
  .jrny.is-terminal .jrny-track{right:auto;bottom:auto;height:calc(100% - 90px)}
  .jrny-track i{width:100%;transform:scaleY(0);transform-origin:top;
    background:linear-gradient(180deg,var(--gold),var(--gold2))}
  .jrny.in .jrny-track i{transform:scaleY(1)}
  /* Same circuit, turned through ninety degrees: the sweep now runs down the
     track rather than across it. The stages are not evenly tall here, so a
     node answers as the line reaches its neighbourhood rather than to the
     pixel — the sequence is the point, not the precision. */
  .jrny-track:after{left:0;right:0;width:auto;top:0;bottom:auto;height:34%;
    background:linear-gradient(180deg,transparent,var(--gold2) 45%,#fff 50%,var(--gold2) 55%,transparent)}
  .jrny.in .jrny-track:after{animation-name:jrnySweepY}
  .jrny-stage{min-height:0;padding:0 0 0 30px}
  .jrny-dot{top:6px}
  .jrny-n{padding-top:0}
  .jrny-cue{margin:10px 0 8px}
  /* No pointer to hover with, so the explanation is simply present. */
  .jrny-stage p{opacity:1;transform:none;max-width:46ch}
  .jrny-loop{margin-top:18px;height:26px}
  .jrny-loop svg{height:26px}
}

@keyframes jrnySweepY{
  0%   {transform:translateY(-50%);opacity:0}
  6%   {opacity:.85}
  66%  {opacity:.85}
  72%  {transform:translateY(240%);opacity:0}
  100% {transform:translateY(240%);opacity:0}
}

/* Reduced motion: the section still arrives, still lights, still loops — it
   just does all of it at once instead of travelling. */
@media(prefers-reduced-motion:reduce){
  .jrny .jrny-stage,.jrny .jrny-dot,.jrny .jrny-track i,
  .jrny .jrny-loop path,.jrny .jrny-loop-label{transition:none;transition-delay:0s}
  .jrny .jrny-stage{opacity:1;transform:none}
  /* The circuit stops entirely: the line is simply drawn, the nodes are simply
     lit. Nothing here carries meaning that only the motion conveys. */
  .jrny.in .jrny-track:after,.jrny.in .jrny-dot,.jrny.in .jrny-loop path{animation:none}
  .jrny.in .jrny-track:after{opacity:0}
}

.flow{display:flex;flex-wrap:wrap;gap:26px;margin:26px 0 0;padding:0;list-style:none}
.flow-step{position:relative;flex:1 1 160px;display:flex;align-items:center;
  padding:16px 18px;border:1px solid var(--l2);background:var(--card);
  font:400 14.5px/1.45 var(--serif);color:var(--text)}
/* The arrow trails its own step rather than leading the next one. When the
   chain wraps, a trailing arrow sits at the end of the row and reads as
   "continues below"; a leading one would dangle in the left margin of the new
   row, pointing at nothing. */
.flow-step:not(:last-child):after{content:"";position:absolute;right:-18px;top:50%;
  width:7px;height:7px;border-top:1px solid var(--gold);border-right:1px solid var(--gold);
  transform:translateY(-50%) rotate(45deg)}
@media(max-width:640px){
  .flow{flex-direction:column;gap:24px}
  /* Stacked, the arrow turns the corner and points down to the next step. */
  .flow-step:not(:last-child):after{right:auto;left:26px;top:auto;bottom:-16px;
    transform:rotate(135deg)}
}

/* ---------- payment QR ---------------------------------------------------
   The code sits on white whatever the theme is: a UPI scanner reads the
   contrast, not the palette, and a tinted or inverted QR can fail to scan. */
/* auto-fit rather than a media query: this sits inside the narrow column of a
   .split, so it has to answer to the space it is actually in, not the width of
   the window. Below two 240px tracks it stacks on its own. */
.payqr{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(18px,3vw,34px);align-items:center;
  margin-top:22px;padding:clamp(18px,2.4vw,26px);border:1px solid var(--line);background:var(--bg)}
.payqr-code{margin:0;text-align:center}
/* 260px, not smaller: the code is a dense one, and below roughly 240px its
   modules get too fine for a phone to read off a screen reliably. */
.payqr-code img{display:block;width:260px;max-width:100%;height:auto;background:#fff;padding:12px}
.payqr-code figcaption{margin-top:10px;font:700 9px var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--t5)}
.payqr-id b{display:block;margin-top:8px;font:400 clamp(18px,2.4vw,25px)/1.25 var(--num);
  color:var(--gold2);word-break:break-all;
  /* Selectable on purpose: someone paying by hand should be able to copy it
     rather than retype an address that money is going to. */
  -webkit-user-select:all;user-select:all}
.payqr-id p{margin:12px 0 0;font-size:12px;line-height:1.7;color:var(--muted);max-width:42ch}
@media(max-width:620px){
  .payqr{justify-items:center;text-align:center}
  .payqr-id p{margin-left:auto;margin-right:auto}
}

/* ======================================================================
   PROTECTED DOCUMENT VIEWER
   A reading surface with its own chrome — no site header, footer or dock.
   The pages are watermarked images, never a PDF, so nothing here is doing
   the protecting; it is the reader around a document that cannot be copied.
   ====================================================================== */
body.bare{background:var(--deep);min-height:100vh}
.doc{display:flex;flex-direction:column;min-height:100vh;background:var(--deep);
  -webkit-user-select:none;user-select:none}

.doc-top{display:flex;align-items:center;gap:18px;padding:12px clamp(14px,2.4vw,26px);
  background:var(--bg);border-bottom:1px solid var(--line)}
.doc-brand img{height:26px;width:auto;display:block}
.doc-title{flex:1;min-width:0;border-left:1px solid var(--l2);padding-left:18px}
.doc-title h1{font:400 17px/1.2 var(--serif);color:var(--text);margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-title span{display:block;font-size:10.5px;color:var(--t5);margin-top:2px}
.doc-back{padding:9px 16px;font-size:10px;flex:none}

.doc-bar{display:flex;align-items:center;gap:clamp(12px,2vw,28px);flex-wrap:wrap;
  padding:10px clamp(14px,2.4vw,26px);background:var(--deep);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.doc-group{display:flex;align-items:center;gap:8px}
.doc-btn{background:none;border:1px solid var(--l2);color:var(--muted);cursor:pointer;
  padding:7px 13px;font:700 9.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;
  transition:.25s var(--ease)}
.doc-btn:hover:not(:disabled){border-color:var(--gold);color:var(--gold2)}
.doc-btn:disabled{opacity:.32;cursor:default}
.doc-count{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--t5)}
.doc-count input{width:52px;padding:6px 8px;text-align:center;font-size:12px;
  background:var(--bg);border:1px solid var(--l2);color:var(--text);
  -webkit-user-select:text;user-select:text}
.doc-level{min-width:44px;text-align:center;font-size:11px;color:var(--muted);
  letter-spacing:.08em}
.doc-shield{margin-left:auto;display:flex;align-items:center;gap:7px;
  font:700 9px var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--green);
  border:1px solid color-mix(in srgb,var(--green) 34%,transparent);padding:7px 12px}

.doc-stage{flex:1;overflow:auto;padding:clamp(16px,2.6vw,34px);display:flex;
  flex-direction:column;align-items:center;gap:22px}
.doc-page{display:block;width:100%;max-width:1000px;height:auto;
  background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.5);
  -webkit-user-drag:none;user-drag:none;pointer-events:none}
/* Paged mode only exists once the script runs; without it the pages simply
   scroll, which is a complete document rather than a broken one. */
.doc.is-paged .doc-stage{gap:0}

.doc-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:12px clamp(14px,2.4vw,26px);border-top:1px solid var(--line);
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--t4)}

.doc-missing{align-items:center;justify-content:center;text-align:center;gap:18px;
  color:var(--muted);padding:80px 20px}

/* Printing would defeat the point, and a browser's print preview renders the
   images at full size. The document is a screen surface only. */
@media print{
  .doc-stage,.doc-page{display:none!important}
  .doc::after{content:"This document is available on screen only.";
    display:block;padding:40px;font:400 16px var(--serif);color:#000}
}
@media(max-width:700px){
  .doc-title{border-left:0;padding-left:0}
  .doc-title span{display:none}
  .doc-shield{margin-left:0;order:3}
}

/* ---------- header width -------------------------------------------------
   The header spans the window rather than the 1240px reading column, so the
   mark sits in the corner and the actions sit in the opposite one. The ticker
   directly above it already runs edge to edge, so the two now agree; the page
   content below keeps the narrower column, which is what makes the header read
   as a frame around the site rather than another band of it. */
.nav .navin{width:calc(100% - 56px);max-width:none}
@media(max-width:900px){ .nav .navin{width:calc(100% - 34px)} }

/* ==========================================================================
   fun pass — a friendlier, livelier surface language layered on top of the
   institutional base: rounded corners on every button/card/chip/field,
   springier hover motion, and a coral pop-accent used sparingly for delight.
   Nothing structural changes — same classes, same layout — so this applies
   everywhere those components already appear, across all 31 pages and all
   four colour themes, without touching page content.
   ========================================================================== */

/* corners: buttons, chips, cards, tags, form fields, tables, nav controls */
.btn,.qbtn,.chip,.chip2,.nav-login,.kite-btn,.item-date,.result-count,
.panel input,.panel select,.panel textarea,.field input,.field select,.field textarea,
.formgrid input,.formgrid select,.formgrid textarea,.searchbox,.searchbox input,
.wa-num,.code-input,.tablewrap,.tt-kpi,.wcard,.item,.enum-row,.faq-q,.gauge,
.fcount,.wis-step,.note,.panelbox,.formcard,.loginside,.loginform,.person,
.hc-quote,.hc-rd,.mnav-sec{border-radius:var(--radius)}

.themes,.themes button,.badge,.tt-cell b,.dt-rk,.login-pop a:first-child,
.qbtn .ico,.filters button,.category-chip,.hamb{border-radius:var(--radius-sm)}

/* pills: fully-rounded small controls read as friendlier than sharp ones */
.tag,.pill,.status,.badge-time,.wa-to,.nav-caret{border-radius:var(--radius-pill)}

/* springier hover: a light bounce instead of a flat ease, on the controls a
   visitor actually clicks or points at. */
.btn,.qbtn,.wcard,.item,.chip,.nav-login,.filters button{
  transition:transform .4s var(--ease-bounce),background .3s var(--ease),
    border-color .3s var(--ease),box-shadow .35s var(--ease),color .3s var(--ease)}
.btn:hover{transform:translateY(-3px) scale(1.015)}
.item:hover{transform:translateX(4px)}
.filters button:hover,.chip:hover{transform:translateY(-2px)}

/* the coral pop-accent: a second colour used only where it carries no
   existing meaning — green already means "live" / "up" throughout the
   market data, so the accent stays out of those and lands on purely
   decorative surfaces instead: the active theme ring and a hairline that now
   runs gold-to-coral instead of gold alone. */
.goldline{background:linear-gradient(90deg,var(--gold),var(--pop))}
.eyebrow:before{background:linear-gradient(90deg,var(--gold),var(--pop))}
.themes button[aria-pressed="true"]{border-color:var(--pop);
  box-shadow:0 0 0 2px rgba(var(--pop-rgb),.35)}

@media(prefers-reduced-motion:reduce){
  .btn,.qbtn,.wcard,.item,.chip,.nav-login,.filters button{transition:background .3s,border-color .3s,box-shadow .3s,color .3s}
  .btn:hover,.wcard:hover,.item:hover,.filters button:hover,.chip:hover{transform:none}
}

/* a small burst of colour when a visitor commits to a primary action — see
   app.js confetti(). Skipped entirely under prefers-reduced-motion there. */
.confetti-piece{position:fixed;z-index:998;pointer-events:none;border-radius:2px;
  animation:confettiBurst .8s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes confettiBurst{
  0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.4);opacity:0}
}

/* ── The phases of a trend ─────────────────────────────────────────────────

   A price chart with its phases banded across it. The bands are the argument:
   the same squiggle without them is a squiggle, and with them it is a sequence
   that repeats — which is the claim the page is making.

   Each band and its label share a --l/--w pair computed once in ui.phases()
   from the bar counts the candles were drawn from, so a label can never sit
   over the wrong stretch of chart. The tab strip is HTML above the drawing
   rather than <text> inside it: the SVG stretches to its container and phase
   names are the part of this figure that has to stay readable on a phone.

   The chart draws itself once, left to right, as a clip rect scaling on X —
   the same mechanism the lifecycle figure uses, for the same reason: the
   browser owns the schedule and a throttled tab cannot desynchronise it.
   ------------------------------------------------------------------------ */
.phs{--accumulation:var(--cyan);--uptrend:var(--green);--distribution:var(--gold);
  --downtrend:var(--red);--newuptrend:var(--cyan);
  border:1px solid var(--l2);background:linear-gradient(160deg,var(--bg2),var(--card));
  padding:22px 24px 22px;margin:0}
.phs-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:18px}
.phs-head h3{font:400 clamp(22px,2.4vw,30px)/1.15 var(--serif);margin:0}
.phs-head h3 em{font-style:italic;color:var(--gold2)}
.phs-sub{margin:7px 0 0;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--t4)}
.phs-meta{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--t4)}
/* The quote is the figure's thesis in one line, so it keeps the serif and the
   gold rule that every other pulled statement on the site carries. */
.phs-quote{margin:0;padding-left:16px;border-left:1px solid rgba(var(--gold-rgb),.45);
  font:italic 400 13.5px/1.55 var(--serif);color:var(--t1);max-width:30ch;flex:none}

.phs-tabs{position:relative;height:56px;margin:0 0 6px;padding:0;list-style:none}
.phs-tab{position:absolute;left:var(--l);width:var(--w);top:0;padding:0 6px;
  border-left:1px solid var(--l3);cursor:default;
  opacity:0;transform:translateY(-6px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.phs.in .phs-tab{opacity:1;transform:none;transition-delay:calc(var(--i) * .11s + .15s)}
.phs-tab:first-child{border-left:0;padding-left:0}
.phs-tab b{display:flex;align-items:center;gap:7px;font-size:9.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.3}
.phs-tab i{display:block;margin-top:5px;font-style:normal;font-size:10.5px;line-height:1.4;
  color:var(--t4)}
/* One numeral per phase, so the bands above and the cards below read as the
   same five things in the same order. */
/* One colour per phase, named once: the tab, the badge, the highlight box and
   the card below all read --c, so a phase cannot end up two colours. It is a
   variable rather than currentColor because the badge inverts — currentColor
   on a element that also sets color resolves to its own new value. */
.phs .is-accumulation,.phs .is-newuptrend{--c:var(--cyan)}
.phs .is-uptrend{--c:var(--green)}
.phs .is-distribution{--c:var(--gold2)}
.phs .is-downtrend{--c:var(--red)}
.phs-n{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:16px;height:16px;border-radius:50%;font-size:9px;letter-spacing:0;
  background:var(--c,var(--t4));color:var(--bg);font-weight:700}
.phs-tab b{color:var(--c,var(--t3))}

.phs-plot{position:relative}
.phs-plot>svg{display:block;width:100%;height:clamp(230px,30vw,380px)}

.phs-band{opacity:1;transition:opacity .3s var(--ease)}
.phs-band.is-accumulation,.phs-band.is-newuptrend{fill:rgba(var(--cyan-rgb),.14)}
.phs-band.is-uptrend{fill:rgba(var(--green-rgb),.085)}
.phs-band.is-distribution{fill:rgba(var(--gold-rgb),.10)}
.phs-band.is-downtrend{fill:rgba(var(--red-rgb),.085)}
/* A tint alone washes out at the alpha a candle chart can carry; the edge is
   what actually says where one phase stops and the next begins. */
.phs-edge{stroke:var(--l4);stroke-width:1;stroke-dasharray:2 4;vector-effect:non-scaling-stroke}

.phs-sweep{transform-box:view-box;transform-origin:0 0;transform:scaleX(0)}
.phs.in .phs-sweep{transform:scaleX(1);transition:transform 2.6s linear .1s}

.phs-wick{stroke-width:1;vector-effect:non-scaling-stroke}
.phs-k.is-up .phs-wick{stroke:var(--green)}
.phs-k.is-dn .phs-wick{stroke:var(--red)}
.phs-k.is-up .phs-body{fill:var(--green)}
.phs-k.is-dn .phs-body{fill:var(--red)}
/* The average is the line a rule actually watches — above price through the
   advances, below it through the decline, and slow to cross at the turns. */
.phs-avg{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;opacity:.85;
  filter:drop-shadow(0 0 6px rgba(var(--gold-rgb),.35))}

/* Boxes and notes wait for the sweep to pass before fading in, so the reader
   watches the chart draw and is then told what to look at. */
.phs-box{fill:none;stroke:var(--c,var(--t4));stroke-width:1;stroke-dasharray:5 4;
  vector-effect:non-scaling-stroke;opacity:0;transition:opacity .5s var(--ease)}
.phs.in .phs-box{opacity:.75;transition-delay:calc(2.3s + var(--i) * .16s)}

.phs-notes{position:absolute;inset:0;pointer-events:none}
.phs-note{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  display:block;width:max-content;max-width:20ch;text-align:center;
  font-size:11px;line-height:1.45;color:var(--t1);opacity:0;
  transition:opacity .55s var(--ease)}
.phs.in .phs-note{opacity:1;transition-delay:calc(2.45s + var(--i) * .16s)}
.phs-note em{font-style:normal;display:block}
.phs-note.is-uptrend em,.phs-note.is-downtrend em{font-weight:600;letter-spacing:.02em;
  color:var(--c)}
.phs-arw{display:block;width:76px;height:38px;margin:0 auto 2px;overflow:visible}
.phs-arw-s{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.phs-arw-h{fill:currentColor;stroke:none}
.phs-arw.is-up{color:var(--green)}
.phs-arw.is-dn{color:var(--red)}

/* Point at a phase and the rest of the chart steps back. :has() is the whole
   mechanism; where it is unsupported the bands simply stay as they are. */
.phs:has(.phs-tab:is(:hover,:focus-visible)) .phs-band{opacity:.18}
.phs-tab:is(:hover,:focus-visible){outline:0}
.phs-tab:focus-visible b{text-decoration:underline;text-underline-offset:3px}
.phs:has(.phs-tab.is-accumulation:is(:hover,:focus-visible)) .phs-band.is-accumulation,
.phs:has(.phs-tab.is-uptrend:is(:hover,:focus-visible)) .phs-band.is-uptrend,
.phs:has(.phs-tab.is-distribution:is(:hover,:focus-visible)) .phs-band.is-distribution,
.phs:has(.phs-tab.is-downtrend:is(:hover,:focus-visible)) .phs-band.is-downtrend,
.phs:has(.phs-tab.is-newuptrend:is(:hover,:focus-visible)) .phs-band.is-newuptrend{opacity:1}

.phs-key{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 22px;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--l2)}
.phs-kv{display:inline-flex;align-items:center;gap:8px;font-size:11px;color:var(--t4)}
.phs-kv:before{content:"";width:16px;height:2px;background:var(--t5);border-radius:2px}
.phs-kv.is-up:before{background:var(--green)}
.phs-kv.is-down:before{background:var(--red)}
.phs-kv.is-avg:before{background:var(--gold)}
/* The candlestick key is drawn rather than described: a green body and a red
   one, the same two marks the chart is made of. */
.phs-kv.is-candle:before{width:4px;height:13px;border-radius:1px;background:var(--green);
  box-shadow:6px 0 0 var(--red)}
.phs-kv.is-candle{padding-right:6px}

/* The five phases again, at length. Same order, same numerals, same colour —
   the chart states the shape and these say what is happening inside it. */
.phs-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
  margin:20px 0 0;padding:0;list-style:none}
.phs-card{border:1px solid var(--l2);border-top:2px solid var(--c,var(--l4));
  background:rgba(var(--bg-rgb),.45);padding:14px 14px 15px;
  opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.phs.in .phs-card{opacity:1;transform:none;transition-delay:calc(2.6s + var(--i) * .1s)}
.phs-card b{display:flex;align-items:center;gap:7px;font-size:9.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;line-height:1.3;color:var(--c,var(--t3))}
.phs-card p{margin:9px 0 0;font-size:11.5px;line-height:1.6;color:var(--t3)}

/* The loop is the argument: the fifth phase is the first one again. */
.phs-loop{position:relative;margin-top:16px;padding-top:2px;text-align:center}
.phs-loop:before{content:"";position:absolute;left:4%;right:4%;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.42),transparent)}
.phs-loop span{position:relative;display:inline-block;padding:6px 20px;
  background:var(--card);border:1px solid rgba(var(--gold-rgb),.35);border-radius:999px;
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold2)}
.phs-cap{margin:14px 0 0;font-size:11.5px;line-height:1.7;color:var(--t4)}

@media(max-width:1100px){
  .phs-cards{grid-template-columns:repeat(3,1fr)}
  .phs-note{font-size:10px;max-width:16ch}
  .phs-arw{width:58px;height:29px}
}
@media(max-width:900px){
  .phs{padding:18px 14px}
  .phs-head{flex-direction:column;gap:14px}
  .phs-quote{padding-left:12px;max-width:none}
  .phs-tabs{height:64px}
  .phs-tab i{display:none}
  .phs-tab b{font-size:8.5px;letter-spacing:.06em}
  .phs-tab .phs-n{width:14px;height:14px;font-size:8px}
  /* The annotations need room the chart no longer has at this width, and they
     repeat what the cards below say in full. */
  .phs-notes{display:none}
  .phs-box{display:none}
  .phs-cards{grid-template-columns:repeat(2,1fr)}
  .phs-key{justify-content:flex-start}
}
@media(max-width:560px){
  .phs-cards{grid-template-columns:1fr}
}

/* Narrower than this the five names cannot share one row at any readable size,
   so the strip becomes a key under the chart — still in phase order, still
   colour-matched to the bands, no longer positioned along them. */
@media(max-width:620px){
  .phs-tabs{position:static;height:auto;display:grid;grid-template-columns:repeat(2,1fr);
    gap:10px;margin-bottom:16px}
  .phs-tab{position:static;width:auto;border-left:0;padding-left:10px;
    box-shadow:inset 2px 0 0 var(--l4)}
  .phs-tab i{display:block;font-size:10px}
  .phs-tab b{font-size:9px;letter-spacing:.1em}
  .phs-tab.is-uptrend,.phs-tab.is-newuptrend{box-shadow:inset 2px 0 0 var(--green)}
  .phs-tab.is-distribution{box-shadow:inset 2px 0 0 var(--gold)}
  .phs-tab.is-downtrend{box-shadow:inset 2px 0 0 var(--red)}
}
@media(max-width:420px){.phs-tabs{grid-template-columns:1fr}}

/* ── Ticked list ───────────────────────────────────────────────────────────
   A set the reader takes in at a glance. Deliberately not numbered: these are
   findings held together by a subject, not steps in an order.
   ------------------------------------------------------------------------ */
.chk-head{font:400 17px/1.3 var(--serif);margin:0 0 16px;color:var(--text)}
.chk-list{margin:0;padding:0;list-style:none;display:grid;gap:13px}
.chk-list li{display:grid;grid-template-columns:18px 1fr;gap:11px;align-items:start;
  font-size:13.5px;line-height:1.6;color:var(--t1)}
.chk-list li em{font-style:italic;color:var(--text)}
.chk-list svg{width:16px;height:16px;margin-top:2px;color:var(--green)}
.chk.is-gold .chk-list svg{color:var(--gold)}

/* ── Five reasons across ───────────────────────────────────────────────────
   The set is five, and five is not three. A row of three plus an orphaned two
   would read as two groups, which is the one thing the row must not say.
   ------------------------------------------------------------------------ */
.cards.cards-five{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.cards.cards-five{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.cards.cards-five{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards.cards-five{grid-template-columns:1fr}}

/* ── The outcome distribution ──────────────────────────────────────────────

   One bar per position, sorted, on a single scale above and below the line.
   --zero and --floor arrive from ui.payoff() as percentages of the plot's own
   height, measured from the top, so the zero line, the cut line and every bar
   are positioned off the same numbers the heights were computed from. Scaling
   the two halves independently would flatter the losses; keeping one scale is
   the difference between a figure and a flattering picture.

   The bars grow out of the zero line rather than fading in, because the thing
   being shown is that they grow to different sizes. Sequenced in CSS off each
   column's --i, so the browser owns the schedule.
   ------------------------------------------------------------------------ */
.pof{border:1px solid var(--l2);background:linear-gradient(160deg,var(--bg2),var(--card));
  padding:22px 24px 24px;margin:0}
.pof-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px}
.pof-head h3{font:400 21px/1.2 var(--serif);margin:0}
.pof-head span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--t4)}

.pof-plot{position:relative;height:clamp(230px,30vw,340px)}
.pof-bars{display:flex;align-items:stretch;gap:clamp(3px,.7vw,8px);
  height:100%;margin:0;padding:0;list-style:none}
.pof-col{flex:1;display:flex;flex-direction:column;min-width:0}
.pof-up{height:var(--zero);display:flex;align-items:flex-end}
.pof-dn{height:calc(100% - var(--zero));display:flex;align-items:flex-start}
.pof-col i{display:block;width:100%;border-radius:1px}

/* Losses are cut by a rule and look it — flat, uniform, unremarkable. Gains are
   the only thing on the figure given any light. */
.pof-up i{background:linear-gradient(180deg,var(--gold2),var(--gold));
  box-shadow:0 0 14px -2px rgba(var(--gold-rgb),.5);transform-origin:bottom}
.pof-dn i{background:rgba(var(--red-rgb),.55);transform-origin:top}
.pof-col i{transform:scaleY(0);transition:transform .6s var(--ease)}
.pof.in .pof-col i{transform:scaleY(1);transition-delay:calc(var(--i) * .035s)}

.pof-zero{position:absolute;left:0;right:0;top:var(--zero);height:1px;background:var(--l5)}
/* The exit rule: drawn, because "losses are cut here" is a line, not a caption. */
.pof-cut{position:absolute;left:0;right:0;top:var(--floor);height:0;
  border-top:1px dashed rgba(var(--red-rgb),.55)}

.pof-note{position:absolute;right:0;font-size:10px;letter-spacing:.02em;line-height:1.5;
  text-align:right;max-width:46%;pointer-events:none}
.pof-note.is-top{top:0;color:var(--gold2)}
.pof-note.is-cut{top:calc(var(--floor) + 7px);color:var(--red)}

.pof-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin:26px 0 0;padding-top:20px;border-top:1px solid var(--l2)}
.pof-stats>div{padding:0 22px;border-left:1px solid var(--l2)}
.pof-stats>div:first-child{border-left:0;padding-left:0}
.pof-stats dt{font:400 clamp(26px,3vw,34px)/1 var(--num);font-variant-numeric:tabular-nums;
  color:var(--gold2)}
.pof-stats dd{margin:9px 0 0;font-size:12px;line-height:1.6;color:var(--muted)}

@media(max-width:760px){
  .pof{padding:18px 16px 20px}
  .pof-plot{height:clamp(190px,44vw,240px)}
  .pof-note{max-width:60%;font-size:9.5px}
  .pof-stats{grid-template-columns:1fr;gap:16px;padding-top:16px}
  .pof-stats>div{border-left:0;padding:0}
  .pof-stats>div+div{border-top:1px solid var(--l2);padding-top:15px}
}

/* ── Philosophy · the life of one position ─────────────────────────────────

   A schematic of one holding: dim before it qualifies, lit while the evidence
   holds, dim again after the exit — with the two stretches the rule refuses to
   chase bracketed off at either end.

   The figure draws itself once, left to right, as a single clip rect scaling
   on X. Everything inside that sweep arrives with the line; the two decisions
   sit outside it and land as it reaches them, each timed off its own --f, the
   fraction of the way along the path where it happens. One number per mark,
   taken from the same geometry the SVG draws with, so a label can never be
   tuned out of step with the event it belongs to.

   It hangs off the site's own .reveal class, so the observer already running on
   every page starts it — no second observer, no timers, and it inherits the
   safety net that forces .in a few seconds after load if the observer never
   reports. Reduced motion is handled globally in base.css, which collapses
   every duration to nothing: the figure then simply appears finished, which is
   the correct end state rather than a degraded one.

   The caption columns are gridded to the same fractions the SVG draws its
   bands at — ui.lifecycle() passes them down as --a/--b/--c — so the labels
   cannot fall out of step with the drawing when the geometry is edited.
   ------------------------------------------------------------------------ */
.lifec{--dur:2.4s;
  border:1px solid var(--l2);background:linear-gradient(160deg,var(--bg2),var(--card));
  padding:22px 22px 0;margin:0}
.lifec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:6px}
.lifec-head h3{font:400 21px/1.2 var(--serif);margin:0}
.lifec-head span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--t4)}

.lifec-plot{position:relative}
/* The chips sit in their own strip above the drawing rather than inside it,
   which is what lets each one stay at a readable size while the SVG scales. */
.lifec-marks{position:relative;height:46px}
.lifec-chip{position:absolute;left:var(--l);top:2px;transform:translateX(-50%);
  text-align:center;white-space:nowrap}
.lifec-chip b{display:block;font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase}
/* Gold buys, red sells. The exit is not a loss and is not drawn as one — but it
   is the only mark on the figure triggered by something going wrong, and it
   reads faster for being the only one that is not gold. */
.lifec-chip.is-buy b{color:var(--gold2)}
.lifec-chip.is-sell b{color:var(--red)}
.lifec-chip i{display:block;font-style:normal;font-size:10px;color:var(--t4);margin-top:4px}

.lifec-frame{position:relative}
.lifec svg{display:block;width:100%;height:clamp(200px,34vw,410px)}

/* The draw. Linear, and deliberately so: the figure is a stretch of time, and
   an eased sweep would have the line reaching the buy and the sell at moments
   nothing else on the page knows about. */
.lifec-sweep{transform-box:view-box;transform-origin:0 0;transform:scaleX(0)}
.lifec.in .lifec-sweep{transform:scaleX(1);transition:transform var(--dur) linear}

.lifec-band{fill:rgba(var(--gold-rgb),.05)}
/* Decisions are dashed and reach the full height; observations are a dotted
   hairline that only drops from the curve to the baseline, where the bracket
   below picks them up. The weight difference is the argument in miniature: one
   is something the market did, the other something we chose to do about it. */
.lifec-rule{stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.lifec-rule.is-buy{stroke:var(--gold);opacity:.45}
.lifec-rule.is-sell{stroke:var(--red);opacity:.42}
.lifec-tick{stroke:var(--t6);stroke-width:1;stroke-dasharray:1 5;opacity:.5;
  vector-effect:non-scaling-stroke}

/* The two refusals, measured in price: from the level we could have had to the
   level we actually take. Left uncoloured on purpose — everything the firm
   does is gold, and these are the parts it declines to do. */
.lifec-forgo{fill:rgba(var(--text-rgb),.05);stroke:var(--t6);stroke-width:1;
  stroke-dasharray:2 3;vector-effect:non-scaling-stroke}

.lifec-line{fill:none;stroke:var(--t6);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:5 6;vector-effect:non-scaling-stroke}
.lifec-line.is-post{stroke:var(--red);opacity:.5}
.lifec-line.is-own{stroke:var(--gold);stroke-width:3;stroke-dasharray:none;opacity:1;
  filter:drop-shadow(0 0 7px rgba(var(--gold-rgb),.4))}
.lifec-s0{stop-color:var(--gold);stop-opacity:.26}
.lifec-s1{stop-color:var(--gold);stop-opacity:0}

/* The low and the high: small hollow marks, because they are points the market
   made and we did nothing about. */
.lifec-node{fill:none;stroke:var(--t5);stroke-width:7;stroke-linecap:round;
  vector-effect:non-scaling-stroke}

/* Each decision is three coincident round caps — a ping, the ring, and the
   page colour punched through it — so the moment reads as an event rather than
   as more line arriving. They begin at zero width and are opened by animating
   stroke-width, which survives the stretched viewBox that a scaled <circle>
   would not. */
.lifec-dot,.lifec-ping{fill:none;stroke-width:0;stroke-linecap:round;
  vector-effect:non-scaling-stroke}
.lifec-dot.is-buy{stroke:var(--gold)}
.lifec-dot.is-sell{stroke:var(--red)}
.lifec-dot.is-core{stroke:var(--card)}
.lifec-ping{opacity:0}
.lifec-ping.is-buy{stroke:var(--gold)}
.lifec-ping.is-sell{stroke:var(--red)}

.lifec.in .lifec-dot,.lifec.in .lifec-ping{animation-duration:.55s;animation-fill-mode:both;
  animation-timing-function:var(--ease);animation-delay:calc(var(--dur) * var(--f))}
.lifec.in .lifec-dot{animation-name:lifecPop}
.lifec.in .lifec-dot.is-core{animation-name:lifecPopCore}
.lifec.in .lifec-ping{animation-name:lifecPing;animation-duration:.9s;
  animation-timing-function:cubic-bezier(.2,.7,.3,1)}
@keyframes lifecPop{from{stroke-width:0}62%{stroke-width:16}to{stroke-width:12}}
@keyframes lifecPopCore{from{stroke-width:0}to{stroke-width:6}}
@keyframes lifecPing{from{stroke-width:6;opacity:.5}to{stroke-width:34;opacity:0}}

/* The pins name the two points the figure exists to say we are not chasing.
   Positioned from the curve's own coordinates, so they stay on their point at
   any width — the low label clears the trough by sitting on the baseline, the
   high label rides above the peak where there is nothing else. */
.lifec-pin{position:absolute;left:var(--l);top:var(--t);opacity:0;
  font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--t4);white-space:nowrap;pointer-events:none}
.lifec-pin.is-low{top:auto;bottom:4px;transform:translateX(-50%)}
.lifec-pin.is-high{transform:translate(-50%,-190%)}

/* Brackets under the drawing: a rule with the ticks turned up toward the two
   events each one spans. The label is free to be wider than its bracket —
   given-back is barely a tenth of the figure, and a label clipped to it would
   be unreadable at every width below a desktop. */
.lifec-spans{position:relative;height:42px;margin-top:4px}
.lifec-span{position:absolute;left:var(--l);width:var(--w);top:0;height:8px;opacity:0;
  border:1px solid var(--t6);border-top:0}
.lifec-span i{position:absolute;top:13px;left:50%;transform:translateX(-50%);
  display:block;width:max-content;max-width:min(215px,40vw);
  font:400 10px/1.5 var(--sans);font-style:normal;text-align:center;color:var(--t4)}

.lifec.in :is(.lifec-pin,.lifec-span){animation:lifecArrive .5s var(--ease) both;
  animation-delay:calc(var(--dur) * var(--f) + .08s)}
.lifec.in .lifec-chip{animation:lifecArrive .5s var(--ease) both;
  animation-delay:calc(var(--dur) * var(--f) + .08s)}
.lifec-chip{opacity:0}
@keyframes lifecArrive{from{opacity:0}to{opacity:1}}

/* The link between a caption and its stretch of the curve. :has() is the whole
   mechanism — where it is unsupported the captions simply stay as they are,
   which costs the figure nothing it was relying on. */
.lifec-focus{fill:rgba(var(--gold-rgb),.07);opacity:0;transition:opacity .3s var(--ease);
  pointer-events:none}
.lifec-zone:is(:hover,:focus-visible){background:rgba(var(--gold-rgb),.06)}
/* The tint is the highlight, but a keyboard reader still needs the caption
   itself marked — the tint is doing a second job out in the drawing. */
.lifec-zone:focus-visible{outline:1px solid var(--gold);outline-offset:-2px}
.lifec:has(.lifec-zone[data-zone="0"]:is(:hover,:focus-visible)) .lifec-focus[data-stage="0"],
.lifec:has(.lifec-zone[data-zone="1"]:is(:hover,:focus-visible)) .lifec-focus[data-stage="1"],
.lifec:has(.lifec-zone[data-zone="2"]:is(:hover,:focus-visible)) .lifec-focus[data-stage="2"]{opacity:1}

.lifec-zones{display:grid;grid-template-columns:var(--a) var(--b) var(--c);
  list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--l2)}
.lifec-zone{padding:16px 20px 20px;border-left:1px solid var(--l2);
  transition:background .3s var(--ease)}
.lifec-zone:first-child{border-left:0;padding-left:0}
.lifec-zone:last-child{padding-right:0}
.lifec-zone.is-own{background:rgba(var(--gold-rgb),.045)}
.lifec-kick{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--t5)}
.lifec-zone.is-own .lifec-kick{color:var(--gold2)}
.lifec-zone h3{font:400 17px/1.25 var(--serif);margin:9px 0 7px}
.lifec-zone p{margin:0;font-size:13px;line-height:1.7;color:var(--t1)}

@media(max-width:820px){
  .lifec{padding:18px 16px 0}
  /* Stacked, the bands stop being columns, so the owned stage is marked with
     a rule down its edge instead of a tint that would read as an accident. */
  .lifec-zones{grid-template-columns:1fr}
  .lifec-zone{border-left:0;border-top:1px solid var(--l2);padding:15px 0 16px}
  .lifec-zone:first-child{border-top:0}
  .lifec-zone.is-own{background:none;box-shadow:inset 2px 0 0 var(--gold);padding-left:15px}
  .lifec-chip i{display:none}
  /* Below a desktop there is no room to span a bracket over a tenth of the
     figure and label it, so the two refusals become a keyed list instead. The
     ticks on the drawing still carry where they are. */
  .lifec-spans{position:static;height:auto;display:grid;gap:10px;margin-top:16px}
  .lifec-span{position:static;width:auto;height:auto;border:0;padding-left:11px;
    box-shadow:inset 2px 0 0 var(--t6)}
  .lifec-span i{position:static;transform:none;width:auto;max-width:none;text-align:left}
}
@media(max-width:560px){.lifec-chip b{font-size:9px;letter-spacing:.12em}.lifec-marks{height:32px}
  .lifec-pin{font-size:8px;letter-spacing:.12em}}

/* ===================================================== two forces =========
   Quality and Momentum, stated as two columns either side of the overlap
   they argue for. Every colour is a token, so the figure re-themes with the
   switch; the only accent decisions are which side is --gold and which is
   --cyan, and those two hold in all four palettes.

   The currents are the one piece of motion. They ride paths that are already
   drawn statically beneath them, so switching animation off costs the figure
   nothing but movement. --------------------------------------------------- */
.forces{--q:var(--gold);--q-rgb:var(--gold-rgb);--m:var(--cyan);--m-rgb:var(--cyan-rgb)}

/* head */
.forces-head{text-align:center;max-width:780px;margin:0 auto 54px}
.forces-head h2{font:400 clamp(34px,4.4vw,58px)/1.06 var(--serif);margin:14px 0 0;color:var(--text)}
.forces-head h2 em{font-style:italic;color:var(--gold2)}
.forces-sub{margin:18px 0 0;font:600 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;
  line-height:2;color:var(--t4)}

/* the three columns */
.forces-grid{display:grid;grid-template-columns:1fr 1.02fr 1fr;gap:46px;align-items:stretch}

.forces-tag{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.forces-tag span{font:700 10px var(--sans);letter-spacing:.24em;text-transform:uppercase;white-space:nowrap}
.forces-tag i{flex:1;height:1px;display:block}
.forces-col.is-q .forces-tag span{color:var(--q)}
.forces-col.is-q .forces-tag i{background:linear-gradient(90deg,rgba(var(--q-rgb),.85),transparent)}
.forces-col.is-m{text-align:right}
.forces-col.is-m .forces-tag{flex-direction:row-reverse}
.forces-col.is-m .forces-tag span{color:var(--m)}
.forces-col.is-m .forces-tag i{background:linear-gradient(270deg,rgba(var(--m-rgb),.85),transparent)}

.forces-col{display:flex;flex-direction:column}
.forces-col h3{font:400 clamp(30px,3.4vw,46px)/1.04 var(--serif);margin:0;color:var(--text)}
.forces-kicker{margin:16px 0 0;font:700 10.5px var(--sans);letter-spacing:.17em;text-transform:uppercase;
  line-height:1.95}
.forces-col.is-q .forces-kicker{color:rgba(var(--q-rgb),.9)}
.forces-col.is-m .forces-kicker{color:rgba(var(--m-rgb),.92)}
.forces-body{margin:16px 0 0;font-size:13.5px;line-height:1.85;color:var(--muted)}

/* feature rows */
.forces-feats{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px}
.forces-feat{display:flex;align-items:center;gap:14px;padding:13px 15px;
  border:1px solid var(--l2);border-radius:var(--radius-sm);
  background:rgba(var(--bg2-rgb),.46);
  transition:border-color .45s var(--ease),background .45s var(--ease),transform .45s var(--ease)}
.forces-col.is-m .forces-feat{flex-direction:row-reverse}
.forces-feat-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.forces-feat-t b{font:400 15px/1.3 var(--serif);color:var(--text)}
.forces-feat-t span{font-size:11.5px;line-height:1.5;color:var(--t4)}

.forces-ico{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;
  border:1px solid var(--l3);transition:border-color .45s var(--ease),color .45s var(--ease)}
.forces-ico svg{width:19px;height:19px;margin:0;display:block}
.forces-ico.is-plain{width:auto;height:auto;border:0;border-radius:0;background:none}
.forces-ico.is-plain svg{width:16px;height:16px}

.forces-col.is-q .forces-ico{color:var(--q);background:rgba(var(--q-rgb),.07);border-color:rgba(var(--q-rgb),.26)}
.forces-col.is-m .forces-ico{color:var(--m);background:rgba(var(--m-rgb),.07);border-color:rgba(var(--m-rgb),.28)}
.forces-col.is-q .forces-feat:hover{border-color:rgba(var(--q-rgb),.4);background:rgba(var(--q-rgb),.05);transform:translateX(3px)}
.forces-col.is-m .forces-feat:hover{border-color:rgba(var(--m-rgb),.4);background:rgba(var(--m-rgb),.05);transform:translateX(-3px)}

.forces-quote{margin:24px 0 0;margin-top:auto;padding-top:20px;font:italic 400 15px/1.6 var(--serif);color:var(--t1)}
.forces-col.is-q .forces-quote{border-top:1px solid rgba(var(--q-rgb),.3)}
.forces-col.is-m .forces-quote{border-top:1px solid rgba(var(--m-rgb),.3)}

/* ---- the middle: venn, currents, outcomes ---- */
.forces-mid{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding-top:6px}
.forces-venn{display:block;width:100%;max-width:400px;height:auto;overflow:visible}
.vn-ring{fill:none;stroke-width:1.2}
.vn-ring.is-q{stroke:rgba(var(--q-rgb),.62);fill:rgba(var(--q-rgb),.05)}
.vn-ring.is-m{stroke:rgba(var(--m-rgb),.62);fill:rgba(var(--m-rgb),.05)}
.vn-lens{fill:rgba(var(--text-rgb),.07);stroke:none}
.vn-mark{fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.vn-mark.is-q{stroke:var(--q)}
.vn-mark.is-m{stroke:var(--m)}
.vn-h{font:700 11px var(--sans);letter-spacing:.17em;text-transform:uppercase;text-anchor:middle}
.vn-h.is-q{fill:var(--q)}
.vn-h.is-m{fill:var(--m)}
.vn-w{font:500 8.5px var(--sans);letter-spacing:.15em;text-transform:uppercase;text-anchor:middle;fill:var(--t4)}
.vn-core text{font:700 8px var(--sans);letter-spacing:.11em;text-transform:uppercase;text-anchor:middle;
  fill:var(--text)}

.forces-stream{position:relative;width:100%;max-width:400px;margin-top:-6px;
  flex:1 1 auto;min-height:250px;display:flex;align-items:center;justify-content:center}
.forces-flow{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fl-bed{fill:none;stroke-width:11;stroke-linecap:round;opacity:.2}
.fl-run{fill:none;stroke-width:3;stroke-linecap:round}
/* The current carries its own light, so the channel reads as water rather
   than as a dashed rule. Drop-shadow rather than an SVG filter element:
   it inherits the side colour and costs nothing to re-theme. */
.fl-q .fl-run{filter:drop-shadow(0 0 5px rgba(var(--q-rgb),.55))}
.fl-m .fl-run{filter:drop-shadow(0 0 5px rgba(var(--m-rgb),.55))}
.fl-q .fl-bed,.fl-q .fl-run{stroke:var(--q)}
.fl-m .fl-bed,.fl-m .fl-run{stroke:var(--m)}
.fl-arrow{fill:rgba(var(--text-rgb),.62);stroke:none}

/* The current. Dash cycle is 26+210 = 236 user units and the offset travels
   exactly two of them, so the loop closes on itself whatever the path length
   turns out to be. */
.fl-run{stroke-dasharray:26 210;stroke-dashoffset:0;animation:forcesRun 3.8s linear infinite}
.fl-run.is-2{stroke-dasharray:12 242;stroke-width:1.4;opacity:.55;
  animation:forcesRun2 6.2s linear infinite;animation-delay:-2.4s}
@keyframes forcesRun{to{stroke-dashoffset:-472}}
@keyframes forcesRun2{to{stroke-dashoffset:-508}}

.forces-outcomes{position:relative;z-index:1;list-style:none;margin:0;padding:0;
  display:grid;gap:16px;justify-items:center;text-align:center}
.forces-outcome{display:flex;flex-direction:column;align-items:center;gap:6px;
  font:700 9.5px var(--sans);letter-spacing:.16em;text-transform:uppercase;line-height:1.6;
  color:var(--t3);max-width:230px}
.forces-outcome .forces-ico{color:var(--gold2)}

.forces-badge{margin-top:24px;display:flex;align-items:center;gap:14px;
  padding:14px 26px;border:1px solid rgba(var(--gold-rgb),.42);border-radius:var(--radius-sm);
  background:rgba(var(--bg2-rgb),.6)}
.forces-badge .forces-ico{color:var(--gold);border-color:rgba(var(--gold-rgb),.3);
  background:rgba(var(--gold-rgb),.07)}
.forces-badge-t{display:flex;flex-direction:column;gap:4px;text-align:left}
.forces-badge-t b{font:700 11.5px var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--gold2)}
.forces-badge-t span{font:500 9.5px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--t5)}

/* ---- footer strip ---- */
.forces-foot{margin-top:56px;padding-top:24px;border-top:1px solid var(--l2);
  display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap}
.forces-marks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:30px}
.forces-marks li{display:flex;align-items:center;gap:9px;
  font:700 9.5px var(--sans);letter-spacing:.19em;text-transform:uppercase;color:var(--t4)}
.forces-marks .forces-ico{color:var(--gold)}
.forces-close{margin:0;text-align:right;font:700 9.5px/2 var(--sans);letter-spacing:.17em;
  text-transform:uppercase;color:var(--t4)}

/* ---- responsive ---- */
@media(max-width:1080px){
  .forces-grid{grid-template-columns:1fr 1fr;gap:40px}
  /* The synthesis reads last once the two columns sit side by side. */
  .forces-col.is-q{order:1}
  .forces-col.is-m{order:2}
  .forces-mid{order:3;grid-column:1/-1;padding-top:16px}
}
@media(max-width:760px){
  .forces-grid{grid-template-columns:1fr;gap:44px}
  .forces-head{margin-bottom:40px}
  /* Both columns read left-to-right in one column; mirroring only made sense
     while they faced each other. */
  .forces-col.is-m{text-align:left}
  .forces-col.is-m .forces-tag{flex-direction:row}
  .forces-col.is-m .forces-tag i{background:linear-gradient(90deg,rgba(var(--m-rgb),.85),transparent)}
  .forces-col.is-m .forces-feat{flex-direction:row}
  .forces-col.is-m .forces-feat:hover{transform:translateX(3px)}
  .forces-stream{min-height:210px}
  .forces-foot{justify-content:flex-start;gap:22px}
  .forces-marks{gap:18px}
  .forces-close{text-align:left}
}

@media(prefers-reduced-motion:reduce){
  /* The bed stays and the current stops as a solid stroke, so the channel
     still reads as a channel rather than as a dotted line frozen mid-stride. */
  .fl-run{animation:none;stroke-dasharray:none;opacity:.5;filter:none}
  .fl-run.is-2{display:none}
  .forces-feat:hover{transform:none}
}

/* ===================================================== the process =======
   The route map and the five stages beneath it. Same rule as everywhere
   else: colour comes from tokens only, so all four themes are covered by
   writing none of them. The trail's travel uses the dash technique the
   two-forces currents use, so the two figures move in the same language. */

/* ---- the trail ---- */
.ptrail{margin:0 auto;max-width:1120px}
.ptrail svg{display:block;width:100%;height:auto;overflow:visible}
.ptrail-bed{fill:none;stroke:rgba(var(--text-rgb),.1);stroke-width:5;stroke-linecap:round}
.ptrail-run{fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(var(--gold-rgb),.6));
  stroke-dasharray:26 210;animation:ptrailRun 4.6s linear infinite}
.ptrail-run.is-2{stroke:var(--gold2);stroke-width:1.3;opacity:.5;stroke-dasharray:12 242;
  animation:ptrailRun2 7.4s linear infinite;animation-delay:-3s}
@keyframes ptrailRun{to{stroke-dashoffset:-472}}
@keyframes ptrailRun2{to{stroke-dashoffset:-508}}

.ptrail-halo{fill:rgba(var(--gold-rgb),.09);stroke:none}
.ptrail-ring{fill:var(--bg);stroke:var(--gold);stroke-width:1.6;
  filter:drop-shadow(0 0 8px rgba(var(--gold-rgb),.45))}
.ptrail-n{fill:var(--gold2);font:400 17px var(--num);text-anchor:middle}
.ptrail-t{fill:var(--text);font:400 17px var(--serif);text-anchor:middle}
.ptrail-s{fill:var(--t5);font:700 8.5px var(--sans);letter-spacing:.2em;text-transform:uppercase;
  text-anchor:middle}
/* The waypoints light in the order they are walked. */
.ptrail-node{opacity:0;transition:opacity .7s var(--ease);transition-delay:calc(var(--i) * .13s + .2s)}
.ptrail.in .ptrail-node{opacity:1}

/* ---- the stage pills ---- */
.pstage-nav{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 8px}
.pstage-pill{display:inline-flex;align-items:center;gap:9px;padding:10px 17px;
  border:1px solid var(--l3);border-radius:var(--radius-pill);
  font:700 10px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--t3);
  text-decoration:none;transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
.pstage-pill b{font:400 12px var(--num);color:var(--t5);transition:color .3s var(--ease)}
.pstage-pill:hover,.pstage-pill:focus-visible,.pstage-pill.is-here{
  border-color:rgba(var(--gold-rgb),.55);color:var(--gold2);background:rgba(var(--gold-rgb),.06)}
.pstage-pill:hover b,.pstage-pill:focus-visible b,.pstage-pill.is-here b{color:var(--gold)}

/* ---- a stage ---- */
/* The stack. Each stage is sticky at an offset one notch lower than the
   stage before it, so a card climbing the page comes to rest on top of the
   last one and leaves a sliver of it showing. By the exit, the whole process
   is on screen at once — which is the point the page is making.

   The cards must be opaque for this to read, so the background is built from
   two solid tokens rather than a tint over the page. */
.pstages{--stack:calc(var(--nav-h, 70px) + var(--subnav-h, 0px) + 20px)}
.pstage{position:sticky;top:calc(var(--stack) + var(--i) * 14px);
  display:grid;grid-template-columns:1.12fr .88fr;gap:52px;align-items:center;
  padding:40px 46px;margin-bottom:30px;
  border:1px solid var(--l2);border-radius:var(--radius-lg);
  background:linear-gradient(152deg,var(--alt),var(--bg) 64%);
  box-shadow:0 -14px 34px rgba(var(--deep-rgb),.5),0 26px 64px rgba(var(--deep-rgb),.34);
  scroll-margin-top:calc(var(--stack) + 12px);
  /* Driven by process.js as the next card lands on this one. Deliberately
     untransitioned: the value is already tied to scroll position, and a
     transition on top of that only makes it lag the pointer. */
  transform-origin:50% 0;transform:scale(var(--cover-scale,1));opacity:var(--cover-dim,1);
  transition:box-shadow .5s var(--ease),border-color .5s var(--ease)}
.pstage:last-of-type{margin-bottom:0}
/* The card on top of the stack is the one being read. */
.pstage.is-under{border-color:var(--l1)}
/* Inside a card, the metric panel stops competing: the stage itself is now
   the surface, so the panel is an inset rather than a second card. */
.pstages .pstage-card{background:rgba(var(--gold-rgb),.035);border-color:var(--l3);box-shadow:none}
.pstages .pstage-card:hover{transform:none;border-color:rgba(var(--gold-rgb),.34)}
/* Alternate the side the card sits on, so the page zig-zags the way the
   trail above it climbs. Placement rather than `direction:rtl`, which would
   also reverse the punctuation inside the copy. */
.pstage:nth-of-type(even) .pstage-body{grid-column:2;grid-row:1}
.pstage:nth-of-type(even) .pstage-card{grid-column:1;grid-row:1}

.pstage-eyebrow{font:700 10px var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.pstage-body h2{font:400 clamp(34px,4vw,54px)/1.03 var(--serif);margin:16px 0 0;color:var(--text)}
.pstage-lead{margin:12px 0 0;font:italic 400 clamp(17px,1.7vw,21px)/1.45 var(--serif);color:var(--t1)}
.pstage-copy{margin:18px 0 0;font-size:14px;line-height:1.85;color:var(--muted);max-width:60ch}
/* Paragraphs within one stage sit closer than the gap below the lead. */
.pstage-copy + .pstage-copy{margin-top:13px}

.pstage-card{border:1px solid var(--l2);border-radius:var(--radius);padding:28px 26px;
  background:linear-gradient(150deg,rgba(var(--bg2-rgb),.9),rgba(var(--deep-rgb),.6));
  transition:border-color .45s var(--ease),transform .45s var(--ease)}
.pstage-card:hover{border-color:rgba(var(--gold-rgb),.38);transform:translateY(-4px)}
/* ================================ the research process ===================
   The home page's account of the board: three tiers, each card carrying the
   question it answers and a drawing of what the answer looks like. Lifted
   from the approved preview unchanged, so what was signed off is what ships.

   `rp-` is the section, `rpa-` is anything that moves. All of it stops under
   prefers-reduced-motion. ---------------------------------------------- */

/* ---- the section itself ---- */
.rp{padding:clamp(58px,6.2vw,86px) 0}
.rp-head{text-align:center;max-width:760px;margin:0 auto 46px}
.rp-head .eyebrow{justify-content:center}
.rp-head h2{font:400 clamp(38px,4.6vw,62px)/1.06 var(--serif);margin:14px 0 0;color:var(--text)}
.rp-head h2 em{font-style:italic;color:var(--gold2)}
.rp-head p{margin:16px auto 0;max-width:56ch;font-size:14px;line-height:1.8;color:var(--muted)}
.rp-rule{width:64px;height:2px;background:var(--gold);margin:26px auto 0;border-radius:2px}

.rp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.rp-card{position:relative;display:flex;flex-direction:column;padding:26px 24px 22px;
  border:1px solid var(--l2);border-radius:var(--radius-lg);
  background:linear-gradient(155deg,rgba(var(--bg2-rgb),.9),rgba(var(--deep-rgb),.55));
  box-shadow:0 26px 60px -34px rgba(0,0,0,.9);
  transition:border-color .45s var(--ease),transform .45s var(--ease)}
.rp-card:hover{border-color:rgba(var(--gold-rgb),.4);transform:translateY(-5px)}
/* the chevron lives in the gap, not in either card */
.rp-card:not(:last-child):after{content:"";position:absolute;right:-19px;top:120px;width:11px;height:11px;
  border-right:2px solid rgba(var(--gold-rgb),.6);border-bottom:2px solid rgba(var(--gold-rgb),.6);
  transform:rotate(-45deg);animation:rpNudge 3.2s ease-in-out infinite}
@keyframes rpNudge{0%,100%{opacity:.35;transform:rotate(-45deg) translate(-3px,-3px)}
  50%{opacity:1;transform:rotate(-45deg) translate(3px,3px)}}

.rp-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.rp-badge{display:flex;align-items:center;gap:12px}
.rp-num{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(var(--gold-rgb),.5);background:rgba(var(--gold-rgb),.08);
  font:400 14px var(--num);color:var(--gold2)}
.rp-stage{font:700 9.5px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--t4)}
.rp-cue{text-align:right}
.rp-cue svg{display:block;margin-left:auto;color:rgba(var(--gold-rgb),.75)}
.rp-cue span{display:block;margin-top:7px;font:700 8.5px var(--sans);letter-spacing:.17em;
  text-transform:uppercase;color:var(--cyan)}
.rp-card h3{margin:18px 0 0;font:400 38px/1.05 var(--serif);color:var(--text)}
.rp-q{margin:12px 0 0;font:700 10px var(--sans);letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);line-height:1.7}
.rp-copy{margin:12px 0 0;font-size:13px;line-height:1.8;color:var(--muted)}

.rp-fig{margin:22px 0 0;position:relative;border-radius:var(--radius-sm);overflow:hidden;
  border:1px solid var(--l3);background:linear-gradient(160deg,rgba(var(--deep-rgb),.6),transparent)}
.rp-fig svg{display:block;width:100%;height:auto}

.rp-points{margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--l3);
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rp-point{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.rp-point i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(var(--gold-rgb),.35);color:var(--gold2)}
.rp-point span{font-size:10.5px;line-height:1.5;color:var(--t3)}
.rp-go{margin-top:20px;display:inline-flex;align-items:center;gap:9px;
  font:700 9.5px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold2)}
.rp-go:hover{color:var(--gold)}
.rp-go svg{transition:transform .35s var(--ease)}
.rp-card:hover .rp-go svg{transform:translateX(4px)}

/* ---- tier 1 callout ---- */
.rp-callout{position:absolute;right:12px;top:14px;display:flex;align-items:center;gap:7px;
  padding:7px 11px;border-radius:var(--radius-sm);
  border:1px solid rgba(var(--gold-rgb),.45);background:rgba(var(--deep-rgb),.9);
  font:500 11px var(--sans);color:var(--gold2);white-space:nowrap}
.rp-callout b{font-weight:500;color:var(--text)}

/* ---- tier 3, locked ---- */
.rp-lockrow{display:flex;align-items:center;gap:11px;padding:9px 12px}
.rp-lockrow + .rp-lockrow{border-top:1px solid var(--l3)}
.rp-av{width:24px;height:24px;flex:none;border-radius:50%;border:1px solid var(--l4);
  background:rgba(var(--text-rgb),.05)}
.rp-mask{height:8px;border-radius:4px;background:rgba(var(--text-rgb),.14);filter:blur(2.2px)}
.rp-meter{height:6px;border-radius:3px;background:var(--gold);opacity:.75}
.rp-lockrow.is-dim .rp-meter{opacity:.32}
.rp-lockfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 12px;border-top:1px solid var(--l3);background:rgba(var(--gold-rgb),.05)}
.rp-lockfoot span{font-size:10.5px;color:var(--t3)}
.rp-lockfoot b{font:700 9px var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--gold2)}

/* ---- the live stamp ---- */
/* Says which week the three cards are reading, so the panel dates itself
   rather than asking the visitor to assume it is current. */
.rp-stamp{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;
  margin:0 0 22px;font-size:11.5px;color:var(--t3)}
.rp-stamp b{color:var(--text);font-weight:500}
.rp-stamp > i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 4px rgba(79,192,141,.14);animation:rpPulse 2.8s ease-in-out infinite}
.rp-dot{width:3px;height:3px;border-radius:50%;background:var(--l4);flex:none}
@keyframes rpPulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ---- tier 1, the sectors actually leading ---- */

/* ---- tier 2, the live board ---- */
/* Rows, not an SVG: these carry real industry names, so they need real text —
   selectable, translatable, and truncated by the browser rather than by a
   character count guessed here. */
.rp-rows{padding:6px}
.rp-row{position:relative;display:flex;align-items:center;gap:10px;padding:9px 11px;
  border-radius:var(--radius-sm);overflow:hidden;isolation:isolate}
.rp-row:before{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,60%);z-index:-1;
  border-radius:var(--radius-sm);background:rgba(62,150,124,.3);
  animation:rpSweep 4.6s ease-in-out infinite;animation-delay:calc(var(--b) * .15s)}
.rp-row.is-lead:before{background:rgba(var(--gold-rgb),.34);animation:none}
@keyframes rpSweep{0%,100%{opacity:.62}45%{opacity:1}}
.rp-rk{flex:none;width:22px;font:400 10.5px var(--num);color:var(--t4);
  font-variant-numeric:tabular-nums}
.rp-row.is-lead .rp-rk{color:var(--gold2)}
.rp-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:11.5px;color:var(--muted)}
.rp-row.is-lead .rp-nm{color:var(--text)}
/* No export this week: the same rows, with nothing claimed in them. */
.rp-row.is-blind .rp-nm{height:8px;border-radius:4px;background:rgba(var(--text-rgb),.1)}

/* Choosing an industry re-asks stage 03 about it, so a row with a name behind
   it reads as something to press rather than a label. Only rows the export
   filled carry [data-rp-industry], so a blind week stays inert. */
.rp-row[data-rp-industry]{cursor:pointer;transition:transform .2s var(--ease)}
.rp-row[data-rp-industry]:hover .rp-nm,
.rp-row[data-rp-industry]:focus-visible .rp-nm{color:var(--text)}
.rp-row[data-rp-industry]:hover{transform:translateX(2px)}
.rp-row[data-rp-industry]:focus-visible{outline:1px solid var(--gold);outline-offset:1px}
/* The chosen row, which is the top-ranked one until someone picks another. The
   gold fill is the board's own "leading" colour, so it moves with the choice
   rather than staying pinned to rank 1. */
.rp-row.is-picked:before{background:rgba(var(--gold-rgb),.34);animation:none}
.rp-row.is-picked .rp-rk{color:var(--gold2)}
.rp-row.is-picked .rp-nm{color:var(--text)}
.rp-row.is-lead:not(.is-picked):before{background:rgba(62,150,124,.3)}
.rp-row.is-lead:not(.is-picked) .rp-rk{color:var(--t4)}
.rp-row.is-lead:not(.is-picked) .rp-nm{color:var(--muted)}
/* Waiting on the fetch: the names already there stay readable, just quieter. */
.rp-leaders.is-loading{opacity:.55;transition:opacity .2s var(--ease)}
@media(prefers-reduced-motion:reduce){
  .rp-row[data-rp-industry]:hover{transform:none}
}
.rp-dirs{flex:none;display:flex;gap:5px}
.rp-tick{width:9px;height:9px;border-radius:2px;flex:none;background:rgba(var(--text-rgb),.22)}
.rp-tick.is-up{background:var(--green)}
.rp-tick.is-down{background:var(--red)}
.rp-legend{margin:10px 2px 0;display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:8px;font:700 8.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--t4)}
.rp-key{display:flex;align-items:center;gap:5px}
.rp-key .rp-tick{width:7px;height:7px;margin-left:7px}
.rp-key .rp-tick:first-child{margin-left:0}

/* ---- tier 3, once the names are served ---- */
.rp-leaders.is-open{background:linear-gradient(160deg,rgba(var(--gold-rgb),.05),transparent)}
.rp-namerow{display:flex;align-items:center;gap:11px;padding:9px 12px}
.rp-namerow + .rp-namerow{border-top:1px solid var(--l3)}
.rp-lg{width:24px;height:24px;flex:none;border-radius:50%;object-fit:contain;background:#fff}
.rp-lg.is-tile{border-radius:6px}
.rp-nmwrap{flex:0 0 42%;min-width:0;display:flex;flex-direction:column;gap:2px}
.rp-nmwrap b{font:500 11.5px var(--sans);color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.rp-namerow.is-lead .rp-nmwrap b{color:var(--text)}
.rp-nmwrap span{font:400 9.5px var(--num);color:var(--t4)}
/* A track with a fill, not a sized bar: the row must never be able to
   outgrow the card, whatever the meter reads. */
.rp-track{flex:1;min-width:0;height:6px;border-radius:3px;overflow:hidden;
  background:rgba(var(--text-rgb),.07)}
.rp-track i{display:block;height:100%;border-radius:3px;background:var(--gold);opacity:.34}
.rp-namerow.is-lead .rp-track i{opacity:.85}
.rp-namefoot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 12px;border-top:1px solid var(--l3);background:rgba(var(--gold-rgb),.05)}
.rp-namefoot span{font-size:10.5px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.rp-namefoot > span b{color:var(--text);font-weight:500}
.rp-namefoot > b{flex:none;font:700 9px var(--sans);letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold2)}
.rp-lockind{color:var(--text);font-weight:500}

/* ---- the closing path ---- */
.rp-path{margin-top:46px;position:relative;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--l2);background:linear-gradient(170deg,rgba(var(--deep-rgb),.85),rgba(var(--bg2-rgb),.35))}
.rp-path svg{display:block;width:100%;height:auto}
.rp-path-cap{position:absolute;left:34px;top:30px}
.rp-path-cap b{display:block;font:700 11px var(--sans);letter-spacing:.24em;text-transform:uppercase;
  color:var(--text);line-height:2}
.rp-path-cap i{display:block;width:44px;height:2px;background:var(--gold);margin-top:12px}

@media(max-width:1080px){
  .rp-grid{grid-template-columns:1fr;gap:18px}
  .rp-card:not(:last-child):after{right:auto;left:50%;top:auto;bottom:-15px;
    transform:rotate(45deg);animation:none;opacity:.7}
}
@media(prefers-reduced-motion:reduce){
  .rp-card:not(:last-child):after{animation:none;opacity:.7}
  .rpa-bar,.rpa-row,.rpa-tick,.rpa-run,.rpa-node{animation:none}
  .rpa-run{stroke-dasharray:none;opacity:.6}
  .rp-row:before,.rp-stamp > i{animation:none}
  .rp-row:before{opacity:.8}
}

/* ---- figure animation ---- */
.rpa-bar{animation:rpScan 4.6s ease-in-out infinite;animation-delay:calc(var(--b) * .15s)}
@keyframes rpScan{0%,100%{opacity:.5}45%{opacity:.95}}
.rpa-bar.is-lead{animation:none;opacity:1}
.rpa-row{animation:rpScan 4.8s ease-in-out infinite;animation-delay:calc(var(--b) * .2s)}
.rpa-row.is-lead{animation:none;opacity:1}
.rpa-tick{animation:rpTick 3.2s ease-in-out infinite;animation-delay:calc(var(--b) * .24s)}
@keyframes rpTick{0%,100%{opacity:.45}50%{opacity:1}}
.rpa-run{stroke-dasharray:26 900;animation:rpRun 7s linear infinite}
@keyframes rpRun{to{stroke-dashoffset:-926}}
.rpa-node{animation:rpPulse 3.4s ease-in-out infinite;animation-delay:calc(var(--b) * .5s)}
@keyframes rpPulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ================================ how the board is read ==================
   Three panels, each holding fewer things than the one before, because the
   narrowing is the point. On a wide screen they sit in a row with a chevron
   between them so the eye reads left to right; stacked, the chevron turns
   down and the same order still holds. */
.bstory{list-style:none;margin:0;padding:0;display:grid;gap:22px;
  grid-template-columns:repeat(3,1fr)}
.bstory-step{position:relative;display:flex;flex-direction:column;
  padding:24px 22px 22px;border:1px solid var(--l2);border-radius:var(--radius);
  background:linear-gradient(152deg,rgba(var(--bg2-rgb),.85),rgba(var(--deep-rgb),.5));
  transition:border-color .45s var(--ease),transform .45s var(--ease)}
.bstory-step:hover{border-color:rgba(var(--gold-rgb),.34);transform:translateY(-4px)}
/* The chevron belongs to the gap, not to either panel, so it is drawn off the
   right edge of every step but the last. */
.bstory-step:not(:last-child):after{content:"";position:absolute;right:-16px;top:92px;
  width:10px;height:10px;border-right:1.5px solid rgba(var(--gold-rgb),.55);
  border-bottom:1.5px solid rgba(var(--gold-rgb),.55);transform:rotate(-45deg);
  animation:bsNudge 3.4s ease-in-out infinite}
@keyframes bsNudge{0%,100%{opacity:.4;transform:rotate(-45deg) translate(-2px,-2px)}
  50%{opacity:1;transform:rotate(-45deg) translate(2px,2px)}}

.bsf{margin:0 0 20px;border-radius:var(--radius-sm);overflow:hidden;
  background:linear-gradient(160deg,rgba(var(--deep-rgb),.6),rgba(var(--bg2-rgb),.15));
  border:1px solid var(--l3)}
.bsf svg{display:block;width:100%;height:auto}

.bstory-head{display:flex;align-items:baseline;gap:12px}
.bstory-n{font:700 9.5px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.bstory-head h3{margin:0;font:400 27px/1.1 var(--serif);color:var(--text)}
.bstory-q{margin:12px 0 0;font:italic 400 16px/1.4 var(--serif);color:var(--t1)}
.bstory-body{margin:12px 0 0;font-size:13px;line-height:1.8;color:var(--muted)}
.bstory-take{margin:16px 0 0;display:flex;align-items:flex-start;gap:9px;
  font-size:12.5px;line-height:1.6;color:var(--t1)}
.bstory-take i{flex:none;margin-top:5px;width:6px;height:6px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 8px rgba(var(--gold-rgb),.8)}
.bstory-count{margin-top:16px;padding-top:14px;border-top:1px solid var(--l3);
  font:700 9px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--t5)}

/* ---- the three drawings ---- */
.bsf-base{stroke:rgba(var(--text-rgb),.16);stroke-width:1}
/* 01 - eleven sectors, ranked; the first is the door you go through. */
.bsf-bars rect{fill:rgba(var(--text-rgb),.14);
  animation:bsScan 4.6s ease-in-out infinite;animation-delay:calc(var(--b, 0) * .16s)}
@keyframes bsScan{0%,100%{opacity:.45}45%{opacity:.95}}
.bsf-bars rect.is-pick{fill:var(--gold);animation:none;opacity:1;
  filter:drop-shadow(0 0 7px rgba(var(--gold-rgb),.8))}
.bsf-pick{fill:none;stroke:var(--gold2);stroke-width:1.6;stroke-linecap:round;
  stroke-linejoin:round;animation:bsLift 3s ease-in-out infinite}
@keyframes bsLift{0%,100%{opacity:.5;transform:translateY(2px)}50%{opacity:1;transform:translateY(-1px)}}
/* 02 - the ranked board inside it, three horizons apiece. */
.bsf-rows g{animation:bsScan 4.8s ease-in-out infinite;animation-delay:calc(var(--b, 0) * .2s)}
.bsf-rank{fill:rgba(var(--gold-rgb),.2)}
.bsf-bar{fill:rgba(var(--text-rgb),.15)}
.bsf-rows g.is-pick{animation:none;opacity:1}
.bsf-rows g.is-pick .bsf-rank{fill:rgba(var(--gold-rgb),.55)}
.bsf-rows g.is-pick .bsf-bar{fill:var(--gold);filter:drop-shadow(0 0 6px rgba(var(--gold-rgb),.7))}
.bsf-tick{animation:bsTick 3.2s ease-in-out infinite;animation-delay:calc(var(--b, 0) * .26s)}
.bsf-tick.is-u{fill:var(--cyan)}
.bsf-tick.is-f{fill:rgba(var(--text-rgb),.3)}
.bsf-tick.is-d{fill:var(--red)}
@keyframes bsTick{0%,100%{opacity:.4}50%{opacity:1}}
/* 03 - and at the end of it, the names. */
.bsf-names g{animation:bsScan 4.4s ease-in-out infinite;animation-delay:calc(var(--b, 0) * .3s)}
.bsf-card{fill:rgba(var(--text-rgb),.05);stroke:var(--l3);stroke-width:1}
.bsf-dot{fill:rgba(var(--text-rgb),.3)}
.bsf-meter{fill:rgba(var(--text-rgb),.16)}
.bsf-names g.is-pick{animation:none;opacity:1}
.bsf-names g.is-pick .bsf-card{stroke:rgba(var(--gold-rgb),.45)}
.bsf-names g.is-pick .bsf-dot{fill:var(--gold2);filter:drop-shadow(0 0 6px rgba(var(--gold2-rgb),.9))}
.bsf-names g.is-pick .bsf-meter{fill:var(--gold)}

@media(max-width:1000px){
  .bstory{grid-template-columns:1fr;gap:16px}
  /* Stacked, the chevron points the way the page now reads. */
  .bstory-step:not(:last-child):after{right:auto;left:50%;top:auto;bottom:-14px;
    transform:rotate(45deg);animation:none;opacity:.7}
}

@media(prefers-reduced-motion:reduce){
  .bstory-step:not(:last-child):after,.bsf-bars rect,.bsf-pick,
  .bsf-rows g,.bsf-tick,.bsf-names g{animation:none}
  .bstory-step:not(:last-child):after{opacity:.7}
  .bsf-bars rect,.bsf-rows g,.bsf-names g{opacity:.9}
  .bsf-pick{transform:none;opacity:.9}
}

/* ---- the stage figures ----
   One drawing per stage, sitting at the head of that stage's card. They share
   the hero family's stroke language — a still bed, a travelling current, a
   waypoint that pulses — so a stage card and a hero read as one publication.
   Everything here is decoration: nothing is load-bearing, and all of it stops
   under prefers-reduced-motion. */
.sfig{margin:-4px 0 22px;border-radius:var(--radius-sm);overflow:hidden;
  background:linear-gradient(160deg,rgba(var(--deep-rgb),.55),rgba(var(--bg2-rgb),.2));
  border:1px solid var(--l3)}
.sfig svg{display:block;width:100%;height:auto}

/* shared language */
.sfig-bed{fill:none;stroke:rgba(var(--text-rgb),.18);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.sfig-run{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:22 260;
  animation:sfRun 5.6s linear infinite;
  filter:drop-shadow(0 0 5px rgba(var(--gold-rgb),.75))}
@keyframes sfRun{to{stroke-dashoffset:-564}}
.sfig-axis{stroke:rgba(var(--text-rgb),.16);stroke-width:1}
.sfig-grid path{stroke:rgba(var(--text-rgb),.07);stroke-width:1}
.sfig-node{fill:var(--gold2);filter:drop-shadow(0 0 5px rgba(var(--gold2-rgb),.8));
  animation:sfPulse 3.4s ease-in-out infinite;animation-delay:calc(var(--b, 0) * .4s)}
@keyframes sfPulse{0%,100%{opacity:.45}50%{opacity:1}}
.sfig-node.is-lead{filter:drop-shadow(0 0 10px rgba(var(--gold2-rgb),.95))}

/* ---- 01 funnel: a wide field in, a few out ---- */
.sfig-rim{stroke:rgba(var(--gold-rgb),.3);stroke-width:1;stroke-dasharray:3 6}
.sfig-body{fill:rgba(var(--gold-rgb),.07);stroke:none}
.sfig-wall{fill:none;stroke:rgba(var(--gold-rgb),.5);stroke-width:1.6;
  stroke-linejoin:round;stroke-linecap:round}
.sfig-out{stroke:rgba(var(--gold-rgb),.5);stroke-width:1.5;stroke-linecap:round}
/* Most of what enters does not reach the stem, which is the whole point. */
.sfig-feed circle{fill:var(--gold2);opacity:.55;
  animation:sfFall 5.2s linear infinite;animation-delay:calc(var(--x, 0) * -.42s)}
@keyframes sfFall{
  0%{transform:translateY(0);opacity:0}
  14%{opacity:.85}
  58%{opacity:.4}
  100%{transform:translateY(86px);opacity:0}
}
.sfig-keep circle{fill:var(--gold2);opacity:.8;
  animation:sfPulse 2.8s ease-in-out infinite;animation-delay:calc(var(--b, 0) * .3s)}

/* ---- 02 bars: growth that compounds ---- */
.sfig-bars rect{fill:rgba(var(--cyan-rgb),.3);stroke:rgba(var(--cyan-rgb),.65);
  stroke-width:1;transform-box:fill-box;transform-origin:50% 100%;
  animation:sfGrow 4.6s ease-in-out infinite;animation-delay:calc(var(--b, 0) * .17s)}
@keyframes sfGrow{0%,100%{transform:scaleY(.74);opacity:.55}45%,62%{transform:scaleY(1);opacity:1}}
.sfig-arrow{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;
  stroke-linejoin:round;animation:sfPulse 3.4s ease-in-out infinite}

/* ---- 03 line: higher highs over higher lows ---- */
.sfig-high{stroke:rgba(var(--gold-rgb),.34);stroke-width:1;stroke-dasharray:4 7}

/* ---- 04 donut: one book, divided by conviction ---- */
.sfig-seg{fill:none;stroke:var(--gold);stroke-width:15;opacity:.78;
  animation:sfSeg 5s ease-in-out infinite;animation-delay:calc(var(--b, 0) * .28s)}
@keyframes sfSeg{0%,100%{opacity:.5;stroke-width:14}50%{opacity:.95;stroke-width:17}}
.sfig-seg.is-cyan{stroke:var(--cyan)}
.sfig-seg.is-dim{stroke:rgba(var(--gold-rgb),.42)}
/* The position under review, travelling the book. */
.sfig-sweep{fill:none;stroke:var(--gold2);stroke-width:15;opacity:.9;
  filter:drop-shadow(0 0 8px rgba(var(--gold2-rgb),.8));
  animation:sfSweep 6.4s linear infinite}
@keyframes sfSweep{to{stroke-dashoffset:-327}}
.sfig-hub{fill:rgba(var(--deep-rgb),.85);stroke:rgba(var(--gold-rgb),.3);stroke-width:1}

/* ---- 05 breakdown: the limit is hit and the position is gone ---- */
/* Green up to the exit, red after it: the two halves of the decision, in the
   colours the rest of the site already uses for strength and weakness. */
.sfig.is-breakdown .sfig-bed{stroke:rgba(var(--green-rgb),.62)}
.sfig.is-breakdown .sfig-bed.is-fall{stroke:rgba(var(--red-rgb),.32)}
.sfig.is-breakdown .sfig-run.is-fall{stroke:var(--red);
  filter:drop-shadow(0 0 6px rgba(var(--red-rgb),.7));animation-duration:4.2s}
.sfig-limit{stroke:rgba(var(--red-rgb),.42);stroke-width:1;stroke-dasharray:5 6}
.sfig-cut-ring{fill:rgba(var(--bg-rgb),.85);stroke:var(--red);stroke-width:1.3;
  animation:sfCut 3.2s ease-out infinite}
.sfig-cut-x{stroke:var(--red);stroke-width:1.6;stroke-linecap:round}
@keyframes sfCut{0%,100%{r:10;opacity:.85}55%{r:12.5;opacity:1}}
.sfig-node.is-gone{fill:var(--red);filter:drop-shadow(0 0 9px rgba(var(--red-rgb),.9))}

@media(prefers-reduced-motion:reduce){
  .sfig-run,.sfig-node,.sfig-feed circle,.sfig-keep circle,.sfig-bars rect,
  .sfig-arrow,.sfig-seg,.sfig-sweep,.sfig-cut-ring{animation:none}
  .sfig-run{stroke-dasharray:none;opacity:.6;filter:none}
  .sfig-node{opacity:.9}
  .sfig-feed circle{opacity:.5}
  /* Held still, a bar is simply its full height. */
  .sfig-bars rect{transform:none;opacity:.9}
  .sfig-sweep{display:none}
}

.pstage-metric{display:flex;flex-direction:column;gap:7px;padding-bottom:20px;
  border-bottom:1px solid var(--l2)}
.pstage-metric b{font:400 clamp(34px,3.6vw,46px)/1 var(--num);color:var(--gold2)}
.pstage-metric span{font:500 11px/1.6 var(--sans);letter-spacing:.06em;color:var(--t4)}
.pstage-card-h{margin:20px 0 14px;font:700 9.5px var(--sans);letter-spacing:.2em;
  text-transform:uppercase;color:var(--t5)}
.pstage-checks{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.pstage-checks li{display:flex;align-items:center;gap:11px;font-size:12.5px;color:var(--t1)}
.pstage-checks i{flex:none;width:17px;height:17px;border-radius:50%;
  border:1px solid rgba(var(--gold-rgb),.5);position:relative}
.pstage-checks i:after{content:"";position:absolute;left:5px;top:4px;width:5px;height:8px;
  border:solid var(--gold);border-width:0 1.4px 1.4px 0;transform:rotate(42deg)}
/* The last stage is the one that sells; its marks read as exits, not passes. */
.pstage:last-of-type .pstage-checks i{border-color:rgba(var(--red-rgb),.55)}
.pstage:last-of-type .pstage-checks i:after{left:4px;top:7px;width:7px;height:0;
  border-width:0 0 1.4px 0;border-color:var(--red);transform:none}
.pstage:last-of-type .pstage-metric b{color:var(--red)}

/* ---- responsive ---- */
@media(max-width:1000px){
  .pstage{position:static;grid-template-columns:1fr;gap:30px;padding:34px 26px;
    margin-bottom:22px;box-shadow:none;scroll-margin-top:100px}
  /* One column reads top-to-bottom, so the alternation is dropped rather
     than left to put a card above the heading it belongs to. */
  .pstage:nth-of-type(even) .pstage-body,
  .pstage:nth-of-type(even) .pstage-card{grid-column:1;grid-row:auto}
  .ptrail-t{font-size:15px}
  .ptrail-s{font-size:7.5px;letter-spacing:.14em}
}
@media(max-width:640px){
  .pstage{padding:26px 20px}
  .pstage-card{padding:22px 20px}
  .pstage-nav{gap:7px}
  .pstage-pill{padding:9px 13px;letter-spacing:.12em}
  /* Below this the five waypoints cannot be labelled legibly side by side,
     so the trail keeps its shape and drops the wording to the stage rows. */
  .ptrail-t,.ptrail-s{display:none}
  .ptrail svg{min-height:120px}
}

@media(prefers-reduced-motion:reduce){
  .ptrail-run{animation:none;stroke-dasharray:none;filter:none;opacity:.55}
  .ptrail-run.is-2{display:none}
  .ptrail-node{opacity:1;transition:none}
  .pstage-card:hover{transform:none}
  .pstage{--cover-scale:1;--cover-dim:1;transition:none}
}

/* ================================================== the strength orb ======
   The artwork for the page the site is built around. Everything is a token,
   so the globe re-colours with the theme switch; everything moves with CSS
   over a drawing that is already complete, so nothing here is load-bearing.
   -------------------------------------------------------------------------- */

/* The hero gains a right-hand stage for the artwork. It sits behind the copy
   and is clipped to the section, so it can run off the edge like a horizon. */
.phero.has-art{position:relative;overflow:hidden}
.phero.has-art>.container{position:relative;z-index:2}
.phero-art{position:absolute;right:1.5%;top:50%;transform:translateY(-50%);
  width:min(50vw,620px);aspect-ratio:1;pointer-events:none;z-index:1}

.sorb{width:100%;height:100%}
.sorb svg{display:block;width:100%;height:100%;overflow:visible}

/* the ball */
.sg-1{stop-color:rgba(var(--cyan-rgb),.58)}
.sg-2{stop-color:rgba(var(--bg2-rgb),.88)}
.sg-3{stop-color:rgba(var(--deep-rgb),.94)}
.sh-1{stop-color:rgba(var(--gold-rgb),.14)}
.sh-2{stop-color:rgba(var(--gold-rgb),0)}
.sorb-core{filter:drop-shadow(0 0 46px rgba(var(--cyan-rgb),.3))}
.sorb-rim{fill:none;stroke:rgba(var(--gold-rgb),.42);stroke-width:1}
.sorb-halo{animation:sorbBreathe 9s ease-in-out infinite alternate}
@keyframes sorbBreathe{to{transform:scale(1.07);opacity:.72}}
.sorb-halo{transform-origin:200px 200px}

/* the graticule, turning inside the ball */
.sorb-lat,.sorb-lon{fill:none;stroke:rgba(var(--cyan-rgb),.38);stroke-width:.8}
.sorb-lon{stroke:rgba(var(--cyan-rgb),.22)}
.sorb-grat{transform-origin:200px 200px;animation:sorbTurn 44s linear infinite}
/* Scaling the longitudes horizontally is what sells the turn: the meridians
   sweep across the face instead of the whole ball pivoting like a wheel. */
@keyframes sorbTurn{
  0%{transform:scaleX(1)}
  25%{transform:scaleX(.18)}
  50%{transform:scaleX(1)}
  75%{transform:scaleX(.18)}
  100%{transform:scaleX(1)}
}

/* points of strength, lighting in sequence */
.sorb-points circle{fill:var(--gold2);opacity:.2;filter:drop-shadow(0 0 4px rgba(var(--gold2-rgb),.9));
  animation:sorbPulse 4.4s ease-in-out infinite;animation-delay:calc(var(--b) * .55s)}
@keyframes sorbPulse{0%,72%,100%{opacity:.2}36%{opacity:1}}

/* the orbits: a still path, ridden by a travelling current */
.sorb-path{fill:none;stroke-width:1;stroke:rgba(var(--text-rgb),.13)}
.sorb-run{fill:none;stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:26 210;animation:sorbRun 7s linear infinite;
  animation-delay:calc(var(--i) * -2.1s)}
.sorb-orbit.is-gold .sorb-run{stroke:var(--gold);filter:drop-shadow(0 0 6px rgba(var(--gold-rgb),.75))}
.sorb-orbit.is-cyan .sorb-run{stroke:var(--cyan);filter:drop-shadow(0 0 6px rgba(var(--cyan-rgb),.75))}
.sorb-orbit.is-slow .sorb-run{animation-duration:11s;stroke-width:1.4;opacity:.72}
@keyframes sorbRun{to{stroke-dashoffset:-472}}

/* ---- hero tag pills ---- */
.phero-tags{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.phero-tags li{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;
  border:1px solid var(--l3);border-radius:var(--radius-pill);
  background:rgba(var(--bg2-rgb),.5);
  font:700 9.5px var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--t3)}
.phero-tags svg{width:14px;height:14px;margin:0;color:var(--gold)}

/* ---- what the board is, and is not ---- */
.bnotes{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--l2);border-radius:var(--radius)}
.bnote{padding:28px 26px;border-left:1px solid var(--l2)}
.bnote:first-child{border-left:0}
.bnote-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(var(--gold-rgb),.34);background:rgba(var(--gold-rgb),.06);color:var(--gold)}
.bnote-ico svg{width:16px;height:16px;margin:0}
.bnote.is-deny .bnote-ico{border-color:rgba(var(--red-rgb),.42);background:rgba(var(--red-rgb),.07);color:var(--red)}
.bnote.is-info .bnote-ico{border-color:rgba(var(--cyan-rgb),.42);background:rgba(var(--cyan-rgb),.07);color:var(--cyan)}
.bnote h3{margin:16px 0 0;font:400 18px/1.25 var(--serif);color:var(--text)}
.bnote p{margin:10px 0 0;font-size:12.5px;line-height:1.75;color:var(--muted)}

/* ---- responsive ---- */
@media(max-width:1100px){
  /* The artwork stops competing with the copy once the column narrows. */
  .phero-art{width:min(62vw,470px);right:-8%;opacity:.4}
}
@media(max-width:860px){
  .bnotes{grid-template-columns:1fr}
  .bnote{border-left:0;border-top:1px solid var(--l2)}
  .bnote:first-child{border-top:0}
}
@media(max-width:760px){
  /* Behind body copy at this width it is texture, not artwork — so it goes. */
  .phero-art{display:none}
  .phero-tags{gap:8px;margin-top:24px}
  .phero-tags li{padding:7px 12px;letter-spacing:.13em}
}

@media(prefers-reduced-motion:reduce){
  /* The drawing is complete without any of this; only the movement stops. */
  .sorb-halo,.sorb-grat,.sorb-points circle,.sorb-run{animation:none}
  .sorb-run{stroke-dasharray:none;opacity:.5;filter:none}
  .sorb-points circle{opacity:.7}
}

/* ============================================ the board, dressed ==========
   Where Is The Strength is the page the firm is known for, so it gets the
   furniture the rest of the site does without: a headline reading band, tier
   cards you can see are choices, and a sector grid with some weight to it.

   All of it dresses markup that already exists and already carries real data
   — strength.js renders the same board it did before. Nothing here invents a
   number, and the confidentiality gate is untouched. ----------------------- */

/* ---- headline readings ---- */
.bstats{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--l2);border-radius:var(--radius);
  background:linear-gradient(140deg,rgba(var(--bg2-rgb),.6),rgba(var(--deep-rgb),.35))}
.bstat{display:flex;align-items:center;gap:15px;padding:22px 24px;border-left:1px solid var(--l2)}
.bstat:first-child{border-left:0}
.bstat-ico{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;
  border:1px solid rgba(var(--gold-rgb),.3);background:rgba(var(--gold-rgb),.06);color:var(--gold)}
.bstat-ico svg{width:18px;height:18px;margin:0}
.bstat-t{display:flex;flex-direction:column;gap:5px;min-width:0}
.bstat-t b{font:400 clamp(20px,2.1vw,27px)/1 var(--num);color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.bstat-t>span{font:700 9px var(--sans);letter-spacing:.19em;text-transform:uppercase;color:var(--t5)}

/* ---- the tier chooser ----
   Three decisions, drawn as three cards rather than three tabs, because the
   tiers are the argument of the page and not a control strip. */
#wis .wis-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:30px}
#wis .wis-step{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:20px 22px;text-align:left;
  border:1px solid var(--l2);border-radius:var(--radius);
  background:linear-gradient(150deg,rgba(var(--bg2-rgb),.68),rgba(var(--deep-rgb),.4));
  transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease)}
#wis .wis-step .n{font:700 9px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
#wis .wis-step .t{font:400 21px/1.15 var(--serif);color:var(--text)}
#wis .wis-step .d{font-size:11.5px;line-height:1.55;color:var(--t4)}
/* How much sits behind each step, so the chooser states the size of the board
   before any of it is opened. Empty until the data lands, and hidden until
   then rather than holding a blank pill open. */
#wis .wis-step .c{position:absolute;top:17px;right:18px;white-space:nowrap;
  font:700 8.5px var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--t5);
  padding:4px 9px;border:1px solid var(--l2);border-radius:999px;
  background:rgba(var(--deep-rgb),.45)}
#wis .wis-step .c:empty{display:none}
#wis .wis-step[aria-selected="true"] .c{color:var(--gold2);
  border-color:rgba(var(--gold-rgb),.45);background:rgba(var(--gold-rgb),.1)}
#wis .wis-step:not([disabled]):hover{transform:translateY(-3px);
  border-color:rgba(var(--gold-rgb),.42);background:rgba(var(--gold-rgb),.05)}
#wis .wis-step[aria-selected="true"]{border-color:rgba(var(--gold-rgb),.62);
  background:linear-gradient(150deg,rgba(var(--gold-rgb),.13),rgba(var(--bg2-rgb),.5));
  box-shadow:0 12px 34px rgba(var(--deep-rgb),.4)}
#wis .wis-step[aria-selected="true"] .t{color:var(--gold2)}
#wis .wis-step[disabled]{opacity:.55}

/* ---- the sector grid ----
   The reference this was drawn from gives every sector a photograph. We have
   no such library and would not ship stock imagery on a regulated page, so
   each card gets a colour field instead — enough to tell the cards apart at a
   glance without pretending to depict anything. */
#wis .sectors{grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:14px}
#wis .sect{position:relative;overflow:hidden;min-height:158px;padding:20px;
  display:flex;flex-direction:column;align-items:flex-start;
  border:1px solid var(--l2);border-radius:var(--radius);
  background:linear-gradient(158deg,rgba(var(--bg2-rgb),.9),rgba(var(--deep-rgb),.72))}
#wis .sect:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:radial-gradient(118% 86% at 100% 0,rgba(var(--cyan-rgb),.3),transparent 58%)}
#wis .sect:nth-child(4n+2):before{background:radial-gradient(118% 86% at 100% 0,rgba(var(--gold-rgb),.26),transparent 58%)}
#wis .sect:nth-child(4n+3):before{background:radial-gradient(118% 86% at 100% 0,rgba(var(--green-rgb),.22),transparent 58%)}
#wis .sect:nth-child(4n+4):before{background:radial-gradient(118% 86% at 100% 0,rgba(var(--gold2-rgb),.2),transparent 58%)}
/* A sector losing its breadth should not read as a warm card. */
#wis .sect.is-weak:before{background:radial-gradient(118% 86% at 100% 0,rgba(var(--red-rgb),.22),transparent 58%)}
#wis .sect>*{position:relative;z-index:1}
#wis .sect h4{margin:10px 0 14px;font:400 20px/1.2 var(--serif);color:var(--text)}
#wis .sect .sect-rank{font-size:9.5px;letter-spacing:.17em}
#wis .sect .sect-meter{width:100%;height:6px;border-radius:3px;margin:auto 0 12px}
#wis .sect .sect-foot{width:100%;font-size:10.5px}
#wis .sect:hover{transform:translateY(-4px);border-color:rgba(var(--gold-rgb),.45);
  box-shadow:0 18px 44px rgba(var(--deep-rgb),.45)}
#wis .sect[aria-pressed="true"]{border-color:rgba(var(--gold-rgb),.68);
  box-shadow:0 0 0 1px rgba(var(--gold-rgb),.28),0 18px 44px rgba(var(--deep-rgb),.5)}
#wis .sect[aria-pressed="true"]:before{opacity:.8}

/* ---- pane heads ---- */
#wis .wis-pane-head h3{font:400 clamp(26px,3vw,38px)/1.08 var(--serif);color:var(--text)}
#wis .wis-pane-head .eyebrow{color:var(--gold)}

/* ---- responsive ---- */
@media(max-width:1000px){
  .bstats{grid-template-columns:repeat(2,1fr)}
  .bstat:nth-child(3){border-left:0}
  .bstat:nth-child(n+3){border-top:1px solid var(--l2)}
  #wis .wis-flow{grid-template-columns:1fr;gap:10px}
  #wis .wis-step{flex-direction:row;align-items:center;gap:14px;padding:15px 18px}
  /* Row layout: the pill rejoins the flow beside the tier name, and the
     description keeps the far right. */
  #wis .wis-step .c{position:static;order:1;top:auto;right:auto}
  #wis .wis-step .d{margin-left:auto;text-align:right;order:2}
}
@media(max-width:620px){
  .bstats{grid-template-columns:1fr}
  .bstat{border-left:0;border-top:1px solid var(--l2);padding:17px 18px}
  .bstat:first-child{border-top:0}
  #wis .sectors{grid-template-columns:1fr}
  #wis .wis-step .d{display:none}
  #wis .wis-step .c{margin-left:auto}
}

@media(prefers-reduced-motion:reduce){
  #wis .sect:hover,#wis .wis-step:not([disabled]):hover{transform:none}
}

/* ====================================== the board, with some life ========
   A second pass over the sector grid. Everything here is decoration over
   markup strength.js already renders — no new data, no new request, and the
   grid still reads correctly with every animation below switched off. ----- */

/* ---- the live mark ----
   The board is rebuilt weekly but served live, and a reader cannot tell the
   difference between a live page and a screenshot without being told. */
#wis .wis-pane-head .eyebrow{display:inline-flex;align-items:center;gap:9px}
#wis .wis-pane-head .eyebrow:after{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--green);flex:none;animation:wisLive 2.8s ease-out infinite}
@keyframes wisLive{
  0%{box-shadow:0 0 0 0 rgba(var(--green-rgb),.5)}
  70%,100%{box-shadow:0 0 0 9px rgba(var(--green-rgb),0)}
}

/* ---- the sector card ---- */
#wis .sectors{counter-reset:sect}
#wis .sect{counter-increment:sect;isolation:isolate}

/* The rank, set large and nearly invisible behind the card — the same ghost
   numeral the process funnel uses, so the two grids feel related. */
#wis .sect:after{content:counter(sect,decimal-leading-zero);
  position:absolute;right:15px;top:6px;z-index:0;pointer-events:none;
  font:400 58px/1 var(--num);letter-spacing:-.03em;
  color:rgba(var(--text-rgb),.085);
  transition:color .45s var(--ease)}
#wis .sect:hover:after{color:rgba(var(--gold-rgb),.13)}

/* The colour field drifts, each card out of phase with its neighbours, so the
   grid breathes instead of sitting still. */
#wis .sect:before{animation:sectDrift 16s ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * -1.9s)}
@keyframes sectDrift{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-5%,4%) scale(1.1)}
}
#wis .sect:hover:before{opacity:.85}

#wis .sect h4{padding-right:54px;transition:color .4s var(--ease)}
#wis .sect:hover h4{color:var(--gold2)}

/* ---- the standing meter ----
   A bar with a lit head, so the eye lands on where a sector has reached
   rather than on the length of the fill. */
#wis .sect .sect-meter{overflow:visible;background:rgba(var(--text-rgb),.06);border-radius:3px}
#wis .sect .sect-meter i{border-radius:3px;overflow:visible}
#wis .sect .sect-meter i:after{content:"";position:absolute;right:-2px;top:50%;
  width:7px;height:7px;margin-top:-3.5px;border-radius:50%;
  background:var(--green);box-shadow:0 0 9px rgba(var(--green-rgb),.9);
  animation:sectPip 2.6s ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * -.4s)}
#wis .sect.is-weak .sect-meter i:after{background:var(--red);
  box-shadow:0 0 9px rgba(var(--red-rgb),.9)}
@keyframes sectPip{0%,100%{opacity:.55;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

/* ---- direction, as three chips ----
   Three horizons, three marks. Chips rather than bare glyphs, because at 8px
   an arrow and a square are the same smudge. */
#wis .sect .sect-dir{gap:4px}
#wis .sect .sect-dir span{display:inline-grid;place-items:center;
  width:16px;height:16px;border-radius:4px;font-size:8px;line-height:1;
  background:rgba(var(--text-rgb),.05)}
#wis .sect .sect-dir .up{color:var(--green);background:rgba(var(--green-rgb),.14)}
#wis .sect .sect-dir .down{color:var(--red);background:rgba(var(--red-rgb),.14)}
#wis .sect .sect-dir .flat{color:var(--gold);background:rgba(var(--gold-rgb),.14)}

/* ---- the chosen sector ---- */
#wis .sect[aria-pressed="true"]:after{color:rgba(var(--gold-rgb),.16)}
#wis .sect[aria-pressed="true"] h4{color:var(--gold2)}

/* ---- tier cards, a little more alive ---- */
#wis .wis-step{position:relative;overflow:hidden}
#wis .wis-step[aria-selected="true"]:before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:2px;background:linear-gradient(180deg,var(--gold2),rgba(var(--gold-rgb),.1))}

@media(prefers-reduced-motion:reduce){
  /* Every one of these is decoration over a grid that already reads. */
  #wis .sect:before,#wis .sect .sect-meter i:after,
  #wis .wis-pane-head .eyebrow:after{animation:none}
  #wis .sect .sect-meter i:after{opacity:1;transform:none}
}

/* ====================================== hero artwork, one family =========
   Four drawings, one stroke language. Each page's argument reduced to a
   figure; each figure lit by the same idea — a current travelling a line
   that is already drawn, so nothing here is load-bearing and all of it
   stops cleanly under prefers-reduced-motion. ---------------------------- */

.hart{width:100%;height:100%}
.hart svg{display:block;width:100%;height:100%;overflow:visible}

/* the ground */
.ha-g1{stop-color:rgba(var(--gold-rgb),.09)}
.ha-g2{stop-color:rgba(var(--gold-rgb),0)}
.hart.is-helix .ha-g1{stop-color:rgba(var(--cyan-rgb),.1)}
.hart.is-channel .ha-g1{stop-color:rgba(var(--cyan-rgb),.08)}
.ha-glow{transform-origin:200px 200px;animation:haBreathe 11s ease-in-out infinite alternate}
@keyframes haBreathe{to{transform:scale(1.08);opacity:.7}}

/* the common stroke language: a still bed, a travelling current */
.ha-bed{fill:none;stroke:rgba(var(--text-rgb),.16);stroke-width:2.4;stroke-linecap:round}
.ha-run{fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:26 210;animation:haRun 6.4s linear infinite;
  filter:drop-shadow(0 0 6px rgba(var(--gold-rgb),.7))}
@keyframes haRun{to{stroke-dashoffset:-472}}
.ha-axis{stroke:rgba(var(--text-rgb),.13);stroke-width:1;stroke-dasharray:2 7}
.ha-grid path{stroke:rgba(var(--text-rgb),.07);stroke-width:1}
.ha-rail{fill:none;stroke:rgba(var(--gold-rgb),.26);stroke-width:1;stroke-dasharray:4 8}

/* waypoints */
.ha-node{fill:var(--gold2);filter:drop-shadow(0 0 6px rgba(var(--gold2-rgb),.85));
  animation:haPulse 3.6s ease-in-out infinite;animation-delay:calc(var(--b, 0) * .42s)}
@keyframes haPulse{0%,100%{opacity:.45}50%{opacity:1}}

/* ---- divergence: strength runs, weakness is cut ---- */
.hart.is-divergence .ha-bed.is-down{stroke:rgba(var(--red-rgb),.3)}
.hart.is-divergence .ha-run.is-down{stroke:var(--red);stroke-width:2;opacity:.85;
  animation-duration:8.5s;filter:drop-shadow(0 0 5px rgba(var(--red-rgb),.6))}
/* What the rule prevents: drawn, but never lit. */
.ha-ghost{fill:none;stroke:rgba(var(--red-rgb),.22);stroke-width:1.6;
  stroke-dasharray:3 9;stroke-linecap:round}
.ha-cut-ring{fill:rgba(var(--bg-rgb),.85);stroke:var(--red);stroke-width:1.4;
  animation:haCut 3.2s ease-out infinite}
.ha-cut-x{stroke:var(--red);stroke-width:1.8;stroke-linecap:round}
@keyframes haCut{0%,100%{r:13;opacity:.85}55%{r:15.5;opacity:1}}

/* ---- channel: higher highs inside a rising envelope ---- */
.hart.is-channel .ha-run{stroke:var(--cyan);filter:drop-shadow(0 0 6px rgba(var(--cyan-rgb),.7))}
.hart.is-channel .ha-node{fill:var(--gold2)}
.hart.is-channel .ha-node.is-lead{fill:var(--cyan);
  filter:drop-shadow(0 0 9px rgba(var(--cyan-rgb),.95))}

/* ---- helix: two strands, bound where they meet ---- */
.hart.is-helix .ha-bed.is-q,.hart.is-helix .ha-bed.is-m{stroke:rgba(var(--text-rgb),.12)}
.hart.is-helix .ha-run.is-q{stroke:var(--gold);filter:drop-shadow(0 0 6px rgba(var(--gold-rgb),.7))}
.hart.is-helix .ha-run.is-m{stroke:var(--cyan);animation-delay:-3.2s;
  filter:drop-shadow(0 0 6px rgba(var(--cyan-rgb),.7))}
.ha-rungs path{stroke:rgba(var(--text-rgb),.14);stroke-width:1;stroke-linecap:round;
  animation:haRung 4.4s ease-in-out infinite;animation-delay:calc(var(--b, 0) * .3s)}
@keyframes haRung{0%,100%{opacity:.35}50%{opacity:.9}}
.hart.is-helix .ha-node.is-meet{fill:var(--gold2)}

/* ---- sieve: a wide field, five gates, a few out ---- */
.ha-funnel{fill:none;stroke:rgba(var(--gold-rgb),.34);stroke-width:1.4;stroke-linejoin:round}
.ha-gates path{stroke:rgba(var(--gold-rgb),.3);stroke-width:1.4;stroke-linecap:round;
  animation:haGate 4.8s ease-in-out infinite;animation-delay:calc(var(--b, 0) * .5s)}
@keyframes haGate{0%,100%{opacity:.3}50%{opacity:1}}
.ha-fall circle{fill:var(--gold2);opacity:.5;
  animation:haFall 6.4s linear infinite;animation-delay:calc(var(--b, 0) * -1.05s)}
/* Most of what enters does not reach the bottom, which is the whole point. */
@keyframes haFall{
  0%{transform:translateY(0);opacity:0}
  12%{opacity:.85}
  62%{opacity:.5}
  100%{transform:translateY(200px);opacity:0}
}
.hart.is-sieve .ha-node.is-out{fill:var(--gold2);
  filter:drop-shadow(0 0 11px rgba(var(--gold2-rgb),.95))}

/* ---- signal: a loud field thinning into one clean line ---- */
/* Each tick keeps its own opacity, handed down from the drawing as --o, so the
   scatter fades left to right without needing 44 rules to say so. */
.ha-noise path{stroke:rgba(var(--text-rgb),.5);stroke-width:2;stroke-linecap:round;
  opacity:var(--o,.4);transform-box:fill-box;transform-origin:center;
  animation:haNoise 3.4s ease-in-out infinite;animation-delay:calc(var(--b, 0) * -.37s)}
@keyframes haNoise{0%,100%{transform:scaleY(.72)}50%{transform:scaleY(1.12)}}
.hart.is-signal .ha-node.is-said{fill:var(--gold2);
  filter:drop-shadow(0 0 12px rgba(var(--gold2-rgb),.95))}

/* ---- voice: what was said, drawn in the round ---- */
.hart.is-voice .ha-g1{stop-color:rgba(var(--cyan-rgb),.09)}
/* A bar is drawn at full length and then masked back by its own dash, which
   is what lets it grow from the inner edge out instead of sliding outward. */
.hv-bars path{stroke:var(--gold);stroke-width:2.6;stroke-linecap:round;opacity:.5;
  transform-box:view-box;transform-origin:200px 200px;
  transform:rotate(calc(var(--a, 0) * 1deg));
  stroke-dasharray:var(--l) var(--l);
  animation:hvBar 2.9s ease-in-out infinite;animation-delay:calc(var(--b, 0) * -.19s)}
@keyframes hvBar{
  0%,100%{stroke-dashoffset:calc(var(--l) * .62);opacity:.34}
  50%{stroke-dashoffset:0;opacity:.95}
}
/* Every third bar answers in the other colour, so the ring reads as a
   conversation rather than a single tone. */
.hv-bars path:nth-child(3n){stroke:var(--cyan);opacity:.42}
.hv-ring{fill:none;stroke:rgba(var(--gold-rgb),.22);stroke-width:1;stroke-dasharray:3 7}
.hv-ring.is-inner{stroke:rgba(var(--gold-rgb),.4);stroke-dasharray:none}
.hv-orbit{fill:none;stroke:var(--cyan);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:44 898;filter:drop-shadow(0 0 7px rgba(var(--cyan-rgb),.8));
  animation:hvOrbit 7.2s linear infinite}
@keyframes hvOrbit{to{stroke-dashoffset:-942}}
.hv-play{fill:var(--gold2);filter:drop-shadow(0 0 9px rgba(var(--gold2-rgb),.8));
  transform-box:view-box;transform-origin:200px 200px;
  animation:hvPlay 3.6s ease-in-out infinite}
@keyframes hvPlay{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}

/* ---- placement ----
   A hero carrying a facts card has no empty right-hand side, so the drawing
   becomes atmosphere behind it rather than an object beside it. */
.phero.has-art.has-facts .phero-art{width:min(64vw,760px);right:-9%;opacity:.42}
.phero.has-art.has-facts .phero-facts{position:relative;z-index:2}

@media(max-width:1100px){
  .phero.has-art.has-facts .phero-art{opacity:.26;right:-16%}
}
@media(max-width:760px){
  .phero.has-art.has-facts .phero-art{display:none}
}

@media(prefers-reduced-motion:reduce){
  .ha-glow,.ha-run,.ha-node,.ha-rungs path,.ha-gates path,
  .ha-fall circle,.ha-cut-ring,
  .ha-noise path,.hv-bars path,.hv-orbit,.hv-play{animation:none}
  .ha-run{stroke-dasharray:none;opacity:.55;filter:none}
  .ha-node{opacity:.9}
  .ha-fall circle{opacity:.45}
  .ha-noise path{transform:none}
  /* Held still, a bar is simply its full length. */
  .hv-bars path{stroke-dasharray:none;stroke-dashoffset:0;opacity:.5}
  .hv-orbit{stroke-dasharray:none;opacity:.3;filter:none}
  .hv-play{transform:none;opacity:.9}
}

/* ================================== the board table, tier 2 ==============
   The weekly ranking, which used to be a page of its own. It arrives after
   load, so everything here dresses markup strength.js renders — the columns,
   the heat wash and the sort affordances are the ones the retired page had,
   brought over intact. ---------------------------------------------------- */

/* ---- tools row ---- */
.board-tools{display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin:18px 0 16px;flex-wrap:wrap}
.board-search{display:flex;align-items:center;gap:10px;flex:1 1 280px;max-width:380px;
  padding:0 14px;height:42px;border:1px solid var(--l3);border-radius:var(--radius-pill);
  background:rgba(var(--bg2-rgb),.5);
  transition:border-color .35s var(--ease),background .35s var(--ease)}
.board-search:focus-within{border-color:rgba(var(--gold-rgb),.6);background:rgba(var(--gold-rgb),.05)}
.board-search svg{width:15px;height:15px;flex:none;color:var(--t5)}
.board-search:focus-within svg{color:var(--gold)}
.board-search input{flex:1;min-width:0;background:none;border:0;outline:none;
  font:400 13px var(--sans);color:var(--text)}
.board-search input::placeholder{color:var(--t5)}
.board-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.board-count{font:700 9.5px var(--sans);letter-spacing:.19em;text-transform:uppercase;color:var(--t5);
  font-variant-numeric:tabular-nums}

/* ---- the table ---- */
#wis .board-table{width:100%}
/* Forty-five rows is more than one screen, so the heading has to stay.

   .tablewrap carries overflow-x:auto, and a box cannot be clipped on one
   axis and visible on the other — the used overflow-y is auto too, which
   makes the wrapper the scrollport a sticky th resolves against, not the
   page. Offsetting by the nav height therefore parked the heading part-way
   down the table, floating over its own rows. The board scrolls inside its
   frame instead, and the heading pins to the top of that frame. */
#wis .tablewrap{max-height:min(68vh,620px);overflow:auto;overscroll-behavior:contain}
#wis .board-table thead th{position:sticky;top:0;z-index:3;background:var(--alt);
  box-shadow:inset 0 -1px 0 var(--l2)}
#wis .board-table tbody tr{transition:background .28s var(--ease)}
/* The whole row is the target, so it should look like one. */
#wis .board-table tbody tr[data-industry]{cursor:pointer;position:relative}
#wis .board-table tbody tr[data-industry]:hover{background:rgba(var(--gold-rgb),.055)}
#wis .board-table tbody tr[data-industry]:hover .bt-name button{color:var(--gold2)}
#wis .board-table tbody tr[aria-selected="true"]{background:rgba(var(--gold-rgb),.09)}
#wis .board-table tbody tr[aria-selected="true"] .rk{color:var(--gold2)}
/* A hairline that grows down the row it is on, rather than a border that
   shifts every cell by a pixel when it appears. */
#wis .board-table tbody tr[data-industry] td:first-child{box-shadow:inset 2px 0 0 transparent;
  transition:box-shadow .28s var(--ease)}
#wis .board-table tbody tr[data-industry]:hover td:first-child,
#wis .board-table tbody tr[aria-selected="true"] td:first-child{box-shadow:inset 2px 0 0 var(--gold)}

#wis .board-table .bt-name button{background:none;border:0;padding:0;cursor:pointer;
  font:400 14.5px var(--serif);color:var(--text);text-align:left;
  transition:color .28s var(--ease)}
#wis .board-table .bt-name button:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
#wis .board-table .rk{font-variant-numeric:tabular-nums;color:var(--t4)}

/* The rows arrive in order rather than all at once. Capped, because a
   forty-fifth row should not wait two seconds to exist. */
#wis .board-table tbody tr[data-text]{animation:boardRowIn .5s var(--ease) both;
  animation-delay:calc(min(var(--i, 0), 18) * 22ms)}
@keyframes boardRowIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

.board-empty{text-align:center;padding:34px;color:var(--t4);font-size:13px}

@media(max-width:900px){
  /* Sector and constituent count are the first things a narrow screen can
     lose: the ranks and the trend are what the board is for. */
  #wis .board-table th:nth-child(3),#wis .board-table td:nth-child(3),
  #wis .board-table th:nth-child(4),#wis .board-table td:nth-child(4){display:none}
}
@media(max-width:620px){
  #wis .board-table th:last-child,#wis .board-table td:last-child{display:none}
  .board-tools{gap:10px}
  .board-search{max-width:none}
}

@media(prefers-reduced-motion:reduce){
  #wis .board-table tbody tr[data-text]{animation:none}
}

/* The glossary the retired ranking page carried under its table. */
.board-note{margin:16px 0 0;font-size:11px;line-height:1.85;color:var(--t4);max-width:76ch}
.board-note b{color:var(--t1);font-weight:400}

/* ============================== tier 2: the board and its readings =======
   The ranked table with a column of derived readings beside it. Every panel
   is computed from fields the board already publishes, so nothing here needs
   the export to grow and nothing states a figure the table cannot. -------- */

/* The board is the widest thing on the site and earns more room than the
   editorial measure. Only bites above ~1530px, where the container would
   otherwise stop short of the screen. */
section.wis>.container{width:min(1480px,calc(100% - 50px))}

/* Nine columns and a panel rail need about 1400px between them. Below that
   the rail sits under the board instead of squeezing it into a horizontal
   scroll — the table is the thing people came for. */
.ind-layout{display:grid;grid-template-columns:1fr;gap:22px;align-items:start}
.ind-main{min-width:0}
.ind-side{grid-template-columns:repeat(4,1fr)}
@media(min-width:1400px){
  .ind-layout{grid-template-columns:minmax(0,1fr) 272px}
  .ind-side{grid-template-columns:1fr;position:sticky;
    top:calc(var(--nav-h, 70px) + var(--subnav-h, 0px) + 18px)}
}

/* ---- toolbar additions ---- */
.board-opts{display:flex;align-items:center;gap:16px;margin-left:auto}
.board-select{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 6px 0 14px;
  border:1px solid var(--l3);border-radius:var(--radius-pill);background:rgba(var(--bg2-rgb),.5)}
.board-select span{font:700 9px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--t5)}
.board-select select{background:none;border:0;outline:none;cursor:pointer;padding:0 6px;
  font:400 12.5px var(--sans);color:var(--text)}
.board-select select option{background:var(--bg2);color:var(--text)}
.board-asof{font:700 9px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--t5);
  white-space:nowrap}

/* ---- the trend path ----
   Three published ranks plotted as a line. Not a price series — the board
   has none — so it is deliberately small, unlabelled and read alongside the
   arrows rather than instead of them. */
.hpath{width:42px;height:18px;overflow:visible;vertical-align:middle;margin-right:8px}
.hpath polyline{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hpath circle{stroke:none}
.hpath.is-up polyline{stroke:var(--green)}
.hpath.is-up circle{fill:var(--green)}
.hpath.is-down polyline{stroke:var(--red)}
.hpath.is-down circle{fill:var(--red)}
.hpath.is-flat polyline{stroke:var(--gold)}
.hpath.is-flat circle{fill:var(--gold)}
#wis .board-table td.dir{white-space:nowrap}
.dir-marks{display:inline-flex;gap:3px;vertical-align:middle}

/* ---- side panels ---- */
.ind-side{display:grid;gap:14px}
.side-card{border:1px solid var(--l2);border-radius:var(--radius);padding:18px 18px 16px;
  background:linear-gradient(155deg,rgba(var(--bg2-rgb),.72),rgba(var(--deep-rgb),.45))}
.side-card h4{margin:0 0 14px;font:700 9px var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--t5)}
.side-note{margin:12px 0 0;font-size:10.5px;line-height:1.65;color:var(--t5)}

.dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--t6)}
.dot.is-up{background:var(--green)}
.dot.is-down{background:var(--red)}
.dot.is-flat{background:var(--t6)}

/* strongest sectors */
.side-rank{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.side-rank li{display:flex;align-items:center;gap:11px;padding:9px 0;
  border-bottom:1px solid var(--l1);font-size:12px;color:var(--t1)}
.side-rank li:last-child{border-bottom:0}
.side-rank .n{font:400 11px var(--num);color:var(--gold);font-variant-numeric:tabular-nums}
.side-rank .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-rank b{font:400 12px var(--num);color:var(--gold2);font-variant-numeric:tabular-nums}

/* sector ring */
.donut-wrap{display:grid;gap:14px;justify-items:center}
.donut{position:relative;width:132px;height:132px;border-radius:50%;
  background:var(--ring);
  -webkit-mask:radial-gradient(circle,transparent 54%,#000 55%);
  mask:radial-gradient(circle,transparent 54%,#000 55%)}
.donut span{position:absolute;inset:0;display:grid;place-content:center;text-align:center;
  -webkit-mask:none;mask:none;
  font:700 8px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--t5)}
.donut span b{display:block;font:400 26px/1 var(--num);color:var(--text);letter-spacing:0;margin-bottom:3px}
.donut-key{list-style:none;margin:0;padding:0;width:100%;display:grid;gap:6px}
.donut-key li{display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--t4)}
.donut-key b{margin-left:auto;font:400 11px var(--num);color:var(--t1);font-variant-numeric:tabular-nums}

/* what the board says */
.side-insight{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.side-insight li{font-size:11.5px;line-height:1.6;color:var(--t3);padding-left:14px;position:relative}
.side-insight li:before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;
  border-radius:50%;background:rgba(var(--gold-rgb),.65)}
.side-insight b{color:var(--text);font-weight:400}
.side-quote{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--l2);
  font:italic 400 13px/1.5 var(--serif);color:var(--gold2)}

/* ---- responsive ---- */
@media(max-width:1060px){
  .ind-side{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .ind-side{grid-template-columns:1fr}
  .board-opts{margin-left:0;width:100%;justify-content:space-between}
}
@media(max-width:620px){
  /* At this width the arrows carry the column on their own. */
  .hpath{display:none}
}

/* Nine columns beside a panel rail is tight; the board buys the room back
   from its own gutters rather than by dropping a column. */
#wis .board-table th,#wis .board-table td{padding-left:10px;padding-right:10px}
#wis .board-table .sector-tag{font-size:8.5px;letter-spacing:.09em;padding:3px 7px}
#wis .board-table .bt-name button{font-size:13.5px;line-height:1.3}
#wis .board-table thead th{white-space:nowrap}

/* ---- the board, given more room ---- */
.ind-layout{grid-template-columns:1fr!important}
#wis .board-table th,#wis .board-table td{padding-top:15px;padding-bottom:15px}
#wis .board-table .bt-name button{font-size:15.5px}
#wis .board-table .rk{font-size:13px}
#wis .board-table td.num{font-size:13.5px}
#wis .board-table .sector-tag{font-size:9px;padding:4px 9px}
#wis .tablewrap{max-height:min(74vh,760px)}
.hpath{width:50px;height:20px}

/* the two readouts, under the board rather than beside it */
.ind-readouts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}

/* ---- responsive ---- */
@media(max-width:900px){
  .ind-readouts{grid-template-columns:1fr}
}
/* ================================ tier 3: the names inside an industry ===
   The last step of the funnel, given the weight it deserves: what the
   industry holds, stated as facts; the names as cards that can be filtered
   and reordered; and a plain account underneath of what a standing is and
   is not. Live price and the weekly line ride on top of cards that already
   read without them. ------------------------------------------------------ */

.wis-pane-head.is-stack{display:block}

/* ---- what the industry holds ---- */
.ind-facts{list-style:none;margin:22px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border:1px solid var(--l2);border-radius:var(--radius);
  background:linear-gradient(140deg,rgba(var(--bg2-rgb),.58),rgba(var(--deep-rgb),.34))}
.ind-facts li{padding:17px 18px;border-left:1px solid var(--l2);min-width:0}
.ind-facts li:first-child{border-left:0}
.ind-facts b{display:block;font:400 clamp(19px,1.9vw,25px)/1.1 var(--num);color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ind-facts b i{font-style:normal;font-size:.62em;color:var(--t5)}
.ind-facts span{display:block;margin-top:6px;font:700 8.5px var(--sans);letter-spacing:.18em;
  text-transform:uppercase;color:var(--t5)}
.ind-facts .as-marks{display:flex;gap:4px;font-size:12px}
.ind-facts .is-wide b{font-size:13px}

/* ---- filter and order ---- */
.leader-tools{display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin:22px 0 18px;flex-wrap:wrap}
.leader-tools .chipset{margin:0;flex:1 1 auto}
.leader-tools .chipbtn i{font-style:normal;margin-left:7px;padding:1px 6px;border-radius:var(--radius-pill);
  background:rgba(var(--text-rgb),.08);font:400 10px var(--num);color:var(--t4)}
.leader-tools .chipbtn[aria-pressed="true"] i{background:rgba(var(--deep-rgb),.3);color:var(--gold2)}

/* ---- the cards ---- */
#wis .leaders{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
#wis .leader{position:relative;overflow:hidden;padding:18px;
  border:1px solid var(--l2);border-radius:var(--radius);
  background:linear-gradient(158deg,rgba(var(--bg2-rgb),.88),rgba(var(--deep-rgb),.62));
  transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
#wis .leader:hover{transform:translateY(-4px);border-color:rgba(var(--gold-rgb),.42);
  box-shadow:0 18px 44px rgba(var(--deep-rgb),.5)}
#wis .leader:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}

/* Position inside the industry, set like a plate on the corner. */
.leader-rank{position:absolute;top:0;left:0;z-index:2;
  min-width:26px;height:24px;display:grid;place-items:center;padding:0 7px;
  border-radius:0 0 var(--radius-sm) 0;
  background:rgba(var(--gold-rgb),.16);
  font:400 12px var(--num);color:var(--gold2);font-variant-numeric:tabular-nums}
#wis .leader:first-child .leader-rank{background:rgba(var(--gold-rgb),.34);color:var(--bg)}

#wis .leader-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding-left:22px}
#wis .leader-top b{font:400 15px var(--sans);font-weight:600;letter-spacing:.02em;color:var(--text)}

/* ---- responsive ---- */
@media(max-width:900px){
  .ind-facts li{border-left:0;border-top:1px solid var(--l2)}
  .ind-facts li:first-child{border-top:0}
  .leader-tools{flex-direction:column;align-items:stretch}
  .leader-tools .board-select{align-self:flex-start}
}
@media(max-width:560px){
  #wis .leaders{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  #wis .leader:hover{transform:none}
}

/* ===================================================== the video shelf ===
   The newest conversation given room, the rest queued beside it, and the
   archive underneath. Built on the .vid card the home rail already uses, so
   the click-to-play contract — a static thumbnail until someone asks — is
   inherited rather than re-implemented. ----------------------------------- */

.vfeature{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:22px;align-items:start}

/* ---- the featured card ---- */
#wis .vfeature-main,.vfeature-main{width:auto;flex:none}
.vfeature-main{border:1px solid var(--l2);border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(160deg,rgba(var(--bg2-rgb),.8),rgba(var(--deep-rgb),.5));
  transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
.vfeature-main:hover{transform:translateY(-4px);border-color:rgba(var(--gold-rgb),.45);
  box-shadow:0 22px 54px rgba(var(--deep-rgb),.5)}
.vfeature-main .vid-frame{border-radius:0}
.vfeature-main .vid-body{padding:22px 24px 24px}
.vfeature-main h2{margin:12px 0 0;font:400 clamp(23px,2.5vw,32px)/1.18 var(--serif);color:var(--text)}
.vfeature-main p{margin:12px 0 0;font-size:13.5px;line-height:1.8;color:var(--muted);max-width:62ch}
.vfeature-main .tags{margin-top:18px}
.vfeature-meta{font:700 9px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* A bigger play target on the bigger card. */
.vfeature-main .vid-play{width:60px;height:60px}
.vfeature-main .vid-play svg{width:22px;height:22px}

/* ---- the queue ---- */
.vqueue{border:1px solid var(--l2);border-radius:var(--radius);padding:20px;
  background:linear-gradient(160deg,rgba(var(--bg2-rgb),.62),rgba(var(--deep-rgb),.38))}
.vqueue h3{margin:0 0 14px;font:700 9px var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--t5)}
.vqueue ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.vqueue-row{display:grid;grid-template-columns:26px 104px minmax(0,1fr);gap:12px;align-items:center;
  width:auto;flex:none;padding:10px 8px;border-radius:var(--radius-sm);cursor:pointer;
  transition:background .28s var(--ease)}
.vqueue-row:hover,.vqueue-row:focus-visible{background:rgba(var(--gold-rgb),.06);outline:none}
.vqueue-row:focus-visible{box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.5)}
.vq-n{font:400 12px var(--num);color:var(--t5);font-variant-numeric:tabular-nums;text-align:center}
.vqueue-row .vid-frame{border-radius:var(--radius-sm);overflow:hidden}
/* The queue's thumbnails are small; the date plate would cover them. */
.vqueue-row .vid-when{display:none}
.vqueue-row .vid-play{width:26px;height:26px}
.vqueue-row .vid-play svg{width:10px;height:10px}
.vq-t{display:flex;flex-direction:column;gap:5px;min-width:0}
.vq-t b{font:400 13.5px/1.35 var(--serif);color:var(--text);font-weight:400;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vq-t i{font-style:normal;font:700 8.5px var(--sans);letter-spacing:.15em;text-transform:uppercase;
  color:var(--t5)}
.vqueue-row:hover .vq-t b{color:var(--gold2)}
.vqueue-note{margin:14px 0 0;padding-top:13px;border-top:1px solid var(--l2);
  font-size:10.5px;line-height:1.65;color:var(--t5)}

/* ---- archive cards ---- */
.reel .vid .vfeature-meta{margin-bottom:9px}

/* ---- popular topics ---- */
.vtopics{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px}
.vtopics a{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  padding:22px 16px;text-decoration:none;
  border:1px solid var(--l2);border-radius:var(--radius);
  background:linear-gradient(158deg,rgba(var(--bg2-rgb),.66),rgba(var(--deep-rgb),.4));
  transition:border-color .4s var(--ease),transform .4s var(--ease),background .4s var(--ease)}
.vtopics a:hover{transform:translateY(-4px);border-color:rgba(var(--gold-rgb),.45);
  background:rgba(var(--gold-rgb),.05)}
.vtopic-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(var(--gold-rgb),.3);background:rgba(var(--gold-rgb),.07);color:var(--gold);
  transition:color .4s var(--ease),border-color .4s var(--ease)}
.vtopic-ico svg{width:19px;height:19px;margin:0}
.vtopics a:hover .vtopic-ico{color:var(--gold2);border-color:rgba(var(--gold-rgb),.6)}
.vtopics b{font:400 15px/1.25 var(--serif);color:var(--text);font-weight:400}
.vtopics i{font-style:normal;font:700 8.5px var(--sans);letter-spacing:.17em;text-transform:uppercase;
  color:var(--t5)}

/* ---- responsive ---- */
@media(max-width:1000px){
  .vfeature{grid-template-columns:1fr;gap:18px}
  .vqueue ol{grid-template-columns:repeat(2,minmax(0,1fr));display:grid;gap:6px}
}
@media(max-width:620px){
  .vqueue ol{grid-template-columns:1fr}
  .vqueue-row{grid-template-columns:22px 84px minmax(0,1fr);gap:10px}
  .vtopics{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(prefers-reduced-motion:reduce){
  .vfeature-main:hover,.vtopics a:hover{transform:none}
}

/* ===========================================================================
   ABOUT — the summit hero, the section rail and the closing band.

   `sm-` is the hero scene, `sma-` anything in it that moves, `phero-mark` the
   claim pills, `qrail-` the quote on the section rail, `pidx-` the numbered
   index, `kfacts-` the registration panel and `aband-` the closing band.
   Every animation stops under prefers-reduced-motion, at the end.
   ======================================================================== */

/* ---- the hero as a whole ---- */
/* Taller than a standard interior hero because it holds a scene rather than a
   heading, and lit from the top right so the page's light source and the
   scene's sun are the same one. */
.phero.is-summit{padding:148px 0 72px;min-height:min(86vh,760px);display:flex;align-items:center}
.phero.is-summit:before{width:900px;height:900px;right:-180px;top:-380px;
  background:radial-gradient(circle,rgba(var(--gold-rgb),.16),transparent 62%)}
.phero.is-summit .phero-grid{grid-template-columns:1.12fr .58fr;align-items:center;gap:44px}
/* The word column is absolutely positioned, so the grid has to be told to
   leave room for it — otherwise the facts card runs underneath the words.
   Only above the breakpoint where those words are shown at all. */
@media(min-width:1181px){
  .phero.is-summit .phero-grid{padding-right:clamp(190px,14.5vw,250px)}
}
.phero.is-summit h1{letter-spacing:-.04em}
.phero.is-summit .eyebrow{letter-spacing:.34em}
.phero.is-summit .phero-lead{max-width:48ch}

/* The scene sits behind the words and bleeds off the right edge, so the ridge
   runs out of frame instead of stopping in a rectangle. */
.phero.is-summit .phero-art{width:min(72vw,1080px);right:-8%;top:46%;opacity:1;
  -webkit-mask-image:linear-gradient(100deg,transparent 4%,#000 34%);
  mask-image:linear-gradient(100deg,transparent 4%,#000 34%)}
.phero.is-summit.has-facts .phero-art{width:min(72vw,1080px);right:-8%;opacity:1}

/* ---- the scene ---- */
.sm-art{position:relative;width:100%}
.sm-art svg{display:block;width:100%;height:auto}
.sm-layer{will-change:transform;transition:transform .9s cubic-bezier(.16,.8,.24,1)}

.sma-sun{animation:smBreathe 7s ease-in-out infinite}
.sma-core{animation:smCore 7s ease-in-out infinite}
@keyframes smBreathe{0%,100%{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(1.045)}}
@keyframes smCore{0%,100%{opacity:.4}50%{opacity:.72}}
.sma-sun,.sma-core{transform-origin:742px 150px}

/* The ridge draws itself once, left to right, so the slope arrives before the
   climber does rather than the climber walking onto a line already there. */
.sma-ridge{stroke-dasharray:1400;stroke-dashoffset:1400;
  animation:smDraw 2.2s cubic-bezier(.16,.8,.24,1) .15s forwards}
@keyframes smDraw{to{stroke-dashoffset:0}}

/* Candles rise into place behind the line, in the order they are climbed. */
.sma-candle{transform-origin:center bottom;opacity:0;
  animation:smRise .7s cubic-bezier(.16,.8,.24,1) forwards;
  animation-delay:calc(.35s + var(--b) * .085s)}
@keyframes smRise{from{opacity:0;transform:translateY(14px) scaleY(.5)}
  to{opacity:1;transform:none}}

/* The walk. Keyframed translate rather than offset-path: the stops below are
   the ridge's own vertices, so the figure lands on each corner exactly, and it
   works in every browser that renders the rest of the page. */
.sma-walk{color:var(--deep);opacity:0;
  animation:smClimb 4.6s cubic-bezier(.33,0,.5,1) 1.5s forwards}
.sma-halo{opacity:.5}
@keyframes smClimb{
  0%{opacity:0;transform:translate(188px,470px)}
  8%{opacity:1}
  18%{transform:translate(262px,508px)}
  32%{transform:translate(354px,404px)}
  44%{transform:translate(432px,436px)}
  58%{transform:translate(512px,330px)}
  68%{transform:translate(566px,356px)}
  80%{transform:translate(624px,250px)}
  88%{transform:translate(668px,272px)}
  100%{opacity:1;transform:translate(742px,150px)}
}
/* The arm goes up only once the summit is reached — the gesture is arrival,
   so it must not happen on the way. */
.sma-arm{transform-origin:-1px -29px;transform:rotate(58deg);
  animation:smRaise .8s cubic-bezier(.16,.8,.24,1) 6s forwards}
@keyframes smRaise{to{transform:rotate(0)}}

.sma-mote{opacity:0;animation:smDrift 6.5s ease-in-out infinite;
  animation-delay:calc(6.2s + var(--b) * .8s)}
@keyframes smDrift{0%{opacity:0;transform:translateY(6px)}
  35%{opacity:.75}100%{opacity:0;transform:translateY(-30px)}}

/* Replayed by about.js when the hero comes back into view. */
.sm-art.is-replay .sma-ridge,.sm-art.is-replay .sma-candle,
.sm-art.is-replay .sma-walk,.sm-art.is-replay .sma-arm{animation:none}

/* ---- the words down the right edge ---- */
/* Lives in .phero-aside, which is positioned against the hero — see the
   comment on that element in components/layout.js. */
.phero-aside{position:absolute;inset:0;z-index:3;pointer-events:none}
.sm-words{position:absolute;right:max(24px,3vw);top:50%;transform:translateY(-50%);
  text-align:right}
.sm-wordlist{list-style:none;margin:0;padding:0}
.sm-wordlist li{font:700 11px var(--sans);letter-spacing:.34em;text-transform:uppercase;
  color:var(--t3);line-height:2.1;opacity:0;
  animation:smWord .8s cubic-bezier(.16,.8,.24,1) forwards;
  animation-delay:calc(.6s + var(--b) * .16s)}
.sm-wordlist li:first-child{color:var(--gold2)}
@keyframes smWord{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.sm-rule{display:block;width:52px;height:2px;background:var(--gold);margin:16px 0 0 auto;
  border-radius:2px;transform-origin:right;transform:scaleX(0);
  animation:smRule .7s cubic-bezier(.16,.8,.24,1) 1.35s forwards}
@keyframes smRule{to{transform:scaleX(1)}}
/* Set in the serif, italic and loose — the one handwritten-feeling thing on a
   page that is otherwise all system type. */
.sm-script{margin:22px 0 0;font:italic 400 clamp(26px,2.5vw,38px)/1.24 var(--serif);
  color:var(--gold2);letter-spacing:.01em;opacity:0;
  animation:smWord 1s cubic-bezier(.16,.8,.24,1) 1.7s forwards}

/* ---- the claim pills ---- */
.phero-marks{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-wrap:wrap;
  align-items:stretch;gap:0;grid-column:1/-1;order:3}
/* The two grid children above the marks keep their own row. Scoped: no
   other hero has a full-width row, so no other hero needs an order. */
.phero.is-summit .phero-grid > div:first-child{order:1}
.phero.is-summit .phero-grid > .phero-facts{order:2}
.phero-marks li{display:flex;align-items:center;gap:12px;padding:0 22px;opacity:0;
  animation:smWord .7s cubic-bezier(.16,.8,.24,1) forwards;
  animation-delay:calc(.5s + var(--b) * .1s)}
.phero-marks li:first-child{padding-left:0}
.phero-marks li + li{border-left:1px solid var(--l2)}
.phero-marks i{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(var(--gold-rgb),.4);background:rgba(var(--gold-rgb),.06);color:var(--gold2)}
.phero-marks i svg{width:17px;height:17px;margin:0}
.phero-marks b{display:block;font:500 12.5px var(--sans);color:var(--text);letter-spacing:.01em}
.phero-marks em{display:block;margin-top:3px;font-style:normal;font-size:11px;color:var(--t3)}

/* ---- the facts card ---- */
/* Lifted into a card of its own on this page: it is the first thing a
   prospective investor looks for, and on the flat grid it read as a caption. */
.phero.is-summit .phero-facts{gap:0;background:none;border:1px solid rgba(var(--gold-rgb),.34);
  border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(158deg,rgba(var(--bg2-rgb),.92),rgba(var(--deep-rgb),.82));
  box-shadow:0 34px 80px -40px rgba(0,0,0,.95)}
.phero.is-summit .phero-fact{display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:none;padding:20px 22px}
.phero.is-summit .phero-fact + .phero-fact{border-top:1px solid var(--l2)}
.phero.is-summit .phero-fact b{font-size:27px;color:var(--text)}
.phero.is-summit .phero-fact:first-child b{color:var(--gold2)}
.phero-fact-ico{flex:none;color:var(--gold);opacity:.85}
.phero-fact-ico svg{width:22px;height:22px;margin:0}

/* ---- the quote on the section rail ---- */
.subnav.has-aside .subnav-in{flex-wrap:nowrap}
.subnav-aside{margin-left:auto;display:flex;align-items:center;gap:14px;min-width:0}
.qrail{display:flex;align-items:center;gap:12px;min-width:0}
.qrail-view{position:relative;min-width:0}
.qrail-q{margin:0;display:flex;align-items:center;gap:10px;min-width:0;
  animation:qFade .5s cubic-bezier(.16,.8,.24,1)}
.qrail-q span{font:italic 400 13px var(--serif);color:var(--t1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrail-q cite{flex:none;font:700 8.5px var(--sans);letter-spacing:.17em;text-transform:uppercase;
  color:var(--t4);font-style:normal}
@keyframes qFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.qrail-nav{flex:none;display:flex;gap:4px}
.qrail-nav button{width:24px;height:24px;display:grid;place-items:center;padding:0;
  border:1px solid var(--l3);border-radius:var(--radius-sm);background:none;color:var(--t4);
  cursor:pointer;transition:color .3s var(--ease),border-color .3s var(--ease)}
.qrail-nav button:hover{color:var(--gold2);border-color:rgba(var(--gold-rgb),.45)}
.qrail-nav svg{width:13px;height:13px}

/* ---- the article, and its index ---- */
.abt{padding:clamp(48px,5vw,76px) 0}
.abt-grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(32px,5vw,72px);
  align-items:start}
.abt-main{min-width:0;display:grid;gap:clamp(48px,6vw,84px)}
.abt-block{scroll-margin-top:120px}

.pidx{position:sticky;top:112px}
.pidx ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--l2)}
.pidx a{display:flex;align-items:baseline;gap:14px;padding:11px 0 11px 18px;position:relative;
  transition:color .3s var(--ease)}
/* The marker is on the list, not the link, so it can sit on the rule itself. */
.pidx a:before{content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:2px;
  background:var(--gold);opacity:0;transition:opacity .35s var(--ease)}
.pidx-n{font:400 10.5px var(--num);color:var(--t5);font-variant-numeric:tabular-nums;flex:none}
.pidx-t{font:700 9.5px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--t4)}
.pidx a:hover .pidx-t{color:var(--t1)}
.pidx a.is-on:before{opacity:1}
.pidx a.is-on .pidx-n{color:var(--gold2)}
.pidx a.is-on .pidx-t{color:var(--text)}

/* ---- the registration panel ---- */
.kfacts{border:1px solid var(--l2);border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(162deg,rgba(var(--bg2-rgb),.66),rgba(var(--deep-rgb),.5))}
.kfacts-list{margin:0;padding:6px 0}
.kfact{display:grid;grid-template-columns:52px 160px minmax(0,1fr);align-items:center;
  gap:10px;padding:13px 22px;transition:background .3s var(--ease)}
.kfact:hover{background:rgba(var(--gold-rgb),.04)}
.kfact + .kfact{border-top:1px solid var(--l1)}
.kfact-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  border:1px solid var(--l3);color:var(--gold);background:rgba(var(--deep-rgb),.5)}
.kfact-ico svg{width:17px;height:17px;margin:0}
.kfact dt{font:700 9px var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--t4)}
.kfact dd{margin:0;font-size:13.5px;color:var(--t1);min-width:0}

.kfacts-note{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:16px;
  padding:18px 22px;border-top:1px solid var(--l2);background:rgba(var(--gold-rgb),.05)}
.kfacts-note i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(var(--gold-rgb),.35);color:var(--gold2)}
.kfacts-note i svg{width:15px;height:15px;margin:0}
.kfacts-note p{margin:0;font-size:11.5px;line-height:1.75;color:var(--t3)}
.kfacts-note p b{color:var(--text);font-weight:500}
.kfacts-note .btn{flex:none;white-space:nowrap;padding:10px 16px;font-size:9px}
.kfacts-note .btn svg{width:12px;height:12px;vertical-align:-1px;margin-left:6px}

/* ---- the closing band ---- */
.aband{border-top:1px solid var(--l2);border-bottom:1px solid var(--l2);
  background:linear-gradient(180deg,rgba(var(--deep-rgb),.72),rgba(var(--bg2-rgb),.34))}
.aband-in{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:28px;
  padding:34px 0}
.aband-items{display:flex;align-items:center;flex-wrap:wrap;gap:0;min-width:0}
.aband-item{display:flex;align-items:center;gap:14px;padding:0 30px}
.aband-item:first-child{padding-left:0}
.aband-item + .aband-item{border-left:1px solid var(--l2)}
.aband-item i{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(var(--gold-rgb),.4);color:var(--gold2);
  background:rgba(var(--gold-rgb),.05)}
.aband-item i svg{width:20px;height:20px;margin:0}
.aband-item b{display:block;font:500 15px var(--sans);color:var(--text)}
.aband-item span{display:block;margin-top:3px;font-size:11.5px;color:var(--t3)}
.aband-tag{margin:0;display:flex;align-items:center;gap:16px;
  font:700 10.5px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--t3);
  line-height:1.9;text-align:left}
.aband-tag i{width:44px;height:2px;flex:none;background:var(--gold);border-radius:2px}

/* ---- narrower ---- */
@media(max-width:1180px){
  .phero.is-summit .phero-art{width:min(88vw,900px);right:-22%;opacity:.5}
  .sm-words{display:none}
  .phero.is-summit .phero-grid{grid-template-columns:1fr .7fr}
}
@media(max-width:980px){
  .abt-grid{grid-template-columns:1fr}
  /* Above the article rather than beside it, and no longer sticky: a rail
     pinned to the top of a phone is a rail covering the thing it indexes. */
  .pidx{position:static}
  .pidx ol{display:flex;flex-wrap:wrap;gap:4px;border-left:0;border-top:1px solid var(--l2);
    padding-top:10px}
  .pidx a{padding:8px 12px;border:1px solid var(--l2);border-radius:var(--radius-pill)}
  .pidx a:before{display:none}
  .pidx a.is-on{border-color:rgba(var(--gold-rgb),.45);background:rgba(var(--gold-rgb),.06)}
  .subnav-aside{display:none}
}
/* The shared hero turns its facts into an auto-fit grid below 1000px. This
   one is a stacked card with ruled rows, so it keeps its single column and
   the rules keep meaning "next row". */
@media(max-width:1000px){
  .phero.is-summit .phero-facts{grid-template-columns:1fr}
}
@media(max-width:860px){
  .phero.is-summit{min-height:0;padding:120px 0 56px}
  .phero.is-summit .phero-grid{grid-template-columns:1fr;align-items:start}
  .phero.is-summit .phero-art{width:132%;right:-26%;top:auto;bottom:-6%;transform:none;opacity:.32}
  .phero-marks{gap:14px}
  .phero-marks li{padding:0;flex:1 1 44%}
  .phero-marks li + li{border-left:0}
  .kfact{grid-template-columns:34px minmax(0,1fr);gap:8px 12px;padding:14px 18px}
  .kfact dt{grid-column:2}
  .kfact dd{grid-column:2}
  .kfacts-note{grid-template-columns:1fr;gap:12px;text-align:left}
  .aband-in{padding:28px 0}
  .aband-items{gap:18px}
  .aband-item{padding:0;flex:1 1 44%}
  .aband-item + .aband-item{border-left:0}
}

@media(prefers-reduced-motion:reduce){
  /* The scene resolves to its finished state — climber on the summit, ridge
     drawn, candles up — rather than to a blank frame. */
  .sma-sun,.sma-core,.sma-candle,.sma-mote,.sm-wordlist li,.sm-rule,.sm-script,
  .phero-marks li,.qrail-q{animation:none}
  .sma-candle,.sm-wordlist li,.sm-script,.phero-marks li{opacity:1;transform:none}
  .sm-rule{transform:scaleX(1)}
  .sma-mote{opacity:.4}
  .sma-ridge{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
  .sma-walk{animation:none;opacity:1;transform:translate(742px,150px)}
  .sma-arm{animation:none;transform:rotate(0)}
  .sm-layer{transition:none}
}

/* ===========================================================================
   INVESTMENT TEAM — the rope hero, the leadership panel, the member grid and
   the closing loop.

   `ct-`/`cta-` is the climb scene, `lead2-` the portfolio manager's panel,
   `tmg-` a member card, `tlp-`/`tloop-` the closing figure. Motion stops under
   prefers-reduced-motion, at the end of the block.
   ======================================================================== */

.tsec{padding:clamp(44px,4.6vw,72px) 0}
.tsec + .tsec{padding-top:0}

/* ---- the hero ---- */
/* Shares the summit hero's proportions deliberately: About and Team are the
   same mountain seen twice, and a reader moving between them should feel that
   rather than arrive somewhere unrelated. */
.phero.is-climb{padding:148px 0 72px;min-height:min(84vh,740px);display:flex;align-items:center}
.phero.is-climb:before{width:900px;height:900px;right:-180px;top:-380px;
  background:radial-gradient(circle,rgba(var(--gold-rgb),.17),transparent 62%)}
.phero.is-climb .phero-grid{grid-template-columns:1.1fr .6fr;align-items:center;gap:44px}
.phero.is-climb h1{letter-spacing:-.04em}
.phero.is-climb .eyebrow{letter-spacing:.34em}
.phero.is-climb .phero-lead{max-width:50ch}
.phero.is-climb .phero-art{width:min(70vw,1040px);right:-6%;top:44%;opacity:1;
  -webkit-mask-image:linear-gradient(100deg,transparent 3%,#000 32%);
  mask-image:linear-gradient(100deg,transparent 3%,#000 32%)}
@media(min-width:1181px){
  /* Room for the absolutely-positioned word column, as on About. */
  .phero.is-climb .phero-grid{padding-right:clamp(190px,14.5vw,250px)}
}

/* ---- the climb scene ---- */
.ct-art{position:relative;width:100%}
.ct-art svg{display:block;width:100%;height:auto}
.ct-layer{will-change:transform;transition:transform .9s cubic-bezier(.16,.8,.24,1)}

.cta-sun{transform-origin:742px 176px;animation:ctBreathe 7s ease-in-out infinite}
@keyframes ctBreathe{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}

.cta-slope{stroke-dasharray:700;stroke-dashoffset:700;
  animation:ctDraw 1.8s cubic-bezier(.16,.8,.24,1) .1s forwards}
@keyframes ctDraw{to{stroke-dashoffset:0}}

/* The rope draws between the figures, after the slope and before they arrive:
   the line they will climb, then the thing that ties them to it. */
.cta-rope{stroke-dasharray:420;stroke-dashoffset:420;
  animation:ctRope 1.4s cubic-bezier(.16,.8,.24,1) 1.5s forwards}
@keyframes ctRope{to{stroke-dashoffset:0}}

/* Each climber rises into place, the leader first and the rest in file — so
   the eye reads the rope from the summit back down it. */
/* The rise is animated on the INNER group. .cta-stop carries the SVG
   transform= attribute that places it on the slope, and a CSS transform would
   override that attribute outright — snapping every climber to the origin. */
.cta-climber{color:var(--deep);opacity:0;
  animation:ctArrive .9s cubic-bezier(.16,.8,.24,1) forwards;
  animation-delay:calc(.7s + var(--b) * .22s)}
@keyframes ctArrive{from{opacity:0;transform:translateY(34px)}
  to{opacity:1;transform:none}}

.cta-climber.is-lead{color:var(--deep)}
.cta-flag{opacity:0;animation:ctFlag .9s cubic-bezier(.16,.8,.24,1) 1.9s forwards}
@keyframes ctFlag{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cta-cloth{transform-origin:744px 120px;animation:ctWave 4.4s ease-in-out 2.8s infinite}
@keyframes ctWave{0%,100%{transform:skewY(0)}50%{transform:skewY(-1.6deg)}}

.ct-art.is-replay .cta-slope,.ct-art.is-replay .cta-rope,
.ct-art.is-replay .cta-climber,.ct-art.is-replay .cta-flag{animation:none}

/* ---- the leadership panel ---- */
.lead2{display:grid;grid-template-columns:300px minmax(0,1fr) 288px;gap:0;
  border:1px solid var(--l2);border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(150deg,rgba(var(--bg2-rgb),.82),rgba(var(--deep-rgb),.72));
  box-shadow:0 34px 90px -46px rgba(0,0,0,.95)}

.lead2-portrait{position:relative;display:grid;place-items:end center;min-height:330px;
  padding:26px 0 0;background:radial-gradient(120% 78% at 50% 62%,
    rgba(var(--gold-rgb),.16),transparent 70%)}
.lead2-portrait img{position:relative;z-index:2;display:block;width:100%;max-width:280px;
  height:auto;object-fit:contain;filter:grayscale(.12) contrast(1.03)}
.lead2-initials{position:relative;z-index:2;align-self:center;font:400 62px var(--serif);
  color:var(--gold2)}
/* Three rings behind the head. They give a cut-out portrait an edge it
   otherwise has none of, and put the light source behind the subject. */
.lead2-rings{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:270px;height:270px;z-index:1}
.lead2-rings i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(var(--gold-rgb),.3);
  animation:leadRing 9s linear infinite}
.lead2-rings i:nth-child(2){inset:16%;border-color:rgba(var(--gold-rgb),.5);
  animation-duration:13s;animation-direction:reverse}
.lead2-rings i:nth-child(3){inset:32%;border-style:dashed;border-color:rgba(var(--gold-rgb),.35);
  animation-duration:22s}
@keyframes leadRing{to{transform:rotate(360deg)}}

.lead2-body{padding:34px 34px 32px;border-left:1px solid var(--l2);border-right:1px solid var(--l2)}
.lead2-body h2{margin:12px 0 0;font:400 clamp(34px,3.4vw,46px)/1.04 var(--serif);color:var(--text)}
.lead2-role{margin-top:9px;font:700 10px var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold)}
.lead2-body p{margin:18px 0 0;font-size:13px;line-height:1.85;color:var(--muted);max-width:62ch}
.lead2-facts{display:flex;flex-wrap:wrap;gap:0;margin:26px 0 0}
.lead2-facts > div{padding:0 26px;flex:0 0 auto}
.lead2-facts > div:first-child{padding-left:0}
.lead2-facts > div + div{border-left:1px solid var(--l2)}
.lead2-facts b{display:block;font:400 30px/1 var(--num);color:var(--gold2);
  font-variant-numeric:tabular-nums}
.lead2-facts span{display:block;margin-top:8px;font:700 8.5px var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--t4);max-width:14ch;line-height:1.7}
.lead2-go{margin-top:28px}
.lead2-go svg{width:13px;height:13px;vertical-align:-2px;margin-left:8px}

.lead2-aside{padding:30px 28px;display:flex;flex-direction:column;gap:26px;
  background:rgba(var(--deep-rgb),.4)}
.lead2-quote{position:relative;margin:0;padding-left:20px;border-left:2px solid rgba(var(--gold-rgb),.5)}
.lead2-mark{position:absolute;left:-2px;top:-14px;font:400 46px var(--serif);
  color:rgba(var(--gold-rgb),.45);line-height:1}
.lead2-quote p{margin:0;font:italic 400 20px/1.42 var(--serif);color:var(--text)}
.lead2-quote cite{display:block;margin-top:18px;font:700 8.5px/1.7 var(--sans);letter-spacing:.2em;
  text-transform:uppercase;color:var(--t4);font-style:normal}
.lead2-skills h3{margin:0 0 14px;font:700 9px var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--t3)}
.lead2-skills ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.lead2-skills li{padding:8px 13px;border:1px solid var(--l3);border-radius:var(--radius-pill);
  font-size:10.5px;color:var(--t1);background:rgba(var(--bg2-rgb),.55);
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.lead2-skills li:hover{border-color:rgba(var(--gold-rgb),.45);color:var(--text)}

/* ---- the member grid ---- */
/* stretch, not start: the cards in a row share a height, which is what puts
   every credentials footer on one line across the row. .tmg-foot carries
   margin-top:auto, so the slack lands above it rather than inside the text. */
.tmg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.tmg-card{position:relative;display:flex;flex-direction:column;padding:24px;overflow:hidden;
  border:1px solid var(--l2);border-radius:var(--radius-lg);
  background:linear-gradient(158deg,rgba(var(--bg2-rgb),.72),rgba(var(--deep-rgb),.6));
  transition:border-color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease)}
.tmg-card:hover{border-color:rgba(var(--gold-rgb),.42);transform:translateY(-6px);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.95)}
/* A wash that only appears on hover, so a grid of five cards is calm at rest
   and the one being read is the one that is lit. */
.tmg-card:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(90% 60% at 24% 0%,rgba(var(--gold-rgb),.12),transparent 68%);
  transition:opacity .45s var(--ease)}
.tmg-card:hover:before{opacity:1}
.tmg-card > *{position:relative;z-index:1}

.tmg-top{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:14px;
  margin-bottom:20px}
.tmg-n{font:400 21px var(--num);color:var(--t5);line-height:1;
  transition:color .4s var(--ease)}
.tmg-card:hover .tmg-n{color:var(--gold2)}
.tmg-face{position:relative;width:104px;height:104px;justify-self:center;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;border:1px solid var(--l3)}
.tmg-face img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;display:block;
  filter:grayscale(.3) contrast(1.02);transition:filter .5s var(--ease),transform .6s var(--ease)}
.tmg-card:hover .tmg-face img{filter:grayscale(0) contrast(1.04);transform:scale(1.06)}
.tmg-card:hover .tmg-face{border-color:rgba(var(--gold-rgb),.5)}
.tmg-halo{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(74% 74% at 50% 72%,rgba(var(--gold-rgb),.3),transparent 72%)}
.tmg-initials{font:400 30px var(--serif);color:var(--gold2)}
.tmg-themes{list-style:none;margin:0;padding:0;text-align:right}
.tmg-themes li{font:700 8px var(--sans);letter-spacing:.17em;text-transform:uppercase;
  color:var(--t5);line-height:1.95;transition:color .4s var(--ease)}
.tmg-card:hover .tmg-themes li:first-child{color:var(--gold2)}

.tmg-card h3{margin:0;font:400 23px/1.2 var(--serif);color:var(--text)}
.tmg-role{margin-top:7px;font:700 9px var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold)}
/* Unclamped: with the expander gone there is nothing to open, so a clamp
   here would hide the tail of the two longer bios for good. */
.tmg-card > p{margin:14px 0 0;font-size:12.5px;line-height:1.82;color:var(--muted)}

.tmg-skills{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.tmg-skills li{padding:7px 12px;border:1px solid var(--l3);border-radius:var(--radius-pill);
  font-size:10px;color:var(--t3);background:rgba(var(--deep-rgb),.45);
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.tmg-card:hover .tmg-skills li{border-color:var(--l4);color:var(--t1)}

.tmg-more{margin-top:16px}
.tmg-more > summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;list-style:none;
  font:700 8.5px var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--t4)}
.tmg-more > summary::-webkit-details-marker{display:none}
.tmg-more > summary:after{content:"";width:5px;height:5px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .3s var(--ease)}
.tmg-more[open] > summary:after{transform:rotate(-135deg) translate(-2px,-2px)}
.tmg-more > summary:hover{color:var(--gold2)}
.tmg-more > summary:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.tmg-more p{margin:14px 0 0;font-size:12px;line-height:1.8;color:var(--t3)}

/* Pushed to the bottom so every card's credentials sit on one line across the
   row, whatever length the bios above them happen to be. */
.tmg-foot{margin-top:auto;padding-top:18px;display:flex;align-items:center;
  gap:12px;border-top:1px solid var(--l2)}
.tmg-foot i{width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;
  border:1px solid var(--l3);color:var(--gold);background:rgba(var(--deep-rgb),.5)}
.tmg-foot i svg{width:16px;height:16px;margin:0}
.tmg-foot > div{min-width:0}
.tmg-foot b{display:block;font:700 9.5px var(--sans);letter-spacing:.15em;text-transform:uppercase;
  color:var(--text)}
.tmg-foot span{display:block;margin-top:3px;font-size:10px;line-height:1.6;color:var(--t4)}

/* ---- the closing loop ---- */
.tloop{border-top:1px solid var(--l2);
  background:linear-gradient(180deg,rgba(var(--deep-rgb),.8),rgba(var(--bg2-rgb),.32))}
.tloop-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) auto;
  align-items:center;gap:38px;padding:44px 0}
.tloop-fig svg{display:block;width:100%;height:auto}
.tlp-bed.is-in{opacity:.5}
/* The light never leaves the path — the figure's whole claim in one property. */
.tlp-run{stroke-dasharray:180 1400;stroke-dashoffset:0;
  animation:tlpRun 9s linear infinite}
@keyframes tlpRun{to{stroke-dashoffset:-1580}}
.tlp-word{opacity:0;animation:tlpWord .7s cubic-bezier(.16,.8,.24,1) forwards;
  animation-delay:calc(.2s + var(--b) * .13s)}
@keyframes tlpWord{from{opacity:0}to{opacity:1}}

.tloop-say{border-left:1px solid var(--l2);padding-left:34px}
.tloop-quote{margin:0 0 20px;display:flex;gap:12px}
.tloop-quote > span{font:400 30px var(--serif);color:rgba(var(--gold-rgb),.5);line-height:.9}
.tloop-quote p{margin:0;font-size:15px;line-height:1.72;color:var(--t1)}
.tloop-say .btn svg{width:13px;height:13px;vertical-align:-2px;margin-left:8px}
.tloop-words{list-style:none;margin:0;padding:0;text-align:right}
.tloop-words li{font:700 10px var(--sans);letter-spacing:.3em;text-transform:uppercase;
  color:var(--t4);line-height:2.2}
.tloop-words li:first-child{color:var(--gold2)}

/* ---- narrower ---- */
@media(max-width:1180px){
  .phero.is-climb .phero-art{width:min(88vw,900px);right:-20%;opacity:.5}
  .phero.is-climb .phero-grid{grid-template-columns:1fr .7fr}
  .lead2{grid-template-columns:250px minmax(0,1fr)}
  .lead2-aside{grid-column:1/-1;border-top:1px solid var(--l2);
    flex-direction:row;align-items:flex-start;gap:38px}
  .lead2-aside > *{flex:1 1 0;min-width:0}
  .tmg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tloop-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
  .tloop-words{grid-column:1/-1;text-align:left;display:flex;gap:22px}
}
@media(max-width:860px){
  .phero.is-climb{min-height:0;padding:120px 0 56px}
  .phero.is-climb .phero-grid{grid-template-columns:1fr;align-items:start}
  .phero.is-climb .phero-art{width:134%;right:-24%;top:auto;bottom:-4%;transform:none;opacity:.3}
  .lead2{grid-template-columns:1fr}
  .lead2-portrait{min-height:290px}
  .lead2-body{border-left:0;border-right:0;border-top:1px solid var(--l2);padding:28px 22px}
  .lead2-aside{flex-direction:column;gap:24px;padding:26px 22px}
  .lead2-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:20px 14px}
  .lead2-facts > div{padding:0}
  .lead2-facts > div + div{border-left:0}
  .lead2-facts b{font-size:26px}
  .lead2-facts span{max-width:none}
  .tmg{grid-template-columns:1fr}
  .tloop-in{grid-template-columns:1fr;padding:32px 0}
  .tloop-say{border-left:0;border-top:1px solid var(--l2);padding:24px 0 0}
  /* Squeezed to a phone`s width the diagram`s labels fall to about five
     pixels. It keeps a legible minimum width and scrolls inside its own box
     instead — the page itself never scrolls sideways. */
  .tloop-fig{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tloop-fig svg{min-width:720px}
}

@media(prefers-reduced-motion:reduce){
  /* The scene resolves to the team already on the rope, flag planted. */
  .cta-sun,.cta-cloth,.tlp-run,.tlp-word,.lead2-rings i{animation:none}
  .cta-slope,.cta-rope{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
  .cta-climber,.cta-flag{animation:none;opacity:1;transform:none}
  .tlp-word{opacity:1}
  .tlp-run{stroke-dasharray:none;opacity:.55}
  .ct-layer{transition:none}
}

/* ==========================================================================
   Homepage CRO & Visual Redesign Enhancements
   --------------------------------------------------------------------------
   - Viewport-filling luxury hero (100svh)
   - Large-scale cinematic typography (clamp up to 130px)
   - Institutional Performance & Track Record card
   - Refined mobile navigation touch targets & slide transitions
   - Complete removal of prototype theme-switcher on client surfaces
   ========================================================================== */

/* ---------- client-facing polish ---------- */
.theme-dock {
  display: none !important;
}

/* ---------- hero scale & grandeur ---------- */
.hero {
  height: 100svh !important;
  min-height: 720px !important;
  padding-top: calc(var(--nav-h, 63px) + 20px);
}

.hero h1 {
  font-size: clamp(58px, 7.2vw, 126px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
}

.hero-copy {
  font-size: 17.5px !important;
  line-height: 1.72 !important;
  max-width: 600px !important;
  color: var(--t1) !important;
}

.hero .actions .btn.gold {
  box-shadow: 0 10px 25px rgba(var(--gold-rgb), 0.28);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
}
.hero .actions .btn.gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(var(--gold-rgb), 0.42);
}

/* ==========================================================================
   HERO SIGNAL CARD
   --------------------------------------------------------------------------
   The floating market card in the home hero. base.css lays down the skeleton
   (position, float animation, the row and badge primitives); everything here
   is the institutional dressing on top of it — the headline quote, the regime
   pill, the plot's two axis rails and the industry table.

   Tokens only. The card sits over four different hero grounds, so a raw hex
   here would read wrong in at least three of them.
   ========================================================================== */

.signal-card {
  top: 13%;
  width: 408px;
  padding: 22px 22px 20px;
  border-radius: 14px;
  border: 1px solid rgba(var(--gold-rgb), 0.26);
  background: linear-gradient(155deg, rgba(var(--bg2-rgb), 0.9), rgba(var(--bg-rgb), 0.95));
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.62),
              0 0 0 1px rgba(var(--gold-rgb), 0.1),
              inset 0 1px 0 rgba(var(--text-rgb), 0.07);
  animation: float 7s ease-in-out infinite;
}
.signal-card:hover {
  border-color: rgba(var(--gold-rgb), 0.44);
  box-shadow: 0 40px 92px rgba(0, 0, 0, 0.72), 0 0 32px rgba(var(--gold-rgb), 0.15);
}

/* ---------- head: what this is, and whether it is live ------------------ */

.signal-head {
  font: 700 10px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t1);
}
.sh-scope { display: inline-flex; align-items: center; gap: 9px; }
.sh-glyph { width: 17px; height: 17px; flex: none; color: var(--gold); }
.signal-head .live {
  font-size: 9px;
  letter-spacing: 0.16em;
  padding: 4px 9px 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(var(--green-rgb), 0.3);
  background: rgba(var(--green-rgb), 0.1);
}
.signal-head .live.closed {
  border-color: rgba(var(--text-rgb), 0.12);
  background: rgba(var(--text-rgb), 0.04);
}

/* ---------- headline quote and the regime reading ----------------------- */

.signal {
  align-items: center;
  gap: 14px;
  margin: 16px 0 4px;
}
.sig-quote { display: grid; gap: 5px; }
.sig-price {
  font: 700 34px/1 var(--num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
}
.signal .delta { font-size: 13px; }

.sig-regime {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(var(--bg-rgb), 0.5);
}
.sr-glyph { width: 17px; height: 17px; flex: none; color: var(--green); }
.sig-regime.down .sr-glyph { color: var(--red); }
.sig-regime.flat .sr-glyph { color: var(--gold); }
.sr-text { display: grid; gap: 3px; }
.sr-text small {
  font: 700 7.5px/1 var(--sans);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--t4);
}
.sr-text b { font: 600 11.5px/1 var(--sans); color: var(--text); white-space: nowrap; }

/* ---------- the plot and its two axis rails ----------------------------- */

/* The rails are DOM text beside the canvas, not canvas text: they inherit the
   page's font, stay crisp at any device pixel ratio, and cannot be clipped by
   the plot's own padding. live.js positions each label from the very frame the
   line is drawn against, so a printed value always names a line that is there. */
.signal-plot {
  display: grid;
  grid-template-columns: 1fr 44px;
  grid-template-rows: auto 15px;
  column-gap: 9px;
  margin: 12px 0 0;
}
.signal-plot .spark-wrap { grid-area: 1 / 1; height: 104px; margin: 0; }

.axis-y {
  grid-area: 1 / 2;
  position: relative;
  border-left: 1px solid var(--line);
}
.axis-y span {
  position: absolute;
  left: 7px;
  transform: translateY(-50%);
  font: 400 8.5px/1 var(--num);
  font-variant-numeric: tabular-nums;
  color: var(--t5);
  white-space: nowrap;
}
.axis-x { grid-area: 2 / 1; position: relative; }
.axis-x span {
  position: absolute;
  top: 5px;
  transform: translateX(-50%);
  font: 400 8.5px/1 var(--num);
  font-variant-numeric: tabular-nums;
  color: var(--t5);
  white-space: nowrap;
}

.signal-foot { margin-top: 4px; font-size: 9.5px; }
.sig-sync { display: inline-flex; align-items: center; gap: 7px; }
.sync-ring {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.4px solid rgba(var(--gold-rgb), 0.28);
  border-top-color: var(--gold);
  animation: syncspin 1.1s linear infinite;
}
@keyframes syncspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sync-ring { animation: none; } }

/* ---------- the industry table ------------------------------------------ */

.sector-head { margin: 18px 0 6px; padding-top: 14px; }
.sector-title {
  font-size: 10px;
  letter-spacing: 0.16em;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.sector-title::before {
  content: "";
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: var(--gold);
}

/* A segmented control, and it does exactly what it looks like: it marks one
   horizon's column so the eye has somewhere to land. It does not re-rank the
   table — see the note in sections.js for why that would be a lie. */
.sector-cols {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  margin: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(var(--bg-rgb), 0.7);
}
.col-tab {
  width: 27px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  font: 700 9px/1 var(--sans);
  letter-spacing: 0.08em;
  color: var(--t4);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.col-tab:hover { color: var(--gold2); }
.col-tab.on { background: var(--gold2); color: var(--bg); }

.sector-row {
  display: grid;
  grid-template-columns: 11px 19px 1fr auto auto;
  gap: 8px;
  padding: 9px 0;
  border-bottom-color: rgba(var(--text-rgb), 0.06);
}
.sector-row:hover { background: rgba(var(--gold-rgb), 0.05); padding-left: 0; }

.s-icon { display: inline-flex; color: var(--gold); }
.s-icon.up { color: var(--green); }
.s-icon.down { color: var(--red); }
.si-glyph { width: 19px; height: 19px; }
.s-name { font-size: 12px; }
.s-trend { gap: 2px; font-size: 8px; width: auto; }

.s-badges { gap: 4px; }
.badge {
  width: 26px;
  padding: 4px 0;
  border-radius: 999px;
  font-size: 10.5px;
  transition: box-shadow 0.28s var(--ease);
}
/* CSS cannot compare one attribute against another, so the three pairings are
   written out. The list's own data-horizon is what home.js flips. */
.sector-list[data-horizon="short"] .badge[data-horizon="short"],
.sector-list[data-horizon="medium"] .badge[data-horizon="medium"],
.sector-list[data-horizon="long"] .badge[data-horizon="long"] {
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.55);
}

.sector-open { margin-top: 13px; padding-top: 12px; font-size: 9px; }
.so-count { display: inline-flex; align-items: center; gap: 7px; }
.so-glyph { width: 13px; height: 13px; color: var(--gold); }
.sector-open .so-link { color: var(--gold); transition: color 0.3s var(--ease); }
.sector-open:hover, .sector-open:hover .so-link { color: var(--gold2); }

/* ---------- Section 3 Investor polish ---------- */
#investor {
  border-top: 1px solid var(--line);
  background: var(--bg);
}
#investor .team {
  align-items: center;
}

/* ---------- Reel Quote Pre-roll ----------
   The block had 60px above it, nothing below it, and a -20px bottom margin
   dragging the video reel up into the attribution. Given real padding on both
   sides and the negative margin dropped, so the quote reads as its own moment
   between two sections rather than as the reel's header. */
.reel-quote-wrap {
  padding-top: 82px;
  padding-bottom: 64px;
  margin-bottom: 0;
}
.lead-quote {
  position: relative;
  max-width: 840px;
  margin: 0 auto;
  padding: 0 0 0 36px;
  border-left: 2px solid var(--gold);
}
.lead-quote .quote-mark {
  position: absolute;
  left: 6px;
  top: -14px;
  font-family: var(--serif);
  font-size: 54px;
  color: var(--gold);
  opacity: 0.35;
  line-height: 1;
}
.lead-quote p {
  font: 400 21px/1.62 var(--serif);
  color: var(--text);
  margin: 0 0 20px;
  font-style: italic;
}
/* line-height was 1, which gave the attribution a box exactly as tall as its
   own capitals — no leading above or below, so it sat welded to the quote.
   1.6 is what lets it breathe; the rest of the gap is the margin above. */
.lead-quote cite {
  font: 600 11px/1.7 var(--sans);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold2);
  display: block;
  font-style: normal;
}

/* ---------- Mobile UX & Hamburger ---------- */
.hamb {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 11px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px;
}
.mnav {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
}

/* ---------- Responsive Adjustments for Hero Card ---------- */
/* Below 1200px the card stops floating beside the headline and becomes the
   block under it. Taking it out of `position:absolute` hands it back to the
   hero's flex row, which does not wrap — so it lined up as a second column and
   squeezed the headline into a third of the width instead of dropping below
   it. Both children are put on their own line explicitly.

   base.css also narrows the card to 250px and hides the horizon tabs and the
   industry names at 1000px; all three were written for a card still pinned to
   the right, and at full width there is room for the lot. */
@media (max-width: 1200px) {
  .hero {
    flex-wrap: wrap;
    height: auto !important;
    min-height: 700px !important;
    padding: 120px 0 60px !important;
  }
  .hero-content { flex: 1 0 100%; }
  .signal-card {
    position: relative;
    right: auto;
    top: auto;
    flex: 0 0 100%;
    width: 100%;
    max-width: 520px;
    margin: 36px auto 0;
    padding: 22px;
    animation: none;
  }
}

@media (max-width: 1000px) {
  .sector-cols { display: inline-flex; }
  .s-name { display: block; }
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: clamp(42px, 10vw, 68px) !important;
  }
  .signal-card {
    padding: 18px;
  }
  .sig-price {
    font-size: 28px;
  }
  .signal {
    flex-wrap: wrap;
    gap: 12px;
  }
  .lead-quote p {
    font-size: 17px;
  }
}

/* ============================================================
   INNER PAGE — ENQUIRE / PRIVATE CONSULTATION
   ============================================================ */

/* Trust credentials strip — four institutional facts above the form */
.enq-trust-strip {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.enq-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}
.enq-trust-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(var(--gold-rgb, 212, 175, 55), 0.04);
  transition: border-color 0.2s;
}
.enq-trust-item:hover {
  border-color: var(--gold2);
}
.enq-trust-val {
  font: 700 16px/1.1 var(--sans);
  color: var(--gold2);
  letter-spacing: 0.04em;
}
.enq-trust-lbl {
  font: 400 11px/1.4 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Upgraded form card for consultation page */
.enq-formcard {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 36px 40px;
  background: var(--surface);
  box-shadow: 0 4px 24px rgba(0,0,0,.12);
}
@media (max-width: 680px) {
  .enq-formcard { padding: 24px 20px; }
}

/* Full-width gold submit button on consultation page */
.enq-submit-btn {
  width: 100%;
  justify-content: center;
  margin-top: 12px;
  padding: 16px 24px !important;
  font-size: 15px !important;
  letter-spacing: 0.06em;
}

/* Right sidebar on consultation page */
.enq-sidebar {
  display: flex;
  flex-direction: column;
}

/* Trust seal badges in sidebar */
.enq-seal {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(var(--gold-rgb, 212, 175, 55), 0.03);
  transition: border-color 0.2s;
}
.enq-seal:hover {
  border-color: var(--gold2);
}
.enq-seal strong {
  font: 600 13px/1 var(--sans);
  color: var(--t1);
}

/* ============================================================
   INNER PAGE — GENERAL POLISH
   ============================================================ */

/* Three-button phero-actions row centering (used on philosophy/process pages) */
.phero-actions.centered {
  justify-content: center;
}

/* Checks component (used on why-marathon alpha section) */
.checks-block {
  margin-top: 20px;
}

/* ============================================================
   10/10 PREMIUM TRANSFORMATION LAYER
   Applied after all existing styles — overrides where needed.
   Organized by component, then by state, then by breakpoint.
   ============================================================ */

/* ---- GLOBAL TYPOGRAPHY UPGRADE -------------------------------- */

/* Every serif element picks up Playfair Display automatically via
   the --serif token. This section adds optical sizing and weight. */
h1, h2, h3,
.phero h1,
[style*="var(--serif)"],
.section-head h2,
.formcard h2,
.pull-text,
.u-fig {
  font-family: var(--serif);
  font-optical-sizing: auto;
}

/* Hero h1 on interior pages — larger, more editorial */
.phero h1 {
  font-size: clamp(42px, 6vw, 84px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--text);
}

/* Interior hero lead — more breathing room */
.phero-lead {
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.8;
  max-width: 58ch;
  color: var(--t1);
  margin-top: 18px;
  font-weight: 300;
}

/* Eyebrow — refined spacing */
.eyebrow {
  font-size: 9.5px;
  letter-spacing: 0.3em;
  font-weight: 600;
}

/* Gold rule under eyebrow on interior heroes */
.phero .eyebrow::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gradient-gold);
  margin-top: 12px;
  opacity: 0.8;
}

/* Section head h2 — more editorial */
.section-head h2,
.shead h2 {
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 500;
}

/* Pull quote — dramatically larger */
.pull blockquote,
.pull p {
  font-size: clamp(20px, 2.5vw, 32px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  font-style: italic;
  font-weight: 400;
}

/* ---- PREMIUM BUTTON SYSTEM ------------------------------------ */

/* Base btn upgrade — more physical, better depth */
.btn {
  border-radius: var(--radius-sm);
  transition: all 0.35s var(--ease-out);
  font-weight: 600;
  letter-spacing: 0.14em;
}

.btn.gold {
  background: linear-gradient(135deg, var(--gold), var(--gold2) 60%, var(--gold));
  background-size: 200% 100%;
  background-position: 0% 0%;
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(var(--gold-rgb), 0.35),
              0 1px 0 rgba(255,255,255,0.12) inset;
  transition: all 0.4s var(--ease-out);
}

.btn.gold:hover {
  background-position: 100% 0%;
  box-shadow: 0 8px 32px rgba(var(--gold-rgb), 0.55),
              0 1px 0 rgba(255,255,255,0.18) inset;
  transform: translateY(-2px);
}

/* XL button — for hero-scale CTAs */
.btn-xl {
  padding: 18px 36px !important;
  font-size: 11px !important;
  letter-spacing: 0.2em;
}

/* Pulse animation on the nav Private Consultation button */
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(var(--gold-rgb),.35); }
  50% { box-shadow: 0 4px 28px rgba(var(--gold-rgb),.65), 0 0 0 4px rgba(var(--gold-rgb),.1); }
}

/* ---- PREMIUM NAVIGATION --------------------------------------- */

/* Glassmorphic nav on scroll */
.nav.scrolled {
  background: var(--glass-nav) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid var(--line-bright) !important;
  box-shadow: 0 1px 0 rgba(var(--gold-rgb),.08),
              0 24px 48px -20px rgba(0,0,0,.7) !important;
}

/* Logo — premium sizing */
.logo img {
  height: 28px;
  width: auto;
  filter: brightness(1.1);
}

/* Nav links — refined */
.links a {
  font-weight: 500;
  opacity: 0.78;
  letter-spacing: 0.14em;
}

.links a:hover {
  color: var(--gold2);
  opacity: 1;
}

/* Active nav item */
.navitem.on > a {
  color: var(--gold2);
  opacity: 1;
}

/* Gold active underline indicator */
.navitem.on > a::after {
  width: 100% !important;
  background: var(--gradient-gold) !important;
}

/* Mega-menu — glassmorphic panel */
.mega {
  background: var(--glass) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  border: 1px solid var(--line-bright) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg), var(--shadow-gold) !important;
}

.mega-intro h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text);
}

.mega-link {
  border-radius: var(--radius-sm);
  transition: all 0.25s var(--ease-out);
  padding: 12px 14px !important;
}

.mega-link:hover {
  background: rgba(var(--gold-rgb), 0.08);
  border-color: var(--line-bright) !important;
  transform: translateX(3px);
}

.mega-link.is-cta {
  background: linear-gradient(135deg, rgba(var(--gold-rgb),.12), rgba(var(--gold2-rgb),.08));
  border: 1px solid rgba(var(--gold-rgb),.3) !important;
}

.mega-link.is-cta:hover {
  background: linear-gradient(135deg, rgba(var(--gold-rgb),.22), rgba(var(--gold2-rgb),.16));
  transform: translateX(3px);
}

.mega-link.is-cta b {
  color: var(--gold2) !important;
}

/* Nav CTA button */
.nav-tail .btn.gold {
  font-size: 9px;
  letter-spacing: 0.18em;
  padding: 11px 18px;
  animation: btnPulse 4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

/* ---- SUBNAV PREMIUM ------------------------------------------- */

.subnav {
  background: rgba(var(--bg-rgb), 0.92) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  border-bottom: 1px solid var(--line-bright) !important;
}

.subnav a {
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  transition: all 0.2s var(--ease-out);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

.subnav a:hover, .subnav a[aria-current] {
  color: var(--gold2);
  background: rgba(var(--gold-rgb), 0.08);
}

.subnav a[aria-current] {
  color: var(--gold2);
}

/* ---- PREMIUM INTERIOR HERO ------------------------------------ */

.phero {
  padding: clamp(60px, 10vh, 100px) 0 clamp(48px, 8vh, 72px) !important;
  position: relative;
  overflow: hidden;
}

/* Decorative golden top-edge gradient rule */
.phero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold2), var(--gold), transparent);
  opacity: 0.5;
}

/* Subtle radial glow behind the hero text */
.phero::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: 60%;
  height: 140%;
  background: radial-gradient(ellipse, rgba(var(--cyan-rgb),.05), transparent 65%);
  pointer-events: none;
}

/* Fact chips in heroes — premium glass treatment */
.phero-fact {
  background: rgba(var(--gold-rgb), 0.06);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  padding: 18px 22px;
  transition: all 0.3s var(--ease-out);
  position: relative;
  overflow: hidden;
}

.phero-fact::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold2), transparent);
  opacity: 0.5;
}

.phero-fact:hover {
  background: rgba(var(--gold-rgb), 0.1);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

.phero-fact b {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--gold2);
  line-height: 1;
}

.phero-fact span {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
  font-weight: 600;
}

/* Phero action buttons — more spacing */
.phero-actions {
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
}

/* ---- SECTION HEAD UPGRADE ------------------------------------- */

.section-head,
.shead {
  margin-bottom: clamp(36px, 5vw, 56px);
}

.section-head .eyebrow,
.shead .eyebrow {
  margin-bottom: 16px;
}

/* Subtle gold hairline between eyebrow and title */
.section-head h2,
.shead h2 {
  position: relative;
  padding-top: 20px;
}

.section-head h2::before,
.shead h2::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40px;
  height: 1px;
  background: var(--gradient-gold);
  opacity: 0.7;
}

/* ---- PREMIUM CARD SYSTEM -------------------------------------- */

/* Glass card variant */
.card {
  background: rgba(var(--bg2-rgb), 0.6) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  transition: all 0.35s var(--ease-out) !important;
  overflow: hidden;
  position: relative;
}

.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb),.3), transparent);
}

.card:hover {
  background: rgba(var(--lift-rgb, 18,70,58), 0.5) !important;
  border-color: var(--line-bright) !important;
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-md), var(--shadow-gold) !important;
}

/* ---- PULL QUOTE — EDITORIAL TREATMENT ------------------------- */

/* Pull quote — centred. This is the rule that wins for .pull; the earlier one
   near the top of the file is fully overridden here. Vertical padding raised
   from clamp(40px, 6vw, 72px): a quote is a pause in the page and was not
   getting enough room around it to read as one. */
.pull {
  text-align: center;
  position: relative;
  padding: clamp(56px, 7vw, 92px) 0;
}

.pull::before {
  content: '"';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: 120px;
  line-height: 1;
  color: var(--gold);
  opacity: 0.12;
  pointer-events: none;
  font-style: italic;
}

.pull-text,
.pull blockquote,
.pull p {
  font-family: var(--serif) !important;
  color: var(--text) !important;
  max-width: 56ch;
  margin: 0 auto 20px;
}

.pull cite,
.pull-cite {
  font-family: var(--sans) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--gold2) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.pull cite::before,
.pull-cite::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--gradient-gold);
}

/* ---- PREMIUM TABLE SYSTEM ------------------------------------- */

.tbl-wrap table,
table.tbl {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line) !important;
}

table thead th {
  background: rgba(var(--gold-rgb), 0.08) !important;
  color: var(--gold2) !important;
  font-weight: 600;
  letter-spacing: 0.14em;
  border-bottom: 1px solid var(--line-bright) !important;
  padding: 14px 16px !important;
}

table thead th:first-child {
  border-radius: var(--radius) 0 0 0 !important;
}
table thead th:last-child {
  border-radius: 0 var(--radius) 0 0 !important;
}

table tbody tr:hover td {
  background: rgba(var(--gold-rgb), 0.04) !important;
}

table tbody td {
  padding: 13px 16px !important;
  border-bottom: 1px solid var(--line) !important;
}

table tbody tr:last-child td {
  border-bottom: none !important;
}

/* ---- PREMIUM STAT BAND ---------------------------------------- */

.stat-band,
.stats-strip,
[class*="stat-band"] {
  position: relative;
  overflow: hidden;
}

.stat-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--gold-rgb),.04), transparent 50%, rgba(var(--cyan-rgb),.03));
  pointer-events: none;
}

/* ---- PREMIUM CTA BAND ----------------------------------------- */

.cta-band,
.ctaband,
[class*="ctab"] {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg2) 0%, var(--lift) 40%, var(--bg2) 100%) !important;
  border-top: 1px solid var(--line-bright) !important;
  border-bottom: 1px solid var(--line-bright) !important;
  padding: clamp(56px, 8vw, 96px) 0 !important;
}

/* Radial gold glow in background */
.cta-band::before,
.ctaband::before {
  content: '';
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 200%;
  background: radial-gradient(ellipse, rgba(var(--gold-rgb),.12), transparent 60%);
  pointer-events: none;
}

/* Top-edge gold hairline */
.cta-band::after,
.ctaband::after {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold2), var(--gold), transparent);
  opacity: 0.6;
}

/* CTA band headline */
.ctaband h2,
.cta-band h2 {
  font-family: var(--serif) !important;
  font-size: clamp(28px, 4vw, 52px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: var(--text) !important;
}

/* CTA band body text */
.ctaband p,
.cta-band p {
  color: var(--t1) !important;
  max-width: 56ch !important;
  margin: 16px auto 28px !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  font-weight: 300 !important;
}

/* CTA band eyebrow */
.ctaband .eyebrow,
.cta-band .eyebrow {
  margin-bottom: 20px;
}

/* ---- PREMIUM FOOTER ------------------------------------------- */

footer {
  background: var(--deep) !important;
  border-top: 1px solid var(--line-bright) !important;
  position: relative;
  overflow: hidden;
}

footer::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold2), var(--gold), transparent);
  opacity: 0.4;
}

.foot {
  padding: clamp(48px, 7vw, 80px) 0 !important;
}

/* Footer brand column — more editorial */
.foot-logo img {
  height: 26px;
  width: auto;
  opacity: 0.9;
  margin-bottom: 18px;
}

.foot-note {
  font-size: 13px !important;
  line-height: 1.8 !important;
  color: var(--t4) !important;
  max-width: 26ch !important;
  font-weight: 300 !important;
}

/* Footer column headings */
footer h4,
.foot h4 {
  font-family: var(--sans) !important;
  font-size: 9px !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color: var(--gold2) !important;
  font-weight: 700 !important;
  margin: 0 0 18px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--line) !important;
}

/* Footer nav links */
footer a:not([class]) {
  font-size: 12.5px !important;
  color: var(--t4) !important;
  display: block !important;
  padding: 5px 0 !important;
  transition: all 0.2s var(--ease-out) !important;
  letter-spacing: 0.02em !important;
}

footer a:not([class]):hover {
  color: var(--gold2) !important;
  transform: translateX(4px) !important;
}

/* Social icons — premium hover */
.soc {
  border-radius: var(--radius) !important;
  transition: all 0.3s var(--ease-spring) !important;
}

.soc:hover {
  transform: translateY(-4px) scale(1.1) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
}

/* Footer legal bar */
.foot-legal {
  padding: 18px 0 !important;
  border-top: 1px solid var(--line) !important;
  font-size: 10.5px !important;
  color: var(--t6) !important;
}

/* Footer disc */
.disc {
  font-size: 10.5px !important;
  color: var(--t6) !important;
  line-height: 1.7 !important;
  padding: 18px 0 24px !important;
  border-top: 1px solid rgba(var(--text-rgb),.06) !important;
}

/* ---- PREMIUM FORM SYSTEM -------------------------------------- */

/* Glass form card */
.formcard {
  background: rgba(var(--bg2-rgb), 0.7) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  border: 1px solid var(--line-bright) !important;
  border-radius: var(--radius-lg) !important;
  padding: 40px 44px !important;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md) !important;
}

.formcard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold2), var(--gold), transparent);
  opacity: 0.5;
}

@media (max-width: 680px) {
  .formcard {
    padding: 28px 22px !important;
  }
}

/* Form labels */
.fldw label {
  font-size: 9.5px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  margin-bottom: 8px !important;
  display: block;
}

/* Form inputs — premium glass */
.fldw input,
.fldw select,
.fldw textarea {
  background: rgba(var(--bg-rgb), 0.6) !important;
  border: 1px solid var(--line-bright) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  font-family: var(--sans) !important;
  font-size: 13.5px !important;
  padding: 13px 16px !important;
  transition: all 0.25s var(--ease-out) !important;
  width: 100%;
}

.fldw input:focus,
.fldw select:focus,
.fldw textarea:focus {
  outline: none !important;
  border-color: var(--gold) !important;
  background: rgba(var(--lift-rgb, 18,70,58), 0.3) !important;
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.12) !important;
}

.fldw textarea {
  min-height: 120px !important;
  resize: vertical !important;
}

/* Submit button — full width gold on forms */
form .btn.gold[type="submit"] {
  width: 100%;
  justify-content: center;
  padding: 17px 24px !important;
  font-size: 10.5px !important;
  margin-top: 16px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.2em;
}

/* ---- PREMIUM PANEL BOX ---------------------------------------- */

.panelbox {
  background: rgba(var(--gold-rgb), 0.05) !important;
  border: 1px solid var(--line-bright) !important;
  border-radius: var(--radius-lg) !important;
  padding: 28px 30px !important;
  position: relative;
  overflow: hidden;
}

.panelbox::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold2), transparent);
  opacity: 0.4;
}

/* ---- PREMIUM NOTICE ------------------------------------------- */

.notice {
  background: rgba(var(--gold-rgb), 0.06) !important;
  border-left: 2px solid var(--gold) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  padding: 16px 18px !important;
}

/* ---- PREMIUM DEF LIST ----------------------------------------- */

.deflist {
  border-top: 1px solid var(--line) !important;
}

.defrow {
  border-bottom: 1px solid var(--line) !important;
  padding: 14px 0 !important;
  transition: background 0.2s !important;
}

.defrow:hover {
  background: rgba(var(--gold-rgb), 0.03) !important;
}

.defrow dt {
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
}

.defrow dd {
  font-size: 13px !important;
  color: var(--t1) !important;
  margin-top: 4px;
}

/* ---- PREMIUM TIMELINE ----------------------------------------- */

.timeline {
  position: relative;
}

/* Animated gold left rule */
.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold), var(--gold2), var(--gold), transparent);
  opacity: 0.4;
}

.tl-item {
  padding-left: 28px !important;
  position: relative;
  padding-bottom: 32px !important;
}

.tl-item::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.6);
  transition: all 0.3s var(--ease-out);
}

.tl-item:hover::before {
  transform: scale(1.4);
  box-shadow: 0 0 20px rgba(var(--gold-rgb), 0.8);
}

/* ---- PREMIUM ASSURANCE BAND ----------------------------------- */

.assurance-band {
  background: linear-gradient(135deg, var(--bg2), var(--hover), var(--bg2)) !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
}

/* ---- PREMIUM SECTION DARK ------------------------------------- */

section.dark {
  background: linear-gradient(180deg, var(--deep) 0%, var(--bg2) 40%, var(--deep) 100%) !important;
  position: relative;
}

section.dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(var(--cyan-rgb),.03), transparent 55%);
  pointer-events: none;
}

/* ---- PREMIUM SPLIT LAYOUT ------------------------------------- */

.split {
  gap: clamp(32px, 5vw, 72px) !important;
  align-items: start !important;
}

/* ---- PREMIUM WHY-GRID ----------------------------------------- */

.why-grid,
[class*="why-grid"] {
  gap: clamp(20px, 3vw, 32px) !important;
}

/* ---- PREMIUM CHECKS COMPONENT --------------------------------- */

.checks ul li,
.checks-list li {
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(var(--text-rgb), 0.06) !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--t1) !important;
}

.checks ul li::before,
.checks-list li::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(var(--gold-rgb), 0.15);
  border: 1px solid var(--gold);
  flex: none;
  margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23C9A45C' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}

/* ---- PREMIUM ENUM LIST ---------------------------------------- */

.enum-list .enum-item {
  border-bottom: 1px solid var(--line) !important;
  padding: clamp(20px, 3vw, 28px) 0 !important;
  transition: all 0.25s var(--ease-out) !important;
  position: relative;
}

.enum-list .enum-item:hover {
  padding-left: 8px !important;
}

.enum-item .enum-n {
  font-family: var(--serif) !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  font-weight: 400 !important;
  color: var(--gold) !important;
  opacity: 0.5 !important;
  line-height: 1 !important;
}

/* ---- HOME PAGE — STAT BAND UPGRADE ---------------------------- */

/* The stat values on the home stat band */
.stat-band b,
[class*="stat"] b {
  font-family: var(--serif) !important;
  font-size: clamp(30px, 4vw, 50px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  color: var(--gold2) !important;
}

/* The price dialog's footer readout is not a stat band. Its class is `hc-stat`,
   which the attribute selector above matches on the substring "stat", so it was
   being blown up to display size inside a strip laid out for one short line —
   and its colour forced to gold, which also overrode the up/down tokens on the
   change. Restated here at the size the footer is built for. */
.hc-foot .hc-stat b {
  font-family: var(--num) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  color: var(--text) !important;
}
.hc-foot .hc-stat b.up { color: var(--green) !important; }
.hc-foot .hc-stat b.down { color: var(--red) !important; }

/* ---- REVEAL ANIMATION UPGRADE --------------------------------- */

/* Smoother, more premium entrance animation */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

.reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal:nth-child(4) { transition-delay: 0.3s; }

/* Stagger for card groups */
.stagger .card:nth-child(1) { transition-delay: 0.05s; }
.stagger .card:nth-child(2) { transition-delay: 0.12s; }
.stagger .card:nth-child(3) { transition-delay: 0.19s; }
.stagger .card:nth-child(4) { transition-delay: 0.26s; }

/* ---- HOME HERO UPGRADES --------------------------------------- */

.hero h1 {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
}

.hero h1 em {
  font-style: italic !important;
  color: var(--gold2) !important;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Credential strip in hero */
.creds {
  gap: 20px !important;
  margin-top: 28px !important;
}

.cred {
  background: rgba(var(--gold-rgb), 0.06) !important;
  border: 1px solid var(--line-bright) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 16px !important;
  transition: all 0.25s var(--ease-out) !important;
}

.cred:hover {
  border-color: var(--gold) !important;
  background: rgba(var(--gold-rgb), 0.1) !important;
}

.cred b {
  color: var(--gold2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.cred span {
  font-size: 9px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}

/* ---- PORTRAIT / TEAM SECTION ---------------------------------- */

/* Portrait card premium treatment */
.portrait-card,
.portrait {
  border: 1px solid var(--line-bright) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-md) !important;
  transition: all 0.4s var(--ease-out) !important;
}

.portrait-card:hover,
.portrait:hover {
  box-shadow: var(--shadow-lg), var(--shadow-gold) !important;
  transform: translateY(-4px) !important;
}

/* ---- KEY FACTS / ASSURANCE GRID ------------------------------- */

.key-fact-row {
  transition: all 0.25s var(--ease-out) !important;
  border-radius: var(--radius-sm) !important;
  padding: 14px 16px !important;
}

.key-fact-row:hover {
  background: rgba(var(--gold-rgb), 0.05) !important;
  transform: translateX(4px) !important;
}

/* ---- LEADERSHIP PANEL ----------------------------------------- */

.lead-panel {
  background: linear-gradient(135deg, rgba(var(--bg2-rgb),0.8), rgba(var(--lift-rgb,18,70,58),0.3)) !important;
  border: 1px solid var(--line-bright) !important;
  border-radius: var(--radius-xl) !important;
  padding: clamp(28px, 4vw, 48px) !important;
  box-shadow: var(--shadow-md) !important;
  position: relative;
  overflow: hidden;
}

.lead-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold2), var(--gold), transparent);
  opacity: 0.5;
}

/* ---- ACCORDION PREMIUM ---------------------------------------- */

details.accordion-item,
.accordion details {
  border-bottom: 1px solid var(--line) !important;
  transition: all 0.25s var(--ease-out) !important;
}

details.accordion-item:hover,
.accordion details:hover {
  background: rgba(var(--gold-rgb), 0.03) !important;
}

details summary {
  padding: 18px 0 !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  color: var(--text) !important;
  list-style: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

details[open] summary {
  color: var(--gold2) !important;
}

details summary::after {
  content: '+';
  font-size: 20px;
  color: var(--gold);
  font-weight: 300;
  transition: transform 0.25s var(--ease-out);
  flex: none;
}

details[open] summary::after {
  transform: rotate(45deg);
  color: var(--gold2);
}

details .accordion-body {
  padding: 0 0 20px !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: var(--t1) !important;
}

/* ---- PROCESS TRAIL UPGRADE ------------------------------------ */

.process-trail {
  position: relative;
}

.process-step {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  transition: all 0.35s var(--ease-out) !important;
  position: relative;
  overflow: hidden;
}

.process-step::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--gold-rgb),.04), transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s;
}

.process-step:hover {
  border-color: var(--line-bright) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-sm), var(--shadow-gold) !important;
}

.process-step:hover::before {
  opacity: 1;
}

/* ---- PAGER UPGRADE -------------------------------------------- */

.pager {
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
}

.pager a {
  transition: all 0.3s var(--ease-out) !important;
  padding: clamp(20px, 3vw, 32px) !important;
}

.pager a:hover {
  background: rgba(var(--gold-rgb), 0.04) !important;
}

.pager a:hover .pager-label {
  color: var(--gold2) !important;
  transform: translateX(4px) !important;
}

/* ---- BREADCRUMBS UPGRADE -------------------------------------- */

.crumbs {
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--t5) !important;
  font-weight: 600 !important;
}

.crumbs a {
  color: var(--muted) !important;
  transition: color 0.2s !important;
}

.crumbs a:hover {
  color: var(--gold2) !important;
}

/* ---- TRUST STRIP PREMIUM ------------------------------------- */

.enq-trust-item {
  background: rgba(var(--bg2-rgb), 0.7) !important;
  backdrop-filter: blur(12px) !important;
  border-radius: var(--radius) !important;
  transition: all 0.3s var(--ease-out) !important;
}

.enq-trust-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-sm), var(--shadow-gold) !important;
}

.enq-trust-val {
  font-family: var(--serif) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
}

/* ---- ENQUIRE SEAL BADGES ------------------------------------- */

.enq-seal {
  background: rgba(var(--bg2-rgb), 0.6) !important;
  backdrop-filter: blur(8px) !important;
  border-radius: var(--radius) !important;
  transition: all 0.25s var(--ease-out) !important;
}

.enq-seal:hover {
  transform: translateX(4px) !important;
  border-color: var(--gold) !important;
}

/* ---- THEME DOCK — HIDDEN FOR CLIENTS -------------------------- */

/* Keep the theme dock but make it subtle; it's a tool for internal use */
.theme-dock {
  opacity: 0.35;
  transition: opacity 0.3s;
}

.theme-dock:hover {
  opacity: 1;
}

/* ---- SECTION SECTION-HEAD REFINEMENT -------------------------- */

/* Make the section blurb more readable */
.shead p,
.section-head p,
.section-head .blurb {
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: var(--t3) !important;
  max-width: 60ch !important;
  font-weight: 300 !important;
  margin-top: 14px !important;
}

/* ---- CONTACT PAGE CARDS -------------------------------------- */

/* Premium contact route cards */
.contact-routes .card,
section .cards.stagger .card {
  padding: clamp(24px, 3vw, 36px) !important;
}

.contact-routes .card h3,
section .cards.stagger .card h3 {
  font-family: var(--serif) !important;
  font-size: clamp(18px, 2vw, 24px) !important;
  font-weight: 500 !important;
  margin: 10px 0 12px !important;
  color: var(--text) !important;
}

.contact-routes .card .date,
section .cards.stagger .card .date {
  font-size: 9px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--gold2) !important;
  font-weight: 600 !important;
}

.contact-routes .card p,
section .cards.stagger .card p {
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: var(--t3) !important;
  font-weight: 300 !important;
}

/* ---- SCROLL CUE — PREMIUM ------------------------------------ */

.scroll-cue span {
  font-size: 8px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: rgba(var(--gold-rgb), 0.6) !important;
  font-weight: 600 !important;
}

/* ---- GLOBAL SECTION SPACING ---------------------------------- */

section {
  padding: clamp(52px, 8vw, 96px) 0 !important;
}

section.dark {
  padding: clamp(52px, 8vw, 96px) 0 !important;
}

/* Override for specific tight sections */
section.enq-trust-strip {
  padding: 28px 0 !important;
}

/* ---- LOADER UPGRADE ------------------------------------------ */

.loader-logo {
  font-family: var(--serif) !important;
  font-size: 38px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  color: var(--text) !important;
}

.loader-sub {
  color: var(--gold2) !important;
  letter-spacing: 0.3em !important;
}

/* ---- MISC POLISH --------------------------------------------- */

/* Goldline divider */
.goldline {
  height: 1px !important;
  background: var(--gradient-gold) !important;
  width: 48px !important;
  margin: 18px 0 22px !important;
  opacity: 0.7 !important;
}

/* Bio text */
.bio p {
  font-size: 14px !important;
  line-height: 1.9 !important;
  color: var(--t3) !important;
  font-weight: 300 !important;
}

/* Premium image treatment */
.portrait img,
.team-portrait img {
  filter: contrast(1.05) brightness(0.95) !important;
  transition: all 0.4s var(--ease-out) !important;
}

.portrait:hover img,
.team-portrait:hover img {
  filter: contrast(1.1) brightness(1.02) !important;
}

/* ---- RESPONSIVE OVERRIDES ------------------------------------ */

@media (max-width: 900px) {
  .phero {
    padding: 52px 0 44px !important;
  }
  section {
    padding: 44px 0 !important;
  }
  .formcard {
    padding: 28px 24px !important;
  }
  .cta-band, .ctaband {
    padding: 48px 0 !important;
  }
}

@media (max-width: 640px) {
  .phero h1 {
    font-size: clamp(34px, 9vw, 52px) !important;
  }
  .section-head h2,
  .shead h2 {
    font-size: clamp(26px, 7vw, 38px) !important;
  }
  .pull blockquote,
  .pull p {
    font-size: clamp(17px, 4.5vw, 22px) !important;
  }
  .phero-actions {
    flex-direction: column !important;
  }
  .phero-actions .btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ======================================================================== */
/* RESEARCH PAPERS — /insights/research-papers                              */
/* ======================================================================== */
/* A paper is a document, so the page borrows the conventions of one: a title
   block with a byline, a ruled abstract, numbered findings, and figures that
   carry their own caption. Everything is built from the site's own tokens, so
   the page reads correctly in emerald, teal, black and monochrome without
   holding a palette of its own. */

/* ---- hero art: the skewed distribution --------------------------------- */
.hk-bars rect{fill:rgba(var(--text-rgb),.17);
  transform-box:fill-box;transform-origin:bottom;
  animation:hkBar 5.2s ease-in-out infinite;animation-delay:calc(var(--b,0) * -.42s)}
@keyframes hkBar{0%,100%{transform:scaleY(.9);opacity:.72}50%{transform:scaleY(1);opacity:1}}
/* The tail is where the argument is, so the last third of the bars is lit. */
.hk-bars rect:nth-child(n+23){fill:rgba(var(--gold-rgb),.42)}
.hk-cut path{stroke-width:1.2;stroke-dasharray:3 6}
.hk-cut circle{stroke-width:1.2;fill:rgba(var(--bg-rgb),.9)}
.hk-cut.is-median path{stroke:rgba(var(--text-rgb),.34)}
.hk-cut.is-median circle{stroke:rgba(var(--text-rgb),.45)}
.hk-cut.is-mean path{stroke:rgba(var(--gold-rgb),.62);stroke-dasharray:4 5}
.hk-cut.is-mean circle{stroke:var(--gold);filter:drop-shadow(0 0 7px rgba(var(--gold-rgb),.7));
  animation:haPulse 3.6s ease-in-out infinite}
.hart.is-skew .ha-node.is-tail{fill:var(--gold2)}

/* ---- the paper's title block ------------------------------------------- */
/* The section wrapper the paper sits in. Named paperpage, not rp: the rp-*
   namespace already belongs to the research-process component. */
.paperpage{padding:clamp(58px,6.2vw,86px) 0}
/* Every jump target on this page clears the sticky nav and sub-nav. The
   reference card carries an id of its own, so it needs this as much as the
   full paper sections do — without it the contents block lands the reader
   underneath the header they just scrolled past. */
.paperpage,#papers,.pap-ref{
  scroll-margin-top:calc(var(--nav-h) + var(--subnav-h, 0px) + 20px)}
.pap-head{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;
  padding-bottom:30px;border-bottom:1px solid var(--line)}
.pap-tagrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:18px}
.pap-badge{font:700 8.5px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;
  padding:6px 10px;border:1px solid transparent}
.pap-badge.is-desk{color:var(--bg);background:var(--gold);border-color:var(--gold)}
.pap-badge.is-ext{color:var(--t3);border-color:var(--l4);background:rgba(var(--text-rgb),.03)}
.pap-title{font:400 clamp(30px,4.2vw,54px)/1.08 var(--serif);margin:0;letter-spacing:-.01em}
.pap-sub{margin:12px 0 0;font:400 clamp(15px,1.7vw,19px)/1.5 var(--serif);
  color:var(--gold2);font-style:italic}
.pap-meta{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:9px 26px;align-items:center}
.pap-meta li{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted)}
.pap-meta i{display:grid;place-items:center;color:var(--gold);flex:none}
.pap-meta svg{width:13px;height:13px;margin:0}
.pap-head-side{display:flex;flex-direction:column;align-items:flex-end;gap:14px;flex:none}
.pap-jel{margin:0;font-size:10px;letter-spacing:.06em;color:var(--t5);text-align:right}
.pap-jel b{font:700 8.5px var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--t4);margin-right:6px}

/* The attribution line. It is deliberately loud enough to read before the
   abstract does: a paper written elsewhere has to be credited on the page,
   not only inside the PDF. */
.pap-attrib{display:flex;gap:12px;margin:20px 0 0;padding:14px 16px;
  border:1px solid color-mix(in srgb,var(--gold) 26%,transparent);
  background:rgba(var(--gold-rgb),.05);font-size:11.5px;line-height:1.7;color:var(--t1)}
.pap-attrib i{display:grid;place-items:center;color:var(--gold);flex:none}
.pap-attrib svg{width:15px;height:15px;margin:0}
.pap-attrib a{color:var(--gold2);border-bottom:1px solid var(--line);margin-left:5px}
.pap-attrib a:hover{border-bottom-color:var(--gold)}

/* ---- the one-line finding, then the abstract --------------------------- */
.pap-lead{margin:40px 0 0}
.pap-lead-line{margin:0;max-width:34ch;font:400 clamp(22px,2.9vw,36px)/1.3 var(--serif);
  color:var(--text);max-width:24ch}
@media(min-width:900px){.pap-lead-line{max-width:none;column-count:1;max-width:52ch}}

.pap-abstract{position:relative;margin:34px 0 0;padding:30px 34px 28px;
  border:1px solid var(--l2);background:linear-gradient(155deg,var(--bg2),var(--card))}
.pap-abstract:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--gold),transparent)}
.pap-abstract-mark{font:700 9px var(--sans);letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold2);margin-bottom:14px}
.pap-abstract p{margin:0;font-size:13.5px;line-height:1.88;color:var(--t1)}
.pap-keywords{margin:18px 0 0 !important;padding-top:14px;border-top:1px solid var(--l1);
  font-size:11px !important;line-height:1.7 !important;color:var(--t4) !important}
.pap-keywords b{font:700 8.5px var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--t3);margin-right:8px}

/* ---- the four findings -------------------------------------------------- */
.pap-finds{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:1px;background:var(--l2);
  border:1px solid var(--l2)}
.pap-finds li{display:grid;grid-template-columns:auto auto 1fr;gap:16px;align-items:start;
  padding:28px 30px;background:var(--bg);transition:background .4s var(--ease)}
.pap-finds li:hover{background:var(--card)}
.pap-find-n{font:400 13px/1 var(--num);color:var(--gold);padding-top:3px;
  font-variant-numeric:tabular-nums}
.pap-find-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);color:var(--gold2);flex:none}
.pap-find-ic svg{width:15px;height:15px;margin:0}
.pap-finds b{display:block;font:400 20px/1.3 var(--serif);color:var(--text);
  font-weight:400;margin-bottom:8px}
.pap-finds p{margin:0;font-size:12.5px;line-height:1.78;color:var(--muted)}

/* ---- the figure frame --------------------------------------------------- */
.pap-fig{margin:44px 0 0;border:1px solid var(--l2);background:var(--card)}
.pap-fig-head{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;justify-content:space-between;
  padding:22px 26px 18px;border-bottom:1px solid var(--l1)}
.pap-fig-head h3{margin:0;font:400 20px/1.25 var(--serif);color:var(--text)}
.pap-fig-head span{font:700 8.5px var(--sans);letter-spacing:.17em;text-transform:uppercase;
  color:var(--t5)}
.pap-fig-body{padding:26px}
.pap-fig-note{padding:0 26px 22px;font-size:11.5px;line-height:1.75;color:var(--t4);
  max-width:92ch}
.pap-figpair{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;align-items:start}
.pap-figpair .pap-fig{margin-top:44px}

/* ---- figure: the concentration curve ------------------------------------ */
.pap-curve svg{display:block;width:100%;height:auto;overflow:visible}
.pap-grid line{stroke:var(--l2);stroke-width:1}
.pap-grid line.is-peak{stroke:rgba(var(--gold-rgb),.4);stroke-dasharray:4 5}
.pap-ticks line{stroke:var(--l1);stroke-width:1;stroke-dasharray:2 8}
.pap-ax{fill:var(--t5);font:10px var(--num);text-anchor:end;font-variant-numeric:tabular-nums}
.pap-ax.is-x{text-anchor:middle}
.pap-ax.is-lab{text-anchor:middle;fill:var(--t4);font:700 9px var(--sans);
  letter-spacing:.17em;text-transform:uppercase}
.pap-curve-line{fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linejoin:round;
  stroke-linecap:round;filter:drop-shadow(0 0 7px rgba(var(--gold-rgb),.45))}
.pap-curve-area{opacity:0;transition:opacity 1.1s var(--ease) .5s}
/* The line draws itself once, on sight. data-drawn is set by research.js, so
   the figure is complete and readable if the script never runs. */
.pap-curve[data-drawn] .pap-curve-line{stroke-dasharray:1;stroke-dashoffset:1;
  animation:rpDraw 1.9s var(--ease) forwards}
.pap-curve[data-drawn] .pap-curve-area{opacity:1}
@keyframes rpDraw{to{stroke-dashoffset:0}}
.pap-mark-drop{stroke:rgba(var(--gold-rgb),.3);stroke-width:1;stroke-dasharray:2 5}
.pap-mark-dot{fill:var(--bg);stroke:var(--gold2);stroke-width:2.2;
  filter:drop-shadow(0 0 8px rgba(var(--gold2-rgb),.7))}
.pap-mark-lab{fill:var(--text);font:400 15px var(--serif)}
.pap-mark-sub{fill:var(--t4);font:10px var(--sans);letter-spacing:.04em}
.pap-curve-marks>g{opacity:0;animation:rpFade .7s var(--ease) forwards;
  animation-delay:calc(.9s + var(--b,0) * .22s)}
@keyframes rpFade{to{opacity:1}}
/* Without the script the marks must still be visible — they are the figure. */
.pap-curve:not([data-drawn]) .pap-curve-marks>g{opacity:1;animation:none}
.pap-curve:not([data-drawn]) .pap-curve-area{opacity:1;transition:none}

/* ---- figure: the multibagger census ------------------------------------- */
.pap-census{display:flex;flex-direction:column;gap:2px}
.pap-census-row{display:grid;grid-template-columns:58px 1fr 84px;gap:16px;align-items:center;
  padding:9px 0;transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--b,0) * .05s)}
.pap-census-th{font:400 15px/1 var(--num);color:var(--t1);text-align:right;
  font-variant-numeric:tabular-nums}
.pap-census-track{display:block;height:10px;background:var(--l1);position:relative;overflow:hidden}
.pap-census-fill{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  transition:width 1.1s var(--ease);transition-delay:calc(var(--b,0) * .06s)}
/* A hundred-baggers-and-rarer row is the point of the figure, so it changes
   colour rather than merely getting shorter. */
.pap-census-fill.is-rare{background:linear-gradient(90deg,var(--cyan),var(--green))}
.pap-census-n{display:flex;flex-direction:column;gap:2px;text-align:right}
.pap-census-n b{font:400 15px/1 var(--num);color:var(--text);font-variant-numeric:tabular-nums}
.pap-census-n em{font:700 8.5px var(--sans);letter-spacing:.14em;color:var(--t5);font-style:normal}

/* ---- figure: the survivorship split ------------------------------------- */
.pap-surv{display:flex;flex-direction:column;gap:3px}
.pap-surv-key{display:flex;flex-wrap:wrap;gap:8px 26px;margin-bottom:16px;
  font:700 9px var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--t4)}
.pap-surv-key span{display:flex;align-items:center;gap:8px}
.pap-surv-key i{width:12px;height:12px;flex:none}
.pap-surv-key i.is-free{background:var(--gold)}
.pap-surv-key i.is-surv{background:var(--l4)}
.pap-surv-row{display:grid;grid-template-columns:minmax(150px,1.1fr) 1fr 92px 64px;
  gap:18px;align-items:center;padding:11px 0;border-bottom:1px solid var(--l1);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--b,0) * .06s)}
.pap-surv-lab{font-size:12.5px;color:var(--t1)}
.pap-surv-track{position:relative;display:block;height:20px;background:var(--l1)}
.pap-surv-bar{position:absolute;left:0;top:0;height:100%;width:0;
  transition:width 1.1s var(--ease);transition-delay:calc(var(--b,0) * .07s)}
.pap-surv-bar.is-surv{background:var(--l4)}
.pap-surv-bar.is-free{height:10px;top:5px;
  background:linear-gradient(90deg,var(--gold),var(--gold2))}
.pap-surv-nums{display:flex;flex-direction:column;gap:2px;text-align:right}
.pap-surv-nums b{font:400 15px/1 var(--num);color:var(--text);font-variant-numeric:tabular-nums}
.pap-surv-nums s{font:11px var(--num);color:var(--t5);text-decoration:none;
  font-variant-numeric:tabular-nums}
.pap-surv-bias{font:700 10px var(--num);text-align:right;font-variant-numeric:tabular-nums}
/* "Over" means the survivor-only number flatters the market; "under" means it
   hides a loss. They are opposite errors and must not read the same. */
.pap-surv-bias.is-over{color:var(--gold2)}
.pap-surv-bias.is-under{color:var(--red)}
.pap-surv-median{display:grid;grid-template-columns:minmax(150px,1.1fr) auto 1fr 64px;
  gap:18px;align-items:baseline;margin-top:14px;padding:16px 18px;
  border:1px solid color-mix(in srgb,var(--gold) 24%,transparent);
  background:rgba(var(--gold-rgb),.05)}
.pap-surv-median>span:first-child{font:700 9px var(--sans);letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold2)}
.pap-surv-median b{font:400 26px/1 var(--num);color:var(--text)}
.pap-surv-median em{font-style:normal;font-size:11.5px;color:var(--t4)}

/* ---- figure: the horizon effect ----------------------------------------- */
.pap-horizon{display:flex;flex-direction:column}
.pap-horizon-head,.pap-horizon-row{display:grid;
  grid-template-columns:minmax(120px,1.2fr) 68px 1.1fr 1.1fr 78px;gap:16px;align-items:center}
.pap-horizon-head{padding-bottom:12px;border-bottom:1px solid var(--l2);
  font:700 8.5px var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--t5)}
.pap-horizon-head>span:nth-child(2),.pap-horizon-head>span:last-child{text-align:right}
.pap-horizon-row{padding:15px 0;border-bottom:1px solid var(--l1);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--b,0) * .07s)}
.pap-horizon-row:last-child{border-bottom:0}
.pap-horizon-band{font-size:12.5px;color:var(--t1)}
.pap-horizon-n{font:12px var(--num);color:var(--t4);text-align:right;
  font-variant-numeric:tabular-nums}
.pap-horizon-m{display:grid;grid-template-columns:1fr 46px;gap:10px;align-items:center}
.pap-horizon-m i{display:block;height:8px;width:0;background:var(--gold);
  transition:width 1.1s var(--ease);transition-delay:calc(var(--b,0) * .08s);
  box-shadow:0 0 10px rgba(var(--gold-rgb),.35)}
.pap-horizon-m.is-alt i{background:var(--cyan);box-shadow:0 0 10px rgba(var(--cyan-rgb),.35)}
.pap-horizon-m b{font:400 13px/1 var(--num);color:var(--text);text-align:right;
  font-variant-numeric:tabular-nums}
.pap-horizon-c{font:400 13px/1 var(--num);color:var(--gold2);text-align:right;
  font-variant-numeric:tabular-nums}

/* ---- figure: the named winners ------------------------------------------ */
.pap-leaders{display:flex;flex-direction:column}
.pap-leaders-head,.pap-leader{display:grid;
  grid-template-columns:34px minmax(150px,1.4fr) 84px 54px 60px minmax(140px,1fr);
  gap:14px;align-items:center}
.pap-leaders-head{padding-bottom:12px;border-bottom:1px solid var(--l2);
  font:700 8.5px var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--t5)}
.pap-leaders-head .num{text-align:right}
.pap-leader{padding:13px 0;border-bottom:1px solid var(--l1);
  transition:opacity .7s var(--ease),transform .7s var(--ease),background .3s;
  transition-delay:calc(var(--b,0) * .05s)}
.pap-leader:last-child{border-bottom:0}
.pap-leader:hover{background:rgba(var(--gold-rgb),.045)}
.pap-leader .num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--num)}
.pap-leader-rank{font:400 12px/1 var(--num);color:var(--t5)}
.pap-leader-name{font-size:13px;color:var(--text)}
.pap-leader-x{font-size:14px;color:var(--gold2)}
.pap-leader-y,.pap-leader-c{font-size:12.5px;color:var(--t1)}
.pap-leader-share{display:grid;grid-template-columns:1fr 44px;gap:10px;align-items:center}
.pap-leader-track{display:block;height:7px;background:var(--l1);position:relative;overflow:hidden}
.pap-leader-track b{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  transition:width 1.1s var(--ease);transition-delay:calc(var(--b,0) * .06s)}
.pap-leader-share em{font:400 12px/1 var(--num);color:var(--t1);font-style:normal;
  text-align:right;font-variant-numeric:tabular-nums}

/* ---- the reference paper ------------------------------------------------ */
.pap-ref{display:grid;grid-template-columns:1.05fr .95fr;gap:0;
  border:1px solid var(--l2);background:var(--card)}
.pap-ref-main{padding:34px 36px}
.pap-ref-main h3{margin:0;font:400 clamp(23px,2.6vw,32px)/1.18 var(--serif);color:var(--text)}
.pap-ref-by{margin:12px 0 0;font-size:11.5px;color:var(--gold2);letter-spacing:.02em}
.pap-ref-sum{margin:18px 0 0;font-size:13px;line-height:1.8;color:var(--t1)}
.pap-ref-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--l2);
  border:1px solid var(--l2);margin:24px 0 0}
.pap-ref-stats div{padding:16px 14px;background:var(--bg)}
.pap-ref-stats b{display:block;font:400 clamp(18px,2vw,24px)/1 var(--num);color:var(--gold2);
  font-variant-numeric:tabular-nums}
.pap-ref-stats span{display:block;margin-top:7px;font:700 8px var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--t5);line-height:1.5}
.pap-ref-act{margin:26px 0 0}
.pap-ref-side{border-left:1px solid var(--l2);background:var(--bg)}
.pap-ref-side .pap-finds{grid-template-columns:1fr;border:0;background:var(--l2)}
.pap-ref-side .pap-finds li{padding:22px 28px}
.pap-ref-side .pap-finds b{font-size:17px}

/* ---- the bridge into our own work --------------------------------------- */
.pap-bridge{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start;
  margin:40px 0 0;padding:36px 0 0;border-top:1px solid var(--line)}
.pap-bridge h3{margin:12px 0 0;font:400 clamp(24px,2.8vw,34px)/1.16 var(--serif);color:var(--text)}
.pap-bridge .prose p{font-size:13.5px;line-height:1.86}

/* ---- responsive --------------------------------------------------------- */
@media(max-width:1100px){
  .pap-figpair{grid-template-columns:1fr;gap:0}
  .pap-ref{grid-template-columns:1fr}
  .pap-ref-side{border-left:0;border-top:1px solid var(--l2)}
  .pap-bridge{grid-template-columns:1fr;gap:22px}
}
@media(max-width:900px){
  .pap-head{grid-template-columns:1fr;gap:26px;align-items:start}
  .pap-head-side{align-items:flex-start}
  .pap-jel{text-align:left}
  .pap-finds{grid-template-columns:1fr}
  .pap-leaders-head,.pap-leader{grid-template-columns:30px 1fr 74px minmax(110px,.9fr)}
  .pap-leader-y,.pap-leader-c,.pap-leaders-head>span:nth-child(4),
  .pap-leaders-head>span:nth-child(5){display:none}
  .pap-horizon-head,.pap-horizon-row{grid-template-columns:minmax(96px,1fr) 1fr 1fr 66px}
  .pap-horizon-n,.pap-horizon-head>span:nth-child(2){display:none}
  .pap-surv-row{grid-template-columns:minmax(120px,1fr) 1fr 74px 56px;gap:12px}
}
@media(max-width:720px){
  .pap-abstract{padding:24px 22px}
  .pap-ref-main{padding:26px 22px}
  .pap-ref-stats{grid-template-columns:repeat(2,1fr)}
  .pap-fig-body{padding:20px 16px}
  .pap-fig-head,.pap-fig-note{padding-left:18px;padding-right:18px}
  /* The curve carries labelled marks that do not survive being squeezed to a
     phone's width, so below this it scrolls at a readable size rather than
     shrinking into illegibility. */
  .pap-curve{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pap-curve svg{min-width:660px}
  .pap-surv-row{grid-template-columns:1fr 70px 52px;gap:10px}
  .pap-surv-track{display:none}
  .pap-surv-median{grid-template-columns:1fr auto;gap:10px}
  .pap-surv-median em{display:none}
}

/* Motion is decoration here; the figures are complete without it. */
@media(prefers-reduced-motion:reduce){
  .pap-curve[data-drawn] .pap-curve-line{animation:none;stroke-dashoffset:0}
  .pap-curve-marks>g{opacity:1;animation:none}
  .hk-bars rect,.hk-cut.is-mean circle{animation:none}
}

/* ---- the concentration curve's threshold reader ------------------------- */
.pap-read{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center;margin-top:22px;
  padding-top:20px;border-top:1px solid var(--l1)}
.pap-read-chips{display:flex;flex-wrap:wrap;gap:8px}
.pap-read-chip{white-space:nowrap}
.pap-read-out{margin:0;flex:1 1 320px;min-width:0;font-size:12.5px;line-height:1.8;
  color:var(--muted)}
.pap-read-out b{color:var(--gold2);font-weight:400;font-family:var(--num);
  font-variant-numeric:tabular-nums}
/* The chosen row is lit on the curve; a hovered one is previewed a step below
   it, so running along the chips reads as one figure being interrogated. */
.pap-curve-marks>g.is-hint .pap-mark-dot{stroke:var(--gold);r:7.5}
.pap-curve-marks>g.is-on .pap-mark-dot{stroke:var(--gold2);r:8;
  filter:drop-shadow(0 0 13px rgba(var(--gold2-rgb),.95))}
.pap-curve-marks>g.is-on .pap-mark-drop{stroke:rgba(var(--gold-rgb),.6);stroke-dasharray:none}
.pap-curve-marks>g.is-on .pap-mark-lab{fill:var(--gold2)}
.pap-curve-marks>g .pap-mark-dot{transition:r .3s var(--ease),stroke .3s var(--ease)}

/* ---- the contents block: one card per paper ----------------------------- */
/* Two cards, deliberately unlike each other. The desk's own paper carries a
   filled badge and a gold rule; a reference carries an outline. Each leads on
   its scope rather than its title, because "3,214 Indian companies since 1994"
   and "29,754 U.S. stocks since 1926" separate these two instantly and the
   titles do not. */
.pap-index{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:26px;align-items:stretch}
.pap-idx{position:relative;display:flex;flex-direction:column;
  padding:30px 32px 26px;border:1px solid var(--l2);background:var(--card);
  transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease)}
.pap-idx:before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px}
.pap-idx.is-desk:before{background:linear-gradient(90deg,var(--gold),var(--gold2),transparent)}
.pap-idx.is-ext:before{background:linear-gradient(90deg,var(--l5),transparent)}
.pap-idx:hover{border-color:var(--line-bright);background:var(--hover);transform:translateY(-3px)}
/* The title's link is stretched over the whole card, so the card is clickable
   without a second tab stop. The PDF link is lifted above that overlay so it
   stays a separate destination rather than being swallowed by it. */
.pap-idx-title a{color:inherit;display:block}
.pap-idx-title a:after{content:"";position:absolute;inset:0;z-index:1}
/* The focus ring is moved onto the card, since the link's own box is the
   title while its hit area is the whole card. Only where :has() can actually
   do that, though — dropping the link's own outline first and finding out the
   selector never matched would leave a keyboard user with no focus ring at
   all. */
.pap-idx-title a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@supports selector(:has(*)){
  .pap-idx-title a:focus-visible{outline:none}
  .pap-idx:has(.pap-idx-title a:focus-visible){outline:2px solid var(--gold);outline-offset:-3px}
}
.pap-idx-top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.pap-idx-n{font:700 8.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);padding:6px 9px;border:1px solid color-mix(in srgb,var(--gold) 34%,transparent);
  background:rgba(var(--gold-rgb),.07);white-space:nowrap}
.pap-idx.is-ext .pap-idx-n{color:var(--t3);border-color:var(--l4);background:rgba(var(--text-rgb),.03)}
.pap-idx-n.is-mark{display:inline-block}
.pap-idx-scope,.pap-scope{margin:0 0 12px;font:700 9px var(--sans);letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold2);line-height:1.8}
.pap-idx.is-ext .pap-idx-scope{color:var(--t3)}
.pap-idx-title{margin:0;font:400 clamp(21px,2.3vw,28px)/1.2 var(--serif);color:var(--text)}
.pap-idx:hover .pap-idx-title{color:var(--gold2)}
.pap-idx-by{margin:12px 0 0;font-size:12px;line-height:1.7;color:var(--t1)}
.pap-idx-by em{display:block;font-style:normal;font-size:11px;color:var(--t4);margin-top:2px}
.pap-idx-sum{margin:16px 0 0;font-size:12.5px;line-height:1.8;color:var(--muted)}
.pap-idx-meta{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;margin:18px 0 0;padding:0;
  font:700 8.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--t5)}
.pap-idx-meta li{display:flex;align-items:center;gap:14px}
.pap-idx-meta li+li:before{content:"";width:3px;height:3px;border-radius:50%;background:var(--l5)}
/* Pushed to the bottom so two cards of unequal length still line their
   actions up, which is what makes them read as a pair. */
.pap-idx-act{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;
  margin:22px 0 0;margin-top:auto;padding-top:18px;border-top:1px solid var(--l1)}
.pap-idx-go{font:700 9px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold2)}
.pap-idx-go:after{content:" ↓";letter-spacing:0}
.pap-idx:hover .pap-idx-go{color:var(--gold)}
.pap-idx-pdf{position:relative;z-index:2;font:700 9px var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--t4);border-bottom:1px solid var(--l4);padding-bottom:2px}
.pap-idx-pdf:hover{color:var(--gold2);border-bottom-color:var(--gold)}
.pap-idx-pdf:after{content:" ↗";letter-spacing:0}

/* The scope line under a paper's own title, and its stat band. */
.pap-scope{margin:14px 0 0}
.pap-stats{margin:34px 0 0}

@media(max-width:900px){
  .pap-index{grid-template-columns:1fr;gap:18px}
  .pap-idx{padding:24px 22px 22px}
}

/* ---- the chosen paper -------------------------------------------------- */
/* A hidden panel is hidden by the attribute, not by a class, so the state is
   legible in the DOM and to assistive tech. The rule is explicit because a
   <section> carries a display that would otherwise win over [hidden]. */
.paperpage[hidden]{display:none}
/* The card for the paper currently on screen. It reads as pressed rather than
   merely hovered, because on a two-card row the difference between "this is
   the one open" and "my pointer is here" has to survive the pointer leaving. */
.pap-idx.is-on{border-color:var(--line-bright);background:var(--hover)}
.pap-idx.is-on:before{height:3px}
.pap-idx.is-desk.is-on:before{background:linear-gradient(90deg,var(--gold),var(--gold2))}
.pap-idx.is-ext.is-on:before{background:linear-gradient(90deg,var(--l5),var(--t4))}
.pap-idx.is-on .pap-idx-title{color:var(--gold2)}
.pap-idx.is-on .pap-idx-go{color:var(--gold)}
/* "Showing on this page" replaces the downward cue: nothing to travel to. */
.pap-idx.is-on .pap-idx-go:after{content:" ●";font-size:7px;vertical-align:middle}

/* ---- an uploaded chart on a monthly note -------------------------------- */
/* The drawn motifs are SVG against palette tokens; this one is somebody's
   exported PNG. It gets the same frame and caption so it sits in the card the
   same way, and a ceiling on height so a tall export cannot push the note's
   own words off the card. */
.nart.is-img{margin:0;display:block}
.nart.is-img img{display:block;width:100%;height:auto;max-height:340px;
  object-fit:contain;object-position:center}

/* ---- admin: monthly notes ---------------------------------------------- */
/* The one thing in this console used every month, so the list reads as a
   publishing schedule — date first, newest marked — rather than as a table of
   records. Same field language as the rest of the console; only the layout
   differs, because a note has more fields than a holding has. */
.adm-notelist{margin:6px 0 4px;border-top:1px solid var(--l1)}
.adm-noterow{display:grid;gap:12px;align-items:center;padding:11px 0;
  border-bottom:1px solid var(--l1);
  grid-template-columns:86px minmax(0,1fr) auto auto auto auto}
.adm-notewhen{font:11.5px var(--num);color:var(--t4);font-variant-numeric:tabular-nums}
.adm-notetitle{font-size:13px;color:var(--text);overflow-wrap:anywhere}
.adm-noterow.is-latest .adm-notetitle{color:var(--gold2)}
.adm-notemeta{font-size:11px;color:var(--t5);white-space:nowrap}
.adm-notetag{font:700 8.5px var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--t3);border:1px solid var(--l3);padding:5px 8px;white-space:nowrap}
.adm-notetag.is-open{color:var(--gold2);border-color:color-mix(in srgb,var(--gold) 38%,transparent)}
.adm-notebtn{background:none;cursor:pointer;font:700 9px var(--sans);letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);padding:7px 11px;
  border:1px solid color-mix(in srgb,var(--text) 14%,transparent);transition:.3s var(--ease)}
.adm-notebtn:hover{border-color:var(--gold);color:var(--gold2)}
.adm-notebtn.is-del:hover{border-color:#e06a5a;color:#e06a5a}

.adm-noteform{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.adm-noteform .adm-field{max-width:none}
.adm-grid2,.adm-grid3{display:grid;gap:16px;margin:4px 0 2px}
.adm-grid2{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.adm-grid3{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.adm-noteform textarea{width:100%;resize:vertical}

/* The chart block is fenced off because it is the part of the form with a
   choice in it — everything above is simply fields to fill. */
.adm-chart{margin:20px 0 0;padding:20px 22px;border:1px solid var(--l2);
  background:rgba(var(--gold-rgb),.035)}
.adm-chart legend{padding:0 9px;font:700 9px var(--sans);letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold2)}
.adm-chart .adm-note{margin-top:0}
.adm-chartpick{display:flex;flex-wrap:wrap;gap:10px 22px;margin:14px 0 18px}
.adm-chartpick label{display:flex;align-items:center;gap:8px;font-size:12.5px;
  color:var(--t1);cursor:pointer;white-space:nowrap}
/* display:flex above would otherwise beat the hidden attribute, and these two
   are hidden for a reason: "keep the existing chart" is offered only when
   there is one, and the add button goes away while the form is open. */
.adm-chartpick label[hidden]{display:none}
.adm-actions[hidden]{display:none}
.adm-chartpick input{accent-color:var(--gold);cursor:pointer}
#admSeriesCount{color:var(--gold2)}

@media(max-width:760px){
  .adm-noterow{grid-template-columns:1fr auto auto;row-gap:6px}
  .adm-notewhen{order:1}
  .adm-notetag{order:2}
  .adm-notemeta{order:3}
  .adm-notetitle{order:4;grid-column:1/-1}
  .adm-notebtn{order:5}
}

/* ---- the monthly archive, once it has years in it ----------------------- */
/* Past the first eight, older notes are folded away. The checkbox is the
   state, so the fold works with no JavaScript; it is visually hidden rather
   than display:none so it stays focusable from the keyboard. */
.note-more{display:flex;justify-content:center;margin-top:26px}
.note-more-x{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.note-more label{cursor:pointer}
.note-more-x:focus-visible+label{outline:2px solid var(--gold);outline-offset:3px}
.note-more-shut{display:none}
.note-grid.has-older>[data-note]:nth-child(n+9){display:none}
.notes:has(.note-more-x:checked) .note-grid.has-older>[data-note]:nth-child(n+9){display:block}
.notes:has(.note-more-x:checked) .note-more-open{display:none}
.notes:has(.note-more-x:checked) .note-more-shut{display:inline}
/* Where :has() is unavailable the fold cannot be reopened, so nothing is
   folded in the first place — a reader must never be left with a button that
   does nothing and notes they cannot reach. */
@supports not selector(:has(*)){
  .note-grid.has-older>[data-note]:nth-child(n+9){display:block}
  .note-more{display:none}
}

/* ================================ why marathon, as an orbit ==============
   One claim at the centre, four movements circling it. A slot is rotated to
   its angle, pushed out along the radius, then rotated back so its label sits
   upright; the ring turns and every node counter-turns on the same clock, so a
   label can never end up on its head. --r is the radius and is the only thing
   the responsive rules below need to change. */
.worb{display:grid;justify-items:center;gap:30px}
.worb-stage{position:relative;width:min(560px,86vw);aspect-ratio:1;--r:min(210px,32vw)}

/* the ring the nodes travel */
.worb-track{position:absolute;inset:calc(50% - var(--r)) ;width:calc(var(--r) * 2);height:calc(var(--r) * 2);
  margin:auto;border-radius:50%;border:1px dashed color-mix(in srgb,var(--gold) 22%,transparent)}

/* the claim, held still */
.worb-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:min(210px,34vw);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  text-align:center;padding:18px;
  border:1px solid color-mix(in srgb,var(--gold) 46%,transparent);
  background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--gold) 17%,transparent),
    rgba(var(--bg2-rgb),.92) 62%,rgba(var(--deep-rgb),.95));
  box-shadow:0 0 54px color-mix(in srgb,var(--gold) 22%,transparent),
    inset 0 1px 0 rgba(var(--text-rgb),.06)}
.worb-core-t{font:400 clamp(20px,2.6vw,30px)/1.1 var(--serif);color:var(--text)}

/* the ring */
.worb-ring{position:absolute;inset:0;animation:worbSpin 64s linear infinite}
.worb-slot{position:absolute;left:50%;top:50%;width:0;height:0;
  transform:rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1))}
.worb-node{position:absolute;left:50%;top:50%;
  width:min(176px,27vw);aspect-ratio:1;margin:calc(min(176px,27vw) / -2) 0 0 calc(min(176px,27vw) / -2);
  border-radius:50%;display:grid;place-items:center;align-content:center;gap:7px;
  text-align:center;padding:16px;
  border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);
  background:linear-gradient(165deg,rgba(var(--bg2-rgb),.96),rgba(var(--deep-rgb),.82));
  box-shadow:0 18px 44px rgba(0,0,0,.42);
  animation:worbSpinBack 64s linear infinite;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease)}
.worb-n{font:400 11px var(--num);font-variant-numeric:tabular-nums;color:var(--gold2);
  letter-spacing:.1em}
.worb-cue{font:400 clamp(13px,1.5vw,17px)/1.25 var(--serif);color:var(--text)}

@keyframes worbSpin{to{transform:rotate(360deg)}}
@keyframes worbSpinBack{to{transform:rotate(-360deg)}}

/* Reading one node quietens the rest, and the ring holds still while it is read. */
@media(hover:hover){
  .worb-stage:hover .worb-ring,
  .worb-stage:hover .worb-node{animation-play-state:paused}
  .worb-stage:has(.worb-node:hover) .worb-node{filter:brightness(.6) saturate(.65);
    transition:filter .35s var(--ease)}
  .worb-stage:has(.worb-node:hover) .worb-node:hover{filter:none;
    border-color:color-mix(in srgb,var(--gold) 70%,transparent);
    box-shadow:0 18px 54px rgba(0,0,0,.5),0 0 34px color-mix(in srgb,var(--gold) 26%,transparent)}
}

/* The ring is a picture of the argument; this is the argument itself, and is
   what a screen reader, a printed page or a very small screen gets. */
.worb-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:10px 26px}
.worb-list li{font-size:12px;letter-spacing:.02em;color:var(--muted)}
.worb-list b{font:400 11px var(--num);color:var(--gold2);margin-right:6px}

/* The radius has to be interpolatable for the ring to be drawn inward, and a
   bare custom property is not — registering it as a length is what makes the
   assembly animatable at all. */
@property --r {
  syntax: "<length>";
  inherits: true;
  initial-value: 210px;
}

/* ---- the assembly ------------------------------------------------------
   Scrolling into the section shows the claim by itself; scrolling on pulls the
   four movements in from beyond the frame, and they are already turning as
   they land. The stage pins to the middle of the viewport for the length of
   the track so the whole sequence plays in one place instead of sliding past.

   Everything here is inside @supports: without scroll timelines the track has
   no height, the stage does not pin, and the ring is simply present and
   orbiting — which is the same design, minus the choreography. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .worb-scroll{
      height:300vh;
      view-timeline-name:--worb;
      view-timeline-axis:block;
    }
    .worb-stage{
      position:sticky;
      top:calc(50vh - min(280px,43vw));
      animation:worbDraw linear both;
      animation-timeline:--worb;
      /* Held wide for the first stretch: that is the beat where only the
         centre is on screen. */
      animation-range:cover 16% cover 62%;
    }
    @keyframes worbDraw{
      from{--r:135vw}
      to{--r:min(210px,32vw)}
    }

    /* The movements fade up as they come into frame rather than snapping on. */
    .worb-slot{
      animation:worbArrive linear both;
      animation-timeline:--worb;
      animation-range:cover 18% cover 44%;
    }
    @keyframes worbArrive{from{opacity:0}to{opacity:1}}

    /* The track the ring runs on is drawn only once there is a ring on it. */
    .worb-track{
      animation:worbArrive linear both;
      animation-timeline:--worb;
      animation-range:cover 40% cover 66%;
    }

    /* The claim settles first, alone. */
    .worb-core{
      animation:worbCore linear both;
      animation-timeline:--worb;
      animation-range:cover 4% cover 22%;
    }
    @keyframes worbCore{
      from{opacity:0;transform:translate(-50%,-50%) scale(.82)}
      to{opacity:1;transform:translate(-50%,-50%) scale(1)}
    }
  }
}

@media(max-width:620px){
  /* Below this the circle stops being readable, so the list carries it. */
  .worb-stage{display:none}
  .worb-list{flex-direction:column;align-items:flex-start;gap:12px}
  .worb-list li{font-size:14px;color:var(--t1)}
}

@media(prefers-reduced-motion:reduce){
  .worb-ring,.worb-node{animation:none}
}

/* ---------- why marathon — investment compass (home) --------------------
   A visual cue for the four coordinates of a single decision framework. The
   map brings the eye in; the adjacent ordered list carries the actual argument
   and therefore remains the source of truth for small screens and assistive
   technology. */
.wcomp{display:grid;grid-template-columns:minmax(300px,.86fr) minmax(0,1.14fr);
  gap:clamp(36px,6vw,86px);align-items:center;max-width:1080px;margin:2px auto 0}
.wcomp-visual{position:relative;width:min(100%,470px);justify-self:center;aspect-ratio:1;
  opacity:0;transform:scale(.94);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.wcomp.in .wcomp-visual{opacity:1;transform:none}
.wcomp-map{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wcomp-circle{fill:none;stroke:var(--gold);stroke-opacity:.16;stroke-width:1}
.wcomp-circle.is-outer{stroke-opacity:.26;stroke-dasharray:2 8}
.wcomp-circle.is-inner{stroke-opacity:.34;stroke-dasharray:3 5}
.wcomp-axis{fill:none;stroke:var(--gold);stroke-opacity:.12;stroke-width:1}
.wcomp-axis.is-diag{stroke-opacity:.07}
.wcomp-route{fill:none;stroke:var(--gold2);stroke-opacity:.72;stroke-width:1.25;
  stroke-dasharray:1230;stroke-dashoffset:1230;transition:stroke-dashoffset 2.1s .25s var(--ease)}
.wcomp.in .wcomp-route{stroke-dashoffset:0}
.wcomp-pole{position:absolute;left:50%;top:50%;translate:-50% -50%;width:116px;aspect-ratio:1;
  display:grid;place-content:center;text-align:center;border-radius:50%;z-index:1;
  background:radial-gradient(circle at 42% 36%,color-mix(in srgb,var(--gold) 24%,transparent),rgba(var(--bg2-rgb),.96) 70%);
  border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);box-shadow:0 0 42px color-mix(in srgb,var(--gold) 18%,transparent);
  color:var(--muted);font:700 8px/1.65 var(--sans);letter-spacing:.22em}
.wcomp-pole b{color:var(--gold2);font-size:11px;font-weight:700;letter-spacing:.14em}
.wcomp-pin{position:absolute;display:grid;gap:5px;min-width:112px;padding:8px 11px;
  background:color-mix(in srgb,var(--bg2) 90%,transparent);border:1px solid color-mix(in srgb,var(--gold) 28%,transparent);
  box-shadow:0 14px 30px rgba(0,0,0,.2);backdrop-filter:blur(7px)}
.wcomp-pin i{font:400 9px/1 var(--num);font-style:normal;letter-spacing:.1em;color:var(--gold2)}
.wcomp-pin b{font:400 14px/1.1 var(--serif);color:var(--text)}
.wcomp-pin:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--gold2);box-shadow:0 0 0 5px color-mix(in srgb,var(--gold) 13%,transparent)}
.wcomp-pin.is-0{top:1%;left:50%;translate:-50% 0}.wcomp-pin.is-0:after{left:50%;bottom:-22px;translate:-50% 0}
.wcomp-pin.is-1{right:0;top:28%;translate:0 -50%;text-align:right}.wcomp-pin.is-1:after{left:-22px;top:50%;translate:0 -50%}
.wcomp-pin.is-2{right:6%;bottom:19%;translate:0 50%;text-align:right}.wcomp-pin.is-2:after{left:-22px;top:50%;translate:0 -50%}
.wcomp-pin.is-3{bottom:1%;left:50%;translate:-50% 0}.wcomp-pin.is-3:after{left:50%;top:-22px;translate:-50% 0}
.wcomp-pin.is-4{left:0;top:54%;translate:0 -50%}.wcomp-pin.is-4:after{right:-22px;top:50%;translate:0 -50%}
/* With four propositions the map resolves into a diamond, with labels at the
   cardinal points — balanced on purpose, not a five-point map missing a node. */
.wcomp.is-four .wcomp-pin.is-0{top:2%;left:50%;translate:-50% 0}
.wcomp.is-four .wcomp-pin.is-1{right:0;top:50%;translate:0 -50%}
.wcomp.is-four .wcomp-pin.is-2{bottom:2%;left:50%;translate:-50% 0}
.wcomp.is-four .wcomp-pin.is-3{left:0;top:50%;translate:0 -50%}
.wcomp-copy{min-width:0}.wcomp-overline{margin:0 0 16px;font:700 8.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold2)}
.wcomp-list{margin:0;padding:0;list-style:none;border-top:1px solid color-mix(in srgb,var(--gold) 23%,transparent)}
.wcomp-item{position:relative;padding:17px 0 18px 48px;border-bottom:1px solid color-mix(in srgb,var(--gold) 18%,transparent);
  opacity:0;transform:translateX(18px);transition:opacity .7s var(--ease),transform .7s var(--ease),padding-left .35s var(--ease)}
.wcomp.in .wcomp-item{opacity:1;transform:none}.wcomp-item:before{content:"";position:absolute;left:0;top:22px;width:26px;height:1px;background:var(--gold);opacity:.65;transition:width .35s var(--ease)}
.wcomp-item:hover{padding-left:56px}.wcomp-item:hover:before{width:35px}
.wcomp-item-top{display:flex;align-items:baseline;gap:10px;min-width:0}.wcomp-no{font:400 10px var(--num);color:var(--gold2);letter-spacing:.08em}
.wcomp-lede{font:700 8px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--t4)}
.wcomp-metric{margin-left:auto;text-align:right;white-space:nowrap;font:400 16px/1 var(--num);color:var(--gold2)}
.wcomp-metric small{display:block;margin-top:4px;font:700 6.5px/1.35 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--t4);max-width:15ch;white-space:normal}
.wcomp-item h3{margin:9px 0 5px;font:400 clamp(18px,2vw,22px)/1.2 var(--serif);color:var(--text);text-wrap:balance}
.wcomp-item p{margin:0;max-width:58ch;font-size:12px;line-height:1.72;color:var(--muted)}
.wcomp-link{display:inline-flex;align-items:center;gap:9px;margin-top:22px;font:700 9px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--gold2);transition:gap .3s var(--ease)}
.wcomp-link:hover{gap:15px}.wcomp-link span{font-size:16px;font-weight:400;line-height:.5}
@media(max-width:860px){
  .wcomp{grid-template-columns:1fr;gap:38px}.wcomp-visual{width:min(440px,86vw)}.wcomp-copy{max-width:650px;margin:auto}
}
@media(max-width:560px){
  .wcomp{gap:31px}.wcomp-visual{width:min(390px,100%)}.wcomp-pin{min-width:auto;padding:6px 8px}.wcomp-pin b{font-size:12px}
  .wcomp-pin.is-1{right:0}.wcomp-pin.is-2{right:4%}.wcomp-pin.is-4{left:0}.wcomp.is-four .wcomp-pin.is-2{right:auto;bottom:2%}.wcomp-pole{width:92px;font-size:6.5px}.wcomp-pole b{font-size:9px}
  .wcomp-item{padding-left:38px}.wcomp-item:hover{padding-left:42px}.wcomp-item:before{width:19px}.wcomp-item:hover:before{width:23px}
  .wcomp-item p{font-size:12.5px}.wcomp-lede{font-size:7px}.wcomp-metric{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.wcomp-visual,.wcomp-item{transition:none}.wcomp-route{stroke-dasharray:none;stroke-dashoffset:0;transition:none}}

/* ---------- why marathon — the four pillars as one ring ------------------
   A square stage with the ring drawn in the middle and four labels pinned to
   the compass points around it. The labels are laid out by position rather
   than by rotation, so each one stays upright and reads normally — the sort of
   thing a rotating ring gets wrong.

   Sized in vw against a max, so the stage never outgrows a laptop viewport and
   never collapses so far that the ring stops being legible. */
.wring{display:grid;grid-template-columns:auto 1fr;align-items:center;
  gap:clamp(34px,5vw,72px);max-width:940px;margin:0 auto}
.wring-stage{position:relative;width:clamp(230px,26vw,310px);aspect-ratio:1;flex:none}
.wring-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* Segments arrive one after another, sweeping up out of the centre. */
.wring-seg{transform-origin:50% 50%;transform:scale(.84);opacity:0;
  transition:transform .8s var(--ease),opacity .6s var(--ease),fill-opacity .35s var(--ease);
  transition-delay:calc(var(--i) * .12s)}
.wring.in .wring-seg{transform:none;opacity:1}

/* The tagline sits in the hole. Inner radius is 126 of a 400 box, so 46% is
   comfortably inside the band with the counter-space left intact. */
.wring-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:46%;text-align:center;
  font:400 clamp(12.5px,1.25vw,15px)/1.42 var(--serif);color:var(--text);
  text-wrap:balance;pointer-events:none}

/* ---- the key ---- */
.wring-legend{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.wring-lab{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:14px;
  padding:15px 2px;border-bottom:1px solid color-mix(in srgb,var(--gold) 14%,transparent);
  opacity:0;transform:translateX(10px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:calc(var(--i) * .12s + .22s)}
.wring-lab:last-child{border-bottom:0}
.wring.in .wring-lab{opacity:1;transform:none}

/* The swatch carries the same weight as the segment it names, which is what
   makes the key legible without a line drawn between the two. */
.wring-lab i{width:13px;height:13px;border-radius:3px;background:var(--gold);flex:none}
.wring-lab.is-0 i{opacity:.92}
.wring-lab.is-1 i{opacity:.75}
.wring-lab.is-2 i{opacity:.58}
.wring-lab.is-3 i{opacity:.41}

.wring-n{font:400 11px var(--num);font-variant-numeric:tabular-nums;color:var(--gold2)}
.wring-lab b{font:400 clamp(19px,2.2vw,27px)/1.2 var(--serif);color:var(--text);font-weight:400}

/* Hovering a name dims every segment but its own, so the key and the ring
   explain each other. :has() is already the idiom base.css uses for the same
   job, and where it is unsupported the section simply does not respond. */
@media (hover:hover){
  .wring:has(.wring-lab:hover) .wring-seg{fill-opacity:.14}
  .wring:has(.wring-lab.is-0:hover) .wring-seg.is-0,
  .wring:has(.wring-lab.is-1:hover) .wring-seg.is-1,
  .wring:has(.wring-lab.is-2:hover) .wring-seg.is-2,
  .wring:has(.wring-lab.is-3:hover) .wring-seg.is-3{fill-opacity:1}
  .wring:has(.wring-lab:hover) .wring-lab:not(:hover) b{color:var(--t4)}
  .wring-lab b{transition:color .35s var(--ease)}
}

@media(max-width:760px){
  .wring{grid-template-columns:1fr;justify-items:center;gap:30px}
  .wring-stage{width:min(260px,64vw)}
  .wring-legend{width:100%;max-width:420px}
  .wring-lab b{font-size:19px}
}
@media(prefers-reduced-motion:reduce){
  .wring-seg,.wring-lab{transition:none}
}

/* ---------- why marathon — a figure per claim (home) ---------------------
   Two across rather than four, so each figure gets width enough to be read as
   a drawing rather than as an icon. The figure sits at the top of the panel
   and the type underneath it: the picture makes the point, the number proves
   it, the line names it. */
.wshow{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px}

.wshow-one{position:relative;display:flex;flex-direction:column;
  padding:26px 28px 28px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:linear-gradient(168deg,var(--card),var(--bg2));
  opacity:0;transform:translateY(20px);
  transition:opacity .75s var(--ease),transform .75s var(--ease),border-color .45s var(--ease)}
.wshow.in .wshow-one{opacity:1;transform:none}

/* The figure gets its own recessed plate so it reads as a diagram rather than
   as decoration floating on the card. */
.wshow-fig{margin:0 0 22px;padding:10px 12px;border-radius:var(--radius-sm);
  background:radial-gradient(120% 140% at 50% 0%,
    color-mix(in srgb,var(--gold) 7%,transparent), transparent 70%),
    rgba(var(--deep-rgb),.45);
  border:1px solid color-mix(in srgb,var(--gold) 12%,transparent)}
.wshow-fig svg{display:block;width:100%;height:auto}

/* The line drawings arrive by drawing themselves, once, when the row reveals.
   Anything that cannot animate simply appears already drawn. */
.wshow-fig path[stroke]{stroke-dasharray:1400;stroke-dashoffset:1400;
  transition:stroke-dashoffset 1.6s var(--ease)}
.wshow.in .wshow-fig path[stroke]{stroke-dashoffset:0}
.wshow-fig path[stroke-dasharray="3 4"],
.wshow-fig path[stroke-dasharray="4 5"]{stroke-dasharray:3 4;stroke-dashoffset:0}

.wshow-head{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.wshow-n{font:400 11px var(--num);font-variant-numeric:tabular-nums;color:var(--gold2)}
.wshow-kicker{font:700 8.5px/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--t4)}

.wshow-metric{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.wshow-metric b{font:400 clamp(34px,3.4vw,44px)/1 var(--num);
  font-variant-numeric:tabular-nums;color:var(--gold2)}
.wshow-metric > span{font:700 8.5px/1.6 var(--sans);letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted)}

.wshow-t{margin:auto 0 0;font:400 clamp(17px,1.8vw,20px)/1.35 var(--serif);
  color:var(--text);text-wrap:balance}

@media(max-width:820px){
  .wshow{grid-template-columns:1fr;gap:16px}
  .wshow-one{padding:22px 22px 24px}
}
@media(prefers-reduced-motion:reduce){
  .wshow-fig path[stroke]{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
}

/* ---------- why marathon — the proof band (home) -------------------------
   Four figures in a row, divided by hairlines rather than boxed. Boxes would
   read as four separate things; these are four parts of one argument, and the
   rule between them is enough to keep them apart.

   The figure is set as large as the column allows, because it is the only
   element here doing work at a glance. Everything under it is support. */
.wband{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0}

.wband-one{position:relative;padding:4px 30px 0;
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.wband.in .wband-one{opacity:1;transform:none}
.wband-one:first-child{padding-left:0}
.wband-one:last-child{padding-right:0}
/* The divider sits on the left of every item but the first, so it never
   trails off the end of the row. */
.wband-one + .wband-one:before{content:"";position:absolute;left:0;top:6px;bottom:6px;
  width:1px;background:color-mix(in srgb,var(--gold) 20%,transparent)}

.wband-fig{display:block;font:400 clamp(46px,5.6vw,74px)/1 var(--num);
  font-variant-numeric:tabular-nums;color:var(--gold2);letter-spacing:-.015em}

.wband-label{display:block;margin-top:14px;
  font:700 8.5px/1.65 var(--sans);letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted)}

.wband-line{margin:16px 0 0;font:400 16px/1.5 var(--serif);color:var(--t1);
  text-wrap:balance;max-width:30ch}

@media(max-width:1000px){
  .wband{grid-template-columns:repeat(2,1fr);row-gap:44px}
  .wband-one{padding:4px 26px 0}
  .wband-one:nth-child(odd){padding-left:0}
  .wband-one:nth-child(even){padding-right:0}
  /* At two across the divider belongs between the columns, not before every
     item — the third card starts a new row and must not carry one. */
  .wband-one + .wband-one:before{display:none}
  .wband-one:nth-child(even):before{content:"";display:block;position:absolute;
    left:0;top:6px;bottom:6px;width:1px;
    background:color-mix(in srgb,var(--gold) 20%,transparent)}
}
@media(max-width:620px){
  .wband{grid-template-columns:1fr;row-gap:38px}
  .wband-one,.wband-one:nth-child(odd),.wband-one:nth-child(even){padding:0}
  .wband-one:nth-child(even):before{display:none}
  .wband-line{max-width:none}
}

/* ---------- why marathon — the four claims -------------------------------
   Replaces the orbit. Four cards, each running figure → claim → evidence →
   difference, which is the order a prospect comparing mandates asks for them.

   Flex column rather than grid rows: the figures sit at the top so they line
   up across the row on their own, and margin-top:auto on the closing line
   pins all four to the same baseline however much the titles above them wrap.

   Nothing here is interactive, so nothing here has a hover state — a card
   that lights up under the cursor promises a click that does not exist. */
.wedg{display:grid;gap:26px}
.wedg-intro{max-width:70ch;margin:0;font-size:13.5px;line-height:1.85;color:var(--muted)}

.wedg-row{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch}

.wedg-one{position:relative;display:flex;flex-direction:column;
  padding:24px 22px 20px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:linear-gradient(168deg,var(--card),var(--bg2));
  opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.wedg.in .wedg-one{opacity:1;transform:none}

/* The rail fills downward as the row arrives, walking the eye into the card
   instead of dropping it in. It inherits the stagger already on the card. */
.wedg-rail{position:absolute;left:0;top:0;bottom:0;width:2px;overflow:hidden;
  border-radius:var(--radius-sm) 0 0 var(--radius-sm);
  background:color-mix(in srgb,var(--gold) 14%,transparent)}
.wedg-rail:after{content:"";position:absolute;inset:0;
  transform:scaleY(0);transform-origin:top;transition:transform .9s var(--ease);
  transition-delay:inherit;background:linear-gradient(180deg,var(--gold2),var(--gold))}
.wedg.in .wedg-one .wedg-rail:after{transform:scaleY(1)}

.wedg-head{display:flex;align-items:center;gap:9px;margin-bottom:18px}
.wedg-n{font:400 11px var(--num);font-variant-numeric:tabular-nums;color:var(--gold2)}
.wedg-kicker{font:700 8.5px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--t4)}

/* The figure leads because it is the only part that survives a skim. */
.wedg-fig{display:grid;gap:6px;margin-bottom:16px}
.wedg-fig b{font:400 clamp(38px,4.4vw,52px)/1 var(--num);
  font-variant-numeric:tabular-nums;color:var(--gold2)}
/* Direct child only. The animated figure is a <span class="num"> nested inside
   the <b>, so a plain `.wedg-fig span` caught it too and shrank every counted
   number to label size — which is why 0, 45 and 35 rendered tiny while the
   uncounted "20–25" came out full height. */
.wedg-fig > span{font:700 8.5px var(--sans);letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);line-height:1.65}

.wedg-t{margin:0 0 11px;font:400 clamp(17px,1.9vw,20px)/1.3 var(--serif);
  color:var(--text);text-wrap:balance}
.wedg-b{margin:0 0 18px;font-size:12.5px;line-height:1.8;color:var(--t1)}

.wedg-edge{margin:auto 0 0;padding-top:15px;font-size:11.5px;line-height:1.75;color:var(--muted);
  border-top:1px solid color-mix(in srgb,var(--gold) 15%,transparent)}
.wedg-edge span{display:block;margin-bottom:6px;
  font:700 8px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

@media(max-width:1080px){
  .wedg-row{grid-template-columns:repeat(2,1fr);gap:12px}
}
@media(max-width:640px){
  .wedg-row{grid-template-columns:1fr}
  .wedg-one{padding:22px 20px 18px}
  .wedg-fig b{font-size:42px}
  .wedg-b{font-size:13px}
}