/* Luciamm gallery design — shared by index.php and catalogue.php.
   Loaded after /assets/css/style.css; re-skins the shared header and footer. */
/* Layout: a four-column hairline grid fixed over a black stage; one machined gear train
   lives in WebGL behind it and re-poses for every full-screen section, museum-plinth style.
   Tokens are prefixed --lx- so they never collide with style.css variables. */
:root{
  --lx-stage:#000;
  --lx-ink:#f2f3f5;
  --lx-ink-2:rgba(242,243,245,.72);
  --lx-ink-3:rgba(242,243,245,.46);
  --lx-rule:rgba(255,255,255,.10);
  --lx-signal:#2f66ff;
  --lx-signal-2:#86a6ff;
  --lx-brass:#c49a3c;
  --lx-display:"Libre Baskerville", Baskerville, "Baskerville Old Face", "Times New Roman", serif;
  --lx-ui:"Red Hat Display", "Segoe UI", system-ui, sans-serif;
  --lx-mono:"JetBrains Mono", ui-monospace, Consolas, monospace;
  --lx-pad:max(16px, env(safe-area-inset-left, 0px));
  --lx-pad-r:max(16px, env(safe-area-inset-right, 0px));
  --lx-header:72px;
  --lx-ease:cubic-bezier(.23,1,.32,1);
  color-scheme:dark;
}
@media (min-width:900px){
  :root{ --lx-pad:max(clamp(48px,5vw,80px), env(safe-area-inset-left, 0px)); --lx-pad-r:max(clamp(48px,5vw,80px), env(safe-area-inset-right, 0px)); --lx-header:76px; }
}
html{scroll-snap-type:y proximity;background:var(--lx-stage)}
body{background:var(--lx-stage);color:var(--lx-ink);font:400 14px/1.65 var(--lx-ui);-webkit-font-smoothing:antialiased}
::selection{background:var(--lx-signal);color:#fff}
::-webkit-scrollbar-track{background:#000} ::-webkit-scrollbar-thumb{background:#2a2d33}
:focus-visible{outline:1px solid var(--lx-signal-2);outline-offset:4px}

/* ---------- stage layers ---------- */
.stage-bg{position:fixed;inset:0;z-index:0;background:radial-gradient(60% 55% at 50% 38%, #17191e 0%, #0a0b0d 45%, #000 80%)}
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:1;display:block;pointer-events:none;opacity:0;transition:opacity 1.6s ease .2s}
#gl.on{opacity:1}
.grain{position:fixed;inset:-50%;z-index:2;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:lxGrain 1.2s steps(6) infinite}
@keyframes lxGrain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

.wrap{width:100%;max-width:1600px;margin:0 auto;padding-left:var(--lx-pad);padding-right:var(--lx-pad-r)}
.g4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.g4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cell{padding-inline:clamp(10px,1.4vw,24px);min-width:0}

.guides{position:fixed;inset:0;z-index:3;pointer-events:none}
.guides .wrap,.guides .g4{height:100%}
.guides .g4 > i{border-left:1px solid var(--lx-rule)}
.guides .g4 > i:last-child{border-right:1px solid var(--lx-rule)}
.guides .g4 > i:nth-child(n+3){display:none}
.guides .g4 > i:nth-child(2){border-right:1px solid var(--lx-rule)}
@media (min-width:900px){.guides .g4 > i:nth-child(n+3){display:block}.guides .g4 > i:nth-child(2){border-right:0}}

/* ---------- shared header (includes/header.php) re-skinned ---------- */
#nav{background:linear-gradient(#000 0%, rgba(0,0,0,.6) 60%, transparent);backdrop-filter:none;border-bottom:0;box-shadow:none}
#nav.scrolled{border-bottom:0;box-shadow:none;background:linear-gradient(#000 0%, rgba(0,0,0,.85) 70%, transparent)}
#nav .nav-inner,#nav.scrolled .nav-inner{max-width:1600px;height:var(--lx-header);padding-left:calc(var(--lx-pad) + clamp(10px,1.4vw,24px));padding-right:calc(var(--lx-pad-r) + clamp(10px,1.4vw,24px));gap:clamp(14px,2vw,32px)}
/* light.png has a checkerboard baked into its pixels, so the header shows a serif wordmark instead (image kept for screen readers) */
.nav-brand{position:relative;display:flex;flex-direction:column;gap:5px;line-height:1;flex-shrink:0;text-decoration:none}
.nav-brand::before{content:"LUCIAMM";font:400 21px/1 var(--lx-display);letter-spacing:.06em;color:var(--lx-ink)}
.nav-brand::after{content:"CONTROL SYSTEMS";font:500 8.5px/1 var(--lx-ui);letter-spacing:.32em;color:var(--lx-ink-3)}
.nav-logo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
.nav-links{gap:clamp(14px,1.7vw,32px);margin-right:auto;margin-left:clamp(16px,4vw,96px)}
.nav-links a{font:700 10.5px/1 var(--lx-ui);letter-spacing:.14em;color:var(--lx-ink-2);padding-block:10px;white-space:nowrap}
/* between tablet and small-laptop widths the seven links don't fit: use the hamburger menu there too */
@media (min-width:900px) and (max-width:1149px){
  .nav-links{display:none} .nav-hamburger{display:flex} .nav-mobile.open{display:flex !important}
}
.nav-links a::after{height:2px;background:var(--lx-signal);width:100%;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--lx-ease)}
.nav-links a:hover{color:var(--lx-ink)} .nav-links a:hover::after{width:100%}
.nav-links a.active{color:var(--lx-ink)} .nav-links a.active::after{transform:scaleX(.55)}
.nav-actions{order:4;gap:16px}
.nav-wa{width:auto;height:auto;border:0;border-radius:0;color:var(--lx-ink-2)}
.nav-wa:hover{background:none;color:#25d366}
.nav-cta{font:700 10.5px/1 var(--lx-ui);letter-spacing:.16em;color:#fff;background:var(--lx-signal);border:0;padding:12px 18px}
.nav-cta:hover{background:#3f74ff;color:#fff}
.nav-hamburger{border:0;padding:10px 0 10px 10px}
.nav-hamburger span{background:var(--lx-ink);width:22px;height:1px}
.lcm-topbar{order:3;position:static;margin-left:auto}
.lcm-login-btn{display:inline-flex;align-items:center;gap:8px;color:var(--lx-ink-2);font:700 10.5px/1 var(--lx-ui);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:color .2s}
.lcm-login-btn:hover{color:var(--lx-ink)}
.lcm-login-btn svg{width:14px;height:14px}
.lcm-login-btn .lcm-login-short{display:none}
@media (max-width:1399px){.lcm-login-btn .lcm-login-full{display:none}.lcm-login-btn .lcm-login-short{display:inline}}
.lcm-login-btn,.nav-cta{white-space:nowrap}
@media (max-width:639px){.lcm-topbar{display:none}}
.nav-mobile{top:var(--lx-header);background:rgba(0,0,0,.97);border-bottom:1px solid var(--lx-rule);padding:24px var(--lx-pad-r) 32px var(--lx-pad)}
.nav-mobile a{font:400 26px/1.2 var(--lx-display);letter-spacing:0;text-transform:none;color:var(--lx-ink-2);border-bottom:1px solid var(--lx-rule);padding:14px 0}
.nav-mobile a:hover{color:var(--lx-ink)}
.nav-mobile-contacts a{font:400 12px/1.4 var(--lx-mono);color:var(--lx-ink-3);border:0}

/* ---------- left progress rail ---------- */
.rail{position:fixed;z-index:20;left:max(18px, env(safe-area-inset-left,0px));top:50%;transform:translateY(-50%);display:none;flex-direction:column;gap:14px;list-style:none;margin:0;padding:0}
@media (min-width:900px){.rail{display:flex}}
.rail a{display:block;width:28px;height:12px;position:relative}
.rail a::before{content:"";position:absolute;left:0;top:5px;height:2px;width:2px;background:var(--lx-ink-2);transition:width .6s var(--lx-ease),background .4s}
.rail a.on::before{width:28px;background:var(--lx-signal)}
.rail a:hover::before{background:var(--lx-ink)}
.rail span{position:absolute;left:40px;top:-1px;white-space:nowrap;font:700 9.5px/1 var(--lx-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--lx-ink-3);opacity:0;transform:translateX(-6px);transition:.35s var(--lx-ease)}
.rail a:hover span{opacity:1;transform:none}

/* ---------- sections ---------- */
main.lx{position:relative;z-index:10}
.sec{position:relative;min-height:100vh;min-height:100svh;scroll-snap-align:start;display:grid;align-content:end;
  padding-top:calc(var(--lx-header) + clamp(24px,6vh,64px));padding-bottom:clamp(36px,9vh,96px)}
.sec.center{align-content:center}
.sec > .wrap > .g4{row-gap:clamp(28px,5vh,56px);align-items:end}
.lx h1,.lx h2,.lx h3{font-family:var(--lx-display);font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.01em;color:var(--lx-ink)}
.lx h1{font-size:clamp(46px,7.4vw,118px);line-height:.98}
.lx h2{font-size:clamp(38px,5.4vw,84px);line-height:1.02}
.lx h3{font-size:clamp(26px,2.5vw,40px);line-height:1.08}
.lx h1 em,.lx h2 em{font-style:italic;color:var(--lx-signal-2)}
.lx p{margin:0;color:var(--lx-ink-2);max-width:62ch}
.lx .small{font-size:13px}
.lx .label{font:700 10.5px/1 var(--lx-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--lx-ink-3);display:flex;align-items:center;gap:12px}
.lx .label::before{content:"";width:18px;height:1px;background:var(--lx-signal)}
.lx .mono{font-family:var(--lx-mono);font-size:11px;letter-spacing:.02em;color:var(--lx-ink-3)}
.stack{display:grid;gap:14px;align-content:start}
.stack-lg{display:grid;gap:clamp(36px,6vh,64px)}
.span-all{grid-column:1 / -1}
@media (min-width:900px){
  .c1{grid-column:1} .c2{grid-column:2} .c3{grid-column:3} .c4{grid-column:4}
  .c1-3{grid-column:1 / 4} .c1-2{grid-column:1 / 3} .c3-4{grid-column:3 / 5} .c2-4{grid-column:2 / 5}
}
@media (max-width:899px){ .m-all{grid-column:1 / -1} }

.cta-row{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:22px}
.lnk{font:700 10.5px/1 var(--lx-ui);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;gap:10px;padding-block:8px;border-bottom:1px solid var(--lx-rule);color:var(--lx-ink);transition:border-color .3s,gap .4s var(--lx-ease)}
.lnk:hover{border-color:var(--lx-signal);gap:16px}
.lnk.solid{border-color:var(--lx-signal)}

.hero-eyebrow{grid-column:1 / -1}
.hud{position:absolute;right:var(--lx-pad-r);top:calc(var(--lx-header) + 18px);text-align:right;display:none;gap:4px}
@media (min-width:900px){.hud{display:grid}}
.hud b{font-weight:500;color:var(--lx-ink-2)}
.scroll-cue{display:flex;align-items:center;gap:12px;margin-top:28px}
.scroll-cue i{width:1px;height:38px;background:linear-gradient(var(--lx-signal),transparent);animation:lxCue 2.2s var(--lx-ease) infinite;transform-origin:top}
@keyframes lxCue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

.svc{display:grid;gap:12px;padding-block:22px 6px;border-top:1px solid var(--lx-rule);align-content:start}
.lx .svc h3{font-size:clamp(22px,1.9vw,30px)}
.tags{display:flex;flex-wrap:wrap;gap:4px 12px}
.svc-grid{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.svc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.svc-grid > .svc{padding-inline:clamp(10px,1.4vw,24px)}

.cat-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.cat-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,2.8vw,48px)}}
.cat-list li{padding-block:14px;border-top:1px solid var(--lx-rule);display:grid;gap:4px}
.cat-list b{font:400 17px/1.2 var(--lx-display);color:var(--lx-ink)}
.marquee{grid-column:1 / -1;overflow:hidden;border-block:1px solid var(--lx-rule);padding-block:16px;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;gap:44px;width:max-content;animation:lxMarq 48s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font:400 italic clamp(18px,1.8vw,26px)/1 var(--lx-display);color:var(--lx-ink-2);white-space:nowrap}
.marquee span::after{content:"·";margin-left:44px;color:var(--lx-signal)}
@keyframes lxMarq{to{transform:translateX(-50%)}}
.process{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 0;counter-reset:step}
@media (min-width:900px){.process{grid-template-columns:repeat(5,minmax(0,1fr))}}
.process li{counter-increment:step;display:grid;gap:6px;padding-right:16px;align-content:start;color:var(--lx-ink-2)}
.process li::before{content:counter(step,decimal-leading-zero);font:500 11px/1 var(--lx-mono);color:var(--lx-signal-2)}
.process b{font:400 18px/1.2 var(--lx-display);color:var(--lx-ink)}

.adv{list-style:none;margin:0;padding:0;display:grid}
.adv li{display:grid;gap:6px;padding-block:16px;border-top:1px solid var(--lx-rule);color:var(--lx-ink-2)}
.adv b{font:400 clamp(19px,1.6vw,24px)/1.2 var(--lx-display);color:var(--lx-ink)}
.figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 0}
.fig{display:grid;gap:6px}
.fig strong{font:400 clamp(44px,5vw,80px)/.95 var(--lx-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--lx-ink)}
.fig strong sup{font-size:.36em;vertical-align:top;margin-left:4px;color:var(--lx-brass)}

.contact-list{display:grid;gap:18px}
.contact-list div{display:grid;gap:4px}
.contact-list .v{font:400 17px/1.35 var(--lx-display);color:var(--lx-ink)}
.contact-list .v a{text-decoration:none;border-bottom:1px solid var(--lx-rule)}
#contact-form{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}
.fld{display:grid;gap:6px;min-width:0}
.fld.full{grid-column:1 / -1}
.fld label{font:700 9.5px/1 var(--lx-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--lx-ink-3)}
.fld input,.fld select,.fld textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.22);border-radius:0;color:var(--lx-ink);font:400 16px/1.4 var(--lx-ui);padding:8px 0 10px;transition:border-color .3s}
.fld select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--lx-ink-2) 50%),linear-gradient(135deg,var(--lx-ink-2) 50%,transparent 50%);background-position:calc(100% - 10px) 50%,calc(100% - 5px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.fld select option{background:#0b0c0f;color:var(--lx-ink)}
.fld textarea{min-height:96px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--lx-signal)}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(242,243,245,.28)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-submit{grid-column:1 / -1;justify-self:start;display:inline-flex;align-items:center;gap:14px;padding:16px 26px;background:var(--lx-signal);color:#fff;border:0;cursor:pointer;font:700 10.5px/1 var(--lx-ui);letter-spacing:.18em;text-transform:uppercase;transition:gap .4s var(--lx-ease),background .3s}
.form-submit:hover{gap:20px;background:#3f74ff}
.form-submit:disabled{opacity:.6;cursor:progress}
#contact-form .form-msg{grid-column:1 / -1;margin:0;border:0;border-left:2px solid;border-radius:0;background:transparent;padding:4px 0 4px 12px;font-size:13px}

/* ---------- shared footer (includes/footer.php) re-skinned ---------- */
#footer{position:relative;z-index:10;background:#000;border-top:1px solid var(--lx-rule);padding-top:clamp(48px,8vh,88px)}
#footer .container{max-width:1600px;padding-left:calc(var(--lx-pad) + clamp(10px,1.4vw,24px));padding-right:calc(var(--lx-pad-r) + clamp(10px,1.4vw,24px))}
.footer-top{border-bottom:1px solid var(--lx-rule)}
@media(min-width:1000px){.footer-top{grid-template-columns:repeat(4,minmax(0,1fr))}}
.footer-logo{height:auto;width:200px;max-width:100%;margin:-18px 0 6px -14px}
.footer-about{color:var(--lx-ink-2);max-width:32ch}
.footer-slogan{font:400 italic 15px/1.4 var(--lx-display);color:var(--lx-brass);letter-spacing:0}
.social-btn{font:700 9.5px/1 var(--lx-ui);letter-spacing:.16em;border-radius:0;border:1px solid var(--lx-rule);color:var(--lx-ink-2);padding:10px 14px}
.social-btn:first-child{color:var(--lx-ink-2);border-color:var(--lx-rule)}
.social-btn:first-child:hover,.social-btn:last-child:hover{border-color:var(--lx-signal);color:var(--lx-ink);background:none}
.footer-col-title{font:700 10.5px/1 var(--lx-ui);letter-spacing:.16em;color:var(--lx-ink-3)}
.footer-col a{font:400 15px/1.4 var(--lx-display);color:var(--lx-ink-2)}
.footer-col a:hover{color:var(--lx-ink)}
.footer-copy,.footer-reg-inline{font:400 11px/1.5 var(--lx-mono);letter-spacing:.02em;color:var(--lx-ink-3)}
.footer-strip{background:#000;border-top:1px solid var(--lx-rule);font:400 10px/1.5 var(--lx-mono);color:rgba(242,243,245,.3)}
.wa-float{background:rgba(0,0,0,.7);backdrop-filter:blur(8px);border:1px solid var(--lx-rule);box-shadow:none;border-radius:0;color:var(--lx-ink);font:700 9.5px/1 var(--lx-ui);letter-spacing:.16em;text-transform:uppercase;padding:12px 16px;left:auto;right:84px;bottom:24px}
.wa-float svg{width:18px;height:18px;color:#25d366}
.wa-float:hover{background:#000;border-color:#25d366;box-shadow:none}
#btt{background:rgba(0,0,0,.7);border:1px solid var(--lx-rule);color:var(--lx-ink);border-radius:0}
#btt:hover{border-color:var(--lx-signal);background:#000}

/* ---------- reveal ---------- */
.mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.mask > span{display:block}
.lx-js .pre .mask > span{transform:translateY(108%)}
.lx-js .pre .fade{opacity:0;transform:translateY(18px)}
.lx-js .in .mask > span{transform:none;transition:transform 1.2s var(--lx-ease) calc(var(--d,0) * 1s)}
.lx-js .in .fade{opacity:1;transform:none;transition:opacity 1s var(--lx-ease) calc(var(--d,0) * 1s + .15s),transform 1s var(--lx-ease) calc(var(--d,0) * 1s + .15s)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .grain,.marquee-track,.scroll-cue i{animation:none}
  .lx-js .pre .mask > span,.lx-js .pre .fade{transform:none;opacity:1}
}

/* ══════════════════════════════════════════════════════
   CATALOGUE (catalogue.php)
══════════════════════════════════════════════════════ */
.sec.cat-hero{min-height:78vh;min-height:78svh}
.sec.flow{min-height:0;align-content:start;scroll-snap-align:none}
.sec.flow > .wrap > .g4{align-items:start}
.cat-search{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 20px;margin-top:10px;max-width:640px}
.cat-search .fld{flex:1 1 260px}
.cat-search .fld input{font-size:18px}
.btn-signal{display:inline-flex;align-items:center;gap:12px;padding:15px 24px;background:var(--lx-signal);color:#fff;border:0;cursor:pointer;font:700 10.5px/1 var(--lx-ui);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:gap .4s var(--lx-ease),background .3s}
.btn-signal:hover{gap:18px;background:#3f74ff;color:#fff}
.cat-meta{display:flex;flex-wrap:wrap;gap:6px 22px}
@media (min-width:900px){.cat-hero-aside{grid-row:2;grid-column:4}.cat-hero-search{grid-row:2}}

.cat-side{display:grid;gap:28px;align-content:start}
@media (min-width:900px){.cat-side{position:sticky;top:calc(var(--lx-header) + 24px)}}
.cat-nav{display:grid}
.cat-nav a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 0 11px 14px;border-top:1px solid var(--lx-rule);text-decoration:none;color:var(--lx-ink-2);font:400 15px/1.3 var(--lx-display);position:relative;transition:color .25s,padding .45s var(--lx-ease)}
.cat-nav a::before{content:"";position:absolute;left:0;top:50%;width:2px;height:2px;background:var(--lx-ink-3);transition:height .45s var(--lx-ease),background .3s;transform:translateY(-50%)}
.cat-nav a:hover{color:var(--lx-ink);padding-left:20px}
.cat-nav a.on{color:var(--lx-ink)}
.cat-nav a.on::before{height:60%;background:var(--lx-signal)}
.cat-nav .n{font:400 11px/1 var(--lx-mono);color:var(--lx-ink-3);font-variant-numeric:tabular-nums}
@media (max-width:899px){
  .cat-nav{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;gap:0 18px;border-block:1px solid var(--lx-rule);padding-block:4px;-webkit-overflow-scrolling:touch}
  .cat-nav a{border:0;padding:10px 0 10px 12px;white-space:nowrap;font-size:14px}
  .cat-nav a:hover{padding-left:12px}
  .cat-side .ask{display:none}
}
.ask{display:grid;gap:10px;padding-top:18px;border-top:1px solid var(--lx-rule)}

.results-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 20px;padding-bottom:14px;border-bottom:1px solid var(--lx-rule)}
.results-bar .count{font:400 clamp(20px,2vw,28px)/1.2 var(--lx-display);color:var(--lx-ink)}
.results-bar .count em{font-style:italic;color:var(--lx-signal-2)}

.feat{display:grid;gap:14px;margin-block:8px 40px}
.feat .label::before{background:var(--lx-brass)}
.feat-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);overflow-x:auto;border-left:1px solid var(--lx-rule);scrollbar-width:thin}
.feat-card{display:grid;gap:6px;align-content:start;padding:18px clamp(12px,1.4vw,20px);border:1px solid var(--lx-rule);border-left:0;margin-top:-1px;background:rgba(12,10,6,.7);backdrop-filter:blur(3px)}
.feat-card b{font:400 17px/1.25 var(--lx-display);color:var(--lx-ink)}
.feat-card .price{font:400 18px/1 var(--lx-display);color:var(--lx-brass)}

.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));border-left:1px solid var(--lx-rule);margin-top:24px}
.prod{position:relative;display:flex;flex-direction:column;border:1px solid var(--lx-rule);border-left:0;margin-top:-1px;background:rgba(0,0,0,.62);backdrop-filter:blur(3px);transition:background .35s}
.prod::before{content:"";position:absolute;left:-1px;top:-1px;right:-1px;height:2px;background:var(--lx-signal);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--lx-ease)}
.prod.is-feat::before{background:var(--lx-brass);transform:scaleX(.25)}
.prod:hover{background:rgba(14,16,20,.8)}
.prod:hover::before{transform:scaleX(1)}
.prod-body{display:grid;gap:8px;align-content:start;padding:22px clamp(14px,1.4vw,22px);flex:1}
.prod-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.prod-brand{font:700 10px/1 var(--lx-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--lx-signal-2)}
.prod h3{font:400 clamp(19px,1.5vw,22px)/1.2 var(--lx-display);margin:0;color:var(--lx-ink);text-wrap:balance}
.prod p{font-size:13px;color:var(--lx-ink-2);margin:0}
.prod-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:10px}
.price{font:400 20px/1 var(--lx-display);color:var(--lx-ink);font-variant-numeric:tabular-nums}
.price small{font:500 10px/1 var(--lx-mono);color:var(--lx-ink-3);margin-right:6px;letter-spacing:.06em}
.stock{font:500 10px/1 var(--lx-mono);letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:7px;color:var(--lx-ink-2)}
.stock::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lx-ink-3)}
.stock.in::before{background:#3ddc84;box-shadow:0 0 8px rgba(61,220,132,.6)}
.prod-actions{display:flex;border-top:1px solid var(--lx-rule)}
.prod-actions a{flex:1;text-align:center;padding:13px 6px;font:700 9.5px/1 var(--lx-ui);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--lx-ink-2);transition:color .25s,background .25s}
.prod-actions a + a{border-left:1px solid var(--lx-rule)}
.prod-actions a:hover{color:var(--lx-ink);background:rgba(47,102,255,.12)}
.prod-actions a.wa:hover{background:rgba(37,211,102,.1);color:#5ee59a}

.pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:40px}
.pager a,.pager span{min-width:40px;height:40px;display:inline-grid;place-items:center;padding-inline:12px;font:500 12px/1 var(--lx-mono);text-decoration:none;color:var(--lx-ink-2);border:1px solid var(--lx-rule);transition:border-color .25s,color .25s}
.pager a:hover{border-color:var(--lx-signal);color:var(--lx-ink)}
.pager .cur{background:var(--lx-signal);border-color:var(--lx-signal);color:#fff}
.pager .gap{border:0;min-width:20px;padding:0}

.empty{display:grid;gap:16px;justify-items:start;padding-block:clamp(40px,8vh,80px);border-top:1px solid var(--lx-rule)}
.lx .empty h3{font-size:clamp(28px,3vw,44px)}

/* style.css still carries the old homepage's section rules (#about, #services, #why… padding,
   navy backgrounds, glow lines). Neutralise them inside the gallery pages. */
main.lx > #about, main.lx > #services, main.lx > #equipment, main.lx > #why, main.lx > #contact, main.lx > #team{
  background:transparent;position:relative;
  padding:calc(var(--lx-header) + clamp(24px,6vh,64px)) 0 clamp(36px,9vh,96px);
}
main.lx > #services::before, main.lx > #services::after, main.lx > #why::before{content:none;display:none}

/* equipment photos (uploaded in Admin → Equipment) */
.prod-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:radial-gradient(80% 80% at 50% 40%,#1a1d23,#0b0c0f);border-bottom:1px solid var(--lx-rule)}
.prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--lx-ease),filter .6s;filter:saturate(.92)}
.prod:hover .prod-img img{transform:scale(1.05);filter:none}
.prod-img.none{display:grid;place-items:center}
.prod-img.none span{font:400 56px/1 var(--lx-display);color:rgba(242,243,245,.08)}
.feat-img{width:calc(100% + 2 * clamp(12px,1.4vw,20px));max-width:none;aspect-ratio:4/3;object-fit:cover;margin:-18px calc(-1 * clamp(12px,1.4vw,20px)) 8px;border-bottom:1px solid var(--lx-rule)}