/* Hero banner at the top of every page */
.hero{position:relative;flex:none;height:clamp(58px,9.5vh,92px);border-radius:14px;overflow:hidden;color:#fff;display:flex;align-items:center;gap:44px;padding:0 24px;background:#0b1f40;box-shadow:0 6px 18px rgba(10,30,70,.25)}
.hero .bg{position:absolute;inset:0;width:100%;height:100%}
.hero:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,22,48,.92) 0,rgba(8,22,48,.55) 42%,rgba(8,22,48,0) 78%)}
.hero>*:not(.bg){position:relative;z-index:2}
.hero h1{margin:0;font-size:clamp(34px,6vh,52px);line-height:1;font-weight:800;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.hero p{margin:2px 0 0;font-size:clamp(14px,2vh,19px);line-height:1.2;font-weight:500;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.hero.lg{height:auto;min-height:clamp(96px,15vh,140px);padding:14px 24px;gap:22px}
.hero.lg h1{font-size:clamp(26px,4.2vh,40px);line-height:1.1}
.hero.lg p{display:block}
.logo{width:clamp(56px,9vh,80px);height:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
@media(max-height:800px){.hero{height:50px}.hero h1{font-size:30px}.hero p{display:none}.hero.lg p{display:block}}
@media(max-width:1180px){.hero h1{font-size:44px}.hero.lg h1{font-size:30px}}
@media(max-width:900px){.hero{flex-wrap:wrap;height:auto;padding:18px;gap:16px}}
.ff b{font-weight:800;color:#ffd08a}
.hero.lg h1{font-size:clamp(40px,7vh,64px);letter-spacing:.14em}
.hero.lg p.ff{font-size:clamp(16px,2.4vh,22px);font-weight:600;margin:4px 0 6px}