/* USFLUENT unified brand/header/hero rhythm — 2026-10-14.
   The approved USFLUENT image remains intact. Never rebuild its
   lettering, emblem or underline with HTML/CSS. */

/* Same visual header frame across homepage and Speaking Club.
   Extra vertical breathing room keeps the fine gold divider clearly
   below the lowest part of the approved mark. */
header.top,
header.header {
  box-sizing:border-box;
  border-bottom:1px solid #b98b48!important;
}
header.top .bar {
  height:96px!important;
  min-height:96px!important;
  padding-block:0!important;
  align-items:center!important;
}
header.header {
  min-height:96px!important;
  padding:14px max(5vw,20px)!important;
  display:flex;
  align-items:center;
}
header.top a.premiumBrand,
header.header a.premiumBrand {
  flex:0 0 206px!important;
  width:206px!important;
  max-width:206px!important;
  height:60px!important;
  min-height:60px!important;
  align-self:center!important;
  margin:0!important;
  background-position:center center!important;
  background-size:contain!important;
  text-decoration:none!important;
}
header.top .tools {
  display:flex;
  align-items:center;
  flex:0 0 auto;
}
header.top .studentJoin {
  padding-inline:17px!important;
  font-size:13px!important;
  line-height:1.2!important;
  white-space:nowrap;
  text-align:center;
}
header.top .langbtn,
header.top .menuBtn {
  min-height:43px!important;
}
header.header nav {
  margin-left:auto;
  flex:0 0 auto;
}
header.header .back {
  flex:0 0 auto;
}

/* The main hero composition is shared by EN, RO and RU. These
   constraints stabilize the same content anchor and spacing while
   permitting necessary localization-based line wrapping. */
#home .heroGridPhoto {
  align-items:center!important;
}
#home .heroCopy {
  width:100%;
  max-width:650px;
  min-width:0;
  align-self:center;
}
#home .heroCopy .eyebrow {
  margin-bottom:15px!important;
  line-height:1.45!important;
}
#home .heroCopy h1 {
  font-size:clamp(52px,5.8vw,82px)!important;
  line-height:1.01!important;
  letter-spacing:-.047em!important;
  margin:0 0 22px!important;
  text-wrap:balance;
  overflow-wrap:normal;
}
#home .heroCopy h1 span {
  display:block;
}
#home .heroCopy .lead {
  margin-top:0!important;
  margin-bottom:0!important;
  line-height:1.54!important;
}
#home .heroActionsPremium {
  margin-top:24px!important;
  align-items:center;
}
#home .heroPrimaryCta,
#home .heroSecondaryCta {
  min-height:48px;
}

/* Natural Russian and Romanian phrases contain more glyphs than the
   English copy. Use measured font-size steps, not scaling or clipping. */
html[lang="ro"] #home .heroCopy h1 {
  font-size:clamp(50px,5.5vw,76px)!important;
}
html[lang="ru"] #home .heroCopy h1 {
  font-size:clamp(47px,5.15vw,70px)!important;
}

/* iPad landscape and compact laptop: shared header height and
   guaranteed gap between brand and bottom divider. */
@media (min-width:621px) and (max-width:1100px) {
  header.top .bar {height:91px!important;min-height:91px!important}
  header.header {min-height:91px!important;padding-block:14px!important}
  header.top a.premiumBrand,
  header.header a.premiumBrand {
    flex-basis:192px!important;
    width:192px!important;
    max-width:192px!important;
    height:55px!important;
    min-height:55px!important;
  }
  #home .heroGridPhoto {min-height:700px}
  #home .heroCopy {padding-left:14px}
  #home .heroCopy h1 {font-size:clamp(46px,5.65vw,65px)!important}
  html[lang="ro"] #home .heroCopy h1 {font-size:clamp(45px,5.25vw,61px)!important}
  html[lang="ru"] #home .heroCopy h1 {font-size:clamp(42px,4.85vw,55px)!important}
  #home .heroCopy .lead {font-size:clamp(15px,1.65vw,18px)}
}
@media (max-width:620px) {
  header.top .bar {
    height:76px!important;
    min-height:76px!important;
    gap:6px!important;
  }
  header.top a.premiumBrand {
    flex:0 0 clamp(120px,35vw,153px)!important;
    width:clamp(120px,35vw,153px)!important;
    max-width:clamp(120px,35vw,153px)!important;
    height:44px!important;
    min-height:44px!important;
  }
  header.top .tools {gap:5px!important}
  header.top .studentJoin {
    padding-inline:10px!important;
    min-height:42px!important;
    font-size:11px!important;
  }
  header.top .langbtn,header.top .menuBtn {min-width:39px!important}
  header.header {
    min-height:76px!important;
    padding:12px 14px!important;
    flex-wrap:wrap;
    gap:6px 10px;
  }
  header.header a.premiumBrand {
    flex:0 0 clamp(120px,35vw,153px)!important;
    width:clamp(120px,35vw,153px)!important;
    max-width:clamp(120px,35vw,153px)!important;
    height:44px!important;
    min-height:44px!important;
  }
  header.header nav {margin-left:auto;gap:2px}
  header.header nav a {padding:6px 8px}
  header.header .back {
    margin-left:auto;
    font-size:12px;
    line-height:1.2;
  }
  #home .heroCopy {padding:0!important;max-width:100%}
  #home .heroCopy .eyebrow {margin-bottom:12px!important}
  #home .heroCopy h1 {
    font-size:clamp(37px,9.2vw,52px)!important;
    line-height:1.03!important;
    margin-bottom:18px!important;
  }
  html[lang="ro"] #home .heroCopy h1 {font-size:clamp(35px,8.7vw,49px)!important}
  html[lang="ru"] #home .heroCopy h1 {font-size:clamp(33px,8vw,46px)!important}
  #home .heroActionsPremium {margin-top:22px!important}
}
@media (max-width:370px) {
  header.top .studentJoin {padding-inline:7px!important;font-size:10.5px!important}
  header.header .back {width:100%;text-align:right}
}

/* Final portrait-safe hero refinements after live visual QA.
   Keep the title on the right side of the portrait without hiding
   long Romanian/Russian words or forcing horizontal scroll. */
@media (min-width:901px) {
  #home .heroCopy {max-width:595px!important}
}
@media (min-width:621px) and (max-width:1100px) {
  #home .heroGridPhoto {
    min-height:670px!important;
    padding-top:66px!important;
    padding-bottom:66px!important;
  }
  html[lang="ru"] #home .heroCopy h1 {
    font-size:clamp(40px,4.55vw,53px)!important;
  }
}