/* Global styles */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    line-height: 1.6;
    color: #333;
    background-color: #fafafa;
    overflow-x: hidden; /* prevent accidental horizontal scroll on mobile */
}

a {
    color: #0066cc;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #004080;
}



/* Accessibility helpers */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #ffffff;
    color: #004080;
    padding: 0.75rem 1rem;
    border: 2px solid #004080;
    border-radius: 0.5rem;
    z-index: 2000;
}
.skip-link:focus {
    left: 1rem;
    top: 1rem;
}

:focus-visible {
    outline: 3px solid #0066cc;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* Header and navigation */

header {
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #004080;
}

/* When the logo is rendered as an image, ensure it scales gracefully
   and is large enough to be clearly visible. Increase the default
   height from 40px to 60px based on user feedback. */
.logo img {
    height: 60px;
    width: auto;
}

.nav-links ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    position: relative;
}

/* Dropdown menu styles */
.nav-item {
    position: relative;
}

.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    flex-direction: column;
    background-color: #ffffff;
    min-width: 200px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.nav-item:hover .dropdown {
    display: flex;
}

.dropdown a {
    padding: 0.75rem 1rem;
    color: #333;
    white-space: nowrap;
}

.dropdown a:hover {
    background-color: #f0f4f8;
    color: #004080;
}

.nav-links a {
    font-weight: 500;
    color: #333;
}

/* Style the arrow icon in the Projects navigation link to match the site's primary blue colour */
.dropdown-arrow {
    color: #0066cc;
    font-size: 0.8rem;
    margin-left: 0.2rem;
}

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

/* Active navigation link */
.nav-links a.active {
    color: #0066cc;
    font-weight: bold;
}

/* --- Responsive navigation --- */
/* Hamburger menu toggle button (hidden on desktop) */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: #0066cc;
    cursor: pointer;
    padding: 0.25rem;
}

/* Media query for screens up to 768px wide */
@media (max-width: 768px) {
    /* Adjust the container to space elements evenly */
    .nav-bar {
        justify-content: space-between;
    }
    /* Hide the navigation links by default and stack them when activated */
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        width: 100%;
        background-color: #ffffff;
        flex-direction: column;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        z-index: 1000;
    }
    .nav-links.active {
        display: flex;
    }
    .nav-links ul {
        flex-direction: column;
        gap: 0;
    }
    .nav-links li {
        padding: 0.75rem 1rem;
        border-top: 1px solid #f0f0f0;
    }
    .dropdown {
        position: static;
        box-shadow: none;
        background-color: #f9f9f9;
        width: 100%;
    }
    .dropdown a {
        padding-left: 1.5rem;
    }
    .nav-item:hover .dropdown {
        display: none;
    }

    /* Allow tapping "Projects" to expand/collapse its dropdown on mobile */
    .nav-item.open .dropdown {
        display: flex;
    }
    /* Show the hamburger button on mobile */
    .menu-toggle {
        display: block;
    }
}

/* Hero section */
.hero {
    /* Gradient fallback for hero background when no image is provided */
    background: linear-gradient(135deg, #0066cc, #004080);
    color: #ffffff;
    text-align: center;
    padding: 6rem 1rem;
    position: relative;
}

.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 0;
}

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

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Additional styling for the tagline text in the hero section */
.hero-tagline {
    font-size: 1rem;
    margin-top: 0;
    margin-bottom: 2rem;
    font-style: italic;
    display: block;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: #e0e6f1;
}

/* Emphasize the first hero tagline line ("30+ years of experience") */
.hero-tagline-primary {
    font-size: 1.35rem;
    font-style: normal;
    font-weight: 700;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Tagline used in service cards to emphasize key messages */
.service-tagline {
    font-size: 0.9rem;
    font-style: italic;
    color: #666;
    margin: 0.5rem 0 0.5rem;
}

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: #0066cc;
    color: #ffffff;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

.btn:hover {
    background-color: #004080;
}

/* Sections */
.section {
    padding: 3rem 1rem;
    background-color: #ffffff;
}

.section.alt {
    background-color: #f0f4f8;
}

.section h2 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
    color: #004080;
}

/* Service cards */
/* Service grid updated to display cards in a single row on wider screens */
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

/* Responsive adjustment: allow cards to wrap on smaller screens */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

.service-card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    text-align: center;
    transition: transform 0.2s ease;
    /* Use flex layout so that the button can stick to the bottom of each card */
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    transform: translateY(-5px);
}

/* Ensure the call‑to‑action button inside service cards is spaced properly */
.service-card .btn {
    /* Push the button to the bottom by using auto top margin when using flex layout */
    margin-top: auto;
    display: inline-block;
}

.service-card img {
    /* Service card images span the full width of the card */
    width: 100%;
    height: 180px;
    object-fit: cover;
    margin-bottom: 1rem;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.service-card h3 {
    margin-bottom: 0.5rem;
    color: #004080;
    font-size: 1.3rem;
}

.service-card p {
    font-size: 0.95rem;
    color: #555;
}

/* Testimonials */
.testimonials {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.testimonial {
    background-color: #ffffff;
    border-left: 5px solid #0066cc;
    padding: 1.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.testimonial p {
    font-style: italic;
    margin-bottom: 1rem;
}

.testimonial span {
    font-weight: bold;
    color: #004080;
}

/* Markets list styling */
.markets-list {
    margin: 1rem 0;
    padding-left: 1.5rem;
    list-style-type: disc;
    color: #333;
    line-height: 1.5;
    text-align: left;
}

.markets-list li {
    margin-bottom: 0.5rem;
}

/* Service detail image styling */
.service-detail-img {
    width: 100%;
    max-height: 350px;
    object-fit: cover;
    margin-bottom: 1rem;
    border-radius: 8px;
}

/* Service detail list styling */
.service-detail-list {
    margin: 0.5rem 0 1rem 1.5rem;
    list-style-type: disc;
    line-height: 1.5;
    color: #333;
    text-align: left;
}

/* Grid for projects cards on the ongoing projects page. Adapts to available space and wraps cards. */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* Ensure each project card follows a consistent column layout with a
   top image and body text. The image is constrained to a fixed
   height and covers the full card width. */
.projects-grid .service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.projects-grid .service-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

/* Ensure consistent vertical spacing by giving all project card headings a minimum height.
   This aligns the subsequent text (location, client, etc.) across cards regardless of
   varying heading lengths. */
.projects-grid .service-card h3 {
    /* Increase minimum height to align the "Scope" section across all cards */
    /* Adjust the minimum height so long titles have sufficient space but the
       gap between the heading and scope is not excessively large. */
    min-height: 140px;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

/* Ensure project card text is left aligned for consistent appearance */
.projects-grid .service-card p,
.projects-grid .service-card ul,
.projects-grid .service-card li {
    text-align: left;
}

/* Ensure lists inside cards are properly indented and styled */
.service-card ul {
    margin: 0.5rem 0 1rem 1.25rem;
    list-style-type: disc;
    text-align: left;
    color: #555;
    font-size: 0.9rem;
}

/* Side image used in service detail pages (floats right and scales down) */
.service-side-img {
    float: right;
    /* Make the side image larger to fill more horizontal space */
    /* Reduce width so the floating image doesn't extend into the footer */
    width: 40%;
    max-width: 350px;
    /* Limit the height so all side images appear roughly the same size across pages */
    max-height: 350px;
    margin-left: 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    object-fit: cover;
}

/* Contact page */
.contact-info {
    margin-bottom: 2rem;
}

.contact-info div {
    margin-bottom: 1rem;
}

.contact-form {
    max-width: 600px;
    margin: 0 auto;
}

.contact-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.contact-form button {
    background-color: #0066cc;
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

.contact-form button:hover {
    background-color: #004080;
}

/* Footer */
footer {
    background-color: #004080;
    color: #ffffff;
    padding: 2rem 1rem;
    text-align: center;
}

footer p {
    margin-bottom: 0.5rem;
}

footer .social-links a {
    margin: 0 0.5rem;
    color: #ffffff;
    font-size: 1.2rem;
}

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

/* Responsive helpers */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2rem;
    }
    .hero p {
        font-size: 1rem;
    }
}


/* --- Mobile layout safeguards --- */
@media (max-width: 480px) {
    /* Projects cards: ensure a true single column on small phones (avoid min-width overflow) */
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    /* Remove heading min-height on small screens to avoid excessive empty space */
    .projects-grid .service-card h3 {
        min-height: auto;
    }
}

/* Side images should not float on mobile; they can cause layout overflow and awkward wrapping */
@media (max-width: 768px) {
    .service-side-img {
        float: none;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }
}



/* Anti-spam honeypot */
.honeypot{display:none !important;}