/* ── VALVAX — Unified Stylesheet ─────────────────────────────────── */

@font-face {
  font-family: 'FPL Neu';
  src: local('FPL Neu'), local('FPLNeu');
  font-display: swap;
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* TOKENS */
:root {
  --em-1: #1A5C40;
  --em-2: #16513F;
  --em-3: #11382C;
  --em-4: #0C251D;
  --pu-1: #4A3159;
  --pu-2: #3A2750;
  --pu-3: #2C1B3C;
  --pu-4: #211230;
  --white: #F7FBF8;
  --cream: #E4F1E8;
  --mist:  #9AB9AB;
  --fog:   #6F8C7F;
  --rule-em: rgba(26,92,64,0.34);
  --rule-pu: rgba(74,49,89,0.4);
  --font-display: 'FPL Neu', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;
}

body[data-theme="light"] {
  --em-1: #1f7a55;
  --em-2: #2f9169;
  --em-3: #dcefe6;
  --em-4: #f4fbf7;
  --pu-1: #7a6190;
  --pu-2: #d6c9e5;
  --pu-3: #ece3f6;
  --pu-4: #f7f1fc;
  --white: #173328;
  --cream: #234137;
  --mist: #4f7062;
  --fog: #6e8d7f;
  --rule-em: rgba(31,122,85,.23);
  --rule-pu: rgba(122,97,144,.22);
}

html { scroll-behavior: smooth; }

body {
  background: var(--em-4);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 300;
  overflow-x: hidden;
}

body::after {
  content: '';
  position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  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='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
}

/* ── NAV ─────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 64px; transition: all 0.5s;
}
nav.scrolled {
  background: rgba(12,37,29,0.92);
  backdrop-filter: blur(20px);
  padding: 18px 64px;
  border-bottom: 1px solid var(--rule-em);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
}
.nav-logo {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700; letter-spacing: 7px;
  color: var(--white); text-decoration: none; text-transform: uppercase;
}
.nav-logo sup { font-size: 10px; letter-spacing: 1px; color: var(--em-1); font-family: var(--font-mono); }
.nav-links { display: flex; gap: 44px; list-style: none; }
.nav-links a {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--mist); text-decoration: none;
  transition: color 0.3s;
}
.nav-links a:hover, .nav-links a.active { color: var(--white); }
.nav-cta {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; padding: 11px 26px;
  border: 1px solid var(--em-1); color: var(--em-1); text-decoration: none;
  transition: all 0.35s; position: relative; overflow: hidden;
}
.nav-cta::before {
  content: ''; position: absolute; inset: 0; background: var(--em-1);
  transform: translateY(100%); transition: transform 0.35s;
}
.nav-cta:hover { color: var(--white); }
.nav-cta:hover::before { transform: translateY(0); }
.nav-cta span { position: relative; z-index: 1; }

/* ── SHARED UTILITIES ─────────────────── */
.container { max-width: 1240px; margin: 0 auto; padding: 0 64px; }

.sec-label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 5px;
  color: var(--em-1); text-transform: uppercase;
  display: flex; align-items: center; gap: 14px; margin-bottom: 52px;
}
.sec-label::before { content: ''; width: 24px; height: 1px; background: var(--em-1); }

.btn-fill {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--em-1); color: var(--white);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; padding: 15px 34px;
  text-decoration: none; transition: all 0.3s;
}
.btn-fill:hover { background: #22734F; transform: translateY(-2px); }

.btn-out {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--rule-pu); color: var(--mist);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; padding: 14px 28px;
  text-decoration: none; transition: all 0.3s;
}
.btn-out:hover { border-color: var(--pu-1); color: var(--white); }

/* ── REVEAL ANIMATION ─────────────────── */
.r { opacity: 0; transform: translateY(36px); transition: opacity 0.85s ease, transform 0.85s ease; }
.r.on { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: 0.1s; }
.d2 { transition-delay: 0.2s; }
.d3 { transition-delay: 0.3s; }
.d4 { transition-delay: 0.4s; }
.d5 { transition-delay: 0.5s; }

/* ── KEYFRAMES ─────────────────────────── */
@keyframes gspin    { to { transform: rotate(360deg); } }
@keyframes fup      { from { opacity:0; transform: translateY(28px); } to { opacity:1; transform: translateY(0); } }
@keyframes fin      { from { opacity:0; } to { opacity:1; } }
@keyframes marqroll { to   { transform: translateX(-50%); } }
@keyframes sp       { 0%,100%{opacity:.25} 50%{opacity:1} }
@keyframes chipfloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes scan     { 0%{top:10%;opacity:0} 10%{opacity:.6} 90%{opacity:.6} 100%{top:90%;opacity:0} }

/* ══════════════════════════════════════
   HOMEPAGE SECTIONS
══════════════════════════════════════ */

/* HERO */
#hero {
  position: relative; min-height: 100vh;
  display: grid; grid-template-columns: 1fr 460px;
  align-items: end; padding: 0 64px 90px;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 65% 65% at 78% 28%, rgba(74,49,89,.38) 0%, transparent 65%),
    radial-gradient(ellipse 45% 45% at 18% 72%, rgba(26,92,64,.22) 0%, transparent 60%),
    linear-gradient(165deg, var(--em-3) 0%, var(--em-4) 55%, var(--pu-4) 100%);
}

body[data-theme="light"] nav.scrolled {
  background: rgba(244,251,247,.9);
}
body[data-theme="light"] .search-overlay {
  background: rgba(244,251,247,.96);
}
body[data-theme="light"] #mobile-nav {
  background: rgba(244,251,247,.96);
}
body[data-theme="light"] .prod-card .pb {
  background: linear-gradient(135deg, #e6f5ee, #d7ece2) !important;
}
body[data-theme="light"] .prod-card .pb-pu {
  background: linear-gradient(135deg, #f3ecfb, #e7dbf4) !important;
}
.geo {
  position: absolute; border-radius: 50%; border: 1px solid;
}
.g1 { width:680px;height:680px;right:-170px;top:-150px;border-color:rgba(74,49,89,.2);animation:gspin 90s linear infinite; }
.g2 { width:460px;height:460px;right:-50px;top:-30px;border-color:rgba(26,92,64,.15);animation:gspin 60s linear infinite reverse; }
.g3 { width:270px;height:270px;right:90px;top:110px;border-color:rgba(74,49,89,.28);animation:gspin 35s linear infinite; }
.geo-tick { position:absolute;width:5px;height:5px;border-radius:50%;top:50%;left:-2.5px;background:var(--em-1);transform-origin:2.5px 50%; }

.vl { position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,rgba(26,92,64,.1) 20%,rgba(26,92,64,.1) 80%,transparent); }
.hl { position:absolute;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,rgba(74,49,89,.12) 30%,rgba(74,49,89,.12) 70%,transparent); }

.chip {
  position:absolute;font-family:var(--font-mono);font-size:9px;letter-spacing:2px;
  padding:6px 14px;border:1px solid var(--rule-em);color:var(--mist);
  background:rgba(5,26,21,.65);backdrop-filter:blur(8px);
  animation:chipfloat 6s ease-in-out infinite;
}
.chip:nth-child(2){animation-delay:-2s}
.chip:nth-child(3){animation-delay:-4s}

.hero-l { position:relative;z-index:2; }
.hero-motto-stack { display:flex;flex-direction:column;padding-bottom:8px;opacity:0;animation:fin 1.2s 1.4s forwards; }
.motto-word { font-family:var(--font-display);font-size:clamp(28px,3vw,40px);font-weight:700;letter-spacing:2px;line-height:1.15;color:var(--cream);text-transform:uppercase; }
.mdot { color:var(--em-1); }
.motto-stat-divider { width:100%;height:1px;background:linear-gradient(to right,var(--em-1),var(--rule-pu));margin:28px 0 4px;opacity:0;animation:fin 1.2s 1.6s forwards; }

.hero-eyebrow { display:flex;align-items:center;gap:14px;font-family:var(--font-mono);font-size:10px;letter-spacing:4px;color:var(--em-1);text-transform:uppercase;margin-bottom:36px;opacity:0;animation:fup .9s .3s forwards; }
.hero-eyebrow::before { content:'';width:24px;height:1px;background:var(--em-1); }
.hero-h { font-family:var(--font-display);font-size:clamp(68px,9.5vw,148px);line-height:0.91;font-weight:700;letter-spacing:-1px;margin-bottom:40px;opacity:0;animation:fup 1.1s .5s forwards; }
.hero-h .il { display:block;font-style:italic;font-weight:600;color:transparent;-webkit-text-stroke:1.5px var(--em-1); }
.hero-h .pl { display:block;color:var(--pu-1); }
.hero-desc { max-width:460px;font-size:15px;line-height:1.85;color:var(--mist);margin-bottom:52px;opacity:0;animation:fup 1s .8s forwards; }
.hero-btns { display:flex;gap:18px;align-items:center;opacity:0;animation:fup 1s 1.1s forwards; }

.hero-r { position:relative;z-index:2;border-left:1px solid var(--rule-em);padding-left:60px;opacity:0;animation:fin 1.2s 1.4s forwards; }
.hstat { padding:30px 0;border-bottom:1px solid var(--rule-em); }
.hstat:last-child { border-bottom:none; }
.hstat-big { font-family:var(--font-display);font-size:52px;line-height:1;font-weight:700;color:var(--white);margin-bottom:6px; }
.hstat-big sub { font-size:24px;color:var(--em-1); }
.hstat-lbl { font-family:var(--font-mono);font-size:8px;letter-spacing:3px;color:var(--fog);text-transform:uppercase; }

.hero-scroll { position:absolute;bottom:36px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;animation:fin 1s 2.2s forwards; }
.scroll-bar { width:1px;height:52px;background:linear-gradient(to bottom,var(--em-1),transparent);animation:sp 2.5s ease-in-out infinite; }
.scroll-lbl { font-family:var(--font-mono);font-size:8px;letter-spacing:4px;color:var(--fog);writing-mode:vertical-rl;text-transform:uppercase; }

/* MARQUEE */
.marq { padding:30px 0;overflow:hidden;border-top:1px solid var(--rule-em);border-bottom:1px solid var(--rule-em);background:var(--em-3); }
.marq-track { display:flex;gap:0;width:max-content;animation:marqroll 35s linear infinite; }
.marq-item { display:flex;align-items:center;font-family:var(--font-display);font-size:16px;letter-spacing:6px;font-weight:700;font-style:italic;color:var(--fog);text-transform:uppercase;padding:0 36px;white-space:nowrap;border-right:1px solid var(--rule-em); }
.marq-item.hi { color:var(--em-1); }

/* STORY */
#story { padding:160px 0;background:linear-gradient(180deg,var(--em-4) 0%,var(--em-3) 100%); }
.story-grid { display:grid;grid-template-columns:400px 1fr;gap:120px; }
.story-sticky { position:sticky;top:140px;align-self:start; }
.story-h { font-family:var(--font-display);font-size:clamp(44px,5vw,74px);font-weight:700;line-height:.95;margin-bottom:32px; }
.story-h em { font-style:italic;color:var(--pu-1); }
.story-p { font-size:14px;line-height:1.95;color:var(--mist); }
.story-p+.story-p { margin-top:18px; }
.story-badge { display:inline-flex;align-items:center;gap:8px;margin-top:36px;font-family:var(--font-mono);font-size:9px;letter-spacing:3px;color:var(--em-1);border:1px solid var(--rule-em);padding:8px 18px; }
.story-badge::before { content:'●';font-size:6px; }
.chapters { display:flex;flex-direction:column;gap:68px; }
.chapter { padding-left:36px;border-left:1px solid var(--rule-em);position:relative;transition:border-color .4s; }
.chapter::before { content:'';position:absolute;top:0;left:-1px;width:1px;height:0;background:var(--em-1);transition:height .6s ease; }
.chapter:hover { border-left-color:transparent; }
.chapter:hover::before { height:100%; }
.ch-num { font-family:var(--font-mono);font-size:9px;letter-spacing:3px;color:var(--pu-1);margin-bottom:18px; }
.ch-title { font-family:var(--font-display);font-size:28px;font-weight:700;margin-bottom:14px; }
.ch-body { font-size:14px;line-height:1.9;color:var(--mist); }
.ch-visual { margin-top:24px;width:100%;height:160px;background:var(--em-3);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center; }
.ch-grid { position:absolute;inset:0;background-image:linear-gradient(rgba(26,92,64,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(26,92,64,.06) 1px,transparent 1px);background-size:28px 28px; }
.ch-glow { position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(74,49,89,.15) 0%,transparent 70%); }
.ch-icon { font-size:48px;opacity:.18;position:relative;z-index:1; }

/* PROCESS */
#process { padding:160px 0;background:var(--pu-4);border-top:1px solid var(--rule-pu);border-bottom:1px solid var(--rule-pu); }
.proc-head { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:96px; }
.proc-h { font-family:var(--font-display);font-size:clamp(44px,5vw,80px);font-weight:700;line-height:.93; }
.proc-h em { font-style:italic;color:var(--pu-1); }
.proc-desc { max-width:300px;font-size:13px;line-height:1.85;color:var(--mist); }
.proc-track { display:grid;grid-template-columns:repeat(5,1fr);position:relative; }
.proc-track::before { content:'';position:absolute;top:40px;left:8%;right:8%;height:1px;background:linear-gradient(to right,transparent,var(--pu-2) 10%,var(--em-1) 30%,var(--pu-1) 50%,var(--em-1) 70%,var(--pu-2) 90%,transparent); }
.proc-step { padding:0 18px; }
.proc-orb { width:80px;height:80px;border-radius:50%;border:1px solid var(--rule-pu);background:var(--pu-3);display:flex;align-items:center;justify-content:center;margin-bottom:32px;transition:all .4s; }
.proc-step:hover .proc-orb { border-color:var(--pu-1);box-shadow:0 0 40px rgba(74,49,89,.5); }
.proc-dot { width:10px;height:10px;border-radius:50%;background:var(--pu-1);transition:background .3s; }
.proc-step:hover .proc-dot { background:var(--em-1); }
.proc-num { font-family:var(--font-mono);font-size:9px;letter-spacing:2px;color:var(--fog);margin-bottom:10px; }
.proc-name { font-family:var(--font-display);font-size:20px;font-weight:700;margin-bottom:12px;line-height:1.2; }
.proc-body { font-size:12px;line-height:1.75;color:var(--mist); }

/* PRODUCTS (homepage) */
#products { padding:160px 0;background:var(--em-3); }
.prod-intro { display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:72px; }
.prod-h { font-family:var(--font-display);font-size:clamp(44px,5vw,76px);font-weight:700;line-height:.9; }
.prod-h em { font-style:italic;color:var(--pu-1); }
.prod-sub { font-size:14px;line-height:1.85;color:var(--mist); }
.prod-grid-hp { display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:auto auto;gap:2px; }
.prod-card { position:relative;overflow:hidden;background:var(--em-4);min-height:256px;display:flex;flex-direction:column;justify-content:flex-end;padding:32px;cursor:pointer;transition:transform .4s; }
.prod-card.tall { grid-row:span 2;min-height:526px; }
.prod-card:hover { transform:scale(.985); }
.pb { position:absolute;inset:0;background:linear-gradient(135deg,var(--em-3),var(--em-4)); }
.pb-pu { background:linear-gradient(135deg,var(--pu-3),var(--pu-4)) !important; }
.po { position:absolute;inset:0;background-image:linear-gradient(rgba(26,92,64,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(26,92,64,.04) 1px,transparent 1px);background-size:24px 24px; }
.pg { position:absolute;inset:0;background:radial-gradient(ellipse at 25% 25%,rgba(26,92,64,.18),transparent 65%);opacity:0;transition:opacity .5s; }
.pg-pu { background:radial-gradient(ellipse at 25% 25%,rgba(74,49,89,.22),transparent 65%) !important; }
.prod-card:hover .pg { opacity:1; }
.hp-prod-photo {
  position: absolute;
  inset: 22px;
  width: calc(100% - 44px);
  height: calc(100% - 44px);
  object-fit: contain;
  object-position: center;
  z-index: 1;
  opacity: .9;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.46));
  transition: transform .35s ease, opacity .35s ease;
}
.prod-card:hover .hp-prod-photo { transform: scale(1.03); opacity: .96; }
.psym { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:96px;opacity:.07;color:var(--em-1);transition:all .5s;z-index:0; }
.prod-card:hover .psym { opacity:.15;transform:translate(-50%,-50%) scale(1.1); }
.parrow { position:absolute;top:24px;right:24px;z-index:3;width:36px;height:36px;border-radius:50%;border:1px solid var(--rule-em);display:flex;align-items:center;justify-content:center;color:var(--fog);font-size:13px;transition:all .3s; }
.prod-card:hover .parrow { border-color:var(--em-1);color:var(--em-1);transform:rotate(45deg); }
.ptag { font-family:var(--font-mono);font-size:8px;letter-spacing:4px;color:var(--em-1);text-transform:uppercase;margin-bottom:10px;position:relative;z-index:2; }
.ptag-pu { color:var(--pu-1) !important; }
.pname { font-family:var(--font-display);font-size:30px;font-weight:700;line-height:1;margin-bottom:10px;position:relative;z-index:2; }
.pdesc { font-size:12px;line-height:1.7;color:var(--mist);position:relative;z-index:2; }

/* INDUSTRIES (homepage) */
#industries { padding:160px 0;background:var(--pu-4);border-top:1px solid var(--rule-pu); }
.ind-top { display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:80px; }
.ind-h { font-family:var(--font-display);font-size:clamp(44px,5vw,76px);font-weight:700;line-height:.93; }
.ind-h em { color:var(--pu-1);font-style:italic; }
.ind-note { font-size:13px;color:var(--mist);max-width:280px;text-align:right; }
.ind-row { display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--rule-pu); }
.ind-item { padding:48px 28px;border-right:1px solid var(--rule-pu);transition:background .35s; }
.ind-item:last-child { border-right:none; }
.ind-item:hover { background:rgba(74,49,89,.15); }
.ind-num { font-family:var(--font-mono);font-size:8px;letter-spacing:3px;color:var(--pu-1);margin-bottom:20px; }
.ind-icon { font-size:30px;margin-bottom:16px; }
.ind-name { font-family:var(--font-display);font-size:22px;font-weight:700;margin-bottom:12px; }
.ind-sub { font-size:12px;line-height:1.75;color:var(--mist); }

/* STATEMENT */
#statement { border-top:1px solid rgba(26,92,64,.4);overflow:hidden; }
.stmt-wrap { display:grid;grid-template-columns:1fr 1fr; }
.stmt-l { padding:100px 64px;background:var(--em-1);border-right:1px solid rgba(255,255,255,.1); }
.stmt-r { padding:100px 64px;background:var(--pu-2); }
.stmt-q { font-family:var(--font-display);font-size:clamp(26px,3vw,42px);font-style:italic;font-weight:600;line-height:1.35;color:var(--em-4); }
.stmt-q-r { color:var(--white); }
.stmt-a { font-family:var(--font-mono);font-size:9px;letter-spacing:3px;color:rgba(5,26,21,.45);margin-top:24px;text-transform:uppercase; }
.stmt-a-r { color:var(--mist); }

/* VALUES */
#values { padding:160px 0;background:var(--em-3); }
.val-grid { display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:72px; }
.val-card { padding:56px;background:var(--em-4);position:relative;overflow:hidden;transition:background .35s; }
.val-card:hover { background:#061E14; }
.val-top { position:absolute;top:0;left:0;right:0;height:2px;background:transparent;transition:background .4s; }
.val-card:hover .val-top { background:linear-gradient(to right,var(--em-1),var(--pu-1),transparent); }
.val-icon { font-size:34px;margin-bottom:26px; }
.val-name { font-family:var(--font-display);font-size:28px;font-weight:700;line-height:1.15;margin-bottom:18px; }
.val-body { font-size:14px;line-height:1.9;color:var(--mist); }

/* CTA SECTION */
#cta { padding:180px 64px 120px;background:var(--pu-4);border-top:1px solid var(--rule-pu);text-align:center;position:relative;overflow:hidden; }
#cta::before { content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;height:700px;border-radius:50%;background:radial-gradient(ellipse,rgba(74,49,89,.22) 0%,transparent 70%);pointer-events:none; }
#cta::after { content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:380px;height:380px;border-radius:50%;background:radial-gradient(ellipse,rgba(26,92,64,.12) 0%,transparent 70%);pointer-events:none; }
.cta-eye { font-family:var(--font-mono);font-size:10px;letter-spacing:5px;color:var(--em-1);text-transform:uppercase;margin-bottom:40px;position:relative;z-index:1; }
.cta-h { font-family:var(--font-display);font-size:clamp(60px,9vw,130px);font-weight:700;line-height:.88;letter-spacing:-1px;margin-bottom:48px;position:relative;z-index:1; }
.cta-h em { font-style:italic;color:var(--pu-1); }
.cta-sub { font-size:15px;line-height:1.8;color:var(--mist);max-width:500px;margin:0 auto 64px;position:relative;z-index:1; }
.cta-btns { display:flex;justify-content:center;gap:20px;position:relative;z-index:1; }
.cta-contact { margin-top:100px;padding-top:60px;border-top:1px solid var(--rule-pu);display:grid;grid-template-columns:repeat(3,1fr);text-align:left;position:relative;z-index:1; }
.cta-col { padding:0 48px; }
.cta-col:first-child { padding-left:0;border-right:1px solid var(--rule-pu); }
.cta-col:last-child { padding-right:0;border-left:1px solid var(--rule-pu); }
.cta-lbl { font-family:var(--font-mono);font-size:8px;letter-spacing:4px;color:var(--em-1);text-transform:uppercase;margin-bottom:14px; }
.cta-val { font-size:14px;line-height:1.8;color:var(--mist); }
.cta-val a { color:var(--cream);text-decoration:none; }
.cta-val a:hover { color:var(--em-1); }

/* FOOTER */
footer { padding:36px 64px;border-top:1px solid var(--rule-em);background:var(--em-4);display:flex;align-items:center;justify-content:space-between; }
.flogo { font-family:var(--font-display);font-size:18px;letter-spacing:6px;font-weight:700;color:var(--white);text-transform:uppercase; }
.flogo span { color:var(--em-1); }
.fcopy { font-family:var(--font-mono);font-size:9px;letter-spacing:2px;color:var(--fog); }
.flinks { display:flex;gap:28px; }
.flinks a { font-family:var(--font-mono);font-size:9px;letter-spacing:2px;color:var(--fog);text-decoration:none;text-transform:uppercase;transition:color .3s; }
.flinks a:hover { color:var(--em-1); }

/* Product page footer variant */
.footer-inner { display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:80px 0 48px; }
.footer-brand .nav-logo { font-size:20px; }
.footer-brand p { font-size:13px;line-height:1.85;color:var(--mist);margin-top:16px;max-width:280px; }
.footer-links { display:grid;grid-template-columns:1fr 1fr;gap:48px; }
.footer-links h4 { font-family:var(--font-mono);font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--em-1);margin-bottom:20px; }
.footer-links ul { list-style:none;display:flex;flex-direction:column;gap:10px; }
.footer-links ul a { font-size:13px;color:var(--mist);text-decoration:none;transition:color .3s; }
.footer-links ul a:hover { color:var(--white); }
.footer-bottom { border-top:1px solid var(--rule-em);padding:24px 0;display:flex;justify-content:space-between;align-items:center; }
.footer-bottom span { font-family:var(--font-mono);font-size:9px;letter-spacing:2px;color:var(--fog); }

/* ══════════════════════════════════════
   PRODUCTS PAGE
══════════════════════════════════════ */

/* PAGE HERO (products.html) */
.ph {
  position:relative;min-height:54vh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 64px 80px;overflow:hidden;
}
.ph-bg {
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 70% at 85% 20%,rgba(74,49,89,.45) 0%,transparent 60%),
    radial-gradient(ellipse 40% 50% at 15% 80%,rgba(26,92,64,.2) 0%,transparent 55%),
    linear-gradient(160deg,#0A2920 0%,#051A15 50%,#150A1C 100%);
}
.ph-geo { position:absolute;border-radius:50%;border:1px solid;animation:gspin 90s linear infinite; }
.ph-g1 { width:500px;height:500px;right:-100px;top:-180px;border-color:rgba(74,49,89,.18); }
.ph-g2 { width:320px;height:320px;right:20px;top:-60px;border-color:rgba(26,92,64,.12);animation-direction:reverse;animation-duration:60s; }
.ph-vl { position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,rgba(26,92,64,.1) 20%,rgba(26,92,64,.1) 80%,transparent); }
.ph-hl { position:absolute;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,rgba(74,49,89,.12) 30%,rgba(74,49,89,.12) 70%,transparent); }
.ph-breadcrumb { position:relative;z-index:2;font-family:var(--font-mono);font-size:9px;letter-spacing:3px;color:var(--fog);text-transform:uppercase;margin-bottom:32px;display:flex;align-items:center;gap:10px; }
.ph-breadcrumb a { color:var(--fog);text-decoration:none;transition:color .3s; }
.ph-breadcrumb a:hover { color:var(--em-1); }
.ph-breadcrumb span { color:var(--mist); }
.ph-title { position:relative;z-index:2;font-family:var(--font-display);font-size:clamp(56px,8vw,120px);font-weight:700;line-height:.91;letter-spacing:-1px;opacity:0;animation:fup 1s .2s forwards; }
.ph-title em { font-style:italic;color:var(--pu-1); }
.ph-sub { position:relative;z-index:2;font-size:14px;line-height:1.85;color:var(--mist);max-width:540px;margin-top:28px;opacity:0;animation:fup 1s .5s forwards; }
.ph-stats { position:absolute;bottom:80px;right:64px;z-index:2;display:flex;gap:48px;opacity:0;animation:fin 1s .8s forwards; }
.ph-stat { text-align:right; }
.ph-stat-n { font-family:var(--font-display);font-size:44px;font-weight:700;color:var(--white);line-height:1; }
.ph-stat-n sub { font-size:22px;color:var(--em-1); }
.ph-stat-l { font-family:var(--font-mono);font-size:8px;letter-spacing:3px;color:var(--fog);text-transform:uppercase;margin-top:4px; }

/* FILTER BAR */
.filter-bar { position:sticky;top:65px;z-index:100;background:rgba(5,26,21,.96);backdrop-filter:blur(20px);border-bottom:1px solid var(--rule-em);padding:0 64px;display:flex;align-items:center;gap:0;overflow-x:auto; }
.filter-btn { font-family:var(--font-mono);font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--fog);padding:20px 28px;border:none;background:none;cursor:pointer;transition:all .3s;border-bottom:2px solid transparent;white-space:nowrap; }
.filter-btn:hover { color:var(--cream); }
.filter-btn.active { color:var(--em-1);border-bottom-color:var(--em-1); }
.filter-count { font-size:8px;background:var(--em-2);color:var(--em-1);padding:2px 6px;margin-left:6px;border-radius:2px; }

/* CATALOG GRID */
.catalog { padding:80px 64px 160px;background:var(--em-3); }
.catalog-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:48px;padding-bottom:24px;border-bottom:1px solid var(--rule-em); }
.catalog-total { font-family:var(--font-mono);font-size:9px;letter-spacing:3px;color:var(--fog);text-transform:uppercase; }
.catalog-total span { color:var(--em-1); }
.prod-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:2px; }

/* PRODUCT CARD */
.pcard { position:relative;overflow:hidden;background:var(--em-4);display:flex;flex-direction:column;cursor:pointer;transition:transform .4s;text-decoration:none;color:inherit; }
.pcard:hover { transform:scale(.985); }
.pcard-img { height:240px;position:relative;background:linear-gradient(135deg,var(--em-3),var(--em-4));display:flex;align-items:center;justify-content:center;overflow:hidden; }
.pcard-photo {
  position: absolute;
  inset: 14px;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  object-fit: contain;
  object-position: center;
  z-index: 1;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.5));
  transition: transform .35s ease;
}
.pcard:hover .pcard-photo { transform: scale(1.03); }
.pcard-sym { font-size:80px;color:var(--em-1);opacity:.12;transition:opacity .5s,transform .5s; }
.pcard:hover .pcard-sym { opacity:.22;transform:scale(1.1); }
.pcard-bg-grid { position:absolute;inset:0;background-image:linear-gradient(rgba(26,92,64,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(26,92,64,.04) 1px,transparent 1px);background-size:24px 24px; }
.pcard-glow { position:absolute;inset:0;background:radial-gradient(ellipse at 30% 40%,rgba(26,92,64,.18),transparent 65%);opacity:0;transition:opacity .5s; }
.pcard:hover .pcard-glow { opacity:1; }
.pcard-arrow { position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;border:1px solid var(--rule-em);display:flex;align-items:center;justify-content:center;color:var(--fog);font-size:13px;transition:all .35s; }
.pcard:hover .pcard-arrow { border-color:var(--em-1);color:var(--em-1);transform:rotate(45deg); }
.pcard-body { padding:28px 28px 32px; }
.pcard-category { font-family:var(--font-mono);font-size:8px;letter-spacing:4px;text-transform:uppercase;color:var(--em-1);margin-bottom:10px; }
.pcard-name { font-family:var(--font-display);font-size:26px;font-weight:700;line-height:1.05;margin-bottom:12px;color:var(--white); }
.pcard-spec-row { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px; }
.spec-pill { font-family:var(--font-mono);font-size:8px;letter-spacing:2px;padding:4px 10px;background:rgba(26,92,64,.15);border:1px solid var(--rule-em);color:var(--mist); }
.pcard-footer { display:flex;justify-content:space-between;align-items:center;padding:16px 28px;border-top:1px solid var(--rule-em);background:rgba(0,0,0,.12); }
.pcard-std { font-family:var(--font-mono);font-size:8px;letter-spacing:2px;color:var(--fog);text-transform:uppercase; }
.pcard-link { font-family:var(--font-mono);font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--em-1);display:flex;align-items:center;gap:6px;transition:gap .3s; }
.pcard:hover .pcard-link { gap:10px; }

/* SECTION BREAK */
.sec-break { grid-column:span 3;padding:32px 0 16px;display:flex;align-items:center;gap:20px; }
.sb-line { flex:1;height:1px;background:var(--rule-em); }
.sb-label { font-family:var(--font-mono);font-size:9px;letter-spacing:4px;color:var(--em-1);text-transform:uppercase;white-space:nowrap; }

/* STANDARDS BAR */
.standards-bar { padding:60px 64px;background:var(--pu-4);border-top:1px solid var(--rule-pu);border-bottom:1px solid var(--rule-pu); }
.sb-inner { display:grid;grid-template-columns:280px 1fr;gap:80px;align-items:center; }
.sb-hd { font-family:var(--font-display);font-size:clamp(28px,3vw,42px);font-weight:700;line-height:1.1; }
.sb-hd em { font-style:italic;color:var(--pu-1); }
.standards-row { display:flex;flex-wrap:wrap;gap:12px; }
.std-badge { font-family:var(--font-mono);font-size:9px;letter-spacing:2px;padding:10px 18px;border:1px solid var(--rule-pu);color:var(--mist);text-transform:uppercase;transition:all .3s; }
.std-badge:hover { border-color:var(--pu-1);color:var(--white);background:rgba(74,49,89,.1); }

/* CTA STRIP (products page) */
.cta-strip { padding:120px 64px;background:var(--pu-4);text-align:center;position:relative;overflow:hidden; }
.cta-strip::before { content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;border-radius:50%;background:radial-gradient(ellipse,rgba(74,49,89,.22) 0%,transparent 70%);pointer-events:none; }
.cta-strip-eye { font-family:var(--font-mono);font-size:10px;letter-spacing:5px;color:var(--em-1);text-transform:uppercase;margin-bottom:32px;position:relative;z-index:1; }
.cta-strip-h { font-family:var(--font-display);font-size:clamp(48px,7vw,100px);font-weight:700;line-height:.9;letter-spacing:-1px;margin-bottom:40px;position:relative;z-index:1; }
.cta-strip-h em { font-style:italic;color:var(--pu-1); }
.cta-strip-sub { font-size:15px;line-height:1.8;color:var(--mist);max-width:460px;margin:0 auto 52px;position:relative;z-index:1; }

/* ══════════════════════════════════════
   INDUSTRIES PAGE
══════════════════════════════════════ */
.industries-hero { position:relative;min-height:60vh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 64px 80px;overflow:hidden; }
.ind-page-bg { position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 80% 20%,rgba(74,49,89,.45) 0%,transparent 60%),radial-gradient(ellipse 40% 50% at 15% 80%,rgba(26,92,64,.2) 0%,transparent 55%),linear-gradient(160deg,#0A2920 0%,#051A15 50%,#150A1C 100%); }
.ind-section { padding:120px 0; }
.ind-section:nth-child(odd) { background:var(--em-3); }
.ind-section:nth-child(even) { background:var(--pu-4); }
.ind-section-inner { display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start; }
.ind-section-title { font-family:var(--font-display);font-size:clamp(40px,5vw,72px);font-weight:700;line-height:.93;margin-bottom:32px; }
.ind-section-title em { font-style:italic;color:var(--pu-1); }
.ind-section-body { font-size:14px;line-height:1.9;color:var(--mist);margin-bottom:24px; }
.ind-apps { display:flex;flex-direction:column;gap:0; }
.ind-app { display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--rule-em);font-size:13px;color:var(--mist); }
.ind-app:last-child { border-bottom:none; }
.ind-app::before { content:'›';color:var(--em-1);font-size:16px;flex-shrink:0; }
.ind-valve-list { display:flex;flex-direction:column;gap:8px; }
.ind-valve-item { font-family:var(--font-mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:12px 20px;border:1px solid var(--rule-em);color:var(--mist);transition:all .3s; }
.ind-valve-item:hover { border-color:var(--em-1);color:var(--cream); }

/* ══════════════════════════════════════
   PRODUCT DETAIL PAGES
══════════════════════════════════════ */

/* PROD HERO */
.prod-hero { position:relative;min-height:100vh;display:grid;grid-template-columns:1fr 1fr;overflow:hidden; }
.ph-left { position:relative;z-index:2;padding:160px 64px 80px;display:flex;flex-direction:column;justify-content:flex-end;background:radial-gradient(ellipse 50% 60% at 10% 80%,rgba(26,92,64,.2) 0%,transparent 60%),linear-gradient(160deg,#0A2920,#051A15 60%,#0F3D2E); }
.ph-right { position:relative;z-index:2;background:radial-gradient(ellipse 70% 80% at 60% 30%,rgba(74,49,89,.3) 0%,transparent 60%),linear-gradient(200deg,var(--pu-3),var(--em-4) 50%,var(--em-3));display:flex;align-items:center;justify-content:center;overflow:hidden; }
.prod-photo {
  position: absolute;
  inset: 54px 44px;
  width: calc(100% - 88px);
  height: calc(100% - 108px);
  object-fit: contain;
  object-position: center;
  z-index: 2;
  filter: drop-shadow(0 28px 42px rgba(0,0,0,.6));
}
.ph-right-bg-grid { position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(26,92,64,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(26,92,64,.05) 1px,transparent 1px);background-size:32px 32px; }

/* Geo rings on product hero right */
.ph-geo-r { position:absolute;z-index:0;border-radius:50%;border:1px solid;animation:gspin 90s linear infinite; }
.ph-gr1 { width:600px;height:600px;border-color:rgba(74,49,89,.15);animation-duration:80s; }
.ph-gr2 { width:420px;height:420px;border-color:rgba(26,92,64,.1);animation-direction:reverse;animation-duration:55s; }
.ph-gr3 { width:260px;height:260px;border-color:rgba(74,49,89,.2);animation-duration:35s; }

/* Product geo hex for pages without images */
.ph-geo { position:relative;z-index:1;width:320px;height:320px;display:flex;align-items:center;justify-content:center;opacity:.45; }
.geo-ring { position:absolute;border-radius:50%;border:1px solid; }
.geo-ring.r1 { width:300px;height:300px;border-color:rgba(74,49,89,.2);animation:gspin 60s linear infinite; }
.geo-ring.r2 { width:210px;height:210px;border-color:rgba(26,92,64,.15);animation:gspin 40s linear infinite reverse; }
.geo-ring.r3 { width:130px;height:130px;border-color:rgba(74,49,89,.25);animation:gspin 25s linear infinite; }
.geo-hex { width:80px;height:80px;background:rgba(26,92,64,.15);border:1px solid var(--rule-em);transform:rotate(45deg); }

.ph-breadcrumb { position:relative;z-index:2;font-family:var(--font-mono);font-size:9px;letter-spacing:3px;color:var(--fog);text-transform:uppercase;margin-bottom:40px;display:flex;align-items:center;gap:8px;opacity:0;animation:fup .8s .1s forwards; }
.ph-breadcrumb a { color:var(--fog);text-decoration:none;transition:color .3s; }
.ph-breadcrumb a:hover { color:var(--em-1); }
.breadcrumb { font-family:var(--font-mono);font-size:9px;letter-spacing:3px;color:var(--fog);text-transform:uppercase;margin-bottom:40px;display:flex;align-items:center;gap:8px; }
.breadcrumb a { color:var(--fog);text-decoration:none;transition:color .3s; }
.breadcrumb a:hover { color:var(--em-1); }
.ph-cat { font-family:var(--font-mono);font-size:9px;letter-spacing:4px;color:var(--em-1);text-transform:uppercase;margin-bottom:20px;display:flex;align-items:center;gap:14px;opacity:0;animation:fup .8s .2s forwards; }
.ph-cat::before { content:'';width:24px;height:1px;background:var(--em-1); }
.ph-name, .prod-hero h1 { font-family:var(--font-display);font-size:clamp(48px,6vw,84px);font-weight:700;line-height:.91;letter-spacing:-1px;margin-bottom:28px;opacity:0;animation:fup 1s .35s forwards; }
.ph-tag, .prod-hero .ph-tagline { font-size:15px;line-height:1.85;color:var(--mist);max-width:420px;margin-bottom:48px;opacity:0;animation:fup 1s .5s forwards; }
.ph-pills { display:flex;flex-wrap:wrap;gap:10px;margin-bottom:48px;opacity:0;animation:fup 1s .6s forwards; }
.ph-pill { font-family:var(--font-mono);font-size:9px;letter-spacing:2px;padding:7px 16px;background:rgba(26,92,64,.15);border:1px solid var(--rule-em);color:var(--cream); }
.ph-btns { display:flex;gap:16px;opacity:0;animation:fup 1s .75s forwards; }

/* SPEC SECTION */
.spec-section { padding:120px 0;background:linear-gradient(180deg,var(--em-3) 0%,var(--em-4) 100%);border-top:1px solid var(--rule-em); }
.spec-grid { display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start; }
.spec-left {}
.spec-left h2 { font-family:var(--font-display);font-size:clamp(36px,4vw,60px);font-weight:700;line-height:.95;margin-bottom:32px; }
.spec-left h2 em { font-style:italic;color:var(--pu-1); }
.spec-body, .spec-section p { font-size:14px;line-height:1.95;color:var(--mist);margin-bottom:20px; }
.spec-highlights { display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:40px; }
.sh-card { background:var(--em-4);padding:28px;border-left:2px solid var(--em-1); }
.sh-num { font-family:var(--font-display);font-size:38px;font-weight:700;color:var(--white);line-height:1; }
.sh-num sub { font-size:18px;color:var(--em-1); }
.sh-label { font-family:var(--font-mono);font-size:8px;letter-spacing:3px;color:var(--fog);text-transform:uppercase;margin-top:6px; }
.spec-right {}
.spec-table { width:100%;border-collapse:collapse; }
.spec-table th { font-family:var(--font-mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--fog);padding:14px 0;border-bottom:1px solid var(--rule-em);text-align:left; }
.spec-table tr { border-bottom:1px solid var(--rule-em); }
.spec-table tr:last-child { border-bottom:none; }
.spec-table td { padding:18px 0;vertical-align:top;font-size:13px;line-height:1.6; }
.spec-table td:first-child { font-family:var(--font-mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--fog);width:180px;padding-right:24px; }
.spec-table td:last-child { color:var(--cream); }

/* MATRIX SECTION */
.matrix-section { padding:120px 0;background:var(--pu-4);border-top:1px solid var(--rule-pu);border-bottom:1px solid var(--rule-pu); }
.matrix-head { display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:72px; }
.matrix-title { font-family:var(--font-display);font-size:clamp(36px,4vw,60px);font-weight:700;line-height:.95; }
.matrix-title em { font-style:italic;color:var(--pu-1); }
.matrix-note { font-size:13px;line-height:1.85;color:var(--mist); }
.matrix-table { width:100%;border-collapse:collapse; }
.matrix-table th { font-family:var(--font-mono);font-size:8px;letter-spacing:3px;text-transform:uppercase;color:var(--fog);padding:16px 20px;text-align:left;border-bottom:1px solid var(--rule-pu); }
.matrix-table th:first-child { color:var(--pu-1); }
.matrix-table td { padding:18px 20px;font-size:13px;color:var(--mist);border-bottom:1px solid rgba(74,49,89,.15); }
.matrix-table td:first-child { font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--cream); }
.matrix-table tr:hover td { background:rgba(74,49,89,.08); }
.avail { color:var(--em-1);font-family:var(--font-mono);font-size:10px; }
.unavail { color:var(--fog);font-family:var(--font-mono);font-size:10px; }
.custom { color:var(--pu-1);font-family:var(--font-mono);font-size:10px; }

/* MATERIALS SECTION */
.materials-section { padding:120px 0;background:var(--em-3); }
.mat-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:0; }
.mat-card { background:var(--em-4);padding:40px;position:relative;overflow:hidden;transition:background .3s; }
.mat-card:hover { background:#061E14; }
.mat-icon { font-size:28px;margin-bottom:16px;color:var(--em-1); }
.mat-card h3 { font-family:var(--font-display);font-size:22px;font-weight:700;margin-bottom:10px;line-height:1.1; }
.mat-grade { font-family:var(--font-mono);font-size:9px;letter-spacing:3px;color:var(--em-1);text-transform:uppercase;margin-bottom:12px; }
.mat-card p { font-size:13px;line-height:1.75;color:var(--mist); }
.mat-card-top { height:2px;position:absolute;top:0;left:0;right:0;background:transparent;transition:background .4s; }
.mat-card:hover .mat-card-top { background:linear-gradient(to right,var(--em-1),transparent); }

/* APPLICATIONS SECTION */
.app-section { padding:120px 0;background:var(--em-4);border-top:1px solid var(--rule-em); }
.app-grid { display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--rule-em);margin-top:0; }
.app-tile { padding:44px 28px;border-right:1px solid var(--rule-em);transition:background .35s; }
.app-tile:last-child { border-right:none; }
.app-tile:hover { background:rgba(26,92,64,.06); }
.app-icon { font-size:28px;margin-bottom:14px; }
.app-tile h3 { font-family:var(--font-display);font-size:18px;font-weight:700;margin-bottom:10px; }
.app-tile p { font-size:12px;line-height:1.75;color:var(--mist); }

/* VARIANTS SECTION */
.variants-section { padding:120px 0;background:var(--pu-4);border-top:1px solid var(--rule-pu); }
.var-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:0; }
.var-card { background:rgba(0,0,0,.2);padding:40px 36px;position:relative;overflow:hidden;border:1px solid var(--rule-pu);transition:background .3s; }
.var-card:hover { background:rgba(74,49,89,.12);border-color:var(--pu-1); }
.var-card h3 { font-family:var(--font-display);font-size:22px;font-weight:700;margin-bottom:20px;line-height:1.05; }
.var-card ul { list-style:none;display:flex;flex-direction:column;gap:0; }
.var-card ul li { font-size:13px;color:var(--mist);padding:10px 0;border-bottom:1px solid var(--rule-pu);display:flex;align-items:center;gap:10px; }
.var-card ul li:last-child { border-bottom:none; }
.var-card ul li::before { content:'—';color:var(--em-1);font-size:10px;flex-shrink:0; }

/* RELATED SECTION */
.related-section { padding:120px 0;background:var(--em-3);border-top:1px solid var(--rule-em); }
.rel-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:0; }
.rel-card { display:block;text-decoration:none;color:inherit;position:relative;overflow:hidden;background:var(--em-4);padding:40px;transition:transform .4s;border-bottom:2px solid transparent; }
.rel-card:hover { transform:scale(.985);border-bottom-color:var(--em-1); }
.rel-cat { font-family:var(--font-mono);font-size:8px;letter-spacing:4px;text-transform:uppercase;color:var(--em-1);margin-bottom:14px; }
.rel-card h3 { font-family:var(--font-display);font-size:24px;font-weight:700;margin-bottom:16px;line-height:1.05; }
.rel-link { font-family:var(--font-mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--fog);transition:color .3s; }
.rel-card:hover .rel-link { color:var(--em-1); }

/* CTA STRIP (product pages) */
.cta-strip-product { padding:120px 0;background:var(--pu-4);text-align:center;position:relative;overflow:hidden; }
.cta-strip-product::before { content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;border-radius:50%;background:radial-gradient(ellipse,rgba(74,49,89,.22) 0%,transparent 70%);pointer-events:none; }
.cta-strip-product .container { position:relative;z-index:1; }
.cta-strip-product h2 { font-family:var(--font-display);font-size:clamp(40px,6vw,80px);font-weight:700;line-height:.93;margin-bottom:24px; }
.cta-strip-product p { font-size:15px;line-height:1.8;color:var(--mist);max-width:500px;margin:0 auto 48px; }
.cta-strip-product .cta-btns { justify-content:center; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 960px) {
  nav, footer { padding-left: 24px; padding-right: 24px; }
  nav.scrolled { padding-left: 24px; padding-right: 24px; }
  .nav-links, .nav-cta { display: none; }
  .container { padding: 0 24px; }

  /* Homepage */
  #hero { grid-template-columns: 1fr; padding: 120px 24px 80px; min-height: auto; }
  .hero-r { border-left: none; border-top: 1px solid var(--rule-em); padding-left: 0; padding-top: 40px; }
  .story-grid, .proc-head, .prod-intro, .ind-top, .stmt-wrap, .val-grid, .cta-contact { grid-template-columns: 1fr; }
  .story-sticky { position: static; }
  .proc-track { grid-template-columns: 1fr 1fr; gap: 32px; }
  .proc-track::before { display: none; }
  .prod-grid-hp { grid-template-columns: 1fr; }
  .prod-card.tall { grid-row: auto; }
  .ind-row { grid-template-columns: 1fr; }
  .ind-item { border-right: none; border-top: 1px solid var(--rule-pu); }
  .stmt-l, .stmt-r { padding: 64px 24px; }
  .cta-col { padding: 20px 0 !important; border: none !important; }
  #cta { padding: 100px 24px 80px; }
  footer { flex-direction: column; gap: 20px; text-align: center; }

  /* Products page */
  .ph, .catalog, .filter-bar, .standards-bar, .cta-strip { padding-left: 24px; padding-right: 24px; }
  .prod-grid { grid-template-columns: 1fr; }
  .sec-break { grid-column: span 1; }
  .sb-inner { grid-template-columns: 1fr; gap: 32px; }
  .ph-stats { position: static; margin-top: 32px; justify-content: flex-start; }

  /* Product detail pages */
  .prod-hero { grid-template-columns: 1fr; min-height: auto; }
  .ph-left { padding: 120px 24px 60px; }
  .ph-right { min-height: 360px; }
  .prod-photo { inset: 28px 24px; width: calc(100% - 48px); height: calc(100% - 56px); }
  .spec-grid, .matrix-head, .ind-section-inner { grid-template-columns: 1fr; gap: 48px; }
  .mat-grid { grid-template-columns: 1fr 1fr; }
  .app-grid { grid-template-columns: 1fr 1fr; }
  .app-tile { border-right: none; border-bottom: 1px solid var(--rule-em); }
  .var-grid, .rel-grid { grid-template-columns: 1fr; }
  .spec-highlights { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 40px; padding: 60px 0 32px; }
  .footer-links { grid-template-columns: 1fr 1fr; }
  .cta-strip-product { padding: 80px 0; }
  .cta-strip { padding: 80px 24px; }
  .industries-hero { padding: 120px 24px 60px; }
}

@media (max-width: 600px) {
  .mat-grid { grid-template-columns: 1fr; }
  .app-grid { grid-template-columns: 1fr; }
  .spec-highlights { grid-template-columns: 1fr; }
  .ph-pills { gap: 6px; }
  .footer-links { grid-template-columns: 1fr; }
}

/* ── HAMBURGER MENU ─────────────────────────────── */
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 38px; height: 38px; background: none; border: 1px solid var(--rule-em);
  cursor: pointer; padding: 8px; transition: border-color .3s; flex-shrink: 0;
}
.nav-hamburger:hover { border-color: var(--em-1); }
.nav-hamburger span { display: block; width: 100%; height: 1px; background: var(--cream); transition: all .35s; }
nav.nav-open .nav-hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
nav.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; }
nav.nav-open .nav-hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── ACTIVE NAV ─────────────────────────────────── */
.nav-links a { position: relative; }
.nav-links a.active { color: var(--white); }
.nav-links a.active::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 1px; background: var(--em-1);
}

/* ── BACK TO TOP ────────────────────────────────── */
.back-to-top {
  position: fixed; bottom: 32px; right: 32px; z-index: 500;
  width: 48px; height: 48px; background: var(--em-1); color: var(--em-4);
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 20px; opacity: 0; pointer-events: none;
  transform: translateY(12px); transition: opacity .4s, transform .4s, background .3s;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { background: #22734F; }

/* ── PRODUCT SEARCH ─────────────────────────────── */
.search-wrap { padding: 0 64px; background: var(--em-3); border-bottom: 1px solid var(--rule-em); }
.prod-search {
  width: 100%; background: none; border: none; border-bottom: 1px solid var(--rule-em);
  color: var(--cream); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 2px; padding: 20px 0; outline: none; transition: border-color .3s;
}
.prod-search::placeholder { color: var(--fog); }
.prod-search:focus { border-bottom-color: var(--em-1); }

/* ── CONTACT FORM ───────────────────────────────── */
.contact-form { max-width: 680px; margin: 0 auto; position: relative; z-index: 1; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.cf-field { display: flex; flex-direction: column; gap: 8px; }
.cf-field.full { grid-column: span 2; }
.cf-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--em-1); }
.cf-input, .cf-select, .cf-textarea {
  background: rgba(26,92,64,.06); border: 1px solid var(--rule-em);
  color: var(--cream); font-family: var(--font-body); font-size: 14px;
  padding: 14px 18px; outline: none; transition: border-color .3s, background .3s; width: 100%;
}
.cf-select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.cf-textarea { resize: vertical; min-height: 130px; }
.cf-input:focus, .cf-select:focus, .cf-textarea:focus { border-color: var(--em-1); background: rgba(26,92,64,.1); }
.cf-error { font-family: var(--font-mono); font-size: 8px; letter-spacing: 2px; color: #c45c5c; display: none; }
.cf-field.has-error .cf-error { display: block; }
.cf-field.has-error .cf-input,
.cf-field.has-error .cf-select,
.cf-field.has-error .cf-textarea { border-color: #c45c5c; }
.cf-submit {
  margin-top: 28px; width: 100%; background: var(--em-1); color: var(--em-4);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px;
  text-transform: uppercase; padding: 18px; border: none; cursor: pointer; transition: background .3s;
}
.cf-submit:hover { background: #22734F; }
.cf-download-link { text-align: center; margin-top: 20px; position: relative; z-index: 1; }

/* ══════════════════════════════════════
   STORY PAGE
══════════════════════════════════════ */
.story-page-hero {
  position: relative; min-height: 65vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 64px 90px; overflow: hidden;
}
.story-page-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 80% 20%, rgba(74,49,89,.45) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 15% 80%, rgba(26,92,64,.2) 0%, transparent 55%),
    linear-gradient(160deg, #0A2920 0%, #051A15 50%, #150A1C 100%);
}
.story-page-hero h1 {
  font-family: var(--font-display); font-size: clamp(60px, 9vw, 128px);
  font-weight: 700; line-height: .9; letter-spacing: -1px;
  position: relative; z-index: 2;
  opacity: 0; animation: fup 1s .3s forwards;
}
.story-page-hero h1 em { font-style: italic; color: var(--pu-1); }

.origin-section { padding: 120px 0; background: var(--em-3); }
.origin-grid { display: grid; grid-template-columns: 1fr 420px; gap: 100px; align-items: start; }
.origin-text h2 { font-family: var(--font-display); font-size: clamp(38px, 5vw, 68px); font-weight: 700; line-height: .93; margin-bottom: 32px; }
.origin-text h2 em { font-style: italic; color: var(--em-1); }
.origin-text p { font-size: 14px; line-height: 1.95; color: var(--mist); margin-bottom: 18px; }
.origin-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ostat { background: var(--em-4); padding: 36px 28px; }
.ostat-big { font-family: var(--font-display); font-size: 52px; font-weight: 700; line-height: 1; color: var(--white); }
.ostat-big sub { font-size: 22px; color: var(--em-1); }
.ostat-lbl { font-family: var(--font-mono); font-size: 8px; letter-spacing: 3px; color: var(--fog); text-transform: uppercase; margin-top: 8px; }

.full-chapters { padding: 120px 0; background: var(--em-4); }
.chapter-full { display: grid; grid-template-columns: 100px 1fr; gap: 48px; padding: 72px 0; border-bottom: 1px solid var(--rule-em); align-items: start; }
.chapter-full:first-of-type { padding-top: 0; }
.chapter-full:last-child { border-bottom: none; padding-bottom: 0; }
.chf-num { font-family: var(--font-display); font-size: 56px; font-weight: 700; color: rgba(26,92,64,.12); line-height: 1; }
.chf-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: var(--em-1); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.chf-label::before { content: ''; width: 20px; height: 1px; background: var(--em-1); }
.chf-title { font-family: var(--font-display); font-size: clamp(32px, 4vw, 52px); font-weight: 700; line-height: .93; margin-bottom: 28px; }
.chf-body { font-size: 14px; line-height: 1.95; color: var(--mist); margin-bottom: 16px; }
.chf-specs { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; }
.chf-spec-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; padding: 8px 16px; border: 1px solid var(--rule-em); color: var(--mist); }

.timeline-section { padding: 120px 0; background: var(--pu-4); border-top: 1px solid var(--rule-pu); }
.timeline { margin-top: 64px; }
.tl-item { display: grid; grid-template-columns: 100px 1fr; gap: 40px; padding: 36px 0; border-bottom: 1px solid var(--rule-pu); align-items: start; }
.tl-item:last-child { border-bottom: none; }
.tl-year { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--pu-1); }
.tl-content h3 { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.tl-content p { font-size: 13px; line-height: 1.75; color: var(--mist); }

.certs-section { padding: 120px 0; background: var(--em-3); }
.certs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 64px; }
.cert-card { background: var(--em-4); padding: 40px; display: flex; flex-direction: column; gap: 14px; transition: background .3s; }
.cert-card:hover { background: #061E14; }
.cert-badge-label { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--em-1); }
.cert-name { font-family: var(--font-mono); font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--fog); }
.cert-desc { font-size: 12px; line-height: 1.75; color: var(--mist); }

.made-in-india { padding: 120px 0; background: var(--pu-4); border-top: 1px solid var(--rule-pu); }
.mii-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 64px; }
.mii-card { background: rgba(74,49,89,.1); padding: 48px 36px; border: 1px solid var(--rule-pu); transition: background .3s; }
.mii-card:hover { background: rgba(74,49,89,.2); }
.mii-icon { font-size: 32px; margin-bottom: 20px; }
.mii-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin-bottom: 14px; line-height: 1.1; }
.mii-body { font-size: 13px; line-height: 1.75; color: var(--mist); }

/* ══════════════════════════════════════
   PROCESS PAGE
══════════════════════════════════════ */
.process-page-hero {
  position: relative; min-height: 65vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 64px 90px; overflow: hidden;
}
.process-page-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 85% 25%, rgba(74,49,89,.45) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 10% 75%, rgba(26,92,64,.2) 0%, transparent 55%),
    linear-gradient(160deg, #150A1C 0%, #051A15 50%, #0A2920 100%);
}
.process-page-hero h1 {
  font-family: var(--font-display); font-size: clamp(60px, 9vw, 128px);
  font-weight: 700; line-height: .9; letter-spacing: -1px;
  position: relative; z-index: 2;
  opacity: 0; animation: fup 1s .3s forwards;
}
.process-page-hero h1 em { font-style: italic; color: var(--em-1); }

.proc-overview-bar {
  position: sticky; top: 65px; z-index: 100;
  background: rgba(5,26,21,.96); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--rule-em);
  padding: 0 64px; display: flex; align-items: center; overflow-x: auto;
}
.proc-pill {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--fog); padding: 20px 24px;
  text-decoration: none; transition: all .3s; border-bottom: 2px solid transparent; white-space: nowrap;
  display: flex; align-items: center; gap: 8px;
}
.proc-pill:hover { color: var(--cream); border-bottom-color: var(--rule-em); }
.proc-pill + .proc-pill { border-left: 1px solid var(--rule-em); }
.pill-num { color: var(--em-1); font-size: 8px; }

.proc-step-section { padding: 120px 0; scroll-margin-top: 120px; }
.proc-step-section:nth-child(odd) { background: var(--em-3); }
.proc-step-section:nth-child(even) { background: var(--pu-4); }
.pss-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.pss-header { margin-bottom: 40px; }
.pss-step-num { font-family: var(--font-mono); font-size: 9px; letter-spacing: 4px; color: var(--em-1); text-transform: uppercase; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.pss-step-num::before { content: ''; width: 20px; height: 1px; background: var(--em-1); }
.pss-title { font-family: var(--font-display); font-size: clamp(36px, 4vw, 60px); font-weight: 700; line-height: .93; }
.pss-title em { font-style: italic; color: var(--pu-1); }
.pss-body { font-size: 14px; line-height: 1.95; color: var(--mist); margin-bottom: 16px; }
.pss-callouts { margin-top: 28px; }
.pss-callout { padding: 14px 20px; border-left: 2px solid var(--em-1); background: rgba(26,92,64,.06); margin-bottom: 10px; }
.pss-callout-label { font-family: var(--font-mono); font-size: 8px; letter-spacing: 3px; color: var(--em-1); text-transform: uppercase; margin-bottom: 6px; }
.pss-callout-val { font-size: 13px; color: var(--cream); line-height: 1.5; }

.mat-table { width: 100%; border-collapse: collapse; }
.mat-table th { font-family: var(--font-mono); font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: var(--fog); padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--rule-em); }
.mat-table tr { border-bottom: 1px solid var(--rule-em); }
.mat-table tr:last-child { border-bottom: none; }
.mat-table td { padding: 14px 16px; font-size: 13px; color: var(--mist); }
.mat-table td:first-child { color: var(--cream); font-weight: 500; }
.mat-table tr:hover td { background: rgba(26,92,64,.05); }
.mat-table-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: var(--em-1); margin-bottom: 20px; }

.method-cards { display: flex; flex-direction: column; gap: 12px; }
.method-card { background: var(--em-4); padding: 28px 32px; border-left: 2px solid var(--rule-em); transition: border-color .3s; }
.method-card:hover { border-left-color: var(--em-1); }
.method-card h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.method-card p { font-size: 13px; line-height: 1.75; color: var(--mist); }
.method-meta { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.method-tag { font-family: var(--font-mono); font-size: 8px; letter-spacing: 2px; padding: 4px 10px; background: rgba(26,92,64,.12); border: 1px solid var(--rule-em); color: var(--fog); }

.quality-section { padding: 120px 0; background: var(--em-3); }
.quality-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 64px; }
.qp-card { background: var(--em-4); padding: 52px 40px; position: relative; overflow: hidden; }
.qp-top { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, var(--em-1), var(--pu-1), transparent); }
.qp-num { font-family: var(--font-display); font-size: 80px; font-weight: 700; color: rgba(26,92,64,.07); position: absolute; bottom: 12px; right: 16px; line-height: 1; }
.qp-title { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin-bottom: 18px; line-height: 1.1; }
.qp-body { font-size: 13px; line-height: 1.8; color: var(--mist); }

.checklist-row { font-size: 12px; color: var(--mist); padding: 10px 0; border-bottom: 1px solid var(--rule-em); display: flex; align-items: center; gap: 10px; }
.checklist-row:last-child { border-bottom: none; }
.checklist-row .ck { color: var(--em-1); flex-shrink: 0; }

/* ══════════════════════════════════════
   ENHANCEMENTS — Phases 1–4
══════════════════════════════════════ */

/* 1. Smoother reveal easing */
.r { transition: opacity 0.85s cubic-bezier(0.22,1,0.36,1), transform 0.85s cubic-bezier(0.22,1,0.36,1); }

/* 2. Scroll progress bar */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 9001;
  background: var(--em-1); width: 0%; pointer-events: none;
  transition: width 0.08s linear;
}

/* 3. Dot-grid animation on hero sections */
@keyframes dotpulse { 0%,100%{opacity:.25} 50%{opacity:.55} }
.hero-bg::before, .story-page-hero-bg::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(26,92,64,0.35) 1px, transparent 1px);
  background-size: 34px 34px;
  animation: dotpulse 5s ease-in-out infinite;
}
.origin-section { position: relative; overflow: hidden; }
.origin-section::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(26,92,64,0.2) 1px, transparent 1px);
  background-size: 34px 34px; animation: dotpulse 5s ease-in-out 2s infinite;
}

/* 4. Print stylesheet */
@media print {
  nav, footer, .hero-scroll, .marq, #process, #values, .geo, .vl, .hl,
  .chip, .back-to-top, #mobile-nav, #toc-nav, .compare-tray,
  .cta-strip, .cta-strip-product, #cta, #testimonials,
  .nav-hamburger, .nav-cta, .filter-bar, .search-wrap,
  .spec-tab-bar, .compare-toggle, .pcard-spec-preview { display: none !important; }
  body { background: #fff; color: #111; }
  .prod-hero, .spec-section, .materials-section,
  .app-section, .variants-section, .related-section { break-inside: avoid; }
  .spec-table td, .spec-table th, .mat-table td, .mat-table th { border-color: #ccc; color: #333; }
}

/* 5. Focus-visible */
:focus-visible { outline: 2px solid var(--em-1); outline-offset: 3px; }

/* 7. Touch-friendly filter chips */
@media (max-width: 960px) {
  .filter-btn { min-height: 44px; padding: 10px 20px; }
}

/* 8. FAQ accordion */
.faq-section { padding: 120px 0; background: var(--em-4); border-top: 1px solid var(--rule-em); }
.faq-grid { display: flex; flex-direction: column; gap: 0; margin-top: 56px; }
details.faq-item { border-bottom: 1px solid var(--rule-em); }
details.faq-item:first-of-type { border-top: 1px solid var(--rule-em); }
summary.faq-q {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  padding: 26px 0; cursor: pointer; display: flex;
  justify-content: space-between; align-items: center; list-style: none; gap: 16px;
}
summary.faq-q::-webkit-details-marker { display: none; }
summary.faq-q::after {
  content: '+'; font-family: var(--font-mono); font-size: 20px;
  color: var(--em-1); flex-shrink: 0; transition: transform .3s;
}
details[open] summary.faq-q::after { transform: rotate(45deg); }
.faq-a { font-size: 14px; line-height: 1.95; color: var(--mist); padding-bottom: 26px; max-width: 740px; }

/* 9. Counter animation */
.counting { font-variant-numeric: tabular-nums; }

/* 10. Grid/List view toggle */
.catalog-controls { display: flex; align-items: center; gap: 10px; }
.view-toggle { display: flex; gap: 4px; }
.view-btn {
  width: 34px; height: 34px; background: none; border: 1px solid var(--rule-em);
  color: var(--fog); cursor: pointer; display: flex; align-items: center;
  justify-content: center; font-size: 15px; transition: all .3s;
}
.view-btn.active { border-color: var(--em-1); color: var(--em-1); }
.view-btn:hover:not(.active) { color: var(--cream); border-color: var(--fog); }
.sort-select {
  background: rgba(26,92,64,.06); border: 1px solid var(--rule-em);
  color: var(--fog); font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px;
  padding: 8px 14px; appearance: none; cursor: pointer; transition: border-color .3s;
}
.sort-select:focus { border-color: var(--em-1); outline: none; color: var(--cream); }
.prod-grid[data-view="list"] { grid-template-columns: 1fr; }
.prod-grid[data-view="list"] .pcard { flex-direction: row; }
.prod-grid[data-view="list"] .pcard-img { width: 220px; height: auto; flex-shrink: 0; }
.prod-grid[data-view="list"] .pcard-body { flex: 1; }
.prod-grid[data-view="list"] .sec-break { grid-column: 1; }
@media (max-width: 600px) {
  .prod-grid[data-view="list"] .pcard { flex-direction: column; }
  .prod-grid[data-view="list"] .pcard-img { width: 100%; height: 160px; }
}

/* 13. Card tilt glow border */
.pcard-glow-tilt {
  position: absolute; inset: -1px; pointer-events: none; z-index: 4;
  border: 1px solid transparent; transition: border-color .35s;
}
.pcard:hover .pcard-glow-tilt { border-color: rgba(26,92,64,.45); }

/* 14. Advanced filter dropdowns */
.advanced-filters { display: flex; gap: 8px; align-items: center; padding: 0 0 0 16px; flex-wrap: wrap; }
.adv-select {
  background: rgba(26,92,64,.06); border: 1px solid var(--rule-em); color: var(--fog);
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px;
  padding: 9px 14px; appearance: none; cursor: pointer; transition: border-color .3s;
}
.adv-select:focus { border-color: var(--em-1); outline: none; color: var(--cream); }
.adv-label { font-family: var(--font-mono); font-size: 8px; letter-spacing: 2px; color: var(--fog); text-transform: uppercase; }
@media (max-width: 960px) { .advanced-filters { padding: 8px 12px; } }

/* 15. Tooltip */
#vx-tooltip {
  position: fixed; z-index: 8000; pointer-events: none;
  background: var(--em-3); border: 1px solid var(--rule-em);
  color: var(--cream); font-family: var(--font-mono); font-size: 11px;
  padding: 8px 14px; max-width: 280px; line-height: 1.55;
  opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s;
}
#vx-tooltip.visible { opacity: 1; transform: translateY(0); }
[data-tooltip] { border-bottom: 1px dashed rgba(122,158,138,.5); cursor: help; }

/* 17. Industry preview panel */
.ind-valve-item { position: relative; }
.ind-preview {
  position: absolute; z-index: 300; background: var(--em-3);
  border: 1px solid var(--rule-em); padding: 20px; width: 260px;
  left: 100%; top: 0; margin-left: 8px;
  pointer-events: none; opacity: 0; transform: translateX(6px);
  transition: opacity .2s, transform .2s;
}
.ind-valve-item:hover .ind-preview { opacity: 1; transform: translateX(0); }
.ind-preview-title { font-family: var(--font-display); font-size: 14px; font-weight: 700; margin-bottom: 10px; color: var(--white); }
.ind-preview-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ind-preview-pill { font-family: var(--font-mono); font-size: 8px; letter-spacing: 2px; padding: 4px 8px; border: 1px solid var(--rule-em); color: var(--mist); }
@media (max-width: 960px) { .ind-preview { display: none; } }

/* 18. Download center */
.download-section { padding: 80px 64px; background: var(--pu-4); border-top: 1px solid var(--rule-pu); }
.download-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 40px; }
.dl-card {
  background: rgba(74,49,89,.08); border: 1px solid var(--rule-pu);
  padding: 36px; display: flex; flex-direction: column; gap: 12px;
  transition: background .3s; text-decoration: none; color: inherit;
}
.dl-card:hover { background: rgba(74,49,89,.2); }
.dl-icon { font-size: 28px; }
.dl-name { font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.dl-desc { font-size: 12px; line-height: 1.75; color: var(--mist); flex: 1; }
.dl-link { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--em-1); }
@media (max-width: 960px) { .download-section { padding: 60px 24px; } .download-grid { grid-template-columns: 1fr; } }

/* 19. TOC dot navigation */
#toc-nav {
  position: fixed;
  top: 50%;
  right: 20px;
  left: auto;
  bottom: auto;
  width: auto;
  padding: 0;
  transform: translateY(-50%);
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.toc-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--fog);
  cursor: pointer; transition: all .3s; position: relative; border: none; padding: 0;
}
.toc-dot.active { background: var(--em-1); transform: scale(1.5); }
.toc-dot::after {
  content: attr(data-label); position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%); background: var(--em-3); border: 1px solid var(--rule-em);
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px;
  color: var(--cream); padding: 5px 10px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.toc-dot:hover::after { opacity: 1; }
@media (max-width: 1200px) { #toc-nav { display: none; } }

/* 20. Global search overlay */
.search-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(5,26,21,.97); backdrop-filter: blur(24px);
  display: flex; flex-direction: column; align-items: center;
  padding-top: 120px; opacity: 0; pointer-events: none; transition: opacity .3s;
}
.search-overlay.open { opacity: 1; pointer-events: all; }
.so-input-wrap {
  width: 100%; max-width: 700px; display: flex; align-items: center;
  gap: 16px; border-bottom: 1px solid var(--rule-em); padding-bottom: 18px;
}
.so-icon { color: var(--em-1); font-size: 20px; flex-shrink: 0; }
.so-input {
  flex: 1; background: none; border: none; outline: none;
  font-family: var(--font-display); font-size: 32px; font-weight: 700;
  color: var(--white); caret-color: var(--em-1);
}
.so-input::placeholder { color: var(--fog); }
.so-close {
  background: none; border: 1px solid var(--rule-em); color: var(--fog);
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px;
  padding: 8px 14px; cursor: pointer; transition: all .3s; flex-shrink: 0;
}
.so-close:hover { border-color: var(--em-1); color: var(--em-1); }
.so-results { width: 100%; max-width: 700px; margin-top: 24px; display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; }
.so-result {
  display: block; padding: 14px 18px; text-decoration: none;
  border: 1px solid transparent; transition: all .2s; color: inherit;
}
.so-result:hover { border-color: var(--rule-em); background: rgba(26,92,64,.07); }
.so-result-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--white); }
.so-result-cat { font-family: var(--font-mono); font-size: 8px; letter-spacing: 3px; color: var(--em-1); text-transform: uppercase; margin-bottom: 3px; }
.so-hint { margin-top: 32px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--fog); display: flex; gap: 14px; }
.so-hint span { border: 1px solid var(--rule-em); padding: 4px 8px; }
.nav-search-btn {
  background: none; border: 1px solid var(--rule-em); color: var(--fog);
  width: 34px; height: 34px; display: flex; align-items: center;
  justify-content: center; cursor: pointer; transition: all .3s; font-size: 15px;
}
.nav-search-btn:hover { border-color: var(--em-1); color: var(--em-1); }
.nav-theme-btn {
  background: none;
  border: 1px solid var(--rule-em);
  color: var(--fog);
  height: 34px;
  min-width: 54px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .3s;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.nav-theme-btn:hover { border-color: var(--em-1); color: var(--em-1); }
@media (max-width: 960px) { .so-input { font-size: 22px; } .search-overlay { padding-top: 80px; padding-left: 24px; padding-right: 24px; } }

/* 21. Mobile bottom nav bar */
#mobile-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
  background: rgba(5,26,21,.97); backdrop-filter: blur(20px);
  border-top: 1px solid var(--rule-em);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
}
@media (max-width: 960px) { #mobile-nav { display: flex; } }
.mnav-items { display: flex; width: 100%; }
.mnav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 0; text-decoration: none; color: var(--fog);
  font-family: var(--font-mono); font-size: 7px; letter-spacing: 1px;
  text-transform: uppercase; transition: color .3s;
}
.mnav-item.active, .mnav-item:hover { color: var(--em-1); }
.mnav-icon { font-size: 18px; line-height: 1; }
@media (max-width: 960px) { body { padding-bottom: 68px; } .back-to-top { bottom: 84px !important; } }

/* 22. Tabbed spec interface */
.spec-tab-bar {
  position: sticky; top: 65px; z-index: 90;
  background: rgba(5,26,21,.96); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--rule-em); display: flex; overflow-x: auto; padding: 0 64px;
}
.spec-tab {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--fog); padding: 18px 24px;
  border: none; background: none; cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: all .3s;
}
.spec-tab:hover { color: var(--cream); }
.spec-tab.active { color: var(--em-1); border-bottom-color: var(--em-1); }
@media (max-width: 960px) { .spec-tab-bar { padding: 0 12px; } }

/* 23. Product comparison */
.compare-toggle {
  position: absolute; bottom: 10px; left: 10px; z-index: 5;
  background: rgba(5,26,21,.85); border: 1px solid var(--rule-em);
  color: var(--fog); font-family: var(--font-mono); font-size: 8px; letter-spacing: 2px;
  padding: 5px 11px; cursor: pointer; transition: all .3s; text-transform: uppercase;
}
.compare-toggle:hover, .compare-toggle.selected { border-color: var(--em-1); color: var(--em-1); }
.compare-tray {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 600;
  background: rgba(5,26,21,.98); border-top: 1px solid var(--em-1);
  padding: 14px 64px; display: flex; align-items: center; gap: 20px;
  transform: translateY(100%); transition: transform .4s cubic-bezier(0.22,1,0.36,1);
}
.compare-tray.visible { transform: translateY(0); }
.compare-tray-items { display: flex; gap: 10px; flex: 1; flex-wrap: wrap; }
.compare-tray-item {
  background: rgba(26,92,64,.1); border: 1px solid var(--rule-em);
  padding: 8px 14px; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 2px; color: var(--mist); display: flex; align-items: center; gap: 10px;
  min-width: 150px;
}
.compare-remove { background: none; border: none; color: var(--fog); cursor: pointer; font-size: 13px; padding: 0; line-height: 1; }
.compare-remove:hover { color: var(--cream); }
.compare-btn {
  background: var(--em-1); color: var(--em-4); border: none;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px;
  text-transform: uppercase; padding: 12px 22px; cursor: pointer;
  transition: background .3s; white-space: nowrap; flex-shrink: 0;
}
.compare-btn:hover { background: #22734F; }
.compare-clear { background: none; border: 1px solid var(--rule-em); color: var(--fog); font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; padding: 11px 16px; cursor: pointer; transition: all .3s; flex-shrink: 0; }
.compare-clear:hover { border-color: var(--fog); color: var(--cream); }
@media (max-width: 960px) { .compare-tray { padding: 14px 18px; flex-wrap: wrap; } }
dialog.compare-modal {
  background: var(--em-3); border: 1px solid var(--rule-em); padding: 0;
  max-width: 95vw; width: 920px; max-height: 88vh; overflow: auto; color: var(--cream);
}
dialog.compare-modal::backdrop { background: rgba(5,26,21,.85); backdrop-filter: blur(8px); }
.compare-modal-head {
  padding: 26px 32px; border-bottom: 1px solid var(--rule-em);
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; background: var(--em-3); z-index: 1;
}
.compare-modal-head h3 { font-family: var(--font-display); font-size: 26px; font-weight: 700; }
.modal-close { background: none; border: 1px solid var(--rule-em); color: var(--fog); font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; padding: 8px 14px; cursor: pointer; }
.modal-close:hover { border-color: var(--em-1); color: var(--em-1); }
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--fog); padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--rule-em); }
.compare-table th:first-child { width: 160px; color: var(--em-1); }
.compare-table td { padding: 15px 20px; font-size: 13px; color: var(--mist); border-bottom: 1px solid rgba(26,92,64,.1); vertical-align: top; }
.compare-table td:first-child { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--fog); }
.compare-table tr:hover td { background: rgba(26,92,64,.04); }

/* 24. Multi-step RFQ form */
.rfq-form { max-width: 680px; margin: 0 auto; position: relative; z-index: 1; }
.rfq-steps { display: flex; gap: 0; margin-bottom: 44px; position: relative; z-index: 1; }
.rfq-step-indicator { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
.rfq-step-indicator::after { content: ''; position: absolute; top: 16px; left: 50%; width: 100%; height: 1px; background: var(--rule-pu); z-index: 0; }
.rfq-step-indicator:last-child::after { display: none; }
.rfq-step-num { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--rule-pu); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; color: var(--fog); background: var(--pu-4); position: relative; z-index: 1; transition: all .3s; }
.rfq-step-indicator.active .rfq-step-num { border-color: var(--em-1); color: var(--em-1); }
.rfq-step-indicator.done .rfq-step-num { background: var(--em-1); color: var(--em-4); border-color: var(--em-1); }
.rfq-step-lbl { font-family: var(--font-mono); font-size: 8px; letter-spacing: 2px; color: var(--fog); text-transform: uppercase; }
.rfq-step-indicator.active .rfq-step-lbl { color: var(--em-1); }
.rfq-panel { display: none; }
.rfq-panel.active { display: block; }
.rfq-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; position: relative; z-index: 1; }
.rfq-back { background: none; border: 1px solid var(--rule-pu); color: var(--fog); font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; padding: 13px 22px; cursor: pointer; transition: all .3s; text-transform: uppercase; }
.rfq-back:hover { border-color: var(--fog); color: var(--cream); }
.rfq-next { background: var(--em-1); color: var(--em-4); border: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; padding: 14px 30px; cursor: pointer; transition: background .3s; text-transform: uppercase; }
.rfq-next:hover { background: #22734F; }
.rfq-review-row { display: flex; gap: 0; border-bottom: 1px solid rgba(74,49,89,.3); padding: 12px 0; }
.rfq-review-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--em-1); text-transform: uppercase; width: 180px; flex-shrink: 0; }
.rfq-review-val { font-size: 13px; color: var(--cream); line-height: 1.5; }
.rfq-submit { width: auto !important; margin: 0 !important; }

/* 25. Testimonials */
#testimonials { padding: 120px 0; background: var(--pu-4); border-top: 1px solid var(--rule-pu); }
.tst-h { font-family: var(--font-display); font-size: clamp(40px,5vw,68px); font-weight: 700; line-height: .93; margin-bottom: 64px; }
.tst-h em { font-style: italic; color: var(--pu-1); }
.tst-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
.tst-card { background: rgba(74,49,89,.08); border: 1px solid var(--rule-pu); padding: 48px 36px; display: flex; flex-direction: column; gap: 32px; transition: background .3s; }
.tst-card:hover { background: rgba(74,49,89,.18); }
.tst-quote { font-family: var(--font-display); font-size: 17px; line-height: 1.65; font-style: italic; color: var(--cream); flex: 1; }
.tst-quote::before { content: '\201C'; color: var(--pu-1); font-size: 52px; line-height: 0; display: block; margin-bottom: 18px; }
.tst-author { display: flex; align-items: center; gap: 16px; }
.tst-initial { width: 44px; height: 44px; background: var(--pu-2); border: 1px solid var(--rule-pu); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--pu-1); flex-shrink: 0; }
.tst-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--white); }
.tst-role { font-family: var(--font-mono); font-size: 8px; letter-spacing: 2px; color: var(--fog); text-transform: uppercase; margin-top: 4px; }
@media (max-width: 960px) { .tst-grid { grid-template-columns: 1fr; } }

/* 26. Animated SVG process drawings */
@keyframes drawon { to { stroke-dashoffset: 0; } }
.proc-svg { width: 110px; height: 110px; }
.proc-svg circle, .proc-svg path, .proc-svg rect, .proc-svg line, .proc-svg polyline {
  stroke-dasharray: 500; stroke-dashoffset: 500;
}
.proc-svg.animate circle, .proc-svg.animate path, .proc-svg.animate rect,
.proc-svg.animate line, .proc-svg.animate polyline {
  animation: drawon 1.6s cubic-bezier(0.22,1,0.36,1) forwards;
}

/* 29. Spec hover preview */
.pcard-spec-preview {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 6;
  background: rgba(5,26,21,.95); border-top: 1px solid var(--em-1);
  padding: 14px 20px; transform: translateY(100%);
  transition: transform .35s cubic-bezier(0.22,1,0.36,1);
}
.pcard:hover .pcard-spec-preview { transform: translateY(0); }
.psp-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(26,92,64,.15); }
.psp-row:last-child { border-bottom: none; }
.psp-key { font-family: var(--font-mono); font-size: 8px; letter-spacing: 2px; color: var(--fog); text-transform: uppercase; }
.psp-val { font-family: var(--font-mono); font-size: 8px; letter-spacing: 1px; color: var(--cream); }

/* 30. Highlighted spec table rows */
.spec-table tr.key-spec td { background: rgba(26,92,64,.06); }
.spec-table tr.key-spec td:first-child { border-left: 2px solid var(--em-1); padding-left: 14px; }

/* 31. Why VALVAX comparison table */
.whyvalvax-section { padding: 120px 0; background: var(--em-4); border-top: 1px solid var(--rule-em); }
.wv-table { width: 100%; border-collapse: collapse; margin-top: 48px; }
.wv-table th { font-family: var(--font-mono); font-size: 9px; letter-spacing: 3px; text-transform: uppercase; padding: 16px 22px; text-align: left; border-bottom: 2px solid var(--rule-em); }
.wv-table th:nth-child(1) { color: var(--fog); width: 200px; }
.wv-table th:nth-child(2) { color: var(--fog); background: rgba(26,92,64,.02); }
.wv-table th:nth-child(3) { color: var(--em-1); background: rgba(26,92,64,.08); }
.wv-table th:nth-child(4) { color: var(--pu-1); background: rgba(74,49,89,.04); }
.wv-table td { padding: 15px 22px; font-size: 13px; border-bottom: 1px solid var(--rule-em); color: var(--mist); vertical-align: middle; }
.wv-table td:nth-child(1) { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--fog); }
.wv-table td:nth-child(3) { background: rgba(26,92,64,.05); color: var(--cream); }
.wv-check { color: var(--em-1); }
.wv-cross { color: var(--fog); opacity: 0.7; }
.wv-part { color: var(--pu-1); }
@media (max-width: 960px) { .wv-table { font-size: 11px; } .wv-table td, .wv-table th { padding: 11px 10px; } }

/* Recently viewed chips */
.recently-viewed { display: flex; align-items: center; gap: 10px; padding: 12px 64px; background: var(--em-3); border-bottom: 1px solid var(--rule-em); flex-wrap: wrap; }
.rv-label { font-family: var(--font-mono); font-size: 8px; letter-spacing: 3px; text-transform: uppercase; color: var(--fog); flex-shrink: 0; white-space: nowrap; }
.rv-chip { font-family: var(--font-mono); font-size: 8px; letter-spacing: 2px; padding: 6px 14px; border: 1px solid var(--rule-em); color: var(--mist); text-decoration: none; transition: all .3s; text-transform: uppercase; white-space: nowrap; }
.rv-chip:hover { border-color: var(--em-1); color: var(--cream); }
@media (max-width: 960px) { .recently-viewed { padding: 10px 24px; } }

/* 33. Swipe scaffold */
.ph-right.swipe-ready { touch-action: pan-y; user-select: none; }

/* Parallax will-change */
.hero-bg[data-parallax], .ph-bg[data-parallax],
.story-page-hero-bg[data-parallax], .process-page-hero-bg[data-parallax],
.ind-page-bg[data-parallax] { will-change: transform; }

@media (max-width: 960px) {
  .catalog-controls { gap: 6px; }
  .view-toggle { display: none; }
}

/* ══ BUILD 3 FIXES ══════════════════════════════════════════════════════════ */

/* Fix 1 — Testimonials Cards */
.tst-card {
  background: var(--pu-3);
  border: 1px solid var(--rule-pu); border-top: none;
  padding: 48px 36px;
  display: flex; flex-direction: column; gap: 32px;
  transition: background .3s; position: relative; overflow: hidden;
}
.tst-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: transparent; transition: background .4s;
}
.tst-card:hover { background: var(--pu-2); }
.tst-card:hover::before {
  background: linear-gradient(to right, var(--pu-1), var(--em-1), transparent);
}
.tst-initial {
  width: 44px; height: 44px;
  background: var(--em-2); border: 1px solid var(--rule-em);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  color: var(--em-1); flex-shrink: 0;
}
.tst-quote::before { color: var(--em-1); opacity: .35; }

/* Fix 2 — Download Center */
.download-section {
  background: var(--em-3);
  border-top: 1px solid var(--rule-em);
}
.dl-card {
  background: var(--em-4); border: none; border-top: 2px solid transparent;
  padding: 40px 36px; display: flex; flex-direction: column; gap: 14px;
  transition: background .3s, border-top-color .3s; text-decoration: none; color: inherit;
}
.dl-card:hover { background: #061E14; border-top-color: var(--em-1); }
.dl-icon { font-size: 0; display: block; }
.dl-icon::after {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 4px;
  text-transform: uppercase; color: var(--em-1); display: block; margin-bottom: 8px;
}
.dl-card:nth-child(1) .dl-icon::after { content: 'PDF'; }
.dl-card:nth-child(2) .dl-icon::after { content: 'REQ'; }
.dl-card:nth-child(3) .dl-icon::after { content: 'CERT'; }
.dl-name { color: var(--white); }
.dl-card:hover .dl-link { letter-spacing: 4px; }

/* Fix 3 — RFQ Step Indicators */
.rfq-step-num { color: var(--mist); background: var(--pu-3); }
.rfq-step-lbl { color: var(--mist); }

/* Fix 4 — Product Card overflow (spec preview clip) */
.pcard { overflow: visible; }

/* Fix 5 — Recently Viewed Chips */
.recently-viewed { background: var(--em-4); border-bottom: 2px solid var(--em-1); }
.rv-label { color: var(--em-1); }
.rv-chip { background: rgba(26,92,64,.1); color: var(--cream); }
.rv-chip:hover { background: rgba(26,92,64,.2); color: var(--white); }

/* Fix 6 — Sort/Filter Select Arrow */
.sort-select, .adv-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234A6A5A'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 30px; color: var(--mist);
}

/* Fix 7 — Tooltip Accent */
#vx-tooltip { border-left: 2px solid var(--em-1); }

/* Fix 8 — "The Difference" redesign (card grid replaces table) */
.diff-section { padding: 120px 0; background: var(--em-4); border-top: 1px solid var(--rule-em); }
.diff-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
}
.diff-card {
  background: var(--em-3); padding: 40px 36px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: background .3s;
}
.diff-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: transparent; transition: background .4s;
}
.diff-card:hover { background: #061E14; }
.diff-card:hover::before { background: linear-gradient(to right, var(--em-1), transparent); }
.diff-attr {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--fog); margin-bottom: 20px;
}
.diff-val {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  color: var(--white); line-height: 1.15; margin-bottom: 16px;
}
.diff-body {
  font-size: 12px; line-height: 1.75; color: var(--mist);
  flex-grow: 1; margin-bottom: 24px;
}
.diff-contrast {
  border-top: 1px solid var(--rule-em); padding-top: 18px;
  display: flex; flex-direction: column; gap: 7px;
}
.diff-vs {
  font-family: var(--font-mono); font-size: 8px; letter-spacing: 1.5px;
  text-transform: uppercase; display: flex; gap: 5px; align-items: baseline;
}
.diff-vs-who { color: var(--fog); flex-shrink: 0; }
.diff-vs-what { color: var(--fog); opacity: 0.6; }
@media (max-width: 960px) { .diff-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .diff-grid { grid-template-columns: 1fr; } }

/* ══ END BUILD 3 FIXES ══════════════════════════════════════════════════════ */

/* ── RESPONSIVE ADDITIONS ───────────────────────── */
@media (max-width: 960px) {
  .nav-hamburger { display: flex; }
  nav.nav-open { position: fixed; }
  nav.nav-open .nav-links {
    display: flex; flex-direction: column; gap: 0; list-style: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(5,26,21,.98); backdrop-filter: blur(20px);
    padding: 8px 24px 24px; border-bottom: 1px solid var(--rule-em);
  }
  nav.nav-open .nav-links li { border-bottom: 1px solid var(--rule-em); }
  nav.nav-open .nav-links li:last-child { border-bottom: none; }
  nav.nav-open .nav-links a { display: block; padding: 16px 0; font-size: 11px; letter-spacing: 4px; }
  nav.nav-open .nav-links a.active::after { display: none; }
  .search-wrap { padding: 0 24px; }
  .origin-grid { grid-template-columns: 1fr; gap: 48px; }
  .certs-grid { grid-template-columns: 1fr 1fr; }
  .mii-grid { grid-template-columns: 1fr 1fr; }
  .chapter-full { grid-template-columns: 1fr; gap: 12px; }
  .chf-num { font-size: 36px; }
  .pss-inner { grid-template-columns: 1fr; gap: 48px; }
  .quality-pillars { grid-template-columns: 1fr; }
  .story-page-hero, .process-page-hero { padding: 120px 24px 60px; }
  .proc-overview-bar { padding: 0 24px; }
  .cf-row { grid-template-columns: 1fr; }
  .cf-field.full { grid-column: auto; }
  .back-to-top { bottom: 20px; right: 20px; }
  .tl-item { grid-template-columns: 80px 1fr; gap: 24px; }
}
@media (max-width: 600px) {
  .certs-grid { grid-template-columns: 1fr; }
  .mii-grid { grid-template-columns: 1fr; }
  .origin-stats { grid-template-columns: 1fr 1fr; }
}