:root {
   --accent: #b81818;
   --accent-dk: #8f1010;
   --accent-lt: #d42020;
   --white: #ffffff;
   --off-white: #f7f7f7;
   --light-gray: #f0f0f0;
   --mid-gray: #e2e2e2;
   --text: #111111;
   --text-muted: #666666;
   --text-light: #999999;
   --border: rgba(0, 0, 0, 0.08);
   --card-bg: #ffffff;
   --card-shadow: 0 2px 24px rgba(0, 0, 0, 0.07);
   --font-head: "Outfit", sans-serif;
   --font-body: "DM Sans", sans-serif;
   --radius: 12px;
   --radius-lg: 20px;
 }

 *,
 *::before,
 *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 html {
   scroll-behavior: smooth;
 }

 body {
   font-family: var(--font-body);
   background: var(--off-white);
   color: var(--text);
   overflow-x: hidden;
   line-height: 1.65;
 }

 /* ── UTILITIES ── */
 .section-tag {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(184, 24, 24, 0.07);
   border: 1px solid rgba(184, 24, 24, 0.18);
   color: var(--accent);
   font-family: var(--font-head);
   font-size: 0.73rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   padding: 5px 14px;
   border-radius: 50px;
   margin-bottom: 1rem;
 }

 .section-tag::before {
   content: "";
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--accent);
 }

 .section-title {
   font-family: var(--font-head);
   line-height: 1.12;
   letter-spacing: -0.02em;
   color: var(--text);
 }

 .section-title .highlight {
   color: var(--accent);
 }

 .btn-primary-red {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   background: var(--accent);
   color: #fff;
   font-family: var(--font-head);
   font-size: 0.95rem;
   padding: 0.7rem 1.6rem;
   border-radius: 50px;
   border: none;
   text-decoration: none;
   transition:
     background 0.2s,
     transform 0.18s,
     box-shadow 0.2s;
   white-space: nowrap;
 }

 .btn-primary-red:hover {
   background: var(--accent-dk);
   color: #fff;
   transform: translateY(-2px);
   box-shadow: 0 8px 24px rgba(184, 24, 24, 0.28);
 }

 .btn-outline-dark {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   background: transparent;
   color: var(--text);
   font-family: var(--font-head);
   font-size: 0.95rem;
   padding: 0.68rem 1.6rem;
   border-radius: 50px;
   border: 1.5px solid rgba(0, 0, 0, 0.18);
   text-decoration: none;
   transition:
     border-color 0.2s,
     background 0.2s,
     transform 0.18s;
   white-space: nowrap;
 }

 .btn-outline-dark:hover {
   border-color: var(--text);
   background: rgba(0, 0, 0, 0.04);
   color: var(--text);
   transform: translateY(-2px);
 }

 .divider-line {
   width: 48px;
   height: 3px;
   background: var(--accent);
   border-radius: 3px;
   margin-bottom: 1.5rem;
 }

 .reveal {
   opacity: 0;
   transform: translateY(28px);
   transition:
     opacity 0.6s ease,
     transform 0.6s ease;
 }

 .reveal.visible {
   opacity: 1;
   transform: none;
 }

 /* ── NAVBAR ── */
 .xp-nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 9999;
   padding: 0 2.5rem;
   height: 72px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: transparent;
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border-bottom: 1px solid var(--border);
   transition: all 0.3s;
 }

 .xp-nav .xp-logo img {
   object-fit: contain;
   filter: brightness(0) invert(1);
 }

 .xp-nav.scrolled {
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.09);
   background: rgba(255, 255, 255, 0.92);
 }

 .xp-nav.scrolled .xp-logo img {
   object-fit: contain;
   filter: none;
 }

 .xp-logo {
   width: 130px;
   flex-shrink: 0;
   text-decoration: none;
 }

 .xp-logo img {
   width: 100%;
   height: auto;
 }

 .xp-logo-text {
   font-family: var(--font-head);
   font-size: 1.35rem;
   font-weight: 800;
   color: var(--text);
   letter-spacing: -0.02em;
 }

 .xp-logo-text span {
   color: var(--accent);
 }

 .xp-nav-links {
   display: flex;
   align-items: center;
   gap: .5rem;
   list-style: none;
   margin: 0;
   padding: 6px 12px;
   background: rgba(0, 0, 0, 0.321);
   border: 1px solid var(--mid-gray);
   border-radius: 50px;
 }

 .xp-nav-links .nav-link {
   color: var(--white);
   font-family: var(--font-head);
   font-size: 0.88rem;
   padding: 0.32rem 0.85rem;
   border-radius: 50px;
   transition:
     color 0.2s,
     background 0.2s;
   display: flex;
   align-items: center;
   gap: 5px;
   white-space: nowrap;
   text-decoration: none;
 }

 .xp-nav-links .nav-link:hover,
 .xp-nav-links .nav-link.active {
   color: var(--text);
   background: #fff;
 }

 .xp-nav-links .nav-link i {
   font-size: 0.6rem;
   opacity: 0.5;
 }

 .xp-nav-right {
   display: flex;
   align-items: center;
   gap: 1rem;
   flex-shrink: 0;
 }

 .xp-toggler {
   display: none;
   background: none;
   border: none;
   color: var(--text);
   font-size: 1.3rem;
   cursor: pointer;
   padding: 4px 6px;
 }

 .xp-mobile-menu {
   display: none;
   flex-direction: column;
   background: rgba(255, 255, 255, 0.98);
   backdrop-filter: blur(20px);
   padding: 1.2rem 1.6rem 1.8rem;
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
   position: fixed;
   top: 72px;
   left: 0;
   right: 0;
   z-index: 999;
   animation: slideDown 0.22s ease;
 }

 .xp-mobile-menu.open {
   display: flex;
 }

 @keyframes slideDown {
   from {
     opacity: 0;
     transform: translateY(-8px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .xp-mobile-menu a {
   color: var(--text-muted);
   font-family: var(--font-head);
   font-size: 1rem;
   padding: 0.7rem 0;
   border-bottom: 1px solid var(--border);
   text-decoration: none;
   display: flex;
   align-items: center;
   justify-content: space-between;
   transition: color 0.2s;
 }

 .xp-mobile-menu a:last-child {
   border-bottom: none;
 }

 .xp-mobile-menu a:hover {
   color: var(--text);
 }

 .xp-mobile-cta {
   margin-top: 1.2rem;
   background: var(--accent) !important;
   color: #fff !important;
   border-radius: 50px;
   justify-content: center !important;
   padding: 0.8rem !important;
   border-bottom: none !important;
 }

 .xp-mobile-cta:hover {
   background: var(--accent-dk) !important;
 }

 /* ── Desktop Dropdown ── */
 .xp-dropdown-parent {
   position: relative;
 }

 .xp-dropdown {
   display: none;
   position: absolute;
   top: calc(100%);
   left: 50%;
   transform: translateX(-50%);
   background: #fff;
   /* match your nav bg or adjust */
   border-radius: 6px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
   list-style: none;
   padding: 8px 0;
   margin: 0;
   min-width: 200px;
   z-index: 999;
   white-space: nowrap;
 }

 .xp-dropdown-parent:hover .xp-dropdown,
 .xp-dropdown-parent.open .xp-dropdown {
   display: block;
 }

 .xp-dropdown-link {
   display: block;
   padding: 10px 20px;
   color: #333;
   /* adjust to your palette */
   text-decoration: none;
   font-size: 0.9rem;
   transition: background 0.2s, color 0.2s;
 }

 .xp-dropdown-link:hover,
 .xp-dropdown-link.active {
   background: #f5f5f5;
   color: #e0000e;
   /* your red accent */
 }

 /* Rotate chevron on hover */
 .xp-dropdown-parent:hover .xp-chevron,
 .xp-dropdown-parent.open .xp-chevron {
   transform: rotate(180deg);
 }

 .xp-chevron {
   transition: transform 0.25s ease;
   display: inline-block;
 }

 /* ── Mobile Submenu ── */
 .xp-mobile-dropdown-toggle {
   cursor: pointer;
 }

 .xp-mobile-submenu {
   display: none;
   flex-direction: column;
   padding-left: 16px;
   border-left: 2px solid rgba(255, 255, 255, 0.2);
   /* adjust to your mobile menu style */
 }

 .xp-mobile-submenu.open {
   display: flex;
 }

 .xp-mobile-submenu a {
   padding: 8px 0;
   font-size: 0.9rem;
   opacity: 0.85;
 }

 /* ── HERO ── */
 .xp-hero {
   position: relative;
   height: 100vh;
   min-height: 640px;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   background: #111;
 }

 .hero-slide {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center;
   opacity: 0;
   transform: scale(1.06);
   transition:
     opacity 1.1s ease,
     transform 8s linear;
   z-index: 0;
 }

 .hero-slide.active {
   opacity: 1;
   transform: scale(1.13);
   z-index: 1;
 }

 .hero-slide:nth-child(1) {
   background-image:
     linear-gradient(160deg,
       rgba(0, 0, 0, 0.62) 0%,
       rgba(0, 0, 0, 0.72) 60%,
       rgba(0, 0, 0, 0.62) 100%),
     url("/assets/images/header-1.jpg");
 }

 .hero-slide:nth-child(2) {
   background-image:
     linear-gradient(160deg,
       rgba(0, 0, 0, 0.62) 0%,
       rgba(0, 0, 0, 0.72) 60%,
       rgba(0, 0, 0, 0.62) 100%),
     url("/assets/images/header-2.jpg");
 }

 .hero-slide:nth-child(3) {
   background-image:
     linear-gradient(160deg,
       rgba(0, 0, 0, 0.62) 0%,
       rgba(0, 0, 0, 0.72) 60%,
       rgba(0, 0, 0, 0.62) 100%),
     url("/assets/images/header-3.jpg");
 }

 /* Fallback gradient when images don't load */
 .hero-slide:nth-child(1) {
   background-color: #1a1a2e;
 }

 .hero-slide:nth-child(2) {
   background-color: #16213e;
 }

 .hero-slide:nth-child(3) {
   background-color: #0f3460;
 }

 .hero-overlay-bottom {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 160px;
   background: linear-gradient(to top, black, black, black, transparent);
   z-index: 2;
   pointer-events: none;
 }

 .hero-dots {
   position: absolute;
   bottom: 2.4rem;
   left: 50%;
   transform: translateX(-50%);
   z-index: 5;
   display: flex;
   gap: 8px;
 }

 .hero-dot {
   width: 28px;
   height: 4px;
   border-radius: 4px;
   background: rgba(255, 255, 255, 0.35);
   cursor: pointer;
   border: none;
   transition:
     background 0.3s,
     width 0.3s;
 }

 .hero-dot.active {
   background: var(--accent);
   width: 44px;
 }

 .hero-content {
   position: relative;
   z-index: 3;
   color: #fff;
   text-align: center;
   max-width: 820px;
   padding: 0 1.5rem;
   animation: fadeUp 1s ease both;
 }

 @keyframes fadeUp {
   from {
     opacity: 0;
     transform: translateY(30px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .hero-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(255, 255, 255, 0.12);
   border: 1px solid rgba(255, 255, 255, 0.25);
   color: #fff;
   font-family: var(--font-head);
   font-size: 0.73rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   padding: 5px 14px;
   border-radius: 50px;
   margin-bottom: 1.4rem;
 }

 .hero-eyebrow::before {
   content: "";
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--accent);
   animation: pulse 2s ease infinite;
 }

 @keyframes pulse {

   0%,
   100% {
     opacity: 1;
     transform: scale(1);
   }

   50% {
     opacity: 0.5;
     transform: scale(1.4);
   }
 }

 .hero-title {
   font-family: var(--font-head);
   font-size: clamp(2.4rem, 5.5vw, 4.2rem);
   line-height: 1.1;
   letter-spacing: -0.025em;
   text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
   margin-bottom: 1.2rem;
 }

 .hero-title .red {
   color: var(--accent);
 }

 .hero-sub {
   font-size: clamp(1rem, 2vw, 1.15rem);
   color: rgba(255, 255, 255, 0.8);
   max-width: 560px;
   margin: 0 auto 2.2rem;
   line-height: 1.7;
 }

 .hero-btns {
   display: flex;
   align-items: center;
   gap: 1rem;
   justify-content: center;
   flex-wrap: wrap;
 }

 .hero-btn-outline {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   background: rgba(255, 255, 255, 0.12);
   color: #fff;
   font-family: var(--font-head);
   font-size: 0.95rem;
   padding: 0.68rem 1.6rem;
   border-radius: 50px;
   border: 1.5px solid rgba(255, 255, 255, 0.3);
   text-decoration: none;
   transition:
     border-color 0.2s,
     background 0.2s,
     transform 0.18s;
   white-space: nowrap;
 }

 .hero-btn-outline:hover {
   border-color: rgba(255, 255, 255, 0.7);
   background: rgba(255, 255, 255, 0.18);
   color: #fff;
   transform: translateY(-2px);
 }

 .xp-socials {
   position: absolute;
   bottom: 2.5rem;
   right: 2.5rem;
   z-index: 4;
   display: flex;
   gap: 0.6rem;
 }

 .xp-social-btn {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.15);
   border: 1px solid rgba(255, 255, 255, 0.25);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.9rem;
   text-decoration: none;
   transition:
     background 0.2s,
     transform 0.2s;
 }

 .xp-social-btn:hover {
   background: var(--accent);
   color: #fff;
   border-color: var(--accent);
   transform: translateY(-3px);
 }

 /* ── ABOUT ── */
 .about-section {
   padding: 7rem 0;
   background: var(--white);
 }

 .about-img-wrap {
   position: relative;
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
 }

 .about-img-wrap img {
   width: 100%;
   height: 420px;
   object-fit: cover;
   display: block;
 }

 .about-img-badge {
   position: absolute;
   bottom: 1.5rem;
   left: 1.5rem;
   background: var(--accent);
   color: #fff;
   font-family: var(--font-head);
   font-size: 0.9rem;
   padding: 0.8rem 1.2rem;
   border-radius: var(--radius);
   box-shadow: 0 4px 20px rgba(184, 24, 24, 0.35);
 }

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

 .about-text {
   padding-left: 2rem;
 }

 .about-text p {
   color: var(--text-muted);
   font-size: 1rem;
   margin-bottom: 1rem;
 }

 .about-stats {
   display: flex;
   gap: 2rem;
   flex-wrap: wrap;
   margin-top: 2rem;
 }

 .stat-item {
   text-align: center;
 }

 .stat-num {
   font-family: var(--font-head);
   font-size: 2.2rem;
   color: var(--accent);
   display: block;
   line-height: 1;
 }

 .stat-lbl {
   font-size: 0.78rem;
   color: var(--text-light);
   text-transform: uppercase;
   letter-spacing: 0.06em;
 }

 /* ── SERVICES ── */
 .services-section {
   padding: 7rem 0;
   background: var(--off-white);
 }

 .service-card {
   background: var(--white);
   border: 1px solid var(--mid-gray);
   border-radius: var(--radius-lg);
   padding: 2rem;
   height: 100%;
   transition:
     transform 0.3s,
     border-color 0.3s,
     box-shadow 0.3s;
   position: relative;
   overflow: hidden;
 }

 .service-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--accent), transparent);
   opacity: 0;
   transition: opacity 0.3s;
 }

 .service-card:hover {
   transform: translateY(-5px);
   border-color: rgba(184, 24, 24, 0.2);
   box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
 }

 .service-card:hover::before {
   opacity: 1;
 }

 .service-icon {
   width: 54px;
   height: 54px;
   border-radius: var(--radius);
   background: rgba(184, 24, 24, 0.07);
   border: 1px solid rgba(184, 24, 24, 0.14);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--accent);
   font-size: 1.3rem;
   margin-bottom: 1.2rem;
   transition: background 0.3s;
   padding: 10px;
 }

 .service-icon img {
   width: 100%;
   height: 100%;
   object-fit: contain;
 }

 .service-card:hover .service-icon {
   background: rgba(184, 24, 24, 0.13);
 }

 .service-card h4 {
   font-family: var(--font-head);
   font-size: 1.05rem;
   margin-bottom: 0.6rem;
   color: var(--text);
 }

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

 /* ── WHY CHOOSE US ── */
 .why-section {
   padding: 7rem 0;
   background: var(--white);
 }

 .why-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 1.2rem;
   margin-top: 3rem;
 }

 .why-item {
   background: var(--off-white);
   border: 1px solid var(--mid-gray);
   border-radius: var(--radius);
   padding: 1.4rem 1.6rem;
   display: flex;
   align-items: flex-start;
   gap: 1rem;
   transition:
     border-color 0.3s,
     transform 0.3s,
     box-shadow 0.3s;
 }

 .why-item:hover {
   border-color: rgba(184, 24, 24, 0.25);
   transform: translateY(-3px);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
 }

 .why-check {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: rgba(184, 24, 24, 0.09);
   color: var(--accent);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.85rem;
   flex-shrink: 0;
   margin-top: 2px;
 }

 .why-item h5 {
   font-family: var(--font-head);
   font-size: 0.95rem;
   margin-bottom: 0.2rem;
   color: var(--text);
 }

 .why-item p {
   font-size: 0.84rem;
   color: var(--text-muted);
   margin: 0;
 }

 /* ── SOLUTIONS ── */
 .solutions-section {
   padding: 7rem 0;
   background: var(--off-white);
 }

 .solution-card {
   background: var(--white);
   border: 1px solid var(--mid-gray);
   border-radius: var(--radius);
   padding: 1.8rem;
   text-align: center;
   transition:
     transform 0.3s,
     border-color 0.3s,
     box-shadow 0.3s;
   height: 100%;
 }

 .solution-card:hover {
   transform: translateY(-5px);
   border-color: rgba(184, 24, 24, 0.2);
   box-shadow: 0 12px 36px rgba(0, 0, 0, 0.09);
 }

 .solution-num {
   font-family: var(--font-head);
   font-size: 2.8rem;
   color: rgba(184, 24, 24, 0.1);
   line-height: 1;
   display: block;
   margin-bottom: 0.4rem;
 }

 .solution-card h5 {
   font-family: var(--font-head);
   font-size: 0.95rem;
   color: var(--text);
 }

 /* ── INDUSTRIES ── */
 .industries-section {
   padding: 7rem 0;
   background: var(--off-white);
 }

 .industry-pill {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: var(--off-white);
   border: 1px solid var(--mid-gray);
   border-radius: 50px;
   padding: 0.7rem 1.3rem;
   font-family: var(--font-head);
   font-size: 0.92rem;
   color: var(--text);
   margin: 0.35rem;
   transition:
     border-color 0.25s,
     background 0.25s;
   cursor: default;
 }

 .industry-pill:hover {
   border-color: var(--accent);
   background: rgba(184, 24, 24, 0.05);
 }

 .industry-pill i {
   color: var(--accent);
   font-size: 0.95rem;
 }

 /* ── PROCESS ── */
 .process-section {
   padding: 7rem 0;
   background: var(--white);
 }

 .process-steps {
   position: relative;
   display: flex;
   gap: 0;
   overflow: visible;
 }

 .process-step {
   flex: 1;
   text-align: center;
   padding: 0 1rem;
   position: relative;
 }

 .process-step:not(:last-child)::after {
   content: "";
   position: absolute;
   top: 28px;
   right: -50%;
   width: 100%;
   height: 2px;
   background: linear-gradient(90deg,
       rgba(184, 24, 24, 0.3),
       rgba(184, 24, 24, 0.08));
   z-index: 0;
 }

 .step-circle {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: var(--white);
   border: 2px solid rgba(184, 24, 24, 0.22);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-head);
   font-size: 1rem;
   color: var(--accent);
   margin: 0 auto 1.2rem;
   position: relative;
   z-index: 1;
   transition:
     background 0.3s,
     border-color 0.3s,
     box-shadow 0.3s;
 }

 .process-step:hover .step-circle {
   background: var(--accent);
   border-color: var(--accent);
   color: #fff;
   box-shadow: 0 0 20px rgba(184, 24, 24, 0.3);
 }

 .process-step h5 {
   font-family: var(--font-head);
   font-size: 0.9rem;
   color: var(--text);
   margin-bottom: 0.4rem;
 }

 .process-step p {
   font-size: 0.8rem;
   color: var(--text-muted);
   line-height: 1.5;
 }

 /* ── TESTIMONIALS ── */
 .testimonials-section {
   padding: 7rem 0;
   background: var(--off-white);
 }

 .swiper {
   padding-bottom: 3.5rem !important;
 }

 .swiper-pagination-bullet {
   background: var(--mid-gray) !important;
   opacity: 1 !important;
   width: 28px !important;
   height: 4px !important;
   border-radius: 4px !important;
 }

 .swiper-pagination-bullet-active {
   background: var(--accent) !important;
   width: 44px !important;
 }

 .swiper-button-next,
 .swiper-button-prev {
   color: var(--accent) !important;
   background: var(--white);
   border: 1px solid var(--mid-gray);
   border-radius: 50%;
   width: 44px !important;
   height: 44px !important;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
   transition:
     box-shadow 0.2s,
     border-color 0.2s;
 }

 .swiper-button-next::after,
 .swiper-button-prev::after {
   font-size: 0.85rem !important;
 }

 .swiper-button-next:hover,
 .swiper-button-prev:hover {
   border-color: var(--accent);
   box-shadow: 0 4px 16px rgba(184, 24, 24, 0.2);
 }

 .testi-card {
   background: var(--off-white);
   border: 1px solid var(--mid-gray);
   border-radius: var(--radius-lg);
   padding: 2.2rem;
   height: 100%;
   position: relative;
   transition:
     box-shadow 0.3s,
     border-color 0.3s;
 }

 .testi-card:hover {
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.09);
   border-color: rgba(184, 24, 24, 0.2);
 }

 .testi-card::before {
   content: "\201C";
   font-family: Georgia, serif;
   font-size: 5rem;
   color: rgba(184, 24, 24, 0.1);
   position: absolute;
   top: 0.5rem;
   left: 1.5rem;
   line-height: 1;
   pointer-events: none;
 }

 .testi-stars {
   color: #e8a000;
   font-size: 0.88rem;
   margin-bottom: 1rem;
 }

 .testi-text {
   font-size: 0.97rem;
   color: var(--text-muted);
   line-height: 1.7;
   margin-bottom: 1.5rem;
   font-style: italic;
 }

 .testi-author {
   display: flex;
   align-items: center;
   gap: 0.9rem;
 }

 .testi-avatar {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: var(--accent);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-head);
   font-size: 0.95rem;
   color: #fff;
   flex-shrink: 0;
 }

 .testi-name {
   font-family: var(--font-head);
   font-size: 0.92rem;
   color: var(--text);
   display: block;
 }

 .testi-role {
   font-size: 0.78rem;
   color: var(--text-light);
 }

 /* ── CTA BANNER ── */
 .cta-section {
   padding: 6rem 0;
   background: var(--text);
   position: relative;
   overflow: hidden;
 }

 .cta-section::before {
   content: "";
   position: absolute;
   inset: 0;
   background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
   pointer-events: none;
 }

 .cta-section .section-title {
   color: #fff;
 }

 .cta-section p {
   color: rgba(255, 255, 255, 0.7);
   font-size: 1.05rem;
   max-width: 520px;
   margin: 0 auto 2.2rem;
   line-height: 1.7;
 }

 .cta-section .section-tag {
   background: rgba(255, 255, 255, 0.1);
   border-color: rgba(255, 255, 255, 0.2);
   color: rgba(255, 255, 255, 0.85);
   margin: 0 auto 1rem;
 }

 .cta-section .section-tag::before {
   background: var(--accent);
 }

 .btn-white {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   background: #fff;
   color: var(--accent);
   font-family: var(--font-head);
   font-size: 1rem;
   padding: 0.75rem 2rem;
   border-radius: 50px;
   text-decoration: none;
   transition:
     transform 0.18s,
     box-shadow 0.18s;
 }

 .btn-white:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
   color: var(--accent-dk);
 }

 /* ── CONTACT ── */
 .contact-section {
   padding: 7rem 0;
   background: var(--white);
 }

 .contact-info-item {
   display: flex;
   align-items: flex-start;
   gap: 1.1rem;
   margin-bottom: 1.8rem;
 }

 .contact-icon {
   width: 46px;
   height: 46px;
   border-radius: var(--radius);
   background: rgba(184, 24, 24, 0.07);
   border: 1px solid rgba(184, 24, 24, 0.15);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--accent);
   font-size: 1.05rem;
   flex-shrink: 0;
 }

 .contact-info-item h6 {
   font-family: var(--font-head);
   font-size: 0.78rem;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--text-light);
   margin-bottom: 0.2rem;
 }

 .contact-info-item p {
   font-size: 0.97rem;
   color: var(--text);
   margin: 0;
 }

 .contact-form-wrap {
   background: var(--white);
   border: 1px solid var(--mid-gray);
   border-radius: var(--radius-lg);
   padding: 2.5rem;
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
 }

 .contact-form .form-control,
 .contact-form .form-select {
   background: var(--off-white);
   border: 1px solid var(--mid-gray);
   color: var(--text);
   border-radius: var(--radius);
   padding: 0.75rem 1rem;
   font-family: var(--font-body);
   font-size: 0.95rem;
   transition:
     border-color 0.2s,
     box-shadow 0.2s;
 }

 .contact-form .form-control:focus,
 .contact-form .form-select:focus {
   background: var(--white);
   border-color: var(--accent);
   box-shadow: 0 0 0 3px rgba(184, 24, 24, 0.08);
   color: var(--text);
 }

 .contact-form .form-control::placeholder {
   color: var(--text-light);
 }

 .contact-form label {
   font-family: var(--font-head);
   font-size: 0.82rem;
   color: var(--text-muted);
   margin-bottom: 0.35rem;
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }

 /* ── FOOTER ── */
 .xp-footer {
   background: var(--text);
   border-top: 1px solid rgba(255, 255, 255, 0.05);
   padding: 2.5rem 0;
 }

 /* ── FOOTER SOCIAL ICONS ────────────────────── */

 /* Social icons row */
 .footer-socials {
   display: flex;
   gap: 0.6rem;
   margin-top: 1rem;
 }

 /* Individual icon button */
 .footer-social-btn {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.07);
   border: 1px solid rgba(255, 255, 255, 0.12);
   color: rgba(255, 255, 255, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.82rem;
   text-decoration: none;
   transition:
     background 0.2s,
     color 0.2s,
     border-color 0.2s,
     transform 0.2s;
 }

 /* Hover: accent fill */
 .footer-social-btn:hover {
   background: var(--accent);
   border-color: var(--accent);
   color: #ffffff;
   transform: translateY(-3px);
 }

 .footer-brand {
   font-family: var(--font-head);
   font-size: 1.2rem;
   color: #fff;
 }

 .footer-brand span {
   color: var(--accent);
 }

 .footer-tagline {
   font-size: 0.83rem;
   color: rgba(255, 255, 255, 0.4);
   margin-top: 0.4rem;
 }

 .footer-links {
   display: flex;
   gap: 1.5rem;
   flex-wrap: wrap;
   justify-content: center;
 }

 .footer-links a {
   color: rgba(255, 255, 255, 0.45);
   font-size: 0.86rem;
   text-decoration: none;
   font-family: var(--font-head);
   transition: color 0.2s;
 }

 .footer-links a:hover {
   color: #fff;
 }

 .footer-copy {
   font-size: 0.78rem;
   color: rgba(255, 255, 255, 0.35);
   text-align: right;
 }

 /* ── RESPONSIVE ── */
 @media (max-width: 991px) {
   .xp-nav-links {
     display: none;
   }

   .xp-toggler {
     display: block;
   }

   .xp-btn-cta-nav {
     display: none;
   }

   .about-text {
     padding-left: 0;
     margin-top: 2rem;
   }

   .process-steps {
     flex-direction: column;
     gap: 2rem;
   }

   .process-step::after {
     display: none;
   }
 }

 @media (max-width: 575px) {
   .xp-socials {
     display: none;
   }

   .footer-copy {
     text-align: center;
     margin-top: 0.5rem;
   }

   .hero-btns {
     flex-direction: column;
     align-items: center;
   }
 }

 /* ── WHY BETTER SECTION ─────────────────────── */

 /* Section wrapper */
 .wcu-section {
   padding: 7rem 0;
   background: var(--white);
 }

 .products-section {
   padding: 7rem 0;
   background: var(--off-white);
 }



 /* Main heading */
 .wcu-title {
   font-family: var(--font-head);
   font-size: clamp(1.8rem, 3.5vw, 2.6rem);
   line-height: 1.12;
   letter-spacing: -0.02em;
   color: var(--text);
   margin-bottom: 0.5rem;
 }

 /* Accent color for highlighted word in title */
 .wcu-title .wcu-highlight {
   color: var(--accent);
 }

 /* Subtitle paragraph below heading */
 .wcu-subtitle {
   font-size: 1rem;
   color: var(--text-muted);
   max-width: 540px;
   line-height: 1.7;
 }

 /* ── CENTER IMAGE COLUMN ────────────────────── */

 /* Image wrapper with dark rounded background */
 .wcu-center-img {
   border-radius: var(--radius-lg);
   overflow: hidden;
   background: #1a2744;
   min-height: 380px;
   display: flex;
   align-items: flex-end;
   justify-content: center;
 }

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

 /* ── FEATURE CARDS ──────────────────────────── */

 /* Individual feature card */
 .wcu-card {
   background: var(--card-bg);
   border: 1px solid var(--mid-gray);
   border-radius: var(--radius-lg);
   padding: 1.5rem 1.6rem;
   transition:
     transform 0.25s,
     border-color 0.25s,
     box-shadow 0.25s;
   position: relative;
   overflow: hidden;
 }

 /* Top accent bar — revealed on hover */
 .wcu-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--accent), transparent);
   opacity: 0;
   transition: opacity 0.25s;
 }

 .wcu-card:hover {
   transform: translateY(-4px);
   border-color: rgba(184, 24, 24, 0.2);
   box-shadow: 0 12px 36px rgba(0, 0, 0, 0.09);
 }

 .wcu-card:hover::before {
   opacity: 1;
 }

 /* Large decorative number */
 .wcu-num {
   font-family: var(--font-head);
   font-size: 2.2rem;
   font-weight: 900;
   line-height: 1;
   color: rgba(184, 24, 24, 0.12);
   display: block;
   margin-bottom: 0.3rem;
 }

 .wcu-card h5 {
   font-family: var(--font-head);
   font-size: 1rem;
   color: var(--text);
   margin-bottom: 0.4rem;
 }

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

 /* ── RESPONSIVE ─────────────────────────────── */

 /* Hide center image column on tablets */
 @media (max-width: 991px) {
   .wcu-col-center {
     display: none;
   }
 }

 < !-- ═══════════════════════════════════════════════ OUR PRODUCTS — Section Component Requires: Bootstrap 5,
 Font Awesome 6,
 Outfit+DM Sans fonts Uses existing :root variables from Dynamic Displays stylesheet Hover interaction: dark overlay reveals description+CTA ═══════════════════════════════════════════════ --><style>
 /* ── OUR PRODUCTS SECTION ───────────────────── */

 /* Section wrapper */
 .products-section {
   padding: 7rem 0;
   background: var(--off-white);
 }

 /* ── PRODUCT CARD ───────────────────────────── */

 /* Card container — controls aspect ratio and clip */
 .prod-card {
   position: relative;
   border-radius: 20px;
   overflow: hidden;
   aspect-ratio: 1;
   cursor: pointer;
   background: rgb(129, 128, 128);
 }

 /* Background photo */
 .prod-card-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 0.5s ease;
 }

 /* Subtle zoom on hover */
 .prod-card:hover .prod-card-img {
   transform: scale(1.06);
 }

 /* ── CATEGORY BADGE (top-right) ─────────────── */
 .prod-badge {
   position: absolute;
   top: 14px;
   right: 14px;
   background: rgba(20, 20, 20, 0.7);
   color: #ffffff;
   font-family: var(--font-head);
   font-size: 0.82rem;
   font-weight: 500;
   padding: 6px 15px;
   border-radius: 50px;
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   z-index: 2;
   pointer-events: none;
 }

 /* ── STATIC TITLE (bottom, always visible) ──── */
 .prod-static-title {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 3rem 1.4rem 1.4rem;
   /* Gradient fades image into title text */
   background: linear-gradient(to top,
       rgba(0, 0, 0, 0.72) 0%,
       transparent 100%);
   color: #ffffff;
   font-family: var(--font-head);
   font-size: 1.15rem;
   font-weight: 700;
   line-height: 1.3;
   z-index: 2;
   transition: opacity 0.3s ease;
   pointer-events: none;
 }

 /* Hide static title when overlay is active */
 .prod-card:hover .prod-static-title {
   opacity: 0;
 }

 /* ── HOVER OVERLAY ──────────────────────────── */
 .prod-overlay {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.76);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: 1.6rem 1.4rem;
   z-index: 3;
   opacity: 0;
   transition: opacity 0.35s ease;
 }

 /* Reveal overlay on hover */
 .prod-card:hover .prod-overlay {
   opacity: 1;
 }

 /* Small badge inside overlay (mirrors top badge style) */
 .prod-overlay-badge {
   display: inline-block;
   background: rgba(255, 255, 255, 0.18);
   color: #ffffff;
   font-family: var(--font-head);
   font-size: 0.75rem;
   font-weight: 500;
   padding: 4px 13px;
   border-radius: 50px;
   margin-bottom: 0.8rem;
   width: fit-content;
 }

 /* Overlay heading */
 .prod-overlay h4 {
   font-family: var(--font-head);
   font-size: 1.05rem;
   font-weight: 700;
   color: #ffffff;
   line-height: 1.3;
   margin-bottom: 0.5rem;
 }

 /* Overlay description */
 .prod-overlay p {
   font-family: var(--font-body);
   font-size: 0.86rem;
   color: rgba(255, 255, 255, 0.78);
   line-height: 1.65;
   margin-bottom: 1.2rem;
 }

 /* Overlay CTA button */
 .prod-overlay-btn {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   background: var(--accent);
   color: #ffffff;
   font-family: var(--font-head);
   font-size: 0.85rem;
   font-weight: 600;
   padding: 8px 18px;
   border-radius: 50px;
   text-decoration: none;
   width: fit-content;
   transition:
     background 0.2s,
     transform 0.18s;
 }

 .prod-overlay-btn:hover {
   background: var(--accent-dk);
   color: #ffffff;
   transform: translateY(-1px);
 }

 /* ── RESPONSIVE ─────────────────────────────── */

 /* Stack to 1 column on small screens */
 @media (max-width: 575px) {
   .prod-card {
     aspect-ratio: 4 / 3;
   }
 }


 /* breadcrumb */

 .page-hero {
   position: relative;
   width: 100%;
   height: 400px;
   display: flex;
   align-items: flex-end;
   overflow: hidden;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
 }

 /* Dark gradient overlay — heavier at bottom for text legibility */
 .page-hero::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(to bottom,
       rgba(0, 0, 0, 0.35) 0%,
       rgba(0, 0, 0, 0.72) 100%);
   z-index: 1;
 }

 /* Content sits above the overlay */
 .page-hero-content {
   position: relative;
   z-index: 2;
   padding: 0 0 2rem 2rem;
 }

 /* Page title */
 .page-hero-title {
   font-family: var(--font-head);
   font-size: clamp(1.6rem, 3vw, 2.2rem);

   color: #ffffff;
   line-height: 1.15;
   margin: 0 0 0.4rem;
 }

 /* Breadcrumb trail */
 .page-hero-breadcrumb {
   display: flex;
   align-items: center;
   gap: 0;
   list-style: none;
   margin: 0;
   padding: 0;
   flex-wrap: wrap;
 }

 /* Each breadcrumb item */
 .page-hero-breadcrumb li {
   display: flex;
   align-items: center;
   font-family: var(--font-body);
   font-size: 0.82rem;
 }

 /* Separator slash */
 .page-hero-breadcrumb li:not(:first-child)::before {
   content: "/";
   margin: 0 0.45rem;
   color: rgba(255, 255, 255, 0.45);
 }

 /* Default link color — muted white */
 .page-hero-breadcrumb a {
   color: rgba(255, 255, 255, 0.65);
   text-decoration: none;
   display: flex;
   align-items: center;
   gap: 5px;
   transition: color 0.2s;
 }

 .page-hero-breadcrumb a:hover {
   color: #ffffff;
 }

 /* Home icon */
 .page-hero-breadcrumb a i {
   font-size: 0.75rem;
 }

 /* Active / current page — accent color */
 .page-hero-breadcrumb .active {
   color: var(--accent);
   font-weight: 500;
 }