/* Ingrafta site styles. Tokens first, then the hero, then the page. */
/* 11dd: the web fonts, self-hosted (latin subsets as Google Fonts serves them; SIL Open Font License, see assets/fonts/README.txt).
   Source Sans 3 is one variable file for both weights the site uses. */
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/bodoni-moda-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-mono-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/source-sans-3-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/bodoni-moda-italic-latin.woff") format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* 11fo S8, 16 October 2026: Bodoni Moda Italic (the 11pt cut, 20 KB, OFL; assets/fonts/README.txt) for the eleven review quotes only, the clients' voice beside the firm's roman. Never preloaded: it is below the fold, and site.js lets the quotes take it only as the reviews come near, so the file loads then. */
/* 11dc: metric-matched fallbacks, so the page painting before the web fonts arrive does not jump when they swap in
   (measured against the loaded fonts; Safari applies size-adjust only) */
@font-face{font-family:"Ingrafta Fine";font-style:italic;font-weight:400;font-display:block;src:url("fonts/source-sans-3-italic-caveat.woff") format("woff")} /* over8 step 11: Source Sans 3 Italic cut to the caveat's 18 characters (3.2 KB), renamed as the OFL asks. */
@font-face{font-family:"Bodoni Moda Fallback";src:local("Georgia");size-adjust:102.36%;ascent-override:110.4%;descent-override:39.08%;line-gap-override:0%}
@font-face{font-family:"Bodoni Moda Fallback";font-style:italic;src:local("Georgia Italic"),local("Georgia-Italic");size-adjust:95.62%;ascent-override:117.65%;descent-override:41.83%;line-gap-override:0%} /* 11fo S8, 16 October 2026: the quotes' italic before its file arrives, measured on the eleven quotes against the loaded Bodoni Moda Italic (55,126 to 57,652px at 100px), its ascent 1.125 and descent .40 over that size */
@font-face{font-family:"Source Sans 3 Fallback";src:local("Arial");size-adjust:90.9%;ascent-override:112.21%;descent-override:44%;line-gap-override:0%}
:root{
  --canvas:#0A1830; --canvas-deep:#071224; --panel:#101F3A;
  --accent:#7FCB7A; --accent-hover:#5FB3A8; --accent-muted:rgba(127,203,122,.28);
  --teal:#5FB3A8; --ink:#0B1C35;
  --text:#F2EEE4; --text-2:#9AA3AD;
  --line:rgba(154,163,173,.22); --line-strong:#6B7683; --line-ivory:rgba(242,238,228,.55);
  --accent-dim:#2B4A45; --panel-2:#212D42; --panel-3:#2E3D58; /* the navy blended with 28% accent; two lifted navies for the Login button */
  --nav-h:72px; --nav-h-phone:60px; /* ribbon heights: one row, and the slim phone row (112px, two rows, until 11cy) */
  --room:#F4F0E6; --room-panel:#FBF8F1; --room-text:#0B1C35; --room-text-2:#4D5A6B; --teal-ink:#276A61;
  --tshadow:0 1px 2px rgba(7,18,36,.95),0 3px 12px rgba(7,18,36,.78),0 10px 44px rgba(7,18,36,.8); /* over8 step 38: the halo on the navy, not a violet-era near-black */
  --ease-out:cubic-bezier(.22,.61,.36,1); --ease-inout:cubic-bezier(.65,0,.35,1);
  --d-fast:.28s; --d-med:.6s; --d-slow:1.1s;
  --display:"Bodoni Moda","Bodoni Moda Fallback",Georgia,"Times New Roman",serif;
  --body:"Source Sans 3","Source Sans 3 Fallback","Source Sans Pro",-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --wrap:1200px; --gutter:clamp(20px,4vw,56px);
  /* 10k-2026-09-30 lift 10: the Bodoni scale, five steps (at 1440: 66 / 52 / 30 / 24 / 22). */
  --fs-section:clamp(30px,4.2vw,52px); /* 2: every section h2 */
  --fs-sub:clamp(22px,2.4vw,30px);     /* 3: subheads and stand-alone display lines (h3, the bridge, the tag, the integration line) */
  --fs-card:clamp(20px,1.7vw,24px);    /* 4: titles inside cards and columns (doors, factors, service promises, tickets, the book, review quotes, the signature) */
  --fs-small:clamp(18px,1.55vw,22px);  /* 5: FAQ questions and the display numerals of the two numbered lists */
  --fs-lede:clamp(18px,1.4vw,21px); --fs-meta:15px; --fs-fine:13px; /* over8 step 11: the body steps beside the 17px text and 16px buttons. */
  --c2:36px; /* clear8 2026-10-02: from 1024px every right column starts this far right of the trunk (24px from 1024 to 1279). */
}
*,*::before,*::after{box-sizing:border-box}
/* over8 step 27: instant scrolling, so focus jumps land at once (site.js glides short link clicks). */
html{scroll-behavior:auto;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent} /* 10k-2026-09-30 lift 6: no blue square flashing on every tap (it inherits to every link, button and summary); */
html,body{overflow-x:hidden;overflow-x:clip}
body{margin:0;background:var(--canvas);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.55;font-weight:400} /* 11dc: the page paints at once; it no longer waits, invisible, for site.js */
/* 11dc: no failsafe animations. */
/* the one fixed environment layer */
body::before{content:"";position:fixed;inset:-10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%,rgba(242,238,228,.07),transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 110%,rgba(95,179,168,.09),transparent 70%),
    radial-gradient(ellipse 80% 60% at 30% 60%,rgba(127,203,122,.035),transparent 70%),
    var(--canvas);
  animation:env 90s linear infinite;animation-delay:-30s}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@keyframes env{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(-2%,1.5%,0)}100%{transform:translate3d(0,0,0)}}
main,header,footer{position:relative;z-index:1}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.08;letter-spacing:-.005em;margin:0}
h2{font-size:var(--fs-section)}
h3{font-size:var(--fs-sub)}
p{margin:0}
a{color:inherit}
img,svg,video{max-width:100%;display:block}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--accent);color:var(--ink);padding:10px 14px;border-radius:8px;font-weight:600;text-decoration:none}
.skip:focus{top:12px} /* 10k-2026-09-30 lift 7: fixed (was absolute, at the top of the page), so a first Tab from mid-page shows the link at the top of the window instead of scrolling the reader back to the top */
.wrap{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.kicker,.chip{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;background:rgba(7,18,36,.6);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-shadow:0 1px 3px rgba(7,18,36,.85);color:var(--text)} /* over8 step 38: navy ground and the slate hairline (were hue-240 near-blacks) */
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:10px;border:1px solid transparent;font:600 16px/1 var(--body);text-decoration:none;cursor:pointer;transition:transform var(--d-fast) var(--ease-out),background var(--d-fast) var(--ease-out),border-color var(--d-fast) var(--ease-out),color var(--d-fast) var(--ease-out);text-shadow:none;white-space:nowrap}
.btn-primary{background:var(--accent);color:var(--ink)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--text);transform:translateY(-1px)}
.micro{font-size:var(--fs-meta);color:var(--text-2);margin-top:10px;max-width:46ch} /* clear8 2026-10-02: the meta step (was 14px), as the contact's micro line already is. */
.link{color:var(--text);text-decoration:underline;text-decoration-color:var(--accent-muted);text-underline-offset:4px;transition:text-decoration-color var(--d-fast) var(--ease-out)}
.link:hover{text-decoration-color:var(--accent)}
.hairline{height:1px;background:var(--line)}

/* ---------- nav ---------- */
html{scroll-padding-top:var(--nav-h)} /* over8 step 9: anchors and keyboard focus both land below the fixed ribbon (sections keep scroll-margin 0). */
#tier-1{scroll-margin-top:40px} /* go-live pack 2026-10-07: ingrafta.com/checklist lands on card 01's heading; this keeps the card's top edge and seal clear of the ribbon. */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:14px 0;transition:background var(--d-med) var(--ease-out),padding var(--d-med) var(--ease-out)}
.nav .wrap{display:flex;align-items:center;gap:16px;flex-wrap:nowrap}
.nav-side{display:flex;align-items:center;gap:14px;position:relative}
.nav .wrap>.nav-side:first-child{margin-right:auto} /* pushes the Wealth Architecture and Login buttons to the far right */
.nav-end{gap:10px}
.nav.scrolled{background:rgba(7,18,36,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:10px 0} /* 11cv: .92, not .72: over the ivory room .72 mixed to an off-palette slate (#49505A); .92 stays navy (#1A2434) */
.brand{text-decoration:none;color:var(--text);display:flex;flex-direction:column;align-items:center;gap:4px}
.brand .mark{font-family:var(--display);font-size:24px;letter-spacing:.32em;padding-left:.32em;line-height:1} /* one size for every width; the tracking matches the PNG wordmark */
.brand .rule{width:77px;height:2px;background:linear-gradient(90deg,transparent,var(--text) 30%,var(--text) 70%,transparent);border-radius:2px}
.links{display:none;position:absolute;top:calc(100% + 14px);left:calc(100% - 44px);z-index:5;flex-direction:column;list-style:none;margin:0;padding:8px 0;min-width:290px;counter-reset:menu;/* left edge under the 44px hamburger; 290 fits the longest label, "Wealth Architecture programs", on one line at 15px beside its number (250 before the numbers, 11cy); 220 wrapped it */background:rgb(7,18,36);border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 44px rgba(3,8,18,.55)} /* 11cv: opaque and no blur of its own (nested in the ribbon's blur it was see-through; at .97 a faint ghost remained) */
.nav.open .links{display:flex;transition:none} /* over8 step 20: opaque from its first frame. */
/* 10k-2026-09-30 lift 6: the menus fade out on close (.16s, no travel) instead of vanishing in one frame. */
.links{transition:opacity .16s var(--ease-out),display .16s allow-discrete}
.nav:not(.open) .links{opacity:0;pointer-events:none}
.links li:not(.links-cta){counter-increment:menu}
.nav.open .links li{animation:menu-ink .24s var(--ease-out) backwards} /* over8 step 20: rows ink at 30 ms steps at every width. */
.nav.open .links li:nth-child(2){animation-delay:.03s}.nav.open .links li:nth-child(3){animation-delay:.06s}.nav.open .links li:nth-child(4){animation-delay:.09s}.nav.open .links li:nth-child(5){animation-delay:.12s}.nav.open .links li:nth-child(6){animation-delay:.15s}.nav.open .links li:nth-child(7){animation-delay:.18s}.nav.open .links li:nth-child(8){animation-delay:.21s}.nav.open .links li:nth-child(9){animation-delay:.24s}.nav.open .links li:nth-child(10){animation-delay:.27s}
.nav.open .links li.links-cta{animation-name:menu-ink-fill}
.links a{display:flex;align-items:baseline;gap:12px;padding:11px 18px;text-decoration:none;font-size:15px;color:var(--text-2);transition:color var(--d-fast) var(--ease-out),background var(--d-fast) var(--ease-out)}
.links a:hover{color:var(--text);background:rgba(242,238,228,.06)}
.links li:not(.links-cta) a::before{content:counter(menu,decimal-leading-zero);flex:none;width:2em;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--teal)} /* numbered 01 to 09 at every width, as the phone sheet is (founder, 11cy) */
.links-cta{display:none} /* the two ribbon buttons, repeated at the foot of the phone sheet, where the ribbon no longer carries them (11cy) */
.btn-wealth{min-height:44px;padding:10px 20px;font-size:15px;color:var(--text);background:var(--accent-dim);border-color:var(--accent)}
.btn-wealth:hover{background:var(--accent);border-color:var(--accent);color:var(--ink);transform:translateY(-1px)}
.btn-login{min-height:44px;padding:10px 18px;font-size:15px;color:var(--text);background:var(--panel-2);border-color:var(--line-ivory)}
.btn-login:hover{background:var(--panel-3);border-color:var(--text);transform:translateY(-1px)}
#nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:4px;background:transparent;border:1px solid var(--line-strong);color:var(--text);border-radius:10px;width:44px;height:44px;flex:none;cursor:pointer;transition:border-color var(--d-fast) var(--ease-out),background var(--d-fast) var(--ease-out)}
#nav-toggle:hover{border-color:var(--text);background:rgba(242,238,228,.05)}
/* 10k-2026-09-30 lift 6: the bars meet first, then turn, so the icon never passes through a ">" (a translate and a rotate run together drew one half-way); */
#nav-toggle span{display:block;width:18px;height:2px;background:var(--text);margin:0 auto;transition:translate .14s var(--ease-out) .12s,rotate .14s var(--ease-out),opacity 0s .12s}
.nav.open #nav-toggle span{transition:translate .14s var(--ease-out),rotate .14s var(--ease-out) .12s,opacity 0s .12s}
.nav.open #nav-toggle span:nth-child(1){translate:0 6px;rotate:45deg}
.nav.open #nav-toggle span:nth-child(2){opacity:0}
.nav.open #nav-toggle span:nth-child(3){translate:0 -6px;rotate:-45deg}

/* ---------- hero ---------- */
.hero{position:relative;height:1600vh;margin:0}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--canvas-deep)}
#hero-video,.poster,#hero-wide{position:absolute;inset:calc(-1 * max(6px,.7%)) 0 auto 0;width:100%;height:calc(100% + 2 * max(6px,.7%));object-fit:cover;background-size:cover;background-position:center} /* over8 step 28: they run past the stage's clipped foot, so the encode's black bottom rows never show. 11fo S11, 16 October 2026: and past its top by the same, so the encode's three dark top rows no longer draw a 3px line along the first frame; the picture's centre and the clipped foot are unchanged (the cover scale grows by about 0.7%). */
#hero-video{transform:translateZ(0);will-change:transform;opacity:0;transition:opacity var(--d-slow) var(--ease-out)}
.stage.video-ready #hero-video{opacity:1}
.poster{transition:opacity var(--d-slow) var(--ease-out)}
.stage.video-ready .poster{opacity:0}
.stage.video-failed:not(.wide-on) #hero-video,.stage.wide-ready #hero-video{display:none}
.stage.video-failed:not(.wide-on) .poster{opacity:1} /* 11es: the still shows again if the video fails after it was ready (it stayed at opacity 0: an empty navy stage) */
#hero-wide{opacity:0} /* 11es: the desktop's frame-sequence fallback (site.js startWide), over the poster, under the scrims; no fade: it takes the video's place in one paint (wide-on keeps the video's last picture until then) */
.stage.wide-ready #hero-wide{opacity:1}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(7,18,36,0) 35%,rgba(7,18,36,.67) 100%)} /* over8 step 38: navy, .62 to .67 to keep its depth. */
.topscrim{position:absolute;left:0;right:0;top:0;height:16%;pointer-events:none;background:linear-gradient(180deg,rgba(7,18,36,.72),rgba(7,18,36,0))}
.bands{position:absolute;inset:0;pointer-events:none}
.band{position:absolute;inset:0;opacity:0;text-shadow:var(--tshadow);--k:0}
.band .col{position:absolute;top:50%;transform:translateY(-50%);width:28vw;max-width:520px;pointer-events:auto}
.band.left .col{left:6vw}
.band.right .col{left:66vw}
.band.both .col{left:6vw}
.band::before{content:"";position:absolute;inset:-4%;pointer-events:none;opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 40% 62% at 22% 50%,rgba(7,18,36,calc(var(--scrim,.62)*1.08)) 0%,rgba(7,18,36,calc(var(--scrim,.62)*.71)) 46%,rgba(7,18,36,0) 76%)}
.band.right::before{background:radial-gradient(ellipse 42% 74% at 78% 50%,rgba(7,18,36,calc(var(--scrim,.62)*1.08)) 0%,rgba(7,18,36,calc(var(--scrim,.62)*.71)) 46%,rgba(7,18,36,0) 76%)}
.band.both::after{content:"";position:absolute;inset:-4%;pointer-events:none;opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 34% 56% at 80% 52%,rgba(7,18,36,calc(var(--scrim2,.55)*1.08)) 0%,rgba(7,18,36,calc(var(--scrim2,.55)*.65)) 46%,rgba(7,18,36,0) 76%)} /* over8 step 38: the band scrims on the navy, 8% denser so they darken the film as much as the near-black did. */
.band.both::before,.band.both::after{opacity:calc(.75 + .25*var(--k,1))}
.band .kicker.chip{margin-bottom:18px} /* its entrance is the ink below (10k-2026-09-30 lift 2) */
.band .kicker.label{display:block;margin-bottom:14px;color:var(--accent)} /* clear8 2026-10-02: the founder's call, each pillar's service name a sage mono label above its claim. */
.band h1,.band .display{font-family:var(--display);font-size:clamp(34px,3.6vw,56px);line-height:1.05;max-width:16ch;margin:0}
/* 11cz, the founder's pick (B): the headline leads and the statements support it. It was 52px at 1440, the same as every section h2 and all five statements.
   Now the headline is 66px in a wider column, the four pillars 43px, and the closing line 56px, breaking at its two sentences (13ch). */
.band h1{font-size:clamp(40px,min(4.6vw,8.2vh),68px);line-height:1.02;max-width:none} /* the vh term only bites on short screens: at 1280x650 the block would otherwise touch the ribbon */
.band[data-first] .col{width:36vw;max-width:600px}
.band .display{font-size:clamp(30px,3vw,44px);line-height:1.08}
.band .display,.band .display .sent{text-wrap:balance} /* clear8 2026-10-02: each claim balances its lines, so none ends on a lone word where its glued phrases fit. */
.band[data-last] .display{font-size:clamp(36px,3.9vw,56px);line-height:1.04;max-width:13ch}
.band[data-last] .col{width:34vw}
.band .sub{margin-top:18px;font-size:var(--fs-lede);max-width:38ch;color:var(--text);text-wrap:balance} /* clear8 2026-10-02: the lede step (was its own 16 to 19px clamp), balanced so no line ends on a lone word. */
.band .cta-row{margin-top:26px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.band .cta-row .micro{max-width:34ch}
@media (max-height:640px){.band[data-first] .kicker.chip{margin-bottom:10px}.band[data-first] .sub{margin-top:10px}.band[data-first] .cta-row{margin-top:14px}} /* clear8 2026-10-02: on short laptop windows the first band's gaps tighten, so its chip clears the menu button and its button clears the depth chip. */
.hero .chips{position:absolute;inset:0;left:66vw;width:min(28vw,280px);pointer-events:none} /* 280px comfortably clears the widest chip (231px at 12px mono) */
.hero .chips .chip{position:absolute;left:50%;width:max-content;opacity:0;transform:translateX(-50%);transition:opacity var(--d-med) var(--ease-out)} /* max-content, or shrink-to-fit would cap each chip at half the rail */
.hero .chips .chip:nth-child(1){top:33%}.hero .chips .chip:nth-child(2){top:44%}.hero .chips .chip:nth-child(3){top:55%}.hero .chips .chip:nth-child(4){top:66%}
/* text assembly: the statement's words (10k-2026-09-30 lift 2: words only; */
.vis{display:inline}
.w{white-space:nowrap} /* inline, no longer inline-block: nothing moves, so the words wrap and kern exactly as the plain line, and paint as one text block */
/* 10k-2026-09-30 lift 2: ONE entrance for every hero caption, the page's own "Drafted, then built" (11dc). */
[data-entrance="ink"]{--ink-r:3.34} /* 1/.3, a hair over so the last part lands on exactly 1 at k=1 */
[data-entrance="ink"] :is(.kicker.chip,.kicker.label,.w,.sub){opacity:calc(var(--a-pencil) + (1 - var(--a-pencil))*var(--kc))}
[data-entrance="ink"] :is(.kicker.chip,.kicker.label){--kc:clamp(0,var(--k,0)*var(--ink-r),1)}
[data-entrance="ink"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*var(--ink-r),1)}
[data-entrance="ink"] .sub{--kc:clamp(0,(var(--k,0) - .55)*var(--ink-r),1)}
/* the button row is a solid fill, so it drafts at under half the pencil, as the page's buttons do (11dc, --a-fill) */
[data-entrance="ink"] .cta-row{--kc:clamp(0,(var(--k,0) - var(--cta-th,.7))*var(--ink-r),1);opacity:calc(var(--a-pencil)*var(--a-fill) + (1 - var(--a-pencil)*var(--a-fill))*var(--kc))}
[data-entrance="ink"] .cta-row:has(:focus-visible){--kc:1} /* a button tabbed to mid-entrance is inked at once, as on the page below (11dc) */
.band[data-first] .cta-row{--cta-th:.6} /* 10k-2026-09-30 lift 2: band 1 inks on load, so its button starts at k .6 and is fully inked by k .90 (about 880 ms after boot), as the old kindle had it (.885); */
/* band 6 lights the chips as its k passes thresholds */
.hero .chips.on .chip{opacity:1;transition:none;animation:menu-ink var(--d-med) var(--ease-out) backwards} /* over8 step 20: ink in turn, no slide. */
.hero .chips.on .chip:nth-child(2){animation-delay:.12s}.hero .chips.on .chip:nth-child(3){animation-delay:.24s}.hero .chips.on .chip:nth-child(4){animation-delay:.36s}
.stage .depth{position:absolute;left:var(--gutter);bottom:30px;pointer-events:none;opacity:.9}
.stage .depth[data-ink=a]{animation:depth-ink-a .3s var(--ease-out)}.stage .depth[data-ink=b]{animation:depth-ink-b .3s var(--ease-out)} /* over8 step 20: a new label inks in (site.js alternates a and b). */
@keyframes depth-ink-a{from{color:rgba(242,238,228,var(--a-pencil))}}@keyframes depth-ink-b{from{color:rgba(242,238,228,var(--a-pencil))}}
/* loading ring / scroll cue */
.cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);color:var(--text);pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:6px}
.cue .ring{width:48px;height:48px;transform:rotate(-90deg);transition:opacity var(--d-med) var(--ease-out)}
.cue .ring circle{stroke-dasharray:126;stroke-dashoffset:var(--ld,126);transition:stroke-dashoffset .15s linear}
/* 10k-2026-09-30 lift 14: the scroll cue is a short line of the trunk's sap drawing down a pencil guide (11dc), where a chevron bounced 6px every 2.4s. */
.cue .sapcue{position:relative;display:block;width:2px;height:36px;overflow:hidden;border-radius:1px;opacity:0;transition:opacity var(--d-med) var(--ease-out)}
.cue .sapcue::before{content:"";position:absolute;left:.5px;top:0;bottom:0;width:1px;background:repeating-linear-gradient(180deg,var(--a-dash) 0 3px,transparent 3px 6px)}
.cue .sapcue i{position:absolute;inset:0;border-radius:1px;background:linear-gradient(180deg,var(--accent),var(--teal));transform:translateY(-100%);animation:sapcue 3.6s linear infinite}
.cue.ready .ring{opacity:0;position:absolute}
.cue.ready .sapcue{opacity:.9}
.stage.away .cue .sapcue i{animation-play-state:paused}
.stage.landed .cue .sapcue i{animation:sapland .9s var(--ease-out) both} /* over8 step 7: from hero progress .97 the sap draws the whole way down. */
@media (min-width:1024px){.stage.landed .cue.ready{bottom:0}.stage.landed .cue.ready .sapcue{height:var(--plinth,64px);opacity:1}.stage.landed .cue.ready .sapcue i{background:linear-gradient(180deg,var(--teal),var(--accent))}} /* over8 step 7: onto the trunk's first knot. 11fo S11, 16 October 2026: from the filmed plinth's base (site.js measures --plinth from the film's cover geometry while the film's last frame is the picture: 159px at 1440 x 900, 136 at 1024 x 768, 191 at 1920 x 1080, measured; 64px as before over the poster). */
@keyframes sapland{from{transform:translateY(-100%)}to{transform:none}}
.scrim::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9%;background:linear-gradient(180deg,rgba(15,29,51,0),rgb(15,29,51));opacity:0;transition:opacity var(--d-slow) var(--ease-out)}.stage.landed .scrim::after{opacity:1} /* over8 step 7: the lower 9%, under the plinth, feathers into the page navy. */
@keyframes sapcue{0%{transform:translateY(-100%);animation-timing-function:cubic-bezier(.22,.61,.36,1)}34%{transform:translateY(0)}56%{transform:translateY(0);animation-timing-function:cubic-bezier(.55,0,.75,.2)}82%,100%{transform:translateY(100%)}}
/* static hero (phones and the other gates) */
.hero-static{display:none;position:absolute;inset:0;background:var(--canvas-deep) center/cover no-repeat}
#hero-seq{display:none} /* the phone frame sequence is off everywhere but its own media query below;
  an <img> defaults to inline, not none, and absolute positioning blockifies it, so state it here */
.hero-static .col{position:absolute;left:var(--gutter);right:var(--gutter);top:14%;text-shadow:var(--tshadow)}
.hero-static::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,18,36,.78) 0%,rgba(7,18,36,.35) 40%,rgba(7,18,36,0) 60%,rgba(7,18,36,.7) 100%)}
.hero-static h1{font-size:clamp(34px,9.6vw,52px);max-width:14ch;margin:14px 0 0} /* 11cz: leads the 30px phone h2s (was 31px at 390) */
.hero-static .sub{margin-top:14px;max-width:34ch;font-size:inherit} /* clear8 2026-10-02: the body step, 16px on phones as before and 17px on tablets (was a fixed 16px). */
.hero-static .cta-row{position:absolute;left:var(--gutter);right:var(--gutter);bottom:9%;display:flex;flex-direction:column;gap:6px;text-shadow:var(--tshadow)}
.hero-static .cta-row .micro{color:var(--text)} /* 10k-2026-09-30 lift 7: ivory (was --text-2), inside the row's halo: over the mist 70% down the sequence the grey fell to 2.2:1 at its worst pixel; */
.hero-static .chips{position:absolute;right:var(--gutter);top:58%;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.hero-static .chips .chip{font-size:11px}
@media (max-height:560px){.cue,.depth,.hero .chips{display:none}}

/* ---------- sections ---------- */
.sec{position:relative;padding:clamp(72px,10vw,140px) 0}
.sec + .sec{padding-top:clamp(56px,8vw,110px)}
.sec header.sec-head{max-width:60ch;margin-bottom:clamp(28px,4vw,48px)}
.sec header.sec-head .kicker{display:block;margin-bottom:14px}
.lede{font-size:var(--fs-lede);color:var(--text-2);max-width:56ch;margin-top:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:clamp(20px,2.4vw,32px);position:relative;z-index:2}
/* drafted before built (the Build Line behavior on the trunk) */
[data-draft]{transition:opacity var(--d-med) var(--ease-out),filter var(--d-med) var(--ease-out),border-color var(--d-med) var(--ease-out)}
[data-draft]:not(.built){opacity:.55;filter:saturate(.4)}
[data-draft]:not(.built).card{border-style:dashed;border-color:var(--line-strong)}
/* entrances */
.reveal .part{opacity:0;transform:translateY(16px);transition:opacity var(--d-med) var(--ease-out),transform var(--d-med) var(--ease-out)}
/* The base entrance below is overridden by the "Drafted, then built" section at the end of this file (11dc), which also
   holds the no-JS and script-failed states. */
.reveal.in .part{opacity:1;transform:none;animation:none}
.reveal.in .part:nth-child(2){transition-delay:.09s}.reveal.in .part:nth-child(3){transition-delay:.18s}.reveal.in .part:nth-child(4){transition-delay:.27s}.reveal.in .part:nth-child(5){transition-delay:.36s}.reveal.in .part:nth-child(6){transition-delay:.45s}
.reveal.in.settled .part:nth-child(n){transition-delay:0s}
/* living elements: only animate while on screen; paused on hidden tabs */
.live .breathe{animation:none}
.live.on .breathe{animation:breathe 5s ease-in-out infinite;animation-delay:-1.2s}
.live.on .graft.away .breathe{animation-play-state:paused} /* 11fo S14, 17 October 2026: the graft bead rests while its button is off the screen (site.js sets .away), inside a Services still on screen; it breathes on from there when the button is back */
@keyframes breathe{0%,100%{opacity:.35}50%{opacity:1}}
.live .travel{animation:none}
.live.on .travel{animation:travel 8s linear infinite;animation-delay:-2s}
@keyframes travel{0%{left:0}100%{left:calc(100% - 7px)}} /* was translateX(-30%) to translateX(130%): percentages of the 7px dot itself, so the light jittered 9px over step 1 and never travelled */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* trunk */
.trunk{position:absolute;left:50%;top:0;width:48px;transform:translateX(-50%);pointer-events:none;z-index:1;overflow:visible}
.trunk .sap{fill:none;stroke:url(#sap);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:none}
.trunk .join .linen{fill:var(--text);opacity:0;transition:opacity var(--d-med) var(--ease-out)} /* 11fo S11, 16 October 2026: an unlit knot is a hairline ring (the bead below), no longer a grey capsule at .55 that read as a smudge in a still frame; the linen wraps it as the sap arrives. */
.trunk .join .bead{fill:var(--teal);fill-opacity:0;stroke:var(--line);stroke-width:1;transition:fill-opacity var(--d-med) var(--ease-out),stroke-opacity var(--d-med) var(--ease-out)} /* 11fo S11: the unlit ring, in the page's hairline colour (was a teal bead at .35) */
.trunk .join.lit .bead{fill-opacity:1;stroke-opacity:0}
.trunk .join .glow{fill:var(--accent);opacity:0;transition:opacity var(--d-med) var(--ease-out)}
.trunk .join.lit .linen{opacity:.9}
.trunk .join.lit .bead{opacity:1}
.trunk .join.lit .glow{opacity:.35;animation:glow 5s ease-in-out infinite;animation-delay:-1.5s}
@keyframes glow{0%,100%{opacity:.2}50%{opacity:.5}}
html.js .trunk .join:not(.on) .glow,html.js #premise figure:not(.on) .sapline{animation-play-state:paused} /* over8 step 27: the decorative loops rest off screen, as the badge glow does. */
.trunk .sap-end{fill:var(--teal);opacity:.9;transform-box:fill-box;transform-origin:center;transform:scale(.6);transition:transform var(--d-med) var(--ease-out)}.trunk.grown .sap-end{transform:none} /* over8 step 7: a node rides the growing tip. */
.trunk .sap-ring{fill:none;stroke:var(--teal);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}.trunk.arrived .sap-ring{animation:knot-ring 1.4s var(--ease-out)}
@keyframes knot-ring{from{opacity:.8}to{opacity:0;transform:scale(3.2)}}
html.js .branch:not(.reached)::before{opacity:0} /* over8 step 7: a stub waits for the tip. */

/* credentials */
#credentials .row{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;align-items:baseline;padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#credentials .num{font-family:var(--display);font-size:clamp(34px,4vw,54px);line-height:1}
#credentials .lbl{margin-top:8px}
#credentials .src{margin-top:14px;font-size:13px;color:var(--text-2)}

/* triggers: 2x2 doors straddling the trunk */
#triggers .doors{display:grid;grid-template-columns:1fr 1fr;gap:28px 64px}
.door{display:flex;flex-direction:column;gap:12px}
.door .line1{margin:0;font-family:var(--display);font-size:var(--fs-card);line-height:1.2} /* 10k-2026-09-30 lift 10: was 28px at 1440 */
.door .result{padding-top:12px;border-top:1px solid var(--line);color:var(--text-2)}
.door .link{margin-top:auto;align-self:flex-start;transition:opacity var(--d-med) var(--ease-out),transform var(--d-med) var(--ease-out),text-decoration-color var(--d-fast) var(--ease-out)} /* (0,2,0) and later than `.reveal .part` (0,2,0), which replaced the `.link` shorthand (0,1,0) on these four and left the underline with no transition to fade. Carries the entrance properties too, or the shorthand would drop them. */
/* the doors take the same 2px lift as `.branch .card:hover` and `#wealth .tier:is(:hover,:focus-within)`, following the tickets in also answering :focus-within, so the card responds when the link inside it is tabbed to. The transition repeats the three properties the `[data-draft]` rule animates: this selector outranks it (1,1,0 over 0,1,0) and a bare transform transition would replace the shorthand and drop the drafted-to-built fade. Cite selectors, never line numbers: an earlier draft of this comment pointed at a line number, and its own insert pushed that rule three lines down. */
#triggers .door{transition:opacity var(--d-med) var(--ease-out),filter var(--d-med) var(--ease-out),border-color var(--d-med) var(--ease-out),transform var(--d-fast) var(--ease-out)}
#triggers .door:is(:hover,:focus-within){transform:translateY(-2px)}
#triggers .door:has(:focus-visible){border-color:var(--accent-muted);border-top-color:var(--accent);transition-duration:var(--d-med),var(--d-med),var(--d-fast),var(--d-fast)} /* 10k-2026-09-30 lift 14: the lift alone was nearly invisible; */

/* premise */
#premise .premise-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
#premise .statement p + p{margin-top:18px} /* this is what sets the bridge line's gap too: it is (1,1,2) and `#premise .bridge` is (1,1,0). The bridge carried a dormant margin-top:34px from the build until 2026-09-16; the founder chose the 18px the page has always shown (11bt). */
#premise .bridge{font-family:var(--display);font-size:var(--fs-sub);line-height:1.2;max-width:26ch} /* 10k-2026-09-30 lifts 10 and 5: was 31.7px, a size of its own; */
#premise .lede+.lede{font-size:inherit;color:var(--text)} /* clear8 2026-10-02: the second paragraph is body text in ivory under the grey lede, and the bridge stays its pull quote. */
#premise figure{margin:0}
#premise .diagram{width:100%;height:auto}
#premise .diagram text{font-family:var(--mono);font-size:11px;letter-spacing:.1em;fill:var(--text-2);text-transform:uppercase}
#premise .diagram .scion{stroke:var(--text-2);stroke-width:1.5;fill:none}
#premise .diagram .trunkline{stroke:var(--text);stroke-width:2.5;fill:none}
#premise .diagram .sapline{stroke:url(#sap2);stroke-width:2;fill:none;stroke-dasharray:6 8;animation:dash 7s linear infinite;animation-delay:-2s}
@keyframes dash{to{stroke-dashoffset:-140}}
#premise .diagram .union{fill:var(--teal)}
#premise .diagram .unionglow{fill:var(--accent);opacity:.25}
#premise .turn{margin-top:16px;max-width:56ch} /* 10k-2026-09-30 lift 13: now a grid item; */
/* 10k-2026-09-30 lift 13: on desktop "Deep strategic excellence" and its list take the empty right column under the diagram, so the left column ends on the bridge line as its pull quote… */
@media (min-width:901px){
  #premise .premise-grid{row-gap:44px}
  #premise .statement{grid-column:1;grid-row:1/span 2}
  #premise figure{grid-column:2;grid-row:1}
  #premise .turn{grid-column:2;grid-row:2;margin-top:0}
}
#premise .turn ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
#premise .turn li{padding-left:18px;position:relative;color:var(--text-2)}
#premise .turn li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--text-2)}
#premise .backplate{position:absolute;inset:0;z-index:0;opacity:.18;background:center/cover no-repeat;mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}

/* services: hold to graft + four branches */
/* 10k-2026-09-30 lift 1: the still is split into two layers so each mask has its own frame. */
#services .backplate{position:absolute;inset:0;z-index:0;pointer-events:none;mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
#services .plate{position:absolute;inset:0;opacity:.32;background:center/cover no-repeat;mask-image:linear-gradient(90deg,#000 0%,#000 40%,transparent 72%);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 40%,transparent 72%)}
/* 10k-2026-09-30 lift 1: from 1024px up the still is re-plated onto its subject. */
@media (min-width:1024px){
  #services .backplate{mask-image:linear-gradient(180deg,transparent 0,#000 440px,#000 calc(100% - 380px),transparent);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 440px,#000 calc(100% - 380px),transparent)}
  #services .plate{position:sticky;inset:auto;top:0;height:100vh;height:100svh;opacity:.4;background-position:2% 50%;mask-image:linear-gradient(90deg,#000 0%,#000 34%,transparent 50%);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 34%,transparent 50%)}
}
#services .wrap{position:relative;z-index:2}
#services{--g:0} /* the hold's progress, 0 to 1, written by site.js: the button and the four branches both read it (11cx) */
#services .graft-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:clamp(30px,4vw,56px)}
.graft{position:relative;width:88px;height:88px;border-radius:50%;background:var(--panel);border:1px solid var(--line-strong);color:var(--text);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;padding:0;display:grid;place-items:center;transition:border-color var(--d-fast) var(--ease-out),transform var(--d-fast) var(--ease-out)}
.graft:hover{border-color:var(--text)}
.graft.holding{transform:scale(.97)}
.graft svg{width:60px;height:60px;overflow:visible}
.graft .g-trunk{stroke:var(--text);stroke-width:3;stroke-linecap:round}
.graft .g-scion{stroke:var(--text-2);stroke-width:2.5;stroke-linecap:round;transform:translateX(calc((1 - var(--g))*6px));transition:stroke var(--d-fast)}
.graft .g-stem{fill:none}
.graft .g-leaf{fill:var(--text-2);stroke:none;transition:fill var(--d-med) var(--ease-out)}
.graft[aria-pressed="true"] .g-leaf{fill:var(--accent)}
.graft .g-linen{stroke:var(--text);stroke-width:6;stroke-linecap:butt;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--g));opacity:.85}
.graft .g-sap{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--g))}
.graft .g-bead{fill:var(--teal);opacity:var(--g)}
.graft .g-halo{fill:var(--accent);opacity:calc(var(--g)*.18)}
.graft[aria-pressed="true"]{border-color:var(--accent)}
.graft-label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
.graft-hint{font-size:var(--fs-meta);color:var(--text-2);text-shadow:var(--tshadow)} /* 10k-2026-09-30 lift 7: the site's halo keeps the grey under the ivory label: over the leaf still below 1024px it fell to 3.5:1 at its worst pixel; */
.branches{list-style:none;margin:0;padding:0;display:grid;gap:22px;width:min(100%,50%);margin-left:auto}
.branches>.gut{display:none} /* 11fo F1, 17 October 2026: the gutter trunk's carrier (site.js), drawn only while the phone's gutter trunk grows (below) */
.branch{position:relative;padding-left:56px;--p:clamp(0,calc(var(--g) * 4 - var(--k,0)),1)} /* 11cv: full strength from the start. 11cx: --p is this branch's share of the hold, 0 to 1 over its own quarter, so the four draw one after another */
.branch:nth-child(2){--k:1}.branch:nth-child(3){--k:2}.branch:nth-child(4){--k:3}
.branch:not(.reached){--p:0} /* until the trunk's tip has grown to it (site.js), a branch keeps its stub and its card stays unlit, so nothing grafts onto thin air */
.branch::before{content:"";position:absolute;left:0;top:27px;width:56px;height:2px;border-radius:1px;background:linear-gradient(90deg,var(--accent),rgba(127,203,122,.55));transform-origin:left;transform:scaleX(calc(.35 + .65 * var(--p)));opacity:calc(.5 + .5 * var(--p));transition:transform var(--d-med) var(--ease-out),opacity var(--d-med) var(--ease-out)} /* trunk to card edge */
.branch::after{content:"";position:absolute;left:-4px;top:24px;width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--accent);opacity:min(1,calc(var(--p) * 3));transform:scale(calc(.4 + .6 * min(1,calc(var(--p) * 3))));pointer-events:none;transition:opacity var(--d-med) var(--ease-out),transform var(--d-med) var(--ease-out)} /* the union on the trunk, set as the branch starts */
.branch .card{transition:border-color var(--d-med) var(--ease-out),box-shadow var(--d-med) var(--ease-out),transform var(--d-fast) var(--ease-out)}
.branch .card .kicker{transition:color var(--d-med) var(--ease-out)}
@supports (color:color-mix(in srgb,red 50%,blue)){ /* each card lights with its own branch while the hold runs; without color-mix they light together once taken */
  .branch .card{border-color:color-mix(in srgb,rgba(127,203,122,.55) calc(var(--p) * 100%),var(--line));box-shadow:0 18px 48px -24px rgba(127,203,122,calc(var(--p) * .35))}
  .branch .card .kicker{color:color-mix(in srgb,var(--accent) calc(var(--p) * 100%),var(--text-2))}
}
#services.grafting .branch::before,#services.grafting .branch::after,#services.grafting .branch .card,#services.grafting .branch .card .kicker{transition:none} /* site.js writes --g every frame while the hold runs or lets go */
@media (hover:hover){.branch .card:hover{transform:translateY(-2px)}} /* letter-recut 2026-10-01: a tap on a phone's We provide button no longer leaves its card raised. */
.branch .promise{font-family:var(--display);font-size:var(--fs-card);margin-top:6px} /* 10k-2026-09-30 lift 10: was 25.9px at 1440 */
.branch .body{margin-top:12px;color:var(--text-2)}
.branch .starts{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:var(--fs-meta);color:var(--text-2)}
.branch .starts b{display:block;margin-bottom:6px;font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)} /* over8 step 30: "We provide:" is the mono kicker label on its own line, under a hairline. */
.branch .answers{margin:12px 0 0;padding:0;list-style:none;font-size:var(--fs-meta);color:var(--text-2);display:grid;gap:4px}
.fine{font-family:"Ingrafta Fine",var(--body);font-size:var(--fs-fine);font-style:italic;font-synthesis:none} /* the exclusions caveat, in the card list and inline in the matching FAQ answer; over8 step 11: a real italic, never a slanted roman */
#services.taken .branch{opacity:1}
#services.taken .branch.reached::before{transform:scaleX(1);opacity:1}
#services.taken .branch.reached .card{border-color:rgba(127,203,122,.55);box-shadow:0 18px 48px -24px rgba(127,203,122,.35)}
#services.taken .branch.reached .card .kicker{color:var(--accent)}
#services.taken .branch:nth-child(2){transition-delay:.16s}#services.taken .branch:nth-child(2)::before,#services.taken .branch:nth-child(2) .card{transition-delay:.16s}
#services.taken .branch:nth-child(3){transition-delay:.32s}#services.taken .branch:nth-child(3)::before,#services.taken .branch:nth-child(3) .card{transition-delay:.32s}
#services.taken .branch:nth-child(4){transition-delay:.48s}#services.taken .branch:nth-child(4)::before,#services.taken .branch:nth-child(4) .card{transition-delay:.48s}
#services.taken.settled .branch:nth-child(n),#services.taken.settled .branch:nth-child(n)::before,#services.taken.settled .branch:nth-child(n) .card{transition-delay:0s!important}
#services .integration{margin-top:40px;width:min(100%,50%);margin-left:auto;display:flex;flex-direction:column;gap:18px}
#services.taken .integration{opacity:1}
#services .integration .line{font-family:var(--display);font-size:var(--fs-sub);line-height:1.2} /* 10k-2026-09-30 lift 10: was 28.8px at 1440 */

/* method: the fit block, four flat columns on the same four tracks as the step line beneath it, so the page trunk falls in the gap between columns 2 and 3 at every width from 1024 up, exactly as it does for the steps. Item and label copy the .door pattern without its card. */
#method .fit{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);column-gap:72px;row-gap:28px}
#method .factor{display:flex;flex-direction:column;gap:12px;min-width:0}
#method .factor h3{font-size:var(--fs-card);line-height:1.2} /* 10k-2026-09-30 lift 10: was 28px at 1440 */
#method .steps{list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);column-gap:72px;row-gap:28px;width:100%;position:relative;counter-reset:step}
#method .steps::before{content:"";position:absolute;left:0;right:0;top:11px;height:1px;background:var(--line)}
#method .step{position:relative;padding-top:30px}
#method .step::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px var(--canvas)}
#method .step h3{font-size:var(--fs-card);line-height:1.2;margin-bottom:8px} /* clear8 2026-10-02: the founder's call, each stage name a Bodoni heading at the card step. */
#method .step h3 .kicker{display:block;line-height:1.55;margin-bottom:2px} /* clear8 2026-10-02: the number keeps the old kicker's line box, so every dot stays centred on its step's first line. */
#method .step p{color:var(--text-2)}
#method .outcome{grid-column:1/-1;max-width:52ch;font-size:var(--fs-lede);color:var(--text)} /* the results line closes the step line: spans every column (1/-1, so the one-column phone grid mints no implicit track). */
/* 11cv: headings balance their lines (no one-word last line) and running text avoids widows; progressive, never widens a box */
h2,h3,.faq-item summary,.bridge{text-wrap:balance}
p,li{text-wrap:pretty} /* 10k-2026-09-30 lift 5: list items too; */
/* 10k-2026-09-30 lift 5: a multi-sentence display line breaks at its sentences, never mid-sentence ("team. */
span.sent{display:inline-block} /* clear8 2026-10-02: at every width now (no 375px floor), and only on spans, never the contact form's .sent state. */
.nw{white-space:nowrap} /* "mid-morning" is never split at its hyphen; nor "member-only" (card 02's last bullet, which text-wrap:pretty on li split as "member- / only" at 430 and 820) */
.caps{font-size:.86em;font-weight:460;letter-spacing:.05em;margin-right:-.05em} /* 11fo S8, 16 October 2026: sized caps for the acronyms in running text (CFO, KPI, Q&A...), the same letters: the shipped fonts have no real small caps, so the capitals are set 14% smaller, a touch heavier to keep the stem weight, and tracked .05em; the negative margin takes the tracking back after the last letter, so the punctuation after it closes up. 11fo S8/S9/S10 review, 16 October 2026: only the capitals go in the span; a plural's "s" or a possessive's "’s" follows it at the text's own size, as with real small caps ("<span class="caps">KPI</span>s", "<span class="caps">CFO</span>’s"), with no space between, so the word is still one word on the line and in verify-copy.py (its TYPE_SPAN unwrap) */
#method .factor p,#method .step p,#method .outcome{text-wrap:pretty} /* narrow columns left one-word last lines ("first.", "pull it."); progressive, cannot widen a box */
#method .dot{position:absolute;top:8px;left:0;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
#method .foot{margin-top:40px;display:flex;flex-direction:column;flex-wrap:wrap;gap:22px;align-items:flex-start;width:100%} /* 10k-2026-09-30 lift 13: the button sits left, under the words it acts on (it floated at the far right, x 1054, while its text sat at the left) */
#method .foot p{width:min(100%,44%)}
#method .foot p{max-width:46ch}
@media (min-width:1024px){#method .wrap{display:grid;grid-template-columns:1fr 1fr;column-gap:72px}#method .wrap>*{grid-column:1/-1;min-width:0}#method .steps{grid-row:3/span 2;grid-template-rows:subgrid;row-gap:0}#method .outcome{margin-top:28px;align-self:start}#method .wrap>.foot{grid-column:2;grid-row:4;margin-top:28px;align-self:start;position:relative;z-index:1}#method .foot p{width:auto}} /* clear8 2026-10-02: the boutique line and its button take the right column beside the 90-day payoff, raised over the step list that shares its row. */

/* results stub (the testimonials stub became the #reviews row on 2026-09-16) */
#results .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

/* founder */
#founder .founder-grid{display:grid;grid-template-columns:minmax(200px,30%) 1fr;column-gap:clamp(64px,10vw,150px);row-gap:32px;align-items:start}
#founder .message h2{margin-bottom:24px}
#founder .portrait{margin:0;position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:var(--panel) center/cover no-repeat} /* 4:5 suits the landscape source; 3:4 cropped a third of its width */
#founder .portrait img{width:100%;height:100%;object-fit:cover}
#founder .portrait::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 80px rgba(7,18,36,.6);pointer-events:none} /* 10k-2026-09-30 lift 14: static, as reduced motion showed it (it pulsed .6 to 1 over 8s, on screen or not) */
#founder .message p{font-size:var(--fs-lede);line-height:1.5} /* over8 step 11: the letter on the lede step (its own 1.35vw clamp set 19.4px at 1440). */
#founder .message p + p{margin-top:18px}
#founder .sig{margin-top:26px}
#founder .sig .name{font-family:var(--display);font-size:var(--fs-card)}
#founder .sig .title,#founder .bio{color:var(--text-2);margin-top:6px}
#founder .message .bio{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);max-width:52ch;font-size:inherit;color:var(--text);font-variant-numeric:lining-nums tabular-nums} /* (1,2,0) so it beats #founder .message p (1,1,1); over8 step 17: ivory body size under a hairline, kept by letter-recut 2026-10-01; clear8 2026-10-02: inherited, so 16px on phones. */
#founder .message .reply{margin-top:18px;font-size:var(--fs-meta);color:var(--text-2)} /* was (1,1,0) and lost to #founder .message p, so its 14px never applied */
#wealth .book{margin-top:28px;padding-top:24px;border-top:1px solid rgba(11,28,53,.14);display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}
/* the real cover, page 1 of the Playbook PDF (11df): a book treatment, a spine shade down the left edge and a soft shadow; the h3 names the book, so the picture is decorative */
#wealth .book .cover{position:relative;width:150px;border-radius:2px 5px 5px 2px;overflow:hidden;background:#F3F3F3;box-shadow:0 1px 2px rgba(11,28,53,.14),0 10px 22px -8px rgba(11,28,53,.34)}
#wealth .book .cover img{display:block;width:100%;height:auto}
#wealth .book .cover::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,rgba(11,28,53,.22) 0,rgba(11,28,53,.08) 3px,rgba(255,255,255,.18) 5px,rgba(255,255,255,0) 10px);box-shadow:inset 0 0 0 1px rgba(11,28,53,.08)}
#wealth .book h3{font-size:var(--fs-card);margin-bottom:10px} /* 10k-2026-09-30 lift 10: a card title, the tickets' size (was 22px); */
#wealth .book .btn{margin-top:14px}
#founder .cta{margin-top:34px}

/* the ivory room */
.room{background:var(--room);color:var(--room-text)}
.room .kicker,.room .chip{color:var(--room-text-2)}
.room .chip{background:rgba(11,28,53,.06);border-color:rgba(11,28,53,.15);text-shadow:none;color:var(--room-text)}
.room .chip::before{background:var(--teal-ink);box-shadow:none}
.room .lede,.room .muted{color:var(--room-text-2)}
.room .btn-primary{background:var(--ink);color:var(--room)}
.room .btn-primary:hover{background:#13294d}
.room .btn-ghost{color:var(--room-text);border-color:rgba(11,28,53,.4)}
.room .btn-ghost:hover{border-color:var(--ink)}
.room .link{color:var(--teal-ink);text-decoration-color:rgba(39,106,97,.6);text-decoration-thickness:1px;transition:text-decoration-color var(--d-fast) var(--ease-out),text-decoration-thickness var(--d-fast) var(--ease-out)} /* .4 read as decoration rather than as a link */
.room .link:hover{text-decoration-color:var(--teal-ink);text-decoration-thickness:2px} /* (0,3,0) so it beats .room .link; without it the generic .link:hover is overridden here and the room's links have no hover at all. Thickness carries the change: 60% to 100% of one hue is too small to feel. */
.room .card{background:var(--room-panel);border-color:rgba(11,28,53,.12)}
.room .hairline{background:rgba(11,28,53,.14)}
.room :focus-visible{outline-color:var(--teal-ink)} /* the accent ring is 1.8:1 on ivory; teal-ink is the room's focus colour */
#wealth .room-head{display:grid;grid-template-columns:minmax(220px,40%) 1fr;column-gap:clamp(64px,10vw,150px);row-gap:32px;align-items:center}
#wealth .badge-col{order:-1;display:flex;flex-direction:column;align-items:center;gap:28px} /* the badge with the cockpit line centred under it, one block against the text column */
#wealth .badge{width:min(100%,260px);margin:0 auto;position:relative;order:-1}
#wealth .badge img{width:100%;height:auto;position:relative;z-index:1}
#wealth .badge::before{content:"";position:absolute;inset:-6%;border-radius:50%;background:conic-gradient(from 0deg,rgba(74,201,64,.35),rgba(43,152,130,.25),rgba(15,66,123,.3),rgba(74,201,64,.35));filter:blur(18px);opacity:.8;animation:spin 24s linear infinite;animation-delay:-6s}
html.js #wealth .badge:not(.on)::before{animation-play-state:paused} /* 10k-2026-09-30 lift 14: the glow turns only while the badge is on screen (.live/.on); */
@keyframes spin{to{transform:rotate(360deg)}}
#wealth h2{max-width:22ch}
#wealth .tag{margin-top:22px;font-family:var(--display);font-size:var(--fs-sub);line-height:1.25;max-width:30ch} /* 10k-2026-09-30 lift 10: was 28px at 1440 */
#wealth .body{margin-top:16px;max-width:56ch;color:var(--room-text-2)}
/* the cockpit line, under the badge (11co); the five tiles that followed it came off in 11cn */
#wealth .gauges{margin:0;max-width:34ch;text-align:center;font-size:var(--fs-lede);line-height:1.45;color:var(--room-text)}
/* The Saturday Review (11cp): 16:9 always, 4:5 on phones, the founder's call. The poster is a button over the video until
   the press; nothing plays on its own. */
/* never taller than the window below the fixed ribbon: the width follows the height budget (svh where supported) */
#wealth .wealth-film{position:relative;container-type:inline-size;margin:clamp(36px,5vw,64px) auto 0;border-radius:18px;overflow:hidden;aspect-ratio:16/9;background:var(--room-panel);
  width:min(100%,calc((100vh - var(--nav-h) - 48px) * 16 / 9));width:min(100%,calc((100svh - var(--nav-h) - 48px) * 16 / 9))}
#wealth .wealth-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--room-panel)}
#wealth .film-play{position:absolute;inset:0;width:100%;margin:0;padding:0;border:0;background:none;cursor:pointer;display:block;color:var(--room)}
#wealth .film-play picture,#wealth .film-play img{display:block;width:100%;height:100%;object-fit:cover}
/* 10k-2026-09-30 lift 14: the poster crossfades into the film over 250ms (it cut). */
#wealth .film-play picture,#wealth .film-cue{transition:opacity .25s var(--ease-out)}
#wealth .wealth-film.playing .film-cue{opacity:0}
#wealth .wealth-film.rolling .film-play picture{opacity:0}
html.js #wealth .wealth-film.rolling .film-play.part{visibility:hidden;transition:visibility 0s linear .25s} /* (1,5,1) over the 11dc playing rule's transition:none (1,4,1) */
html.js #wealth .wealth-film.house.playing .film-play{pointer-events:none} /* 11fo G3, 17 October 2026: once the house player has started, a press on the frame passes the poster (inert then, site.js) to the video's own handler, which pauses and plays; until now, while the film waited for its first data, it went to the poster and started the film again */
/* the cue sits in the poster's clear right third, beside the sign-in window (11cr) */
#wealth .film-cue{position:absolute;right:clamp(28px,7%,120px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:14px}
#wealth .film-disc{position:relative;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;padding-left:4px;background:linear-gradient(180deg,#7FCB7A,#276A61 55%,#1B4F8C);box-shadow:0 12px 26px -14px rgba(11,28,53,.55);transition:transform var(--d-fast) var(--ease-out)}
#wealth .film-disc::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--teal-ink);opacity:0;transform:scale(.94);transition:transform .5s var(--ease-out),opacity .5s var(--ease-out);pointer-events:none} /* 10k-2026-09-30 lift 14: the ring that widens out under the hand (fine pointers, below) */
#wealth .film-len{padding:7px 11px;border-radius:6px;background:rgba(251,248,241,.86);color:var(--room-text);white-space:nowrap}
#wealth .film-play:focus-visible{outline:none}
#wealth .film-play:focus-visible .film-disc{outline:2px solid var(--ink);outline-offset:4px}
/* the end card sits in the last frame's clear lower third */
#wealth .film-end{position:absolute;left:0;right:0;bottom:clamp(20px,6%,56px);display:flex;flex-wrap:wrap;gap:12px 16px;justify-content:center;align-items:center;padding:0 20px}
#wealth .film-end[hidden]{display:none}
#wealth .film-again{min-height:48px;padding:0 6px;border:0;background:none;cursor:pointer;font:600 16px/1 var(--body);color:var(--teal-ink);text-decoration:underline;text-decoration-color:rgba(39,106,97,.6);text-underline-offset:3px}
#wealth .film-cap{margin:12px auto 0;font-size:var(--fs-fine);color:var(--room-text-2);
  width:min(100%,calc((100vh - var(--nav-h) - 48px) * 16 / 9));width:min(100%,calc((100svh - var(--nav-h) - 48px) * 16 / 9))}
#wealth .film-link{margin-top:-12px} /* clear8 2026-10-02: body size, like every text link (was 16px, the buttons' size). */
@media (max-width:700px){
  #wealth .wealth-film,#wealth .film-cap{width:min(100%,calc((100vh - var(--nav-h-phone) - 32px) * 4 / 5));width:min(100%,calc((100svh - var(--nav-h-phone) - 32px) * 4 / 5))}
  #wealth .wealth-film{aspect-ratio:4/5}
  /* phones: in the clear band between the sign-in card (ends 69% down) and the sample chip (93%), clear of the lock-up */
  #wealth .film-cue{top:81%;right:auto;left:50%;transform:translate(-50%,-50%);flex-direction:row;gap:12px}
  #wealth .film-disc{width:52px;height:52px}
  #wealth .film-len{font-size:11px;padding:6px 9px}
  #wealth .film-end{flex-direction:column;gap:10px;bottom:5%}
}
/* a narrow film (under 320px, whatever the window): a tighter cue row, a little higher on the 4:5 poster */
@container (max-width:319px){
  #wealth .film-cue{gap:8px}
  #wealth .film-disc{width:44px;height:44px}
  #wealth .film-len{letter-spacing:.06em;padding:6px 7px}
}
@media (max-width:700px){@container (max-width:319px){#wealth .film-cue{top:79%}}}
/* narrower than that row (a phone on its side): the disc alone; the button's name carries the words */
@container (max-width:270px){#wealth .film-len{display:none}}
/* a small 16:9 film (a phone on its side, wider than 700px): the poster's label would sit on the sign-in window, so the
   poster shows the disc alone */
@media (min-width:701px){@container (max-width:640px){#wealth .film-len{display:none}}}
/* 11fo S14, 17 October 2026 (seen on 16 October), as the founder chose on 17 October 2026 ("Yes, use the tidier layout"): on a phone
   held sideways (a short landscape screen) the film's end card sat on the last frame's list ("$30 a month · 30 minutes a week", "What
   you get when you join" and its four lines), and at 667 x 375, 568 x 320 and 740 x 300 its buttons also ran out of the frame. Wherever
   the full card would touch that list or leave the frame, it is tidied, with the same three items, words and colours:
     - one row of the ribbon's compact buttons (14px, 44px tall, 8px apart) below the list, where the three fit side by side inside
       the film's 8px sides (a 16:9 film from 458.51px wide; they need 458.02px: 153.5 + 187.7 + 84.9px and two 8px gaps); the row
       may still wrap, so larger text breaks it onto a second line inside the frame (the final recheck, 17 October 2026);
     - else a compact column (15px, 44px tall, 8px apart; a label wider than the frame breaks onto a second, balanced line);
     - and where even that column's "Send me the free checklist" lands on the list, it takes the room's ivory, so the list does not
       show through it.
   Everywhere the full card is clear of the list and inside the frame it is as before: upright phones, tablets and the desktop never
   match, nor a sideways 4:5 film from 292.52px wide (the full column's first button 164px above its 5% foot, clear of the list's last
   line: 0.95h - 164 >= 0.5015h) or a 16:9 film from 580.62px (the full card on one row, which needs 580.61px). The list is the text rows
   of the films' own last frames (ffmpeg, 2px around each line's ink); measured in a sweep of 3,243 sideways screens from 330 x 250 to
   960 x 510 and 4,934 more a pixel apart (Chrome, devicePixelRatio 2, touch) against the page before S14, the items' widths the same in
   WebKit to 0.01px. The compact column's checklist button lands on the list under 193.54px on a 4:5 film (its label two lines from
   219px down) and at every 16:9 width that takes the column. Below about 145px (4:5) and 276px (16:9), screens 273px tall and less,
   no card fits inside the frame, as before. */
@media (orientation:landscape) and (max-height:500px) and (max-width:700px){
  @container (max-width:292.5px){
    #wealth .film-end{flex-direction:column;flex-wrap:nowrap;gap:8px;bottom:5%;padding:0 8px}
    #wealth .film-end .btn{min-height:44px;max-width:100%;padding:10px 16px;font-size:15px;line-height:1.15;white-space:normal;text-align:center;text-wrap:balance}
    #wealth .film-again{min-height:44px;font-size:15px}
  }
  @container (max-width:193.5px){#wealth .film-end .btn-ghost{background:var(--room)}}
}
@media (orientation:landscape) and (max-height:500px) and (min-width:701px){
  @container (min-width:458.51px) and (max-width:580.62px){
    #wealth .film-end{gap:8px;padding:0 8px}
    #wealth .film-end .btn{min-height:44px;padding:10px 14px;font-size:14px}
    #wealth .film-again{min-height:44px;font-size:14px}
  }
  @container (max-width:458.5px){
    #wealth .film-end{flex-direction:column;flex-wrap:nowrap;gap:8px;bottom:5%;padding:0 8px}
    #wealth .film-end .btn{min-height:44px;max-width:100%;padding:10px 16px;font-size:15px;line-height:1.15;white-space:normal;text-align:center;text-wrap:balance}
    #wealth .film-again{min-height:44px;font-size:15px}
    #wealth .film-end .btn-ghost{background:var(--room)}
  }
}
/* 11fo S14, 17 October 2026 (the founder's "Yes, use the tidier layout", finished after the final recheck): the compact column (and the
   one row, where larger text wraps it) still covered lines of the list only in part, so half-cut words showed between and beside the
   buttons (844 x 340, 667 x 375 and 4,133 sideways sizes in the recheck's sweep). Wherever any of the card's three items lands on the
   list, site.js marks the card .panel and a plain panel in the room's ivory sits behind it: the film's full width, from the gap above
   the highest line the card reaches (--ep-top, from the card's top) down to the frame's foot (--ep-foot), so each line is wholly shown
   or wholly covered. The checklist button's ivory, above, is the same ivory on it. An empty pseudo-element, no words; it takes no
   presses (they reach the frame as before). Only on a short sideways screen, and only where the card touches the list: everywhere
   else nothing changes. 11fo S14, 17 October 2026 (the panel's recheck): the top also clears the keyboard focus ring (:focus-visible,
   5px outside a button), which crossed the line above the panel (844 x 340); site.js places --ep-top above the highest line the card
   or its ring reaches. */
@media (orientation:landscape) and (max-height:500px){
  #wealth .film-end.panel{isolation:isolate}
  #wealth .film-end.panel::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:var(--ep-top,0px);bottom:var(--ep-foot,0px);background:var(--room);pointer-events:none}
}
/* 11fo S13, 16 October 2026: the house control strip, in place of Chrome's black bar. It sits 4px below the frame, never over it, so the
   burned-in "Recorded in the app" label (bottom left of every frame) stays clear, and it is hidden until the visitor's press (site.js
   opens it in 320ms on the FAQ's curve; at once under reduced motion). Pause, the line, the time, mute, full screen, the reviews row's
   44px ringed buttons and its 1.5px icons; the line is the trunk's sap laid on its side (sage at the start, the disc's teal ink and
   cobalt at the end, fixed to the whole line, so the played part reveals it rather than squeezing it) with a teal-ink node riding
   its tip; the time in Plex Mono, the film's own label face, reads 0:44 (the length rounded up, as the cue; Chrome's bar read 0:43).
   4 + 44px is the 48px the frame's height budget already leaves under it, so on a short window the frame and the strip together
   still fit below the ribbon (site.js centres the two; measured at 1280 x 650 and 1366 x 625, the strip ends 4px above the window's foot). Never without JavaScript: there the native bar is the fallback (below). */
#wealth .film-bar{display:block;margin:4px auto 0;container-type:inline-size;
  width:min(100%,calc((100vh - var(--nav-h) - 48px) * 16 / 9));width:min(100%,calc((100svh - var(--nav-h) - 48px) * 16 / 9))}
@media (max-width:700px){#wealth .film-bar{width:min(100%,calc((100vh - var(--nav-h-phone) - 32px) * 4 / 5));width:min(100%,calc((100svh - var(--nav-h-phone) - 32px) * 4 / 5))}} /* the 4:5 frame's width */
#wealth .film-bar[hidden]{display:none}
#wealth .fb-in{display:flex;align-items:center;gap:10px;height:44px}
#wealth .film-bar button{flex:none;width:44px;height:44px;border-radius:50%;padding:0;margin:0;display:grid;place-items:center;cursor:pointer;background:transparent;color:var(--room-text);border:1px solid rgba(11,28,53,.4);transition:border-color var(--d-fast) var(--ease-out),transform var(--d-fast) var(--ease-out)}
#wealth .film-bar button svg{width:20px;height:20px;display:block}
#wealth .film-bar button:active{transform:translateY(1px);transition-duration:var(--d-fast),.12s} /* every button sinks 1px while pressed (11bl) */
#wealth .film-bar button:focus-visible{outline-offset:2px;border-radius:50%}
#wealth .fb-play .i-pause,#wealth .film-bar.on .fb-play .i-play,#wealth .fb-mute .i-off,#wealth .fb-mute[aria-pressed="true"] .i-on{display:none}
#wealth .film-bar.on .fb-play .i-pause,#wealth .fb-mute[aria-pressed="true"] .i-off{display:block}
#wealth .fb-full[hidden],#wealth .fb-cc[hidden]{display:none}
/* 11fs, 27 October 2026: CC, the captions' toggle (site.js): the box drawn in outline while they are off; pressed, it fills with the
   ink and its two C's are cut out of it in the room's ivory: its state is shown by the icon alone, as Mute's is */
#wealth .fb-cc[aria-pressed="true"] .cc-box{fill:currentColor}
#wealth .fb-cc[aria-pressed="true"] .cc-cs{stroke:var(--room)}
#wealth .film-bar[aria-busy="true"] .fb-play svg{opacity:var(--a-pencil)} /* 11fo F6, 17 October 2026: while the film waits for its data after a press (site.js sets aria-busy on the strip), its play button's pause sign stands in pencil, at once and still, with no spinner; it inks the moment the film plays, and goes with a pause */
#wealth .fb-seek{--f:0;flex:1 1 auto;min-width:0;width:auto;height:44px;margin:0 4px;padding:0;background:none;border:0;cursor:pointer;-webkit-appearance:none;appearance:none}
#wealth .fb-seek:focus-visible{outline:none} /* the node takes the ring */
#wealth .fb-seek::-webkit-slider-runnable-track{height:2px;border-radius:1px;border:0;background:linear-gradient(90deg,transparent calc(7px + (100% - 14px) * var(--f)),#D3D0CA 0),linear-gradient(90deg,#7FCB7A,#276A61 55%,#1B4F8C)} /* --f, the share played (site.js), ends the sap at the node's centre (the 14px node travels 7px in from each end); #D3D0CA: the room's .14 navy hairline on ivory, solid, so the sap under the unplayed part never shows */
#wealth .fb-seek::-moz-range-track{height:2px;border-radius:1px;border:0;background:linear-gradient(90deg,transparent calc(7px + (100% - 14px) * var(--f)),#D3D0CA 0),linear-gradient(90deg,#7FCB7A,#276A61 55%,#1B4F8C)}
#wealth .fb-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;margin-top:-6px;border:0;border-radius:50%;background:var(--teal-ink);box-shadow:0 0 0 2px var(--room);transition:transform var(--d-fast) var(--ease-out),box-shadow var(--d-fast) var(--ease-out)}
#wealth .fb-seek::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--teal-ink);box-shadow:0 0 0 2px var(--room);transition:transform var(--d-fast) var(--ease-out),box-shadow var(--d-fast) var(--ease-out)}
#wealth .fb-seek:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--room),0 0 0 4px var(--teal-ink)}
#wealth .fb-seek:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px var(--room),0 0 0 4px var(--teal-ink)}
#wealth .fb-time{flex:none;display:flex;align-items:center;gap:7px;font:400 12px/1 var(--mono);letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--room-text-2);white-space:nowrap}
#wealth .fb-time #filmNow{color:var(--room-text)}
#wealth .fb-time i{display:block;width:1px;height:12px;background:currentColor;opacity:.55;transform:rotate(20deg)} /* a drawn hairline between the two times, not a glyph */
/* a strip of 440px or less (every phone held upright, a 4:5 film on a phone on its side): the line takes its own row above the buttons,
   the whole width of the frame (362px on a 402 phone, 280 on a 320, where one row left it 38px), the time follows the play button and
   mute and full screen keep to the right; 28 + 44px, so the strip is 4 + 72px there (the phone's frame is never height-capped upright) */
@container (max-width:440px){#wealth .fb-in{flex-wrap:wrap;height:auto;row-gap:0}#wealth .fb-seek{order:-1;flex:1 1 100%;height:28px;margin:0}#wealth .film-bar .fb-mute{margin-left:auto}}
@container (max-width:250px){#wealth .fb-in{gap:4px}#wealth .fb-time{font-size:11px;gap:5px;letter-spacing:.02em}} /* the 226px strip of a 4:5 film on a 667 x 375 phone on its side: one row of buttons still */
/* 11fs, 27 October 2026: with CC the buttons' row holds four 44px buttons and the time, about 295px with its 10px gaps, so on a strip
   of 300px or less (a 320px phone upright, 280px, and every 4:5 film on a phone on its side) the time moves up to the line's row, at
   its right end, and the buttons keep a row of their own: play on the left, mute, CC and full screen on the right. The line starts
   from the row less 100px, which leaves room for the time (78px and its 10px gap; 66 and 4 from 250px down) but not for the play
   button as well, so the row ends after the time. The strip stays 28 + 44px, as before, so the frame and its strip still fit where
   they did (226px: the line 157px, the buttons 188px of 226); under 188px (a phone on its side 320px tall or less) full screen still
   takes a third row, as it did before. */
@container (max-width:300px){#wealth .fb-seek{flex:1 1 calc(100% - 100px)}#wealth .fb-time{order:-1}}
#wealth .wealth-film video:fullscreen{object-fit:contain} /* the house frame crops to its slot (cover); full screen shows the whole picture */
/* 11fs, 27 October 2026: the captions, when a viewer turns them on: the page's own Source Sans 3 (::cue takes the page's fonts) in the
   letters in the browser's own caption colour (white unless the viewer chose another) with a soft shadow under them, on the
   browser's own band behind the words (the page sets neither colour), so every word reads over the film's light pages and its
   raccoon alike. A browser sizes a cue at 5% of the picture's smaller side; the page sets the size from the frame in container
   units instead (the frame is an inline-size container), which Chrome and WebKit both resolve against the frame (the fix round of 27
   October: a percentage in ::cue is Chrome's picture-based size but a fixed 16px base in WebKit, so Safari had 14px on every desktop
   film). The desktop's 16:9 film takes 80% of that size, 2.25% of the frame's width (24.5px at 1440 x 900, 21.2px at 1024 x 768),
   never under 14px; a phone's 4:5 film all of it, 5% of the frame's width (17.5px on a 390px phone, 14px on a 320px one), never
   under 14px and never over 6.1% of the width, so on a 4:5 film under about 230px (a phone on its side) the letters shrink with the
   film (11.1px at 568 x 320) and each cue keeps the two lines it is written on (at 14px eight cues took three lines there, and the
   first covered the film's own title). In full screen the frame no longer holds the picture, so the size follows the screen: the
   same share of the picture as the screen shows it (32.4px on a 1440 x 900 screen). Measured in Chrome and in WebKit, every cue at
   21 sizes. The band is the browser's, so the viewer's own caption style comes first, as it should: on a Mac with the default
   setting, the system's grey (Chrome behind each line, Safari as one rounded box behind the whole caption); Windows, Android and
   Firefox their standard black band. The founder's choices, 27 October 2026 (11fs): "Grey box only (Recommended)" (until then the
   page drew the night navy at .86 behind each line, which Safari showed inside its own grey box, two boxes), then "Device's own
   white (Recommended)" (the page's ivory letters, #F2EEE4, read at 3.8:1 on the Mac's grey; white reads at 4.4:1). */
#wealth .wealth-film video::cue{font-family:"Source Sans 3","Source Sans 3 Fallback","Source Sans Pro",-apple-system,"Segoe UI",sans-serif;font-size:max(14px,2.25cqw);font-weight:400;line-height:1.3;text-shadow:0 1px 2px rgba(7,18,36,.55)}
#wealth .wealth-film video:fullscreen::cue{font-size:max(14px,min(4vh,2.25vw))}
@media (max-width:700px){
  #wealth .wealth-film video::cue{font-size:min(max(14px,5cqw),6.1cqw)}
  #wealth .wealth-film video:fullscreen::cue{font-size:max(14px,min(5vw,4vh))}
}
/* 11fo F2, 17 October 2026 (the accessibility review): in forced colours (Windows High Contrast) the browser drops the line's gradients
   and every box-shadow and paints backgrounds in Canvas, so the line, its node and the node's focus ring all vanished (WCAG 2.4.7,
   1.4.11). There the line keeps its own colours off (forced-color-adjust:none) and is drawn in the system's: the played part in
   CanvasText, the rest in GrayText, the node in CanvasText with a Canvas rim, and the focus ring in Highlight around the node, as
   the ivory room's ring is; the time's hairline in CanvasText. The buttons' rings, borders and icons already follow the system's
   colours (outline, border and currentColor), so they need nothing. Nothing changes outside forced colours. */
@media (forced-colors:active){
  #wealth .fb-seek{forced-color-adjust:none}
  #wealth .fb-seek::-webkit-slider-runnable-track{background:linear-gradient(90deg,CanvasText calc(7px + (100% - 14px) * var(--f)),GrayText 0)}
  #wealth .fb-seek::-moz-range-track{background:linear-gradient(90deg,CanvasText calc(7px + (100% - 14px) * var(--f)),GrayText 0)}
  #wealth .fb-seek::-webkit-slider-thumb{background:CanvasText;box-shadow:0 0 0 2px Canvas}
  #wealth .fb-seek::-moz-range-thumb{background:CanvasText;box-shadow:0 0 0 2px Canvas}
  #wealth .fb-seek:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px Canvas,0 0 0 4px Highlight}
  #wealth .fb-seek:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px Canvas,0 0 0 4px Highlight}
  #wealth .fb-time i{forced-color-adjust:none;background:CanvasText}
  #wealth .fb-cc[aria-pressed="true"] .cc-cs{stroke:Canvas} /* 11fs: CC pressed, its C's cut out of the filled box in the system's own background */
}
#wealth .systems{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
#wealth .systems ol{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:sys}
#wealth .systems li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid rgba(11,28,53,.12)}
#wealth .systems li::before{counter-increment:sys;content:counter(sys,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--teal-ink)}
#wealth .systems li b{font-weight:600}
#wealth .systems li span{color:var(--room-text-2)}
#wealth .routine h3{max-width:none}#wealth .routine h3 .sent+.sent{display:block;max-width:none;margin-top:10px;font:400 var(--fs-lede)/1.45 var(--body);letter-spacing:0;color:var(--room-text-2)} /* clear8 2026-10-02: the first routine sentence pairs the seven systems head on one line at its size, and the Saturday sentence becomes its deck. */
@media (max-width:900px){#wealth .routine h3{font-size:var(--fs-card)}#wealth .routine h3 .sent+.sent{font-size:17px}} /* clear8 2026-10-02: stacked, the routine head sits one step under its pair, its deck at body size. */
@media (max-width:560px){#wealth .routine h3 .sent+.sent{font-size:16px}}
#wealth .routine ol{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px;counter-reset:r}
#wealth .routine li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:baseline}
#wealth .routine li::before{counter-increment:r;content:counter(r,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--teal-ink)} /* clear8 2026-10-02: the routine counts 01 to 05 in the seven systems' mono, one numbering voice for the spread. */
#wealth .routine li span{color:var(--room-text-2)}
#wealth .offer{display:grid;gap:18px}
#wealth .offer>.book:first-child{margin-top:0;padding-top:0;border-top:0}
#wealth #book{margin-top:clamp(40px,5vw,64px);width:min(100%,620px);margin-inline:auto} /* the book stands alone since the $30 includes list was folded into the pricing cards. It carries .card so it is opaque: centred, it sits on the page trunk, and .card z-index 2 puts it above that line the way the KPI tiles already do. */
#wealth .who{margin-top:clamp(36px,4vw,56px);padding-top:28px;border-top:1px solid rgba(11,28,53,.14);display:grid;grid-template-columns:1fr 1fr;gap:32px;color:var(--room-text-2)}
#wealth .who b{color:var(--room-text);font-weight:600}
#wealth .disclaimer{margin-top:22px;font-size:var(--fs-fine);color:var(--room-text-2)}
#wealth .handoff{margin-top:18px;font-size:inherit} /* body size, not fine print: it is a real next step for owners; clear8 2026-10-02: inherited, so 16px on phones like the body (was a fixed 17px). */

/* pricing: three joins on one stem */
#wealth .pricing{margin-top:clamp(40px,5vw,64px)}
#wealth .pricing{padding:clamp(40px,8vw,110px) 0 clamp(40px,5vw,64px);border-block:1px solid rgba(11,28,53,.14)}#wealth .pricing+.wealth-film{margin-top:clamp(40px,8vw,110px)} /* clear8 2026-10-02: the room reads as two chapters, pricing and then the film to the systems, each opening on a hairline and the top rhythm of a section. */
#wealth{padding-bottom:clamp(32px,5vw,72px)} /* clear8 2026-10-02: the reviews seam already parts the two rooms, so the ivory void above it is cut. */
#wealth .pricing-head{margin-bottom:clamp(28px,4vw,48px)} /* clear8 2026-10-02: the gap a section head keeps to its content. */
#wealth .pricing-head .kicker{display:block;margin-bottom:14px}
#wealth .pricing-head h3{max-width:32ch;font-size:var(--fs-card);line-height:1.15} /* clear8 2026-10-02: one step down to the size of the ticket titles, so the room reads headline, deck, tickets. */
#wealth .pricing-head p{margin-top:14px;max-width:56ch}
/* the grid owns the card padding so the stem and the three counters share one y */
#wealth .tiers{--pad:clamp(20px,2.4vw,24px);--seal:clamp(42px,3.7vw,52px);position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
/* the stem: one teal hairline behind the row, visible only in the two gaps; draws left to right once the cards have landed. y = 1px border + --pad + half of the 12px/1 counter line */
#wealth .tiers::before{content:"";position:absolute;left:0;right:0;top:calc(var(--pad) + 7px);height:1px;background:var(--teal-ink);z-index:1;transform:scaleX(0);transform-origin:0 50%;transition:transform var(--d-slow) var(--ease-out) .45s}
#wealth .tiers.in::before{transform:scaleX(1)}
/* each card is its own entrance (so short phones reveal card by card); the article carries the hover lift, the card inside carries the entrance, so the two transforms never share an element */
#wealth .tier{position:relative;z-index:2;display:flex;min-width:0;transition:transform var(--d-fast) var(--ease-out)}
#wealth .tier .card{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;padding:var(--pad);transition:opacity var(--d-med) var(--ease-out),transform var(--d-med) var(--ease-out),border-color var(--d-fast) var(--ease-out)}
#wealth .tier:nth-child(2).in .card{transition-delay:.09s}#wealth .tier:nth-child(3).in .card{transition-delay:.18s}
#wealth .tier.in.settled:nth-child(n) .card{transition-delay:0s}
/* .tiers is also a .reveal (it owns the stem), so hold each card until its OWN article has arrived, or the stack reveals all three at once on phones */
#wealth .tiers.in .tier:not(.in) .card{opacity:0;transform:translateY(16px)}
#wealth .tiers.in .tier:not(.in) .n{opacity:0} /* the counter waits for its own card, as the card does: on desktop the four reveals land in one batch so this never bites, but where the tiers stack the lower cards arrive later and the fade would otherwise play inside a card still at 0 */
#wealth .tier:is(:hover,:focus-within){transform:translateY(-2px)}
#wealth .tier:is(:hover,:focus-within) .card{border-color:rgba(11,28,53,.3)}
#wealth .tier.featured .card,#wealth .tier.featured:is(:hover,:focus-within) .card{border-color:rgba(11,28,53,.55)} /* 10k-2026-09-30 lift 3: .55 (was .4, which the rim all but hid) */
/* depth: a contact line, a mid pool and a long ambient pool, all ink on the existing alpha ladder. Every layer has negative lateral reach so none of it enters the 28px gutters where the teal stem is the only thing visible. Scoped to the tier cards; the five KPI tiles above stay flat. */
#wealth .tier .card{box-shadow:0 1px 1px -1px rgba(11,28,53,.14),0 10px 18px -12px rgba(11,28,53,.26),0 30px 48px -28px rgba(11,28,53,.36)}
/* the rim: the page's sage through teal to navy, top to bottom (one green in the pricing area, founder 2026-10-01; was the badge's kelly, 11ag), so each card reads as a large version of the seal's rim. It lives on the ARTICLE, not the card, so it sits BEHIND the opaque card and shows only as the 2px that extends past it. That is what keeps the card's own 1px ink border visible on top, which is what the hover and the featured rules colour. It carries no layout: the article is position:relative and the pseudo is absolute, so the stem's y is untouched. It rides the hover lift because the article is what transforms. */
#wealth .tier::before{content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;border-radius:18px;background:linear-gradient(180deg,rgba(127,203,122,.85),rgba(39,106,97,.7) 38%,rgba(15,66,123,.8));
  /* 11cv: a true 2px ring (masked to the padding), not a panel behind the card, so a card fading in never shows a solid
     slab through it; and the ring arrives with its own card */
  padding:2px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:0;transition:opacity var(--d-med) var(--ease-out)}
#wealth .tier.in::before{opacity:1}
/* 10k-2026-09-30 lift 3: the membership is the primary ticket. */
#wealth .tier.featured::before{background-image:linear-gradient(180deg,rgb(127,203,122),rgb(39,106,97) 38%,rgb(15,66,123))}
#wealth .tier:nth-child(2).in::before{transition-delay:.09s}#wealth .tier:nth-child(3).in::before{transition-delay:.18s} /* the ring waits for its own card (11cv re-review) */
/* (no-JS: see the entrance section, 11dc) */
/* the lit top edge, inside the card, so the slab has a catch where the light lands */
#wealth .tier .card{box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 1px 1px -1px rgba(11,28,53,.14),0 10px 18px -12px rgba(11,28,53,.26),0 30px 48px -28px rgba(11,28,53,.36)}
/* 10k-2026-09-30 lift 3: the featured pool is darker and 2px deeper, with the same lateral reach per layer, so nothing new enters the gutters beside the stem, and it ends 52px below the… */
#wealth .tier.featured .card{box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 1px 1px -1px rgba(11,28,53,.18),0 12px 18px -12px rgba(11,28,53,.36),0 32px 50px -30px rgba(11,28,53,.52)}
/* the join: a mono counter on the stem with a short stub in from the card's padding edge; the tier name in Bodoni beneath it */
#wealth .tier h3{font-size:var(--fs-card);line-height:1.15;padding-right:calc(var(--seal) + 12px)}
#wealth .tier .n{position:relative;display:block;margin-bottom:8px;font:400 12px/1 var(--mono);letter-spacing:.14em;color:var(--teal-ink)}
#wealth .tier .n::before{content:"";position:absolute;left:calc(-1*var(--pad));top:50%;width:calc(var(--pad) - 8px);height:1px;background:var(--teal-ink);transition:transform var(--d-fast) var(--ease-out)}
/* the stem lights each counter as it reaches the card: .45s is the stem's own delay, .6s and .8s are where its ease crosses the second and third card. Opacity on .n carries its ::before stub, so the hover slide on `#wealth .tier:is(:hover,:focus-within) .n::before` is untouched. Lives here, above the 900px block, so that block's collapse line beats the nth-child delays by source order. */
#wealth .tier .n{opacity:0;transition:opacity var(--d-med) var(--ease-out)}
#wealth .tiers.in .tier .n{opacity:1;transition-delay:.45s}
#wealth .tiers.in .tier:nth-child(2) .n{transition-delay:.6s}#wealth .tiers.in .tier:nth-child(3) .n{transition-delay:.8s}
#wealth .tier:is(:hover,:focus-within) .n::before{transform:translateY(2px)} /* the stub stays on the stem while the card lifts off it */
/* the price object: one Bodoni figure over one body-face unit, the same two rows in every card */
#wealth .tier .price{margin-top:12px;display:grid;gap:4px}
#wealth .tier .fig{font-family:var(--display);font-size:clamp(34px,3.4vw,40px);line-height:1;font-variant-numeric:tabular-nums;color:var(--room-text)}
/* 10k-2026-09-30 lift 3: $30 reads first. */
#wealth .tier .fig{justify-self:start;transform-origin:0 85%} /* start: the figure's box hugs its glyphs, so the scaled box never reaches past the card (a full-width box at 1.2 ran 21px off a 390 screen) */
#wealth .tier:not(.featured) .fig{transform:scale(.85)}
#wealth .tier.featured .fig{transform:scale(1.2)}
#wealth .tier .price small{font-family:var(--body);font-size:var(--fs-meta);line-height:1.4;color:var(--room-text-2)}
#wealth .tier .tagline{margin-top:8px;color:var(--room-text);max-width:32ch}
#wealth .tier .hairline{margin:12px 0}
#wealth .tier .perks{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:var(--fs-meta);line-height:1.45;color:var(--room-text-2)}
#wealth .tier .perks li{position:relative;padding-left:22px;max-width:48ch}
#wealth .tier .perks li::before{content:"";position:absolute;left:0;top:.45em;width:10px;height:10px;border-radius:50%;border:2px solid var(--teal-ink)}
#wealth .tier .perks b{font-weight:600;color:var(--room-text)}
/* 10k-2026-09-30 lift 3, review fix: the 1.2 scale grows $30 upward from the baseline, which left 1px between its box and "The membership" (the $ all but met the p's descender). */
#wealth .tier.featured .price{margin-top:17px}
@media (min-width:901px){#wealth .tier .price{margin-top:17px}#wealth .tier .perks{gap:6px}}
/* the next workshop under its promise (11cw): the date in the mono kicker, the topic under it; an empty topic takes no line */
#wealth .tier .next-ws{display:block;margin-top:6px}
#wealth .tier .next-ws[hidden]{display:none}  /* no date set yet: the "Next" line stays off (founder, 2026-10-06, 11en) */
#wealth .tier .next-ws .kicker{display:block;color:var(--teal-ink);font-size:11.5px;line-height:1.5}
#wealth .tier .next-ws-topic{display:block;color:var(--room-text)}
#wealth .tier .next-ws-topic:empty{display:none}
/* the foot pins to the bottom of every card; every note reserves two lines so the three button bottoms share one y */
#wealth .tier .foot{margin-top:auto;padding-top:16px}
#wealth .tier .foot .btn{width:100%;white-space:normal;line-height:1.25;text-align:center;background:var(--ink);color:var(--room);border-color:rgba(127,203,122,.55);box-shadow:0 0 0 2px rgba(127,203,122,.14)} /* all three tickets take the membership's navy fill (founder, 2026-09-17). Extends the existing
    rule rather than adding a second one with the same selector, which is this project's dormant
    pattern. (1,3,0) beats `.room .btn-ghost` (0,2,0) and `.room .btn-primary` (0,2,0). Scoped to
    `.tier .foot` so the book card's ghost button at index.html:485 is untouched. */
#wealth .tier .foot .btn:hover{background:#13294d;border-color:var(--accent);box-shadow:0 0 0 3px rgba(127,203,122,.24)}
/* The recommended tier has to be the most inviting button on the row (founder, 2026-09-17).
   A light ring cannot do that here: the ribbon's Login and Wealth Architecture buttons glow
   because a light edge sits on a DARK bar, and an ivory ring on cream is invisible, which a
   five-variant render confirmed. The room's own green does the work instead, and the featured
   ticket takes a full-strength ring plus a wider halo where the other two take a 55% edge.
   (1,4,0) beats the base ticket rule at (1,3,0). No motion is added: the halo is static. */
#wealth .tier.featured .foot .btn{border-color:var(--accent);box-shadow:0 0 0 1px rgba(127,203,122,.55),0 0 16px 0 rgba(127,203,122,.24),0 8px 20px -10px rgba(11,28,53,.45)} /* a crisp sage edge in a soft glow, not a 4px band: the card already leads (11di), so the button whispers (founder, 2026-10-02) */
#wealth .tier.featured .foot .btn:hover{border-color:var(--accent);box-shadow:0 0 0 2px rgba(127,203,122,.5),0 0 22px 2px rgba(127,203,122,.34),0 10px 24px -10px rgba(11,28,53,.5)}
#wealth .tier .foot p{margin-top:7px;font-size:var(--fs-fine);line-height:1.4} /* 11ej: no min-height (it was 2.8em, overridden at every width since 11eh); the notes are levelled from 901px below */
#wealth .native-note .l{display:block}#wealth .native-note .l+.l{margin-top:4px} /* the spam reminder starts its own line (founder, 2026-10-02); the sent note's second line too (11eh). The 4px is part of card 01's note, which the levelling below measures with the words */
#wealth .tier .native{display:grid;gap:7px} /* must match .foot p margin-top: card 01's note sits inside the form, 7px under its button as the other two notes sit under theirs */
#wealth .tier .native label{font-size:var(--fs-fine);color:var(--room-text-2);display:grid;gap:6px}
#wealth .tier .native input{font:inherit;min-height:48px;padding:11px 12px;border-radius:8px;border:1px solid rgba(11,28,53,.5);background:#FFFDF8;color:var(--room-text);width:100%;min-width:0;transition:border-color var(--d-fast) var(--ease-out)} /* .5 ink is 3.3:1 on the warm white fill (over8 step 38, was #fff), the floor for a field boundary */
#wealth .tier .native input:hover{border-color:rgba(11,28,53,.6)}
#wealth .tier .native input:focus-visible{outline-offset:2px;border-radius:8px;border-color:var(--teal-ink)}
#wealth .tier .native p{margin-top:0}
/* 11eh 2026-10-05, moved by the founder the same day (11ej): between the field and the button, the optional tick box (unticked), 10px under the field and 12px over what follows it (the terms line since 11eo, then the button), so it reads as part of the form rather than a caption of either. (1,3,x) over `#wealth .tier .native label` and `input` (1,2,1), so the box is a plain checkbox, not a 48px field. */
#wealth .tier .native .native-tick{display:flex;align-items:flex-start;gap:9px;margin-block:3px 5px;line-height:1.4;cursor:pointer}
#wealth .tier .native .native-tick input{flex:none;width:18px;height:18px;min-height:0;margin:0;padding:0;border-radius:3px;accent-color:var(--teal-ink);cursor:pointer}
/* 11eo 2026-10-06 (founder): the terms line, between the tick box and the button (first built under the button, moved above it by the founder the same day), in the note's own small print: 12px under the tick box (its 5px margin and the form's 7px gap) and 12px over the button, as the tick box sits over it. Its two links stay quiet: the line's grey, told apart by the underline, ink on hover. */
#wealth .tier .native .native-legal{margin-bottom:5px}
#wealth .tier .native-legal a{color:inherit;text-decoration:underline;text-decoration-color:rgba(77,90,107,.55);text-decoration-thickness:1px;text-underline-offset:2px;transition:color var(--d-fast) var(--ease-out),text-decoration-color var(--d-fast) var(--ease-out)}
#wealth .tier .native-legal a:hover{color:var(--room-text);text-decoration-color:currentColor}
/* under card 01's button: the note, and Kit's challenge under it when Kit asks for one, as one block the levelling below measures with the other two notes (11ej) */
#wealth .tier .native-after{display:grid;align-content:start;gap:8px;font-size:var(--fs-fine)} /* 13px, so its em matches the notes' in the fallbacks below */
#wealth .tier .native .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0} /* the honeypot, as #lead's */
/* Kit's challenge, only when Kit asks for one. 11ft (28 October 2026, the founder: "Shrink it to fit the card"): the frame is laid out at the size Kit asks for (site.js sets its width and height from Kit's ckjs:guard:size, 400 x 500 while Google's box shows; 400 x 440 before the first message) and drawn scaled from its top left corner to its box's width, never up, so none of Kit's 400px page is cut off where the card's column is narrower (212 to 335px, measured 28 October from 320 to 1440, so drawn at 53 to 84%; full size where it is 400px or wider). The box, a grid item of the block under the button, takes the column's width (the frame is out of its flow, so it adds no width) and exactly the scaled height (site.js), which is what the levelling measures. Before 11ft the frame was the card's width and Google's box lost its right edge. */
#wealth .tier .native-guard-fit{position:relative}
#wealth .tier .native-guard{position:absolute;top:0;left:0;display:block;width:400px;height:440px;border:0;border-radius:8px;background:#FFFDF8;transform-origin:0 0}
/* the seal: pressed into the card, not placed on it. Its centre sits at 1px border + --pad + half the 12px counter line, which is the counter's centre and the stem's y, so stem, counters and seals share one line across the row. The floor is one step of the ink ladder darker than the panel, so the disc is a hole before the image is in it; the single outer highlight is the burr of paper lifted at the rim, never a cast shadow. */
#wealth .tier .seal{position:absolute;top:calc(var(--pad) + 6px);right:var(--pad);transform:translateY(-50%);width:var(--seal);height:var(--seal);border-radius:50%;display:grid;place-items:center;pointer-events:none;background:rgba(11,28,53,.06);box-shadow:0 1px 0 rgba(255,255,255,.9)}
/* full brand colour on the transparent-interior badge (wealth-badge-seal.png, cut from the original by flood-filling the studio white out from the ring inward, so the ring and the animal are the original pixels). With no white disc the well's floor shows through behind the raccoon and the crimp lands on the mark itself, so the seal is coloured AND pressed, which the white version could not be. */
#wealth .tier .seal img{width:92%;height:auto;border-radius:50%;filter:drop-shadow(0 1px 0 rgba(255,255,255,.85))}
/* the crimp, painted over the image: ink on the upper inner wall, a hairline of light on the lower one. Light from above, material dented away from it. */
#wealth .tier .seal::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 1px 2px rgba(11,28,53,.16),inset 0 -1px 0 rgba(255,255,255,.9)}
/* forced colours drop backgrounds and shadows, which would leave the raw PNG showing its white disc: the sticker this whole rule set avoids */
@media (forced-colors:active){#wealth .tier .seal{display:none}#wealth .tier::before{display:none}}
/* 11ej 2026-10-05: wherever the cards sit three across, the space under the three buttons is the tallest note's (card 01's note, its sent note, or its quick check with Kit's frame), so the three button bottoms stay on one y, every note sits 7px under its own button, and the height of card 01's field and tick box goes ABOVE the buttons of cards 02 and 03 (their foot is margin-top:auto), never under their notes. (11ei had cards 02 and 03 reserve card 01's tick box and note under their notes, --tier-below: the empty strip the founder saw.) site.js measures the three blocks as they are laid out and gives each the difference to the tallest as a bottom margin (--fill, once it has put .levelled on .tiers); a margin never changes the block's own size, so the measure cannot loop. Before site.js, and without it, all three reserve card 01's note instead: three lines and the 4px between its two (4.2em + 4px, measured with the fonts in), four lines from 901 to 1009px, where another browser may wrap the spam line once more. (11eo: the terms line sits ABOVE card 01's button, founder 2026-10-06, so its height goes above the buttons of cards 02 and 03 with the field and the tick box, and these values are 11ej's again; first built under the button, it had added about 44 to 62px of blank under their notes.) */
@media (min-width:901px){
  #wealth .tiers:not(.levelled) .tier :is(.foot>p,.native-after){min-height:calc(4.2em + 4px)}
  #wealth .tiers.levelled .tier :is(.foot>p,.native-after){margin-bottom:var(--fill,0px)}
}
@media (min-width:901px) and (max-width:1009px){
  #wealth .tiers:not(.levelled) .tier :is(.foot>p,.native-after){min-height:calc(5.6em + 4px)}
}
/* the page trunk runs down the centre above 1023px; keep the head in the left half so the sap line falls beside the copy, never through a glyph */
@media (min-width:1024px){
  #wealth .pricing-head{max-width:calc(50% - 32px)}
  #method .sec-head{max-width:none}#method .sec-head>:not(h2){max-width:min(60ch,calc(50% - 32px))} /* over8 step 5: the h2 spans both halves (the sap fades behind it, site.js); the kicker and lede stay left of the trunk. */
  #method .outcome{max-width:min(52ch,calc(50% - 32px))} /* 10k-2026-09-30 lift 13: at the lede size 52ch would reach the sap line (728 against 720 at 1440) */
  #reviews .sec-head{max-width:min(60ch,calc(50% - 32px))} /* the lede fills the 60ch head; at 1024 that reaches x=548 while the sap line is at 512 */
  /* 11cv: the rest of the text the trunk crossed (found by the $10k review) */
  #wealth .disclaimer,#wealth .handoff{max-width:calc(50% - 32px)}
  /* the founder's two columns straddle the trunk, as the doors in #triggers do: the portrait against the gutter, the letter right of it */
  #founder .founder-grid{grid-template-columns:1fr 1fr;column-gap:96px}
  #founder .portrait{justify-self:end;width:min(100%,340px);position:sticky;top:calc(var(--nav-h) + 40px)} /* stays beside the letter as it scrolls, so the left column is never an empty half-page */
  /* the graft control sits on the trunk (that is its point); its words sit to its right, clear of the line */
  /* the section head in the left half like every other; the graft control on the trunk; its instruction to the right */
  #services .graft-head{display:grid;grid-template-columns:1fr auto 1fr;column-gap:40px;row-gap:10px;align-items:center;justify-items:start;text-align:left}
  #services .graft-head .kicker{grid-column:1;grid-row:1;align-self:end}
  #services .graft-head h2{grid-column:1;grid-row:2;align-self:start}
  #services .graft-head .graft{grid-column:2;grid-row:1/span 2}
  #services .graft-head .graft-label{grid-column:3;grid-row:1;align-self:end}
  #services .graft-head .graft-hint{grid-column:3;grid-row:2;align-self:start}
  #services .integration{padding-left:56px} /* the closing line starts where the cards start, not on the trunk */
}

/* faq */
#faq .faq-grid{display:grid;grid-template-columns:minmax(220px,40%) 1fr;column-gap:clamp(64px,10vw,150px);row-gap:32px;align-items:start}
#faq aside{position:sticky;top:110px}
#faq aside h3{margin-top:22px}
#faq aside p{color:var(--text-2);margin-top:12px;max-width:34ch} /* over8 step 5: 34ch (was 30), so "consultation." is no widow. */
#faq .faq-list{display:grid;gap:0}
#faq .sub{font-family:var(--mono);font-size:12px;line-height:inherit;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);padding:22px 0 10px} /* 10k-2026-09-30 lift 7: an h3 now (was a div); */
.faq-item{border-top:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;font-family:var(--display);font-size:var(--fs-small);line-height:1.25}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:1px solid var(--text-2);border-bottom:1px solid var(--text-2);transform:translateY(-70%) rotate(45deg);transition:transform var(--d-fast) var(--ease-out)}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-item .faq-body{overflow:hidden;padding-bottom:20px;color:var(--text-2);max-width:62ch}
/* 11fo S9, 16 October 2026: on phones the two group headings become a two-button switch (site.js builds it, .faq-list.tabbed, 560px and under). Each group is wrapped in a .faq-group that is display:contents everywhere else, so the list lays out exactly as before; in the switch the shown group is a block, the folded one a block under hidden=until-found (so find-in-page can reach it) or display:none under plain hidden, and the headings step aside, their words on the buttons. The buttons keep the headings' mono label, 44px tall at least, the chosen one on the Login button's navy with a sage foot. */
#faq .faq-group{display:contents}
#faq .faq-tabs{display:flex;gap:4px;margin:4px 0 14px;padding:3px;border:1px solid var(--line-strong);border-radius:12px}
#faq .faq-tabs[hidden]{display:none}
#faq .faq-tab{flex:1 1 0;min-width:0;min-height:44px;margin:0;padding:8px 10px;border:0;border-radius:9px;background:transparent;color:var(--text-2);font:400 12px/1.35 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-wrap:balance;cursor:pointer;transition:background var(--d-fast) var(--ease-out),color var(--d-fast) var(--ease-out),box-shadow var(--d-fast) var(--ease-out)}
#faq .faq-tab[aria-selected="true"]{background:var(--panel-2);color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}
#faq .faq-tab:focus-visible{outline-offset:-2px;border-radius:9px} /* inside the switch's 3px rim, never clipped by it; the global ring's 4px radius would square the button */
#faq .faq-list.tabbed .faq-group:not([hidden=""]){display:block}
#faq .faq-list.tabbed .faq-group[hidden=""]{display:none} /* 11fo S9, 16 October 2026 (the finish): plain hidden, where hidden=until-found is not supported; without this the display:contents above outranks the browser's own [hidden] rule and the folded group showed */
#faq .faq-list.tabbed .faq-group>h3.sub{display:none}
@media (hover:hover){#faq .faq-tab[aria-selected="false"]:hover{color:var(--text)}} /* 11fo S9 */
@media (max-width:360px){#faq .faq-tab{padding-inline:8px;letter-spacing:.1em}} /* 11fo S9: on the narrowest phones "About working with Ingrafta" keeps to two lines (three at 320 with the full tracking) */

/* contact */
#contact{padding-bottom:clamp(80px,10vw,140px)}
#contact{--rx:clamp(220px,24vw,340px)} /* over8 step 10: the roots run on under the footer (less than its height). */
#contact .roots{position:absolute;inset:0 0 calc(-1 * var(--rx)) 0;padding-bottom:var(--rx);overflow:hidden;z-index:0;background:center/cover no-repeat content-box;opacity:.34;mask-image:linear-gradient(180deg,transparent,#000 calc((100% - var(--rx)) * .22),#000 calc(100% - var(--rx)),rgba(0,0,0,.4) calc(100% - var(--rx) * .45),transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 calc((100% - var(--rx)) * .22),#000 calc(100% - var(--rx)),rgba(0,0,0,.4) calc(100% - var(--rx) * .45),transparent)}
#contact .roots::before{content:"";position:absolute;left:0;right:0;top:calc(100% - var(--rx) - 1px);height:calc(100% - var(--rx));background:inherit;transform:scaleY(-1)} /* over8 step 10: the still keeps its frame in the contact and runs on, mirrored at its foot, under the footer. */
#contact .roots::after{content:"";position:absolute;inset:0 0 var(--rx);background:radial-gradient(ellipse 50% 40% at 50% 60%,rgba(95,179,168,.54),transparent 70%);opacity:.2}
html.js #contact:not(.taken) .roots::after{opacity:.117}html.js #contact.taken .roots::after{animation:roots-bloom 1.8s var(--ease-out) backwards} /* over8 step 7: one bloom when the sap has arrived, no loop. */
@keyframes roots-bloom{from{opacity:.117}40%{opacity:1}to{opacity:.2}} /* 11fo S11, 16 October 2026: the glow is three times as strong (.54, was .18) and every resting opacity a third (.2, .117; were .6, .35), so the page at rest is as before (3.7% and 2.1% of teal through the .34 roots layer), while the one bloom now peaks at about 18% (it peaked at 6% and could not be seen). */
#contact .knot-anchor{height:1px}
#contact.no-endpoint #lead,#contact.no-endpoint .divider{display:none}
#contact.no-endpoint .contact-grid{grid-template-columns:1fr;max-width:520px;margin:40px auto 0}
#contact .lead-nojs{display:none;padding:18px;border-radius:10px;background:var(--panel);border:1px solid var(--accent-muted)} /* 11fg: the line in the form's place without JavaScript (shown in the 11dc section below), boxed as the form's own notes */
#contact .top{text-align:center;max-width:52ch;margin:0 auto}
#contact .top .btn{margin-top:26px}
#contact .top .micro{margin:12px auto 0;font-size:var(--fs-meta);color:var(--text)} /* 10k-2026-09-30 lift 7: ivory (was --text-2): over the roots the grey fell to 2.8:1 at its worst pixel; */
#contact .top .lede{color:var(--text)} /* 10k-2026-09-30 lift 7, R4 review: ivory too (was --text-2). */
#contact .divider{display:flex;align-items:center;gap:16px;margin:48px auto 0;max-width:var(--wrap);color:var(--text-2);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
#contact .divider::before,#contact .divider::after{content:"";flex:1;height:1px;background:var(--line)}
#contact .contact-grid{margin-top:36px;display:grid;grid-template-columns:1fr minmax(240px,34%);gap:56px;align-items:start}
#lead{display:grid;gap:16px}
#lead label{display:grid;gap:6px;font-size:var(--fs-meta);color:var(--text-2)}
#lead input,#lead select,#lead textarea{font:inherit;color:var(--text);background:rgba(16,31,58,.7);border:1px solid var(--line-strong);border-radius:10px;padding:12px 14px;min-width:0;transition:border-color var(--d-fast) var(--ease-out)}
#lead input:focus,#lead select:focus,#lead textarea:focus{border-color:var(--accent);outline:none}
#lead textarea{min-height:120px;resize:vertical}
#lead .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
#lead .sent-state,#lead .fail-state{display:none;padding:18px;border-radius:10px;background:var(--panel);border:1px solid var(--accent-muted)}
#lead.sent .sent-state{display:block}
#lead.sent .fields,#lead.sent button[type=submit]{display:none}
#lead.failed .fail-state{display:block}
#lead .honest{font-size:var(--fs-fine);color:var(--text-2)}
#contact .next ol{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px;counter-reset:n}
#contact .next li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:baseline;color:var(--text-2)}
#contact .next li,#contact .next .kicker{text-shadow:var(--tshadow)} /* 10k-2026-09-30 lift 7, R4 review: the site's halo, as on #graft-hint; */
#contact .next .kicker{position:relative}
#contact .next .kicker::before{content:"";position:absolute;inset:-14px -26px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(7,18,36,.6),rgba(7,18,36,.3) 55%,rgba(7,18,36,0))} /* over8 step 27: a soft navy pool under the kicker, where the roots still is brightest. */
#contact .next li::before{counter-increment:n;content:counter(n);font-family:var(--display);font-size:var(--fs-small);color:var(--teal)}
#contact .next ol{position:relative}#contact .next ol::before{content:"";position:absolute;inset:-10px -22px;z-index:-1;pointer-events:none;border-radius:32px;background:rgba(7,18,36,.52);filter:blur(20px)} /* over8 step 10: a navy pool under the steps, over the roots. */

/* footer */
footer{padding:clamp(8px,2vw,24px) 0 40px;color:var(--text-2);font-size:var(--fs-meta)} /* over8 step 10 */
footer .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
footer h3{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin-bottom:14px} /* over8 step 10 */
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{color:var(--text-2);text-decoration:none;transition:color var(--d-fast)}
footer a:hover{color:var(--text)}
footer .legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:var(--fs-fine);display:flex;flex-direction:column;gap:8px;align-items:flex-start} /* 10k-2026-09-30 lift 5, review fix: a column (was a wrapping row, gap 8px 22px, baseline), so the capped disclaimer stays on its own line under the copyright, where it always sat while it… */
footer .legal span{max-width:72ch;text-wrap:pretty} /* 10k-2026-09-30 lift 5: the disclaimer ran 1,088px (203 characters) on one line at 1440 and ended on the widow "tools."; */
footer .legal-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 .55em} /* go-live 2026-10-07: Privacy Policy · Terms of Use · Support under the copyright line */
footer .legal-links span{max-width:none}
@media (pointer:coarse){footer .legal-links a{display:inline-flex;align-items:center;min-height:44px}} /* 44px hit areas on touch screens, as the footer lists have */

/* ---------- static-hero gates (identical to the JS GATES list) ---------- */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){
  .hero{height:100vh;height:100svh}
  .stage{position:relative}
  #hero-video,.poster,#hero-wide,.bands,.cue,.depth,.hero .chips,.scrim{display:none}
  .hero-static{display:block;background-image:url("hero-static-portrait.jpg")}
  .trunk,.branch::after{display:none}
}
@media (prefers-reduced-motion: reduce) and (min-width: 721px) and (orientation: landscape){
  .hero-static{background-image:url("hero-static.jpg")}
  .hero-static .col{top:22%;left:6vw;right:auto;width:36vw}
  .hero-static .cta-row{left:6vw;right:auto;bottom:18%}
}
/* ---------- phones and portrait tablets: the hero scrolls, as a 108-frame portrait sequence (72 until 11fo S12) ----------
   Deliberately NARROWER than the static-hero gate above: reduced motion and short landscape phones
   keep the still. `prefers-reduced-motion: no-preference` rather than `not (...)`, because the
   negation form is the one Safari was late to and a wrong guess here would hand a scrolling hero to
   someone who asked for stillness. There is no video and no seeking on this path, so it cannot
   stutter the way a scrubbed portrait video does. */
@media (orientation: portrait) and (max-width: 1024px) and (prefers-reduced-motion: no-preference){
  .hero{height:400svh}
  .stage{position:sticky;top:0;height:100svh}
  .hero-static{background-image:url("hero-seq/f001.webp")} /* 11dc: the first frame paints from CSS before site.js sets the img, so the phone hero never flashes empty. 11fo S12, 16 October 2026: f001 of the 108 frames (the names have three digits now, so no cached 72-frame file is ever shown in their place). */
  .hero-static{top:-6px;bottom:-6px;border-top:6px solid transparent;border-bottom:6px solid transparent;background-origin:border-box} /* over8 step 28: the frame's black bottom rows fall in a border below the clipped stage. 11fo S11, 16 October 2026: and its dark top rows in one above it (the padding box, where the words sit, is the stage as before). */
  #hero-seq{display:block;position:absolute;inset:calc(-1 * max(6px,.7%)) 0 auto 0;width:100%;height:calc(100% + 2 * max(6px,.7%));object-fit:cover;z-index:0} /* over8 step 28: as #hero-video. 11fo S11: past the top too, as #hero-video. */
  #hero-seq:not([src]){visibility:hidden} /* 11dc: an empty img draws a grey broken-image frame; the f01 background shows instead */
  .hero-static::before{z-index:1}                                  /* the gradient sits over the frame */
  .hero-static .col,.hero-static .cta-row,.hero-static .chips{z-index:2}
  /* The four pillar chips have been hidden on phones since the build by `.hero .chips{display:none}`
     in the gate above. They arrive at the end of the scroll here, the way band 6's do on the desktop.
     Both the resting and the .on forms are re-stated, because the desktop rules position the chips
     absolutely and translate them, which is wrong for the static hero's flex column: `.hero-static
     .chips .chip` (0,3,0) is later than `.hero .chips .chip` (0,3,0), and `.hero-static .chips.on
     .chip` (0,4,0) out-specifies `.hero .chips.on .chip` (0,3,0). */
  .hero-static .chips{display:flex}
  .hero-static .chips .chip{position:static;left:auto;opacity:0;transform:none}
  .hero-static .chips.on .chip{opacity:1;transform:none}
}
/* 11fo S11, 16 October 2026: the phone hero's foot feathers into the page. The desktop's 9% foot feather (.scrim::after) never
   reached phones (.scrim is hidden there), so the frames ended on a straight hue step, slate to the page's navy. Its own
   pseudo-element over the lowest 9% of the frame, under the words and the button, fading to the ground the page actually
   renders there (the fixed environment layer over --canvas: rgb(15,29,51) to rgb(18,34,55) down a phone screen, measured; the
   middle of that, rgb(16,31,52), leaves at most a 2 to 3 level step where the foot crosses; never #0A1830, a second step).
   On the frame sequence it arrives with the film's landing (hero progress .97, as the desktop's); on the still paths (reduced
   motion, Save-Data, no JavaScript, and a phone on its side, whose one-screen still ended on the same edge) it is simply there. */
@media (orientation:portrait) and (max-width:1024px),(orientation:landscape) and (pointer:coarse) and (max-height:560px){
  .hero-static::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(16,31,52,0),rgb(16,31,52))}
  .hero-static .col,.hero-static .cta-row,.hero-static .chips{z-index:2}
}
@media (orientation:portrait) and (max-width:1024px) and (prefers-reduced-motion:no-preference){
  html.js:not(.lite) .hero-static::after{opacity:0;transition:opacity var(--d-slow) var(--ease-out)}
  html.js:not(.lite) .stage.landed .hero-static::after{opacity:1}
}
/* 11cv: phones in portrait. The copy, the chips and the button were each pinned to a share of the stage height, so at the
   heights iPhone Safari actually shows (664 at 390 wide) the chips landed on the paragraph and the button. They now stack
   in flow: the copy at the top, then the chips as a column on the right, sitting on the button, then the button. The four
   chips cannot sit two to a row at phone width, so they show only where the stage (100svh, steady as Safari's bars move)
   is tall enough for all of it; below that the paragraph, which already names all four, carries them. */
@media (orientation: portrait) and (max-width: 540px) and (prefers-reduced-motion: no-preference){
  html .hero-static{container-type:size;display:flex;flex-direction:column;padding:calc(var(--nav-h-phone) + 3svh) var(--gutter) max(6svh,20px)}
  html .hero-static .col{position:relative;top:auto;left:auto;right:auto;margin-bottom:auto} /* html: out-specifies the later max-width:540 top offset, which would otherwise apply twice */
  html .hero-static .chips{position:relative;inset:auto;width:auto;padding-top:14px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
  html .hero-static .cta-row{position:relative;left:auto;right:auto;bottom:auto;margin-top:12px}
  @container (max-height:579px){html .hero-static .chips{display:none}} /* the content box: copy about 320 + chips 136 + button row 110 need about 566 */
}
/* 11et phone hero, Version A (the founder's choice, 8 Oct 2026): the desktop's union messages on the phone frame sequence. Band 1 stays the static headline block
   (.hero-static .col, faded by site.js with band 1's own opacity); bands 2 to 6 take its place in the upper screen, one at a
   time, with their desktop timing, ink and words. Their scrim becomes a top-down veil; band 6's button row is hidden because
   the static button and its microcopy stay at the foot throughout; the depth readout sits small at the top right. */
@media (orientation: portrait) and (max-width: 1024px) and (prefers-reduced-motion: no-preference){
  html:not(.lite) .bands{display:block;z-index:3}
  .band[data-first],.band .cta-row,.band.both::after{display:none}
  .bands .band .col{top:calc(var(--nav-h-phone) + 3svh);left:var(--gutter);right:var(--gutter);width:auto;max-width:34rem;transform:none}
  .bands .band::before{inset:0;background:linear-gradient(180deg,rgba(7,18,36,calc(var(--scrim,.62)*1.08)) 0%,rgba(7,18,36,calc(var(--scrim,.62)*.8)) 32%,rgba(7,18,36,0) 60%)}
  .bands .band .display{max-width:18ch}
  html:not(.lite) .stage .depth{display:inline-flex;z-index:4;top:calc(var(--nav-h-phone) + 3svh);bottom:auto;left:auto;right:var(--gutter);font-size:10px;padding:4px 8px}
  /* reviewer 2026-10-08: below about 370px wide the readout's "CROWN" chip runs 7px into "DIAGNOSE · GRAFT · THRIVE" (measured
     at 360); on those narrow phones it is left out rather than shrinking either chip */
  @media (max-width:370px){html:not(.lite) .stage .depth{display:none}}
  /* reviewer 2026-10-08: at 371 to 394px the wider "UNION 01" chip reaches the kicker chip while the headline block is still fading
     (p .07 to .11; 14px into it at 375x667); site.js marks that moment .head-union and the readout waits until the headline has gone */
  @media (max-width:394px){html:not(.lite) .stage.head-union .depth{visibility:hidden}}
  /* the founder, 8 Oct: the four pillar chips on the phone too. Under Version A the headline block has faded by .11 and the chips
     light at .82, so they no longer stack under the copy: the copy is lifted out of the flow (same place, the content box's top
     left), and the chips and the button row pack at the foot, the chips right-aligned 16px above the button. They need band 6's
     message (149 tall from the content box's top, one size from 360 to 430 wide) + 16 + the chips (142) + 16 + the button row
     (48 where the 600px rule drops the microcopy, 110 with it) = 371 at the end, and up to 393 for the headline and button at the
     top (430 wide), so from a 400 content box (about 506 tall: 375x548 and every larger iPhone Safari view); below it, and without
     site.js, the 11cv flow and the 579 and 600px rules hold as before. */
  @media (max-width:540px){
    @container (min-height:400px){
      html.js:not(.lite) .hero-static .col{position:absolute;top:calc(var(--nav-h-phone) + 3svh);left:var(--gutter);right:var(--gutter);margin:0}
      html.js:not(.lite) .hero-static .chips{display:flex;padding-top:0;margin-top:auto;margin-bottom:4px} /* + the button row's 12px margin = 16 */
    }
  }
}

/* landscape phones: the static hero lays out as two columns instead of a stack */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 560px){
  .hero{height:auto;min-height:100svh}
  .stage{height:auto;min-height:100svh}
  .hero-static{position:relative;inset:auto;min-height:100svh;box-sizing:border-box;padding:76px 5vw 22px;display:grid;grid-template-columns:minmax(0,50%) 1fr;column-gap:20px;align-items:center;background-image:url("hero-static.jpg")}
  .hero-static::before{background:linear-gradient(90deg,rgba(7,18,36,.86) 0%,rgba(7,18,36,.62) 42%,rgba(7,18,36,.08) 68%,rgba(7,18,36,.45) 100%)}
  .hero-static .col{position:relative;top:auto;left:auto;right:auto;width:auto;transform:none}
  .hero-static .kicker.chip{font-size:10px}
  .hero-static h1{font-size:clamp(24px,4.2vw,32px);margin-top:10px;max-width:16ch}
  .hero-static .sub{font-size:clamp(15px,1.8vw,16px);margin-top:10px;max-width:42ch} /* 11fo S10, 16 October 2026: the lede 15 to 16px on a phone on its side (was 13px) */
  .hero-static .cta-row{position:relative;left:auto;right:auto;bottom:auto;grid-column:2;align-self:end;justify-self:end;width:min(100%,300px);gap:4px}
  .hero-static .cta-row .btn{width:100%}
  .hero-static .cta-row .micro{font-size:clamp(13px,1.5vw,14px)} /* 11fo S10: its microcopy 13 to 14px (was 11px) */
  .hero-static .chips{display:none}
}
/* 11fo S8/S9/S10 review, 16 October 2026: on the shortest sideways phones (350px tall or less, 568 x 320) the 15px lede and the 13px
   microcopy ended 23px below the first screen (at 343 of 320). There the lede is 14px and the microcopy 12px, and the words' column
   takes 54% (was 50%), since at 50% the 14px lede still took six lines and ended at 334: at 54% it keeps to five, on a 1.5 line
   height (1.55 above; 21px a line, so a 640 x 320 screen, whose headline is larger, fits too), and the lede and the microcopy both
   end at 309 of 320, the button still on one line (215px wide). The shade behind the words moves over by the same 4%, so the lede's
   line ends keep the backing they had. From 351px tall (640 x 360 and up) both fit at the 15 to 16px and 13 to 14px above, in the
   50% column. */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 350px){
  .hero-static{grid-template-columns:minmax(0,54%) 1fr}
  .hero-static::before{background:linear-gradient(90deg,rgba(7,18,36,.86) 0%,rgba(7,18,36,.62) 46%,rgba(7,18,36,.08) 72%,rgba(7,18,36,.45) 100%)}
  .hero-static .sub{font-size:14px;line-height:1.5}
  .hero-static .cta-row .micro{font-size:12px}
}

/* ---------- reviews: the first scroller on the site, second room in the cream band ---------- */
/* the seam. #wealth is ivory and ends directly above, so without a rule the two rooms read as one
   unbroken cream band. The value is the room's own hairline, the same line each card carries inside.
   z-index 2 puts it level with .wrap and above the trunk, so the seam reads as one continuous rule. */
#reviews::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(11,28,53,.14);z-index:2;pointer-events:none}
/* the row's two knobs, declared on the section the way #wealth .tiers declares --pad and --seal */
#reviews{--rv-gap:24px;--rv-per:2.6} /* over8 step 11: from 1024px a 334px quote column at 1440 (was 254). */
#reviews .sec-head .lede{max-width:52ch} /* (1,2,0) over .lede (0,1,0) */
/* the port. Bleeds through the wrap's gutter so a card can leave the frame, and takes the gutter back
   as padding so the first card still lines up with the head. It bleeds to the wrap's BORDER box, never
   to 50vw: vw includes the classic scrollbar, which would push scrollWidth past the viewport under
   html{overflow-x:clip} and hide a real overflow from the audit. No touch-action: the default lets the
   browser pick the axis, so a vertical swipe starting on a card still scrolls the page; pan-x traps it.
   padding-block/margin-block pay for the focus ring without changing the section's vertical rhythm. */
#reviews .rv-track{position:relative;display:flex;gap:var(--rv-gap);margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);padding-block:8px;margin-block:-8px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scroll-behavior:smooth;scrollbar-width:none}
#reviews .rv-track::-webkit-scrollbar{display:none}
#reviews .rv-track:focus-visible{outline-offset:-2px} /* the global +3px would sit in the gutter and be clipped */
/* the article carries the lift and --i, the card inside carries the entrance, so two transforms never
   share an element and `.reveal.in .part{transform:none}` (0,3,0) cannot reach the hover. #wealth .tier. */
#reviews .rv{flex:0 0 calc((100% - 2 * var(--rv-gap)) / var(--rv-per));display:flex;min-width:0;scroll-snap-align:start;transition:transform var(--d-fast) var(--ease-out)}
/* 11cx: an ivory underlay, the card's own shape, under each fading card: the trunk behind it is covered from the first frame while the card fades in over it as before */
#reviews .rv,#wealth .tier{background:var(--room);border-radius:16px}
/* without this the last card's start-aligned snap position is past max scroll, mandatory snap drags the
   row back off the end, and Next becomes a button that looks live and does nothing */
#reviews .rv:last-child{scroll-snap-align:end}
/* (1,2,0), so it beats the `.reveal .part` transition shorthand (0,2,0) whatever the source order. One
   delay per property: the entrance is staggered, the hover border change is not. The stagger caps at
   --i 3 because only about four cards are on screen at the widest width, and the cap keeps the whole row
   at rest by .87s, inside the observer's 1600ms settle. This replaces the nth-child(6) ceiling. */
#reviews .rv .card{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;transition:opacity var(--d-med) var(--ease-out),transform var(--d-med) var(--ease-out),border-color var(--d-fast) var(--ease-out);transition-delay:calc(min(var(--i,0),3) * .09s),calc(min(var(--i,0),3) * .09s),0s}
/* card anatomy: mark, quote, hairline, name. Nothing else. */
#reviews .rv-mark{display:block;font-family:var(--display);font-size:clamp(56px,5.6vw,80px);line-height:.62;height:.25em;color:var(--teal-ink);margin-bottom:.1em} /* clear8 2026-10-02: a larger Bodoni mark anchors each quote, its box trimmed to the ink so it sits nearer the quote than the card edge. */
#reviews .rv-quote{margin:0 0 20px;font-family:var(--display);font-size:var(--fs-card);font-style:italic;line-height:1.3;color:var(--room-text);text-wrap:pretty} /* 11fo S8, 16 October 2026: the clients speak in the italic, the firm in the roman */
html.js #reviews:not(.rv-italic) .rv-quote{font-style:normal} /* 11fo S8: with JavaScript the quotes keep the roman until site.js has loaded the italic, as the reviews come near (.rv-italic), so the file never loads with the first screen and the quotes change face once, off screen; without it, or after a late boot, they are italic from the first paint */
/* margin-top:auto would push the hairline and name to the foot of a stretched card; since clear8 2026-10-02 every card hugs its quote. */
#reviews .hairline{margin-top:auto;margin-bottom:12px}
#reviews .rv-name{color:var(--room-text-2)}
/* controls, left aligned and capped at 44 + 14 + 260 + 14 + 44 = 376px; since clear8 2026-10-02 they sit above the row, beside the head from 1024px. */
#reviews .rv-controls{margin-top:clamp(20px,2.4vw,28px);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#reviews .rv-btn{flex:none;width:44px;height:44px;border-radius:50%;padding:0;display:grid;place-items:center;cursor:pointer;background:transparent;color:var(--room-text);border:1px solid rgba(11,28,53,.4);transition:border-color var(--d-fast) var(--ease-out),opacity var(--d-fast) var(--ease-out),transform var(--d-fast) var(--ease-out)}
#reviews .rv-btn svg{width:20px;height:20px}
#reviews .rv-btn[aria-disabled="true"]{opacity:.35;cursor:default}
#reviews .rv-bar{flex:1 1 120px;max-width:260px;height:3px;border-radius:2px;overflow:hidden;background:rgba(11,28,53,.14)}
#reviews .rv-fill{display:block;height:100%;border-radius:2px;background:var(--teal-ink)}
#reviews .rv-hint{flex:1 1 100%;font-size:var(--fs-meta);color:var(--room-text-2)} /* not .micro: #9AA3AD is ~2:1 on ivory */
/* 761 to 1023: two cards plus a quarter. 760 and down: one card with a peek that cannot vanish. */
@media (max-width:1023px){ #reviews{--rv-per:2.25} }
#reviews{padding-bottom:clamp(40px,10vw,140px)}#reviews .rv-track{align-items:flex-start}#reviews .rv-controls{margin:0 0 28px} /* clear8 2026-10-02: every card hugs its quote and the controls sit above the row, so the name ends each card, spare height falls into the section foot and the arrows never move. */
@media (min-width:1024px){#reviews .wrap{display:grid;grid-template-columns:1fr 1fr;column-gap:72px}#reviews .sec-head{grid-column:1;max-width:none}#reviews .rv-controls{grid-column:2;align-self:end;margin-bottom:clamp(28px,4vw,48px)}#reviews .rv-track{grid-column:1/-1}} /* clear8 2026-10-02: from 1024px the controls take the empty half beside the head, clear of the trunk. */
@media (max-width:1023px){#reviews{padding-bottom:clamp(40px,6vw,90px)}} /* clear8 2026-10-02: below 1024 the foot is trimmed, since the short cards' spare height already falls into it. */
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px) and (max-width:1023px){#reviews .rv-controls{margin-bottom:16px}#reviews .rv-hint{flex:0 1 auto}} /* clear8 2026-10-02: on a short landscape phone the hint sits beside the arrows so the first quote reaches the first screen. */
@media (max-width:760px){
  #reviews{--rv-gap:16px}
  #reviews .rv-track{align-items:flex-start} /* 10k-2026-09-30 lift 8: one card and a peek on screen, so the row no longer needs one name baseline: each card is as tall as its quote (all eleven were stretched to the tallest, 362px at… */
  #reviews .rv{flex:0 0 calc(100% - var(--rv-gap) - clamp(28px,10%,56px))}
}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .trunk{left:24px;transform:none;width:8px}
  .trunk .join{display:none}
  .branches,#services .integration{width:100%}
  .branch::before{left:calc(28px - var(--gutter));width:calc(28px + var(--gutter))}
  .branch::after{left:calc(24px - var(--gutter))}
  #method .steps,#method .foot{width:100%}
}
@media (max-width:900px){
  .nav .wrap{gap:12px}
  .nav-side{gap:12px}
  .nav-end{gap:10px}
  .btn-wealth,.btn-login{font-size:14px;padding:9px 14px}
  #founder .portrait{max-width:300px}
  #triggers .doors,#premise .premise-grid,#founder .founder-grid,#wealth .room-head,#wealth .systems,#wealth .who,#faq .faq-grid,#contact .contact-grid,#results .cards,#wealth .tiers{grid-template-columns:1fr;gap:32px}
  #wealth .badge{margin-left:0}
  #wealth .badge-col{display:contents} /* one column: badge first, the heading text, then the cockpit line */
  #wealth .gauges{order:1;max-width:46ch;text-align:left}
  #wealth .film-link{order:1;justify-self:start;margin-top:-16px}
  #wealth .tiers{gap:18px}
  #wealth .tiers::before{display:none}
  #wealth .tier .n::before{display:none} /* 10k-2026-09-30 lift 8: the dash from the card edge to the counter is the stem's join; */
  #wealth .tiers.in .tier:nth-child(n) .n{transition-delay:.15s} /* no stem to follow at this width, so each counter follows its own card by a beat; (1,5,0) ties the desktop delays and wins by being later */
  #wealth .tier .foot{max-width:420px}
  #wealth .tier .foot p{min-height:0}
  #wealth .tier .seal{top:var(--pad);transform:none} /* no stem to centre on at this width, so --pad from the top and --pad from the right */
  #method .steps,#method .fit{grid-template-columns:1fr 1fr}
  #credentials .row{grid-template-columns:1fr 1fr}
  #faq aside{position:static}
}
@media (max-width:560px){
  body{font-size:16px}
  #method .steps,#method .fit{grid-template-columns:1fr}
  #method .foot p{width:100%} /* at phone width the 44% column was five lines tall with the button dropped beneath it */
  #wealth .book{grid-template-columns:1fr}
  #wealth .tier .foot{max-width:none}
  .btn{white-space:normal;text-align:center}
}
@media (pointer:coarse){
  .links a,.faq-item summary,.graft,#nav-toggle{min-height:44px}
  .links a{display:flex;align-items:center}
  /* 10k-2026-09-30 lift 6: 44px tap targets. */
  #triggers .door .link,#wealth .film-link{position:relative}
  #triggers .door .link::after,#wealth .film-link::after{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:44px;transform:translateY(-50%)}
  footer ul{gap:0}
  footer ul a{display:inline-flex;align-items:center;min-height:44px;padding-block:10px} /* over8 step 10: a link that wraps keeps the same space around its lines as a one-line row. */
  /* 10k-2026-09-30 lift 6: iOS Safari zooms the page into any field under 16px when it takes focus (the email field was 13px, the contact fields 14px). */
  #wealth .tier .native input,#lead input,#lead select,#lead textarea{font-size:16px}
  #wealth .tier .native input{line-height:1.25} /* 16px at the inherited 1.55 would make the field 49px; 1.25 keeps it the 48px min-height */
  /* 11ej review: card 01's tick box label is the tap target; where its words fit on two lines (480 to 599px) it is 36.4px tall, so it reaches 4px further up and down without moving anything (44.4px). The 4px stays inside the 10px gap to the field and the 12px gap to the terms line under it (11eo; the button before). */
  #wealth .tier .native .native-tick{position:relative}
  #wealth .tier .native .native-tick::after{content:"";position:absolute;inset:-4px 0}
}

/* ---------- micro-interactions (2026-09-15): everything answers, nothing new runs on its own ---------- */
/* press: down fast, up slow. The a/button prefix gives (0,2,1), which beats every `.btn-*:hover` at (0,2,0) whatever the source order (the tie that made this week's rules dormant). transition-duration is a longhand over the `.btn` shorthand and applies only while :active, so the release rides the normal ramp. */
a.btn:active,button.btn:active{transform:translateY(1px);transition-duration:.12s}
/* the two buttons that are also entrance children (#method .foot and #contact .top): `.reveal.in .part{transform:none}` (0,3,0) beat their hover lifts (0,2,0) since the build, so they never lifted. Once settled they get the button's own transition list back (the `.reveal .part` shorthand had replaced it), then hover and press at (0,5,0); active is last so it wins by order. */
.reveal.in.settled .btn.part{transition:transform var(--d-fast) var(--ease-out),background var(--d-fast) var(--ease-out),border-color var(--d-fast) var(--ease-out),color var(--d-fast) var(--ease-out)}
.reveal.in .btn.part:hover{transform:translateY(-1px)}
.reveal.in .btn.part:active{transform:translateY(1px);transition-duration:.12s}
/* the ticket and the door sit back down onto their surface when their own button or link is pressed, landing in the same .12s as the button so the two travel together; the release rides each element's own ramp. :has() puts these at (1,3,0) and (1,4,1), over the hover lifts. */
#wealth .tier:has(.btn:active){transform:translateY(0);transition-duration:.12s}
#wealth .tier:has(.btn:active) .n::before{transform:translateY(0);transition-duration:.12s}
#triggers .door:has(.link:active){transform:translateY(0);transition-duration:var(--d-med),var(--d-med),var(--d-med),.12s} /* four values for the door's four-property list; one value would repeat across the drafted-to-built fade too */
#wealth .tier .foot .btn:active{transform:translateY(-1px)}
/* the review arrows are 44px circles, not .btn, so `a.btn:active` (0,2,1) never reaches them and they
   need their own press. Three duration values for the three properties in their list; one value would
   drag the disabled fade down to .12s with it. */
#reviews .rv-btn:active{transform:translateY(1px);transition-duration:.12s,.12s,.12s}
#reviews .rv-btn[aria-disabled="true"]:active{transform:none} /* inside a ticket the card does the landing: the button holds its hover height, so the label travels the card's 2px and not the 4px the two presses would add up to. (1,3,0) over a.btn:active (0,2,1). */
/* the seal is pressed into the card, so when the ticket lifts 2px the mark settles 1px deeper into its well and the crimp deepens. Sink is on the img, never on .seal, whose own translateY(-50%) and the <=900px override stay untouched. (1,3,1) over the (1,2,1) rest rules. */
#wealth .tier .seal img{transition:transform var(--d-fast) var(--ease-out)}
#wealth .tier .seal::after{transition:box-shadow var(--d-fast) var(--ease-out)}
#wealth .tier:is(:hover,:focus-within) .seal img{transform:translateY(1px)}
#wealth .tier:is(:hover,:focus-within) .seal::after{box-shadow:inset 0 2px 3px rgba(11,28,53,.24),inset 0 -1px 0 rgba(255,255,255,.9)}
/* the FAQ row under the pointer, the row with the focus ring, and the open row hold a solid hairline and an ivory chevron. The chevron transition restates the existing transform transition (same selector, later in source) or the chevron would stop rotating. `[open]` and `:focus-visible` are separate statements so a browser without :has() drops only the :has() rule. Hover lives in the fine-pointer query below so a tapped row cannot hold a bright rule after closing. */
.faq-item{transition:border-top-color var(--d-fast) var(--ease-out)}
.faq-item summary::after{transition:transform var(--d-fast) var(--ease-out),border-color var(--d-fast) var(--ease-out)}
.faq-item[open]{border-top-color:var(--line-strong)}
.faq-item[open] summary::after,.faq-item summary:focus-visible::after{border-color:var(--text)}
.faq-item:has(> summary:focus-visible){border-top-color:var(--line-strong)}
/* the label follows its field into focus; :focus-within so select and textarea count too. (1,1,1) over `#lead label` (1,0,1); (1,3,1) over `#wealth .tier .native label` (1,2,1). */
#lead label,#wealth .tier .native label{transition:color var(--d-fast) var(--ease-out)}
#lead label:focus-within{color:var(--text)}
#wealth .tier .native label:focus-within{color:var(--room-text)}
/* the step line draws left to right as the list arrives, each dot ignites as the line reaches its column, the travelling light waits for the finished line. Delays are read off the site's ease over 1.1s after a .2s start at the four column edges. Extends the exact precedent of `#wealth .tiers::before`. The entrance stagger on `.reveal.in .part:nth-child(n)` sets transition-delay on the .step element, never on its ::before, so these delays are not overwritten; `.outcome` is nth-child(5) but not `.step`. */
#method .steps::before{transform:scaleX(0);transform-origin:0 50%;transition:transform var(--d-slow) var(--ease-out) .2s}
#method .steps.in::before{transform:scaleX(1)}
#method .step::before{opacity:0;transform:scale(.4);transition:opacity var(--d-fast) var(--ease-out),transform var(--d-fast) var(--ease-out)}
#method .steps.in .step::before{opacity:1;transform:none}
#method .steps.in .step:nth-child(1)::before{transition-delay:.22s}#method .steps.in .step:nth-child(2)::before{transition-delay:.32s}#method .steps.in .step:nth-child(3)::before{transition-delay:.44s}#method .steps.in .step:nth-child(4)::before{transition-delay:.64s}
#method .dot{opacity:0;transition:opacity var(--d-fast) var(--ease-out)}
#method .steps.in .dot{opacity:1;transition-delay:1.2s}
/* fine pointers only: the site's first hover/pointer query. The hand as a lamp: lit trunk joins and the diagram's unions swell toward it, driven by one --near custom property from site.js. `.trunk .join .glow` (0,3,0) ties the existing rule and wins by being later; the opacity transition is restated so the sap's fade-in is not dropped. Unlit glows are opacity 0, so the hand cannot light what the sap has not. The branch connectors reach a little further toward their card under the hand, until the graft is taken (`#services.taken .branch::before` at (1,2,1) outranks this). The FAQ hover rules live here so a phone never holds them. */
@media (hover:hover) and (pointer:fine){
  .trunk .join .glow{transform-box:fill-box;transform-origin:center;transform:scale(calc(1 + .6*var(--near,0)));transition:opacity var(--d-med) var(--ease-out),transform var(--d-fast) var(--ease-out)}
  #premise .diagram .unionglow{transform-box:fill-box;transform-origin:center;transform:scale(calc(1 + .5*var(--near,0)));transition:transform var(--d-fast) var(--ease-out)}
  .branch:hover::before{transform:scaleX(max(.55,calc(.35 + .65 * var(--p))));opacity:max(.75,calc(.5 + .5 * var(--p)))}
  .faq-item:hover{border-top-color:var(--line-strong)}
  .faq-item summary:hover::after{border-color:var(--text)}
  /* the lift is on the article, which is not a .part, so the entrance rule cannot reach it. On cream a
     2px lift with no shadow is nearly invisible, so the border does the work. */
  #reviews .rv:is(:hover,:focus-within){transform:translateY(-2px)}
  #reviews .rv:is(:hover,:focus-within) .card{border-color:rgba(11,28,53,.3)}
  #reviews .rv-btn:hover:not([aria-disabled="true"]){border-color:var(--ink)}
  #wealth .film-bar button:hover{border-color:var(--ink)} /* 11fo S13: the strip's buttons, as the reviews row's */
  #wealth .fb-seek:hover::-webkit-slider-thumb{transform:scale(1.15)}#wealth .fb-seek:hover::-moz-range-thumb{transform:scale(1.15)} /* 11fo S13: the node widens 1px a side under the hand */
  #wealth .film-play:hover .film-disc{transform:translateY(-1px)}   /* the site's button lift, 11bl */
  #wealth .film-play:hover .film-disc::after{opacity:.6;transform:scale(1.3)} /* 10k-2026-09-30 lift 14: was the 1px lift alone */
  #triggers .door:hover{border-color:var(--accent-muted);border-top-color:var(--accent);transition-duration:var(--d-med),var(--d-med),var(--d-fast),var(--d-fast)} /* 10k-2026-09-30 lift 14: the doors' lit edge under the hand (the keyboard's is beside the lift rule); */
}

/* ---------- reduced motion: final states, no drives ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto} /* 11cv: a menu link no longer animates a 13,000px scroll for someone who asked for no motion */
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  body{opacity:1}
  .reveal .part{opacity:1;transform:none}
  #wealth .tiers::before{transform:none}
  #wealth .tiers.in .tier:not(.in) .card{opacity:1;transform:none}
  #wealth .tier:is(:hover,:focus-within){transform:none}
  #wealth .tier:is(:hover,:focus-within) .n::before{transform:none}
  #triggers .door:is(:hover,:focus-within){transform:none}
  #wealth .film-play:hover .film-disc{transform:none}
  .branch .card:hover{transform:none} /* the last unpinned lift: the tickets, doors and reviews were pinned when they shipped, the services cards never were */
  /* html{scroll-behavior:smooth} is NOT disabled by this block and scroll-behavior does not inherit, so
     the new scroll container needs its own kill. The JS pairs it by passing behavior:'auto' explicitly,
     because an explicit behavior in scrollTo() outranks the stylesheet. Neither guard alone suffices. */
  #reviews .rv-track{scroll-behavior:auto}
  #reviews .rv:is(:hover,:focus-within){transform:none}
  #reviews .rv-btn:active{transform:none}
  #wealth .film-bar button:active{transform:none} /* 11fo S13 */
  #wealth .fb-seek:hover::-webkit-slider-thumb{transform:none}#wealth .fb-seek:hover::-moz-range-thumb{transform:none}
  [data-draft]:not(.built){opacity:1;filter:none}
  .branch{opacity:1}
  .branch::before{transform:scaleX(1);opacity:1}
  #services .integration{opacity:1}
  .trunk .sap{stroke-dashoffset:0}
  .trunk .join .glow{opacity:.35;transform:none}
  #premise .diagram .unionglow{transform:none}
  .branch:hover::before{transform:scaleX(1);opacity:1}
  a.btn:active,button.btn:active,.reveal.in .btn.part:is(:hover,:active){transform:none}
  #wealth .tier:has(.btn:active),#triggers .door:has(.link:active),#wealth .tier .foot .btn:active{transform:none} /* kept apart: a browser without :has() drops a whole list, and these pins must survive that */
  #wealth .tier:has(.btn:active) .n::before{transform:none}
  #wealth .tier:is(:hover,:focus-within) .seal img{transform:none}
  #method .steps::before,#method .steps.in::before{transform:none} /* both: the .in form (1,2,1) would otherwise shadow this with scaleX(1), the same drawn line but a dormant pin */
  #method .step::before{opacity:1;transform:none}
  #method .dot{opacity:1}
  #wealth .tier .n{opacity:1}
  .band{opacity:1;--k:1}
  .band .col{transform:translateY(-50%)}
  .hero .chips .chip{opacity:1;transform:translateX(-50%)}
}

/* ---------- ribbon on phones (11cy): one slim row, the wordmark and the menu; the menu is a full-screen sheet ----------
   The two-row ribbon (112px, the two buttons on a row of their own) held a sixth of a phone screen for good. The buttons
   now sit at the foot of the sheet. The sheet is fixed below the ribbon, so the ribbon drops its blur while open: a
   backdrop-filter makes the ribbon the containing block for anything fixed inside it. */
@media (max-width:540px){
  .nav,.nav.scrolled{padding:8px 0}
  .nav-side{gap:12px}
  .nav-side:first-child{flex:1 1 auto;position:static}
  #nav-toggle{margin-left:auto}
  .nav-end{display:none}
  .nav.open{background:rgb(7,18,36);backdrop-filter:none;-webkit-backdrop-filter:none}
  .links{position:fixed;inset:var(--nav-h-phone) 0 0 0;min-width:0;margin:0;padding:4px var(--gutter) max(24px,env(safe-area-inset-bottom));border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;overflow-y:auto;overscroll-behavior:contain}
  .links li:not(.links-cta){border-bottom:1px solid var(--line)}
  .links li:not(.links-cta) a{display:flex;align-items:baseline;gap:14px;padding:13px 0;font-family:var(--display);font-size:clamp(20px,6vw,25px);line-height:1.2;color:var(--text)}
  .links li:not(.links-cta) a:hover{background:none;color:var(--accent)}
  .links-cta{display:flex;gap:10px;margin-top:auto;padding-top:24px}
  .links-cta .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 20px;font-size:15px;color:var(--text)} /* (0,2,0) over the list's own `.links a` (0,1,1) */
  .links-cta .btn-wealth{flex:1 1 auto}
  .links-cta .btn-login{flex:0 0 auto}
  .links-cta .btn-wealth:hover{background:var(--accent);color:var(--ink)}
  .links-cta .btn-login:hover{background:var(--panel-3)}
  html.menu-open{overflow:hidden} /* the page stays put under the sheet */
  html{scroll-padding-top:var(--nav-h-phone)} /* over8 step 9 */
  :is(a[href],button,summary,input,select,textarea,[tabindex="0"]){scroll-margin-top:8px} /* over8 step 9: a focused control's ring clears the 60px ribbon. */
  .hero-static .col{top:calc(var(--nav-h-phone) + 3%)}
}
/* short phone viewports (browser bars showing): keep the crown copy clear of the button row */
@media (max-width:540px) and (max-height:600px){
  .links li:not(.links-cta) a{padding:8px 0;font-size:18px} /* nine rows and the buttons fit a 568px screen without scrolling */
  .links-cta{padding-top:16px}
  .hero-static .sub{font-size:15px}
  .hero-static .cta-row .micro{display:none}
  html .hero-static .chips{display:none} /* 11cv: no room on the smallest phones; the paragraph already names all four */
}

/* 10k-2026-09-30 lift 6: landscape phones get the sheet too ---------- A phone on its side (a coarse pointer, 560px tall or less) kept the desktop dropdown: 425px tall from y 68 on a 390px… */
@media (min-width:541px) and (pointer:coarse) and (max-height:560px){
  .nav.open{background:rgb(7,18,36);backdrop-filter:none;-webkit-backdrop-filter:none}
  .links{position:fixed;inset:64px 0 0 0;min-width:0;margin:0;padding:6px var(--gutter) max(16px,env(safe-area-inset-bottom));border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;overflow-y:auto;overscroll-behavior:contain}
  .nav.open .links{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto);grid-auto-flow:column;column-gap:clamp(24px,5vw,56px);align-content:start}
  .links li:not(.links-cta){border-bottom:1px solid var(--line)}
  .links li:not(.links-cta) a{display:flex;align-items:baseline;gap:14px;padding:11px 0;font-family:var(--display);font-size:clamp(17px,2.4vw,20px);line-height:1.2;color:var(--text)} /* 17px at 667 wide keeps every label on one line in its column */
  .links li:not(.links-cta) a:hover{background:none;color:var(--accent)}
  html.menu-open{overflow:hidden}
}
/* 10k-2026-09-30 lift 6: how the sheet opens and closes (upright and on its side) ---------- It faded in as a whole (menu-in), so for about 150ms the nine display-serif rows were… */
@media (max-width:540px),(pointer:coarse) and (max-height:560px){
  .nav.open{transition:none}
  .nav.closing{backdrop-filter:none;-webkit-backdrop-filter:none} /* site.js holds .closing through the fade: the scrolled ribbon's blur would make it the containing block of the fixed sheet and shrink the sheet to a strip mid-fade */
  .nav.open .links{animation:none;transition:none} /* 10k-2026-09-30 lift 6: the fade is for closing only; */
  .links{transition:opacity .16s var(--ease-out) .06s,display .22s allow-discrete}
  .nav:not(.open) .links li{opacity:0;transition:opacity .1s var(--ease-out)}
}
@keyframes menu-ink{from{opacity:var(--a-pencil)}to{opacity:1}}
@keyframes menu-ink-fill{from{opacity:calc(var(--a-pencil) * var(--a-fill))}to{opacity:1}}

/* ==========================================================================
   11dc. HOW THE PAGE ARRIVES: "Drafted, then built" (the founder's pick, 2026-09-30, concept A of three).
   It replaces the generic fade-and-rise. It stays at the end of the file, where it was designed and tested
   as an overlay, because it overrides the older entrance rules by coming later.
   The trigger is in site.js (a block inks once its top clears the bottom 12% of the screen).
   ========================================================================== */
:root{
  --a-pencil:.17;                              /* the draft's text strength on navy (ivory: .22, same apparent weight) */
  --a-fill:.45;                                /* solid fills draft at under half the pencil */
  --a-ghost:rgba(10,24,48,.86);                /* navy page over the card surface */
  --a-dash:rgba(154,163,173,.5);               /* draft hairline on navy */
  --a-pass:.56s;                               /* the ink pass down a card */
  --a-d:0s;                                    /* per-card offset (tiers, reviews) */
  --a-under:0px;                               /* how far a card's ghost reaches below it (tickets: over their shadow) */
}
.room{--a-pencil:.22;--a-ghost:rgba(244,240,230,.86);--a-dash:rgba(11,28,53,.34)}

/* ---------- no JS: everything is simply there ---------- */
html:not(.js) .reveal .part{opacity:1;transform:none;animation:none}
html:not(.js) #wealth .tier::before{opacity:1;animation:none}
/* the built page, not the trunk's draft (it only builds with JS) nor the lines that wait for .in */
html:not(.js) .reveal[data-draft]{opacity:1;filter:none}
html:not(.js) .reveal.card[data-draft]{border-style:solid;border-color:var(--line)}
html:not(.js) #wealth .tiers::before,html:not(.js) #method .steps::before{transform:none}
html:not(.js) #wealth .tier .n,html:not(.js) #method .dot{opacity:1}
html:not(.js) #method .step::before{opacity:1;transform:none}

/* ---------- the generic parts: pencil, then ink ---------- */
/* no travel in either state (was translateY(16px)) */
html.js .reveal .part{transform:none}
/* the draft; transition:none so arriving in the draft (html gains .js) never animates */
html.js .reveal:not(.in) .part:not(.card){opacity:var(--a-pencil);transition:none}
/* inking uses the site's own .6s ease-out opacity transition on .part; three steps */
html.js .reveal.in .part:nth-child(n){transition-delay:0s}
html.js .reveal.in .part:nth-child(2){transition-delay:.07s}
html.js .reveal.in .part:nth-child(n+3){transition-delay:.14s}
html.js .reveal.in.settled .part:nth-child(n){transition-delay:0s}

/* the trunk's own [data-draft] (doors, premise diagram) is carried by this system
   on reveal blocks, so the two drafts never stack (no filter, no border-colour fade) */
html.js .reveal[data-draft]:not(.built){opacity:1;filter:none}
html.js .reveal.card[data-draft]:not(.built){border-style:solid;border-color:var(--line)}

/* ---------- cards: dashed outline + ghost, then one ink pass ---------- */
/* card-parts (tiers, reviews) stay whole; their contents are drafted instead */
html.js .reveal .part.card,
html.js #wealth .tiers.reveal .tier.reveal > .card.part{opacity:1;transform:none}

/* per-card offsets: three steps at most, the same on the tickets and the reviews (0 / 80 / 160ms) */
#wealth .tier:nth-child(2){--a-d:.08s}
#wealth .tier:nth-child(3){--a-d:.16s}
#reviews .rv{--a-d:calc(min(var(--i,0),2) * .08s)}
@media (max-width:900px){#wealth .tier:nth-child(n){--a-d:0s}} /* stacked: each ticket arrives alone */

/* each card clips its own ghost with a STATIC clip, so the moving ghost is composited and never repaints.
   Doors and #book: a clip-path 1px round the border (room for the dashes), rounded with the card, so the ghost never
   shows square corners on navy. A clip-path, unlike overflow-clip-margin, also works in Safari. */
html.js .card.reveal{clip-path:inset(-1px round 17px)} /* the card's 16px corners, 1px out */
/* reviews: they sit in a scroll port, where a clip-path would still let the slid-out ghost stretch the row's scroll
   height (474 to 1207px). Their article is exactly the card's box (no border, no padding), so clipping the article
   clips at the card's outer border edge, rounded with it, and keeps the ghost out of the row's overflow. */
html.js .rv-track.reveal .rv{overflow:hidden;overflow:clip}
/* tickets: the ghost also reaches 22px each side and --a-under below, over their ambient shadow. The clip reaches 52px
   below (the shadow's full depth, so the built shadow is never cut) and nothing above (so no veil ever falls on the
   heading over the row). Their slid-out ghost stays inside the document's own height. */
html.js #wealth .tier.reveal > .card{clip-path:inset(0 -22px -52px -22px);
  /* no deeper than the gap below: 18px to the next stacked ticket, 36-64px to the film (clamp(36px,5vw,64px)) */
  --a-under:clamp(18px,calc(5vw - 2px),50px)}

/* the ghost: page colour over the card's surface, border and shadow, at z -1 inside the card's own stacking context
   (.card is z-index 2), so it sits over the card's paint and under its words. It is half a card taller than the card:
   the top third is the soft front (transparent into ghost). Drafted, it is lifted by that third, so the ghost starts
   exactly at the card's top edge and ends exactly --a-under below its bottom edge. Built, it has slid down by the rest
   of its height plus 54px, past every clip, so nothing of it is left on the page. */
html.js .card.reveal::before,
html.js .tier.reveal > .card::before,
html.js .rv-track.reveal .rv > .card::before{
  content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:calc(150% + 3px + 1.5 * var(--a-under));
  z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,transparent 0,var(--a-ghost) 33.333%,var(--a-ghost) 100%);
  transform:translateY(calc(66.667% + 54px))}
html.js #wealth .tier.reveal > .card::before{left:-22px;right:-22px}
/* the draft outline, exactly over the card's own border */
html.js .card.reveal::after,
html.js .tier.reveal > .card::after,
html.js .rv-track.reveal .rv > .card::after{
  content:"";position:absolute;inset:-1px;z-index:-1;pointer-events:none;border-radius:inherit;
  border:1px dashed var(--a-dash);opacity:0}

/* drafted */
html.js .card.reveal:not(.in)::before,
html.js .tier.reveal:not(.in) > .card::before,
html.js .rv-track.reveal:not(.in) .rv > .card::before{transform:translateY(-33.333%);transition:none}
html.js .card.reveal:not(.in)::after,
html.js .tier.reveal:not(.in) > .card::after,
html.js .rv-track.reveal:not(.in) .rv > .card::after{opacity:1;transition:none}
/* built: the ghost's front runs down the card while the dashes lift */
html.js .card.reveal.in::before,
html.js .tier.reveal.in > .card::before,
html.js .rv-track.reveal.in .rv > .card::before{transition:transform var(--a-pass) var(--ease-out) var(--a-d)}
html.js .card.reveal.in::after,
html.js .tier.reveal.in > .card::after,
html.js .rv-track.reveal.in .rv > .card::after{transition:opacity .4s var(--ease-out) var(--a-d)}

/* the words inside a card-part: pencil, then ink with their card (the stagger is between cards) */
html.js .tier.reveal:not(.in) > .card > *,
html.js .rv-track.reveal:not(.in) .rv > .card > *{opacity:var(--a-pencil);transition:none}
html.js .tier.reveal.in > .card > *,
html.js .rv-track.reveal.in .rv > .card > *{transition:opacity .5s var(--ease-out) var(--a-d)}

/* the reviews beyond the ones that can be on screen (about 4, 3 and 2 by width) are built at once: the row clips them */
html.js #reviews .rv-track.reveal.in .rv:nth-child(n+5) > .card::before,
html.js #reviews .rv-track.reveal.in .rv:nth-child(n+5) > .card::after,
html.js #reviews .rv-track.reveal.in .rv:nth-child(n+5) > .card > *{transition:none}
@media (max-width:1023px){
  html.js #reviews .rv-track.reveal.in .rv:nth-child(n+4) > .card::before,
  html.js #reviews .rv-track.reveal.in .rv:nth-child(n+4) > .card::after,
  html.js #reviews .rv-track.reveal.in .rv:nth-child(n+4) > .card > *{transition:none}
}
@media (max-width:760px){
  html.js #reviews .rv-track.reveal.in .rv:nth-child(n+3) > .card::before,
  html.js #reviews .rv-track.reveal.in .rv:nth-child(n+3) > .card::after,
  html.js #reviews .rv-track.reveal.in .rv:nth-child(n+3) > .card > *{transition:none}
}

/* ---------- solid fills: drafted at under half the pencil ---------- */
/* a flat grey slab reads as a disabled control; a fainter one reads as pencil. They ink with the same transitions.
   The first selector ties the draft rule above (0,5,1) and wins by coming later. */
html.js .reveal:not(.in) :is(.btn.part,.part:has(> .btn),.film-play.part,.badge.part,video.part),
html.js #founder .portrait:not(.in) img.part{opacity:calc(var(--a-pencil) * var(--a-fill))}
html.js .tier.reveal:not(.in) > .card > :is(.foot,.seal){opacity:calc(var(--a-pencil) * var(--a-fill))}
/* the book: its cover and button sit inside a text part, so they take the factor on top of the part's pencil */
html.js #book.reveal:not(.in) .book :is(.cover,.btn){opacity:var(--a-fill);transition:none}
html.js #book.reveal.in:not(.settled) .book .cover{transition:opacity var(--d-med) var(--ease-out)}
html.js #book.reveal.in:not(.settled) .book .btn{transition:opacity var(--d-med) var(--ease-out),transform var(--d-fast) var(--ease-out),background var(--d-fast) var(--ease-out),border-color var(--d-fast) var(--ease-out),color var(--d-fast) var(--ease-out)}

/* ---------- a focused element is inked at once (its ring too); its block inks around it ---------- */
/* site.js's focusin adds .in to the block; these hold the focused part at full strength from the first frame.
   :is(.in,:not(.in)) lifts each to the specificity of the rule it has to beat, and they win by coming later. */
html.js .reveal:is(.in,:not(.in)) .part:is(:focus-visible,:has(:focus-visible)),
html.js :is(.tier,.rv-track).reveal:is(.in,:not(.in)) .card > :is(:focus-visible,:has(:focus-visible)){opacity:1;transition:none}
html.js #book.reveal:is(.in,:not(.in)) .book .btn:focus-visible{opacity:1;transition:none}

/* ---------- lines: a dashed guide, inked over at the line's own tip ---------- */
/* both lines, and everything that follows them, now run .6s after .1s (was 1.1s after .2s / .45s), so each block's
   entrance is done by about .7s. Delays are read off the site's ease over .6s at the columns and counters. */
/* method: the step line */
#method .steps::before{transition:transform .6s var(--ease-out) .1s}
html.js #method .steps::after{content:"";position:absolute;left:0;right:0;top:11px;height:1px;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--a-dash) 0 5px,transparent 5px 10px);clip-path:inset(0 0 0 100%)}
html.js #method .steps:not(.in)::after{clip-path:inset(0 0 0 0);transition:none}
html.js #method .steps.in::after{transition:clip-path .6s var(--ease-out) .1s}
/* each dot ignites as the line reaches its column (0, 27, 53, 80% of the row), the travelling light once it is drawn */
#method .steps.in .step:nth-child(1)::before{transition-delay:.1s}
#method .steps.in .step:nth-child(2)::before{transition-delay:.16s}
#method .steps.in .step:nth-child(3)::before{transition-delay:.23s}
#method .steps.in .step:nth-child(4)::before{transition-delay:.35s}
#method .steps.in .dot{transition-delay:.6s}
/* pricing: the stem. Drawn above the tickets (their ghosts overhang the gaps), so the dashes are windowed to the two
   28px gaps: background-position % is of (width - 28px), so 33.333% - 9.333px and 66.667% + 9.333px land exactly on
   the gaps of a 3-column, 28px-gap grid */
#wealth .tiers::before{transition:transform .6s var(--ease-out) .1s}
html.js #wealth .tiers::after{content:"";position:absolute;left:0;right:0;top:calc(var(--pad) + 7px);height:1px;z-index:3;pointer-events:none;
  --a-stem:repeating-linear-gradient(90deg,rgba(39,106,97,.6) 0 4px,transparent 4px 8px);
  background:var(--a-stem) calc(33.333% - 9.333px) 0/28px 1px no-repeat,var(--a-stem) calc(66.667% + 9.333px) 0/28px 1px no-repeat;
  clip-path:inset(0 0 0 100%)}
html.js #wealth .tiers:not(.in)::after{clip-path:inset(0 0 0 0);transition:none}
html.js #wealth .tiers.in::after{transition:clip-path .6s var(--ease-out) .1s}
/* the counters are lit by the stem as it reaches each card (8, 36, 71% of the row); the phone's own .15s stays */
@media (min-width:901px){
  #wealth .tier .n{transition:opacity var(--d-fast) var(--ease-out)}
  #wealth .tiers.in .tier .n{transition-delay:.1s}
  #wealth .tiers.in .tier:nth-child(2) .n{transition-delay:.18s}
  #wealth .tiers.in .tier:nth-child(3) .n{transition-delay:.28s}
}
@media (max-width:900px){html.js #wealth .tiers::after{display:none}} /* no stem at this width */

/* ---------- framed pictures: the film and the founder portrait ---------- */
/* the frame's own panel is the ghost surface; the picture is a .part, so it pencils and inks; the dashes lift */
html.js #wealth .wealth-film::after,
html.js #founder .portrait::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  border:1px dashed var(--a-dash);opacity:0}
html.js #wealth .wealth-film:not(.in)::after,
html.js #founder .portrait:not(.in)::before{opacity:1;transition:none}
html.js #wealth .wealth-film.in::after,
html.js #founder .portrait.in::before{transition:opacity .4s var(--ease-out)}

/* ---------- a film started from the room's link is built at once ---------- */
/* 'See it in use' sits above the film and starts it before the film has entered; it opens full strength, not as a ghost */
html.js #wealth .wealth-film.playing .part{opacity:1;transition:none}
html.js #wealth .wealth-film.playing::after{opacity:0;transition:none}

/* ---------- reduced motion: the built page, at once ---------- */
@media (prefers-reduced-motion: reduce){
  html.js .reveal:not(.in) .part:not(.card),
  html.js .reveal:not(.in) :is(.btn.part,.part:has(> .btn),.film-play.part,.badge.part,video.part),
  html.js #founder .portrait:not(.in) img.part,
  html.js .tier.reveal:not(.in) > .card > *,
  html.js .rv-track.reveal:not(.in) .rv > .card > *,
  html.js #book.reveal:not(.in) .book :is(.cover,.btn){opacity:1}
  html.js .tier.reveal:not(.in) > .card > :is(.foot,.seal){opacity:1} /* (0,6,1): ties the fill rule and wins by coming later */
  #wealth .tier::before{opacity:1} /* the ticket rings, before site.js pins every block */
  html.js .card.reveal::before,html.js .card.reveal::after,
  html.js .tier.reveal > .card::before,html.js .tier.reveal > .card::after,
  html.js .rv-track.reveal .rv > .card::before,html.js .rv-track.reveal .rv > .card::after,
  html.js #method .steps::after,html.js #wealth .tiers::after,
  html.js #wealth .wealth-film::after,html.js #founder .portrait::before{display:none}
}

/* ---------- 11dc: the page without JavaScript, and a page whose site.js failed ----------
   The head script sets .js before the first paint and takes it off at 4s if site.js has not booted, so these rules serve
   both cases. They held only in <noscript> (backplates) or not at all (the desktop hero) until 11dc. */
html:not(.js) #premise .backplate{background-image:url("hero-ending.webp")}
html:not(.js) #services .plate{background-image:url("still-services.webp")} /* 10k-2026-09-30 lift 1: the still moved to the plate */
html:not(.js) #contact .roots{background-image:url("still-roots.webp")}
/* 11fg (the founder, 13 October 2026): the contact form sends only through site.js, so without it the form and its divider go,
   and one line in the form's place gives the email address */
html:not(.js) #lead,html:not(.js) #contact .divider{display:none}
html:not(.js) #contact .lead-nojs{display:block}
/* 11fo S13, 16 October 2026: the film without JavaScript plays in the browser's own bar (the video's controls attribute, which site.js
   takes off; a browser with scripting off shows its bar anyway): the poster stays as the picture, under the video, which shows
   nothing of its own until it plays (Chrome's bar paints a grey panel over a film not yet loaded, so its layer is cleared), and the
   play button, which needs site.js, is out of the way: hidden, so out of the tab order and the reading order, its picture and the
   cue's words still shown, its disc not (the bar's own play button is the way in). .house is set by site.js's film code, so a page
   whose script failed after that point keeps the working house player. */
html:not(.js) #wealth .wealth-film:not(.house) .film-play{visibility:hidden;pointer-events:none}
html:not(.js) #wealth .wealth-film:not(.house) .film-play :is(picture,.film-len){visibility:visible}
html:not(.js) #wealth .wealth-film:not(.house) video{z-index:1;background:transparent}
html:not(.js) #wealth .wealth-film:not(.house) video::-webkit-media-controls{background:transparent}
/* 11fo F7, 17 October 2026 (the accessibility review): the browser's bar covered the poster's burned-in "Recorded in the app · Sample
   household" label and printed 0:00 on it. Without JavaScript the video's box now runs 104px below the picture (Chrome's whole overlay,
   its fade, buttons and line, measured at 103px at 1440 and at 402), the picture held at the box's top (contain, so the film, when it
   plays, fills the frame's place exactly), so the bar draws under the picture, never on it; the frame lets it out (its corners now
   kept by the poster's own clip and the video's), and the caption keeps its 12px below the bar (116px: the two margins collapse into one).
   With JavaScript nothing changes. */
html:not(.js) #wealth .wealth-film:not(.house){overflow:visible;margin-bottom:116px}
html:not(.js) #wealth .wealth-film:not(.house) .film-play{overflow:hidden;border-radius:inherit}
html:not(.js) #wealth .wealth-film:not(.house) video{bottom:auto;height:calc(100% + 104px);object-fit:contain;object-position:50% 0;border-radius:inherit}
/* the hero as one still screen: without site.js the desktop scrub, its poster and its captions never start, and the
   16-screen stage would be empty navy; the phone's 4-screen sequence would hold one frame */
html:not(.js) .hero{height:100vh;height:100svh}
html:not(.js) .stage{position:relative}
html:not(.js) :is(#hero-video,.poster,.bands,.cue,.depth,.scrim,.trunk){display:none}
html:not(.js) .hero-static{display:block}
@media (min-width:721px) and (orientation:landscape){
  html:not(.js) .hero-static{background-image:url("hero-static.jpg")}
  html:not(.js) .hero-static .col{top:22%;left:6vw;right:auto;width:36vw}
  html:not(.js) .hero-static .cta-row{left:6vw;right:auto;bottom:18%}
}
html:not(.js) .nav{background:rgba(7,18,36,.92)} /* the ribbon's navy comes from .scrolled, which only site.js sets */
/* the trunk is unpositioned until site.js places it: hide it until boot, so no stray tick shows at the top of the hero */
html:not(.booted) .trunk{visibility:hidden}
/* 10k-2026-09-30 lift 7: a safety net for a failed script. */
html.js.dcl:not(.booted) .band[data-first],
html.js.dcl:not(.booted) .band[data-first] :is(.kicker.chip,.sub,.cta-row){animation:boot-net 0s 1.2s forwards}
@keyframes boot-net{to{opacity:1}}
html.js.dcl:not(.booted) .poster{background-image:url("hero-poster.jpg")} /* over8 step 27: a failed script shows the film's first frame behind the safety-net headline. */
/* 10k-2026-09-30 lift 7: on Save-Data or 2G/3G (html.lite, head script) a phone skips the other hero frames (107 since 11fo S12; 11fo F8, 17 October 2026), as the desktop skips its video (11cv): one screen on the first frame (loaded for… */
@media (orientation: portrait) and (max-width: 1024px) and (prefers-reduced-motion: no-preference){
  html.lite .hero{height:100vh;height:100svh}
  html.lite .stage{position:relative}
  html.lite #hero-seq{display:none}
  html.lite .hero-static .chips{display:none}
}

/* 10k-2026-09-30 lift 8: the trunk on phones, one form (560px and under) ---------- The page trunk is hidden on phones (the static-hero gate), and three desktop pieces were left behind… */
/* over8 step 4: these forms hold wherever the page trunk is hidden, Services below 1024px and the method below 901px. */
@media (max-width:720px),(orientation:portrait) and (max-width:1023px),(orientation:landscape) and (pointer:coarse) and (max-height:560px) and (max-width:1023px),(prefers-reduced-motion:reduce) and (max-width:1023px){
  /* services: a static gutter trunk. It fades in at the top of the list and ends at the fourth union. The pseudo-element of a
     grid container takes its grid area as its containing block, so rows 1 to 3 plus the 22px gap and the 28px down to the
     fourth branch's junction place its end exactly, whatever the cards' heights. The indent is 28px (was 56): the cards gain
     28px (322px wide at 390, 252 at 320, where the kicker now fits one line). The branch runs 24px from the trunk to the card,
     and the union bead is set on the trunk again as the hold reaches it (11cx; it was hidden with the page trunk). */
  #services .branches{position:relative}
  #services .branches::before{content:"";position:absolute;grid-column:1;grid-row:1/4;left:3px;top:0;bottom:-50px;width:2px;border-radius:1px;pointer-events:none;background:linear-gradient(180deg,rgba(95,179,168,0),rgba(95,179,168,.6) 28px)}
  .branch{padding-left:28px}
  .branch::before{left:4px;width:24px}
  .branch::after{display:block;left:0}
  @media (min-width:561px){#services :is(.graft-head,.branches){max-width:calc(54ch + 96px);margin-left:0}} /* over8 step 4: from 561px the cards hold a short measure and the head centres over them; clear8 2026-10-02: 54ch (was 62ch). */
  /* 11fo S12, 16 October 2026: the gutter trunk grows with the scroll, as the desktop trunk does. site.js marks the list .grows
     (with JavaScript and motion allowed; without either the line is the static one above) and draws it from its top to its tip,
     70% down the screen (the desktop tip's height; since 11fo G1 by moving the line, below). The tip tapers over its last 40px,
     the desktop's .sap-end node rides it (scale .6, full size once the line has reached the fourth union), and each branch
     stub waits for the tip (.reached, the desktop's rule above).
     11fo F1, 17 October 2026 (the performance review): the growing line is drawn by .gut, an empty aria-hidden list item site.js
     adds to the list (no words; absolutely placed on the static line's own grid area and box, so it takes no grid cell and the
     four branches keep their :nth-child); a frame restyles .gut alone, never the list or its cards. The node is .gut's ::after
     (over the stubs and beads, under the cards: z-index 1 against their 2, as the list's last pseudo-element was), riding the tip
     with translate (its own property, outside the transform its scale transitions on), where top made every frame a layout.
     11fo G1, 17 October 2026 (the performance recheck): the line no longer repaints as it grows. It was a mask gradient built from
     the drawn length, so every frame of a phone's pass repainted, rastered and layerized it. Now .gut's one child, an empty <i>,
     holds the static line's box under the branches' stubs and beads as before (z-index -1 in the .wrap's stacking context), with
     the line's 28px fade-in as a mask that never changes; its ::before is the line drawn whole, once, its last 40px tapering out,
     and moved: site.js translates it up by what has not yet grown (the <i> clips what is above), and the node down to the tip,
     both by a paused animation whose time a frame sets. The picture is the old one, the 28px fade-in times the 40px taper. */
  html.js #services .branches.grows::before{content:none}
  html.js #services .branches.grows>.gut{display:block;position:absolute;grid-column:1;grid-row:1/4;left:3px;top:0;bottom:-50px;width:2px;margin:0;padding:0;pointer-events:none}
  html.js #services .branches.grows>.gut>i{display:block;position:absolute;inset:0;z-index:-1;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 28px);mask-image:linear-gradient(180deg,transparent,#000 28px)}
  html.js #services .branches.grows>.gut>i::before{content:"";position:absolute;inset:0;border-radius:1px;background:linear-gradient(180deg,rgba(95,179,168,.6) calc(100% - 40px),rgba(95,179,168,0));transform:translateY(-100%);will-change:transform}
  html.js #services .branches.grows.grown>.gut>i::before{background:linear-gradient(rgba(95,179,168,.6),rgba(95,179,168,.6))} /* whole, untapered, once the line has reached the fourth union (a gradient, as the old line's, so forced colours keep it) */
  html.js #services .branches.grows>.gut::after{content:"";position:absolute;z-index:1;left:-4px;top:-5px;width:10px;height:10px;border-radius:50%;pointer-events:none;background:var(--teal);opacity:0;transform:scale(.6);transition:opacity var(--d-fast) var(--ease-out),transform var(--d-med) var(--ease-out)}
  html.js #services .branches.grows:is(.tip,.grown)>.gut::after{opacity:.9}
  html.js #services .branches.grows.grown>.gut::after{transform:none}
}
/* 11fo S12, 16 October 2026: a 40px sap cue from the phone hero's foot, on the gutter trunk's line (the gutter plus 3px, where
   the Services list's trunk runs), drawn down once as the film lands (hero progress .97, the desktop cue's moment) and tapering
   out, so the trunk that grows through Services continues it. Only on the frame sequence: not under reduced motion, Save-Data
   or without JavaScript (none of those has the landing). */
@media (orientation:portrait) and (max-width:1024px) and (prefers-reduced-motion:no-preference){
  html.js:not(.lite) .hero::after{content:"";position:absolute;left:calc(var(--gutter) + 3px);top:100%;width:2px;height:40px;border-radius:1px;pointer-events:none;background:linear-gradient(180deg,var(--teal),var(--accent) 45%,rgba(127,203,122,0));clip-path:inset(0 0 100% 0)}
  html.js:not(.lite) .hero:has(.stage.landed)::after{clip-path:inset(0);transition:clip-path .9s var(--ease-out)}
}
@media (max-width:720px),(orientation:portrait) and (max-width:900px),(orientation:landscape) and (pointer:coarse) and (max-height:560px) and (max-width:900px),(prefers-reduced-motion:reduce) and (max-width:900px){
  #method .steps,#method .fit{grid-template-columns:1fr}#method .foot p{width:100%} /* over8 step 4: both grids fold together (11be), to one column on the spine. */
  /* method: the step line turns into a spine joining the four dots, the words set right of it. Same grid-area trick: steps 1
     to 3, then the 28px row gap and 9.5px down to dot 4's centre, so it stops at the last dot. It draws downward over its
     dashed guide (11dc), the dashes lifting from the top as the ink reaches them, and the travelling light runs down it once it
     is drawn (its length, --spine, is measured by site.js). Each dot is centred on its kicker's first line. */
  #method .steps::before{grid-column:1;grid-row:1/4;left:4px;right:auto;top:9.5px;bottom:-37.5px;width:1px;height:auto;transform:scaleY(0);transform-origin:50% 0}
  #method .steps.in::before{transform:scaleY(1)}
  html.js #method .steps::after{grid-column:1;grid-row:1/4;left:4px;right:auto;top:9.5px;bottom:-37.5px;width:1px;height:auto;background:repeating-linear-gradient(180deg,var(--a-dash) 0 5px,transparent 5px 10px);clip-path:inset(100% 0 0 0)}
  html.js #method .steps:not(.in)::after{clip-path:inset(0 0 0 0)}
  #method .step{padding:0 0 0 30px}
  #method .step::before{top:5px}
  #method .dot{top:6px;left:1px}
  #method.live.on .dot{animation-name:travel-down}
}
@keyframes travel-down{0%{top:6px}100%{top:calc(6px + var(--spine,0px))}}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  #method .steps::before,#method .steps.in::before{transform:none} /* the phone forms above come later than the reduced-motion pins, so they are pinned again here */
}

/* over8 step 4: from 600px a stacked ticket has two columns inside (perks on the right). */
@media (min-width:600px) and (max-width:900px){
  #wealth .tier .card{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1.15fr);grid-template-rows:auto auto auto 1fr auto;column-gap:clamp(20px,3.4vw,32px);align-items:start}
  #wealth .tier h3{grid-column:1/-1}
  #wealth .tier :is(.price,.tagline,.foot){grid-column:1}
  #wealth .tier .foot{grid-row:5;max-width:none}
  #wealth .tier .hairline{grid-column:2;grid-row:2/-1;align-self:stretch;width:1px;height:auto;margin:14px 0 0}
  #wealth .tier .perks{grid-column:3;grid-row:2/-1;margin-top:14px}
}
/* over8 step 4: on portrait tablets the hero button is its own width, 300px at least. */
@media (orientation:portrait) and (min-width:541px) and (max-width:1024px){.hero-static .cta-row{align-items:flex-start}.hero-static .cta-row .btn{min-width:300px}}
/* over8 step 4: from 700px the portrait sits beside the letter's opening (sticky upright, as on desktop). */
@media (min-width:700px) and (max-width:900px){#founder .founder-grid{grid-template-columns:minmax(0,32%) 1fr;column-gap:clamp(28px,5vw,48px)}}
@media (min-width:700px) and (max-width:900px) and (orientation:portrait){#founder .portrait{position:sticky;top:calc(var(--nav-h) + 24px)}}
/* over8 step 4, tightened by clear8 2026-10-02: running text holds 54ch below 1024px (62ch set 72 to 75 characters a line). */
@media (min-width:561px) and (max-width:1023px){#founder .message p,#method :is(.factor,.step) p{max-width:54ch}}
/* over8 step 4: below 1024px the Services still is a band behind the head, its union beside the heading and its trunk on the gutter trunk's line. */
@media (max-width:1023px){
  #services{--band:clamp(380px,56vw,520px)}
  #services .backplate{mask-image:linear-gradient(180deg,transparent 0,#000 150px,#000 calc(var(--band)*.6),transparent var(--band));-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 150px,#000 calc(var(--band)*.6),transparent var(--band))}
  #services .plate{bottom:auto;height:var(--band);background-size:auto var(--band);background-position:calc(var(--gutter) + 4px - var(--band)*.4063) 50%}
}
/* over8 step 4: on a phone on its side the diagram is one screen tall at most. */
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px){#premise .diagram{width:auto;height:calc(100vh - var(--nav-h) - 24px);height:calc(100svh - var(--nav-h) - 24px);margin-inline:auto}}
/* over8 step 21: on phones the diagram labels are 18 units (11 rendered at 7 to 9px), each pillar name on two lines, and the root label 16 over shortened roots. */
@media (max-width:560px),(orientation:landscape) and (pointer:coarse) and (max-height:560px){
  #premise .diagram text{font-size:18px}
  #premise .diagram .l1{baseline-shift:22px}
  #premise .diagram .pl:not([text-anchor]) .l1{text-anchor:start}#premise .diagram .pl[text-anchor] .l2{text-anchor:end}
  #premise .diagram .pl{transform:translateX(77px)}#premise .diagram .pl:not([text-anchor]){transform:translateX(-77px)}#premise .diagram .pl[x="310.65"]{transform:translateX(-84.7px)}
  #premise .diagram .head{transform:translateY(-6px)}
  #premise .diagram .root{font-size:16px;transform:translateY(-1px)}
  #premise .diagram .rootline{transform:scaleY(.8);transform-origin:210px 470px}
}
/* over8 step 21: on phones the contact head sits on the list's left edge. */
@media (max-width:560px){#contact .top{text-align:left;margin:0}#contact .top .micro{margin-left:0}}
/* over8 step 21: 44px hit areas for the wordmark, the footer tagline and the Wealth hand-off link; nothing moves. */
@media (pointer:coarse){
  .brand{position:relative}
  .brand::after{content:"";position:absolute;inset:-7px -8px}
  footer .cols p a,#wealth .handoff a{position:relative}
  footer .cols p a::before,#wealth .handoff a::before{content:"";position:absolute;inset:-11px 0} /* over8 step 21: a ::before, since a trailing box moves text-wrap:pretty's line breaks. */
}
/* over8 step 21: the desktop's sap-line cue on the phone hero's filmed stem, 24px above the button, fading once the page scrolls. */
@media (orientation:portrait) and (max-width:1024px) and (prefers-reduced-motion:no-preference){
  .hero-static .cta-row::before{content:"";position:absolute;left:50%;bottom:calc(100% + 24px);width:2px;height:36px;margin-left:-1px;border-radius:1px;pointer-events:none;opacity:.9;transition:opacity var(--d-med) var(--ease-out);
    background:linear-gradient(180deg,var(--accent),var(--teal)) 0 -36px/2px 36px no-repeat,repeating-linear-gradient(180deg,var(--a-dash) 0 3px,transparent 3px 6px) .5px 0/1px 100% no-repeat;animation:sapcue-bg 3.6s linear infinite}
  .nav.scrolled ~ main .hero-static .cta-row::before{opacity:0;animation-play-state:paused}
  .stage.away .hero-static .cta-row::before{animation-play-state:paused}
  html:is(.lite,:not(.js)) .hero-static .cta-row::before{display:none}
}
@keyframes sapcue-bg{0%{background-position:0 -36px,.5px 0;animation-timing-function:cubic-bezier(.22,.61,.36,1)}34%{background-position:0 0,.5px 0}56%{background-position:0 0,.5px 0;animation-timing-function:cubic-bezier(.55,0,.75,.2)}82%,100%{background-position:0 36px,.5px 0}}
/* over8 step 5: from 1024px the founder h2 spans both columns above the portrait and the letter, one sentence a line (.message has nine grid items, letter-recut 2026-10-01). */
@supports (grid-template-rows:subgrid){@media (min-width:1024px){
  #founder .founder-grid{grid-template-rows:repeat(9,auto);row-gap:0;--fig-gap:clamp(20px,2.4vw,32px)} /* 11fo S6, 16 October 2026: the figures' column gap, named once, since the portrait's width reads it too. */
  #founder .message{grid-column:1/-1;grid-row:1/-1;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid}
  #founder .message>*{grid-column:2}#founder .message>:is(.kicker,h2,.figures){grid-column:1/-1}
  #founder .message>.kicker{margin-bottom:14px;justify-self:start}#founder .message h2{margin-bottom:clamp(28px,4vw,48px)}
  #founder .portrait{grid-column:1;grid-row:4/-1;justify-self:start;width:min(calc(80% + (4 * var(--c2) - 3 * var(--fig-gap)) / 5),calc((100vh - var(--nav-h) - 56px) * 4 / 5));width:min(calc(80% + (4 * var(--c2) - 3 * var(--fig-gap)) / 5),calc((100svh - var(--nav-h) - 56px) * 4 / 5))} /* 11fo S6 review: on a short window the stuck portrait (top nav + 40px) would end below the screen, so its width is also capped at what fits: (window - nav - 56px) x 4/5, as the film caps itself; its left edge stays on the figures' first column. */ /* 11fo S6, 16 October 2026: the portrait starts on the figures' first column and is exactly two figure columns and the gap between them wide. The grid is this column twice plus the 2 x --c2 gap (the 1024px rule below), so (2 x grid - 3 x --fig-gap) / 5 is 80% of the column plus (4 x --c2 - 3 x --fig-gap) / 5: 362px at 1024, at most 424 (at 1200), 416 from 1400 to 2560, always inside its column (447px wide at 1024, 508 from 1400), left of the trunk; still sticky (the 1024px rule at the top, which keeps it 340px against the trunk where subgrid is missing). */
  #founder .message>.figures{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--fig-gap);margin-bottom:clamp(28px,4vw,48px)} /* letter-recut 2026-10-01: five across under the headline, the sap masked behind it (site.js). 11fo S6: the gap is --fig-gap (unchanged, clamp(20px,2.4vw,32px)). */
}}
/* 11fo S6, 16 October 2026: on a phone held upright, where the section is one column (under 700px), the portrait runs edge to edge at 4:5:
   the full width of the screen, no side margin, no rounded corners. Only where a full-width 4:5 frame is no taller than the screen
   (max-aspect-ratio:4/5): a phone on its side, a short window or a folding phone opened square keeps the 300px frame (on a 667 x 375
   phone a full-width one would be 834px tall). The negative margins carry it across the wrap's padding to the screen's edges (not
   100vw, which counts a classic scrollbar and would scroll sideways). The vignette (::after) is the same inset shade, so the picture
   still sinks into the navy at its top and foot and darkens toward the screen's edges like a lens; the pencil frame (::before) keeps
   only its top and bottom dashes, so the draft is a plate ruled across the page, not a box cut off by the screen. */
@media (max-width:699px) and (max-aspect-ratio:4/5){
  #founder .portrait{max-width:none;margin-inline:calc(-1 * var(--gutter));border-radius:0}
  html.js #founder .portrait::before{border-inline-width:0}
}
/* over8 step 11: from 1024 to 1279px the method columns sit 48px apart (199px wide at 1024, were 182), the trunk still in the middle gap. */
@media (min-width:1024px) and (max-width:1279px){:root{--c2:24px}} /* clear8 2026-10-02: the method's 48px gap here, so the foot still starts on step 3's edge. */
@media (min-width:1024px){#triggers .doors,#premise .premise-grid,#wealth .systems,#wealth .who,#founder .founder-grid,#reviews .wrap,#method :is(.wrap,.fit,.steps){column-gap:calc(var(--c2) * 2)}#wealth .room-head,#faq .faq-grid{column-gap:calc(10% + var(--c2))}.branch{padding-left:var(--c2)}.branch::before{width:var(--c2)}#services .integration{padding-left:var(--c2)}} /* clear8 2026-10-02: every right column starts on one edge, the trunk plus --c2 (it ranged from 736 to 776 at 1440). */
/* over8 step 10: the sap ends on the wordmark; the pillar line is its strapline. */
footer .sign{position:relative;display:flex;flex-direction:column;align-items:center;font-size:clamp(30px,9vw,88px);margin-bottom:clamp(20px,2.4vw,30px);--stem-h:clamp(48px,5.4vw,76px)}
footer .sign .stem{position:relative;width:2px;height:var(--stem-h);border-radius:1px;background:linear-gradient(180deg,rgba(95,179,168,0),var(--teal) 50%,var(--accent) 82%,rgba(127,203,122,0));clip-path:inset(0 -5px -6px -5px);transition:clip-path .7s var(--ease-out) .1s} /* 11fo S11, 16 October 2026: the stem fades out just above the letters (as the trunk fades before a heading it meets) and its node lands on the wordmark's rule (the sign's ::after below), so the sap reaches the name before the name is inked. */
footer .sign::after{content:"";position:absolute;left:50%;top:calc(var(--stem-h) + .32em + 1em + .2em + 1px);width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px rgba(127,203,122,.5);pointer-events:none} /* 11fo S11: the stem's node (it was the stem's own ::after, 28px above the letters at 1440), centred on the rule under the name: the stem's height, the mark's .32em gap, its 1em line and the rule's .2em gap, plus half the rule */
html.js footer .sign:not(.in) .stem{clip-path:inset(0 -5px 100% -5px);transition:none}
html.js footer .sign:not(.in)::after{opacity:0;transform:scale(.4)}
html.js footer .sign.in::after{transition:opacity .2s var(--ease-out) .52s,transform .5s var(--ease-out) .52s} /* 11fo S11: the node seats on the rule as the stem's draw ends (about .55s of its .1s + .7s ease-out) */
html.js footer .sign.reveal.in .part:nth-child(n){transition-delay:.6s}html.js footer .sign.reveal.in .mark.part{transition-delay:.68s} /* 11fo S11: the rule, then the name, stay at pencil until the node has landed (they inked at .07 and .14s, about 400ms before the sap reached them) */
footer .sign .mark{margin-top:.32em;font-family:var(--display);font-size:1em;line-height:1;letter-spacing:.32em;padding-left:.32em;color:var(--text)}
footer .sign .rule{width:3.2em;height:2px;margin-top:.2em;border-radius:2px;background:linear-gradient(90deg,transparent,var(--text) 30%,var(--text) 70%,transparent)}
footer .cols>:first-child{display:contents}footer .cols>:first-child>h3{grid-column:1;grid-row:2}footer .cols>:first-child>ul{grid-column:1;grid-row:3}footer .cols>:nth-child(2){grid-column:2;grid-row:2/4}footer .cols>:nth-child(3){grid-column:3;grid-row:2/4}
footer .cols>:first-child>p{grid-column:1/-1;grid-row:1;justify-self:center;max-width:62ch;margin-bottom:clamp(36px,4.4vw,56px);text-align:center;text-wrap:balance}
/* over8 step 10: under 700px the two link lists sit side by side. */
@media (max-width:699px){footer .cols{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}footer .cols>:nth-child(2){display:grid;grid-template-rows:subgrid;align-items:start}footer .cols>:nth-child(3){grid-column:1/-1;grid-row:4;margin-top:36px}}
@media (min-width:700px) and (max-width:1023px){footer .cols>:nth-child(3) p{text-wrap:balance}} /* over8 step 10: the narrower third column wrapped raggedly at 900. */
@media (min-width:700px) and (min-height:600px) and (max-height:820px){footer .sign{font-size:clamp(30px,min(9vw,10vh),88px);margin-bottom:16px}footer .sign{--stem-h:clamp(40px,6vh,76px)}footer .cols>:first-child>p{margin-bottom:32px}} /* over8 step 10: on short laptops the stem clears the ribbon at the page end. */
/* letter-recut 2026-10-01: the founder's five figures, Bodoni lining numerals over mono kicker captions, two across on phones. */
#founder .figures{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px}
#founder .figures li{display:flex;flex-direction:column;gap:9px;min-width:0;padding-top:14px;border-top:1px solid var(--line)}
#founder .figures .fig{font-family:var(--display);font-size:clamp(32px,2.8vw,40px);line-height:1;color:var(--text);font-variant-numeric:lining-nums} /* letter-recut 2026-10-01: the pricing figures' 40px at 1440. 11fo S8, 16 October 2026: never under 32px (was 24), so the phone figures read as figures; 32px up to 1142 wide, then 2.8vw to 40px. 11fo S8/S9/S10 review, 16 October 2026: so they are no longer always about three quarters of the h2: from 1024 they are (.67 to .77; 32px under its 43px at 1024, 40 under 52 from 1429), at 768 the two meet (32px and 32.3px), and on phones the figures, 32px, stand above the 30px h2, as S8 asked. */
#founder .figures .fig .plus{font-variation-settings:"opsz" 6;font-size:1.1em;line-height:0;vertical-align:-.03em} /* 11fo S8, 16 October 2026: the "+" in Bodoni's 6pt cut, a tenth larger: at display sizes the auto optical size drew it in hairlines (about .01em against the numerals' .115em stems), now .045em, 58% of the figure height (was 53%) and still centred on it; line-height 0, so the row keeps its height */
#founder .figures .cap{font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);text-wrap:balance}
#founder .figures li:first-child{grid-column:1/-1} /* letter-recut 2026-10-01: two across, the lead figure takes its own row (one, two, two). */
@media (min-width:541px) and (max-width:699px),(min-width:780px){#founder .figures{grid-template-columns:repeat(3,minmax(0,1fr))}#founder .figures li:first-child{grid-column:auto}} /* letter-recut 2026-10-01: three and two wherever a caption keeps 140px. */
/* letter-recut 2026-10-01: paragraphs 2 to 4 are one block, folded on phones behind "Read the rest" (site.js). */
#founder .rest:not([hidden]){margin-top:18px}
#founder .more:not([hidden]){display:inline-flex;align-items:center;min-height:44px;margin-top:6px;padding:0;border:0;background:none;font:600 16px/1.3 var(--body);cursor:pointer}
#founder .rest>p:focus{outline:none} /* letter-recut 2026-10-01: focus lands on the first revealed paragraph for reading, not as a control. */
#founder .rest.inking>p{animation:menu-ink var(--d-med) var(--ease-out) both}#founder .rest.inking>p:nth-child(2){animation-delay:.07s}#founder .rest.inking>p:nth-child(n+3){animation-delay:.14s} /* letter-recut 2026-10-01: pencil to ink in the 11dc steps, no movement. */
/* letter-recut 2026-10-01: on phones the Services "We provide:" label is the button that opens its list (site.js), with the FAQ's chevron. */
.branch .starts .provide:not([hidden=""]){display:block} /* letter-recut 2026-10-01: a block, so hidden=until-found can fold it; plain hidden still hides. */
.branch .starts.folds{padding-top:1px}
.branch .starts.folds b{margin-bottom:0}
.branch .starts b button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;margin:0;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;color:inherit;cursor:pointer}
.branch .starts b button::after{content:"";flex:none;width:8px;height:8px;margin-right:6px;border-right:1px solid var(--text-2);border-bottom:1px solid var(--text-2);transform:translateY(-25%) rotate(45deg);transition:transform var(--d-fast) var(--ease-out)}
.branch .starts b button[aria-expanded="true"]::after{transform:translateY(25%) rotate(-135deg)}
.branch .starts.folds .provide:not([hidden]){padding-bottom:4px}
.branch .starts .provide.inking{animation:menu-ink var(--d-med) var(--ease-out) both}
/* 11fl (the founder, 2026-10-15): the Wealth Architecture page (wealtharchitecture/index.html, body.page-wealth, built from this page by review/tools/build-wealth-page.py). Its first section is the ivory room, so the nav keeps the navy of .scrolled from the top (without .scrolled's blur, which would make the ribbon the containing block of the phone menu's fixed sheet; site.js adds .scrolled, blur and all, once the page scrolls, as on the home page); the room clears the fixed nav; its heading is the page's h1, sized and balanced as the room's h2; the FAQ has no aside, so its list takes the row. */
.page-wealth .nav{background:rgba(7,18,36,.92)}
@media (max-width:540px),(min-width:541px) and (pointer:coarse) and (max-height:560px){.page-wealth .nav.open{background:rgb(7,18,36)}} /* the phone menu's ribbon stays the sheet's opaque navy, as .nav.open makes it on the home page (the rule above would otherwise win, coming later at the same specificity) */
.page-wealth #wealth{padding-top:clamp(112px,13vw,176px)}
.page-wealth #wealth h1{font-size:var(--fs-section);max-width:22ch;text-wrap:balance}
.page-wealth #faq .faq-grid{grid-template-columns:1fr}
.page-wealth #faq .faq-list{max-width:860px}
/* 11fo S10, 16 October 2026: phones on their side and tablets, 600 to 900px wide, get two-column layouts where one column ran long.
   The four doors pair up 2x2 (they were one column to 900); the method's four "Where you are" items are 2x2 (one column where the
   steps fold to the spine; 721 to 900 on a fine pointer already had both grids 2x2 on one set of tracks, 11be, and still has); the
   seven systems run in two columns, 01 to 04 and 05 to 07, wherever the systems and the routine stack; the "Who it is for" and "What
   we promise" paragraphs, one column there, hold 62ch. Nothing changes from 901, or under 600.
   11fo S8/S9/S10 review, 16 October 2026: two fixes. From 901 to 1023 the method is HEAD's again, the four steps in one row and the
   step line through all four dots, the "Where you are" items four across on the same tracks (a 2x2 there had left steps 3 and 4
   under no line, as the line runs along the top of the grid). And the 62ch is on the two paragraphs, not on .who, so the block and
   its border-top hairline keep the full width of the column. */
@media (min-width:600px) and (max-width:900px){
  #triggers .doors{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  #method .fit{grid-template-columns:repeat(2,minmax(0,1fr))}
  #wealth .systems>:first-child>ol{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);grid-auto-flow:column;column-gap:clamp(24px,4vw,40px)}
  #wealth .who>*{max-width:62ch}
}
/* 11fo S10: on a phone on its side (the short coarse landscape of site.js GATES) the ribbon slides away as the page scrolls down and
   back as it scrolls up (site.js sets .away); never while the menu is open or closing (a moved ribbon would carry the fixed sheet
   with it), never with focus inside it, and never under reduced motion, where it simply stays. */
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px) and (prefers-reduced-motion:no-preference){
  .nav{transition:background var(--d-med) var(--ease-out),padding var(--d-med) var(--ease-out),transform .34s var(--ease-out)}
  .nav.away:not(.open):not(.closing){transform:translateY(calc(-100% - 2px))}
}
/* 11fo S16, 16 October 2026: the hinge, where the navy method meets the ivory room, as a quiet second set piece. As the sap's tip
   reaches the room's knot (the hinge 70% down the screen, the trunk tip's height), a horizon line of sap draws out from the knot
   to both edges, brightest at the knot and tapering to nothing at its ends as the trunk's tip does; and the ivory rises behind it:
   the room's ivory, moved onto its own layer under everything the section holds, starts a little below the hinge and meets the
   line as the hinge passes 45% of the screen, so the gap shows the page's own navy ground, never a painted navy. Both answer the
   scroll alone (a view timeline on #wealth, transforms only, on the compositor): nothing runs on its own, a stop holds them, and
   scrolling back undoes them. The badge, the heading and every word stay at full strength throughout: the rise (30 to 60px)
   stays inside the room's top padding (56 to 110px), so the ivory's edge never reaches the badge or a word; from 1280px it never
   meets the badge's glow either, and below that only the glow's faint outer haze reaches into it, a few levels on the ivory. (The
   badge's own entrance, 11dc, is unchanged: it inks as the room's head passes 88% of the screen, before the hinge reaches 70%.)
   The nav is untouched. Only on the home page (#method + #wealth: the Wealth Architecture page opens on the room), only with
   JavaScript, as every entrance, and only where scroll-driven animations exist and motion is welcome; everywhere else, and under
   reduced motion, today's cut exactly. site.js sets --hz-x, the knot's x (the page trunk's line from 1024px; the centre where the
   knots are not drawn), and --hz-c, the sap's colour at the knot (teal without it). */
@supports (animation-timeline:view()) and (animation-range:entry 0% entry 100%){
  @media (prefers-reduced-motion:no-preference){
    html.js #method + #wealth{background:transparent;view-timeline-name:--hinge;view-timeline-axis:block;view-timeline-inset:0px}
    html.js #method + #wealth::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--room);
      animation-name:hz-rise;animation-timing-function:cubic-bezier(.45,0,.3,1);animation-fill-mode:both;animation-timeline:--hinge;animation-range:entry 30% entry 55%}
    html.js #method + #wealth::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;pointer-events:none;
      background:linear-gradient(90deg,transparent,var(--hz-c,#5FB3A8) var(--hz-x,50%),transparent);transform-origin:var(--hz-x,50%) 50%;
      animation-name:hz-draw;animation-timing-function:var(--ease-out);animation-fill-mode:both;animation-timeline:--hinge;animation-range:entry 30% entry 52%}
  }
}
@keyframes hz-rise{from{transform:translateY(clamp(30px,4.4vw,60px))}to{transform:none}}
@keyframes hz-draw{from{transform:scaleX(0)}to{transform:none}}