/* Quad bike tour pages, version 2 (12 October 2026).
An international booking-page layout (photo grid, a booking card beside
the content, sticky section tabs) with an Abu Dhabi touch: the eight
point star of Arabic geometry on the deep teal panels, a Kufi word, and
a dune line. Brand: Yellow #D5CC2E on the one action that matters,
Brand Green #27BDBE for ticks and stars, teal #0F6464 as the deep
colour, black, white and greys for everything else. Manrope. */
:root{--ink:#111;--ink-2:#3B4444;--muted:#5F6A69;--line:#E5E8E8;--soft:#F5F6F6;--teal:#0F6464;--teal-2:#0B4B4B;--teal-soft:#EAF4F4;--green:#27BDBE;--yellow:#D5CC2E;--orange:#F79420;--r:16px;--r-s:12px;--r-l:24px;--hdr:64px;--shadow:0 18px 40px -18px rgba(15,40,40,.28)}
@media(min-width:960px){:root{--hdr:84px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 64px)}
body{margin:0;background:#fff;color:var(--ink);font-family:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.6}
main img{max-width:100%;height:auto;display:block}
main a{color:var(--teal)}
main h1,main h2,main h3{color:var(--ink);font-weight:800;line-height:1.15;letter-spacing:-.02em;margin:0 0 .5em}
main h1{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.03em}
main h2{font-size:clamp(22px,2.4vw,28px)}
main h3{font-size:17px}
main p{margin:0 0 1em}
.wrap{width:min(1200px,100% - 32px);margin:0 auto}
.vh{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Brand panels: Brand Green or Yellow, with the Arabiers mark in white
halftone dots bleeding off the edge, as on the Arabiers banners */
.brand-green{background:var(--green);color:#0A3A3A;position:relative;overflow:hidden}
.brand-yellow{background:var(--yellow);color:#0A3A3A;position:relative;overflow:hidden}
.mark{position:absolute;pointer-events:none;width:auto;max-width:none!important;opacity:.55}
.brand-green>*:not(.mark),.brand-yellow>*:not(.mark){position:relative}

/* Breadcrumb */
.crumbs{font-size:13px;color:var(--muted);padding:14px 0 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 6px}
.crumbs li+li::before{content:"/";margin-right:6px;color:#C4CCCC}
.crumbs a{color:var(--ink);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:var(--muted)}

/* ---------- Top: title, then photos ---------- */
.top{display:flex;flex-direction:column;gap:16px;padding:14px 0 0}
.title .loc{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--teal);margin:0 0 8px}
.title .loc svg{width:15px;height:15px}
.title h1{margin:0 0 10px}
.trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:14px}
.trust li{margin:0;display:flex;align-items:center;gap:6px}
.trust a{display:inline-flex;align-items:center;gap:6px;color:var(--ink);text-decoration:none;min-height:32px}
.trust a:hover span{text-decoration:underline}
.trust .stars{color:var(--green);letter-spacing:1px;font-size:13px}
.trust img{height:20px;width:auto}
.trust .lic{color:var(--muted)}
.trust .lic b{color:var(--ink)}
@media(max-width:959px){.gal{order:-1;margin:0 -16px}}

/* Photos: a grid on desktop, a swipe row on phones */
.gal{position:relative}
.gal ul{list-style:none;margin:0;padding:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.gal ul::-webkit-scrollbar{display:none}
.gal li{flex:0 0 100%;margin:0;scroll-snap-align:start;aspect-ratio:4/3;background:var(--soft)}
.gal li button{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gal img{width:100%;height:100%;object-fit:cover}
.gal li:first-child img{object-position:50% 15%}
.gal .count{position:absolute;right:12px;bottom:12px;background:rgba(17,17,17,.72);color:#fff;font-size:13px;font-weight:700;border-radius:999px;padding:4px 10px}
.all{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:0;border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.all svg{width:16px;height:16px}
@media(min-width:960px){
	.gal ul{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:200px 200px;gap:8px;border-radius:var(--r-l);overflow:hidden}
	.gal li{aspect-ratio:auto}
	.gal li:first-child{grid-row:1 / span 2}
	.gal li:nth-child(n+6){display:none}
	.gal li button:hover img{transform:scale(1.03)}
	.gal img{transition:transform .4s}
	.gal .count{display:none}
	.all{left:auto;right:16px;bottom:16px}
}

/* ---------- Page: content and the booking card ---------- */
.page{display:grid;gap:28px;padding:24px 0 56px}
.page>*{min-width:0}
@media(min-width:960px){.page{grid-template-columns:minmax(0,1fr) 360px;gap:0 56px;padding-top:32px;align-items:start}.side{grid-column:2;grid-row:1 / span 2;position:sticky;top:calc(var(--hdr) + 16px)}.facts,.content{grid-column:1}}

/* Facts */
.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:640px){.facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.facts li{display:flex;align-items:center;gap:12px;margin:0;padding:12px;border:1px solid var(--line);border-radius:var(--r-s);min-width:0}
.facts .ic{flex:none;width:40px;height:40px;border-radius:10px;background:var(--teal-soft);display:flex;align-items:center;justify-content:center;color:var(--teal)}
.facts .ic svg{width:21px;height:21px}
.facts small{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.facts b{display:block;font-size:15px;line-height:1.25}

/* Booking card */
.card{border:1px solid var(--line);border-radius:var(--r-l);background:#fff;box-shadow:var(--shadow);overflow:hidden}
.card-h{padding:20px 22px 18px;position:relative}
.card-h p{margin:0}
.card-h .mark{right:-46px;top:-40px;height:210px}
.card-h small{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.card-h .p{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--teal)}
.card-h .p i{font-style:normal;font-size:15px;font-weight:800;margin-left:6px}
.card-h .u{font-size:14px;font-weight:600}
.card-h .tag{position:absolute;right:16px;top:16px;background:var(--teal);color:var(--yellow);font-size:12px;font-weight:800;border-radius:8px;padding:4px 10px}
.card-b{padding:18px 22px 22px}
.calc .lbl{display:block;font-size:13px;font-weight:800;margin:0 0 8px}
.durs{display:flex;gap:6px;margin-bottom:14px}
.durs input{position:absolute;opacity:0;pointer-events:none}
.durs label{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;padding:0 6px}
.durs input:checked+label{background:var(--ink);border-color:var(--ink);color:#fff}
.durs input:focus-visible+label{outline:2px solid var(--teal);outline-offset:2px}
.one{font-size:14px;margin:0 0 14px}
.calc select{width:100%;min-height:48px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit;font-size:16px;padding:0 12px;color:var(--ink);margin-bottom:14px}
.quote{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px dashed #CFD6D6;padding:14px 0 16px}
.quote span{font-size:14px;color:var(--muted)}
.quote b{display:block;font-size:22px;letter-spacing:-.02em;text-align:right;white-space:nowrap}
.quote em{display:block;font-style:normal;font-size:13px;color:var(--muted);text-align:right}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:54px;padding:0 22px;border-radius:10px;border:0;font:inherit;font-size:16px;font-weight:800;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn svg{width:20px;height:20px}
.btn-y{background:var(--teal);color:var(--yellow)}
.btn-y:hover{transform:translateY(-1px);box-shadow:0 10px 20px -10px rgba(15,100,100,.7);color:var(--yellow)}
.btn .arw{width:22px;height:22px}
.btn-w{background:#fff;color:#111}
.btn-w:hover{color:#111}
.btn-block{width:100%}
.terms{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.terms li{display:flex;gap:10px;margin:0;font-size:14px;line-height:1.4}
.terms li::before{content:"\2713";flex:none;width:20px;height:20px;border-radius:50%;background:var(--teal-soft);color:var(--teal);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.terms b{display:block}
.terms span{color:var(--muted)}

/* Section tabs */
.tabs{position:sticky;top:var(--hdr);z-index:20;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);margin:28px 0 0}
.tabs ol{list-style:none;margin:0;padding:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.tabs ol::-webkit-scrollbar{display:none}
.tabs li{margin:0;flex:none}
.tabs a{display:flex;align-items:center;min-height:48px;padding:0 12px;font-size:14px;font-weight:700;color:var(--muted);text-decoration:none;border-bottom:3px solid transparent}
.tabs a.on,.tabs a:hover{color:var(--ink);border-bottom-color:var(--ink)}
@media(max-width:959px){.tabs{margin:0 -16px;padding:0 8px}}

/* Content */
.content>section{padding-top:40px}
.lead{font-size:17px;color:var(--ink-2)}
.more:not(.open) .more-body{max-height:9.6em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.more-btn{border:0;background:none;padding:6px 0;font:inherit;font-weight:800;color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer;min-height:40px}
.hl{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hl li{margin:0;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600}
.hl li::before{content:"\2605";color:var(--green);margin-right:8px}

/* Experience panel: the local touch */
.exp{border-radius:var(--r-l);padding:30px 26px;position:relative;overflow:hidden}
.exp .mark{right:-150px;top:-30px;height:400px;opacity:.5}
@media(max-width:699px){.exp .mark{right:-170px;top:-70px;height:330px;opacity:.4}}
.exp .eyebrow{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:0 0 8px}
.exp h2{color:var(--teal);max-width:18ch;font-size:clamp(26px,3vw,36px)}
.exp p{color:#0A3A3A;max-width:46ch;font-weight:500}
.stats{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;position:relative}
@media(min-width:700px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stats li{margin:0;background:rgba(255,255,255,.9);border-radius:12px;padding:12px 14px}
.stats b{display:block;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--teal)}
.stats b i{font-style:normal;font-size:.6em;color:#0A3A3A;margin-left:3px}
.stats span{display:block;font-size:13px;color:#2E4A4A;margin-top:2px}

/* Prices */
.pgrid{display:grid;gap:14px;margin-top:16px}
@media(min-width:700px){.pgrid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}}
.pt{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
.pt caption{text-align:left;font-weight:800;font-size:15px;padding:0 0 8px}
.pt th,.pt td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:right}
.pt th:first-child{text-align:left;font-weight:600}
.pt thead th{background:var(--soft);font-size:12px;font-weight:800}
.pt tbody tr:last-child>*{border-bottom:0}
.pt td.pp{font-weight:800}
.note{font-size:14px;color:var(--muted);margin-top:12px}

/* Itinerary */
.itin{list-style:none;margin:18px 0 0;padding:0}
.itin li{position:relative;margin:0;padding:0 0 20px 44px}
.itin li::before{content:"";position:absolute;left:4px;top:4px;width:18px;height:18px;border-radius:50%;border:3px solid var(--teal);background:#fff}
.itin li:first-child::before,.itin li:last-child::before{background:var(--teal)}
.itin li::after{content:"";position:absolute;left:12px;top:26px;bottom:0;width:2px;background:repeating-linear-gradient(var(--line) 0 6px,transparent 6px 10px)}
.itin li:last-child{padding-bottom:0}
.itin li:last-child::after{display:none}
.itin small{display:block;font-size:13px;font-weight:800;color:var(--teal)}
.itin b{display:block;font-size:16px}
.itin span{display:block;font-size:14px;color:var(--muted)}

/* Included, not included, good to know */
.inc{display:grid;gap:14px;margin-top:16px}
@media(min-width:700px){.inc{grid-template-columns:1fr 1fr}}
.inc>div{border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.inc h3{font-size:16px;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.inc h3 svg{width:20px;height:20px}
.inc .yes h3 svg{color:var(--green)}
.inc .no h3 svg{color:var(--orange)}
.inc ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.inc li{margin:0;padding-left:22px;position:relative;font-size:15px;line-height:1.45}
.inc .yes li::before{content:"\2713";position:absolute;left:0;color:var(--green);font-weight:800}
.inc .no li::before{content:"\00D7";position:absolute;left:2px;color:var(--orange);font-weight:800}
.inc .know{grid-column:1 / -1;background:var(--soft);border-color:var(--soft)}
.inc .know ul{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 24px}
.inc .know li{padding-left:0}
.inc .know b{display:block;font-size:14px}
.inc .know span{font-size:14px;color:var(--muted)}

/* Promise */
.promise{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
@media(min-width:700px){.promise{grid-template-columns:1fr 1fr}}
.promise li{margin:0;display:flex;gap:14px;padding:18px;border-radius:var(--r);background:var(--teal-soft)}
.promise .n{flex:none;width:34px;height:34px;border-radius:10px;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center}
.promise .n svg{width:18px;height:18px}
.promise b{display:block;font-size:15px}
.promise span{display:block;font-size:14px;color:var(--ink-2);line-height:1.5}

/* Right for you */
.fit{display:grid;gap:12px;margin-top:16px}
@media(min-width:700px){.fit{grid-template-columns:1fr 1fr}}
.fit>div{border-radius:var(--r);padding:20px}
.fit .y{border:1.5px solid var(--green)}
.fit .n{border:1.5px dashed #E3B98A}
.fit h3{font-size:16px;margin:0 0 10px}
.fit ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fit li{margin:0;padding-left:18px;position:relative;font-size:15px;line-height:1.45}
.fit li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%}
.fit .y li::before{background:var(--green)}
.fit .n li::before{background:var(--orange)}

/* Reviews and the operator */
.quotes{display:grid;gap:12px;margin-top:16px}
@media(min-width:700px){.quotes{grid-template-columns:1fr 1fr}}
.quotes blockquote{margin:0;border:1px solid var(--line);border-radius:var(--r);padding:20px}
.quotes .st{color:var(--green);letter-spacing:2px;font-size:14px}
.quotes p{font-size:15px;color:var(--ink-2);margin:8px 0 12px}
.quotes cite{font-style:normal;font-size:13px;color:var(--muted)}
.quotes cite b{color:var(--ink)}
.op{display:grid;gap:18px;margin-top:14px;border-radius:var(--r-l);padding:24px;align-items:center}
.op .mark{right:-40px;bottom:-70px;height:260px}
@media(min-width:700px){.op{grid-template-columns:110px minmax(0,1fr) auto}}
.op>img:not(.mark){width:110px;height:110px;border-radius:50%;object-fit:cover;border:3px solid #fff}
.op h3{color:var(--teal);margin:0 0 4px;font-size:20px}
.op p{margin:0;color:#0A3A3A;font-size:14px;font-weight:500}
.op .btn{white-space:nowrap}

/* FAQ */
.faq{border-bottom:1px solid var(--line)}
.faq:first-of-type{border-top:1px solid var(--line);margin-top:10px}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;cursor:pointer;min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:16px;font-weight:700;margin:0;line-height:1.4;letter-spacing:0}
.faq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:18px}
.faq[open] summary::after{content:"\2212";background:var(--ink);border-color:var(--ink);color:#fff}
.faq p{padding:0 0 18px;margin:0;color:var(--ink-2);font-size:15px;max-width:70ch}

/* Other tours */
.others{background:var(--soft);padding:48px 0 56px}
.others h2{margin-bottom:6px}
.tours{display:grid;gap:14px;margin-top:20px}
@media(min-width:760px){.tours{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tour{display:flex;flex-direction:column;background:#fff;border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);border:1px solid var(--line);transition:transform .2s,box-shadow .2s}
.tour:hover{transform:translateY(-3px);box-shadow:var(--shadow);color:var(--ink)}
.tour .im{aspect-ratio:16/10;background:var(--line)}
.tour .im img{width:100%;height:100%;object-fit:cover}
.tour .b{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.tour b{font-size:16px;line-height:1.3}
.tour .s{font-size:14px;color:var(--muted)}
.tour .pr{margin-top:auto;padding-top:8px;font-size:14px}
.tour .pr strong{font-size:18px}

/* Photos dialog */
.dlg{width:min(1100px,100% - 24px);border:0;border-radius:var(--r-l);padding:0;max-width:90%;margin:auto}
.dlg::backdrop{background:rgba(0,0,0,.75)}
.dlg .top-b{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:#fff;border-bottom:1px solid var(--line);font-weight:800;z-index:1}
.dlg .x{min-width:44px;min-height:44px;border:0;background:var(--soft);border-radius:50%;font-size:22px;cursor:pointer}
.dlg .grid{display:grid;gap:10px;padding:16px;grid-template-columns:repeat(auto-fill,minmax(370px,1fr))}
.dlg img{width:100%;height:100%;border-radius:12px;display:block;object-fit:cover}
@media(max-width:760px){.dlg .grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr))}}

/* Phone booking bar */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(0,0,0,.08)}
.bar small{display:block;font-size:12px;color:var(--muted)}
.bar b{font-size:18px}
.bar .btn{min-height:48px;padding:0 20px}
@media(min-width:960px){.bar{display:none}}
@media(max-width:959px){body{padding-bottom:78px}}