/* ==========================================================================
   ANTE — Shandong Ante Automotive Technology Co., Ltd.
   Design System: "Industrial Authority"
   Grid discipline of Modern Minimal + typographic weight of Brutalist,
   rendered in a heavy-industry navy / safety-orange palette.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  --ink:#0A1626;
  --navy:#0F2A47;
  --navy-700:#123A61;
  --navy-600:#16406B;
  --blue:#1565B0;
  --blue-500:#1E7BD1;
  --blue-050:#EDF4FB;
  --orange:#F26A1B;
  --orange-600:#D8560C;
  --orange-050:#FFF3EA;
  --amber:#FFB020;
  --green:#1F9D55;

  --paper:#FFFFFF;
  --paper-2:#F5F7F9;
  --paper-3:#EBF0F4;
  --line:#DCE4EC;
  --line-2:#C6D2DE;

  --text:#0E1E2E;
  --text-2:#4E6377;
  --text-3:#8496A6;
  --text-inv:#FFFFFF;
  --text-inv-2:rgba(255,255,255,.72);
  --text-inv-3:rgba(255,255,255,.45);

  --r-xs:2px; --r-sm:3px; --r-md:4px; --r-lg:6px; --r-pill:999px;

  --sh-1:0 1px 2px rgba(10,22,38,.06);
  --sh-2:0 4px 16px rgba(10,22,38,.08);
  --sh-3:0 12px 36px rgba(10,22,38,.12);
  --sh-4:0 24px 64px rgba(10,22,38,.18);

  --wrap:1280px;
  --gap:24px;
  --sec-y:96px;

  --ff-display:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --ff-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --ff-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--ff-body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
/* Safety net: inline icons must never fall back to the intrinsic 300x150
   replaced-element box. Component rules (.btn svg, .row-go svg …) win on
   specificity and still size their own icons. */
svg{width:1em;height:1em;flex:none}

/* ---------- intrinsic-size safety (flex / grid items) ----------
   A `1fr` track is really `minmax(auto,1fr)`, and that `auto` resolves to the
   item's *min-content* width. English and Chinese fit inside 360px; the longer
   Spanish, French, Russian and Arabic strings do not, so one long word — or a
   nested grid such as `.gal` — pushed the track past the viewport. Because
   `body` already carries `overflow-x:hidden`, the result was not a scrollbar
   but right-hand content silently cut off: 28 localised pages lost up to 102px
   at 360px. Zeroing the automatic minimum lets each track shrink to the space
   that is actually available; text then wraps and images are already clamped
   by `img{max-width:100%}` above.

   `min-width` only has an effect on flex and grid items, so listing the
   containers is enough and nothing in normal flow changes. Deliberately not
   `*{min-width:0}`: the horizontal rails (`.subnav-in`, `.gal-strip` …) rely
   on their children keeping their natural width so the rail scrolls instead
   of squashing. */
.split>*,.col-2a>*,.col-2b>*,.col-2c>*,.col-3a>*,.grid>*,
.sec-head-row>*,.form-row>*,.gal>*,.hero-inner>*,.cta-band .wrap>*{min-width:0}

/* …and a single long word must be able to break rather than spill out of a
   track that is now allowed to be narrow — e.g. Russian "производственной"
   set at display size in a heading. `overflow-wrap` inherits, so one rule on
   the body covers every element. */
body{overflow-wrap:break-word}

a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5,p,figure,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ---------- 3. TYPE SCALE ---------- */
.d1,.d2,.d3,.d4{font-family:var(--ff-display);font-weight:700;line-height:1.02;letter-spacing:.005em;text-transform:uppercase;color:var(--navy)}
.d1{font-size:clamp(2.75rem,5.2vw,4.5rem)}
.d2{font-size:clamp(2.1rem,3.6vw,3.25rem)}
.d3{font-size:clamp(1.5rem,2.1vw,2rem)}
.d4{font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.15}
.lead{font-size:1.0625rem;line-height:1.75;color:var(--text-2)}
.small{font-size:.875rem}
.tiny{font-size:.78rem}
.mono{font-family:var(--ff-mono);font-size:.8rem;letter-spacing:.02em}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-body);font-size:.72rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--orange);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--orange);flex:none}
.eyebrow.on-dark{color:var(--amber)}
.eyebrow.on-dark::before{background:var(--amber)}
.eyebrow.no-rule::before{display:none}

/* ---------- 4. LAYOUT ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px}
.wrap-wide{max-width:1560px}
.sec{padding:var(--sec-y) 0}
.sec-sm{padding:64px 0}
.sec-tint{background:var(--paper-2)}
.sec-ink{background:var(--ink);color:var(--text-inv)}
.sec-ink .d1,.sec-ink .d2,.sec-ink .d3,.sec-ink .d4{color:#fff}
.sec-ink .lead{color:var(--text-inv-2)}
.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* Section head */
.sec-head{margin-bottom:44px;max-width:760px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head .eyebrow{margin-bottom:14px}
.sec-head p{margin-top:16px;color:var(--text-2);font-size:1.0625rem}
.sec-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:44px;flex-wrap:wrap}
.sec-head-row .sec-head{margin-bottom:0}

/* ---------- 5. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border:1px solid transparent;border-radius:var(--r-sm);
  font-family:var(--ff-body);font-size:.82rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  transition:all .22s var(--ease);white-space:nowrap;
}
.btn svg{width:15px;height:15px;flex:none}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 4px 14px rgba(242,106,27,.28)}
.btn-primary:hover{background:var(--orange-600);box-shadow:0 8px 24px rgba(242,106,27,.34);transform:translateY(-1px)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-600);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-2);color:var(--navy);background:#fff}
.btn-ghost:hover{border-color:var(--navy);background:var(--navy);color:#fff}
.btn-ghost-inv{border-color:rgba(255,255,255,.34);color:#fff;background:transparent}
.btn-ghost-inv:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn-lg{padding:17px 34px;font-size:.86rem}
.btn-sm{padding:10px 18px;font-size:.74rem}
.btn-block{width:100%}
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);
}
.link-arrow svg{width:14px;height:14px;transition:transform .22s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}
.link-arrow.on-dark{color:var(--amber)}

/* ---------- 6. TOPBAR ---------- */
.topbar{background:var(--ink);color:var(--text-inv-2);font-size:.78rem}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:38px}
.topbar-l{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.topbar a{display:inline-flex;align-items:center;gap:7px;transition:color .2s}
.topbar a:hover{color:#fff}
.topbar svg{width:13px;height:13px;opacity:.7}
.topbar-r{display:flex;align-items:center;gap:16px}
.topbar .sep{width:1px;height:14px;background:rgba(255,255,255,.16)}
.topbar .socials{display:flex;gap:8px}
.topbar .socials a{
  width:22px;height:22px;border-radius:var(--r-xs);background:rgba(255,255,255,.09);
  display:grid;place-items:center;
}
.topbar .socials a:hover{background:var(--orange)}
.topbar .socials svg{width:12px;height:12px;opacity:.9}

/* ---------- 7. HEADER / NAV ---------- */
.header{position:sticky;top:0;z-index:800;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--sh-1)}
.header-in{display:flex;align-items:center;gap:28px;height:88px;position:relative}
/* ---------- company lockup — supplied artwork, used verbatim ---------- */
.brand{display:flex;align-items:center;flex:none;text-decoration:none}
/* the artwork carries its own white margin, so the box is taller than the
   logo you actually see: 68px here renders the lockup at roughly 56px */
.brand img{height:68px;width:auto;display:block;flex:none}
.nav{margin-left:auto}
.nav-list{display:flex;align-items:center;gap:2px}
.nav-item{position:relative}
/* the mega panel is positioned against .header-in so it always centres
   on the viewport instead of on its own trigger and never overflows */
.nav-item.has-mega{position:static}
.nav-link{
  display:flex;align-items:center;gap:5px;padding:12px 15px;
  font-size:.845rem;font-weight:600;color:var(--navy);letter-spacing:.01em;
  border-radius:var(--r-sm);transition:color .18s,background .18s;
}
.nav-link svg{width:11px;height:11px;opacity:.5;transition:transform .2s}
.nav-link:hover{color:var(--orange);background:var(--orange-050)}
.nav-item:hover .nav-link{color:var(--orange)}
.nav-item:hover .nav-link svg{transform:rotate(180deg)}
.nav-item.active .nav-link{color:var(--orange)}
.nav-item.active .nav-link::after{
  content:"";position:absolute;left:15px;right:15px;bottom:2px;height:2px;background:var(--orange);
}
.header-cta{display:flex;align-items:center;gap:12px;flex:none}
.header-phone{display:flex;align-items:center;gap:10px}
.header-phone svg{width:18px;height:18px;color:var(--orange)}
.header-phone b{display:block;font-size:.88rem;color:var(--navy);line-height:1.2}
.header-phone span{display:block;font-size:.68rem;color:var(--text-3);letter-spacing:.06em;text-transform:uppercase}

/* Mega menu */
.mega{
  position:absolute;top:100%;left:50%;transform:translate(-50%,10px);
  width:min(1180px,calc(100vw - 48px));
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--orange);
  box-shadow:var(--sh-4);border-radius:0 0 var(--r-lg) var(--r-lg);
  padding:32px;opacity:0;visibility:hidden;transition:all .22s var(--ease);
}
.nav-item:hover .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega-cols{display:grid;grid-template-columns:repeat(3,1fr) 260px;gap:32px}
.mega-col h4{
  font-family:var(--ff-display);font-size:1.02rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--navy);padding-bottom:10px;margin-bottom:12px;
  border-bottom:2px solid var(--line);
}
.mega-col ul{display:flex;flex-direction:column;gap:1px}
.mega-col a{
  display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--r-sm);
  font-size:.845rem;color:var(--text-2);transition:all .16s;
}
.mega-col a::before{content:"";width:4px;height:4px;background:var(--line-2);border-radius:50%;flex:none;transition:background .16s}
.mega-col a:hover{background:var(--blue-050);color:var(--blue);padding-left:14px}
.mega-col a:hover::before{background:var(--orange)}
.mega-promo{background:var(--navy);border-radius:var(--r-md);overflow:hidden;position:relative;display:flex;flex-direction:column}
.mega-promo img{height:150px;width:100%;object-fit:cover;opacity:.85}
.mega-promo-b{padding:18px;color:#fff;display:flex;flex-direction:column;gap:10px;flex:1}
.mega-promo-b b{font-family:var(--ff-display);font-size:1.15rem;text-transform:uppercase;letter-spacing:.03em}
.mega-promo-b p{font-size:.78rem;color:var(--text-inv-2);line-height:1.55}

/* Simple dropdown */
.dropdown{
  position:absolute;top:100%;left:0;min-width:250px;background:#fff;
  border:1px solid var(--line);border-top:3px solid var(--orange);box-shadow:var(--sh-3);
  padding:10px;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:all .2s var(--ease);border-radius:0 0 var(--r-md) var(--r-md);
}
.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:9px 12px;font-size:.85rem;color:var(--text-2);border-radius:var(--r-sm);transition:all .16s}
.dropdown a:hover{background:var(--blue-050);color:var(--blue);padding-left:17px}

/* Mobile nav */
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);cursor:pointer;padding:0;place-items:center}
.burger span{display:block;width:19px;height:2px;background:var(--navy);position:relative;transition:.2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:var(--navy);transition:.2s}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* ---------- 8. HERO SLIDER ---------- */
.hero{position:relative;background:var(--ink);overflow:hidden}
.hero-slides{position:relative;height:clamp(520px,64vh,660px)}
.hero-slide{
  position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease);
  background-size:cover;background-position:center;
}
.hero-slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(10,22,38,.93) 0%,rgba(10,22,38,.78) 34%,rgba(10,22,38,.28) 62%,rgba(10,22,38,.5) 100%);
}
.hero-slide.on{opacity:1}
.hero-slide.on .hero-body>*{animation:heroUp .85s var(--ease) both}
.hero-slide.on .hero-body>*:nth-child(1){animation-delay:.1s}
.hero-slide.on .hero-body>*:nth-child(2){animation-delay:.22s}
.hero-slide.on .hero-body>*:nth-child(3){animation-delay:.34s}
.hero-slide.on .hero-body>*:nth-child(4){animation-delay:.46s}
@keyframes heroUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero-inner{position:relative;z-index:3;height:100%;display:flex;align-items:center}
.hero-body{max-width:720px;color:#fff;display:flex;flex-direction:column;gap:20px}
.hero-body h1{color:#fff;font-size:clamp(2.4rem,4.6vw,4rem);text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero-body h1 em{font-style:normal;color:var(--amber);display:block}
.hero-body p{font-size:1.075rem;color:rgba(255,255,255,.86);max-width:600px;line-height:1.7}
.hero-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.hero-tag{
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);
  font-size:.76rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#fff;
  backdrop-filter:blur(6px);
}
.hero-tag svg{width:13px;height:13px;color:var(--amber)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.hero-nav{position:absolute;z-index:5;right:28px;bottom:34px;display:flex;gap:8px}
.hero-dot{
  width:38px;height:4px;border:0;background:rgba(255,255,255,.3);border-radius:2px;
  cursor:pointer;padding:0;transition:.25s;
}
.hero-dot.on{background:var(--orange);width:56px}
.hero-arrow{
  position:absolute;z-index:5;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border:1px solid rgba(255,255,255,.28);background:rgba(10,22,38,.4);
  color:#fff;border-radius:var(--r-sm);cursor:pointer;display:grid;place-items:center;
  backdrop-filter:blur(8px);transition:.2s;
}
.hero-arrow:hover{background:var(--orange);border-color:var(--orange)}
.hero-arrow svg{width:17px;height:17px}
.hero-prev{left:28px}.hero-next{right:28px}

/* Hero stat strip */
.hero-stats{background:var(--navy);border-top:1px solid rgba(255,255,255,.09)}
.hero-stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.hero-stat{padding:26px 24px;border-right:1px solid rgba(255,255,255,.09);display:flex;align-items:center;gap:16px}
.hero-stat:last-child{border-right:0}
.hero-stat svg{width:28px;height:28px;color:var(--orange);flex:none}
.hero-stat b{display:block;font-family:var(--ff-display);font-size:1.9rem;line-height:1;color:#fff}
.hero-stat > div > span{display:block;font-size:.76rem;color:var(--text-inv-3);text-transform:uppercase;letter-spacing:.09em;margin-top:4px}

/* ---------- 9. CATEGORY GRID ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cat-card{
  position:relative;display:block;border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;background:#fff;transition:all .28s var(--ease);
}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--line-2)}
.cat-card-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-3)}
.cat-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.cat-card:hover .cat-card-img img{transform:scale(1.07)}
.cat-card-num{
  position:absolute;top:12px;left:12px;z-index:2;font-family:var(--ff-mono);
  font-size:.7rem;font-weight:600;color:#fff;background:rgba(10,22,38,.72);
  padding:3px 8px;border-radius:var(--r-xs);backdrop-filter:blur(4px);
}
.cat-card-b{padding:18px 20px 20px;border-top:3px solid transparent;transition:border-color .28s}
.cat-card:hover .cat-card-b{border-top-color:var(--orange)}
.cat-card-b h3{font-family:var(--ff-display);font-size:1.22rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--navy);line-height:1.15}
.cat-card-b p{font-size:.82rem;color:var(--text-3);margin-top:7px;line-height:1.5}
.cat-card-b .link-arrow{margin-top:14px;font-size:.72rem}

/* ---------- 10. SPLIT / ABOUT ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.split-media{position:relative}
.split-media img{border-radius:var(--r-md);width:100%;box-shadow:var(--sh-3)}
.split-media .badge{
  position:absolute;right:-18px;bottom:-18px;background:var(--orange);color:#fff;
  padding:20px 24px;border-radius:var(--r-md);box-shadow:var(--sh-3);text-align:center;
}
.split-media .badge b{display:block;font-family:var(--ff-display);font-size:2.4rem;line-height:1}
.split-media .badge span{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;opacity:.92}
.split-media .badge2{
  position:absolute;left:-18px;top:-18px;background:#fff;border:1px solid var(--line);
  padding:14px 18px;border-radius:var(--r-md);box-shadow:var(--sh-2);
}
.split-media .badge2 b{font-family:var(--ff-display);font-size:1.5rem;color:var(--navy);line-height:1}
.split-media .badge2 span{display:block;font-size:.68rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.1em}
.split-body{display:flex;flex-direction:column;gap:22px}
.check-list{display:grid;gap:14px}
.check-list li{display:flex;gap:12px;align-items:flex-start;font-size:.925rem;color:var(--text-2)}
.check-list svg{width:19px;height:19px;color:var(--orange);flex:none;margin-top:3px}

/* ---------- 11. LIST ROWS (cases / news) ---------- */
.rows{border-top:1px solid var(--line)}
.row{
  display:grid;grid-template-columns:96px 1fr auto;gap:24px;align-items:center;
  padding:20px 6px;border-bottom:1px solid var(--line);transition:background .2s,padding .2s;
}
.row:hover{background:var(--paper-2);padding-left:16px;padding-right:16px}
.row-date{
  font-family:var(--ff-mono);font-size:.72rem;color:var(--text-3);
  border-left:3px solid var(--orange);padding-left:12px;line-height:1.5;
}
.row-date b{display:block;font-size:1.15rem;color:var(--navy);font-family:var(--ff-display);font-weight:700}
.row-title{font-size:.95rem;font-weight:500;color:var(--text);line-height:1.5}
.row:hover .row-title{color:var(--blue)}
.row-go{width:34px;height:34px;border:1px solid var(--line);border-radius:var(--r-sm);display:grid;place-items:center;color:var(--text-3);transition:.2s;flex:none}
.row:hover .row-go{background:var(--orange);border-color:var(--orange);color:#fff}
.row-go svg{width:14px;height:14px}

/* ---------- 12. PROMO / STATS BAND ---------- */
.promo{
  position:relative;background:var(--navy) center/cover no-repeat;overflow:hidden;
  padding:88px 0;
}
.promo::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,22,38,.95),rgba(10,22,38,.7) 55%,rgba(10,22,38,.9))}
.promo .wrap{position:relative;z-index:2}
.promo-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.stat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:var(--r-md);padding:22px}
.stat b{display:block;font-family:var(--ff-display);font-size:2.5rem;line-height:1;color:var(--amber)}
.stat > span{display:block;font-size:.78rem;color:var(--text-inv-2);text-transform:uppercase;letter-spacing:.08em;margin-top:6px}
.office-list{display:grid;gap:10px;margin-top:24px}
.office{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;color:var(--text-inv-2)}
.office svg{width:16px;height:16px;color:var(--amber);flex:none;margin-top:3px}

/* ---------- 13. TESTIMONIALS ---------- */
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quote{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:28px;
  display:flex;flex-direction:column;gap:16px;position:relative;transition:.26s var(--ease);
}
.quote:hover{box-shadow:var(--sh-3);transform:translateY(-3px);border-color:var(--line-2)}
.quote::before{
  content:"“";position:absolute;top:6px;right:20px;font-family:Georgia,serif;
  font-size:5rem;line-height:1;color:var(--paper-3);
}
.quote-stars{display:flex;gap:3px}
.quote-stars svg{width:15px;height:15px;color:var(--amber)}
.quote p{font-size:.925rem;color:var(--text-2);line-height:1.72;position:relative;z-index:2}
.quote-who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.quote-av{
  width:40px;height:40px;border-radius:var(--r-sm);background:var(--navy);color:#fff;
  display:grid;place-items:center;font-family:var(--ff-display);font-size:1.15rem;font-weight:700;flex:none;
}
.quote-who b{display:block;font-size:.875rem;color:var(--navy)}
.quote-who span{display:block;font-size:.75rem;color:var(--text-3)}

/* ---------- 14. PRODUCT CARDS ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.prod-card{
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff;
  display:flex;flex-direction:column;transition:.26s var(--ease);
}
.prod-card:hover{box-shadow:var(--sh-3);transform:translateY(-3px)}
.prod-card-img{aspect-ratio:16/11;overflow:hidden;background:var(--paper-3);position:relative}
.prod-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.prod-card:hover .prod-card-img img{transform:scale(1.06)}
.prod-card-tag{
  position:absolute;top:10px;left:10px;background:var(--orange);color:#fff;
  font-size:.65rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 9px;border-radius:var(--r-xs);
}
.prod-card-b{padding:16px 18px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.prod-card-b h3{font-family:var(--ff-display);font-size:1.1rem;font-weight:700;text-transform:uppercase;color:var(--navy);line-height:1.2}
.prod-card-b p{font-size:.8rem;color:var(--text-3);line-height:1.55}
.prod-card-b .link-arrow{margin-top:auto;padding-top:12px;font-size:.7rem}

/* ---------- 15. ADVANTAGES ---------- */
.adv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff}
.adv{padding:34px 28px;border-right:1px solid var(--line);position:relative;transition:.24s}
.adv:last-child{border-right:0}
.adv:hover{background:var(--paper-2)}
.adv-ico{width:46px;height:46px;border-radius:var(--r-sm);background:var(--blue-050);display:grid;place-items:center;margin-bottom:18px;transition:.24s}
.adv-ico svg{width:23px;height:23px;color:var(--blue)}
.adv:hover .adv-ico{background:var(--orange);transform:translateY(-2px)}
.adv:hover .adv-ico svg{color:#fff}
.adv h3{font-family:var(--ff-display);font-size:1.15rem;font-weight:700;text-transform:uppercase;color:var(--navy);margin-bottom:9px}
.adv p{font-size:.86rem;color:var(--text-2);line-height:1.65}

/* ---------- 16. CERT STRIP ---------- */
.cert-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cert-card{
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden;
  display:flex;flex-direction:column;transition:.24s;
}
.cert-card:hover{box-shadow:var(--sh-2);border-color:var(--line-2)}
.cert-card-img{aspect-ratio:4/3;background:var(--paper-2);overflow:hidden;display:grid;place-items:center;padding:10px}
.cert-card-img img{max-height:100%;width:auto;object-fit:contain}
.cert-card-b{padding:14px 16px;border-top:1px solid var(--line);font-size:.8rem;color:var(--text-2);text-align:center}
.cert-card-b b{display:block;color:var(--navy);font-size:.845rem;margin-bottom:2px}

/* ---------- 17. FAQ ---------- */
.faq{border-top:1px solid var(--line);max-width:920px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;background:none;border:0;text-align:left;cursor:pointer;
  padding:22px 46px 22px 0;position:relative;font-size:1rem;font-weight:600;color:var(--navy);
  transition:color .2s;font-family:var(--ff-body);
}
.faq-q:hover{color:var(--orange)}
.faq-q::after{
  content:"";position:absolute;right:12px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);
  transform:translateY(-70%) rotate(45deg);transition:transform .28s var(--ease);
}
.faq-item.open .faq-q::after{transform:translateY(-30%) rotate(-135deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .34s var(--ease)}
.faq-a-in{padding:0 40px 24px 0;font-size:.925rem;color:var(--text-2);line-height:1.78}
.faq-item.open .faq-a{max-height:600px}

/* ---------- 18. CTA BAND ---------- */
.cta-band{
  background:var(--orange);color:#fff;padding:60px 0;position:relative;overflow:hidden;
}
.cta-band::after{
  content:"";position:absolute;right:-60px;top:-60px;width:340px;height:340px;
  border:56px solid rgba(255,255,255,.09);border-radius:50%;
}
.cta-band .wrap{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta-band h2{font-family:var(--ff-display);font-size:clamp(1.7rem,2.6vw,2.4rem);text-transform:uppercase;color:#fff;line-height:1.1}
.cta-band p{color:rgba(255,255,255,.9);margin-top:8px;font-size:.95rem}

/* ---------- 19. FOOTER ---------- */
.footer{background:var(--ink);color:var(--text-inv-2);padding-top:72px}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:44px;padding-bottom:52px}
.footer h4{
  font-family:var(--ff-display);font-size:1.05rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:#fff;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-about .brand{margin-bottom:20px}
/* the artwork is white-backed, so on the dark footer it sits on a white chip
   rather than being recoloured */
.footer-about .brand img{height:70px;background:#fff;border-radius:14px}
.footer-about p{font-size:.875rem;line-height:1.75;color:var(--text-inv-3);max-width:340px}
.footer ul{display:flex;flex-direction:column;gap:11px}
.footer ul a{font-size:.875rem;color:var(--text-inv-3);transition:.18s;display:inline-flex;align-items:center;gap:8px}
.footer ul a:hover{color:#fff;padding-left:5px}
.footer ul a::before{content:"";width:4px;height:4px;background:var(--orange);border-radius:50%;flex:none;opacity:.6}
.footer-contact li{display:flex;gap:12px;align-items:flex-start;font-size:.875rem;color:var(--text-inv-3);line-height:1.6}
.footer-contact svg{width:15px;height:15px;color:var(--orange);flex:none;margin-top:4px}
.footer-contact b{color:#fff;font-weight:600}
.footer-social{display:flex;gap:10px;margin-top:22px}
.footer-social a{
  width:38px;height:38px;border-radius:var(--r-sm);background:rgba(255,255,255,.08);
  display:grid;place-items:center;transition:.2s;
}
.footer-social a:hover{background:var(--orange);transform:translateY(-2px)}
.footer-social svg{width:16px;height:16px}

/* ---------- 19b. QR CODES ----------
   Two placements, one asset pair: a large captioned pair on the contact page
   and a small pair in the footer. The supplied artwork carries the QR quiet
   zone inside the file, so it is used whole — cropping the margin off would
   stop some scanners reading it. */
.qr-row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;
  max-width:620px;margin:40px auto 0;
}
.qr-card{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  margin:0;padding:26px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);
}
/* a square, object-fit box keeps the pair optically identical even though the
   two source files are 254×255 and 224×223 */
.qr-card img{width:100%;max-width:200px;aspect-ratio:1/1;object-fit:contain;display:block}
.qr-card figcaption{text-align:center;line-height:1.45}
.qr-card b{
  display:block;font-family:var(--ff-display);font-size:1.15rem;
  color:var(--navy);letter-spacing:.02em;
}
.qr-card span{display:block;font-size:.82rem;color:var(--text-3)}
@media (max-width:640px){
  .qr-row{grid-template-columns:1fr;gap:16px;max-width:340px;margin-top:28px}
  .qr-card{padding:20px}
}

.footer-qr{margin-top:26px}
.footer-qr-h{
  display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-inv-3);margin-bottom:12px;
}
.footer-qr-row{display:flex;gap:14px}
.footer-qr-row figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.footer-qr-row img{
  width:84px;height:84px;object-fit:contain;display:block;
  background:#fff;border-radius:10px;padding:5px;
}
.footer-qr-row figcaption{font-size:.7rem;color:var(--text-inv-3);letter-spacing:.04em}
.footer-bot{
  border-top:1px solid rgba(255,255,255,.1);padding:22px 0;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:.78rem;color:var(--text-inv-3);
}
.footer-bot a:hover{color:#fff}
.footer-bot-links{display:flex;gap:20px;flex-wrap:wrap}

/* ---------- 20. FLOATING ACTIONS ---------- */
.float{position:fixed;right:22px;bottom:26px;z-index:900;display:flex;flex-direction:column;gap:10px}
.float a,.float button{
  width:48px;height:48px;border-radius:var(--r-sm);border:0;cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--sh-3);transition:.22s;position:relative;
}
.float svg{width:21px;height:21px}
.float-wa{background:#25D366;color:#fff}
.float-wa:hover{transform:scale(1.07)}
.float-mail{background:var(--navy);color:#fff}
.float-mail:hover{transform:scale(1.07)}
.float-top{background:#fff;color:var(--navy);border:1px solid var(--line);opacity:0;visibility:hidden}
.float-top.on{opacity:1;visibility:visible}
.float-top:hover{background:var(--orange);color:#fff;border-color:var(--orange)}
.float-tip{
  position:absolute;right:58px;top:50%;transform:translateY(-50%);
  background:var(--ink);color:#fff;font-size:.75rem;white-space:nowrap;
  padding:6px 11px;border-radius:var(--r-sm);opacity:0;visibility:hidden;transition:.2s;
}
.float a:hover .float-tip,.float button:hover .float-tip{opacity:1;visibility:visible}

/* ---------- 21. PAGE HERO (inner pages) ---------- */
.phero{position:relative;background:var(--navy) center/cover no-repeat;min-height:300px;display:flex;align-items:center;overflow:hidden}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(96deg,rgba(10,22,38,.94),rgba(10,22,38,.68))}
.phero .wrap{position:relative;z-index:2;padding-top:56px;padding-bottom:56px}
.phero h1{color:#fff;font-size:clamp(2rem,3.6vw,3.1rem)}
.phero p{color:var(--text-inv-2);margin-top:14px;max-width:660px;font-size:1rem;line-height:1.7}
.phero .eyebrow{margin-bottom:14px}
.crumb{display:flex;align-items:center;gap:9px;font-size:.78rem;color:var(--text-inv-3);margin-top:22px;flex-wrap:wrap}
.crumb a:hover{color:#fff}
.crumb svg{width:11px;height:11px;opacity:.5}
.crumb span{color:var(--amber)}

/* ---------- 22. SUB-NAV (sticky category tabs) ---------- */
.subnav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:88px;z-index:700}
.subnav-in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.subnav-in::-webkit-scrollbar{display:none}
.subnav a{
  padding:17px 18px;font-size:.845rem;font-weight:600;color:var(--text-2);
  border-bottom:3px solid transparent;white-space:nowrap;transition:.2s;
}
.subnav a:hover{color:var(--navy);background:var(--paper-2)}
.subnav a.on{color:var(--orange);border-bottom-color:var(--orange)}

/* ---------- 23. SPEC TABLE ---------- */
.spec{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.spec caption{
  text-align:left;font-family:var(--ff-display);font-size:1.15rem;font-weight:700;
  text-transform:uppercase;color:var(--navy);padding:0 0 14px;letter-spacing:.04em;
}
.spec th,.spec td{padding:13px 18px;font-size:.875rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.spec th{background:var(--paper-2);font-weight:600;color:var(--navy);width:38%;border-right:1px solid var(--line)}
.spec td{color:var(--text-2)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.spec tr:hover td{background:var(--blue-050)}

/* ---------- 24. GALLERY + LIGHTBOX ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gal-item{
  position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-sm);
  background:var(--paper-3);cursor:zoom-in;border:1px solid var(--line);
}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.gal-item:hover img{transform:scale(1.07)}
.gal-item::after{
  content:"";position:absolute;inset:0;background:rgba(10,22,38,.42);opacity:0;transition:.24s;
}
.gal-item:hover::after{opacity:1}
.gal-item i{
  position:absolute;inset:0;display:grid;place-items:center;z-index:2;opacity:0;transition:.24s;color:#fff;
}
.gal-item:hover i{opacity:1}
.gal-item svg{width:24px;height:24px}

.lb{position:fixed;inset:0;background:rgba(8,16,28,.94);z-index:2000;display:none;align-items:center;justify-content:center;padding:44px}
.lb.on{display:flex}
.lb img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:var(--r-sm)}
.lb-close,.lb-prev,.lb-next{
  position:absolute;width:48px;height:48px;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.07);color:#fff;border-radius:var(--r-sm);cursor:pointer;
  display:grid;place-items:center;transition:.2s;
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:var(--orange);border-color:var(--orange)}
.lb-close{top:26px;right:26px}
.lb-prev{left:26px;top:50%;transform:translateY(-50%)}
.lb-next{right:26px;top:50%;transform:translateY(-50%)}
.lb-close svg,.lb-prev svg,.lb-next svg{width:19px;height:19px}
.lb-count{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:var(--text-inv-3);font-family:var(--ff-mono);font-size:.8rem}

/* ---------- 25. FORMS ---------- */
.form{display:grid;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:.78rem;font-weight:600;color:var(--navy);letter-spacing:.05em;text-transform:uppercase}
.field label i{color:var(--orange);font-style:normal}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:#fff;font-size:.9rem;transition:.2s;font-family:var(--ff-body);
}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,101,176,.12);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-note{font-size:.78rem;color:var(--text-3);line-height:1.6}

/* Contact info tiles */
.info-tiles{display:grid;gap:16px}
.info-tile{display:flex;gap:16px;padding:22px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;transition:.22s}
.info-tile:hover{border-color:var(--line-2);box-shadow:var(--sh-2)}
.info-tile-ico{width:44px;height:44px;border-radius:var(--r-sm);background:var(--orange-050);display:grid;place-items:center;flex:none}
.info-tile-ico svg{width:21px;height:21px;color:var(--orange)}
.info-tile b{display:block;font-size:.9rem;color:var(--navy);margin-bottom:4px}
.info-tile p,.info-tile a{font-size:.86rem;color:var(--text-2);line-height:1.6}
.info-tile a:hover{color:var(--orange)}

/* ---------- 26. MISC ---------- */
.badge-row{display:flex;flex-wrap:wrap;gap:10px}
.badge{
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:var(--r-pill);
  background:var(--paper-2);border:1px solid var(--line);font-size:.76rem;font-weight:600;color:var(--text-2);
}
.badge svg{width:13px;height:13px;color:var(--orange)}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.tag{
  padding:5px 12px;border:1px solid var(--line);border-radius:var(--r-xs);
  font-size:.76rem;color:var(--text-2);background:#fff;
}
.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 28px}
.kv div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:.875rem}
.kv span{color:var(--text-3)}
.kv b{color:var(--navy);font-weight:600;text-align:right}
.timeline{display:grid;gap:0;border-left:2px solid var(--line);padding-left:28px;margin-left:8px}
.tl-item{position:relative;padding-bottom:32px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:-37px;top:6px;width:14px;height:14px;
  border-radius:50%;background:#fff;border:3px solid var(--orange);
}
.tl-item b{display:block;font-family:var(--ff-display);font-size:1.05rem;color:var(--navy);text-transform:uppercase;letter-spacing:.04em}
.tl-item .yr{font-family:var(--ff-mono);font-size:.76rem;color:var(--orange);font-weight:600}
.tl-item p{font-size:.9rem;color:var(--text-2);margin-top:6px;line-height:1.7}
.center{text-align:center}
.mt-s{margin-top:12px}.mt-m{margin-top:24px}.mt-l{margin-top:40px}
.mb-s{margin-bottom:12px}.mb-m{margin-bottom:24px}
/* Progressive enhancement: content is visible by default and only hidden
   once JS confirms it can run the reveal animation. */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .hero-slide.on .hero-body>*{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- 26b. RESPONSIVE COLUMN UTILITIES ----------
   Inline grid-template-columns beats media queries, so every two-column
   layout in the site uses one of these classes instead of a style attribute. */
.col-2a{display:grid;grid-template-columns:1.35fr 1fr;gap:44px;align-items:start}
.col-2b{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start}
.col-2c{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.col-3a{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.gal-2{grid-template-columns:repeat(2,1fr)}
.cert-strip--3{grid-template-columns:repeat(3,1fr)}
.aside-sticky{position:sticky;top:110px}
@media (max-width:1180px){
  .cert-strip--3{grid-template-columns:repeat(2,1fr)}
  .g4,.g5{grid-template-columns:repeat(2,1fr)}
  /* keep the full nav visible down to ~1000px by dropping the phone block */
  .header-phone{display:none}
  .header-in{gap:18px}
  .nav-link{padding:12px 10px;font-size:.815rem}
  .header-cta{gap:10px}
}
@media (max-width:960px){
  .col-2a,.col-2b,.col-2c{grid-template-columns:1fr;gap:36px}
  .col-3a{grid-template-columns:repeat(2,1fr)}
  .gal-2{grid-template-columns:repeat(2,1fr)}
  .aside-sticky{position:static;top:auto}
  .g3,.g4,.g5{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .col-3a{grid-template-columns:1fr}
  .cert-strip--3{grid-template-columns:1fr}
  .g2,.g3,.g4,.g5{grid-template-columns:1fr}
}

/* ---------- 27. RESPONSIVE ---------- */
@media (max-width:1180px){
  .mega-cols{grid-template-columns:repeat(3,1fr)}
  .mega-promo{display:none}
  .cat-grid,.prod-grid{grid-template-columns:repeat(3,1fr)}
  .adv-grid{grid-template-columns:repeat(2,1fr)}
  .adv:nth-child(2){border-right:0}
  .adv:nth-child(1),.adv:nth-child(2){border-bottom:1px solid var(--line)}
  .quote-grid{grid-template-columns:1fr 1fr}
  .footer-top{grid-template-columns:1fr 1fr;gap:36px}
}
/* The header carries four things: the lockup, the nav, the language switcher
   and the CTA. English gets away with it down to 961px, but the localised
   labels do not: at 961px the Russian header needs 968px of content inside
   905px of wrap, so the CTA was clipped from 961 to 999px (Russian "Получить
   предложение" alone is 223px against 131px for "Get a Quote"). Rather than
   tune paddings per language, the nav collapses a little earlier — 1024px is
   the natural tablet breakpoint, and the drawer already carries both the full
   menu and the language grid, so nothing is lost. */
@media (max-width:1024px){
  .nav,.header-phone{display:none}
  .header-in .lang{display:none}
  .burger{display:grid}
  .header-in{height:72px}
  .brand img{height:54px}
  .subnav{top:72px}
}
@media (max-width:960px){
  :root{--sec-y:68px}
  .topbar-r{display:none}
  .topbar .wrap{height:auto;min-height:34px;padding-top:5px;padding-bottom:5px}
  .topbar-l{gap:16px}
  .hero-stat b{white-space:nowrap}
  .hero-slides{height:clamp(460px,72vh,560px)}
  .hero-stats .wrap{grid-template-columns:1fr 1fr}
  .hero-stat:nth-child(2){border-right:0}
  .hero-stat:nth-child(1),.hero-stat:nth-child(2){border-bottom:1px solid rgba(255,255,255,.09)}
  .split{grid-template-columns:1fr;gap:44px}
  .promo-grid{grid-template-columns:1fr;gap:44px}
  .cat-grid,.prod-grid,.cert-strip{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(3,1fr)}
  .form-row{grid-template-columns:1fr}
  .sec-head-row{align-items:flex-start}
}
@media (max-width:640px){
  .wrap{padding:0 18px}
  .hero-arrow{display:none}
  .hero-body{padding-bottom:58px;gap:16px}
  .hero-nav{left:18px;right:auto;bottom:20px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .topbar-l a:nth-child(n+3){display:none}
  .brand img{height:50px}
  .footer-about .brand img{height:58px}
  .header-in{gap:14px}
  .header-cta{gap:8px}
  .header-cta .btn{padding:9px 12px;font-size:.68rem;letter-spacing:.06em}
  /* A nowrap label is a hard floor on a button's width. With the longer
     Spanish / French / Russian copy one `.btn` grew to 444px inside a 324px
     column, which widened the whole grid track and clipped the page — that was
     the last thing keeping es/about and every es|fr product page overflowing.
     Wrapping to two centred lines beats a button that runs off the screen.
     The compact header CTA is short enough to stay on one line. */
  .btn{white-space:normal;text-align:center;line-height:1.35}
  .header-cta .btn{white-space:nowrap}
  .cat-grid,.prod-grid,.cert-strip,.quote-grid,.stat-grid,.kv{grid-template-columns:1fr}
  .adv-grid{grid-template-columns:1fr}
  .adv{border-right:0;border-bottom:1px solid var(--line)}
  .adv:last-child{border-bottom:0}
  .gal{grid-template-columns:repeat(2,1fr)}
  .row{grid-template-columns:1fr;gap:12px;padding:18px 4px}
  .row-date{display:flex;align-items:baseline;gap:8px}
  .row-go{display:none}
  .footer-top{grid-template-columns:1fr}
  .hero-stats .wrap{grid-template-columns:1fr}
  .hero-stat{border-right:0;border-bottom:1px solid rgba(255,255,255,.09)}
  .split-media .badge,.split-media .badge2{position:static;margin-top:14px;display:inline-block}
  .cta-band .wrap{flex-direction:column;align-items:flex-start}
}

/* ---------- 28. MOBILE DRAWER ---------- */
.drawer{
  position:fixed;inset:0 0 0 auto;width:min(360px,88vw);background:#fff;z-index:1500;
  transform:translateX(100%);transition:transform .32s var(--ease);display:flex;flex-direction:column;
  box-shadow:var(--sh-4);
}
.drawer.on{transform:none}
.drawer-h{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer-h img{height:46px}
.drawer-x{width:38px;height:38px;border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);cursor:pointer;display:grid;place-items:center}
.drawer-x svg{width:17px;height:17px;color:var(--navy)}
.drawer-b{flex:1;overflow-y:auto;padding:12px 20px 32px}
.drawer-group{border-bottom:1px solid var(--line)}
.drawer-t{
  width:100%;background:none;border:0;text-align:left;cursor:pointer;padding:16px 30px 16px 0;
  position:relative;font-size:.95rem;font-weight:600;color:var(--navy);font-family:var(--ff-body);
}
.drawer-t::after{content:"";position:absolute;right:8px;top:50%;width:8px;height:8px;border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:translateY(-70%) rotate(45deg);transition:.25s}
.drawer-group.open .drawer-t::after{transform:translateY(-30%) rotate(-135deg)}
.drawer-sub{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.drawer-sub-in{padding:0 0 14px 4px;display:flex;flex-direction:column;gap:2px}
.drawer-sub a{padding:9px 12px;font-size:.86rem;color:var(--text-2);border-radius:var(--r-sm)}
.drawer-sub a:active{background:var(--blue-050)}
.drawer-group.open .drawer-sub{max-height:900px}
.drawer-cta{padding:20px;border-top:1px solid var(--line);display:grid;gap:10px}
.overlay{position:fixed;inset:0;background:rgba(8,16,28,.5);z-index:1400;opacity:0;visibility:hidden;transition:.3s}
.overlay.on{opacity:1;visibility:visible}
/* must track the nav collapse in the 1024px block above — if these two ever
   disagree there is a band with no nav *and* no drawer */
@media (min-width:1025px){.drawer,.overlay{display:none}}

/* ============================================================ §28 LANGUAGE */
.lang{position:relative;flex:none}
.lang-btn{
  display:flex;align-items:center;gap:6px;background:none;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:8px 10px;cursor:pointer;color:var(--navy);
  font-family:var(--ff-body);font-size:.78rem;font-weight:600;letter-spacing:.04em;
  transition:border-color .2s,background .2s;
}
.lang-btn:hover{border-color:var(--orange);background:var(--orange-050)}
.lang-btn svg{width:15px;height:15px;opacity:.75}
.lang-btn svg:last-child{width:10px;height:10px}
.lang-cur{text-transform:uppercase}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:172px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-2);
  padding:6px;list-style:none;margin:0;z-index:900;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.2s var(--ease);
}
.lang.open .lang-menu,.lang:hover .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu a{
  display:block;padding:9px 12px;border-radius:var(--r-sm);font-size:.84rem;
  color:var(--text-2);white-space:nowrap;
}
.lang-menu a:hover{background:var(--orange-050);color:var(--orange)}
.lang-menu a[aria-current="true"]{color:var(--orange);font-weight:600;background:var(--orange-050)}
.drawer-lang{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.drawer-lang-h{
  display:flex;align-items:center;gap:8px;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:10px;
}
.drawer-lang-h svg{width:15px;height:15px}
.lang-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lang-grid a{
  padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:.84rem;color:var(--text-2);text-align:center;
}
.lang-grid a[aria-current="true"]{border-color:var(--orange);color:var(--orange);font-weight:600}

/* ---------- RTL (Arabic) ---------- */
[dir="rtl"] .nav-link::after{right:auto;left:0}
[dir="rtl"] .lang-menu{right:auto;left:0}
[dir="rtl"] .drawer-t{text-align:right;padding:16px 0 16px 30px}
[dir="rtl"] .drawer-t::after{right:auto;left:8px}
[dir="rtl"] .drawer-sub-in{padding:0 4px 14px 0}
[dir="rtl"] .breadcrumb svg,[dir="rtl"] .link-arrow svg{transform:scaleX(-1)}
[dir="rtl"] .float{right:auto;left:20px}
[dir="rtl"] .subnav-in a{margin-right:0;margin-left:6px}
[dir="rtl"] .check-list li,[dir="rtl"] .badge-row,[dir="rtl"] .hero-tags{direction:rtl}
[dir="rtl"] .split{direction:rtl!important}
[dir="rtl"] .split-media,[dir="rtl"] .split-body{direction:rtl!important}
[dir="rtl"] .stat,[dir="rtl"] .hero-stat,[dir="rtl"] .cat-card,[dir="rtl"] .prod-card{text-align:right}
[dir="rtl"] .eyebrow::before{margin-right:0;margin-left:9px}
[dir="rtl"] table th,[dir="rtl"] table td{text-align:right}
[dir="rtl"] .row-go svg{transform:scaleX(-1)}
/* The timeline mirrors: rule on the right, dot hung off the right edge.
   The dot kept its `left:-37px`, which in RTL hung 9px past the *left* edge of
   the viewport — in a right-to-left document that is scrollable overflow, so
   ar/about.html was the last page still reporting scrollWidth 369 at 360px.
   (`[dir="rtl"] .timeline::before` used to sit here, but the dot lives on
   `.tl-item::before`; that rule never matched anything.) */
[dir="rtl"] .timeline{
  border-left:0;border-right:2px solid var(--line);
  padding-left:0;padding-right:28px;
  margin-left:0;margin-right:8px;
}
[dir="rtl"] .tl-item::before{left:auto;right:-37px}

@media print{
  .header,.topbar,.float,.subnav,.cta-band,.footer,.hero-arrow,.hero-nav,.lang{display:none!important}
  body{font-size:12px}
}