/* DED-PRO site styles. Brand tokens: brand/README.md.
   One continuous dark canvas: sections melt into each other through gradients and photo masks, not borders. */

@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../public/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../public/fonts/inter-latin-ext-a-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-017F}

:root{
  --gr:26,28,30; --graphite:#1A1C1E; --paper:#F2F0EB; --brass:#A68A4B; --deep:#121415; --steel:#222527; --steel2:#2a2d30;
  --mute:#d3d1cd; --fs:clamp(17px,1.3vw,20px); --lh:1.62; --tint:rgba(242,240,235,.045); --tint2:rgba(242,240,235,.08);
  --ease:cubic-bezier(.23,1,.32,1);
  --rv-t:.9s; --rv-m:1.035s; --rv-s:40ms;   /* reveal timing: fade, lift, delay between words (hero adds blur) */
  --pad:clamp(20px,4.5vw,96px);
  --max:1640px;
  --hh:75vh;                         /* hero: never more than 75% of the viewport */
  --nav:84px;
  --fade:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + 16px);background:var(--deep)}
body{margin:0;background:var(--graphite);color:var(--paper);font:400 17px/1.55 "Inter",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,p,ul,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:12px 18px;background:var(--paper);color:var(--graphite);font-weight:600}
.skip:focus{top:12px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.ic{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}

.sec{position:relative;padding-block:clamp(80px,10vw,170px)}
.sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 64px;flex-wrap:wrap;margin-bottom:clamp(36px,4.5vw,72px)}

/* ---------- type ---------- */
.h2{font-weight:600;font-size:clamp(32px,3.6vw,64px);line-height:1.04;letter-spacing:-.03em}
.h2>span{display:block;text-wrap:balance}
.lede{max-width:54ch;margin-top:20px;color:var(--mute);font-size:var(--fs);line-height:var(--lh)}

/* ---------- motion: reveal on scroll (content stays visible without JS) ---------- */
/* reveal: fade and lift. Blur is reserved for the hero (it is costly to animate on every block) */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity var(--rv-t) ease,transform var(--rv-m) var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.h2 .bw{display:inline-block;will-change:opacity,transform}
.js .h2 .bw{opacity:0;transform:translateY(.32em);transition:opacity var(--rv-t) ease,transform var(--rv-m) var(--ease);transition-delay:calc(var(--d,0s) + var(--i) * var(--rv-s))}
.js .h2.in .bw{opacity:1;transform:none}
.js .zoom img{transform:scale(1.16);transition:transform 2.6s var(--ease)}
.js .zoom.in img{transform:scale(1)}
.par{will-change:transform;transform:translate3d(0,var(--py,0px),0)}

/* ---------- buttons and links ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:16px 24px;background:var(--paper);color:var(--graphite);font-size:15px;font-weight:600;overflow:hidden;isolation:isolate;transition:color .4s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--brass);transform:translateY(101%);transition:transform .6s var(--ease)}
.btn:hover::before{transform:none}
.btn:hover .ic{transform:translateX(4px)}
.btn.soft{background:var(--tint2);color:var(--paper);transition:color .4s var(--ease),background .4s}
.btn.soft::before{background:var(--paper)}
.btn.soft:hover{color:var(--graphite)}
.lnk{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;background:linear-gradient(var(--brass),var(--brass)) 0 100%/100% 1px no-repeat;padding-bottom:4px;transition:background-size .5s var(--ease)}
.lnk:hover{background-size:100% 100%;color:var(--graphite)}
.lnk:hover .ic{transform:translateX(4px)}
.mini{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:15px;color:var(--mute);white-space:nowrap;transition:color .4s}
.mini:hover{color:var(--paper)}
.mini.u{padding-bottom:3px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:color .4s,background-size .6s var(--ease)}
.mini.u:hover{background-size:100% 1px}

/* ---------- header ---------- */
.hd{position:fixed;z-index:50;inset:0 0 auto 0;height:var(--nav);color:var(--paper);transition:background .5s var(--ease),backdrop-filter .5s;animation:hdin var(--rv-m) .1s var(--ease) both}
@keyframes hdin{from{opacity:0;filter:blur(10px);transform:translateY(-24px)}}
/* page to page: the browser crossfades the pages (cross-document view transition; Chrome/Edge 126+, Safari 18.2+, others just navigate). The header keeps its own layer, so it stays put,
   and does not replay its fade-in on arrival (.vt is set in the head by the pagereveal event, only when a transition is running).
   Browsers without cross-document transitions (Firefox) skip the fade-in from the second page of a visit on: .seen is set in the head from sessionStorage. */
@media(prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
.hd{view-transition-name:hd}
.vt .hd,.seen .hd{animation:none}
.hd .in{height:100%;display:flex;align-items:center;gap:clamp(24px,3vw,56px)}
.hd .logo img{height:21px;width:auto}
.hd nav{margin-left:auto}
.hd nav ul{display:flex;gap:clamp(22px,2.4vw,40px);font-size:15px;font-weight:500}
.hd nav a{display:block;position:relative;opacity:.8;padding:8px 0;transition:opacity .3s}
.hd nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.hd nav a:hover,.hd nav a[aria-current]{opacity:1}
.hd nav a:hover::after,.hd nav a[aria-current]::after{transform:none}
.hd .btn{padding:12px 20px;font-size:14px}
/* language picker, SK | EN: the page in the other language is one link away (separate URLs, en/ holds the English pages) */
.hd .lang{display:flex;align-items:center;font-size:14px;font-weight:500;letter-spacing:.02em}
.hd .lang a{position:relative;padding:8px 0;opacity:.6;transition:opacity .3s}
.hd .lang a+a{margin-left:20px}
.hd .lang a+a::before{content:"";position:absolute;left:-10px;top:50%;height:12px;margin-top:-6px;border-left:1px solid currentColor;opacity:.5}
.hd .lang a:hover,.hd .lang a[aria-current]{opacity:1}
.hd.solid,.hd.open{background:rgba(18,20,21,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.menu{display:none;width:44px;height:44px;place-items:center;margin-right:-10px}
.menu svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.menu .x,.hd.open .menu .b{display:none}
.hd.open .menu .x{display:block}
@media(max-width:900px){
  .hd .btn{display:none}
  .hd .lang{margin-left:auto}
  .menu{display:grid;margin-left:0}
  .hd nav{position:absolute;inset:var(--nav) 0 auto 0;margin:0;background:var(--deep);display:none}
  .hd.open nav{display:block}
  .hd nav ul{flex-direction:column;gap:0;padding:8px var(--pad) 24px;font-size:20px}
  .hd nav a{padding:14px 0;opacity:1}
}
@media(min-width:901px){.hd nav .home{display:none}}   /* the logo is the home link on desktop; the phone menu lists it too */

/* ---------- hero: KV-4, M82, logo outro, loop ---------- */
.hero{position:relative;height:var(--hh);min-height:480px;overflow:hidden;background:var(--graphite);color:var(--paper)}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.8s cubic-bezier(.4,0,.2,1);cursor:pointer}
.hero .slide.on{opacity:1}
/* Slow push-in at constant speed, running for the whole visible time including the fade-out (.leaving keeps the same
   animation alive, so it never stops dead). An ease-out here crawls at the end and the browser shows it as steps. */
.hero .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;transform:scale3d(1.1,1.1,1);will-change:transform;backface-visibility:hidden}
.hero .slide.on .ph,.hero .slide.leaving .ph{animation:kb 10.8s linear forwards}
@keyframes kb{from{transform:scale3d(1.1,1.1,1)}to{transform:scale3d(1,1,1)}}
/* phones: a shorter hero shows more of the wide photo, and each slide's --ox (set in index.html) centres the crop on its product; js/site.js reads the same value for the canvas zoom */
@media(max-width:900px){.hero{height:66vh}.hero .ph{object-position:var(--ox,50%) 62%}}
/* canvas zoom (js/site.js): the canvas takes over from the <img>, which stays for no-JS, screen readers and weak devices */
.hero .cv{position:absolute;inset:0;width:100%;height:100%}
.hero .slide.cv-on .ph:not(.sharp){opacity:0;animation:none;will-change:auto}
.hero .slide::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(16,17,19,.55),transparent 55%),linear-gradient(180deg,rgba(16,17,19,.5),transparent 24%)}
.hero .slide.r::before{background:linear-gradient(270deg,rgba(16,17,19,.7),transparent 55%),linear-gradient(180deg,rgba(16,17,19,.5),transparent 24%)}
.hero .slide::after{content:"";position:absolute;inset:auto 0 0 0;height:22%;z-index:1;background:linear-gradient(0deg,var(--graphite),transparent);pointer-events:none}
.hero .cap{position:absolute;z-index:5;left:var(--pad);bottom:clamp(40px,9vh,120px);margin:0;max-width:none;font-weight:600;font-size:clamp(36px,calc(22px + 2.6vw),84px);line-height:1;letter-spacing:-.03em;opacity:0;transform:translateY(16px);transition:opacity 1.2s ease .35s,transform 1.4s var(--ease) .35s}
.hero .slide.on .cap{opacity:1;transform:none}
.hero .slide.r .cap{left:auto;right:var(--pad);text-align:right}
/* research slide: the sharp lab photo racks out of focus while the title arrives word by word (focus pull).
   Both photos are pre-dimmed in the files, because the zoom is drawn on a canvas. The sharp one stays a plain <img> on top of the canvas and fades out. */
.hero .capw{position:absolute;z-index:5;left:0;right:0;top:50%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(14px,2.2vh,26px);padding-inline:var(--pad);transform:translateY(-50%);pointer-events:none}
.hero .capw .cap{position:static;max-width:none;font-size:clamp(36px,calc(22px + 2.6vw),84px);line-height:1.05;letter-spacing:-.035em;opacity:1;transform:none;transition:none}   /* title: 1920px -> 72px, never past 84px, calm on 4K */
.hero .capw .bw{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(.32em);transition:opacity var(--rv-t) ease,filter var(--rv-t) ease,transform var(--rv-m) var(--ease)}
.hero .slide.on .capw .bw{opacity:1;filter:none;transform:none;transition-delay:calc(.45s + var(--i) * 55ms)}
.hero .capw .sub{margin:0;max-width:44ch;color:rgba(242,240,235,.8);font-size:clamp(15px,calc(12px + .45vw),21px);line-height:1.55;opacity:0;filter:blur(10px);transform:translateY(24px);transition:opacity var(--rv-t) ease,filter var(--rv-t) ease,transform var(--rv-m) var(--ease)}
.hero .slide.on .capw .sub{opacity:1;filter:none;transform:none;transition-delay:.78s}
.hero .slide.rd.on .sharp,.hero .slide.rd.leaving .sharp{animation:kb 10.8s linear forwards,fo 1.7s ease .3s forwards}
@keyframes fo{to{opacity:0}}
/* leaving a slide: captions only fade, they never slide or blur on the way out */
.hero .slide.leaving>.cap{opacity:0;transform:none;transition:opacity .9s ease}
.hero .slide.leaving .capw .bw,.hero .slide.leaving .capw .sub{opacity:0;filter:none;transform:none;transition:opacity .9s ease;transition-delay:0s}
.hero .slide.rd::before{background:radial-gradient(ellipse 62% 56% at 50% 50%,rgba(16,17,19,.55),transparent 78%),linear-gradient(180deg,rgba(16,17,19,.5),transparent 24%)}
@media(prefers-reduced-motion:reduce){.hero .slide.rd .sharp{display:none}.hero .capw .bw,.hero .capw .sub{opacity:1;filter:none;transform:none;transition:none}}
/* outro: the original wordmark scans up, then a brass beam sweeps the descriptor words in (mockups/logo-intro-speeds-pages.html, variant "Sweep"), start delay halved: the whole sequence runs 0.45 s earlier */
@property --p{syntax:"<percentage>";inherits:true;initial-value:0%}
.hero .slide.lg{background:var(--graphite)}
.hero .slide.lg::before{background:radial-gradient(ellipse 50% 38% at 50% 50%,rgba(16,17,19,.45),transparent 75%),radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(10,11,12,.5) 100%),linear-gradient(180deg,rgba(16,17,19,.5),transparent 24%)}
.hero .slide.lg .ph{object-position:50% 60%}
.hero .slide.lg.on .ph,.hero .slide.lg.leaving .ph{animation-duration:7.6s}
.hero .art{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:min(52vw,760px);aspect-ratio:1400/279;--p:0%}
@media(max-width:900px){.hero .art{width:80vw}}   /* phones: the wordmark is the whole slide, 52vw reads too small */
.hero .art img{position:absolute;left:0;top:0;width:100%;height:100%}
.hero .topw{position:absolute;inset:0 0 15.4% 0;overflow:hidden;clip-path:inset(100% 0 0 0)}
.hero .topw img{height:auto}
.hero .scan{position:absolute;left:-2%;right:-2%;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--brass) 20%,var(--brass) 80%,transparent);box-shadow:0 0 18px 2px rgba(166,138,75,.3);opacity:0}
.hero .desc{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.hero .wd{position:absolute;inset:0;opacity:0;transform:translateY(7px);filter:blur(3px)}
.hero .wd img{clip-path:inset(84.6% var(--r) 0 var(--l))}
.hero .beam{position:absolute;left:var(--p);top:81%;bottom:-7%;width:2px;margin-left:-1px;background:var(--brass);box-shadow:0 0 12px 3px rgba(166,138,75,.3),0 0 38px 6px rgba(166,138,75,.3);opacity:0}
@keyframes lg-scan{to{clip-path:inset(0 0 0 0)}}
@keyframes lg-scanline{0%{bottom:0;opacity:1}85%{opacity:1}100%{bottom:100%;opacity:0}}
@keyframes lg-beam{0%{--p:0%;animation-timing-function:cubic-bezier(.35,.1,.25,1)}100%{--p:100.6%}}
@keyframes lg-beamfade{0%{opacity:1}96%{opacity:1}100%{opacity:0}}
@keyframes lg-settle{to{opacity:1;transform:none;filter:none}}
@keyframes lg-cool{to{opacity:0}}
.hero .slide.lg.on .topw,.hero .slide.lg.leaving .topw{animation:lg-scan 1s cubic-bezier(.65,0,.2,1) .45s forwards}
.hero .slide.lg.on .scan,.hero .slide.lg.leaving .scan{animation:lg-scanline 1s cubic-bezier(.65,0,.2,1) .45s forwards}
.hero .slide.lg.on .art,.hero .slide.lg.leaving .art{animation:lg-beam 2s linear 1.7s forwards}
.hero .slide.lg.on .beam,.hero .slide.lg.leaving .beam{animation:lg-beamfade 2s linear 1.7s forwards}
.hero .slide.lg.on .wd,.hero .slide.lg.leaving .wd{animation:lg-settle .7s cubic-bezier(.16,1,.3,1) calc(var(--t) - .45s) forwards}
.hero .slide.lg.on .wd .hot,.hero .slide.lg.leaving .wd .hot{animation:lg-cool 1.6s ease calc(var(--t) - .45s) forwards}
/* the logo leaves 0.5 s before the photo does (slide fade-out is 1.8 s) */
.hero .slide.lg.leaving .art{opacity:0;transition:opacity 1.3s cubic-bezier(.4,0,.2,1)}
/* progress: one thin segment per slide, the active one fills over its duration */
.ind{position:absolute;z-index:10;left:var(--pad);bottom:clamp(18px,3.6vh,38px);display:flex;gap:8px}
.ind{transition:opacity 1.2s ease .3s}
.js .hero.welcome .ind{opacity:0;pointer-events:none;transition:none}
.ind button{position:relative;width:clamp(36px,4vw,64px);height:20px}
.ind button::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(242,240,235,.28)}
.ind button i{position:absolute;left:0;top:50%;height:2px;margin-top:-1px;width:100%;background:var(--paper);transform:scaleX(0);transform-origin:0 50%}
.ind button.on i{animation:fill var(--d,4500ms) linear forwards}
@keyframes fill{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.hero .topw,.hero .desc{clip-path:none}.hero .wd{opacity:1;transform:none;filter:none}.hero .wd .hot,.hero .beam,.hero .scan{display:none}.ind button.on i{transform:scaleX(1)}}

/* ---------- statement under the hero: words fade in and lift, one after another ---------- */
.stt{position:relative;padding-block:clamp(170px,22vw,380px)}
.stt+.sec{padding-top:0}
.stt .wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.stt .s{margin:0;max-width:19ch;font-weight:600;font-size:clamp(34px,4.9vw,86px);line-height:1.08;letter-spacing:-.04em;text-wrap:balance}
.stt .bw{display:inline-block;will-change:opacity,transform}
.js .stt .bw{opacity:0;transform:translateY(.32em);transition:opacity var(--rv-t) ease,transform var(--rv-m) var(--ease);transition-delay:calc(var(--i) * var(--rv-s))}
.js .stt.in .bw{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .stt .bw{opacity:1;filter:none;transform:none;transition:none}}

/* ---------- products: two feathered scene panels ----------
   Every photo fades out on all four sides (intersected masks), so no edge of a scene ever shows. The panels overlap and
   cross-blend, so the seam between them keeps the wide fade (--l / --r) while the outer edges only get a short one (--o, --v).
   Images keep a fixed size: a panel only reveals more or less of its photo, nothing rescales while it opens.
   The two scenes share horizon, surface and light (docs/product-scene-wide-prompts.md), so they read as one table. */
@keyframes kb2{to{transform:scale3d(1,1,1)}}
.prods{display:flex;max-width:1280px;height:clamp(300px,38vw,470px);margin-inline:auto}
.prod{position:relative;flex:1 1 0;min-width:0;transition:flex-grow 1.5s var(--ease)}
.prod+.prod{margin-left:-7%}
.prod:hover,.prod:focus-visible{flex-grow:1.55;z-index:2}
.prods .ph{--o:4%;--v:12%;--l:var(--o);--r:15%;position:absolute;inset:0;overflow:hidden;pointer-events:none;transition:opacity 1.2s var(--ease),filter 1.2s var(--ease);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--l),#000 calc(100% - var(--r)),transparent),linear-gradient(180deg,transparent,#000 var(--v),#000 calc(100% - var(--v)),transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 var(--l),#000 calc(100% - var(--r)),transparent),linear-gradient(180deg,transparent,#000 var(--v),#000 calc(100% - var(--v)),transparent);mask-composite:intersect}
.prod+.prod .ph{--l:15%;--r:var(--o)}
.prods .ph img{position:absolute;top:0;left:50%;width:820px;max-width:none;height:100%;margin-left:-410px;object-fit:cover;object-position:50% 60%;transform:scale3d(1.07,1.07,1);will-change:transform;backface-visibility:hidden}
.prods.in .ph img{animation:kb2 14s linear forwards}
.prods:hover .prod:not(:hover) .ph{opacity:.5;filter:saturate(.7)}
.prods:hover .prod:not(:hover) .ovc{opacity:.6}
.prods .ovc{position:absolute;z-index:3;left:12%;bottom:15%;display:flex;flex-direction:column;align-items:flex-start;gap:10px;transition:opacity 1s var(--ease)}
.prods .nm{font-size:clamp(20px,1.7vw,28px);font-weight:650;letter-spacing:-.025em;line-height:1.1}
.prods .go{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:var(--mute);transition:color .4s}
.prod:hover .go{color:var(--paper)}
.prod:hover .go .ic{transform:translateX(5px);color:var(--brass)}
@media(max-width:800px){
  .prods{flex-direction:column;height:auto}
  .prod{flex:none;height:340px}.prod+.prod{margin:-20px 0 0}
  .prods .ph{--l:15%;--r:15%;--o:15%;--v:24%;bottom:72px}   /* photo ends above the label strip, so the text never lies on the product */
  .prods .ovc{left:20px;bottom:16px}
  .prods .ph img{left:0;width:100%;margin:0}
}
@media(prefers-reduced-motion:reduce){.prods.in .ph img{animation:none}}

/* ---------- capabilities showcase: list and crossfading photo ---------- */
/* section background: blurred photo of the selected item, full width, crisp edges */
.cap-sec{isolation:isolate;overflow:hidden;padding-block:clamp(96px,12vw,204px)}
.cap-sec .wrap{max-width:1900px}
.cap-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;box-shadow:inset 0 1px 0 rgba(242,240,235,.16),inset 0 -1px 0 rgba(242,240,235,.16)}
.cap-bg img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 55%;opacity:0;z-index:0;transition:opacity 1.6s ease;will-change:opacity}   /* blur, desaturation and darkening are baked into public/bg/*.jpg (originals in assets-src/bg) */
/* plain fade: the new photo comes in on top of the old one (js raises its z-index), nothing moves or zooms. An older photo is only dropped (.off, instantly) once the newest one is fully opaque. */
.cap-bg img.on{opacity:1}
.cap-bg img.off,.stage img.off{transition:none}
.cap-bg .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,28,30,.9),rgba(26,28,30,.5) 52%,rgba(26,28,30,.3)),radial-gradient(ellipse 85% 75% at 50% 50%,transparent 45%,rgba(26,28,30,.6))}
@media(max-width:900px){.cap-bg .veil{background:linear-gradient(90deg,rgba(26,28,30,.75),rgba(26,28,30,.5)),radial-gradient(ellipse 85% 75% at 50% 50%,transparent 45%,rgba(26,28,30,.6))}}
@media(prefers-reduced-motion:reduce){.cap-bg img,.stage img{transition-duration:.3s}}
.show{display:grid;grid-template-columns:5fr 7fr;gap:clamp(48px,7.2vw,144px);align-items:center}   /* the left column has a fixed height, so the photo stays centred against it */   /* heading and photo start on the same line: no staircase */
.show .l{min-height:var(--colh,0)}   /* the left column never changes height: JS sets --colh (not --lh, the line-height token) to its tallest state, so switching items cannot shrink the section */
.show .l .lede{margin-bottom:clamp(38px,4.3vw,67px)}
.cap-sec .h2{font-size:clamp(38px,4.3vw,77px)}
.cap-sec .lede{font-size:clamp(20px,1.5vw,25px)}
.show .l.measure,.show .l.measure *{transition:none!important}
.caps li{position:relative;padding:22px 0 24px;cursor:default}
.caps h3{font-size:clamp(22px,1.86vw,31px);font-weight:600;letter-spacing:-.02em;line-height:1.25;color:rgba(242,240,235,.34);transition:color .7s var(--ease),transform .8s var(--ease)}
.caps li.on h3{color:var(--paper);transform:translateX(10px)}
.caps li:hover h3{color:rgba(242,240,235,.75)}
.caps li.on:hover h3{color:var(--paper)}
.caps .d{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .8s var(--ease)}
.caps li.on .d,.caps li.m .d{grid-template-rows:1fr}
.caps .d p{line-height:var(--lh);min-height:0;overflow:hidden;color:var(--mute);max-width:50ch;font-size:var(--fs);opacity:0;transition:opacity .8s var(--ease);padding:12px 0 0 10px}
.caps li.on .d p{opacity:1;transition-delay:.1s}
.caps .bar{position:absolute;left:10px;right:0;bottom:0;height:2px;background:var(--tint2);opacity:0;transition:opacity .5s}
.caps li.on .bar{opacity:1}
.caps .bar i{display:block;height:100%;width:100%;background:var(--brass);transform:scaleX(0);transform-origin:left}
.caps li.on .bar i{animation:fill var(--dur,5.2s) linear forwards}
.caps:hover li.on .bar i{animation-play-state:paused}
@keyframes fill{to{transform:none}}
.stage{position:relative;aspect-ratio:5/4;overflow:hidden;border-radius:2px;background:var(--steel);box-shadow:0 50px 100px -40px rgba(0,0,0,.7)}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:0;transition:opacity 1.26s ease;will-change:opacity}
.stage img.on{opacity:1}
.stage img.fit{object-fit:contain;padding:14%;background:radial-gradient(circle at 50% 50%,#3b3f43,#1c1e20)}
.stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(18,20,21,.55));pointer-events:none}
.capseg{display:none}
@media(max-width:900px){
  .show{grid-template-columns:minmax(0,1fr)}
  /* phones: a swipeable row of cards (photo, title, text) instead of the list and the separate photo. The photo is a background of the item, so no second copy of the markup. */
  .show .l{min-height:0;min-width:0}
  .stage{display:none}
  .caps{display:flex;gap:12px;margin-inline:calc(-1*var(--pad));padding-inline:var(--pad);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none;overscroll-behavior-x:contain}
  .caps::-webkit-scrollbar{display:none}
  .caps li{flex:0 0 min(84%,440px);padding:0;cursor:default;scroll-snap-align:start}
  .caps li:last-child{scroll-snap-align:end}
  .caps li::before{content:"";display:block;aspect-ratio:4/3;border-radius:2px;background:var(--steel) center/cover}
  .caps li:nth-child(1)::before{background-image:url("../public/stage/rd-stages-kv4-700.jpg")}
  .caps li:nth-child(2)::before{background-image:url("../public/stage/cutaway-kv4-700.jpg")}
  .caps li:nth-child(3)::before{background-image:url("../public/stage/pallet-700.jpg")}
  .caps li:nth-child(4)::before{background-image:url("../public/stage/mill-700.jpg")}
  .caps li:nth-child(5)::before{background-image:url("../public/stage/problem-solving-700.jpg")}
  .caps h3,.caps li:hover h3,.caps li.on h3,.caps li.on:hover h3{margin-top:18px;font-size:24px;color:var(--paper);transform:none}
  .caps .d{grid-template-rows:1fr}
  .caps .d p{opacity:1;padding:8px 0 0;font-size:17px}
  .caps .bar{display:none}
  .capseg{display:flex;gap:6px;margin-top:28px}
  .capseg button{position:relative;flex:1;height:3px;border-radius:2px;background:rgba(242,240,235,.2)}
  .capseg button::before{content:"";position:absolute;inset:-14px 0}
  .capseg i{position:absolute;inset:0;border-radius:2px;background:var(--paper);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
  .capseg button.on i{transform:none}
}

/* ---------- certificates ---------- */
/* certificates: two centred brass medals, no frames or dividers */
.cert-sec .wrap{text-align:center}
.cert-sec .lede{margin-inline:auto}
.certs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,80px);max-width:1100px;margin:clamp(56px,7vw,110px) auto 0}
.cert{display:flex;flex-direction:column;align-items:center}
.cert .em{display:block;width:clamp(96px,8.4vw,128px);height:auto;margin-bottom:clamp(28px,3.4vw,44px);filter:drop-shadow(0 14px 18px rgba(0,0,0,.4));transition:transform 1.2s var(--ease)}
.cert:hover .em{transform:translateY(-6px) scale(1.03)}
.cert h3{font-size:clamp(26px,2.5vw,40px);font-weight:650;letter-spacing:-.028em;line-height:1.08;text-wrap:balance}
.cert p{line-height:var(--lh);font-size:var(--fs);margin-top:14px;color:var(--mute);max-width:34ch}
/* embossed gold icons (public/icons/cert-*.png, transparent) replace the medals above; the art fills ~70% of the canvas, hence the negative margin */
.cert .ic2{display:block;width:clamp(140px,11.5vw,184px);height:auto;margin:-14px 0 clamp(8px,1.4vw,20px);transition:transform 1.2s var(--ease)}
.cert:hover .ic2{transform:translateY(-6px) scale(1.03)}
.cert-sec .all{margin-top:clamp(56px,6vw,96px)}
.certs .cert.wide{grid-column:1/-1;margin-top:clamp(32px,4vw,64px)}   /* all documents: below the two, centred */
.cert .go{margin-top:auto;padding-top:clamp(28px,3.4vw,48px)}
.cert .go a{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;padding-bottom:4px;background:linear-gradient(var(--brass),var(--brass)) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease)}
.cert .go a:hover{background-size:100% 1px}
.cert .go a:hover .ic{transform:translateX(4px)}
@media(max-width:900px){.certs{grid-template-columns:1fr;gap:72px}}
@media(prefers-reduced-motion:reduce){.cert .em,.cert .ic2{transition:none}}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,120px);align-items:start}
.reach{margin-top:clamp(28px,3vw,44px);display:grid;gap:8px}
.reach a{width:fit-content;font-size:clamp(26px,2.8vw,46px);font-weight:600;letter-spacing:-.028em;line-height:1.15;background:linear-gradient(var(--brass),var(--brass)) 0 100%/100% 2px no-repeat;padding-bottom:4px;transition:background-size .5s var(--ease),color .4s}
.reach a:hover{background-size:100% 100%;color:var(--graphite)}
.reach a.tel{background:none;font-size:clamp(20px,1.9vw,30px);color:var(--mute);padding:0}
.reach a.tel:hover{color:var(--paper)}
.addr{margin-top:clamp(36px,4vw,64px);display:grid;gap:26px}
.addr h3{font-size:16px;font-weight:600;margin-bottom:4px}
.addr p{color:#c2c4c5;font-size:16px;line-height:1.5}
.form{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:clamp(26px,3.2vw,56px);background:rgba(26,28,30,.78);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:2px;box-shadow:0 50px 100px -40px rgba(0,0,0,.8)}
.form .f{display:grid;gap:8px}
.form .w{grid-column:1/-1}
.form label{font-size:14px;font-weight:600}
.form label small{font-weight:400;color:var(--mute)}
.form input[type=text],.form input[type=email],.form input[type=tel],.form select,.form textarea{width:100%;padding:15px 16px;background:var(--tint2);border:0;border-bottom:2px solid transparent;border-radius:2px;color:var(--paper);transition:background .4s,border-color .5s var(--ease)}
.form textarea{min-height:160px;resize:vertical}
.form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.form select option{background:var(--graphite)}
.form input:hover,.form select:hover,.form textarea:hover{background:rgba(242,240,235,.11)}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;background:rgba(242,240,235,.12);border-bottom-color:var(--brass)}
.form .chk{display:flex;gap:12px;align-items:flex-start;color:var(--mute);font-size:14px;line-height:1.45;font-weight:400}
.form .chk input{margin-top:3px;width:18px;height:18px;accent-color:var(--brass);flex:none}
.form .chk a{color:var(--paper);background:linear-gradient(var(--brass),var(--brass)) 0 100%/100% 1px no-repeat}
.form .send{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.form .status{font-size:14px;color:var(--mute)}
.form .status.err{color:#ff8a8e}
.form .hpot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form button[disabled]{opacity:.6;cursor:progress}
@media(max-width:900px){.contact{grid-template-columns:1fr}.form{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.ft{background:var(--deep);color:var(--paper);padding-block:72px 36px;font-size:15px}
.ft .cols{display:grid;grid-template-columns:6fr 3fr 3fr;gap:40px}
.ft .co{margin-top:32px}
.ft .logo img{height:20px;width:auto}
.ft h2{font-size:15px;font-weight:600;margin-bottom:14px}
.ft li+li{margin-top:9px}
.ft a{transition:color .3s}
.ft a:hover{color:var(--brass)}
.ft p,.ft dt{color:var(--mute)}
.ft dl{display:grid;grid-template-columns:auto 1fr;gap:7px 16px}
.ft .base{margin-top:56px;padding-top:24px;background:linear-gradient(90deg,rgba(242,240,235,.14),transparent) 0 0/100% 1px no-repeat;display:flex;justify-content:center;text-align:center;gap:12px 32px;flex-wrap:wrap;color:var(--mute);font-size:14px}
/* footer is static: no scroll reveal, on any page */
.js .ft .rv{opacity:1;filter:none;transform:none;transition:none}
@media(max-width:900px){.ft .cols{grid-template-columns:1fr 1fr}.ft .cols>:first-child{grid-column:1/-1}}
@media(max-width:560px){.ft .cols{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .rv,.js .h2 .bw{opacity:1;filter:none;transform:none}
  .par{transform:none}
}

/* ---------- inner pages ---------- */
.pg-head{padding-top:calc(var(--nav) + clamp(90px,10vw,170px));padding-bottom:clamp(40px,5vw,90px)}
.h2.h1{font-size:clamp(42px,5.4vw,96px);letter-spacing:-.04em;line-height:1.02}
.sec.tight{padding-block:clamp(56px,7vw,120px)}
.sec.cta{text-align:center}
.cta .h2{max-width:20ch;margin-inline:auto}
.cta .reach{justify-items:center}
.cta p{margin-top:clamp(28px,3vw,44px)}
.pi{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,120px);max-width:1280px;margin:clamp(40px,5vw,80px) auto 0}
.pi h3{font-size:clamp(24px,2.2vw,36px);font-weight:650;letter-spacing:-.028em;line-height:1.1}
.pi p{line-height:var(--lh);font-size:var(--fs);margin:12px 0 22px;color:var(--mute);max-width:40ch}
.pack{display:grid;grid-template-columns:7fr 5fr;gap:clamp(40px,6vw,120px);align-items:center}
.pack-ph{margin:0;border-radius:2px;overflow:hidden;box-shadow:0 50px 100px -40px rgba(0,0,0,.7)}
.pack-ph img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.facts{margin:clamp(28px,3vw,44px) 0 0;display:grid;grid-template-columns:auto 1fr;gap:14px 28px}
.facts dt{font-weight:650;font-size:clamp(20px,1.8vw,28px);letter-spacing:-.02em}
.facts dd{margin:0;color:var(--mute);align-self:center}
.dls{margin-top:clamp(28px,3vw,48px);border-top:1px solid rgba(242,240,235,.14)}
.dlr{display:grid;grid-template-columns:1fr auto auto;gap:clamp(16px,3vw,56px);align-items:center;padding:clamp(22px,2.4vw,34px) 0;border-bottom:1px solid rgba(242,240,235,.14)}
.dlr .t{font-size:clamp(22px,2vw,32px);font-weight:650;letter-spacing:-.025em}
.dlr .m{color:var(--mute);font-size:15px}
.dlr .g{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--mute);transition:color .4s}
.dlr:hover .g{color:var(--paper)}
.dlr:hover .g .ic{transform:translateX(4px);color:var(--brass)}
@media(max-width:900px){.pi,.pack{grid-template-columns:1fr}.dlr{grid-template-columns:1fr auto}.dlr .m{grid-column:1;grid-row:2}}

.prd-sec{scroll-margin-top:calc(var(--nav) - 20px)}
.prd-sec+.prd-sec{padding-top:0}
.prd{display:grid;grid-template-columns:6fr 5fr;gap:clamp(40px,6vw,120px);align-items:start}
.prd .info h3{font-size:18px;font-weight:650;margin:clamp(32px,3.4vw,52px) 0 16px}
.prd .info .lede{max-width:46ch}
.specs{margin:0;display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:12px clamp(24px,3vw,48px)}
.specs dt{color:var(--mute)}
.specs dd{margin:0;font-weight:500}
.prd .info>p:last-child{margin-top:clamp(36px,4vw,60px)}
.prd .vis{position:sticky;top:calc(var(--nav) + 32px);display:grid;gap:20px}
.plate{margin:0;background:#e6e6e4;border-radius:2px;overflow:hidden;box-shadow:0 50px 100px -40px rgba(0,0,0,.7)}
.plate img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.plate.tall img{aspect-ratio:4/5}
@media(max-width:900px){.prd{grid-template-columns:1fr}.prd .vis{position:static}}

#formular{scroll-margin-top:var(--nav)}
/* contact map: MapLibre, light OpenFreeMap tiles (same as Olba), brass pin */
/* footer stays at the bottom on tall screens; the map block is centred in the space between nav and footer (dvh is divided by the .fit zoom) */
.kt-page{min-height:calc(100dvh / var(--z));display:flex;flex-direction:column}
.kt-page>main{flex:1;display:flex;flex-direction:column;justify-content:center}
.kt-sec{padding-top:calc(var(--nav) + 24px);padding-bottom:24px}
.kt-box{position:relative;width:calc(100% - 48px);max-width:2400px;margin:0 auto}
.kt-ov{position:relative;padding:24px;display:flex;justify-content:flex-start;align-items:center;min-height:min(1000px,max(0px,calc(100dvh / var(--z) - var(--nav) - 360px)));pointer-events:none}
.kt-card{pointer-events:auto;width:min(620px,100%);display:flex;flex-direction:column;gap:20px;padding:28px 32px;background:var(--graphite);border-radius:2px;box-shadow:0 30px 80px -24px rgba(0,0,0,.6)}
.kt-card .kt-top .h2{font-size:clamp(30px,2.8vw,42px);letter-spacing:-.035em}
.kt-lead{margin-top:8px;font-size:var(--fs);line-height:var(--lh);color:var(--mute)}
.kt-card .reach,.kt-card .addr{margin-top:0}
.kt-card .reach{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 32px}
.kt-card .reach a{font-size:clamp(22px,1.9vw,28px)}
.kt-card .reach a.tel{font-size:clamp(22px,1.9vw,28px);color:var(--paper);padding-bottom:4px;background:linear-gradient(var(--brass),var(--brass)) 0 100%/100% 2px no-repeat}
.kt-card .reach a.tel:hover{background-size:100% 100%;color:var(--graphite)}
.kt-card .addr{grid-template-columns:1fr 1fr;gap:20px}
.kt-card .addr h3{font-size:16px;color:var(--paper)}
.kt-card .addr p{font-size:16px;line-height:1.45;color:var(--paper)}
.kt-card .form{gap:14px 20px;padding:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-radius:0}
.kt-card .form .f{gap:6px}
.kt-card .form label{font-size:14px}
.kt-card .form input[type=text],.kt-card .form input[type=email],.kt-card .form input[type=tel],.kt-card .form select,.kt-card .form textarea{padding:11px 14px;font-size:16px}
.kt-card .form textarea{min-height:84px}
.kt-card .form .chk{font-size:14px}
.kt-card .form .btn{padding:13px 22px}
.kt-clip{position:absolute;inset:0;overflow:hidden;border-radius:2px;background:#EAE6DE}
.js .kt-clip.rv{transform:none}   /* the map is a full-bleed backdrop: it fades and focuses in, it must not lift or the page background shows at its top edge */
.kt-map,.kt-map.maplibregl-map{position:absolute;inset:0}
.kt-ctl{position:absolute;z-index:3;top:16px;right:64px;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px}
.kt-seg{display:flex;padding:4px;gap:2px;background:var(--paper);border-radius:999px;box-shadow:0 8px 24px -8px rgba(18,20,21,.45)}
.kt-seg button{border:0;background:none;color:#3A3732;font-weight:600;font-size:14px;line-height:1;font-family:inherit;padding:10px 18px;border-radius:999px;cursor:pointer;transition:background 200ms,color 200ms}
.kt-seg button[aria-pressed="true"]{background:var(--graphite);color:var(--paper)}
.kt-chip,.kt-open{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--paper);color:var(--graphite);font-weight:600;font-size:14px;line-height:1;font-family:inherit;padding:12px 18px;border-radius:999px;cursor:pointer;text-decoration:none;box-shadow:0 8px 24px -8px rgba(18,20,21,.45)}
.kt-chip:hover,.kt-open:hover{background:#fff}
.kt-pin{position:relative;width:24px;height:24px;cursor:pointer}
.kt-pin i{position:absolute;inset:0;border-radius:50%;background:var(--brass);border:3px solid #fff;box-shadow:0 2px 10px rgba(18,20,21,.4)}
.kt-pin::before{content:"";position:absolute;inset:-12px;border-radius:50%;background:rgba(166,138,75,.28);animation:kt-ping 2.4s ease-out infinite}
@keyframes kt-ping{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.4);opacity:0}}
.maplibregl-popup-content{background:var(--paper);color:var(--graphite);border-radius:2px;padding:16px 18px;box-shadow:0 14px 40px -12px rgba(18,20,21,.5);font-family:inherit;min-width:230px}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:var(--paper)}
.maplibregl-popup-close-button{font-size:20px;color:#5C574F;padding:4px 8px}
.kt-pop strong{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}
.kt-pop span{display:block;margin-top:2px;font-size:14px;line-height:1.45;color:#5C574F}
.kt-pop a{display:inline-block;margin-top:10px;font-size:14px;font-weight:600;color:#7A6330;text-decoration:none}
.kt-pop a:hover{text-decoration:underline}
.kt-sec.in-page{padding-block:clamp(40px,5vw,80px)}
.kt-sec.in-page .kt-ov{min-height:clamp(540px,calc(78dvh / var(--z)),820px)}
/* product pages: form left, small map flush to the right edge. The text block starts where .wrap content starts (half of --max from the centre line). */
.ct{padding-block:clamp(56px,7vw,110px)}
.ct-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:stretch}
.ct-tx{display:grid;gap:26px;align-content:start}
.ct-tx .h2{font-size:clamp(26px,2.4vw,36px);line-height:1.08;text-wrap:balance}
section.ct .reach{margin-top:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 32px}
section.ct .reach a,section.ct .reach a.tel{font-size:clamp(20px,1.8vw,26px);color:var(--paper);padding-bottom:4px;background:linear-gradient(var(--brass),var(--brass)) 0 100%/100% 2px no-repeat}
section.ct .reach a:hover,section.ct .reach a.tel:hover{background-size:100% 100%;color:var(--graphite)}
.ct .form{gap:16px 20px;padding:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-radius:0}
.ct .form .f{gap:6px}
.ct .form textarea{min-height:96px}
.ct-m{position:relative;min-height:520px;background:#EAE6DE;overflow:hidden;border-radius:2px}
.ct-m .kt-open{position:absolute;z-index:3;top:12px;right:12px}
.ct-cap{position:absolute;z-index:3;left:12px;bottom:12px;max-width:calc(100% - 24px);background:var(--paper);color:var(--graphite);padding:12px 14px;border-radius:2px;font-size:14px;line-height:1.4;box-shadow:0 8px 24px -8px rgba(18,20,21,.5)}
.ct-cap b{display:block;font-weight:600}
.ct-cap span{color:#5c574f}
@media(max-width:900px){.ct-in{grid-template-columns:1fr}.ct-m{min-height:320px}}
@media(max-width:900px){.kt-box{width:100%}.kt-sec.in-page .kt-ov{min-height:0}.kt-clip{position:relative;height:340px;border-radius:0}.kt-ov{padding:0;display:block;min-height:0}.kt-card{width:auto;border-radius:0;box-shadow:none;padding:24px 20px}.kt-card .addr{grid-template-columns:1fr}.kt-ctl{top:12px;right:56px}}
/* phones: the map keeps only the address (popup / caption) and the +/- buttons. Orbit still stops on first touch (js/map.js). */
@media(max-width:900px){.kt-ctl,.ct-m .kt-open,.maplibregl-ctrl-group button.maplibregl-ctrl-compass,.maplibregl-popup .maplibregl-popup-close-button,.kt-pop a{display:none}}
@media(prefers-reduced-motion:reduce){.kt-pin::before{animation:none}}

/* ammunition hub: a short welcome hero and the products as alternating rows (same slow zoom and soft photo edges as the home page cards) */
.qk{list-style:none;margin:0;padding:0;display:grid;gap:clamp(16px,3vw,48px)}
.qi{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:clamp(300px,33vw,450px)}
.qi .tx{grid-column:2;padding-left:clamp(0px,2vw,32px);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.qi.flip .tx{grid-column:1;grid-row:1;padding:0 clamp(0px,2vw,32px) 0 0}
.qi .ph{--l:3%;--r:30%;--v:14%;position:absolute;top:0;bottom:0;left:0;width:50%;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--l),#000 calc(100% - var(--r)),transparent),linear-gradient(180deg,transparent,#000 var(--v),#000 calc(100% - var(--v)),transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 var(--l),#000 calc(100% - var(--r)),transparent),linear-gradient(180deg,transparent,#000 var(--v),#000 calc(100% - var(--v)),transparent);mask-composite:intersect}
.qi.flip .ph{left:auto;right:0;--l:30%;--r:3%}
.qi .ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 60%;transform:scale3d(1.07,1.07,1);will-change:transform;backface-visibility:hidden}
.qi.in .ph img{animation:kb2 14s linear forwards}
.qi .t{font-size:clamp(26px,3vw,48px);font-weight:650;letter-spacing:-.03em;line-height:1.06}
.qi .d{color:var(--mute);max-width:34ch;font-size:var(--fs);line-height:var(--lh)}
.qi .go{display:inline-flex;align-items:center;gap:10px;margin-top:6px;font-weight:600;font-size:15px;color:var(--mute);transition:color .4s}
a.qi:hover .go,a.qi:focus-visible .go{color:var(--paper)}
a.qi:hover .go .ic{transform:translateX(5px);color:var(--brass)}
@media(max-width:800px){
  .qi,.qi.flip{display:block;min-height:0}
  .qi .ph,.qi.flip .ph{--l:8%;--r:8%;--v:20%;position:relative;width:100%;height:260px;margin-bottom:-10px}
  .qi .tx,.qi.flip .tx{padding:0}
  }
@media(prefers-reduced-motion:reduce){.qi.in .ph img{animation:none}}

/* pyrotechnic compositions: heading, lead and intro stacked on top; three department cards (photo above, text below) and one wide card for pressing.
   The three photos are crops of the client's four-panel collage (public/pyro/compositions.jpg): the image is drawn at 214% of the box so a divider-free quarter fills it. */
.pyro .h2{line-height:1.12;letter-spacing:-.022em}
.pz-hd{display:flex;flex-direction:column;gap:clamp(22px,2.2vw,34px);margin-bottom:clamp(52px,6vw,96px)}
.pz-hd .lead{color:var(--paper);font-size:clamp(20px,1.6vw,27px);font-weight:500;line-height:1.42;letter-spacing:-.01em;text-wrap:balance}
.pz-in{display:flex;flex-direction:column;gap:18px;margin-top:clamp(2px,.6vw,10px)}
.pz-in p,.pz-b p{color:var(--mute);font-size:var(--fs);line-height:var(--lh)}
.pz-in p{max-width:104ch}
.pyro{overflow-x:clip}
/* closing statement on the pellets photo: wide blurred background with feathered edges on all sides, capped in width so zooming out leaves a soft-edged block, not an edge-to-edge band */
.am-bg{position:relative;isolation:isolate;margin-top:clamp(78px,9.75vw,164px);margin-bottom:clamp(52px,6.5vw,110px);padding-block:clamp(160px,18vw,310px)}
.am-bg-fx{position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:min(100vw,2100px);transform:translateX(-50%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%),linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%),linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);mask-composite:intersect}
.am-bg-fx img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 62%;transform:scale(1.04);filter:blur(5px) brightness(.55)}
.am-st.am-ft{margin:0}
.am-st.am-ft p{max-width:50ch;font-size:clamp(22px,2.4vw,40px);line-height:1.34;text-shadow:0 2px 36px rgba(0,0,0,.55)}
.pz-dk{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.pz-c{position:relative;grid-column:span 2;display:flex;flex-direction:column;overflow:hidden;border-radius:6px;background:var(--steel);box-shadow:0 0 0 1px rgba(242,240,235,.12),0 34px 60px -40px rgba(0,0,0,.6);transition:box-shadow .6s var(--ease)}
.pz-c:hover{box-shadow:0 0 0 1px rgba(242,240,235,.12),0 60px 100px -44px rgba(0,0,0,.6)}
.js .pz-c.rv{transition:opacity var(--rv-t) ease,transform var(--rv-m) var(--ease),box-shadow .6s var(--ease);transition-delay:var(--d,0s),var(--d,0s),0s}
.pz-c::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.pz-c:hover::after{transform:none}
.pz-w{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.pz-ph{position:relative;flex:none;aspect-ratio:3/2;overflow:hidden;background:var(--deep)}
.pz-w .pz-ph{aspect-ratio:auto;min-height:clamp(340px,28vw,440px)}
.pz-ph .zm{position:absolute;inset:0}
.pz-ph img{position:absolute;left:0;top:0;width:214%;height:214%;max-width:none;object-fit:cover}
.pz-ph .q-tr{left:-114%}.pz-ph .q-bl{top:-114%}
.pz-w .pz-ph img{width:100%;height:100%}
.pz-b{display:flex;flex-direction:column;gap:14px;padding:clamp(24px,2.2vw,38px)}
.pz-w .pz-b{justify-content:center;gap:16px;padding:clamp(28px,3.6vw,64px)}
.pz-b h3{font-size:clamp(21px,1.75vw,29px);font-weight:600;letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
.pz-b b{color:#fff;font-weight:700}
.pz-ln{display:block;width:56px;height:2px;background:var(--brass)}
/* entrance: the whole card fades and lifts (the site's .rv); the brass line draws itself. The photos themselves never change size. */
.js .pz-c .pz-ln{transform:scaleX(0);transform-origin:left;transition:transform .3s}
.js .pz-c.in .pz-ln{transform:none;transition:transform 1.2s var(--ease) calc(var(--d,0s) + .6s)}
/* pellets photo band (markup commented out at the end of the pyro section since 2026-11-02): full-width band, the client's photo soft-focused (5 px) and dimmed to 60 %, fading into the page at top and bottom; the sentence centred on its dark middle */
/* .sec.pyro{padding-bottom:0}   was needed while the band closed the pyro section */
.pz-st{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(420px,36vw,640px);display:flex;align-items:center;justify-content:center;padding-inline:var(--pad);text-align:center}
.pz-st>img{position:absolute;inset:-24px;z-index:-2;width:calc(100% + 48px);height:calc(100% + 48px);max-width:none;object-fit:cover;object-position:50% 62%;filter:blur(5px) brightness(.6)}
.pz-st::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--graphite) 0,transparent 24%,transparent 76%,var(--graphite) 100%)}
.pz-st p{max-width:30ch;margin:0;padding-block:clamp(48px,6vw,96px);font-size:clamp(28px,3.3vw,52px);line-height:1.28;font-weight:500;letter-spacing:-.02em;color:rgba(242,240,235,.78);text-shadow:0 2px 36px rgba(0,0,0,.55);text-wrap:balance}
.pz-st .k{color:#fff}
@media(max-width:1000px){
  .pz-dk{display:flex;flex-direction:column}
  .pz-w{display:flex;flex-direction:column}
  .pz-w .pz-ph{aspect-ratio:3/2;min-height:0}
}
/* ammunition page: the opening statement under the hero, centred directly on the page, a short brass line under it; then the product cards */
.sec.tight.am-sec{padding-top:clamp(72px,8vw,140px)}
.am-st{display:flex;flex-direction:column;align-items:center;gap:clamp(30px,3vw,46px);margin-bottom:clamp(104px,11vw,190px);text-align:center}
.am-st p{max-width:30ch;color:var(--paper);font-size:clamp(26px,2.8vw,46px);line-height:1.28;font-weight:400;letter-spacing:-.022em;text-wrap:balance}
.am-st .k{font-weight:650}   /* the three emphases stand out by weight; the rest stays full colour, not dimmed */
.am-st.am-in p{max-width:44ch;font-size:clamp(22px,2.3vw,38px);line-height:1.34}   /* the long client intro in the same style, wider measure so it stays at 4-5 lines */
/* products page intro */
.intro{max-width:62ch;margin:0 auto clamp(40px,5vw,72px);text-align:center;color:var(--mute);font-size:var(--fs);line-height:var(--lh);text-wrap:balance}
/* about page: opening statement, then rows of heading (left) and text (right) */
.abt-lead{max-width:1100px;margin-inline:auto}
.abt-lead p:first-child{font-size:clamp(22px,2.2vw,34px);line-height:1.35;font-weight:500;letter-spacing:-.02em;color:var(--paper);text-wrap:pretty}
.abt-lead p+p{margin-top:24px;color:var(--mute);font-size:var(--fs);line-height:var(--lh);max-width:62ch}
.abt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start;max-width:1100px;margin:clamp(56px,7vw,110px) auto 0;padding-top:clamp(40px,5vw,80px);border-top:1px solid var(--tint2);scroll-margin-top:calc(var(--nav) + 24px)}
.abt-h h2{font-size:clamp(26px,2.6vw,42px);font-weight:600;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
.abt-tx p{color:var(--mute);font-size:var(--fs);line-height:var(--lh);max-width:56ch}
.abt-tx p+p{margin-top:18px}
.abt-tx .lead{color:var(--paper);font-size:clamp(19px,1.5vw,24px);font-weight:500;line-height:1.4}
@media(min-width:761px){.abt-h{position:sticky;top:calc(var(--nav) + 32px)}}
@media(max-width:760px){.abt{grid-template-columns:1fr;gap:20px}}

/* home page: 1.5x the space between sections (2026-11-02). Not scaled: the statement under the hero (already 170-380 px each side),
   the photo band of the capabilities section and the map section (their padding sits inside the photo / map, not between sections). */
.home .sec:not(.cap-sec){padding-block:clamp(120px,15vw,255px)}
.home .ab-rest{padding-top:clamp(165px,19.5vw,300px)}
.home .ab-sp+.ab-sp,.home .ab-sp+.ab-vals{margin-top:clamp(165px,19.5vw,285px)}

/* ammunition hero: the whole pallet photo (86vw, right-anchored) keeps the hero height; its left and right edges and the bottom fade out gradually in graphite, a progressive blur grows toward the left (title) and the bottom */
.pg-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:clamp(600px,90vh,960px);padding-top:var(--nav)}
.pg-hero .hp{position:absolute;z-index:-1;left:0;top:var(--nav);width:100%;height:calc(100% - var(--nav));display:flex;align-items:center;justify-content:flex-end}
.pg-hero .hi{position:relative;overflow:hidden;width:86vw;max-width:100%;aspect-ratio:1916/821;flex:none}
.pg-hero .hi>img{display:block;width:100%;height:100%;object-fit:cover;object-position:100% 62%}
.pg-hero .pb{position:absolute;inset:0;pointer-events:none}
.pg-hero .pb i,.pg-hero .pbb i{position:absolute;inset:0;-webkit-backdrop-filter:blur(var(--b));backdrop-filter:blur(var(--b));-webkit-mask-image:var(--m);mask-image:var(--m)}
.pg-hero .pbb{position:absolute;left:0;right:0;bottom:0;height:30%;z-index:0;pointer-events:none}
.pg-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;z-index:0;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(var(--gr),.15) 24%,rgba(var(--gr),.45) 50%,rgba(var(--gr),.8) 78%,var(--graphite))}
.pg-hero .hi::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,var(--graphite),transparent 10%,transparent 90%,var(--graphite)),linear-gradient(90deg,rgba(var(--gr),1) 0%,rgba(var(--gr),0.98) 6%,rgba(var(--gr),0.93) 12%,rgba(var(--gr),0.83) 20%,rgba(var(--gr),0.65) 28%,rgba(var(--gr),0.42) 36%,rgba(var(--gr),0.2) 44%,rgba(var(--gr),0.07) 52%,rgba(var(--gr),0) 58%,transparent 100%),linear-gradient(270deg,rgba(var(--gr),1) 0%,rgba(var(--gr),.6) 2%,rgba(var(--gr),.2) 6%,transparent 12%)}
.pg-hero .wrap{position:relative;z-index:2;padding-block:clamp(32px,4vw,64px)}
.pg-hero .tx{max-width:min(44%,620px)}
.pg-hero .lede{max-width:46ch}
/* phones: a 300 px photo band from the very top of the page (under the header) with the title on it, the lede below on the flat page */
@media(max-width:900px){
  .pg-hero{min-height:0;align-items:flex-start;padding-bottom:8px}
  .pg-hero .wrap{padding-top:0;padding-bottom:0}
  .pg-hero .tx{max-width:none}
  .pg-hero .tx>.h1{display:flex;align-items:flex-end;min-height:300px;padding-bottom:22px}
  .pg-hero .lede{margin-top:4px}
  .pg-hero .hp{top:0;bottom:auto;height:300px;align-items:stretch}
  .pg-hero .hi{width:100%;height:100%;aspect-ratio:auto}
  .pg-hero .hi>img{object-position:88% 60%}
  .pg-hero .pb,.pg-hero .pbb{display:none}
  .pg-hero::after{display:none}
  .pg-hero .hi::after{background:linear-gradient(180deg,rgba(var(--gr),.55) 0,rgba(var(--gr),.1) 34%,rgba(var(--gr),.35) 66%,var(--graphite) 100%)}
}

/* ---------- product pages (kv4.html, m82.html) ----------
   Photo hero, the interactive cutaway, dodacie a prepravne udaje, datasheet. The page is drawn on a 2133 css px wide canvas and scaled with CSS zoom:
   x0.8 from 1200px up (laptops, FullHD), natural size from 2300px (2K, 4K), same as the .fit pages (width: 100% below). */
.fit,.zz{--z:1;zoom:var(--z)}
@media(min-width:1200px){.fit,.zz{--z:.8}}
@media(min-width:2300px){.fit,.zz{--z:1}}
.fit{--hh:calc(75vh / var(--z))}   /* vh scales with zoom: keep the home hero at 75% of the real viewport */
.zz{font-size:16px}
.zz .h2{font-size:clamp(26px,2vw,36px);letter-spacing:-.025em}
.zz .h2.h1{font-size:clamp(34px,2.7vw,50px)}
.zz .lede{font-size:var(--fs);margin-top:16px}
.zz .sec{padding-block:clamp(56px,6vw,104px)}
.zz .btn{padding:14px 22px;font-size:14px}
.zz .mini{font-size:14px}
.zz .reach a{font-size:clamp(22px,2vw,34px)}.zz .reach a.tel{font-size:clamp(18px,1.5vw,24px)}
.zz .cta .h2{max-width:22ch}
.zz .ft{font-size:14px}
.m{padding-top:var(--nav)}
.sh{margin-bottom:clamp(24px,2.4vw,40px)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:clamp(22px,2.2vw,32px)}
/* hero: a smaller photo on the right that fades out on the left, so the text never lies on the product */
.hero3{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(360px,44vh,500px);display:flex;align-items:center;padding-top:var(--nav)}
.hero3 .ph3{position:absolute;z-index:-1;top:var(--nav);bottom:0;right:0;width:64%}
.hero3 .ph3 img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.hero3::before{content:"";flex:none;width:0;padding-bottom:24%}   /* photo box (64% wide) never flatter than ~2.66:1 on any screen, however short the text; padding % follows the page width, so it holds under zoom too */
@media(min-width:901px){   /* m82: same hero size as kv4, but the standing cylinder fills ~60% of the photo's height and cover shows only ~56% in this box */
  .hero3.tall .ph3{overflow:hidden}
  .hero3.tall .ph3 img{position:absolute;top:-29%;right:0;width:auto;height:149%;max-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%);mask-image:linear-gradient(90deg,transparent,#000 12%)}   /* rows ~19-87% visible, ~84% of the box wide; its left edge sits under the near-opaque side gradient */
  .hero3.tall .ph3::after{background:linear-gradient(180deg,var(--graphite),transparent 5%,transparent 95%,var(--graphite)),linear-gradient(90deg,rgba(var(--gr),1) 0%,rgba(var(--gr),.98) 6%,rgba(var(--gr),.93) 12%,rgba(var(--gr),.83) 20%,rgba(var(--gr),.65) 28%,rgba(var(--gr),.42) 36%,rgba(var(--gr),.2) 44%,rgba(var(--gr),.07) 52%,transparent 60%),linear-gradient(270deg,rgba(var(--gr),.9) 0%,rgba(var(--gr),.4) 3%,transparent 9%)}   /* top/bottom fades 5% instead of 14%, sides as kv4 */
}
.hero3 .ph3::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,var(--graphite),transparent 14%,transparent 86%,var(--graphite)),linear-gradient(90deg,rgba(var(--gr),1) 0%,rgba(var(--gr),.98) 6%,rgba(var(--gr),.93) 12%,rgba(var(--gr),.83) 20%,rgba(var(--gr),.65) 28%,rgba(var(--gr),.42) 36%,rgba(var(--gr),.2) 44%,rgba(var(--gr),.07) 52%,transparent 60%),linear-gradient(270deg,rgba(var(--gr),.9) 0%,rgba(var(--gr),.4) 3%,transparent 9%)}
.hero3 .wrap{position:relative;z-index:2;padding-block:clamp(24px,3vw,48px)}
.hero3 .tx{max-width:min(36%,540px)}
.hero3 .lede{max-width:none;color:rgba(var(--pr,242,240,235),.85)}
/* the cutaway: one transform on a layer that holds the render AND the pins, so they cannot drift apart; each pin scales back to keep its size (js/page.js) */
.pv .zm{position:relative;aspect-ratio:1.9;max-width:1000px;margin-inline:auto;overflow:hidden;border:1px solid rgba(242,240,235,.1);
  background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/64px 64px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/64px 64px,radial-gradient(ellipse 55% 85% at 50% 45%,#2a2e36 0%,#0b0c0f 78%)}
.pv .zl img{transition:opacity .6s var(--ease)}
.pv .zm.act .zl img{opacity:.72}
.pv .stg{position:absolute;inset:0}
.pv .zl{position:absolute;inset:0;transform:translate(0,0) scale(1);transform-origin:0 0;transition:transform 1s var(--ease)}
.pv .zl img{position:absolute;left:50%;top:50%;display:block;width:auto;height:50%;max-width:none;transform:translate(-50%,-50%);object-fit:contain}
.pv .pin{position:absolute;z-index:2;left:var(--x);top:var(--y);transform:translate(-50%,-50%) scale(var(--cs,1));transition:transform 1s var(--ease);padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;font:inherit}
.pv .pin.on{z-index:3}
.pv .pin::before{content:"";position:absolute;inset:-14px;border-radius:50%}
.pv .pin::after{content:"";position:absolute;left:7px;top:7px;width:var(--w,24px);height:1px;background:var(--paper);opacity:.7;transform-origin:left;transform:rotate(var(--r,-35deg));transition:opacity .35s var(--ease)}
.pv .pin i{position:relative;display:block;width:14px;height:14px;border:2px solid var(--paper);border-radius:50%;background:var(--brass);transition:transform .3s var(--ease),opacity .4s var(--ease)}
.pv .pin i::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1px solid var(--brass);animation:pvp 2.4s infinite}
@keyframes pvp{0%{transform:scale(1);opacity:.8}80%,100%{transform:scale(2.8);opacity:0}}
.pv .zm.act .pin i::after{animation:none;opacity:0}
.pv .pin:hover i,.pv .pin.on i{transform:scale(1.35)}
.pv .pin:focus-visible{outline:2px solid var(--paper);outline-offset:6px;border-radius:50%}
.pv .pin span{position:absolute;left:var(--lx,26px);top:var(--ly,-34px);display:block;white-space:nowrap;padding:9px 13px;background:rgba(10,11,12,.92);border:1px solid rgba(242,240,235,.3);border-left:2px solid rgba(242,240,235,.3);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);transition:opacity .35s var(--ease),border-color .3s var(--ease)}
.pv .pin.l span{left:auto;right:var(--lx,26px);text-align:right;border-left:1px solid rgba(242,240,235,.3);border-right:2px solid rgba(242,240,235,.3)}
.pv .pin.on span{border-left-color:var(--brass)}.pv .pin.l.on span{border-left-color:rgba(242,240,235,.3);border-right-color:var(--brass)}
.pv .pin span b{display:block;margin-top:4px;font-size:21px;font-weight:600;letter-spacing:-.01em;text-transform:none}
.pv .pin span small{display:block;width:min(250px,56vw);white-space:normal;max-height:0;opacity:0;overflow:hidden;margin-top:0;font-size:14px;font-weight:400;line-height:1.45;letter-spacing:0;text-transform:none;color:#d3d6dc;transition:max-height .45s var(--ease),opacity .35s var(--ease),margin .45s var(--ease)}
.pv .pin.on span small{max-height:90px;opacity:1;margin-top:10px}
.pv .zm.act .pin:not(.on) span,.pv .zm.act .pin:not(.on)::after{opacity:0;pointer-events:none}
.pv .zm.act .pin:not(.on) i{opacity:.6}
.pv .hint{position:absolute;z-index:3;left:28px;bottom:22px;margin:0;font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);transition:opacity .4s}
.pv .zm.act .hint{opacity:0}
.pv .zm.act .zl img{opacity:.72}/* dodacie a prepravne udaje: captions on the photos, one compact facts row, no separators */
.pkS{padding-top:0;padding-bottom:clamp(40px,4vw,72px)}
.pkS .plate{box-shadow:none}
.pkS .plate img{aspect-ratio:auto;width:100%;height:clamp(240px,23vw,380px);object-fit:cover}
.pkS .ph{display:grid;grid-template-columns:5fr 7fr;gap:12px}
.pkS .cap{position:relative}
.pkS .cap::after{content:"";position:absolute;inset:auto 0 0 0;height:60%;background:linear-gradient(0deg,rgba(var(--gr),.92),transparent);pointer-events:none}
.pkS .cap .t{position:absolute;z-index:2;left:clamp(18px,1.8vw,28px);bottom:clamp(16px,1.6vw,26px)}
.pkS .big{font-size:clamp(34px,3vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1}
.pkS .sub{margin:6px 0 0;color:rgba(var(--pr,242,240,235),.8);font-size:15px}
.pkS .fx{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px 28px;margin:clamp(18px,1.8vw,28px) 0 0}
.pkS .fx div{display:grid;gap:2px;align-content:start}
.pkS .fx dt{font-size:12.5px;color:var(--mute)}
.pkS .fx dd{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em}
.pkS .fx dd.a{display:flex;align-items:center;gap:10px}
.adr{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;flex:none}
.adr::before{content:"";position:absolute;inset:7px;background:#e8631f;transform:rotate(45deg);border:2px solid #16181a;box-shadow:inset 0 0 0 1.5px #e8631f}
.adr u{position:relative;text-decoration:none;font-size:11px;font-weight:800;color:#16181a;letter-spacing:-.02em}
/* the datasheet download, under the technical data */
.btn.line{background:none;color:var(--paper);box-shadow:inset 0 0 0 1px rgba(242,240,235,.28);transition:color .4s var(--ease)}
.js .btn.rv{transition:opacity var(--rv-t) ease,filter var(--rv-t) ease,transform var(--rv-m) var(--ease),color .4s var(--ease);transition-delay:var(--d,0s),var(--d,0s),var(--d,0s),0s}   /* .btn.line's own transition would otherwise replace the reveal one, and the button would snap in ahead of the page */
.btn.dl{gap:10px}
.btn.dl .di{width:18px;height:18px;flex:none;stroke:var(--brass);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s var(--ease)}
.btn.dl:hover .di{stroke:var(--graphite)}
.btn.line:hover{color:var(--graphite)}
.pv .pdl{max-width:1000px;margin:clamp(20px,2vw,28px) auto 0}
.pv .pdl,.dls2{display:flex;flex-wrap:wrap;gap:12px}
/* desktop: the datasheet button sits on the title row, right edge of the wrap; phones keep it under the rows */
@media(min-width:901px){.wrap:has(>.pv){position:relative}.pv .pdl{position:absolute;top:calc((clamp(32px,3.6vw,64px)*1.04 - 50px)/2);right:var(--pad);max-width:none;margin:0}}
/* phones: the cutaway is replaced by a static dimension drawing + the values as rows (.mo, same data as the pins) */
.pv .mo{display:none}
.mo-d{position:relative;width:190px;margin:0 auto 14px}
.mo-d img{position:absolute;display:block;max-width:none}
.mo-d svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.mo-d .gl{position:absolute;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(242,240,235,.075),transparent)}
.mo-d path{fill:none;stroke:var(--brass);stroke-width:1}
.mo-d .x{stroke-dasharray:3 3;stroke-opacity:.4}
.mo-r li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-top:1px solid var(--tint2)}
.mo-r li:last-child{border-bottom:1px solid var(--tint2)}
.mo-r .n{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--mute)}
.mo-r .n svg{width:14px;height:14px;flex:none;color:var(--brass)}
.mo-r b{font-size:17px;font-weight:600;letter-spacing:-.01em;text-align:right;white-space:nowrap}
@media(max-width:900px){
  .hero3 .tx{max-width:none}.hero3 .ph3{width:100%;opacity:.45}
  /* phone hero (m82, kv4): title, a hard-edged photo strip, then the text, so nothing lies on the product; .wrap and .tx dissolve so the title, photo and text can be ordered as one column; the strip height follows the width (the product is 40-60% of the photo's height) up to 420px */
  .hero3{flex-direction:column;align-items:stretch;min-height:0;padding-bottom:8px}
  .hero3::before{display:none}
  .hero3 .wrap,.hero3 .tx{display:contents}
  .hero3 .h1{order:1;padding:32px var(--pad) 0}
  .hero3 .ph3{order:2;position:static;z-index:auto;overflow:hidden;height:clamp(230px,59vw,420px);margin-top:24px;opacity:1;border-block:1px solid rgba(242,240,235,.14)}
  .hero3 .ph3::after{display:none}
  .hero3 .ph3 img{object-position:51% 55%}
  .hero3 .lede,.hero3 .acts{order:3;padding-inline:var(--pad)}
  .pkS .ph{grid-template-columns:1fr}.pkS .fx{grid-template-columns:repeat(2,1fr)}
  .pkS .fx div:last-child{grid-column:1/-1;justify-items:center;text-align:center}.pkS .fx dd.a{justify-content:center}
  .pv .pdl{flex-direction:column;gap:10px}.pv .pdl .btn{display:flex;width:100%}.pvl{display:none}
  .pv .zm{display:none}.pv .mo{display:block}
}
@media(prefers-reduced-motion:reduce){.pv .zl,.pv .pin{transition:none}.pv .pin i::after{animation:none}}

/* legal pages (privacy, terms): reading column centred on the page, contents in the left gutter */
.legal{padding-top:calc(var(--nav) + clamp(56px,7vw,120px))}
.legal-hd{max-width:680px;margin-inline:auto}
.legal-upd{margin-top:16px;font-size:14px;color:var(--mute)}
.legal-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,680px) minmax(0,1fr);column-gap:64px;margin-top:clamp(40px,4.5vw,64px)}
.legal-toc{grid-column:1;justify-self:end;width:min(210px,100%);position:sticky;top:calc(var(--nav) + 32px);align-self:start;display:flex;flex-direction:column}
.legal-toc a{padding:7px 0 7px 16px;font-size:14px;line-height:1.4;color:var(--mute);box-shadow:inset 1px 0 var(--tint2);transition:color .3s,box-shadow .3s}
.legal-toc a:hover{color:var(--paper)}
.legal-toc a.on{color:var(--paper);box-shadow:inset 2px 0 var(--brass)}
.legal-tx{grid-column:2}
.legal-tx .lead{font-size:19px;line-height:1.6;color:var(--paper);margin-bottom:48px}
.legal-tx section{scroll-margin-top:16px}
.legal-tx section+section{margin-top:44px}
.legal-tx p{color:var(--mute);line-height:1.65;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.legal-tx p+p,.legal-tx ul+p,.legal-tx p+ul{margin-top:12px}
.legal-tx ul{color:var(--mute);line-height:1.65;padding-left:1.2em;list-style:disc;margin:0}
.legal-tx li+li{margin-top:4px}
.legal-tx a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.legal-tx h2{font-size:clamp(19px,1.5vw,24px);font-weight:600;letter-spacing:-.02em;margin-bottom:12px}
@media(max-width:1199px){.legal-grid{grid-template-columns:minmax(0,680px);justify-content:center}.legal-toc{display:none}.legal-tx{grid-column:1}}

/* documents page: hero on the page axis, then one centred stage per document group, previews of one size */
/* same hero as the ammunition page, but the photo runs from the section bottom up to the very top of the page, under the header */
@media(min-width:901px){
  .pg-hero.top .hp{top:0;height:100%}
  .pg-hero.top .hi{height:100%;aspect-ratio:auto}
  .pg-hero.top .hi::after{background:linear-gradient(180deg,transparent 90%,var(--graphite)),linear-gradient(90deg,rgba(var(--gr),1) 0%,rgba(var(--gr),0.98) 6%,rgba(var(--gr),0.93) 12%,rgba(var(--gr),0.83) 20%,rgba(var(--gr),0.65) 28%,rgba(var(--gr),0.42) 36%,rgba(var(--gr),0.2) 44%,rgba(var(--gr),0.07) 52%,rgba(var(--gr),0) 58%,transparent 100%),linear-gradient(270deg,rgba(var(--gr),1) 0%,rgba(var(--gr),.6) 2%,rgba(var(--gr),.2) 6%,transparent 12%)}
}
.docs-grp{text-align:center;scroll-margin-top:calc(var(--nav) + 24px)}
.docs-grp+.docs-grp{position:relative;margin-top:clamp(64px,8vw,130px);padding-top:clamp(64px,8vw,130px)}
.docs-grp+.docs-grp::before{content:"";position:absolute;left:50%;top:0;width:min(560px,70%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--tint2),transparent)}
.docs-grp h2{font-size:clamp(24px,2.4vw,40px);font-weight:600;letter-spacing:-.025em;line-height:1.1;text-wrap:balance}
.docs-grp>p{line-height:var(--lh);font-size:var(--fs);max-width:46ch;margin:12px auto 0;color:var(--mute);text-wrap:balance}
.docs-list{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(36px,5vw,88px);margin:clamp(40px,5vw,72px) 0 0;padding:0;list-style:none}
.doc{display:flex;flex-direction:column;align-items:center;width:clamp(240px,26vw,380px);min-width:0}
.doc .th{display:block;width:100%;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px var(--tint2),0 18px 44px rgba(0,0,0,.4);transition:transform .8s var(--ease)}
.doc .th:hover{transform:translateY(-4px)}
.doc .th img{display:block;width:100%;height:auto;background:#fff}
.doc h3{margin-top:22px;font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.doc p{line-height:var(--lh);margin-top:6px;color:var(--mute);font-size:var(--fs);text-wrap:balance}
.doc .btn{margin-top:18px}
/* Povolenia a rozhodnutia: čísla bez skenov, rozloženie "split register" (mockup documents-numbers-only-variants) */
.docs-grp.reg{margin-top:clamp(72px,8vw,120px);padding-top:0;text-align:left}
.docs-grp.reg::before{display:none}
.reg-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start;max-width:1100px;margin-inline:auto}
.reg-h p{line-height:var(--lh);font-size:var(--fs);max-width:46ch;margin:12px 0 0;color:var(--mute)}
.reg-l .it{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;padding:24px 0;border-bottom:1px solid var(--tint2)}
.reg-l .it:first-child{padding-top:6px}
.reg-l dt{font-size:17px;font-weight:600;letter-spacing:-.01em}
.reg-l dd{margin:0}
.reg-l .no{font-size:17px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.reg-l .sub{grid-column:1 / -1;color:var(--mute);font-size:15px}
.ph{background:rgba(166,138,75,.18);box-shadow:inset 0 -1px 0 var(--brass);padding:0 .3em}
@media(max-width:760px){.reg-in{grid-template-columns:1fr}}


/* inner-page titles (privacy, terms): one size, much smaller than the hero h1 */
.legal .h2.h1{font-size:clamp(30px,2.8vw,48px);line-height:1.1;letter-spacing:-.03em}

/* ---------- O nás on the home page (under the hero), client text 2026-11 ----------
   Approved mockup: mockups/home-about-pillars-pages.html, take 1. Static: no scroll effects. Text never sits on a photo. */
.ab{padding-top:clamp(96px,11vw,180px)}
.ab-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px)}
.ab-top{align-items:start}
.ab-top .h2{grid-column:1/5}
.ab-top .ab-tx{grid-column:6/13}
.ab-lead{font-size:clamp(20px,1.6vw,27px);line-height:1.45;letter-spacing:-.012em;color:var(--paper);text-wrap:pretty}
.ab-p{color:var(--mute);font-size:var(--fs);line-height:var(--lh);text-wrap:pretty}
.ab-lead+.ab-p,.ab-p+.ab-p{margin-top:1em}
.ab-top .ab-p{font-size:clamp(20px,1.6vw,27px);line-height:1.45;letter-spacing:-.012em}   /* the intro's second paragraph at the lead's size (2026-11-02), only its colour stays a step quieter */
.ab-pil{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin-top:clamp(72px,8vw,120px)}
/* the pillars have no hairline over them since 2026-11-02 (was border-top:1px solid rgba(242,240,235,.24), size clamp(22px,2.2vw,38px));
   each carries an emblem above it, the same treatment as the values row (ChatGPT, cut out in assets-src/values-icons, 256 px copies in public/icons/pillar-*.png); centred on every width, the row as wide as the values row */
.ab-pil{max-width:1180px;margin-inline:auto}
.ab-pil li{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;font-size:clamp(20px,1.7vw,29px);font-weight:600;letter-spacing:-.028em;line-height:1.12;text-wrap:balance}
/* brass segment over each pillar, replaced by the emblems (2026-11-02):
.ab-pil li{position:relative;padding-top:24px}
.ab-pil li::before{content:"";position:absolute;left:0;top:0;width:56px;height:2px;background:var(--brass);transform-origin:left}
.js .ab-pil li::before{transform:scaleX(0)}
.js .ab-pil li.in::before{transform:none;transition:transform 1s var(--ease) calc(var(--d,0s) + .45s)}
*/
/* intro centred (2026-11-02, mockups/home-about-intro-text-pages.html take 5): the heading, then the lead and the paragraph justified in one centred measure
   (last line centred, hyphenation from html lang), the pillars centred under it; phones keep the stacked, left-aligned, ragged layout */
@media(min-width:901px){
  .ab-top{display:flex;flex-direction:column;align-items:center;text-align:center}
  .ab-top .ab-tx{max-width:1080px;margin-top:clamp(32px,3.4vw,52px);text-align:justify;text-align-last:center;-webkit-hyphens:auto;hyphens:auto}
  /* .ab-pil li::before{left:calc(50% - 28px);transform-origin:center}   brass segment, replaced by the emblems */
}
.ab-band{position:relative;margin-top:clamp(64px,8vw,120px);aspect-ratio:21/9;max-height:78vh;overflow:hidden;border-radius:2px;background:var(--steel)}
.ab-band img,.ab-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ab-rest{padding-top:clamp(110px,13vw,200px)}
.ab-sp{align-items:center;scroll-margin-top:calc(var(--nav) + 24px)}
.ab-sp+.ab-sp,.ab-sp+.ab-vals{margin-top:clamp(110px,13vw,190px)}
/* zigzag rows (2026-11-02): text 5 columns, photo 6, one column between; text and photo reveal, the photo settles from a slight zoom */
.ab-sp .ab-tx{grid-column:1/6}
.ab-ph{grid-column:7/13;position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:2px;background:var(--steel)}
.ab-sp.flip .ab-tx{grid-column:8/13;grid-row:1}
.ab-sp.flip .ab-ph{grid-column:1/7;grid-row:1}
.js .ab-sp .ab-ph img{transform:scale3d(1.1,1.1,1)}
.js .ab-sp .ab-ph.in img{animation:kb 12s cubic-bezier(.2,.6,.3,1) forwards}
@media(prefers-reduced-motion:reduce){.js .ab-sp .ab-ph img{transform:none;animation:none}}
/* the row text is justified with Slovak hyphenation (html lang) so the edges stay even; phones keep it ragged, the measure is too short for justification */
.ab-sp .ab-tx .ab-lead,.ab-sp .ab-tx .ab-p{text-align:justify;-webkit-hyphens:auto;hyphens:auto}   /* all widths incl. phones (2026-11-02) */
/* O nás rows without photos (2026-11-03, mockups/about-rows-centred-fullpage-pages.html take 6): centred, as wide as the intro, paragraphs at the intro size, a short brass segment above the heading that draws on reveal. The photo rules above stay for reference. */
.ab-sp.ab-cen{display:block}
.ab-cen .ab-tx{max-width:1080px;margin-inline:auto;text-align:center}
.ab-cen .ab-h3{margin-inline:auto;max-width:none}
.ab-cen .ab-tx::before{content:"";display:block;width:56px;height:2px;margin:0 auto clamp(24px,2.6vw,36px);background:var(--brass)}
.js .ab-cen .ab-tx::before{transform:scaleX(0);transition:transform 1.1s var(--ease) .35s}
.js .ab-cen .ab-tx.in::before{transform:none}
.ab-sp.ab-cen .ab-tx .ab-lead{text-align:center;text-align-last:center}
.ab-sp.ab-cen .ab-tx .ab-p{text-align:left;-webkit-hyphens:manual;hyphens:manual;font-size:clamp(20px,1.6vw,27px);line-height:1.45;letter-spacing:-.012em}
.ab-cen .ab-lead+.ab-p{margin-top:clamp(28px,3vw,44px)}
@media(prefers-reduced-motion:reduce){.js .ab-cen .ab-tx::before{transform:none;transition:none}}
.ab-h3{font-size:clamp(26px,2.3vw,40px);font-weight:600;line-height:1.1;letter-spacing:-.03em;text-wrap:balance;max-width:20ch}
.ab-h3+.ab-lead{margin-top:clamp(20px,2.2vw,32px)}
.ab-vals{padding-top:clamp(32px,3.4vw,52px);scroll-margin-top:calc(var(--nav) + 24px)}   /* no separator line above (removed 2026-11-02) */
.ab-vals .ab-lead{max-width:40ch}
.ab-vc{display:flex;flex-direction:column;align-items:center;text-align:center}   /* heading, lead and the emblem row centred; the paragraphs below stay left-aligned */
.ab-vc .ab-h3{max-width:none}
.ab-ic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,32px);width:100%;max-width:1180px;margin:clamp(52px,6vw,96px) auto 0}
.ab-ic li{display:flex;flex-direction:column;align-items:center;gap:24px}
.ab-ring{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(166,138,75,.6);color:var(--brass);transition:background .45s var(--ease),color .45s var(--ease)}
.ab-ic li:hover .ab-ring{background:var(--brass);color:var(--graphite)}
.ab-ico{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ab-em{display:block;width:clamp(96px,8vw,128px);height:auto;filter:drop-shadow(0 10px 16px rgba(0,0,0,.45))}   /* the client's emblems (ChatGPT, cut out in assets-src/values-icons, 256 px copies in public/icons); they replaced the line icons in brass rings */
.ab-ic b{font-size:clamp(18px,1.4vw,22px);font-weight:600;letter-spacing:-.018em;line-height:1.25;max-width:20ch;text-wrap:balance}
.ab-c2{columns:2;column-gap:clamp(36px,4.4vw,88px);max-width:1180px;margin:clamp(40px,4.4vw,72px) auto 0}
.ab-c2 .ab-p{break-inside:avoid}
@media(max-width:900px){
  .ab-g{grid-template-columns:1fr}
  .ab-g>*{grid-column:1/-1!important}
  .ab-top .ab-tx{margin-top:24px}
  .ab-band{aspect-ratio:4/3}
  .ab-sp .ab-ph{grid-row:1;margin-bottom:28px}
  .ab-sp .ab-tx{grid-row:2!important}
  .ab-ic{grid-template-columns:1fr 1fr;gap:32px 16px}
  .ab-c2{columns:1}
}
/* phones: the three emblems stay side by side (2026-11-02), smaller emblem and label so "Zodpovednosť" fits a third of the width */
@media(max-width:600px){
  .ab-pil{gap:10px}
  .ab-pil li{gap:14px;font-size:clamp(12px,3.5vw,16px);overflow-wrap:break-word}
  .ab-em{width:clamp(60px,18vw,96px)}
}
@media(prefers-reduced-motion:reduce){.ab-ring{transition:none}}

/* Obchodovanie section on the home page (mockups/home-trading-wide-bg-pages.html take 4, photo moved 7 rem to the right): wide photo background without card or border, feathered edges, dark overlay, wide justified text */
.trd{overflow:hidden;padding-block:clamp(56px,7vw,120px)}
.trd-hold{position:relative;isolation:isolate;padding-block:clamp(56px,6.4vw,110px)}
.trd-fx{position:absolute;z-index:-1;top:0;bottom:0;left:calc(-3% + 7rem);right:calc(-5% - 7rem);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%);mask-composite:intersect}
.trd-fx img{display:block;width:100%;height:100%;object-fit:cover;object-position:100% 50%}
.trd-fx::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--gr),.96) 0,rgba(var(--gr),.9) 46%,rgba(var(--gr),.55) 66%,rgba(var(--gr),.05) 88%,transparent 100%)}
.trd-in{position:relative;max-width:76%;padding-inline:clamp(0px,2vw,36px)}
.trd .lede{margin-top:clamp(14px,1.4vw,22px)}
.trd-tx{display:flex;flex-direction:column;gap:clamp(18px,1.8vw,26px);margin-top:clamp(26px,2.8vw,44px)}
.trd-tx p{color:var(--paper);opacity:.95;font-size:clamp(17px,1.4vw,22px);line-height:1.6;letter-spacing:-.006em;text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;text-shadow:0 1px 18px rgba(var(--gr),.55)}
/* closing sentence (2026-11-02, mockups/trading-statement-simple-pages.html take 2): plain, centred across the content container, outside the justified text */
.trd-stmt{margin-top:clamp(40px,4.4vw,76px);text-align:center;font-weight:600;font-size:clamp(24px,3vw,50px);line-height:1.15;letter-spacing:-.03em;text-wrap:balance}
.trd-stmt>span{display:block;max-width:40ch;margin-inline:auto}
@media(max-width:900px){.trd-stmt{font-size:clamp(23px,6.2vw,32px)}}
/* phones and tablets (2026-11-02): no background. The photo is a plain block above the text, no overlay or feathering, text justified */
@media(max-width:900px){
  .trd-hold{display:flex;flex-direction:column;gap:clamp(28px,6vw,44px);padding-block:0}
  .trd-fx{position:static;z-index:auto;aspect-ratio:4/3;border-radius:6px;overflow:hidden;-webkit-mask-image:none;mask-image:none}
  .trd-fx::after{display:none}
  .trd-in{max-width:none;padding-inline:0}
  .trd-tx p{text-align:justify;hyphens:auto;-webkit-hyphens:auto;text-shadow:none}
}
/* page hero without photo: compact, title centred */
.pg-hero.nophoto{min-height:0;justify-content:center;text-align:center}
.pg-hero.nophoto::after{display:none}
.pg-hero.nophoto .wrap{width:100%;padding-block:clamp(56px,7vw,110px)}
.pg-hero.nophoto .tx{max-width:none;margin-inline:auto}
.pg-hero.nophoto .lede{margin-inline:auto}
@media(max-width:900px){
  .pg-hero.nophoto{align-items:center;padding-bottom:0}
  .pg-hero.nophoto .wrap{padding-block:48px 24px}
  .pg-hero.nophoto .tx>.h1{display:block;min-height:0;padding-bottom:0}
}

/* Obchodovanie without photo (2026-11-03, mockups/trading-no-photo-site-pages.html take 1): the O nás row pattern (brass bar, centred heading and lede, first paragraph as the lead, the rest left-aligned at the row size),
   the closing sentence under it, then a full section gap before Kontakt */
.trd{padding-bottom:clamp(120px,15vw,260px)}
.trd-cen{max-width:1080px;margin-inline:auto;text-align:center}
.trd-bar{width:56px;height:2px;margin:0 auto clamp(24px,2.6vw,36px);background:var(--brass)}
.trd-cen .h2{margin-inline:auto;max-width:20ch}
.trd-cen .lede{margin-inline:auto}
.trd-cen .trd-l1{margin-top:clamp(40px,4.6vw,72px);text-align:center}
.trd-cen .trd-p{text-align:left;font-size:clamp(20px,1.6vw,27px);line-height:1.45;letter-spacing:-.012em;margin-top:clamp(28px,3vw,44px)}
.trd .trd-stmt{margin-top:clamp(170px,20vw,340px)}

/* product datasheets on the documents page (2026-11-03): a plain list, no thumbnails */
.docs-files{max-width:820px;margin:clamp(32px,4vw,56px) auto 0;padding:0;list-style:none;text-align:left}
.docs-files li{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 32px;padding:clamp(18px,2vw,28px) 0;border-top:1px solid var(--tint2);scroll-margin-top:calc(var(--nav) + 24px)}
.docs-files li:last-child{border-bottom:1px solid var(--tint2)}
.docs-files .nm{display:flex;flex-direction:column;gap:4px}
.docs-files b{font-size:clamp(19px,1.6vw,24px);font-weight:600;letter-spacing:-.022em;line-height:1.2}
.docs-files .nm span{color:var(--mute);font-size:var(--fs)}
.docs-files .acts{display:flex;flex-wrap:wrap;gap:12px}
.docs-files .btn{margin:0;padding:12px 20px;font-size:14px}