/* =====================================================
   MISHKAT PIPE FITTINGS CO — Design System
   Industrial Dark Theme | Brand Red + Gold
   Rajdhani (Display) + Inter (Body)
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* ── Design Tokens ────────────────────────────────── */
:root {
  /* Light color palette */
  --bg:       #FDFCFB;
  --bg-2:     #F5F5F5;
  --bg-3:     #EDEDEF;
  --bg-4:     #E2E2E4;
  --bg-5:     #D6D6D8;

  --red:        #C91A1A;
  --red-hi:     #E02525;
  --red-muted:  rgba(201,26,26,0.08);
  --red-border: rgba(201,26,26,0.22);
  --red-glow:   rgba(201,26,26,0.12);

  --gold:        #B07D06;
  --gold-hi:     #C98F08;
  --gold-muted:  rgba(176,125,6,0.10);

  --text:   #111111;
  --text-2: #2a2a2a;
  /* --text-3 is the site's "muted/secondary" text color — nav subtitle,
     breadcrumbs, table data values, footer fine print, card captions.
     It gets used identically inside both light sections and dark
     (.theme-dark) sections across every page, so a plain gray here
     always fails badly on one side or the other (invisible dark-gray
     on the near-black sections, per the resources.html pressure table
     and every product page's spec table; too-pale gray on light cards
     otherwise). Using one warm-gold brand accent instead reads clearly
     against both #FDFCFB (light theme bg) and #141414 (dark section
     bg) without needing a theme-conditional override. */
  --text-3: #A67C1A;
  --text-inv: #FFFFFF;

  --border:   rgba(0,0,0,0.08);
  --border-2: rgba(0,0,0,0.14);

  --ff-d: 'Rajdhani', sans-serif;
  --ff-b: 'Inter', sans-serif;

  --nav-h: 68px;
  --max-w: 1200px;
  --section-py: 96px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7,  0, 0.84, 1);
}

/* ── Reset ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff-b);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: var(--ff-b); border: none; background: none; }
input, textarea, select { font-family: var(--ff-b); }
ul { list-style: none; }

/* ── Typography ───────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--ff-d);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.8rem, 7.5vw, 6.2rem); }
h2 { font-size: clamp(2rem,   4vw,  3.6rem); }
h3 { font-size: clamp(1.4rem, 2.5vw,2rem); }
h4 { font-size: 1.2rem; }
p  { color: var(--text-2); line-height: 1.75; }

/* ── Layout ───────────────────────────────────────── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.section    { padding: var(--section-py) 0; border-top: 1px solid var(--border); }

.section.theme-dark {
  background: #141414;
  color: #f0f0f0;
}
.section.theme-dark h1,
.section.theme-dark h2,
.section.theme-dark h3,
.section.theme-dark h4 {
  color: #ffffff;
}
.section.theme-dark p,
.section.theme-dark li {
  color: #D4D4D4 !important;
  line-height: 1.8;
}

/* Light "floating" cards — these always keep a light card surface
   (background never flips dark in dark sections), so their text must
   stay dark for readability, regardless of which section they're in. */
.section.theme-dark .info-card p,
.section.theme-dark .product-full-card p,
.section.theme-dark .std-card p,
.section.theme-dark .quality-card p,
.section.theme-dark .industry-card p {
  color: #444444 !important;
}
.section.theme-dark .info-card h4,
.section.theme-dark .product-full-card h3,
.section.theme-dark .std-card h4,
.section.theme-dark .quality-card h4,
.section.theme-dark .industry-card h4 {
  color: var(--text);
}
.section.theme-dark .feature-item strong {
  color: #E8B800 !important;
}
.section.theme-dark .feature-item p {
  color: #D4D4D4 !important;
}
.section.theme-dark .doc-card .doc-title {
  color: #181818 !important;
}
.section.theme-dark .doc-card .doc-caption {
  color: #8A6208 !important;
}
.doc-card { transition: border-color 0.2s, background 0.2s; }
.doc-card:hover { border-color: var(--red); }
.doc-title { font-weight: 600; font-size: 0.88rem; margin-bottom: 2px; }
.doc-caption { font-size: 0.76rem; }

/* Dark cards — these get their background flipped to near-black in dark
   sections (below), so their text should stay LIGHT — handled already by
   the generic ".section.theme-dark p" rule above. No override here. */
.section.theme-dark .product-card,
.section.theme-dark .why-card,
.section.theme-dark .cert-card {
  background: #1E1E1E;
  border-color: rgba(255,255,255,0.09);
}
.section.theme-dark .product-card h3 { color: #FFFFFF; }

.product-card p,
.info-card p,
.why-card p,
.product-full-card p,
.std-card p,
.quality-card p,
.industry-card p {
  color: #444444;
}

.section-tag {
  display: inline-block;
  font-family: var(--ff-b);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1rem;
}
.section-head {
  margin-bottom: 3.5rem;
}
.section-head h2 { margin-bottom: 1rem; }
.section-head p  { max-width: 55ch; font-size: 1.05rem; }

/* ── Navbar ───────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 900;
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border);
  transition: background 0.4s var(--ease-out), box-shadow 0.4s;
}
.navbar.scrolled {
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid rgba(201,26,26,0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--border-2), 0 4px 20px rgba(0,0,0,0.05);
}
.nav-inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 28px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo-icon {
  width: 40px;
  height: 40px;
  background: var(--red);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-d);
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  letter-spacing: 0.05em;
}
.nav-logo-text { font-family: var(--ff-d); font-weight: 700; font-size: 1.15rem; line-height: 1.15; color: var(--red); }
.nav-logo-text span { display: block; font-size: 0.7rem; font-weight: 400; color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible; /* was overflow-x: auto — that clipped the dropdown menus */
}
.nav-links a, .nav-dropdown > button {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--red);
  padding: 8px 12px;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-links a:hover,
.nav-links a.active,
.nav-dropdown > button:hover {
  color: var(--gold-hi);
  background: var(--red-muted);
}
.nav-dropdown {
  position: relative;
  flex-shrink: 0;
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  padding: 8px;
  min-width: 210px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.click-open .nav-dropdown-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.nav-dropdown-menu a {
  display: block;
  padding: 8px 12px !important;
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--red) !important;
}
.nav-dropdown-menu a:nth-child(even) { color: var(--gold-hi) !important; }
.nav-dropdown-menu a:hover { background: var(--red-muted) !important; color: var(--gold-hi) !important; }
.nav-dropdown-menu a:nth-child(even):hover { color: var(--red) !important; background: var(--gold-muted) !important; }
.nav-chevron { font-size: 0.7rem; margin-left: 4px; display: inline-block; transition: transform 0.2s; }
.nav-dropdown:hover .nav-chevron { transform: rotate(180deg); }

.nav-cta {
  background: var(--red);
  color: #fff !important;
  padding: 9px 18px !important;
  border-radius: 5px;
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s !important;
}
.nav-cta:hover { background: var(--red-hi) !important; transform: translateY(-1px) !important; }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: none;
  border: none;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  background: rgba(8,8,8,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  padding: 16px 24px 24px;
  z-index: 899;
  flex-direction: column;
  gap: 4px;
  transform: translateY(-20px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s var(--ease-out);
}
.mobile-menu.open {
  display: flex;
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

/* The menu is fixed-position and, with every section expanded, taller than a
   phone screen — without a height cap it ran off the bottom and the lower
   entries were unreachable. Cap it to the space below the navbar and scroll. */
.mobile-menu {
  max-height: calc(100vh - var(--nav-h));
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu a, .mobile-menu button {
  display: block;
  padding: 12px 0;
  font-size: 1rem;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  text-align: left;
  width: 100%;
  font-family: var(--ff-b);
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
}
.mobile-menu .mobile-cta {
  margin-top: 12px;
  background: var(--red);
  color: #fff;
  padding: 13px;
  border-radius: 6px;
  text-align: center;
  font-weight: 600;
  border-bottom: none;
}
.mobile-menu-sub-label {
  display: block;
  font-size: 0.65rem;
  color: var(--red);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 12px 0 4px;
  border-bottom: none !important;
}
.mobile-sub {
  padding-left: 14px !important;
  font-size: 0.9rem !important;
  color: var(--text-3, #888) !important;
}
.mobile-sub:hover { color: var(--text) !important; }

/* ── Hero ─────────────────────────────────────────── */
.hero {
  position: relative;
  height: 100dvh;
  min-height: 650px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(201,26,26,0.05) 0%, transparent 60%),
              linear-gradient(to bottom, transparent 50%, var(--bg) 100%);
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
  padding-top: var(--nav-h);
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid var(--border-2);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 2rem;
  background: rgba(255,255,255,0.03);
}
.hero-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  animation: pulse-gold 2s infinite;
}
.hero-title {
  font-size: clamp(2.8rem, 7vw, 7rem);
  font-family: var(--ff-d);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
}
.hero-title .line-1 { display: block; color: var(--text); }
.hero-title .line-2 { display: block; color: var(--red); }
.hero-sub {
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  color: var(--text-2);
  max-width: 52ch;
  margin-bottom: 2.5rem;
  line-height: 1.7;
}
.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 3rem;
}
.hero-visual-frame {
  border: 1px solid var(--border-2);
  background: rgba(255,255,255,0.03);
  padding: 10px;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4/5;
  max-width: 380px;
  margin-left: auto;
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
}
.hero-visual-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
}
.product-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.product-photo-card {
  display: block;
  text-decoration: none;
  border: 1px solid var(--border-2);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-3);
  transition: border-color 0.3s, transform 0.3s;
}
.product-photo-card:hover { border-color: var(--red); transform: translateY(-4px); }
.product-photo-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-out);
}
.product-photo-card:hover img { transform: scale(1.06); }
.product-photo-card-label {
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--ff-d);
  font-weight: 700;
  color: var(--text);
}
.product-photo-card-label span:last-child { color: var(--red); }
@media (max-width: 768px) {
  .product-photo-grid { grid-template-columns: 1fr; }
}
.scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.scroll-cue span {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.scroll-cue-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--text-3), transparent);
  animation: scroll-cue 2s ease-in-out infinite;
}

/* ── Buttons ──────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-d);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.03em;
  padding: 13px 26px;
  border-radius: 5px;
  transition: all 0.2s var(--ease-out);
  white-space: nowrap;
}
.btn-primary {
  background: var(--red);
  color: #fff;
}
.btn-primary:hover { background: var(--red-hi); transform: translateY(-2px); box-shadow: 0 8px 24px var(--red-glow); }
.btn-outline {
  border: 1px solid var(--border-2);
  color: var(--text);
  background: transparent;
}
.btn-outline:hover { border-color: var(--red-border); color: var(--red); background: var(--red-muted); transform: translateY(-2px); }
.btn-sm { padding: 9px 18px; font-size: 0.88rem; }
.btn-ghost { color: var(--text-2); padding: 10px 0; }
.btn-ghost:hover { color: var(--red); }
.btn-arrow::after { content: '→'; transition: transform 0.2s; }
.btn-arrow:hover::after { transform: translateX(4px); }

/* ── Marquee ──────────────────────────────────────── */
.marquee-strip {
  background: var(--bg-3);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  animation: marquee 28s linear infinite;
}
.marquee-track span {
  font-family: var(--ff-d);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0 28px;
}
.marquee-track span.accent { color: var(--red); }
.marquee-track .dot { color: var(--red); padding: 0 8px; }

/* ── Stats ────────────────────────────────────────── */
.stats-section {
  padding: var(--section-py) 0;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.stat-item {
  text-align: center;
  padding: 2.5rem 2rem;
  border-right: 1px solid var(--border);
}
.stat-item:last-child { border-right: none; }
.stat-number {
  font-family: var(--ff-d);
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.stat-number span { color: var(--red); }
.stat-label {
  font-size: 0.82rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}

/* ── Product Cards ────────────────────────────────── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: var(--border);
}
.product-card {
  background: var(--bg-2);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  overflow: hidden;
  transition: background 0.3s, transform 0.4s var(--ease-out);
  cursor: pointer;
  transform-style: preserve-3d;
}
.product-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.product-card:hover { background: var(--bg-3); }
.product-card:hover::before { transform: scaleX(1); }
.product-card-icon {
  width: 72px;
  height: 72px;
  color: var(--red);
}
.product-card-icon svg {
  width: 100%;
  height: 100%;
}
.product-card-icon svg path,
.product-card-icon svg circle,
.product-card-icon svg line,
.product-card-icon svg rect,
.product-card-icon svg ellipse {
  stroke-dasharray: var(--dash-len, 500);
  stroke-dashoffset: var(--dash-len, 500);
  transition: stroke-dashoffset 1.2s var(--ease-out);
}
.product-card.draw-in .product-card-icon svg path,
.product-card.draw-in .product-card-icon svg circle,
.product-card.draw-in .product-card-icon svg line,
.product-card.draw-in .product-card-icon svg rect,
.product-card.draw-in .product-card-icon svg ellipse {
  stroke-dashoffset: 0;
}
.product-card h3 {
  font-size: 1.4rem;
  transition: color 0.2s;
}
.product-card:hover h3 { color: var(--red); }
.product-card p { font-size: 0.9rem; flex-grow: 1; }
.product-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-3);
  font-family: var(--ff-d);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.2s, gap 0.2s;
}
.product-card:hover .product-card-link { color: var(--red); gap: 10px; }
.theme-dark .product-card-link { color: #999999; }

/* Products filter page */
.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}
.filter-btn {
  font-family: var(--ff-d);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 8px 20px;
  border-radius: 4px;
  border: 1px solid var(--border-2);
  color: var(--text-2);
  transition: all 0.2s;
}
.filter-btn:hover { border-color: var(--red-border); color: var(--text); }
.filter-btn.active { background: var(--red); border-color: var(--red); color: #fff; }

.products-full-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 1.5px;
  background: var(--border);
}
.product-full-card {
  background: var(--bg-2);
  padding: 2rem 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  cursor: pointer;
  transition: background 0.3s;
  position: relative;
}
.product-full-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.product-full-card:hover { background: var(--bg-3); }
.product-full-card:hover::before { transform: scaleX(1); }

.product-full-card .icon-wrap {
  width: 56px;
  height: 56px;
  background: var(--red-muted);
  border: 1px solid var(--red-border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  font-size: 1.5rem;
}
.product-full-card h3 { font-size: 1.3rem; }
.product-full-card p { font-size: 0.88rem; flex-grow: 1; }
.product-full-card .tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.product-tag {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--bg-5);
  color: var(--text-3);
  border: 1px solid var(--border);
  padding: 3px 9px;
  border-radius: 3px;
}
.product-full-card .card-footer {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* ── Industries ───────────────────────────────────── */
.industries-section { background: var(--bg-3); }
.industries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 1px;
  background: var(--border);
}
.industry-card {
  background: var(--bg-3);
  padding: 2rem 2rem 1.75rem;
  transition: background 0.3s;
  position: relative;
  overflow: hidden;
}
.industry-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.industry-card:hover { background: var(--bg-4); }
.industry-card:hover::after { transform: scaleX(1); }
.industry-icon {
  font-size: 2.2rem;
  margin-bottom: 1rem;
  display: block;
}
.industry-card h4 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  font-family: var(--ff-d);
}
.industry-card p { font-size: 0.88rem; }
.featured-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(200,145,10,0.3);
  background: rgba(200,145,10,0.08);
  padding: 3px 8px;
  border-radius: 3px;
  margin-top: 8px;
}

/* ── Why MPF ──────────────────────────────────────── */
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5px;
  background: var(--border);
}
.why-card {
  background: var(--bg-2);
  padding: 2.5rem;
  transition: background 0.3s;
}
.why-card:hover { background: var(--bg-3); }
.why-number {
  font-family: var(--ff-d);
  font-size: 3rem;
  font-weight: 700;
  color: #C91A1A;
  line-height: 1;
  margin-bottom: 1rem;
}
.why-card h4 { font-size: 1.3rem; margin-bottom: 0.6rem; }

.section.theme-dark .why-card h4 {
  color: #E8B800 !important;
}

/* ── Certifications ───────────────────────────────── */
.cert-section {
  background: var(--bg-2);
  padding: 5rem 0;
  border-top: 1px solid var(--border);
}
.cert-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}
.cert-text h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); }
.cert-badges {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
.cert-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 1.2rem 1.5rem;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  background: var(--bg-3);
  min-width: 110px;
}
.cert-badge .cert-icon { width: 34px; height: 34px; color: var(--gold); display: flex; align-items: center; justify-content: center; }
.cert-badge .cert-icon svg { width: 100%; height: 100%; }
.cert-badge .cert-name { font-family: var(--ff-d); font-weight: 700; font-size: 1rem; color: var(--gold); }
.cert-badge .cert-desc { font-size: 0.7rem; color: var(--text-3); text-align: center; }

/* ── CTA Banner ───────────────────────────────────── */
.cta-banner {
  background: var(--red);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: 'MPF';
  position: absolute;
  font-family: var(--ff-d);
  font-size: 18rem;
  font-weight: 700;
  color: rgba(255,255,255,0.04);
  right: -2rem;
  top: 50%;
  transform: translateY(-50%);
  letter-spacing: -0.05em;
  pointer-events: none;
}
.cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.cta-inner h2 { color: #fff; }
.cta-inner p { color: rgba(255,255,255,0.7); max-width: 44ch; margin-top: 0.6rem; }
.cta-buttons { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }
.btn-white { background: #fff; color: var(--red); font-weight: 700; }
.btn-white:hover { background: rgba(255,255,255,0.88); transform: translateY(-2px); }
.btn-white-outline { border: 2px solid rgba(255,255,255,0.5); color: #fff; }
.btn-white-outline:hover { border-color: #fff; background: rgba(255,255,255,0.1); }

/* ── Footer ───────────────────────────────────────── */
footer {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding: 5rem 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem;
  margin-bottom: 4rem;
}
.footer-brand p { font-size: 0.88rem; margin-top: 1rem; max-width: 34ch; }
.footer-social { display: flex; gap: 10px; margin-top: 1.5rem; }
.social-link {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-2);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--text-2);
  transition: all 0.2s;
}
.social-link:hover { border-color: var(--red-border); color: var(--red); background: var(--red-muted); }

.footer-col h5 {
  font-family: var(--ff-d);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1.2rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a {
  font-size: 0.88rem;
  color: var(--text-2);
  transition: color 0.2s;
}
.footer-col ul a:hover { color: var(--text); }

.footer-contact-item {
  display: flex;
  gap: 10px;
  margin-bottom: 1rem;
}
.footer-contact-item .ci-icon { font-size: 1rem; flex-shrink: 0; margin-top: 2px; color: var(--red); }
.footer-contact-item p { font-size: 0.88rem; margin: 0; }
.footer-contact-item a { color: var(--text-2); transition: color 0.2s; }
.footer-contact-item a:hover { color: var(--red); }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-bottom p { font-size: 0.8rem; color: var(--text-3); }
.footer-bottom a { color: var(--text-3); transition: color 0.2s; }
.footer-bottom a:hover { color: var(--text); }

/* ── Floating Buttons ─────────────────────────────── */
.whatsapp-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 800;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  color: #fff;
  font-size: 1.5rem;
}
.whatsapp-fab:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,211,102,0.5); }
.whatsapp-fab::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: 50%;
  animation: wa-pulse 2.5s ease-out infinite;
}

.back-to-top {
  position: fixed;
  bottom: 96px;
  right: 28px;
  z-index: 800;
  width: 44px;
  height: 44px;
  background: var(--bg-4);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  font-size: 1.1rem;
  transition: all 0.2s;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}
.back-to-top.visible { opacity: 1; pointer-events: all; transform: translateY(0); }
.back-to-top:hover { background: var(--red-muted); border-color: var(--red-border); color: var(--red); }

/* ── Page Hero (Inner Pages) ──────────────────────── */
.page-hero {
  padding: calc(var(--nav-h) + 4rem) 0 4rem;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  /* Dot-grid texture */
 
}
/* Left red accent bar */
.page-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, var(--red) 0%, transparent 100%);
  pointer-events: none;
}
/* Right radial glow + canvas host */
.page-hero::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 55%;
  height: 100%;
  background: radial-gradient(ellipse at 85% 50%, rgba(201,26,26,0.07) 0%, transparent 65%);
  pointer-events: none;
}
/* Canvas injected by JS sits here */
.page-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}
.page-hero-content { position: relative; z-index: 1; }
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-3);
  margin-bottom: 1.5rem;
}
.breadcrumb a { color: var(--text-3); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb .sep { color: var(--text-3); }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 4rem); margin-bottom: 1rem; }
.page-hero p { font-size: 1.05rem; max-width: 55ch; }

/* ── Product Detail ───────────────────────────────── */
.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 5rem;
  align-items: start;
}
.product-illustration {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}
.product-illustration svg {
  width: 100%;
  max-width: 280px;
  color: var(--red);
}
.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}
.spec-table th {
  background: var(--bg-3);
  font-family: var(--ff-d);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 10px 16px;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid var(--border-2);
}
.spec-table td {
  padding: 10px 16px;
  font-size: 0.88rem;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
}
.spec-table tr:hover td { background: var(--bg-3); color: var(--text); }

/* Dark-section override: td has no background of its own (unlike th),
   so on a theme-dark section it was inheriting the near-black section
   background while keeping dark gray text — invisible until hovered. */
.theme-dark .spec-table td {
  color: #D4D4D4;
  border-bottom-color: rgba(255,255,255,0.1);
}
.theme-dark .dtable tbody td:first-child,
.theme-dark .dtable tbody td.hi {
  color: var(--text-inv);
}
.theme-dark .spec-table tr:hover td {
  background: rgba(255,255,255,0.06);
  color: #ffffff;
}

.types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 1px;
  background: var(--border);
  margin: 1.5rem 0;
}
.type-card {
  background: var(--bg-2);
  padding: 1.25rem;
  font-size: 0.9rem;
  color: var(--text-2);
  transition: background 0.2s, color 0.2s;
}
.type-card:hover { background: var(--bg-3); color: var(--text); }
.type-card strong { display: block; color: var(--text); margin-bottom: 4px; font-family: var(--ff-d); font-size: 1rem; }

/* ── Standards ────────────────────────────────────── */
.standards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 1px;
  background: var(--border);
}
.std-card {
  background: var(--bg-2);
  padding: 2rem;
  transition: background 0.3s;
  position: relative;
  overflow: hidden;
}
.std-card:hover { background: var(--bg-3); }
.std-code {
  font-family: var(--ff-d);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-3);
  margin-bottom: 0.5rem;
  line-height: 1;
}
.std-card h4 { font-size: 1rem; margin-bottom: 0.4rem; }
.std-card p { font-size: 0.82rem; }

/* ── Gallery ──────────────────────────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.gallery-item {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--bg-3);
  cursor: pointer;
  position: relative;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out), filter 0.5s;
  filter: grayscale(20%);
}
.gallery-item:hover img { transform: scale(1.06); filter: grayscale(0%); }
.gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: rgba(201,26,26,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 2rem;
  color: #fff;
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.lightbox.open { opacity: 1; pointer-events: all; }
.lightbox img { max-width: 90vw; max-height: 85vh; border-radius: 4px; object-fit: contain; }
.lightbox-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.lightbox-close:hover { background: var(--red); }

/* ── Contact ──────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 5rem;
  align-items: start;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  border-radius: 5px;
  color: var(--text);
  padding: 13px 16px;
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-3); }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--red-border);
  box-shadow: 0 0 0 3px var(--red-muted);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
textarea { resize: vertical; min-height: 130px; }
.theme-dark .form-group label { color: #999999; }

.contact-info-item {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}
.ci-icon-wrap {
  width: 44px;
  height: 44px;
  background: var(--red-muted);
  border: 1px solid var(--red-border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  font-size: 1.2rem;
  flex-shrink: 0;
}
.contact-info-item h5 {
  font-family: var(--ff-d);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
}
/* ── Inline SVG icon defaults ──────────────────────────────────────────
   All the icon chips below are flex-centred boxes that used to hold an
   emoji glyph, so they were sized with font-size. The SVGs that replaced
   those emoji carry their own width/height and inherit the container's
   colour via stroke/fill="currentColor"; these rules just stop them being
   stretched by the flex parent and keep them optically centred. */
.ci-icon-wrap svg,
.ci-icon svg,
.social-link svg,
.industry-icon svg,
.cert-icon svg,
.btn svg { flex: none; display: block; }
.btn svg { vertical-align: -3px; margin-right: 2px; }
.industry-icon { line-height: 0; }
.cert-icon { display: block; line-height: 0; }
.whatsapp-fab svg { position: relative; z-index: 1; }

.theme-dark .contact-info-item h5 { color: #999999; }
.contact-info-item a, .contact-info-item p {
  font-size: 0.92rem;
  color: var(--text-2);
}
.contact-info-item a:hover { color: var(--red); }

/* The contact-details list lives inside a .theme-dark section (#141414).
   The base link colour above is --text-2 (#2a2a2a), which is near-black
   and effectively invisible there — the sibling <p> text escapes this
   because ".section.theme-dark p" already forces a light grey, but no
   equivalent rule existed for <a>. Phone, WhatsApp and email links stay
   white on dark; hover keeps the brand red, which reads fine on #141414. */
.section.theme-dark .contact-info-item a { color: #FFFFFF; }
.section.theme-dark .contact-info-item a:hover { color: var(--red); }
.map-container {
  margin-top: 2rem;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  height: 260px;
}
.map-container iframe { width: 100%; height: 100%; border: none; filter: grayscale(80%) invert(92%) contrast(85%); }

/* ── About / Quality / Infrastructure ────────────────*/
.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.split-section.reverse { direction: rtl; }
.split-section.reverse > * { direction: ltr; }
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}
.feature-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.feature-check {
  width: 22px;
  height: 22px;
  background: var(--red-muted);
  border: 1px solid var(--red-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  font-size: 0.8rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.feature-item p { font-size: 0.92rem; margin: 0; }
.feature-item strong { color: var(--text); }

.illustration-box {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
}
.illustration-box svg { width: 100%; max-width: 300px; }

.quality-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 1px;
  background: var(--border);
  margin-top: 2rem;
}
.quality-card {
  background: var(--bg-2);
  padding: 2rem;
  transition: background 0.3s;
}
.quality-card:hover { background: var(--bg-3); }
.quality-step {
  font-family: var(--ff-d);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--red);
  opacity: 0.2;
  line-height: 1;
  margin-bottom: 1rem;
}
.quality-card h4 { font-size: 1.1rem; margin-bottom: 0.5rem; }

/* ── Scroll Animations (initial state) ───────────────*/
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* ── Keyframes ────────────────────────────────────── */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes scroll-cue {
  0%, 100% { transform: scaleY(1); opacity: 0.5; }
  50%       { transform: scaleY(0.5); opacity: 0; }
}
@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}
@keyframes pulse-gold {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
@keyframes draw-path {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* ── Quote Modal ──────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box {
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  padding: 2.5rem;
  width: 100%;
  max-width: 520px;
  max-height: 90dvh;
  overflow-y: auto;
  position: relative;
  transform: translateY(28px) scale(0.97);
  transition: transform 0.35s var(--ease-out);
}
.modal-overlay.open .modal-box { transform: translateY(0) scale(1); }
.modal-close {
  position: absolute; top: 1.25rem; right: 1.25rem;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-5);
  color: var(--text-2);
  font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none;
  transition: background 0.2s, color 0.2s;
}
.modal-close:hover { background: var(--red-muted); color: var(--red); }
.modal-box h3 { font-size: 1.8rem; margin-bottom: 0.35rem; }
.modal-box > p { font-size: 0.9rem; margin-bottom: 1.75rem; }

/* ── Reduced Motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .product-detail-grid { grid-template-columns: 1fr; }
  .product-illustration { position: static; aspect-ratio: auto; }
  .contact-grid { grid-template-columns: 1fr; }
  .split-section { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 1300px) {
  .nav-inner { gap: 0.75rem; padding: 0 16px; }
  .nav-links { gap: 0px; }
  .nav-links a, .nav-dropdown > button {
    padding: 8px 10px;
    font-size: 0.8rem;
  }
  .nav-cta { padding: 9px 14px !important; font-size: 0.8rem; }
}
@media (max-width: 1140px) {
  .nav-logo-text { font-size: 1rem; }
  .nav-logo-text span { font-size: 0.62rem; }
  .nav-links a, .nav-dropdown > button { padding: 8px 8px; font-size: 0.76rem; }
}
@media (max-width: 768px) {
  :root { --section-py: 64px; --nav-h: 64px; }
  .nav-links, .nav-dropdown { display: none; }
  .hamburger { display: flex; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item { border-right: none; border-bottom: 1px solid var(--border); }
  .products-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .cta-inner { flex-direction: column; }
  .cert-inner { flex-direction: column; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  :root { --section-py: 48px; }
  .stats-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .hero-ctas { flex-direction: column; }
  .whatsapp-fab, .back-to-top { right: 16px; bottom: 16px; }
  .back-to-top { bottom: 84px; }
}

/* ── Mobile navbar fit ─────────────────────────────────────────────────
   Measured on a 375px viewport, .nav-inner came out 401px wide: the 70px
   logo, the company name, the "Get a Quote" button and the hamburger did
   not fit side by side. Two visible symptoms followed — the hamburger was
   pushed past the right edge (so the home page appeared to have no menu
   button at all), and the document became ~26px wider than the screen,
   which is the white strip down the right of every inner page.

   These rules only apply below the 768px breakpoint, i.e. once the inline
   nav has already been replaced by the hamburger. Desktop is untouched.
   The logo carries an inline height:70px, so overriding it needs
   !important — the declaration is scoped to this media query only. */
@media (max-width: 768px) {
  .nav-inner { padding: 0 12px; gap: 8px; }
  .nav-logo { min-width: 0; flex: 0 1 auto; gap: 8px; }
  .nav-logo img { height: 46px !important; }
  .nav-logo-text {
    min-width: 0;
    font-size: 0.86rem;
    line-height: 1.2;
    overflow: hidden;
  }
  .nav-logo-text span { font-size: 0.56rem; }
  .nav-cta {
    padding: 8px 11px !important;
    font-size: 0.74rem !important;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .hamburger { flex-shrink: 0; }
}
/* Narrow handsets: drop the "Chennai, India" strapline and tighten further
   so the bar still fits a 320px screen without clipping the hamburger. */
@media (max-width: 400px) {
  .nav-logo img { height: 40px !important; }
  .nav-logo-text { font-size: 0.78rem; }
  .nav-logo-text span { display: none; }
  .nav-cta { padding: 7px 9px !important; font-size: 0.7rem !important; }
}

/* ── Scroll-reveal direction on mobile ────────────────────────────────
   .reveal-right parks its element at translateX(50px) until the scroll
   observer adds .visible. On a phone that 50px pushes the element past the
   right edge: the document measured 401px against a 375px viewport, which
   produced the white strip AND stretched the fixed navbar to 401px so the
   hamburger sat off-screen. Sliding vertically instead keeps exactly the
   same reveal effect with no horizontal overflow. Desktop keeps the
   original left/right slide. */
@media (max-width: 768px) {
  .reveal-left,
  .reveal-right { transform: translateY(30px); }
  .reveal-left.visible,
  .reveal-right.visible { transform: translateY(0); }
}

/* ── Page Visual Depth Enhancements ──────────────── */

/* Subtle dot-grid on alternating body sections */
.section.theme-light:not(.industries-section):not(.cta-banner) {
  background-image:
    radial-gradient(circle, rgba(201,26,26,0.22) 1.5px, transparent 1.5px);
  background-size: 32px 32px;
  background-color: var(--bg);
}

/* Thin red top-line accent on every section */
.section {
  position: relative;
}
.section:first-of-type { border-top: none; }

/* Red left-rule on section-tag labels */
.section-tag {
  position: relative;
  padding-left: 46px;
}
.section-tag::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 14px;
  background: var(--red);
  border-radius: 2px;
}

/* Gold ornate lantern — inline bullet after section-tag text */
.section-tag::after {
  content: '';
  position: absolute;
  left: 18px;          /* sits right after the 4px red bar */
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 40px;
  background-image: url('../mishkat-lantern.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

/* Diagonal red-stripe watermark on dark (cta-banner) */
.cta-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.02) 0px,
    rgba(255,255,255,0.02) 1px,
    transparent 1px,
    transparent 18px
  );
  pointer-events: none;
}

/* (Removed: unused .section.bg-2 rule — no markup used class="bg-2".
   The actual light-override sections use inline style="background:var(--bg-2)"
   and are now tagged with the explicit .theme-light class above, which is
   what makes their headings/text render correctly.) */

/* ─────────────────────────────────────────────────────────────────
   Product Type Image Box — big image that swaps when a type card
   (.vc) is clicked, placed just below the "Available Types" grid
   on flanges / foundation-bolt / fasteners / special-fasteners /
   pipe-fittings / stud-bolt pages. Shows a clean "image coming soon"
   placeholder until the real photo is dropped into /images/products/.
   ───────────────────────────────────────────────────────────────── */
.type-img-box{
  position:relative;
  width:100%;
  max-width:520px;
  margin:0 auto 1.75rem;
  aspect-ratio:4/3;
  background:var(--bg-3,#1a1a1a);
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.type-img-box img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:22px;
}
.type-img-box .type-img-fallback{
  display:none;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:var(--text-3,#666);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
  padding:0 20px;
}
.type-img-box.img-missing img{display:none}
.type-img-box.img-missing .type-img-fallback{display:flex}