/* ============================================================================
   BIA GMBH — site skin
   assets/bia.css · load AFTER assets/style.css (one line per page)

   Built from measurements of drinksom.eu (17 Sep 2026) and the BIA brand
   system. Nothing in style.css or site.js is edited; this sheet redefines
   the tokens and overrides the components on top.

   What it takes from SŌM, measured:
     ground        white #FFF · surface #F5F5F5 · stroke #ECECEC · ink #0E0F11
     accent        one hot orange (SŌM #FF3A1F → BIA #FF2F00), used sparingly
     radius        4px on cards, buttons, inputs · 999px on chips
     mono          14px / 1.16 / -0.03em / UPPERCASE for menu, labels, buttons
     mono small    12px / 1.16 / -0.03em / UPPERCASE for badges, footnotes
     display       44px / 0.92 / -0.04em, medium weight, sentence case
     body          16px / 1.2
     header        transparent over the dark opening, dark glass once scrolled,
                   flips to a light theme over white sections (bia.js)
     hover         text links → opacity .7 · button label slides up · arrow
                   rotates -45° · timing 200–400ms, cubic-bezier(.95,0,.05,1)
     sections      120px vertical rhythm on desktop, 60px on mobile

   What it takes from the BIA brand system:
     the BIA GMBH logotype (outlined SVG, black on light / white on dark)
     PP Mori (text) · PP Fraktion Mono (data) · machine photographs untouched
   ==========================================================================*/

/* --- faces --------------------------------------------------------------- */
@font-face{font-family:'PP Mori';src:url('fonts/PPMori-Extralight.woff2') format('woff2');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'PP Mori';src:url('fonts/PPMori-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'PP Mori';src:url('fonts/PPMori-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'PP Mori';src:url('fonts/PPMori-Semibold.woff2') format('woff2');font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:'PP Mori';src:url('fonts/PPMori-SemiboldItalic.woff2') format('woff2');font-weight:500 600;font-style:italic;font-display:swap}
@font-face{font-family:'PP Mori';src:url('fonts/PPMori-Black.woff2') format('woff2');font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:'PP Fraktion Mono';src:url('fonts/PPFraktionMono-Regular.woff2') format('woff2');font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:'PP Fraktion Mono';src:url('fonts/PPFraktionMono-Bold.woff2') format('woff2');font-weight:600 700;font-style:normal;font-display:swap}

/* --- tokens -------------------------------------------------------------- */
:root{
  --bg:#FFFFFF;  --bg-2:#F5F5F5;  --panel:#F5F5F5;  --panel-2:#ECECEC;
  --ink:#0E0F11; --ink-dim:rgba(14,15,17,.6); --ink-faint:rgba(14,15,17,.4);
  --line:#ECECEC; --line-2:#F5F5F5;
  --accent:#FF2F00; --accent-light:#FFE6DC;
  --dark:#0E0F11; --on-dark:#FFFFFF; --on-dark-dim:rgba(255,255,255,.6);
  --dark-line:rgba(255,255,255,.16); --dark-panel:rgba(255,255,255,.08);
  --r:4px; --r-sm:4px; --r-pill:999px;
  --maxw:1440px; --gutter:clamp(20px,3vw,100px);
  --mono:'PP Fraktion Mono',SFMono-Regular,Menlo,monospace;
  --body:'PP Mori',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.95,0,.05,1); --ease-soft:cubic-bezier(.32,.72,0,1);
  --mono-l:14px; --mono-s:12px; --mono-ls:-0.03em; --mono-lh:1.16;
}
html,body{background:var(--bg);color:var(--ink)}
body{font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
body::before,body::after{display:none}                /* teal gradient + grain off */
/* the dark opening's ground: slow flames of teal and ember on near-black, under
   film grain — bia.js injects <div class="bia-fog"> into .hero and stretches it
   over hero + #current-stock (--opening-h) so both read as one surface.       */
.hero{overflow:visible;position:relative;background:#0A1315}
.hero::before,.hero::after{display:none}
.bia-fog{position:absolute;left:0;top:0;width:100%;height:var(--opening-h,100%);overflow:hidden;z-index:0;pointer-events:none;background:#0A1315}
.bia-fog i{position:absolute;display:block;border-radius:50%;filter:blur(48px);will-change:transform;mix-blend-mode:screen}
/* ember core wrapped in teal — the flame */
.bia-fog .b1{width:34vw;height:78vw;right:-6vw;top:-18vw;
  background:radial-gradient(closest-side,rgba(240,128,44,.9) 0%,rgba(220,90,50,.62) 24%,rgba(30,118,116,.55) 52%,rgba(20,82,86,.2) 76%,rgba(20,82,86,0) 100%);
  animation:bia-b1 18s ease-in-out infinite alternate;transform-origin:50% 60%}
/* teal drift, no ember */
.bia-fog .b2{width:70vw;height:70vw;left:-26vw;top:-16vw;
  background:radial-gradient(closest-side,rgba(34,132,128,.62) 0%,rgba(22,92,94,.3) 45%,rgba(22,92,94,0) 100%);
  animation:bia-b2 23s ease-in-out infinite alternate}
/* ember rising from below */
.bia-fog .b3{width:44vw;height:60vw;left:26vw;bottom:-40vw;
  background:radial-gradient(closest-side,rgba(246,146,54,.9) 0%,rgba(222,96,48,.6) 28%,rgba(28,112,108,.46) 58%,rgba(26,106,104,0) 100%);
  animation:bia-b3 15s ease-in-out infinite alternate}
.bia-fog .shade{inset:0;border-radius:0;filter:none;mix-blend-mode:normal;background:linear-gradient(180deg,rgba(10,19,21,.1),rgba(10,19,21,.36));animation:none}
.bia-fog .grain{inset:0;border-radius:0;filter:none;mix-blend-mode:overlay;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px;animation:bia-grain .5s steps(1) infinite}
@keyframes bia-b1{0%{transform:translate(0,0) rotate(-24deg) scale(1)}50%{transform:translate(-18vw,10vw) rotate(-8deg) scale(1.12)}100%{transform:translate(-34vw,-4vw) rotate(-30deg) scale(.94)}}
@keyframes bia-b2{0%{transform:translate(0,0) scale(1)}50%{transform:translate(30vw,18vw) scale(1.2)}100%{transform:translate(12vw,34vw) scale(.9)}}
@keyframes bia-b3{0%{transform:translate(0,0) rotate(6deg) scale(1)}50%{transform:translate(-20vw,-18vw) rotate(-10deg) scale(1.25)}100%{transform:translate(24vw,-8vw) rotate(14deg) scale(1.05)}}
@keyframes bia-grain{
  0%{background-position:0 0}   17%{background-position:-70px 40px}  34%{background-position:50px -90px}
  51%{background-position:-120px -30px} 68%{background-position:90px 110px} 85%{background-position:-40px -140px} 100%{background-position:0 0}
}
.hero .wrap{position:relative;z-index:1}
.hero .float-chip{z-index:1}
#current-stock{background:transparent;position:relative;z-index:1}
@media (max-width:900px){.bia-fog i{filter:blur(36px)}.bia-fog .b1{width:70vw;height:140vw}.bia-fog .b2{width:120vw;height:120vw}.bia-fog .b3{width:90vw;height:110vw}}
@media (prefers-reduced-motion:reduce){.bia-fog i{animation:none}}
.wrap{max-width:var(--maxw);padding:0 var(--gutter)}
::selection{background:var(--ink);color:#fff}
p,li{color:var(--ink);line-height:1.35}
h1,h2,h3,h4{color:inherit;font-weight:600;letter-spacing:-0.04em;line-height:0.96;text-transform:none}
strong,b{color:inherit;font-weight:600}
img{max-width:100%}

/* mono utilities — the one voice for everything that is data or wayfinding */
.tag,.live-status,.metric span,.card .cat,.card .meta,.badge,.chip,.pill,
.est-badge,.polaroid .nameplate,.spec-table td:first-child,.doc-dl-ic,.doc-dl-go,
.foot-bottom,footer h4,.marquee span,.feature .num,.loop-card .bar span,
.loop-card .bd .n,.cat-section-head span,.svc-tile .more,.field label,
.admin-table th,.admin-table button,.float-chip,.stat span,.metric i,.link-more,.btn,
.nav-side a,nav.links a,.who,.est,.price-note{
  font-family:var(--mono);font-weight:400;font-size:var(--mono-l);
  line-height:var(--mono-lh);letter-spacing:var(--mono-ls);text-transform:uppercase;
}
.tag{color:var(--ink-dim);display:block}
.tag::before{content:none}

/* --- announcement strip (the empty .ticker div) -------------------------- */
.ticker{
  height:20px;background:var(--accent);color:var(--accent-light);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:var(--mono-s);letter-spacing:var(--mono-ls);
  text-transform:uppercase;line-height:1.16;
  -webkit-mask-image:none;mask-image:none;
}
.ticker::before{content:"Used industrial machinery \00b7\0020 D\00fcsseldorf, Germany \00b7\0020 Worldwide shipping"}

/* --- header ---------------------------------------------------------------
   One row: menu left · logotype centred · Login + Contact right.
   Themes: .theme-dark (default, over the dark opening) / .theme-light.
   .is-scrolled adds the glass. bia.js flips the classes.                    */
header.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:32px;
  height:70px;padding:0 var(--gutter);
  background:transparent;border-bottom:1px solid transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:background-color .3s,border-color .3s,color .3s;
  color:#fff;
}
header.nav.is-scrolled{
  background:rgba(14,15,17,.8);border-bottom-color:rgba(255,255,255,.08);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
header.nav.theme-light{color:var(--ink)}
header.nav.theme-light.is-scrolled{background:rgba(255,255,255,.9);border-bottom-color:var(--line)}
.nav-inner{display:contents}
.nav-side.left{display:none}
/* logotype */
.brand{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:block;width:124px;aspect-ratio:4.404/1;
  background:url('logo/bia-wordmark-white.svg') center/contain no-repeat;
  transition:background-image .3s,opacity .2s;
}
header.nav.theme-light .brand{background-image:url('logo/bia-wordmark-black.svg')}
.brand:hover{opacity:.7}
.brand .globe,.brand-name{display:none!important}
/* menu */
nav.links{
  order:1;margin-right:auto;display:flex;align-items:center;justify-content:flex-start;gap:20px;
  padding:0;max-width:none;margin-left:0;flex-wrap:nowrap;
}
nav.links a,.nav-side a{
  color:inherit;background:none;border:0;border-radius:0;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;
  text-decoration:none;opacity:1;transition:opacity .2s;white-space:nowrap;
}
nav.links a:hover,.nav-side a:hover{color:inherit;opacity:.7;border:0;background:none}
nav.links a.active{color:inherit;background:none;border:0;box-shadow:none;position:relative}
nav.links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;
}
.nav-side.right{order:3;margin-left:auto;display:flex;align-items:center;gap:32px}
/* the last right-hand link becomes the SŌM button: 40px, 4px, label slides */
.nav-side.right a:last-child{
  height:40px;padding:0 14px;border-radius:var(--r);display:inline-flex;align-items:center;gap:6px;
  background:#fff;color:var(--ink);opacity:1;overflow:hidden;position:relative;
  transition:background-color .3s,color .3s;
}
header.nav.theme-light .nav-side.right a:last-child{background:var(--ink);color:#fff}
.nav-side.right a:last-child::after{
  content:"\2197";display:inline-block;transition:transform .6s cubic-bezier(.25,.46,.45,.94);
}
.nav-side.right a:last-child:hover{opacity:1}
.nav-side.right a:last-child:hover::after{transform:rotate(-45deg)}

@media (max-width:900px){
  header.nav{height:auto;flex-wrap:wrap;gap:0;padding:12px var(--gutter) 0}
  .brand{position:static;transform:none;order:1;width:108px}
  .nav-side.right{order:2;gap:16px;margin-left:auto}
  .nav-side a{display:inline}
  nav.links{
    order:3;flex-basis:100%;margin:12px calc(var(--gutter) * -1) 0;padding:12px var(--gutter);
    overflow-x:auto;scrollbar-width:none;border-top:1px solid rgba(255,255,255,.08);gap:24px;
  }
  header.nav.theme-light nav.links{border-top-color:var(--line)}
  nav.links::-webkit-scrollbar{display:none}
  nav.links a{padding:0;font-size:var(--mono-l)}
}

/* --- the dark opening: hero + live stock --------------------------------
   Every page opens on the near-black ground (SŌM's hero), then goes white. */
.hero,#current-stock{color:#fff}
.hero{padding:96px 0 40px!important;margin-top:-70px;padding-top:166px!important}
.hero .tag{color:var(--on-dark-dim);margin-bottom:20px}
.hero h1{
  font-size:clamp(34px,4.6vw,56px);line-height:0.96;letter-spacing:-0.04em;font-weight:600;
  text-transform:none;max-width:22ch;margin-bottom:20px;color:#fff;
}
.hero h1 .dim{color:var(--on-dark-dim);font-weight:400}
.hero p.sub{font-size:18px;line-height:1.25;color:#fff;max-width:520px;margin-bottom:28px}
.hero p.sub{color:rgba(255,255,255,.85)}
/* the floating chips become one quiet stack, SŌM's glass card */
.float-chip{
  animation:none;transform:none;position:absolute;right:var(--gutter);
  background:rgba(255,255,255,.08);border:1px solid var(--dark-line);border-radius:var(--r);
  box-shadow:none;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:12px 14px;color:#fff;font-size:var(--mono-s);
}
.float-chip .fdot{background:var(--accent)}
.float-chip.c1{top:104px;right:var(--gutter)}
.float-chip.c2{top:152px;right:var(--gutter)}
.float-chip.c3{top:200px;right:var(--gutter)}
@media (max-width:1050px){.float-chip{display:none}}

#current-stock{padding:0 0 56px!important}
#current-stock .section-head{margin-bottom:24px;display:flex;align-items:baseline;gap:20px}
#current-stock .section-head .tag{color:var(--on-dark-dim);margin:0}
#current-stock .section-head h2{font-size:var(--mono-l);font-family:var(--mono);font-weight:400;letter-spacing:var(--mono-ls);text-transform:uppercase;margin:0;color:#fff}
#current-stock .section-head h2::after{content:""}
.live-panel{
  background:var(--dark-panel);border:1px solid var(--dark-line);border-radius:var(--r);
  backdrop-filter:none;-webkit-backdrop-filter:none;padding:20px 22px;color:#fff;
}
.live-status{color:var(--on-dark-dim);margin-bottom:18px}
.live-status .pulse{background:var(--accent)}
.live-metrics{gap:20px}
.metric span{color:var(--on-dark-dim);font-size:var(--mono-s);margin-bottom:6px}
.metric b{font-size:clamp(26px,2.6vw,36px);font-weight:600;letter-spacing:-0.04em;line-height:1;color:#fff}
.metric i{color:var(--accent);font-size:var(--mono-s)}
.stock-marquee::before,.stock-marquee::after{display:none}   /* no edge fades over the moving ground */
.stock-track{gap:16px}
.stock-track .card{width:344px}
#current-stock .link-more{color:#fff}
#current-stock .link-more:hover{opacity:.7;color:#fff}

/* inner pages: shorter dark hero */
.hero[style*="padding"]{padding:150px 0 44px!important}

/* --- buttons ------------------------------------------------------------- */
.btn{
  height:48px;padding:0 16px;border-radius:var(--r);gap:8px;
  border:1px solid var(--ink);background:transparent;color:var(--ink);
  backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible;
  transition:background-color .2s,color .2s,border-color .2s;transform:none;
}
.btn:hover{transform:none;border-color:var(--ink);background:var(--ink);color:#fff}
.btn::after{content:"\2192";transition:transform .3s var(--ease)}
.btn:hover::after{transform:translateX(3px)}
.btn.no-arrow::after{content:none}
.btn-solid{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-solid:hover{background:#1a1b1e;border-color:#1a1b1e;color:#fff}
/* on the dark opening the polarity flips */
.hero .btn{border-color:rgba(255,255,255,.4);color:#fff}
.hero .btn:hover{background:#fff;color:var(--ink);border-color:#fff}
.hero .btn-solid{background:#fff;color:var(--ink);border-color:#fff}
.hero .btn-solid:hover{background:rgba(255,255,255,.85);border-color:rgba(255,255,255,.85);color:var(--ink)}
.btn-row{gap:10px}
.link-more{color:var(--ink);transition:opacity .2s}
.link-more:hover{color:var(--ink);opacity:.7}
.link-more::after{content:" \2192"}

/* --- sections & headings ------------------------------------------------- */
section.block{padding:96px 0}
section.block.tight{padding:48px 0}
.rule{border-top:1px solid var(--line)}
.section-head{margin-bottom:40px;max-width:760px}
.section-head .tag{margin-bottom:20px}
.section-head h2,.cta-band h2,.loop-title,.hero h1{font-family:var(--body)}
.section-head h2{
  font-size:clamp(30px,3.1vw,44px);font-weight:600;letter-spacing:-0.04em;line-height:0.92;
  text-transform:none;margin-bottom:16px;color:var(--ink);
}
.section-head h2 em{color:var(--ink-faint);font-weight:400}
.section-head p{font-size:16px;line-height:1.2;color:var(--ink);max-width:408px}
h2[style]{font-family:var(--body)!important;font-weight:600!important;letter-spacing:-0.04em!important;line-height:0.96!important;text-transform:none}
.block p[style*="font-size:17px"]{font-size:20px!important;line-height:1.2!important;color:var(--ink)!important;letter-spacing:-0.02em}
.block p[style*="font-size:16px"]{font-size:16px!important;line-height:1.35!important}

/* --- chips / pills (SŌM's filter row) ------------------------------------ */
.cat-rail{gap:4px;margin-bottom:40px;position:relative;padding-top:26px}
.cat-rail::before{
  content:"Filter by machine type:";position:absolute;top:0;left:0;
  font-family:var(--mono);font-size:var(--mono-l);letter-spacing:var(--mono-ls);text-transform:uppercase;color:var(--ink);
}
.chip,.pill{
  background:var(--bg-2);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--r-pill);padding:13px 14px;font-size:var(--mono-l);letter-spacing:-0.02em;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:background-color .2s,color .2s,border-color .2s;line-height:1;
}
.chip:hover,.pill:hover{background:var(--panel-2);border-color:var(--line);color:var(--ink)}
.chip.on,.pill.on{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:none}
#req-cats{gap:4px!important}

/* --- search -------------------------------------------------------------- */
.searchbar{
  margin-top:40px;height:58px;padding:0 20px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--bg-2);backdrop-filter:none;-webkit-backdrop-filter:none;margin-bottom:28px;
  transition:border-color .2s;
}
.searchbar:focus-within{border-color:var(--ink)}
.searchbar .dot{display:none}
.searchbar::before{
  content:"Search:";font-family:var(--mono);font-size:var(--mono-l);letter-spacing:var(--mono-ls);
  text-transform:uppercase;color:var(--ink);flex:none;
}
.searchbar input{
  color:var(--ink);font-family:var(--mono);font-size:var(--mono-l);letter-spacing:var(--mono-ls);
  text-transform:uppercase;
}
.searchbar input::placeholder{color:var(--ink-dim);text-transform:uppercase}

/* --- machine cards (SŌM product card) ------------------------------------
   Photographs are never filtered, tinted or blurred. They are the product. */
.grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--ink);
  transition:opacity .2s,border-color .2s;
}
.card:hover{transform:none;border-color:rgba(14,15,17,.3);opacity:.95}
.card .thumb{aspect-ratio:4/3;background:#fff}
.card .thumb img{transition:none;filter:none}
.card:hover .thumb img{transform:none}
.badge{
  top:12px;left:12px;background:#fff;border:1px solid var(--line);color:var(--ink);
  font-size:var(--mono-s);padding:8px 10px;border-radius:var(--r-pill);gap:6px;
}
.badge::before{width:6px;height:6px}
.badge.available::before{background:var(--accent)}
.badge.reserved{color:var(--ink)}
.badge.reserved::before{background:var(--ink-faint)}
.badge.sold{color:var(--ink-dim)}
.badge.sold::before{background:var(--ink-faint)}
.card .body{padding:16px 16px 18px;gap:8px;border-top:1px solid var(--line)}
.card .cat{color:var(--ink-dim);font-size:var(--mono-s)}
.card h3{font-size:20px;font-weight:600;letter-spacing:-0.04em;line-height:1.02;color:var(--ink)}
.card .meta{color:var(--ink-dim);font-size:var(--mono-s);padding-top:8px;gap:14px}
.card-price{
  font-family:var(--body);font-size:16px;font-weight:600;letter-spacing:-0.04em;text-transform:none;
  color:var(--ink);border-top:1px solid var(--line);margin-top:6px;padding-top:12px;
}
/* cards on the dark opening: SŌM's glass card — translucent, blurred, white/16 stroke */
.stock-track .card{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.stock-track .card:hover{border-color:rgba(255,255,255,.4);opacity:1}
.stock-track .card .thumb{background:rgba(255,255,255,.04)}
.stock-track .card .body{border-top-color:rgba(255,255,255,.16)}
.stock-track .card .cat,.stock-track .card .meta{color:rgba(255,255,255,.6)}
.stock-track .card h3,.stock-track .card-price{color:#fff}
.stock-track .card-price{border-top-color:rgba(255,255,255,.16)}
.stock-track .badge{background:rgba(14,15,17,.55);border-color:rgba(255,255,255,.2);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.stock-track .badge.available::before{background:var(--accent)}
.stock-track .badge.reserved::before,.stock-track .badge.sold::before{background:rgba(255,255,255,.5)}
/* same glass for the float chips and the live panel, so the opening reads as one material */
.float-chip,.live-panel{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.live-panel{border-radius:var(--r)}

/* grouped catalog headings: "CATEGORY (N)" in mono, hairline above */
.cat-section{margin-bottom:60px}
.cat-section-head{
  border-bottom:0;border-top:1px solid var(--line);padding:24px 0 0;margin:0 0 24px;gap:8px;
}
.cat-section-head h2{
  font-family:var(--mono);font-size:16px;font-weight:400;letter-spacing:-0.02em;
  text-transform:uppercase;color:var(--ink);line-height:1.2;
}
.cat-section-head h2::before{content:none}
.cat-section-head span{color:var(--ink-dim);font-size:16px;letter-spacing:-0.02em}
.cat-section-head span::before{content:"("}
.cat-section-head span::after{content:")"}

/* --- products & services (loop cards → SŌM lab cards) -------------------- */
.loop-band{padding:96px 0;border-top:1px solid var(--line);border-bottom:0;color:var(--ink)}
.loop-head{text-align:left;max-width:none;margin:0 0 40px}
.loop-title{
  font-family:var(--body);font-weight:600;text-transform:none;
  font-size:clamp(30px,3.1vw,44px);letter-spacing:-0.04em;line-height:0.92;color:var(--ink);
}
.loop-grid{max-width:none;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1050px){.loop-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.loop-grid{grid-template-columns:1fr}}
.loop-card{
  background:#FBFBFB;border:1px solid var(--line);border-radius:var(--r);
  backdrop-filter:none;-webkit-backdrop-filter:none;transition:box-shadow .2s,border-color .2s;
  display:flex;flex-direction:column;
}
.loop-card:hover{transform:none;border-color:var(--line);box-shadow:0 4px 12px rgba(14,15,17,.08)}
.loop-card .bar{background:transparent;border-bottom:1px solid var(--line);padding:14px 18px;gap:0}
.loop-card .bar i{display:none}
.loop-card .bar span{margin:0;color:var(--ink-dim);font-size:var(--mono-s)}
.loop-card .bd{padding:22px 18px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.loop-card .bd .n{color:var(--ink-dim);font-size:var(--mono-s)}
.loop-card .bd h3{
  font-family:var(--body);font-weight:600;text-transform:none;font-size:20px;
  letter-spacing:-0.04em;line-height:1.02;color:var(--ink);margin:0;
}
.loop-card .bd p{font-family:var(--body);font-size:15px;line-height:1.3;color:var(--ink);letter-spacing:0}

/* manufacturer marquee */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;background:#fff;color:var(--ink)}
.marquee span{color:var(--ink-dim);font-size:var(--mono-l);padding:0 28px;font-weight:400}

/* --- feature tiles / panels ---------------------------------------------- */
.feat-grid{gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.feature,.panel,.svc-tile{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  backdrop-filter:none;-webkit-backdrop-filter:none;padding:24px 20px;color:var(--ink);
}
.feature .num{color:var(--ink-dim);font-size:var(--mono-s);margin-bottom:28px;font-weight:400}
.feature h3,.svc-tile h3{font-size:20px;font-weight:600;letter-spacing:-0.04em;line-height:1.02;margin-bottom:10px}
.feature p,.svc-tile p{font-size:15px;line-height:1.3;color:var(--ink)}
.svc-tile:hover{transform:none;border-color:rgba(14,15,17,.3)}
.svc-tile .more{color:var(--ink);font-size:var(--mono-s)}

/* --- founder --------------------------------------------------------------
   SŌM's community cards: photo, flat, names in the type of the page.        */
.founder{gap:64px;align-items:center}
.founder-polaroid{padding:0}
.polaroid{
  background:transparent;border:0;border-radius:var(--r);padding:0;box-shadow:none;overflow:hidden;
}
.polaroid .photo{border-radius:var(--r);background:var(--bg-2);border:1px solid var(--line)}
.polaroid .photo img{filter:none}
.polaroid .nameplate{
  left:12px;bottom:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:none;padding:10px 12px;letter-spacing:var(--mono-ls);line-height:1.3;
}
.polaroid .nameplate b{font-size:var(--mono-s);color:var(--ink);font-weight:400}
.polaroid .nameplate span{font-size:var(--mono-s);color:var(--ink-dim)}
.est-badge{
  transform:none;right:12px;bottom:12px;background:var(--accent);border:0;border-radius:var(--r-pill);
  box-shadow:none;padding:10px 12px;color:#fff;display:flex;gap:6px;align-items:baseline;text-align:left;
}
.est-badge .est-lead,.est-badge .est-year,.est-badge .est-sub{
  display:inline;font-size:var(--mono-s);color:#fff;letter-spacing:var(--mono-ls);font-weight:400;line-height:1;margin:0;
}
.est-badge .est-sub{display:none}
.founder h2[style]{font-size:clamp(30px,3.1vw,44px)!important;margin:20px 0 16px!important}
.founder p[style]{color:var(--ink)!important;font-size:16px!important;line-height:1.35!important}
/* about page (no portrait yet) */
.founder .photo{aspect-ratio:4/5;display:grid;place-items:center;border-radius:var(--r);background:var(--bg-2);border:1px solid var(--line)}
.founder .who{margin-top:12px;color:var(--ink)}
.founder .est{color:var(--ink-dim);margin-top:4px}

/* --- CTA bands: dark blocks, like SŌM's black sections ------------------- */
.cta-band{
  background:var(--dark);color:#fff;border:0;border-radius:var(--r);padding:64px 48px;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.cta-band::before{content:none}
.cta-band .tag{color:var(--on-dark-dim)}
.cta-band h2{
  font-size:clamp(30px,3.1vw,44px);font-weight:600;letter-spacing:-0.04em;line-height:0.92;
  text-transform:none;margin:20px 0 16px;max-width:600px;color:#fff;
}
.cta-band p{color:rgba(255,255,255,.85);font-size:16px;line-height:1.3;max-width:460px;margin-bottom:32px}
.cta-band .btn{border-color:rgba(255,255,255,.4);color:#fff}
.cta-band .btn:hover{background:#fff;color:var(--ink);border-color:#fff}
.cta-band .btn-solid{background:#fff;color:var(--ink);border-color:#fff}
.cta-band .btn-solid:hover{background:rgba(255,255,255,.85);border-color:rgba(255,255,255,.85);color:var(--ink)}
.cta-band .tag.no-slash{color:var(--on-dark-dim);margin-bottom:10px!important}
.cta-band label{color:#fff;font-family:var(--mono);font-size:var(--mono-l);letter-spacing:var(--mono-ls);text-transform:uppercase}
.cta-band input[type=radio]{accent-color:var(--accent)}
.cta-band .pill{background:rgba(255,255,255,.08);border-color:var(--dark-line);color:#fff}
.cta-band .pill:hover{background:rgba(255,255,255,.16)}
.cta-band .pill.on{background:#fff;color:var(--ink);border-color:#fff}
.cta-band #req-email{
  height:48px;background:rgba(255,255,255,.08)!important;border:1px solid var(--dark-line)!important;
  border-radius:var(--r)!important;color:#fff!important;font-family:var(--mono)!important;
  font-size:var(--mono-l)!important;letter-spacing:var(--mono-ls);text-transform:uppercase;padding:0 16px!important;
}
.cta-band #req-email::placeholder{color:var(--on-dark-dim);text-transform:uppercase}
.cta-band #req-email:focus{border-color:#fff!important}
#req-msg{color:var(--accent-light)!important}
.cta-band p[style*="font-size:12px"]{color:var(--on-dark-dim)!important;font-family:var(--mono);font-size:var(--mono-s)!important;letter-spacing:var(--mono-ls);text-transform:uppercase;line-height:1.3}
@media (max-width:900px){.cta-band{padding:40px 24px}}

/* --- forms --------------------------------------------------------------- */
.field{gap:8px;margin-bottom:12px}
.field label{color:var(--ink-dim);font-size:var(--mono-s)}
.field input,.field textarea,.field select{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);color:var(--ink);
  font-size:16px;padding:14px 16px;transition:border-color .2s;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--ink)}
.field input::placeholder{color:var(--ink-faint)}
.panel form .btn{margin-top:8px}

/* --- machine detail page ------------------------------------------------- */
.detail{gap:24px}
.gallery{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:none;-webkit-backdrop-filter:none}
.gallery .main{background:#fff}
.gallery .main img{filter:none}
.gallery .desc{color:var(--ink);font-size:16px;line-height:1.35;padding:20px 20px}
.detail-panel{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:24px 20px;backdrop-filter:none;-webkit-backdrop-filter:none;top:90px}
.detail-panel h1{font-size:32px;font-weight:600;letter-spacing:-0.04em;line-height:0.98;text-transform:none;margin:16px 0 20px}
.spec-table{font-size:15px;margin-bottom:20px}
.spec-table td{padding:10px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.spec-table td:first-child{color:var(--ink-dim);font-size:var(--mono-s);padding-top:12px}
.price-note{color:var(--ink);font-size:var(--mono-l);margin-bottom:20px}
.doc-dl{background:#fff;border:1px solid var(--line);border-radius:var(--r);color:var(--ink);padding:12px 14px}
.doc-dl:hover{border-color:rgba(14,15,17,.3)}
.doc-dl-ic{color:var(--ink-dim);font-size:var(--mono-s)}
.doc-dl-nm{font-size:15px}
.doc-dl-go{color:var(--ink);font-size:var(--mono-s)}
.vid-wrap{border-top:1px solid var(--line)}
.detail .badge{position:static;display:inline-flex}

/* --- legal pages --------------------------------------------------------- */
.legal h1{font-size:clamp(30px,3.1vw,44px);font-weight:600;letter-spacing:-0.04em;line-height:0.92;margin:16px 0 40px}
.legal h2{font-size:24px;font-weight:600;letter-spacing:-0.04em;line-height:1.02;margin:40px 0 12px}
.legal h3{font-size:18px;font-weight:600;letter-spacing:-0.03em;margin:24px 0 8px}
.legal p,.legal li{font-size:16px;line-height:1.45;color:var(--ink);max-width:720px;margin-bottom:12px}
.legal ul{padding-left:20px}
.legal b{font-weight:600}

/* --- footer (SŌM: white, hairline, mono columns) ------------------------- */
footer{background:#fff;color:var(--ink);border-top:1px solid var(--line);padding:80px 0 20px;position:relative}
.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:64px}
footer h4{color:var(--ink-dim);font-size:var(--mono-l);margin-bottom:16px;font-weight:400}
footer a,footer p{
  color:var(--ink);font-family:var(--mono);font-size:var(--mono-l);letter-spacing:var(--mono-ls);
  text-transform:uppercase;line-height:1.16;margin-bottom:8px;
}
footer p{color:var(--ink);text-transform:none;letter-spacing:-0.02em;line-height:1.35}
footer a{transition:opacity .2s}
footer a:hover{color:var(--ink);opacity:.7}
footer p[style],footer p.legal{color:var(--ink-faint)!important;font-family:var(--body)!important;font-size:12px!important;text-transform:none;letter-spacing:0;line-height:1.35;max-width:720px}
.foot-bottom{border-top:1px solid var(--line);padding-top:20px;color:var(--ink-dim);font-size:var(--mono-s);letter-spacing:var(--mono-ls);text-transform:uppercase}
.foot-bottom a{display:inline;text-transform:uppercase;font-size:var(--mono-s)}
footer .foot-grid > div:first-child h4{
  width:180px;aspect-ratio:4.404/1;font-size:0;
  background:url('logo/bia-wordmark-black.svg') left center/contain no-repeat;margin-bottom:20px;
}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}

/* --- admin (kept usable, not styled further) ----------------------------- */
.admin-table{background:#fff;border:1px solid var(--line);border-radius:var(--r);backdrop-filter:none}
.admin-table th{color:var(--ink-dim)}
.admin-table button{border-radius:var(--r);border-color:var(--line);color:var(--ink)}
.admin-table button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* --- motion -------------------------------------------------------------- */
.rev{transform:translateY(12px);transition:opacity .5s ease,transform .5s var(--ease-soft)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* --- mobile rhythm ------------------------------------------------------- */
@media (max-width:900px){
  .ticker{display:none}
  header.nav{background:var(--dark)}
  header.nav.theme-light{background:#fff}
  .hero,.hero[style*="padding"]{margin-top:0}
  section.block{padding:60px 0}
  .loop-band{padding:60px 0}
  .hero{padding:44px 0 36px!important}
  .hero[style*="padding"]{padding:40px 0 36px!important}
  .hero h1{font-size:34px}
  .live-metrics{grid-template-columns:1fr 1fr}
  .stock-track .card{width:300px}
  footer{padding:60px 0 20px}
}

/* --- header: negative (difference) blend ---------------------------------
   The bar has no background of its own any more. Everything in it is white
   and blended with `difference`, so over the dark opening it reads white,
   over white sections it reads black, and over photographs it inverts —
   the Stüdyo / newkid effect. bia.js's theme classes are neutralised.     */
header.nav,header.nav.is-scrolled,header.nav.theme-light,header.nav.theme-light.is-scrolled{
  background:transparent!important;border-bottom-color:transparent!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  color:#fff!important;mix-blend-mode:difference;isolation:auto;
}
header.nav .brand,header.nav.theme-light .brand{background-image:url('logo/bia-wordmark-white.svg')!important}
header.nav .nav-side.right a:last-child,header.nav.theme-light .nav-side.right a:last-child{background:#fff!important;color:#000!important}
header.nav nav.links a,header.nav .nav-side a{color:#fff!important}
@media (max-width:900px){
  header.nav,header.nav.theme-light{background:transparent!important}
  header.nav nav.links,header.nav.theme-light nav.links{border-top-color:rgba(255,255,255,.25)!important}
}

/* --- status badges: the same glass as the cards, colour only in the dot ---
   available → green · reserved → yellow · sold → red                        */
:root{--st-green:57,255,106; --st-yellow:255,201,53; --st-red:255,59,47}
.badge{
  --c:var(--st-green);
  background:rgba(14,15,17,.42)!important;border:1px solid rgba(255,255,255,.22)!important;
  color:#fff!important;text-shadow:none;
  backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.12)!important;
  padding:8px 11px 8px 9px;font-weight:400;letter-spacing:-0.02em;
}
.badge::before{width:7px;height:7px;background:rgb(var(--c))!important;box-shadow:0 0 6px rgba(var(--c),.7)}
.badge.reserved{--c:var(--st-yellow)}
.badge.sold{--c:var(--st-red);color:rgba(255,255,255,.75)!important}
.detail .badge{position:static;display:inline-flex}

/* --- header, scrolled: a solid block ---------------------------------------
   The negative blend only while the bar sits at the very top. As soon as the
   page scrolls, the bar becomes SŌM's dark glass block — white type on
   near-black, always legible, whatever is passing underneath.              */
header.nav.is-scrolled,header.nav.theme-light.is-scrolled{
  mix-blend-mode:normal;
  background:rgba(14,15,17,.86)!important;
  backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;
  border-bottom-color:rgba(255,255,255,.08)!important;
  transition:background-color .3s,border-color .3s;
}