/* ============================================================
   HARYANA RUBBER UDYOG — World-Class Design System v3.3
   PREMIUM DAYLIGHT — Luxury Industrial + Engineering Theme
   (Apple-clean · BMW engineering · Bosch precision · Tesla supplier)
   Variable names retained (--gold, --navy) for compatibility;
   values now hold the new navy/slate palette.
   ============================================================ */

/* ── LIGHT THEME — PREMIUM DAYLIGHT (default) ──────────────── */
:root,
[data-theme="light"] {
  /* Background system — luxury industrial whites */
  --bg:            #F5F7FA;   /* Luxury Industrial White */
  --bg2:           #EEF2F6;   /* Soft Metallic White */
  --bg3:           #E9EDF2;   /* Premium Light Grey */
  --bg4:           #DDE3EA;   /* Cool Industrial Grey */
  --surface:       #F8FAFC;   /* Soft Glass Grey */
  --card:          #FFFFFF;   /* Premium Card White */
  --card-hover:    #F8FAFC;
  --card-alt:      #EEF2F6;

  /* Primary accent (semantic alias kept as --gold for backward compat) */
  --gold:          #0B2D4D;   /* Deep Industrial Navy — primary CTA */
  --gold-light:    #123B63;   /* Button Hover Navy */
  --gold-dim:      rgba(11,45,77,0.08);
  --gold-glow:     rgba(11,45,77,0.16);

  /* Navy family */
  --navy:          #0B2D4D;   /* Deep Industrial Navy */
  --navy-dark:     #081F36;   /* Premium Navy Dark */
  --navy-light:    #3F556B;   /* Industrial Slate Blue */
  --steel:         #5F7384;   /* Soft Steel Blue */

  /* Metallic / 3D-platform tones */
  --metal-silver:  #C9D1D9;   /* Satin Silver */
  --metal-steel:   #B7C2CC;   /* Brushed Steel */
  --metal-edge:    #AAB7C4;   /* Metallic Edge Grey */
  --metal-chrome:  #96A4B3;   /* Premium Chrome Grey */

  /* Text hierarchy */
  --text:          #0B1F33;   /* Primary Heading */
  --text-h2:       #1E344B;   /* Secondary Heading */
  --text-sub:      #5C6773;   /* Body Text */
  --muted:         #7A8794;   /* Muted Industrial Text */

  /* Borders & dividers */
  --border:        #D6DEE8;   /* Light Metallic Border */
  --border-hover:  #CBD5DF;   /* Premium Divider Grey */
  --divider:       #CBD5DF;

  /* Navbar */
  --navbar-bg:     rgba(245,247,250,0.0);
  --navbar-scroll: rgba(255,255,255,0.96);
  --logo-filter:   none;

  /* Shadows / depth (cinematic navy-tinted) */
  --shadow-soft:   0 2px 12px rgba(11,45,77,0.08);
  --shadow-card:   0 4px 28px rgba(11,45,77,0.12);
  --shadow-float:  0 8px 36px rgba(11,45,77,0.16);
  --shadow-heavy:  0 14px 50px rgba(11,45,77,0.22);
  --shadow-gold:   0 8px 32px rgba(11,45,77,0.18), 0 2px 10px rgba(11,45,77,0.10);

  /* Glow / lighting */
  --glow-white:    rgba(255,255,255,0.65);
  --glow-navy:     rgba(11,45,77,0.10);
  --glow-metal:    rgba(201,209,217,0.45);
  --glow-glass:    rgba(255,255,255,0.30);

  /* Gradients */
  --grad-hero:     linear-gradient(135deg, #F5F7FA 0%, #E4EAF0 50%, #D6DEE8 100%);
  --grad-metal:    linear-gradient(180deg, #FFFFFF 0%, #E9EDF2 100%);
  --grad-navy:     linear-gradient(135deg, #0B2D4D 0%, #1E344B 100%);
  --grad-steel:    linear-gradient(135deg, #EEF2F6 0%, #DDE3EA 100%);

  /* Geometry */
  --radius:        12px;
  --radius-lg:     22px;
  --ease:          cubic-bezier(0.16, 1, 0.3, 1);
  --t:             0.42s cubic-bezier(0.16, 1, 0.3, 1);
  --font-head:     'Rajdhani', sans-serif;
  --font-body:     'Inter', sans-serif;
}

/* ── DARK THEME — Premium Industrial Night ──────────────────── */
[data-theme="dark"] {
  --bg:            #08131F;   /* Dark Background */
  --bg2:           #0D1C2B;   /* Dark Surface */
  --bg3:           #132738;
  --bg4:           #203547;
  --surface:       #0D1C2B;   /* Dark Surface */
  --card:          #132738;   /* Dark Card */
  --card-hover:    #203547;   /* Dark Metallic Grey */
  --card-alt:      #0D1C2B;

  /* Accent — soft steel/silver tone reads well on dark navy */
  --gold:          #AAB7C4;   /* Metallic Edge Grey — accent on dark */
  --gold-light:    #C9D1D9;   /* Satin Silver */
  --gold-dim:      rgba(170,183,196,0.10);
  --gold-glow:     rgba(170,183,196,0.22);

  --navy:          #0B2D4D;
  --navy-dark:     #081F36;
  --navy-light:    #3F556B;
  --steel:         #5F7384;

  --metal-silver:  #C9D1D9;
  --metal-steel:   #B7C2CC;
  --metal-edge:    #AAB7C4;
  --metal-chrome:  #96A4B3;

  --text:          #F5F7FA;   /* Dark Text Primary */
  --text-h2:       #EEF2F6;
  --text-sub:      #AEB9C5;   /* Dark Text Secondary */
  --muted:         #7A8794;

  --border:        #2D4357;   /* Dark Border */
  --border-hover:  #3F556B;
  --divider:       #2D4357;

  --navbar-bg:     rgba(8,19,31,0.0);
  --navbar-scroll: rgba(8,19,31,0.95);
  --logo-filter:   brightness(0) invert(1);

  --shadow-soft:   0 2px 12px rgba(0,0,0,0.4);
  --shadow-card:   0 8px 40px rgba(0,0,0,0.55);
  --shadow-float:  0 14px 50px rgba(0,0,0,0.65);
  --shadow-heavy:  0 20px 60px rgba(0,0,0,0.75);
  --shadow-gold:   0 0 40px rgba(170,183,196,0.16), 0 8px 32px rgba(0,0,0,0.5);

  --glow-white:    rgba(255,255,255,0.10);
  --glow-navy:     rgba(11,45,77,0.40);
  --glow-metal:    rgba(170,183,196,0.20);
  --glow-glass:    rgba(255,255,255,0.05);

  --grad-hero:     linear-gradient(135deg, #08131F 0%, #0D1C2B 50%, #132738 100%);
  --grad-metal:    linear-gradient(180deg, #132738 0%, #08131F 100%);
  --grad-navy:     linear-gradient(135deg, #0B2D4D 0%, #1E344B 100%);
  --grad-steel:    linear-gradient(135deg, #132738 0%, #203547 100%);
}

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

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) var(--surface);
}
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.72;
  overflow-x: hidden;
  transition: background var(--t), color var(--t);
}

[data-theme="dark"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.02;
}

::selection { background: var(--gold-dim); color: var(--gold); }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; }
.py-section { padding: 6rem 0; }
.py-6 { padding-top: 5rem; padding-bottom: 5rem; }
.mb-6 { margin-bottom: 4rem; }
.bg-surface { background: var(--surface); transition: background var(--t); }
.text-gold { color: var(--gold) !important; }

/* ── NAVBAR ───────────────────────────────────────────────── */
.hru-navbar {
  background: var(--navbar-bg);
  backdrop-filter: blur(0px);
  border-bottom: 1px solid transparent;
  transition: background 0.5s ease, backdrop-filter 0.5s ease, border-color 0.5s ease;
  padding: 0.55rem 0;
}
.hru-navbar.scrolled {
  background: var(--navbar-scroll) !important;
  backdrop-filter: blur(22px) saturate(1.4);
  border-bottom-color: var(--border);
  box-shadow: 0 2px 20px rgba(0,0,0,0.12);
}
.navbar-brand img {
  filter: var(--logo-filter);
  transition: filter var(--t), opacity 0.3s, height 0.3s;
  height: 56px;
  width: auto;
  max-height: 56px;
  display: block;
  /* Retina-quality rendering for raster logo */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);  /* GPU layer prevents subpixel blur */
}
.navbar-brand img:hover { opacity: 0.88; }
.navbar-brand { padding: 0.25rem 0; }
@media (max-width: 991px) {
  .navbar-brand img { height: 46px; max-height: 46px; }
}
@media (max-width: 575px) {
  .navbar-brand img { height: 40px; max-height: 40px; }
}

/* Footer logo — always white via JS (footer is navy in both themes) */
.hru-footer img {
  height: 60px;
  width: auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  transition: opacity 0.3s;
}
.hru-footer img:hover { opacity: 0.9; }

/* Chatbot avatar (header is always navy bg → logo always white) */
.chatbot-avatar {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.18) !important;
}
.chatbot-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  padding: 4px;
  image-rendering: -webkit-optimize-contrast;
}
.hru-navbar .nav-link {
  color: var(--text-sub) !important;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  padding: 0.45rem 0.7rem !important;
  border-radius: 7px;
  position: relative;
  transition: color 0.25s, background 0.25s;
}
.hru-navbar .nav-link::after {
  content: '';
  position: absolute;
  bottom: 3px; left: 50%;
  width: 0; height: 1.5px;
  background: var(--gold);
  transform: translateX(-50%);
  transition: width 0.3s var(--ease);
  border-radius: 2px;
}
.hru-navbar .nav-link:hover,
.hru-navbar .nav-link.active { color: var(--text) !important; background: var(--gold-dim); }
.hru-navbar .nav-link:hover::after,
.hru-navbar .nav-link.active::after { width: 55%; }
.hru-social-header a {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--muted); font-size: 0.78rem;
  transition: all 0.25s;
}
.hru-social-header a:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }
.theme-toggle {
  width: 38px; height: 38px;
  border: 1px solid var(--border); background: var(--gold-dim);
  border-radius: 10px; color: var(--gold); font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.25s; flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--gold); background: var(--gold); color: var(--bg); }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn.hru-btn-gold,
a.hru-btn-gold,
button.hru-btn-gold,
.hru-btn-gold {
  background: var(--gold) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--gold) !important;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  border-radius: 10px;
  padding: 0.65rem 1.5rem;
  transition: all 0.28s var(--ease);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(11,45,77,0.10);
  text-decoration: none;
}
/* Force every descendant of the button to be white text (icons, spans, etc.) */
.hru-btn-gold,
.hru-btn-gold *,
.hru-btn-gold:hover,
.hru-btn-gold:hover *,
.hru-btn-gold:focus,
.hru-btn-gold:focus *,
.hru-btn-gold:active,
.hru-btn-gold:active * {
  color: #FFFFFF !important;
}
.hru-btn-gold:hover {
  background: var(--gold-light) !important;
  border-color: var(--gold-light) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-float);
  filter: none;
}
.hru-btn-gold:active { transform: scale(0.98); }
.hru-btn-gold i,
.hru-btn-gold svg { color: #FFFFFF !important; fill: #FFFFFF; }

/* Dark mode — use navy bg with white text (override the lighter steel accent) */
[data-theme="dark"] .hru-btn-gold {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
}
[data-theme="dark"] .hru-btn-gold:hover {
  background: var(--navy-light) !important;
  border-color: var(--navy-light) !important;
}
.hru-btn-outline {
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
  font-weight: 600; font-size: 0.875rem; letter-spacing: 0.04em;
  border-radius: 10px; padding: 0.6rem 1.4rem;
  transition: all 0.28s var(--ease);
}
.hru-btn-outline:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); transform: translateY(-1px); }

/* ── CARDS ────────────────────────────────────────────────── */
.hru-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t), background var(--t);
  box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
}
.hru-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--gold-dim) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.4s; pointer-events: none;
}
.hru-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-gold); transform: translateY(-3px); }
.hru-card:hover::before { opacity: 1; }

/* ── TYPOGRAPHY ───────────────────────────────────────────── */
.section-label {
  font-family: var(--font-head);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.section-label::before {
  content: ''; width: 24px; height: 1.5px;
  background: var(--gold); border-radius: 2px;
}
.section-title {
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 700; line-height: 1.08;
  color: var(--text); letter-spacing: -0.02em;
}

/* ── HERO ─────────────────────────────────────────────────── */
.hero-section { background: var(--bg); position: relative; overflow: hidden; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

/* Premium dark hero: animated glow orbs + subtle dot grid */
[data-theme="dark"] .hero-section {
  background-image:
    radial-gradient(ellipse 90% 80% at 80% -10%, rgba(37,99,235,0.16) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at -5% 90%, rgba(37,99,235,0.10) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(37,99,235,0.04) 0%, transparent 70%);
  background-color: var(--bg);
}
/* Subtle dot grid overlay */
[data-theme="dark"] .hero-section::after {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(37,99,235,0.22) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 80% at 60% 40%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 60% 40%, black 0%, transparent 75%);
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,rgba(6,6,14,0.92) 0%,rgba(6,6,14,0.70) 42%,rgba(6,6,14,0.10) 70%,transparent 100%);
}
[data-theme="light"] .hero-overlay {
  background: linear-gradient(90deg,rgba(240,246,255,0.96) 0%,rgba(240,246,255,0.78) 38%,rgba(240,246,255,0.15) 62%,transparent 100%);
}
.hero-content { position: relative; z-index: 2; padding: 2rem 0; }
.hero-stats { display: flex; gap: 2.5rem; flex-wrap: wrap; }
.hero-stat { display: flex; flex-direction: column; }
.hero-stat span:first-child { font-family: var(--font-head); font-size: 1.9rem; font-weight: 700; color: var(--gold); line-height: 1; }
.hero-stat span:last-child { font-size: 0.76rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.25rem; }
.scroll-indicator { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; z-index: 5; }
.scroll-indicator span { width: 1px; height: 44px; background: linear-gradient(to bottom, var(--gold), transparent); animation: scrollPulse 2s ease-in-out infinite; }
.scroll-indicator small { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
@keyframes scrollPulse { 0%,100%{opacity:0.3;transform:scaleY(0.6);transform-origin:top} 50%{opacity:1;transform:scaleY(1);transform-origin:top} }

/* ── MARQUEE ──────────────────────────────────────────────── */
.marquee-strip { overflow: hidden; padding: 0.9rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
.marquee-track { display: flex; white-space: nowrap; animation: marqueeScroll 30s linear infinite; font-family: var(--font-head); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase; }
.marquee-track:hover { animation-play-state: paused; }
.marquee-track .dot { color: var(--gold); margin: 0 0.5rem; }
@keyframes marqueeScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── STAT BLOCKS ──────────────────────────────────────────── */
.stat-block { padding: 2rem 1rem; }
.stat-number { font-family: var(--font-head); font-size: 3rem; font-weight: 700; color: var(--gold); line-height: 1; letter-spacing: -0.02em; }
.stat-label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.4rem; }

/* ── PRODUCT CARDS ────────────────────────────────────────── */
.product-card { border-radius: var(--radius-lg); overflow: hidden; }
.product-card-img { width: 100%; height: 200px; object-fit: cover; transition: transform 0.6s var(--ease); }
.product-card:hover .product-card-img { transform: scale(1.06); }
.product-card-canvas { width: 100%; height: 220px; display: block; border-radius: var(--radius) var(--radius) 0 0; background: var(--card); }
.product-card-body { padding: 1.5rem; }
.product-card-title { font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; }
.product-card-text { font-size: 0.87rem; color: var(--text-sub); line-height: 1.65; }
.product-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 1rem; }
.product-tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.18rem 0.55rem; border: 1px solid var(--border); border-radius: 4rem; color: var(--gold); background: var(--gold-dim); }

/* ── FEATURE BLOCKS ───────────────────────────────────────── */
.feature-block { padding: 1.75rem 1.5rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); transition: all var(--t); }
.feature-block:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.feature-icon { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--gold); background: var(--gold-dim); border: 1px solid var(--border); border-radius: 11px; margin-bottom: 1.2rem; }
.feature-title { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; }
.feature-text { font-size: 0.87rem; color: var(--text-sub); line-height: 1.65; }

/* ── CTA BANNER ───────────────────────────────────────────── */
.cta-banner { padding: 3.5rem 2.5rem; border-radius: var(--radius-lg); border: 1px solid var(--border-hover); background: linear-gradient(135deg, var(--card) 0%, var(--navy) 100%); position: relative; overflow: hidden; }
.cta-banner::before { content: ''; position: absolute; top: -40%; right: -15%; width: 380px; height: 380px; background: radial-gradient(circle, var(--gold-glow) 0%, transparent 70%); pointer-events: none; }
[data-theme="light"] .cta-banner { background: linear-gradient(135deg, var(--navy) 0%, #0e1e4a 100%); }
[data-theme="light"] .cta-banner .section-title,
[data-theme="light"] .cta-banner h2 { color: #fff; }
[data-theme="light"] .cta-banner p { color: rgba(255,255,255,0.7); }

/* ── PAGE HERO ────────────────────────────────────────────── */
.page-hero { min-height: 60vh; display: flex; align-items: flex-end; padding-bottom: 5rem; padding-top: 7rem; position: relative; background: linear-gradient(155deg, var(--navy) 0%, var(--bg) 62%); overflow: hidden; }
[data-theme="dark"] .page-hero {
  background: linear-gradient(155deg, #0f1e4a 0%, #06060e 65%),
    radial-gradient(ellipse 60% 70% at 80% 20%, rgba(37,99,235,0.14) 0%, transparent 60%);
}
.page-hero-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(37,99,235,0.08) 0%, transparent 60%); pointer-events: none; }
.page-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 100px; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }
.page-hero h1,
.page-hero .section-label { position: relative; z-index: 2; }
.page-hero p { color: rgba(255,255,255,0.65) !important; position: relative; z-index: 2; }
.page-hero-sm { min-height: 48vh !important; }

/* ── VEHICLE SHOWCASE ─────────────────────────────────────── */
.vehicle-section { position: relative; overflow: hidden; }
.vehicle-canvas-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--card); }
#vehicle-canvas { width: 100%; height: 500px; display: block; }
.vehicle-controls { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.25rem; }
.vehicle-btn { flex: 1; min-width: 90px; padding: 0.65rem 0.9rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text-sub); font-size: 0.8rem; font-weight: 700; font-family: var(--font-head); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: all 0.25s; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.vehicle-btn:hover, .vehicle-btn.active { border-color: var(--gold); background: var(--gold-dim); color: var(--gold); }
.vehicle-btn i { font-size: 1rem; }
.rubber-callouts { display: flex; flex-direction: column; gap: 0.65rem; }
.rubber-callout { display: flex; align-items: flex-start; gap: 0.9rem; padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: 11px; background: var(--card); cursor: pointer; transition: all 0.28s var(--ease); position: relative; }
.rubber-callout.active, .rubber-callout:hover { border-color: var(--gold); background: var(--gold-dim); }
.rubber-callout.active::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; background: var(--gold); border-radius: 0 2px 2px 0; }
.callout-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex-shrink: 0; margin-top: 5px; transition: background 0.25s, box-shadow 0.25s; }
.rubber-callout.active .callout-dot, .rubber-callout:hover .callout-dot { background: var(--gold); box-shadow: 0 0 8px var(--gold-glow); }
.callout-name { font-family: var(--font-head); font-size: 0.88rem; font-weight: 700; color: var(--text); margin-bottom: 0.1rem; }
.callout-desc { font-size: 0.76rem; color: var(--muted); line-height: 1.5; }

/* ── INSTALLATION STEPS ───────────────────────────────────── */
.install-step { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; padding: 3.5rem 0; border-bottom: 1px solid var(--border); }
.install-step:last-child { border-bottom: none; }
.install-step:nth-child(even) .install-step-content { order: 2; }
.install-step:nth-child(even) .install-step-visual { order: 1; }
.install-step-num { font-family: var(--font-head); font-size: 4.5rem; font-weight: 800; color: var(--border); line-height: 1; letter-spacing: -0.04em; margin-bottom: 0.75rem; }
.install-step-title { font-family: var(--font-head); font-size: 1.55rem; font-weight: 700; color: var(--text); margin-bottom: 0.75rem; }
.install-step-desc { color: var(--text-sub); font-size: 0.91rem; line-height: 1.72; }
.install-step-visual { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); height: 240px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.rubber-part-icon { font-size: 3.5rem; color: var(--gold); animation: rubberPulse 2.2s ease-in-out infinite; filter: drop-shadow(0 0 20px var(--gold-glow)); }
@keyframes rubberPulse { 0%,100%{transform:scale(1);opacity:0.7} 50%{transform:scale(1.14);opacity:1} }
.install-badge { position: absolute; bottom: 1rem; left: 1rem; background: var(--gold); color: var(--bg); font-family: var(--font-head); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.22rem 0.7rem; border-radius: 4rem; }
@media (max-width: 768px) { .install-step { grid-template-columns: 1fr; gap: 2rem; } .install-step:nth-child(even) .install-step-content, .install-step:nth-child(even) .install-step-visual { order: unset; } }

/* ── FOOTER ───────────────────────────────────────────────── */
.hru-footer { background: var(--bg2); border-top: 1px solid var(--border); transition: background var(--t); }
.hru-footer img { filter: var(--logo-filter); }
.hru-footer-heading { font-family: var(--font-head); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.25rem; }
.hru-footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.hru-footer-links li { font-size: 0.875rem; color: var(--text-sub); display: flex; align-items: center; gap: 0.5rem; }
.hru-footer-links a { color: var(--text-sub); transition: color 0.2s; }
.hru-footer-links a:hover { color: var(--gold); }
.hru-footer-bottom { border-top: 1px solid var(--border); padding: 1.5rem 0; margin-top: 1rem; }
.hru-social a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); font-size: 0.85rem; transition: all 0.25s; }
.hru-social a:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }

/* ── WHATSAPP FAB ─────────────────────────────────────────── */
.whatsapp-fab { position: fixed; bottom: 96px; right: 24px; width: 52px; height: 52px; background: #25d366; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.55rem; color: #fff; box-shadow: 0 4px 20px rgba(37,211,102,0.4); z-index: 998; transition: transform 0.25s, box-shadow 0.25s; }
.whatsapp-fab:hover { transform: scale(1.1) translateY(-2px); box-shadow: 0 8px 28px rgba(37,211,102,0.5); color: #fff; }

/* ── CHATBOT ──────────────────────────────────────────────── */
.chatbot-widget { position: fixed; bottom: 24px; right: 24px; z-index: 999; }
.chatbot-fab { width: 52px; height: 52px; background: var(--gold); border: none; border-radius: 50%; color: var(--bg); font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px var(--gold-glow); transition: transform 0.3s var(--ease), box-shadow 0.3s; }
.chatbot-fab:hover { transform: scale(1.08); box-shadow: 0 8px 30px var(--gold-glow); }
.chatbot-panel { position: absolute; bottom: 68px; right: 0; width: 340px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; opacity: 0; transform: translateY(16px) scale(0.96); transform-origin: bottom right; pointer-events: none; transition: opacity 0.32s var(--ease), transform 0.32s var(--ease); }
.chatbot-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }
.chatbot-header { background: var(--navy); padding: 1rem 1.2rem; display: flex; align-items: center; gap: 0.9rem; border-bottom: 1px solid var(--border); }
.chatbot-avatar { width: 36px; height: 36px; background: white; border-radius: 50%; overflow: hidden; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.chatbot-avatar img { width: 100%; height: 100%; object-fit: contain; }
.chatbot-avatar span { font-family: var(--font-head); font-size: 0.85rem; font-weight: 700; color: var(--gold); }
.chatbot-name { font-weight: 700; font-size: 0.9rem; color: #fff; font-family: var(--font-head); }
.chatbot-status { font-size: 0.72rem; color: rgba(255,255,255,0.6); display: flex; align-items: center; gap: 0.4rem; }
.status-dot { width: 7px; height: 7px; background: #25d366; border-radius: 50%; animation: blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.4} }
.chatbot-close { margin-left: auto; background: none; border: none; color: rgba(255,255,255,0.5); font-size: 1rem; cursor: pointer; transition: color 0.2s; padding: 0; }
.chatbot-close:hover { color: #fff; }
.chatbot-messages { height: 260px; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.chat-msg { display: flex; }
.chat-user { justify-content: flex-end; }
.chat-bot { justify-content: flex-start; }
.chat-bubble { max-width: 85%; padding: 0.65rem 0.9rem; border-radius: 14px; font-size: 0.84rem; line-height: 1.55; }
.chat-user .chat-bubble { background: var(--gold); color: var(--bg); border-radius: 14px 14px 4px 14px; }
.chat-bot .chat-bubble { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 14px 14px 14px 4px; }
.chat-link { color: var(--gold); font-weight: 600; }
.chat-typing .chat-bubble { display: flex; align-items: center; gap: 4px; padding: 0.75rem; }
.chat-typing .chat-bubble span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: typingDot 1.2s infinite; }
.chat-typing .chat-bubble span:nth-child(2) { animation-delay: 0.18s; }
.chat-typing .chat-bubble span:nth-child(3) { animation-delay: 0.36s; }
@keyframes typingDot { 0%,60%,100%{transform:translateY(0);opacity:0.5} 30%{transform:translateY(-4px);opacity:1} }
.chatbot-quick { padding: 0.5rem 0.75rem; display: flex; gap: 0.4rem; flex-wrap: wrap; border-top: 1px solid var(--border); background: var(--bg); }
.chat-chip { font-size: 0.72rem; font-weight: 600; padding: 0.28rem 0.62rem; border: 1px solid var(--border); border-radius: 4rem; background: transparent; color: var(--muted); cursor: pointer; transition: all 0.2s; }
.chat-chip:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }
.chatbot-input-row { display: flex; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid var(--border); background: var(--surface); }
.chatbot-input { flex: 1; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.8rem; color: var(--text); font-size: 0.85rem; outline: none; transition: border-color 0.2s; }
.chatbot-input:focus { border-color: var(--gold); }
.chatbot-input::placeholder { color: var(--muted); }
.chatbot-send { width: 36px; height: 36px; background: var(--gold); border: none; border-radius: 8px; color: var(--bg); font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; flex-shrink: 0; }
.chatbot-send:hover { transform: scale(1.08); }

/* ── STICKY QUOTE MOBILE ──────────────────────────────────── */
.sticky-quote-strip { position: fixed; bottom: 0; left: 0; right: 0; padding: 0.75rem 1rem; background: var(--card); border-top: 1px solid var(--border); z-index: 996; }

/* ── BREADCRUMB ───────────────────────────────────────────── */
.hru-breadcrumb { background: none; margin: 0; padding: 0; }
.hru-breadcrumb .breadcrumb-item { color: rgba(255,255,255,0.5); font-size: 0.85rem; }
.hru-breadcrumb .breadcrumb-item a { color: var(--gold); }
.hru-breadcrumb .breadcrumb-item.active { color: rgba(255,255,255,0.5); }
.hru-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.3); }

/* ── TIMELINE ─────────────────────────────────────────────── */
.hru-timeline { position: relative; max-width: 860px; margin: 0 auto; }
.hru-timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, transparent, var(--gold) 10%, var(--gold) 90%, transparent); transform: translateX(-50%); }
.timeline-item { display: flex; gap: 2.5rem; margin-bottom: 3.5rem; position: relative; align-items: flex-start; }
.timeline-left .timeline-card { text-align: right; margin-right: calc(50% + 2rem); width: 44%; }
.timeline-right .timeline-card { text-align: left; margin-left: calc(50% + 2rem); width: 44%; }
.timeline-year { position: absolute; left: 50%; transform: translateX(-50%); font-family: var(--font-head); font-size: 0.82rem; font-weight: 700; color: var(--gold); background: var(--bg); padding: 0.28rem 0.75rem; border: 1px solid var(--border); border-radius: 4rem; z-index: 2; top: 1rem; white-space: nowrap; }
.timeline-title { font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; color: var(--text); margin-bottom: 0.6rem; }
.timeline-text { color: var(--text-sub); font-size: 0.87rem; line-height: 1.7; }
.timeline-badge { display: inline-block; margin-top: 0.8rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); background: var(--gold-dim); border: 1px solid var(--border); padding: 0.18rem 0.62rem; border-radius: 4rem; }
@media (max-width: 768px) {
  .hru-timeline::before { left: 1.2rem; }
  .timeline-item { flex-direction: column !important; margin-left: 3rem; }
  .timeline-left .timeline-card, .timeline-right .timeline-card { margin: 0; text-align: left; width: 100%; }
  .timeline-year { left: 0 !important; transform: none; position: relative; top: 0; margin-bottom: .75rem; }
}

/* ── PROCESS / QUALITY / TABLE ────────────────────────────── */
.process-icon { width: 3rem; height: 3rem; background: var(--gold-dim); border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--gold); margin-bottom: 1.2rem; }
.process-title { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; color: var(--text); margin-bottom: .7rem; }
.process-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.process-card { transition: border-color var(--t), transform var(--t); }
.process-card:hover { border-color: var(--border-hover); transform: translateY(-3px); }
.quality-step { flex: 1; min-width: 140px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem 1rem; text-align: center; }
.quality-num { font-family: var(--font-head); font-size: 2rem; font-weight: 700; color: var(--gold); line-height: 1; }
.quality-title { font-family: var(--font-head); font-size: .9rem; font-weight: 700; color: var(--text); margin: .4rem 0; }
.quality-desc { color: var(--muted); font-size: .78rem; line-height: 1.55; }
.quality-flow { display: flex; flex-wrap: wrap; gap: 0; align-items: stretch; }
.quality-arrow { display: none; align-items: center; color: var(--gold); opacity: .4; font-size: .8rem; padding: 0 .2rem; }
@media (min-width: 768px) { .quality-arrow { display: flex; } }
.hru-table { color: var(--text); border-color: var(--border); font-size: .9rem; }
.hru-table thead th { background: var(--card); color: var(--gold); border-color: var(--border); font-family: var(--font-head); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .78rem; padding: 1rem; }
.hru-table tbody tr { border-color: var(--border); }
.hru-table tbody td { background: transparent; border-color: var(--border); color: var(--text-sub); padding: .85rem 1rem; vertical-align: middle; }
.hru-table tbody tr:hover td { background: var(--gold-dim); color: var(--text); }

/* ── FORM INPUTS ──────────────────────────────────────────── */
.hru-label { font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; margin-bottom: .4rem; }
.hru-input { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: .65rem !important; padding: .7rem 1rem !important; font-size: .95rem; transition: border-color .25s, box-shadow .25s; }
.hru-input:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 3px var(--gold-dim) !important; outline: none; }
.hru-input::placeholder { color: var(--muted) !important; }
.hru-input option { background: var(--surface); color: var(--text); }
.invalid-feedback { font-size: .8rem; color: #e74c3c; }

/* ── CONTACT INFO ─────────────────────────────────────────── */
.contact-info-list { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-info-item { display: flex; align-items: flex-start; gap: 1rem; }
.contact-info-icon { width: 2.4rem; height: 2.4rem; flex-shrink: 0; background: var(--gold-dim); border: 1px solid var(--border); border-radius: .65rem; display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: .95rem; }
.contact-info-label { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.contact-info-val { color: var(--text); font-size: .95rem; line-height: 1.5; }
.contact-info-val a { color: var(--text); transition: color .2s; }
.contact-info-val a:hover { color: var(--gold); }
.map-wrap { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }

/* ── PRODUCT SPEC / FILTER ────────────────────────────────── */
.product-spec-row { display: flex; align-items: baseline; gap: .5rem; font-size: .8rem; margin-top: .5rem; border-top: 1px solid var(--border); padding-top: .45rem; }
.spec-label { color: var(--muted); white-space: nowrap; flex-shrink: 0; font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.spec-val { color: var(--text); }
.sticky-filter { position: sticky; top: 70px; z-index: 40; border-bottom: 1px solid var(--border); }
.product-filter-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 4rem; font-size: .82rem; padding: .35rem 1rem; transition: all .25s; }
.product-filter-btn:hover, .product-filter-btn.active { background: var(--gold); color: #07070f; border-color: var(--gold); font-weight: 700; }
.hru-card-highlight { border-color: var(--gold) !important; box-shadow: var(--shadow-gold) !important; transform: translateY(-4px) !important; }

/* ── ABOUT IMAGE ──────────────────────────────────────────── */
.about-img-wrap { position: relative; }
.about-stats-card { position: absolute; bottom: -1.5rem; right: -1.5rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.5rem; min-width: 180px; box-shadow: var(--shadow-gold); }
@media (max-width: 575px) { .about-stats-card { right: 0; bottom: -1rem; min-width: 140px; padding: .75rem 1rem; } }

/* ── TOOL ROOM PROCESS STEPS ──────────────────────────────── */
.process-step-num { font-family: var(--font-head); font-size: 2.5rem; font-weight: 800; color: var(--gold); line-height: 1; margin-bottom: .5rem; }
.process-step-label { font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: .4rem; }
.process-step-desc { color: var(--muted); font-size: .82rem; line-height: 1.6; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1199px) { #vehicle-canvas { height: 400px; } }
@media (max-width: 991px) {
  .hero-overlay { background: linear-gradient(to bottom, rgba(7,7,15,0.88) 0%, rgba(7,7,15,0.72) 60%, rgba(7,7,15,0.30) 100%) !important; }
  [data-theme="light"] .hero-overlay { background: linear-gradient(to bottom, rgba(240,246,255,0.90) 0%, rgba(240,246,255,0.72) 60%, rgba(240,246,255,0.20) 100%) !important; }
  #vehicle-canvas { height: 340px; }
}
@media (max-width: 767px) {
  .py-section { padding: 4rem 0; }
  .cta-banner { padding: 2rem 1.5rem; }
  .chatbot-panel { width: calc(100vw - 32px); right: 0; }
  #vehicle-canvas { height: 280px; }
  .section-title { font-size: clamp(1.6rem, 6vw, 2.4rem); }
}
@media (max-width: 575px) { .hero-stats { gap: 1.5rem; } }

/* ── UTILS ────────────────────────────────────────────────── */
.border-gold { border-color: var(--border) !important; }
.font-head { font-family: var(--font-head); }
.rounded-hru { border-radius: var(--radius-lg); }
.text-sub { color: var(--text-sub); }
.p-lg-6 { padding: 3.5rem !important; }
@media print { .hru-navbar, .whatsapp-fab, .chatbot-widget, .sticky-quote-strip { display: none !important; } body { background: white; color: black; } }

/* ── CARD-ALT (secondary bg for alternating sections) ─────── */
:root, [data-theme="dark"] { --card-alt: #08091e; }
[data-theme="light"] { --card-alt: #e4edff; }

/* ── PREMIUM DARK MODE ENHANCEMENTS ─────────────────────── */
[data-theme="dark"] .hru-card {
  background: linear-gradient(155deg, #0e1026 0%, #090a1c 100%);
}
[data-theme="dark"] .hru-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(37,99,235,0.5), transparent);
  pointer-events: none;
}
[data-theme="dark"] .feature-block {
  background: linear-gradient(155deg, #0e1026 0%, #090a1c 100%);
}
[data-theme="dark"] .stat-box {
  background: linear-gradient(155deg, #0e1026 0%, #090a1c 100%);
}
/* Premium nav button glow on dark */
[data-theme="dark"] .hru-btn-gold {
  box-shadow: 0 0 20px rgba(37,99,235,0.30), inset 0 1px 0 rgba(255,255,255,0.12);
}
/* Section bg-surface in dark mode */
[data-theme="dark"] .bg-surface { background: var(--surface) !important; }
/* Install step visual in dark — premium blue glow */
[data-theme="dark"] .install-step-visual {
  background: linear-gradient(145deg, #0c0d22 0%, #080918 100%);
  box-shadow: inset 0 0 40px rgba(37,99,235,0.06);
}

/* ── FADE-UP & STAGGER ANIMATIONS (managed by GSAP in main.js) ── */
/* No base CSS needed — GSAP animates via gsap.from() with ScrollTrigger */

/* ── STAT BOX (per-page stat counters) ───────────────────── */
.stat-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all var(--t);
}
.stat-box:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: var(--shadow-gold); }

/* ── PRODUCT NAV CARD (about/products) ───────────────────── */
.product-nav-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.75rem; padding: 1.5rem 1rem;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  color: var(--text-sub); font-family: var(--font-head); font-size: 0.9rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; text-align: center;
  transition: all var(--t); min-height: 90px;
}
.product-nav-card i { font-size: 1.4rem; color: var(--gold); }
.product-nav-card:hover { border-color: var(--gold); background: var(--gold-dim); color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow-gold); }
.product-nav-card span { color: inherit; }

/* ── TEAM CARDS (about) ───────────────────────────────────── */
.team-card {
  padding: 1.5rem; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--card);
  transition: all var(--t); height: 100%;
}
.team-card:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.team-icon {
  width: 2.8rem; height: 2.8rem; border-radius: 10px;
  background: var(--gold-dim); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 1.1rem; margin-bottom: 1rem;
}
.team-card h4 { font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; }
.team-card p { font-size: 0.84rem; color: var(--text-sub); line-height: 1.65; margin: 0; }

/* ── HISTORY TIMELINE — scoped under .timeline-wrapper for full specificity ── */
.timeline-wrapper {
  position: relative; max-width: 900px; margin: 0 auto;
}
.timeline-wrapper::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--gold) 8%, var(--gold) 92%, transparent);
  transform: translateX(-50%);
}

/* Use .timeline-wrapper .timeline-item to beat the old .hru-timeline generic rules */
.timeline-wrapper .timeline-item {
  display: grid !important;
  grid-template-columns: 1fr 40px 1fr !important;
  align-items: start;
  margin-bottom: 3rem;
  gap: 0;
}

/* LEFT items (default): year col-1, dot col-2, content col-3 */
.timeline-wrapper .timeline-year {
  grid-column: 1 !important; grid-row: 1 !important;
  position: static !important;
  left: auto !important; transform: none !important; top: auto !important; z-index: 1 !important;
  font-family: var(--font-head); font-size: 0.8rem; font-weight: 700;
  color: var(--gold); background: var(--bg);
  padding: 0.28rem 0.75rem; border: 1px solid var(--border); border-radius: 4rem;
  display: inline-block !important;
  align-self: start; margin-top: 0.9rem; margin-bottom: 0;
  white-space: nowrap; justify-self: end;
}
.timeline-wrapper .timeline-dot {
  grid-column: 2 !important; grid-row: 1 !important;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--bg);
  box-shadow: 0 0 12px var(--gold-glow);
  align-self: start; margin-top: 1.3rem; justify-self: center;
  z-index: 2; position: relative;
}
.timeline-wrapper .timeline-content {
  grid-column: 3 !important; grid-row: 1 !important;
  padding-left: 2rem; padding-right: 0;
}

/* RIGHT items: content col-1, dot col-2, year col-3 */
.timeline-wrapper .timeline-item--right .timeline-year {
  grid-column: 3 !important; grid-row: 1 !important;
  justify-self: start; text-align: left;
}
.timeline-wrapper .timeline-item--right .timeline-dot {
  grid-column: 2 !important; grid-row: 1 !important;
}
.timeline-wrapper .timeline-item--right .timeline-content {
  grid-column: 1 !important; grid-row: 1 !important;
  padding-left: 0 !important; padding-right: 2rem !important;
}

/* Timeline card — always left-aligned text */
.timeline-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem 1.75rem;
  transition: border-color var(--t), box-shadow var(--t);
  text-align: left; width: 100%;
}
.timeline-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-gold); }
.timeline-icon {
  width: 2.4rem; height: 2.4rem; border-radius: 8px;
  background: var(--gold-dim); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 1rem; margin-bottom: 0.9rem;
}
.timeline-card h3 {
  font-family: var(--font-head); font-size: 1.05rem; font-weight: 700;
  color: var(--text); margin-bottom: 0.6rem; text-align: left;
}
.timeline-card p {
  font-size: 0.84rem; color: var(--text-sub); line-height: 1.75;
  margin: 0; text-align: left; max-width: none !important;
}

/* Mobile: collapse to single left-aligned column */
@media (max-width: 767px) {
  .timeline-wrapper::before { left: 20px; }
  .timeline-wrapper .timeline-item {
    grid-template-columns: 40px 1fr !important;
    margin-left: 0 !important;
  }
  .timeline-wrapper .timeline-year,
  .timeline-wrapper .timeline-item--right .timeline-year {
    display: none !important;
  }
  .timeline-wrapper .timeline-dot,
  .timeline-wrapper .timeline-item--right .timeline-dot {
    grid-column: 1 !important; grid-row: 1 !important;
    justify-self: center; margin-top: 1.4rem;
  }
  .timeline-wrapper .timeline-content,
  .timeline-wrapper .timeline-item--right .timeline-content {
    grid-column: 2 !important; grid-row: 1 !important;
    padding-left: 1.25rem !important; padding-right: 0 !important;
  }
}

/* ── PRODUCT SPEC BADGE (products page) ───────────────────── */
.product-spec-badge {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.2rem 0.62rem; border: 1px solid var(--border);
  border-radius: 4rem; color: var(--gold); background: var(--gold-dim);
  transition: all 0.2s;
}

/* ── MATERIAL CARDS (products page) ──────────────────────── */
.material-card {
  padding: 1.75rem; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); transition: all var(--t);
}
.material-card:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.material-abbr {
  font-family: var(--font-head); font-size: 1.6rem; font-weight: 800;
  color: var(--gold); line-height: 1; margin-bottom: 0.5rem; letter-spacing: -0.01em;
}
.material-card h4 { font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; }
.material-card p { font-size: 0.85rem; color: var(--text-sub); line-height: 1.65; margin-bottom: 1rem; }
.material-range { display: inline-flex; align-items: center; }
.material-range span {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
  padding: 0.18rem 0.6rem; border: 1px solid var(--border);
  border-radius: 4rem; color: var(--muted); background: var(--gold-dim);
}

/* ── PROCESS FLOW (manufacturing & tool-room) ────────────────
   The HTML uses Bootstrap `.row` + `.col-lg-3` children — we
   FORCE flex layout (override any cached grid display from older
   CSS versions) so columns size properly via Bootstrap's grid. */
.process-flow {
  display: flex !important;
  flex-wrap: wrap !important;
  grid-template-columns: none !important;
}
.process-step {
  padding: 2rem 1.5rem;
  border-right: 1px solid var(--border);
  position: relative;
  min-width: 0;   /* critical: allow shrinking below min-content */
  width: 100%;
  height: 100%;
  text-align: left;
}
.process-step:last-child { border-right: none; }
.process-step::before {
  content: ''; position: absolute; top: 2.5rem; right: -1px;
  width: 0; height: 0;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  border-left: 8px solid var(--gold); opacity: 0.5;
}
.process-step:last-child::before { display: none; }
.process-number {
  font-family: var(--font-head); font-size: 2.8rem; font-weight: 800;
  color: var(--gold-dim); line-height: 1; margin-bottom: 1rem;
  transition: color var(--t);
}
.process-step:hover .process-number { color: var(--gold); }
.process-step h4 { font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.6rem; }
.process-step p { font-size: 0.84rem; color: var(--text-sub); line-height: 1.7; margin: 0; }

/* Bootstrap col children of .process-flow — ensure shrink-to-fit works */
.process-flow > [class*="col-"] { min-width: 0; }

/* Tablet: 2-up — remove separator on every 2nd item */
@media (max-width: 991px) {
  .process-step:nth-child(2n) { border-right: none; }
  .process-step { border-bottom: 1px solid var(--border); }
  .process-step::before { display: none; }
}
/* Mobile: 1-up — no separators */
@media (max-width: 767px) {
  .process-step { border-right: none; }
}

/* ── MFG PROCESS CARDS ────────────────────────────────────── */
.mfg-process-card {
  padding: 2rem; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); height: 100%; transition: all var(--t);
}
.mfg-process-card:hover { border-color: var(--border-hover); transform: translateY(-3px); box-shadow: var(--shadow-gold); }
.mfg-process-icon {
  width: 3rem; height: 3rem; background: var(--gold-dim); border: 1px solid var(--border);
  border-radius: 11px; display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: var(--gold); margin-bottom: 1.25rem;
}
.mfg-process-card h3 { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; color: var(--text); margin-bottom: 0.75rem; }
.mfg-process-card p { font-size: 0.87rem; color: var(--text-sub); line-height: 1.75; }
.mfg-process-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.25rem; }
.mfg-process-tags span {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.18rem 0.55rem; border: 1px solid var(--border); border-radius: 4rem;
  color: var(--gold); background: var(--gold-dim);
}

/* ── QC CARDS (manufacturing) ────────────────────────────── */
.qc-card {
  padding: 1.75rem; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); position: relative; overflow: hidden; transition: all var(--t);
}
.qc-card:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.qc-step-num {
  position: absolute; top: 1.2rem; right: 1.4rem;
  font-family: var(--font-head); font-size: 1.8rem; font-weight: 800;
  color: var(--border); line-height: 1;
}
.qc-icon {
  width: 2.6rem; height: 2.6rem; background: var(--gold-dim); border: 1px solid var(--border);
  border-radius: 9px; display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 1rem; margin-bottom: 1rem;
}
.qc-card h4 { font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; }
.qc-card p { font-size: 0.84rem; color: var(--text-sub); line-height: 1.65; margin: 0; }

/* ── BOND SPEC ITEMS (manufacturing) ─────────────────────── */
.bond-spec-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem; background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; font-size: 0.87rem; color: var(--text-sub);
  transition: all 0.25s;
}
.bond-spec-item:hover { border-color: var(--gold); color: var(--text); }
.bond-spec-item i { width: 1rem; text-align: center; }

/* ── TOOL CAPABILITY CARDS ────────────────────────────────── */
.tool-capability-card {
  padding: 1.5rem; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); height: 100%; transition: all var(--t);
}
.tool-capability-card:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.tool-cap-icon {
  width: 2.8rem; height: 2.8rem; background: var(--gold-dim); border: 1px solid var(--border);
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 1.1rem; margin-bottom: 1rem;
}
.tool-capability-card h4 { font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; }
.tool-capability-card p { font-size: 0.84rem; color: var(--text-sub); line-height: 1.65; margin: 0; }

/* ── ADVANTAGE LIST (tool room) ──────────────────────────── */
.advantage-list { display: flex; flex-direction: column; gap: 1.5rem; }
.advantage-item { display: flex; gap: 1.25rem; align-items: flex-start; }
.advantage-icon {
  width: 2.8rem; height: 2.8rem; flex-shrink: 0;
  background: var(--gold-dim); border: 1px solid var(--border);
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 1.1rem;
}
.advantage-item h4 { font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.35rem; }
.advantage-item p { font-size: 0.85rem; color: var(--text-sub); line-height: 1.65; margin: 0; }

/* ── CONTACT ITEMS (location) ────────────────────────────── */
.contact-block { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-item { display: flex; gap: 1.1rem; align-items: flex-start; }
.contact-icon {
  width: 2.6rem; height: 2.6rem; flex-shrink: 0;
  background: var(--gold-dim); border: 1px solid var(--border);
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 1rem;
}
.contact-item h4 { font-family: var(--font-head); font-size: 0.82rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.2rem; }
.contact-item p, .contact-item a { font-size: 0.92rem; color: var(--text); margin: 0; line-height: 1.5; }
.contact-item a:hover { color: var(--gold); }

/* ── SOCIAL PILL ──────────────────────────────────────────── */
.social-pill {
  display: inline-flex; align-items: center;
  padding: 0.35rem 0.9rem; border: 1px solid var(--border);
  border-radius: 4rem; font-size: 0.8rem; font-weight: 600;
  color: var(--text-sub); background: var(--card); transition: all 0.25s;
}
.social-pill:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }

/* ── INQUIRY FORM CARD ────────────────────────────────────── */
.inquiry-form-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2.5rem;
}
@media (max-width: 575px) { .inquiry-form-card { padding: 1.5rem 1.25rem; } }

/* ── INQUIRY INPUTS ───────────────────────────────────────── */
.inquiry-label {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--muted); text-transform: uppercase; margin-bottom: 0.4rem; display: block;
}
.inquiry-input {
  background: var(--surface) !important; border: 1px solid var(--border) !important;
  color: var(--text) !important; border-radius: 0.7rem !important;
  padding: 0.7rem 1rem !important; font-size: 0.93rem;
  transition: border-color 0.25s, box-shadow 0.25s;
  width: 100%;
}
.inquiry-input:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px var(--gold-dim) !important; outline: none;
}
.inquiry-input::placeholder { color: var(--muted) !important; }
.inquiry-input option { background: var(--surface); color: var(--text); }

/* ── ALERT AUTOFILL ───────────────────────────────────────── */
.alert-autofill {
  background: var(--gold-dim); border: 1px solid var(--border);
  color: var(--gold); border-radius: 0.7rem; padding: 0.75rem 1rem;
  font-size: 0.88rem;
}

/* ── CONTACT HIGHLIGHT CARD (inquiry sidebar) ─────────────── */
.contact-highlight-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem;
}

/* ── CONTACT ITEM INLINE ──────────────────────────────────── */
.contact-item-inline {
  display: flex; gap: 0.9rem; align-items: flex-start;
}
.contact-item-inline i { margin-top: 0.15rem; flex-shrink: 0; }

/* ── CARD-ALT SECTIONS ────────────────────────────────────── */
section[style*="background:var(--card-alt)"] { transition: background var(--t); }

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME — Blue + White Complete Overrides
   ═══════════════════════════════════════════════════════════ */

/* Navbar in light scrolled state: crisp white with blue border */
[data-theme="light"] .hru-navbar.scrolled {
  box-shadow: 0 2px 24px rgba(10,28,90,0.10);
  border-bottom-color: rgba(12,32,96,0.12);
}
[data-theme="light"] .hru-navbar .nav-link:hover,
[data-theme="light"] .hru-navbar .nav-link.active {
  color: var(--navy) !important;
  background: rgba(12,32,96,0.06);
}
[data-theme="light"] .hru-navbar .nav-link::after { background: var(--navy); }

/* Section label stripe in light mode: blue instead of pure gold */
[data-theme="light"] .section-label {
  color: var(--navy);
}
[data-theme="light"] .section-label::before { background: var(--navy); }

/* Cards in light: white with blue-tinted shadow */
[data-theme="light"] .feature-block {
  box-shadow: 0 2px 16px rgba(10,28,90,0.06);
}
[data-theme="light"] .feature-block:hover {
  border-color: var(--navy);
  box-shadow: 0 6px 28px rgba(10,28,90,0.12), 0 0 0 1px rgba(12,32,96,0.15);
}
[data-theme="light"] .feature-icon {
  background: rgba(12,32,96,0.07);
  border-color: rgba(12,32,96,0.14);
  color: var(--navy);
}

/* Gold accent stays gold — good contrast on blue-white */
[data-theme="light"] .text-gold { color: var(--gold) !important; }
[data-theme="light"] .hru-btn-gold { background: var(--gold); color: #060d28; }
[data-theme="light"] .hru-btn-gold:hover { color: #060d28; }

/* CTA banner in light: always navy */
[data-theme="light"] .cta-banner {
  background: linear-gradient(135deg, var(--navy) 0%, #0c1e50 100%);
  border-color: rgba(201,168,76,0.25);
}
[data-theme="light"] .cta-banner .section-label { color: var(--gold); }
[data-theme="light"] .cta-banner .section-label::before { background: var(--gold); }
[data-theme="light"] .cta-banner .section-title,
[data-theme="light"] .cta-banner h2 { color: #ffffff; }
[data-theme="light"] .cta-banner p { color: rgba(255,255,255,0.72); }

/* Footer in light: clean white-on-navy look */
[data-theme="light"] .hru-footer { background: var(--navy); border-top-color: rgba(201,168,76,0.18); }
[data-theme="light"] .hru-footer p { color: rgba(255,255,255,0.6); }
[data-theme="light"] .hru-footer-heading { color: var(--gold); }
[data-theme="light"] .hru-footer-links li,
[data-theme="light"] .hru-footer-links a { color: rgba(255,255,255,0.55); }
[data-theme="light"] .hru-footer-links a:hover { color: var(--gold); }
[data-theme="light"] .hru-footer-bottom { border-top-color: rgba(255,255,255,0.08); }
[data-theme="light"] .hru-footer-bottom p,
[data-theme="light"] .hru-footer-bottom a { color: rgba(255,255,255,0.35); }
[data-theme="light"] .hru-footer img { filter: brightness(0) invert(1); }
[data-theme="light"] .hru-social a { border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.4); }
[data-theme="light"] .hru-social a:hover { border-color: var(--gold); color: var(--gold); background: rgba(201,168,76,0.12); }

/* Social header icons in light: blue-tinted */
[data-theme="light"] .hru-social-header a { border-color: rgba(12,32,96,0.14); color: var(--muted); }
[data-theme="light"] .hru-social-header a:hover { border-color: var(--navy); color: var(--navy); background: rgba(12,32,96,0.06); }

/* Theme toggle in light */
[data-theme="light"] .theme-toggle {
  background: rgba(12,32,96,0.06); border-color: rgba(12,32,96,0.14); color: var(--navy);
}
[data-theme="light"] .theme-toggle:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Stat boxes in light */
[data-theme="light"] .stat-box { box-shadow: 0 2px 16px rgba(10,28,90,0.06); }
[data-theme="light"] .stat-number { color: var(--navy); }

/* Marquee strip in light: white bg */
[data-theme="light"] .marquee-strip { background: #ffffff; border-color: rgba(12,32,96,0.10); }

/* Timeline dot in light: navy */
[data-theme="light"] .timeline-dot { background: var(--navy); box-shadow: 0 0 12px rgba(12,32,96,0.35); }
[data-theme="light"] .timeline-year { color: var(--navy); }

/* Process step numbers in light: navy */
[data-theme="light"] .process-number { color: rgba(12,32,96,0.2); }
[data-theme="light"] .process-step:hover .process-number { color: var(--navy); }

/* Material cards in light: blue abbr */
[data-theme="light"] .material-abbr { color: var(--navy); }

/* QC card step numbers: blue-tinted */
[data-theme="light"] .qc-step-num { color: rgba(12,32,96,0.15); }

/* Vehicle control buttons in light */
[data-theme="light"] .vehicle-btn:hover,
[data-theme="light"] .vehicle-btn.active {
  border-color: var(--navy); color: var(--navy); background: rgba(12,32,96,0.06);
}

/* Product nav cards in light */
[data-theme="light"] .product-nav-card i { color: var(--navy); }
[data-theme="light"] .product-nav-card:hover { border-color: var(--navy); background: rgba(12,32,96,0.05); color: var(--navy); }

/* Rubber callouts in light */
[data-theme="light"] .rubber-callout.active,
[data-theme="light"] .rubber-callout:hover { border-color: var(--navy); background: rgba(12,32,96,0.05); }
[data-theme="light"] .rubber-callout.active::before { background: var(--navy); }
[data-theme="light"] .rubber-callout.active .callout-dot,
[data-theme="light"] .rubber-callout:hover .callout-dot { background: var(--navy); box-shadow: 0 0 8px rgba(12,32,96,0.3); }

/* Chat chip in light */
[data-theme="light"] .chat-chip:hover { border-color: var(--navy); color: var(--navy); background: rgba(12,32,96,0.05); }
[data-theme="light"] .chatbot-fab { background: var(--navy); }
[data-theme="light"] .chatbot-fab:hover { box-shadow: 0 8px 30px rgba(12,32,96,0.35); }

/* Product filter buttons in light */
[data-theme="light"] .product-filter-btn:hover,
[data-theme="light"] .product-filter-btn.active {
  background: var(--navy); border-color: var(--navy); color: #ffffff;
}

/* 3D canvas backgrounds for light mode — so dark rubber parts are visible */
[data-theme="light"] canvas {
  background: linear-gradient(135deg, #e4edff 0%, #f0f6ff 100%) !important;
}
[data-theme="light"] .vehicle-canvas-wrap { background: #e8f0ff; }

/* Drop-down menus in light */
[data-theme="light"] .dropdown-menu {
  box-shadow: 0 8px 32px rgba(10,28,90,0.12);
  border-color: rgba(12,32,96,0.12) !important;
}
[data-theme="light"] .dropdown-item:hover { background: rgba(12,32,96,0.05); color: var(--navy) !important; }

/* ═══════════════════════════════════════════════════════════
   TEXT ALIGNMENT & TYPOGRAPHY — Global Fixes
   ═══════════════════════════════════════════════════════════ */

/* All body paragraphs: controlled line length, left-aligned (never orphaned) */
p {
  max-width: 72ch;
  line-height: 1.78;
}
/* Remove max-width constraint for p inside flex/grid alignment containers */
.d-flex p, .row p, .navbar p, footer p,
.hero-stat p, .chat-bubble p,
.hru-footer-links p { max-width: none; }

/* Section headings: tighter and consistent */
.section-title {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 0;
}

/* Center-only when explicitly asked — all headings default left */
.text-center .section-title,
.text-center h2,
.text-center h3 { text-align: center; }

/* Lead paragraphs on centered blocks: centered too */
.text-center > p { margin-left: auto; margin-right: auto; text-align: center; }

/* Feature blocks: left-aligned body text */
.feature-text { text-align: left; max-width: none; }
.feature-block.text-center .feature-text { text-align: center; }

/* Cards — consistent text align left */
.timeline-card p,
.mfg-process-card p,
.qc-card p,
.tool-capability-card p,
.team-card p,
.material-card p { text-align: left; max-width: none; }

/* Process steps: left-aligned, consistent */
.process-step p { text-align: left; max-width: none; }
.process-step h4 { margin-bottom: 0.75rem; }

/* Advantage items: left-aligned */
.advantage-item p { text-align: left; max-width: none; }

/* Contact items: left-aligned */
.contact-item p, .contact-item a { text-align: left; }

/* Stat boxes: always centered (they're small data cells) */
.stat-box p, .stat-box .stat-label, .stat-box .stat-number { max-width: none; }

/* Hero paragraphs: left-aligned, controlled width */
.hero-content p {
  max-width: 54ch;
  text-align: left;
  color: var(--text-sub);
  font-size: 1.02rem;
  line-height: 1.78;
}
[data-theme="light"] .hero-content p { color: var(--text-sub); }
[data-theme="light"] .hero-content h1 { color: var(--text); }

/* CTA banner text: left-aligned */
.cta-banner p { max-width: 56ch; text-align: left; }

/* Section intro paragraphs (after .section-title): controlled */
.section-intro {
  max-width: 62ch;
  color: var(--text-sub);
  font-size: 1.02rem;
  line-height: 1.78;
  margin-top: 1rem;
}
.text-center .section-intro { margin-left: auto; margin-right: auto; text-align: center; }

/* Ensure all inline links color correctly */
a { color: var(--gold); transition: color 0.2s; }
a:hover { color: var(--gold-light); }
[data-theme="light"] a { color: var(--navy); }
[data-theme="light"] a:hover { color: var(--gold); }
/* Reset for buttons and navbar links */
.btn, .nav-link, .hru-footer-links a, .hru-social a,
.hru-social-header a, .social-pill, .product-nav-card,
.dropdown-item { color: inherit; }

/* Consistent section padding */
.py-section { padding: 5.5rem 0; }
@media (max-width: 991px) { .py-section { padding: 4.5rem 0; } }
@media (max-width: 767px) { .py-section { padding: 3.5rem 0; } }

/* Page hero gradient overlay bottom fade (all inner pages) */
section > canvas + div + .container-xl,
section > canvas ~ .container-xl { position: relative; z-index: 2; }

/* ── LIGHT MODE — Navbar hamburger & mobile collapse ────────── */
/* Dark hamburger icon on light scrolled navbar */
[data-theme="light"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280%2C20%2C80%2C0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
[data-theme="light"] .navbar-toggler {
  border-color: rgba(12,32,96,0.25) !important;
  color: var(--navy) !important;
}
/* Mobile collapse area: white panel with blue border */
@media (max-width: 1199px) {
  [data-theme="light"] .navbar-collapse {
    background: rgba(255,255,255,0.97);
    border: 1px solid rgba(12,32,96,0.12);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-top: 0.5rem;
    box-shadow: 0 8px 32px rgba(10,28,90,0.10);
  }
  [data-theme="dark"] .navbar-collapse {
    background: rgba(7,7,15,0.96);
    border: 1px solid rgba(201,168,76,0.14);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-top: 0.5rem;
  }
}

/* ── INNER PAGE HERO CANVAS — ensure it's always visible ────── */
section canvas[id$="-canvas"] {
  display: block;
  opacity: 0.55;
  transition: opacity 0.5s;
}
[data-theme="light"] section canvas[id$="-canvas"] {
  opacity: 0.72;
}

/* ── LIGHT MODE — Inner page hero text visibility ───────────── */
[data-theme="light"] .page-hero h1,
[data-theme="light"] .page-hero .section-label { color: var(--text); }
[data-theme="light"] .page-hero { background: linear-gradient(155deg, rgba(12,32,96,0.08) 0%, var(--bg) 62%); }

/* ── SMOOTH BODY TRANSITIONS ────────────────────────────────── */
html { transition: none; }
body, .hru-navbar, .hru-footer, .hru-card, .feature-block,
.timeline-card, .material-card, .mfg-process-card, .qc-card,
.tool-capability-card, .stat-box, .product-nav-card {
  transition: background var(--t), color var(--t), border-color var(--t);
}

/* ── FOOTER LINKS — fix unintended blue override in light ───── */
[data-theme="light"] .hru-footer a,
[data-theme="light"] .hru-footer .hru-footer-links a,
[data-theme="light"] .hru-footer .hru-footer-links li { color: rgba(255,255,255,0.55); }
[data-theme="light"] .hru-footer a:hover,
[data-theme="light"] .hru-footer .hru-footer-links a:hover { color: var(--gold); }

/* ── PREVENT HORIZONTAL SCROLL (global) ─────────────────────── */
body, html { max-width: 100vw; overflow-x: hidden; }

/* ════════════════════════════════════════════════════════════
   v3.1 — CARD ALIGNMENT, TYPOGRAPHY BALANCE, HVAC SECTION
   ════════════════════════════════════════════════════════════ */

/* ── Universal card-row alignment: stretch + flex column ────── */
.row.stagger-grid { align-items: stretch; }

/* Card titles: balance wrap; DO NOT character-break — only break very long URLs/codes */
.feature-title,
.feature-block h3,
.tool-capability-card h4,
.mfg-process-card h3,
.qc-card h4,
.process-step h4,
.material-card h4,
.product-card-title,
.hvac-card h3,
.hvac-card h4 {
  text-wrap: balance;
  word-break: normal;        /* allow word boundary breaks only */
  overflow-wrap: normal;     /* NEVER break inside a word */
  hyphens: none;
  line-height: 1.25;
  min-width: 0;
}

/* Card descriptions: balanced wrap, equal flex distribution so cards line up */
.feature-block, .tool-capability-card, .mfg-process-card, .qc-card,
.process-step, .material-card, .hvac-card {
  display: flex; flex-direction: column;
  min-width: 0;              /* allow flex item to shrink properly */
}
.feature-text, .feature-block p,
.tool-capability-card p, .mfg-process-card p,
.qc-card p, .process-step p, .material-card p {
  text-wrap: pretty;
  word-break: normal;
  overflow-wrap: normal;
  flex-grow: 1;
  min-width: 0;
}

/* Tool Room capability cards — slightly larger title + min-height for grid balance */
.tool-capability-card { padding: 1.65rem 1.4rem; min-height: 200px; }
.tool-capability-card h4 { font-size: 1.05rem; margin-bottom: 0.55rem; letter-spacing: -0.005em; }
.tool-capability-card p { font-size: 0.86rem; line-height: 1.7; }

/* Manufacturing process-step (the From-Raw-Compound-to-Dispatch row) */
.process-step { padding: 2.1rem 1.6rem; }
.process-step h4 { font-size: 1.08rem; margin-bottom: 0.7rem; letter-spacing: -0.005em; }
.process-step p { font-size: 0.86rem; line-height: 1.72; }

/* Manufacturing 3-process cards (Compression / Transfer / Injection) */
.mfg-process-card { padding: 2rem 1.85rem; }
.mfg-process-card h3 { font-size: 1.22rem; margin-bottom: 0.85rem; }
.mfg-process-card p { margin-bottom: 0.85rem; }
.mfg-process-card p:last-of-type { margin-bottom: 0; }

/* Why-HRU feature blocks: title now displays at full weight */
.feature-block { padding: 1.85rem 1.55rem; }
.feature-title { font-family: var(--font-head); font-size: 1.08rem; font-weight: 700; color: var(--text); margin: 0.4rem 0 0.55rem; }
.feature-text { font-size: 0.88rem; color: var(--text-sub); line-height: 1.72; margin: 0; }

/* ════════════════════════════════════════════════════════════
   HOME APPLIANCES & HVAC SECTION
   ════════════════════════════════════════════════════════════ */
.hvac-section {
  position: relative;
  background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 50%, var(--bg) 100%);
  overflow: hidden;
}
.hvac-section::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 40% at 15% 25%, var(--gold-glow), transparent 70%),
    radial-gradient(ellipse 40% 35% at 85% 75%, var(--gold-dim), transparent 70%);
  opacity: 0.6;
}
.hvac-section > .container-xl { position: relative; z-index: 2; }

.hvac-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.7rem 1.4rem;
  height: 100%;
  transition: all var(--t);
  overflow: hidden;
  isolation: isolate;
}
.hvac-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--gold-dim) 0%, transparent 65%);
  opacity: 0; transition: opacity 0.5s; z-index: -1;
}
.hvac-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-gold);
}
.hvac-card:hover::before { opacity: 1; }
.hvac-icon {
  width: 3rem; height: 3rem;
  background: var(--gold-dim);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 1.3rem;
  margin-bottom: 1.1rem;
  transition: all var(--t);
}
.hvac-card:hover .hvac-icon {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
  transform: scale(1.05) rotate(-3deg);
}
.hvac-card h4 {
  font-family: var(--font-head);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.5rem;
  letter-spacing: -0.005em;
}
.hvac-card p {
  font-size: 0.84rem;
  color: var(--text-sub);
  line-height: 1.6;
  margin-bottom: 1.1rem;
  flex-grow: 1;
}
.hvac-card-cta {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--gold); text-transform: uppercase;
  margin-top: auto;
}
.hvac-card-cta i { transition: transform 0.25s var(--ease); }
.hvac-card:hover .hvac-card-cta i { transform: translateX(4px); }

.hvac-applications {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 1.5rem 0;
}
.hvac-app-chip {
  font-family: var(--font-head);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 0.42rem 0.95rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4rem;
  color: var(--text-sub);
  transition: all 0.25s var(--ease);
}
.hvac-app-chip:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-dim);
  transform: translateY(-2px);
}

/* ── Better grid stretching for product cards on homepage ───── */
.product-card { display: flex; flex-direction: column; }
.product-card .product-card-body { display: flex; flex-direction: column; flex-grow: 1; }
.product-card .product-card-text { flex-grow: 1; }

/* ── Responsive polish for cards ─────────────────────────────── */
@media (max-width: 575px) {
  .tool-capability-card, .mfg-process-card, .feature-block, .hvac-card {
    padding: 1.4rem 1.2rem;
  }
  .process-step { padding: 1.6rem 1.25rem; }
}

/* ── Global safety net: Bootstrap col children should always shrink ─── */
[class*="col-"], .row > * { min-width: 0 !important; }

/* Never break words at character level anywhere in body content */
p, h1, h2, h3, h4, h5, h6, span, li, a, div {
  overflow-wrap: normal !important;
  word-break: normal !important;
}
/* But still allow breaking for genuinely long unbreakable strings (URLs, codes) */
.allow-break, .allow-break * { overflow-wrap: break-word !important; word-break: break-word !important; }

/* ── NAVBAR — keep nav-link labels on a single line ──────────── */
.hru-navbar .nav-link {
  white-space: nowrap;
}
/* Tighter padding at the xl breakpoint so all 8 items + utilities fit */
@media (min-width: 1200px) and (max-width: 1399px) {
  .hru-navbar .nav-link {
    padding: 0.45rem 0.5rem !important;
    font-size: 0.82rem;
    letter-spacing: 0.015em;
  }
  .hru-navbar .container-xl { padding-left: 1rem; padding-right: 1rem; }
  .hru-social-header { display: none !important; }   /* hide social icons at this size */
}
@media (min-width: 1400px) {
  .hru-navbar .nav-link {
    padding: 0.45rem 0.75rem !important;
    font-size: 0.875rem;
  }
}

/* Footer headings — keep on one line */
.hru-footer-heading { white-space: nowrap; }

/* ════════════════════════════════════════════════════════════
   GLOBAL PRODUCT-IMAGE FITTING RULES
   Every product photo across the site must:
     • be fully visible (no cropping of important parts)
     • never stretch or distort
     • render crisp on retina screens
     • respect safe margins for premium framing
   ════════════════════════════════════════════════════════════ */

/* Universal retina-quality rendering for product photos */
img[src*="/products/"],
img[src*="/banners/"] {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);   /* GPU layer prevents subpixel blur */
}

/* Every product-image container MUST use contain (never cover) */
.pp-card-stage img,
.product-detail-img,
.hvac-card-img,
.hvac-image-placeholder img,
.hero-pp-thumb img,
.install-svg-anim--photo img {
  object-fit: contain !important;
  object-position: center center !important;
}

/* Tight safe-margin — products fill the card; no oversized empty space.
   The source photos already include a small whitespace border, so we
   keep padding minimal to let the product be the visual hero. */
.pp-card-stage img { padding: 2% !important; }
.product-detail-img { padding: 2% !important; }
.hvac-image-placeholder img { padding: 2.5% !important; }
.install-svg-anim--photo img { padding: 0 !important; }

/* Responsive image sizing */
@media (min-width: 1400px) {
  .pp-card-stage img { padding: 1.5% !important; }
  .product-detail-img { padding: 1.5% !important; }
}
@media (max-width: 575px) {
  .pp-card-stage img { padding: 3% !important; }
  .product-detail-img { padding: 3% !important; }
  .hvac-card-img { padding: 8px !important; }
}

/* Prevent any product image from accidentally stretching */
img[src*="/products/"] {
  max-width: 100%;
  height: auto;
}

/* Hero pp-thumb (small circular thumbnails) — special handling */
.hero-pp-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-pp-thumb img {
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 3px !important;
}

/* HVAC card image override — flex centering fallback */
.hvac-card-img {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Product detail container — ensure consistent height on alternating rows */
.product-detail-imgwrap {
  width: 100%;
}

/* Loading state — silky reveal as images decode */
img[src*="/products/"] {
  transition: opacity 0.4s ease;
}
img[src*="/products/"]:not([src=""]) {
  opacity: 1;
}

/* ════════════════════════════════════════════════════════════
   PREMIUM ECOMMERCE PRODUCT CARD (real product photos)
   Luxury industrial · Apple-clean · BMW engineering feel
   ════════════════════════════════════════════════════════════ */
.pp-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.3s ease;
  text-decoration: none !important;
  isolation: isolate;
}
.pp-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-float);
}

/* Image stage — ecommerce hero focus
   Aspect-ratio matches the source photo proportions (5:4) so
   the product fills the frame naturally with minimal empty space. */
.pp-card-stage {
  position: relative;
  aspect-ratio: 5 / 4;
  background: var(--grad-steel);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .pp-card-stage {
  background: linear-gradient(135deg, #1a2a3e 0%, #0d1c2b 100%);
}
/* Soft top-down highlight */
.pp-card-stage::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 30%, var(--glow-white), transparent 65%);
  pointer-events: none;
  z-index: 1;
}
/* Subtle HRU watermark — embedded SVG with brand letters, low opacity */
.pp-card-stage::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 70%; height: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'%3E%3Cellipse cx='200' cy='100' rx='180' ry='80' fill='none' stroke='%230B2D4D' stroke-width='8'/%3E%3Cline x1='40' y1='100' x2='360' y2='100' stroke='%230B2D4D' stroke-width='4'/%3E%3Ctext x='200' y='130' font-family='Arial Black, sans-serif' font-size='90' font-weight='900' text-anchor='middle' fill='%230B2D4D'%3EHRU%3C/text%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
[data-theme="dark"] .pp-card-stage::after { opacity: 0.08; filter: invert(1); }

.pp-card-stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;       /* never crop */
  object-position: center;
  z-index: 2;
  transition: transform 0.7s var(--ease);
  padding: 6%;
}
.pp-card:hover .pp-card-stage img {
  transform: scale(1.05);
}
/* Subtle category badge in corner (optional) */
.pp-card-badge {
  position: absolute;
  top: 0.85rem; left: 0.85rem; z-index: 3;
  padding: 0.3rem 0.7rem;
  background: rgba(11,45,77,0.85);
  backdrop-filter: blur(8px);
  border-radius: 4rem;
  font-family: var(--font-head);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
}

/* Body */
.pp-card-body {
  padding: 1.2rem 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-grow: 1;
  background: var(--card);
}
.pp-card-name {
  font-family: var(--font-head);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: var(--text);
  margin: 0;
  text-wrap: balance;
}
.pp-card-sub {
  font-size: 0.82rem;
  color: var(--text-sub);
  margin: 0;
  line-height: 1.55;
  flex-grow: 1;
}
.pp-card-cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.5rem;
  font-family: var(--font-head);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  transition: gap 0.25s var(--ease);
}
.pp-card-cta i { font-size: 0.72rem; transition: transform 0.25s var(--ease); }
.pp-card:hover .pp-card-cta { gap: 0.7rem; }
.pp-card:hover .pp-card-cta i { transform: translateX(3px); }

/* Compact variant for tight grids */
.pp-card-compact .pp-card-stage { aspect-ratio: 5 / 4; }
.pp-card-compact .pp-card-body { padding: 1rem 1.1rem 1.15rem; }
.pp-card-compact .pp-card-name { font-size: 0.98rem; }

/* Dark mode contrast tuning */
[data-theme="dark"] .pp-card-name { color: #F5F7FA; }
[data-theme="dark"] .pp-card-sub { color: #AEB9C5; }

/* Section accent for product grids */
.pp-grid-section {
  background: var(--bg);
  position: relative;
}
.pp-grid-section::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, var(--glow-navy), transparent 60%);
  opacity: 0.5;
}
.pp-grid-section > .container-xl { position: relative; z-index: 2; }

/* ── Product detail image (products.html alternating sections) ──
   5:4 aspect matches the photo composition, so the product
   fills the frame instead of looking small in a tall box. */
.product-detail-imgwrap {
  position: relative;
  background: var(--grad-steel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  box-shadow: var(--shadow-card);
}
[data-theme="dark"] .product-detail-imgwrap {
  background: linear-gradient(135deg, #1a2a3e 0%, #0d1c2b 100%);
}
.product-detail-imgwrap::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 30%, var(--glow-white), transparent 60%);
  z-index: 1;
  pointer-events: none;
}
/* HRU watermark for product detail stages */
.product-detail-imgwrap::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 65%; height: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'%3E%3Cellipse cx='200' cy='100' rx='180' ry='80' fill='none' stroke='%230B2D4D' stroke-width='8'/%3E%3Cline x1='40' y1='100' x2='360' y2='100' stroke='%230B2D4D' stroke-width='4'/%3E%3Ctext x='200' y='130' font-family='Arial Black, sans-serif' font-size='90' font-weight='900' text-anchor='middle' fill='%230B2D4D'%3EHRU%3C/text%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
[data-theme="dark"] .product-detail-imgwrap::after { opacity: 0.10; filter: invert(1); }
.product-detail-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 5%;
  z-index: 2;
  transition: transform 0.7s var(--ease);
}
.product-detail-imgwrap:hover .product-detail-img {
  transform: scale(1.04);
}

/* ── HVAC homepage card image area — premium photo box ──────
   5:4 aspect matches photo proportions; product fills naturally. */
.hvac-card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  display: block;
  object-fit: contain;
  object-position: center;
  background: var(--grad-steel);
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 8px;
  margin-bottom: 1.1rem;
  transition: transform 0.55s var(--ease);
}
[data-theme="dark"] .hvac-card-img {
  background: linear-gradient(135deg, #1a2a3e 0%, #0d1c2b 100%);
  border-color: rgba(255,255,255,0.06);
}
.hvac-card:hover .hvac-card-img {
  transform: scale(1.02);
}
/* The card itself — pad less since image area is bigger */
.hvac-card {
  padding: 1.2rem 1.2rem 1.4rem;
}
/* Move HVAC icon down so it sits in the body area, not overlapping image */
.hvac-card .hvac-icon {
  margin-top: 0.2rem;
  width: 2.6rem; height: 2.6rem;
  font-size: 1.15rem;
}

/* ── HVAC product page hero image stage already uses .hvac-image-placeholder
   Ensure images inside use contain + watermark glow */
.hvac-image-placeholder img {
  position: relative;
  z-index: 2;
}

/* ════════════════════════════════════════════════════════════
   NAVBAR — White text when sitting over the dark hero banner
   (Switches back to navy text the moment user scrolls and
    navbar gets its solid white background)
   ════════════════════════════════════════════════════════════ */

/* Pages whose hero is the dark photo banner: force light nav until scrolled */
body:has(.hero-section--banner) .hru-navbar:not(.scrolled) .nav-link,
body:has(.hero-section--banner) .hru-navbar:not(.scrolled) .nav-link:hover {
  color: #F5F7FA !important;
}
body:has(.hero-section--banner) .hru-navbar:not(.scrolled) .nav-link::after {
  background: #FFFFFF;
}
body:has(.hero-section--banner) .hru-navbar:not(.scrolled) .nav-link:hover,
body:has(.hero-section--banner) .hru-navbar:not(.scrolled) .nav-link.active {
  background: rgba(255,255,255,0.10) !important;
  color: #FFFFFF !important;
}
/* Logo also flips to white over dark hero */
body:has(.hero-section--banner) .hru-navbar:not(.scrolled) .navbar-brand img {
  filter: brightness(0) invert(1) !important;
}
/* Social icons — white over dark hero */
body:has(.hero-section--banner) .hru-navbar:not(.scrolled) .hru-social-header a {
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.75);
}
body:has(.hero-section--banner) .hru-navbar:not(.scrolled) .hru-social-header a:hover {
  border-color: #FFFFFF;
  color: #FFFFFF;
  background: rgba(255,255,255,0.12);
}
/* Language switcher button + theme toggle */
body:has(.hero-section--banner) .hru-navbar:not(.scrolled) .theme-toggle {
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #FFFFFF;
}
body:has(.hero-section--banner) .hru-navbar:not(.scrolled) .theme-toggle:hover {
  background: rgba(255,255,255,0.18);
  border-color: #FFFFFF;
  color: #FFFFFF;
}
body:has(.hero-section--banner) .hru-navbar:not(.scrolled) #langDisplay {
  color: #FFFFFF;
}
/* Mobile burger icon on dark hero */
body:has(.hero-section--banner) .hru-navbar:not(.scrolled) .navbar-toggler-icon {
  filter: brightness(0) invert(1);
}

/* Once scrolled (.scrolled adds white bg), revert nav text back to navy */
body:has(.hero-section--banner) .hru-navbar.scrolled .nav-link {
  color: var(--text-sub) !important;
}
body:has(.hero-section--banner) .hru-navbar.scrolled .nav-link:hover,
body:has(.hero-section--banner) .hru-navbar.scrolled .nav-link.active {
  color: var(--text) !important;
  background: var(--gold-dim) !important;
}
body:has(.hero-section--banner) .hru-navbar.scrolled .navbar-brand img {
  filter: var(--logo-filter) !important;
}

/* ════════════════════════════════════════════════════════════
   HERO BANNER — Cinematic full-bleed product photography
   Text rests on the dark left side; products dominate right
   ════════════════════════════════════════════════════════════ */
.hero-section--banner {
  position: relative;
  overflow: hidden;
  background: #06121E;   /* fallback before image loads */
  isolation: isolate;
}
.hero-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* ── 6-slide auto carousel — pure CSS, GPU-accelerated ────
   Total cycle: 36s (6s per slide). Each slide cross-fades
   in over ~1s, holds ~4s with a subtle Ken Burns zoom, and
   cross-fades out over ~1s. */
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.0);
  animation: hru-hero-cycle 36s infinite cubic-bezier(.4, 0, .2, 1);
  will-change: opacity, transform;     /* GPU compositing layer */
  backface-visibility: hidden;
}
.hero-slide--1 { animation-delay:  0s; }
.hero-slide--2 { animation-delay:  6s; }
.hero-slide--3 { animation-delay: 12s; }
.hero-slide--4 { animation-delay: 18s; }
.hero-slide--5 { animation-delay: 24s; }
.hero-slide--6 { animation-delay: 30s; }

@keyframes hru-hero-cycle {
  /* 0–2.8%   fade in   (1s of 36s)
     2.8–14%  fully visible with subtle Ken Burns zoom
     14–17%   fade out  (1s)
     17–100%  off-stage (other slides showing) */
  0%    { opacity: 0; transform: scale(1.00); }
  2.8%  { opacity: 1; transform: scale(1.01); }
  14%   { opacity: 1; transform: scale(1.08); }
  17%   { opacity: 0; transform: scale(1.09); }
  100%  { opacity: 0; transform: scale(1.00); }
}

/* Slide progress indicators */
.hero-dots {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.7rem;
  z-index: 5;
  pointer-events: none;
}
.hero-dot {
  display: block;
  width: 36px;
  height: 3px;
  border-radius: 4px;
  background: rgba(255,255,255,0.20);
  overflow: hidden;
  position: relative;
}
.hero-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #FFFFFF, #AEB9C5);
  transform-origin: left center;
  transform: scaleX(0);
  animation: hru-dot-fill 36s infinite linear;
}
.hero-dot--1::after { animation-delay:  0s; }
.hero-dot--2::after { animation-delay:  6s; }
.hero-dot--3::after { animation-delay: 12s; }
.hero-dot--4::after { animation-delay: 18s; }
.hero-dot--5::after { animation-delay: 24s; }
.hero-dot--6::after { animation-delay: 30s; }

@keyframes hru-dot-fill {
  /* fills horizontally over the active slide window (~16% of 36s) */
  0%    { transform: scaleX(0);   opacity: 1; }
  16.6% { transform: scaleX(1);   opacity: 1; }
  17.6% { transform: scaleX(1);   opacity: 0; }
  18.6% { transform: scaleX(0);   opacity: 0; }
  100%  { transform: scaleX(0);   opacity: 0; }
}

/* Reduced-motion users see a single static slide, no animation */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; opacity: 1; }
  .hero-slide--2, .hero-slide--3, .hero-slide--4,
  .hero-slide--5, .hero-slide--6 { display: none; }
  .hero-dot::after { animation: none; transform: scaleX(0); }
}

/* Mobile — keep carousel but lighter motion */
@media (max-width: 767px) {
  .hero-slide { background-position: 70% center; }
  .hero-dots { bottom: 1rem; gap: 0.5rem; }
  .hero-dot { width: 24px; }
}
/* Dark gradient overlay so text on the left stays legible no matter the theme.
   On the right we keep the cinematic product photo fully visible. */
.hero-banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,18,30,0.92) 0%, rgba(8,19,31,0.78) 30%, rgba(8,19,31,0.35) 55%, rgba(8,19,31,0.05) 80%, transparent 100%),
    linear-gradient(180deg, rgba(6,18,30,0.30) 0%, transparent 30%, rgba(6,18,30,0.55) 100%);
}
/* Force all hero text to white regardless of theme (background is always dark image) */
.hero-section--banner .hero-content,
.hero-section--banner .hero-content h1,
.hero-section--banner .hero-content p,
.hero-section--banner .hero-content .section-label,
.hero-section--banner .hero-stats span {
  color: #F5F7FA !important;
}
.hero-section--banner .hero-content .text-gold {
  color: #AEB9C5 !important;  /* steel grey — premium contrast on dark */
}
.hero-section--banner .hero-content p {
  color: #C9D1D9 !important;  /* satin silver body text */
}
.hero-section--banner .section-label {
  color: #AEB9C5 !important;
}
.hero-section--banner .section-label::before {
  background: #AEB9C5;
}
/* Hero stats — premium dark-mode treatment */
.hero-section--banner .hero-stats {
  border-top: 1px solid rgba(255,255,255,0.12);
}
.hero-section--banner .hero-stat .hru-counter {
  color: #F5F7FA !important;
}
.hero-section--banner .hero-stat > span:last-child {
  color: #AEB9C5 !important;
}
/* Product chips in hero — glass effect */
.hero-section--banner .product-tag {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #F5F7FA !important;
  backdrop-filter: blur(8px);
}
/* Outline button on dark hero */
.hero-section--banner .hru-btn-outline {
  border-color: rgba(255,255,255,0.35) !important;
  color: #F5F7FA !important;
  background: rgba(255,255,255,0.04) !important;
}
.hero-section--banner .hru-btn-outline:hover {
  border-color: #FFFFFF !important;
  background: rgba(255,255,255,0.12) !important;
  color: #FFFFFF !important;
}
/* Scroll indicator on dark hero */
.hero-section--banner .scroll-indicator { color: #AEB9C5; }
.hero-section--banner .scroll-indicator span {
  background: linear-gradient(180deg, transparent, #AEB9C5);
}

/* ── Hero category chips — highlighted solid navy pills ──
   Pure-white bold names that pop against the dark banner.
   Premium luxury industrial — Apple/BMW feel. */
.hero-product-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 2rem;
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.62rem 1.35rem;
  background: #0B2D4D;                       /* solid navy — highlights the name */
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 4rem;
  font-family: var(--font-head);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF !important;                  /* pure white name */
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow:
    0 4px 16px rgba(11,45,77,0.45),
    inset 0 1px 0 rgba(255,255,255,0.15);
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);    /* crisp on busy backdrop */
  transition: all 0.3s var(--ease);
  position: relative;
  overflow: hidden;
}
/* Subtle gradient sheen on hover for premium feel */
.hero-chip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hero-chip:hover {
  background: #123B63;                        /* button-hover navy */
  border-color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow:
    0 6px 22px rgba(11,45,77,0.55),
    0 0 0 3px rgba(255,255,255,0.10),
    inset 0 1px 0 rgba(255,255,255,0.20);
}
.hero-chip:hover::before { opacity: 1; }

/* ── Install steps photo treatment (homepage "Where rubber matters") ─
   Wider 5:4 frame matches photo proportions so the product fills
   the card naturally instead of looking small in a square box.
   Includes HRU watermark behind the product. */
.install-svg-anim--photo {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 5 / 4;
  border-radius: 22px;
  background: var(--grad-steel);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
  padding: 6px;
  box-shadow: var(--shadow-card);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
[data-theme="dark"] .install-svg-anim--photo {
  background: linear-gradient(135deg, #1a2a3e 0%, #0d1c2b 100%);
  border-color: rgba(255,255,255,0.08);
}
.install-svg-anim--photo::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 30%, var(--glow-white), transparent 65%);
  z-index: 1; pointer-events: none;
}
/* HRU watermark behind the product */
.install-svg-anim--photo::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 65%; height: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'%3E%3Cellipse cx='200' cy='100' rx='180' ry='80' fill='none' stroke='%230B2D4D' stroke-width='8'/%3E%3Cline x1='40' y1='100' x2='360' y2='100' stroke='%230B2D4D' stroke-width='4'/%3E%3Ctext x='200' y='130' font-family='Arial Black, sans-serif' font-size='90' font-weight='900' text-anchor='middle' fill='%230B2D4D'%3EHRU%3C/text%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
[data-theme="dark"] .install-svg-anim--photo::after { opacity: 0.10; filter: invert(1); }
.install-svg-anim--photo img {
  position: relative;
  z-index: 2;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.install-step:hover .install-svg-anim--photo {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-float);
}
@media (max-width: 575px) {
  .install-svg-anim--photo { max-width: 280px; padding: 4px; }
}

/* Mobile — slide products to backdrop, prioritise text */
@media (max-width: 767px) {
  .hero-banner-bg img { object-position: 70% center; }
  .hero-banner-overlay {
    background:
      linear-gradient(180deg, rgba(6,18,30,0.85) 0%, rgba(6,18,30,0.78) 50%, rgba(6,18,30,0.92) 100%);
  }
}

/* ── Hero banner image full-width section (alt) ───────────── */
.banner-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
}
.banner-hero img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 88vh;
  object-fit: cover;
}
.banner-hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 30%;
  background: linear-gradient(180deg, transparent, var(--bg));
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   CHATBOT CTA BUTTONS (after bot response)
   ════════════════════════════════════════════════════════════ */
.chat-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--border);
}
.chat-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.8rem;
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: all 0.22s var(--ease);
  white-space: nowrap;
}
.chat-cta-rfq {
  background: var(--gold);
  color: #fff !important;
  border: 1px solid var(--gold);
}
.chat-cta-rfq:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px var(--gold-glow);
  color: #fff !important;
}
.chat-cta-contact {
  background: transparent;
  color: var(--gold) !important;
  border: 1px solid var(--gold);
}
.chat-cta-contact:hover {
  background: var(--gold-dim);
  transform: translateY(-1px);
  color: var(--gold) !important;
}

/* ════════════════════════════════════════════════════════════
   STICKY RFQ BUTTON (desktop, vertical along right edge)
   ════════════════════════════════════════════════════════════ */
.sticky-rfq-side {
  position: fixed;
  right: -1px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: right center;
  z-index: 990;
  background: var(--gold);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.7rem 1.4rem;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -4px 24px var(--gold-glow);
  text-decoration: none;
  transition: all 0.3s var(--ease);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.sticky-rfq-side:hover {
  filter: brightness(1.1);
  padding-right: 1.8rem;
  color: #fff;
}
.sticky-rfq-side i { font-size: 0.8rem; }
@media (max-width: 991px) { .sticky-rfq-side { display: none; } }

/* ════════════════════════════════════════════════════════════
   HVAC PRODUCT PAGE (shared template styles)
   ════════════════════════════════════════════════════════════ */
.hvac-page-hero {
  position: relative;
  min-height: 70vh;
  padding-top: 100px;
  padding-bottom: 80px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.hvac-page-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 75% 30%, var(--gold-glow), transparent 70%),
    radial-gradient(ellipse 50% 40% at 15% 70%, var(--gold-dim), transparent 70%);
  z-index: 0;
}
.hvac-page-hero > .container-xl { position: relative; z-index: 2; }
.hvac-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-head); font-size: 0.78rem;
  font-weight: 700; letter-spacing: 0.15em;
  color: var(--gold); text-transform: uppercase;
  padding: 0.4rem 0.95rem;
  background: var(--gold-dim);
  border: 1px solid var(--border);
  border-radius: 4rem;
  margin-bottom: 1.4rem;
}
.hvac-hero-h1 {
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 1.2rem;
}
.hvac-hero-h1 span { color: var(--gold); }
.hvac-hero-desc {
  color: var(--text-sub);
  font-size: 1.05rem;
  line-height: 1.78;
  max-width: 56ch;
  margin-bottom: 2rem;
}

/* Product image placeholder (premium frame) */
.hvac-image-placeholder {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t);
}
.hvac-image-placeholder::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 18px, var(--gold-dim) 18px, var(--gold-dim) 19px),
    radial-gradient(ellipse at center, var(--gold-dim), transparent 70%);
  opacity: 0.55;
  pointer-events: none;
}
.hvac-image-placeholder canvas {
  position: relative; z-index: 2;
  display: block; max-width: 100%; max-height: 100%;
}
.hvac-image-placeholder-inner {
  position: relative; z-index: 2;
  text-align: center;
  color: var(--muted);
  font-family: var(--font-head);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hvac-image-placeholder-inner i {
  display: block;
  font-size: 3rem;
  color: var(--gold);
  margin-bottom: 0.7rem;
  opacity: 0.65;
}
.hvac-image-placeholder:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-gold);
}

/* Component application list */
.hvac-component-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.8rem 1.5rem;
  height: 100%;
  display: flex; flex-direction: column;
  transition: all var(--t);
}
.hvac-component-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
  box-shadow: var(--shadow-gold);
}
.hvac-component-card .component-num {
  font-family: var(--font-head);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--gold-dim);
  line-height: 1;
  margin-bottom: 0.6rem;
  transition: color var(--t);
}
.hvac-component-card:hover .component-num { color: var(--gold); }
.hvac-component-card h4 {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.6rem;
  text-wrap: balance;
}
.hvac-component-card p {
  font-size: 0.86rem;
  color: var(--text-sub);
  line-height: 1.7;
  flex-grow: 1;
  margin: 0;
  text-wrap: pretty;
}

/* Tech advantage badge */
.tech-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.42rem 0.85rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-sub);
  transition: all 0.25s;
}
.tech-badge:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-dim);
}
.tech-badge i {
  color: var(--gold);
  font-size: 0.78rem;
}

/* Related-products mini grid */
.related-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem;
  transition: all var(--t);
  text-decoration: none;
  display: flex; align-items: center; gap: 1rem;
}
.related-card:hover {
  border-color: var(--gold);
  background: var(--gold-dim);
  transform: translateX(3px);
}
.related-card i {
  width: 2.2rem; height: 2.2rem;
  background: var(--gold-dim);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  font-size: 0.95rem;
  flex-shrink: 0;
}
.related-card span {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
  letter-spacing: -0.005em;
}

/* Use case bullet list (HVAC pages) */
.hvac-use-cases {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}
@media (min-width: 768px) {
  .hvac-use-cases { grid-template-columns: 1fr 1fr; }
}
.hvac-use-cases li {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.7rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.88rem;
  color: var(--text-sub);
  line-height: 1.5;
  transition: all 0.25s var(--ease);
}
.hvac-use-cases li:hover {
  border-color: var(--gold);
  color: var(--text);
  transform: translateX(3px);
}
.hvac-use-cases li i {
  color: var(--gold);
  font-size: 0.95rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

/* Light mode corrections for HVAC pages */
[data-theme="light"] .hvac-image-placeholder::before { opacity: 0.35; }
[data-theme="light"] .hvac-component-card:hover { box-shadow: 0 8px 28px rgba(10,28,90,0.15); }

/* ═══════════════════════════════════════════════════════
   v5.0 — RESTRUCTURE: Segments, Appliance Gallery,
   Product Detail Pages & Request-a-Quote Forms
═══════════════════════════════════════════════════════ */

/* ── Three Business Segments ── */
.segment-card{
  display:flex;flex-direction:column;height:100%;
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--border);background:var(--card);text-decoration:none;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease,border-color .45s ease;
  will-change:transform;
}
.segment-card:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.18);border-color:var(--gold);}
.segment-card-media{position:relative;overflow:hidden;aspect-ratio:16/10;}
.segment-card-img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.2,.7,.2,1);}
.segment-card:hover .segment-card-img{transform:scale(1.06);}
.segment-card-kicker{position:absolute;top:1rem;left:1rem;display:inline-block;
  font-family:var(--font-head);font-size:.68rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:rgba(15,17,21,.55);
  border:1px solid rgba(255,255,255,.18);padding:.3rem .65rem;border-radius:999px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
/* Card body — strict vertical hierarchy with breathing space:
   TITLE → 18px → DESCRIPTION → 16px → TAGS → (auto)+22px → CTA at the very bottom */
.segment-card-body{display:flex;flex-direction:column;flex:1;padding:1.7rem 1.7rem 1.8rem;}
.segment-card-title{font-family:var(--font-head);font-size:1.45rem;font-weight:700;
  color:var(--text);margin:0;line-height:1.15;letter-spacing:.01em;}
.segment-card-desc{color:var(--text-sub);font-size:.93rem;line-height:1.65;margin:18px 0 0;}
.segment-card-tags{display:flex;flex-wrap:wrap;gap:.45rem;margin:16px 0 0;}
.segment-card-tag{font-size:.74rem;font-weight:500;color:var(--text-sub);
  background:var(--card-alt);border:1px solid var(--border);
  padding:.32rem .7rem;border-radius:999px;line-height:1;}
.segment-card-cta{display:inline-flex;align-items:center;gap:.55rem;margin-top:auto;padding-top:22px;
  color:var(--gold);font-family:var(--font-head);font-weight:600;font-size:.92rem;}
.segment-card-cta i{transition:transform .35s ease;}
.segment-card:hover .segment-card-cta i{transform:translateX(6px);}

/* ── Home Appliances image-only gallery ── */
.appliance-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;}
@media(max-width:992px){.appliance-gallery{grid-template-columns:repeat(3,1fr);}}
@media(max-width:680px){.appliance-gallery{grid-template-columns:repeat(2,1fr);gap:.8rem;}}
.appliance-tile{position:relative;display:block;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:1/1;border:1px solid var(--border);background:var(--card);isolation:isolate;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,border-color .4s ease;}
.appliance-tile:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(0,0,0,.24);border-color:var(--gold);}
.appliance-tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1);}
.appliance-tile:hover img{transform:scale(1.08);}
.appliance-tile-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:1rem;
  background:linear-gradient(180deg,rgba(15,17,21,0) 35%,rgba(15,17,21,.85) 100%);
  opacity:0;transition:opacity .4s ease;}
.appliance-tile:hover .appliance-tile-overlay{opacity:1;}
.appliance-tile-overlay span{color:#fff;font-family:var(--font-head);font-weight:600;font-size:.92rem;
  display:inline-flex;align-items:center;gap:.45rem;transform:translateY(8px);transition:transform .4s ease;}
.appliance-tile:hover .appliance-tile-overlay span{transform:translateY(0);}
.appliance-tile-overlay i{color:var(--gold);}

/* ── Product Detail Page ── */
.pd-hero{padding-top:110px;padding-bottom:2rem;}
.pd-breadcrumb{font-size:.82rem;color:var(--muted);margin-bottom:1.2rem;}
.pd-breadcrumb a{color:var(--muted);text-decoration:none;}
.pd-breadcrumb a:hover{color:var(--gold);}
.pd-imgwrap{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);background:var(--card-alt);}
.pd-imgwrap img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3;}
.pd-block{margin-top:2.2rem;}
.pd-block h2{font-family:var(--font-head);font-size:1.5rem;font-weight:700;margin-bottom:1rem;}
.pd-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem;}
@media(max-width:640px){.pd-list{grid-template-columns:1fr;}}
.pd-list li{display:flex;gap:.7rem;color:var(--text-sub);font-size:.94rem;line-height:1.55;}
.pd-list li i{color:var(--gold);margin-top:.2rem;flex-shrink:0;}

/* ── Request a Quote form (reusable block) ── */
.quote-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:2.2rem;box-shadow:0 18px 50px rgba(0,0,0,.10);}
.quote-card .inquiry-label{font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--text);margin-bottom:.4rem;}
.quote-sticky{position:sticky;top:96px;}
@media(max-width:991px){.quote-sticky{position:static;}}

/* ── v5.1 — Section CTAs ── */
.section-cta{margin-top:3rem;text-align:center;}
.seal-highlights{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin:2rem auto 0;max-width:680px;}
.seal-highlight{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:500;
  color:var(--text);background:var(--card);border:1px solid var(--border);
  padding:.6rem 1.1rem;border-radius:999px;}
.seal-highlight i{color:var(--gold);}

/* ── v5.3 — Force the three Segment cards onto ONE row (never wrap to 2) ── */
@media (min-width:768px){
  #segments .row.stagger-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.6rem;
    margin-left:0;margin-right:0;
  }
  #segments .row.stagger-grid > [class*="col-"]{
    width:auto;max-width:none;flex:none;
    padding-left:0;padding-right:0;margin:0;
  }
}

/* ── v5.4 — Segments as a simple, unbreakable CSS grid (always shows all 3) ── */
.segments-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;}
@media (min-width:768px){
  .segments-grid{grid-template-columns:repeat(3,1fr);gap:1.6rem;}
}
.segments-grid .segment-card{height:100%;}