/* --- 1. CORE VARIABLES --- */
      :root {
          /* Palette */
          --navy-brand: #0B1B38;
          /* Primary Brand Color */
          --wealth-dark: #13161C;
          /* Pitch Black/Navy mix for Wealth */

          --gold-accent: #D4AF37;
          /* Wealth Color */
          --electric-blue: #2970FF;
          /* Product Color */

          --product-bg: #F5F7FA;
          /* Clean Tech Background */

          --container-width: 1250px;
          --text-dark: #1A202C;
      }

      /* --- 2. RESET & TYPOGRAPHY --- */
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }



      html {
          scroll-behavior: smooth;
      }

      html,
      body {
          overflow-x: hidden;
          width: 100%;
      }

      body {
          font-family: 'Manrope', sans-serif;
          color: #333;
          line-height: 1.7;
          -webkit-font-smoothing: antialiased;
      }

      .hero {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          height: 60vh;
          min-height: 500px;
          overflow: hidden;
      }

      .hero-inner {
          position: relative;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .hero-content {
          position: relative;
          z-index: 2;
          max-width: 1000px;
          width: 100%;
          padding: 0 24px;
      }

      .hero h1 {
          color: #FFFFFF;
          font-size: 4.5rem;
          line-height: 1.1;
          margin-bottom: 24px;
      }

      .hero p {
          color: rgba(255, 255, 255, 0.95);
          font-size: 1.4rem;
          font-weight: 300;
          max-width: 800px;
          margin: 0 auto;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
          color: white;
          font-family: 'Playfair Display', serif;
          color: var(--navy-brand);
      }


      a {
          text-decoration: none;
          transition: all 0.3s ease;
      }

      /* =========================
   CONTAINER
========================= */
      .container {
          max-width: var(--container-width);
          margin: 0 auto;
          padding: 0 24px;
      }

      /* =========================
   NAVBAR
========================= */
      nav {
          background-color: var(--navy-brand);
          height: 90px;
          position: sticky;
          top: 0;
          z-index: 9999;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
          width: 100%;
      }

      /* Inner nav container */
      .nav-inner {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 100%;
          width: 100%;
          max-width: var(--container-width);
          margin: 0 auto;
          padding: 0 24px;
      }

      /* LOGO WRAPPER */
      .logo {
          overflow: hidden;
          display: flex;
          align-items: center;
          height: 90px;
          flex-shrink: 0;
      }

      .logo a {
          display: flex;
          align-items: center;
          height: 100%;
          text-decoration: none;
      }

      /* SVG IMAGE - Standardized for all pages */
      .logo img {
          height: 180px !important;
          width: auto;
          object-fit: contain;
          object-position: center;
          display: block;
          transition: transform 0.3s ease;
      }

      /* DESKTOP LINKS */
      .nav-links {
          display: flex;
          gap: 30px;
          align-items: center;
      }

      .nav-links a {
          color: rgba(255, 255, 255, 0.9);
          font-size: 13px;
          font-weight: 600;
          letter-spacing: 0.6px;
          text-transform: uppercase;
      }

      .nav-links a:hover {
          color: var(--gold-accent);
      }

      /* CTA BUTTON */
      .btn-nav-cta {
          border: 2px solid white;
          padding: 12px 24px;
          font-size: 12px;
          font-weight: 700;
          letter-spacing: 1px;
          text-transform: uppercase;
          color: white;
          transition: all 0.3s ease;
      }

      .btn-nav-cta:hover {
          background: white;
          color: var(--navy-brand);
          transform: scale(1.05);
      }

      /* =========================
   HAMBURGER
========================= */
      .hamburger {
          display: none;
          flex-direction: column;
          gap: 7px;
          cursor: pointer;
      }

      .hamburger span {
          width: 28px;
          height: 2px;
          background: white;
      }

      /* =========================
   MOBILE MENU
========================= */
      .mobile-menu {
          position: fixed;
          top: 0;
          left: 0;
          width: 85vw;
          max-width: 400px;
          height: 100dvh;
          background: var(--navy-brand);
          background: var(--navy-brand);
          padding: 80px 25px;
          display: flex;
          flex-direction: column;
          gap: 20px;
          transform: translateX(-100%);
          transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
          z-index: 1100;
          overflow-y: auto;
          box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
      }

      .mobile-menu.active {
          transform: translateX(0);
      }

      .mobile-menu a {
          color: white;
          font-size: 15px;
          letter-spacing: 1px;
          text-transform: uppercase;
          font-weight: 600;
          padding: 15px 0;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
          text-decoration: none;
      }

      .mobile-menu a:hover {
          color: var(--gold-accent);
      }

      .mobile-menu .btn-nav-cta {
          margin-top: 20px;
          border-color: var(--gold-accent);
          color: var(--gold-accent);
          text-align: center;
      }

      /* CLOSE BUTTON */
      .menu-close {
          position: absolute;
          top: 24px;
          right: 24px;
          font-size: 44px;
          background: none;
          border: none;
          color: white;
          cursor: pointer;
      }

      /* OVERLAY */
      .menu-overlay {
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.75);
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.4s ease;
          z-index: 1000;
      }

      .menu-overlay.active {
          opacity: 1;
          pointer-events: auto;
      }

      /* =========================
   FOOTER
========================= */

      .footer-quote {
          text-align: center;
          max-width: 1200px;
          margin: 0 auto 70px auto;
          padding: 0 20px;
      }

      .footer-quote h3 {
          font-family: 'Playfair Display', serif;
          font-style: italic;
          font-size: 2rem;
          color: white;
          line-height: 1.7;
          font-weight: 400;
      }

      .footer {
          background-color: var(--navy-brand);
          color: white;
          padding: 80px 0 50px 0;
      }

      /* Force white text in copyright even if bootstrap interfered */
      .copyright .text-white {
          color: white !important;
          opacity: 0.6;
      }

      .footer-synergy {
          text-align: center;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.5);
          margin: 10px auto 0 auto;
          max-width: 900px;
          letter-spacing: 0.5px;
          line-height: 1.7;
          padding-top: 10px;
      }

      /* HIGHLIGHTS */
      .highlight-wealth {
          color: var(--gold-accent);
          font-weight: 600;
      }

      .highlight-product {
          color: var(--electric-blue);
          font-weight: 600;
      }

      /* FOOTER GRID */
      .footer-cols {
          display: grid;
          grid-template-columns: 2fr 1fr 1fr 1.5fr;
          gap: 60px;
          padding-bottom: 20px;
      }

      .footer-brand .logo {
          font-size: 26px;
          font-family: 'Playfair Display', serif;
          font-weight: 700;
          letter-spacing: 1px;
      }

      .footer-brand p {
          font-size: 15px;
          color: rgba(255, 255, 255, 0.6);
          margin-top: 20px;
          line-height: 1.7;
      }

      /* FOOTER COLUMNS */
      .footer-col h4 {
          font-size: 11px;
          letter-spacing: 3px;
          margin-bottom: 30px;
          text-transform: uppercase;
          color: rgb(252, 252, 252);
      }

      .link-strategy {
          color: var(--gold-accent);
          font-size: 15px;
          text-decoration: underline;
          text-underline-offset: 5px;
          margin-top: 10px;
          display: inline-block;
      }

      .link-strategy:hover {
          color: white;
      }

      .footer-col ul {
          list-style: none;
      }

      .footer-col li {
          margin-bottom: 15px;
      }

      .footer-col a {
          color: rgb(255, 255, 255);
          font-size: 15px;
          transition: all 0.3s ease;
      }

      .footer-col a:hover {
          color: var(--gold-accent);

          padding-left: 5px;
      }

      /* CONTACT */
      .contact-details {
          display: flex;
          flex-direction: column;
          gap: 20px;
      }

      .contact-text {
          font-size: 15px;
          color: rgba(255, 255, 255, 0.7);
      }



      /* COPYRIGHT */
      .copyright {
          margin-top: 40px;
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          color: rgba(255, 255, 255, 0.3);
          letter-spacing: 0.5px;
      }

      /* =========================
   BREADCRUMB
========================= */
      .breadcrumb-container {
          position: absolute;
          top: 40px;
          left: 4%;
          width: 100%;
          z-index: 10;
      }

      .breadcrumb {
          font-size: 12px;
          text-transform: uppercase;
          letter-spacing: 1.5px;
          font-weight: 600;
          color: rgba(255, 255, 255, 0.6);
          text-align: left;
      }

      .breadcrumb a {
          color: white;
          border-bottom: 1px solid transparent;
      }

      .breadcrumb a:hover {
          color: var(--gold-accent);
          border-bottom-color: var(--gold-accent);
      }

      .breadcrumb span {
          color: var(--gold-accent);
          margin-left: 5px;
      }

      /* =========================
   RESPONSIVE
========================= */
      @media (max-width: 1010px) {
          .hero-inner {
              position: absolute;
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
          }

          .breadcrumb-container {
              position: absolute;
              top: 40px;
              left: 4%;
              width: 100%;
              z-index: 10;
          }

          .nav-links {
              display: none;
          }

          .hamburger {
              display: flex;
          }

          .container,
          .nav-inner {
              padding: 0 16px;
          }

          .hero {
              height: auto;
              min-height: 400px;
              padding: 120px 0 80px;
          }

          .hero h1 {
              font-size: 3rem;
          }

          .hero p {
              font-size: 1.15rem;
          }

          /* --- MOBILE FOOTER IMPROVEMENTS --- */
          .footer {
              padding: 60px 0 40px 0;
          }

          .footer-quote {
              margin-bottom: 50px;
          }

          .footer-quote h3 {
              font-size: 1.6rem;
              line-height: 1.5;
              padding: 0;
          }

          .footer-synergy {
              padding-top: 5px;
              font-size: 12px;
          }

          .footer-cols {
              grid-template-columns: 1fr;
              text-align: center;
              gap: 40px;
          }

          .footer-brand {
              display: flex;
              flex-direction: column;
              align-items: center;
              margin-bottom: 10px;
          }

          .footer-col h4 {
              margin-bottom: 20px;
          }

          .contact-details {
              align-items: center;
          }

          .copyright {
              flex-direction: column;
              gap: 12px;
              text-align: center;
              border-top: 1px solid rgba(255, 255, 255, 0.1);
              padding-top: 30px;
              margin-top: 50px;
          }

          .breadcrumb-container {
              position: absolute !important;
              top: 20px !important;
              left: 20px !important;
              width: calc(100% - 40px) !important;
              margin-bottom: 0 !important;
              z-index: 50 !important;
          }

          .breadcrumb {
              font-size: 10px !important;
              line-height: 1.5 !important;
              white-space: normal !important;
              display: block !important;
              text-align: left !important;
          }
      }