/* ==========================================================================
   Concept: THE ASCENT
   Technique reference: landonorris.com (oversized type, pinned/scrubbed
   scenes, one reveal shape used everywhere) — palette, fonts, imagery and
   copy are all Vertex's own. Scoped entirely under #concept-ascent /
   #ascent-preloader so nothing leaks into the original homepage or the
   Funnel concept. Uses the brand tokens already on :root in css/style.css
   (Ink/Paper/Kraft/Signal, Syne + Inter) — no new colours or fonts.
   ========================================================================== */

#concept-ascent{
  --gap: 1.25rem;
  --pad: 1.25rem;
  color:var(--paper);
  font-family:var(--font-body);
  /* No background here on purpose — the .ac-camps-track panels have no
     background of their own either, so document.body (set + swapped by
     ascent.js, Rule 8) shows through cleanly. Every other section (hero,
     cases, summit) sets its own explicit background and is unaffected. */
}
/* Safety net: at clamp(...,20rem) sizes a single long word can be wider
   than its column — break it rather than letting it run off-screen. */
#concept-ascent h1, #concept-ascent h2{ overflow-wrap:break-word; word-break:break-word; }

/* Rule 2 — 4-column grid, gap/pad from variables */
#concept-ascent .ac-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  column-gap:var(--gap);
  max-width:1600px; margin:0 auto; padding:0 var(--pad);
}
#concept-ascent .ac-wrap{ max-width:1600px; margin:0 auto; padding:0 var(--pad); }

/* Rule 6 — the one reveal shape, used for every image/panel/overlay reveal */
#concept-ascent .reveal-ellipse{ clip-path: ellipse(100% 0% at 50% 0); }

/* Rule 10 — SplitType line masks */
#concept-ascent .split-line{ overflow:hidden; }
#concept-ascent .split-line .line{ will-change:transform; }

#ascent-preloader{
  position:fixed; inset:0; z-index:5000;
  background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
}
#ascent-preloader svg{width:220px; height:140px; overflow:visible;}
#ascent-preloader path{ fill:none; stroke:var(--kraft); stroke-width:1.2; stroke-dasharray:400; stroke-dashoffset:400; }
#ascent-preloader .ap-altitude{
  font-family:var(--font-display); font-weight:800; letter-spacing:-0.03em;
  font-size:clamp(28px,5vw,44px); margin-top:22px; text-transform:uppercase;
}
#ascent-preloader .ap-altitude span{color:var(--kraft);}
#ascent-preloader .ap-label{ font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--slate); margin-top:8px; }
#ascent-preloader .ap-skip{
  position:absolute; bottom:28px; right:28px;
  background:transparent; border:1px solid var(--line-on-dark); color:var(--slate);
  font-family:var(--font-body); font-size:12px; padding:9px 16px;
}
#ascent-preloader .ap-skip:hover{border-color:var(--paper); color:var(--paper);}
#ascent-preloader.is-done{ animation:ap-pullback .6s cubic-bezier(.19,1,.22,1) forwards; pointer-events:none; }
@keyframes ap-pullback{ to{opacity:0; transform:scale(1.04);} }

/* ==========================================================================
   HERO — full-viewport canvas contour map, oversized headline
   ========================================================================== */
#concept-ascent .ac-hero{
  position:relative; height:calc(var(--vh, 1vh) * 100); min-height:640px;
  display:flex; align-items:center; overflow:hidden;
}
#concept-ascent .ac-hero canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:0.55; }
#concept-ascent .ac-hero-inner{ position:relative; z-index:2; width:100%; min-width:0; }
#concept-ascent .ac-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--kraft);
}
#concept-ascent .ac-eyebrow::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--signal);}
#concept-ascent .ac-hero h1{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:-0.045em; line-height:0.86;
  font-size:clamp(2.75rem, 7.5vw, 7.5rem);
  margin:22px 0 0; max-width:20ch;
  text-shadow:0 4px 40px rgba(0,0,0,0.55);
}
#concept-ascent .ac-hero h1 em{font-style:normal; color:var(--kraft);}
#concept-ascent .ac-hero-sub{ font-size:18px; line-height:1.65; color:#c9c2b6; max-width:520px; margin-top:26px; }
#concept-ascent .ac-hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-top:40px;}
#concept-ascent .ac-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:14px;
  padding:14px 26px; background:var(--paper); color:var(--ink);
  transition:background .6s cubic-bezier(.19,1,.22,1), color .6s cubic-bezier(.19,1,.22,1);
}
#concept-ascent .ac-btn:hover{background:var(--signal); color:var(--white);}
#concept-ascent .ac-btn-ghost{ background:transparent; color:var(--paper); border:1px solid var(--line-on-dark); }
#concept-ascent .ac-btn-ghost:hover{border-color:var(--paper);}
#concept-ascent .ac-scroll-cue{
  position:absolute; left:var(--pad); bottom:32px; z-index:2;
  display:flex; align-items:center; gap:12px;
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--slate);
}
#concept-ascent .ac-scroll-cue .ac-cue-line{width:1px; height:34px; background:var(--line-on-dark); position:relative; overflow:hidden;}
#concept-ascent .ac-scroll-cue .ac-cue-line::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%; background:var(--kraft);
  animation:ac-cue-fall 1.8s ease-in-out infinite;
}
@keyframes ac-cue-fall{ to{top:100%;} }
@media (max-width:640px){ #concept-ascent .ac-scroll-cue{display:none;} }

/* ==========================================================================
   SCROLL SPINE — fixed altitude readout + SVG route line, right edge
   ========================================================================== */
#concept-ascent .ac-spine{
  position:fixed; right:28px; top:50%; transform:translateY(-50%); z-index:60;
  display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--paper);
}
#concept-ascent .ac-spine svg{ width:2px; height:220px; overflow:visible; }
#concept-ascent .ac-spine-route{ fill:none; stroke:var(--line-on-dark); stroke-width:2; }
#concept-ascent .ac-spine-fill{ fill:none; stroke:var(--signal); stroke-width:2; stroke-dasharray:220; stroke-dashoffset:220; }
#concept-ascent .ac-spine-alt{ font-family:var(--font-display); font-weight:800; font-size:13px; letter-spacing:-0.02em; writing-mode:vertical-rl; white-space:nowrap; }
#concept-ascent .ac-spine-alt span{color:var(--kraft);}
@media (max-width:990px){ #concept-ascent .ac-spine{display:none;} }

/* ==========================================================================
   CAMPS — pinned scrubbed sequence (Rule 4)
   Build / Rank / Retain / Advertise, each revealed with the ellipse shape.
   ========================================================================== */
#concept-ascent .ac-camps-track{ position:relative; height:calc(var(--vh, 1vh) * 420); }
#concept-ascent .ac-camps-sticky{
  position:sticky; top:0; height:calc(var(--vh, 1vh) * 100); overflow:hidden;
  display:flex; align-items:center; border-top:1px solid var(--line-on-dark);
}
#concept-ascent .ac-camp-panel{
  position:absolute; inset:0; display:flex; align-items:center;
  transition:background-color .6s ease;
}
#concept-ascent .ac-camp-panel-inner{ display:grid; grid-template-columns:repeat(4,1fr); column-gap:var(--gap); align-items:start; width:100%; min-width:0; }
#concept-ascent .ac-camp-meta{ grid-column:1 / 2; display:flex; flex-direction:column; gap:6px; min-width:0; }
#concept-ascent .ac-camp-num{font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--kraft); letter-spacing:0.08em; text-transform:uppercase;}
#concept-ascent .ac-camp-alt{font-size:12px; color:var(--slate); letter-spacing:0.04em;}
#concept-ascent .ac-camp-body{ grid-column:2 / 5; min-width:0; }
#concept-ascent .ac-camp-panel h2{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:-0.04em; line-height:0.86; font-size:clamp(3.25rem, 6.5vw, 7rem);
}
#concept-ascent .ac-camp-panel p{ font-size:17px; line-height:1.75; color:#c9c2b6; max-width:560px; margin-top:24px; }
#concept-ascent .ac-camp-tag{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:28px;
  background:var(--signal); color:var(--white);
  font-family:var(--font-body); font-weight:600; font-size:13px;
  padding:12px 22px; border-radius:100px;
  box-shadow:0 0 0 0 rgba(225,75,61,0);
  transition:background .3s var(--ease), box-shadow .3s var(--ease), transform .25s var(--ease);
}
#concept-ascent .ac-camp-tag:hover{
  background:var(--signal-deep);
  box-shadow:0 16px 36px rgba(225,75,61,0.35);
  transform:translateY(-1px);
}
#concept-ascent .ac-camp-tag-arrow{ display:inline-block; transition:transform .3s var(--ease); }
#concept-ascent .ac-camp-tag:hover .ac-camp-tag-arrow{ transform:translateX(4px); }
#concept-ascent .ac-camp-index{
  position:absolute; right:var(--pad); bottom:32px; z-index:2;
  font-family:var(--font-display); font-weight:800; font-size:12px; letter-spacing:0.08em;
  color:var(--slate); text-transform:uppercase;
}
#concept-ascent .ac-camp-index span{color:var(--kraft);}

/* Static-stack fallback — applied below 991px via media query, and by JS
   (adding .no-pin) whenever GSAP/ScrollTrigger are unavailable or the
   visitor has prefers-reduced-motion, regardless of viewport width. */
@media (max-width:990px){
  #concept-ascent .ac-camps-track{ height:auto; }
  #concept-ascent .ac-camps-sticky{ position:static; height:auto; overflow:visible; display:block; }
  #concept-ascent .ac-camp-panel{ position:relative; inset:auto; clip-path:none !important; padding:90px 0; border-bottom:1px solid var(--line-on-dark); }
  #concept-ascent .ac-camp-panel-inner{ grid-template-columns:1fr; row-gap:24px; }
  #concept-ascent .ac-camp-meta, #concept-ascent .ac-camp-body{ grid-column:1 / -1; }
  #concept-ascent .ac-camp-index{ display:none; }
}
#concept-ascent .ac-camps-track.no-pin{ height:auto; }
#concept-ascent .ac-camps-track.no-pin .ac-camps-sticky{ position:static; height:auto; overflow:visible; display:block; }
#concept-ascent .ac-camps-track.no-pin .ac-camp-panel{ position:relative; inset:auto; clip-path:none !important; padding:90px 0; border-bottom:1px solid var(--line-on-dark); }
#concept-ascent .ac-camps-track.no-pin .ac-camp-panel-inner{ grid-template-columns:1fr; row-gap:24px; }
#concept-ascent .ac-camps-track.no-pin .ac-camp-meta,
#concept-ascent .ac-camps-track.no-pin .ac-camp-body{ grid-column:1 / -1; }
#concept-ascent .ac-camps-track.no-pin ~ .ac-camp-index,
#concept-ascent .ac-camps-track.no-pin .ac-camp-index{ display:none; }

/* ==========================================================================
   GUIDES — founders/trust beat between the camps and the proof strip.
   Static content, no pin/scrub — same "no background of its own" rule as
   the camps/cases/summit around it, so the dark body colour they set
   carries straight through underneath it.
   ========================================================================== */
#concept-ascent .ac-guides-head{ padding:130px 0 0; }
#concept-ascent .ac-guides-head h2{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(2.4rem, 5vw, 4.5rem); letter-spacing:-0.03em; line-height:0.9; margin-top:14px;
}
#concept-ascent .ac-guides-head p{ font-size:16px; line-height:1.7; color:#c9c2b6; max-width:560px; margin-top:22px; }
#concept-ascent .ac-guides-head .ac-btn{ margin-top:32px; }
#concept-ascent .ac-guides-grid{
  grid-template-columns:repeat(3, 1fr);
  margin-top:56px; padding:48px 0 130px; border-top:1px solid var(--line-on-dark);
}
#concept-ascent .ac-guide-num{ font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--kraft); letter-spacing:0.08em; }
#concept-ascent .ac-guide-item h3{ font-family:var(--font-display); font-weight:800; font-size:20px; letter-spacing:-0.01em; margin-top:14px; }
#concept-ascent .ac-guide-item p{ font-size:14px; line-height:1.65; color:#c9c2b6; margin-top:10px; }

@media (max-width:990px){
  #concept-ascent .ac-guides-head{ padding:90px 0 0; }
  #concept-ascent .ac-guides-grid{ grid-template-columns:1fr; row-gap:32px; padding:40px 0 90px; }
}

/* ==========================================================================
   CASE STUDIES — horizontal strip (Rule 5): spacer + sticky + scrubbed x
   ========================================================================== */
#concept-ascent .ac-cases-head{ padding:130px 0 48px; }
#concept-ascent .ac-cases-head h2{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(2.4rem, 5vw, 4.5rem); letter-spacing:-0.03em; line-height:0.9; margin-top:14px;
}
/* Taller spacer = more scroll distance per pixel of horizontal travel, so
   each case card lingers on screen longer before the next one scrubs in. */
#concept-ascent .ac-cases-spacer{ position:relative; height:calc(var(--vh, 1vh) * 340); }
#concept-ascent .ac-cases-sticky{ position:sticky; top:0; height:calc(var(--vh, 1vh) * 100); overflow:hidden; display:flex; align-items:center; }
#concept-ascent .ac-case-track{ display:flex; gap:2px; padding-left:75vw; will-change:transform; }
#concept-ascent .ac-case{
  flex:0 0 auto; width:min(78vw, 420px); min-height:340px;
  background:#221d18; border:1px solid var(--line-on-dark); padding:36px 30px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:background .3s cubic-bezier(.19,1,.22,1), color .3s cubic-bezier(.19,1,.22,1);
}
#concept-ascent .ac-case:hover{ background:var(--signal); color:var(--ink); }
#concept-ascent .ac-case:hover .ac-case-note{ color:rgba(26,23,20,0.7); }
#concept-ascent .ac-case-cap{font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate);}
#concept-ascent .ac-case:hover .ac-case-cap{ color:rgba(26,23,20,0.7); }
#concept-ascent .ac-case-result{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.6rem,3vw,2.2rem); letter-spacing:-0.03em; margin-top:18px;
}
#concept-ascent .ac-case-note{font-size:13px; color:var(--slate); margin-top:16px; line-height:1.6;}

@media (max-width:990px){
  #concept-ascent .ac-cases-spacer{ height:auto; }
  #concept-ascent .ac-cases-sticky{ position:static; height:auto; overflow:visible; display:block; }
  #concept-ascent .ac-case-track{ display:flex; flex-direction:column; padding-left:0; transform:none !important; gap:16px; }
  #concept-ascent .ac-case{ width:100%; }
}
#concept-ascent .ac-cases-spacer.no-pin{ height:auto; }
#concept-ascent .ac-cases-spacer.no-pin .ac-cases-sticky{ position:static; height:auto; overflow:visible; display:block; }
#concept-ascent .ac-cases-spacer.no-pin .ac-case-track{ display:flex; flex-direction:column; padding-left:0; transform:none !important; gap:16px; }
#concept-ascent .ac-cases-spacer.no-pin .ac-case{ width:100%; }

/* ==========================================================================
   CURSOR-FOLLOWING REVEAL BOX (Rule 9) — desktop only
   ========================================================================== */
#concept-ascent .ac-cursor-reveal{
  position:fixed; top:0; left:0; width:240px; height:160px; margin:-80px 0 0 -120px;
  pointer-events:none; z-index:900;
  background:var(--kraft); color:var(--ink);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:16px;
  font-family:var(--font-display); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:-0.01em;
  clip-path: ellipse(100% 0% at 50% 0);
  opacity:0;
}
@media (hover:none), (max-width:990px){ #concept-ascent .ac-cursor-reveal{display:none;} }

/* ==========================================================================
   VOICES — client testimonials, static grid between proof and the final
   ask. No pin/scrub — same "no background of its own" rule as everything
   else in this concept, so the dark body colour carries through.
   ========================================================================== */
#concept-ascent .ac-voices-head{ padding:130px 0 48px; }
#concept-ascent .ac-voices-head h2{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(2.4rem, 5vw, 4.5rem); letter-spacing:-0.03em; line-height:0.9; margin-top:14px;
}
/* Carousel: same pin/scrub mechanic as the ac-cases strip above (spacer +
   sticky + scroll-scrubbed), so it "works like" Routes we've climbed —
   but cards cross-fade in place instead of sliding across, since 5 short
   quotes read better held in one spot than chased across the screen. */
#concept-ascent .ac-voices-spacer{ position:relative; height:calc(var(--vh, 1vh) * 300); }
#concept-ascent .ac-voices-sticky{
  position:sticky; top:0; height:calc(var(--vh, 1vh) * 100); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
#concept-ascent .ac-voice-track{ position:relative; width:min(620px, 84vw); height:280px; }
#concept-ascent .ac-voice{
  position:absolute; inset:0; will-change:opacity;
  background:#221d18; border:1px solid var(--line-on-dark); padding:32px 28px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:background .3s cubic-bezier(.19,1,.22,1), color .3s cubic-bezier(.19,1,.22,1);
}
#concept-ascent .ac-voice:hover{ background:var(--signal); color:var(--ink); }
#concept-ascent .ac-voice:hover .ac-voice-cap{ color:rgba(26,23,20,0.75); }
#concept-ascent .ac-voice:hover .ac-voice-note{ color:rgba(26,23,20,0.6); }
#concept-ascent .ac-voice-quote{ font-family:var(--font-display); font-weight:700; font-size:19px; line-height:1.4; letter-spacing:-0.01em; }
#concept-ascent .ac-voice-cap{ display:block; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--kraft); margin-top:24px; }
#concept-ascent .ac-voice-note{ font-size:12px; color:var(--slate); margin-top:6px; }

@media (max-width:990px){
  #concept-ascent .ac-voices-head{ padding:90px 0 0; }
  #concept-ascent .ac-voices-spacer{ height:auto; padding-bottom:60px; }
  #concept-ascent .ac-voices-sticky{ position:static; height:auto; overflow:visible; display:block; }
  #concept-ascent .ac-voice-track{ position:static; width:100%; height:auto; display:flex; flex-direction:column; gap:16px; }
  #concept-ascent .ac-voice{ position:static; opacity:1 !important; min-height:230px; }
}
#concept-ascent .ac-voices-spacer.no-pin{ height:auto; padding-bottom:60px; }
#concept-ascent .ac-voices-spacer.no-pin .ac-voices-sticky{ position:static; height:auto; overflow:visible; display:block; }
#concept-ascent .ac-voices-spacer.no-pin .ac-voice-track{ position:static; width:100%; height:auto; display:flex; flex-direction:column; gap:16px; }
#concept-ascent .ac-voices-spacer.no-pin .ac-voice{ position:static; opacity:1 !important; min-height:230px; }

/* ==========================================================================
   FOOTER — summit view
   ========================================================================== */
#concept-ascent .ac-summit{ position:relative; padding:160px 0 100px; text-align:center; overflow:hidden; border-top:1px solid var(--line-on-dark); }
#concept-ascent .ac-summit::before{ content:''; position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 0%, rgba(225,75,61,0.18), transparent 65%); }
#concept-ascent .ac-summit-inner{ position:relative; z-index:1; }
#concept-ascent .ac-summit h2{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:-0.045em; line-height:0.86; font-size:clamp(3rem, 9vw, 11rem);
}
#concept-ascent .ac-summit p{font-size:16px; color:var(--slate); margin-top:18px;}
#concept-ascent .ac-climb-link{
  display:inline-flex; align-items:center; gap:14px; margin-top:44px;
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.3rem, 2.6vw, 2rem);
  color:var(--paper); padding-bottom:10px; border-bottom:2px solid var(--kraft);
  transition:color .3s cubic-bezier(.19,1,.22,1), border-color .3s cubic-bezier(.19,1,.22,1);
}
#concept-ascent .ac-climb-link:hover{color:var(--signal); border-color:var(--signal);}

@media (max-width:768px){
  #concept-ascent .ac-hero{ height:auto; min-height:calc(var(--vh, 1vh) * 100); padding:calc(var(--nav-h) + 60px) 0 60px; }
  #concept-ascent .ac-summit{padding:100px 0 70px;}
}

@media (prefers-reduced-motion: reduce){
  #concept-ascent .ac-hero canvas{display:none;}
  #concept-ascent .ac-spine{display:none;}
  #concept-ascent .ac-cursor-reveal{display:none;}
}