/* ============================================
   CSS RESET & BASE STYLES
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Colors */
    --color-primary: #152C53;
    --color-accent: #D73F0D;
    --color-white: #FFFFFF;
    --color-light-bg: #F5F5F5;
    --color-text-dark: #152C53;
    --color-text-light: #FFFFFF;
    
    /* Fonts */
    --font-primary: 'Montserrat', sans-serif;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;
    
    /* Container */
    --container-max-width: 1200px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-dark);
    background: var(--color-white);
    overflow-x: hidden;
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: opacity var(--transition-fast);
}

a:hover {
    opacity: 0.7;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
}

h1 {
    font-size: clamp(2rem, 5vw, 3rem);
}

h2 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
}

h3 {
    font-size: clamp(1rem, 2vw, 1.5rem);
    text-transform: uppercase;
}

p {
    margin-bottom: var(--spacing-sm);
}

/* ============================================
   LAYOUT
   ============================================ */
/* Form controls don't inherit the page font by default — without this the
   tab buttons fall back to Arial and render narrower than the live site. */
button,
input,
select,
textarea {
    font-family: inherit;
}

.container {
    /* Live's container is stepped, not a single max-width. Measured on
       nbmengineering.com by loading it at each width:

         < 576   fluid (100%)
         >= 576  540px
         >= 768  768px
         >= 1024 1024px
         >= 1360 1360px

       always with 15px of padding and auto margins. A single 1360px cap
       matches live only at 1360 and above; everywhere between 576 and
       1360 it made our content dramatically wider than live's — at 657px
       live's column is 510px and ours was running nearly edge to edge. */
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1360px) {
    .container {
        max-width: 1360px;
    }
}

.section-title {
    text-align: center;
    color: var(--color-primary);
    margin: var(--spacing-md) 0;
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 82px;
    height: 3px;
    background: var(--color-accent);
    margin: 0.5rem auto 0;
}

.section-intro {
    text-align: center;
    max-width: 880px;
    margin: 0 auto var(--spacing-md);
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: var(--spacing-md) 0;
    padding-bottom: 36px;
    z-index: 100;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent);
}

.header .container {
    position: relative;
}

.header .container::after {
    content: '';
    position: absolute;
    bottom: -36px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-accent);
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    width: 150px;
}

.logo img {
    filter: brightness(0) invert(1);
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--spacing-lg);
}

.nav-menu a {
    color: var(--color-white);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1rem;
    text-shadow: 0 3px 3px rgba(0,0,0,0.1);
    transition: color var(--transition-fast);
}

.nav-menu a:hover,
.nav-menu a.active {
    color: var(--color-accent);
    opacity: 1;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
}

.nav-toggle span {
    display: block;
    width: 23px;
    height: 3px;
    background: var(--color-primary);
    border-radius: 2px;
    transition: all var(--transition-normal);
}

/* Mobile Navigation */
@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }
    
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        height: 100vh;
        background: var(--color-white);
        flex-direction: column;
        gap: 2.5rem;
        padding: var(--spacing-xl) var(--spacing-md);
        transition: right var(--transition-normal);
        box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    }
    
    .nav-menu.active {
        right: 0;
    }
    
    .nav-menu a {
        color: var(--color-primary);
        font-size: 1.25rem;
        text-shadow: none;
    }
    
    .header {
        background: var(--color-white);
        position: fixed;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        padding-bottom: 20px;
    }
    
    .logo img {
        filter: none;
    }
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-size: cover;
    background-position: center;
}

.hero-home {
    background: linear-gradient(to bottom, #005494, #ffffff);
    overflow: hidden;
}

/* Match production: image scaled over a box ~2.37x the viewport height,
   anchored top-left, so the viewport shows the rich dark-blue upper band
   (the white bottom of the panorama sits below the fold). */
.hero-home::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 237%;
    background: url('../static/media/image.5ba9c539f73dfa0d8b98.jpg') left top / cover no-repeat;
}

.hero-strings {
    position: absolute;
    top: 400px;
    left: 0;
    right: 0;
    width: 100%;
    height: 400px;
    background: url('../static/media/strings.2f447bc911da1520b964cb9ede4c236a.svg') no-repeat center;
    background-size: cover;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: right;
    padding-top: 220px;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

.hero-title {
    color: var(--color-white);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.36;
    margin-bottom: var(--spacing-md);
    text-align: right;
}

.hero-title .outline {
    color: transparent;
    -webkit-text-stroke: 2px var(--color-white);
    letter-spacing: 2px;
}

.hero-subtitle {
    color: var(--color-white);
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 500;
    max-width: 800px;
    margin-left: auto;
    text-align: right;
    line-height: 1.8;
}

@media (max-width: 768px) {
    .hero-content {
        text-align: center;
        padding-top: 120px;
    }
    
    .hero-title {
        text-align: center;
    }
    
    .hero-title .outline {
        -webkit-text-stroke: 1px var(--color-white);
    }
    
    .hero-subtitle {
        text-align: center;
        margin-left: 0;
        margin-right: 0;
    }
    
    .hero-strings {
        top: 250px;
        height: 200px;
    }
}

/* ============================================
   SERVICES SECTION
   ============================================ */
.services {
    position: relative;
    padding: var(--spacing-xl) 0;
    overflow: hidden;
}

.services-grid {
    display: grid;
    /* 5-across on desktop; reflows to fewer columns on tablet/narrow widths. */
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-md);
    position: relative;
    z-index: 2;
}

/* Tablet range: let the services reflow instead of cramming 5 columns. */
@media (max-width: 1100px) and (min-width: 769px) {
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

.service-item {
    text-align: center;
}

.service-item h3 {
    font-size: 1em;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    transition: all 1s ease;
}

.service-content p {
    font-size: 0.87em;
    line-height: 1.6;
    color: var(--color-text-dark);
}

.line-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.5rem 0 9.25rem;
    margin-top: var(--spacing-sm);
}

.line-circle::before {
    content: '';
    height: 184px;
    width: 4px;
    background: var(--color-accent);
    transition: all 1s ease;
}

.line-circle::after {
    content: '';
    background: url('../static/media/circle.c90c70ddbb55f7c10dabbb8a6bc9fa87.svg') no-repeat;
    width: 24px;
    height: 24px;
    background-size: 24px;
    transition: all 1s ease;
}

.services-illustration {
    position: relative;
    margin-top: -220px;
    z-index: 1;
}

.services-illustration img {
    width: 100%;
    max-width: 2100px;
    display: block;
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    /* Replace the tall vertical connector with a small line+dot accent to the
       left of each service — no off-screen bleed, no rotation. */
    .line-circle {
        position: absolute;
        left: 0;
        top: 0.35rem;
        flex-direction: row;
        align-items: center;
        padding: 0;
        margin: 0;
    }

    .line-circle::before {
        height: 4px;
        width: 22px;
    }

    .line-circle::after {
        width: 16px;
        height: 16px;
        background-size: 16px;
    }

    .service-item {
        position: relative;
        padding-left: 3.25rem;
        text-align: left;
    }

    /* Keep the skyline below the list instead of overlapping the text. */
    .services-illustration {
        margin-top: var(--spacing-md);
    }
}

/* ============================================
   CONTENT SECTIONS
   ============================================ */
.content-section {
    padding: var(--spacing-xl) 0;
}

.content-card {
    margin-top: var(--spacing-lg);
}

.content-image {
    width: 100%;
    height: 450px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

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

.content-text {
    padding: var(--spacing-md) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content-text p {
    font-size: 1.4rem;
    margin: 0;
}

.text-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-primary);
}

.text-link img {
    width: 18px;
    height: 32px;
}

@media (max-width: 768px) {
    .content-image {
        height: 300px;
    }
    
    .content-text {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 10px 25px;
    border: none;
    border-radius: 4px;
    font-weight: 400;
    text-align: center;
    cursor: pointer;
    transition: opacity var(--transition-fast);
    text-decoration: none;
    background-color: #fff;
    color: #152c53;
}

.btn:hover {
    opacity: 0.85;
}

.btn-primary {
    background: var(--color-white);
    color: var(--color-primary);
}

.btn img {
    width: 16px;
    height: 16px;
    position: relative;
    top: -1px;
    left: 3px;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 124px 0 8px;
    margin-top: 10.5rem;
    position: relative;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.footer h2 {
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 2.5em;
    font-size: 1rem;
}

.footer h4 {
    color: #0B9CD8;
    margin-bottom: 0;
}

.footer p {
    font-size: 0.87em;
    line-height: 1.6;
}

.footer a {
    color: var(--color-white);
}

.footer-link {
    display: inline-block;
    margin: var(--spacing-sm) 0;
}

.footer-phone {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.footer-phone img {
    width: 24px;
}

.footer-bottom {
    padding: 6rem 0 0;
    text-align: center;
}

.footer-bottom hr {
    border: none;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin-bottom: var(--spacing-md);
}

.footer-bottom p {
    font-size: 0.87em;
    margin: 0;
}

@media (max-width: 768px) {
    .footer {
        padding: var(--spacing-md) 0 8px;
        margin-top: 3rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
    }

    .footer h2 {
        margin-bottom: var(--spacing-sm);
        margin-top: var(--spacing-md);
    }

    .footer-bottom {
        padding: 2.5rem 0 0;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-center {
    text-align: center;
}

.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }

.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
/* ============================================
   ACCESSIBILITY (AODA / WCAG 2.0 AA)
   ============================================ */
.skip-link {
    position: absolute;
    left: 8px;
    top: -56px;
    z-index: 1000;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 10px 16px;
    border-radius: 4px;
    font-weight: 700;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 8px;
    opacity: 1;
    outline: 3px solid var(--color-white);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.header :focus-visible,
.footer :focus-visible {
    outline-color: var(--color-white);
}

main:focus {
    outline: none;
}

/* nbmengineering.com does not honour prefers-reduced-motion, and the QA
   brief is to match it exactly. WCAG 2.0 Level AA -- the standard AODA
   points at -- has no requirement to honour the preference (that is 2.3.3
   Animation from Interactions, added in WCAG 2.1 at Level AAA), so the
   site still passes the accessibility audit with transitions left on.
   Only instant jump-free scrolling is kept. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        scroll-behavior: auto !important;
    }
}

/* ============================================
   DARK HEADER (light-background pages)
   ============================================ */
.header-dark {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0));
}

.header-dark .logo img {
    filter: none;
}

.header-dark .nav-menu a {
    color: var(--color-primary);
    text-shadow: none;
}

.header-dark .nav-menu a:hover,
.header-dark .nav-menu a.active {
    color: var(--color-accent);
}

.header-dark :focus-visible {
    outline-color: var(--color-accent);
}

/* Mobile: the fixed header must be fully opaque so no page content shows above
   the accent line. (The .header-dark gradient is for the desktop hero overlay.)
   Also pull the accent line to the header's bottom edge so there is no gap. */
@media (max-width: 768px) {
    .header,
    .header-dark {
        background: var(--color-white);
    }

    .header .container::after {
        bottom: -20px;
    }
}

/* ============================================
   HERO TEXT ON LIGHT-IMAGE PAGES
   ============================================ */
.hero-about .hero-title,
.hero-industries .hero-title,
.hero-careers .hero-title,
.hero-about .hero-subtitle,
.hero-industries .hero-subtitle,
.hero-careers .hero-subtitle {
    color: var(--color-primary);
}

.hero-about .hero-title .outline,
.hero-industries .hero-title .outline,
.hero-careers .hero-title .outline {
    color: transparent;
    -webkit-text-stroke: 2px var(--color-primary);
}

@media (max-width: 768px) {
    .hero-about .hero-title .outline,
    .hero-industries .hero-title .outline,
    .hero-careers .hero-title .outline {
        -webkit-text-stroke: 1px var(--color-primary);
    }
}

/* Keep white hero text readable where the home sky fades to white */
.hero-home .hero-title,
.hero-home .hero-subtitle {
    text-shadow: 0 1px 6px rgba(0, 40, 80, 0.35);
}

/* ============================================
   FOOTER DECORATIVE MARK + BUTTON FIX
   ============================================ */
.footer {
    margin-top: 7rem;
}

.footer-logo {
    position: absolute;
    top: -104px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 156px;
    background: url('../static/media/footer-bars.png') no-repeat center center;
    background-size: contain;
    pointer-events: none;
}

/* Apply now button text was white-on-white via .footer a override */
.footer .btn-primary {
    color: var(--color-primary);
}

.footer .btn-primary:hover {
    color: var(--color-primary);
}

@media (max-width: 768px) {
    .footer-logo {
        /* On small screens, sit the mark INSIDE the footer (no protruding into
           the white gap) and tint it light so it reads on the navy. */
        position: static;
        display: block;
        width: 120px;
        height: 60px;
        margin: 0 auto var(--spacing-md);
        top: auto;
        left: auto;
        transform: none;
        filter: brightness(0) invert(1);
        opacity: 0.9;
    }
}

/* Home hero: lift content onto the blue sky (match production ~38% title) */
.hero-home .hero-content {
    padding-top: 130px;
}

/* ============================================
   HOME HERO LAYOUT (match production)
   title right @38%, subtitle left @47%, full-width
   ============================================ */
.hero-home {
    display: block;
    align-items: initial;
}

.hero-home .container {
    position: relative;
    min-height: 100vh;
}

.hero-home .hero-content {
    display: contents;
}

.hero-home .hero-title {
    position: absolute;
    top: 36%;
    left: 40px;
    right: 40px;
    text-align: right;
    margin: 0;
    z-index: 2;
}

.hero-home .hero-subtitle {
    position: absolute;
    top: 47%;
    left: 40px;
    right: 40px;
    text-align: left;
    max-width: none;
    margin: 0;
    z-index: 2;
}

@media (max-width: 768px) {
    .hero-home .container {
        position: static;
        min-height: 0;
    }
    .hero-home .hero-content {
        display: block;
    }
    .hero-home .hero-title,
    .hero-home .hero-subtitle {
        position: static;
        text-align: center;
        left: auto;
        right: auto;
    }
}

/* ============================================================
   MOBILE HEADER — match live: compact logo and a circular menu
   button (live measures ~120px logo, ~44px round button).
   ============================================================ */
@media (max-width: 768px) {
    .logo img {
        width: 120px;
        height: auto;
    }

    .nav-toggle {
        width: 44px;
        height: 44px;
        padding: 0;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
    }

    .nav-toggle span {
        width: 20px;
        height: 2.5px;
    }
}

/* ============================================================
   MOBILE — reconciled to live nbmengineering.com
   Live keeps the header transparent over the hero on phones (the
   logo inverts on Home, stays navy on inner pages) and keeps the
   hero's desktop alignment rather than centring everything.
   ============================================================ */
@media (max-width: 768px) {
    .header,
    .header-dark {
        background: transparent;
    }

    /* Home = .header only; inner pages also carry .header-dark */
    .header:not(.header-dark) .logo img {
        filter: brightness(0) invert(1);
    }

    .header-dark .logo img {
        filter: none;
    }

    /* Live shows a soft light rule on Home and none on inner pages */
    .header:not(.header-dark) .container::after {
        background: rgba(255, 255, 255, 0.6);
    }

    .header-dark .container::after {
        display: none;
    }

    /* Home hero keeps its split alignment: title upper-right, intro lower-left */
    .hero-home .container {
        position: relative;
        min-height: 100vh;
    }

    .hero-home .hero-content {
        display: contents;
    }

    .hero-home .hero-title {
        position: absolute;
        top: 21%;
        left: 24px;
        right: 24px;
        text-align: right;
        margin: 0;
        z-index: 2;
    }

    .hero-home .hero-subtitle {
        position: absolute;
        top: 57%;
        left: 24px;
        right: 24px;
        text-align: left;
        max-width: none;
        margin: 0;
        z-index: 2;
    }
}

/* Live sets the Home intro tighter on mobile than the 1.8 body leading. */
@media (max-width: 768px) {
    .hero-home .hero-subtitle {
        line-height: 1.35;
    }
}

/* ============================================================
   MOBILE MENU — smooth, graceful open/close
   Slides on transform (compositor-driven, so it stays at 60fps on
   phones) instead of animating `right`, which forces layout each
   frame. Adds a fading backdrop, a scroll lock, and morphs the
   hamburger into a close icon.
   ============================================================ */
@media (max-width: 768px) {
    .nav-menu {
        right: 0;
        transform: translateX(100%);
        transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
        will-change: transform;
        box-shadow: -8px 0 28px rgba(10, 22, 44, 0.18);
    }

    .nav-menu.active {
        transform: translateX(0);
    }

    /* Dim the page behind the panel. The header (and the panel inside it)
       sits at z-index 100, so this sits just underneath at 99. */
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 99;
        background: rgba(10, 22, 44, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.34s ease;
    }

    body.nav-open::before {
        opacity: 1;
        pointer-events: auto;
    }

    /* Stop the page scrolling behind an open menu */
    body.nav-open {
        overflow: hidden;
    }

    /* Hamburger morphs into a close (X) icon */
    .nav-toggle span {
        transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
                    opacity 0.2s ease;
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(8.5px) rotate(45deg);
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0.4);
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-8.5px) rotate(-45deg);
    }

    /* No sticky/solid state on scroll: live keeps the header absolutely
       positioned at every width, so it simply scrolls away with the page.
       (This is what produced the white bar with the navy logo locally.) */
}



/* Keep the toggle above the open panel so the X is visible and tappable
   as a close button, rather than being covered by the menu. */
@media (max-width: 768px) {
    .nav-toggle {
        position: relative;
        z-index: 3;
    }
}

/* ============================================================
   HOME SERVICES HEADING — reconciled to live
   Live renders "Complex solutions, simplified." at 25.6px / 500 with
   no accent underline, not as a bold 36px section title.
   ============================================================ */
.services .section-title {
    font-size: 1.6rem;
    font-weight: 500;
}

.services .section-title::after {
    display: none;
}

/* Live renders the Home service names in Title Case, not uppercase
   (the global h3 rule uppercases them). Scoped so other h3s are unaffected. */
.service-item h3 {
    text-transform: none;
}

/* ============================================================
   HOME — reconciled to live nbmengineering.com
   Measured live @1707x842:
     sky layer   1692x1645 (195% of viewport height), not 237%
     h1          y260  = 31%    subtitle y567 = 67%
     services    all five items bottom-aligned at y1644 with
                 staggered heights; 221px columns, 56px gutters,
                 left-aligned text
   ============================================================ */
.hero-home::before {
    /* live scales the sky over 1645px, not 2128px — the extra height
       was over-zooming the image */
    height: 195%;
}

.hero-home .hero-title {
    top: 31%;
}

.hero-home .hero-subtitle {
    top: 67%;
}

.services-grid {
    gap: 56px;
    align-items: start;
}

.service-item {
    text-align: left;
}

/* Live staggers the columns by giving each a different height while
   bottom-aligning them, so the circles sit on a wave. */
.service-item:nth-child(1) { margin-top: 80px; }
.service-item:nth-child(2) { margin-top: 0; }
.service-item:nth-child(3) { margin-top: 130px; }
.service-item:nth-child(4) { margin-top: 10px; }
.service-item:nth-child(5) { margin-top: 110px; }

@media (max-width: 768px) {
    /* No stagger on phones — a single column reads top to bottom */
    .service-item:nth-child(n) {
        margin-top: 0;
    }
    .services-grid {
        gap: var(--spacing-md);
    }
}

/* ============================================================
   FOOTER RAYS — reconciled to live
   Live keeps the rays at a fixed 300x156, absolutely positioned and
   overlapping the section above, at every width. The theme was
   shrinking them to 120x60 and inverting them on phones.
   ============================================================ */
@media (max-width: 768px) {
    .footer-logo {
        display: block;
        position: absolute;
        top: -104px;
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
        height: 156px;
        margin: 0;
        filter: none;
        opacity: 1;
    }
}

/* ============================================================
   HOME — SKY PANORAMA SPANS HERO + SERVICES
   Live paints the photo and the blue-to-white gradient over ONE
   box that covers the hero and the services section together
   (measured 1692x1645 @1707px). The theme was painting it inside
   the hero only, with overflow:hidden, so the sky stopped dead at
   the fold and the services sat on flat white.
   ============================================================ */
.home-sky {
    position: relative;
    background: url('../static/media/image.5ba9c539f73dfa0d8b98.jpg') left top / cover no-repeat,
                linear-gradient(#005494, #ffffff);
}

.hero-home {
    background: none;
    overflow: visible;
}

/* the old in-hero sky layer is replaced by .home-sky above */
.hero-home::before {
    display: none;
}

.services {
    background: transparent;
}

/* ============================================================
   HOME HERO — THE FAINT RAYS
   Live layers a fan of translucent bars over the sky: a 1849x1205
   artwork in a 1000px-tall box, centred, background-size:contain,
   at 60% opacity (the bars themselves are #4E4E4E at 10% alpha,
   so the net effect is ~6% — very faint and rather large).
   ============================================================ */
.hero-rays {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: 1000px;
    margin: 0 auto;
    background: url('../static/media/hero-rays.svg') no-repeat center center;
    background-size: contain;
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 1160px) {
    .hero-rays {
        background-size: cover;
    }
}

@media (max-width: 768px) {
    .hero-rays {
        background-size: 800px;
    }
}

/* ============================================================
   HOME SERVICES — HOVER BEHAVIOUR
   On live, pointing at a service turns its heading orange, retracts
   the orange line from 204px to 84px and grows the dot from 24px to
   30px, all over a 1s transition. The theme drew the line and the
   dot but had no hover state at all.

   The fixed content-box height is what keeps the column from
   collapsing as the line retracts: the dot is pinned to the bottom
   (justify-content:flex-end) and only the line's top edge moves.
   ============================================================ */
.service-item {
    cursor: pointer;
}

.line-circle {
    box-sizing: content-box;
    justify-content: flex-end;
    height: 230px;
    width: 100%;
    margin-top: 0;
    cursor: default;
}

.line-circle::before {
    height: 204px;
}

.service-item:hover h3,
.service-item:focus-within h3 {
    color: var(--color-accent);
}

.service-item:hover .line-circle::before,
.service-item:focus-within .line-circle::before {
    height: 84px;
}

.service-item:hover .line-circle::after,
.service-item:focus-within .line-circle::after {
    width: 30px;
    height: 30px;
    background-size: 29px;
}

/* ============================================================
   HOME SERVICES — GEOMETRY RECONCILED TO LIVE
   Measured on nbmengineering.com @1707x842:
     section          y842  h803   (ends flush at 1645)
     "Complex..."     y887  h41    25.6px/500, 54px below it
     columns          y982, x182/459/735/1012/1289, w221
     headings         y1068 / 988 / 1118 / 998 / 1098, 26px tall
     body             67px tall, sitting straight under the heading
     line + dot       434px tall, tops at y1161 / 1081 / 1211 / 1091 / 1191
     skyline          y1215 h430, pinned to the bottom of the section
   ============================================================ */
.services {
    padding: 45px 0 0;
}

.services .section-title {
    margin-top: 0;
    margin-bottom: 54px;
    line-height: 1.6;
}

.service-item h3 {
    line-height: 1.6;
    margin-bottom: 0;
}

/* the body copy sits directly on the line, with no trailing gap */
.service-content p {
    margin-bottom: 0;
}

.service-item:nth-child(1) { margin-top: 86px; }
.service-item:nth-child(2) { margin-top: 6px; }
.service-item:nth-child(3) { margin-top: 136px; }
.service-item:nth-child(4) { margin-top: 16px; }
.service-item:nth-child(5) { margin-top: 116px; }

/* Live pins the skyline to the bottom of the services box and lets it
   bleed off both edges (background-size:cover, anchored centre-bottom)
   rather than laying it out in the flow. */
.services-illustration {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 430px;
    margin: 0;
    z-index: 0;
    background-repeat: repeat-x;
    background-position: center bottom;
    background-size: cover;
}

.services-illustration img {
    display: none;
}

@media (max-width: 1401px) {
    .services-illustration {
        height: 340px;
        background-size: 3000px;
    }
}

@media (max-width: 768px) {
    .services {
        padding: 45px 0 var(--spacing-lg);
    }

    .service-item:nth-child(n) {
        margin-top: 0;
    }

    .services-illustration {
        height: 200px;
        background-size: 1400px;
    }
}

/* ============================================================
   MOBILE — HEADER SCROLLS AWAY, AS ON LIVE
   nbmengineering.com uses position:absolute for the header at every
   width, so it travels with the page instead of sticking. The theme
   pinned it (position:fixed) on phones, which then needed a solid
   white background once you scrolled — that white bar with the navy
   logo is the difference visible in the QA screenshots.
   ============================================================ */
@media (max-width: 768px) {
    .header,
    .header-dark {
        position: absolute;
        box-shadow: none;
    }
}

/* ============================================================
   MOBILE HOME — SKY, POWER LINES AND SERVICE COLUMNS
   Live at <=577px swaps the panorama for a portrait crop pulled up
   100px; at <=767.5px it drops the power-line band to y380 and lays
   the orange line on its side to the left of each service.
   ============================================================ */
@media (max-width: 576px) {
    .home-sky {
        background-image: url('../static/media/image-mobile.0c20872ea22e720e53ae.jpg');
        background-position-y: -100px;
    }
}

@media (max-width: 768px) {
    .hero-strings {
        top: 380px;
        height: 200px;
    }

    .service-item {
        position: relative;
    }

    .service-item h3,
    .service-item .service-content {
        padding-left: 3.5rem;
    }

    .service-item h3 {
        font-size: 1em;
    }

    .service-content p {
        font-size: 0.87em;
    }

    /* the line lies horizontally beside the text rather than dropping
       from it, so it never retracts on touch */
    .line-circle {
        position: absolute;
        left: -80px;
        top: -86px;
        width: auto;
        height: auto;
        padding: 0;
        transform: rotate(-90deg);
    }

    .line-circle::before,
    .service-item:hover .line-circle::before,
    .service-item:focus-within .line-circle::before {
        height: 220px;
    }

    .line-circle::after,
    .service-item:hover .line-circle::after,
    .service-item:focus-within .line-circle::after {
        width: 20px;
        height: 20px;
        background-size: 20px;
        transition: none;
    }
}

/* ============================================================
   HOME SERVICES ON PHONES — ONE OPEN AT A TIME, AS ON LIVE
   Live shows a single service expanded with an orange "more services"
   pill beneath it and collapses the rest to their heading; the orange
   line lies on its side, running off the left edge to a ring that sits
   just left of the heading. The pill is hidden entirely on desktop,
   where all five bodies are always visible.
   ============================================================ */
.more-services-link {
    display: none;
}

@media (max-width: 768px) {
    .service-item .service-content {
        display: none;
    }

    .service-item.is-open .service-content {
        display: block;
    }

    .service-item h3 {
        cursor: pointer;
    }

    .more-services-link {
        display: inline-block;
        margin-top: 10px;
        padding: 3px 10px;
        border-radius: 50px;
        background: var(--color-accent);
        color: var(--color-white);
        font-size: 0.7rem;
        text-decoration: none;
    }

    .more-services-link:hover,
    .more-services-link:focus {
        color: var(--color-white);
        opacity: 0.9;
    }

    /* the rotated line must stay 4px thin — without an explicit width
       the flex column stretches it to the ring's width and it renders
       as a fat bar that swallows the ring */
    .line-circle {
        align-items: center;
        justify-content: flex-start;
        min-height: 0;
        margin: 0;
    }

    .line-circle::before,
    .service-item:hover .line-circle::before,
    .service-item:focus-within .line-circle::before {
        width: 4px;
        height: 220px;
    }

    /* live keeps the skyline at its 1401px sizing all the way down —
       shrinking it was making the city look like a distant sliver */
    .services-illustration {
        height: 340px;
        background-size: 3000px;
    }
}

/* The home hero text is positioned against the container box, so the
   offsets have to match the container's 15px padding — with the old 40px
   they sat 25px inside live's edges (live's H1 ends flush at x1511). */
.hero-home .hero-title,
.hero-home .hero-subtitle {
    left: 15px;
    right: 15px;
}

@media (max-width: 768px) {
    .hero-home .hero-title,
    .hero-home .hero-subtitle {
        left: 15px;
        right: 15px;
    }
}

/* live sets the home intro on 1.2 leading (30.72px), not the 1.8 body
   leading — ours ran two lines 31px taller than live's */
.hero-home .hero-subtitle {
    line-height: 1.2;
}

/* ============================================================
   FOOTER — RECONCILED TO LIVE
   Live measures three 423px columns with 30px gutters, headings at
   16.848px/700 and body copy at 14.4px in the thin weight.
   ============================================================ */
.footer-grid {
    gap: 30px;
}

.footer h2 {
    font-size: 1.053rem;
}

.footer p,
.footer li,
.footer a,
.footer address {
    font-size: 0.9rem;
    font-weight: 100;
}

/* ============================================================
   HOME ON PHONES — MEASURED ON LIVE AT 390px
     hero        640px tall (not full viewport), content in flow
     title       y160, 32px/700 on 1.36, right aligned
     intro       y463, 19.2px/500 on 1.2, left aligned
     services    heading y712 at 19.2px, service headings 16px/600,
                 collapsed rows on a 42px pitch, pill at 11.2px
     preview     section headings 19.2/500 left, body 12.8/500 left
   ============================================================ */
@media (max-width: 768px) {
    .hero-home {
        display: block;
        min-height: 640px;
        height: auto;
        max-height: 800px;
    }

    .hero-home .container {
        position: static;
        min-height: 0;
    }

    .hero-home .hero-content {
        display: block;
        padding: 0;
    }

    .hero-home .hero-title {
        position: static;
        margin: 160px 0 0;
        left: auto;
        right: auto;
        top: auto;
        text-align: right;
        font-size: 2rem;
        line-height: 1.36;
    }

    .hero-home .hero-subtitle {
        position: static;
        margin: 216px 0 0;
        left: auto;
        right: auto;
        top: auto;
        text-align: left;
        font-size: 1.2rem;
        line-height: 1.2;
        max-width: none;
    }

    .services {
        padding: 72px 0 0;
    }

    .services .section-title {
        font-size: 1.2rem;
        margin-bottom: 21.25px;
    }

    .service-item h3 {
        font-size: 1rem;
        font-weight: 600;
        margin: 0;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .services-grid {
        gap: 0;
    }

    /* the preview sections below the services */
    .content-section .section-title {
        font-size: 1.2rem;
        font-weight: 500;
        text-align: left;
    }

    .content-section .section-title::after {
        display: none;
    }

    .content-section p,
    .content-section .section-intro {
        font-size: 0.8rem;
        font-weight: 500;
        text-align: left;
        line-height: 1.8;
    }

    .content-section .text-link {
        font-size: 1rem;
        font-weight: 400;
    }
}

/* the title's top margin was collapsing out of the hero and pushing the
   whole section down 160px, so the offset is carried as padding instead */
@media (max-width: 768px) {
    .hero-home .hero-content {
        padding-top: 160px;
    }

    .hero-home .hero-title {
        margin-top: 0;
    }

    .service-item {
        padding-left: 0;
    }

    .content-section .text-link,
    .content-section .text-link span {
        font-size: 1rem;
        font-weight: 400;
    }
}

@media (max-width: 768px) {
    /* live drops the outlined word onto its own shrink-wrapped block, so
       it sits at the left edge while "ENGINEERING" stays right aligned */
    .hero-home .hero-title .outline {
        display: block;
        width: fit-content;
    }

    /* live leaves 101px between the services heading and the first row */
    .services .section-title {
        margin-bottom: 70px;
    }
}

@media (max-width: 768px) {
    /* live keeps the section intro small (12.8/500) but sets the card copy
       back to 16/400 */
    .content-section .content-text p {
        font-size: 1rem;
        font-weight: 400;
    }
}

@media (max-width: 768px) {
    /* live's service row: a 26px heading with 16px above it and the copy
       hanging off a 56px indent — 42px per collapsed row */
    .service-item h3 {
        line-height: 1.6;
        margin: 16px 0 0;
        padding: 0 0 0 3.5rem;
    }

    .service-item .service-content {
        padding-left: 3.5rem;
    }

    .service-content p {
        line-height: 1.6;
        margin: 0;
    }

    .more-services-link {
        margin-top: 0;
    }

    /* live swaps the skyline for a 2976x300 rendering pinned near the
       bottom of the sky box rather than scaling the desktop one down */
    .services-illustration {
        height: 300px;
        bottom: 7px;
        background-size: 2976px 300px;
        background-position: -800px bottom;
        background-repeat: no-repeat;
    }
}

@media (max-width: 768px) {
    /* 54px under the heading (the row's own 16px margin makes up the rest
       of live's 101px) and 185px of air below the last row, which is what
       gives the skyline room to sit where live puts it */
    .services {
        padding: 72px 0 185px;
    }

    .services .section-title {
        margin-bottom: 54px;
    }
}

@media (max-width: 768px) {
    /* live opens the About preview 32px under the sky box */
    .content-section {
        padding: 32px 0;
    }

    .content-section .section-title {
        margin-top: 0;
    }
}

/* the closed off-canvas menu sits just outside the viewport, which makes
   the document scrollable sideways on a phone; live suppresses it too */
@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden;
    }
}

@media (max-width: 768px) {
    /* the rotated marker has to be an explicit 20x240 box (live's is), or
       the flex column collapses the ring out of the layout and only the
       line renders */
    .line-circle {
        box-sizing: content-box;
        width: 20px;
        height: 240px;
    }
}

@media (max-width: 768px) {
    /* the marker must stay a column before it is rotated, otherwise the
       line and the ring sit side by side and both get squeezed to nothing */
    .line-circle {
        flex-direction: column;
    }
}

/* live steps the marker down below 1160px: a 3px line, a 20px ring and
   tighter padding. The padding has to stop at 769 — below that the marker
   is rotated and live zeroes it. Left in, it grew the rotated box by
   136px and pushed every ring about 68px below its own heading. */
@media (min-width: 769px) and (max-width: 1160px) {
    .line-circle {
        padding: 2.5rem 0 6rem;
    }
}

@media (max-width: 1160px) {

    .line-circle::before {
        width: 3px;
    }

    .line-circle::after {
        width: 20px;
        height: 20px;
        background-size: 20px;
    }
}

/* ============================================================
   HERO TYPE — LIVE'S STEPS, NOT A FLUID CLAMP
   Live holds the hero title at 3rem all the way down to 768px and then
   drops to 2rem (1.875rem below 376px); the intro holds 1.6rem then
   drops to 1.2rem. Our clamp() was interpolating between them, so every
   hero was a few points small between about 770px and 1200px.
   ============================================================ */
.hero-title {
    font-size: 3rem;
}

.hero-subtitle {
    font-size: 1.6rem;
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }
}

@media (max-width: 376px) {
    .hero-title {
        font-size: 1.875rem;
    }
}

/* ============================================================
   THE 578-767 TIER
   Live has three type scales, not two: the phone sizes only apply
   below 578px. Between 578 and 767 the section headings go to 24px
   and body copy back to 16px, and the hero's outlined word returns
   to the flow instead of taking its own line. Measured at 657px.
   ============================================================ */
@media (min-width: 578px) and (max-width: 767px) {
    .services .section-title {
        font-size: 1.5rem;
    }

    .content-section p,
    .content-section .section-intro,
    .content-section .content-text p {
        font-size: 1rem;
    }

    .hero-home .hero-title .outline {
        display: inline-block;
        width: auto;
    }
}

/* ============================================================
   SERVICES COLUMNS AT TABLET WIDTHS
   Live keeps all five service columns on one row right down to its
   767.5px breakpoint — at 800px they are 123px wide with a 31px gutter.
   The theme reflowed to a minmax(180px) grid between 769 and 1100,
   which wrapped them onto two rows and broke the wave the markers sit
   on. Five across, as on live.
   ============================================================ */
@media (min-width: 769px) and (max-width: 1100px) {
    .services-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 31px;
    }
}

/* Live shrinks the service type between 769 and 1160 (headings 0.8em and
   nowrap, body 0.7em) so five equal columns still fit. Without it the
   "Telecommunications" column cannot shrink below its longest word and
   steals width from the others — 111/111/111/111/171 instead of live's
   even 123s. minmax(0, 1fr) keeps the tracks equal regardless. */
@media (min-width: 769px) and (max-width: 1160px) {
    .services-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .service-item h3 {
        font-size: 0.8em;
        white-space: nowrap;
    }

    .service-content p {
        font-size: 0.7em;
    }
}

/* ============================================================
   HOME HERO — POWER LINES AND SKY, CORRECTED TO LIVE
   The wires layer is a wide SVG drawn with background-size:cover into
   a short box, so the background-position decides which slice of it
   shows. Live leaves it at 0% 0%; the theme centred it, which slid the
   wires down into the intro text — visible as lines running through
   "Infrastructure design & coordination." This affects every width,
   not just phones.

   Live also paints the gradient behind the photograph at cover; ours
   left it at auto.
   ============================================================ */
.hero-strings {
    background-position: 0 0;
}

.home-sky {
    background-size: cover, cover;
}

/* the 578-767 tier again: the intro is 24px here, and live opens the
   hero 170px down rather than 160 */
@media (min-width: 578px) and (max-width: 767px) {
    .hero-home .hero-content {
        padding-top: 170px;
    }

    .hero-home .hero-subtitle {
        font-size: 1.5rem;
        margin-top: 219px;
    }
}