/* ============================================================
   UK DEFENCE SERVICES — style.css
   Theme: Obsidian Navy · Crimson · Champagne Gold

   TABLE OF CONTENTS:
   01. CSS Variables / Design Tokens
   02. Reset & Base
   03. Layout Utilities
   04. Glass Card Utility
   05. Top Bar
   06. Site Header & Navigation
   07. Mega Menu
   08. Buttons
   09. Mobile Navigation
   10. Hero Carousel
   11. Hero Typography & Right Panels
   12. Hero Dots
   13. Tag / Label Pills
   14. Premium Trust Strip
   15. Section Headings
   16. Services Feature Grid (Home)
   17. Icon Cards — Why Choose Us
   18. Logo / Client Strip
   19. Accreditations Marquee
   20. Testimonial Marquee
   21. Reviews Section
   22. CTA Banner
   23. FAQ Accordion
   24. Site Footer
   25. Page Hero (Inner Pages)
   26. Content Layouts (Inner Pages)
   27. Services Page
   30. Contact Page
   31. Floating CTA Buttons
   34. Custom Cursor
   35. Scroll Reveal Animations
   36. Services Video Section
   37. Keyframe Animations
   38. Responsive Breakpoints
   39. About Page
   ============================================================ */


/* ============================================================
   01. CSS VARIABLES / DESIGN TOKENS
   Change these to retheme the entire site instantly.
   ============================================================ */
:root {
  /* Core Palette */
  --navy:          #040d1e;
  --navy-2:        #0b1f4a;
  --navy-3:        #102a68;
  --navy-glass:    rgba(4,13,30,.72);

  /* Brand Accent — Crimson */
  --red:           #c8102e;
  --red-soft:      #e8415a;
  --red-glow:      rgba(200,16,46,.35);

  /* Brand Accent — Champagne Gold */
  --gold:          #d4a843;
  --gold-light:    #f0cb6e;
  --gold-pale:     rgba(212,168,67,.12);

  /* Neutral Surface */
  --white:         #ffffff;
  --offwhite:      #f5f8ff;

  /* Typography */
  --text:          #0d1726;
  --muted:         #5c6b85;

  /* Borders */
  --border:        rgba(212,168,67,.15);
  --border-dark:   rgba(255,255,255,.08);

  /* Shadows */
  --shadow:        0 20px 60px rgba(4,13,30,.14);
  --shadow-gold:   0 20px 60px rgba(212,168,67,.18);
  --shadow-strong: 0 28px 80px rgba(4,13,30,.28);

  /* Border Radius */
  --radius-xl:     32px;
  --radius-lg:     22px;
  --radius-md:     16px;

  /* Layout */
  --container:     1240px;

  /* Typography Families — change these two lines to retheme fonts site-wide */
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;
}


/* ============================================================
   02. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: #ffffff;
  overflow-x: hidden;
  line-height: 1.65;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }


/* ============================================================
   03. LAYOUT UTILITIES
   ============================================================ */
.container {
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
  padding: 0 20px;
}
.section { padding: 100px 0; position: relative; overflow: hidden; }

.theme-light        { background: linear-gradient(180deg, #ffffff, #f0f5ff); }
.theme-soft-blue    { background: linear-gradient(180deg, #e8f0ff, #f6f9ff); }
.theme-white        { background: #ffffff; }
.theme-dark         { background: linear-gradient(135deg, #040d1e, #0b1f4a 55%, #040d1e); color: white; }
.theme-gradient-cta { background: linear-gradient(135deg, #040d1e, #0f2660 50%, #040d1e); color: white; overflow: hidden; }


/* ============================================================
   04. GLASS CARD UTILITY
   ============================================================ */
.glass-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: var(--shadow-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}


/* ============================================================
   05. TOP BAR
   ============================================================ */
.topbar {
  background: linear-gradient(90deg, #010508, #061020 40%, #030c1a 60%, #010508);
  color: #a8bcd8;
  font-size: 14px;
  position: relative;
  z-index: 20;
  border-bottom: 1px solid rgba(212,168,67,.2);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
}
.topbar-left { display: flex; gap: 20px; flex-wrap: wrap; }
.topbar-left a {
  color: #a8bcd8;
  transition: color .18s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.topbar-left a:hover { color: var(--gold-light); }
.topbar-right {
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  font-family: var(--font-display);
}


/* ============================================================
   06. SITE HEADER & NAVIGATION
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgb(253, 251, 251);
  border-bottom: 1px solid rgba(212,168,67,.18);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  transition: background .3s ease;
} 
.nav-wrap {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand { display: flex; align-items: center; min-width: 0; }
.brand-logo-img {
  height: 50px;
  width: auto;
  object-fit: contain;
  filter: brightness(1.08) drop-shadow(0 0 14px rgba(212,168,67,.28));
  transition: filter .3s;
}
.brand:hover .brand-logo-img { filter: brightness(1.15) drop-shadow(0 0 20px rgba(212,168,67,.5)); }

.main-nav { display: flex; gap: 2px; align-items: center; }
.main-nav a {
  color: rgba(2, 2, 2, 0.945);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: .04em;
  position: relative;
  padding: 10px 14px;
  border-radius: 10px;
  transition: color .2s, background .2s;
}
.main-nav a:hover { color: rgb(239, 9, 9); background: rgba(212,168,67,.1); }
.main-nav a::after {
  content: "";
  position: absolute;
  left: 14px; bottom: 4px;
  width: 0; height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--red), var(--gold));
  transition: width .28s ease;
}
.main-nav a:hover::after,
.main-nav a.active::after { width: calc(100% - 28px); }
.main-nav a.active { color: rgb(251, 6, 6); }
.nav-actions { display: flex; gap: 10px; align-items: center; }


/* ============================================================
   07. MEGA MENU
   ============================================================ */
.mega-menu { position: relative; display: inline-block; }
.mega-trigger { text-decoration: none; color: rgba(255,255,255,.72); font-weight: 600; }
.mega-content {
  position: absolute;
  top: 55px; left: 0;
  width: 680px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 20px 45px rgba(0,0,0,.15);
  padding: 30px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all .25s ease;
  z-index: 999;
}
.mega-menu:hover .mega-content { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-column { padding: 18px; border-radius: 12px; transition: all .3s ease; }
.mega-column h4 { color: var(--red); font-size: 18px; margin-bottom: 6px; }
.mega-column a { display: block; font-weight: 600; color: #111; margin-bottom: 6px; transition: color .25s ease; }
.mega-column p { font-size: 14px; color: #666; line-height: 1.5; }
.mega-column:hover {
  background: linear-gradient(135deg, #fff6e8, #f5deb3);
  border-left: 4px solid var(--red);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,.15);
}
.mega-column:hover a { color: var(--red); }


/* ============================================================
   08. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 13px 26px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, background .22s ease;
}
.btn::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.16) 0%, transparent 55%);
  pointer-events: none;
}
.btn:hover  { transform: translateY(-4px) scale(1.02); }
.btn:active { transform: translateY(1px) scale(.98); }

/* Primary — animated pulsing red */
.btn-primary {
  background: linear-gradient(135deg, var(--red), #9e0d22 55%, var(--navy-2));
  color: white;
  box-shadow: 0 10px 36px var(--red-glow), inset 0 1px 0 rgba(255,255,255,.18);
  animation: pulse-cta 3.5s ease-in-out infinite;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #e8203e, var(--red) 55%, var(--navy-2));
  animation: none;
  box-shadow: 0 20px 60px rgba(200,16,46,.65);
}

/* Gold — animated pulsing gold */
.btn-gold {
  background: linear-gradient(135deg, #c49030, var(--gold-light) 50%, var(--gold));
  color: var(--navy);
  font-weight: 800;
  box-shadow: 0 10px 36px rgba(212,168,67,.4);
  animation: pulse-gold 3.5s ease-in-out infinite;
}
.btn-gold:hover {
  animation: none;
  box-shadow: 0 22px 64px rgba(212,168,67,.7);
  background: linear-gradient(135deg, var(--gold), #ffd878 50%, var(--gold));
}

/* Outline — WhatsApp nav button */
.btn-outline {
  background: transparent;
 color: #ed0707 !important;
 border: 2.5px solid #D4A843;
}
.btn-outline:hover { background: var(--gold-pale); border-color: var(--gold); color: white; }

.whatsapp-btn {
 border: 1.5px solid #D4A843 !important;
}
/* Ghost — hero secondary CTA */
.btn-ghost { background: rgba(255,255,255,.08); color: white; border: 1px solid rgba(255,255,255,.2); }
.btn-ghost:hover { background: rgba(255,255,255,.15); }

/* Dark / Light — CTA banner */
.btn-dark  { background: var(--navy); color: white; }
.btn-light { background: white; color: var(--navy); box-shadow: 0 8px 28px rgba(4,13,30,.18); }
.btn-light:hover { background: var(--offwhite); }

/* Small variant */
.btn-small { padding: 10px 20px; font-size: 13px; }

/* Icon button */
.btn-icon span { font-size: 15px; }
.btn-light span { animation: phoneShake 3s infinite; }

/* Call button — special styled link */
.call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #2b0aab, #020c3b);
  color: rgba(230,230,9,.95);
  border: 1px solid var(--gold);
  box-shadow: 0 10px 30px rgba(193,18,31,.35);
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
}
.call-btn::before {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 120%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
  transition: .6s;
}
.call-btn:hover::before { left: 120%; }
.call-btn:hover {
  background: linear-gradient(135deg, rgba(255,0,0,.83), #990000);
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 18px 45px rgba(255,0,0,.35);
}
.call-btn:active { transform: translateY(1px) scale(.97); }
.icon { display: inline-block; animation: phoneShake 3s infinite; }


/* ============================================================
   09. MOBILE NAVIGATION
   ============================================================ */
/* ================================
   MOBILE NAVIGATION (UKDS FIXED)
================================ */

/* =========================
   HAMBURGER BUTTON
========================= */

.menu-toggle {
  display: none;
  background: rgba(13, 154, 55, 0.08);
  border: 1px solid rgba(2, 8, 16, 0.15);
  color: #c00ea2;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 22px;
  cursor: pointer;
  transition: all .2s ease;
  
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20000; /* 🔥 increase this */
}

.menu-toggle:hover {
  background: rgba(212,168,67,.15);
  color: #D4A843;
}

.site-header {
  position: relative;
  z-index: 1000;
}

/* =========================
   MOBILE STYLES ONLY
========================= */

@media (max-width: 768px) {

  .menu-toggle {
    display: block !important;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10000;
   
    opacity: 1 !important;
    visibility: visible !important;
     position: absolute;
  z-index: 999999; /* very high */
  }
  

  /* Mobile nav container */
  .mobile-nav {
    position: fixed;
    top: 80px; /* adjust if header changes */
    left: 0;
    width: 100%;
    height: calc(100vh - 80px);
    background: #12022f;

    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;

    transform: translateY(-20px);
    opacity: 0;
    visibility: hidden;

    transition: all 0.3s ease;
   
    position: relative;
  z-index: 1;
  }

  /* Active state */
  .mobile-nav.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  /* Links */
  .mobile-nav a {
    padding: 14px 18px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;

    font-weight: 600;
    font-size: 16px;

    color: rgba(255,255,255,.85);
    text-decoration: none;

    font-family: var(--font-display);

    transition: all .25s ease;
  }

  .mobile-nav a:hover {
    background: rgba(212,168,67,.1);
    border-color: rgba(212,168,67,.35);
    color: #fff;
  }
}

/* =========================
   DESKTOP SAFETY (CRITICAL)
========================= */

@media (min-width: 769px) {

  .mobile-nav {
    display: none !important;
  }

  .menu-toggle {
    display: none !important;
  }
}

/* ================================
   RESPONSIVE CONTROL (IMPORTANT)
================================ */

@media (max-width: 768px) {

  /* SHOW hamburger */
  .menu-toggle {
    display: block;
  }

  /* HIDE desktop nav */
  .main-nav {
    display: none !important;
  }

  /* HIDE buttons */
  .nav-actions {
    display: none !important;
  }

}


/* ============================================================
   10. HERO CAROUSEL
   ============================================================ */

   /* 
  COMPONENT: Hero Tag Badge
  PURPOSE: Section identifier (e.g., About, Blog, Services)
  STYLE: Glassmorphism pill with gold accent, dot indicator, inner capsule
*/
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  background: rgba(212,168,75,0.12);
  border: 1px solid rgba(212,168,75,0.3);

  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;

  padding: 7px 18px;
  border-radius: 999px;

  margin-top: 70px;
  margin-bottom: 28px;
  width: fit-content;

  backdrop-filter: blur(6px);
  animation: fadeUp 0.8s ease both;
}

/* dot */
.hero-tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: blink 1.5s ease-in-out infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* inner pill (use your existing span) */
.hero-tag .eyebrow {
  width: 45px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(212,168,75,0.45);
  display: inline-block;
}

 /* END COMPONENT: Hero Tag Badge */

.hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 88px);
  display: flex;
  align-items: stretch;
}
/* Animated red orb top-right */
.hero-home::before {
  content: "";
  position: absolute;
  width: 680px; height: 680px;
  right: -100px; top: -100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,16,46,.2), transparent 68%);
  animation: floaty 11s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
/* Animated gold orb bottom-left */
.hero-home::after {
  content: "";
  position: absolute;
  width: 520px; height: 520px;
  left: 8%; bottom: -200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,168,67,.14), transparent 68%);
  animation: floaty 16s ease-in-out infinite reverse;
  pointer-events: none;
  z-index: 0;
}
/* Subtle animated grid lines overlay */
.hero-bg-lines {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 80px, rgba(212,168,67,.035) 80px, rgba(212,168,67,.035) 81px),
    repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(255,255,255,.02) 80px, rgba(255,255,255,.02) 81px);
  animation: drift 26s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.hero-carousel { width: 100%; position: relative; }

.hero-mini-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: 48%;
  margin: 0 auto;
}
/* Inactive slides */
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  background-size: cover; background-position: center;
  transition: opacity 1.1s ease;
}
/* Active slide */
.hero-slide.active { opacity: 1; visibility: visible; position: relative; }

.hero-inner {
  min-height: calc(100vh - 88px);
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 2;
  padding: 80px 0 100px;
}

/* Background image helper for security slide */
.hero-bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 85% center;
  z-index: 1;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(90deg, rgba(7,18,38,.85), rgba(7,18,38,.65) 40%, rgba(7,18,38,.25) 70%, rgba(7,18,38,.1));
}
.security-slide .container { position: relative; z-index: 3; }


/* ============================================================
   11. HERO TYPOGRAPHY & RIGHT PANELS
   ============================================================ */
.hero-copy h1, .page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 78px);
  line-height: 1.0;
  margin: 16px 0 18px;
  letter-spacing: -.04em;
  color: white;
  font-weight: 800;
}
.hero-copy h1 span, .page-hero h1 span {
  background: linear-gradient(95deg, #ffffff, var(--gold-light) 55%, var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-copy p, .page-hero p { color: rgba(255,255,255,.66); font-size: 17px; max-width: 580px; margin: 0 0 28px; line-height: 1.75; }
.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.hero-points { display: flex; gap: 20px; flex-wrap: wrap; color: rgba(255,255,255,.6); font-weight: 500; font-size: 14px; }
.hero-points span { display: flex; align-items: center; gap: 7px; }
.hero-points span::before { content: '✓'; color: var(--gold); font-weight: 800; font-size: 13px; }

/* Right panel: 2×2 mini-card grid */
.hero-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hero-mini-card {
  padding: 22px;
  transform: translateY(-40px);
  border-radius: var(--radius-xl);
  color: white;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(212,168,67,.2);
  transition: transform .32s, border-color .32s, box-shadow .32s;
}
.hero-mini-card:hover { transform: translateY(-5px); border-color: rgba(212,168,67,.45); box-shadow: 0 20px 50px rgba(212,168,67,.15); }
.hero-mini-card h3 { margin: 14px 0 8px; font-family: var(--font-display); font-size: 19px; }
.hero-mini-card p  { color: rgba(255,255,255,.58); margin: 0; font-size: 14px; }
.hero-mini-icon {
  width: 52px; height: 52px;
  border-radius: 16px;
  display: grid; place-items: center;
  font-size: 22px;
  background: linear-gradient(135deg, var(--red), var(--gold));
  box-shadow: 0 8px 24px var(--red-glow);
}
.hero-mini-icon svg { filter: drop-shadow(0 4px 10px rgba(255,180,70,.6)); }

/* Stats panel */
.hero-stat-stack, .hero-badge-panel {
  padding: 32px; border-radius: var(--radius-xl); color: white;
  background: rgba(255,255,255,.05); border: 1px solid rgba(212,168,67,.2);
}
.hero-stat-stack { display: grid; gap: 20px; }
.hero-stat-stack strong { display: block; font-family: var(--font-display); font-size: 44px; font-weight: 800; color: var(--gold-light); line-height: 1; }
.hero-stat-stack span  { color: rgba(255,255,255,.58); font-size: 14px; }
.hero-stat-up { transform: translate(60px, -60px) scale(0.9); transition: all .4s ease; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.hero-badge-panel h4 { margin: 0 0 16px; font-family: var(--font-display); font-size: 20px; color: var(--gold-light); }
.hero-badge-panel ul { margin: 0; padding-left: 0; list-style: none; color: rgba(255,255,255,.68); display: grid; gap: 10px; }
.hero-badge-panel ul li::before { content: '→ '; color: var(--gold); }

/* Side glass card */
.hero-side-card {
  max-width: 420px;
  padding: 32px; border-radius: 32px;
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border: 1px solid rgba(212,175,55,.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
  color: #fff;
}
.hero-side-card h3 { margin: 18px 0 12px; font-size: 32px; font-weight: 800; line-height: 1.1; }
.hero-side-card p  { margin: 0; font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.78); }


/* ============================================================
   12. HERO DOTS
   ============================================================ */
.hero-dots { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; gap: 10px; z-index: 4; }
.hero-dots button { width: 10px; height: 10px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.28); transition: background .3s, width .3s ease; padding: 0; }
.hero-dots button.active { background: var(--gold); width: 28px; border-radius: 5px; box-shadow: 0 0 12px rgba(212,168,67,.55); }


/* ============================================================
   13. TAG / LABEL PILLS
   ============================================================ */
.eyebrow, .tag-label, .mini-tag, .dark-tag, .white-tag, .white-mini {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: 999px;
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; font-weight: 700;
}
.eyebrow   { background: rgba(212,168,67,.12); border: 1px solid rgba(212,168,67,.32); color: var(--gold-light); }
.tag-label { background: rgba(200,16,46,.08);  border: 1px solid rgba(200,16,46,.22);  color: var(--red); }
.dark-tag, .white-tag { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: white; }
.white-mini {
  background: linear-gradient(90deg, rgba(255,255,255,.25), rgba(212,168,67,.35));
  border: 1px solid rgba(212,168,67,.6);
  color: #ede6e6;
  box-shadow: 0 4px 20px rgba(212,168,67,.25);
  backdrop-filter: blur(6px);
  padding: 8px 18px;
  font-size: 13px;
  letter-spacing: 1.5px;
  border-radius: 50px;
}
.mini-tag {
  background: linear-gradient(90deg, rgba(163,6,32,.92), rgba(212,168,67,.14));
  color: var(--navy-2);
}


/* ============================================================
   14. PREMIUM TRUST STRIP
   ============================================================ */
.pull-up-strip { padding: 90px 0; background: linear-gradient(180deg, #f6f7fb, #ffffff); }

.trust-heading { text-align: center; max-width: 720px; margin: 0 auto 50px; }
.trust-label   { letter-spacing: 2px; font-size: 12px; font-weight: 600; color: #c8a24a; }
.trust-heading h2 { font-size: 36px; margin: 12px 0; color: #111; }
.trust-heading p  { font-size: 16px; color: #666; line-height: 1.6; }

.premium-strip-wrap {
  padding: 40px;
  border-radius: 28px;
  background: linear-gradient(135deg, #0f172a, #16233b, #1f2e4d);
  box-shadow: 0 30px 60px rgba(0,0,0,.15);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  position: relative;
  overflow: hidden;
}
.premium-strip-wrap::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at top left, rgba(200,16,46,.1), transparent 40%),
    radial-gradient(circle at bottom right, rgba(212,168,67,.09), transparent 40%);
}
.premium-strip-card {
  position: relative; z-index: 1;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(212,168,67,.15);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  min-height: 155px;
  display: flex; flex-direction: column; justify-content: flex-start;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, border-color .3s;
}
.premium-strip-card:hover { transform: translateY(-7px); box-shadow: 0 22px 55px rgba(212,168,67,.14); border-color: rgba(212,168,67,.42); }
.premium-strip-icon {
  width: 50px; height: 50px; border-radius: 14px;
  display: grid; place-items: center; font-size: 22px; margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(200,16,46,.18), rgba(212,168,67,.22));
  border: 1px solid rgba(212,168,67,.2);
}
.premium-strip-card small  { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .2em; color: var(--gold); }
.premium-strip-card strong { font-family: var(--font-display); font-size: 17px; line-height: 1.38; color: rgba(255,255,255,.9); font-weight: 700; }

/* Why section label */
.why-section { padding: 120px 0; background: #f5f7fb; text-align: center; }
.why-label span { display: inline-block; padding: 10px 20px; border-radius: 30px; border: 1px solid #e4e6eb; font-size: 12px; letter-spacing: 2px; font-weight: 600; color: var(--red); background: #ffffff; }
.why-title { font-size: 52px; font-weight: 800; max-width: 900px; margin: 30px auto 70px; line-height: 1.2; color: #0f172a; }


/* ============================================================
   15. SECTION HEADINGS
   ============================================================ */
.section-heading { margin-bottom: 48px; }
.section-heading.center-align { text-align: center; }
.section-heading.center-width  { max-width: 780px; margin-left: auto; margin-right: auto; text-align: center; }
.section-heading.light h2 { color: #fff; }
.section-heading.light p  { color: rgba(255,255,255,.72); }
.section-heading h2 {
  margin: 12px 0 14px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -.035em;
}
.section-heading p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.75; }


/* ============================================================
   16. SERVICES FEATURE GRID (Home page)
   ============================================================ */


.service-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    'security    construction'
    'security    it'
    'cleaning    hospitality';
  gap: 20px;
}

/* ── Base Tile ── */
.feature-tile {
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 32px rgba(4,13,30,.18);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform .42s ease, box-shadow .42s ease;
  border: 1px solid rgba(255,255,255,.12);
}

/* ── Individual tile heights ── */
.feature-tile.security     { grid-area: security;     height: 580px; }
.feature-tile.cleaning     { grid-area: cleaning;     height: 280px; }
.feature-tile.construction { grid-area: construction; height: 280px; }
.feature-tile.it           { grid-area: it;           height: 280px; }
.feature-tile.hospitality  { grid-area: hospitality;  height: 280px; }

/* ── Background Images ── */
.feature-tile.security     { background-image: url('Security.png'); }
.feature-tile.cleaning     { background-image: url('cleaning.png'); }
.feature-tile.construction { background-image: url('Construction.png'); }
.feature-tile.it           { background-image: url('IT.png'); }
.feature-tile.hospitality  { background-image: url('Hospitality.png'); }

/* ── Hover ── */
.feature-tile:hover {
  transform: scale(1.018);
  box-shadow: 0 28px 70px rgba(4,13,30,.28);
}

/* ── Dark overlay so text is always readable ── */
.feature-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(4,13,30,.45) 0%,    /* darker at top — image still visible */
    rgba(4,13,30,.85) 60%,   /* strong fade starts earlier */
    rgba(4,13,30,.97) 100%   /* near solid at bottom where text sits */
  );
  z-index: 1;
}

/* ── Text content sits above overlay ── */
.feature-content {
  position: absolute;
  inset: auto 24px 24px;
  z-index: 2;
  color: white;
}

.feature-content h3 {
  margin: 10px 0 10px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

.feature-content p {
  color: rgba(255,255,255,.85);
  margin-bottom: 16px;
  max-width: 520px;
  font-size: 15px;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* ── Badge ── */
.feature-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(212,168,67,.16);
  border: 1px solid rgba(212,168,67,.32);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 700;
  color: var(--gold-light);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .service-feature-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      'security'
      'cleaning'
      'construction'
      'it'
      'hospitality';
  }

  .feature-tile.security,
  .feature-tile.cleaning,
  .feature-tile.construction,
  .feature-tile.it,
  .feature-tile.hospitality {
    height: 280px;
  }
}
/* ============================================================
   17. ICON CARDS — WHY CHOOSE US
   ============================================================ */
.icon-card-grid { display: grid; gap: 22px; }
.icon-card-grid.four-col { grid-template-columns: repeat(4, 1fr); }
.icon-card {
  background: white;
  border: 1px solid rgba(4,13,30,.07);
  border-radius: var(--radius-xl);
  padding: 34px 28px; box-shadow: var(--shadow);
  text-align: center;
  transition: transform .32s cubic-bezier(.34,1.56,.64,1), box-shadow .32s, border-color .32s;
  position: relative; overflow: hidden;
}
.icon-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(200,16,46,.03), rgba(212,168,67,.06)); opacity: 0; transition: opacity .3s; }
.icon-card:hover { transform: translateY(-10px); box-shadow: 0 30px 75px rgba(4,13,30,.18); border-color: rgba(212,168,67,.3); }
.icon-card:hover::before { opacity: 1; }
.icon-bubble {
  width: 78px; height: 78px; border-radius: 22px;
  display: grid; place-items: center;
  margin: 0 auto 18px; font-size: 30px;
  background: linear-gradient(135deg, rgba(200,16,46,.1), rgba(212,168,67,.18));
  border: 1px solid rgba(212,168,67,.22);
  transition: transform .32s cubic-bezier(.34,1.56,.64,1);
}
.icon-card:hover .icon-bubble { transform: scale(1.12) rotate(-6deg); }
.icon-card h3 { margin: 0 0 10px; color: var(--navy); font-family: var(--font-display); font-weight: 700; }
.icon-card p  { margin: 0; color: var(--muted); font-size: 15px; }


/* ============================================================
   18. LOGO / CLIENT STRIP
   ============================================================ */
.logo-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.logo-chip {
  min-height: 96px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #ffffff, #f2f7ff);
  border: 1px solid rgba(4,13,30,.08);
  border-radius: 20px; box-shadow: var(--shadow);
  font-family: var(--font-display); font-weight: 800; color: var(--navy-2);
  font-size: 14px; text-align: center; padding: 16px;
  transition: transform .28s, border-color .28s, box-shadow .28s;
}
.logo-chip:hover { transform: translateY(-6px); border-color: rgba(212,168,67,.38); box-shadow: 0 20px 52px rgba(212,168,67,.2); }


/* ============================================================
   19. ACCREDITATIONS MARQUEE
   ============================================================ */
.accreditation-section {
  position: relative; overflow: hidden; padding: 110px 0;
  background:
    radial-gradient(circle at top left, rgba(225,29,72,.10), transparent 22%),
    radial-gradient(circle at top right, rgba(29,78,216,.12), transparent 24%),
    linear-gradient(180deg, #08111f, #0b1220);
}
.accreditation-section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(8,17,31,1) 0%, rgba(8,17,31,0) 12%, rgba(8,17,31,0) 88%, rgba(8,17,31,1) 100%);
  z-index: 2;
}
.section-heading-acc { position: relative; z-index: 3; max-width: 900px; margin: 0 auto 46px; text-align: center; }
.section-heading-acc h2 { color: #fff; margin: 12px 0 10px; font-size: clamp(34px, 4vw, 58px); line-height: 1.05; }
.section-heading-acc p  { color: rgba(255,255,255,.68); font-size: 17px; line-height: 1.7; }

.logo-marquee { position: relative; z-index: 3; overflow: hidden; padding: 18px 0; }
.logo-track {
  display: flex; align-items: center; gap: 26px;
  width: max-content;
  animation: accreditationScroll 18s linear infinite;
}
.logo-marquee:hover .logo-track { animation-play-state: paused; }

.accreditation-card {
  flex: 0 0 auto;
  width: 220px; height: 138px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.993), rgb(255,255,255));
  border: 1px solid rgba(236,14,14,.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 36px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.10);
  position: relative; overflow: hidden;
 
  transform-origin: center;
}
.accreditation-card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.18) 50%, transparent 80%);
  transform: translateX(-130%); transition: transform .7s ease;
}
.accreditation-card:hover::before { transform: translateX(130%); }
.accreditation-card:hover { transform: translateY(-8px) scale(1.02); border-color: rgba(225,29,72,.42); box-shadow: 0 20px 50px rgba(0,0,0,.42), 0 0 0 1px rgba(29,78,216,.18), 0 0 24px rgba(225,29,72,.18); }
.accreditation-card img { width: auto; max-width: 78%; max-height: 170px; object-fit: contain; display: block; transition: transform .35s ease; }
.accreditation-card:hover img { transform: scale(1.06); }


/* ============================================================
   20. TESTIMONIAL MARQUEE
   ============================================================ */
.testimonial-marquee-wrap {
  overflow: hidden; position: relative;
  background: linear-gradient(135deg, #040d1e, #0a1c46 55%, #040d1e);
}
.testimonial-marquee-wrap::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at top left,    rgba(200,16,46,.16), transparent 48%),
    radial-gradient(ellipse at bottom right, rgba(212,168,67,.13), transparent 48%);
}
.marquee-row {
  overflow: hidden; position: relative;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee-track { display: flex; gap: 20px; width: max-content; animation: marquee 38s linear infinite; padding: 8px 20px 0; }
.marquee-track:hover { animation-play-state: paused; }
.marquee-card {
  min-width: 380px; padding: 30px 34px;
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(212,168,67,.18);
  color: rgba(255,255,255,.88);
  box-shadow: 0 14px 44px rgba(4,13,30,.35);
  position: relative;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.marquee-card:hover { border-color: rgba(212,168,67,.5); transform: translateY(-5px); box-shadow: 0 22px 60px rgba(212,168,67,.12); }
.marquee-card::before { content: "\201C"; position: absolute; top: 10px; left: 22px; font-size: 80px; line-height: 1; color: var(--gold); opacity: .28; font-family: Georgia, serif; pointer-events: none; }

/* Testimonial card grid (3-col) */
.testimonial-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 8px; }
.testimonial-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(212,168,67,.18);
  border-radius: 26px; padding: 32px 28px;
  position: relative; overflow: hidden;
  transition: transform .32s cubic-bezier(.34,1.56,.64,1), border-color .3s, box-shadow .3s;
}
.testimonial-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(212,168,67,.6), transparent); }
.testimonial-card::after { content: "\201C"; position: absolute; top: 16px; right: 22px; font-size: 90px; line-height: 1; color: rgba(212,168,67,.12); font-family: Georgia, serif; pointer-events: none; }
.testimonial-card:hover { transform: translateY(-8px); border-color: rgba(212,168,67,.45); box-shadow: 0 24px 60px rgba(4,13,30,.4), 0 0 0 1px rgba(212,168,67,.2); }
.testimonial-card--featured { background: linear-gradient(135deg, rgba(212,168,67,.1), rgba(200,16,46,.08)); border-color: rgba(212,168,67,.45); }
.testimonial-stars { color: var(--gold); font-size: 16px; letter-spacing: 2px; margin-bottom: 16px; }
.testimonial-card > p { color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.78; margin: 0 0 24px; font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 14px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 18px; }
.testimonial-avatar { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--red), var(--gold)); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 13px; color: white; box-shadow: 0 6px 18px var(--red-glow); }
.testimonial-author > div:last-child { display: flex; flex-direction: column; gap: 3px; }
.testimonial-author strong { color: white; font-size: 14px; font-family: var(--font-display); }
.testimonial-author span   { color: rgba(255,255,255,.45); font-size: 12px; }


/* ============================================================
   21. REVIEWS SECTION
   ============================================================ */
.reviews-section {
  position: relative; overflow: hidden; padding: 100px 0;
  background:
    radial-gradient(circle at top right, rgba(212,168,67,.08), transparent 22%),
    radial-gradient(circle at top left, rgba(230,57,70,.07), transparent 20%),
    linear-gradient(180deg, #06101f, #020817);
  color: #fff;
}
.reviews-header { max-width: 860px; margin: 0 auto 18px; text-align: center; padding: 0 24px; }
.reviews-header h2 { font-size: clamp(38px, 5vw, 72px); line-height: 1.02; font-weight: 800; margin: 0 0 16px; color: #fff; }
.reviews-header p  { margin: 0; font-size: 20px; line-height: 1.7; color: rgba(255,255,255,.72); }

.google-badge { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; margin: 0 auto 44px; padding: 0 24px; }
.badge-left   { display: flex; align-items: center; gap: 18px; }
.g-logo { font-size: 44px; font-weight: 800; line-height: 1; }
.badge-left h3  { margin: 0 0 6px; font-size: 20px; color: #fff; }
.badge-left p   { margin: 0; color: rgba(255,255,255,.72); font-size: 15px; }
.badge-left .stars { color: #f4c84a; letter-spacing: 2px; font-size: 18px; }
.google-badge a { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 999px; border: 1px solid rgba(212,168,67,.32); background: rgba(255,255,255,.04); color: #fff; text-decoration: none; font-weight: 700; transition: all .35s ease; }
.google-badge a:hover { transform: translateY(-2px); background: linear-gradient(135deg, #d63a45, #122a7a); border-color: transparent; }

/* Scrolling reviews marquee */
.reviews-marquee { position: relative; overflow: hidden; padding: 10px 0; mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); }
.reviews-track { display: flex; gap: 28px; width: max-content; animation: reviewsScroll 30s linear infinite; }
.reviews-marquee:hover .reviews-track { animation-play-state: paused; }

.review-card {
  width: 420px; min-height: 270px;
  padding: 28px 28px 24px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 44px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
  color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.review-card:hover { transform: translateY(-8px); border-color: rgba(212,168,67,.28); box-shadow: 0 22px 48px rgba(0,0,0,.34), 0 0 24px rgba(212,168,67,.10); }
.review-card .stars { color: #f4c84a; font-size: 22px; letter-spacing: 2px; margin-bottom: 18px; }
.review-card p  { margin: 0 0 26px; color: rgba(255,255,255,.92); font-size: 17px; line-height: 1.75; }
.review-user { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.review-user h4   { margin: 0; color: #fff; font-size: 18px; font-weight: 700; }
.review-user span { display: block; margin-top: 5px; color: rgba(255,255,255,.72); font-size: 15px; }

/* Carousel arrows & dots */
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: #121a33; color: #fff; border: none; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; z-index: 5; transition: .3s; }
.carousel-btn:hover { background: var(--red); }
.prev { left: 10px; }
.next { right: 10px; }
.carousel-dots { margin-top: 20px; display: flex; justify-content: center; gap: 8px; }
.carousel-dots span { width: 8px; height: 8px; background: #555; border-radius: 50%; cursor: pointer; transition: .3s; }
.carousel-dots span.active { background: var(--red); width: 20px; border-radius: 10px; }

/* Avatar circles (Google colour variants) */
.avatar {
  width: 52px; height: 52px; min-width: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; color: #fff;
  position: relative; overflow: hidden;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 10px 25px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2);
  transition: all .35s ease;
}
.avatar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(120deg, rgba(255,255,255,.35), transparent 40%); opacity: .4; }
.avatar.g-blue   { background: linear-gradient(135deg, #4285F4, #1a3fbf); box-shadow: 0 10px 25px rgba(0,0,0,.35), 0 0 20px rgba(66,133,244,.25); }
.avatar.g-red    { background: linear-gradient(135deg, #EA4335, #a52714); box-shadow: 0 10px 25px rgba(0,0,0,.35), 0 0 20px rgba(234,67,53,.25); }
.avatar.g-yellow { background: linear-gradient(135deg, #FBBC05, #d39e00); color: #111; box-shadow: 0 10px 25px rgba(0,0,0,.35), 0 0 20px rgba(251,188,5,.25); }
.avatar.g-green  { background: linear-gradient(135deg, #34A853, #0f6a2f); box-shadow: 0 10px 25px rgba(0,0,0,.35), 0 0 20px rgba(52,168,83,.25); }
.review-card:hover .avatar { transform: scale(1.12); }

.cta-heading { font-size: clamp(32px, 3.5vw, 52px); line-height: 1.2; max-width: 900px; }


/* ============================================================
   22. CTA BANNER
   ============================================================ */
.cta-banner { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: center; }
.cta-banner h2 { color: white; margin: 12px 0 10px; font-family: var(--font-display); font-size: clamp(28px, 4vw, 50px); font-weight: 800; letter-spacing: -.035em; }
.cta-banner p  { color: rgba(255,255,255,.62); margin: 0; font-size: 17px; }
.cta-buttons-col { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; }


/* ============================================================
   23. FAQ ACCORDION
   ============================================================ */
.faq-section { padding: 100px 20px; background: linear-gradient(135deg, #f5f7fb, #eef1f6); text-align: center; }
.faq-section h2 { font-size: 38px; font-weight: 700; color: #0a0f1e; margin-bottom: 40px; }

/* Tab switcher */
.faq-tabs { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 50px; }
.tab { padding: 12px 22px; border-radius: 30px; background: #e9edf3; color: #2b2f3a; border: none; font-size: 15px; font-weight: 500; cursor: pointer; transition: all .25s ease; position: relative; }
.tab:hover { background: #dde3ec; transform: translateY(-2px); }
.tab.active { background: #0a0f1e; color: #ffffff; transform: translateY(-2px); }
.tab.active::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: -6px; height: 3px; background: var(--red); border-radius: 2px; }

/* FAQ content panels */
.faq-content { display: none; }
.faq-content.active { display: block; animation: fadeUp .4s ease; }

/* FAQ item card */
.faq-item { max-width: 850px; margin: 16px auto; border-radius: 14px; background: #ffffff; box-shadow: 0 6px 20px rgba(0,0,0,.05); transition: all .3s ease; }
.faq-item:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.08); }

/* Question button */
.faq-question { width: 100%; padding: 20px 24px; border: none; background: none; display: flex; justify-content: space-between; align-items: center; font-size: 17px; font-weight: 600; color: #0a0f1e; cursor: pointer; }

/* +/- icon */
.faq-icon { width: 22px; height: 22px; position: relative; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: #0a0f1e; transition: all .3s ease; }
.faq-icon::before { width: 100%; height: 2px; top: 50%; left: 0; transform: translateY(-50%); }
.faq-icon::after  { width: 2px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); }
.faq-question.active .faq-icon::after  { height: 0; opacity: 0; }
.faq-question.active .faq-icon::before { background: var(--red); }

/* Answer panel */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s ease; padding: 0 24px; }
.faq-answer p { padding-bottom: 20px; color: #444; line-height: 1.7; text-align: left; }

/* FAQ CTA */
.faq-cta { margin-top: 50px; }
.faq-cta a { display: inline-block; padding: 12px 26px; border-radius: 30px; background: #0a0f1e; color: #fff; font-weight: 600; transition: .3s; }
.faq-cta a:hover { background: var(--red); }



/* ============================================================
   24. SITE FOOTER
   ============================================================ */
.site-footer {
  background: linear-gradient(135deg, #020810 0%, #040d1e 55%, #020810 100%);
  border-top: 1px solid rgba(212,168,67,.14);
  color: rgba(255,255,255,.65);
  padding: 80px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr 1fr;
  gap: 48px;
  padding-bottom: 60px;
}
.footer-logo { height: 48px; width: auto; margin-bottom: 20px; filter: brightness(1.08) drop-shadow(0 0 10px rgba(212,168,67,.2)); }
.footer-grid > div > p { font-size: 14px; line-height: 1.8; color: rgba(255,255,255,.5); }
.site-footer h4 {
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-light); margin-bottom: 20px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(212,168,67,.18);
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links li a { color: rgba(255,255,255,.55); font-size: 14px; transition: color .2s, padding-left .2s; display: flex; align-items: center; gap: 6px; }
.footer-links li a:hover { color: var(--gold-light); padding-left: 4px; }
.footer-links li a::before { content: '›'; color: var(--red); opacity: 0; transition: opacity .2s; }
.footer-links li a:hover::before { opacity: 1; }
.footer-links li { color: rgba(255,255,255,.4); font-size: 14px; line-height: 1.6; }
/* Social chips */
.footer-socials 
{ display: flex; 
  flex-direction: column; /* 🔥 THIS is the key */
  flex-wrap: wrap; 
  gap: 10px; 
}
.social-chip {
  display: flex; 
  align-items:   center; /* vertical center */
  gap: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 13px; 
  color: rgba(255,255,255,.65);
  font-family: var(--font-display);
  font-weight: 600;
  transition: background .2s, border-color .2s, color .2s;
 
 /* width: auto;          /* 🔥 KEY: stops stretching */
 /* min-width: 200px;     /* optional: keeps it balanced */
  /*max-width: 260px;     /* 🔥 control how wide it can go */
  /*justify-content: center;           /* horizontal center */

}
.social-chip:hover { background: rgba(212,168,67,.1); border-color: rgba(212,168,67,.3); color: var(--gold-light); }
.social-chip i 
{ 
  font-size: 14px;
 color: var(--gold-light); /* always gold */
 }
/* Footer CTA button */
.footer-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px;
  background: linear-gradient(135deg, var(--red), #9e0d22);
  color: white; font-weight: 700; font-family: var(--font-display);
  padding: 12px 22px; border-radius: 999px; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase;
  transition: box-shadow .3s, transform .2s;
  box-shadow: 0 8px 28px var(--red-glow);
}
.footer-cta:hover { box-shadow: 0 14px 44px rgba(200,16,46,.5); transform: translateY(-2px); }
/* Bottom bar */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 22px 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.922);
  text-align: center;
  line-height: 1.7;
}


/* ============================================================
   25. PAGE HERO (INNER PAGES)
   ============================================================ */
.page-hero {
  min-height: 52vh; display: flex; align-items: center;
  background-size: cover; background-position: center;
  position: relative; color: white;
}
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,13,30,.32), rgba(4,13,30,.72)); }
.page-hero .container { position: relative; z-index: 2; padding: 70px 0; }


/* ============================================================
   26. CONTENT LAYOUTS (INNER PAGES)
   ============================================================ */
.two-col-content { display: grid; grid-template-columns: .95fr 1.05fr; gap: 32px; align-items: center; }
.image-panel { min-height: 520px; border-radius: var(--radius-xl); background-size: cover; background-position: center; box-shadow: var(--shadow); }
.three-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.info-card, .timeline-item, .service-page-card, .blog-card, .vacancy-card {
  background: white; border: 1px solid rgba(4,13,30,.07); border-radius: var(--radius-xl); box-shadow: var(--shadow);
}
.info-card { padding: 26px; }
.info-card h3 { margin: 12px 0 10px; color: var(--navy); font-family: var(--font-display); }
.timeline-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.timeline-item { padding: 30px; }
.timeline-item strong { display: inline-flex; width: 54px; height: 54px; border-radius: 18px; place-items: center; justify-content: center; background: linear-gradient(135deg, rgba(200,16,46,.14), rgba(212,168,67,.22)); color: var(--navy); margin-bottom: 14px; font-size: 22px; }
.timeline-item h3 { margin: 0 0 10px; font-family: var(--font-display); }


/* ============================================================
   27. SERVICES PAGE
   ============================================================ */
.service-page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.service-page-card { overflow: hidden; transition: transform .3s, box-shadow .3s; border-radius: 20px; }
.service-page-card:hover { transform: translateY(-6px); box-shadow: 0 28px 70px rgba(4,13,30,.14); }
.service-page-image { height: 250px; background-size: contain; background-position: center; background-repeat: no-repeat; background-color: #eae7f1; padding: 10px; box-sizing: border-box; }
.service-page-body { padding: 24px; }
.service-page-body h3 { margin: 12px 0 10px; font-family: var(--font-display); }

/* Services tabbed page */
.ukds-services { padding: 100px 0; background: linear-gradient(180deg, #020817, #06101f); }
.ukds-tabs { display: flex; justify-content: center; gap: 15px; margin-bottom: 60px; }
.ukds-tab { padding: 14px 28px; border-radius: 40px; border: 1px solid rgba(255,255,255,.2); background: transparent; color: #fff; cursor: pointer; transition: .3s; }
.ukds-tab.active { background: linear-gradient(135deg, var(--gold), #f1c76b); color: #000; }
.ukds-content { display: none; }
.ukds-content.active { display: block; }






/* ============================================================
   30. CONTACT PAGE
   ============================================================ */
.contact-section-advanced { overflow: hidden; }
.contact-grid-advanced { display: grid; grid-template-columns: .85fr 1.15fr; gap: 28px; align-items: start; }
.contact-link-stack { display: grid; gap: 14px; }
.contact-info-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 22px; padding: 18px 20px; display: flex; align-items: center; gap: 16px; color: white; transition: background .22s, border-color .22s; }
.contact-info-card:hover { background: rgba(212,168,67,.08); border-color: rgba(212,168,67,.3); }
.contact-info-card span:first-child { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 18px; font-size: 24px; background: linear-gradient(135deg, var(--red), var(--gold)); }
.contact-info-card strong { display: block; }
.contact-info-card small  { color: rgba(255,255,255,.52); }
.contact-form-shell { position: relative; }
.security-figure-decor { position: absolute; left: -30px; bottom: 20px; width: 160px; height: 360px; border-radius: 60px 60px 30px 30px; background: linear-gradient(180deg, #1a3c8a, #040d1e 70%); opacity: .9; box-shadow: var(--shadow-strong); }
.security-figure-decor::before { content: ""; position: absolute; width: 68px; height: 68px; border-radius: 50%; top: -72px; left: 46px; background: #b8c8e8; }
.security-figure-decor::after { content: "SECURITY"; position: absolute; top: 32px; left: 50%; transform: translateX(-50%); color: white; font-size: 11px; letter-spacing: .2em; font-weight: 800; }
.contact-form-card { margin-left: 110px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 28px; padding: 30px; backdrop-filter: blur(20px); box-shadow: var(--shadow-strong); color: white; }
.contact-form-card h3 { margin: 14px 0 20px; font-size: 34px; font-family: var(--font-display); font-weight: 800; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; padding: 15px 18px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.07); color: white; outline: none; transition: border-color .22s, background .22s; }
.form-grid input:focus, .form-grid textarea:focus { border-color: rgba(212,168,67,.5); background: rgba(255,255,255,.1); }
.form-grid input::placeholder, .form-grid textarea::placeholder { color: rgba(255,255,255,.35); }
.form-grid select option { color: var(--text); }
.full { grid-column: 1 / -1; }
.map-shell { margin-top: 28px; overflow: hidden; border-radius: 28px; box-shadow: var(--shadow-strong); border: 1px solid rgba(255,255,255,.07); }
.map-header { background: linear-gradient(90deg, var(--navy-2), var(--navy)); color: var(--gold-light); padding: 16px 22px; font-family: var(--font-display); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
.map-shell iframe { width: 100%; height: 390px; border: none; display: block; }




/* ============================================================
   32. FLOATING CTA BUTTONS
   ============================================================ */
.floating-cta-stack { position: fixed; left: 20px; bottom: 20px; z-index: 80; display: flex; flex-direction: column; gap: 14px; }
.float-btn { width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center; color: white; font-size: 24px; position: relative; overflow: visible; transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s; text-decoration: none; }
.float-btn:hover { transform: scale(1.14) translateY(-3px); }
.float-btn::before { content: ""; position: absolute; inset: -4px; border-radius: 24px; border: 2px solid currentColor; opacity: 0; animation: float-pulse 2.8s ease-out infinite; }
.float-btn.call { background: linear-gradient(135deg, #0d2255, #1a3a8a); box-shadow: 0 12px 38px rgba(13,34,85,.55), inset 0 1px 0 rgba(255,255,255,.15); border: 2px solid rgba(212,168,67,.4); color: var(--gold-light); }
.float-btn.call::before { border-color: var(--gold); }
.float-btn.call::after { content: "Call Us"; position: absolute; left: 72px; top: 50%; transform: translateY(-50%); background: #0d2255; color: var(--gold-light); padding: 6px 12px; border-radius: 10px; font-size: 12px; font-family: var(--font-display); font-weight: 700; letter-spacing: .06em; white-space: nowrap; border: 1px solid rgba(212,168,67,.3); opacity: 0; pointer-events: none; transition: opacity .22s, left .22s; }
.float-btn.call:hover::after { opacity: 1; left: 76px; }
.float-btn.whatsapp { background: linear-gradient(135deg, #0a7a34, #1db954); box-shadow: 0 12px 38px rgba(29,185,84,.4), inset 0 1px 0 rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.15); color: white; }
.float-btn.whatsapp::before { border-color: #1db954; animation-delay: 1.4s; }
.float-btn.whatsapp::after { content: "WhatsApp"; position: absolute; left: 72px; top: 50%; transform: translateY(-50%); background: #0a7a34; color: white; padding: 6px 12px; border-radius: 10px; font-size: 12px; font-family: var(--font-display); font-weight: 700; letter-spacing: .06em; white-space: nowrap; border: 1px solid rgba(255,255,255,.2); opacity: 0; pointer-events: none; transition: opacity .22s, left .22s; }
.float-btn.whatsapp:hover::after { opacity: 1; left: 76px; }


  
/* ============================================================
   34. CUSTOM CURSOR
   ============================================================ */
* { cursor: none !important; }
.cursor-ring {
  position: fixed; top: 0; left: 0;
  width: 36px; height: 36px;
  border: 2px solid rgba(212,168,67,.8);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  background: rgba(212,168,67,.06);
  transition: width .18s ease, height .18s ease, border-color .18s ease, background .18s ease, border-radius .18s ease, opacity .2s ease;
  will-change: left, top;
  box-sizing: border-box;
}
.cursor-dot {
  position: fixed; top: 0; left: 0;
  width: 8px; height: 8px;
  background: var(--red);
  border-radius: 50%;
  pointer-events: none;
  z-index: 100000;
  transform: translate(-50%, -50%);
  transition: opacity .2s ease;
  will-change: left, top;
}
.cursor-ring.on-link  { width: 50px; height: 50px; border-color: rgba(80,140,255,.85);  background: rgba(80,140,255,.06); }
.cursor-ring.on-btn   { width: 44px; height: 44px; border-color: rgba(200,16,46,.85);  background: rgba(200,16,46,.07); }
.cursor-ring.on-input { width: 3px; height: 36px; border-radius: 2px; border-color: rgba(212,168,67,.9); background: rgba(212,168,67,.15); }
.cursor-ring.on-img   { width: 64px; height: 64px; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.04); }


/* ============================================================
   35. SCROLL REVEAL ANIMATIONS
   ============================================================ */
.reveal    { opacity: 0; transform: translateY(44px); transition: opacity .72s ease, transform .72s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal-up { opacity: 0; transform: translateY(70px); transition: opacity .9s ease, transform .9s ease; will-change: opacity, transform; }
.reveal-up.active { opacity: 1; transform: translateY(0); }
.hidden { display: none !important; }


/* ============================================================
   36. SERVICES VIDEO SECTION
   ============================================================ */
.services-video-section { background: linear-gradient(160deg, #060c1c, #0a1530 50%, #050a16); padding: 110px 0; position: relative; overflow: hidden; }
.services-video-section::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(201,146,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(201,146,42,.035) 1px, transparent 1px); background-size: 56px 56px; pointer-events: none; animation: drift 28s linear infinite; }
.services-video-section .section-heading h2 { color: #f5ead8; }
.services-video-section .section-heading p  { color: rgba(220,208,182,.68); }
.services-video-section .tag-label { background: rgba(201,146,42,.14); border-color: rgba(201,146,42,.32); color: #e8b84b; }
.svs-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
.svs-player { position: relative; }
.svs-frame { position: relative; border-radius: 22px; padding: 3px; background: linear-gradient(135deg, #c9922a, #040810 35%, #c8102e 65%, #040810 85%, #c9922a); background-size: 300% 300%; animation: borderMove 7s linear infinite; box-shadow: 0 28px 80px rgba(2,8,16,.65); }
.svs-frame-inner { border-radius: 20px; overflow: hidden; position: relative; aspect-ratio: 16/9; background: #030710; }
.svs-poster { position: absolute; inset: 0; cursor: pointer; }
.svs-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease, filter .3s ease; filter: brightness(.72) saturate(1.1); }
.svs-poster:hover img { transform: scale(1.04); filter: brightness(.6) saturate(1.15); }
.svs-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,8,16,.2), rgba(2,8,16,.5)); z-index: 1; }
.svs-play-btn { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: none; border: none; cursor: pointer; }
.svs-play-triangle { width: 76px; height: 76px; border-radius: 50%; background: linear-gradient(135deg, var(--red), #7a0818 55%, var(--navy-2)); display: grid; place-items: center; font-size: 26px; color: white; padding-left: 5px; box-shadow: 0 12px 40px rgba(200,16,46,.5); position: relative; z-index: 2; transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s; }
.svs-poster:hover .svs-play-triangle { transform: scale(1.14); box-shadow: 0 18px 55px rgba(200,16,46,.7); }
.svs-play-pulse { position: absolute; width: 76px; height: 76px; border-radius: 50%; border: 2px solid rgba(200,16,46,.5); animation: svs-pulse 2.2s ease-out infinite; }
.svs-badge { position: absolute; bottom: 14px; right: 14px; z-index: 3; background: rgba(2,8,16,.85); color: #e8b84b; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 7px; border: 1px solid rgba(201,146,42,.3); letter-spacing: .06em; }
#svsVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svs-chapters { display: flex; flex-direction: column; gap: 6px; }
.svs-chapter { display: flex; align-items: flex-start; gap: 18px; padding: 18px 20px; border-radius: 16px; border: 1px solid rgba(201,146,42,.12); background: rgba(255,255,255,.03); transition: background .25s, border-color .25s, transform .25s; }
.svs-chapter:hover { background: rgba(201,146,42,.07); border-color: rgba(201,146,42,.35); transform: translateX(6px); }
.svs-ch-num { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, rgba(200,16,46,.25), rgba(201,146,42,.3)); border: 1px solid rgba(201,146,42,.25); display: grid; place-items: center; font-family: var(--font-display); font-size: 17px; font-weight: 600; color: #e8b84b; }
.svs-ch-body strong { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 600; color: #f0e8d0; margin-bottom: 5px; }
.svs-ch-body p { margin: 0; font-size: 14px; line-height: 1.65; color: rgba(220,208,182,.62); font-weight: 300; }


/* ============================================================
   37. KEYFRAME ANIMATIONS
   ============================================================ */
@keyframes drift        { from{transform:translateX(0)} to{transform:translateX(-80px)} }
@keyframes floaty       { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-24px)} }
@keyframes marquee      { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes borderMove   { from{background-position:0% 50%} to{background-position:100% 50%} }
@keyframes phoneShake   { 0%{transform:rotate(0)} 3%{transform:rotate(-15deg)} 6%{transform:rotate(15deg)} 9%{transform:rotate(-10deg)} 12%{transform:rotate(10deg)} 15%{transform:rotate(0)} 100%{transform:rotate(0)} }
@keyframes pulse-cta    { 0%,100%{box-shadow:0 10px 36px var(--red-glow)} 50%{box-shadow:0 18px 60px rgba(200,16,46,.58)} }
@keyframes pulse-gold   { 0%,100%{box-shadow:0 10px 36px rgba(212,168,67,.4)} 50%{box-shadow:0 20px 62px rgba(212,168,67,.62)} }
@keyframes shimmer-bar  { 0%{background-position:0%} 100%{background-position:200%} }
@keyframes float-pulse  { 0%{opacity:.65;transform:scale(1)} 70%{opacity:0;transform:scale(1.55)} 100%{opacity:0;transform:scale(1.55)} }
@keyframes svs-pulse    { 0%{transform:scale(1);opacity:.75} 70%{transform:scale(2);opacity:0} 100%{transform:scale(2);opacity:0} }
@keyframes bubble-in    { from{opacity:0;transform:translateY(10px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes typing-dot   { 0%,60%,100%{transform:translateY(0);opacity:.5} 30%{transform:translateY(-6px);opacity:1} }
@keyframes blink-dot    { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(29,185,84,.5)} 50%{opacity:.8;box-shadow:0 0 0 5px rgba(29,185,84,0)} }
@keyframes fadeIn       { from{opacity:0} to{opacity:1} }
@keyframes fadeUp       { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes accreditationScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes cardFloatRotate     { 0%{transform:rotate(-2deg) translateY(0)} 50%{transform:rotate(2deg) translateY(-6px)} 100%{transform:rotate(-2deg) translateY(0)} }
@keyframes reviewsScroll       { from{transform:translateX(0)} to{transform:translateX(-50%)} }


/* ============================================================
   38. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* — TABLET: 1100px — */
@media (max-width: 1100px) {
  .main-nav, .nav-actions { display: none; }
  .menu-toggle { display: inline-block; }
  .mobile-nav.active { display: flex; }
  .hero-inner, .cta-banner, .two-col-content, .contact-grid-advanced,
  .footer-grid, .service-page-grid, .wide-blog-grid,
  .gallery-grid-videos, .vacancy-grid, .strip-grid, .logo-strip,
  .icon-card-grid.four-col, .three-card-grid, .timeline-grid { grid-template-columns: 1fr 1fr; }
  .hero-card-grid { grid-template-columns: 1fr; }
  .hero-badge-panel, .hero-stat-stack { display: none; }
  .premium-strip-wrap { grid-template-columns: repeat(2, 1fr); }
  .testimonial-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .svs-layout { grid-template-columns: 1fr; gap: 40px; }
  .services-video-section { padding: 80px 0; }
}

/* — MOBILE: 820px — */
@media (max-width: 820px) {
  .topbar-inner, .topbar-left { flex-direction: column; align-items: flex-start; }
  .hero-inner, .cta-banner, .two-col-content, .contact-grid-advanced,
  .footer-grid, .service-page-grid, .wide-blog-grid,
  .gallery-grid-images, .gallery-grid-videos, .vacancy-grid,
  .strip-grid, .logo-strip, .icon-card-grid.four-col,
  .three-card-grid, .timeline-grid, .form-grid, .vacancies-grid { grid-template-columns: 1fr; }
  .service-feature-grid { grid-template-columns: 1fr; grid-template-areas: 'security' 'cleaning' 'patrol'; }
  .hero { min-height: auto; }
  .hero-inner { min-height: auto; padding: 56px 0 90px; }
  .hero-copy h1, .page-hero h1 { font-size: 40px; }
  .pull-up-strip { margin-top: 0; }
  .premium-strip-wrap { grid-template-columns: 1fr; padding: 18px; border-radius: 22px; }
  .premium-strip-card { min-height: auto; padding: 18px; }
  .security-figure-decor { display: none; }
  .contact-form-card { margin-left: 0; }
  * { cursor: auto !important; }
  .cursor-dot, .cursor-ring { display: none; }
  .floating-cta-stack { left: 14px; bottom: 14px; }
  .chat-widget { right: 12px; bottom: 12px; }
  .testimonial-cards-grid { grid-template-columns: 1fr; }
  .svs-layout { grid-template-columns: 1fr; }
  .services-video-section { padding: 64px 0; }
  .svs-chapter { padding: 14px 16px; }
  .svs-play-triangle, .svs-play-pulse { width: 60px; height: 60px; }
  .svs-play-triangle { font-size: 20px; }
  .faq-question { padding: 20px 22px; font-size: 16px; }
  .faq-answer { padding: 0 22px; }
  .faq-answer p { font-size: 15px; padding-bottom: 18px; }
  .gallery-grid { grid-template-columns: 1fr; }
  .review-card { width: 340px; min-height: 240px; }
  .reviews-track { gap: 20px; animation-duration: 24s; }
  .accreditation-section { padding: 80px 0; }
  .accreditation-card { width: 180px; height: 120px; border-radius: 20px; }
}


/* ============================================================
   39. Watch Us Work
   ============================================================ */

.services-video-section {
  position: relative;
  overflow: hidden;
}

/* make sure content sits above background effects */
.services-video-section .container {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════
   LAYOUT — video left, chapters right
══════════════════════════════════ */
.svs-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 48px;
}

@media (max-width: 768px) {
  .svs-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ── Video Player ── */
.svs-player {
  position: relative;
}

.svs-frame {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(4,13,30,.45);
  border: 1px solid rgba(255,255,255,.08);
  aspect-ratio: 16 / 9;
  width: 100%;
}

.svs-frame-inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.svs-poster {
  position: relative;
  width: 100%;
  height: 100%;
}

.svs-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.svs-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,13,30,.15), rgba(4,13,30,.55));
}

.svs-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 70px; height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--crimson), rgba(200,16,46,.8));
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 32px rgba(200,16,46,.5);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
  z-index: 2;
}

.svs-play-btn:hover {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 12px 40px rgba(200,16,46,.7);
}

.svs-play-triangle {
  color: white;
  font-size: 22px;
  margin-left: 4px;
}

.svs-play-pulse {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(200,16,46,.4);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.2); opacity: 0; }
}

.svs-badge {
  position: absolute;
  bottom: 14px; right: 14px;
  background: rgba(4,13,30,.75);
  backdrop-filter: blur(8px);
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  z-index: 2;
}

/* ── Chapters ── */
.svs-chapters {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.svs-chapter {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--radius-lg, 14px);
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  opacity: 0;
  transform: translateX(30px);
  animation: chapterSlideIn .5s ease forwards;
  animation-delay: calc(var(--i) * 0.12s);
  transition: background .3s, border-color .3s, transform .3s;
}

.svs-chapter:hover {
  transform: translateX(6px);
  background: rgba(212,168,67,.06);
  border-color: rgba(212,168,67,.25);
}

.svs-chapter.active {
  background: rgba(212,168,67,.10);
  border-color: rgba(212,168,67,.35);
}

.svs-chapter.active .svs-ch-num {
  background: linear-gradient(135deg, var(--crimson), var(--gold-light));
  color: white;
}

@keyframes chapterSlideIn {
  to { opacity: 1; transform: translateX(0); }
}

.svs-ch-num {
  min-width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(212,168,67,.12);
  border: 1px solid rgba(212,168,67,.22);
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 800;
  display: grid;
  place-items: center;
  letter-spacing: .05em;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .3s;
  flex-shrink: 0;
}

.svs-chapter:hover .svs-ch-num {
  transform: scale(1.15);
}

.svs-ch-body strong {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.svs-ch-body p {
  color: rgba(255,255,255,.55);
  font-size: 13px;
  margin: 0;
  line-height: 1.5;
}

/* ══════════════════════════════════
   ANIMATED GRADIENT MESH BACKGROUND
══════════════════════════════════ */
.services-video-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(200,16,46,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(212,168,67,.15) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 80%, rgba(26,54,120,.25) 0%, transparent 55%);
  background-size: 200% 200%;
  animation: meshMove 10s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

@keyframes meshMove {
  0%   { background-position: 0% 0%,   100% 0%,   50% 100%; }
  25%  { background-position: 30% 50%,  70% 30%,   20% 70%;  }
  50%  { background-position: 60% 20%,  40% 80%,   80% 30%;  }
  75%  { background-position: 20% 80%,  80% 50%,   40% 20%;  }
  100% { background-position: 50% 100%, 10% 60%,   90% 50%;  }
}

/* ══════════════════════════════════
   BACKGROUND ORBS
══════════════════════════════════ */
.svs-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .12;
  pointer-events: none;
  animation: orbFloat 12s ease-in-out infinite;
}

.orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(200,16,46,.7), transparent);
  top: -150px; left: -150px;
  animation-delay: 0s;
}

.orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(212,168,67,.7), transparent);
  bottom: -100px; right: -100px;
  animation-delay: -6s;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1);          }
  33%       { transform: translate(40px, -30px) scale(1.08); }
  66%       { transform: translate(-30px, 20px) scale(.94);  }
}

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media (max-width: 768px) {
  .svs-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ══════════════════════════════════
   FLOATING BADGES ON VIDEO
══════════════════════════════════ */
.svs-player {
  position: relative; /* needed for badge positioning */
}
.svs-float-badge {
  position: absolute;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.badge-1 {
  top: 18px; left: -20px;
  animation: badgeFloat 4s ease-in-out infinite;
}
.badge-2 {
  bottom: 80px; left: -30px;
  animation: badgeFloat 4s ease-in-out infinite;
  animation-delay: -1.3s;
}
.badge-3 {
  bottom: 20px; right: -10px;
  animation: badgeFloat 4s ease-in-out infinite;
  animation-delay: -2.6s;
}
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-8px); }
}

/* ============================================================
   21. TESTIMONIAL MARQUEE
   ============================================================ */
.testimonial-marquee-wrap {
  overflow: hidden; position: relative;
  background: linear-gradient(135deg, #040d1e 0%, #0a1c46 55%, #040d1e 100%);
}
.testimonial-marquee-wrap::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at top left, rgba(200,16,46,.16) 0%, transparent 48%),
    radial-gradient(ellipse at bottom right, rgba(212,168,67,.13) 0%, transparent 48%);
}
.marquee-row {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
}

.marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  padding: 28px 20px;        /* ← added horizontal padding */
  animation: marquee 28s linear infinite;
  align-items: stretch;      /* ← equal height cards */
}
.marquee-row:nth-child(2) .marquee-track { animation-direction: reverse; animation-duration: 32s; }
.marquee-row:hover .marquee-track { animation-play-state: paused; }
/* Individual testimonial card */
.marquee-card {
  width: 340px;
  flex-shrink: 0;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  padding: 26px;
  color: white;
  position: relative;
  backdrop-filter: blur(6px);
  transition: border-color .3s, background .3s, transform .3s;
  display: flex;             /* ← makes inner content stretch */
  flex-direction: column;
  justify-content: space-between;
}
.marquee-card:hover {
  border-color: rgba(212,168,67,.35);
  background: rgba(255,255,255,.08);
  transform: translateY(-4px);  /* ← subtle lift on hover */
}

/* push reviewer to bottom always */
.marquee-card p {
  margin: 18px 0 18px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,.78);
  flex: 1;                   /* ← quote takes remaining space */
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Large quote mark via ::before */
.marquee-card::before {
  content: '"'; position: absolute; top: 10px; left: 22px;
  font-size: 72px; line-height: 1; color: rgba(212,168,67,.25);
  font-family: Georgia, serif; pointer-events: none;
}
.marquee-card p { margin: 18px 0 18px; font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.78); }
.marquee-card .reviewer { display: flex; align-items: center; gap: 12px; }
.marquee-card .reviewer-info strong { display: block; font-family: var(--font-display); font-size: 15px; }
.marquee-card .reviewer-info small { color: rgba(255,255,255,.45); font-size: 12px; }
.marquee-card .stars { color: var(--gold); font-size: 14px; margin-bottom: 4px; letter-spacing: 2px; }
.reviewer-avatar {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(212,168,67,.3);
}
.reviewer-initials {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--gold));
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800;
  font-size: 17px; color: white; flex-shrink: 0;
}



 /* About Page */

 /* who section */
 .who {
  background: var(--off-white);
  color: var(--dark);
  padding: 100px 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

.who-left {
  min-width: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.who-h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.4rem, 4vw, 3.8rem);
  line-height: 1;
  letter-spacing: 1px;
  color: var(--dark);
  margin-bottom: 20px;
}
.who-h2 span { color: var(--gold-muted); }

.who-p {
  font-size: 0.97rem;
  color: #555;
  line-height: 1.8;
  font-weight: 300;
  margin-bottom: 14px;
}

.who-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-top: 32px;
}

.who-card {
  background: var(--card-bg);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 12px;
  padding: 20px 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transition: transform 0.3s, box-shadow 0.3s;
}
.who-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.1);
}

.who-card-tag {
  display: inline-block;
  background: #f5e9d0;
  color: var(--gold-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 50px;
  margin-bottom: 10px;
}

.who-card h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 6px;
}
.who-card p {
  font-size: 0.78rem;
  color: #777;
  line-height: 1.6;
  margin: 0;
}

.who-btns {
  display: flex;
  flex-direction: row;
  gap: 14px;
  margin-top: 28px;
  align-items: center;
  flex-wrap: nowrap;
}

.who-btns a:last-child {
  display: inline-block;
  border-radius: 50px;
  white-space: nowrap;
  padding: 12px 28px;
  border: 2px solid var(--dark);
  color: var(--dark);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.who-btns a:last-child:hover {
  background: var(--dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.who-right {
  position: relative;
  min-width: 0;
}

.who-img-frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: 500px;
}
.who-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.who-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,15,20,0.6) 0%, transparent 55%);
}

.who-img-stats {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.who-stat {
  background: rgba(255,255,255,0.93);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 10px 16px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  min-width: 80px;
}
.who-stat strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--dark);
}
.who-stat span {
  font-size: 0.65rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.who-img-badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  background: rgba(212,168,75,0.96);
  color: var(--dark);
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 500;
  backdrop-filter: blur(8px);
}
.who-img-badge span {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  margin-bottom: 3px;
}

@media (max-width: 900px) {
  .who {
    grid-template-columns: 1fr;
    padding: 60px 24px;
    gap: 40px;
  }
  .who-cards {
    grid-template-columns: 1fr;
  }
  .who-img-frame {
    height: 320px;
  }
  .who-btns {
    flex-wrap: wrap;
  }
}
.who .tag-label {
  font-size: 0.7rem;
  padding: 5px 14px;
  width: auto;
  display: inline-block;
}

 /* ── APPROACH ── */
.approach {
  background: var(--navy);
  color: #fff;
  padding: 100px 60px;
}

.approach .tag-label {
  background: rgba(212,168,75,0.15);
  color: var(--gold);
  border: 1px solid rgba(212,168,75,0.3);
  font-size: 0.7rem;
  padding: 5px 14px;
  display: inline-block;
  width: auto;
}

.approach .section-heading h2 {
  color: #fff;
}

.approach-h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  letter-spacing: 1px;
  color: #fff;
  margin-bottom: 12px;
}

.approach-sub {
  color: rgba(255,255,255,0.6);
  font-size: 0.95rem;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.7;
}

.approach-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 60px auto 0;
  
}

.step-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 36px 28px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
}

.step-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red), var(--red-glow));
}

.step-card:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.step-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 4.5rem;
  color: rgba(212,168,75,0.1);
  line-height: 1;
  position: absolute;
  top: 16px;
  right: 20px;
  letter-spacing: 2px;
  pointer-events: none;
}

.step-icon {
  font-size: 1.8rem;
  margin-bottom: 16px;
  display: block;
}

.step-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

.step-card p {
  font-size: 0.83rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.75;
  margin: 0;
}

@media (max-width: 900px) {
  .approach {
    padding: 60px 24px;
  }
  .approach-steps {
    grid-template-columns: 1fr;
  }
}

  /* ── VALUES ── */
.values {
  background: linear-gradient(135deg, #f8f7f4, #fff8ee, #f0f4ff, #fff5f5);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
  padding: 100px 60px;
  position: relative;
  overflow: hidden;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Floating blinking circles */
.values::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(212,168,75,0.12) 0%, transparent 70%);
  border-radius: 50%;
  top: -100px;
  right: -100px;
  animation: floatOrb 6s ease-in-out infinite;
  pointer-events: none;
}

.values::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(139,26,26,0.08) 0%, transparent 70%);
  border-radius: 50%;
  bottom: -80px;
  left: -80px;
  animation: floatOrb 8s ease-in-out infinite reverse;
  pointer-events: none;
}

@keyframes floatOrb {
  0%   { transform: translateY(0px) scale(1); opacity: 0.6; }
  50%  { transform: translateY(-30px) scale(1.1); opacity: 1; }
  100% { transform: translateY(0px) scale(1); opacity: 0.6; }
}
  .values-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 80px;
    align-items: start;
  }
  .values-left .section-tag { margin-bottom: 24px; }
  .values-h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.8rem, 4vw, 3.8rem);
    line-height: 0.95;
    letter-spacing: 1px;
    color: var(--off-white);
    margin-bottom: 24px;
  }
  .values-h2 em { font-style: normal; color: var(--red); }
  .values-p {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.75;
  }
  .values-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .val-item {
    background: var(--dark3);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 28px 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: border-color 0.3s;
  }
  .val-item:hover { border-color: rgba(212,168,75,0.3); }
  .val-dot {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(212,168,75,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 2px;
  }
  .val-item h4 {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--off-white);
    margin-bottom: 6px;
  }
  .val-item p {
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.6;
  }

  /* ── TEAM ── */
  .team {
    background: var(--dark2);
    padding: 120px 60px;
    text-align: center;
  }
  .team-h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    letter-spacing: 1px;
    color: var(--off-white);
    margin-bottom: 12px;
  }
  .team-sub {
    color: var(--muted);
    font-size: 0.95rem;
    max-width: 480px;
    margin: 0 auto 60px;
    line-height: 1.7;
  }
  .team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .team-card {
    background: var(--dark3);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.3s, border-color 0.3s;
  }
  .team-card:hover { transform: translateY(-4px); border-color: rgba(212,168,75,0.3); }
  .team-avatar {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--dark4), var(--dark3));
    font-size: 3rem;
    position: relative;
    overflow: hidden;
  }
  .team-avatar::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0;
    transition: opacity 0.3s;
  }
  .team-card:hover .team-avatar::after { opacity: 1; }
  .team-info { padding: 20px; }
  .team-info h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--off-white);
    margin-bottom: 4px;
  }
  .team-info span {
    font-size: 0.75rem;
    color: var(--gold);
    letter-spacing: 0.5px;
  }

  /* ── CTA ── */
  .cta-section {
    background: var(--dark);
    padding: 100px 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .cta-bg {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(212,168,75,0.07) 0%, transparent 60%);
  }
  .cta-section h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 6vw, 5.5rem);
    letter-spacing: 2px;
    color: var(--off-white);
    margin-bottom: 16px;
    position: relative;
  }
  .cta-section h2 span { color: var(--red); }
  .cta-section p {
    color: var(--muted);
    font-size: 1rem;
    max-width: 460px;
    margin: 0 auto 40px;
    line-height: 1.7;
    position: relative;
  }
  .cta-btns {
    display: flex;
    gap: 16px;
    justify-content: center;
    position: relative;
  }
  .btn-primary {
    background: var(--gold);
    color: var(--dark);
    border: none;
    padding: 16px 36px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 20px;
    transition: background 0.3s, transform 0.2s;
  }
  .btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); }
  .btn-outline {
    background: transparent;
    color: var(--off-white);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 16px 36px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 20px;
    transition: border-color 0.3s, color 0.3s;
  }
  .btn-outline:hover { border-color: var(--gold); color: var(--gold); }

  /* ── SCROLL REVEAL ── */
  .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .reveal.visible { opacity: 1; transform: translateY(0); }

  

/* ============================================================
   28. SERVICES OVERVIEW PAGE (services.html)
   ============================================================ */
/* Services tab navigation */
.services-tab-nav {
  display: flex; justify-content: center; gap: 12px;
  margin-bottom: 60px; flex-wrap: wrap;
}
.srv-tab-btn {
  padding: 13px 26px; border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.18);
  background: transparent;
  color: rgba(255,255,255,.7);
  cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: .04em;
  transition: all .28s ease;
}
.srv-tab-btn:hover { border-color: rgba(212,168,67,.5); color: white; background: rgba(212,168,67,.08); }
.srv-tab-btn.active {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--navy); border-color: transparent;
  box-shadow: 0 8px 28px rgba(212,168,67,.3);
}
/* Service content panels */
.srv-content { display: none; animation: fadeUp .45s ease; }
.srv-content.active { display: block; }
/* Service detail layout: text + image */
.srv-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.srv-image { border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 28px 70px rgba(4,13,30,.3); }
.srv-image img { width: 100%; height: 480px; object-fit: cover; display: block; transition: transform .5s ease; }
.srv-image:hover img { transform: scale(1.04); }
.srv-text h2 { font-family: var(--font-display); font-size: clamp(32px, 4vw, 50px); font-weight: 800; color: white; line-height: 1.1; margin-bottom: 16px; }
.srv-text p { color: rgba(255,255,255,.68); font-size: 17px; line-height: 1.8; margin-bottom: 26px; }
/* Feature list in service detail */
.srv-features { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
.srv-features li { display: flex; align-items: flex-start; gap: 12px; color: rgba(255,255,255,.82); font-size: 16px; line-height: 1.5; }
.srv-features li::before { content: '✓'; color: var(--gold); font-weight: 800; font-size: 14px; flex-shrink: 0; margin-top: 2px; }
/* Sub-service cards */
.srv-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 60px; }
.srv-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg); padding: 28px;
  color: white;
  transition: border-color .3s, background .3s, transform .3s;
}
.srv-card:hover { border-color: rgba(212,168,67,.35); background: rgba(212,168,67,.06); transform: translateY(-5px); }
.srv-card-icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 26px; margin-bottom: 16px; background: linear-gradient(135deg, rgba(200,16,46,.2), rgba(212,168,67,.25)); border: 1px solid rgba(212,168,67,.2); }
.srv-card h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.srv-card p { color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.7; }







/* =========================
   RESPONSIVE DESIGN
========================= */

/* Tablet */
@media (max-width: 992px) {
  .ukds-insights-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .ukds-insights-container {
    grid-template-columns: 1fr;
  }
}








/* ============================================================
   29. INDIVIDUAL SERVICE PAGES
   Used on: security.html, cleaning.html, construction.html,
            it-services.html, hospitality.html
   ============================================================ */
/* Service page hero with stats */
.service-page-hero-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 40px;
}
.sph-stat {
  padding: 20px 24px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(212,168,67,.18);
  border-radius: var(--radius-md);
}
.sph-stat .num { font-family: var(--font-display); font-size: 42px; font-weight: 800; color: var(--gold-light); display: block; line-height: 1; }
.sph-stat .lbl { color: rgba(255,255,255,.55); font-size: 13px; margin-top: 6px; letter-spacing: .08em; }
/* Process steps (used on service pages) */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.process-step {
  text-align: center; padding: 34px 24px;
  background: white; border-radius: var(--radius-xl);
  border: 1px solid rgba(4,13,30,.07);
  box-shadow: var(--shadow); position: relative;
  transition: transform .3s, box-shadow .3s;
}
.process-step:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(4,13,30,.14); }
/* Step number badge */
.step-num {
  width: 60px; height: 60px; border-radius: 20px;
  margin: 0 auto 18px;
  background: linear-gradient(135deg, var(--red), var(--gold));
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 24px; font-weight: 800; color: white;
  box-shadow: 0 10px 28px var(--red-glow);
}
.process-step h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-bottom: 10px; color: var(--navy); }
.process-step p { color: var(--muted); font-size: 14px; line-height: 1.7; }
/* Connecting line between steps */
.process-step:not(:last-child)::after {
  content: "→";
  position: absolute; right: -16px; top: 50%;
  transform: translateY(-50%);
  color: var(--gold); font-size: 20px; z-index: 2;
  font-weight: 800;
}
/* Service scope list (used on all service detail pages) */
.scope-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.scope-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px; border-radius: var(--radius-md);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: white;
  transition: border-color .3s, background .3s;
}
.scope-item:hover { border-color: rgba(212,168,67,.3); background: rgba(212,168,67,.06); }
.scope-icon { font-size: 26px; flex-shrink: 0; }
.scope-item h4 { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin-bottom: 5px; }
.scope-item p { color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.6; margin: 0; }

/* ============================================================
   31. BLOG PAGE + BLOG POST PAGES
   .blog-grid / .wide-blog-grid — 3-col cards on blog.html
   .blog-post-*   — used only on individual blog post pages
   ============================================================ */
.blog-grid { display: grid; gap: 28px; }
.wide-blog-grid { grid-template-columns: repeat(3, 1fr); }
.blog-card {
  background: white;
  border: 1px solid rgba(4,13,30,.07);
  border-radius: var(--radius-xl);
  overflow: hidden; box-shadow: var(--shadow);
  transition: transform .32s, box-shadow .32s;
}
.blog-card:hover { transform: translateY(-8px); box-shadow: 0 28px 70px rgba(4,13,30,.14); }
.blog-image { height: 240px; background-size: cover; background-position: center; overflow: hidden; }
.blog-body { padding: 26px; }
.blog-body h3 { margin: 12px 0 10px; font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--navy); }
.blog-body p { color: var(--muted); font-size: 15px; line-height: 1.7; margin-bottom: 18px; }
.text-link { color: var(--red); font-weight: 700; font-family: var(--font-display); font-size: 14px; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 5px; transition: gap .2s, color .2s; }
.text-link:hover { gap: 10px; color: var(--navy); }
/* Blog meta (date, category) */
.blog-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.blog-date { color: var(--muted); font-size: 13px; }
/* Blog post page: article layout */
.blog-post-layout { display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; }
.blog-post-body { background: white; border-radius: var(--radius-xl); padding: 50px; box-shadow: var(--shadow); }
.blog-post-body h2 { font-family: var(--font-display); font-size: 32px; font-weight: 800; color: var(--navy); margin: 36px 0 16px; }
.blog-post-body h3 { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--navy); margin: 28px 0 12px; }
.blog-post-body p { color: var(--muted); font-size: 17px; line-height: 1.8; margin-bottom: 22px; }
.blog-post-body ul { padding-left: 0; list-style: none; margin-bottom: 22px; }
.blog-post-body ul li { padding: 8px 0 8px 22px; color: var(--muted); font-size: 16px; line-height: 1.7; position: relative; }
.blog-post-body ul li::before { content: '✓'; position: absolute; left: 0; color: var(--red); font-weight: 800; }
.blog-post-cover { width: 100%; height: 400px; object-fit: cover; border-radius: var(--radius-xl); margin-bottom: 36px; box-shadow: var(--shadow); }
/* Blog sidebar */
.blog-sidebar { position: sticky; top: 100px; }
.sidebar-widget { background: white; border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow); margin-bottom: 24px; }
.sidebar-widget h4 { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--navy); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid rgba(200,16,46,.12); }
.related-post { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid rgba(4,13,30,.07); }
.related-post:last-child { border-bottom: none; }
.related-post-img { width: 72px; height: 60px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.related-post h5 { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 4px; line-height: 1.4; }
.related-post p { color: var(--muted); font-size: 12px; margin: 0; }
.related-post a { text-decoration: none; }
.related-post a:hover h5 { color: var(--red); }


/* hero section */
/*newcotact.css all code is here*/
/* ── Keyframe: vach-fadeUp ──────────────────────────────────────
   Used by : .vach__stats  (animation: vach-fadeUp .75s ease both .44s)
   Effect  : Fades the stats row up from 22 px below on page load.
---------------------------------------------------------------- */
@keyframes vach-fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Keyframe: vach-linePulse ───────────────────────────────────
   Used by : .vach__deco-line
             (animation: vach-linePulse 3.5s ease-in-out infinite)
   Effect  : Pulses the decorative gold line between
             opacity 0.35 and 0.9 on a continuous loop.
---------------------------------------------------------------- */
@keyframes vach-linePulse {
  0%,100% { opacity: .35; }
  50%     { opacity: .9;  }
}

/* ── Keyframe: vach-scrollBounce ────────────────────────────────
   Used by : .vach__scroll-line
             (animation: vach-scrollBounce 2.2s ease-in-out infinite)
   Effect  : Bobs the scroll-indicator line down by 8 px and back.
---------------------------------------------------------------- */
@keyframes vach-scrollBounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(8px); }
}

/* ── .vach__deco-line ───────────────────────────────────────────
   HTML    : <div class="vach__deco-line" aria-hidden="true"></div>
   Location: Direct child of .page-hero, sits on the right side.
   Purpose : Thin animated vertical gold line — pure decoration.
             The ::before and ::after pseudo-elements add a small
             filled circle at each end of the line.
---------------------------------------------------------------- */
.vach__deco-line {
  position: absolute;
  top: 14%; right: 7%;
  width: 1px; height: 50%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(212,168,67,.45) 30%,
    rgba(212,168,67,.45) 70%,
    transparent
  );
  z-index: 4;
  animation: vach-linePulse 3.5s ease-in-out infinite;
  pointer-events: none;
}

/* Gold dot cap at the TOP of the decorative line */
.vach__deco-line::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(212,168,67,.8);
  top: 0;
}

/* Gold dot cap at the BOTTOM of the decorative line */
.vach__deco-line::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(212,168,67,.8);
  bottom: 0;
}

/* ── .vach__stats ───────────────────────────────────────────────
   HTML    : <div class="vach__stats"> … </div>
   Location: Inside .container inside .page-hero, below price badge.
   Purpose : Flex row wrapper that holds all four stat blocks
             (4hr / Free / UK / 0333).
---------------------------------------------------------------- */
.vach__stats {
  display: flex;
  gap: 0;
  animation: vach-fadeUp .75s ease both .44s;
}

/* ── .vach__stat ────────────────────────────────────────────────
   HTML    : <div class="vach__stat"> … </div>  (appears ×4)
   Location: Direct children of .vach__stats.
   Purpose : Individual stat block. Right padding + border create
             a visual divider between stats.
---------------------------------------------------------------- */
.vach__stat {
  padding: 0 36px 0 0;
  margin-right: 36px;
  border-right: 1px solid rgba(255,255,255,.12);
}

/* Remove right border and spacing from the last stat block */
.vach__stat:last-child {
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}

/* ── .vach__stat-num ────────────────────────────────────────────
   HTML    : <div class="vach__stat-num">4hr</div>  (appears ×4)
   Location: First child inside each .vach__stat.
   Purpose : Large gold number / value label (e.g. "4hr", "Free").
---------------------------------------------------------------- */
.vach__stat-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(22px, 3vw, 40px);
  font-weight: 700;
  color: #d4a843;
  line-height: 1;
}

/* ── .vach__stat-label ──────────────────────────────────────────
   HTML    : <div class="vach__stat-label">Response Time</div> (×4)
   Location: Second child inside each .vach__stat.
   Purpose : Small uppercase caption sitting beneath the stat number.
---------------------------------------------------------------- */
.vach__stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-top: 7px;
}

/* ── .vach__scroll ──────────────────────────────────────────────
   HTML    : <div class="vach__scroll" aria-hidden="true"> … </div>
   Location: Inside .page-hero, absolutely pinned to bottom-centre.
   Purpose : "Scroll" label and animated line hinting to scroll down.
---------------------------------------------------------------- */
.vach__scroll {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  animation: vach-fadeUp .8s ease both .7s;
}

/* ── .vach__scroll-line ─────────────────────────────────────────
   HTML    : <div class="vach__scroll-line"></div>
   Location: First child of .vach__scroll.
   Purpose : Thin gold-to-transparent line that bounces vertically
             to draw the eye downward.
---------------------------------------------------------------- */
.vach__scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, rgba(212,168,67,.7), transparent);
  animation: vach-scrollBounce 2.2s ease-in-out infinite;
}