/*
 * NCI Website Redesign — Design Tokens + Shared Layout (Nav + Footer)
 * ====================================================================
 * Source: Figma "WEBSITE-GENERAL DESIGN" (Nov 2025) — see
 *   figma/WEBSITE-GENERAL DESIGN/Desktop & Mobile/*.pdf for the
 *   per-page mocks (every page includes desktop + mobile breakpoints).
 *
 * This file LAYERS on top of nci-theme.css to override tokens and
 * restyle the public layout (header nav + footer + newsletter strip)
 * to match the new brand. Body content per page is rebuilt in
 * Phase 2; this file deliberately only touches layout chrome.
 *
 * Asset paths reference /images/website/* — extracted from the Figma
 * package zip; original Figma filenames preserved (URL-encoded where
 * they contain spaces).
 */

/* ---------- 1. Design Tokens --------------------------------------- */

:root {
    /* Brand colours — exact hex values from the Figma Colors swatches. */
    --nci-orange: #FBA338;           /* primary CTA, accent */
    --nci-orange-hover: #e8902a;
    --nci-blue: #141D4B;             /* dark surfaces, hero bg, footer */
    --nci-navy: #141D4B;             /* alias retained for legacy use */
    --nci-body-text: #535862;        /* body copy */
    --nci-heading: #181D27;          /* near-black for headings */
    --nci-muted: #717680;            /* tertiary / captions */
    --nci-border-soft: #E9EAEB;
    --nci-bg-soft: #F8F9FA;

    /* Typography — Inter (free, served via Google Fonts in _Layout). */
    --nci-font-sans: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

    /* Layout */
    --nci-max-w: 1200px;             /* desktop content max width */
    --nci-radius: 8px;
    --nci-radius-lg: 12px;
}

/* ---------- 2. Base typography ------------------------------------- */

html, body {
    font-family: var(--nci-font-sans);
    color: var(--nci-body-text);
    font-size: 16px;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--nci-heading);
    font-weight: 600;
}

/* ---------- 3. Top navigation -------------------------------------- */

.nci-navbar {
    background: #fff;
    border-bottom: 1px solid var(--nci-border-soft);
    padding: 0.65rem 0;
}

.nci-navbar .navbar-brand img {
    height: 32px;
    width: auto;
}

.nci-navbar .navbar-nav .nav-link {
    color: var(--nci-heading);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.5rem 0.85rem;
}

.nci-navbar .navbar-nav .nav-link:hover {
    color: var(--nci-orange);
}

/* Tracking input pill on the right of the nav. */
.nci-track-input {
    border: 1px solid var(--nci-border-soft);
    border-radius: 6px;
    font-size: 0.875rem;
    height: 36px;
    min-width: 180px;
}

.nci-navbar .btn-nci {
    background: var(--nci-orange);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    height: 36px;
    padding: 0 1rem;
}

.nci-navbar .btn-nci:hover {
    background: var(--nci-orange-hover);
    color: #fff;
}

/* ---------- 3a. Mobile navbar (≤ 991.98px) ------------------------- */
/* Defensive responsive block. Bootstrap 5's navbar-expand-lg
   *should* collapse to a hamburger below 992px, but on production
   the hamburger was missing entirely and Services + News links
   disappeared off the side because the collapse wasn't kicking in.
   These rules force the expected behaviour and overrule any CSS
   that might be shadowing it.

   Specifically:
     • Hamburger toggler shown again at < lg
     • Collapsed nav stacks vertically (each link on its own row)
     • Tracking input + Track Order + Client Portal sit BELOW the
       links instead of trying to share the toggler row
     • Tracking input drops its 180px min-width so it doesn't blow
       out the viewport on 320px phones */

@media (max-width: 991.98px) {
    .nci-navbar .navbar-toggler {
        display: inline-block !important;
        border: 1px solid var(--nci-border-soft);
        padding: 0.35rem 0.55rem;
    }
    .nci-navbar .navbar-collapse:not(.show) {
        display: none !important;
    }
    .nci-navbar .navbar-collapse.show,
    .nci-navbar .navbar-collapse.collapsing {
        display: block !important;
        padding-top: 0.75rem;
    }
    .nci-navbar .navbar-nav {
        flex-direction: column !important;
        gap: 0.25rem;
        width: 100%;
    }
    .nci-navbar .navbar-nav .nav-link {
        padding: 0.65rem 0.5rem;
        border-bottom: 1px solid #f0f1f5;
    }
    /* Stack the right-side block (tracking + portal) below the links
       when collapsed. Full-width controls so nothing overflows. */
    .nci-navbar .navbar-collapse > .d-flex {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
        margin-top: 0.5rem;
        padding-top: 0.75rem;
        border-top: 1px solid #f0f1f5;
    }
    .nci-navbar .navbar-collapse > .d-flex form {
        width: 100%;
    }
    .nci-navbar .nci-track-input {
        min-width: 0 !important;
        flex: 1 1 auto;
    }
    /* Drop the centred container's horizontal padding so the
       collapsed dropdown actually reaches the screen edges. */
    .nci-navbar > .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Extra-narrow safety — true phone width. */
@media (max-width: 374.98px) {
    .nci-navbar .navbar-brand img {
        height: 28px;
    }
    .nci-navbar .btn-nci {
        height: 32px;
        padding: 0 0.6rem;
        font-size: 0.85rem;
    }
}

/* (Removed splash-navbar-specific @@media rules from a previous attempt.
   _SplashLayout.cshtml now uses the same navbar-expand-lg + hamburger
   + collapse markup as _Layout.cshtml, so the @@media (max-width: 991.98px)
   block above (.nci-navbar .navbar-toggler / .navbar-collapse) handles
   both layouts uniformly — no splash-specific rules needed.) */

/* ---------- 4. Buttons --------------------------------------------- */

.btn-nci {
    background: var(--nci-orange);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    transition: background 0.15s ease;
}

.btn-nci:hover, .btn-nci:focus {
    background: var(--nci-orange-hover);
    color: #fff;
}

.btn-nci-outline {
    background: transparent;
    color: var(--nci-heading);
    border: 1px solid var(--nci-border-soft);
    border-radius: 6px;
    font-weight: 500;
}

.btn-nci-outline:hover {
    background: var(--nci-bg-soft);
    color: var(--nci-heading);
}

/* ---------- 5. Newsletter strip (every page, just above footer) ---- */

.nci-newsletter {
    padding: 3rem 0;
    background: #fff;
    border-top: 1px solid var(--nci-border-soft);
    /* Legacy nci-theme.css gives this section a 3px orange border-bottom
       (was the "Stay Updated" CTA accent). Per Figma the newsletter strip
       has no accent line below it — kill the override. */
    border-bottom: 0 !important;
}

.nci-newsletter h5 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--nci-heading);
    margin-bottom: 0.25rem;
}

.nci-newsletter p {
    color: var(--nci-body-text);
    font-size: 0.875rem;
    margin-bottom: 0;
}

.nci-newsletter .newsletter-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.nci-newsletter .newsletter-form .form-control {
    height: 44px;
    border-radius: 6px;
    font-size: 0.95rem;
}

.nci-newsletter .newsletter-form .btn {
    height: 44px;
    padding: 0 1.5rem;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .nci-newsletter .newsletter-form {
        flex-direction: column;
        align-items: stretch;
    }
    .nci-newsletter .newsletter-form .btn { width: 100%; }
}

/* ---------- 6. Footer (5-column per Figma) ------------------------- */

.nci-footer {
    background: #fff;
    padding: 3rem 0 1.5rem;
    border-top: 1px solid var(--nci-border-soft);
    font-size: 0.875rem;
    color: var(--nci-body-text);
}

.nci-footer .footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.nci-footer .footer-heading {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--nci-muted);
    text-transform: none;
    margin-bottom: 0.75rem;
    letter-spacing: 0;
}

.nci-footer a {
    color: var(--nci-heading);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
}

.nci-footer a:hover {
    color: var(--nci-orange);
}

.nci-footer .footer-divider {
    height: 1px;
    background: var(--nci-border-soft);
    margin: 2rem 0 1rem;
    border: none;
}

.nci-footer .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.nci-footer .footer-bottom .copyright {
    font-size: 0.875rem;
    color: var(--nci-muted);
}

/* "Select Location" dropdown trigger in the footer right-column. */
.nci-footer .nci-location-dropdown {
    background: transparent;
    border: none;
    color: var(--nci-heading);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0;
}

.nci-footer .nci-location-dropdown:hover { color: var(--nci-orange); }

/* Mobile: 5 cols → 2 cols → 1 col. The Figma mocks footer as 2x2 grid
   on tablet and stacked on phone. */
@media (max-width: 991.98px) {
    .nci-footer .footer-row > [class*="col-"] { margin-bottom: 1.5rem; }
}

/* ---------- 7. Generic public section spacing ---------------------- */

.nci-section {
    padding: 4rem 0;
}

@media (max-width: 767.98px) {
    .nci-section { padding: 2.5rem 0; }
}

.nci-eyebrow {
    color: var(--nci-orange);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 0.5rem;
    display: block;
}

.nci-display-h1 {
    font-size: clamp(2rem, 4vw + 1rem, 3.25rem);
    font-weight: 700;
    color: var(--nci-heading);
    line-height: 1.1;
}

.nci-display-h2 {
    font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
    font-weight: 700;
    color: var(--nci-heading);
    line-height: 1.2;
}

/* ---------- 8. Home page sections (Phase 2) ------------------------ */

/* 8.1 Hero — full-bleed dark navy band, headline + CTA on left,
       single photo on right. Matches Figma "Global Shipping and
       Relocation" hero. */
/* ---------- 6.5 Splash layout (home only) ------------------------- */

/* Minimal nav and footer used by _SplashLayout.cshtml — only on the
   global home page. Other pages keep the full _Layout chrome. */
.splash-navbar { background: #fff; padding: 1rem 0; border-bottom: none; }
.splash-navbar .navbar-nav .nav-link {
    color: var(--nci-heading);
    font-weight: 500;
    font-size: 0.95rem;
}
.splash-navbar .navbar-nav .nav-link:hover { color: var(--nci-orange); }

.splash-footer { padding-top: 2.5rem; }
.splash-footer .nci-location-dropdown {
    background: transparent;
    border: none;
    color: var(--nci-heading);
    font-weight: 500;
    padding: 0;
}
.splash-footer .nci-location-dropdown:hover { color: var(--nci-orange); }

/* ---------- 7.0 Home splash v2 — split hero ----------------------- */

/* Reference: client-supplied screenshot.
   Split-screen hero: dark navy left half with headline + subtext +
   "Select Location" dropdown, branded NCI staff photo full-bleed on
   the right half. Routes to /location/{slug} on selection. */
.home-splash-v2 {
    /* Navy background moved to .container child so the hero matches the
       page body width (rest of the site — newsletter, footer — sits
       inside Bootstrap's container). Previously the navy was on the
       section itself, full-bleed to viewport edges, while everything
       below was container-width — visually inconsistent. */
    color: #fff;
    margin-bottom: 0;
}
.home-splash-v2 > .container {
    background: var(--nci-blue);
    overflow: hidden;       /* clip the navy ::before tongue + photo to container */
    padding-left: 0;        /* row goes flush to container edges */
    padding-right: 0;
}
/* Container kept at Bootstrap defaults so hero text + photo align
   horizontally with the nav and footer container widths. Earlier
   override (max-width:1320, padding:0) made the hero sit further
   left than the rest of the page. */
.home-splash-v2 .splash-text-col {
    /* Left padding (3rem) shifts the text inward from the navy panel's
       left edge so the heading doesn't sit flush against it — matches
       client direction from the Figma annotation. */
    padding: 5rem 2rem 5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 580px;
}
.home-splash-v2 h1 {
    color: #fff;
    font-size: clamp(2.25rem, 3.5vw + 1rem, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.25rem;
}
.home-splash-v2 .splash-lead {
    color: rgba(255,255,255,0.85);
    font-size: 1rem;
    line-height: 1.55;
    margin-bottom: 2rem;
    max-width: 460px;
}
.home-splash-v2 .splash-dropdown { display: inline-block; }
.home-splash-v2 .splash-loc-btn {
    background: var(--nci-orange);
    border: none;
    color: #fff;
    font-weight: 600;
    padding: 0.7rem 1.5rem;
    border-radius: 6px;
    font-size: 0.95rem;
}
.home-splash-v2 .splash-loc-btn:hover { background: var(--nci-orange-hover); color: #fff; }
.home-splash-v2 .splash-loc-btn::after {
    /* Bootstrap's default dropdown caret renders as triangle next
       to the label, matching the reference design. */
    margin-left: 0.5rem;
}
.home-splash-v2 .splash-dropdown .dropdown-menu {
    border-radius: 6px;
    border: 1px solid var(--nci-border-soft);
    box-shadow: 0 6px 24px rgba(0,0,0,0.1);
    min-width: 240px;
}
.home-splash-v2 .splash-dropdown .dropdown-item {
    padding: 0.5rem 1rem;
    color: var(--nci-heading);
}
.home-splash-v2 .splash-dropdown .dropdown-item:hover {
    background: var(--nci-bg-soft);
    color: var(--nci-orange);
}

.home-splash-v2 .splash-photo-col {
    padding: 0;
    overflow: hidden;
    min-height: 580px;
    display: flex;
    align-items: stretch;
}
/* Splash carousel — only renders when the tenant has 2+ active
   slides in T_Sliders. Each .carousel-item must stretch to the
   photo column height so the rotating image fills the slot the
   same way the single-image hero does. */
.home-splash-v2 .splash-carousel,
.home-splash-v2 .splash-carousel .carousel-inner,
.home-splash-v2 .splash-carousel .carousel-item {
    height: 100%;
    min-height: 580px;
}
.home-splash-v2 .splash-carousel .carousel-item img.splash-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.home-splash-v2 .splash-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    min-height: 580px;
}

@media (max-width: 991.98px) {
    .home-splash-v2 .splash-text-col {
        min-height: 0;
        padding: 3rem 1.5rem 2rem;
    }
    .home-splash-v2 .splash-photo-col { min-height: 0; }
    .home-splash-v2 .splash-photo { min-height: 320px; max-height: 480px; }
}

/* ---------- 7.0a Legacy home splash (with two dropdowns) ----------
   Earlier version kept in case it's still referenced anywhere; the
   primary home now uses .home-splash-v2 (above). ------------------ */
.home-splash {
    background: var(--nci-blue);
    color: #fff;
    padding: 5rem 0 6rem;
    background-image:
        linear-gradient(rgba(20, 29, 75, 0.78), rgba(20, 29, 75, 0.78)),
        url('/images/website/home-page/images/Image.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 580px;
    display: flex;
    align-items: center;
}
.home-splash .splash-content {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.home-splash h1 {
    color: #fff;
    font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1rem;
}
.home-splash .splash-lead {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 0 auto 2rem;
    max-width: 580px;
}
.home-splash .splash-selectors {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    padding: 1rem;
    border-radius: var(--nci-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.home-splash .splash-field {
    flex: 1 1 200px;
    text-align: left;
}
.home-splash .splash-field label {
    display: block;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.home-splash .splash-field select {
    width: 100%;
    height: 48px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: #fff;
    color: var(--nci-heading);
    padding: 0 0.75rem;
    font-size: 0.95rem;
}
.home-splash .splash-go {
    height: 48px;
    align-self: flex-end;
    padding: 0 1.5rem;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .home-splash { padding: 3rem 0 4rem; min-height: 0; }
    .home-splash .splash-go { width: 100%; }
}

/* ---------- 7.1 (Legacy) Home hero — kept for per-tenant landing
       pages that reuse it via .home-hero. ---------------------------- */

.home-hero {
    /* Navy background moved to .container child so the hero matches the
       page body width — same change as .home-splash-v2 above. The
       section keeps its vertical padding so the hero still has top/
       bottom breathing room above and below the navy block. */
    color: #fff;
    padding: 2rem 0;
}
.home-hero > .container {
    background: var(--nci-blue);
    overflow: hidden;
    /* No internal vertical padding — text col owns the breathing room
       via its own padding + min-height. Without this fix the photo
       was shorter than the navy panel (navy strips above and below
       the image, didn't match the splash page where photo is full
       hero height). */
    padding: 0;
}
/* Force the row's two cols to STRETCH to the same height so the
   photo always matches the text col (and therefore fills the full
   navy panel height). The location landing's view uses
   `align-items-center` by default which left the photo shorter than
   the text col; the splash uses `align-items-stretch` which is why
   it always rendered correctly. Mirror the splash behaviour here
   so all hero pages look identical. */
.home-hero .row {
    --bs-gutter-x: 0;
    align-items: stretch !important;
}
.home-hero .row > .col-lg-6:first-child {
    /* Match the splash's .splash-text-col so location hero renders
       identically: vertical centering, 580px minimum, and the same
       3rem left padding so the heading is inset from the navy panel
       edge instead of flush. */
    padding: 5rem 2rem 5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 580px;
}
.home-hero h1 {
    color: #fff;
    font-size: clamp(2.25rem, 3.5vw + 1rem, 3.75rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1rem;
}
.home-hero p.lead {
    color: rgba(255,255,255,0.85);
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
    max-width: 460px;
}
.home-hero .hero-image {
    border-radius: var(--nci-radius-lg);
    overflow: hidden;
    aspect-ratio: 4/3;
}
.home-hero .hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.home-hero .btn-service-areas {
    background: transparent;
    color: #fff;
    border: none;
    text-decoration: none;
    padding: 0;
    margin-left: 1.25rem;
    font-weight: 500;
}
.home-hero .btn-service-areas:hover { color: var(--nci-orange); }

@media (max-width: 991.98px) {
    .home-hero { padding: 3rem 0; }
    .home-hero .hero-image { margin-top: 2rem; aspect-ratio: 16/10; }
}

/* ----- Shared full-bleed curved hero photo -------------------------
   Split-screen heroes (home splash + location landing) show the photo
   on the RIGHT, full-bleed to the browser edge, with a gentle curved
   left edge so the navy text panel sweeps into the image (matches
   Figma). The photo column is absolutely positioned over the right
   half of the viewport; the text column stays in the centered
   container on the left. The clip-path's clipped corners reveal the
   navy section background behind. Applied to BOTH hero styles so every
   hero of this kind looks the same. */
.home-splash-v2,
.home-hero { position: relative; }

/* Photo column → stays in the Bootstrap row grid at ~50% width so the
   hero matches the page body width. Was `position: absolute; width:
   52vw` (viewport-wide full-bleed) — reverted to `relative` per client
   request. The navy ::before tongue still anchors here because the
   col is positioned (relative ≠ static). */
.home-splash-v2 .splash-photo-col,
.home-hero .row > .col-lg-6:last-child {
    position: relative;
    padding: 0;
    margin: 0;
}
/* Make the image / card fill that column and drop the location hero's
   old rounded 4:3 card so it reads as one full-bleed photo. */
.home-splash-v2 .splash-photo,
.home-splash-v2 .splash-carousel,
.home-hero .hero-image {
    width: 100%;
    height: 100%;
    min-height: 100%;
    border-radius: 0;
    aspect-ratio: auto;
}
.home-hero .hero-image img { width: 100%; height: 100%; object-fit: cover; }

/* Navy "tongue" sweeping into the photo from the LEFT — matches Figma.
   The photo stays a clean rectangle; a curved navy-coloured pseudo
   element is overlaid on the left edge of the photo column to create
   the impression that the navy text panel bulges into the image at
   mid-height. Asymmetric border-radius gives the slightly off-centre
   peak shown in the design (wider at top than bottom). The earlier
   ellipse() clip-path made the photo bulge LEFT into the navy — wrong
   direction — replaced with this overlay. */
.home-splash-v2 .splash-photo,
.home-splash-v2 .splash-carousel .carousel-item img.splash-photo,
.home-hero .hero-image,
.home-hero .hero-image img {
    clip-path: none;          /* photo is a clean rectangle now */
    border-radius: 0;
}

/* (Earlier override forcing position: absolute removed — the rule
    above at line ~672 already sets position: relative, which is
    sufficient for the ::before below to anchor here, and lets the
    photo column stay in the normal Bootstrap row grid at ~50% width.) */

/* Simple diagonal cut on the photo's top-left corner. The navy
   container background shows through where the photo is clipped,
   giving the impression that the navy panel's right edge is
   angled at the top instead of perfectly vertical. Client request:
   "just was need little diagonal" — replacing the earlier ellipse
   curve which was the wrong shape. Subtle 8% cut keeps it gentle.
   The ::before tongue from the previous iteration is no longer
   used; the diagonal is achieved via clip-path on the photo
   itself, no extra elements needed. */
.home-splash-v2 .splash-photo-col::before,
.home-hero .row > .col-lg-6:last-child::before {
    display: none;
}

.home-splash-v2 .splash-photo,
.home-hero .hero-image {
    /* Diagonal from upper-left corner of photo (8% in from left at
       top) sloping down to the bottom-left corner. The clipped
       triangular slice exposes the navy container background
       behind, creating a clean angled boundary. Bottom and right
       stay rectangular. Tune the first value (8%) for steeper /
       gentler slope:
         8%  = subtle slope (current)
         15% = moderate
         25% = pronounced
    */
    clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
}

@media (max-width: 991.98px) {
    /* Stacked mobile: photo returns to normal flow as a rounded
       card. No diagonal cut, no min-height stretch. */
    .home-splash-v2 .splash-photo,
    .home-hero .hero-image {
        clip-path: none;
        min-height: 0;
    }
    .home-hero .hero-image {
        border-radius: var(--nci-radius-lg);
        aspect-ratio: 16/10;
    }
}

/* 8.2 Intro block — eyebrow "Service Areas" + long heading + paragraph.
       Sits between hero and 3-service strip. */
.home-intro {
    padding: 4rem 0 2rem;
}
.home-intro h2 {
    font-size: clamp(1.75rem, 2vw + 1rem, 2.25rem);
    color: var(--nci-orange);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}
.home-intro p {
    font-size: 1rem;
    color: var(--nci-body-text);
    line-height: 1.6;
}

/* 8.3 Service strip — 3 vertically-stacked service cards on the left,
       large ship hero image on the right. */
.home-services-strip {
    padding: 1rem 0 4rem;
}
.home-services-strip .service-item {
    padding: 1.25rem 0;
    border-top: 1px solid var(--nci-border-soft);
}
.home-services-strip .service-item:last-child {
    border-bottom: 1px solid var(--nci-border-soft);
}
.home-services-strip .service-item h5 {
    color: var(--nci-heading);
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}
.home-services-strip .service-item p {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    color: var(--nci-body-text);
}
.home-services-strip .service-item .learn-more {
    color: var(--nci-orange);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
}
.home-services-strip .service-item .learn-more:hover { text-decoration: underline; }
.home-services-strip .service-item:first-child {
    border-top-color: var(--nci-orange);
    border-top-width: 2px;
}
.home-services-strip .ship-image {
    border-radius: var(--nci-radius-lg);
    overflow: hidden;
    height: 100%;
    min-height: 380px;
}
.home-services-strip .ship-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 991.98px) {
    .home-services-strip .ship-image { min-height: 240px; margin-top: 2rem; }
}

/* 8.4 Why Choose Us — 6-grid of icon cards. */
.home-why {
    padding: 4rem 0;
    background: var(--nci-bg-soft);
}
.home-why .section-eyebrow {
    color: var(--nci-orange);
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.home-why h2 {
    font-size: clamp(1.75rem, 2vw + 1rem, 2.25rem);
    font-weight: 700;
    color: var(--nci-heading);
    margin-bottom: 0.75rem;
}
.home-why .lead {
    color: var(--nci-body-text);
    font-size: 1rem;
    margin-bottom: 3rem;
    max-width: 720px;
}
.home-why .why-card {
    background: #fff;
    border: 1px solid var(--nci-border-soft);
    border-radius: var(--nci-radius);
    padding: 1.5rem;
    height: 100%;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.home-why .why-card:hover {
    box-shadow: 0 6px 20px rgba(20, 29, 75, 0.06);
    transform: translateY(-2px);
}
.home-why .why-card .icon {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-why .why-card .icon img { width: 100%; height: 100%; }
.home-why .why-card h6 {
    font-weight: 600;
    color: var(--nci-heading);
    margin-bottom: 0.5rem;
}
.home-why .why-card p {
    font-size: 0.9rem;
    color: var(--nci-body-text);
    margin-bottom: 0;
}

/* 8.5 Testimonial — single quote on dark navy bg, photo + name + stars. */
.home-testimonial {
    background: var(--nci-blue);
    color: #fff;
    padding: 4rem 0;
}
.home-testimonial .quote {
    font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.65rem);
    font-weight: 500;
    color: #fff;
    text-align: center;
    line-height: 1.4;
    max-width: 780px;
    margin: 0 auto 1.75rem;
}
.home-testimonial .author {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}
.home-testimonial .author .avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--nci-orange);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}
.home-testimonial .author .name {
    color: #fff;
    font-weight: 600;
}
.home-testimonial .author .title {
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
}
.home-testimonial .stars {
    color: var(--nci-orange);
    letter-spacing: 0.15rem;
    margin-top: 0.5rem;
}

/* 8.6 "Ready to Ship" CTA strip — text on left + image collage on right. */
.home-cta {
    padding: 4rem 0;
}
.home-cta h2 {
    color: var(--nci-orange);
    font-weight: 700;
    font-size: clamp(1.75rem, 2vw + 1rem, 2.25rem);
    margin-bottom: 1rem;
}
.home-cta p {
    color: var(--nci-body-text);
    margin-bottom: 1.5rem;
    max-width: 460px;
}
.home-cta .cta-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    height: 320px;
}
.home-cta .cta-collage > div {
    border-radius: var(--nci-radius);
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.home-cta .cta-collage > div:first-child { grid-row: span 2; }

@media (max-width: 767.98px) {
    .home-cta .cta-collage { height: 220px; }
}

/* 8.7 Latest News — 3-card preview grid. */
.home-news {
    padding: 4rem 0;
    background: var(--nci-blue);
    color: #fff;
}
.home-news .section-eyebrow { color: var(--nci-orange); font-weight: 600; }
.home-news h2 {
    color: #fff;
    font-weight: 700;
    font-size: clamp(1.75rem, 2vw + 1rem, 2.25rem);
    margin-bottom: 0.5rem;
}
.home-news .lead {
    color: rgba(255,255,255,0.8);
    margin-bottom: 2rem;
}
.home-news .view-all-btn {
    background: var(--nci-orange);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    text-decoration: none;
}
.home-news .view-all-btn:hover { background: var(--nci-orange-hover); color: #fff; }
.home-news .news-card {
    background: #fff;
    border-radius: var(--nci-radius);
    overflow: hidden;
    color: var(--nci-body-text);
    transition: transform 0.2s ease;
}
.home-news .news-card:hover { transform: translateY(-3px); }
.home-news .news-card .thumb {
    height: 180px;
    background-size: cover;
    background-position: center;
}
.home-news .news-card .body {
    padding: 1rem 1.25rem 1.25rem;
}
.home-news .news-card .category {
    font-size: 0.75rem;
    color: var(--nci-orange);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}
.home-news .news-card h6 {
    color: var(--nci-heading);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}
.home-news .news-card p {
    font-size: 0.9rem;
    color: var(--nci-body-text);
    margin-bottom: 0;
}

/* ---------- 9. Contact page --------------------------------------- */

/* Contact section — wrapped in standard .container so its width
   (1140 / 1320 depending on breakpoint) matches every other public
   page. Hero photo + form share an inner row with rounded corners
   so the photo doesn't run edge-to-edge anymore. */
.contact-section { background: #fff; padding: 2.5rem 0 3rem; }
.contact-row {
    background: #fff;
    border-radius: var(--nci-radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(20,29,75,0.06);
}
.contact-hero-image {
    width: 100%;
    height: 100%;
    min-height: 560px;
    background-size: cover;
    background-position: center;
}
.contact-form-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 2.25rem;
    min-height: 100%;
}
.contact-form-inner { max-width: 520px; width: 100%; }
.contact-h1 {
    color: var(--nci-orange);
    font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.contact-lead {
    color: var(--nci-body-text);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}
.contact-form-inner .form-label {
    font-weight: 500;
    color: var(--nci-heading);
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

@media (max-width: 991.98px) {
    .contact-form-wrap { padding: 2.5rem 1.25rem; }
    /* On phones/tablets the row stacks, so the hero photo sits on top of
       the form. Cap its height so it reads as a banner instead of a 560px
       wall pushing the form below the fold. */
    .contact-hero-image { min-height: 220px; }
}

/* ---------- 10. Generic page hero (used on About / News / Services /
       Legal — light eyebrow + headline + subtext, centred). --------- */

.page-hero {
    background: var(--nci-blue);
    color: #fff;
    padding: 5rem 0;
    text-align: center;
}
.page-hero .eyebrow {
    color: var(--nci-orange);
    font-weight: 600;
    font-size: 0.875rem;
    display: block;
    margin-bottom: 0.5rem;
}
.page-hero h1 {
    color: #fff;
    font-size: clamp(2rem, 3vw + 1rem, 3rem);
    font-weight: 700;
    margin-bottom: 1rem;
}
.page-hero p {
    color: rgba(255,255,255,0.8);
    font-size: 1rem;
    max-width: 640px;
    margin: 0 auto;
}

/* Light variant — white background, orange headline, dark body text.
   Used by pages that follow the hero with a full-bleed photo or are
   meant to flow naturally into a light section (e.g. About Us, where
   the Figma shows headline + subtext on white before the team photo). */
.page-hero.page-hero-light {
    background: #fff;
    color: var(--nci-body-text);
    padding-bottom: 2rem;
}
.page-hero.page-hero-light h1 {
    color: var(--nci-orange);
}
.page-hero.page-hero-light .eyebrow {
    color: var(--nci-orange);
}
.page-hero.page-hero-light p {
    color: var(--nci-body-text);
}

/* ---------- 11. About page ---------------------------------------- */

.about-mission {
    padding: 4rem 0;
    background: var(--nci-bg-soft);
}
.about-mission .mission-card {
    background: #fff;
    border-radius: var(--nci-radius-lg);
    padding: 2rem;
    height: 100%;
    border: 1px solid var(--nci-border-soft);
}
.about-mission .mission-card .icon {
    width: 48px; height: 48px;
    background: var(--nci-orange);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.25rem;
}
.about-mission .mission-card h3 {
    color: var(--nci-heading);
    font-weight: 600;
    font-size: 1.25rem;
}

/* About Us — small breathing room between hero text and header photo
   so they don't read as one stacked block. Bottom 0 because the next
   .about-intro section provides its own top padding. */
.about-header-photo {
    padding: 1.5rem 0 0;
}

/* About Us — intro paragraph between hero photo and Mission/Vision.
   Section padding standardised at 4rem (64px) top/bottom to match the
   rhythm of the other About sections (.about-mission / .about-team /
   .about-values / .about-locations). Reads cleaner to strict eyes.   */
.about-intro {
    padding: 4rem 0;
}
.about-intro p {
    font-size: 1.05rem;
    color: var(--nci-body-text);
    line-height: 1.65;
}

/* "Our Purpose and Direction" dark navy intro band. Compact (3rem
   top/bottom) because it's a section label, not full content — but
   symmetric so the band doesn't lean visually. */
.about-purpose {
    background: var(--nci-blue);
    color: #fff;
    padding: 3rem 0;
    text-align: center;
}
.about-purpose h2 {
    color: #fff;
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}
.about-purpose p {
    color: rgba(255,255,255,0.78);
    margin-bottom: 0;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* "Our Core Values" — single focused value (Reliability) per Figma. */
.about-values {
    padding: 4rem 0;
}
.about-values h2 {
    color: var(--nci-orange);
    font-weight: 700;
    font-size: clamp(1.75rem, 2vw + 1rem, 2.25rem);
    margin-bottom: 2rem;
}
.about-values .value-name {
    color: var(--nci-heading);
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.about-values .value-body {
    color: var(--nci-body-text);
    font-size: 1rem;
    line-height: 1.65;
}

/* Office Locations — dark navy band, list + map side by side. */
.about-locations {
    background: var(--nci-blue);
    color: #fff;
    padding: 4rem 0;
}
.about-locations h2 {
    color: #fff;
    font-weight: 700;
    font-size: clamp(1.75rem, 2vw + 1rem, 2.25rem);
    margin-bottom: 1rem;
}
.about-locations .lead { color: rgba(255,255,255,0.8); }
.about-locations .office-list { display: flex; flex-direction: column; gap: 1.25rem; }
.about-locations .office-item {
    background: rgba(255,255,255,0.05);
    padding: 1rem 1.25rem;
    border-radius: var(--nci-radius);
    border: 1px solid rgba(255,255,255,0.08);
}
.about-locations .office-name {
    color: #fff;
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.about-locations .office-line {
    color: rgba(255,255,255,0.8);
    font-size: 0.9rem;
    margin-top: 0.15rem;
}
.about-locations .office-line a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
}
.about-locations .office-line a:hover { color: var(--nci-orange); }
.about-locations .office-map {
    width: 100%;
    height: 100%;
    min-height: 380px;
    border-radius: var(--nci-radius);
    overflow: hidden;
    background: #1a2454;
}
@media (max-width: 991.98px) {
    .about-locations .office-map { min-height: 280px; margin-top: 1.5rem; }
}

.about-team {
    padding: 4rem 0;
}
.about-team .team-card {
    text-align: center;
}
.about-team .team-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--nci-radius);
    margin-bottom: 0.75rem;
}
.about-team .team-card .name {
    color: var(--nci-heading);
    font-weight: 600;
}
.about-team .team-card .role {
    color: var(--nci-muted);
    font-size: 0.875rem;
}

/* ---------- 12. Service detail page ------------------------------- */

.service-content {
    padding: 4rem 0;
}
.service-content .lead-img {
    width: 100%;
    border-radius: var(--nci-radius-lg);
    margin-bottom: 2rem;
}
.service-content h2 {
    color: var(--nci-heading);
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.service-content ul li { margin-bottom: 0.5rem; }

.service-benefits {
    padding: 4rem 0;
    background: var(--nci-bg-soft);
}
.service-benefits .benefit-card {
    background: #fff;
    padding: 1.5rem;
    border-radius: var(--nci-radius);
    height: 100%;
    border: 1px solid var(--nci-border-soft);
}
.service-benefits .benefit-card .num {
    color: var(--nci-orange);
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

/* ---------- 13. News list ----------------------------------------- */

.news-list {
    padding: 4rem 0;
}
.news-list .news-card {
    background: #fff;
    border: 1px solid var(--nci-border-soft);
    border-radius: var(--nci-radius);
    overflow: hidden;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.news-list .news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(20, 29, 75, 0.08);
}
.news-list .news-card .thumb {
    height: 200px;
    background-size: cover;
    background-position: center;
}
.news-list .news-card .body { padding: 1.25rem; }
.news-list .news-card .category {
    color: var(--nci-orange);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}
.news-list .news-card h6 {
    color: var(--nci-heading);
    font-weight: 600;
    font-size: 1.1rem;
}
.news-list .news-card p {
    color: var(--nci-body-text);
    font-size: 0.9rem;
}
.news-list .news-card .date {
    color: var(--nci-muted);
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

/* ---------- 14. Legal pages (Terms / Privacy / Cookies) ----------- */

.legal-content {
    padding: 4rem 0;
}
.legal-content .legal-body {
    max-width: 760px;
    margin: 0 auto;
}
.legal-content .legal-body h2 {
    color: var(--nci-heading);
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}
.legal-content .legal-body h3 {
    color: var(--nci-heading);
    font-size: 1.15rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
.legal-content .legal-body p {
    color: var(--nci-body-text);
    margin-bottom: 1rem;
}
.legal-content .legal-body ul, .legal-content .legal-body ol {
    color: var(--nci-body-text);
    padding-left: 1.25rem;
}
.legal-content .legal-meta {
    color: var(--nci-muted);
    font-size: 0.875rem;
    margin-bottom: 2rem;
}

/* ---------- 15. 404 page ------------------------------------------ */

.error-404 {
    padding: 5rem 0;
}
.error-404 .error-code {
    color: var(--nci-orange);
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.error-404 h1 {
    color: var(--nci-orange);   /* Figma 404 has the headline in orange, not dark */
    font-weight: 700;
    font-size: clamp(2rem, 3vw + 1rem, 3rem);
    margin-bottom: 1rem;
}
.error-404 .error-image img {
    width: 100%;
    border-radius: var(--nci-radius-lg);
}