/* Tiba Freight – base: tokens, header, footer with road marking */
:root {
  --cobalt: #1B3FAE;
  --cobalt-dark: #132E80;
  --red: #E0312B;
  --asphalt: #2D2F33;
  --mist: #F4F6FB;
  --line: #D8DDEA;
  --ink: #15192A;
  --muted: #5A6075;
  --font: "Almarai", "Segoe UI", Tahoma, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.8; color: var(--ink); background: #fff; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.3; font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: var(--cobalt); }
.wrap { width: min(100% - 2.5rem, 1200px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; top: -50px; right: 1rem; background: var(--cobalt); color: #fff; padding: .5rem 1rem; z-index: 99; }
.skip:focus { top: .5rem; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* header */
.nav { background: #fff; border-bottom: 4px solid var(--cobalt); position: sticky; top: 0; z-index: 40; }
.nav__row { display: flex; align-items: center; gap: 2rem; min-height: 70px; }
.nav__logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--cobalt); }
.nav__logo svg { width: 52px; height: 30px; }
.nav__logo span { font-size: 1.6rem; font-weight: 800; line-height: 1; display: flex; flex-direction: column; }
.nav__logo small { font-size: .72rem; font-weight: 400; color: var(--muted); margin-top: .25rem; }
.nav__links { display: flex; gap: 1.5rem; }
.nav__links a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: .95rem; }
.nav__links a:hover { color: var(--cobalt); }
.nav__phone { margin-inline-start: auto; font-weight: 800; color: #fff; background: var(--red); text-decoration: none; padding: .45rem 1rem; }
.nav__btn { display: none; font: inherit; font-weight: 700; background: var(--mist); border: 1px solid var(--line); padding: 0 .9rem; min-height: 44px; cursor: pointer; }

/* footer */
.foot { background: var(--asphalt); color: #C3C7D2; padding-bottom: 1.5rem; }
.road { height: 14px; background: repeating-linear-gradient(90deg, #fff 0 60px, transparent 60px 100px) center / 100% 4px no-repeat, var(--asphalt); }
.foot__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding: 2.5rem 0 1rem; }
.foot b { display: block; color: #fff; font-size: 1.3rem; }
.foot a { color: #fff; }
.foot__legal { font-size: .8rem; border-top: 1px solid #45484F; padding-top: 1rem; margin-bottom: 0; }

@media (max-width: 960px) {
  .nav__row { gap: 1rem; }
  .nav__btn { display: block; }
  .nav__links { display: none; position: absolute; top: 100%; inset-inline: 0; background: #fff; flex-direction: column; gap: 0; padding: .5rem 1.25rem 1rem; border-bottom: 4px solid var(--cobalt); }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .foot__grid { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 480px) {
  .nav__phone { font-size: .8rem; padding: .4rem .6rem; }
  .nav__logo small { display: none; }
  .nav__logo svg { width: 40px; }
}