/* iHUB STORES • V7.2 — hero-only typographic refinement. All other sections unchanged. */

/* Replace uniformly-heavy headline with an editorial Light + Bold hierarchy. */
.hero-copy #hero-title {
  width: 100%;
  max-width: 680px;
  margin: 9px 0 23px;
  color: #071c4c;
  font-size: clamp(40px, 3.45vw, 61px) !important;
  line-height: 1.15 !important;
  letter-spacing: -.035em !important;
  text-wrap: initial;
  overflow-wrap: normal;
  font-weight: 400 !important;
}
.hero-copy #hero-title .hero-headline-line {
  display: block;
  white-space: nowrap;
  margin: 0;
  font-weight: 400;
}
.hero-copy #hero-title .hero-headline-line + .hero-headline-line { margin-top: 3px; }
.hero-copy #hero-title .hero-light {
  font-weight: 300;
  color: #18345e;
}
.hero-copy #hero-title strong {
  color: #071c4c;
  font-weight: 750;
}
.hero-copy #hero-title .hero-accent,
.hero-copy #hero-title em {
  color: #0967ec;
  font-weight: 750;
  font-style: normal;
}
.hero-copy #hero-title .hero-line-final {
  margin-top: 13px;
  font-size: .77em;
  letter-spacing: -.015em;
}
.hero-copy .hero-sub {
  width: min(100%, 575px);
  max-width: 575px;
  margin: 0 0 0 auto;
  font-size: clamp(14px, 1.02vw, 17px);
  line-height: 1.95;
  font-weight: 400;
  color: #49607e;
  text-shadow: 0 1px 3px rgba(255,255,255,.5);
  text-wrap: pretty;
}
.hero-copy .hero-sub strong {
  font-weight: 650;
  color: #142c55;
}
.hero-copy .hero-sub .hero-sub-highlight {
  font-weight: 700;
  color: #0b4fbc;
}
.hero-copy .hero-benefits {
  margin-top: 27px;
  font-size: clamp(11px, .88vw, 13px);
  font-weight: 600;
}

/* Arabic is designed as four deliberate rows, not a paragraph with accidental wraps. */
html[lang="ar"] .hero-copy #hero-title {
  font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: clamp(37px, 3.12vw, 54px) !important;
  line-height: 1.38 !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  text-align: right;
}
html[lang="ar"] .hero-copy #hero-title .hero-headline-line + .hero-headline-line { margin-top: -2px; }
html[lang="ar"] .hero-copy #hero-title .hero-line-third {margin-top: -9px;}
html[lang="ar"] .hero-copy #hero-title .hero-line-final {
  margin-top: 2px;
  font-size: .70em;
  line-height: 1.55;
}
html[lang="ar"] .hero-copy #hero-title strong {font-weight: 700;}
html[lang="ar"] .hero-copy #hero-title .hero-accent {font-weight: 700;}
html[lang="ar"] .hero-copy #hero-title .hero-light {font-weight: 300;}
html[lang="ar"] .hero-copy .hero-sub {
  font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.94;
  font-weight: 400;
  text-align: right;
}
html[lang="ar"] .hero-copy .hero-sub strong {font-weight: 600;}
html[lang="ar"] .hero-copy .hero-sub .hero-sub-highlight {font-weight: 700;}

@media (min-width: 1241px) {
  .hero-copy {max-width: 700px;}
}
@media (min-width: 741px) and (max-width: 1240px) {
  .hero-copy #hero-title {font-size: clamp(37px, 3.4vw, 50px) !important;}
  html[lang="ar"] .hero-copy #hero-title {font-size: clamp(31px, 3.24vw, 44px) !important;}
  .hero-copy .hero-sub {font-size: 14px;}
}
@media (max-width: 740px) {
  .hero-copy #hero-title,
  html[lang="ar"] .hero-copy #hero-title {
    font-size: clamp(30px, 7.1vw, 43px) !important;
    margin: 0 0 17px;
    line-height: 1.22 !important;
  }
  html[lang="ar"] .hero-copy #hero-title {font-size: clamp(26px, 7vw, 36px) !important;line-height: 1.42 !important;}
  .hero-copy #hero-title .hero-headline-line {white-space: normal;}
  .hero-copy #hero-title .hero-line-final {font-size: .78em; margin-top: 11px;}
  html[lang="ar"] .hero-copy #hero-title .hero-line-third {margin-top: -5px;}
  html[lang="ar"] .hero-copy #hero-title .hero-line-final {font-size: .73em;line-height:1.55;margin-top:5px;}
  .hero-copy .hero-sub, html[lang="ar"] .hero-copy .hero-sub {max-width: 100%;width:100%;font-size:13.5px;line-height:1.8;}
  .hero-copy .hero-benefits {margin-top: 16px;font-size: 10.5px;}
}
@media (max-width: 380px) {
  html[lang="ar"] .hero-copy #hero-title {font-size: clamp(24px, 6.9vw, 28px) !important;}
  .hero-copy #hero-title {font-size: clamp(27px, 7.8vw, 30px) !important;}
  .hero-copy .hero-sub,html[lang="ar"] .hero-copy .hero-sub {font-size: 12.5px;}
}