/* ============================================================
   VistaNova M&A Partners — About page styles
   Implements "VistaNova About.dc.html" from the Claude Design
   project. Shared components live in site.css; this file holds
   only the styles specific to this page: fixed-attachment
   imagery, the "How We Advise" quadrants, track-record strips,
   "How We Work" value blocks, the "Who We Advise" rows, the
   services live/soon cards, in-text links, and the animated
   CTA button.
   ============================================================ */

/* ---------- Fixed-attachment imagery (skyline band) ---------- */
.vn-fixed{background-attachment:fixed;background-size:cover;background-position:center;background-repeat:no-repeat;filter:grayscale(1) contrast(1.06)}

/* ---------- "How We Work" value blocks ---------- */
.vn-vblock{transition:transform .3s ease,box-shadow .3s ease,border-top-color .3s ease}
.vn-vblock .vn-specicon{transition:background .3s ease,border-color .3s ease,color .3s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.vn-vblock:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-top-color:var(--cyan-500)}
.vn-vblock:hover .vn-specicon{background:var(--indigo-800);border-color:var(--indigo-800);color:#fff;transform:rotate(-8deg) scale(1.08)}

/* ---------- "Who We Advise" rows ---------- */
.vn-advise-row{transition:background .28s ease,border-color .28s ease,transform .28s ease}
.vn-advise-row:hover{background:#fff;border-color:var(--cyan-500);transform:translateX(4px)}

/* ---------- Services: live cards + "coming soon" rows ---------- */
.vn-svc-live{transition:background .28s ease,border-top-color .28s ease,transform .3s ease,box-shadow .3s ease}
.vn-svc-live .vn-i{transition:transform .25s ease}
.vn-svc-live:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-top-color:var(--cyan-500)}
.vn-svc-live:hover .vn-svc-name{color:var(--cyan-600)}
.vn-svc-live:hover .vn-i{transform:translateX(5px)}
.vn-svc-soon{transition:border-top-color .28s ease,transform .28s ease}
.vn-svc-soon .vn-i{opacity:0;transform:translateX(-6px);transition:opacity .25s ease,transform .25s ease}
.vn-svc-soon:hover{border-top-color:var(--cyan-500);transform:translateY(-2px)}
.vn-svc-soon:hover .vn-soon-t{color:var(--cyan-600)}
.vn-svc-soon:hover .vn-i{opacity:1;transform:translateX(0)}

/* ---------- "How We Advise" quadrants ---------- */
.vn-quad{border-bottom:1px solid var(--color-border);transition:transform .3s ease}
.vn-quad .vn-specicon{transition:background .3s ease,border-color .3s ease,color .3s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.vn-quad:hover{transform:translateX(5px)}
.vn-quad:hover .vn-quad-t{color:var(--cyan-600)}
.vn-quad:hover .vn-specicon{background:var(--indigo-800);border-color:var(--indigo-800);color:#fff;transform:rotate(-8deg) scale(1.08)}

/* ---------- Track-record strips ---------- */
.vn-strip .vn-specicon{transition:background .3s ease,border-color .3s ease,color .3s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.vn-strip:hover{border-top-color:var(--cyan-500)}
.vn-strip:hover .vn-strip-t{color:var(--cyan-600)}
.vn-strip:hover .vn-specicon{background:var(--indigo-800);border-color:var(--indigo-800);color:#fff;transform:rotate(-8deg) scale(1.08)}

/* ---------- In-text links ---------- */
a.vn-tlink{color:var(--cyan-600);text-decoration:underline;text-decoration-color:rgba(0,188,212,.45);text-underline-offset:3px;transition:color .2s ease,text-decoration-color .2s ease}
a.vn-tlink:hover{color:var(--indigo-800);text-decoration-color:var(--indigo-800)}
a.vn-tlink--dark{color:var(--cyan-500);text-decoration-color:rgba(0,188,212,.5)}
a.vn-tlink--dark:hover{color:#fff;text-decoration-color:#fff}

/* ---------- Founder eyebrow on navy ---------- */
#founder .vn-eyebrow{color:var(--cyan-500)}

/* ---------- Responsive grids ---------- */
#vn-strips{grid-template-columns:minmax(0,1fr)}
#vn-values{grid-template-columns:minmax(0,1fr)}
@media(min-width:560px){
  #vn-strips{grid-template-columns:repeat(2,minmax(0,1fr))}
  #vn-values{grid-template-columns:repeat(2,minmax(0,1fr))}
  #vn-values > div:last-child{grid-column:1/-1}
}
@media(min-width:1100px){
  #vn-quads{gap:0 var(--space-20)}
  #vn-strips{grid-template-columns:repeat(4,minmax(0,1fr))}
  #vn-values{grid-template-columns:repeat(5,minmax(0,1fr))}
  #vn-values > div:last-child{grid-column:auto}
}

/* ---------- Founder layout ---------- */
#vn-founder{grid-template-columns:minmax(0,1fr)}
#vn-founder > div:first-child{max-width:300px}
@media(min-width:720px){#vn-founder{grid-template-columns:290px minmax(0,1fr);align-items:start}}
@media(min-width:1100px){#vn-founder{grid-template-columns:330px minmax(0,1fr)}#vn-founder > div:first-child{max-width:330px}}

/* ---------- 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)}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){.vn-parallax-bg{transform:none!important}}