/* ============================================================
   HOME HERO — "The Ascent"

   A staircase: the brand name as a picture. Six ascending blocks,
   each a step lighter than the one below it. The projection is a true isometric one, computed rather
   than eyeballed: X = (y - x)*cos30, Y = (x + y)*sin30 - z, with the
   steps painted back to front so they occlude each other correctly.

   The animation is one transform and one opacity per step on a stagger.
   No canvas, no WebGL, no rAF, no scroll pin, and every animated
   property is compositor-owned, so it stays smooth under load.
   ============================================================ */

.hx{position:relative;min-height:100vh;display:flex;align-items:center;
  background:var(--ivory);overflow:hidden;
  padding:calc(var(--nav-h) + clamp(56px,9vh,104px)) 0 clamp(64px,10vh,120px)}

/* ---- the staircase ----
   Flat elevation, not isometric. The 3D build read as a solid wedge from
   most angles and its bounding box fought the section edges. Six plain
   rectangles ascending left to right, each a step lighter than the last,
   with a pale cap on every tread so the treads separate.

   preserveAspectRatio is xMidYMax so the flight always sits on the
   bottom of its box, and the viewBox carries 16 units of padding on
   every side, so no step can ever be clipped at any aspect ratio. */
.hx-art{position:absolute;right:0;bottom:0;width:min(56%,860px);
  height:min(78%,560px);z-index:0;pointer-events:none}
/* overflow:visible so the 30px dip each step starts from is not clipped by
   the viewBox edge while the entrance is playing. At rest the content fits
   the viewBox exactly. */
.hx-art svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}

.s2-riser{transition:fill .4s var(--ease)}
.s2-tread{fill:rgba(255,255,255,.75)}

.s2-step{opacity:0;transform:translateY(30px);
  animation:s2Rise .8s cubic-bezier(.22,.61,.36,1) var(--d,0s) forwards}
@keyframes s2Rise{to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .s2-step{animation:none;opacity:1;transform:none}
}

/* a soft wash so the type side stays clean */
.hx::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--ivory) 0%,var(--ivory) 30%,rgba(250,248,243,.62) 48%,rgba(250,248,243,0) 72%)}

.hx .wrap{position:relative;z-index:2;width:100%}

/* ---- the copy ----
   Entrance is CSS rather than the site-wide .rv ScrollTrigger batch: the
   hero is above the fold on every device, so waiting on a scroll observer
   only risks a flash of empty page. */
.hx-in{opacity:0;transform:translateY(18px);
  animation:hxRise .9s cubic-bezier(.22,.61,.36,1) forwards}
.hx-in.d1{animation-delay:.16s}
.hx-in.d2{animation-delay:.32s}
.hx-in.d3{animation-delay:.48s}
@keyframes hxRise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hx-in{animation:none;opacity:1;transform:none}}

.hx h1{font-family:var(--serif);font-weight:800;font-size:clamp(38px,6.2vw,98px);
  letter-spacing:-.038em;line-height:.98;color:var(--ink);max-width:14ch}
.hx h1 em{font-style:normal;color:var(--teal-deep)}

.hx-lead{font-size:clamp(16px,1.28vw,20px);font-weight:400;line-height:1.7;
  color:var(--ink-soft);max-width:50ch;margin-top:clamp(22px,3vh,32px)}

/* the three numbers that carry the credibility */
.hx-figs{display:flex;flex-wrap:wrap;gap:clamp(26px,4.4vw,60px);margin-top:clamp(34px,5vh,54px)}
.hx-fig{position:relative;padding-left:20px}
.hx-fig::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--teal),rgba(14,156,147,0))}
.hx-fig b{display:block;font-family:var(--serif);font-weight:800;
  font-size:clamp(30px,3.6vw,52px);letter-spacing:-.035em;line-height:1;color:var(--ink)}
.hx-fig b i{font-style:normal;color:var(--amber-deep)}
.hx-fig span{display:block;font-family:var(--disp);font-size:clamp(10px,.82vw,12px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mut);
  margin-top:10px;max-width:20ch;line-height:1.5}

.hx-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(34px,5vh,52px)}
.hx-ghost{background:transparent;color:var(--ink);border:1px solid var(--line);
  text-decoration:none;
  transition:border-color .4s var(--ease),background .4s var(--ease),color .4s}
.hx-ghost:hover{border-color:var(--teal);color:var(--teal-deep);background:rgba(14,156,147,.06)}
.hx-ghost:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* scroll cue */
.hx-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--disp);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-mut);opacity:0;animation:s3Fade .8s ease 1.6s forwards}
.hx-cue svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;animation:hxNudge 2.4s ease-in-out infinite}
@keyframes hxNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){
  .hx-cue{animation:none;opacity:1}.hx-cue svg{animation:none}
}

/* ---- narrow ----
   Below 950px the staircase would sit behind the numbers, so it drops to
   a band under the copy instead of a panel beside it. */
@media(max-width:950px){
  .hx{min-height:0;padding:calc(var(--nav-h) + 62px) 0 0;display:block}
  .hx-art{position:relative;right:auto;bottom:auto;width:100%;
    height:clamp(200px,38vw,300px);margin-top:34px}
  .hx::after{background:radial-gradient(80% 40% at 50% 88%,rgba(14,156,147,.1),transparent 72%)}
  .hx h1{max-width:none}
  .hx-lead{max-width:none}
  .hx-figs{gap:22px 30px}
  .hx-cue{display:none}
}
@media(max-width:560px){
  .hx-fig{padding-left:14px}
  .hx-figs{gap:20px 26px}
  .hx-fig span{max-width:16ch}
}