/* /invest - inv-op styles, moved out of the Webflow embed 2026-09-25. */

/* ===========================================================================
   INVEST — Opportunity & portfolio interaction ("You Choose.")

   Ported declaration-for-declaration from:
     src/components/invest/OpportunityPortfolio.module.css
     src/app/invest/invest.module.css   (.opportunity / .opportunityInner /
                                         .opportunityIntro / .sectionHeading /
                                         .sectionLede)
     src/app/globals.css                (reset, h2, .eyebrow, :focus-visible,
                                         [data-reveal])

   Every var(--color-*), var(--space-*), var(--text-*), var(--radius-*),
   var(--shadow-*), var(--dur-*), var(--ease-*), var(--font-*),
   var(--leading-*) and var(--tracking-*) below is a REPOSITORY token already
   defined at :root on this page (spl_tokens.html). None of them is redefined
   here and no raw hex colour is used.

   Only three custom properties are this component's own, all defined on
   .splport-inv-op below: --splport-inv-op-mx, --splport-inv-op-px (embed container mechanics, since
   tokens.css's --container-max / --gutter were not ported to this page) and
   --splport-inv-op-plate (the raster plate URL). Plus --splport-inv-op-i (the repo's per-folio
   --i index) and --splport-inv-op-reveal-delay (the repo's --reveal-delay), both set
   inline in the markup exactly as the repo sets them.
   =========================================================================== */

/* ---------------- Embed shell + invest.module.css .opportunity ------------- */
.splport-inv-op {
  --splport-inv-op-mx: var(--container-max);
  --splport-inv-op-px: var(--gutter);
  --splport-inv-op-plate: url("https://cdn.prod.website-files.com/69c1e42db2f14712cb15f6e7/6aaca414dd65d039deb32601_invest-portfolio-plate-v1.webp");
  --splport-inv-op-i: 0;

  display: block;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* globals.css body typography */
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;

  /* invest.module.css .opportunity */
  background-color: var(--color-paper);
  padding-block: var(--space-8) var(--space-9);
}

/* globals.css reset, scoped. Wrapped in :where() so these element-level rules
   carry ZERO specificity and can never outrank a component class below —
   `.splport-inv-op button { font: inherit }` would otherwise beat `.splport-inv-op-mode`. */
.splport-inv-op *,
.splport-inv-op *::before,
.splport-inv-op *::after { box-sizing: border-box; }
:where(.splport-inv-op) :where(h2, p, ul, li) { margin: 0; }
:where(.splport-inv-op) :where(svg) { display: block; max-width: 100%; }
:where(.splport-inv-op) :where(button) { font: inherit; color: inherit; }
:where(.splport-inv-op) :where(p, h2, li, a, span) { min-width: 0; }

/* globals.css focus contract */
.splport-inv-op :focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.splport-inv-op :focus:not(:focus-visible) { outline: none; }

/* .container + invest.module.css .opportunityInner */
.splport-inv-op-inner {
  max-width: var(--splport-inv-op-mx);
  margin-inline: auto;
  width:100%;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* invest.module.css .opportunityIntro */
.splport-inv-op-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* globals.css .eyebrow */
.splport-inv-op-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-orange);
}

/* globals.css h2 + invest.module.css .sectionHeading */
.splport-inv-op-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  font-size: var(--text-h2);
  color: var(--color-navy);
  max-width: 18ch;
}

/* invest.module.css .sectionLede */
.splport-inv-op-lede {
  color: var(--color-ink-soft);
  font-size: var(--text-body-lg);
  max-width: 44ch;
}

/* ---------------- OpportunityPortfolio.module.css .wrap ------------------- */
.splport-inv-op-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
  gap: var(--space-8);
  align-items: center;
}

/* .copy */
.splport-inv-op-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* .modes */
.splport-inv-op-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--color-paper-deep);
  border-radius: 999px;
  padding: 4px;
  background-color: var(--color-white);
  width: min(100%, 430px);
}

/* .mode */
.splport-inv-op-mode {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: center;
  min-height: 46px;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  border-radius: 999px;
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.splport-inv-op-mode:hover { color: var(--color-ink); }

/* .modeSelected */
.splport-inv-op-mode.is-on {
  color: var(--color-navy);
  background-color: var(--color-eucalyptus);
  box-shadow: inset 0 0 0 1px var(--color-eucalyptus-deep);
}

/* .modeDot */
.splport-inv-op-modedot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  position: relative;
  flex: none;
}

.splport-inv-op-mode.is-on .splport-inv-op-modedot::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background-color: var(--color-orange);
}

/* .explanation */
.splport-inv-op-explanation {
  font-size: var(--text-body-lg);
  color: var(--color-ink);
  max-width: 42ch;
  min-height: 3.2em;
}

/* .tabs — repo is repeat(4, …); six focus tabs ship here, so the same rule
   runs at repeat(3, …). Every other declaration is unchanged. */
.splport-inv-op-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  border-top: 1px solid var(--color-paper-deep);
  padding-top: var(--space-5);
}

/* .tab */
.splport-inv-op-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-1) var(--space-3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  color: var(--color-ink-soft);
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  font-weight: 600;
  text-align: center;
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.splport-inv-op-tab:hover { color: var(--color-ink); }

/* .tabSelected */
.splport-inv-op-tab.is-on {
  color: var(--color-navy);
  border-bottom-color: var(--color-orange);
}

/* .tabIcon */
.splport-inv-op-tabicon {
  width: 26px;
  height: 26px;
  color: var(--color-navy);
  flex: none;
}

.splport-inv-op-tab.is-on .splport-inv-op-tabicon { color: var(--color-orange); }

/* .annotation — ONE shared panel */
.splport-inv-op-annotation {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background-color: var(--color-white);
  border: 1px solid var(--color-paper-deep);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

/* .annotationMark */
.splport-inv-op-annotation-mark {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--color-eucalyptus-strong);
  display: grid;
  place-items: center;
  color: var(--color-eucalyptus-strong);
  background-color: var(--color-eucalyptus);
}

/* .annotationGlyph */
.splport-inv-op-annotation-glyph { width: 26px; height: 26px; }

/* Body column. The repo annotation carries one paragraph; the six focus tabs
   specified for this page carry a value AND a detail, so the value sits above
   the repo's annotation text in the same panel. Heading treatment is the
   globals.css h4 contract (serif / 400 / leading-heading / tracking-display). */
.splport-inv-op-annotation-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.splport-inv-op-annotation-value {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-h4);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  color: var(--color-navy);
}

/* .annotationText */
.splport-inv-op-annotation-text {
  font-size: var(--text-body);
  color: var(--color-ink);
  margin: 0;
  max-width: 40ch;
}

/* ---------------- Folio stage (.stage) ------------------------------------ */
.splport-inv-op-stage {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  isolation: isolate;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* .folios */
.splport-inv-op-folios {
  position: absolute;
  inset: 0 0 20% 0;
}

/* .folio */
.splport-inv-op-folio {
  position: absolute;
  bottom: 0;
  width: 174px;
  aspect-ratio: 3 / 4;
  background-color: var(--color-white);
  border: 1px solid var(--color-paper-deep);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transform-origin: bottom center;
  transition: transform 400ms var(--ease-out), opacity 300ms var(--ease-out),
    box-shadow 300ms var(--ease-out);
}

/* .folioHouse */
.splport-inv-op-folio-house {
  width: 100%;
  height: auto;
  color: var(--color-navy);
  opacity: 0.9;
}

/* .stamp */
.splport-inv-op-stamp {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-eucalyptus-strong);
  background-color: var(--color-eucalyptus);
  border: 1px solid var(--color-eucalyptus-strong);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
}

/* .connector — short orange line + node down toward the security sheet */
.splport-inv-op-connector {
  position: absolute;
  left: 50%;
  bottom: -30px;
  width: 2px;
  height: 30px;
  background-color: var(--color-orange);
  transform: translateX(-50%);
  transition: opacity 300ms var(--ease-out);
}

.splport-inv-op-connector::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-navy);
  border: 2.5px solid var(--color-orange);
  transform: translateX(-50%);
}

/* .folioLead */
.splport-inv-op-folio.is-lead {
  left: 2%;
  width: min(54%, 290px);
  aspect-ratio: auto;
  height: auto;
  z-index: 6;
  padding: var(--space-5);
}

.splport-inv-op-folio.is-lead .splport-inv-op-folio-house {
  width: 62%;
  align-self: center;
}

/* .rows */
.splport-inv-op-rows {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* .row */
.splport-inv-op-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-ink-soft);
  transition: color var(--dur-base) var(--ease-out);
}

/* .rowIcon */
.splport-inv-op-rowicon { width: 20px; height: 20px; }

/* .rowLabel */
.splport-inv-op-rowlabel {
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  font-weight: 600;
  white-space: nowrap;
}

/* .rowRule */
.splport-inv-op-rowrule {
  height: 1px;
  background-color: var(--color-paper-deep);
}

/* .rowOn */
.splport-inv-op-row.is-on { color: var(--color-orange); }
.splport-inv-op-row.is-on .splport-inv-op-rowrule { background-color: var(--color-orange); }

/* Non-lead folios — arrangement per mode */
.splport-inv-op-folio:not(.is-lead) {
  left: 30%;
  z-index: calc(5 - var(--splport-inv-op-i));
  transition-delay: calc(var(--splport-inv-op-i) * 40ms);
}

.splport-inv-op-stage[data-mode="one"] .splport-inv-op-folio.is-lead {
  transform: translateY(-8px);
}

.splport-inv-op-stage[data-mode="one"] .splport-inv-op-folio:not(.is-lead) {
  transform: translateX(calc(var(--splport-inv-op-i) * 16px)) scale(0.8);
  opacity: calc(0.6 - (var(--splport-inv-op-i) - 1) * 0.14);
}

.splport-inv-op-stage[data-mode="one"] .splport-inv-op-folio:not(.is-lead) .splport-inv-op-connector {
  opacity: 0.25;
}

.splport-inv-op-stage[data-mode="diversified"] .splport-inv-op-folio:not(.is-lead) {
  transform: translateX(calc(var(--splport-inv-op-i) * 98px - 46px)) translateY(-16px)
    rotate(calc((var(--splport-inv-op-i) - 2) * 1.5deg)) scale(0.92);
  opacity: 1;
}

.splport-inv-op-stage[data-mode="diversified"] .splport-inv-op-folio.is-lead {
  transform: translateY(-6px);
}

/* The diversified state swaps in the approved raster plate. */
.splport-inv-op-stage[data-mode="diversified"] {
  min-height: 610px;
}

.splport-inv-op-stage[data-mode="diversified"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--splport-inv-op-plate) center / contain no-repeat;
  animation: splport-inv-op-portfolio-emerge 1.05s var(--ease-out) both;
}

.splport-inv-op-stage[data-mode="diversified"] .splport-inv-op-folios,
.splport-inv-op-stage[data-mode="diversified"] .splport-inv-op-sheet {
  opacity: 0;
  pointer-events: none;
}

.splport-inv-op-stage[data-mode="diversified"] .splport-inv-op-leadglyph {
  top: 8%;
  right: 8%;
  box-shadow: var(--shadow-md);
}

@keyframes splport-inv-op-portfolio-emerge {
  from {
    opacity: 0;
    transform: translateY(72px) scale(0.96);
    clip-path: inset(72% 0 0 0 round var(--radius-md));
  }
  to {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0 round var(--radius-md));
  }
}

/* .sheet — deep-navy first registered mortgage layer */
.splport-inv-op-sheet {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 0;
  height: 16%;
  min-height: 66px;
  background-color: var(--color-navy);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-inline: var(--space-6);
  z-index: 1;
  transition: box-shadow 300ms var(--ease-out);
}

/* Selection adds a pale-eucalyptus inner rim (INVEST_DIRECTION.md) */
.splport-inv-op-stage[data-mode="diversified"] .splport-inv-op-sheet {
  box-shadow: inset 0 0 0 2px var(--color-eucalyptus), var(--shadow-lg);
}

/* .sheetMark */
.splport-inv-op-sheetmark {
  flex: none;
  width: 40px;
  height: 40px;
  color: var(--color-on-navy);
}

/* .sheetLabel */
.splport-inv-op-sheetlabel {
  font-family: var(--font-serif);
  font-size: clamp(0.9rem, 0.7rem + 0.8vw, 1.3rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-navy);
}

/* .leadFocusGlyph */
.splport-inv-op-leadglyph {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--color-eucalyptus-strong);
  background-color: var(--color-eucalyptus);
  display: grid;
  place-items: center;
  color: var(--color-eucalyptus-strong);
  z-index: 7;
}

/* .leadFocusIcon */
.splport-inv-op-leadicon { width: 28px; height: 28px; }

/* ---------------- Scroll reveal (globals.css [data-reveal]) ----------------
   Enhancement only. The hidden state exists ONLY under .splport-inv-op-armed, which
   the inline script adds after it has confirmed an IntersectionObserver, a
   rendered document and no reduced-motion preference. With no script, a frozen
   document, or a failed observer the class is never added and everything
   renders in its final, visible state. */
.splport-inv-op-armed [data-splport-inv-op-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity var(--dur-reveal) var(--ease-out) var(--splport-inv-op-reveal-delay, 0ms),
    transform var(--dur-reveal) var(--ease-out) var(--splport-inv-op-reveal-delay, 0ms);
}

.splport-inv-op-armed [data-splport-inv-op-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ---------------- Responsive (repo breakpoints) --------------------------- */
@media (max-width: 900px) {
  .splport-inv-op-wrap {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .splport-inv-op-stage { min-height: 400px; }

  .splport-inv-op-stage[data-mode="diversified"] { min-height: 430px; }

  .splport-inv-op-stage[data-mode="diversified"] .splport-inv-op-folio:not(.is-lead) {
    transform: translateX(calc(var(--splport-inv-op-i) * 64px - 30px)) translateY(-12px)
      rotate(calc((var(--splport-inv-op-i) - 2) * 1.5deg)) scale(0.88);
  }
}

@media (max-width: 520px) {
  .splport-inv-op-tabs {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .splport-inv-op-folio.is-lead { width: 58%; }

  .splport-inv-op-folio:not(.is-lead) { width: 120px; }

  .splport-inv-op-stage[data-mode="diversified"] .splport-inv-op-folio:not(.is-lead) {
    transform: translateX(calc(var(--splport-inv-op-i) * 44px - 20px)) translateY(-10px)
      rotate(calc((var(--splport-inv-op-i) - 2) * 1.2deg)) scale(0.82);
  }
}

/* ---------------- Reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .splport-inv-op-folio,
  .splport-inv-op-connector,
  .splport-inv-op-sheet {
    transition: none;
  }

  .splport-inv-op-stage[data-mode="diversified"]::before {
    animation: none;
  }

  .splport-inv-op-armed [data-splport-inv-op-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* B1: six finalized rows use intrinsic mobile folio height; retain the sheet and 30px connector. */
@media(max-width:900px){
.splport-inv-op-stage[data-mode="one"]{padding-top:var(--space-5);padding-bottom:calc(66px + var(--space-6));}
.splport-inv-op-stage[data-mode="one"] .splport-inv-op-folios{position:relative;inset:auto;}
.splport-inv-op-stage[data-mode="one"] .splport-inv-op-folio.is-lead{position:relative;bottom:auto;}
}
/* 2026-09-25: the One opportunity / Diversified portfolio switch was removed
   (it repeated the section above and read like a fund); main-heading size. */
html body .splport-inv-op-heading:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e){font-size:clamp(43px,6.94vw,88px)!important;line-height:1.04!important}