/* ==========================================================================
   /vision — six chapters over the chrome ribbon.
   Keeps the page's language: dark ground with red and green light, the
   sticky ribbon canvas, Sora headlines, mono indexes, glass cards.
   Content is visible by default; .vx--motion (set by visionInteractions.js)
   is what hides elements until their reveal.
   ========================================================================== */

.vx{
  --vx-gutter:clamp(20px, 6vw, 96px);
  --vx-measure:1180px;
  --vx-dim:rgba(236,237,237,.34);
}

/* The ribbon stays behind the copy: it fades out over the text column. */
.vx #vision-ribbon-canvas{
  opacity:.34;
  -webkit-mask-image:linear-gradient(90deg, transparent 0 34%, #000 68%);
  mask-image:linear-gradient(90deg, transparent 0 34%, #000 68%);
}

.vx-wrap{
  position:relative;
  z-index:2;
  width:min(var(--vx-measure), calc(100% - var(--vx-gutter) * 2));
  margin:0 auto;
}
.vx-chapter{
  position:relative;
  padding:clamp(96px, 16vh, 168px) 0;
  scroll-margin-top:96px;
}

.vx-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:26px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-dimmer);
}
.vx-kicker__num{
  display:inline-grid;
  place-items:center;
  min-width:30px;
  height:22px;
  padding:0 7px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  color:var(--ink);
  letter-spacing:.04em;
}
.vx-title{
  font-size:clamp(36px, 5.2vw, 72px);
  line-height:1.02;
  letter-spacing:-.035em;
  text-wrap:balance;
  max-width:14ch;
}
.vx-body{
  margin-top:26px;
  max-width:46ch;
  color:var(--ink-dim);
  font-size:clamp(15px, 1.15vw, 17px);
  line-height:1.7;
}
.vx-body a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.3);
  text-underline-offset:4px;
  transition:text-decoration-color .25s var(--ease-soft);
}
.vx-body a:hover{ text-decoration-color:currentColor; }

/* ---------- chapter rail ---------- */
.vx-rail{
  position:fixed;
  left:clamp(14px, 2vw, 30px);
  top:50%;
  z-index:30;
  translate:-8px -50%;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s var(--ease-soft), translate .4s var(--ease-soft);
}
.vx-rail.is-visible{ opacity:1; translate:0 -50%; pointer-events:auto; }
.vx-rail ol{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.vx-rail a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:32px;
  padding:0 10px 0 0;
  color:var(--ink-dimmer);
  font-size:11px;
  text-decoration:none;
  transition:color .25s var(--ease-soft);
}
.vx-rail a .mono{
  position:relative;
  padding-left:22px;
  font-size:10.5px;
}
.vx-rail a .mono::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  width:14px;
  height:1px;
  background:currentColor;
  transform-origin:left center;
  transform:scaleX(.55);
  transition:transform .35s var(--ease-soft);
}
.vx-rail__label{
  opacity:0;
  translate:-6px 0;
  transition:opacity .25s var(--ease-soft), translate .25s var(--ease-soft);
}
.vx-rail:hover .vx-rail__label,
.vx-rail a:focus-visible .vx-rail__label,
.vx-rail a[aria-current] .vx-rail__label{ opacity:1; translate:0 0; }
.vx-rail a:hover,
.vx-rail a[aria-current]{ color:var(--ink); }
.vx-rail a[aria-current] .mono::before{ transform:scaleX(1); }
.vx-rail a:focus-visible{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px; border-radius:6px; }

/* ---------- hero ---------- */
.vx-hero{
  min-height:100svh;
  display:flex;
  align-items:center;
  padding-top:140px;
}
.vx-hero__title{
  font-size:clamp(46px, 8.2vw, 124px);
  line-height:.94;
  letter-spacing:-.05em;
  max-width:11ch;
  text-wrap:balance;
}
.vx-word{ display:inline-block; }
.vx-hero__copy{
  margin-top:34px;
  max-width:44ch;
  color:var(--ink-dim);
  font-size:clamp(16px, 1.3vw, 19px);
  line-height:1.65;
}
.vx-hero__cue{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:54px;
  min-height:44px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-dimmer);
  text-decoration:none;
  transition:color .25s var(--ease-soft);
}
.vx-hero__cue span{
  position:relative;
  width:1px;
  height:38px;
  background:rgba(255,255,255,.16);
  overflow:hidden;
}
.vx-hero__cue span::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent, var(--ink));
  animation:vx-cue 2.2s var(--ease-soft) infinite;
}
.vx-hero__cue:hover{ color:var(--ink); }
@keyframes vx-cue{
  from{ transform:translateY(-100%); }
  to{ transform:translateY(100%); }
}

/* ---------- purpose: lines light as they are read ---------- */
.vx-statement{
  font-size:clamp(38px, 6.4vw, 96px);
  line-height:1.02;
  letter-spacing:-.045em;
}
.vx-line{
  display:block;
  transition:color .7s var(--ease-soft), opacity .7s var(--ease-soft);
}
.vx--motion .vx-line{ color:var(--vx-dim); }
.vx--motion .vx-line.is-lit{ color:var(--ink); }

/* ---------- philosophy ---------- */
.vx-split{
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1fr);
  gap:clamp(40px, 7vw, 120px);
  align-items:start;
}
.vx-split__aside{
  position:sticky;
  top:clamp(120px, 20vh, 180px);
}
.vx-thoughts{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:clamp(48px, 10vh, 104px);
  padding-block:clamp(20px, 8vh, 80px);
}
.vx-thought{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:22px;
  align-items:baseline;
  transition:opacity .6s var(--ease-soft);
}
.vx-thought p{
  font-family:'Sora',sans-serif;
  font-size:clamp(22px, 2.3vw, 34px);
  font-weight:600;
  line-height:1.22;
  letter-spacing:-.02em;
  text-wrap:pretty;
}
.vx-thought__num{
  font-size:11px;
  color:var(--ink-dimmer);
  padding-top:.6em;
}
.vx--motion .vx-thought.is-in{ opacity:.32; }
.vx--motion .vx-thought.is-in.is-lit{ opacity:1; }

/* ---------- mission map ---------- */
.vx-split--mission{ align-items:center; }
.vx-split--mission .vx-split__aside{ position:static; }
.vx-map{
  position:relative;
  aspect-ratio:1;
  width:min(100%, 560px);
  justify-self:center;
}
.vx-map__lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}
.vx-map__orbit{
  fill:none;
  stroke:rgba(255,255,255,.08);
  stroke-width:.25;
  stroke-dasharray:.8 1.4;
  vector-effect:non-scaling-stroke;
}
.vx-map__line{
  stroke:rgba(255,255,255,.2);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1;
  stroke-dashoffset:0;
  transition:stroke .35s var(--ease-soft), stroke-width .35s var(--ease-soft), stroke-dashoffset 1.2s var(--ease-luxe, cubic-bezier(.16,1,.3,1));
}
.vx--motion .vx-map:not(.is-in) .vx-map__line{ stroke-dashoffset:1; }
.vx-map__line:nth-of-type(2){ transition-delay:0s, 0s, .08s; }
.vx-map__line:nth-of-type(3){ transition-delay:0s, 0s, .16s; }
.vx-map__line:nth-of-type(4){ transition-delay:0s, 0s, .24s; }
.vx-map__line:nth-of-type(5){ transition-delay:0s, 0s, .32s; }
.vx-map__line:nth-of-type(6){ transition-delay:0s, 0s, .4s; }
.vx-map__line.is-hot{ stroke:rgba(255,255,255,.85); stroke-width:1.6; }
.vx-map__core{
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(96px, 24%, 132px);
  aspect-ratio:1;
  translate:-50% -50%;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.22), transparent 55%),
    linear-gradient(150deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 30px 80px -40px rgba(0,0,0,.9);
  font:800 clamp(15px, 1.5vw, 19px)/1 'Sora',sans-serif;
  letter-spacing:-.02em;
}
.vx-map__core::after{
  content:'';
  position:absolute;
  inset:-10px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
  animation:vx-pulse 3.6s var(--ease-soft) infinite;
}
@keyframes vx-pulse{
  0%{ transform:scale(.92); opacity:.9; }
  100%{ transform:scale(1.35); opacity:0; }
}
.vx-map__nodes{ list-style:none; margin:0; padding:0; }
.vx-map__node{
  position:absolute;
  left:var(--x);
  top:var(--y);
  translate:-50% -50%;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(15,16,18,.62);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  font:600 12.5px/1.2 'Inter',sans-serif;
  white-space:nowrap;
  color:var(--ink-dim);
  transition:color .3s var(--ease-soft), border-color .3s var(--ease-soft), background .3s var(--ease-soft), scale .35s var(--ease-soft), opacity .6s var(--ease-soft);
}
.vx-map__node.is-hot{
  color:#0a0a0a;
  background:var(--ink);
  border-color:var(--ink);
  scale:1.06;
}
.vx--motion .vx-map:not(.is-in) .vx-map__node{ opacity:0; scale:.85; }
.vx-map.is-in .vx-map__node{ transition-delay:0s, 0s, 0s, 0s, calc(.3s + var(--i) * .08s); }

/* ---------- principles ---------- */
.vx-head{ margin-bottom:clamp(40px, 7vh, 72px); }
.vx-cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(14px, 1.6vw, 22px);
}
.vx-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:clamp(280px, 30vw, 360px);
  padding:clamp(24px, 2.4vw, 34px);
  border-radius:24px;
  overflow:hidden;
  transition:transform .5s var(--ease-luxe, cubic-bezier(.16,1,.3,1)), border-color .35s var(--ease-soft);
}
.vx-card:hover{ transform:translateY(-6px); border-color:rgba(255,255,255,.2); }
.vx-card__num{
  font:800 clamp(64px, 7vw, 104px)/.9 'Sora',sans-serif;
  letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.28);
  transition:color .5s var(--ease-soft), -webkit-text-stroke-color .5s var(--ease-soft);
}
.vx-card:hover .vx-card__num{ color:rgba(255,255,255,.9); -webkit-text-stroke-color:transparent; }
.vx-card h3{
  margin-top:auto;
  padding-top:28px;
  font-size:clamp(21px, 1.8vw, 26px);
  line-height:1.15;
  letter-spacing:-.02em;
}
.vx-card p{
  margin-top:12px;
  color:var(--ink-dim);
  font-size:14.5px;
  line-height:1.65;
}

/* ---------- future ---------- */
.vx-future{ text-align:center; padding-bottom:clamp(120px, 20vh, 200px); }
.vx-future .vx-kicker{ justify-content:center; }
.vx-future__title{
  font-size:clamp(40px, 6.6vw, 100px);
  line-height:.98;
  letter-spacing:-.05em;
  max-width:13ch;
  margin:0 auto;
  text-wrap:balance;
}
.vx-future__copy{
  margin-top:28px;
  color:var(--ink-dim);
  font-size:clamp(16px, 1.3vw, 19px);
}
.vx-future__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:14px 26px;
  margin-top:36px;
}
.vx-link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--ink-dim);
  font:600 13.5px/1 'Sora',sans-serif;
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.24);
  text-underline-offset:6px;
  transition:color .25s var(--ease-soft), text-decoration-color .25s var(--ease-soft);
}
.vx-link:hover{ color:var(--ink); text-decoration-color:currentColor; }

/* ---------- reveals (only once the script is running) ---------- */
.vx--motion [data-vx-reveal]{
  opacity:0;
  translate:0 26px;
  filter:blur(6px);
  transition:opacity .9s var(--ease-soft), translate .9s var(--ease-luxe, cubic-bezier(.16,1,.3,1)), filter .9s var(--ease-soft);
  transition-delay:calc(var(--i, 0) * .09s);
}
.vx--motion [data-vx-reveal].is-in{ opacity:1; translate:0 0; filter:none; }
/* thoughts keep their own focus opacity once revealed */
.vx--motion .vx-thought[data-vx-reveal].is-in{ opacity:.32; }
.vx--motion .vx-thought[data-vx-reveal].is-in.is-lit{ opacity:1; }
.vx--motion [data-vx-words] .vx-word{
  opacity:0;
  translate:0 .4em;
  filter:blur(8px);
  transition:opacity .8s var(--ease-soft), translate .9s var(--ease-luxe, cubic-bezier(.16,1,.3,1)), filter .8s var(--ease-soft);
  transition-delay:calc(var(--i) * .07s);
}
.vx--motion [data-vx-words].is-in .vx-word{ opacity:1; translate:0 0; filter:none; }

/* Room for the chapter rail beside the copy. */
@media (min-width:1101px){
  .vx{ --vx-gutter:clamp(128px, 10vw, 160px); }
}

/* ---------- tablet and phone ---------- */
@media (max-width:1100px){
  .vx-rail{ display:none; }
}
@media (max-width:900px){
  .vx #vision-ribbon-canvas{
    opacity:.28;
    -webkit-mask-image:linear-gradient(180deg, #000, transparent 85%);
    mask-image:linear-gradient(180deg, #000, transparent 85%);
  }
  .vx-chapter{ padding:clamp(72px, 12vh, 112px) 0; }
  .vx-hero{ min-height:88svh; padding-top:120px; }
  .vx-split{ grid-template-columns:1fr; gap:40px; }
  .vx-split__aside{ position:static; }
  .vx-thoughts{ gap:34px; padding-block:0; }
  .vx-thought{ gap:16px; }
  .vx-thought p{ font-size:clamp(20px, 5.6vw, 26px); }
  /* No hover on phones: every thought stays fully readable. */
  .vx--motion .vx-thought[data-vx-reveal].is-in{ opacity:1; }
  .vx-cards{ grid-template-columns:1fr; }
  .vx-card{ min-height:0; }
  .vx-card__num{ font-size:64px; }
  .vx-card h3{ padding-top:22px; }
  /* The radial map would collide at phone width: the disciplines become chips. */
  .vx-map{ aspect-ratio:auto; width:100%; }
  .vx-map__lines,
  .vx-map__core{ display:none; }
  .vx-map__nodes{ display:flex; flex-wrap:wrap; gap:8px; }
  .vx-map__node{ position:static; translate:none; }
}
@media (max-width:420px){
  .vx-hero__title{ font-size:clamp(42px, 13vw, 56px); }
  .vx-statement{ font-size:clamp(32px, 10vw, 44px); }
  .vx-future__actions .vision-cta-btn{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  .vx-hero__cue span::after,
  .vx-map__core::after{ animation:none; }
  .vx-card:hover{ transform:none; }
}

/* ---------- light theme ---------- */
html[data-theme='light'] .vx{ --vx-dim:rgba(17,19,22,.26); }
html[data-theme='light'] .vx-kicker__num{ border-color:rgba(17,19,22,.16); color:#111316; }
html[data-theme='light'] .vx-body a{ color:#111316; text-decoration-color:rgba(17,19,22,.3); }
html[data-theme='light'] .vx-rail a:focus-visible{ outline-color:rgba(17,19,22,.6); }
html[data-theme='light'] .vx-hero__cue span{ background:rgba(17,19,22,.14); }
html[data-theme='light'] .vx-map__orbit{ stroke:rgba(17,19,22,.12); }
html[data-theme='light'] .vx-map__line{ stroke:rgba(17,19,22,.2); }
html[data-theme='light'] .vx-map__line.is-hot{ stroke:rgba(17,19,22,.8); }
html[data-theme='light'] .vx-map__core{
  border-color:rgba(17,19,22,.12);
  background:linear-gradient(150deg, rgba(255,255,255,.9), rgba(255,255,255,.55));
  color:#111316;
}
html[data-theme='light'] .vx-map__core::after{ border-color:rgba(17,19,22,.1); }
html[data-theme='light'] .vx-map__node{ border-color:rgba(17,19,22,.12); background:rgba(255,255,255,.75); color:#3d4045; }
html[data-theme='light'] .vx-map__node.is-hot{ background:#111316; border-color:#111316; color:#fff; }
html[data-theme='light'] .vx-card__num{ -webkit-text-stroke-color:rgba(17,19,22,.24); }
html[data-theme='light'] .vx-card:hover .vx-card__num{ color:#111316; }
html[data-theme='light'] .vx-link{ text-decoration-color:rgba(17,19,22,.24); }