/* Hero section: responsive, grid, photo and RTL final fixes */
/* ---- hero-final-responsive-fix ---- */
/* Final hero balance: use the whole desktop width and keep the portrait fully visible on mobile. */
@media (min-width: 901px){
  .hero{
    min-height: min(780px, 88svh) !important;
    height: min(780px, 88svh) !important;
  }
  .hero-scene{
    left:0 !important;
    right:auto !important;
    width:44% !important;
    height:100% !important;
    z-index:0 !important;
  }
  .hero-scene .scene-photo{
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center bottom !important;
  }
  .hero-in{
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
    min-height:100% !important;
    padding-top:7.5rem !important;
    padding-bottom:3rem !important;
    padding-left:5vw !important;
    padding-right:44vw !important;
    align-items:flex-start !important;
    justify-content:center !important;
    text-align:right !important;
  }
  .hero-kicker,
  .hero h1,
  .hero-lede,
  .hero-cta{
    width:100% !important;
    max-width:780px !important;
    margin-left:0 !important;
    margin-right:0 !important;
    align-self:flex-start !important;
  }
  .hero-kicker{justify-content:flex-start !important}
  .hero h1{font-size:clamp(3rem,4.8vw,5.5rem) !important;max-width:13ch !important}
  .hero-lede{max-width:700px !important}
  .hero-cta{justify-content:flex-start !important}
  .hero-foot{width:100% !important;margin-top:2.5rem !important}
}

@media (max-width: 900px){
  .hero{
    min-height:0 !important;
    height:auto !important;
    padding-top:0 !important;
  }
  .hero-scene{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:410px !important;
    margin-top:64px !important;
    z-index:0 !important;
    overflow:hidden !important;
    background:linear-gradient(180deg,#06182B,#0A2A45) !important;
  }
  .hero-scene .scene-photo{
    position:absolute !important;
    top:0 !important;
    left:50% !important;
    right:auto !important;
    bottom:auto !important;
    transform:translateX(-50%) !important;
    width:auto !important;
    height:100% !important;
    max-width:none !important;
    object-fit:contain !important;
    object-position:center top !important;
    opacity:1 !important;
    filter:drop-shadow(0 18px 35px rgba(0,0,0,.58)) !important;
  }
  .hero-scrim{
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:linear-gradient(180deg,rgba(6,24,43,.02) 0%,rgba(6,24,43,.08) 48%,rgba(6,24,43,.96) 100%) !important;
  }
  .hero-in{
    min-height:0 !important;
    padding:2rem 1.1rem 2.4rem !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
  }
}
@media (max-width:520px){
  .hero-scene{height:340px !important;margin-top:58px !important}
  .hero-scene .scene-photo{height:100% !important;width:auto !important}
  .hero-in{padding:1.8rem .9rem 2.2rem !important}
  .hero h1{font-size:clamp(1.9rem,9.5vw,2.55rem) !important;line-height:1.28 !important}
}

/* ---- desktop-hero-true-grid-fix ---- */
/* FINAL DESKTOP HERO FIX: the copy must occupy the RIGHT column; the portrait stays LEFT. */
@media (min-width:901px){
  .hero{min-height:760px;height:min(88svh,900px);}
  .hero-in{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-rows:auto auto auto auto 1fr !important;
    grid-template-areas:
      "copyKicker copyKicker"
      "copyTitle copyTitle"
      "copyLead copyLead"
      "copyCta copyCta"
      "foot foot" !important;
    align-content:center !important;
    justify-items:stretch !important;
    min-height:760px !important;
    padding:8rem 0 3rem !important;
    width:min(100% - 3.2rem,1320px) !important;
    margin-inline:auto !important;
    text-align:right !important;
  }
  .hero-kicker{grid-area:copyKicker !important;grid-column:2 !important;width:100% !important;max-width:650px !important;margin:0 0 1rem auto !important;align-self:end !important;}
  .hero h1{grid-area:copyTitle !important;grid-column:2 !important;width:100% !important;max-width:650px !important;margin:0 0 1.15rem auto !important;align-self:end !important;}
  .hero-lede{grid-area:copyLead !important;grid-column:2 !important;width:100% !important;max-width:600px !important;margin:0 0 1.6rem auto !important;align-self:end !important;}
  .hero-cta{grid-area:copyCta !important;grid-column:2 !important;width:100% !important;max-width:650px !important;margin:0 auto 0 0 !important;justify-content:flex-start !important;align-self:end !important;}
  .hero-foot{grid-area:foot !important;grid-column:1 / -1 !important;width:100% !important;max-width:none !important;margin:3.2rem 0 0 !important;align-self:end !important;}
  .hero-scene{left:0 !important;right:auto !important;width:50% !important;height:100% !important;z-index:0 !important;}
  .hero-scene .scene-photo{left:0 !important;right:auto !important;top:0 !important;bottom:0 !important;width:100% !important;height:100% !important;object-fit:contain !important;object-position:center bottom !important;transform:none !important;max-width:none !important;}
  .hero-scrim{z-index:1 !important;background:linear-gradient(90deg,rgba(13,27,42,.02) 0%,rgba(13,27,42,.08) 55%,rgba(13,27,42,.95) 100%) !important;}
}
@media (min-width:901px) and (max-width:1200px){
  .hero-in{width:min(100% - 2.4rem,1120px) !important;}
  .hero h1{font-size:clamp(2.7rem,4.4vw,4.4rem) !important;}
}

/* ---- desktop-hero-photo-complete ---- */
@media (min-width:901px){
  .hero-scene .scene-photo{
    width:100% !important;
    height:94% !important;
    max-width:100% !important;
    max-height:94% !important;
    left:0 !important; right:auto !important; bottom:0 !important; top:auto !important;
    object-fit:contain !important;
    object-position:center bottom !important;
  }
}

/* ---- desktop-hero-rtl-column-final ---- */
/* Final correction: site is RTL, so CSS Grid column 1 is the visual RIGHT column. */
@media (min-width:901px){
  .hero-in{direction:rtl !important;}
  .hero-kicker,
  .hero h1,
  .hero-lede,
  .hero-cta{grid-column:1 !important;}
  .hero-kicker,
  .hero h1,
  .hero-lede,
  .hero-cta{justify-self:stretch !important;}
  .hero-kicker,
  .hero h1,
  .hero-lede{margin-right:0 !important;margin-left:0 !important;}
  .hero-cta{margin-right:0 !important;margin-left:0 !important;}
}