/*
 * polish.css — Al Madar Premium UI Refinement Layer  v1.0
 * ─────────────────────────────────────────────────────────
 * PURPOSE : Business-grade polish on top of design-upgrade.css
 * RULES   : No layout change · No PHP touch · Brand colors only
 * LOAD    : After design-upgrade.css (3rd stylesheet)
 * ─────────────────────────────────────────────────────────
 * QUICK REFERENCE (for future edits — see workflow.md):
 *   Brand green   : #43A826  / var(--green)
 *   Green light   : #5DC93A  / var(--green-light)
 *   Green dark    : #359120  / var(--green-dark)
 *   Nav bg        : #0F0F0F  (black-near)
 *   WhatsApp      : #25D366  / var(--wa)
 *   Radius tokens : --r-sm(4) --r-md(8) --r-lg(12) --r-full(9999)
 */

/* ══════════════════════════════════════════════════════════════
   § 0  PREMIUM TOKEN LAYER
   ══════════════════════════════════════════════════════════════ */
:root {
  /* Refined green glow palette */
  --glow-green-sm  : 0 2px  10px rgba(67,168,38,.18);
  --glow-green-md  : 0 6px  22px rgba(67,168,38,.28);
  --glow-green-lg  : 0 12px 40px rgba(67,168,38,.38);
  --glow-wa-sm     : 0 2px  10px rgba(37,211,102,.22);
  --glow-wa-md     : 0 6px  22px rgba(37,211,102,.36);

  /* Refined card shadows (layered for depth) */
  --shadow-card    : 0 1px 3px rgba(0,0,0,.08),
                     0 4px 12px rgba(0,0,0,.07);
  --shadow-card-up : 0 4px 8px rgba(0,0,0,.08),
                     0 16px 40px rgba(0,0,0,.14);
  --shadow-xl      : 0 8px 16px rgba(0,0,0,.10),
                     0 24px 64px rgba(0,0,0,.18);

  /* Smooth premium easing */
  --ease-premium   : cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-bounce    : cubic-bezier(0.34, 1.30, 0.64, 1);

  /* Refined typography scale */
  --font-display   : 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --font-body      : 'Open Sans', 'Helvetica Neue', sans-serif;

  /* Trust strip accent */
  --trust-bg       : rgba(67,168,38,.07);
  --trust-border   : rgba(67,168,38,.18);
}

[data-theme="dark"] {
  --shadow-card    : 0 1px 3px rgba(0,0,0,.30),
                     0 4px 14px rgba(0,0,0,.28);
  --shadow-card-up : 0 4px 8px rgba(0,0,0,.32),
                     0 20px 48px rgba(0,0,0,.40);
  --shadow-xl      : 0 8px 20px rgba(0,0,0,.38),
                     0 28px 72px rgba(0,0,0,.50);
}

/* ══════════════════════════════════════════════════════════════
   § 1  GLOBAL BODY & BASE TYPOGRAPHY
   ══════════════════════════════════════════════════════════════ */
body {
  font-family: var(--font-body) !important;
  font-size: 15px;
  line-height: 1.70;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Heading hierarchy — clear, consistent, premium */
h1 { font-family: var(--font-display) !important; font-weight: 800 !important; letter-spacing: -0.038em !important; line-height: 0.97 !important; }
h2 { font-family: var(--font-display) !important; font-weight: 700 !important; letter-spacing: -0.028em !important; line-height: 1.05 !important; }
h3 { font-family: var(--font-display) !important; font-weight: 700 !important; letter-spacing: -0.018em !important; line-height: 1.12 !important; }
h4 { font-family: var(--font-body)    !important; font-weight: 700 !important; letter-spacing: -0.010em !important; }

p  { line-height: 1.78; color: var(--text-grey); }

/* Links — polished, no default underline in UI context */
a { text-decoration: none; }
a:hover { text-decoration: none; }

/* Selection highlight — brand green */
::selection       { background: rgba(67,168,38,.22); color: inherit; }
::-moz-selection  { background: rgba(67,168,38,.22); color: inherit; }

/* ══════════════════════════════════════════════════════════════
   § 2  TOPBAR — Trust strip with service-area signals
   ══════════════════════════════════════════════════════════════ */
.topbar {
  background: #070707 !important;
  border-bottom: 1px solid rgba(67,168,38,.12) !important;
  padding: 7px 6% !important;
}

/* Service area trust signal injected via ::after on topbar-left */
.topbar-left::after {
  content: '📍 Ajman · Dubai · Sharjah · All UAE';
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: rgba(255,255,255,.38);
  white-space: nowrap;
  padding-left: 18px;
  border-left: 1px solid rgba(255,255,255,.10);
  margin-left: 12px;
  display: inline-flex;
  align-items: center;
}

.topbar-item {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.60) !important;
  gap: 5px !important;
  transition: color 0.18s var(--ease-premium) !important;
}
.topbar-item:hover { color: var(--green-light) !important; }

.topbar-hours {
  font-size: 10.5px !important;
  color: rgba(255,255,255,.38) !important;
  font-weight: 500 !important;
}

@media (max-width: 768px) {
  .topbar-left::after { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   § 3  NAVBAR — Premium glass, refined spacing
   ══════════════════════════════════════════════════════════════ */
nav {
  height: 72px !important;
  padding: 0 6% !important;
  background: rgba(10,10,10,.88) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  border-bottom: 1px solid rgba(255,255,255,.055) !important;
  box-shadow: 0 1px 0 rgba(67,168,38,.10),
              0 4px 24px rgba(0,0,0,.35) !important;
  transition: background .3s ease, box-shadow .3s ease !important;
}

nav.scrolled {
  background: rgba(6,6,6,.96) !important;
  box-shadow: 0 1px 0 rgba(67,168,38,.18),
              0 8px 36px rgba(0,0,0,.55) !important;
}

/* Logo refinement */
.logo-img-custom {
  height: 52px !important;
  width: auto !important;
  filter: brightness(1.06) contrast(1.04) drop-shadow(0 1px 6px rgba(0,0,0,.5)) !important;
  transition: filter .2s ease !important;
}
.logo:hover .logo-img-custom {
  filter: brightness(1.12) contrast(1.06) drop-shadow(0 2px 10px rgba(0,0,0,.55)) !important;
}

/* Nav links — premium weight & spacing */
.nav-links { height: 72px !important; gap: 2px !important; }

.nav-links > li > a {
  height: 72px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  color: rgba(255,255,255,.68) !important;
  padding: 0 15px !important;
  transition: color .18s var(--ease-premium) !important;
}
.nav-links > li > a:hover  { color: #fff !important; }
.nav-links > li > a.active { color: #fff !important; font-weight: 700 !important; }

/* Underline animation — thinner, faster */
.nav-links > li > a::after {
  bottom: 14px !important;
  height: 1.5px !important;
  background: var(--green) !important;
  transition: width .24s var(--ease-premium), left .24s var(--ease-premium) !important;
}
.nav-links > li > a:hover::after,
.nav-links > li > a.active::after {
  width: calc(100% - 30px) !important;
  left: 15px !important;
}

/* Dropdown — premium card elevation */
.dropdown {
  border-radius: 0 0 10px 10px !important;
  border-top: 2px solid var(--green) !important;
  box-shadow: 0 20px 64px rgba(0,0,0,.65),
              0 0 0 1px rgba(255,255,255,.04) !important;
  padding: 10px 0 14px !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  min-width: 360px !important;
  transform-origin: top center !important;
  /* Prevent flicker: smooth transition only on opacity/transform */
  transition: opacity .18s var(--ease-premium),
              transform .18s var(--ease-premium),
              visibility .18s !important;
}

.nav-links > li.has-dropdown:hover .dropdown,
.nav-links > li.has-dropdown:focus-within .dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.dropdown a {
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 10px 18px !important;
  color: rgba(255,255,255,.72) !important;
  border-left: 2px solid transparent !important;
  transition: background .14s ease, color .14s ease, border-color .14s ease, padding-left .14s ease !important;
  line-height: 1.35 !important;
}
.dropdown a:hover, .dropdown a:focus {
  background: rgba(67,168,38,.10) !important;
  color: var(--green-light) !important;
  border-left-color: var(--green) !important;
  padding-left: 22px !important;
}
.dropdown a.active {
  color: var(--green-light) !important;
  background: rgba(67,168,38,.08) !important;
  border-left-color: var(--green) !important;
  font-weight: 600 !important;
}

/* Nav CTA group */
.nav-cta { gap: 8px !important; align-items: center !important; }

/* WhatsApp nav btn — primary, branded */
.nav-cta .btn-wa {
  background: var(--green) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 9px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  box-shadow: var(--glow-green-sm) !important;
  transition: all .2s var(--ease-premium) !important;
}
.nav-cta .btn-wa:hover {
  background: var(--green-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--glow-green-md) !important;
}
.nav-cta .btn-wa:active { transform: translateY(0) !important; }

/* Quote nav btn — ghost, clean */
.nav-cta .btn-quote {
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 6px !important;
  padding: 9px 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  color: rgba(255,255,255,.80) !important;
  background: transparent !important;
  transition: all .2s var(--ease-premium) !important;
}
.nav-cta .btn-quote:hover {
  border-color: rgba(255,255,255,.42) !important;
  background: rgba(255,255,255,.05) !important;
  color: #fff !important;
}

/* Hamburger — refined */
.hamburger {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 6px !important;
  padding: 9px !important;
}
.hamburger:hover { background: rgba(255,255,255,.10) !important; }

/* ══════════════════════════════════════════════════════════════
   § 4  SECTIONS — Consistent rhythm
   ══════════════════════════════════════════════════════════════ */
section         { padding: 88px 6% !important; }
section.alt     { padding: 88px 6% !important; background: var(--bg-section) !important; }
.svc-section    { padding: 56px 6% !important; }
.breadcrumb     { padding: 10px 6% !important; }

/* Section heading system */
.section-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 3.8px !important;
  text-transform: uppercase !important;
  color: var(--green) !important;
  margin-bottom: 14px !important;
}
.section-tag::before {
  content: '';
  width: 18px; height: 1.5px;
  background: var(--green);
  border-radius: 999px;
  display: block;
  flex-shrink: 0;
}

.section-title {
  font-family: var(--font-display) !important;
  font-size: clamp(30px, 4vw, 52px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.036em !important;
  line-height: 1.03 !important;
  text-transform: uppercase !important;
  color: var(--text-h) !important;
  margin-bottom: 12px !important;
}

.section-sub {
  font-size: 15px !important;
  line-height: 1.80 !important;
  color: var(--text-grey) !important;
  max-width: 580px !important;
  margin-bottom: 0 !important;
}

.divider {
  width: 40px !important;
  height: 2.5px !important;
  background: linear-gradient(90deg, var(--green) 0%, var(--green-light) 100%) !important;
  border-radius: 999px !important;
  margin: 14px 0 36px !important;
  box-shadow: var(--glow-green-sm) !important;
}

/* ══════════════════════════════════════════════════════════════
   § 5  HERO — Premium, editorial, trustworthy
   ══════════════════════════════════════════════════════════════ */
.hero {
  min-height: 100svh !important;
  padding: 0 6% !important;
}

/* Richer background gradient */
.hero-bg {
  background: linear-gradient(
    135deg,
    #060c0f 0%,
    #0c1820 35%,
    #0f1f28 65%,
    #080e12 100%
  ) !important;
}

/* Refined grid pattern — subtle, professional */
.hero-pattern {
  opacity: .018 !important;
  background-image:
    linear-gradient(rgba(67,168,38,.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67,168,38,.6) 1px, transparent 1px) !important;
  background-size: 72px 72px !important;
}

/* Green accent bar — reintroduce as thin left glow */
.hero-bar {
  display: block !important;
  width: 3px !important;
  background: linear-gradient(to bottom, var(--green-light) 0%, var(--green) 60%, transparent 100%) !important;
  opacity: .6 !important;
}

.hero-content {
  width: 58% !important;
  max-width: 720px !important;
  padding-left: 24px !important;
}

/* Hero badge — ultra-premium pill */
.hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 16px 6px 10px !important;
  background: rgba(67,168,38,.09) !important;
  border: 1px solid rgba(67,168,38,.22) !important;
  border-radius: 999px !important;
  margin-bottom: 26px !important;
  backdrop-filter: blur(8px) !important;
}
.hero-badge span {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 2.2px !important;
  color: var(--green-light) !important;
  text-transform: uppercase !important;
}
.hero-pulse {
  width: 7px !important; height: 7px !important;
  background: var(--green-light) !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

/* Hero h1 — editorial scale, tightest tracking */
.hero h1 {
  font-family: var(--font-display) !important;
  font-size: clamp(44px, 6.8vw, 88px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.042em !important;
  line-height: 0.94 !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin-bottom: 10px !important;
}
.hero h1 em { color: var(--green-light) !important; font-style: normal !important; }

.hero-sub {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.40) !important;
  margin-bottom: 22px !important;
}

.hero-desc {
  font-size: 15px !important;
  line-height: 1.78 !important;
  color: rgba(255,255,255,.60) !important;
  max-width: 520px !important;
  margin-bottom: 34px !important;
}

/* Hero CTA — strong primary, clear hierarchy */
.hero-btns { gap: 12px !important; flex-wrap: wrap !important; }

.hero .btn-wa.btn-lg {
  background: var(--green) !important;
  border: 2px solid var(--green) !important;
  border-radius: 7px !important;
  padding: 14px 26px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  box-shadow: var(--glow-green-md) !important;
  transition: all .22s var(--ease-premium) !important;
  min-height: 50px !important;
}
.hero .btn-wa.btn-lg:hover {
  background: var(--green-dark) !important;
  border-color: var(--green-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--glow-green-lg) !important;
}
.hero .btn-wa.btn-lg:active { transform: translateY(0) !important; }

.hero .btn-quote.btn-lg {
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,.25) !important;
  border-radius: 7px !important;
  padding: 14px 26px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.80) !important;
  transition: all .22s var(--ease-premium) !important;
  min-height: 50px !important;
}
.hero .btn-quote.btn-lg:hover {
  border-color: rgba(255,255,255,.50) !important;
  background: rgba(255,255,255,.05) !important;
  color: #fff !important;
}

/* Hero stats — cleaner, premium numbers */
.hero-stats {
  margin-top: 44px !important;
  padding-top: 28px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
.hstat { padding: 0 24px !important; border-right: 1px solid rgba(255,255,255,.09) !important; }
.hstat:first-child { padding-left: 0 !important; }
.hstat:last-child  { border-right: none !important; }

.hstat-num {
  font-family: var(--font-display) !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  color: var(--green-light) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}
.hstat-label {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.38) !important;
  margin-top: 5px !important;
}

/* Hero right — subtle feature list */
.hero-right {
  background: rgba(0,0,0,.15) !important;
  border-left: 1px solid rgba(255,255,255,.05) !important;
}
.hfeature {
  padding: 13px 16px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  background: rgba(255,255,255,.025) !important;
  gap: 12px !important;
  flex-direction: row !important;
  align-items: center !important;
  transition: all .2s var(--ease-premium) !important;
}
.hfeature:hover {
  background: rgba(67,168,38,.07) !important;
  border-color: rgba(67,168,38,.18) !important;
  transform: translateX(3px) !important;
}
.hfeature-icon { font-size: 18px !important; width: 30px !important; text-align: center !important; flex-shrink: 0 !important; }
.hfeature-name { font-size: 12.5px !important; font-weight: 600 !important; color: rgba(255,255,255,.90) !important; }
.hfeature-sub  { font-size: 10.5px !important; color: rgba(255,255,255,.38) !important; margin-top: 1px !important; }

/* ══════════════════════════════════════════════════════════════
   § 6  MARQUEE — Refined ticker
   ══════════════════════════════════════════════════════════════ */
.marquee-wrap { padding: 10px 0 !important; }
.marquee-item {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 3.2px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.90) !important;
}

/* ══════════════════════════════════════════════════════════════
   § 7  CTA STRIP — Bold trust call-to-action
   ══════════════════════════════════════════════════════════════ */
.cta-strip {
  background: var(--green) !important;
  padding: 36px 6% !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Subtle pattern on CTA strip */
.cta-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.04) 0,
      rgba(255,255,255,.04) 1px,
      transparent 1px,
      transparent 12px
    );
  pointer-events: none;
}

.cta-strip h3 {
  font-family: var(--font-display) !important;
  font-size: clamp(20px, 2.5vw, 26px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.022em !important;
  text-transform: uppercase !important;
  color: #fff !important;
}
.cta-strip p { font-size: 13px !important; color: rgba(255,255,255,.82) !important; margin-top: 3px !important; }

/* CTA strip buttons */
.cta-strip .btn-white {
  background: #fff !important;
  color: var(--green-dark) !important;
  border: 2px solid #fff !important;
  border-radius: 7px !important;
  padding: 12px 22px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.14) !important;
  transition: all .2s var(--ease-premium) !important;
}
.cta-strip .btn-white:hover {
  background: rgba(255,255,255,.92) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.20) !important;
}

.cta-strip .btn-outline-white {
  background: transparent !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.45) !important;
  border-radius: 7px !important;
  padding: 12px 22px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  transition: all .2s var(--ease-premium) !important;
}
.cta-strip .btn-outline-white:hover {
  border-color: rgba(255,255,255,.75) !important;
  background: rgba(255,255,255,.08) !important;
}

/* ══════════════════════════════════════════════════════════════
   § 8  TRUST STRIP — Service area + speed signals (inline)
   ══════════════════════════════════════════════════════════════ */

/* Injected via CSS content above .products-grid in #products section */
#products .section-sub::after {
  content: ' ✓ Ajman · Dubai · Sharjah · All Emirates  ✓ Fast Turnaround  ✓ Free Site Visit';
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--green);
  margin-top: 10px;
  opacity: 0.85;
}

/* ══════════════════════════════════════════════════════════════
   § 9  SERVICE CARDS — Premium elevation
   ══════════════════════════════════════════════════════════════ */
.products-grid {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
  gap: 18px !important;
  margin-top: 40px !important;
}

.prod-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden !important;
  transition: transform .28s var(--ease-premium),
              box-shadow .28s var(--ease-premium),
              border-color .22s ease !important;
}
.prod-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(67,168,38,.30) !important;
  box-shadow: var(--shadow-card-up), var(--glow-green-sm) !important;
}

.prod-img-wrap {
  aspect-ratio: 16/10 !important;
  overflow: hidden !important;
  position: relative !important;
}
.prod-img-wrap img {
  transition: transform .5s var(--ease-premium) !important;
  will-change: transform !important;
}
.prod-card:hover .prod-img-wrap img { transform: scale(1.05) !important; }

/* Image gradient overlay */
.prod-img-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.45) 0%, transparent 55%);
  z-index: 1;
  opacity: 0;
  transition: opacity .28s ease;
}
.prod-card:hover .prod-img-wrap::after { opacity: 1; }

.prod-body { padding: 20px 20px 18px !important; }

.prod-name {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  color: var(--text-h) !important;
  margin-bottom: 7px !important;
  line-height: 1.15 !important;
}

.prod-desc {
  font-size: 13px !important;
  line-height: 1.68 !important;
  color: var(--text-grey) !important;
  margin-bottom: 13px !important;
}

.spec-tag {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
  padding: 3px 9px !important;
  background: var(--green-pale) !important;
  color: var(--green-text) !important;
  border: 1px solid var(--green-border) !important;
  border-radius: 4px !important;
}
[data-theme="dark"] .spec-tag {
  background: rgba(67,168,38,.10) !important;
  border-color: rgba(67,168,38,.20) !important;
}

/* Product CTA button — polished */
.pcta {
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  padding: 9px 14px !important;
  min-height: 36px !important;
  transition: all .18s var(--ease-premium) !important;
}
.pcta:hover { transform: translateY(-1px) !important; }
.pcta.solid {
  background: var(--wa) !important;
  color: #fff !important;
  border-color: var(--wa) !important;
  box-shadow: var(--glow-wa-sm) !important;
}
.pcta.solid:hover {
  background: var(--wa-dark) !important;
  border-color: var(--wa-dark) !important;
  box-shadow: var(--glow-wa-md) !important;
}

/* Service chips */
.service-chips { gap: 7px !important; margin-bottom: 30px !important; }
.svc-chip {
  border-radius: 5px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  padding: 6px 13px !important;
  transition: all .16s ease !important;
}
.svc-chip:hover {
  background: var(--green) !important;
  color: #fff !important;
  border-color: var(--green) !important;
  transform: translateY(-1px) !important;
}

/* ══════════════════════════════════════════════════════════════
   § 10  ABOUT SECTION
   ══════════════════════════════════════════════════════════════ */
.about-text p { font-size: 14.5px !important; line-height: 1.82 !important; }

.vm-card {
  border-radius: 8px !important;
  border-left: 3px solid var(--green) !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--green) !important;
  padding: 18px 20px !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform .22s var(--ease-premium), box-shadow .22s ease !important;
}
.vm-card:hover {
  transform: translateX(3px) !important;
  box-shadow: var(--shadow-card-up) !important;
}
.vm-title {
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--green) !important;
  margin-bottom: 6px !important;
}
.vm-text { font-size: 13.5px !important; line-height: 1.72 !important; }

.about-img {
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-card) !important;
  transition: border-color .22s ease, box-shadow .22s ease !important;
}
.about-img:hover {
  border-color: var(--green-border) !important;
  box-shadow: var(--shadow-card-up) !important;
}

/* ══════════════════════════════════════════════════════════════
   § 11  INFRASTRUCTURE — Stats cards
   ══════════════════════════════════════════════════════════════ */
.istat {
  border-radius: 8px !important;
  padding: 22px 20px !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--green) !important;
  background: var(--bg-card) !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform .22s var(--ease-premium), box-shadow .22s ease !important;
}
.istat:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-card-up) !important;
}
.istat-num {
  font-family: var(--font-display) !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  color: var(--green) !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
}
.istat-label {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  color: var(--text-grey) !important;
  margin-top: 7px !important;
}

.infra-point {
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
  padding: 17px 18px !important;
  box-shadow: var(--shadow-card) !important;
  gap: 13px !important;
  display: flex !important;
  align-items: flex-start !important;
  transition: transform .22s ease, box-shadow .22s ease !important;
}
.infra-point:hover {
  transform: translateX(3px) !important;
  box-shadow: var(--shadow-card-up) !important;
}
.infra-icon {
  width: 42px !important; height: 42px !important;
  background: var(--green-pale) !important;
  border-radius: 7px !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
[data-theme="dark"] .infra-icon { background: rgba(67,168,38,.12) !important; }

.infra-title {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-h) !important;
  margin-bottom: 3px !important;
}
.infra-text { font-size: 12.5px !important; line-height: 1.62 !important; }

/* ══════════════════════════════════════════════════════════════
   § 12  GALLERY
   ══════════════════════════════════════════════════════════════ */
.gallery-grid { gap: 7px !important; }

.gal-item {
  border-radius: 6px !important;
  overflow: hidden !important;
  border: none !important;
  transition: transform .25s var(--ease-premium), box-shadow .25s ease !important;
}
.gal-item:hover {
  transform: scale(1.025) !important;
  box-shadow: var(--shadow-xl) !important;
  z-index: 2 !important;
  position: relative !important;
}
.gal-item img { transition: transform .5s var(--ease-premium) !important; }
.gal-item:hover img { transform: scale(1.06) !important; }

.gal-overlay {
  background: linear-gradient(
    to top,
    rgba(0,0,0,.72) 0%,
    rgba(67,168,38,.22) 55%,
    transparent 100%
  ) !important;
}
.gal-text {
  font-family: var(--font-display) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
}

/* ══════════════════════════════════════════════════════════════
   § 13  TESTIMONIALS
   ══════════════════════════════════════════════════════════════ */
.testi-card {
  border-radius: 10px !important;
  padding: 26px 24px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform .25s var(--ease-premium), box-shadow .25s ease, border-color .22s ease !important;
}
.testi-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-card-up) !important;
  border-color: var(--green-border) !important;
}
.stars { font-size: 13px !important; letter-spacing: 2px !important; color: var(--green) !important; }
.testi-text { font-size: 13.5px !important; line-height: 1.78 !important; }
.testi-name { font-size: 13px !important; font-weight: 700 !important; }
.testi-role { font-size: 11px !important; }

/* ══════════════════════════════════════════════════════════════
   § 14  PRICING CARDS
   ══════════════════════════════════════════════════════════════ */
.price-card {
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  padding: 28px !important;
  background: var(--bg-card) !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform .25s var(--ease-premium), box-shadow .25s ease, border-color .22s ease !important;
}
.price-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-card-up) !important;
  border-color: var(--green-border) !important;
}
.price-card.featured {
  border-color: var(--green) !important;
  box-shadow: 0 4px 20px rgba(67,168,38,.12), var(--shadow-card-up) !important;
}
.price-plan {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
}
.price-amount { font-family: var(--font-display) !important; font-weight: 800 !important; }

/* ══════════════════════════════════════════════════════════════
   § 15  FAQ
   ══════════════════════════════════════════════════════════════ */
details.faq-item {
  border-radius: 0 7px 7px 0 !important;
  border-left-width: 3px !important;
  transition: border-color .18s ease !important;
}
details.faq-item summary {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 17px 20px !important;
  letter-spacing: -0.005em !important;
}
details.faq-item[open] {
  border-left-color: var(--green) !important;
}

/* ══════════════════════════════════════════════════════════════
   § 16  CONTACT SECTION
   ══════════════════════════════════════════════════════════════ */
.fg input, .fg textarea, .fg select {
  border-radius: 6px !important;
  border: 1px solid var(--border-dark) !important;
  border-left: 3px solid var(--green) !important;
  background: var(--bg-input) !important;
  font-size: 14px !important;
  padding: 11px 14px !important;
  line-height: 1.5 !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}
.fg input:focus, .fg textarea:focus, .fg select:focus {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(67,168,38,.09) !important;
  outline: none !important;
}
.fg label {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--text-grey) !important;
  margin-bottom: 5px !important;
}

.form-submit {
  background: var(--green) !important;
  border: 2px solid var(--green) !important;
  border-radius: 7px !important;
  padding: 13px 34px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  box-shadow: var(--glow-green-sm) !important;
  transition: all .2s var(--ease-premium) !important;
  min-height: 48px !important;
}
.form-submit:hover {
  background: var(--green-dark) !important;
  border-color: var(--green-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--glow-green-md) !important;
}
.form-submit:active { transform: translateY(0) !important; }

.contact-item {
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
  padding: 15px 17px !important;
  box-shadow: var(--shadow-card) !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}
.contact-item:hover {
  border-color: var(--green-border) !important;
  box-shadow: var(--shadow-card-up) !important;
}
.c-icon {
  background: var(--green-pale) !important;
  border-radius: 6px !important;
}
[data-theme="dark"] .c-icon { background: rgba(67,168,38,.12) !important; }

/* WhatsApp CTA in contact */
.wa-cta {
  background: var(--wa) !important;
  border: 2px solid var(--wa) !important;
  border-radius: 7px !important;
  padding: 14px 22px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  box-shadow: var(--glow-wa-sm) !important;
  transition: all .2s var(--ease-premium) !important;
}
.wa-cta:hover {
  background: var(--wa-dark) !important;
  border-color: var(--wa-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--glow-wa-md) !important;
}

/* ══════════════════════════════════════════════════════════════
   § 17  FOOTER — Premium hierarchy
   ══════════════════════════════════════════════════════════════ */
footer { border-top: 1px solid rgba(255,255,255,.055) !important; }
.footer-main { padding: 68px 6% 44px !important; }

.footer-name {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  color: #fff !important;
}
.footer-sub {
  font-size: 9.5px !important;
  letter-spacing: 2.2px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.35) !important;
  display: block !important;
  margin-top: 3px !important;
  margin-bottom: 14px !important;
}
.footer-desc {
  font-size: 12.5px !important;
  line-height: 1.78 !important;
  color: rgba(255,255,255,.58) !important;
  max-width: 320px !important;
}

.footer-col h4 {
  font-family: var(--font-display) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.82) !important;
  margin-bottom: 18px !important;
  padding-bottom: 11px !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

.footer-links a {
  font-size: 12.5px !important;
  color: rgba(255,255,255,.58) !important;
  padding: 5px 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: color .16s ease, padding-left .16s ease !important;
  text-decoration: none !important;
}
.footer-links a:hover { color: #fff !important; padding-left: 4px !important; }
.footer-links a::before { color: var(--green) !important; font-size: 13px !important; }

.soc-btn {
  width: 36px !important; height: 36px !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  color: rgba(255,255,255,.60) !important;
  transition: all .18s var(--ease-premium) !important;
}
.soc-btn:hover {
  background: rgba(67,168,38,.14) !important;
  border-color: rgba(67,168,38,.28) !important;
  color: var(--green-light) !important;
  transform: translateY(-2px) !important;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.055) !important;
  padding: 18px 6% !important;
  background: rgba(0,0,0,.28) !important;
}
.footer-bottom p { font-size: 11.5px !important; color: rgba(255,255,255,.46) !important; }
.footer-fine     { font-size: 11px !important; color: rgba(255,255,255,.42) !important; }
.footer-uae      { font-size: 11.5px !important; color: rgba(255,255,255,.48) !important; }

.footer-cat {
  background: var(--green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 16px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
  transition: all .18s ease !important;
  box-shadow: var(--glow-green-sm) !important;
}
.footer-cat:hover {
  background: var(--green-dark) !important;
  transform: translateY(-1px) !important;
}

/* ══════════════════════════════════════════════════════════════
   § 18  WHATSAPP FAB — Always accessible, premium feel
   ══════════════════════════════════════════════════════════════ */
.wa-fab {
  width: 56px !important; height: 56px !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  box-shadow: 0 4px 20px rgba(37,211,102,.42),
              0 2px 8px rgba(0,0,0,.18) !important;
  transition: transform .22s var(--ease-bounce),
              box-shadow .22s ease,
              background .18s ease !important;
}
.wa-fab:hover {
  background: #22c55e !important;
  transform: scale(1.10) !important;
  box-shadow: 0 8px 28px rgba(37,211,102,.55),
              0 4px 12px rgba(0,0,0,.22) !important;
}
.wa-fab:active { transform: scale(0.97) !important; }

/* ══════════════════════════════════════════════════════════════
   § 19  SERVICE PAGES — Premium presentation
   ══════════════════════════════════════════════════════════════ */
.svc-hero { padding: 68px 6% 56px !important; }

.svc-hero-text h1 {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 4.5vw, 52px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.032em !important;
  text-transform: uppercase !important;
  line-height: 1.0 !important;
}
.svc-hero-desc {
  font-size: 14.5px !important;
  line-height: 1.80 !important;
  color: var(--text-grey) !important;
}

.svc-hero-img {
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-xl) !important;
}

.btn-svc-wa {
  background: var(--wa) !important;
  border: 2px solid var(--wa) !important;
  border-radius: 7px !important;
  padding: 13px 26px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  box-shadow: var(--glow-wa-sm) !important;
  transition: all .2s var(--ease-premium) !important;
}
.btn-svc-wa:hover {
  background: var(--wa-dark) !important;
  border-color: var(--wa-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--glow-wa-md) !important;
}

.btn-svc-call {
  background: transparent !important;
  border: 1.5px solid var(--border-dark) !important;
  border-radius: 7px !important;
  padding: 12px 24px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  color: var(--text-h) !important;
  transition: all .2s var(--ease-premium) !important;
}
.btn-svc-call:hover {
  border-color: var(--green-border) !important;
  color: var(--green) !important;
  background: var(--green-pale) !important;
}
[data-theme="dark"] .btn-svc-call:hover {
  background: rgba(67,168,38,.08) !important;
}

/* Service gallery */
.svc-gallery img {
  border-radius: 7px !important;
  transition: transform .3s var(--ease-premium), box-shadow .3s ease !important;
}
.svc-gallery img:hover {
  transform: scale(1.03) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* Service FAQ */
details.svc-faq {
  border-radius: 0 7px 7px 0 !important;
  border-left-width: 3px !important;
  box-shadow: var(--shadow-card) !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}
details.svc-faq[open] { border-left-color: var(--green) !important; }
details.svc-faq summary { font-size: 13.5px !important; padding: 16px 20px !important; }
details.svc-faq .faq-answer { font-size: 13.5px !important; line-height: 1.78 !important; }

/* Service CTA band */
.cta-band {
  padding: 64px 6% !important;
  text-align: center !important;
  background: var(--green) !important;
}
.cta-band h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(24px, 3.5vw, 40px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  text-transform: uppercase !important;
}
.cta-band p { font-size: 14.5px !important; color: rgba(255,255,255,.85) !important; }

/* Related service cards */
.related-card {
  border-radius: 9px !important;
  padding: 20px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform .22s var(--ease-premium), box-shadow .22s ease, border-color .18s ease !important;
  text-decoration: none !important;
}
.related-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--green-border) !important;
  box-shadow: var(--shadow-card-up) !important;
}
.related-card h3 { font-family: var(--font-display) !important; font-weight: 700 !important; }
.related-card span { font-size: 12px !important; font-weight: 700 !important; }

/* Svc stats */
.svc-stats {
  border-radius: 9px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
  box-shadow: var(--shadow-card) !important;
  padding: 28px 30px !important;
}
.svc-stat-num {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  color: var(--green) !important;
  letter-spacing: -0.02em !important;
}

/* Breadcrumb */
.breadcrumb, .svc-breadcrumb {
  font-size: 11.5px !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ══════════════════════════════════════════════════════════════
   § 20  CATALOGUE BUTTON
   ══════════════════════════════════════════════════════════════ */
.btn-catalogue {
  background: var(--green) !important;
  border: none !important;
  border-radius: 7px !important;
  padding: 14px 30px !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  box-shadow: var(--glow-green-md) !important;
  transition: all .22s var(--ease-premium) !important;
}
.btn-catalogue:hover {
  background: var(--green-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--glow-green-lg) !important;
}
.btn-catalogue:active { transform: translateY(0) !important; }

/* ══════════════════════════════════════════════════════════════
   § 21  SCROLL REVEAL — Refined timing
   ══════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0 !important;
  transform: translateY(20px) !important;
  transition: opacity .65s var(--ease-premium),
              transform .65s var(--ease-premium) !important;
}
.reveal.visible { opacity: 1 !important; transform: translateY(0) !important; }

/* ══════════════════════════════════════════════════════════════
   § 22  MOBILE — Comfortable spacing, clear tap targets
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  section, section.alt { padding: 72px 5% !important; }
  .svc-hero { padding: 56px 5% 44px !important; }

  /* Mobile menu — premium dark panel */
  .mob-menu-open .nav-links {
    background: #080808 !important;
    border-bottom: 2px solid var(--green) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,.6) !important;
  }
  .mob-menu-open .nav-links > li > a {
    height: 54px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 0 22px !important;
    color: rgba(255,255,255,.80) !important;
    border-bottom: 1px solid rgba(255,255,255,.055) !important;
  }
  .mob-menu-open .nav-links > li > a:hover { background: rgba(255,255,255,.04) !important; color: #fff !important; }

  .mob-menu-open .has-dropdown .dropdown a {
    font-size: 13px !important;
    padding: 11px 20px 11px 26px !important;
    min-height: 44px !important;
  }

  .hero-content { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; }
  .hero-right { display: none !important; }
  .hero h1 { font-size: clamp(36px, 9vw, 60px) !important; }
  .hero-stats { gap: 0 !important; }
  .hstat { border-right: none !important; padding: 8px 14px !important; }
  .hstat-num { font-size: 26px !important; }
}

@media (max-width: 768px) {
  nav { height: 62px !important; }
  .nav-links { height: 62px !important; }
  section, section.alt { padding: 60px 5% !important; }
  .cta-strip { padding: 32px 5% !important; }
  .footer-main { padding: 52px 5% 36px !important; }
  .footer-bottom { padding: 16px 5% !important; }
  .topbar { padding: 7px 5% !important; }

  /* Single-column grids */
  .products-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .testi-grid    { grid-template-columns: 1fr !important; gap: 14px !important; }
  .pricing-grid  { grid-template-columns: 1fr !important; gap: 14px !important; }
  .gallery-grid  { grid-template-columns: repeat(2,1fr) !important; gap: 5px !important; }

  /* Hero */
  .hero { padding: 56px 5% 44px !important; }
  .hero h1 { font-size: clamp(34px, 10vw, 52px) !important; }
  .hero-desc { font-size: 14px !important; }
  .hero-btns { flex-direction: column !important; align-items: stretch !important; }
  .hero-btns a, .hero-btns button { width: 100% !important; justify-content: center !important; }
  .hero-stats { flex-wrap: wrap !important; }
  .hstat { flex: 1 1 50% !important; text-align: center !important; padding: 10px 6px !important; }
  .hstat-num { font-size: 24px !important; }
  .hstat-label { font-size: 9px !important; }

  /* Buttons — minimum tap targets */
  .btn-wa, .btn-quote, .btn-white, .btn-outline-white,
  .btn-svc-wa, .btn-svc-call, .form-submit, .wa-cta {
    min-height: 46px !important;
  }
  .hamburger { min-width: 44px !important; min-height: 44px !important; }
}

@media (max-width: 480px) {
  nav { height: 58px !important; padding: 0 4% !important; }
  section, section.alt { padding: 48px 4% !important; }
  .cta-strip { padding: 28px 4% !important; flex-direction: column !important; text-align: center !important; }
  .cta-btns { flex-direction: column !important; width: 100% !important; }
  .cta-btns a { width: 100% !important; text-align: center !important; }
  .topbar { padding: 7px 4% !important; }
  .footer-main { padding: 44px 4% 28px !important; }
  .footer-bottom { padding: 14px 4% !important; }
  .gallery-grid { grid-template-columns: 1fr !important; }
  .hero { padding: 48px 4% 36px !important; }
  .hero h1 { font-size: clamp(32px, 10.5vw, 44px) !important; }
  .wa-fab { width: 52px !important; height: 52px !important; }
}

/* ══════════════════════════════════════════════════════════════
   § 23  PREFERS-REDUCED-MOTION
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   § 24  PRINT — Clean output
   ══════════════════════════════════════════════════════════════ */
@media print {
  .topbar, nav, .hamburger, .wa-fab, .chat-bubble,
  .chat-win, .modal-overlay, #pageLoader { display: none !important; }
  body { background: #fff !important; color: #111 !important; font-size: 12pt !important; }
  .hero { min-height: auto !important; background: #fff !important; padding: 20px !important; }
  .hero h1, .section-title { color: #111 !important; }
}