/* ==========================================================================
   Keystage Capital Advisors — global shell styles (Design pass)
   Tokens + reset + nav (with mobile menu) + footer + shared .ks-* interactions
   + accessibility. Page bodies carry their own inline styles + <style> blocks
   (design-tool export); this file holds what the shared shell needs.
   ========================================================================== */

:root{
  --navy:#16314E; --navy-deep:#0E2233; --navy-foot:#12283D;
  --teal:#0E8C86; --teal-dk:#0A6B66; --teal-lt:#4FB5AE;
  --gold:#C9A24B; --gold-tint:#F3E8CF;
  --canvas:#F7F5F0; --card:#FFFFFF; --ink:#21303F; --muted:#5B6B7A;
  --line:#E2E1DA; --line2:#D5D3CB;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{ background:var(--canvas); color:var(--ink); font-family:'DM Sans',sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img{ display:block; max-width:100%; }

/* Scroll-reveal (driven by main.js adding .ks-js to <html>, then .ks-in) */
html.ks-js .ks-reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
html.ks-js .ks-reveal.ks-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ html.ks-js .ks-reveal{ opacity:1; transform:none; transition:none; } }

/* Shared component interactions (also referenced by shell nav/footer) */
.ks-deptcard{ transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .45s ease; }
.ks-deptcard:hover{ transform:translateY(-5px); box-shadow:0 26px 50px -26px rgba(22,49,78,.30); border-color:#cdd6dd; }
.ks-btn-gold{ transition:background .3s ease, transform .2s ease, box-shadow .3s ease; }
.ks-btn-gold:hover{ background:#d4ad57 !important; transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(201,162,75,.6); }
.ks-btn-ghost{ transition:background .3s ease, border-color .3s ease; }
.ks-btn-ghost:hover{ background:rgba(255,255,255,.09) !important; border-color:rgba(255,255,255,.55) !important; }
.ks-link{ text-decoration:none; transition:gap .3s ease; }
.ks-link i{ transition:transform .3s ease; display:inline-block; }
.ks-link:hover i{ transform:translateX(5px); }

/* ---- Navigation ---- */
.ks-nav{ position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:17px 56px; background:var(--navy); border-bottom:1px solid rgba(255,255,255,.09); font-family:'DM Sans',sans-serif; }
.ks-brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.ks-navlinks{ display:flex; align-items:center; gap:34px; }
.ks-navlink{ position:relative; text-decoration:none; font-size:14px; font-weight:500; letter-spacing:.005em; color:rgba(255,255,255,.72); transition:color .25s ease; white-space:nowrap; }
.ks-navlink:hover{ color:#fff; }
.ks-navlink[aria-current="page"]{ color:#fff; }
.ks-navlink::after{ content:''; position:absolute; left:0; bottom:-7px; height:1.5px; width:0; background:var(--gold); transition:width .3s ease; }
.ks-navlink:hover::after, .ks-navlink[aria-current="page"]::after{ width:100%; }
.ks-navcta{ font-family:'DM Sans',sans-serif; font-size:13.5px; font-weight:600; color:#fff; background:var(--teal); text-decoration:none; padding:11px 20px; border-radius:9px; letter-spacing:.01em; transition:background .25s ease, transform .2s ease; white-space:nowrap; }
.ks-navcta:hover{ background:var(--teal-dk); transform:translateY(-1px); }
.ks-navtoggle{ display:none; background:none; border:1px solid rgba(255,255,255,.3); border-radius:8px; padding:7px 9px; cursor:pointer; color:#fff; }
.ks-navtoggle svg{ display:block; }

@media (max-width:900px){
  .ks-nav{ padding:14px 24px; flex-wrap:wrap; }
  .ks-navtoggle{ display:inline-flex; }
  .ks-navlinks{ display:none; flex-direction:column; align-items:stretch; gap:0; width:100%; margin-top:14px; }
  .ks-navlinks.open{ display:flex; }
  .ks-navlinks .ks-navlink{ padding:13px 2px; border-top:1px solid rgba(255,255,255,.1); }
  .ks-navlink::after{ display:none; }
  .ks-navlinks .ks-navcta{ margin-top:12px; text-align:center; }
}

/* ---- Footer ---- */
.ks-flink{ text-decoration:none; transition:color .2s ease; }
.ks-flink:hover{ color:#fff !important; }
@media (max-width:820px){
  .ks-foot-top{ flex-direction:column; align-items:flex-start !important; }
  .ks-foot-cols{ grid-template-columns:1fr 1fr !important; gap:32px !important; }
  .ks-foot-pad{ padding-left:24px !important; padding-right:24px !important; }
}
@media (max-width:480px){ .ks-foot-cols{ grid-template-columns:1fr !important; } }

/* ---- FAQ (native <details>) ---- */
.ks-faq summary{ list-style:none; cursor:pointer; }
.ks-faq summary::-webkit-details-marker{ display:none; }
.ks-faq .chev{ transition:transform .25s ease; }
.ks-faq details[open] .chev{ transform:rotate(180deg); }

/* ---- Accessibility ---- */
.skip-link{ position:absolute; left:-999px; top:0; background:var(--navy); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; z-index:200; text-decoration:none; }
.skip-link:focus{ left:0; }
:focus-visible{ outline:3px solid var(--teal); outline-offset:2px; border-radius:4px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
