/* AlAhliah Transportation Company (ATC) — design system */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --navy: #1B2340;
  --navy-2: #242D52;
  --steel: #8A8F98;
  --steel-light: #E4E5E8;
  --amber: #E8A93B;
  --amber-dark: #C68A1F;
  --paper: #F5F5F2;
  --paper-2: #ECECE7;
  --ink: #1A1A1A;
  --ink-soft: #565A62;
  --ink-faint: #8A8E96;
  --line: #D8D9D4;
  --white: #FFFFFF;
  --max: 1140px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'IBM Plex Sans', sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.02em;
  margin:0 0 .4em 0;
  line-height:1.05;
  color:var(--navy);
}
p{margin:0 0 1em 0; color:var(--ink-soft);}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* ---------- NAV ---------- */
.site-nav{
  background:var(--white);
  position:sticky; top:0; z-index:50;
  border-bottom:3px solid var(--amber);
  box-shadow:0 1px 0 rgba(27,35,64,0.06);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:80px;
}
.brand{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none;
}
.brand img{ height:52px; width:auto; }
.nav-links{
  display:flex; align-items:center; gap:2.2rem;
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  color:var(--ink-soft);
  text-decoration:none;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:600;
  font-size:1.05rem;
  text-transform:uppercase;
  letter-spacing:0.03em;
  padding:.3rem 0;
  border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
.nav-links a:hover, .nav-links a.active{
  color:var(--navy);
  border-bottom-color:var(--amber);
}
.nav-cta{
  background:var(--navy);
  color:#fff !important;
  padding:.6rem 1.3rem;
  font-weight:700 !important;
  text-decoration:none;
  border-bottom:none !important;
  transition:background .2s;
}
.nav-cta:hover{ background:var(--navy-2); }
.nav-toggle{display:none;}
.nav-toggle-label{display:none;}

@media (max-width: 860px){
  .nav-links{
    position:absolute; top:80px; left:0; right:0;
    background:var(--white);
    flex-direction:column; align-items:flex-start;
    padding:1rem 28px 1.6rem;
    gap:1rem;
    display:none;
    border-bottom:3px solid var(--amber);
  }
  .nav-toggle:checked ~ .nav-links{display:flex;}
  .nav-toggle-label{
    display:block;
    color:var(--navy);
    font-size:1.8rem;
    line-height:1;
    cursor:pointer;
    background:none; border:none;
  }
}

/* ---------- HERO ---------- */
.hero{
  background:var(--navy);
  color:#fff;
  padding:0;
  position:relative;
  overflow:hidden;
}
.hero .wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:2rem;
  padding-top:4.5rem;
  padding-bottom:3.5rem;
  position:relative;
  z-index:2;
}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;}
}
.hero-tag{
  display:inline-block;
  color:var(--amber);
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:0.04em;
  margin-bottom:1rem;
}
.hero h1{
  color:#fff;
  font-size:clamp(2.6rem, 5vw, 4rem);
  max-width:13ch;
}
.hero p.lead{
  color:#C7CBDA;
  font-size:1.1rem;
  max-width:44ch;
  margin-top:1.2rem;
}
.hero-ctas{display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap;}

.btn{
  display:inline-block;
  padding:.85rem 1.6rem;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  font-size:1.05rem;
  text-transform:uppercase;
  letter-spacing:0.03em;
  text-decoration:none;
  border:2px solid transparent;
  transition:background .2s, border-color .2s, color .2s;
}
.btn-primary{ background:var(--amber); color:var(--navy); }
.btn-primary:hover{ background:#F2BE5E; }
.btn-ghost{ border-color:#C7CBDA; color:#fff; }
.btn-ghost:hover{ border-color:var(--amber); color:var(--amber); }
.btn-dark{ background:var(--navy); color:#fff; }
.btn-dark:hover{ background:var(--navy-2); }

/* Hero load diagram */
.load-diagram svg{ width:100%; height:auto; }

/* ---------- SECTIONS ---------- */
section{padding:4.5rem 0;}
section.section-alt{ background:var(--paper-2); }
section.section-navy{ background:var(--navy); color:#fff; }
.section-head{
  max-width:60ch;
  margin-bottom:2.6rem;
  padding-bottom:1.4rem;
  border-bottom:3px solid var(--navy);
}
.section-navy .section-head{ border-bottom-color:var(--amber); }
.section-head h2{font-size:clamp(1.8rem, 3vw, 2.4rem);}
.section-head p{color:var(--ink-soft); font-size:1.05rem; margin:0;}
.section-navy .section-head p{ color:#C7CBDA; }

/* Fleet spec rows — manifest style, not cards */
.fleet-rows{ border-top:1px solid var(--line); }
.fleet-row{
  display:grid;
  grid-template-columns:200px 1fr 180px;
  gap:2rem;
  padding:1.8rem 0;
  border-bottom:1px solid var(--line);
  align-items:start;
}
@media (max-width:760px){
  .fleet-row{grid-template-columns:1fr; gap:.6rem;}
}
.fleet-row .type{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  font-size:1.3rem;
  color:var(--navy);
  text-transform:uppercase;
}
.fleet-row .desc p{ margin:0; color:var(--ink-soft); }
.fleet-row .capacity{
  font-family:'Barlow Condensed', sans-serif;
  color:var(--ink-faint);
  font-size:.95rem;
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.fleet-row .capacity strong{
  display:block;
  color:var(--amber-dark);
  font-size:1.6rem;
  font-weight:700;
}

/* Process steps — legit sequence (pickup -> transport -> delivery) */
.process{
  counter-reset:step;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
@media (max-width:820px){ .process{grid-template-columns:1fr;} }
.process .step{
  background:var(--paper);
  padding:2rem 1.6rem;
}
.process .step .num{
  font-family:'Barlow Condensed', sans-serif;
  color:var(--amber-dark);
  font-size:2rem;
  font-weight:800;
  margin-bottom:.6rem;
  display:block;
}
.process .step h4{font-size:1.2rem; margin-bottom:.4rem;}
.process .step p{color:var(--ink-soft); font-size:.94rem; margin:0;}

/* Stats strip */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,0.15);
  border-bottom:1px solid rgba(255,255,255,0.15);
}
@media (max-width:700px){ .stats{grid-template-columns:1fr 1fr;} }
.stat{
  padding:2rem 1.5rem;
  border-right:1px solid rgba(255,255,255,0.15);
}
.stat:last-child{border-right:none;}
.stat .num{
  font-family:'Barlow Condensed', sans-serif;
  font-size:2.4rem; font-weight:800;
  color:var(--amber);
  display:block;
}
.stat .label{color:#C7CBDA; font-size:.9rem; margin-top:.2rem; font-family:'IBM Plex Sans', sans-serif;}

/* Coverage / routes list */
.route-list{
  display:flex; flex-wrap:wrap; gap:.6rem 1rem;
  padding:0; margin:0; list-style:none;
}
.route-list li{
  border:1px solid var(--line);
  padding:.5rem 1rem;
  font-size:.92rem;
  color:var(--navy);
  background:var(--white);
  font-weight:500;
}

/* Two column panel */
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start;
}
@media (max-width:820px){ .split{grid-template-columns:1fr;} }

.plain-list{list-style:none; margin:0; padding:0;}
.plain-list li{
  padding:1.1rem 0;
  border-bottom:1px solid var(--line);
}
.plain-list li h4{font-size:1.15rem; margin-bottom:.3rem;}
.plain-list li p{color:var(--ink-soft); margin:0; font-size:.95rem;}

/* Contact */
.contact-grid{
  display:grid; grid-template-columns:1fr 1.1fr; gap:3.5rem;
}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr;} }
.contact-detail{display:flex; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--line);}
.contact-detail .k{color:var(--ink-faint); min-width:120px; font-size:.9rem; font-family:'Barlow Condensed', sans-serif; text-transform:uppercase; letter-spacing:0.03em;}
.contact-detail .v a{color:var(--navy); text-decoration:none; font-weight:600;}
.contact-detail .v a:hover{color:var(--amber-dark);}

form.enquiry{display:flex; flex-direction:column; gap:1.1rem;}
.field{display:flex; flex-direction:column; gap:.4rem;}
.field label{font-size:.88rem; color:var(--ink-soft); font-family:'Barlow Condensed', sans-serif; text-transform:uppercase; letter-spacing:0.03em;}
.field input, .field select, .field textarea{
  font-family:'IBM Plex Sans', sans-serif; font-size:.98rem;
  padding:.75rem .9rem;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
}
.field textarea{resize:vertical; min-height:110px;}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--amber-dark);}
form.enquiry .btn{align-self:flex-start; border:none; cursor:pointer;}
.form-note{font-size:.85rem; color:var(--ink-faint); margin-top:-.3rem;}

/* CTA band */
.cta-band{
  background:var(--amber);
  padding:3.2rem 0;
}
.cta-band .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.cta-band h3{color:var(--navy); margin-bottom:.3rem; font-size:1.6rem;}
.cta-band p{color:#5A4A22; margin:0; font-family:'IBM Plex Sans', sans-serif; text-transform:none; letter-spacing:normal;}

/* Footer */
footer{
  background:var(--navy); color:#C7CBDA;
  padding:3rem 0 2rem;
  border-top:3px solid var(--amber);
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr;
  gap:2rem;
  padding-bottom:2rem;
  border-bottom:1px solid rgba(255,255,255,0.15);
}
@media (max-width:700px){ .footer-grid{grid-template-columns:1fr;} }
.footer-grid h5{
  color:#fff; font-size:.9rem;
  margin:0 0 1rem 0; font-weight:700;
  font-family:'Barlow Condensed', sans-serif;
  text-transform:uppercase; letter-spacing:0.04em;
}
.footer-grid ul{list-style:none; margin:0; padding:0;}
.footer-grid li{margin-bottom:.55rem; font-size:.92rem;}
.footer-grid a{text-decoration:none; color:#C7CBDA;}
.footer-grid a:hover{color:var(--amber);}
.footer-bottom{
  padding-top:1.4rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  font-size:.85rem; color:#8890A8;
}

/* Page header (non-home pages) */
.page-header{
  background:var(--navy); color:#fff;
  padding:3.6rem 0 3.2rem;
  border-bottom:3px solid var(--amber);
}
.page-header h1{color:#fff; font-size:clamp(2.2rem,3.6vw,3rem); max-width:24ch;}
.page-header p{color:#C7CBDA; max-width:56ch; margin-top:.8rem;}

.mt-0{margin-top:0;}
.text-soft{color:var(--ink-soft);}