:root{
  --bg:#1e1e1e; --bg2:#262626; --panel:#232323; --cell:#2c2c2c; --cell-h:#363636;
  --line:#141414; --line2:#333; --tx:#d9d9d9; --tx2:#9a9a9a; --tx3:#6b6b6b;
  --acc:#2f8de4; --acc-d:#0066B3;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
[data-theme="attex"]{ --acc:#cfcfcf; --acc-d:#8a8a8a; }
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--tx);font:14px/1.45 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:inherit}
[hidden]{display:none!important}

/* top bar, Lightroom module picker */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px clamp(16px,3vw,36px);background:linear-gradient(#171717,#1a1a1a);border-bottom:1px solid var(--line);box-shadow:0 1px 0 #2a2a2a}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:22px;height:22px;border-radius:3px;background:conic-gradient(from 45deg,var(--acc-d) 0 25%,#3a3a3a 0 100%);box-shadow:inset 0 0 0 1px #000}
.brand-t{font:600 15px/1.1 "Inter Tight",Inter,sans-serif;letter-spacing:.01em;color:#e8e8e8}
.brand-s{font-size:11px;color:var(--tx3);margin-top:2px}
.modules{display:flex;align-items:center;gap:14px;font:500 17px/1 "Inter Tight",Inter,sans-serif;letter-spacing:.04em}
.modules a{text-decoration:none;color:#6f6f6f;transition:color .15s;padding:6px 0}
.modules a span{font-weight:400;font-size:12px;letter-spacing:.08em;margin-left:4px;color:inherit;opacity:.8}
.modules a:hover{color:#bdbdbd}
.modules a.on{color:#f2f2f2}
.modules i{color:#3d3d3d;font-style:normal}

main{max-width:1680px;margin:0 auto;padding:0 clamp(12px,2.4vw,32px) 40px}

/* identity plate */
.identity{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3vw,44px);align-items:center;padding:clamp(24px,4vw,46px) 4px clamp(20px,3vw,32px)}
.logos{display:flex;align-items:center;gap:22px}
.logo-bring{height:clamp(64px,7vw,96px)}
.logo-hardig{height:clamp(58px,6.4vw,88px)}
.logo-attex{height:clamp(34px,3.6vw,50px)}
.vsep{width:1px;align-self:stretch;background:#383838}
.eyebrow{font:600 11px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin-bottom:10px}
h1{margin:0;font:600 clamp(20px,2.3vw,30px)/1.15 "Inter Tight",Inter,sans-serif;color:#f0f0f0;letter-spacing:-.005em}
.id-text p{margin:10px 0 0;color:var(--tx2);max-width:62ch}
.stats{display:flex;gap:1px;margin:0;background:#141414;border:1px solid #141414;border-radius:4px;overflow:hidden}
.stats>div{background:#242424;padding:10px 16px;min-width:96px}
.stats dt{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3)}
.stats dd{margin:4px 0 0;font:500 15px/1.2 var(--mono);color:#e6e6e6;white-space:nowrap;display:flex;align-items:center;gap:7px}
.sw{display:inline-block;width:11px;height:11px;border-radius:2px;box-shadow:0 0 0 1px #000}

/* panels */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:3px;margin-bottom:18px;box-shadow:0 1px 0 #2b2b2b inset}
.panel-h{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;padding:10px 14px;border-bottom:1px solid var(--line);
  background:linear-gradient(#2a2a2a,#252525);font:600 11px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#bdbdbd}
.panel-h em{font-style:normal;color:var(--tx3);letter-spacing:.06em}
.tri{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #8a8a8a}
.filters{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px}
.fgroup{display:flex;background:#1a1a1a;border:1px solid #121212;border-radius:3px;overflow:hidden}
.fgroup button{padding:6px 11px;font:500 11.5px/1 Inter,sans-serif;letter-spacing:.02em;text-transform:none;color:#8d8d8d;border-right:1px solid #121212}
.fgroup button:last-child{border-right:0}
.fgroup button:hover{color:#d0d0d0;background:#222}
.fgroup button.on{color:#fff;background:#3a3a3a}
[data-sec="bearing"] .fgroup button.on{background:var(--acc-d)}

/* drawings */
.drawing-wrap{padding:clamp(10px,2vw,22px);display:grid;gap:12px;
  background:
   linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/24px 24px,
   linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/24px 24px,#1b1b1b}
.drawing{display:block;width:100%;border:1px solid #2c2c2c;border-radius:2px;background:rgba(0,40,80,.12);transition:border-color .15s,background .15s;position:relative;cursor:zoom-in}
.drawing:hover{border-color:#4a4a4a;background:rgba(0,70,140,.16)}
.drawing.main img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain;padding:clamp(6px,1.5vw,18px)}
.drawing.paper{background:#1b1b1b}
.drawing.paper:hover{background:#1f1f1f}
.drawing-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.drawing-row .drawing img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;padding:14px 14px 30px}
.drawing-row .drawing span{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:11.5px;color:var(--tx2)}

/* grid of renders, Lightroom cells */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;background:var(--line);padding:1px}
.grid.big{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
.g-head{grid-column:1/-1;background:#202020;padding:16px 14px 10px;font:600 12px/1 Inter,sans-serif;letter-spacing:.06em;color:#cfcfcf;display:flex;gap:10px;align-items:baseline}
.g-head small{font-weight:400;color:var(--tx3);letter-spacing:.04em}
.cell{position:relative;background:var(--cell);padding:12px 12px 10px;cursor:zoom-in;transition:background .12s;outline:none;text-align:left;display:block;width:100%}
.cell:hover,.cell:focus-visible{background:var(--cell-h)}
.cell:focus-visible{box-shadow:inset 0 0 0 1px var(--acc)}
.cell .num{position:absolute;top:4px;left:10px;font:700 34px/1 "Inter Tight",Inter,sans-serif;color:#3a3a3a;pointer-events:none;transition:color .12s}
.cell:hover .num{color:#474747}
.cell .ph{position:relative;margin-top:22px;aspect-ratio:2551/1961;background:#d9d9d7;box-shadow:0 2px 6px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.6);overflow:hidden}
.cell .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.cell .ph img.ok{opacity:1}
.cell .cap{margin-top:10px;min-height:44px}
.cell .t{font-weight:500;font-size:13px;color:#e2e2e2;line-height:1.3}
.cell .s{font-size:12px;color:var(--tx2);margin-top:2px}
.cell .f{display:flex;justify-content:space-between;gap:8px;margin-top:7px;font:11px/1.2 var(--mono);color:var(--tx3)}
.cell .f span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell .badge{position:absolute;top:12px;right:12px;font:600 10px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:4px 6px;border-radius:2px;background:#1a1a1a;color:#9a9a9a}
.cell .badge.rim{color:#f3c879}
.empty{grid-column:1/-1;background:var(--cell);padding:40px;text-align:center;color:var(--tx3)}

.foot{max-width:1680px;margin:0 auto;padding:6px clamp(12px,2.4vw,32px) 40px;color:var(--tx3);font-size:12px}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:#0f0f0f;display:flex;flex-direction:column;user-select:none;-webkit-user-select:none}
.lb-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 14px;background:#161616;border-bottom:1px solid #000}
.lb-cap{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.lb-title{font-weight:600;color:#eee}
.lb-sub{color:var(--tx2);font-size:13px}
.lb-meta{font:12px var(--mono);color:var(--tx3)}
.lb-tools{display:flex;align-items:center;gap:6px;flex:none}
.lb-idx{font:12px var(--mono);color:var(--tx3);margin-right:8px}
.lb-tools button,.lb-dl{height:30px;min-width:38px;padding:0 10px;border-radius:3px;background:#262626;border:1px solid #0c0c0c;color:#cfcfcf;font:600 11.5px/28px Inter,sans-serif;letter-spacing:.04em;text-decoration:none;text-align:center}
.lb-tools button:hover,.lb-dl:hover{background:#333;color:#fff}
.lb-zoom.on{background:var(--acc-d);color:#fff}
.lb-stage{position:relative;flex:1;min-height:0}
.lb-view{position:absolute;inset:0;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:zoom-in;touch-action:pan-y pinch-zoom}
.lb-view.zoomed{display:block;overflow:auto;cursor:grab;touch-action:auto}
.lb-view.zoomed.drag{cursor:grabbing}
.lb-img{max-width:calc(100% - 24px);max-height:calc(100% - 24px);box-shadow:0 10px 40px rgba(0,0,0,.6);-webkit-user-drag:none}
.lb-view.zoomed .lb-img{max-width:none;max-height:none;display:block;margin:auto}
.lb-img.svg{background:#1b1b1b;padding:2%;width:min(96%,calc((100vh - 190px)*1.414));height:auto;max-height:calc(100% - 24px)}
.lb-img.svg.bearing{background:#123760}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:86px;font-size:44px;line-height:80px;color:#9a9a9a;background:rgba(20,20,20,.55);border-radius:3px}
.lb-nav:hover{color:#fff;background:rgba(40,40,40,.85)}
.lb-nav.prev{left:10px}.lb-nav.next{right:10px}
.lb-load{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px;border:2px solid #444;border-top-color:#ddd;border-radius:50%;animation:sp .8s linear infinite;opacity:0;transition:opacity .2s;pointer-events:none}
.lb.loading .lb-load{opacity:1}
@keyframes sp{to{transform:rotate(360deg)}}
.lb-strip{display:flex;gap:4px;overflow-x:auto;padding:8px 10px;background:#161616;border-top:1px solid #000;scrollbar-width:thin;scrollbar-color:#444 #161616}
.lb-strip button{flex:none;width:96px;height:74px;border:2px solid transparent;border-radius:2px;background:#2a2a2a center/cover no-repeat;opacity:.55;transition:opacity .15s}
.lb-strip button:hover{opacity:.9}
.lb-strip button.on{opacity:1;border-color:var(--acc)}

@media (max-width:1100px){.identity{grid-template-columns:1fr}.stats{justify-self:start}.drawing-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .top{flex-direction:column;align-items:flex-start;gap:8px;padding:10px 14px}
  .modules{font-size:15px}
  .grid,.grid.big{grid-template-columns:1fr 1fr}
  .cell{padding:8px}.cell .num{font-size:22px}.cell .ph{margin-top:16px}.cell .f{display:none}.cell .badge{display:none}
  .filters{margin-left:0}
  .stats{flex-wrap:wrap}
  .lb-nav{display:none}.lb-strip button{width:64px;height:50px}.lb-sub,.lb-meta{display:none}
}

/* hero: looping background video with poster fallback */
.hero{position:relative;margin:18px 0 18px;min-height:clamp(420px,44vw,640px);display:flex;align-items:flex-end;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#d9d9d7;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-1}
.hero-poster img,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%;display:block}
.hero-video{opacity:0;transition:opacity .8s ease}
.hero-video.on{opacity:1}
.hero-shade{position:absolute;inset:0;background:
  linear-gradient(to top,rgba(22,22,22,.97) 0%,rgba(22,22,22,.86) 24%,rgba(22,22,22,.35) 46%,rgba(22,22,22,0) 64%),
  linear-gradient(to right,rgba(22,22,22,.45),rgba(22,22,22,0) 45%)}
.hero .identity{position:relative;width:100%;padding:clamp(20px,3vw,36px) clamp(18px,3vw,40px)}
.hero .id-text p{color:#b8b8b8}
@media (max-width:800px){
  .hero{display:block;min-height:0;background:var(--panel)}
  .hero-media{position:relative;aspect-ratio:16/9;z-index:0}
  .hero-shade{background:linear-gradient(to top,var(--panel) 0%,rgba(35,35,35,0) 30%)}
  .hero .identity{padding:4px 16px 20px}
}