/* ================================================================
FILE: assets/css/style.css
PURPOSE: Complete stylesheet for Solid Axis website
PROJECT: Solid Axis General Contracting LLC Website
================================================================ */

/* ════════════════════════════════════════════════════════════════ */
/* TABLE OF CONTENTS -- assets/css/style.css                              */
/* ════════════════════════════════════════════════════════════════ */
/*  1. DESIGN TOKENS / ROOT                               (line ~  60) */
/*  2. RESET & BASE                                       (line ~ 150) */
/*  3. SKIP TO CONTENT (A11Y)                             (line ~ 193) */
/*  4. PRELOADER                                          (line ~ 210) */
/*  5. NAVBAR                                             (line ~ 240) */
/*  6. HERO SECTION (HOMEPAGE)                            (line ~ 468) */
/*  7. PAGE HERO (INNER PAGES)                            (line ~ 718) */
/*  8. SECTION PADDING                                    (line ~ 781) */
/*  9. SECTION WITH BACKGROUND IMAGE                      (line ~ 790) */
/* 10. WHY CHOOSE SOLID AXIS                              (line ~ 816) */
/* 11. SECTION TITLES                                     (line ~ 958) */
/* 12. SERVICE CARDS                                      (line ~ 998) */
/* 13. FEATURE BOXES                                      (line ~1096) */
/* 14. STATS SECTION                                      (line ~1146) */
/* 15. PROJECT CARDS                                      (line ~1193) */
/* 16. FILTER BAR                                         (line ~1293) */
/* 17. CLIENT SECTORS                                     (line ~1326) */
/* 18. CTA BANNER                                         (line ~1361) */
/* 19. ABOUT PAGE                                         (line ~1418) */
/* 20. SERVICE SUB-PAGES                                  (line ~1556) */
/* 21. CONTACT PAGE                                       (line ~1723) */
/* 22. FOOTER                                             (line ~1813) */
/* 23. SCROLL ANIMATIONS                                  (line ~1926) */
/* 24. TOAST NOTIFICATIONS                                (line ~1945) */
/* 25. 404 PAGE                                           (line ~1975) */
/* 26. UTILITY CLASSES                                    (line ~2003) */
/* 27. RESPONSIVE FINE-TUNING                             (line ~2029) */
/* 28. FLOATING CONTACT BUTTONS                           (line ~2069) */
/* 29. SOCIAL SHARE BUTTONS                               (line ~2164) */
/* 30. PREMIUM LUXURY REFINEMENTS (V3)                    (line ~2206) */
/* 31. FLOATING CONTACT / SOCIAL BAR (V3)                 (line ~2431) */
/* 32. PROJECT GALLERY (V3)                               (line ~2544) */
/* 33. CONTACT CTA STRIP                                  (line ~2691) */
/* 34. PROJECT DETAIL PAGE                                (line ~2809) */
/* 35. PAGE HERO (PREMIUM)                                (line ~2905) */
/* 36. FOOTER (PREMIUM DARK + GOLD)                       (line ~2950) */
/* 37. HERO SECTION (PREMIUM REFINEMENT)                  (line ~3053) */
/* 38. CTA BANNER (PREMIUM DARK)                          (line ~3168) */
/* 39. STATS SECTION (REFINED)                            (line ~3218) */
/* 40. CLIENT SECTORS (REFINED CHIPS)                     (line ~3259) */
/* 41. WHY CHOOSE (PREMIUM)                               (line ~3292) */
/* 42. PROJECT CARDS (PREMIUM)                            (line ~3315) */
/* 43. SERVICE PAGE REFINEMENTS                           (line ~3387) */
/* 44. CONTACT PAGE FORM REFINEMENT                       (line ~3426) */
/* 45. FORM TOAST                                         (line ~3500) */
/* 46. SCROLLBAR                                          (line ~3530) */
/* 47. BODY TEXT REFINEMENT                               (line ~3543) */
/* 48. APPENDED BLOCK (T3 / T5 / T8.7)                    (line ~3554) */
/* ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   DESIGN TOKENS — Solid Axis (Light / Luxury / Editorial)
   ════════════════════════════════════════════════════════════════
   PHILOSOPHY:
   • Editorial-grade premium feel — think "high-end architecture
     firm brochure" not "cheap contractor website"
   • Warm ivory / paper-white base instead of cold grey
   • Deep navy as primary brand color, used as a refined accent
     (never a full-bleed section background)
   • Brushed-gold / champagne accent (#B08D57) for premium cues
     — used SPARINGLY: thin lines, eyebrow labels, micro-borders
   • Layered, soft shadows (not flat)
   • Generous letter-spacing on headings, tighter on body
   • The site's logo carries red + green + black — these colors
     are NOT used in the UI; they live only inside the logo mark
   ════════════════════════════════════════════════════════════════ */
:root {
  /* ─── Brand ─── */
  --color-primary:        #0A2540;   /* deep editorial navy — primary accent */
  --color-primary-hover:  #14365E;   /* slightly lifted navy for hover */
  --color-primary-soft:   #F1F4F8;   /* very light navy wash for tints */
  --color-accent:         #B08D57;   /* champagne gold — premium accent */
  --color-accent-hover:   #92724A;   /* deeper gold on hover */
  --color-accent-soft:    #F5EFE6;   /* pale champagne wash */

  /* ─── Backgrounds ─── */
  --color-bg:             #FBFAF7;   /* warm ivory page bg (not pure white) */
  --color-bg-subtle:      #F4F1EC;   /* warm beige alt sections */
  --color-surface:        #FFFFFF;   /* cards stay pure white */
  --color-surface-elev:   #FFFFFF;   /* elevated cards / modals */

  /* ─── Text ─── */
  --color-text:           #0A1B2E;   /* near-black navy ink */
  --color-text-muted:     #5C6B7E;   /* warm slate for muted */
  --color-text-soft:      #8B95A3;   /* softer still for tertiary */
  --color-on-primary:     #FFFFFF;
  --color-on-accent:      #FFFFFF;

  /* ─── Borders ─── */
  --color-border:         #E6E2D9;   /* warm hairline border */
  --color-border-strong:  #D4CFC2;   /* slightly stronger warm border */

  /* ─── Status ─── */
  --color-success:        #1F7A4D;
  --color-error:          #B91C1C;
  --color-warning:        #B45309;
  --color-whatsapp:       #25D366;
  --color-whatsapp-dark:  #128C7E;

  /* ─── Aliases for back-compat ─── */
  --color-primary-dark:   var(--color-primary-hover);
  --color-accent-dark:    var(--color-accent-hover);
  --color-secondary:      var(--color-text);
  --color-white:          var(--color-surface);
  --color-bg-alt:         var(--color-bg-subtle);

  /* ─── Typography ─── */
  --font-family:          'Inter', Arial, Helvetica, sans-serif;
  --font-heading:         'Inter', Arial, Helvetica, sans-serif;
  --font-display:         'Inter', Arial, Helvetica, sans-serif; /* was Playfair Display — switched to Inter per owner request for a clean, readable sans-serif look */
  --letter-tight:         -0.02em;
  --letter-normal:        0;
  --letter-wide:          0.08em;
  --letter-wider:         0.18em;

  /* ─── Motion ─── */
  --transition-speed:     0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-luxe:      0.45s cubic-bezier(0.16, 1, 0.3, 1);

  /* ─── Shadows (layered, soft, premium) ─── */
  --shadow-xs:            0 1px 2px rgba(10, 27, 46, 0.04);
  --shadow-sm:            0 1px 3px rgba(10, 27, 46, 0.05), 0 1px 2px rgba(10, 27, 46, 0.04);
  --shadow-card:          0 2px 4px rgba(10, 27, 46, 0.03), 0 4px 12px rgba(10, 27, 46, 0.04);
  --shadow-card-hover:    0 8px 24px rgba(10, 27, 46, 0.10), 0 2px 6px rgba(10, 27, 46, 0.06);
  --shadow-lift:          0 20px 50px rgba(10, 27, 46, 0.14), 0 6px 14px rgba(10, 27, 46, 0.07);
  --shadow-navbar:        0 1px 0 rgba(10, 27, 46, 0.06), 0 4px 16px rgba(10, 27, 46, 0.04);
  --shadow-glow-accent:   0 6px 20px rgba(176, 141, 87, 0.25);

  /* ─── Radii ─── */
  --border-radius:        14px;
  --border-radius-lg:     20px;
  --border-radius-btn:    10px;
  --border-radius-pill:   999px;

  /* ─── Layout ─── */
  --container-max:        1240px;
  --section-padding-y:    6rem;
  --section-padding-y-sm: 4rem;
}

/* === RESET & BASE === */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-speed);
}

a:hover {
  color: var(--color-primary-hover);
}

::selection {
  background-color: var(--color-primary);
  color: #FFFFFF;
}

/* === SKIP TO CONTENT (Accessibility) === */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 0.75rem 1.5rem;
  z-index: 10000;
  font-weight: 600;
  transition: top 0.3s;
}

.skip-to-content:focus {
  top: 0;
}

/* === PRELOADER === */
#preloader {
  position: fixed;
  inset: 0;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#preloader.hidden {
  opacity: 0;
  visibility: hidden;
}

.preloader-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* === NAVBAR === */
.navbar {
  padding: 1rem 0;
  transition: all 0.3s ease;
  background: transparent;
  z-index: 1030;
}

.navbar-scrolled {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow: var(--shadow-navbar);
  padding: 0.6rem 0;
}

.navbar-scrolled .nav-link {
  color: var(--color-text) !important;
  font-weight: 500;
}

.navbar-scrolled .nav-link:hover,
.navbar-scrolled .nav-link.active {
  color: var(--color-primary) !important;
}

.navbar-scrolled .navbar-brand img {
  filter: none;
}

.navbar-brand img {
  /* T7: enlarged logo (was 50px). Width auto preserves the 600×478 aspect ratio. */
  height: 64px;
  width: auto;
  transition: height 0.3s ease;
}

.navbar-scrolled .navbar-brand img {
  /* T7: scrolled/solid state (was 42px). */
  height: 52px;
}

.nav-link {
  font-weight: 500;
  font-size: 0.95rem;
  color: #FFFFFF !important;
  padding: 0.5rem 1rem !important;
  transition: color var(--transition-speed);
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transition: transform var(--transition-speed);
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-primary) !important;
}

/* Dropdown */
.dropdown-menu {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.1);
  padding: 0.5rem;
  margin-top: 0.5rem !important;
  background: #FFFFFF;
  min-width: 260px;
  animation: dropdownFade 0.25s ease;
}

@keyframes dropdownFade {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
  padding: 0.6rem 1rem;
  font-size: 0.92rem;
  color: var(--color-text);
  transition: all var(--transition-speed);
  border-radius: 6px;
  margin: 0;
  width: 100%;
  font-weight: 500;
}

.dropdown-item:hover {
  background: var(--color-bg-subtle);
  color: var(--color-primary);
  padding-left: 1.5rem;
}

.dropdown-item i {
  color: var(--color-accent);
  width: 20px;
  text-align: center;
}

.dropdown-toggle::after {
  vertical-align: 0.15em;
}

/* CTA Button in Nav */
.btn-sa-primary {
  background: var(--color-primary);
  color: #FFFFFF !important;
  border: none;
  font-weight: 600;
  padding: 0.65rem 1.5rem;
  border-radius: var(--border-radius-btn);
  transition: all var(--transition-speed);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgba(0, 39, 85, 0.12);
}

.btn-sa-primary:hover {
  background: var(--color-primary-hover);
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 39, 85, 0.25);
}

.btn-sa-outline {
  background: transparent;
  color: var(--color-primary) !important;
  border: 1.5px solid var(--color-primary);
  font-weight: 600;
  padding: 0.6rem 1.5rem;
  border-radius: var(--border-radius-btn);
  transition: all var(--transition-speed);
}

.btn-sa-outline:hover {
  background: var(--color-primary);
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

/* Navbar on non-hero pages (always solid) */
.navbar-solid {
  background: var(--color-white) !important;
  box-shadow: var(--shadow-navbar);
}

.navbar-solid .nav-link {
  color: var(--color-secondary) !important;
}

.navbar-solid .nav-link:hover,
.navbar-solid .nav-link.active {
  color: var(--color-accent) !important;
}

.navbar-solid .navbar-brand img {
  /* T7: solid navbar state (was 42px). */
  height: 52px;
}

/* Mobile toggler */
.navbar-toggler {
  border: none;
  padding: 0.5rem;
  font-size: 1.3rem;
  color: var(--color-white);
}

.navbar-scrolled .navbar-toggler,
.navbar-solid .navbar-toggler {
  color: var(--color-secondary);
}

.navbar-toggler:focus {
  box-shadow: none;
}

/* Mobile nav background */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background: var(--color-white);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-top: 1rem;
    box-shadow: var(--shadow-card);
  }

  .nav-link {
    color: var(--color-secondary) !important;
    padding: 0.65rem 1rem !important;
  }

  .nav-link:hover,
  .nav-link.active {
    color: var(--color-accent) !important;
  }

  .nav-link::after {
    display: none;
  }

  .btn-sa-primary {
    display: inline-block;
    margin-top: 0.5rem;
  }

  /* T7: cap logo size on mobile so the brand never collides with the toggler or wraps. */
  .navbar-brand img,
  .navbar-scrolled .navbar-brand img,
  .navbar-solid .navbar-brand img {
    height: 48px;
  }
}

/* === HERO SECTION === */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(135deg, #1a3a6b 0%, #2e5a8f 50%, #1a3a6b 100%);
  overflow: hidden;
}

/* ── Hero slider ── */
.hero-slider-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-slider-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}
.hero-slider-slide.active {
  opacity: 1;
}
.hero-slider-dots {
  position: absolute;
  bottom: 50%;
  right: 24px;
  transform: translateY(50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 5;
}
.hero-slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}
.hero-slider-dot.active {
  background: #FFFFFF;
  transform: scale(1.4);
}
.hero-slider-dot:hover {
  background: rgba(255, 255, 255, 0.8);
}
@media (max-width: 767.98px) {
  .hero-slider-dots { display: none; }
}

.hero-bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  /* Soft dark gradient only at the bottom for text legibility — image stays visible */
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.35) 0%, rgba(15, 23, 42, 0.25) 50%, rgba(15, 23, 42, 0.55) 100%);
}

.hero-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: 
    linear-gradient(30deg, var(--color-accent) 12%, transparent 12.5%, transparent 87%, var(--color-accent) 87.5%, var(--color-accent)),
    linear-gradient(150deg, var(--color-accent) 12%, transparent 12.5%, transparent 87%, var(--color-accent) 87.5%, var(--color-accent)),
    linear-gradient(30deg, var(--color-accent) 12%, transparent 12.5%, transparent 87%, var(--color-accent) 87.5%, var(--color-accent)),
    linear-gradient(150deg, var(--color-accent) 12%, transparent 12.5%, transparent 87%, var(--color-accent) 87.5%, var(--color-accent));
  background-size: 80px 140px;
  background-position: 0 0, 0 0, 40px 70px, 40px 70px;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 750px;
  padding-top: 6rem;
  padding-bottom: 3rem;
  margin: auto 0;
  width: 100%;
}

.hero-content h1 {
  font-size: 3.5rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.hero-content h1 .text-accent {
  color: #FFFFFF;
  position: relative;
  display: inline-block;
}
.hero-content h1 .text-accent::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 3px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 2px;
}

.hero-subtext {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 2rem;
  max-width: 580px;
  line-height: 1.7;
  font-weight: 400;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
  padding: 0.45rem 1.1rem;
  border-radius: var(--border-radius-pill);
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  letter-spacing: 0.04em;
}

.btn-hero-light {
  background: var(--color-primary);
  color: #FFFFFF !important;
  border: none;
  font-weight: 600;
  padding: 0.85rem 2.2rem;
  border-radius: var(--border-radius-btn);
  transition: all var(--transition-speed);
  font-size: 1rem;
  box-shadow: 0 4px 14px rgba(0, 39, 85, 0.3);
}

.btn-hero-light:hover,
.btn-hero-light:focus-visible {
  background: var(--color-primary-hover);
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 39, 85, 0.4);
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

.btn-hero-light:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 39, 85, 0.4);
}

.hero-section .btn-outline-light {
  border-width: 2px;
  padding: 0.8rem 2rem;
  font-weight: 600;
  border-radius: var(--border-radius-btn);
  transition: all 0.3s ease;
}

.hero-section .btn-outline-light:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white) !important;
  transform: translateY(-2px);
}

/* Hero Stats Bar — frosted glass, premium */
.hero-stats-bar {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  z-index: 2;
  flex-shrink: 0;
}

.hero-stat-item {
  text-align: center;
  padding: 1.25rem 0;
}

.hero-stat-number {
  font-size: 1.75rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
}

.hero-stat-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.25rem;
}

@media (max-width: 767.98px) {
  .hero-content h1 {
    font-size: 2.25rem;
  }
  .hero-content {
    padding-top: 5rem;
    padding-bottom: 2.5rem;
  }
  .hero-subtext {
    font-size: 1rem;
  }
  .hero-stat-number {
    font-size: 1.25rem;
  }
  .hero-stat-label {
    font-size: 0.7rem;
  }
  /* On mobile the 4 stats wrap to 2x2 — make sure the taller stacked bar still doesn't cover hero text */
  .hero-stats-bar {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .hero-stat-item {
    padding: 0.75rem 0;
  }
}

/* === PAGE HERO (For inner pages) === */
.page-hero {
  position: relative;
  padding: 10rem 0 4rem;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  overflow: hidden;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-hero .hero-overlay {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0.6) 100%);
}

.page-hero h1 {
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 2;
}

.page-hero .breadcrumb {
  position: relative;
  z-index: 2;
  margin-bottom: 0;
}

.page-hero .breadcrumb-item a {
  color: #FFFFFF;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

.page-hero .breadcrumb-item.active {
  color: rgba(255, 255, 255, 0.7);
}

.page-hero .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.4);
}

.page-hero-icon {
  color: var(--color-accent);
}

@media (max-width: 767.98px) {
  .page-hero {
    padding: 7rem 0 3rem;
  }
  .page-hero h1 {
    font-size: 2rem;
  }
}

/* === SECTION PADDING === */
.section-padding {
  padding: 5.5rem 0;
}

.section-alt {
  background-color: var(--color-bg-subtle);
}

/* === SECTION WITH BACKGROUND IMAGE === */
.section-bg-image {
  position: relative;
  overflow: hidden;
}

.section-bg-image .bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.section-bg-image .bg-overlay {
  position: absolute;
  inset: 0;
  /* Soft dark gradient — image still visible, white text remains readable */
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.65) 100%);
}

.section-bg-image .container {
  position: relative;
  z-index: 2;
}

/* === "WHY CHOOSE SOLID AXIS" SECTION (redesigned) ===
   Replaces the previous busy background-photo + blurred-card
   treatment. Now: a refined solid navy gradient with a soft radial
   glow for depth, paired with crisp pure-white cards. Strong WCAG-AA
   contrast for both the white-on-navy headline/intro and the
   navy-on-white card bodies. Uses the existing --color-primary token
   so it stays in sync with the rest of the brand. */
.why-choose-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Solid brand navy gradient (no busy photo) */
  background: linear-gradient(135deg, #002755 0%, #001A3D 60%, #00102B 100%);
  color: #FFFFFF;
}
.why-choose-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  /* Subtle geometric texture so the navy isn't a flat slab */
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.05) 0, transparent 35%),
    radial-gradient(circle at 80% 80%, rgba(0, 61, 130, 0.35) 0, transparent 40%);
}
.why-choose-glow {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 80%;
  z-index: -1;
  background: radial-gradient(circle, rgba(0, 122, 255, 0.18) 0%, transparent 65%);
  filter: blur(40px);
  pointer-events: none;
}
.why-choose-section .container {
  position: relative;
  z-index: 1;
}

.why-choose-eyebrow {
  display: inline-block;
  color: #93C5FD;            /* light blue accent — AA on navy */
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 0.6rem;
}
.why-choose-title {
  /* T-fix: unify all section headings to the display serif font (was inheriting Inter sans-serif) */
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.6rem);
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.75rem;
}
.why-choose-accent-line {
  width: 64px;
  height: 3px;
  background: #93C5FD;
  border-radius: 2px;
  margin: 0 auto 1.25rem;
}
.why-choose-intro {
  max-width: 760px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.92);   /* AA on navy */
  font-size: 1.02rem;
  line-height: 1.75;
}

/* Cards — pure white, crisp navy accents */
.why-choose-card {
  background: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  padding: 2rem;
  height: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}
.why-choose-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #002755 0%, #1B2A6B 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.why-choose-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.16);
}
.why-choose-card:hover::before { transform: scaleX(1); }

.why-choose-card-icon {
  width: 56px;
  height: 56px;
  background: var(--color-primary-soft);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: var(--color-primary);
  margin-bottom: 1.25rem;
  transition: background 0.25s ease, color 0.25s ease;
}
.why-choose-card:hover .why-choose-card-icon {
  background: var(--color-primary);
  color: #FFFFFF;
}
.why-choose-card h4 {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-text);
  margin-bottom: 0.6rem;
  letter-spacing: -0.01em;
}
.why-choose-card p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 0;
}

/* Mobile readability — slightly tighter cards, less padding */
@media (max-width: 575.98px) {
  .why-choose-card { padding: 1.5rem; }
  .why-choose-card h4 { font-size: 1.05rem; }
  .why-choose-card p { font-size: 0.92rem; }
  .why-choose-intro { font-size: 0.96rem; }
}

/* === SECTION TITLES === */
.section-title {
  margin-bottom: 1rem;
}

.section-title h2 {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.section-title p {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  max-width: 600px;
}

.section-subtitle {
  display: inline-block;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

/* For dark sections */
.section-bg-image .section-title h2,
.section-bg-image .section-title p {
  color: var(--color-white);
}

.section-bg-image .section-subtitle {
  color: #FFFFFF;
}

/* === SERVICE CARDS === */
.card-sa {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  transition: all var(--transition-speed);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.card-sa:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-primary-soft);
}

/* Service card with image */
.service-card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.card-sa:hover .service-card-img {
  transform: scale(1.04);
}

.card-icon {
  width: 56px;
  height: 56px;
  background: var(--color-primary-soft);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--color-primary);
  margin-bottom: 1rem;
  transition: all var(--transition-speed);
}

.card-sa:hover .card-icon {
  background: var(--color-primary);
  color: #FFFFFF;
  transform: scale(1.05);
}

.card-sa h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

.card-sa p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-accent);
  transition: all 0.3s ease;
  margin-top: 0.5rem;
}

.card-link:hover {
  gap: 0.7rem;
  color: var(--color-accent-dark);
}

/* Service card with accent (services.php) */
.card-sa-accent {
  position: relative;
  overflow: hidden;
}

.card-sa-accent::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform 0.4s ease;
}

.card-sa-accent:hover::after {
  transform: scaleX(1);
}

/* === FEATURE BOXES (Why Choose Us) === */
.feature-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 2rem;
  transition: all var(--transition-speed);
  height: 100%;
  box-shadow: var(--shadow-card);
}

.feature-box:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-primary-soft);
}

.feature-icon {
  width: 52px;
  height: 52px;
  background: var(--color-primary-soft);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--color-primary);
  margin-bottom: 1.25rem;
  transition: all var(--transition-speed);
}

.feature-box:hover .feature-icon {
  background: var(--color-primary);
  color: #FFFFFF;
}

.feature-box h4 {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.feature-box p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: 0;
}

/* === STATS SECTION ===
   Light premium treatment — navy numbers on white background.
   Previously dark navy with gold numbers; that felt heavy. */
.stats-section {
  position: relative;
  background: var(--color-bg-subtle);
  overflow: hidden;
  padding: 4rem 0;
}

.stats-section .stats-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0.06;
}

.stat-number {
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.stat-item .stat-number {
  font-size: 3rem;
}

.stats-section p,
.stat-label {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .stat-number,
  .stat-item .stat-number {
    font-size: 2rem;
  }
}

/* === PROJECT CARDS === */
.project-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: all var(--transition-speed);
  box-shadow: var(--shadow-card);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-primary-soft);
}

.project-image {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.project-card:hover .project-image img {
  transform: scale(1.08);
}

.project-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 3rem;
}

.project-body {
  padding: 1.25rem 1.5rem;
}

.project-category {
  display: inline-block;
  background: rgba(0, 39, 85, 0.1);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.project-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
  transition: color var(--transition-speed);
}

.project-card:hover .project-name {
  color: var(--color-primary);
}

.project-location {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.project-hidden {
  display: none;
}

/* Image overlay on hover */
.project-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26, 35, 50, 0.6) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.project-card:hover .project-image::after {
  opacity: 1;
}

/* === FILTER BAR === */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
  justify-content: center;
}

.filter-btn {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  padding: 0.5rem 1.25rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.filter-btn.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #FFFFFF;
  font-weight: 600;
}

/* === CLIENT SECTORS === */
.client-sector-item {
  text-align: center;
  padding: 2rem 1rem;
  border-radius: var(--border-radius);
  transition: all 0.3s ease;
  background: var(--color-white);
  border: 1px solid var(--color-border);
}

.client-sector-item i {
  font-size: 2.5rem;
  color: var(--color-accent);
  margin-bottom: 1rem;
  display: block;
  transition: transform 0.3s ease;
}

.client-sector-item span {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-primary);
}

.client-sector-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
  border-color: var(--color-accent);
}

.client-sector-item:hover i {
  transform: scale(1.15);
}

/* === CTA BANNER === */
.cta-banner {
  position: relative;
  padding: 5rem 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  overflow: hidden;
}

.cta-banner .cta-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.18;
}

.cta-banner .container {
  position: relative;
  z-index: 2;
}

.cta-banner h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.cta-banner p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto 1.5rem;
}

.btn-sa-white {
  display: inline-block;
  background: #FFFFFF;
  color: var(--color-primary) !important;
  border: none;
  font-weight: 600;
  padding: 0.85rem 2.2rem;
  border-radius: var(--border-radius-btn);
  transition: all var(--transition-speed);
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.btn-sa-white:hover {
  background: #F8FAFC;
  color: var(--color-primary-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* === ABOUT PAGE === */
.vm-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 2.5rem;
  text-align: center;
  transition: all 0.4s ease;
  height: 100%;
}

.vm-card i {
  font-size: 2.5rem;
  color: var(--color-accent);
  margin-bottom: 1rem;
}

.vm-card h3 {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

.vm-card p {
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: 0;
}

.vm-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
}

.value-card {
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  transition: all 0.4s ease;
  height: 100%;
}

.value-card i {
  font-size: 2rem;
  color: var(--color-accent);
  margin-bottom: 1rem;
}

.value-card h3 {
  font-weight: 700;
  color: var(--color-primary);
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.value-card p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: 0;
}

.value-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
  border-color: var(--color-accent);
}

.certification-card {
  text-align: center;
  padding: 2rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  transition: all 0.4s ease;
  height: 100%;
}

.certification-card i {
  font-size: 2rem;
  color: var(--color-accent);
  margin-bottom: 1rem;
}

.certification-card h3 {
  font-weight: 700;
  color: var(--color-primary);
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.certification-card p {
  color: #888;
  font-size: 0.9rem;
  margin-bottom: 0;
}

.certification-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
  border-color: var(--color-accent);
}

/* About image section */
.about-image-wrapper {
  position: relative;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.about-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius);
}

.about-image-badge {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  background: var(--color-accent);
  color: #FFFFFF;
  padding: 1rem 1.5rem;
  border-radius: var(--border-radius);
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.about-image-badge span {
  display: block;
  font-size: 2rem;
  line-height: 1;
}

/* === SERVICE SUB-PAGES === */
.deliverables-list {
  list-style: none;
  padding: 0;
}

.deliverables-list li {
  padding: 0.75rem 0 0.75rem 2rem;
  position: relative;
  font-size: 0.95rem;
  color: var(--color-secondary);
  border-bottom: 1px solid var(--color-border);
}

.deliverables-list li:last-child {
  border-bottom: none;
}

.deliverables-list li::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-size: 0.85rem;
}

/* Process Timeline */
.process-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.process-step {
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  transition: all 0.4s ease;
  position: relative;
}

.process-step:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
  border-color: var(--color-accent);
}

.step-number {
  width: 48px;
  height: 48px;
  background: var(--color-accent);
  color: #FFFFFF;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.process-step h4 {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.process-step p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 0;
}

/* Benefit Cards */
.benefit-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 2rem;
  transition: all 0.4s ease;
  height: 100%;
}

.benefit-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
  border-color: var(--color-accent);
}

.benefit-card h4 {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
  font-size: 1.05rem;
}

.benefit-card h4 i {
  color: var(--color-accent);
}

.benefit-card p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: 0;
}

/* Related Service Cards */
.related-service-card {
  display: block;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 2rem;
  text-align: center;
  transition: all 0.4s ease;
  text-decoration: none;
}

.related-service-card i {
  font-size: 2rem;
  color: var(--color-accent);
  margin-bottom: 1rem;
}

.related-service-card h4 {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.related-service-card p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 0;
}

.related-service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
  border-color: var(--color-accent);
}

.related-service-card:hover i {
  transform: scale(1.15);
}

/* Service overview image */
.service-overview-img {
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.service-overview-img img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

/* === CONTACT PAGE === */
.contact-info-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 2rem;
  transition: all 0.4s ease;
  height: 100%;
}

.contact-info-card i {
  font-size: 2rem;
  color: var(--color-accent);
  margin-bottom: 1rem;
}

.contact-info-card h4 {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.contact-info-card p {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: 0;
}

.contact-info-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
  border-color: var(--color-accent);
}

.map-placeholder {
  background: var(--color-bg-alt);
  border: 2px dashed var(--color-border);
  border-radius: var(--border-radius);
  height: 100%;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
}

.map-placeholder i {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.contact-form {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 2rem;
}

.contact-form .form-control,
.contact-form .form-select {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.contact-form .form-control:focus,
.contact-form .form-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 39, 85, 0.15);
}

.contact-form .btn-submit {
  width: 100%;
  padding: 0.85rem;
  font-size: 1rem;
}

.honeypot-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
}

/* === FOOTER ===
   Navy footer is the brand accent at the bottom of the page.
   This is one of the only places navy is used as a background. */
.site-footer {
  background: var(--color-primary);
  color: rgba(255, 255, 255, 0.75);
  padding: 4rem 0 0;
}

.footer-logo {
  opacity: 0.95;
}

.footer-desc {
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.footer-social:hover {
  background: var(--color-accent-dark);
  color: #FFFFFF;
  transform: translateY(-3px);
}

.footer-heading {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 1.25rem;
  position: relative;
  padding-bottom: 0.75rem;
}

.footer-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
}

.footer-links {
  padding: 0;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  transition: all 0.3s ease;
  display: inline-block;
}

.footer-links a:hover {
  color: #FFFFFF;
  transform: translateX(5px);
}

.footer-contact {
  padding: 0;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

.footer-contact i {
  color: #B8D4F0;
  margin-top: 0.2rem;
  width: 16px;
  flex-shrink: 0;
}

.footer-contact a {
  color: rgba(255, 255, 255, 0.7);
}

.footer-contact a:hover {
  color: #FFFFFF;
}

.footer-bottom {
  margin-top: 3rem;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

/* === SCROLL ANIMATIONS === */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-up.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.fade-up-delay-1 { transition-delay: 0.1s; }
.fade-up-delay-2 { transition-delay: 0.2s; }
.fade-up-delay-3 { transition-delay: 0.3s; }
.fade-up-delay-4 { transition-delay: 0.4s; }
.fade-up-delay-5 { transition-delay: 0.5s; }
.fade-up-delay-6 { transition-delay: 0.6s; }

/* === TOAST NOTIFICATIONS === */
.form-toast {
  position: fixed;
  top: 2rem;
  right: 2rem;
  padding: 1rem 1.5rem;
  border-radius: var(--border-radius);
  font-weight: 500;
  font-size: 0.95rem;
  z-index: 10000;
  transform: translateX(120%);
  transition: transform 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  max-width: 400px;
}

.form-toast.show {
  transform: translateX(0);
}

.form-toast.success {
  background: var(--color-success);
  color: var(--color-white);
}

.form-toast.error {
  background: var(--color-error);
  color: var(--color-white);
}

/* === 404 PAGE === */
.error-404 {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.error-404 h1 {
  font-size: 6rem;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
}

.error-404 h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.error-404 p {
  color: #888;
  margin-bottom: 2rem;
}

/* === UTILITY CLASSES === */
.text-accent {
  color: var(--color-accent);
}

.bg-primary-sa {
  background-color: var(--color-primary);
}

/* Accent line divider — clean, thin, premium */
.accent-line {
  width: 48px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  margin: 1rem auto;
}

.accent-line-left {
  width: 48px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  margin: 1rem 0;
}

/* === RESPONSIVE FINE-TUNING === */
@media (max-width: 991.98px) {
  .section-padding {
    padding: 3.5rem 0;
  }
  .section-title h2 {
    font-size: 1.85rem;
  }
  .cta-banner h2 {
    font-size: 1.75rem;
  }
}

@media (max-width: 767.98px) {
  .section-padding {
    padding: 3rem 0;
  }
  .hero-content h1 {
    font-size: 2.25rem;
  }
  .section-title h2 {
    font-size: 1.6rem;
  }
  .cta-banner h2 {
    font-size: 1.5rem;
  }
  .btn-group {
    flex-direction: column;
    gap: 0.75rem;
  }
  .project-image {
    height: 180px;
  }
  .hero-stats-bar {
    position: relative;
    background: rgba(0, 39, 85, 0.9);
    margin-top: 2rem;
  }
}

/* ════════════════════════════════════════════════════════════════
   FLOATING CONTACT BUTTONS — WhatsApp + Call (sticky, right side)
   ════════════════════════════════════════════════════════════════ */
.floating-contact {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.floating-contact-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 1.5rem;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  border: none;
}
.floating-contact-btn:hover {
  transform: translateY(-3px) scale(1.05);
  color: #FFFFFF;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}
.floating-contact-btn.whatsapp {
  background: #25D366;
}
.floating-contact-btn.whatsapp:hover {
  background: #1DA851;
}
.floating-contact-btn.call {
  background: var(--color-primary);
}
.floating-contact-btn.call:hover {
  background: var(--color-primary-hover);
}
/* Pulse animation to attract attention */
.floating-contact-btn::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  animation: floatPulse 2.4s ease-out infinite;
}
.floating-contact-btn.whatsapp::before { color: #25D366; }
.floating-contact-btn.call::before { color: var(--color-primary); }
@keyframes floatPulse {
  0% { transform: scale(0.95); opacity: 0.7; }
  100% { transform: scale(1.4); opacity: 0; }
}
/* Tooltip on hover */
.floating-contact-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: #0F172A;
  color: #FFFFFF;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.floating-contact-btn:hover::after {
  opacity: 1;
}
@media (max-width: 575.98px) {
  .floating-contact {
    right: 14px;
    bottom: 16px;
    gap: 10px;
  }
  .floating-contact-btn {
    width: 50px;
    height: 50px;
    font-size: 1.3rem;
  }
  .floating-contact-btn::after { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   SOCIAL SHARE BUTTONS (on project detail pages)
   ════════════════════════════════════════════════════════════════ */
.social-share {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 1rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin: 2rem 0;
}
.social-share-label {
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.9rem;
  margin-right: 8px;
}
.social-share-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.2s ease;
}
.social-share-btn:hover {
  transform: translateY(-2px);
  color: #FFFFFF;
}
.social-share-btn.facebook  { background: #1877F2; }
.social-share-btn.twitter   { background: #1DA1F2; }
.social-share-btn.linkedin  { background: #0A66C2; }
.social-share-btn.whatsapp  { background: #25D366; }
.social-share-btn.email     { background: var(--color-text-muted); }


/* ════════════════════════════════════════════════════════════════
   PREMIUM LUXURY REFINEMENTS (v3)
   ════════════════════════════════════════════════════════════════
   These overrides elevate the site from "clean contractor" to
   "premium infrastructure firm". Layered on top of existing rules
   so we don't break back-compat with downstream templates.
   ════════════════════════════════════════════════════════════════ */

/* ─── Display heading utility (Playfair Display serif) ─── */
.display-serif,
h1.display-serif,
h2.display-serif {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.12;
}

/* T-fix: defensive baseline — any h2 without a more specific class
   falls back to the display serif, matching the established heading voice. */
h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

/* ─── Eyebrow label (small caps + gold rule) ─── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--letter-wider);
  color: var(--color-accent);
  margin-bottom: 0.9rem;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--color-accent);
  display: inline-block;
}
.eyebrow.eyebrow-center::before { display: none; }
.eyebrow.eyebrow-center {
  justify-content: center;
}
.eyebrow.eyebrow-center::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--color-accent);
  display: inline-block;
}

/* ─── Section heading refinement ─── */
.section-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.85rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: 1rem;
}
.section-intro {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  max-width: 720px;
  margin: 0 auto;
}

/* ─── Gold accent line under headings ─── */
.accent-line-gold {
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
  border-radius: 2px;
  margin: 0 auto 1.5rem;
  position: relative;
}
.accent-line-gold::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 50%;
}

/* ─── Buttons: refined premium look ─── */
.btn-sa-primary,
.btn-sa-white,
.btn-sa-outline,
.btn-hero-light {
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--border-radius-btn);
  padding: 0.8rem 1.8rem;
  transition: all var(--transition-luxe);
  position: relative;
  overflow: hidden;
}
.btn-sa-primary {
  background: var(--color-primary);
  color: #FFFFFF !important;
  border: 1px solid var(--color-primary);
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.18);
}
.btn-sa-primary:hover {
  background: var(--color-primary-hover);
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10, 37, 64, 0.28);
}
.btn-sa-outline {
  background: transparent;
  color: var(--color-primary) !important;
  border: 1.5px solid var(--color-primary);
}
.btn-sa-outline:hover {
  background: var(--color-primary);
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10, 37, 64, 0.18);
}
/* Gold-ghost CTA for premium accent */
.btn-sa-gold {
  background: transparent;
  color: var(--color-accent) !important;
  border: 1.5px solid var(--color-accent);
  font-weight: 600;
  padding: 0.8rem 1.8rem;
  border-radius: var(--border-radius-btn);
  transition: all var(--transition-luxe);
  letter-spacing: 0.01em;
}
.btn-sa-gold:hover {
  background: var(--color-accent);
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-accent);
}

/* ─── Cards: lift on hover with hairline border ─── */
.card-sa {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-luxe), box-shadow var(--transition-luxe), border-color var(--transition-luxe);
  overflow: hidden;
}
.card-sa:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-accent);
}
.card-sa .card-body { padding: 1.75rem; }
.card-sa h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}
.card-sa .card-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1.2rem;
  transition: all var(--transition-luxe);
}
.card-sa:hover .card-icon {
  background: var(--color-accent);
  color: #FFFFFF;
  transform: rotate(-4deg) scale(1.05);
}
.card-sa .card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-primary);
  text-decoration: none;
  margin-top: 0.75rem;
  transition: gap var(--transition-luxe), color var(--transition-luxe);
}
.card-sa .card-link:hover {
  color: var(--color-accent);
  gap: 0.7rem;
}
.card-sa .card-link i {
  font-size: 0.8rem;
  transition: transform var(--transition-luxe);
}
.card-sa .card-link:hover i { transform: translateX(2px); }

/* ─── Section spacing refinement ─── */
.section-padding {
  padding: var(--section-padding-y) 0;
}
@media (max-width: 768px) {
  .section-padding { padding: var(--section-padding-y-sm) 0; }
  :root {
    --section-padding-y: 4rem;
  }
}


/* ════════════════════════════════════════════════════════════════
   FLOATING CONTACT / SOCIAL BAR (v3)
   ════════════════════════════════════════════════════════════════
   Vertical icon bar pinned to the right edge of every page.
   Shows: Call · WhatsApp · Email · LinkedIn · (optional) top.
   Replaces the old "two-button" floating-contact with a richer,
   premium-style icon stack. Old .floating-contact is preserved
   for backwards compatibility (used by footer.php fallback).
   ════════════════════════════════════════════════════════════════ */
.contact-rail {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.contact-rail-item {
  pointer-events: auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 14px rgba(10, 27, 46, 0.10);
  text-decoration: none;
  font-size: 1.05rem;
  transition: transform var(--transition-luxe), background var(--transition-luxe),
              color var(--transition-luxe), box-shadow var(--transition-luxe);
  position: relative;
}
.contact-rail-item:hover {
  transform: scale(1.08) translateX(-3px);
  color: #FFFFFF;
  box-shadow: 0 8px 22px rgba(10, 27, 46, 0.20);
}
.contact-rail-item .rail-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-primary);
  color: #FFFFFF;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-luxe), visibility var(--transition-luxe);
  pointer-events: none;
}
.contact-rail-item .rail-tooltip::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: var(--color-primary);
}
.contact-rail-item:hover .rail-tooltip {
  opacity: 1;
  visibility: visible;
}
.contact-rail-item.rail-call:hover     { background: var(--color-primary); }
.contact-rail-item.rail-whatsapp       { color: var(--color-whatsapp-dark); }
.contact-rail-item.rail-whatsapp:hover { background: var(--color-whatsapp); color: #FFFFFF; }
.contact-rail-item.rail-email:hover    { background: var(--color-accent); }
.contact-rail-item.rail-linkedin       { color: #0A66C2; }
.contact-rail-item.rail-linkedin:hover { background: #0A66C2; color: #FFFFFF; }
.contact-rail-item.rail-instagram:hover{ background: #C13584; color: #FFFFFF; }
.contact-rail-item.rail-top:hover      { background: var(--color-text); }

/* Mobile: rail becomes a horizontal bar at the bottom */
@media (max-width: 991.98px) {
  .contact-rail {
    right: 50%;
    top: auto;
    bottom: 14px;
    transform: translateX(50%);
    flex-direction: row;
    gap: 10px;
    background: rgba(255, 255, 255, 0.96);
    padding: 8px 12px;
    border-radius: 999px;
    box-shadow: 0 8px 28px rgba(10, 27, 46, 0.18);
    border: 1px solid var(--color-border);
  }
  .contact-rail-item {
    width: 42px;
    height: 42px;
    font-size: 0.95rem;
  }
  .contact-rail-item .rail-tooltip { display: none; }
  /* Hide the floating-contact bottom-right cluster on mobile to
     avoid double contact widgets. */
  .floating-contact { display: none !important; }
}
@media (min-width: 992px) {
  /* On desktop, hide the old floating-contact (replaced by rail). */
  .floating-contact { display: none !important; }
}


/* ════════════════════════════════════════════════════════════════
   PROJECT GALLERY (v3) — unlimited image gallery
   ════════════════════════════════════════════════════════════════
   Public-side gallery: a responsive masonry-ish grid with a
   lightbox modal. Each image is clickable → opens a full-screen
   slider with prev/next + close. Used by project.php to render
   every image attached to a project (no count limit).
   ════════════════════════════════════════════════════════════════ */
.project-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 1.5rem;
}
.project-gallery-item {
  position: relative;
  border-radius: var(--border-radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--color-bg-subtle);
  aspect-ratio: 4/3;
  border: 1px solid var(--color-border);
  transition: transform var(--transition-luxe), box-shadow var(--transition-luxe);
}
.project-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-luxe);
}
.project-gallery-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.project-gallery-item:hover img { transform: scale(1.06); }
.project-gallery-item .gallery-zoom-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(10, 37, 64, 0.78);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--transition-luxe), transform var(--transition-luxe);
}
.project-gallery-item:hover .gallery-zoom-icon {
  opacity: 1;
  transform: scale(1);
}

/* Lightbox modal */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(8, 18, 32, 0.94);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.gallery-lightbox.open { display: flex; }
.gallery-lightbox-stage {
  max-width: 1100px;
  width: 100%;
  max-height: 86vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-lightbox img {
  max-width: 100%;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}
.gallery-lightbox-caption {
  position: absolute;
  bottom: -42px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  font-weight: 500;
}
.gallery-lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background var(--transition-luxe);
}
.gallery-lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }
.gallery-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background var(--transition-luxe);
}
.gallery-lightbox-nav:hover { background: rgba(255, 255, 255, 0.25); }
.gallery-lightbox-prev { left: 18px; }
.gallery-lightbox-next { right: 18px; }
.gallery-lightbox-counter {
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
}


/* ════════════════════════════════════════════════════════════════
   CONTACT CTA STRIP — used at the bottom of every service/project page
   ════════════════════════════════════════════════════════════════ */
.contact-cta-strip {
  background: linear-gradient(135deg, var(--color-primary) 0%, #061A2E 100%);
  color: #FFFFFF;
  border-radius: var(--border-radius-lg);
  padding: 3rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.contact-cta-strip::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 50%;
  height: 180%;
  background: radial-gradient(circle, rgba(176, 141, 87, 0.18) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.contact-cta-strip .eyebrow { color: var(--color-accent); }
.contact-cta-strip h2,
.contact-cta-strip h3 {
  font-family: var(--font-display);
  color: #FFFFFF;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}
.contact-cta-strip p {
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.02rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.contact-cta-strip .contact-cta-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-bottom: 1.75rem;
}
.contact-cta-method {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color var(--transition-luxe), transform var(--transition-luxe);
}
.contact-cta-method:hover {
  color: var(--color-accent);
  transform: translateY(-1px);
}
.contact-cta-method .method-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--color-accent);
  flex-shrink: 0;
  transition: all var(--transition-luxe);
}
.contact-cta-method:hover .method-icon {
  background: var(--color-accent);
  color: #FFFFFF;
  border-color: var(--color-accent);
}
.contact-cta-method .method-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.6);
  display: block;
  margin-bottom: 1px;
}
.contact-cta-method .method-value {
  font-weight: 600;
  color: #FFFFFF;
}
.contact-cta-strip .social-icons-row {
  display: flex;
  gap: 10px;
  margin-top: 1.25rem;
}
.contact-cta-strip .social-icons-row a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 0.95rem;
  transition: all var(--transition-luxe);
}
.contact-cta-strip .social-icons-row a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .contact-cta-strip { padding: 2rem 1.5rem; }
  .contact-cta-strip .contact-cta-methods { gap: 0.75rem 1.25rem; }
}


/* ════════════════════════════════════════════════════════════════
   PROJECT DETAIL PAGE — gallery + sidebar refinements
   ════════════════════════════════════════════════════════════════ */
.project-detail-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, #061A2E 100%);
  color: #FFFFFF;
  padding: 8rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.project-detail-hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 140%;
  background: radial-gradient(circle, rgba(176, 141, 87, 0.18) 0%, transparent 65%);
  filter: blur(50px);
  pointer-events: none;
}
.project-detail-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2.5vw, 3.2rem);
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: #FFFFFF;
  margin-bottom: 1rem;
}
.project-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin-top: 1.5rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
}
.project-detail-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.project-detail-meta-item i { color: var(--color-accent); }

.project-content h2,
.project-content h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin: 2rem 0 1rem;
}
.project-content p {
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

.project-sidebar-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 1.5rem;
}
.project-sidebar-card h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-text);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}
.project-sidebar-card .info-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  font-size: 0.92rem;
  border-bottom: 1px dashed var(--color-border);
}
.project-sidebar-card .info-row:last-child { border-bottom: none; }
.project-sidebar-card .info-row .label {
  color: var(--color-text-muted);
  font-weight: 500;
}
.project-sidebar-card .info-row .value {
  color: var(--color-text);
  font-weight: 600;
  text-align: right;
}


/* ════════════════════════════════════════════════════════════════
   PAGE HERO (interior pages: about, services, contact, projects)
   ════════════════════════════════════════════════════════════════ */
.page-hero {
  position: relative;
  padding: 9rem 0 4rem;
  color: #FFFFFF;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary) 0%, #061A2E 100%);
}
.page-hero .page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.25;
  z-index: 0;
}
.page-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 37, 64, 0.55) 0%, rgba(6, 26, 46, 0.85) 100%);
  z-index: 1;
}
.page-hero .container {
  position: relative;
  z-index: 2;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: 0.75rem;
}
.page-hero p,
.page-hero .breadcrumb {
  color: rgba(255, 255, 255, 0.85);
}
.page-hero-icon {
  color: var(--color-accent) !important;
}


/* ════════════════════════════════════════════════════════════════
   FOOTER — premium dark with gold accents
   ════════════════════════════════════════════════════════════════ */
.site-footer {
  background: linear-gradient(180deg, #0A1B2E 0%, #050E1C 100%);
  color: rgba(255, 255, 255, 0.78);
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  opacity: 0.6;
}
.site-footer .footer-logo {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.site-footer .footer-desc {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.92rem;
  line-height: 1.75;
  max-width: 360px;
}
.site-footer .footer-heading {
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  margin-bottom: 1.2rem;
  position: relative;
  padding-bottom: 0.6rem;
}
.site-footer .footer-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--color-accent);
}
.site-footer .footer-links li { margin-bottom: 0.6rem; }
.site-footer .footer-links a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  transition: color var(--transition-luxe), padding-left var(--transition-luxe);
}
.site-footer .footer-links a:hover {
  color: var(--color-accent);
  padding-left: 4px;
}
.site-footer .footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
}
.site-footer .footer-contact li i {
  color: var(--color-accent);
  margin-top: 4px;
  flex-shrink: 0;
}
.site-footer .footer-contact a {
  color: rgba(255, 255, 255, 0.78);
  transition: color var(--transition-luxe);
}
.site-footer .footer-contact a:hover { color: var(--color-accent); }
.site-footer .footer-social {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.78);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: all var(--transition-luxe);
}
.site-footer .footer-social:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #FFFFFF;
  transform: translateY(-2px);
}
.site-footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.25rem 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
}


/* ════════════════════════════════════════════════════════════════
   HERO SECTION (homepage) — premium refinement
   ════════════════════════════════════════════════════════════════ */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #FFFFFF;
  overflow: hidden;
}
.hero-section .hero-overlay {
  background: linear-gradient(180deg, rgba(6, 26, 46, 0.55) 0%, rgba(6, 26, 46, 0.78) 100%);
}
.hero-section .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(176, 141, 87, 0.45);
  color: #FFFFFF;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-section .hero-badge i { color: var(--color-accent); }
.hero-section h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 1.6rem + 3.5vw, 4.2rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 1.25rem 0;
}
.hero-section h1 .text-accent {
  color: var(--color-accent);
  position: relative;
}
.hero-section .hero-subtext {
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  max-width: 640px;
  margin-bottom: 2rem;
}
.hero-section .btn-group { gap: 0.75rem; flex-wrap: wrap; }
/* T1: .hero-section .btn-hero-light override removed — the base .btn-hero-light rule
   above (navy bg, white text, visible box-shadow) is now the single authoritative source.
   The previous white-on-white override was the root cause of the invisible CTA. */
.hero-section .btn-outline-light {
  background: transparent;
  color: #FFFFFF;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  font-weight: 600;
  padding: 0.8rem 1.8rem;
  border-radius: var(--border-radius-btn);
  transition: all var(--transition-luxe);
}
.hero-section .btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #FFFFFF;
  transform: translateY(-2px);
}
.hero-stats-bar {
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(176, 141, 87, 0.25);
  margin-top: 3rem;
  padding: 1.5rem 0;
}
.hero-stat-item {
  text-align: center;
  padding: 0.5rem 0.75rem;
  border-right: 1px solid rgba(255, 255, 255, 0.10);
}
.hero-stat-item:last-child { border-right: none; }
.hero-stat-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 1.2rem + 1.5vw, 2.4rem);
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 0.3rem;
}
.hero-stat-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.75);
}

/* Slider dots refinement */
.hero-slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  cursor: pointer;
  transition: all var(--transition-luxe);
  padding: 0;
}
.hero-slider-dot.active {
  background: var(--color-accent);
  width: 28px;
  border-radius: 999px;
}


/* ════════════════════════════════════════════════════════════════
   CTA BANNER (homepage bottom) — premium dark with gold
   ════════════════════════════════════════════════════════════════ */
.cta-banner {
  position: relative;
  color: #FFFFFF;
  padding: 5rem 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary) 0%, #061A2E 100%);
}
.cta-banner .cta-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.20;
}
.cta-banner .container { position: relative; z-index: 2; text-align: center; }
/* T6: single-rule centering fix applies to every .cta-banner instance
   (index.php, services.php, services/*.php, projects.php). Pages that
   already have text-center on the inner wrapper are unaffected (text-align
   is idempotent); pages without it now match. */
.cta-banner h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.3rem + 2.5vw, 2.8rem);
  letter-spacing: -0.015em;
  margin-bottom: 1rem;
}
.cta-banner p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 1.75rem;
}
.cta-banner .btn-sa-white {
  background: #FFFFFF;
  color: var(--color-primary) !important;
  border: 1px solid #FFFFFF;
  font-weight: 600;
}
.cta-banner .btn-sa-white:hover {
  background: var(--color-accent);
  color: #FFFFFF !important;
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-accent);
}


/* ════════════════════════════════════════════════════════════════
   STATS SECTION — refined (warm beige bg, navy numbers, gold accents)
   ════════════════════════════════════════════════════════════════ */
.stats-section {
  background: var(--color-bg-subtle);
  position: relative;
}
.stats-section .stats-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.10;
}
.stats-section .container { position: relative; z-index: 2; }
.stats-section .stat-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 1.6rem + 2.5vw, 3.4rem);
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}
.stats-section .stat-number::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--color-accent);
  margin: 0.6rem auto 0;
}
.stats-section p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* ════════════════════════════════════════════════════════════════
   CLIENT SECTORS — refined chips
   ════════════════════════════════════════════════════════════════ */
.client-sector-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 1.75rem 1rem;
  text-align: center;
  height: 100%;
  transition: transform var(--transition-luxe), box-shadow var(--transition-luxe), border-color var(--transition-luxe);
}
.client-sector-item i {
  font-size: 1.8rem;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
  transition: transform var(--transition-luxe);
}
.client-sector-item span {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-text);
  letter-spacing: -0.005em;
}
.client-sector-item:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card-hover);
}
.client-sector-item:hover i { transform: scale(1.1); }


/* ════════════════════════════════════════════════════════════════
   "WHY CHOOSE" — keep the navy gradient (already redesigned in v2)
   but add gold accent line for premium feel.
   ════════════════════════════════════════════════════════════════ */
.why-choose-accent-line {
  background: var(--color-accent) !important;
}
.why-choose-eyebrow {
  color: var(--color-accent) !important;
}
.why-choose-card::before {
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover)) !important;
}
.why-choose-card-icon {
  background: var(--color-accent-soft) !important;
  color: var(--color-accent) !important;
}
.why-choose-card:hover .why-choose-card-icon {
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
}


/* ════════════════════════════════════════════════════════════════
   PROJECT CARDS (homepage teaser + projects.php grid)
   ════════════════════════════════════════════════════════════════ */
.project-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  height: 100%;
  transition: transform var(--transition-luxe), box-shadow var(--transition-luxe), border-color var(--transition-luxe);
  display: flex;
  flex-direction: column;
}
.project-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-accent);
}
.project-card .project-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--color-bg-subtle);
}
.project-card .project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-luxe);
}
.project-card:hover .project-image img { transform: scale(1.06); }
.project-card .project-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(10, 37, 64, 0.4) 100%);
  opacity: 0;
  transition: opacity var(--transition-luxe);
}
.project-card:hover .project-image::after { opacity: 1; }
.project-card .project-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.project-card .project-category {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}
.project-card .project-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}
.project-card .project-location {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin-top: auto;
  padding-top: 0.75rem;
}
.project-card .project-location i { color: var(--color-accent); }


/* ════════════════════════════════════════════════════════════════
   SERVICE PAGE — section refinements
   ════════════════════════════════════════════════════════════════ */
.service-detail-section {
  padding: 4rem 0;
}
.service-detail-section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}
.service-features-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}
.service-features-list li {
  padding: 0.6rem 0 0.6rem 2rem;
  position: relative;
  color: var(--color-text-muted);
  font-size: 0.98rem;
  line-height: 1.6;
  border-bottom: 1px dashed var(--color-border);
}
.service-features-list li:last-child { border-bottom: none; }
.service-features-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.7rem;
  color: var(--color-accent);
  font-size: 0.85rem;
}


/* ════════════════════════════════════════════════════════════════
   CONTACT PAGE — form refinement
   ════════════════════════════════════════════════════════════════ */
.contact-info-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
  height: 100%;
  transition: transform var(--transition-luxe), box-shadow var(--transition-luxe), border-color var(--transition-luxe);
}
.contact-info-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-accent);
}
.contact-info-card .icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.contact-info-card h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}
.contact-info-card p,
.contact-info-card a {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  text-decoration: none;
  transition: color var(--transition-luxe);
}
.contact-info-card a:hover { color: var(--color-accent); }

.form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 2.25rem;
  box-shadow: var(--shadow-card);
}
.form-card .form-control,
.form-card .form-select {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-btn);
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  transition: border-color var(--transition-luxe), box-shadow var(--transition-luxe);
}
.form-card .form-control:focus,
.form-card .form-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.15);
}
.form-card .form-label {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-text);
  margin-bottom: 0.4rem;
}


/* ════════════════════════════════════════════════════════════════
   FORM TOAST (contact form)
   ════════════════════════════════════════════════════════════════ */
.form-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-text);
  color: #FFFFFF;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 500;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-luxe);
  z-index: 1100;
  max-width: 90vw;
}
.form-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.form-toast.success { background: var(--color-success); }
.form-toast.error { background: var(--color-error); }


/* ════════════════════════════════════════════════════════════════
   SCROLLBAR — refined
   ════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg-subtle); }
::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 999px;
  border: 2px solid var(--color-bg-subtle);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }


/* ════════════════════════════════════════════════════════════════
   BODY TEXT refinement (warmer color)
   ════════════════════════════════════════════════════════════════ */
.section-padding p {
  color: var(--color-text-muted);
}
.section-padding .text-center > p {
  margin-left: auto;
  margin-right: auto;
}

/* ════════════════════════════════════════════════════════════════
   APPENDED BLOCK — T3 / T5 / T8.7
   All new classes prefixed to avoid collisions. Built only from
   existing CSS custom properties (Rule 6: Branding).
   ════════════════════════════════════════════════════════════════ */

/* ─── T3: About teaser SEO-safe collapse ─── */
.about-teaser-collapse {
  /* Default resting state: no clamp. JS applies the clamp class only when
     it can measure the image column height and the text exceeds it.
     With JS disabled, this rule alone leaves the full text fully expanded. */
  transition: max-height 0.4s ease;
}
.about-teaser-collapse--clamped::after {
  /* Subtle bottom fade so the visitor can see the text continues below. */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    var(--color-surface, #FFFFFF) 100%
  );
  pointer-events: none;
}
.about-teaser-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--border-radius-btn);
  cursor: pointer;
  margin-top: 0.75rem;
  margin-bottom: 1.5rem;
  transition: background var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed);
}
.about-teaser-toggle:hover,
.about-teaser-toggle:focus-visible {
  background: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary);
  outline: none;
}
.about-teaser-toggle-icon {
  font-size: 0.8rem;
  transition: transform var(--transition-speed);
}

/* ─── T5: Redesigned contact CTA strip ───
   (replaces the cramped 7/5 split with a symmetric 3-card grid) */
.cta-contact-section {
  background: var(--color-surface, #FFFFFF);
}
.cta-contact-grid {
  margin-top: 1.5rem;
}
.cta-contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  padding: 2.25rem 1.5rem;
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform var(--transition-luxe), box-shadow var(--transition-luxe), border-color var(--transition-luxe);
  height: 100%;
}
.cta-contact-card:hover,
.cta-contact-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-accent);
  outline: none;
}
.cta-contact-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
  transition: background var(--transition-luxe), color var(--transition-luxe);
}
.cta-contact-card:hover .cta-contact-card-icon,
.cta-contact-card:focus-visible .cta-contact-card-icon {
  background: var(--color-accent);
  color: #FFFFFF;
}
.cta-contact-card-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.cta-contact-card-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-text);
  word-break: break-word;
}
.cta-contact-social-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}
.cta-contact-social-label {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-weight: 500;
}
.cta-contact-social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  transition: background var(--transition-speed), color var(--transition-speed), transform var(--transition-speed);
}
.cta-contact-social-link:hover,
.cta-contact-social-link:focus-visible {
  background: var(--color-accent);
  color: #FFFFFF;
  transform: translateY(-2px);
  outline: none;
}
@media (max-width: 767.98px) {
  .cta-contact-card { padding: 1.5rem 1rem; }
  .cta-contact-card-icon { width: 48px; height: 48px; font-size: 1.2rem; }
  .cta-contact-card-value { font-size: 1rem; }
}

/* ─── T8.7: Our Commitments cards — REMOVED ───
   The "Our Commitments" section was deleted from index.php per owner request
   (was redundant with "Why Choose Solid Axis" and had color legibility issues
   on the cream background). These orphaned rules are removed for cleanliness. */

/* ─── T2: Instagram rail variant (mirrors rail-linkedin styling) ─── */
.contact-rail-item.rail-instagram       { color: #E1306C; }
.contact-rail-item.rail-instagram:hover { background: linear-gradient(45deg, #F77737 0%, #E1306C 50%, #C13584 100%); color: #FFFFFF; }

/* ═══ END OF APPENDED BLOCK ═══ */