/* ============================================================
   ROLLEX — DESIGN SYSTEM  ("Bright Precision")
   White/light-gray foundation · Rollex red accent · minimal luxury
   Colour usage target ≈ 70% white · 20% light-gray · 8% red · 2% charcoal
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --ink:      #1A1A1A;   /* text primary / charcoal (2%) */
  --steel:    #333537;   /* secondary charcoal */
  --slate:    #5F6368;   /* text secondary / muted */
  --line:     #E5E7EB;   /* hairline borders */
  --mist:     #F5F5F7;   /* section background (light gray) */
  --paper:    #FFFFFF;   /* white (dominant) */
  --wash:     #FAFAFA;   /* light background */
  --accent:   #E31E24;   /* Rollex red — primary accent */
  --accent-2: #B51217;   /* dark red */
  --accent-soft: #FFF5F5;/* very light red accent wash */
  --cta:      #E31E24;   /* CTA = Rollex red */
  --cta-700:  #C1121F;   /* CTA hover — dark red */
  --text:     #1A1A1A;

  --r-sm: 12px;
  --r:    18px;
  --r-lg: 22px;
  --r-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(26,26,26,.05), 0 1px 3px rgba(26,26,26,.04);
  --shadow:    0 14px 40px -18px rgba(26,26,26,.16);
  --shadow-lg: 0 40px 80px -28px rgba(26,26,26,.22);
  --shadow-red: 0 16px 40px -14px rgba(227,30,36,.35);
  --glass:     rgba(255,255,255,.7);

  --ease: cubic-bezier(.22,1,.36,1);
  --nav-h: 80px;

  --wrap: 1320px;
  --gap: clamp(1rem, 4vw, 2rem);
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 {
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  font-weight: 600;
}
p { margin: 0 0 1rem; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gap); }
.wrap--wide { max-width: 1600px; }
.section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.section--mist { background: var(--mist); }
.section--wash { background: var(--wash); }
/* was dark 'ink' — now bright to satisfy no-dark-backgrounds direction */
.section--ink { background: var(--mist); color: var(--slate); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--ink); }
/* Red CTA section (contact banner) — the bold red moment */
.section--red { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: #fff; }
.section--red h1, .section--red h2, .section--red h3 { color: #fff; }

/* Eyebrow — encodes section role, ties to web-path motif */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: "Inter", sans-serif;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--accent);
  display: inline-block; border-radius: 2px;
}
.section--ink .eyebrow { color: var(--accent); }
.section--ink .eyebrow::before { background: var(--accent); }

.h-display { font-size: clamp(2.1rem, 5vw, 3.6rem); }
.h-section { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--slate); max-width: 60ch; }
.section--ink .lead { color: var(--slate); }

/* ---------- Buttons ---------- */
.btn {
  --_bg: var(--accent); --_fg: #fff;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .9rem 1.6rem; border-radius: 999px;
  font-weight: 600; font-size: .95rem; border: 1px solid transparent;
  background: var(--_bg); color: var(--_fg);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .25s, color .25s, border-color .25s;
  will-change: transform;
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-red); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* Primary CTA = Rollex red */
.btn--cta { --_bg: var(--cta); }
.btn--cta:hover { background: var(--cta-700); }
/* Secondary = white bg, red border+text → red bg white text on hover */
.btn--ghost { --_bg: var(--paper); --_fg: var(--accent); border-color: var(--accent); }
.btn--ghost:hover { background: var(--accent); color:#fff; border-color: var(--accent); box-shadow: var(--shadow-red); }
/* Neutral outline (charcoal) for low-emphasis */
.btn--line { --_bg: var(--paper); --_fg: var(--ink); border-color: var(--line); }
.btn--line:hover { border-color: var(--ink); box-shadow: var(--shadow); }
.btn--on-dark { --_bg: var(--paper); --_fg: var(--ink); border-color: var(--line); }
.btn--on-dark:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow); }
.btn--on-red { --_bg: rgba(255,255,255,.14); --_fg:#fff; border-color: rgba(255,255,255,.35); backdrop-filter: blur(8px); }
.btn--on-red:hover { background: #fff; color: var(--accent); }
.btn--white { --_bg:#fff; --_fg: var(--accent); }
.btn--white:hover { background: var(--accent-soft); }
.btn--sm { padding: .62rem 1.15rem; font-size: .85rem; }

/* ---------- Navbar ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 100;
  display: flex; align-items: center;
  transition: height .35s var(--ease), background .35s, box-shadow .35s, border-color .35s;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
}
.nav.scrolled { height: 62px; background: rgba(255,255,255,.9); box-shadow: var(--shadow-sm); border-bottom-color: var(--line); }
.nav__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gap);
  display: flex; align-items: center; gap: 1.5rem; }
.brand { display: flex; align-items: center; gap: .6rem; }
.brand__logo { height: 42px; width: auto; display:block; }

.nav__links { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.nav__link { padding: .55rem .85rem; border-radius: 999px; font-weight: 500; font-size: .95rem; color: var(--steel); transition: background .2s, color .2s; }
.nav__link:hover, .nav__link[aria-expanded="true"] { background: var(--mist); color: var(--ink); }
.nav__actions { display: flex; align-items: center; gap: .6rem; }
.nav__icon-btn { display:grid; place-items:center; width:40px; height:40px; border-radius:999px; background:var(--mist); border:1px solid var(--line); color:var(--steel); transition: background .2s, color .2s, transform .2s; }
.nav__icon-btn:hover { background: var(--ink); color:#fff; }
.nav__icon-btn svg { width:18px; height:18px; }

/* ---------- Mega menu (premium 3-column) ---------- */
.mega-trigger { display: inline-flex; align-items: center; gap: .3rem; }
.mega-trigger svg { width: 15px; height: 15px; transition: transform .3s; }
.nav__link[aria-expanded="true"] .mega-trigger svg { transform: rotate(180deg); }

.mega {
  position: fixed; left: 50%; top: calc(var(--nav-h) - 8px);
  transform: translate(-50%, 10px);
  width: min(1200px, calc(100vw - 2rem));
  background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  z-index: 99; overflow: hidden;
}
.nav.scrolled .mega { top: 58px; }
.mega.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.mega__grid { display: grid; grid-template-columns: 290px 1fr 320px; min-height: 400px; }

/* LEFT — categories */
.mega__cats { background: rgba(245,245,247,.6); padding: 1rem; border-right: 1px solid var(--line); overflow-y: auto; max-height: 72vh; }
.mega__cat {
  display: flex; align-items: center; gap: .75rem; width: 100%; position: relative;
  padding: .75rem .9rem; border-radius: var(--r-sm); border: none; background: transparent;
  text-align: left; color: var(--steel); font-size: .92rem; font-weight: 500;
  transition: background .18s, color .18s, transform .18s, padding-left .18s;
}
/* left border animation */
.mega__cat::before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:0; background:var(--accent); border-radius:3px; transition: height .25s var(--ease); }
.mega__cat svg { width: 15px; height: 15px; color: var(--slate); flex: none; opacity: 0; transition: opacity .2s, transform .2s, color .2s; }
.mega__cat:hover, .mega__cat.active { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); transform: translateX(4px); }
.mega__cat.active::before, .mega__cat:hover::before { height: 60%; }
.mega__cat.active svg, .mega__cat:hover svg { opacity: 1; transform: translateX(2px); color: var(--accent); }
.mega__cat-count { margin-left:auto; font-size:.7rem; font-weight:600; color:var(--slate); background:var(--mist); border:1px solid var(--line); border-radius:999px; padding:.1rem .5rem; }
.mega__cat.active .mega__cat-count, .mega__cat:hover .mega__cat-count { color:var(--accent); background:var(--accent-soft); border-color:rgba(227,30,36,.16); }

/* CENTER — products (no imagery: name + meta + Read More / Brochure) */
.mega__panel { padding: 1.6rem 1.8rem; overflow-y:auto; max-height:72vh; }
.mega__panel-head { display:flex; align-items:flex-end; justify-content: space-between; margin-bottom: .4rem; gap:1rem; }
.mega__panel-head h4 { font-size: 1.1rem; margin: 0; }
.mega__panel-head p { margin: .25rem 0 0; font-size: .82rem; color: var(--slate); }
.mega__products { display: flex; flex-direction: column; }
.mega__product {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem .25rem; border-bottom: 1px solid var(--line);
  animation: megaFade .35s var(--ease) both;
}
.mega__products .mega__product:last-child { border-bottom: none; }
@keyframes megaFade { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.mega__product-body { min-width: 0; flex: 1; display:block; padding: .2rem 0; }
.mega__product-body strong { display:block; font-size: .92rem; color: var(--ink); font-weight: 600; transition: color .2s; }
.mega__product-body span { display:block; font-size: .76rem; color: var(--slate); margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega__product-body:hover strong { color: var(--accent); }
.mega__product-actions { display:flex; align-items:center; gap:.5rem; flex:none; }
.mega__pbtn {
  display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap;
  font-size:.78rem; font-weight:600; padding:.45rem .85rem; border-radius:999px;
  border:1px solid transparent; color:var(--accent); background: var(--accent-soft);
  transition: background .2s, color .2s, border-color .2s;
}
.mega__pbtn:hover { background: var(--accent); color:#fff; }
.mega__pbtn svg { width:13px; height:13px; }
.mega__pbtn--outline { background: transparent; border-color: var(--line); color: var(--slate); }
.mega__pbtn--outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* RIGHT — featured machine (text-led, no product imagery) */
.mega__featured { padding: 1.4rem; border-left: 1px solid var(--line); background: rgba(245,245,247,.4); display:flex; flex-direction:column; }
.mega__featured-label { font-family:"Inter"; font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:.9rem; }
.mega__featured-card { position:relative; border-radius: var(--r-lg); background:var(--paper); border:1px solid var(--line);
  padding: 1.3rem 1.3rem 1.1rem; margin-bottom:1rem; overflow:hidden; }
.mega__featured-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--accent); }
.mega__featured-cat { display:block; font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); margin-bottom:.5rem; }
.mega__featured h5 { font-family:"Plus Jakarta Sans"; font-size:1.15rem; margin:0 0 .4rem; color:var(--ink); }
.mega__featured-desc { font-size:.85rem; color:var(--slate); margin:0 0 .9rem; }
.mega__featured-specs { display:flex; gap:.5rem; flex-wrap:wrap; }
.mega__featured-specs span { display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; color:var(--slate); background:var(--mist); border:1px solid var(--line); border-radius:999px; padding:.28rem .65rem; }
.mega__featured-specs svg { width:12px; height:12px; color:var(--accent); }
.mega__featured-actions { margin-top:auto; display:grid; gap:.5rem; }
.mega__featured-actions button.btn { width:100%; justify-content:center; border:1px solid var(--line); background:var(--paper); cursor:pointer; }
.mega__featured-actions button.btn:hover { border-color: var(--accent); color: var(--accent); }

/* BOTTOM — quick links */
.mega__bottom { grid-column: 1 / -1; display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
  padding: .9rem 1.8rem; border-top:1px solid var(--line); background: rgba(245,245,247,.5); }
.mega__quicklink { display:inline-flex; align-items:center; gap:.45rem; font-size:.85rem; font-weight:500; color:var(--slate); transition: color .2s; }
.mega__quicklink svg { width:16px; height:16px; color:var(--accent); }
.mega__quicklink:hover { color:var(--accent); }
.mega__grid-wrap { display:contents; }

/* ---------- Footer (light — never black) ---------- */
.footer { background: var(--mist); color: var(--slate); padding: clamp(3.5rem,7vw,5rem) 0 2rem; border-top:1px solid var(--line); }
.footer h4 { color: var(--ink); font-size: 1rem; margin-bottom: 1.1rem; }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--line); }
.footer__brand .brand { color: var(--ink); margin-bottom: 1rem; }
.footer__brand p { font-size: .92rem; max-width: 34ch; }
.footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; font-size: .92rem; }
.footer__links a { transition: color .2s; color: var(--slate); }
.footer__links a:hover { color: var(--accent); }
.footer__contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.footer__contact-list li { display: flex; align-items: flex-start; gap: .75rem; font-size: .88rem; color: var(--slate); line-height: 1.5; }
.footer__contact-list a { color: var(--slate); transition: color .2s; }
.footer__contact-list a:hover { color: var(--accent); }
.footer__contact-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.footer__contact-ic svg { width: 16px; height: 16px; }
.footer__social { display: flex; gap: .6rem; margin-top: 1.2rem; }
.footer__social a { display:grid; place-items:center; width:40px; height:40px; border-radius:999px; background: var(--paper); border:1px solid var(--line); color: var(--slate); transition: background .2s, transform .2s, color .2s, border-color .2s; }
.footer__social a:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-2px); color:#fff; }
.footer__social svg { width:17px; height:17px; }
.footer__bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-top: 1.8rem; font-size: .82rem; color:var(--slate); }

/* ---------- Floating elements ---------- */
.fab-wa { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 56px; height: 56px; border-radius: 999px; background: #25D366; color: #fff; display:grid; place-items:center; box-shadow: var(--shadow); transition: transform .3s var(--ease); }
.fab-wa:hover { transform: scale(1.08) translateY(-2px); }
.fab-wa svg { width: 27px; height: 27px; }
.to-top { position: fixed; right: 20px; bottom: 86px; z-index: 90; width: 44px; height:44px; border-radius:999px; background: var(--ink); color:#fff; display:grid; place-items:center; opacity:0; visibility:hidden; transform: translateY(8px); transition: all .3s var(--ease); border:none; }
.to-top.show { opacity:1; visibility:visible; transform: translateY(0); }
.to-top svg { width:18px; height:18px; }

/* Scroll progress */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 101; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .1s linear; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-dir="left"] { transform: translateX(-32px); }
.reveal[data-dir="right"] { transform: translateX(32px); }
.reveal[data-dir="left"].in, .reveal[data-dir="right"].in { transform: none; }
[data-stagger] > * { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-stagger].in > * { opacity: 1; transform: none; }

/* ---------- Custom cursor (desktop pointer only) ---------- */
.cursor, .cursor-dot { position: fixed; top:0; left:0; pointer-events:none; z-index: 999; border-radius:999px; mix-blend-mode: normal; }
.cursor { width: 34px; height:34px; border:1.5px solid var(--accent); transition: transform .18s var(--ease), width .2s, height .2s, background .2s, border-color .2s; transform: translate(-50%,-50%); }
.cursor-dot { width:5px; height:5px; background: var(--accent); transform: translate(-50%,-50%); }
.cursor.hover { width:52px; height:52px; background: rgba(37,99,235,.08); border-color: var(--accent); }
@media (hover: none), (pointer: coarse) { .cursor, .cursor-dot { display:none; } }

/* ---------- Search modal ---------- */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: start center; padding-top: 12vh;
  background: rgba(15,23,42,.5); backdrop-filter: blur(6px); opacity:0; visibility:hidden; transition: opacity .3s, visibility .3s; }
.modal.open { opacity: 1; visibility: visible; }
.search-box { width: min(640px, calc(100vw - 2rem)); background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; transform: translateY(-14px); transition: transform .35s var(--ease); }
.modal.open .search-box { transform: none; }
.search-box__head { display:flex; align-items:center; gap:.75rem; padding: 1.1rem 1.3rem; border-bottom:1px solid var(--line); }
.search-box__head svg { width:20px; height:20px; color: var(--slate); flex:none; }
.search-box__head input { flex:1; border:none; outline:none; font-size:1.1rem; font-family:"Inter"; color: var(--ink); background:transparent; }
.search-box__head kbd { font-size:.72rem; padding:.2rem .45rem; border:1px solid var(--line); border-radius:6px; color: var(--slate); }
.search-results { max-height: 52vh; overflow-y: auto; padding: .5rem; }
.search-hint { padding: 2rem 1.3rem; color: var(--slate); font-size:.9rem; text-align:center; }
.search-item { display:flex; align-items:center; gap:.85rem; padding:.75rem .9rem; border-radius: var(--r-sm); transition: background .15s; }
.search-item:hover, .search-item.active { background: var(--mist); }
.search-item__ic { width:40px; height:40px; border-radius:10px; flex:none; display:grid; place-items:center; background: var(--accent-soft); color: var(--accent); }
.search-item__ic svg { width:18px; height:18px; }
.search-item strong { font-size:.92rem; color: var(--ink); display:block; }
.search-item span { font-size:.78rem; color: var(--slate); }
.search-item__tag { margin-left:auto; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); background: rgba(37,99,235,.08); padding:.2rem .5rem; border-radius:6px; }

/* ---------- Utility ---------- */
.grid { display: grid; gap: 1.5rem; }
.chip { display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:500; color: var(--steel); background: var(--mist); border:1px solid var(--line); padding:.4rem .8rem; border-radius:999px; }
.chip svg { width: 14px; height: 14px; flex: none; color: var(--accent); }
.spec-badge { font-family:"Inter"; font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--accent); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Mobile nav drawer */
.hamburger { display:none; }
.drawer { display:none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .nav__links { display: none; }
  .mega { display: none !important; }
  .hamburger { display: grid; place-items:center; width:44px; height:44px; border-radius:999px; background:var(--mist); border:1px solid var(--line); }
  .hamburger svg { width:22px; height:22px; }
  .drawer {
    display: block; position: fixed; inset: 0 0 0 auto; width: min(420px, 88vw); z-index: 150;
    background: var(--paper); box-shadow: var(--shadow-lg); transform: translateX(100%);
    transition: transform .4s var(--ease); overflow-y: auto; padding: 1.2rem;
  }
  .drawer.open { transform: none; }
  .drawer__overlay { position: fixed; inset:0; background: rgba(15,23,42,.5); z-index:149; opacity:0; visibility:hidden; transition: opacity .3s, visibility .3s; }
  .drawer__overlay.open { opacity:1; visibility:visible; }
  .drawer__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; padding-bottom:1rem; border-bottom:1px solid var(--line); }
  .drawer__close { width:40px; height:40px; border-radius:999px; background:var(--mist); border:1px solid var(--line); display:grid; place-items:center; }
  .acc { border-bottom: 1px solid var(--line); }
  .acc__head { display:flex; align-items:center; justify-content:space-between; width:100%; padding:1rem .25rem; background:none; border:none; font-size:1.05rem; font-weight:600; color:var(--ink); font-family:"Inter"; }
  .acc__head svg { width:20px; height:20px; transition: transform .3s; color: var(--slate); }
  .acc__head[aria-expanded="true"] svg { transform: rotate(180deg); }
  .acc__body { max-height:0; overflow:hidden; transition: max-height .4s var(--ease); }
  .acc__body-inner { padding: .25rem 0 1rem; }
  .acc__sub { display:flex; align-items:center; gap:.6rem; padding:.55rem .5rem; border-radius:8px; color:var(--steel); font-size:.92rem; }
  .acc__sub:hover { background: var(--mist); color: var(--ink); }
  .acc__sub svg { width:16px; height:16px; color:var(--accent); }
  .drawer__cta { margin-top:1.5rem; display:grid; gap:.6rem; }
  .footer__bottom { justify-content:center; text-align:center; }
}
@media (max-width: 560px) {
  .footer__top { grid-template-columns: 1fr; }
}

/* ============================================================
   CARD / CATEGORY-CARD component
   Shared across home.html (machine range grid) and every
   generated category page (related-categories mini cards).
   Previously only defined in home.css, so category pages —
   which don't load home.css — were rendering these unstyled.
   ============================================================ */
.cat-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1.4rem; }
/* Full-bleed 4-column variant — used on the homepage "Machine range"
   teaser grid so it runs edge-to-edge instead of sitting inside the
   centered .wrap column. */
.cat-grid--full { grid-template-columns: repeat(4,1fr); max-width: 80vw; margin-inline: auto; padding-inline: 0; gap:1.2rem; }
@media (max-width: 1300px) { .cat-grid--full { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 900px)  { .cat-grid--full { grid-template-columns: repeat(2,1fr); max-width: 92vw; } }
@media (max-width: 560px)  { .cat-grid--full { grid-template-columns: 1fr; max-width: 92vw; } }
.card { background:var(--paper); border:1px solid var(--line); border-radius: var(--r-xl); overflow:hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; display:flex; flex-direction:column; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(227,30,36,.25); }
.cat-card__media { aspect-ratio: 16/10; background: var(--mist); position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.cat-card__media svg.rollers { position:absolute; inset:0; width:100%; height:100%; }
.cat-card__photo { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:1.4rem; box-sizing:border-box;
  transition: transform .5s var(--ease); }
.cat-card__photo--cover { object-fit:cover; padding:0; }
.card:hover .cat-card__photo { transform: scale(1.05); }
.cat-card__icon { position:absolute; top:1rem; left:1rem; width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background: var(--paper); border:1px solid var(--line); color:var(--accent); box-shadow: var(--shadow-sm); }
.cat-card__icon svg { width:22px; height:22px; }
.cat-card__count { position:absolute; top:1rem; right:1rem; font-size:.72rem; font-weight:600; color:var(--accent); background: var(--accent-soft); border:1px solid rgba(227,30,36,.16); padding:.28rem .6rem; border-radius:999px; }
.cat-card__body { padding:1.5rem; display:flex; flex-direction:column; flex:1; }
.cat-card__body h3 { font-size:1.15rem; margin-bottom:.4rem; }
.cat-card__body p { color:var(--slate); font-size:.9rem; margin-bottom:1rem; flex:1; }
.cat-card__link { display:inline-flex; align-items:center; gap:.4rem; font-weight:600; color:var(--accent); font-size:.9rem; }
.cat-card__link svg { width:16px; height:16px; transition: transform .3s; }
.card:hover .cat-card__link svg { transform: translateX(4px); }

/* ============================================================
   STATS BAND component (moved from home.css)
   Used by about.html's "Global presence" numbers — about.html
   doesn't load home.css, so this was rendering unstyled there too.
   ============================================================ */
.stats-band { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; text-align:center; }
.stat__num { font-family:"Plus Jakarta Sans"; font-size: clamp(2.4rem,5vw,3.4rem); color:var(--ink); line-height:1; }
.stat__num .suffix { color: var(--accent); }
.stat__label { color:var(--slate); font-size:.92rem; margin-top:.5rem; }
@media (max-width: 900px) {
  .stats-band { grid-template-columns: 1fr 1fr; gap:2.5rem 1rem; }
}

/* ============================================================
   WHY CHOOSE cards (moved from home.css — about.html uses these
   for "Manufacturing Capability" but never loaded home.css)
   ============================================================ */
.why-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1.2rem; }
.why-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl); padding:1.8rem; transition: transform .35s var(--ease), box-shadow .35s, border-color .3s; }
.why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(227,30,36,.25); }
.why-card__ic { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background: var(--accent-soft); color:var(--accent); margin-bottom:1.1rem; transition: background .3s, color .3s, transform .3s; }
.why-card:hover .why-card__ic { background: var(--accent); color:#fff; transform: scale(1.08) rotate(-6deg); }
.why-card__ic svg { width:24px; height:24px; }
.why-card h3 { font-size:1.1rem; margin-bottom:.4rem; }
.why-card p { color:var(--slate); font-size:.92rem; margin:0; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CERTIFICATES (moved from home.css — same missing-CSS bug)
   ============================================================ */
.certs { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.cert { display:flex; align-items:center; gap:.9rem; padding:1.3rem 1.4rem; border:1px solid var(--line); border-radius:var(--r); background:var(--paper); transition: box-shadow .3s, transform .3s, border-color .3s; }
.cert:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); border-color: rgba(227,30,36,.25); }
.cert svg { width:30px; height:30px; color:var(--accent); flex:none; }
.cert strong { font-family:"Plus Jakarta Sans"; font-size:.95rem; color:var(--ink); }
@media (max-width: 900px) { .certs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .certs { grid-template-columns: 1fr; } }

/* ============================================================
   GLOBAL PRESENCE — world map (moved from home.css, same bug —
   plus a polish pass: hub glow, card lift on hover, smoother pin
   entrance, staggered stat rows).
   ============================================================ */
.gmap-wrap { display:grid; grid-template-columns: 1.5fr 1fr; gap: 2.5rem; align-items:center; }
.gmap-card {
  position:relative; background: var(--paper); border:1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow); padding: 1.5rem; overflow:hidden;
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.gmap-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.gmap-card::before { content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image: radial-gradient(rgba(26,26,26,.04) 1px, transparent 1px); background-size:22px 22px; }
.world-map { position:relative; width:100%; aspect-ratio: 2 / 1; }
.wm-svg { position:relative; width:100%; height:100%; z-index:1; }
.wm-dot { fill: var(--line); }
.wm-line { fill:none; stroke: rgba(227,30,36,.28); stroke-width:1.2; stroke-dasharray: 4 4;
  opacity:0; animation: wmLineIn .8s var(--ease) forwards; }
@keyframes wmLineIn { from{ opacity:0; } to{ opacity:1; } }
/* soft glow halo behind the HQ hub, a bit more premium than the plain pulse ring alone */
.wm-hub-glow { fill: rgba(227,30,36,.14); animation: wmHubGlow 3.2s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
@keyframes wmHubGlow { 0%,100% { transform:scale(1); opacity:.9; } 50% { transform:scale(1.6); opacity:.25; } }
.wm-hub-ring { fill:none; stroke: var(--accent); stroke-width:2; opacity:.5; animation: wmPulse 2.4s var(--ease) infinite; }
.wm-hub-dot { fill: var(--accent); }
.wm-pin { cursor:pointer; opacity:0; animation: wmFadeIn .5s var(--ease) forwards; outline:none; }
@keyframes wmFadeIn { from{opacity:0; transform:scale(.5); transform-origin:center;} to{opacity:1; transform:scale(1);} }
.wm-pulse { fill: rgba(227,30,36,.18); animation: wmPulse 2.6s var(--ease) infinite; transform-origin:center; transform-box:fill-box; }
.wm-dot-marker { fill: var(--accent); stroke:#fff; stroke-width:1.5; transition: r .2s var(--ease); }
.wm-pin:hover .wm-dot-marker, .wm-pin.active .wm-dot-marker, .wm-pin:focus .wm-dot-marker { r:6.5; }
.wm-pin:hover .wm-pulse, .wm-pin.active .wm-pulse, .wm-pin:focus .wm-pulse { fill: rgba(227,30,36,.3); }
@keyframes wmPulse { 0%,100%{ transform:scale(1); opacity:.6; } 50%{ transform:scale(1.35); opacity:.15; } }
.wm-tooltip { position:absolute; z-index:5; transform:translate(-50%,-100%); pointer-events:none;
  background: var(--ink); color:#fff; padding:.55rem .8rem; border-radius: 10px; font-size:.8rem;
  white-space:nowrap; opacity:0; transition: opacity .2s var(--ease); box-shadow: var(--shadow); }
.wm-tooltip strong { display:block; font-family:"Inter"; font-weight:700; font-size:.82rem; }
.wm-tooltip span { display:block; color:#CBD5E1; font-size:.72rem; margin-top:.1rem; }
.wm-tooltip.show { opacity:1; }

.gmap-legend { display:flex; align-items:center; gap:.6rem; margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--line); font-size:.82rem; color:var(--slate); }
.gmap-legend .dot { width:8px; height:8px; border-radius:999px; background:var(--accent); flex:none; }
.gmap-legend .dot--hub { background:var(--accent); box-shadow:0 0 0 3px rgba(227,30,36,.18); }

.gmap-side { display:flex; flex-direction:column; gap:1.4rem; }
.gmap-stat { display:flex; align-items:center; gap:1rem; }
.gmap-stat__ic { width:52px; height:52px; border-radius:14px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; flex:none; transition: background .3s, color .3s, transform .3s; }
.gmap-stat:hover .gmap-stat__ic { background: var(--accent); color:#fff; transform: scale(1.08); }
.gmap-stat__ic svg { width:24px; height:24px; }
.gmap-stat strong { display:block; font-family:"Plus Jakarta Sans"; font-size:1.6rem; color:var(--ink); line-height:1; }
.gmap-stat span { font-size:.85rem; color:var(--slate); }
.gmap-regions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.4rem; }
.gmap-regions span { font-size:.78rem; color:var(--slate); background:var(--mist); border:1px solid var(--line); border-radius:999px; padding:.35rem .75rem; transition: background .25s, color .25s, border-color .25s; }
.gmap-regions span:hover { background: var(--accent-soft); color: var(--accent); border-color: rgba(227,30,36,.2); }

@media (max-width: 900px) {
  .gmap-wrap { grid-template-columns: 1fr; }
}

/* ============================================================
   REAL PRODUCT PHOTOGRAPHY media helpers (moved from inner.css —
   used on home.html's zigzag Machine Range too, which doesn't
   load inner.css. Same recurring bug pattern, fixed at the root
   this time by putting shared media classes in base.css directly.)
   ============================================================ */
.media-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:1.2rem; box-sizing:border-box; transition: transform .5s var(--ease); }
.media-photo--cover { object-fit:cover; padding:0; }
a:hover .media-photo, .card:hover .media-photo, .feature__media:hover .media-photo { transform: scale(1.05); }
.media-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; color:var(--slate); background:var(--mist); }
.media-placeholder svg { width:34px; height:34px; opacity:.5; }
.media-placeholder em { font-style:normal; font-size:.78rem; }
.gallery-main .media-photo, .gallery-main .media-placeholder { padding:2rem; }

/* ============================================================
   RED CTA BANNER (moved from home.css)
   Used on every page — home, about, contact, and every generated
   category/product page — but home.css is homepage-only, so this
   was rendering completely unstyled (raw black line, no gradient
   background, plain text) everywhere except the homepage.
   ============================================================ */
.cta-band { position:relative; overflow:hidden; border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color:#fff; padding: clamp(2.8rem,6vw,4.5rem); box-shadow: var(--shadow-red); }
.cta-band::before { content:""; position:absolute; inset:0; opacity:.5;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size:24px 24px;
  mask-image: radial-gradient(70% 70% at 85% 20%, #000, transparent); }
.cta-band .webline { position:absolute; inset:0; width:100%; height:100%; color: rgba(255,255,255,.2); }
.cta-band__inner { position:relative; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.cta-band .eyebrow { color:#fff; }
.cta-band .eyebrow::before { background:#fff; }
.cta-band h2 { font-size: clamp(1.8rem,3.5vw,2.6rem); max-width:18ch; color:#fff; }
.cta-band__actions { display:flex; gap:.8rem; flex-wrap:wrap; }