:root{
  /* Taxi theme (yellow + black) */
  /* Moroccan wall palette (tadelakt / terracotta / sand) */
  --bg:#140c08;     /* deep warm brown */
  --bg2:#1b110c;
  --card:#121212;
  --paper:#fff3bf;
  --ink:#0b0b0b;
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(11,11,11,.72);
  --gold:#ffd000; /* taxi yellow */
  --rose:#ffb000; /* warm yellow accent */
  --mint:#ffe37a; /* soft highlight */
  --clay:#b56a47;  /* terracotta */
  --sand:#d2b08a;  /* warm sand */
  --plaster:#f0e2cf; /* light plaster */
  --line:rgba(255,255,255,.14);
  --radius:18px;
  --shadow:0 22px 70px rgba(0,0,0,.35);
  --max:1120px;
  /* External kasbah wall photo (stable Wikimedia host) */
  /* Southern Morocco mud-brick kasbah (Aït Benhaddou area) */
  --kasbah-wall-photo: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Ait_Zineb_-_Ksar_of_A%C3%AFt_Benhaddou_-_20190716175721.jpg/3840px-Ait_Zineb_-_Ksar_of_A%C3%AFt_Benhaddou_-_20190716175721.jpg");
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:#fff;
  background:
    /* Kasbah wall photo + readable overlay */
    linear-gradient(180deg, rgba(8,5,3,.58), rgba(8,5,3,.78)),
    var(--kasbah-wall-photo),
    radial-gradient(1200px 760px at 12% 8%, rgba(181,106,71,.18), transparent 58%),
    radial-gradient(900px 640px at 92% 18%, rgba(210,176,138,.12), transparent 58%),
    radial-gradient(900px 560px at 55% 108%, rgba(255,208,0,.08), transparent 60%),
    linear-gradient(180deg, var(--bg), #0b0705 62%, #070403);
  background-size: auto, cover, auto, auto, auto, auto;
  background-position: center, center, center, center, center, center;
  background-attachment: fixed, fixed, scroll, scroll, scroll, scroll;
  background-blend-mode: multiply, normal, normal, normal, normal, normal;
  line-height:1.45;
}

a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:var(--max); margin:0 auto; padding:0 20px}

.skip{
  position:absolute; left:-999px; top:10px;
  background:var(--paper); color:var(--ink);
  padding:10px 12px; border-radius:12px;
}
.skip:focus{left:12px; z-index:9999}

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.3) blur(14px);
  background:rgba(0,0,0,.72);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 0;
}
.brand{display:flex; align-items:center; gap:12px; min-width:240px}
.brand__mark{
  width:68px; height:68px; border-radius:22px;
  background:linear-gradient(135deg, rgba(255,208,0,.30), rgba(255,176,0,.16));
  border:1px solid rgba(255,208,0,.44);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  display:grid; place-items:center;
}
.brand__mark svg{width:40px; height:40px; fill:var(--gold)}
.brand__title{font-weight:800; letter-spacing:.2px}
.brand__tag{font-size:12px; color:var(--muted); margin-top:2px}

.nav{
  display:flex; gap:16px; align-items:center;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(0,0,0,.40);
}
.nav a{
  font-size:13px;
  color:rgba(255,255,255,.84);
  padding:6px 10px;
  border-radius:999px;
}
.nav a:hover{background:rgba(255,255,255,.06); text-decoration:none}

.header__cta{display:flex; gap:10px; align-items:center}

.lang{display:inline-flex; align-items:center}
.lang__select{
  appearance:none;
  padding:11px 34px 11px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.88);
  font-weight:800;
  font-size:13px;
  cursor:pointer;
}
.lang__select:focus{outline:none; border-color:rgba(255,208,0,.70); box-shadow:0 0 0 4px rgba(255,208,0,.14)}
.lang__select{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.78) 50%),
    linear-gradient(135deg, rgba(255,255,255,.78) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

html[dir="rtl"] body{direction:rtl}
html[dir="rtl"] .header__inner{flex-direction:row-reverse}
html[dir="rtl"] .hero__inner{direction:rtl}
html[dir="rtl"] .nav{direction:rtl}
html[dir="rtl"] .contact__row{flex-direction:row-reverse}
html[dir="rtl"] .table th, html[dir="rtl"] .table td{text-align:right}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:11px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  font-weight:700;
  font-size:13px;
  white-space:nowrap;
  text-decoration:none !important;
}
.btn--primary{
  background:linear-gradient(135deg, rgba(255,208,0,.98), rgba(255,176,0,.92));
  border-color: rgba(255,208,0,.65);
  color:#0b0b0b;
  box-shadow: 0 18px 60px rgba(255,208,0,.18);
}
.btn--ghost{
  background:rgba(255,255,255,.05);
}
.btn--full{width:100%}
.btn:active{transform:translateY(1px)}

/* Hero */
.hero{position:relative; overflow:hidden}
.hero__bg{
  position:absolute; inset:0;
  opacity:.8;
  background:
    radial-gradient(860px 560px at 18% 22%, rgba(181,106,71,.18), transparent 58%),
    radial-gradient(760px 560px at 82% 16%, rgba(210,176,138,.12), transparent 58%),
    radial-gradient(1040px 680px at 50% 112%, rgba(255,208,0,.10), transparent 62%);
  background-size:auto, auto, auto;
  filter:contrast(1.05) saturate(1.05);
}
.hero__inner{
  position:relative;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:22px;
  padding:44px 0 30px;
  align-items:start;
}

.hero__aside{
  display:grid;
  gap:14px;
  align-content:start;
}
.heroContactCard{padding:16px}
.heroContactCard .heroCallCard__text{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.10);
}
.heroCallCard__text{
  font-size:15px;
  line-height:1.65;
  font-weight:700;
}
.heroCallCard__text a{
  color:var(--gold);
  text-decoration:none;
  white-space:nowrap;
}
.heroCallCard__text a:hover{text-decoration:underline}
.heroCallCard__ar{font-weight:800}

.sectionCover{
  margin:0 0 18px;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.28);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
.sectionCover--wide{aspect-ratio: 21 / 9; min-height:160px;}
.sectionCover--mid{aspect-ratio: 21 / 10; min-height:140px;}
.sectionCover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(1.04) contrast(1.03);
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(8,27,26,.35);
  color:rgba(255,255,255,.85);
  font-weight:700;
  font-size:12px;
}

h1{
  margin:12px 0 10px;
  font-size: clamp(30px, 4.5vw, 52px);
  line-height:1.08;
  letter-spacing:-.4px;
}
.accent{color:var(--gold)}
.lead{color:rgba(255,255,255,.82); font-size:15.5px; max-width:54ch}

.hero__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.hero__trust{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.pill{
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.82);
}
.pill--dark{
  background:rgba(11,47,44,.42);
  border-color:rgba(214,168,75,.22);
}

/* Cards */
.card{
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card__top{
  padding:16px 16px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(500px 160px at 30% 0%, rgba(255,208,0,.18), transparent 60%),
    radial-gradient(500px 160px at 80% 0%, rgba(255,176,0,.12), transparent 60%);
}
.card__title{font-weight:850; letter-spacing:.2px}
.card__sub{font-size:12.5px; color:var(--muted); margin-top:3px}

.form{padding:14px 16px 16px}
.field{display:grid; gap:6px; margin-bottom:12px}
.field span{font-size:12px; color:rgba(255,255,255,.82); font-weight:700}
.field input, .field select{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.50);
  color:#fff;
  outline:none;
}
.field input:focus, .field select:focus{border-color:rgba(255,208,0,.70); box-shadow:0 0 0 4px rgba(255,208,0,.14)}
.form__hint{margin-top:10px; font-size:12px; color:rgba(255,255,255,.74)}

/* Sections */
.section{padding:52px 0}
.section--alt{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
    radial-gradient(900px 420px at 12% 0%, rgba(181,106,71,.10), transparent 58%),
    radial-gradient(980px 440px at 90% 10%, rgba(210,176,138,.08), transparent 58%);
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.section__head{display:grid; gap:10px; margin-bottom:18px}
h2{
  margin:0;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing:-.2px;
}
.section__head p{margin:0; color:rgba(255,255,255,.78); max-width:75ch}

/* Grids */
.grid{display:grid; gap:14px}
.grid--routes{grid-template-columns: repeat(3, minmax(0, 1fr))}

/* Services */
.services{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  align-items:start;
}
.serviceCard{
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(600px 240px at 30% 0%, rgba(255,208,0,.10), transparent 58%),
    rgba(0,0,0,.30);
  padding:16px;
  box-shadow: var(--shadow);
}
.serviceCard__title{
  font-weight:950;
  letter-spacing:.2px;
  margin-bottom:10px;
}
.serviceList{
  margin:0;
  padding-left:18px;
  color:rgba(255,255,255,.82);
}
.serviceList li{margin:8px 0}

.routeCard{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:16px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(600px 240px at 30% 0%, rgba(255,208,0,.12), transparent 58%),
    radial-gradient(600px 240px at 100% 10%, rgba(255,176,0,.10), transparent 58%),
    rgba(0,0,0,.32);
  overflow:hidden;
}
.routeCard::after{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(520px 220px at 20% 10%, rgba(255,208,0,.12), transparent 62%);
  opacity:.45;
  mask-image: radial-gradient(220px 180px at 20% 10%, #000 0%, rgba(0,0,0,.2) 55%, transparent 70%);
  pointer-events:none;
}
.routeCard > *{position:relative; z-index:1}
.routeCard__top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; position:relative}
.routeCard__img{
  position:relative;
  margin:0 0 12px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  aspect-ratio: 16 / 10;
}
.routeCard__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(1.04) contrast(1.04);
  transform:scale(1.02);
}
.routeCard__img::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.55));
  pointer-events:none;
}
.routeCard__title{font-weight:850; letter-spacing:.2px}
.routeCard__meta{margin-top:4px; font-size:12px; color:rgba(255,255,255,.76)}
.routeCard__price{
  font-weight:900;
  color:#0b0b0b;
  background:linear-gradient(135deg, rgba(255,208,0,.98), rgba(255,176,0,.82));
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,208,0,.65);
  white-space:nowrap;
}
.routeCard__actions{
  position:relative;
  display:flex;
  gap:10px;
  margin-top:auto;
  padding-top:14px;
}
.routeCard__actions a{flex:1; text-align:center}

/* Pricing table */
.pricing{display:grid; gap:16px}
.pricing__note{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.pricing__badge{
  font-weight:900;
  letter-spacing:.2px;
  display:inline-flex;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,208,0,.12);
  border:1px solid rgba(255,208,0,.30);
}
.pricing__small{color:rgba(255,255,255,.74); font-size:13px; max-width:70ch}

.tableWrap{
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.12);
  overflow:auto;
  background:rgba(0,0,0,.28);
}
.table{width:100%; border-collapse:collapse; min-width:780px}
.table th, .table td{
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);
  vertical-align:top;
}
.table thead th{
  position:sticky; top:0;
  background:rgba(6,15,14,.92);
  backdrop-filter: blur(12px);
  text-align:left;
  font-size:12px;
  letter-spacing:.2px;
  text-transform:uppercase;
  color:rgba(255,255,255,.80);
}
.table td{font-size:13.5px}
.table .num{text-align:right; font-variant-numeric: tabular-nums}
.table tbody tr:hover{background:rgba(255,255,255,.03)}

.pricing__foot{display:grid; gap:12px; grid-template-columns:repeat(3, minmax(0, 1fr))}
.callout{
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  padding:16px;
}
.callout__title{font-weight:900; margin-bottom:10px}
.list{margin:0; padding-left:18px; color:rgba(255,255,255,.80)}
.list li{margin:7px 0}

/* Gallery */
.masonry{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:12px;
}
.shot{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  aspect-ratio: 3 / 4;
}
.shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.02);
  filter:saturate(1.05) contrast(1.03);
}
.shot::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55));
  pointer-events:none;
}
.shot__cap{
  position:absolute; left:12px; right:12px; bottom:10px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
  color:rgba(255,255,255,.92);
  z-index:2;
}
.shot__title{font-weight:900}
.shot__tag{font-size:12px; color:rgba(255,255,255,.72)}
.tiny{margin-top:10px; font-size:12px; color:rgba(255,255,255,.66)}

/* Contact */
.contact{display:grid; grid-template-columns: .9fr 1.1fr; gap:16px; align-items:start}
.contact__row{display:flex; justify-content:space-between; gap:10px; padding:10px 16px}
.contact__row + .contact__row{border-top:1px solid rgba(255,255,255,.08)}
.contact__label{color:rgba(255,255,255,.72); font-size:12px}
.contact__value{font-weight:800}
.contact__value a{display:block}
.contact__actions{padding:14px 16px 16px; display:grid; gap:10px}

.patternCard{
  border-radius:var(--radius);
  padding:18px;
  border:1px solid rgba(255,208,0,.26);
  background:
    radial-gradient(520px 260px at 20% 0%, rgba(255,208,0,.14), transparent 60%),
    radial-gradient(540px 260px at 90% 0%, rgba(255,176,0,.10), transparent 60%),
    rgba(0,0,0,.30);
  box-shadow: var(--shadow);
}
.patternCard__title{font-weight:950}
.patternCard__text{margin-top:8px; color:rgba(255,255,255,.78)}
.patternCard__meta{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}

/* Driver profile (make it big) */
.driverProfile{
  display:flex;
  gap:36px;
  align-items:center;
  margin-top:14px;
  padding:32px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.driverProfile__img{
  width:280px;
  height:280px;
  border-radius:32px;
  border:1px solid rgba(255,255,255,.16);
  object-fit:cover;
  flex:0 0 auto;
}
.driverProfile__name{
  font-weight:1000;
  letter-spacing:.2px;
  font-size:52px;
  line-height:1.05;
  color:#fff;
}
.driverProfile__tag{
  margin-top:10px;
  font-size:22px;
  color:rgba(255,255,255,.80);
  max-width:60ch;
}
.driverProfile--hero{
  padding:10px 0 0;
  border:0;
  background:transparent;
  gap:14px;
}
.driverProfile--hero .driverProfile__img{
  width:145px;
  height:145px;
  border-radius:18px;
}
.driverProfile--hero .driverProfile__name{
  font-size:28px;
}
.driverProfile--hero .driverProfile__tag{
  font-size:16px;
  margin-top:6px;
}

@media (max-width: 560px){
  .driverProfile{flex-direction:column; align-items:flex-start}
  .driverProfile__img{width:320px; height:320px; max-width:100%}
  .driverProfile__name{font-size:56px}
  .driverProfile__tag{font-size:20px}
  .driverProfile--hero .driverProfile__img{width:220px; height:220px}
  .driverProfile--hero .driverProfile__name{font-size:34px}
  .driverProfile--hero .driverProfile__tag{font-size:18px}
}

.faq{margin-top:14px}
details{
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  padding:12px 14px;
}
details + details{margin-top:10px}
summary{cursor:pointer; font-weight:900}
.faq__a{margin-top:8px; color:rgba(255,255,255,.78)}

/* Footer */
.footer{
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.70);
}
.footer__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding:18px 0;
}
.footer__brand{font-weight:950}
.footer__right{display:flex; gap:14px; flex-wrap:wrap}
.footer__right a{color:rgba(255,255,255,.78)}

/* Responsive */
@media (max-width: 980px){
  .hero__inner{grid-template-columns:1fr; padding-top:28px}
  .sectionCover--wide{aspect-ratio: 16 / 9}
  .grid--routes{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .services{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .pricing__foot{grid-template-columns:1fr}
  .nav{display:none}
}
@media (max-width: 560px){
  .grid--routes{grid-template-columns:1fr}
  .brand{min-width:auto}
  .brand__mark{width:58px; height:58px; border-radius:20px}
  .brand__mark svg{width:34px; height:34px}
}