/* Keep three mobile header controls separate, without changing the wordmark. */
@media(max-width:480px){
  .fabrika-site .f-header{gap:12px;}
  .fabrika-site .f-header .f-brand{flex:0 1 auto;}
  .fabrika-site .f-header > .f-login{flex-shrink:0;}
  .fabrika-site .f-header .f-native-menu{flex-shrink:0;}
}
@media(max-width:380px){
  .fabrika-site .f-header{padding-inline:16px;}
  .fabrika-site .f-header .f-brand > img{width:24px;height:auto;}
  .fabrika-site .f-header .f-brand > span{font-size:13px;}
  .fabrika-site .f-header .f-mobile-trigger{font-size:14px;gap:4px;}
}
@media(max-width:340px){
  .fabrika-site .f-header .f-mobile-trigger{width:44px;padding:8px;}
  .fabrika-site .f-header .f-mobile-trigger > span{display:none;}
}

/* Reserve the fixed contact bar while keeping the main action above it. */
@media(max-width:700px){
  /* The existing hero observer already switches the header after the hero. */
  .v2-home:has(.f-header:not(.v2-solid)) .f-mobile-contact-bar{display:none;}
}
@media(max-width:380px), (max-width:700px) and (max-height:780px){
  .v2-home .f-hero.v2-hero{justify-content:flex-start;padding-bottom:calc(96px + env(safe-area-inset-bottom));}
  .v2-home .v2-hero .f-hero-title{margin-top:20px;gap:16px;}
  .v2-home .v2-hero .f-hero-title h1{font-size:clamp(30px,8.9vw,36px);line-height:1.08;}
  .v2-home .v2-hero .f-hero-slogan{font-size:24px;margin-top:16px;}
  .v2-home .v2-hero .f-hero-actions{gap:8px;}
}