/* EUKLI 06 · paper-and-pencil grid + scroll-linked opening.
   Deliberately neutral: only white, graphite and EUKLI navy. */
.hero-story-track{
  position:relative;
  height:270svh;
  background:#fff;
  isolation:isolate;
}
.hero-story-track::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(21,54,87,.057) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(21,54,87,.057) 1px,transparent 1px),
    linear-gradient(to right,rgba(21,54,87,.073) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(21,54,87,.073) 1px,transparent 1px);
  background-size:28px 28px,28px 28px,140px 140px,140px 140px;
  opacity:var(--e-grid-opacity,.68);
  -webkit-mask-image:radial-gradient(ellipse 65% 45% at 65% 30%,rgba(0,0,0,.6) 0%,rgba(0,0,0,.32) 48%,transparent 100%);
  mask-image:radial-gradient(ellipse 65% 45% at 65% 30%,rgba(0,0,0,.6) 0%,rgba(0,0,0,.32) 48%,transparent 100%);
}
.hero-story-track::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(64vw,920px);height:min(60vw,770px);top:5%;left:29%;
  background:linear-gradient(90deg,transparent calc(50% - .5px),rgba(21,54,87,.105) 50%,transparent calc(50% + .5px)),
             linear-gradient(0deg,transparent calc(50% - .5px),rgba(21,54,87,.105) 50%,transparent calc(50% + .5px));
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,black 5%,transparent 72%);
  mask-image:radial-gradient(ellipse at 50% 50%,black 5%,transparent 72%);
  opacity:.6;
}
.hero-story-track .home-hero{
  position:sticky;top:76px;z-index:2;
  height:calc(100svh - 76px);min-height:0;
  display:flex;flex-direction:column;overflow:hidden;
  background:transparent;
  border-bottom:1px solid rgba(226,231,236,.6);
}
.hero-story-track .hero-grid{
  flex:1;min-height:0;height:auto;
  grid-template-columns:1.12fr .88fr;
  gap:28px;align-items:center;
}
.hero-copy-stack{position:relative;align-self:stretch;min-width:0;display:grid;align-items:center}
.hero-copy-stack>.hero-text{grid-area:1/1;align-self:center;padding:0;z-index:1;will-change:opacity,transform;opacity:var(--e-phase-0,1);transform:translate3d(0,var(--e-y-0,0px),0);animation:none!important;}
.hero-story-slide{
  grid-area:1/1;align-self:center;
  display:flex;flex-direction:column;align-items:flex-start;
  position:absolute;inset:0;justify-content:center;
  opacity:var(--e-phase-1,0);
  transform:translate3d(0,var(--e-y-1,22px),0);
  pointer-events:none;
  z-index:2;
}
.hero-story-slide[data-story-step="2"]{opacity:var(--e-phase-2,0);transform:translate3d(0,var(--e-y-2,22px),0)}
.hero-story-slide .eyebrow{margin:0 0 27px;color:#657789;font-weight:800;font-size:11px;letter-spacing:.12em}
.hero-story-slide h2{font-size:clamp(51px,5.5vw,82px);font-weight:850;line-height:1.16;letter-spacing:-.087em;margin:0 0 24px;max-width:640px}
.hero-story-slide h2 em{font-style:normal;color:#345f8a}
.hero-story-slide p{font-size:clamp(14px,1.3vw,17px);line-height:1.85;color:#546677;max-width:460px;margin:0 0 34px}
.hero-story-slide .arrow-link{font-weight:750}
.hero-story-slide:focus-within{pointer-events:auto}
.hero-story-track .hero-demo{align-self:center;height:min(69svh,620px);width:100%;max-width:580px;margin:0;overflow:hidden;animation:none!important;will-change:auto}
.hero-story-track .hero-demo::after{opacity:.4}
.hero-story-track .hero-phone-front,
.hero-story-track .hero-phone-back,
.hero-story-track .hero-demo:hover .hero-phone-front,
.hero-story-track .hero-demo:hover .hero-phone-back{
  transition:none!important;
  filter:none;
  will-change:transform,opacity;
}
.hero-story-track .hero-phone-front,
.hero-story-track .hero-demo:hover .hero-phone-front{
 transform:translate3d(var(--e-front-x,0px),var(--e-front-y,0px),0) rotate(var(--e-front-rot,-8deg)) scale(var(--e-front-scale,.86));
 opacity:var(--e-front-alpha,1);
}
.hero-story-track .hero-phone-back,
.hero-story-track .hero-demo:hover .hero-phone-back{
 transform:translate3d(var(--e-back-x,0px),var(--e-back-y,0px),0) rotate(var(--e-back-rot,9deg)) scale(var(--e-back-scale,.76));
 opacity:var(--e-back-alpha,1);
}
.hero-story-track .hero-caption{
  min-height:62px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:12px 0 14px;color:#82909c;font-weight:750;gap:15px;
}
.hero-story-track .hero-caption>span:last-of-type{justify-self:end}
.hero-story-progress{display:flex;align-items:center;gap:13px;color:#1b3b60;font:750 11px/1 Arial,sans-serif;letter-spacing:.1em}
.hero-story-progress>span{font-variant-numeric:tabular-nums}
.hero-story-progress>span:last-child{color:#a2acb7}
.hero-story-progress-bars{display:flex;align-items:center;gap:5px}
.hero-story-progress-bars i{display:block;width:30px;height:3px;background:#dce3e8;position:relative;overflow:hidden;border-radius:2px}
.hero-story-progress-bars i::after{content:"";position:absolute;inset:0;background:#244d76;transform:scaleX(var(--e-bar-fill,0));transform-origin:left}
.home-intro{position:relative;isolation:isolate}
.home-intro::before{
 content:"";pointer-events:none;position:absolute;z-index:-1;
 inset:20px -4vw 10px;
 background-image:linear-gradient(rgba(25,58,88,.048) 1px,transparent 1px),linear-gradient(90deg,rgba(25,58,88,.048) 1px,transparent 1px);
 background-size:28px 28px;
 opacity:.7;
 -webkit-mask-image:radial-gradient(ellipse 74% 78% at 58% 50%,rgba(0,0,0,.44),transparent 92%);
 mask-image:radial-gradient(ellipse 74% 78% at 58% 50%,rgba(0,0,0,.44),transparent 92%);
}
.home-products .product-row-visual::before{
 content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
 background-image:linear-gradient(rgba(25,58,88,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(25,58,88,.045) 1px,transparent 1px);
 background-size:30px 30px;
 -webkit-mask-image:radial-gradient(ellipse at center,rgba(0,0,0,.5),transparent 76%);
 mask-image:radial-gradient(ellipse at center,rgba(0,0,0,.5),transparent 76%);
}
.hero-story-track .hero-cta-arrow{background:#fff}
@media(min-width:761px) and (max-width:1100px){
 .hero-story-track .hero-grid{grid-template-columns:1.1fr .9fr;gap:8px}
 .hero-story-track .hero-text h1{font-size:clamp(44px,5.1vw,64px)}
 .hero-story-slide h2{font-size:clamp(44px,5.1vw,65px)}
 .hero-story-track .hero-demo{height:min(62svh,555px)}
 .hero-story-track .hero-phone-front{left:-13%;top:22px}
 .hero-story-track .hero-phone-back{right:-19%;top:80px}
}
@media(max-width:760px){
 .hero-story-track{height:242svh}
 .hero-story-track::before{background-size:26px 26px,26px 26px,130px 130px,130px 130px;-webkit-mask-image:radial-gradient(ellipse 90% 37% at 55% 21%,rgba(0,0,0,.5),transparent 97%);mask-image:radial-gradient(ellipse 90% 37% at 55% 21%,rgba(0,0,0,.5),transparent 97%)}
 .hero-story-track::after{left:10%;width:90vw;height:85vw;top:12%;opacity:.35}
 .hero-story-track .home-hero{top:68px;height:calc(100svh - 68px)}
 .hero-story-track .hero-grid{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(225px,.95fr) minmax(180px,1.05fr);gap:0;min-height:0;align-items:stretch;overflow:hidden}
 .hero-copy-stack{align-self:stretch;min-height:0;align-items:center}
 .hero-copy-stack>.hero-text{padding:0;align-self:center}
 .hero-story-track .hero-text h1{font-size:clamp(36px,9.1vw,56px);line-height:1.22;margin:15px 0}
 .hero-story-track .hero-text .eyebrow{margin-bottom:15px;font-size:9px}
 .hero-story-track .hero-sub{font-size:clamp(11px,3.1vw,14px);line-height:1.65;margin-bottom:18px}
 .hero-story-track .arrow-link{font-size:12px;padding-bottom:7px;gap:17px}
 .hero-story-slide h2{font-size:clamp(35px,9vw,55px);line-height:1.22;margin-bottom:14px}
 .hero-story-slide .eyebrow{font-size:9px;margin-bottom:15px}
 .hero-story-slide p{font-size:clamp(11px,3.2vw,14px);line-height:1.65;margin-bottom:18px}
 .hero-story-track .hero-demo{width:100%;height:100%;min-height:0;max-height:none;align-self:stretch;margin:0;overflow:hidden}
 .hero-story-track .hero-demo::before{height:85%;left:9%;right:9%}
 .hero-story-track .hero-demo::after{font-size:clamp(65px,22vw,95px);bottom:7%}
 .hero-story-track .hero-phone-front{left:5%;top:5%;transform-origin:top left}
 .hero-story-track .hero-phone-back{right:1%;top:16%;transform-origin:top right}
 .hero-story-track .hero-caption{min-height:35px;padding:4px 0 6px;grid-template-columns:auto 1fr;gap:10px}
 .hero-story-track .hero-caption>span:first-child{display:none}
 .hero-story-track .hero-caption>span:last-of-type{font-size:8px;justify-self:end}
 .hero-story-progress{gap:6px;font-size:9px}
 .hero-story-progress-bars i{width:21px;height:2px}
 .hero-story-track{--e-front-scale:.59;--e-back-scale:.53}
}
@media(max-height:680px){
 .hero-story-track .hero-grid{gap:0}
 .hero-story-track .hero-caption{min-height:32px}
}
@media(max-width:390px){
 .hero-story-track .hero-grid{grid-template-rows:minmax(222px,.98fr) minmax(155px,1.02fr)}
 .hero-story-track .hero-text h1{font-size:clamp(34px,9vw,43px)}
 .hero-story-slide h2{font-size:clamp(33px,8.65vw,44px)}
 .hero-story-track .hero-phone-front{left:0%;top:0}
 .hero-story-track .hero-phone-back{right:-4%;top:12%}
}
@media(prefers-reduced-motion:reduce){
 .hero-story-track{height:auto!important}
 .hero-story-track .home-hero{position:relative!important;top:auto!important;height:auto!important;min-height:680px}
 .hero-story-track .hero-grid{min-height:610px}
 .hero-story-slide{display:none!important}
 .hero-copy-stack>.hero-text{opacity:1!important;transform:none!important}
 .hero-story-track .hero-phone-front{opacity:1!important;transform:rotate(-8deg) scale(.86)!important}
 .hero-story-track .hero-phone-back{opacity:1!important;transform:rotate(9deg) scale(.76)!important}
 .hero-story-progress{display:none}
}

/* The original reveal utility must never override sticky-scene opacity. */
:root.motion-v5-ready .hero-story-track .hero-copy-stack > .hero-text,
:root.js-ready .hero-story-track .hero-copy-stack > .hero-text{
 opacity:var(--e-phase-0,1)!important;
 transform:translate3d(0,var(--e-y-0,0px),0)!important;
 transition:none!important;
 animation:none!important;
}
@media(prefers-reduced-motion:reduce){
 :root.motion-v5-ready .hero-story-track .hero-copy-stack > .hero-text,
 :root.js-ready .hero-story-track .hero-copy-stack > .hero-text{
  opacity:1!important;transform:none!important
 }
}