/* ===== Hero ===== */
.hero{
  position:relative;overflow:hidden;
  background:var(--navy);
  /* The sticky header is transparent at the top and overlays the hero. It takes 76px
     of flow space, so pull the hero up by that amount to sit UNDER it (no white gap at
     top), and keep 150px top padding so the content clears the header. On scroll the
     header turns solid white over this same space — no double gap either way. */
  margin-block-start:-76px;
  padding-block:150px 92px;
  min-height:750px;
}

/* --- media composition (bg photo + lawyer + badges) --- */
.hero__media{position:absolute;inset:0;z-index:0}
.hero__bg{position:absolute;inset:0;overflow:hidden}
.hero__bg-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:left center;
}
.hero__bg::after{   /* navy scrim: clear photo on the left, solid navy on the right */
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right,
     rgba(14,13,44,0) 0%,
     rgba(14,13,44,.10) 22%,
     rgba(14,13,44,.72) 46%,
     var(--navy) 58%,
     var(--navy) 100%);
}
.hero__lawyer{
  position:absolute;inset-block-end:0;
  left:19%;height:94%;width:auto;z-index:2;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.35));
}
.hero__badges{
  position:absolute;z-index:3;
  left:0;inset-block-start:36%;width:118px;height:auto;
}

/* --- text --- */
.hero__inner{position:relative;z-index:4;display:flex}
.hero__text{width:54%;max-width:730px;text-align:right;margin-inline-end:auto}
.hero__eyebrow{
  color:var(--gold-eyebrow);font-size:clamp(26px,1.9vw,34px);font-weight:400;
  line-height:1.2;margin-bottom:8px;
}
.hero__title{
  color:#fff;font-size:clamp(40px,3.05vw,56px);font-weight:700;line-height:1.18;
  margin-bottom:26px;
}
.hero__lead{
  color:#fff;font-size:clamp(19px,1.25vw,23px);font-weight:400;line-height:1.42;
  max-width:640px;margin-inline-end:auto;
}
.hero__lead strong{font-weight:700}
.hero__bullets{margin-top:26px;display:flex;flex-direction:column;gap:16px}
.hero__bullets li{
  display:flex;align-items:center;gap:12px;justify-content:flex-start;
  color:#fff;font-size:clamp(19px,1.25vw,23px);line-height:1.2;
}
.hero__bullets strong{font-weight:700}

/* ===== Lead form (overlaps hero bottom) ===== */
.lead-band{position:relative;z-index:20}
.lead-form{
  background:#fff;border-radius:10px;
  box-shadow:0 24px 60px rgba(7,12,30,.22);
  padding:34px 40px 40px;margin-top:-84px;
}
.lead-form__title{
  text-align:center;color:var(--navy);
  font-size:36px;font-weight:600;line-height:1.1;margin-bottom:24px;
}
.lead-form__row{display:flex;gap:16px;align-items:stretch}
.lead-form__field{
  flex:1;background:var(--cream);border-radius:4px;
  height:60px;display:flex;align-items:center;padding-inline:22px;
}
.lead-form__field input{
  border:0;background:transparent;width:100%;height:100%;
  font-size:22px;color:var(--ink-soft);outline:none;
  /* RTL: placeholder + typed text (incl. the tel field) align to the right */
  text-align:right;direction:rtl;
}
.lead-form__field input::placeholder{color:var(--ink-soft);opacity:1;text-align:right;direction:rtl}
/* belt-and-braces: force the tel field RTL right-align (digits + placeholder on the right) */
.lead-form__field input[type="tel"]{text-align:right;direction:rtl;unicode-bidi:plaintext}
.lead-form__submit{
  flex:0 0 auto;height:60px;
}
.lead-form__submit .btn-gold__label{font-size:21px;padding:0 26px}
.lead-form__submit .btn-gold__ico{width:60px;flex-basis:60px;height:60px}
.lead-form__submit .btn-gold__ico svg{width:26px;height:26px}

/* white area the form dips into (placeholder until next section) */
.hero-tail{background:#fff;height:120px}

/* ============ MOBILE ============ */
@media (max-width:1200px){
  /* mobile header is 62px — pull hero up by that so the transparent bar overlays the media */
  .hero{margin-block-start:-62px;padding-block:0 40px;min-height:0;overflow:visible}
  .hero__media{position:relative;inset:auto;height:440px;overflow:hidden}
  .hero__bg{overflow:hidden}
  .hero__bg::after{
    background:linear-gradient(to bottom,
       rgba(14,13,44,0) 40%,
       rgba(14,13,44,.55) 78%,
       var(--navy) 100%);
  }
  .hero__lawyer{left:50%;transform:translateX(-50%);height:100%}
  .hero__badges{left:auto;right:12px;inset-block-start:92px;width:88px}
  .hero__inner{display:block}
  .hero__text{width:100%;max-width:none;text-align:center;padding-top:26px}
  .hero__eyebrow{font-size:22px}
  .hero__title{font-size:36px;margin-bottom:20px;position:relative;padding-bottom:22px}
  .hero__title::after{
    content:"";position:absolute;inset-block-end:0;inset-inline-start:50%;
    transform:translateX(-50%);width:120px;height:2px;background:var(--gold);
  }
  .hero__lead{font-size:20px;text-align:center;margin-inline:auto}
  .hero__bullets{align-items:flex-start;max-width:340px;margin-inline:auto;margin-top:22px}
  .hero__bullets li{font-size:20px}

  .lead-form{margin-top:28px;padding:26px 20px 30px;border-radius:12px}
  .lead-form__title{font-size:26px}
  .lead-form__row{flex-direction:column}
  .lead-form__field{height:64px}
  .lead-form__submit{width:100%}
  .lead-form__submit .btn-gold{width:100%;justify-content:space-between}
  .hero-tail{display:none}
}

/* ===== Hero disclaimer + bullets + submit button tweaks ===== */
body.lp-dz .hero__disclaimer{color:#e5c38b}
body.lp-dz .hero__bullets li{align-items:flex-start;text-align:right}
body.lp-dz .hero__bullets li > span:last-child{text-align:right}
body.lp-dz .hero__bullets li > .diamond{margin-top:6px;flex:0 0 auto}
body.lp-dz .lead-form__submit .btn-gold__label{flex:1 1 auto;text-align:center;padding-left:0;padding-right:0}
body.lp-dz .lead-form__submit .btn-gold__ico{flex:0 0 15%;width:15%}
@media (min-width:1025px){
  body.lp-dz .lead-form__submit{min-width:211px}
}