/* ==========================================================================
   Full-bleed feature panels, principles grid and closing lockup.
   ========================================================================== */

/* Scroll snapping was tried here and removed: with every section a snap target,
   the reader met resistance at every boundary and short scrolls kept getting
   pulled back. If it is ever reinstated, snap a single contiguous run of
   equal-height panels — never the whole page. */

/* --- Full-bleed feature sections (their "Featured · 1…4") ----------------- */

.feature {
  position: relative;
  min-height: 96svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

/* Full-bleed panels are anchor targets from the hero logos. The global
   scroll-padding-top would park them 80px down and show a sliver of the
   previous panel, so cancel it here and let them land flush. */
.feature { scroll-margin-top: -80px; }

.feature__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--feature-image, var(--feature-fallback));
  background-size: cover;
  background-position: center;
}

/* Background video. Sits in the same layer as .feature__media, so a panel uses
   one or the other. The poster is what shows before playback and instead of it
   under reduced motion, so the panel is never empty. */
.feature__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--brown-d);
  pointer-events: none;
}

.feature__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(14,9,6,0.94) 8%, rgba(14,9,6,0.42) 52%, rgba(14,9,6,0.66) 100%);
}

/* Video panels need a heavier, left-weighted scrim. The generated gradients are
   soft and even; real footage has bright detail that cuts straight through type.
   Weighted left because the copy is left-aligned — the right side stays legible
   as picture rather than being flattened along with it. */
/* Lightened so the footage actually reads. The two layers multiply, so the
   effective alpha is 1-(1-a1)(1-a2) — about 0.66 in the text column, which
   measures ~6:1 against sand text over the brightest frame content (the white
   telemetry panels). Values were not estimated — they were swept and measured
   against the live render with the copy hidden, sampling the brightest 1% of
   background pixels across four points in the loop.

   Measured worst-case contrast for the thesis text:
     this setting            6.77:1   <- chosen
     one step brighter       4.93:1   too close to the 4.5 floor as frames vary
     two steps brighter      3.38:1   fails

   Lighten further only with a fresh measurement. */
.feature--video .feature__scrim {
  background:
    linear-gradient(to right,
      rgba(10,7,5,0.80) 0%, rgba(10,7,5,0.72) 35%,
      rgba(10,7,5,0.38) 70%, rgba(10,7,5,0.16) 100%),
    linear-gradient(to top,
      rgba(10,7,5,0.54) 0%, rgba(10,7,5,0.14) 55%, rgba(10,7,5,0.30) 100%);
}

.feature__inner { width: 100%; padding-block: clamp(46px, 6vw, 84px); }

.feature__index {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--taupe);
}

.feature__logo { margin-top: 22px; }
.feature__logo img { height: var(--logo-h, 34px); }

/* Company mark + project mark, divided by a hairline. Used where an investment
   has a distinct project brand under it. */
.feature__marks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 30px);
  margin-top: 22px;
}

.feature__marks .feature__logo { margin-top: 0; }

.feature__marks-rule {
  width: 1px;
  height: 34px;
  background: var(--hairline-strong);
}

/* Slightly quieter than the company mark: the project sits under the company,
   and equal weight would read as two separate investments. */
.feature__project img {
  height: clamp(34px, 3.3vw, 46px);
  opacity: 0.82;
}

@media (max-width: 560px) {
  .feature__marks-rule { display: none; }
  .feature__marks { gap: 14px; }
}

.feature__thesis {
  max-width: 54ch;
  margin-top: 24px;
  font-size: clamp(1.02rem, 1.3vw, 1.16rem);
  line-height: 1.66;
}

.feature__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sand-dim);
}

/* External link to a portfolio company, sitting in the panel's meta row. */
.feature__link {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--taupe);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.feature__link:hover {
  color: var(--sand);
  border-bottom-color: var(--sand);
}

.feature__link-arrow {
  font-size: 0.9em;
  transition: transform 0.25s ease;
}

.feature__link:hover .feature__link-arrow { transform: translate(2px, -2px); }


/* Each feature gets its own generated backdrop so they don't look identical. */
.feature--ai {
  --feature-fallback:
    radial-gradient(46% 52% at 74% 24%, rgba(190, 206, 200, 0.30), transparent 68%),
    radial-gradient(80% 70% at 20% 80%, rgba(58, 62, 60, 0.72), transparent 70%),
    linear-gradient(146deg, #1D2422 0%, #35403C 42%, #0E1211 100%);
}
.feature--re {
  --feature-fallback:
    radial-gradient(44% 50% at 28% 22%, rgba(224, 209, 186, 0.34), transparent 66%),
    radial-gradient(80% 70% at 78% 82%, rgba(120, 82, 58, 0.62), transparent 70%),
    linear-gradient(150deg, #3D2820 0%, #5C3D2D 40%, #150D08 100%);
}
/* Direct holding — commercial property. Same backdrop family as the others so
   the run reads as one system; the index label carries the distinction. */
.feature--prop {
  --feature-fallback:
    radial-gradient(46% 52% at 30% 24%, rgba(226, 206, 178, 0.28), transparent 68%),
    radial-gradient(80% 70% at 74% 80%, rgba(104, 78, 56, 0.62), transparent 70%),
    linear-gradient(148deg, #33251C 0%, #4E3A2B 42%, #130D09 100%);
}

.feature--hc {
  --feature-fallback:
    radial-gradient(44% 50% at 70% 26%, rgba(214, 198, 206, 0.30), transparent 68%),
    radial-gradient(78% 68% at 24% 82%, rgba(88, 66, 78, 0.66), transparent 70%),
    linear-gradient(150deg, #2A1F26 0%, #43323C 42%, #120C10 100%);
}

/* --- Generated aura -------------------------------------------------------
   CURRENTLY UNUSED. Built for the Cloudnine panel, then replaced by the stock
   footage montage. Kept because there is no version control here to recover it
   from, and because it is the only backdrop technique on this page that costs
   no bytes and physically cannot judder or seam — worth reaching for if a panel
   ever needs a backdrop and has no imagery.

   To use: swap a panel's <video> for
     <div class="feature__aura"><span class="aura__blob aura__blob--1"></span>…</div>
   and drop that panel's feature--video class (this scrim would crush it). */

.feature__aura {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 125%, rgba(14, 9, 8, 0.82), transparent 62%),
    linear-gradient(160deg, #3A2823 0%, #5A403A 45%, #1B1210 100%);
}

.aura__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  will-change: transform;
  opacity: 0.9;
}

.aura__blob--1 {
  width: 62%; height: 105%;
  left: 4%; top: -18%;
  background: radial-gradient(circle at 50% 50%, rgba(236, 182, 150, 1), transparent 66%);
  animation: auraDrift1 54s ease-in-out infinite;
}

.aura__blob--2 {
  width: 70%; height: 120%;
  right: -6%; top: -10%;
  background: radial-gradient(circle at 50% 50%, rgba(212, 156, 160, 0.92), transparent 66%);
  animation: auraDrift2 71s ease-in-out infinite;
}

.aura__blob--3 {
  width: 55%; height: 90%;
  left: 30%; bottom: -26%;
  background: radial-gradient(circle at 50% 50%, rgba(246, 222, 192, 0.8), transparent 68%);
  animation: auraDrift3 63s ease-in-out infinite;
}

/* Periods are coprime-ish (54 / 71 / 63s) so the layers never resynchronise
   into an obvious repeat. Each keyframe set returns to its start. */
@keyframes auraDrift1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(6%, 5%, 0) scale(1.16); }
}
@keyframes auraDrift2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); }
  50%      { transform: translate3d(-7%, 7%, 0) scale(0.94); }
}
@keyframes auraDrift3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.96); }
  50%      { transform: translate3d(4%, -6%, 0) scale(1.2); }
}

/* A very slow breath over the whole field, so it never reads as three blobs. */
.feature__aura::after {
  content: "";
  position: absolute;
  inset: -10%;
  background: radial-gradient(60% 55% at 42% 45%, rgba(255, 238, 218, 0.2), transparent 70%);
  animation: auraBreath 47s ease-in-out infinite;
}

@keyframes auraBreath {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50%      { transform: scale(1.14); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .aura__blob, .feature__aura::after { animation: none; }
}

/* --- Portfolio sliders -----------------------------------------------------
   One slider per asset class. Height is fixed at a single slide, so a category
   costs the same whether it holds two holdings or twenty — which the previous
   one-panel-per-holding layout did not.

   Slides are static HTML so the copy is crawlable and readable without JS;
   motion.js only adds the controls and behaviour on top. With no JS the rail
   is still a native horizontal scroller. */

.rail-wrap{position:relative}

.rail{
  display:flex;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}

.slide{
  position:relative; flex:0 0 auto;
  width:100%;                       /* full-bleed: nothing peeks past the edge */
  height:100svh;
  scroll-snap-align:start; scroll-snap-stop:always;
  overflow:hidden; isolation:isolate;
}
.slide__video{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;background:var(--brown-d);pointer-events:none}
.slide__scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to right,rgba(10,7,5,.86) 0%,rgba(10,7,5,.74) 36%,
                  rgba(10,7,5,.38) 70%,rgba(10,7,5,.20) 100%),
  linear-gradient(to top,rgba(10,7,5,.74) 0%,rgba(10,7,5,.16) 55%,rgba(10,7,5,.36) 100%)}

/* Content sits in .shell so it lines up with every other section even though
   the slide bleeds full width. Raised to clear the controls beneath it. */
.slide__inner{position:absolute;inset:auto 0 0 0;padding-bottom:clamp(112px,13vh,150px)}

.slide__index{font-size:.7rem;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--taupe);margin:0 0 22px}
.slide__mark{margin:0 0 22px}
.slide__mark img{display:block;width:auto;height:var(--logo-h,30px);
  filter:brightness(0) invert(1);opacity:.95}

/* Company mark plus project mark, where a holding has both. */
.slide__marks{display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(16px,2vw,30px);margin:0 0 22px}
.slide__marks .slide__mark{margin:0}
.slide__rule{width:1px;height:34px;background:var(--hairline-strong)}
.slide__project img{display:block;width:auto;height:clamp(34px,3.3vw,46px);
  filter:brightness(0) invert(1);opacity:.82}

.slide__copy{max-width:54ch;color:var(--sand);
  font-size:clamp(1.02rem,1.3vw,1.16rem);line-height:1.66;margin:0}
.slide__meta{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:30px;
  padding-top:20px;border-top:1px solid var(--hairline);
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sand-dim)}
.slide__meta a{color:var(--taupe);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .25s ease,border-color .25s ease}
.slide__meta a:hover{color:var(--sand);border-bottom-color:var(--sand)}
.slide__arrow{margin-left:6px;font-size:.9em}

/* Controls, centred beneath the copy. Injected by motion.js so they never
   appear as dead buttons when the script has not run. */
.rail-nav{
  position:absolute; z-index:3;
  left:50%; transform:translateX(-50%);
  bottom:clamp(34px,4.4vh,54px);
  display:flex; align-items:center; gap:18px;
}
.rail-nav__count{font-family:var(--font-display);font-size:1rem;
  color:var(--sand-dim);font-variant-numeric:tabular-nums}
.rail-nav__btns{display:flex;gap:10px}
.rail-nav button{
  width:46px;height:46px;display:grid;place-items:center;cursor:pointer;
  background:rgba(10,7,5,.35);border:1px solid var(--hairline-strong);
  color:var(--sand);font-size:1rem;line-height:1;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background-color .25s ease,border-color .25s ease,opacity .25s ease}
.rail-nav button:hover:not(:disabled){background:rgba(247,245,242,.12);border-color:var(--sand)}
.rail-nav button:disabled{opacity:.25;cursor:default}

.rail-dots{display:flex;gap:2px;margin-right:2px}
.rail-dots button{width:22px;height:22px;display:grid;place-items:center;
  background:none;border:0;padding:0;cursor:pointer}
.rail-dots button::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--sand);opacity:.28;transition:opacity .3s ease}
.rail-dots button:hover::before{opacity:.7}
.rail-dots button.on::before{opacity:1}

@media (max-width:560px){ .slide__rule{display:none} .slide__marks{gap:14px} }
@media (max-width:760px){
  .slide__inner{padding-bottom:clamp(104px,14vh,132px)}
  .rail-nav{gap:12px}
  .rail-nav button{width:42px;height:42px}
  .rail-nav__count{display:none}
}
@media (prefers-reduced-motion:reduce){ .rail{scroll-behavior:auto} }

/* --- Pillars (their "Four Pillars of Aura") ------------------------------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(44px, 5vw, 72px);
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

.pillar {
  background: var(--panel-inset);
  padding: clamp(30px, 3.2vw, 46px) clamp(24px, 2.6vw, 38px);
}

.pillar__no {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--taupe);
}

.pillar__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.2;
  margin-top: 18px;
}

.pillar__copy { margin-top: 14px; color: var(--sand-dim); font-size: 0.97rem; }

/* --- Scaffolding marker ---------------------------------------------------
   CURRENTLY UNUSED. The two sections that used it — the counter strip and the
   gallery/walkthrough/map — were removed on request. Kept because there is no
   version control here to recover it from, and because the moment real figures
   or media arrive those sections come back. Delete freely if that changes.

   Marks a section the Framer build has but Trasa has no real content for.
   Visible on purpose: a hole to fill, not a finished section. */

.scaffold {
  border: 1px dashed rgba(196, 181, 161, 0.5);
  padding: clamp(30px, 4vw, 54px);
  margin-top: clamp(36px, 4vw, 58px);
  text-align: center;
}

.scaffold__tag {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--taupe);
  color: var(--taupe);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.scaffold__what {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  margin-top: 20px;
}

.scaffold__why { max-width: 54ch; margin: 14px auto 0; color: var(--sand-dim); font-size: 0.95rem; }

/* The closing logo lockup that used to live here was removed with the footer
   block it styled — see the note in index.html's <footer>. */

@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr; }
  .feature { min-height: 0; padding-top: 40vh; }
}