/* ==========================================================================
   MOBILE HOMEPAGE REFINEMENT
   Loaded only on index.html (see the <link> tag there), and only at
   <=640px (via that same tag's media attribute, re-wrapped in the same
   query below as a second guarantee). Nothing in this file can ever
   reach the desktop layout or any other page.

   Covers the homepage's own editorial sections (corporate-hero /
   about-editorial / company-editorial / commitment-editorial /
   cta-band--partner / gateway-cta) plus a light mobile-only polish
   pass on the shared header/nav-drawer/floating-chat chrome — safe
   here specifically because this stylesheet never loads anywhere but
   the homepage, so that polish cannot bleed into other pages.
   ========================================================================== */

@media (max-width: 640px) {

  /* ---- Hero: taller, quieter, tuned crop + rhythm for a portrait frame.
     The full-hero slideshow itself (.hero-slide and children) is sized in
     layout.css's own <=640px query — this file only tunes the overlaid
     headline rhythm, so the slideshow canvas stays a single definition. ---- */
  .corporate-hero { min-height: 88vh; min-height: 88svh; }
  .corporate-hero-inner { padding-bottom: 52px; }
  .corporate-hero-content { max-width: 300px; }
  .corporate-hero-brand-name { font-size: 21px; line-height: 1.3; max-width: 19ch; }
  .corporate-hero-brand-divider { width: 30px; margin: 12px 0; }

  /* ---- About: tighter measure, calmer vertical rhythm ---- */
  .about-editorial { padding-top: 64px; padding-bottom: 64px; }
  .about-editorial-grid { gap: 22px; }
  .about-editorial-label .section-kicker { margin-bottom: 12px; }
  .about-editorial-label h2 { font-size: 42px; }
  .about-editorial-copy { padding-top: 0; max-width: none; }
  .about-lede { font-size: 20px; line-height: 1.55; max-width: none; }
  .about-editorial-copy p { font-size: 15.5px; line-height: 1.75; margin-bottom: 18px; max-width: none; }
  .about-editorial-copy p:last-of-type { margin-bottom: 4px; }
  .about-editorial-copy .btn-text { padding: 12px 4px; font-size: 15px; margin-top: 0; }

  /* ---- Our Businesses: full-bleed photography with an inset editorial
     card floating over the seam — the signature move that makes the two
     chapters feel designed for a phone rather than a shrunk desktop grid. ---- */
  .businesses-editorial { padding-top: 56px; padding-bottom: 64px; }
  .businesses-editorial .section-heading { margin-bottom: 40px; }
  .companies-editorial-grid { gap: 64px; margin-top: 40px; }
  .company-editorial--healthcare,
  .company-editorial--export { gap: 0; }

  .company-editorial-media {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    box-shadow: none;
  }
  .company-editorial--healthcare .company-editorial-media,
  .company-editorial--export .company-editorial-media { aspect-ratio: 5 / 6; }

  .company-editorial-body {
    position: relative;
    z-index: 2;
    margin-top: -36px;
    padding: 26px 0 4px;
    background: var(--color-white);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 28px -22px rgba(18, 30, 54, .18);
  }
  .company-editorial-body h3 { font-size: 24px; line-height: 1.22; }
  .company-editorial-desc { font-size: 15px; margin-bottom: 22px; }
  .company-editorial-body .btn-text { padding: 12px 4px; font-size: 15px; }

  /* Quiet staggered entrance for the two chapters (respects reduced-motion
     via the existing global rule in base.css, which already zeroes every
     animation/transition duration). */
  .company-editorial.reveal-m { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .company-editorial.reveal-m.is-visible { opacity: 1; transform: none; }
  .company-editorial--export.reveal-m { transition-delay: .08s; }

  /* ---- Our Commitment: a quiet centred poster rather than a left-aligned
     list — numeral, heading and line all share one axis, bound top and
     bottom by hairlines with a quiet separator between each value. ---- */
  .commitment-editorial { padding-top: 60px; padding-bottom: 60px; }
  .commitment-strip {
    gap: 0; margin-top: 44px; padding-top: 4px; padding-bottom: 4px;
    border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
  }
  .commitment-item {
    padding-top: 32px; padding-bottom: 32px;
    text-align: center; display: flex; flex-direction: column; align-items: center;
    border-top: 1px solid var(--color-border);
  }
  .commitment-item:first-child { padding-top: 30px; border-top: none; }
  .commitment-item:last-child { padding-bottom: 30px; }
  .commitment-item-num { font-size: 28px; margin-bottom: 14px; opacity: .45; }
  .commitment-item h3 { font-size: 19px; margin-bottom: 10px; }
  .commitment-item p { font-size: 15px; line-height: 1.8; max-width: 30ch; }

  /* ---- Partner With Us: a full, immersive close rather than a strip ---- */
  .cta-band--partner {
    padding: 88px 0;
    min-height: 62vh;
    min-height: 62svh;
    display: flex;
    align-items: center;
  }
  .cta-band--partner-bg { background-position: 42% 46%; }
  .cta-band--partner h2 { font-size: 32px; line-height: 1.16; margin-bottom: 14px; }
  .cta-band--partner p { font-size: 16px; line-height: 1.7; max-width: 28ch; }
  .cta-band--partner .btn { min-height: 52px; padding: 16px 30px; margin-top: 26px; }

  /* ---- Explore Products gateway: quiet close, calmer scale ---- */
  .gateway-cta-section { padding-top: 56px; padding-bottom: 64px; }
  .gateway-cta h2 { font-size: 26px; }
  .gateway-cta p { font-size: 15.5px; max-width: 32ch; }
  .gateway-cta-link { padding: 13px 6px; }

  /* ---- Header: a touch tighter and calmer on a phone-width bar ---- */
  .header-inner { padding: 14px 0; }
  .site-header.is-scrolled .header-inner { padding: 9px 0; }
  .logo img { height: 36px; }
  .header-actions { gap: 2px; }
  .icon-btn { width: 38px; height: 38px; border-radius: 10px; }
  .icon-btn:active { background: var(--color-grey-light); transform: scale(.94); }

  /* ---- Mobile nav drawer: a rounded, editorial-feeling panel instead of
     a plain square list — quieter backdrop, kicker-style "Menu" label to
     match the rest of the page's typography, breathing room, and a
     quiet accent line marking the Products submenu. ---- */
  .mobile-menu-backdrop { background: rgba(10, 16, 28, .5); }
  .mobile-menu {
    width: min(84vw, 360px);
    border-radius: 20px 0 0 20px;
    padding: 22px 22px calc(22px + env(safe-area-inset-bottom, 0px));
    box-shadow: -24px 0 48px -28px rgba(10, 16, 28, .4);
  }
  .mobile-menu-header { padding-bottom: 14px; margin-bottom: 8px; }
  .mobile-menu-header strong {
    font-family: var(--font-heading); font-size: 12px; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: var(--color-grey-text);
  }
  .mobile-menu-header .icon-btn { width: 34px; height: 34px; margin-right: -6px; }
  .mobile-menu > ul > li > a,
  .mobile-menu > ul > li > button.mm-toggle {
    padding: 15px 2px; font-family: var(--font-display); font-size: 18px;
    font-weight: 500; color: var(--color-charcoal);
  }
  .mobile-menu > ul > li > a:active,
  .mobile-menu > ul > li > button.mm-toggle:active { opacity: .55; }
  .mobile-submenu { border-left: 2px solid var(--color-border); margin-left: 2px; padding-left: 16px; }
  .mobile-submenu li a { padding: 12px 4px; }
  .mobile-menu-footer { padding-top: 18px; margin-top: 6px; }
  .mobile-menu-footer p:first-child { font-weight: 600; color: var(--color-charcoal); }

  /* ---- Chatbot: keep it clear of the home indicator / notches so it
     never crowds the last section's content on tall or gesture-nav phones,
     and keep it from sitting over the nav drawer's contact details while
     the drawer is open. ---- */
  .float-stack { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .chat-window { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body:has(#mobile-menu.is-open) .float-stack { opacity: 0; visibility: hidden; pointer-events: none; }
}