/* =========================================================
   Al Mathaq — shared stylesheet
   Palette pulled from the logo mark:
   orange (wordmark) / red (accent letter + bars) / deep brown (dots)
   ========================================================= */

:root{
  --orange:       #F3811E;
  --orange-deep:  #D9690E;
  --red:          #D5301F;
  --red-deep:     #AD2417;
  --brown:        #3A2416;
  --brown-soft:   #6B4B36;
  --cream:        #FBF6EE;
  --cream-alt:    #F3E7D3;
  --line:         #E8D9BE;
  --white:        #FFFFFF;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;

  --shadow-card: 0 1px 2px rgba(58,36,22,.05), 0 10px 24px -14px rgba(58,36,22,.25);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--brown);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
section{ position:relative; }
.container{
  width:min(1120px, 92%);
  margin-inline:auto;
}

/* language-based type systems ------------------------------------ */
.lang-ar{ font-family:'Tajawal', sans-serif; }
.lang-ar h1, .lang-ar h2, .lang-ar h3, .lang-ar .display{ font-family:'Cairo', sans-serif; }
.lang-en{ font-family:'Inter', sans-serif; }
.lang-en h1, .lang-en h2, .lang-en h3, .lang-en .display{ font-family:'Cairo', sans-serif; }

/* ---------------- top bar ---------------- */
.topbar{
  background:var(--brown);
  color:var(--cream);
  font-size:.82rem;
}
.topbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.5rem 0;
  gap:1rem;
  flex-wrap:wrap;
}
.topbar .phones{ display:flex; gap:1.25rem; flex-wrap:wrap; }
.topbar .phones a{ display:inline-flex; align-items:center; gap:.4rem; opacity:.92; }
.topbar .phones a:hover{ opacity:1; text-decoration:underline; }
.topbar .lang-switch a{
  border:1px solid rgba(251,246,238,.35);
  padding:.25rem .75rem;
  border-radius:999px;
  font-weight:600;
  letter-spacing:.02em;
}
.topbar .lang-switch a:hover{ background:rgba(251,246,238,.12); }

/* ---------------- header / nav ---------------- */
header.site-header{
  background:var(--cream);
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.85rem 0;
  gap:1.5rem;
}
.brand{ display:flex; align-items:center; gap:.65rem; }
.brand img{ height:52px; width:auto; }
.brand .brand-name{ display:flex; flex-direction:column; line-height:1.15; }
.brand .brand-name strong{ font-size:1.05rem; font-weight:800; color:var(--brown); }
.brand .brand-name span{ font-size:.72rem; color:var(--brown-soft); }

nav.main-nav ul{ list-style:none; display:flex; gap:2rem; margin:0; padding:0; }
nav.main-nav a{
  font-weight:600;
  font-size:.95rem;
  color:var(--brown);
  position:relative;
  padding-bottom:4px;
}
nav.main-nav a::after{
  content:"";
  position:absolute; inset-inline-start:0; bottom:0;
  width:0; height:2px; background:var(--orange);
  transition:width .25s var(--ease);
}
nav.main-nav a:hover::after{ width:100%; }

.nav-actions{ display:flex; align-items:center; gap:.9rem; }
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.7rem 1.4rem;
  border-radius:999px;
  font-weight:700;
  font-size:.92rem;
  border:1.5px solid transparent;
  transition:transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.btn-primary{ background:var(--orange); color:var(--white); }
.btn-primary:hover{ background:var(--orange-deep); transform:translateY(-1px); }
.btn-ghost{ border-color:var(--brown); color:var(--brown); }
.btn-ghost:hover{ background:var(--brown); color:var(--cream); }

.menu-toggle{
  display:none;
  background:none; border:none; padding:.4rem;
}
.menu-toggle span{
  display:block; width:24px; height:2px; background:var(--brown); margin:5px 0;
  transition:transform .25s var(--ease), opacity .25s var(--ease);
}

/* ---------------- hero ---------------- */
.hero{ padding:4.5rem 0 3rem; overflow:hidden; }
.hero .container{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:3rem;
  align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.82rem; font-weight:700; letter-spacing:.03em;
  color:var(--red-deep);
  background:rgba(213,48,31,.08);
  padding:.35rem .9rem;
  border-radius:999px;
  margin-bottom:1.1rem;
}
.eyebrow i{ width:6px; height:6px; border-radius:50%; background:var(--red); display:inline-block; }
.hero h1{
  font-size:clamp(2.1rem, 4vw, 3.15rem);
  font-weight:800;
  line-height:1.12;
  margin:0 0 .5rem;
  color:var(--brown);
}
.hero h1 .accent{ color:var(--orange); }
.hero .tagline{
  font-size:1.15rem;
  font-weight:600;
  color:var(--red-deep);
  margin:0 0 1.1rem;
}
.hero p.lede{
  font-size:1.02rem;
  line-height:1.85;
  color:var(--brown-soft);
  max-width:46ch;
  margin:0 0 1.8rem;
}
.hero-ctas{ display:flex; gap:1rem; flex-wrap:wrap; }

/* category badges - what the company imports */
.category-row{
  display:flex; gap:.9rem; margin-top:2.2rem; flex-wrap:wrap;
}
.category-badge{
  display:flex; align-items:center; gap:.55rem;
  background:var(--white);
  border:1px solid var(--line);
  padding:.55rem 1rem;
  border-radius:999px;
  font-size:.85rem;
  font-weight:700;
  color:var(--brown);
  box-shadow:var(--shadow-card);
}
.category-badge .dot{
  width:9px; height:9px; border-radius:50%;
}
.category-badge .dot.c1{ background:var(--orange); }
.category-badge .dot.c2{ background:var(--red); }
.category-badge .dot.c3{ background:var(--brown-soft); }

/* signature: trade-route graphic */
.route-figure{
  position:relative;
}
.route-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:2.4rem 2rem 2.6rem;
  box-shadow:var(--shadow-card);
}
.route-card h3{
  margin:0 0 1.6rem;
  font-size:1rem;
  text-align:center;
  color:var(--brown-soft);
  font-weight:700;
}
.route-track{
  position:relative;
  height:2px;
  background:var(--line);
  margin:2.6rem 26px 1.6rem;
}
.route-track .dash-run{
  position:absolute; inset:0;
  background-image:linear-gradient(90deg, var(--orange) 0 8px, transparent 8px 18px);
  background-size:18px 2px;
  background-repeat:repeat-x;
  animation:dashflow 2.4s linear infinite;
}
@keyframes dashflow{ from{ background-position:0 0; } to{ background-position:-72px 0; } }
.route-stop{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%;
  background:var(--cream-alt);
  border:2px solid var(--white);
  box-shadow:0 4px 10px rgba(58,36,22,.12);
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem;
}
.route-stop.origin{ inset-inline-start:0; background:var(--cream-alt); }
.route-stop.mid{ inset-inline-start:50%; background:var(--white); }
.route-stop.end{ inset-inline-start:100%; inset-inline-end:auto; background:var(--orange); color:var(--white); }
.route-track, .route-stop{ overflow:visible; }
.route-card{ overflow:hidden; }
.route-shipment{
  position:absolute; top:50%; transform:translateY(-50%);
  width:14px; height:14px; border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 4px rgba(213,48,31,.18);
  animation:ship-move 4.5s var(--ease) infinite;
}
@keyframes ship-move{
  0%{ inset-inline-start:0%; opacity:0; }
  8%{ opacity:1; }
  92%{ opacity:1; }
  100%{ inset-inline-start:100%; opacity:0; }
}
.route-labels{
  display:flex; justify-content:space-between;
  font-size:.78rem; font-weight:700; color:var(--brown-soft);
  padding:0 .2rem;
}
.route-labels span:last-child{ color:var(--orange-deep); }

@media (prefers-reduced-motion:reduce){
  .route-track .dash-run, .route-shipment{ animation:none; }
  .route-shipment{ inset-inline-start:50%; opacity:1; }
}

/* ---------------- section chrome ---------------- */
.section{ padding:5rem 0; }
.section.alt{ background:var(--cream-alt); }
.section-head{ max-width:64ch; margin-bottom:2.6rem; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head .eyebrow{ margin-bottom:.9rem; }
.section-head h2{
  font-size:clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight:800;
  margin:0 0 .7rem;
  color:var(--brown);
}
.section-head p{ color:var(--brown-soft); line-height:1.8; margin:0; }

.divider{
  display:flex; align-items:center; gap:.6rem;
  color:var(--orange);
  margin:0 0 1.2rem;
}
.divider .bar{ width:26px; height:3px; background:var(--red); border-radius:2px; }
.divider .bar.short{ width:12px; background:var(--orange); }

/* ---------------- about ---------------- */
.about-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:3.5rem;
  align-items:start;
}
.about-copy p{
  line-height:1.95;
  color:var(--brown-soft);
  margin:0 0 1.2rem;
  font-size:1rem;
}
.about-copy p:last-child{ margin-bottom:0; }

.pillars{ display:flex; flex-direction:column; gap:1rem; }
.pillar-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:1.3rem 1.4rem;
  display:flex; gap:1rem; align-items:flex-start;
  box-shadow:var(--shadow-card);
}
.pillar-icon{
  flex:none;
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
  background:var(--cream-alt);
  color:var(--orange-deep);
}
.pillar-card h4{ margin:0 0 .3rem; font-size:1rem; font-weight:800; color:var(--brown); }
.pillar-card p{ margin:0; font-size:.9rem; line-height:1.7; color:var(--brown-soft); }

/* ---------------- vision / mission ---------------- */
.vm-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.8rem;
}
.vm-card{
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:2.4rem 2.2rem;
  box-shadow:var(--shadow-card);
  border-top:4px solid var(--orange);
}
.vm-card.mission{ border-top-color:var(--red); }
.vm-card .vm-icon{
  width:52px; height:52px; border-radius:14px;
  background:var(--cream-alt);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; margin-bottom:1.2rem;
  color:var(--orange-deep);
}
.vm-card.mission .vm-icon{ color:var(--red-deep); }
.vm-card h3{ margin:0 0 .8rem; font-size:1.3rem; font-weight:800; color:var(--brown); }
.vm-card p{ margin:0; line-height:1.9; color:var(--brown-soft); }

/* ---------------- contact ---------------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.5rem;
  align-items:center;
}
.contact-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1rem; }
.contact-list li{
  display:flex; align-items:center; gap:1rem;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:1.1rem 1.3rem;
  box-shadow:var(--shadow-card);
}
.contact-list .c-icon{
  flex:none;
  width:42px; height:42px; border-radius:50%;
  background:var(--cream-alt);
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; color:var(--orange-deep);
}
.contact-list .c-label{ font-size:.78rem; color:var(--brown-soft); display:block; }
.contact-list .c-value{ font-weight:700; font-size:1rem; color:var(--brown); direction:ltr; unicode-bidi:isolate; }
.contact-note{ font-size:.85rem; color:var(--brown-soft); margin-top:.4rem; }

.contact-panel{
  background:var(--brown);
  color:var(--cream);
  border-radius:var(--radius-lg);
  padding:2.6rem 2.4rem;
}
.contact-panel h3{ margin:0 0 .8rem; font-size:1.4rem; font-weight:800; }
.contact-panel p{ margin:0 0 1.6rem; color:rgba(251,246,238,.78); line-height:1.85; }
.contact-panel .btn-primary{ width:fit-content; }

/* ---------------- footer ---------------- */
footer{
  background:var(--brown);
  color:rgba(251,246,238,.7);
  padding:2.4rem 0;
  border-top:1px solid rgba(251,246,238,.12);
}
.footer-row{
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; flex-wrap:wrap;
  font-size:.85rem;
}
.footer-brand{ display:flex; align-items:center; gap:.6rem; color:var(--cream); font-weight:700; }
.footer-brand img{ height:30px; }

/* ---------------- responsive ---------------- */
@media (max-width: 900px){
  .hero .container{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr; }
  .vm-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  nav.main-nav{ display:none; }
  .menu-toggle{ display:block; }
}
@media (max-width: 900px){
  .nav-row.open + .mobile-nav,
  header.site-header .mobile-nav.open{ display:flex; }
}
.mobile-nav{
  display:none;
  flex-direction:column;
  gap:0;
  border-top:1px solid var(--line);
  padding:.5rem 0 1rem;
}
.mobile-nav a{
  padding:.75rem 0;
  font-weight:700;
  border-bottom:1px solid var(--line);
}
.mobile-nav.open{ display:flex; }

@media (max-width:560px){
  .topbar .phones{ gap:.75rem; }
  .route-card{ padding:1.8rem 1.2rem 2rem; }
}