/* 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}}