@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@300;400;500;600&display=swap');

    /* --- Floating WhatsApp button (loaded via Header.html) --- */
    .whatsapp-float {
       position: fixed;
       bottom: 24px;
       right: 24px;
       width: 56px;
       height: 56px;
       background: #241915;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
       z-index: 999;
       text-decoration: none;
       opacity: 0;
       visibility: hidden;
       transform: translateY(20px);
       transition: opacity 0.8s ease, visibility 0.8s ease, transform 0.8s ease, box-shadow 0.25s ease;
    }
    .whatsapp-float.is-visible {
       opacity: 1;
       visibility: visible;
       transform: translateY(0);
    }
    .whatsapp-float:hover {
       box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
    }
    .whatsapp-float.is-visible:hover {
       transform: translateY(0) scale(1.08);
    }
    .whatsapp-float svg {
       width: 28px;
       height: 28px;
       fill: #ffffff;
    }
    @media (max-width: 480px) {
       .whatsapp-float {
          width: 48px;
          height: 48px;
          bottom: 18px;
          right: 18px;
       }
       .whatsapp-float svg {
          width: 24px;
          height: 24px;
       }
    }

    /* --- Local Penny Lane font (used by .brand-glyph inside .about-heading only) --- */
    @font-face {
       font-family: 'Penny Lane';
       src: url('Images/penny-lane-regular.otf') format('opentype');
       font-weight: 400;
       font-style: normal;
       font-display: swap;
    }

    /* --- RESET & OVERFLOW LOCK (PREVENTS HORIZONTAL SCROLLING) --- */
    html {
       margin: 0;
       padding: 0;
       width: 100%;
    }

    body {
       margin: 0;
       padding: 0;
       width: 100%;
       font-family: 'Red Hat Display', sans-serif;
       overflow-x: hidden;
       background-color: #f9f7f4;
    }

    /* --- NAVBAR (FIXED 10px PADDING, NO JUMPING) --- */
    /* --- NAVBAR (HEAVY DARK GLASSMORPHISM) --- */
    .navbar {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 10px 50px;
       position: fixed;
       top: 0;
       width: 100%;
       height: 80px;
       box-sizing: border-box;
       z-index: 100;
       pointer-events: auto;
       background: rgba(101, 67, 33, 0.15) !important;
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(25px);
       border-bottom: 1px solid rgba(255, 255, 255, 0.4);
       box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
       transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
    }

    /* Transparent state — applied via JS while the nav center sits inside a hero section */
    .navbar.is-hero-mode {
       background: transparent !important;
       backdrop-filter: none;
       -webkit-backdrop-filter: none;
       border-bottom-color: transparent;
       box-shadow: none;
    }

    /* Hamburger Menu */
    .menu-icon {
       cursor: pointer;
       display: flex;
       flex-direction: column;
       justify-content: center;
       gap: 6px;
       width: 35px;
       height: 30px;
       z-index: 20;
       pointer-events: auto;
    }

    .menu-icon span {
       display: block;
       height: 2px;
       width: 100%;
       background-color: #f9f7f4;
       transition: background-color 0.4s ease;
    }

    .navbar.dark-icons .menu-icon span {
       background-color: #241915;
    }

    .nav-right {
       display: flex;
       align-items: center;
       gap: 30px;
       pointer-events: auto;
    }

    .nav-logo-img {
       width: auto;
       height: 40px;
       filter: brightness(0) invert(1);
       transition: filter 0.4s ease;
    }

    .navbar.dark-icons .nav-logo-img {
       width: auto;
       height: 40px;
       filter: none;
    }

    /* --- SPLIT MENU CONTAINER --- */
    .menu-container {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100vh;
       height: 100dvh;
       z-index: 9999;
       pointer-events: none;
       display: flex;
       font-family: 'Red Hat Display', sans-serif;
       overflow: hidden;
       /* FIX: Clips the panels so they don't stretch the screen */
    }

    .menu-panel {
       height: 100%;
       position: relative;
       display: flex;
       flex-direction: column;
       padding: 60px 80px;
       box-sizing: border-box;
    }

    .panel-left {
       width: 70%;
       background-color: #241915;
       color: #241915;
       justify-content: center;
       transform: translateX(-100%);
    }

    .panel-right {
       width: 30%;
       background-color: #f9f7f4;
       color: #E3D7C9;
       justify-content: center;
       transform: translateX(100%);
    }

    .panel-header {
       position: absolute;
       top: 0;
       right: 0;
       width: 70%;
       height: auto;
       padding: 60px 80px;
       box-sizing: border-box;
       display: flex;
       justify-content: flex-end;
       align-items: flex-start;
       z-index: 10000;
    }

    .menu-logo-link {
       position: absolute;
       top: 60px;
       left: 80px;
       z-index: 1;
    }

    .menu-logo-top-left {
       width: 100px;
       filter: brightness(0) invert(1);
       opacity: 0.9;
    }

    .close-btn {
       font-size: 13px;
       letter-spacing: 2px;
       cursor: pointer;
       text-transform: uppercase;
       color: #241915;
       opacity: 0.8;
       transition: opacity 0.3s;
       padding-top: 10px;
       pointer-events: auto;
    }

    .close-btn:hover {
       opacity: 1;
    }

    .nav-links {
       list-style: none;
       padding: 0;
       margin: 0;
       width: 100%;
       display: flex;
       align-items: center;
       flex-wrap: wrap;
       justify-content: space-between;
    }

    .nav-links li {
       overflow: hidden;
    }

    .nav-links a {
       display: block;
       text-decoration: none;
       color: #E3D7C9;
       font-family: 'Red Hat Display', sans-serif;
       font-size: 18px;
       font-weight: 400;
       text-transform: uppercase;
       letter-spacing: 2px;
       padding: 25px 0;
       transition: color 0.3s;
    }

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

    .contact-wrapper {
       width: 100%;
       margin: 0;
       padding: 40px 0;
    }

    .info-grid {
       display: grid;
       grid-template-columns: 1fr;
       gap: 50px;
       font-size: 18px;
       line-height: 1.6;
       letter-spacing: 0.5px;
       color: #241915;
    }

    .info-group h4 {
       margin: 0 0 15px 0;
       text-transform: uppercase;
       font-size: 16px;
       letter-spacing: 2px;
       opacity: 0.5;
       font-weight: 400;
       color: #241915;
    }

    .social-row {
       display: flex;
       gap: 12px;
       align-items: center;
    }

    .social-row a {
       width: 26px;
       height: 26px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       transition: opacity 0.3s, transform 0.3s;
    }

    .social-row a:hover {
       opacity: 0.8;
       transform: translateY(-2px);
    }

    .social-icon {
       width: 20px;
       height: 20px;
       display: block;
       object-fit: contain;
       transition: opacity 0.3s, transform 0.3s;
       cursor: pointer;
    }

    .social-icon:hover {
       opacity: 0.7;
       transform: translateY(-2px);
    }

    .panel-footer {
       width: 100%;
       position: absolute;
       bottom: 0;
       left: 0;
       padding: 60px 80px;
       box-sizing: border-box;
    }

    .footer-line {
       width: 100%;
       height: 1px;
       background-color: rgba(227, 215, 201, 0.2);
       margin-bottom: 25px;
    }

    .footer-content {
       display: flex;
       justify-content: space-between;
       font-size: 16px;
       text-transform: uppercase;
       letter-spacing: 2px;
       opacity: 0.6;
       color: #FFF;
    }

    /* RESPONSIVE QUERIES */
    @media (max-width: 1440px) {

       .menu-panel,
       .panel-header,
       .panel-footer {
          padding: 50px 60px;
       }

       .nav-links a {
          font-size: 18px;
          padding: 22px 0;
       }
    }

    @media (max-width: 1366px) {
       .navbar {
          padding: 10px 40px;
       }

       .menu-panel,
       .panel-header,
       .panel-footer {
          padding: 40px 50px;
       }

       .nav-links a {
          font-size: 18px;
          padding: 20px 0;
       }

       .info-grid {
          gap: 40px;
       }
    }

    @media (max-width: 1024px) {
       .navbar {
          padding: 10px 30px;
       }

       .menu-panel,
       .panel-header,
       .panel-footer {
          padding: 40px 30px;
       }

       .nav-links a {
          font-size: 16px;
          padding: 18px 0;
       }

       .info-grid {
          gap: 25px;
          font-size: 17px;
       }

       .nav-logo-img {
          width: auto;
          height: 40px;
       }
    }

    @media (max-width: 768px) {
       .navbar {
          padding: 10px 25px;
       }

       .menu-container {
          flex-direction: column;
       }

       .menu-panel {
          width: 100%;
          height: 50%;
          padding: 30px;
          justify-content: center;
       }

       .panel-left {
          height: 50%;
       }

       .panel-right {
          height: 50%;
       }

       .panel-header {
          width: 100%;
          padding: 20px 25px;
          justify-content: flex-end;
       }

       .menu-logo-link,
       .menu-logo-top-left,
       .panel-footer {
          display: none;
       }

       .panel-left {
          align-items: flex-start;
          padding-top: 60px;
       }

       .nav-links {
          flex-direction: column;
          align-items: stretch;
       }

       .nav-links li {
          border-bottom: 1px solid rgba(227, 215, 201, 0.2);
       }

       .nav-links a {
          font-size: 16px;
          padding: 15px 0;
       }

       .nav-links li:last-child {
          border-bottom: none;
       }

       .social-row a {
          width: 24px;
          height: 24px;
       }

       .social-icon {
          width: 18px;
          height: 18px;
       }

       .panel-right {
          justify-content: flex-start;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          padding-top: 15px;
       }

       .info-grid {
          grid-template-columns: 1fr 1fr;
          gap: 20px;
          font-size: 14px;
       }

       .info-group h4 {
          font-size: 12px;
       }

       .panel-right .contact-wrapper {
          padding: 0;
          margin: 0;
       }

       .close-btn {
          color: #FFF !important;
       }

       .nav-right {
          gap: 15px;
       }
    }

    @media (max-width: 480px) {
       .info-grid {
          grid-template-columns: 1fr 1fr;
          gap: 20px 15px;
       }

       /* Email spans full width on the top row */
       .info-grid .info-group:nth-child(1) {
          grid-column: 1 / -1;
       }

       .menu-panel {
          padding: 20px;
          padding-top: 50px;
       }

       .panel-right {
          padding-top: 20px;
       }

       .panel-right .contact-wrapper {
          padding: 0;
       }

       .panel-header {
          padding: 20px;
       }
    }

    /* --- Main Container (The Section) --- */
    #feel-bari-components {
       position: relative;
       width: 100vw;
       height: 100vh;
       overflow: hidden;
       background-color: #111;
       font-family: 'Red Hat Display', sans-serif;
    }

    /* --- 1. Background Slider --- */
    .bg-slider {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       z-index: 1;
    }

    .slide {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-size: cover;
       background-position: center;
       opacity: 0;
       transform: scale(1.1);
       /* Start slightly zoomed in for fluid effect */
       transition: opacity 1.5s ease-in-out, transform 10s linear;
       /* Smooth fade & slow zoom */
    }

    .slide.active {
       opacity: 1;
       transform: scale(1);
       /* Zoom out slowly while active */
    }

    .overlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.4);
       /* Slightly darker for text readability */
       z-index: 2;
    }

    /* --- 2. Split Layout Wrapper --- */
    .hero-wrapper {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       display: flex;
       z-index: 10;
       pointer-events: none;
    }

    /* Left Container - Default Desktop */
    .left-container {
       width: 70%;
       height: 100%;
       display: flex;
       align-items: flex-end;
       justify-content: flex-start;
       padding-left: 60px;
       padding-bottom: 120px;
       box-sizing: border-box;
    }

    /* Right Container - Default Desktop */
    .right-container {
       display: none;
    }

    /* --- Next Slide Preview Box --- */
    .next-slide-preview {
       width: 280px;
       height: 150px;
       background-color: #333;
       background-size: cover;
       background-position: center;
       box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
       opacity: 0;
       transition: background-image 0.5s ease-in-out, opacity 0.5s;
       position: relative;
       cursor: pointer;
       pointer-events: auto;
       /* Re-enable clicks */
       display: flex;
       align-items: center;
       justify-content: center;
       overflow: hidden;
    }

    /* Glassmorphic Hover Button */
    .glass-btn {
       position: absolute;
       padding: 12px 30px;
       background: rgba(255, 255, 255, 0.1);
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
       color: white;
       font-size: 14px;
       font-weight: 400;
       text-transform: uppercase;
       letter-spacing: 1.5px;
       opacity: 0;
       pointer-events: none;
       transition: opacity 0.3s ease;
       z-index: 5;
    }

    .next-slide-preview:hover .glass-btn {
       opacity: 1;
    }

    /* --- The Hero Text (Dynamic H1) --- */
    .hero-text-container {
       max-width: 90%;
       overflow: hidden;
    }

    .hero-text {
       color: white;
       font-size: 4.5vw;
       font-family: 'Red Hat Display', sans-serif;
       font-weight: 400;
       letter-spacing: -0.02em;
       line-height: 1.05;
       margin: 0;
       will-change: opacity, transform;
       display: flex;
       flex-wrap: wrap;
       gap: 0.3em;
    }

    .hero-word {
       display: inline-block;
       will-change: transform, opacity, filter;
    }

    .hero-subtitle {
       display: block;
       color: rgba(255, 255, 255, 0.75);
       font-family: 'Red Hat Display', sans-serif;
       font-size: 12px;
       letter-spacing: 3px;
       text-transform: uppercase;
       margin-top: 18px;
    }

    /* =========================================
       RESPONSIVE BREAKPOINTS
       ========================================= */

    /* 1. Large Laptops (1440px) */
    @media (max-width: 1440px) {
       .hero-text {
          font-size: 4.2vw;
       }

       /* Slightly larger to fill space */
       .left-container {
          padding-left: 50px;
          padding-bottom: 90px;
       }

       .right-container {
          padding-right: 50px;
          padding-bottom: 70px;
       }

       .next-slide-preview {
          width: 200px;
          height: 120px;
       }
    }

    /* 2. Standard Laptops (1366px) */
    @media (max-width: 1366px) {
       .hero-text {
          font-size: 3.8vw;
       }

       .left-container {
          width: 65%;
          padding-left: 45px;
          padding-bottom: 80px;
       }

       .right-container {
          width: 35%;
          padding-right: 45px;
          padding-bottom: 60px;
       }

       .next-slide-preview {
          width: 200px;
          height: 100px;
       }
    }

    /* 3. Tablets Landscape / Small Laptops (1024px) */
    @media (max-width: 1024px) {

       #feel-bari-components {
          height: 70vh;
       }

       .hero-text {
          font-size: 5vw;
          line-height: 1.05;
       }

       .left-container {
          width: 60%;
          padding-left: 40px;
          padding-bottom: 60px;
       }

       .right-container {
          width: 40%;
          padding-right: 40px;
          padding-bottom: 50px;
       }

       .next-slide-preview {
          width: 180px;
          height: 90px;
       }

       .glass-btn {
          font-size: 12px;
          padding: 10px 20px;
       }
    }

    /* 4. Tablets Portrait / Mobile (768px and below) */
    @media (max-width: 768px) {

       /* 1. Set total size to 80vh */
       #feel-bari-components {
          height: 70vh;
       }

       /* 2. Hide the preview box container */
       .right-container {
          width: 30%;
          padding-right: 10px;
          padding-bottom: 50px;
       }

       .left-container {
          width: 70%;
          height: 100%;
          padding: 0 10px 40px 10px;
          align-items: flex-end;
          justify-content: flex-start;
       }

       .hero-text-container {
          max-width: 100%;
          text-align: start;
          /* Ensure text is centered */
       }

       .hero-text {
          font-size: 8vw;
          line-height: 1.05;
          justify-content: start;
          text-align: left;
       }

       .hero-subtitle {
          font-size: 10px;
          letter-spacing: 2px;
          margin-top: 14px;
       }

       .left-container {
          padding-left: 10px;
          padding-bottom: 50px;
       }

       .next-slide-preview {
          width: 120px;
          height: 70px;
       }

       .glass-btn {
          font-size: 10px;
          padding: 5px 10px;
       }
    }



    body {

       /* Background matches the greyish tone from your image reference, 

               or keep it #fff if you prefer pure white */

       background-color: #f0f0f0;

       color: #241915;

       font-family: 'Red Hat Display', sans-serif;

       margin: 0;

       padding: 0;

    }


    .text-section {

       padding: 0;

       min-height: 40vh;
       /* Increased height for better scroll duration */

       display: flex;

       align-items: start;

       justify-content: start;

    }


    .reveal-text {

       font-size: 18px;

       font-weight: 400;

       line-height: 1.4;

       text-align: justify;
       /* Aligns text neatly like the design */

    }


    .word {

       /* INACTIVE STATE: Light Grey instead of Opacity */

       color: #d1d1d1;

       display: inline-block;

    }

    /* 1440px - Standard Desktop */
    @media screen and (max-width: 1440px) {
       .text-section {
          padding: 0;
          /* Reduce side padding to give text more room */
          min-height: 40vh;
       }

       .reveal-text {
          font-size: 18px;
       }
    }

    /* 1366px - Laptops */
    @media screen and (max-width: 1366px) {
       .reveal-text {
          font-size: 18px;
          /* Restore your original base size for laptops */
       }
    }

    /* 1024px - Tablets (Landscape) / Small Laptops */
    @media screen and (max-width: 1024px) {
       .text-section {
          padding: 0;
       }

       .reveal-text {
          font-size: 18px;
       }
    }

    /* 768px - Tablets (Portrait) / Mobile */
    @media screen and (max-width: 768px) {
       .text-section {
          padding: 0 0%;
          align-items: justify-content;
          /* Center vertically better on mobile */
       }

       .reveal-text {
          font-size: 18px;
          /* Readable mobile size */
          line-height: 1.35;
          text-align: justify;
       }
    }



    /* General Reset */
    * {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
    }

    body {
       background-color: #f9f7f4;
       color: #241915;
       font-family: 'Red Hat Display', sans-serif;
       overflow-x: hidden;
    }

    /* --- NEW HEADER STRUCTURE --- */

    /* 1. Main Header Container (Holds Text + Arrows) */
    .projects-header-container {
       display: flex;
       justify-content: space-between;
       align-items: flex-end;
       /* Added 30px top padding to push the whole header down a bit */
       padding: 30px 0 20px 0;
    }

    .sectors-header-container {
       display: flex;
       justify-content: space-between;
       align-items: flex-end;
       /* Added 30px top padding to push the whole header down a bit */
       padding: 200px 0 20px 0 !important;
    }


    /* --- SECTORS HEADER STYLES --- */

    .sectors-header-container {
       display: flex;
       justify-content: space-between;
       align-items: flex-end;
       /* Push content lower for better spacing */
       padding: 60px 0 20px 0;
    }

    .sectors-text-container {
       display: flex;
       flex-direction: column;
       gap: 10px;
       /* Align text with the divider line */
       position: relative;
       top: 12px;
    }

    .sectors-divider {
       margin-top: 100px;
       /* Match your 100px top margin from the previous screenshot */
       border-bottom: 1px solid #e0e0e0;
    }

    /* 1a. Separate Container for Text */
    .projects-text-container {
       display: flex;
       flex-direction: column;
       gap: 10px;
       /* Nudges the text a little lower to align perfectly with the arrows */
       position: relative;

    }

    /* 1b. Separate Container for Arrows */
    .projects-arrows-container {
       display: flex;
       gap: 15px;
       align-items: center;
       padding-bottom: 5px;
    }

    /* 2. Separate Container for Border Line */
    .projects-divider {
       border-bottom: 1px solid #e0e0e0;
       margin: 20px 0;
       /* Aligns with the text */
    }

    /* Header Text Styling */
    .section-title1 {
       font-size: 16px;
       font-weight: 500;
       color: #241915 !important;
       margin-left: 0;
       line-height: 1;
    }

    .projects-desc {
       max-width: 400px;
       font-size: 16px;
       line-height: 1.5;
       color: #241915;
       margin: 0;
    }

    /* White Circle Nav Buttons */
    .nav-btn {
       background-color: #f9f7f4 !important;
       border: 1px solid #eee;
       border-radius: 50% !important;
       /* Force a perfect circle */
       width: 50px !important;
       height: 50px !important;
       min-width: 50px !important;
       /* Prevent flex from shrinking it */
       min-height: 50px !important;
       flex-shrink: 0;
       /* Stop squishing! */
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       padding: 0px;
       outline: none;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
       transition: all 0.3s ease;
    }

    .nav-btn:hover {
       background-color: #f8f8f8 !important;
       box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15) !important;
       transform: scale(1.05) !important;
    }

    .nav-btn img {
       width: 18px;
       height: auto;
       display: block;
       filter: invert(1) !important;
       opacity: 1 !important;
    }

    /* 3. Separate Container for Slider */
    .slider-wrapper {
       position: relative;
       width: 100%;
       padding: 20px 0 60px 0;
    }

    .slider-track {
       display: flex;
       gap: 30px;
       overflow-x: auto;
       scroll-behavior: smooth;
       padding-bottom: 20px;
       scrollbar-width: none;
       scroll-snap-type: x mandatory;
    }

    .slider-track::-webkit-scrollbar {
       display: none;
    }

    /* Exact Card Sizing */
    .project-card {
       width: calc((100% - 60px) / 3);
       flex: 0 0 calc((100% - 60px) / 3);
       cursor: pointer;
       scroll-snap-align: start;
    }

    .image-container {
       width: 100%;
       height: 250px;
       overflow: hidden;
       margin-bottom: 20px;
       position: relative;
       cursor: none;
       background-color: #f0f0f0;
    }

    .image-container img.project-img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.6s ease, filter 0.6s ease;
       filter: grayscale(100%);
    }

    /* Movable View Button Styling (Desktop) */
    .view-overlay {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       padding: 6px 8px 6px 16px;
       color: #fff;
       font-weight: 400;
       display: flex;
       align-items: center;
       gap: 10px;
       background: #241915;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
       opacity: 0;
       pointer-events: none;
       transition: opacity 0.2s ease;
       z-index: 10;
    }

    .view-icon {
       background: #241915;
       width: 28px;
       height: 28px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
    }

    .view-icon img {
       width: 14px;
       height: auto;
       filter: none;
    }

    /* Hover Effects */
    .image-container:hover .project-img {
       transform: scale(1.05);
       filter: grayscale(0%);
    }

    .image-container:hover .view-overlay {
       opacity: 1;
    }

    /* Project Text Styling */
    .project-info h3 {
       font-size: 24px;
       color: #241915;
       font-weight: 500;
       margin-bottom: 10px;
    }

    .project-info p {
       font-size: 15px;
       color: #241915;
       line-height: 1.4;
    }

    /* Mobile View Button - Hidden on Desktop */
    .mobile-view-btn {
       display: none;
    }

    /* --- Responsive Design --- */

    @media (max-width: 1440px) {

       .slider-header-container,
       .slider-wrapper {
          padding-left: 0;
          padding-right: 0;
          margin-left: 0;
       }

       .projects-header-container,
       .sectors-header-container {
          padding: 40px 0 20px 0 !important;
       }

       .projects-text-container {
          margin-left: 0;
       }

       .section-title1 {
          font-size: 16px;
       }
    }

    @media (max-width: 1366px) {
       .section-title1 {
          font-size: 16px;
       }

       .projects-desc {
          font-size: 15px;
          max-width: 350px;
       }

       .image-container {
          height: 220px;
       }
    }

    @media (max-width: 1024px) {

       .projects-header-container,
       .sectors-header-container {
          padding: 30px 0 20px 0 !important;
       }

       .slider-wrapper {
          padding: 10px 0 40px 0;
       }

       .section-title1 {
          font-size: 16px;
       }

       .project-card {
          width: calc((100% - 30px) / 2);
          flex: 0 0 calc((100% - 30px) / 2);
       }

       .image-container {
          height: 200px;
       }
    }

    /* 768px - Tablet Portrait / Mobile */
    @media (max-width: 768px) {

       .projects-header-container,
       .sectors-header-container {
          padding: 60px 10px 0px 0px !important;
          flex-direction: row;
          justify-content: space-between;
          align-items: flex-end;
          gap: 15px;
       }



       .projects-text-container {
          width: 100%;
          margin-left: 0;
          top: 0;
       }

       .projects-desc {
          font-size: 13px;
          max-width: 100%;
       }

       .section-title1 {
          font-size: 16px;
          margin-right: -20px;
       }

       .slider-wrapper {
          padding: 10px 0px 40px 0px;
       }

       .project-card {
          width: 100%;
          flex: 0 0 100%;
          padding: 0 0px;
       }

       .image-container {
          height: 220px;
       }

       /* Mobile Arrows */
       .projects-arrows-container {
          display: flex !important;
          gap: 8px;
       }

       .nav-btn {
          width: 36px !important;
          height: 36px !important;
          min-width: 36px !important;
          min-height: 36px !important;
       }

       .nav-btn img {
          width: 14px;
       }

       /* Mobile View Button */
       .view-overlay {
          display: none !important;
       }

       .mobile-view-btn {
          display: flex;
          align-items: center;
          gap: 10px;
          background: #241915;
          color: #fff;
          padding: 8px 12px 8px 16px;
          width: fit-content;
          margin-top: 15px;
          font-size: 14px;
          font-weight: 400;
       }

       .mobile-view-btn .view-icon {
          width: 24px;
          height: 24px;
       }

       .mobile-view-btn .view-icon img {
          width: 12px;
       }

       .image-container img.project-img {
          filter: grayscale(0%);
       }
    }



    /* --- CLIENTELE MARQUEE --- */
    .clientele-marquee {
       width: 100%;
       background-color: #f9f7f4;
       padding: 40px 0;
       overflow: hidden;
    }

    .marquee-track {
       display: flex;
       width: max-content;
       animation: marquee-scroll 35s linear infinite;
    }

    .clientele-marquee:hover .marquee-track {
       animation-play-state: paused;
    }

    .marquee-content {
       display: flex;
       align-items: center;
       flex-shrink: 0;
       min-width: 100vw;
       justify-content: space-around;
       gap: 80px;
       padding: 0 40px;
       box-sizing: border-box;
    }

    .logo-item {
       color: #241915;
       font-family: 'Red Hat Display', sans-serif;
       font-size: 24px;
       font-weight: 500;
       letter-spacing: 1px;
       white-space: nowrap;
       opacity: 1;
    }

    .logo-item img {
       height: 80px;
       width: auto;
       max-width: 160px;
       object-fit: contain;
       display: block;
    }

    @keyframes marquee-scroll {
       from { transform: translateX(0); }
       to { transform: translateX(-50%); }
    }

    @media (max-width: 768px) {
       .clientele-marquee {
          padding: 25px 0;
       }

       .marquee-content {
          gap: 40px;
          padding: 0 20px;
       }

       .logo-item {
          font-size: 18px;
       }

       .logo-item img {
          height: 60px;
          max-width: 110px;
       }
    }

    @media (prefers-reduced-motion: reduce) {
       .marquee-track {
          animation: none;
       }
    }


    /* --- ABOUT SECTION --- */
    .about-section {
       padding: 80px 30px;
       background-color: #f9f7f4;
    }

    .about-top {
       display: grid;
       grid-template-columns: 1fr 2fr;
       gap: 40px;
       margin-bottom: 50px;
       align-items: start;
    }

    .about-heading h2 {
       font-family: 'Red Hat Display', sans-serif;
       font-weight: 400;
       font-size: clamp(2.5rem, 4vw, 3.5rem);
       line-height: 1.1;
       color: #241915;
       margin: 0;
    }

    .about-heading h2 .brand-glyph {
       font-family: 'Penny Lane', cursive;
       font-weight: 400;
       text-transform: uppercase;
    }

    .about-heading h2 em {
       font-style: normal;
       font-family: 'Red Hat Display', sans-serif;
    }

    .about-description {
       padding-top: 5px;
    }

    .featured-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 25px;
       border-top: 1px solid #ddd;
       padding-top: 25px;
    }

    .featured-title {
       font-size: 1rem;
       font-weight: 400;
       color: #241915;
       margin: 0;
       letter-spacing: 0.5px;
    }

    .featured-arrows {
       display: flex;
       gap: 12px;
    }

    .featured-arrow-btn {
       background: none;
       border: 1px solid #ccc;
       border-radius: 50%;
       width: 40px;
       height: 40px;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: border-color 0.2s;
    }

    .featured-arrow-btn:hover {
       border-color: #241915;
    }

    .featured-track-wrap {
       overflow: hidden;
       position: relative;
       cursor: none;
    }

    .featured-track {
       display: flex;
       gap: 20px;
       overflow-x: auto;
       scroll-behavior: smooth;
       scrollbar-width: none;
       -ms-overflow-style: none;
       cursor: none;
    }

    .featured-track::-webkit-scrollbar {
       display: none;
    }

    .featured-track.is-dragging {
       scroll-behavior: auto;
       user-select: none;
    }

    .featured-track.is-dragging .featured-card {
       pointer-events: none;
    }

    .drag-cursor {
       position: fixed;
       width: 80px;
       height: 80px;
       border: 1px solid #b8965a;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       pointer-events: none;
       z-index: 9999;
       opacity: 0;
       transition: opacity 0.25s ease, transform 0.15s ease;
       transform: translate(-50%, -50%) scale(0.5);
       background: transparent;
    }

    .drag-cursor.visible {
       opacity: 1;
       transform: translate(-50%, -50%) scale(1);
    }

    .drag-cursor span {
       font-size: 10px;
       letter-spacing: 2px;
       text-transform: uppercase;
       color: #241915;
       font-weight: 500;
    }

    .featured-card {
       flex: 0 0 calc(33.333% - 14px);
       text-decoration: none;
       color: #241915;
    }

    .featured-card img {
       width: 100%;
       height: 300px;
       object-fit: cover;
       display: block;
       filter: grayscale(100%);
       transition: filter 0.3s ease;
    }

    .featured-card:hover img {
       filter: grayscale(0%);
    }

    .featured-card span {
       display: block;
       margin-top: 14px;
       font-size: 1.1rem;
       font-weight: 500;
    }

    @media (max-width: 1024px) {
       .about-section {
          padding: 60px 20px;
       }

       .about-top {
          grid-template-columns: 1fr;
          gap: 25px;
       }

       .featured-card {
          flex: 0 0 calc(50% - 10px);
       }
    }

    @media (max-width: 768px) {
       .featured-card {
          flex: 0 0 calc(100% - 10px);
       }

       .featured-card img {
          height: 250px;
       }
    }



    /* --- SERVICE MENU (Simple and Clean Work Process) --- */
    /* Wrapper to protect styles from leaking and block WP theme styles */
    #service-menu-wrapper {
       font-family: 'Red Hat Display', sans-serif !important;
       color: #241915 !important;
       width: auto;
       margin: 20px 0;
       background-color: #f9f7f4;
       position: relative;
       z-index: 10;
    }

    #service-menu-wrapper * {
       box-sizing: border-box !important;
    }

    /* Reset Theme Margins for this section */
    #service-menu-wrapper h2,
    #service-menu-wrapper p,
    #service-menu-wrapper img {
       margin: 0;
       padding: 0;
       border: none;
       box-shadow: none;
       background: none;
    }

    /* Main Container */
    #service-menu-wrapper .service-menu-container {
       width: 100%;
       padding: 0;
       display: flex;
       gap: 60px;
       align-items: flex-start;
    }

    /* --- Left Column (Desktop Preview) --- */
    #service-menu-wrapper .service-left-col {
       flex: 1;
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
       align-items: flex-start;
       height: auto;
       position: sticky;
       top: 40px;
       gap: 20px;
       padding-top: 12px;
    }

    #service-menu-wrapper .service-text-display {
       font-size: 13px !important;
       line-height: 1.4 !important;
       opacity: 0;
       transition: opacity 0.3s ease;
       font-weight: 400 !important;
       max-width: 400px;
       color: #241915 !important;
    }

    /* Desktop Image Display */
    #service-menu-wrapper .service-image-display {
       width: 100%;
       max-width: 400px;
       display: flex;
       align-items: flex-start;
       justify-content: flex-start;
       overflow: hidden;
       opacity: 0;
       transition: opacity 0.3s ease;
    }

    #service-menu-wrapper .service-image-display img {
       width: 100% !important;
       height: auto !important;
       object-fit: cover !important;
    }

    /* --- Right Column (Menu List) --- */
    #service-menu-wrapper .service-right-col {
       flex: 0 0 50%;
       display: flex;
       flex-direction: column;
       padding-top: 0;
    }

    #service-menu-wrapper .service-menu-item {
       padding: 30px 10px !important;

       cursor: pointer;
       display: flex;
       flex-direction: column;
       transition: all 0.3s ease;
       position: relative;
       border-bottom: 1px solid #d9d9d9 !important;
    }



    #service-menu-wrapper .service-item-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       width: 100%;
    }

    #service-menu-wrapper .service-menu-item h2 {
       font-size: 18px !important;
       /* Cap to 18px according to rules */
       font-weight: 400 !important;
       transition: transform 0.3s ease, color 0.3s ease;
       line-height: 1.2 !important;
       color: #241915 !important;
    }

    /* Arrow Image Styling (Permanently visible) */
    #service-menu-wrapper .service-arrow-icon {
       opacity: 1;
       transform: translateX(0) rotate(0deg);
       transition: all 0.3s ease;
       width: 18px !important;
       height: auto !important;
       filter: brightness(0);
    }

    /* Desktop Hover & Active States */
    @media (hover: hover) {

       #service-menu-wrapper .service-menu-item:hover h2,
       #service-menu-wrapper .service-menu-item.active h2 {
          color: #241915 !important;
          transform: translateX(10px);
       }

       #service-menu-wrapper .service-menu-item:hover .service-arrow-icon,
       #service-menu-wrapper .service-menu-item.active .service-arrow-icon {
          transform: translateX(10px);
       }
    }

    /* --- MOBILE ACCORDION CONTENT --- */
    #service-menu-wrapper .mobile-detail-content {
       display: none;
       overflow: hidden;
       max-height: 0;
       padding-top: 0;
       transition: max-height 0.8s ease, padding 0.5s ease;
    }

    #service-menu-wrapper .mobile-detail-content p {
       font-size: 16px !important;
       line-height: 1.5 !important;
       color: #241915 !important;
       margin: 12px 0 !important;
    }

    #service-menu-wrapper .mobile-detail-content img {
       width: 100% !important;
       max-width: 400px !important;
       height: auto !important;
       object-fit: cover !important;
       margin-bottom: 12px !important;
    }

    /* --- RESPONSIVENESS --- */
    @media (max-width: 1200px) {
       #service-menu-wrapper .service-menu-item h2 {
          font-size: 18px !important;
       }

       #service-menu-wrapper .service-right-col {
          flex: 0 0 55%;
       }
    }

    @media (max-width: 1024px) {
       #service-menu-wrapper .service-menu-container {
          display: block;
          padding: 0px;
       }

       #service-menu-wrapper .service-left-col {
          display: none;
       }

       #service-menu-wrapper .service-right-col {
          width: 100%;
          flex: none;
       }

       #service-menu-wrapper .service-menu-item {
          padding: 30px 0px !important;
          border-bottom: 1px solid #d9d9d9 !important;
       }

       #service-menu-wrapper .service-menu-item:first-child {
          border-top: 1px solid #d9d9d9 !important;
       }

       #service-menu-wrapper .service-menu-item h2 {
          font-size: 17px !important;
       }

       #service-menu-wrapper .service-arrow-icon {
          width: 16px !important;
       }

       #service-menu-wrapper .mobile-detail-content {
          display: block;
       }

       #service-menu-wrapper .service-menu-item.active .mobile-detail-content {
          max-height: 1000px;
          padding-top: 10px;
       }

       #service-menu-wrapper .service-menu-item.active .service-arrow-icon {
          transform: rotate(90deg);
       }

       #service-menu-wrapper .service-menu-item.active h2 {
          color: #241915 !important;
       }
    }

    @media (max-width: 768px) {
       #service-menu-wrapper {
          margin: 20px 0;
       }
    }



    /* --- RECEDING STACK RESPONSIVE --- */
    .rs-stack-container,
    .rs-stack-container * {
       box-sizing: border-box;
       transform: none;
    }

    .rs-stack-container {
       width: 100%;
       max-width: 80%;
       margin: 0 auto;
       position: relative;
       padding-bottom: 10vh;
    }

    .rs-card {
       width: 100%;
       height: 75vh;
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 10px 20px 20px 20px;
       background-color: transparent;
    }

    .rs-card-inner {
       display: grid;
       grid-template-columns: 40% 60%;
       width: 100%;
       height: 60vh;
       border-radius: 10px;
       overflow: hidden;
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
       transform-origin: center top;
       will-change: transform;
    }

    .rs-content {
       padding: 35px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       gap: 18px;
       height: 100%;
       background-color: inherit;
    }

    .rs-content h2 {
       font-size: 38px;
       line-height: 1.1;
       color: #e8e0d5;
       text-transform: uppercase;
       font-weight: 700;
       margin-bottom: 16px;
    }

    .rs-content p {
       font-size: 15px;
       line-height: 1.6;
       color: #b0a69e;
    }

    .rs-image-box {
       width: 100%;
       height: 100%;
       position: relative;
       overflow: hidden;
    }

    .rs-image-box img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
    }

    #rs-card-0 {
       z-index: 1;
    }

    #rs-card-1 {
       z-index: 2;
    }

    #rs-card-2 {
       z-index: 3;
    }

    #rs-card-3 {
       z-index: 4;
    }

    #rs-card-0 .rs-card-inner {
       background-color: #241915;
    }

    #rs-card-1 .rs-card-inner {
       background-color: #241915;
    }

    #rs-card-2 .rs-card-inner {
       background-color: #241915;
    }

    #rs-card-3 .rs-card-inner {
       background-color: #241915;
    }

    #rs-card-4 {
       z-index: 5;
    }

    #rs-card-4 .rs-card-inner {
       background-color: #241915;
    }

    @media (max-width: 1366px) {
       .rs-content h2 {
          font-size: 32px;
       }

       .rs-content {
          padding: 28px;
       }
    }

    @media (max-width: 1024px) {
       .rs-stack-container {
          max-width: 100%;
       }

       .rs-card-inner {
          grid-template-columns: 45% 55%;
          height: 55vh;
       }

       .rs-content h2 {
          font-size: 35px;
          /* 2.2rem -> px */
       }

       .rs-content p {
          font-size: 16px;
          /* 1rem -> px */
       }

       .rs-content {
          padding: 30px;
       }
    }

    @media (max-width: 768px) {
       .rs-card {
          height: 60vh;
          padding: 0px;
          align-items: center;
       }

       .rs-card-inner {
          grid-template-columns: 1fr;
          grid-template-rows: auto 1fr;
          height: 50vh;
          min-height: 350px;
       }

       .rs-content {
          padding: 25px;
          justify-content: flex-start;
          height: auto;
       }

       .rs-content h2 {
          font-size: 28px;
          /* 1.8rem -> px */
          margin-bottom: 0;
       }

       .rs-content p {
          display: none;
       }

       .rs-image-box {
          width: 100%;
          height: 100%;
       }
    }



    /* --- INSIGHT BLOG SECTION --- */
    .insight-section,
    .blogs-container {
       margin: 0 auto;
       width: 100%;
       overflow: hidden;
       padding: 40px 0;
    }

    .insight-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin: 0;
       padding: 0 40px;
    }

    .view-all {
       text-decoration: none;
       color: #241915;
       font-size: 16px;
       /* 1rem -> px */
       font-weight: 500;
       display: flex;
       align-items: center;
       gap: 10px;
       transition: opacity 0.3s;
       white-space: nowrap;
    }

    .view-all img {
       width: 12px;
       height: auto;
       filter: invert(0);
    }

    .view-all:hover {
       opacity: 0.7;
    }

    .filter-nav {
       padding: 0px 40px 30px 0px;
    }

    .filter-nav ul {
       display: flex;
       list-style: none;
       gap: 12px;
       flex-wrap: wrap;
       padding: 15px 0;
    }

    .filter-nav li a {
       text-decoration: none;
       font-size: 15px;
       /* 0.9rem -> px */
       font-weight: 500;
       color: #241915;
       background: #f0f0f0;
       padding: 8px 24px;
       cursor: pointer;
       transition: all 0.3s ease;
       display: block;
    }

    .filter-nav li a:hover {
       background: #e0e0e0;
       color: #241915;
    }

    .filter-nav li.active a {
       background: #241915;
       color: #fff;
    }

    .insight-container {
       padding: 0;
    }

    .insight-feed {
       display: flex;
       gap: 30px;
       overflow-x: auto;
       padding-bottom: 20px;
       width: 100%;
       -ms-overflow-style: none;
       scrollbar-width: none;
       cursor: grab;
       user-select: none;
    }

    .insight-feed::-webkit-scrollbar {
       display: none;
    }

    .insight-feed.active {
       cursor: grabbing;
       cursor: -webkit-grabbing;
    }

    .blog-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
       gap: 60px 30px;
       width: 100%;
       padding: 40px 0;
    }

    .blogs-container {
       padding: 60px 30px;

       margin: 0 auto;
    }

    .blog-card {
       flex: 0 0 calc((100% - 90px) / 4);
       -webkit-user-drag: none;
       position: relative;
       padding-bottom: 60px;
       /* Space for the button */
    }

    .blog-card .card-media {
       width: 100%;
       aspect-ratio: 16 / 9;
       overflow: hidden;
       border-radius: 0;
       /* Squared edges as per design */
    }

    .card-text h3 {
       font-size: 24px;
       font-weight: 600;
       line-height: 1.3;
       margin-top: 15px;
       margin-bottom: 10px;
    }

    .insight-feed .card-text h3 {
       display: -webkit-box;
       -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
       overflow: hidden;
       min-height: calc(1.3em * 3);
    }

    .blog-card .excerpt {
       font-size: 16px;
       color: #241915;
       line-height: 1.6;
       margin: 10px 0;
    }

    .blog-card time {
       font-size: 14px;
       color: #241915;
       margin-top: 10px;
    }

    .read-more-btn {
       position: absolute;
       bottom: 0;
       right: 0;
       background: #241915;
       color: #fff;
       padding: 10px 25px;
       text-decoration: none;
       font-size: 14px;
       text-transform: uppercase;
       letter-spacing: 1px;
       display: flex;
       align-items: center;
       gap: 10px;
       transition: background 0.3s;
    }

    .read-more-btn:hover {
       background: #333;
    }

    .blogs-header {
       padding-top: 120px;
       margin-bottom: 60px;
       border-bottom: 1px solid #eee;
       padding-bottom: 20px;
    }

    .blogs-title-area {
       width: 100%;
       display: flex;
       justify-content: space-between;
       align-items: center;
    }

    .search-wrapper {
       display: flex;
       align-items: center;
       gap: 15px;
       position: relative;
    }

    .search-input-container {
       display: none;
       overflow: hidden;
       align-items: center;
    }

    .search-input-container.active {
       display: flex;
       width: 300px;
    }

    .search-input-container input {
       width: 100%;
       padding: 10px 15px;
       border: 1px solid #ddd;
       font-family: inherit;
       font-size: 15px;
       outline: none;
    }

    .search-toggle-btn {
       cursor: pointer;
       padding: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: opacity 0.3s;
    }

    .search-toggle-btn:hover {
       opacity: 0.6;
    }

    /* Pagination */
    .pagination-container {
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 20px;
       margin-top: 80px;
       padding: 40px 0;
    }

    .page-item {
       font-size: 18px;
       color: #241915;
       text-decoration: none;
       cursor: pointer;
       padding: 5px 15px;
       margin: 0 10px;
       transition: opacity 0.3s;
    }

    .page-item.active {
       font-weight: 600;
       border-bottom: 2px solid #241915;
    }

    .section-desc {
       font-size: 18px;
       color: #241915;
       max-width: 800px;
       margin-top: 10px;
    }

    .search-container {
       position: relative;
       max-width: 500px;
       margin: 40px 0;
    }

    .search-container input {
       width: 100%;
       padding: 15px 50px 15px 20px;
       border: 1px solid rgba(0, 0, 0, 0.1);
       font-family: inherit;
       font-size: 16px;
       outline: none;
       background: #f9f7f4;
       transition: all 0.3s ease;
    }

    .search-container input:focus {
       border-color: #241915;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }

    .search-icon {
       position: absolute;
       right: 20px;
       top: 50%;
       transform: translateY(-50%);
       opacity: 0.5;
    }

    .blog-card .excerpt {
       font-size: 15px;
       color: #241915;
       line-height: 1.6;
       margin: 10px 0;
       display: -webkit-box;
       -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
       overflow: hidden;
    }

    .card-text h3 {
       font-size: 18px;
       /* 1.25rem -> px, capped at 18px */
       font-weight: 500;
       text-transform: uppercase;
       line-height: 1.4;
       margin-bottom: 10px;
       color: #241915;
    }

    /* --- BLOG POST PAGE (DARK THEME) --- */
    .blog-post-page {
       background-color: #f9f7f4;
       color: #241915;
    }

    .blog-post-content {
       margin: 0 auto;
       padding: 150px 30px 100px 30px;
    }

    .blog-post-title {
       font-size: 3rem;
       text-transform: uppercase;
       font-weight: 700;
       line-height: 1.1;
       margin-bottom: 50px;
       letter-spacing: -1px;
    }

    .blog-post-hero {
       width: 100%;
       margin-bottom: 60px;
    }

    .blog-post-hero img {
       width: 100%;
       display: block;
    }

    .blog-post-body {
       font-size: 1.1rem;
       line-height: 1.8;
       color: #241915;
       padding: 0;
    }

    .blog-post-body p {
       margin-bottom: 30px;
    }

    .blog-post-footer {
       margin-top: 80px;
       font-size: 1rem;
       color: #241915;
       border-top: 1px solid #333;
       padding-top: 40px;
       margin-bottom: 60px;
    }

    /* --- RELATED ARTICLES --- */
    .related-articles {
       margin-top: 60px;
       margin-left: -30px;
       margin-right: -30px;
    }

    .related-articles h2 {
       font-size: 24px;
       text-transform: uppercase;
       margin-bottom: 40px;
    }

    .related-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
       gap: 30px;
    }

    /* MOBILE VIEW FOR BLOGS */
    @media (max-width: 768px) {
       .blog-post-content {
          padding: 120px 10px 60px 10px;
       }

       .related-articles {
          margin-left: -10px;
          margin-right: -10px;
       }

       .blog-post-title {
          font-size: 2rem;
          margin-bottom: 30px;
       }

       .blog-post-body {
          font-size: 1rem;
       }
    }

    .card-text time {
       display: block;
       color: #241915;
       font-size: 14px;
       /* 0.85rem -> px */
       margin-bottom: 20px;
    }

    .card-media {
       width: 100%;
       aspect-ratio: 16 / 9;
       overflow: hidden;
       background: #f0f0f0;
       margin-top: auto;
       pointer-events: none;
    }

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

    .blog-card:hover .card-media img {
       transform: scale(1.05);
    }

    @media (max-width: 1400px) {
       .blog-card {
          flex: 0 0 calc((100% - 60px) / 3);
       }
    }

    @media (max-width: 1024px) {

       .insight-header,
       .insight-container {
          padding: 0;
       }

       .filter-nav {
          padding: 30px 25px 25px 15px;
       }

       .insight-feed {
          gap: 20px;
       }

       .blog-card {
          flex: 0 0 calc((100% - 20px) / 2);
       }
    }

    @media (max-width: 768px) {

       .insight-header,
       .insight-container {
          padding: 0;
       }

       .filter-nav {
          padding: 0px 0px 0px 0px;
       }

       .filter-nav ul {
          gap: 12px;
          padding: 0px 0 20px 0;
       }

       .filter-nav li a {
          padding: 6px 10px;
          font-size: 14px;
          /* 0.85rem -> px */
       }

       .insight-feed {
          padding-right: 0px;
       }

       .blog-card {
          flex: 0 0 100%;
       }
    }



    /* --- CONTACT US SECTION --- */
    .contact-section,
    .contact-section1 {
       width: 100%;
       padding: 20px 0 60px 0;
    }

    /* --- Slide to Contact CTA --- */
    .slide-to-contact-wrapper {
       width: 100%;
       padding: 40px 30px 60px 30px;
       display: flex;
       justify-content: center;
       box-sizing: border-box;
    }

    .slide-to-contact {
       position: relative;
       width: 100%;
       max-width: 640px;
       height: 80px;
       background: #1a1a1a;
       overflow: hidden;
       user-select: none;
       -webkit-user-select: none;
       touch-action: none;
    }

    .slide-to-contact .slide-label {
       position: absolute;
       inset: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       color: #cfcfcf;
       font-size: 18px;
       letter-spacing: 0.5px;
       font-family: 'Red Hat Display', sans-serif;
       pointer-events: none;
       transition: opacity 0.3s ease;
    }

    .slide-handle {
       position: absolute;
       top: 8px;
       left: 8px;
       width: 64px;
       height: 64px;
       background: #f9f7f4;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
       cursor: grab;
       z-index: 2;
       transform: translateX(0);
    }

    .slide-handle:active {
       cursor: grabbing;
    }

    .slide-to-contact.is-complete .slide-label {
       opacity: 0;
    }

    @media (max-width: 768px) {
       .slide-to-contact-wrapper {
          padding: 30px 20px 50px 20px;
       }

       .slide-to-contact {
          height: 68px;
       }

       .slide-handle {
          width: 54px;
          height: 54px;
          top: 7px;
          left: 7px;
       }

       .slide-to-contact .slide-label {
          font-size: 15px;
       }
    }

    .contact-container {
       display: flex;
       justify-content: space-between;
       gap: 80px;
       width: 100%;
       margin: 0 auto;
    }

    .contact-left {
       flex: 1;
       max-width: 500px;
    }

    .contact-heading {
       font-size: 36px;
       font-weight: 400;
       color: #241915;
       margin-bottom: 20px;
    }

    .contact-form {
       display: flex;
       flex-direction: column;
       gap: 30px;
    }

    .form-row {
       display: flex;
       gap: 30px;
    }

    .form-row .input-container {
       flex: 1;
    }

    .input-container {
       width: 100%;
       position: relative;
    }

    .input-container input,
    .input-container textarea {
       width: 100%;
       border: none;
       border-bottom: 1px solid #999;
       padding: 40px 0;
       font-size: 16px;
       font-family: 'Red Hat Display', sans-serif;
       background: transparent;
       color: #241915;
       outline: none;
       transition: border-color 0.3s ease;
       resize: none;
    }

    .input-container input::placeholder,
    .input-container textarea::placeholder {
       color: #241915;
       font-weight: 400;
    }

    .input-container input:focus,
    .input-container textarea:focus {
       border-bottom: 1px solid #241915;
    }

    .submit-btn {
       background: #241915;
       color: #fff;
       border: none;
       padding: 12px 30px;
       font-size: 14px;
       cursor: pointer;
       width: fit-content;
       margin-top: 10px;
       transition: all 0.3s ease;
    }

    .submit-btn:hover {
       background: #333;
       transform: scale(1.05);
    }

    .contact-right {
       flex: 1;
       display: flex;
       flex-direction: column;
       gap: 40px;
    }

    .contact-info-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 40px;
       padding: 40px 0 0 0;
    }

    .info-block h3 {
       font-size: 16px;
       font-weight: 400;
       color: #241915;
       margin-bottom: 15px;
    }

    .info-block p {
       font-size: 15px;
       color: #241915;
       line-height: 1.6;
       margin: 0 0 12px;
    }

    .info-block p:last-child {
       margin-bottom: 0;
    }

    .social-icons {
       display: flex;
       gap: 12px;
       align-items: center;
    }

    .social-icons a {
       width: 32px;
       height: 32px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       color: #241915;
       transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .social-icons a:hover {
       opacity: 0.85;
       transform: translateY(-2px);
    }

    .social-icons a img {
       width: 22px !important;
       height: 22px;
       display: block;
       object-fit: contain;
    }

    /* Twitter Icon Color */
    .social-icons a[href*="x.com"] svg {
       stroke: #241915 !important;
    }

    .footer-socials a[href*="x.com"] svg {
       stroke: #FFF !important;
    }



    @media (max-width: 1024px) {
       .contact-container {
          flex-direction: column;
          gap: 60px;
       }

       .contact-left {
          max-width: 100%;
       }
    }

    @media (max-width: 768px) {
       .contact-container {}

       .contact-info-grid {
          grid-template-columns: 1fr;
          gap: 25px;
       }

       .form-row {
          flex-direction: column;
          gap: 30px;
       }


    }



    /* --- FOOTER --- */
    .site-footer {
       background-color: #241915;
       color: #fff;
       padding: 60px 40px 20px 40px;
       font-family: 'Red Hat Display', sans-serif;
    }

    .footer-top {
       display: flex;
       justify-content: space-between;
       flex-wrap: wrap;
       gap: 40px;
       margin-bottom: 50px;
    }

    .footer-col {
       flex: 1 1 200px;
       min-width: 200px;
       flex-shrink: 0;
    }

    .footer-col-1 {
       flex: 2 1 300px;
       min-width: 300px;
       flex-shrink: 0;
    }

    .footer-logo {
       font-size: 24px;
       font-weight: 300;
       letter-spacing: 2px;
       margin-bottom: 40px;
       /* Optional: replace with SVG background or text */
    }

    .newsletter-section p {
       font-size: 14px;
       color: #ccc;
       margin-bottom: 15px;
    }

    .newsletter-form {
       display: flex;
       max-width: 400px;
    }

    .newsletter-form input {
       flex: 1;
       background: transparent;
       border: 1px solid #333;
       color: #fff;
       padding: 12px 15px;
       font-family: 'Red Hat Display', sans-serif;
       font-size: 14px;
       outline: none;
    }

    .newsletter-form input::placeholder {
       color: #241915;
    }

    .newsletter-form button {
       background: #f9f7f4;
       color: #241915;
       border: none;
       padding: 0 25px;
       font-size: 14px;
       font-weight: 500;
       cursor: pointer;
       font-family: 'Red Hat Display', sans-serif;
    }

    .newsletter-status {
       display: none;
       margin: 10px 0 0;
       font-size: 13px;
       color: #ccc;
       max-width: 400px;
    }

    .footer-col h3 {
       font-size: 16px;
       font-weight: 500;
       margin-bottom: 20px;
       color: #fff;
    }

    .footer-mt {
       margin-top: 30px;
    }

    .footer-links {
       list-style: none;
       padding: 0;
       margin: 0;
    }

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

    .footer-links a {
       color: #ccc;
       text-decoration: none;
       font-size: 14px;
       transition: color 0.3s ease;
    }

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

    .footer-socials {
       display: flex;
       gap: 12px;
       align-items: center;
    }

    .footer-socials a {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       transition: opacity 0.3s ease, transform 0.3s ease;
       color: #fff;
    }

    .footer-socials a:hover {
       opacity: 0.8;
       transform: translateY(-2px);
    }

    .footer-socials img {
       width: 18px;
       height: 18px;
       display: block;
       transition: opacity 0.3s ease;
    }


    .footer-col p {
       color: #ccc;
       font-size: 14px;
       line-height: 1.6;
       margin: 0 0 12px;
    }

    .footer-col p:last-child {
       margin-bottom: 0;
    }

    .footer-divider {
       height: 1px;
       background-color: #333;
       width: 100%;
       margin-bottom: 20px;
    }

    .footer-bottom {
       display: flex;
       justify-content: space-between;
       align-items: center;
    }

    .footer-bottom p {
       color: #ccc;
       font-size: 14px;
       margin: 0;
    }

    .footer-bottom a {
       color: inherit;
       text-decoration: none;
       transition: opacity 0.3s ease;
    }

    .footer-bottom a:hover {
       opacity: 0.7;
    }

    .privacy-link,
    .footer-bottom .privacy-link,
    .panel-footer .privacy-link,
    .panel-footer .copyright-note,
    .footer-bottom .copyright-note {
       font-size: 11px !important;
       letter-spacing: 0.5px;
       text-decoration: none;
       color: inherit;
       opacity: 0.7;
       transition: opacity 0.3s ease;
    }

    .privacy-link:hover {
       opacity: 1;
    }

    @media (max-width: 768px) {
       .site-footer {
          padding: 40px 20px 20px 20px;
       }

       .footer-top {
          flex-direction: row;
          flex-wrap: wrap;
          gap: 20px;
       }

       .footer-col {
          flex: 1 1 20px;
          min-width: unset;
       }

       .footer-col-2,
       .footer-col-3 {
          flex: 1 1 40%;
          min-width: 150px;
       }

       .footer-col-1 {
          flex: 2 1 30px;
          min-width: unset;
       }

       .footer-bottom {
          flex-direction: column;
          gap: 10px;
          text-align: center;
       }
    }



    /* --- OVERRIDES --- */

    #service-menu-wrapper .service-menu-item.active .service-item-header {
       padding-bottom: 10px;
    }


    #service-menu-wrapper .service-menu-item:first-child {
       border-top: none !important;
    }



    /* Global Section Padding */
    section {
       padding-left: 30px;
       padding-right: 30px;
    }

    /* Specific Absolute Padding */
    .contact-section,
    .insight-section {
       padding: 30px !important;
    }

    .contact-section1 {
       padding: 30px 30px !important;
    }


    @media (max-width: 768px) {
       section {
          padding-left: 10px;
          padding-right: 10px;
       }

       .contact-section,
       .insight-section {
          padding: 20px 10px !important;
       }

       .contact-section1 {
          padding: 20px 10px !important;
       }
    }

    /* --- PORTFOLIO PAGE STYLES --- */
    body.portfolio-page {
       padding-top: 80px;
       background-color: #f9f7f4;
    }

    .portfolio-header {
       padding: 150px 60px 40px 60px;
    }

    .custom-grid-container {
       width: 100%;
       display: grid;
       grid-template-columns: 1fr 1fr;
       column-gap: 100px;
       row-gap: 0;
       padding: 40px 60px 120px 60px;
       background-color: #f9f7f4;
       box-sizing: border-box;
    }

    .pm-column {
       display: flex;
       flex-direction: column;
       gap: 0;
    }

    .pm-column-left {
       margin-top: 140px;
    }

    .custom-card {
       display: block;
       width: 100%;
       text-decoration: none;
       color: inherit;
       cursor: pointer;
       opacity: 0;
    }

    .image-wrapper {
       width: 100%;
       overflow: hidden;
       margin-bottom: 14px;
    }

    .image-wrapper img {
       width: 100%;
       height: auto;
       display: block;
       transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .custom-card:hover .image-wrapper img {
       transform: scale(1.02);
    }

    .custom-label {
       display: inline-block;
       align-self: flex-start;
       text-align: left;
       font-size: 13px;
       text-transform: none;
       letter-spacing: 0.3px;
       color: #241915;
       border-bottom: none;
       padding-bottom: 0;
       opacity: 0.85;
       transition: opacity 0.3s ease;
    }

    .custom-card:hover .custom-label {
       opacity: 1;
    }

    @media (max-width: 1024px) {
       .custom-grid-container {
          column-gap: 60px;
          padding: 40px 40px 80px 40px;
       }

       .pm-column-left {
          margin-top: 100px;
       }
    }

    @media (max-width: 768px) {
       .custom-grid-container {
          grid-template-columns: 1fr;
          column-gap: 0;
          padding: 30px 20px 60px 20px;
       }

       .pm-column-left {
          margin-top: 0;
       }

       .custom-card {
          margin-top: 50px !important;
       }

       .portfolio-header {
          padding: 120px 20px 20px 20px;
       }
    }

    /* --- FOUNDER SECTION (About page) --- */
    .founder-section {
       padding: 60px 30px;
       font-family: 'Red Hat Display', sans-serif;
    }

    .founder-wrap {
       display: grid;
       grid-template-columns: 5fr 6fr;
       gap: 0;
       margin: 0 auto;
       align-items: stretch;
       overflow: hidden;
       height: 90vh;
    }

    .founder-media {
       position: relative;
       overflow: hidden;
       min-height: 620px;
    }

    .founder-media img {
       width: 100%;
       height: 100%;
       display: block;
       object-fit: cover;
       object-position: center top;
    }

    .founder-content {
       display: flex;
       flex-direction: column;
       justify-content: center;
       padding: 70px 60px;
       color: #241915;
    }

    .founder-eyebrow {
       display: inline-block;
       font-size: 11px;
       font-weight: 500;
       letter-spacing: 0.28em;
       text-transform: uppercase;
       color: #532700;
       margin-bottom: 20px;
    }

    .founder-name {
       font-size: clamp(2.4rem, 4.2vw, 3.6rem);
       font-weight: 400;
       line-height: 1;
       letter-spacing: -0.02em;
       color: #241915;
       margin: 0;
    }

    .founder-divider {
       width: 60px;
       height: 2px;
       background: #532700;
       margin: 28px 0 18px;
    }

    .founder-role {
       font-size: 12px;
       font-weight: 500;
       letter-spacing: 0.22em;
       text-transform: uppercase;
       color: #241915;
       margin: 0 0 32px 0;
    }

    .founder-bio {
    }

    .founder-bio p {
       font-size: 1rem;
       line-height: 1.75;
       color: #241915;
       margin: 0 0 18px 0;
    }

    .founder-bio p:last-child {
       margin-bottom: 0;
    }

    .founder-facts {
       display: grid;
       grid-template-columns: repeat(3, auto);
       gap: 40px;
       margin-top: 44px;
       padding-top: 32px;
       border-top: 1px solid rgba(36, 25, 21, 0.15);
    }

    .fact {
       display: flex;
       flex-direction: column;
    }

    .fact-number {
       font-size: 2rem;
       font-weight: 500;
       line-height: 1;
       color: #532700;
       letter-spacing: -0.02em;
    }

    .fact-label {
       font-size: 11px;
       font-weight: 500;
       letter-spacing: 0.15em;
       text-transform: uppercase;
       color: #241915;
       margin-top: 10px;
    }

    @media (max-width: 900px) {
       .founder-section {
          padding: 30px 15px;
       }

       .founder-wrap {
          display: block;
          overflow: visible;
          height: auto;
       }

       .founder-media {
          min-height: 480px;
       }

       .founder-content {
          padding: 30px 15px;
          justify-content: flex-start;
       }

       .founder-facts {
          gap: 24px;
       }

       .fact-number {
          font-size: 1.6rem;
       }

       .founder-highlights {
          grid-template-columns: repeat(2, 1fr);
       }

       .founder-hl:nth-child(2) {
          border-right: none;
       }

       .founder-hl:nth-child(1),
       .founder-hl:nth-child(2) {
          border-bottom: 1px solid #d5d0ca;
       }
    }

    /* --- ABOUT US PAGE STYLES --- */
    .about-page .about-hero,
    .services-page .services-hero,
    .blogs-page .services-hero,
    .contact-page .contact-hero {
       height: 70vh;
       width: 100%;
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
       display: flex;
       align-items: flex-end;
       justify-content: flex-start;
       padding: 0 30px 30px 30px;
       color: #fff;
    }

    .about-page .about-hero {
       background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
          url('Images/Services/Design-refinement.png');
    }


    .services-page .services-hero {
       background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
          url('Images/services-banner.jpg');
    }

    .blogs-page .services-hero {
       background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
          url('Images/Services/services.webp');
    }

    .contact-page .contact-hero {
       background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
          url('Images/contact-banner.jpg');
    }

    .about-page .about-hero,
    .services-page .services-hero,
    .blogs-page .blogs-hero,
    .contact-page .contact-hero {
       padding: 0 30px 50px 30px;
    }

    .about-hero-content,
    .services-hero-content,
    .contact-hero-content {
       max-width: 100%;
       width: 100%;
    }

    .about-hero-content h1,
    .services-hero-content h1,
    .contact-hero-content h1 {
       font-size: 3.5rem;
       font-weight: 500;
       margin-bottom: 20px;
       line-height: 1.1;
       text-transform: uppercase;
    }

    .about-hero-content h6,
    .services-hero-content h6,
    .contact-hero-content h6 {
       font-family: 'Red Hat Display', sans-serif;
       font-size: 3.5vw;
       font-weight: 400;
       line-height: 1.05;
       margin: 0 0 12px;
       text-transform: none;
       letter-spacing: normal;
    }

    .about-hero-content p,
    .services-hero-content p,
    .contact-hero-content p {
       font-size: 1rem;
       opacity: 0.9;
       max-width: 600px;
    }

    .about-page .about-hero-content h6 + p {
       font-size: 18px;
    }

    @media (max-width: 768px) {
       .about-hero-eyebrow {
          display: none;
       }
    }

    /* Stats Section */
    .stats-section {
       padding: 80px 30px;
       background-color: #f9f7f4;
    }

    .stats-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 20px;
    }

    .stat-card {
       background-color: transparent;
       padding: 40px 30px;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       min-height: 250px;
    }

    .stat-card h2 {
       font-size: 3rem;
       font-weight: 500;
       margin-bottom: 20px;
    }

    .stat-card p {
       font-size: 0.95rem;
       line-height: 1.5;
       color: #241915;
    }

    /* Team Section */
    .team-section {
       padding: 80px 30px;
       background-color: #f9f7f4;
    }

    .team-layout {
       display: flex;
       gap: 60px;
    }

    .team-left {
       flex: 0 0 300px;
    }

    .sticky-talk-box {
       position: -webkit-sticky;
       position: sticky;
       top: 100px;
       z-index: 10;
       padding: 40px;
       border: 1px solid #ddd;
       background: #f9f7f4;
    }

    .sticky-talk-box h3 {
       font-size: 2rem;
       margin-bottom: 20px;
    }

    .sticky-talk-box p {
       font-size: 1rem;
       color: #241915;
       margin-bottom: 30px;
       line-height: 1.5;
    }

    .talk-btn {
       display: inline-block;
       background: #241915;
       color: #fff;
       padding: 12px 25px;
       text-decoration: none;
       font-size: 0.9rem;
       transition: transform 0.3s ease;
    }

    .talk-btn:hover {
       transform: scale(1.05);
    }

    .team-right {
       flex: 1;
    }

    .team-title {
       font-size: 1.8rem;
       font-weight: 500;
       margin-bottom: 50px;
       text-align: center;
    }

    .team-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 40px 30px;
    }

    .team-member {
       display: flex;
       flex-direction: column;
       gap: 4px;
    }

    .member-img {
       width: 100%;
       aspect-ratio: 1 / 1;
       overflow: hidden;
       background-color: #eee;
       margin-bottom: 8px;
    }

    .member-img img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       filter: grayscale(100%);
       transition: filter 0.5s ease;
    }

    .team-member:hover .member-img img {
       filter: grayscale(0%);
    }

    .team-member h4 {
       font-size: 1.5rem;
       font-weight: 500;
       margin: 0;
    }

    .team-member p {
       font-size: 0.75em;
       color: #241915;
       text-transform: uppercase;
       letter-spacing: 1px;
       margin: 0;
    }

    /* About Responsive */
    @media (max-width: 1024px) {
       .stats-grid {
          grid-template-columns: repeat(2, 1fr);
       }

       .team-layout {
          flex-direction: column;
       }

       .team-left {
          width: 100%;
          flex: none;
       }

       .sticky-talk-box {
          display: none;
       }

       .team-grid {
          grid-template-columns: repeat(3, 1fr);
       }
    }

    @media (max-width: 768px) {

       .team-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 30px 20px;
       }

       .about-hero-content h1,
       .services-hero-content h1,
       .contact-hero-content h1 {
          font-size: 1.4rem;
          margin-bottom: 10px;
       }

       .about-hero,
       .services-hero,
       .contact-hero {
          padding: 0 15px 30px 15px !important;
       }

       .stats-section,
       .team-section {
          padding: 40px 10px;
       }

       .stat-card {
          padding: 30px 20px;
          min-height: 200px;
       }

       .stat-card h2 {
          font-size: 2.2rem;
       }
    }

    @media (max-width: 480px) {
       .team-grid {
          grid-template-columns: 1fr;
       }
    }

    @media (max-width: 480px) {
       .stats-grid {
          grid-template-columns: 1fr;
       }

       .team-grid {
          grid-template-columns: 1fr;
       }
    }

    /* --- PROJECT DETAIL PAGE STYLES --- */
    .project-hero {
       height: 85vh;
       width: 100%;
       background-size: cover;
       background-position: center;
       position: relative;
       display: flex;
       align-items: flex-end;
       justify-content: center;
       padding: 0;
       color: #fff;
       margin-bottom: 60px;
    }

    .project-hero-overlay {
       position: absolute;
       inset: 0;
       background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.05) 40%, transparent 100%);
    }

    .project-hero-details {
       position: absolute;
       bottom: 0;
       left: 50%;
       transform: translate(-50%, 50%);
       z-index: 3;
       display: flex;
       justify-content: space-around;
       padding: 30px 50px;
       width: 80%;
       max-width: 900px;
       background: #f9f7f4;
       border-top: 2px solid #b8965a;
    }

    .project-hero-details .detail-item {
       display: flex;
       flex-direction: column;
       gap: 8px;
       align-items: center;
       text-align: center;
    }

    .project-hero-details .detail-label {
       font-size: 13px;
       letter-spacing: 1.5px;
       text-transform: capitalize;
       color: #241915;
       font-weight: 600;
    }

    .project-hero-details .detail-value {
       font-size: 14px;
       font-weight: 400;
       color: #241915;
    }

    .project-hero-content {
       position: relative;
       z-index: 2;
    }

    .project-hero-content h1 {
       font-size: 4rem;
       font-weight: 500;
       letter-spacing: -1px;
       text-transform: uppercase;
    }

    .project-main-content {
       padding: 0;
       background-color: #f9f7f4;
    }

    .project-gallery {
       width: 100%;
       padding: 0 15px;
    }

    .gallery-item-landscape {
       width: 100%;
       margin-bottom: 20px;
    }

    .gallery-item-landscape img {
       width: 100%;
       height: 95vh;
       object-fit: cover;
       display: block;
    }

    .gallery-collage {
       background-color: transparent;
       padding: 10px 0 30px 0;
       display: grid;
       grid-template-columns: repeat(12, 1fr);
       gap: 20px;
       align-items: stretch;
    }

    .gallery-collage .collage-img {
       overflow: hidden;
    }

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

    .gallery-collage.count-2 .collage-img:nth-child(1) { grid-column: 3 / 7; }
    .gallery-collage.count-2 .collage-img:nth-child(2) { grid-column: 7 / 11; }

    .gallery-collage.count-3 .collage-img:nth-child(1) { grid-column: 1 / 5; }
    .gallery-collage.count-3 .collage-img:nth-child(2) { grid-column: 5 / 9; }
    .gallery-collage.count-3 .collage-img:nth-child(3) { grid-column: 9 / 13; }

    .gallery-collage.count-4 .collage-img:nth-child(1) { grid-column: 1 / 7; grid-row: 1; }
    .gallery-collage.count-4 .collage-img:nth-child(2) { grid-column: 7 / 13; grid-row: 1; }
    .gallery-collage.count-4 .collage-img:nth-child(3) { grid-column: 1 / 7; grid-row: 2; }
    .gallery-collage.count-4 .collage-img:nth-child(4) { grid-column: 7 / 13; grid-row: 2; }

    .collage-img {
       cursor: pointer;
       transition: transform 0.3s ease;
    }

    .collage-img:hover {
       transform: scale(1.02);
    }

    .gallery-item-landscape {
       cursor: pointer;
    }

    .gallery-item-landscape:hover img {
       opacity: 0.95;
    }

    /* --- PROJECT NAVIGATION --- */
    .project-navigation {
       padding: 30px 0px;

    }

    .nav-container {
       display: flex;
       justify-content: space-between;
       gap: 40px;
       margin: 0 auto;
       padding: 30px;
    }

    .nav-project-link {
       flex: 1;
       text-decoration: none;
       color: #241915;
       display: flex;
       flex-direction: column;
       gap: 15px;
       transition: transform 0.3s ease;
    }

    .nav-project-link:hover {
       transform: translateY(-5px);
    }

    .nav-project-link.next {
       text-align: right;
       align-items: flex-end;
    }

    .nav-label {
       font-size: 0.8rem;
       text-transform: uppercase;
       letter-spacing: 2px;
       color: #241915;
    }

    .nav-title {
       font-size: 18px;
       font-weight: 500;
    }

    .nav-img-wrapper {
       width: 50%;
       height: 250px;
       overflow: hidden;
    }

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

    .nav-project-link:hover .nav-img-wrapper img {
       transform: scale(1.1);
    }

    .gallery-item img {
       width: 100%;
       height: auto;
       display: block;
       transition: opacity 0.3s ease;
    }

    .gallery-item.clickable-gallery {
       cursor: pointer;
    }

    .gallery-item.clickable-gallery:hover img {
       opacity: 0.9;
    }

    .gallery-row {
       display: flex;
       justify-content: flex-start;
       gap: 0;
       width: 100%;
    }

    .gallery-item.vertical {
       width: 50%;
       padding: 10px 5px;
    }

    .gallery-row .gallery-item.vertical:only-child {
       width: 100%;
    }

    .gallery-item.horizontal {
       width: 100%;
       margin: 0;
       padding: 5px 5px;
    }

    .gallery-item.vertical img,
    .gallery-item.horizontal img {
       width: 100%;
       height: auto;
    }

    /* Lightbox */
    .lightbox {
       display: none;
       position: fixed;
       z-index: 9999;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.95);
       justify-content: center;
       align-items: center;
    }

    .lightbox-content {
       position: relative;
       max-width: 90%;
       max-height: 80%;
    }

    .lightbox-content img {
       width: auto;
       max-width: 100%;
       max-height: 80vh;
       object-fit: contain;
    }

    .lightbox-close {
       position: absolute;
       top: 40px;
       right: 40px;
       color: #fff;
       font-size: 50px;
       cursor: pointer;
       z-index: 10000;
    }

    .lightbox-nav {
       position: fixed;
       top: 50%;
       left: 0;
       width: 100%;
       display: flex;
       justify-content: space-between;
       transform: translateY(-50%);
       pointer-events: none;
       z-index: 10001;
       padding: 0 40px;
       box-sizing: border-box;
    }

    .lightbox-nav span {
       color: #fff;
       font-size: 40px;
       cursor: pointer;
       padding: 20px;
       user-select: none;
       pointer-events: auto;
    }

    /* Project Detail Responsive */
    @media (max-width: 1024px) {
       .project-hero-details {
          width: 90%;
          padding: 25px 30px;
       }

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

       .nav-img-wrapper {
          width: 100%;
          height: 150px;
          overflow: hidden;
       }

       .gallery-collage {
          padding: 10px 0 30px 0;
       }

       .gallery-collage.count-3 .collage-img:nth-child(1) { grid-column: 1 / 5; }
       .gallery-collage.count-3 .collage-img:nth-child(2) { grid-column: 5 / 9; }
       .gallery-collage.count-3 .collage-img:nth-child(3) { grid-column: 9 / 13; }

       .gallery-collage.count-4 .collage-img:nth-child(1) { grid-column: 1 / 7; grid-row: 1; }
       .gallery-collage.count-4 .collage-img:nth-child(2) { grid-column: 7 / 13; grid-row: 1; }
       .gallery-collage.count-4 .collage-img:nth-child(3) { grid-column: 1 / 7; grid-row: 2; }
       .gallery-collage.count-4 .collage-img:nth-child(4) { grid-column: 7 / 13; grid-row: 2; }
    }

    @media (max-width: 768px) {
       .project-hero {
          height: 60vh;
       }

       .project-hero-details {
          flex-wrap: wrap;
          width: 92%;
          padding: 20px 15px;
          gap: 15px 0;
       }

       .gallery-collage {
          padding: 10px 0 30px 0;
          gap: 12px;
       }

       .gallery-collage.count-2 .collage-img:nth-child(1) { grid-column: 3 / 7; }
       .gallery-collage.count-2 .collage-img:nth-child(2) { grid-column: 7 / 11; }

       .gallery-collage.count-3 .collage-img:nth-child(1),
       .gallery-collage.count-3 .collage-img:nth-child(2) { grid-column: span 6; }
       .gallery-collage.count-3 .collage-img:nth-child(3) { grid-column: 3 / 11; }

       .gallery-collage.count-4 .collage-img:nth-child(1) { grid-column: 1 / 7; grid-row: 1; }
       .gallery-collage.count-4 .collage-img:nth-child(2) { grid-column: 7 / 13; grid-row: 1; }
       .gallery-collage.count-4 .collage-img:nth-child(3) { grid-column: 1 / 7; grid-row: 2; }
       .gallery-collage.count-4 .collage-img:nth-child(4) { grid-column: 7 / 13; grid-row: 2; }

       .nav-container {
          padding: 10px;
       }

       /* Services Page Mobile Overrides */
       .services-page-container {
          padding: 10px !important;
       }

       .services-page section {
          padding-left: 0 !important;
          padding-right: 0 !important;
       }

       .secondary-menu .service-menu-container {
          flex-direction: column !important;
       }

       .secondary-menu .service-right-col {
          padding-right: 0 !important;
       }
    }

    @media (max-width: 480px) {
       .gallery-row {
          flex-direction: column;
       }

       .gallery-item.vertical {
          width: 100%;
       }
    }

    /* --- SERVICES PAGE --- */
    .our-services-section {
       padding: 0 !important;
    }

    .services-page-container {
       padding: 30px;
       /* Requested padding */
       margin: 0 auto;
       margin-top: 20px;
       /* Space for the header */
    }

    .service-row {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
       gap: 60px;
       padding: 40px 0;
       border-bottom: 1px solid #ddd;
    }

    .service-row:first-child {
       border-top: 1px solid #ddd;
    }

    .service-content {
       flex: 1;
       max-width: 700px;
    }

    .service-content h2 {
       font-size: 2.4rem;
       margin-bottom: 20px;
       font-weight: 500;
       color: #241915;
       letter-spacing: -1px;
    }

    .service-content p {
       font-size: 1.1rem;
       line-height: 1.6;
       color: #241915;
    }

    .service-image {
       flex: 1;
       max-width: 800px;
       height: 400px;
       overflow: hidden;
    }

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

    /* World Map image opacity + darkening (applies at all viewport widths) */
    .map-container img { opacity: 0.9; filter: brightness(1.2) saturate(0.45) contrast(1.3); }

    @media (max-width: 1024px) {
       .service-row {
          flex-direction: column;
          align-items: flex-start;
          gap: 30px;
       }

       .service-image {
          max-width: 100%;
          width: 100%;
       }

       .service-content {
          max-width: 100%;
       }

       .service-content p {
          font-size: 15px;
          line-height: 1.7;
          color: #241915;
       }

       .service-content h2 {
          font-size: 18px;
       }
    }

    /* --- World Map Locations --- */
    .map-container {
       position: relative;
       width: 100%;
       max-width: 1200px;
       margin: 0px auto 0;
       transform: scaleX(1.04);
       transform-origin: center;
    }

    .map-container img {
       width: 100%;
       display: block;
       opacity: 0.4;
    }

    .pin {
       position: absolute;
       width: 22px;
       height: 22px;
       background: #f9f7f4;
       border-radius: 50%;
       cursor: pointer;
       transform: translate(-50%, -50%);
       transition: transform 0.3s ease;
       box-shadow: 0 0 0 3px #241915, 0 0 0 6px rgba(255, 255, 255, 0.9), 0 0 20px rgba(90, 62, 42, 0.4);
    }

    .pin::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       border-radius: 50%;
       animation: pin-pulse 2s ease-out infinite;
    }

    @keyframes pin-pulse {
       0% {
          box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7), 0 0 0 0 rgba(0, 0, 0, 0.45);
       }

       100% {
          box-shadow: 0 0 0 12px rgba(255, 255, 255, 0), 0 0 0 20px rgba(0, 0, 0, 0);
       }
    }

    .pin:hover {
       transform: translate(-50%, -50%) scale(1.2);
    }

    .pin::after {
       content: '';
       position: absolute;
       width: 8px;
       height: 8px;
       background: #241915;
       border-radius: 50%;
       top: 7px;
       left: 7px;
    }

    .tooltip {
       position: absolute;
       background: #f9f7f4;
       color: #241915;
       padding: 10px 14px;
       font-size: 13px;
       width: 220px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
       display: none;
       transform: translate(-50%, -120%);
       z-index: 10;
       pointer-events: none;
    }

    .pin:hover .tooltip {
       display: block;
    }

    .tooltip strong {
       display: block;
       margin-bottom: 4px;
       font-size: 14px;
    }

    @media (max-width: 768px) {
       .tooltip {
          width: 150px;
          font-size: 11px;
          padding: 8px 10px;
          transform: translate(-50%, -110%);
       }

       /* Adjust tooltip position for pins near edges on mobile */
       .pin[style*="left: 27%"] .tooltip {
          transform: translate(-20%, -110%);
       }

       .pin[style*="left: 77.3%"] .tooltip {
          transform: translate(-80%, -110%);
       }

       .pin[style*="left: 69.6%"] .tooltip {
          transform: translate(-50%, -110%);
       }
    }

    /* --- SECONDARY SERVICE MENU (SERVICES PAGE) --- */
    .secondary-menu .service-menu-container {
       display: flex;
       gap: 50px;
    }

    .secondary-menu .service-left-col {
       flex: 0 0 50%;
    }

    .secondary-menu .service-right-col {
       flex: 0 0 48.7%;
       padding-right: 30px;
    }

    .secondary-menu .service-image-display {
       display: flex;
       height: 350px;
       overflow: hidden;
    }

    .secondary-menu .service-image-display img {
       width: 85%;
       height: 100%;
       object-fit: cover;
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    .service-list {
       display: flex;
       flex-direction: column;
    }

    .service-list-item {
       padding: 30px 0;
       border-top: 1px solid #eee;
       cursor: pointer;
       transition: all 0.3s ease;
    }

    .service-list-item:first-child {
       border-top: none;
    }

    .service-list-item:last-child {
       border-bottom: none;
    }

    .service-list-item h2 {
       font-size: 18px;
       font-weight: 400;
       color: #241915;
       transition: all 0.3s ease;
    }

    .service-list-item.active h2 {
       color: #241915;
    }

    .service-list-item:hover h2 {
       color: #241915;
    }

    .service-list-item p {
       display: none;
    }

    .secondary-menu #service-desc-display {
       font-size: 15px;
       line-height: 1.7;
       color: #241915;
       margin-bottom: 25px;
       max-width: 780px;
    }

    .secondary-menu .mobile-detail-content {
       display: none;
       overflow: hidden;
       max-height: 0;
       transition: max-height 0.8s ease, padding 0.5s ease;
    }

    .secondary-menu .mobile-detail-content p {
       display: block;
       font-size: 15px;
       line-height: 1.6;
       color: #241915;
       margin: 12px 0;
       max-width: 100%;
    }

    .secondary-menu .mobile-detail-content img {
       width: 100%;
       max-width: 400px;
       height: auto;
       object-fit: cover;
       margin-bottom: 12px;
    }

    @media (max-width: 1024px) {
       .services-page section {
          padding-left: 0 !important;
          padding-right: 0 !important;
       }

       .services-page .services-hero-content {
          padding-left: 10px;
          padding-right: 10px;
       }

       .secondary-menu .service-menu-container {
          flex-direction: column;
       }

       .secondary-menu .service-left-col {
          display: none;
       }

       .secondary-menu .service-right-col {
          padding-right: 0;
       }

       .secondary-menu .mobile-detail-content {
          display: block;
       }

       .secondary-menu .service-list-item.active .mobile-detail-content {
          max-height: 1000px;
          padding-top: 10px;
       }

       .secondary-menu .service-image-display img {
          width: 100%;
       }
    }