/* =========================================================
   YiPai Hardware — site stylesheet
   Guangzhou YiPai Hardware Co. Ltd
   1. Tokens  2. Base  3. Utilities  4. Header  5. Hero
   6. Sections  7. Product grid & detail  8. Footer  9. Responsive
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --ink:#111315;
  --ink-2:#1b1e22;
  --ink-3:#26292e;
  --text:#4c525b;
  --muted:#8b929c;
  --line:#e7e2d8;
  --line-2:#efece5;
  --bg:#ffffff;
  --cream:#fbf8f2;
  --cream-2:#f6f1e6;
  --gold:#c39b4a;
  --gold-2:#a9802f;
  --gold-3:#e6c98c;
  --gold-pale:#f7f0de;
  --radius:4px;
  --radius-lg:8px;
  --shadow-sm:0 1px 2px rgba(17,19,21,.05), 0 6px 18px -12px rgba(17,19,21,.18);
  --shadow-md:0 18px 50px -28px rgba(17,19,21,.35);
  --wrap:1240px;
  --ff:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --fh:"Jost","Inter","Segoe UI",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --tr:.28s cubic-bezier(.2,.6,.3,1);
}

/* ---------- 2. Base ---------- */
html{overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.yp-site{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--ff);font-size:16px;line-height:1.72;
  font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* clip rather than hidden: hidden on body turns it into a scroll container and kills position:sticky */
  overflow-x:clip;
}
.yp-site img{max-width:100%;display:block}
.yp-site a{color:var(--ink);text-decoration:none;transition:color var(--tr)}
.yp-site a:hover{color:var(--gold-2)}
.yp-site h1,.yp-site h2,.yp-site h3,.yp-site h4,.yp-site h5{
  font-family:var(--fh);color:var(--ink);font-weight:500;line-height:1.18;
  margin:0 0 .5em;letter-spacing:.005em;
}
.yp-site h1{font-size:clamp(1.9rem,3.4vw,3rem);font-weight:600}
.yp-site h2{font-size:clamp(1.35rem,2vw,1.72rem)}
.yp-site h3{font-size:clamp(1.15rem,1.6vw,1.35rem)}
.yp-site p{margin:0 0 1.1em}
.yp-site ul,.yp-site ol{margin:0 0 1.2em;padding-inline-start:1.2em}
.yp-site li{margin:0 0 .45em}
.yp-site strong{color:var(--ink);font-weight:600}
.yp-site small{font-size:.82rem}
.yp-site hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
::selection{background:var(--gold-3);color:#1a1408}

.skip-link{
  position:absolute;inset-inline-start:-9999px;top:0;z-index:999;
  background:var(--ink);color:#fff;padding:10px 18px;border-radius:0 0 4px 0;
}
.skip-link:focus{inset-inline-start:0;color:#fff}

/* ---------- 3. Utilities ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:26px}
.i{
  display:inline-block;width:1em;height:1em;vertical-align:-.12em;
  background-color:currentColor;flex:0 0 auto;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.i-mail{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2'/%3E%3Cpath d='M3 6.5l9 6.5 9-6.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2'/%3E%3Cpath d='M3 6.5l9 6.5 9-6.5'/%3E%3C/svg%3E")}
.i-pin{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M12 21s7-6.1 7-11a7 7 0 10-14 0c0 4.9 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M12 21s7-6.1 7-11a7 7 0 10-14 0c0 4.9 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E")}
.i-factory{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M3 21V10l6 3.5V10l6 3.5V8l6 3.5V21z'/%3E%3Cpath d='M7 21v-3.5M13 21v-3.5M19 21v-3.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M3 21V10l6 3.5V10l6 3.5V8l6 3.5V21z'/%3E%3Cpath d='M7 21v-3.5M13 21v-3.5M19 21v-3.5'/%3E%3C/svg%3E")}
.i-phone{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M6.6 3.5h3l1.5 4-2 1.4a12 12 0 005.9 5.9l1.4-2 4 1.5v3a2 2 0 01-2.2 2A17.4 17.4 0 014.6 5.7 2 2 0 016.6 3.5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M6.6 3.5h3l1.5 4-2 1.4a12 12 0 005.9 5.9l1.4-2 4 1.5v3a2 2 0 01-2.2 2A17.4 17.4 0 014.6 5.7 2 2 0 016.6 3.5z'/%3E%3C/svg%3E")}
.i-check{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 12.5l5.2 5.2L20 6.9'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 12.5l5.2 5.2L20 6.9'/%3E%3C/svg%3E")}
.i-arrow{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.i-tool{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M14.5 3.5a4.6 4.6 0 016 6l-3-3-3 3-3-3 3-3zM11.5 9.5l-8 8 3 3 8-8'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M14.5 3.5a4.6 4.6 0 016 6l-3-3-3 3-3-3 3-3zM11.5 9.5l-8 8 3 3 8-8'/%3E%3C/svg%3E")}
.i-shield{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M12 3l7 3v6c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6l7-3z'/%3E%3Cpath d='M9 12l2.2 2.2L15.5 10'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M12 3l7 3v6c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6l7-3z'/%3E%3Cpath d='M9 12l2.2 2.2L15.5 10'/%3E%3C/svg%3E")}
.i-ship{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M3 13l9-3 9 3-3 6H6l-3-6z'/%3E%3Cpath d='M8 10V5h8v5M12 5V2.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M3 13l9-3 9 3-3 6H6l-3-6z'/%3E%3Cpath d='M8 10V5h8v5M12 5V2.5'/%3E%3C/svg%3E")}

/* buttons */
.btn{
  --bg1:var(--gold);--bg2:var(--gold-2);--fg:#1c1405;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:15px 28px;border:1px solid transparent;border-radius:2px;
  font-family:var(--fh);font-size:.78rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;line-height:1;cursor:pointer;
  background:linear-gradient(180deg,#d9b465,var(--gold-2));color:var(--fg);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 24px -16px rgba(120,92,30,.9);
  transition:transform var(--tr),box-shadow var(--tr),filter var(--tr);
}
.btn:hover{color:var(--fg);transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 16px 30px -18px rgba(120,92,30,1)}
.btn .i{font-size:1.05em}
.btn-ghost{
  background:transparent;color:var(--ink);border-color:#d7d1c4;box-shadow:none;
}
.btn-ghost:hover{color:var(--gold-2);border-color:var(--gold);background:rgba(195,155,74,.06)}
.btn-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.34);box-shadow:none}
.btn-light:hover{color:#fff;border-color:var(--gold-3);background:rgba(255,255,255,.08)}
.btn-sm{padding:12px 20px;font-size:.72rem}

.eyebrow{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--fh);font-size:.72rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-2);margin-bottom:1.1em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);opacity:.8}
.eyebrow.on-dark{color:var(--gold-3)}

/* ---------- 4. Header ---------- */
.topbar{background:#0e1012;color:#a9b0ba;font-size:.76rem;letter-spacing:.04em}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:38px}
.topbar-l,.topbar-r{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.tb-item{display:inline-flex;align-items:center;gap:.5em;white-space:nowrap}
.topbar a{color:#c9cfd7}
.topbar a:hover{color:var(--gold-3)}
.topbar .i{font-size:.95em;color:var(--gold)}

.lang-slot{display:flex;align-items:center;padding-inline-start:18px;border-inline-start:1px solid rgba(255,255,255,.14)}
.mod-languages .lang-switch{position:relative}
.mod-languages .lang-btn{
  display:inline-flex;align-items:center;gap:.45em;background:none;border:0;color:#e6eaef;
  font:inherit;font-size:.76rem;letter-spacing:.06em;cursor:pointer;padding:6px 0;
}
.mod-languages .lang-btn .i-arrow{transform:rotate(90deg);font-size:.85em;opacity:.7}
.mod-languages .lang-list{
  position:absolute;inset-inline-end:0;top:calc(100% + 8px);min-width:190px;z-index:120;
  background:#14171b;border:1px solid rgba(255,255,255,.1);border-radius:4px;
  box-shadow:0 20px 40px -22px #000;padding:6px;margin:0;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:all var(--tr);
}
.mod-languages.open .lang-list{opacity:1;visibility:visible;transform:none}
.mod-languages .lang-list li{margin:0}
.mod-languages .lang-list a{
  display:flex;align-items:center;gap:.6em;padding:8px 10px;border-radius:3px;
  color:#cfd5dc;font-size:.78rem;
}
.mod-languages .lang-list a:hover{background:rgba(195,155,74,.14);color:#fff}
.mod-languages .lang-list img{width:16px;height:11px;object-fit:cover;border-radius:1px}

.hdr{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line-2);
  transition:box-shadow var(--tr),background var(--tr);
}
.hdr.is-stuck{box-shadow:0 12px 30px -24px rgba(17,19,21,.6);background:#fff}
.hdr-in{display:flex;align-items:center;gap:34px;min-height:84px}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.brand-mark{width:auto;height:44px}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-txt strong{
  font-family:var(--fh);font-size:1.32rem;font-weight:700;letter-spacing:.16em;color:var(--ink);
}
.brand-txt em{
  font-style:normal;font-family:var(--fh);font-size:.58rem;font-weight:500;
  letter-spacing:.34em;color:var(--gold-2);margin-top:4px;
}
.nav{flex:1 1 auto;display:flex;justify-content:center}
.nav ul.nav-menu{
  display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none;
}
.nav ul.nav-menu li{margin:0;position:relative}
.nav ul.nav-menu > li > a,
.nav ul.nav-menu > li > span{
  display:block;padding:14px 15px;font-family:var(--fh);font-size:.8rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:#2b2f34;
}
.nav ul.nav-menu > li > a::after{
  content:"";display:block;height:1px;width:0;background:var(--gold);
  transition:width var(--tr);margin-top:7px;
}
.nav ul.nav-menu > li > a:hover::after,
.nav ul.nav-menu > li.active > a::after,
.nav ul.nav-menu > li.current > a::after{width:100%}
.nav ul.nav-menu > li.active > a,
.nav ul.nav-menu > li.current > a{color:var(--gold-2)}
.hdr-act{flex:0 0 auto;display:flex;align-items:center;gap:12px}
.hdr-act .btn{padding:13px 22px}
.burger{
  display:none;width:44px;height:44px;border:1px solid var(--line);background:#fff;
  border-radius:3px;cursor:pointer;padding:0;align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
}
.burger span{display:block;width:19px;height:1.5px;background:var(--ink);transition:all var(--tr)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- 5. Hero ---------- */
.hero-slot{position:relative}
.hero{
  position:relative;background:#0d0f11;color:#e9ecf0;overflow:hidden;
  min-height:600px;display:flex;align-items:center;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(900px 480px at 78% 8%, rgba(195,155,74,.20), transparent 62%),
    radial-gradient(700px 420px at 6% 96%, rgba(195,155,74,.10), transparent 65%),
    linear-gradient(105deg,#0b0d0f 0%,#131619 52%,#1a1d21 100%);
}
.hero::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:72px 72px;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 78%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 78%);
}
.hero-slides{position:relative;width:100%;z-index:2}
.hero-slide{
  display:none;align-items:center;gap:56px;padding:84px 0 92px;
}
.hero-slide.is-active{display:flex;animation:heroIn .7s cubic-bezier(.2,.6,.3,1) both}
@keyframes heroIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-copy{flex:1 1 52%;max-width:640px}
.hero h1{
  color:#fff;font-size:clamp(2.1rem,4.2vw,3.55rem);font-weight:600;line-height:1.08;
  letter-spacing:-.01em;margin:0 0 .5em;
}
.hero h1 .g{
  background:linear-gradient(100deg,#f0d79b,#c39b4a 46%,#8f6c22 78%,#e3c88f);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lead{color:#b8bfc8;font-size:1.06rem;line-height:1.72;max-width:33em;margin-bottom:2em}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:2.4em}
.hero-meta{
  display:flex;gap:34px;flex-wrap:wrap;padding-top:1.6em;
  border-top:1px solid rgba(255,255,255,.12);
}
.hero-meta div{display:flex;flex-direction:column;gap:2px}
.hero-meta b{font-family:var(--fh);font-size:1.5rem;font-weight:600;color:#fff;letter-spacing:.01em}
.hero-meta span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#8f97a1}
.hero-visual{flex:1 1 44%;position:relative;display:flex;justify-content:flex-end}
.hero-card{
  position:relative;width:100%;max-width:460px;aspect-ratio:1/1;border-radius:6px;
  background:#fff;padding:0;overflow:visible;
  box-shadow:0 50px 80px -50px #000,0 0 0 1px rgba(255,255,255,.10);
}
.hero-card img{width:100%;height:100%;object-fit:cover;border-radius:6px;display:block}
.hero-card::after{
  content:"";position:absolute;inset:12px;border:1px solid rgba(195,155,74,.35);
  border-radius:3px;pointer-events:none;
}
.hero-chip{
  position:absolute;inset-inline-start:-26px;bottom:34px;z-index:3;
  background:rgba(14,16,18,.86);backdrop-filter:blur(6px);
  border:1px solid rgba(195,155,74,.35);border-radius:3px;padding:14px 20px;
  display:flex;flex-direction:column;gap:2px;
}
.hero-chip b{font-family:var(--fh);color:#fff;font-size:1.05rem;letter-spacing:.02em}
.hero-chip span{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-3)}
.hero-photo{
  position:relative;width:100%;max-width:520px;aspect-ratio:4/3;border-radius:6px;overflow:hidden;
  box-shadow:0 50px 80px -46px #000;
}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-photo::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.hero-dots{
  position:absolute;inset-inline-start:0;bottom:26px;z-index:5;display:flex;gap:9px;
  align-items:center;
}
.hero-dots button{
  width:34px;height:3px;border:0;padding:0;background:rgba(255,255,255,.22);cursor:pointer;
  border-radius:2px;transition:background var(--tr),width var(--tr);
}
.hero-dots button.is-active{background:var(--gold);width:54px}
.hero-wrap{position:relative}
.hero-nav{
  position:absolute;inset-inline-end:26px;bottom:26px;z-index:5;display:flex;gap:8px;
}
.hero-nav button{
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.04);color:#fff;cursor:pointer;display:grid;place-items:center;
  transition:all var(--tr);
}
.hero-nav button:hover{background:var(--gold);border-color:var(--gold);color:#1b1405}
.hero-nav .i{font-size:1.05rem}
.hero-nav .i-prev{transform:rotate(180deg)}

/* ---------- 6. Sections ---------- */
.sec{padding:48px 0 60px}
.sec--tight{padding:36px 0 44px}
.sec--cream{background:var(--cream)}
.sec--cream2{background:var(--cream-2)}
.sec--dark{background:#0e1012;color:#b6bdc6}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark strong,.sec--dark b{color:#fff}
.hero-copy strong,.hero-copy b{color:#fff}
.sec-head{max-width:720px;margin-bottom:40px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head.center .eyebrow::before{display:none}
.sec-title{margin:0 0 .5em}
.sec-lead{color:var(--text);font-size:.94rem;max-width:56ch;margin:0}
.sec-head.center .sec-lead{margin-inline:auto}
.sec-head--split{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;max-width:none}

/* feature strip */
.feat-strip{background:#0e1012;border-top:1px solid rgba(255,255,255,.07)}
.feat-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
}
.feat-item{
  padding:30px 26px;border-inline-start:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;gap:4px;
}
.feat-item:first-child{border-inline-start:0}
.feat-item b{
  font-family:var(--fh);font-size:1.6rem;font-weight:600;color:#fff;letter-spacing:.01em;
}
.feat-item b i{font-style:normal;color:var(--gold-3);font-size:1.1rem}
.feat-item span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#8d949e}

/* category cards */
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.cat-card{
  position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:330px;
  background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  transition:box-shadow var(--tr),border-color var(--tr),transform var(--tr);
}
.cat-card:hover{border-color:rgba(195,155,74,.55);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.cat-card .cc-media{background:var(--cream);display:grid;place-items:center;padding:18px;overflow:hidden}
.cat-card .cc-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.3,1)}
.cat-card:hover .cc-media img{transform:scale(1.05)}
.cat-card .cc-body{padding:36px 32px;display:flex;flex-direction:column;justify-content:center}
.cat-card h3{font-size:1.42rem;margin-bottom:.35em}
.cat-card .cc-count{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);margin-bottom:1.1em;
}
.cat-card p{font-size:.94rem;margin-bottom:1.4em}
.cat-card .cc-link{
  margin-top:auto;display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--fh);font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);
}
.cat-card .cc-link .i{transition:transform var(--tr)}
.cat-card:hover .cc-link .i{transform:translateX(5px)}

/* product grid */
.prod-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 24px;
}
.prod-card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:5px;
  overflow:hidden;transition:box-shadow var(--tr),border-color var(--tr),transform var(--tr);
  display:flex;flex-direction:column;
}
.prod-card:hover{border-color:rgba(195,155,74,.5);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.prod-media{
  position:relative;display:block;aspect-ratio:1/1;background:#fff;overflow:hidden;
  border-bottom:1px solid var(--line-2);
}
.prod-media img{width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.6,.3,1)}
.prod-card:hover .prod-media img{transform:scale(1.05)}
.prod-code{
  position:absolute;top:12px;inset-inline-start:12px;z-index:2;
  background:rgba(17,19,21,.82);color:#fff;font-family:var(--fh);font-size:.66rem;
  letter-spacing:.14em;padding:5px 9px;border-radius:2px;backdrop-filter:blur(4px);
}
.prod-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1 1 auto}
.yp-site h3.prod-name{font-size:.98rem;font-weight:500;color:var(--ink);margin:0;line-height:1.34;letter-spacing:0}
.prod-name a{color:inherit}
.prod-cat{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.prod-more{
  margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--fh);font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-2);
}
.prod-more .i{transition:transform var(--tr)}
.prod-card:hover .prod-more .i{transform:translateX(4px)}

/* process */
.proc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.proc-item{background:#fff;border:1px solid var(--line);border-radius:5px;overflow:hidden}
.proc-item .pi-photo{aspect-ratio:4/3;overflow:hidden;background:#eee}
.proc-item .pi-photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.proc-item:hover .pi-photo img{transform:scale(1.04)}
.proc-item .pi-body{padding:20px 22px 24px;position:relative}
.proc-num{
  font-family:var(--fh);font-size:.72rem;font-weight:600;letter-spacing:.2em;
  color:var(--gold-2);display:block;margin-bottom:.5em;
}
.proc-item h4{font-size:1.02rem;margin:0 0 .4em;color:var(--ink);font-family:var(--fh);font-weight:500}
.proc-item p{font-size:.88rem;margin:0;color:var(--text)}

/* compliance */
.cert-row{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:32px}
.cert-badge{
  border:1px solid rgba(255,255,255,.14);border-radius:4px;padding:14px 10px;text-align:center;
  background:rgba(255,255,255,.02);transition:all var(--tr);
}
.cert-badge:hover{border-color:rgba(195,155,74,.6);background:rgba(195,155,74,.08)}
.cert-badge b{
  display:block;font-family:var(--fh);font-size:.9rem;color:#fff;letter-spacing:.05em;margin-bottom:2px;
}
.cert-badge span{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:#8d949e}
.comp-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.comp-list{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.comp-list li{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:#b6bdc6}
.comp-list .i{color:var(--gold-3);margin-top:.32em;font-size:1.05em}
.comp-media{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.comp-media img{width:100%;height:100%;object-fit:cover;border-radius:4px;aspect-ratio:1/1;border:1px solid rgba(255,255,255,.1)}

/* factory strip */
.fac-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fac-item{position:relative;overflow:hidden;border-radius:5px;aspect-ratio:3/2}
.fac-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.fac-item:hover img{transform:scale(1.05)}
.fac-item figcaption{
  position:absolute;inset-inline:0;bottom:0;padding:34px 18px 14px;color:#fff;font-size:.76rem;
  letter-spacing:.1em;text-transform:uppercase;
  background:linear-gradient(0deg,rgba(0,0,0,.72),transparent);
}

/* world-factory vision */
.vision-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.vision-copy .sec-title{margin-bottom:.6em}
.vision-copy .sec-lead{color:var(--text);margin:0 0 1.4em}
.vision-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.vision-list li{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:var(--text)}
.vision-list .i{color:var(--gold-2);margin-top:.32em;font-size:1.05em}
.vision-media{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px}
.vision-media img{width:100%;height:100%;object-fit:cover;border-radius:5px;aspect-ratio:1/1;border:1px solid rgba(0,0,0,.06)}
.vision-media img:first-child{grid-row:1/3;aspect-ratio:auto}

/* cta band */
.cta-band{
  position:relative;background:linear-gradient(100deg,#15181b,#232629 55%,#2a2418);color:#fff;
  padding:74px 0;overflow:hidden;
}
.cta-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 300px at 84% 30%,rgba(195,155,74,.28),transparent 70%);
}
.cta-inner{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:40px;flex-wrap:wrap;
}
.cta-inner h2{color:#fff;margin:0 0 .25em;font-size:clamp(1.5rem,2.6vw,2.15rem)}
.cta-inner p{margin:0;color:#a6adb6;max-width:52ch}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- 7. Breadcrumb / product listing ---------- */
.crumb-band{background:var(--cream);border-bottom:1px solid var(--line-2)}
.mod-breadcrumbs{padding:16px 0}
.mod-breadcrumbs ol.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none;
  font-size:.78rem;letter-spacing:.04em;color:var(--muted);
}
.mod-breadcrumbs li{margin:0;display:flex;align-items:center;gap:8px}
.mod-breadcrumbs li+li::before{content:"/";color:#c9c2b4}
.mod-breadcrumbs a{color:var(--muted)}
.mod-breadcrumbs a:hover{color:var(--gold-2)}
.mod-breadcrumbs .divider{display:none}

.page-head{padding:44px 0 32px;background:var(--cream);border-bottom:0}
.page-head .eyebrow{margin-bottom:.9em}
.page-head h1{margin:0 0 .35em}
.page-head .ph-lead{max-width:68ch;color:var(--text);margin:0}
.page-head .ph-meta{
  margin-top:22px;display:flex;gap:26px;flex-wrap:wrap;font-size:.76rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.page-head .ph-meta b{color:var(--ink);font-weight:600}

.blog-wrap{padding:28px 0 72px}
.blog-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-bottom:24px;padding-bottom:0;border-bottom:0;
}
.blog-count{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.blog-count b{color:var(--ink)}
.cat-switch{display:flex;gap:8px;flex-wrap:wrap}
.cat-switch a{
  padding:9px 16px;border:1px solid var(--line);border-radius:2px;font-family:var(--fh);
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#4b5058;background:#fff;
}
.cat-switch a:hover{border-color:var(--gold);color:var(--gold-2)}
.cat-switch a.is-on{background:var(--ink);border-color:var(--ink);color:#fff}

/* pager */
.pg{margin-top:56px;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}
.pg-btn,.pg-num{
  display:grid;place-items:center;min-width:44px;height:44px;padding:0 12px;
  border:1px solid var(--line);border-radius:2px;background:#fff;color:var(--ink);
  font-size:.84rem;line-height:1;transition:border-color var(--tr),color var(--tr),background var(--tr);
}
.pg-btn svg{display:block}
.pg-btn:hover,.pg-num:hover{border-color:var(--gold);color:var(--gold-2)}
.pg-num.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.pg-btn.is-off{opacity:.32;pointer-events:none}
.pg-gap{display:grid;place-items:center;width:20px;height:44px;color:var(--muted);font-size:.9rem}
/* fallback for other components that still print the default Joomla pager */
.pagination{margin-top:56px;display:flex;justify-content:center}
.pagination .pagination{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.pagination .page-link{
  display:grid;place-items:center;min-width:44px;height:44px;padding:0 12px;
  border:1px solid var(--line);border-radius:2px;background:#fff;color:var(--ink);font-size:.84rem;
}
.pagination .page-item.active .page-link{background:var(--ink);border-color:var(--ink);color:#fff}
.pagination .page-item.disabled .page-link{opacity:.32}

/* ---------- 8. Product detail ---------- */
.pdp{padding:40px 0 84px}
.pdp-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:start}
.gal{position:sticky;top:110px}
.gal-main{
  position:relative;background:var(--cream);border:1px solid var(--line);border-radius:6px;
  overflow:hidden;aspect-ratio:1/1;display:grid;place-items:center;
}
.gal-main img{width:100%;height:100%;object-fit:contain;background:#fff}
.gal-count{
  position:absolute;bottom:14px;inset-inline-end:14px;background:rgba(17,19,21,.78);color:#fff;
  font-size:.72rem;letter-spacing:.1em;padding:5px 10px;border-radius:2px;
}
.gal-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.gal-thumb{
  width:76px;height:76px;padding:0;border:1px solid var(--line);border-radius:3px;background:#fff;
  cursor:pointer;overflow:hidden;transition:border-color var(--tr),transform var(--tr);
}
.gal-thumb img{width:100%;height:100%;object-fit:cover}
.gal-thumb:hover{border-color:var(--gold-3)}
.gal-thumb.is-active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.gal-nav{
  position:absolute;top:50%;z-index:3;width:40px;height:40px;margin-top:-20px;
  display:grid;place-items:center;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.94);
  color:var(--ink);box-shadow:0 6px 18px -10px rgba(0,0,0,.45);opacity:.88;
  transition:background var(--tr),border-color var(--tr),color var(--tr),opacity var(--tr);
}
.gal-prev{inset-inline-start:14px}
.gal-next{inset-inline-end:14px}
.gal-nav:hover{background:#fff;border-color:var(--gold);color:var(--gold-2)}
.gal-nav svg{display:block}
.gal-main:hover .gal-nav,.gal-nav:focus-visible{opacity:1}
/* zoom overlay close button */
.gal-close{
  position:fixed;top:22px;inset-inline-end:22px;z-index:2;width:46px;height:46px;
  display:grid;place-items:center;padding:0;cursor:pointer;
  border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(255,255,255,.1);
  color:#fff;backdrop-filter:blur(4px);
  transition:background var(--tr),border-color var(--tr);
}
.gal-close:hover{background:rgba(255,255,255,.22);border-color:#fff}
.gal-close svg{display:block}
.pdp-info .pdp-cat{
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2);margin-bottom:14px;
}
.pdp-info h1{font-size:clamp(1.6rem,2.6vw,2.25rem);margin:0 0 .5em;line-height:1.16}
.pdp-code{
  display:inline-flex;align-items:center;gap:.5em;background:var(--cream-2);border:1px solid var(--line);
  border-radius:2px;padding:6px 12px;font-family:var(--fh);font-size:.76rem;letter-spacing:.14em;
  color:#3a3d42;margin-bottom:20px;
}
.pdp-intro{font-size:1rem;color:var(--text);margin-bottom:26px;max-width:44ch}
/* company capability copy that replaces the per-product summary */
.pdp-points{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:4px;max-width:56ch}
.pdp-points li{position:relative;padding-inline-start:17px;font-size:.93rem;line-height:1.44;color:var(--text)}
.pdp-points li::before{
  content:"";position:absolute;inset-inline-start:0;top:.55em;width:5px;height:5px;border-radius:50%;
  background:var(--gold);
}
/* gallery thumbs now sit in the info column: 8 per row, wrapping */
.pdp-info .gal-thumbs{
  display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin-top:34px;
}
.pdp-info .gal-thumb{width:auto;height:auto;aspect-ratio:1/1}
.spec-table{width:100%;border-collapse:collapse;margin:0 0 28px;font-size:.9rem}
.spec-table th,.spec-table td{
  text-align:start;padding:11px 0;border-bottom:1px solid var(--line-2);vertical-align:top;
}
.spec-table th{
  width:38%;font-weight:500;color:var(--muted);font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;
}
.spec-table td{color:var(--ink)}
.pdp-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.pdp-assure{
  display:flex;gap:26px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line-2);
}
.pdp-assure div{display:flex;align-items:center;gap:9px;font-size:.82rem;color:var(--text)}
.pdp-assure .i{color:var(--gold);font-size:1.15em}

.pdp-body{margin-top:64px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start}
.rich{font-size:.98rem;color:var(--text)}
.rich h2{font-size:1.35rem;margin:2.2em 0 .7em}
.rich h3{font-size:1.1rem;margin:1.8em 0 .6em}
.rich > *:first-child{margin-top:0}
.rich ul{padding-inline-start:1.1em}
.rich ul li::marker{color:var(--gold)}
.rich table{width:100%;border-collapse:collapse;margin:1.4em 0 2em;font-size:.9rem}
.rich table th,.rich table td{padding:11px 14px;border:1px solid var(--line);text-align:start}
.rich table th{background:var(--cream);font-weight:600;color:var(--ink);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.rich blockquote{
  margin:1.8em 0;padding:18px 24px;border-inline-start:2px solid var(--gold);
  background:var(--cream);color:var(--ink);font-size:.96rem;
}

.pdp-side{position:sticky;top:110px;display:grid;gap:16px}
.side-card{border:1px solid var(--line);border-radius:5px;padding:24px;background:#fff}
.side-card h4{
  font-family:var(--fh);font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;
  margin:0 0 1em;color:var(--ink);
}
.side-card p{font-size:.88rem;margin:0 0 1em}
.side-card .btn{width:100%}
.lt-item{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line)}
.lt-item:last-child{border-bottom:0}
.lt-item span{font-size:.82rem;color:var(--text)}
.lt-item b{font-family:var(--fh);color:var(--gold-2);font-size:.95rem;letter-spacing:.02em}

.pdp-strip{margin-top:64px;padding-top:52px;border-top:1px solid var(--line-2)}
.pdp-strip h2{font-size:1.5rem;margin-bottom:.4em}
.pdp-strip .lead{max-width:70ch;margin-bottom:32px}
.pdp-fac{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px}
.pdp-fac figure{margin:0;border-radius:5px;overflow:hidden;border:1px solid var(--line)}
.pdp-fac img{width:100%;aspect-ratio:3/2;object-fit:cover}
.pdp-fac figcaption{
  padding:10px 14px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  background:#fff;
}
.lt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:34px}
.lt-card{border:1px solid var(--line);border-radius:5px;padding:24px;background:var(--cream)}
.lt-card b{display:block;font-family:var(--fh);font-size:1.7rem;color:var(--ink);line-height:1.1}
.lt-card span{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);margin-bottom:8px}
.lt-card p{font-size:.84rem;margin:8px 0 0;color:var(--text)}

.article-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:52px;padding-top:36px;
  border-top:1px solid var(--line-2);
}
.article-nav a{
  display:flex;flex-direction:column;gap:4px;padding:18px 22px;border:1px solid var(--line);
  border-radius:4px;background:#fff;transition:all var(--tr);
}
.article-nav a:hover{border-color:var(--gold);background:var(--cream)}
.article-nav span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.article-nav b{font-family:var(--fh);font-weight:500;font-size:.98rem;color:var(--ink);letter-spacing:.02em}
.article-nav .next{text-align:end;align-items:flex-end}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:56px 0 88px}
.contact-card{border:1px solid var(--line);border-radius:6px;padding:38px;background:#fff}
.contact-info{display:grid;gap:22px}
.ci-item{display:flex;gap:14px;align-items:flex-start}
.ci-item .i{font-size:1.15rem;color:var(--gold);margin-top:.2em}
.ci-item b{display:block;font-family:var(--fh);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.ci-item a,.ci-item span{color:var(--ink);font-size:.98rem}
.form-grid{display:grid;gap:16px}
.form-grid label{display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.form-grid input,.form-grid textarea,.form-grid select{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:3px;background:#fff;
  font-family:inherit;font-size:.94rem;color:var(--ink);
}
.form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus{
  outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(195,155,74,.14);
}
.contact-site .form-grid{grid-template-columns:1fr 1fr}
.contact-site .form-grid .full{grid-column:1/-1}

/* generic content pages (about) */
.about-hero{padding:64px 0 0}
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.about-media{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.about-media img{width:100%;border-radius:5px;object-fit:cover;aspect-ratio:3/2}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden;margin:52px 0}
.stat-grid div{background:#fff;padding:28px 24px}
.stat-grid b{display:block;font-family:var(--fh);font-size:1.9rem;color:var(--ink);line-height:1.1}
.stat-grid span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.timeline{list-style:none;padding:0;margin:0;display:grid;gap:0}
.timeline li{
  position:relative;padding:0 0 30px 30px;border-inline-start:1px solid var(--line);
}
.timeline li::before{
  content:"";position:absolute;inset-inline-start:-5px;top:6px;width:9px;height:9px;
  border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px #fff;
}
.timeline b{display:block;font-family:var(--fh);letter-spacing:.1em;color:var(--gold-2);font-size:.84rem;margin-bottom:2px}
.timeline h4{margin:0 0 .2em;font-size:1rem}

/* ---------- 9. Footer ---------- */
.ftr{background:#0d0f11;color:#9aa1aa;padding:66px 0 0;font-size:.9rem}
.ftr-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:44px;padding-bottom:52px}
.brand-dark .brand-txt strong{color:#fff}
.ftr-blurb{margin:20px 0 14px;font-size:.88rem;line-height:1.8;color:#8d949e;max-width:38ch}
.ftr-mail a{color:var(--gold-3);font-size:.95rem;letter-spacing:.02em}
.ftr-col h4{
  font-family:var(--fh);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;
  margin:0 0 1.3em;
}
.ftr-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ftr-col li a{color:#9aa1aa;font-size:.88rem}
.ftr-col li a:hover{color:var(--gold-3)}
.ftr-col p{color:#9aa1aa;font-size:.88rem;margin:0 0 12px;display:flex;gap:9px;align-items:flex-start}
.ftr-col .i{color:var(--gold);margin-top:.25em}
.ftr-bot{border-top:1px solid rgba(255,255,255,.08);padding:20px 0}
.ftr-bot-in{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.78rem;color:#6f7680}
.ftr-bot-in p{margin:0;display:flex;align-items:center;gap:8px}

/* messages */
.alert{border:1px solid var(--line);border-radius:4px;padding:14px 18px;margin:0 0 20px;background:var(--cream);font-size:.92rem}
.alert-success{border-inline-start:3px solid #2e7d32}
.alert-warning{border-inline-start:3px solid var(--gold)}
.alert-error{border-inline-start:3px solid #b3261e}

/* reveal animation */
.rv{opacity:0;transform:translateY(18px)}
.rv.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.6,.3,1)}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .hero-slide.is-active{animation:none}
  .hero-ab .hb-bg{animation:none!important}
  .hb-dot.is-active i{animation:none;width:100%}
}



/* ---------- 12. Specificity guards (buttons on dark sections) ---------- */
.yp-site .btn,
.yp-site .btn:hover{color:var(--fg)}
.yp-site .btn-ghost{color:var(--ink)}
.yp-site .btn-ghost:hover{color:var(--gold-2)}
.yp-site .btn-light,
.yp-site .btn-light:hover{color:#fff}
.yp-site .cc-link{color:var(--ink)}
.yp-site .prod-more{color:var(--gold-2)}
.yp-site .topbar a{color:#c9cfd7}
.yp-site .topbar a:hover{color:var(--gold-3)}
.yp-site .ftr-col li a{color:#9aa1aa}
.yp-site .ftr-col li a:hover{color:var(--gold-3)}
.yp-site .ftr-mail a{color:var(--gold-3)}
.yp-site .ftr p a,.yp-site .ftr-col p a,.yp-site .ftr-col .mod-custom a{color:var(--gold-3)}
.yp-site .ftr p a:hover,.yp-site .ftr-col p a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.yp-site .crumb-band a{color:var(--muted)}
.yp-site .blog-count b,.yp-site .spec-table td{color:var(--ink)}
.yp-site .hero-chip b{color:#fff}
.yp-site .hero-meta b{color:#fff}
.yp-site .feat-item b{color:#fff}
.yp-site .cta-inner h2{color:#fff}

/* ---------- 10. Responsive ---------- */
@media (max-width:1180px){
  .hdr-in{gap:22px}
  .brand-txt strong{font-size:1.2rem}
  .nav ul.nav-menu > li > a{padding:14px 11px;font-size:.75rem}
  .prod-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cert-row{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:992px){
  .sec{padding:70px 0}
  .burger{display:flex;position:relative;z-index:220}
  /* backdrop-filter would make .hdr the containing block for the fixed drawer,
     which pins it inside the header bar — drop it on small screens */
  .hdr{backdrop-filter:none;background:#fff}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(360px,86vw);background:#fff;z-index:210;
    flex-direction:column;justify-content:flex-start;padding:96px 24px 24px;
    transform:translateX(102%);transition:transform .34s cubic-bezier(.2,.6,.3,1);
    box-shadow:-20px 0 60px -30px rgba(0,0,0,.4);overflow-y:auto;
  }
  .nav.is-open{transform:none}
  .nav ul.nav-menu{flex-direction:column;align-items:stretch;width:100%;gap:0}
  .nav ul.nav-menu > li{border-bottom:1px solid var(--line-2)}
  .nav ul.nav-menu > li > a{padding:16px 4px;font-size:.86rem}
  .nav ul.nav-menu > li > a::after{display:none}
  .hero-slide{flex-direction:column;gap:34px;padding:60px 0 70px}
  .hero-copy{max-width:none}
  .hero-visual{width:100%;justify-content:flex-start}
  .hero-card,.hero-photo{max-width:420px}
  .feat-grid{grid-template-columns:repeat(3,1fr)}
  .feat-item{padding:24px 20px}
  .feat-item:nth-child(4){border-inline-start:0}
  .cat-grid{grid-template-columns:1fr}
  .cat-card{grid-template-columns:42% 58%}
  .comp-grid,.about-grid,.pdp-top,.pdp-body,.contact-grid,.vision-grid{grid-template-columns:1fr;gap:34px}
  /* The thumbs live in the info column, which on a phone puts them below the
     whole description — hundreds of pixels away from the image they control.
     Let the info column dissolve so its children can be re-ordered, and park
     the strip directly under the main image as one swipeable row. */
  .pdp-top{display:flex;flex-direction:column;gap:0}
  .pdp-top > .gal{order:0}
  .pdp-info{display:contents}
  .pdp-info > *{order:2}
  .pdp-info > .gal-thumbs{
    order:1;
    display:flex;flex-wrap:nowrap;
    grid-template-columns:none;
    gap:8px;margin-top:12px;padding-bottom:2px;
    width:100%;max-width:100%;min-width:0;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .pdp-info > .gal-thumbs::-webkit-scrollbar{display:none}
  .pdp-info > .gal-thumbs > .gal-thumb{
    flex:0 0 62px;width:62px;height:62px;aspect-ratio:auto;
    scroll-snap-align:start;
  }
  .pdp-info > .gal-thumbs > .gal-thumb img{width:100%;height:100%;object-fit:cover}
  .pdp-info > h1{margin-top:26px}
  .gal,.pdp-side{position:static}
  .proc-grid{grid-template-columns:repeat(2,1fr)}
  .ftr-top{grid-template-columns:1fr 1fr;gap:34px}
  .hero-nav{display:none}
}
@media (max-width:720px){
  .wrap{padding-inline:18px}
  body.yp-site{font-size:15.4px}
  .topbar-in{min-height:34px;gap:10px}
  .tb-hide-sm{display:none}
  .topbar-r .tb-item{display:none}
  .topbar-r{gap:8px}
  .topbar-l .tb-item{font-size:.72rem;max-width:56vw;overflow:hidden;text-overflow:ellipsis}
  .hdr-in{min-height:68px;gap:12px}
  .brand-mark{height:36px}
  .brand-txt strong{font-size:1.06rem}
  .brand-txt em{font-size:.5rem;letter-spacing:.28em}
  .hdr-act{display:none}
  .hero{min-height:0}
  .hero-meta{gap:22px}
  .hero-meta b{font-size:1.25rem}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .feat-item:nth-child(odd){border-inline-start:0}
  .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .prod-body{padding:14px 14px 16px}
  .prod-name{font-size:.9rem}
  .pg{margin-top:36px;gap:6px}
  .pg-btn,.pg-num{min-width:38px;height:38px;padding:0 9px;font-size:.78rem}
  .pg-gap{height:38px;width:14px}
  .cat-card{grid-template-columns:1fr}
  .cat-card .cc-media{aspect-ratio:16/10}
  .proc-grid,.fac-strip,.pdp-fac,.lt-grid,.cert-row,.about-media{grid-template-columns:1fr 1fr}
  .fac-strip{grid-template-columns:1fr}
  .vision-media{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;align-items:stretch}
  .vision-media img:first-child{grid-row:auto;grid-column:1/3;aspect-ratio:16/10}
  .vision-media img{aspect-ratio:1/1}
  .stat-grid{grid-template-columns:1fr 1fr}
  .ftr-top{grid-template-columns:1fr}
  .article-nav{grid-template-columns:1fr}
  .article-nav .next{text-align:start;align-items:flex-start}
  .contact-site .form-grid{grid-template-columns:1fr}
  .sec-head--split{flex-direction:column;align-items:flex-start;gap:18px}
  .gal-thumbs{gap:8px}
  .gal-thumb{width:62px;height:62px}
  .pdp-points li{font-size:.92rem}
  .cta-inner{gap:24px}
}
@media (max-width:440px){
  /* two product columns stay until the very small screens: a grid of one is unusable for browsing */
  .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .prod-body{padding:11px 11px 13px}
  .prod-name{font-size:.82rem}
  .prod-cat{font-size:.6rem;letter-spacing:.1em}
  .prod-more{font-size:.66rem}
  .prod-code{font-size:.6rem;padding:3px 6px}
  .proc-grid,.fac-strip,.pdp-fac,.lt-grid,.cert-row,.about-media,.stat-grid{grid-template-columns:1fr}
}
@media (max-width:340px){
  .prod-grid{grid-template-columns:1fr}
}

/* ---------- 20. Production capability (product detail) ---------- */
.pdp-desc{margin-top:26px}
.cap{margin-top:36px;padding-top:0;border-top:0}
.cap-head h2{font-size:1.46rem;margin:.3em 0 .55em;max-width:24ch}
.cap-head .lead{max-width:72ch;margin:0 0 30px;font-size:.96rem}
.cap-stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:5px;overflow:hidden;margin:0 0 26px;
}
.cap-stats div{background:#fff;padding:24px 26px}
.cap-stats b{display:block;font-family:var(--fh);font-size:1.95rem;line-height:1;color:var(--ink)}
.cap-stats span{display:block;margin-top:9px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.cap-mosaic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:0 0 44px}
.cap-mosaic figure{margin:0;border-radius:4px;overflow:hidden;background:var(--cream);border:1px solid var(--line)}
.cap-mosaic img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover}
.cap-mosaic .m1,.cap-mosaic .m2{grid-column:span 3}
.cap-mosaic .m3,.cap-mosaic .m4,.cap-mosaic .m5{grid-column:span 2}
.cap-block + .cap-block{margin-top:46px}
.cap-block h3{font-size:1.1rem;margin:0 0 20px;display:flex;align-items:center;gap:12px}
.cap-block h3::before{content:"";display:block;width:24px;height:1px;background:var(--gold)}
.cap-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cap-grid figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.cap-grid img{width:100%;display:block;aspect-ratio:7/5;object-fit:cover}
.cap-grid figcaption{
  padding:11px 13px;font-size:.76rem;color:var(--ink);display:flex;align-items:baseline;gap:9px;line-height:1.3;
}
.cap-grid figcaption .n{font-family:var(--fh);font-size:.66rem;letter-spacing:.1em;color:var(--gold-2)}
@media (max-width:900px){
  .cap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .cap{margin-top:28px;padding-top:0}
  .cap-head h2{font-size:1.28rem}
  .cap-stats{grid-template-columns:1fr;margin-bottom:20px}
  .cap-stats div{padding:18px 20px}
  .cap-stats b{font-size:1.6rem}
  .cap-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:32px}
  .cap-mosaic .m1,.cap-mosaic .m2{grid-column:span 2}
  .cap-mosaic .m3,.cap-mosaic .m4{grid-column:span 1}
  .cap-mosaic .m5{grid-column:span 2}
  .cap-grid{gap:10px}
  .cap-grid figcaption{font-size:.7rem;padding:9px 10px}
}
@media (max-width:440px){
  .cap-mosaic .m3,.cap-mosaic .m4,.cap-mosaic .m5{grid-column:span 2}
}

/* ---------- 21. Home hero — 3-slide carousel (abstract artwork) ---------- */
.hero-ab{
  --hb-strip:176px;
  position:relative;overflow:hidden;background:#0b0d0e;color:#e9ecf0;
  display:block;min-height:0;
}
/* the theme paints its own grid pattern on every .hero — not wanted here */
.hero-ab::before,.hero-ab::after{display:none}
/* every slide sits in the same grid cell: the track is as tall as the tallest
   slide, so the cross-fade never shifts the page */
.hb-track{display:grid}
.hb-slide{
  grid-area:1/1;position:relative;display:flex;align-items:center;
  overflow:hidden;padding:0;gap:0;min-height:clamp(400px,33vw,470px);
  opacity:0;visibility:hidden;
  transition:opacity .85s ease,visibility .85s ease;
}
.hb-slide.is-active{opacity:1;visibility:visible;z-index:2}
.hb-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:72% 50%;
}
.hb-slide.is-active .hb-bg{animation:hbZoom 13s ease-out both}
@keyframes hbZoom{from{transform:scale(1.07)}to{transform:scale(1)}}
@keyframes hbZoomRtl{from{transform:scaleX(-1) scale(1.07)}to{transform:scaleX(-1) scale(1)}}
.hb-slide::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(720px 540px at 20% 52%,rgba(8,9,10,.60),rgba(8,9,10,0) 72%),
    linear-gradient(92deg,rgba(8,9,10,.94) 0%,rgba(8,9,10,.90) 34%,rgba(8,9,10,.76) 54%,rgba(8,9,10,.42) 76%,rgba(8,9,10,.10) 100%);
}
.hb-slide::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.38),transparent 30%,rgba(0,0,0,.66));
}
.hb-slide .hero-wrap{position:relative;z-index:2;width:100%}
.hero-ab-copy{max-width:700px;padding:clamp(38px,4.4vw,52px) 0 clamp(70px,5.6vw,82px)}
.hero-ab h1,.hero-ab .hero-h{
  color:#fff;font-size:clamp(1.92rem,3.8vw,3.1rem);font-weight:600;line-height:1.1;
  letter-spacing:-.01em;margin:0 0 .56em;
  /* keeps the gold gradient readable where a headline reaches the artwork */
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.55));
}
.hero-ab h1 .g,.hero-ab .hero-h .g{
  background:linear-gradient(100deg,#f0d79b,#c39b4a 46%,#8f6c22 78%,#e3c88f);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-ab .hero-lead{color:#cfd4db;font-size:1.02rem;line-height:1.7;max-width:47ch;margin:0 0 1.5em;text-shadow:0 1px 16px rgba(0,0,0,.6)}
.hero-tags{list-style:none;display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0}
.hero-tags li{
  margin:0;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-3);line-height:1.85;text-shadow:0 1px 12px rgba(0,0,0,.65);
}
.hero-tags li:not(:last-child)::after{content:"·";margin:0 .62em;color:rgba(230,201,140,.55)}

/* controls — dots + counter bottom-left, arrows bottom-right */
.hb-ui{position:absolute;inset-inline:0;bottom:0;z-index:6;pointer-events:none}
.hb-ui-in{display:flex;align-items:center;gap:18px;padding-bottom:24px;pointer-events:auto}
.hb-dots{display:flex;align-items:center;gap:9px}
.hb-dot{
  width:34px;height:3px;border:0;padding:0;border-radius:2px;cursor:pointer;overflow:hidden;
  position:relative;background:rgba(255,255,255,.26);
  transition:width .45s ease,background .3s ease;
}
.hb-dot i{position:absolute;inset:0;display:block;width:0;background:var(--gold);border-radius:2px}
.hb-dot:hover{background:rgba(255,255,255,.48)}
.hb-dot.is-active{width:62px;background:rgba(255,255,255,.20)}
.hb-dot.is-active i{animation:hbFill 6.5s linear forwards}
.hero-ab.is-paused .hb-dot.is-active i{animation-play-state:paused}
@keyframes hbFill{from{width:0}to{width:100%}}
.hb-count{
  display:flex;align-items:center;gap:6px;direction:ltr;unicode-bidi:isolate;
  font-size:.72rem;letter-spacing:.16em;color:rgba(255,255,255,.66);
  font-variant-numeric:tabular-nums;
}
.hb-count em{font-style:normal;color:rgba(255,255,255,.3)}
.hb-arrows{display:flex;gap:8px;margin-inline-start:auto}
.hb-arrow{
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  background:rgba(10,12,14,.62);color:#fff;cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:grid;place-items:center;transition:background .3s,border-color .3s,color .3s,transform .3s;
}
.hb-arrow:hover{background:var(--gold);border-color:var(--gold);color:#1b1405}
.hb-arrow:active{transform:scale(.94)}
.hb-arrow svg{display:block}

@media (max-width:992px){
  .hb-bg{object-position:64% 50%}
  .hb-slide::before{background:linear-gradient(100deg,rgba(8,9,10,.95) 0%,rgba(8,9,10,.93) 48%,rgba(8,9,10,.88) 68%,rgba(8,9,10,.66) 88%,rgba(8,9,10,.34) 100%)}
  .hero-ab h1,.hero-ab .hero-h{font-size:clamp(1.85rem,4.4vw,2.6rem)}
}
@media (max-width:720px){
  /* phones: artwork becomes a strip above the copy instead of a dimmed backdrop */
  .hb-slide{display:block;min-height:0}
  .hb-bg{position:relative;inset:auto;width:100%;height:var(--hb-strip,176px);object-position:62% 48%}
  .hb-slide.is-active .hb-bg{animation:none}
  .hb-slide::before,.hb-slide::after{display:none}
  .hero-ab-copy{padding:26px 0 34px;max-width:none}
  .hero-ab .hero-lead{font-size:.97rem}
  .hero-tags li{font-size:.64rem}
  /* phones: controls float on the artwork strip so the slider is discoverable
     without scrolling to the bottom of a full-height banner */
  .hb-ui{position:absolute;inset-inline:0;bottom:auto;top:var(--hb-strip,176px);transform:translateY(-100%)}
  .hb-ui::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55));
  }
  .hb-ui-in{padding:0 0 14px;margin-top:0;border-top:0;position:relative}
  .hb-arrow{width:34px;height:34px}
}
@media (max-width:440px){
  .hb-arrow{width:38px;height:38px}
  .hb-count{font-size:.68rem}
}

/* RTL */
[dir="rtl"] .i-arrow,
[dir="rtl"] .btn .i-arrow{transform:rotate(180deg)}
[dir="rtl"] .pg-btn svg{transform:scaleX(-1)}
/* the capability copy is English: keep it LTR with the bullet on the left, even on the Arabic site */
[dir="rtl"] .pdp-points{direction:ltr;text-align:left}
/* product copy is English too, and the image counter reads "n / total" */
[dir="rtl"] .pdp-desc{direction:ltr;text-align:left}
[dir="rtl"] .gal-count{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .hero-chip{inset-inline-start:auto;inset-inline-end:-26px}
[dir="rtl"] .eyebrow::before{order:2}
[dir="rtl"] body{letter-spacing:0}
[dir="rtl"]{--ff:"Noto Sans Arabic","Inter","Segoe UI",Arial,sans-serif;--fh:"Noto Sans Arabic","Jost","Inter","Segoe UI",Arial,sans-serif}
[dir="rtl"] .hero-ab .hb-slide::before{transform:scaleX(-1)}
[dir="rtl"] .hero-ab .hb-bg{transform:scaleX(-1);animation-name:hbZoomRtl}
[dir="rtl"] .hero-ab .hb-arrow svg{transform:scaleX(-1)}
[dir="rtl"] .hero-ab .hero-h{line-height:1.35}
/* the banner copy is English on every language: keep it LTR so punctuation reads
   correctly, but align it to the right edge where the mirrored artwork is dark */
[dir="rtl"] .hero-ab-copy{direction:ltr;text-align:right}
[dir="rtl"] .hero-ab .hero-tags{justify-content:flex-end}
[dir="rtl"] .hero-ab .eyebrow::before{order:0}
[dir="rtl"] .hero-ab h1,[dir="rtl"] .hero h1,[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{line-height:1.35}
/* English copy inside the RTL layout keeps its own direction, so punctuation sits where it belongs */
[dir="rtl"] .hero-copy :is(h1,p,span),[dir="rtl"] .sec-head :is(h2,p,span),[dir="rtl"] .cat-card :is(h3,p,span),[dir="rtl"] .proc-item :is(h3,p,span),[dir="rtl"] .compact-item :is(h3,p,span),[dir="rtl"] .page-body :is(p,li,td,th){unicode-bidi:plaintext}
[dir="rtl"] .vision-copy :is(h2,p,span,li){direction:ltr;text-align:left}
[dir="rtl"] .vision-list li{justify-content:flex-start}
[dir="rtl"] .comp-grid :is(h2,p,span,li){direction:ltr;text-align:left}
[dir="rtl"] .comp-list li{justify-content:flex-start}
[dir="rtl"] .comp-list .i{margin-inline:0}

/* ---------- 11. Generic pages ---------- */
.sec--head{padding-bottom:0}
.sec--grid{padding-top:34px}
.page-wrap{padding:52px 0 88px}
.page-body{max-width:1000px}
.page-body > p,
.page-body > ul,
.page-body > ol{max-width:76ch}
.page-body > *:first-child{margin-top:0}
.page-body h2{margin-top:1.9em}
.about-grid-list{list-style:none;padding:0}
.contact-page{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:34px 0 10px}
.contact-card{border:1px solid var(--line);border-radius:6px;padding:30px 32px;background:#fff}
.contact-card h3{font-size:1.08rem;margin:0 0 1.2em;letter-spacing:.01em}
.ci-list{display:grid;gap:16px}
.ci-item{display:flex;gap:12px;align-items:flex-start}
.ci-item .i{color:var(--gold);font-size:1.15rem;margin-top:.15em}
.ci-item b{display:block;font-family:var(--fh);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:2px;font-weight:500}
.ci-item a,.ci-item span{color:var(--ink);font-size:.96rem;line-height:1.5}
.check-list{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.check-list li{display:flex;gap:11px;align-items:flex-start;font-size:.94rem;margin:0}
.check-list .i{color:var(--gold);margin-top:.28em;flex:0 0 auto}
.about-media{margin:30px 0 8px}
.about-media img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:5px}
@media (max-width:720px){
  .contact-page{grid-template-columns:1fr}
  .page-wrap{padding:36px 0 64px}
}

/* ---------- 13. Enquiry form ---------- */
.quote-form{
  margin:52px 0 8px;padding:38px 40px 40px;border:1px solid var(--line);
  border-radius:8px;background:var(--cream-2);position:relative;
}
.quote-form .qf-head{margin-bottom:26px}
.quote-form .qf-head h2{margin:0 0 .4em;font-size:1.5rem}
.quote-form .qf-head p{margin:0;color:var(--text);font-size:.95rem;max-width:64ch}
.qf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.qf-field{display:flex;flex-direction:column;gap:7px;font-family:var(--ff)}
.qf-field > span{
  font-family:var(--fh);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);font-weight:500;
}
.qf-field input,.qf-field textarea,.qf-field select{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;color:var(--ink);font:inherit;font-size:.94rem;line-height:1.45;
  transition:border-color var(--tr),box-shadow var(--tr);
}
.qf-field textarea{resize:vertical;min-height:120px}
.qf-field input:focus,.qf-field textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(195,155,74,.16);
}
.qf-field input::placeholder,.qf-field textarea::placeholder{color:#b6bac0}
.qf-full{grid-column:1 / -1}
.qf-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:24px}
.qf-note{color:var(--muted);font-size:.82rem;margin:0;max-width:46ch}
.qf-hp{position:absolute !important;left:-9999px;width:1px;height:1px;opacity:0}
.qf-status{margin-top:18px;font-size:.92rem;line-height:1.55;display:none}
.qf-status.on{display:block}
.qf-status.ok{color:#1f7a45}
.qf-status.err{color:#b3261e}
.quote-form.is-sent .qf-grid,.quote-form.is-sent .qf-actions{opacity:.45;pointer-events:none}
@media (max-width:720px){
  .quote-form{padding:26px 22px 28px}
  .qf-grid{grid-template-columns:1fr}
}

/* ---------- 18. Page banner (full-width strip straight under the site header) ---------- */
.page-banner{
  position:relative;
  aspect-ratio:1920 / 200;
  background-color:var(--ink);
  background-image:var(--ph-banner);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
/* The artwork already carries the headline, so the text head only stays in the
   markup for search engines and screen readers — it is not painted. */
@media (min-width:721px){
  .has-page-banner .page-head{
    position:absolute;
    width:1px;height:1px;
    padding:0;margin:-1px;border:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    clip-path:inset(50%);
    white-space:nowrap;
  }
}
/* The desktop strip is 1920x195 — about 40px tall on a phone, far too small to
   read. Collection pages therefore reprint the artwork's own three lines as live
   text over the same dark metal panel, so phone and desktop say the same thing. */
.pb-copy{display:none}

@media (max-width:720px){
  /* pages whose artwork carries no copy keep the text head (About, Contact, articles) */
  .page-banner{display:none}

  .has-page-banner:not(.has-banner-copy) .page-head{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    padding:30px 0 28px;
    background:#0d0f11;
  }
  .has-page-banner:not(.has-banner-copy) .page-head::before{
    content:"";
    position:absolute;
    inset:-8%;
    z-index:-2;
    background-image:var(--ph-banner);
    background-position:22% center;
    background-size:cover;
    background-repeat:no-repeat;
    filter:blur(11px) saturate(1.25) brightness(.9);
    transform:scale(1.05);
  }
  .has-page-banner:not(.has-banner-copy) .page-head::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:
      radial-gradient(70% 62% at 76% 24%, rgba(195,155,74,.22) 0%, rgba(13,15,17,0) 66%),
      linear-gradient(180deg, rgba(11,13,15,.44) 0%, rgba(11,13,15,.82) 100%);
  }
  .has-page-banner:not(.has-banner-copy) .page-head .eyebrow{
    color:var(--gold-3);
    font-size:.62rem;
    letter-spacing:.24em;
    margin-bottom:.75em;
  }
  .has-page-banner:not(.has-banner-copy) .page-head h1{
    font-size:1.78rem;
    line-height:1.14;
    margin:0 0 .5em;
    letter-spacing:.01em;
    background:linear-gradient(180deg,#f7e6c0 0%,#e2c286 46%,#c09442 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
  .has-page-banner:not(.has-banner-copy) .page-head .ph-lead{
    color:#b4bbc4;
    font-size:.84rem;
    line-height:1.62;
    max-width:none;
    margin:0;
  }
  .has-page-banner:not(.has-banner-copy) .page-head .ph-meta{
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid rgba(195,155,74,.28);
    gap:10px 18px;
    font-size:.58rem;
    letter-spacing:.1em;
    color:#8e959f;
  }
  .has-page-banner:not(.has-banner-copy) .page-head .ph-meta b{color:var(--gold-3)}

  /* ---- collection banners: same words as the desktop artwork ---- */
  .has-banner-copy .page-banner{
    display:block;
    position:relative;
    overflow:hidden;
    isolation:isolate;
    aspect-ratio:auto;
    padding:34px 0 30px;
    background-color:#0d0f11;
    background-image:none;
  }
  .has-banner-copy .page-banner::before{
    content:"";
    position:absolute;
    inset:-8%;
    z-index:-2;
    background-image:var(--ph-banner);
    background-position:22% center;
    background-size:cover;
    background-repeat:no-repeat;
    filter:blur(11px) saturate(1.25) brightness(.9);
    transform:scale(1.05);
  }
  .has-banner-copy .page-banner::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:
      radial-gradient(72% 64% at 74% 22%, rgba(195,155,74,.24) 0%, rgba(13,15,17,0) 66%),
      linear-gradient(180deg, rgba(11,13,15,.46) 0%, rgba(11,13,15,.84) 100%);
  }
  .has-banner-copy .pb-copy{
    display:block;
    position:relative;
    z-index:1;
    width:100%;
    max-width:var(--wrap);
    margin-inline:auto;
    padding-inline:26px;
  }
  .has-banner-copy .pb-title{
    margin:0;
    font-family:var(--fh);
    /* keeps a long title such as HARDWARE ACCESSORIES on one line on a phone */
    font-size:clamp(1.32rem,6vw,1.72rem);
    font-weight:600;
    line-height:1.1;
    letter-spacing:.015em;
    background:linear-gradient(180deg,#f7e6c0 0%,#e2c286 46%,#c09442 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
  .has-banner-copy .pb-sub{
    margin:.55em 0 0;
    font-size:.92rem;
    line-height:1.45;
    color:#d7dce2;
    letter-spacing:.01em;
  }
  .has-banner-copy .pb-tag{
    margin:.75em 0 0;
    padding-top:.7em;
    border-top:1px solid rgba(195,155,74,.3);
    font-size:.66rem;
    line-height:1.6;
    letter-spacing:.08em;
    color:#c2a469;
  }

  /* the strip already prints these words, so do not paint the CMS head twice */
  .has-banner-copy .page-head{
    position:absolute;
    width:1px;height:1px;
    padding:0;margin:-1px;border:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    clip-path:inset(50%);
    white-space:nowrap;
  }
}

/* ---------- 19. Brand lock-up (mark + wordmark in one artwork) ---------- */
.brand-logo{display:block;width:auto;height:46px}
.brand-dark .brand-logo{height:56px}
@media (max-width:900px){
  .brand-logo{height:40px}
  .brand-dark .brand-logo{height:50px}
}
@media (max-width:720px){
  .brand-logo{height:34px}
  .brand-dark .brand-logo{height:46px}
}
/* Header without the CTA button: keep the menu flush with the right edge */
@media (min-width:1025px){
  .hdr .nav{justify-content:flex-end}
}
/* Burger sits at the far right even when the header CTA is switched off */
@media (max-width:992px){
  .hdr-in .burger{margin-left:auto}
}