/* Industries Page Specific Styles */

.hero-industries {
    background: url('../static/media/image.60645563389eb9ad6312.png') center/cover no-repeat;
    min-height: 100vh;
}

.hero-industries .hero-content {
    padding-top: 150px;
}

.hero-industries .hero-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1.2;
    text-align: left;
}

.hero-industries .hero-subtitle {
    text-align: left;
    margin-left: 0;
    max-width: 100%;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.tabs-section {
    padding-top: 110px;
}

.tab-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    margin-bottom: var(--spacing-xl);
    border-bottom: 1px solid #E0E0E0;
}

.tab-button {
    background: none;
    border: none;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-primary);
    cursor: pointer;
    position: relative;
    transition: color var(--transition-fast);
    white-space: nowrap;
}

.tab-button:hover {
    color: var(--color-accent);
}

.tab-button.active {
    color: var(--color-accent);
}

.tab-button.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-accent);
}

.tab-content {
    display: none;
    padding: var(--spacing-md) 0 var(--spacing-xl);
}

.tab-content.active {
    display: block;
}

.content-wrapper {
    max-width: 880px;
    margin: 0 auto;
    background: var(--color-light-bg);
    padding: var(--spacing-xl) var(--spacing-lg);
    border-radius: 8px;
}

.industry-header {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--spacing-md);
    align-items: start;
    margin-bottom: var(--spacing-xl);
}

.industry-icon {
    width: 100%;
    height: auto;
}

.industry-header p {
    line-height: 1.8;
}

.services-section {
    margin-top: var(--spacing-xl);
}

.services-title {
    color: var(--color-primary);
    text-align: center;
    margin-bottom: var(--spacing-md);
    position: relative;
    padding-bottom: var(--spacing-sm);
}

.services-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 82px;
    height: 3px;
    background: var(--color-accent);
}

.services-grid-industry {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--spacing-lg);
    align-items: start;
}

.services-list-industry {
    list-style: none;
    padding: 0;
    margin: 0;
}

.services-list-industry li {
    color: var(--color-primary);
    padding: var(--spacing-xs) 0;
    font-size: 0.9rem;
    line-height: 1.6;
}

.services-list-industry li::before {
    content: '•';
    color: var(--color-accent);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-right: 0.5em;
}

.service-image-container {
    position: sticky;
    top: 120px;
}

.service-image-container img {
    width: 100%;
    border-radius: 50%;
}

@media (max-width: 768px) {
    .hero-industries {
        min-height: 650px;
    }
    
    .hero-industries .hero-content {
        text-align: center;
        padding-top: 120px;
    }
    
    .hero-industries .hero-title {
        text-align: center;
    }
    
    .hero-industries .hero-subtitle {
        text-align: center;
    }
    
    .tab-list {
        flex-direction: column;
        gap: 0;
    }
    
    .tab-button {
        padding: var(--spacing-sm);
        font-size: 0.85rem;
    }
    
    .content-wrapper {
        padding: var(--spacing-md);
    }
    
    .industry-header {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .industry-icon {
        max-width: 120px;
        margin: 0 auto;
    }
    
    .services-grid-industry {
        grid-template-columns: 1fr;
    }
    
    .service-image-container {
        position: static;
        max-width: 200px;
        margin: var(--spacing-md) auto 0;
    }
}
/* ============================================
   INDUSTRIES HERO LAYOUT (match production)
   title top-right, subtitle bottom-right
   ============================================ */
.hero-industries {
    display: block;
    align-items: initial;
}

.hero-industries .container {
    position: static;
}

.hero-industries .hero-content {
    position: static;
    padding: 0;
    max-width: none;
}

.hero-industries .hero-title {
    position: absolute;
    top: 18%;
    right: 5%;
    text-align: right;
    margin: 0;
    z-index: 2;
}

.hero-industries .hero-subtitle {
    position: absolute;
    top: 76%;
    right: 5%;
    text-align: right;
    margin: 0;
    z-index: 2;
}

@media (max-width: 768px) {
    .hero-industries .hero-title,
    .hero-industries .hero-subtitle {
        position: static;
        text-align: center;
        right: auto;
    }
    .hero-industries .hero-content {
        padding-top: 120px;
    }
}

/* ============================================
   INDUSTRIES — tabs over the hero map + centered content (match production)
   ============================================ */
.hero-industries .tab-list {
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 6%;
    margin: 0;
    justify-content: flex-start;
    gap: var(--spacing-md);
    border-bottom: 2px solid var(--color-accent);
    z-index: 3;
}

.hero-industries .tab-button {
    padding: var(--spacing-sm) 0;
    font-size: 1rem;
}

/* Content card: illustration on top, centered heading + paragraph */
.tabs-section {
    padding-top: var(--spacing-xl);
}

.industry-header {
    display: block;
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.industry-icon {
    display: block;
    width: auto;
    max-width: 440px;
    height: auto;
    margin: 0 auto var(--spacing-md);
}

.industry-header > div {
    max-width: 640px;
    margin: 0 auto;
}

.industry-header p {
    text-align: center;
    line-height: 1.8;
    margin: 0 auto;
}

/* ============================================
   INDUSTRIES — mobile: stop tabs overlapping the hero title.
   Title + subtitle over the map, then a clean stacked tab menu below.
   ============================================ */
@media (max-width: 768px) {
    .hero-industries {
        min-height: 0;
    }

    .hero-industries .hero-content {
        padding: 110px 0 var(--spacing-lg);
    }

    .hero-industries .hero-title {
        font-size: clamp(2rem, 8vw, 2.75rem);
    }

    .hero-industries .tab-list {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        flex-direction: column;
        gap: 0;
        margin: 0;
        border-bottom: none;
        background: var(--color-white);
        border-radius: 8px;
        overflow: hidden;
    }

    .hero-industries .tab-button {
        width: 100%;
        text-align: center;
        padding: var(--spacing-md);
        font-size: 0.95rem;
        border-bottom: 1px solid #E0E0E0;
    }

    .hero-industries .tab-button:last-child {
        border-bottom: none;
    }
}

@media (min-width: 769px) {
/* Desktop-only: these override the mobile rules above, so they must
   not apply below the 768px breakpoint or the hero collapses. */
/* ============================================================
   INDUSTRIES HERO — reconciled to live nbmengineering.com
   Measured live @1707px viewport / 842px hero:
     header : solid translucent white band rgba(255,255,255,.7)
     h1     : 48px / 1.36, #152C53, uppercase, right aligned, top 216 (25.6%)
     h2     : 25.6px / 1.6, #152C53, right aligned, top 564 (67%)
     tabs   : 16px / 700, Title Case (NOT uppercase), 25px gaps,
              row 1330px wide with a 2px accent rule, bottom 6%
   ============================================================ */

/* Live uses a solid translucent white band on this page.
   (About keeps the dark gradient, so this stays in industries.css only.) */
.header-dark {
    background: rgba(255, 255, 255, 0.7);
}

.hero-industries .hero-title {
    position: absolute;
    top: 25.6%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 1330px;
    max-width: calc(100% - 80px);
    margin: 0;
    text-align: right;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.36;
    color: var(--color-primary);
}

.hero-industries .hero-subtitle {
    position: absolute;
    top: 67%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 1330px;
    max-width: calc(100% - 80px);
    margin: 0;
    text-align: right;
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 500;
    line-height: 1.6;
    color: var(--color-primary);
}

.hero-industries .tab-list {
    position: absolute;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 1330px;
    max-width: calc(100% - 80px);
    bottom: 6%;
    margin: 0;
    justify-content: flex-start;
    gap: 25px;
    padding-left: 12px;
    border-bottom: 2px solid var(--color-accent);
    z-index: 3;
}

.hero-industries .tab-button {
    padding: 20px 0;
    font-size: 1rem;
    line-height: 1.6;
    text-transform: none;
}

/* Live marks the active tab with colour only — no separate underline segment */
.hero-industries .tab-button.active::after {
    display: none;
}
}

/* ============================================================
   INDUSTRIES CONTENT PANEL — reconciled to live
   Live measurements @1707px viewport:
     panel  x464 w763, starts flush with the hero (no section gap),
            padding 56px 0 148px, square corners, #F6F7F9
     icon   440x280 at y898 (= hero bottom + 56 panel padding)
     copy   545px wide, centred
     services block 700px wide, centred
   ============================================================ */
.tabs-section {
    padding-top: 0;
}

.content-wrapper {
    max-width: 763px;
    padding: 56px 0 148px;
    border-radius: 0;
    background: #F6F7F9;
}

.industry-header > div {
    max-width: 545px;
}

.services-section {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Live has no gap between the hero and the panel — the tab pane adds none. */
.tab-content {
    padding: 0;
}

/* AODA / WCAG 2.0 AA — the brand orange on the #F6F7F9 panel measures
   4.25:1, just under the 4.5:1 minimum for text. This slightly darker
   orange measures 4.67:1 and is visually near-identical. Applied to the
   service bullets only; decorative rules keep the brand colour. */
.services-list-industry li::before {
    color: #CC3B0C;
}

/* Live right-aligns the Industries hero on mobile, matching desktop. */
@media (max-width: 768px) {
    .hero-industries .hero-title,
    .hero-industries .hero-subtitle {
        text-align: right;
    }
}

/* Mobile: full-height hero, title/intro centred, tab menu at the foot.
   Labels stay Title Case as on desktop. */
@media (max-width: 768px) {
    .hero-industries {
        min-height: 100vh;
    }

    .hero-industries .container {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 110px 24px 28px;
    }

    .hero-industries .hero-content {
        display: block;
    }

    .hero-industries .tab-list {
        margin-top: auto;
    }

    .hero-industries .tab-button {
        text-transform: none;
        font-size: 1rem;
    }
}

/* Centre the title/intro block in the mobile hero. */
@media (max-width: 768px) {
    .hero-industries .hero-content {
        margin-top: auto;
    }
}

/* ============================================================
   INDUSTRIES PANEL — TYPOGRAPHY AND SERVICE LIST RECONCILED TO LIVE
   Measured on nbmengineering.com @1707x842:
     "Reputation & Expertise"  x574 y1219 w545  25.6px / 500 / 1.6
                                margins 21.25px, 82x3 navy rule under it
     intro paragraph           16px / 500 / 1.8
     "Services"                x496 y1573 w700, same treatment
     service rows              x484 w426, 32px indent, text 16px / 500,
                               29px pitch, marker is a 3x20 cyan bar
                               (#0B9CD8) centred on the row -- not an
                               orange bullet
     tab photo                 200x200 circle, absolute, top -130 right -120
   ============================================================ */
.industry-header .section-title,
.services-title {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.6;
    margin-top: 21.25px;
    margin-bottom: 21.25px;
    padding-bottom: 15px;
    text-align: center;
    color: var(--color-primary);
}

.industry-header .section-title::after,
.services-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 82px;
    height: 3px;
    background: var(--color-primary);
}

.industry-header .section-title {
    position: relative;
}

.industry-header p {
    font-weight: 500;
    line-height: 1.8;
}

/* the list and the photo share one relatively-positioned row that runs
   12px wider than the text column on each side, as on live */
.services-grid-industry {
    display: flex;
    position: relative;
    grid-template-columns: none;
    gap: 0;
    margin: 0 -12px;
}

.services-list-industry {
    width: 426px;
    flex: 0 0 426px;
    padding-top: 24px;
}

.services-list-industry li {
    position: relative;
    display: block;
    margin: 0;
    padding: 0 0 0 32px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.8;
    color: var(--color-primary);
}

/* live marks each service with a short cyan bar, vertically centred */
.services-list-industry li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    margin: 0;
    background: #0B9CD8;
    color: transparent;
}

.service-image-container {
    position: absolute;
    top: -130px;
    right: -120px;
    width: 200px;
    height: 200px;
}

.service-image-container img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
}

@media (max-width: 768px) {
    .services-grid-industry {
        display: block;
        margin: 0;
    }

    .services-list-industry {
        width: auto;
        flex: none;
    }

    .service-image-container {
        position: static;
        width: 200px;
        height: 200px;
        margin: var(--spacing-lg) auto 0;
    }
}

/* Final 9px/8px alignment so the panel rows land on live's baselines:
   live puts "Reputation & Expertise" at y1219 and "Services" at y1573. */
.industry-header > div {
    padding-top: 9px;
}

.services-section {
    margin-top: calc(var(--spacing-xl) + 8px);
}

/* padding-top above stops the heading's top margin collapsing out of the
   text column, so the margin is dropped here to keep the 9px net shift */
.industry-header .section-title {
    margin-top: 0;
}

/* live renders it as "Services", not "SERVICES" */
.services-title {
    text-transform: none;
}

/* ============================================================
   TAB LIST — RESTRUCTURED TO LIVE'S MODEL
   Live renders the tab list as part of the content section and pulls
   it up 117px into the hero on desktop, so the labels land at y725
   with one full-width 2px orange rule beneath the whole list. On
   phones the pull-up is dropped: the tabs stack full width and each
   carries its own 2px rule — navy, orange when selected — sitting on
   white below the hero rather than floating over it in a card.
   Tab metrics on live: 6px 12px padding around a 16px/700 label with
   13.28px margins, giving a 64px row.
   ============================================================ */
.tabs-section .tab-list {
    display: block;
    position: relative;
    width: 100%;
    margin: 0 0 50px;
    padding: 0;
    border: 0;
    text-align: left;
    justify-content: flex-start;
    gap: 0;
}

.tabs-section .tab-list::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    margin: 0 auto;
    background: var(--color-accent);
}

.tabs-section .tab-button {
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 19.28px 12px;
    border: 0;
    background: none;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
    text-transform: none;
    color: var(--color-primary);
    cursor: pointer;
    position: relative;
    transition: color var(--transition-fast);
}

.tabs-section .tab-button.active,
.tabs-section .tab-button:hover {
    color: var(--color-accent);
}

/* on live the rule belongs to the list, not to the selected tab */
.tabs-section .tab-button.active::after {
    display: none;
}

@media (min-width: 769px) {
    .tabs-section {
        margin-top: -117px;
    }
}

@media (max-width: 768px) {
    .tabs-section {
        margin-top: 0;
    }

    .tabs-section .tab-list {
        margin-bottom: 0;
    }

    .tabs-section .tab-list::after {
        display: none;
    }

    .tabs-section .tab-button {
        display: block;
        width: 100%;
        padding: 19.28px 0;
        text-align: left;
        border-bottom: 2px solid var(--color-primary);
    }

    .tabs-section .tab-button.active {
        border-bottom-color: var(--color-accent);
    }
}

/* inline-block tabs pick up the whitespace between the buttons, which
   pushed the second label 4px right of live's x284; zeroing the list
   font-size removes it. 51px below the list lands the panel on y842. */
.tabs-section .tab-list {
    font-size: 0;
    margin-bottom: 51px;
}

@media (max-width: 768px) {
    .tabs-section .tab-list {
        margin-bottom: 0;
    }
}

/* ============================================================
   INDUSTRIES ON PHONES — MEASURED ON LIVE AT 390px
     tabs      pushed 117px below the hero, 55px rows
     hero copy 19.2px right aligned at y515
     panel     x15 y1235 w345, padding 40 0 64, content inset 20px
     icon      270x172 centred; tab photo a 180px circle
     type      headings 19.2/500 left, body and list 12.8/500
   ============================================================ */
@media (max-width: 768px) {
    .tabs-section {
        margin-top: 117px;
    }

    .tabs-section .tab-button {
        padding: 13.28px 0;
    }

    .hero-industries .hero-subtitle {
        font-size: 1.2rem;
        text-align: right;
    }

    .content-wrapper {
        padding: 40px 0 64px;
        max-width: none;
    }

    .industry-header,
    .services-section {
        padding: 0 20px;
        max-width: none;
        margin-top: 0;
    }

    .industry-header {
        display: block;
    }

    .industry-header > div {
        max-width: none;
        padding-top: 0;
    }

    .industry-icon {
        display: block;
        width: 270px;
        max-width: 100%;
        margin: 0 auto var(--spacing-md);
    }

    .industry-header .section-title,
    .services-title {
        font-size: 1.2rem;
        font-weight: 500;
        text-align: left;
        padding-bottom: 0;
        margin: 15.94px 0;
    }

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

    .industry-header p,
    .services-list-industry li {
        font-size: 0.8rem;
        font-weight: 500;
        line-height: 1.8;
    }

    .services-grid-industry {
        display: block;
        margin: 0;
    }

    .services-list-industry {
        width: auto;
        flex: none;
        padding-top: 0;
    }

    .service-image-container {
        position: static;
        width: 180px;
        height: 180px;
        margin: var(--spacing-lg) auto 0;
    }

    .service-image-container img {
        width: 180px;
        height: 180px;
    }
}

/* hero on phones: live centres the block in a full-height hero — a 218px
   five-line title right aligned at y282, then a 290px intro at y515 */
@media (max-width: 768px) {
    .hero-industries {
        display: flex;
        align-items: center;
        min-height: 100vh;
    }

    .hero-industries .container {
        width: 100%;
        min-height: 0;
        display: block;
    }

    .hero-industries .hero-content {
        display: block;
        padding: 0;
        position: static;
    }

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

    .hero-industries .hero-subtitle {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        max-width: 290px;
        margin: 16px 0 0 auto;
        text-align: right;
        font-size: 1.2rem;
        line-height: 1.6;
    }

    .industry-header p,
    .industry-header > div,
    .services-list-industry li {
        text-align: left;
    }
}

@media (max-width: 768px) {
    .hero-industries .container {
        padding: 0 15px;
    }

    .hero-industries .hero-content {
        padding: 0;
        margin: 0;
    }

    .hero-industries .hero-title {
        padding: 0;
    }
}

/* live opens the panel 24px above the icon and leaves 43px under it */
@media (max-width: 768px) {
    .industry-header {
        margin-top: 24px;
    }

    .industry-icon {
        margin: 0 auto 43px;
    }
}

/* live drops the tab photo out of its absolute corner below 1160px and
   lets it sit under the list at 180px — ours kept the -120px offset and
   pushed the page 90px wide at 769 */
@media (max-width: 1160px) {
    .services-grid-industry {
        display: block;
        margin: 0;
    }

    .services-list-industry {
        width: auto;
        flex: none;
    }

    .service-image-container {
        position: static;
        width: 180px;
        height: 180px;
        margin: var(--spacing-lg) 0 0;
    }

    .service-image-container img {
        width: 180px;
        height: 180px;
    }
}

/* live steps the hero type rather than interpolating it: 3rem/1.6rem
   down to 768px, then 2rem/1.2rem */
@media (min-width: 769px) {
    .hero-about .hero-title,
    .hero-industries .hero-title,
    .hero-careers .hero-title {
        font-size: 3rem;
    }

    .hero-about .hero-subtitle,
    .hero-industries .hero-subtitle,
    .hero-careers .hero-subtitle {
        font-size: 1.6rem;
    }
}

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

    .hero-about .hero-subtitle,
    .hero-industries .hero-subtitle,
    .hero-careers .hero-subtitle {
        font-size: 1.2rem;
    }
}

/* the 578-767 tier: headings 24px, body 16px, hero intro capped at 358 */
@media (min-width: 578px) and (max-width: 767px) {
    .hero-industries .hero-subtitle {
        font-size: 1.5rem;
        max-width: 358px;
    }

    .industry-header .section-title,
    .services-title {
        font-size: 1.5rem;
    }

    .industry-header p,
    .services-list-industry li {
        font-size: 1rem;
    }
}

/* live shows a 440x280 icon in this band, not the 270px phone one */
@media (min-width: 578px) and (max-width: 767px) {
    .industry-icon {
        width: 440px;
        margin: 0 auto 40px;
    }
}

/* ------------------------------------------------------------------
   Industries hero — positioned from the container  (v13)

   Same correction as Careers and About. The title and intro were
   pinned at left:50% with a 1330px width, which only lands correctly
   while the container is 1330px wide; between 769 and 1359 they drift.
   Live puts both in normal flow inside the stepped container, right
   aligned, and centres that container vertically in a viewport-height
   hero — its centre line is at 50% of the hero at 700, 800 and 842px
   tall. The intro follows the title with no gap and is capped at 376px
   from 768 up, 358 between 577 and 767, and 290 below that.
   ------------------------------------------------------------------ */
.hero-industries {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.hero-industries .container {
    position: relative;
    display: block;
    width: 100%;
    min-height: 0;
    margin: 0 auto;
    padding: 0 15px;
}

.hero-industries .hero-content {
    position: static;
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.hero-industries .hero-title {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    width: auto;
    max-width: none;
    margin: 0;
    line-height: 1.36;
    text-align: right;
}

.hero-industries .hero-subtitle {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    width: auto;
    max-width: 376px;
    margin: 0 0 0 auto;
    font-size: 1rem;
    line-height: 1.6;
    text-align: right;
}

@media (min-width: 768px) {
    .hero-industries .hero-title {
        font-size: 3rem;
    }
}

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

    .hero-industries .hero-subtitle {
        max-width: 358px;
    }
}

@media (max-width: 576px) {
    .hero-industries .hero-subtitle {
        max-width: 290px;
    }
}