/* Advisory home (/bank/): sections added 2026-10-18. Loaded only by the advisory home.
   2026-11-04: restyled after the landing page (silver stage, Newsreader headlines, Archivo text, the ribbon's spectrum as a
   sparing accent). The tokens and the overrides of shared site.css rules are in the "Restyle" block at the end of this file,
   so the People, Credits and Privacy pages keep their look. */

/* ---------- Expert guidance panes ---------- */
/* guidance panes */
.banker{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;margin-top:18px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:12px}
.banker img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.banker strong{display:block;font-family:var(--font-body-medium);font-weight:400;font-size:14px}
.banker span{display:block;font-size:12px;color:var(--muted)}
.banker b{font-weight:400;font-size:11px;color:#277a4d;padding:4px 9px;border-radius:999px;background:#e9f4ee}
.agents{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.agents div{position:relative;padding:12px 14px;border-radius:10px;border:1px dashed #d9d8de}
.agents small{display:block;font-size:11px;color:var(--muted)}
.agents strong{display:block;font-family:var(--font-body-medium);font-weight:400;font-size:13px;margin-top:2px}
.agents i{position:absolute;right:12px;top:12px;width:14px;height:14px;border-radius:50%;background:var(--ink)}
.agents i:after{content:"";position:absolute;left:4px;top:3px;width:4px;height:6px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.timeuse{margin-top:18px;font-size:12px;color:var(--muted)}
.timeuse div{height:8px;border-radius:4px;background:var(--line);margin:8px 0 6px;overflow:hidden}
.timeuse i{display:block;height:100%;width:100%;background:var(--spectrum-deep-flow) 0 0/200% 100% repeat-x;transform:scaleX(0);transform-origin:left}
.advantage .pane.play .timeuse i{animation:grow-x 1.2s cubic-bezier(.2,.65,.3,1) 3.4s both,spectrum-flow var(--flow) linear infinite}
.timeuse b{font-weight:400;color:var(--ink)}
/* Price protection chart. The svg stretches to the plot box (preserveAspectRatio="none"); every label is HTML, so text stays 12-13px at any width.
   Geometry (viewBox 560x120): gridlines at x 20/150/280/410/540 = 3.5714%/26.7857%/50%/73.2143%/96.4286%; our line at y 8 (6.667%); the traditional line drops to y 76 (63.333%). */
.hold{margin-top:14px;padding-top:22px}
.hold__plot{position:relative;height:140px}
.hold__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hold__grid line{stroke:var(--line);vector-effect:non-scaling-stroke}
.hold path{fill:none;stroke-dasharray:1;stroke-dashoffset:1}
.hold__typ{stroke:#878790;stroke-width:1.5}
.hold__ours{stroke:url(#hold-spectrum);stroke-width:2.5} /* Preambient's line in the spectrum (the gradient sits in the chart's svg; its colours flow: site.js starts the gradient's animateTransform unless the reader asked for reduced motion) */
.advantage .pane.play .hold__typ{animation:draw 1.4s cubic-bezier(.4,0,.2,1) 2.2s both}
.advantage .pane.play .hold__ours{animation:draw 1.4s cubic-bezier(.4,0,.2,1) 2.5s both}
@keyframes draw{to{stroke-dashoffset:0}}
.hold__end{position:absolute;left:96.4286%;top:6.667%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#a06e32;opacity:0}
.hold__lb{position:absolute;font-size:12px;line-height:16px;white-space:nowrap;opacity:0}
/* Above the plot, so no gridline reaches it. */
.hold__lb--ours{bottom:calc(100% + 6px);right:calc(3.5714% + 10px);color:var(--ink)}
/* Just above the traditional line, right of the drop. It carries the pane colour, so the Documents gridline passes behind the text, never through it. */
.hold__lb--typ{left:calc(50% + 10px);bottom:calc(36.667% + 2px);padding:2px 6px;background:var(--surface);color:var(--muted)}
.advantage .pane.play .hold__end,.advantage .pane.play .hold .hold__lb{animation:fade .4s ease-out 3.9s both}
.hold__x{position:relative;height:16px;margin-top:8px;font-size:13px;line-height:16px;color:var(--muted)}
.hold__x span{position:absolute;top:0;white-space:nowrap;transform:translateX(-50%)}
.hold__x span:nth-child(1){left:3.5714%;transform:none}
.hold__x span:nth-child(2){left:26.7857%}
.hold__x span:nth-child(3){left:50%}
.hold__x span:nth-child(4){left:73.2143%}
.hold__x span:nth-child(5){left:auto;right:3.5714%;transform:none}
/* The tallest pane sets the window height. A shorter pane keeps its head at the top and centres its body in the space below it,
   so no state shows a dead band at the bottom or a gap in the middle. */
.pane>.pane__head,.pane>:last-child{margin-bottom:auto} /* the body keeps its own top margin as the minimum gap */
.pane--hold .hold{margin-bottom:10px} /* the stage names never touch the first task row */
.who{display:grid;grid-template-columns:1fr 1.2fr auto;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.who strong{display:block;font-family:var(--font-body-medium);font-weight:400;font-size:14px}
.who span{display:block;font-size:12px;color:var(--muted)}
.who em{font-style:normal;font-size:13px}
.who em.mask{display:block;height:12px;width:80%;border-radius:6px;background:repeating-linear-gradient(90deg,#dddce2 0 6px,#e8e7ec 6px 12px)}
.who b{font-weight:400;font-size:10px;letter-spacing:.5px;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:#eceaf1;color:var(--muted)}
.who b.on{background:var(--ink);color:#fff}
.told{margin-top:18px;padding:14px 16px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:13px;color:var(--muted)}
.told strong{font-family:var(--font-body-medium);font-weight:400;color:var(--ink)}
/* Entrance timing of each pane's rows (owner, 2026-11-07: a product demo, not a slideshow). Every row is marked data-rise and
   enters 50ms after the one above it (--d), from .1s. Each scene's story beat after that has its own time (--t), one beat at
   a time (see "Guidance tour scenes"). They are set here by position, as the CSP keeps style attributes out of the page. */
.pane--team .banker{--d:.1s}
.pane--team .agents>:nth-child(1){--d:.15s;--t:.9s}
.pane--team .agents>:nth-child(2){--d:.2s;--t:1.5s}
.pane--team .agents>:nth-child(3){--d:.25s;--t:2.1s}
.pane--team .agents>:nth-child(4){--d:.3s;--t:2.7s}
.pane--team .timeuse{--d:.35s}
.pane--week>.cal{--d:.1s}
.pane--week>.feed{--d:.15s}
.pane--week>.task:nth-child(4){--d:.2s;--t:.9s}
.pane--week>.task:nth-child(5){--d:.25s;--t:1.5s}
.pane--week>.task:nth-child(6){--d:.3s;--t:2.1s}
.pane--week>.task:nth-child(7){--d:.35s;--t:2.7s}
.pane--week>.partner{--d:.4s}
.pane--hold>.dd{--d:.1s}
.pane--hold .dd li:nth-child(1){--t:.7s}
.pane--hold .dd li:nth-child(2){--t:1.1s}
.pane--hold .dd li:nth-child(3){--t:1.5s}
.pane--hold>.hold{--d:.15s}
.pane--hold>.reserve{--d:.2s}
.pane--conf>.nda{--d:.1s}
.pane--conf>.who:nth-child(3){--d:.15s}
.pane--conf>.who:nth-child(4){--d:.2s}
.pane--conf>.who:nth-child(5){--d:.25s}
.pane--conf>.who:nth-child(6){--d:.3s}
.pane--conf .told{--d:.35s}

/* ---------- Tablet and phone ---------- */
@media (max-width: 809px) {
  .agents div { padding: 10px 12px; }
  .agents i { right: 10px; top: 10px; }
  .who { grid-template-columns: 1fr auto; }
  .who em, .who em.mask { display: none; }
  .hold__plot { height: 130px; }
  .hold__x { font-size: 12px; }
  /* Two lines, right-aligned, between the drop and the closing gridline. */
  .hold__lb--typ { left: auto; right: calc(3.5714% + 4px); max-width: 9.8em; white-space: normal; text-wrap: balance; text-align: right; }
}
/* Narrow phones: five stage names do not fit on one row, so LOI and Documents drop to a second row. */
@media (max-width: 479px) {
  .hold__x { height: 32px; }
  .hold__x span:nth-child(2n) { top: 16px; }
}
/* 320px: three short lines keep the label clear of the drop. */
@media (max-width: 359px) { .hold__lb--typ { max-width: 8.2em; } }
/* Wide windows: two lines in the open band between the Diligence and Documents gridlines, so no gridline crosses the text and it needs no chip.
   8.2em (98px) breaks after "price": "Traditional: price" is 88px wide, "Traditional: price cut" 108px. */
@media (min-width: 1280px) {
  .hold__lb--typ { left: calc(50% + 10px); bottom: calc(36.667% + 6px); max-width: 8.2em; padding: 0; background: none; white-space: normal; }
}

/* ---------- Without JS (or if JS failed): content readable, nothing stuck invisible ---------- */
html:is(:not(.js), .js-failed) :is(.timeuse, .hold__end, .hold .hold__lb, .told) { opacity: 1 !important; animation: none !important; }
html:is(:not(.js), .js-failed) :is(.timeuse i, .hold path) { transform: none !important; stroke-dashoffset: 0 !important; animation: none !important; }

/* ================= Restyle (2026-11-04): the landing page's look on the advisory home =================
   Light silver stage (labs.css --stage-*), ink text, headlines in the display serif at weight 300 with tight tracking,
   text and controls in Archivo, the violet focus ring. The WebGL ribbon's palette (soft blue, teal, warm amber,
   lavender-grey) is an accent only: spectrum hairlines, Preambient's side of the charts, and a slow glow behind the
   closing call (until 2026-11-06 behind Solution's heading too, and until 2026-11-05 behind the hero headline). Glows hold still under reduced motion.
   These rules override shared site.css rules for this page only (site.css also styles People, Credits and Privacy). */
:root {
  --stage-top: #dcdfe4;
  --stage-mid: #e6e8ec;
  --stage-bot: #edeef1;
  --ink: #171815;
  --headline: rgba(0, 0, 0, .875);
  --muted: rgba(23, 24, 26, .74);    /* 6.5:1 on --stage-top, 7.3:1 on --surface */
  --violet: #482873;                 /* focus ring: 8.6:1 on --stage-top */
  --violet-on-dark: #b9a3e8;         /* the same ring on the films and the graphite: 8:1 */
  --btn-dark: #171815;
  --surface: #f5f6f8;                /* cards, the chart stage and the guidance window */
  --line: rgba(23, 24, 26, .1);
  --line-dashed: rgba(23, 24, 26, .14);
  --graphite: #16171b;
  --spectrum: linear-gradient(90deg, #8a9cc8, #78bed6 34%, #e4c698 68%, #929ec2);
  --spectrum-deep: linear-gradient(90deg, #482873, #3454a0 35%, #1e7896 70%, #a06e32); /* marks that carry meaning: 3:1 or more on the stage */
  /* The same two spectra for the moving accents: the stops run there and back over one tile, so a tile twice the element's
     width shows the static spectrum at rest and loops with no seam (see "Moving spectrum" below). */
  --spectrum-flow: linear-gradient(90deg, #8a9cc8, #78bed6 17%, #e4c698 34%, #929ec2 50%, #e4c698 66%, #78bed6 83%, #8a9cc8);
  --spectrum-deep-flow: linear-gradient(90deg, #482873, #3454a0 17.5%, #1e7896 35%, #a06e32 50%, #1e7896 65%, #3454a0 82.5%, #482873);
  --flow: 8s;        /* short bars: the tab bars, the step bar, the time bar */
  --flow-slow: 12s;  /* long hairlines */
  --font-display: "Newsreader Text", "Newsreader Text fallback", Georgia, "Times New Roman", serif;
  --font-serif: var(--font-display);
  --font-body: "Archivo", "Archivo fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body-medium: var(--font-body);
  --mono: Consolas, Monaco, "Lucida Console", "Courier New", monospace;
}
body { background: var(--stage-bot); }
/* Every former "Medium" face is Archivo at 500. One rule, as specific as the rules it follows. */
:is(.tstep strong, .screen__bar b, .task strong, .live strong, .book__title, .banker strong,
  .agents strong, .who strong, .told strong) { font-weight: 500; }

/* Type */
.h1 { font-weight: 300; letter-spacing: -0.022em; }
.h2 { font-weight: 300; font-size: 58px; line-height: 1.04; letter-spacing: -0.022em; color: var(--headline); }
.lead { line-height: 26px; }
.pane__head strong { font-size: 20px; letter-spacing: -0.01em; }
.live b { font-weight: 300; font-size: 34px; }

/* Buttons: ink pills with light text; a soft spectrum glow on hover and focus. */
/* The glow is the button's ::after (outer shadows only, so it never covers the label). It fades in on hover and focus, and
   while it shows, its three colours move round it (see "Moving spectrum"). */
.btn { border-radius: 999px; height: 42px; padding: 0 22px; font-weight: 500; letter-spacing: .01em; transition: background-color .2s ease, box-shadow .35s ease, transform .2s ease; }
.btn:hover { opacity: 1; }
.btn--dark { background: var(--ink); color: #fff; box-shadow: 0 8px 20px -12px rgba(23, 24, 26, .6); }
.btn--dark:hover, .btn--dark:focus-visible { background: #24252a; transform: translateY(-1px); }
.btn--light { background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 10px 30px -12px rgba(0, 0, 0, .5); }
.btn--light:hover, .btn--light:focus-visible { background: #fff; box-shadow: inset 0 0 0 1px #fff, 0 10px 30px -12px rgba(0, 0, 0, .5); transform: translateY(-1px); }
.btn--dark, .btn--light { position: relative; }
.btn--dark::after, .btn--light::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease; animation: glow-flow 6s linear infinite paused; }
.btn--dark::after { box-shadow: -10px 10px 26px -10px var(--g1), 0 0 34px -6px var(--g2), 10px 0 44px -10px var(--g3); }
.btn--light::after { box-shadow: -12px 0 30px -2px var(--g1), 0 0 40px -4px var(--g2), 12px 0 52px -6px var(--g3); }
.btn--dark:is(:hover, :focus-visible)::after, .btn--light:is(:hover, :focus-visible)::after { opacity: 1; animation-play-state: running; }
.btn--nav { height: 36px; padding: 0 16px; background: rgba(255, 255, 255, .92); color: var(--ink); }
/* The nav button's show and hide. Owner, 2026-11-06: "the contact button should appear from the right, not the top of the
   page. and should be smoother." (it dropped in from translateY(-6px), site.css, which the other pages keep). Here it waits
   16px to the right of its place and slides in from there, in step with the page links making room: the button and the links
   move on one soft ease-out (--cta-ease) over 700ms, so the two read as one movement. The button's fade (500ms ease-out)
   starts 150ms after them, so it never shows over a link that is still moving. On the way out the button fades and slides
   right in 350ms; the links start 100ms later on an even ease-in-out (--cta-out-ease, 500ms), so they reach its place only
   once it has gone. */
.nav { --cta-ease: cubic-bezier(.22, 1, .36, 1); --cta-in: .7s; --cta-out: .5s; --cta-out-ease: cubic-bezier(.4, 0, .2, 1); }
.btn--nav { transition: opacity .5s ease-out .15s, transform var(--cta-in) var(--cta-ease), visibility 0s, background-color .2s ease, box-shadow .35s ease; }
.nav[data-cta="hidden"] .btn--nav { opacity: 0; pointer-events: none; transform: translateX(16px); visibility: hidden; transition: opacity .35s ease-out, transform .35s var(--cta-ease), visibility 0s .35s; }
.nav[data-theme="light"] .btn--nav { background: var(--ink); color: #fff; }

/* Focus: the violet ring, lavender on the films and the graphite. */
:focus-visible { outline-color: var(--violet); }
[data-theme="dark"] :focus-visible, .hero :focus-visible, .closing :focus-visible, .nav[data-theme="dark"] :focus-visible { outline-color: var(--violet-on-dark); }
.screen:has(.pane:focus-visible) { outline-color: var(--violet); }
.skip { background: var(--ink); }
::selection { background: rgba(72, 40, 115, .85); color: #fff; }

/* Nav over the silver: frosted stage, the spectrum edge under it (see "Nav edge"). */
.nav[data-theme="light"].nav--scrolled { background: rgba(237, 238, 241, .78); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); } /* the spectrum edge (.nav__edge) is its border */
.nav[data-theme="dark"].nav--scrolled { background: rgba(14, 15, 18, .42); }
/* The advisory header (partials/header-bank.html: the advisory home, Testimonials, Media). Owner, 2026-11-06: "i like the top
   bar to be the dark theme the entire time". It carries data-theme-fixed, so site.js leaves its data-theme at "dark" on every
   section: white logo, links and glow, the white nav button ("Book a call"), the spectrum edge. It has a graphite ground from the top of
   the page, not only once scrolled, so the white type reads over the light hero and the light sections too. The selector
   matches .nav[data-theme="dark"].nav--scrolled in weight and comes after it, so the scrolled tint never replaces it. */
.nav[data-theme][data-theme-fixed] { background: rgba(22, 23, 27, .94); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }

/* ---------- Hero (2026-11-05: concept 8, "Guilloche and hologram") ----------
   The light treatment: ink type on the silver stage, no dark scrims, the copy on the left. Owner, 2026-11-06: the three facts
   left the hero's foot (the products are chosen in the switcher below it), so the hero has no bar and no gap where it stood:
   an empty .hero__floor at the foot gives the art the line its street stands on.
   .hero__media is the whole background: the stage gradient (all a reader without JS sees), the canvas that js/hero-guilloche.js
   draws on, and a faint light fade at the foot. Swapping the background means replacing that one element.
   The content is in flow (WCAG 1.4.12): larger text spacing grows the hero instead of clipping it. The art fits itself into
   whatever room the copy and the floor leave. */
.hero--engraved { height: auto; min-height: 0; max-height: none; background: var(--stage-bot); color: var(--ink); }
.hero--engraved::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--spectrum-flow) 0 0 / 200% 100% repeat-x; opacity: .85; z-index: 2; animation: spectrum-flow var(--flow-slow) linear infinite; } /* the seam into the silver */
.hero--engraved .hero__media { background: linear-gradient(180deg, var(--stage-top), var(--stage-mid) 55%, var(--stage-bot)); }
.hero--engraved .hero__media::before { display: none; }
.hero--engraved .hero__media::after { inset: 0; width: auto; height: auto; background: linear-gradient(0deg, rgba(238, 238, 236, .4), rgba(238, 238, 236, 0) 22%); pointer-events: none; }
.hero__art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hero--engraved .hero__content { position: relative; inset: auto; z-index: 1; min-height: max(640px, 100svh); display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: 0;
  padding: clamp(112px, 21vh, 200px) var(--gutter) clamp(20px, 3vh, 32px); }
.hero__floor { height: 0; }
.hero--engraved .hero__copy { max-width: min(980px, 100%); }
.hero--engraved .h1 { font-size: clamp(42px, 6.1vw, 92px); line-height: 1.02; letter-spacing: -0.022em; color: var(--ink); }
.hero--engraved .hero__copy .lead { max-width: 34em; margin-top: clamp(18px, 2.4vh, 28px); font-size: 19px; line-height: 1.45; color: var(--ink); }
.hero--engraved .hero__copy .btn { height: 52px; margin-top: clamp(24px, 3.4vh, 36px); padding: 0 28px; font-size: 16px; }
.hero--engraved :focus-visible { outline-color: var(--violet); }
.hero--engraved ::selection { background: rgba(72, 40, 115, .85); color: #fff; }

/* ---------- The product switcher (owner, 2026-11-06) ----------
   "I like L5 night network instead of 'What is your next deal? / Sell / Acquire / Raise capital' and the value propositions".
   Variant L5, "Night network", in place of this morning's L2 layout (a dark band, then light panels). It follows the hero.
   One graphite band, all text white: the label "Choose your deal", the three products as large serif words (the chosen one
   underlined with a moving spectrum line), and the chosen product's panel. The network canvas (js/switcher.js) fills the band;
   on wide screens it shows on the right, beside the panel, with no caption and no labels (owner, 2026-11-06). A veil keeps
   the copy column dark: the text sits on #16171b to #1f2335, and switcher.js dims the network near the text (its brightest
   pulse there leaves white at 4.5:1 or more). Below 900px the network shows between the words and the panel.
   The seams: a 1px moving spectrum line, with a soft blurred copy of itself, at the top of the band (over the hero's own seam)
   and at its foot, where Expert guidance starts, as at the top of the closing. (Solution, the light part of this section that
   followed the chosen product, was removed, owner, 2026-11-06: "i think 'We get you the best deal possible' section can be
   removed, it just rehashes what is above.")
   With JS (keyed on html.js, set before the first paint, so nothing jumps when switcher.js runs) the three panels share one
   grid cell, so a switch never moves the page below, and only the chosen one shows. Without JS, or if a script failed, the
   words and the network stay hidden and the three panels stack, Sell first, each under its name. */
.switcher { position: relative; }
/* The dawn's colours, from the horizon line outward: warm white at the line, amber, teal, blue, deep blue, then clear. The band's
   foot (here, glowing up from its horizon) and the closing's top under the firms (the Dusk horizon, below, glowing down from
   its line) both draw them, each in a box as tall as its glow. The warm day on the light side of each line: --day-sun, a pool
   under or over the sun, and --day-warm, a warm tint that clears 280px from the line (220px below 900px). */
:root {
  --dawn-glow: rgba(255, 240, 215, .8), rgba(228, 198, 152, .55) 6%, rgba(110, 170, 200, .42) 18%, rgba(70, 104, 160, .45) 36%, rgba(36, 48, 96, .42) 62%, rgba(30, 38, 72, 0);
  --day-sun: rgba(255, 245, 228, .9), rgba(255, 245, 228, 0);
  --day-warm: #f2efea, rgba(242, 239, 234, 0);
}
.switcher__band { position: relative; isolation: isolate; overflow: clip; padding: 112px 0 96px; color: #fff; --switcher-dawn: 150px;
  background:
    linear-gradient(0deg, var(--dawn-glow)) 0 100% / 100% var(--switcher-dawn) no-repeat,
    radial-gradient(70% 90% at 72% 50%, #1d2030, var(--graphite) 70%) var(--graphite); }
.switcher__net { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; }
.switcher__veil { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(22, 23, 27, .94), rgba(22, 23, 27, .86) 34%, rgba(22, 23, 27, 0) 58%); }
/* The veil keeps the copy column dark down to the dawn, then lets the dawn through. */
.switcher__veil { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--switcher-dawn)), transparent calc(100% - var(--switcher-dawn) + 100px));
  mask-image: linear-gradient(180deg, #000 calc(100% - var(--switcher-dawn)), transparent calc(100% - var(--switcher-dawn) + 100px)); }
.switcher__band :focus-visible { outline-color: var(--violet-on-dark); }
.switcher__band ::selection { background: rgba(185, 163, 232, .9); color: var(--ink); }
.switcher__grid { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); grid-template-rows: auto auto 1fr;
  grid-template-areas: "eyebrow stage" "tabs stage" "panel stage"; column-gap: 48px; min-height: 640px; }
.switcher__eyebrow { grid-area: eyebrow; margin: 0; font: 600 12px/16px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .74); }
.switcher__tabs { display: none; }
.js:not(.js-failed) .switcher__tabs { grid-area: tabs; display: flex; flex-wrap: wrap; gap: 4px 36px; margin-top: 18px; }
.switcher__tab { position: relative; padding: 6px 0 12px; border: 0; background: none; cursor: pointer; font-family: var(--font-display); font-weight: 300; font-size: 44px; line-height: 1.05; letter-spacing: -0.02em; color: rgba(255, 255, 255, .62); transition: color .25s ease; -webkit-tap-highlight-color: transparent; }
.switcher__tab:hover { color: rgba(255, 255, 255, .9); }
/* Before switcher.js marks a choice, Sell (the first word) reads as chosen, as it is. */
.switcher__tab[aria-selected="true"], .switcher:not(.is-tabbed) .switcher__tab:first-child { color: #fff; }
.switcher__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2, .65, .3, 1);
  background: var(--spectrum-flow) 0 0 / 200% 100% repeat-x; animation: spectrum-flow var(--flow) linear infinite; }
.switcher__tab[aria-selected="true"]::after, .switcher:not(.is-tabbed) .switcher__tab:first-child::after { transform: scaleX(1); }
.switcher__tab:focus-visible { outline: 2px solid var(--violet-on-dark); outline-offset: 4px; border-radius: 4px; }
/* The stage: where the network's "your company" point stands (switcher.js reads it). */
.switcher__stage { grid-area: stage; position: relative; min-height: 300px; }
html:is(:not(.js), .js-failed) .switcher__grid { min-height: 0; grid-template-areas: "eyebrow stage" "panel stage" "panel stage"; }
html:is(:not(.js), .js-failed) .switcher__stage { display: none; }
/* Your company's point is a link to the booking, as Contact (owner, 2026-11-06: "the point in that animation should be
   clickable and lead to the same endpath as contact"). A 56px round hit area centred on the point (--point-x, --point-y,
   set by switcher.js in the band's coordinates); hidden until the network draws (is-live), so never without JS or the canvas.
   The canvas answers a pointer or focus on it (the rings brighten); the ring here is the focus ring. */
.switcher__point { display: none; }
.js:not(.js-failed) .switcher__point.is-live { position: absolute; z-index: 1; left: 0; top: 0; display: block; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; transform: translate(var(--point-x, 0), var(--point-y, 0)); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.switcher__point:focus-visible { outline: 2px solid var(--violet-on-dark); outline-offset: 2px; }
.switcher__deck { grid-area: panel; margin-top: 44px; }
html:is(:not(.js), .js-failed) .switcher__deck { margin-top: 28px; }

/* A product panel: the heading, four value propositions (and their explainer card), what we do, Contact. */
.switcher__panel + .switcher__panel { margin-top: 72px; }
.switcher__name { margin: 0 0 12px; font-family: var(--font-display); font-weight: 300; font-size: 40px; line-height: 1.05; color: #fff; }
.js:not(.js-failed) .switcher__deck { display: grid; }
.js:not(.js-failed) .switcher__panel { grid-area: 1 / 1; align-self: start; margin: 0; }
.js:not(.js-failed) .switcher__name { display: none; }
.js:not(.js-failed) .switcher:not(.is-tabbed) .switcher__panel + .switcher__panel, .js:not(.js-failed) .switcher__panel.is-off { visibility: hidden; opacity: 0; transform: translateY(8px); }
.js:not(.js-failed) .switcher.is-ready .switcher__panel { transition: opacity .45s ease, transform .45s cubic-bezier(.2, .65, .3, 1), visibility 0s; }
.js:not(.js-failed) .switcher.is-ready .switcher__panel.is-off { transition: opacity .2s ease, transform .2s ease, visibility 0s .2s; }
/* The outgoing panel stays visible through its 200ms fade, and a later panel paints over an earlier one: it takes no clicks
   meanwhile, so a click just after a switch reaches the chosen panel, never an explainer of the one leaving. */
.js:not(.js-failed) .switcher__panel.is-off { pointer-events: none; }
.switcher__panel:focus-visible { outline: 2px solid var(--violet-on-dark); outline-offset: 12px; border-radius: 6px; }
/* A deep link (#acquire) makes its panel the :target and the browser may focus it: the panel keeps the same 2px ring then, so
   a keyboard reader who arrives by a link sees where focus is. */
.switcher__deck { container-type: inline-size; }
/* The heading ends "With Preambient:" and reads on one line at desktop (owner, 2026-11-06: "it should fit ideally in one line, as it
   looks clean"; then 'make the "With Preambient:" change too', in place of "We get you:"). Its size follows the panel's width (cqi),
   so the longest heading, Acquire's, fits on one line at every width from 810px up (4.3cqi: 25.8px in the 600px panel at 1440 and
   1280, Acquire's line 580px); all three take the same size. Below 810px it may wrap to two lines. */
.switcher__h3 { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(18px, 4.3cqi, 30px); line-height: 1.2; letter-spacing: -0.012em; color: #fff; white-space: nowrap; }
/* The value propositions: four in a row beside the network (two by two on phones), each a figure or a short phrase over its
   label. With JS each is a button that opens the explainer card; without JS the explanation shows as text under it. */
.switcher__figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; margin: 28px 0 0; padding: 0; list-style: none; } /* three value propositions (the fee item left 2026-11-07) */
.switcher__figs li { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .2); transition: border-color .25s ease; }
.switcher__figs strong { font-family: var(--font-display); font-weight: 300; font-size: 40px; line-height: 1; letter-spacing: -0.02em; color: #fff; white-space: nowrap; }
.switcher__figs strong small { font-size: .42em; letter-spacing: 0; } /* a <small>, not a <sub>: the text reads "30 days" with a real space */
.switcher__figs span { margin-top: 10px; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .76); }
/* Newsreader Text has no ×, so the sign in "15×" is set in Archivo, in the figure's size and colour. */
.switcher__figs strong .switcher__x { margin: 0; font-family: var(--font-body); font-weight: 300; font-size: inherit; line-height: 0; color: inherit; } /* line-height 0: Archivo's taller ascent must not grow the line */
/* Acquire and Raise capital: the figures are short phrases, not numbers. The phrase
   takes the number's place in a smaller size, on up to two lines. */
.switcher__figs--words strong { font-size: 24px; line-height: 28px; white-space: normal; text-wrap: balance; }
/* Without JS: the explanation as plain text under its item. */
.switcher__vp-text { margin: 10px 0 0; font-size: 14px; line-height: 21px; color: rgba(255, 255, 255, .9); }
.js:not(.js-failed) .switcher__figs:not(.is-static) .switcher__vp-text { display: none; }
/* With JS: the item is a disclosure button over the whole item (the -14px margin takes in the item's top padding). A small plus
   on the hairline marks it; open, the plus turns to a cross and the hairline brightens. */
.switcher__vp { position: relative; display: flex; flex-direction: column; align-items: flex-start; width: 100%; margin: -14px 0 0; padding: 14px 18px 6px 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.switcher__vp::before, .switcher__vp::after { content: ""; position: absolute; top: 9px; right: 0; width: 11px; height: 1px; background: rgba(255, 255, 255, .7); transition: transform .3s cubic-bezier(.2, .65, .3, 1), background-color .25s ease; }
.switcher__vp::after { transform: rotate(90deg); }
.switcher__vp[aria-expanded="true"]::before { transform: rotate(45deg); }
.switcher__vp[aria-expanded="true"]::after { transform: rotate(135deg); }
.switcher__vp:hover span, .switcher__vp[aria-expanded="true"] span { color: #fff; }
.switcher__vp:hover::before, .switcher__vp:hover::after, .switcher__vp[aria-expanded="true"]::before, .switcher__vp[aria-expanded="true"]::after { background: #fff; }
.switcher__figs li:has(> .switcher__vp:hover), .switcher__figs li:has(> .switcher__vp[aria-expanded="true"]) { border-top-color: rgba(255, 255, 255, .6); }
.switcher__vp span { transition: color .25s ease; }
.switcher__vp:focus-visible { outline: 2px solid var(--violet-on-dark); outline-offset: 4px; border-radius: 4px; }
/* The explainer card, under the items. Closed it has no height; open, a thin moving spectrum line travels across its top edge from
   the clicked item's centre (--vp-x, set by switcher.js), then the card expands under it (height and opacity): white text on a
   slightly lifted graphite (#23252c, opaque, so the network never shows through the text). A brighter mark under the clicked
   item (--vp-left, --vp-w) slides to the next item clicked. The deck reserves the tallest card (switcher.js), so opening one never moves the page below. */
.switcher__card { position: relative; display: grid; grid-template-rows: 0fr; margin-top: 22px; transition: grid-template-rows .44s cubic-bezier(.2, .65, .3, 1); }
.switcher__card.is-open { grid-template-rows: 1fr; transition-delay: .18s; }
.switcher__card + .switcher__promise { margin-top: 8px; }
.switcher__card-clip { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s .44s; }
.switcher__card.is-open .switcher__card-clip { visibility: visible; transition: none; }
.switcher__card-box { margin-bottom: 22px; padding: 18px 20px 20px; border-radius: 0 0 8px 8px; background: #23252c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 18px 40px rgba(0, 0, 0, .28); opacity: 0; transition: opacity .25s ease; }
.switcher__card.is-open .switcher__card-box { opacity: 1; transition: opacity .35s ease .28s; }
.switcher__card-text { max-width: 36em; margin: 0; font-size: 15px; line-height: 23px; color: #fff; }
.switcher__card-rail, .switcher__card-mark { position: absolute; z-index: 1; left: 0; pointer-events: none; background: var(--spectrum-flow) 0 0 / 200% 100% repeat-x; animation: spectrum-flow var(--flow) linear infinite; }
.switcher__card-rail { top: 0; right: 0; height: 1px; transform: scaleX(0); transform-origin: var(--vp-x, 0) 50%; transition: transform .6s cubic-bezier(.45, 0, .2, 1); }
.switcher__card-rail::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 5px; background: inherit; filter: blur(4px); opacity: .6; }
.switcher__card.is-open .switcher__card-rail { transform: scaleX(1); }
.switcher__card-mark { top: -1px; width: var(--vp-w, 0); height: 3px; border-radius: 2px; opacity: 0; transform: translateX(var(--vp-left, 0)); box-shadow: 0 0 10px rgba(228, 198, 152, .55);
  transition: transform .45s cubic-bezier(.2, .65, .3, 1), width .45s cubic-bezier(.2, .65, .3, 1), opacity .2s ease; }
.switcher__card.is-open .switcher__card-mark { opacity: 1; }
/* A jump (the first open, and the close on a product switch) places the line and the mark without travel. */
.switcher__card.is-jump, .switcher__card.is-jump * { transition: none !important; }
/* Owner, 2026-11-07: "No deal, no fee" stands where the "We run the sale process…" paragraph stood, large in the display serif. */
.switcher__promise { margin: 30px 0 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(44px, 8vh, 72px); line-height: 1.02; letter-spacing: -0.025em; color: #fff; }
.switcher__promise-d { max-width: 30em; margin: 12px 0 0; font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, .72); }
.switcher__panel .btn { height: 48px; margin-top: 32px; padding: 0 28px; font-size: 15px; }

/* The seams: one at the top of the band, over the hero's own 1px line, and one at its foot, where Expert guidance starts. */
.switcher__seam { position: relative; z-index: 2; display: block; height: 1px; margin-top: -1px; pointer-events: none; background: var(--spectrum-flow) 0 0 / 200% 100% repeat-x; animation: spectrum-flow var(--flow-slow) linear infinite; }
.switcher__seam::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 5px; background: inherit; filter: blur(5px); opacity: .6; }
/* The join: "Dawn horizon" (owner, 2026-11-06: "i think dawn horison looks good, but in the video, the text formatting
   underneath is messed up. ensure that doesn't transfer."). Only the light ports; nothing moves, fades or shifts any text.
   The dawn: the band's foot glows upward in a soft spectrum (blue, teal, amber, warm white at the line). switcher.js draws it
   on the canvas, from 12px below the lowest white text of any panel to the line, and sets --switcher-dawn (its height); the
   band's own background repeats it for no JS (150px; 130px below 900px, under the stacked panels' last line of text).
   The horizon: the lower seam, a warm-white line with a blurred moving spectrum round it.
   The pulses: on a product switch your company's pulse and two of the product's key points fall to the line and flare where
   they land (switcher.js, on the canvas), and once a cycle at the product's climax. They never draw over the panel's text.
   .switcher__flare: a pool of light under the line where your company's pulse lands. It is Expert guidance's first child and
   sits behind its content (z-index -1 in .advantage's own stacking context, see "Grounds"), so it brightens the ground and
   never covers or fades the text.
   White text stays on the veiled graphite above the dawn, as before (4.5:1 or more); ink and muted text on the warm day keep
   4.5:1. Expert guidance's layout, type and its own motion (site.js) are as before. */
/* The horizon line and its glow are shared with the Dusk horizon (the closing's top seam under the light run, below). */
.switcher__seam--horizon, .lit-run + .closing > .closing__seam { background: linear-gradient(90deg, rgba(255, 247, 232, .55), #fff7e8 18%, #fffbf3 50%, #fff7e8 82%, rgba(255, 247, 232, .55)); animation: none; }
.switcher__seam--horizon::after, .lit-run + .closing > .closing__seam::after { top: -4px; height: 9px; background: var(--spectrum-flow) 0 0 / 200% 100% repeat-x; filter: blur(6px); opacity: .7; animation: spectrum-flow var(--flow-slow) linear infinite; }
.switcher__flare { position: absolute; z-index: -1; left: var(--switcher-x, 70%); top: -56px; width: 760px; height: 210px; margin-left: -380px; opacity: 0; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 27%, rgba(255, 248, 232, .95), rgba(255, 238, 208, .5) 34%, rgba(255, 238, 208, 0) 72%); }

@media (max-width: 1199px) {
  .switcher__grid { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); column-gap: 24px; }
  .switcher__tab { font-size: 38px; }
  .switcher__figs strong { font-size: 36px; }
  .switcher__figs--words strong { font-size: 22px; line-height: 26px; }
}
/* Below 900px the stage moves between the words and the panel. The veil darkens the band down to the words' foot
   (--switcher-head-end) and again from the stage's foot (--switcher-stage-end), both set by switcher.js. */
@media (max-width: 899px) {
  .switcher__band { padding: 88px 0 72px; --switcher-dawn: 130px; }
  .switcher__flare { width: 520px; height: 170px; margin-left: -260px; top: -46px; }
  .switcher__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eyebrow" "tabs" "stage" "panel"; grid-template-rows: none; min-height: 0; }
  html:is(:not(.js), .js-failed) .switcher__grid { grid-template-areas: "eyebrow" "panel"; }
  .switcher__veil { background: linear-gradient(180deg, rgba(22, 23, 27, .9), rgba(22, 23, 27, .8) var(--switcher-head-end, 200px), rgba(22, 23, 27, 0) calc(var(--switcher-head-end, 200px) + 60px), rgba(22, 23, 27, 0) var(--switcher-stage-end, 520px), rgba(22, 23, 27, .9) calc(var(--switcher-stage-end, 520px) + 60px), rgba(22, 23, 27, .94)); }
  .switcher__stage { min-height: 220px; margin-top: 8px; } /* owner, 2026-11-07: the band must fit the screen; less empty art between the tabs and the copy */
  .switcher__deck { margin-top: 28px; }
}
@media (max-width: 809px) {
  .js:not(.js-failed) .switcher__tabs { gap: 2px 22px; margin-top: 14px; }
  .switcher__tab { font-size: 30px; padding: 6px 0 10px; }
  .switcher__stage { min-height: 170px; }
  /* Phones: the heading may wrap to two lines; the value propositions go two by two. */
  .switcher__h3 { font-size: 26px; white-space: normal; text-wrap: balance; }
  .switcher__figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; margin-top: 22px; }
  .switcher__figs li:last-child { grid-column: 1 / -1; } /* three items: the third runs across under the pair */
  .switcher__figs strong { font-size: 34px; }
  .switcher__figs--words strong { font-size: 22px; line-height: 26px; }
  .switcher__figs span { margin-top: 8px; }
  .switcher__card { margin-top: 18px; }
  .switcher__card-box { padding: 16px 16px 18px; }
  .switcher__promise { margin-top: 24px; font-size: 48px; }
  .switcher__promise-d { margin-top: 10px; font-size: 14px; line-height: 21px; }
  .switcher__panel .btn { width: 100%; }
}
/* Reduced motion: the panels change at once, the spectrum lines hold their resting colours (switcher.js draws one still frame). */
@media (prefers-reduced-motion: reduce) {
  .switcher__tab::after, .switcher__seam, .switcher__seam--horizon::after, .lit-run + .closing > .closing__seam::after { animation: none; }
  .switcher__flare { opacity: .55; } /* a resting flare under your company; switcher.js draws one still frame with the dawn */
  .switcher__tab, .switcher__tab::after { transition: none; }
  .js:not(.js-failed) .switcher.is-ready .switcher__panel, .js:not(.js-failed) .switcher.is-ready .switcher__panel.is-off { transition: none; }
  .js:not(.js-failed) .switcher__panel.is-off, .js:not(.js-failed) .switcher:not(.is-tabbed) .switcher__panel + .switcher__panel { transform: none; }
  /* The card opens at once and its line appears without travelling, at rest. */
  .switcher__card, .switcher__card *, .switcher__vp::before, .switcher__vp::after, .switcher__figs li { transition: none !important; }
  .switcher__card-rail, .switcher__card-mark { animation: none; }
}
/* Forced colours: no canvas, no veil, no gradient glow; the chosen word and the seams in system colours. */
@media (forced-colors: active) {
  .switcher__net, .switcher__veil, .switcher__seam::after, .switcher__seam--horizon::after, .switcher__flare { display: none; }
  .switcher__band { background-image: none; }
  .switcher__seam, .switcher__seam--horizon, .switcher__tab::after { forced-color-adjust: none; background: CanvasText; animation: none; }
  .switcher__tab[aria-selected="true"], .switcher:not(.is-tabbed) .switcher__tab:first-child { outline: 2px solid Highlight; outline-offset: 4px; }
  /* The value cards: plain borders, no glow. */
  .switcher__card-rail::after { display: none; }
  .switcher__card-rail, .switcher__card-mark, .switcher__vp::before, .switcher__vp::after { forced-color-adjust: none; background: CanvasText; animation: none; box-shadow: none; }
  .switcher__card-box { border: 1px solid CanvasText; box-shadow: none; }
  .switcher__vp[aria-expanded="true"] { outline: 2px solid Highlight; outline-offset: 4px; }
  /* No canvas, so no point to click: the panel's Contact stays. */
  .js:not(.js-failed) .switcher__point.is-live { display: none; }
}
/* ---------- Nav pages (round 6, owner) ----------
   Testimonials and Media sit before the nav button (partials/header-bank.html), when the nav-pages switch is on.
   They take the nav's colour (ink on the light nav, white on the dark one). On phones they fold into a <details> menu with a
   three-line toggle (aria-label "More pages") and a small card under the nav. */
.nav__pages { display: flex; align-items: center; gap: 28px; margin-right: 16px; }
.nav__pages a, .nav__fold-panel a { font-size: 14px; line-height: 20px; color: inherit; text-underline-offset: 4px; }
.nav__pages a { padding: 8px 0; }
.nav__pages a:hover { text-decoration: underline; text-decoration-color: currentColor; }
.nav__pages a[aria-current="page"] { text-decoration: underline; }
.nav__fold { display: none; position: relative; }
.nav__fold summary { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; list-style: none; color: inherit; }
.nav__fold summary::-webkit-details-marker { display: none; }
.nav__fold[open] summary { background: rgba(127, 127, 140, .16); }
.nav__fold-panel { position: absolute; right: 0; top: calc(100% + 8px); display: grid; min-width: 180px; padding: 6px; border-radius: 14px; background: #fff; color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 20px 40px -20px rgba(40, 50, 80, .45); }
.nav__fold-panel a { padding: 10px 12px; border-radius: 9px; }
.nav__fold-panel a:hover { background: var(--stage-bot); }
@media (max-width: 809px) {
  .nav__pages { display: none; }
  .nav__fold { display: block; margin-right: 6px; }
}
/* The links follow the nav button (owner, 2026-11-05). While the button hides (the advisory home's hero, site.js), the
   page links, or the menu toggle on phones, slide right by --cta-shift (site.js: from their right edge to the button's), so
   they sit flush at the nav's right edge with no gap. When the button shows, they glide back, in step with its slide (same
   curve and timing, see .btn--nav above). Only
   transform moves: the nav's layout, height, tab order and the hidden button's place never change, and the hit areas move
   with the links. Pages whose button always shows never set data-cta="hidden", so nothing moves there. */
.nav__pages, .nav__fold { transition: transform var(--cta-in) var(--cta-ease); }
.nav[data-cta="hidden"] .nav__pages, .nav[data-cta="hidden"] .nav__fold { transform: translateX(var(--cta-shift, 0px)); transition: transform var(--cta-out) var(--cta-out-ease) .1s; }
@media (prefers-reduced-motion: reduce) { .nav__pages, .nav__fold { transition: none; } .btn--nav { transition: opacity .2s linear, visibility 0s; } .nav[data-cta="hidden"] .btn--nav { transform: none; transition: opacity .2s linear, visibility 0s .2s; } }
/* The empty Testimonials and Media pages: the serif heading on the silver stage, nothing else yet. */
.stub__body { min-height: 60vh; padding: calc(var(--nav-h) + 120px) 0 120px; background: linear-gradient(180deg, var(--stage-top), var(--stage-bot)); }
.stub__body .h1 { font-size: clamp(44px, 6vw, 80px); line-height: 1.02; letter-spacing: -0.02em; color: var(--ink); }
@media (max-width: 809px) { .stub__body { padding: calc(var(--nav-h) + 72px) 0 80px; } }

/* ---------- Rainbow graphics (round 6, owner) ----------
   The "Expert guidance" panes take the spectrum, kept clear: Preambient's marks are in the deep spectrum (each stop 3:1 or
   more on the silver and on white), anything traditional stays neutral grey, and every number and label stays ink. The deal
   team's checks and the hold pane's ticks fill with a spectrum blend.
   (The sale-process flow that also took the spectrum was cut, owner, 2026-11-06.) */
.agents div:nth-child(1) i { background: linear-gradient(135deg, #482873, #3454a0); }
.agents div:nth-child(2) i { background: linear-gradient(135deg, #3454a0, #1e7896); }
.agents div:nth-child(3) i { background: linear-gradient(135deg, #1e7896, #227a68); }
.agents div:nth-child(4) i { background: linear-gradient(135deg, #a06e32, #96406c); }
@keyframes ring { to { border-color: transparent; background: linear-gradient(135deg, #3454a0, #1e7896); } }
@media (prefers-reduced-motion: reduce) { .pane .task i { border-color: transparent; background: linear-gradient(135deg, #3454a0, #1e7896); } }

/* ---------- Nav edge (round 9, owner, 2026-11-06; round 7 ran the landing shader in the header band, round 6 drew strands) ----------
   "a rainbow effect/line at the border, when the border of the header appears (just the bottom border)", then "have the bar
   fixed at the top i.e. it should be there before scrolling down". The header itself stays plain. A 2px spectrum line runs
   along its bottom edge at all times, from the top of the page down, in place of the grey hairline, with a soft blurred copy
   of itself under it. Its colours flow like the site's other spectrum hairlines. It stands still under reduced motion and turns into a plain
   hairline in forced colours. It takes no input and does not change the nav's height. */
.nav__edge { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: var(--spectrum-flow) 0 0 / 200% 100% repeat-x; animation: spectrum-flow var(--flow-slow) linear infinite; }
.nav__edge::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: inherit; filter: blur(5px); opacity: .7; }
@media (prefers-reduced-motion: reduce) { .nav__edge { animation: none; } }
@media (forced-colors: active) { .nav__edge { background: CanvasText; height: 1px; } .nav__edge::after { display: none; } }
/* The footer's spectrum edge moved to css/footer.css with the rest of the footer (2026-11-06). */
/* The nav's glow (owner, 2026-11-06: "a full time white glow"). The mark, the wordmark, the page links and the menu icon carry
   a soft white halo at all times, the light the band runs through. Text takes text-shadow and the two icons a drop-shadow
   filter, so the glyphs stay sharp and only the halo is soft. On the light nav the halo sits behind ink and only adds
   contrast, so it can be brighter; on the dark nav it sits behind white text and takes contrast away, so it is fainter and
   wider. The mark is a solid shape
   with a small counter that its own halo fills, so on the dark nav it takes one wide, fainter drop-shadow. Measured on
   frozen frames, the text colour against the halo and the nav just outside each glyph: 4.8:1 or more on the dark nav,
   5.9:1 or more on the light. It follows the nav's colour change. The nav button keeps its own look. None in forced colours. */
.nav { --nav-glow: 0 0 6px rgba(255, 255, 255, .8), 0 0 16px rgba(255, 255, 255, .55);
  --nav-glow-fx: drop-shadow(0 0 3px rgba(255, 255, 255, .8)) drop-shadow(0 0 8px rgba(255, 255, 255, .55));
  --nav-glow-mark: drop-shadow(0 0 3px rgba(255, 255, 255, .8)) drop-shadow(0 0 8px rgba(255, 255, 255, .55)); }
.nav[data-theme="dark"] { --nav-glow: 0 0 10px rgba(255, 255, 255, .55), 0 0 26px rgba(255, 255, 255, .35);
  --nav-glow-fx: drop-shadow(0 0 5px rgba(255, 255, 255, .55)) drop-shadow(0 0 13px rgba(255, 255, 255, .35));
  --nav-glow-mark: drop-shadow(0 0 9px rgba(255, 255, 255, .5)); }
.nav__wordmark, .nav__pages a { text-shadow: var(--nav-glow); transition: text-shadow .3s ease; }
.nav__fold summary svg { filter: var(--nav-glow-fx); transition: filter .3s ease; }
.nav__mark { filter: var(--nav-glow-mark); transition: filter .3s ease; }
@media (forced-colors: active) { .nav__wordmark, .nav__pages a { text-shadow: none; } .nav__mark, .nav__fold summary svg { filter: none; } }

/* ---------- Grounds: the stage tones ----------
   Owner, 2026-11-06: Expert guidance follows the switcher and runs from --stage-mid down to --stage-bot, the wall's flat ground
   below it, so the two meet without a step.
   Owner, 2026-11-06: "i think swap Trained at the firms the world's owners already trust and From first conversation to closing
   sections. then those sections can blend together." Expert guidance and the steps now sit in one block, .lit-run, and the
   ground is the run's: one gradient from --stage-mid at Expert guidance's top to --stage-bot at the run's foot. Owner,
   2026-11-06 ("S1 is perfect"): the firms joined the run after the steps. No section paints a ground of its own, so the joins
   between them have no seam, line or step, and the run's one Light on silver (silver-light.css) shows through all three. */
.lit-run { position: relative; isolation: isolate; background: linear-gradient(180deg, var(--stage-mid), var(--stage-bot)); }
/* Owner, 2026-11-06: "i think 'We get you the best deal possible' section can be removed, it just rehashes what is above." With
   Solution gone, Expert guidance sits directly under the band's horizon and takes the "Dawn horizon" day that Solution had: a
   warm tint at the top of its ground, brightest under the sun (--switcher-sun: your company's x, set on this section by
   switcher.js), over the same --stage-mid to --stage-bot ground below it, and the flare (.switcher__flare, its first child).
   isolation gives the section its own stacking context, so the flare (z-index -1) stays behind its content; overflow-x clips
   the flare, wider than a phone, so it never widens the page. Ink and muted text keep 4.5:1 on the warm top. */
/* The light run's ground (above) shows through under the warm top. */
.advantage { position: relative; isolation: isolate; overflow-x: clip; background:
  radial-gradient(52% 320px at var(--switcher-sun, 70%) 0, var(--day-sun)),
  linear-gradient(180deg, var(--day-warm) 280px); }
@media (max-width: 899px) {
  .advantage { background:
    radial-gradient(80% 240px at var(--switcher-sun, 56%) 0, var(--day-sun)),
    linear-gradient(180deg, var(--day-warm) 220px); }
}

/* ---------- The team's firms and the backers: Quiet grids (owner, 2026-11-06, design S1) ----------
   Owner: "i really like the merged theme of the above two sections, maybe we can extend it to the logo section? have a left
   section with bankers trained at and a right section with trusted by", then "S1 is perfect. Team trained at.", then "Team trained at -> Trained at" The section is
   the light run's last (see "Grounds"): it paints no ground, so the run's ground and its one Light on silver cover it with no
   seam or step at the join with the steps. Its faint wall, sheen, band, quote card and top seam are gone. It keeps the heading,
   the lead and its warm foot (::after: the mirror of Expert guidance's warm top, --day-sun over the centre, --day-warm
   clearing 280px up, 220px below 900px, under the content), and the closing's top seam below the run is the Dusk horizon.
   Below the lead, two still grids in ink: the twelve firms (4 x 3) on the left, the five backers (2 + 3) on the right, each
   under a small-caps label with a short rule. A thin moving spectrum hairline runs down between them (across, between the
   groups, below 900px). Each list is aria-hidden; the sr-only sentence before it names the firms or the backers. */
.section.wall-sec { position: relative; isolation: isolate; overflow: clip; padding: 80px 0 104px; background: none; }
.wall-sec > .container { position: relative; z-index: 2; }
.section.wall-sec::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 320px; z-index: 1; pointer-events: none;
  background: radial-gradient(52% 320px at 50% 100%, var(--day-sun)), linear-gradient(0deg, var(--day-warm) 280px); }
@media (max-width: 899px) {
  .section.wall-sec::after { height: 240px; background: radial-gradient(80% 240px at 50% 100%, var(--day-sun)), linear-gradient(0deg, var(--day-warm) 220px); }
}
@media (min-width: 900px) and (max-height: 800px) { .section.wall-sec { padding-top: 56px; padding-bottom: 88px; } }
.wall__head .h2 { max-width: 820px; text-wrap: balance; }
.wall__head .lead { max-width: 1000px; }

/* The split: two columns (each a label, an sr-only sentence and an aria-hidden list of logos) and the hairline between them. */
.split { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.5fr) 1px minmax(0, 1fr); column-gap: 64px; max-width: 1180px; margin-top: 56px; }
.split__col { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.split__label { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 12.5px; line-height: 18px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-align: center; text-wrap: balance; }
.split__label::after { content: ""; display: block; width: 28px; height: 1px; margin: 14px auto 0; background: rgba(23, 24, 26, .28); }
.split__logos { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; margin: 18px 0 0; padding: 0; list-style: none; }
.split__col--backers .split__logos { flex: 1; align-content: center; }
.sl { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; }
/* A logo in ink at its optical height: --s of its list's --lh, so wide wordmarks and stacked marks read at one size. */
.sl__logo { display: block; height: calc(var(--lh, 40px) * var(--s, 1)); width: auto; max-width: 100%; object-fit: contain; filter: brightness(0); opacity: .86; }
.split__logos--firms { --lh: 50px; }
.split__logos--firms > .sl { flex: 0 0 25%; height: 88px; padding: 0 18px; }
.split__logos--backers { --lh: 34px; }
.split__logos--backers > .sl { flex: 0 0 33.333%; height: 88px; padding: 0 16px; }
.split__logos--backers > .sl:nth-child(-n+2) { flex-basis: 50%; }
.split__logos--backers .sl__logo { opacity: .9; }
.lg--goldman { --s: 1; }
.lg--mckinsey { --s: .56; }
.lg--jpmorgan { --s: .56; }
.lg--bcg { --s: .6; }
.lg--morganstanley { --s: .92; }
.lg--bain { --s: .44; }
.lg--bofa { --s: .44; }
.lg--ubs { --s: .74; }
.lg--creditsuisse { --s: .44; }
.lg--pwp { --s: .5; }
.lg--deutschebank { --s: .62; }
.lg--rothschild { --s: .66; }
.tb--openai { --s: .86; }
.tb--a16z { --s: .97; }
.tb--bcg { --s: 1; }
.tb--goldman { --s: 1.28; }
.tb--ef { --s: .44; }
/* The hairline: the spectrum, faded at both ends, moving down (a tile twice its height loops by background-position). */
.split__rule { display: block; width: 1px; align-self: stretch; margin: 8px 0;
  background: linear-gradient(180deg, #482873, #3454a0 17.5%, #1e7896 35%, #a06e32 50%, #1e7896 65%, #3454a0 82.5%, #482873) 0 0 / 100% 200% repeat-y;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  opacity: .55; animation: spectrum-flow-y var(--flow-slow) linear infinite; }
@media (max-width: 1199px) {
  .split { column-gap: 40px; }
  .split__logos--firms { --lh: 44px; }
  .split__logos--firms > .sl { height: 76px; padding: 0 12px; }
  .split__logos--backers { --lh: 30px; }
}
@media (max-width: 899px) {
  .split { grid-template-columns: minmax(0, 1fr); row-gap: 36px; margin-top: 40px; }
  .split__rule { width: auto; height: 1px; margin: 0 15%;
    background: var(--spectrum-deep-flow) 0 0 / 200% 100% repeat-x; animation-name: spectrum-flow;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
}
@media (max-width: 809px) {
  .section.wall-sec { padding: 56px 0 88px; }
  .split__label { font-size: 12px; letter-spacing: .12em; }
  .split__label::after { margin-top: 10px; }
  .split__logos { margin-top: 8px; }
  .split__logos--firms { --lh: 34px; }
  .split__logos--firms > .sl { flex-basis: 33.333%; height: 58px; padding: 0 10px; }
  .split__logos--backers { --lh: 26px; }
  .split__logos--backers > .sl { height: 58px; padding: 0 10px; }
}

/* ---------- Expert guidance: the window on a deeper silver ---------- */
.screen { background: var(--surface); border-color: rgba(255, 255, 255, .85); box-shadow: 0 0 0 1px var(--line), 0 40px 80px -40px rgba(40, 50, 80, .4), 0 2px 6px rgba(17, 18, 20, .04); }
.screen__bar { background: #fbfbfc; }
.screen__bar small, .tstep i { font-family: var(--mono); letter-spacing: .04em; }
.tstep__bar::after { background: var(--spectrum-deep-flow) 0 0 / 200% 100% repeat-x; }
.tstep.is-active .tstep__bar.run::after { animation: stepbar var(--tour, 7s) linear forwards, spectrum-flow var(--flow) linear infinite; }
.advantage.is-held .tstep.is-active .tstep__bar::after { animation: spectrum-flow var(--flow) linear infinite; transform: scaleX(1); }
.banker, .told, .live--you { background: #fff; }
/* Owner, 2026-11-06 ("Back in firms, dark"): the client quotes left this section for the wall's card, so the window is centred
   on the text column again. On desktop the section fills one screen under the header and centres its content ("Screen
   sizing", below), so these paddings are minimums: the section is 726px of content at 1440x900 and 686px at 1280x800, and
   it fills the screen at both. */
.advantage__show { min-width: 0; }
@media (min-width: 1200px) { .advantage { padding: 100px 0; } }
@media (min-width: 1200px) and (max-height: 820px) { .advantage { padding: 76px 0; } } /* 76px: the 546px text column fits a 1366x768 screen under the header (2026-11-07) */

/* ---------- Guidance tour scenes (owner, 2026-11-07: "improve the senior banker animations") ----------
   One scene per step, played like a product demo. A change cross-fades the window: the old scene fades out in 300ms with its
   content (site.js keeps its .play through the fade), the new one fades in over 600ms from 100ms, and its rows rise 8px, 50ms
   apart (--d, above). Then the scene plays its story one beat at a time (--t, above): 01 the partner stays while the agents'
   four tasks tick through under him, then his time bar fills; 02 the week stays clear while the agents' list fills and the
   answered count rises; 03 the diligence items tick before the LOI marker rises, then the two lines draw and the buyers held
   to closing are marked; 04 the NDA count rises, then one buyer's name unlocks, and the share switch stays yours.
   Only opacity and transform animate; the counters (site.js) sit over their final text, so no row changes size.
   No JS: every scene shows its end state. Reduced motion: the end state at once, and the scene changes at once. */
.advantage .pane, .advantage .pane.is-active { transform: none; }
.advantage .pane { transition: opacity .3s cubic-bezier(.4, 0, .2, 1), visibility 0s .3s; }
.advantage .pane.is-active { transition: opacity .6s cubic-bezier(.2, .7, .2, 1) .1s; }
.advantage .pane.play [data-rise] { animation: rise .6s cubic-bezier(.2, .7, .2, 1) var(--d, .1s) both; }
@keyframes tour-done { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes tour-work { 0% { opacity: 1; transform: scaleX(0); } 60% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes tour-out { to { opacity: 0; } }
@keyframes tour-grow-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes tour-ring { 0% { opacity: 0; } 45% { opacity: .8; } 100% { opacity: .4; } }
/* Counters: tabular figures, the running value laid over the final one (transparent, and the one screen readers read). */
.num { display: inline-grid; font-weight: inherit; font-variant-numeric: tabular-nums; }
.num > span { grid-area: 1 / 1; text-align: right; }
.num > .num__size { color: transparent; }
/* 01: each agent card shows an empty ring, a spectrum hairline runs along it while it works, then its check fills. */
.agents div::before { content: ""; position: absolute; right: 12px; top: 12px; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #c9c8ce; }
.agents div::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--spectrum-deep); opacity: 0; transform: scaleX(0); transform-origin: left; }
.js:not(.js-failed) .agents i { opacity: 0; transform: scale(.6); }
.advantage .pane.play .agents div::after { animation: tour-work .9s cubic-bezier(.4, 0, .2, 1) var(--t) both; }
.advantage .pane.play .agents i { animation: tour-done .3s cubic-bezier(.2, .7, .2, 1) calc(var(--t) + .5s) both; }
/* 02: the owner's week, and the agents' list. */
.cal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.cal > div { position: relative; min-width: 0; padding: 8px 10px 9px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.cal small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cal span { display: block; margin-top: 3px; font-size: 12px; line-height: 16px; color: var(--muted); }
.cal .cal__you::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--spectrum-deep); }
.cal .cal__you span { color: var(--ink); }
.feed { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-top: 18px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.feed > span:last-child { font-size: 12px; letter-spacing: 0; text-transform: none; }
.feed .num { font-weight: 500; color: var(--ink); }
.pane--week .task { padding: 8px 0; }
.pane--conf .who { padding: 9px 0; }
.advantage .task i::before { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; background: linear-gradient(135deg, #3454a0, #1e7896); }
.js:not(.js-failed) .advantage .task i::before { opacity: 0; }
.advantage .pane.play .task i { animation: none; }
.advantage .pane.play .task i::before { animation: fade .25s ease-out var(--t) both; }
.advantage .pane.play .task i::after { animation: tick .3s cubic-bezier(.2, .65, .3, 1) var(--t) both; }
.advantage .pane.play .task b { animation: fade .3s ease-out calc(var(--t) + .1s) both; }
/* 03: diligence before the LOI, the LOI marker, the buyers held to closing. */
.dd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; }
.dd__h { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dd ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dd li { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 12px; line-height: 16px; }
.dd i { position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #c9c8ce; }
.dd i::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, #3454a0, #1e7896); }
.dd i::after { content: ""; position: absolute; left: 5px; top: 2.5px; width: 3px; height: 6px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.js:not(.js-failed) .dd i::before { opacity: 0; }
.js:not(.js-failed) .dd i::after { transform: rotate(45deg) scale(0); }
.advantage .pane.play .dd i::before { animation: fade .25s ease-out var(--t) both; }
.advantage .pane.play .dd i::after { animation: tick .3s cubic-bezier(.2, .65, .3, 1) var(--t) both; }
.hold__loi { position: absolute; left: 26.7857%; top: -6px; bottom: 0; width: 2px; margin-left: -1px; border-radius: 1px; background: rgba(23, 24, 26, .55); transform-origin: bottom; }
.js:not(.js-failed) .hold__loi { transform: scaleY(0); }
.advantage .pane.play .hold__loi { animation: tour-grow-y .5s cubic-bezier(.2, .7, .2, 1) 1.9s both; }
.reserve { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.reserve > b { font-family: var(--font-display); font-weight: 300; font-size: 34px; line-height: 36px; text-align: center; }
.reserve strong { display: block; font-weight: 500; font-size: 14px; }
.reserve span { display: block; font-size: 12px; color: var(--muted); }
.reserve em { font-style: normal; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; padding: 4px 8px; border-radius: 999px; background: #e9f4ee; color: #277a4d; }
.js:not(.js-failed) .reserve em { opacity: 0; }
.advantage .pane.play .reserve em { animation: fade .4s ease-out 3.9s both; }
/* 04: the NDA count, the locked names, one name unlocked after its NDA, and the share switch, off. */
.nda { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; margin: 16px 0 4px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.nda > .num { min-width: 1.3em; font-family: var(--font-display); font-weight: 300; font-size: 34px; line-height: 36px; }
.nda strong { display: block; font-weight: 500; font-size: 14px; }
.nda div span { display: block; font-size: 12px; color: var(--muted); }
.who b { display: inline-flex; align-items: center; white-space: nowrap; }
.lock { position: relative; display: inline-block; flex: none; width: 7px; height: 5px; margin: 3px 5px 0 0; border-radius: 1px; background: currentColor; }
.lock::before { content: ""; position: absolute; left: 1px; bottom: 4px; width: 5px; height: 4.5px; box-sizing: border-box; border: 1.2px solid currentColor; border-bottom: 0; border-radius: 2.5px 2.5px 0 0; }
.who .who__name { display: grid; align-items: center; }
.who .who__name > * { grid-area: 1 / 1; }
.who .who__name .mask { display: block; height: 12px; width: 80%; border-radius: 6px; background: repeating-linear-gradient(90deg, #dddce2 0 6px, #e8e7ec 6px 12px); }
.who .who__name span { display: block; font-size: 13px; color: var(--ink); }
.who b.who__chip { display: grid; justify-items: end; padding: 0; background: none; }
.who .who__chip > span { grid-area: 1 / 1; display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; background: #eceaf1; font-size: 10px; color: var(--muted); }
.who .who__chip > .on { background: var(--ink); color: #fff; }
.who__name .mask, .who__was { opacity: 0; }
.js:not(.js-failed) :is(.who__name .mask, .who__was) { opacity: 1; }
.js:not(.js-failed) :is(.who__name span, .who__chip .on) { opacity: 0; }
.advantage .pane.play :is(.who__name .mask, .who__was) { animation: tour-out .4s ease-out 2.5s both; }
.advantage .pane.play :is(.who__name span, .who__chip .on) { animation: fade .5s ease-out 2.6s both; }
.told { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.told p { margin: 0; }
.switch { display: inline-flex; flex: none; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.switch i { position: relative; width: 30px; height: 18px; border-radius: 999px; background: #dcdbe1; }
.switch i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(17, 18, 20, .2); }
.switch i::before { content: ""; position: absolute; inset: -3px; border-radius: 999px; box-shadow: 0 0 0 1.5px var(--violet); opacity: 0; }
.advantage .pane.play .switch i::before { animation: tour-ring 1.2s ease-in-out 3.2s both; }
/* The window is a fictional client: a caption in the UI caption style says so. */
.advantage__note { margin: 14px 2px 0; font: 600 11px/16px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 809px) {
  .agents div::before { right: 10px; top: 10px; }
  .cal { gap: 4px; }
  .cal > div { padding: 7px 6px 8px; }
  .cal span { font-size: 11px; line-height: 14px; }
  .nda > .num, .reserve > b { font-size: 30px; }
  .reserve { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; }
  .who .who__name { display: none; } /* as the other names on phones (above): the chip and its lock carry the state */
}
html:is(:not(.js), .js-failed) .advantage .task i::after { transform: rotate(45deg) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .advantage .pane, .advantage .pane.is-active { transition: none; }
  .advantage .pane *, .advantage .pane *::before, .advantage .pane *::after { animation-duration: 0s !important; animation-delay: 0s !important; }
}
@media (forced-colors: active) {
  .hold__loi { forced-color-adjust: none; background: CanvasText; }
  .switch i { border: 1px solid CanvasText; }
}

/* ---------- From first conversation to closing ----------
   Owner, 2026-11-06 ("Yes, build all three"): five steps in one row at desktop, on the strip's flat --stage-bot ground, joined by
   a thin moving spectrum hairline that runs from the first number's centre to the last's; stacked on phones, where a segment of
   it runs down from each number to the next. The spectrum is only the hairline and the numbers' rings (each ring takes its
   stretch of the deep spectrum, 3:1 or more on the ground); every text is ink or muted. It stands still under reduced motion. */
/* Owner, 2026-11-06: the steps follow Expert guidance in the light run, so they paint no ground of their own (Grounds). */
.journey { position: relative; padding: 88px 0 100px; background: none; }
.journey__head .lead { margin-top: 16px; }
.journey__steps { --n: 36px; --gap: 32px; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); margin: 52px 0 0; padding: 0; list-style: none; }
.journey__steps::before { content: ""; position: absolute; top: calc(var(--n) / 2); left: calc(var(--n) / 2); right: calc((100% - 4 * var(--gap)) / 5 - var(--n) / 2); height: 1px; pointer-events: none;
  background: var(--spectrum-flow) 0 0 / 200% 100% repeat-x; animation: spectrum-flow var(--flow-slow) linear infinite; }
.journey__step { position: relative; min-width: 0; }
.journey__n { position: relative; z-index: 1; display: grid; place-items: center; width: var(--n); height: var(--n); border: 1px solid transparent; border-radius: 50%;
  background: linear-gradient(var(--stage-bot), var(--stage-bot)) padding-box, var(--spectrum-deep) 0 0 / 500% 100% border-box;
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; line-height: 1; color: var(--ink); }
.journey__step:nth-child(2) .journey__n { background-position: 0 0, 25% 0; }
.journey__step:nth-child(3) .journey__n { background-position: 0 0, 50% 0; }
.journey__step:nth-child(4) .journey__n { background-position: 0 0, 75% 0; }
.journey__step:nth-child(5) .journey__n { background-position: 0 0, 100% 0; }
.journey__t { margin: 20px 0 0; font-family: var(--font-body); font-weight: 500; font-size: 17px; line-height: 24px; letter-spacing: 0; color: var(--ink); }
.journey__d { margin: 6px 0 0; font-size: 14px; line-height: 21px; color: var(--muted); text-wrap: pretty; }
@media (max-width: 1199px) { .journey__steps { --gap: 20px; } }
@media (max-width: 809px) {
  .journey { padding: 56px 0 64px; }
  .journey__steps { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 36px; }
  .journey__steps::before { display: none; }
  .journey__step { display: grid; grid-template-columns: var(--n) minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .journey__n { grid-row: span 2; }
  .journey__t { margin-top: 6px; }
  .journey__d { grid-column: 2; }
  .journey__step:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--n) / 2); top: var(--n); bottom: -22px; width: 1px; pointer-events: none;
    background: linear-gradient(180deg, #8a9cc8, #78bed6 17%, #e4c698 34%, #929ec2 50%, #e4c698 66%, #78bed6 83%, #8a9cc8) 0 0 / 100% 200% repeat-y; animation: spectrum-flow-y var(--flow-slow) linear infinite; }
}
/* The phone segments' selector carries :not(:last-child), so the still rule names it too (a bare .journey__step::after lost on
   specificity and the segments kept moving under reduced motion). */
@media (prefers-reduced-motion: reduce) { .journey__steps::before, .journey__step:not(:last-child)::after { animation: none; } }
@media (forced-colors: active) {
  .journey__steps::before, .journey__step::after { forced-color-adjust: none; background: CanvasText; }
  .journey__n { border-color: CanvasText; background: Canvas; }
}

/* ---------- Closing: deep graphite, the film dimmed under a faint spectrum glow ----------
   2026-11-05: the page's footer lives inside the closing section, over the same film. The call (.closing__main) keeps the
   old section's height, and its scrim and glow stay centred on it; the footer (.closing__foot) runs on below it on the
   shared centre line, over a scrim that darkens towards the foot of the page. A moving spectrum seam opens the section. */
.closing { display: block; height: auto; background: var(--graphite); text-align: center; --closing-main: 680px; }
.closing__seam { position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 3; pointer-events: none; background: var(--spectrum-flow) 0 0 / 200% 100% repeat-x; animation: spectrum-flow var(--flow-slow) linear infinite; }
/* The Dusk horizon (owner, 2026-11-06: the 'inverse' of the dark to rainbow effect under Choose your deal), on the home only, where
   the light run (its last section the firms) sits above the closing: the closing's top seam takes the Dawn horizon's warm-white line and blurred moving spectrum
   (shared with .switcher__seam--horizon, above; the closing clips the glow's upper half, as Expert guidance covers the lower
   half of the dawn's), and the closing's top glows down from it in the dawn's colours (--dawn-glow) into its graphite: 150px,
   130px below 900px, well clear of the heading. Still: no pulses and no motion but the line's glow. Testimonials and Media keep
   the plain seam. */
.lit-run + .closing > .closing__seam { --closing-dawn: 130px; } /* 150px until 2026-11-14: the call is shorter since the footer joined its screen, so the glow keeps clear of the heading */
.lit-run + .closing > .closing__seam::before, .lit-run + .closing > .closing__seam::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.lit-run + .closing > .closing__seam::before { top: 1px; height: var(--closing-dawn); background: linear-gradient(180deg, var(--dawn-glow)); }
@media (max-width: 899px) { .lit-run + .closing > .closing__seam { --closing-dawn: 130px; } }
.closing__main { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; min-height: var(--closing-main); padding: 112px 0 40px; }
/* Round 6: the background is a canvas (js/closing-skyline.js, concept 1 "Skyline in light") over a dusk gradient, which is
   also what shows without JS. The canvas draws its own sky, so the gradient only shows before its first frame. */
.closing__media { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, #07080e, #13152a 40%, #2a2340 72%, #0e0d16 82%, #07070b); }
.closing__art { display: block; width: 100%; height: 100%; }
/* Windows High Contrast (business laptops): the skyline and its dusk ground would sit under system-coloured text, so a light
   contrast theme put dark text on a dark sky. The art is decoration; it hides and the system background shows. */
@media (forced-colors: active) { .closing__media { display: none; } }
.closing::before { inset: 0 0 auto; height: var(--closing-main); background: radial-gradient(ellipse 62% 58% at 50% 50%, rgba(10, 11, 14, .62), rgba(10, 11, 14, .3) 70%, rgba(10, 11, 14, .2) 100%); }
.closing::after { content: ""; position: absolute; left: 50%; top: calc(var(--closing-main) / 2); z-index: 1; width: min(1100px, 140vw); height: 560px; transform: translate(-50%, -50%); pointer-events: none;
  background:
    radial-gradient(36% 50% at 26% 54%, rgba(138, 156, 200, .9), transparent 72%),
    radial-gradient(32% 46% at 52% 40%, rgba(120, 190, 214, .7), transparent 72%),
    radial-gradient(34% 50% at 76% 58%, rgba(228, 198, 152, .85), transparent 72%);
  filter: blur(40px); mix-blend-mode: screen; opacity: .55; animation: aura-drift-c 24s ease-in-out infinite alternate; }
@keyframes aura-drift-c { from { transform: translate(-52%, -50%) rotate(-4deg) scale(1); } to { transform: translate(-48%, -51%) rotate(4deg) scale(1.06); } }
/* The glow on business laptops (owner, 2026-11-06: "make it thinkpad proof"). A 40px blur in a screen blend over the animated
   skyline has to be blended again on every frame the skyline draws. It drifts on its own compositor layer (will-change), and
   holds while the skyline does not draw (off screen, a hidden tab, the hero in view: closing-skyline.js sets .is-drawing
   while it draws). Once the skyline has stepped down for a slow machine (data-skyline-q, set from level 1) the glow drops the
   blur, the blend and the drift: the same three pools, pre-softened (a mid stop and a fade out to 78% stand in for the
   blur), laid on at the same opacity. A capable machine never sets data-skyline-q and keeps the look. */
.closing::after { will-change: transform; }
.closing[data-skyline]:not(.is-drawing)::after { animation-play-state: paused; }
.closing[data-skyline-q]::after { filter: none; mix-blend-mode: normal; animation: none; will-change: auto; transform: translate(-50%, -50%);
  background:
    radial-gradient(36% 50% at 26% 54%, rgba(138, 156, 200, .8), rgba(138, 156, 200, .32) 42%, transparent 78%),
    radial-gradient(32% 46% at 52% 40%, rgba(120, 190, 214, .62), rgba(120, 190, 214, .24) 42%, transparent 78%),
    radial-gradient(34% 50% at 76% 58%, rgba(228, 198, 152, .76), rgba(228, 198, 152, .3) 42%, transparent 78%); }
.closing .h1 { font-size: 76px; line-height: 1; letter-spacing: -0.024em; }
.closing .h1, .closing .lead { text-shadow: 0 2px 28px rgba(0, 0, 0, .5); }
/* Round 8 (owner): no lead line under the closing heading here, so the button takes the gap the line used to fill. */
.closing .h1 + .btn { margin-top: 36px; }

/* The footer half (footer.closing__foot) is styled in css/footer.css, which every page with the footer links (2026-11-06,
   owner: "the footer is not applied across all pages"). */

/* ---------- Screen sizing (owner, 2026-11-06) ----------
   "the sizing needs fixing on full screen i think. the sections don't fill the screen properly. for the footer, im thinking it
   can be slightly less tall too, because the header covers the top part of the screen."
   On a desktop screen (900px wide and 640px tall or more) each main section fills one screen under the fixed header
   (100svh less --nav-h) and centres its content in it; its padding stays as the least space around the content, and a
   section whose content is taller than the screen stays taller (min-height, never a fixed height). The hero already fills
   the whole screen (.hero__content, 100svh) and keeps its composition. The switcher's band grows with its dawn, so the
   horizon stays on its foot. The firms centre the heading and the two grids, above the foot's 104px.
   The closing is one screen under the header with its footer: the call takes what the footer (155px at these widths) leaves,
   so scrolled to just under the header the whole call and the whole footer show. Its scrim and glow follow the call's height;
   the skyline puts its horizon on the footer's top edge (js/closing-skyline.js measures it). Testimonials and Media use the
   same closing partial and this stylesheet. Phones keep their natural heights. */
@media (min-width: 900px) and (min-height: 640px) {
  .switcher__band, .advantage, .section.wall-sec, .journey { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--nav-h)); }
  /* Owner, 2026-11-07, desktop review: the deck keeps room for an open explainer card below Contact, so the centred block sat high by half
     that reserve. switcher.js sets --sw-lead to half the reserve, capped by the room the band has left under one screen, so the air above
     the tabs matches the air under Contact where there is room, the band never grows past the screen, and nothing moves when a card opens. */
  .switcher__grid { padding-top: var(--sw-lead, 0px); }
  .wall-sec > .wall__head { margin-top: auto; }
  .wall-sec > .split { margin-bottom: auto; }
  /* 2026-11-14 footer redesign, round 4: --closing-foot is the footer down to its meta row (258px from 1200px up; 261px from 900px to
     1199px, where the cities take two lines), so the call and that much footer are one screen; the wordmark follows. */
  .closing { --closing-foot: 258px; --closing-main: max(440px, calc(100svh - var(--nav-h) - var(--closing-foot)));
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: calc(100svh - var(--nav-h)); }
  .closing__main { flex: 1 0 auto; }
  @media (max-width: 1199px) { .closing { --closing-foot: 261px; } }
  /* The band centres its content like the others; its padding is only the least space round it (it was 112px and 96px, which
     made the band 848px tall, taller than the 836px under the header at 1440x900). */
  .switcher__band { padding: 48px 0 40px; }
}
/* Laptop screens (owner, 2026-11-06: "make it thinkpad proof"). A business laptop at 1366x768, or at 1920x1080 with Windows
   scaling at 125% or 150% (1536x864, 1280x720 in CSS pixels), has 800px or less under the header, and less again with the
   browser's own bars. On a screen 800px tall or less (900px wide or more) the band trims the space round its parts, never
   its type: the words, the heading, the figures and the explanations keep their sizes. Its content then takes 588px, so it
   fits under the header down to a 720px screen (656px), and the deck still reserves the tallest open card. Expert guidance
   (526px of content at 1200px and wider) and the firms trim their padding on screens 760px tall or less (the firms also
   close the gap above their grids, so they fit 656px at 1280x720). */
@media (min-width: 900px) and (max-height: 800px) {
  /* The closing on a short screen (2026-11-14 footer redesign, round 4: the call and the footer down to its meta row are one
     screen): the call trims the space round its heading, never the heading, and its floor drops to 380px; the dawn glow
     shortens with it. */
  .closing { --closing-main: max(380px, calc(100svh - var(--nav-h) - var(--closing-foot))); }
  .closing__main { padding: 46px 0 44px; } /* the same 90px as before (68 + 22), moved up so Contact keeps 44px of clear sky above the rooftops (review loop, 2026-11-14) */
  .lit-run + .closing > .closing__seam { --closing-dawn: 96px; }
  .switcher__band { padding: 32px 0 28px; }
  .switcher__grid { min-height: 0; }
  .js:not(.js-failed) .switcher__tabs { margin-top: 12px; }
  .switcher__deck { margin-top: 28px; }
  .switcher__figs { margin-top: 20px; }
  .switcher__promise { margin-top: 24px; } /* the type itself scales with the viewport height (base rule), so the band still fits one short screen */
  .switcher__card { margin-top: 16px; }
  .switcher__card-box { margin-bottom: 16px; }
  .switcher__panel .btn { margin-top: 22px; }
}
@media (min-width: 900px) and (max-height: 760px) { .section.wall-sec { padding-bottom: 72px; } .split { margin-top: 40px; } }
@media (min-width: 1200px) and (max-height: 760px) { .advantage { padding: 48px 0; } }
/* A 1366x768 screen with the browser's tabs, address bar and the Windows taskbar leaves about 657px: the band and Expert
   guidance still fit under the header there; the firms run a little taller than the screen. */
@media (min-width: 900px) and (max-height: 700px) { .switcher__band { padding: 22px 0 20px; } }
@media (min-width: 1200px) and (max-height: 700px) { .advantage { padding: 32px 0; } }

/* ---------- Widths ---------- */
@media (max-width: 1199px) {
  .h2 { font-size: 48px; }
  .closing .h1 { font-size: 60px; }
}
@media (max-width: 809px) {
  .h2 { font-size: 36px; line-height: 1.08; }
  .advantage__h { font-size: 36px; line-height: 1.08; }
  /* "The Investment Bank" is 8.4em wide in this face; the title box is the width less 40px. The size follows the width,
     so that line never breaks (it keeps one line down to 320px), up to 44px. */
  .hero--engraved .h1 { font-size: clamp(30px, calc((100vw - 60px) / 8.6), 44px); line-height: 1.02; }
  .hero--engraved .hero__copy .lead { font-size: 17px; }
  .hero--engraved .hero__copy .btn { height: 48px; }
  .closing .h1 { font-size: 36px; line-height: 1.06; }
  .closing { --closing-main: 560px; }
  .closing::after { height: 420px; }
  .closing__main { padding: 96px 0 32px; }
}
/* Under 390px too. */
@media (max-width: 389px) { .hero--engraved .h1 { font-size: clamp(28px, calc((100vw - 60px) / 8.6), 44px); } }

/* ---------- Moving spectrum (2026-11-05) ----------
   Every spectrum accent moves: the hairlines, the tab and step bars, the time bar, the closing seam (all here, as an
   oversized tile whose background-position loops), the price-protection line (an animateTransform on its svg gradient,
   started by site.js) and the button and AI-chip glows (three colours that move round the glow). Each loop takes 6 to
   12 s and ends where it began. They animate background-position or a glow's colours on thin or small boxes: no layout.
   The large glow (the closing aura) keeps its own motion. All of it stands still under reduced motion. */
@keyframes spectrum-flow { from { background-position: 200% 0; } to { background-position: 0 0; } }
@keyframes spectrum-flow-y { from { background-position: 0 200%; } to { background-position: 0 0; } }
/* The glow colours: blue, teal and amber, each a third of the loop behind the next, so the colours move left to right. */
@property --g1 { syntax: "<color>"; inherits: false; initial-value: rgba(52, 84, 160, .55); }
@property --g2 { syntax: "<color>"; inherits: false; initial-value: rgba(120, 190, 214, .55); }
@property --g3 { syntax: "<color>"; inherits: false; initial-value: rgba(228, 198, 152, .7); }
@keyframes glow-flow {
  0%, 100% { --g1: rgba(52, 84, 160, .55); --g2: rgba(120, 190, 214, .55); --g3: rgba(228, 198, 152, .7); }
  33.333% { --g1: rgba(228, 198, 152, .7); --g2: rgba(52, 84, 160, .55); --g3: rgba(120, 190, 214, .55); }
  66.667% { --g1: rgba(120, 190, 214, .55); --g2: rgba(228, 198, 152, .7); --g3: rgba(52, 84, 160, .55); }
}

/* Reduced motion: the glows hold their middle state; the spectrum accents hold their resting colours. */
@media (prefers-reduced-motion: reduce) {
  .closing::after { animation: none; transform: translate(-50%, -50%); }
  .hero--engraved::after, .closing__seam, .split__rule,
  .btn--dark::after, .btn--light::after { animation: none; }
  .pane .timeuse i, .tstep.is-active .tstep__bar::after, .advantage.is-held .tstep.is-active .tstep__bar::after { animation: none !important; transform: scaleX(1); }
}
/* Forced colours: no glows, no gradient hairlines; borders come back in system colours. */
@media (forced-colors: active) {
  .closing::after, .closing__seam { display: none; }
  /* The firms: the system ground and text; the hairline a plain text-colour line. The logos are images, which forced colours
     leaves as drawn, so each list keeps a light plate (as css/backers.css does) and the logos stay ink on it: a scheme's dark
     flag does not always mean a dark ground (Firefox on macOS reports dark over a white Canvas). */
  .section.wall-sec { background: Canvas; color: CanvasText; }
  .wall-sec .wall__head .h2, .wall-sec .wall__head .lead, .split__label { color: CanvasText; }
  .split__rule { forced-color-adjust: none; background: CanvasText !important; animation: none; }
  .split__logos { forced-color-adjust: none; background: #f5f6f8; border-radius: 8px; }
  .sl__logo { filter: brightness(0); opacity: 1; }
  /* The Dusk horizon: no warm day and no glow; the closing's top seam is one plain line. */
  .section.wall-sec::after, .lit-run + .closing > .closing__seam::before, .lit-run + .closing > .closing__seam::after { display: none; }
  .lit-run + .closing > .closing__seam { display: block; forced-color-adjust: none; background: CanvasText; animation: none; }
}
/* Forced colours beyond the sections above (Windows High Contrast, common on business laptops; owner, 2026-11-06: "make it
   thinkpad proof"). A canvas keeps its own colours while the text over it takes the system's, so the hero's light engraving
   would leave a dark theme's white text on light silver: the canvas goes (hero-guilloche.js then lays out and draws nothing)
   and the hero takes the system ground. The pill buttons lose their fill to the system ground, so they keep a border in the
   text colour; the chosen guidance step is outlined, as the chosen product is. */
@media (forced-colors: active) {
  .hero__art { display: none; }
  .btn { border: 1px solid currentColor; }
  .tstep__tab[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: 2px; }
}