/* ═══════════════════════════════════════════════════════════
   CANOPY KINGS LDN — AWWWARDS-TIER LUXURY REDESIGN 2025
   Vibe: Ethereal Glass × Industrial Warmth
   Layout: Asymmetric Bento + Z-Axis Cascade
   ═══════════════════════════════════════════════════════════ */

/* ── Self-hosted Outfit font (no external requests) ── */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100; font-display: swap; src: url('/fonts/Outfit-100.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 200; font-display: swap; src: url('/fonts/Outfit-200.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/Outfit-300.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/Outfit-400.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/Outfit-500.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/Outfit-600.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/Outfit-700.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/Outfit-800.ttf') format('truetype'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/Outfit-900.ttf') format('truetype'); }

:root {
  /* ── Palette ── */
  --bg:           #050507;
  --bg2:          #090810;
  --s0:           rgba(255,255,255,0.018);
  --s1:           rgba(255,255,255,0.032);
  --s2:           rgba(255,255,255,0.055);
  --s3:           rgba(255,255,255,0.08);
  --glass:        rgba(8,7,12,0.62);
  --glass-b:      rgba(255,255,255,0.06);
  --glass-bh:     rgba(255,255,255,0.12);
  --inner-hi:     inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.2);

  /* ── Brand ── */
  --orange:       #4ba625;
  --orange-b:     #5ec033;
  --orange-c:     #7ed956;
  --og:           rgba(75,166,37,0.18);
  --og-sm:        rgba(75,166,37,0.07);
  --og-xs:        rgba(75,166,37,0.04);

  /* ── Text ── */
  --t100:         #FAFAF8;
  --t70:          rgba(250,250,248,0.7);
  --t50:          rgba(250,250,248,0.5);
  --t30:          rgba(250,250,248,0.3);
  --t15:          rgba(250,250,248,0.15);
  --t08:          rgba(250,250,248,0.08);

  /* ── Fonts (Outfit everywhere — variable-weight luxury typography) ── */
  --fd: 'Outfit', sans-serif;
  --fb: 'Outfit', sans-serif;
  --fs: 'Outfit', sans-serif;

  /* ── Gold accent (extracted from logo for premium dual-tone palette) ── */
  --gold:    #5ec033;
  --gold-b:  #7ed956;
  --gold-g:  rgba(75,166,37,0.18);

  /* ── Motion ── */
  --spring:  cubic-bezier(0.32, 0.72, 0, 1);
  --bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --expo:    cubic-bezier(0.19, 1.0, 0.22, 1);
  --smooth:  cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Radius ── */
  --r-xs: 8px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 40px;

  /* ── Shadows ── */
  --shadow-card:  0 0 0 1px var(--glass-b), 0 24px 64px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.3);
  --glow-orange:  0 0 60px rgba(75,166,37,0.22), 0 0 120px rgba(75,166,37,0.1);
  --glow-sm:      0 0 30px rgba(75,166,37,0.15);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
ul, ol { list-style: none; }
html { scroll-behavior: smooth; max-width: 100vw; overflow-x: hidden; }
body {
  font-family: var(--fb);
  background: var(--bg);
  color: var(--t100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
*, *::before, *::after { box-sizing: border-box; }
p, h1, h2, h3, h4, h5, h6, li, span, a, div { overflow-wrap: break-word; word-wrap: break-word; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }

/* ── NOISE OVERLAY (fixed, no GPU repaint) ── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 180px;
}

/* ── TYPOGRAPHY — refined Outfit hierarchy for luxury feel ── */
h1,h2,h3,h4,h5 {
  font-family: var(--fd);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-feature-settings: "ss01" 1, "kern" 1;
}
h1 { font-size: clamp(2.8rem, 7vw, 6.4rem); font-weight: 800; }
h2 { font-size: clamp(2rem, 4.5vw, 4rem);   font-weight: 700; letter-spacing: -0.038em; }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.85rem); font-weight: 700; letter-spacing: -0.025em; }
h4 { font-size: 1rem; font-weight: 600; letter-spacing: -0.005em; }
h5 { font-weight: 600; letter-spacing: 0; }
p  { color: var(--t50); line-height: 1.75; font-size: 0.95rem; font-weight: 400; letter-spacing: -0.003em; }
strong { font-weight: 600; }

/* ── UTILITIES ── */
.container { max-width: 1440px; margin: 0 auto; padding: 0 clamp(14px, 2vw, 32px); position: relative; z-index: 1; }
.section   { padding: clamp(80px,10vw,140px) 0; position: relative; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--og-sm); border: 1px solid rgba(75,166,37,0.22);
  color: var(--orange-b); padding: 5px 14px 5px 10px;
  border-radius: 100px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; font-family: var(--fd);
  margin-bottom: 24px;
}
.eyebrow::before { content: ''; width: 6px; height: 6px; background: var(--orange); border-radius: 50%; flex-shrink: 0; animation: blink 2s ease-in-out infinite; }

@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.3;} }

.text-orange {
  color: var(--orange);
}
.text-dim { color: var(--t50); }

/* ── GLASS DOUBLE-BEZEL SYSTEM ── */
.glass-shell {
  background: var(--s0);
  border: 1px solid var(--glass-b);
  border-radius: var(--r-lg);
  padding: 1.5px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.5s var(--spring), box-shadow 0.5s var(--spring);
}
.glass-shell:hover {
  border-color: var(--glass-bh);
  box-shadow: var(--shadow-card), var(--glow-sm);
}
.glass-core {
  background: var(--glass);
  border-radius: calc(var(--r-lg) - 1.5px);
  box-shadow: var(--inner-hi);
  position: relative; overflow: hidden;
}
.glass-core::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 60%);
  pointer-events: none;
}

/* ── PREMIUM BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--fd); font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.02em; padding: 14px 20px 14px 24px;
  border-radius: 100px; border: none; cursor: pointer;
  transition: transform 0.4s var(--bounce), box-shadow 0.4s var(--spring);
  position: relative; white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: transform 0.4s var(--bounce);
}
.btn:hover .btn-icon { transform: translate(2px, -1px) scale(1.08); }

.btn-primary {
  background: linear-gradient(135deg, var(--orange) 0%, #3d8a1f 100%);
  color: #fff;
  box-shadow: 0 4px 24px rgba(75,166,37,0.35), 0 1px 0 rgba(255,255,255,0.15) inset;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 36px rgba(75,166,37,0.45), 0 1px 0 rgba(255,255,255,0.15) inset; }
.btn-primary .btn-icon { background: rgba(0,0,0,0.15); }

.btn-ghost {
  background: var(--s1); color: var(--t70);
  border: 1px solid var(--glass-b);
  box-shadow: var(--inner-hi);
}
.btn-ghost:hover { background: var(--s2); color: var(--t100); transform: translateY(-2px); }
.btn-ghost .btn-icon { background: var(--s2); }

.btn svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }

/* ── FULL-WIDTH SITE HEADER ── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(5, 5, 7, 0.78);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.4s var(--spring), border-color 0.4s, box-shadow 0.4s;
  overflow: visible;
}
.site-header.scrolled {
  background: rgba(5, 5, 7, 0.92);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  border-color: rgba(75, 166, 37, 0.12);
}
.site-header-inner {
  max-width: 1440px; margin: 0 auto;
  padding: 6px clamp(16px, 3vw, 32px);
  display: flex; align-items: center; gap: 16px;
  position: relative;
  min-height: 100px;
}

/* Brand (logo — absolutely centered in header, fits within header height) */
.brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 105;
  text-decoration: none;
  transition: opacity 0.3s var(--spring);
}
.brand:hover { opacity: 0.92; }
.brand-logo-img {
  display: block;
  height: 70px;
  width: auto;
  transition: transform 0.5s var(--bounce);
}
.brand:hover .brand-logo-img { transform: scale(1.04); }

/* Nav groups — left side has both, CTA on far right */
.primary-nav {
  display: flex; align-items: center; gap: 4px;
}
.primary-nav--left { }
.primary-nav--right { margin-right: auto; }
.primary-nav a {
  position: relative;
  font-family: var(--fd);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--t70);
  padding: 8px 16px;
  text-decoration: none;
  transition: color 0.3s var(--spring);
  -webkit-tap-highlight-color: transparent;
}
.primary-nav a:hover { color: var(--t100); }
.primary-nav a.active { color: var(--orange); }
.primary-nav a.active::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--orange);
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(75, 166, 37, 0.7);
}

/* Right side: phone + CTA */
.header-cta {
  display: flex; align-items: center; gap: 18px;
  flex-shrink: 0;
}
.header-phone {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--fd);
  font-size: 0.92rem;
  color: var(--t100);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s var(--spring);
}
.header-phone:hover { color: var(--orange-c); }
.header-phone-label { color: var(--t60); font-weight: 500; }
.header-phone strong { font-weight: 700; letter-spacing: -0.005em; }

.header-quote-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--fd);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #fff;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
  background: linear-gradient(135deg, #5ec033 0%, var(--orange) 60%, #3d8a1f 100%);
  box-shadow: 0 4px 18px rgba(75, 166, 37, 0.35),
              inset 0 1px 0 rgba(160, 220, 130, 0.4),
              inset 0 -1px 0 rgba(30, 80, 10, 0.3);
  transition: transform 0.4s var(--bounce), box-shadow 0.4s var(--spring);
  white-space: nowrap;
}
.header-quote-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(75, 166, 37, 0.5),
              0 0 0 1px rgba(75, 166, 37, 0.32),
              inset 0 1px 0 rgba(160, 220, 130, 0.5),
              inset 0 -1px 0 rgba(30, 80, 10, 0.3);
}
.header-quote-btn:active { transform: translateY(0); }

/* Legacy aliases (so older selectors don't break) */
.nav-wrap { display: contents; }
.nav { display: contents; }
.nav-logo { display: inline-flex; align-items: center; gap: 12px; }
.logo-mark { width: 36px; height: 36px; flex-shrink: 0; }

/* Brand logo — gold-on-dark image, fully visible (no crop) */
.brand-logo {
  display: block; flex-shrink: 0;
  width: 92px; height: 92px;
  background-color: transparent;
  background-image: url('../images/logo-brand.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 14px;
  box-shadow:
    0 4px 22px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(75,166,37,0.22);
  transition: transform 0.5s var(--bounce), box-shadow 0.5s var(--spring);
}
.nav-logo:hover .brand-logo {
  transform: scale(1.06);
  box-shadow:
    0 10px 32px rgba(75,166,37,0.5),
    inset 0 0 0 1px rgba(75,166,37,0.55);
}
.brand-logo--lg {
  width: 140px; height: 140px;
  background-size: contain;
  background-position: center;
  border-radius: 20px;
}
.logo-text-wrap span:first-child { font-family: var(--fd); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.04em; color: var(--t100); display: block; line-height: 1.1; }
.logo-text-wrap span:last-child  { font-family: var(--fd); font-size: 0.6rem; letter-spacing: 0.22em; color: var(--orange-b); text-transform: uppercase; display: block; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; padding: 0; margin: 0; }
.nav-links li { list-style: none; position: relative; }
.nav-links a {
  position: relative;
  display: inline-flex; align-items: center;
  font-family: var(--fd);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--t50);
  padding: 10px 18px;
  border-radius: 100px;
  transition: color 0.4s var(--spring), letter-spacing 0.4s var(--spring);
  z-index: 1;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
/* Glass pill that scales in on hover/active */
.nav-links a::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,0.04);
  border: 1px solid transparent;
  opacity: 0;
  transform: scale(0.84);
  transition: opacity 0.45s var(--spring), transform 0.5s var(--bounce),
              background 0.4s, border-color 0.4s, box-shadow 0.4s;
  z-index: -1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.2);
}
/* Subtle shimmer sweep on hover */
.nav-links a::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.10) 50%, transparent 70%);
  background-size: 250% 100%;
  background-position: 110% 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s, background-position 0.85s var(--spring);
  z-index: -1;
}
.nav-links a:hover { color: var(--t100); }
.nav-links a:hover::before {
  opacity: 1;
  transform: scale(1);
  background: rgba(255,255,255,0.06);
  border-color: var(--glass-b);
}
.nav-links a:hover::after {
  opacity: 1;
  background-position: -120% 0;
}
/* Active = orange-tinted pill with warm glow */
.nav-links a.active { color: var(--orange-c); }
.nav-links a.active::before {
  opacity: 1;
  transform: scale(1);
  background: linear-gradient(135deg, rgba(75,166,37,0.20) 0%, rgba(75,166,37,0.06) 100%);
  border-color: rgba(75,166,37,0.32);
  box-shadow:
    0 4px 18px rgba(75,166,37,0.24),
    inset 0 1px 0 rgba(160,220,130,0.32),
    inset 0 -1px 0 rgba(0,0,0,0.15);
}
.nav-links a:active { transform: scale(0.97); }
.nav-cta { display: flex; align-items: center; gap: 8px; background: var(--orange); color: #fff !important; padding: 10px 18px !important; border-radius: 100px !important; font-weight: 600; font-size: 0.875rem; transition: background 0.3s, transform 0.3s var(--bounce), box-shadow 0.3s; box-shadow: 0 4px 20px rgba(75,166,37,0.3); }
.nav-cta:hover { background: var(--orange-b) !important; transform: scale(1.04); box-shadow: 0 6px 28px rgba(75,166,37,0.4) !important; }
.hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: var(--s2); border: 1px solid var(--glass-b); border-radius: 50%; cursor: pointer; padding: 11px; flex-shrink: 0; }
.hamburger span { display: block; height: 1.5px; background: var(--t70); border-radius: 2px; transition: transform 0.4s var(--spring), opacity 0.3s; }
.hamburger.open { position: fixed; top: 16px; right: 16px; z-index: 115; }
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu overlay */
.mobile-overlay {
  display: none; position: fixed; inset: 0; z-index: 110;
  background: rgba(5,5,7,0.95); backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 20px;
}
.mobile-overlay.open { display: flex; }
.mobile-close {
  position: absolute; top: 16px; right: 16px; z-index: 115;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.3s;
}
.mobile-close:hover { background: rgba(255,255,255,0.15); }
.mobile-close svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 2; fill: none; }
.mobile-overlay a {
  font-family: var(--fd); font-size: 1.15rem; font-weight: 600;
  color: var(--t70); letter-spacing: -0.01em;
  padding: 10px 0;
  transition: color 0.3s, transform 0.3s;
  opacity: 0; transform: translateY(20px);
}
.mobile-overlay.open a { opacity: 1; transform: translateY(0); }
.mobile-overlay a:nth-child(2) { transition-delay: 0.05s; }
.mobile-overlay a:nth-child(3) { transition-delay: 0.1s; }
.mobile-overlay a:nth-child(4) { transition-delay: 0.15s; }
.mobile-overlay a:nth-child(5) { transition-delay: 0.2s; }
.mobile-overlay a:hover { color: var(--orange-b); transform: translateX(8px); }
.mobile-overlay .mobile-phone { font-size: 1rem; color: var(--t50); }
.mobile-overlay .mobile-cta {
  margin-top: 12px; font-size: 0.85rem; background: var(--orange); color: #fff !important;
  padding: 10px 22px; border-radius: 100px; font-weight: 600; letter-spacing: 0.02em;
  transition-delay: 0.25s !important;
}
.mobile-overlay .mobile-cta:hover { transform: scale(1.04) !important; background: var(--orange-b); }
.mobile-overlay .mobile-social { margin-top: 10px; display: flex; gap: 8px; }
.mobile-overlay .social-pill { padding: 5px 12px; font-size: 0.72rem; }
.mobile-overlay .social-pill-icon svg { width: 14px; height: 14px; }
.mobile-overlay .social-pill-icon { width: 14px; height: 14px; }

/* ── HERO ── */
.hero {
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding: 140px 0 60px;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 70% 60% at 70% 40%, rgba(75,166,37,0.07) 0%, transparent 70%),
              radial-gradient(ellipse 40% 40% at 20% 70%, rgba(120,80,255,0.04) 0%, transparent 60%),
              var(--bg);
}
.hero-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black 30%, transparent 100%);
}
.hero-content { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.hero-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.hero-headline { margin-bottom: 14px; font-size: clamp(2rem, 4.6vw, 4rem); line-height: 1.2; }
.hero-headline span { display: block; padding-bottom: 8px; }
.hero-headline span:last-child { font-size: 0.5em !important; }
.hero-sub { font-size: 0.95rem; color: var(--t50); max-width: 460px; margin-bottom: 22px; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-badge { display: flex; align-items: center; gap: 7px; background: var(--s1); border: 1px solid var(--glass-b); border-radius: 100px; padding: 6px 12px; font-size: 0.74rem; color: var(--t50); font-weight: 500; }
.hero-badge svg { width: 14px; height: 14px; fill: var(--orange); flex-shrink: 0; }
.hero-right { display: flex; flex-direction: column; gap: 12px; }
.hero-stat-card { padding: 24px 28px; transition: transform 0.5s var(--spring); }
.hero-stat-card:hover { transform: translateX(8px); }
.hero-stat-num { font-family: var(--fd); font-size: 2.8rem; font-weight: 800; color: var(--orange); line-height: 1; margin-bottom: 4px; }
.hero-stat-label { font-size: 0.82rem; color: var(--t40); letter-spacing: 0.04em; }
.hero-stat-desc { font-size: 0.82rem; color: var(--t30); margin-top: 6px; line-height: 1.5; }
.hero-main-card { padding: 36px 32px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.hero-main-card h3 { margin-bottom: 10px; font-size: 1.3rem; }
.hero-main-card p { font-size: 0.88rem; margin-bottom: 20px; }
.hero-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero-orbit { position: absolute; top: -40px; right: -40px; width: 300px; height: 300px; border-radius: 50%; border: 1px solid rgba(75,166,37,0.1); animation: orbit-pulse 4s ease-in-out infinite; pointer-events: none; }
.hero-orbit::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgba(75,166,37,0.06); }
@keyframes orbit-pulse { 0%,100%{ transform: scale(1) rotate(0deg); opacity:0.5; } 50%{ transform:scale(1.05) rotate(180deg); opacity:1; } }

/* ── MARQUEE ── */
.marquee-wrap { padding: 20px 0; overflow: hidden; border-top: 1px solid var(--glass-b); border-bottom: 1px solid var(--glass-b); position: relative; }
.marquee-wrap::before, .marquee-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; }
.marquee-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.marquee-wrap::after  { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }
.marquee-track { display: flex; gap: 0; animation: marquee 28s linear infinite; white-space: nowrap; }
.marquee-item { display: inline-flex; align-items: center; gap: 16px; padding: 0 36px; font-family: var(--fd); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t30); flex-shrink: 0; }
.marquee-item svg { width: 14px; height: 14px; fill: var(--orange); opacity: 0.7; }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ── SERVICES BENTO ── */
.bento-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(300px, auto); gap: 10px; }
.bento-wide   { grid-column: span 8; }
.bento-side   { grid-column: span 4; }
.bento-third  { grid-column: span 4; }
.bento-half   { grid-column: span 6; }
.bento-tall   { grid-row: span 2; }

.service-card {
  padding: 2px; border-radius: var(--r-lg);
  background: var(--s0); border: 1px solid var(--glass-b);
  box-shadow: var(--shadow-card);
  cursor: pointer; display: block; position: relative; overflow: hidden;
  transition: border-color 0.5s var(--spring), box-shadow 0.5s var(--spring), transform 0.5s var(--spring);
  text-decoration: none;
}
.service-card::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--r-lg);
  background: radial-gradient(circle at 30% 30%, var(--og-xs) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.5s var(--spring);
}
.service-card:hover { transform: translateY(-4px); border-color: rgba(75,166,37,0.25); box-shadow: var(--shadow-card), var(--glow-orange); }
.service-card:hover::before { opacity: 1; }

.service-card-inner {
  background: var(--glass); border-radius: calc(var(--r-lg) - 2px);
  box-shadow: var(--inner-hi);
  padding: 36px 32px; height: 100%; display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.sc-svg-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  margin-bottom: 28px; position: relative;
}
.sc-svg-bg {
  position: absolute; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, var(--og-xs) 0%, transparent 70%);
  opacity: 0; transition: opacity 0.5s var(--spring);
}
.service-card:hover .sc-svg-bg { opacity: 1; }
.sc-number { position: absolute; top: 28px; right: 28px; font-family: var(--fd); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; color: var(--t15); }
.sc-meta { margin-top: auto; }
.sc-label { display: inline-block; font-family: var(--fd); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange-b); margin-bottom: 10px; }
.sc-title { font-family: var(--fd); font-size: 1.35rem; font-weight: 700; color: var(--t100); margin-bottom: 10px; line-height: 1.2; }
.sc-desc { font-size: 0.85rem; color: var(--t50); line-height: 1.7; margin-bottom: 20px; }
.sc-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fd); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange-b); }
.sc-cta-arrow { width: 28px; height: 28px; border-radius: 50%; background: var(--og-sm); border: 1px solid rgba(75,166,37,0.2); display: flex; align-items: center; justify-content: center; transition: transform 0.35s var(--bounce), background 0.3s; }
.sc-cta-arrow svg { width: 12px; height: 12px; stroke: var(--orange-b); fill: none; stroke-width: 2; }
.service-card:hover .sc-cta-arrow { transform: translate(3px, -2px) scale(1.1); background: var(--og); }

/* Wide card layout variation */
.service-card.is-wide .service-card-inner { flex-direction: row; gap: 48px; align-items: center; padding: 48px; }
.service-card.is-wide .sc-svg-wrap { margin-bottom: 0; flex-shrink: 0; width: 220px; height: 220px; }
.service-card.is-wide .sc-meta { flex: 1; }
.service-card.is-wide .sc-title { font-size: 1.8rem; }

/* ── ANIMATED SVG BASE ── */
.anim-svg { width: 160px; height: 160px; overflow: visible; }
.service-card.is-wide .anim-svg { width: 200px; height: 200px; }

/* ── SVG ANIMATIONS ── */
@keyframes smoke-rise-1 { 0%{transform:translate(0,0) scale(0.5);opacity:0;} 20%{opacity:0.7;} 80%{opacity:0.2;} 100%{transform:translate(-8px,-80px) scale(2);opacity:0;} }
@keyframes smoke-rise-2 { 0%{transform:translate(0,0) scale(0.5);opacity:0;} 20%{opacity:0.6;} 80%{opacity:0.15;} 100%{transform:translate(6px,-70px) scale(1.8);opacity:0;} }
@keyframes smoke-rise-3 { 0%{transform:translate(0,0) scale(0.5);opacity:0;} 20%{opacity:0.5;} 80%{opacity:0.1;} 100%{transform:translate(-4px,-65px) scale(1.6);opacity:0;} }
@keyframes fan-spin { from{transform-origin:100px 100px;transform:rotate(0deg);} to{transform-origin:100px 100px;transform:rotate(360deg);} }
@keyframes fan-spin-fast { from{transform-origin:100px 100px;transform:rotate(0deg);} to{transform-origin:100px 100px;transform:rotate(360deg);} }
@keyframes airflow-dash { from{stroke-dashoffset:100;} to{stroke-dashoffset:0;} }
@keyframes shine-sweep { 0%{transform:translateX(-200%) skewX(-20deg);} 100%{transform:translateX(400%) skewX(-20deg);} }
@keyframes cold-pulse { 0%,100%{transform:scale(1);opacity:0.6;} 50%{transform:scale(1.08);opacity:1;} }
@keyframes snowfall { 0%{transform:translateY(0) rotate(0deg);opacity:0;} 10%{opacity:1;} 90%{opacity:0.5;} 100%{transform:translateY(100px) rotate(360deg);opacity:0;} }
@keyframes particle-left { 0%{transform:translateX(0);opacity:0;} 10%{opacity:1;} 50%{opacity:1;} 80%{opacity:0;transform:translateX(60px);} 100%{opacity:0;} }
@keyframes spark-flash { 0%,100%{opacity:0;} 10%,20%{opacity:1;} 15%{opacity:0.3;} }
@keyframes dial-sweep { 0%{transform:rotate(-120deg);} 60%{transform:rotate(60deg);} 80%{transform:rotate(40deg);} 100%{transform:rotate(50deg);} }
@keyframes bar-fill { 0%,40%{scaleY:0;} 100%{scaleY:1;} }
@keyframes float-y { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
@keyframes glow-pulse { 0%,100%{opacity:0.4;} 50%{opacity:1;} }
@keyframes orbit { from{transform:rotate(0deg) translateX(40px) rotate(0deg);} to{transform:rotate(360deg) translateX(40px) rotate(-360deg);} }
@keyframes count-up { from{transform:translateY(100%);opacity:0;} to{transform:translateY(0);opacity:1;} }

/* Smoke particle classes */
.smoke-p1 { animation: smoke-rise-1 2.8s var(--expo) infinite; animation-delay: 0s; }
.smoke-p2 { animation: smoke-rise-2 2.8s var(--expo) infinite; animation-delay: 0.7s; }
.smoke-p3 { animation: smoke-rise-3 2.8s var(--expo) infinite; animation-delay: 1.4s; }
.smoke-p4 { animation: smoke-rise-1 2.8s var(--expo) infinite; animation-delay: 2.1s; }

/* Fan blade spin */
.fan-blades { animation: fan-spin 1.8s linear infinite; transform-origin: 100px 100px; }
.fan-blades-fast { animation: fan-spin 0.8s linear infinite; transform-origin: 100px 100px; }

/* Airflow */
.airflow-line { stroke-dasharray: 12 8; animation: airflow-dash 1.5s linear infinite; }
.airflow-line:nth-child(2) { animation-delay: -0.5s; }
.airflow-line:nth-child(3) { animation-delay: -1s; }

/* Shine sweep on metallic */
.shine-sweep { animation: shine-sweep 3s var(--expo) infinite; animation-delay: 1s; }

/* Cold pulse */
.cold-snow-1 { animation: snowfall 3s ease-in infinite; animation-delay: 0s; }
.cold-snow-2 { animation: snowfall 3s ease-in infinite; animation-delay: 1s; }
.cold-snow-3 { animation: snowfall 3s ease-in infinite; animation-delay: 2s; }

/* ESP particles */
.esp-particle { animation: particle-left 2.5s ease-in-out infinite; }
.esp-particle:nth-child(2) { animation-delay: 0.5s; }
.esp-particle:nth-child(3) { animation-delay: 1s; }
.esp-particle:nth-child(4) { animation-delay: 1.5s; }
.esp-particle:nth-child(5) { animation-delay: 2s; }
.spark { animation: spark-flash 2s ease-in-out infinite; }
.spark:nth-child(2) { animation-delay: 0.6s; }
.spark:nth-child(3) { animation-delay: 1.2s; }

/* Dial sweep */
.dial-needle { animation: dial-sweep 3s var(--spring) infinite; transform-origin: 80px 110px; }

/* Float */
.float-anim { animation: float-y 4s ease-in-out infinite; }
.float-anim-d1 { animation-delay: 0.5s; }
.float-anim-d2 { animation-delay: 1s; }

/* Glow pulse */
.glow-pulse { animation: glow-pulse 2.5s ease-in-out infinite; }

/* ── WHY SECTION ── */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.why-left-panel { padding: 64px; border-radius: var(--r-lg); display: flex; flex-direction: column; justify-content: space-between; min-height: 540px; position: relative; overflow: hidden; }
.why-left-panel::before { content: ''; position: absolute; bottom: -60px; right: -60px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, var(--og) 0%, transparent 70%); pointer-events: none; }
.why-right-stack { display: flex; flex-direction: column; gap: 10px; }
.why-point { padding: 28px 32px; border-radius: var(--r-md); display: flex; gap: 20px; align-items: flex-start; transition: transform 0.4s var(--spring), border-color 0.4s; }
.why-point:hover { transform: translateX(8px); }
.wp-icon-wrap { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--og-sm); border: 1px solid rgba(75,166,37,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wp-icon-wrap svg { width: 22px; height: 22px; fill: var(--orange); }
.wp-text h4 { color: var(--t100); margin-bottom: 6px; font-size: 0.95rem; }
.wp-text p { font-size: 0.85rem; color: var(--t40); line-height: 1.65; }
.why-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 28px; }
.why-stat { text-align: center; padding: 24px 16px; border-radius: var(--r-sm); background: var(--s1); }
.why-stat-num { font-family: var(--fd); font-size: 2.2rem; font-weight: 800; color: var(--orange); line-height: 1; }
.why-stat-label { font-size: 0.75rem; color: var(--t40); letter-spacing: 0.04em; margin-top: 6px; line-height: 1.4; }

/* ── PROCESS ── */
/* ── PROCESS — premium 4-step luxury ── */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  position: relative;
}
.process-grid::before {
  content: ''; position: absolute;
  top: 86px; left: 12.5%; right: 12.5%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(75,166,37,0.35) 18%,
    rgba(75,166,37,0.4) 50%,
    rgba(75,166,37,0.35) 82%,
    transparent 100%);
  z-index: 0;
  filter: drop-shadow(0 0 8px rgba(75,166,37,0.18));
}
.process-step {
  text-align: center;
  padding: 48px 28px 36px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(75,166,37,0.02) 100%);
  border: 1px solid var(--glass-b);
  box-shadow: var(--inner-hi), 0 12px 40px rgba(0,0,0,0.3);
  position: relative; z-index: 1;
  transition: transform 0.5s var(--bounce), border-color 0.5s, box-shadow 0.5s;
  overflow: hidden;
}
.process-step::before {
  content: ''; position: absolute;
  inset: 0; border-radius: inherit;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(75,166,37,0.07), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
.process-step:hover {
  transform: translateY(-8px);
  border-color: rgba(75,166,37,0.32);
  box-shadow: var(--inner-hi), 0 20px 50px rgba(75,166,37,0.18), 0 0 0 1px rgba(75,166,37,0.18);
}
.process-step:hover::before { opacity: 1; }

/* Step ring — refined dual-tone with icon under number */
.step-ring {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, rgba(75,166,37,0.18), rgba(0,0,0,0.4) 70%);
  border: 1px solid rgba(75,166,37,0.35);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  margin: 0 auto 22px;
  position: relative;
  transition: transform 0.6s var(--bounce), background 0.5s, border-color 0.5s, box-shadow 0.5s;
  box-shadow:
    0 4px 18px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(160,220,130,0.25);
}
.step-ring::before {
  content: ''; position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1px dashed rgba(75,166,37,0.32);
}
.step-ring::after {
  content: ''; position: absolute; inset: -12px;
  border-radius: 50%;
  border: 1px solid rgba(75,166,37,0.10);
  transition: opacity 0.4s, transform 0.4s;
}
.step-num {
  font-family: var(--fd);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #5ec033 0%, var(--orange) 60%, #2d6b16 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.step-icon {
  width: 14px; height: 14px;
  color: rgba(75,166,37,0.7);
  margin-top: 4px;
  transition: color 0.4s, transform 0.4s var(--bounce);
}
.process-step:hover .step-ring {
  transform: scale(1.08);
  border-color: rgba(75,166,37,0.55);
  box-shadow:
    0 8px 28px rgba(75,166,37,0.4),
    inset 0 1px 0 rgba(94,192,51,0.4);
}
.process-step:hover .step-icon { color: var(--orange-c); transform: scale(1.15); }

/* Eyebrow caption above title */
.step-label {
  display: inline-block;
  font-family: var(--fd);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange-b);
  margin-bottom: 10px;
}
.process-step h4 {
  font-family: var(--fd);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--t100);
  margin-bottom: 12px;
  letter-spacing: -0.015em;
  text-transform: none;
}
.process-step p {
  font-size: 0.86rem;
  color: var(--t60);
  line-height: 1.65;
  margin-bottom: 18px;
}
.step-meta {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid rgba(75,166,37,0.22);
  border-radius: 100px;
  background: rgba(75,166,37,0.05);
  font-family: var(--fd);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(160,220,130,0.75);
}

/* ── CTA BANNER ── */
.cta-section { position: relative; overflow: hidden; border-radius: var(--r-xl); margin: 0 clamp(20px, 5vw, 64px); padding: clamp(60px, 8vw, 100px) clamp(40px, 6vw, 80px); background: linear-gradient(135deg, #1A0800 0%, #0D0500 50%, #180800 100%); border: 1px solid rgba(75,166,37,0.2); }
.cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 100% at 50% -20%, rgba(75,166,37,0.12) 0%, transparent 60%), radial-gradient(ellipse 60% 60% at 80% 100%, rgba(75,166,37,0.08) 0%, transparent 50%); }
.cta-section-inner { position: relative; z-index: 1; text-align: center; }
.cta-section h2 { margin-bottom: 16px; }
.cta-section > .cta-section-inner > p { max-width: 560px; margin: 0 auto 40px; font-size: 1rem; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ── TESTIMONIALS ── */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.testi-card { padding: 36px 32px; border-radius: var(--r-lg); transition: transform 0.4s var(--spring), border-color 0.4s; }
.testi-card:hover { transform: translateY(-6px); }
.testi-stars { display: flex; gap: 3px; margin-bottom: 18px; }
.testi-stars svg { width: 14px; height: 14px; fill: var(--orange); }
.testi-quote { font-weight: 400; color: var(--t70); font-size: 0.95rem; line-height: 1.75; margin-bottom: 24px; position: relative; padding-top: 20px; letter-spacing: -0.005em; }
.testi-quote::before { content: '"'; font-family: Georgia, serif; font-size: 4rem; color: var(--orange); opacity: 0.2; position: absolute; top: -12px; left: -4px; line-height: 1; }
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--og-sm); border: 1px solid rgba(75,166,37,0.2); display: flex; align-items: center; justify-content: center; font-family: var(--fd); font-size: 0.85rem; font-weight: 700; color: var(--orange-b); flex-shrink: 0; }
.testi-info strong { display: block; font-size: 0.88rem; color: var(--t100); font-weight: 600; }
.testi-info span { font-size: 0.78rem; color: var(--t40); }

/* ── AREA MAP SECTION ── */
.area-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
.area-left { padding: 60px; border-radius: var(--r-lg); display: flex; flex-direction: column; }
.area-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.area-chip { display: flex; align-items: center; gap: 7px; background: var(--s1); border: 1px solid var(--glass-b); border-radius: 100px; padding: 7px 14px; font-size: 0.8rem; color: var(--t50); font-weight: 500; }
.area-chip svg { width: 12px; height: 12px; fill: var(--orange); }
.area-right { border-radius: var(--r-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px; gap: 16px; min-height: 400px; }

/* ── PAGE HERO ── */
.page-hero { padding: calc(140px + clamp(40px, 6vw, 80px)) 0 clamp(60px, 8vw, 100px); position: relative; overflow: hidden; text-align: center; }
.page-hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(75,166,37,0.07) 0%, transparent 70%), var(--bg); }
.page-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, black 0%, transparent 80%); }
.page-hero-line { position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(75,166,37,0.4), transparent); }
.page-hero-content { position: relative; z-index: 2; }
.breadcrumb { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; }
.breadcrumb a { font-size: 0.8rem; color: var(--t30); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--orange-b); }
.breadcrumb span { font-size: 0.8rem; color: var(--t20); }
.breadcrumb .sep { color: rgba(75,166,37,0.4); }

/* ── SERVICES PAGE DETAIL ── */
.services-detail-item { padding: clamp(60px, 8vw, 100px) 0; border-bottom: 1px solid var(--glass-b); }
.services-detail-item:last-child { border-bottom: none; }
.sd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.sd-grid.reverse { direction: rtl; }
.sd-grid.reverse > * { direction: ltr; }
.sd-visual { border-radius: var(--r-lg); aspect-ratio: 1.2/1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.sd-visual::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, var(--og-sm) 0%, transparent 70%); }
.sd-svg-wrap { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 40px; }
.sd-svg-wrap svg { width: 100%; max-width: 280px; height: auto; }
.sd-badge { position: absolute; top: 24px; left: 24px; font-family: var(--fd); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; background: var(--og); border: 1px solid rgba(75,166,37,0.3); color: var(--orange-b); padding: 5px 12px; border-radius: 100px; }
.sd-content .eyebrow { margin-bottom: 16px; }
.sd-content h2 { margin-bottom: 16px; font-size: clamp(1.6rem, 3vw, 2.5rem); }
.sd-divider { width: 48px; height: 2px; background: linear-gradient(90deg, var(--orange), transparent); margin-bottom: 24px; border-radius: 2px; }
.sd-content > p { margin-bottom: 28px; font-size: 0.95rem; }
.sd-features { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.sd-feature { display: flex; align-items: flex-start; gap: 12px; }
.sd-check { width: 20px; height: 20px; border-radius: 50%; background: var(--og-sm); border: 1px solid rgba(75,166,37,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.sd-check svg { width: 10px; height: 10px; fill: var(--orange); }
.sd-feature span { font-size: 0.88rem; color: var(--t60); line-height: 1.6; }
.sd-applications { background: var(--s1); border: 1px solid var(--glass-b); border-radius: var(--r-sm); padding: 18px 22px; margin-bottom: 28px; }
.sd-applications strong { font-family: var(--fd); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-b); display: block; margin-bottom: 6px; }
.sd-applications p { font-size: 0.85rem; color: var(--t40); line-height: 1.65; }
.services-intro { padding: 64px; border-radius: var(--r-xl); display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; background: linear-gradient(135deg, rgba(75,166,37,0.06) 0%, transparent 60%); border: 1px solid rgba(75,166,37,0.1); margin-bottom: clamp(40px, 6vw, 80px); }
.services-intro h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); flex: 1; min-width: min(240px, 100%); }
.services-intro p { color: var(--t50); font-size: 0.95rem; flex: 1.5; min-width: min(240px, 100%); }

/* ── ABOUT PAGE ── */
.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.about-visual { border-radius: var(--r-xl); aspect-ratio: 3/4; position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.about-vis-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #100800 0%, #0a0508 100%); }
.about-vis-pattern { position: absolute; inset: 0; background-image: linear-gradient(rgba(75,166,37,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(75,166,37,0.06) 1px, transparent 1px); background-size: 32px 32px; }
.about-vis-badge { position: relative; z-index: 2; padding: 28px; width: 100%; background: linear-gradient(0deg, rgba(5,5,7,0.95) 0%, transparent 100%); }
.about-vis-badge h3 { font-size: 1.4rem; margin-bottom: 6px; color: var(--t100); }
.about-vis-badge p { font-size: 0.85rem; color: var(--t50); }
.about-vis-icon { position: absolute; top: 48px; left: 48px; width: 80px; height: 80px; background: var(--og); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; border: 1px solid rgba(75,166,37,0.3); z-index: 2; }
.about-vis-icon svg { width: 40px; height: 40px; fill: var(--orange-b); }
.about-content .eyebrow { margin-bottom: 20px; }
.about-content h2 { margin-bottom: 20px; }
.about-content p { margin-bottom: 18px; }
.about-content .btn { margin-top: 8px; }
.accred-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.accred-pill { display: flex; align-items: center; gap: 10px; background: var(--s1); border: 1px solid var(--glass-b); border-radius: 100px; padding: 12px 24px; transition: border-color 0.3s, transform 0.3s var(--bounce); }
.accred-pill:hover { border-color: rgba(75,166,37,0.3); transform: translateY(-3px); }
.accred-pill svg { width: 20px; height: 20px; fill: var(--orange); }
.accred-pill span { font-family: var(--fd); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; color: var(--t70); text-transform: uppercase; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.value-card { padding: 36px 28px; border-radius: var(--r-lg); position: relative; overflow: hidden; }
.value-card::before { content: ''; position: absolute; top: 0; left: 28px; right: 28px; height: 2px; background: linear-gradient(90deg, var(--orange), transparent); border-radius: 0 0 2px 2px; }
.value-card h4 { font-family: var(--fd); font-size: 1rem; color: var(--t100); margin-bottom: 12px; letter-spacing: 0; }
.value-card p { font-size: 0.85rem; color: var(--t40); }
.clients-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.client-card { padding: 32px 24px; border-radius: var(--r-md); text-align: center; transition: transform 0.4s var(--bounce), border-color 0.4s; }
.client-card:hover { transform: translateY(-6px); }
.client-icon { width: 52px; height: 52px; border-radius: var(--r-sm); background: var(--og-sm); border: 1px solid rgba(75,166,37,0.15); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.client-icon svg { width: 26px; height: 26px; fill: var(--orange); }
.client-card h4 { font-family: var(--fd); font-size: 0.95rem; color: var(--t100); margin-bottom: 8px; letter-spacing: 0; }
.client-card p { font-size: 0.82rem; color: var(--t40); }

/* ── GALLERY — filter pills + stats strip (was inline in gallery.html) ── */
.gallery-filter-row {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-bottom: 56px;
}
.filter-btn {
  font-family: var(--fd);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 22px;
  border: 1px solid var(--glass-b);
  background: var(--glass);
  color: var(--t60);
  cursor: pointer;
  transition: border-color 0.3s var(--spring), color 0.3s, background 0.3s, transform 0.3s var(--bounce);
  border-radius: 100px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.filter-btn:hover {
  border-color: rgba(75,166,37,0.4);
  color: var(--orange-c);
  transform: translateY(-2px);
}
.filter-btn.active {
  background: linear-gradient(135deg, rgba(75,166,37,0.18) 0%, rgba(75,166,37,0.08) 100%);
  border-color: rgba(75,166,37,0.45);
  color: var(--orange-c);
  box-shadow: 0 4px 16px rgba(75,166,37,0.18), inset 0 1px 0 rgba(160,220,130,0.22);
}
.gallery-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 80px;
}
.gss-card {
  padding: 32px 24px;
  border-radius: var(--r-md);
  text-align: center;
}
.gss-num {
  font-family: var(--fd);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 800;
  color: var(--orange-b);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.025em;
  text-align: center;
}
.gss-label {
  font-size: 0.82rem;
  color: var(--t60);
  letter-spacing: 0.04em;
  text-align: center;
}
@media (max-width: 900px) {
  .gallery-stats-strip { grid-template-columns: repeat(2, 1fr); }
  .gss-card { padding: 26px 18px; }
}
@media (max-width: 480px) {
  .gallery-filter-row { gap: 6px; }
  .filter-btn { padding: 8px 14px; font-size: 0.66rem; letter-spacing: 0.10em; }
  .gss-num { font-size: 1.5rem; }
}

/* ── GALLERY MASONRY ── */
.gallery-masonry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gallery-ph { border-radius: var(--r-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; aspect-ratio: 1; background: var(--glass); border: 1px solid var(--glass-b); box-shadow: var(--inner-hi); transition: border-color 0.4s, transform 0.4s var(--spring); cursor: pointer; position: relative; overflow: hidden; }
.gallery-ph::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(75,166,37,0.06) 0%, transparent 60%); opacity: 0.5; transition: opacity 0.4s; pointer-events: none; }
.gallery-ph:hover { border-color: rgba(75,166,37,0.35); transform: scale(1.02); }
.gallery-ph:hover::before { opacity: 1; }
.gallery-ph:nth-child(1), .gallery-ph:nth-child(5) { aspect-ratio: auto; grid-column: span 2; }
.gallery-ph svg {
  width: 64px; height: 64px;
  filter: drop-shadow(0 0 16px rgba(75,166,37,0.35));
  transition: transform 0.5s var(--bounce), filter 0.4s;
}
.gallery-ph:hover svg { transform: scale(1.1); filter: drop-shadow(0 0 24px rgba(75,166,37,0.6)); }
.gallery-ph span:not(.ph-tag) {
  font-size: 0.78rem;
  color: var(--t70);
  font-family: var(--fd);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 12px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  line-height: 1.4;
}
.gallery-ph .ph-tag {
  position: absolute; top: 16px; left: 16px;
  background: linear-gradient(135deg, rgba(75,166,37,0.25) 0%, rgba(75,166,37,0.12) 100%);
  border: 1px solid rgba(75,166,37,0.4);
  color: var(--orange-c);
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-family: var(--fd);
  text-transform: uppercase;
  box-shadow: 0 2px 12px rgba(75,166,37,0.2);
  z-index: 2;
}
.gallery-cta { border-radius: var(--r-xl); padding: 64px; text-align: center; margin-top: 10px; border: 1px dashed rgba(75,166,37,0.2); }
.gallery-cta svg { width: 52px; height: 52px; fill: rgba(75,166,37,0.3); margin-bottom: 20px; }
.gallery-cta h3 { margin-bottom: 12px; font-size: 1.6rem; }
.gallery-cta p { max-width: 480px; margin: 0 auto 32px; font-size: 0.95rem; }

/* ── CONTACT PAGE ── */
.contact-split { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; align-items: start; }
.contact-sidebar { padding: 52px 44px; border-radius: var(--r-xl); }
.contact-sidebar .eyebrow { margin-bottom: 20px; }
.contact-sidebar h2 { margin-bottom: 16px; }
.contact-sidebar > p { font-size: 0.9rem; margin-bottom: 36px; }
.contact-detail-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 32px; }
.contact-detail { display: flex; gap: 14px; align-items: flex-start; }
.cd-icon { width: 42px; height: 42px; border-radius: var(--r-sm); background: var(--og-sm); border: 1px solid rgba(75,166,37,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cd-icon svg { width: 18px; height: 18px; fill: var(--orange); }
.cd-text strong { display: block; font-family: var(--fd); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-b); margin-bottom: 4px; }
.cd-text a, .cd-text span { font-size: 0.9rem; color: var(--t60); }
.cd-text a:hover { color: var(--orange-b); }
.wa-block { display: flex; align-items: center; gap: 16px; background: rgba(37,211,102,0.08); border: 1px solid rgba(37,211,102,0.2); border-radius: var(--r-md); padding: 20px 24px; cursor: pointer; transition: background 0.3s, transform 0.3s var(--bounce); text-decoration: none; }
.wa-block:hover { background: rgba(37,211,102,0.14); transform: translateY(-3px); }
.wa-logo { width: 44px; height: 44px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wa-logo svg { width: 24px; height: 24px; fill: white; }
.wa-text strong { display: block; font-family: var(--fd); font-size: 0.9rem; letter-spacing: 0.04em; color: #4ade80; text-transform: uppercase; margin-bottom: 3px; }
.wa-text span { font-size: 0.82rem; color: rgba(74,222,128,0.6); }
.contact-form-box { padding: 52px 44px; border-radius: var(--r-xl); }
.contact-form-box h3 { font-size: 1.6rem; margin-bottom: 8px; }
.contact-form-box > p { font-size: 0.88rem; color: var(--t40); margin-bottom: 36px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group.full { grid-column: 1/-1; }
.form-group label { font-family: var(--fd); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t40); }
.form-group input, .form-group select, .form-group textarea {
  background: var(--s1); border: 1px solid var(--glass-b);
  color: var(--t100); font-family: var(--fb); font-size: 0.9rem;
  padding: 14px 18px; border-radius: var(--r-sm);
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
  outline: none; width: 100%;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--t20); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: rgba(75,166,37,0.4); background: var(--s2); box-shadow: 0 0 0 3px rgba(75,166,37,0.08); }
.form-group select { cursor: pointer; }
.form-group select option { background: #111; color: var(--t100); }
.form-group textarea { min-height: 140px; resize: vertical; }
.form-note { font-size: 0.78rem; color: var(--t30); line-height: 1.6; }
.form-divider { display: flex; align-items: center; gap: 14px; margin: 24px 0 20px; }
.form-divider span { font-family: var(--fd); font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t20); white-space: nowrap; }
.form-divider::before, .form-divider::after { content: ''; flex: 1; height: 1px; background: var(--glass-b); }
.success-msg { display: none; background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.2); border-radius: var(--r-sm); padding: 16px 20px; color: #4ade80; font-size: 0.9rem; margin-top: 16px; gap: 10px; align-items: center; }
.success-msg.show { display: flex; }
.error-msg { display: none; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); border-radius: var(--r-sm); padding: 16px 20px; color: #ef4444; font-size: 0.9rem; margin-top: 16px; }
.error-msg.show { display: block; }
.success-msg svg { width: 18px; height: 18px; fill: #4ade80; flex-shrink: 0; }
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.faq-item { padding: 28px 32px; border-radius: var(--r-md); }
.faq-item h4 { font-family: var(--fd); font-size: 0.95rem; color: var(--t100); margin-bottom: 10px; position: relative; padding-top: 4px; letter-spacing: 0; }
.faq-item h4::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--orange) 0%, transparent 60%); top: -20px; }
.faq-item p { font-size: 0.85rem; color: var(--t40); }

/* ── FOOTER ── */
.footer { padding: 80px 0 0; border-top: 1px solid var(--glass-b); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 64px; padding-bottom: 64px; border-bottom: 1px solid var(--glass-b); }
.footer-brand p { font-size: 0.875rem; color: var(--t40); line-height: 1.8; max-width: 280px; margin-top: 20px; margin-bottom: 24px; }
.footer-social { display: flex; gap: 8px; }
.social-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--s1); border: 1px solid var(--glass-b); display: flex; align-items: center; justify-content: center; transition: background 0.3s, border-color 0.3s, transform 0.3s var(--bounce); }
.social-btn:hover { background: var(--og); border-color: rgba(75,166,37,0.3); transform: translateY(-3px); }
.social-btn svg { width: 16px; height: 16px; fill: var(--t50); }
.social-btn:hover svg { fill: var(--orange-b); }
.footer-col h5 { font-family: var(--fd); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--t40); margin-bottom: 20px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a { font-size: 0.875rem; color: var(--t40); transition: color 0.25s, transform 0.25s; display: inline-block; }
.footer-col ul a:hover { color: var(--orange-b); transform: translateX(4px); }
.footer-contact-item { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
.footer-contact-item svg { width: 14px; height: 14px; fill: var(--orange); flex-shrink: 0; margin-top: 3px; }
.footer-contact-item a, .footer-contact-item span { font-size: 0.85rem; color: var(--t40); line-height: 1.6; }
.footer-contact-item a:hover { color: var(--orange-b); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 24px 0; }
.footer-bottom p { font-size: 0.78rem; color: var(--t25); }
.footer-bottom a { color: var(--orange-b); }

/* ── WHATSAPP FLOAT ── */
.wa-float {
  position: fixed; bottom: 28px; right: 28px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 24px rgba(37,211,102,0.4);
  cursor: pointer; transition: transform 0.4s var(--bounce), box-shadow 0.4s;
}
.wa-float:hover { transform: scale(1.12); box-shadow: 0 8px 36px rgba(37,211,102,0.55); }
.wa-float svg { width: 30px; height: 30px; fill: white; }
.wa-float::before {
  content: 'Chat on WhatsApp';
  position: absolute; right: 68px;
  background: rgba(5,5,7,0.9); backdrop-filter: blur(12px);
  color: white; font-size: 0.78rem; padding: 6px 14px;
  border-radius: 100px; white-space: nowrap; font-family: var(--fd);
  font-weight: 600; letter-spacing: 0.06em; border: 1px solid var(--glass-b);
  opacity: 0; pointer-events: none; transform: translateX(8px);
  transition: opacity 0.3s, transform 0.3s var(--spring);
}
.wa-float:hover::before { opacity: 1; transform: translateX(0); }

/* ── SCROLL REVEALS ── */
.reveal { opacity: 0; transform: translateY(28px); filter: blur(4px); transition: opacity 0.8s var(--expo), transform 0.8s var(--expo), filter 0.8s var(--expo); }
.reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0); }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.18s; }
.reveal-d3 { transition-delay: 0.26s; }
.reveal-d4 { transition-delay: 0.34s; }
.reveal-d5 { transition-delay: 0.42s; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — TABLET & MOBILE
   ═══════════════════════════════════════════════════════════ */

/* TABLET (1024px and below) */
@media (max-width: 1024px) {
  .hero-content { grid-template-columns: 1fr; gap: 36px; }
  .hero-right { display: block; max-width: 520px; margin: 0 auto; }
  .hero-left { text-align: center; }
  .hero-eyebrow, .hero-actions, .hero-badges { justify-content: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .bento-wide, .bento-side, .bento-third, .bento-half { grid-column: span 6; }
  .service-card.is-wide .service-card-inner { flex-direction: column; }
  .service-card.is-wide .sc-svg-wrap { width: 160px; height: 160px; }
  .why-grid, .area-grid { grid-template-columns: 1fr; }
  .about-split, .contact-split { grid-template-columns: 1fr; }
  .sd-grid, .sd-grid.reverse { grid-template-columns: 1fr; direction: ltr; }
  .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .clients-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid::before { display: none; }
  .gallery-stats-strip { grid-template-columns: repeat(2, 1fr); }
}

/* MOBILE / SMALL-TABLET (768px and below) — main mobile layout */
@media (max-width: 768px) {
  /* Container & section padding */
  .container { padding: 0 18px; }
  .section { padding: clamp(56px, 10vw, 80px) 0; }

  /* Nav: hamburger replaces inline links */
  .nav { padding: 6px 6px 6px 18px; max-width: 100%; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .nav-cta { padding: 8px 14px !important; font-size: 0.78rem !important; }
  .nav-cta .btn-icon { width: 26px; height: 26px; }

  /* Logo: smaller on mobile */
  .brand-logo { width: 56px; height: 56px; background-size: 94px auto; background-position: -19px -23px; border-radius: 12px; }
  .brand-logo--lg { width: 84px; height: 84px; background-size: 140px auto; background-position: -28px -33px; }

  /* Hero — compact mobile layout */
  .hero { min-height: auto; padding: 100px 0 48px; }
  .hero-headline { font-size: clamp(1.85rem, 8vw, 2.6rem); margin-bottom: 18px; line-height: 1.25; }
  .hero-headline span { margin-bottom: 6px; }
  .hero-sub { font-size: 0.92rem; max-width: 100%; margin-bottom: 28px; }
  .hero-actions { gap: 12px; margin-bottom: 28px; }
  .hero-badges { gap: 8px; justify-content: center; }
  .hero-image-card .glass-core { aspect-ratio: 5/4; }
  .hero-image-card > .glass-shell { width: 200px; bottom: -20px; right: 12px; }

  /* Page-hero — compact */
  .page-hero { padding: 140px 0 56px; }
  .page-hero-content > h1 { font-size: clamp(2rem, 8vw, 2.8rem) !important; }

  /* Bento and content grids collapse */
  .bento-wide, .bento-side, .bento-third, .bento-half { grid-column: span 12; }
  .testi-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; padding-bottom: 40px; }
  .values-grid { grid-template-columns: 1fr; }
  .clients-grid { grid-template-columns: 1fr 1fr; }
  .gallery-masonry { grid-template-columns: repeat(2, 1fr); }
  .gallery-ph:nth-child(1), .gallery-ph:nth-child(5) { grid-column: span 1; aspect-ratio: 1; }
  .faq-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .gallery-stats-strip { grid-template-columns: repeat(2, 1fr); }
  .why-stats-row { grid-template-columns: repeat(3, 1fr); }
  .process-grid { grid-template-columns: 1fr; }

  /* Section heading sizes */
  h2 { font-size: clamp(1.6rem, 6.5vw, 2.4rem); }
  h3 { font-size: clamp(1.2rem, 4vw, 1.5rem); }

  /* Cards — tighter padding */
  .glass-core, .why-point, .testi-card, .process-step,
  .value-card, .client-card, .gallery-cta, .faq-item {
    padding: 24px 22px;
  }
  .why-left-panel { padding: 36px 28px; min-height: auto; }
  .contact-sidebar, .contact-form-box { padding: 32px 24px; }
  .services-detail-item { padding: 56px 0; }
  .services-intro { padding: 32px 24px; flex-direction: column; text-align: center; gap: 16px; }
  .area-left, .area-right { padding: 36px 28px; min-height: auto; }

  /* CTA section breathing room on small screens */
  .cta-section { margin: 0; padding: 56px 24px; border-radius: var(--r-lg); }
  .cta-section h2 { font-size: clamp(1.7rem, 7vw, 2.4rem); }

  /* Buttons stack and center */
  .hero-actions { flex-direction: column; align-items: center; gap: 12px; }
  .hero-actions .btn { justify-content: center; width: auto; min-width: min(220px, 100%); }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { justify-content: center; width: 100%; }

  /* Tighten reveal motion on small screens to feel snappier */
  .reveal { transform: translateY(16px); }

  /* Hide WhatsApp tooltip on mobile (icon alone is enough) */
  .wa-float::before { display: none; }
  .wa-float { width: 50px; height: 50px; bottom: 18px; right: 18px; }
  .wa-float svg { width: 24px; height: 24px; }

  /* Page hero breadcrumb wraps */
  .breadcrumb { flex-wrap: wrap; }

  /* Service-card */
  .service-card-inner { padding: 28px 24px; }
  .sc-svg-wrap { width: 100px; height: 100px; }

  /* Sidebar of contact page becomes full width */
  .contact-split { gap: 14px; }

  /* Footer social */
  .footer-social { justify-content: flex-start; }

  /* Gallery filter row — tight chips */
  .gallery-filter-row { gap: 6px; }
  .filter-btn { padding: 7px 14px; font-size: 0.66rem; }

  /* Eyebrow padding tighter */
  .eyebrow { padding: 5px 11px 5px 9px; font-size: 9.5px; letter-spacing: 0.18em; }

  /* Stat cards in hero — smaller */
  .hero-stat-num { font-size: 1.6rem !important; }
  .hero-stat-label { font-size: 0.66rem; }

  /* About stats strip — 2x2 grid on mobile */
  .about-split { grid-template-columns: 1fr; }
  .about-stats-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .sd-content p, .sd-features span, .sd-applications p { font-size: 0.88rem; }
}

/* SMALL MOBILE (480px and below) — tightest layout */
@media (max-width: 480px) {
  .container { padding: 0 14px; }
  .section { padding: 48px 0; }

  /* Nav reflow */
  .nav-cta span { display: none; } /* show only the icon */
  .nav-cta { padding: 8px !important; }
  .nav-cta .btn-icon { margin-left: 0; }
  .brand-logo { width: 48px; height: 48px; background-size: 80px auto; background-position: -16px -19px; border-radius: 10px; }

  /* Hero — single column, ultra-compact */
  .hero { padding: 200px 0 40px; }
  .hero-headline { font-size: clamp(1.6rem, 9vw, 2.2rem); line-height: 1.25; margin-bottom: 16px; }
  .hero-headline span { margin-bottom: 6px; }
  .hero-headline span:last-child { font-size: 0.45em !important; }
  .hero-sub { font-size: 0.88rem; line-height: 1.6; margin-bottom: 24px; }
  .hero-eyebrow { margin-bottom: 12px; }
  .hero-actions { margin-bottom: 24px; }
  .hero-image-card .glass-core { aspect-ratio: 4/3; }
  .hero-image-card > .glass-shell { width: 170px; bottom: -16px; right: 8px; }
  .hero-image-card > .glass-shell .glass-core { padding: 14px 18px !important; gap: 12px !important; }
  .hero-image-card > .glass-shell .hero-stat-num { font-size: 1.4rem !important; }

  /* Page hero — tight */
  .page-hero { padding: 130px 0 48px; }
  .page-hero-content > h1 { font-size: clamp(1.8rem, 9vw, 2.4rem) !important; }
  .page-hero-content > p { font-size: 0.9rem; }

  /* Stats grids collapse */
  .why-stats-row { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .why-stat { padding: 16px 8px; }
  .why-stat-num { font-size: 1.4rem; }
  .why-stat-label { font-size: 0.62rem; }
  .gallery-stats-strip { grid-template-columns: 1fr 1fr; }
  .gss-num { font-size: 1.5rem; }
  .clients-grid { grid-template-columns: 1fr; }

  /* Gallery masonry to 1 col on tiny screens */
  .gallery-masonry { grid-template-columns: 1fr; }
  .gallery-ph { aspect-ratio: 4/3; }
  .gallery-ph:nth-child(1), .gallery-ph:nth-child(5) { aspect-ratio: 4/3; }

  /* Forms */
  .contact-form-box, .contact-sidebar { padding: 28px 20px; }
  .form-group input, .form-group select, .form-group textarea { padding: 12px 14px; font-size: 0.88rem; }
  .form-submit-row { flex-direction: column; align-items: stretch; }
  .form-submit-row .btn { width: 100%; justify-content: center; }

  /* CTA */
  .cta-section { padding: 44px 20px; }
  .cta-section h2 { font-size: clamp(1.5rem, 8vw, 2rem); }
  .cta-section > .cta-section-inner > p { font-size: 0.9rem; }

  /* Hero badges single column */
  .hero-badges { flex-direction: column; align-items: center; width: 100%; }
  .hero-badge { width: fit-content; }

  /* Buttons */
  .btn { padding: 12px 18px 12px 22px; font-size: 0.85rem; }
  .btn-icon { width: 28px; height: 28px; }

  /* Service detail items stack tighter */
  .services-detail-item { padding: 40px 0; }
  .sd-grid, .sd-grid.reverse { gap: 28px; }
  .sd-content h2 { font-size: clamp(1.4rem, 6vw, 1.8rem); }
  .sd-applications { padding: 14px 16px; }
  .sd-features { gap: 8px; }

  /* About visual collapses */
  .about-visual { aspect-ratio: 4/5; }
  .about-vis-icon { width: 54px; height: 54px; top: 24px; left: 24px; }
  .about-vis-icon svg { width: 26px; height: 26px; }
  .about-vis-badge { padding: 18px; }
  .about-vis-badge h3 { font-size: 1.1rem !important; }
  .about-vis-badge p { font-size: 0.78rem !important; }

  /* Process steps */
  .process-step { padding: 28px 18px; }
  .step-ring { width: 52px; height: 52px; font-size: 1rem; }

  /* Testimonials */
  .testi-card { padding: 26px 22px; }
  .testi-quote { font-size: 0.86rem; }
  .testi-quote::before { font-size: 3rem; top: -8px; }

  /* Accreditations stack */
  .accred-row { gap: 8px; }
  .accred-pill { padding: 9px 18px; font-size: 0.72rem; }

  /* Footer */
  .footer { padding: 56px 0 0; }
  .footer-grid { gap: 28px; padding-bottom: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 10px; padding: 18px 0; }

  /* Mobile menu overlay */
  .mobile-overlay a { font-size: 1.1rem !important; padding: 8px 0; }

  /* Gallery filter — 2 rows */
  .gallery-filter-row { flex-wrap: wrap; }

  /* Section headers */
  .section-header { margin-bottom: 32px; }

  /* Reduce ambient orb sizes that could overflow viewport */
  .hero-content::before, .hero-content::after { width: 240px; height: 240px; filter: blur(28px); }
  .page-hero-content::before { width: 360px; height: 360px; margin-left: -180px; }

  /* Prevent ANY horizontal overflow on small screens */
  .container, .hero-content, .sd-content, .cta-section-inner,
  .services-intro, .contact-sidebar, .contact-form-box,
  .about-content, .footer-grid, .page-hero-content { max-width: 100vw; }
  .btn { white-space: normal; text-align: center; }
  .cta-actions .btn, .hero-actions .btn { min-width: 0; width: 100%; }
  .services-intro { gap: 12px; }
  .services-intro h2, .services-intro p { min-width: 0 !important; }
  .about-stats-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .sd-applications { word-break: break-word; }
  .wa-block { flex-direction: column; text-align: center; }
}

/* EXTRA-SMALL (360px and below — older phones, narrow split) */
@media (max-width: 360px) {
  .container { padding: 0 10px; }
  .hero-content { padding-left: 10px !important; padding-right: 10px !important; }
  .hero-headline { font-size: 1.5rem; }
  .page-hero-content > h1 { font-size: 1.7rem !important; }
  .brand-logo { width: 44px; height: 44px; background-size: 73px auto; background-position: -15px -18px; }
  .accred-row { flex-direction: column; align-items: stretch; }
  .accred-pill { justify-content: center; }
  .btn { padding: 10px 16px 10px 18px; font-size: 0.82rem; }
  .cta-section { padding: 36px 14px; }
  h2 { font-size: clamp(1.3rem, 6vw, 1.8rem); }
  .sd-content h2 { font-size: clamp(1.2rem, 5.5vw, 1.6rem); }
  .glass-core, .why-point, .testi-card, .process-step,
  .value-card, .client-card, .faq-item { padding: 20px 16px; }
  .contact-sidebar, .contact-form-box { padding: 24px 14px; }
  .about-stats-strip { grid-template-columns: 1fr 1fr !important; gap: 2px; }
  .about-stats-strip .glass-core { padding: 24px 12px !important; }
  .about-stats-strip [style*="font-size:2.5rem"] { font-size: 1.8rem !important; }
}

/* MOBILE LANDSCAPE — short height adjustments */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: auto; padding: 80px 0 40px; }
  .page-hero { padding: 120px 0 40px; }
  .mobile-overlay { padding: 16px; gap: 4px; }
  .mobile-overlay a { font-size: 1rem !important; padding: 6px 0; }
}

/* TOUCH-DEVICE polish — disable hover-magic that doesn't translate to touch,
   make tap targets generous, prevent accidental zoom on form focus */
@media (hover: none) and (pointer: coarse) {
  /* Replace hover lifts with tap feedback on key interactives */
  .btn:hover, .nav-cta:hover, .filter-btn:hover,
  .glass-shell:hover, .testi-card:hover, .why-point:hover,
  .process-step:hover, .accred-pill:hover, .client-card:hover,
  .gallery-ph:hover, .hero-badge:hover, .nav-logo:hover .brand-logo,
  .footer-col ul a:hover, .social-btn:hover {
    transform: none;
  }
  /* Tap feedback */
  .btn:active, .nav-cta:active, .filter-btn:active,
  .gallery-ph:active, .hero-badge:active { transform: scale(0.97); }

  /* Pause continuous icon animations slightly on touch to save battery */
  .hero-image-card .glass-core img { animation-duration: 26s; }

  /* Prevent iOS zooming when tapping inputs (fonts must be ≥16px) */
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 16px; }

  /* Larger tap targets for nav/footer links */
  .footer-col ul a,
  .mobile-overlay a,
  .breadcrumb a { padding: 6px 0; min-height: 44px; display: inline-flex; align-items: center; }

  /* Hide WhatsApp tooltip permanently on touch */
  .wa-float::before { display: none !important; }
}

/* Ensure images and videos never overflow their containers on small screens */
img, video, svg { max-width: 100%; height: auto; }
.hero-image-card .glass-core img { height: 100%; width: 100%; }
.about-visual img,
.gallery-ph img,
.services-detail-item img { height: 100%; width: 100%; }

/* Safe-area padding for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
  .wa-float { bottom: max(18px, env(safe-area-inset-bottom)); right: max(18px, env(safe-area-inset-right)); }
  .nav-wrap { padding-top: max(20px, env(safe-area-inset-top)); }
}

/* ═══════════════════════════════════════════════════════════
   SMOOTHNESS & PERFORMANCE — desktop + mobile fluid polish
   ═══════════════════════════════════════════════════════════ */

/* GPU-accelerate the most-animated elements (no layout thrash) */
.glass-shell,
.hero-image-card,
.brand-logo,
.btn,
.nav,
.process-step,
.testi-card,
.why-point,
.service-card,
.gallery-ph,
.hero-badge,
.eyebrow,
.reveal {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Smooth scroll on anchor jumps with offset for floating nav */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent overscroll glow / pull-to-refresh from breaking sticky nav illusion */
body {
  overscroll-behavior-y: none;
  scroll-behavior: smooth;
}

/* Image rendering and lazy crispness */
img {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Dampens common layout-thrash sources — style only on mobile to prevent clipping */
@media (min-width: 769px) { section, .section { contain: layout style; } }

/* Crisper transitions across the board (override harsh transitions) */
* { -webkit-tap-highlight-color: transparent; }

/* ═══════════════════════════════════════════════════════════
   FLUID TYPOGRAPHY — calibrated for every screen
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Container with edge padding that fluidly shrinks */
  --pad-x: clamp(14px, 2vw, 32px);
}
/* pad-x applied via .container base rule only */

/* Refined fluid heading scale */
h1 { font-size: clamp(2.4rem, 5.4vw + 0.5rem, 6rem); }
h2 { font-size: clamp(1.85rem, 3.4vw + 0.5rem, 3.6rem); line-height: 1.06; }
h3 { font-size: clamp(1.2rem, 1.8vw + 0.5rem, 1.85rem); }

/* ═══════════════════════════════════════════════════════════
   MOBILE PERFORMANCE — kill expensive effects under 900px
   (backdrop-blur and conic-gradient halos murder mobile FPS)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Drop expensive ambient effects */
  .hero-image-card::before,                  /* conic halo */
  .hero-content::before, .hero-content::after,
  .page-hero-content::before,
  .why-left-panel::after,
  .cta-section::after,
  .cta-section .btn-primary::after          { display: none; }

  /* Lighten backdrop blurs (huge mobile-perf win) */
  .nav,
  .mobile-overlay,
  .hero-image-card > .glass-shell,
  .eyebrow,
  .hero-badge,
  .wa-float::before {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  /* Reduce ken-burns motion (saves battery) */
  .hero-image-card .glass-core img { animation-duration: 30s; }

  /* Disable orbital ring spins on icons (low-impact decorative) */
  .step-ring::before, .step-ring::after,
  .testi-avatar::after, .wp-icon-wrap::after { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   TABLET — 1024–769 — refined column widths
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid::before { display: none; }
  .gallery-masonry { grid-template-columns: repeat(2, 1fr); }
  .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  h1 { font-size: clamp(2.4rem, 5vw, 4.8rem); }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE LAYOUT FINE-TUNES (≤ 768px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Process steps — restack with breathing room */
  .process-grid { grid-template-columns: 1fr; gap: 12px; }
  .process-grid::before { display: none; }
  .process-step { padding: 36px 24px 28px; }

  /* Section heading consistency */
  .section-header h2 { font-size: clamp(1.85rem, 7vw, 2.6rem); }

  /* Cards: ensure adequate contrast against bg images */
  .glass-shell { box-shadow: var(--shadow-card); }

  /* Smaller logo on mobile nav so the nav-bar stays compact */
  .brand-logo { width: 56px; height: 56px; border-radius: 12px; }
  .brand-logo--lg { width: 88px; height: 88px; border-radius: 16px; }
  .nav { padding: 6px 6px 6px 14px; }

  /* Header collapses to logo + hamburger on mobile */
  .site-header-inner { padding: 10px 14px; gap: 12px; }
  .primary-nav { display: none; }
  .header-cta { display: none; }
  .brand-tagline { display: none; }
  .brand-name { font-size: 0.95rem; }
  .brand { position: relative; left: auto; top: auto; transform: none; }
  .brand-logo-img { height: 70px; }

  /* Tighter hero on mobile — hide card, let bg image do the work */
  .hero { padding: 150px 0 52px; }
  .hero-content { gap: 24px; padding-left: 18px !important; padding-right: 18px !important; }
  .hero-right { display: none !important; }

  /* Snappier reveal animations on mobile (perceived speed) */
  .reveal {
    transform: translateY(18px);
    filter: blur(3px);
    transition: opacity 0.6s var(--expo), transform 0.6s var(--expo), filter 0.6s var(--expo);
  }

  /* Process step ring smaller */
  .step-ring { width: 64px; height: 64px; }
  .step-num { font-size: 1.05rem; }
}

/* ═══════════════════════════════════════════════════════════
   SMALL PHONE (≤ 480px) — final tightening
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Stat overlay card on hero — float natively (no overflow) */
  .hero-image-card > .glass-shell {
    position: static !important;
    width: 100% !important;
    margin-top: 12px;
  }
  .hero-image-card > .glass-shell .glass-core { padding: 14px 18px !important; }
}

/* ═══════════════════════════════════════════════════════════
   HOVER-CAPABLE DEVICES ONLY
   (don't waste hover transforms on touch where they trigger
    on first-tap and feel weird)
   ═══════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  .glass-shell { transition: transform 0.5s var(--spring), border-color 0.5s, box-shadow 0.5s; }
  .glass-shell:hover { transform: translateY(-3px); }
  .why-point:hover, .testi-card:hover, .process-step:hover,
  .accred-pill:hover, .client-card:hover, .gallery-ph:hover { will-change: transform, box-shadow; }
}

/* Cleanup: explicit will-change on actively animating only */
.hero-image-card { will-change: transform; }
.float-anim, .fan-blades, .marquee-track { will-change: transform; }
.hero-image-card .glass-core img { will-change: transform; }

/* ═══════════════════════════════════════════════════════════
   PREMIUM SECTION POLISH — CONTINUOUS ICON MOTION
   ═══════════════════════════════════════════════════════════ */

/* Premium keyframes */
@keyframes icon-bob       { 0%,100% { transform: translateY(0); }      50% { transform: translateY(-4px); } }
@keyframes icon-tilt      { 0%,100% { transform: rotate(-4deg); }      50% { transform: rotate(4deg); } }
@keyframes icon-glow      { 0%,100% { filter: drop-shadow(0 0 0 rgba(75,166,37,0)); } 50% { filter: drop-shadow(0 0 6px rgba(75,166,37,0.7)); } }
@keyframes icon-shake     { 0%,100% { transform: rotate(0deg); }       25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes ring-spin-slow { from    { transform: rotate(0deg); }       to  { transform: rotate(360deg); } }
@keyframes ring-pulse-out { 0%      { opacity: 0.55; transform: scale(0.95); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes star-twinkle   { 0%,100% { transform: scale(1) rotate(0deg); opacity: 1; filter: drop-shadow(0 0 2px rgba(75,166,37,0.4)); } 50% { transform: scale(1.28) rotate(10deg); opacity: 0.85; filter: drop-shadow(0 0 8px rgba(75,166,37,1)); } }
@keyframes aurora-shift   { 0%,100% { background-position: 0% 50%; }   50% { background-position: 100% 50%; } }
@keyframes shine-slide    { 0%,90%,100% { left: -100%; }                50% { left: 100%; } }
@keyframes connector-flow { 0%      { background-position: 0 0; }       100% { background-position: 32px 0; } }
@keyframes premium-float  { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.04); } }
@keyframes gradient-pan   { 0%      { background-position: 0% 50%; }   50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* ── WHY SECTION — animated icons + premium hover ── */
.wp-icon-wrap {
  position: relative;
  transition: background 0.5s var(--spring), border-color 0.5s, transform 0.6s var(--bounce), box-shadow 0.5s;
}
.wp-icon-wrap::after {
  content: ''; position: absolute; inset: -4px;
  border-radius: calc(var(--r-sm) + 4px);
  border: 1px dashed rgba(75,166,37,0.25);
  opacity: 0; transition: opacity 0.4s;
}
.wp-icon-wrap svg { transition: fill 0.4s, transform 0.4s; transform-origin: center; }

.why-point:nth-child(1) .wp-icon-wrap svg { animation: icon-bob   3.5s ease-in-out infinite; }
.why-point:nth-child(2) .wp-icon-wrap svg { animation: icon-tilt  4.0s ease-in-out infinite; }
.why-point:nth-child(3) .wp-icon-wrap svg { animation: icon-glow  2.8s ease-in-out infinite; }
.why-point:nth-child(4) .wp-icon-wrap svg { animation: icon-shake 4.5s ease-in-out infinite; }

.why-point:hover .wp-icon-wrap {
  background: linear-gradient(135deg, var(--orange) 0%, #3d8a1f 100%);
  border-color: rgba(75,166,37,0.5);
  transform: rotate(-8deg) scale(1.12);
  box-shadow: 0 8px 28px rgba(75,166,37,0.4), inset 0 0 0 1px rgba(160,220,130,0.4);
}
.why-point:hover .wp-icon-wrap svg { fill: #fff; }
.why-point:hover .wp-icon-wrap::after { opacity: 1; animation: ring-spin-slow 5s linear infinite; }

.why-point::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, transparent 0%, rgba(75,166,37,0.06) 100%);
  opacity: 0; transition: opacity 0.5s var(--spring);
  pointer-events: none;
}
.why-point:hover::before { opacity: 1; }
.why-point { position: relative; overflow: hidden; }

/* Why-stats: gradient text + premium hover lift */
.why-stat { transition: background 0.5s var(--spring), transform 0.5s var(--bounce), border-color 0.4s; border: 1px solid transparent; }
.why-stat:hover { background: var(--og-sm); border-color: rgba(75,166,37,0.22); transform: translateY(-3px); }
.why-stat-num {
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-b) 50%, var(--orange-c) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  background-size: 200% 100%; animation: gradient-pan 6s ease-in-out infinite;
}

/* Why-left-panel: subtle ambient shine sweep */
.why-left-panel::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(75,166,37,0.06), transparent);
  pointer-events: none;
  animation: shine-slide 9s ease-in-out infinite;
}

/* ── PROCESS SECTION — animated step rings + flowing connector ── */
.process-grid::before {
  background-size: 32px 100%;
  animation: connector-flow 1.6s linear infinite;
}
.step-ring { transition: transform 0.6s var(--bounce), box-shadow 0.5s, background 0.4s; }
.step-ring::before { animation: ring-spin-slow 14s linear infinite; border-color: rgba(75,166,37,0.32); }
.step-ring::after {
  content: ''; position: absolute; inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(75,166,37,0.2);
  animation: ring-pulse-out 3s ease-out infinite;
  pointer-events: none;
}
.process-step:nth-child(1) .step-ring::after { animation-delay: 0s; }
.process-step:nth-child(2) .step-ring::after { animation-delay: 0.75s; }
.process-step:nth-child(3) .step-ring::after { animation-delay: 1.5s; }
.process-step:nth-child(4) .step-ring::after { animation-delay: 2.25s; }

.process-step:hover .step-ring {
  transform: scale(1.14);
  background: var(--og);
  box-shadow: 0 0 32px rgba(75,166,37,0.4), inset 0 0 0 1px rgba(75,166,37,0.4);
}
.process-step:hover .step-ring::before { animation-duration: 4s; border-color: rgba(75,166,37,0.6); }

/* ── TESTIMONIALS — twinkling stars, animated quote, glowing avatar ── */
.testi-card { position: relative; overflow: hidden; }
.testi-card::after {
  content: ''; position: absolute; inset: 0;
  border-radius: var(--r-lg);
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(75,166,37,0.1) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.5s; pointer-events: none;
}
.testi-card:hover::after { opacity: 1; }
.testi-card:hover { box-shadow: var(--shadow-card), 0 0 30px rgba(75,166,37,0.18); }

.testi-stars svg { animation: star-twinkle 2.8s ease-in-out infinite; transform-origin: center; }
.testi-stars svg:nth-child(1) { animation-delay: 0s; }
.testi-stars svg:nth-child(2) { animation-delay: 0.35s; }
.testi-stars svg:nth-child(3) { animation-delay: 0.70s; }
.testi-stars svg:nth-child(4) { animation-delay: 1.05s; }
.testi-stars svg:nth-child(5) { animation-delay: 1.40s; }

.testi-quote::before { transition: opacity 0.5s, transform 0.6s var(--bounce); }
.testi-card:hover .testi-quote::before { opacity: 0.5; transform: scale(1.2) rotate(-4deg); }

.testi-avatar { transition: transform 0.6s var(--bounce), box-shadow 0.5s; position: relative; }
.testi-avatar::after {
  content: ''; position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px dashed rgba(75,166,37,0.3);
  opacity: 0; transition: opacity 0.4s;
}
.testi-card:hover .testi-avatar {
  transform: rotate(-8deg) scale(1.12);
  box-shadow: 0 6px 20px rgba(75,166,37,0.4);
}
.testi-card:hover .testi-avatar::after { opacity: 1; animation: ring-spin-slow 6s linear infinite; }

/* ── CTA SECTION — aurora background + glowing primary button ── */
.cta-section {
  background: linear-gradient(135deg, #1A0800 0%, #0D0500 30%, #200A00 60%, #150700 100%);
  background-size: 250% 250%;
  animation: aurora-shift 14s ease-in-out infinite;
}
.cta-section::after {
  content: ''; position: absolute;
  top: 50%; left: 50%;
  width: 70%; height: 70%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(75,166,37,0.07) 0%, transparent 60%);
  pointer-events: none;
  animation: premium-float 7s ease-in-out infinite;
}
.cta-section .btn-primary { position: relative; z-index: 1; }
.cta-section .btn-primary::after {
  content: ''; position: absolute; inset: -3px;
  border-radius: 100px;
  background: linear-gradient(90deg, rgba(75,166,37,0.55), rgba(160,220,130,0.55), rgba(75,166,37,0.55));
  background-size: 200% 100%;
  animation: aurora-shift 3s linear infinite;
  z-index: -1;
  filter: blur(10px);
  opacity: 0.55;
  transition: opacity 0.4s, filter 0.4s;
}
.cta-section .btn-primary:hover::after { opacity: 1; filter: blur(14px); }

/* ═══════════════════════════════════════════════════════════
   GLOBAL ICON MOTION — every icon gets continuous life
   ═══════════════════════════════════════════════════════════ */

@keyframes icon-pulse-scale { 0%,100% { transform: scale(1); }            50%  { transform: scale(1.12); } }
@keyframes icon-float-x     { 0%,100% { transform: translateX(0); }        50%  { transform: translateX(3px); } }
@keyframes icon-heartbeat   { 0%,30%,60%,100% { transform: scale(1); }     15%  { transform: scale(1.18); } 45% { transform: scale(1.12); } }
@keyframes pin-bounce       { 0%,100% { transform: translateY(0); }        50%  { transform: translateY(-3px); } }
@keyframes arrow-slide      { 0%,100% { transform: translateX(0); }        50%  { transform: translateX(2px); } }
@keyframes icon-orbit-tiny  { 0%     { transform: rotate(0) translateX(1px) rotate(0); } 100% { transform: rotate(360deg) translateX(1px) rotate(-360deg); } }
@keyframes badge-bob        { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(2deg); } }

/* All svgs that animate get a center origin */
.hero-badge svg, .footer-contact-item svg, .social-btn svg,
.accred-pill svg, .client-icon svg, .cd-icon svg,
.wa-logo svg, .wa-float svg, .about-vis-icon svg,
.sd-check svg, .sc-cta-arrow svg, .btn-icon svg,
.sb-stat svg, .ph-tag svg, .footer-social .social-btn svg,
.coh-icon svg, .sp-item svg { transform-origin: center; }

/* Hero badges — pulse in sequence */
.hero-badge svg { animation: icon-pulse-scale 3s ease-in-out infinite; }
.hero-badges .hero-badge:nth-child(1) svg { animation-delay: 0s; }
.hero-badges .hero-badge:nth-child(2) svg { animation-delay: 0.4s; }
.hero-badges .hero-badge:nth-child(3) svg { animation-delay: 0.8s; }
.hero-badges .hero-badge:nth-child(4) svg { animation-delay: 1.2s; }

/* Footer contact icons — gentle bob with staggered delay */
.footer-contact-item svg { animation: icon-bob 3.5s ease-in-out infinite; }
.footer-brand .footer-contact-item:nth-child(2) svg { animation-delay: 0.8s; }

/* Social buttons — subtle continuous pulse (in addition to hover lift) */
.social-btn svg { animation: icon-pulse-scale 4s ease-in-out infinite; }
.footer-social .social-btn:nth-child(2) svg { animation-delay: 1.2s; }
.footer-social .social-btn:nth-child(3) svg { animation-delay: 2.4s; }

/* Button trailing-arrow icons — micro horizontal nudge */
.btn-icon { animation: icon-float-x 2.6s ease-in-out infinite; }

/* Accreditation pills — pulse chain */
.accred-pill svg { animation: badge-bob 3.5s ease-in-out infinite; }
.accred-row .accred-pill:nth-child(1) svg { animation-delay: 0s; }
.accred-row .accred-pill:nth-child(2) svg { animation-delay: 0.35s; }
.accred-row .accred-pill:nth-child(3) svg { animation-delay: 0.70s; }
.accred-row .accred-pill:nth-child(4) svg { animation-delay: 1.05s; }
.accred-row .accred-pill:nth-child(5) svg { animation-delay: 1.40s; }

/* Client icons — staggered scale pulse */
.client-icon svg { animation: icon-pulse-scale 3.5s ease-in-out infinite; }
.clients-grid .client-card:nth-child(1) .client-icon svg { animation-delay: 0s; }
.clients-grid .client-card:nth-child(2) .client-icon svg { animation-delay: 0.5s; }
.clients-grid .client-card:nth-child(3) .client-icon svg { animation-delay: 1.0s; }
.clients-grid .client-card:nth-child(4) .client-icon svg { animation-delay: 1.5s; }

/* Contact detail icons — different personality per icon */
.contact-detail-list .contact-detail:nth-child(1) .cd-icon svg { animation: icon-tilt   4.0s ease-in-out infinite; }
.contact-detail-list .contact-detail:nth-child(2) .cd-icon svg { animation: pin-bounce  3.0s ease-in-out infinite; }
.contact-detail-list .contact-detail:nth-child(3) .cd-icon svg { animation: icon-glow   2.8s ease-in-out infinite; }
.contact-detail-list .contact-detail:nth-child(4) .cd-icon svg { animation: icon-pulse-scale 3.5s ease-in-out infinite; }

/* WhatsApp logos — heartbeat */
.wa-logo svg, .wa-float svg { animation: icon-heartbeat 2.5s ease-in-out infinite; }

/* About visual shield badge — glow pulse */
.about-vis-icon svg { animation: icon-glow 3.0s ease-in-out infinite; }

/* Service-detail check marks — gentle pulse */
.sd-check svg { animation: icon-pulse-scale 3s ease-in-out infinite; }
.sd-features .sd-feature:nth-child(odd)  .sd-check svg { animation-delay: 0s; }
.sd-features .sd-feature:nth-child(even) .sd-check svg { animation-delay: 0.6s; }

/* Service-card CTA arrows — slide hint */
.sc-cta-arrow svg { animation: arrow-slide 2.2s ease-in-out infinite; }

/* On-hover acceleration (already has hover; we make icons react) */
.hero-badge:hover svg, .accred-pill:hover svg, .client-card:hover .client-icon svg,
.contact-detail:hover .cd-icon svg, .footer-contact-item:hover svg,
.social-btn:hover svg { animation-duration: 1.4s; }

/* ═══════════════════════════════════════════════════════════
   HERO ENTRY ANIMATIONS + LUXURY AMBIENT EFFECTS
   ═══════════════════════════════════════════════════════════ */

@keyframes hero-cinematic-entry {
  from { opacity: 0; transform: translateY(32px); filter: blur(10px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes hero-cinematic-fade {
  from { opacity: 0; filter: blur(8px); }
  to   { opacity: 1; filter: blur(0); }
}
@keyframes hero-image-reveal {
  from { opacity: 0; transform: scale(0.92) translateY(20px); filter: blur(14px); }
  to   { opacity: 1; transform: scale(1) translateY(0);       filter: blur(0); }
}
@keyframes hero-stat-reveal {
  from { opacity: 0; transform: scale(0.78) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes ken-burns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.08) translate(-1.5%, 0.8%); }
}
@keyframes ambient-pulse-orb {
  0%,100% { opacity: 0.32; transform: translate(0, 0) scale(1); }
  50%     { opacity: 0.55; transform: translate(8px, -10px) scale(1.12); }
}
@keyframes ambient-pulse-orb-2 {
  0%,100% { opacity: 0.22; transform: translate(0, 0) scale(1); }
  50%     { opacity: 0.4;  transform: translate(-12px, 8px) scale(1.18); }
}
@keyframes hero-border-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes underline-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── HOME HERO — staggered cinematic entry ── */
.hero-eyebrow             { animation: hero-cinematic-entry 1.1s var(--expo) 0.10s both; }
.hero-sub                 { animation: hero-cinematic-entry 1.1s var(--expo) 0.95s both; }
.hero-actions             { animation: hero-cinematic-entry 1.1s var(--expo) 1.10s both; }

/* Mask-rise text reveal — each line emerges from behind a clip mask while sliding up */
@keyframes line-mask-rise {
  from {
    clip-path: inset(0 0 100% 0);
    -webkit-clip-path: inset(0 0 100% 0);
    transform: translateY(40%);
    opacity: 0;
  }
  to {
    clip-path: inset(0 0 -12% 0);
    -webkit-clip-path: inset(0 0 -12% 0);
    transform: translateY(0);
    opacity: 1;
  }
}

/* Home hero headline — line-by-line mask rise */
.hero-headline { animation: none !important; opacity: 1 !important; }
.hero-headline span { display: block; will-change: clip-path, transform; }
.hero-headline span:nth-child(1) { animation: line-mask-rise 1.3s var(--expo) 0.25s both; }
.hero-headline span:nth-child(2) { animation: line-mask-rise 1.3s var(--expo) 0.50s both; }
.hero-headline span:nth-child(3) { animation: line-mask-rise 1.3s var(--expo) 0.75s both; }

/* Page-hero h1 reveal — keeps simple fade/translate from .reveal (no clip-path mask) */
.page-hero-content h1 { will-change: transform, opacity, filter; }

/* Badges fade in (transform reserved for the float loop) */
.hero-badges .hero-badge:nth-child(1) { animation: hero-cinematic-fade 1s var(--expo) 0.90s both, badge-float 4s ease-in-out 1.90s infinite; }
.hero-badges .hero-badge:nth-child(2) { animation: hero-cinematic-fade 1s var(--expo) 1.00s both, badge-float 4s ease-in-out 2.05s infinite; }
.hero-badges .hero-badge:nth-child(3) { animation: hero-cinematic-fade 1s var(--expo) 1.10s both, badge-float 4s ease-in-out 2.20s infinite; }
.hero-badges .hero-badge:nth-child(4) { animation: hero-cinematic-fade 1s var(--expo) 1.20s both, badge-float 4s ease-in-out 2.35s infinite; }

/* Image card cinematic reveal + ongoing gentle float */
.hero-image-card {
  animation: hero-image-reveal 1.5s var(--expo) 0.4s both, float-y 5s ease-in-out 1.9s infinite;
}
/* Slow Ken-Burns zoom on the photo itself for ambient luxury motion */
.hero-image-card .glass-core img { animation: ken-burns 18s ease-in-out infinite alternate; }

/* Floating stat overlay — pop in last with bounce */
.hero-image-card > .glass-shell {
  animation: hero-stat-reveal 0.9s var(--bounce) 1.3s both, float-y 4s ease-in-out 2.2s infinite;
}

/* Conic-gradient halo orbits the image card — premium luxury effect */
.hero-image-card::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: var(--r-lg);
  background: conic-gradient(from 0deg,
    transparent 0deg,
    rgba(75,166,37,0.55) 25deg,
    rgba(160,220,130,0.35) 60deg,
    transparent 110deg,
    transparent 360deg);
  animation: hero-border-spin 7s linear infinite;
  z-index: -1;
  filter: blur(14px);
  opacity: 0.55;
  pointer-events: none;
}

/* Ambient orange glow orbs behind hero text */
.hero-content::before {
  content: '';
  position: absolute;
  top: 18%; left: 14%;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(75,166,37,0.14) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  animation: ambient-pulse-orb 7s ease-in-out infinite;
  filter: blur(20px);
}
.hero-content::after {
  content: '';
  position: absolute;
  bottom: 10%; right: 12%;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(160,220,130,0.10) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  animation: ambient-pulse-orb-2 9s ease-in-out 1s infinite;
  filter: blur(24px);
}

/* ── PAGE-HEROES — stronger cinematic .reveal for sub-page heros ── */
.page-hero .reveal {
  transform: translateY(36px) scale(0.985);
  filter: blur(10px);
  transition: opacity 1.2s var(--expo), transform 1.2s var(--expo), filter 1.2s var(--expo);
}
.page-hero .reveal.visible { transform: translateY(0) scale(1); filter: blur(0); }

/* Ambient orb behind page-hero h1 */
.page-hero-content::before {
  content: '';
  position: absolute;
  top: -10%; left: 50%;
  width: 520px; height: 520px;
  margin-left: -260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(75,166,37,0.12) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  animation: ambient-pulse-orb 8s ease-in-out infinite;
  filter: blur(30px);
}

/* Subtle underline accent below h1 grows on load */
.page-hero-content > h1::after {
  content: '';
  display: block;
  width: 80px; height: 2px;
  margin: 24px auto 0;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
  transform-origin: center;
  animation: underline-grow 1.4s var(--expo) 1s both;
}

/* Ensure the hero positions relative for the orbs */
.hero-content { position: relative; }

/* ── HERO TEXT CONTRAST — readability over background photos ── */
.hero-headline,
.page-hero h1 {
  text-shadow:
    0 2px 24px rgba(0,0,0,0.55),
    0 1px 4px rgba(0,0,0,0.55),
    0 0 1px rgba(0,0,0,0.45);
}
.hero-sub,
.page-hero p {
  text-shadow:
    0 2px 14px rgba(0,0,0,0.65),
    0 1px 3px rgba(0,0,0,0.55);
  color: rgba(250,250,248,0.78);
}
.page-hero .breadcrumb a,
.page-hero .breadcrumb span {
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
/* Eyebrow pill on hero/page-hero gets stronger backdrop + shadow */
.hero-eyebrow .eyebrow,
.page-hero .eyebrow {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.45);
  background: rgba(75,166,37,0.22);
  border-color: rgba(75,166,37,0.35);
}
/* Hero trust badges get heavier glass + shadow against photo */
.hero-badge {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(20,12,8,0.55);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  color: rgba(250,250,248,0.85);
}
/* "DESIGN · FABRICATE · INSTALL" subline — brighten for readability */
.hero-headline span:last-child {
  color: rgba(250,250,248,0.78) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.6);
}

/* ── HERO BADGE PILLS — float + premium hover ── */
@keyframes badge-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.hero-badge {
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: transform 0.5s var(--bounce), border-color 0.4s, background 0.4s, box-shadow 0.4s, color 0.4s;
  animation: badge-float 4s ease-in-out infinite;
}
.hero-badges .hero-badge:nth-child(1) { animation-delay: 0s; }
.hero-badges .hero-badge:nth-child(2) { animation-delay: 0.3s; }
.hero-badges .hero-badge:nth-child(3) { animation-delay: 0.6s; }
.hero-badges .hero-badge:nth-child(4) { animation-delay: 0.9s; }

/* Shimmer sweep that glides across the pill on hover */
.hero-badge::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(75,166,37,0.22) 50%, transparent 70%);
  background-size: 250% 100%;
  background-position: 110% 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s, background-position 0.85s var(--spring);
}

/* Slow ambient orange hue that breathes across the pills */
.hero-badge::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(75,166,37,0.10), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--spring);
}

.hero-badge:hover {
  transform: translateY(-4px) scale(1.05);
  border-color: rgba(75,166,37,0.42);
  background: linear-gradient(135deg, rgba(75,166,37,0.15) 0%, rgba(75,166,37,0.04) 100%);
  color: var(--orange-c);
  box-shadow: 0 8px 24px rgba(75,166,37,0.28), inset 0 1px 0 rgba(160,220,130,0.25);
  animation-play-state: paused;
}
.hero-badge:hover::before { opacity: 1; background-position: -120% 0; }
.hero-badge:hover::after { opacity: 1; }
.hero-badge:hover svg { fill: var(--orange-b); }

/* Reduced motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   ULTRA-LUXURY POLISH — editorial typography, gold accents,
   refined scrollbar, premium micro-interactions
   ═══════════════════════════════════════════════════════════ */

/* ── LUXURY HEADLINE TYPOGRAPHY — Outfit at premium weights & spacing ── */
.hero-headline,
.page-hero-content > h1,
.cta-section h2,
.section-header h2 {
  font-family: var(--fd);
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 1.02;
  font-feature-settings: "ss01" 1, "kern" 1;
}
/* Brand-name highlight uses MEDIUM weight contrast — readable luxury */
.hero-headline .text-orange,
.page-hero-content > h1 .text-orange,
.cta-section h2 .text-orange,
.section-header h2 .text-orange {
  font-weight: 500;
  letter-spacing: -0.04em;
}

/* ── LUXURY SCROLLBAR — slim with orange→gold gradient thumb ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(75,166,37,0.5) 0%, rgba(75,166,37,0.45) 100%);
  border-radius: 100px;
  border: 2px solid var(--bg);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--orange) 0%, var(--gold) 100%);
  background-clip: padding-box;
}
html { scrollbar-width: thin; scrollbar-color: rgba(75,166,37,0.5) var(--bg); scroll-padding-top: 110px; }

/* ── BRANDED TEXT SELECTION ── */
::selection      { background: rgba(75,166,37,0.4); color: #fff; text-shadow: none; }
::-moz-selection { background: rgba(75,166,37,0.4); color: #fff; text-shadow: none; }

/* ── PREMIUM FOCUS STATES ── */
:focus-visible {
  outline: 2px solid rgba(75,166,37,0.6);
  outline-offset: 4px;
  border-radius: 4px;
}
button:focus-visible, a:focus-visible {
  outline: 2px solid rgba(75,166,37,0.7);
  outline-offset: 3px;
  box-shadow: 0 0 24px rgba(75,166,37,0.25);
}

/* ── REFINED EYEBROW PILL — orange-to-gold gradient blend ── */
.eyebrow {
  background: linear-gradient(135deg, rgba(75,166,37,0.2) 0%, rgba(75,166,37,0.10) 100%);
  border: 1px solid rgba(75,166,37,0.3);
  box-shadow:
    0 2px 14px rgba(75,166,37,0.16),
    inset 0 1px 0 rgba(160,220,130,0.22);
  letter-spacing: 0.20em;
  padding: 6px 14px 6px 12px;
}

/* ── BUTTON RIPPLE / MAGNETIC SHEEN — primary buttons get a soft moving highlight on hover ── */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.22), transparent 50%);
  opacity: 0;
  transition: opacity 0.4s var(--spring), transform 0.6s var(--spring);
  pointer-events: none;
  border-radius: inherit;
  transform: translateX(-30%);
}
.btn-primary:hover::after { opacity: 1; transform: translateX(30%); }

/* Ghost button — gold sheen instead */
.btn-ghost { position: relative; overflow: hidden; }
.btn-ghost::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(75,166,37,0.18) 50%, transparent 70%);
  background-size: 250% 100%;
  background-position: 110% 0;
  opacity: 0;
  transition: opacity 0.35s, background-position 0.85s var(--spring);
  pointer-events: none;
  border-radius: inherit;
}
.btn-ghost:hover::after { opacity: 1; background-position: -120% 0; }

/* ── GLASS CARDS — refined gold-hairline + bottom shadow halo ── */
.glass-shell {
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,0.022) 0%, rgba(75,166,37,0.012) 100%);
}
.glass-shell::after {
  content: '';
  position: absolute;
  bottom: -10px; left: 12%; right: 12%; height: 28px;
  background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(0,0,0,0.45), transparent 70%);
  pointer-events: none; z-index: -1;
  filter: blur(8px);
  opacity: 0.55;
}
.glass-shell:hover { border-color: rgba(75,166,37,0.22); }

/* ── REFINED FORM INPUT FOCUS ── */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: rgba(75,166,37,0.45);
  background: rgba(75,166,37,0.025);
  box-shadow:
    0 0 0 4px rgba(75,166,37,0.10),
    0 0 32px rgba(75,166,37,0.18),
    inset 0 1px 0 rgba(160,220,130,0.06);
}
.form-group label { color: var(--t50); transition: color 0.3s; }
.form-group:focus-within label { color: var(--orange-b); }

/* ── COUNTER NUMBERS — heavy Outfit with tabular figures ── */
.hero-stat-num, .why-stat-num, .gss-num,
.sb-num, .testi-info strong {
  font-family: var(--fd);
  font-feature-settings: "tnum" 1, "ss01" 1;
  font-weight: 800;
  letter-spacing: -0.04em;
}

/* ── SECTION HEADERS — refined eyebrow + serif h2 ── */
.section-header { position: relative; }
.section-header::after {
  content: '';
  display: block;
  width: 56px; height: 2px;
  margin: 22px auto 0;
  background: linear-gradient(90deg, transparent, var(--orange), var(--gold), transparent);
  border-radius: 100px;
  animation: gradient-pan 6s ease-in-out infinite;
  background-size: 200% 100%;
}

/* ── REFINED LINKS ── */
a { transition: color 0.3s var(--spring); }

/* ── BODY GRAIN — slightly more visible for film-like texture ── */
body::before { opacity: 0.04; }

/* ── PREMIUM AMBIENT GOLD GLOW behind cta-section heading ── */
.cta-section h2 { position: relative; }
.cta-section h2::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 180%; height: 220%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(75,166,37,0.06), transparent 60%);
  pointer-events: none;
  z-index: -1;
  filter: blur(20px);
}

/* ── FOOTER — premium gold separator ── */
.footer-bottom {
  border-top-color: rgba(75,166,37,0.12);
}
.footer { background: linear-gradient(180deg, transparent 0%, rgba(75,166,37,0.015) 100%); }

/* ── NAV — subtle gold tint on scroll-state ── */
.nav.scrolled {
  background: linear-gradient(135deg, rgba(5,5,7,0.85) 0%, rgba(15,10,5,0.85) 100%);
  border-color: rgba(75,166,37,0.15);
}

/* ── BUTTON PRIMARY — refined gold-orange dual-tone shadow ── */
.btn-primary {
  background: linear-gradient(135deg, var(--orange) 0%, #3d8a1f 60%, #2d6b16 100%);
  box-shadow:
    0 4px 24px rgba(75,166,37,0.35),
    0 1px 0 rgba(160,220,130,0.35) inset,
    0 -1px 0 rgba(30,80,10,0.3) inset;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 40px rgba(75,166,37,0.5),
    0 0 0 1px rgba(75,166,37,0.25),
    0 1px 0 rgba(160,220,130,0.45) inset,
    0 -1px 0 rgba(30,80,10,0.3) inset;
}

/* ── HERO IMAGE CARD — refined gold-tint border ── */
.hero-image-card {
  border: 1px solid rgba(75,166,37,0.15);
}

/* ── ITALIC FRAUNCES h1 SPAN refinement (Canopy Kings, etc) ── */
.hero-headline span:nth-child(2),
.page-hero-content > h1 .text-orange {
  font-feature-settings: "ss01" 1;
}

/* ── SMOOTHER PARTICLE SHADOW for big cards ── */
.glass-shell.hero-image-card::after {
  bottom: -16px; height: 40px;
  background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(75,166,37,0.18), transparent 70%);
  filter: blur(20px);
  opacity: 0.7;
}

/* ── Tiny detail: cursor on cards becomes premium ── */
.btn, .nav-cta, .filter-btn { cursor: pointer; }

/* ── Subtle backdrop on stat cards in hero overlay ── */
.hero-image-card > .glass-shell {
  border-color: rgba(75,166,37,0.22);
}



/* ═══════════════════════════════════════════════════════════
   MOBILE-ONLY FIXES (≤ 768px)
   1. Hamburger pinned to right edge
   2. Hero stat overlay card compacted (no extra empty space)
   3. Service cards: icon + text + CTA all centered
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── 1. HAMBURGER pinned to far right of header ── */
  .site-header-inner { justify-content: flex-start; }
  .hamburger {
    margin-left: auto !important;
    width: 44px; height: 44px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(75,166,37,0.18);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  }
  .hamburger span { background: var(--orange-c); height: 2px; }

  /* ── 2. STAT OVERLAY CARD compact (kill empty bottom space) ── */
  .hero-image-card > .glass-shell {
    bottom: -16px !important;
    right: 8px !important;
    width: clamp(170px, 56%, 200px) !important;
    height: auto !important;
  }
  .hero-image-card > .glass-shell .glass-core {
    padding: 12px 16px !important;
    gap: 10px !important;
    grid-template-columns: 1fr 1fr !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
  }
  .hero-image-card > .glass-shell .hero-stat-num {
    font-size: 1.35rem !important;
    margin-bottom: 0 !important;
    line-height: 1 !important;
  }
  .hero-image-card > .glass-shell .hero-stat-label {
    font-size: 0.6rem !important;
    margin-top: 2px !important;
    line-height: 1.3 !important;
  }

  /* ── 3. SERVICE CARDS centered (icon + text + CTA) ── */
  .service-card-inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 32px 24px !important;
    gap: 18px !important;
  }
  .sc-svg-wrap {
    margin: 0 auto !important;
    width: 110px !important;
    height: 110px !important;
    flex-shrink: 0;
  }
  .sc-meta {
    text-align: center !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .sc-label,
  .sc-title,
  .sc-desc {
    width: 100%;
    text-align: center !important;
  }
  .sc-cta {
    justify-content: center !important;
    margin: 6px auto 0 !important;
  }
  /* Hide the giant background number on mobile (clutter) */
  .sc-number { opacity: 0.18 !important; right: 16px !important; top: 16px !important; }
}


/* ═══════════════════════════════════════════════════════════
   PROMINENT SOCIAL PILLS — footer + mobile overlay
   ═══════════════════════════════════════════════════════════ */
.social-block {
  display: flex; flex-direction: column; gap: 12px;
}
.social-label {
  font-family: var(--fd);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange-c);
}
.social-buttons {
  display: flex; flex-wrap: wrap; gap: 10px;
}

/* Pill button */
.social-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 10px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(75,166,37,0.06) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 100px;
  color: var(--t100);
  text-decoration: none;
  font-family: var(--fd);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform 0.45s var(--bounce), border-color 0.4s, background 0.4s, box-shadow 0.4s, color 0.4s;
  box-shadow: 0 3px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}
.social-pill-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  transition: background 0.4s, transform 0.4s var(--bounce);
}
.social-pill-icon svg {
  width: 18px; height: 18px;
  fill: #fff;
  transition: fill 0.3s, transform 0.3s var(--bounce);
}
.social-pill-text { padding-right: 6px; }

.social-pill:hover { transform: translateY(-3px); }
.social-pill:hover .social-pill-icon { transform: scale(1.08); }

/* Facebook brand */
.social-pill--fb:hover {
  background: linear-gradient(135deg, rgba(24,119,242,0.20) 0%, rgba(24,119,242,0.08) 100%);
  border-color: rgba(24,119,242,0.5);
  color: #fff;
  box-shadow: 0 8px 28px rgba(24,119,242,0.35),
              inset 0 1px 0 rgba(120,180,255,0.30);
}
.social-pill--fb:hover .social-pill-icon { background: #1877F2; }

/* YouTube brand */
.social-pill--yt:hover {
  background: linear-gradient(135deg, rgba(255,0,0,0.20) 0%, rgba(255,0,0,0.08) 100%);
  border-color: rgba(255,0,0,0.5);
  color: #fff;
  box-shadow: 0 8px 28px rgba(255,0,0,0.35),
              inset 0 1px 0 rgba(75,166,37,0.30);
}
.social-pill--yt:hover .social-pill-icon { background: #FF0000; }

/* Mobile overlay placement — centered row below CTA */
.mobile-social {
  display: flex; gap: 8px; margin-top: 10px;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.4s, transform 0.4s var(--spring);
}
.mobile-overlay.open .mobile-social {
  opacity: 1; transform: translateY(0);
  transition-delay: 0.35s;
}