/* ═══════════════════════════════════════════
   GRINELY — Vision Page (v2 — impactful)
   ═══════════════════════════════════════════ */

body.page-vision{background:var(--dark);color:var(--white);overflow-x:hidden}
body.page-vision .nav-logo{color:var(--white)}
body.page-vision .nav-links a{color:var(--white);border-color:rgba(255,255,255,.1)}
body.page-vision .nav-links a:hover{border-color:rgba(255,255,255,.5)}
body.page-vision .nav-burger span{background:var(--white)}

/* ═══ GRAIN OVERLAY ═══ */
body.page-vision::after{
  content:'';position:fixed;inset:0;z-index:9000;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  background-repeat:repeat;
  opacity:.5;
}

/* ═══ HERO — full screen, centered giant text ═══ */
.vh{
  position:relative;width:100%;height:100vh;height:100svh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.vh-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(25,25,25,1) 0%,var(--dark) 80%);
}

/* Spline 3D eye — behind text */
.vh-spline{
  position:absolute;inset:0;z-index:1;
  opacity:.55;
  /* Clip bottom 40px to hide "Built with Spline" watermark */
  clip-path:inset(0 0 40px 0);
  /* Scale up the eye */
  transform:scale(1.6);
  transform-origin:center center;
}
.vh-spline spline-viewer{
  width:100%;height:calc(100% + 40px);
  display:block;
}
/* Block scroll/zoom on Spline but keep mouse tracking for the eye */
.vh-spline-guard{
  position:absolute;inset:0;z-index:2;
  /* Let pointer move events pass to Spline for tracking,
     but block wheel events via JS */
  pointer-events:none;
}

.vh-content{
  position:relative;z-index:2;text-align:center;
  padding:0 var(--gutter);
  pointer-events:none; /* let mouse events pass through to Spline */
}
.vh-label{
  font-family:var(--mono);font-size:.55rem;
  letter-spacing:.25em;text-transform:uppercase;
  color:rgba(255,255,255,.25);
  margin-bottom:2rem;
  animation:vSlideUp .8s .2s both;
}
.vh-title{
  font-weight:800;
  font-size:clamp(2.8rem,8vw,7rem);
  letter-spacing:-.04em;line-height:.95;
  animation:vSlideUp .8s .35s both;
}
/* Outline text — shadow technique (no ligature bugs) */
.vh-title em{
  font-style:normal;
  color:transparent;
  background:none;
  text-shadow:
    -1px -1px 0 rgba(255,255,255,.3),
     1px -1px 0 rgba(255,255,255,.3),
    -1px  1px 0 rgba(255,255,255,.3),
     1px  1px 0 rgba(255,255,255,.3);
}
.vh-sub{
  font-size:clamp(.8rem,1.2vw,1rem);
  color:rgba(255,255,255,.4);
  max-width:480px;margin:2rem auto 0;
  line-height:1.7;
  animation:vSlideUp .8s .5s both;
}
.vh-scroll{
  position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:.5rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.15);
  z-index:2;
  animation:vScrollIn .8s .7s both;
}
.vh-scroll span{
  display:block;width:1px;height:30px;margin:0 auto .6rem;
  background:linear-gradient(to bottom,rgba(255,255,255,.3),transparent);
  animation:scrollP 2s ease-in-out infinite;
}
@keyframes scrollP{0%,100%{opacity:.3;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.3)}}
@keyframes vSlideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}

/* ═══ STATS BAND ═══ */
.v-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.v-stat{
  padding:clamp(2rem,4vh,3.5rem) var(--gutter);
  text-align:center;
  border-right:1px solid rgba(255,255,255,.06);
}
.v-stat:last-child{border-right:none}
.v-stat-num{
  font-weight:800;
  font-size:clamp(2rem,5vw,3.5rem);
  letter-spacing:-.03em;
  line-height:1;
  margin-bottom:.5rem;
}
.v-stat-label{
  font-family:var(--mono);font-size:.5rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.3);
}

/* ═══ MANIFESTO — big editorial ═══ */
.v-mani{
  padding:clamp(6rem,15vh,12rem) var(--gutter);
  position:relative;
}
.v-mani-inner{max-width:1200px;margin:0 auto}
.v-mani-quote{
  font-weight:800;
  font-size:clamp(1.6rem,4.5vw,4rem);
  line-height:1.15;letter-spacing:-.03em;
  max-width:900px;
}
.v-mani-quote .highlight{
  color:rgba(255,255,255, 1);
  text-shadow:0 0 20px rgba(255,255,255, 1), 0 0 40px rgba(255,255,255, 1);
}
.v-mani-body{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,6rem);
  margin-top:clamp(3rem,6vh,5rem);
}
.v-mani-body p{
  font-size:clamp(.8rem,1vw,.95rem);
  line-height:1.8;color:rgba(255,255,255,.45);
}
.v-mani-body p strong{color:rgba(255,255,255,.8);font-weight:600}

/* ═══ VALUES — full grid ═══ */
.v-vals-wrap{
  padding:clamp(4rem,8vh,7rem) var(--gutter);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.v-vals-header{
  max-width:1200px;margin:0 auto;
  margin-bottom:2.5rem;
}
.v-vals-header h2{
  font-weight:800;font-size:clamp(1.5rem,3.5vw,2.5rem);
  letter-spacing:-.02em;
}
.v-vals-grid{
  max-width:1200px;margin:0 auto;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1px;
  background:rgba(255,255,255,.04);
}
.v-val-card{
  background:var(--dark);
  padding:clamp(1.5rem,2.5vw,2.5rem);
  transition:background .3s;
}
.v-val-card:hover{
  background:rgba(255,255,255,.04);
}
.v-val-num{
  font-family:var(--mono);font-size:.45rem;
  letter-spacing:.15em;color:rgba(255,255,255,.2);
  margin-bottom:1.5rem;
}
.v-val-card h3{
  font-weight:700;font-size:clamp(.85rem,1.1vw,1rem);
  margin-bottom:.8rem;
}
.v-val-card p{
  font-size:.75rem;line-height:1.7;
  color:rgba(255,255,255,.4);
}

/* ═══ APPROACH — alternating blocks ═══ */
.v-approach{
  padding:clamp(6rem,12vh,10rem) var(--gutter);
  background:var(--bg);color:var(--fg);
}
.v-approach-inner{max-width:1100px;margin:0 auto}
.v-approach-label{
  font-family:var(--mono);font-size:.55rem;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--fg2);margin-bottom:3rem;
}
.v-appr-block{
  display:grid;grid-template-columns:1fr 1.4fr;
  gap:clamp(2rem,5vw,6rem);
  align-items:start;
  padding:clamp(2rem,4vh,3.5rem) 0;
  border-top:1px solid var(--border);
}
.v-appr-block h3{
  font-weight:800;font-size:clamp(1.2rem,2.5vw,2rem);
  letter-spacing:-.02em;line-height:1.15;
  position:sticky;top:calc(var(--nav-h) + 2rem);
}
.v-appr-block p{
  font-size:clamp(.8rem,1vw,.9rem);
  line-height:1.8;color:var(--fg2);
  padding-top:.3em; /* nudge down to align with h3 cap height */
}

/* ═══ CAPABILITIES — dark, grid with hover ═══ */
.v-caps{
  background:var(--dark);color:var(--white);
  padding:clamp(5rem,10vh,8rem) var(--gutter);
}
.v-caps-inner{max-width:1100px;margin:0 auto}
.v-caps-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:3rem;padding-bottom:1.5rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.v-caps-head h2{
  font-weight:800;font-size:clamp(1.5rem,3.5vw,2.5rem);
  letter-spacing:-.02em;
}
.v-caps-head p{
  font-size:.7rem;color:rgba(255,255,255,.3);
  max-width:300px;text-align:right;line-height:1.5;
}
.v-caps-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:rgba(255,255,255,.04);
}
.v-cap-cell{
  background:var(--dark);padding:clamp(1.2rem,2.5vw,2rem);
  transition:background .3s;
}
.v-cap-cell:hover{background:rgba(255,255,255,.03)}
.v-cap-cell h3{
  font-weight:700;font-size:.75rem;
  margin-bottom:1rem;padding-bottom:.7rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.v-cap-cell ul{
  list-style:none;font-family:var(--mono);
  font-size:.6rem;line-height:2.4;
  color:rgba(255,255,255,.35);
}
.v-cap-cell ul li{transition:color .2s}
.v-cap-cell:hover ul li{color:rgba(255,255,255,.55)}

/* ═══ CTA ═══ */
.v-cta{
  padding:clamp(6rem,14vh,12rem) var(--gutter);
  text-align:center;
  position:relative;
  background:var(--dark);
  border-top:1px solid rgba(255,255,255,.06);
}
.v-cta h2{
  font-weight:800;
  font-size:clamp(2rem,6vw,4.5rem);
  letter-spacing:-.03em;
  margin-bottom:1rem;
}
.v-cta p{
  font-size:clamp(.8rem,1.1vw,.95rem);
  color:rgba(255,255,255,.35);
  max-width:460px;margin:0 auto 2.5rem;line-height:1.7;
}
.v-cta-btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--mono);font-size:.65rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--dark);background:var(--white);
  padding:.9em 2.2em;border:none;
  transition:all .3s;
}
.v-cta-btn:hover{
  background:transparent;color:var(--white);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
}
.v-cta-btn svg{width:16px;height:16px;transition:transform .2s}
.v-cta-btn:hover svg{transform:translateX(5px)}

/* ═══ REVEALS ═══ */
.vr{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.25,.46,.45,.94),transform .7s cubic-bezier(.25,.46,.45,.94)}
.vr.is-v{opacity:1;transform:translateY(0)}
.vr-d1{transition-delay:.1s}.vr-d2{transition-delay:.2s}.vr-d3{transition-delay:.3s}.vr-d4{transition-delay:.35s}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1024px){
  .v-caps-grid{grid-template-columns:1fr 1fr}
  .v-vals-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
  .v-stats{grid-template-columns:1fr 1fr}
  .v-stat{border-bottom:1px solid rgba(255,255,255,.06)}
  .v-mani-body{grid-template-columns:1fr}
  .v-appr-block,.v-appr-block:nth-child(even){grid-template-columns:1fr}
  .v-appr-block h3{position:static;margin-bottom:1rem}
  .v-caps-head{flex-direction:column;align-items:flex-start;gap:.8rem}
  .v-caps-head p{text-align:left}
  .v-vals-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .v-stats{grid-template-columns:1fr}
  .v-stat{border-right:none}
  .v-caps-grid{grid-template-columns:1fr}
  .v-vals-grid{grid-template-columns:1fr}
}
@media(min-width:1800px){
  .v-mani-inner,.v-approach-inner,.v-caps-inner{max-width:1400px}
  .vh-title{font-size:8rem}
  .v-mani-quote{font-size:4.5rem;max-width:1100px}
}

@media(prefers-reduced-motion:reduce){
  .vr{opacity:1;transform:none;transition:none}
  [class*="vSlideUp"]{animation:none!important}
  .vh-scroll span{animation:none!important}
}

/* Keep nav dark on scroll */
body.page-vision .nav.scrolled{
  background:rgba(10,10,10,.92) !important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}

/* Block Spline touch interactions on mobile */
@media(max-width:1024px){
  .vh-spline spline-viewer{pointer-events:none !important;touch-action:none !important}
}

@keyframes vScrollIn{from{opacity:0;transform:translateX(-50%) translateY(40px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}