/**
 * Homepage visual layer: hero photo/video, key figures, section imagery.
 * Loaded only on index.php. Photos live in assets/images/home.
 */

.has-media { position: relative; isolation: isolate; }
.has-media picture, .has-media img { display: block; }

/* ---------- Header over the hero ----------
   Transparent on top of the photo; home-visual.js adds .is-scrolled once the page moves,
   which gives the bar its own background. --header-h is measured by the same script. */
.home-overlay-header .site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    /* border-box + no-repeat: otherwise the gradient tiles into the 1px transparent border
       and repeats its dark top edge as a hairline under the bar. */
    background: linear-gradient(180deg, rgba(11, 12, 14, .55) 0%, rgba(11, 12, 14, 0) 100%) border-box no-repeat;
    border-bottom-color: transparent;
    transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease, padding .35s ease;
}
/* The blurred fill sits on ::before: backdrop-filter on the header itself would trap the
   position:fixed mobile menu inside the bar. */
.home-overlay-header .site-header::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: rgba(11, 12, 14, .9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0; transition: opacity .35s ease;
    pointer-events: none;
}
.home-overlay-header .site-header.is-scrolled::before { opacity: 1; }
.home-overlay-header .site-header.is-scrolled {
    background: transparent;
    border-bottom-color: var(--border-color);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
    padding-top: 8px; padding-bottom: 8px;
}
[data-theme="light"] .home-overlay-header .site-header::before { background: rgba(255, 255, 255, .92); }
[data-theme="light"] .home-overlay-header .site-header.is-scrolled { box-shadow: 0 8px 30px rgba(60, 45, 10, .12); }
.home-overlay-header .site-header .logo-img { transition: height .35s ease; }
.home-overlay-header .site-header.is-scrolled .logo-img { height: 46px; }
/* Over the dark photo the light theme still needs the white logo. */
[data-theme="light"] .home-overlay-header .site-header:not(.is-scrolled) .logo-img:not(.logo-img-light) { display: block !important; }
[data-theme="light"] .home-overlay-header .site-header:not(.is-scrolled) .logo-img-light { display: none !important; }
html { scroll-padding-top: var(--header-h, 80px); }

/* ---------- Hero ---------- */
.hero-section.has-media {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: #0B0C0E;
    color: #F3EFE6;
}
@supports (min-height: 100svh) {
    .hero-section.has-media { min-height: 100svh; }
}

.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-media picture, .hero-media img, .hero-video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero-media img { animation: hero-drift 30s ease-in-out infinite alternate; transform-origin: 60% 50%; }
.hero-video { opacity: 0; transition: opacity 1.2s ease; }
.hero-video.is-playing { opacity: 1; }
.hero-media.has-video img { animation: none; }
@keyframes hero-drift {
    from { transform: scale(1.02); }
    to { transform: scale(1.1) translate(-1.5%, -1%); }
}
/* Light scrim: enough for the copy, the room stays visible on the left. */
.hero-media::after {
    content: "";
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(11, 12, 14, .68) 0%, rgba(11, 12, 14, .34) 42%, rgba(11, 12, 14, 0) 72%),
        linear-gradient(0deg, rgba(11, 12, 14, .92) 0%, rgba(11, 12, 14, .35) 22%, rgba(11, 12, 14, 0) 45%);
}

@media (max-width: 760px) {
    /* Copy covers most of the photo on phones, so darken it evenly. */
    .hero-media::after { background: linear-gradient(0deg, rgba(11, 12, 14, .94) 0%, rgba(11, 12, 14, .6) 50%, rgba(11, 12, 14, .42) 100%); }
}

.hero-section.has-media .hero-content {
    width: 100%;
    padding-top: calc(var(--header-h, 80px) + clamp(48px, 10vh, 140px));
    align-items: flex-start;
    text-align: left;
    gap: 26px;
    text-shadow: 0 2px 22px rgba(0, 0, 0, .45);
}
.hero-section.has-media h1 { color: #FFFFFF; font-weight: 400; }
.hero-section.has-media .hero-content p { color: #FFFFFF; }
.hero-section.has-media .hero-buttons { justify-content: flex-start; }
.hero-section.has-media .btn { text-shadow: none; }
.hero-section.has-media .btn-ghost { background: rgba(11, 12, 14, .35); color: #FFFFFF; border-color: rgba(255, 255, 255, .7); backdrop-filter: blur(4px); }

/* Hero ticker: full-width strip that scrolls on its own, like a trading-floor tape */
.hero-section.has-media { padding: 0; }
.hero-ticker {
    margin-top: clamp(48px, 8vh, 110px);
    display: flex; align-items: stretch;
    border-top: 1px solid rgba(233, 168, 32, .3);
    background: rgba(11, 12, 14, .72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #F3EFE6;
    text-shadow: none;
}
.hero-ticker-viewport {
    flex: 1; min-width: 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.hero-ticker-track { display: flex; width: max-content; animation: hero-ticker 48s linear infinite; }
.hero-ticker:hover .hero-ticker-track { animation-play-state: paused; }
.hero-ticker-list { display: flex; margin: 0; padding: 0; list-style: none; }
.hero-ticker-item {
    display: inline-flex; align-items: baseline; gap: 10px;
    padding: 18px 28px; white-space: nowrap;
    font-family: var(--font-mono); font-size: 13px;
    border-right: 1px solid rgba(233, 168, 32, .14);
}
.hero-ticker-name { color: #A9A69E; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.hero-ticker .ticker-value { font-family: var(--font-main); font-size: 17px; font-weight: 400; letter-spacing: 0; color: #F3EFE6; }
.hero-ticker .ticker-change { font-size: 12px; }
.hero-ticker-link {
    flex: none; display: flex; flex-direction: column; justify-content: center; gap: 4px;
    padding: 12px clamp(20px, 3vw, 40px);
    border-left: 1px solid rgba(233, 168, 32, .3);
    background: rgba(11, 12, 14, .55);
}
.hero-ticker-date { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: #A9A69E; text-transform: uppercase; }
.hero-ticker-link .text-gold { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; white-space: nowrap; }
@keyframes hero-ticker { to { transform: translateX(-50%); } }
@media (max-width: 760px) {
    .hero-ticker { flex-direction: column; }
    .hero-ticker-link { flex-direction: row; justify-content: space-between; align-items: center; border-left: 0; border-top: 1px solid rgba(233, 168, 32, .2); }
}
/* ---------- Key figures ---------- */
.home-stats { border-bottom: 1px solid var(--border-color); }
.home-stats-grid { max-width: 1264px; margin: 0 auto; padding: 0 clamp(20px, 5.5vw, 88px); display: grid; grid-template-columns: repeat(4, 1fr); }
.home-stat { display: flex; flex-direction: column; gap: 8px; padding: clamp(28px, 4vw, 52px) clamp(16px, 2vw, 28px); border-left: 1px solid var(--border-color); }
.home-stat:first-child { border-left: 0; padding-left: 0; }
.home-stat-value { font-size: clamp(44px, 5vw, 72px); font-weight: 200; line-height: 1; letter-spacing: -.04em; color: var(--accent-gold); font-variant-numeric: tabular-nums; }
.home-stat-label { font-size: 15px; color: var(--text-secondary); max-width: 16em; }
@media (max-width: 760px) {
    .home-stats-grid { grid-template-columns: 1fr 1fr; }
    .home-stat:nth-child(3) { border-left: 0; padding-left: 0; }
    .home-stat:nth-child(n+3) { border-top: 1px solid var(--border-color); }
}

/* ---------- Firm ---------- */
.firm-figure { position: relative; margin: clamp(56px, 7vw, 112px) 0 0; }
.firm-figure::before {
    content: ""; position: absolute; inset: -16px 16px 16px -16px;
    border: 1px solid var(--accent-gold); opacity: .6; z-index: -1; pointer-events: none;
}
.firm-figure img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; object-position: 65% 50%; }
.firm-figure-caption {
    position: absolute; left: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vw, 40px);
    max-width: 340px; display: flex; flex-direction: column; gap: 12px;
    padding: 24px 28px; background: var(--bg-secondary); border: 1px solid var(--border-color);
    font-size: 17px; line-height: 1.45;
}
@media (max-width: 760px) {
    .firm-figure img { aspect-ratio: 4 / 3; }
    .firm-figure-caption { position: static; max-width: none; border-top: 0; }
}

/* ---------- Approach ---------- */
#approach.has-media { overflow: hidden; }
.approach-media {
    position: absolute; top: 0; right: 0; z-index: -1;
    width: min(46%, 640px); height: min(100%, 760px);
    opacity: .42;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(0deg, transparent 0%, #000 40%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(0deg, transparent 0%, #000 40%);
    mask-composite: intersect;
}
.approach-media picture, .approach-media img { width: 100%; height: 100%; object-fit: cover; }
[data-theme="light"] .approach-media { opacity: .22; }
.process-card { position: relative; }
.process-card::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent-gold); transition: width .5s ease; }
.process-card:hover::after { width: 100%; }
@media (max-width: 760px) { .approach-media { width: 100%; height: 420px; opacity: .25; } }

/* ---------- Full-bleed section backgrounds (market, contact) ---------- */
.section-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.section-media picture, .section-media img { width: 100%; height: 100%; object-fit: cover; }

.market-media img { opacity: .5; }
.market-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, rgba(19, 21, 24, .55) 28%, rgba(19, 21, 24, .7) 70%, var(--bg-secondary) 100%);
}
[data-theme="light"] .market-media img { opacity: .16; }
[data-theme="light"] .market-media::after { background: linear-gradient(180deg, var(--bg-secondary) 0%, transparent 30%, transparent 70%, var(--bg-secondary) 100%); }
#market .indicator-item { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

.contact-media img { opacity: .28; object-position: 50% 60%; }
.contact-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg-primary) 0%, transparent 35%, transparent 65%, var(--bg-primary) 100%); }
[data-theme="light"] .contact-media img { opacity: .14; }

/* ---------- Capabilities ---------- */
.cap-figure { margin: 12px 0 0; border-top: 2px solid var(--accent-gold); overflow: hidden; }
.cap-figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s ease; }
.cap-figure:hover img { transform: scale(1.05); }

/* ---------- Insights ---------- */
.featured-content.has-media { overflow: hidden; }
.featured-media { position: absolute; inset: 0; z-index: -1; }
.featured-media picture, .featured-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s ease; }
.featured-media img { opacity: .55; }
.featured-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg-primary) 22%, rgba(11, 12, 14, .35) 100%); }
[data-theme="light"] .featured-media img { opacity: .2; }
[data-theme="light"] .featured-media::after { background: linear-gradient(0deg, var(--bg-primary) 30%, rgba(255, 255, 255, .3) 100%); }
.featured-article:hover .featured-media img { transform: scale(1.05); }

.insight-card.has-thumb { padding-top: 0; overflow: hidden; }
.insight-thumb { display: block; margin: 0 -30px 6px; aspect-ratio: 16 / 10; overflow: hidden; }
.insight-thumb picture, .insight-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.insight-card.has-thumb:hover .insight-thumb img { transform: scale(1.07); }

/* ---------- Governance banner ---------- */
.gov-banner {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: clamp(420px, 44vw, 600px);
    display: flex; align-items: flex-end;
    padding: clamp(28px, 5vw, 72px);
    color: #F3EFE6;
}
.gov-banner-media { position: absolute; inset: -12% 0; z-index: -1; will-change: transform; }
.gov-banner-media picture, .gov-banner-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.gov-banner::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(11, 12, 14, .78) 0%, rgba(11, 12, 14, .55) 45%, rgba(11, 12, 14, .1) 85%), linear-gradient(0deg, rgba(11, 12, 14, .55), transparent 50%);
}
.gov-banner-copy { max-width: 620px; display: grid; text-shadow: 0 2px 18px rgba(0, 0, 0, .4); }
.gov-banner-copy h2 { color: #FFFFFF; }
.gov-banner-copy p { font-weight: 300; font-size: 19px; color: #E6E1D6; max-width: 30em; }

/* Gate slides: hovering or selecting a step below swaps the photo and the copy.
   Every slide and copy block shares one grid cell / the same box, so the banner never jumps. */
.gov-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease, transform 1.2s cubic-bezier(.22, 1, .36, 1); transform: scale(1.04); }
.gov-slide.is-active { opacity: 1; transform: none; }
.gov-copy { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; }
.is-interactive .gov-copy { opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .45s ease, transform .6s cubic-bezier(.22, 1, .36, 1), visibility 0s .6s; }
.is-interactive .gov-copy.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: .08s, .08s, 0s; }
.gov-question { font-size: clamp(30px, 3.6vw, 52px) !important; font-weight: 300 !important; line-height: 1.08; letter-spacing: -0.03em; color: #FFFFFF !important; }
.gov-output { font-size: 15px !important; font-family: var(--font-mono); letter-spacing: .02em; color: #E9A820 !important; }
.gov-output strong { font-weight: 500; color: #F3EFE6; margin-right: 6px; }

/* Steps are buttons now: reset, then show which gate is live. */
.governance-step {
    appearance: none; background: none; border: 0; padding: 0 0 6px; margin: 0;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
    transition: opacity .35s ease;
}
.governance-step-bar { transform-origin: left center; transition: transform .45s cubic-bezier(.22, 1, .36, 1), background-color .35s ease; }
.governance-step-title { transition: color .35s ease; }
.governance-steps.has-active .governance-step { opacity: .45; }
.governance-steps.has-active .governance-step.is-active { opacity: 1; }
.governance-step.is-active .governance-step-bar { transform: scaleY(2); }
.governance-step.is-active .governance-step-title { color: var(--accent-gold); }
.governance-step:focus-visible { outline: 1px solid var(--accent-gold); outline-offset: 6px; }
@media (max-width: 760px) {
    .gov-banner { padding: 24px; }
    .gov-banner::after { background: linear-gradient(0deg, rgba(11, 12, 14, .92) 30%, rgba(11, 12, 14, .3)); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .hero-media img { animation: none; }
    .hero-video { display: none; }
    .hero-ticker-track { animation: none; }
    .hero-ticker-viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .hero-ticker-list[aria-hidden] { display: none; }
    .gov-banner-media { inset: 0; transform: none !important; }
    .gov-slide, .gov-copy, .governance-step, .governance-step-bar { transition: none !important; }
    .insight-thumb img, .cap-figure img, .featured-media img { transition: none; }
}

/* ---------- Market State: indicator photo in the gauge box ----------
   Hovering or focusing a tile shows its photo over the gauge; pure CSS via :has(). */
#market .signal-gauge { position: relative; overflow: hidden; isolation: isolate; }
.signal-panels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.signal-panel { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
.signal-panel picture, .signal-panel img { width: 100%; height: 100%; object-fit: cover; }
.signal-panel img { transform: scale(1.08); transition: transform 1.6s cubic-bezier(.2, .7, .2, 1); }
.signal-panel::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(11, 12, 14, .92) 0%, rgba(11, 12, 14, .35) 45%, rgba(11, 12, 14, 0) 70%);
}
.signal-panel-copy {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    display: flex; flex-direction: column; gap: 10px;
    padding: clamp(24px, 3vw, 40px);
    color: #F3EFE6;
}
.signal-panel-copy .ticker-label { color: #E9A820; }
.signal-panel-value { font-weight: 200; font-size: clamp(44px, 5vw, 72px); line-height: 1; letter-spacing: -.04em; }

#market:has(.indicator-item[data-signal="growth"]:is(:hover, :focus-visible)) .signal-panel[data-signal="growth"],
#market:has(.indicator-item[data-signal="rates"]:is(:hover, :focus-visible)) .signal-panel[data-signal="rates"],
#market:has(.indicator-item[data-signal="liquidity"]:is(:hover, :focus-visible)) .signal-panel[data-signal="liquidity"],
#market:has(.indicator-item[data-signal="risk"]:is(:hover, :focus-visible)) .signal-panel[data-signal="risk"],
#market:has(.indicator-item[data-signal="currencies"]:is(:hover, :focus-visible)) .signal-panel[data-signal="currencies"],
#market:has(.indicator-item[data-signal="commodities"]:is(:hover, :focus-visible)) .signal-panel[data-signal="commodities"] { opacity: 1; }
#market:has(.indicator-item[data-signal="growth"]:is(:hover, :focus-visible)) .signal-panel[data-signal="growth"] img,
#market:has(.indicator-item[data-signal="rates"]:is(:hover, :focus-visible)) .signal-panel[data-signal="rates"] img,
#market:has(.indicator-item[data-signal="liquidity"]:is(:hover, :focus-visible)) .signal-panel[data-signal="liquidity"] img,
#market:has(.indicator-item[data-signal="risk"]:is(:hover, :focus-visible)) .signal-panel[data-signal="risk"] img,
#market:has(.indicator-item[data-signal="currencies"]:is(:hover, :focus-visible)) .signal-panel[data-signal="currencies"] img,
#market:has(.indicator-item[data-signal="commodities"]:is(:hover, :focus-visible)) .signal-panel[data-signal="commodities"] img { transform: scale(1); }

#market .indicator-item { position: relative; cursor: default; outline: none; }
#market .indicator-item::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: var(--accent-gold); transform: scaleX(0); transform-origin: left; transition: transform .4s ease;
}
#market .indicator-item:is(:hover, :focus-visible)::before { transform: scaleX(1); }
#market .indicator-item:is(:hover, :focus-visible) .indicator-value { color: var(--accent-gold); }
#market .indicator-item:focus-visible { box-shadow: inset 0 0 0 1px var(--accent-gold); }
@media (prefers-reduced-motion: reduce) {
    .signal-panel, .signal-panel img, #market .indicator-item::before { transition: none; }
    .signal-panel img { transform: none; }
}

/* ---------- Capabilities: capability photo in the left figure ----------
   Hovering or focusing a capability shows its photo over the port picture; pure CSS via :has(). */
.cap-figure { position: relative; }
.cap-panels { position: absolute; inset: 0; pointer-events: none; }
.cap-panel { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; overflow: hidden; }
.cap-panel picture { position: absolute; inset: 0; }
.cap-figure .cap-panel img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transform: scale(1.08); transition: transform 1.6s cubic-bezier(.2, .7, .2, 1); }
.cap-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 12, 14, .9) 0%, rgba(11, 12, 14, .3) 50%, rgba(11, 12, 14, 0) 75%); }
.cap-panel-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: 6px; padding: clamp(18px, 2.4vw, 28px); color: #F3EFE6; }
.cap-panel-number { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: #E9A820; }
.cap-panel-title { font-size: clamp(24px, 2.4vw, 32px); font-weight: 300; line-height: 1.1; letter-spacing: -.02em; }
.cap-panel-tagline { font-size: 14px; color: #D8D3C8; }

#capabilities:has(.capability-item[data-cap="income"]:is(:hover, :focus-visible)) .cap-panel[data-cap="income"],
#capabilities:has(.capability-item[data-cap="private-credit"]:is(:hover, :focus-visible)) .cap-panel[data-cap="private-credit"],
#capabilities:has(.capability-item[data-cap="real-assets"]:is(:hover, :focus-visible)) .cap-panel[data-cap="real-assets"],
#capabilities:has(.capability-item[data-cap="precious-metals"]:is(:hover, :focus-visible)) .cap-panel[data-cap="precious-metals"],
#capabilities:has(.capability-item[data-cap="alternatives"]:is(:hover, :focus-visible)) .cap-panel[data-cap="alternatives"],
#capabilities:has(.capability-item[data-cap="regional"]:is(:hover, :focus-visible)) .cap-panel[data-cap="regional"],
#capabilities:has(.capability-item[data-cap="shariah"]:is(:hover, :focus-visible)) .cap-panel[data-cap="shariah"] { opacity: 1; }
#capabilities:has(.capability-item[data-cap="income"]:is(:hover, :focus-visible)) .cap-panel[data-cap="income"] img,
#capabilities:has(.capability-item[data-cap="private-credit"]:is(:hover, :focus-visible)) .cap-panel[data-cap="private-credit"] img,
#capabilities:has(.capability-item[data-cap="real-assets"]:is(:hover, :focus-visible)) .cap-panel[data-cap="real-assets"] img,
#capabilities:has(.capability-item[data-cap="precious-metals"]:is(:hover, :focus-visible)) .cap-panel[data-cap="precious-metals"] img,
#capabilities:has(.capability-item[data-cap="alternatives"]:is(:hover, :focus-visible)) .cap-panel[data-cap="alternatives"] img,
#capabilities:has(.capability-item[data-cap="regional"]:is(:hover, :focus-visible)) .cap-panel[data-cap="regional"] img,
#capabilities:has(.capability-item[data-cap="shariah"]:is(:hover, :focus-visible)) .cap-panel[data-cap="shariah"] img { transform: scale(1); }

/* Keep the figure in view next to the long list on wide screens. */
@media (min-width: 900px) {
    #capabilities .container > div > div:first-child { align-self: stretch; }
    #capabilities .cap-figure { position: sticky; top: calc(var(--header-h, 80px) + 24px); }
}
@media (prefers-reduced-motion: reduce) {
    .cap-panel, .cap-figure .cap-panel img { transition: none; }
    .cap-figure .cap-panel img { transform: none; }
}

/* ---------- Official figures strip (replaces the market ticker) ---------- */
.hero-ticker--static .hero-ticker-viewport { -webkit-mask-image: none; mask-image: none; }
.hero-ticker--static .hero-ticker-track { animation: none; width: auto; }
.hero-ticker--static .hero-ticker-list { flex-wrap: wrap; }

/* ---------- Market Intelligence teaser: the five lenses ---------- */
.lens-teaser {
    display: grid;
    border-top: 1px solid var(--border-color);
}
.lens-teaser-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 4px 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border-color);
    transition: padding .3s ease;
}
.lens-teaser-item:hover { padding-left: 8px; }
.lens-teaser-num { grid-row: span 2; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--accent-gold); padding-top: 6px; }
.lens-teaser-name { font-size: 22px; font-weight: 300; letter-spacing: -.01em; }
.lens-teaser-sub { font-size: 14px; color: var(--text-secondary); }

/* ---------- Featured Insight (full width, image behind the copy) ---------- */
.featured-article--insight .featured-content { min-height: 360px; position: relative; isolation: isolate; }
.featured-article--insight .featured-media img { opacity: .4; }