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

body {
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;
    color: #333;
    margin: 0;
    overflow-x: hidden;
}

/* 1. The Submenu */
/* 1. SHARED Submenu Styles (Apply to ALL dropdowns) */
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    list-style: none;
    padding: 20px 0 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 8px;

    /* Animation Properties */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease-in-out;
    z-index: 1000;
}

/* 2. SPECIFIC Widths for each menu */
.company-menu .submenu {
    min-width: 200px;
    /* Make "The Company" wider */
}

.operate-menu .submenu {
    min-width: 200px;
    /* Different size for "How We Operate" */
}

/* Show ANY submenu on hover */
.has-dropdown:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Submenu Items Style (Shared) */
.submenu li a {
    color: #333 !important;
    padding: 12px 25px;
    display: block;
    font-size: 1.2rem;
    /* Slightly bigger text */
    font-weight: 400;
}

.submenu li a:hover {
    background-color: #f8f9fa;
    color: #80E5EB !important;
}

/* --- Nav contact animated button --- */
@keyframes contactPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(128, 229, 235, 0.7);
    }
    70% {
        box-shadow: 0 0 0 14px rgba(128, 229, 235, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(128, 229, 235, 0);
    }
}

.nav-contact-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f0feff;
    border: 2px solid #80e5eb;
    text-decoration: none;
    animation: contactPulse 2s infinite;
    transition: transform 0.2s, background 0.2s;
    cursor: pointer;
}

.nav-contact-btn:hover {
    transform: scale(1.12);
    background: #80e5eb;
    animation: none;
}

.nav-contact-btn img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* Mobile Submit RPF in nav drawer — hidden on desktop */
.mobile-rpf {
    display: none;
}

/* 2. Navigation Bar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    height: 70px;
    background-color: white;
    width: 100%;
    position: relative;
    overflow: visible;
}

.logo {
    height: 75px;
    /* Scaled for 100% zoom; much sharper and aligned */
    width: auto;
    display: block;
    /* Removed padding-top: 20px; it was throwing off the center line */
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 5vw;
    /* Changed from 130px to 4vw to prevent overlap on small screens */
}

.nav-links a {
    text-decoration: none;
    color: #333;
    font-size: 1rem;
    font-weight: 400;
    transition: color 0.3s ease;
    white-space: nowrap;
}

/* Top-level nav items: lift + turn brand colour on hover */
.nav-links > li > a {
    display: inline-block;
    transition: color 0.3s ease, transform 0.3s ease;
}

.nav-links > li:hover > a {
    color: #80E5EB;
    transform: translateY(-3px);
}

@keyframes arrowBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

@keyframes arrowAppear {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.arrow {
    font-size: 0.6rem;
    margin-left: 5px;
    vertical-align: middle;
    display: inline-block;
    opacity: 0;
    transform: translateY(5px);
}

/* Arrow slides up from below, then bounces while nav item is hovered or submenu is open */
.nav-links > li:hover .arrow,
.has-dropdown.open .arrow {
    animation: arrowAppear 0.2s ease forwards, arrowBounce 0.65s ease-in-out 0.2s infinite;
}

/* 3. Nav Actions (Button & Icon) */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-right: 10px;
}

/* Ensure the parent <li> is the reference point */
.has-dropdown {
    position: relative;
}

/* Invisible bridge to prevent menu from closing when moving mouse from link to menu */
.has-dropdown::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 20px;
    bottom: -20px;
}

/* --- Sub-submenu (e.g. Services ▶) --- */
.has-sub-dropdown {
    position: relative;
}

.arrow-right {
    font-size: 0.6rem;
    margin-left: 70px; /* more breathing room from "Services" text */
    vertical-align: middle;
    display: inline-block;
    opacity: 0;
    transform: translateX(10px); /* starts offscreen to the right */
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Slide in left and fade in only when Services is hovered */
.has-sub-dropdown:hover .arrow-right {
    opacity: 1;
    transform: translateX(0);
}

/* Services link text stays blue when hovered / sub-submenu open */
.has-sub-dropdown:hover > a {
    color: #80E5EB !important;
}

.sub-submenu {
    position: absolute;
    left: 100%;
    top: 0;
    background-color: #ffffff;
    list-style: none;
    padding: 15px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(15px); /* starts to the right */
    transition: all 0.3s ease-in-out;
    z-index: 1001;
}

.has-sub-dropdown:hover .sub-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0); /* slides in from right to left */
}

.sub-submenu li a {
    color: #333 !important;
    padding: 10px 22px;
    display: block;
    font-size: 1rem;
    font-weight: 400;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.sub-submenu li a:hover {
    background-color: #f8f9fa;
    color: #80E5EB !important;
}

/* --- Hamburger button --- */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 5px;
    background: none;
    border: none;
}

.hamburger span {
    width: 25px;
    height: 2px;
    background-color: #333;
    border-radius: 2px;
    transition: all 0.3s ease;
    display: block;
}

.hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.divider {
    border: none;
    border-top: 1px solid #eee;
    margin: 8px 0;
}

.btn-rpf {
    background-color: #80E5EB;
    /* Turquoise from your image */
    color: #333;
    text-decoration: none;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.70rem;
    transition: transform 0.2s ease, background-color 0.2s ease;

    margin-right: 25px;
    /* Moving the button left */
}

.btn-rpf:hover {
    background-color: #69d1d8;
    transform: translateY(-1px);
}

/* 4. Hero Section */
.hero {
    position: relative;
    height: 88.9vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 80px;
}

/* Slideshow layers */
.hero-slides {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    z-index: 0;
    will-change: transform;
}

/* Outgoing slide stays fully visible underneath — no fade out */
.hero-slide.prev {
    opacity: 1;
    z-index: 0;
}

/* Incoming slide fades in on top */
.hero-slide.active {
    opacity: 1;
    z-index: 1;
    transition: opacity 1.2s ease;
}

/* Text entrance animation */
@keyframes heroTextIn {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dark overlay to make white text pop */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 1500px;
    padding: 0 20px;
    padding-bottom: 40px;
}

.hero-content h1 {
    color: white;
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 1px;
    animation: heroTextIn 1s ease 0.4s both;
}

.floating-social-bar {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 15px 10px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    z-index: 2000;
    transition: transform 0.35s ease, opacity 0.35s ease;
    transform-origin: right center;
}

.floating-social-bar.bar-hidden {
    transform: translateY(-50%) scale(0);
    opacity: 0;
}

.floating-social-bar img {
    width: 24px;
    /* Adjust size to fit your icons */
    height: auto;
    transition: transform 0.2s ease;
    cursor: pointer;
}

.floating-social-bar img:hover {
    transform: scale(1.2);
}

.floating-divider {
    width: 80%;
    border: none;
    border-top: 2px solid #ccc;
    margin: 4px 0;
}

.print-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.print-btn img {
    width: 24px;
    height: auto;
    transition: transform 0.2s ease;
}

.print-btn:hover img {
    transform: scale(1.2);
}

.villain {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative; /* enables text overlay */
}

.villain-text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 30px 50px;
    background: linear-gradient(rgba(0, 0, 0, 0.55), transparent);
}

.villain-text-overlay h1 {
    color: white;
    font-size: clamp(1.8rem, 3.5vw, 3.5rem);
    font-weight: 600;
    line-height: 1.2;
}

.villain img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* This ensures the image doesn't look squashed */
    display: block;
}

.villain.people {
    height: 500px;
}

/* Overview */
/* 4. Villain Overview Section */
.villain.overview {
    position: relative;
    height: 88.9vh;
    width: 100%;
    overflow: visible;
    background-image: url('../img/overview.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Centers content vertically */
    text-align: center;
}

.villain-content {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    /* Keeps text from stretching too wide */
    padding: 0 20px;
}

.villain-content h1 {
    color: white;
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-weight: 400;
    /* Lighter weight as per the image */
    line-height: 1.2;
    margin-bottom: 20px;
}

.villain-content p {
    color: white;
    font-size: 1.2rem;
    max-width: 900px;
    margin: 0 auto 40px auto;
    /* Centers the paragraph and adds space for button */
    line-height: 1.5;
}

/* Explore Services Button */
.btn-explore {
    background-color: #80E5EB;
    /* Turquoise color from Skralls design */
    color: #333;
    text-decoration: none;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    display: inline-block;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn-explore:hover {
    background-color: #69d1d8;
    transform: translateY(-2px);
}

/* --- Footer Styling --- */
.site-footer {
    background-color: #e4f5f5;
    position: relative;
    width: 100%;
    margin-top: 0;
}

.site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../img/world-map.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.12;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}

.footer-inner {
    position: relative;
    z-index: 1;
    padding: 40px 80px 0;
}

.footer-top {
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding-bottom: 36px;
}

.footer-brand {
    flex: unset;
}

.footer-logo {
    height: 73px;
    width: auto;
    display: block;
    margin-top: 0;
    margin-bottom: 0;
}

.footer-tagline {
    font-size: 0.82rem;
    color: #444;
    line-height: 1.65;
    margin-top: 10px;
    max-width: 340px;
}

.footer-cols {
    display: flex;
    gap: 0;
    justify-content: space-between;
}

.footer-col {
    flex: 1;
}

.footer-col:nth-child(2) {
    padding-right: 40px;
}

.footer-col h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 22px;
}

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

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

.footer-col ul li a {
    font-size: 0.88rem;
    color: #333;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-col ul li a:hover {
    color: #2ec4c4;
}

.footer-bottom {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: 20px 0;
    display: flex;
    align-items: center;
    gap: 28px;
}

.footer-bottom p {
    font-size: 0.78rem;
    color: #555;
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: 0;
}

.footer-bottom > p:first-of-type {
    margin-left: auto;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.07);
    transition: background 0.25s, transform 0.25s;
}

.footer-social a img {
    width: 21px;
    height: 21px;
    object-fit: contain;
    display: block;
    transition: transform 0.25s;
}

.footer-social a:hover {
    background: #2ec4c4;
    transform: translateY(-3px);
}

.footer-social a:hover img {
    transform: scale(1.15);
}

/* --- Content Layout --- */
.content-container {
    max-width: 1200px;
    /* Centers the content like in the reference image */
    margin: 50px auto;
    padding: 0 20px;
    font-family: 'Poppins', sans-serif;
}

.content-container.people {
    margin-top: 20px;
    padding: 0 20px;
    font-family: 'Poppins', sans-serif;
}

.content-container.overview {
    max-width: 1100px;
    /* Aligns with text and images in mockups */
    margin: 40px auto;
    padding: 0 20px;
}

.quotes {
    font-size: 2rem;
    font-style: italic;
    font-weight: 500;
    margin-bottom: 30px;
}

.page-title {
    font-size: 1.8rem;
    margin-bottom: 30px;
}

.page-title.people {
    font-size: 4.5rem;
    margin-bottom: 30px;
}

.subtitle {
    font-weight: 400;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.subtitle .description p {
    margin-bottom: 20px;
    font-size: 1rem;
    color: #444;
    text-align: left;
}

.description.left p {
    font-size: 1rem;
    color: #444;
}

.description.overview {
    max-width: 1000px;
    /* Standardizes width with the rest of Skralls content */
    margin: 40px auto;
    /* Centers the text and adds vertical breathing room */
    padding: 20px;
}

.description.overview p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.3rem;
    /* Matches the clean, modern look of the reference */
    line-height: 2;
    /* Increases line spacing for better legibility */
    color: #444;
    /* Soft dark gray for a premium feel */
    text-align: left;
    /* Aligns with the 'Print' icon and images below */
}

/* --- Social Icons & Print Section --- */
.social-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 10px 0;
    padding-top: 20px;
}

.print-small {
    width: 18px;
    vertical-align: middle;
    margin-left: 5px;
    cursor: pointer;
}

/* --- Image at the bottom --- */
.featured-image {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.featured-image img {
    width: 80%;
    max-width: 800px;
    height: auto;
    display: block;
}

.featured-image.full-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
}

.featured-image.full-bleed img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}

.featured-image img.impact-img {
    width: 100%;
    max-width: 100%;
}

.featured-image.img-left,
.featured-image.img-right {
    width: 100%;
}

.image-gallery-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    width: 100vw;
    /* true full width */
    margin: 70px 0;
    /* vertical spacing only */

    /* break out of centered container */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
}

/* LEFT: smaller + higher */
.img-left {
    flex: 0 0 40%;
    margin-top: 0;
}

/* RIGHT: bigger + lower */
.img-right {
    flex: 0 0 52%;
    margin-top: 120px;
}

.img-left img,
.img-right img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/*Section Divider*/
.section-divider {
    width: 100%;
    max-width: 1200px;
    margin: 8px auto 24px;
    border: none;
    border-top: 1px solid #c8d0d8;
}

.section-container {
    max-width: 100%;
    /* Centers the content like in the reference image */
    font-family: 'Poppins', sans-serif;
}

.section-title {
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 10px;
}

.section-subtitle {
    font-family: 'Poppins', sans-serif;
    margin-bottom: 30px;
}

.section-description {
    font-family: 'Poppins', sans-serif;
    text-align: justify;
    line-height: 1.5;
}

/* --- Side-by-Side Layout for Overview --- */
.overview-row {
    display: flex;
    align-items: center; /* Vertically centers text and image */
    justify-content: space-between;
    gap: 60px; /* Space between text and image */
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
}

.description-column {
    flex: 0 0 55%; /* Text takes up 55% of the width */
}

.description-column p {
    font-size: 1.15rem; /* Slightly larger for premium feel */
    line-height: 1.8;
    color: #444;
}

.image-column {
    flex: 0 0 40%; /* Image takes up 40% of the width */
}

.image-column img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Adds depth */
    border-radius: 4px;
}

/* --- New Turquoise Button Styles --- */
.button-wrapper-center {
    text-align: center; /* Centers the button horizontally */
    margin-top: 50px; /* Spacing between the text/image and the button */
    margin-bottom: 60px;
}

.btn-turquoise {
    background-color: #80E5EB;
    color: #1c2b3a;
    text-decoration: none;
    padding: 16px 52px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.05rem;
    display: inline-block;
    box-shadow: 0 4px 14px rgba(128, 229, 235, 0.35);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-turquoise:hover {
    background-color: #69d1d8;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(128, 229, 235, 0.45);
}

/* ============================================================
   TABLET  (769px – 1024px)
   Nav switches to hamburger; content gets breathing room
   ============================================================ */
@media (max-width: 1024px) {

    /* Override inline text-align: justify on tablets and phones — looks bad on small screens */
    p[style*="justify"] {
        text-align: left !important;
    }

    /* --- Nav: hamburger replaces desktop links --- */
    .hamburger {
        display: flex;
    }

    .nav-left {
        flex: 1;
    }

    .btn-rpf {
        display: none;
    }

    .nav-actions {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        padding: 10px 20px 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        z-index: 999;
        gap: 0;
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links > li {
        border-bottom: 1px solid #f0f0f0;
        padding: 10px 0;
    }

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

    .nav-links > li > a {
        transform: none !important;
    }

    .submenu {
        position: static;
        box-shadow: none;
        opacity: 0;
        visibility: hidden;
        transform: none;
        padding: 0 0 0 15px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease, opacity 0.3s ease, visibility 0.3s ease;
    }

    .has-dropdown.open .submenu {
        opacity: 1;
        visibility: visible;
        max-height: 500px;
    }

    .sub-submenu {
        position: static;
        box-shadow: none;
        transform: none;
        padding: 0 0 0 15px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease, opacity 0.3s ease, visibility 0.3s ease;
    }

    .has-sub-dropdown.open .sub-submenu {
        opacity: 1;
        visibility: visible;
        max-height: 300px;
    }

    .arrow-right {
        opacity: 1 !important;
        transform: rotate(90deg) !important;
        margin-left: auto;
        margin-right: 0;
        transition: transform 0.3s ease !important;
    }

    .has-sub-dropdown.open .arrow-right {
        transform: rotate(-90deg) !important;
    }

    .mobile-rpf {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        border-bottom: none !important;
        padding: 14px 0 8px !important;
    }

    .mobile-rpf-btn {
        display: inline-block;
        background-color: #80E5EB;
        color: #333;
        text-decoration: none;
        padding: 10px 32px;
        border-radius: 50px;
        font-weight: 600;
        font-size: 0.85rem;
        transition: background-color 0.2s ease;
    }

    .mobile-rpf-btn:hover {
        background-color: #69d1d8;
    }

    .villain-text-overlay {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0 20px;
        background: rgba(0, 0, 0, 0.40);
    }

    .floating-social-bar {
        display: none;
    }

    /* --- Tablet content fixes --- */
    /* Overview hero: not too tall on a tablet */
    .villain.overview {
        height: 65vh;
    }

    /* Overview row: tighten gap, add side padding */
    .overview-row {
        gap: 30px;
        padding: 0 30px;
    }

    /* Engagement cards: 2-column on tablet instead of 3 */
    .engagement-cards {
        flex-wrap: wrap;
    }

    .engagement-card {
        flex: 0 0 calc(50% - 12px);
        min-height: auto;
    }

    /* Split rows: stack on tablet — side-by-side is too cramped below 1024px */
    .bas-split-row,
    .bas-split-row.bas-reverse,
    .bas-clients-row {
        flex-direction: column;
        max-height: none;
    }

    .bas-split-img,
    .bas-clients-img {
        flex: none;
        height: 260px;
    }

    .bas-split-text,
    .bas-clients-text {
        flex: none;
        height: auto;
        justify-content: flex-start;
        padding: 30px 30px;
    }

    /* BAS hero padding */
    .bas-hero-content {
        padding: 40px 6% 50px;
    }

    /* Alliance cols: stack and reduce padding */
    .alliance-cols {
        flex-direction: column;
        padding: 40px;
    }

    .alliance-col-left, .alliance-col-right {
        padding: 0;
    }

    /* Hero: scale heading down for tablets + large phones (S25 Ultra, Pixel 9, Surface Pro, etc.) */
    .hero-content h1 {
        font-size: clamp(1.6rem, 4vw, 2.2rem);
    }

    .hero {
        padding-bottom: 30px;
    }

    .hero-content {
        padding-bottom: 30px;
    }

    /* Overview villain hero: same treatment */
    .villain-content h1 {
        font-size: clamp(1.6rem, 4vw, 2.2rem);
    }

    .villain-content p {
        font-size: 1rem;
    }

    /* Engagement model banner heading */
    .engagement-model-overlay h2 {
        font-size: clamp(1.4rem, 4vw, 2.2rem);
    }

    /* Services page: acronym display text */
    .svc-acronym {
        font-size: clamp(2rem, 6vw, 3rem);
    }

    .svc-grid-acronym {
        font-size: clamp(2rem, 6vw, 3rem);
    }

    /* Services section title */
    .services-section-title {
        font-size: 1.4rem;
        margin-bottom: 35px;
    }

    /* People page title */
    .page-title.people {
        font-size: 2.8rem;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {

    /* --- Hamburger visible, hide desktop nav items --- */
    .hamburger {
        display: flex;
    }

    .nav-actions {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    /* Hide desktop RPF button — shown in mobile nav drawer instead */
    .btn-rpf {
        display: none;
    }

    /* --- Mobile nav drawer --- */
    .nav-links {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        padding: 10px 20px 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        z-index: 999;
        gap: 0;
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links > li {
        border-bottom: 1px solid #f0f0f0;
        padding: 10px 0;
    }

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

    /* Keep hover colour off on mobile (touch devices) */
    .nav-links > li > a {
        transform: none !important;
    }

    /* --- Mobile submenus --- */
    .submenu {
        position: static;
        box-shadow: none;
        opacity: 0;
        visibility: hidden;
        transform: none;
        padding: 0 0 0 15px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease, opacity 0.3s ease, visibility 0.3s ease;
    }

    .has-dropdown.open .submenu {
        opacity: 1;
        visibility: visible;
        max-height: 500px;
    }

    /* --- Mobile sub-submenu (Services) --- */
    .sub-submenu {
        position: static;
        box-shadow: none;
        transform: none;
        padding: 0 0 0 15px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease, opacity 0.3s ease, visibility 0.3s ease;
    }

    .has-sub-dropdown.open .sub-submenu {
        opacity: 1;
        visibility: visible;
        max-height: 300px;
    }

    /* --- Mobile: Services arrow points down and flips when open --- */
    .arrow-right {
        opacity: 1 !important;
        transform: rotate(90deg) !important; /* ▶ rotated → points down */
        margin-left: auto;
        margin-right: 0;
        transition: transform 0.3s ease !important;
    }

    .has-sub-dropdown.open .arrow-right {
        transform: rotate(-90deg) !important; /* flips to point up when open */
    }

    /* --- Mobile: Submit RFP + social icons row in nav drawer --- */
    .mobile-rpf {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        border-bottom: none !important;
        padding: 14px 0 8px !important;
    }

    .mobile-rpf-btn {
        display: inline-block;
        background-color: #80E5EB;
        color: #333;
        text-decoration: none;
        padding: 7px 20px;
        border-radius: 50px;
        font-weight: 600;
        font-size: 0.78rem;
        transition: background-color 0.2s ease;
    }

    .mobile-rpf-btn:hover {
        background-color: #69d1d8;
    }

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

    .mobile-nav-social a {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.07);
        transition: background 0.25s, transform 0.25s;
    }

    .mobile-nav-social a img {
        width: 21px;
        height: 21px;
        object-fit: contain;
        display: block;
    }

    .mobile-nav-social a:hover {
        background: #2ec4c4;
        transform: translateY(-3px);
    }

    /* --- Mobile: Governance banner text — centred horizontally and vertically --- */
    .villain-text-overlay {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0 20px;
        background: rgba(0, 0, 0, 0.40);
    }

    /* --- Mobile: contact icon grouped with hamburger (logo gets flex:1 to push them right) --- */
    .nav-left {
        flex: 1;
    }

    /* --- Hide floating social bar on mobile --- */
    .floating-social-bar {
        display: none;
    }

    /* Engagement cards: 1-column on phones */
    .engagement-card {
        flex: 0 0 100%;
    }

    /* --- Hero --- */
    .hero {
        height: 88.9vh;
        padding-bottom: 0;
        align-items: center;
    }

    .hero-content {
        padding-bottom: 0;
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 60px;
    }

    /* Mobile: show only first slide, no slideshow */
    .hero-slide:not(:first-child) {
        display: none !important;
    }

    .hero-slide:first-child {
        opacity: 1 !important;
        z-index: 1 !important;
    }

    .hero-content h1 {
        font-size: clamp(2.4rem, 8vw, 3rem);
        line-height: 1.25;
        letter-spacing: 0.01em;
    }

    /* --- Overview villain section --- */
    .villain.overview {
        height: auto;
        min-height: 100svh;
        padding: 100px 20px 60px;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }

    .villain.people {
        height: 280px;
    }

    /* --- Side-by-side layouts stack vertically --- */
    .overview-row {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .description-column, .image-column {
        flex: 0 0 100%;
    }

    .button-wrapper-center {
        margin-top: 30px;
    }

    /* --- Image gallery stacks vertically --- */
    .image-gallery-container {
        flex-direction: column;
        margin: 30px 0;
    }

    .img-left, .img-right {
        flex: 0 0 100%;
        margin-top: 0;
        margin-bottom: 20px;
    }

    /* --- Content containers --- */
    .content-container,
    .content-container.people,
    .content-container.overview {
        padding: 0 15px;
        margin: 20px auto;
    }

    .page-title.people {
        font-size: 2.5rem;
    }

    .footer-inner {
        padding: 28px 0 0;
    }

    .footer-top {
        flex-direction: column;
        gap: 0;
        padding-bottom: 0;
    }

    .footer-brand {
        flex: unset;
        padding: 0 24px 28px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .footer-cols {
        flex-direction: column;
        gap: 0;
    }

    .footer-col {
        flex: unset;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .footer-col:nth-child(2) {
        padding-right: 0;
    }

    .footer-col h4 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0;
        padding: 18px 24px;
        cursor: pointer;
        font-size: 1rem;
        user-select: none;
    }

    .footer-col h4::after {
        content: '▾';
        font-size: 1rem;
        transition: transform 0.25s;
        display: inline-block;
    }

    .footer-col.open h4::after {
        transform: rotate(180deg);
    }

    .footer-col ul {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, padding 0.3s ease;
        padding: 0 24px;
    }

    .footer-col.open ul {
        max-height: 400px;
        padding: 0 24px 20px;
    }

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

    .footer-col ul li a {
        font-size: 0.88rem;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 20px 24px;
    }

    .footer-bottom > p:first-of-type {
        margin-left: 0;
    }

    .footer-social {
        margin-left: 0;
        align-self: center;
    }
}

/* =============================================
   Small phone adjustments (Pixel 9, iPhone SE, etc.)
   ============================================= */
@media (max-width: 420px) {

    /* --- Navbar --- */
    .nav-links {
        padding: 10px 16px 20px;
    }

    .nav-links > li {
        padding: 13px 0;
    }

    .nav-links > li > a {
        font-size: 1.05rem;
    }

    /* --- Hero --- */
    .hero {
        padding-bottom: 20px;
    }

    .hero-content {
        padding-bottom: 20px;
    }

    .hero-content h1 {
        font-size: clamp(2.2rem, 9vw, 2.8rem);
        line-height: 1.25;
    }

    /* --- Index page sections --- */
    .idx-section {
        padding: 32px 18px;
    }

    .idx-banner h2 {
        font-size: 1rem;
    }

    .idx-lead {
        font-size: 0.95rem;
        line-height: 1.8;
    }

    .idx-text p {
        font-size: 0.93rem;
        line-height: 1.8;
    }

    .idx-btn {
        font-size: 0.88rem;
        padding: 11px 28px;
    }

    .idx-subscribe-wrap {
        padding: 32px 18px;
    }

    .idx-subscribe-wrap h2 {
        font-size: 1.15rem;
    }

    /* --- General content --- */
    .content-container,
    .content-container.people,
    .content-container.overview {
        padding: 0 18px;
    }

    p, li {
        font-size: 0.95rem;
        line-height: 1.8;
    }

    h2 {
        font-size: 1.3rem;
    }

    h3 {
        font-size: 1.1rem;
    }

    /* --- Buttons --- */
    .btn-primary, .btn-secondary, .cta-button {
        padding: 13px 28px;
        font-size: 0.9rem;
    }

    /* --- Cards & engagement --- */
    .engagement-card {
        padding: 24px 18px;
    }

    /* --- Footer --- */
    .footer-brand {
        padding: 0 18px 24px;
    }

    .footer-col h4 {
        padding: 16px 18px;
        font-size: 1.05rem;
    }

    .footer-col ul {
        padding: 0 18px;
    }

    .footer-col.open ul {
        padding: 0 18px 18px;
    }

    .footer-col ul li a {
        font-size: 0.92rem;
    }

    .footer-bottom {
        padding: 18px 18px;
    }

    .footer-bottom p {
        font-size: 0.82rem;
    }

    /* --- Mobile nav bottom row --- */
    .mobile-rpf-btn {
        padding: 9px 18px;
        font-size: 0.82rem;
    }

    .mobile-nav-social a {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
    }

    .mobile-nav-social a img {
        width: 18px;
        height: 18px;
    }
}

/* --- Missing Utility Classes --- */
.subtitle-people {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 10px;
}

.inclusion {
    margin-bottom: 20px;
    line-height: 1.7;
}

.unity-img {
    width: 100%;
    max-width: 100%;
}

/* --- Overview Page Text Blocks --- */
.overview-section-title {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
}

.overview-section-text {
    font-size: 1.05rem;
    line-height: 1.85;
    color: #444;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

/* --- Explore Our Services Section --- */
.services-section {
    padding: 80px 0 0;
}

.services-section-title {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 600;
    margin-bottom: 60px;
    text-align: center;
}

.service-row {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 300px;
}

/* Reverse visual order so card appears on RIGHT, image on LEFT */
.service-row.service-right {
    flex-direction: row-reverse;
}

.service-card {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 50px 70px;
}

.service-teal {
    background-color: #80E5EB;
}

.service-dark {
    background-color: #1c2b3a;
    color: #fff;
}

.service-img {
    flex: 0 0 50%;
    overflow: hidden;
}

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

.svc-acronym {
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 12px;
}

.service-teal .svc-acronym {
    color: #1c2b3a;
}

.service-dark .svc-acronym {
    color: #80E5EB;
}

.svc-name {
    font-size: clamp(0.8rem, 1.2vw, 1rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 18px;
}

.service-teal .svc-name {
    color: #1c2b3a;
}

.svc-desc {
    font-size: 0.95rem;
    line-height: 1.75;
}

.service-dark .svc-desc {
    color: rgba(255, 255, 255, 0.8);
}

/* Full-width dark image band */
.dark-band {
    width: 100%;
    height: 340px;
    overflow: hidden;
    margin: 70px 0;
}

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

@media (max-width: 768px) {
    .service-row,
    .service-row.service-right {
        flex-direction: column;
    }

    .service-card {
        flex: none;
        padding: 40px 30px;
    }

    .service-img {
        flex: none;
        height: 220px;
    }

    .dark-band {
        height: 200px;
        margin: 40px 0;
    }

    .services-section {
        padding: 40px 0 0;
    }

    .overview-section-title {
        font-size: 1.5rem;
    }
}

/* --- Three-Stage Engagement Cards --- */
.engagement-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px 70px;
}

.engagement-section-title {
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    font-weight: 600;
    margin-bottom: 10px;
    color: #222;
}

.engagement-section-subtitle {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 45px;
    max-width: 750px;
}

.engagement-cards {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.engagement-card {
    flex: 1;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 28px 24px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    min-height: 420px;
}

.card-tag {
    display: inline-block;
    background-color: #80E5EB;
    color: #1c2b3a;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
    align-self: flex-start;
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: #1c2b3a;
    line-height: 1.4;
}

.card-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 25px;
    flex: 1;
}

.card-bullets li {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.55;
    padding: 7px 0 7px 16px;
    border-bottom: 1px solid #f2f2f2;
    position: relative;
}

.card-bullets li:last-child {
    border-bottom: none;
}

.card-bullets li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #80E5EB;
    font-weight: 700;
}

.card-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 10px;
}

.btn-card {
    background-color: #80E5EB;
    color: #1c2b3a;
    text-decoration: none;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-card:hover {
    background-color: #69d1d8;
    transform: translateY(-1px);
}

.btn-card-outline {
    background-color: transparent;
    border: 1.5px solid #80E5EB;
    color: #1c2b3a;
    text-decoration: none;
    padding: 7px 18px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-card-outline:hover {
    background-color: #80E5EB;
    transform: translateY(-1px);
}

/* Same outline button but for dark backgrounds — white text by default */
.btn-card-outline-inv {
    background-color: transparent;
    border: 1.5px solid #80E5EB;
    color: #fff;
    text-decoration: none;
    padding: 10px 30px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-block;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn-card-outline-inv:hover {
    background-color: #80E5EB;
    color: #1c2b3a;
    transform: translateY(-1px);
}

/* --- Engagement Model Full-Width Banner --- */
.engagement-model-banner {
    position: relative;
    width: 100%;
    height: 380px;
    overflow: hidden;
    margin: 0 0 60px;
}

.engagement-model-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.5);
}

.engagement-model-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 60px;
}

.engagement-model-overlay h2 {
    color: white;
    font-size: clamp(2rem, 5vw, 3.8rem);
    font-weight: 700;
    line-height: 1.1;
}

/* --- Quote / Description Block --- */
.engagement-quote-section {
    max-width: 880px;
    margin: 0 auto;
    padding: 10px 20px 70px;
    text-align: left;
}

.engagement-quote-section p {
    font-size: 0.98rem;
    line-height: 1.9;
    color: #444;
    font-style: italic;
}

/* --- Supporting Your Journey Forward --- */
.journey-section {
    background-color: #f5f5f5;
    padding: 60px 20px;
    text-align: center;
}

.journey-title {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 600;
    margin-bottom: 45px;
    color: #222;
}

.journey-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.journey-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    text-decoration: none;
    color: #222;
    font-size: 1rem;
    font-weight: 500;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 16px 22px;
    min-width: 180px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: color 0.2s ease, box-shadow 0.2s ease;
}

.journey-link:hover {
    color: #80E5EB;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.journey-icon {
    width: 38px;
    height: 38px;
    background-color: #1c2b3a;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.journey-icon img {
    width: 20px;
    height: auto;
    filter: invert(1) brightness(2);
}

/* Placeholder arrow shown when no icon image is supplied */
.journey-icon:not(:has(img))::after {
    content: '↗';
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
}

/* Journey icon tilt — bottom-left corner stays fixed, top tilts up and holds */
.journey-icon {
    transform-origin: bottom left;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.journey-link:hover .journey-icon {
    transform: rotate(-13deg);
}

/* === BAS / Service Page Styles === */

/* Hero */
.bas-hero {
    position: relative;
    width: 100%;
    min-height: 420px;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
}

.bas-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.22) 100%);
    z-index: 1;
}

.bas-hero-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bas-hero-content {
    position: relative;
    z-index: 2;
    padding: 55px 6% 65px;
    max-width: 740px;
}

.bas-hero-content h1 {
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 18px;
    line-height: 1.2;
}

.bas-hero-content p {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.93rem;
    line-height: 1.75;
    text-align: justify;
}

/* Section heading — centred, underlined. Add .bas-heading-plain to suppress underline */
.bas-heading-plain {
    text-decoration: none;
}

.bas-heading {
    text-align: center;
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 600;
    color: #222;
    text-decoration: underline;
    text-underline-offset: 7px;
    margin-bottom: 28px;
}

/* Centred content container */
.bas-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 50px 40px;
}

.bas-container p {
    font-size: 0.88rem;
    line-height: 1.9;
    color: #444;
    margin-bottom: 16px;
}

.bas-container p:last-child {
    margin-bottom: 0;
}

/* Wide image (team photo etc) */
.bas-wide-img {
    max-width: 1100px;
    margin: 0 auto 10px;
    padding: 0 40px;
    overflow: hidden;
}

.bas-wide-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* Thin horizontal rule */
.bas-divider {
    border: none;
    border-top: 1px solid #c8d0d8;
    max-width: 1100px;
    margin: 40px auto 20px;
}

/* Full-width side-by-side split rows */
.bas-split-row {
    display: flex;
    width: 100%;
    min-height: 360px;
    max-height: 520px;
}

/* row-reverse only on desktop — at ≤1024px the column rule handles stacking */
@media (min-width: 1025px) {
    .bas-split-row.bas-reverse {
        flex-direction: row-reverse;
    }
}

.bas-split-img {
    flex: 0 0 45%;
    overflow: hidden;
}

.brand-arch .bas-split-img {
    padding: 24px;
}

.brand-arch .bas-split-img img {
    border-radius: 4px;
}

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

.bas-split-text {
    flex: 1;
    padding: 50px 55px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
}

.bas-split-text p {
    font-size: 1rem;
    line-height: 1.9;
    color: #444;
    margin-bottom: 14px;
}

.bas-split-text p:last-child {
    margin-bottom: 0;
}

/* Dark variant */
.bas-split-row.bas-dark .bas-split-text {
    background: #000000;
}

.bas-split-row.bas-dark .bas-split-text p {
    color: rgba(255, 255, 255, 0.85);
}

/* Alliance types two-column section */
.alliance-cols {
    display: flex;
    gap: 0;
    padding: 60px 80px;
    background: #000;
    align-items: flex-start;
}

.alliance-col-left,
.alliance-col-right {
    flex: 1;
    padding: 0 30px;
}

.alliance-col-right img,
.alliance-col-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    border-radius: 4px;
    margin-bottom: 30px;
}

.alliance-col-img {
    margin-top: 30px;
}

.alliance-type-heading {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    margin-top: 0;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 8px;
}

.alliance-cols p {
    font-size: 0.88rem;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 24px;
}

/* Working With Clients split on BAS page */
.bas-clients-row {
    display: flex;
    width: 100%;
    min-height: 340px;
}

.bas-clients-img {
    flex: 0 0 38%;
    overflow: hidden;
}

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

.bas-clients-text {
    flex: 1;
    padding: 50px 55px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bas-clients-text p {
    font-size: 0.88rem;
    line-height: 1.9;
    color: #444;
    margin-bottom: 14px;
}

.bas-clients-text p:last-child {
    margin-bottom: 0;
}


/* === BAS Explore Our Services — 2×2 Card Grid === */
.svc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 100%;
}

.svc-grid-card {
    position: relative;
    overflow: hidden;
    background: #f4f4f4;
    padding: 75px 65px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #e8e8e8;
    transition: box-shadow 0.3s ease;
}

/* Teal fill grows from the bottom up on hover */
.svc-grid-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #80E5EB;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.svc-grid-card:hover::before {
    transform: scaleY(1);
}

.svc-grid-acronym {
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    font-weight: 700;
    color: #1c2b3a;
    position: relative;
    z-index: 1;
    margin-bottom: 14px;
    line-height: 1;
    transition: color 0.35s ease;
}

.svc-grid-name {
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    position: relative;
    z-index: 1;
    transition: color 0.35s ease;
}

/* Text stays dark against the teal fill */
.svc-grid-card:hover .svc-grid-acronym,
.svc-grid-card:hover .svc-grid-name {
    color: #1c2b3a;
}

/* "View More ›" reveal — pinned to bottom-left of card, slides up on hover */
.svc-grid-viewmore {
    position: absolute;
    bottom: 32px;
    left: 65px;
    z-index: 1;
    font-size: 0.7rem;
    font-weight: 700;
    color: #1c2b3a;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    display: inline-block;
    border-bottom: 2.5px solid #1c2b3a;
    padding-bottom: 3px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s ease 0.05s, transform 0.35s ease 0.05s;
}

.svc-grid-card:hover .svc-grid-viewmore {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile */
@media (max-width: 768px) {
    .bas-hero {
        min-height: 280px;
    }

    .bas-hero-content {
        padding: 35px 5% 45px;
    }

    .bas-split-row,
    .bas-split-row.bas-reverse,
    .bas-clients-row {
        flex-direction: column;
        max-height: none;
    }

    .bas-split-row.bas-dark {
        background: #000;
    }

    .bas-split-img,
    .bas-clients-img {
        flex: none;
        height: 220px;
        align-self: center;
    }

    .bas-split-text,
    .bas-clients-text {
        flex: none;
        height: auto;
        justify-content: flex-start;
        padding: 30px 20px;
    }

    .bas-wide-img,
    .bas-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Alliance cols stack on mobile */
    .alliance-cols {
        flex-direction: column;
        padding: 30px 15px;
    }

    .alliance-col-left,
    .alliance-col-right {
        padding: 0;
    }

    .alliance-col-right img {
        height: 200px;
    }

    /* 2×2 grid collapses to single column on mobile */
    .svc-grid {
        grid-template-columns: 1fr;
    }

    .svc-grid-card {
        padding: 45px 30px;
    }

    .svc-grid-viewmore {
        left: 30px;
        bottom: 24px;
    }
}

/* ── Brand Architecture Slideshow ───────────────────── */

.brand-slideshow {
    position: relative;
    width: 78%;
    max-width: 920px;
    margin: -16px auto 0;
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 16 / 9;
    background: #e8e8e8;
}

.brand-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.65s ease;
}

.brand-slide.active {
    opacity: 1;
}

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

/* Arrows */
.bsl-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.72);
    border: none;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    color: #1c2b3a;
}

.bsl-arrow:hover {
    background: rgba(255, 255, 255, 0.96);
}

.bsl-prev {
    left: 14px;
}

.bsl-next {
    right: 14px;
}

/* Dots */
.bsl-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    z-index: 10;
}

.bsl-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.bsl-dot.active {
    background: #fff;
    transform: scale(1.25);
}

@media (max-width: 768px) {
    .brand-slideshow {
        width: 100%;
        border-radius: 0;
        aspect-ratio: 4 / 3;
    }

    .bsl-arrow {
        width: 34px;
        height: 34px;
        font-size: 1.2rem;
    }
}

/* ── Industries page ─────────────────────────────────── */

.ind-hero {
    min-height: 92vh;
    align-items: center;
}

.ind-hero::after {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.28) 100%);
}

.ind-hero-content {
    position: relative;
    z-index: 2;
    padding: 70px 6% 80px;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.ind-hero-content h1 {
    color: #fff;
    font-size: clamp(1.6rem, 2.4vw, 2.4rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 26px;
}

.ind-hero-content .hero-quote {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.92rem;
    line-height: 1.8;
    margin-bottom: 36px;
    text-align: center;
}

.btn-teal {
    display: inline-block;
    background: #80e5eb;
    color: #111;
    padding: 14px 56px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}

.btn-teal:hover {
    background: #5cd6de;
    transform: translateY(-2px);
}

.ind-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 10px auto 50px;
    padding: 0 40px;
}

.ind-card {
    background: #dde3ea;
    border-radius: 14px;
    padding: 20px 20px 24px;
    min-height: 200px;
    border-left: 5px solid #80e5eb;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: default;
    transition: opacity 0.55s ease, transform 0.55s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}

.ind-card:hover {
    transform: translateY(-6px);
    background: rgba(128, 229, 235, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 16px 40px rgba(128, 229, 235, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
    border-left-color: #4dd8e0;
}

.ind-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
    background: rgba(128, 229, 235, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0;
}

.ind-card p {
    font-size: 0.83rem;
    line-height: 1.75;
    color: #2a2a2a;
    background: rgba(128, 229, 235, 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 0;
}

.ind-cta {
    display: flex;
    width: 100%;
    min-height: 420px;
    background: #f0ede8;
    margin-bottom: 0;
}

.ind-cta-img {
    flex: 0 0 40%;
    overflow: hidden;
}

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

.ind-cta-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 50px 40px;
}

.ind-cta-text h2 {
    font-size: 2.2rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 20px;
}

.ind-cta-text p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 36px;
    max-width: 560px;
}

@media (max-width: 768px) {
    .ind-grid {
        grid-template-columns: 1fr;
        padding: 0 15px;
        margin-top: 16px;
    }

    .ind-cta {
        flex-direction: column;
    }

    .ind-cta-img {
        flex: 0 0 260px;
    }

    .ind-cta-text {
        padding: 40px 24px;
    }

    .bas-split-row {
        margin-bottom: 0;
    }
}

/* Mobile: engagement section */
@media (max-width: 768px) {
    .engagement-cards {
        flex-direction: column;
    }

    .engagement-card {
        min-height: auto;
    }

    .engagement-model-banner {
        height: 250px;
    }

    .engagement-model-overlay {
        padding: 25px 30px;
    }

    .journey-links {
        gap: 16px;
        flex-direction: column;
        align-items: stretch;
    }

    .journey-link {
        width: 100%;
        box-sizing: border-box;
    }
}