/* Auto Hope: palette from the logo */
:root { --red:#d92b27; --text:#262626; --mute:#6a6a6a; --line:#e2e5e7; --soft:#f3f5f6; --max:1100px; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; font-family:"Archivo",Arial,sans-serif; line-height:1.55; color:var(--text); background:#fff; -webkit-font-smoothing:antialiased; }
main { flex:1; display:flex; flex-direction:column; }
main > section { flex:1; display:flex; flex-direction:column; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid var(--red); outline-offset:2px; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 20px; }
h1, h2, h3 { color:#000; line-height:1.2; font-weight:700; }
h1 { font-size:clamp(2rem,4.8vw,3rem); }
h2 { font-size:1.4rem; }
h3 { font-size:1.05rem; font-weight:600; }

.btn { display:inline-block; padding:14px 24px; font-family:inherit; font-size:.92rem; font-weight:600; border:2px solid transparent; border-radius:3px; cursor:pointer; transition:background .15s,color .15s,border-color .15s; }
.btn.red { background:var(--red); color:#fff; }
.btn.red:hover { background:#000; }
.btn.black, .btn.dark { background:#000; color:#fff; text-align:center; }
.btn.black:hover { background:#fff; color:#000; }
.btn.dark:hover { background:var(--red); }
.btn.ghost { border-color:var(--line); color:#000; }
.btn.ghost:hover { border-color:#000; }

/* Main bar */
.bar { position:sticky; top:0; z-index:20; background:#fff; border-bottom:4px solid #000; }
.bar-in { display:flex; align-items:center; justify-content:space-between; height:84px; }
.logo img { height:62px; width:auto; }
.menu { display:flex; align-items:center; gap:2px; }
.menu a { position:relative; padding:30px 14px; font-size:.92rem; font-weight:600; }
.menu a:not(.cta)::after { content:""; position:absolute; left:14px; right:14px; bottom:0; height:4px; background:var(--red); transform:scaleX(0); transition:transform .15s; }
.menu a:not(.cta):hover::after, .menu a[aria-current="page"]::after { transform:scaleX(1); }
.menu .cta { margin-left:10px; padding:12px 24px; background:#000; color:#fff; border-radius:3px; transition:background .15s; }
.menu .cta:hover, .menu .cta[aria-current="page"] { background:var(--red); }
.burger { display:none; width:44px; height:44px; background:none; border:0; cursor:pointer; }
.burger span { display:block; position:relative; width:24px; height:3px; margin:0 auto; background:#000; }
.burger span::before, .burger span::after { content:""; position:absolute; left:0; width:100%; height:3px; background:#000; }
.burger span::before { top:-8px; }
.burger span::after { top:8px; }

/* Home */
.hero { position:relative; overflow:hidden; background:#000; color:#fff; border-bottom:4px solid var(--red); }
.hero h1 { color:#fff; font-size:clamp(2.4rem,6vw,4rem); }
.hero-in { position:relative; z-index:1; padding-block:88px 100px; }
.hero p { max-width:32rem; margin:14px 0 28px; font-size:1.1rem; color:#d0d0d0; }
.finder { display:flex; max-width:560px; background:#fff; border:2px solid #fff; border-radius:3px; }
.finder:focus-within { border-color:var(--red); }
.finder input { flex:1; min-width:0; padding:15px 16px; font:inherit; color:#000; border:0; outline:none; }
.finder .btn { border-radius:0; }
.gear { position:absolute; z-index:0; right:-140px; top:50%; width:min(70vw,640px); transform:translateY(-50%); }
.teeth { transform-origin:200px 200px; animation:spin 90s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.block { padding-block:36px 0; }
.head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; }
.head a { font-size:.92rem; font-weight:600; color:var(--red); }
.head a:hover { text-decoration:underline; }
.chips { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.chip { display:flex; align-items:center; gap:16px; padding:16px 18px; background:var(--soft); border-bottom:3px solid #000; border-radius:3px; font-weight:600; transition:border-color .15s; }
.chip:hover { border-color:var(--red); }
.chip img { width:68px; height:68px; object-fit:contain; mix-blend-mode:multiply; }
.logos { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.logos a { display:flex; align-items:center; justify-content:center; height:110px; background:#f8f8f8; border:1px solid var(--line); border-bottom:3px solid var(--red); border-radius:3px; }
.logos img { max-height:62px; width:auto; }
.perks { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding-block:36px 44px; }
.perks > div { padding-left:16px; border-left:4px solid var(--red); }
.perks p { color:var(--mute); }

/* Red call-to-action band, pinned to the bottom of each page */
.band { margin-top:auto; background:var(--red); color:#fff; }
.band-in { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding-block:30px; }
.band h2 { color:#fff; font-size:1.5rem; }

/* Inner pages */
.page-head { padding-block:34px; background:#000; color:#fff; border-bottom:4px solid var(--red); }
.page-head h1 { color:#fff; }
.crumbs { margin-bottom:8px; font-size:.85rem; color:#a8a8a8; }
.crumbs a { color:#fff; }
.crumbs a:hover { color:var(--red); }
.page-head p { max-width:36rem; margin-top:8px; color:#d0d0d0; }
.page { padding-block:36px 48px; }

.list2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.item { display:flex; align-items:center; gap:28px; padding:22px; border:1px solid var(--line); border-left:4px solid var(--red); border-radius:3px; }
.item img { flex:none; width:190px; height:160px; padding:10px; object-fit:contain; background:var(--soft); mix-blend-mode:multiply; }
.item h3 { font-size:1.25rem; }
.item p { margin-top:4px; color:var(--mute); }
.item a { display:inline-block; margin-top:10px; font-size:.92rem; font-weight:600; color:var(--red); }
.item a:hover { text-decoration:underline; }

.rows { display:grid; gap:12px; }
.row { display:grid; grid-template-columns:200px 1fr auto; align-items:center; gap:24px; padding:12px 18px 12px 12px; border:1px solid var(--line); border-radius:4px; }
.lb { display:flex; align-items:center; justify-content:center; height:84px; background:#f8f8f8; border-radius:3px; }
.lb img { max-width:90%; max-height:52px; width:auto; }
.row p { font-size:.9rem; color:var(--mute); }

.about { display:grid; grid-template-columns:1.3fr 1fr; gap:48px; }
.about h2 { font-size:1.7rem; }
.about p { max-width:38rem; margin-top:12px; font-size:1.05rem; color:var(--mute); }
.values { display:grid; gap:14px; list-style:none; }
.values li { padding:18px 20px; background:var(--soft); border-left:4px solid var(--red); }
.values p { margin-top:2px; font-size:.95rem; color:var(--mute); }

/* Contact */
.cgrid { display:grid; grid-template-columns:340px 1fr; gap:20px; align-items:start; }
.cinfo { display:grid; gap:12px; }
.ccard { display:flex; align-items:center; gap:14px; padding:16px 18px; background:var(--soft); border-left:4px solid var(--red); border-radius:3px; }
.ccard b { display:block; font-size:.8rem; font-weight:600; color:var(--mute); }
.ccard a { color:inherit; text-decoration:none; }
.ccard a:hover { text-decoration:underline; }
.ic { flex:none; width:26px; height:26px; fill:none; stroke:var(--red); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.form { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:24px; background:var(--soft); border-top:4px solid #000; border-radius:3px; }
.form label { display:grid; gap:4px; font-size:.88rem; font-weight:600; }
.form .full { grid-column:1 / -1; }
.form input, .form select, .form textarea { width:100%; padding:11px 12px; font:inherit; font-weight:400; background:#fff; border:1px solid var(--line); border-radius:3px; }
.form input:focus, .form select:focus, .form textarea:focus { outline:none; border-color:#000; }
.form .btn { justify-self:start; }
.cgrid2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:28px; }
.faq h2 { margin-bottom:6px; }
.faq details { padding:12px 0; border-bottom:1px solid var(--line); }
.faq summary { display:flex; justify-content:space-between; gap:12px; font-weight:600; cursor:pointer; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--red); font-weight:700; }
.faq details[open] summary::after { content:"-"; }
.faq p { margin-top:8px; font-size:.95rem; color:var(--mute); }
.map { display:grid; place-content:center; justify-items:center; gap:6px; min-height:240px; background:var(--soft); border:1px solid var(--line); border-bottom:4px solid var(--red); border-radius:3px; color:var(--mute); }
.map .ic { width:36px; height:36px; }

/* Footer: brand and link columns on top, contact details below */
.foot { background:#000; color:#fff; border-top:4px solid var(--red); }
.foot-top, .foot-bottom { display:grid; grid-template-columns:1fr 1.05fr 1.25fr 1fr; gap:36px 32px; }
.foot-top { padding-block:56px 48px; }
.foot-bottom { padding-block:40px 48px; border-top:1px solid rgba(255,255,255,.18); }
.foot-brand { display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.foot-logo img { width:190px; height:auto; }
.foot-badge img { width:120px; height:auto; border-radius:3px; }
.foot h2 { margin-bottom:16px; padding-left:10px; border-left:4px solid var(--red); color:#fff; font-size:.95rem; font-weight:700; line-height:1.2; }
.foot ul { list-style:none; }
.foot li + li { margin-top:6px; }
.foot-col { font-size:.92rem; font-style:normal; color:#b8b8b8; overflow-wrap:anywhere; }
.foot-col address { font-style:normal; }
.foot-col p + p, .foot-col address + p { margin-top:6px; }
.foot-copy { font-size:.85rem; color:#9a9a9a; }
.foot-col a:not(.btn) { display:inline-block; padding-block:2px; color:#b8b8b8; background:linear-gradient(var(--red),var(--red)) 0 100%/0 2px no-repeat; transition:background-size .15s,color .15s; }
.foot-col a:not(.btn):hover { color:#fff; background-size:100% 2px; }
.foot .btn.red:hover { background:#fff; color:#000; }
.foot .btn.red:focus-visible, .foot-badge:focus-visible, .foot-logo:focus-visible { outline-color:#fff; }

@media (max-width:860px) {
  .bar-in { height:72px; }
  .logo img { height:50px; }
  .burger { display:block; }
  .menu { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; padding:6px 20px 16px; background:#fff; border-bottom:4px solid #000; }
  .menu.open { display:flex; }
  .menu a { padding:12px 0; }
  .menu a:not(.cta)::after { left:0; right:auto; width:28px; bottom:6px; }
  .menu .cta { margin:8px 0 0; padding:12px; text-align:center; }
  .hero-in { padding-block:64px 72px; }
  .gear { right:-30%; opacity:.3; }
  .chips { grid-template-columns:1fr 1fr; }
  .list2, .about, .perks, .cgrid, .cgrid2 { grid-template-columns:1fr; }
  .row { grid-template-columns:140px 1fr; }
  .row .btn { grid-column:1 / -1; justify-self:start; }
}
@media (max-width:520px) {
  .chips, .logos, .form { grid-template-columns:1fr; }
  .item { flex-direction:column; align-items:flex-start; }
  .item img { width:100%; }
  .row { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { .teeth { animation:none; } html { scroll-behavior:auto; } }

/* ===== Photos, hero slideshow, brand cards ===== */
.hero::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.55) 55%,rgba(0,0,0,.25)); }
.hero-in { z-index:2; padding-block:104px 116px; }
.gear { z-index:1; opacity:.9; }
.slides { position:absolute; inset:0; z-index:0; }
.slides i { position:absolute; inset:0; background-size:cover; opacity:0; animation:slide calc(24.62s / var(--speed,1.3)) infinite; }
.slides i:nth-child(1) { animation-delay:calc(-1.23s / var(--speed,1.3)); }
.slides i:nth-child(2) { animation-delay:calc(4.92s / var(--speed,1.3)); }
.slides i:nth-child(3) { animation-delay:calc(11.08s / var(--speed,1.3)); }
.slides i:nth-child(4) { animation-delay:calc(17.23s / var(--speed,1.3)); }
@keyframes slide { 0% { opacity:0; transform:scale(1); } 5%,25% { opacity:1; } 30%,100% { opacity:0; transform:scale(1.08); } }

.ticker { overflow:hidden; padding-block:18px; border-block:1px solid var(--line); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.track { display:flex; align-items:center; width:max-content; animation:tick 32s linear infinite; }
.track img { height:46px; width:auto; margin-inline:44px; filter:grayscale(1); opacity:.65; transition:opacity .2s,filter .2s; }
.track img:hover { filter:none; opacity:1; }
@keyframes tick { to { transform:translateX(-50%); } }

.frame { position:relative; margin:0 16px 16px 0; }
.frame::before { content:""; position:absolute; inset:16px -16px -16px 16px; background:var(--red); }
.frame img { position:relative; width:100%; height:100%; object-fit:cover; }
.feature { display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; padding-block:44px 56px; }
.feature .frame img { height:300px; }
.feature p { max-width:30rem; margin:10px 0 20px; color:var(--mute); }

.stock { padding-top:8px; }
.stock h2, .sub { margin-bottom:16px; }
.bgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.bcard { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:3px; transition:box-shadow .2s,transform .2s; }
.bcard:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.14); }
.ph { position:relative; height:170px; overflow:hidden; background:var(--c); }
.ph img { width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.bcard:hover .ph img { transform:scale(1.07); }
.ph::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,var(--c),transparent 70%); opacity:.6; }
.ph.pat { background:repeating-linear-gradient(45deg,var(--c) 0 14px,rgba(255,255,255,.09) 14px 28px); }
.ph.white { background:#fff; }
.ph.white img { object-fit:contain; }
.tile { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; height:70px; margin:-35px 18px 0; padding:10px 18px; background:#fff; border-bottom:4px solid var(--c); box-shadow:0 8px 20px rgba(0,0,0,.14); }
.tile img { max-height:44px; max-width:100%; width:auto; }
.bcard h3 { margin:16px 18px 0; font-size:1.1rem; }
.bcard p { flex:1; margin:2px 18px 0; font-size:.9rem; color:var(--mute); }
.bcard a { align-self:flex-start; margin:12px 18px 18px; font-size:.9rem; font-weight:600; color:var(--red); }
.bcard a:hover { text-decoration:underline; }

.about { grid-template-columns:1.2fr 1fr; gap:56px; align-items:center; }
.about .frame img { height:440px; }
.values.vals { grid-template-columns:repeat(3,1fr); margin-top:22px; }
.group { display:inline-block; margin-top:18px; padding:10px 16px; font-weight:600; background:var(--soft); border-left:4px solid var(--red); transition:background .15s,color .15s; }
.group:hover { background:#000; color:#fff; }
.sub { margin-top:44px; }
.gal { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:170px; gap:12px; }
.gal figure { position:relative; overflow:hidden; border-radius:3px; }
.gal .big { grid-column:span 2; grid-row:span 2; }
.gal img { width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.gal figure:hover img { transform:scale(1.06); }
.gal figcaption { position:absolute; left:0; right:0; bottom:0; padding:26px 14px 10px; color:#fff; font-size:.88rem; font-weight:600; background:linear-gradient(to top,rgba(0,0,0,.75),transparent); }
.foot small a { color:#fff; text-decoration:underline; }

@media (max-width:860px) {
  .hero-in { padding-block:72px 80px; }
  .gear { opacity:.3; }
  .feature, .about { grid-template-columns:1fr; }
  .bgrid, .gal { grid-template-columns:1fr 1fr; }
  .values.vals { grid-template-columns:1fr; }
}
@media (max-width:520px) { .bgrid, .gal { grid-template-columns:1fr; } .gal { grid-auto-rows:150px; } .gal .big { grid-row:span 1; } }
@media (prefers-reduced-motion:reduce) { .slides i, .track { animation:none; } .slides i:first-child { opacity:1; } }

/* ===== Exclusive brand cards, bento categories, products ===== */
.xhead { margin-bottom:16px; }
.xgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.xcard { position:relative; display:flex; flex-direction:column; overflow:hidden; background:#000; color:#fff; border-bottom:4px solid var(--red); border-radius:3px; transition:transform .25s,box-shadow .25s; }
.xcard:hover { transform:translateY(-6px); box-shadow:0 18px 36px rgba(0,0,0,.25); }
.xtop { display:grid; place-items:center; height:200px; }
.t1 { background:linear-gradient(#000 0 33.3%,#dd0000 33.3% 66.6%,#ffce00 66.6%); }
.t2 { background:repeating-linear-gradient(-45deg,#e11b22 0 16px,#c8141b 16px 32px); }
.t3 { background:repeating-radial-gradient(circle,#e60012 0 18px,#c9000f 18px 36px); }
.xlogo { display:grid; place-items:center; width:72%; height:92px; background:#f8f8f8; box-shadow:0 10px 24px rgba(0,0,0,.35); transition:transform .4s; }
.xcard:hover .xlogo { transform:scale(1.06); }
.xlogo img { max-width:80%; max-height:56px; width:auto; }
.badge { position:absolute; top:14px; left:14px; z-index:2; padding:4px 10px; font-size:.78rem; font-weight:700; color:#000; background:#fff; border-radius:2px; }
.xbody { display:flex; flex:1; flex-direction:column; align-items:flex-start; gap:6px; padding:22px 22px 24px; }
.xbody h3 { font-size:1.3rem; color:#fff; }
.xbody p { flex:1; margin-bottom:10px; font-size:.95rem; color:#bdbdbd; }

.bento { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:14px; }
.bt { position:relative; display:flex; align-items:flex-end; padding:16px; overflow:hidden; font-weight:600; background:var(--soft); border-bottom:3px solid #000; border-radius:3px; transition:border-color .2s; }
.bt:hover { border-color:var(--red); }
.bt img { position:absolute; top:16px; left:50%; height:104px; width:auto; max-width:80%; transform:translateX(-50%); object-fit:contain; mix-blend-mode:multiply; }
.bt span { position:relative; z-index:1; }
.bt small { display:block; font-size:.88rem; font-weight:400; opacity:.85; }
.bt.big { grid-column:span 2; grid-row:span 2; padding:24px; font-size:1.4rem; color:#fff; background:#000; }
.bt.big img { inset:0; width:100%; height:100%; max-width:none; transform:none; object-fit:cover; mix-blend-mode:normal; transition:transform .6s; }
.bt.big:hover img { transform:scale(1.06); }
.bt.big::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.82),transparent 62%); }

.filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.filters button { padding:10px 18px; font:inherit; font-size:.9rem; font-weight:600; color:#000; background:#fff; border:2px solid var(--line); border-radius:3px; cursor:pointer; transition:border-color .15s,background .15s,color .15s; }
.filters button:hover { border-color:#000; }
.filters button.on { color:#fff; background:#000; border-color:#000; }
.pgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.pcard { display:flex; flex-direction:column; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:3px; transition:transform .2s,box-shadow .2s; }
.pcard:hover { transform:translateY(-4px); box-shadow:0 12px 26px rgba(0,0,0,.12); }
.pimg { position:relative; display:grid; place-items:center; height:180px; overflow:hidden; background:var(--soft); border-bottom:3px solid #000; transition:border-color .2s; }
.pcard:hover .pimg { border-color:var(--red); }
.pimg img { width:100%; height:100%; padding:16px; object-fit:contain; mix-blend-mode:multiply; }
.pimg.photo img { padding:0; object-fit:cover; mix-blend-mode:normal; transition:transform .6s; }
.pcard:hover .pimg.photo img { transform:scale(1.07); }
.pimg.w { background:#fff; }
.pimg .ic { width:56px; height:56px; stroke-width:1.5; }
.pimg.dark { background:radial-gradient(circle at 50% 40%,#2c2c2c,#000 72%); }
.tag { position:absolute; top:12px; left:12px; z-index:1; padding:3px 9px; font-size:.75rem; font-weight:600; color:#000; background:#fff; border-radius:2px; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.pbody { display:flex; flex:1; flex-direction:column; gap:2px; padding:14px 16px 16px; }
.pbody p { flex:1; font-size:.9rem; color:var(--mute); }
.pbody a { margin-top:8px; font-size:.88rem; font-weight:600; color:var(--red); }
.pbody a:hover { text-decoration:underline; }

@media (max-width:1000px) { .pgrid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:860px) {
  .xgrid { grid-template-columns:1fr; }
  .bento { grid-template-columns:1fr 1fr; }
  .bt.big { grid-row:span 1; }
  .pgrid { grid-template-columns:1fr 1fr; }
}
@media (max-width:520px) { .bento, .pgrid { grid-template-columns:1fr; } .bt.big { grid-column:auto; } }

/* ===== Exclusive brand stage, airy home ===== */
.xstage { position:relative; display:grid; place-items:center; height:240px; overflow:hidden; background:radial-gradient(circle at 50% 115%,var(--g),transparent 62%),#0a0a0a; }
.xstage.t2 { background:repeating-linear-gradient(-45deg,rgba(255,255,255,.05) 0 2px,transparent 2px 18px),radial-gradient(circle at 50% 115%,var(--g),transparent 62%),#0a0a0a; }
.xstage.t3 { background:repeating-radial-gradient(circle at 50% 115%,rgba(255,255,255,.06) 0 2px,transparent 2px 22px),radial-gradient(circle at 50% 115%,var(--g),transparent 62%),#0a0a0a; }
.xstage.t1::after { content:""; position:absolute; left:0; right:0; bottom:0; height:8px; background:linear-gradient(90deg,#222 0 33.3%,#dd0000 33.3% 66.6%,#ffce00 66.6%); }
.plate { position:relative; display:grid; place-items:center; width:80%; height:140px; overflow:hidden; background:linear-gradient(145deg,#fff,#e8e8e8); border-radius:6px; box-shadow:0 18px 40px rgba(0,0,0,.55); transition:transform .18s ease-out,box-shadow .25s; }
.plate:hover { box-shadow:0 26px 50px rgba(0,0,0,.6),0 0 44px var(--g); }
.plate img { position:relative; z-index:1; max-width:84%; max-height:92px; width:auto; }
.plate::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.95),transparent 55%); opacity:0; transition:opacity .2s; }
.plate:hover::after { opacity:1; }
.hint { position:absolute; z-index:2; left:0; right:0; bottom:0; padding:5px; font-size:.78rem; font-weight:700; text-align:center; color:#fff; background:var(--red); transform:translateY(100%); transition:transform .2s; }
.plate:hover .hint, .plate:focus-visible .hint { transform:none; }

.hero { display:flex; align-items:center; min-height:min(80vh,720px); }
.hero-in { width:100%; padding-block:72px 80px; }
.hero h1 { font-size:clamp(2.6rem,6.5vw,4.6rem); }
.sect { padding-block:88px 0; }
.sect .head { margin-bottom:28px; }
.sect h2 { font-size:2rem; }
.sect .xgrid { gap:28px; }
.trio { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.gc { position:relative; display:flex; align-items:flex-end; min-height:440px; padding:32px; overflow:hidden; color:#fff; background:#000; border-radius:3px; }
.gc::before { content:""; position:absolute; inset:0; background:var(--img) center/cover; transition:transform .8s; }
.gc:hover::before { transform:scale(1.06); }
.gc::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.85),transparent 60%); }
.gc.dark::before { background:radial-gradient(circle at 50% 38%,#303030,#000 72%); }
.gc span { position:relative; z-index:1; display:grid; gap:4px; }
.gc b { font-size:1.6rem; }
.gc small { font-size:.95rem; opacity:.85; }
.gc i { width:max-content; margin-top:10px; font-style:normal; font-weight:600; border-bottom:2px solid var(--red); }
.gc .ic { position:absolute; top:34%; left:50%; z-index:1; width:130px; height:130px; stroke-width:1.1; transform:translate(-50%,-50%); }
.ticker.wide { margin-top:88px; }
.vista { position:relative; display:flex; align-items:center; min-height:440px; margin-top:88px; color:#fff; background:#000; }
.vista::before { content:""; position:absolute; inset:0; background:var(--img) center/cover; }
.vista::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.85),rgba(0,0,0,.2)); }
.vista .wrap { position:relative; z-index:1; width:100%; }
.vista h2 { max-width:16ch; font-size:clamp(2rem,4vw,3rem); color:#fff; }
.vista p { max-width:30rem; margin:12px 0 24px; color:#ddd; }
@media (max-width:860px) {
  .trio { grid-template-columns:1fr; }
  .gc { min-height:340px; }
  .sect { padding-block:64px 0; }
  .ticker.wide, .vista { margin-top:64px; }
  .vista { min-height:360px; }
}


/* ===== Slideshow speed: change --speed (1 = original pace, 1.3 = 30% faster) ===== */
.slides { --speed:1.3; }

/* ===== Exclusive brands: big interactive logo marks ===== */
.xstage { height:320px; background:radial-gradient(circle at var(--mx,50%) var(--my,40%),#fff,transparent 58%),radial-gradient(circle at 50% 125%,var(--g),transparent 68%),#efefef; }
.xstage.t2 { background:repeating-linear-gradient(-45deg,rgba(0,0,0,.035) 0 2px,transparent 2px 18px),radial-gradient(circle at var(--mx,50%) var(--my,40%),#fff,transparent 58%),radial-gradient(circle at 50% 125%,var(--g),transparent 68%),#efefef; }
.xstage.t3 { background:repeating-radial-gradient(circle at 50% 125%,rgba(0,0,0,.04) 0 2px,transparent 2px 22px),radial-gradient(circle at var(--mx,50%) var(--my,40%),#fff,transparent 58%),radial-gradient(circle at 50% 125%,var(--g),transparent 68%),#efefef; }
.xstage .badge { color:#fff; background:#000; }
.plate { position:absolute; inset:0; width:auto; height:auto; overflow:visible; background:none; border-radius:0; box-shadow:none; cursor:pointer; perspective:900px; }
.plate:hover { box-shadow:none; }
.plate::after { display:none; }
.mark { position:relative; width:86%; height:70%; transform-style:preserve-3d; transform:rotateY(calc(var(--rx,0) * 26deg)) rotateX(calc(var(--ry,0) * -20deg)); transition:transform .5s cubic-bezier(.2,.8,.2,1); animation:drift 6s ease-in-out infinite; }
.mark.live { transition:transform .08s linear; }
.plate .mark img { position:absolute; inset:0; width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.plate .mark .l1 { transform:translateZ(28px); filter:drop-shadow(calc(var(--rx,0) * -22px) calc(var(--ry,0) * -22px + 10px) 12px rgba(0,0,0,.28)); }
.plate .mark .l2 { transform:translateZ(14px); filter:brightness(0); opacity:.16; }
.plate .mark .l3 { transform:translateZ(0); filter:brightness(0); opacity:.1; }
.plate:hover .mark .l1 { transform:translateZ(46px); }
.plate:hover .mark .l2 { transform:translateZ(23px); }
@keyframes drift { 50% { translate:0 -8px; } }
.hint { left:50%; right:auto; bottom:18px; padding:7px 16px; font-size:.82rem; background:#000; border-radius:99px; opacity:0; transform:translate(-50%,12px); transition:transform .25s,opacity .25s; }
.plate:hover .hint, .plate:focus-visible .hint { opacity:1; transform:translate(-50%,0); }
@media (hover:none) { .hint { opacity:.9; transform:translate(-50%,0); } }
@media (prefers-reduced-motion:reduce) { .mark { animation:none; } }

/* ===== Airy home: big photography, long pauses between sections ===== */
.hero { min-height:min(92vh,860px); }
.hero::before { background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.3) 60%,rgba(0,0,0,.08)); }
.hero h1 { max-width:12ch; font-size:clamp(2.8rem,7vw,5.4rem); line-height:1.05; }
.hero p { margin:20px 0 36px; }
.sect { max-width:1240px; padding-block:140px 0; }
.sect .head { margin-bottom:48px; }
.sect h2 { font-size:clamp(1.8rem,3vw,2.6rem); }
.sect .xgrid, .trio { gap:40px; }
.gc { min-height:520px; }
.ticker.wide { margin-top:140px; }
.vista { min-height:640px; margin-top:140px; }
[data-view="home"] .band-in { padding-block:64px; }
@media (max-width:860px) {
  .hero { min-height:78vh; }
  .sect { padding-block:96px 0; }
  .sect .xgrid, .trio { gap:28px; }
  .gc { min-height:400px; }
  .ticker.wide, .vista { margin-top:96px; }
  .vista { min-height:480px; }
}


/* ===== NewTech Alfa stage: steel-blue grid ===== */
.xstage.t3 { background:linear-gradient(rgba(30,50,90,.07) 1px,transparent 1px) 0 0/26px 26px,linear-gradient(90deg,rgba(30,50,90,.07) 1px,transparent 1px) 0 0/26px 26px,radial-gradient(circle at var(--mx,50%) var(--my,40%),#fff,transparent 58%),radial-gradient(circle at 50% 125%,var(--g),transparent 68%),#dfe6ee; }

/* ===== Brand logo tiles: conveyor belt + wall ===== */
.bl { display:flex; align-items:center; justify-content:center; height:78px; padding:14px; background:#2c303b; border-radius:3px; transition:transform .2s,box-shadow .2s; }
.bl.light { background:#fff; border:1px solid var(--line); }
.bl img { width:100%; height:100%; object-fit:contain; }
.bl:hover { transform:translateY(-3px); box-shadow:0 10px 22px rgba(0,0,0,.2); }
.track { animation-duration:80s; }
.track .bl { flex:none; width:168px; margin-right:16px; }
.ticker.wide { padding-block:22px; }
.stock + .stock { padding-top:56px; }
.lead { margin:-6px 0 20px; color:var(--mute); }
.wall { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.wall:not(.open) .bl:nth-child(n+19) { display:none; }
#wallmore { margin-top:24px; }

/* ===== Products by group (A&K style, emoji images) ===== */
.psearch { display:flex; align-items:center; gap:12px; max-width:640px; margin-bottom:28px; padding:0 18px; background:#fff; border:2px solid #000; border-radius:3px; }
.psearch:focus-within { border-color:var(--red); }
.psearch input { flex:1; min-width:0; padding:15px 0; font:inherit; border:0; outline:none; }
.ggrid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.grp { display:flex; flex-direction:column; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:3px; transition:transform .2s,box-shadow .2s; }
.grp:hover { transform:translateY(-4px); box-shadow:0 12px 26px rgba(0,0,0,.12); }
.gtop { display:grid; place-items:center; height:130px; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; font-size:4rem; line-height:1; background:var(--soft); border-bottom:3px solid #000; transition:border-color .2s; }
.grp:hover .gtop { border-color:var(--red); }
.gbody { display:flex; flex:1; flex-direction:column; gap:6px; padding:16px 18px 20px; }
.gbody h3 { font-size:1.1rem; }
.gbody p { font-size:.9rem; color:var(--mute); }
.cks { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.ck { padding:5px 10px; font-size:.8rem; font-weight:600; background:var(--soft); border-radius:2px; transition:background .15s,color .15s; }
.ck:hover { color:#fff; background:var(--red); }

/* ===== About: related websites ===== */
.links3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.rl { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:3px; transition:transform .2s,box-shadow .2s; }
.rl:hover { transform:translateY(-4px); box-shadow:0 12px 26px rgba(0,0,0,.14); }
.rlogo { display:grid; place-items:center; height:140px; padding:24px; background:#fff; }
.rlogo img { width:80%; height:70px; object-fit:contain; }
.rt { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; font-size:.88rem; color:#fff; background:#000; transition:background .2s; }
.rt em { font-style:normal; font-weight:600; }
.rl:hover .rt { background:var(--red); }
@media (max-width:1000px) { .ggrid { grid-template-columns:repeat(3,1fr); } .wall { grid-template-columns:repeat(4,1fr); } }
@media (max-width:860px) { .ggrid { grid-template-columns:1fr 1fr; } .links3 { grid-template-columns:1fr; } .wall { grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px) { .ggrid { grid-template-columns:1fr; } .wall { grid-template-columns:1fr 1fr; } }


/* ===== Exclusive brand stages: one neutral stage, brand-flag bar underneath ===== */
.xstage, .xstage.t1, .xstage.t2, .xstage.t3 { background:radial-gradient(circle at var(--mx,50%) var(--my,40%),#fff,transparent 60%),#efefef; }
.xstage::after, .xstage.t1::after { content:""; position:absolute; left:0; right:0; bottom:0; height:8px; background:var(--bar); pointer-events:none; }
.xstage.t1, .xstage.t2 { --bar:linear-gradient(90deg,#000 0 33.3%,#dd0000 33.3% 66.6%,#ffce00 66.6%); } /* German flag: Deutschöl, RheinMann */
.xstage.t3 { --bar:#e1111b; } /* NewTech Alfa: red */

/* ===== Brand logos: clear logos, no dark tiles ===== */
.bl, .bl.light { background:#fff; border:1px solid var(--line); }
.bl:hover { box-shadow:0 10px 22px rgba(0,0,0,.1); }
.track .bl { width:176px; height:72px; padding:6px 10px; background:none; border:0; box-shadow:none; }
.track .bl img { margin:0; filter:none; opacity:1; }

/* ===== Products: red line icons on a black stage ===== */
.gtop { font-size:0; color:var(--red); background:radial-gradient(circle at 50% 50%,#303030,#000 72%); border-bottom:3px solid var(--red); }
.gtop svg { width:64px; height:64px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s; }
.grp:hover .gtop svg { transform:scale(1.12); }

/* ===== What we supply: editorial rows ===== */
.supply .head { margin-bottom:56px; }
.slist { border-top:2px solid #000; }
.srow { position:relative; display:grid; grid-template-columns:64px 1fr 280px 160px; align-items:center; gap:32px; padding:40px 0; border-bottom:1px solid var(--line); }
.srow::before { content:""; position:absolute; left:0; bottom:-1px; width:0; height:3px; background:var(--red); transition:width .45s; }
.srow:hover::before, .srow:focus-visible::before { width:100%; }
.srow .n { font-weight:700; color:var(--mute); transition:color .2s; }
.srow:hover .n { color:var(--red); }
.srow .t { display:grid; gap:10px; }
.srow b { font-size:clamp(1.9rem,4vw,3.2rem); line-height:1.05; letter-spacing:-.01em; transition:transform .35s; }
.srow:hover b { transform:translateX(14px); }
.srow small { font-size:1.02rem; color:var(--mute); }
.srow .pic { display:grid; place-items:center; height:150px; overflow:hidden; background:var(--img) center/cover; border-radius:3px; filter:grayscale(1); transition:filter .35s,transform .35s; }
.srow:hover .pic { filter:none; transform:scale(1.04); }
.srow .pic.dark { background:radial-gradient(circle at 50% 50%,#303030,#000 72%); border-bottom:3px solid var(--red); filter:none; }
.srow .pic svg { width:64px; height:64px; fill:none; stroke:var(--red); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.srow .go { justify-self:end; font-weight:600; white-space:nowrap; border-bottom:2px solid var(--red); }
@media (max-width:860px) {
  .srow { grid-template-columns:1fr; gap:16px; padding:32px 0; }
  .srow .n { display:none; }
  .srow .pic { order:-1; height:190px; filter:none; }
  .srow .go { justify-self:start; }
}


/* ===== Exclusive brands: clean white stage ===== */
.xstage, .xstage.t1, .xstage.t2, .xstage.t3 { background:#fff; }
.xcard { border:1px solid var(--line); border-bottom:4px solid var(--red); }

/* ===== Home: "Brands we stock" is its own section, clearly apart from the exclusives ===== */
.stocked { padding-bottom:0; }
.stocked .head { margin-bottom:12px; }
.stocked .lead { margin:0 0 40px; font-size:1.05rem; }
.stocked + .ticker.wide { margin-top:0; }

/* ===== What we supply: icon tiles, main groups + "more" ===== */
.srow .pic svg { transition:transform .3s; }
.srow:hover .pic svg { transform:scale(1.12); }
.srow .pic.multi { grid-auto-flow:column; gap:16px; }
.srow .pic.multi svg { width:32px; height:32px; }
 @media (max-width:860px) { .srow.more .pic { height:110px; } }
.stock { padding-top:72px; }


/* ===== Exclusive brands: compact cards on the same 6-column grid and gap as the brand tiles ===== */
.xgrid, .sect .xgrid { gap:14px; }
.xstage { height:200px; }
.mark { width:80%; height:72%; }
.xbody { gap:4px; padding:16px 18px 18px; }
.xbody h3 { font-size:1.15rem; }
.xbody p { margin-bottom:8px; font-size:.9rem; }
.xbody .btn { padding:9px 16px; font-size:.88rem; }
.hint { bottom:16px; }

/* ===== Products: photo tiles ===== */
.gtop { height:210px; padding:14px; background:radial-gradient(circle at 50% 45%,#4a4f5c 0,#23262d 70%,#16181c); border-bottom:3px solid var(--red); }
.gtop img { max-width:86%; max-height:100%; object-fit:contain; filter:drop-shadow(0 10px 14px rgba(0,0,0,.45)); transition:transform .35s; }
.grp:hover .gtop img { transform:scale(1.06); }

/* ===== Home: What we supply uses the same photos ===== */
.srow .pic.dark { background:radial-gradient(circle at 50% 45%,#4a4f5c 0,#23262d 70%,#16181c); }
.srow .pic img { max-width:84%; max-height:88%; object-fit:contain; filter:drop-shadow(0 8px 10px rgba(0,0,0,.4)); transition:transform .35s; }
.srow:hover .pic img { transform:scale(1.07); }
.srow .pic.multi { grid-auto-flow:column; gap:6px; padding:0 10px; }
.srow .pic.multi img { max-width:100%; max-height:62px; }

/* ===== Home: live brand board (replaces the conveyor belt) ===== */
.board-wrap { max-width:1240px; margin-inline:auto; }
.board { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.board .bl { height:96px; }
.board .bl.flip { animation:flip .7s ease-in-out; }
@keyframes flip { 0%,100% { transform:rotateX(0); } 50% { transform:rotateX(90deg); } }
@media (max-width:860px) { .board { grid-template-columns:repeat(3,1fr); } .board .bl:nth-child(n+13) { display:none; } }

.board-wrap { margin-bottom:110px; }
@media (max-width:860px) { .board-wrap { margin-bottom:80px; } }


/* ===== What we supply: smaller type, photos fit their tiles ===== */
.srow b { font-size:clamp(1.6rem,3.3vw,2.6rem); }
.srow small { font-size:.95rem; }
.srow .pic.dark { display:flex; align-items:center; justify-content:center; padding:12px; }
.srow .pic img { max-width:100%; max-height:100%; width:auto; height:auto; }
.srow .pic.multi { gap:14px; padding:14px 18px; }
.srow .pic.multi img { flex:1 1 0; min-width:0; max-width:33%; max-height:100%; }

/* Products page photo tiles: same fix so the whole product shows */
.gtop { display:flex; align-items:center; justify-content:center; padding:16px; }
.gtop img { max-width:100%; max-height:100%; width:auto; height:auto; }

/* ===== Exclusive cards: same compact size on Home and Brands pages; room above the red footer band ===== */
.xstage { height:140px; }
.mark { width:76%; height:78%; }
.xbody { padding:12px 14px 14px; }
.xbody h3 { font-size:1.05rem; }
.xbody p { margin-bottom:6px; font-size:.85rem; }
.xbody .btn { padding:7px 14px; font-size:.84rem; }
.xstage .badge { top:8px; left:8px; padding:3px 8px; font-size:.7rem; }
.hint { display:none; }
.stock { padding-bottom:100px; }
#wallmore { margin-top:28px; }


/* ===== Less white space (Home + Products) ===== */
.sect { padding-block:88px 0; }
.sect .head, .supply .head { margin-bottom:32px; }
.stocked .head { margin-bottom:12px; }
.stocked .lead { margin-bottom:28px; }
.board-wrap { margin-bottom:0; }
.excl { padding-bottom:88px; }
.srow { padding:22px 0; }
@media (min-width:861px) { .srow .pic { height:130px; } }
@media (max-width:860px) { .sect { padding-block:64px 0; } .excl { padding-bottom:64px; } .srow { padding:24px 0; } .board-wrap { margin-bottom:0; } }
.ggrid { gap:16px; }
.gtop { height:176px; }
.gbody { padding:14px 16px 16px; }
.psearch { margin-bottom:18px; }
.filters { margin-bottom:16px; }

/* ===== Engine parts photo fills its tile ===== */
.srow .pic.full, .gtop.full { padding:0; overflow:hidden; }
.srow .pic.full img, .gtop.full img { width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; filter:none; }

/* ===== Contact: map and form status ===== */
.map { display:block; min-height:0; padding:0; overflow:hidden; }
.map iframe { display:block; width:100%; height:260px; border:0; }
.map-link { display:block; padding:12px 16px; font-weight:600; background:#fff; border-top:1px solid var(--line); }
.map-link:hover { color:var(--red); }
.form-status { margin:6px 0 0; font-weight:600; }
.form-status.ok { color:#1a7f37; }
.form-status.err { color:var(--red); }

/* Footer, responsive */
.grp { scroll-margin-top:104px; }
@media (max-width:860px) {
  .foot-top, .foot-bottom { grid-template-columns:repeat(3,1fr); gap:32px 24px; }
  .foot-top { padding-block:44px 36px; }
  .foot-brand { grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; align-items:center; gap:20px 28px; }
  .foot-bottom { padding-block:36px 40px; }
  .foot-copy { grid-column:1 / -1; order:5; }
  .grp { scroll-margin-top:92px; }
}
@media (max-width:520px) {
  .foot-top { grid-template-columns:1fr 1fr; }
  .foot-links { order:1; }
  .foot-excl { order:2; }
  .foot-products { order:3; grid-column:1 / -1; }
  .foot-bottom { grid-template-columns:1fr; }
}