/* ==========================================================================
   Shufti Sphere — page template styles
   Figma: 68gr5FB1M8qKeO6K3O31mv (node 3523-1218)
   Scoped: .sphere-header (header), #sphere (page body), .sphere-footer (footer),
           .sphere-modal (subscribe modal). No CSS variables, no @font-face
           (theme already defines Flecha M / Graphik-Medium / Graphik-Regular).
   ========================================================================== */

/* ---- scope reset ---- */
#sphere *, .sphere-header *, .sphere-footer *, .sphere-modal * { box-sizing: border-box; }
#sphere { color: #354557; font-family: 'Graphik-Regular', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 400; line-height: 1.5; background: #ffffff; overflow-x: clip; }
body { background-color: #fff; }
#sphere img { max-width: 100%; display: block; }
#sphere a { text-decoration: none; color: inherit; }
/* SEO/a11y: keep in DOM (crawlable) but visually removed — never shown on the page */
.sphere-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#sphere p { margin: 0; }
#sphere ul, .sphere-header ul, .sphere-footer ul { margin: 0; padding: 0; list-style: none; }
#sphere h1, #sphere h2, #sphere h3, #sphere h4 { margin: 0; font-weight: 500; }

/* global theme-wrap fixes (Sphere page only) */
.gtranslate_wrapper { display: none; }
body .wrap { width: 100% !important; max-width: 100%; }
/* Mobile: zero the theme .wrap container's side padding — it was adding extra spacing on the Sphere pages */
@media only screen and (max-width: 767px) { body .wrap { width: 100% !important; padding: 0 !important; } }
/* theme sets body{overflow-x:hidden} which turns body into a scroll container
   and breaks position:sticky — unset it so the Moves left box can pin. */
html body { overflow: unset; }

.sphere-wrap { width: 100%; max-width: 1300px; margin: 0 auto; padding: 0; }
/* mid-screen side spacing: below 1300px the wrap fills the viewport but had NO side padding until ≤767px — add it for 768–1350px so content doesn't touch the edges */
@media (min-width: 768px) and (max-width: 1350px) { .sphere-wrap { padding-left: 24px; padding-right: 24px; } }

/* ---- typography helpers (family chosen by weight) ---- */
.sphere-serif { font-family: 'Flecha M', Georgia, 'Times New Roman', serif; font-weight: 500; color: #0d1428; line-height: 1.15; }
.sphere-eyebrow { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #ED1C24; }

/* ---- buttons ---- */
.sphere-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 15px; line-height: 1; padding: 14px 26px; border-radius: 40px; transition: .25s ease; white-space: nowrap; }
.sphere-btn--dark { background: #0d1428; color: #ffffff; }
.sphere-btn--dark:hover { background: #1b2440; }
.sphere-btn--yellow { background: #f6c945; color: #0d1428 !important; padding: 22.5px 34px; }
.sphere-btn--yellow:hover { background: #ffd75e; }
.sphere-community .sphere-btn--yellow { background: #FAD92B; color: #0D1428; font-weight: 600; font-size: 16px; padding: 18px 34px; border-radius: 50px; margin-top: 15px; }
.sphere-community .sphere-btn--yellow:hover { background: #FAD92B; filter: brightness(.96); }
.sphere-btn--outline { background: transparent; color: #0d1428; border: 1px solid #c5cfdb; }
.sphere-btn--outline:hover { border-color: #0d1428; }
.sphere-btn--white-outline { background: transparent; color: #ffffff; border: 1px solid rgba(255,255,255,.5); }
.sphere-btn--white-outline:hover { border-color: #ffffff; }

/* ==========================================================================
   HEADER — two-state (default + compact-on-scroll), flat navy logo lockup
   Figma: default 14376 · dropdowns 2562 · mega-panel 2619/2701
   ========================================================================== */
.sphere-header { position: relative; z-index: 1200; background: #ffffff; font-family: 'Graphik-Regular', sans-serif; }
.sphere-header.is-sticky { box-shadow: none; }
.sphere-header__spacer { display: none !important; }
.sphere-header__default { background: #ffffff; }

/* default header top row: Join Community (left) · logo (centred) · search+burger (right) */
.sphere-header__top { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 44px 40px 38px; max-width: 1440px; margin: 0 auto; transition: padding .25s ease; }
.sphere-header.is-sticky .sphere-header__top { padding: 12px 28px; }
/* ---- Inner Sphere pages (everything except the landing): the big branded default header (.sphere-header__default = Join Community + centered logo + tagline + nav) is LANDING-ONLY. On every other Sphere page the COMPACT bar (logo-left + nav + Sign Up + Contact Us + tools) becomes the header and stays PERSISTENTLY visible — same by default AND on scroll (Figma inner-page header). Double :not keeps the landing safe whether WP tags it by template class or slug class. ---- */
body:not(.page-template-page-shufti-sphere-php):not(.page-shufti-sphere) .sphere-header__default { display: none; }
body:not(.page-template-page-shufti-sphere-php):not(.page-shufti-sphere) .sphere-header { min-height: 64px; } /* reserves in-flow space for the fixed compact bar (compact ≈ 60px logo + 2px×2 padding) so page content isn't hidden underneath */
body:not(.page-template-page-shufti-sphere-php):not(.page-shufti-sphere) .sphere-header__compact { transform: translateY(0); opacity: 1; pointer-events: auto; top: 31px; }

.sphere-header__brand { position: absolute; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; }
.sphere-header__logo-img { height: 88px; width: auto; display: block; }
/* legacy text lockup (kept for fallback markup) */
.sphere-header__logo { display: flex; align-items: center; gap: 12px; }
.sphere-header__logo img { height: 40px; width: auto; }
.sphere-header__logo-text { font-family: 'Flecha M', Georgia, serif; font-weight: 500; font-size: 30px; color: #0d1428; line-height: 1; }
.sphere-header__tagline { font-size: 13px; color: #5b6c7f; }
.sphere-header.is-sticky .sphere-header__tagline { display: none; }

.sphere-header__cta { background: #0d1428; color: #fff; font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 15px; padding: 13px 26px; border-radius: 40px; transition: background .2s ease, box-shadow .2s ease; }
.sphere-header__cta:hover { background: #1b2440; box-shadow: 0 8px 20px rgba(13,20,40,.22); }
/* Figma right-side buttons: Sign Up (text link) + Contact Us (yellow pill) */
.sphere-header__cta--yellow { background: #FAD92B; color: #0d1428; }
.sphere-header__cta--yellow:hover { background: #f6c945; box-shadow: 0 8px 20px rgba(250,217,43,.35); }
.sphere-header__signup { display: inline-flex; align-items: center; color: #0d1428; font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 15px; text-decoration: none; transition: opacity .2s ease; white-space: nowrap; }
.sphere-header__signup:hover { opacity: .6; }
.sphere-header__cta-group { display: inline-flex; align-items: center; gap: 18px; }

.sphere-header__tools { display: flex; align-items: center; gap: 8px; }
/* HOVER CONVENTION: icon buttons fill navy + white icon + soft shadow on hover (Figma 3525:2222/2231) */
.sphere-header__search { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #d7e0e9; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.sphere-header__search svg { width: 20px; height: 20px; stroke: #0d1428; transition: stroke .2s ease; }
.sphere-header__search:hover { background: #0d1428; border-color: #0d1428; box-shadow: 0 8px 20px rgba(13,20,40,.22); }
.sphere-header__search:hover svg { stroke: #ffffff; }
.sphere-header__burger { width: 40px; height: 40px; border-radius: 50%; background: #0d1428; border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease, box-shadow .2s ease; }
.sphere-header__burger svg { width: 20px; height: 20px; stroke: #ffffff; }
.sphere-header__burger:hover { background: #1b2440; box-shadow: 0 8px 20px rgba(13,20,40,.3); }

/* compact header (slides in on scroll) — Figma 3523:2492 */
.sphere-header__compact { position: fixed; top: 0; left: 0; right: 0; z-index: 1260; display: flex; align-items: center; justify-content: space-between; gap: 26px; background: #ffffff; border-bottom: 1px solid #e6ecf3; box-shadow: 0 6px 20px rgba(13,20,40,.07); padding: 0px 36px; transform: translateY(-105%); opacity: 0; transition: transform .38s cubic-bezier(.4,0,.2,1), opacity .3s ease; pointer-events: none; }
.sphere-header.is-sticky .sphere-header__compact { transform: translateY(0); opacity: 1; pointer-events: auto; }
.sphere-header__brand-sm { display: inline-flex; align-items: center; flex: 0 0 auto; }
.sphere-header__brand-sm img { height: 56px; width: auto; display: block; }
.sphere-header__compact .sphere-nav { border: 0; flex: 1 1 auto; }
.sphere-header__compact .sphere-nav__list { border: 0; justify-content: center; gap: 6px; padding: 0; max-width: none; }
.sphere-header__compact .sphere-nav__link { padding: 8px 14px; }
.sphere-header__compact-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.sphere-header__compact-actions .sphere-header__cta { padding: 11px 22px; font-size: 14px; }
.sphere-header__compact-actions .sphere-header__search { width: 40px; height: 40px; }
.sphere-header__compact-actions .sphere-header__burger { width: 40px; height: 40px; }

/* nav row: 56px tall, Graphik-Regular 400 16px (Figma weight 400) */
.sphere-nav { border-bottom: 1px solid #e6ecf3; }
.sphere-nav__list { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 56px; max-width: 1440px; margin: 0 auto !important; padding: 0 40px; }
.sphere-nav__item { position: static; }
/* HOVER CONVENTION: nav items fill navy + flip text white on hover/open (Figma 3525:2190) */
.sphere-nav__link { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 30px; font-family: 'Graphik-Regular', sans-serif; font-weight: 400; font-size: 16px; color: #0d1428; cursor: pointer; transition: background .2s ease, color .2s ease; }
.sphere-nav__item:hover .sphere-nav__link, .sphere-nav__item.is-open .sphere-nav__link { background: #0d1428; color: #ffffff; }

/* ---- nav dropdowns (Figma 2562): #f1f6fb 370px panel + Graphik heading + 4 cards.
   visibility delayed on close → News→Blogs crossfades smoothly (no blink) ---- */
.sphere-mega { position: absolute; left: 0; right: 0; top: 100%; background: #ffffff; box-shadow: 0 24px 48px rgba(13,20,40,.14); border-top: 1px solid #eef2f7; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s; z-index: 1190; }
.sphere-nav__item.is-open .sphere-mega, .sphere-mega.is-open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .3s ease, transform .3s ease, visibility 0s linear 0s; }
.sphere-mega__inner { max-width: 1440px; margin: 0 auto; padding: 0; display: grid; grid-template-columns: 370px 1fr; align-items: stretch; }
.sphere-mega__intro { background: #f1f6fb; padding: 42px 38px; display: flex; flex-direction: column; justify-content: center; }
.sphere-mega__intro p.sphere-mega__intro-title { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 32px; color: #0d1428; line-height: 1.2; margin: 0 0 12px; }
.sphere-mega__intro p { font-family: 'Graphik-Regular', sans-serif; font-weight: 400; font-size: 16px; color: #5b6c7f; line-height: 1.5; }
.sphere-mega__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; padding: 58px 40px; align-content: center; }
.sphere-mega__card { display: block; position: relative; z-index: 0; }
/* Hover elevation (Figma): a white rounded panel + soft shadow fades in BEHIND the card, extended outward so the image/title never move or shrink. */
.sphere-mega__card::before { content: ""; position: absolute; inset: -14px; background: #ffffff; border-radius: 20px; box-shadow: 0 4px 14px rgba(13,20,40,.06), 0 18px 44px rgba(13,20,40,.12); opacity: 0; transition: opacity .25s ease; z-index: -1; pointer-events: none; }
.sphere-mega__card-img { display: block; aspect-ratio: 2 / 1; width: 100%; height: auto; border-radius: 12px; overflow: hidden; background: #eef2f7; margin-bottom: 12px; }
.sphere-mega__card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.sphere-mega__card-title { font-family: 'Graphik-Regular', sans-serif; font-weight: 500; font-size: 16px; color: #354557; line-height: 130%; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s ease; }
/* Card hover (sumsub.com/media-style): thumbnail zooms in but stays CLIPPED inside the rounded box (wrapper has overflow:hidden), and the title shifts to the brand red. Applies to both the nav mega-dropdown cards and the hamburger megapanel LATEST cards. */
.sphere-mega__card:hover .sphere-mega__card-img img { transform: scale(1.06); }
.sphere-mega__card:hover .sphere-mega__card-title { color: #5C6C80; }
.sphere-mega__card:hover::before { opacity: 1; }
/* Experts card: the collage PNG (678×372, ~1.82:1) has a light rounded border baked in; the default 2/1 cover-crop was cutting that border off top/bottom. Show the full image at its own ratio so the frame stays intact. */
.sphere-megapanel__pane[data-pane="5"] .sphere-mega__card-img { aspect-ratio: 678 / 372; background: transparent; }
.sphere-megapanel__pane[data-pane="5"] .sphere-mega__card-img img { object-fit: contain; }
.sphere-mega__tab { display: none; }
.sphere-mega__tab.is-active { display: grid; }

/* ---- full-width hamburger mega-panel (Figma 3523:2619) ---- */
.sphere-megapanel { position: fixed; inset: 0; z-index: 1300; background: transparent; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.sphere-megapanel.is-open { opacity: 1; visibility: visible; }
.sphere-megapanel::before { content: ""; position: fixed; inset: 0; background: rgba(13,20,40,.45); opacity: 0; transition: opacity .3s ease; }
.sphere-megapanel.is-open::before { opacity: 1; }
.sphere-megapanel__sheet { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: auto; max-height: 92vh; overflow-y: auto; background: #ffffff; transform: translateY(-100%); transition: transform .4s cubic-bezier(.4,0,.2,1); box-shadow: 0 24px 48px rgba(13,20,40,.16); border-bottom: 1px solid #eef2f7; padding: 0; }
.sphere-megapanel.is-open .sphere-megapanel__sheet { transform: translateY(0); }
.sphere-megapanel__inner { position: relative; max-width: 1240px; margin: 0 auto; padding: 44px 28px 56px; }
.sphere-megapanel__close { position: absolute; top: 22px; right: 22px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid #d7e0e9; background: #fff; cursor: pointer; font-size: 20px; color: #0d1428; line-height: 1; }
.sphere-megapanel__grid { display: grid; grid-template-columns: 260px 1fr; gap: 30px; }
.sphere-megapanel__nav a { display: block; width: 100%; text-align: left; padding: 13px 18px; border: 0; background: transparent; border-radius: 30px; font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 16px; color: #5b6c7f; text-decoration: none; cursor: pointer; margin-bottom: 6px; transition: background .2s ease, color .2s ease; }
.sphere-megapanel__nav a:hover { background: #0d1428; color: #fff; }
.sphere-megapanel__nav a.is-active { background: #0d1428; color: #fff; }
.sphere-megapanel__latest-label { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #91a1b4; margin-bottom: 16px; }
.sphere-megapanel__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sphere-megapanel__pane { display: none; }
.sphere-megapanel__pane.is-active { display: block; }

/* ==========================================================================
   HERO
   ========================================================================== */
.sphere-hero { padding: 36px 0 56px; }
/* 2-column hero: left MAIN (events+featured → dashed lines → news cards) | right ASIDE (trending + newsletter) */
.sphere-hero__layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 34px; align-items: start; }
.sphere-hero__main { display: flex; flex-direction: column; }
.sphere-hero__top { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 30px; align-items: start; }
.sphere-hero__lines, .sphere-lines { display: block; }
.sphere-hero__lines i, .sphere-lines i { display: block; border-top: 1px dashed #D7E0E9; }
.sphere-hero__lines i + i, .sphere-lines i + i { margin-top: 5px; }
.sphere-hero__lines { margin: 30px 0; }
.sphere-lines { max-width: 1300px; margin: 0 auto; padding: 0; }
.sphere-reports .sphere-lines { width: 100%; max-width: none; margin: 0; }
.sphere-hero__aside { display: flex; flex-direction: column; gap: 70px; }
/* CENTER — featured news card: image → tags → title, whole card is the link, light hover (Figma 3523:1391) */
.sphere-hero__featured { display: flex; flex-direction: column; border-radius: 16px; }
.sphere-hero__featured-img { display: block; width: 100%; aspect-ratio: 616 / 294; border-radius: 14px; overflow: hidden; background: #0d1428; transition: box-shadow .25s ease; }
.sphere-hero__featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.sphere-hero__featured:hover .sphere-hero__featured-img { box-shadow: 0 14px 30px rgba(13,20,40,.14); }
.sphere-hero__featured:hover .sphere-hero__featured-img img { transform: scale(1.04); }
.sphere-tag { display: inline-block; font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 12px; padding: 5px 12px; border-radius: 64px; background: #F1F6FB !important; color: #0D1428; }
.sphere-tag--red { background: #ED1C24; }
.sphere-tag--light { background: #eef2f7; color: #354557; }
.sphere-hero__featured-meta { display: flex; align-items: center; gap: 12px; margin: 18px 0 10px; }
.sphere-hero__featured-cat { font-family: 'Graphik-Regular', sans-serif; font-weight: 400; font-size: 13px; color: #5b6c7f; }
.sphere-hero__featured-title { font-family: 'Flecha M', Georgia, serif; font-weight: 500; font-size: 30px; color: #0d1428; line-height: 1.18; transition: color .2s ease; }
.sphere-hero__featured:hover .sphere-hero__featured-title { color: #5C6C80; }

/* LEFT column — Upcoming Events */
.sphere-hero__events { display: flex; flex-direction: column; }
.sphere-hero__events .sphere-eyebrow { margin-bottom: 18px; }
.sphere-hero__event h2 { font-family: 'Flecha M', Georgia, serif; font-weight: 500; font-size: 25px; color: #0d1428; line-height: 1.18; margin-bottom: 12px !important; }
#sphere .sphere-hero__event h2 a { color: inherit; text-decoration: none; transition: color .2s ease; }
#sphere .sphere-hero__event h2 a:hover { color: #5C6C80; }
.sphere-hero__event p { font-size: 14px; color: #5b6c7f; line-height: 1.55; margin-bottom: 18px; overflow-wrap: break-word; }
.sphere-hero__event-meta { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 22px; margin-top: 16px; }
/* chips per Figma 3523:1804 — left divider line + blue icon + gray text (no pill) */
.sphere-hero__chip { display: inline-flex; align-items: center; gap: 8px; padding-left: 14px; border-left: 1px solid #91A1B4; font-family: 'Graphik-Regular', sans-serif; font-weight: 400; font-size: 14px; color: #354557; white-space: nowrap; }
.sphere-hero__chip svg { width: 18px; height: 18px; color: #539ff9; flex: 0 0 auto; }
.sphere-btn--red { background: #ED1C24; color: #fff !important; }
.sphere-btn--red:hover { background: #c8161d; }
.sphere-hero__event .sphere-btn { align-self: flex-start; }
.sphere-hero__recent-ev { display: block; margin-top: 26px; padding-top: 22px; border-top: 1px solid #e6ecf3; }
.sphere-hero__recent-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sphere-hero__recent-date { font-family: 'Graphik-Regular', sans-serif; font-weight: 400; font-size: 13px; color: #354557; }
.sphere-hero__recent-title { display: block; font-family: 'Flecha M', Georgia, serif; font-weight: 500; font-size: 20px; color: #0d1428; line-height: 1.2; }
.sphere-hero__recent-ev:hover .sphere-hero__recent-title { color: #5C6C80; }

/* RIGHT column — Trending */
.sphere-hero__trending { display: flex; flex-direction: column; }
.sphere-hero__trending-title { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 18px; color: #0d1428; margin-bottom: 24px !important; }
.sphere-hero__trend { display: block; padding-bottom: 34px; }
.sphere-hero__trend:last-child { padding-bottom: 0; }
.sphere-hero__trend .sphere-tag { margin-bottom: 10px; }
.sphere-hero__trend-title { display: block; font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 16px; color: #0d1428; line-height: 1.35; transition: color .2s; }
.sphere-hero__trend:hover .sphere-hero__trend-title { color: #5C6C80; }

/* feature cards row + newsletter */
.sphere-hero__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sphere-card { display: flex; flex-direction: column; position: relative; }
/* stretched overlay link = the article; sits above content but BELOW the author chip */
.sphere-card__link { position: absolute; inset: 0; z-index: 1; border-radius: 14px; }
.sphere-card__img { display: block; /* aspect-ratio: 16/10; */ border-radius: 14px; overflow: hidden; background: #eef2f7; margin-bottom: 14px; position: relative; }
.sphere-card__img img { width: 100%; height: auto; display: block; }
.sphere-card__meta { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.sphere-card__cat { font-family: 'Graphik-Regular', sans-serif; font-weight: 400; font-size: 13px; color: #5b6c7f; }
.sphere-card__title { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 16px; color: #0d1428; line-height: 1.35; }
.sphere-newsletter { background: rgba(215, 224, 233, 0.50); border-radius: 16px; padding: 32px 16px 13px; display: flex; flex-direction: column; }
.sphere-newsletter h3 { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 20px; color: #0d1428; line-height: 1.2; margin-bottom: 12px; text-align: center; }
.sphere-newsletter p { font-size: 14px; color: #354557; text-align: center; font-family: 'Graphik-Regular', sans-serif; margin-top: 16px !important; margin-bottom: 25px !important; }
.sphere-newsletter .sphere-btn { align-self: stretch; width: 100%; color: #fff !important; }

/* ==========================================================================
   SECTION HEADINGS (generic)
   ========================================================================== */
.sphere-section { padding: 64px 0; }
.sphere-section__head { text-align: center; margin-bottom: 40px; }
.sphere-section__head h2 { font-family: 'Flecha M', Georgia, serif; font-weight: 500; font-size: 44px; color: #0d1428; }
.sphere-section__head--left { text-align: left; }

/* Top Blogs */
.sphere-blogs__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.sphere-blogs__grid .sphere-tag--light:last-child { color: #5C6C80; background: transparent !important; }

/* ==========================================================================
   REPORTS & INSIGHTS  (dark)
   ========================================================================== */
.sphere-reports { background: #ffffff; color: #0d1428; padding: 70px 0; }
.sphere-reports .sphere-section__head h2 { color: #0d1428; }
.sphere-reports__grid { display: grid; grid-template-columns: 1.75fr 1.26fr 1fr; gap: 48px; align-items: start; }
.sphere-reports__col { display: flex; flex-direction: column; gap: 20px; }
.sphere-reports__lead .sphere-tag--light { background: #F1F6FB; color: #0d1428; margin-bottom: 16px; }
.sphere-reports__lead h3 { font-family: 'Flecha M', Georgia, serif; font-weight: 500; font-size: 30px; color: #0d1428; line-height: 1.2; }
.sphere-reports__lead h3 a { color: inherit; }
.sphere-reports__divider { display: block; width: 100%; height: 0; border: 0; border-top: 1px dashed rgba(13,20,40,.20); margin: 8px 0; }
.sphere-reports__guides { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sphere-guide { display: flex; flex-direction: column; align-items: flex-start; }
.sphere-guide__img { display: block; width: 100%; border-radius: 13px; overflow: hidden; margin-bottom: 14px; }
.sphere-guide__img img { width: 100%; height: auto; display: block; }
.sphere-guide__type { display: inline-block; font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 12px; color: #0d1428; background: #F1F6FB; padding: 5px 12px; border-radius: 40px; margin-bottom: 12px; }
.sphere-guide h4 { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 16px; color: #0d1428; line-height: 1.35; }
.sphere-reports__cover { border-radius: 16px; overflow: hidden; display: block; align-self: stretch; }
.sphere-reports__cover img { width: 100%; height: auto; object-fit: cover; display: block; }
.sphere-reports__insights { gap: 0; }
.sphere-insight { display: block; }
.sphere-insight__img { display: block; width: 100%; border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.sphere-insight__img img { width: 100%; height: auto; display: block; }
.sphere-insight__top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sphere-insight__tag { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 12px; padding: 5px 12px; border-radius: 40px; background: #F1F6FB; color: #0d1428; }
.sphere-insight__date { font-size: 12px; color: #354557; }
.sphere-insight__title { display: block; font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 18px; color: #0d1428; line-height: 1.35; }
.sphere-insight--media { padding-bottom: 22px; }
.sphere-insight--quote { padding-top: 20px; }
a.sphere-reports__cover { box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; }
.sphere-insight p { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 22px; color: #354557; line-height: 1.3; }
.sphere-insight:hover .sphere-insight__title, .sphere-insight:hover p { color: #5C6C80; }
.sphere-reports__more { text-align: center; margin-top: 42px; }
.sphere-reports__more a { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 15px; color: #ED1C24; text-decoration: underline; text-underline-offset: 4px; }


/* ==========================================================================
   SPOTLIGHT  (light, 3-up with big center)
   ========================================================================== */
.sphere-spotlight { padding: 70px 0; background: #ffffff; }
/* hidden per user — spotlight badge + overlaid body + carousel nav (markup kept for future) */
.sphere-spotlight .sphere-media-card__badge,
.sphere-spotlight .sphere-media-card__body,
.sphere-spotlight .sphere-carousel-nav { display: none !important; }
.sphere-spotlight__grid { display: grid; grid-template-columns: 310px 1fr 300px; gap: 40px; align-items: center; }
.sphere-spotlight__next { align-self: start; }
.sphere-spotlight__side { text-align: center; }
.sphere-episode-label { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #0d1428; margin-bottom: 36px; display: inline-block; padding: 6px 16px; background: #F1F6FB; border-radius: 64px; }
.sphere-spotlight__side h3 { font-family: 'Flecha M', Georgia, serif; font-weight: 500; font-size: 24px; color: #0d1428; line-height: 150%; margin-bottom: 30px !important; }
.sphere-spotlight__author { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: left; }
.sphere-spotlight__author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.sphere-spotlight__author span { font-size: 13px; color: #5b6c7f; }
.sphere-spotlight__author b { display: block; font-family: 'Graphik-Medium', sans-serif; font-weight: 500; color: #0d1428; font-size: 14px; }
.sphere-spotlight__speaker { display: flex; flex-direction: column; }
.sphere-spotlight__speaker b { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; color: #0d1428; font-size: 16px; line-height: 1.3; }
.sphere-spotlight__speaker em { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-style: normal; color: #539FF9; font-size: 13px; margin-top: 2px; }
.sphere-media-card { position: relative; border-radius: 20px; overflow: hidden; min-height: 320px; background: linear-gradient(135deg, #2a3a78, #b04a8f); display: flex; align-items: flex-end; color: #fff; }
.sphere-media-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.sphere-media-card__badge { position: absolute; top: 22px; left: 22px; background: rgba(13,20,40,.5); border-radius: 12px; padding: 10px 14px; font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.sphere-media-card__body { position: relative; padding: 26px; }
.sphere-media-card__body span { font-size: 14px; opacity: .85; }
.sphere-media-card__body h3 { font-family: 'Flecha M', Georgia, serif; font-weight: 500; font-size: 28px; }
.sphere-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 76px; height: 76px; border-radius: 50%; background: #0d1428; box-shadow: 0 14px 30px rgba(13,20,40,.28); display: flex; align-items: center; justify-content: center; }
.sphere-play svg { width: 24px; height: 24px; fill: #fff; margin-left: 4px; }
.sphere-spotlight__next .sphere-media-card { min-height: 0; margin-bottom: 16px; }
.sphere-spotlight__next .sphere-episode-label { margin-bottom: 28px; }
#sphere .sphere-spotlight__next .sphere-link-red { margin-top: 30px !important; margin-bottom: 48px; color: #ED1C24; }
#sphere .sphere-spotlight__next .sphere-link-red:hover { color: #5C6C80; }
.sphere-spotlight__next .sphere-media-card img { position: static; width: 100%; height: auto; opacity: 1; }
.sphere-spotlight__next .sphere-play { width: 52px; height: 52px; }
.sphere-spotlight__next .sphere-play svg { width: 18px; height: 18px; }
#sphere .sphere-link-red { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 16px; text-decoration: underline; text-underline-offset: 4px; color: #5C6C80; margin-top: 64px !important; display: inline-block; }
#sphere .sphere-link-red:hover { color: #5C6C80; }
.sphere-spotlight__next h4 { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 16px; color: #0d1428; line-height: 1.35; margin-top: 30px !important; margin-bottom: 14px; }
.sphere-spotlight__next h4 a { color: inherit; text-decoration: none; transition: color .2s ease; }
#sphere .sphere-spotlight__next h4 a:hover { color: #5C6C80; }

/* ==========================================================================
   PODCAST  (light, carousel)
   ========================================================================== */
.sphere-podcast { padding: 70px 0; background: #fff; margin: 50px 0; }
.sphere-podcast .sphere-wrap { border-radius: 40px; background: linear-gradient(0deg, rgba(241, 246, 251, 0.70) 0%, rgba(241, 246, 251, 0.70) 100%), #FFF; padding: 40px 43px; }
.sphere-podcast__grid { display: grid; grid-template-columns: 1fr 1.55fr; gap: 48px; align-items: center; }
.sphere-podcast__lead h3 { font-family: 'Flecha M', Georgia, serif; font-weight: 500; font-size: 32px; color: #0d1428; line-height: 1.18; margin-bottom: 14px; }
.sphere-podcast__lead p { font-family: 'Graphik-Regular', sans-serif; font-size: 16px; color: #5b6c7f; line-height: 1.55; margin-bottom: 28px; }
.sphere-podcast__minis { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 60px; }
.sphere-podcast__mini { display: block; }
.sphere-podcast__mini-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sphere-pill { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 12px; padding: 5px 14px; border-radius: 64px; background: #fff; color: #0d1428; }
.sphere-podcast__mini-cat { font-family: 'Graphik-Regular', sans-serif; font-size: 13px; color: #5b6c7f; }
.sphere-podcast__mini h5 { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 16px; color: #0d1428; line-height: 1.4; }
/* media = the podcast feature image (composite) + play overlay + vinyl peeking on the right; whole card links to the episode */
.sphere-podcast__media { position: relative; }
.sphere-podcast__cover { display: block; width: 82%; aspect-ratio: 592 / 370; border-radius: 22px; object-fit: cover; position: relative; z-index: 2; transition: box-shadow .25s ease; }
.sphere-podcast__vinyl { position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 86%; width: auto; z-index: 1; }
.sphere-podcast__media:hover .sphere-podcast__cover { box-shadow: 0 16px 36px rgba(13,20,40,.18); }
.sphere-podcast__media .sphere-play { left: 41%; z-index: 3; }
.sphere-carousel-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 36px; }
.sphere-carousel-nav button { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; cursor: pointer; font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #0d1428; }
.sphere-carousel-nav svg { width: 26px; height: 14px; }
.sphere-dots { display: flex; gap: 8px; align-items: center; }
.sphere-dots span { width: 8px; height: 8px; border-radius: 50%; background: #cdd7e2; cursor: pointer; }
.sphere-dots span.is-active { width: 22px; border-radius: 6px; background: #0d1428; }

/* Podcast carousel — swap PREV/NEXT arrows to the standard uploaded SVGs.
   CSS-only (page markup keeps its inline <svg>): hide it, inject via pseudo-elements.
   Scoped to .sphere-podcast only. */
.sphere-podcast .sphere-carousel-nav svg { display: none; }
.sphere-podcast .sphere-carousel-nav [data-sphere-prev]::before,
.sphere-podcast .sphere-carousel-nav [data-sphere-next]::after { content: ""; flex: 0 0 auto; display: inline-block; width: 39px; height: 20px; background-position: center; background-repeat: no-repeat; background-size: contain; }
.sphere-podcast .sphere-carousel-nav [data-sphere-prev]::before { background-image: url("/wp-content/uploads/pre-left-arrow.svg"); }
.sphere-podcast .sphere-carousel-nav [data-sphere-next]::after  { background-image: url("/wp-content/uploads/next-arrow-right.svg"); }

/* slider slides */
[data-sphere-slider] .sphere-slide { display: none; }
[data-sphere-slider] .sphere-slide.is-active { display: block; animation: sphereFade .4s ease; }
@keyframes sphereFade { from { opacity: 0; } to { opacity: 1; } }
body.sphere-noscroll { overflow: hidden; }

/* ==========================================================================
   EXPLORE EVENTS
   ========================================================================== */
.sphere-events { padding: 64px 0; }
.sphere-events__grid { display: grid; grid-template-columns: 0.9fr repeat(3, 1fr); gap: 26px; align-items: start; }
.sphere-events__intro h4 { color: #F24348; font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 16px; margin-bottom: 12px; padding-bottom: 16px; }
.sphere-events__intro p { font-size: 15px; color: #5b6c7f; margin-bottom: 20px; }
.sphere-event-card { display: flex; flex-direction: column; }
.sphere-event-card__img { display: block; position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: #0d1428; margin-bottom: 14px; }
.sphere-event-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sphere-event-card__badges { display: flex; gap: 8px; margin: 0 0 12px; }
.sphere-event-card__title { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 17px; color: #0d1428; margin: 0 0 12px; }
.sphere-event-card__meta { display: flex; gap: 18px; font-size: 13px; color: #5b6c7f; }
.sphere-event-card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.sphere-event-card__meta svg { width: 14px; height: 14px; stroke: #539FF9; }
.sphere-event-card__badges .sphere-tag--red { background: #F24348 !important; color: #ffffff !important; }
.sphere-event-card__badges .sphere-tag--light { background: transparent !important; color: #5b6c7f !important; padding: 5px 2px; }

/* ==========================================================================
   STATIC #1 — VOICE FROM THE SPHERE + COMMUNITY CTA
   ========================================================================== */
.sphere-voices { padding: 64px 0 30px; }
.sphere-voices .sphere-lines--head { margin-top: 20px; }
.sphere-voices__sub { text-align: center; color: #5b6c7f; font-size: 15px; margin-top: 14px !important; margin-bottom: 48px !important; }
.sphere-voices__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 22px; }
.sphere-voices__grid + .sphere-voices__grid { margin-top: 22px; }
.sphere-voice-video { position: relative; border-radius: 16px; overflow: hidden; min-height: 240px; background: #0d1428; display: flex; align-items: flex-end; color: #fff; }
.sphere-voice-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.sphere-voice-video::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(to top, rgba(13,20,40,.82), rgba(13,20,40,0)); z-index: 1; pointer-events: none; }
.sphere-voice-video .sphere-play { z-index: 3; }
.sphere-voice-video__body { position: relative; z-index: 2; padding: 22px; color: #fff; }
.sphere-voice-video__body b { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 16px; }
.sphere-voice-video__body span { display: block; font-size: 13px; opacity: .8; }
.sphere-quote-card { background: #fff; border: 1px solid #e6ecf3; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; }
.sphere-quote-card__logo { height: 22px; margin-bottom: 14px; }
.sphere-quote-card__logo img { height: 100%; width: auto; }
.sphere-quote-card p { font-size: 14px; color: #354557; line-height: 1.5; margin-bottom: 16px; }
.sphere-quote-card b { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; color: #0d1428; font-size: 15px; }
.sphere-quote-card small { color: #91a1b4; font-size: 12px; }
.sphere-quote-card__player { margin-top: auto; display: flex; align-items: center; gap: 8px; padding-top: 14px; }
.sphere-quote-card__player .bar { flex: 1; height: 4px; border-radius: 4px; background: #e6ecf3; position: relative; }
.sphere-quote-card__player .bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 60%; background: #ED1C24; border-radius: 4px; }

/* --- Voice cards (Figma) --- */
.sphere-voices__grid--b { grid-template-columns: 1fr 1.4fr 1fr; }
.sphere-voice-video { min-height: 348px; text-decoration: none; cursor: pointer; }
.sphere-quote-card--audio { text-decoration: none; cursor: pointer; }
.sphere-quote-card__logo { display: block; height: auto; margin-bottom: 16px; }
.sphere-quote-card__logo img { height: 26px; width: auto; }
.sphere-quote-card__logo--nium img { height: 30px; }
.sphere-quote-card__author { display: block; margin-top: 18px; }
.sphere-quote-card:not(.sphere-quote-card--audio) .sphere-quote-card__author { margin-top: auto; }
.sphere-quote-card__author b { display: block; font-family: 'Graphik-Medium', sans-serif; font-weight: 500; color: #0d1428; font-size: 15px; }
.sphere-quote-card__author small { display: block; color: #91a1b4; font-size: 12px; margin-top: 2px; }
.sphere-quote-card__listen { display: block; margin-top: auto; padding-top: 18px; font-size: 14px; color: #5b6c7f; }
.sphere-audiobar { display: flex; align-items: center; gap: 10px; margin-top: 12px; background: #f4f6f9; border: 1px solid #e6ecf3; border-radius: 40px; padding: 8px 14px; color: #5b6c7f; }
.sphere-audiobar__play svg { width: 13px; height: 13px; fill: #0d1428; display: block; }
.sphere-audiobar__time { font-size: 11px; white-space: nowrap; }
.sphere-audiobar__track { flex: 1; height: 4px; border-radius: 4px; background: #d7e0e9; position: relative; }
.sphere-audiobar__track i { position: absolute; left: 0; top: 0; bottom: 0; width: 22%; background: #ED1C24; border-radius: 4px; }
.sphere-audiobar__vol svg, .sphere-audiobar__dots svg { width: 15px; height: 15px; display: block; }

/* --- Voice media popups (video + audio) --- */
.sphere-vmodal, .sphere-amodal { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: 40px 30px; }
.sphere-vmodal.is-open, .sphere-amodal.is-open { display: flex; }
.sphere-vmodal__backdrop, .sphere-amodal__backdrop { position: absolute; inset: 0; background: rgba(247,249,252,.72); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
.sphere-vmodal__close, .sphere-amodal__close { position: fixed; top: 22px; right: 30px; width: 46px; height: 46px; border: 0; background: transparent; color: #0d1428; cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center; }
.sphere-vmodal__close svg, .sphere-amodal__close svg { width: 28px; height: 28px; }
.sphere-vmodal__dialog { position: relative; width: min(900px, 92vw); z-index: 2; }
.sphere-vmodal__frame { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16/9; background: #0d1428; box-shadow: 0 30px 80px rgba(13,20,40,.35); border-bottom: 3px solid #ED1C24; }
.sphere-vmodal__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sphere-vmodal__frame .sphere-play { z-index: 3; }
.sphere-vmodal__meta { position: absolute; left: 28px; bottom: 26px; color: #fff; z-index: 2; text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.sphere-vmodal__meta b { display: block; font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 20px; letter-spacing: .02em; }
.sphere-vmodal__meta span { font-size: 14px; opacity: .92; }
.sphere-vmodal.is-playing .sphere-vmodal__play, .sphere-vmodal.is-playing .sphere-vmodal__meta { opacity: 0; pointer-events: none; }
.sphere-amodal__dialog { position: relative; width: min(760px, 94vw); text-align: center; z-index: 2; }
.sphere-amodal__logo { height: 32px; width: auto; margin: 0 auto 22px; }
.sphere-amodal__quote { font-family: 'Graphik-Regular', sans-serif; font-size: 20px; color: #5b6c7f; margin: 0 auto 20px; max-width: 560px; line-height: 1.4; }
.sphere-amodal__wave { margin: 0 auto 22px; max-width: 640px; }
.sphere-amodal__wave svg { width: 100%; height: 170px; display: block; overflow: visible; }
/* audio popup — waveform "plays" while the audio is playing */
@keyframes sphere-wave-pulse { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1.08); } }
@keyframes sphere-wave-flow { 0% { transform: translateX(-10px); } 50% { transform: translateX(10px); } 100% { transform: translateX(-10px); } }
.sphere-amodal__wave path { transform-box: fill-box; transform-origin: center; }
.sphere-amodal.is-playing .sphere-amodal__wave g { animation: sphere-wave-flow 3.4s ease-in-out infinite; }
.sphere-amodal.is-playing .sphere-amodal__wave path { animation: sphere-wave-pulse 1.1s ease-in-out infinite; }
.sphere-amodal.is-playing .sphere-amodal__wave path:nth-child(2) { animation-duration: .85s; animation-delay: .10s; }
.sphere-amodal.is-playing .sphere-amodal__wave path:nth-child(3) { animation-duration: 1.35s; animation-delay: .22s; }
.sphere-amodal.is-playing .sphere-amodal__wave path:nth-child(4) { animation-duration: .95s; animation-delay: .33s; }
@media (prefers-reduced-motion: reduce) { .sphere-amodal.is-playing .sphere-amodal__wave g, .sphere-amodal.is-playing .sphere-amodal__wave path { animation: none; } }
.sphere-amodal__audio { width: 100%; max-width: 640px; margin: 0 auto 26px; display: block; }
.sphere-amodal__author { display: inline-flex; align-items: center; gap: 14px; text-align: left; }
.sphere-amodal__avatar { width: 46px; height: 46px; border-radius: 50%; background: #d7e0e9; flex: 0 0 auto; }
.sphere-amodal__author b { display: block; font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 16px; color: #0d1428; }
.sphere-amodal__author small { font-size: 13px; color: #5b6c7f; }
.sphere-noscroll { overflow: hidden; }

.sphere-community { position: relative; overflow: hidden; margin: 92px 0 30px 0; background: #0D1428; border-radius: 8px; padding: 3px 44px 0px 113px; display: flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 434px; }
.sphere-community::before { content: ''; position: absolute; left: 0; top: 0; width: 172px; height: 100%; border-radius: 0 60% 60% 0; background: rgba(255,255,255,.05); pointer-events: none; z-index: 0; }
.sphere-community__text { position: relative; z-index: 2; max-width: 520px; }
.sphere-community h2 { font-family: 'Flecha M', Georgia, serif; font-weight: 500; font-size: 48px; line-height: 1.22; color: #F1F6FB; margin: 0 0 40px !important; }
.sphere-community__art { position: relative; z-index: 2; flex: 0 0 auto; width: min(600px, 52%); top: 17px; }
.sphere-community__art img { width: 100%; height: auto; }

/* ==========================================================================
   STATIC #2 — HOW SHUFTI SPHERE MOVES CONVERSATIONS FORWARD (dark)
   ========================================================================== */
.sphere-moves { background: #ffffff; color: #0d1428; padding: 70px 0; }
.sphere-moves .sphere-section__head h2 { color: #0d1428; }
.sphere-moves__grid { display: grid; grid-template-columns: 396px 1fr; gap: 48px; align-items: start; }
/* LEFT = ONE sticky image, pinned; JS swaps it to the active card's image (no pile/overlap). */
.sphere-moves__feature { position: sticky; top: 120px; align-self: start; }
.sphere-moves__feature-link { display: block; }
.sphere-moves__feature-img { display: block; width: 100%; border-radius: 12px; aspect-ratio: 429 / 477; object-fit: cover; transition: opacity .25s ease; }
/* RIGHT = cards sticky-STACK (overlap 30px pile). */
.sphere-moves__list { display: flex; flex-direction: column; gap: 30px; }
.sphere-move-card { position: sticky; }
.sphere-move-card:nth-child(1) { top: 120px; z-index: 1; }
.sphere-move-card:nth-child(2) { top: 150px; z-index: 2; }
.sphere-move-card:nth-child(3) { top: 180px; z-index: 3; }
.sphere-move-card:nth-child(4) { top: 210px; z-index: 4; }
.sphere-move-card:nth-child(5) { top: 240px; z-index: 5; }
.sphere-move-card { background: #fff; border-radius: 18px; padding: 26px; display: grid; grid-template-columns: 128px 1fr; gap: 26px; align-items: center; color: #0d1428; border: 1px solid transparent; box-shadow: 0 12px 34px rgba(13,20,40,.08); transition: box-shadow .35s ease, border-color .35s ease; }
.sphere-move-card.is-active { box-shadow: 0 18px 44px rgba(83,159,249,.20); border-color: rgba(83,159,249,.45); }
.sphere-move-card__img { display: block; width: 128px; aspect-ratio: unset; border-radius: 14px; overflow: hidden; background: #f1f6fb; }
.sphere-move-card__img img { /* width: 100%; height: 100%; object-fit: contain; */ display: block; }
.sphere-move-card__body { min-width: 0; }
.sphere-move-card__body h3 { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 20px; color: #0d1428; line-height: 1.3; }
.sphere-move-card__sub { display: block; color: #ED1C24; font-style: italic; font-size: 15px; margin: 6px 0 10px; }
.sphere-move-card__body p { font-size: 15px; color: #5b6c7f; line-height: 1.5; margin-bottom: 18px; }
.sphere-move-card__body .sphere-btn { padding: 13px 24px; }
#sphere .sphere-moves .sphere-btn.sphere-btn--dark { text-decoration: none; color: #fff; margin-top: 24px; border-radius: 24px; }

/* ==========================================================================
   STATIC #3 — INDUSTRY PARTNERSHIPS (flat card image + flat logos image)
   ========================================================================== */
.sphere-partners { padding: 30px 0 80px; }
.sphere-partners__inner { display: grid; grid-template-columns: 1fr 0.7fr; gap: 56px; align-items: center; border-radius: 16px; background: linear-gradient(0deg, #F1F6FB 0%, #F1F6FB 100%), #FFF; padding: 15px; }
.sphere-partners__card--flat { border-radius: 8px; overflow: hidden; background: #0d1428; }
.sphere-partners__full { display: block; width: 100%; height: auto; }
.sphere-partners__right p { font-size: 20px; color: #354557; line-height: 1.55; width: 79%; margin-bottom: 35px !important; display: inline-block; }
.sphere-partners__btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* ==========================================================================
   SUBSCRIBE MODAL
   ========================================================================== */
.sphere-modal { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 20px; }
.sphere-modal.is-open { display: flex; }
.sphere-modal__backdrop { position: absolute; inset: 0; background: rgba(13,20,40,.55); backdrop-filter: blur(3px); }
.sphere-modal__dialog { position: relative; background: #fff; border-radius: 20px; width: min(560px, 100%); padding: 48px 44px; text-align: center; box-shadow: 0 30px 80px rgba(13,20,40,.3); }
.sphere-modal__close { position: absolute; top: 20px; right: 22px; background: transparent; border: 0; font-size: 22px; color: #0d1428; cursor: pointer; line-height: 1; }
.sphere-modal__dialog h2 { font-family: 'Graphik-Medium', sans-serif; font-weight: 600; font-size: 34px; color: #0d1428; line-height: 1.2; margin-bottom: 14px; }
.sphere-modal__dialog p { font-size: 16px; color: #5b6c7f; margin-top: 24px; margin-bottom: 26px; line-height: 1.5; }
.sphere-modal .subscriber-form-div form { display: flex; gap: 0; align-items: center; background: #fff; border: 1px solid #d7e0e9; border-radius: 40px; padding: 7px 7px 7px 26px; max-width: 480px; margin: 0 auto; }
.sphere-modal input.email-new { flex: 1; border: 0; background: transparent; outline: none; font-family: 'Graphik-Regular', sans-serif; font-size: 16px; color: #0d1428; height: 46px; }
.sphere-modal input.email-new::placeholder { color: #91a1b4; }
.sphere-modal input#form-submit-subscribe { background: #0d1428; color: #fff !important; border: 0; border-radius: 40px; padding: 0 28px; height: 46px; font-family: 'Graphik-Medium', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.sphere-modal .error-border { box-shadow: none; }
.sphere-modal .error { display: block; margin-top: 8px; font-size: 12px; }
/* hub modal now uses CF7 89901 (.subscriber-form-div .wr-nlform) — neutralize the old hand-rolled form-pill for CF7 forms so the .wr-nlform <p> is the only pill (no double border) */
.sphere-modal .subscriber-form-div form.wpcf7-form { background: none; border: 0; padding: 0; display: block; }
/* CF7 newsletter form (id 89901) inside the search-page subscribe modal — pill layout.
   Reuses the .sphere-modal input.email-new / #form-submit-subscribe rules above. */
.sphere-modal .wr-nlform { max-width: 480px; margin: 0 auto; }
.sphere-modal .wr-nlform .wpcf7 { margin: 0; }
.sphere-modal .wr-nlform fieldset.hidden-fields-container { border: 0; margin: 0; padding: 0; }
.sphere-modal .wr-nlform .wpcf7-form p { margin: 0; display: flex; align-items: center; background: #fff; border: 1px solid #d7e0e9; border-radius: 40px; padding: 7px 7px 7px 26px; }
.sphere-modal .wr-nlform .wpcf7-form-control-wrap { flex: 1 1 auto; min-width: 0; display: block; }
.sphere-modal .wr-nlform input.email-new { flex: initial; width: 100%; }
.sphere-modal .wr-nlform input#form-submit-subscribe { flex: 0 0 auto; }
.sphere-modal .wr-nlform .wpcf7-spinner { position: absolute; margin-left: 10px; }
.sphere-modal .wr-nlform .wpcf7-response-output { margin: 14px 0 0 !important; padding: 9px 16px; border-radius: 8px; font-family: 'Graphik-Regular', sans-serif; font-size: 12.5px; line-height: 1.45; text-align: center; }
.sphere-modal .wr-nlform .wpcf7-not-valid-tip { display: block; margin: 7px 4px 0 24px; font-family: 'Graphik-Regular', sans-serif; font-size: 12px; color: #ED1C24; text-align: left; }
.sphere-modal .wr-nlform input.wpcf7-not-valid { border-color: #ED1C24 !important; }

/* ==========================================================================
   FOOTER  (dark) — Figma 1405 / 1441 / 1415
   ========================================================================== */
.sphere-footer { position: relative; overflow: hidden; background: #0d1428; color: #f1f6fb; font-family: 'Graphik-Regular', sans-serif; padding: 56px 0 40px; }
.sphere-footer__bg { position: absolute; left: -760px; bottom: -220px; width: 1400px; max-width: none; height: auto; pointer-events: none; user-select: none; z-index: 0; }
.sphere-footer__inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 0; }
@media (max-width: 1320px) { .sphere-footer__inner { padding: 0 24px; } }
.sphere-footer a { text-decoration: none; }

/* --- nav columns --- */
.sphere-footer__nav { display: flex; gap: 40px; padding-bottom: 44px; }
.sphere-footer__col { min-width: 0; }
.sphere-footer__col--products, .sphere-footer__col--solutions { flex: 0 0 358px; }
.sphere-footer__col--dev { flex: 0 0 184px; }
.sphere-footer__col--sphere { flex: 0 0 180px; margin-left: auto; }
.sphere-footer__col--products, .sphere-footer__col--solutions, .sphere-footer__col--dev { position: relative; }
.sphere-footer__col--products::after, .sphere-footer__col--solutions::after, .sphere-footer__col--dev::after { content: ""; position: absolute; top: 0; right: -20px; width: 1px; height: 100%; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 45%, rgba(255,255,255,0) 100%); }
.sphere-footer__subcols { display: flex; gap: 10px; }
.sphere-footer__subcol { flex: 1 1 0; min-width: 0; }
.sphere-footer__grp { margin-bottom: 26px; }
.sphere-footer__grp:last-child { margin-bottom: 0; }
.sphere-footer__col--dev .sphere-footer__grp + .sphere-footer__grp { margin-top: 30px; }

.sphere-footer__colhead, .sphere-footer__subhead { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 18px; line-height: 1.2; color: #f1f6fb; margin: 0 0 26px; }
.sphere-footer__subhead { margin: 0 0 20px; }
.sphere-footer__lbl { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: rgba(215, 224, 233, 0.60); margin: 0 0 16px; }
.sphere-footer__lnk { display: block; font-size: 14px; line-height: 1.35; color: #f1f6fb; margin-bottom: 13px; transition: color .2s ease; }
.sphere-footer__lnk:last-child { margin-bottom: 0; }
.sphere-footer__lnk:hover { color: #ED1C24; }
.sphere-footer__acc-ico { display: none; }

.sphere-footer__logo { display: inline-block; margin-bottom: 30px; }
.sphere-footer__logo img { width: 172px; height: auto; display: block; }
.sphere-footer__logo--mobile { display: none; }

/* --- offices + trustpilot --- */
.sphere-footer__meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; padding: 4px 0 0; }
.sphere-footer__flags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.sphere-footer__flags img { width: 40px; height: 40px; border-radius: 50%; padding: 4px; border: 1px solid transparent; box-sizing: border-box; object-fit: cover; display: block; cursor: pointer; transition: border-color .3s linear; }
.sphere-footer__flags img.active { border-color: #f95469; }
.sphere-footer__address { font-size: 14px; line-height: 1.6; color: #f1f6fb; margin: 0; min-height: 40px; }
.sphere-footer__address p { display: none; margin: 0; }
.sphere-footer__address p.active { display: block; }
.sphere-footer__tp { flex: 0 0 auto; min-width: 220px; text-align: right; }
.sphere-footer__tp .trustpilot-widget { min-height: 0; height: auto; }

/* --- socials + compliance badges --- */
.sphere-footer__badges { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 40px 0 34px; }
.sphere-footer__socials { display: flex; gap: 12px; flex: 0 0 auto; }
.sphere-footer__socials a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; transition: background .2s ease; }
.sphere-footer__socials a:hover { background: rgba(255,255,255,.18); }
.sphere-footer__socials svg { width: 16px; height: 16px; fill: #fff; }
.sphere-footer__certs { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.sphere-footer__certs a { display: inline-flex; align-items: center; }
.sphere-footer__certs img { height: 56px; width: auto; opacity: .9; filter: grayscale(1); transition: opacity .2s ease, filter .2s ease; }
.sphere-footer__certs a:hover img { opacity: 1; filter: grayscale(0); }

/* --- legal bar --- */
.sphere-footer__legalbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 26px; }
.sphere-footer__brand { display: flex; align-items: center; gap: 16px; }
.sphere-footer__brand img { height: 30px; width: auto; }
.sphere-footer__copyright { font-size: 16px; color: #5b6c7f; }
.sphere-footer__legal { display: flex; align-items: center; }
.sphere-footer__legal a { font-size: 14px; color: #f1f6fb; padding: 0 18px; transition: color .2s ease; }
.sphere-footer__legal a + a { border-left: 1px solid rgba(255,255,255,.22); }
.sphere-footer__legal a:last-child { padding-right: 0; }
.sphere-footer__legal a.is-active, .sphere-footer__legal a:hover { color: #539ff9; }

/* --- footer responsive --- */
@media (max-width: 1100px) {
  .sphere-footer__bg { display: none; }
  .sphere-footer__nav { flex-wrap: wrap; gap: 36px 24px; }
  .sphere-footer__col--products, .sphere-footer__col--solutions { flex: 1 1 46%; }
  .sphere-footer__col--dev, .sphere-footer__col--sphere { flex: 1 1 46%; margin-left: 0; }
  .sphere-footer__col--products::after, .sphere-footer__col--solutions::after, .sphere-footer__col--dev::after { display: none; }
}
@media (max-width: 760px) {
  .sphere-footer__inner { padding: 0 18px; }
  .sphere-footer__nav { flex-direction: column; gap: 0; }
  .sphere-footer__col--products, .sphere-footer__col--solutions, .sphere-footer__col--dev, .sphere-footer__col--sphere { flex: 1 1 100%; }
  /* --- mobile accordion (toggles) --- */
  .sphere-footer__acc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 15px 0; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.12); font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 16px; line-height: 1.3; letter-spacing: 0; text-transform: none; color: #f1f6fb; }
  .sphere-footer__acc-ico { display: block; flex: 0 0 auto; width: 9px; height: 9px; margin-right: 3px; border-right: 2px solid #cfd8e3; border-bottom: 2px solid #cfd8e3; transform: translateY(-2px) rotate(45deg); transition: transform .25s ease; }
  .sphere-footer__acc-head.is-open .sphere-footer__acc-ico { transform: translateY(2px) rotate(-135deg); }
  .sphere-footer__acc-body { display: none; padding: 8px 0 16px; }
  .sphere-footer__subcols { flex-direction: column; gap: 0; }
  .sphere-footer__grp { margin-bottom: 0; }
  .sphere-footer__col--dev .sphere-footer__grp + .sphere-footer__grp { margin-top: 0; }
  .sphere-footer__acc-body .sphere-footer__grp { margin-bottom: 22px; }
  .sphere-footer__col--sphere .sphere-footer__logo { display: none; }
  .sphere-footer__logo--mobile { display: inline-block; margin: 0 0 22px; }
  .sphere-footer__meta { flex-direction: column; gap: 22px; padding-top: 30px; }
  .sphere-footer__tp { text-align: left; min-width: 0; }
  .sphere-footer__badges { flex-direction: column; align-items: flex-start; gap: 26px; }
  .sphere-footer__certs { justify-content: flex-start; }
  .sphere-footer__legalbar { flex-direction: column; align-items: flex-start; gap: 18px; }
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .sphere-hero__layout { grid-template-columns: 1fr; }
  .sphere-hero__top { grid-template-columns: 1fr; }
  .sphere-hero__aside { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .sphere-hero__row { grid-template-columns: repeat(2, 1fr); }
  .sphere-reports__grid { grid-template-columns: 1fr 1fr; }
  .sphere-spotlight__grid { grid-template-columns: 1fr; }
  .sphere-events__grid { grid-template-columns: 1fr 1fr; }
  .sphere-blogs__grid { grid-template-columns: repeat(2, 1fr); }
  .sphere-mega__inner { grid-template-columns: 300px 1fr; }
  .sphere-mega__cards { grid-template-columns: repeat(2, 1fr); }
  .sphere-megapanel__cards { grid-template-columns: repeat(2, 1fr); }
  .sphere-moves__grid { grid-template-columns: 340px 1fr; gap: 32px; }
  .sphere-move-card { grid-template-columns: 112px 1fr; gap: 20px; padding: 22px; }
  .sphere-move-card__img { width: 112px; }
  .sphere-partners__inner, .sphere-podcast__grid { grid-template-columns: 1fr; }
  .sphere-community { padding: 48px; }
  .sphere-community h2 { font-size: 38px; }
  .sphere-footer__community-logos { width: auto; flex: 1; }
}
@media (max-width: 767px) {
  .sphere-moves__grid { grid-template-columns: 1fr; gap: 28px; }
  .sphere-moves__feature { position: static; }
  .sphere-move-card { position: static; }
  .sphere-moves__feature-img { max-width: 460px; margin: 0 auto; }
  .sphere-move-card { grid-template-columns: 96px 1fr; gap: 16px; padding: 18px; }
  .sphere-move-card__img { width: 96px; }
  .sphere-move-card__body h3 { font-size: 18px; }
}
@media (max-width: 760px) {
  .sphere-wrap { padding: 0 18px; }
  .sphere-header__top { padding: 14px 18px; }
  .sphere-header__brand { position: static; transform: none; align-items: flex-start; }
  .sphere-header__logo-img { height: 56px; }
  .sphere-header__cta { display: none; }
  .sphere-nav { display: none; }
  .sphere-header__compact { padding: 8px 16px; gap: 12px; }
  .sphere-header__compact .sphere-nav { display: none; }
  .sphere-hero__row { grid-template-columns: 1fr; }
  .sphere-hero__aside { grid-template-columns: 1fr; }
  .sphere-reports__grid, .sphere-blogs__grid, .sphere-events__grid, .sphere-voices__grid { grid-template-columns: 1fr; }
  .sphere-mega__inner, .sphere-megapanel__grid { grid-template-columns: 1fr; }
  .sphere-mega__cards { grid-template-columns: 1fr 1fr; }
  .sphere-megapanel__inner { padding: 70px 18px 36px; }
  .sphere-section__head h2 { font-size: 30px; }
  .sphere-hero__featured-title { font-size: 26px; }
  .sphere-community { flex-direction: column; text-align: center; align-items: center; padding: 40px 24px; min-height: 0; }
  .sphere-community__text { max-width: none; }
  .sphere-community__art { width: min(460px, 100%); }
  .sphere-partners__right p { width: 100%; }
  .sphere-footer__top { flex-wrap: wrap; }
  .sphere-footer__trust { text-align: left; }
  .sphere-footer__community { flex-direction: column; align-items: flex-start; gap: 24px; }
  .sphere-footer__community-logos { width: auto; flex-wrap: wrap; gap: 20px; justify-content: flex-start; }
  .sphere-modal__dialog { padding: 36px 24px; }
}

/* --- mobile responsive tuning (≤767px) --- */
@media (max-width: 767px) {
  .sphere-move-card__img { width: 100%; }
  .sphere-move-card { grid-template-columns: unset; }
  .sphere-podcast .sphere-wrap { padding: 43px 15px; }
  .sphere-podcast__lead h3 { font-size: 28px; }
  .sphere-podcast__minis { grid-template-columns: unset; }
  .sphere-section__head br { display: none; }
  .sphere-partners__right p { font-size: 18px; }
  .sphere-wrap { padding: 0 15px; }
  .sphere-reports__guides { display: grid; grid-template-columns: unset; }
  .sphere-reports__lead h3 { font-size: 24px; }
}

/* ==========================================================================
   SPHERE TOP BAR — "Dark Navigation" (Figma 4020:20336)
   A thin navy utility bar PINNED above the existing Sphere header.
   Nav links right-aligned; dropdowns = white panels with navy text (live
   shuftipro.com content, Sphere colour scheme). Existing header markup/JS
   untouched — only the two positioning rules marked [PIN OFFSET] adjust the
   existing compact header so it sits below this bar.
   Scoped: .sphere-topbar*   |   No CSS variables, no @font-face.
   ========================================================================== */
.sphere-topbar, .sphere-topbar * { box-sizing: border-box; }
.sphere-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1265; background: #0d1428; font-family: 'Graphik-Regular', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.sphere-topbar a { text-decoration: none; color: inherit; }
.sphere-topbar ul { margin: 0; padding: 0; list-style: none; }
.sphere-topbar__spacer { height: 40px; }                 /* pushes the page (Sphere header) down below the fixed bar */

/* [PIN OFFSET] the existing compact header slides in at top:40 so the dark bar stays visible above it */
.sphere-header.is-sticky .sphere-header__compact { top: 32px; }
/* [PIN OFFSET] hamburger mega-panel drops from below the pinned bar so its close (×) isn't clipped by the bar */
.sphere-megapanel__sheet { top: 32px; }

.sphere-topbar__inner { max-width: 1440px; margin: 0 auto; min-height: 32px; display: flex; align-items: center; justify-content: flex-end; gap: 40px; padding: 0 40px; }

/* ---- desktop nav (right-aligned links) ---- */
.sphere-topbar__list { display: flex; align-items: center; gap: 20px; }
.sphere-topbar__item { position: static; }
.sphere-topbar__link { display: inline-flex; align-items: center; gap: 6px; height: 32px; font-family: 'Graphik-Regular', sans-serif; font-weight: 400; font-size: 14px; color: #ffffff !important; cursor: pointer; transition: color .18s ease; }
.sphere-topbar__link:hover { color: #ffffff !important; }
/* bar-level text always white — also covers a de-linked top item (e.g. staging turns the /pricing/ <a> into <b>); child combinator keeps the white dropdown panels untouched */
.sphere-topbar__item > b, .sphere-topbar__item > strong { color: #ffffff !important; font-family: 'Graphik-Regular', sans-serif; font-weight: 400; font-size: 16px; }
.sphere-topbar__caret { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; transition: transform .22s ease; }
.sphere-topbar__item.is-open .sphere-topbar__caret { transform: rotate(180deg); }
.sphere-topbar__item.is-open .sphere-topbar__link { color: #ffffff !important; }

/* ---- mega dropdown (white panel, navy text) ---- */
.sphere-topbar__mega { position: fixed; left: 0; right: 0; top: 32px; background: #ffffff; box-shadow: 0 24px 48px rgba(13,20,40,.14); border-top: 1px solid #eef2f7; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s; z-index: 1264; }
.sphere-topbar__item.is-open .sphere-topbar__mega { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .28s ease, transform .28s ease, visibility 0s linear 0s; }
.sphere-topbar__mega-inner { max-width: 1440px; margin: 0 auto; padding: 44px 40px 48px; display: flex; align-items: flex-start; gap: 44px; }
.sphere-topbar__col { flex: 1 1 0; min-width: 0; }
.sphere-topbar__group + .sphere-topbar__group { margin-top: 30px; }
.sphere-topbar__col-head { display: flex; align-items: center; gap: 8px; font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #91a1b4; margin-bottom: 18px; }
.sphere-topbar__mlink { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: #354557; font-family: 'Graphik-Regular', sans-serif; font-size: 15px; line-height: 1.3; transition: color .16s ease; }
.sphere-topbar__mlink:hover { color: #0d1428; }
.sphere-topbar__micon { width: 22px; height: 22px; flex: 0 0 22px; object-fit: contain; }
.sphere-topbar__mlink span { min-width: 0; }
.sphere-topbar__new { display: inline-block; margin-left: 8px; background: #0d1428; color: #ffffff; font-family: 'Graphik-Medium', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 10px; vertical-align: middle; }
/* "New" divider — thin line with a centered pill (live style), placed before the first new item in a group */
.sphere-topbar__newdiv { position: relative; height: 0; border-top: 1px solid #e6ecf3; margin: 16px 0 20px; }
.sphere-topbar__newdiv .sphere-topbar__new { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); margin: 0; }

/* ---- promo card (Explore → iBeta) ---- */
.sphere-topbar__card { flex: 0 0 300px; border: 1px solid #e6ecf3; border-radius: 16px; padding: 18px; background: #ffffff; }
.sphere-topbar__card-img { width: 100%; height: auto; border-radius: 10px; display: block; margin-bottom: 16px; }
.sphere-topbar__card-title { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 18px; color: #0d1428; margin: 0 0 8px; }
.sphere-topbar__card-desc { font-family: 'Graphik-Regular', sans-serif; font-size: 14px; color: #5b6c7f; line-height: 1.5; margin: 0 0 16px; }
.sphere-topbar__card-cta { display: inline-flex; align-items: center; gap: 8px; font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 15px; color: #0d1428; }
.sphere-topbar__card-cta:hover { color: #ED1C24; }

/* ---- mobile toggle + panel (hidden on desktop) ---- */
.sphere-topbar__toggle { display: none; align-items: center; gap: 8px; height: 40px; background: transparent; border: 0; color: #ffffff !important; font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 15px; cursor: pointer; }
.sphere-topbar__toggle svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; }
.sphere-topbar__mobile { display: none; position: fixed; top: 40px; left: 0; right: 0; max-height: calc(100vh - 40px); overflow-y: auto; background: #ffffff; border-top: 1px solid #eef2f7; box-shadow: 0 24px 48px rgba(13,20,40,.16); z-index: 1264; }
.sphere-topbar__mobile.is-open { display: block; }
.sphere-topbar__acc { border-bottom: 1px solid #eef2f7; }
.sphere-topbar__acc-head { display: flex; align-items: center; justify-content: space-between; width: 100%; background: transparent; border: 0; padding: 16px 20px; font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 16px; color: #0d1428; cursor: pointer; text-align: left; }
.sphere-topbar__acc-head svg { width: 14px; height: 14px; stroke: #0d1428; stroke-width: 2; fill: none; transition: transform .22s ease; flex: 0 0 auto; }
.sphere-topbar__acc.is-open > .sphere-topbar__acc-head svg { transform: rotate(180deg); }
.sphere-topbar__acc-body { display: none; padding: 0 20px 14px; }
.sphere-topbar__acc.is-open > .sphere-topbar__acc-body { display: block; }
.sphere-topbar__acc-group { margin-top: 10px; }
.sphere-topbar__acc-group > .sphere-topbar__col-head { margin-bottom: 10px; }
.sphere-topbar__mobile .sphere-topbar__mlink { padding: 9px 0; }

@media (max-width: 1024px) {
  .sphere-topbar__inner { justify-content: flex-end; padding: 0 18px; }
  .sphere-topbar__list { display: none; }
  .sphere-topbar__mega { display: none; }
  .sphere-topbar__toggle { display: inline-flex; }
}
@media (max-width: 760px) {
  .sphere-topbar__mega-inner { flex-wrap: wrap; gap: 28px 40px; }
  /* [PIN OFFSET] mobile: clear the hamburger panel's close (×) from the first nav tab
     (theme CSS suppresses the panel's own top padding, so force it here) */
  .sphere-header .sphere-megapanel__inner { padding-top: 88px !important; }
  .sphere-header .sphere-megapanel__close { top: 16px !important; right: 16px !important; z-index: 10; }
}

/* ==========================================================================
   SPHERE SEARCH POPUP — Figma 4020:9805 (powered by Ajax Search Pro id=26)
   Full-screen frosted overlay (page blurs behind); search box ~80vw, centred.
   ========================================================================== */
.sphere-search { position: fixed; inset: 0; z-index: 1350; background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.sphere-search.is-open { opacity: 1; visibility: visible; }
.sphere-search__inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: safe center; padding: 56px 40px; overflow-y: auto; transform: translateY(-12px); transition: transform .3s cubic-bezier(.4,0,.2,1); }
.sphere-search.is-open .sphere-search__inner { transform: translateY(0); }
.sphere-search__close { position: absolute; top: 30px; right: 44px; width: 40px; height: 40px; border: 0; background: transparent; color: #0d1428; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity .2s ease; z-index: 2; }
.sphere-search__close:hover { opacity: .55; }
.sphere-search__close svg { width: 26px; height: 26px; }
.sphere-search__box { width: 60vw; max-width: none; margin: 0; }
.sphere-search__box .asp_w_container { width: 100% !important; max-width: none !important; }
@media (max-width: 767px) { .sphere-search__box { width: 93vw; } }
/* search results → Shufti Sphere theme fonts + colours (only affects instance 26 on this page) */
a.asp_res_url { font-family: 'Graphik-Medium', sans-serif !important; font-weight: 500; font-size: 16px !important; color: #0d1428 !important; line-height: 21px !important; }
.asp_r_35 .results .item div.asp_content { font-family: 'Graphik-Regular', sans-serif !important; color: #5b6c7f !important; }
/* results container border → subtle light instead of the heavy 2px dark default */
#ajaxsearchprores35_1.vertical, #ajaxsearchprores35_2.vertical, div.asp_r.asp_r_35.vertical { border: 1px solid #05050521 !important; }

/* ==========================================================================
   SPHERE MOBILE MENU — Figma 4164:26311 (combined menu; shown only <=1024px)
   Opens from the header hamburger on mobile. Desktop (>1024) untouched.
   ========================================================================== */
.sphere-mmenu, .sphere-mmenu * { box-sizing: border-box; }
.sphere-mmenu { position: fixed; inset: 0; z-index: 1360; background: #ffffff; opacity: 0; visibility: hidden; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: opacity .25s ease, visibility .25s ease; }
.sphere-mmenu.is-open { opacity: 1; visibility: visible; }
.sphere-mmenu__panel { display: block; width: 100%; max-width: 100%; padding: 18px 22px 36px; }
.sphere-mmenu__body { width: 100%; min-width: 0; }
.sphere-mmenu__search, .sphere-mmenu__acc, .sphere-mmenu__nav, .sphere-mmenu__chips, .sphere-mmenu__cta { width: 100%; min-width: 0; max-width: 100%; }
.sphere-mmenu__search-ph { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.sphere-mmenu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.sphere-mmenu__brand img { height: 42px; width: auto; display: block; }
.sphere-mmenu__close { width: 34px; height: 34px; border: 0; background: transparent; color: #0d1428; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sphere-mmenu__close svg { width: 24px; height: 24px; }
.sphere-mmenu__search { display: flex; align-items: center; justify-content: space-between; width: 100%; background: #f1f6fb; border: 1px solid #e6ecf3; border-radius: 40px; padding: 6px 6px 6px 20px; margin-bottom: 8px; cursor: pointer; }
.sphere-mmenu__search-ph { display: inline-flex; align-items: center; gap: 10px; color: #91a1b4; font-family: 'Graphik-Regular', sans-serif; font-size: 16px; }
.sphere-mmenu__search-ph svg { width: 18px; height: 18px; stroke: #91a1b4; fill: none; stroke-width: 2; }
.sphere-mmenu__search-go { flex: 0 0 auto; display: inline-flex; align-items: center; background: #0d1428; color: #fff; font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 15px; padding: 11px 22px; border-radius: 40px; white-space: nowrap; }
.sphere-mmenu__acc { border-top: 1px solid #eef2f7; margin-top: 18px; }
.sphere-mmenu__acc-item { border-bottom: 1px solid #eef2f7; }
.sphere-mmenu__acc-head { display: flex; align-items: center; justify-content: space-between; width: 100%; background: transparent; border: 0; padding: 16px 0; font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 20px; color: #0d1428; cursor: pointer; text-align: left; text-decoration: none; }
.sphere-mmenu__arrow { width: 20px; height: 20px; flex: 0 0 auto; color: #0d1428; transition: transform .25s ease; }
.sphere-mmenu__acc-item.is-open .sphere-mmenu__arrow { transform: rotate(90deg); }
.sphere-mmenu__acc-body { display: none; padding: 0 0 16px; }
.sphere-mmenu__acc-item.is-open .sphere-mmenu__acc-body { display: block; }
.sphere-mmenu__grouphead { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #91a1b4; margin: 14px 0 8px; }
.sphere-mmenu__sublink { display: flex; align-items: center; gap: 12px; padding: 9px 0; color: #354557; font-family: 'Graphik-Regular', sans-serif; font-size: 15px; text-decoration: none; }
.sphere-mmenu__sublink img { width: 20px; height: 20px; object-fit: contain; flex: 0 0 20px; }
.sphere-mmenu__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; padding: 26px 0; border-bottom: 1px dashed #dfe6ee; }
.sphere-mmenu__navlink { color: #0d1428; font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 18px; text-decoration: none; }
.sphere-mmenu__chips { display: flex; flex-wrap: wrap; gap: 12px; padding: 24px 0; border-bottom: 1px dashed #dfe6ee; }
.sphere-mmenu__chip { background: #f1f6fb; border-radius: 8px; padding: 10px 16px; color: #0d1428; font-family: 'Graphik-Regular', sans-serif; font-size: 14px; text-decoration: none; }
.sphere-mmenu__cta { display: flex; gap: 14px; padding: 26px 0 0; }
.sphere-mmenu__btn { display: inline-flex; align-items: center; justify-content: center; height: 51px; padding: 0 22px; border-radius: 6px; font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 16px; text-decoration: none; }
.sphere-mmenu__btn--navy { background: #0d1428; color: #ffffff; flex: 1 1 0; min-width: 0; }
.sphere-mmenu__btn--yellow { background: #FAD92B; color: #0d1428; flex: 0 0 auto; }
.sphere-mmenu__signup { display: block; text-align: center; padding: 22px 0 0; color: #0d1428; font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 16px; text-decoration: none; }
@media (min-width: 1025px) { .sphere-mmenu { display: none !important; } }

/* ---- mobile (<=1024px): hide the pinned dark bar + inline nav + header CTA;
        the hamburger now opens the combined .sphere-mmenu (desktop untouched) ---- */
@media (max-width: 1024px) {
  .sphere-topbar, .sphere-topbar__spacer { display: none !important; }
  .sphere-header.is-sticky .sphere-header__compact { top: 0 !important; }
  /* inner pages: the compact bar is always shown — on mobile the dark bar is hidden, so pin it to the very top (no 33px offset) */
  body:not(.page-template-page-shufti-sphere-php):not(.page-shufti-sphere) .sphere-header__compact { transform: translateY(0); opacity: 1; pointer-events: auto; top: 0 !important; }
  .sphere-nav { display: none !important; }
  .sphere-header__cta, .sphere-header__signup, .sphere-header__cta-group { display: none !important; }
}

/* ============================================================
   Reports & Insights — ported from /podcast/ (pod-reports).
   Vars defined on #sphere so the pod rules resolve; fonts (Flecha M /
   Graphik) already loaded by the theme.
   ============================================================ */
#sphere { --navy:#0D1428; --slate:#354557; --muted:#5B6C7F; --light:#F1F6FB; --line:#E4EBF2; --border:#D7E0E9; --yellow:#FAD92B; --red:#F24348; --blue:#539FF9; }
#sphere .pod-reports a { text-decoration: none; color: inherit; }
#sphere .pod-reports img { display: block; max-width: 100%; }
.pod-sec{ margin-top:96px; }
.pod-reports{ margin-bottom:100px; }
.pod-h2{ font-family:'Flecha M',Georgia,'Times New Roman',serif; font-weight:500; font-size:44px; line-height:1.25; color:var(--navy); text-align:center; margin:0 0 48px !important; }
.pod-ph{ display:block; width:100%; height:100%; background:linear-gradient(135deg,#e9eef4,#d7e0e9); }
.pod-tag{ display:inline-flex; align-items:center; align-self:flex-start; font-family:'Graphik-Medium',sans-serif; font-weight:500; font-size:12px; line-height:1; letter-spacing:.01em; color:var(--navy); background:var(--light); border-radius:64px; padding:7px 14px; }
.pod-reports__grid{ display:grid; grid-template-columns:minmax(0,530fr) minmax(0,378fr) 300px; gap:48px; align-items:start; }
.pod-reports__left{ display:flex; flex-direction:column; }
.pod-reports__lead{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.pod-reports__lead-title{ font-family:'Flecha M',Georgia,serif; font-weight:500; font-size:32px; line-height:1.22; color:var(--navy); margin:0; transition:color .2s ease; }
.pod-reports__lead:hover .pod-reports__lead-title{ color:#5C6C80; }
.pod-dash{ display:block; margin:28px 0; }
.pod-dash i{ display:block; height:0; border-top:1px dashed #C7D2DE; }
.pod-dash i + i{ margin-top:5px; }
.pod-reports__guides{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.pod-guide-cell{ display:flex; flex-direction:column; }
.pod-guide{ display:flex; flex-direction:column; gap:14px; }
.pod-guide__media{ display:block; border-radius:14px; overflow:hidden; aspect-ratio:247/150; background:var(--navy); }
.pod-guide__media img{ width:100%; height:100%; object-fit:cover; object-position:right bottom; }
.pod-guide__type{ display:inline-flex; align-items:center; align-self:flex-start; font-family:'Graphik-Medium',sans-serif; font-weight:500; font-size:12px; line-height:1; letter-spacing:.01em; color:var(--navy); background:var(--light); border-radius:64px; padding:7px 14px; text-transform:capitalize; }
.pod-guide__title{ font-family:'Graphik-Medium',sans-serif; font-weight:600; font-size:16px; line-height:1.3; color:var(--navy); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; transition:color .2s ease; }
.pod-guide:hover .pod-guide__title{ color:#5C6C80; }
.pod-reports__cover{ display:block; border-radius:20px; overflow:hidden; background:#EAEFF5; border:1px solid #5b6c7f0a; transition:background .3s ease, border-color .3s ease; }
.pod-reports__cover:hover{ background:transparent; border-color:transparent; }
.pod-reports__cover img{ display:block; width:100%; height:auto; transition:transform .3s ease; }
.pod-reports__cover:hover img{ transform:scale(1.03); }
.pod-reports__right{ display:flex; flex-direction:column; }
.pod-rcard{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.pod-rcard__media{ display:block; width:100%; border-radius:14px; overflow:hidden; aspect-ratio:300/168; background:var(--navy); }
.pod-rcard__media img{ width:100%; height:100%; object-fit:cover; object-position:right top; }
.pod-rcard__top{ display:flex; align-items:center; gap:12px; }
.pod-rcard__date{ font-family:'Graphik-Medium',sans-serif; font-weight:500; font-size:13px; color:var(--muted); }
.pod-rcard__title{ font-family:'Graphik-Medium'; font-weight:500; font-size:18px; line-height:1.3; color:var(--slate); transition:color .2s ease; }
.pod-rcard:hover .pod-rcard__title{ color:#5C6C80; }
.pod-ritem{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.pod-ritem__title{ font-family:'Graphik-Medium'; font-weight:500; font-size:18px; line-height:1.3; color:var(--slate); transition:color .2s ease; }
.pod-ritem:hover .pod-ritem__title{ color:#5C6C80; }
@media (max-width:1100px){
  .pod-h2{ font-size:36px; }
  .pod-reports__grid{ grid-template-columns:1fr 1fr; }
  .pod-reports__cover{ grid-row:1 / 3; grid-column:2; align-self:start; }
  .pod-reports__right{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:start; }
}
@media (max-width:760px){
  .pod-sec{ margin-top:64px; }
  .pod-h2{ font-size:30px; margin-bottom:32px; }
  .pod-reports__grid{ grid-template-columns:1fr; }
  .pod-reports__cover{ grid-row:auto; grid-column:auto; }
  .pod-reports__right{ grid-template-columns:1fr; }
}
@media (max-width:460px){
  .pod-reports__guides{ grid-template-columns:1fr; }
  .pod-reports__right{ grid-template-columns:1fr; }
}

/* Section "Explore all …" CTAs (News / Blogs / Reports) — centered red links w/ hover */
.sphere-explore { text-align: center; margin: 40px 0 8px; }
#sphere .sphere-explore a { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 16px; text-decoration: underline; text-underline-offset: 4px; color: #ED1C24; display: inline-block; transition: color .2s ease; }
#sphere .sphere-explore a:hover { color: #5C6C80; }

/* Author chip on landing article cards (news + blogs) — red avatar (real photo, else initial) + name; mirrors blog/news pages' .bx-author */
.sphere-author { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; position: relative; z-index: 2; text-decoration: none; }
#sphere a.sphere-author { cursor: pointer; }
#sphere a.sphere-author:hover .sphere-author__name { color: #0d1428; }
.sphere-author__ava { position: relative; width: 32px; height: 32px; border-radius: 50%; background: #F24348; flex: 0 0 auto; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sphere-author__ini { color: #fff; font-family: 'Graphik-Medium', sans-serif; font-weight: 600; font-size: 15px; line-height: 1; text-transform: uppercase; }
.sphere-author__ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sphere-author__name { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 14px; line-height: 1.35; color: #354557; }

/* ==========================================================================
   Search results page (Figma 4020:9217)  +  popup "Featured Topics" chips
   Scoped .sphere-sr* / .sphere-search__featured*. Literal hex, Graphik/Flecha.
   ========================================================================== */
.sphere-sr { padding: 44px 0 90px; background: #ffffff; }
.sphere-sr__layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 300px;
  grid-template-areas:
    "head   search search"
    "promo  types  right"
    "promo  count  right"
    "promo  grid   right"
    "promo  more   right"
    "promo  .      right";
  /* last row = 1fr filler: absorbs the tall sidebars' extra height so the center
     rows (incl. the "No results found" message) stay pinned just under the search
     bar instead of being pushed way down when there are few/no results. */
  grid-template-rows: auto auto auto auto auto 1fr;
  column-gap: 40px;
  align-items: start;
}
.sphere-sr__head  { grid-area: head; }
.sphere-sr__promo { grid-area: promo; position: sticky; top: 108px; align-self: start; margin-top: 30px; }
.sphere-sr__form  { grid-area: search; }
.sphere-sr__types { grid-area: types; margin-top: 24px; }
.sphere-sr__count { grid-area: count; margin-top: 16px; }
.sphere-sr__grid  { grid-area: grid; margin-top: 16px; }
.sphere-sr__more-wrap { grid-area: more; margin-top: 48px; display: flex; justify-content: center; }
.sphere-sr__right { grid-area: right; position: sticky; top: 108px; align-self: start; }

/* left heading (top-aligned with the search bar) */
.sphere-sr__h1  { font-family: 'Flecha M', Georgia, serif; font-weight: 500; font-size: 24px; line-height: 31px; color: #0d1428; margin: 0 0 6px; }
.sphere-sr__sub { font-family: 'Graphik-Regular', sans-serif; font-size: 16px; line-height: 24px; color: #5c6c80; margin: 0; }

/* community promo card (left, sticky) */
.sphere-sr__promo { border: 1px solid #eef2f6; border-radius: 16px; background: #ffffff; overflow: hidden; box-shadow: 0 2px 14px rgba(13, 20, 40, .05); }
.sphere-sr__promo-img { display: block; height: 172px; margin: 18px 18px 0; border-radius: 12px; background: #0d1428 url('/wp-content/uploads/news-bring-your-voice.png') center center / cover no-repeat; }
.sphere-sr__promo-body { padding: 20px; text-align: center; }
.sphere-sr__promo-h { font-family: 'Graphik-Medium', sans-serif; font-weight: 600; font-size: 18px; line-height: 27px; color: #0d1428; margin: 0 0 8px; }
.sphere-sr__promo-p { font-family: 'Graphik-Regular', sans-serif; font-size: 15px; line-height: 22px; color: #354557; margin: 0 0 20px; }
.sphere-sr__promo-btn { display: flex; width: 100%; box-sizing: border-box; align-items: center; justify-content: center; padding: 19px 24px; border-radius: 64px; background: #fad92b; color: #0d1428; font-family: 'Graphik-Medium', sans-serif; font-size: 15px; text-decoration: none; transition: filter .15s ease; }
.sphere-sr__promo-btn:hover { filter: brightness(.95); }

/* search bar */
.sphere-sr__form { display: flex; align-items: center; gap: 10px; background: #ffffff; border: 1px solid #d7e0e9; border-radius: 40px; padding: 8px 8px 8px 22px; min-height: 56px; box-sizing: border-box; }
.sphere-sr__form-ic { flex: 0 0 auto; width: 22px; height: 22px; color: #0d1428; display: flex; }
.sphere-sr__form-ic svg { width: 22px; height: 22px; }
.sphere-sr__input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font-family: 'Graphik-Medium', sans-serif; font-size: 18px; color: #0d1428; padding: 6px 4px; }
.sphere-sr__input::placeholder { color: #8a97a6; font-family: 'Graphik-Regular', sans-serif; }
.sphere-sr__input::-webkit-search-cancel-button, .sphere-sr__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.sphere-sr__clear { flex: 0 0 auto; width: 34px; height: 34px; border: 0; background: transparent; color: #0d1428; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background .15s ease; }
.sphere-sr__clear:hover { background: #f1f6fb; }
.sphere-sr__clear svg { width: 18px; height: 18px; }
.sphere-sr__clear.is-hidden { display: none; }
.sphere-sr__go { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border: 0; border-radius: 24px; background: #0d1428; color: #ffffff; font-family: 'Graphik-Medium', sans-serif; font-size: 16px; cursor: pointer; transition: filter .15s ease; }
.sphere-sr__go:hover { filter: brightness(1.12); }
.sphere-sr__go svg { width: 18px; height: 18px; }

/* content-type filter chips */
.sphere-sr__types { display: flex; flex-wrap: wrap; gap: 10px; }
.sphere-sr__chip { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 8px; background: #f1f6fb; color: #0d1428; font-family: 'Graphik-Medium', sans-serif; font-size: 14px; text-decoration: none; cursor: pointer; transition: background .15s ease, color .15s ease; }
.sphere-sr__chip:hover { background: #e4ecf5; }
.sphere-sr__chip.is-active { background: #0d1428; color: #ffffff; }
.sphere-sr__chip[data-type="insights"] { display: none; } /* Insights filter removed from the search page */

/* results count */
.sphere-sr__count { font-family: 'Graphik-Regular', sans-serif; font-size: 14px; color: #5c6c80; }
.sphere-sr__count:empty { display: none; }

/* results grid + cards */
.sphere-sr__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.sphere-sr__card { display: flex; flex-direction: column; background: #ffffff; border: 1px solid #eef2f6; border-radius: 8px; overflow: hidden; text-decoration: none; transition: box-shadow .18s ease, transform .18s ease; }
.sphere-sr__thumb { transition: transform .35s ease; }
.sphere-sr__card:hover .sphere-sr__thumb { transform: scale(1.04); }
/* anchor the crop to the bottom-right so the baked-in Shufti watermark (bottom-right corner of each image) is never cut off */
.sphere-sr__thumb { display: block; width: 100%; aspect-ratio: 297 / 168; background: #d9d9d9 right bottom / cover no-repeat; }
.sphere-sr__body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 18px; }
.sphere-sr__cmeta { display: flex; align-items: center; gap: 8px; font-family: 'Graphik-Medium', sans-serif; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #5c6c80; }
.sphere-sr__type { color: #244872; }
.sphere-sr__dot { color: #c3cdd8; }
.sphere-sr__title { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 16px; line-height: 21px; color: #0d1428; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sphere-sr__card:hover .sphere-sr__title { color: #244872; }
.sphere-sr__empty { grid-column: 1 / -1; font-family: 'Graphik-Regular', sans-serif; font-size: 16px; color: #5c6c80; padding: 30px 0; }

/* load more */
.sphere-sr__more { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 180px; padding: 21px 30px; border: 0; border-radius: 50px; background: #0D1428; color: #ffffff; font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 16px; line-height: 1; white-space: nowrap; cursor: pointer; transition: .2s ease; }
.sphere-sr__more:hover { background: #1c2b4d; color: #ffffff; }
.sphere-sr__more[hidden] { display: none; }
.sphere-sr__more.is-loading { opacity: .7; cursor: default; pointer-events: none; }

/* right sidebar — featured topics */
.sphere-sr__topics { margin-bottom: 24px; }
.sphere-sr__topics-h { font-family: 'Graphik-Medium', sans-serif; font-size: 16px; color: #0d1428; margin: 0 0 14px; }
.sphere-sr__topic-list { display: flex; flex-wrap: wrap; gap: 10px; }
.sphere-sr__topic { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 8px; background: #f1f6fb; color: #0d1428; font-family: 'Graphik-Regular', sans-serif; font-size: 14px; text-decoration: none; transition: background .15s ease; }
.sphere-sr__topic:hover { background: #e4ecf5; }

/* right sidebar — newsletter card */
.sphere-sr__news { border: 0; border-radius: 16px; background: rgba(215, 224, 233, 0.50); overflow: hidden; }
.sphere-sr__news-body { padding: 30px 24px; text-align: center; }
.sphere-sr__news-h { font-family: 'Graphik-Medium', sans-serif; font-weight: 600; font-size: 20px; line-height: 28px; color: #0d1428; margin: 0 0 10px; }
.sphere-sr__news-p { font-family: 'Graphik-Regular', sans-serif; font-size: 14px; line-height: 21px; color: #354557; margin: 0 0 18px; }
.sphere-sr__news-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 13px 22px; border: 0; border-radius: 64px; background: #0d1428; color: #ffffff; font-family: 'Graphik-Medium', sans-serif; font-size: 15px; cursor: pointer; transition: filter .15s ease; }
.sphere-sr__news-btn:hover { filter: brightness(1.15); }

/* loading state (live-type refresh) */
.sphere-sr.is-loading .sphere-sr__grid { opacity: .55; transition: opacity .15s ease; }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .sphere-sr__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "search"
      "types"
      "count"
      "grid"
      "more"
      "right"
      "promo";
    grid-template-rows: none; /* reset the desktop 1fr filler for the stacked layout */
    row-gap: 4px;
  }
  .sphere-sr__promo, .sphere-sr__right { position: static; }
  .sphere-sr__head { margin-bottom: 18px; }
  .sphere-sr__right { margin-top: 40px; max-width: 420px; }
  .sphere-sr__promo { margin-top: 30px; max-width: 420px; }
}
@media (max-width: 767px) {
  .sphere-sr { padding: 30px 0 64px; }
  .sphere-sr__grid { grid-template-columns: 1fr; gap: 18px; }
  .sphere-sr__form { min-height: 52px; padding-left: 18px; }
  .sphere-sr__input { font-size: 16px; }
  .sphere-sr__go span { display: none; }
  .sphere-sr__go { padding: 12px; border-radius: 50%; }
}

/* ---- popup "Featured Topics" chips (added under the ASP search box) ---- */
.sphere-search__featured { width: 60vw; max-width: none; margin: 24px auto 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.sphere-search__featured-label { font-family: 'Graphik-Regular', sans-serif; font-size: 15px; color: #5c6c80; margin-right: 6px; }
.sphere-search__ftopic { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 8px; background: #f1f6fb; color: #0d1428; font-family: 'Graphik-Medium', sans-serif; font-size: 14px; text-decoration: none; transition: background .15s ease; }
.sphere-search__ftopic:hover { background: #e4ecf5; }
@media (max-width: 767px) { .sphere-search__featured { width: 93vw; } }




/* ============================================================
   Shufti Sphere footer v2 — Figma 4315:16966 (redesign 2026-07-23)
   ============================================================ */
.sphere-footer2 { background: #0d1428; color: #f1f6fb; font-family: 'Graphik-Regular', Arial, sans-serif; padding: 56px 0 40px; overflow-x: hidden; }
.sphere-footer2 *, .sphere-footer2 *::before, .sphere-footer2 *::after { box-sizing: border-box; }
.sphere-footer2 a { text-decoration: none; }
.sphere-footer2__inner { max-width: 1440px; margin: 0 auto; padding: 0 54px; }

/* ---- main split: left rail + right content ---- */
.sphere-footer2__main { display: flex; gap: 0; align-items: stretch; }
.sphere-footer2__rail { flex: 0 0 35%; max-width: 490px; display: flex; flex-direction: column; }
.sphere-footer2__logo { display: inline-block; }
.sphere-footer2__logo img { width: 340px; max-width: 100%; height: auto; display: block; }
.sphere-footer2__socials { display: flex; gap: 16px; margin-top: auto; padding-top: 60px; }
.sphere-footer2__socials a { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.08); display: inline-flex; align-items: center; justify-content: center; transition: background .2s ease; }
.sphere-footer2__socials a:hover { background: rgba(255,255,255,.18); }
.sphere-footer2__socials svg { width: 27px; height: 27px; fill: #f1f6fb; }

/* ---- right content ---- */
.sphere-footer2__content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sphere-footer2__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.sphere-footer2__cols { display: contents; }
.sphere-footer2__col { flex: 0 0 auto; min-width: 0; }
.sphere-footer2__head { font-family: 'Graphik-Medium', sans-serif; font-weight: 500; font-size: 18px; line-height: 1.3; color: #f1f6fb; margin: 0 0 22px; }
.sphere-footer2__links { display: flex; flex-direction: column; gap: 18px; }
.sphere-footer2__links a { font-size: 14px; line-height: 1.2; color: #91a1b4; transition: color .2s ease; }
.sphere-footer2__links a:hover { color: #f1f6fb; }

/* trustpilot */
.sphere-footer2__trust { flex: 0 0 auto; width: 210px; }
.sphere-footer2__trust .trustpilot-widget { min-height: 0; }
.sphere-footer2__trust-count { font-size: 14px; color: #f1f6fb; }
.sphere-footer2__trust-brand { display: inline-flex; align-items: center; gap: 6px; }
.sphere-footer2__trust-brand svg { width: 26px; height: 26px; fill: #00b67a; }
.sphere-footer2__trust-brand span { font-family: 'Inter', Arial, sans-serif; font-weight: 700; font-size: 22px; color: #fff; letter-spacing: -.5px; }
.sphere-footer2__trust-stars { display: inline-flex; gap: 3px; }
.sphere-footer2__trust-stars i { width: 26px; height: 26px; background: #00b67a; display: inline-flex; align-items: center; justify-content: center; }
.sphere-footer2__trust-stars i::before { content: "\2605"; color: #fff; font-size: 17px; line-height: 1; }
.sphere-footer2__trust-rating { font-size: 14px; color: #f1f6fb; }

/* community socials */
.sphere-footer2__community { margin-top: 52px; }
.sphere-footer2__comm-head { font-family: 'Graphik-Regular', sans-serif; font-size: 14px; font-weight: 400; color: #91a1b4; margin: 0 0 14px; }
.sphere-footer2__comm-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-top: 1px solid #D7E0E9; border-bottom: 1px solid #D7E0E9; padding: 18px 4px; }
.sphere-footer2__comm { display: inline-flex; align-items: center; opacity: 1; transition: opacity .2s ease; }
.sphere-footer2__comm:hover { opacity: 1; }
.sphere-footer2__comm img { display: block; width: auto; }

/* midband: partnership + certs */
.sphere-footer2__midband { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-top: 56px; }
.sphere-footer2__partner { margin: 0; font-size: 14px; line-height: 1.7; color: #f1f6fb; }
.sphere-footer2__partner a { color: #539ff9; }
.sphere-footer2__partner a:hover { text-decoration: underline; }
.sphere-footer2__certs { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.sphere-footer2__certs a { display: inline-flex; }
.sphere-footer2__certs img { height: 48px; width: auto; opacity: .92; filter: grayscale(1); transition: opacity .2s ease, filter .2s ease; }
.sphere-footer2__certs a:hover img { opacity: 1; filter: grayscale(0); }

/* bottom bar */
.sphere-footer2__bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.1); }
.sphere-footer2__copy { display: flex; align-items: center; gap: 16px; }
.sphere-footer2__copy-logo { display: inline-flex; align-items: center; }
.sphere-footer2__copy img { height: 30px; width: auto; display: block; }
.sphere-footer2__copy span { font-size: 16px; color: #5c6c80; }
.sphere-footer2__legal { display: flex; align-items: center; }
.sphere-footer2__legal a { font-size: 14px; color: #f1f6fb; padding: 0 18px; transition: color .2s ease; }
.sphere-footer2__legal a + a { border-left: 1px solid rgba(255,255,255,.22); }
.sphere-footer2__legal a:last-child { padding-right: 0; }
.sphere-footer2__legal a:hover { color: #539ff9; }

/* ---- mobile (<=760): logo on top, columns become a tap-to-toggle accordion ---- */
@media (max-width: 760px) {
  .sphere-footer2 { padding: 44px 0 30px; }
  .sphere-footer2__inner { padding: 0 22px; }
  .sphere-footer2__main { flex-direction: column; gap: 30px; }
  .sphere-footer2__rail { flex: none; max-width: none; align-items: center; order: -1; }
  .sphere-footer2__logo img { width: 258px; margin: 0 auto; }
  .sphere-footer2__socials { margin-top: 26px; padding-top: 0; justify-content: center; }
  .sphere-footer2__top { flex-direction: column; align-items: stretch; gap: 0; }
  .sphere-footer2__col { min-width: 0; width: 100%; }
  /* accordion head (JS hook = .sphere-footer__acc-head; chevron = .sphere-footer__acc-ico) */
  .sphere-footer2__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 16px 0; font-size: 16px; font-weight: 500; line-height: 1.3; color: #f1f6fb; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.12); }
  .sphere-footer2__links { display: none; gap: 12px; padding: 6px 0 16px; }
  .sphere-footer2__links a { display: block; font-size: 15px; padding: 10px 0; }
  .sphere-footer2__trust { align-items: flex-start; text-align: left; margin-top: 30px; }
  .sphere-footer2__community { margin-top: 32px; }
  .sphere-footer2__comm-row { justify-content: flex-start; gap: 20px 26px; padding: 18px 0; }
  .sphere-footer2__midband { flex-direction: column; align-items: flex-start; gap: 26px; margin-top: 32px; }
  .sphere-footer2__certs { justify-content: flex-start; gap: 12px 14px; }
  .sphere-footer2__certs img { height: 40px; }
  .sphere-footer2__partner { word-break: break-word; }
  .sphere-footer2__community, .sphere-footer2__comm-row { max-width: 100%; }
  .sphere-footer2__bottom { flex-direction: column; align-items: flex-start; gap: 18px; }
  .sphere-footer2__copy { display: contents; }
  .sphere-footer2__copy-logo { order: 1; }
  .sphere-footer2__copy span { font-size: 14px; order: 3; }
  .sphere-footer2__legal { flex-wrap: wrap; gap: 6px 0; order: 2; }
  .sphere-footer2__legal a { padding: 0 7px; font-size: 12px; }
  .sphere-footer2__legal a:first-child { padding-left: 0; }
}

/* ---- tablet / small desktop (761–1180): stack rail above, columns spread full width ---- */
@media (max-width: 1180px) and (min-width: 761px) {
  .sphere-footer2__main { flex-wrap: wrap; gap: 36px; }
  .sphere-footer2__rail { flex: 0 0 100%; max-width: none; flex-direction: column; align-items: flex-start; }
  .sphere-footer2__logo img { width: 300px; }
  .sphere-footer2__pitch { margin: 26px 0 0; }
  .sphere-footer2__socials { margin-top: 24px; padding-top: 0; }
  .sphere-footer2__content { flex: 0 0 100%; }
  .sphere-footer2__top { gap: 32px; }
}

/* ============================================================
   Footer "Pitch a piece" card + modal (namespaced sf2-pitch, no
   collision with experts .exp-pitch-*). CF7 19de737 rendered with
   its exp-pitch ids/classes rewritten to sf2-pitch at render time.
   ============================================================ */

/* --- card in the left rail --- */
.sphere-footer2__pitch { max-width: 322px; margin: 30px 0 0; padding: 26px 26px 28px; border-radius: 16px; border: 1px solid rgba(255,255,255,.09); background: radial-gradient(130% 130% at 84% 112%, rgba(83,159,249,.16), rgba(13,20,40,0) 56%), #121a2e; }
.sphere-footer2__pitch-txt { margin: 0 0 20px; font-family: 'Graphik-Regular','Graphik',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; font-size: 16px; line-height: 1.5; color: #f1f6fb; }
.sphere-footer2__pitch-btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 30px; border: 1px solid #fff; border-radius: 57px; background: #f24348; color: #fff; font-family: 'Graphik-Medium','Graphik',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; font-size: 15px; font-weight: 500; letter-spacing: -.2px; cursor: pointer; box-shadow: 0 0 0 3px rgba(255,255,255,.14); transition: filter .15s ease; }
.sphere-footer2__pitch-btn:hover { filter: brightness(1.06); }

/* --- modal + success (renamed 1:1 from experts .exp-pitch-*, vars inlined) --- */
.sf2-pitch-modal *, .sf2-pitch-success * { box-sizing: border-box; }
.sf2-pitch-modal, .sf2-pitch-success { font-family: 'Graphik-Regular','Graphik',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; -webkit-font-smoothing: antialiased; position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 24px; }
.sf2-pitch-modal.is-open, .sf2-pitch-success.is-open { display: flex; }
.sf2-pitch-modal__backdrop, .sf2-pitch-success__backdrop { position: absolute; inset: 0; background: rgba(13,20,40,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sf2-pitch-modal__dialog, .sf2-pitch-success__dialog { position: relative; z-index: 1; width: 100%; max-width: 610px; max-height: 92vh; overflow: auto; background: #fff; border-radius: 24px; padding: 40px 62px 40px; box-shadow: 0 30px 90px rgba(13,20,40,.35); }
.sf2-pitch-modal__close, .sf2-pitch-success__close { position: absolute; top: 22px; right: 22px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0; cursor: pointer; color: #354557; }
.sf2-pitch-modal__close svg, .sf2-pitch-success__close svg { width: 28px; height: 28px; }
.sf2-pitch-modal__title { font-family: 'Graphik-Medium','Graphik',system-ui,sans-serif; font-weight: 600; font-size: 40px; line-height: 1.4; color: #0d1428; text-align: center; margin: 0 0 16px; }
.sf2-pitch-modal .hidden-fields-container { display: none; border: 0; margin: 0; padding: 0; }
.sf2-pitch-modal .wpcf7 { margin: 0; }
.sf2-pitch-modal .wpcf7 form, .sf2-pitch-modal .wpcf7 p { margin: 0; padding: 0; background: transparent; border: 0; }
.sf2-pitch-field { margin: 0 0 10px; }
.sf2-pitch-label { display: block; font-family: 'Graphik-Regular','Graphik',system-ui,sans-serif; font-size: 14px; line-height: 1.4; color: #354557; margin: 0 0 0; }
.sf2-pitch-modal .wpcf7-form-control-wrap { display: block; }
.sf2-pitch-input { display: block; width: 100%; height: 64px; background: #f1f6fb; border: 1px solid #f1f6fb; border-radius: 8px; padding: 0 24px; font-family: 'Graphik-Regular','Graphik',system-ui,sans-serif; font-size: 16px; color: #0d1428; outline: none; box-sizing: border-box; }
.sf2-pitch-textarea { display: block; width: 100%; height: 160px; resize: none; background: #f1f6fb; border: 1px solid #f1f6fb; border-radius: 8px; padding: 20px 24px; font-family: 'Graphik-Regular','Graphik',system-ui,sans-serif; font-size: 16px; line-height: 1.3; color: #0d1428; outline: none; box-sizing: border-box; }
.sf2-pitch-input::placeholder, textarea.sf2-pitch-textarea::placeholder { color: #5c6c80; opacity: 1; }
.sf2-pitch-input:focus, textarea.sf2-pitch-textarea:focus { border-color: #539ff9; }
.sf2-pitch-submit { display: block; width: 100%; height: 51px; background: #0d1428; color: #f1f6fb; border: 0; border-radius: 8px; font-family: 'Graphik-Medium','Graphik',system-ui,sans-serif; font-size: 16px; cursor: pointer; margin: 20px 0 0; transition: filter .15s; }
.sf2-pitch-submit:hover { filter: brightness(1.15); }
.sf2-pitch-terms { font-family: 'Graphik-Regular','Graphik',system-ui,sans-serif; font-size: 18px; line-height: 1.5; color: #354557; text-align: center; margin: 12px auto 0 !important; max-width: 500px; }
.sf2-pitch-terms a { color: inherit; text-decoration: underline; }
.sf2-pitch-modal .wpcf7-not-valid-tip { font-family: 'Graphik-Regular','Graphik',system-ui,sans-serif; font-size: 13px; color: #f24348; margin-top: 6px; display: block; }
.sf2-pitch-modal .wpcf7-spinner { display: none; }
.sf2-pitch-modal .wpcf7-response-output { display: none; }
.sf2-pitch-success__dialog { text-align: center; padding: 110px 92px 120px; }
.sf2-pitch-success__icon { width: 120px; height: 120px; margin: 0 auto 64px; position: relative; display: flex; align-items: center; justify-content: center; }
.sf2-pitch-success__icon::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; border: 2px dashed #a8cbf3; }
.sf2-pitch-success__icon i { width: 93px; height: 93px; border-radius: 50%; background: #4c96ed; display: flex; align-items: center; justify-content: center; }
.sf2-pitch-success__icon svg { width: 39px; height: 28px; }
.sf2-pitch-success__title { font-family: 'Graphik-Medium','Graphik',system-ui,sans-serif; font-weight: 600; font-size: 40px; line-height: 1.4; color: #0d1428; margin: 0 0 18px; }
.sf2-pitch-success__body { font-family: 'Graphik-Regular','Graphik',system-ui,sans-serif; font-size: 28px; line-height: 1.6; color: #354557; margin: 0 auto; max-width: 520px; }

@media (max-width: 820px) {
  .sf2-pitch-modal__dialog, .sf2-pitch-success__dialog { padding: 56px 24px 36px; border-radius: 18px; }
  .sf2-pitch-modal__title, .sf2-pitch-success__title { font-size: 28px; margin-bottom: 24px; }
  .sf2-pitch-success__dialog { padding: 72px 24px 80px; }
  .sf2-pitch-success__body { font-size: 19px; }
  .sf2-pitch-terms { font-size: 14px; }
  .sf2-pitch-input { height: 52px; padding: 0 16px; }
  .sf2-pitch-textarea { height: 120px; padding: 14px 16px; }
}
@media (max-width: 760px) {
  .sphere-footer2__pitch { margin: 26px auto 0; text-align: center; }
}
/* card-title hover grey #5C6C80 — consistent hover 2026-07-28 */
.sphere-card__title, .sphere-event-card__title, .sphere-media-card__body h3 { transition: color .2s ease; }
.sphere-card:hover .sphere-card__title { color: #5C6C80; }
.sphere-event-card:hover .sphere-event-card__title { color: #5C6C80; }
.sphere-media-card:hover .sphere-media-card__body h3 { color: #5C6C80; }

/* sphere card hover: image-zoom + no shadow-pop 2026-07-28 */
.sphere-hero__featured:hover .sphere-hero__featured-img{ box-shadow:none; }
.sphere-podcast__media:hover .sphere-podcast__cover{ box-shadow:none; }
.sphere-card__img img,.sphere-event-card__img img,.sphere-media-card img,.sphere-move-card__img img,.sphere-insight__img img,.sphere-reports__cover img{ transition:transform .35s ease; }
.sphere-moves__feature-img{ transition:transform .35s ease, opacity .25s ease; }
.sphere-moves__feature-link{ overflow:hidden; border-radius:12px; }
.sphere-card:hover .sphere-card__img img{ transform:scale(1.04); }
.sphere-event-card:hover .sphere-event-card__img img{ transform:scale(1.04); }
.sphere-media-card:hover img{ transform:scale(1.04); }
.sphere-move-card:hover .sphere-move-card__img img{ transform:scale(1.04); }
.sphere-insight:hover .sphere-insight__img img{ transform:scale(1.04); }
.sphere-reports__cover:hover img{ transform:scale(1.04); }
.sphere-moves__feature-link:hover .sphere-moves__feature-img{ transform:scale(1.04); }

/* sphere pod-reports guides+insights image zoom 2026-07-28 */
.pod-guide__media img,.pod-rcard__media img{ transition:transform .35s ease; }
.pod-rcard__media{ overflow:hidden; }
.pod-guide:hover .pod-guide__media img{ transform:scale(1.04); }
.pod-rcard:hover .pod-rcard__media img{ transform:scale(1.04); }

/* sphere highlights title-grey (card-level) 2026-07-28 */
.sphere-hero__event:hover .sphere-hero__event-title{ color:#5C6C80; }
.sphere-hero__trend:hover .sphere-hero__trend-title{ color:#5C6C80; }
.sphere-hero__recent-ev:hover .sphere-hero__recent-title{ color:#5C6C80; }