/* ============================================================
   ALTUS VAULT GLOBAL SOLUTIONS — altusvault.io
   Fractured Plane · Aperture · Precision Machine
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  --blue:        #1668d6;
  --blue-deep:   #0b3f8c;
  --blue-light:  #4a9bff;
  --ink:         #21262d;
  --ink-mid:     #4d555f;
  --ink-soft:    #78818c;
  --line:        #d3d9e0;
  --silver:      #c9cfd6;
  --paper:       #f4f6f8;
  --paper-warm:  #fbfcfd;
  --white:       #ffffff;

  --f-display: 'Michroma', 'Arial Black', sans-serif;
  --f-ui:      'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gut: clamp(22px, 5vw, 96px);
  --ease: cubic-bezier(.22,.61,.36,1);

  /* driven by JS */
  --p: 0;      /* hero scroll progress 0→1 */
  --mx: 0px;   /* pointer parallax */
  --my: 0px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-ui); font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,ol,ul{ margin:0; }

::selection{ background:var(--blue); color:#fff; }

:focus-visible{ outline:2px solid var(--blue); outline-offset:4px; }

.skip{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--blue); color:#fff; padding:10px 16px; font-size:13px;
  letter-spacing:.1em; transition:top .2s;
}
.skip:focus{ top:16px; }

/* ---------- 3. SHARED TYPE ---------- */
.eyebrow{
  font-size:11px; letter-spacing:.34em; color:var(--ink-soft);
  font-weight:500; margin-bottom:28px;
}
.h2{
  font-size:clamp(28px,4.4vw,58px); line-height:1.12; font-weight:300;
  letter-spacing:-.01em; max-width:16ch;
}

/* ============================================================
   4. NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--gut);
  transition:background .45s var(--ease), box-shadow .45s var(--ease), padding .45s var(--ease);
}
.nav--solid{
  background:rgba(250,252,253,.82);
  backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
  padding-top:14px; padding-bottom:14px;
}
.nav__mark{ display:flex; align-items:center; gap:12px; }
.nav__mark svg{ width:34px; height:34px; flex:none; }
.nav__wordmark{
  font-family:var(--f-display); font-size:13px; letter-spacing:.28em;
  color:var(--ink);
}
.nav__links{ display:flex; gap:38px; }
.nav__links a{
  font-size:11.5px; letter-spacing:.24em; font-weight:500; color:var(--ink-mid);
  position:relative; padding:6px 0; transition:color .3s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--blue); transition:right .4s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ right:0; }

.nav__toggle{ display:none; width:34px; height:34px; position:relative; }
.nav__toggle span{
  position:absolute; left:7px; right:7px; height:1.5px; background:var(--ink);
  transition:transform .35s var(--ease), opacity .25s;
}
.nav__toggle span:nth-child(1){ top:14px; }
.nav__toggle span:nth-child(2){ top:20px; }
.nav[data-open="true"] .nav__toggle span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.nav[data-open="true"] .nav__toggle span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

/* ============================================================
   5. HERO — layered plate + aperture push
   ============================================================ */
.hero{ position:relative; }
.hero__track{ height:190vh; }                  /* scroll runway for the reveal */
.hero__stage{
  position:sticky; top:0; height:100vh; overflow:hidden;
  background:linear-gradient(160deg,#f7fafc 0%,#eaf0f7 55%,#dbe6f2 100%);
}

/* --- 5a. the architectural plate --- */
.hero__plate{
  position:absolute; inset:0;
  /* bump ?v= here whenever hero.jpg is replaced */
  background-image:url('../img/hero.jpg?v=1'), url('../img/hero-fallback.svg');
  background-size:cover; background-position:center right;
  transform-origin:70% 56%;                     /* the aperture — measured from hero.jpg */
  transform:
    translate3d(var(--mx), var(--my), 0)
    scale(calc(1 + var(--p) * .62));
  will-change:transform;
}

/* --- 5b. circuit substrate --- */
.hero__circuit{
  position:absolute; left:0; top:0; width:min(56%,820px); height:100%;
  opacity:calc(.55 - var(--p) * .55);
  transform:translate3d(calc(var(--mx) * .45 - var(--p) * 60px), calc(var(--my) * .45), 0);
  pointer-events:none;
  /* dies out before it reaches the aperture — substrate, not wallpaper */
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 46%,transparent 88%);
          mask-image:linear-gradient(90deg,#000 0%,#000 46%,transparent 88%);
}
.hero__circuit-live{ opacity:.45; }

/* --- 5c. identity lockup --- */
.hero__type{
  position:absolute; left:var(--gut); top:50%; z-index:3;
  transform:translate3d(calc(var(--mx) * -.5 - var(--p) * 42px), calc(-50% + var(--my) * -.5 - var(--p) * 30px), 0);
  opacity:clamp(0, calc(1 - var(--p) * 1.5), 1);
  will-change:transform,opacity;
}
.lockup__name{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(30px, 6.2vw, 92px);
  line-height:1; letter-spacing:.055em; font-weight:400;
  color:#3b434c;
  background:linear-gradient(180deg,#6f7883 0%,#2b323a 46%,#767f8a 62%,#333b44 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.lockup__sub{
  display:flex; align-items:center; gap:18px;
  margin-top:clamp(10px,1.4vw,20px);
  font-size:clamp(10px,1.5vw,21px);
  letter-spacing:.42em; font-weight:500; color:var(--blue);
  padding-left:.4em;
}
.lockup__sub i{ flex:1 1 auto; height:1px; background:linear-gradient(90deg,transparent,var(--blue)); max-width:120px; }
.lockup__sub i:last-child{ background:linear-gradient(90deg,var(--blue),transparent); }

.hero__lines{
  margin-top:clamp(26px,3.4vw,48px);
  padding-left:20px; border-left:1px solid var(--blue);
  font-size:clamp(11px,1.15vw,15px); letter-spacing:.2em;
  line-height:2; color:var(--ink-mid); font-weight:400;
}
.hero__cta{
  display:inline-flex; align-items:center; gap:12px;
  margin-top:clamp(24px,3vw,42px);
  font-size:11.5px; letter-spacing:.24em; font-weight:600; color:var(--ink);
}
.hero__cta svg{ width:18px; height:18px; transition:transform .4s var(--ease); }
.hero__cta:hover svg{ transform:translateX(7px); }

/* --- 5d. handoff veil --- */
.hero__veil{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:var(--paper);
  opacity:clamp(0, calc((var(--p) - .74) * 3.9), 1);
}

/* --- 5e. scroll cue --- */
.hero__cue{
  position:absolute; left:var(--gut); bottom:38px; z-index:3;
  width:22px; height:36px; border:1px solid var(--silver); border-radius:12px;
  opacity:clamp(0, calc(1 - var(--p) * 4), 1);
}
.hero__cue span{
  position:absolute; left:50%; top:8px; width:3px; height:3px; margin-left:-1.5px;
  border-radius:50%; background:var(--blue);
  animation:cue 2.1s var(--ease) infinite;
}
@keyframes cue{ 0%,100%{ transform:translateY(0); opacity:1 } 55%{ transform:translateY(15px); opacity:.15 } }

/* ============================================================
   6. STATEMENT
   ============================================================ */
.statement{
  padding:clamp(96px,14vh,190px) var(--gut);
  max-width:1180px;
}
.statement__body{
  font-size:clamp(20px,2.5vw,36px); line-height:1.5; font-weight:300;
  letter-spacing:-.005em; max-width:24ch; max-width:30ch;
}
.statement__body em{ font-style:normal; color:var(--blue); }
.statement__body a{ border-bottom:1px solid var(--line); transition:border-color .3s; }
.statement__body a:hover{ border-color:var(--blue); }
.statement__body--muted{
  margin-top:1.2em; color:var(--ink-soft);
  font-size:clamp(15px,1.5vw,20px); max-width:38ch;
}

/* ============================================================
   7. ECOSYSTEM
   ============================================================ */
.eco{
  padding:clamp(60px,9vh,120px) var(--gut) clamp(90px,12vh,150px);
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-warm) 40%,var(--paper) 100%);
  position:relative;
}
.eco__head{ max-width:760px; margin-bottom:clamp(40px,6vh,72px); }
.eco__lede{ margin-top:20px; color:var(--ink-soft); font-size:16px; max-width:52ch; }

/* The field keeps its 1000:620 ratio but may never grow taller than the space
   left under the section heading — otherwise the bottom nodes fall below the
   fold and the ecosystem silently looks like it has fewer members than it does.
   1.6129 = 1000/620. */
.eco__field{
  position:relative; margin:0 auto;
  width:100%;
  max-width:min(1100px, calc((100vh - 380px) * 1.6129));
  aspect-ratio:1000/620;
}
.eco__plot{ position:absolute; inset:0; width:100%; height:100%; }

.eco__core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.eco__core-ring{
  width:74px; height:74px; border:1px solid var(--blue); border-radius:50%;
  position:relative; opacity:.65;
}
.eco__core-ring::before{
  content:''; position:absolute; inset:26px; border-radius:50%; background:var(--blue);
}
.eco__core-ring::after{
  content:''; position:absolute; inset:-14px; border:1px solid var(--line); border-radius:50%;
}
.eco__core-label{
  font-family:var(--f-display); font-size:10px; letter-spacing:.3em; color:var(--ink-mid);
}

.node{
  position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  color:var(--ink-mid); transition:color .35s var(--ease), transform .5s var(--ease);
}
/* The nodes ARE the section — they are primary controls, not diagram chrome.
   Solid ground, real border weight, labels legible at rest. */
.node__mark{
  width:76px; height:76px; display:grid; place-items:center;
  border:1px solid var(--silver); background:#fff;
  box-shadow:0 2px 10px -6px rgba(16,32,55,.28);
  transition:border-color .35s, box-shadow .45s, background .35s, transform .45s var(--ease);
}
.node__mark svg{ width:40px; height:40px; }
.node__label{
  font-size:11px; letter-spacing:.18em; font-weight:500; text-transform:uppercase;
  color:var(--ink-mid); opacity:.8; transition:opacity .35s, color .35s;
  text-align:center; line-height:1.5; max-width:22ch;
}
.node:hover,.node:focus-visible,.node[aria-current="true"]{ color:var(--blue); }
.node:hover .node__mark,.node:focus-visible .node__mark{
  border-color:var(--blue); box-shadow:0 14px 40px -16px rgba(22,104,214,.6);
}
.node:hover .node__label,.node:focus-visible .node__label{ opacity:1; }
.node:hover{ transform:translate(-50%,-58%); }

/* Selected state has to survive on the node itself — the panel is no longer
   the only place that tells you which one you picked. */
.node[aria-current="true"] .node__mark{
  border-color:var(--blue); border-width:1.5px;
  background:linear-gradient(180deg,#fff 0%,#eef4fd 100%);
  box-shadow:0 0 0 5px rgba(22,104,214,.09), 0 16px 40px -18px rgba(22,104,214,.55);
}
.node[aria-current="true"] .node__label{ opacity:1; font-weight:600; }

/* detail panel */
.detail{
  position:fixed; right:0; top:0; bottom:0; width:min(460px,92vw); z-index:70;
  background:#fff; box-shadow:-24px 0 70px -30px rgba(16,32,55,.4);
  padding:clamp(28px,4vw,52px); overflow-y:auto;
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .55s var(--ease);
}
.detail[data-open="true"]{ transform:none; }
.detail__close{
  align-self:flex-end; width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--ink-mid); transition:border-color .3s,color .3s;
}
.detail__close:hover{ border-color:var(--blue); color:var(--blue); }
.detail__close svg{ width:18px; height:18px; }
.detail__kicker{ margin-top:26px; font-size:10.5px; letter-spacing:.3em; color:var(--blue); font-weight:600; }
.detail__name{ margin-top:14px; font-size:clamp(26px,3vw,38px); font-weight:300; line-height:1.1; }
.detail__ident{ margin-top:12px; color:var(--ink-soft); font-size:14px; letter-spacing:.06em; }
.detail__body{ margin-top:26px; font-size:15.5px; color:var(--ink-mid); }
.detail__body p + p{ margin-top:1em; }
.detail__link{
  margin-top:auto; padding-top:34px;
  display:inline-flex; align-items:center; gap:12px;
  font-size:11.5px; letter-spacing:.24em; font-weight:600; color:var(--blue);
}
.detail__link svg{ width:18px; height:18px; transition:transform .4s var(--ease); }
.detail__link:hover svg{ transform:translateX(7px); }

/* ============================================================
   8. APPROACH
   ============================================================ */
.approach{ padding:clamp(90px,13vh,170px) var(--gut); border-top:1px solid var(--line); }
.approach__list{ list-style:none; padding:0; margin-top:clamp(44px,6vh,80px); display:grid; gap:1px; background:var(--line); }
.approach__list li{ background:var(--paper); padding:clamp(28px,4vw,54px) 0; display:grid; gap:16px; }
.approach__n{ font-family:var(--f-display); font-size:11px; letter-spacing:.24em; color:var(--blue); }
.approach__list h3{ font-size:clamp(19px,2.1vw,27px); font-weight:400; }
.approach__list p{ color:var(--ink-soft); max-width:62ch; font-size:16px; }

@media (min-width:900px){
  .approach__list li{ grid-template-columns:80px 300px 1fr; gap:40px; align-items:baseline; }
}

/* Wide screens: heading beside the field, not above it. Short-and-wide laptops
   (1366×768, 1440×900) have horizontal room to spare and no vertical room at
   all — stacking wasted the former and ran out of the latter. */
@media (min-width:1100px){
  .eco{
    display:grid;
    grid-template-columns:minmax(300px,420px) 1fr;
    grid-template-rows:auto auto;
    gap:0 clamp(40px,5vw,90px);
    align-items:center;
  }
  .eco__head { grid-column:1; grid-row:1; align-self:end; margin-bottom:0; }
  .eco__field{ grid-column:2; grid-row:1 / 3; align-self:center;
               max-width:min(1100px, calc((100vh - 220px) * 1.6129)); }

  /* The detail panel moves INTO the left column instead of covering the map.
     Clicking a node used to hide the very thing the section is about. */
  .detail{
    grid-column:1; grid-row:2; align-self:start;
    position:relative; width:auto; max-width:none;
    background:none; box-shadow:none; padding:0;
    transform:translateY(10px); opacity:0;
    transition:opacity .4s var(--ease), transform .4s var(--ease);
  }
  .detail[data-open="true"]{ opacity:1; transform:none; margin-top:30px; }
  .detail__close{ position:absolute; top:0; right:0; width:32px; height:32px; }
  .detail__close svg{ width:15px; height:15px; }
  .detail__kicker{ margin-top:0; padding-right:46px; }
  .detail__body{ font-size:15px; }
  .detail__link{ margin-top:26px; padding-top:0; }

  /* The lede steps aside so the panel has room on short laptops. */
  .eco__lede{ overflow:hidden; max-height:200px;
              transition:opacity .3s var(--ease), max-height .45s var(--ease), margin-top .3s var(--ease); }
  .eco[data-detail="open"] .eco__lede{ opacity:0; max-height:0; margin-top:0; }
}

/* ============================================================
   9. CONTACT + FOOT
   ============================================================ */
.contact{
  padding:clamp(90px,13vh,170px) var(--gut);
  border-top:1px solid var(--line);
  background:var(--paper-warm);
}
.contact__h{ font-size:clamp(30px,5vw,64px); font-weight:300; letter-spacing:-.015em; }
.contact__mail{
  display:inline-block; margin-top:30px;
  font-size:clamp(17px,2.2vw,26px); color:var(--blue);
  border-bottom:1px solid rgba(22,104,214,.3); padding-bottom:4px;
  transition:border-color .35s;
}
.contact__mail:hover{ border-color:var(--blue); }
.contact__note{ margin-top:44px; font-size:12.5px; letter-spacing:.12em; color:var(--ink-soft); }

.foot{
  padding:26px var(--gut); border-top:1px solid var(--line);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  font-size:11px; letter-spacing:.2em; color:var(--ink-soft);
}
.foot__sep{ flex:1 1 40px; height:1px; background:var(--line); }

/* ============================================================
   10. CURSOR FILAMENT
   ============================================================ */
.filament{
  position:fixed; inset:0; z-index:90; pointer-events:none;
  width:100%; height:100%;
}

/* ============================================================
   11. RESPONSIVE
   ============================================================ */
@media (max-width:880px){
  .nav__links{
    position:fixed; inset:0 0 auto 0; flex-direction:column; gap:0;
    background:rgba(250,252,253,.97); backdrop-filter:blur(16px);
    padding:88px var(--gut) 34px;
    transform:translateY(-102%); transition:transform .5s var(--ease);
    box-shadow:0 20px 50px -30px rgba(16,32,55,.5);
  }
  .nav[data-open="true"] .nav__links{ transform:none; }
  .nav__links a{ padding:16px 0; border-bottom:1px solid var(--line); font-size:13px; }
  .nav__toggle{ display:block; z-index:2; }

  /* hero: no scroll-push on small screens — it fights native scroll.
     Portrait recomposition: type sits in clean space up top, the aperture
     anchors the lower third. */
  .hero__track{ height:100vh; }
  .hero__plate{
    transform:none;
    background-position:76% 100%;
  }
  .hero__plate::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg,
      rgba(246,249,251,.99) 0%,
      rgba(246,249,251,.97) 26%,
      rgba(246,249,251,.72) 44%,
      rgba(246,249,251,0)   66%);
  }
  .hero__type{ top:15vh; transform:none; opacity:1; right:var(--gut); }
  .hero__circuit{
    width:100%; opacity:.28; transform:none; height:62%;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
  }
  .hero__veil{ display:none; }
  .hero__cue{ display:none; }

  /* ecosystem: field collapses to a legible list */
  .eco__field{ aspect-ratio:auto; display:grid; gap:1px; background:var(--line); }
  .eco__plot,.eco__core{ display:none; }
  .node{
    position:static; transform:none; flex-direction:row; gap:20px;
    background:var(--paper-warm); padding:22px 20px; width:100%;
    justify-content:flex-start; align-items:center;
  }
  .node:hover{ transform:none; }
  .node__mark{ width:52px; height:52px; flex:none; }
  .node__label{ opacity:1; font-size:13px; letter-spacing:.14em; text-align:left; max-width:none; }
  .detail{ width:100%; }
}

@media (max-width:520px){
  .lockup__sub{ gap:10px; }
  .lockup__sub i{ max-width:40px; }
}

/* ============================================================
   12. MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .hero__track{ height:100vh; }
  .hero__plate,.hero__type,.hero__circuit{ transform:none !important; opacity:1 !important; }
  .hero__veil{ display:none; }
  .filament{ display:none; }
}