/* home-mobile.css - homepage phone layout (<768px). Loaded last on / only. */
/* Desktop ≥768px is the fixed 1440 design scaled by zoom (see app.css body.page-home main). */

@media (max-width: 767px) {
    body.page-home main {
        zoom: 1;
        width: auto;
    }

    /* Section headings - 56/60px in the 1440 design, which on a 390 screen eats
       four to six lines. Bring them to one phone scale so every section matches. */
    .about-heading,
    .loc-heading,
    .essence-heading,
    .ob-heading,
    .sc-heading,
    .accolades-heading,
    .mh-title {
        font-size: 30px !important;
        line-height: 36px !important;
        margin-bottom: 18px;
    }

    .slide--corporate .slide-video {
        object-position: 75% 50%;
    }
    .slide {
        /* sit the headline just above the tab strip - 140px left a ~100px
           void between the text and the tabs on the 500px hero */
        padding: 0 20px 76px;
        align-items: flex-end;
    }
    .slide-content {
        max-width: 100%;
    }
    .slide-content h1,
    .slide-content h1.sustainability,
    .slide-content h1.esg,
    .slide-content h1.diversity {
        font-size: 34px !important;
        line-height: 40px !important;
        letter-spacing: -0.5px;
        white-space: normal !important;
        max-width: 100%;
        overflow-wrap: break-word;
    }

    .carousel-tabs {
        height: auto;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start;
        padding: 0 12px;
    }
    .carousel-tabs::-webkit-scrollbar { display: none; }
    .tab {
        flex: 0 0 auto;
        min-width: 0;
        padding: 10px 14px;
    }
    .tab-label,
    .tab.is-active .tab-label {
        font-size: 14px;
        white-space: nowrap;
    }
    .tab-num,
    .tab.is-active .tab-num {
        font-size: 12px;
    }

    /* Stats band - desktop keeps 36px/61px padding (stats.css), and the fixed
       340px water card then runs 11px past a 390 screen. Match the phone gutter. */
    .stats-section {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* About intro */
    .about-intro {
        padding: 44px 20px 48px;
    }
    .about-body {
        font-size: 16px;
        line-height: 24px;
    }

    .sc-section {
        height: auto;
        padding-bottom: 0;
    }
    .sc-content {
        padding: 44px 20px 0;
    }
    .sc-body {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 24px;
    }
    .sc-illustration {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        /* The SVG view box extends below its last visible line (y=664). Clip only
           that intrinsic empty area so the art ends at the next section. */
        aspect-ratio: 1249 / 664;
        margin-top: 8px;
        overflow: hidden;
    }
    .svg-wrapper { height: 102.45%; }

    /* Facility carousel - arrows at 50% sit on the bottom-anchored title */
    .fc-arrow {
        top: 32%;
    }

    /* Our Locations - business cards are fixed 480px on desktop */
    .loc-card {
        width: auto;
        margin-left: 0;
    }
    .loc-card-item {
        font-size: 22px;
        line-height: 30px;
        min-height: 96px;
        padding: 20px 24px;
    }

    /* Essence - labels are 32px over the line art */
    .essence-label-text {
        font-size: 22px;
        line-height: 28px;
    }
    .essence-desc {
        font-size: 14px;
        line-height: 20px;
    }
    .essence-face--text {
        padding: 20px 18px;
    }
    .essence-bottom {
        gap: 12px;
        padding-bottom: 0;
    }

    .ob-card__content p,
    .about-intro p {
        font-size: 15px;
        line-height: 22px;
    }
    .ob-btn,
    .sc-btn,
    .essence-btn {
        font-size: 13px;
        letter-spacing: 0.1em;
        padding: 13px 30px;     /* lifts the 34-40px pills to a 44px tap target */
    }

    /* accolades: its phone block sizes the h4 but not the p, so the award text
       inherited 0.72rem (11.5px) */
    .ac-card p {
        font-size: 13px;
        line-height: 18px;
    }

    /* Tap targets - 36-38px controls are below the 44px minimum */
    .tab {
        min-height: 44px;
    }
    .nav-search {
        height: 40px;
    }
    .nav-hamburger {
        width: 44px;
        height: 44px;
        justify-content: center;
        align-items: center;
        padding: 10px;
        box-sizing: border-box;
    }
    .arrow,
    .fc-arrow,
    .ob-arrow {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 380px) {
    .slide-content h1,
    .slide-content h1.sustainability,
    .slide-content h1.esg,
    .slide-content h1.diversity {
        font-size: 30px !important;
        line-height: 36px !important;
    }
}