/* ================================================================
   TNT FLOW ENGINEERING — style.css
   Mobile-first, fully responsive across all breakpoints
   Breakpoints: 375 | 480 | 640 | 768 | 1024 | 1280 | 1440
   ================================================================ */

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

/* ─── CSS Variables ─────────────────────────────────────────── */
:root {
  --orange:       #E8581A;
  --orange-dk:    #B8430E;
  --orange-glow:  rgba(232,88,26,0.15);
  --black:        #090909;
  --dark:         #111213;
  --dark2:        #171A1B;
  --dark3:        #1E2122;
  --steel:        #282C2E;
  --mid:          #363A3D;
  --muted:        #788088;
  --silver:       #AAB4BC;
  --light:        #E6EAEC;
  --white:        #FFFFFF;

  --font-d: 'Bebas Neue', sans-serif;
  --font-b: 'Rajdhani', sans-serif;
  --ease:   cubic-bezier(.25,.46,.45,.94);

  /* Fluid type scale */
  --step--1: clamp(0.78rem, 0.7vw + 0.6rem, 0.9rem);
  --step-0:  clamp(0.9rem,  0.8vw + 0.7rem, 1rem);
  --step-1:  clamp(1.1rem,  1.2vw + 0.8rem, 1.35rem);
  --step-2:  clamp(1.4rem,  2vw   + 0.9rem, 1.8rem);
  --step-3:  clamp(1.9rem,  3vw   + 1rem,   3rem);
  --step-4:  clamp(2.6rem,  5vw   + 1rem,   5rem);
  --step-5:  clamp(3.5rem,  7vw   + 1rem,   7.5rem);
}

/* ─── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-b);
  background: var(--dark);
  color: var(--light);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
button { font-family: var(--font-b); cursor: pointer; border: none; background: none; }

/* ─── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 2px; }

/* ─── Utility ────────────────────────────────────────────────── */
.sr-only { position: absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }

/* ─── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-b);
  font-weight: 700;
  font-size: clamp(0.78rem, 1.2vw, 0.88rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: clamp(12px,2vw,16px) clamp(22px,3vw,36px);
  border-radius: 2px;
  transition: all 0.25s var(--ease);
  white-space: nowrap;
  line-height: 1;
}
.btn-primary { background: var(--orange); color: var(--white); }
.btn-primary:hover { background: var(--orange-dk); transform: translateY(-2px); box-shadow: 0 10px 36px rgba(232,88,26,.38); }
.btn-ghost { background: transparent; color: var(--light); border: 1px solid rgba(230,234,236,.22); }
.btn-ghost:hover { border-color: var(--orange); color: var(--orange); }
.btn-dark { background: var(--black); color: var(--white); }
.btn-dark:hover { background: var(--steel); }
.btn-arrow::after { content: '→'; transition: transform .25s var(--ease); }
.btn-arrow:hover::after { transform: translateX(5px); }

/* ─── Section Label ──────────────────────────────────────────── */
.label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-b);
  font-weight: 700;
  font-size: clamp(0.65rem, 1vw, 0.72rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.label::before { content:''; width:28px; height:2px; background:var(--orange); flex-shrink:0; }

/* ─── Headings ───────────────────────────────────────────────── */
.h1 { font-family:var(--font-d); font-size:var(--step-5); line-height:.92; letter-spacing:.02em; text-transform:uppercase; color:var(--white); }
.h2 { font-family:var(--font-d); font-size:var(--step-4); line-height:.95; letter-spacing:.02em; text-transform:uppercase; color:var(--white); }
.h3 { font-family:var(--font-d); font-size:var(--step-3); line-height:1;   letter-spacing:.04em; text-transform:uppercase; color:var(--white); }
.h4 { font-family:var(--font-d); font-size:var(--step-2); line-height:1.1; letter-spacing:.04em; text-transform:uppercase; color:var(--white); }
.accent { color: var(--orange); }
.outline { -webkit-text-stroke: 2px rgba(255,255,255,.28); color:transparent; }

/* ─── Reveal Animations ──────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in  { opacity:1; transform:translateY(0); }
.r2 { transition-delay:.12s; }
.r3 { transition-delay:.22s; }
.r4 { transition-delay:.32s; }

@keyframes fadeUp   { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes zoomOut  { from{transform:scale(1.06)} to{transform:scale(1)} }
@keyframes linePulse{ 0%,100%{opacity:.35;transform:scaleY(1)} 50%{opacity:1;transform:scaleY(.65)} }

/* ================================================================
   NAVIGATION
   ================================================================ */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1000;
  height: 68px;
  display: flex;
  align-items: center;
  background: rgba(9,9,9,.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(232,88,26,.18);
  transition: box-shadow .3s var(--ease);
}
.nav.scrolled { box-shadow: 0 4px 60px rgba(0,0,0,.7); }

.nav-inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(16px,4vw,60px);
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Logo */
.nav-logo { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.logo-svg  { width:42px; height:42px; flex-shrink:0; }
.nav-name  { font-family:var(--font-d); font-size:clamp(1.1rem,2.2vw,1.5rem); letter-spacing:.05em; color:var(--white); line-height:1; }
.nav-sub   { font-family:var(--font-b); font-weight:500; font-size:clamp(.5rem,.8vw,.62rem); letter-spacing:.18em; text-transform:uppercase; color:var(--muted); display:block; margin-top:2px; }

/* Desktop links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin-left: auto;
}
.nav-links a {
  font-family: var(--font-b);
  font-weight: 600;
  font-size: .84rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--silver);
  padding: 8px 14px;
  border-radius: 2px;
  position: relative;
  transition: color .25s;
}
.nav-links a::after { content:''; position:absolute; bottom:4px; inset-inline:14px; height:2px; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease); }
.nav-links a:hover  { color:var(--white); }
.nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); }
.nav-links a.active { color:var(--orange); }
.nav-cta { background:var(--orange)!important; color:var(--white)!important; padding:10px 20px!important; }
.nav-cta::after { display:none!important; }
.nav-cta:hover  { background:var(--orange-dk)!important; }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  margin-left: auto;
  padding: 6px;
  border-radius: 2px;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  height: 2px;
  background: var(--light);
  border-radius: 1px;
  transition: all .3s var(--ease);
}
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.nav-drawer {
  display: none;
  position: fixed;
  top: 68px; left:0; right:0;
  background: rgba(9,9,9,.98);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(232,88,26,.2);
  padding: 20px clamp(16px,5vw,40px) 28px;
  z-index: 999;
  flex-direction: column;
  gap: 6px;
  transform: translateY(-8px);
  opacity: 0;
  transition: all .3s var(--ease);
}
.nav-drawer.open { opacity:1; transform:translateY(0); }
.nav-drawer a {
  font-family: var(--font-b);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--silver);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: color .2s;
}
.nav-drawer a:hover, .nav-drawer a.active { color:var(--orange); }
.nav-drawer .drawer-cta { margin-top:16px; background:var(--orange); color:#fff; text-align:center; padding:16px; border-radius:2px; }

/* ================================================================
   HERO
   ================================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-bg-img {
  position: absolute; inset:0;
  background: url('../images/fluid-coupling.jpg') center 35% / cover no-repeat;
  filter: brightness(.32) saturate(.55);
  animation: zoomOut 14s ease-out forwards;
}
.hero-overlay {
  position: absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(9,9,9,.55) 0%, transparent 28%, transparent 52%, rgba(9,9,9,.97) 100%),
    linear-gradient(100deg, rgba(9,9,9,.72) 0%, transparent 55%);
}
.hero-noise {
  position:absolute;inset:0;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:300px;
}
.hero-content {
  position: relative; z-index:2;
  padding: clamp(80px,10vh,120px) clamp(20px,5vw,64px) clamp(60px,8vh,96px);
  max-width: min(860px, 100%);
}
.hero-eyebrow {
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-b);font-weight:700;
  font-size:clamp(.65rem,.9vw,.75rem);letter-spacing:.28em;text-transform:uppercase;
  color:var(--orange);margin-bottom:clamp(20px,3vh,30px);
  opacity:0;animation:fadeUp .6s .2s var(--ease) forwards;
}
.hero-eyebrow::before{content:'';width:32px;height:2px;background:var(--orange);}

.hero-title {
  font-family:var(--font-d);
  font-size:var(--step-5);
  line-height:.93;letter-spacing:.02em;text-transform:uppercase;
  color:var(--white);
  margin-bottom:clamp(18px,2.5vh,28px);
  opacity:0;animation:fadeUp .7s .38s var(--ease) forwards;
}
.hero-desc {
  font-size:clamp(.95rem,1.4vw,1.08rem);
  font-weight:400;color:var(--silver);
  max-width:min(500px,100%);line-height:1.8;
  margin-bottom:clamp(28px,4vh,44px);
  opacity:0;animation:fadeUp .7s .54s var(--ease) forwards;
}
.hero-btns {
  display:flex;flex-wrap:wrap;gap:12px;
  opacity:0;animation:fadeUp .7s .68s var(--ease) forwards;
}
.hero-scroll {
  position:absolute;bottom:clamp(24px,4vh,40px);right:clamp(20px,4vw,60px);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:0;animation:fadeIn 1s 1.4s ease forwards;
}
.hero-scroll span {
  font-size:.65rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);writing-mode:vertical-rl;
}
.scroll-line {width:1px;height:52px;background:linear-gradient(to bottom,var(--orange),transparent);animation:linePulse 2s ease-in-out infinite;}

/* ================================================================
   STATS BAR
   ================================================================ */
.stats-bar {
  background: var(--orange);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.stats-bar::-webkit-scrollbar{display:none;}
.stats-inner {
  display: flex;
  align-items: center;
  min-width: max-content;
  padding: 0 clamp(20px,5vw,64px);
}
.stat { display:flex;align-items:center;gap:16px;padding:clamp(20px,3vw,28px) clamp(24px,4vw,44px) clamp(20px,3vw,28px) 0; }
.stat:first-child{padding-left:0;}
.stat-divider{width:1px;height:36px;background:rgba(255,255,255,.25);flex-shrink:0;margin-right:clamp(24px,4vw,44px);}
.stat-num{font-family:var(--font-d);font-size:clamp(2rem,4vw,3rem);color:#fff;line-height:1;}
.stat-txt{display:flex;flex-direction:column;}
.stat-lbl{font-weight:700;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);line-height:1;margin-bottom:2px;}
.stat-val{font-weight:600;font-size:clamp(.8rem,1.2vw,.92rem);color:rgba(255,255,255,.9);}

/* ================================================================
   SECTIONS
   ================================================================ */
.section { padding: clamp(60px,8vw,110px) clamp(20px,5vw,64px); }
.section-alt  { background:var(--dark2); }
.section-dark { background:var(--dark3); }

/* ================================================================
   ABOUT
   ================================================================ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px,6vw,80px);
  align-items: start;
  margin-top: clamp(40px,5vw,70px);
}
.about-body p {
  font-size:clamp(.9rem,1.2vw,1rem);font-weight:400;color:var(--silver);line-height:1.85;margin-bottom:18px;
}
.about-body p strong{color:var(--white);font-weight:600;}
.about-body .btns{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap;}

/* Stacked image */
.img-stack{position:relative;padding-bottom:clamp(28px,5vw,40px);padding-right:clamp(28px,5vw,40px);}
.img-main{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;filter:saturate(.72)brightness(.82);}
.img-accent{position:absolute;bottom:0;right:0;width:50%;aspect-ratio:1;object-fit:cover;border-radius:2px;border:clamp(2px,0.4vw,4px) solid var(--dark);filter:saturate(.72)brightness(.82);}
.img-badge{position:absolute;top:clamp(14px,2vw,24px);left:clamp(-10px,-1.5vw,-20px);background:var(--orange);padding:clamp(12px,2vw,20px) clamp(14px,2vw,24px);text-align:center;}
.img-badge .bn{font-family:var(--font-d);font-size:clamp(1.6rem,3vw,2.4rem);color:#fff;line-height:1;}
.img-badge .bt{font-weight:700;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);}

/* ================================================================
   VALUES
   ================================================================ */
.values-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  margin-top: clamp(36px,5vw,64px);
}
.val-card {
  background:var(--steel);padding:clamp(28px,4vw,44px) clamp(18px,2.5vw,28px);
  position:relative;overflow:hidden;transition:background .3s var(--ease);
}
.val-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);}
.val-card:hover{background:var(--mid);}
.val-card:hover::before{transform:scaleX(1);}
.val-icon{font-size:clamp(1.4rem,2.5vw,2rem);margin-bottom:16px;display:block;}
.val-card h4{font-family:var(--font-d);font-size:clamp(1rem,1.8vw,1.4rem);letter-spacing:.06em;color:var(--white);margin-bottom:10px;}
.val-card p{font-size:clamp(.78rem,1.1vw,.85rem);color:var(--muted);line-height:1.65;font-weight:400;}

/* ================================================================
   PRODUCT CARDS
   ================================================================ */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.prod-card{background:var(--dark3);overflow:hidden;position:relative;}
.prod-img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.6)brightness(.68);transition:filter .5s,transform .6s;}
.prod-card:hover .prod-img{filter:saturate(.85)brightness(.82);transform:scale(1.04);}
.prod-body{padding:clamp(18px,2.5vw,28px) clamp(18px,2.5vw,28px) clamp(22px,3vw,32px);border-left:3px solid transparent;transition:border-color .3s;}
.prod-card:hover .prod-body{border-left-color:var(--orange);}
.prod-num{font-family:var(--font-b);font-weight:700;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-bottom:8px;}
.prod-body h3{font-family:var(--font-d);font-size:clamp(1.2rem,2vw,1.5rem);letter-spacing:.06em;color:var(--white);margin-bottom:8px;}
.prod-body p{font-size:clamp(.8rem,1.1vw,.88rem);color:var(--muted);line-height:1.65;margin-bottom:16px;}
.prod-tags{display:flex;gap:6px;flex-wrap:wrap;}
.tag{font-family:var(--font-b);font-weight:700;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;background:var(--steel);color:var(--silver);border-radius:2px;}

/* ================================================================
   FEATURE SPLIT
   ================================================================ */
.feature-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(380px,50vw,580px);
}
.feature-img{width:100%;height:100%;object-fit:cover;filter:saturate(.65)brightness(.72);}
.feature-body{background:var(--orange);padding:clamp(44px,6vw,80px) clamp(28px,5vw,60px);display:flex;flex-direction:column;justify-content:center;}
.feature-tag{font-family:var(--font-b);font-weight:700;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:16px;display:flex;align-items:center;gap:12px;}
.feature-tag::before{content:'';width:22px;height:2px;background:rgba(255,255,255,.45);}
.feature-body h2{font-family:var(--font-d);font-size:clamp(2rem,4vw,3.5rem);line-height:.96;color:#fff;letter-spacing:.03em;margin-bottom:18px;}
.feature-body p{font-size:clamp(.88rem,1.2vw,1rem);color:rgba(255,255,255,.8);line-height:1.8;margin-bottom:28px;}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-bottom:28px;}
.spec{background:rgba(0,0,0,.15);padding:clamp(10px,1.5vw,14px) clamp(12px,2vw,18px);}
.spec-l{font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:3px;}
.spec-v{font-family:var(--font-d);font-size:clamp(1rem,1.8vw,1.2rem);color:#fff;letter-spacing:.04em;}

/* ================================================================
   VIDEO SECTION
   ================================================================ */
.video-section{position:relative;overflow:hidden;background:var(--black);}
.video-wrap{position:relative;aspect-ratio:16/9;max-height:72vh;overflow:hidden;}
.video-wrap video{width:100%;height:100%;object-fit:cover;}
.video-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,9,9,.3),rgba(9,9,9,.6));}
.video-caption{
  position:absolute;bottom:0;left:0;right:0;
  padding:clamp(24px,4vw,48px) clamp(20px,5vw,64px);
}
.video-caption .h3{margin-bottom:8px;}
.video-caption p{font-size:clamp(.85rem,1.2vw,.95rem);color:var(--silver);max-width:500px;}

/* ================================================================
   GALLERY STRIP
   ================================================================ */
.gallery-strip{display:flex;height:clamp(180px,30vw,380px);gap:2px;overflow:hidden;}
.gal-item{flex:1;overflow:hidden;position:relative;cursor:pointer;transition:flex .5s var(--ease);}
.gal-item:hover{flex:2.4;}
.gal-item img{width:100%;height:100%;object-fit:cover;filter:saturate(.6)brightness(.68);transition:filter .4s;}
.gal-item:hover img{filter:saturate(.9)brightness(.82);}
.gal-lbl{position:absolute;bottom:16px;left:16px;font-family:var(--font-d);font-size:clamp(.9rem,1.6vw,1.2rem);color:#fff;letter-spacing:.06em;opacity:0;transform:translateY(6px);transition:all .3s var(--ease);}
.gal-item:hover .gal-lbl{opacity:1;transform:translateY(0);}

/* ================================================================
   B-BBEE
   ================================================================ */
.bbee-wrap{position:relative;overflow:hidden;}
.bbee-bg-text{
  position:absolute;right:-2%;top:50%;transform:translateY(-50%);
  font-family:var(--font-d);font-size:clamp(8rem,25vw,28rem);
  color:rgba(232,88,26,.04);line-height:1;pointer-events:none;user-select:none;
}
.bbee-grid{display:grid;grid-template-columns:1fr auto;gap:clamp(36px,6vw,80px);align-items:center;position:relative;z-index:1;}
.bbee-circle{
  background:var(--orange);
  width:clamp(140px,16vw,200px);height:clamp(140px,16vw,200px);
  border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex-shrink:0;box-shadow:0 0 80px rgba(232,88,26,.38);
}
.bbee-circle .num{font-family:var(--font-d);font-size:clamp(3rem,6vw,5rem);color:#fff;line-height:1;}
.bbee-circle .sub{font-weight:700;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);}
.bbee-pts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,16px);margin-top:clamp(24px,4vw,40px);}
.bbee-pt{display:flex;align-items:flex-start;gap:12px;}
.bbee-icon{width:34px;height:34px;background:var(--orange-glow);border:1px solid rgba(232,88,26,.3);border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;}
.bbee-pt h5{font-family:var(--font-b);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--white);margin-bottom:3px;}
.bbee-pt p{font-size:.78rem;color:var(--muted);line-height:1.5;}

/* ================================================================
   CONTACT
   ================================================================ */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(36px,6vw,80px);margin-top:clamp(36px,5vw,64px);}
.contact-info h4{font-family:var(--font-d);font-size:clamp(1.1rem,2vw,1.3rem);letter-spacing:.06em;color:var(--orange);margin-bottom:18px;}
.cdet{display:flex;align-items:center;gap:14px;padding:clamp(12px,2vw,16px) 0;border-bottom:1px solid rgba(255,255,255,.06);}
.cdet:last-child{border-bottom:none;}
.cdet-icon{width:clamp(34px,4vw,40px);height:clamp(34px,4vw,40px);background:var(--orange-glow);border:1px solid rgba(232,88,26,.22);display:flex;align-items:center;justify-content:center;font-size:clamp(.9rem,1.4vw,1.1rem);flex-shrink:0;border-radius:2px;}
.cdet-lbl{font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;display:block;}
.cdet-val{font-size:clamp(.82rem,1.2vw,.95rem);font-weight:500;color:var(--light);transition:color .2s;}
.cdet-val:hover{color:var(--orange);}

/* Form */
.cform{background:var(--dark3);padding:clamp(28px,4vw,50px) clamp(22px,4vw,44px);border-top:3px solid var(--orange);}
.cform h3{font-family:var(--font-d);font-size:clamp(1.5rem,3vw,2rem);letter-spacing:.06em;color:var(--white);margin-bottom:clamp(20px,3vw,28px);}
.fg{margin-bottom:16px;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.fg label{display:block;font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;}
.fg input,.fg textarea,.fg select{
  width:100%;background:var(--dark);
  border:1px solid rgba(255,255,255,.08);
  color:var(--light);
  padding:clamp(11px,1.6vw,14px) clamp(14px,2vw,18px);
  font-family:var(--font-b);font-size:clamp(.88rem,1.2vw,.95rem);font-weight:500;
  border-radius:2px;outline:none;
  transition:border-color .2s,box-shadow .2s;
  -webkit-appearance:none;
}
.fg input::placeholder,.fg textarea::placeholder{color:var(--muted);font-weight:400;}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-glow);}
.fg textarea{resize:vertical;min-height:clamp(100px,14vw,130px);}
.fg select{cursor:pointer;}
.fg select option{background:var(--dark);}
.submit-btn{width:100%;justify-content:center;font-size:clamp(.82rem,1.2vw,.88rem);}

/* ================================================================
   FOOTER
   ================================================================ */
footer{background:var(--black);padding:clamp(52px,6vw,80px) clamp(20px,5vw,64px) clamp(28px,4vw,40px);border-top:1px solid rgba(232,88,26,.14);}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(32px,5vw,60px);margin-bottom:clamp(36px,5vw,56px);}
.foot-brand-logo{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.foot-brand p{font-size:clamp(.82rem,1.1vw,.88rem);font-weight:400;color:var(--muted);line-height:1.8;max-width:280px;margin-bottom:24px;}
.foot-social{display:flex;gap:8px;}
.soc{width:36px;height:36px;background:var(--steel);border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:.85rem;color:var(--muted);transition:all .25s;}
.soc:hover{background:var(--orange);color:#fff;}
.foot-col h5{font-family:var(--font-d);font-size:clamp(.95rem,1.5vw,1.1rem);letter-spacing:.1em;color:var(--white);margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.06);}
.foot-col ul{list-style:none;}
.foot-col li{margin-bottom:10px;}
.foot-col a{font-size:clamp(.8rem,1.1vw,.88rem);font-weight:400;color:var(--muted);transition:color .2s;display:flex;align-items:center;gap:7px;}
.foot-col a::before{content:'›';color:var(--orange);font-size:.95rem;}
.foot-col a:hover{color:var(--orange);}
.foot-bottom{border-top:1px solid rgba(255,255,255,.05);padding-top:clamp(18px,3vw,26px);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.foot-bottom p{font-size:clamp(.72rem,1vw,.78rem);color:var(--muted);}
.foot-badges{display:flex;gap:8px;flex-wrap:wrap;}
.badge{background:var(--steel);padding:5px 12px;border-radius:2px;font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);}

/* ================================================================
   PAGE HEADER (inner pages)
   ================================================================ */
.page-hdr{
  padding:clamp(100px,14vh,160px) clamp(20px,5vw,64px) clamp(48px,6vw,80px);
  background:linear-gradient(135deg,var(--dark) 0%,var(--dark3) 100%);
  position:relative;overflow:hidden;
}
.page-hdr::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--orange),transparent 60%);}
.page-hdr .sub{font-size:clamp(.9rem,1.3vw,1.05rem);font-weight:400;color:var(--silver);max-width:min(520px,100%);line-height:1.8;margin-top:18px;}

/* Orange CTA strip */
.cta-strip{background:var(--orange);padding:clamp(52px,6vw,80px) clamp(20px,5vw,64px);text-align:center;}
.cta-strip h2{font-family:var(--font-d);font-size:clamp(1.8rem,4vw,4rem);color:#fff;letter-spacing:.04em;margin-bottom:14px;}
.cta-strip p{font-size:clamp(.92rem,1.3vw,1.05rem);color:rgba(255,255,255,.8);margin-bottom:36px;max-width:min(500px,100%);margin-left:auto;margin-right:auto;line-height:1.7;}
.cta-strip .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ================================================================
   RESPONSIVE — 1280px
   ================================================================ */
@media(max-width:1280px){
  .values-grid{grid-template-columns:repeat(3,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr 1fr;gap:36px;}
  .footer-grid .foot-brand{grid-column:1/-1;}
}

/* ================================================================
   RESPONSIVE — 1024px
   ================================================================ */
@media(max-width:1024px){
  .about-grid{grid-template-columns:1fr;}
  .img-stack{max-width:520px;}
  .bbee-grid{grid-template-columns:1fr;justify-items:start;}
  .bbee-circle{align-self:start;}
  .products-grid{grid-template-columns:1fr 1fr;}
  .feature-split{grid-template-columns:1fr;}
  .feature-img{height:clamp(240px,40vw,360px);width:100%;}
}

/* ================================================================
   RESPONSIVE — 768px
   ================================================================ */
@media(max-width:768px){
  .nav-links{display:none;}
  .hamburger{display:flex;}
  .hero-scroll{display:none;}

  .values-grid{grid-template-columns:1fr 1fr;}
  .products-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .bbee-pts{grid-template-columns:1fr;}
  .frow{grid-template-columns:1fr;}
  .gallery-strip{height:clamp(140px,28vw,220px);}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .footer-grid .foot-brand{grid-column:1/-1;}
  .foot-bottom{flex-direction:column;align-items:flex-start;}
  .specs{grid-template-columns:1fr 1fr;}
}

/* ================================================================
   RESPONSIVE — 480px
   ================================================================ */
@media(max-width:480px){
  .values-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .hero-btns{flex-direction:column;}
  .hero-btns .btn{width:100%;justify-content:center;}
  .cta-strip .btns{flex-direction:column;align-items:center;}
  .gallery-strip{height:120px;}
  .gal-item .gal-lbl{display:none;}
  .bbee-circle{align-self:center;}
  .bbee-grid{justify-items:center;text-align:left;}
  .about-body .btns{flex-direction:column;}
  .about-body .btns .btn{width:100%;justify-content:center;}
}

/* ================================================================
   TOUCH/HOVER MEDIA
   ================================================================ */
@media(hover:none){
  .prod-card:hover .prod-img{filter:saturate(.75)brightness(.78);transform:none;}
  .gal-item{flex:1!important;}
  .gal-lbl{opacity:1!important;transform:none!important;}
}

/* ================================================================
   PRINT
   ================================================================ */
@media print{
  .nav,.hamburger,.nav-drawer,.hero-scroll{display:none!important;}
  body{background:#fff;color:#000;}
  .btn{display:none;}
}