/* LabPrim v2 — editorial layout on a column grid */
:root{
  --navy:#1f2a44;
  --ink:#1f2a44;
  --muted:#5f6b7a;
  --faint:#c9cfd8;
  --line:rgba(31,42,68,.07);
  --bg:#fff;
  --gray:#f3f5f8;
  --accent:#1f6fb2;
  --accent-d:#175a94;
  --serif:"Cormorant Garamond",Georgia,serif;
  --cond:Oswald,"Arial Narrow",sans-serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --script:"Marck Script",cursive;
  /* column lines (percent of viewport width) */
  --c1:4vw;--c2:17vw;--c3:33.5vw;--c4:50vw;--c5:66.5vw;--c6:83vw;--c7:96vw;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
.caps{font-family:var(--cond);font-weight:500;font-size:1.05rem;letter-spacing:.02em;text-transform:uppercase;color:var(--navy);margin-bottom:.8em}

/* column lines */
.cols{position:fixed;inset:0;pointer-events:none;z-index:40}
.cols span{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.cols span:nth-child(1){left:var(--c1)}.cols span:nth-child(2){left:var(--c2)}.cols span:nth-child(3){left:var(--c3)}
.cols span:nth-child(4){left:var(--c4)}.cols span:nth-child(5){left:var(--c5)}.cols span:nth-child(6){left:var(--c6)}.cols span:nth-child(7){left:var(--c7)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px 1.4vw;transition:transform .5s var(--ease)}
.nav.is-hidden{transform:translateY(-110%)}
.nav__side{display:flex;gap:6px}
.nav__side--r{justify-content:flex-end}
.nb{font:500 13px/1 var(--sans);padding:12px 22px;border:0;border-radius:3px;color:#fff;background:rgba(255,255,255,.14);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);cursor:pointer;transition:background .3s,color .3s}
.nb:hover{background:rgba(255,255,255,.28)}
.nb--accent{background:var(--accent)!important;color:#fff!important}
.nb--accent:hover{background:var(--accent-d)!important}
.nb--menu{display:none}
.nav.is-light .nb{color:var(--navy);background:rgba(31,42,68,.06)}
.nav.is-light .nb:hover{background:rgba(31,42,68,.12)}
.nav__logo{display:block;padding:4px 0;filter:drop-shadow(0 1px 8px rgba(15,22,36,.35));transition:filter .4s}
.nav.is-light .nav__logo{filter:none}
.nav__logo img{height:46px;width:auto}

/* menu overlay (mobile) */
.overlay{position:fixed;inset:0;z-index:55;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);display:flex;flex-direction:column;justify-content:center;padding:90px 8vw 40px;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.overlay.is-open{opacity:1;visibility:visible}
.overlay nav{display:flex;flex-direction:column;gap:6px}
.overlay nav a{font:300 2.3rem/1.2 var(--cond);color:var(--navy);transform:translateY(20px);opacity:0;transition:transform .5s var(--ease),opacity .5s}
.overlay.is-open nav a{transform:none;opacity:1}
.overlay.is-open nav a:nth-child(2){transition-delay:.04s}.overlay.is-open nav a:nth-child(3){transition-delay:.08s}.overlay.is-open nav a:nth-child(4){transition-delay:.12s}.overlay.is-open nav a:nth-child(5){transition-delay:.16s}.overlay.is-open nav a:nth-child(6){transition-delay:.2s}.overlay.is-open nav a:nth-child(7){transition-delay:.24s}
.overlay__c{margin-top:36px;display:flex;flex-direction:column;gap:4px;color:var(--muted)}

/* side tab */
.side-tab{position:fixed;right:0;top:50%;z-index:50;transform:translateY(-50%);writing-mode:vertical-rl;background:var(--accent);color:#fff;font:500 13px/1 var(--sans);padding:26px 13px;border-radius:4px 0 0 4px;display:flex;gap:16px;align-items:center;transition:background .3s,padding .3s}
.side-tab span{font-size:18px;transform:rotate(90deg)}
.side-tab:hover{background:var(--accent-d);padding-right:18px}

/* HERO + fog */
.hero-wrap{position:relative;height:190vh}
.hero{position:sticky;top:0;height:100vh;overflow:hidden;background:#dfe3e8}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.hero__img--blur{filter:blur(22px) saturate(.8);transform:scale(1.08);opacity:0;will-change:opacity}
.hero__fog{position:absolute;inset:0;z-index:2;opacity:0;background:
  radial-gradient(60% 40% at 20% 100%,#fff 0%,rgba(255,255,255,0) 70%),
  radial-gradient(70% 45% at 80% 105%,#fff 0%,rgba(255,255,255,0) 70%),
  linear-gradient(180deg,rgba(236,239,243,.55) 0%,rgba(255,255,255,.9) 70%,#fff 100%);will-change:opacity}
.hero__white{position:absolute;inset:0;z-index:4;background:#fff;opacity:0;pointer-events:none;will-change:opacity}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,22,36,.28) 0%,rgba(15,22,36,0) 30%,rgba(15,22,36,0) 55%,rgba(15,22,36,.35) 100%);pointer-events:none}
.hero__tag{position:absolute;z-index:2;left:var(--c1);top:46%;width:13vw;min-width:200px;font:300 clamp(15px,1.25vw,19px)/1.25 var(--cond);color:#fff;padding-left:2vw}
.hero__film{position:absolute;z-index:2;right:calc(100vw - var(--c6));top:46%;display:flex;gap:28px;font:500 13px var(--sans);color:#fff;margin-right:-4vw}
.hero__film span{transition:transform .3s var(--ease)}
.hero__film:hover span{transform:translateX(5px)}
.hero__word{position:absolute;z-index:2;left:0;right:0;bottom:-.08em;text-align:center;font:400 clamp(90px,23vw,380px)/1 var(--cond);letter-spacing:.02em;color:#fff;will-change:transform,opacity,filter}
.hero__word span{display:inline-block;transform:translateY(40%);opacity:0;transition:transform 1.4s var(--ease) .2s,opacity 1.2s .2s}
.is-loaded .hero__word span{transform:none;opacity:1}
.hero__tag,.hero__film{opacity:0;transition:opacity 1s .9s}
.is-loaded .hero__tag,.is-loaded .hero__film{opacity:1}

/* statement */
.statement{position:relative;padding:22vh 0 20vh;margin-top:-40vh;z-index:3}
.statement__in{position:relative;margin-left:var(--c3);width:calc(var(--c6) - var(--c3))}
.scrib-label{position:relative;display:inline-block;margin:0 0 26px -6vw;padding:14px 30px}
.scrib-label em{position:relative;font:300 1.2rem var(--cond);color:var(--navy)}
.scrib-label svg{position:absolute;left:-10px;top:-8px;width:calc(100% + 30px);height:calc(100% + 20px);overflow:visible}
.draw path{fill:none;stroke:var(--navy);stroke-width:1;stroke-linecap:round;opacity:.55}
.statement__text{font:500 clamp(24px,2.75vw,48px)/1.08 var(--serif);text-transform:uppercase;letter-spacing:.005em;text-indent:calc(var(--c4) - var(--c3))}
.statement__text .w{color:var(--faint);transition:color .35s linear}
.statement__text .w.on{color:var(--navy)}
.statement__text--sm{font-size:clamp(22px,2.2vw,38px);text-indent:0}

/* rise */
.rise{position:relative;padding-top:6vh;overflow:hidden}
.rise__cols{position:relative;z-index:2;display:flex;justify-content:space-between}
.coltext{width:calc(var(--c3) - var(--c2) - 1.2vw);margin-left:var(--c2);font-size:14px;color:var(--muted)}
.coltext--r{margin-left:0;margin-right:calc(100vw - var(--c6));width:calc(var(--c6) - var(--c5) - 1.2vw)}
.rise__stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,calc(var(--c4) - var(--c3)));margin:10vh 0 0 var(--c2)}
.st{padding:0 1.2vw 0 0}
.st b{display:block;font:400 clamp(28px,3vw,52px)/1 var(--cond);color:var(--navy);margin-bottom:6px}
.st em{font:300 1.05rem var(--cond);color:var(--muted)}
.rise__img{position:relative;margin:-2vh auto 0;width:min(70vw,1000px)}
.rise__img img{width:100%;height:auto;will-change:transform}

/* generic section */
.sec{position:relative;padding:18vh 0 12vh}
.title-scrib{position:relative;text-align:center;margin-bottom:8vh}
.serif-xl{font:500 clamp(40px,5.2vw,86px)/1 var(--serif);text-transform:uppercase;color:var(--navy);letter-spacing:.005em}
.serif-xl--left{text-align:left}
.title-scrib svg{position:absolute;left:50%;top:62%;width:min(44vw,560px);transform:translateX(-58%);overflow:visible}
.lead-center{max-width:520px;margin:-3vh auto 7vh;text-align:center;color:var(--muted)}

/* expanding panels */
.panels{display:flex;gap:0;height:min(78vh,720px);margin:0 calc(var(--c1) - 3.3vw);padding:0 .9vw}
.panel{position:relative;flex:1;min-width:0;overflow:hidden;background:var(--gray);cursor:pointer;transition:flex 1s var(--ease);outline:0}
.panel+.panel{border-left:1px solid rgba(255,255,255,.7)}
.panel.is-open{flex:4.2;cursor:default}
.panel img{position:absolute;inset:10% 8% 30%;width:84%;height:60%;object-fit:contain;filter:blur(10px);opacity:.75;transform:scale(1.2);transition:filter .9s var(--ease),opacity .9s,transform 1.2s var(--ease);mix-blend-mode:multiply}
.panel.is-open img{filter:none;opacity:1;transform:none}
.panel__txt{position:absolute;inset:0;padding:36px 3vw;display:flex;flex-direction:column;justify-content:space-between;opacity:0;transition:opacity .5s;pointer-events:none;min-width:360px}
.panel.is-open .panel__txt{opacity:1;transition-delay:.45s}
.panel__txt h3{font:300 clamp(28px,2.6vw,44px)/1.05 var(--cond);color:var(--navy);max-width:10em}
.panel__txt p{max-width:340px;color:var(--muted);font-size:14px}
.panel__meta,.card__meta{display:flex;align-items:center;gap:12px;font-weight:500;font-size:13px;color:var(--navy)!important;margin-bottom:10px}
.panel__meta span+span,.card__meta span+span{padding-left:12px;border-left:1px solid var(--faint)}
.panel__txt>div{margin-top:auto}

/* quote */
.quote blockquote{margin:0 0 0 var(--c3);width:calc(var(--c5) - var(--c3) + 2vw);position:relative}
.quote__mark{position:absolute;left:-.1em;top:-.2em;font:400 2.4rem var(--serif);color:var(--navy)}
.quote blockquote>p:first-of-type{font:300 clamp(20px,1.75vw,30px)/1.3 var(--cond);color:var(--navy);text-indent:14%;padding-top:14px}
.quote__dash{display:block;margin:10px 0 0;color:var(--navy)}
.quote__sig{font:500 clamp(38px,3.8vw,62px)/1 var(--cond);text-transform:uppercase;letter-spacing:.08em;color:var(--navy);margin:14px 0 12px -.1em;clip-path:inset(0 100% 0 0);transition:clip-path 2.2s var(--ease) .4s}
.quote blockquote.is-in .quote__sig{clip-path:inset(0 0 0 0)}
.quote footer b{display:block;font-weight:500;font-size:13px}
.quote footer span{font-size:13px;color:var(--muted)}

/* pinned image + strips */
.pin{position:relative;height:260vh;margin:0 var(--c1)}
.pin__sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.pin__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.pin__sticky::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,22,36,.1),rgba(15,22,36,.35))}
.pin__title{position:absolute;z-index:2;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font:500 clamp(46px,6.4vw,110px)/.95 var(--serif);text-transform:uppercase;color:#fff}
.pin__text{position:absolute;z-index:2;left:calc(var(--c5) - var(--c1));top:12vh;width:calc(var(--c6) - var(--c5));color:rgba(255,255,255,.92);font-size:14px}
.pin__text .caps{color:#fff}
.strip{position:absolute;z-index:3;top:0;height:100vh;overflow:hidden;will-change:transform;transform:translateY(110vh);box-shadow:0 30px 60px -30px rgba(0,0,0,.4)}
.strip img{width:100%;height:100%;object-fit:cover}
.strip--1{left:calc(var(--c2) - var(--c1));width:calc(var(--c3) - var(--c2))}
.strip--2{left:calc(var(--c3) - var(--c1));width:calc(var(--c5) - var(--c3))}
.strip--3{left:calc(var(--c6) - var(--c1));width:calc(var(--c7) - var(--c6) + 2vw);top:14vh;height:62vh;background:#fff}
.strip--3 img{height:70%}
.strip--3 p{padding:18px 20px;font:300 1.15rem/1.25 var(--cond);color:var(--navy)}

/* products */
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:7vh}
.chip{font:500 13px var(--sans);padding:11px 20px;border:0;border-radius:3px;background:var(--gray);color:var(--navy);cursor:pointer;transition:background .25s,color .25s}
.chip:hover{background:#e6eaf0}
.chip.is-on{background:var(--navy);color:#fff}
.cards{display:grid;grid-template-columns:repeat(4,1fr);column-gap:calc(var(--c3) - var(--c2) - (var(--c2) - var(--c1)) + 1vw);row-gap:9vh;margin:0 calc(100vw - var(--c7)) 0 var(--c1);padding:0 1vw}
.card{min-width:0}
.card.is-hidden{display:none}
.card__img{position:relative;aspect-ratio:1/1.05;background:var(--gray);overflow:hidden;margin-bottom:22px}
.card__img img{position:absolute;inset:10%;width:80%;height:80%;object-fit:contain;mix-blend-mode:multiply;transition:transform 1s var(--ease)}
.card:hover .card__img img{transform:scale(1.07)}
.card h3,.post h3{font:300 clamp(22px,1.7vw,28px)/1.1 var(--cond);color:var(--navy);margin-bottom:10px}
.card p:not(.card__meta),.post p:not(.card__meta){font-size:14px;color:var(--muted)}

/* services */
.services__head{margin-left:var(--c3);width:calc(var(--c6) - var(--c3));margin-bottom:12vh}
.services__head .scrib-label{margin-left:-6vw}
.svc-row{display:grid;grid-template-columns:repeat(4,calc(var(--c4) - var(--c3)));margin-left:var(--c2)}
.svc{padding:0 2vw 0 1.2vw;border-left:1px solid transparent}
.svc__n{display:block;font:400 clamp(44px,4vw,68px)/1 var(--cond);color:transparent;-webkit-text-stroke:1px var(--faint);margin-bottom:26px;transition:color .5s,-webkit-text-stroke-color .5s}
.svc:hover .svc__n{color:var(--accent);-webkit-text-stroke-color:transparent}
.svc p{font-size:14px;color:var(--muted)}

/* partners marquee */
.marquee{--gap:1px;overflow:hidden;margin:0 var(--c1);border-top:1px solid var(--line)}
.marquee:last-of-type{border-bottom:1px solid var(--line)}
.marquee__track{display:flex;width:max-content;animation:marq 70s linear infinite}
.marquee--rev .marquee__track{animation-direction:reverse}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.mq-item{flex:none;display:flex;align-items:center;justify-content:center;width:calc(var(--c3) - var(--c2));min-width:170px;height:130px;padding:28px 34px;border-right:1px solid var(--line);transition:background .4s}
.mq-item img{max-height:48px;max-width:100%;width:auto;filter:grayscale(1);opacity:.6;mix-blend-mode:multiply;transition:filter .4s,opacity .4s,transform .5s var(--ease)}
.mq-item:hover{background:var(--gray)}
.mq-item:hover img{filter:none;opacity:1;transform:scale(1.06)}

/* news */
.news{display:grid;grid-template-columns:repeat(3,calc(var(--c4) - var(--c3) - 2vw));justify-content:space-between;margin:0 calc(100vw - var(--c6)) 0 var(--c2)}
.post__img{position:relative;aspect-ratio:4/3;background:var(--gray);margin-bottom:20px;overflow:hidden}
.post__img img{position:absolute;inset:10%;width:80%;height:80%;object-fit:contain;mix-blend-mode:multiply;transition:transform 1s var(--ease)}
.post:hover .post__img img{transform:scale(1.06)}

/* inquiry */
.inquiry{background:var(--gray)}
.inquiry__in{display:grid;grid-template-columns:calc(var(--c4) - var(--c2)) calc(var(--c6) - var(--c4));margin-left:var(--c2)}
.inquiry__lead{font:300 1.35rem/1.35 var(--cond);color:var(--navy);max-width:22em;margin:28px 0 46px}
.contacts{margin:0;display:grid;gap:22px}
.contacts dt{font:500 12px var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:2px}
.contacts dd{margin:0;font-size:15px}
.contacts a{border-bottom:1px solid transparent;transition:border-color .3s}
.contacts a:hover{border-color:var(--navy)}
.form{padding-top:10px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:0 2.4vw}
.field{display:block;margin-bottom:26px}
.field>span{display:block;font:500 12px var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:4px}
.field input,.field select,.field textarea{width:100%;font:400 16px var(--sans);color:var(--ink);padding:10px 0;border:0;border-bottom:1px solid #b9c1cc;background:transparent;border-radius:0;transition:border-color .3s;resize:vertical;-webkit-appearance:none;appearance:none}
.field select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231f2a44' fill='none'/%3E%3C/svg%3E") right 4px center no-repeat}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--accent)}
.field.is-invalid input,.field.is-invalid select{border-color:#c93b3b}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--muted);margin:6px 0 30px;cursor:pointer}
.consent input{margin-top:.2em;width:16px;height:16px;accent-color:var(--accent);flex:none}
.consent.is-invalid span{color:#c93b3b}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.btn{display:inline-flex;align-items:center;gap:12px;font:500 14px var(--sans);color:#fff;background:var(--accent);border:0;border-radius:3px;padding:17px 30px;cursor:pointer;transition:background .3s}
.btn:hover{background:var(--accent-d)}
.spinner{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.form.is-loading .spinner{display:inline-block}
.form.is-loading button{pointer-events:none;opacity:.85}
@keyframes spin{to{transform:rotate(360deg)}}
.form__msg{margin-top:16px;font-size:14px;font-weight:500;min-height:1.4em}
.form__msg.ok{color:#1c7a45}
.form__msg.err{color:#c93b3b}

/* footer */
.footer{position:relative;padding:14vh 0 3vh;overflow:hidden}
.footer__top{display:grid;grid-template-columns:repeat(3,calc(var(--c4) - var(--c3)));margin-left:var(--c2);font-size:14px;color:var(--muted)}
.footer__top>div{padding-right:2vw}
.footer__top a{display:block;margin-bottom:4px;transition:color .3s}
.footer__top a:hover{color:var(--accent)}
.footer__word{font:400 clamp(90px,23vw,380px)/.8 var(--cond);text-align:center;color:var(--gray);margin:10vh 0 3vh;letter-spacing:.02em;user-select:none}
.footer__copy{text-align:center;font-size:12px;color:var(--muted)}

/* reveal + draw */
.js .reveal{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.is-in{opacity:1;transform:none}
.js .draw path{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);transition:stroke-dashoffset 2.2s var(--ease) .3s}
.js .is-in .draw path,.js .draw.is-in path{stroke-dashoffset:0}

/* responsive */
@media (max-width:1024px){
  .cards{grid-template-columns:repeat(3,1fr);column-gap:3vw}
  .svc-row,.rise__stats{grid-template-columns:repeat(2,1fr);row-gap:6vh;margin-right:4vw}
  .news{grid-template-columns:repeat(3,1fr);gap:3vw;margin:0 4vw}
}
@media (max-width:760px){
  :root{--c1:5vw;--c2:5vw;--c3:5vw;--c4:50vw;--c5:95vw;--c6:95vw;--c7:95vw}
  .cols span:nth-child(n+2):nth-child(-n+3),.cols span:nth-child(n+5):nth-child(-n+6){display:none}
  .nav{padding:12px 3vw}
  .nav__side .nb:not(.nb--menu):not(.nb--accent){display:none}
  .nb--menu{display:block}
  .nb{padding:11px 16px}
  .nav__logo img{height:32px}
  .side-tab{display:none}
  .hero-wrap{height:170vh}
  .hero__tag{top:auto;bottom:34vw;left:0;width:auto;padding:0 5vw}
  .hero__film{display:none}
  .statement{padding:14vh 0 10vh}
  .statement__in{margin:0 5vw;width:auto}
  .statement__text{text-indent:0;font-size:clamp(22px,6.4vw,34px)}
  .scrib-label,.services__head .scrib-label{margin-left:0}
  .rise__cols{flex-direction:column;gap:5vh;padding:0 5vw}
  .coltext,.coltext--r{width:auto;margin:0}
  .rise__stats{margin:8vh 5vw 0;grid-template-columns:1fr 1fr}
  .rise__img{width:100vw}
  .panels{flex-direction:column;height:auto;margin:0 5vw;padding:0}
  .panel{flex:none;height:92px;transition:height .8s var(--ease)}
  .panel+.panel{border-left:0;border-top:1px solid #fff}
  .panel.is-open{flex:none;height:520px}
  .panel img{inset:18% 10% 30%;width:80%;height:52%}
  .panel__txt{min-width:0;padding:22px}
  .quote blockquote{margin:0 5vw;width:auto}
  .pin{height:220vh;margin:0}
  .pin__text{left:5vw;width:70vw;top:10vh}
  .strip--1{left:5vw;width:40vw}
  .strip--2{left:50vw;width:45vw}
  .strip--3{display:none}
  .cards{grid-template-columns:1fr 1fr;column-gap:4vw;row-gap:6vh;margin:0 5vw;padding:0}
  .card h3{font-size:20px}
  .card p:not(.card__meta){display:none}
  .services__head{margin:0 5vw 8vh;width:auto}
  .svc-row{margin:0 5vw;grid-template-columns:1fr 1fr;gap:6vh 4vw}
  .svc{padding:0}
  .marquee{margin:0}
  .mq-item{min-width:150px;height:100px;padding:22px}
  .news{grid-template-columns:1fr;margin:0 5vw;gap:7vh}
  .inquiry__in{grid-template-columns:1fr;margin:0 5vw;gap:6vh}
  .form__row{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr;margin:0 5vw;gap:5vh}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  .js .draw path{stroke-dashoffset:0}
  .hero__word span,.hero__tag,.hero__film{opacity:1;transform:none}
  .statement__text .w{color:var(--navy)}
  .quote__sig{clip-path:none}
  .strip{transform:none;position:relative}
}

/* open panel: text left, device right */
.panel.is-open img{inset:10% 4% 10% 36%;width:60%;height:80%}
.panel__txt{justify-content:flex-start;gap:0}
.panel__txt>div{margin-top:auto}
@media (max-width:760px){
  .panel.is-open img{inset:12% 10% 40% 10%;width:80%;height:48%}
}
.panel img{transition:filter .9s var(--ease),opacity .9s,transform 1.2s var(--ease),inset 1s var(--ease),width 1s var(--ease),height 1s var(--ease)}

/* partner page */
.ph{padding:22vh 0 8vh;margin-left:var(--c3);width:calc(var(--c6) - var(--c3))}
.ph__crumbs{display:flex;gap:10px;font-size:13px;color:var(--muted);margin-bottom:9vh}
.ph__crumbs a:hover{color:var(--navy)}
.ph__crumbs b{font-weight:500;color:var(--navy)}
.ph .scrib-label{margin-left:-6vw}
.ph__title{font:500 clamp(56px,8.5vw,150px)/.9 var(--serif);text-transform:uppercase;color:var(--navy);margin:0 0 3vh -.04em}
.ph__full{font:300 1.35rem var(--cond);color:var(--muted)}
.ph__full a{color:var(--accent)}
.ph-media{display:grid;grid-template-columns:calc(var(--c4) - var(--c1)) calc(var(--c6) - var(--c4));margin-left:var(--c1);align-items:center;gap:0}
.ph-media__img{position:relative;aspect-ratio:1/1;background:var(--gray);overflow:hidden}
.ph-media__img img{position:absolute;inset:10%;width:80%;height:80%;object-fit:contain;mix-blend-mode:multiply}
.ph-media__img--logo img{inset:30% 18%;width:64%;height:40%}
.ph-media__txt{padding:0 4vw 0 calc(var(--c4) - var(--c3) - 12vw)}
.ph-media__txt .statement__text{text-transform:none;font-size:clamp(22px,2.1vw,34px);line-height:1.2}
.glist{list-style:none;margin:0 0 0 var(--c2);padding:0;display:grid;grid-template-columns:repeat(4,calc(var(--c4) - var(--c3)));row-gap:9vh}
.glist li{padding-right:2vw}
.glist__n{display:block;font:400 clamp(40px,3.6vw,60px)/1 var(--cond);color:transparent;-webkit-text-stroke:1px var(--faint);margin-bottom:22px}
.glist h3{font:300 clamp(22px,1.7vw,28px)/1.1 var(--cond);color:var(--navy);margin-bottom:10px}
.glist p{font-size:14px;color:var(--muted)}
.ph-cta{margin-top:40px}
.page-partner .marquee{border-bottom:1px solid var(--line)}
@media (max-width:1024px){.glist{grid-template-columns:repeat(2,1fr);margin-right:4vw}}
@media (max-width:760px){
  .ph{margin:0 5vw;width:auto;padding-top:16vh}
  .ph .scrib-label{margin-left:0}
  .ph-media{grid-template-columns:1fr;margin:0 5vw;gap:6vh}
  .ph-media__txt{padding:0}
  .glist{grid-template-columns:1fr;margin:0 5vw;row-gap:6vh}
}
em{font-style:normal}

/* mobile-only: centred hero word, collapsed panels show titles instead of blurred photos */
@media (max-width:760px){
  .hero__word{top:50%;bottom:auto;margin-top:-.5em;line-height:1}
  .hero__tag{bottom:auto;top:calc(50% + 62px);text-align:center}
  .panel:not(.is-open) img{display:none}
  .panel:not(.is-open) .panel__txt{opacity:1;transition-delay:0s;flex-direction:row;align-items:center;justify-content:space-between;padding:0 22px}
  .panel:not(.is-open) .panel__txt>div{display:none}
  .panel:not(.is-open) .panel__txt h3{font-size:22px}
  .panel:not(.is-open) .panel__txt::after{content:"+";font:300 26px var(--cond);color:var(--navy)}
  .panel:not(.is-open) .panel__txt h3,.panel:not(.is-open) .panel__txt::after{transition:none}
}

/* coloured partner logos */
.mq-item img{filter:none;opacity:1;mix-blend-mode:multiply}
.mq-item:hover img{transform:scale(1.08)}

/* two news items */
.news--2{grid-template-columns:repeat(2,calc(var(--c4) - var(--c3) - 2vw));justify-content:start;column-gap:calc(var(--c4) - var(--c2) - (var(--c4) - var(--c3)) + 2vw)}

/* mobile-only: readable hero tagline */
@media (max-width:760px){
  .news--2{grid-template-columns:1fr}
  .hero__tag{font-size:19px;font-weight:400;line-height:1.3;letter-spacing:.01em;padding:0 9vw;top:calc(50% + 58px);text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 18px rgba(0,0,0,.6)}
  .hero__tag::before{content:"";position:absolute;z-index:-1;left:4vw;right:4vw;top:-14px;bottom:-14px;background:radial-gradient(closest-side,rgba(10,14,24,.55),rgba(10,14,24,0));pointer-events:none}
}

/* desktop: LABPRIM sits higher in the hero (mobile keeps its own centred rule) */
@media (min-width:761px){.hero__word{bottom:8vh}}

/* right-hand strip is a full photo like the others */
.strip--3{top:0;height:100vh;background:none}
.strip--3 img{height:100%}

/* tablet: keep the nav from crowding */
@media (min-width:761px) and (max-width:1100px){
  .nav__side .nb[href="#za-nas"],.nav__side .nb[href$="#za-nas"]{display:none}
  .nb{padding:12px 16px}
}

/* mobile nav: wider logo needs a little more room */
@media (max-width:760px){
  .nav{padding:12px 4vw;gap:8px}
  .nav__logo img{height:24px}
  .nb{padding:10px 13px;font-size:12.5px}
}
@media (max-width:360px){
  .nav__logo img{height:20px}
}

/* desktop: longer hero tagline — a bit wider and higher so it clears LABPRIM */
@media (min-width:761px){
  .hero__tag{top:38%;width:18vw;min-width:240px}
  .hero__film{top:38%}
}
@media (min-width:761px) and (max-width:1100px){.nav__logo img{height:34px}}

/* longer "about" statement — smaller type */
.statement__text--long{font-size:clamp(19px,1.75vw,30px);line-height:1.22}

/* four info columns under "about" */
.rise__cols{display:grid;grid-template-columns:repeat(4,calc(var(--c4) - var(--c3)));margin-left:var(--c2);justify-content:start}
.rise__cols .coltext{width:auto;margin:0;padding-right:2.2vw}
@media (max-width:1024px){
  .rise__cols{grid-template-columns:repeat(2,1fr);row-gap:6vh;margin-right:4vw}
}
@media (max-width:760px){
  .statement__text--long{font-size:clamp(17px,4.7vw,22px);line-height:1.28}
  .rise__cols{grid-template-columns:1fr;margin:0;padding:0 5vw;row-gap:5vh}
  .rise__cols .coltext{padding-right:0}
}

/* "Лаборатории до ключ" with the BINDER room photo: framing + stronger shade for the white title */
.pin__bg{object-position:58% 50%}
.pin__sticky::before{background:linear-gradient(180deg,rgba(15,22,36,.42) 0%,rgba(15,22,36,.22) 40%,rgba(15,22,36,.5) 100%)}
.pin__title{text-shadow:0 2px 24px rgba(10,14,24,.45)}
.strip--1 img{object-position:50% 40%}
.strip--2 img{object-position:38% 50%}
.strip--3 img{object-position:27% 50%}
@media (max-width:760px){
  .pin__bg{object-position:84% 50%}
  .strip--1{left:3vw;width:30vw}
  .strip--2{left:35vw;width:30vw}
  .strip--3{display:block;left:67vw;width:30vw;top:0;height:100vh}
  .strip--2 img{object-position:30% 50%}
  .strip--3 img{object-position:26% 50%}
}
#aparati .serif-xl{font-size:clamp(34px,4.4vw,74px);max-width:14em;margin:0 auto;text-wrap:balance;line-height:1.02}
@media (max-width:760px){.pin__bg{object-position:66% 50%}#aparati .serif-xl{font-size:clamp(30px,8.6vw,40px)}}
/* "Лаборатории до ключ": SOTAX + INTEGRA photo — keep the SOTAX tower in frame */
.pin__bg{object-position:50% 55%}
@media (max-width:760px){.pin__bg{object-position:80% 50%}}
/* "Лаборатории до ключ": bright, busy SOTAX + CE 7 photo — stronger shade so the white text stays readable */
.pin__bg{object-position:50% 55%}
.pin__sticky::before{background:
  radial-gradient(ellipse 60% 40% at 50% 50%,rgba(10,16,28,.38),rgba(10,16,28,0) 70%),
  linear-gradient(180deg,rgba(10,16,28,.6) 0%,rgba(10,16,28,.36) 42%,rgba(10,16,28,.36) 60%,rgba(10,16,28,.62) 100%)}
.pin__title{text-shadow:0 2px 30px rgba(5,10,20,.65),0 1px 3px rgba(5,10,20,.45)}
.pin__text{text-shadow:0 1px 10px rgba(5,10,20,.7)}
@media (max-width:760px){
  .pin__bg{object-position:16% 50%}
  .pin__sticky::before{background:
    radial-gradient(ellipse 90% 30% at 50% 50%,rgba(10,16,28,.4),rgba(10,16,28,0) 70%),
    linear-gradient(180deg,rgba(10,16,28,.7) 0%,rgba(10,16,28,.42) 40%,rgba(10,16,28,.4) 62%,rgba(10,16,28,.65) 100%)}
}
/* frosted card behind the side text so it reads on bright equipment */
.pin__text{background:rgba(10,16,28,.34);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:18px 22px;margin-left:-22px;border-radius:4px}
@media (max-width:760px){
  .pin__text{margin-left:0;left:4vw;width:auto;right:4vw;padding:16px 18px}
  .pin__sticky::before{background:
    radial-gradient(ellipse 110% 22% at 50% 50%,rgba(8,13,24,.72),rgba(8,13,24,0) 75%),
    linear-gradient(180deg,rgba(10,16,28,.55) 0%,rgba(10,16,28,.35) 40%,rgba(10,16,28,.35) 62%,rgba(10,16,28,.6) 100%)}
}
/* scroll strips: BÜCHI (left), Rotavapor (middle), BINDER (right) */
.strip--1 img{object-position:50% 45%}
.strip--2 img{object-position:42% 60%}
.strip--3 img{object-position:22% 50%}
@media (max-width:760px){
  .strip--1 img{object-position:45% 45%}
  .strip--2 img{object-position:40% 62%}
  .strip--3 img{object-position:18% 50%}
}
@media (max-width:760px){.strip--3 img{object-position:6% 50%}}
/* phone number under the logo (always visible in the fixed nav) */
.nav__brand{display:flex;flex-direction:column;align-items:center;gap:2px}
.nav__tel{font:400 13px/1 var(--cond);letter-spacing:.08em;color:#fff;text-decoration:none;text-shadow:0 1px 8px rgba(15,22,36,.55);white-space:nowrap;transition:color .4s}
.nav.is-light .nav__tel{color:var(--navy);text-shadow:none}
.nav__tel:hover{color:var(--blue,#2f6db5)}
@media (max-width:760px){.nav__tel{font-size:11px;letter-spacing:.04em}}
/* clean underline under "апаратура" */
.u-word{position:relative;display:inline-block;white-space:nowrap}
.u-word svg{position:absolute;left:-2%;width:104%;bottom:-.16em;height:.28em;overflow:visible}
.u-word .draw path{stroke-width:1.4;opacity:.7}
#aparati .title-scrib{margin-bottom:8vh}
/* wider, slower right strip so the BINDER photo is not cropped away */
@media (min-width:761px){.strip--3{left:calc(var(--c6) - var(--c1) - 5vw);width:calc(var(--c7) - var(--c6) + 7vw)}.strip--3 img{object-position:12% 50%}}
/* right strip: shorter framed card so the cropped BINDER photo shows whole */
@media (min-width:761px){.strip--3{top:12vh;height:76vh}.strip--3 img{object-position:30% 50%}}
@media (max-width:760px){.strip--3{top:14vh;height:66vh}.strip--3 img{object-position:8% 50%}}
.title-scrib .u-word svg{left:-2%;top:auto;bottom:-.16em;width:104%;height:.28em;transform:none}
/* small map under the address in the footer */
.footer__map{display:block;margin-top:14px;max-width:320px;text-decoration:none}
.footer__map iframe{display:block;width:100%;height:180px;border:0;border-radius:4px;filter:grayscale(.35) contrast(1.05);pointer-events:none}
.footer__map span{display:block;margin-top:6px;font-size:13px;color:var(--navy)}
.footer__map:hover iframe{filter:none}
@media (max-width:760px){.footer__map{max-width:none}.footer__map iframe{height:200px}}
.footer__map{position:relative}
.footer__pin{position:absolute;left:50%;top:90px;width:22px;height:22px;margin:-22px 0 0 -11px;background:var(--navy,#1b2a44);border:3px solid #fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 3px 8px rgba(0,0,0,.35)}
@media (max-width:760px){.footer__pin{top:100px}}
.footer__map--inq{max-width:360px;margin-top:12px}
/* ---- PHONE ONLY: "Лаборатории до ключ" ---- */
@media (max-width:760px){
  /* big photo framed on CE 7 */
  .pin__bg{object-position:63% 50%}
  /* scroll photos: smaller framed cards with a natural portrait shape instead of thin full-height slices */
  .strip{border-radius:6px;box-shadow:0 18px 40px -12px rgba(5,10,20,.55);outline:3px solid rgba(255,255,255,.9);outline-offset:-3px}
  .strip--1{left:5vw;width:44vw;top:5vh;height:40vh}
  .strip--2{left:51vw;width:44vw;top:24vh;height:44vh}
  .strip--3{display:block;left:24vw;width:52vw;top:52vh;height:40vh;background:none}
  .strip img{height:100%}
  .strip--1 img{object-position:50% 40%}
  .strip--2 img{object-position:45% 62%}
  .strip--3 img{object-position:30% 50%}
}
@media (max-width:760px){.strip--3{left:5vw;width:44vw;top:60vh;height:40vh}.strip--3 img{object-position:22% 50%}}
/* PHONE: photo without darkening; text stays readable through its own shadow / card */
@media (max-width:760px){
  .pin__sticky::before{background:none}
  .pin__title{text-shadow:0 0 2px rgba(5,10,20,.55),0 2px 6px rgba(5,10,20,.55),0 4px 24px rgba(5,10,20,.6)}
}
/* PHONE: very light shade on the "Лаборатории до ключ" photo */
@media (max-width:760px){.pin__sticky::before{background:linear-gradient(180deg,rgba(10,16,28,.22),rgba(10,16,28,.14) 45%,rgba(10,16,28,.24))}}
/* ---- scroll performance ----
   backdrop-filter on fixed/sticky elements forces a full re-blur every frame while scrolling (worst on phones);
   the blur layer in the hero is now a pre-blurred image, so no live CSS blur either */
.nb{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(15,22,36,.28)}
.nb:hover{background:rgba(15,22,36,.4)}
.nav.is-light .nb{background:rgba(31,42,68,.07)}
.hero__img--blur{filter:none;transform:scale(1.04)}
.hero__word{will-change:transform,opacity}
.pin__text{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,16,28,.58)}
.hero,.pin__sticky{contain:paint}
/* PHONE: "Лаборатории до ключ" — the whole photo, still, on a calm dark background (no sideways pan, no frame) */
.pin__photo{display:none}
@media (max-width:760px){
  .pin__sticky{background:#2a3446}
  .pin__bg,.pin__sticky::before{display:none}
  /* stacked under the text card: card (top 10vh) → title → photo */
  .pin__title{top:min(10vh + 268px,100vh - 56.25vw - 116px);transform:none}
  .pin__photo{display:block;position:absolute;z-index:1;left:0;top:min(10vh + 380px,100vh - 56.25vw - 12px);width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
}
