/* =====================================================================
   Vilasa — /investors/ "The Commercial Case".
   Image-led cinematic argument page in the front-page design language:
   full-bleed panels, split media, brass accents, Kalnia display.
   Loads on top of vilasa-blog.css (tokens / nav / footer).
   ===================================================================== */
body.page-investors{background:#05131f}
.inv{color:var(--mist)}
.inv-wrap{max-width:1240px;margin:0 auto;padding-left:var(--g);padding-right:var(--g)}
.inv .eyebrow{color:var(--brass);margin-bottom:16px}
.inv [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--out),transform .9s var(--out)}
.inv [data-reveal].is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.inv [data-reveal]{opacity:1;transform:none;transition:none}}

/* ---------- Block A — thesis hero ---------- */
.inv-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.inv-hero__bg{position:absolute;inset:0;z-index:-2}
.inv-hero__bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
@media (max-width:768px) {
  .inv-hero__bg img{
    object-position:left;
  }
}
.inv-hero__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(4,11,20,.97),rgba(4,11,20,.5) 46%,rgba(4,11,20,.32) 74%,rgba(4,11,20,.55))}
.inv-hero__inner{padding-top:clamp(120px,20vh,220px);padding-bottom:clamp(58px,9vh,112px)}
.inv-hero__t{font-family:var(--ff-d);font-weight:400;font-size:clamp(40px,7.2vw,108px);line-height:1;letter-spacing:-.02em;margin:0 0 clamp(22px,3.6vh,38px);max-width:15ch}
.inv-hero__lede{font-size:clamp(15px,1.6vw,19px);line-height:1.75;color:rgba(239,241,236,.84);max-width:58ch;margin-bottom:clamp(26px,4.2vh,42px)}

/* ---------- Block B — data over the corridor render ---------- */
.inv-data{position:relative;padding:clamp(66px,10vh,128px) var(--g);overflow:hidden;isolation:isolate}
.inv-data__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.inv-data__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(5,19,31,.97),rgba(5,19,31,.8) 55%,rgba(5,19,31,.68))}
.inv-data .eyebrow{max-width:1240px;margin:0 auto 22px}
.inv-figs{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid rgba(190,147,80,.55)}
.inv-fig{padding:clamp(24px,2.6vw,40px) clamp(16px,1.5vw,26px) 0}
.inv-fig+.inv-fig{border-left:1px solid rgba(239,241,236,.14)}
.inv-fig b{display:block;font-family:var(--ff-d);font-weight:400;font-size:clamp(28px,3.3vw,52px);line-height:1;color:var(--mist);letter-spacing:-.01em;margin-bottom:12px}
.inv-fig span{font-size:10.5px;letter-spacing:.08em;line-height:1.5;color:rgba(239,241,236,.62);text-transform:uppercase}
.inv-src{max-width:1240px;margin:20px auto 0;font-size:11px;letter-spacing:.03em;color:rgba(239,241,236,.42)}
@media(max-width:900px){.inv-figs{grid-template-columns:repeat(3,1fr);row-gap:30px}.inv-fig:nth-child(4){border-left:none}}
@media(max-width:520px){.inv-figs{grid-template-columns:repeat(2,1fr);row-gap:26px}.inv-fig{border-left:none}.inv-fig:nth-child(odd){border-right:1px solid rgba(239,241,236,.14)}}

/* demand note band */
.inv-band{padding:clamp(50px,7.5vh,92px) var(--g);border-top:1px solid rgba(239,241,236,.08)}
.inv-note{max-width:1040px;margin:0 auto;font-size:clamp(16px,1.75vw,23px);line-height:1.68;color:rgba(239,241,236,.82)}
.inv-note .lead{font-family:var(--ff-d);color:var(--mist)}

/* ---------- Block C — design decision (split media + argument) ---------- */
.inv-design{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(239,241,236,.08)}
.inv-design__media{position:relative;overflow:hidden;min-height:clamp(440px,64vh,780px)}
.inv-design__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform 1.4s var(--out)}
.inv-design__media:hover img{transform:scale(1.07)}
.inv-design__tag{position:absolute;left:clamp(18px,2vw,32px);bottom:clamp(18px,2vw,32px);z-index:2;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(239,241,236,.92);background:rgba(4,11,20,.42);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:9px 15px;border:1px solid rgba(239,241,236,.16);border-radius:100px}
.inv-design__text{padding:clamp(50px,6vw,104px) clamp(28px,4vw,80px);display:flex;flex-direction:column;justify-content:center}
.inv-design__text h2{font-family:var(--ff-d);font-weight:400;font-size:clamp(30px,3.9vw,60px);line-height:1.0;letter-spacing:-.018em;margin:12px 0 clamp(22px,3vh,34px);max-width:14ch}
.inv-design__text p{font-size:clamp(14px,1.4vw,16px);line-height:1.82;color:rgba(239,241,236,.8);margin-bottom:16px;max-width:54ch}
.inv-design__note{margin-top:6px!important;margin-bottom:0!important;font-family:var(--ff-d);font-style:italic;font-size:clamp(16px,1.6vw,22px);line-height:1.4;color:var(--brass)!important}
.inv-design__text p:first-of-type::first-letter{font-family:var(--ff-d);font-size:1.15em;color:var(--brass);padding-right:.02em}
@media(max-width:860px){.inv-design{grid-template-columns:1fr}.inv-design__media{min-height:clamp(300px,46vh,470px)}}

/* full-bleed statement panel */
.inv-statement{position:relative;min-height:clamp(460px,82vh,880px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.inv-statement img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.inv-statement__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(4,11,20,.9),rgba(4,11,20,.12) 56%,rgba(4,11,20,.35))}
.inv-statement__copy{padding-bottom:clamp(52px,9vh,112px)}
.inv-statement__copy h2{font-family:var(--ff-d);font-weight:400;font-size:clamp(32px,5.6vw,88px);line-height:1;letter-spacing:-.02em;margin:0;max-width:16ch}

/* ---------- Block D — visual sequence ---------- */
.inv-seq{padding:clamp(60px,9vh,112px) 0;border-top:1px solid rgba(239,241,236,.08)}
.inv-seq__head{max-width:1240px;margin:0 auto clamp(28px,4.4vh,50px);padding:0 var(--g)}
.inv-seq__head h2{font-family:var(--ff-d);font-weight:400;font-size:clamp(24px,3vw,44px);line-height:1.06;letter-spacing:-.01em;margin-top:12px;max-width:22ch}
.inv-seq__grid{max-width:1440px;margin:0 auto;padding:0 var(--g);display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.5vw,22px)}
.inv-frame{position:relative;aspect-ratio:16/11;border-radius:4px;overflow:hidden;background:var(--pine-2);isolation:isolate}
.inv-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform 1.3s var(--out)}
.inv-frame:hover img{transform:scale(1.08)}
.inv-frame::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(4,11,20,.92),rgba(4,11,20,.1) 56%,transparent 82%)}
.inv-frame::after{content:"";position:absolute;inset:0;z-index:3;box-shadow:inset 0 0 0 1px rgba(239,241,236,.08);border-radius:4px;pointer-events:none}
.inv-frame figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(20px,2.4vw,36px)}
.inv-frame__k{font-family:var(--ff-d);font-size:12px;letter-spacing:.12em;color:var(--brass);display:block;margin-bottom:9px}
.inv-frame figcaption p{font-size:clamp(14px,1.5vw,19px);line-height:1.36;color:var(--mist);max-width:46ch}
@media(max-width:720px){.inv-seq__grid{grid-template-columns:1fr}.inv-frame{aspect-ratio:3/2}}

/* ---------- Block E — strategic insight (full-bleed) ---------- */
.inv-firm{position:relative;min-height:clamp(500px,84vh,900px);display:flex;align-items:center;text-align:center;overflow:hidden;isolation:isolate}
.inv-firm__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.inv-firm__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(4,11,20,.86),rgba(4,11,20,.62) 50%,rgba(4,11,20,.82))}
.inv-firm__copy{max-width:920px}
.inv-firm h2{font-family:var(--ff-d);font-weight:400;font-size:clamp(30px,4.6vw,66px);line-height:1.03;letter-spacing:-.015em;margin:0 auto clamp(24px,3.6vh,40px);max-width:18ch}
.inv-firm p{font-size:clamp(15px,1.55vw,18px);line-height:1.8;color:rgba(239,241,236,.86);max-width:58ch;margin:0 auto}

/* ---------- Block F — form (Connectribe embed over a render) ---------- */
/* the two columns are centred as a pair (not pushed to the section edges), so
   the intro sits close to the form instead of a huge empty middle gap. */
.inv-form-sec{position:relative;overflow:hidden;isolation:isolate;padding:clamp(66px,10vh,132px) var(--g);display:grid;grid-template-columns:minmax(0,440px) minmax(0,600px);justify-content:center;gap:clamp(34px,4.5vw,80px);align-items:center;border-top:1px solid rgba(239,241,236,.08)}
.inv-form-sec__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.inv-form-sec__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(to right,rgba(4,11,20,.95),rgba(4,11,20,.82) 48%,rgba(4,11,20,.72)),linear-gradient(to top,rgba(4,11,20,.55),transparent 60%)}
.inv-form__intro h2{font-family:var(--ff-d);font-weight:400;font-size:clamp(28px,3.6vw,54px);line-height:1.02;letter-spacing:-.015em;margin:14px 0 22px;max-width:13ch}
.inv-form__intro p{font-size:clamp(14px,1.4vw,16px);line-height:1.8;color:rgba(239,241,236,.78);max-width:42ch}
.inv-form__contact{margin-top:clamp(24px,3.4vh,38px);display:flex;flex-direction:column;gap:8px;font-family:var(--ff-d);font-size:clamp(15px,1.5vw,19px)}
.inv-form__contact a{color:var(--mist);transition:color .4s var(--out)}
.inv-form__contact a:hover{color:var(--brass)}

/* the Connectribe embed ships a WHITE form with inline styles; scope all
   overrides under the wrapper class and restyle it into the theme's dark glass
   panel. Its fields stack in one column by default — force two-per-row, with
   Interest (select) and Message (textarea) spanning full. */
.inv-form__wrap{width:100%;justify-self:stretch}
.inv-form__wrap .sp-form-wrap{max-width:none!important;background:rgba(6,20,34,.6)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(239,241,236,.1)!important;border-radius:8px!important;box-shadow:0 34px 90px -44px rgba(0,0,0,.8);padding:clamp(26px,2.6vw,40px)!important}
.inv-form__wrap .sp-form-wrap h2{color:var(--mist)!important;font-family:var(--ff-d)!important;font-weight:400!important;letter-spacing:-.01em}
.inv-form__wrap .sp-form-wrap > p{color:var(--fog)!important}
.inv-form__wrap .sp-form-wrap a{color:var(--brass)!important}

.inv-form__wrap form{display:grid!important;grid-template-columns:1fr 1fr!important;gap:16px 16px!important}
.inv-form__wrap form > div:has(select),
.inv-form__wrap form > div:has(textarea){grid-column:1 / -1}
.inv-form__wrap form label{color:var(--fog)!important;font-size:10px!important;letter-spacing:.16em!important;text-transform:uppercase!important;font-weight:400!important}
.inv-form__wrap form label span{color:var(--brass)!important}
.inv-form__wrap form input,
.inv-form__wrap form select,
.inv-form__wrap form textarea{background:rgba(239,241,236,.05)!important;border:1px solid rgba(239,241,236,.16)!important;border-radius:4px!important;color:var(--mist)!important;font-family:var(--ff-b)!important}
.inv-form__wrap form input::placeholder,
.inv-form__wrap form textarea::placeholder{color:rgba(138,152,143,.6)!important}
.inv-form__wrap form input:focus,
.inv-form__wrap form select:focus,
.inv-form__wrap form textarea:focus{border-color:var(--brass)!important}
.inv-form__wrap form select{appearance:none!important;-webkit-appearance:none!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23BE9350' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 14px center!important;padding-right:38px!important}
.inv-form__wrap form select option{background:#0a1d33!important;color:var(--mist)!important}
.inv-form__wrap [id^="sp-submit"]{background:var(--brass)!important;color:var(--pine)!important;font-family:var(--ff-b)!important;letter-spacing:.04em;border-radius:4px!important}

@media(max-width:860px){
  .inv-form-sec{grid-template-columns:minmax(0,560px);justify-content:center;gap:34px}
}
@media(max-width:480px){
  .inv-form__wrap form{grid-template-columns:1fr!important}
}