/* ==========================================================================
   Why Invest with Inceptus Capital? — mixed-width tiles over a dimmed Parthenon (Philosophy page only)
   ========================================================================== */
.why-section { position: relative; isolation: isolate; background: var(--navy-900); }
.why-section::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0, 18, 51, .86), rgba(0, 18, 51, .92)), url("/assets/Parthenon.jpg") center 38% / cover no-repeat;
}

/* Continuous carousel: three cards in view, drifting left in a seamless loop (js/why.js clones the set once).
   Without JS the row is a plain horizontally scrollable strip. */
.why-marquee { --gap: clamp(.9rem, 1.6vw, 1.25rem); container-type: inline-size; position: relative; }
.why-track { display: flex; width: max-content; }
.why-card {
  flex: 0 0 auto; box-sizing: border-box; width: max(260px, calc((100cqw - 2 * var(--gap)) / 3)); min-height: 250px; margin-right: var(--gap);
  padding: clamp(1.5rem, 2.4vw, 2.25rem); border: 1px solid rgba(197, 162, 83, .6); background: #fff;
}
.why-rule { display: block; width: 36px; height: 1px; background: var(--gold); margin-bottom: 1.1rem; }
.why-card h3 { font-family: var(--font-serif); font-size: clamp(1.45rem, 1.9vw, 1.75rem); font-weight: 700; line-height: 1.15; color: var(--navy-900); margin: 0 0 .7rem; }
.why-card p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--navy-900); }

.why-marquee:not(.is-running) { overflow-x: auto; }
.why-marquee.is-running { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); }
.why-marquee.is-running .why-track { animation: why-run 48s linear infinite; }
.why-marquee.is-running:hover .why-track, .why-marquee.is-running:focus-within .why-track { animation-play-state: paused; }
@keyframes why-run { to { transform: translateX(-50%); } }


@media (max-width: 960px) { .why-card { width: max(260px, calc((100cqw - var(--gap)) / 2)); } }
@media (max-width: 600px) { .why-card { width: calc(100cqw - 2.5rem); min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .why-marquee.is-running .why-track { animation: none; } }