/* Home hero spacing + quantum highlight (9 Nov 2026). Loaded on the home page only, after the other home stylesheets.
   Problem: .main-banner-content used justify-content:space-between across a 100vh box, so on a tall screen the spare height was
   spread between the headline and the paragraphs (about 80px each), and on a short laptop the paragraph box was fixed too small
   and the last line slid under the service buttons. Fix: a normal top-down flow with a modest gap, centred as a group, and a hero
   that grows with its content instead of clipping it. */

@media (min-width:992px){
  .home-refined main #mainmate.home-mainmate{
    height:auto!important;
    min-height:100vh!important;
    min-height:100svh!important;
    overflow:visible!important;
    padding-top:104px!important;
    padding-bottom:84px!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .home-refined main #mainmate.home-mainmate .main-banner-content{
    justify-content:center!important;
    height:auto!important;
    gap:clamp(14px,2.3vh,26px)!important;
    align-self:center!important;
  }
  .home-refined main #mainmate.home-mainmate .typingtext-upper,
  .home-refined main #mainmate.home-mainmate .hero-typing-oneline{
    height:auto!important;
    min-height:0!important;
  }
}

/* short laptop screens (for example 1366x650, 1280x600): keep both calls to action above the fold */
@media (min-width:992px) and (max-height:760px){
  .home-refined main #mainmate.home-mainmate{padding-top:92px!important;padding-bottom:64px!important}
  .home-refined main #mainmate.home-mainmate .main-banner-content{gap:12px!important}
  .home-refined main #mainmate .hero-chip.is-quantum{min-height:42px;padding-top:6px!important;padding-bottom:6px!important}
  .home-refined main #mainmate .typingtext-upper .hr-hero-more{display:none!important}
}

/* quantum highlight: a full-width orange button under the six service buttons */
.home-refined main #mainmate .hero-chip.is-quantum{
  grid-column:1/-1!important;
  display:flex!important;
  flex-wrap:wrap;
  flex-direction:row!important;
  align-items:center;
  justify-content:center;
  gap:4px 14px;
  background:#F38323!important;
  border:1.5px solid #FFB777!important;
  color:#0b2545!important;
  min-height:48px;
  box-shadow:0 10px 24px -12px rgba(243,131,35,.8)!important;
}
.home-refined main #mainmate .hero-chip.is-quantum:hover{background:#FF9638!important}
.home-refined main #mainmate .hero-chip.is-quantum:focus-visible{outline:3px solid #fff!important;outline-offset:3px}
.home-refined main #mainmate .hero-chip.is-quantum .hq-tag{
  font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:#0b2545;border-radius:999px;padding:3px 9px;
}
.home-refined main #mainmate .hero-chip.is-quantum .hq-main{font-weight:800}
.home-refined main #mainmate .hero-chip.is-quantum .hq-sub{font-size:.82rem;font-weight:600}
.home-refined main #mainmate .hero-chip.is-quantum::after{content:"→";font-weight:800;margin-left:2px}
@media (max-width:767px){
  .home-refined main #mainmate .hero-chip.is-quantum{padding:10px 12px!important}
  .home-refined main #mainmate .hero-chip.is-quantum .hq-sub{display:block;flex-basis:100%;font-size:.76rem}
}

/* ticker: make the quantum item stand out a little */
a.softo-ticker-item[href^="/quantum-computing-research/"]{color:#FFB777}
a.softo-ticker-item[href^="/quantum-computing-research/"] .softo-ticker-dot{background:#FFB777}

/* one paragraph: the two sentences flow together with no gap */
.home-refined main #mainmate .typingtext-upper .hr-hero-copyline{display:block;margin-top:8px!important}

/* ===== hero air (9 Nov 2026): the quantum button hugs its text, and the blocks get room to breathe ===== */
.home-refined main #mainmate .hero-chip.is-quantum{
  grid-column:1/-1!important;
  justify-self:center;
  width:fit-content;
  max-width:100%;
  padding-left:24px!important;
  padding-right:24px!important;
}
@media (min-width:992px){
  .home-refined main #mainmate .hero-chips{row-gap:14px!important}
  .home-refined main #mainmate .hero-chip.is-quantum{margin-top:clamp(2px,1.2vh,12px)}
  .home-refined main #mainmate .typingtext-upper{margin-bottom:clamp(8px,1.8vh,20px)!important}
  .home-refined main #mainmate .mainmate-softothemecontent .hero-cta-row-2{margin-top:clamp(16px,4.4vh,46px)!important}
}
@media (min-width:992px) and (max-height:760px){
  .home-refined main #mainmate .mainmate-softothemecontent .hero-cta-row-2{margin-top:14px!important}
  .home-refined main #mainmate .typingtext-upper{margin-bottom:6px!important}
}
@media (max-width:767px){
  .home-refined main #mainmate .hero-chip.is-quantum{width:100%;justify-self:stretch}
  .home-refined main #mainmate .mainmate-softothemecontent .hero-cta-row-2{margin-top:18px!important}
}

/* ===== hero rhythm (9 Nov 2026): one gap between blocks, one smaller gap inside a block =====
   Before: 21px, 21px, 8px, 37px, 72px between the blocks. Now every block gap is --hg and every in-block gap is --hgs. */
@media (min-width:992px){
  .home-refined main #mainmate.home-mainmate{--hg:clamp(18px,3.2vh,32px);--hgs:14px}
  .home-refined main #mainmate.home-mainmate .main-banner-content{gap:var(--hg)!important}
  .home-refined main #mainmate .hero-eyebrow,
  .home-refined main #mainmate .hero-h1-oneline,
  .home-refined main #mainmate .typingtext-upper{margin:0!important}
  .home-refined main #mainmate .mainmate-softothemecontent{margin:0!important;display:flex;flex-direction:column;gap:var(--hg)!important;row-gap:var(--hg)!important}
  .home-refined main #mainmate .hero-chips{margin:0!important;row-gap:var(--hgs)!important}
  .home-refined main #mainmate .hero-chip.is-quantum{margin-top:0!important}
  .home-refined main #mainmate .mainmate-softothemecontent .hero-cta-row-2{margin:0!important}
  .home-refined main #mainmate .typingtext-upper .hr-hero-copyline{margin-top:var(--hgs)!important}
}
@media (min-width:992px) and (max-height:860px){
  .home-refined main #mainmate.home-mainmate{--hg:28px;--hgs:12px;padding-top:124px!important;padding-bottom:54px!important}
  .home-refined main #mainmate .hero-chip:not(.is-quantum){min-height:46px;padding-top:8px!important;padding-bottom:8px!important}
  .home-refined main #mainmate .hero-chip.is-quantum{margin-top:calc(var(--hg) - var(--hgs))!important}
  .home-refined main #mainmate .mainmate-softothemecontent .hero-cta-row-2{margin-top:10px!important}
}
@media (min-width:992px) and (max-height:700px){
  .home-refined main #mainmate.home-mainmate{--hg:18px;--hgs:10px;padding-top:100px!important;padding-bottom:54px!important}
  .home-refined main #mainmate .mainmate-softothemecontent .hero-cta-row-2{margin-top:6px!important}
}
@media (min-width:992px) and (min-height:861px){
  .home-refined main #mainmate .mainmate-softothemecontent .hero-cta-row-2{margin-top:14px!important}
}