/* LEXVICO homepage hero repair | 2026-10-24
   The founder's real photograph and headline are GRID SIBLINGS.
   This prevents the old absolute-position portrait from ever covering the text.
   Only body.lex-index main > .hero is affected; other hero assets remain untouched.
*/
@media (min-width: 981px) {
  body.lex-index.lex-refined main > .hero {
    min-height: 710px !important;
  }
  body.lex-index.lex-refined main > .hero > .hero-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1.38fr) minmax(280px, 0.95fr) !important;
    grid-template-rows: auto !important;
    column-gap: clamp(35px, 6vw, 104px) !important;
    align-items: center !important;
    align-content: center !important;
    justify-items: stretch !important;
    width: min(1360px, calc(100% - 100px)) !important;
    max-width: 1360px !important;
    min-height: 710px !important;
    height: auto !important;
    box-sizing: border-box !important;
    padding: 58px 0 !important;
    margin: 0 auto !important;
  }
  body.lex-index.lex-refined main > .hero > .hero-content > .hero-copy-wrap {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 635px !important;
    position: relative !important;
    z-index: 4 !important;
    margin: 0 !important;
    min-width: 0 !important;
  }
  body.lex-index.lex-refined main > .hero > .hero-content > .lex-home-portrait {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    justify-self: end !important;
    align-self: center !important;
    width: min(100%, 420px) !important;
    max-width: 420px !important;
    height: clamp(420px, 36vw, 510px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
  }
  body.lex-index.lex-refined main > .hero > .hero-content > .hero-copy-wrap h1 {
    font-size: clamp(52px, 4.6vw, 77px) !important;
    line-height: 0.95 !important;
    max-width: 635px !important;
    overflow-wrap: normal !important;
  }
  body.lex-index.lex-refined main > .hero > .hero-content .hero-copy {
    max-width: 570px !important;
  }
  body.lex-index.lex-refined main > .hero > .hero-content .trust-row {
    max-width: 100% !important;
    width: 100% !important;
  }
}
@media (min-width:981px) and (max-width:1200px) {
  body.lex-index.lex-refined main > .hero > .hero-content {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr) !important;
    column-gap: 34px !important;
  }
  body.lex-index.lex-refined main > .hero > .hero-content > .hero-copy-wrap h1 {
    font-size: clamp(47px, 5.05vw, 61px) !important;
  }
  body.lex-index.lex-refined main > .hero > .hero-content > .lex-home-portrait {
    height: 435px !important;
  }
}
/* On tablets and phones, the full text comes first, with the portrait below. */
@media (max-width: 980px) {
  body.lex-index.lex-refined main > .hero {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
  body.lex-index.lex-refined main > .hero > .hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: min(730px, calc(100% - 48px)) !important;
    max-width: 730px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 48px 0 46px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  body.lex-index.lex-refined main > .hero > .hero-content > .hero-copy-wrap {
    position: relative !important;
    flex: 0 1 auto !important;
    order: 1 !important;
    width: 100% !important;
    max-width: 730px !important;
    min-width: 0 !important;
    margin: 0 !important;
    z-index: 4 !important;
  }
  body.lex-index.lex-refined main > .hero > .hero-content > .lex-home-portrait {
    position: relative !important;
    flex: none !important;
    order: 2 !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: min(420px, 90%) !important;
    max-width: 420px !important;
    height: 445px !important;
    margin: 35px auto 0 !important;
    align-self: center !important;
    box-sizing: border-box !important;
  }
  body.lex-index.lex-refined main > .hero > .hero-content > .hero-copy-wrap h1 {
    font-size: clamp(51px, 7.8vw, 72px) !important;
    line-height: 1.01 !important;
    max-width: 710px !important;
  }
  body.lex-index.lex-refined main > .hero > .hero-content .trust-row {
    width: 100% !important;
  }
}
@media (max-width: 600px) {
  body.lex-index.lex-refined main > .hero > .hero-content {
    width: calc(100% - 42px) !important;
    padding: 35px 0 38px !important;
  }
  body.lex-index.lex-refined main > .hero > .hero-content > .hero-copy-wrap h1 {
    font-size: clamp(42px, 11vw, 60px) !important;
  }
  body.lex-index.lex-refined main > .hero > .hero-content > .lex-home-portrait {
    width: min(350px, 95%) !important;
    height: 365px !important;
    margin: 27px auto 0 !important;
  }
}