/* Production mobile hero rescue.
   Load this AFTER modern-final.css and mobile-fix.css. */

@media (max-width: 720px) {
  .site-header {
    min-height: 82px !important;
    padding: 14px 18px !important;
  }

  .brand,
  .brand-lockup,
  .brand-lockup-combo {
    min-width: 0 !important;
  }

  .brand-mark-old {
    width: 178px !important;
    max-width: 48vw !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .brand-lockup-combo small,
  .brand-wordmark {
    display: none !important;
  }

  .lang-switch-header {
    width: 100px !important;
    height: 44px !important;
    padding: 4px !important;
  }

  .lang-switch-header button {
    font-size: 13px !important;
  }

  .nav-toggle {
    width: 44px !important;
    height: 44px !important;
  }

  .hero {
    min-height: auto !important;
    padding: 30px 0 36px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(251, 251, 246, 0.97)),
      url("https://kakehashi.tech/assets/proof/teamz-hero.jpg") center top / cover no-repeat !important;
    overflow: hidden !important;
  }

  .hero-grid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 20px !important;
    margin: 0 !important;
  }

  .hero-copy {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html .hero .japan-cue,
  html[lang="ja"] .hero .japan-cue,
  html .hero .hero-jp-line,
  html[lang="ja"] .hero .hero-jp-line,
  html .hero .hero-proof-line,
  html[lang="ja"] .hero .hero-proof-line,
  html .hero .hero-scope,
  html[lang="ja"] .hero .hero-scope,
  html .hero .signal-row,
  html[lang="ja"] .hero .signal-row,
  html .hero .hero-company-proof,
  html[lang="ja"] .hero .hero-company-proof,
  html .hero .hero-system-card,
  html[lang="ja"] .hero .hero-system-card,
  html .hero .gtm-visual-old,
  html[lang="ja"] .hero .gtm-visual-old {
    display: none !important;
  }

  .hero .eyebrow {
    order: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: fit-content !important;
    margin: 0 0 14px !important;
    color: #a33a31 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.1em !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
  }

  .hero .eyebrow::before {
    content: "" !important;
    display: block !important;
    width: 38px !important;
    height: 2px !important;
    flex: 0 0 38px !important;
    background: currentColor !important;
  }

  .hero h1 {
    order: 2 !important;
    max-width: 9em !important;
    margin: 0 !important;
    color: #07101f !important;
    font-size: clamp(44px, 12.5vw, 58px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.025em !important;
    font-weight: 900 !important;
    text-wrap: balance !important;
    word-break: auto-phrase !important;
    overflow-wrap: anywhere !important;
  }

  html[lang="ja"] .hero h1 {
    max-width: 8em !important;
    font-size: clamp(39px, 10.8vw, 50px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  .hero-lede {
    order: 3 !important;
    max-width: 25em !important;
    margin: 16px 0 0 !important;
    color: #344154 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    font-weight: 720 !important;
    letter-spacing: 0 !important;
  }

  html[lang="ja"] .hero-lede {
    font-size: 15.5px !important;
    line-height: 1.62 !important;
    font-weight: 700 !important;
  }

  .hero-actions {
    order: 4 !important;
    display: flex !important;
    gap: 10px !important;
    margin: 20px 0 0 !important;
  }

  .hero-actions .button {
    min-height: 48px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  html .hero .hero-bridge-visual,
  html[lang="ja"] .hero .hero-bridge-visual,
  html .hero .gtm-visual.hero-bridge-visual,
  html[lang="ja"] .hero .gtm-visual.hero-bridge-visual {
    order: 5 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 24px 0 0 !important;
  }

  .hero-field-card {
    width: min(100%, 356px) !important;
    margin: 0 !important;
    border: 1px solid rgba(16, 42, 85, 0.12) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 18px 42px rgba(16, 42, 85, 0.12) !important;
  }

  .hero-field-card img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }

  .hero-field-card figcaption {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    display: grid !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 13px 14px 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  .hero-field-card figcaption span {
    color: #a33a31 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  .hero-field-card figcaption strong {
    color: #102a55 !important;
    font-size: 13px !important;
    line-height: 1.28 !important;
    font-weight: 850 !important;
  }
}

@media (max-width: 390px) {
  .brand-mark-old {
    width: 162px !important;
  }

  .hero h1 {
    font-size: clamp(40px, 11.4vw, 52px) !important;
  }

  html[lang="ja"] .hero h1 {
    font-size: clamp(36px, 10.2vw, 46px) !important;
  }
}

/* 2026-07-07 no photo overlays: do not place text inside hero images on mobile. */
.hero-field-card::before,
.hero-field-card::after,
.hero-field-card figcaption,
.hero-field-card figcaption * {
  display: none !important;
  content: none !important;
}

/* 2026-07-07 bilingual polish: final mobile heading override after legacy fixes. */
@media (max-width: 720px) {
  html .hero h1,
  html[lang="en"] .hero h1 {
    max-width: 10.2em !important;
    font-size: clamp(38px, 10.6vw, 50px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.015em !important;
    text-wrap: balance !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  html[lang="ja"] .hero h1 {
    max-width: 11em !important;
    font-size: clamp(30px, 7.9vw, 38px) !important;
    line-height: 1.24 !important;
    letter-spacing: 0 !important;
    text-wrap: balance !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-break: strict !important;
  }

  html[lang="ja"] .hero-title-line {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-break: strict !important;
  }

  .hero-lede,
  .hero-proof-line {
    max-width: 100% !important;
    line-height: 1.68 !important;
  }

  html[lang="ja"] .hero-lede,
  html[lang="ja"] .hero-proof-line {
    line-height: 1.78 !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-break: strict !important;
  }
}

@supports (word-break: auto-phrase) {
  @media (max-width: 720px) {
    html[lang="ja"] .hero h1,
    html[lang="ja"] .hero-title-line,
    html[lang="ja"] .hero-lede,
    html[lang="ja"] .hero-proof-line {
      word-break: auto-phrase !important;
    }
  }
}

/* 2026-07-07 final JP mobile headline: avoid over-balanced gaps after Japanese punctuation. */
@media (max-width: 720px) {
  html[lang="ja"] .hero h1 {
    max-width: 9.2em !important;
    font-size: clamp(30px, 8.3vw, 36px) !important;
    line-height: 1.24 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    text-wrap: wrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-break: strict !important;
  }

  html[lang="ja"] .hero-title-line {
    text-wrap: wrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-break: strict !important;
  }
}

@supports (word-break: auto-phrase) {
  @media (max-width: 720px) {
    html[lang="ja"] .hero h1,
    html[lang="ja"] .hero-title-line {
      word-break: auto-phrase !important;
    }
  }
}