/* SEMTECH MD — home page. Ported from the approved design (Main.dc.html). */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#0E0E0F}
*{box-sizing:border-box}
img,video{max-width:none}
a{color:inherit;text-decoration:none}a:hover{color:inherit}
.site{--vh:100vh;--ink:#0E0E0F;--graphite:#171718;--steel:#5E6266;--concrete:#A6A199;--kraft:#C8B791;--bone:#ECE8E1;--red:#B3141C;--red2:#D0262D;--tape:#D9CB3B;--dim:#A39E95;--move:cubic-bezier(.7,0,.2,1);--out:cubic-bezier(.2,.8,.2,1)}
.cond{font-family:'Wix Madefor Display','Segoe UI',sans-serif;letter-spacing:-.025em}
.lite{font-family:'Wix Madefor Display','Segoe UI',sans-serif;font-weight:400;font-style:normal;letter-spacing:-.03em}
.mono{font-family:'Wix Madefor Text','Segoe UI',sans-serif;font-weight:500;font-variant-numeric:tabular-nums}
.wrap{max-width:1440px;margin:0 auto;padding:0 64px}
.grain{position:absolute;inset:0;pointer-events:none;background-image:url(../img/grain.png);background-size:128px 128px;opacity:.55;mix-blend-mode:overlay}
.kraft-bg{background-image:url(../img/kraft.jpg);background-size:cover;background-position:50% 40%}
.skip{position:fixed;left:16px;top:-80px;z-index:200;background:#ECE8E1;color:#0E0E0F;padding:12px 16px;font-weight:600;transition:top .3s}
.skip:focus{top:16px}

/* nav */
.nav{transition:transform .55s var(--move),background .4s}
.nav.hide{transform:translateY(-100%)}
.nav-in>*{animation:navIn .9s var(--out) both}
.nav-in>*:nth-child(2){animation-delay:.08s}.nav-in>*:nth-child(3){animation-delay:.16s}
@keyframes navIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.nl{position:relative;display:inline-flex;height:44px;align-items:center;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:#D9D5CE}
.roll{display:inline-block;height:1.2em;overflow:hidden;line-height:1.2em}
.roll>span{display:block;transition:transform .45s var(--move)}
.nl:hover .roll>span{transform:translateY(-100%)}
.nl::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--red2);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--move)}
.nl.on::after{transform:scaleX(1);transform-origin:left}
.nl.on{color:#fff}
.lang{position:relative;display:grid;grid-template-columns:1fr 1fr;width:92px;height:40px;border:1px solid rgba(236,232,225,.35)}
.lang .thumb{position:absolute;top:0;bottom:0;left:0;width:50%;background:#ECE8E1;transition:transform .6s var(--move)}
.lang.ru .thumb{transform:translateX(100%)}
.lang button{position:relative;z-index:1;background:none;border:0;cursor:pointer;color:#fff;mix-blend-mode:difference;font-family:'Wix Madefor Text',sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em}
.lang button:focus-visible{outline:2px solid var(--tape);outline-offset:-4px}
.burger{display:none}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;gap:14px;overflow:hidden;cursor:pointer;transition:transform .25s}
.btn>*{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;transform:translateX(-101%);transition:transform .55s var(--move);z-index:0}
.btn:hover::before{transform:none}
.btn:active{transform:scale(.97)}
.btn .ar{display:inline-block;transition:transform .5s var(--move)}
.btn:hover .ar{transform:translateX(6px)}
.btn-red{background:var(--red);color:#fff}.btn-red::before{background:#0E0E0F}
.btn-bone{background:var(--bone);color:#0E0E0F}.btn-bone::before{background:var(--red)}
.btn-bone:hover{color:#fff}
.btn-line{border:1px solid rgba(236,232,225,.45);color:#ECE8E1}.btn-line::before{background:#ECE8E1}.btn-line:hover{color:#0E0E0F}
.ulink{position:relative;display:inline-flex;align-items:center;gap:10px}
.ulink::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform-origin:right;transition:transform .55s var(--move)}
.ulink:hover::after{transform:scaleX(0)}
.ulink .ar{transition:transform .5s var(--move)}
.ulink:hover .ar{transform:rotate(45deg)}

/* reveals — hidden states only apply once JS is running, so the page reads fine without it */
.rv-up{transition:opacity 1s var(--out),transform 1.1s var(--out)}
.js .rv-up{opacity:0;transform:translateY(30px)}
.js .in .rv-up{opacity:1;transform:none}
.rv-line{display:block;overflow:hidden;padding:.16em 0 .12em;margin:-.16em 0 -.12em}
.rv-line>span{display:block;transition:transform 1.15s var(--out)}
.js .rv-line>span{transform:translateY(108%)}
.js .in .rv-line>span{transform:none}
.rv-mask{transition:clip-path 1.4s var(--move)}
.js .rv-mask{clip-path:inset(100% 0 0 0)}
.js .in .rv-mask{clip-path:inset(0 0 0 0)}
.rv-side{transition:clip-path 1.4s var(--move)}
.js .rv-side{clip-path:inset(0 100% 0 0)}
.js .in .rv-side{clip-path:inset(0 0 0 0)}
.rv-draw{transform-origin:left;transition:transform 1.4s var(--move)}
.js .rv-draw{transform:scaleX(0)}
.js .in .rv-draw{transform:none}
.d1{transition-delay:.1s !important}.d2{transition-delay:.2s !important}.d3{transition-delay:.32s !important}.d4{transition-delay:.45s !important}.d5{transition-delay:.6s !important}
.replay,.replay *{transition:none !important}

/* hero */
.hero-img{animation:heroImg 2s var(--move) both}
@keyframes heroImg{from{clip-path:inset(10% 12% 10% 12%);transform:scale(1.18)}to{clip-path:inset(0 0 0 0);transform:scale(1)}}
.hero-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% 50%;transform:scale(calc(1 + var(--hp, 0) * 0.08)) translateY(calc(var(--hp, 0) * -30px));transform-origin:50% 40%}
.hero-l>span{animation:lineUp 1.2s var(--out) both}
.hero-l:nth-child(1)>span{animation-delay:.55s}.hero-l:nth-child(2)>span{animation-delay:.68s}.hero-l:nth-child(3)>span{animation-delay:.81s}
@keyframes lineUp{from{transform:translateY(110%)}to{transform:none}}
.hero-fade{animation:fadeIn 1.2s var(--out) 1.1s both}
@keyframes fadeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.dot{animation:dot 2.4s ease-in-out infinite}@keyframes dot{50%{opacity:.35}}

/* scene */
.scene-stage{perspective:1500px}
.scene-frame{transform-style:preserve-3d;will-change:transform}
.scene-line{position:absolute;left:0;right:0;top:0}

/* before-after */
.ba-stage{position:relative;overflow:hidden;background:#000;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.ba-stage img{pointer-events:none;-webkit-user-drag:none}
.ba-in{transition:clip-path 1.3s var(--move)}
.ba-stage.st0 .ba-in{clip-path:inset(0 0 100% 0)}
.ba-stage.st0 .ba-after{opacity:0}
.ba-after{transition:opacity .2s}
.knob{position:absolute;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(255,255,255,0) 42%),conic-gradient(from 20deg,#EDEDEB,#8E8E8C 10%,#E2E2E0 22%,#85857F 36%,#F1F1EF 50%,#93938F 63%,#E5E5E3 76%,#8A8A86 89%,#EDEDEB);box-shadow:0 14px 34px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.35),inset 0 -6px 10px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;transition:transform .45s var(--move),opacity .5s,top .35s var(--out);z-index:4}
.ba-stage.st0 .knob,.ba-stage.st1 .knob{transform:scale(0);opacity:0}
.ba-stage:hover .knob{transform:scale(1.08)}
.ba-stage.drag .knob{transform:scale(.92)}
.ba-stage:focus-within .knob{outline:2px solid var(--tape);outline-offset:4px}
.edge{position:absolute;top:0;bottom:0;width:1px;margin-left:-.5px;background:linear-gradient(180deg,rgba(255,248,236,0) 0%,rgba(255,248,236,.95) 50%,rgba(255,248,236,0) 100%);box-shadow:0 0 16px rgba(255,236,210,.55);opacity:var(--edge,0);transition:opacity .5s;z-index:3;pointer-events:none}
.ba-stage:hover .edge,.ba-stage.drag .edge,.ba-stage.st2 .edge,.ba-stage:focus-within .edge{opacity:1}
.ba-hint{opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s var(--out)}
.ba-stage.st3 .ba-hint,.ba-stage.hint .ba-hint{opacity:1;transform:none}
.ba-stage.st3 .knob{animation:nudge 1.6s var(--move) .2s 2}
@keyframes nudge{0%,100%{translate:0 0}30%{translate:-14px 0}65%{translate:14px 0}}
.ba-word{transition:opacity .3s}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* gallery */
.gal-panel{position:sticky;top:0;overflow:hidden}
.gal-track{display:flex;align-items:stretch;height:100%;width:max-content;transform:translate3d(calc(var(--gx,0) * -1px),0,0);will-change:transform}
.gcard .gimg{overflow:hidden}
.gcard .gimg img,.gcard .gimg video{transition:transform 1.4s var(--out)}
.gcard:hover .gimg img,.gcard:hover .gimg video{transform:scale(1.045)}
.tape{background:var(--tape);color:#1A1810;font-family:'Wix Madefor Text',sans-serif;font-weight:600;font-size:11px;letter-spacing:.16em;padding:6px 10px;transform:rotate(-2deg);box-shadow:0 1px 0 rgba(0,0,0,.15)}

/* services */
.svc-row{position:relative;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;width:100%;padding:26px 0;background:none;border:0;border-top:1px solid rgba(236,232,225,.14);color:#ECE8E1;text-align:left;cursor:pointer}
.svc-row .nm{transition:transform .7s var(--move),color .4s}
.svc-row:hover .nm,.svc-row.on .nm{transform:translateX(28px)}
.svc-row.on .nm{color:#fff}
.svc-row .mk{position:absolute;left:0;top:50%;width:14px;height:2px;background:var(--red2);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--move)}
.svc-row.on .mk,.svc-row:hover .mk{transform:scaleX(1)}
.svc-desc{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--move),opacity .5s;opacity:0}
.svc-desc>div{overflow:hidden}
.svc-li.on .svc-desc{grid-template-rows:1fr;opacity:1}
.svc-pic{position:absolute;inset:0;clip-path:inset(100% 0 0 0);transition:clip-path 1s var(--move)}
.svc-pic img{transform:scale(1.12);transition:transform 1.6s var(--out)}
.svc-pic.on{clip-path:inset(0 0 0 0)}
.svc-pic.on img{transform:scale(1)}
.svc-inline{display:none}

/* map */
.mapbox img{transition:transform 2.2s var(--out),filter 1.6s}
.mapbox:hover img{transform:scale(1.03)}
.js .map-sec .mapbox img{transform:scale(1.1);filter:grayscale(1) brightness(.7)}
.js .map-sec.in .mapbox img{transform:scale(1);filter:none}
.js .map-sec.in .mapbox:hover img{transform:scale(1.03)}
.pin-ring{animation:ring 2.8s var(--out) infinite}
@keyframes ring{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.mapcta .pinico{transition:transform .5s var(--move)}
.mapcta:hover .pinico{transform:translateY(-3px)}
.maphint{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--out)}
.mapbox:hover .maphint,.mapbox:focus-visible .maphint{opacity:1;transform:none}

/* menu & curtain */
.menu{position:fixed;inset:0;z-index:80;background:#0E0E0F;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .8s var(--move),visibility 0s .8s}
.menu.open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .8s var(--move),visibility 0s}
.menu .mi{opacity:0;transform:translateY(40px);transition:opacity .5s,transform .7s var(--out)}
.menu.open .mi{opacity:1;transform:none}
html.menu-open{overflow:hidden}
.curtain{position:fixed;inset:0;z-index:120;background:#0E0E0F;transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--move);pointer-events:none;display:flex;align-items:center;justify-content:center}
.curtain.c1{transform:scaleY(1);transform-origin:bottom}
.curtain.c2{transform:scaleY(0);transform-origin:top}
.curtain .cw{opacity:0;transition:opacity .3s}
.curtain.c1 .cw{opacity:1;transition-delay:.2s}

.jump{position:fixed;inset:0;z-index:110;background:#171718;transform:translateX(-101%);pointer-events:none;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:0 64px 72px;gap:18px}
.jump.j1{transform:none;transition:transform .38s var(--move)}
.jump.j2{transform:translateX(101%);transition:transform .55s var(--move)}
.jump .jl{font-size:88px;font-weight:600;line-height:1;letter-spacing:-.03em;color:#ECE8E1;opacity:0;transform:translateX(-40px);transition:opacity .25s,transform .45s var(--out)}
.jump.j1 .jl{opacity:1;transform:none;transition-delay:.12s}
.jump .jr{width:120px;height:3px;background:var(--red2);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--move)}
.jump.j1 .jr{transform:scaleX(1);transition-delay:.15s}
a:focus-visible,button:focus-visible{outline:2px solid var(--tape);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
.nl:active,.ulink:active{opacity:.65}
.btn:active::before{transform:none;filter:brightness(.85)}
.gal-track{transition:translate 1.3s var(--out),opacity .9s}
.js .gal-wrap:not(.in) .gal-track{translate:14% 0;opacity:0}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition-duration:.01s !important}}
/* short screens: the headline follows the viewport height (exact design sizes from 900 px tall up) */
.hero-h .c1l{font-size:min(103px,calc(var(--vh) * .1145)) !important}
.hero-h .s1l{font-size:min(90px,calc(var(--vh) * .1)) !important}

/* tablet */
@media (max-width:1100px){
.wrap{padding:0 40px}
.navlinks{display:none !important}
.burger{display:inline-flex}
.call-nav{display:none !important}
.hero-h .c1l{font-size:min(76px,calc(var(--vh) * .095)) !important}.hero-h .s1l{font-size:min(64px,calc(var(--vh) * .08)) !important}
.hero-bottom{flex-direction:column;align-items:flex-start !important}
.strip{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.strip>*:nth-child(3){border-left:0 !important}
.strip>*:nth-child(-n+2){border-bottom:1px solid rgba(236,232,225,.16)}
.strip>*:first-child{padding-left:40px !important;padding-right:24px !important}
.strip>*:nth-child(3){padding-left:40px !important}
.hero-wrap{padding-bottom:190px !important}
.scene-copy{left:40px !important;top:auto !important;bottom:56px;width:auto !important;right:40px;transform:none !important}
.scene-stage{justify-content:center !important;align-items:flex-start !important;padding:96px 0 0 !important}
.scene-frame{height:calc(var(--vh) * .46) !important}
.ba-head{grid-template-columns:1fr !important}
.split2{grid-template-columns:1fr !important}
.svc-grid{grid-template-columns:1fr !important}
.svc-preview{display:none !important}
.svc-inline{display:block}
.about{grid-template-columns:1fr !important}
.about-video{height:560px !important}
.contact-grid{grid-template-columns:1fr !important}
.phone-big{font-size:66px !important}
.contact-video{max-width:420px}
.map-sec{grid-template-columns:1fr !important}
.map-copy{padding:96px 40px !important}
.mapbox{min-height:520px !important}
.jump{padding:0 40px 72px}
}
/* mobile */
@media (max-width:700px){
.jump{padding:0 20px 48px}.jump .jl{font-size:52px}
.wrap{padding:0 20px}
.lang{width:80px;height:40px}
.hero-pic{object-position:30% 50%;transform:scale(calc(1 + var(--hp, 0) * 0.08))}
.hero-h .c1l{font-size:42px !important}.hero-h .s1l{font-size:38px !important}
.hero-sub{font-size:16px !important}
.hero-eye{font-size:11px !important;letter-spacing:.12em !important;margin-bottom:18px !important}
.strip{display:none !important}
.hero-wrap{padding-bottom:44px !important}
.scene-copy{left:20px !important;right:20px;bottom:28px}
.scene-copy h2{font-size:24px !important}
.scene-copy p{font-size:14px !important}
.scene-lines{min-height:190px !important}
.scene-stage{padding-top:76px !important}
.scene-frame{height:auto !important;width:64% !important}
.gcard>div:not(.gimg){position:relative !important;inset:auto !important;left:auto !important;right:auto !important;width:100% !important;margin-top:16px}
.scene-word{display:none}
.ba-word{font-size:24px !important}
.ba-title{font-size:48px !important}
.gal-wrap{height:auto !important}
.gal-panel{position:static !important;height:auto !important;padding:56px 0 40px !important}
.gal-track{transform:none !important;overflow-x:auto;width:auto !important;scroll-snap-type:x mandatory;padding:0 20px !important;gap:14px !important;scrollbar-width:none}
.gal-track::-webkit-scrollbar{display:none}
.gcard{scroll-snap-align:center;width:86% !important;min-width:86% !important;padding:0 !important;border:0 !important;flex-direction:column !important;height:auto !important}
.gcard .gimg{height:380px !important;width:100% !important;position:relative !important;inset:auto !important}
.gcard .gimg img,.gcard .gimg video{transform:none !important}
.gcard .hide-m{display:none !important}
.gal-intro{display:none !important}
.gal-intro-m{display:block !important}
.ba-stage{aspect-ratio:4 / 3 !important}
.contact-video{max-width:none !important}
.gal-ruler{display:none !important}
.gal-swipe{display:flex !important}
.svc-title{font-size:40px !important}
.svc-row .nm{font-size:26px !important}
.about-copy{padding:88px 20px 80px !important;min-height:0 !important}
.about-quote{font-size:32px !important}
.about-video{height:440px !important}
.phone-big{font-size:38px !important}
.contact-h{font-size:40px !important}
.map-copy{padding:72px 20px !important}
.mapbox{min-height:400px !important}
.map-h{font-size:34px !important}
.foot-word{font-size:72px !important}
}