/* ═══ WORK · SECTION 1 — HERO ═══ */
.w-hero{position:relative;overflow:hidden;
  min-height:clamp(380px,64svh,640px);display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--nav-h) + clamp(40px,7vh,80px)) var(--gut) clamp(34px,6vh,60px)}
.w-hero .cut{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;
  will-change:transform}
.w-hero .cut line{stroke:var(--cut);stroke-width:2.6;fill:none;
  stroke-dasharray:2600;stroke-dashoffset:2600;
  animation:draw 1.25s cubic-bezier(.65,0,.35,1) .25s forwards}
/* JS drifts the hero content slower than the page, and the cut faster */
.w-hero-inner{position:relative;z-index:2;will-change:transform}
.w-hero .eyebrow{margin-bottom:clamp(20px,3.5vh,38px);opacity:0;animation:fade .8s ease .1s forwards}
.w-hero h1{font-size:clamp(2.4rem,8.4vw,8rem);line-height:.88}
.w-hero h1 .row{display:block;overflow:hidden}
.w-hero h1 .row > span{display:block;transform:translateY(104%);
  animation:rise .95s cubic-bezier(.16,1,.3,1) forwards}
.w-hero h1 .row:nth-child(1) > span{animation-delay:.05s}
.w-hero h1 .row:nth-child(2) > span{animation-delay:.13s}
.w-hero h1 .dot{color:var(--cut)}
.w-hero .sub{margin-top:clamp(22px,3.6vh,38px);max-width:48ch;
  font-size:clamp(.95rem,1.14vw,1.14rem);line-height:1.6;color:var(--muted);
  opacity:0;animation:fade .85s ease .56s forwards}

@media(prefers-reduced-motion:reduce){
  .w-hero h1 .row > span{transform:none}
  .w-hero .eyebrow,.w-hero .sub{opacity:1;transform:none}
  .w-hero-inner,.w-hero .cut{transform:none!important}
  .w-hero .cut line{stroke-dashoffset:0}
}