/* Cloud — "Altitude" (ice-blue, airy) */

/* Altimeter */
.altimeter{ position:fixed; right:12px; top:50%; transform:translateY(-50%); z-index:140; height:46vh; width:34px; pointer-events:none; mix-blend-mode:difference; color:#fff; }
.alt-scale{ position:absolute; right:0; top:0; bottom:0; width:10px; background:repeating-linear-gradient(to bottom,rgba(255,255,255,.55) 0 1px,transparent 1px 12px); -webkit-mask:linear-gradient(transparent,#000 20%,#000 80%,transparent); mask:linear-gradient(transparent,#000 20%,#000 80%,transparent); }
.alt-scale::after{ content:""; position:absolute; right:0; top:50%; width:18px; height:1px; background:#fff; }
.alt-read{ position:absolute; right:16px; top:calc(50% + 14px); writing-mode:vertical-rl; font-size:.66rem; line-height:1.3; white-space:nowrap; letter-spacing:.08em; }
.alt-read b{ font-weight:500; font-variant-numeric:tabular-nums; margin-bottom:6px; }
.alt-read span{ opacity:.6; }
@media (max-width:900px){ .altimeter{ display:none; } }

/* Hero */
.cl-hero{ position:relative; height:100svh; min-height:680px; overflow:hidden; }
.cl-layer{ position:absolute; inset:-6% 0 -6% 0; }
.cl-layer img{ width:100%; height:100%; object-fit:cover; object-position:50% 60%; }
.cl-layer.back::after{ opacity:.65; }
.cl-layer.front{ z-index:3; pointer-events:none; -webkit-mask-image:linear-gradient(180deg,transparent 52%,#000 74%); mask-image:linear-gradient(180deg,transparent 52%,#000 74%); }
.cl-layer.front img{ filter:saturate(.9) brightness(1.02); }
.cl-layer.front::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(5,5,9,.85)); }
.cl-hero-copy{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center; padding-top:var(--nav-h); }
.cl-hero-copy .crumbs{ position:absolute; top:calc(var(--nav-h) + 20px); padding:8px 14px; border-radius:999px; background:rgba(5,5,9,.42); color:var(--fog); max-width:calc(100% - 2 * var(--gutter)); }
.cl-title .serif{ color:#fff; text-shadow:0 0 40px rgba(169,217,255,.6); }
.cl-title{ font-size:clamp(2.8rem,min(10vw,17svh),11.5rem); text-align:center; text-shadow:0 20px 60px rgba(5,5,9,.25); margin-top:-6vh; }
.cl-title > span{ display:block; }
.cl-title > span:last-child{ font-size:.62em; margin-top:.12em; }
.cl-hero-foot{ position:absolute; left:0; right:0; bottom:44px; z-index:4; display:grid; grid-template-columns:1.2fr auto; gap:30px; align-items:end; }
.cl-hero-foot .lead{ color:var(--bone-2); max-width:52ch; }
.cl-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.cl-chips{ grid-column:1/-1; display:flex; gap:22px; flex-wrap:wrap; font-size:.68rem; color:var(--fog); border-top:1px solid var(--line-2); padding-top:18px; }
.cl-chips li::before{ content:"◇ "; color:var(--accent-2); }
@media (max-width:900px){
  .cl-hero-foot{ grid-template-columns:1fr; bottom:24px; }
  .cl-title{ margin-top:-24vh; }
}

/* Sequence */
.cl-seq-stage{ position:relative; height:100vh; overflow:hidden; display:flex; align-items:center; }
.cl-seq-img{ position:absolute; inset:0; }
.cl-seq-img img{ width:100%; height:130%; object-fit:cover; object-position:50% 30%; }
.cl-seq-img.grade::before{ background:linear-gradient(180deg,var(--ink-0),rgba(5,5,9,.2) 30%,rgba(5,5,9,.45)); }
.cl-seq-lines{ position:relative; z-index:3; width:100%; font-size:clamp(2.4rem,min(8vw,14svh),8.6rem); }
.cs-l{ padding:0 var(--gutter); font-size:inherit; text-align:center; text-wrap:balance; }
.cs-l .serif{ color:var(--accent-2); }
.cl-seq-meter{ position:absolute; z-index:3; left:50%; bottom:46px; transform:translateX(-50%); display:flex; gap:14px; align-items:center; font-size:.68rem; color:var(--bone); }
.csm-bar{ width:160px; height:1px; background:rgba(255,255,255,.3); position:relative; }
.csm-bar i{ position:absolute; inset:0; background:#fff; transform:scaleX(0); transform-origin:left; }

/* Deliver (light) */
.cl-deliver{ background:linear-gradient(180deg,#f3f1ec,#e8eef7); }
.cl-grid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-2); }
.cl-item{ position:relative; padding:44px 34px 50px; border-bottom:1px solid var(--line-2); display:flex; flex-direction:column; gap:14px; transition:background .6s; }
.cl-item:not(:nth-child(3n)){ border-right:1px solid var(--line-2); }
.cl-item:hover{ background:rgba(255,255,255,.7); }
.cl-item .mono{ position:absolute; top:44px; right:34px; font-size:.7rem; color:#8c8aa3; }
.cl-ico{ width:52px; height:52px; color:#3b7fd0; margin-bottom:30px; }
.cl-ico *{ stroke-dasharray:200; stroke-dashoffset:200; transition:stroke-dashoffset 2s var(--ease); }
.cl-item.drawn .cl-ico *{ stroke-dashoffset:0; }
.cl-item p{ color:#4c4a62; }
@media (max-width:980px){ .cl-grid{ grid-template-columns:1fr 1fr; } .cl-item:nth-child(n){ border-right:0; } .cl-item:nth-child(odd){ border-right:1px solid var(--line-2); } }
@media (max-width:620px){ .cl-grid{ grid-template-columns:1fr; } .cl-item:nth-child(odd){ border-right:0; } }

/* Waves */
.cl-waves-stage{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; gap:clamp(22px,5vh,60px); padding:calc(var(--nav-h) + 6px) 0 clamp(28px,6vh,80px); overflow:hidden;
  background:radial-gradient(70% 60% at 50% 100%,rgba(74,163,234,.18),transparent 70%); }
.cl-waves-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; }
.cl-waves-head .h2{ margin-top:22px; max-width:14ch; }
.wave-track{ position:relative; display:flex; gap:0; font-size:.66rem; color:var(--dim); border:1px solid var(--line-2); border-radius:999px; overflow:hidden; flex-shrink:0; }
.wave-track span{ position:relative; z-index:1; padding:10px 18px; transition:color .4s; }
.wave-track span.on{ color:var(--ink-0); }
.wave-fill{ position:absolute; left:0; top:0; bottom:0; width:100%; background:linear-gradient(90deg,#cfe9ff,#a9d9ff); transform-origin:left; transform:scaleX(0); }
.cl-wave-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.wave{ position:relative; padding:clamp(20px,3.5vh,34px) 28px clamp(64px,9vh,90px); border-radius:24px; background:rgba(15,14,34,.8); border:1px solid var(--line); overflow:hidden; min-height:min(360px,46vh); display:flex; flex-direction:column; gap:12px; }
.wave .mono{ font-size:.66rem; color:var(--accent-2); }
.wave p{ color:var(--fog); }
.wave-n{ font-family:var(--f-display); font-size:clamp(3rem,9vh,5rem); line-height:.9; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1px var(--line-2); margin-bottom:auto; padding-bottom:clamp(10px,3vh,30px); }
.wave-line{ position:absolute; left:0; right:0; bottom:22px; width:100%; height:40px; }
.wave-line path{ fill:none; stroke:var(--accent); stroke-width:1.5; vector-effect:non-scaling-stroke; }
@media (max-width:980px){ .cl-wave-row{ grid-template-columns:1fr 1fr; } .cl-waves-head{ flex-direction:column; align-items:flex-start; } }
@media (max-width:620px){ .cl-wave-row{ grid-template-columns:1fr; } .wave-track{ display:none; } }

/* Outcomes */
.cl-out{ position:relative; padding:clamp(140px,16vw,240px) 0; overflow:hidden; }
.cl-out-bg{ position:absolute; inset:0; border-radius:0; }
.cl-out-bg.grade::before{ background:linear-gradient(180deg,var(--ink-0),rgba(5,5,9,.45) 25%,rgba(5,5,9,.55) 75%,var(--ink-0)); }
.cl-out-inner{ position:relative; z-index:3; }
.glass-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.glass{ padding:30px; border-radius:22px; background:rgba(12,11,28,.45); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); min-height:190px; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; transition:translate .7s var(--ease), background .5s; }
.glass:hover{ translate:0 -8px; background:rgba(12,11,28,.6); }
.glass p{ color:var(--bone-2); opacity:.8; }
@media (max-width:900px){ .glass-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .glass-grid{ grid-template-columns:1fr; } }

/* Phones: hero flows top-to-bottom so the headline and copy can never collide */
@media (max-width:900px){
  .cl-hero{ height:auto; min-height:100svh; display:flex; flex-direction:column; }
  .cl-hero-copy{ height:auto; justify-content:flex-start; padding-top:calc(var(--nav-h) + 72px); }
  .cl-title{ margin-top:6vh; }
  .cl-hero-foot{ position:relative; bottom:auto; margin-top:auto; padding-top:40px; padding-bottom:28px; }
}