/* ============================================================
   VistaNova M&A Partners — Sell-Side Advisory page styles
   Implements "VistaNova Sell-Side Advisory.dc.html" from the
   Claude Design project. Shared components live in site.css;
   this file holds only the styles specific to this page:
   the step timeline, disclosure lists, buyer rows, the dark
   "Why VistaNova" cards, fixed-attachment imagery, and the
   animated CTA button.
   ============================================================ */

/* ---------- Disclosure lists (considerations + 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)}

/* ---------- Step timeline ---------- */
#vn-timeline details.vn-tl > summary::-webkit-details-marker{display:none}
#vn-timeline details.vn-tl > summary{list-style:none}
#vn-timeline details.vn-tl{transition:border-color .25s ease,box-shadow .25s ease}
#vn-timeline details.vn-tl[open]{border-color:var(--indigo-800);box-shadow:var(--shadow-md)}
#vn-timeline details.vn-tl[open] > summary .vn-caret{transform:rotate(180deg)}
#vn-timeline details.vn-tl[open] .vn-tlicon{background:var(--indigo-800);border-color:var(--indigo-800);color:#fff}
#vn-timeline details.vn-tl > summary:hover .vn-tlicon{border-color:var(--cyan-500);color:var(--cyan-600);background:var(--cyan-100)}
#vn-timeline details.vn-tl[open] > summary:hover .vn-tlicon{background:var(--indigo-800);border-color:var(--indigo-800);color:#fff}
#vn-timeline details.vn-tl > summary:hover .vn-tltitle{color:var(--cyan-600)}
#vn-timeline .vn-tlicon{background:#fff;border:1px solid var(--color-border);color:var(--indigo-800)}
#vn-timeline .vn-tltitle{color:var(--indigo-800)}

/* ---------- Industry cards (arrow reveal) ---------- */
.vn-ind-arrow{opacity:0;transform:translateX(-6px)}
.vn-ind-card:hover .vn-ind-arrow{opacity:1;transform:translateX(0)}

/* ---------- "Why owners use an advisor" blocks (on navy) ---------- */
.vn-wa-icon{background:rgba(0,188,212,0.12);border:1px solid rgba(0,188,212,0.45);color:var(--cyan-500);transition:background .3s ease,border-color .3s ease,color .3s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.vn-wa-block{transition:transform .35s ease,border-color .3s ease}
.vn-wa-block:hover{transform:translateY(-4px);border-top-color:#fff}
.vn-wa-block:hover .vn-wa-icon{background:var(--cyan-500);border-color:var(--cyan-500);color:var(--indigo-800);transform:translateY(-2px) rotate(-8deg) scale(1.1)}

/* ---------- Buyer universe rows ---------- */
.vn-buyer-row{position:relative;transition:transform .3s ease,box-shadow .3s ease,background .3s ease}
.vn-buyer-row .vn-specicon{transition:background .3s ease,border-color .3s ease,color .3s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.vn-buyer-title{color:var(--indigo-800);transition:color .25s ease}
.vn-buyer-row:hover{transform:translateY(-5px);background:#fff;box-shadow:var(--shadow-lg);border-radius:var(--radius-sm);z-index:2}
.vn-buyer-row:hover .vn-specicon{background:var(--indigo-800);border-color:var(--indigo-800);color:#fff;transform:rotate(-8deg) scale(1.08)}
.vn-buyer-row:hover .vn-buyer-title{color:var(--cyan-600)}

/* ---------- Considerations disclosures (hover lift) ---------- */
#considerations details.vn-disc{transition:transform .3s ease,box-shadow .3s ease,border-top-color .3s ease}
#considerations details.vn-disc:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-top-color:var(--cyan-500)}
#considerations details.vn-disc > summary .vn-i{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
#considerations details.vn-disc:hover > summary .vn-i:first-of-type{transform:scale(1.18) rotate(-8deg)}
details.vn-disc:not([open]) > summary:hover .vn-caret{color:var(--cyan-600);transform:translateY(3px)}

/* ---------- "Why VistaNova" dark cards ---------- */
#why-vistanova .vn-service-card{background:var(--indigo-800);border:1px solid rgba(255,255,255,0.16);border-top:2px solid rgba(0,188,212,0.5);box-shadow:0 16px 36px rgba(0,0,0,.34)}
#why-vistanova .vn-service-card:hover{border-color:rgba(255,255,255,0.3);border-top-color:var(--cyan-500);transform:translateY(-7px);box-shadow:0 26px 54px rgba(0,0,0,.44)}
#why-vistanova .vn-service-title{color:#fff}
#why-vistanova .vn-lead{color:#DDE3F5}
#why-vistanova .vn-glyph{background:transparent;border-color:rgba(255,255,255,0.28);color:var(--cyan-500);transition:background .3s ease,border-color .3s ease,color .3s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
#why-vistanova .vn-service-card:hover .vn-glyph{background:var(--cyan-500);border-color:var(--cyan-500);color:var(--indigo-800);transform:rotate(-8deg) scale(1.08)}

/* ---------- Fixed-attachment imagery (facade / skyline) ---------- */
.vn-fixed{background-attachment:fixed;background-size:cover;background-position:center;background-repeat:no-repeat;filter:grayscale(1) contrast(1.06)}
#why-vistanova .vn-fixed--navy{filter:grayscale(1) contrast(1.14) brightness(.92) sepia(.42) hue-rotate(178deg) saturate(2.6)}

/* ---------- Geography split ---------- */
@media(min-width:1000px){#geo-split{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}#vn-skyline{order:-1}}
@media(prefers-reduced-motion:reduce){.vn-par{transform:none!important}}

/* ---------- Animated CTA button ---------- */
.vn-cta-anim{position:relative;gap:10px;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{background:var(--cyan-600);border-color:var(--cyan-600);color:#fff;transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,120,145,.35)}
.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)}