/* ============================================================
   CompreVie — Responsive layer
   ------------------------------------------------------------
   The DESKTOP DEFAULT lives as inline styles in each page
   (unchanged). This file only ADDS the mobile behaviour.

   Because the desktop rules are inline, every override here
   needs !important to win the cascade. Breakpoint: 768px.
   ============================================================ */

@media screen and (max-width: 768px) {

  /* ---------------- Navigation (hamburger menu) ---------------- */
  header {
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 12px 18px !important;
    position: relative !important;
  }
  header > a img { height: 40px !important; }
  /* Show the hamburger, collapse the links into a dropdown panel. */
  header .hamburger { display: inline-flex !important; }
  header nav {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: var(--cream-50) !important;
    border-top: 1px solid var(--ink-100) !important;
    box-shadow: 0 14px 26px rgba(15,20,17,0.14) !important;
    padding: 6px 0 12px !important;
  }
  header.menu-open nav { display: flex !important; }
  header nav a {
    font-size: 16px !important;
    padding: 14px 24px !important;
    width: 100% !important;
    text-align: left !important;
    border-radius: 0 !important;
  }
  /* Contact Us reads like any other item in the mobile menu, not a button. */
  header nav a[href*="Quote"] {
    background: transparent !important;
    color: var(--ink-900) !important;
    padding: 14px 24px !important;
    justify-content: flex-start !important;
  }

  /* ---------------- Home: full-bleed photo hero ---------------- */
  /* Keep it a compact banner on phones and scale the overlaid text
     down so the headline, subhead and button fit comfortably. */
  .m-photo-hero { aspect-ratio: auto !important; min-height: 560px !important; }
  .m-photo-hero img { object-position: 62% center !important; }
  .m-photo-hero h1 { font-size: clamp(38px, 11vw, 54px) !important; }
  .m-photo-hero p { font-size: 16px !important; margin-top: 12px !important; }
  .m-photo-hero a { font-size: 15px !important; padding: 13px 24px !important; margin-top: 22px !important; }

  /* ---------------- Home: "Our differences" ---------------- */
  /* Left-align the copy block on phones instead of the desktop's right-align. */
  .m-diff-text { text-align: left !important; }
  .m-diff-body { margin-left: 0 !important; }
  .m-diff-cta { justify-content: flex-start !important; }

  /* ---------------- Home: "Create your next gem" ---------------- */
  /* Stack: image on top, text (left-aligned) below on the page bg. */
  .m-gem { display: flex !important; flex-direction: column !important; min-height: 0 !important; }
  .m-gem-img, #home-gem { position: relative !important; width: 100% !important; height: 260px !important; order: 1 !important; }
  .m-gem-scrim { display: none !important; }
  .m-gem-inner {
    position: relative !important;
    order: 2 !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 30px 20px 44px !important;
  }

  /* ---------------- Partnerships: hero (stacked — faces never covered) ---------------- */
  /* Our Expertise: numerals shrink so they don't crowd the title on a phone. */
  .m-expertise-num { font-size: 32px !important; }
  .m-expertise-item { gap: 14px !important; padding: 20px 0 !important; }

  /* Text on the grey panel first, the founders photo as a full band below
     (feathered edges). Uniform total height with the other heroes. */
  .m-part-hero { display: flex !important; flex-direction: column !important; min-height: 560px !important; }
  .m-part-hero-scrim { display: none !important; }
  .m-part-hero-inner { order: 1 !important; min-height: 0 !important; flex: 0 0 auto !important; gap: 22px !important; padding-bottom: 16px !important; }
  .m-part-hero-inner h1 { font-size: clamp(38px, 11vw, 58px) !important; }
  #part-hero {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 220px !important;
    flex: 1 1 auto !important;
    order: 2 !important;
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%),
      linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%) !important;
    -webkit-mask-composite: source-in !important;
    mask-image:
      linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%),
      linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%) !important;
    mask-composite: intersect !important;
  }

  /* ---------------- About Us: "Supported by" band ---------------- */
  /* Heading keeps its own solid space above the logo marquee, both sitting
     over the full-bleed leaf photo. */
  .m-supported { min-height: 420px !important; }
  .m-supported-head { padding: 26px 20px 16px !important; }
  .m-supported-imgwrap { min-height: 190px !important; }
  .m-supported-chip { height: 72px !important; padding: 12px 22px !important; }
  .m-supported-chip img { max-height: 60% !important; }
  .m-supported-chip span { font-size: 16px !important; }

  /* ---------------- Our Services: "Why VieSmart" ---------------- */
  /* Left-align the copy block on phones instead of the desktop's right-align. */
  .m-svcwhy-text { text-align: left !important; }
  .m-svcwhy-body { margin-left: 0 !important; }
  /* Force the explicit single-column stack (rather than relying on
     auto-fit) and give the photo a fixed, unambiguous height so it always
     fully covers its row — no seam/gap against the hero above it. */
  .m-svcwhy-section { grid-template-columns: 1fr !important; }
  #svc-why { height: 320px !important; min-height: 320px !important; }

  /* ---------------- Our Services: hero (overlay — title over photo) ---------------- */
  /* Uniform with the other heroes: title mixed over the background photo.
     A top-down tint keeps the copy legible; the photo shows through below. */
  .m-svc-hero-scrim {
    background: linear-gradient(180deg, #dde3ea 0%, rgba(221,227,234,0.94) 42%, rgba(221,227,234,0.45) 72%, rgba(221,227,234,0) 100%) !important;
  }
  .m-svc-hero { min-height: 560px !important; }
  .m-svc-hero-inner {
    min-height: 560px !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 34px 20px 40px !important;
  }
  .m-svc-hero-inner h1 { font-size: clamp(44px, 13vw, 60px) !important; }
  .m-svc-hero-inner > div { max-width: 100% !important; }
  .m-svc-hero-inner p { max-width: 100% !important; }
  .m-svc-brochures { max-width: 100% !important; }

  /* ---------------- Footer: contact button full-width & centered on phone ---------------- */
  .m-footer-contact-btn { width: 100% !important; }

  /* ---------------- Our Services: TurboVie / SkinAvatar ---------------- */
  /* Ghost numeral shrinks so it doesn't overwhelm the phone-width headline. */
  .m-svc-ghost { font-size: 42px !important; top: 8px !important; right: 16px !important; }
  #turbovie, #skinavatar { padding-top: 78px !important; }
  /* Image + copy stack instead of sitting in two fixed columns. */
  .m-svc-twocol { grid-template-columns: 1fr !important; }
  /* Spec label sits above its value instead of a rigid 170px label column. */
  .m-svc-specrow { grid-template-columns: 1fr !important; gap: 6px !important; }
}