/* ECOSYSTEM HQ — design system · Apple grammar · #FFFFFF + #000000 primary · #006AFF secondary */
/* 25 Oct 2026 — ONE TYPEFACE, SAN FRANCISCO (founder: "move the whole site to SF Pro").
   SF Pro's licence allows it only in mock-ups of apps for Apple's systems and forbids embedding it, so it is
   never served from here. Instead the stack asks for the system font: on iPhone, iPad and Mac that IS SF Pro
   (Text and Display, with Apple's own optical sizes and tracking). Everywhere else Inter, an open-source
   (SIL OFL) face drawn on the same principles, with its own optical sizes. A browser only downloads a web font
   it actually uses, so Apple devices never fetch Inter.
   ⚠️ No 'SF Pro' family names in the stack: on a Windows PC with a partial local install (the founder's has only
   SF Pro Display Bold) every weight rendered bold. -apple-system is the only correct way to ask for SF. */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..900&display=swap');
:root{--void:#ffffff;--panel:#f5f5f7;--line:#e5e5e7;--fg:#000000;--body:#424245;--mute:#6e6e73;--arc:#006AFF;--arc-ink:#0062EB;--arcdeep:#ffffff;
--ease:cubic-bezier(.65,0,.35,1);--serif:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif;--sans:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif;--ny:ui-serif,'New York',Georgia,'Times New Roman',serif;--mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--fg);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;font-optical-sizing:auto;text-rendering:optimizeLegibility}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:inherit}
/* nav */
nav{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:6px;height:64px}
/* 🔴 11 Sep 2026 — the nav mark is the circular E, not the wordmark. Done here in
   ONE shared file rather than in the <a> on twelve pages, so it cannot go stale
   on the one page somebody forgot. The wordmark text stays in the DOM at
   font-size:0 — invisible, still read by screen readers and still the link's
   accessible name. Inline data-URI, so there is no image file to forget to
   deploy (the D-1061 lesson). Colour is baked to #000 because currentColor
   cannot reach inside a background image. */
nav .logo{display:inline-block;width:26px;height:26px;margin-right:auto;flex:none;
 font-size:0;line-height:0;color:transparent;text-decoration:none;
 background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><g fill='none' stroke='%23000000' stroke-width='72' stroke-linecap='round' stroke-linejoin='round'><path d='M380 132A176 176 0 1 0 380 380'/><path d='M108 256H380'/></g></svg>") no-repeat center/contain;
 transition:opacity .3s var(--ease)}
nav .logo:hover{opacity:.55}
nav a.l{color:var(--mute);text-decoration:none;font-size:13px;font-weight:600;padding:8px 12px;border-radius:6px;transition:color .3s var(--ease)}
nav a.l:hover,nav a.l.on{color:var(--fg)}
nav a.cta{background:var(--arc);color:#fff;font-weight:700;font-size:13px;text-decoration:none;padding:10px 20px;border-radius:980px;margin-left:8px}
/* ── mobile nav ────────────────────────────────────────────────────────────
   🔴 17 Sep 2026 — this line used to be, in full:
        @media(max-width:760px){nav a.l{display:none}}
      The links were not collapsed into a menu. They were DELETED. On a phone
      there was no route to Community, Books, 1:1, Masterminds or Case Studies
      from any page on the site — only the logo and the CTA. Every brand funnels
      here and most of that traffic is a phone.
      Founder layout: burger left · logo centred · CTA right.                  */
.navtoggle{display:none;background:none;border:0;padding:8px;cursor:pointer;
  width:38px;height:38px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.navtoggle span{display:block;width:19px;height:1.5px;background:var(--fg);border-radius:2px;
  transition:transform .32s var(--ease),opacity .2s var(--ease)}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.navdrawer{position:fixed;left:0;right:0;top:64px;z-index:89;background:#fff;
  border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.09);
  max-height:0;overflow:hidden;transition:max-height .38s var(--ease);visibility:hidden}
.navdrawer.open{max-height:78vh;overflow-y:auto;visibility:visible}
.navdrawer a{display:block;padding:17px 22px;font-size:17px;font-weight:650;
  letter-spacing:-.015em;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line)}
.navdrawer a:last-child{border-bottom:0}
.navdrawer a.on{color:var(--arc-ink)}
.navscrim{position:fixed;inset:64px 0 0;z-index:88;background:rgba(0,0,0,.18);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.navscrim.open{opacity:1;pointer-events:auto}

@media(max-width:760px){
  nav a.l{display:none}
  nav .wrap{justify-content:center;position:relative;gap:0}
  nav .logo{margin-right:0}                 /* was margin-right:auto — that is what pushed it left */
  .navtoggle{display:flex;position:absolute;left:0;top:50%;transform:translateY(-50%)}
  nav a.cta{position:absolute;right:0;top:50%;transform:translateY(-50%);margin-left:0;
    padding:9px 17px;font-size:12.5px}
}
@media(min-width:761px){ .navdrawer,.navscrim{display:none} }
/* type */
.kick{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--arc-ink);font-weight:700}
h1{font-family:var(--sans);font-weight:700;font-size:clamp(36px,6.6vw,72px);line-height:1.04;letter-spacing:-.028em;margin:18px 0 22px}
h2{font-family:var(--sans);font-weight:700;font-size:clamp(24px,3.8vw,42px);line-height:1.1;letter-spacing:-.022em;margin:0 0 16px}
.lead{font-size:19px;color:var(--body);max-width:640px}
.sec{padding:96px 0;border-bottom:1px solid var(--line)}
.sec.alt{background:var(--panel)}
.hero{padding:120px 0 100px;position:relative;overflow:hidden}
.quote{font-size:clamp(22px,3vw,32px);font-weight:600;letter-spacing:-.015em;line-height:1.4;max-width:840px}
.quote b{color:var(--arc-ink);font-weight:700}
.mute{color:var(--mute)}
/* buttons */
.btn{display:inline-block;background:var(--arc);color:#fff;font-weight:700;font-size:15px;text-decoration:none;padding:16px 34px;border-radius:980px;margin:30px 12px 0 0;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(0,106,255,.28)}
.btn.ghost{background:transparent;color:var(--arc-ink);border:2px solid var(--arc)}
/* doors */
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:44px}
.door{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 20px;text-decoration:none;display:block;transition:border-color .4s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
.door:hover{border-color:var(--arc);transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.07)}
.door .step{font-size:11px;letter-spacing:.24em;color:var(--arc-ink);font-weight:700;text-transform:uppercase}
.door h3{font-family:var(--sans);font-weight:700;letter-spacing:-.015em;font-size:20px;margin:10px 0 8px}
.door p{font-size:13px;color:var(--mute);line-height:1.55}
.door .tagf{display:inline-block;margin-top:14px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#fff;background:var(--arc);border-radius:980px;padding:4px 11px}
.door .tagf.o{background:transparent;color:var(--mute);border:1px solid var(--line)}
/* ring */
.ring{position:absolute;right:-140px;top:50%;transform:translateY(-50%);width:520px;height:520px;opacity:.35;pointer-events:none}
.ring circle{fill:none;stroke:var(--arc);stroke-width:2;stroke-dasharray:1560;stroke-dashoffset:1560;animation:draw 2.2s var(--ease) .3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media(max-width:900px){.ring{display:none}}
/* reveal on scroll */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}
/* word cascade */
.cascade span{display:inline-block;opacity:0;transform:translateY(.5em);animation:word .9s var(--ease) forwards}
@keyframes word{to{opacity:1;transform:none}}
/* forms */
form.k{max-width:560px;margin-top:34px}
.f-step{display:none}.f-step.on{display:block;animation:stepin .7s var(--ease)}
@keyframes stepin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
label.q{display:block;font-weight:600;letter-spacing:-.01em;font-size:19px;margin:26px 0 12px}
input[type=text],input[type=email],textarea{width:100%;background:#fff;border:1px solid #d2d2d7;border-radius:12px;color:var(--fg);font:16px var(--sans);padding:15px 16px;outline:none;transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
input:focus,textarea:focus{border-color:var(--arc);box-shadow:0 0 0 3px rgba(0,106,255,.15)}
textarea{min-height:110px;resize:vertical}
.opt{display:block;width:100%;text-align:center;background:#fff;border:2px solid #d2d2d7;border-radius:12px;color:var(--fg);font:700 15px var(--sans);padding:16px;margin:10px 0;cursor:pointer;transition:border-color .35s var(--ease),background .35s var(--ease)}
.opt:hover{border-color:var(--arc)}
.opt.sel{border-color:var(--arc);background:rgba(0,106,255,.06)}
button.btn{border:0;cursor:pointer;font-family:var(--sans)}
.f-note{font-size:12.5px;color:var(--mute);margin-top:14px}
.f-ok{display:none;border:1px solid var(--arc);background:rgba(0,106,255,.05);border-radius:16px;padding:28px;margin-top:30px}
.f-ok h3{font-weight:700;letter-spacing:-.015em;font-size:24px;margin-bottom:8px}
.f-err{display:none;color:#d92d20;font-size:13.5px;margin-top:12px}
/* long copy */
.script p{font-size:17.5px;color:var(--body);max-width:680px;margin:0 0 22px;line-height:1.75}
.script p.big{font-weight:600;letter-spacing:-.015em;font-size:clamp(20px,2.6vw,27px);color:var(--fg);line-height:1.5}
/* footer */
footer{padding:56px 0 72px;font-size:13px;color:var(--mute);background:var(--panel);border-top:1px solid var(--line)}
footer a{color:var(--body);text-decoration:none;margin-right:18px}
footer p{margin-top:20px}

/* ── the rest of the site, in the menu ─────────────────────────────────────
   The secondary pages (Roadmap, Firm, Media, Partner, Careers, Story) existed
   only in the footer. On desktop they now sit under "More"; on mobile they are
   a second group in the drawer. Both are built from the footer links at run
   time, so a page added to the footer appears in the menu with no code change. */
.navgrp{font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  color:var(--mute);padding:20px 22px 8px;border-bottom:1px solid var(--line)}
.navmore{position:relative}
.navmore>button{all:unset;color:var(--mute);font-size:13px;font-weight:600;padding:8px 12px;
  border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  transition:color .3s var(--ease)}
.navmore>button:hover,.navmore[data-open="1"]>button{color:var(--fg)}
.navmore>button::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px);
  transition:transform .3s var(--ease)}
.navmore[data-open="1"]>button::after{transform:rotate(225deg) translateY(-2px)}
.navmore .panel{position:absolute;top:calc(100% + 10px);right:0;min-width:186px;background:#fff;
  border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 38px rgba(0,0,0,.11);
  padding:7px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
.navmore[data-open="1"] .panel{opacity:1;visibility:visible;transform:translateY(0)}
.navmore .panel a{display:block;padding:10px 14px;border-radius:9px;font-size:13.5px;
  font-weight:600;color:var(--body);text-decoration:none;transition:.16s}
.navmore .panel a:hover{background:var(--panel);color:var(--fg)}
/* Three states, one link set:
     ≥1100px — all twelve links inline. Founder's call: everything visible, no
               menu to discover. Type and padding tighten so they fit the bar.
      761–1099 — the six secondary links collapse into the dropdown, because
               twelve plus a CTA overflow and an overflowing nav wraps to two
               rows and breaks the 64px bar.
      ≤760px — burger and drawer.                                             */
nav a.l2{display:none}
/* 25 Oct 2026 — the bar gained a profile icon and (on the shop pages) a cart, and the book pages' CTA is
   "Buy the book": at 1100–1359px the twelve inline links wrapped to two lines. Inline links now start at
   1360px, in a wider bar, and nothing in the bar may ever wrap. */
nav a.l,nav a.cta,.navmore>button{white-space:nowrap}
@media(min-width:1360px){
  nav a.l2{display:inline-block}
  .navmore{display:none}
  nav a.l{font-size:12.5px;padding:8px 9px}
  nav .wrap{gap:0;max-width:1260px}
}
@media(max-width:760px){ .navmore{display:none} }

/* ══════════════════════════════════════════════════════════════════════════
   DESIGN PASS — 17 September 2026
   Apple grammar: one type scale, one spacing rhythm, motion that is felt and
   not noticed. Written as a layer on top of the base so nothing above needs
   editing and any page can still override locally.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Fluid spacing. Every vertical gap on the site comes from this scale, so the
     page breathes the same way at 390px and at 1600px instead of snapping at a
     breakpoint. */
  --s1: clamp(6px, .6vw, 9px);
  --s2: clamp(12px, 1.2vw, 18px);
  --s3: clamp(20px, 2.2vw, 30px);
  --s4: clamp(32px, 3.6vw, 52px);
  --s5: clamp(52px, 6vw, 84px);
  --s6: clamp(76px, 9vw, 132px);
  --measure: 62ch;            /* ~62 characters is where reading speed peaks */
  --ease-out: cubic-bezier(.16,1,.3,1);     /* Apple's overshoot-free settle */
  --arcdeep:#0051c7;          /* was #ffffff — a white "deep" is a typo nobody
                                 noticed because nothing used it yet */
}

/* ── rhythm ───────────────────────────────────────────────────────────────
   The section rule is gone. Sixteen pages of full-width hairlines banded the
   whole site into stripes; separation now comes from space and from the panel
   tint, which is how the reference sites do it. A rule is kept only where two
   tinted sections touch, because there the space alone does not read. */
.sec{padding:var(--s6) 0;border-bottom:0}
.sec.alt{background:var(--panel)}
.sec.alt + .sec.alt{border-top:1px solid var(--line)}
.hero{padding:var(--s6) 0 var(--s5)}
.wrap{max-width:1120px;padding:0 clamp(20px,4vw,32px)}

/* ── type ─────────────────────────────────────────────────────────────────
   Tighter tracking as size goes up — large text set at body tracking always
   looks loose, and that single detail is most of what reads as "designed". */
h1{font-size:clamp(38px,6.2vw,76px);letter-spacing:-.035em;line-height:1.02;
   margin:var(--s2) 0 var(--s3);text-wrap:balance}
h2{font-size:clamp(26px,3.6vw,44px);letter-spacing:-.028em;line-height:1.08;
   margin:0 0 var(--s2);text-wrap:balance}
h3{letter-spacing:-.018em}
.kick{font-size:11px;letter-spacing:.28em;margin-bottom:var(--s2)}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6;max-width:var(--measure);
      text-wrap:pretty}
.quote{letter-spacing:-.022em;line-height:1.32;text-wrap:balance}
.script p{max-width:var(--measure);text-wrap:pretty}
::selection{background:rgba(0,106,255,.18)}

/* ── motion ───────────────────────────────────────────────────────────────
   Shorter and shallower than before: 28px over 1s reads as a page that is
   still loading. 16px over .7s reads as a page that is already there.        */
.rv{transform:translateY(16px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.rv.d1{transition-delay:.07s}.rv.d2{transition-delay:.14s}.rv.d3{transition-delay:.21s}
.rv.d4{transition-delay:.28s}.rv.d5{transition-delay:.35s}

/* 🔴 The reveal now only ARMS when JS says so. Before this, .rv started at
   opacity:0 in CSS and relied on JS to add .in — so any JS error before that
   line left every revealed element permanently invisible and the site looked
   blank with no error on screen. Today's `re` vs `_re` bug was one typo away
   from exactly that. Default is now visible; JS opts in. */
html:not(.anim) .rv{opacity:1;transform:none;transition:none}

/* ── focus ────────────────────────────────────────────────────────────────
   There was no focus style anywhere. A keyboard user could not see where they
   were on any page of the site. */
:where(a,button,input,textarea,.opt,summary):focus-visible{
  outline:2px solid var(--arc);outline-offset:3px;border-radius:6px}
:where(a,button):focus:not(:focus-visible){outline:none}

/* ── controls ─────────────────────────────────────────────────────────────
   Buttons get a press state. The lift on hover was there; the settle on click
   was missing, which is what makes a button feel like a physical thing.      */
.btn{margin:var(--s3) var(--s2) 0 0;padding:16px 32px;letter-spacing:-.01em;
     transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),background .3s var(--ease)}
.btn:active{transform:translateY(0) scale(.985);box-shadow:0 4px 14px rgba(0,106,255,.2)}
.btn.ghost:hover{background:rgba(0,106,255,.06);box-shadow:none}
nav a.cta{transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
nav a.cta:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,106,255,.26)}
nav a.cta:active{transform:translateY(0) scale(.98)}
.door:hover{box-shadow:0 14px 38px rgba(0,0,0,.08)}
.door:active{transform:translateY(-1px)}

/* ── the sticky nav was eating anchor targets ─────────────────────────────
   html{scroll-behavior:smooth} plus a 64px sticky bar means every in-page link
   lands with its heading hidden underneath the nav. */
html{scroll-padding-top:84px}

/* ── the ring ─────────────────────────────────────────────────────────────
   It drew once and stopped. Now it also breathes, very slightly, so the hero
   is never completely static — the one piece of ambient motion on the site. */
.ring{opacity:.28}
.ring circle{animation:draw 2.4s var(--ease-out) .2s forwards, float 14s ease-in-out 2.6s infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ── cascade ──────────────────────────────────────────────────────────────
   Per-word stagger was .07s, which at eight words is half a second of the
   headline assembling itself. Faster, and it lands as one movement.          */
.cascade span{animation-duration:.72s;animation-timing-function:var(--ease-out)}

/* ── forms ────────────────────────────────────────────────────────────────*/
label.q{font-size:clamp(17px,1.5vw,20px);margin:var(--s3) 0 var(--s2)}
.opt{transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease-out)}
.opt:active{transform:scale(.99)}

/* ── footer ───────────────────────────────────────────────────────────────*/
footer{padding:var(--s5) 0 var(--s5)}
footer .wrap{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3)}
footer a{margin-right:0;transition:color .25s var(--ease)}
footer a:hover{color:var(--fg)}
footer p{flex-basis:100%;margin-top:var(--s3)}

/* ── reduced motion ───────────────────────────────────────────────────────
   Required, and it was absent. Vestibular disorders are not rare and the ring
   float plus the cascade plus the reveals is a lot of movement on one screen. */
/* 4 Oct 2026 — founder: "the effects should always be on, no matter what."
   The prefers-reduced-motion override that stood here was removed on his call. */

/* ── plates ────────────────────────────────────────────────────────────────
   19 Sep 2026. Fifteen of seventeen pages had no image at all, which is the
   single reason the site read as unfinished. These are the founder's own
   hand-drawn plates from NEVER BLANK — already made, already his, and nobody
   else on the internet has them. Illustration beats stock photography here
   because it cannot be mistaken for a template. */
.plate{margin:var(--s4) 0;text-align:center}
.plate img{max-width:min(620px,100%);height:auto;display:block;margin:0 auto;
  border-radius:14px}
.plate figcaption{font-size:12.5px;color:var(--mute);margin-top:var(--s2);
  letter-spacing:.01em;max-width:52ch;margin-left:auto;margin-right:auto;line-height:1.6}
.plate figcaption b{color:var(--fg);font-weight:650}
@media(max-width:700px){.plate img{max-width:100%}}

/* ══════════════════════════════════════════════════════════════════════════
   DESIGN PASS 3 — 2 October 2026
   The surface treatment from the v2 build, kept. The ledger, dropped.

   🔴 NO FIGURES ANYWHERE IN THIS LAYER. Founder's call: the standard is
      stated on the homepage, the audit lives on The Firm. Nothing here
      renders a revenue number, an order count or a zero.
   ⚠️ Typography stays the system stack — "back to the original typography".
      What's kept from v2 is surface, depth, rhythm and hierarchy, not a font.
   ✅ #FFFFFF / #000000 / #006AFF untouched.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Half a degree of warmth. On a page this empty, flat #fff reads as an
     unstyled document; 2% warm reads as stock. */
  --paper:#FCFCFB;
  --panel-2:#F6F6F4;
  /* Tinted shadows. Pure black at low opacity is the most common tell that a
     page was never art-directed — real shadows carry the hue beneath them. */
  --sh-1:0 1px 2px rgba(16,24,40,.04), 0 10px 26px -8px rgba(16,24,40,.10);
  --sh-2:0 2px 4px rgba(16,24,40,.05), 0 22px 48px -14px rgba(16,24,40,.18);
  --sh-arc:0 8px 26px -9px rgba(0,106,255,.5);
}
body{background:var(--paper)}
.sec.alt{background:var(--panel-2)}

/* ── grain ────────────────────────────────────────────────────────────────
   Fixed, non-interactive, 3%. Invisible as texture, felt as material — it is
   what stops a white page reading as an unstyled document. */
/* 4 Oct 2026 — PERFORMANCE: this was an SVG turbulence filter, fixed over the
   whole viewport with mix-blend-mode:multiply. A blend mode on a full-screen
   fixed layer makes the browser re-blend every pixel of the page on every
   scroll frame — the single biggest cause of the lag the founder felt on his
   phone. Now: a 128px raster tile, plain opacity (composited once, no blend),
   and off entirely on touch screens, where 3% texture is invisible anyway. */
body::after{content:"";position:fixed;inset:0;z-index:999;pointer-events:none;
  opacity:.035;background:url("grain.png") repeat;background-size:128px}
@media (hover:none){body::after{display:none}}

/* ── type: the display end only ───────────────────────────────────────────
   Same typeface. Tracking tightens as size grows, which is most of what
   reads as "typeset" rather than "set in the default font". */
h1{letter-spacing:-.038em;line-height:1.0}
h2{letter-spacing:-.03em;line-height:1.06}
.quote{letter-spacing:-.024em;line-height:1.28}
.lead{text-wrap:pretty}
h1,h2,.quote{text-wrap:balance}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn{box-shadow:var(--sh-arc);letter-spacing:-.008em}
.btn:hover{box-shadow:0 14px 36px -9px rgba(0,106,255,.56)}
.btn.ghost{box-shadow:none;border-width:1.5px;color:var(--arcdeep)}
nav a.cta{box-shadow:var(--sh-arc)}

/* ── THE DOORS — the real fix on the homepage ─────────────────────────────
   🔴 Ten cards of identical weight told a visitor nothing about where to
      begin: the free roadmap and "Partner with us" looked equally important.
      All ten stay. Two of them now carry the page.
   Rank from size, order and tone — no "most popular" sticker, no new copy. */
.door{background:#fff;border-radius:20px;box-shadow:var(--sh-1);
  transition:border-color .22s var(--ease-out),transform .22s var(--ease-out),
             box-shadow .22s var(--ease-out)}
.door:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:#D8DCE0}
.door:active{transform:translateY(-1px)}
.door .tagf{border-radius:7px}              /* was a 980px pill on every tag */

@media(min-width:900px){
  .paths{grid-template-columns:repeat(6,1fr);gap:16px}
  .door{grid-column:span 2}
  .door:nth-child(1),.door:nth-child(2){grid-column:span 3;padding:34px 28px}
  .door:nth-child(1) h3,.door:nth-child(2) h3{font-size:27px;letter-spacing:-.025em}
  .door:nth-child(1) p,.door:nth-child(2) p{font-size:14.5px;max-width:42ch;color:var(--body)}
  .door:nth-child(1):hover,.door:nth-child(2):hover{border-color:var(--arc)}
  /* the back five, present and visibly secondary */
  .door:nth-child(n+6){background:transparent;border-color:#EDEDEA}
  .door:nth-child(n+6):hover{background:#fff}
  .door:nth-child(n+6) h3{font-size:18px}
}

/* ── spotlight edge on the two lead doors ─────────────────────────────────
   A 1px gradient border that lights under the cursor. Depth without another
   shadow. Degrades to nothing when JS or hover is absent. */
.door{position:relative;isolation:isolate}
.door:nth-child(-n+2)::before{content:"";position:absolute;inset:-1px;
  border-radius:inherit;padding:1px;opacity:0;z-index:-1;
  transition:opacity .3s var(--ease-out);
  background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),
    rgba(0,106,255,.5),transparent 68%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.door:nth-child(-n+2):hover::before{opacity:1}

/* ── the quote gets a room ────────────────────────────────────────────────
   It is the sharpest sentence on the site and it was a paragraph in a row of
   paragraphs. Panel, size, and silence around it. */
.sec:has(> .wrap > .quote){background:var(--panel-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ── nav: say which page you're on ────────────────────────────────────────
   style.css has carried `nav a.l.on` since the first build and nothing ever
   applied it. site.js now does. */
nav a.l.on{color:var(--fg);font-weight:600;position:relative}
nav a.l.on::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;
  height:1.5px;background:var(--arc);border-radius:2px}

/* ── plates ───────────────────────────────────────────────────────────────
   Hand-drawn, one of a kind, and sitting flat with a radius and nothing else. */
.plate img{box-shadow:var(--sh-1);background:#fff}

/* ── footer: it was a link farm ───────────────────────────────────────────
   Eleven links in one undifferentiated row. Legal and secondary recede. */
footer a[href*="privacy"],footer a[href*="careers"],footer a[href*="story"]{color:var(--mute)}

/* 4 Oct 2026 — founder: "the effects should always be on, no matter what."
   The prefers-reduced-motion override that stood here was removed on his call. */

/* ══════════════════════════════════════════════════════════════════════════
   PAGE COMPONENTS — promoted 2 October 2026
   The Firm · Mastermind · Group Sessions · Case Studies · Careers · Partner

   🔴 These six pages each carried a BYTE-IDENTICAL 2,186-character <style>
      block. Six copies of one component set, which meant six places to edit
      and six chances to forget one — the exact failure mode this codebase has
      already paid for with the nav links and the @arcohm handle.
      Defined once, here. The inline copies are deleted.
   Same components, same class names, same markup. Improved in one place.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── status badge ─────────────────────────────────────────────────────────
   Was a 980px pill — the generic "New / Beta" shape every template ships.
   Squared off, and the live state now reads as a state rather than a colour. */
.soon{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;color:var(--mute);border:1px solid var(--line);
  border-radius:6px;padding:5px 11px;margin-bottom:16px;background:#fff}
.soon.live{color:var(--arcdeep);border-color:rgba(0,106,255,.35);background:rgba(0,106,255,.05)}
.soon.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--arc)}

/* ── track cards ──────────────────────────────────────────────────────────
   The six Group tracks, the brands on The Firm, the Mastermind blocks.
   🔑 Status pinned to the bottom so it forms a clean line across the row
   regardless of how long the copy above it runs. */
.tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:14px;margin-top:var(--s4)}
.tk{border:1px solid var(--line);border-radius:18px;padding:26px 22px;background:#fff;
  display:flex;flex-direction:column;box-shadow:var(--sh-1);
  transition:border-color .22s var(--ease-out),transform .22s var(--ease-out),
             box-shadow .22s var(--ease-out)}
.tk:hover{border-color:#D8DCE0;transform:translateY(-3px);box-shadow:var(--sh-2)}
.tk .k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--arcdeep);
  font-weight:700}
.tk h3{font-size:20px;font-weight:650;letter-spacing:-.02em;margin:10px 0 8px}
.tk p{font-size:13.5px;color:var(--mute);line-height:1.6}
.tk .st{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute)}

/* ── empty state ──────────────────────────────────────────────────────────
   Case Studies is empty on purpose, so the empty state is a designed object
   rather than a dashed box apologising for itself. */
.empty{border:1px solid var(--line);background:var(--panel);border-radius:18px;
  padding:var(--s5) var(--s4);text-align:center;color:var(--mute);font-size:15.5px;
  margin-top:var(--s4);line-height:1.7;position:relative;overflow:hidden}
.empty::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(135deg,transparent 0 11px,rgba(10,11,12,.022) 11px 22px)}
.empty b{color:var(--fg);font-weight:650;display:block;font-size:19px;
  letter-spacing:-.02em;margin-bottom:10px;position:relative}
.empty > *{position:relative}

/* ── rows ─────────────────────────────────────────────────────────────────
   The levels on Mastermind, the structure on The Firm. */
.rows{margin-top:var(--s4)}
.row{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) 0;
  border-bottom:1px solid var(--line);transition:background .2s var(--ease-out)}
.row:first-child{border-top:1px solid var(--line)}
.row:hover{background:var(--panel)}
.row .lv{width:112px;flex:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);font-weight:700;padding-top:5px}
.row h3{font-size:18.5px;font-weight:650;letter-spacing:-.018em;margin-bottom:5px}
.row p{font-size:14px;color:var(--body);max-width:62ch;line-height:1.6}
@media(max-width:640px){
  .row{flex-direction:column;gap:var(--s1)}
  .row .lv{width:auto;padding-top:0}
}

/* ── boxes ────────────────────────────────────────────────────────────────
   Border + background + shadow all at once is the generic card. Tint only. */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(264px,1fr));
  gap:14px;margin-top:var(--s4)}
.bx{border:0;border-radius:18px;padding:26px 24px;background:var(--panel)}
.bx h3{font-size:17.5px;font-weight:650;margin-bottom:8px;letter-spacing:-.018em}
.bx p{font-size:14px;color:var(--body);line-height:1.65}

/* ── link pills ───────────────────────────────────────────────────────── */
.links{display:flex;flex-wrap:wrap;gap:9px;margin-top:var(--s4)}
.links a{border:1px solid var(--line);border-radius:999px;padding:11px 19px;
  text-decoration:none;font-size:13.5px;font-weight:600;color:var(--fg);background:#fff;
  transition:border-color .2s var(--ease-out),transform .2s var(--ease-out),
             box-shadow .2s var(--ease-out)}
.links a:hover{border-color:var(--arc);color:var(--arcdeep);transform:translateY(-2px);
  box-shadow:0 8px 20px -8px rgba(0,106,255,.3)}
.links a span{color:var(--mute);font-weight:400}

/* ══════════════════════════════════════════════════════════════════════════
   OFFER COMPONENTS — promoted 2 October 2026
   Books · Community · NEVER BLANK · Private 1:1

   🔴 Five more components were duplicated across four pages, and four of the
      five had DRIFTED: .price differed by 2px of margin, .faq by 4px, .qa by
      half a point of type, .who by 10px of grid and 2px of heading. Nobody
      chose those differences — they are what copy-paste does over time.
      One definition each, here.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the honest block ─────────────────────────────────────────────────────
   🔑 The brand's signature component — "here is what this is NOT". It appears
   on every page that asks for money, which is exactly right, and it was
   byte-identical on all four. More air and a slightly quieter rule, so it
   reads as an aside the reader trusts rather than a callout shouting. */
.honest{border-left:2px solid var(--arc);padding:4px 0 4px var(--s3);
  max-width:68ch;margin-top:var(--s4);background:linear-gradient(90deg,
  rgba(0,106,255,.035),transparent 62%)}
.honest p{font-size:16.5px;color:var(--body);line-height:1.72;text-wrap:pretty}
.honest p + p{margin-top:var(--s2)}
.honest p b{color:var(--fg);font-weight:650}

/* ── the price block ──────────────────────────────────────────────────────
   The one place on each page where money is named. Tinted rather than
   outlined: a 2px blue box around a number reads as a banner ad, a tinted
   panel with a hairline reads as a price. */
.price{border:1px solid rgba(0,106,255,.3);background:rgba(0,106,255,.035);
  border-radius:22px;padding:clamp(28px,4vw,44px);margin-top:var(--s4);
  max-width:620px}
.price .amt{font-size:clamp(42px,7vw,66px);font-weight:700;letter-spacing:-.042em;
  line-height:1;color:var(--fg)}
.price .amt small{font-size:19px;font-weight:600;color:var(--mute);letter-spacing:-.01em}
/* 18 Oct 2026 — restored. The 2 Oct consolidation moved .price here and dropped these five rules, so every
   price list (books, community, never-blank, private, buy) showed browser bullets with the ✓ over the text. */
.price .rule{font-size:14px;color:var(--body);margin-top:12px;padding-top:14px;border-top:1px solid var(--line)}
.price .rule b{color:var(--fg)}
.price ul{list-style:none;margin:20px 0 0;padding:0}
.price li{display:flex;gap:11px;padding:7px 0;font-size:15px;color:var(--body)}
.price li i{color:var(--arc-ink);font-style:normal;font-weight:900;flex:none}

/* ── FAQ ──────────────────────────────────────────────────────────────────
   Native disclosure behaviour, bigger hit target, and a marker that rotates
   rather than swapping glyph — one element moving beats two appearing. */
.faq{margin-top:var(--s4);max-width:800px}
.qa{border-bottom:1px solid var(--line)}
.qa:first-child{border-top:1px solid var(--line)}
.qa button{all:unset;display:flex;justify-content:space-between;align-items:center;
  gap:var(--s3);width:100%;box-sizing:border-box;padding:var(--s3) 0;
  font-size:17.5px;font-weight:650;letter-spacing:-.018em;cursor:pointer;
  color:var(--fg);transition:color .2s var(--ease-out)}
.qa button:hover{color:var(--arcdeep)}
.qa button::after{content:"";flex:none;width:9px;height:9px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .3s var(--ease-out)}
.qa.open button::after{transform:rotate(225deg) translateY(-2px)}

/* ── the audience grid ────────────────────────────────────────────────── */
.who{display:grid;grid-template-columns:repeat(auto-fit,minmax(296px,1fr));
  gap:var(--s4);margin-top:var(--s4)}
.who .k{font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--arcdeep);font-weight:700}
.who h3{font-size:clamp(22px,2.5vw,26px);font-weight:700;letter-spacing:-.024em;
  margin:10px 0 12px}

/* ── a form that follows the hero must not start below the fold ─────────────
   🔴 2 Oct 2026 — on The Roadmap, the free lead magnet and the top of the
      entire funnel, the first input sat ~162px below the paragraph on a phone:
      hero bottom padding + section top padding + form margin, stacked. The
      visitor saw a headline, a sentence and empty space, and had to scroll to
      find out there was anything to fill in.
   Collapsed only where the next section IS a form — content sections after a
   hero keep their full separation. :has() degrades to the old spacing in any
   browser that lacks it, so nothing can get worse. */
.hero:has(+ .sec form){padding-bottom:var(--s2)}
.hero + .sec:has(form){padding-top:0}
.hero + .sec:has(form) form.k{margin-top:var(--s2)}

/* ── hero → first section, on a phone ───────────────────────────────────────
   The hero's own bottom padding already separates it. Adding a full --s6 of
   section padding on top put ~170px of nothing between the lead paragraph and
   the first piece of content on every interior page — a whole thumb-scroll.
   On wide screens the vw-based scale keeps this proportionate, so it is only
   tightened where the screen is small. */
@media(max-width:760px){
  .hero + .sec{padding-top:var(--s4)}
  .hero{padding-bottom:var(--s4)}
}

/* ══════════════════════════════════════════════════════════════════════════
   MOTION PASS 4 · 4 Oct 2026
   Founder: "the website feels static". Everything before this moved ONCE, on
   arrival, then stopped. This pass adds movement that answers the visitor:
   scroll, pointer, and a little that simply breathes. Same rules as pass 3:
   every effect is gated on html.anim (set by site.js), so a JS failure leaves
   a plain readable page. (Reduced-motion opt-out removed 4 Oct — founder's call.)
   ══════════════════════════════════════════════════════════════════════════ */

/* reading progress — a hairline that fills as you scroll */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;pointer-events:none;
  background:var(--arc);transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* the hero breathes: a slow drifting light behind every hero */
.hero::before{content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(820px,140vw);height:min(820px,140vw);right:-22%;top:-38%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,106,255,.11),rgba(0,106,255,0));
  animation:drift 19s ease-in-out infinite alternate}
.hero > .wrap{position:relative;z-index:1}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-14%,10%,0) scale(1.16)}}
/* the ring follows the scroll a little slower than the page (parallax) */
html.anim .ring{transform:translateY(calc(-50% + var(--sy,0px)))}

/* headings wipe up into place instead of only fading */
html.anim h2.rv{clip-path:inset(0 0 100% 0);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out),clip-path .9s var(--ease-out)}
html.anim h2.rv.in{clip-path:inset(0 0 -12% 0)}

/* the kicker draws a short line in front of itself */
html.anim .kick.rv{display:flex;align-items:center;gap:10px}
html.anim .kick.rv::before{content:"";height:1px;width:0;background:currentColor;
  transition:width .8s var(--ease-out) .2s}
html.anim .kick.rv.in::before{width:28px}

/* anything marked live has a pulse — it is the one thing on the page that is running */
.soon.live::before{animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,106,255,.45)}
  70%,100%{box-shadow:0 0 0 7px rgba(0,106,255,0)}}

/* cards and doors tilt toward the pointer (values set by site.js). No permanent
   will-change: on a phone, a GPU layer per card is memory the page needs. */

/* ── ticker ── a slow line of words that never stops. Markup:
   <div class="ticker"><div class="tr"><span>Creator</span>…</div></div>
   site.js clones the row so the loop is seamless; without JS it is a static row. */
.ticker{overflow:hidden;white-space:nowrap;padding:var(--s3) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker .tr{display:inline-flex;align-items:center;gap:var(--s4);padding-right:var(--s4)}
.ticker span{font-size:clamp(24px,3.4vw,40px);font-weight:700;letter-spacing:-.03em;color:var(--fg)}
.ticker span:nth-child(even){color:var(--mute)}
.ticker span+span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--arc);margin-right:var(--s4);vertical-align:middle;transform:translateY(-2px)}
html.anim .ticker.go .tr{animation:tick var(--dur,38s) linear infinite}
.ticker:hover .tr{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-100%)}}

/* ── FAQ: answers actually collapse now ──
   🔴 4 Oct 2026 — the accordion never closed. Only the arrow rotated; there was
   no rule that hid an answer, so every answer was always on screen. Gated on
   html.anim: if site.js fails, every answer stays visible (fail-open). */
html.anim .qa .a{max-height:0;overflow:hidden;opacity:0;
  transition:max-height .45s var(--ease-out),opacity .3s var(--ease-out)}
html.anim .qa.open .a{max-height:1600px;opacity:1}
html.anim .qa .a > :last-child{padding-bottom:var(--s3)}

/* 4 Oct 2026 — founder: "the effects should always be on, no matter what."
   The prefers-reduced-motion override that stood here was removed on his call. */

/* ── photos ── real photos only (founder's own, people in them agreed).
   <div class="photos"><figure><div class="ph"><img …></div><figcaption>…</figcaption></figure>…</div> */
.photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s3);margin:var(--s4) 0}
.photos figure{margin:0}
.photos .ph{overflow:hidden;border-radius:18px;background:var(--panel);aspect-ratio:4/5}
.photos img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease-out)}
.photos figure:hover img{transform:scale(1.04)}
.photos figcaption{font-size:12.5px;color:var(--mute);margin-top:10px;line-height:1.5}

/* ══════════════════════════════════════════════════════════════════════════
   MOTION ENGINE 5 · 4 Oct 2026 — the styles motion.js relies on.
   Founder: "a $1B website… morphing, scroll effects… out of this world",
   and effects always on. html.m5 is set only once the engine has loaded, so
   everything under it disappears cleanly if the engine never arrives.
   ══════════════════════════════════════════════════════════════════════════ */

/* the light field — a WebGL canvas behind the hero, replacing the CSS glow */
.hero canvas.gl{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.hero.has-gl::before{display:none}

/* the ring → E morph */
.ring .bar{fill:none;stroke:var(--arc);stroke-width:2;stroke-linecap:round}
html.m5 .ring circle{stroke-linecap:round}
@media(max-width:900px){
  html.m5 .ring{display:block;width:340px;height:340px;right:-150px;top:58%}
}

/* smooth scroll (Lenis) */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}

/* masked line reveals — SplitText wraps each line in a mask */
html.m5 .ln-mask{padding-bottom:.08em;margin-bottom:-.08em}

/* images unmask */
.m-img{overflow:hidden;will-change:clip-path}
.m-img img{will-change:transform}
html.m5 .photos figure:hover img{transform:none}

/* rows: a line fills down the left as you read */
.m-rows{position:relative}
.m-rows::before{content:"";position:absolute;left:calc(-1 * clamp(10px,1.6vw,22px));top:0;bottom:0;width:2px;
  background:var(--arc);border-radius:2px;transform-origin:top;transform:scaleY(var(--rp,0))}

/* the rail */
.has-rail{overflow:hidden}
.has-rail .wrap{perspective:1600px}
.paths.hrail{display:flex;flex-wrap:nowrap;gap:22px;width:max-content;transform-style:preserve-3d}
.paths.hrail .door{width:330px;flex:none;min-height:240px}

/* spotlight on every card, not only the first two doors */
.door::before,.tk::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;opacity:0;
  z-index:-1;transition:opacity .3s var(--ease-out);pointer-events:none;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(0,106,255,.55),transparent 68%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.tk{position:relative;isolation:isolate}
.door:hover::before,.tk:hover::before{opacity:1}
.door::after,.tk::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  transition:opacity .35s var(--ease-out);
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(0,106,255,.07),transparent 70%)}
.door:hover::after,.tk:hover::after{opacity:1}

/* nightfall — the last section turns the site dark */
/* 4 Oct 2026 — PERFORMANCE: every text element used to animate its colour
   for .9s, which restyled the whole page on every frame of the change. Now the
   SURFACES fade (paint only) and the text flips once, at the midpoint, when
   the background is already halfway — readable in both directions. */
html.m5 body,html.m5 .sec,html.m5 footer,html.m5 .door,html.m5 .tk,html.m5 .empty{
  transition:background-color .7s var(--ease-out),border-color .7s var(--ease-out),
    box-shadow .7s var(--ease-out)}
/* Two beats (motion.js finale): .night-bg lands first and carries every
   SURFACE; .night follows ~300ms later and carries the INK. Leaving runs the
   same order, so text is never the same colour as what is behind it. */
html.night-bg{--void:#05070d;--panel:#0c1120;--panel-2:#0a0e1a;--line:rgba(255,255,255,.1)}
html.night{--fg:#ffffff;--body:#c3c8d6;--mute:#8e95a8;--arcdeep:#7fb0ff;--arc-ink:#5c9dff}
html.night-bg body{background:var(--void)}
html.night body{color:var(--body)}
html.night-bg nav{background:rgba(5,7,13,.72);border-color:var(--line)}
html.night-bg .door,html.night-bg .tk{background:var(--panel);box-shadow:none;border-color:var(--line)}
html.night-bg .sec.alt{background:var(--panel-2)}
html.night-bg footer{background:#03050a}
html.night-bg body::after{opacity:.06;filter:invert(1)}
html.night-bg .empty{background:var(--panel)}
/* every other surface that was hard-coded white — found after the founder saw
   white-on-white menu links on his phone, 4 Oct 2026 */
html.night-bg .navmore .panel{background:var(--panel);border-color:var(--line)}
html.night-bg .opt,html.night-bg input[type=text],html.night-bg input[type=email],
html.night-bg textarea{background:var(--panel);border-color:var(--line)}
html.night-bg .soon{background:transparent}
html.night-bg .links a{background:var(--panel)}
html.night-bg .door:hover{background:var(--panel)}
html.night-bg .cmdk-box{background:rgba(12,17,32,.92);border-color:var(--line)}

/* pages morph into each other (cross-document View Transitions —
   Chrome, Edge and Safari 18.2+; everything else just navigates) */
@view-transition{navigation:auto}
nav{view-transition-name:site-nav}
::view-transition-old(root){animation:vt-out .4s var(--ease-out) both}
::view-transition-new(root){animation:vt-in .75s var(--ease-out) both}
@keyframes vt-out{to{opacity:0;transform:scale(.985) translateY(-14px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(26px)}}
/* the ring, once motion.js owns it: no CSS transform (GSAP moves it), and the
   hero may let it travel below its own edge — sideways stays clipped */
html.m5 .ring.m-ring{transform:none;margin-top:-260px;opacity:.28;z-index:0}
html.m5 .hero{overflow-x:clip;overflow-y:visible}
@media(max-width:900px){html.m5 .ring.m-ring{margin-top:-170px}}

/* ══════════════════════════════════════════════════════════════════════════
   INTERFACE LAYER · 4 Oct 2026 — styles for interface.js
   Motion tokens first: everything new below derives from them, so the whole
   layer can be retimed from one place.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --motion-micro:.16s;       /* a press, a highlight */
  --motion-fast:.28s;        /* hover responses */
  --motion-standard:.5s;     /* panels, header */
  --motion-slow:.9s;         /* reveals, theme change */
  --motion-cinematic:1.6s;   /* hero, morphs */
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-emphasized:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-exit:cubic-bezier(.4,0,1,1);
  --z-nav:90;--z-overlay:1100;--z-skip:1200;
}

/* skip link — invisible until a keyboard reaches it */
.skip{position:fixed;left:16px;top:12px;z-index:var(--z-skip);padding:10px 16px;border-radius:10px;
  background:var(--fg);color:var(--void);font-weight:700;font-size:14px;text-decoration:none;
  transform:translateY(-160%);transition:transform var(--motion-fast) var(--ease-emphasized)}
.skip:focus{transform:none}
main:focus{outline:none}

/* the header as a material */
nav{transition:transform var(--motion-standard) var(--ease-emphasized),
  background-color var(--motion-slow) var(--ease-emphasized),box-shadow var(--motion-standard) var(--ease-standard),
  border-color var(--motion-slow)}
html.nav-scrolled nav{background:rgba(255,255,255,.72);backdrop-filter:saturate(1.8) blur(20px);
  -webkit-backdrop-filter:saturate(1.8) blur(20px);box-shadow:0 1px 0 rgba(0,0,0,.04),0 8px 30px -12px rgba(16,24,40,.12)}
html.nav-scrolled.night-bg nav{background:rgba(5,7,13,.6)}
html.nav-away nav{transform:translateY(-100%)}

/* one highlight that slides between the links */
body > nav .wrap{position:relative}
.navpill{position:absolute;left:0;top:50%;height:34px;margin-top:-17px;border-radius:9px;z-index:-1;
  background:rgba(0,106,255,.08);opacity:0;pointer-events:none;
  transition:transform var(--motion-standard) var(--ease-emphasized),width var(--motion-standard) var(--ease-emphasized),
    opacity var(--motion-fast) var(--ease-standard)}
.navpill.instant{transition:none}
html.night-bg .navpill{background:rgba(127,176,255,.14)}
html.has-navpill nav a.l.on::after{display:none}
html.has-navpill nav a.l.on{color:var(--arc-ink)}

/* the logo as an object */
nav .logo.has-svg{background:none}
nav .logo .lg{width:100%;height:100%;display:block;overflow:visible}
.lg path{fill:none;stroke:var(--fg);stroke-width:72;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:0}
html.anim .lg-arc{animation:lg-draw 1.1s var(--ease-emphasized) .15s both}
html.anim .lg-bar{animation:lg-draw .7s var(--ease-emphasized) .75s both}
@keyframes lg-draw{from{stroke-dashoffset:1}}
nav .logo:hover{opacity:1}
nav .logo:hover .lg{animation:lg-spin .9s var(--ease-emphasized)}
nav .logo:hover .lg-bar{animation:lg-draw .6s var(--ease-emphasized) .2s both}
@keyframes lg-spin{from{transform:rotate(-360deg)}}
nav .logo .lg{transform-origin:50% 50%}

/* command palette */
.cmdk-btn{all:unset;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px;margin:0 10px 0 6px;
  border:1px solid var(--line);border-radius:10px;color:var(--mute);cursor:pointer;font-size:12px;
  transition:border-color var(--motion-fast),color var(--motion-fast),background-color var(--motion-fast)}
.cmdk-btn:hover{color:var(--fg);border-color:rgba(0,106,255,.4);background:rgba(0,106,255,.04)}
.cmdk-btn:focus-visible{outline:2px solid var(--arc);outline-offset:2px}
.cmdk-btn svg,.cmdk-in svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cmdk kbd,.cmdk-btn kbd{font:600 11px var(--sans);padding:2px 6px;border-radius:6px;border:1px solid var(--line);
  background:var(--panel);color:var(--mute)}
@media(max-width:1180px){.cmdk-btn kbd{display:none}}
.cmdk{border:0;padding:0;margin:14vh auto 0;width:min(640px,calc(100vw - 32px));max-height:none;
  background:transparent;color:var(--fg);overflow:visible}
.cmdk::backdrop{background:rgba(8,12,24,.38);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cmdk[open]{animation:cmdk-in var(--motion-standard) var(--ease-emphasized)}
.cmdk[open]::backdrop{animation:cmdk-fade var(--motion-fast) var(--ease-standard)}
@keyframes cmdk-in{from{opacity:0;transform:translateY(-10px) scale(.97)}}
@keyframes cmdk-fade{from{opacity:0}}
.cmdk-box{background:rgba(255,255,255,.9);backdrop-filter:saturate(1.8) blur(24px);-webkit-backdrop-filter:saturate(1.8) blur(24px);
  border:1px solid rgba(0,0,0,.08);border-radius:18px;overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(8,12,24,.45),0 0 0 1px rgba(255,255,255,.6) inset}
.cmdk-in{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);color:var(--mute)}
.cmdk-in input{all:unset;flex:1;font-size:17px;color:var(--fg)}
.cmdk-in input::placeholder{color:var(--mute)}
.cmdk ul{list-style:none;max-height:min(56vh,440px);overflow:auto;padding:8px}
.cmdk li{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:12px;padding:11px 12px;border-radius:10px;cursor:pointer}
.cmdk li b{font-size:15px;font-weight:650;color:var(--fg);white-space:nowrap}
.cmdk li span{font-size:13px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk li i{font-style:normal;color:var(--arc-ink);opacity:0;transform:translateX(-4px);
  transition:opacity var(--motion-micro),transform var(--motion-fast) var(--ease-emphasized)}
.cmdk li[aria-selected="true"]{background:rgba(0,106,255,.08)}
.cmdk li[aria-selected="true"] i{opacity:1;transform:none}
.cmdk li.none{display:block;color:var(--mute);font-size:14px;cursor:default}
.cmdk-foot{display:flex;gap:18px;padding:10px 16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--mute)}
.cmdk-foot span:last-child{margin-left:auto}
@media(max-width:600px){.cmdk li{grid-template-columns:1fr auto}.cmdk li span{display:none}.cmdk-foot{display:none}}

/* ══════════════════════════════════════════════════════════════════════════
   THE PHONE MENU AS A MODE · 4 Oct 2026
   Founder, on his phone: in the dark ending the menu links could not be seen
   (white drawer, white ink). Rather than patch the colour, the menu now has
   its own material — deep navy, always — so it is legible over any page
   state, and opening it changes the interface's mode instead of dropping a
   list: a circle grows out of the button, the links rise in, and the actions
   sit at the bottom where a thumb reaches. Built on site.js's drawer (same
   links, same footer-driven list); interface.js adds the bottom actions.
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:760px){
  .navscrim{display:none}
  .navdrawer{top:0;bottom:0;height:100vh;height:100dvh;max-height:none!important;
    display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
    padding:calc(64px + 22px) 0 calc(22px + env(safe-area-inset-bottom));border:0;box-shadow:none;
    background:radial-gradient(120% 60% at 0% 0%,rgba(0,106,255,.30),transparent 62%),
               radial-gradient(90% 50% at 100% 100%,rgba(0,106,255,.14),transparent 70%),#05070d;
    visibility:hidden;clip-path:circle(0px at 40px 32px);
    transition:clip-path .55s var(--ease-exit),visibility 0s linear .55s}
  .navdrawer.open{visibility:visible;clip-path:circle(160vmax at 40px 32px);
    transition:clip-path .8s var(--ease-emphasized),visibility 0s}
  .navdrawer > a{color:#fff;border:0;padding:5px 24px;font-size:clamp(28px,8.6vw,38px);font-weight:700;
    letter-spacing:-.035em;line-height:1.12;opacity:0;transform:translateY(24px);
    transition:opacity .25s var(--ease-standard),transform .3s var(--ease-standard),color .2s}
  .navdrawer.open > a{opacity:1;transform:none;
    transition:opacity .6s var(--ease-emphasized),transform .7s var(--ease-emphasized),color .2s;
    transition-delay:calc(.14s + var(--i,0) * .04s)}
  .navdrawer > a:active{color:#7fb0ff}
  .navdrawer > a.on{color:#7fb0ff}
  .navdrawer > a.on::after{content:"";display:inline-block;width:8px;height:8px;margin-left:12px;
    border-radius:50%;background:var(--arc);vertical-align:middle;transform:translateY(-3px)}
  .navdrawer .navgrp{color:rgba(255,255,255,.42);border:0;padding:26px 24px 6px;opacity:0;
    transition:opacity .3s}
  .navdrawer.open .navgrp{opacity:1;transition:opacity .6s .32s}
  .navdrawer .navgrp ~ a{font-size:19px;font-weight:600;letter-spacing:-.015em;color:rgba(255,255,255,.7);padding:6px 24px}
  .navdrawer .navgrp ~ a.on{color:#7fb0ff}

  .navfoot{margin-top:auto;padding:30px 24px 0;display:grid;grid-template-columns:1fr auto;gap:12px;
    opacity:0;transform:translateY(18px);transition:opacity .25s,transform .3s}
  .navdrawer.open .navfoot{opacity:1;transform:none;
    transition:opacity .6s var(--ease-emphasized) .38s,transform .7s var(--ease-emphasized) .38s}
  .navfoot a.mcta{display:block;text-align:center;background:var(--arc);color:#fff;border-radius:14px;
    padding:16px 18px;font-size:16px;font-weight:700;text-decoration:none;
    box-shadow:0 12px 34px -10px rgba(0,106,255,.65)}
  .navfoot .msearch{all:unset;display:flex;align-items:center;justify-content:center;width:54px;
    border:1px solid rgba(255,255,255,.18);border-radius:14px;color:#fff;cursor:pointer}
  .navfoot .msearch svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .navfoot .msoc{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px 18px;padding-top:10px}
  .navfoot .msoc a{font-size:13px;color:rgba(255,255,255,.55);text-decoration:none;padding:6px 0;border:0}
  .navfoot a.mcta{border:0}

  /* the bar above the menu belongs to the menu while it is open */
  html.menu-open nav{background:transparent!important;border-color:transparent!important;
    box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transform:none!important}
  html.menu-open nav .navtoggle span{background:#fff}
  html.menu-open nav .lg path{stroke:#fff}
}

/* touch screens: things you press give way under your thumb */
@media (hover:none){
  .door,.tk,.btn,.opt,.links a,.cmdk-btn{-webkit-tap-highlight-color:transparent}
  .door:active,.tk:active{transform:scale(.975);transition:transform .12s var(--ease-standard)}
  .btn:active,nav a.cta:active{transform:scale(.96);transition:transform .1s var(--ease-standard)}
  html.nav-scrolled nav{-webkit-backdrop-filter:saturate(1.5) blur(12px);backdrop-filter:saturate(1.5) blur(12px)}
}

/* ══════════════════════════════════════════════════════════════════════════
   THE FIRM COMPONENTS · 4 Oct 2026 — reusable, but born on firm.html
   ══════════════════════════════════════════════════════════════════════════ */

/* .letter — a quiet, centred passage. The page slows down here on purpose. */
.letter{max-width:900px;margin:0 auto;text-align:center;padding:var(--s4) 0}
.letter .kick{justify-content:center}
.letter p{font-size:clamp(22px,2.7vw,34px);font-weight:600;letter-spacing:-.025em;line-height:1.3;
  color:var(--fg);margin:var(--s3) auto 0;max-width:24ch;text-wrap:balance}
.letter p b{font-weight:750;color:var(--fg)}
.letter p:last-child b{color:var(--arc-ink)}

/* beliefs: the card IS the quote */
.tk .bel{font-size:clamp(17px,1.6vw,19.5px);font-weight:600;letter-spacing:-.018em;line-height:1.42;
  color:var(--fg);margin-top:12px}

/* .dreams — huge lines that light up as they pass the middle of the screen */
.dreams{list-style:none;margin:var(--s4) 0}
.dreams li{font-size:clamp(30px,5.4vw,68px);font-weight:750;letter-spacing:-.045em;line-height:1.08;
  color:var(--fg);padding:.12em 0}
html.m5 .dreams[data-lightup] li{opacity:.16}

/* .orbit — the constellation. Without JS it is a plain list with the self under each name. */
.orbit{margin-top:var(--s4)}
.orbit ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.orbit li{border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-weight:650;font-size:15px;
  background:var(--void);color:var(--fg);cursor:default;
  transition:border-color var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast)}
.orbit li::after{content:attr(data-self);display:block;font-size:12.5px;font-weight:500;color:var(--mute);margin-top:3px}
.orbit-core{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin-bottom:var(--s3)}
.oc-name{font-size:clamp(22px,2.4vw,28px);font-weight:750;letter-spacing:-.03em;color:var(--fg)}
.oc-self{font-size:14.5px;color:var(--mute);max-width:30ch;line-height:1.45;min-height:2.9em}

/* the ring layout — switched on by motion.js where there is room */
.orbit.ring-on{position:relative;width:min(760px,100%);aspect-ratio:1;margin:var(--s4) auto 0}
.orbit.ring-on ul{display:block;position:absolute;inset:0}
.orbit.ring-on li{position:absolute;white-space:nowrap;border-radius:999px;padding:10px 18px;font-size:14.5px;
  box-shadow:var(--sh-1);cursor:pointer;z-index:2;translate:-50% -50%}
.orbit.ring-on li::after{display:none}
.orbit.ring-on li.on,.orbit.ring-on li:hover,.orbit.ring-on li:focus-visible{border-color:var(--arc);color:var(--arc-ink);
  box-shadow:0 10px 30px -10px rgba(0,106,255,.45)}
.orbit.ring-on .orbit-core{position:absolute;left:50%;top:50%;translate:-50% -50%;width:44%;margin:0;z-index:1}
.orbit.ring-on .orbit-core::before{content:"";position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;
  translate:-50% -50%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(0,106,255,.10),rgba(0,106,255,0))}
.orbit svg.olines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.olines line{stroke:var(--arc);stroke-width:.2;stroke-opacity:.35;stroke-dasharray:1;stroke-linecap:round;
  transition:stroke-opacity var(--motion-fast),stroke-width var(--motion-fast)}
.olines line.on{stroke-opacity:.95;stroke-width:.4}
.olines circle.oring{fill:none;stroke:var(--mute);stroke-opacity:.4;stroke-width:.15;stroke-dasharray:.4 .9}

/* ── The Firm, with the founder's own photos · 5 Oct 2026 ─────────────────── */
/* photos inside a timeline row */
.rows .row > div{min-width:0}      /* a row's text column may shrink below its photos' width */
.rows .rmedia{grid-template-columns:repeat(auto-fit,minmax(min(140px,42%),1fr));gap:12px;margin:var(--s3) 0 0;max-width:640px}
.rows .rmedia .ph{aspect-ratio:4/5;border-radius:14px}
.rows .rmedia figcaption{font-size:12px}
/* they arrive in black and white and develop into colour (motion.js) */
html.m5 .develop img{filter:grayscale(1) contrast(1.04)}

/* the family photo in the father section */
.letter .fam{margin:var(--s4) auto 0;max-width:460px}
.letter .fam .ph{border-radius:18px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--sh-2)}
.letter .fam img{width:100%;height:100%;object-fit:cover;display:block}
.letter .fam figcaption{font-size:12.5px;color:var(--mute);margin-top:10px}

/* a screenshot inside a proof box */
.bx .shot{display:block;width:100%;height:auto;margin-top:14px;border-radius:10px;border:1px solid var(--line)}

/* avatars in the constellation */
.orbit li{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.orbit li::after{flex-basis:100%}
.orbit .av{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line)}
.orbit.ring-on li{gap:8px;padding:7px 16px 7px 7px;flex-wrap:nowrap}
.orbit .oc-av{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--void);
  box-shadow:0 0 0 1px var(--line),0 12px 30px -10px rgba(0,106,255,.4);transition:opacity var(--motion-fast)}

/* the two Dubai photos side by side — equal heights: 4:3 and 1:1 columns */
.letter .fam2{display:grid;grid-template-columns:4fr 3fr;gap:12px;max-width:620px;margin:var(--s4) auto 0;align-items:start}
.letter .fam2 .fam{margin:0;max-width:none}
.letter .fam.sq .ph{aspect-ratio:1}

/* ── live numbers (.stats) — shared by index.html and media.html · 5 Oct 2026.
   Filled by interface.js liveNumbers() from /api/public/numbers; the HTML carries
   the last measured values so the block is never empty. ── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:12px;margin-top:var(--s4)}
.stat{border:1px solid var(--line);border-radius:20px;padding:26px 24px;background:var(--void);position:relative;overflow:hidden}
.stat .n{font-size:clamp(34px,4.6vw,56px);font-weight:750;letter-spacing:-.045em;line-height:1;color:var(--fg);font-variant-numeric:tabular-nums}
.stat .l{font-size:13px;font-weight:650;color:var(--fg);margin-top:10px}
.stat .d{font-size:12px;color:var(--mute);margin-top:4px}
.stamp{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mute);margin-top:var(--s3)}
.stamp::before{content:"";width:7px;height:7px;border-radius:50%;background:#1fbf6a;box-shadow:0 0 0 0 rgba(31,191,106,.5);animation:pulse-g 2.4s ease-out infinite}
@keyframes pulse-g{0%{box-shadow:0 0 0 0 rgba(31,191,106,.5)}70%,100%{box-shadow:0 0 0 8px rgba(31,191,106,0)}}
.stale{font-size:12.5px;color:var(--mute);margin-top:6px}

/* ══ 16 Oct 2026 — the grade dots (moved here from graded.html, now shared) and the public
   method pages (/methods, /methods/<n>-<slug>, rendered by webapp/site_methods.py). ══ */
.dot{width:17px;height:17px;border-radius:50%;flex:none;display:inline-grid;place-items:center;vertical-align:middle;font:800 11px/1 var(--sans);font-style:normal;color:rgba(0,0,0,.78);letter-spacing:0}
.g-s{background:#2ecc71}.g-p{background:#f1c40f}.g-e{background:#ff8c1a}.g-c{background:#e74c3c}
.mx-hero .kick a,.mx-jump a,.mx-legend a{color:var(--arc-ink);text-decoration:none}
.mx-meta,.mx-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;color:var(--body);font-size:15px;margin-top:18px}
.mx-meta>span:first-child{display:inline-flex;gap:4px}
.mx-legend span{display:inline-flex;align-items:center;gap:6px}
.mx-jump{margin-top:14px;font-size:15px;color:var(--mute);line-height:1.9}
.mx-sec{padding-top:48px}
.mx-cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start}
.mx-fig{margin:0;position:sticky;top:84px}
.mx-fig img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:18px;background:#fff}
.mx-fig figcaption{font-size:12.5px;color:var(--mute);margin-top:10px}
.mx-text p,.mx-text li{font-size:17px;line-height:1.65;color:var(--body)}
.mx-text ol,.mx-text ul{padding-left:20px;margin:0 0 12px}
.mx-text .kick{margin-bottom:10px}
.mx-grade{display:flex;gap:10px;align-items:flex-start}.mx-grade .dot{margin-top:4px}
.mx-small{font-size:14px}
.mx-src{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}.mx-src summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--mute);letter-spacing:.04em}.mx-src p{font-size:13.5px!important;color:var(--mute)!important;margin-top:8px}
.mx-small a{color:var(--arc-ink)}
.mx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.mx-card{display:flex;flex-direction:column;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;text-decoration:none;color:var(--fg);transition:border-color .3s var(--ease),transform .4s var(--ease)}
.mx-card:hover{border-color:var(--arc);transform:translateY(-2px)}
.mx-card b{font-size:16px;line-height:1.3}
.mx-card small{font-size:13.5px;color:var(--mute);line-height:1.45}
.mx-n{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--mute)}
.mx-pn{display:flex;justify-content:space-between;gap:16px;margin-top:32px;font-size:14px}
.mx-pn a{color:var(--arc-ink);text-decoration:none}
@media(max-width:900px){.mx-cols{grid-template-columns:1fr;gap:28px}.mx-fig{position:static}.mx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.mx-grid{grid-template-columns:1fr}.mx-pn{flex-direction:column}}

/* ══ THE SHOP — 18 Oct 2026 (site_shop.py). Sponsored is always visibly labelled. ══ */
.sh-preview{background:var(--arc);color:#fff;text-align:center;font-size:13px;font-weight:700;padding:8px 16px}
.sh-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.sh-chips{display:flex;gap:8px;flex-wrap:wrap}
.sh-chip{font-size:13px;font-weight:600;color:var(--body);text-decoration:none;border:1px solid var(--line);border-radius:980px;padding:7px 14px}
.sh-chip.on,.sh-chip:hover{border-color:var(--arc);color:var(--arc-ink)}
.sh-cartlink{font-size:14px;font-weight:700;color:var(--arc-ink);text-decoration:none}
.sh-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sh-card{display:block;text-decoration:none;color:var(--fg);border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--void);transition:border-color .3s var(--ease),transform .4s var(--ease)}
.sh-card:hover{border-color:var(--arc);transform:translateY(-3px)}
.sh-card img,.sh-noimg{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--panel)}
.sh-noimg.big{border-radius:18px}
.sh-meta{padding:14px 16px 18px;display:flex;flex-direction:column;gap:3px}
.sh-meta b{font-size:15.5px;letter-spacing:-.01em}.sh-meta small{color:var(--mute);font-size:13px}
.sh-price{font-weight:700;font-size:15px;margin-top:4px}.sh-price.big{font-size:28px;letter-spacing:-.02em}
.sh-spon,.sh-ole{align-self:flex-start;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;border-radius:980px;padding:3px 10px;margin-bottom:4px}
.sh-spon{color:var(--body);border:1px solid var(--mute)}
.sh-ole{color:#fff;background:var(--arc)}
.sh-back{display:inline-block;font-size:14px;color:var(--arc-ink);text-decoration:none;margin-bottom:22px}
.sh-prod{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start}
.sh-hero-img{width:100%;border-radius:18px;background:var(--panel)}
.sh-h1{font-size:clamp(28px,4vw,42px);letter-spacing:-.03em;line-height:1.1;margin:6px 0 12px;color:var(--fg)}
.sh-buy{display:flex;align-items:baseline;gap:10px;margin-top:18px}
.sh-olebox{margin-top:26px;border-left:3px solid var(--arc);padding:4px 0 4px 14px;color:var(--body)}
.sh-facts{margin-top:26px;display:grid;grid-template-columns:150px 1fr;gap:8px 16px;font-size:14px}
.sh-facts dt{color:var(--mute)}.sh-facts dd{margin:0;color:var(--body)}
.sh-body{margin-top:48px;max-width:720px}
.sh-cart{max-width:760px}
.sh-group{border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:14px}
.sh-group h3{font-size:14px;color:var(--mute);font-weight:700;margin-bottom:6px}
.sh-line{display:grid;grid-template-columns:1fr auto 90px;gap:12px;align-items:center;padding:7px 0;font-size:15px}
.sh-line b,.sh-line>span:last-child{text-align:right}
.sh-total{border-top:1px solid var(--line);margin-top:6px;padding-top:14px;font-weight:700}
.sh-qty{display:flex;align-items:center;gap:8px}
.sh-qty button{all:unset;cursor:pointer;width:26px;height:26px;border:1px solid var(--line);border-radius:50%;text-align:center;line-height:24px;color:var(--fg)}
.sh-terms{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--body);margin:20px 0 14px}
.sh-terms input{margin-top:4px}
#checkout{margin-top:24px}
.sh-list{margin:18px 0 0 18px;color:var(--body)}
.sh-portal .bx{margin-top:22px}
.sh-steps{list-style:none;margin:16px 0;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.sh-steps li{font-size:13px;font-weight:600;border:1px solid var(--line);border-radius:980px;padding:6px 12px;color:var(--mute)}
.sh-steps li.ok{border-color:var(--arc);color:var(--arc-ink)}
.sh-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.sh-form label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--mute)}
.sh-form select{font:16px var(--sans);padding:13px 12px;border:1px solid #d2d2d7;border-radius:12px;background:#fff}
.sh-order{border-top:1px solid var(--line);padding:12px 0;font-size:14px;color:var(--body)}
.sh-ship{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.sh-ship input{max-width:200px}.sh-ship .btn{margin:0;padding:12px 20px}
.sh-inl input{width:80px;padding:6px 8px}
.sh-st{font-weight:700}.sh-st.approved{color:var(--arc-ink)}.sh-st.rejected{color:#c00}
@media(max-width:900px){.sh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sh-prod{grid-template-columns:1fr;gap:26px}}
@media(max-width:560px){.sh-grid{grid-template-columns:1fr 1fr;gap:12px}.sh-form{grid-template-columns:1fr}.sh-facts{grid-template-columns:1fr;gap:2px}.sh-facts dd{margin-bottom:8px}.sh-line{grid-template-columns:1fr auto 70px}}

/* ══ THE CLIMB — the stages + the doors as a mountain (19 Oct 2026) ═══════════════════════════════
   Founder: "an ambitious man climbing a mountain … a man receiving more success, something in
   reward for his ambition". Markup from webapp/mountain.py. Desktop: cards stand on the ridge as a
   staircase, the SVG behind draws mountain + trail + sunrise; every camp's flag is bigger than the
   last; the summit figure has his arms up. Mobile: same story top-down, summit on top. */
.mtn{--mf1:#d6e0ef;--mf2:rgba(252,252,251,0);--mback:#e4e9f1;--mback2:rgba(252,252,251,0);--msnow:#ffffff;--msun:rgba(0,106,255,.18);
  position:relative;margin-top:var(--s5,64px)}
html.night .mtn{--mf1:#1a2846;--mf2:rgba(5,7,13,0);--mback:#121b31;--mback2:rgba(5,7,13,0);--msnow:#c7d4ea;--msun:rgba(0,106,255,.28)}
.mtn-art{position:absolute;left:0;right:0;top:0;width:100%;height:var(--h);pointer-events:none;overflow:visible;z-index:0}
.mtn-art .back{fill:url(#bk)}.mtn-hero .back{fill:var(--mback)}
.mtn-art .k0{stop-color:var(--mback)}.mtn-art .k1{stop-color:var(--mback2)}
.mtn-art .b0{stop-color:var(--mf1)}.mtn-art .b1{stop-color:var(--mf2)}
.mtn-hero .bodyh{fill:var(--mf1)}
.mtn-art .snow,.mtn-hero .snow{fill:var(--msnow)}
.mtn .s0{stop-color:var(--msun)}.mtn .s1{stop-color:rgba(0,106,255,0)}
.mtn-art .ray{stroke:var(--arc);stroke-width:1.2;opacity:.16;vector-effect:non-scaling-stroke}
.mtn-art .trail{fill:none;stroke:var(--arc);stroke-width:2.2;stroke-dasharray:1 8;stroke-linecap:round;opacity:.6;
  vector-effect:non-scaling-stroke}
.mtn .fig *{fill:none;stroke:var(--fg);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mtn .fig .hd{fill:var(--fg);stroke:none}
.mtn .fig .pk{fill:var(--arc);stroke:none}
.mtn .pole{fill:none;stroke:var(--fg);stroke-width:1.8;stroke-linecap:round}
.mtn .pen{fill:var(--arc)}
.mtn-steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:14px;height:var(--h)}
.mtn-steps>a{align-self:start;margin-top:var(--top);position:relative}
.mtn .mk{position:absolute;left:50%;bottom:calc(100% + 4px);width:calc(15px*var(--fs));height:calc(20px*var(--fs));
  margin-left:-2px;pointer-events:none}
.mtn .mk svg{display:block;width:100%;height:100%;overflow:visible}
.mtn .mk::after{content:"";position:absolute;left:-4px;bottom:-6px;width:8px;height:8px;border-radius:50%;
  background:var(--void);border:2px solid var(--arc)}
.mtn-fig{position:absolute;z-index:2;width:44px;height:53px;pointer-events:none}
.mtn-fig svg{width:100%;height:100%;overflow:visible}
.mtn-climber{left:calc(var(--x0) - 52px);top:calc(var(--y0) - 51px)}
.mtn-top{left:calc(var(--xn) + 28px);top:calc(var(--yn) - 53px)}
.mtn-here,.mtn-peak{position:absolute;z-index:2;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;
  color:var(--arc-ink);white-space:nowrap;pointer-events:none}
.mtn-here{left:calc(var(--x0) - 52px);top:calc(var(--y0) - 72px)}
.mtn-peak{left:calc(var(--xn) - 4px);top:calc(var(--yn) - 78px);transform:translateX(-50%)}
.mtn-hero,.mtn-start{display:none}
.mtn .mrung{background:var(--void);box-shadow:var(--sh-1)}
.mtn .mtn-steps .door{grid-column:auto;background:#fff;box-shadow:var(--sh-1);padding:20px 16px;min-height:0}
.mtn .mtn-steps .door h3{font-size:17px;margin:8px 0 6px}
.mtn .mtn-steps .door p{font-size:12.5px;color:var(--mute)}
.mtn .mtn-steps .door .tagf{font-size:11px;padding:3px 8px}
html.night .mtn .mtn-steps .door{background:var(--panel)}
.mtn-base-k{margin-top:var(--s4)}
.mtn-base{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:var(--s2)}
.mtn-base .door{grid-column:auto;padding:18px 16px;min-height:0}
.mtn-base .door h3{font-size:16px;margin:6px 0 4px}
.mtn-base .door p{font-size:12.5px}
@media(max-width:860px){.mtn-base{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:no-preference){
  .mtn.rv .trail{stroke-dashoffset:0}
  .mtn .mtn-climber svg{animation:mtnbob 3.2s var(--ease-out) infinite}
  .mtn .mtn-top svg{animation:mtnwave 2.6s ease-in-out infinite;transform-origin:50% 100%}
}
@keyframes mtnbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes mtnwave{0%,100%{transform:rotate(0)}50%{transform:rotate(-3deg)}}

/* the vertical climb: below the width where the staircase reads well */
@media(max-width:860px){.mtn-3{--mob:1}}
@media(max-width:1099px){.mtn-6{--mob:1}}
@media(max-width:860px){
  .mtn-3 .mtn-art,.mtn-3 .mtn-fig,.mtn-3 .mtn-here,.mtn-3 .mtn-peak{display:none}
  .mtn-3 .mtn-hero{display:block;width:100%;height:auto;max-width:420px;margin:0 auto 6px}
  .mtn-3 .mtn-steps{display:flex;flex-direction:column-reverse;height:auto;gap:14px;padding-left:40px}
  .mtn-3 .mtn-steps::before{content:"";position:absolute;left:13px;top:10px;bottom:30px;border-left:2px dotted rgba(0,106,255,.5)}
  .mtn-3 .mtn-steps>a{margin-top:0}
  .mtn-3 .mk{left:-34px;bottom:auto;top:12px;margin-left:0;width:calc(12px*var(--fs));height:calc(16px*var(--fs))}
  .mtn-3 .mtn-start{display:flex;align-items:center;gap:10px;margin-left:-40px;font-size:11px;letter-spacing:.2em;
    text-transform:uppercase;font-weight:800;color:var(--arc-ink)}
  .mtn-3 .mtn-start .fig{width:30px;height:36px;flex:none}
}
@media(max-width:1099px){
  .mtn-6 .mtn-art,.mtn-6 .mtn-fig,.mtn-6 .mtn-here,.mtn-6 .mtn-peak{display:none}
  .mtn-6 .mtn-hero{display:block;width:100%;height:auto;max-width:420px;margin:0 auto 6px}
  .mtn-6 .mtn-steps{display:flex;flex-direction:column-reverse;height:auto;gap:14px;padding-left:40px}
  .mtn-6 .mtn-steps::before{content:"";position:absolute;left:13px;top:10px;bottom:30px;border-left:2px dotted rgba(0,106,255,.5)}
  .mtn-6 .mtn-steps>a{margin-top:0}
  .mtn-6 .mk{left:-34px;bottom:auto;top:12px;margin-left:0;width:calc(12px*var(--fs));height:calc(16px*var(--fs))}
  .mtn-6 .mtn-start{display:flex;align-items:center;gap:10px;margin-left:-40px;font-size:11px;letter-spacing:.2em;
    text-transform:uppercase;font-weight:800;color:var(--arc-ink)}
  .mtn-6 .mtn-start .fig{width:30px;height:36px;flex:none}
  .mtn-6 .mtn-steps .door{padding:20px 18px}
  .mtn-6 .mtn-steps .door h3{font-size:19px}
  .mtn-6 .mtn-steps .door p{font-size:13.5px}
}

/* ══ 25 Oct 2026 — Apple HIG, applied to the web ═══════════════════════════════════════════════════════════
   · Buttons: "Always include a press state for a custom button" — every button scales down a touch on press.
   · Hit regions: "at least 44x44 pt" — the header's icons, the cart's and the guide's controls are 44 px.
   · Contrast: "up to 17 pts … 4.5:1" — secondary grey is Apple's own #6e6e73 (4.9:1 on white), not #86868b (3.5:1).
   · Reduce Motion: honoured below for every press. */
.btn,.pbuy,.smp-cta,.smp-now,.sm-buy,.ac-btn,.cart-go,.gd-fab,.gd-in button,.cart-btn,.me-btn,.cmdk-btn{-webkit-tap-highlight-color:transparent}
.btn:active,.pbuy:active,.smp-cta:active,.smp-now:active,.sm-buy:active,.ac-btn:active,.cart-go:active:not(:disabled),
.gd-fab:active,.gd-in button:active,.cart-btn:active,.me-btn:active,.cart-x:active,.gd-x:active,.ac-grid button:active,
.gd-sug button:active,.mx-save:active{transform:scale(.97);transition-duration:.08s}
.ac-fw .x{position:absolute}.ac-fw .x::after{content:"";position:absolute;inset:-8px}
@media(prefers-reduced-motion:reduce){
  .btn:active,.pbuy:active,.smp-cta:active,.smp-now:active,.sm-buy:active,.ac-btn:active,.cart-go:active,.gd-fab:active{transform:none}
}

/* ── Apple HIG pass 2 (26 Oct 2026, the Human Interface Guidelines read page by page) ──
   Accessibility: 44pt targets (28pt minimum), 11pt text floor, WCAG AA contrast (HIG's own table).
   Increase Contrast and Reduce Transparency are honoured, the way the system honours them in apps. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;accent-color:var(--arc)}
.navtoggle,.cmdk-btn{min-width:44px;min-height:44px;box-sizing:border-box;justify-content:center}
nav .logo{box-sizing:content-box;padding:9px;margin-block:-9px;margin-left:-9px}   /* the mark stays 26px; the tap area is 44 */
@media (min-width:861px){nav a.l{min-height:44px;line-height:28px}}
footer .wrap>a{display:inline-flex;align-items:center;min-height:32px}
.bk-rvsum,.bk-rvbtn,.cm-arena .book{display:inline-flex;align-items:center;min-height:44px}
input[type=radio],input[type=checkbox]{min-width:20px;min-height:20px}
blockquote,.quote,.rw-q{hanging-punctuation:first}
.sm-price,.rw-avgt,.amt{font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid rgba(0,98,235,.55);outline-offset:3px;border-radius:6px}
@media (prefers-contrast: more){
  :root{--body:#1d1d1f;--mute:#3a3a3c;--line:#8e8e93;--arc-ink:#0040a8}
  html.night{--body:#e6e8ee;--mute:#c7ccd8;--arc-ink:#8fbcff}
  a:not([class]){text-decoration:underline;text-underline-offset:.15em}
  .btn,.sm-buy,.rw-c,.rw-fc,.sm-card{border:1.5px solid currentColor}
}
@media (prefers-reduced-transparency: reduce){
  nav,html.nav-scrolled nav,.cmdk-box{background:var(--void)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}
footer .wrap>a{min-width:28px;justify-content:center}
.bk-rv .who small,.rw-who small{font-size:12px}

/* ── the store (26 Oct 2026, site_shop.py + store_engine.py): one shelf, quiet cards, the reason on every product ── */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.st-hero h1{max-width:12ch}
.st-arenas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:var(--s3)}
.gl{color:#000;background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border:1px solid rgba(255,255,255,.6);box-shadow:0 10px 30px -16px rgba(0,0,0,.3)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.gl{background:rgba(255,255,255,.95)}}
@media (prefers-reduced-transparency:reduce){.gl{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}
.st-at{position:relative;display:block;aspect-ratio:3/4;border-radius:20px;overflow:hidden;background:var(--panel);color:var(--fg);text-decoration:none}
.st-at img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:9% 18% 30%;box-sizing:border-box;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.18));transition:transform .5s var(--ease)}
.st-at:hover img{transform:scale(1.04)}
.st-at:focus-visible{outline:3px solid rgba(0,98,235,.45);outline-offset:2px}
.st-at-gl{position:absolute;left:8px;right:8px;bottom:8px;display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:12px}
.st-at-gl b{font-size:19px;letter-spacing:-.02em}
.st-at-gl em{font-style:normal;font-size:13px;line-height:1.4;color:#2a2a2e}
.st-at-gl small{font-size:11.5px;font-weight:600;color:#4a4a50}
.st-at.off{opacity:.55;pointer-events:none}
@media (prefers-reduced-motion:reduce){.st-at img{transition:none}}
.st-bar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--line)}
.st-bar h2{font-size:clamp(26px,3vw,36px);letter-spacing:-.03em;margin:0}
.st-bar h2 small,.sh-chip small{font-size:.5em;color:var(--mute);font-weight:600;letter-spacing:0;vertical-align:middle}
.sh-chip small{font-size:12px;margin-left:3px}
.st-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.st-search input,.st-sel select{font:500 15px var(--sans);height:44px;border:1px solid var(--line);border-radius:999px;background:var(--void);color:var(--fg);padding:0 18px}
.st-search input{width:min(320px,70vw)}
.st-sel select{padding-right:34px;cursor:pointer}
.st-search input:focus,.st-sel select:focus{outline:3px solid rgba(0,98,235,.35);outline-offset:1px;border-color:var(--arc)}
.st-chips{margin:18px 0 26px}
.st-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 22px}
.st-card{position:relative;display:flex;flex-direction:column;min-width:0}
.st-img{display:grid;place-items:center;aspect-ratio:4/5;border-radius:20px;background:var(--panel);overflow:hidden;padding:7% 17% 24%}
.st-img img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 22px rgba(0,0,0,.14));transition:transform .5s var(--ease)}
.st-card:hover .st-img img{transform:scale(1.03)}
.st-ph{font-size:56px;font-weight:800;color:#c7c7cc}
.st-ph.big{display:grid;place-items:center;aspect-ratio:1;border-radius:20px;background:var(--panel);font-size:120px}
.st-imgw{position:relative}
.st-add{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.6);color:var(--fg);
  background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  font:400 24px/1 var(--sans);box-shadow:0 4px 16px rgba(0,0,0,.12);cursor:pointer;transition:background .2s,color .2s,transform .2s}
@media (prefers-reduced-transparency:reduce){.st-add{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}
.st-add:hover{background:var(--arc);color:#fff}
.st-add:active{transform:scale(.92)}
.st-brand{display:block;margin-top:14px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);text-decoration:none}
a.st-brand:hover{color:var(--arc-ink)}
.st-card h3{font-size:17px;line-height:1.3;letter-spacing:-.015em;margin:6px 0 4px;font-weight:600}
.st-card h3 a{color:var(--fg);text-decoration:none}
.st-card h3 a:hover{color:var(--arc-ink)}
.st-purpose{font-size:14px;line-height:1.45;color:var(--body);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.st-foot{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:10px}
.st-price{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.st-ar{font-size:12px;color:var(--mute);text-align:right}
.st-na{display:inline-block;margin-top:8px;font-size:12px;font-weight:600;color:var(--body);background:var(--panel);border-radius:999px;padding:4px 10px}
.st-na.big{font-size:15px;border-radius:14px;padding:12px 16px;margin:18px 0 0}
.st-first{max-width:640px;margin-top:40px;color:var(--body);border-left:3px solid var(--arc);padding:2px 0 2px 16px}
.st-std{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px);align-items:start}
.st-q{list-style:none;counter-reset:q;margin:0;padding:0;display:grid;gap:4px}
.st-q li{counter-increment:q;display:grid;grid-template-columns:44px 1fr;gap:4px 10px;padding:16px 0;border-top:1px solid var(--line)}
.st-q li::before{content:counter(q,decimal-leading-zero);grid-row:span 2;font-size:13px;font-weight:700;color:var(--arc-ink);padding-top:3px}
.st-q b{font-size:18px;letter-spacing:-.01em}.st-q span{color:var(--body);font-size:15px}
.st-doc{max-width:760px}
.st-doc h2{font-size:clamp(24px,2.6vw,30px);letter-spacing:-.025em;margin:48px 0 12px}
.st-doc h2:first-child{margin-top:0}
.st-doc p,.st-doc li{color:var(--body);line-height:1.65}
.st-crit,.st-ev{list-style:none;padding:0;margin:16px 0;display:grid;gap:2px}
.st-crit li,.st-ev li{display:grid;grid-template-columns:minmax(0,220px) 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.st-crit b,.st-ev b{color:var(--fg)}
.st-brands{display:grid;gap:0;margin:20px 0 10px}
.st-brandrow{display:grid;grid-template-columns:minmax(0,220px) 1fr auto;gap:18px;align-items:baseline;padding:20px 0;border-top:1px solid var(--line);color:var(--fg);text-decoration:none}
.st-brandrow b{font-size:19px;letter-spacing:-.02em}.st-brandrow span{color:var(--body)}.st-brandrow small{color:var(--mute);font-size:13px}
.st-brandrow:hover b{color:var(--arc-ink)}
.st-supply{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.st-supply .btn{margin-top:0}
.st-buy{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.st-buy .btn{margin:18px 0 0}
.st-sel{font-size:13px;color:var(--mute);margin-top:18px}
.st-why{margin:56px 0 0;padding:clamp(24px,3vw,40px);border-radius:24px;background:var(--panel);max-width:860px}
.st-why p{font-size:clamp(18px,1.6vw,22px);line-height:1.55;color:var(--fg);margin:10px 0 0;letter-spacing:-.01em}
.st-detail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 50px;margin-top:48px;max-width:960px}
.st-detail h2,.st-h2{font-size:20px;letter-spacing:-.02em;margin:0 0 10px}
.st-h2{margin:64px 0 22px;font-size:clamp(22px,2.4vw,28px)}
.st-detail p{color:var(--body);line-height:1.6}
.st-evl{list-style:none;padding:0;margin:0}
.st-evl li{display:flex;flex-direction:column;gap:3px;padding:10px 0;border-top:1px solid var(--line)}
.st-evl span{font-size:13px;color:var(--mute)}
@media (max-width:1000px){.st-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.st-arenas{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .st-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}
  .st-arenas{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
  .st-arenas::-webkit-scrollbar{display:none}.st-at{scroll-snap-align:start}
  .st-img{padding:8% 14% 26%}
  .st-at-gl b{font-size:17px}
  .st-at-gl{padding:10px 12px}
  .st-std,.st-detail{grid-template-columns:minmax(0,1fr)}
  .st-crit li,.st-ev li{grid-template-columns:minmax(0,1fr);gap:4px}
  .st-brandrow{grid-template-columns:minmax(0,1fr);gap:4px}
  .st-card h3{font-size:15.5px}
  .st-purpose{font-size:13px}
  .st-foot{flex-direction:column;gap:2px}
  .st-ar{text-align:left}
  .st-add{width:40px;height:40px;right:8px;bottom:8px}
  .st-tools,.st-search,.st-search input{width:100%}
  .st-sel{flex:1}.st-sel select{width:100%}
}
table.sr{left:-10000px;top:auto}
/* ── the store, round 2 (26 Oct 2026): ORUS-studied filters, field notes, requests, help, brand + product detail ── */
.st-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:start;margin-top:22px}
.st-side{position:sticky;top:90px;background:var(--panel);border-radius:22px;padding:20px 18px}
.st-side summary{display:none}
.st-g{padding:4px 0 14px;border-bottom:1px solid var(--line);margin-bottom:12px}
.st-g:last-of-type{border-bottom:0}
.st-g h3{font-size:13px;font-weight:700;letter-spacing:.02em;margin:0 0 6px;color:var(--fg)}
.st-f{display:flex;justify-content:space-between;align-items:center;min-height:36px;padding:0 10px;margin:0 -10px;border-radius:10px;
  font-size:14.5px;color:var(--body);text-decoration:none}
.st-f small{font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
.st-f:hover{background:color-mix(in srgb,var(--fg) 6%,transparent);color:var(--fg)}
.st-f.on{background:var(--fg);color:var(--void)}.st-f.on small{color:inherit;opacity:.7}
.st-clear{display:inline-flex;align-items:center;min-height:36px;font-size:13px;font-weight:600;color:var(--arc-ink);text-decoration:none}
.st-count{font-size:14px;color:var(--mute);margin:0 0 18px}
.st-note{grid-column:span 2;display:flex;flex-direction:column;gap:10px;justify-content:flex-end;min-height:100%;padding:clamp(22px,2.4vw,32px);
  border-radius:20px;background:#0b1220;color:#fff;text-decoration:none;position:relative;overflow:hidden}
.st-note::before{content:"";position:absolute;inset:-40% -20% auto auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(0,106,255,.45),transparent 70%)}
.st-note .kick{color:#8fbcff}.st-note b{font-size:clamp(22px,2.2vw,30px);letter-spacing:-.025em;line-height:1.1;position:relative}
.st-note span:not(.kick){color:#c7ccd8;font-size:15px;line-height:1.5;position:relative}.st-note em{font-style:normal;font-weight:700;color:#fff;position:relative}
.st-note:hover em{text-decoration:underline}
.st-ask{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:start}
.st-askf{margin-top:0}
.st-help-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:48px}
.st-help-t{display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:20px;background:var(--panel);color:var(--fg);text-decoration:none;min-height:96px}
.st-help-t b{font-size:18px;letter-spacing:-.015em}.st-help-t small{color:var(--mute);font-size:13px}.st-help-t:hover{background:var(--panel-2,#ececf0)}
.st-help-s{max-width:760px;margin-bottom:40px;scroll-margin-top:90px}
.st-help-s h2,.st-faq h2{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.025em;margin:0 0 10px}
.st-help-s details,.st-faq details{border-top:1px solid var(--line)}
.st-help-s summary,.st-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:52px;font-weight:600;font-size:16px}
.st-help-s summary::after,.st-faq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--mute);transition:transform .2s}
.st-help-s details[open] summary::after,.st-faq details[open] summary::after{transform:rotate(45deg)}
.st-help-s summary::-webkit-details-marker,.st-faq summary::-webkit-details-marker{display:none}
.st-help-s p,.st-faq p{color:var(--body);line-height:1.65;margin:0 0 18px;max-width:680px}
.st-faq{max-width:760px;margin-top:20px}
.st-crumbs{font-size:13px;color:var(--mute);margin-bottom:24px}.st-crumbs a{color:var(--mute);text-decoration:none}.st-crumbs a:hover{color:var(--arc-ink)}
.st-crumbs span{color:var(--fg)}
.st-bhead{padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:34px}
.st-bmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;font-size:14px;color:var(--body)}
.st-bmeta b{color:var(--fg)}
.st-chip{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;background:var(--panel);font-size:13px;font-weight:600;color:var(--fg)}
.st-chip.ghost{background:transparent;border:1px solid var(--line);font-weight:500}
.st-chips2{display:flex;flex-wrap:wrap;gap:8px}
.st-bsec{margin:0 0 48px}.st-bsec h2{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.025em;margin:0 0 18px}
.st-h2s{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.025em;margin:8px 0 0}
.st-qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;height:52px;margin:18px 0 0}
.st-qty button{width:44px;height:44px;border:0;background:transparent;font-size:20px;cursor:pointer;color:var(--fg);border-radius:50%}
.st-qty button:hover{background:var(--panel)}
.st-qty input{width:40px;border:0;text-align:center;font:600 16px var(--sans);background:transparent;color:var(--fg);-moz-appearance:textfield}
.st-qty input::-webkit-outer-spin-button,.st-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.st-inc{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:30px 0 0}
@media (max-width:1000px){.st-note{grid-column:span 3}}
@media (max-width:860px){
  .st-layout{grid-template-columns:minmax(0,1fr);gap:14px}
  .st-side{position:static;padding:0;background:transparent}
  .st-side summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:999px;font-weight:600;cursor:pointer;list-style:none}
  .st-side summary::-webkit-details-marker{display:none}
  .st-side[open] summary{margin-bottom:12px}
  .st-side .st-g{background:var(--panel);border-radius:16px;padding:12px 14px;border:0;margin-bottom:8px}
  .st-ask{grid-template-columns:minmax(0,1fr)}
  .st-help-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){.st-note{grid-column:span 2}}
html.night .st-add{background:var(--panel);color:var(--fg)}
html.night .st-img{background:var(--panel)}

/* ── 26 Oct 2026 · the product page, partner platform round: gallery, how to use / safety, pairings, the guide ── */
.st-gal{display:flex;flex-direction:column;gap:10px;min-width:0}
.st-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.st-thumbs button{width:64px;height:64px;padding:0;border:2px solid transparent;border-radius:12px;background:var(--panel);cursor:pointer;overflow:hidden}
.st-thumbs button[aria-pressed=true]{border-color:var(--arc)}
.st-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.st-pre{white-space:pre-line}
.st-pairs{margin-top:40px}
.st-plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.st-pair p{font-size:14px;color:var(--body);line-height:1.5;margin-top:10px}
.st-adv{margin-top:40px;border-radius:24px;background:var(--panel);padding:clamp(20px,3vw,32px)}
.st-qs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.st-q{min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--void);color:var(--fg);font:600 14.5px var(--sans);cursor:pointer}
.st-q[aria-expanded=true]{border-color:var(--arc);color:var(--arc-ink)}
.st-a{margin-top:14px;padding:16px 18px;border-radius:16px;background:var(--void)}
.st-a p{margin-top:6px;color:var(--body);line-height:1.6;white-space:pre-line}
.st-trust{font-size:13.5px;color:var(--body);margin:10px 0 0}
.st-what{margin-top:36px;max-width:760px}
.st-both{margin-top:10px;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--arc);background:none;color:var(--arc-ink);font:600 14px var(--sans);cursor:pointer}
.st-both:hover{background:rgba(0,106,255,.06)}
.mx-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:20px}
.mx-tool{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:start;padding:14px;border-radius:20px;background:var(--panel);text-decoration:none;color:var(--fg)}
.mx-tool img,.mx-tool .mx-tph{width:84px;height:84px;border-radius:14px;object-fit:cover;background:var(--line);display:block}
.mx-tool small{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.mx-tool b{display:block;font-size:16px;margin:2px 0 4px}
.mx-tool em{display:block;font-style:normal;font-size:14px;color:var(--body);line-height:1.45}
.mx-tool i{display:block;font-style:normal;font-weight:700;margin-top:6px}

/* ── the brands, 27 Oct 2026 (site_brands.py): the index and a house brand's page ── */
.bd-top{padding-top:clamp(28px,4vw,48px)}
.bd-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:26px 0 18px}
.bd-tabs{display:flex;flex-wrap:wrap;gap:8px}
.bd-tab{min-height:40px;display:inline-flex;align-items:center;gap:6px;padding:0 14px;border-radius:999px;border:1px solid var(--line);color:var(--fg);text-decoration:none;font-weight:600;font-size:14px}
.bd-tab span{color:var(--mute);font-weight:500}
.bd-tab[aria-current=page]{background:var(--fg);color:var(--void);border-color:var(--fg)}.bd-tab[aria-current=page] span{color:inherit;opacity:.7}
.bd-sort{display:flex;gap:14px;font-size:14px}.bd-sort a{color:var(--mute);text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.bd-sort a[aria-current=page]{color:var(--fg);font-weight:700}
.bd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.bd-card{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;padding:20px;border-radius:22px;background:var(--panel);color:var(--fg);text-decoration:none;transition:transform .2s var(--ease)}
.bd-card:hover{transform:translateY(-2px)}
.bd-card h2{font-size:20px;letter-spacing:-.02em;margin:6px 0 0}.bd-card small{color:var(--mute);font-size:13px}
.bd-card p{color:var(--body);font-size:14.5px;line-height:1.5;margin:8px 0 10px}
.bd-chips{display:flex;flex-wrap:wrap;gap:6px}.bd-n{display:block;margin-top:10px;font-size:13px;font-weight:600;color:var(--fg)}
.bd-badge{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.bd-badge.house{color:var(--arc-ink)}
.bd-av{width:72px;height:72px;border-radius:50%;object-fit:cover;background:#fff;border:1px solid var(--line);display:block}
.bd-av.ini{display:grid;place-items:center;font-weight:800;font-size:22px;color:var(--fg)}
.bd-av.lg{width:112px;height:112px}.bd-av.sm{width:48px;height:48px}
.bd-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,32px);align-items:start;margin:18px 0 10px}
.bd-head .lead{max-width:640px}
.bd-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.bd-btns .btn{margin:0}
.bd-btns button.btn{font:inherit;font-weight:600;cursor:pointer;background:none}
.bd-jump{display:flex;gap:6px;flex-wrap:wrap;margin:26px 0 12px;padding:6px;border-radius:999px;background:var(--panel);width:max-content;max-width:100%}
.bd-jump a{min-height:40px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;color:var(--fg);text-decoration:none;font-weight:600;font-size:14px}
.bd-jump a:hover{background:var(--void)}
.bd-gone{margin-top:20px}.bd-gone summary{min-height:44px;display:flex;align-items:center;font-weight:600;cursor:pointer;color:var(--body)}
.bd-empty{border:1.5px dashed var(--line);border-radius:20px;padding:24px}.bd-empty p{color:var(--body);margin:6px 0 0}
.bd-story p{color:var(--body);font-size:17px;line-height:1.65;max-width:720px;margin:0 0 14px}
.bd-note{border-left:4px solid var(--bd,#000);margin-bottom:36px}
.bd-note blockquote{font-size:clamp(19px,2.2vw,24px);line-height:1.4;letter-spacing:-.01em;margin:14px 0 8px;color:var(--fg)}
.bd-q2{color:var(--body);font-style:italic}.bd-by{color:var(--mute);font-size:14px;margin-top:8px}
.bd-star{color:var(--body)}.bd-star span{color:var(--mute);font-size:14px}
.bd-minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.bd-mini{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:18px;background:var(--panel);color:var(--fg);text-decoration:none}
.bd-mini b{display:block}.bd-mini small{color:var(--mute);font-size:13px;line-height:1.35;display:block}
@media(max-width:640px){.bd-head{grid-template-columns:minmax(0,1fr)}.bd-av.lg{width:84px;height:84px}.bd-grid{grid-template-columns:minmax(0,1fr)}
  .bd-jump{width:auto;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.bd-jump a{flex:none}}

/* ══ THE MENU — 27 Oct 2026 (site.js MENU) ═════════════════════════════════════
   Six dropdowns, each a full-width panel under the bar: a lead line, the links with the site's own descriptions,
   and one feature. The brands panel is the house, with every brand's mark. Phones keep the full-screen menu,
   one section per group. */
.mg-bar{display:flex;align-items:center;gap:2px;margin-left:auto;margin-right:4px}
.mg-t{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:999px;
  color:var(--mute);font:600 13.5px/1 var(--sans);cursor:pointer;white-space:nowrap;position:relative;z-index:1;transition:color .2s}
.mg-t svg{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.mg-t:hover,.mg[data-open="1"] .mg-t,.mg-t.on{color:var(--fg)}
.mg-t.on{color:var(--arc-ink)}
.mg[data-open="1"] .mg-t svg{transform:rotate(180deg)}
.mg-t:focus-visible{outline:2px solid var(--arc);outline-offset:2px}
.mg-p{position:absolute;left:0;right:0;top:100%;z-index:95;background:var(--void);
  border-bottom:1px solid var(--line);box-shadow:0 40px 70px -40px rgba(0,0,0,.28);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .18s,transform .22s var(--ease),visibility 0s .22s}
.mg[data-open="1"] .mg-p{opacity:1;visibility:visible;transform:none;transition:opacity .22s,transform .32s var(--ease),visibility 0s}
.mg-in{max-width:1080px;margin:0 auto;padding:26px 24px 32px;display:grid;grid-template-columns:190px minmax(0,1fr) 270px;gap:30px;align-items:stretch}
.mg-lead small{display:block;font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--arc-ink)}
.mg-lead p{margin:10px 0 0;color:var(--body);font-size:15px;line-height:1.5}
.mg-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px;align-content:start}
.mg-a{display:block;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--fg);transition:background .15s}
.mg-a b{display:block;font-size:15px;font-weight:650;letter-spacing:-.01em}
.mg-a span{display:block;font-size:13px;color:var(--mute);line-height:1.4;margin-top:3px}
.mg-a:hover,.mg-a:focus-visible{background:var(--panel);outline:none}
.mg-a.on b{color:var(--arc-ink)}
.mg-feat{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:18px;background:#05070d;color:#fff;text-decoration:none;
  background-image:radial-gradient(120% 80% at 0% 0%,rgba(0,106,255,.35),transparent 60%);transition:transform .2s var(--ease)}
.mg-feat:hover{transform:translateY(-2px)}
.mg-feat small{font-size:11px;font-weight:800;letter-spacing:.18em;color:#8fbcff}
.mg-feat b{font-size:20px;letter-spacing:-.02em;line-height:1.15}
.mg-feat span{color:#c3c8d6;font-size:14px;line-height:1.45}
.mg-feat i{font-style:normal;font-weight:700;font-size:14px;margin-top:auto;padding-top:10px}
.mg-feat.img{background:var(--panel);color:var(--fg);background-image:none}
.mg-feat.img small{color:var(--arc-ink)}.mg-feat.img span{color:var(--body)}
.mg-feat.img img{width:100%;height:112px;object-fit:contain;border-radius:10px;margin-bottom:6px}
.mg-brands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px;align-content:start}
.mg-brand{display:flex;gap:12px;align-items:center;padding:8px 10px;border-radius:14px;text-decoration:none;color:var(--fg);transition:background .15s}
.mg-brand img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:1px solid var(--line);background:#fff;flex:none}
.mg-brand b{display:block;font-size:14.5px;font-weight:650}.mg-brand small{display:block;font-size:12.5px;color:var(--mute);line-height:1.35;margin-top:2px}
.mg-brand:hover,.mg-brand:focus-visible{background:var(--panel);outline:none}
.mg-brand.on b{color:var(--arc-ink)}
.mg-side{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line);padding-left:18px}
@media(max-width:1060px){.mg-in{grid-template-columns:minmax(0,1fr) 240px}.mg-lead{display:none}}
@media(max-width:900px){.mg-t{padding:0 8px;font-size:12.5px}.mg-feat,.mg-side{display:none}.mg-in{grid-template-columns:minmax(0,1fr)}
  .mg-links,.mg-brands{grid-template-columns:repeat(3,minmax(0,1fr))}.cmdk-btn kbd{display:none}}
@media(max-width:760px){.mg-bar{display:none}}
html.night-bg .mg-p{background:#0c1120;border-color:var(--line)}
html.night-bg .mg-a:hover,html.night-bg .mg-brand:hover{background:rgba(255,255,255,.06)}
html.night-bg .mg-feat.img{background:rgba(255,255,255,.06)}
@media(prefers-reduced-motion:reduce){.mg-p,.mg[data-open="1"] .mg-p{transition:none;transform:none}}

/* phones: one section per group, in the full-screen menu */
.navdrawer .dg-a{border:0}
@media(max-width:760px){
  .navdrawer .dg{padding:0 24px;opacity:0;transform:translateY(24px);transition:opacity .25s,transform .3s}
  .navdrawer.open .dg{opacity:1;transform:none;transition:opacity .6s var(--ease-emphasized),transform .7s var(--ease-emphasized)}
  .navdrawer.open .dg:nth-child(2){transition-delay:.04s}.navdrawer.open .dg:nth-child(3){transition-delay:.08s}
  .navdrawer.open .dg:nth-child(4){transition-delay:.12s}.navdrawer.open .dg:nth-child(5){transition-delay:.16s}
  .navdrawer.open .dg:nth-child(6){transition-delay:.2s}
  .navdrawer .dg summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;cursor:pointer;
    color:#fff;font-size:clamp(28px,8.4vw,36px);font-weight:700;letter-spacing:-.035em;line-height:1.1}
  .navdrawer .dg summary::-webkit-details-marker{display:none}
  .navdrawer .dg summary::after{content:"";width:12px;height:12px;border-right:2px solid rgba(255,255,255,.5);border-bottom:2px solid rgba(255,255,255,.5);
    transform:rotate(45deg) translateY(-4px);transition:transform .25s var(--ease)}
  .navdrawer .dg[open] summary::after{transform:rotate(225deg) translateY(-2px)}
  .navdrawer .dg-in{display:flex;flex-direction:column;padding:2px 0 14px}
  .navdrawer .dg-a{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.72);font-size:18px;font-weight:600;letter-spacing:-.01em;
    padding:9px 0;min-height:44px;text-decoration:none;background:none}
  .navdrawer .dg-a.on{color:#7fb0ff}
  .navdrawer .dg-a img{width:28px;height:28px;border-radius:50%;object-fit:cover;background:#fff}
}

/* ══ THE BRANDS, round 2 — 27 Oct 2026 (site_brands.py, to the founder's mock-up of orus.uk/brands + /brands/cadence) ══ */
.bd-h1{font-size:clamp(34px,4.6vw,52px);letter-spacing:-.035em;line-height:1.05;margin:14px 0 8px;font-weight:600}
.bd-sub{color:var(--mute);font-size:16px;max-width:680px;margin:0}
.bd-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:28px 0 22px}
.bd-search{flex:1 1 320px;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:var(--void)}
.bd-search svg{width:18px;height:18px;fill:none;stroke:var(--mute);stroke-width:2;stroke-linecap:round;flex:none}
.bd-search input{all:unset;flex:1;font:16px var(--sans);color:var(--fg);min-width:0}
.bd-search:focus-within{border-color:var(--arc);box-shadow:0 0 0 4px rgba(0,106,255,.14)}
.bd-tabs{display:flex;flex-wrap:wrap;gap:8px}
.bd-tab{min-height:44px;display:inline-flex;align-items:center;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--void);color:var(--body);text-decoration:none;font-weight:500;font-size:15px}
.bd-tab[aria-current=page]{background:#000;color:#fff;border-color:#000;font-weight:600}
.bd-sort{min-height:44px;padding:0 38px 0 18px;border-radius:999px;border:1px solid var(--line);background:var(--void) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236e6e73' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 14px center;
  font:15px var(--sans);color:var(--body);-webkit-appearance:none;appearance:none;cursor:pointer}
.bd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.bd-card{display:flex;flex-direction:column;padding:24px;border-radius:24px;border:1px solid var(--line);background:var(--void);color:var(--fg);text-decoration:none;
  grid-template-columns:none;transition:box-shadow .25s,transform .25s var(--ease)}
.bd-card:hover{transform:translateY(-2px);box-shadow:0 18px 40px -24px rgba(0,0,0,.25)}
.bd-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;min-height:64px;margin-bottom:16px}
.bd-logo{width:64px;height:64px;border-radius:16px;object-fit:cover;background:#fff;border:1px solid var(--line);display:block;flex:none}
.bd-logo.ini{display:grid;place-items:center;font-weight:800;font-size:20px}
.bd-badge{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:500;color:#2f6fd6;white-space:nowrap;letter-spacing:0;text-transform:none}
.bd-ck{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bd-card h2{font-size:19px;font-weight:600;letter-spacing:-.015em;margin:0}
.bd-loc{display:flex;align-items:center;gap:5px;color:var(--mute);font-size:13.5px;margin:6px 0 10px}
.bd-pin{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.4}
.bd-card p{color:var(--body);font-size:14.5px;line-height:1.55;margin:0 0 16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bd-card-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:14px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.bd-chips{display:flex;flex-wrap:wrap;gap:6px}
.bd-chip{font-size:12.5px;font-weight:500;color:var(--body);background:var(--panel);border-radius:999px;padding:4px 11px}
.bd-n{font-size:12.5px;color:var(--mute);margin:0}
.bd-none{color:var(--body);padding:24px 0}

/* the brand page */
.bd-hero{border-bottom:1px solid var(--line)}
.bd-hero-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding-top:clamp(20px,3vw,32px);padding-bottom:clamp(28px,4vw,44px)}
.bd-kicker{display:inline-block;font:600 11.5px var(--mono);letter-spacing:.12em;background:var(--panel);border-radius:6px;padding:5px 9px;margin:22px 0 14px;color:var(--fg)}
.bd-name{font-size:clamp(40px,6vw,68px);font-weight:600;letter-spacing:-.04em;line-height:1;margin:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bd-verified{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#2f6fd6;color:#fff}
.bd-verified .bd-ck{width:22px;height:22px;stroke-width:1.8}.bd-verified .bd-ck circle{display:none}
.bd-tag{color:var(--mute);font-size:17px;margin:14px 0 18px}
.bd-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px}
.bd-pill{font-size:13px;font-weight:500;color:var(--fg);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.bd-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bd-follow{min-height:44px;display:inline-flex;align-items:center;padding:0 22px;border-radius:12px;background:#000;color:#fff;text-decoration:none;font-weight:600;font-size:14.5px}
.bd-fc{font-size:13px;color:var(--mute);margin-right:6px}
.bd-act{all:unset;box-sizing:border-box;min-height:44px;display:inline-flex;align-items:center;gap:7px;padding:0 18px;border-radius:12px;border:1px solid var(--line);
  background:var(--void);color:var(--fg);font:600 14.5px var(--sans);cursor:pointer;text-decoration:none}
.bd-act:hover{border-color:var(--fg)}.bd-act svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5}
.bd-act:focus-visible,.bd-follow:focus-visible{outline:2px solid var(--arc);outline-offset:2px}
.bd-hero-r{display:flex;justify-content:center}
.bd-mark{width:100%;max-width:520px;aspect-ratio:16/10;border-radius:28px;background:var(--panel);display:grid;place-items:center}
.bd-logo.xl{width:clamp(120px,14vw,170px);height:clamp(120px,14vw,170px);border-radius:32px;box-shadow:0 30px 60px -28px rgba(0,0,0,.35);border:0}
.bd-tabsbar{position:sticky;top:64px;z-index:20;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border-bottom:1px solid var(--line)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.bd-tabsbar{background:rgba(255,255,255,.96)}}
@media (prefers-reduced-transparency:reduce){.bd-tabsbar{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}
.bd-tabsbar .wrap{display:flex;gap:26px;overflow-x:auto;scrollbar-width:none}
.bd-tabsbar a{flex:none;min-height:52px;display:inline-flex;align-items:center;color:var(--body);text-decoration:none;font-size:14.5px;font-weight:500;border-bottom:2px solid transparent}
.bd-tabsbar a:first-child{color:var(--fg);border-bottom-color:var(--fg);font-weight:600}
.bd-tabsbar a:hover{color:var(--fg)}
html.nav-away .bd-tabsbar{top:0}
.bd-body{padding-top:clamp(28px,4vw,48px)}
.bd-sec{margin:0 0 clamp(44px,6vw,72px);scroll-margin-top:130px}
.bd-sec h2{font-size:clamp(24px,2.8vw,32px);font-weight:600;letter-spacing:-.025em;margin:0 0 20px}
.bd-subh{color:var(--mute);margin:-12px 0 20px}
.bd-soon{border:1px solid var(--line);border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;min-height:240px;color:var(--mute)}
.bd-soon-i{width:30px;height:30px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-size:18px}
.bd-soon p{margin:0;font-size:14px}
.bd-link{all:unset;cursor:pointer;font-weight:600;color:var(--fg);font-size:14px;min-height:44px;display:inline-flex;align-items:center}
.bd-link:hover{text-decoration:underline}
.bd-ext{text-decoration:none;font-size:18px}
.bd-gone{margin-top:22px}.bd-gone summary{min-height:44px;display:flex;align-items:center;font-weight:600;cursor:pointer;color:var(--body)}
.bd-story{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.bd-story p{color:var(--body);font-size:16.5px;line-height:1.7;margin:0 0 14px}
.bd-note{background:#000;color:#fff;border-radius:22px;padding:clamp(22px,3vw,32px);border:0}
.bd-note small{font:600 11px var(--mono);letter-spacing:.14em;color:rgba(255,255,255,.6)}
.bd-note h3{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:10px 0 14px;color:#fff}
.bd-note blockquote{margin:0 0 10px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.88)}
.bd-note .bd-q2{color:rgba(255,255,255,.7);font-style:italic;font-size:15px;line-height:1.6}
.bd-note .bd-by{color:rgba(255,255,255,.55);font-size:13.5px;margin:12px 0 0}
.bd-stds{display:flex;flex-wrap:wrap;gap:10px}
.bd-stds span{font:600 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border-radius:8px;background:var(--panel);color:var(--fg)}
.bd-fws{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.bd-fw{display:block;color:var(--fg);text-decoration:none}
.bd-fw img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:20px;background:var(--panel);display:block;margin-bottom:10px}
/* guide covers are photographs: they fill the tile; the A5 cover keeps its words inside the 4:5 cut */
.st-cover .st-img{padding:0;background:#111}
.st-cover .st-img img{object-fit:cover;filter:none}
.st-cover .st-add{top:12px;bottom:auto}
.st-cover.cv-top .st-add{top:auto;bottom:12px}
@media (max-width:640px){.st-cover .st-add{top:8px}.st-cover.cv-top .st-add{top:auto;bottom:8px}}
/* brand shop photos are 4:5 studio shots: they fill the tile edge to edge; sold-out as a glass chip on the photo */
.st-photo .st-img{padding:0}
.st-photo .st-img img{object-fit:cover;filter:none}
.st-na.bd-na{position:absolute;left:10px;top:10px;margin:0;color:#000;background:rgba(255,255,255,.66)}
@media (prefers-reduced-transparency:reduce){.st-na.bd-na{background:#fff}}
.st-photo:has(.bd-na) .st-img img{opacity:.55}
.bd-fw b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}.bd-fw small{color:var(--mute);font-size:13px}
.bd-lead2{font-size:17px;color:var(--body);margin:0 0 8px}
.bd-star{color:var(--body)}.bd-star span{color:var(--mute);font-size:14px}
.bd-band{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:center;background:#000;color:#fff;border-radius:28px;
  padding:clamp(26px,4vw,48px);margin:0 0 clamp(44px,6vw,72px);overflow:hidden}
.bd-band small{font:600 11px var(--mono);letter-spacing:.14em;color:rgba(255,255,255,.6)}
.bd-band h2{color:#fff;font-size:clamp(28px,3.4vw,40px);letter-spacing:-.03em;margin:10px 0 12px}
.bd-band p{color:rgba(255,255,255,.75);max-width:520px}
.bd-band-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.bd-wbtn,.bd-obtn{min-height:44px;display:inline-flex;align-items:center;padding:0 20px;border-radius:999px;font:700 13px var(--sans);letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.bd-wbtn{background:#fff;color:#000}.bd-obtn{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.bd-phone{justify-self:center;width:min(250px,100%);border-radius:30px;background:#111;border:6px solid #222;padding:18px 16px 22px;transform:rotate(-3deg) translateY(20px)}
.bd-ph-top{display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:linear-gradient(160deg,var(--bd,#2E7D74),#0b1f1c);border-radius:16px;padding:16px;margin-bottom:12px}
.bd-logo.ph{width:44px;height:44px;border-radius:12px;border:0}
.bd-ph-top b{font-size:16px;color:#fff;margin-top:6px}.bd-ph-top small{font:600 10px var(--mono);letter-spacing:.12em;color:rgba(255,255,255,.7)}
.bd-phone p{color:rgba(255,255,255,.75);font-size:13px;margin:0 0 10px}
.bd-ph-pills{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}.bd-ph-pills span{font-size:11px;background:rgba(255,255,255,.1);border-radius:999px;padding:3px 9px;color:#fff}
.bd-ph-btn{display:block;text-align:center;background:#fff;color:#000;border-radius:999px;padding:8px;font-size:13px;font-weight:700}
.bd-minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.bd-mini{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:20px;border-radius:22px;background:var(--panel);color:var(--fg);text-decoration:none;min-height:170px}
.bd-mini .bd-logo.sm{width:48px;height:48px;border-radius:12px;margin-bottom:10px}
.bd-mini b{font-size:16px;font-weight:600}.bd-mini span{color:var(--body);font-size:13.5px;line-height:1.45}.bd-mini small{color:var(--mute);font-size:12.5px;margin-top:auto}
@media(max-width:860px){.bd-hero-in,.bd-story,.bd-band{grid-template-columns:minmax(0,1fr)}.bd-hero-r{order:-1}.bd-mark{aspect-ratio:16/8}
  .bd-phone{display:none}}
@media(max-width:560px){.bd-grid{grid-template-columns:minmax(0,1fr)}.bd-bar{gap:8px}.bd-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%}.bd-tab{flex:none}}
html.night-bg .bd-tabsbar{background:rgba(12,17,32,.92)}

/* 27 Oct 2026 — the header rules are written as `nav{…}` (sticky, white, a bottom line, hidden on scroll), so every
   other <nav> inherited them: the breadcrumbs became a sticky white strip over the page (and over the new menu
   panels), and the brand page's section tabs slid away with the header. Those navs are put back to plain. */
html body nav:not(.x):is(.st-crumbs,.bd-tabs,.pg-toc,.mx-pn,.bd-jump){position:static;top:auto;z-index:auto;background:none;border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;transform:none;height:auto}
html body nav:not(.x).bd-tabsbar{transform:none;box-shadow:none}
html body nav:not(.x).bd-tabsbar .wrap{height:auto;justify-content:flex-start;position:static}
html.mg-open body > nav{z-index:120}
.mg-p{border:1px solid var(--line);border-top:0;border-radius:0 0 24px 24px}

/* the verified badge, 27 Oct 2026 (site_shop.verified) */
.vb{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;flex:none}
.bd-badge .vb{width:16px;height:16px;margin-right:2px}
.bd-verified{display:inline-flex;width:auto;height:auto;background:none;border-radius:0}
.bd-verified .vb{width:.55em;height:.55em}
.sh-h1 .vb{width:.6em;height:.6em;vertical-align:.05em}
.st-sel .vb{width:17px;height:17px;vertical-align:-4px;margin-right:2px}

/* the phone menu, Apple-style — 27 Oct 2026 (site.js): six sections; tapping one shows only what's under it */
.navdrawer .dl2{display:none}
@media(max-width:760px){
  .navdrawer .dl1{display:flex;flex-direction:column;padding:0 14px}
  .navdrawer.l2 .dl1,.navdrawer.l2 .navfoot{display:none}
  .navdrawer .dl-g{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:4px 10px;border-radius:14px;
    color:#fff;font-size:clamp(30px,8.8vw,38px);font-weight:700;letter-spacing:-.035em;line-height:1.1;cursor:pointer;
    opacity:0;transform:translateY(20px);transition:opacity .25s,transform .3s}
  .navdrawer.open .dl-g{opacity:1;transform:none;transition:opacity .55s var(--ease-emphasized),transform .65s var(--ease-emphasized);
    transition-delay:calc(.12s + var(--i,0) * .04s)}
  .navdrawer .dl-g.on span{color:#7fb0ff}
  .navdrawer .dl-g svg,.navdrawer .dl-back svg{width:9px;height:16px;fill:none;stroke:rgba(255,255,255,.45);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
  .navdrawer .dl-g:active{background:rgba(255,255,255,.06)}
  .navdrawer .dl-g:focus-visible,.navdrawer .dl-back:focus-visible,.navdrawer .dl-a:focus-visible{outline:2px solid #7fb0ff;outline-offset:2px}
  .navdrawer .dl2.on{display:flex;flex-direction:column;padding:0 24px 28px;animation:dl-in .42s var(--ease-emphasized) both}
  @keyframes dl-in{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
  .navdrawer .dl-back{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:0 0 6px -4px;padding:0 4px;
    color:rgba(255,255,255,.7);font:600 16px var(--sans);cursor:pointer;width:max-content}
  .navdrawer .dl-back svg{stroke:rgba(255,255,255,.7)}
  .navdrawer .dl-h{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);margin:8px 0 10px}
  .navdrawer .dl-a{display:flex;align-items:center;gap:14px;min-height:48px;padding:6px 0;border:0;background:none;text-decoration:none;
    color:#fff;font-size:clamp(24px,7vw,30px);font-weight:700;letter-spacing:-.03em;line-height:1.15;
    animation:dl-in .45s var(--ease-emphasized) both;animation-delay:calc(var(--i,0) * .03s)}
  .navdrawer .dl-a.dl-s{font-size:19px;font-weight:600;color:rgba(255,255,255,.7);letter-spacing:-.01em;min-height:44px}
  .navdrawer .dl-a.dl-s:first-of-type{margin-top:14px}
  .navdrawer .dl-a.on{color:#7fb0ff}
  .navdrawer .dl-a img{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#fff;flex:none}
  .navdrawer .dl-b{font-size:clamp(22px,6.4vw,26px)}
  .navdrawer .dl-feat{display:block;margin-top:22px;padding:16px 18px;border-radius:14px;background:var(--arc);color:#fff;text-decoration:none;text-align:center;
    font-size:16px;font-weight:700;border:0;animation:dl-in .45s var(--ease-emphasized) both;animation-delay:calc(var(--i,0) * .03s)}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){.navdrawer .dl2.on,.navdrawer .dl-a,.navdrawer .dl-feat{animation:none}}

/* the brand page on a phone, 27 Oct 2026: a compact mark beside the title instead of the big panel above the breadcrumbs */
.bd-mlogo{display:none}
@media(max-width:860px){.bd-hero-r{display:none}.bd-mlogo{display:block;margin-top:18px}.bd-mlogo .bd-logo.m{width:72px;height:72px;border-radius:18px;box-shadow:0 14px 30px -18px rgba(0,0,0,.4)}
  .bd-kicker{margin-top:14px}.bd-actions .bd-fc{flex-basis:auto}.bd-tabsbar .wrap{gap:20px}}