/* V Capital home page: same finish as The V Collective. Loads after homepage-brand.css. */
:root{--vx:cubic-bezier(.16,1,.3,1)}
@keyframes hxUp{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@keyframes hxMask{from{opacity:0;transform:translate3d(0,.3em,0);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(-10% -2% -10% -2%)}}
@keyframes hxRule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hxSlide{from{opacity:0;transform:translate3d(40px,0,0)}to{opacity:1;transform:none}}

/* ---------- hero ---------- */
#hero{position:relative;isolation:isolate}
#hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(620px circle at var(--mx,70%) var(--my,35%),rgba(198,161,91,.16),transparent 62%)}
#hero .hero-badge{animation:hxUp 1.1s var(--vx) .15s both}
#hero .vc-hero-h1{animation:hxMask 1.5s var(--vx) .35s both}
#hero .vc-hero-sub{animation:hxUp 1.1s var(--vx) .9s both}
#hero .vc-hero-cred{animation:hxUp 1.1s var(--vx) 1.1s both}
#hero .vc-hero-ctas{animation:hxUp 1.1s var(--vx) 1.3s both}
#hero .vc-hero-tertiary{animation:hxUp 1.1s var(--vx) 1.5s both}
#hero .vc-hero-panel{animation:hxSlide 1.6s var(--vx) .8s both}
#hero .vc-hero-main,#hero .vc-hero-panel{translate:0 var(--ty,0px)}
#hero .vc-hero-panel{translate:0 calc(var(--ty,0px) * .55)}
#hero .vc-hero-cred-sep{transform-origin:50% 0;animation:hxRule 1.2s var(--vx) 1.5s both}
#hero .vc-hero-panel-inner li{transition:transform .6s var(--vx),color .4s ease,padding-left .6s var(--vx)}
#hero .vc-hero-panel-inner li:hover{color:var(--vc-gold);padding-left:8px}

/* ---------- cards and buttons ---------- */
.dev-card,.strategy-pillar,.article-card,.testimonial,.about-phil-item{position:relative;transition:transform .8s var(--vx),box-shadow .8s ease,border-color .5s ease,background .5s ease}
.dev-card:hover,.article-card:hover,.strategy-pillar:hover{transform:translateY(-6px);box-shadow:0 30px 60px -28px rgba(0,0,0,.55);border-color:rgba(198,161,91,.55)}
.btn-primary,.btn-outline{transition:transform .6s var(--vx),box-shadow .6s ease,border-color .4s ease,color .4s ease}
.btn-primary:hover,.btn-outline:hover{transform:translateY(-2px)}
.btn-primary:hover{box-shadow:0 18px 44px -16px rgba(198,161,91,.65)}
a:focus-visible,button:focus-visible{outline:2px solid #C6A15B;outline-offset:4px}
.faq-item-main{transition:background .5s ease}
.faq-item-main:hover{background:rgba(198,161,91,.04)}

/* ---------- The V Collective, shown on the home page ---------- */
#opportunities.hv{position:relative;padding:112px 0;background:linear-gradient(180deg,#070F1C 0%,#0B1628 60%,#0B1628 100%);border-top:1px solid rgba(198,161,91,.22);border-bottom:1px solid rgba(198,161,91,.22);overflow:hidden;isolation:isolate}
#opportunities.hv::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(900px circle at 85% 20%,rgba(198,161,91,.10),transparent 60%)}
.hv-g{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:72px;align-items:center}
.hv h2{font-family:var(--vc-font-display);font-weight:500;font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1.08;color:#FCFBF8;margin:0 0 22px;text-wrap:balance}
.hv h2 em{color:#C6A15B}
.hv p{color:#A7AFB8;font-size:1.02rem;line-height:1.8;max-width:560px;margin:0 0 30px}
.hv-ft{display:flex;flex-wrap:wrap;gap:14px 36px;margin:0 0 38px;padding:0;list-style:none}
.hv-ft li{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#D8C7A5}
.hv-ft li::before{content:"";display:inline-block;width:18px;height:1px;background:#C6A15B;vertical-align:middle;margin-right:12px}
.hv-card{position:relative;border:1px solid rgba(198,161,91,.35);background:linear-gradient(160deg,rgba(17,31,51,.9),rgba(7,15,28,.95));padding:44px 40px}
.hv-card::before,.hv-card::after{content:"";position:absolute;width:44px;height:44px;border:1px solid #C6A15B;pointer-events:none}
.hv-card::before{top:-1px;left:-1px;border-right:0;border-bottom:0}.hv-card::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.hv-k{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:#C6A15B;margin-bottom:26px;display:block}
.hv-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 0;border-top:1px solid rgba(198,161,91,.16)}
.hv-row:first-of-type{border-top:0;padding-top:0}
.hv-row span{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#A7AFB8}
.hv-row b{font-family:var(--vc-font-display);font-weight:500;font-size:1.7rem;color:#FCFBF8;white-space:nowrap}
.hv-row b small{font-size:.9rem;color:#C6A15B;font-weight:500;margin-left:4px}
.hv-note{margin:26px 0 0!important;font-size:.78rem!important;line-height:1.7!important;color:#8E98A4!important}
.hv .btn-primary{display:inline-block}
@media(max-width:900px){#opportunities.hv{padding:76px 0}.hv-g{grid-template-columns:minmax(0,1fr);gap:44px}.hv-card{padding:34px 24px}}

/* ---------- cookie notice: slim bar instead of a block over the page ---------- */
.cookie-banner{left:0!important;right:0!important;bottom:0!important;max-width:none!important;width:100%;flex-direction:row!important;align-items:center;justify-content:space-between;gap:12px 28px!important;padding:14px clamp(16px,4vw,48px)!important;border:0!important;border-top:1px solid rgba(198,161,91,.3)!important;background:rgba(7,15,28,.96)!important;backdrop-filter:blur(10px)}
.cookie-banner .cookie-title{display:none}
.cookie-banner .cookie-text{margin:0;flex:1 1 320px}
.cookie-banner .cookie-actions{display:flex;gap:10px;flex:0 0 auto}
.cookie-banner .cookie-actions button{padding:10px 22px!important;font-size:.68rem!important}
@media(max-width:640px){.cookie-banner{flex-direction:column!important;align-items:stretch}.cookie-banner .cookie-actions{width:100%}.cookie-banner .cookie-actions button{flex:1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js-vx .vx{opacity:1!important;transform:none!important;filter:none!important}
  #hero .vc-hero-main,#hero .vc-hero-panel{translate:none}
}
@media (hover:none){.dev-card:hover,.article-card:hover,.strategy-pillar:hover{transform:none}}

/* ---------- contact form, same finish as The V Collective access form ---------- */
.cf2{position:relative;background:linear-gradient(160deg,rgba(17,31,51,.92),rgba(7,15,28,.96))!important;border:1px solid rgba(198,161,91,.4)!important}
.cf2::before,.cf2::after{content:"";position:absolute;width:44px;height:44px;border:1px solid #C6A15B;pointer-events:none}
.cf2::before{top:-1px;left:-1px;border-right:0;border-bottom:0}.cf2::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.cf2 .cf-l{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#D8C7A5;margin:18px 0 7px;font-family:var(--vc-font-ui)}
.cf2 .cf-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 14px}
.cf2 .cf-two>div{min-width:0}
.cf2 .form-input,.cf2 .form-select{width:100%;background:#0B1628;border:1px solid #293545;color:#FCFBF8;padding:13px 14px;font:inherit;font-size:.95rem;border-radius:0;transition:border-color .4s ease,box-shadow .5s ease}
.cf2 .form-input:focus,.cf2 .form-select:focus{outline:none;border-color:#C6A15B;box-shadow:0 0 0 1px #C6A15B,0 14px 34px -18px rgba(198,161,91,.6)}
.cf2 .form-select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#C6A15B 50%),linear-gradient(135deg,#C6A15B 50%,transparent 50%);background-position:calc(100% - 17px) 55%,calc(100% - 12px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}
.cf2 .cf-ph{display:flex;gap:8px}.cf2 .cf-ph select{flex:0 0 118px;width:118px;padding-left:10px;padding-right:6px}.cf2 .cf-ph input{flex:1 1 auto;min-width:0}
.cf2 .cf-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.cf2 .form-submit{width:100%;margin-top:24px;cursor:pointer}
.cf2 .form-submit[disabled]{opacity:.6}
.cf2 .cf-msg{margin-top:16px;font-size:.9rem;line-height:1.6}.cf2 .cf-msg.err{color:#d9a39c}.cf2 .cf-msg.ok{color:#a9c4b2}
.cf2 .contact-form-title{font-family:var(--vc-font-display);font-weight:500}
.cf2 .form-checkbox input{appearance:auto;-webkit-appearance:checkbox;width:18px;height:18px;flex:0 0 18px;accent-color:#C6A15B;margin-top:3px;background:transparent;border:0;padding:0}
.cf2 .cf-ph select{flex-basis:104px;width:104px;font-size:.85rem}
.cf2 .cf-ph input::placeholder{font-size:.85rem}

/* ---------- second pass: headline reveals, section rules, index, cursor light ---------- */
.hx-line{position:absolute;top:0;left:50%;width:min(1180px,calc(100% - 48px));height:1px;background:linear-gradient(90deg,transparent,rgba(198,161,91,.75) 18%,rgba(198,161,91,.75) 82%,transparent);transform:translateX(-50%) scaleX(0);transform-origin:50% 50%;transition:transform 1.8s var(--vx);pointer-events:none;z-index:2}
.hx-line.hx-in{transform:translateX(-50%) scaleX(1)}

.hx-idx{position:fixed;right:22px;top:50%;transform:translate(14px,-50%);display:flex;flex-direction:column;gap:6px;z-index:900;opacity:0;pointer-events:none;transition:opacity .8s ease,transform .9s var(--vx)}
.hx-idx.show{opacity:1;pointer-events:auto;transform:translate(0,-50%)}
.hx-idx a{display:flex;align-items:center;justify-content:flex-end;gap:12px;text-decoration:none;height:22px}
.hx-idx a span{font:600 .62rem/1 var(--vc-font-ui);letter-spacing:.2em;text-transform:uppercase;color:#D8C7A5;background:rgba(7,15,28,.92);padding:6px 10px;border:1px solid rgba(198,161,91,.3);opacity:0;transform:translateX(8px);transition:opacity .4s ease,transform .6s var(--vx);white-space:nowrap}
.hx-idx a i{display:block;width:7px;height:7px;border:1px solid #C6A15B;border-radius:50%;background:transparent;transition:background .5s ease,transform .6s var(--vx),box-shadow .5s ease;box-shadow:0 0 0 3px rgba(7,15,28,.55)}
.hx-idx a:hover span,.hx-idx a:focus-visible span{opacity:1;transform:none}
.hx-idx a.on i{background:#C6A15B;transform:scale(1.5);box-shadow:0 0 0 3px rgba(7,15,28,.55),0 0 14px rgba(198,161,91,.7)}
@media(max-width:1280px){.hx-idx{display:none}}
@media (prefers-reduced-motion:reduce){.hx,.hx-line{opacity:1!important;transform:none!important}.hx-line{transform:translateX(-50%)!important}}


/* ================= motion v2: one calm language ================= */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
html{scroll-behavior:auto!important}
:root{--hx-ease:cubic-bezier(.22,1,.36,1)}

/* one reveal for everything: a slow rise, no blur, no clipping */
.hx{opacity:0;transform:translate3d(0,30px,0);transition:opacity 1.5s var(--hx-ease),transform 1.5s var(--hx-ease);transition-delay:calc(var(--i,0) * 110ms)}
.hx.hx-in{opacity:1;transform:none}
.reveal{transform:translate3d(0,30px,0)!important;transition:opacity 1.5s var(--hx-ease),transform 1.5s var(--hx-ease)!important}
.reveal.visible{transform:none!important}

/* hero: the photograph is its own layer, so it can settle in and then drift as the page leaves it */
#hero.hx-on{background-image:none!important;overflow:hidden}
.hx-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;animation:hxSettle 3.2s var(--hx-ease) both}
.hx-bg i{position:absolute;left:0;right:0;top:-8%;bottom:-8%;background-position:center;background-size:cover;background-repeat:no-repeat;transform:translate3d(0,var(--hy,0px),0) scale(var(--hs,1.03));will-change:transform}
@keyframes hxSettle{from{transform:scale(1.12);opacity:.0}to{transform:scale(1);opacity:1}}
#hero.hx-on::before{z-index:1}
#hero .container{position:relative;z-index:2}

/* images drift against the scroll */
.hx-par{translate:0 var(--pz,0px);will-change:transform}

/* progress hairline */
.hx-pg{position:fixed;left:0;top:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#8a6a2c,#C6A15B 55%,#F1DFB8);z-index:2147483000;pointer-events:none}
@media (prefers-reduced-motion:reduce){.hx-bg{animation:none}.hx-par{translate:none}.hx-pg{display:none}}

#hero .vc-hero-main{opacity:var(--fo,1)}
@media (prefers-reduced-motion:reduce){#hero .vc-hero-main{opacity:1}}

/* ---------- cursor light (same family as The V Collective): hero strong, dark sections faint ---------- */
#hero::after{background:radial-gradient(640px circle at var(--mx,72%) var(--my,30%),rgba(198,161,91,.17),transparent 62%)}
.hx-lit{position:relative}
.hx-lit::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(520px circle at var(--lx,50%) var(--ly,50%),rgba(198,161,91,.085),transparent 62%);opacity:0;transition:opacity 1s ease}
.hx-lit.hx-hot::after{opacity:1}
.hx-lit>.container{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.hx-lit::after{display:none}}

/* V Collective section: private-room backdrop, drifting layer */
.hv-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hv-bg i{position:absolute;left:0;right:0;top:-10%;bottom:-10%;background:url('/assets/images/heroes/private-access-2200.webp') center 55%/cover no-repeat;transform:translate3d(0,var(--by,0px),0) scale(var(--bs,1.06));will-change:transform}
.hv-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#070F1C 0%,rgba(11,22,40,.5) 18%,rgba(11,22,40,.42) 72%,#0B1628 100%)}
@media (prefers-reduced-motion:reduce){.hv-bg i{transform:scale(1.04)}}
/* legibility of the Collective intro over the photo */
#opportunities.hv .hv-g>div:first-child>p{position:relative;color:#F5F2EB!important;text-shadow:0 1px 14px rgba(7,15,28,.95),0 0 3px rgba(7,15,28,.8)}
#opportunities.hv .hv-g>div:first-child>p::before{content:"";position:absolute;inset:-18px -26px;z-index:-1;border-radius:18px;background:radial-gradient(ellipse at center,rgba(7,15,28,.72) 0%,rgba(7,15,28,.5) 60%,transparent 100%);pointer-events:none}
/* About: tighter rhythm */
@media(max-width:900px){#about{padding:64px 0!important}#about .about-grid{gap:40px!important}#about .about-image-wrap{position:relative!important;top:auto!important;max-width:340px}#about .about-image-frame{aspect-ratio:4/4.4!important}#about .about-philosophy{margin-top:40px!important}}

/* one animated gold rule replaces static section borders */
.hx-sec{border-top:0!important}
#opportunities.hv{border-bottom:0!important}

/* Philosophy band: Royal Atlantis backdrop */
.ph-band{padding-bottom:230px!important;position:relative;isolation:isolate;overflow:hidden}
.ph-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.ph-bg i{position:absolute;left:0;right:0;top:58%;bottom:0;background:url('/assets/images/heroes/royal-atlantis-navy.webp') 78% 100%/cover no-repeat;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 38%);mask-image:linear-gradient(to bottom,transparent,#000 38%);transform:translate3d(0,var(--by,0px),0) scale(var(--bs,1.06));will-change:transform}
.ph-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0B1628 0%,rgba(11,22,40,.3) 40%,rgba(11,22,40,.3) 80%,#0B1628 100%)}
.ph-band .philosophy-2col p{text-shadow:0 1px 14px rgba(7,15,28,.95),0 0 3px rgba(7,15,28,.8)}
@media (prefers-reduced-motion:reduce){.ph-bg i{transform:scale(1.04)}}
@media(max-width:700px){.ph-bg i{top:66%}.ph-band{padding-bottom:260px!important}}

/* Developers: dusk construction backdrop */
.dv-band{position:relative;isolation:isolate;overflow:hidden}
.dv-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.dv-bg i{position:absolute;left:0;right:0;top:-6%;bottom:-6%;background:url('/assets/images/heroes/developers-dusk-navy.webp') center 30%/cover no-repeat;transform:translate3d(0,var(--by,0px),0) scale(var(--bs,1.06));will-change:transform}
.dv-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0B1628 0%,rgba(11,22,40,.45) 16%,rgba(11,22,40,.62) 55%,rgba(11,22,40,.88) 100%)}
.dv-band h2,.dv-band .section-label,.dv-band>.container>.reveal>p{text-shadow:0 1px 14px rgba(7,15,28,.95),0 0 3px rgba(7,15,28,.8)}
@media (prefers-reduced-motion:reduce){.dv-bg i{transform:scale(1.04)}}
@media(max-width:760px){#developers .reveal[style*="space-between"]{flex-direction:column;align-items:flex-start!important;gap:14px}#developers .reveal[style*="space-between"] h2{max-width:none!important}#developers .reveal[style*="space-between"] p{text-align:left!important;max-width:none!important}}

/* section rule: stronger, so it reads on every background */
.hx-line{height:2px!important;background:linear-gradient(90deg,transparent,#C6A15B 16%,#E3C987 50%,#C6A15B 84%,transparent)!important;box-shadow:0 0 14px rgba(198,161,91,.35);z-index:3!important}

/* ===== Phone layout repair: inline multi-column grids collapse; no clipped text ===== */
@media(max-width:700px){
 html body [style*="grid-template-columns:repeat(3,1fr);gap:1px"],
 html body [style*="grid-template-columns:repeat(4,1fr);gap:1px"]{grid-template-columns:repeat(auto-fit,minmax(138px,1fr))!important}
 html body [style*="grid-template-columns:repeat(3,1fr);gap:20px"],
 html body [style*="grid-template-columns:repeat(3,1fr);gap:1.5rem"],
 html body [style*="grid-template-columns:2fr 3fr"]{grid-template-columns:1fr!important;gap:22px!important}
 html body [style*="grid-template-columns:1fr auto"]{grid-template-columns:1fr!important;gap:1.2rem!important}
 html body [style*="grid-template-columns:repeat(3,1fr);gap:1px"]>*,
 html body [style*="grid-template-columns:repeat(4,1fr);gap:1px"]>*{min-width:0;overflow-wrap:anywhere;word-break:normal;hyphens:auto}
 html body main,html body section{max-width:100%}
 html body h1,html body h2,html body h3{overflow-wrap:break-word}
}
@media(max-width:480px){
 html body .vc-hero-h1 em{white-space:normal!important}
 html body .vc-hero-h1,html body #hero h1{font-size:clamp(2.1rem,9.4vw,2.6rem)!important;line-height:1.08}
}
@media(max-width:480px){
 .hv-row{flex-wrap:wrap;gap:6px 16px}
 .hv-row b{white-space:normal;font-size:1.45rem;text-align:right;margin-left:auto}
 .hv-row b small{display:block;margin:2px 0 0}
 html body .strategy-pillar-title{padding-right:66px}
 html body [style*="grid-template-columns:repeat(3,1fr);gap:1px"]>:last-child:nth-child(odd),
 html body [style*="grid-template-columns:repeat(4,1fr);gap:1px"]>:last-child:nth-child(odd){grid-column:1/-1}
}