/* About Page Specific Styles */

.hero-about {
    background: url('../static/media/image.09caccc3076db41a4c6a.jpg') center/cover no-repeat;
    min-height: 100vh;
}

@media (max-width: 576px) {
    .hero-about {
        background-image: url('../static/media/image-mobile.7252aec5adc2863c62db.jpg');
    }
}

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

.tabs {
    max-width: 880px;
    margin: 0 auto;
}

.tab-list {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    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: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-primary);
    cursor: pointer;
    position: relative;
    transition: color var(--transition-fast);
}

.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 {
    background: var(--color-light-bg);
    padding: var(--spacing-xl) var(--spacing-lg);
    border-radius: 8px;
}

.text-content p {
    margin-bottom: var(--spacing-md);
    line-height: 1.8;
}

.image-content {
    margin-top: var(--spacing-lg);
    text-align: center;
}

.image-content img {
    width: 100%;
    max-width: 400px;
    border-radius: 50%;
    margin: 0 auto var(--spacing-md);
}

.image-caption h3,
.image-caption h4 {
    color: var(--color-primary);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.image-caption p {
    color: #666;
    margin: 0;
}

/* What We Do Tab */
.services-list {
    display: grid;
    gap: var(--spacing-xl);
}

.service-block {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--spacing-md);
    align-items: start;
}

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

.service-info h3 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
    position: relative;
    padding-bottom: var(--spacing-sm);
}

.service-info h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 82px;
    height: 3px;
    background: var(--color-accent);
}

.service-info p {
    line-height: 1.8;
}

@media (max-width: 768px) {
    .tab-list {
        flex-direction: column;
        gap: 0;
    }
    
    .tab-button {
        padding: var(--spacing-sm);
        font-size: 1rem;
    }
    
    .content-wrapper {
        padding: var(--spacing-md);
    }
    
    .service-block {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .service-image img {
        max-width: 200px;
        margin: 0 auto;
    }
    
    .service-info h3::after {
        left: 50%;
        transform: translateX(-50%);
    }
}
/* What We Do – disciplines (reconciled to live) */
.disciplines-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    padding: 0;
}

.disciplines-grid li {
    background: var(--color-white);
    color: var(--color-primary);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    padding: var(--spacing-md) var(--spacing-sm);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.disciplines-grid li::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: var(--color-accent);
    margin: 0.75rem auto 0;
}

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

/* Leadership callout (Our Story) – graceful stand-in until a headshot is provided */
.leader-callout {
    margin-top: var(--spacing-lg);
    border-left: 4px solid var(--color-accent);
    background: var(--color-white);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.leader-name {
    color: var(--color-primary);
    font-size: 1.3rem;
    margin-bottom: 0.15rem;
}

.leader-title {
    color: var(--color-accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
    margin-bottom: var(--spacing-sm);
}

.leader-bio {
    line-height: 1.8;
    margin: 0;
    color: var(--color-text-dark);
}

/* Leadership photo */
.leader-photo {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center 25%;
    border-radius: 6px;
    margin-bottom: var(--spacing-md);
    display: block;
}

/* ============================================
   ABOUT HERO LAYOUT (match production)
   title left-upper, subtitle right-mid, tabs at hero bottom
   ============================================ */
.hero-about {
    display: block;
    align-items: initial;
    min-height: 100vh;
}

.hero-about .hero-layout {
    position: relative;
    min-height: 100vh;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.hero-about .hero-title {
    position: absolute;
    top: 30%;
    left: var(--spacing-md);
    margin: 0;
    text-align: left;
}

.hero-about .hero-subtitle {
    position: absolute;
    top: 52%;
    left: 44%;
    right: var(--spacing-md);
    margin: 0;
    text-align: right;
    margin-left: 0;
}

.hero-about .tab-list {
    position: absolute;
    left: var(--spacing-md);
    right: var(--spacing-md);
    bottom: 6%;
    justify-content: flex-start;
    gap: var(--spacing-lg);
    margin-bottom: 0;
    border-bottom: 2px solid var(--color-accent);
}

/* Content section sits in the white area below the hero */
.tabs-section {
    padding-top: var(--spacing-xl);
}

@media (max-width: 768px) {
    .hero-about,
    .hero-about .hero-layout {
        min-height: 80vh;
    }
    .hero-about .hero-layout {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 120px;
        padding-bottom: 80px;
    }
    .hero-about .hero-title,
    .hero-about .hero-subtitle,
    .hero-about .tab-list {
        position: static;
        text-align: center;
        left: auto;
        right: auto;
    }
    .hero-about .hero-subtitle {
        margin: var(--spacing-md) 0;
    }
    .hero-about .tab-list {
        justify-content: center;
        margin-top: var(--spacing-lg);
    }
}

/* QA correction: widen About hero to full-width to match live insets (~5%) */
.hero-about .hero-layout {
    max-width: none;
    margin: 0;
    padding: 0;
}
.hero-about .hero-title { left: 5%; right: 5%; top: 31%; }
.hero-about .hero-subtitle { right: 5%; top: 53%; }
.hero-about .tab-list { left: 5%; right: 5%; bottom: 7%; }

/* QA: lower About tabs to match live (~T86) */
.hero-about .tab-list { bottom: 4%; }

/* ============================================
   ABOUT — mobile: clean stacked hero, tabs as a white stacked menu
   (final block so it wins over the desktop QA overrides above).
   ============================================ */
@media (max-width: 768px) {
    .hero-about,
    .hero-about .hero-layout {
        min-height: 0;
    }

    .hero-about .hero-layout {
        display: block;
        max-width: none;
        margin: 0;
        padding: 120px 5% var(--spacing-xl);
    }

    .hero-about .hero-title,
    .hero-about .hero-subtitle,
    .hero-about .tab-list {
        position: static;
        text-align: center;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
    }

    .hero-about .hero-subtitle {
        margin: var(--spacing-md) 0 0;
    }

    .hero-about .tab-list {
        flex-direction: column;
        gap: 0;
        margin: var(--spacing-lg) 0 0;
        background: var(--color-white);
        border: none;
        border-radius: 8px;
        overflow: hidden;
    }

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

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

/* ============================================================
   OUR STORY — reconciled to live production (nbmengineering.com)
   Live spec: 240px circular headshot on the left, name + title on
   one line above a 3px cyan rule, italic bio, then the story
   heading (left aligned, no orange underline) and body copy with
   a cyan rule down its left edge.
   Scoped to #our-story so the "What We Do" tab is untouched.
   ============================================================ */
#our-story .leader-callout {
    display: flex;
    align-items: center;
    gap: 76px;
    /* -64px right pulls the text column out to the panel edge, as on live */
    margin: 0 -64px 25px 0;
    background: none;
    border-left: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

#our-story .leader-photo {
    width: 240px;
    height: 240px;
    flex: 0 0 240px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 25%;
    margin: 0 0 0 -119px;
    display: block;
}

#our-story .leader-text {
    flex: 1 1 auto;
    min-width: 0;
}

#our-story .leader-name {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--color-primary);
    text-transform: uppercase;
    margin: 0 0 0.65rem;
    padding-bottom: 0.65rem;
    border-bottom: 3px solid #0B9CD8;
}

#our-story .leader-name .leader-name-first {
    font-weight: 700;
}

#our-story .leader-title {
    font-size: inherit;
    font-weight: 400;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: normal;
    margin: 0;
}

#our-story .leader-bio {
    font-style: italic;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-primary);
    margin: 0;
}

/* Story heading — live is left aligned with no accent underline */
#our-story .section-title {
    text-align: left;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--color-primary);
    margin: 0 0 var(--spacing-md);
    padding-left: 15px;
}

#our-story .section-title::after {
    display: none;
}

/* Body copy with the cyan rule down the left edge */
#our-story .story-body {
    border-left: 3px solid #0B9CD8;
    margin-left: -24px;
    padding-left: 36px;
}

#our-story .story-body p {
    margin-bottom: var(--spacing-md);
    line-height: 1.8;
}

#our-story .story-body p:last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    #our-story .leader-callout {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--spacing-md);
    }
    #our-story .leader-photo {
        margin-left: 0;
    }
    #our-story .leader-name,
    #our-story .leader-bio {
        text-align: center;
    }
    #our-story .section-title {
        padding-left: 0;
        text-align: left;
    }
    #our-story .story-body {
        padding-left: 20px;
    }
}

/* Match live panel width for Our Story (live measures 762px at 1707px viewport).
   Scoped so the wider "What We Do" tab keeps its full width. */
#our-story .content-wrapper {
    max-width: 762px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   WHAT WE DO — disciplines as circular photos (matches live)
   Live spec: 3 columns, 220px circles, 30px gutters, 990px grid,
   uppercase 1.2rem/600 captions in primary navy.
   ============================================================ */
#what-we-do .disciplines-grid {
    display: grid;
    grid-template-columns: repeat(3, 310px);
    justify-content: center;
    gap: 40px 30px;
    width: 990px;
    max-width: 100%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: var(--spacing-lg) 0 0;
    padding: 0;
    list-style: none;
}

#what-we-do .disciplines-grid li {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    text-transform: none;
    letter-spacing: normal;
    text-align: center;
}

#what-we-do .disciplines-grid li::after {
    display: none;
}

#what-we-do .discipline-photo {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
}

#what-we-do .discipline-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#what-we-do .discipline-label {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    margin: 19px 0 0;
}

@media (max-width: 1050px) {
    #what-we-do .disciplines-grid {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        left: auto;
        transform: none;
    }
}

@media (max-width: 640px) {
    #what-we-do .disciplines-grid {
        grid-template-columns: 1fr;
    }
}

/* Live "What We Do" has no grey panel — content sits directly on white,
   with the intro constrained to 672px like the heading. */
#what-we-do .content-wrapper {
    background: none;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

#what-we-do .section-intro {
    max-width: 672px;
}

@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. */
/* ============================================================
   ABOUT HERO — reconciled to live nbmengineering.com
   Measured live @1707px viewport / 842px hero:
     h1    : x181 w1330, 48px/1.36, #152C53, left aligned, top 298 (35.4%)
     h2    : right edge 1511, max 800px, 25.6px/1.6, #152C53, right aligned, top 441 (52.4%)
     tabs  : row x181 w1330, 16px/700 Title Case, 25px gaps, 2px accent rule
   The live container is 1330px wide, so its edges sit at calc(50% -/+ 665px).
   ============================================================ */
.hero-about .hero-title {
    left: calc(50% - 665px);
    right: auto;
    width: 1330px;
    max-width: calc(100% - 80px);
    top: 35.4%;
    text-align: left;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.36;
    color: var(--color-primary);
}

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

.hero-about .hero-subtitle {
    left: auto;
    right: calc(50% - 665px);
    width: 800px;
    max-width: calc(100% - 80px);
    top: 52.4%;
    text-align: right;
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 500;
    line-height: 1.6;
    color: var(--color-primary);
}

.hero-about .tab-list {
    left: calc(50% - 665px);
    right: auto;
    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);
}

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

.hero-about .tab-button.active::after {
    display: none;
}
}


/* Live keeps the About hero's alignment on mobile (title left, subtitle right)
   rather than centring both. */
@media (max-width: 768px) {
    .hero-about .hero-title {
        text-align: left;
    }
    .hero-about .hero-subtitle {
        text-align: right;
    }
}

/* Mobile: full-height hero with the title/intro centred and the tab menu
   sitting at the foot of the hero, matching how live behaves on phones.
   Labels stay Title Case as they are on desktop. */
@media (max-width: 768px) {
    .hero-about,
    .hero-about .hero-layout {
        min-height: 100vh;
    }

    .hero-about .hero-layout {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 110px 24px 28px;
    }

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

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

/* Centre the title/intro block in the mobile hero (auto margins split the
   free space above the text and above the tab menu). */
@media (max-width: 768px) {
    .hero-about .hero-title {
        margin-top: auto;
    }
}

/* ============================================================
   ABOUT PANEL — reconciled to live (measured @1707px)
   Live: panel sits flush under the hero (no section gap), text column
   spans x544..1191 (647px), body copy at weight 500.
   ============================================================ */
.tabs-section {
    padding-top: 0;
}

.tab-content {
    padding: 0;
}

#our-story .content-wrapper {
    /* 64 left + 15 on the heading puts text at x544; 36 right ends it at
       x1191, giving live's 647px column */
    padding: 35px 36px 148px 64px;
}

#our-story .story-body p {
    font-weight: 500;
}

/* Final geometry alignment to live (@1707px, panel x465 w762):
   content box x544..1191 exactly, so the heading and body boxes match
   live's 647px column without compensating padding on the heading. */
@media (min-width: 769px) {
    #our-story .content-wrapper {
        padding: 35px 36px 148px 79px;
    }

    #our-story .section-title {
        padding-left: 0;
    }

    #our-story .story-body {
        margin-left: -39px;
    }

    #our-story .leader-photo {
        margin-left: -134px;
    }

    #our-story .leader-callout {
        margin: 0 -36px 46px 0;
    }
}

/* Live constrains the What We Do heading to the same 672px as its intro. */
#what-we-do .section-title {
    max-width: 672px;
    margin-left: auto;
    margin-right: auto;
}

/* Mobile: the desktop panel padding (64/36) leaves too little room for the
   240px headshot on a 295px panel. */
@media (max-width: 768px) {
    #our-story .content-wrapper {
        padding: 28px 20px 40px;
    }
}

/* ============================================================
   ABOUT HERO — MOBILE CROP
   Live swaps to a portrait crop of the same photograph below 577px
   (.jjooWu). Stretching the landscape original over a tall narrow
   box crops it badly, which is the background-position difference
   visible on a phone under Our Story / What We Do.
   ============================================================ */
@media (max-width: 576px) {
    .hero-about {
        background-image: url('../static/media/image-mobile.7252aec5adc2863c62db.jpg');
    }
}

/* ============================================================
   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;
    }
}

/* ============================================================
   ABOUT HERO AND PANEL ON PHONES — MEASURED ON LIVE AT 390px
   Live renders the hero as a vertically centred table-cell: the title
   block sits at y273 in an 844px hero, left aligned at 32px, then 56px
   of space, then the intro right-aligned at 19.2px. The panel drops to
   12.8px body copy and 19.2px headings inside 16px of padding.
   ============================================================ */
@media (max-width: 768px) {
    .hero-about {
        display: flex;
        align-items: center;
        min-height: 100vh;
    }

    .hero-about .hero-layout {
        display: block;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0 15px;
    }

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

    .hero-about .hero-subtitle {
        position: static;
        margin: 15.94px 0;
        padding-top: 56px;
        text-align: right;
        font-size: 1.2rem;
        font-weight: 500;
        line-height: 1.6;
    }

    /* panel */
    #our-story .content-wrapper,
    #what-we-do .content-wrapper {
        padding: 16px;
    }

    #our-story .section-title,
    #what-we-do .section-title,
    .tabs-section .section-title {
        font-size: 1.2rem;
        font-weight: 500;
        margin: 15.94px 0;
        text-align: left;
    }

    #our-story .story-body p,
    #what-we-do p,
    .leader-bio {
        font-size: 0.8rem;
        font-weight: 500;
        line-height: 1.8;
    }

    #our-story .story-body p {
        margin-bottom: 24px;
    }
}

/* ============================================================
   ABOUT ON PHONES — SECOND PASS, MEASURED ON LIVE AT 390px
     hero block   y273 h298 (vertically centred in an 844 hero)
     tab rows     54px each, label 16px/700 with 13.28px margins
     panel        y956, 40px above the headshot, 16px side padding
     headshot     x67 y996 240x240
     name line    y1266, left aligned, "PRESIDENT & CEO" at x160
     bio + body   12.8px/500, 313px column at x31
   ============================================================ */
@media (max-width: 768px) {
    .hero-about .hero-layout {
        min-height: 0;
    }

    /* margins would collapse out of the layout box and shift the centring,
       so the gap above and below the intro is carried as padding */
    .hero-about .hero-subtitle {
        margin: 0;
        padding: 71.94px 0 15.94px;
    }

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

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

    #our-story .content-wrapper,
    #what-we-do .content-wrapper {
        padding: 40px 16px;
    }

    #our-story .leader-callout {
        margin: 0 0 25px;
        gap: 30px;
    }

    #our-story .leader-photo {
        margin: 0 auto;
    }

    #our-story .leader-name,
    #our-story .leader-bio {
        text-align: left;
    }

    #our-story .leader-bio,
    #what-we-do .leader-bio {
        font-size: 0.8rem;
        line-height: 1.8;
        padding-right: 30px;
    }

    #our-story .leader-name {
        font-size: 1.2rem;
    }

    #our-story .story-body {
        padding-left: 0;
        margin-left: 0;
    }

    #our-story .story-body p,
    #what-we-do p,
    .tabs-section .section-intro {
        font-size: 0.8rem;
        font-weight: 500;
        line-height: 1.8;
    }

    #our-story .section-title,
    #what-we-do .section-title {
        font-size: 1.2rem;
        font-weight: 500;
        text-align: left;
        margin: 15.94px 0;
        max-width: none;
    }
}

/* third pass: keep the hero gap as margins inside a flow-root so the
   boxes line up with live's, and close the 9px under the headshot */
@media (max-width: 768px) {
    .hero-about .hero-layout {
        display: flow-root;
    }

    .hero-about .hero-title {
        margin: 0 0 71.94px;
    }

    .hero-about .hero-subtitle {
        margin: 0 0 15.94px;
        padding: 0;
    }

    #our-story .leader-callout {
        margin-bottom: 16px;
    }
}

/* Live carries the cyan rule as an absolutely positioned pseudo-element
   40px to the left of the text, so it neither indents the copy nor shows
   at all on a narrow screen. Ours used border-left, which pushed every
   paragraph 3px right of live's x31. */
@media (max-width: 768px) {
    #our-story .story-body {
        position: relative;
        border-left: 0;
        margin-left: 0;
        padding-left: 0;
    }

    #our-story .story-body::before {
        content: '';
        position: absolute;
        left: -40px;
        top: 20px;
        width: 3px;
        height: calc(100% - 15px);
        background: #0B9CD8;
    }
}

/* ============================================================
   ABOUT HERO ON DESKTOP — MOVED OUT OF ABSOLUTE POSITIONING
   Live lays the hero out in normal flow inside a vertically centred
   table-cell: the title left aligned, the intro right aligned with an
   800px cap. Our percentage-based absolute offsets were tuned at 1707
   and combined with a max-width to overflow the viewport by 273px at
   769 and 77px at 1160. Measured on live:
     1707  title span x231 y299   intro x711 y442 w800
     1160  title span x125 y299   intro x269 y442 w800
      769  title span x65  y279   intro x15  y421 w724
   ============================================================ */
@media (min-width: 769px) {
    .hero-about {
        display: flex;
        align-items: center;
    }

    .hero-about .hero-layout {
        position: static;
        width: 100%;
        max-width: 1360px;
        margin: 0 auto;
        padding: 0 15px;
        min-height: 0;
    }

    .hero-about .hero-title {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        max-width: none;
        margin: 0;
        text-align: left;
    }

    .hero-about .hero-subtitle {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        width: auto;
        max-width: 800px;
        margin: 78px 0 0 auto;
        text-align: right;
    }
}

/* the earlier desktop block pinned fixed 1330px / 800px widths, which is
   what overflowed the viewport below about 1420px */
@media (min-width: 769px) {
    .hero-about .hero-title {
        width: auto;
        max-width: none;
    }

    .hero-about .hero-subtitle {
        width: auto;
        max-width: 800px;
    }
}

/* live's intro is 82px tall on 1.6 leading with a 21.25px margin below,
   which is what makes the centred block 245px and puts the title on y298 */
@media (min-width: 769px) {
    .hero-about .hero-subtitle {
        line-height: 1.6;
        margin: 77.25px 0 21.25px auto;
    }
}

/* 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;
    }
}

/* ============================================================
   ABOUT — THE 578-767 TIER
   Live has three type scales, not two. Measured at 657px, where the
   container is 540 and the panel 510 wide:
     panel        padding 40px 0 64px
     leader block inset 16px, so the name and bio sit at x82 w478
     story block  padding 60px 36px 80px 80px, so the heading and copy
                  sit at x146 w394 with the cyan rule visible at x106
     type         bio and body 16px, story heading 24px
   Below 578 it drops to 12.8/19.2; at 768 and above the heading goes
   to 25.6. Our phone rules were being applied across this whole band.
   ============================================================ */
@media (min-width: 578px) and (max-width: 767px) {
    #our-story .content-wrapper,
    #what-we-do .content-wrapper {
        padding: 40px 0 64px;
    }

    #our-story .leader-callout {
        margin: 0 16px 16px;
    }

    #our-story .text-content,
    #what-we-do .text-content {
        padding: 60px 36px 80px 80px;
    }

    #our-story .leader-bio,
    #what-we-do .leader-bio,
    #our-story .story-body p,
    #what-we-do p,
    .tabs-section .section-intro {
        font-size: 1rem;
        line-height: 1.8;
    }

    #our-story .section-title,
    #what-we-do .section-title {
        font-size: 1.5rem;
    }

    /* at this width the rule clears the text column instead of being
       pushed off the left edge */
    #our-story .story-body::before {
        left: -40px;
    }
}

/* ------------------------------------------------------------------
   About hero — positioned from the container, not from the viewport
   (v13)

   The title and the intro were pinned with calc(50% - 665px), which is
   only correct while the container is 1330px wide. Live puts both in
   normal flow inside the stepped container and centres that container
   vertically in a viewport-height hero. Measured on live, the title's x
   is 15 at 768 and 769, 73 at 900, 15 at 1024, 75 at 1160, 28 at 1401
   and 181 at 1707; the intro is right-aligned to the opposite content
   edge with a 800px cap, and sits immediately below the title with no
   gap. Vertically the block's centre line is at 50% of the hero at
   every viewport height tested.
   ------------------------------------------------------------------ */
.hero-about {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

/* the stepped container, restated because an earlier block clears it */
.hero-about .hero-layout {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin: 0 auto;
    padding: 0 15px;
}

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

@media (min-width: 768px) {
    .hero-about .hero-layout { max-width: 768px; }
}

@media (min-width: 1024px) {
    .hero-about .hero-layout { max-width: 1024px; }
}

@media (min-width: 1360px) {
    .hero-about .hero-layout { max-width: 1360px; }
}

.hero-about .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: left;
}

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

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

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