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

    /* ── Hero — headlines are 56-80px in the 1440 design, and sustainability/esg/diversity
       carry `white-space: nowrap`, so their lines physically could not wrap and ran 68-135px
       off a 390 screen. Let them wrap; the <br>s still give the designed breaks. ── */
    /* The banner's pinwheel sits toward the right of its 1920-wide frame; at the 800px phone
       hero height, 75% centres the logo in the viewport (50%/79% left it cut off or off-centre).
       There is no room for a 247px logo and a headline side by side at 390, so the copy drops
       to the foot of the hero (align-items: flex-end) and clears it. */
    .slide--corporate .slide-video {
        object-position: 75% 50%;
    }
    .slide {
        padding: 0 20px 140px;
        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;
    }

    /* Five tabs cannot sit side by side in 390: let the strip scroll instead of
       crushing each label to a few pixels. */
    .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.is-active .tab-label` is 1.25rem at higher specificity, so the old phone rule
       only shrank the inactive labels — the active tab stayed 20px next to 10px siblings.
       Size them together; the active one still reads as active via weight and colour. */
    .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;
    }

    /* ── Safety — the line art is absolutely placed at top:283 inside a fixed 800px
       section, so on phone (where the copy wraps far taller) it lands on top of the
       heading and the button. Let the section grow and put the art after the copy. ── */
    .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;
    }
    /* The face's inner column is label (60) + copy + button inside a fixed 240px card.
       People's copy runs to four lines where the other three run to three, so its column
       totalled 215 in a 200px box — it overflowed, which is why its KNOW MORE sat 15px
       lower with half the bottom gap. Trim the copy's leading and the block's padding so
       every card's column fits; justify-content: space-between then lands all four buttons
       on the same line, the same distance off the card edge. */
    .essence-face--text {
        padding: 20px 18px;
    }
    .essence-bottom {
        gap: 12px;
        padding-bottom: 0;
    }

    /* ── Body copy and buttons that inherited desktop rem sizes ──
       These sections never had phone rules, so .78rem buttons landed at ~12px and
       the affiliate/essence copy at ~12.5px — under the 13px floor used everywhere else. */
    .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;
    }
}