/* ============================================================
   JOHNSON LUBRICANTS FZC — johnsonlubricants.com
   Global stylesheet · design system
   ============================================================ */

/* ---------- fonts ---------- */
@import url('../fonts/fonts.css');

/* ---------- tokens ---------- */
:root{
  --hex-tile:1376px auto;  /* naturalny rozmiar honeycomb.webp - bez przeskalowania */
  --night:#0b0c0e;
  --night-2:#12141b;
  --night-3:#1a1d26;
  --ink:#14161a;
  --ink-2:#343b44;        /* body copy on light — 11.6:1 */
  --ink-3:#5a6069;        /* muted copy — 6.3:1 on white, 5.9:1 on panel */
  --paper:#ffffff;
  --panel:#f5f6f8;
  --rule:#dfe3e8;

  --yl:#ffcb00;           /* Johnson yellow */
  --yl-deep:#e0a800;
  --yl-ink:#856200;       /* yellow as TEXT on light bg — 5.6:1, readable */
  --blue:#1a3f8f;
  --blue-deep:#0e2c6b;
  --red:#e0202c;

  --font-d:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --font-b:"Inter","Segoe UI",Arial,sans-serif;

  --wrap:1240px;
  --pad:clamp(20px,4vw,48px);
  --sec:clamp(72px,9vw,128px);
  --r:14px;
  --sh:0 10px 40px rgba(10,12,20,.10);
  --sh-lg:0 24px 70px rgba(10,12,20,.16);
  --tr:.35s cubic-bezier(.22,.61,.36,1);
}

[lang="ar"]{ --font-d:"Tajawal","Barlow Condensed",sans-serif; --font-b:"Tajawal","Inter",sans-serif; }

/* ---------- base ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-b); color:var(--ink);
  background:var(--paper); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:padding-bottom .4s ease;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; border:0; background:none; cursor:pointer; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); }

::selection{ background:var(--yl); color:var(--night); }

/* ---------- typography ---------- */
h1,h2,h3,.d{ font-family:var(--font-d); text-transform:uppercase; line-height:1.02; letter-spacing:.01em; }
.eyebrow{
  font-family:var(--font-d); font-weight:600; font-size:13px;
  letter-spacing:.34em; text-transform:uppercase; color:var(--yl-ink);
  margin-bottom:14px;
}
.dark .eyebrow{ color:var(--yl); }
h2.sec-title{ font-size:clamp(34px,5vw,58px); font-weight:700; }
.sec-sub{ max-width:640px; color:var(--ink-2); margin-top:18px; font-size:17px; }
.dark .sec-sub{ color:#aeb4bd; }
.krule{ width:64px; height:4px; background:var(--yl); margin-top:22px; border-radius:2px; }

/* ---------- sections ---------- */
/* overflow:clip contains the oversized decorative layers without creating a
   scroll container, so sticky children inside sections keep working */
.sec{ padding:var(--sec) 0; position:relative; overflow:clip; }
.sec.light{ background:var(--paper); }
.sec.tint{ background:var(--panel); }
.sec.dark{ background:var(--night); color:#fff; }
.sec.honey::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url('../img/brand/honeycomb.webp') right bottom / var(--hex-tile) repeat;
  opacity:.8;
}
/* second, slowly drifting honeycomb layer — depth without noise */
.sec.honey::after{
  content:""; position:absolute; inset:-10%; pointer-events:none; z-index:0;
  background:url('../img/brand/honeycomb.webp') left top / var(--hex-tile) repeat;
  opacity:.3; animation:honeyDrift 90s linear infinite;
}
.sec.dark.honey::after{ opacity:.045; filter:invert(1); }
@keyframes honeyDrift{
  0%{ transform:translate3d(0,0,0); }
  100%{ transform:translate3d(-6%,-4%,0); }
}
.sec > .wrap{ position:relative; z-index:1; }

/* ---------- gold shimmer on section titles ---------- */
h2.sec-title{ position:relative; }
h2.sec-title.gold{
  background:linear-gradient(100deg,var(--ink) 0%,var(--ink) 38%,var(--yl-deep) 48%,
             var(--yl) 53%,var(--yl-deep) 58%,var(--ink) 68%,var(--ink) 100%);
  background-size:280% 100%; -webkit-background-clip:text; background-clip:text;
  color:transparent; animation:goldSweep 6.5s ease-in-out infinite;
}
.dark h2.sec-title.gold{
  background:linear-gradient(100deg,#fff 0%,#fff 38%,var(--yl-deep) 48%,
             var(--yl) 53%,var(--yl-deep) 58%,#fff 68%,#fff 100%);
  background-size:280% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
}
@keyframes goldSweep{ 0%{ background-position:120% 0; } 60%,100%{ background-position:-40% 0; } }

/* animated krule */
.krule{ position:relative; overflow:hidden; }
.krule::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  animation:kruleShine 3.6s ease-in-out infinite;
}
@keyframes kruleShine{ 0%{ transform:translateX(-100%);} 55%,100%{ transform:translateX(220%);} }

/* floating hex ornaments */
.hexfloat{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.hexfloat i{
  position:absolute; display:block; width:var(--s,90px); height:var(--s,90px);
  background:var(--yl); opacity:.09;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  animation:hexRise var(--d,26s) ease-in-out infinite; animation-delay:var(--dl,0s);
}
.dark .hexfloat i{ opacity:.05; }
@keyframes hexRise{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-38px) rotate(22deg); }
}

.sec-head{ margin-bottom:clamp(36px,5vw,64px); }
.sec-head.center{ text-align:center; }
.sec-head.center .krule{ margin-left:auto; margin-right:auto; }
.sec-head.center .sec-sub{ margin-left:auto; margin-right:auto; }

/* tricolor stripe */
.tri{ display:inline-flex; gap:5px; }
.tri i{ width:44px; height:5px; border-radius:2px; background:var(--blue); }
.tri i:nth-child(2){ background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.tri i:nth-child(3){ background:var(--red); }
.dark .tri i:nth-child(2){ box-shadow:none; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-d); font-weight:600; font-size:16px;
  letter-spacing:.14em; text-transform:uppercase;
  padding:16px 30px; border-radius:8px; transition:var(--tr);
  position:relative; overflow:hidden;
}
.btn-y{ background:var(--yl); color:var(--night); }
.btn-y:hover{ background:#ffd94d; transform:translateY(-2px); box-shadow:0 12px 30px rgba(255,203,0,.35); }
.btn-ghost{ color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); }
.btn-ghost:hover{ box-shadow:inset 0 0 0 2px var(--yl); color:var(--yl); transform:translateY(-2px); }
.btn-dark{ background:var(--night); color:#fff; }
.btn-dark:hover{ background:var(--night-3); transform:translateY(-2px); box-shadow:var(--sh); }
.btn .ar{ transition:transform .3s; }
.btn:hover .ar{ transform:translateX(5px); }
[dir="rtl"] .btn:hover .ar{ transform:translateX(-5px) scaleX(-1); }
[dir="rtl"] .btn .ar{ transform:scaleX(-1); }

/* ---------- navbar ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .4s,box-shadow .4s,padding .4s;
  padding:18px 0;
}
/* scrim behind the transparent bar: nav text stays legible over any artwork */
.nav::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:linear-gradient(180deg,rgba(11,12,14,.72) 0%,rgba(11,12,14,.34) 55%,transparent 100%);
  transition:opacity .4s;
}
.nav.solid::before{ opacity:0; }
.nav.solid{ background:rgba(11,12,14,.92); backdrop-filter:blur(14px); box-shadow:0 6px 30px rgba(0,0,0,.35); padding:10px 0; }
.nav .wrap{ display:flex; align-items:center; gap:28px; }
.nav-logo{ display:flex; align-items:center; gap:12px; }
.nav-logo img{ height:52px; width:auto; transition:height .4s; }
.nav.solid .nav-logo img{ height:42px; }
.nav-word{
  font-family:var(--font-d); font-weight:700; font-size:20px; letter-spacing:.06em;
  color:#fff; text-transform:uppercase; line-height:1;
  display:inline-flex; flex-direction:column; align-items:center;
}
.nav-word small{ font-size:10px; font-weight:500; letter-spacing:.3em; color:var(--yl); margin-top:3px; }
.nav-links{ display:flex; gap:6px; margin-inline-start:auto; }
.nav-links a{
  font-family:var(--font-d); font-weight:600; font-size:14.5px;
  letter-spacing:.12em; text-transform:uppercase; color:#e8eaee;
  padding:10px 13px; border-radius:6px; position:relative; transition:color .25s;
}
.nav-links a::after{
  content:""; position:absolute; left:13px; right:13px; bottom:6px; height:2px;
  background:var(--yl); transform:scaleX(0); transform-origin:left; transition:transform .3s;
}
.nav-links a:hover{ color:var(--yl); }
.nav-links a:hover::after,.nav-links a.on::after{ transform:scaleX(1); }
.nav-links a.on{ color:var(--yl); }

/* dropdown groups */
.ndrop{ position:relative; }
.ndrop-btn{
  font-family:var(--font-d); font-weight:600; font-size:14.5px;
  letter-spacing:.12em; text-transform:uppercase; color:#e8eaee;
  padding:10px 13px; border-radius:6px; display:flex; align-items:center; gap:7px;
  transition:color .25s; position:relative;
}
.ndrop-btn i{ font-style:normal; font-size:10px; transition:transform .3s; opacity:.7; }
.ndrop-btn::after{
  content:""; position:absolute; left:13px; right:13px; bottom:6px; height:2px;
  background:var(--yl); transform:scaleX(0); transform-origin:left; transition:transform .3s;
}
.ndrop:hover .ndrop-btn,.ndrop.on .ndrop-btn{ color:var(--yl); }
.ndrop:hover .ndrop-btn::after,.ndrop.on .ndrop-btn::after{ transform:scaleX(1); }
.ndrop:hover .ndrop-btn i{ transform:rotate(180deg); }
.ndrop-menu{
  position:absolute; top:calc(100% + 12px); inset-inline-start:0; min-width:310px;
  background:#fff; border-radius:12px; box-shadow:var(--sh-lg); padding:10px;
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:var(--tr);
}
.ndrop:hover .ndrop-menu{ opacity:1; visibility:visible; transform:none; }
.ndrop-menu::before{ content:""; position:absolute; top:-14px; left:0; right:0; height:14px; }
.ndrop-menu a{ display:block; padding:11px 14px; border-radius:8px; transition:background .2s; }
.ndrop-menu a:hover{ background:var(--panel); }
.ndrop-menu b{
  display:block; font-family:var(--font-d); font-weight:700; font-size:14.5px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink);
}
.ndrop-menu a:hover b{ color:var(--yl-ink); }
.ndrop-menu span{ display:block; font-size:12.5px; color:var(--ink-3); margin-top:3px; }

/* offers — the click magnet */
.nav-offer{
  position:relative; font-family:var(--font-d); font-weight:700; font-size:14.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--yl);
  padding:10px 16px; border-radius:20px; margin-inline-start:4px;
  box-shadow:inset 0 0 0 1.6px var(--yl); overflow:hidden;
  animation:offerPulse 2.6s ease-in-out infinite;
}
.nav-offer:hover,.nav-offer.on{
  background:var(--yl); color:var(--night); animation:none;
  box-shadow:0 8px 24px rgba(255,203,0,.4);
}
@keyframes offerPulse{
  0%,100%{ box-shadow:inset 0 0 0 1.6px var(--yl), 0 0 0 0 rgba(255,203,0,.45); }
  50%{ box-shadow:inset 0 0 0 1.6px var(--yl), 0 0 0 7px rgba(255,203,0,0); }
}
/* sweeping shine across the pill */
.nav-offer .spark{
  position:absolute; top:0; bottom:0; width:42px; pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,203,0,.5),transparent);
  animation:offerShine 3.4s ease-in-out infinite;
}
@keyframes offerShine{
  0%{ inset-inline-start:-60px; } 45%,100%{ inset-inline-start:130%; }
}
.nav-offer:hover .spark{ display:none; }

/* contact CTA */
.nav-links a.nav-cta{
  font-family:var(--font-d); font-weight:700; font-size:14.5px; letter-spacing:.12em;
  text-transform:uppercase; background:#fff; color:var(--night);
  padding:11px 20px; border-radius:7px; transition:var(--tr); margin-inline-start:4px;
}
.nav-links a.nav-cta::after{ display:none; }
.nav-links a.nav-cta:hover{
  background:var(--yl); color:var(--night);
  transform:translateY(-2px); box-shadow:0 10px 26px rgba(255,203,0,.32);
}
.nav-links a.nav-offer::after{ display:none; }
.nav-links a.nav-offer{ color:var(--yl); }
.nav-links a.nav-offer:hover,.nav-links a.nav-offer.on{ color:var(--night); }

@media (prefers-reduced-motion:reduce){
  .nav-offer{ animation:none; }
  .nav-offer .spark{ display:none; }
}

/* language switcher */
.lang{ position:relative; }
.lang-btn{
  display:flex; align-items:center; gap:7px; color:#fff;
  font-family:var(--font-d); font-weight:600; font-size:14px; letter-spacing:.14em;
  padding:9px 14px; border-radius:6px; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);
  transition:var(--tr); text-transform:uppercase;
}
.lang-btn:hover{ box-shadow:inset 0 0 0 1.5px var(--yl); color:var(--yl); }
.lang-menu{
  position:absolute; top:calc(100% + 10px); inset-inline-end:0; min-width:170px;
  background:#fff; border-radius:10px; box-shadow:var(--sh-lg); padding:8px;
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:var(--tr);
}
.lang.open .lang-menu{ opacity:1; visibility:visible; transform:none; }
.lang-menu a{
  display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:7px;
  font-size:14.5px; font-weight:500; color:var(--ink);
}
.lang-menu a:hover{ background:var(--panel); }
.lang-menu a.on{ background:#fff8dd; color:var(--yl-ink); font-weight:600; }
.lang-menu .cc{ font-family:var(--font-d); font-weight:700; font-size:12px; letter-spacing:.08em;
  background:var(--night); color:#fff; border-radius:5px; padding:2px 7px; }

/* burger */
.burger{ display:none; width:44px; height:44px; position:relative; z-index:110; }
.burger i{ position:absolute; left:10px; right:10px; height:2.4px; background:#fff; border-radius:2px; transition:var(--tr); }
.burger i:nth-child(1){ top:14px; } .burger i:nth-child(2){ top:21px; } .burger i:nth-child(3){ top:28px; }
.burger.x i:nth-child(1){ top:21px; transform:rotate(45deg); }
.burger.x i:nth-child(2){ opacity:0; }
.burger.x i:nth-child(3){ top:21px; transform:rotate(-45deg); }

/* mobile menu */
.mnav{
  position:fixed; inset:0; z-index:105; background:rgba(11,12,14,.98);
  opacity:0; visibility:hidden; transition:var(--tr);
  overflow:hidden;
}
.mnav::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url('../img/brand/honeycomb.webp') right top / var(--hex-tile) repeat;
  opacity:.10; filter:invert(1);
}
.mnav.open{ opacity:1; visibility:visible; }
.mnav-scroll{
  position:relative; height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:calc(64px + env(safe-area-inset-top)) var(--pad) 48px;
  display:flex; flex-direction:column;
}
.mnav-label{
  font-family:var(--font-d); font-weight:700; font-size:11.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--yl); margin:22px 0 8px;
  transform:translateY(10px); opacity:0; transition:.4s;
}
.mnav-label:first-child{ margin-top:4px; }
.mnav.open .mnav-label{ transform:none; opacity:1; }
.mnav-item{
  display:flex; align-items:center; gap:14px; padding:12px 10px; border-radius:12px;
  transform:translateY(14px); opacity:0; transition:.4s; color:#fff;
}
.mnav.open .mnav-item{ transform:none; opacity:1; }
.mnav-item:active{ background:rgba(255,255,255,.06); }
.mnav-item .mico{
  flex:none; width:38px; height:38px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; background:rgba(255,203,0,.1); color:var(--yl);
}
.mnav-item .mico svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }
.mnav-item span{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mnav-item b{
  font-family:var(--font-d); font-weight:700; font-size:17px; text-transform:uppercase;
  letter-spacing:.02em; line-height:1.2;
}
.mnav-item small{ font-size:12.5px; color:#9aa1ab; line-height:1.3; }
.mnav-item.single b{ font-size:19px; }
.mnav-item.on{ background:rgba(255,203,0,.08); }
.mnav-item.on b{ color:var(--yl); }
.mnav-item.mnav-offer{
  margin-top:18px; background:linear-gradient(100deg,rgba(255,203,0,.16),rgba(255,203,0,.04));
  border:1px solid rgba(255,203,0,.3);
}
.mnav-item.mnav-offer .mico{ background:var(--yl); color:var(--night); }
.mnav-item.mnav-cta{
  margin-top:10px; background:var(--yl); color:var(--night); justify-content:flex-start;
}
.mnav-item.mnav-cta .mico{ background:rgba(11,12,14,.12); color:var(--night); }
.mnav .mnav-langs{ display:flex; gap:10px; margin-top:30px; flex-wrap:wrap; flex:none; }
.mnav .mnav-langs a{
  font-family:var(--font-d); font-size:14px; font-weight:600; padding:8px 16px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3); border-radius:7px; color:#fff;
  transform:none; opacity:1;
}
.mnav .mnav-langs a.on{ background:var(--yl); color:var(--night); box-shadow:none; }

/* ---------- hero ---------- */
.hero{
  position:relative; height:calc(100svh - var(--cb-h,0px)); min-height:640px;
  display:flex; align-items:flex-end; overflow:hidden; background:var(--night);
  transition:height .4s ease;
}
.hero video,.hero .hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero .veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,12,14,.55) 0%,rgba(11,12,14,.15) 40%,rgba(11,12,14,.82) 100%);
}
.hero .wrap{ position:relative; z-index:2; width:100%; padding-bottom:clamp(60px,9vh,110px); color:#fff; }
.hero .tri{ margin-bottom:26px; }
.hero h1{ font-size:clamp(52px,8.5vw,118px); font-weight:700; }
.hero h1 .y{ color:var(--yl); display:block; }
.hero .hero-sub{
  margin-top:22px; max-width:560px; font-size:clamp(15px,1.6vw,18.5px); color:#d6d9de;
}
.hero .hero-cta{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; }
.hero .scroll-cue{
  position:absolute; bottom:26px; inset-inline-end:44px; z-index:3;
  width:30px; height:52px; border:2px solid rgba(255,255,255,.4); border-radius:16px;
}
.hero .scroll-cue::after{
  content:""; position:absolute; top:9px; left:50%; width:4px; height:10px; margin-left:-2px;
  background:var(--yl); border-radius:2px; animation:cue 1.8s infinite;
}
@keyframes cue{ 0%{transform:translateY(0);opacity:1} 70%{transform:translateY(18px);opacity:0} 100%{opacity:0} }

/* ---------- stats band ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px); }
.stat{ border-top:3px solid var(--yl); padding-top:18px; }
.stat b{
  display:block; font-family:var(--font-d); font-weight:700;
  font-size:clamp(38px,4.6vw,62px); line-height:1; color:#fff;
}
.stat span{ display:block; margin-top:8px; font-size:13.5px; letter-spacing:.18em; text-transform:uppercase; color:#9aa1ab; }

/* ---------- family / product cards ---------- */
.fam-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:26px; }
.fam-card{
  position:relative; background:#fff; border:1px solid var(--rule); border-radius:var(--r);
  padding:34px 30px 30px; overflow:hidden; transition:var(--tr);
  display:flex; flex-direction:column; min-height:330px;
}
.fam-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--yl); transform:scaleX(0); transform-origin:left; transition:transform .4s;
}
.fam-card:hover{ transform:translateY(-8px); box-shadow:var(--sh-lg); border-color:transparent; }
.fam-card:hover::before{ transform:scaleX(1); }
.fam-card .fam-num{
  font-family:var(--font-d); font-weight:700; font-size:15px; letter-spacing:.2em; color:var(--yl-ink);
}
.fam-card h3{ font-size:25px; font-weight:700; margin-top:10px; }
.fam-card p{ color:var(--ink-2); font-size:14.5px; margin-top:10px; flex:1; }
.fam-card .fam-img{
  position:absolute; bottom:-16px; inset-inline-end:-14px; width:130px; height:180px;
  object-fit:contain; filter:drop-shadow(0 14px 24px rgba(0,0,0,.28));
  transition:var(--tr); opacity:.94;
}
.fam-card:hover .fam-img{ transform:translateY(-10px) rotate(-3deg) scale(1.05); }
.fam-card .fam-link{
  font-family:var(--font-d); font-weight:600; font-size:14px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); display:inline-flex; gap:8px; align-items:center; margin-top:16px;
}
.fam-card:hover .fam-link{ color:var(--yl-ink); }

/* ---------- finder teaser ---------- */
.finder-box{
  background:var(--night-2); border-radius:20px; padding:clamp(34px,5vw,64px);
  position:relative; overflow:hidden; color:#fff; box-shadow:var(--sh-lg);
}
.finder-box::after{
  content:""; position:absolute; inset:0;
  background:url('../img/brand/honeycomb.webp') right bottom / var(--hex-tile) repeat;
  opacity:.09; filter:invert(1); pointer-events:none;
}
.finder-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.2fr 1fr; gap:44px; align-items:center; }
.finder-fake{
  display:flex; align-items:center; gap:14px; background:#fff; border-radius:12px;
  padding:20px 24px; color:var(--ink-3); font-size:16.5px; cursor:pointer; transition:var(--tr);
  box-shadow:0 16px 44px rgba(0,0,0,.4);
}
.finder-fake:hover{ transform:translateY(-3px); box-shadow:0 22px 54px rgba(0,0,0,.5); }
.finder-fake .mag{ color:var(--yl-ink); flex:none; }
.finder-chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.finder-chips a{
  font-family:var(--font-d); font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:#cfd3da; padding:7px 14px; border-radius:20px; box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.22); transition:var(--tr);
}
.finder-chips a:hover{ color:var(--night); background:var(--yl); box-shadow:none; }

/* ---------- sector tiles ---------- */
.sect-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px; }
.sect-grid.sg-fixed3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:820px){ .sect-grid.sg-fixed3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .sect-grid.sg-fixed3{ grid-template-columns:1fr; } }
.sect-grid.sg-fixed5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:980px){ .sect-grid.sg-fixed5{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .sect-grid.sg-fixed5{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:400px){ .sect-grid.sg-fixed5{ grid-template-columns:1fr; } }
/* industry overview: intro + real application photography from source catalogue */
/* The fixed-height mosaic cropped 30-60% off application photography, which is
   the one thing these pages are meant to show. A justified row keeps every
   photo whole: each tile grows in proportion to its own aspect ratio, so the
   row fills edge to edge with nothing cut. */
.ind-gallery{ display:flex; gap:14px; height:auto; }
.ind-gallery a{
  position:relative; border-radius:16px; overflow:hidden; display:block;
  box-shadow:var(--sh); flex:1 1 0; min-width:0; align-self:flex-start;
}
.ind-gallery img{
  position:static; width:100%; height:auto; display:block; object-fit:contain;
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
}
.ind-gallery a:hover img{ transform:scale(1.07); }
.ind-gallery a::after{
  content:""; position:absolute; inset:0; opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,203,0,.2),transparent);
  transition:opacity .2s;
}
.ind-gallery a:hover::after{ opacity:1; }
@media (max-width:820px){
  .ind-gallery{ grid-template-columns:1fr 1fr; height:340px; }
}
@media (max-width:560px){
  .ind-gallery{ grid-template-columns:1fr; grid-template-rows:none; height:auto; }
  .ind-gallery{ flex-wrap:wrap; }
  .ind-gallery a{ flex:1 1 100%; }
}

.sect-tile{
  position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:4/4.6; display:block;
  background:var(--night-2);
}
.sect-tile img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 42%;   /* keep the subject, not the sky, in frame */
  transition:transform .8s cubic-bezier(.22,.61,.36,1),filter .5s;
}
.sect-tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,12,14,0) 30%,rgba(11,12,14,.88) 100%);
}
.sect-tile:hover img{ transform:scale(1.08); }
.sect-tile .st-in{ position:absolute; left:22px; right:22px; bottom:20px; z-index:2; color:#fff; }
.sect-tile h3{ font-size:23px; font-weight:700; }
.sect-tile p{ font-size:13px; color:#c6cad1; margin-top:6px; opacity:0; transform:translateY(8px); transition:var(--tr); }
.sect-tile:hover p{ opacity:1; transform:none; }
.sect-tile .st-bar{ width:34px; height:3.5px; background:var(--yl); border-radius:2px; margin-bottom:12px; transition:width .4s; }
.sect-tile:hover .st-bar{ width:58px; }

/* ---------- split band (plant / heritage) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); align-items:center; }
.split .fig{ border-radius:18px; overflow:hidden; box-shadow:var(--sh-lg); position:relative; }
.split .fig img{ width:100%; height:auto; object-fit:contain; aspect-ratio:auto; transition:transform .9s; }
.split .fig:hover img{ transform:scale(1.05); }
.split .fig .badge,.plant-gallery .pg-main .badge{
  position:absolute; top:18px; inset-inline-start:18px; z-index:2; background:var(--yl); color:var(--night);
  font-family:var(--font-d); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 14px; border-radius:7px;
}
.ticks{ margin-top:26px; display:flex; flex-direction:column; gap:13px; }
.ticks li{ display:flex; gap:13px; align-items:flex-start; font-size:15.5px; color:var(--ink-2); }
.dark .ticks li{ color:#c3c8cf; }
.ticks li::before{
  content:""; flex:none; width:9px; height:9px; margin-top:7px; background:var(--yl); border-radius:2px;
}
.mini-stats{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:30px; }
.mini-stat{ background:var(--panel); border-radius:12px; padding:18px 20px; border-inline-start:4px solid var(--yl); }
.dark .mini-stat{ background:var(--night-3); }
.mini-stat b{ font-family:var(--font-d); font-weight:700; font-size:28px; display:block; line-height:1; }
.mini-stat span{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:5px; display:block; }
.dark .mini-stat span{ color:#9aa1ab; }

/* ---------- heritage strip ---------- */
/* Heritage archive galleries (home-page 4-shot strip, About page's fuller
   collage). The scans are a deliberate mix of portrait (~0.75) and
   landscape (~1.5) artwork, and every tile must stay in one row, side by
   side -- a fixed-height filmstrip wrapped to a second row once the row
   ran out of width. Justified-row layout instead: each tile's flex-grow
   is set (inline, per tile) to that image's own aspect ratio, so at
   flex-basis:0 the browser divides the full row width between them in
   exactly that proportion. The box that results is always the image's
   native ratio -- cover crops nothing because there's nothing left to
   crop -- and the row always fills edge to edge, one line, no wrap. */
.her-gal{ display:flex; gap:20px; margin-top:44px; }
.her-gal .hs{
  display:block; flex-basis:0; min-width:0; margin:0; border-radius:12px; overflow:hidden;
  box-shadow:var(--sh); transform:rotate(var(--rot,0deg));
  transition:var(--tr); background:var(--paper);
}
.her-gal .hs:hover{ transform:rotate(0) scale(1.04); position:relative; z-index:2; box-shadow:var(--sh-lg); }
.her-gal .hs img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:820px){
  .her-gal{ flex-wrap:wrap; }
  .her-gal .hs{ flex:0 0 auto !important; height:clamp(160px,30vw,240px); }
  .her-gal .hs img{ width:auto; }
}

/* timeline */
.tline{ display:flex; gap:0; margin-top:50px; position:relative; }
.tline::before{ content:""; position:absolute; top:7px; left:0; right:0; height:2px; background:var(--rule); }
.dark .tline::before{ background:rgba(255,255,255,.14); }
.tl{ flex:1; position:relative; padding-top:30px; padding-inline-end:16px; }
.tl::before{
  content:""; position:absolute; top:0; inset-inline-start:0; width:16px; height:16px; border-radius:50%;
  background:var(--yl); box-shadow:0 0 0 5px rgba(255,203,0,.2);
}
.tl b{ font-family:var(--font-d); font-weight:700; font-size:24px; display:block; }
.tl span{ font-size:13.5px; color:var(--ink-3); display:block; margin-top:5px; }
.dark .tl span{ color:#9aa1ab; }

/* ---------- cert badges ---------- */
.certs{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; }
.certs > *{ flex:0 1 210px; }
/* value-chain strip (8 cards): flex-wrap left a ragged 5-then-3 row at most
   widths, since it packs by min width rather than a fixed column count. */
.certs.cf-fixed4{ display:grid; grid-template-columns:repeat(4,1fr); }
@media (max-width:860px){ .certs.cf-fixed4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .certs.cf-fixed4{ grid-template-columns:1fr; } }
.cert{
  background:#fff; border:1px solid var(--rule); border-radius:12px; padding:26px 22px; text-align:center; transition:var(--tr);
}
.cert:hover{ transform:translateY(-6px); box-shadow:var(--sh); border-color:var(--yl); }
.cert b{ font-family:var(--font-d); font-weight:700; font-size:24px; display:block; color:var(--ink); }
.cert span{
  font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:7px; display:block;
  overflow-wrap:break-word; word-break:break-word;
}

/* certified-fact cards (sustainability pillars) — icon + full sentence, not a bare bullet */
.sus-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-top:26px; }
.sus-card{
  display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--rule);
  border-radius:12px; padding:18px 20px; transition:var(--tr);
}
.sus-card:hover{ transform:translateY(-4px); box-shadow:var(--sh); border-color:var(--yl); }
.sus-card i{
  flex:none; width:32px; height:32px; border-radius:50%; background:var(--panel);
  display:flex; align-items:center; justify-content:center; font-style:normal;
}
.sus-card i svg{ width:15px; height:15px; }
.sus-card span{ font-size:14px; color:var(--ink-2); line-height:1.55; padding-top:4px; }
.dark .sus-card{ background:var(--night-2); border-color:rgba(255,255,255,.08); }
.dark .sus-card span{ color:#c3c8cf; }
.dark .sus-card i{ background:rgba(255,255,255,.08); }

/* legal pages — long-form reading, so a narrow measure and generous leading */
.legal{ max-width:76ch; }
.legal-updated{ font-family:var(--font-d); font-weight:600; font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); }
.legal-intro{ font-size:18px; color:var(--ink-2); line-height:1.7; margin-top:18px; }
.legal-block{ margin-top:38px; }
.legal-block h2{ font-size:clamp(20px,2.4vw,26px); font-weight:700; }
.legal-block p{ color:var(--ink-2); font-size:16px; line-height:1.75; margin-top:14px; }

/* certificate gallery (quality page) — the issued documents themselves.
   Contained, never cropped: a certificate with a clipped edge reads as fake. */
.cert-gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.cg-item{ display:flex; flex-direction:column; transition:var(--tr); }
.cg-item:hover{ transform:translateY(-5px); }
.cg-img{
  display:block; background:transparent; border:1px solid var(--rule); border-radius:12px;
  padding:0; overflow:hidden; box-shadow:var(--sh); transition:var(--tr);
}
.cg-item:hover .cg-img{ border-color:var(--yl); box-shadow:var(--sh-lg); }
.cg-img img{ width:100%; height:auto; display:block; }
.cg-cap{
  margin-top:12px; font-size:13px; line-height:1.5; color:var(--ink-2);
  font-family:var(--font-d); font-weight:600;
}
.dark .cg-cap{ color:#c3c8cf; }

/* "Why Johnson" competitive-advantage pillars (home page) */
.why-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px;
  margin-top:clamp(36px,5vw,54px);
}
.why-card{
  background:var(--night-2); border:1px solid rgba(255,255,255,.08); border-radius:16px;
  padding:28px 24px; transition:var(--tr);
}
.why-card:hover{ transform:translateY(-6px); border-color:var(--yl); box-shadow:0 20px 44px rgba(0,0,0,.35); }
.why-card i{
  width:46px; height:46px; border-radius:12px; background:rgba(255,203,0,.12); color:var(--yl);
  display:flex; align-items:center; justify-content:center; font-style:normal; margin-bottom:18px;
}
.why-card i svg{ width:22px; height:22px; }
.why-card h3{
  font-family:var(--font-d); font-weight:700; font-size:18px; text-transform:none;
  letter-spacing:0; color:#fff; margin-bottom:10px;
}
.why-card p{ font-size:14px; line-height:1.6; color:#aeb4bd; }

/* ---------- marquee ---------- */
.marq{ overflow:hidden; position:relative; padding:26px 0; }
.marq::before,.marq::after{
  content:""; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none;
}
.marq::before{ left:0; background:linear-gradient(90deg,var(--night),transparent); }
.marq::after{ right:0; background:linear-gradient(-90deg,var(--night),transparent); }
.marq-track{ display:flex; gap:54px; width:max-content; animation:marq 36s linear infinite; }
.marq:hover .marq-track{ animation-play-state:paused; }
@keyframes marq{ to{ transform:translateX(-50%); } }
.marq .oem{
  font-family:var(--font-d); font-weight:700; font-size:22px; letter-spacing:.14em;
  color:#5a6069; white-space:nowrap; text-transform:uppercase; transition:color .3s;
}
.marq .oem:hover{ color:var(--yl); }

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(120deg,var(--yl) 0%,#ffdb4d 100%);
  border-radius:22px; padding:clamp(40px,6vw,72px); color:var(--night);
  display:grid; grid-template-columns:1.4fr auto; gap:36px; align-items:center;
  position:relative; overflow:hidden;
}
.cta-band::after{
  content:""; position:absolute; inset:0;
  background:url('../img/brand/honeycomb.webp') right bottom / var(--hex-tile) repeat;
  mix-blend-mode:multiply; opacity:.30; pointer-events:none;
}
.cta-band h2{ font-size:clamp(30px,4.4vw,52px); font-weight:700; position:relative; z-index:1; }
.cta-band p{ margin-top:12px; font-size:16.5px; color:#3d3406; position:relative; z-index:1; }
.cta-band .btn{ position:relative; z-index:1; }

/* ---------- footer ---------- */
.foot{ background:var(--night); color:#fff; padding:clamp(56px,7vw,90px) 0 0; position:relative; overflow:hidden; }
.foot::before{
  content:""; position:absolute; inset:0;
  background:url('../img/brand/honeycomb.webp') left top / var(--hex-tile) repeat;
  opacity:.09; filter:invert(1); pointer-events:none;
}
.foot .wrap{ position:relative; z-index:1; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:clamp(28px,4vw,56px); }
.foot-logo{ display:flex; align-items:center; gap:14px; }
.foot-logo img{ height:58px; }
.foot-desc{ margin-top:20px; color:#9aa1ab; font-size:14.5px; max-width:320px; }
.foot .tri{ margin-top:22px; }
.foot h4{
  font-family:var(--font-d); font-weight:600; font-size:15px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--yl); margin-bottom:20px;
}
.foot-links{ display:flex; flex-direction:column; gap:11px; }
.foot-links a{ color:#c3c8cf; font-size:14.5px; transition:.25s; }
.foot-links a:hover{ color:var(--yl); padding-inline-start:5px; }
.foot-c{ color:#c3c8cf; font-size:14.5px; display:flex; flex-direction:column; gap:13px; }
.foot-c b{ color:#fff; font-weight:600; }
.cookiebar{
  position:fixed; left:14px; right:14px; bottom:-140px; z-index:200; max-width:640px;
  margin:0 auto; background:var(--night); color:#fff; border-radius:12px;
  padding:12px 16px; box-shadow:0 20px 60px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.08);
  display:flex; flex-wrap:wrap; align-items:center; gap:12px; transition:bottom .5s ease;
}
.cookiebar.show{ bottom:14px; }
.cookiebar p{ flex:1; min-width:200px; font-size:12.5px; color:#c3c8cf; line-height:1.4; margin:0; }
.cookiebar p a{ color:var(--yl); text-decoration:underline; text-underline-offset:2px; white-space:nowrap; }
.cookiebar-btns{ display:flex; gap:8px; flex:none; }
.cookiebar-btns button{
  font-family:var(--font-d); font-weight:600; font-size:12px; padding:8px 14px;
  border-radius:8px; cursor:pointer; border:0;
}
.cookiebar-btns .cb-decline{ background:transparent; color:#c3c8cf; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2); }
.cookiebar-btns .cb-accept{ background:var(--yl); color:var(--night); }
@media (max-width:480px){ .cookiebar{ flex-direction:column; align-items:stretch; } .cookiebar-btns{ justify-content:stretch; } .cookiebar-btns button{ flex:1; } }
.foot-social{ display:flex; gap:10px; margin-top:20px; }
.foot-social a{
  width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); color:#c3c8cf; transition:var(--tr);
}
.foot-social a:hover{ background:var(--yl); color:var(--night); transform:translateY(-3px); }
.foot-social svg{ width:16px; height:16px; fill:currentColor; }
.foot-bar{
  margin-top:clamp(40px,6vw,64px); border-top:1px solid rgba(255,255,255,.1);
  padding:22px 0; font-size:13px; color:#7d848e;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.foot-bar .langs{ display:flex; gap:14px; }
.foot-bar .langs a:hover{ color:var(--yl); }

/* ---------- signature: oil flow scroll line ---------- */
.oilline{
  position:fixed; top:0; bottom:0; inset-inline-start:0; width:4px; z-index:99;
  background:rgba(128,128,128,.14); pointer-events:none;
}
.oilline i{
  position:absolute; top:0; left:0; right:0; height:0;
  background:linear-gradient(180deg,#ffe066 0%,var(--yl) 30%,var(--yl-deep) 100%);
  box-shadow:0 0 14px rgba(255,203,0,.5);
  transition:height .15s linear;
}
.oilline i::after{
  content:""; position:absolute; bottom:-7px; left:50%; transform:translateX(-50%);
  width:12px; height:14px; background:var(--yl);
  border-radius:50% 50% 50% 50% / 38% 38% 62% 62%;
  box-shadow:0 0 16px rgba(255,203,0,.75);
}
@media (max-width:1080px){ .oilline{ display:none; } }

/* ---------- hero load-in sequence ---------- */
@keyframes heroIn{
  from{ opacity:0; transform:translateY(38px); }
  to{ opacity:1; transform:none; }
}
.hero .tri{ animation:heroIn .8s .15s cubic-bezier(.22,.61,.36,1) both; }
.hero h1{ animation:heroIn .9s .3s cubic-bezier(.22,.61,.36,1) both; }
.hero .hero-sub{ animation:heroIn .9s .5s cubic-bezier(.22,.61,.36,1) both; }
.hero .hero-cta{ animation:heroIn .9s .68s cubic-bezier(.22,.61,.36,1) both; }
@media (prefers-reduced-motion:reduce){
  .hero .tri,.hero h1,.hero .hero-sub,.hero .hero-cta{ animation:none; }
  .oilline{ display:none; }
}

/* ---------- rich hover & motion layer ---------- */

/* cards get a sweeping gold light on hover */
.fam-pill,.cert,.cat-card,.tech-card,.promo-card,.ind-card,.prod-card,.mini-stat{
  position:relative; overflow:hidden;
}
.fam-pill::after,.cert::after,.cat-card::after,.tech-card::after,
.promo-card::after,.prod-card::after{
  content:""; position:absolute; top:0; bottom:0; width:55%; z-index:3;
  inset-inline-start:-70%; pointer-events:none; opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,203,0,.22),transparent);
  transition:opacity .2s;
}
.fam-pill:hover::after,.cert:hover::after,.cat-card:hover::after,
.tech-card:hover::after,.promo-card:hover::after,.prod-card:hover::after{
  opacity:1; animation:cardShine .9s ease-out;
}
@keyframes cardShine{ from{ inset-inline-start:-70%; } to{ inset-inline-start:130%; } }

/* stat counters: glow pulse while counting */
.stat b{ position:relative; transition:text-shadow .4s; }
.stat:hover b{ text-shadow:0 0 26px rgba(255,203,0,.55); color:var(--yl); }
.stat{ transition:transform .4s; }
.stat:hover{ transform:translateY(-4px); }
.stat::after{
  content:""; position:absolute; inset-inline-start:0; top:-3px; height:3px; width:0;
  background:var(--yl); transition:width .6s cubic-bezier(.22,.61,.36,1);
}
.stat.in::after{ width:100%; }

/* section headings lift in with a gold underline draw */
.sec-head .eyebrow{ position:relative; display:inline-block; padding-inline-start:26px; }
.sec-head .eyebrow::before{
  content:""; position:absolute; inset-inline-start:0; top:50%; width:16px; height:16px;
  margin-top:-8px; background:var(--yl);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  animation:hexSpin 7s linear infinite;
}
@keyframes hexSpin{ to{ transform:rotate(360deg); } }
.sec-head.center .eyebrow{ padding-inline-start:0; padding-top:26px; }
.sec-head.center .eyebrow::before{ inset-inline-start:50%; margin-inline-start:-8px; top:0; margin-top:0; }

/* images: slow ken-burns inside figures */
.fig img,.sci-fig img{ will-change:transform; }

/* MARKETING KEY VISUALS — logos and set text must never be cropped.
   These carry brand artwork edge to edge, so they are contained, not covered. */
.fig.keyvis, .sci-fig.keyvis, .tech-card .tc-img{ background:var(--night); }
.fig.keyvis img, .sci-fig.keyvis img, .tech-card .tc-img img{
  object-fit:contain !important; width:100%; height:auto; aspect-ratio:auto !important;
  transform:none !important;
}
.fig.keyvis:hover img, .sci-fig.keyvis:hover img, .tech-card:hover .tc-img img{
  transform:scale(1.03) !important;
}
/* the campaign-board source images span 1.38-1.9 native aspect ratio, so
   letting each render at its own size (the shared rule above) gave every
   tech-card a different height. Fixed box + contain: same footprint for
   all six cards, source images still shown whole, just letterboxed instead
   of dictating the card's shape. */
.tech-card .tc-img{ aspect-ratio:8/5; display:flex; align-items:center; justify-content:center; }
.tech-card .tc-img img{ height:100%; width:100%; aspect-ratio:auto !important; }
/* generated cinematic loops (CGI molecule / facility / oil visuals) — standalone class,
   deliberately not reusing .fig so it never inherits an unrelated crop/aspect rule. */
.gen-vid{
  position:relative; border-radius:20px; overflow:hidden; box-shadow:var(--sh-lg);
  aspect-ratio:16/10; background:var(--night);
}
.gen-vid video{ width:100%; height:100%; object-fit:cover; display:block; }
/* home page "A Plant Built For Scale": real building + real storage-tank
   photos, side by side — replaced a drone video here per the client's own
   call, after finding it read as static/lifeless when the page is opened
   locally (video autoplay is commonly blocked outside a real server/https
   context, e.g. a plain file:// preview) rather than a production defect. */
.plant-gallery{
  display:flex; flex-direction:column; gap:14px;
  border-radius:20px; overflow:hidden; box-shadow:var(--sh-lg);
}
.plant-gallery .pg-main{ position:relative; aspect-ratio:16/10; overflow:hidden; }
/* the tank photo is a real panoramic shot (1800x831, ~2.17:1) — a side
   column previously forced object-fit:cover to crop most of it away
   (reported: "cysterny sa uciete"). Matching the row's own aspect-ratio to
   the photo's exact native ratio means cover has nothing left to crop: the
   full frame shows, edge to edge, no letterboxing either. */
.plant-gallery .pg-side{ position:relative; aspect-ratio:1800/831; overflow:hidden; }
.plant-gallery img{ width:100%; height:100%; object-fit:cover; display:block; }
.gen-vid .badge{
  position:absolute; top:18px; inset-inline-start:18px; z-index:2; background:var(--yl); color:var(--night);
  font-family:var(--font-d); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 14px; border-radius:7px;
}
.gen-vid::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.28) 100%);
}
/* product campaign visuals — official marketing art, shown edge to edge like keyvis */
.camp-fig{ border-radius:20px; overflow:hidden; box-shadow:var(--sh-lg); }
.camp-fig img{ width:100%; height:auto; display:block; }
/* click-to-play campaign film */
.camplay{
  position:relative; border-radius:20px; overflow:hidden; box-shadow:var(--sh-lg);
  aspect-ratio:16/9; background:var(--night); cursor:pointer; max-width:820px; margin:0 auto;
}
.camplay img{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity .3s; }
.camplay video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; }
.camplay .cp-btn{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none;
}
.camplay .cp-btn i{
  width:80px; height:80px; border-radius:50%; background:var(--yl);
  box-shadow:0 8px 24px rgba(0,0,0,.45), 0 0 0 8px rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center; transition:transform .25s;
}
.camplay .cp-btn i svg{ width:26px; height:26px; margin-inline-start:4px; fill:var(--night); }
.camplay:hover .cp-btn i{ transform:scale(1.08); }
.camplay.playing img,.camplay.playing .cp-btn{ opacity:0; pointer-events:none; }
.camplay.playing video{ display:block; }
/* parallax must not crop — figures that keep cover get room to move */
.fig{ overflow:hidden; }
.fig::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,203,0,.16) 50%,transparent 70%);
  transition:opacity .5s;
}
.fig{ position:relative; }
.fig:hover::after{ opacity:1; }

/* buttons: gold ripple */
.btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.42) 0%,transparent 55%);
  opacity:0; transition:opacity .45s;
}
.btn:hover::after{ opacity:1; }

/* ticks animate in one by one */
.ticks li{ opacity:0; transform:translateX(-14px); transition:.55s cubic-bezier(.22,.61,.36,1); }
[dir="rtl"] .ticks li{ transform:translateX(14px); }
.in .ticks li,.rv.in .ticks li{ opacity:1; transform:none; }
.in .ticks li:nth-child(1){ transition-delay:.05s; }
.in .ticks li:nth-child(2){ transition-delay:.15s; }
.in .ticks li:nth-child(3){ transition-delay:.25s; }
.in .ticks li:nth-child(4){ transition-delay:.35s; }
.in .ticks li:nth-child(5){ transition-delay:.45s; }
.in .ticks li:nth-child(6){ transition-delay:.55s; }
.ticks li::before{ transition:transform .3s,box-shadow .3s; }
.ticks li:hover::before{ transform:rotate(45deg) scale(1.25); box-shadow:0 0 12px rgba(255,203,0,.7); }

/* tricolor draws itself */
.tri i{ transform-origin:left; animation:triDraw .7s cubic-bezier(.22,.61,.36,1) both; }
[dir="rtl"] .tri i{ transform-origin:right; }
.tri i:nth-child(2){ animation-delay:.12s; }
.tri i:nth-child(3){ animation-delay:.24s; }
@keyframes triDraw{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* CTA band: slow gold gradient movement */
.cta-band{ background-size:200% 200%; animation:ctaFlow 14s ease infinite; }
@keyframes ctaFlow{
  0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; }
}

/* footer headings get the hex mark too */
.foot h4{ position:relative; padding-inline-start:22px; }
.foot h4::before{
  content:""; position:absolute; inset-inline-start:0; top:50%; margin-top:-6px;
  width:12px; height:12px; background:var(--yl);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}

@media (prefers-reduced-motion:reduce){
  .sec.honey::after,.krule::after,h2.sec-title.gold,.hexfloat i,
  .sec-head .eyebrow::before,.cta-band,.tri i{ animation:none !important; }
  .ticks li{ opacity:1; transform:none; }
  h2.sec-title.gold{ color:var(--ink); background:none; -webkit-background-clip:initial; }
  .dark h2.sec-title.gold{ color:#fff; background:none; }
}

/* ---------- reveal animations ---------- */
.rv{ opacity:0; transform:translateY(34px); transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1); }
.rv.in{ opacity:1; transform:none; }
.rv-l{ transform:translateX(-40px); } .rv-l.in{ transform:none; }
.rv-r{ transform:translateX(40px); } .rv-r.in{ transform:none; }
.rv-d1{ transition-delay:.1s; } .rv-d2{ transition-delay:.2s; } .rv-d3{ transition-delay:.3s; }
.rv-d4{ transition-delay:.4s; } .rv-d5{ transition-delay:.5s; } .rv-d6{ transition-delay:.6s; }
@media (prefers-reduced-motion:reduce){
  .rv,.rv-l,.rv-r{ opacity:1; transform:none; transition:none; }
  .marq-track{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- page hero (subpages) ---------- */
.phero{
  position:relative; padding:calc(clamp(90px,14vh,150px) + 40px) 0 clamp(56px,8vw,96px);
  background:var(--night); color:#fff; overflow:hidden;
}
.phero .ph-bg{ position:absolute; inset:0; opacity:.35; }
.phero .ph-bg img,.phero .ph-bg video{ width:100%; height:100%; object-fit:cover; }
/* A video reads as a video only near full brightness — the flat .35 dim built
   for a static photo made motion barely perceptible, and an .78-.8 scrim
   still crushed it to near-black even on well-lit frames (measured: source
   luma ~100 * (1-.78) ≈ 22/255 — practically nothing). Legibility now comes
   from a much lighter gradient shaped to the text band, backed up by a
   text-shadow on the type itself rather than depending on the scrim alone —
   two independent safety margins instead of one. Same shape the home hero
   already uses, flipped: that text sits at the bottom of its frame, this
   text sits mid-frame. */
.phero-video .ph-bg{ opacity:1; }
.phero-video::after{
  background:linear-gradient(180deg,rgba(11,12,14,.04) 0%,rgba(11,12,14,.22) 45%,
    rgba(11,12,14,.28) 80%,rgba(11,12,14,.08) 100%);
}
.phero-video .crumbs,.phero-video h1,.phero-video .sec-sub{
  text-shadow:0 2px 20px rgba(0,0,0,.9),0 1px 4px rgba(0,0,0,.95);
}
/* .phero's own padding-driven height was built for a short static-image banner
   and has no cap: on a narrow, tall phone screen the same clamp()s that look
   fine on a wide desktop compound into an oversized column, most of which is
   the darkened top/bottom padding rather than visible footage — the video
   ends up feeling "barely there" simply because the frame showing it is out
   of proportion to begin with. Scoped to .phero-video only, so every other
   page's plain-image banner (Manufacturing, Quality, Contact, all 14
   remaining industry pages) is untouched. clamp() alone does the adapting
   across phone/tablet/laptop/desktop — no extra breakpoints needed. */
.phero-video{
  height:clamp(360px,58vh,640px); padding:0;
  display:flex; align-items:flex-end;
}
.phero-video .wrap{ padding-bottom:clamp(32px,5vw,56px); width:100%; }
.phero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,12,14,.6),rgba(11,12,14,.92));
}
.phero .wrap{ position:relative; z-index:2; }
.phero h1{ font-size:clamp(40px,6.5vw,84px); font-weight:700; }
.phero .crumbs{ display:flex; gap:9px; font-size:13.5px; letter-spacing:.12em; text-transform:uppercase; color:#9aa1ab; margin-bottom:22px; font-family:var(--font-d); }
.phero .crumbs a:hover{ color:var(--yl); }

/* ---------- manifesto (editorial) ---------- */
.manif{ display:grid; grid-template-columns:0.9fr 1.25fr; gap:clamp(36px,5vw,64px); align-items:center; }
.manif .m-copy p{ color:var(--ink-2); font-size:16.5px; margin-top:18px; }
.manif .m-fig{ display:flex; flex-direction:column; gap:20px; }
.manif .m-fig .fig{ border-radius:20px; overflow:hidden; box-shadow:var(--sh-lg); }
.manif .m-fig img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.manif .m-quote{
  background:var(--night); color:#fff; border-radius:14px; padding:24px 28px;
  font-family:var(--font-d); font-size:20px; font-weight:600; line-height:1.32;
  box-shadow:var(--sh); border-inline-start:5px solid var(--yl);
  display:flex; align-items:flex-start; gap:16px;
}
.manif .m-quote::before,.manif .m-quote::after{
  color:var(--yl); font-size:42px; line-height:.7; flex:none; font-family:Georgia,serif;
}
.manif .m-quote::before{ content:"\201C"; align-self:flex-end; }
.manif .m-quote::after{ content:"\201D"; align-self:flex-start; }
@media (max-width:900px){ .manif{ grid-template-columns:1fr; } }

/* ---------- science triptych ---------- */
.sci{ display:flex; flex-direction:column; gap:clamp(36px,5vw,60px); }
.sci-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center; }
.sci-row:nth-child(even) .sci-fig{ order:2; }
.sci-fig{ border-radius:18px; overflow:hidden; box-shadow:var(--sh-lg); position:relative; }
.sci-fig img{ width:100%; height:auto; aspect-ratio:auto; object-fit:contain; transition:transform .9s; }
.sci-row:hover .sci-fig img{ transform:scale(1.05); }
.sci-num{
  position:absolute; top:16px; inset-inline-start:16px; width:46px; height:46px; border-radius:12px;
  background:var(--yl); color:var(--night); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-d); font-weight:700; font-size:20px; box-shadow:0 8px 22px rgba(0,0,0,.3);
}
.sci-txt h3{ font-size:clamp(24px,3vw,34px); font-weight:700; }
.sci-txt p{ color:var(--ink-2); font-size:15.5px; margin-top:14px; }
.sci-tag{
  display:inline-block; margin-top:16px; font-family:var(--font-d); font-weight:600; font-size:12.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--yl-ink);
  border:1.5px solid var(--yl); border-radius:20px; padding:7px 15px;
}
@media (max-width:820px){ .sci-row{ grid-template-columns:1fr; } .sci-row:nth-child(even) .sci-fig{ order:0; } }

/* ---------- compact family strip ---------- */
.fam-strip{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.fam-pill{
  background:#fff; border:1px solid var(--rule); border-radius:13px; padding:22px 14px 16px;
  text-align:center; transition:var(--tr); display:flex; flex-direction:column; align-items:center; gap:10px;
}
.fam-pill:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:var(--yl); }
.fam-pill img{
  height:104px; width:auto; filter:drop-shadow(0 10px 18px rgba(0,0,0,.22));
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.fam-pill:hover img{ transform:translateY(-5px) scale(1.07); }
.fam-pill .no-img{ height:104px; display:flex; align-items:center; justify-content:center; opacity:.25; }
/* name block gets a fixed height so every "View products" line sits on the same baseline */
.fam-pill b{
  font-family:var(--font-d); font-weight:700; font-size:14.5px; line-height:1.15;
  text-transform:uppercase; letter-spacing:.04em; color:var(--ink);
  min-height:2.3em; display:flex; align-items:center; justify-content:center;
}
.fam-pill span{ font-size:11.5px; color:var(--ink-3); margin-top:auto; }
.fam-pill:hover b{ color:var(--yl-ink); }

/* ---------- technology cards ---------- */
.tech-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:24px; }
.tech-card{
  background:#fff; border:1px solid var(--rule); border-radius:16px; overflow:hidden;
  transition:var(--tr); display:flex; flex-direction:column;
}
.tech-card:hover{ transform:translateY(-7px); box-shadow:var(--sh-lg); border-color:transparent; }
.tech-card .tc-more{
  margin-top:14px; font-family:var(--font-d); font-weight:700; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:6px; transition:color .25s;
}
.tech-card .tc-more .ar{ transition:transform .25s; }
.tech-card:hover .tc-more{ color:var(--yl-ink); }
.tech-card:hover .tc-more .ar{ transform:translateX(3px); }
.tech-card .tc-img{ position:relative; overflow:hidden; background:var(--night); }
.tech-card .tc-img img{ width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .8s cubic-bezier(.22,.61,.36,1); }
.tech-card:hover .tc-img img{ transform:scale(1.06); }
.tech-card .tc-tag{
  display:inline-block; background:var(--yl); color:var(--night); border-radius:7px; padding:6px 12px;
  font-family:var(--font-d); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:12px;
}
.tech-card .tc-body{ padding:24px 24px 26px; flex:1; display:flex; flex-direction:column; }
.tech-card h3{ font-size:22px; font-weight:700; }
.tech-card p{ color:var(--ink-2); font-size:14.5px; margin-top:12px; flex:1; }
.dark .tech-card{ background:var(--night-2); border-color:rgba(255,255,255,.08); }
.dark .tech-card p{ color:#aeb4bd; }
.dark .tech-card h3{ color:#fff; }

/* tech strip (home) */
.tech-strip{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px; }
.tech-pill{
  border:1.5px solid var(--rule); border-radius:12px; padding:20px 16px; text-align:center;
  transition:var(--tr); background:#fff; display:block;
}
.tech-pill:hover{ border-color:var(--yl); transform:translateY(-5px); box-shadow:var(--sh); }
.tech-pill.featured{ border-color:var(--yl); border-width:2px; background:var(--panel); box-shadow:var(--sh); }
/* explicit colours — these pills sit on dark sections, so never inherit white text */
.tech-strip .tech-pill b{
  font-family:var(--font-d); font-weight:700; font-size:15px; text-transform:uppercase;
  letter-spacing:.04em; display:block; line-height:1.2; color:var(--ink);
}
.tech-strip .tech-pill span{
  font-size:11.5px; color:var(--ink-3); margin-top:7px; display:block; letter-spacing:.1em;
  text-transform:uppercase;
}
.tech-strip .tech-pill:hover b{ color:var(--yl-ink); }

/* ---------- promotions ---------- */
.promo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:24px; }
.promo-card{
  position:relative; background:#fff; border:1px solid var(--rule); border-radius:16px;
  overflow:hidden; transition:var(--tr); display:flex; flex-direction:column;
}
.promo-card:hover{ transform:translateY(-7px); box-shadow:var(--sh-lg); border-color:var(--yl); }
.promo-card .pm-top{
  background:linear-gradient(160deg,#f8f9fb 0%,#eceff3 100%); padding:26px;
  display:flex; align-items:center; justify-content:center; min-height:210px; position:relative;
}
.promo-card .pm-top::after{
  content:""; position:absolute; inset:0;
  background:url('../img/brand/honeycomb.webp') right bottom / var(--hex-tile) repeat; opacity:.3;
}
.promo-card .pm-top img{ max-height:180px; width:auto; position:relative; z-index:1;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.24)); transition:transform .5s; }
.promo-card:hover .pm-top img{ transform:translateY(-6px) scale(1.05); }
.promo-badge{
  position:absolute; top:16px; inset-inline-start:16px; z-index:2; border-radius:7px;
  padding:7px 14px; font-family:var(--font-d); font-weight:700; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.promo-badge.deal{ background:var(--red); color:#fff; }
.promo-badge.new{ background:var(--yl); color:var(--night); }
.promo-badge.bundle{ background:var(--blue); color:#fff; }
.promo-card .pm-body{ padding:24px 24px 26px; flex:1; display:flex; flex-direction:column; }
.promo-card h3{ font-size:21px; font-weight:700; }
.promo-card .pm-prod{
  font-family:var(--font-d); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--yl-ink); margin-top:8px; font-weight:600;
}
.promo-card .pm-price{
  display:flex; align-items:baseline; gap:9px; margin-top:14px;
  padding:12px 16px; background:var(--night); border-radius:10px;
  border-inline-start:4px solid var(--yl);
}
.promo-card .pm-price b{
  font-family:var(--font-d); font-weight:700; font-size:30px; color:var(--yl); line-height:1;
}
.promo-card .pm-price span{
  font-family:var(--font-d); font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#9aa1ab;
}
.promo-card p{ color:var(--ink-2); font-size:14.5px; margin-top:12px; flex:1; }
.promo-card .pm-packs{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.promo-card .pm-packs span{
  font-family:var(--font-d); font-weight:600; font-size:12px; letter-spacing:.05em;
  background:var(--panel); border:1px solid var(--rule); border-radius:7px;
  padding:6px 11px; color:var(--ink-2);
}
.promo-card .pm-foot{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--rule);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.promo-card .pm-valid{ font-size:12.5px; color:var(--ink-3); }
.promo-card .pm-valid b{ color:var(--ink); font-weight:600; }
.promo-card .pm-go{
  font-family:var(--font-d); font-weight:600; font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; display:inline-flex; gap:7px; align-items:center; color:var(--ink);
}
.promo-card:hover .pm-go{ color:var(--yl-ink); }
.promo-empty{
  text-align:center; padding:clamp(48px,7vw,88px) var(--pad);
  background:var(--panel); border-radius:18px; border:1.5px dashed var(--rule);
}
.promo-empty h3{ font-size:clamp(22px,3vw,32px); font-weight:700; }
.promo-empty p{ color:var(--ink-2); max-width:520px; margin:14px auto 26px; font-size:15.5px; }
.promo-terms{ font-size:12.5px; color:var(--ink-3); margin-top:clamp(30px,4vw,46px); max-width:760px; }

/* ---------- industry hub grid ---------- */
.ind-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.ind-card{
  position:relative; border-radius:var(--r); overflow:hidden; display:block;
  aspect-ratio:5/3.4; background:var(--night-2); transition:var(--tr);
}
.ind-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.22,.61,.36,1); }
.ind-card::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,12,14,.15) 20%,rgba(11,12,14,.9) 100%); }
.ind-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); }
.ind-card:hover img{ transform:scale(1.08); }
.ind-card .ic-in{ position:absolute; left:20px; right:20px; bottom:16px; z-index:2; color:#fff; }
.ind-card h3{ font-size:22px; font-weight:700; }
.ind-card .ic-n{
  font-family:var(--font-d); font-weight:600; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--yl); display:block; margin-bottom:6px;
}
.ind-card p{ font-size:12.5px; color:#c6cad1; margin-top:5px; opacity:0; max-height:0;
  transition:var(--tr); overflow:hidden; }
.ind-card:hover p{ opacity:1; max-height:60px; }

/* ---------- catalogue: subcategory sections ---------- */
.subcat{ scroll-margin-top:150px; }
.subcat + .subcat{ margin-top:clamp(40px,5vw,64px); }
.subcat-head{
  display:flex; align-items:center; gap:16px; margin-bottom:22px;
  border-bottom:2px solid var(--night); padding-bottom:12px;
}
.subcat-head h3{ font-size:clamp(20px,2.4vw,28px); font-weight:700; }
.subcat-head .cnt{
  margin-inline-start:auto; font-family:var(--font-d); font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; align-items:start; }
.cat-card{
  background:#fff; border:1px solid var(--rule); border-radius:12px; padding:16px 16px 14px;
  transition:var(--tr); display:flex; flex-direction:column; text-align:center;
  cursor:pointer;
}
.cat-card:hover{ transform:translateY(-5px); box-shadow:var(--sh); border-color:var(--yl); }
.cat-card.open{ box-shadow:var(--sh-lg); border-color:var(--yl); }
.cat-card.open:hover{ transform:none; }
.cat-card .ci{ height:130px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; flex:none; }
.cat-card .ci img{ max-height:100%; width:auto; filter:drop-shadow(0 8px 16px rgba(0,0,0,.18));
  transition:transform .45s; }
.cat-card:hover .ci img{ transform:translateY(-4px) scale(1.05); }
/* application photograph rather than a cut-out pack shot: fill the frame like a
   photo instead of floating like a bottle (a drop-shadowed rectangle reads wrong,
   and letterboxing a photo wastes the card) */
.cat-card .ci.photo{ border-radius:10px; overflow:hidden; }
.cat-card .ci.photo img{
  width:100%; height:100%; max-height:none; object-fit:cover; filter:none;
}
.cat-card b.ctitle{ font-family:var(--font-d); font-weight:700; font-size:15.5px; line-height:1.2;
  text-transform:uppercase; letter-spacing:.02em; }
/* closed state: a single calm, small-caps eyebrow line (grade/spec), never the full prose */
.cat-card .cs{
  font-family:var(--font-d); font-size:11px; color:var(--yl-ink); margin-top:7px;
  font-weight:600; letter-spacing:.04em; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* description only appears once a card is open — no jarring style-flip on expand */
.cat-card .cd{
  display:none; text-align:start; font-size:13.5px; color:var(--ink-2);
  line-height:1.6; margin-top:16px;
}
.cat-card.open .cd{ display:block; }
.cat-card.open .cs{
  -webkit-line-clamp:unset; overflow:visible; text-align:start; text-transform:none;
  font-weight:500; font-size:12.5px; letter-spacing:.02em; color:var(--ink-3);
  padding-top:12px; margin-top:12px; border-top:1px solid var(--rule);
}
.cat-card .cx-label{
  display:none; font-family:var(--font-d); font-weight:700; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px;
}
.cat-card.open .cx-label{ display:block; }
.cat-card .cpack{ display:none; margin-top:14px; padding-top:12px; border-top:1px solid var(--rule); text-align:start; }
.cat-card.open .cpack{ display:block; }
.cat-card .cpack b{
  display:block; font-family:var(--font-d); font-weight:700; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px;
}
.cat-card .cpack-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.cat-card .cpack-chips span{
  font-family:var(--font-d); font-weight:600; font-size:11.5px; letter-spacing:.03em;
  background:var(--night); color:#fff; border-radius:6px; padding:5px 10px;
}
.cat-card .cmore{
  margin-top:14px; padding-top:12px; border-top:1px solid transparent;
  font-family:var(--font-d); font-weight:700;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; justify-content:center; gap:5px;
}
.cat-card .cmore svg{ width:9px; height:9px; transition:transform .25s; }
.cat-card.open .cmore svg{ transform:rotate(180deg); }
.cat-card.hid{ display:none; }
/* real navigation to the product's own page — additive next to .cmore's
   inline accordion toggle, which keeps working exactly as before */
.cat-card .cat-full{
  margin-top:8px; display:block; text-align:center; font-family:var(--font-d);
  font-weight:700; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--yl-ink); text-decoration:none;
}
.cat-card .cat-full:hover{ text-decoration:underline; }

/* category picker — the default landing view for an industry page: pick a
   category, see only its products. No-JS fallback is deliberate: .cat-tiles
   stays display:none until .cat-browser.mode-tiles is set by JS, so if script
   fails to run the page falls back to today's plain full-list view rather
   than hiding every product behind a picker that can't be tapped. */
.cat-tiles{ display:none; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin-bottom:clamp(32px,4vw,52px); }
.cat-browser.mode-tiles .cat-tiles{ display:grid; }
.cat-browser.mode-tiles .subcat{ display:none; }
.cat-browser.mode-tiles .subcat.active{ display:block; }
.cat-browser.mode-tiles .subcat.active .subcat-head{ scroll-margin-top:150px; }
.cat-tile{
  display:flex; flex-direction:column; gap:6px; padding:22px 20px; border-radius:14px;
  background:var(--panel); box-shadow:inset 0 0 0 1px var(--rule); transition:var(--tr);
  text-align:start;
}
.cat-tile:hover{ transform:translateY(-4px); box-shadow:inset 0 0 0 1.5px var(--yl), var(--sh); }
.cat-tile .ct-name{ font-family:var(--font-d); font-weight:700; font-size:16.5px; }
.cat-tile .ct-count{ font-size:12.5px; color:var(--ink-3); }
.cat-tile.cat-tile-all{
  background:var(--night); box-shadow:none;
}
.cat-tile.cat-tile-all .ct-name{ color:#fff; }
.cat-tile.cat-tile-all .ct-count{ color:#9aa1ac; }
.cat-tile.cat-tile-all:hover{ transform:translateY(-4px); box-shadow:0 0 0 1.5px var(--yl), var(--sh); }
.cat-back{
  display:none; align-items:center; gap:8px; font-family:var(--font-d); font-weight:700;
  font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
  margin-bottom:22px; cursor:pointer; background:none; border:0; padding:0;
}
.cat-browser.mode-tiles .cat-back.show{ display:inline-flex; }
.cat-back:hover{ color:var(--yl-ink); }

/* sticky subcategory nav */
.subnav{
  position:sticky; top:64px; z-index:55; background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--rule); padding:14px 0;
}
.subnav .wrap{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.subnav-links{ display:flex; gap:8px; flex-wrap:wrap; }
.subnav-links a{
  font-family:var(--font-d); font-weight:600; font-size:12.5px; letter-spacing:.08em;
  text-transform:uppercase; padding:8px 14px; border-radius:18px; color:var(--ink-2);
  box-shadow:inset 0 0 0 1.5px var(--rule); transition:var(--tr);
}
.subnav-links a:hover{ box-shadow:inset 0 0 0 1.5px var(--yl); color:var(--yl-ink); }
@media (max-width:900px){ .subnav{ top:56px; } }

/* ---------- product finder bar ---------- */
.finderbar{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--rule);
  padding:16px 0;
}
.finderbar .wrap{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.finder-input{
  flex:1; min-width:240px; display:flex; align-items:center; gap:11px;
  background:var(--panel); border:1.6px solid var(--rule); border-radius:11px;
  padding:13px 18px; transition:var(--tr);
}
.cform-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.finder-input:focus-within{ border-color:var(--yl); background:#fff; box-shadow:0 6px 24px rgba(255,203,0,.16); }
.finder-input svg{ color:var(--ink-3); flex:none; }
.finder-input input{ border:0; outline:0; background:none; font:inherit; width:100%; color:var(--ink); }
.fchips{ display:flex; gap:8px; flex-wrap:wrap; }
.fchip{
  font-family:var(--font-d); font-weight:600; font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; padding:9px 16px; border-radius:20px; color:var(--ink-2);
  box-shadow:inset 0 0 0 1.5px var(--rule); transition:var(--tr); cursor:pointer;
}
.fchip:hover{ box-shadow:inset 0 0 0 1.5px var(--yl); color:var(--yl-ink); }
.fchip.on{ background:var(--night); color:#fff; box-shadow:none; }
.fcount{ font-size:13.5px; color:var(--ink-3); white-space:nowrap; }

/* ---------- product listing ---------- */
.pfam{ scroll-margin-top:140px; }
.pfam + .pfam{ margin-top:clamp(48px,6vw,80px); }
.pfam-head{ display:flex; align-items:baseline; gap:18px; border-bottom:2.5px solid var(--night); padding-bottom:14px; margin-bottom:28px; }
.pfam-head .n{ font-family:var(--font-d); font-weight:700; font-size:16px; letter-spacing:.2em; color:var(--yl-ink); }
.pfam-head h2{ font-size:clamp(24px,3vw,36px); font-weight:700; }
.pfam-head .c{ margin-inline-start:auto; font-size:13.5px; color:var(--ink-3); }
.prod-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px; }
.prod-card{
  position:relative; background:#fff; border:1px solid var(--rule); border-radius:var(--r);
  padding:22px 22px 20px; transition:var(--tr); display:flex; flex-direction:column; overflow:hidden;
}
.prod-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:transparent; }
.prod-card .p-img{
  height:168px; display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.prod-card .p-img img{
  max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.22)); transition:transform .45s;
}
.prod-card:hover .p-img img{ transform:translateY(-6px) scale(1.05); }
.tierchip{
  align-self:flex-start; font-family:var(--font-d); font-weight:700; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; padding:5px 11px; border-radius:6px;
  background:var(--panel); color:var(--ink-2);
}
.tierchip.t-pp{ background:var(--night); color:var(--yl); }
.tierchip.t-p{ background:var(--night-3); color:#fff; }
.tierchip.t-gp,.tierchip.t-g{ background:#fff3c2; color:#6b5400; }
.tierchip.t-sp,.tierchip.t-s{ background:#eceff3; color:#5a636e; }
.prod-card h3{ font-size:19.5px; font-weight:700; margin-top:10px; }
.prod-card .p-type{ font-size:13px; color:var(--ink-3); margin-top:5px; flex:1; }
.prod-card .p-go{
  margin-top:14px; font-family:var(--font-d); font-weight:600; font-size:13px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink); display:flex; gap:8px; align-items:center;
}
.prod-card:hover .p-go{ color:var(--yl-ink); }
.prod-card.hid{ display:none; }
/* industrial-catalogue cards whose image is an industry-gallery stand-in
   photo rather than a product pack shot — same reasoning as .pv-card.photo */
.prod-card.photo .p-img{ height:168px; border-radius:10px; overflow:hidden; }
.prod-card.photo .p-img img{
  width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; filter:none;
}
.fchips-row{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:26px; }

/* ---------- product detail ---------- */
.pdet{ display:grid; grid-template-columns:minmax(300px,420px) 1fr; gap:clamp(32px,5vw,72px); align-items:start; }
.pdet-visual{ position:sticky; top:110px; }
.pdet-visual .pv-card{
  background:linear-gradient(165deg,#f8f9fb 0%,#eceff3 100%);
  border-radius:20px; padding:40px 30px; display:flex; align-items:center; justify-content:center;
  min-height:420px; position:relative; overflow:hidden;
}
.pdet-visual .pv-card::after{
  content:""; position:absolute; inset:0;
  background:url('../../assets/img/brand/honeycomb.webp') right bottom / var(--hex-tile) repeat; opacity:.3;
  pointer-events:none;
}
.pdet-visual img{ max-height:430px; width:auto; position:relative; z-index:1;
  filter:drop-shadow(0 24px 44px rgba(0,0,0,.3)); }
/* catalogue products with no dedicated pack shot fall back to a real
   industry-gallery photo (same stand-in logic as the .cat-card accordion) —
   fill the frame like a photograph instead of floating a rectangle like a
   bottle cutout */
.pdet-visual .pv-card.photo{ padding:0; }
.pdet-visual .pv-card.photo img{
  width:100%; height:100%; max-height:420px; object-fit:cover; filter:none; border-radius:20px;
}
.pdet-visual .badge-strip{
  margin-top:16px; background:var(--night); color:var(--yl); text-align:center;
  font-family:var(--font-d); font-weight:600; font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; border-radius:10px; padding:11px 16px;
}
.pv-grades{ margin-top:16px; }
.pv-grades .pv-g-label{
  font-family:var(--font-d); font-weight:700; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:10px;
}
.pv-grades .pv-g-row{ display:flex; flex-wrap:wrap; gap:8px; }
.pv-grades button.pv-g{
  border:1.5px solid #dfe3e8; background:#fff; border-radius:10px; padding:8px 13px;
  font-family:var(--font-d); font-weight:700; font-size:12.5px; color:var(--ink-2);
  cursor:pointer; transition:.18s; letter-spacing:.02em;
}
.pv-grades button.pv-g:hover{ border-color:var(--yl); color:var(--ink); }
.pv-grades button.pv-g.on{ background:var(--night); border-color:var(--night); color:var(--yl); }
.pdet h1{ font-size:clamp(32px,4.4vw,54px); font-weight:700; }
.pdet .p-chips{ display:flex; gap:9px; margin:16px 0 4px; flex-wrap:wrap; }
.pdet .lead{ font-size:16.5px; color:var(--ink-2); margin-top:18px; }
.pdet h3.blk{
  font-family:var(--font-d); font-weight:700; font-size:15px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink); margin:30px 0 14px; display:flex; align-items:center; gap:11px;
}
.pdet h3.blk::before{ content:""; width:14px; height:14px; background:var(--yl); border-radius:3px; }
.reco-note{
  background:#fff8dd; border-inline-start:4px solid var(--yl); border-radius:9px;
  padding:15px 18px; font-size:14.5px; color:#6b5500; margin-top:16px;
}
.warn-note{
  background:#fdecea; border-inline-start:4px solid var(--red); border-radius:9px;
  padding:15px 18px; font-size:14.5px; color:#8d1720; margin-top:16px;
}
.oem-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.oem-chips span{
  position:relative; display:inline-flex; align-items:center;
  background:#fff; border:1px solid var(--rule); border-radius:10px;
  padding:14px 22px; transition:var(--tr); overflow:hidden;
}
.oem-chips span::before{
  content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px;
  background:var(--yl); transform:scaleY(0); transition:transform .3s; transform-origin:bottom;
}
.oem-chips span:hover{ border-color:transparent; box-shadow:var(--sh-lg); transform:translateY(-2px); }
.oem-chips span:hover::before{ transform:scaleY(1); }
.oem-chips b{
  font-family:var(--font-d); font-weight:600; font-size:13.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-2); white-space:nowrap; transition:color .3s;
}
.oem-chips span:hover b{ color:var(--ink); }
.gr-table{ width:100%; border-collapse:collapse; font-size:14px; }
.gr-table th{
  font-family:var(--font-d); font-weight:600; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; text-align:start; color:var(--ink-3);
  border-bottom:2px solid var(--night); padding:9px 10px;
}
.gr-table td{ padding:11px 10px; border-bottom:1px solid var(--rule); }
.gr-table td.sae{ font-family:var(--font-d); font-weight:700; font-size:16px; }
.rate{ display:flex; flex-direction:column; gap:12px; max-width:460px; }
.rate .rr{ display:grid; grid-template-columns:170px 1fr 34px; gap:14px; align-items:center; font-size:13.5px; }
.rate .bar{ height:8px; background:var(--panel); border-radius:4px; overflow:hidden; }
.rate .bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--yl),var(--yl-deep)); border-radius:4px; }
.rate b{ font-family:var(--font-d); font-size:15px; }
.pack-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.pack-chips span{
  font-family:var(--font-d); font-weight:600; font-size:14px; letter-spacing:.06em;
  background:var(--night); color:#fff; border-radius:8px; padding:9px 16px;
}
.ladder{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.ladder a{
  border:1.5px solid var(--rule); border-radius:11px; padding:15px 16px; transition:var(--tr);
}
.ladder a:hover{ border-color:var(--yl); transform:translateY(-3px); box-shadow:var(--sh); }
.ladder a.here{ background:var(--night); border-color:var(--night); color:#fff; }
.ladder b{ font-family:var(--font-d); font-weight:700; font-size:15px; letter-spacing:.06em; display:block; text-transform:uppercase; }
.ladder span{ font-size:12px; color:var(--ink-3); margin-top:4px; display:block; }
.ladder a.here span{ color:var(--yl); }

@media (max-width:900px){
  .pdet{ grid-template-columns:1fr; }
  .pdet-visual{ position:static; }
}

/* ---------- responsive ---------- */
@media (max-width:1280px){
  .nav-links a,.ndrop-btn{ font-size:13px; padding:9px 9px; letter-spacing:.08em; }
  .nav-cta,.nav-offer{ font-size:13px; padding:10px 14px; }
  .nav .wrap{ gap:16px; }
}
@media (max-width:1080px){
  .nav-links{ display:none; }
  .burger{ display:block; margin-inline-start:auto; }
  .nav .lang{ margin-inline-start:0; }
  .finder-inner{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:820px){
  .stats{ grid-template-columns:1fr 1fr; gap:28px; }
  .split{ grid-template-columns:1fr; }
  .tline{ flex-direction:column; gap:26px; }
  .tline::before{ display:none; }
  .tl{ padding-top:0; padding-inline-start:30px; }
  .tl::before{ top:5px; }
  .cta-band{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .foot-grid{ grid-template-columns:1fr; }
  .hero .scroll-cue{ display:none; }
  .mini-stats{ grid-template-columns:1fr; }
  .cform-row{ grid-template-columns:1fr; }
  .finder-input{ min-width:0; }
}

/* ---------- RTL fixes ---------- */
[dir="rtl"] .fam-card::before{ transform-origin:right; }
[dir="rtl"] .nav-links a::after{ transform-origin:right; }
[dir="rtl"] .marq-track{ animation-name:marq-rtl; }
@keyframes marq-rtl{ to{ transform:translateX(50%); } }
/* Arabic prose mixes in Latin brand/OEM names — without this, the browser's
   bidi algorithm can glue an Arabic connector straight onto the following
   Latin word (e.g. "و" + "Ferrari" rendering as one run) and can reorder
   embedded LTR runs like phone numbers or "60,000 km / 40,000 mi". Plaintext
   mode resolves direction per Unicode paragraph rules instead of forcing
   the ancestor's dir, which fixes both. */
[dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] .cs, [dir="rtl"] .cd,
[dir="rtl"] .lead, [dir="rtl"] .sec-sub, [dir="rtl"] .mini-stat b,
[dir="rtl"] .foot-c, [dir="rtl"] .oem-chips b{ unicode-bidi:plaintext; }

/* Obrazy kafli dostawaly klase .st-in przeznaczona dla nakladki tekstowej,
   przez co byly odsuniete o 22px od krawedzi i spod spodu przebijalo
   ciemne tlo kafla jako czarny pasek. Obraz ma zawsze wypelniac kafel. */
.sect-tile img.st-in,
.sect-tile picture.st-in img{
  position:absolute; inset:0; left:0; right:0; top:0; bottom:0;
  width:100%; height:100%; object-fit:cover;
}


/* ostatni rzad galerii nie zostawia pojedynczego, osieroconego kafla */
.cert-gallery, .cg-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:22px; }
.cert-gallery > *, .cg-grid > *{ flex:0 1 260px; }





/* ---------- galeria "Inside the Plant" ----------
   Cztery zdjecia poziome w gornym rzedzie, cztery pionowe w dolnym.
   Kazdy rzad ma jednakowa wysokosc, wiec caly blok tworzy rowny prostokat. */
.mgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:34px; }
.mgrid .mg-cell{ position:relative; margin:0; overflow:hidden; border-radius:var(--r);
                 background:var(--night-2); }
.mgrid .mg-cell.wide{ grid-column:span 2; aspect-ratio:16/9; }
.mgrid .mg-cell.tall{ aspect-ratio:2/3; }
.mgrid .mg-cell img{ position:absolute; inset:0; width:100%; height:100%;
                     object-fit:cover; transition:transform .8s cubic-bezier(.22,.61,.36,1); }
.mgrid .mg-cell:hover img{ transform:scale(1.06); }
.mgrid .mg-cell figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:26px 16px 13px;
  font-family:var(--font-d); font-size:13.5px; color:#fff;
  background:linear-gradient(180deg,rgba(11,12,14,0),rgba(11,12,14,.86));
}
@media (max-width:900px){
  .mgrid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .mgrid .mg-cell.wide{ grid-column:span 2; }
}


/* zdjecie prezentowane w calosci - nic nie jest kadrowane */
.wide-fig{ margin:34px 0 0; border-radius:var(--r); overflow:hidden; box-shadow:var(--sh); }
.wide-fig img{ display:block; width:100%; height:auto; }
.wide-fig{ line-height:0; }   /* zero swiatla pod obrazem */
.wide-fig figcaption{ display:none; }


/* ==========================================================================
   PLASTER MIODU — premium, wielowarstwowy system dla jasnych sekcji
   (.sec.light.honey, .sec.tint.honey). Dwie niezalezne, bezszwowe
   tesselacje zamiast jednej plaskiej tapety:

     ::before  "siatka glowna" - drobna baza pelnego pokrycia + rozrzucone
               akcenty w kilku skalach (male/srednie/rzadkie duze), czesc
               podwojnie obrysowana, czesc tylko czesciowo dorysowana
               ("szkicowo"), najwieksze z delikatnym emboss (highlight +
               shadow offset). Kafelek 675.5x540px.
     ::after   "akcenty dalekiego planu" - tylko rzadkie, duze struktury,
               na INNYM, niewspolmiernym kaflu (941x812px), wolno
               dryfujace. Dwa rozne okresy kafelkowania nakladaja sie na
               siebie i nigdy nie wchodza w synchronizacje, wiec oko nie
               wylapuje powtorzenia mimo ze kazda warstwa z osobna jest
               tapeta.

   Kazdy ksztalt (maly i duzy) jest renderowany w 9 kopiach (sam kafel +
   8 sasiadow), a dopiero potem przyciety do jednego kafla - dlatego ZADEN
   szesciokat nie jest ucinany na krawedzi: to, co "znika" po jednej
   stronie, domyka sie idealnie po drugiej.

   mask-image dodaje odwrocona winiete: wzor jest pelny przy krawedziach
   sekcji, a stlumiony nad srodkowa kolumna tresci, gdzie zwykle siedzi
   naglowek/tekst/karty/CTA - pattern nie konkuruje z contentem.
   ========================================================================== */
.sec.light{ background:#fdfcf8; }

.sec.light.honey::before,
.sec.tint.honey::before{
  background-image:url('../img/brand/honeycomb-light.webp');
  background-position:0 0;
  background-size:1040px 860px;
  background-repeat:repeat;
  filter:none;
}
.sec.light.honey::after,
.sec.tint.honey::after{
  background-image:url('../img/brand/honeycomb-light-2.webp');
  background-position:100% 0;
  background-size:941px 812px;
  background-repeat:repeat;
  filter:none;
  animation:honeyDrift 140s linear infinite;
}
.sec.light.honey::before, .sec.light.honey::after,
.sec.tint.honey::before,  .sec.tint.honey::after{
  mask-image:radial-gradient(ellipse 72% 76% at 50% 50%, rgba(0,0,0,.42) 0%, rgba(0,0,0,.42) 42%, #000 100%);
  -webkit-mask-image:radial-gradient(ellipse 72% 76% at 50% 50%, rgba(0,0,0,.42) 0%, rgba(0,0,0,.42) 42%, #000 100%);
}
.sec.light.honey::before{ opacity:1; }
.sec.light.honey::after{ opacity:.46; }
.sec.tint.honey::before{ opacity:.68; }
.sec.tint.honey::after{ opacity:.3; }

.sec.dark.honey::before{ opacity:.05; filter:invert(1); }

/* mobile: proporcjonalnie mniejsze komorki - nie moga byc na telefonie
   2 ogromne szesciokaty */
@media (max-width:760px){
  .sec.light.honey::before, .sec.tint.honey::before{ background-size:582px 481px; }
  .sec.light.honey::after,  .sec.tint.honey::after{  background-size:527px 455px; }
}
.sec.light.honey::after{ display:none !important; }

/* ---------- home product marquee ----------
   One continuous, left-to-right row of every product, in catalogue order.
   Two identical tracks scroll as one and the animation resets exactly when
   the first track has fully passed, so the loop has no visible seam.
   Pauses on hover/focus, and holds still for reduced-motion users. */
.fam-marquee{ margin-top:40px; position:relative; }
.fam-marquee::before,
.fam-marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none;
}
.fam-marquee::before{ inset-inline-start:0; background:linear-gradient(90deg,var(--paper),transparent); }
.fam-marquee::after{ inset-inline-end:0;  background:linear-gradient(270deg,var(--paper),transparent); }
.mq-viewport{ display:flex; width:max-content; animation:mq-scroll 150s linear infinite; }
.mq-track{ display:flex; gap:18px; padding-inline-end:18px; }
.fam-marquee:hover .mq-viewport,
.fam-marquee:focus-within .mq-viewport{ animation-play-state:paused; }
@keyframes mq-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.mq-item{
  flex:0 0 auto; width:168px; background:#fff; border:1px solid var(--rule); border-radius:14px;
  padding:16px 14px 14px; text-align:center; transition:var(--tr); display:block;
}
.mq-item:hover{ border-color:var(--yl); transform:translateY(-5px); box-shadow:var(--sh); }
.mq-item img{
  height:104px; max-width:100%; width:auto; object-fit:contain; display:block; margin:0 auto 10px;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.18));
}
.mq-item b{
  display:block; font-family:var(--font-d); font-weight:700; font-size:12.5px; line-height:1.25;
  text-transform:uppercase; letter-spacing:.02em; color:var(--ink); min-height:31px;
}
.mq-item span{
  display:block; margin-top:6px; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3);
}
@media (prefers-reduced-motion:reduce){
  .mq-viewport{ animation:none; }
  .fam-marquee{ overflow-x:auto; }
}