/* ==================================================================
   AMPROTEQ · fx.css
   Loaded after site.css. Vertical rhythm, scroll furniture and the
   finishing pass on every component.
================================================================== */
:root{
  --s1:8px; --s2:16px; --s3:26px; --s4:44px; --s5:72px; --s6:120px;
  --rail:clamp(0px,3.4vw,60px);
  --ring:rgba(150,190,255,.13);
  --glass:rgba(8,12,20,.72);
}

/* ---------- page-wide grain: kills the flat-vector look --------------- */
body::after{
  content:''; position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.028; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- rhythm ---------------------------------------------------- */
.sec{padding:clamp(96px,11.5vw,196px) 0}
.sec-s{padding:clamp(64px,7.5vw,124px) 0}
.sec+.sec{padding-top:0}
.sec.tight{padding-top:clamp(52px,6vw,92px)}
.mt-s{margin-top:var(--s2)} .mt-m{margin-top:var(--s3)}
.mt-l{margin-top:var(--s4)} .mt-xl{margin-top:var(--s5)}
.sechead{margin-bottom:clamp(38px,4.4vw,68px); align-items:flex-end}
.two{gap:clamp(38px,6vw,96px)}

/* section rule: a hairline that fades out from the left */
.sec>.wrap>.eyebrow:first-child::after,
.sechead .eyebrow::after{content:none}
.rule{height:1px; border:0; margin:0;
  background:linear-gradient(90deg,var(--line2),rgba(150,190,255,.03) 62%,transparent)}

/* ---------- headline mask reveal -------------------------------------- */
.js .sr{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em; margin-bottom:-.06em}
.js .sr>i{display:inline-block; font-style:inherit; transform:translateY(112%); will-change:transform}
.js .sr.on>i{transform:none; transition:transform 1.05s cubic-bezier(.16,1,.3,1) var(--d,0s)}

/* ---------- chapter rail ---------------------------------------------- */
#rail{
  position:fixed; left:max(14px,1.5vw); top:50%; transform:translateY(-50%);
  z-index:60; display:none; flex-direction:column; gap:2px;
  padding:10px 0; pointer-events:auto;
  opacity:0; visibility:hidden; transition:opacity .5s var(--e), visibility .5s;
}
/* the rail would sit on top of the hero copy, so it only appears once the
   hero is behind you */
body.past-hero #rail{opacity:1; visibility:visible}
@media(min-width:1280px){ #rail{display:flex} }
#rail a{
  display:flex; align-items:center; gap:11px; padding:6px 0;
  font-family:var(--fm); font-size:9.5px; letter-spacing:.19em; text-transform:uppercase;
  color:var(--faint); transition:color .35s var(--e);
}
#rail a i{
  width:16px; height:1px; background:currentColor; flex:none;
  transition:width .45s var(--e), background .35s var(--e);
}
#rail a s{
  text-decoration:none; opacity:0; transform:translateX(-6px);
  transition:opacity .4s var(--e), transform .4s var(--e); white-space:nowrap;
}
#rail:hover a s{opacity:1; transform:none}
#rail a.on{color:var(--cyan)}
#rail a.on i{width:30px; background:var(--grad-r)}
#rail a.on s{opacity:1; transform:none}
#rail a:hover{color:var(--ink2)}

/* ---------- custom cursor --------------------------------------------- */
#cur,#curd{position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%;
  opacity:0; transition:opacity .35s var(--e)}
#cur{width:34px; height:34px; margin:-17px 0 0 -17px; border:1px solid rgba(150,190,255,.30);
  transition:opacity .35s var(--e), width .3s var(--e), height .3s var(--e),
             margin .3s var(--e), border-color .3s var(--e), background .3s var(--e)}
#curd{display:none}
body.cur-on #cur,body.cur-on #curd{opacity:1}
body.cur-lg #cur{width:60px; height:60px; margin:-30px 0 0 -30px;
  border-color:rgba(60,204,252,.55); background:rgba(60,204,252,.07)}
body.cur-lg #curd{opacity:0}
@media(hover:none),(max-width:1024px){ #cur,#curd{display:none} }

/* ---------- section watermark numeral --------------------------------- */
.wm{
  position:absolute; right:calc(var(--gut) * .35); top:clamp(10px,2vw,34px);
  z-index:0; pointer-events:none;
  font-family:var(--fd); font-weight:500; font-size:clamp(160px,26vw,420px); line-height:.78;
  letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1px rgba(150,190,255,.07);
  will-change:transform;
}
.sec{overflow:clip}
.sec>.wrap{position:relative; z-index:2}

/* ---------- media reveal ---------------------------------------------- */
.js .mrev{clip-path:inset(0 0 100% 0); will-change:clip-path}
.js .mrev.on{clip-path:inset(0 0 0% 0); transition:clip-path 1.25s cubic-bezier(.16,1,.3,1)}

/* ---------- scroll art ------------------------------------------------ */
.art{position:relative; display:flex; align-items:center; justify-content:center}
.art img,.art>svg{width:100%; height:auto; will-change:transform; display:block}
.art::before{
  content:''; position:absolute; left:50%; top:52%; width:78%; aspect-ratio:1.7/1;
  transform:translate(-50%,-50%); z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(60,204,252,.15),rgba(24,152,252,.05) 42%,transparent 70%);
  filter:blur(26px);
}

/* ---------- component finishing --------------------------------------- */
#nav{backdrop-filter:blur(14px) saturate(130%); -webkit-backdrop-filter:blur(14px) saturate(130%)}
#nav.stuck{background:var(--glass); border-bottom:1px solid var(--ring)}

.card{border-radius:14px; transition:transform .55s var(--e), border-color .4s var(--e), box-shadow .55s var(--e)}
.card:hover{transform:translateY(-5px)}
.panel{border-radius:14px}

.btn{position:relative; overflow:hidden; will-change:transform}
.btn-p::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.32) 50%,transparent 66%);
  transform:translateX(-130%); transition:transform .85s var(--e);
}
.btn-p:hover::after{transform:translateX(130%)}
.btn>*{position:relative; z-index:1}

/* stat strip reads as an instrument cluster */
.strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.strip-c b{font-variant-numeric:tabular-nums}

/* tables: rows arrive in sequence */
.js tbody tr.tr{opacity:0; transform:translateY(14px)}
.js tbody tr.tr.on{opacity:1; transform:none;
  transition:opacity .7s var(--e) var(--d,0s), transform .7s var(--e) var(--d,0s)}

/* ---------- spacing repairs ------------------------------------------- */
.stmt{padding:clamp(104px,13vw,210px) 0}
.stmt .big{max-width:20ch}
.ppl,.g3,.g2,.g4{gap:clamp(18px,2vw,28px)}
.marq{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

@media(max-width:820px){
  .sec{padding:clamp(66px,15vw,96px) 0}
  .sec+.sec{padding-top:0}
  .stmt{padding:clamp(70px,17vw,110px) 0}
  .sechead{margin-bottom:30px}
  .wm{font-size:clamp(96px,34vw,190px); right:-4px}
  .two{gap:34px}
  #rail{display:none}
}

/* ---------- page transition ------------------------------------------- */
#veil{position:fixed; inset:0; z-index:9990; background:var(--bg); pointer-events:none;
  opacity:0; transition:opacity .42s var(--e)}
body.leaving #veil{opacity:1}

@media(prefers-reduced-motion:reduce){
  .js .sr>i{transform:none}
  .js .mrev{clip-path:none}
  #cur,#curd,#veil{display:none}
}

/* ==================================================================
   HORIZONTAL SYSTEM GALLERY
================================================================== */
.hscroll{position:relative}
.hpin{position:relative; height:100svh; min-height:640px; overflow:hidden;
  display:flex; align-items:center}
.htrack{display:flex; gap:clamp(20px,2.4vw,38px); padding:0 var(--gut);
  will-change:transform; align-items:stretch}
.hpanel{
  flex:0 0 auto; width:min(920px,84vw); display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(20px,2.6vw,44px); align-items:center;
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.032),rgba(255,255,255,.004));
  box-shadow:0 1px 0 rgba(255,255,255,.035) inset;
}
.hp-art{
  position:relative; height:100%; min-height:330px; padding:clamp(14px,2vw,30px);
  background:radial-gradient(ellipse 90% 120% at 50% 118%,rgba(24,152,252,.20),transparent 62%),var(--bg2);
}
.hp-art::after{
  content:''; position:absolute; inset:0; z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:40px 40px; opacity:.5;
  mask-image:linear-gradient(to top,#000,transparent 84%);
  -webkit-mask-image:linear-gradient(to top,#000,transparent 84%);
}
.hp-art img{position:relative; z-index:2; width:100%; max-height:400px; object-fit:contain;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.7))}
.hp-txt{padding:clamp(22px,2.4vw,38px) clamp(22px,2.4vw,38px) clamp(22px,2.4vw,38px) 0;
  display:flex; flex-direction:column; gap:14px}
.hp-code{display:flex; align-items:baseline; gap:12px;
  font-family:var(--fm); font-size:12px; letter-spacing:.2em; color:var(--cyan)}
.hp-code i{font-style:normal; font-size:9.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--faint)}
.hp-h{font-family:var(--fd); font-weight:500; letter-spacing:-.03em; line-height:1;
  font-size:clamp(38px,4.6vw,66px)}
.hp-txt .body{font-size:14.5px; color:var(--mut); max-width:44ch}
.hp-kv{margin-top:4px}
.hp-cta{align-self:flex-start; margin-top:4px}

.hbar{position:absolute; left:var(--gut); right:var(--gut); bottom:clamp(22px,4vh,50px);
  height:2px; background:var(--line); border-radius:2px; overflow:hidden}
.hbar i{display:block; height:100%; width:20%; background:var(--grad-r); border-radius:2px}

/* touch + small screens: a native snapping strip, no pinning */
@media(max-width:1024px){
  .hpin{height:auto; min-height:0; display:block; overflow:visible}
  .htrack{overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:20px;
    -webkit-overflow-scrolling:touch; transform:none !important}
  .hpanel{scroll-snap-align:center; width:min(560px,88vw); grid-template-columns:1fr}
  .hp-art{min-height:240px}
  .hp-txt{padding:0 clamp(18px,4vw,26px) clamp(22px,5vw,30px)}
  .hbar{display:none}
}
@media(max-width:560px){
  .hpanel{width:84vw}
  .hp-h{font-size:clamp(32px,9vw,44px)}
}

/* ==================================================================
   SPACING + FINISH CORRECTIONS
================================================================== */
.sec{padding:clamp(84px,9.5vw,150px) 0}
.stmt{padding:clamp(88px,10vw,168px) 0}
.sec+.stmt,.stmt+.sec{padding-top:clamp(56px,6vw,96px)}
.sec-s{padding:clamp(58px,6.5vw,104px) 0}

/* hero plate: the original framing, lightly graded so the copy stays legible
   without burying the photograph. The user wants this image seen. */
.hero-ph::after{
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(5,7,12,.88) 20%, rgba(5,7,12,.42) 54%, rgba(5,7,12,.30) 100%),
    linear-gradient(100deg, rgba(5,7,12,.88) 0%, rgba(5,7,12,.40) 48%, rgba(5,7,12,.10) 100%) !important;
}
.hero-ph img{filter:saturate(1.02) contrast(1.05) brightness(1.0)}

/* type: a touch tighter and more confident at large sizes */
.h1{letter-spacing:-.035em}
.h2{letter-spacing:-.028em}
.lead{color:var(--ink2)}

/* contact: the director cards and form deserve more presence */
.pcard{border-radius:14px; transition:transform .5s var(--e), border-color .4s var(--e)}
.pcard:hover{transform:translateY(-4px)}
.form .fld input,.form .fld select,.form .fld textarea{border-radius:9px}
.steps4{gap:clamp(14px,1.6vw,24px)}

/* gallery panels should own the pinned viewport, not float in it */
@media(min-width:1025px){
  .hpanel{min-height:min(600px,68svh)}
  .hp-art{min-height:min(600px,68svh)}
  .hp-art img{max-height:min(440px,50svh)}
  .htrack{padding-right:calc(var(--gut) + 8vw)}
}
.hpanel{transition:border-color .5s var(--e)}
.hpanel:hover{border-color:var(--line2)}

/* index: the container card is the hero product moment on the page */
.card .stage.art{height:280px}
.g3>.card:first-child .stage{background:
  radial-gradient(ellipse 92% 132% at 50% 120%, rgba(24,152,252,.28), transparent 62%), var(--bg2)}

/* the pinned flow section needs air above it */
#delivery{margin-top:clamp(10px,3vw,48px)}

/* the giant numeral only works when there is room for it */
@media(max-width:820px){ .wm{display:none} }

/* ---------- contact: two directors, so the row must not leave a hole ---- */
.ppl{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.pcard{padding:clamp(24px,2.6vw,34px)}
.pcard .av{width:50px; height:50px; font-size:17px}
.pcard h4{font-size:21px}
.pcard a{padding:11px 0; font-size:14.5px}
.pcard a:last-child{border-bottom:1px solid var(--line)}

/* enquiry form: more presence, clearer focus */
.form .fld input,.form .fld select,.form .fld textarea{
  background:rgba(255,255,255,.022); border:1px solid var(--line);
  transition:border-color .3s var(--e), background .3s var(--e), box-shadow .3s var(--e);
}
.form .fld input:focus,.form .fld select:focus,.form .fld textarea:focus{
  border-color:var(--line3); background:rgba(255,255,255,.04);
  box-shadow:0 0 0 3px rgba(60,204,252,.10);
}
.steps4>*{transition:border-color .45s var(--e), transform .45s var(--e)}
.steps4>*:hover{border-color:var(--line2); transform:translateY(-3px)}


/* nav: mark the section you are actually reading */
#nav .navlinks a{position:relative}
#nav .navlinks a::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:var(--grad-r); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--e);
}
#nav .navlinks a:hover::after,#nav .navlinks a.here::after{transform:scaleX(1)}
#nav .navlinks a.here{color:var(--ink)}

/* ---------- hero foreground: our own hardware, over the landscape ------ */
.hero-art{
  position:absolute; right:calc(var(--gut) * -.25); bottom:clamp(28px,7vh,110px);
  width:min(760px,50vw); z-index:2; pointer-events:none; display:none;
}
.hero-art img{width:100%; height:auto; filter:drop-shadow(0 44px 60px rgba(0,0,0,.85))}
.hero-art::before{
  content:''; position:absolute; left:50%; top:56%; width:96%; aspect-ratio:1.9/1;
  transform:translate(-50%,-50%); z-index:-1;
  background:radial-gradient(ellipse at center,rgba(60,204,252,.20),rgba(24,152,252,.06) 44%,transparent 72%);
  filter:blur(34px);
}
@media(min-width:1100px){ .hero-art{display:block} }
@media(min-width:1100px){ .hero-art ~ .wrap .hero-sub{max-width:44ch} }

/* on wide screens the hero becomes two columns: copy left, hardware right */
/* only the home hero carries the render, so only it becomes two columns —
   the other heroes keep their full measure */
@media(min-width:1100px){
  .hero-art ~ .wrap>*{max-width:min(56%,820px)}
  .hero-art ~ .wrap .hero-sub{max-width:min(52%,600px)}
  .hero-art{
    width:min(640px,42vw);
    right:calc(var(--gut) * -.35);
    bottom:clamp(46px,9vh,120px);
  }
}
@media(min-width:1600px){
  .hero-art ~ .wrap>*{max-width:min(52%,860px)}
  .hero-art{width:min(720px,40vw)}
}

/* the hero headline has authored line breaks; keep it sized so they hold
   inside the narrower two-column measure rather than wrapping mid-phrase */
@media(min-width:1100px){ .hero-art ~ .wrap h1{font-size:clamp(46px,4.45vw,72px)} }
@media(min-width:1600px){ .hero-art ~ .wrap h1{font-size:clamp(56px,4.1vw,80px)} }

/* which of the five you are looking at */
.hpanel{position:relative}
.hpanel::before{
  content:attr(data-n); position:absolute; right:clamp(18px,2vw,30px); top:clamp(16px,1.8vw,26px);
  z-index:4; font-family:var(--fm); font-size:10px; letter-spacing:.22em; color:var(--faint);
}
@media(max-width:1024px){ .hpanel::before{right:16px; top:14px} }

/* A watermark is absolutely positioned, so its section must establish a
   containing block. Without this it escapes to the initial containing block
   and lands on top of the hero. */
section[data-wm]{position:relative}