/* ===== FONT FACES =====================================================
   THE SINGLE SOURCE OF TRUTH FOR TYPOGRAPHY ON EVERY PAGE.

   Canonical stack:  'Urbane Medium', 'Urbanist', sans-serif
   Declared once below and inherited everywhere. Do NOT restate a
   font-family anywhere else in this file or in a page-local <style>;
   that is what previously left the ≥1600px nav and hero rendering in the
   system sans while the rest of the site rendered Urbanist.

   ⚠️  URBANE MEDIUM IS NOT IN THIS PROJECT YET.
   fonts/ contains only the two Urbanist variable fonts, and a search of
   the whole drive finds no file named "urbane". Until one is added every
   rule below falls through to Urbanist, so the site renders exactly as it
   does today — nothing breaks and nothing degrades to Arial.

   TO ACTIVATE SITE-WIDE: drop the font into fonts/ under any ONE of the
   filenames in the src list below (woff2 preferred). Every page switches
   over at once; no other edit is needed.
   ===================================================================== */
@font-face {
    font-family: 'Urbane Medium';
    src: url('fonts/UrbaneMedium.woff2') format('woff2'),
         url('fonts/UrbaneMedium.woff') format('woff'),
         url('fonts/UrbaneMedium.otf') format('opentype'),
         url('fonts/UrbaneMedium.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Urbanist';
    src: url('fonts/Urbanist-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Urbanist';
    src: url('fonts/Urbanist-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

/* ===== RESET ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Everything inherits from body. Form controls and buttons are listed
   explicitly because browsers give them their own UA font rather than
   inheriting — they are the only elements that need restating. */
body,
input,
select,
textarea,
button {
    font-family: 'Urbane Medium', 'Urbanist', sans-serif;
}

body {
    overflow-x: hidden;
}

/* ===== HERO SECTION ===== */
.hero-section {
    position: relative;
    height: 100vh;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    background-image: url('assets/images/Pictures/MEP-037.jpg');
}

/* Homepage hero photo.
   Scoped to .home-hero rather than set on the base rule above, because
   about-us.html also renders a bare `.hero-section` and keeps the original
   MEP-037 photo. The five remaining pages override the background themselves
   (§ services/specialisms/partners/terms/contact hero, further down). */
.hero-section.home-hero {
    background-image: url('assets/images/MEP-042-ai.jpg');
}

/* Hero photo must scroll with the page on phones and tablets.
   The base rule above sets `background-attachment: fixed` for the desktop
   parallax, and that is why the hero rendered as a flat grey smear on mobile
   with no image detail at all. iOS Safari sizes a fixed background against
   the whole *document* instead of the viewport, so `cover` on a page several
   thousand pixels tall upscales the 2000x1000 photo until a single blurry
   patch fills the frame; the mobile scrim (§ below, 0.44-0.62 alpha) then
   darkens that patch into the flat wash that was reported. Android Chrome
   mishandles the same combination.

   `scroll` restores ordinary viewport-relative `cover` sizing, so the photo
   crops and displays normally. Desktop is untouched and keeps its parallax.

   Matched on pointer type as well as width: a landscape tablet is wider than
   991px but hits exactly the same bug. Mouse-driven touchscreen laptops
   report `hover: hover` / `pointer: fine`, so they stay on the desktop path. */
@media (max-width: 991px), (hover: none) and (pointer: coarse) {
    .hero-section {
        background-attachment: scroll;
        background-position: center center;
        background-size: cover;
    }
}

/* Readability scrim over the hero photo.
   Two stacked gradients, both fading to fully transparent across the middle
   of the frame so the image itself stays clear:
     1. left→right  — carries the left-aligned heading, subheading and button
     2. top→bottom  — top band sits under the utility bar / logo / nav,
                      bottom band sits under the hero content and icon row
   Inset to 0 on .hero-section, so it tracks every responsive height change
   with no per-breakpoint overrides. Content is already lifted above it by
   the existing `.hero-section > * { z-index: 1 }` rule below. */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(to right,
            rgba(6, 20, 27, 0.50) 0%,
            rgba(6, 20, 27, 0.22) 40%,
            rgba(6, 20, 27, 0) 72%),
        linear-gradient(to bottom,
            rgba(6, 20, 27, 0.55) 0%,
            rgba(6, 20, 27, 0.18) 20%,
            rgba(6, 20, 27, 0) 42%,
            rgba(6, 20, 27, 0.30) 70%,
            rgba(6, 20, 27, 0.68) 100%);
}

/* Below 992px the hero content is centred rather than bottom-aligned, so it
   lands in the band where the desktop gradient fades to zero. Swap in a
   flatter, evenly-weighted wash and drop the left→right pass, which does
   nothing once the text is centre-aligned. */
@media (max-width: 991px) {
    .hero-section::before {
        background: linear-gradient(to bottom,
            rgba(6, 20, 27, 0.58) 0%,
            rgba(6, 20, 27, 0.44) 30%,
            rgba(6, 20, 27, 0.44) 72%,
            rgba(6, 20, 27, 0.62) 100%);
    }
}

.hero-section > * {
    position: relative;
    z-index: 1;
}

/* ===== TOP HEADER BAR ===== */
.hero-header-top {
    padding: 20px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.65);
    width: 100%;
    gap: 30px;
}

.hero-utility-left {
    flex: 1;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    letter-spacing: 0.5px;
    text-align: left;
    margin: 0;
}

.hero-utility-right {
    flex: 1;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    letter-spacing: 0.5px;
    text-align: right;
    margin: 0;
}

/* Logo Section */
.hero-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-img {
    height: 150px;
    width: auto;
    display: block;
}

/* Navigation Bar */
.hero-nav {
    display: flex;
    justify-content: center;
    gap: 45px;
    flex-wrap: wrap;
    padding: 15px 30px;
    background-color: transparent;
    width: 100%;
    transition: background-color 0.3s ease;
}

.hero-nav a {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.hero-nav a:hover {
    color: #d4af37;
}

/* Desktop/Laptop Navigation Scroll Behavior */
@media (min-width: 768px) {
    /* Navigation placeholder to prevent content jump */
    .hero-nav-placeholder {
        display: none;
    }

    /* Base navigation styling - preserve original layout */
    .hero-nav {
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Navigation links - smooth color transition */
    .hero-nav a {
        transition: color 0.3s ease !important;
    }

    /* Hide mobile menu toggle on desktop */
    .mobile-menu-toggle {
        display: none !important;
    }

    /* Header logo shrinking on scroll */
    .logo-img {
        transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Logo shrinks when nav becomes sticky - clear and readable */
    .hero-header-top.scrolled .logo-img {
        height: 65px !important;
    }

    /* Email/phone stay visible when the header pins.
       These used to fade out on scroll via
           .hero-header-top.scrolled .hero-utility-left,
           .hero-header-top.scrolled .hero-utility-right { opacity: 0; visibility: hidden }
       which is gone at the client's request — the contact details must be
       readable at every scroll position.

       The transition below is kept on purpose. Nothing animates it on this
       element any more, but it is part of the sticky sequence's shared timing
       and removing it would be a behaviour change beyond what was asked for.

       No layout follow-up is needed. The old rule used `visibility: hidden`,
       which still reserves space, so both utility columns were already holding
       their `flex: 1` width either side of the logo while invisible. Revealing
       them changes nothing about the geometry, and the
       `justify-content: center` on .hero-header-top.scrolled below stays as
       inert as it was. */
    .hero-utility-left,
    .hero-utility-right {
        transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Header becomes fixed at top on scroll - CRITICAL for logo visibility */
    .hero-header-top.scrolled {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1001 !important;
        background-color: #0a192f !important;
        padding: 8px 30px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Logo larger and clearer in sticky state */
    .hero-header-top.scrolled .hero-logo {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Navigation becomes fixed below header on scroll */
    .hero-nav.scrolled {
        position: fixed !important;
        top: 80px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        background-color: #0a192f !important;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
        padding: 15px 30px !important;
    }

    /* Navigation links on dark background */
    .hero-nav.scrolled a {
        color: #EEE5D8 !important;
    }

    /* Navigation link hover state on dark background */
    .hero-nav.scrolled a:hover {
        color: #C5A265 !important;
    }
}

/* Mobile Menu Close Button - Hidden on desktop */
.mobile-menu-close {
    display: none !important;
}

/* ===== CONTENT AREA ===== */
.hero-content-wrapper {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 50px 50px 80px 50px;
    gap: 60px;
}

/* Left Content */
.hero-content-left {
    flex: 1;
    max-width: 600px;
}

.hero-heading {
    font-size: 3.8rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    text-transform: capitalize;
    letter-spacing: 1.5px;
    margin-bottom: 25px;
}

/* ===== HERO HEADING PLACEMENT — one rule for every page =====
   Absolute placement is applied from 992px up only. Below that the 250px
   left offset would push the heading off a phone/tablet viewport, so the
   heading stays in normal flow and keeps the existing centred mobile hero.
   .hero-content-wrapper is the positioning context (not .hero-section), so
   `top` is measured from the top of the content area under the nav. */
@media (min-width: 992px) {
    .hero-content-wrapper {
        position: relative;
    }

    .hero-heading {
        position: absolute;
        top: 250px;
        left: 0;              /* pin the origin — without this the start edge
                                 comes from the flex container's static
                                 position, which is align-items:flex-end on
                                 about-us and pushed the heading off-screen */
        margin-left: 250px;
        margin-bottom: 0;
        max-width: calc(100% - 250px);   /* never overflow the wrapper */
    }
}

/* ----- index.html is excluded from the above -----
   The home hero is the only one with a subheading and a button beside the
   heading; pulling the heading out of flow detached them from each other.
   body.home-page keeps the original in-flow, uppercase treatment. */
/* Matched two ways so the exclusion cannot be lost:
     1. body.home-page          — explicit hook, if the class is present
     2. :has(.hero-services)    — index is the only hero containing the
                                  service-icon row, so this needs no markup */
body.home-page .hero-heading,
.hero-section:has(.hero-services) .hero-heading {
    text-transform: uppercase;
}

@media (min-width: 992px) {
    body.home-page .hero-heading,
    .hero-section:has(.hero-services) .hero-heading {
        position: static;
        top: auto;
        left: auto;
        margin-left: 0;
        margin-bottom: 25px;
        max-width: none;
    }
}

.hero-subheading {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    margin-bottom: 35px;
    font-weight: 400;
    text-transform: none;
}

/* CTA Button */
.btn-explore {
    display: inline-block;
    padding: 13px 32px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    color: #fff;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-explore::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.15);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.btn-explore:hover {
    border-color: rgba(255, 255, 255, 0.8);
    color: #fff;
}

.btn-explore:hover::before {
    width: 100%;
}

/* ===== RIGHT SERVICES ICONS ===== */
.hero-services {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    gap: 50px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
    min-width: 120px;
    cursor: pointer;
    transition: transform 0.3s ease;
    text-decoration: none;
}

/* Service item as clickable link */
a.service-item {
    color: inherit;
    text-decoration: none;
}

.service-icon {
    width: 60px;
    height: 60px;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s ease, filter 0.3s ease;
}

.service-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    line-height: 1.35;
    max-width: 120px;
    transition: color 0.3s ease;
}

/* Hover animation for service items */
a.service-item:hover .service-icon {
    transform: scale(1.12) translateY(-8px);
    filter: drop-shadow(0 4px 12px rgba(197, 162, 101, 0.4));
}

a.service-item:hover .service-label {
    color: #C5A265;
}

/* Focus state for keyboard accessibility */
a.service-item:focus {
    outline: 2px solid #C5A265;
    outline-offset: 4px;
    border-radius: 4px;
}

a.service-item:focus:not(:focus-visible) {
    outline: none;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1400px) {
    .hero-heading {
        font-size: 3.2rem;
    }

    .hero-services {
        gap: 35px;
    }

    .service-item {
        min-width: 110px;
    }

    .service-icon {
        width: 55px;
        height: 55px;
    }
}

@media (max-width: 1200px) {
    .hero-heading {
        font-size: 2.8rem;
    }

    .hero-services {
        gap: 25px;
    }

    .service-item {
        min-width: 100px;
    }

    .hero-content-wrapper {
        gap: 40px;
        padding: 40px 30px 60px 30px;
    }
}

@media (max-width: 992px) {
    .hero-content-wrapper {
        flex-direction: column;
        justify-content: center;
        padding: 40px 30px 50px 30px;
        gap: 50px;
    }

    .hero-heading {
        font-size: 2.5rem;
    }

    .hero-services {
        justify-content: center;
        width: 100%;
        gap: 30px;
    }

    .service-item {
        min-width: 105px;
    }
}

@media (max-width: 768px) {
    .hero-header-top {
        flex-wrap: wrap;
        padding: 15px 20px;
        gap: 15px;
    }

    .hero-utility-left, .hero-utility-right {
        font-size: 0.72rem;
    }

    .hero-utility-left {
        order: 1;
        flex: 1 100%;
        text-align: center;
    }

    .hero-logo {
        order: 2;
    }

    .hero-utility-right {
        order: 3;
        flex: 1 100%;
        text-align: center;
    }

    .hero-nav {
        gap: 20px;
        padding: 12px 20px;
    }

    .hero-nav a {
        font-size: 0.68rem;
    }

    .logo-img {
        height: 60px;
    }

    .hero-heading {
        font-size: 2rem;
        margin-bottom: 15px;
        letter-spacing: 1px;
    }

    .hero-subheading {
        font-size: 0.95rem;
        margin-bottom: 25px;
    }

    .hero-content-left {
        max-width: 100%;
    }

    .hero-services {
        gap: 20px;
    }

    .service-item {
        min-width: 90px;
    }

    .service-label {
        font-size: 0.6rem;
    }

    .service-icon {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 576px) {
    .hero-section {
        height: auto;
        min-height: 100vh;
    }

    .hero-content-wrapper {
        padding: 30px 15px 40px 15px;
        gap: 30px;
        align-items: center;
    }

    .hero-heading {
        font-size: 1.7rem;
        margin-bottom: 12px;
    }

    .hero-subheading {
        font-size: 0.9rem;
        margin-bottom: 20px;
    }

    .hero-nav {
        flex-direction: column;
        gap: 12px;
    }

    .hero-nav {
        gap: 12px;
        flex-direction: column;
        padding: 10px 15px;
    }

    .hero-nav a {
        font-size: 0.65rem;
    }

    .hero-header-top {
        flex-direction: column;
        padding: 12px 15px;
        gap: 12px;
    }

    .hero-utility-left, .hero-utility-right {
        font-size: 0.65rem;
        flex: none;
        width: 100%;
    }

    .hero-services {
        flex-direction: row;
        gap: 12px;
        justify-content: center;
    }

    .service-item {
        min-width: 80px;
    }

    .service-icon {
        width: 45px;
        height: 45px;
    }

    .service-label {
        font-size: 0.55rem;
    }

    .btn-explore {
        font-size: 0.7rem;
        padding: 10px 24px;
    }

    .logo-img {
        height: 50px;
    }
}

/* ===== LARGE SCREEN / LCD DESKTOP DISPLAYS (1600px and above) ===== */
@media (min-width: 1600px) {
    .hero-section {
        height: 105vh;
    }

    .hero-nav a {
        font-size: 15px;
        letter-spacing: 2.5px;
    }

    .hero-utility-left {
        font-size: 15px;
        letter-spacing: 2.5px;
    }

    .hero-utility-right {
        font-size: 15px;
        letter-spacing: 2.5px;
    }

    .hero-nav {
        gap: 120px;
        background-color: rgba(0, 0, 0, 0.65);
    }

    .hero-header-top {
        padding: 20px 90px;
        padding-bottom: 0 !important;
    }

    .logo-img {
        height: 150px;
    }

    .hero-content-wrapper {
        padding: 50px 70px 80px 70px;
        gap: 0;
    }

    .hero-heading {
        font-size: 48px;
        font-weight: 500;
        letter-spacing: 0.2px;
    }

    .hero-subheading {
        font-size: 20px;
        font-weight: 500;
    }

    .hero-content-left {
        max-width: 900px;
    }

    .btn-explore {
        font-size: 12px;
        font-weight: 400;
    }

    .service-icon {
        width: 90px;
        height: 90px;
    }

    .service-label {
        max-width: 115px;
    }

    .hero-services {
        gap: 10px;
    }

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 1720px;
    }

    .about-section {
        background-color: #F5F3ED !important;
        padding: 130px 0 !important;
    }

    .about-heading {
        font-size: 48px !important;
        font-weight: 600 !important;
    }

    .about-paragraph-intro {
        font-size: 20px !important;
        font-weight: 600 !important;
        padding-left: 20px !important;
        padding-right: 100px !important;
        letter-spacing: 0.2px !important;
    }

    .about-paragraph {
        font-size: 20px !important;
        font-weight: 600 !important;
        padding-left: 20px !important;
        padding-right: 100px !important;
        letter-spacing: 0.2px !important;
    }

    .about-accent-line {
        width: 80px !important;
    }

    .image-banner {
        height: 900px;
        background-color: #f5f3ed;
    }

    /* Featured Service Section Overrides */
    .featured-service-section .container,
    .featured-service-section .container-sm,
    .featured-service-section .container-md,
    .featured-service-section .container-lg,
    .featured-service-section .container-xl,
    .featured-service-section .container-xxl {
        max-width: none !important;
    }

    .featured-service-section .featured-image {
        padding-left: 0 !important;
    }

    .featured-content {
        padding-left: 100px !important;
        padding-right: 100px !important;
    }

    .featured-title {
        font-size: 35px !important;
        font-weight: 600 !important;
    }

    .featured-description {
        font-size: 18px !important;
        font-weight: 500 !important;
    }

    .featured-image-container {
        padding-left: 0 !important;
        border-radius: 0 !important;
    }

    .btn-find-out-more {
        display: inline-block !important;
        margin-left: auto !important;
        padding: 14px 32px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
    }

    .featured-service-section .col-12.col-lg-6:first-child {
        padding-left: 0 !important;
    }

    /* Projects Gallery Carousel Optimization */
    .projects-gallery {
        gap: 40px;
    }

    .project-card {
        flex: 0 0 calc(50% - 20px);
        min-width: 520px;
    }
}

/* ===== LAPTOP SCREENS AND BELOW (1440px and below) ===== */
@media (max-width: 1440px) {
    .hero-section {
        height: 120vh !important;
    }

    .logo-img {
        height: 100px !important;
    }

    .hero-utility-left {
        font-size: 12px !important;
    }

    .hero-nav a {
        font-size: 12px !important;
    }

    .hero-nav {
        background-color: rgba(0, 0, 0, 0.65) !important;
        gap: 70px !important;
    }

    .hero-header-top {
        padding-bottom: 0 !important;
    }

    .hero-content-wrapper {
        gap: 0 !important;
    }

    .hero-heading {
        font-size: 30px !important;
        font-weight: 600 !important;
        margin-bottom: 8px !important;
    }

    .hero-subheading {
        font-size: 14px !important;
        margin-bottom: 15px !important;
    }

    .hero-services {
        gap: 2px !important;
    }

    .service-item {
        min-width: 100px !important;
    }

    .service-label {
        font-size: 8px !important;
        max-width: 90px !important;
    }

    .btn-explore {
        font-size: 8px !important;
    }

    .about-section {
        padding: 100px 0 !important;
    }

    .about-heading {
        font-size: 30px !important;
        font-weight: 600 !important;
    }

    .about-paragraph-intro {
        font-size: 16px !important;
        font-weight: 600 !important;
    }

    .about-paragraph {
        font-size: 16px !important;
        font-weight: 600 !important;
    }

    /* ==========================================
       FEATURED SERVICE SECTION ONLY
       ========================================== */

    /* Container */
    .featured-service-section .container,
    .featured-service-section .container-sm,
    .featured-service-section .container-md,
    .featured-service-section .container-lg,
    .featured-service-section .container-xl {
        max-width: 1250px !important;
    }

    /* Left Column */
    .featured-service-section .col-lg-6:first-child {
        padding-left: 0 !important;
    }

    .featured-image-container {
        border-radius: 0 !important;
    }

    /* Right Column */
    .featured-service-section .col-lg-6:last-child {
        padding-left: 51px !important;
        padding-right: 80px !important;
    }

    .featured-title {
        font-size: 24px !important;
        font-weight: 600 !important;
    }

    .featured-description {
        font-size: 12px !important;
        font-weight: 600 !important;
    }

    .btn-find-out-more {
        font-size: 10px !important;
        font-weight: 500 !important;
        margin-left: auto !important;
        display: flex !important;
        width: fit-content !important;
    }

    /* ==========================================
       OUR PROJECTS SECTION ONLY
       ========================================== */

    .projects-section {
        max-width: 1390.67px !important;
        width: 1390.67px !important;
        padding-right: 30px !important;
    }

    .projects-section .container-fluid.px-4.px-md-5 {
        padding-right: 0 !important;
    }

    /* Left Text Column */
    .projects-section .col-lg-2 {
        flex: 0 0 28% !important;
        max-width: 22% !important;
    }

    /* Right Projects Gallery */
    .projects-section .col-lg-10 {
        flex: 0 0 72% !important;
        max-width: 72% !important;
    }

    .projects-gallery {
        gap: 12px !important;
    }

    .project-card {
        max-width: 420px !important;
    }

    .projects-section .projects-title {
        font-size: 24px !important;
        font-weight: 600 !important;
    }

    .projects-description {
        font-size: 12px !important;
        font-weight: 600 !important;
    }

    .btn-view-case-studies {
        font-size: 12px !important;
        font-weight: 600 !important;
    }

    /* ==========================================
       SPECIALISMS CAROUSEL SECTION
       ========================================== */

    .specialisms-section {
        background-color: #f7f4ed !important;
    }

    .specialisms-section .container-fluid {
        padding-left: 0 !important;
    }

    .specialisms-image-container {
        height: 500px !important;
    }

    .specialisms-card {
        height: 300px !important;
        background-color: #EEE5D8 !important;
    }

    .specialisms-overline {
        font-size: 24px !important;
        font-weight: 700 !important;
    }

    .specialisms-title {
        font-size: 20px !important;
        font-weight: 700 !important;
    }

    .specialisms-description {
        font-size: 13px !important;
        font-weight: 600 !important;
    }

    .btn-read-more {
        font-size: 9px !important;
        font-weight: 600 !important;
    }

    .specialisms-pagination {
        position: absolute !important;
        right: 50px !important;
        bottom: 50px !important;
        gap: 25px !important;
    }

    .pagination-dot {
        width: 7px !important;
        height: 7px !important;
    }

    /* ==========================================
       TESTIMONIALS SECTION
       ========================================== */

    .testimonials-title {
        font-size: 30px !important;
        font-weight: 600 !important;
    }

    .testimonials-header {
        gap: 0 !important;
    }

    .quote-icon {
        margin-bottom: 14px !important;
        width: 50px !important;
        height: auto !important;
    }

    .testimonials-controls {
        margin-top: 22px !important;
    }

    .testimonial-text {
        font-size: 20px !important;
    }

    .author-name {
        font-size: 20px !important;
    }

    .author-title {
        font-size: 16px !important;
        font-weight: 600 !important;
    }

    /* ==========================================
       CONTACT SECTION
       ========================================== */

    .contact-heading {
        font-size: 30px !important;
        font-weight: 600 !important;
    }

    .contact-intro-text {
        font-size: 20px !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
    }

    .contact-detail-label {
        font-size: 20px !important;
        font-weight: 600 !important;
    }

    .contact-detail-value {
        font-size: 20px !important;
        font-weight: 500 !important;
    }

    .form-label {
        font-size: 18px !important;
        font-weight: 600 !important;
    }

    .btn-send {
        padding: 14px 70px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
    }

    .contact-info {
        gap: 15px !important;
    }

    .form-group {
        gap: 0 !important;
    }

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

    /* .footer-logo lives in its own min-width:577px block just below this one.
       Keeping it here would have applied its !important 200px all the way down to
       360px and beaten every mobile rule in the file. */

    .footer-heading {
        font-size: 22px !important;
        font-weight: 500 !important;
    }

    .footer-links a {
        font-size: 18px !important;
        font-weight: 500 !important;
    }

    .footer-text {
        font-size: 14px !important;
        font-weight: 500 !important;
    }

    .footer-subtitle {
        font-size: 16px !important;
    }

    .newsletter-input {
        font-size: 18px !important;
    }
}

/* Oversized footer logo for the tablet → large-desktop band only.
   Lower bound of 577px so it stops at the mobile breakpoint and the ≤576px rule
   can win on plain specificity, with no !important arms race. */
@media (min-width: 577px) and (max-width: 1440px) {
    .footer-logo {
        height: 200px !important;
        width: 200px !important;
    }
}

/* ===== MOBILE RESPONSIVE DESIGN (768px and below) ===== */
@media (max-width: 768px) {
    /* Global Mobile Styles */
    * {
        box-sizing: border-box;
    }

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

    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* Prevent page scrolling when mobile menu is open */
    body.mobile-menu-open {
        overflow: hidden !important;
    }

    /* Force all containers to 100% width */
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Force all major sections to 100% width */
    .hero-section,
    .about-section,
    .image-banner,
    .featured-service-section,
    .projects-section,
    .specialisms-section,
    .testimonials-section,
    .contact-section,
    .footer-section {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Hero Section */
    .hero-section {
        height: auto !important;
        min-height: auto;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .hero-header-top {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 12px 15px;
        gap: 0;
    }

    .hero-utility-left,
    .hero-utility-right {
        display: none;
    }

    .hero-logo {
        order: -1;
        flex: 1;
    }

    /* Mobile Menu Toggle Button */
    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        margin: 0;
        gap: 5px;
        flex-shrink: 0;
    }

    .hamburger-line {
        display: block;
        width: 24px;
        height: 2px;
        background-color: #fff;
        transition: all 0.3s ease;
        transform-origin: center;
    }

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

    .mobile-menu-toggle.active .hamburger-line:nth-child(2) {
        opacity: 0;
    }

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

    /* Mobile Navigation Menu - Professional Full-Screen */
    .hero-nav {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 80px 0 20px 0 !important;
        margin: 0 !important;
        background: linear-gradient(135deg, rgba(15, 32, 56, 0.98) 0%, rgba(11, 43, 58, 0.98) 100%) !important;
        z-index: 999 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        flex-wrap: nowrap !important;
    }

    .hero-nav.open {
        display: flex !important;
    }

    /* Professional mobile navigation links */
    .hero-nav a {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        font-family: inherit !important;
        padding: 20px 24px !important;
        margin: 0 !important;
        border: none !important;
        border-left: 4px solid transparent !important;
        color: #ffffff !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        cursor: pointer !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        box-sizing: border-box !important;
        background-color: transparent !important;
    }

    .hero-nav a:hover,
    .hero-nav a:active,
    .hero-nav a:focus {
        background-color: rgba(197, 162, 101, 0.08) !important;
        border-left-color: #C5A265 !important;
        color: #ffffff !important;
    }

    /* Active/highlighted navigation item */
    .hero-nav a.active {
        border-left-color: #C5A265 !important;
        color: #C5A265 !important;
        background-color: rgba(197, 162, 101, 0.05) !important;
    }

    /* Mobile Menu Close Button - Visible only on mobile */
    .mobile-menu-close {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        width: 48px !important;
        height: 48px !important;
        background-color: rgba(197, 162, 101, 0.15) !important;
        border: 2px solid #C5A265 !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 1000 !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        align-self: flex-start !important;
        margin: 0 !important;
    }

    .close-icon {
        font-size: 32px !important;
        line-height: 1 !important;
        color: #C5A265 !important;
        font-weight: 300 !important;
        text-align: center !important;
        display: block !important;
        margin-top: -2px !important;
    }

    .mobile-menu-close:hover {
        background-color: rgba(197, 162, 101, 0.25) !important;
        transform: scale(1.1) !important;
    }

    .mobile-menu-close:active {
        transform: scale(0.95) !important;
    }

    /* Mobile Menu Overlay
       Sits BELOW the header and the page text, not above them. `.hero-section > *`
       lifts the header, nav and content wrapper to z-index 1, so z-index 0 keeps the
       scrim underneath all of them while still painting above the hero image and its
       ::before gradient. The menu panel itself (.hero-nav, z-index 999) is a full-screen
       opaque sheet, so it stays above both. */
    .mobile-menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 0;
    }

    .mobile-menu-overlay.open {
        display: block;
    }

    .logo-img {
        height: 50px;
    }

    .hero-content-wrapper {
        flex-direction: column;
        padding: 40px 15px 50px 15px;
        gap: 30px;
        align-items: center;
        text-align: center;
    }

    .hero-content-left {
        max-width: 100%;
    }

    .hero-heading {
        font-size: 28px;
        margin-bottom: 16px;
        line-height: 1.3;
        font-weight: 800;
        color: #fff;
    }

    .hero-subheading {
        font-size: 15px;
        margin-bottom: 24px;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.9);
    }

    .btn-explore {
        font-size: 14px;
        padding: 12px 28px;
        font-weight: 600;
    }

    .hero-services {
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
        width: 100%;
    }

    .service-item {
        min-width: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .service-icon {
        width: 50px;
        height: 50px;
    }

    .service-label {
        font-size: 12px;
        max-width: 90px;
        font-weight: 500;
        color: #fff;
        text-align: center;
    }

    /* Image Banner */
    .image-banner {
        height: auto;
        min-height: 200px;
    }

    .banner-image {
        width: 100%;
        height: auto;
        display: block;
    }

    /* About Section */
    .about-section {
        padding: 50px 0;
    }

    .about-heading {
        font-size: 28px;
        font-weight: 800;
        margin-bottom: 24px;
        line-height: 1.3;
    }

    .about-paragraph-intro,
    .about-paragraph {
        font-size: 15px;
        padding-left: 0;
        padding-right: 0;
        line-height: 1.6;
        margin-bottom: 16px;
    }

    /* Featured Service Section */
    .featured-service-section {
        padding: 50px 0;
    }

    .featured-service-section .container,
    .featured-service-section .container-sm,
    .featured-service-section .container-md,
    .featured-service-section .container-lg,
    .featured-service-section .container-xl {
        max-width: 100% !important;
    }

    .featured-service-section .col-lg-6:first-child,
    .featured-service-section .col-lg-6:last-child {
        padding-left: 0;
        padding-right: 0;
    }

    .featured-image-container {
        margin-bottom: 30px;
        overflow: hidden;
        border-radius: 8px;
    }

    .featured-image {
        width: 100%;
        height: auto;
        display: block;
    }

    .featured-content {
        padding-left: 0;
        padding-right: 0;
    }

    .featured-title {
        font-size: 26px;
        font-weight: 800;
        margin-bottom: 18px;
        line-height: 1.3;
    }

    .featured-description {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 20px;
        color: #333;
    }

    .btn-find-out-more {
        font-size: 14px;
        padding: 12px 28px;
        margin-left: 0;
        display: inline-block;
        font-weight: 600;
    }

    /* Projects Section */
    .projects-section {
        max-width: 100% !important;
        width: 100% !important;
        padding-right: 0 !important;
        padding: 60px 0 !important;
        background-color: #0a192f;
    }

    .projects-section .container-fluid.px-4.px-md-5 {
        padding-right: 18px !important;
        padding-left: 18px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Mobile Row Layout */
    .projects-section .row {
        flex-direction: column !important;
        gap: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .projects-section .col-lg-2 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 48px !important;
        order: -1 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .projects-section .col-lg-10 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Section Header Styling */
    .projects-header {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-left: 18px;
        padding-right: 18px;
    }

    .projects-title {
        font-size: 30px;
        font-weight: 800;
        color: #ffffff;
        margin-bottom: 0;
        line-height: 1.15;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .projects-description {
        font-size: 14px;
        line-height: 1.7;
        color: #c5d1e0;
        margin-bottom: 20px;
        font-weight: 400;
        max-width: 90%;
    }

    .btn-view-case-studies {
        font-size: 11px;
        padding: 12px 28px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        background-color: #b89768;
        color: #0a192f;
        border: none;
        border-radius: 0;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        width: fit-content;
    }

    .btn-view-case-studies:active {
        background-color: #a38155;
        transform: translateY(1px);
    }

    /* Mobile Gallery - Premium Single Column */
    .projects-gallery {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 42px !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        padding-bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
        box-sizing: border-box !important;
    }

    /* Project Cards - Professional Presentation */
    .project-card {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        overflow: visible !important;
        box-shadow: none !important;
        flex: 1 1 100% !important;
        max-width: 100% !important;
        min-width: auto !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Project Images - Balanced and Visually Strong */
    .project-image-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        height: 240px !important;
        overflow: hidden !important;
        border-radius: 4px !important;
        margin-bottom: 20px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .project-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .project-card:active .project-image {
        transform: scale(1.01) !important;
    }

    /* Project Information - Clear Hierarchy */
    .project-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .project-card-title {
        font-size: 18px;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 10px;
        line-height: 1.35;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .project-card-description {
        font-size: 13px;
        line-height: 1.65;
        color: #c5d1e0;
        margin-bottom: 0;
        font-weight: 400;
        width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }

    /* Specialisms Section */
    .specialisms-section {
        padding: 50px 0;
    }

    .specialisms-section .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .specialisms-carousel-wrapper {
        padding: 0;
    }

    .specialisms-item {
        width: 100%;
    }

    .specialisms-content-wrapper {
        flex-direction: column;
        gap: 0;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .specialisms-image-container {
        height: 240px;
        width: 100%;
        overflow: hidden;
    }

    .specialisms-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .specialisms-card {
        width: 100%;
        height: auto;
        padding: 24px 18px;
        margin-left: 0;
        background: #fff;
    }

    .specialisms-overline {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #C5A265;
        margin-bottom: 8px;
    }

    .specialisms-title {
        font-size: 22px;
        font-weight: 800;
        margin-bottom: 12px;
        line-height: 1.3;
    }

    .specialisms-description {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 16px;
        color: #555;
    }

    .btn-read-more {
        font-size: 12px;
        padding: 10px 20px;
        font-weight: 600;
    }

    .specialisms-pagination {
        position: relative;
        right: auto;
        bottom: auto;
        gap: 8px;
        padding: 20px 0 0 0;
        justify-content: center;
    }

    .pagination-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 1px solid #ccc;
        background: transparent;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .pagination-dot.active {
        background: #C5A265;
        border-color: #C5A265;
    }

    /* Testimonials Section */
    .testimonials-section {
        padding: 50px 0;
    }

    .testimonials-title {
        font-size: 28px;
        font-weight: 800;
        margin-bottom: 24px;
        line-height: 1.3;
    }

    .testimonials-header {
        gap: 0;
        margin-bottom: 30px;
    }

    .quote-icon {
        width: 56px;
        margin-bottom: 12px;
    }

    .testimonials-controls {
        display: flex;
        gap: 12px;
        margin-top: 16px;
    }

    .testimonials-arrow {
        width: 26px;
        height: 38px;
        border: none;
        background: transparent;
        color: #C5A265;
        cursor: pointer;
        font-size: 20px;
        transition: color 0.3s ease, transform 0.3s ease;
    }

    .testimonials-arrow:hover {
        color: #d4a373;
    }

    .testimonial-text {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 20px;
        color: #e2e8f0;
    }

    .testimonial-author {
        margin-top: 16px;
    }

    .author-name {
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 4px;
    }

    .author-title {
        font-size: 13px;
        font-weight: 500;
        color: #777;
    }

    /* Contact Section */
    .contact-section {
        padding: 50px 0;
    }

    .contact-heading {
        font-size: 28px;
        font-weight: 800;
        margin-bottom: 16px;
        line-height: 1.3;
    }

    .contact-intro-text {
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 30px;
        line-height: 1.6;
        color: #555;
    }

    .contact-info {
        gap: 28px;
        flex-direction: column;
        margin-bottom: 30px;
    }

    .contact-detail {
        flex: 0 0 100%;
    }

    .contact-detail-label {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #333;
        margin-bottom: 6px;
    }

    .contact-detail-value {
        font-size: 15px;
        font-weight: 500;
        color: #555;
    }

    .form-group {
        gap: 0;
        margin-bottom: 18px;
    }

    .form-label {
        display: none;
    }

    .form-control-minimal {
        font-size: 15px;
        padding: 12px 0;
        border: none;
        border-bottom: 1px solid #ddd;
        background: transparent;
        transition: border-color 0.3s ease;
    }

    .form-control-minimal:focus {
        outline: none;
        border-bottom-color: #C5A265;
    }

    .form-control-message {
        font-size: 15px;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        min-height: 120px;
        transition: border-color 0.3s ease;
    }

    .form-control-message:focus {
        outline: none;
        border-color: #C5A265;
    }

    .btn-send {
        width: 100%;
        padding: 14px 30px;
        font-size: 14px;
        font-weight: 600;
        margin-top: 12px;
    }

    /* Footer */
    .footer-section {
        padding: 50px 0 30px 0;
    }

    .footer-logo {
        height: 80px;
        width: auto;
        margin-bottom: 24px;
    }

    .footer-column {
        margin-bottom: 28px;
    }

    .footer-sub-block {
        margin-bottom: 24px;
    }

    .footer-heading {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

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

    .footer-links a {
        font-size: 14px;
        font-weight: 500;
        display: block;
        margin-bottom: 8px;
        color: #777;
        transition: color 0.3s ease;
    }

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

    .footer-text {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.6;
        color: #777;
        margin-bottom: 8px;
    }

    .footer-subtitle {
        font-size: 14px;
        margin-bottom: 12px;
        line-height: 1.5;
        color: #777;
    }

    .newsletter-form {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .newsletter-input {
        font-size: 14px;
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        transition: border-color 0.3s ease;
    }

    .newsletter-input:focus {
        outline: none;
        border-color: #C5A265;
    }

    .btn-subscribe {
        padding: 10px 20px;
        font-size: 13px;
        font-weight: 600;
    }

    .footer-divider {
        height: 1px;
        background: rgba(0, 0, 0, 0.1);
        margin: 24px 0;
    }

    .footer-copyright {
        text-align: center;
        padding-top: 16px;
    }

    .footer-copyright p {
        font-size: 13px;
        color: #999;
    }

    .footer-copyright a {
        color: #C5A265;
        text-decoration: none;
    }

    .footer-copyright a:hover {
        text-decoration: underline;
    }
}

/* ===== SMALL PHONE BREAKPOINT (576px and below) ===== */
@media (max-width: 576px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .hero-logo {
        width: 100%;
    }

    .logo-img {
        height: 45px;
    }

    .hero-heading {
        font-size: 24px;
        margin-bottom: 12px;
    }

    .hero-subheading {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .btn-explore {
        font-size: 13px;
        padding: 10px 24px;
    }

    .hero-services {
        gap: 12px;
        margin-top: 30px;
    }

    .service-icon {
        width: 45px;
        height: 45px;
    }

    .service-label {
        font-size: 11px;
        max-width: 80px;
    }

    .about-heading {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .about-paragraph-intro,
    .about-paragraph {
        font-size: 14px;
        margin-bottom: 14px;
    }

    .featured-title {
        font-size: 22px;
        margin-bottom: 16px;
    }

    .featured-description {
        font-size: 14px;
        margin-bottom: 18px;
    }

    .projects-section {
        padding: 50px 0 !important;
    }

    .projects-section .container-fluid.px-4.px-md-5 {
        padding-right: 16px !important;
        padding-left: 16px !important;
    }

    .projects-section .col-lg-2 {
        margin-bottom: 40px;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .projects-section .col-lg-10 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .projects-header {
        padding-left: 16px;
        padding-right: 16px;
    }

    .projects-title {
        font-size: 26px;
        margin-bottom: 0;
    }

    .projects-description {
        font-size: 13px;
        margin-bottom: 18px;
        max-width: 100%;
    }

    .btn-view-case-studies {
        font-size: 10px;
        padding: 11px 24px;
    }

    .projects-gallery {
        gap: 40px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .project-image-wrapper {
        height: 220px !important;
        margin-bottom: 18px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .project-card {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        max-width: 100% !important;
    }

    .project-card-title {
        font-size: 16px;
        margin-bottom: 9px;
    }

    .project-card-description {
        font-size: 12px;
        line-height: 1.6;
    }

    .specialisms-title {
        font-size: 20px;
    }

    .specialisms-description {
        font-size: 13px;
    }

    .specialisms-card {
        padding: 20px 14px;
    }

    .testimonials-title {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .testimonial-text {
        font-size: 14px;
    }

    .author-name {
        font-size: 14px;
    }

    .contact-heading {
        font-size: 24px;
    }

    .contact-intro-text {
        font-size: 14px;
    }

    /* .footer-logo sizing for this tier is declared once, in the footer's own
       ≤576px block near the end of the file. */

    .footer-heading {
        font-size: 15px;
    }

    .footer-links a {
        font-size: 13px;
    }

    .footer-text {
        font-size: 13px;
    }
}

/* ===== ABOUT/INTRO SECTION ===== */
.about-section {
    background-color: #F5F3ED;
    padding: 80px 0;
}

.about-heading-block {
    padding-right: 30px;
}

.about-heading {
    font-size: 2.5rem;
    font-weight: 800;
    color: #0F2038;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 1.2;
    margin-bottom: 20px;
}

.about-accent-line {
    width: 50px;
    height: 2px;
    background-color: #C5A265;
    margin-bottom: 0;
}

.about-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-paragraph {
    font-size: 1rem;
    color: #1A2B4C;
    line-height: 1.7;
    font-weight: 400;
    margin: 0;
}

.about-paragraph-intro {
    font-size: 1.1rem;
    font-weight: 500;
}

/* ===== ABOUT SECTION RESPONSIVE ===== */
@media (max-width: 768px) {
    .about-section {
        padding: 60px 0;
    }

    .about-heading {
        font-size: 2rem;
        margin-bottom: 15px;
    }

    .about-heading-block {
        padding-right: 0;
        margin-bottom: 30px;
    }

    .about-paragraph {
        font-size: 0.95rem;
    }

    .about-paragraph-intro {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .about-section {
        padding: 40px 0;
    }

    .about-heading {
        font-size: 1.6rem;
        margin-bottom: 12px;
    }

    .about-paragraph {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .about-paragraph-intro {
        font-size: 0.95rem;
    }

    .about-accent-line {
        width: 40px;
        height: 1.5px;
    }
}

/* ===== IMAGE BANNER SECTION ===== */
.image-banner {
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.banner-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    /* The banner is a panoramic strip. The original artwork was already 2.23:1,
       so pinning that ratio here keeps the section exactly the height it has
       always been (647px at 1440, 861px at 1920) while letting object-fit crop
       a standard 3:2 site photograph into the same band instead of making the
       section half again as tall. */
    aspect-ratio: 2.23;
    object-position: center 45%;
}

/* ===== FEATURED SERVICE SECTION ===== */
.featured-service-section {
    background-color: #f7f4ed;
    padding: 80px 0;
}

/* Spacing for the stacked service rows. Scoped to this section so the
   identical .row.align-items-center.g-5 in .testimonials-section is
   unaffected. */
.featured-service-section .row {
    padding-top: 60px;
}

.featured-image-container {
    overflow: hidden;
    border-radius: 8px;
}

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

.featured-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.featured-title {
    font-size: 2rem;
    font-weight: 700;
    color: #c59b67;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
}

.featured-description {
    font-size: 1rem;
    color: #1a2b3c;
    line-height: 1.7;
    margin: 0;
    font-weight: 400;
}

.btn-find-out-more {
    display: inline-block;
    padding: 14px 32px;
    background-color: #005662;
    color: #fff;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: fit-content;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-find-out-more::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #003d48;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.btn-find-out-more:hover {
    color: #fff;
}

.btn-find-out-more:hover::before {
    width: 100%;
}

/* ===== FEATURED SERVICE RESPONSIVE ===== */
@media (max-width: 992px) {
    .featured-service-section {
        padding: 60px 0;
    }

    .featured-title {
        font-size: 1.7rem;
    }

    .featured-description {
        font-size: 0.95rem;
    }
}

@media (max-width: 768px) {
    .featured-service-section {
        padding: 40px 0;
    }

    .featured-title {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .featured-description {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .btn-find-out-more {
        padding: 12px 28px;
        font-size: 0.7rem;
    }
}

@media (max-width: 576px) {
    .featured-service-section {
        padding: 30px 0;
    }

    .featured-title {
        font-size: 1.3rem;
    }

    .featured-description {
        font-size: 0.85rem;
        line-height: 1.5;
    }

    .btn-find-out-more {
        padding: 10px 24px;
        font-size: 0.65rem;
    }
}

/* ===== FEATURED SERVICE - SCROLL CROSSFADE =====
   Layout for the OWO-style sticky image / crossfade behaviour. Everything that
   changes the section's shape is gated behind `.fs-ready`, which
   featured-service-scroll.js adds only once it has moved the images into the
   sticky stage. Without JS the section stays in the plain stacked form below.
   The Bootstrap .row/.col-lg-6 structure is deliberately kept so every existing
   ≥1600px / ≤1440px / ≤768px override for this section still applies. */

.featured-service-steps {
    display: flex;
    flex-direction: column;
    /* mirrors the 60px rhythm the five separate .row wrappers used to give */
    gap: 60px;
}

.featured-service-step {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Until the script fills it, the stage takes up no space at all. */
.featured-service-media:empty {
    display: none;
}

/* --- Stacked mode (below the lg breakpoint the section already collapsed at) --- */
@media (max-width: 991.98px) {
    /* Hide the image column outright so its gutter doesn't leave a gap; the
       images live inside their own step at this size. */
    .featured-service-scroller > *:first-child {
        display: none;
    }
}

/* --- Sticky crossfade mode --- */
@media (min-width: 992px) {
    /* The image column must be as tall as the copy column, otherwise it shrinks
       to the height of the image itself and the sticky element has no distance
       to travel (it would just scroll away with the page). `stretch` is the
       Bootstrap default; it is restated here because the old markup used
       `align-items-center`, which breaks sticky in exactly that way. */
    .featured-service-section.fs-ready .featured-service-scroller {
        align-items: stretch;
    }

    .featured-service-section.fs-ready .featured-service-media {
        position: sticky;
        /* clears the header + nav once they pin on scroll */
        top: var(--fs-sticky-top, 150px);
        /* fixed box so the differing image ratios cannot shift the layout */
        aspect-ratio: 1.267;
        overflow: hidden;
    }

    /* All images occupy the same box; only the active one is opaque. */
    .featured-service-section.fs-ready .featured-service-media .featured-image-container {
        position: absolute;
        inset: 0;
        margin: 0;
        opacity: 0;
        z-index: 1;
        will-change: opacity;
    }

    .featured-service-section.fs-ready .featured-service-media .featured-image-container.is-active {
        opacity: 1;
        z-index: 2;
    }

    .featured-service-section.fs-ready .featured-service-media .featured-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Each step supplies the scroll distance for one image. */
    .featured-service-section.fs-ready .featured-service-step {
        min-height: 78vh;
        justify-content: center;
        gap: 0;
    }

    .featured-service-section.fs-ready .featured-service-steps {
        gap: 0;
    }

    /* The copy for the image currently on screen reads at full strength. */
    .featured-service-section.fs-ready .featured-service-step .featured-content {
        opacity: 0.55;
        transition: opacity 0.5s ease;
    }

    .featured-service-section.fs-ready .featured-service-step.is-active .featured-content {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .featured-service-section.fs-ready .featured-service-step .featured-content {
        transition: none;
    }
}

/* ===== OUR PROJECTS SECTION ===== */
.projects-section {
    background-color: #0a192f;
    padding: 130px 0;
    position: relative;
    z-index: 100;
}

/* Override GSAP inline height constraints when pinned */
.projects-section[style*="position: fixed"] {
    height: auto !important;
    max-height: none !important;
}

.projects-header {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.projects-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    line-height: 1.2;
}

.projects-description {
    font-size: 0.95rem;
    color: #c5d1e0;
    line-height: 1.7;
    margin: 0;
    font-weight: 400;
}

.btn-view-case-studies {
    display: inline-block;
    padding: 12px 28px;
    background-color: #b89768;
    color: #0a192f;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: fit-content;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-view-case-studies::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #a38155;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.btn-view-case-studies:hover {
    color: #0a192f;
}

.btn-view-case-studies:hover::before {
    width: 100%;
}

.projects-gallery {
    display: flex;
    overflow-x: auto;
    gap: 30px;
}

/* Hide scrollbar but keep scrolling functional */
.projects-gallery::-webkit-scrollbar {
    display: none;
}

.projects-gallery {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.project-card {
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 0 0 calc(50% - 15px);
    min-width: 420px;
}

.project-image-wrapper {
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

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

.project-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.project-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0;
}

.project-card-description {
    font-size: 0.9rem;
    color: #c5d1e0;
    line-height: 1.6;
    margin: 0;
    font-weight: 400;
}

/* ===== PROJECTS SECTION RESPONSIVE ===== */
@media (max-width: 1200px) {
    .projects-title {
        font-size: 2.2rem;
    }

    .projects-gallery {
        gap: 25px;
    }

    .project-card {
        flex: 0 0 calc(50% - 12.5px);
        min-width: 350px;
    }
}

@media (max-width: 992px) {
    .projects-section {
        padding: 60px 0;
    }

    .projects-title {
        font-size: 2rem;
    }

    .projects-gallery {
        gap: 20px;
    }

    .project-card {
        flex: 0 0 calc(60% - 12px);
        min-width: 300px;
    }

    .project-card-description {
        font-size: 0.85rem;
    }
}

/* ===== OUR PROJECTS SECTION - Large LCD/Desktop Screens Only (1600px+) ===== */
@media (min-width: 1600px) {
    .projects-title {
        font-size: 35px;
        font-weight: 600;
    }

    .projects-description {
        font-size: 18px;
    }

    .project-card {
        max-width: 700px !important;
    }

    .project-info {
        padding: 2px;
    }

    .projects-gallery {
        gap: 15px;
    }

    .project-card-title {
        font-size: 23px;
        font-weight: 500;
    }

    .project-card-description {
        font-size: 16px;
    }

    .btn-view-case-studies {
        display: inline-block;
        padding: 17px 43px;
        font-size: 12px;
    }

    .projects-header {
        padding-top: 10px;
    }

    .project-image-wrapper {
        aspect-ratio: 3.5 / 3;
    }

    .projects-section .px-md-5 {
        padding-right: 0 !important;
        padding-left: 3rem !important;
    }
}

/* ===== SPECIALISMS CAROUSEL SECTION ===== */
.specialisms-section {
    background-color: #f6f4ee;
    padding: 80px 0;
    min-height: 600px;
    display: flex;
    align-items: center;
}

.specialisms-carousel-wrapper {
    position: relative;
    width: 100%;
}

.specialisms-carousel {
    position: relative;
    width: 100%;
}

.specialisms-item {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 0.6s ease-in-out;
    pointer-events: none;
}

.specialisms-item.active {
    opacity: 1;
    position: relative;
    pointer-events: auto;
}

.specialisms-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: center;
    position: relative;
}

.specialisms-image-container {
    width: 100%;
    height: 400px;
    overflow: hidden;
}

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

.specialisms-card {
    background-color: #ebd2c2;
    padding: 60px 50px;
    position: relative;
    z-index: 2;
    margin-left: -80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
}

.specialisms-overline {
    font-size: 0.75rem;
    font-weight: 700;
    color: #122238;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
}

.specialisms-title {
    font-size: 2rem;
    font-weight: 700;
    color: #122238;
    margin: 0;
    text-transform: none;
}

.specialisms-description {
    font-size: 0.95rem;
    color: #2c3e50;
    line-height: 1.7;
    margin: 0;
    font-weight: 400;
}

.btn-read-more {
    display: inline-block;
    padding: 10px 24px;
    border: 1px solid #005662;
    background: transparent;
    color: #005662;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: fit-content;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-read-more::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #005662;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.btn-read-more:hover {
    color: #fff;
    border-color: #005662;
}

.btn-read-more:hover::before {
    width: 100%;
}

.specialisms-pagination {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 30px 50px 0 0;
}

.pagination-dot {
    width: 10px;
    height: 10px;
    border: 1.5px solid #005662;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.pagination-dot.active {
    background-color: #005662;
}

.pagination-dot:hover {
    background-color: rgba(0, 86, 98, 0.5);
}

/* ===== SPECIALISMS RESPONSIVE ===== */
@media (max-width: 1200px) {
    .specialisms-card {
        padding: 50px 40px;
        margin-left: -60px;
    }

    .specialisms-title {
        font-size: 1.7rem;
    }

    .specialisms-description {
        font-size: 0.9rem;
    }

    .specialisms-image-container {
        height: 350px;
    }

    /* ==========================================
       NOTE: Rules above are overridden by
       the 1440px media query when both apply
       (at 1200px and below). The 1440px rules
       have !important to take priority.
       ========================================== */
}

@media (max-width: 992px) {
    .specialisms-section {
        padding: 60px 0;
        min-height: auto;
    }

    .specialisms-content-wrapper {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .specialisms-image-container {
        height: 300px;
        width: 100%;
    }

    .specialisms-card {
        padding: 40px 30px;
        margin-left: 0;
        margin-top: -50px;
        position: relative;
        z-index: 2;
    }

    .specialisms-pagination {
        justify-content: center;
        padding: 30px 0 0 0;
    }
}

@media (max-width: 768px) {
    .specialisms-section {
        padding: 40px 0;
    }

    .specialisms-image-container {
        height: 250px;
    }

    .specialisms-card {
        padding: 30px 25px;
        margin-top: -40px;
    }

    .specialisms-title {
        font-size: 1.4rem;
    }

    .specialisms-description {
        font-size: 0.85rem;
        line-height: 1.6;
    }

    .btn-read-more {
        padding: 8px 20px;
        font-size: 0.7rem;
    }
}

@media (max-width: 576px) {
    .specialisms-section {
        padding: 30px 0;
    }

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

    .specialisms-card {
        padding: 25px 20px;
        margin-top: -30px;
    }

    .specialisms-overline {
        font-size: 0.7rem;
        letter-spacing: 1.5px;
    }

    .specialisms-title {
        font-size: 1.2rem;
    }

    .specialisms-description {
        font-size: 0.8rem;
        line-height: 1.5;
    }

    .btn-read-more {
        padding: 7px 18px;
        font-size: 0.65rem;
    }

    .pagination-dot {
        width: 8px;
        height: 8px;
    }

    .specialisms-pagination {
        gap: 8px;
        padding: 20px 20px 0 0;
    }
}

/* ===== SPECIALISMS SECTION - Large LCD/Desktop Screens Only (1200px+) ===== */
@media (min-width: 1200px) {
    .specialisms-section {
        background-color: #f6f4ee !important;
    }

    .specialisms-card {
        background-color: #EEE5D8 !important;
        width: 97% !important;
        height: 300px !important;
    }

    .specialisms-image-container {
        height: 500px !important;
    }
}

/* ===== SPECIALISMS SECTION - Large LCD/Desktop Screens Only (1600px+) ===== */
@media (min-width: 1600px) {
    .specialisms-section {
        background-color: #f5f3ed !important;
    }

    .specialisms-section .container,
    .specialisms-section .container-fluid,
    .specialisms-section .container-sm,
    .specialisms-section .container-md,
    .specialisms-section .container-lg,
    .specialisms-section .container-xl,
    .specialisms-section .container-xxl {
        padding-left: 0 !important;
    }

    /* GSAP Pin Spacer */
    .specialisms-section .pin-spacer {
        background-color: #0A2544;
    }

    .specialisms-card {
        width: 100% !important;
        height: 500px !important;
    }

    .specialisms-image-container {
        height: 800px !important;
    }

    .specialisms-overline {
        font-size: 35px !important;
        font-weight: 700 !important;
    }

    .specialisms-title {
        font-size: 26px !important;
        font-weight: 700 !important;
    }

    .specialisms-description {
        font-size: 18px !important;
        font-weight: 600 !important;
    }

    .specialisms-pagination {
        position: absolute;
        right: 50px;
        bottom: 50px;
        gap: 25px;
    }
}

/* ===== TESTIMONIALS SECTION ===== */
.testimonials-section {
    background-color: #081d38;
    padding: 100px 0;
}

.testimonials-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
}

.quote-icon {
    display: block;
    width: 62px;
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.testimonials-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    line-height: 1.2;
}

.testimonials-controls {
    display: flex;
    align-items: center;
    gap: 5px;
    /* pull the row back by the arrow button's internal padding so the first
       chevron optically aligns with the left edge of the title */
    margin-left: -4px;
}

/* The button is kept 40px tall for a comfortable tap target but only as wide as
   the chevron needs, so the two arrows sit close together as in the design
   rather than being pushed apart by empty button padding. */
.testimonials-arrow {
    width: 20px;
    height: 40px;
    border: none;
    background: transparent;
    color: #c59b67;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease, transform 0.3s ease;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
}

/* Covers both the Font Awesome webfont <i> and the SVG the kit swaps it for */
.testimonials-arrow i,
.testimonials-arrow svg {
    display: block;
    font-size: inherit;
    line-height: 1;
    pointer-events: none;
}

.testimonials-arrow:hover,
.testimonials-arrow:focus-visible {
    color: #d4a373;
    transform: scale(1.15);
}

.testimonials-arrow:focus {
    outline: none;
}

.testimonials-arrow:focus-visible {
    outline: 2px solid #d4a373;
    outline-offset: 4px;
}

.testimonials-carousel {
    position: relative;
    width: 100%;
}

.testimonial-item {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 0.6s ease-in-out;
    pointer-events: none;
}

.testimonial-item.active {
    opacity: 1;
    position: relative;
    pointer-events: auto;
}

.testimonial-text {
    font-size: 1.05rem;
    color: #e2e8f0;
    line-height: 1.8;
    margin: 0 0 30px 0;
    font-weight: 400;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.author-name {
    font-size: 1rem;
    font-weight: 700;
    color: #c59b67;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0;
}

.author-title {
    font-size: 0.85rem;
    color: #94a3b8;
    margin: 0;
    font-weight: 400;
}

/* ===== TESTIMONIALS RESPONSIVE ===== */
@media (max-width: 1200px) {
    .testimonials-title {
        font-size: 2.2rem;
    }

    .testimonial-text {
        font-size: 1rem;
    }
}

@media (max-width: 992px) {
    .testimonials-section {
        padding: 60px 0;
    }

    .testimonials-title {
        font-size: 2rem;
    }

    /* !important needed to beat the max-width:1440px override above */
    .quote-icon {
        width: 48px !important;
    }

    .testimonial-text {
        font-size: 0.95rem;
        line-height: 1.7;
    }
}

@media (max-width: 768px) {
    .testimonials-section {
        padding: 40px 0;
    }

    .testimonials-header {
        margin-bottom: 30px;
    }

    .testimonials-title {
        font-size: 1.8rem;
    }

    .quote-icon {
        width: 46px !important;
    }

    .testimonial-text {
        font-size: 0.9rem;
        margin-bottom: 25px;
    }

    .author-name {
        font-size: 0.95rem;
        letter-spacing: 1.2px;
    }

    .author-title {
        font-size: 0.8rem;
    }
}

@media (max-width: 576px) {
    .testimonials-section {
        padding: 30px 0;
    }

    .testimonials-title {
        font-size: 1.5rem;
        letter-spacing: 1.5px;
    }

    .quote-icon {
        width: 42px !important;
    }

    /* Wider/taller buttons with a smaller gap: the tap target grows to 26x44
       while the chevrons stay 29px apart, so the visual spacing is unchanged. */
    .testimonials-controls {
        gap: 3px;
        margin-left: -7px;
    }

    .testimonials-arrow {
        width: 26px;
        height: 44px;
        font-size: 1.15rem;
    }

    .testimonial-text {
        font-size: 0.85rem;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .author-name {
        font-size: 0.9rem;
        letter-spacing: 1px;
    }

    .author-title {
        font-size: 0.75rem;
    }
}

/* ===== TESTIMONIALS SECTION - Large LCD/Desktop Screens Only (1600px+) ===== */
@media (min-width: 1600px) {
    .testimonials-section {
        padding: 150px 0;
    }

    .testimonials-section .container,
    .testimonials-section .container-sm,
    .testimonials-section .container-md,
    .testimonials-section .container-lg,
    .testimonials-section .container-xl,
    .testimonials-section .container-xxl {
        max-width: 1650px;
    }

    .testimonials-header {
        gap: 6px;
    }

    .quote-icon {
        width: 66px;
        margin-bottom: 2px;
    }

    .testimonials-title {
        font-size: 43px;
        font-weight: 600;
    }

    .testimonials-controls {
        margin-top: 9px;
        gap: 6px;
        margin-left: -3px;
    }

    .testimonials-arrow {
        width: 22px;
        height: 40px;
        font-size: 1.4rem;
    }

    .testimonial-text {
        font-size: 30px;
        line-height: 1.5;
        color: #E2E8F0;
    }

    .author-name {
        font-size: 30px;
        font-weight: 600;
        color: #C59B67;
    }

    .author-title {
        font-size: 25px;
    }
}

/* ===== CONTACT SECTION ===== */
.contact-section {
    background-color: #ece6d9;
    padding: 100px 0;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.contact-heading {
    font-size: 2.5rem;
    font-weight: 800;
    color: #c59b67;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    line-height: 1.2;
}

.contact-intro-text {
    font-size: 0.95rem;
    color: #0b2b3a;
    line-height: 1.7;
    margin: 0;
    font-weight: 400;
}

.contact-detail {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 15px;
}

.contact-detail-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #0b4d63;
    margin: 0;
    text-transform: capitalize;
}

.contact-detail-value {
    font-size: 0.95rem;
    color: #0b2b3a;
    margin: 0;
    font-weight: 400;
}

/* Contact Form Styling */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #0b2b3a;
    margin: 0;
}

.form-control-minimal {
    background: transparent;
    border: none;
    border-bottom: 1px solid #0b2b3a;
    border-radius: 0;
    padding: 10px 0;
    font-size: 18px;
    color: #0b2b3a;
    transition: all 0.3s ease;
}

.form-control-minimal:focus {
    background: transparent;
    border-color: #0b4d63;
    box-shadow: none;
    color: #0b2b3a;
}

.form-control-minimal::placeholder {
    color: #000;
    opacity: 1;
}

.form-control-message {
    background: transparent;
    border: 1px solid #708090;
    border-radius: 0;
    padding: 15px;
    font-size: 18px;
    color: #0b2b3a;
    transition: all 0.3s ease;
}

.form-control-message:focus {
    background: transparent;
    border-color: #0b4d63;
    box-shadow: none;
    color: #0b2b3a;
}

.form-control-message::placeholder {
    color: #000;
    opacity: 1;
}

.btn-send {
    display: inline-block;
    padding: 14px 40px;
    background-color: #005662;
    color: #fff;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: fit-content;
    margin-top: 10px;
}

.btn-send:hover {
    background-color: #003d48;
    color: #fff;
}

/* ===== CONTACT SECTION RESPONSIVE ===== */
@media (max-width: 1200px) {
    .contact-heading {
        font-size: 2.2rem;
    }

    .contact-intro-text {
        font-size: 0.9rem;
    }
}

@media (max-width: 992px) {
    .contact-section {
        padding: 60px 0;
    }

    .contact-heading {
        font-size: 2rem;
    }

    .contact-info {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .contact-section {
        padding: 40px 0;
    }

    .contact-heading {
        font-size: 1.8rem;
    }

    .contact-intro-text {
        font-size: 0.85rem;
    }

    .contact-detail {
        margin-top: 12px;
    }

    .contact-detail-label {
        font-size: 0.85rem;
    }

    .contact-detail-value {
        font-size: 0.9rem;
    }

    .form-control-minimal {
        font-size: 0.9rem;
        padding: 8px 0;
    }

    .form-control-message {
        font-size: 0.9rem;
        padding: 12px;
    }

    .btn-send {
        padding: 12px 36px;
        font-size: 0.7rem;
    }
}

@media (max-width: 576px) {
    .contact-section {
        padding: 30px 0;
    }

    .contact-heading {
        font-size: 1.5rem;
        letter-spacing: 1.5px;
    }

    .contact-intro-text {
        font-size: 0.8rem;
        line-height: 1.6;
    }

    .contact-detail-label {
        font-size: 0.8rem;
    }

    .contact-detail-value {
        font-size: 0.85rem;
    }

    .form-label {
        font-size: 0.85rem;
    }

    .form-control-minimal {
        font-size: 0.85rem;
        padding: 6px 0;
    }

    .form-control-message {
        font-size: 0.85rem;
        padding: 10px;
    }

    .btn-send {
        padding: 10px 30px;
        font-size: 0.65rem;
    }

    .contact-form {
        gap: 25px;
    }
}

/* ===== CONTACT SECTION - Large LCD/Desktop Screens Only (1600px+) ===== */
@media (min-width: 1600px) {
    .contact-heading {
        font-size: 43px;
        font-weight: 600;
    }

    .contact-intro-text {
        font-size: 30px;
        line-height: 1.1;
        font-weight: 500;
    }

    .contact-detail-label {
        font-size: 30px;
        font-weight: 500;
    }

    .contact-detail-value {
        font-size: 30px;
        font-weight: 500;
    }

    .form-label {
        font-size: 26px;
    }

    .contact-detail {
        gap: 0;
    }

    .contact-info {
        padding-right: 50px;
    }

    .contact-section .container,
    .contact-section .container-sm,
    .contact-section .container-md,
    .contact-section .container-lg,
    .contact-section .container-xl,
    .contact-section .container-xxl {
        max-width: 1650px;
    }

    .btn-send {
        padding: 20px 80px;
        font-size: 15px;
        font-weight: 500;
    }
}

/* ===== FOOTER SECTION ===== */
.footer-section {
    background-color: #081d38;
    padding: 80px 0 40px 0;
}

/* Footer Branding */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-logo {
    height: 80px;
    width: auto;
    display: block;
    margin-bottom: 10px;
}

.footer-tagline {
    font-size: 0.75rem;
    color: #94a3b8;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0;
    line-height: 1.5;
}

/* Footer Column Styling */
.footer-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-heading {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
}

.footer-text {
    font-size: 0.9rem;
    color: #c5d1e0;
    margin: 0;
    line-height: 1.6;
    font-weight: 400;
}

.footer-subtitle {
    font-size: 0.85rem;
    color: #c5d1e0;
    margin: 0;
    line-height: 1.6;
    font-weight: 400;
}

.footer-sub-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Footer Links */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links li {
    margin: 0;
}

.footer-links a {
    font-size: 0.9rem;
    color: #c5d1e0;
    text-decoration: none;
    font-weight: 400;
    transition: color 0.3s ease;
}

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

/* Newsletter Form */
.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.newsletter-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid #c5d1e0;
    color: #c5d1e0;
    font-size: 0.9rem;
    padding: 8px 0;
    transition: all 0.3s ease;
}

.newsletter-input::placeholder {
    color: rgba(197, 209, 224, 0.6);
}

.newsletter-input:focus {
    outline: none;
    border-bottom-color: #ffffff;
    color: #ffffff;
}

.btn-subscribe {
    padding: 10px 28px;
    border: 1px solid #ffffff;
    background: transparent;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: fit-content;
}

.btn-subscribe:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    color: #ffffff;
}

/* Footer Divider & Copyright */
.footer-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: 50px 0 30px 0;
}

.footer-copyright {
    text-align: right;
    font-size: 0.85rem;
    color: #94a3b8;
    margin: 0;
}

.footer-copyright a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-copyright a:hover {
    color: #c5d1e0;
}

/* ===== FOOTER RESPONSIVE ===== */
@media (max-width: 1200px) {
    .footer-section {
        padding: 60px 0 30px 0;
    }

    .footer-heading {
        font-size: 0.8rem;
        letter-spacing: 1.5px;
    }

    .footer-text {
        font-size: 0.85rem;
    }
}

@media (max-width: 992px) {
    .footer-section {
        padding: 50px 0 25px 0;
    }

    .footer-logo {
        height: 70px;
    }

    .footer-column {
        gap: 18px;
    }

    .footer-links {
        gap: 8px;
    }

    .footer-text {
        font-size: 0.85rem;
    }

    .footer-divider {
        margin: 40px 0 25px 0;
    }
}

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

    .footer-logo {
        height: 60px;
    }

    .footer-heading {
        font-size: 0.75rem;
        letter-spacing: 1.2px;
        margin-top: 20px;
    }

    .footer-text {
        font-size: 0.8rem;
    }

    .footer-subtitle {
        font-size: 0.8rem;
    }

    .footer-links a {
        font-size: 0.85rem;
    }

    .newsletter-input {
        font-size: 0.85rem;
        padding: 6px 0;
    }

    .btn-subscribe {
        padding: 8px 24px;
        font-size: 0.65rem;
    }

    .footer-divider {
        margin: 30px 0 20px 0;
    }

    .footer-copyright {
        font-size: 0.8rem;
    }
}

@media (max-width: 576px) {
    .footer-section {
        padding: 30px 0 15px 0;
    }

    /* Canonical mobile footer logo. Last .footer-logo declaration in the file, so it
       wins on source order without !important. */
    .footer-logo {
        height: 100px;
        width: auto;
    }

    .footer-brand {
        gap: 8px;
        margin-bottom: 20px;
    }

    .footer-tagline {
        font-size: 0.65rem;
        letter-spacing: 1px;
    }

    .footer-heading {
        font-size: 0.7rem;
        letter-spacing: 1px;
        margin-top: 15px;
    }

    .footer-text {
        font-size: 0.75rem;
    }

    .footer-subtitle {
        font-size: 0.75rem;
    }

    .footer-links {
        gap: 6px;
    }

    .footer-links a {
        font-size: 0.8rem;
    }

    .newsletter-input {
        font-size: 0.8rem;
    }

    .btn-subscribe {
        padding: 7px 20px;
        font-size: 0.6rem;
    }

    .footer-divider {
        margin: 25px 0 15px 0;
    }

    .footer-copyright {
        font-size: 0.75rem;
        text-align: center;
    }
}

/* ===== FOOTER SECTION - Large LCD/Desktop Screens Only (1600px+) ===== */
@media (min-width: 1600px) {
    .footer-heading {
        font-size: 25px;
        font-weight: 500;
    }

    .footer-logo {
        width: 250px;
        height: 250px;
    }

    .footer-links a {
        font-size: 23px;
        color: #EEE5D8;
    }

    .footer-text {
        font-size: 23px;
        color: #EEE5D8;
    }

    .footer-heading {
        color: #EEE5D8;
    }

    .footer-subtitle {
        font-size: 23px;
        color: #EEE5D8;
    }

    .newsletter-input {
        color: #EEE5D8;
        font-size: 23px;
    }

    .btn-subscribe {
        padding: 14px 39px;
        border: 1px solid #FFFFFF;
        color: #EEE5D8;
        font-size: 12px;
    }

    .footer-column {
        gap: 35px;
    }
}

/* ===== ABOUT-US PAGE STYLES ===== */

/* About Hero Section */
.about-hero {
    background: linear-gradient(135deg, #0a2544 0%, #1a4d6d 100%);
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.about-hero-content {
    text-align: center;
}

.about-hero .hero-heading {
    font-size: 3rem;
    color: #fff;
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.about-hero .hero-subheading {
    font-size: 1.5rem;
    color: #c9d5e3;
    font-weight: 400;
    margin-bottom: 2rem;
}

@media (max-width: 991px) {
    .about-hero .hero-heading {
        font-size: 2rem;
    }

    .about-hero .hero-subheading {
        font-size: 1.1rem;
    }
}

/* About Story Section */
.about-story-section {
    padding: 4rem 0;
    background-color: #f5f5f5;
}

.about-section-title {
    font-size: 2.5rem;
    color: #0a2544;
    font-weight: 700;
    margin-bottom: 2rem;
    line-height: 1.2;
}

.about-text {
    font-size: 1rem;
    color: #333;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.about-image-wrapper {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.about-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.about-image-wrapper:hover .about-image {
    transform: scale(1.05);
}

@media (max-width: 991px) {
    .about-story-section {
        padding: 3rem 0;
    }

    .about-section-title {
        font-size: 2rem;
    }

    .about-text {
        font-size: 0.95rem;
    }
}

/* Values Section */
.values-section {
    padding: 4rem 0;
    background-color: #fff;
}

.section-title {
    font-size: 2.8rem;
    color: #0a2544;
    font-weight: 700;
    line-height: 1.2;
}

.value-card {
    background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    transition: all 0.4s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.value-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0a2544 0%, #1a4d6d 100%);
    border-radius: 50%;
}

.value-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.value-title {
    font-size: 1.3rem;
    color: #0a2544;
    font-weight: 700;
    margin-bottom: 1rem;
}

.value-text {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 991px) {
    .values-section {
        padding: 3rem 0;
    }

    .section-title {
        font-size: 2rem;
    }

    .value-card {
        padding: 1.5rem;
    }

    .value-title {
        font-size: 1.1rem;
    }
}

/* Expertise Section */
.expertise-section {
    padding: 4rem 0;
    background-color: #f5f5f5;
}

.expertise-image-wrapper {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.expertise-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.expertise-image-wrapper:hover .expertise-image {
    transform: scale(1.05);
}

.expertise-list {
    margin-top: 2rem;
}

.expertise-item {
    padding: 1.5rem 0;
    border-bottom: 1px solid #ddd;
}

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

.expertise-item h4 {
    font-size: 1.2rem;
    color: #0a2544;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.expertise-item p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 991px) {
    .expertise-section {
        padding: 3rem 0;
    }

    .expertise-item {
        padding: 1.2rem 0;
    }

    .expertise-item h4 {
        font-size: 1.1rem;
    }
}

/* Team/Stats Section */
.team-section {
    padding: 4rem 0;
    background: linear-gradient(135deg, #0a2544 0%, #1a4d6d 100%);
    color: #fff;
}

.team-section .section-title {
    color: #fff;
    margin-bottom: 3rem;
}

.team-card {
    background: rgba(255, 255, 255, 0.1);
    padding: 2.5rem 1.5rem;
    border-radius: 12px;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s ease;
}

.team-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.3);
}

.team-stat {
    font-size: 3rem;
    font-weight: 700;
    color: #A2E0B5;
    margin-bottom: 1rem;
    line-height: 1;
}

.team-label {
    font-size: 1rem;
    color: #c9d5e3;
    margin: 0;
    font-weight: 500;
}

@media (max-width: 991px) {
    .team-section {
        padding: 3rem 0;
    }

    .team-stat {
        font-size: 2.5rem;
    }

    .team-label {
        font-size: 0.9rem;
    }
}

/* Certifications Section */
.certifications-section {
    padding: 4rem 0;
    background-color: #fff;
}

.certifications-section .section-title {
    margin-bottom: 3rem;
}

.cert-item {
    padding: 2rem;
    border: 2px solid #0a2544;
    border-radius: 8px;
    transition: all 0.4s ease;
}

.cert-item:hover {
    background-color: #0a2544;
    color: #fff;
    transform: translateY(-5px);
}

.cert-item h4 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    color: #0a2544;
    transition: color 0.4s ease;
}

.cert-item:hover h4 {
    color: #fff;
}

.cert-item p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    color: #555;
    transition: color 0.4s ease;
}

.cert-item:hover p {
    color: #c9d5e3;
}

@media (max-width: 991px) {
    .certifications-section {
        padding: 3rem 0;
    }

    .cert-item {
        margin-bottom: 1.5rem;
    }

    .cert-item h4 {
        font-size: 1.1rem;
    }
}

/* CTA Section */
.cta-section-about {
    padding: 5rem 0;
    background: linear-gradient(135deg, #0a2544 0%, #1a4d6d 100%);
    color: #fff;
    text-align: center;
}

.cta-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.cta-subtitle {
    font-size: 1.1rem;
    color: #c9d5e3;
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.cta-section-about .btn-explore {
    background: #A2E0B5;
    color: #0a2544;
    padding: 12px 40px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid #A2E0B5;
}

.cta-section-about .btn-explore:hover {
    background: transparent;
    color: #A2E0B5;
    transform: scale(1.05);
}

@media (max-width: 991px) {
    .cta-section-about {
        padding: 3rem 0;
    }

    .cta-title {
        font-size: 1.8rem;
    }

    .cta-subtitle {
        font-size: 1rem;
    }
}

/* ===== ABOUT PAGE SPECIFIC STYLES ===== */

/* Who We Are Section */
.who-we-are-section {
    padding: 4rem 0;
    background: #fff;
    text-align: center;
}

.who-we-are-content {
    max-width: 900px;
    margin: 0 auto;
}

.who-we-are-title {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}

.who-we-are-subtitle {
    font-size: 1.2rem;
    color: var(--color-gold);
    font-weight: 500;
    margin-bottom: 2rem;
}

.divider-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, #ccc, transparent);
    margin: 2rem 0;
}

.intro-paragraphs {
    margin-bottom: 2rem;
}

.intro-paragraph {
    font-size: 1rem;
    color: #4a5a7a;
    line-height: 1.8;
    margin-bottom: 1.25rem;
}

.intro-paragraph:last-child {
    margin-bottom: 0;
}

.quality-certificate {
    font-size: 0.95rem;
    color: #888;
    font-style: italic;
    margin: 0;
}

@media (max-width: 991px) {
    .who-we-are-section {
        padding: 2.5rem 0;
    }

    .who-we-are-title {
        font-size: 1.8rem;
    }

    .who-we-are-subtitle {
        font-size: 1rem;
    }

    .intro-paragraph {
        font-size: 0.95rem;
    }
}

/* Featured Image Sections */
.featured-image-section,
.featured-image-section-2 {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.featured-image,
.featured-image-2 {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.featured-image-section {
    margin: 0;
}

.featured-image-section-2 {
    margin: 3rem 0;
}

/* Established Section */
.established-section {
    padding: 4rem 0;
    background: #fff;
}

.established-heading {
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.established-description {
    font-size: 1rem;
    color: #4a5a7a;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.established-image-container {
    overflow: hidden;
    border-radius: 8px;
}

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

@media (max-width: 991px) {
    .established-section {
        padding: 3rem 0;
    }

    .established-heading {
        font-size: 1.6rem;
    }

    .established-description {
        font-size: 0.95rem;
    }
}

/* Trusted Team Section */
.trusted-team-section {
    padding: 4rem 0;
    background: #f8f9fc;
}

.section-overline {
    font-size: 0.85rem;
    color: var(--color-gold);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    display: block;
}

.trusted-team-heading {
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.text-accent {
    color: var(--color-gold);
}

.trusted-team-description {
    font-size: 1rem;
    color: #4a5a7a;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.trust-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.trust-checklist li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    font-size: 1rem;
    color: #4a5a7a;
    line-height: 1.6;
}

.trust-checklist li::before {
    content: "✓";
    color: var(--color-gold);
    font-weight: bold;
    margin-right: 1rem;
    flex-shrink: 0;
    font-size: 1.2rem;
}

.feature-icon {
    color: var(--color-gold);
    font-weight: bold;
    margin-right: 1rem;
    flex-shrink: 0;
    font-size: 1.1rem;
}

.trusted-team-image-wrapper {
    overflow: hidden;
    border-radius: 8px;
}

.trusted-team-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

@media (max-width: 991px) {
    .trusted-team-section {
        padding: 3rem 0;
    }

    .trusted-team-heading {
        font-size: 1.6rem;
    }

    .trusted-team-description {
        font-size: 0.95rem;
    }

    .trust-checklist li {
        font-size: 0.95rem;
    }
}

/* Here to Help Section */
.here-to-help-section {
    padding: 4rem 0;
    background: #fff;
    text-align: center;
}

.here-to-help-content {
    max-width: 700px;
}

.here-to-help-heading {
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.here-to-help-description {
    font-size: 1rem;
    color: #4a5a7a;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.here-to-help-description:last-of-type {
    margin-bottom: 2rem;
}

@media (max-width: 991px) {
    .here-to-help-section {
        padding: 3rem 0;
    }

    .here-to-help-heading {
        font-size: 1.6rem;
    }

    .here-to-help-description {
        font-size: 0.95rem;
    }
}

/* Portfolio Showcase Section */
.portfolio-showcase-section {
    padding: 4rem 0;
    background: #f8f9fc;
}

.showcase-header {
    text-align: center;
    margin-bottom: 3rem;
}

.showcase-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}

.showcase-subtitle {
    font-size: 1rem;
    color: #4a5a7a;
}

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    row-gap: 2rem;
}

@media (min-width: 768px) {
    .showcase-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        row-gap: 2.5rem;
    }
}

@media (min-width: 992px) {
    .showcase-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
        row-gap: 3rem;
    }
}

.showcase-item {
    overflow: hidden;
    border-radius: 4px;
    transition: transform 0.3s ease;
}

.showcase-item:hover {
    transform: translateY(-5px);
}

.showcase-image-wrapper {
    width: 100%;
    height: 250px;
    background: #e8eef5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

@media (max-width: 767px) {
    .showcase-image-wrapper {
        height: 200px;
    }
}

.showcase-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.showcase-item-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
    text-transform: capitalize;
    margin: 0;
}

@media (max-width: 991px) {
    .portfolio-showcase-section {
        padding: 3rem 0;
    }

    .showcase-title {
        font-size: 1.6rem;
    }
}

/* =============================================
   SERVICES PAGE — scoped styles
   Page: services.html
   Reuses .hero-section (§7.1/§9.1) and
   .featured-service-section (§9.4) unchanged;
   everything below is scoped to .services-* only.
   ============================================= */

/* ----- Inner-page hero: shorter than the home hero ----- */
/* Shared by services.html, specialisms.html and partners.html */
.hero-section.services-hero,
.hero-section.specialisms-hero,
.hero-section.partners-hero,
.hero-section.terms-hero,
.hero-section.contact-hero {
    height: 60vh;
    min-height: 520px;
    /* No background-image here on purpose. These five pages take the hero
       photo from the base `.hero-section` rule (§ ~77), which is exactly how
       about-us.html — the design reference — gets its own. Inheriting rather
       than restating it means the reference and these pages cannot drift
       apart: changing the base swaps all six together.

       This replaced `url('assets/images/Header.png')`, an 8001x3842 PNG that
       was only ever used here. index.html is unaffected — it pins its own
       photo via `.home-hero` (§ ~86). */
}

.services-hero .hero-content-wrapper,
.specialisms-hero .hero-content-wrapper,
.partners-hero .hero-content-wrapper,
.terms-hero .hero-content-wrapper,
.contact-hero .hero-content-wrapper {
    justify-content: flex-start;
}

/* (The per-page hero font override that used to sit here is gone — the
   ≥1600px rules now carry the canonical stack, so every page inherits it.) */

/* ----- Current-page nav state (desktop) ----- */
/* .hero-nav a.active is styled in the ≤768px block only; without this the
   active class is inert on desktop. */
.hero-nav a.active {
    color: #C5A265;
}

.hero-nav.scrolled a.active {
    color: #C5A265 !important;
}

/* ----- Service bands: alternating image side ----- */
/* DOM order is always image-first; reversed bands flip it visually */
.services-band--reverse .row {
    flex-direction: row-reverse;
}

/* ----- LCD / large desktop (≥1600px) ----- */
@media (min-width: 1600px) {
    .hero-section.services-hero,
    .hero-section.specialisms-hero,
    .hero-section.partners-hero,
    .hero-section.terms-hero,
    .hero-section.contact-hero {
        height: 55vh;
        min-height: 620px;
    }

    /* Mirror the full-bleed image edge: reversed bands bleed off the RIGHT */
    .services-band--reverse .col-12.col-lg-6:first-child {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Mirror the button too: .btn-find-out-more is margin-left:auto (right-
       aligned) by default, which lands mid-page on a reversed band. */
    .services-band--reverse .btn-find-out-more {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}

/* ----- Laptop (≤1440px) ----- */
@media (max-width: 1440px) {
    /* Beats the base .hero-section { height: 120vh !important } */
    .hero-section.services-hero,
    .hero-section.specialisms-hero,
    .hero-section.partners-hero,
    .hero-section.terms-hero,
    .hero-section.contact-hero {
        height: 60vh !important;
        min-height: 460px;
    }

    /* Mirror the copy-column padding for reversed bands */
    .services-band--reverse .col-lg-6:last-child {
        padding-left: 80px !important;
        padding-right: 51px !important;
    }

    .services-band--reverse .btn-find-out-more {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}

/* ----- Laptop (992px–1440px): match the about-us hero -----
   about-us.html is the design reference for the inner-page hero. Measured
   across every page, the five inner heroes matched it already at <=768px
   (259px tall, 30px/600 heading in normal flow), but diverged through the
   whole laptop band:

                        about-us (reference)   inner pages (before)
       hero height      90vh (810px @900h)     60vh (540px)
       heading size     50px                   30px
       heading weight   500                    600
       heading top      270px                  250px
       heading margin   70px                   250px

   The values below are the same four the reference carries, so the heading
   lands at an identical offset on every page — 390px from the hero top at
   1200-1440px, 408px at 992px (the difference is the taller header bar at
   that width, which both share).

   Range matches about-us exactly:
     - Floor 992px, because `top`/`margin-left` only bite where the heading
       is absolutely positioned, which § ~373 applies from 992px up.
     - Ceiling 1440px, the ceiling of the "LAPTOP SCREENS AND BELOW" block
       (§ ~918) whose `height: 120vh !important` / `font-size: 30px
       !important` these override. From 1441px up the existing large-screen
       design is deliberately left alone.

   `min-height: 0` because the reference sets none; it replaces the 460px
   floor from the block above. Inert unless the viewport is under ~511px
   tall, below which 90vh would otherwise be clamped and the pages would
   stop matching.

   Heading selectors are 0,2,0 so they beat the plain `.hero-heading` rules
   in § ~373 and § ~918 on specificity; the `.hero-section` selectors tie
   with the block above at 0,2,0 and win on document order.

   NOT applied to index.html: its hero also carries a subheading, a CTA and
   the service-icon row, and § ~395 deliberately keeps that heading in
   normal flow so the three stay together. Absolute placement would detach
   them. */
@media (min-width: 992px) and (max-width: 1440px) {
    .hero-section.services-hero,
    .hero-section.specialisms-hero,
    .hero-section.partners-hero,
    .hero-section.terms-hero,
    .hero-section.contact-hero {
        height: 90vh !important;
        min-height: 0 !important;
    }

    .services-hero .hero-heading,
    .specialisms-hero .hero-heading,
    .partners-hero .hero-heading,
    .terms-hero .hero-heading,
    .contact-hero .hero-heading {
        font-size: 50px !important;
        font-weight: 500 !important;
        margin-left: 70px;
        top: 270px;
    }
}

/* ----- Mobile / Tablet (≤991px) ----- */
@media (max-width: 991px) {
    /* Stack every band image-above-copy, regardless of desktop side */
    .services-band--reverse .row {
        flex-direction: row;
    }
}

/* ----- Mobile (≤768px) ----- */
/* Re-declared with !important per §5.2 — the ≤1440px block above
   would otherwise keep its 80px/51px gutters on phones. */
@media (max-width: 768px) {
    .hero-section.services-hero,
    .hero-section.specialisms-hero,
    .hero-section.partners-hero,
    .hero-section.terms-hero,
    .hero-section.contact-hero {
        height: auto !important;
        min-height: 0 !important;
    }

    /* Zeroing the column padding alone would expose Bootstrap's negative row
       margin and push content past both viewport edges, so the row margin is
       neutralised with it. Side spacing then comes from .container's 15px. */
    .services-band .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .services-band .col-lg-6:first-child,
    .services-band .col-lg-6:last-child,
    .services-band--reverse .col-lg-6:first-child,
    .services-band--reverse .col-lg-6:last-child {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Buttons return to the text edge when stacked */
    .services-band .btn-find-out-more,
    .services-band--reverse .btn-find-out-more {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    /* Restore the mobile type sizes the ≤1440px block suppresses (§5.2/§14).
       Without these, body copy renders at 12px/600 on phones. */
    .services-band .featured-title {
        font-size: 26px !important;
        font-weight: 800 !important;
    }

    .services-band .featured-description {
        font-size: 15px !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
    }

    .services-band .btn-find-out-more {
        font-size: 14px !important;
        font-weight: 600 !important;
    }
}

/* =============================================
   PARTNERS PAGE — scoped styles
   Page: partners.html
   Reuses .about-heading / .about-accent-line for the section title.
   Tiles use #EEE5D8 on a #F5F3ED ground — both existing §3 tokens.
   ============================================= */

.partners-section {
    background-color: #F5F3ED;
    padding: 80px 0;
}

.partners-heading-block {
    margin-bottom: 50px;
}

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

.partner-tile {
    background-color: #EEE5D8;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.partner-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Swap this <span> for an <img class="partner-logo"> when real logos arrive */
.partner-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0F2038;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    margin: 0;
}

.partner-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* ----- Tablet ----- */
@media (min-width: 768px) {
    .partners-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}

/* ----- Desktop: the 4-up grid from the reference ----- */
@media (min-width: 992px) {
    .partners-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    }
}

/* ----- LCD / large desktop (≥1600px) ----- */
@media (min-width: 1600px) {
    .partners-section {
        padding: 130px 0;
    }

    .partners-heading-block {
        margin-bottom: 70px;
    }

    .partners-grid {
        gap: 40px;
    }

    .partner-tile {
        height: 180px;
        padding: 30px;
    }

    .partner-name {
        font-size: 25px;
        font-weight: 500;
    }
}

/* ----- Laptop (≤1440px) ----- */
@media (max-width: 1440px) {
    .partners-section {
        padding: 100px 0;
    }

    .partner-tile {
        height: 130px;
    }

    .partner-name {
        font-size: 18px;
        font-weight: 500;
    }
}

/* ----- Mobile (≤768px) ----- */
/* Re-declared !important per §5.2 so the ≤1440px block above cannot win */
@media (max-width: 768px) {
    .partners-section {
        padding: 50px 0 !important;
    }

    .partners-heading-block {
        margin-bottom: 30px;
    }

    .partners-grid {
        gap: 15px;
    }

    .partner-tile {
        height: 90px !important;
        padding: 15px;
    }

    .partner-name {
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 1px;
    }
}

/* =============================================
   TERMS / LEGAL PAGE — scoped styles
   Page: terms-of-use.html

   The source screenshot sets this copy in a light-blue serif on a cool
   near-white ground. Per §0.1 the LAYOUT is cloned (centred constrained
   column, subheaded blocks, justified body) but the THEME comes from this
   file: Urbanist, #F5F3ED ground, #0F2038 headings, #1A2B4C body.
   ============================================= */

.terms-section {
    background-color: #F5F3ED;
    padding: 80px 0;
}

.terms-content {
    max-width: 900px;
    margin: 0 auto;
}

.terms-intro {
    font-size: 1.1rem;
    font-weight: 500;
    color: #1A2B4C;
    line-height: 1.7;
    margin: 0 0 40px 0;
}

.terms-block {
    margin-bottom: 36px;
}

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

.terms-subheading {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0F2038;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.4;
    margin: 0 0 14px 0;
}

.terms-text {
    font-size: 1rem;
    font-weight: 400;
    color: #1A2B4C;
    line-height: 1.7;
    margin: 0;
    text-align: justify;
}

/* ----- LCD / large desktop (≥1600px) ----- */
@media (min-width: 1600px) {
    .terms-section {
        padding: 130px 0;
    }

    .terms-content {
        max-width: 1100px;
    }

    .terms-intro {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 55px;
    }

    .terms-block {
        margin-bottom: 48px;
    }

    .terms-subheading {
        font-size: 25px;
        font-weight: 500;
        letter-spacing: 1.5px;
        margin-bottom: 18px;
    }

    .terms-text {
        font-size: 20px;
        font-weight: 400;
    }
}

/* ----- Laptop (≤1440px) ----- */
@media (max-width: 1440px) {
    .terms-section {
        padding: 100px 0;
    }

    .terms-intro {
        font-size: 16px;
        font-weight: 600;
    }

    .terms-subheading {
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 1.5px;
    }

    .terms-text {
        font-size: 16px;
        font-weight: 400;
    }
}

/* ----- Mobile (≤768px) ----- */
/* Re-declared !important per §5.2 so the ≤1440px block cannot win.
   Justification is dropped: it creates rivers in a narrow column. */
@media (max-width: 768px) {
    .terms-section {
        padding: 50px 0 !important;
    }

    .terms-intro {
        font-size: 15px !important;
        margin-bottom: 28px;
    }

    .terms-block {
        margin-bottom: 28px;
    }

    .terms-subheading {
        font-size: 14px !important;
        letter-spacing: 1px;
        margin-bottom: 10px;
    }

    .terms-text {
        font-size: 15px !important;
        line-height: 1.6 !important;
        text-align: left;
    }
}

/* (The Terms-page-only Urbane Medium block that used to sit here has been
   folded into the single @font-face + body rule at the top of this file, so
   every page gets the same stack from one place.) */

/* =============================================
   CONTACT PAGE — map band
   Page: contact.html

   Full-bleed Leaflet map sitting between the hero and the existing
   .contact-section, matching the design source. Leaflet's own controls and
   attribution are left at their defaults — they are part of the library's
   required attribution, not theme decisions.
   ============================================= */

.contact-map-section {
    width: 100%;
    padding: 0;
    margin: 0;
    line-height: 0;          /* kill the inline-block gap under the map */
    background-color: #F5F3ED;
}

.contact-map {
    width: 100%;
    height: 450px;
    z-index: 1;              /* stay under the sticky nav (z-index 1000/1001) */
}

/* Leaflet paints its own UI; only the type is brought into the system font */
.contact-map .leaflet-container {
    font-family: 'Urbane Medium', 'Urbanist', sans-serif;
}

/* ----- LCD / large desktop (≥1600px) ----- */
@media (min-width: 1600px) {
    .contact-map {
        height: 450px;
    }
}

/* ----- Laptop (≤1440px) ----- */
@media (max-width: 1440px) {
    .contact-map {
        height: 350px;
    }
}

/* ----- Mobile (≤768px) ----- */
/* Re-declared !important per §5.2 so the ≤1440px block cannot win */
@media (max-width: 768px) {
    .contact-map {
        height: 340px !important;
    }
}

/* ==========================================================================
   SCROLL REVEAL — subtle fade-up as each element enters the viewport
   ==========================================================================
   Driven by scroll-reveal.js (IntersectionObserver). Nothing else is changed:
   no layout, spacing, type, colour, image or responsive rule is touched, and
   the animations that already exist keep full ownership of their elements
   (see the exclusions at the foot of this block).

   NO-JS SAFETY: the hidden state is gated on `html.js-reveal`, a class that
   scroll-reveal.js adds to <html> the instant it runs. If JavaScript is off,
   or that file 404s, the class never appears, the rules below never match and
   every element renders normally at full opacity. Content can never be left
   invisible by a script that failed to arrive.
   ========================================================================== */

html.js-reveal .scroll-fade-up {
    opacity: 0;
    transform: translateY(50px);
    transition:
        opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.js-reveal .scroll-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger. Put .reveal-stagger on a parent; its children arrive 100ms apart.
   In every place this is used, all direct children carry .scroll-fade-up, so
   :nth-child counting stays in step with the reveal order. */
html.js-reveal .reveal-stagger > .scroll-fade-up:nth-child(2) { transition-delay: 0.10s; }
html.js-reveal .reveal-stagger > .scroll-fade-up:nth-child(3) { transition-delay: 0.20s; }
html.js-reveal .reveal-stagger > .scroll-fade-up:nth-child(4) { transition-delay: 0.30s; }
html.js-reveal .reveal-stagger > .scroll-fade-up:nth-child(5) { transition-delay: 0.40s; }
html.js-reveal .reveal-stagger > .scroll-fade-up:nth-child(6) { transition-delay: 0.50s; }

/* ----- Tablet and below: lighter travel, quicker settle, tighter stagger ---- */
@media (max-width: 991.98px) {
    html.js-reveal .scroll-fade-up {
        transform: translateY(30px);
        transition-duration: 0.7s;
    }

    html.js-reveal .reveal-stagger > .scroll-fade-up:nth-child(2) { transition-delay: 0.07s; }
    html.js-reveal .reveal-stagger > .scroll-fade-up:nth-child(3) { transition-delay: 0.14s; }
    html.js-reveal .reveal-stagger > .scroll-fade-up:nth-child(4) { transition-delay: 0.21s; }
    html.js-reveal .reveal-stagger > .scroll-fade-up:nth-child(5) { transition-delay: 0.28s; }
    html.js-reveal .reveal-stagger > .scroll-fade-up:nth-child(6) { transition-delay: 0.35s; }
}

@media (max-width: 768px) {
    html.js-reveal .scroll-fade-up {
        transform: translateY(20px);
        transition-duration: 0.6s;
    }

    html.js-reveal .reveal-stagger > .scroll-fade-up:nth-child(2) { transition-delay: 0.05s; }
    html.js-reveal .reveal-stagger > .scroll-fade-up:nth-child(3) { transition-delay: 0.10s; }
    html.js-reveal .reveal-stagger > .scroll-fade-up:nth-child(4) { transition-delay: 0.15s; }
    html.js-reveal .reveal-stagger > .scroll-fade-up:nth-child(5) { transition-delay: 0.20s; }
    html.js-reveal .reveal-stagger > .scroll-fade-up:nth-child(6) { transition-delay: 0.25s; }
}

/* ----- Featured Service section: inner elements are left alone -----
   Its own elements keep full ownership of their choreography, so no
   .scroll-fade-up is ever put on any of these:
     .featured-service-step   GSAP entrance fade below 992px, sticky image
                              crossfade above it (featured-service-scroll.js)
     .featured-content        dimmed to 0.55 while its step is not the active
                              one, back to 1 when it is (see ~line 2728)
     .featured-service-media  position: sticky
   Layering a reveal on the copy would fight that 0.55/1 rule, which wins on
   specificity, leaving the text sliding up without ever fading in.

   The section WRAPPER is a different matter and does carry .scroll-fade-up on
   services.html, where it is the only main section on the page. That was
   verified rather than assumed: with the class present from first paint, the
   sticky media pins at an identical viewport offset to the unmodified page
   ([950, 550, 150, 150, 150, 150, 150] at 1440px) and the step dimming still
   reads [0.55, 0.55, 1, 0.55, 0.55], so neither ScrollTrigger nor the sticky
   is disturbed. On index.html the wrapper is deliberately left untagged --
   that page has plenty of other sections carrying the reveal. */

/* ----- Reduced motion: no movement, no fade, nothing hidden ----- */
@media (prefers-reduced-motion: reduce) {
    html.js-reveal .scroll-fade-up,
    html.js-reveal .scroll-fade-up.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   CONTACT FORM — spam trap + status message
   ==========================================================================
   Added for the AJAX contact form (contact-form.js / send-enquiry.php).
   Nothing here alters the existing form layout: the trap is removed from the
   visual flow entirely, and the status line occupies no space until a message
   is actually shown.
   ========================================================================== */

/* Spam trap. Deliberately NOT display:none - some bots skip those - but taken
   out of the layout, off-screen, unfocusable and invisible to screen readers.
   A real visitor can neither see it nor tab into it. */
.form-hp {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    pointer-events: none;
}

/* Status message. `hidden` on the element keeps it out of the flow until the
   script has something to say, so the form's spacing is untouched at rest. */
.form-status {
    margin-top: 22px;
    padding: 14px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.3px;
    border-left: 3px solid currentColor;
    background-color: rgba(255, 255, 255, 0.55);
}

.form-status[hidden] {
    display: none;
}

/* Teal is the existing action colour used by .btn-send and .btn-read-more. */
.form-status.is-success {
    color: #005662;
}

/* The one colour added by this block. An error state needs to read as an error
   and no red exists in the palette; it is scoped to this element only. */
.form-status.is-error {
    color: #8c2f26;
}

/* Matches the button's own disabled affordance while the request is in flight. */
.btn-send[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .form-status {
        margin-top: 18px;
        padding: 12px 15px;
        font-size: 0.8rem;
    }
}

/* =====================================================================
   TEMPORARY — CLIENT REQUEST: HIDDEN NAVIGATION
   ---------------------------------------------------------------------
   Two navigation blocks are hidden at the client's request. Nothing has
   been deleted: the markup for both is still present, unchanged, on
   every page. Restoring them is a matter of deleting this one block —
   there is no HTML or JS to unpick.

   1. .hero-nav — the main header navigation.
      .hero-nav.open is listed alongside it because the mobile styles
      (§ ~1375) re-show the panel with `.hero-nav.open { display: flex
      !important }`; that selector is more specific than a bare
      `.hero-nav`, so it has to be matched to be beaten.

      .mobile-menu-toggle (the hamburger) goes with it: its only job is
      to open .hero-nav, so left visible it would be a button that does
      nothing.

      NOT hidden: .hero-nav-placeholder. Despite the name it compensates
      for .hero-header-top going `position: fixed` on scroll, not for
      the nav — hiding it would make the page jump when the logo bar
      pins.

   2. .footer-pages-col — the footer "Pages" column. That hook class was
      added to the column's existing wrapper <div> on every page; the
      heading and all seven links inside it are untouched.
   ===================================================================== */

.hero-nav,
.hero-nav.open,
.mobile-menu-toggle,
.footer-pages-col {
    display: none !important;
}

/* Header bottom padding on mobile — a direct consequence of hiding .hero-nav.

   `@media (max-width: 1440px)` (§ ~940) zeroes the bar's bottom padding with
   `padding-bottom: 0 !important`, and the ≥1600px block does the same. That
   was right while the nav row sat immediately underneath supplying the visual
   gap; with the nav hidden the logo sits flush on the bar's bottom edge
   (measured on a 402px viewport: 12px above the logo, 0px below).

   Each rule below pairs a bottom padding with whatever padding-top is already
   in force at that width, minus 2px. The 2px offsets unequal transparent
   margins baked into the logo PNG — 2.26% above the artwork and 4.01% below,
   which is 2.3px and 4.0px at the 100px rendered height. Compensating makes
   the *visible* artwork centre rather than the image box.

   !important is required to beat the !important these are correcting. Scoped
   to touch devices and mobile widths, matching the hero-photo fix (§ ~105);
   mouse-driven desktop is deliberately left exactly as it is.

   Restoring .hero-nav should mean deleting this whole block, which puts the
   original flush-to-nav spacing back. */

/* Phones and portrait tablets — padding-top is 12px here (§ ~1330). */
@media (max-width: 768px) {
    .hero-header-top {
        padding-bottom: 10px !important;
    }
}

/* Touch tablets above the phone breakpoint — padding-top is the base 20px. */
@media (min-width: 769px) and (max-width: 991px),
       (min-width: 769px) and (hover: none) and (pointer: coarse) {
    .hero-header-top {
        padding-bottom: 18px !important;
    }
}

/* =====================================================================
   HOMEPAGE BODY COPY — MOBILE ONLY
   ---------------------------------------------------------------------
   The About section's `.about-paragraph` is the reference the client
   signed off on. On mobile it measures 16px, with line-height 1.6 at
   <=576px and 1.7 above that.

   Every other body paragraph on the homepage was sized independently and
   came out smaller. At a 402px viewport, before this block:

       Services   .featured-description        12px
       Projects   .projects-description        12px
       Projects   .project-card-description    13.6px
       Specialisms .specialisms-description    13px
       Hero       .hero-subheading             14px

   Those five are the complete set — a sweep of every text-bearing
   element on the homepage found nothing else below 16px that is body
   copy. What remains smaller is button labels and the footer; see the
   note at the end of this block.

   Each of these classes is sized by six or more competing rules spread
   through this file (`.featured-description` alone has nine, several
   already !important), so the size is set once here rather than by
   unpicking each rule in place. !important is needed to win against the
   !important declarations it supersedes.

   SCOPE — two deliberate limits:

     1. Mobile only. Capped at 991px so every desktop width keeps the
        sizes it has today, including the 20px step-up at >=1600px. This
        block adds nothing above 991px.

     2. Homepage only, via `.mep-home` on index.html's <body>.
        `.featured-description` is shared with services.html and
        `.specialisms-description` with specialisms.html; neither page is
        in scope. (Note for future work: do NOT reuse `body.home-page`
        for this — that class already exists as a hook for the hero
        heading rules at § ~399 and would entangle the two concerns.)

   NOT changed, on purpose:
     - Headings. .about-heading, .featured-title, .projects-title,
       .project-card-title and .specialisms-title keep their sizes.
     - Font family, weight and letter-spacing. Only size and the matching
       line-height are set, so .project-card-description stays at weight
       400 while the other four stay 600.
     - The footer (.footer-text 14px, copyright 13px). It renders on all
       seven pages, so sizing it up here alone would make the homepage
       footer inconsistent with the rest of the site.
     - Button labels (.btn-explore and .service-label at 8px,
       .btn-read-more 9px, .btn-subscribe 9.6px, .btn-find-out-more 10px,
       .btn-view-case-studies and .btn-send 12px). These are UI chrome
       rather than body copy, and resizing them changes button geometry.
   ===================================================================== */

@media (max-width: 991px) {
    .mep-home .hero-subheading,
    .mep-home .featured-description,
    .mep-home .projects-description,
    .mep-home .project-card-description,
    .mep-home .specialisms-description {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }
}

/* Small phones: the reference tightens to 1.6 here, so this follows it. */
@media (max-width: 576px) {
    .mep-home .hero-subheading,
    .mep-home .featured-description,
    .mep-home .projects-description,
    .mep-home .project-card-description,
    .mep-home .specialisms-description {
        line-height: 1.6 !important;
    }
}
/* Specialisms card height — the spacing adjustment the larger body text
   requires.

   `.specialisms-card` is pinned to `height: 300px !important` at § ~1110
   (inside the <=1440px block) and is a `display: flex; flex-direction:
   column; justify-content: center` box. When its content exceeds that
   height the overflow is centred, so it escapes the card's background at
   BOTH ends and the "Read More" button is squeezed from 30px tall to
   16px — that is the clipped button reported on mobile.

   The longest of the five slides already overflowed before this change
   (by 16-94px at <=520px). At 16px it overflows at every mobile width.
   Measured natural height of the tallest slide, per band:

       320px 546    375px 469    480px 418    576px 341
       360px 495    402px 469    520px 392    640px 362
                    440px 443                 768px 335
                                              991px 330

   Fixed heights rather than `height: auto`, deliberately. Every
   `.specialisms-item` is absolutely positioned except the active one
   (`position: relative`, § ~3045), so the carousel takes its height from
   whichever slide is showing — and the carousel auto-advances on a 5s
   timer (index.html § carousel script). With `auto` the section would
   jump by up to 154px every five seconds. A fixed height per band keeps
   all five slides uniform, exactly as they are today.

   Capped at 991px: desktop keeps the 300px card it has now. If the slide
   copy is ever lengthened, re-measure these four numbers. */

@media (max-width: 374px) {
    .mep-home .specialisms-card {
        height: 550px !important;
    }
}

@media (min-width: 375px) and (max-width: 479px) {
    .mep-home .specialisms-card {
        height: 475px !important;
    }
}

@media (min-width: 480px) and (max-width: 575px) {
    .mep-home .specialisms-card {
        height: 425px !important;
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    .mep-home .specialisms-card {
        height: 370px !important;
    }
}

/* =====================================================================
   OS-AUTOLINKED CONTACT DETAILS (iOS Safari / Android Chrome)
   ---------------------------------------------------------------------
   The phone number is plain text in the markup — `<p class="footer-text">
   02089045865</p>` and friends. Mobile browsers detect that pattern and
   wrap it in their own `<a href="tel:...">`, which then picks up the UA
   default link styling: bright blue and underlined. On mobile that made
   the number in the contact section and the footer read as a stray blue
   link against the site palette.

   Three places carry the number, each on a different background:

       .hero-utility-right   rgba(255,255,255,0.9)  header / sticky bar
       .contact-detail-value #0b2b3a                contact section
       .footer-text          #c5d1e0                footer

   `color: inherit` is used rather than a fixed value so each injected
   link simply takes the colour of the <p> it was inserted into, and all
   three stay correct without naming any of them. `-webkit-text-fill-color`
   is set alongside it because iOS paints the link text through that
   property, which `color` alone does not override.

   Deliberately NOT scoped to a media query. Desktop browsers do not
   autolink phone numbers, so there is nothing for this to match there —
   whereas a `max-width` cap would leave landscape tablets showing blue.

   Deliberately NOT solved with `<meta name="format-detection"
   content="telephone=no">`. That would stop the detection altogether and
   lose tap-to-call, which is worth keeping on a phone. This keeps the
   number tappable and only corrects how it looks.

   NOTE: there are no intentional `tel:`/`mailto:` links in the markup, so
   this can only ever match a link the browser injected. If a real, styled
   contact link is ever added, exclude it here rather than dropping this. */

a[href^="tel:"],
a[href^="mailto:"] {
    color: inherit !important;
    -webkit-text-fill-color: currentColor;
    text-decoration: none !important;
}

/* The injected link is not a site link, so it should not react like one. */
a[href^="tel:"]:hover,
a[href^="tel:"]:focus,
a[href^="tel:"]:active,
a[href^="mailto:"]:hover,
a[href^="mailto:"]:focus,
a[href^="mailto:"]:active {
    color: inherit !important;
    -webkit-text-fill-color: currentColor;
    text-decoration: none !important;
}