@font-face{font-family:"Jakarta";src:url("fonts/jakarta-latin-400-normal.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"PlexMono";src:url("fonts/plexmono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Tajawal";src:url("fonts/tajawal-arabic-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Tajawal";src:url("fonts/tajawal-arabic-700-normal.woff2") format("woff2");font-weight:700 800;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}

/* The palette is defined once here and swapped only when the visitor has
   chosen dark themselves. The site deliberately does not follow the operating
   system: a marketing page that changes colour depending on a setting the
   visitor forgot they made is a page nobody can support over the phone. */
:root{
  --paper:#FFFFFF; --band:#FAF6EE; --card:#FFFFFF;
  --text:#10150F; --muted:#5E6659; --hairline:#E4DFD3;
  --haram:#0B5D3B; --haram-deep:#08462C; --on-haram:#FFFFFF;
  --gold:#F2B705; --gold-hover:#DCA504; --on-gold:#10150F;
  --ink:#10150F; --on-ink:#F7F4EC;
  --shadow:0 1px 2px rgba(16,21,15,.06),0 14px 34px rgba(16,21,15,.13);
  --focus:rgba(242,183,5,.45);
  --arrow:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%235E6659' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 7 7.5l6-6'/%3E%3C/svg%3E");
  --wrap:1200px;
  --r-sm:5px; --r:8px; --r-lg:10px;
  /* Native widget internals follow this: the number spinner, the date picker
     icon and the scrollbars are drawn by the browser, not by us. */
  color-scheme:light;
}

:root[data-theme="dark"]{
  --paper:#0F1310; --band:#161B17; --card:#181E19;
  --text:#F1F4EF; --muted:#A2AC9F; --hairline:#2B332C;
  --haram:#1B8A58; --haram-deep:#0C4C31; --on-haram:#FFFFFF;
  --gold:#F5C020; --gold-hover:#E3B012; --on-gold:#10150F;
  --ink:#080B07; --on-ink:#F7F4EC;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px rgba(0,0,0,.5);
  color-scheme:dark;
  --arrow:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%23A2AC9F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 7 7.5l6-6'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
/* The admin bar pushes the document down with a margin on html, and the canvas
   behind that margin takes its colour from here. Without a colour on html it
   took the body's paper white and drew a white band between the admin bar and
   our own header. */
html{background:var(--ink)}
/* Author styles beat the user agent regardless of specificity, so `.f` and the
   other display rules below would otherwise keep a hidden field on screen. */
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--text);
  font-family:"Jakarta",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.032em;line-height:1.1;text-wrap:balance;
  overflow-wrap:break-word}
/* A long place name has to give way somewhere; better a broken word than a
   field pushed off the side of the page. */
p,li,td,th,dd,dt,label,option,summary{overflow-wrap:break-word}
p{margin:0}
button{font:inherit}
ul,ol{margin:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.wrap-narrow{max-width:900px}
.mono{font-family:"PlexMono",ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.eyebrow{font-family:"PlexMono",ui-monospace,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.band{padding-block:clamp(52px,4vw + 30px,82px)}
.band.tight{padding-block:clamp(38px,3vw + 20px,56px)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:var(--r-sm)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Arabic. Letter spacing is removed rather than reduced: a negative track on a
   joined script pulls the letterforms into each other. */
[dir="rtl"] body,[lang="ar"] body{font-family:"Tajawal","Jakarta",system-ui,sans-serif}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{letter-spacing:normal;line-height:1.3}
[dir="rtl"] .eyebrow,[dir="rtl"] .pill{letter-spacing:normal;font-family:inherit;font-size:12px}
[dir="rtl"] .hero h1{max-width:22ch}
/* The mono face carries no Arabic, so the currency word beside a price fell
   through to a system monospace and each letter was forced into a fixed
   advance, pulling the word apart. Tajawal takes the letters, the mono face
   keeps the figures. */
[dir="rtl"] .mono,
[dir="rtl"] .quote b,
[dir="rtl"] .veh-fare b,
[dir="rtl"] .uot-vcard__fare,
[dir="rtl"] .uot-tile__figure,
[dir="rtl"] .callbox b,
[dir="rtl"] td.num,
[dir="rtl"] thead th,
[dir="rtl"] .step .n,
[dir="rtl"] .uot-done__meta dd{font-family:"PlexMono","Tajawal",ui-monospace,monospace;letter-spacing:normal}

/* page heads */
.page-h1{font-size:clamp(1.9rem,1.4rem + 2vw,2.8rem);margin:10px 0 12px}
.page-lede{color:var(--muted);max-width:64ch;font-size:16px}
.page-body{color:var(--muted);font-size:16px;margin-bottom:14px;max-width:70ch}
.inline-link{color:var(--haram);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.split-h2{margin:8px 0 10px;font-size:clamp(1.45rem,1.15rem + 1.3vw,2.05rem)}
.split-lede{color:var(--muted);font-size:15px;margin-bottom:20px}
.back-link{margin-bottom:16px;display:inline-flex}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;font-weight:800;font-size:15px;
  background:var(--gold);color:var(--on-gold);border-radius:var(--r);padding:13px 22px;white-space:nowrap;
  text-align:center;justify-content:center}
.btn:hover{background:var(--gold-hover)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--hairline)}
.btn.ghost:hover{border-color:var(--muted);background:transparent}
.btn.ghost.on-dark{color:#FFF;border-color:rgba(255,255,255,.4)}
.btn.green{background:var(--haram);color:var(--on-haram)}
.btn.green:hover{background:var(--haram-deep)}
.btn.sm{font-size:13.5px;padding:9px 15px}
.btn.wide{width:100%}
.btn[disabled]{opacity:.6;cursor:progress}

/* header */
.top{background:var(--ink);color:var(--on-ink);position:sticky;top:0;z-index:40}
/* A sticky header sticks to the top of the viewport, which is where the fixed
   admin bar already is, so for a signed-in visitor the two overlapped as soon as
   the page moved. WordPress adds the admin-bar class to the body for us. */
body.admin-bar .top{top:32px}
@media screen and (max-width:782px){body.admin-bar .top{top:46px}}
.top .wrap{display:flex;align-items:center;gap:22px;min-height:66px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;font-size:16.5px;color:#FFF}
.brand-logo{height:60px;width:auto;max-width:100%}
@media(max-width:640px){.brand-logo{height:44px}}
@media(max-width:460px){.brand-logo{height:36px}}
.foot .brand-logo{height:52px}
.nav{display:none;gap:4px;margin-inline-start:auto;font-size:14.5px;font-weight:600}
.nav-item{position:relative}
.nav-item > a{display:flex;align-items:center;gap:6px;white-space:nowrap;color:rgba(247,244,236,.8);
  padding:22px 12px;border-bottom:2px solid transparent}
.nav-item > a:hover{color:#FFF}
.nav-item > a.on{color:#FFF;border-bottom-color:var(--gold)}
.nav-item > a svg{opacity:.7;transition:transform .15s ease}
/* Hover and focus-within together, so the menu opens for a pointer and for a
   keyboard without a script deciding which is which. */
.nav-item.has-sub:hover > a svg,.nav-item.has-sub:focus-within > a svg{transform:rotate(180deg)}
.subnav{position:absolute;inset-inline-start:0;top:100%;min-width:250px;padding-top:6px;
  opacity:0;visibility:hidden;transform:translateY(-5px);transition:opacity .14s ease,transform .14s ease;z-index:45}
.nav-item.has-sub:hover .subnav,.nav-item.has-sub:focus-within .subnav{opacity:1;visibility:visible;transform:none}
.subnav__in{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r);
  box-shadow:var(--shadow);padding:8px;display:grid;gap:2px}
.subnav__note{font-size:11.5px;color:var(--muted);padding:6px 10px 8px;line-height:1.4;
  border-bottom:1px solid var(--hairline);margin-bottom:4px;font-weight:600}
.subnav__list{display:grid;gap:1px}
.subnav a{display:block;padding:9px 10px;border-radius:var(--r-sm);color:var(--text);font-size:14px;font-weight:600}
.subnav a:hover{background:var(--band);color:var(--haram)}
.subnav a[aria-current="page"]{color:var(--haram)}
/* The fleet menu is eight vehicles, which is a column too long to read. */
.nav-item:nth-child(2) .subnav{min-width:420px}
.nav-item:nth-child(2) .subnav__list{grid-template-columns:repeat(2,1fr)}
[dir="rtl"] .subnav{inset-inline-start:auto;inset-inline-end:0}
.top-actions{display:flex;align-items:center;gap:9px;margin-inline-start:auto}
.lang,.iconbtn{font-size:12.5px;color:rgba(247,244,236,.8);border:1px solid rgba(247,244,236,.24);
  border-radius:var(--r-sm);padding:6px 10px;background:transparent;cursor:pointer;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;min-height:32px}
.lang:hover,.iconbtn:hover{color:#FFF;border-color:rgba(247,244,236,.5)}
.iconbtn{width:34px;padding:0}
.iconbtn .ico-moon{display:none}
:root[data-theme="dark"] .iconbtn .ico-sun{display:none}
:root[data-theme="dark"] .iconbtn .ico-moon{display:block}
.burger{display:grid;place-items:center;width:36px;height:34px;border-radius:var(--r-sm);border:1px solid rgba(247,244,236,.24);background:transparent;color:#FFF;cursor:pointer}
/* Scoped to .top on purpose: this element also carries .wrap, and the shorter
   `.mnav{display:none}` loses to `.top .wrap{display:flex}`, which left the
   closed menu laid out across the page and scrolling it sideways. */
.top .mnav{display:none;border-top:1px solid rgba(247,244,236,.12);padding-block:8px 16px}
.top .mnav.open{display:block}
.mnav a{display:block;padding:11px 0;font-weight:600;color:rgba(247,244,236,.86);border-bottom:1px solid rgba(247,244,236,.08)}
.mnav__top{font-size:16px;color:#FFF!important;padding-top:16px!important}
.mnav__sub{padding-inline-start:14px;border-inline-start:2px solid rgba(247,244,236,.14);margin-block:2px 4px}
.mnav__sub a{font-size:14px;font-weight:500;padding:8px 0;border-bottom:0;color:rgba(247,244,236,.72)}
.mnav__sub a:hover{color:#FFF}
@media(min-width:1080px){.nav{display:flex}.top-actions{margin-inline-start:0}.burger{display:none}.mnav{display:none!important}}

/* hero */
.hero{position:relative;background:var(--ink);color:#F7F4EC}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:.55}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,11,7,.74) 0%,rgba(8,11,7,.42) 42%,rgba(8,11,7,.9) 100%)}
.hero-inner{position:relative;padding-block:clamp(48px,5vw + 22px,80px) 0}
.pill{display:inline-block;border:1px solid rgba(247,244,236,.4);border-radius:var(--r-sm);
  padding:6px 13px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-family:"PlexMono",monospace;color:var(--gold)}
.hero h1{font-size:clamp(2.05rem,1.25rem + 3.4vw,3.4rem);margin-block:16px 14px;color:#FFF;max-width:19ch}
.hero-lede{color:rgba(247,244,236,.82);font-size:clamp(1rem,.96rem + .2vw,1.1rem);max-width:54ch}
.ticks{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:9px}
.ticks li{display:flex;gap:10px;align-items:center;font-size:14.5px;color:rgba(247,244,236,.9)}
.ticks svg{flex:0 0 auto;color:var(--gold)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;margin-top:26px}
.callbox{display:flex;align-items:center;gap:11px}
.callbox .ico{width:40px;height:40px;border-radius:var(--r-sm);background:rgba(247,244,236,.13);display:grid;place-items:center;color:#FFF;flex:0 0 auto}
.callbox small{display:block;font-size:11.5px;color:rgba(247,244,236,.66)}
.callbox b{font-size:15.5px;letter-spacing:.01em}

/* booking panel */
/* No overflow clipping here. The place picker draws its own menu as an absolute
   child, and hiding the overflow to keep the corners rounded cut that menu off
   at the panel edge, which reads as a broken dropdown. The one child that
   actually needs the corner is the foot, so the foot carries it. */
.panel{background:var(--card);color:var(--text);border-radius:var(--r-lg);box-shadow:var(--shadow);
  margin-top:32px;transform:translateY(36px);position:relative;z-index:3}
.panel-head{display:flex;gap:6px;padding:13px 15px 0;flex-wrap:wrap}
.tab{border:0;background:transparent;font-weight:700;font-size:14px;color:var(--muted);
  padding:9px 14px;border-radius:var(--r-sm);cursor:pointer}
.tab[aria-selected="true"]{background:var(--haram);color:var(--on-haram)}
.panel-body{display:grid;gap:11px;padding:13px 15px 16px;grid-template-columns:1fr;align-items:end}
.panel-body .btn{align-self:end}
.f{display:grid;gap:7px;min-width:0}
.f label{font-size:12px;font-weight:700;color:var(--muted);line-height:1.35;display:block}
.f select,.f input,.f textarea{width:100%;font:inherit;font-size:15px;color:var(--text);background:var(--paper);
  border:1px solid var(--hairline);border-radius:var(--r-sm);padding:11px 12px}
.f select:hover,.f input:hover,.f textarea:hover{border-color:var(--muted)}
.f input::placeholder,.f textarea::placeholder{color:var(--muted);opacity:.75}
.panel-foot{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;
  border-top:1px solid var(--hairline);padding:12px 15px;background:var(--band);
  border-end-start-radius:var(--r-lg);border-end-end-radius:var(--r-lg)}
.quote{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.quote b{font-family:"PlexMono",monospace;font-variant-numeric:tabular-nums;font-size:22px;letter-spacing:-.02em}
.quote span{font-size:13px;color:var(--muted)}
.uot-summary__aside{font-size:12px;color:var(--muted)}
@media(min-width:820px){.panel-body{grid-template-columns:repeat(auto-fit,minmax(176px,1fr));align-items:end}
  .panel-body .btn{grid-column:span 1}}

/* Every control in the panel is one height, and every label above it occupies
   one line's worth of space whether it wrapped or not. Without both, a two word
   label or a long place name made its column taller than the rest and the row
   of fields stepped up and down across the panel. */
/* Nothing in the panel is allowed to be wider than its column. A flex or grid
   item defaults to min-width:auto, which is the width of its longest unbreakable
   run, so a single long place name on one line pushed its whole cell past the
   column and over the field beside it. */
.panel-body > *,.panel-body .f,.panel-body .uot-select,.panel-body .uot-select__button{min-width:0}
.panel-body .f{align-content:end}
.panel-body .f > label{min-height:17px}
.panel-body .uot-pick__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:10px;min-height:17px}
.panel-body .f > label,.panel-body .uot-pick__head label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel-body .f select,.panel-body .f input,.panel-body .uot-select__button,
.panel-body .uot-pick__search input{height:46px;min-height:46px}
.panel-body .btn{height:46px;display:inline-flex;align-items:center;justify-content:center}
/* The value is one line and clips rather than wrapping: a place name that ran to
   two lines was the other half of the uneven row. The full name stays in the
   menu, where there is room for it. */
.panel-body .uot-select__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.panel-body .f select,.panel-body .f input,.panel-body .uot-select__button{font-size:14.5px}

/* The native select arrow sits hard against the edge and cannot be spaced, so
   it is replaced with a background chevron and the field padded to clear it.
   The browser also paints its own focus ring over ours, which read as two. */
.f select{-webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:var(--arrow);background-repeat:no-repeat;
  background-position:right 14px center;padding-inline-end:40px;cursor:pointer}
.f select::-ms-expand{display:none}
/* Only the chevron flips. padding-inline-end already resolves to the left in
   RTL, so restating it moved the clearance to the wrong side of the field and
   the arrow sat on top of a long option. */
[dir="rtl"] .f select{background-position:left 14px center}
.f input:focus,.f select:focus,.f textarea:focus{outline:none}
.f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible{
  border-color:var(--text);box-shadow:0 0 0 3px var(--focus);outline:none}

/* stats */
.stats{display:grid;gap:20px 26px;grid-template-columns:repeat(2,1fr);border-top:1px solid rgba(247,244,236,.16);
  margin-top:56px;padding-top:26px;padding-bottom:8px;position:relative}
.stats .n{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem);font-weight:800;letter-spacing:-.04em;color:#FFF;line-height:1}
.stats .l{font-size:13px;color:rgba(247,244,236,.7);margin-top:5px}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}

/* trust */
.trust-grid{display:grid;gap:22px;grid-template-columns:1fr}
.trust-item{display:flex;gap:13px;align-items:flex-start}
.dot{flex:0 0 auto;width:38px;height:38px;border-radius:var(--r-sm);background:var(--haram);color:var(--on-haram);display:grid;place-items:center}
.trust-item h3{font-size:15.5px}
.trust-item p{font-size:13.5px;color:var(--muted);line-height:1.5;margin-top:3px}
@media(min-width:820px){.trust-grid{grid-template-columns:repeat(3,1fr);gap:32px}}

/* section head */
.sec-head{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:flex-end;justify-content:space-between;margin-bottom:26px}
.sec-head h2{font-size:clamp(1.45rem,1.15rem + 1.3vw,2.05rem);margin-top:8px}
.sec-head p{color:var(--muted);font-size:15px;margin-top:7px;max-width:58ch}
.more{font-weight:700;font-size:14.5px;color:var(--haram);white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
.more:hover{text-decoration:underline}
.centred{text-align:center;display:block}
.centred h2,.centred p{margin-inline:auto}

/* bento */
.bento{display:grid;gap:12px;grid-template-columns:1fr;grid-auto-rows:186px}
.tile{position:relative;border-radius:var(--r-lg);overflow:hidden;display:block;background:var(--ink);min-height:0}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,0,0,1)}
.tile:hover img{transform:scale(1.04)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,11,7,.06) 30%,rgba(8,11,7,.88) 100%)}
.tile-txt{position:absolute;inset-inline:0;bottom:0;padding:16px;color:#FFF;z-index:1;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.tile-txt h3{font-size:17px;color:#FFF;line-height:1.2}
.tile-txt .mono{font-size:12.5px;color:var(--gold);display:block;margin-top:4px}
.arrow{flex:0 0 auto;width:32px;height:32px;border-radius:var(--r-sm);background:rgba(255,255,255,.18);display:grid;place-items:center}
@media(min-width:560px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){
  .bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:190px}
  .tile.lg{grid-column:span 2;grid-row:span 2}
  .tile.lg .tile-txt h3{font-size:22px}
}

/* vehicle cards */
.veh-grid{display:grid;gap:14px;grid-template-columns:1fr}
.veh{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
/* A fixed height, not an aspect ratio: as a flex item the ratio box stretches
   and a portrait photograph makes its card taller than the rest of the row. */
.veh-media{position:relative;height:190px;flex:0 0 auto;background:var(--ink);overflow:hidden}
.veh-media img{width:100%;height:100%;object-fit:cover}
.veh-body{padding:16px;display:flex;flex-direction:column;gap:10px;flex:1}
.veh-body h3{font-size:17.5px}
.veh-note{font-size:13px;color:var(--muted);line-height:1.5}
.spec{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.spec div{background:var(--band);border-radius:var(--r-sm);padding:8px 10px}
.spec .k{font-size:11px;color:var(--muted)}
.spec .v{font-size:13.5px;font-weight:700}
.spec-wide{grid-template-columns:repeat(2,1fr);gap:9px;margin:20px 0}
.spec-six{grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:700px){.spec-six{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.spec-six{grid-template-columns:repeat(6,1fr)}}
.more.on-dark{color:var(--gold)}

/* packages */
.pkg{gap:12px}
.pkg-legs{list-style:none;margin:0;padding:0;display:grid;gap:7px;border-top:1px solid var(--hairline);padding-top:12px}
.pkg-legs li{display:flex;gap:12px;justify-content:space-between;align-items:baseline;font-size:13.5px;color:var(--muted)}
.pkg-legs b{color:var(--text);white-space:nowrap}
.pkg-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border-top:1px solid var(--hairline);padding-top:12px;font-weight:700}
.pkg-total b{font-size:20px}
.veh-fare{display:flex;align-items:baseline;gap:8px;margin-top:auto}
.veh-fare b{font-family:"PlexMono",monospace;font-variant-numeric:tabular-nums;font-size:21px;letter-spacing:-.02em}
.veh-fare span{font-size:12px;color:var(--muted)}
.veh-body h3 a:hover{color:var(--haram)}
.veh-media{display:block}
.veh-actions{display:grid;gap:8px;margin-top:auto}
@media(min-width:420px){.veh-actions{grid-template-columns:1fr 1fr}}
@media(min-width:640px){.veh-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.veh-grid{grid-template-columns:repeat(3,1fr)}}

/* video band */
.vband{position:relative;overflow:hidden;background:var(--ink);color:#FFF;
  min-height:clamp(460px,62vh,660px);display:grid;place-items:center;
  padding-block:clamp(56px,7vw,96px);text-align:center}
.vband .vbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;z-index:0}
.vband::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 90% at 50% 50%,rgba(8,11,7,.55) 0%,rgba(8,11,7,.82) 62%,rgba(8,11,7,.94) 100%)}
.vband .wrap{position:relative;z-index:2;max-width:820px}
.vband .eyebrow{color:var(--gold)}
.vband h2{font-size:clamp(1.8rem,1.2rem + 2.4vw,2.9rem);color:#FFF;margin:10px auto 0;max-width:18ch}
.vband p{color:rgba(247,244,236,.88);max-width:56ch;margin:14px auto 0;font-size:16px}
.vband .uot-vactions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}

/* green band */
.green{background:var(--haram-deep);color:#FFF}
.green h2{font-size:clamp(1.45rem,1.15rem + 1.3vw,2.05rem);max-width:20ch;color:#FFF}
.green .lede{color:rgba(255,255,255,.78);margin-top:10px;max-width:58ch;font-size:15.5px}
.incl{display:grid;gap:24px;grid-template-columns:1fr;margin-top:32px}
.incl div{border-inline-start:3px solid var(--gold);padding-inline-start:15px}
.incl h3{font-size:15.5px;color:#FFF}
.incl p{font-size:13.5px;color:rgba(255,255,255,.75);margin-top:4px;line-height:1.5}
@media(min-width:820px){.incl{grid-template-columns:repeat(3,1fr);gap:30px}}

/* steps + split */
.split{display:grid;gap:28px;grid-template-columns:1fr;align-items:center}
.steps{display:grid;gap:10px}
.step{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;
  background:var(--card);border:1px solid var(--hairline);border-radius:var(--r);padding:15px 17px}
.step .n{font-family:"PlexMono",monospace;font-size:12px;color:var(--on-gold);background:var(--gold);
  border-radius:var(--r-sm);padding:4px 8px;font-variant-numeric:tabular-nums}
.step h3{font-size:15.5px}
.step p{font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.split img{border-radius:var(--r-lg);width:100%;object-fit:cover;max-height:460px}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:42px}}

/* trio */
.trio{display:grid;gap:12px;grid-template-columns:1fr}
.promo{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:20px;display:grid;gap:8px;align-content:start}
.promo h3{font-size:16.5px}
.promo p{font-size:13.5px;color:var(--muted);line-height:1.5}
@media(min-width:820px){.trio{grid-template-columns:repeat(3,1fr)}}

/* reviews */
.plats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:22px}
.plat{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--hairline);border-radius:var(--r-sm);
  padding:7px 12px;font-size:13px;font-weight:700;background:var(--card)}
.plat:hover{border-color:var(--muted)}
.plat i{width:9px;height:9px;border-radius:2px;display:block}

/* A star row is two rows stacked: an empty one, and a filled one clipped to the
   proportion earned. A 4.6 is then drawn as a 4.6 rather than rounded to a
   figure nobody gave us. inset-inline-start puts the clip on the correct edge in
   Arabic without a second rule. */
.stars{position:relative;display:inline-flex;line-height:0;white-space:nowrap}
.stars svg{width:16px;height:16px;flex:none;fill:currentColor}
.stars__off{display:inline-flex;color:var(--hairline)}
.stars__on{position:absolute;inset-block-start:0;inset-inline-start:0;display:inline-flex;
  overflow:hidden;color:var(--gold)}
:root[data-theme="dark"] .stars__off{color:#3A423B}

.rev-score{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rev-score .stars svg{width:19px;height:19px}
.rev-score b{font-size:24px;line-height:1}
.rev-score span{font-size:13px;color:var(--muted)}

.rev-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:720px){.rev-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.rev-grid{grid-template-columns:repeat(3,1fr)}}
.rev{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:18px;
  display:grid;gap:10px;align-content:start}
.rev__top{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between}
.rev__verified{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  color:var(--haram)}
.rev__body{font-size:14.5px;line-height:1.6;white-space:pre-line}
.rev__meta{display:flex;flex-wrap:wrap;gap:2px 8px;font-size:12.5px;color:var(--muted)}
.rev__meta b{color:var(--text);font-size:13px}

.rev-write{border-top:1px solid var(--hairline);padding-top:18px;display:grid;gap:12px}
.rev-write h3{font-size:16px}
.rev--mine{background:var(--band)}

.rate{border:0;padding:0;margin:0;display:grid;gap:8px}
.rate legend{padding:0;font-size:13px;font-weight:700}
.rate__row{display:flex;gap:4px}
.rate__star{cursor:pointer;line-height:0;border-radius:var(--r-sm)}
.rate__star input{position:absolute;width:1px;height:1px;opacity:0}
.rate__star svg{width:34px;height:34px;fill:var(--hairline)}
.rate__star input:checked~svg{fill:var(--gold)}
.rate__star input:focus-visible~svg{outline:3px solid var(--gold);outline-offset:2px}
/* Choosing four stars means four stars are lit, not the fourth one alone. There
   is no way to say "and everything before this", so each position is written
   out. The rule above still lights the chosen star where :has is unsupported. */
.rate__row:has(.rate__star:nth-child(2) input:checked) .rate__star:nth-child(-n+2) svg,
.rate__row:has(.rate__star:nth-child(3) input:checked) .rate__star:nth-child(-n+3) svg,
.rate__row:has(.rate__star:nth-child(4) input:checked) .rate__star:nth-child(-n+4) svg,
.rate__row:has(.rate__star:nth-child(5) input:checked) .rate__star:nth-child(-n+5) svg,
.rate__row:has(.rate__star:nth-child(1):hover) .rate__star:nth-child(-n+1) svg,
.rate__row:has(.rate__star:nth-child(2):hover) .rate__star:nth-child(-n+2) svg,
.rate__row:has(.rate__star:nth-child(3):hover) .rate__star:nth-child(-n+3) svg,
.rate__row:has(.rate__star:nth-child(4):hover) .rate__star:nth-child(-n+4) svg,
.rate__row:has(.rate__star:nth-child(5):hover) .rate__star:nth-child(-n+5) svg{fill:var(--gold)}

/* vehicle page: the specification strip */
.vspecs{display:grid;gap:8px;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.vspecs{grid-template-columns:repeat(4,1fr)}}
.vspec{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--hairline);
  border-radius:var(--r);padding:11px 13px;min-width:0}
.vspec__ico{flex:0 0 auto;width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--band);color:var(--haram)}
.vspec__text{display:grid;gap:1px;min-width:0}
.vspec__k{font-size:11px;color:var(--muted);line-height:1.2}
.vspec__v{font-size:14px;font-weight:700;line-height:1.25}

/* vehicle page: why, inclusions, packages, comparison, related */
.why{position:relative;padding-top:34px}
.why__n{position:absolute;top:18px;inset-inline-start:20px;font-family:"PlexMono",ui-monospace,monospace;
  font-size:12px;letter-spacing:.12em;color:var(--gold)}
[dir="rtl"] .why__n{letter-spacing:normal}

.tick{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--text);line-height:1.5}
.tick > span{color:var(--haram);font-weight:800;flex:0 0 auto;line-height:1.5}
.tick--no{color:var(--muted)}
.tick--no > span{color:var(--muted)}

.pkg-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:760px){.pkg-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.pkg-grid{grid-template-columns:repeat(3,1fr)}}
.pkg-card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:18px;
  display:flex;flex-direction:column;gap:10px}
.pkg-card__top{display:flex;gap:12px;align-items:flex-start}
.pkg-card__n{flex:0 0 auto;width:34px;height:34px;border-radius:var(--r-sm);background:var(--haram);
  color:var(--on-haram);display:grid;place-items:center;font-weight:800;font-size:15px;
  font-family:"PlexMono",ui-monospace,monospace}
[dir="rtl"] .pkg-card__n{font-family:inherit}
.pkg-card__top h3{font-size:15.5px;margin-top:3px}
.pkg-card__note{font-size:13px;color:var(--muted);line-height:1.5}
.pkg-save{font-size:12.5px;color:var(--haram);font-weight:700}
.pkg-suits{font-size:12.5px;color:var(--muted);border-inline-start:3px solid var(--gold);padding-inline-start:11px}
/* The button sits on the floor of the card so a row of buttons reads as a row,
   whatever length the itinerary above each one runs to. */
.pkg-card .btn{margin-top:auto}
.rel-card__foot{margin-top:auto}

.veh-compare tr.is-here{background:var(--band)}
.veh-compare tr.is-here th{font-weight:800}

.rel-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:700px){.rel-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.rel-grid{grid-template-columns:repeat(3,1fr)}}
.rel-card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden;
  display:grid;grid-template-rows:auto 1fr}
.rel-card__media{display:block;height:158px;background:var(--band)}
.rel-card__media img{width:100%;height:100%;object-fit:cover}
.rel-card__seats{width:100%;height:100%;display:grid;place-content:center;justify-items:center;gap:2px;color:var(--muted)}
.rel-card__seats b{font-size:30px;color:var(--text);line-height:1}
.rel-card__body{padding:16px;display:flex;flex-direction:column;gap:9px}
.rel-card__body h3{font-size:17px}
.rel-card__body h3 a:hover{color:var(--haram)}
.rel-card__note{font-size:13px;color:var(--muted);line-height:1.5}
.rel-card__spec{display:flex;flex-wrap:wrap;gap:4px 20px;margin:0;padding:9px 0;
  border-block:1px solid var(--hairline)}
.rel-card__spec div{display:grid;gap:1px}
.rel-card__spec dt{font-size:11px;color:var(--muted)}
.rel-card__spec dd{margin:0;font-size:14.5px;font-weight:700}
.rel-card__versus{font-size:12.5px;color:var(--muted);line-height:1.45}
.rel-card__foot{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between}

.cards-four{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:620px){.cards-four{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.cards-four{grid-template-columns:repeat(4,1fr)}}
.chan .contact-strong{font-size:15px}
.chan__when{font-size:12px;font-weight:700;color:var(--haram);margin-top:auto;padding-top:4px}
.chan{display:flex;flex-direction:column}

/* A left-aligned block in a full width band leaves half the band empty, which
   reads as something failing to load rather than as breathing room. The closing
   call and the dark bands are centred and capped instead. */
.band.green .wrap{max-width:760px;text-align:center}
.band.green .wrap > div{justify-content:center}
.band.green .lede{margin-inline:auto}
.dark-band{min-height:0}
.dark-band .hero-inner{padding-block:clamp(44px,3.4vw + 24px,64px);max-width:760px;text-align:center}
.dark-band h2{margin-top:10px;font-size:clamp(1.5rem,1.15rem + 1.6vw,2.2rem);color:#FFF;margin-inline:auto}
.dark-band p{color:rgba(247,244,236,.82);margin-top:12px;font-size:15.5px;max-width:60ch;margin-inline:auto}

/* faq */
.faq{display:grid;gap:9px;max-width:820px;margin-inline:auto}
.qa{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r)}
.qa summary{cursor:pointer;list-style:none;padding:15px 17px;font-weight:700;font-size:15.5px;
  display:flex;justify-content:space-between;gap:14px;align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-family:"PlexMono",monospace;font-weight:400;font-size:19px;color:var(--muted)}
.qa[open] summary::after{content:"\2212"}
.qa p{padding:0 17px 16px;color:var(--muted);font-size:14.5px;line-height:1.6}

/* coverage */
.cov{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.city{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:150px;background:var(--ink)}
.city img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72}
.city span{position:absolute;inset-inline:0;bottom:0;padding:14px;color:#FFF;font-weight:800;font-size:16px;z-index:1;
  background:linear-gradient(180deg,rgba(8,11,7,0),rgba(8,11,7,.86))}
@media(min-width:820px){.cov{grid-template-columns:repeat(4,1fr)}}

/* The vehicle gallery is the one place on the site where the photograph is the
   argument, so it runs two across at full brightness instead of four across
   dimmed behind a caption. */
.cov--big{gap:16px;grid-template-columns:1fr}
@media(min-width:760px){.cov--big{grid-template-columns:repeat(2,1fr)}}
.cov--big .city{min-height:0;aspect-ratio:16/10;background:var(--band)}
.cov--big .city img{opacity:1;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cov--big .city span{font-size:14.5px;font-weight:700;padding:26px 16px 14px;
  background:linear-gradient(180deg,rgba(8,11,7,0),rgba(8,11,7,.78))}
@media(max-width:759px){.cov--big .city{aspect-ratio:16/11}}

/* tables */
.tablewrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:820px;font-size:14px}
table.table-narrow{min-width:0}
th,td{text-align:start;padding:12px 14px;border-bottom:1px solid var(--hairline)}
thead th{background:var(--ink);color:var(--on-ink);font-family:"PlexMono",monospace;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:400;white-space:nowrap}
tbody th{font-weight:700;font-size:13.5px}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
tbody tr:nth-child(odd){background:var(--band)}
td.num{font-family:"PlexMono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.plus{color:var(--muted);font-size:12px}
tbody tr.rowgroup th{background:var(--ink);color:var(--on-ink);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;padding-block:9px}
[dir="rtl"] tbody tr.rowgroup th{letter-spacing:normal}
tbody tr.rowgroup:nth-child(odd){background:transparent}
.tag{display:inline-block;background:var(--band);border:1px solid var(--hairline);border-radius:var(--r-sm);
  padding:1px 7px;font-size:11px;font-weight:600;color:var(--muted);margin-inline-start:6px;white-space:nowrap}
[dir="rtl"] thead th,[dir="rtl"] .eyebrow{letter-spacing:normal}

/* filters + listing */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.chip{border:1px solid var(--hairline);background:var(--card);color:var(--text);border-radius:var(--r-sm);
  padding:8px 14px;font-size:13.5px;font-weight:700;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.listing-head{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.count{font-size:13.5px;color:var(--muted)}

/* forms */
.form{display:grid;gap:16px;background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:22px}
.form .row{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:680px){.form .row.two{grid-template-columns:1fr 1fr}.form .row.three{grid-template-columns:repeat(3,1fr)}}
.uot-legend{font-weight:800;font-size:17px;letter-spacing:-.02em;margin-bottom:14px;padding:0}
.progress{display:flex;gap:7px;flex-wrap:wrap;margin:0;padding:0;list-style:none;counter-reset:pstep}
.pstep{border-radius:var(--r-sm);padding:6px 12px;font-size:12.5px;font-weight:700;background:var(--band);color:var(--muted);
  counter-increment:pstep}
.pstep::before{content:counter(pstep) ". "}
.pstep.on{background:var(--ink);color:var(--on-ink)}
.pstep.done{background:var(--haram);color:var(--on-haram)}
fieldset{border:0;margin:0;padding:0;display:grid;gap:16px}
fieldset[hidden]{display:none}
.hint{font-size:12.5px;color:var(--muted)}
.uot-error:not(:empty){color:#B3261E;font-weight:600}
:root[data-theme="dark"] .uot-error:not(:empty){color:#FF8A80}
.formnote{border-inline-start:3px solid var(--gold);padding-inline-start:13px;font-size:13.5px;color:var(--muted)}
.uot-actions{display:flex;gap:10px;flex-wrap:wrap}
.uot-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* trip type chooser */
.uot-triptypes{display:grid;gap:9px;grid-template-columns:1fr}
@media(min-width:600px){.uot-triptypes{grid-template-columns:repeat(3,1fr)}}
.uot-trip{position:relative;display:block;cursor:pointer}
.uot-trip input{position:absolute;opacity:0;width:1px;height:1px}
.uot-trip span{display:grid;gap:3px;border:1px solid var(--hairline);border-radius:var(--r);padding:13px 15px;background:var(--paper)}
.uot-trip strong{font-size:14.5px;font-weight:800}
.uot-trip small{font-size:12.5px;color:var(--muted)}
.uot-trip input:checked + span{border-color:var(--haram);box-shadow:inset 0 0 0 1px var(--haram);background:var(--band)}
.uot-trip input:focus-visible + span{outline:3px solid var(--gold);outline-offset:2px}

/* vehicle chooser */
.uot-veh-lead{font-size:13.5px;color:var(--muted)}
.uot-vehpick{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:560px){.uot-vehpick{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.uot-vehpick{grid-template-columns:repeat(3,1fr)}}
.uot-vcard{position:relative;display:block;cursor:pointer}
.uot-vcard input{position:absolute;opacity:0;width:1px;height:1px}
.uot-vcard__in{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--hairline);border-radius:var(--r);
  overflow:hidden;background:var(--paper);height:100%}
.uot-vcard__in img{width:100%;height:120px;object-fit:cover;background:var(--ink)}
/* Shown until a vehicle has a photograph, so a new class is bookable at once. */
.uot-vcard__seats{height:120px;background:var(--ink);color:#FFF;display:grid;place-content:center;
  text-align:center;line-height:1.1}
.uot-vcard__seats b{display:block;font-size:2rem;font-weight:800;letter-spacing:-.04em}
.uot-vcard__seats{font-family:"PlexMono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.veh-media .seatpad{position:absolute;inset:0;display:grid;place-items:center;color:#FFF;text-align:center}
.veh-media .seatpad b{display:block;font-size:2.6rem;font-weight:800;letter-spacing:-.05em;line-height:1}
.veh-media .seatpad span span{display:block;font-family:"PlexMono",ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-top:6px}
.uot-vcard__body{display:grid;gap:3px;padding:12px 13px;align-content:start}
.uot-vcard__name{font-weight:800;font-size:14.5px}
.uot-vcard__spec{font-size:12px;color:var(--muted)}
.uot-vcard__fare{font-family:"PlexMono",monospace;font-variant-numeric:tabular-nums;font-size:18px;font-weight:700;margin-top:4px}
.uot-vcard__flag{font-size:11.5px;color:var(--muted);line-height:1.4}
.uot-vcard input:checked + .uot-vcard__in{border-color:var(--haram);box-shadow:inset 0 0 0 1px var(--haram)}
.uot-vcard input:focus-visible + .uot-vcard__in{outline:3px solid var(--gold);outline-offset:2px}
.uot-vcard.is-small .uot-vcard__in{opacity:.55}
.uot-vcard.is-small .uot-vcard__flag{color:#B3261E}
:root[data-theme="dark"] .uot-vcard.is-small .uot-vcard__flag{color:#FF8A80}

/* dropdown drawn by us, so its menu cannot escape the page */
.uot-select{position:relative}
.uot-select select{display:none}
.uot-select__button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  font:inherit;font-size:15px;text-align:start;color:var(--text);background:var(--paper);
  border:1px solid var(--hairline);border-radius:var(--r-sm);padding:11px 12px;cursor:pointer;min-height:44px}
.uot-select__button:hover{border-color:var(--muted)}
.uot-select__button:focus{outline:none}
.uot-select__button:focus-visible{border-color:var(--text);box-shadow:0 0 0 3px var(--focus)}
.uot-select__button svg{flex:0 0 auto;color:var(--muted)}
.uot-select__value{overflow-wrap:break-word;line-height:1.3}
.uot-select__list{position:absolute;z-index:30;inset-inline:0;top:calc(100% + 4px);
  background:var(--card);border:1px solid var(--hairline);border-radius:var(--r);box-shadow:var(--shadow);
  max-height:min(320px,60vh);overflow-y:auto;padding:5px;overscroll-behavior:contain}
.uot-select__group{font-family:"PlexMono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);padding:10px 11px 5px}
[dir="rtl"] .uot-select__group{letter-spacing:normal;font-family:inherit;font-size:11.5px}
.uot-select__option{padding:9px 11px;border-radius:var(--r-sm);cursor:pointer;font-size:14.5px;line-height:1.35;
  overflow-wrap:break-word}
.uot-select__option:hover,.uot-select__option.is-active{background:var(--band)}
.uot-select__option.is-chosen{font-weight:700;color:var(--haram)}

/* place picker: list, search and free typing in one field */
.uot-pick.is-searching .uot-select{display:none}
.uot-pick__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
.uot-pick__head label{min-width:0}
/* The toggle keeps to one line and never shrinks. Left to wrap it turned the
   label row into two rows on that field alone, and the whole column stepped
   down away from the fields beside it. */
.uot-pick__toggle{border:0;background:transparent;padding:0;cursor:pointer;font-size:11.5px;font-weight:700;
  color:var(--haram);text-decoration:underline;text-underline-offset:2px;white-space:nowrap;flex:0 0 auto}
.uot-pick__toggle:hover{color:var(--text)}
/* The .f grid already spaces this from the label; the margin made the searching
   state 7px taller than the list state, so the panel jumped on every toggle. */
.uot-pick__search{position:relative}
.uot-pick__search input{width:100%;font:inherit;font-size:15px;color:var(--text);background:var(--paper);
  border:1px solid var(--hairline);border-radius:var(--r-sm);padding:11px 12px}
.uot-pick__search input:focus{outline:none}
.uot-pick__search input:focus-visible{border-color:var(--text);box-shadow:0 0 0 3px var(--focus)}
.uot-pick__zone{font-size:11.5px;color:var(--haram);margin-top:5px;line-height:1.4}
.uot-pick__zone.is-warn{color:#B3261E}
:root[data-theme="dark"] .uot-pick__zone.is-warn{color:#FF8A80}
.uot-pick__zone:empty{display:none}
/* In the panel the zone note is lifted out of the flow. Left in it, the row of
   fields grew the moment an address resolved and everything below the panel
   moved down the page. */
.panel-body .uot-pick__zone{position:absolute;inset-inline:0;top:calc(100% + 5px);margin-top:0;z-index:4}

/* address autocomplete */
.uot-ac{position:relative}
.uot-ac__list{position:absolute;z-index:20;inset-inline:0;top:100%;margin-top:4px;list-style:none;padding:5px;
  background:var(--card);border:1px solid var(--hairline);border-radius:var(--r);box-shadow:var(--shadow);
  max-height:280px;overflow-y:auto}
.uot-ac__item{padding:9px 11px;border-radius:var(--r-sm);cursor:pointer;display:grid;gap:2px}
.uot-ac__item strong{font-size:14px;font-weight:700}
.uot-ac__item small{font-size:12px;color:var(--muted)}
.uot-ac__item:hover,.uot-ac__item.on{background:var(--band)}

/* summary + thank you */
.uot-summary{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;
  border:1px solid var(--hairline);border-radius:var(--r);padding:14px 16px;background:var(--band)}
.uot-done{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:30px 24px;
  display:grid;gap:14px;justify-items:start}
.uot-done:focus{outline:none}
.uot-done__mark{width:46px;height:46px;border-radius:var(--r);background:var(--haram);color:#FFF;display:grid;place-items:center}
.uot-done h2{font-size:clamp(1.4rem,1.15rem + 1.1vw,1.9rem)}
.uot-done p{color:var(--muted);font-size:15px;max-width:56ch}
.uot-done__meta{display:flex;flex-wrap:wrap;gap:10px 32px;margin:0}
.uot-done__meta div{display:grid;gap:2px}
.uot-done__meta dt{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.uot-done__meta dd{margin:0;font-size:19px;font-weight:700}

/* contact */
.contact-split{align-items:start}
.contact-aside{display:grid;gap:12px;align-content:start}
.contact-strong{font-size:16px;color:var(--text);font-weight:700}

/* vehicle page */
.vehicle-hero{border-radius:var(--r-lg);width:100%}
.vehicle-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.vehicle-thumbs img{border-radius:var(--r);width:100%}

/* link cols */
.foot-title{font-size:clamp(1.25rem,1.1rem + .8vw,1.55rem);margin-bottom:20px}
.links-grid{display:grid;gap:24px;grid-template-columns:1fr}
.links-grid h3{font-size:13px;margin-bottom:10px}
.links-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.links-grid li a{font-size:13.5px;color:var(--muted)}
.links-grid li a:hover{color:var(--haram);text-decoration:underline}
@media(min-width:760px){.links-grid{grid-template-columns:repeat(4,1fr)}}

/* footer */
.foot{background:var(--ink);color:var(--on-ink);padding-block:42px 0}
.foot-grid{display:grid;gap:24px;grid-template-columns:1fr;padding-bottom:32px}
.foot h3{font-size:13px;margin-bottom:10px;color:#FFF}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.foot a,.foot-plain{font-size:13.5px;color:rgba(247,244,236,.66)}
.foot a:hover{color:#FFF}
.foot .brand{margin-bottom:12px}
.foot-blurb{font-size:13.5px;color:rgba(247,244,236,.66);max-width:38ch}
.foot-bar{border-top:1px solid rgba(247,244,236,.14);padding-block:16px;display:flex;flex-wrap:wrap;
  gap:8px 20px;justify-content:space-between;font-size:12.5px;color:rgba(247,244,236,.55)}
@media(min-width:760px){.foot-grid{grid-template-columns:2fr 1fr 1fr 1.2fr}}

.wa-float{position:fixed;inset-block-end:20px;inset-inline-end:20px;width:52px;height:52px;border-radius:var(--r-lg);
  background:#25D366;display:grid;place-items:center;z-index:50;box-shadow:0 6px 20px rgba(0,0,0,.28)}
.uot-skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:100;background:var(--gold);color:var(--on-gold);
  padding:12px 18px;font-weight:700;border-radius:0 0 var(--r-sm) 0}
.uot-skip:focus{inset-inline-start:0}

/* fare tiles on the route pages */
.uot-tiles{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){.uot-tiles{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.uot-tiles{grid-template-columns:repeat(6,1fr)}}
.uot-tile{background:var(--band);border:1px solid var(--hairline);border-radius:var(--r);color:var(--text);
  display:grid;gap:5px;justify-items:center;padding:18px 10px 15px;text-align:center;transition:border-color 160ms ease}
.uot-tile:hover{border-color:var(--muted)}
.uot-tile__figure{font-family:"PlexMono",ui-monospace,monospace;font-variant-numeric:tabular-nums;
  font-size:1.45rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.uot-tile__label{color:var(--muted);font-size:12.5px;font-weight:600;line-height:1.35}

.uot-hide{display:none}

/* account */
.wrap-form{max-width:620px}
.acct-link{gap:6px;display:inline-flex;align-items:center}
@media(max-width:640px){.acct-link span{display:none}}
.acct-head{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-start;justify-content:space-between;margin-bottom:20px}
.acct-signout{margin:0}
.acct-switch{margin-top:16px;font-size:14.5px;color:var(--muted)}
.uot-note{border:1px solid var(--hairline);border-left:3px solid var(--muted);border-radius:var(--r);
  padding:14px 16px;font-size:14.5px;margin-bottom:20px;background:var(--card);display:grid;gap:10px;justify-items:start}
[dir="rtl"] .uot-note{border-left:1px solid var(--hairline);border-right:3px solid var(--muted)}
.uot-note--good{border-inline-start-color:var(--haram)}
.uot-note--bad{border-inline-start-color:#B3261E;color:#B3261E;font-weight:600}
:root[data-theme="dark"] .uot-note--bad{color:#FF8A80}
.uot-note--warn{border-inline-start-color:var(--gold)}
.uot-note p{margin:0}

.uot-empty{border:1px dashed var(--hairline);border-radius:var(--r-lg);padding:34px 24px;text-align:center;display:grid;gap:10px;justify-items:center}
.uot-empty h3{font-size:17px}
.uot-empty p{color:var(--muted);font-size:14.5px;max-width:44ch}

.acct-list{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:760px){.acct-list{grid-template-columns:repeat(2,1fr)}}
.acct-card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:18px;display:grid;gap:8px;align-content:start}
.acct-card__top{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between}
.acct-card h3{font-size:16.5px}
.acct-ref{font-size:12.5px;color:var(--muted);letter-spacing:.02em}
.acct-when{font-size:13px;color:var(--muted)}
.acct-status{font-size:13.5px;color:var(--text);line-height:1.5}
.acct-card__foot{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;
  border-top:1px solid var(--hairline);padding-top:12px;margin-top:4px}
.acct-card__foot b{font-size:18px}

.uot-status{display:inline-block;border-radius:var(--r-sm);padding:3px 10px;font-size:12px;font-weight:700;white-space:nowrap}
.uot-status--new{background:var(--gold);color:var(--on-gold)}
.uot-status--quoted{background:#DBE9F7;color:#0A4B78}
.uot-status--confirmed{background:var(--haram);color:var(--on-haram)}
.uot-status--completed{background:var(--band);color:var(--muted);border:1px solid var(--hairline)}
.uot-status--cancelled{background:#F7DBDB;color:#8A1F11}
:root[data-theme="dark"] .uot-status--quoted{background:#12314C;color:#BBD9F5}
:root[data-theme="dark"] .uot-status--cancelled{background:#3B1614;color:#FFB4AB}

.acct-detail{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:24px;display:grid;gap:16px}
.acct-detail__head{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:flex-start;justify-content:space-between}
.acct-detail__head h2{font-size:clamp(1.25rem,1.1rem + .8vw,1.6rem);margin-top:6px}
.acct-rows{display:grid;gap:0;margin:0}
.acct-rows div{display:grid;grid-template-columns:1fr;gap:2px;padding:11px 0;border-bottom:1px solid var(--hairline)}
.acct-rows div:last-child{border-bottom:0}
.acct-rows dt{font-size:12px;color:var(--muted)}
.acct-rows dd{margin:0;font-size:14.5px;font-weight:600}
@media(min-width:560px){.acct-rows div{grid-template-columns:180px 1fr;gap:16px;align-items:baseline}}
.acct-total{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;justify-content:space-between;
  background:var(--band);border-radius:var(--r);padding:14px 16px}
.acct-total b{font-size:22px}
.acct-receipt{border-top:1px solid var(--hairline);padding-top:18px;display:grid;gap:10px}
.acct-receipt h3{font-size:16px}
.acct-receipt p{font-size:14px;color:var(--muted);line-height:1.55}
.acct-details{margin-top:4px}

@media print{
  .top,.foot,.wa-float,.uot-skip,.back-link,.uot-actions,.acct-head,.band.tight+section{display:none!important}
  .acct-detail{border:0;padding:0}
  body{background:#fff;color:#000}
}

/* At 360px the brand, the switchers, the button and the burger add up to a
   couple of pixels more than the viewport, which is enough for a scrollbar. */
@media (max-width: 460px){
  .top .wrap{gap:8px;padding-inline:16px}
  .brand{font-size:14.5px;min-width:0}
  .top-actions{gap:6px}
  .lang{padding:6px 8px}
  .btn.sm{padding:8px 12px;font-size:13px}
}