@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* ============================================================
   LU BRAND SYSTEM — lu-brand.css
   Replaces: style.css (Silicon base) + custom-style.css
   
   Sections:
   1.  Raw Color Tokens
   2.  Semantic Role Assignments
   3.  Typography
   4.  Base / Reset Overrides
   5.  Bootstrap Component Overrides
       5a. Buttons
       5b. Badges
       5c. Alerts
       5d. Forms
       5e. Cards
       5f. Nav / Navbar
       5g. Accordion
       5h. Pagination
       5i. Progress
       5j. Dropdowns
   6.  Section Theme System (sec-light / sec-dark)
   7.  Custom Utility Classes
       7a. Backgrounds
       7b. Text
       7c. Borders
       7d. Shadows
       7e. Spacing / Layout Helpers
   8.  Custom Components
       8a. Buttons (extended)
       8b. Cards (custom)
       8c. Badges (custom)
       8d. Steps
       8e. Slideout Panels
       8f. Swiper / Carousel
       8g. Gallery
       8h. Misc UI
   ============================================================ */

/* ============================================================
   1. RAW COLOR TOKENS
   All raw values live here. Nothing else should hardcode hex.
   ============================================================ */

:root {

  /* --- Primary: Teal --- */
  --lu-primary:          #4ed3cf;
  --lu-primary-dark:     #0a9e9a;   /* accessibility-safe for small text on light bg */
  --lu-primary-light:    #e4f9f9;   /* subtle tints, light badge backgrounds */
  --lu-primary-rgb:      78, 211, 207;

  /* --- Secondary / CTA: Lime --- */
  --lu-secondary:        #ccff00;
  --lu-secondary-hover:  #d6ff38;
  --lu-secondary-rgb:    204, 255, 0;

  /* --- Dark Scale --- */
  --lu-black:            #0a0a0a;
  --lu-dark:             #0f0f0f;
  --lu-dark-surface:     #111111;
  --lu-dark-ui:          #161616;   /* subtle card surface on dark bg */
  --lu-dark-rgb:         11, 11, 11;

  /* --- Light / Neutral Scale --- */
  --lu-white:            #ffffff;
  --lu-light:            #f7f8f9;   /* default section bg, bg-light */
  --lu-gray-50:          #f7f7f7;
  --lu-gray-100:         #f0f0f0;
  --lu-gray-200:         #e2e2e2;
  --lu-gray-400:         #9a9a9a;
  --lu-gray-600:         #555555;
  --lu-gray-800:         #222222;

  /* --- Semantic Status Colors --- */
  --lu-success:          #22c55e;
  --lu-success-rgb:      34, 197, 94;
  --lu-warning:          #ffba08;
  --lu-warning-rgb:      255, 186, 8;
  --lu-danger:           #ef4444;
  --lu-danger-rgb:       239, 68, 68;
  --lu-info:             #4c82f7;
  --lu-info-rgb:         76, 130, 247;

  /* --- Green (eco / sustainability accent) --- */
  --lu-green:            #5da832;
  --lu-green-light:      #eef7e6;
  --lu-green-dark:       #4a8f28;
  --lu-green-rgb:        93, 168, 50;

  /* --- Pre-mixed Faded Variants (used in alerts, badge bgs, subtle fills) --- */
  --lu-faded-primary:    rgba(78, 211, 207, 0.12);
  --lu-faded-secondary:  rgba(204, 255, 0, 0.12);
  --lu-faded-success:    rgba(34, 197, 94, 0.12);
  --lu-faded-warning:    rgba(255, 186, 8, 0.12);
  --lu-faded-danger:     rgba(239, 68, 68, 0.12);
  --lu-faded-info:       rgba(76, 130, 247, 0.12);
  --lu-faded-green:      rgba(93, 168, 50, 0.09);
  --lu-faded-light:      rgba(255, 255, 255, 0.05);
  --lu-faded-dark:       rgba(11, 11, 11, 0.12);

  /* --- Border --- */
  --lu-border-color:     #e2e2e2;
  --lu-border-color-dark: rgba(255, 255, 255, 0.1);
}


/* ============================================================
   2. SEMANTIC ROLE ASSIGNMENTS
   Maps --lu- raw tokens into Bootstrap's expected --bs- / --si-
   variables so all Bootstrap components inherit brand colors.
   ============================================================ */

:root {

  /* Bootstrap semantic overrides */
  --bs-primary:              var(--lu-primary);
  --bs-primary-rgb:          var(--lu-primary-rgb);
  --bs-secondary:            var(--lu-secondary);
  --bs-secondary-rgb:        var(--lu-secondary-rgb);
  --bs-success:              var(--lu-success);
  --bs-success-rgb:          var(--lu-success-rgb);
  --bs-warning:              var(--lu-warning);
  --bs-warning-rgb:          var(--lu-warning-rgb);
  --bs-danger:               var(--lu-danger);
  --bs-danger-rgb:           var(--lu-danger-rgb);
  --bs-info:                 var(--lu-info);
  --bs-info-rgb:             var(--lu-info-rgb);
  --bs-dark:                 var(--lu-dark);
  --bs-dark-rgb:             var(--lu-dark-rgb);
  --bs-light:                var(--lu-light);
  --bs-body-color:           var(--lu-gray-600);
  --bs-body-bg:              var(--lu-white);
  --bs-border-color:         var(--lu-border-color);
  --bs-link-color:           var(--lu-primary);
  --bs-link-hover-color:     var(--lu-primary-dark);
  --bs-focus-ring-color:     rgba(var(--lu-primary-rgb), 0.25);

  /* Silicon theme var bridge — keeps any residual --si- references working */
  --si-primary:              var(--lu-primary);
  --si-primary-rgb:          var(--lu-primary-rgb);
  --si-secondary:            var(--lu-secondary);
  --si-secondary-rgb:        var(--lu-secondary-rgb);
  --si-success:              var(--lu-success);
  --si-success-rgb:          var(--lu-success-rgb);
  --si-warning:              var(--lu-warning);
  --si-warning-rgb:          var(--lu-warning-rgb);
  --si-danger:               var(--lu-danger);
  --si-danger-rgb:           var(--lu-danger-rgb);
  --si-info:                 var(--lu-info);
  --si-info-rgb:             var(--lu-info-rgb);
  --si-dark:                 var(--lu-dark);
  --si-dark-rgb:             var(--lu-dark-rgb);
  --si-light:                var(--lu-light);
  --si-body-color:           var(--lu-gray-600);
  --si-body-bg:              var(--lu-white);
  --si-border-color:         var(--lu-border-color);
  --si-link-color:           var(--lu-primary);
  --si-link-hover-color:     var(--lu-primary-dark);
  --si-link-color-rgb:       var(--lu-primary-rgb);
  --si-focus-ring-color:     rgba(var(--lu-primary-rgb), 0.25);
  --si-heading-color:        var(--lu-black);

  /* Gray scale bridge */
  --si-gray-600:             var(--lu-gray-600);
  --si-gray-800:             var(--lu-gray-800);
  --si-gray-900:             var(--lu-black);

  /* Subtle bg / border variants used by Bootstrap internally */
  --si-primary-bg-subtle:    var(--lu-faded-primary);
  --si-primary-border-subtle: rgba(var(--lu-primary-rgb), 0.35);
  --si-primary-text-emphasis: var(--lu-primary-dark);

  --si-secondary-bg-subtle:  var(--lu-faded-secondary);
  --si-success-bg-subtle:    var(--lu-faded-success);
  --si-warning-bg-subtle:    var(--lu-faded-warning);
  --si-danger-bg-subtle:     var(--lu-faded-danger);
  --si-info-bg-subtle:       var(--lu-faded-info);

  /* Nav */
  --si-nav-link-color:       var(--lu-gray-600);
  --si-nav-link-hover-color: var(--lu-primary);
  --si-nav-link-active-color: var(--lu-primary);

  /* Navbar */
  --si-navbar-color:         #cccccc;
  --si-navbar-hover-color:   var(--lu-primary);
  --si-navbar-active-color:  var(--lu-primary);
  --si-navbar-stuck-bg:      var(--lu-white);

  /* Dropdown */
  --si-dropdown-link-hover-color:  var(--lu-primary);
  --si-dropdown-link-active-color: var(--lu-primary);

  /* Accordion */
  --si-accordion-btn-icon-box-active-bg:     var(--lu-primary);
  --si-accordion-btn-icon-box-active-shadow: 0 -0.5rem 1.125rem -0.5rem rgba(var(--lu-primary-rgb), 0.9);
  --si-accordion-btn-focus-border-color:     rgba(var(--lu-primary-rgb), 0.35);

  /* Progress */
  --si-progress-bar-bg:      var(--lu-primary);

  /* Pagination */
  --si-pagination-color:         var(--lu-gray-800);
  --si-pagination-hover-color:   var(--lu-primary);
  --si-pagination-hover-bg:      var(--lu-faded-primary);
  --si-pagination-active-color:  var(--lu-white);
  --si-pagination-active-bg:     var(--lu-primary);
  --si-pagination-active-border-color: var(--lu-primary);

  /* Forms */
  --si-form-valid-color:         var(--lu-success);
  --si-form-valid-border-color:  var(--lu-success);
  --si-form-invalid-color:       var(--lu-danger);
  --si-form-invalid-border-color: var(--lu-danger);

  /* Breadcrumb */
  --si-breadcrumb-item-active-color: var(--lu-primary);

  /* Cards */
  --si-card-border-color:    var(--lu-border-color);
  --si-card-border-radius:   0.5rem;
}


/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */

/* @import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); */

:root {
  --lu-font-primary:   'Google Sans', system-ui, sans-serif;
  --lu-font-secondary: 'Barlow', sans-serif;
  --lu-font-mono:      SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace;

  --si-body-font-family: var(--lu-font-primary);
  --si-font-sans-serif:  var(--lu-font-primary);
  --si-font-monospace:   var(--lu-font-mono);
}

body {
  font-family: var(--lu-font-primary);
  font-optical-sizing: auto;
  font-variation-settings: "GRAD" 0;
  color: var(--lu-gray-600);
  background: var(--lu-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, .h1, h2, .h2, h3, .h3,
h4, .h4, h5, .h5, h6, .h6 {
  font-weight: 900;
  line-height: 1.1;
  color: var(--lu-black);
  margin-bottom: 1rem;
}

h1, .h1 {
  font-size: clamp(36px, 5vw, 62px);
  letter-spacing: -2px;
  line-height: 1.05;
  margin-bottom: 1.37rem;
}

h2, .h2 {
  font-size: clamp(28px, 4vw, 46px);
  letter-spacing: -1.5px;
  line-height: 1.1;
}

h4, .h4, h5, .h5, h6, .h6 { line-height: 1.4; }

/* Heading links */
h1 > a, .h1 > a, h2 > a, .h2 > a,
h3 > a, .h3 > a, h4 > a, .h4 > a,
h5 > a, .h5 > a, h6 > a, .h6 > a {
  color: var(--lu-gray-800);
  text-decoration: none;
}
h1 > a:hover, h2 > a:hover, h3 > a:hover,
h4 > a:hover, h5 > a:hover, h6 > a:hover {
  color: var(--lu-primary);
}

/* Font family helpers */
.inter        { font-family: 'Inter', sans-serif; }
.barlow       { font-family: var(--lu-font-secondary); }
.google-sans  { font-family: var(--lu-font-primary); }

/* Font size helpers */
.fs-md  { font-size: 0.925rem; }
.fs-lg  { font-size: 1.125rem; line-height: 1.65; }
.fs-sm  { font-size: 0.875rem; }
.fs-xs  { font-size: 0.75rem; }

/* Font weight */
.fw-bolder { font-weight: 900 !important; }

/* Letter spacing */
.ls-0 { letter-spacing: 0; }
.ls-1 { letter-spacing: 1px; }
.ls-sm { letter-spacing: -0.03em; }

b, strong { font-weight: 800; }
small, .small { font-weight: inherit; }


/* ============================================================
   4. BASE / RESET OVERRIDES
   ============================================================ */

html, body { height: 100%; }

body {
  display: flex;
  flex-direction: column;
}

.page-wrapper { flex: 1 0 auto; }
.footer       { flex-shrink: 0; }

a             { transition: color 0.2s ease-in-out; }
a:focus       { outline: none; }

img, figure   { max-width: 100%; height: auto; vertical-align: middle; }
svg           { max-width: 100%; }
iframe        { width: 100%; border: 0; }

button:focus  { outline: none; }

::selection   { background: rgba(var(--lu-primary-rgb), 0.22); }
::-moz-selection { background: rgba(var(--lu-primary-rgb), 0.22); }

.dark-mode-img  { display: none; }


/* ============================================================
   5. BOOTSTRAP COMPONENT OVERRIDES
   ============================================================ */

/* ── 5a. BUTTONS ── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out,
              border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out,
              transform 0.15s ease-in-out;
}
.btn:hover, .btn:disabled, .btn.disabled { box-shadow: none !important; }

/* Primary → Teal background, dark text, lime on hover */
.btn-primary {
  --si-btn-color:               var(--lu-black);
  --si-btn-bg:                  var(--lu-primary);
  --si-btn-border-color:        var(--lu-primary);
  --si-btn-hover-color:         var(--lu-black);
  --si-btn-hover-bg:            var(--lu-secondary);
  --si-btn-hover-border-color:  var(--lu-secondary);
  --si-btn-active-color:        var(--lu-black);
  --si-btn-active-bg:           var(--lu-secondary-hover);
  --si-btn-active-border-color: var(--lu-secondary-hover);
  --si-btn-focus-shadow-rgb:    var(--lu-primary-rgb);
  --si-btn-disabled-color:      var(--lu-black);
  --si-btn-disabled-bg:         var(--lu-primary);
  --si-btn-disabled-border-color: var(--lu-primary);
  font-weight: 800;
}
.btn-primary:hover { transform: translateY(-2px); }

/* Secondary → Lime CTA (main action button) */
.btn-secondary {
  --si-btn-color:               var(--lu-black);
  --si-btn-bg:                  var(--lu-secondary);
  --si-btn-border-color:        var(--lu-secondary);
  --si-btn-hover-color:         var(--lu-black);
  --si-btn-hover-bg:            var(--lu-secondary-hover);
  --si-btn-hover-border-color:  var(--lu-secondary-hover);
  --si-btn-active-color:        var(--lu-black);
  --si-btn-active-bg:           var(--lu-secondary-hover);
  --si-btn-active-border-color: var(--lu-secondary-hover);
  --si-btn-disabled-color:      var(--lu-black);
  --si-btn-disabled-bg:         var(--lu-secondary);
  font-weight: 800;
}
.btn-secondary:hover { transform: translateY(-2px); opacity: 0.9; }

/* Dark */
.btn-dark {
  --si-btn-color:               var(--lu-white);
  --si-btn-bg:                  var(--lu-dark);
  --si-btn-border-color:        var(--lu-dark);
  --si-btn-hover-color:         var(--lu-white);
  --si-btn-hover-bg:            #000000;
  --si-btn-hover-border-color:  #000000;
  --si-btn-active-color:        var(--lu-white);
  --si-btn-active-bg:           #000000;
  --si-btn-disabled-color:      var(--lu-white);
}

/* Light */
.btn-light {
  --si-btn-color:               var(--lu-gray-800);
  --si-btn-bg:                  var(--lu-white);
  --si-btn-border-color:        var(--lu-white);
  --si-btn-hover-color:         var(--lu-black);
  --si-btn-hover-bg:            var(--lu-gray-100);
  --si-btn-hover-border-color:  var(--lu-gray-100);
  --si-btn-disabled-color:      var(--lu-gray-600);
}

/* Outline Primary → Teal border/text, fills on hover */
.btn-outline-primary {
  --si-btn-color:               var(--lu-primary);
  --si-btn-border-color:        rgba(var(--lu-primary-rgb), 0.5);
  --si-btn-hover-color:         var(--lu-black);
  --si-btn-hover-bg:            var(--lu-primary);
  --si-btn-hover-border-color:  var(--lu-primary);
  --si-btn-active-color:        var(--lu-black);
  --si-btn-active-bg:           var(--lu-primary);
  --si-btn-active-border-color: var(--lu-primary);
  --si-btn-disabled-color:      var(--lu-primary);
  --si-btn-disabled-border-color: rgba(var(--lu-primary-rgb), 0.5);
}

/* Outline Secondary */
.btn-outline-secondary {
  --si-btn-color:               var(--lu-gray-800);
  --si-btn-border-color:        var(--lu-gray-200);
  --si-btn-hover-color:         var(--lu-black);
  --si-btn-hover-bg:            var(--lu-gray-100);
  --si-btn-hover-border-color:  var(--lu-gray-200);
  --si-btn-active-color:        var(--lu-black);
  --si-btn-active-bg:           var(--lu-gray-100);
  --si-btn-disabled-color:      var(--lu-gray-600);
  --si-btn-disabled-border-color: var(--lu-gray-200);
}

/* Outline Dark */
.btn-outline-dark {
  --si-btn-border-color:        rgba(11, 15, 25, 0.21);
  --si-btn-disabled-border-color: rgba(11, 15, 25, 0.21);
  --si-btn-hover-color:         var(--lu-white);
  --si-btn-active-color:        var(--lu-white);
}

/* Outline Light (for dark section use) */
.btn-outline-light {
  --si-btn-color:               var(--lu-white);
  --si-btn-border-color:        rgba(255, 255, 255, 0.35);
  --si-btn-hover-color:         var(--lu-gray-800);
  --si-btn-hover-bg:            var(--lu-white);
  --si-btn-hover-border-color:  var(--lu-white);
  --si-btn-active-color:        var(--lu-gray-800);
  --si-btn-active-bg:           var(--lu-white);
  --si-btn-disabled-color:      rgba(255, 255, 255, 0.5);
  --si-btn-disabled-border-color: rgba(255, 255, 255, 0.14);
}



/* Success / Danger / Warning / Info — inherit from semantic vars */
.btn-success {
  --si-btn-color:     var(--lu-white);
  --si-btn-bg:        var(--lu-success);
  --si-btn-border-color: var(--lu-success);
  --si-btn-hover-color: var(--lu-white);
  --si-btn-hover-bg:  #1ca44e;
  --si-btn-hover-border-color: #1ca44e;
  --si-btn-disabled-color: var(--lu-white);
}

.btn-danger {
  --si-btn-color:     var(--lu-white);
  --si-btn-bg:        var(--lu-danger);
  --si-btn-border-color: var(--lu-danger);
  --si-btn-hover-color: var(--lu-white);
  --si-btn-hover-bg:  #ec2121;
  --si-btn-hover-border-color: #ec2121;
  --si-btn-disabled-color: var(--lu-white);
}

.btn-warning {
  --si-btn-color:     var(--lu-white);
  --si-btn-bg:        var(--lu-warning);
  --si-btn-border-color: var(--lu-warning);
  --si-btn-hover-color: var(--lu-white);
  --si-btn-hover-bg:  #e1a200;
  --si-btn-hover-border-color: #e1a200;
  --si-btn-disabled-color: var(--lu-white);
}

/* Link button */
.btn-link {
  --si-btn-font-weight: 600;
  text-decoration: none;
}

/* TEMP Override color unset but si-btn-color isn't defined */
a.btn, a.btn:visited {
  color: var(--si-btn-color);
}

/* Scroll-to-top */
.btn-scroll-top {
  --si-btn-scroll-top-bg:       rgba(11, 15, 25, 0.2);
  --si-btn-scroll-top-hover-bg: rgba(11, 15, 25, 0.4);
  --si-btn-scroll-top-color:    var(--lu-white);
}


/* ── 5b. BADGES ── */

.badge {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: 12px;
}

.badge.bg-secondary,
.badge.bg-light { color: var(--lu-gray-800); }

/* Accessible teal badge — uses primary-dark for contrast on light bg */
.badge-primary {
   background: var(--lu-faded-primary);
	color: var(--lu-primary-dark);
	padding: .5rem 1rem;
	border-radius: var(--si-border-radius-pill);
}

/* Inverted teal badge for dark sections */
.sec-dark .badge-primary {
  background: var(--lu-faded-primary);
  color: var(--lu-primary);
}


/* ── 5c. ALERTS ── */

.alert-primary {
  --si-alert-color:        var(--lu-primary-dark);
  --si-alert-bg:           var(--lu-faded-primary);
  --si-alert-border-color: rgba(var(--lu-primary-rgb), 0.35);
  --si-alert-link-color:   var(--lu-primary-dark);
}
.alert-success {
  --si-alert-color:        #1a9a49;
  --si-alert-bg:           var(--lu-faded-success);
  --si-alert-border-color: rgba(var(--lu-success-rgb), 0.35);
}
.alert-warning {
  --si-alert-color:        #78350f;
  --si-alert-bg:           var(--lu-faded-warning);
  --si-alert-border-color: rgba(var(--lu-warning-rgb), 0.35);
}
.alert-danger {
  --si-alert-color:        #c61111;
  --si-alert-bg:           var(--lu-faded-danger);
  --si-alert-border-color: rgba(var(--lu-danger-rgb), 0.35);
}


/* ── 5d. FORMS ── */

.form-control:focus,
.form-select:focus {
  border-color: rgba(var(--lu-primary-rgb), 0.35);
  box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(var(--lu-primary-rgb), 0.2);
}
.form-check-input:focus { box-shadow: none; }
.form-check-input:checked {
  background-color: var(--lu-primary);
  border-color: var(--lu-primary);
}
.form-switch .form-check-input:checked {
  background-color: var(--lu-primary);
  box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(var(--lu-primary-rgb), 0.9);
}

/* ── 5e. CARDS ── */

.card-hover:not(.bg-transparent) {
  transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out,
              background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.card-hover:not(.bg-transparent):hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 0.275rem 0.75rem -0.0625rem rgba(11, 15, 25, 0.06),
              0 0.125rem 0.4rem -0.0625rem rgba(11, 15, 25, 0.03);
}
.card-hover:not(.bg-transparent).border-primary:hover {
  box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(var(--lu-primary-rgb), 0.9) !important;
}

/* ── 5f. NAV / NAVBAR ── */

.nav-link.active { color: var(--lu-primary); }

.nav-tabs {
  --si-nav-tabs-link-active-bg:    var(--lu-primary);
  --si-nav-tabs-link-active-color: var(--lu-white);
  --si-nav-tabs-link-hover-bg:     var(--lu-faded-primary);
  --si-nav-tabs-link-hover-color:  var(--lu-primary);
}

.nav-pills {
  --si-nav-pills-link-active-bg:    var(--lu-primary);
  --si-nav-pills-link-active-color: var(--lu-white);
}

.navbar .nav-item:hover > .nav-link:not(.disabled) { color: var(--lu-primary); }
.navbar .nav-item.active > .nav-link:not(.disabled) { color: var(--lu-primary); }

/* Dropdown caret override — plain arrow instead of boxicon default */
.dropdown-toggle::after { content: "↓"; border: none; }

/* ── 5g. ACCORDION ── */

.accordion-button:not(.collapsed)::after {
  background-color: var(--lu-primary);
  box-shadow: 0 -0.5rem 1.125rem -0.5rem rgba(var(--lu-primary-rgb), 0.9);
}
.accordion-button:focus {
  border-color: rgba(var(--lu-primary-rgb), 0.35);
  box-shadow: none;
}

/* ── 5h. PAGINATION ── */

.page-link:hover       { color: var(--lu-primary); background-color: var(--lu-faded-primary); }
.page-link:focus       { color: var(--lu-primary); box-shadow: none; }
.page-item.active .page-link {
  color: var(--lu-white);
  background-color: var(--lu-primary);
  border-color: var(--lu-primary);
  box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(var(--lu-primary-rgb), 0.9);
}

/* ── 5i. PROGRESS ── */

.progress-bar { background-color: var(--lu-primary); }

/* ── 5j. DROPDOWNS ── */

.dropdown-item:hover,
.dropdown-item:focus { color: var(--lu-primary); }
.dropdown-item.active,
.dropdown-item:active { color: var(--lu-primary); background-color: transparent; }


/* ============================================================
   6. SECTION THEME SYSTEM
   Light is the default — no class required.
   Add .sec-dark to a <section> for full dark theme cascade.
   Add .sec-light for explicit light overrides inside dark pages.
   ============================================================ */

/* --- .sec-light (explicit) --- */
.sec-light {
  background-color: var(--lu-light);
  color: var(--lu-gray-600);
}
.sec-light h1, .sec-light .h1,
.sec-light h2, .sec-light .h2,
.sec-light h3, .sec-light .h3,
.sec-light h4, .sec-light .h4,
.sec-light h5, .sec-light .h5,
.sec-light h6, .sec-light .h6 { color: var(--lu-black); }

/* --- .sec-dark --- */
.sec-dark {
  background-color: var(--lu-dark);
  color: rgba(255, 255, 255, 0.7);
}

/* Headings in dark sections */
.sec-dark h1, .sec-dark .h1,
.sec-dark h2, .sec-dark .h2,
.sec-dark h3, .sec-dark .h3,
.sec-dark h4, .sec-dark .h4,
.sec-dark h5, .sec-dark .h5,
.sec-dark h6, .sec-dark .h6 { color: var(--lu-white); }

/* Body text */
.sec-dark p,
.sec-dark ul,
.sec-dark ol,
.sec-dark .fs-lg,
.sec-dark .fs-md { color: rgba(255, 255, 255, 0.7); }

/* Links */
.sec-dark a:not(.btn) { color: var(--lu-primary); }
.sec-dark a:not(.btn):hover { color: var(--lu-primary-light); }

/* Muted text */
.sec-dark .text-muted { color: rgba(255, 255, 255, 0.5) !important; }

/* Nav links inside dark sections */
.sec-dark .nav-link { color: rgba(255, 255, 255, 0.85); }
.sec-dark .nav-link:hover,
.sec-dark .nav-link:focus { color: var(--lu-primary); }

/* Cards in dark sections — auto surface elevation */
.sec-dark .card {
  background-color: var(--lu-dark-surface);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}
.sec-dark .card h1, .sec-dark .card .h1,
.sec-dark .card h2, .sec-dark .card .h2,
.sec-dark .card h3, .sec-dark .card .h3,
.sec-dark .card h4, .sec-dark .card .h4,
.sec-dark .card h5, .sec-dark .card .h5,
.sec-dark .card h6, .sec-dark .card .h6 { color: var(--lu-white); }

.sec-dark .card-hover:not(.bg-transparent):hover {
  background-color: var(--lu-dark-ui);
  border-color: rgba(var(--lu-primary-rgb), 0.2);
}

/* Form controls in dark sections */
.sec-dark .form-control,
.sec-dark .form-select {
  color: rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
}
.sec-dark .form-control::placeholder { color: rgba(255, 255, 255, 0.4); }
.sec-dark .form-control:focus,
.sec-dark .form-select:focus {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: none;
}

/* Borders in dark sections */
.sec-dark .border,
.sec-dark [class*="border-"] { border-color: rgba(255, 255, 255, 0.1) !important; }

/* hr in dark sections */
.sec-dark hr { border-color: rgba(255, 255, 255, 0.1); }

/* Badge in dark sections */
.sec-dark .badge-primary {
  background: var(--lu-faded-primary);
  color: var(--lu-primary);
}

/* Accordion in dark sections */
.sec-dark .accordion-item {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}
.sec-dark .accordion-button {
  color: var(--lu-white);
  background-color: transparent;
}
.sec-dark .accordion-button:not(.collapsed) { color: var(--lu-white); }

/* Dropdown in dark sections */
.sec-dark .dropdown-menu {
  background-color: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.14);
}
.sec-dark .dropdown-item { color: rgba(255, 255, 255, 0.85); }
.sec-dark .dropdown-item:hover { color: var(--lu-primary); }

/* List groups in dark sections */
.sec-dark .list-group-item {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}


/* ============================================================
   7. CUSTOM UTILITY CLASSES
   ============================================================ */

/* ── 7a. BACKGROUNDS ── */

.bg-primary          { background-color: var(--lu-primary) !important; }
.bg-secondary        { background-color: var(--lu-secondary) !important; }
.bg-dark             { background-color: var(--lu-dark) !important; }
.bg-light            { background-color: var(--lu-light) !important; }
.bg-black            { background-color: var(--lu-black) !important; }
.bg-lime             { background-color: var(--lu-secondary) !important; }

/* Faded / subtle fills */
.bg-faded-primary    { background-color: var(--lu-faded-primary) !important; }
.bg-faded-secondary  { background-color: var(--lu-faded-secondary) !important; }
.bg-faded-success    { background-color: var(--lu-faded-success) !important; }
.bg-faded-warning    { background-color: var(--lu-faded-warning) !important; }
.bg-faded-danger     { background-color: var(--lu-faded-danger) !important; }
.bg-faded-info       { background-color: var(--lu-faded-info) !important; }
.bg-faded-green      { background-color: var(--lu-faded-green) !important; }
.bg-faded-light      { background-color: var(--lu-faded-light) !important; }
.bg-faded-dark       { background-color: var(--lu-faded-dark) !important; }

/* Gradient backgrounds */
.bg-gradient-primary {
  background: linear-gradient(90deg,
    var(--lu-primary) 0%,
    var(--lu-primary-dark) 100%) !important;
}

.bg-gradient-mc {
    background: radial-gradient(circle at 30% 30%,
      rgba(78, 211, 207, 0.12) 0%,
      transparent 50%),
      radial-gradient(circle at 75% 75%, 
      rgba(204, 255, 0, 0.08) 0%, 
      transparent 50%);
}

.bg-dark-radial {
  background:
    radial-gradient(circle at 50% 18%,
      rgba(33, 37, 41, 0.55) 0%,
      rgba(10, 10, 10, 0.15) 32%,
      rgba(0, 0, 0, 0) 58%),
    linear-gradient(180deg, #050505 0%, #080808 38%, #030303 100%);
}

/* Subtle depth for near-black UI surfaces (replaces bg-black-ui) */
.bg-dark-ui {
  background:
    radial-gradient(circle at 50% 18%,
      rgba(33, 37, 41, 0.55) 0%,
      rgba(10, 10, 10, 0.15) 32%,
      rgba(0, 0, 0, 0) 58%),
    linear-gradient(180deg, #050505 0%, #080808 38%, #030303 100%);
}

/* Legacy alias — kept so existing markup doesn't break */
.bg-black-ui { background: var(--lu-dark-surface); }

.bg-primary-glow {
  background: radial-gradient(circle at center,
    rgba(78, 211, 207, 0.15), transparent 60%);
}

/* Overlay helpers */
.overlay-gradient {
  background: linear-gradient(to right, rgb(0 0 0) 0%, rgba(56, 196, 199, 0.17) 65%);
  z-index: 1;
}


/* ── 7b. TEXT ── */

.text-primary       { color: var(--lu-primary) !important; }
.text-primary-dark  { color: var(--lu-primary-dark) !important; }
.text-secondary     { color: var(--lu-secondary) !important; }
.text-lime          { color: var(--lu-secondary) !important; }
.text-dark          { color: var(--lu-black) !important; }
.text-light         { color: rgba(255, 255, 255, 0.85) !important; }
.text-muted         { color: var(--lu-gray-600) !important; }
.text-white         { color: var(--lu-white) !important; }
.text-success       { color: var(--lu-success) !important; }
.text-danger        { color: var(--lu-danger) !important; }
.text-warning       { color: var(--lu-warning) !important; }
.text-info          { color: var(--lu-info) !important; }
.text-green         { color: var(--lu-green) !important; }
.text-green-light   { color: var(--lu-green-light) !important; }
.text-green-dark    { color: var(--lu-green-dark) !important; }
.text-gray-600      { color: var(--lu-gray-600) !important; }


/* ── 7c. BORDERS ── */

.border-primary         { border-color: var(--lu-primary) !important; }
.border-secondary       { border-color: var(--lu-secondary) !important; }
.border-green           { border-color: rgba(93, 168, 50, 0.3) !important; }

.border-primary-hover { transition: border-color 0.2s; }
.border-primary-hover:hover { border-color: var(--lu-primary) !important; }


/* ── 7d. SHADOWS ── */

.shadow-primary {
  box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(var(--lu-primary-rgb), 0.9) !important;
}
.shadow-secondary {
  box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(var(--lu-secondary-rgb), 0.5) !important;
}
.shadow-dark {
  box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(11, 15, 25, 0.9) !important;
}
.shadow-success {
  box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(var(--lu-success-rgb), 0.9) !important;
}

.shadow-xl {
    box-shadow: 0 2px 0 var(--lu-primary), 0 8px 48px rgba(0, 0, 0, 0.1);
}


/* ── 7e. SPACING / LAYOUT HELPERS ── */

.icon-lg {
  width: 44px;
  height: 44px;
}

.zindex-1 { z-index: 1 !important; }
.zindex-2 { z-index: 2 !important; }
.zindex-5 { z-index: 5 !important; }


.mw-300 { max-width: 300px; }
.mw-350 { max-width: 350px; }
.mw-400 { max-width: 400px; }
.mw-450 { max-width: 450px; }
.mw-500 { max-width: 500px; }
.mw-550 { max-width: 550px; }
.mw-600 { max-width: 600px; }
.mw-650 { max-width: 650px; }
.mw-700 { max-width: 700px; }
.mw-750 { max-width: 750px; }
.mw-800 { max-width: 800px; }
.mw-850 { max-width: 850px; }
.mw-900 { max-width: 900px; }
.mw-950 { max-width: 950px; }


/* ============================================================
   8. CUSTOM COMPONENTS
   ============================================================ */

/* ── 8a. BUTTONS (Extended) ── */

/* Lime CTA — alias for btn-secondary, explicit class for readability */
.btn-lime {
  background: var(--lu-secondary);
  color: var(--lu-black);
  border: none;
  font-weight: 800;
  padding: 15px 30px;
  border-radius: 8px;
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.15s, opacity 0.15s;
}
.btn-lime:hover {
  transform: translateY(-2px);
  opacity: 0.9;
  background-color: var(--lu-secondary);
  color: var(--lu-black);
}

/* 3D effect (thick box shadow) */
.btn-3d {
    box-shadow: 4px 4px 0 0 var(--lu-black);
}
.btn-3d:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 0 var(--lu-black) !important;
}

/* Outline style (used for secondary CTAs) */
.btn-outline {
  border: 2px solid var(--lu-black);
  color: var(--lu-black);
  padding: 15px 30px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.2s, color 0.2s;
}
.btn-outline:hover {
  border-color: var(--lu-primary);
  color: var(--lu-primary);
}

/* Arrow link (inline text CTAs) */
.link-arrow {
  color: var(--lu-primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s;
}
.link-arrow::after { content: "→"; font-size: 1em; }
.link-arrow:hover  { gap: 8px; color: var(--lu-primary); }

/* Video play button */
.btn-video {
  --si-btn-video-bg:         var(--lu-white);
  --si-btn-video-hover-bg:   var(--lu-primary);
  --si-btn-video-color:      var(--lu-gray-800);
  --si-btn-video-hover-color: var(--lu-white);
  --si-btn-video-shadow:     0 0.275rem 0.75rem -0.0625rem rgba(11, 15, 25, 0.06),
                              0 0.125rem 0.4rem -0.0625rem rgba(11, 15, 25, 0.03);
  --si-btn-video-hover-shadow: 0 0.5rem 1.125rem -0.5rem rgba(var(--lu-primary-rgb), 0.9);
}

/* Scroll top */
.btn-scroll-top.show { bottom: 1.25rem; opacity: 1; }

/* Carousel nav buttons */
.btn-prev, .btn-next {
  --si-carousel-nav-btn-hover-bg:         var(--lu-primary);
  --si-carousel-nav-btn-hover-box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(var(--lu-primary-rgb), 0.9);
}


/* ── 8b. CARDS (Custom) ── */

/* Dark card — simple solid dark surface */
.card-dark {
  background: var(--lu-dark-surface);
  padding: 32px 28px;
  border-right: 2px solid #1a1a1a;
  border-bottom: 2px solid #1a1a1a;
  border-left: 0;
  border-top: 0;
  transition: background 0.2s;
  cursor: default;
}
.card-dark:hover { background: var(--lu-dark-ui); }

/* Dark card — glass/depth variant for feature grids */
.card-dark-ui {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.02) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 0;
  border-left: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(255, 255, 255, 0.02),
    0 18px 50px rgba(0, 0, 0, 0.35) !important;
}
.card-dark-ui:hover {
  background: linear-gradient(180deg,
    rgba(28, 28, 28, 0.92) 0%,
    rgba(14, 14, 14, 0.96) 100%) !important;
  border-color: rgba(var(--lu-primary-rgb), 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 1px rgba(var(--lu-primary-rgb), 0.06),
    0 24px 60px rgba(0, 0, 0, 0.45) !important;
  transform: translateY(-3px);
  transition: all 0.25s ease;
}


/* ── 8c. BADGES (Custom) ── */

/* Pill badge — standard size for section labels */
.badge-pill-label {
  background: var(--lu-faded-primary);
  color: var(--lu-primary-dark);
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}


/* ── 8d. STEPS ── */

/* Connects inherit brand gradient */
.step:not(:first-child)::before,
.step:not(:last-child)::after {
  background-color: var(--lu-border-color);
}


/* ── 8e. SLIDEOUT PANELS ── */

.slideout {
  position: fixed;
  transform: translateX(103%);
  transition: transform 0.5s ease-in-out;
  width: 370px;
  z-index: 13000;
  overflow-x: hidden;
  box-shadow: -3px -3px 6px rgba(0, 0, 0, 0.125);
}
.slideout.active       { transform: translateX(0); }
.slideout-overlay {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100vh;
  z-index: 12000;
  display: none;
}
.slideout-inner {
  min-width: 370px;
  padding-top: 100px !important;
  padding-bottom: 120px !important;
}
@media (min-width: 1056px) {
  .slideout-inner { padding-top: 120px !important; }
}


/* ── 8f. SWIPER / CAROUSEL ── */

.swiper-pagination {
  --si-carousel-pagination-bullet-active-bg: var(--lu-primary);
}
.swiper-pagination-bullet-active { background-color: var(--lu-primary); }

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background-color: var(--lu-primary);
}


/* ── 8g. GALLERY ── */

.gallery-item.video-item:hover::after {
  color: var(--lu-gray-800);
  background-color: var(--lu-white);
}


/* ── 8h. MISC UI ── */

/* Coverage map */
.lu-map-wrap {
  background: var(--lu-black);
  border-radius: 20px;
  min-height: 380px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lu-map-dots {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-image: radial-gradient(circle, var(--lu-primary) 1px, transparent 1px);
  background-size: 24px 24px;
}
.lu-map-pin {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lu-primary);
  box-shadow: 0 0 0 4px rgba(var(--lu-primary-rgb), 0.2);
  animation: lu-pulse 2s infinite;
}
.lu-map-pin.main {
  width: 14px;
  height: 14px;
  background: var(--lu-secondary);
  box-shadow: 0 0 0 6px rgba(var(--lu-secondary-rgb), 0.2);
}
@keyframes lu-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(var(--lu-primary-rgb), 0.2); }
  50%       { box-shadow: 0 0 0 9px rgba(var(--lu-primary-rgb), 0.06); }
}

/* Neighborhood tags */
.lu-nbhd-tag {
  background: var(--lu-white);
  border: 1px solid var(--lu-border-color);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--lu-gray-600);
  display: inline-block;
}
.lu-nbhd-tag.hi {
  background: var(--lu-primary-light);
  border-color: rgba(var(--lu-primary-rgb), 0.4);
  color: var(--lu-primary-dark);
}

/* Audio player */
.audio-player { --prefixaudio-player-theme: var(--lu-primary); }

/* Review summary bars */
.lu-bar-fill {
  height: 100%;
  background: var(--lu-primary);
  border-radius: 3px;
}
.lu-bar-track {
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

/* img-comparison-slider */
img-comparison-slider {
  --divider-color: var(--lu-primary);
}

/* Subscription status messages */
.subscription-status.status-success {
  color: #1a9a49;
  background-color: var(--lu-faded-success);
}
.subscription-status.status-error {
  color: var(--lu-danger);
  background-color: var(--lu-faded-danger);
}

/* Dark mode navbar sticky bg */
.navbar-dark,
.navbar[data-bs-theme=dark] {
  --si-navbar-stuck-bg: var(--lu-dark);
}