/* ============================================================
   UPS TAXI SERVICE — design tokens
   Palette:  --navy (deep highway-night)  --amber (lane marking)
             --teal (route signage)       --sand (paper/road-dust bg)
             --ink (text)                 --white
   Type:     Display = 'Bebas Neue' (signage), Body = 'Work Sans',
             Data/Utility = 'JetBrains Mono' (distances, numbers)
   Signature: dashed amber "lane line" dividers + dotted route path
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Work+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  --navy:#0E222B;
  --navy-2:#153543;
  --amber:#F2A93A;
  --amber-2:#FFC367;
  --teal:#2E6B6E;
  --sand:#F7F1E4;
  --white:#FFFFFF;
  --ink:#171A1A;
  --ink-soft:#4A5457;
  --line: rgba(14,34,43,0.12);
  --radius: 4px;
  --shadow: 0 12px 30px rgba(14,34,43,0.10);
  --max: 1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Work Sans', sans-serif;
  color:var(--ink);
  background:var(--sand);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}

h1,h2,h3,.display{
  font-family:'Bebas Neue', sans-serif;
  letter-spacing:0.02em;
  line-height:1.05;
  color:var(--navy);
  font-weight:400;
}
h1{font-size:clamp(2.6rem, 6vw, 4.6rem);}
h2{font-size:clamp(2rem, 4vw, 2.9rem);}
h3{font-size:1.5rem;}
.mono{font-family:'JetBrains Mono', monospace;}
.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--teal);
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--amber);display:inline-block;}

/* --- signature: dashed lane-line divider --- */
.lane{
  height:0;
  border-top:3px dashed var(--amber);
  width:100%;
  opacity:0.9;
}
.lane.short{width:64px; border-top-width:4px; margin:14px 0 24px;}

/* --- top bar --- */
.topbar{background:var(--navy); color:var(--sand); font-size:0.82rem;}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; padding:8px 24px; flex-wrap:wrap; gap:6px;}
.topbar a{color:var(--sand); opacity:0.9;}
.topbar a:hover{color:var(--amber-2);}
.topbar .contact-strip{display:flex; gap:22px; flex-wrap:wrap;}
.topbar .contact-strip span{display:inline-flex; align-items:center; gap:6px;}

/* --- header / nav --- */
header.site{background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;}
.nav-row{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:18px;}
.logo{display:flex; align-items:center; gap:10px;}
.logo .mark{
  width:42px;height:42px;border-radius:50%;
  background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  color:var(--amber); font-family:'Bebas Neue',sans-serif; font-size:1.4rem;
  flex-shrink:0;
}
.logo .name{font-family:'Bebas Neue',sans-serif; font-size:1.5rem; color:var(--navy); line-height:1;}
.logo .tag{font-family:'JetBrains Mono',monospace; font-size:0.6rem; letter-spacing:0.18em; color:var(--teal); text-transform:uppercase;}

nav.main{display:flex; align-items:center; gap:28px;}
nav.main ul{display:flex; gap:26px; align-items:center;}
nav.main a{font-weight:600; font-size:0.92rem; color:var(--navy); position:relative; padding:6px 0;}
nav.main a.active, nav.main a:hover{color:var(--teal);}
nav.main a.active::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--amber);}
.dropdown{position:relative;}
.dropdown .menu{
  position:absolute; top:120%; left:0; background:var(--white);
  box-shadow:var(--shadow); min-width:220px; border-radius:var(--radius);
  border:1px solid var(--line);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:all .18s ease; padding:8px 0;
}
.dropdown:hover .menu{opacity:1; visibility:visible; transform:translateY(0);}
.dropdown .menu a{display:block; padding:10px 18px; font-weight:500; font-size:0.88rem;}
.dropdown .menu a:hover{background:var(--sand); color:var(--teal);}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--amber); color:var(--navy); font-weight:700;
  padding:12px 24px; border-radius:2px; border:none;
  font-size:0.9rem; letter-spacing:0.02em;
  transition:transform .15s ease, background .15s ease;
}
.btn:hover{background:var(--amber-2); transform:translateY(-2px);}
.btn.ghost{background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,0.5);}
.btn.ghost:hover{background:rgba(255,255,255,0.12); border-color:var(--white);}
.btn.dark{background:var(--navy); color:var(--sand);}
.btn.dark:hover{background:var(--navy-2);}
.btn.small{padding:9px 18px; font-size:0.82rem;}

.nav-cta{display:flex; align-items:center; gap:14px;}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:none;}
.burger span{width:26px; height:2px; background:var(--navy);}

/* --- hero --- */
.hero{
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  color:var(--sand); position:relative; overflow:hidden;
  padding:70px 0 110px;
}
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:64px;
  background-image:repeating-linear-gradient(90deg, var(--amber) 0 44px, transparent 44px 88px);
  opacity:0.5;
}
.hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:center;}
.hero-copy .eyebrow{color:var(--amber-2);}
.hero-copy .eyebrow::before{background:var(--amber-2);}
.hero-copy h1{color:var(--white); margin:16px 0 18px;}
.hero-copy p{max-width:46ch; color:rgba(247,241,228,0.85); margin-bottom:28px; font-size:1.05rem;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.hero-stats{display:flex; gap:34px; margin-top:40px; flex-wrap:wrap;}
.hero-stats div b{display:block; font-family:'Bebas Neue',sans-serif; font-size:2.1rem; color:var(--amber-2);}
.hero-stats div span{font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:rgba(247,241,228,0.7);}

.route-art{position:relative;}
.route-svg{width:100%; height:auto;}

/* --- booking bar --- */
.booking{
  background:var(--white); border-radius:6px; box-shadow:var(--shadow);
  padding:26px; margin-top:-64px; position:relative; z-index:10;
  display:grid; grid-template-columns:repeat(4,1fr) auto; gap:16px; align-items:end;
}
.booking .field label{display:block; font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--teal); margin-bottom:8px;}
.booking .field input{
  width:100%; border:1px solid var(--line); border-radius:2px; padding:12px 12px;
  font-family:inherit; font-size:0.92rem; background:var(--sand);
}
.booking .field input:focus{outline:2px solid var(--amber); background:var(--white);}
.booking .btn{height:46px; white-space:nowrap;}

/* --- sections --- */
section{padding:88px 0;}
section.tight{padding:60px 0;}
.section-head{max-width:640px; margin-bottom:46px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head p{color:var(--ink-soft); margin-top:14px; font-size:1.02rem;}
.bg-navy{background:var(--navy); color:var(--sand);}
.bg-navy h2, .bg-navy h3{color:var(--white);}
.bg-navy p{color:rgba(247,241,228,0.82);}
.bg-white{background:var(--white);}
.bg-sand{background:var(--sand);}

/* --- cards / grids --- */
.grid{display:grid; gap:26px;}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}

.card{
  background:var(--white); border:1px solid var(--line); border-radius:6px;
  padding:30px 26px; transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow);}
.card .icon{
  width:54px; height:54px; border-radius:50%; background:var(--sand);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  color:var(--teal);
}
.card h3{font-size:1.25rem; margin-bottom:8px;}
.card p{color:var(--ink-soft); font-size:0.94rem; margin-bottom:16px;}
.card .num{
  font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--amber);
  letter-spacing:0.1em; display:block; margin-bottom:10px;
}

.service-card{position:relative; overflow:hidden;}
.service-card .lane.short{margin-bottom:14px;}

/* --- vehicle card --- */
.vehicle-card{background:var(--white); border:1px solid var(--line); border-radius:6px; overflow:hidden;}
.vehicle-card .thumb{
  height:180px; background:var(--sand); display:flex; align-items:center; justify-content:center;
  border-bottom:1px dashed var(--line);
}
.vehicle-card .thumb svg{width:78%; height:auto;}
.vehicle-card .body{padding:22px;}
.vehicle-card .body .price{font-family:'JetBrains Mono',monospace; color:var(--teal); font-weight:600; font-size:0.9rem; margin-bottom:12px; display:block;}

/* --- route path (signature list decoration) --- */
.route-list{position:relative; padding-left:34px;}
.route-list::before{
  content:""; position:absolute; left:8px; top:6px; bottom:6px; width:0;
  border-left:2px dashed var(--amber);
}
.route-list li{position:relative; margin-bottom:22px;}
.route-list li::before{
  content:""; position:absolute; left:-30px; top:4px; width:14px; height:14px;
  border-radius:50%; background:var(--white); border:3px solid var(--teal);
}
.route-list li b{display:block; font-family:'Bebas Neue',sans-serif; font-size:1.15rem; color:var(--navy); letter-spacing:0.02em;}
.route-list li span{color:var(--ink-soft); font-size:0.92rem;}

/* --- testimonials --- */
.quote-card{background:var(--white); border:1px solid var(--line); border-radius:6px; padding:30px; position:relative;}
.quote-card .stars{color:var(--amber); letter-spacing:2px; margin-bottom:10px;}
.quote-card p{font-size:1rem; color:var(--ink-soft); margin-bottom:16px;}
.quote-card .who{display:flex; align-items:center; gap:12px;}
.quote-card .who .av{width:42px;height:42px;border-radius:50%; background:var(--navy); color:var(--amber); display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif;}
.quote-card .who b{font-size:0.92rem; color:var(--navy);}
.quote-card .who span{font-size:0.78rem; color:var(--ink-soft);}

/* --- blog --- */
.blog-card{background:var(--white); border:1px solid var(--line); border-radius:6px; overflow:hidden;}
.blog-card .thumb{height:170px; background:linear-gradient(135deg, var(--navy), var(--teal)); position:relative;}
.blog-card .thumb .tag{position:absolute; bottom:10px; left:14px; font-family:'JetBrains Mono',monospace; font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--amber-2); background:rgba(14,34,43,0.55); padding:4px 9px; border-radius:2px;}
.blog-card .body{padding:22px;}
.blog-card .meta{font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--teal); margin-bottom:8px; letter-spacing:0.04em;}
.blog-card h3{font-size:1.15rem; margin-bottom:10px;}
.blog-card p{color:var(--ink-soft); font-size:0.92rem; margin-bottom:14px;}
.read-more{font-weight:700; font-size:0.85rem; color:var(--navy); display:inline-flex; align-items:center; gap:6px;}
.read-more::after{content:"→"; transition:transform .15s ease;}
.read-more:hover::after{transform:translateX(4px);}

/* --- FAQ accordion --- */
.faq-item{border-bottom:1px solid var(--line); padding:20px 0;}
.faq-q{display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:700; color:var(--navy); font-size:1.02rem;}
.faq-q .plus{font-family:'JetBrains Mono',monospace; color:var(--amber); font-size:1.2rem; transition:transform .2s ease;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-item.open .faq-a{max-height:240px; margin-top:12px;}
.faq-a p{color:var(--ink-soft); font-size:0.94rem;}

/* --- CTA strip --- */
.cta-strip{background:var(--teal); color:var(--white); padding:50px 0;}
.cta-strip .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
.cta-strip h3{color:var(--white); font-size:1.9rem;}
.cta-strip p{color:rgba(255,255,255,0.85);}

/* --- contact --- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px;}
.contact-info li{display:flex; gap:14px; margin-bottom:24px;}
.contact-info .ic{width:40px;height:40px;border-radius:50%; background:var(--navy); color:var(--amber); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.contact-info b{display:block; color:var(--navy); margin-bottom:3px;}
.contact-info span{color:var(--ink-soft); font-size:0.92rem;}
form.form input, form.form textarea{
  width:100%; border:1px solid var(--line); background:var(--white); border-radius:2px;
  padding:13px 14px; font-family:inherit; margin-bottom:14px; font-size:0.94rem;
}
form.form input:focus, form.form textarea:focus{outline:2px solid var(--amber);}
.map-frame{border:1px solid var(--line); border-radius:6px; overflow:hidden; height:340px; margin-top:20px;}
.map-frame iframe{width:100%; height:100%; border:0;}

/* --- floating contact buttons --- */
.floaters{position:fixed; right:22px; bottom:22px; display:flex; flex-direction:column; gap:12px; z-index:60;}
.floaters a{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--white); box-shadow:0 8px 18px rgba(0,0,0,0.22);
}
.floaters a.call{background:#7A2038;}
.floaters a.wa{background:#25D366;}

/* --- footer --- */
footer.site{background:var(--navy); color:rgba(247,241,228,0.85); padding-top:70px;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(247,241,228,0.15);}
.footer-grid h4{font-family:'Bebas Neue',sans-serif; color:var(--amber-2); font-size:1.1rem; letter-spacing:0.05em; margin-bottom:18px;}
.footer-grid li{margin-bottom:10px; font-size:0.9rem;}
.footer-grid a:hover{color:var(--amber-2);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding:22px 0; font-size:0.82rem; flex-wrap:wrap; gap:10px;}
.social{display:flex; gap:12px;}
.social a{width:34px;height:34px;border-radius:50%; border:1px solid rgba(247,241,228,0.3); display:flex; align-items:center; justify-content:center;}
.social a:hover{background:var(--amber); color:var(--navy); border-color:var(--amber);}

/* --- inner page hero (about/services/etc.) --- */
.page-hero{background:var(--navy); color:var(--sand); padding:56px 0 44px; position:relative;}
.page-hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background-image:repeating-linear-gradient(90deg, var(--amber) 0 30px, transparent 30px 60px);}
.page-hero .crumb{font-family:'JetBrains Mono',monospace; font-size:0.78rem; color:var(--amber-2); letter-spacing:0.06em;}
.page-hero h1{color:var(--white); margin-top:10px; font-size:clamp(2rem,4vw,3.2rem);}

/* --- utility --- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.badge{display:inline-block; background:var(--sand); color:var(--teal); font-family:'JetBrains Mono',monospace; font-size:0.72rem; padding:6px 12px; border-radius:20px; letter-spacing:0.06em; margin-bottom:14px;}
.center{text-align:center;}
.mt{margin-top:26px;}

@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr;}
  .booking{grid-template-columns:1fr 1fr; margin-top:30px;}
  .grid.cols-4{grid-template-columns:repeat(2,1fr);}
  .grid.cols-3{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .split, .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:720px){
  nav.main{position:fixed; top:0; left:0; right:0; bottom:0; background:var(--white); flex-direction:column; justify-content:center; transform:translateX(100%); transition:transform .25s ease; padding:40px;}
  nav.main.open{transform:translateX(0);}
  nav.main ul{flex-direction:column; align-items:flex-start; gap:20px;}
  .dropdown .menu{position:static; opacity:1; visibility:visible; box-shadow:none; border:none; transform:none; display:none; padding-left:14px;}
  .dropdown.open .menu{display:block;}
  .burger{display:flex;}
  .nav-cta .btn.small{display:none;}
  .booking{grid-template-columns:1fr;}
  .grid.cols-4, .grid.cols-3, .grid.cols-2{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .cta-strip .wrap{flex-direction:column; text-align:center;}
}