/* Elevation 6 - Elevate page. Loaded after styles.css on /elevate only.
   Type scale, largest to smallest: hero title, hero line, pledge heading, the story's closing
   line, story text, step titles, body, label. */

/* Hero: the night sky with the summit ridges along its lower edge */
:root{--el-hero-h:clamp(520px,54vw,780px)}
.el-hero{position:relative;isolation:isolate;overflow:hidden;min-height:var(--el-hero-h);display:flex;align-items:flex-start}
.el-hero picture{display:contents}
.el-hero-bg{position:absolute;top:0;left:0;z-index:-2;display:block;width:100%;max-width:none;height:100%;object-fit:cover;object-position:50% 100%}
.el-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:-1;height:22%;background:linear-gradient(180deg,rgba(5,10,15,0) 0%,rgba(5,10,15,.4) 100%)}
.el-hero .wrap{padding-top:clamp(80px,9vw,132px)}
.el-title{font-size:clamp(76px,12vw,168px);line-height:.9;letter-spacing:-.02em}
.el-rule{width:96px;height:3px;margin-top:clamp(24px,3vw,36px);background:var(--e6-gradient-rule)}
.el-line{max-width:22ch;margin-top:clamp(20px,2.4vw,28px);font-size:clamp(26px,3.4vw,40px);line-height:1.15;font-weight:var(--weight-bold);letter-spacing:-.01em;color:var(--text-primary);text-wrap:balance}
.el-sub{max-width:34ch;margin-top:clamp(14px,1.6vw,20px);font-size:clamp(18px,1.8vw,22px);line-height:1.4;color:var(--e6-grey-200)}

/* Below the hero the mountain carries on to the foot of the page: the summit range's own lower
   slopes fade into shadow (seam), then three nearer ridges, each darker than the one behind it.
   Every layer is sized to the page width, so the seam meets the photo above it exactly. */
body.elevate{position:relative}
.el-backdrop{position:absolute;left:0;right:0;top:calc(var(--head-h) + var(--el-hero-h));bottom:0;z-index:0;pointer-events:none;
  background:url(/elevate-mtn-ridge-3.webp) center bottom/100% auto no-repeat,
             url(/elevate-mtn-ridge-2.webp) center 62%/100% auto no-repeat,
             url(/elevate-mtn-ridge-1.webp) center 4vw/100% auto no-repeat,
             url(/elevate-mtn-seam.webp) center top/100% auto no-repeat,
             #070B11}
/* On phones the page is long and narrow: larger, nearer ridges, and one more, so the mountain
   still fills the page rather than leaving long plain stretches. */
@media(max-width:719px){
  .el-backdrop{background:url(/elevate-mtn-ridge-3.webp) center bottom/240% auto no-repeat,
                          url(/elevate-mtn-ridge-1.webp) 30% 70%/260% auto no-repeat,
                          url(/elevate-mtn-ridge-2.webp) center 38%/230% auto no-repeat,
                          url(/elevate-mtn-ridge-1.webp) center 4vw/100% auto no-repeat,
                          url(/elevate-mtn-seam.webp) center top/100% auto no-repeat,
                          #070B11}
}

/* Sections: one rhythm for the whole page */
.el-section{padding-top:clamp(72px,9vw,120px)}

/* The story: one text size, and one closing line that carries the point */
.el-story{max-width:720px;display:flex;flex-direction:column;gap:20px}
.el-story p{font-size:clamp(19px,1.9vw,22px);line-height:1.55;color:var(--text-body)}
/* Leonard's own words open the story */
.el-quote{margin:0 0 clamp(24px,3vw,40px);padding-left:clamp(20px,2.4vw,28px);position:relative}
.el-quote::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:2px;background:linear-gradient(180deg,var(--e6-green),var(--e6-teal) 50%,var(--e6-blue))}
.el-quote blockquote{margin:0;display:flex;flex-direction:column;gap:20px}
.el-quote blockquote p{color:var(--text-primary)}
.el-quote figcaption{margin-top:20px;font-size:15px;font-weight:var(--weight-bold);letter-spacing:.02em;color:var(--accent-primary)}
.el-story .el-beat{margin-top:12px;font-size:clamp(26px,3vw,36px);line-height:1.2;font-weight:var(--weight-bold);letter-spacing:-.01em;color:var(--text-primary)}

/* The pledge: one panel, five commitments set out as a pathway */
.el-pledge{position:relative;overflow:hidden;padding:clamp(22px,5vw,64px);border:1px solid var(--border-hairline);border-radius:var(--radius-md);background:linear-gradient(170deg,#0F2433 0%,var(--surface-card) 46%,var(--surface-inset) 100%);background:linear-gradient(170deg,rgba(15,36,51,.9) 0%,rgba(13,25,40,.88) 46%,rgba(10,20,32,.9) 100%);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.el-pledge::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--e6-gradient-rule)}
.el-eyebrow{font-size:13px;font-weight:var(--weight-bold);line-height:var(--leading-body);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--accent-primary)}
.el-h2{margin-top:12px;font-size:clamp(34px,5vw,56px);line-height:1.1;letter-spacing:-.015em}
.el-h2 span{color:var(--accent-primary)}
.el-nw{white-space:nowrap}
.el-will{max-width:46ch;margin-top:20px;font-size:clamp(17px,1.7vw,20px);color:var(--text-secondary);text-wrap:balance}

.step-1{--c:#61CB7C;--c:oklch(.76 .15 150)}
.step-2{--c:#25CBB7;--c:oklch(.76 .13 182)}
.step-3{--c:#1FC1E4;--c:oklch(.75 .13 218)}
.step-4{--c:#5EA8F9;--c:oklch(.72 .14 252)}
.step-5{--c:#B989F6;--c:oklch(.72 .16 303)}
.el-path{position:relative;list-style:none;margin:clamp(32px,4vw,48px) 0 0;padding:0}
.el-step{position:relative;padding-left:48px}
/* the rail: from each node down to the next, in that step's colour */
.el-step:not(:last-child)::after{content:"";position:absolute;left:10px;top:16px;bottom:-40px;width:2px;border-radius:1px;background:linear-gradient(180deg,var(--c),color-mix(in oklab,var(--c) 55%,transparent));transform-origin:50% 0;transition:transform .45s var(--ease-out)}
.el-step+.el-step::after{top:40px}
.el-node{position:absolute;left:3px;top:8px;width:16px;height:16px;box-sizing:border-box;border:2px solid var(--c);border-radius:50%;background:var(--c);box-shadow:0 0 0 5px #0B1824,0 0 18px color-mix(in oklab,var(--c) 60%,transparent);transition:background-color .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .4s var(--ease-out)}
.el-step-body{display:grid;gap:6px;padding:4px 0 28px}
.el-step+.el-step .el-step-body{padding-top:28px;border-top:1px solid var(--border-hairline)}
.el-step+.el-step .el-node{top:32px}
.el-step:last-child .el-step-body{padding-bottom:0}
.el-step h3{font-size:clamp(19px,1.8vw,22px);line-height:1.3;letter-spacing:0;color:var(--text-primary)}
.el-step p{font-size:17px;line-height:1.6;color:var(--text-secondary)}
@media(max-width:599px){.el-step{padding-left:40px}}
@media(min-width:900px){
  .el-step-body{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);column-gap:48px;align-items:baseline}
}

/* Motion (elevate.js adds .el-motion): the rail draws down and each step lights in turn. */
.el-motion .el-path:not(.is-lit) .el-step::after{transform:scaleY(0)}
.el-motion .el-path:not(.is-lit) .el-node{background:var(--surface-inset);border-color:var(--e6-grey-700);box-shadow:0 0 0 5px #0B1824}
.el-motion .step-2 .el-node,.el-motion .step-2::after{transition-delay:.4s}
.el-motion .step-3 .el-node,.el-motion .step-3::after{transition-delay:.8s}
.el-motion .step-4 .el-node,.el-motion .step-4::after{transition-delay:1.2s}
.el-motion .step-5 .el-node{transition-delay:1.6s}
.el-motion .step-1::after{transition-delay:.05s}
@media(prefers-reduced-motion:reduce){.el-step::after,.el-node{transition:none}}

/* Get in touch */
.el-invite{max-width:52ch;margin-bottom:clamp(24px,3vw,32px);font-size:clamp(19px,1.9vw,22px);line-height:1.55;color:var(--text-body);text-wrap:pretty}
.el-cta-h{font-size:clamp(28px,3.2vw,40px);line-height:1;letter-spacing:-.01em}
.el-cta{display:inline-flex;align-items:center;gap:clamp(14px,1.6vw,20px);color:var(--text-primary)}
.el-cta:hover{color:var(--text-primary)}
.el-cta-text{padding-bottom:6px;border-bottom:3px solid var(--accent-primary);transition:var(--transition-base)}
.el-cta:hover .el-cta-text{border-color:var(--e6-green)}
.el-cta-arrow{flex:none;display:flex;align-items:center;justify-content:center;width:clamp(44px,4.4vw,56px);height:clamp(44px,4.4vw,56px);border-radius:var(--radius-sm);background:var(--accent-primary);transition:var(--transition-base)}
.el-cta:hover .el-cta-arrow{background:#1ACDCE}
.el-cta-arrow svg{display:block;width:50%;height:50%}