/* v2.9.27 - contact details appear beside the FUTURE brand; desktop navigation stays fixed */
.nav-scroll-contact{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
  flex:0 0 0;
  width:0;
  min-width:0;
  opacity:0;
  visibility:hidden;
  overflow:hidden;
  pointer-events:none;
  transform:translateY(-2px);
  transition:width .22s ease,opacity .16s ease,transform .18s ease,margin .22s ease;
}
.header.scrolled .nav-scroll-contact{
  width:176px;
  flex-basis:176px;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
  margin-left:0;
}
.nav-scroll-contact a{
  display:flex;
  align-items:center;
  gap:7px;
  max-width:100%;
  color:#45484a;
  font-size:10.5px;
  font-weight:750;
  line-height:1.25;
  white-space:nowrap;
  transition:color .16s ease,background .16s ease,border-color .16s ease;
}
.nav-scroll-contact a:hover{color:#111}
.nav-scroll-contact svg{
  width:14px;
  height:14px;
  flex:0 0 14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* On narrower desktop/tablet widths the same quick contacts become compact icons. */
@media (max-width:1480px) and (min-width:821px){
  .header.scrolled .nav-scroll-contact{
    width:82px;
    flex-basis:82px;
    flex-direction:row;
    align-items:center;
    gap:6px;
    margin-left:0;
  }
  .nav-scroll-contact .nav-contact-label{display:none}
  .nav-scroll-contact a{
    width:36px;
    height:36px;
    flex:0 0 36px;
    justify-content:center;
    border:1px solid var(--line);
    border-radius:11px;
    background:rgba(255,255,255,.72);
  }
  .nav-scroll-contact svg{width:16px;height:16px;flex-basis:16px}
}

/* The topbar is hidden on mobile, so phone and mail stay available as icons at all times. */
@media (max-width:820px){
  .nav-scroll-contact,
  .header.scrolled .nav-scroll-contact{
    width:auto!important;
    flex-basis:auto!important;
    min-width:auto!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:5px!important;
    margin:0!important;
    opacity:1!important;
    visibility:visible!important;
    overflow:visible!important;
    pointer-events:auto!important;
    transform:none!important;
  }
  .nav-scroll-contact .nav-contact-label{display:none!important}
  .nav-scroll-contact a{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(255,255,255,.78);
    color:var(--ink);
  }
  .nav-scroll-contact svg{width:17px;height:17px;flex-basis:17px}
}
@media (max-width:480px){
  .nav-scroll-contact{gap:4px!important}
  .nav-scroll-contact a{width:36px;height:36px;flex-basis:36px;border-radius:11px}
  .nav-scroll-contact svg{width:16px;height:16px;flex-basis:16px}
}

@media (prefers-color-scheme:dark){
  .nav-scroll-contact a{color:#d6d8d9}
  .nav-scroll-contact a:hover{color:#fff}
  @media (max-width:1480px){
    .nav-scroll-contact a{background:rgba(37,40,43,.86);border-color:#464a4d;color:#eef0f0}
  }
}


/* v2.9.27: brand keeps the flexible spacer; contacts expand before navlinks, so navlinks do not move. */
@media (min-width:821px){
  .header .brand{order:1;margin-right:auto}
  .header .nav-scroll-contact{order:2}
  .header .navlinks{order:3}
  .header .nav>.btn{order:4}
  .header .menu-toggle{order:5}
}
@media (max-width:820px){
  .header .brand{order:1;margin-right:auto}
  .header .nav-scroll-contact{order:2}
  .header .menu-toggle{order:3}
}

/* v2.9.27 final: contacts sit directly beside the FUTURE brand.
   The whole brand/contact group owns the flexible spacer, so the navigation
   remains anchored and does not shift when the contacts fade in. */
.brand-contact-group{
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0;
  margin-right:auto;
}
.brand-contact-group .brand{margin-right:0}
@media (min-width:821px){
  .header .brand-contact-group{order:1}
  .header .navlinks{order:2}
  .header .nav>.btn{order:3}
  .header .menu-toggle{order:4}
}
@media (max-width:820px){
  .brand-contact-group{gap:9px;margin-right:auto}
  .header .brand-contact-group{order:1}
  .header .menu-toggle{order:2}
}
@media (max-width:480px){
  .brand-contact-group{gap:6px}
}