/* Invata Global Capital: "Blueprint to skyline". Two scroll films (K1 blueprint to building, C1 clouds to skyline)
   and the asset classes drawn as gold blueprint elevations. Loaded after film.css on the Capital home page only. */
:root { --navy: #0C1424; --plan: rgba(240, 212, 137, .9); }

/* ---------- what we invest in: the asset classes as blueprint elevations ---------- */
/* the blueprint ground fades in and out (site.css --fade), so the films above and below run straight into it */
.assets::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-color: var(--navy);
  background-image: linear-gradient(rgba(240,212,137,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(240,212,137,.045) 1px, transparent 1px);
  background-size: 48px 48px; background-position: -1px -1px; -webkit-mask-image: var(--fade); mask-image: var(--fade); }
.assets { padding-block: clamp(140px, 16vw, 220px); }
.assets h2 { font: 800 clamp(38px, 5vw, 68px)/1 var(--head); }
.asset-list { margin: 0; padding: 0; list-style: none; }
.asset-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(20px, 4vw, 56px); align-items: center;
  padding: clamp(28px, 4vw, 48px) 0; }
.asset-list li + li { border-top: 1px solid rgba(240,212,137,.14); }
.asset-list h3 { margin: 0; font: italic 600 clamp(38px, 4.6vw, 64px)/.95 var(--serif); color: var(--ivory); }
.asset-list .n { display: block; margin-bottom: 10px; font: 600 13px/1 var(--head); letter-spacing: .18em; color: var(--gold-hi); }
.asset-list p { margin: 0; font-size: 18px; max-width: 34ch; }
svg.plan { display: block; width: 100%; height: auto; fill: none; stroke: var(--plan); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(240,212,137,.28)); overflow: visible; }
svg.plan > * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s cubic-bezier(.6,.05,.25,1) calc(var(--i, 0) * 40ms); }
svg.plan .soft { stroke: rgba(240,212,137,.38); }
svg.plan.drawn > * { stroke-dashoffset: 0; }
@media (max-width: 860px) {
  .asset-list li { grid-template-columns: 1fr; gap: 16px; }
  .asset-list svg.plan { order: -1; max-width: 520px; }
}

/* ---------- how we invest: five steps over the skyline film ---------- */
.how .shade { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,14,20,.82) 0%, rgba(11,14,20,.5) 38%, rgba(11,14,20,0) 66%); }
.how .panel { position: absolute; left: var(--gl); top: clamp(96px, 16vh, 150px); bottom: clamp(48px, 9vh, 96px); width: min(520px, calc(100% - var(--gl) - var(--gr)));
  display: flex; flex-direction: column; }
.how h2 { margin: 0 0 12px; font: 800 clamp(38px, 5vw, 68px)/1 var(--head); letter-spacing: -.02em; }
.how .lede { margin: 0; color: rgba(236,231,220,.82); max-width: 40ch; font-size: 18px; }
.how ol { margin: auto 0 0; padding: 0; list-style: none; display: grid; gap: 4px; counter-reset: s; }
.how li { counter-increment: s; display: grid; grid-template-columns: 52px 1fr; column-gap: 8px; opacity: .3; transition: opacity .4s ease; }
.how li::before { content: "0" counter(s); grid-row: span 2; padding-top: .55em; font: 600 13px/1 var(--head); letter-spacing: .16em; color: var(--gold-hi); }
.how li h3 { margin: 0; font: italic 600 clamp(32px, 3.6vw, 50px)/1.1 var(--serif); }
.how li p { margin: 0; max-height: 0; overflow: hidden; opacity: 0; font-size: 17px; color: rgba(236,231,220,.86); transition: max-height .45s ease, opacity .45s ease, margin .45s ease; }
.how li.on { opacity: 1; }
.how li.on:not(:has(+ li.on)) p { max-height: 5em; opacity: 1; margin: 2px 0 10px; }
.film:not(.live) .how li, .film.still .how li, .how.film:not(.live) li, .how.film.still li { opacity: 1; }
.how.film:not(.live) li p, .how.film.still li p { max-height: none; opacity: 1; margin: 2px 0 10px; }
@media (max-width: 760px) {
  .how .shade { background: linear-gradient(180deg, rgba(11,14,20,.78) 0%, rgba(11,14,20,.2) 40%, rgba(11,14,20,.55) 70%, rgba(11,14,20,.9) 100%); }
  .how .panel { top: 84px; bottom: 32px; }
}

/* ---------- investor access ---------- */
.access h2 { font: 800 clamp(38px, 5vw, 68px)/1 var(--head); }