@font-face { font-family: 'Chivo Fallback'; src: local('Helvetica Neue'), local('Helvetica'), local('Arial'); size-adjust: 96.3%; }
/* The one Sophron® header (Vincent, 1 Oct 2026: "header not consistent on all pages").
   Loaded LAST in <head> on every page, so these rules win over each page's own copy.
   Markup (the same on every page; mark the current page with class="is-active"):
     <nav class="sph-topnav">
       <a href="/" class="sph-topnav-brand">Sophron<sup>&reg;</sup></a>
       <div class="sph-topnav-links">
         <a href="/research">Research</a>
         <a href="/analyst-programme">Programme</a>   (back in the header, Vincent 1 Oct 2026)
         <a href="/events.html">Events</a>
         <a href="/certifications">Certifications</a>
         <a href="https://sophron.network/" ...><span class="sph-nav-long">The Sophron® </span>Network<svg class="sph-ext">..</svg></a>
         <a href="/login" data-sph-account>Sign in</a>
       </div>
     </nav>
   The research pages are built by build_sophron_research.py (NAV string); keep it in step. */
.sph-topnav { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 24px; row-gap: 0; width: 100%; box-sizing: border-box; padding: 22px 40px; background: transparent; border: 0; }
.sph-topnav-brand { font-family: 'Cardo', Georgia, serif; font-size: 1.15rem; font-weight: 700; letter-spacing: .04em; line-height: 28px; color: #030248; text-decoration: none; }
.sph-topnav-brand { transition: color .25s ease, opacity .25s ease; }
.sph-topnav-brand:hover { color: #66100c; }
.sph-topnav-brand sup { transition: color .25s ease; }
.sph-topnav-brand:hover sup { color: #66100c; }
.sph-topnav-brand sup { color: #daa520; font-size: .5em; vertical-align: super; line-height: 0; }
.sph-topnav-links { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 28px; width: auto; }
.sph-topnav-links a { font-family: 'Chivo', 'Chivo Fallback', system-ui, -apple-system, sans-serif; display: inline-block; position: relative; padding: 0 0 3px; margin: 0; border: 0; font-size: .72rem; font-weight: 600; letter-spacing: .18em; line-height: 16px; text-transform: uppercase; color: rgba(3, 2, 72, .7); text-decoration: none; white-space: nowrap; transition: color .25s ease; }
.sph-topnav-links a:hover { color: #daa520; }
/* Split header (Vincent, 1 Oct 2026): Research, Programme, Events and Certifications sit on the
   left next to the wordmark; The Sophron Network, Portal and Account stay on the right. */
.sph-topnav-links { flex: 1 1 auto; margin-left: 56px; }
.sph-topnav-links a[href="/network"] { margin-left: 0; }
/* The Sophron(R) Network sits in the left group (Vincent, 2 Oct 2026); the right group is Portal + Account. */
.sph-topnav-links a[href="/analyst/portal"], .sph-topnav-links a[data-sph-account] { margin-left: auto; }
.sph-topnav-links a[href="/analyst/portal"] ~ a[data-sph-account] { margin-left: 0; }
/* A hairline of gold grows in from the left on hover (was only on pages loading sph-motion.css). */
.sph-topnav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #daa520; transform: scaleX(0); transform-origin: left center; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.sph-topnav-links a:hover::after { transform: scaleX(1); }
.sph-topnav-links a.is-active, .sph-topnav-links a.is-on, .sph-topnav-links a[aria-current] { color: #030248; }
.sph-topnav-links sup { font-size: .6em; line-height: 0; vertical-align: baseline; position: relative; top: -.55em; color: #daa520; }
/* The last slot (Sign in / Account) has a fixed width and right-aligned text, so the other
   links sit at exactly the same x on every page, signed in or not. */
.sph-topnav-links a:last-child { min-width: 6.8em; text-align: right; }
.sph-ext { width: .72em; height: .72em; margin-left: .35em; vertical-align: .02em; opacity: .7; }
.sph-nav-long { display: inline; }


/* Sticky header (Vincent, 1 Oct 2026). Pages that pin their own bar (the analyst portal) override it. */
.sph-topnav { position: sticky; top: 0; z-index: 900; background: #f6f3ee; }

/* Programme dropdown (Vincent, 1 Oct 2026: the analyst programme plus Sven Hubens' Options Course,
   which lives on the AIC site). Built by sph-nav.js around the Programme link. */
.sph-dd { position: relative; display: inline-flex; align-items: center; }
.sph-dd-caret { width: 9px; height: 9px; margin-left: 5px; opacity: .55; transition: transform .2s ease; }
.sph-dd-menu { position: absolute; top: calc(100% + 14px); left: -18px; min-width: 350px; padding: 10px; background: #fff; border: 1px solid rgba(3,2,72,.12); border-radius: 14px; box-shadow: 0 18px 44px rgba(3,2,72,.12); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; z-index: 950; }
.sph-dd-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.sph-dd:hover .sph-dd-menu, .sph-dd:focus-within .sph-dd-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease, visibility 0s; }
.sph-dd:hover .sph-dd-caret { transform: rotate(180deg); }
.sph-topnav-links .sph-dd-menu a { display: block; padding: 12px 14px; border-radius: 10px; font-family: 'Cardo', Georgia, serif; font-size: 1.05rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.3; color: #030248; white-space: normal; min-width: 0; text-align: left; }
.sph-topnav-links .sph-dd-menu a::after { display: none; }
.sph-topnav-links .sph-dd-menu a:hover { background: #f6f3ee; color: #66100c; }
.sph-dd-menu small { display: block; margin-top: 3px; font-family: 'Chivo', 'Chivo Fallback', system-ui, sans-serif; font-size: .74rem; color: rgba(3,2,72,.55); letter-spacing: 0; }
.sph-dd-menu .sph-ext { width: 10px; height: 10px; margin-left: 6px; }

/* Tablet: six links still on one line. */
/* Laptop widths (4 Nov 2026, with Careers added): the full-size header ran out of room below
   about 1450px and pushed Sign in, then Portal, off the right edge. Tighten it a step. */
@media (min-width: 1081px) and (max-width: 1480px) {
  .sph-topnav { padding: 22px 28px; }
  .sph-topnav-links { gap: 20px; margin-left: 32px; }
  .sph-topnav-links a { font-size: .68rem; letter-spacing: .13em; }
}
@media (min-width: 1081px) and (max-width: 1300px) {
  .sph-topnav-links { gap: 16px; margin-left: 24px; }
  .sph-topnav-links a { font-size: .64rem; letter-spacing: .1em; }
  .sph-topnav-links a:last-child { min-width: 0; }
  .sph-nav-long { display: none; }
}
/* Signed in, 1081-1199px (bell + search + Portal + Account, plus the profile picture) still ran
   ~30px past the edge (dashboard-6f, 4 Nov 2026). One more step for that band. */
@media (min-width: 1081px) and (max-width: 1199px) {
  .sph-topnav { padding: 22px 20px; gap: 16px; }
  .sph-topnav-links { gap: 12px; margin-left: 12px; }
  .sph-topnav-links a { font-size: .62rem; letter-spacing: .06em; }
}
@media (max-width: 1080px) {
  .sph-topnav { padding: 20px 24px; }
  .sph-topnav-links { gap: 12px; margin-left: 20px; }
  .sph-topnav-links a { font-size: .64rem; letter-spacing: .08em; }
  .sph-topnav-links a:last-child { min-width: 0; }
  .sph-nav-long { display: none; }
}
@media (min-width: 761px) and (max-width: 860px) {
  .sph-topnav { padding: 20px 16px; gap: 14px; }
  .sph-topnav-links { gap: 10px; margin-left: 12px; }
  .sph-topnav-links a { font-size: .6rem; letter-spacing: .06em; }
}
/* Phone: wordmark + Menu button; the links open as a full-screen cream panel (sph-nav.js). */
.sph-menu-btn { display: none; }
@media (max-width: 760px) {
  .sph-topnav { padding: 14px 16px; min-height: 60px; gap: 12px; }
  .sph-topnav-brand { font-size: 1.15rem; line-height: 32px; }
  .sph-menu-btn { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; padding: 8px 0 8px 12px; background: none; border: 0; cursor: pointer; color: #030248; font-family: 'Chivo', 'Chivo Fallback', system-ui, -apple-system, sans-serif; font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; -webkit-tap-highlight-color: transparent; }
  .sph-menu-ico { position: relative; width: 20px; height: 10px; display: inline-block; }
  .sph-menu-ico i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .3s ease, top .3s ease; }
  .sph-menu-ico i:first-child { top: 0; }
  .sph-menu-ico i:last-child { top: 8.5px; }
  .sph-topnav.is-open .sph-menu-ico i:first-child { top: 4.25px; transform: rotate(45deg); }
  .sph-topnav.is-open .sph-menu-ico i:last-child { top: 4.25px; transform: rotate(-45deg); }

  /* While open the bar is pinned, so it stays on screen wherever the page was scrolled. */
  .sph-topnav.is-open { position: fixed !important; top: 0; left: 0; right: 0; z-index: 1001; background: #f6f3ee !important; }
  html.sph-menu-open, html.sph-menu-open body { overflow: hidden; }

  html body .sph-topnav .sph-topnav-links { position: fixed; top: 60px; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; width: auto; padding: 8px 24px 32px; background: #f6f3ee; border-top: 1px solid rgba(3, 2, 72, .1); overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
  html body .sph-topnav.is-open .sph-topnav-links { visibility: visible; opacity: 1; transform: none; transition: opacity .25s ease, transform .25s ease, visibility 0s; }
  html body .sph-topnav .sph-topnav-links a { display: flex; align-items: center; justify-content: flex-start; min-width: 0; padding: 20px 0; border-bottom: 1px solid rgba(3, 2, 72, .1); font-family: 'Cardo', Georgia, serif; font-size: 1.6rem; font-weight: 400; font-style: normal; letter-spacing: 0; line-height: 1.2; text-transform: none; text-align: left; color: #030248; }
  html body .sph-topnav .sph-topnav-links a.is-active, html body .sph-topnav .sph-topnav-links a.is-on, html body .sph-topnav .sph-topnav-links a[aria-current] { color: #66100c; font-style: italic; }
  html body .sph-topnav .sph-topnav-links a::after { content: ""; position: static; flex: none; width: 8px; height: 8px; margin-left: 16px; background: none; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .45; transition: none; margin-left: auto !important; }
  html body .sph-topnav .sph-topnav-links a[target="_blank"]::after { display: none; }
  html body .sph-topnav .sph-topnav-links a .sph-ext { width: 14px; height: 14px; opacity: .5; margin-left: auto; }
  html body .sph-topnav .sph-topnav-links .sph-nav-long { display: inline; margin-right: .26em; }
  html body .sph-topnav .sph-topnav-links { margin-left: 0; }
  html body .sph-topnav .sph-topnav-links a[href="/network"] { margin-left: 0; }
  html body .sph-topnav .sph-topnav-links a[href="/analyst/portal"], html body .sph-topnav .sph-topnav-links a[data-sph-account] { margin-left: 0; }
  html body .sph-topnav .sph-topnav-links > a:last-child { justify-content: center; margin-top: 32px; padding: 17px 20px; border: 0; border-radius: 2px; background: #66100c; color: #f6f3ee; font-family: 'Chivo', 'Chivo Fallback', system-ui, -apple-system, sans-serif; font-size: .78rem; font-weight: 700; font-style: normal; letter-spacing: .2em; text-transform: uppercase; }
  html body .sph-topnav .sph-topnav-links > a:last-child::after { display: none; }
  .sph-dd { display: block; }
  .sph-dd-caret { display: none; }
  html body .sph-topnav .sph-dd-menu { position: static; opacity: 1; visibility: inherit; transform: none; min-width: 0; padding: 0 0 6px 14px; border: 0; border-radius: 0; box-shadow: none; background: none; }
  html body .sph-topnav .sph-topnav-links .sph-dd-menu a { display: block; font-family: 'Cardo', Georgia, serif; font-weight: 400; letter-spacing: 0; text-transform: none; padding: 12px 0; font-size: 1.15rem; border-bottom: 1px solid rgba(3,2,72,.06); justify-content: flex-start; margin: 0; background: none; color: #030248; border-radius: 0; }
  html body .sph-topnav .sph-dd-menu small { display: none; }
}

/* ONE banner geometry (Vincent, 1 Oct 2026: "same text in exact same spot"). Every dark
   Sophron® banner (research, portfolios, sector map, events, certifications, programme, join)
   is at least 460px tall (380 under 901px; slimmer since the register lost its numbers, Vincent 1 Oct), content TOP-aligned in the same 1240px column, so the
   kicker and the title sit at exactly the same x and y on every page. Loaded last, so it
   overrides each page's (and build_sophron_research.py's) own hero padding and centring. */
.rs-hero, .ev-hx, .cr-hx, .sa-hx, .jn-hx, .nw-hx { min-height: 460px !important; height: auto !important; padding: 0 !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; box-sizing: border-box; }
.rs-hero__in, .sm-hero__in, .ev-hx-in, .cr-hx-in, .sa-hx-in, .jn-in, .nw-hx-in { width: 100% !important; max-width: 1240px !important; margin: 0 auto !important; padding: 80px 24px 64px !important; box-sizing: border-box !important; text-align: left !important; }
.rs-hero__kick, .ev-hx-kick, .cr-hx-kick, .sa-hx-kick, .jn-crumb, .nw-hx-kick { margin: 0 !important; line-height: 20px !important; font-family: 'Chivo', system-ui, -apple-system, sans-serif !important; font-size: .78rem !important; font-weight: 700 !important; font-style: normal !important; letter-spacing: .24em !important; text-transform: uppercase !important; color: #e8a49e !important; text-align: left !important; }
.jn-crumb a { color: inherit !important; }
.rs-hero__h, .ev-hx-h, .cr-hx-h, .sa-hx-h, .jn-h, .nw-hx-h { font-size: clamp(2.2rem, 4.4vw, 3.9rem) !important; line-height: 1.08 !important; margin: 24px 0 24px !important; text-align: left !important; }
@media (max-width: 900px) {
  .rs-hero, .ev-hx, .cr-hx, .sa-hx, .jn-hx, .nw-hx { min-height: 380px !important; }
  .rs-hero__in, .sm-hero__in, .ev-hx-in, .cr-hx-in, .sa-hx-in, .jn-in, .nw-hx-in { padding: 56px 16px 48px !important; }
}

/* (Research tab banner heights: superseded 3 Oct 2026, see ONE BANNER HEIGHT at the end.) */

/* No layout shift on load (1 Oct 2026, "everything moves a tick to the right"):
   1) the brand keeps the width Cardo gives it (4.6em) even while the fallback font shows, so the
      links never re-flow when Cardo arrives; 2) the Program link reserves the dropdown arrow's room
      before sph-nav.js wraps it, and the arrow sits in that room instead of adding width. */
.sph-topnav-brand { display: inline-block; flex: 0 0 auto; width: 4.6em; white-space: nowrap; overflow: visible; }
.sph-topnav-links > a[href="/analyst-programme"], .sph-dd > a[href="/analyst-programme"], .sph-dd > a[href="/programs"],
.sph-topnav-links > a[href="/market-update"], .sph-dd > a[href="/market-update"] { position: relative; padding-right: 14px; }
.sph-dd > a[href="/analyst-programme"] .sph-dd-caret, .sph-dd > a[href="/programs"] .sph-dd-caret, .sph-dd > a[href="/market-update"] .sph-dd-caret { position: absolute; right: 0; top: 50%; margin: -4.5px 0 0; }

/* Phones (Vincent, 2 Oct 2026: "header images not always long enough in height on mobile"): every
   page-header image covers its whole band instead of sizing to a share of its height. */
@media (max-width: 760px) {
  [class*="-hx-bg"] { background-size: cover !important; background-position: 72% center !important; }
}

/* (620/480 banner heights: superseded 3 Oct 2026, see ONE BANNER HEIGHT at the end.) */

/* Portal shows signed out too (to the join page): it leads the right-hand group like before. */
.sph-topnav-links a[data-sph-portal] { margin-left: auto; }
.sph-topnav-links a[data-sph-portal] ~ a[data-sph-account] { margin-left: 0; }
/* Every page the same desktop header: the links group always fills the bar and starts after the
   wordmark (login/register/account load an older account stylesheet that right-aligned it). */
@media (min-width: 761px) {
  html body .sph-topnav { justify-content: flex-start; }
  html body .sph-topnav-links { flex: 1 1 auto; justify-content: flex-start; margin-left: 56px; gap: 28px; width: auto; }
}
@media (max-width: 760px) {
  html body .sph-topnav .sph-topnav-links a[data-sph-portal] { margin-left: 0; }
}
/* Research pages: their built CSS sizes the banner art to 92% of the band height ("auto 92%"),
   which on a phone leaves the art shorter than the taller band. Cover the whole band there. */
html body .rs-hero-bg { background-size: cover !important; background-position: right center !important; }
@media (max-width: 760px) {
  html body .rs-hero-bg { background-position: 72% center !important; }
}

/* Market Update joined the header (3 Oct 2026), eight links on desktop. The tablet rule above
   (gap 18px) lost to the later "html body" rule, so it is restated here where it wins, and a
   narrow-tablet step keeps every link on one line down to the 761px phone-menu breakpoint. */
@media (min-width: 761px) and (max-width: 1080px) {
  html body .sph-topnav-links { gap: 18px; margin-left: 32px; }
}
@media (min-width: 761px) and (max-width: 960px) {
  html body .sph-topnav-links { gap: 12px; margin-left: 20px; }
  html body .sph-topnav-links a { font-size: .62rem; letter-spacing: .08em; }
  html body .sph-topnav-links a:last-child { min-width: 5.6em; }
}


/* ===== ONE BANNER HEIGHT = THE WEEKLY MARKET UPDATE'S (Vincent, 3 Oct 2026: "make all headers the
   same height as weekly market update, so for example for research this means putting numbers below
   the banner and not inside, make sure all have exact same height"). Every dark page banner is
   EXACTLY 452px on desktop and 419px on phones (what the Market Update banner measured), and its text
   starts at the Market Update's offset. A banner holds the kicker, the title, the intro and at most
   one link line; numbers, search boxes, buttons and forms sit in .sph-hx-under right below it (on
   the research views below the tab row, so the tabs never move). Event details is not included:
   its height follows the event's own title. */
html body .g-hero, html body .rs-hero, html body .ev-hx, html body .cr-hx, html body .sa-hx,
html body .nw-hx, html body .jn-hx, html body .wp-hero {
  height: 452px !important; min-height: 452px !important; max-height: 452px !important;
  box-sizing: border-box !important; overflow: hidden !important;
  padding-top: 0 !important; padding-bottom: 0 !important; justify-content: flex-start !important;
}
html body .g-hero .g-head, html body .rs-hero__in, html body .sm-hero__in, html body .ev-hx-in,
html body .cr-hx-in, html body .sa-hx-in, html body .nw-hx-in, html body .jn-in, html body .wp-hero-txt {
  padding-top: 96px !important; padding-bottom: 0 !important; justify-content: flex-start !important;
}
@media (max-width: 980px) {
  html body .g-hero .g-head, html body .rs-hero__in, html body .sm-hero__in, html body .ev-hx-in,
  html body .cr-hx-in, html body .sa-hx-in, html body .nw-hx-in, html body .jn-in, html body .wp-hero-txt { padding-top: 72px !important; }
}
@media (max-width: 760px) {
  html body .g-hero, html body .rs-hero, html body .ev-hx, html body .cr-hx, html body .sa-hx,
  html body .nw-hx, html body .jn-hx, html body .wp-hero { height: 419px !important; min-height: 419px !important; max-height: 419px !important; }
  html body .g-hero .g-head, html body .rs-hero__in, html body .sm-hero__in, html body .ev-hx-in,
  html body .cr-hx-in, html body .sa-hx-in, html body .nw-hx-in, html body .jn-in, html body .wp-hero-txt { padding-top: 56px !important; }
  /* One intro size on phones (the Analyst Program banner's), so the longest intro still fits 419px.
     The Market Update banner itself is left exactly as it is. */
  html body .rs-hero__p, html body .ev-hx-p, html body .cr-hx-p, html body .sa-hx-p, html body .nw-hx-p, html body .wp-dek { font-size: 1.1rem !important; line-height: 1.6 !important; }
}
/* Market Update "about": once the two columns stack (980px and below) the photo sits BEHIND the
   text instead of above it, so the banner keeps the one height. */
@media (max-width: 980px) {
  html body .wp-hero { display: block !important; position: relative !important; }
  html body .wp-hero-ph { position: absolute !important; inset: 0 !important; min-height: 0 !important; opacity: .45; }
  html body .wp-hero-ph .wp-credit { display: none; }
  html body .wp-hero-txt { position: relative; z-index: 1; padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 760px) { html body .wp-hero-txt { padding-left: 16px !important; padding-right: 16px !important; } }
/* Sector Map: the text column starts at the top like every other banner, beside the desk grid. */
html body .sm-hero__in { align-items: flex-start !important; }
/* The intro is the last thing in a banner: no trailing gap that could push past the fixed height. */
html body .rs-hero__p, html body .ev-hx-p, html body .cr-hx-p, html body .sa-hx-p, html body .nw-hx-p, html body .wp-dek { margin-bottom: 0 !important; }

/* ---- Under the banner: on the cream page, in the banner's own 1240px column ---- */
.sph-hx-under__in { max-width: 1240px; margin: 0 auto; padding: 40px 24px 8px; box-sizing: border-box; display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 760px) { .sph-hx-under__in { padding: 28px 16px 4px; gap: 20px; } }
.sph-hx-under + * { margin-top: 0; }
/* figures: burgundy Cardo numbers, small navy caps labels, a hairline above */
.sph-hx-under .rs-stats, .sph-hx-under .sm-stats, .sph-hx-under .sa-hx-stats, .sph-hx-under .wp-stats {
  display: flex !important; flex-wrap: wrap; gap: 20px 48px !important; margin: 0 !important; padding: 20px 0 0 !important;
  border-top: 1px solid rgba(3,2,72,.14) !important; text-align: left !important; grid-template-columns: none !important;
}
.sph-hx-under .rs-stats div, .sph-hx-under .sm-stats div, .sph-hx-under .sa-hx-stats div, .sph-hx-under .wp-stats div { padding: 0 !important; }
.sph-hx-under .rs-stats b, .sph-hx-under .sm-stats b, .sph-hx-under .sa-hx-stats b, .sph-hx-under .wp-stats b {
  display: block; font-family: 'Cardo', Georgia, serif !important; font-weight: 400 !important; font-size: 2.2rem !important; line-height: 1 !important; color: #66100c !important;
}
.sph-hx-under .rs-stats span, .sph-hx-under .sm-stats span, .sph-hx-under .sa-hx-stats span, .sph-hx-under .wp-stats span {
  display: block; margin-top: 10px !important; font-family: 'Chivo', system-ui, sans-serif !important; font-size: .68rem !important; font-weight: 700 !important;
  letter-spacing: .16em !important; text-transform: uppercase; color: rgba(3,2,72,.7) !important;
}
.sph-hx-under .rs-stats div:hover b { color: #8a1c14 !important; }
@media (max-width: 760px) {
  .sph-hx-under .rs-stats, .sph-hx-under .sm-stats, .sph-hx-under .sa-hx-stats, .sph-hx-under .wp-stats { gap: 18px 28px !important; }
  .sph-hx-under .rs-stats b, .sph-hx-under .sm-stats b, .sph-hx-under .sa-hx-stats b, .sph-hx-under .wp-stats b { font-size: 1.8rem !important; }
}
/* search boxes (research, register): white field, navy hairline */
.sph-hx-under .rs-search, .sph-hx-under .cr-hx-verify { max-width: 720px; }
.sph-hx-under .rs-search input, .sph-hx-under .cr-hx-form input {
  background: #fff !important; color: #1a1410 !important; border: 1px solid rgba(3,2,72,.2) !important; backdrop-filter: none !important;
}
.sph-hx-under .rs-search input::placeholder, .sph-hx-under .cr-hx-form input::placeholder { color: #8a7f7b !important; }
.sph-hx-under .rs-search input:focus, .sph-hx-under .cr-hx-form input:focus { border-color: #66100c !important; background: #fff !important; }
.sph-hx-under .rs-search__box svg, .sph-hx-under .cr-hx-form svg { color: #8a7f7b !important; }
.sph-hx-under .rs-search kbd { color: #8a7f7b !important; border-color: rgba(3,2,72,.2) !important; }
.sph-hx-under .cr-hx-form button { background: #66100c !important; color: #f6f3ee !important; }
.sph-hx-under .cr-hx-form button:hover { background: #4d0c09 !important; }
/* buttons: the dark-banner variants become their cream-page versions */
.sph-hx-under .sa-cta, .sph-hx-under .nw-cta, .sph-hx-under .sm-acts { margin: 0 !important; }
.sph-hx-under .sa-btn--light, .sph-hx-under .nw-btn--light, .sph-hx-under .sm-btn--p { background: #66100c !important; color: #f6f3ee !important; border-color: #66100c !important; }
.sph-hx-under .sa-btn--light:hover, .sph-hx-under .nw-btn--light:hover, .sph-hx-under .sm-btn--p:hover { background: #4d0c09 !important; }
.sph-hx-under .sa-btn--prem { border-color: #daa520 !important; color: #66100c !important; background: transparent !important; }
.sph-hx-under .sa-btn--prem:hover { background: rgba(218,165,32,.12) !important; }
.sph-hx-under .sa-btn--line, .sph-hx-under .sm-btn--g, .sph-hx-under .nw-btn--line { border-color: rgba(102,16,12,.35) !important; color: #66100c !important; background: transparent !important; }
.sph-hx-under .sa-btn--line:hover, .sph-hx-under .sm-btn--g:hover, .sph-hx-under .nw-btn--line:hover { border-color: #66100c !important; }
.sph-hx-under .nw-hx-ic { margin: 0 !important; }
.sph-hx-under .nw-hx-ic a { color: #66100c !important; }
.sph-hx-under .nw-hx-ic a:hover { color: #8a1c14 !important; }
/* the programme note, the market update link line and the subscribe form */
.sph-hx-under .sa-hx-note { margin: -8px 0 0 !important; color: rgba(26,20,16,.7) !important; }
.sph-hx-under .sa-hx-note a { color: #66100c !important; border-bottom-color: rgba(102,16,12,.35) !important; }
.sph-hx-under .wp-hero-alt { margin: -8px 0 0 !important; }
.sph-hx-under .wp-hero-alt a { color: #66100c !important; border-bottom-color: rgba(102,16,12,.35) !important; }
.sph-hx-under .wp-sub-input { background: #fff !important; color: #1a1410 !important; border-color: rgba(3,2,72,.2) !important; }
.sph-hx-under .wp-sub-input::placeholder { color: #8a7f7b !important; }
.sph-hx-under .wp-sub-input:focus { border-color: #66100c !important; }
.sph-hx-under .wp-btn--light { background: #66100c !important; color: #f6f3ee !important; }
.sph-hx-under .wp-btn--light:hover { background: #4d0c09 !important; }
.sph-hx-under .wp-sub-title { color: #030248 !important; }
.sph-hx-under .wp-sub-note { color: rgba(26,20,16,.65) !important; }
.sph-hx-under .wp-sub-note a { color: #66100c !important; }

/* ===== HEADER ICONS: bell, search, profile (Vincent, 6 Oct 2026: "add a smart search on sophron.eu,
   to search members", "and a bell too", "same mobile feel with the bell icon, search and profile icons
   at top menu"). Built by sph-nav.js (tools()); the panels are sph-search.js and sph-bell.js.
   Desktop: right of Account. Phone: in the bar between the wordmark and Menu. ===== */
.sph-tools { display: flex; align-items: center; gap: 6px; flex: none; order: 2; margin-left: 22px; }
html body .sph-topnav .sph-topnav-links { order: 1; }
html body .sph-topnav .sph-menu-btn { order: 3; }
.sph-tool { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; margin: 0;
  border: 0; border-radius: 50%; background: transparent; color: #030248; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, color .2s ease; }
.sph-tool:hover, .sph-tool[aria-expanded="true"] { background: rgba(3,2,72,.06); color: #66100c; }
.sph-tool:focus-visible { outline: 2px solid #daa520; outline-offset: 2px; }
.sph-tool svg { width: 19px; height: 19px; display: block; }
.sph-bell-badge { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px;
  background: #66100c; color: #f6f3ee; font: 700 .58rem/16px 'Chivo', 'Chivo Fallback', system-ui, sans-serif; letter-spacing: 0; text-align: center;
  box-shadow: 0 0 0 2px #f6f3ee; }
.sph-bell-badge[hidden] { display: none; }
.sph-tool--av { overflow: hidden; margin-left: 2px; width: 32px; height: 32px; background: #fff; box-shadow: inset 0 0 0 1.5px #66100c; color: #66100c; }
.sph-tool--av:hover { background: #fff; }
.sph-tool--av .sph-av-i { font-family: 'Cardo', Georgia, serif; font-size: .82rem; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.sph-tool--av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* Wide desktop keeps the Account link, so the picture is a shortcut for narrower screens; under
   1081px it takes the Account link's place, which makes room for the icons. */
@media (min-width: 1081px) { .sph-tool--av { display: none; } }
@media (min-width: 761px) and (max-width: 1080px) {
  html body .sph-topnav.sph-has-bell .sph-topnav-links a[data-sph-account] { display: none; }
}
@media (min-width: 761px) and (max-width: 960px) {
  html body .sph-topnav { padding-left: 16px; padding-right: 12px; }
  html body .sph-topnav-links { gap: 10px; margin-left: 16px; }
  html body .sph-topnav-links a { font-size: .58rem; letter-spacing: .05em; }
  html body .sph-topnav-links a:last-child { min-width: 0; }
  html body .sph-topnav .sph-tools { margin-left: 6px; gap: 0; }
  html body .sph-topnav-links > a[href="/analyst-programme"], html body .sph-dd > a[href="/analyst-programme"], html body .sph-dd > a[href="/programs"],
  html body .sph-topnav-links > a[href="/market-update"], html body .sph-dd > a[href="/market-update"] { padding-right: 12px; }
}
@media (min-width: 761px) and (max-width: 1080px) {
  .sph-tools { margin-left: 12px; gap: 2px; }
  .sph-tool { width: 30px; height: 30px; }
  .sph-tool svg { width: 17px; height: 17px; }
}
/* Desktop (7 Oct 2026): bell + search sit inside the links, left of Portal and Account, as on the
   AIC header (sph-nav.js place()). They take over the auto margin that pushed Portal right. */
@media (min-width: 761px) {
  html body .sph-topnav .sph-topnav-links > .sph-tools--in { margin-left: auto; margin-right: -10px; order: 0; }
  html body .sph-topnav .sph-topnav-links > .sph-tools--in ~ a[data-sph-portal],
  html body .sph-topnav .sph-topnav-links > .sph-tools--in ~ a[href="/analyst/portal"],
  html body .sph-topnav .sph-topnav-links > .sph-tools--in ~ a[data-sph-account] { margin-left: 0; }
  .sph-tools--end:empty { display: none; }
  .sph-tools--end { margin-left: 12px; }
}
@media (min-width: 1081px) { .sph-tools--end { display: none; } }
@media (max-width: 760px) {
  .sph-tools { order: 2; margin-left: auto; gap: 2px; }
  .sph-tools--end { margin-left: 0; }
  .sph-tools--end:empty { display: none; }
  html body .sph-topnav .sph-menu-btn { margin-left: 4px; }
  .sph-tool { width: 38px; height: 38px; }
  .sph-tool svg { width: 20px; height: 20px; }
  .sph-tool--av { width: 32px; height: 32px; margin: 0 4px; }
  /* Signed in, the Menu label gives way to the icons; the two-line burger stays. */
  .sph-topnav.sph-has-bell .sph-menu-lbl { display: none; }
  .sph-topnav.sph-has-bell .sph-menu-btn { padding-left: 8px; }
}

/* ===== PHONES: BANNERS FIT THEIR TEXT (Vincent, 8 Oct 2026: research "not optimized for mobile",
   "banners are ugly"). Below 760px the one-height rule left a dark band of empty space under every
   intro and pushed the content off the first screen. On phones a banner is now as tall as its text,
   with the same 48px above the kicker and below the intro on every page; desktop keeps 452px. */
@media (max-width: 760px) {
  html body .g-hero, html body .rs-hero, html body .ev-hx, html body .cr-hx, html body .sa-hx,
  html body .nw-hx, html body .jn-hx, html body .wp-hero { height: auto !important; min-height: 0 !important; max-height: none !important; }
  html body .g-hero .g-head, html body .rs-hero__in, html body .sm-hero__in, html body .ev-hx-in,
  html body .cr-hx-in, html body .sa-hx-in, html body .nw-hx-in, html body .jn-in, html body .wp-hero-txt { padding-top: 48px !important; padding-bottom: 48px !important; }
  html body .rs-hero__p, html body .ev-hx-p, html body .cr-hx-p, html body .sa-hx-p, html body .nw-hx-p, html body .wp-dek { font-size: 1.05rem !important; line-height: 1.55 !important; }
  /* figures in a tidy two-by-two grid instead of a ragged 3 + 1 wrap */
  .sph-hx-under .rs-stats, .sph-hx-under .sm-stats, .sph-hx-under .sa-hx-stats, .sph-hx-under .wp-stats { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 18px 16px !important; }
  /* buttons under a banner: full width, one size */
  .sph-hx-under .sm-acts { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100%; }
  .sph-hx-under .sm-acts > * { width: 100% !important; justify-content: center !important; box-sizing: border-box; text-align: center; }
}

/* THE SOPHRON(R) PASSPORT in the header (Vincent, 4 Nov 2026: "with a gold effect or prominent"): a gold pill right
   after Portal (sph-nav.js). The sheen moves across on hover. "Sophron(R)" only above 1480px, where there is room. */
.sph-topnav-links a[data-sph-passport] {
  padding: 6px 13px 5px; border-radius: 999px; color: #3b2a06; letter-spacing: .14em;
  background: linear-gradient(110deg, #d9b24f 0%, #f7e3a1 24%, #cfa33a 50%, #f1d68a 74%, #c4952a 100%);
  background-size: 220% 100%; background-position: 0 0;
  box-shadow: inset 0 0 0 1px rgba(122, 84, 12, .35), 0 1px 6px rgba(201, 154, 46, .35);
  transition: background-position .7s ease, box-shadow .25s ease, color .25s ease;
}
.sph-topnav-links a[data-sph-passport]:hover, .sph-topnav-links a[data-sph-passport]:focus-visible, .sph-topnav-links a[data-sph-passport].is-active {
  color: #2a1d03; background-position: 100% 0; box-shadow: inset 0 0 0 1px rgba(122, 84, 12, .55), 0 3px 12px rgba(201, 154, 46, .55);
}
.sph-topnav-links a[data-sph-passport]::after { display: none; }
.sph-topnav-links a[data-sph-passport] sup { font-size: .62em; line-height: 0; vertical-align: baseline; position: relative; top: -.5em; color: inherit; }
@media (max-width: 1699px) { .sph-topnav-links .sph-pp-long { display: none; } }
/* The header was already full below 1700px: the pill takes the room of "The Sophron(R)" in the Network link there,
   and from 1380px down (no room at all) it leaves the bar; the Programs dropdown carries it instead (sph-nav.js). */
/* Always, not only once the pill is in (was :has(a[data-sph-passport])): the pill is added by script after the
   first paint, so "The Sophron(R)" vanished a moment after every page load and the header jumped (Vincent, 4 Nov 2026). */
@media (min-width: 761px) and (max-width: 1699px) { .sph-topnav-links .sph-nav-long { display: none; } }
@media (min-width: 761px) and (max-width: 1380px) { html body .sph-topnav .sph-topnav-links a[data-sph-passport] { display: none; } }
.sph-dd-menu a.sph-dd-pp { background: linear-gradient(110deg, rgba(217,178,79,.16), rgba(247,227,161,.32) 50%, rgba(217,178,79,.16)); }
.sph-dd-menu a.sph-dd-pp small { color: #7a5410; }
@media (max-width: 760px) { html body .sph-topnav .sph-dd-menu a.sph-dd-pp { display: none; } }
@media (max-width: 760px) {
  html body .sph-topnav .sph-topnav-links a[data-sph-passport] {
    justify-content: center; margin-top: 28px; padding: 16px 20px; border: 0; border-radius: 2px;
    font-family: 'Chivo', 'Chivo Fallback', system-ui, -apple-system, sans-serif; font-size: .8rem; font-weight: 700; font-style: normal;
    letter-spacing: .16em; text-transform: uppercase; color: #2a1d03;
  }
  html body .sph-topnav .sph-topnav-links a[data-sph-passport] + a:last-child { margin-top: 12px; }
  html body .sph-topnav .sph-topnav-links a[data-sph-passport] .sph-pp-long { display: inline; margin-right: .45em; }
  html body .sph-topnav .sph-topnav-links a[data-sph-passport]::after { display: none; }
}

/* THE SOPHRON(R) LOGO IN THE HEADER (Vincent, 5 Nov 2026: "make top left logo on all pages in header the sophron logo, not
   text, black sophron logo please"). The wordmark image instead of the typed "Sophron(R)", on every page that carries
   .sph-topnav-brand (the static pages and the aic-chrome header alike); the text stays for screen readers. Every header
   sits on cream, the 404 page's too, so it is the black one everywhere. */
html body .sph-topnav .sph-topnav-brand {
  display: inline-block; flex: none; width: 112px; height: 28px; line-height: 28px; vertical-align: middle;
  background: url(/assets/img-cdn/sophron-logo-black-20261105.png) left center / contain no-repeat;
  color: transparent !important; font-size: 0 !important; letter-spacing: 0; overflow: hidden; white-space: nowrap;
  transition: opacity .25s ease;
}
html body .sph-topnav .sph-topnav-brand sup { display: none; }
html body .sph-topnav .sph-topnav-brand:hover { opacity: .72; }
@media (max-width: 760px) { html body .sph-topnav .sph-topnav-brand { width: 100px; height: 25px; } }