/* ===========================================================================
   VistaNova — Transactions & Active Mandates (page-specific styles)
   Shared components live in assets/css/site.css + _ds tokens.
   =========================================================================== */

/* full-bleed rotating hero */
#top{position:relative;overflow:hidden;background:#0b1024;min-height:70vh;display:flex;align-items:flex-end}
@media(min-width:900px){#top{min-height:85vh}}
.vn-heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;z-index:0;opacity:0;animation:vnHeroCycle 12s linear infinite}
.vn-heroimg:nth-of-type(1){animation-delay:0s}
.vn-heroimg:nth-of-type(2){animation-delay:6s}
@keyframes vnHeroCycle{0%{opacity:1}50%{opacity:1}58.33%{opacity:0}91.67%{opacity:0}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.vn-heroimg{animation:none}.vn-heroimg:nth-of-type(1){opacity:1}}
#vn-hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top right,rgba(6,10,30,.95) 0%,rgba(6,10,30,.84) 26%,rgba(8,13,38,.58) 54%,rgba(10,16,44,.26) 80%,rgba(12,18,50,.10) 100%)}
@media(max-width:899px){#vn-hero-scrim{background:linear-gradient(to top right,rgba(6,10,30,.97) 0%,rgba(6,10,30,.92) 28%,rgba(8,13,38,.78) 58%,rgba(10,16,44,.52) 100%)}}
#vn-hero-inner{position:relative;z-index:2;width:100%;padding:150px 0 clamp(56px,9vh,104px)}
@media(min-width:900px){#vn-hero-inner{padding:190px 0 clamp(72px,10vh,120px)}}
.vn-hero-btn{background:#fff;color:var(--indigo-900);border-color:#fff}
.vn-hero-btn:hover{background:var(--cyan-500);border-color:var(--cyan-500);color:var(--indigo-900)}
.vn-hero-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,0.55)}
.vn-hero-btn--ghost:hover{background:var(--cyan-500);border-color:var(--cyan-500);color:var(--indigo-900)}

/* CTA hover sweep (shared idiom with other pages) */
.vn-cta-anim{gap:10px;position:relative;transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease}
.vn-cta-anim .vn-i{transition:transform .25s ease}
.vn-cta-anim:hover{transform:translateY(-2px)}
.vn-cta-anim:hover .vn-i{transform:translateX(4px)}
.vn-cta-anim::after{content:"";position:absolute;left:32px;right:32px;bottom:11px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.vn-cta-anim:hover::after{transform:scaleX(1)}
.vn-outline-anim{gap:10px;position:relative;transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease}
.vn-outline-anim .vn-i{transition:transform .25s ease}
.vn-outline-anim:hover{transform:translateY(-2px)}
.vn-outline-anim:hover .vn-i{transform:translateX(4px)}
.vn-outline-anim::after{content:"";position:absolute;left:32px;right:32px;bottom:11px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.vn-outline-anim:hover::after{transform:scaleX(1)}
.vn-cta-anim:hover,.vn-outline-anim:hover{background:var(--cyan-500);border-color:var(--cyan-500);color:var(--indigo-900)}
.vn-btn--accent.vn-cta-anim:hover{background:#fff;border-color:#fff;color:var(--indigo-900)}
#vn-nav.solid .vn-navcta:hover{background:var(--cyan-500);border-color:var(--cyan-500);color:var(--indigo-900)}

/* checklists */
.vn-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.vn-list li{display:flex;gap:14px;align-items:flex-start;font-family:var(--font-body);font-size:15.5px;line-height:1.7;color:var(--ink-700);text-wrap:pretty}
.vn-list li::before{content:"";flex:none;width:7px;height:7px;margin-top:9px;background:var(--cyan-500);transform:rotate(45deg)}

/* FAQ */
details.vn-disc > summary::-webkit-details-marker{display:none}
details.vn-disc > summary{list-style:none;color:var(--indigo-800)}
details.vn-disc[open] > summary .vn-caret{transform:rotate(180deg)}
details.vn-disc > summary:hover{color:var(--cyan-600)}
details.vn-disc[open]{border-top-color:var(--cyan-500)}
details.vn-disc:not([open]) > summary:hover .vn-caret{color:var(--cyan-600);transform:translateY(3px)}

/* access steps */
#vn-steps{grid-template-columns:minmax(0,1fr)}
.vn-step{display:flex;flex-direction:column;gap:12px;padding:24px 22px 26px;background:#fff;border:1px solid var(--color-border);border-top:3px solid var(--indigo-800);border-radius:var(--radius-md);transition:transform .35s ease,box-shadow .35s ease,border-top-color .3s ease,background .3s ease}
.vn-step:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(10,15,56,.16);border-top-color:var(--cyan-500);background:var(--silver-100)}
.vn-step-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vn-step-ic{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--radius-md);background:var(--silver-100);color:var(--indigo-800);transition:background .3s ease,color .3s ease}
.vn-step:hover .vn-step-ic{background:var(--indigo-800);color:var(--cyan-500)}
.vn-step h3{transition:color .25s ease}
.vn-step:hover h3{color:var(--cyan-600)!important}
@media(prefers-reduced-motion:reduce){.vn-step,.vn-step:hover{transform:none}}
@media(min-width:640px){#vn-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){#vn-steps{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* live status pill */
.vn-live{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 12px;border:1px solid rgba(0,188,212,.5);background:#fff;border-radius:999px;font-family:var(--font-ui);font-size:12px;font-weight:700;letter-spacing:0.08em;color:var(--indigo-800)}
.vn-live-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--cyan-500);flex:none}
.vn-live-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--cyan-500);opacity:0;animation:vnPulse 2.2s ease-out infinite}
@keyframes vnPulse{0%{opacity:.8;transform:scale(.5)}100%{opacity:0;transform:scale(1.6)}}
@media(prefers-reduced-motion:reduce){.vn-live-dot::after{animation:none}}

/* mandate cards — subgrid keeps both cards aligned row by row */
.vn-mandates{display:grid;grid-template-columns:minmax(0,1fr);column-gap:32px;row-gap:0}
@media(min-width:960px){.vn-mandates{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vn-mcol{display:grid;grid-row:span 8;grid-template-rows:subgrid;row-gap:0;margin-bottom:40px}
@media(min-width:960px){.vn-mcol{margin-bottom:0}}
.vn-mcard{display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:0;background:#fff;border:1px solid var(--color-border);border-top:3px solid var(--indigo-800);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-md);transition:transform .35s ease,box-shadow .35s ease,border-top-color .3s ease}
.vn-mcard:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(10,15,56,.22);border-top-color:var(--cyan-500)}
.vn-mhead{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 32px;border-bottom:1px solid var(--color-border)}
.vn-mtype{font-family:var(--font-ui);font-size:11.5px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--cyan-600)}
.vn-mnum{font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:0.16em;color:var(--ink-500)}
.vn-mimg{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0e1424}
.vn-mimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:filter .5s ease-in-out,transform .6s cubic-bezier(.22,.61,.36,1)}
@media(hover:hover) and (min-width:900px){
  .vn-mandates:not(.vn-mandates--color) .vn-mimg img{filter:grayscale(1) contrast(1.05)}
  .vn-mcard:hover .vn-mimg img{filter:grayscale(0) contrast(1);transform:scale(1.06)}
}
.vn-mtitle{font-family:var(--font-display);font-size:clamp(1.625rem,2.4vw,2.125rem);font-weight:700;line-height:1.15;color:var(--indigo-900);margin:0;padding:30px 32px 0;text-wrap:balance}
.vn-mfields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:0;padding:22px 32px 0;align-content:start}
.vn-mfield{padding:14px 0;border-top:1px solid var(--color-border)}
.vn-mfield dt{font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-500);margin:0 0 6px}
.vn-mfield dd{font-family:var(--font-ui);font-size:15.5px;font-weight:700;line-height:1.4;color:var(--indigo-800);margin:0;display:flex;align-items:center;gap:8px}
.vn-mfield--status dd{color:var(--cyan-600)}
.vn-mover{padding:20px 32px 0}
.vn-mover-lbl{font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-500);margin-bottom:10px}
.vn-mmeta{display:flex;flex-direction:column;gap:12px;padding:22px 32px 0;align-content:start}
.vn-mmeta-row{display:flex;align-items:flex-start;gap:8px}
.vn-mmeta-row .vn-mmeta-lbl{padding-top:7px;flex:none}
.vn-mmeta-chips{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.vn-mmeta-lbl{font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-500);min-width:128px}
.vn-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-ui);font-size:12.5px;font-weight:700;letter-spacing:0.02em;color:var(--indigo-800);background:var(--silver-100);border:1px solid var(--color-border);border-radius:999px;padding:5px 12px;text-decoration:none;line-height:1.3}
a.vn-chip{background:#fff;border-color:rgba(0,188,212,.55);transition:background .25s ease,border-color .25s ease,color .25s ease}
a.vn-chip .vn-i{color:var(--cyan-600);transition:transform .25s ease,color .25s ease}
a.vn-chip:hover{background:var(--indigo-800);border-color:var(--indigo-800);color:#fff}
a.vn-chip:hover .vn-i{color:var(--cyan-500);transform:translateX(3px)}
.vn-mcta{padding:28px 32px 32px;align-self:end;display:flex}
.vn-mcta .vn-btn{width:100%;justify-content:center}

/* mandate request form (Zoho embed, revealed by the card CTA) */
.vn-mform{padding-top:0}
.vn-mform[hidden]{display:none}
.vn-mform-embed{margin-top:18px;background:#fff;border:1px solid var(--color-border);border-top:3px solid var(--cyan-500);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:10px 10px 4px;animation:vnMformIn .4s ease both}
.vn-mform-embed iframe{display:block;width:100%;border:none;border-radius:calc(var(--radius-md) - 4px)}
@keyframes vnMformIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.vn-mform-embed{animation:none}}

/* who we work with */
.vn-cp{display:grid;grid-template-columns:minmax(0,1fr);border-top:2px solid var(--indigo-800)}
@media(min-width:640px){.vn-cp{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vn-cp li{list-style:none;display:flex;align-items:center;gap:14px;padding:18px 4px;border-bottom:1px solid var(--color-border);font-family:var(--font-ui);font-size:15.5px;font-weight:700;color:var(--indigo-800);transition:color .25s ease,padding .3s ease}
.vn-cp li::before{content:"";flex:none;width:7px;height:7px;background:var(--cyan-500);transform:rotate(45deg)}
.vn-cp li:hover{color:var(--cyan-600);padding-left:10px}
#vn-who{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
@media(min-width:960px){#vn-who{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}}
#vn-mid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;border-top:2px solid var(--indigo-800);padding-top:40px}
@media(min-width:960px){#vn-mid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:end}}

/* legal */
.vn-legal p{font-family:var(--font-ui);font-size:12.5px;line-height:1.85;color:var(--ink-500);margin:0;max-width:110ch;text-wrap:pretty}