/* MF Group brand system */
:root {
  --mf-navy: #071B46;
  --mf-dark-blue: #082E68;
  --mf-royal-blue: #0876CB;
  --mf-sky-blue: #20A9F4;
  --mf-pale-blue: #D2EDFF;
  --mf-ice-blue: #E1F2FF;
  --mf-white: #FFFFFF;
  --mf-red: #C72036;
  --mf-gold: #D47D16;
}
html { scroll-behavior: smooth; }
body { color: var(--mf-navy); }
::selection { color: var(--mf-white); background: var(--mf-royal-blue); }
a { text-underline-offset: 3px; }
input, select, textarea { transition: border-color .18s ease, box-shadow .18s ease; }
input:focus, select:focus, textarea:focus { border-color: var(--mf-sky-blue) !important; box-shadow: 0 0 0 3px rgba(32,169,244,.16); }
button, a, [role="button"] { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.bg-brand-athens { background-color: var(--mf-ice-blue) !important; }
.text-brand-shark { color: var(--mf-navy) !important; }
.text-brand-science { color: var(--mf-royal-blue) !important; }
.bg-brand-science { background-color: var(--mf-royal-blue) !important; }
.border-brand-border { border-color: var(--mf-pale-blue) !important; }
.text-red-600, .hover\:text-red-600:hover { color: var(--mf-red) !important; }
.bg-amber-500 { background-color: var(--mf-gold) !important; }
.hover\:bg-amber-600:hover { background-color: #B96910 !important; }
.apple-shadow { box-shadow: 0 16px 44px rgba(7,27,70,.08); }
header.sticky { background-color: rgba(255,255,255,.94); }

.bg-brand-red { background-color: var(--mf-red) !important; }
.text-brand-red { color: var(--mf-red) !important; }
.bg-blue-600, .bg-blue-700 { background-color: var(--mf-royal-blue) !important; }
.bg-blue-800, .hover\:bg-blue-800:hover { background-color: var(--mf-dark-blue) !important; }
.text-blue-600, .text-blue-700, .text-blue-800 { color: var(--mf-royal-blue) !important; }
.border-blue-200, .border-blue-300 { border-color: var(--mf-pale-blue) !important; }
.bg-blue-50, .bg-blue-100 { background-color: var(--mf-ice-blue) !important; }
.text-emerald-600, .text-emerald-700 { color: var(--mf-royal-blue) !important; }
.bg-emerald-600 { background-color: var(--mf-royal-blue) !important; }
.hover\:bg-emerald-700:hover { background-color: var(--mf-dark-blue) !important; }
.bg-emerald-100 { background-color: var(--mf-ice-blue) !important; }
.text-emerald-800 { color: var(--mf-navy) !important; }
.bg-amber-50 { background-color: #FFF8EB !important; }
.text-amber-900 { color: #6B3C08 !important; }
.border-amber-300 { border-color: #F1D3A6 !important; }

/* Compact, orderly mobile utility header. Desktop keeps the existing two-group layout. */
.mf-topbar { padding: 8px 0; font-size: 11px; line-height: 1.45; }
.mf-topbar-inner { width: 100%; }
.mf-header-contacts, .mf-header-meta { display: flex; align-items: center; gap: 18px; }
.mf-mobile-hotline, .mf-email { display: inline-flex; align-items: center; gap: 5px; }
.mf-phone-links { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.mf-phone-links a, .mf-email bdi { color: var(--mf-navy); text-decoration: none; white-space: nowrap; }
.mf-email { direction: ltr; unicode-bidi: isolate; }
.mf-distributor { text-align: center; }
.mf-language { white-space: nowrap; }
@media (max-width: 639px) {
  .mf-topbar { padding: 10px 0; }
  .mf-topbar-inner { align-items: stretch; gap: 9px; }
  .mf-header-contacts { width: 100%; display: grid; gap: 7px; justify-items: center; }
  .mf-mobile-hotline { width: 100%; display: grid; justify-items: center; gap: 4px; }
  .mf-contact-label { font-weight: 700; color: var(--mf-dark-blue); }
  .mf-phone-links { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .mf-phone-links a { display: block; border: 1px solid var(--mf-pale-blue); border-radius: 999px; background: rgba(255,255,255,.82); padding: 5px 2px; text-align: center; font-size: 10px; }
  .mf-email { display: flex; justify-content: center; gap: 6px; font-size: 10px; }
  .mf-header-meta { width: 100%; display: flex; flex-direction: column; justify-content: center; gap: 5px; text-align: center; }
  .mf-distributor { max-width: 36rem; margin-inline: auto; }
  .mf-language { align-self: center; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.65); }
}
@media (max-width: 360px) {
  .mf-phone-links { gap: 3px; }
  .mf-phone-links a { font-size: 9px; }
  .mf-email { font-size: 9px; }
}