/* =========================================================
   South Harbour Shipping Pte Ltd — Global Stylesheet
   Foundation layer only: variables, typography, spacing,
   buttons, header, footer, responsive breakpoints.
   No page-specific styling belongs in this file.
   Reference: docs/DESIGN-SYSTEM.md
   ========================================================= */

/* ---------------------------------------------------------
   1. CSS VARIABLES
   --------------------------------------------------------- */
:root {
    /* Primary Palette */
    --sh-navy-900: #0A1B2E;
    --sh-navy-700: #10304F;
    --sh-blue-500: #1E6FB8;
    --sh-blue-400: #3E8FD6;

    /* Neutral Palette */
    --sh-white: #FFFFFF;
    --sh-grey-50: #F5F7FA;
    --sh-grey-200: #E2E6EB;
    --sh-grey-500: #6B7686;
    --sh-grey-800: #232B33;

    /* Accent Palette */
    --sh-amber-500: #E8A33D;
    --sh-teal-500: #1D9A8D;

    /* Semantic Colors */
    --sh-success: #1D9A8D;
    --sh-warning: #E8A33D;
    --sh-error: #C64A3C;
    --sh-info: #3E8FD6;

    /* Typography */
    --sh-font-heading: "Poppins", "Segoe UI", Arial, sans-serif;
    --sh-font-body: "Inter", "Segoe UI", Arial, sans-serif;

    /* Spacing Scale (8px base unit) */
    --sh-space-1: 4px;
    --sh-space-2: 8px;
    --sh-space-3: 16px;
    --sh-space-4: 24px;
    --sh-space-5: 32px;
    --sh-space-6: 48px;
    --sh-space-7: 64px;
    --sh-space-8: 96px;

    /* Layout */
    --sh-container-max: 1320px;
    --sh-header-height: 88px;
    --sh-header-height-condensed: 64px;
    --sh-radius-sm: 6px;
    --sh-radius-md: 8px;
    --sh-radius-lg: 12px;

    /* Motion */
    --sh-transition-fast: 150ms ease;
    --sh-transition-base: 200ms ease;
}

/* ---------------------------------------------------------
   2. BASE / RESET
   --------------------------------------------------------- */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--sh-font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--sh-grey-800);
    background-color: var(--sh-white);
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: var(--sh-blue-500);
    transition: color var(--sh-transition-fast);
}

a:hover,
a:focus {
    color: var(--sh-navy-700);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ---------------------------------------------------------
   3. TYPOGRAPHY FOUNDATION
   --------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--sh-font-heading);
    color: var(--sh-navy-900);
    font-weight: 700;
    line-height: 1.25;
    margin-top: 0;
    margin-bottom: var(--sh-space-3);
}

h1 { font-size: 40px; font-weight: 700; line-height: 1.2; }
h2 { font-size: 32px; font-weight: 600; }
h3 { font-size: 24px; font-weight: 600; line-height: 1.3; }
h4 { font-size: 20px; font-weight: 600; line-height: 1.35; }

p {
    margin-top: 0;
    margin-bottom: var(--sh-space-3);
    max-width: 75ch;
}

.text-small {
    font-size: 14px;
    line-height: 1.5;
}

.text-micro {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Responsive Type Scaling */
@media (max-width: 991.98px) {
    h1 { font-size: 34px; }
    h2 { font-size: 28px; }
    h3 { font-size: 22px; }
}

@media (max-width: 767.98px) {
    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
}

/* Accessibility: skip link */
.skip-link {
    position: absolute;
    top: -48px;
    left: 0;
    background: var(--sh-navy-900);
    color: var(--sh-white);
    padding: var(--sh-space-2) var(--sh-space-4);
    z-index: 2000;
    transition: top var(--sh-transition-base);
}

.skip-link:focus {
    top: 0;
    color: var(--sh-white);
}

/* ---------------------------------------------------------
   4. LAYOUT CONTAINER OVERRIDE
   --------------------------------------------------------- */
@media (min-width: 1400px) {
    .container {
        max-width: var(--sh-container-max);
    }
}

/* ---------------------------------------------------------
   5. BUTTONS
   --------------------------------------------------------- */
.btn-primary-cta,
.btn-secondary-cta,
.btn-ghost-cta {
    display: inline-block;
    font-family: var(--sh-font-body);
    font-weight: 600;
    font-size: 16px;
    border-radius: var(--sh-radius-sm);
    padding: 14px 32px;
    text-align: center;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color var(--sh-transition-base),
                color var(--sh-transition-base),
                transform var(--sh-transition-base),
                box-shadow var(--sh-transition-base);
}

/* Primary Button */
.btn-primary-cta {
    background-color: var(--sh-blue-500);
    color: var(--sh-white);
    border-color: var(--sh-blue-500);
}

.btn-primary-cta:hover,
.btn-primary-cta:focus {
    background-color: var(--sh-navy-700);
    border-color: var(--sh-navy-700);
    color: var(--sh-white);
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(10, 27, 46, 0.16);
}

.btn-primary-cta:active {
    background-color: var(--sh-navy-900);
    border-color: var(--sh-navy-900);
}

/* Secondary / Outline Button */
.btn-secondary-cta {
    background-color: transparent;
    color: var(--sh-blue-500);
    border-color: var(--sh-blue-500);
}

.btn-secondary-cta:hover,
.btn-secondary-cta:focus {
    background-color: var(--sh-blue-500);
    color: var(--sh-white);
}

/* Ghost / Text Button */
.btn-ghost-cta {
    background-color: transparent;
    color: var(--sh-blue-500);
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

.btn-ghost-cta:hover,
.btn-ghost-cta:focus {
    color: var(--sh-navy-700);
    text-decoration: underline;
}

/* Small button size modifier */
.btn-sm-cta {
    padding: 10px 18px;
    font-size: 14px;
}

/* Button sizing for hero-level CTAs */
.btn-lg-cta {
    padding: 16px 32px;
    font-size: 16px;
}

/* ---------------------------------------------------------
   6. HEADER
   --------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--sh-white);
    box-shadow: 0 1px 0 rgba(10, 27, 46, 0.06);
    z-index: 1000;
    transition: box-shadow var(--sh-transition-base), padding var(--sh-transition-base);
}

.site-header.is-condensed {
    box-shadow: 0 8px 28px rgba(10, 27, 46, 0.10);
}

.site-header .navbar {
    padding-top: var(--sh-space-3);
    padding-bottom: var(--sh-space-3);
    transition: padding var(--sh-transition-base);
}

.site-header.is-condensed .navbar {
    padding-top: var(--sh-space-2);
    padding-bottom: var(--sh-space-2);
}

/* Official Logo
   Sizing/alignment only — colors are untouched pending the
   dedicated Branding Phase (see Task 8 notes). Generously sized so
   the mark reads clearly as the anchor of the header, with a fine
   divider separating it from the navigation for a more considered,
   premium layout. */
.site-logo {
    display: inline-flex;
    align-items: center;
    padding-right: var(--sh-space-5);
    margin-right: var(--sh-space-5);
    border-right: 1px solid var(--sh-grey-200);
}

.site-logo__image {
    display: block;
    height: 116px;
    width: auto;
    max-width: 100%;
    /* The rendered logo is intentionally taller than the header
       bar itself: negative vertical margins pull its layout box
       back down to the same footprint the header already had, so
       the header's own height does not grow — only the logo
       visually overflows it slightly, top and bottom. */
    margin: -14px 0;
    transition: height var(--sh-transition-base), margin var(--sh-transition-base);
}

/* Condense the logo slightly alongside the condensed sticky header */
.site-header.is-condensed .site-logo__image {
    height: 88px;
    margin: -6px 0;
}

@media (max-width: 991.98px) {
    .site-logo {
        border-right: none;
        padding-right: 0;
        margin-right: 0;
    }
}

@media (max-width: 575.98px) {
    .site-logo__image {
        height: 76px;
        margin: -6px 0;
    }

    .site-header.is-condensed .site-logo__image {
        height: 62px;
        margin: -2px 0;
    }
}

/* Navigation links — premium style: refined letterforms, generous
   letter-spacing, and an understated gold-accented underline that
   grows from the center. Deliberately restrained (no background
   pill, no heavy hover states) so the interaction reads as
   considered rather than "app-like". */
.site-header .nav-link {
    font-family: var(--sh-font-body);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0.01em;
    color: var(--sh-grey-800);
    padding: var(--sh-space-2) var(--sh-space-4);
    margin: 0 var(--sh-space-2);
    position: relative;
    transition: color var(--sh-transition-base);
    display: inline-flex;
    align-items: center;
}

.site-header .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 6px;
    height: 2px;
    background-color: var(--sh-amber-500);
    transition: left 260ms ease, right 260ms ease;
}

.site-header .nav-link:hover::after,
.site-header .nav-link.active::after {
    left: var(--sh-space-3);
    right: var(--sh-space-3);
}

.site-header .nav-link.active,
.site-header .nav-link:hover,
.site-header .nav-link:focus {
    color: var(--sh-navy-900);
}

/* "Request a Quote" — subtle gradient + lift on the header CTA for
   an extra layer of premium polish beyond the base button style. */
.site-header .btn-primary-cta {
    background-image: linear-gradient(135deg, var(--sh-blue-500), var(--sh-navy-700));
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(10, 27, 46, 0.14);
}

.site-header .btn-primary-cta:hover,
.site-header .btn-primary-cta:focus {
    background-image: linear-gradient(135deg, var(--sh-navy-700), var(--sh-navy-900));
    box-shadow: 0 10px 26px rgba(10, 27, 46, 0.2);
}

/* Mobile navigation */
@media (max-width: 991.98px) {
    .site-header .navbar-collapse {
        background-color: var(--sh-white);
        margin-top: var(--sh-space-3);
        padding: var(--sh-space-4);
        border-top: 1px solid var(--sh-grey-200);
    }

    .site-header .nav-item {
        border-bottom: 1px solid var(--sh-grey-200);
    }

    .site-header .nav-item:last-child {
        border-bottom: none;
    }

    .site-header .nav-link {
        padding: var(--sh-space-3) 0;
    }

    .site-header .btn-primary-cta {
        display: block;
        margin-top: var(--sh-space-3);
        text-align: center;
    }
}

/* ---------------------------------------------------------
   7. FOOTER
   --------------------------------------------------------- */
.site-footer {
    background-color: var(--sh-navy-900);
    color: var(--sh-grey-200);
    padding-top: var(--sh-space-8);
    padding-bottom: var(--sh-space-5);
}

.site-footer__columns {
    padding-bottom: var(--sh-space-6);
    align-items: flex-start;
}

.site-footer__col {
    margin-bottom: var(--sh-space-5);
}

.site-footer__heading {
    color: var(--sh-white);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* Fixed height + flex alignment keeps every column's first line
       of content (list items, contact rows, the company blurb)
       starting at the same baseline, regardless of how tall each
       heading's own line is. */
    min-height: 24px;
    display: flex;
    align-items: center;
    margin-bottom: var(--sh-space-4);
}

.site-footer__logo {
    margin-bottom: var(--sh-space-3);
}

.site-footer__logo-image {
    height: 64px;
}

@media (max-width: 575.98px) {
    .site-footer__logo-image {
        height: 52px;
    }
}

.site-footer__placeholder-text {
    color: var(--sh-grey-500);
    font-size: 14px;
    font-style: italic;
    max-width: none;
}

/* Real footer copy (replaces the italic placeholder style above
   once actual company content is supplied). */
.site-footer__text {
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
    line-height: 1.7;
    max-width: 280px;
}

.site-footer__list,
.site-footer__contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__list li,
.site-footer__contact-list li {
    margin-bottom: var(--sh-space-2);
}

.site-footer__list a {
    color: var(--sh-grey-200);
    font-size: 15px;
}

.site-footer__list a:hover,
.site-footer__list a:focus {
    color: var(--sh-blue-400);
}

.site-footer__contact-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--sh-space-2);
    color: var(--sh-grey-200);
    font-size: 15px;
}

.site-footer__contact-list i {
    color: var(--sh-blue-400);
    width: 18px;
    margin-top: 3px;
}

.site-footer__social {
    display: flex;
    gap: var(--sh-space-3);
    margin-top: var(--sh-space-4);
}

.site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--sh-navy-700);
    color: var(--sh-white);
    transition: background-color var(--sh-transition-base);
}

.site-footer__social a:hover,
.site-footer__social a:focus {
    background-color: var(--sh-blue-500);
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--sh-space-3);
    padding-top: var(--sh-space-4);
    border-top: 1px solid var(--sh-navy-700);
}

.site-footer__copyright {
    font-size: 14px;
    color: var(--sh-grey-500);
    margin: 0;
}

.site-footer__credit {
    margin-left: var(--sh-space-2);
    padding-left: var(--sh-space-2);
    border-left: 1px solid var(--sh-navy-700);
}

@media (min-width: 768px) {
    .site-footer__bottom {
        flex-wrap: nowrap;
    }

    .site-footer__copyright {
        white-space: nowrap;
    }
}

.site-footer__credit a {
    color: var(--sh-grey-500);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--sh-transition-fast);
}

.site-footer__credit a:hover {
    color: var(--sh-white);
}

.site-footer__legal-links {
    list-style: none;
    display: flex;
    gap: var(--sh-space-4);
    margin: 0;
    padding: 0;
}

.site-footer__legal-links a {
    color: var(--sh-grey-500);
    font-size: 14px;
}

.site-footer__legal-links a:hover,
.site-footer__legal-links a:focus {
    color: var(--sh-blue-400);
}

@media (max-width: 767.98px) {
    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------------------------------------------------------
   8. BACK TO TOP BUTTON
   --------------------------------------------------------- */
.back-to-top {
    position: fixed;
    right: var(--sh-space-4);
    bottom: var(--sh-space-4);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--sh-blue-500);
    color: var(--sh-white);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 8px 24px rgba(10, 27, 46, 0.16);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--sh-transition-base),
                visibility var(--sh-transition-base),
                transform var(--sh-transition-base),
                background-color var(--sh-transition-base);
    z-index: 999;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus {
    background-color: var(--sh-navy-700);
    color: var(--sh-white);
}

/* ---------------------------------------------------------
   8b. WHATSAPP FLOATING BUTTON
   --------------------------------------------------------- */
.whatsapp-float {
    position: fixed;
    left: var(--sh-space-4);
    bottom: var(--sh-space-4);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #25D366;
    color: var(--sh-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 8px 24px rgba(10, 27, 46, 0.24);
    z-index: 999;
    transition: transform var(--sh-transition-fast),
                background-color var(--sh-transition-fast),
                box-shadow var(--sh-transition-fast);
}

.whatsapp-float:hover,
.whatsapp-float:focus {
    background-color: #1EBE57;
    color: var(--sh-white);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(10, 27, 46, 0.3);
}

.whatsapp-float i {
    line-height: 1;
}

@media (max-width: 575.98px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        font-size: 24px;
        left: var(--sh-space-3);
        bottom: var(--sh-space-3);
    }
}

/* ---------------------------------------------------------
   9. HERO SECTION
   Reference: docs/DESIGN-SYSTEM.md, docs/UI-UX-SPECIFICATION.md,
   docs/HOMEPAGE-BLUEPRINT.md (Section 1 — Hero Banner)
   --------------------------------------------------------- */
.hero {
    --hero-overlay-opacity: 0.4;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 82vh;
    overflow: hidden;
    background-color: var(--sh-navy-900);
    isolation: isolate;
}

/* Background Layer */
.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero__bg-image,
.hero__bg-video,
.hero__bg-youtube {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__bg-image {
    background-color: var(--sh-navy-900);
}

/* True "cover" sizing for the YouTube iframe. YouTube's player
   letterboxes its video at the iframe's own aspect ratio rather
   than cropping to fill it, so width:100% / height:100% alone
   (equal to the container, i.e. no oversizing at all) is not
   enough — the iframe box itself must be deliberately oversized
   along whichever axis is the tighter fit, based on the video's
   16:9 aspect ratio, then centered and clipped by the hero's own
   overflow:hidden. A small extra scale factor is layered on top
   as a safety margin for source footage that isn't exactly 16:9. */
.hero__bg-youtube iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw; /* 16 / 9 */
    min-height: 100vh;
    min-width: 177.78vh; /* 16 / 9 */
    transform: translate(-50%, -50%) scale(1.16);
    pointer-events: none;
}

/* Overlay */
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: var(--sh-navy-900);
    opacity: var(--hero-overlay-opacity);
}

/* Content Container */
.hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    color: var(--sh-white);
    text-align: center;
    padding-top: var(--sh-space-8);
    padding-bottom: var(--sh-space-8);
}

.hero__heading {
    color: var(--sh-white);
    font-size: 56px;
    font-weight: 700;
    line-height: 1.1;
    max-width: 900px;
    margin: 0 auto var(--sh-space-4);
}

.hero__subheading {
    color: var(--sh-white);
    font-size: 18px;
    line-height: 1.6;
    max-width: 640px;
    margin: 0 auto var(--sh-space-6);
    opacity: 0.92;
}

/* CTA Container */
.hero__cta-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sh-space-4);
    flex-wrap: wrap;
}

/* Secondary CTA on a dark (navy) background uses a white outline
   variant — shared by the Hero and the Final CTA banner, since
   both place a secondary button on the same navy surface. */
.hero__cta--secondary.btn-secondary-cta,
.cta-banner__cta--secondary.btn-secondary-cta {
    color: var(--sh-white);
    border-color: var(--sh-white);
}

.hero__cta--secondary.btn-secondary-cta:hover,
.hero__cta--secondary.btn-secondary-cta:focus,
.cta-banner__cta--secondary.btn-secondary-cta:hover,
.cta-banner__cta--secondary.btn-secondary-cta:focus {
    background-color: var(--sh-white);
    color: var(--sh-navy-900);
}

/* Highlight Strip — quick-scan trust cues below the CTAs */
.hero__highlights {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sh-space-5);
    list-style: none;
    margin: var(--sh-space-6) 0 0;
    padding: 0;
}

.hero__highlight {
    display: flex;
    align-items: center;
    gap: var(--sh-space-2);
    font-size: 14px;
    font-weight: 500;
    color: var(--sh-white);
    opacity: 0.92;
}

.hero__highlight i {
    color: var(--sh-blue-400);
    font-size: 16px;
}

@media (max-width: 767.98px) {
    .hero__highlights {
        gap: var(--sh-space-4);
        margin-top: var(--sh-space-5);
    }
}

/* Scroll Indicator */
.hero__scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: var(--sh-space-5);
    transform: translateX(-50%);
    z-index: 2;
    width: 24px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    padding-top: 6px;
}

.hero__scroll-indicator-line {
    width: 4px;
    height: 8px;
    border-radius: 2px;
    background-color: var(--sh-white);
    animation: heroScrollIndicator 1.8s ease-in-out infinite;
}

@keyframes heroScrollIndicator {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
    .hero__scroll-indicator-line {
        animation: none;
        opacity: 1;
    }
}

/* Responsive Behaviour */
@media (max-width: 991.98px) {
    .hero {
        min-height: 80vh;
    }

    .hero__heading {
        font-size: 44px;
    }
}

@media (max-width: 767.98px) {
    .hero {
        min-height: 70vh;
    }

    .hero__heading {
        font-size: 34px;
    }

    .hero__subheading {
        font-size: 16px;
    }

    .hero__cta-group {
        flex-direction: column;
        width: 100%;
    }

    .hero__cta {
        width: 100%;
    }

    .hero__scroll-indicator {
        display: none;
    }
}

/* =====================================================
   INNER PAGE HEADER
   Compact navy banner used at the top of inner pages (Services,
   About, etc.) in place of the homepage's full hero — gives each
   page a title/breadcrumb without repeating the homepage's video
   hero treatment.
===================================================== */
.page-header {
    background-color: var(--sh-navy-900);
    padding-top: var(--sh-space-6);
    padding-bottom: var(--sh-space-6);
}

.page-header__breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--sh-space-2);
    font-size: 13px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--sh-space-3);
}

.page-header__breadcrumb a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.page-header__breadcrumb a:hover {
    color: var(--sh-white);
    text-decoration: underline;
}

.page-header__title {
    color: var(--sh-white);
    margin-bottom: var(--sh-space-3);
}

.page-header__intro {
    color: rgba(255, 255, 255, 0.75);
    font-size: 18px;
    max-width: 640px;
    margin-bottom: 0;
}

/* =====================================================
   CAPABILITY STRIP
   Subtle band immediately below the Hero. Intentionally compact —
   does not follow the 96/64/48 section spacing rhythm used by full
   homepage sections, since it is a supplementary strip rather than
   a section in its own right.
===================================================== */
.capability-strip {
    background-color: var(--sh-navy-700);
    padding-top: var(--sh-space-4);
    padding-bottom: var(--sh-space-4);
}

.capability-strip__list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sh-space-3) var(--sh-space-7);
    list-style: none;
    margin: 0;
    padding: 0;
}

.capability-strip__item {
    display: flex;
    align-items: center;
    gap: var(--sh-space-2);
    color: var(--sh-white);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.capability-strip__item i {
    color: var(--sh-blue-400);
    font-size: 16px;
}

@media (max-width: 767.98px) {
    .capability-strip__list {
        gap: var(--sh-space-3) var(--sh-space-5);
        justify-content: flex-start;
    }
}

/* =====================================================
   HOMEPAGE - WHO WE ARE (formerly "Company Introduction")
===================================================== */

/* Section Title (shared pattern per components/section-title.html) */
.section-title {
    margin-bottom: var(--sh-space-6);
    max-width: 720px;
}

.section-title__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sh-space-2);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sh-blue-500);
    margin-bottom: var(--sh-space-3);
}

/* Small colored accent dash before every section eyebrow — applies
   site-wide (no markup change needed), giving each section title a
   consistent flash of brand color instead of plain grey label text.
   Alternates through the palette per section via nth-of-type on the
   parent <section>, so consecutive sections don't all match. */
.section-title__eyebrow::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 2px;
    background-color: var(--sh-amber-500);
    flex-shrink: 0;
}

section:nth-of-type(3n+2) .section-title__eyebrow::before {
    background-color: var(--sh-teal-500);
}

section:nth-of-type(3n) .section-title__eyebrow::before {
    background-color: var(--sh-blue-500);
}

/* Small decorative rule preceding the eyebrow label — used on
   section titles that want a slightly more editorial feel (e.g.
   Who We Are). Optional: only present where the markup includes
   .section-title__eyebrow-line. */
.section-title__eyebrow-line {
    display: inline-block;
    width: 28px;
    height: 2px;
    background-color: var(--sh-amber-500);
}

.section-title__heading {
    margin-bottom: var(--sh-space-3);
}

.section-title__intro {
    color: var(--sh-grey-500);
    font-size: 18px;
    margin-bottom: 0;
}

/* Company Introduction Section */
.company-intro {
    padding-top: var(--sh-space-8);
    padding-bottom: var(--sh-space-8);
}

/* Top-aligned rather than centered: with a tall image column and a
   comparatively short text column, vertical centering left an
   awkward, unbalanced gap above the paragraph. Top alignment reads
   as a deliberate two-column grid instead. */
.company-intro__row {
    align-items: stretch;
}

/* Section Title — big stacked two-line heading ("WHO" / "WE ARE")
   with a tri-color accent bar underneath. A bolder, more graphic
   alternative to the standard .section-title eyebrow+heading
   pattern used elsewhere on the page. */
.company-intro__title {
    margin-bottom: var(--sh-space-6);
}

.company-intro__title-kicker {
    font-family: var(--sh-font-heading);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sh-grey-500);
    margin-bottom: 0;
}

.company-intro__title-heading {
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--sh-navy-900);
    margin-top: -4px;
    margin-bottom: var(--sh-space-4);
}

/* Tri-color accent bar — three short segments drawn from the
   existing brand palette (navy / blue / amber), not new colors. */
.company-intro__accent-bar {
    display: flex;
    width: 200px;
    height: 5px;
    border-radius: 3px;
    overflow: hidden;
}

.company-intro__accent-bar span {
    flex: 1;
}

.company-intro__accent-bar span:nth-child(1) { background-color: var(--sh-navy-900); }
.company-intro__accent-bar span:nth-child(2) { background-color: var(--sh-blue-500); }
.company-intro__accent-bar span:nth-child(3) { background-color: var(--sh-amber-500); }

@media (max-width: 767.98px) {
    .company-intro__title-heading {
        font-size: 38px;
    }
}

.company-intro__content {
    order: 1;
    position: relative;
}

/* Lede — a short, bold, colored statement line that leads the
   paragraph, giving a reader the core point at a glance (echoes
   the accent-bar's blue) before the fuller explanation below. */
.company-intro__lede {
    font-family: var(--sh-font-heading);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--sh-blue-500);
    margin-bottom: var(--sh-space-3);
}

.company-intro__paragraph {
    color: var(--sh-grey-500);
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: var(--sh-space-5);
}

/* CTA — tracked-letter uppercase text link (no button box), in
   keeping with the more editorial, print-inspired typographic
   language of this section. */
.company-intro__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--sh-space-2);
    font-family: var(--sh-font-heading);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sh-navy-900);
}

.company-intro__cta i {
    font-size: 13px;
    color: var(--sh-amber-500);
    transition: transform var(--sh-transition-base);
}

.company-intro__cta:hover,
.company-intro__cta:focus {
    color: var(--sh-blue-500);
}

.company-intro__cta:hover i,
.company-intro__cta:focus i {
    transform: translateX(4px);
}

/* Image column follows content on all breakpoints per the
   "content-first on mobile" requirement; on desktop the
   two-column grid places it visually to the right. */
.company-intro__media {
    order: 2;
    display: flex;
}

/* Shared dashed-border placeholder look — reused by every
   "image not yet supplied" placeholder sitewide (Company Intro,
   Project Card, Global Support map, etc.). Aspect ratio and
   corner-clipping stay per-component since those genuinely
   differ by context. */
.company-intro__image-placeholder,
.project-card__image-placeholder,
.global-support__map-placeholder {
    position: relative;
    width: 100%;
    background-color: var(--sh-grey-50);
    border: 1px dashed var(--sh-grey-200);
}

.company-intro__image-placeholder {
    aspect-ratio: 4 / 3;
    border-radius: var(--sh-radius-lg);
    overflow: hidden;
}

/* On desktop, match the image column's height to the (typically
   shorter) text column instead of a fixed aspect ratio — a fixed
   4:3 box left a large empty gap below the short text column
   whenever the placeholder was much taller than the copy beside
   it. Mobile/tablet keep the fixed aspect ratio since the columns
   stack and the box no longer needs to match anything. */
@media (min-width: 992px) {
    .company-intro__image-placeholder {
        aspect-ratio: auto;
        width: 100%;
        /* No fixed min-height here on purpose: flex "stretch" on
           .company-intro__row already sizes this to match the text
           column's real content height exactly. A fixed floor
           previously exceeded the text's natural height, leaving a
           visible empty gap below the "Read More" link. A small
           floor remains only as a sane fallback if the copy is
           ever very short. */
        min-height: 280px;
    }
}

/* Premium treatment for "Who We Are" — replaces the plain dashed
   wireframe look with a rounded, softly elevated surface, in line
   with the Phase 4 redesign's less "placeholder-y" visual language.
   Still uses the shared background/border color tokens; only adds
   a subtle shadow and thicker radius on top. */
.company-intro__image-placeholder--premium {
    border-style: solid;
    border-color: var(--sh-grey-200);
    border-radius: var(--sh-radius-lg);
    box-shadow: 0 16px 40px rgba(10, 27, 46, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(135deg, var(--sh-grey-50) 0%, var(--sh-white) 60%);
}

/* Large faint watermark mark behind the centered icon/label — gives
   the empty placeholder some visual depth instead of a flat block
   of color. Purely decorative, clipped by the placeholder's own
   overflow:hidden and rounded corners. */
.company-intro__image-placeholder-watermark {
    position: absolute;
    right: -10%;
    bottom: -12%;
    font-size: 260px;
    line-height: 1;
    color: var(--sh-navy-900);
    opacity: 0.04;
    transform: rotate(-12deg);
    pointer-events: none;
}

.company-intro__image-placeholder-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sh-space-3);
}

/* Decorative icon shown while no real image has been supplied yet
   — replaces the empty/broken-image look with a subtle on-brand
   placeholder mark. Automatically hidden once a real <img> src is
   present, since the image then paints over it. */
.company-intro__image-placeholder-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background-color: var(--sh-white);
    color: var(--sh-blue-500);
    font-size: 30px;
    box-shadow: 0 8px 24px rgba(10, 27, 46, 0.08);
}

.company-intro__image-placeholder-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sh-grey-500);
}

/* Shared "fill the placeholder" image treatment — reused by every
   placeholder image sitewide (Company Intro, Project Card, Global
   Support map). */
.company-intro__image,
.project-card__image,
.global-support__map-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Spacing rhythm: 96px desktop / 64px tablet / 48px mobile */
@media (max-width: 991.98px) {
    .company-intro {
        padding-top: var(--sh-space-7);
        padding-bottom: var(--sh-space-7);
    }
}

@media (max-width: 767.98px) {
    .company-intro {
        padding-top: var(--sh-space-6);
        padding-bottom: var(--sh-space-6);
    }

    .company-intro__media {
        margin-top: var(--sh-space-5);
    }
}

/* =====================================================
   HOMEPAGE - OUR SERVICES
===================================================== */

.our-services {
    padding-top: var(--sh-space-8);
    padding-bottom: var(--sh-space-8);
    /* Soft blue tint (brand blue-500 at low opacity) — gives this
       section its own identity in the section-by-section color
       rhythm instead of reusing the plain grey-50 neutral. */
    background-color: rgba(30, 111, 184, 0.045);
}

/* Spacing rhythm: 96px desktop / 64px tablet / 48px mobile */
@media (max-width: 991.98px) {
    .our-services {
        padding-top: var(--sh-space-7);
        padding-bottom: var(--sh-space-7);
    }
}

@media (max-width: 767.98px) {
    .our-services {
        padding-top: var(--sh-space-6);
        padding-bottom: var(--sh-space-6);
    }
}

/* Service Tile Grid — 3 columns x 2 rows desktop, 2 columns
   tablet, 1 column mobile. Replaces the retired .service-grid /
   .service-card pattern with larger, more generous tiles. */
.service-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--sh-space-5);
}

@media (min-width: 992px) {
    .service-tile-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .service-tile-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .service-tile-grid {
        grid-template-columns: 1fr;
    }
}

/* Service Tile — entire tile is clickable, large icon, generous
   padding, pronounced hover lift for a premium feel. Shares the
   same white/radius/shadow surface language as .project-card and
   .statistic-card. */
.service-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--sh-white);
    border: 1px solid var(--sh-grey-200);
    border-radius: var(--sh-radius-lg);
    box-shadow: 0 2px 12px rgba(10, 27, 46, 0.06);
    padding: var(--sh-space-6);
    text-align: left;
    color: inherit;
    text-decoration: none;
    transition: transform 280ms ease,
                box-shadow 280ms ease,
                border-color 280ms ease;
}

.service-tile:hover,
.service-tile:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(10, 27, 46, 0.14);
    border-color: var(--sh-blue-500);
    color: inherit;
    text-decoration: none;
}

.service-tile:focus-visible {
    outline: 2px solid var(--sh-blue-500);
    outline-offset: 3px;
}

.service-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: var(--sh-radius-md);
    background-color: rgba(30, 111, 184, 0.08);
    color: var(--sh-blue-500);
    font-size: 32px;
    margin-bottom: var(--sh-space-5);
    transition: transform 280ms ease;
}

.service-tile:hover .service-tile__icon,
.service-tile:focus-visible .service-tile__icon {
    transform: scale(1.08);
}

/* Icon color cycles through the existing brand palette (blue /
   amber / teal) instead of every tile using the same blue tint —
   adds visual variety across the grid without introducing new
   colors. */
.service-tile:nth-child(3n+2) .service-tile__icon {
    background-color: rgba(232, 163, 61, 0.12);
    color: var(--sh-amber-500);
}

.service-tile:nth-child(3n+3) .service-tile__icon {
    background-color: rgba(29, 154, 141, 0.10);
    color: var(--sh-teal-500);
}

.service-tile__title {
    font-size: 20px;
    margin-bottom: var(--sh-space-2);
}

.service-tile__description {
    color: var(--sh-grey-500);
    font-size: 16px;
    margin-bottom: 0;
}

/* Project Card typography — used by Technical Capabilities. */
.project-card__title {
    font-size: 20px;
    margin-bottom: var(--sh-space-2);
}

.project-card__description {
    color: var(--sh-grey-500);
    font-size: 16px;
    margin-bottom: 0;
}

/* =====================================================
   HOMEPAGE - WHY CHOOSE US
===================================================== */

/* Section uses the existing light-grey neutral surface color
   for visual rhythm separation; cards remain white. No new
   color variables introduced. */
.why-choose-us {
    padding-top: var(--sh-space-8);
    padding-bottom: var(--sh-space-8);
    /* Soft teal tint (brand teal-500 at low opacity) so this section
       reads as distinct from both Our Services (blue tint) and
       Technical Capabilities (amber tint) around it. */
    background-color: rgba(29, 154, 141, 0.05);
}

/* Spacing rhythm: 96px desktop / 64px tablet / 48px mobile */
@media (max-width: 991.98px) {
    .why-choose-us {
        padding-top: var(--sh-space-7);
        padding-bottom: var(--sh-space-7);
    }
}

@media (max-width: 767.98px) {
    .why-choose-us {
        padding-top: var(--sh-space-6);
        padding-bottom: var(--sh-space-6);
    }
}

/* Feature Row — editorial pattern (checkmark + title/description)
   laid out in a clean, consistently left-aligned 2-column grid.
   (An earlier alternating left/right variant was replaced — mixing
   text alignment per row read as uneven rather than premium.)
   Replaces the retired .feature-grid / .feature-card icon-card
   pattern with a lighter, less "template" layout. */
.feature-row-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--sh-space-7);
    row-gap: var(--sh-space-2);
}

/* Now a bordered card (like .service-tile / .project-card) instead
   of a bottom-divider-only row — gives it a defined edge to match
   the rest of the site's card components instead of floating on
   the plain background with nothing but a hover shadow. */
.feature-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sh-space-4);
    padding: var(--sh-space-5);
    background-color: var(--sh-white);
    border: 1px solid var(--sh-grey-200);
    border-radius: var(--sh-radius-lg);
    box-shadow: 0 2px 12px rgba(10, 27, 46, 0.06);
    transition: transform 280ms ease,
                box-shadow 280ms ease,
                border-color 280ms ease;
}

.feature-row:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(10, 27, 46, 0.12);
    border-color: var(--sh-blue-500);
}

.feature-row__check {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(30, 111, 184, 0.08);
    color: var(--sh-blue-500);
    font-size: 16px;
}

/* Alternate the checkmark color per row so the six items feel like
   a lively set rather than a uniform blue list. */
.feature-row:nth-child(3n+2) .feature-row__check {
    background-color: rgba(232, 163, 61, 0.12);
    color: var(--sh-amber-500);
}

.feature-row:nth-child(3n+3) .feature-row__check {
    background-color: rgba(29, 154, 141, 0.10);
    color: var(--sh-teal-500);
}

.feature-row__body {
    display: flex;
    flex-direction: column;
}

.feature-row__title {
    font-size: 20px;
    margin-bottom: var(--sh-space-1);
}

.feature-row__description {
    color: var(--sh-grey-500);
    font-size: 16px;
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .feature-row-list {
        grid-template-columns: 1fr;
        row-gap: 0;
    }
}

/* =====================================================
   HOMEPAGE - TECHNICAL CAPABILITIES (formerly "Featured Projects")
===================================================== */

/* Soft amber tint (brand amber-500 at low opacity) continues the
   per-section color rhythm after Our Services (blue) and Why Choose
   Us (teal). */
.technical-capabilities {
    padding-top: var(--sh-space-8);
    padding-bottom: var(--sh-space-8);
    background-color: rgba(232, 163, 61, 0.05);
}

/* Spacing rhythm: 96px desktop / 64px tablet / 48px mobile */
@media (max-width: 991.98px) {
    .technical-capabilities {
        padding-top: var(--sh-space-7);
        padding-bottom: var(--sh-space-7);
    }
}

@media (max-width: 767.98px) {
    .technical-capabilities {
        padding-top: var(--sh-space-6);
        padding-bottom: var(--sh-space-6);
    }
}

/* Project Grid: 3 columns desktop, 2 tablet, 1 mobile. */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sh-space-5);
}

@media (min-width: 992px) {
    .project-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .project-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* Project Card is now a clickable <a> — its own shell, hover and
   focus-visible states live here (no longer part of a shared
   card-base group, since Service Card, Feature Card and
   Certification Card have all been retired). */
.project-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: var(--sh-white);
    border: 1px solid var(--sh-grey-200);
    border-radius: var(--sh-radius-lg);
    box-shadow: 0 2px 12px rgba(10, 27, 46, 0.06);
    color: inherit;
    text-decoration: none;
    transition: transform 280ms ease,
                box-shadow 280ms ease,
                border-color 280ms ease;
}

.project-card:hover,
.project-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(10, 27, 46, 0.12);
    border-color: var(--sh-blue-500);
    color: inherit;
    text-decoration: none;
}

.project-card:focus-visible {
    outline: 2px solid var(--sh-blue-500);
    outline-offset: 3px;
}

/* Shared position/background/border come from the merged
   placeholder rule declared under Who We Are above — only the
   aspect ratio differs here. */
.project-card__image-placeholder {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

/* .project-card__image fill treatment comes from the shared rule
   declared under Who We Are above. Subtle zoom-on-hover reinforces
   that the whole card is a single clickable target. */
.project-card__image {
    transition: transform 400ms ease;
}

.project-card:hover .project-card__image,
.project-card:focus-visible .project-card__image {
    transform: scale(1.05);
}

.project-card__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: var(--sh-space-5);
}

/* =====================================================
   SERVICES PAGE - CAPABILITY CARD
   Centered, isolated-image treatment (image floats on a plain
   background rather than filling the card edge-to-edge), used for
   the "Representative Technical Work" grid on the Services page.
===================================================== */
.capability-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sh-space-5);
}

@media (min-width: 992px) {
    .capability-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .capability-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* Horizontal-scroll variant — used on the Services page "Our
   Services" list, which combines the full service list (image
   cards read better than plain icon tiles) into one scrollable
   row instead of a tall static grid. Reused generically by
   .project-scroll / .project-scroll__nav below. */
.capability-grid--scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: var(--sh-space-2);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.capability-grid--scroll::-webkit-scrollbar {
    display: none;
}

.capability-grid--scroll .capability-card {
    flex: 0 0 420px;
    scroll-snap-align: start;
}

@media (max-width: 767.98px) {
    .capability-grid--scroll .capability-card {
        flex-basis: 340px;
    }
}

@media (max-width: 575.98px) {
    .capability-grid--scroll .capability-card {
        flex-basis: 86vw;
    }
}

/* Wider card gets a taller image to match the new proportions. */
.capability-grid--scroll .capability-card__image-wrap {
    height: 240px;
}

/* Generic horizontal-scroll wrapper + prev/next nav buttons —
   reusable anywhere a card row needs scroll controls. */
.project-scroll {
    position: relative;
}

.project-scroll__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--sh-white);
    border: 1px solid var(--sh-grey-200);
    color: var(--sh-navy-900);
    font-size: 16px;
    box-shadow: 0 4px 16px rgba(10, 27, 46, 0.10);
    cursor: pointer;
    transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}

.project-scroll__nav:hover,
.project-scroll__nav:focus-visible {
    background-color: var(--sh-blue-500);
    border-color: var(--sh-blue-500);
    color: var(--sh-white);
}

.project-scroll__nav:disabled {
    opacity: 0.35;
    cursor: default;
    background-color: var(--sh-white);
    border-color: var(--sh-grey-200);
    color: var(--sh-navy-900);
}

.project-scroll__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sh-space-3);
    flex-shrink: 0;
}

/* Heading-only title block (no intro paragraph inside) used where
   the intro text moves down into .section-intro-row instead. */
.section-title--flush {
    margin-bottom: var(--sh-space-3);
}

/* Intro paragraph + Prev/Next buttons on one line — buttons sit to
   the right of the intro statement itself, so they read as "scroll
   this text's row of cards" rather than floating separately above
   or beside the title. */
.section-intro-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sh-space-5);
    margin-bottom: var(--sh-space-5);
}

.section-intro-row__text {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .section-intro-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sh-space-4);
    }

    .section-intro-row .project-scroll__controls {
        justify-content: flex-start;
    }
}

.capability-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--sh-white);
    border: 1px solid var(--sh-grey-200);
    border-radius: var(--sh-radius-lg);
    /* No padding here — the image now sits flush against the top
       and sides of the card. Padding moves to .capability-card__body
       so only the text block below the image is inset. */
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(10, 27, 46, 0.06);
    transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}

.capability-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(10, 27, 46, 0.12);
    border-color: var(--sh-blue-500);
}

/* Full-width image flush with the card's top corners, instead of
   an inset "floating" product shot — matches the same full-bleed
   treatment used on .project-card elsewhere on the site. */
.capability-card__image-wrap {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.capability-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.capability-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: var(--sh-space-5);
}

.capability-card__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--sh-blue-500);
    margin-bottom: var(--sh-space-2);
}

.capability-card__accent {
    display: block;
    width: 40px;
    height: 3px;
    border-radius: var(--sh-radius-sm);
    background-color: var(--sh-teal-500);
    margin-bottom: var(--sh-space-3);
}

.capability-card:nth-child(3n+2) .capability-card__accent {
    background-color: var(--sh-amber-500);
}

.capability-card:nth-child(3n+3) .capability-card__accent {
    background-color: var(--sh-blue-500);
}

.capability-card__description {
    color: var(--sh-grey-500);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 0;
}

/* =====================================================
   HOMEPAGE - INDUSTRIES WE SERVE
===================================================== */

.industries-we-serve {
    padding-top: var(--sh-space-8);
    padding-bottom: var(--sh-space-8);
    /* Soft navy tint (brand navy-900 at low opacity) — deepest of
       the tints used, fitting for the section right before the
       Global Support map. */
    background-color: rgba(10, 27, 46, 0.04);
}

@media (max-width: 991.98px) {
    .industries-we-serve {
        padding-top: var(--sh-space-7);
        padding-bottom: var(--sh-space-7);
    }
}

@media (max-width: 767.98px) {
    .industries-we-serve {
        padding-top: var(--sh-space-6);
        padding-bottom: var(--sh-space-6);
    }
}

/* Industry Row: icon above, label only below — no card shell,
   no description. Deliberately lighter-weight than a full card
   since this section only needs to communicate a list of names. */
.industry-row-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--sh-space-5);
    text-align: center;
}

@media (min-width: 992px) {
    .industry-row-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .industry-row-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 575.98px) {
    .industry-row-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.industry-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sh-space-3);
}

.industry-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--sh-white);
    color: var(--sh-blue-500);
    font-size: 26px;
    box-shadow: 0 2px 12px rgba(10, 27, 46, 0.06);
}

/* Custom ship-silhouette icons (Tankers / Bulk Carriers / Container
   Vessels) — Font Awesome's free set has no cargo-type-specific
   vessel icons, so these are small hand-drawn SVGs sized to sit
   inside the same icon circle as the Font Awesome icons above. */
.industry-row__ship-icon {
    width: 32px;
    height: auto;
}

.industry-row:nth-child(3n+2) .industry-row__icon {
    color: var(--sh-amber-500);
}

.industry-row:nth-child(3n+3) .industry-row__icon {
    color: var(--sh-teal-500);
}

.industry-row__label {
    font-family: var(--sh-font-heading);
    font-weight: 600;
    font-size: 15px;
    color: var(--sh-navy-900);
}

/* =====================================================
   HOMEPAGE - GLOBAL MARINE SUPPORT
===================================================== */

.global-support {
    padding-top: var(--sh-space-8);
    padding-bottom: var(--sh-space-8);
    /* Lighter blue tint (brand blue-400 at low opacity) — distinct
       shade from Our Services' blue-500 tint earlier on the page. */
    background-color: rgba(62, 143, 214, 0.06);
}

@media (max-width: 991.98px) {
    .global-support {
        padding-top: var(--sh-space-7);
        padding-bottom: var(--sh-space-7);
    }
}

@media (max-width: 767.98px) {
    .global-support {
        padding-top: var(--sh-space-6);
        padding-bottom: var(--sh-space-6);
    }
}

.global-support__row {
    align-items: center;
}

/* World map placeholder: ~40% width column (aspect ratio only —
   position/background/border come from the shared placeholder
   rule declared under Company Introduction above). */
.global-support__map-placeholder {
    aspect-ratio: 1 / 1;
    border-radius: var(--sh-radius-lg);
    overflow: hidden;
}

/* .global-support__map-image fill treatment lives in the shared
   rule declared under Company Introduction above. */

/* Statistics are the primary visual focus of this section (~60%
   width column) — .statistic-card is a new, standalone reusable
   component (see component rules below), used here for the first
   time but structured for reuse on inner pages. */
.global-support__stats {
    margin-top: var(--sh-space-5);
}

@media (min-width: 992px) {
    .global-support__stats {
        margin-top: 0;
    }
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sh-space-4);
}

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

/* Statistic — minimal large-typography treatment (no card box,
   border or shadow), so numeric values read as editorial statistics
   rather than dashboard widgets. Values are left unfilled ("—")
   until real figures are supplied — no numbers are invented. */
.statistic-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--sh-space-4) var(--sh-space-3);
}

/* Icon badge above each statistic — same circular tinted-icon
   treatment used for service tiles / feature rows, with the color
   cycling through the brand palette so the four cards don't look
   monochrome. */
.statistic-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin-bottom: var(--sh-space-3);
    font-size: 22px;
    background-color: rgba(30, 111, 184, 0.10);
    color: var(--sh-blue-500);
}

.statistic-card:nth-child(4n+2) .statistic-card__icon {
    background-color: rgba(232, 163, 61, 0.12);
    color: var(--sh-amber-500);
}

.statistic-card:nth-child(4n+3) .statistic-card__icon {
    background-color: rgba(29, 154, 141, 0.12);
    color: var(--sh-teal-500);
}

.statistic-card:nth-child(4n+4) .statistic-card__icon {
    background-color: rgba(10, 27, 46, 0.08);
    color: var(--sh-navy-900);
}

.statistic-card__value {
    display: block;
    font-family: var(--sh-font-heading);
    font-size: 26px;
    font-weight: 700;
    color: var(--sh-navy-900);
    margin-bottom: var(--sh-space-1);
}

.statistic-card__label {
    display: block;
    color: var(--sh-grey-500);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: var(--sh-space-2);
}

/* Short supporting line under each statistic label — adds context
   so the card doesn't read as a bare, unexplained claim. */
.statistic-card__description {
    display: block;
    color: var(--sh-grey-500);
    font-size: 14px;
    line-height: 1.6;
    max-width: 220px;
}

/* =====================================================
   HOMEPAGE - TRUSTED QUALITY
   (Merged "Certifications & Quality" + "Trusted By" into one
   unified band. Certification and client/partner placeholders
   remain empty — nothing is invented.)
===================================================== */

.trusted-quality {
    padding-top: var(--sh-space-8);
    padding-bottom: var(--sh-space-8);
    /* Neutral grey-50 closes the color rhythm before the dark
       navy-900 CTA banner that follows. */
    background-color: var(--sh-grey-50);
}

@media (max-width: 991.98px) {
    .trusted-quality {
        padding-top: var(--sh-space-7);
        padding-bottom: var(--sh-space-7);
    }
}

@media (max-width: 767.98px) {
    .trusted-quality {
        padding-top: var(--sh-space-6);
        padding-bottom: var(--sh-space-6);
    }
}

/* Certification / Logo Band — generous spacing, placeholder boxes
   only. Reuses the shared dashed-border placeholder look. The two
   bands (certifications, client/partner logos) share this same
   component with a small top-margin modifier on the second. */
.trusted-quality__band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--sh-space-6);
    align-items: center;
}

.trusted-quality__band--logos {
    margin-top: var(--sh-space-6);
}

.trusted-quality__item {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    background-color: var(--sh-grey-50);
    border: 1px dashed var(--sh-grey-200);
    border-radius: var(--sh-radius-md);
}

/* =====================================================
   CONTACT PAGE
===================================================== */
.contact-main {
    padding-top: var(--sh-space-8);
    padding-bottom: var(--sh-space-8);
}

@media (max-width: 991.98px) {
    .contact-main {
        padding-top: var(--sh-space-7);
        padding-bottom: var(--sh-space-7);
    }
}

@media (max-width: 767.98px) {
    .contact-main {
        padding-top: var(--sh-space-6);
        padding-bottom: var(--sh-space-6);
    }
}

.contact-main__intro {
    color: var(--sh-grey-500);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: var(--sh-space-5);
}

.contact-detail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sh-space-4);
}

.contact-detail-list__item {
    display: flex;
    align-items: flex-start;
    gap: var(--sh-space-3);
}

.contact-detail-list__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: rgba(30, 111, 184, 0.10);
    color: var(--sh-blue-500);
    font-size: 16px;
}

.contact-detail-list__body {
    display: flex;
    flex-direction: column;
}

.contact-detail-list__label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--sh-grey-500);
    margin-bottom: 2px;
}

.contact-detail-list__value {
    font-size: 16px;
    color: var(--sh-navy-900);
}

.contact-detail-list__value a {
    color: var(--sh-navy-900);
}

.contact-detail-list__value a:hover {
    color: var(--sh-blue-500);
}

@media (max-width: 991.98px) {
    .contact-main__form-col {
        margin-top: var(--sh-space-6);
    }
}

.contact-form__field {
    margin-bottom: var(--sh-space-4);
}

.contact-form__label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--sh-navy-900);
    margin-bottom: var(--sh-space-2);
}

.contact-form__input {
    width: 100%;
    padding: var(--sh-space-3);
    font-family: var(--sh-font-body);
    font-size: 15px;
    color: var(--sh-grey-800);
    background-color: var(--sh-white);
    border: 1px solid var(--sh-grey-200);
    border-radius: var(--sh-radius-md);
    transition: border-color var(--sh-transition-fast);
}

.contact-form__input:focus {
    outline: none;
    border-color: var(--sh-blue-500);
}

.contact-form__textarea {
    resize: vertical;
    min-height: 140px;
}

.contact-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.contact-form__note {
    margin-top: var(--sh-space-3);
    margin-bottom: 0;
    padding: var(--sh-space-3) var(--sh-space-4);
    background-color: rgba(232, 163, 61, 0.10);
    border: 1px solid rgba(232, 163, 61, 0.35);
    border-radius: var(--sh-radius-md);
    color: var(--sh-navy-900);
    font-size: 14px;
    line-height: 1.6;
}

/* =====================================================
   LEGAL PAGES (Privacy Policy, Terms of Use, Sitemap)
===================================================== */
.legal-content {
    padding-top: var(--sh-space-8);
    padding-bottom: var(--sh-space-8);
}

@media (max-width: 991.98px) {
    .legal-content {
        padding-top: var(--sh-space-7);
        padding-bottom: var(--sh-space-7);
    }
}

@media (max-width: 767.98px) {
    .legal-content {
        padding-top: var(--sh-space-6);
        padding-bottom: var(--sh-space-6);
    }
}

.legal-content__notice {
    max-width: 800px;
    margin: 0 auto var(--sh-space-6);
    padding: var(--sh-space-4);
    background-color: rgba(232, 163, 61, 0.10);
    border: 1px solid rgba(232, 163, 61, 0.35);
    border-radius: var(--sh-radius-md);
    color: var(--sh-navy-900);
    font-size: 14px;
    line-height: 1.7;
}

.legal-content__body {
    max-width: 800px;
    margin: 0 auto;
    color: var(--sh-grey-800);
}

.legal-content__body p {
    color: var(--sh-grey-500);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: var(--sh-space-4);
}

.legal-content__body h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--sh-navy-900);
    margin-top: var(--sh-space-6);
    margin-bottom: var(--sh-space-3);
}

.legal-content__body h2:first-child {
    margin-top: 0;
}

.legal-content__body ul {
    color: var(--sh-grey-500);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: var(--sh-space-4);
    padding-left: var(--sh-space-5);
}

.legal-content__body li {
    margin-bottom: var(--sh-space-2);
}

.legal-content__body a {
    color: var(--sh-blue-500);
}

.legal-content__updated {
    color: var(--sh-grey-500);
    font-size: 14px;
    font-style: italic;
    margin-bottom: var(--sh-space-6);
}

/* Sitemap-specific layout */
.sitemap-grid {
    max-width: 800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sh-space-6);
}

.sitemap-grid__col h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--sh-navy-900);
    margin-bottom: var(--sh-space-3);
}

.sitemap-grid__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sitemap-grid__col li {
    margin-bottom: var(--sh-space-2);
}

.sitemap-grid__col a {
    color: var(--sh-blue-500);
    font-size: 15px;
}

.sitemap-grid__col a:hover {
    color: var(--sh-navy-700);
}

.contact-map {
    line-height: 0;
}

.contact-map__frame {
    width: 100%;
    height: 420px;
    border: 0;
    display: block;
}

/* =====================================================
   ONE STOP SOLUTION - INTRO + VESSEL DIAGRAM
===================================================== */
.one-stop-intro {
    padding-top: var(--sh-space-8);
    padding-bottom: var(--sh-space-8);
}

@media (max-width: 991.98px) {
    .one-stop-intro {
        padding-top: var(--sh-space-7);
        padding-bottom: var(--sh-space-7);
    }
}

@media (max-width: 767.98px) {
    .one-stop-intro {
        padding-top: var(--sh-space-6);
        padding-bottom: var(--sh-space-6);
    }
}

.one-stop-intro__row {
    align-items: center;
}

.one-stop-intro__lede {
    font-size: 20px;
    font-weight: 700;
    color: var(--sh-blue-500);
    margin-bottom: var(--sh-space-4);
}

.one-stop-intro__paragraph {
    color: var(--sh-grey-500);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: var(--sh-space-5);
}

.one-stop-intro__media {
    display: flex;
    align-items: center;
    justify-content: center;
}

.one-stop-intro__diagram {
    width: 100%;
    height: auto;
    max-width: 560px;
}

@media (max-width: 991.98px) {
    .one-stop-intro__media {
        margin-top: var(--sh-space-6);
    }
}

/* =====================================================
   ABOUT PAGE - VISION & MISSION
===================================================== */
.vision-mission {
    padding-top: var(--sh-space-8);
    padding-bottom: var(--sh-space-8);
    background-color: rgba(29, 154, 141, 0.05);
}

@media (max-width: 991.98px) {
    .vision-mission {
        padding-top: var(--sh-space-7);
        padding-bottom: var(--sh-space-7);
    }
}

@media (max-width: 767.98px) {
    .vision-mission {
        padding-top: var(--sh-space-6);
        padding-bottom: var(--sh-space-6);
    }
}

.vision-mission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sh-space-5);
}

@media (min-width: 768px) {
    .vision-mission-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.vision-mission-card {
    background-color: var(--sh-white);
    border: 1px solid var(--sh-grey-200);
    border-radius: var(--sh-radius-lg);
    box-shadow: 0 2px 12px rgba(10, 27, 46, 0.06);
    padding: var(--sh-space-6);
    transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}

.vision-mission-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(10, 27, 46, 0.12);
    border-color: var(--sh-blue-500);
}

.vision-mission-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin-bottom: var(--sh-space-4);
    font-size: 22px;
    background-color: rgba(30, 111, 184, 0.10);
    color: var(--sh-blue-500);
}

.vision-mission-card:nth-child(2) .vision-mission-card__icon {
    background-color: rgba(29, 154, 141, 0.12);
    color: var(--sh-teal-500);
}

.vision-mission-card__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--sh-navy-900);
    margin-bottom: var(--sh-space-3);
}

.vision-mission-card__text {
    color: var(--sh-grey-500);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 0;
}

/* =====================================================
   HOMEPAGE - FINAL CALL TO ACTION
===================================================== */

/* First real implementation of the cta-banner pattern
   (components/cta-banner.html). Navy surface intentionally breaks
   the white/grey alternation — consistent with the CTA banner's
   role as a distinct, high-emphasis closing section. */
/* Padding increased beyond the standard 96/64/48 rhythm (+1 scale
   step at each breakpoint) to give the closing section a more
   deliberate, "luxurious" pause before the footer. */
.cta-banner {
    position: relative;
    padding-top: calc(var(--sh-space-8) + var(--sh-space-4));
    padding-bottom: calc(var(--sh-space-8) + var(--sh-space-4));
    background-color: var(--sh-navy-900);
    /* Optional background photo — path is pre-set, so placing the
       file at assets/images/banners/cta-fleet-support-bg.jpg makes
       it appear automatically. A navy overlay (::before below)
       keeps the white heading/button text readable on top of it;
       until the file exists this just shows the plain navy
       background-color above. */
    background-image: url('../images/banners/cta-fleet-support-bg.jpg');
    background-size: cover;
    background-position: center;
    text-align: center;
}

.cta-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(10, 27, 46, 0.82);
}

.cta-banner .container {
    position: relative;
    z-index: 1;
}

@media (max-width: 991.98px) {
    .cta-banner {
        padding-top: var(--sh-space-8);
        padding-bottom: var(--sh-space-8);
    }
}

@media (max-width: 767.98px) {
    .cta-banner {
        padding-top: var(--sh-space-7);
        padding-bottom: var(--sh-space-7);
    }
}

.cta-banner__heading {
    color: var(--sh-white);
    font-size: 40px;
    margin-bottom: var(--sh-space-4);
}

@media (max-width: 767.98px) {
    .cta-banner__heading {
        font-size: 28px;
    }
}

.cta-banner__subtext {
    color: var(--sh-grey-200);
    font-size: 18px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--sh-space-6);
}

.cta-banner__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sh-space-4);
    flex-wrap: wrap;
}

@media (max-width: 575.98px) {
    .cta-banner__actions {
        flex-direction: column;
        width: 100%;
    }

    .cta-banner__actions .btn-primary-cta,
    .cta-banner__actions .btn-secondary-cta {
        width: 100%;
    }
}

/* ---------------------------------------------------------
   10. RESPONSIVE BREAKPOINT NOTES
   ---------------------------------------------------------
   Desktop  (>=1200px): full grid, max-width 1320px container
   Laptop   (992-1199px): full nav, scaled container
   Tablet   (768-991px): condensed nav, 64px section rhythm
   Mobile   (<768px): stacked nav, 48px section rhythm
   Section-level spacing rhythm is applied per-page; this
   foundation file only defines the variables and header/
   footer responsive behavior above.
   --------------------------------------------------------- */