/* ══════════════════════════════════════════════════════════
   SHIVYA FORGE — about.css  (fixed)
   Theme: #ff6600 orange · dark grey · white | Font: Nunito
══════════════════════════════════════════════════════════ */

/* ── CSS Variables ───────────────────────────────────── */
:root {
  --orange:        #ff6600;
  --orange-dark:   #e05500;
  --orange-light:  #ff8533;
  --orange-bg:     #fff4ee;
  --grey-dark:     #1a1a2e;
  --grey-mid:      #4a4a6a;
  --grey-light:    #f4f4f6;
  --grey-border:   #e0e0e8;
  --white:         #ffffff;
  --text-primary:  #1a1a2e;
  --text-body:     #4a4a6a;
  --header-h:      76px;
  --topbar-h:      38px;
  --radius:        12px;
  --shadow-sm:     0 2px 12px rgba(0,0,0,.08);
  --shadow-md:     0 8px 32px rgba(0,0,0,.12);
  --shadow-lg:     0 20px 60px rgba(0,0,0,.18);
  --transition:    0.32s cubic-bezier(.4,0,.2,1);
  --sf-bg:         #0d0d0d;
  --sf-body:       #181818;
  --sf-border:     rgba(255,255,255,.07);
  --sf-orange:     #ff6600;
  --sf-muted:      rgba(255,255,255,.52);
  --sf-link:       rgba(255,255,255,.76);
  --sf-radius:     8px;
}

/* ── Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-primary);
  background: var(--white);
  overflow-x: hidden;
}
img  { display: block; max-width: 100%; }
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; padding: 0; margin: 0; }
p    { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* ── Utility ─────────────────────────────────────────── */
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.text-center { text-align: center; }
.orange-text { color: var(--orange); }

.section-tag {
  display: inline-block;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange);
  background: var(--orange-bg);
  border: 1.5px solid var(--orange-light);
  padding: 4px 14px;
  border-radius: 50px;
  margin-bottom: 14px;
}
.section-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.22;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.section-title em { font-style: normal; color: var(--orange); }
.section-subtitle {
  font-size: 1rem;
  color: var(--text-body);
  max-width: 680px;
  margin: 0 auto 48px;
}
.section-head { margin-bottom: 48px; }
.section-head .section-subtitle { margin-bottom: 0; }

/* ── Buttons ─────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange);
  color: var(--white);
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: .92rem;
  padding: 13px 28px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 20px rgba(255,102,0,.35);
  margin-top: 24px;
}
.btn-primary:hover {
  background: var(--orange-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255,102,0,.45);
}
.btn-cta {
  display: inline-block;
  background: var(--orange);
  color: var(--white);
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  padding: 10px 22px;
  border-radius: 50px;
  white-space: nowrap;
  transition: background var(--transition), box-shadow var(--transition);
  box-shadow: 0 3px 14px rgba(255,102,0,.3);
}
.btn-cta:hover { background: var(--orange-dark); box-shadow: 0 6px 20px rgba(255,102,0,.4); }

/* ══════════════════════════════════════════════════════════
   TOP BAR
══════════════════════════════════════════════════════════ */
.top-bar {
  background: var(--grey-dark);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  position: relative;
  z-index: 110;
}
.top-bar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
}
.top-bar__inner {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.top-bar__item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  color: rgba(255,255,255,.75);
  font-weight: 500;
  line-height: 1;
}
.top-bar__item svg {
  color: var(--orange);
  flex-shrink: 0;
  display: block;
  align-self: center;
}
.top-bar__item a   { color: var(--orange); font-weight: 700; transition: color var(--transition); }
.top-bar__item a:hover { color: var(--orange-light); }

/* ══════════════════════════════════════════════════════════
   HEADER
   Z-INDEX STACKING (clean, no conflicts):
     .header           → 300  (sticky, always on top of page)
     .hamburger        → 310  (inside header, above everything when open)
     .nav (mobile)     → 250  (slides in from right, below header)
     .nav-overlay      → 200  (dim layer, below nav panel & header)
══════════════════════════════════════════════════════════ */
.header {
  position: sticky;
  top: 0;
  z-index: 300;
  background: var(--white);
  height: var(--header-h);
  box-shadow: 0 2px 20px rgba(0,0,0,.10);
  transition: box-shadow var(--transition), height var(--transition);
}
.header.scrolled {
  height: 64px;
  box-shadow: 0 4px 28px rgba(0,0,0,.15);
}
.header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* ── Logo ── */
.header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  /* FIX: No explicit z-index here. The logo lives inside .header (z:300)
     which already sits above the overlay (z:200) and nav panel (z:250).
     Giving the logo its own z-index:310 caused it to punch THROUGH the
     nav panel on mobile. Removing it fixes the bleed. */
}
.logo-img {
  height: 54px;
  width: auto;
  object-fit: contain;
  transition: height var(--transition);
  display: block;
}
.header.scrolled .logo-img { height: 44px; }
.logo-fallback { display: none; flex-direction: column; line-height: 1; }
.logo-fallback__main { font-size: 1.4rem; font-weight: 900; color: var(--text-primary); letter-spacing: .03em; }
.logo-o { color: var(--orange); }
.logo-fallback__sub { font-size: .65rem; font-weight: 700; color: var(--orange); letter-spacing: .2em; text-transform: uppercase; }

/* ── Nav (desktop) ── */
.nav { display: flex; align-items: center; gap: 8px; }
.nav__list { display: flex; align-items: center; gap: 0; }
.nav__link {
  display: block;
  padding: 8px 13px;
  font-size: .87rem;
  font-weight: 700;
  color: var(--text-body);
  position: relative;
  transition: color var(--transition);
  white-space: nowrap;
}
.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; right: 50%;
  height: 2.5px;
  background: var(--orange);
  border-radius: 2px;
  transition: left var(--transition), right var(--transition);
}
.nav__link:hover, .nav__link.active { color: var(--orange); }
.nav__link:hover::after, .nav__link.active::after { left: 13px; right: 13px; }

/* ── Mobile nav header (logo row inside panel) ── */
/* FIX: Hidden on desktop — only shown inside the mobile nav panel */
.nav__mobile-header { display: none; }

/* ── Hamburger ── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  /* FIX: z-index:310 — above the nav panel (250) so the × button
     remains tappable when the menu is open. The header (300) provides
     the base stacking context, so this only needs to beat the nav panel. */
  position: relative;
  z-index: 310;
}
.hamburger span {
  display: block;
  width: 26px;
  height: 2.5px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
  transform-origin: center;
}
/* FIX: Animate to a proper × (X) shape */
.hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ══════════════════════════════════════════════════════════
   NAV OVERLAY
   FIX: visibility+opacity toggle so transitions are smooth
   and pointer-events are off when hidden.
══════════════════════════════════════════════════════════ */
.nav-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.5);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition), visibility var(--transition);
}
.nav-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* ══════════════════════════════════════════════════════════
   ABOUT HERO BANNER
══════════════════════════════════════════════════════════ */
.about-hero {
  position: relative;
  height: 420px;
  overflow: hidden;
}
.about-hero__img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.about-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(10,10,20,.72) 0%, rgba(255,102,0,.18) 60%, rgba(10,10,20,.60) 100%);
}
.about-hero__content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 24px;
}
.about-hero__title {
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  font-weight: 900; color: var(--white);
  line-height: 1.12; letter-spacing: -.01em;
  text-shadow: 0 4px 24px rgba(0,0,0,.5);
  animation: heroFadeUp .8s ease both;
}
.about-hero__line {
  width: 80px; height: 4px;
  background: var(--orange); border-radius: 4px;
  margin-top: 20px;
  animation: heroFadeUp .9s .15s ease both;
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════
   WHO WE ARE
══════════════════════════════════════════════════════════ */
.who-we-are { padding: 96px 0; background: var(--white); }
.who-we-are__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.who-we-are__img-wrap { position: relative; border-radius: 20px; overflow: visible; }
.who-we-are__img {
  width: 100%; height: 480px;
  object-fit: cover; border-radius: 20px;
  box-shadow: var(--shadow-lg); display: block;
}
.who-we-are__badge {
  position: absolute; bottom: -24px; right: -24px;
  background: var(--orange); color: var(--white);
  border-radius: 16px; padding: 20px 24px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 12px 40px rgba(255,102,0,.45);
  min-width: 150px;
}
.badge-num { font-size: 2.4rem; font-weight: 900; line-height: 1; }
.badge-num sup { font-size: 1.2rem; }
.badge-label { font-size: .8rem; font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: .06em; }
.who-we-are__text { padding-left: 8px; }
.who-we-are__text p { color: var(--text-body); }

/* ══════════════════════════════════════════════════════════
   FACILITIES
══════════════════════════════════════════════════════════ */
.facilities { padding: 96px 0; background: var(--grey-light); position: relative; overflow: hidden; }
.facilities::before {
  content: '';
  position: absolute; top: -80px; right: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,102,0,.08) 0%, transparent 70%);
  pointer-events: none;
}
.facilities__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.facility-card {
  background: var(--white); border-radius: var(--radius);
  padding: 28px 24px;
  display: flex; align-items: center; gap: 18px;
  border: 1.5px solid var(--grey-border);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.facility-card:hover { border-color: var(--orange); box-shadow: 0 8px 32px rgba(255,102,0,.12); transform: translateY(-4px); }
.facility-card__icon {
  flex-shrink: 0; width: 52px; height: 52px;
  background: var(--orange-bg); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--orange); transition: background var(--transition);
}
.facility-card:hover .facility-card__icon { background: var(--orange); color: var(--white); }
.facility-card__icon svg { width: 24px; height: 24px; }
.facility-card h3 { font-size: .95rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; }

/* ══════════════════════════════════════════════════════════
   INDUSTRIES
══════════════════════════════════════════════════════════ */
.industries { padding: 96px 0; background: var(--white); }
.industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.industry-card {
  border-radius: var(--radius); overflow: hidden;
  border: 1.5px solid var(--grey-border);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
  background: var(--white);
}
.industry-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.12); transform: translateY(-6px); border-color: var(--orange); }
.industry-card__img-wrap { height: 180px; overflow: hidden; background: var(--grey-light); position: relative; }
.industry-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.industry-card:hover .industry-card__img-wrap img { transform: scale(1.06); }
.industry-card__img-wrap.img-error {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--grey-dark) 0%, #2a2a4a 100%);
}
.industry-card__img-wrap.img-error::after { content: '⚙'; font-size: 3rem; opacity: .3; }
.industry-card__body { padding: 18px 20px; position: relative; }
.industry-card__body::before {
  content: ''; position: absolute; top: 0; left: 20px;
  width: 36px; height: 3px; background: var(--orange); border-radius: 2px;
}
.industry-card__body h3 { font-size: .95rem; font-weight: 800; color: var(--text-primary); margin-top: 8px; }

/* ══════════════════════════════════════════════════════════
   QUALITY + VALUES
══════════════════════════════════════════════════════════ */
.quality-values { padding: 96px 0; background: var(--grey-light); }
.qv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.qv-card {
  background: var(--white); border-radius: 20px;
  padding: 48px 44px; border: 1.5px solid var(--grey-border);
  transition: box-shadow var(--transition);
}
.qv-card:hover { box-shadow: var(--shadow-md); }
.qv-card__icon {
  width: 64px; height: 64px; background: var(--orange-bg);
  border-radius: 16px; display: flex; align-items: center;
  justify-content: center; color: var(--orange); margin-bottom: 20px;
}
.qv-card p { color: var(--text-body); }
.qv-checks { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.qv-checks li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .92rem; color: var(--text-primary); }
.check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; background: var(--orange); color: var(--white);
  border-radius: 50%; font-size: .7rem; font-weight: 900; flex-shrink: 0;
}
.values-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.pill {
  background: var(--orange-bg); color: var(--orange);
  border: 1.5px solid var(--orange-light); border-radius: 50px;
  padding: 6px 18px; font-size: .82rem; font-weight: 800; letter-spacing: .04em;
}

/* ══════════════════════════════════════════════════════════
   PRODUCTS SECTION
══════════════════════════════════════════════════════════ */
.products-section { padding: 96px 0; background: var(--white); }
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.product-card {
  background: var(--white); border: 1.5px solid var(--grey-border);
  border-radius: 16px; padding: 32px 28px;
  display: flex; flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
  position: relative; overflow: hidden;
}
.product-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--orange);
  transform: scaleX(0); transform-origin: left; transition: transform var(--transition);
}
.product-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.10); transform: translateY(-6px); border-color: transparent; }
.product-card:hover::before { transform: scaleX(1); }
.product-card__top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.product-card__num { font-size: 2.5rem; font-weight: 900; color: var(--orange-bg); line-height: 1; flex-shrink: 0; user-select: none; transition: color var(--transition); }
.product-card:hover .product-card__num { color: rgba(255,102,0,.15); }
.product-card__title { font-size: 1.05rem; font-weight: 800; color: var(--text-primary); line-height: 1.3; padding-top: 6px; }
.product-card__desc { font-size: .88rem; color: var(--text-body); line-height: 1.7; flex: 1; margin-bottom: 20px; }
.product-card__link { font-size: .85rem; font-weight: 800; color: var(--orange); display: inline-block; transition: letter-spacing var(--transition); }
.product-card__link:hover { letter-spacing: .04em; }
.products-grid > .product-card:last-child:nth-child(3n - 2) { grid-column: 1 / -1; max-width: 440px; }

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
.footer { background: var(--sf-bg); color: var(--sf-link); }
.footer__body { background: var(--sf-body); border-top: 1px solid var(--sf-border); }
.footer__inner {
  max-width: 1280px; margin: 0 auto;
  padding: 72px 24px 56px;
  display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 48px;
}
.footer__logo-link { display: inline-flex; align-items: center; margin-bottom: 20px; }
.footer__logo-img { height: 60px; width: auto; object-fit: contain; display: block; }
.footer__logo-fallback { display: none; flex-direction: column; line-height: 1; }
.flf__main { font-size: 1.5rem; font-weight: 900; color: var(--white); }
.flf__o { color: var(--sf-orange); }
.flf__sub { font-size: .62rem; font-weight: 700; color: var(--sf-orange); letter-spacing: .22em; text-transform: uppercase; }
.footer__about { font-size: .88rem; line-height: 1.75; color: var(--sf-muted); margin-bottom: 24px; }
.footer__about strong { color: rgba(255,255,255,.85); }
.footer__socials { display: flex; gap: 10px; }
.social-btn {
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--sf-muted);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.social-btn:hover { background: var(--sf-orange); color: var(--white); border-color: var(--sf-orange); }
.footer__heading {
  font-size: .7rem; font-weight: 900; letter-spacing: .14em;
  text-transform: uppercase; color: var(--white);
  margin-bottom: 20px; padding-bottom: 12px;
  border-bottom: 1.5px solid var(--sf-orange); display: inline-block;
}
.footer__links { display: flex; flex-direction: column; gap: 10px; }
.footer__links li a { font-size: .88rem; color: var(--sf-link); transition: color var(--transition), padding-left var(--transition); display: block; }
.footer__links li a:hover { color: var(--sf-orange); padding-left: 6px; }
.footer__contact-list { display: flex; flex-direction: column; gap: 18px; }
.footer__contact-list li { display: flex; align-items: flex-start; gap: 12px; }
.footer__contact-icon {
  width: 36px; height: 36px; background: rgba(255,102,0,.15); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--sf-orange); flex-shrink: 0; margin-top: 2px;
}
.footer__contact-label { display: block; font-size: .65rem; font-weight: 800; letter-spacing: .12em; color: var(--sf-orange); text-transform: uppercase; margin-bottom: 2px; }
.footer__contact-list a, .footer__contact-list span { font-size: .88rem; color: var(--sf-link); line-height: 1.5; }
.footer__contact-list a:hover { color: var(--sf-orange); }
.footer__bottom { border-top: 1px solid var(--sf-border); padding: 18px 0; }
.footer__bottom-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; font-size: .8rem; color: var(--sf-muted);
}
.heart { color: #e05555; }

/* ══════════════════════════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════════════════════════ */
.reveal-up,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition: opacity .65s ease, transform .65s ease;
  transition-delay: var(--delay, 0s);
}
.reveal-up    { transform: translateY(40px); }
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }

.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: translate(0, 0);
}

.no-js .reveal-up,
.no-js .reveal-left,
.no-js .reveal-right {
  opacity: 1;
  transform: none;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

/* ── Tablet (≤1024px) ── */
@media (max-width: 1024px) {
  .who-we-are__grid  { grid-template-columns: 1fr; gap: 48px; }
  .who-we-are__img-wrap { max-width: 560px; margin: 0 auto; }
  .who-we-are__img   { height: 360px; }
  .who-we-are__badge { bottom: -20px; right: -12px; }
  .who-we-are__text  { padding-left: 0; }
  .facilities__grid  { grid-template-columns: repeat(2, 1fr); }
  .industries__grid  { grid-template-columns: repeat(2, 1fr); }
  .qv-grid           { grid-template-columns: 1fr; }
  .products-grid     { grid-template-columns: repeat(2, 1fr); }
  .footer__inner     { grid-template-columns: 1fr 1fr; }
  .footer__col--brand { grid-column: 1 / -1; }
}

/* ── Mobile Nav (≤900px) ── */
@media (max-width: 900px) {
  .hamburger { display: flex; }

  /* FIX: The header logo is now HIDDEN on mobile when the nav is open
     so it cannot bleed through. Instead the nav panel shows its own
     logo row (.nav__mobile-header) at the top. */
  .header__logo {
    /* Logo stays visible in header at all times on mobile —
       it's the nav panel that now owns its own logo copy.
       The header (z:300) sits ABOVE the nav (z:250) so the header
       logo would show on top of the nav panel. We solve this by
       keeping the header logo visible (it's in the header bar, not
       overlapping the panel) and the panel starts below the header. */
    position: relative;
    z-index: auto; /* reset — header context handles stacking */
  }

  .nav {
    position: fixed;
    /* FIX: Start below the sticky header so the panel never
       goes behind or overlaps the header bar */
    top: 0;
    right: -100%;
    width: min(320px, 88vw);
    height: 100vh;
    height: 100dvh;
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    /* FIX: padding-top accounts for the logo row inside the panel */
    padding: 0 0 40px;
    box-shadow: -8px 0 40px rgba(0,0,0,.16);
    transition: right var(--transition);
    gap: 0;
    overflow-y: auto;
    /* FIX: z-index 250 — below header (300) so header bar always
       shows on top; above overlay (200) so panel is in front of dim */
    z-index: 250;
  }
  .nav.open { right: 0; }

  /* ── Mobile nav logo row ── */
  /* FIX: This shows the logo + close cue inside the nav panel,
     so the header logo doesn't need to float above the panel. */
  .nav__mobile-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 20px 24px 16px;
    border-bottom: 1.5px solid var(--grey-border);
    margin-bottom: 8px;
    background: var(--white);
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .nav__mobile-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
  }
  .nav__mobile-logo img {
    height: 40px;
    width: auto;
    object-fit: contain;
    display: block;
  }

  .nav__list  {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 0;
    padding: 0 24px;
  }
  .nav__link  {
    font-size: 1.05rem;
    padding: 14px 0;
    width: 100%;
    border-bottom: 1px solid var(--grey-border);
  }
  .nav__link::after { display: none; }
  .btn-cta {
    margin: 24px 24px 0;
    width: calc(100% - 48px);
    text-align: center;
    padding: 14px;
    font-size: .95rem;
  }
}

/* ── Mobile (≤640px) ── */
@media (max-width: 640px) {
  .top-bar { height: auto; padding: 6px 0; }
.top-bar__inner { gap: 14px; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; }
  .top-bar__item  { font-size: .72rem; white-space: nowrap; }
  .about-hero { height: 300px; }
  .about-hero__title { font-size: 2rem; }
  .who-we-are { padding: 64px 0; }
  .who-we-are__img { height: 260px; }
  .who-we-are__badge { bottom: -16px; right: 12px; padding: 14px 18px; }
  .badge-num { font-size: 1.8rem; }
  .facilities { padding: 64px 0; }
  .facilities__grid { grid-template-columns: 1fr; }
  .facility-card { padding: 20px 18px; }
  .industries { padding: 64px 0; }
  .industries__grid { grid-template-columns: 1fr; }
  .quality-values { padding: 64px 0; }
  .qv-card { padding: 32px 24px; }
  .products-section { padding: 64px 0; }
  .products-grid { grid-template-columns: 1fr; }
  .products-grid > .product-card:last-child:nth-child(3n - 2) { grid-column: auto; max-width: 100%; }
  .footer__inner { grid-template-columns: 1fr; gap: 32px; }
  .footer__col--brand { grid-column: auto; }
  .footer__bottom-inner { flex-direction: column; text-align: center; gap: 8px; }
}