/* ==========================================================================
   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 + Plus Jakarta Sans) — 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 var(--pad) 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 var(--pad) 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 var(--pad) 0; }
  #concept-ascent .ac-guides-grid{ grid-template-columns:1fr; row-gap:32px; padding:40px var(--pad) 90px; }
}

/* ==========================================================================
   CASE STUDIES — horizontal strip (Rule 5): spacer + sticky + scrubbed x
   ========================================================================== */
#concept-ascent .ac-cases-head{ padding:130px var(--pad) 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;}
#concept-ascent .ac-case-note a{color:inherit; text-decoration:underline; text-underline-offset:3px;}

@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 var(--pad) 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: a real sliding track (flex row). Deliberately NOT using the
   shared .scroll-gallery class here — that component's wheel handler
   (js/main.js) converts vertical wheel input into horizontal scroll via
   preventDefault(), which fights with Lenis (also driving the page's
   own scroll from the same wheel event, since Lenis doesn't check
   defaultPrevented) and with the scroll-linked auto-advance below —
   the two compounded, causing the carousel to overshoot/behave
   erratically depending on cursor position. Wheel input is left alone
   here so normal page scroll (and therefore the auto-advance) is never
   hijacked; manual "drag to explore" is its own mouse-drag handler in
   ascent.js instead (touch swipe still works natively via overflow-x).
   Also deliberately no scroll-snap here (unlike .scroll-gallery) — the
   browser's snap-correction fights with GSAP forcibly setting scrollLeft
   on every scroll tick, since each looks like "the user stopped
   scrolling" to the browser and it tries to snap to the nearest card
   while JS immediately overrides it again — this produced a visible
   3-step glitch (jumping between only 3 scrollLeft values) instead of a
   smooth scrub. Snapping only makes sense for momentum-driven free
   scroll, not a continuously scroll-scrubbed carousel. */
#concept-ascent .ac-voices-grid{
  display:flex; gap:20px; overflow-x:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; cursor:grab;
  padding:0 max(24px, calc((100vw - 1600px) / 2)) 60px;
}
#concept-ascent .ac-voices-grid::-webkit-scrollbar{ display:none; }
#concept-ascent .ac-voices-grid.is-dragging{ cursor:grabbing; user-select:none; }
/* Without this, each card's hover state (a hard background swap to
   --signal) fires purely off cursor position while dragging — the
   cursor sweeps across 3-4 cards during a drag, flashing each one red
   in turn, which reads as glitching even though the scroll itself is
   smooth. pointer-events:none alone isn't reliable here: browsers can
   keep an element "hovered" until a fresh mouseout even after its
   pointer-events changes, so the hover visual is force-cancelled
   directly instead — higher specificity than the plain :hover rule
   below, so it always wins while dragging regardless of hover state. */
#concept-ascent .ac-voices-grid.is-dragging .ac-voice{ pointer-events:none; transition:none; }
#concept-ascent .ac-voices-grid.is-dragging .ac-voice:hover{ background:#221d18; color:inherit; }
#concept-ascent .ac-voices-grid.is-dragging .ac-voice:hover .ac-voice-cap{ color:var(--kraft); }
#concept-ascent .ac-voices-grid.is-dragging .ac-voice:hover .ac-voice-note{ color:var(--slate); }
#concept-ascent .ac-voice{
  background:#221d18; border:1px solid var(--line-on-dark); padding:32px 28px;
  display:flex; flex-direction:column; justify-content:space-between; min-height:230px;
  flex:0 0 380px; width:380px;
  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; }
#concept-ascent .scroll-hint{ color:var(--kraft); padding-bottom:100px; }

@media (max-width:990px){
  #concept-ascent .ac-voices-head{ padding:90px var(--pad) 0; }
  #concept-ascent .ac-voices-grid{ padding:0 20px 40px; gap:14px; }
  #concept-ascent .ac-voice{ flex-basis:86vw; width:86vw; }
  #concept-ascent .scroll-hint{ padding-bottom:60px; }
}

/* ==========================================================================
   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;}
}