/* ============================ hero ============================ */
.hx{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:130px var(--gut) 70px;position:relative}
.hx-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hx-bg img{width:100%;height:100%;object-fit:cover;object-position:center 32%;filter:contrast(1.06);opacity:.55}
.hx-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.72) 26%,rgba(255,255,255,.5) 100%)}
.hx .hx-meta{position:absolute;top:110px;left:var(--gut);right:var(--gut);display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;z-index:2}
.hx h1{font-family:var(--f-disp);font-weight:370;letter-spacing:-.025em;line-height:.9;font-size:clamp(2.5rem,8.4vw,5.6rem);text-wrap:balance;position:relative;z-index:2}
.hx h1 .ln{display:block}
.hx h1 .ln.ind{padding-left:clamp(40px,12vw,220px)}
/* the three lead words sit a notch smaller than the big "performance" payoff */
.hx h1.hx-lead{font-size:clamp(2rem,5.8vw,4rem);line-height:.9;margin-top:clamp(-36px,-1vh,-18px)}
body.lang-ne .hx h1.hx-lead{font-size:clamp(1.8rem,5.2vw,3.6rem)}   /* NE 10% smaller */
/* desktop: the hero column is vertically centered, so a margin on the lead is
   half-absorbed and barely moves it. Pull the whole headline (lead + big word)
   up with a post-layout transform instead — the absolute .hx-meta stays put. */
@media(min-width:841px){
  .hx h1.hx-lead{margin-top:0}
  .hx h1{transform:translateY(clamp(-96px,-9vh,-48px))}
}
.hx .big-word{position:relative;display:inline-block;font-style:italic;font-weight:370}
.hx .big-word.hx-ind{margin-left:clamp(40px,12vw,220px)}
.hx .big-word .out{color:transparent;-webkit-text-stroke:1.5px var(--ink2)}
.hx .big-word .fill{position:absolute;inset:0;color:var(--tr);-webkit-text-stroke:0;clip-path:inset(0 100% 0 0)}
.hx .hx-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:clamp(40px,7vh,80px);flex-wrap:wrap;position:relative;z-index:2}
.hx .hx-sub{max-width:36ch;font-size:clamp(.95rem,1.25vw,1.12rem);color:var(--gr);line-height:1.65}
.hx .hx-sub b{color:var(--ink2);font-weight:500}
.hx .hx-dev{font-family:var(--f-dev);font-size:clamp(1rem,1.6vw,1.35rem);color:var(--ink2);max-width:30ch;line-height:1.7}
body.lang-ne .hx h1{line-height:1.12;font-size:clamp(2.25rem,7.56vw,5.04rem);letter-spacing:0}   /* NE 10% smaller than EN */
/* hero title spacing: the .sl-mask breathing-room margins (base.css) are
   net-zero between lines, but leak at the title's outer edges — pulling the
   whole title up under the coordinate meta and squeezing the last split line
   against the italic brand word (so word2→word3 sits tighter than word1→word2).
   Zero them only here: the top padding now drops the title clear of the meta,
   the bottom padding restores an even gap to the brand word. */
.hx h1 .sl-mask:first-child{margin-top:0}
.hx h1 .sl-mask:last-child{margin-bottom:0}
.hx .hx-scroll{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2}
.hx .hx-scroll .bar{display:block;width:1px;height:44px;background:var(--gr2);margin:10px auto 0;position:relative;overflow:hidden}
.hx .hx-scroll .bar::after{content:"";position:absolute;inset:0;background:var(--tr);animation:drip 1.9s var(--ease) infinite}
@keyframes drip{0%{transform:translateY(-100%)}55%{transform:translateY(0)}100%{transform:translateY(100%)}}
.no-motion .hx-scroll .bar::after{animation:none}
.hx .hx-meta .lbl:last-child .tr-en,.hx .hx-meta .lbl:last-child .tr-ne{color:var(--gr)}

/* ---- identity mark: the Treta logo, plain ---- */
.hx-visual{position:absolute;z-index:1;top:clamp(160px,17vh,180px);right:var(--gut);
  width:clamp(300px,33vw,560px)}
.hx-visual .hv-in{overflow:hidden}
.hx-visual img{width:100%;height:auto;will-change:transform}
@media(max-width:1080px){.hx-visual{width:clamp(280px,30vw,420px);top:clamp(150px,15vh,170px)}}
@media(max-width:840px){
  .hx{padding-top:150px;text-align:center;align-items:center}
  .hx h1{width:100%}
  .hx h1 .ln.ind{padding-left:0}
  .hx .big-word.hx-ind{margin-left:0}
  .hx-visual{position:static;width:min(400px,84%);margin:clamp(28px,5vh,44px) auto 6px;order:0}
  .hx .hx-foot{flex-direction:column;align-items:center;justify-content:center;text-align:center}
  .hx .hx-sub,.hx .hx-dev{margin-left:auto;margin-right:auto}
}
@media(max-width:520px){
  .hx .hx-meta{top:88px}
}