/* ============================================================
   Scorpio Capital — shared styles
   Loaded by every page. Page-specific rules live in each page's
   own <style> block.
   ============================================================ */

:root{
  --ink:#0E1E33;
  --ink-2:#16263F;
  --bone:#F4F1EA;
  --paper:#FBFAF6;
  --stone:#6E6A60;
  --line:#D9D3C6;
  --accent:#7C8896;      /* silver */
  --accent-deep:#6E7680;
  --mist-1:#1B2D47;
  --mist-2:#2C4061;
  --mist-3:#43577A;
  --mist-4:#62759A;
  --maxw:1320px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Inter",sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ---------- PAGE TRANSITIONS ---------- */
/* Entrance: every page fades/lifts in on load, CSS-only so it still
   runs with JS disabled. Exit: main.js adds .page-leaving just before
   following an internal link, so navigating away fades out first
   instead of cutting straight to the next page's hard load. */
/* Opacity-only: a transform here would give a fixed-position nav a new
   containing block for the animation's duration, making it briefly
   detach from the viewport and drift with the page underneath it. */
@keyframes pageFadeIn{from{opacity:0}to{opacity:1}}
body{animation:pageFadeIn .5s ease both}
body.page-leaving{opacity:0;transition:opacity .22s ease}
h1,h2,h3{font-family:"Source Serif 4",serif;font-weight:500;line-height:1.08;letter-spacing:-0.01em}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}

/* ---------- SHARED PAGE-HEADER BANNER (our-businesses.html, investment-criteria.html) ---------- */
.banner-hero{position:relative;height:480px;margin-top:78px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
.banner-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%}
.bh-scrim{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,18,30,.42) 0%,rgba(10,18,30,.58) 100%)}
.bh-inner{position:relative;z-index:2;padding:0 32px}
.bh-inner h1{font-family:"Source Serif 4",serif;font-size:clamp(44px,7vw,80px);font-weight:500;color:#fff;line-height:1.06;letter-spacing:-.015em}
.bh-sub{font-size:clamp(18px,1.8vw,24px);color:rgba(255,255,255,.78);margin-top:14px;font-weight:400;max-width:46ch;margin-left:auto;margin-right:auto;line-height:1.5}
@media(max-width:680px){.banner-hero{height:260px;margin-top:51px}}

/* ---------- SHARED PAGE-INTRO SIDE LINE (leadership-team.html, advisory-board.html, and index.html's Who We Are / Why Scorpio sections) ---------- */
.tpi-line,.wwa-line{display:flex;flex-direction:column;align-items:center;flex:none}
.tpi-line-top,.wwa-line-top{width:6px;flex:1;border-radius:2px;background:var(--ink)}
.tpi-line-bottom,.wwa-line-bottom{width:2px;flex:1;border-radius:2px;background:#A7B1BB}

/* ---------- NAV ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:flex-end;
  padding:18px 32px;transition:background .4s ease,padding .4s ease,box-shadow .4s ease,border-color .4s ease;
  background:transparent;border-bottom:1px solid transparent;
}
nav.scrolled{background:rgba(251,250,246,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:14px 32px;box-shadow:0 1px 0 var(--line);border-bottom:1px solid var(--line)}
/* backdrop-filter (above) makes nav a new containing block for its own
   position:fixed children — which breaks .navlinks.open's fixed,
   full-viewport overlay on any page where nav carries .scrolled from
   the start (i.e. every page without a hero, which is all of them but
   index.html). main.js adds .menu-open to nav while the mobile menu is
   open; drop the filter for that moment so .navlinks is fixed to the
   viewport again, the way it already was on index.html by accident. */
nav.menu-open{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* The burger's lines go dark (nav.scrolled .burger span, below) on every
   page that starts scrolled — which is all of them but index.html. Once
   the menu is open, though, it's sitting on top of the same dark navy
   the menu itself uses, so dark-on-dark makes it disappear. Force it
   back to white specifically while open, regardless of scrolled state. */
nav.menu-open .burger span{background:#fff!important}
nav.scrolled .brand{color:var(--ink)}
nav.scrolled .navlinks a{color:var(--ink)}
nav.scrolled .navlinks a.cta{background:var(--ink)!important;color:var(--bone)!important;border-color:var(--ink)!important}
nav.scrolled .navlinks a.cta:hover{background:var(--mist-2)!important;border-color:var(--mist-2)!important}
nav.scrolled .burger span{background:var(--ink)}
.brand{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:11px;color:#fff;z-index:1}
.brand .mark{width:30px;height:30px;flex:none}
.brand .name{font-family:"Inter",sans-serif;font-weight:600;font-size:22px;letter-spacing:.02em}
/* Shrinks smoothly below 480px so the centred logo can never sit under
   the burger button, which sits to its right at a fixed distance from
   the edge regardless of screen width — a fixed 40px logo was wide
   enough to run underneath it on phones (B2). Unchanged (clamps to
   40px) above 480px, where there's always room for both. */
.brand-logo{height:clamp(20px,calc(11.2vw - 14px),40px);width:auto;display:block}
nav:not(.scrolled) .brand-logo{filter:brightness(0) invert(1)}
.navlinks{display:flex;gap:34px;align-items:center}
.navlinks a{color:#fff;font-size:17px;font-weight:500;letter-spacing:.01em;opacity:.9;transition:opacity .25s,color .4s,transform .2s}
.navlinks a:hover{opacity:1;transform:scale(1.07)}
.navlinks a.cta{
  background:rgba(255,255,255,.15);color:#fff!important;border:1px solid rgba(255,255,255,.5);padding:10px 22px;border-radius:2px;opacity:1;transition:background .25s,border-color .25s,transform .2s;
}
.navlinks a.cta:hover{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.8);transform:scale(1.07)}
/* 44×44 hit area (S8) built from padding, not a bigger icon: the three
   lines stay the same visual 26×18 size, just centred in a larger
   invisible tap target. */
.burger{display:none;background:none;border:none;cursor:pointer;width:44px;height:44px;position:relative}
.burger span{position:absolute;left:9px;right:9px;height:2px;background:#fff;transition:.3s}
.burger span:nth-child(1){top:13px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:29px}

/* ---------- NAV DROPDOWN ---------- */
.nav-dropdown{position:relative}
.nav-drop-btn{background:none;border:none;cursor:pointer;font-family:inherit;font-size:17px;font-weight:500;letter-spacing:.01em;color:#fff;opacity:.9;display:inline-flex;align-items:center;gap:5px;padding:0;transition:opacity .25s,color .4s,transform .2s}
.nav-drop-btn:hover,.nav-dropdown.open .nav-drop-btn{opacity:1;transform:scale(1.07)}
nav.scrolled .nav-drop-btn{color:var(--ink)}
.nav-drop-chevron{transition:transform .25s;flex:none}
.nav-dropdown.open .nav-drop-chevron{transform:rotate(180deg)}
.nav-drop-menu{display:none;position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background:rgba(251,250,246,.97);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:4px;box-shadow:0 8px 28px -6px rgba(14,30,51,.16);min-width:190px;overflow:hidden;z-index:100}
.nav-dropdown.open .nav-drop-menu{display:block}
.nav-drop-menu a{display:block;padding:12px 18px;font-size:14px;color:var(--ink)!important;font-weight:500;opacity:1!important;border-bottom:1px solid var(--line);transition:background .2s;white-space:nowrap}
.nav-drop-menu a:last-child{border-bottom:none}
.nav-drop-menu a:hover{background:var(--bone)!important;transform:none!important}

/* ---------- SCROLL REVEALS ----------
   Scoped under .js (added by an inline script in <head>) so that if
   main.js fails to load — the only thing that ever adds the .in class
   that reverses opacity:0 below — these never hide the content in the
   first place. Without JS, or if main.js fails, body copy is visible
   immediately. */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.js .reveal-fade{opacity:0;transition:opacity 1.1s cubic-bezier(.2,.7,.2,1)}
.reveal-fade.in{opacity:1}

/* ---------- LOAD-IN REVEAL ---------- */
/* Unlike .reveal (scroll-triggered via IntersectionObserver), this fires
   once, right after the page loads, regardless of scroll position — for
   grids that should always animate in immediately: criteria boxes, and
   the team/board headshot cards. main.js staggers .in left-to-right. */
.js .load-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.load-reveal.in{opacity:1;transform:none}
.d1{transition-delay:.05s}.d2{transition-delay:.18s}.d3{transition-delay:.32s}.d4{transition-delay:.46s}.d5{transition-delay:.6s}

/* Respect users who prefer reduced motion */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal-fade,.load-reveal{
    opacity:1!important;transform:none!important;transition:none!important;
  }
  *{animation:none!important}
  body.page-leaving{transition:none!important}
}

/* ---------- CTA BAND ---------- */
.cta-band{background:var(--ink);padding:56px 0;text-align:center}
.cta-band h2{font-family:"Source Serif 4",serif;font-size:clamp(30px,4vw,50px);font-weight:500;color:#ffffff;max-width:none;margin:0 auto;line-height:1.1;letter-spacing:-.01em;white-space:nowrap}
.cta-band p{font-size:clamp(19px,1.7vw,21px);font-weight:300;color:rgba(244,241,234,.85);max-width:50ch;margin:20px auto 0;line-height:1.65}
.cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--bone)!important;font-family:"Inter",sans-serif;font-size:15px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:14px 30px;border-radius:3px;margin-top:34px;transition:background .25s,transform .25s,box-shadow .25s;text-decoration:none}
.cta-btn:hover{background:#687583;transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(124,136,150,.55)}
.cta-btn span{display:inline-block;font-size:22px;line-height:1;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.cta-btn:hover span{transform:translateX(5px)}

/* ---------- FOOTER ---------- */
footer{background:var(--ink);color:rgba(244,241,234,.65);font-size:13px;border-top:1px solid rgba(244,241,234,.12)}
footer .wrap{padding:40px 32px 22px}
.footer-row{display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;gap:clamp(40px,8vw,96px)}
.footer-heading{display:block;color:rgba(244,241,234,.95);font-size:18px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px}
.footer-contact{display:flex;flex-direction:column;gap:8px;text-align:left}
.footer-contact a{color:rgba(244,241,234,.85);font-size:18px;padding:8px 0;transition:color .2s}
.footer-contact a:hover{color:var(--bone)}
.footer-locations{display:flex;flex-direction:column;gap:8px;color:rgba(244,241,234,.85);font-size:18px;text-align:left}
/* Match .footer-contact a's own 8px top/bottom padding line-for-line, so
   each location sits level with its counterpart in the Contact column
   (email with Vancouver, LinkedIn with Edmonton) instead of drifting up,
   since the links' padding makes their rows taller than a bare span. */
.footer-locations span:not(.footer-heading){padding:8px 0}
/* Columns are top-aligned (heading, then two lines), so the logo needs its
   own nudge to sit level with the first content line ("info@..." /
   "Vancouver...") instead of the heading above it: push it past the
   heading's line-height + margin + gap, then re-centre the taller logo
   against that line's own height. */
.footer-logo{height:38px;width:auto;max-width:100%;display:block;filter:brightness(0) invert(1);opacity:.85;margin-left:-4px;margin-top:38px}
.footer-divider{width:1px;align-self:stretch;background:rgba(244,241,234,.2)}

/* Below this, the logo + divider + Contact + Locations no longer fit on
   one line, but there's still plenty of room for Contact and Locations
   to sit side by side once the logo has its own row. Without forcing the
   logo onto its own line, flex-wrap here let Locations alone wrap down
   to a second line while Contact stayed up on the first (next to the
   logo) -- Locations then landed flush left under the logo instead of
   next to Contact, orphaned rather than paired with it. Giving the logo
   flex-basis:100% guarantees it always wraps alone, so Contact and
   Locations are pushed down together as a pair and can stay side by
   side with the divider between them. */
@media(max-width:1080px){
  .footer-row{justify-content:center;row-gap:32px}
  /* flex-basis:100% forces this <img>'s own box to span the full row
     (so it wraps onto its own line) -- but object-fit:contain is what
     keeps the actual logo rendering at its true, undistorted size and
     centered within that wide box, instead of being stretched to fill
     it the way a plain <img> does by default. */
  .footer-logo{flex-basis:100%;width:auto;object-fit:contain;object-position:center;margin-left:0;margin-top:0}
}

/* True phone widths: Contact and Locations themselves no longer fit side
   by side (each column's longest line, e.g. "Vancouver, British
   Columbia", is too wide), so drop the divider and stack everything in
   one centered column instead of letting the pair wrap unevenly. */
@media(max-width:560px){
  .footer-row{text-align:center}
  .footer-contact,.footer-locations{align-items:center;text-align:center}
  .footer-divider{display:none}
}

/* ---------- TEAM CARD GRID (leadership-team.html, advisory-board.html) ---------- */
.tcard-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-bottom:96px;align-items:start}
.tcard-grid--pair{grid-template-columns:repeat(2,minmax(0,390px))}
.tcard{cursor:pointer;outline:none}
.tcard:focus-visible{outline:2px solid var(--accent-deep);outline-offset:4px;border-radius:3px}
.tcard[aria-expanded="true"]{cursor:default}
.tcard-photo{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:var(--bone);border:1px solid var(--line)}
.tcard-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform .5s ease}
.tcard:hover .tcard-img{transform:scale(1.03)}
.tcard-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.tcard-placeholder span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);font-weight:600}
.tcard-banner{position:absolute;left:0;right:0;bottom:0;background:rgba(14,30,51,.92);padding:14px 20px 12px;transition:background .3s ease}
.tcard:hover .tcard-banner,.tcard:focus-visible .tcard-banner,.tcard[aria-expanded="true"] .tcard-banner{background:rgba(14,30,51,.97)}
.tcard-name{font-family:"Inter",sans-serif;font-size:22px;font-weight:600;color:var(--bone);line-height:1.18}
.tcard-creds{font-size:11.5px;color:rgba(244,241,234,.62);font-weight:600;letter-spacing:.03em;margin-top:5px}
.tcard-title{font-size:14px;color:rgba(244,241,234,.78);font-weight:500;line-height:1.3;margin-top:3px}
.tcard-more{max-height:0;opacity:0;overflow:hidden;padding-top:14px;transition:max-height .35s ease,opacity .25s ease}
.tcard:hover .tcard-more,.tcard:focus-visible .tcard-more,.tcard[aria-expanded="true"] .tcard-more{max-height:70px;opacity:1}
.tcard-rule{height:1px;background:rgba(244,241,234,.4);margin-bottom:12px}
.tcard-cta{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,234,.85);font-weight:600}

@media(max-width:900px){
  .tcard-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .tcard-grid,.tcard-grid--pair{grid-template-columns:1fr;max-width:420px}
}

/* ---------- BIO PANEL (opens beside or below the clicked card, in place) ---------- */
.tcard-bio-panel{background:rgba(14,30,51,.92);border-radius:4px;position:relative;opacity:0;transition:opacity .3s ease,transform .3s ease}
.tcard-bio-panel.mode-beside{position:absolute;z-index:5;transform:translateX(-10px)}
.tcard-bio-panel.mode-below{grid-column:1/-1;margin-top:-4px;transform:translateY(-10px)}
.tcard-bio-panel.open{opacity:1;transform:none}
/* The close button lives OUTSIDE .bio-scroll, as its own absolutely
   positioned layer pinned to the panel's corner, so it never scrolls
   with the content and can never end up overlapping text mid-scroll
   the way a sticky-in-flow button could. */
.bio-scroll{height:100%;overflow-y:auto;padding:36px 40px}
/* Bottom fade on the beside-mode panel only: that's the one with a
   fixed height (capped to the card's height) so its bio can actually
   need to scroll. The below-mode panel (mobile) sizes to its content
   instead, so it never scrolls and never needs this cue. */
.tcard-bio-panel.mode-beside::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40px;border-radius:0 0 4px 4px;background:linear-gradient(to bottom,rgba(14,30,51,0),rgba(14,30,51,.92));pointer-events:none}
.bio-close{position:absolute;top:6px;right:14px;z-index:2;background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:rgba(244,241,234,.7);font-family:"Inter",sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:6px 8px;transition:color .2s}
.bio-close:hover{color:var(--bone)}
.bio-close-x{font-size:18px;line-height:1;font-weight:400}
.bio-name{font-family:"Inter",sans-serif;font-size:clamp(22px,2vw,28px);font-weight:600;color:var(--bone);line-height:1.15}
.bio-creds{font-size:11.5px;color:rgba(244,241,234,.65);font-weight:600;letter-spacing:.05em;margin-top:10px}
.bio-creds:empty{display:none}
.bio-title{font-size:17px;color:rgba(244,241,234,.8);font-style:italic;margin-top:5px}

.modal-bio{font-size:17px;color:rgba(244,241,234,.85);line-height:1.7;margin-top:18px}
.modal-bio p{margin-bottom:13px}
.modal-bio p:last-child{margin-bottom:0}
.modal-bio-h{font-size:17px;letter-spacing:.10em;text-transform:uppercase;font-weight:600;color:rgba(244,241,234,.65);margin:20px 0 10px}
.modal-bio ul{list-style:disc;padding-left:18px;margin:0}
.modal-bio li{margin-bottom:11px}
.modal-bio li:last-child{margin-bottom:0}
.modal-bio strong{color:var(--bone);font-weight:600}

@media(prefers-reduced-motion:reduce){
  .tcard-more,.tcard-bio-panel{transition:none!important}
}

/* ---------- NAV / BURGER RESPONSIVE ----------
   Split out from the general mobile breakpoint below and given its own,
   wider threshold: the centred .brand logo and the .navlinks row start
   colliding well before phone widths (as early as ~1560px on narrower
   desktop windows), so the burger menu needs to take over there too —
   independent of when the rest of the layout (.wrap padding, .cta-band)
   switches to its mobile treatment at 680px. The logo's own centred
   position is untouched here; only the nav LINKS collapse into the
   burger + slide-out panel earlier. */
@media(max-width:1560px){
  .navlinks{position:fixed;inset:0;background:var(--ink);flex-direction:column;justify-content:center;
    gap:30px;transform:translateX(100%);transition:.4s;z-index:60}
  .navlinks.open{transform:none}
  .navlinks a{color:#fff!important;font-size:22px;padding:5px 0}
  .burger{display:block;z-index:70}
  .nav-dropdown{width:100%;text-align:center}
  .nav-drop-btn{font-size:22px;color:#fff!important;opacity:1;justify-content:center;width:100%;padding:9px 0;transform:none!important}
  .nav-dropdown.open .nav-drop-btn{transform:none!important}
  .nav-drop-menu{position:static;transform:none;background:transparent;border:none;box-shadow:none;backdrop-filter:none;border-radius:0;min-width:0;display:none;margin-top:6px}
  .nav-dropdown.open .nav-drop-menu{display:block}
  .nav-drop-menu a{font-size:17px!important;color:#fff!important;text-align:center;padding:10px 0;border-bottom:none!important}
  .nav-drop-menu a:hover{background:transparent!important;color:#fff!important}
}

/* ---------- SHARED RESPONSIVE (wrap padding, cta band) ---------- */
@media(max-width:680px){
  .wrap{padding:0 22px}
  nav{padding:16px 22px}
  /* Without this, nav.scrolled's own padding:14px 32px (set above for
     desktop) still wins here despite this block coming later in source,
     because .scrolled is a class selector and beats nav's element-only
     selector on specificity. That extra 10px of horizontal padding vs.
     the unscrolled 22px is what shifted the burger inward on scroll,
     overlapping the centred logo. Matching it to the same 22px here
     keeps the burger fixed in place regardless of scroll state, on
     phones only. */
  nav.scrolled{padding:14px 22px}
  /* The logo's own shrink formula (brand-logo, above) was tuned so it
     never runs UNDER the burger, but at the narrowest phone widths the
     two still end up only a couple of pixels apart, reading as cramped.
     Below 680px only, shrink the logo a little faster as the viewport
     narrows (bigger intercept, same slope/caps) to open up a consistent
     ~10px gap between the logo's right edge and the burger's tap target
     at every phone width, instead of just barely clearing it. */
  .brand-logo{height:clamp(20px,calc(11.2vw - 17px),40px)}
  /* Nudges the whole burger (tap target and lines together) very
     slightly down so it optically centres against the logo instead of
     sitting a touch high next to it. */
  .burger{transform:translateY(2px)}
  .cta-band{padding:40px 0}
  .cta-band h2{white-space:normal;font-size:clamp(26px,7vw,34px)}
}