{"id":414,"date":"2026-10-26T17:10:34","date_gmt":"2026-10-26T17:10:34","guid":{"rendered":"https:\/\/marrakechcompass.com\/?page_id=414"},"modified":"2026-10-28T11:27:18","modified_gmt":"2026-10-28T11:27:18","slug":"trips-and-excurssions-2","status":"publish","type":"page","link":"https:\/\/marrakechcompass.com\/?page_id=414","title":{"rendered":"TRIPS AND EXCURSSIONS"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"414\" class=\"elementor elementor-414\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-65e524e e-flex e-con-boxed e-con e-parent\" data-id=\"65e524e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d43980a elementor-widget elementor-widget-html\" data-id=\"d43980a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Custom Trips & Excursions \u2013 Marrakech Compass<\/title>\n<meta name=\"theme-color\" content=\"#B8860B\">\n<style>\n  :root {\n    --gold: #B8860B;\n    --gold-soft: #F4EBD6;\n    --ink: #2B2118;\n    --muted: #6E6255;\n    --bg: #FBF8F2;\n    --card: #FFFFFF;\n    --line: #E8DFCD;\n    --wa: #25D366;\n    --wa-dark: #1EBE5A;\n    --radius: 18px;\n    --shadow: 0 10px 30px rgba(43, 33, 24, 0.08);\n  }\n  * { box-sizing: border-box; }\n  html, body { margin: 0; padding: 0; }\n  body {\n    font-family: \"Segoe UI\", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;\n    color: var(--ink); background: var(--bg); line-height: 1.6;\n  }\n  h1, h2, h3 { font-family: Georgia, \"Times New Roman\", serif; line-height: 1.2; margin: 0 0 .5rem; }\n  a { color: inherit; }\n  button, input, select, textarea { font: inherit; }\n  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }\n  .eyebrow {\n    display: inline-block; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;\n    color: var(--gold); font-weight: 700; margin-bottom: 10px;\n  }\n\n  \/* ---------- Top bar ---------- *\/\n  .topbar { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; }\n  .brand { font-family: Georgia, serif; font-weight: 700; font-size: 1.2rem; color: var(--ink); text-decoration: none; }\n  .brand span { color: var(--gold); }\n  .topbar nav a { margin-left: 18px; text-decoration: none; color: var(--muted); font-size: .95rem; }\n  .topbar nav a:hover { color: var(--gold); }\n\n  \/* ---------- Hero slider ---------- *\/\n  .hero { position: relative; height: 480px; overflow: hidden; border-radius: 24px; margin: 6px auto 0; max-width: 1180px; }\n  .hero .slide {\n    position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease;\n    display: flex; align-items: center; color: #fff;\n    background-size: cover; background-position: center;\n  }\n  .hero .slide.active { opacity: 1; }\n  .hero .slide::before {\n    content: \"\"; position: absolute; inset: 0;\n    background: linear-gradient(90deg, rgba(20,14,8,.78) 0%, rgba(20,14,8,.35) 60%, rgba(20,14,8,.1) 100%);\n  }\n  .hero .copy { position: relative; padding: 0 56px; max-width: 640px; }\n  .hero .copy .eyebrow { color: #F1D28A; }\n  .hero h1 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 12px; }\n  .hero p { font-size: 1.05rem; opacity: .92; margin: 0 0 22px; }\n  .btn-row { display: flex; gap: 12px; flex-wrap: wrap; }\n  .pill {\n    display: inline-block; text-decoration: none; border-radius: 999px; padding: 12px 22px;\n    font-weight: 700; border: 0; cursor: pointer;\n  }\n  .pill.gold { background: var(--gold); color: #fff; }\n  .pill.wa { background: var(--wa); color: #fff; }\n  .pill.ghost { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.5); }\n\n  \/* Minimal slider arrows *\/\n  .hero .arrow {\n    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;\n    width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;\n    background: rgba(255,255,255,.18); color: #fff; font-size: 1rem; line-height: 1;\n    display: flex; align-items: center; justify-content: center; padding: 0;\n  }\n  .hero .arrow:hover { background: rgba(255,255,255,.35); }\n  .hero .arrow.prev { left: 14px; }\n  .hero .arrow.next { right: 14px; }\n  .hero .dots { position: absolute; bottom: 18px; left: 56px; z-index: 2; display: flex; gap: 8px; }\n  .dot { width: 8px; height: 8px; border-radius: 50%; border: 0; background: rgba(255,255,255,.5); cursor: pointer; padding: 0; }\n  .dot.active { background: #F1D28A; width: 22px; border-radius: 6px; }\n\n  \/* ---------- Intro ---------- *\/\n  .intro { text-align: center; padding: 56px 0 30px; }\n  .intro h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }\n  .intro p { color: var(--muted); max-width: 720px; margin: 0 auto; }\n\n  \/* ---------- Trips \/ Excursions switch ---------- *\/\n  .toggle-wrap { display: flex; justify-content: center; margin: 0 0 30px; }\n  .toggle {\n    display: inline-flex; background: #fff; border: 1px solid var(--line);\n    border-radius: 999px; padding: 5px; box-shadow: var(--shadow);\n  }\n  .toggle button,\n  .toggle button:hover,\n  .toggle button:focus,\n  .toggle button:active {\n    border: 0; background: transparent; cursor: pointer; color: var(--muted);\n    padding: 10px 26px; border-radius: 999px; font-weight: 600; box-shadow: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n  .toggle button[aria-pressed=\"true\"],\n  .toggle button[aria-pressed=\"true\"]:hover,\n  .toggle button[aria-pressed=\"true\"]:focus,\n  .toggle button[aria-pressed=\"true\"]:active {\n    background: var(--gold); color: #fff;\n  }\n  .toggle button:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 2px; }\n\n  \/* Colour theme follows the switch: gold for trips, teal for excursions *\/\n  body[data-mode=\"excursion\"] {\n    --gold: #1F7A8C;\n    --gold-soft: #DCEFF3;\n  }\n\n  \/* ---------- Main grid ---------- *\/\n  .grid {\n    display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px;\n    margin: 14px 0 70px; align-items: start;\n  }\n  .card {\n    background: var(--card); border: 1px solid var(--line);\n    border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px;\n  }\n\n  \/* Photo slideshow *\/\n  .gallery { position: relative; border-radius: 14px; overflow: hidden; height: 300px; margin-bottom: 20px; background: var(--gold-soft); }\n  .gallery .frame { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; background-size: cover; background-position: center; }\n  .gallery .frame.active { opacity: 1; }\n  .gallery .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }\n  .gallery .cap {\n    position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 12px;\n    background: linear-gradient(transparent, rgba(0,0,0,.6)); color: #fff; font-size: .92rem;\n  }\n  .gallery .nav {\n    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;\n    width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer;\n    background: rgba(255,255,255,.7); color: var(--ink); font-size: .95rem; line-height: 1;\n    display: flex; align-items: center; justify-content: center; padding: 0;\n  }\n  .gallery .nav:hover { background: rgba(255,255,255,.95); }\n  .gallery .nav.prev { left: 10px; }\n  .gallery .nav.next { right: 10px; }\n  .gallery .count {\n    position: absolute; top: 10px; right: 12px; z-index: 2; background: rgba(0,0,0,.45);\n    color: #fff; font-size: .78rem; padding: 3px 10px; border-radius: 999px;\n  }\n\n  .it-title { font-size: 1.6rem; margin-top: 4px; }\n  .it-meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; }\n  .badge { background: var(--gold-soft); color: #7A5600; border-radius: 999px; padding: 4px 12px; font-size: .82rem; font-weight: 600; }\n  .it-summary { color: var(--muted); margin: 0 0 18px; }\n  .timeline { list-style: none; margin: 0; padding: 0 0 0 6px; }\n  .timeline li { position: relative; padding: 0 0 20px 34px; border-left: 2px dashed var(--line); margin-left: 10px; }\n  .timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }\n  .timeline li::before {\n    content: \"\"; position: absolute; left: -9px; top: 3px; width: 16px; height: 16px;\n    border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft);\n  }\n  .timeline .time { font-size: .78rem; color: var(--gold); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }\n  .timeline h3 { font-size: 1.05rem; margin: 2px 0 4px; }\n  .timeline p { margin: 0; color: var(--muted); font-size: .94rem; }\n  .includes { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }\n  .includes h4 { margin: 0 0 6px; font-size: .95rem; }\n  .includes ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: .93rem; }\n  .note { font-size: .85rem; color: var(--muted); margin-top: 14px; font-style: italic; }\n\n  \/* Form *\/\n  .form-card { position: sticky; top: 20px; }\n  .form-card h2 { font-size: 1.5rem; }\n  .form-card > p { color: var(--muted); margin-top: 0; font-size: .95rem; }\n  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }\n  .field { margin-bottom: 14px; }\n  .field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; }\n  .field input, .field select, .field textarea {\n    width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px;\n    background: #fff; color: var(--ink);\n  }\n  .field select { background-color: #fff; }\n  .field textarea { resize: vertical; min-height: 80px; }\n  .field input:focus, .field select:focus, .field textarea:focus {\n    outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft);\n  }\n  .field .err { color: #B00020; font-size: .8rem; display: none; margin-top: 4px; }\n  .field.invalid .err { display: block; }\n  .field.invalid input, .field.invalid select { border-color: #B00020; }\n  .choice-hint { font-size: .8rem; color: var(--muted); margin-top: 4px; }\n\n  \/* Customise block *\/\n  .customise {\n    border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 4px 0 16px;\n    background: #FFFDF8;\n  }\n  .customise .label { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 8px; }\n  .customise select { margin-bottom: 12px; }\n  .extras { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n  .extras label {\n    display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 11px;\n    border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink);\n    font-size: .88rem; font-weight: 500; cursor: pointer;\n  }\n  .extras input[type=\"checkbox\"] { width: auto; min-height: auto; margin: 0; padding: 0; accent-color: var(--gold); }\n\n  .advice {\n    background: var(--gold-soft); border-radius: 14px; padding: 14px 16px; margin: 4px 0 18px;\n    border-left: 4px solid var(--gold);\n  }\n  .advice .label { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: #7A5600; font-weight: 700; }\n  .advice .veh { font-family: Georgia, serif; font-size: 1.15rem; margin: 2px 0 4px; }\n  .advice p { margin: 0; font-size: .9rem; color: #4A3D2E; }\n\n  .btn {\n    display: block; width: 100%; border: 0; border-radius: 12px; padding: 14px 18px;\n    font-weight: 700; font-size: 1rem; cursor: pointer; text-align: center; text-decoration: none;\n    transition: filter .2s;\n  }\n  .btn:hover { filter: brightness(.95); }\n  .btn.wa { background: var(--wa); color: #fff; }\n  .btn.wa:hover { background: var(--wa-dark); filter: none; }\n  .btn.mail { background: #fff; color: var(--gold); border: 1px solid var(--gold); margin-top: 10px; }\n  .fine { color: var(--muted); font-size: .8rem; text-align: center; margin: 12px 0 0; }\n  .sent { display: none; margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: #EAF5EA; color: #1E5B2A; font-size: .92rem; }\n  .sent.show { display: block; }\n\n  \/* Why section *\/\n  .why { padding: 10px 0 60px; }\n  .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }\n  .why-grid .card h3 { font-size: 1.1rem; }\n  .why-grid .card p { margin: 0; color: var(--muted); font-size: .94rem; }\n\n  footer { text-align: center; color: var(--muted); font-size: .85rem; padding: 26px 0 40px; border-top: 1px solid var(--line); }\n\n  @media (max-width: 880px) {\n    .grid { grid-template-columns: 1fr; }\n    .form-card { position: static; }\n    .why-grid { grid-template-columns: 1fr; }\n    .hero { height: 540px; }\n    .hero .copy { padding: 0 26px; }\n    .hero .dots { left: 26px; }\n    .topbar nav { display: none; }\n  }\n  @media (max-width: 520px) {\n    .row { grid-template-columns: 1fr; }\n    .card { padding: 20px; }\n    .hero { height: 580px; border-radius: 16px; }\n    .extras { grid-template-columns: 1fr; }\n  }\n\n  \/* ---------- Mobile polish ---------- *\/\n  html { -webkit-text-size-adjust: 100%; }\n  img { max-width: 100%; height: auto; }\n  input, select, textarea { font-size: 16px; }\n  select, input[type=\"date\"], input[type=\"text\"] { min-height: 46px; }\n  .btn, .pill { min-height: 48px; display: flex; align-items: center; justify-content: center; }\n  .toggle button { min-height: 44px; }\n  .dot { width: 7px; height: 7px; }\n  .dot.active { width: 20px; }\n\n  @media (max-width: 600px) {\n    .wrap { padding: 0 14px; }\n    .topbar { padding: 14px 14px; }\n    .brand { font-size: 1.05rem; }\n    .hero { height: 580px; border-radius: 14px; }\n    .hero .copy { padding: 0 20px; }\n    .hero h1 { font-size: 1.7rem; }\n    .hero p { font-size: .95rem; margin-bottom: 16px; }\n    .hero .arrow { width: 26px; height: 26px; font-size: .9rem; }\n    .hero .arrow.prev { left: 6px; }\n    .hero .arrow.next { right: 6px; }\n    .hero .dots { left: 20px; bottom: 14px; }\n    .btn-row .pill { flex: 1 1 100%; }\n    .intro { padding: 36px 0 22px; }\n    .intro h2 { font-size: 1.5rem; }\n    .toggle-wrap { margin-bottom: 22px; }\n    .toggle { display: flex; width: 100%; max-width: 380px; }\n    .toggle button { flex: 1; padding: 12px 8px; font-size: .98rem; }\n    .grid { gap: 18px; margin-bottom: 40px; }\n    .card { padding: 18px; border-radius: 16px; }\n    .gallery { height: 230px; border-radius: 12px; }\n    .gallery .nav { width: 24px; height: 24px; font-size: .85rem; }\n    .gallery .cap { font-size: .85rem; }\n    .it-title { font-size: 1.35rem; }\n    .it-meta { gap: 6px; }\n    .badge { font-size: .76rem; padding: 3px 10px; }\n    .timeline li { padding-left: 28px; }\n    .timeline h3 { font-size: 1rem; }\n    .form-card h2 { font-size: 1.3rem; }\n    .why { padding-bottom: 40px; }\n    .why-grid .card { padding: 18px; }\n    .topbar nav { display: none; }\n    footer { font-size: .8rem; padding: 22px 14px 34px; }\n  }\n  @media (max-width: 380px) {\n    .hero { height: 620px; }\n    .hero h1 { font-size: 1.5rem; }\n  }\n\n  \/* ===== WordPress full-width fix ===== *\/\n  .mc-page {\n    width: 100vw;\n    position: relative;\n    left: 50%;\n    right: 50%;\n    margin-left: -50vw;\n    margin-right: -50vw;\n    min-height: 100vh;\n    background: var(--bg);\n    color: var(--ink);\n    overflow-x: clip;\n    padding-bottom: 10px;\n  }\n  .mc-page button, .mc-page input, .mc-page select, .mc-page textarea { font-family: inherit; }\n  .mc-page .brand { color: var(--ink); }\n  .mc-page .intro h2,\n  .mc-page .card h2,\n  .mc-page .card h3,\n  .mc-page .card h4 { color: var(--ink); }\n  .mc-page .intro p,\n  .mc-page .card p,\n  .mc-page .card li { color: var(--muted); }\n  .mc-page .field label { color: var(--ink); }\n  .mc-page footer { color: var(--muted); }\n  .mc-page .btn { height: 52px; padding: 0 18px; margin: 0; box-sizing: border-box; line-height: 1.2; font-size: 1rem; }\n  .mc-page .btn.mail { margin-top: 12px; }\n  .mc-page .pill { height: 48px; padding: 0 22px; margin: 0; box-sizing: border-box; line-height: 1.2; }\n\n\n  \/* ===== FINAL LAYOUT FIX: centered itinerary + booking form ===== *\/\n  .mc-page {\n    width: 100%; max-width: 100%; margin: 0 auto;\n    left: auto; right: auto; position: relative;\n    overflow: hidden;\n  }\n  .mc-page .wrap {\n    width: min(100% - 48px, 1380px);\n    max-width: 1380px;\n    margin-left: auto; margin-right: auto;\n  }\n  .mc-page .grid#request {\n    width: min(100% - 48px, 1380px);\n    max-width: 1380px;\n    margin: 28px auto 70px;\n    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n    gap: clamp(20px, 3vw, 36px);\n    align-items: stretch;\n    justify-content: center;\n  }\n  .mc-page #request > .card {\n    width: 100%; min-width: 0; margin: 0;\n    align-self: stretch;\n  }\n  .mc-page #request .form-card { position: static; }\n  .mc-page #request .gallery { width: 100%; }\n\n  \/* Stop theme\/Elementor decorations from drawing square tiles over the hero slider *\/\n  .mc-page #hero,\n  .mc-page #hero .slide {\n    background-repeat: no-repeat !important;\n    background-size: cover !important;\n    background-position: center center !important;\n    image-rendering: auto;\n  }\n  .mc-page #hero { isolation: isolate; }\n  .mc-page #hero .slide {\n    border: 0 !important; outline: 0 !important; box-shadow: none !important;\n    background-clip: padding-box;\n  }\n  .mc-page #hero .slide::after { content: none !important; display: none !important; }\n  .mc-page #hero .slide::before { pointer-events: none; }\n  .mc-page #hero .copy,\n  .mc-page #hero .copy * { box-shadow: none; }\n  .mc-page #hero .arrow,\n  .mc-page #hero .dot { appearance: none; -webkit-appearance: none; }\n  .mc-page #hero .dot { border: 0 !important; outline: none; }\n\n  @media (max-width: 880px) {\n    .mc-page .wrap,\n    .mc-page .grid#request { width: min(100% - 32px, 720px); }\n    .mc-page .grid#request { grid-template-columns: minmax(0, 1fr); gap: 22px; }\n    .mc-page #request > .card { width: 100%; }\n    .mc-page #request .form-card { position: static; }\n  }\n  @media (max-width: 520px) {\n    .mc-page .wrap,\n    .mc-page .grid#request { width: calc(100% - 24px); }\n    .mc-page .grid#request { margin-top: 18px; }\n    .mc-page #hero { border-radius: 0 !important; margin-left: calc((100vw - 100%) \/ -2); width: 100vw; max-width: 100vw; }\n  }\n\n\n  \/* ===== FINAL FIX: true edge-to-edge page + remove stray square tiles ===== *\/\n  html, body {\n    width: 100% !important;\n    max-width: 100% !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    background: #fbf7f1 !important;\n    overflow-x: clip !important;\n  }\n  body { min-width: 0 !important; }\n  .mc-page {\n    width: 100vw !important;\n    max-width: none !important;\n    margin-left: calc(50% - 50vw) !important;\n    margin-right: 0 !important;\n    padding: 0 0 1px !important;\n    box-sizing: border-box !important;\n    background: #fbf7f1 !important;\n    overflow: hidden !important;\n  }\n  .mc-page .wrap {\n    width: min(100% - 48px, 1380px) !important;\n    max-width: 1380px !important;\n    margin-left: auto !important;\n    margin-right: auto !important;\n    box-sizing: border-box !important;\n  }\n  .mc-page .hero {\n    width: 100% !important;\n    max-width: none !important;\n    box-sizing: border-box !important;\n  }\n  \/* The unwanted gold square is not part of the intended slider controls.\n     Prevent theme-generated decorative pseudo-elements inside the hero. *\/\n  .mc-page #hero::before,\n  .mc-page #hero::after,\n  .mc-page #hero .slide::after,\n  .mc-page #hero .copy::before,\n  .mc-page #hero .copy::after,\n  .mc-page #hero .copy a::before,\n  .mc-page #hero .copy a::after,\n  .mc-page #hero .btn-row::before,\n  .mc-page #hero .btn-row::after {\n    content: none !important;\n    display: none !important;\n    width: 0 !important;\n    height: 0 !important;\n    background: none !important;\n    border: 0 !important;\n    box-shadow: none !important;\n  }\n  .mc-page #hero .copy a {\n    position: relative !important;\n    z-index: 3 !important;\n    display: inline-flex !important;\n    width: auto !important;\n    min-width: 0 !important;\n    min-height: 48px !important;\n    height: auto !important;\n    align-items: center !important;\n  }\n  @media (max-width: 880px) {\n    .mc-page { width: 100vw !important; margin-left: calc(50% - 50vw) !important; }\n    .mc-page .wrap { width: calc(100% - 32px) !important; }\n  }\n  @media (max-width: 520px) {\n    .mc-page .wrap { width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; }\n    .mc-page .hero { border-radius: 0 !important; }\n  }\n\n\n\n  \/* MOBILE HERO ALIGNMENT PATCH \u2014 Elementor-safe edge-to-edge slider *\/\n  .mc-page #hero {\n    position: relative !important;\n    overflow: hidden !important;\n    isolation: isolate !important;\n  }\n  .mc-page #hero .slide {\n    inset: 0 !important;\n    width: 100% !important;\n    min-width: 0 !important;\n    display: flex !important;\n    opacity: 0 !important;\n    visibility: hidden !important;\n    z-index: 0 !important;\n    transition: opacity .45s ease !important;\n  }\n  .mc-page #hero .slide.active {\n    opacity: 1 !important;\n    visibility: visible !important;\n    z-index: 1 !important;\n  }\n  .mc-page #hero .slide::before { z-index: 0 !important; }\n  .mc-page #hero .slide > * { position: relative; z-index: 1; }\n  .mc-page #hero .copy { width: 100%; min-width: 0; }\n  @media (max-width: 767px) {\n    .mc-page #hero {\n      width: 100vw !important;\n      max-width: 100vw !important;\n      position: relative !important;\n      left: 50% !important;\n      margin-left: -50vw !important;\n      margin-right: 0 !important;\n      height: auto !important;\n      min-height: 590px !important;\n      border-radius: 0 !important;\n      overflow: hidden !important;\n    }\n    .mc-page #hero .slide {\n      align-items: center !important;\n      padding: 42px 0 58px !important;\n      background-position: center center !important;\n    }\n    .mc-page #hero .copy {\n      width: 100% !important;\n      max-width: none !important;\n      padding: 0 38px !important;\n      margin: 0 !important;\n      overflow-wrap: anywhere;\n    }\n    .mc-page #hero .copy .eyebrow {\n      font-size: 11px !important;\n      letter-spacing: .14em !important;\n      line-height: 1.5 !important;\n    }\n    .mc-page #hero h1 {\n      font-size: clamp(30px, 8vw, 42px) !important;\n      line-height: 1.15 !important;\n      margin: 10px 0 14px !important;\n      overflow-wrap: normal !important;\n    }\n    .mc-page #hero p {\n      font-size: 16px !important;\n      line-height: 1.65 !important;\n      margin-bottom: 22px !important;\n    }\n    .mc-page #hero .btn-row {\n      display: flex !important;\n      flex-direction: column !important;\n      align-items: stretch !important;\n      gap: 10px !important;\n      width: 100% !important;\n    }\n    .mc-page #hero .btn-row .pill {\n      display: flex !important;\n      width: 100% !important;\n      min-height: 50px !important;\n      justify-content: center !important;\n      align-items: center !important;\n      text-align: center !important;\n      white-space: normal !important;\n      padding: 12px 16px !important;\n    }\n    .mc-page #hero .arrow.prev { left: 10px !important; }\n    .mc-page #hero .arrow.next { right: 10px !important; }\n    .mc-page #hero .dots { left: 38px !important; bottom: 18px !important; }\n  }\n  @media (max-width: 380px) {\n    .mc-page #hero .copy { padding-left: 30px !important; padding-right: 30px !important; }\n    .mc-page #hero h1 { font-size: 29px !important; }\n  }\n\n  \/* FINAL FIX: keep hero pagination as round dots + active gold pill, not square buttons *\/\n  .mc-page #hero .dots {\n    display: flex !important; align-items: center !important; justify-content: flex-start !important;\n    gap: 8px !important; width: auto !important; height: 18px !important;\n    padding: 0 !important; margin: 0 !important; background: transparent !important;\n    border: 0 !important; box-shadow: none !important;\n  }\n  .mc-page #hero .dots button.dot,\n  .mc-page #hero .dots .dot {\n    appearance: none !important; -webkit-appearance: none !important;\n    display: block !important; flex: 0 0 14px !important;\n    width: 14px !important; min-width: 14px !important; max-width: 14px !important;\n    height: 14px !important; min-height: 14px !important; max-height: 14px !important;\n    aspect-ratio: 1 \/ 1 !important; padding: 0 !important; margin: 0 !important;\n    border: 0 !important; border-radius: 50% !important;\n    background: rgba(255,255,255,.52) !important; color: transparent !important;\n    box-shadow: none !important; outline: none !important; text-indent: -9999px !important;\n    line-height: 0 !important; font-size: 0 !important; cursor: pointer !important;\n    transform: none !important; transition: width .2s ease, background .2s ease !important;\n  }\n  .mc-page #hero .dots button.dot.active,\n  .mc-page #hero .dots .dot.active {\n    flex-basis: 40px !important; width: 40px !important; min-width: 40px !important;\n    max-width: 40px !important; height: 14px !important; min-height: 14px !important;\n    max-height: 14px !important; aspect-ratio: auto !important;\n    border-radius: 999px !important; background: #F1D28A !important;\n  }\n\n\n  \/* ===== HERO DESIGN INSPIRED BY THE EVENTS PAGE (page_id=375) ===== *\/\n  .mc-page #hero {\n    position: relative !important;\n    width: 100% !important;\n    max-width: 1380px !important;\n    height: clamp(500px, 52vw, 650px) !important;\n    margin: 8px auto 0 !important;\n    border-radius: 0 0 28px 28px !important;\n    overflow: hidden !important;\n    isolation: isolate !important;\n    background: #29291c !important;\n  }\n  .mc-page #hero .slide {\n    inset: 0 !important;\n    padding: 0 !important;\n    display: flex !important;\n    align-items: center !important;\n    background-size: cover !important;\n    background-position: center !important;\n    background-repeat: no-repeat !important;\n  }\n  .mc-page #hero .slide::before {\n    content: \"\" !important;\n    display: block !important;\n    position: absolute !important;\n    inset: 0 !important;\n    z-index: 0 !important;\n    background: linear-gradient(90deg, rgba(25,22,14,.82) 0%, rgba(25,22,14,.58) 48%, rgba(25,22,14,.12) 100%) !important;\n  }\n  .mc-page #hero .copy {\n    width: min(760px, 76%) !important;\n    max-width: 760px !important;\n    margin: 0 !important;\n    padding: 48px clamp(32px, 7vw, 92px) 72px !important;\n    position: relative !important;\n    z-index: 2 !important;\n    overflow-wrap: normal !important;\n  }\n  .mc-page #hero .copy .eyebrow {\n    display: block !important;\n    color: #e6c778 !important;\n    font-size: 12px !important;\n    font-weight: 800 !important;\n    letter-spacing: .2em !important;\n    line-height: 1.5 !important;\n    margin-bottom: 18px !important;\n  }\n  .mc-page #hero h1 {\n    color: #fffaf0 !important;\n    font-family: Georgia, 'Times New Roman', serif !important;\n    font-size: clamp(38px, 5.1vw, 68px) !important;\n    font-weight: 500 !important;\n    letter-spacing: -.035em !important;\n    line-height: 1.08 !important;\n    margin: 0 0 22px !important;\n    max-width: 720px !important;\n  }\n  .mc-page #hero p {\n    color: rgba(255,250,240,.9) !important;\n    font-size: clamp(16px, 1.35vw, 19px) !important;\n    line-height: 1.75 !important;\n    max-width: 620px !important;\n    margin: 0 0 30px !important;\n  }\n  .mc-page #hero .btn-row {\n    display: flex !important;\n    flex-direction: row !important;\n    flex-wrap: wrap !important;\n    align-items: center !important;\n    gap: 12px !important;\n    width: auto !important;\n  }\n  .mc-page #hero .btn-row .pill {\n    display: inline-flex !important;\n    width: auto !important;\n    min-width: 0 !important;\n    min-height: 52px !important;\n    height: auto !important;\n    padding: 14px 26px !important;\n    border-radius: 999px !important;\n    justify-content: center !important;\n    align-items: center !important;\n    font-size: 15px !important;\n    font-weight: 700 !important;\n    line-height: 1.2 !important;\n    text-decoration: none !important;\n    white-space: nowrap !important;\n  }\n  .mc-page #hero .pill.gold { background: #bd8b13 !important; color: #fff !important; }\n  .mc-page #hero .pill.ghost { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.48) !important; color: #fff !important; }\n  .mc-page #hero .pill.wa { background: #25d366 !important; color: #fff !important; }\n  .mc-page #hero .arrow {\n    width: 42px !important; height: 42px !important; border-radius: 50% !important;\n    background: rgba(255,255,255,.2) !important; border: 1px solid rgba(255,255,255,.18) !important;\n    color: #fff !important; font-size: 22px !important; z-index: 4 !important;\n    backdrop-filter: blur(8px) !important;\n  }\n  .mc-page #hero .arrow.prev { left: 22px !important; }\n  .mc-page #hero .arrow.next { right: 22px !important; }\n  .mc-page #hero .hero-pagination {\n    position: absolute !important; left: clamp(32px, 7vw, 92px) !important; bottom: 26px !important;\n    z-index: 5 !important; display: flex !important; align-items: center !important; gap: 18px !important;\n    width: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important;\n    background: transparent !important; border: 0 !important; box-shadow: none !important;\n  }\n  .mc-page #hero .hero-count {\n    display: inline-block !important; color: #f3d78f !important; font-size: 12px !important;\n    font-weight: 800 !important; letter-spacing: .15em !important; white-space: nowrap !important;\n  }\n  .mc-page #hero .dots {\n    position: static !important; display: flex !important; align-items: center !important; gap: 8px !important;\n    width: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important;\n    background: transparent !important; border: 0 !important; box-shadow: none !important;\n  }\n  .mc-page #hero .dot {\n    display: block !important; flex: 0 0 8px !important; width: 8px !important; min-width: 8px !important;\n    height: 8px !important; min-height: 8px !important; padding: 0 !important; margin: 0 !important;\n    border: 0 !important; border-radius: 50% !important; background: rgba(255,255,255,.55) !important;\n    box-shadow: none !important; transform: none !important;\n  }\n  .mc-page #hero .dot.active {\n    flex-basis: 24px !important; width: 24px !important; min-width: 24px !important;\n    height: 8px !important; border-radius: 99px !important; background: #f3d78f !important;\n  }\n  @media (max-width: 767px) {\n    .mc-page #hero {\n      width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 650px !important;\n      margin-left: calc(50% - 50vw) !important; margin-right: 0 !important; margin-top: 0 !important;\n      border-radius: 0 0 24px 24px !important;\n    }\n    .mc-page #hero .slide { align-items: center !important; padding: 0 !important; }\n    .mc-page #hero .slide::before {\n      background: linear-gradient(180deg, rgba(25,22,14,.45) 0%, rgba(25,22,14,.76) 48%, rgba(25,22,14,.9) 100%) !important;\n    }\n    .mc-page #hero .copy {\n      width: 100% !important; max-width: none !important; padding: 58px 28px 100px !important;\n      margin: 0 !important;\n    }\n    .mc-page #hero .copy .eyebrow { font-size: 10px !important; letter-spacing: .16em !important; margin-bottom: 16px !important; }\n    .mc-page #hero h1 { font-size: clamp(36px, 10vw, 48px) !important; line-height: 1.1 !important; margin-bottom: 18px !important; }\n    .mc-page #hero p { font-size: 16px !important; line-height: 1.65 !important; margin-bottom: 24px !important; }\n    .mc-page #hero .btn-row { flex-direction: column !important; align-items: stretch !important; width: 100% !important; gap: 10px !important; }\n    .mc-page #hero .btn-row .pill { width: 100% !important; min-height: 52px !important; white-space: normal !important; text-align: center !important; }\n    .mc-page #hero .arrow { width: 34px !important; height: 34px !important; top: auto !important; bottom: 22px !important; transform: none !important; }\n    .mc-page #hero .arrow.prev { left: auto !important; right: 74px !important; }\n    .mc-page #hero .arrow.next { right: 24px !important; }\n    .mc-page #hero .hero-pagination { left: 28px !important; bottom: 31px !important; gap: 12px !important; }\n  }\n  @media (max-width: 380px) {\n    .mc-page #hero { min-height: 680px !important; }\n    .mc-page #hero .copy { padding-left: 22px !important; padding-right: 22px !important; }\n    .mc-page #hero .hero-pagination { left: 22px !important; }\n    .mc-page #hero .arrow.prev { right: 68px !important; }\n    .mc-page #hero .arrow.next { right: 18px !important; }\n  }\n\n\n\n  \/* ===== HERO FULL BLEED: edge-to-edge like Events page ===== *\/\n  .mc-page #hero,\n  .mc-page .hero#hero {\n    display: block !important;\n    position: relative !important;\n    width: 100vw !important;\n    max-width: 100vw !important;\n    min-width: 100vw !important;\n    left: 50% !important;\n    right: auto !important;\n    transform: translateX(-50%) !important;\n    margin: 0 !important;\n    margin-top: 6px !important;\n    border-radius: 0 !important;\n    overflow: hidden !important;\n    box-sizing: border-box !important;\n  }\n  .mc-page #hero .slide {\n    width: 100% !important;\n    max-width: none !important;\n    border-radius: 0 !important;\n    background-size: cover !important;\n    background-position: center center !important;\n    background-repeat: no-repeat !important;\n  }\n  .mc-page #hero .copy {\n    width: min(100% - 48px, 1320px) !important;\n    max-width: 1320px !important;\n    margin: 0 auto !important;\n    padding: 0 !important;\n    box-sizing: border-box !important;\n  }\n  .mc-page #hero .dots { left: max(24px, calc((100vw - 1320px) \/ 2)) !important; }\n  .mc-page #hero .arrow.prev { left: 20px !important; }\n  .mc-page #hero .arrow.next { right: 20px !important; }\n  @media (max-width: 767px) {\n    .mc-page #hero,\n    .mc-page .hero#hero {\n      width: 100vw !important;\n      max-width: 100vw !important;\n      min-width: 100vw !important;\n      height: 600px !important;\n      margin-top: 0 !important;\n      border-radius: 0 !important;\n      left: 50% !important;\n      transform: translateX(-50%) !important;\n    }\n    .mc-page #hero .copy {\n      width: calc(100% - 48px) !important;\n      max-width: none !important;\n      padding: 0 !important;\n    }\n    .mc-page #hero .dots { left: 24px !important; bottom: 20px !important; }\n    .mc-page #hero .arrow.prev { left: 12px !important; }\n    .mc-page #hero .arrow.next { right: 12px !important; }\n  }\n  @media (max-width: 380px) {\n    .mc-page #hero,\n    .mc-page .hero#hero { height: 640px !important; }\n    .mc-page #hero .copy { width: calc(100% - 40px) !important; }\n  }\n\n\n  \/* CLEAN HEADER + HERO STARTS AT TOP *\/\n  .mc-page .topbar { display: none !important; }\n  .mc-page { margin-top: 0 !important; padding-top: 0 !important; }\n  .mc-page > .hero-wrap {\n    display: block !important;\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n  }\n  .mc-page #hero {\n    margin-top: 0 !important;\n    margin-bottom: 0 !important;\n    border-radius: 0 !important;\n    width: 100vw !important;\n    max-width: 100vw !important;\n    position: relative !important;\n    left: 50% !important;\n    margin-left: -50vw !important;\n    margin-right: 0 !important;\n  }\n  \/* Remove Elementor spacing directly around the HTML widget when supported *\/\n  body:has(.mc-page) .elementor-widget-html,\n  body:has(.mc-page) .elementor-widget-html > .elementor-widget-container {\n    margin-top: 0 !important;\n    padding-top: 0 !important;\n  }\n  @media (max-width: 767px) {\n    .mc-page > .hero-wrap { padding: 0 !important; }\n    .mc-page #hero { margin-top: 0 !important; border-radius: 0 !important; }\n  }\n\n<\/style>\n<\/head>\n<body data-mode=\"trip\">\n<div class=\"mc-page\">\n\n<!-- MAIN SLIDER: starts immediately at the top of this page section -->\n<section class=\"hero-wrap\">\n  <div class=\"hero\" id=\"hero\">\n    <div class=\"slide active\" style=\"background-image: linear-gradient(135deg,#7A4E12,#D89B3B 55%,#F3D9A4);\">\n      <!-- To use a photo, replace the background-image with: url('YOUR-PHOTO-URL') -->\n      <div class=\"copy\">\n        <span class=\"eyebrow\">Private transport in Morocco<\/span>\n        <h1>Your journey, your route. We drive.<\/h1>\n        <p>Clean vehicles and professional drivers for private transfers and tailored trips across Morocco.<\/p>\n        <div class=\"btn-row\">\n          <a class=\"pill gold\" href=\"#request\">Request a quote<\/a>\n          <a class=\"pill ghost\" href=\"#inspiration\">See inspiration<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n    <div class=\"slide\" style=\"background-image: linear-gradient(135deg,#2E3B4E,#5E7A8F 55%,#C9D8E2);\">\n      <div class=\"copy\">\n        <span class=\"eyebrow\">Fully customised<\/span>\n        <h1>Tell us where you want to go.<\/h1>\n        <p>Every journey is designed with you. The routes shown are ideas to inspire, and we adapt them to your time, your interests and your group.<\/p>\n        <div class=\"btn-row\">\n          <a class=\"pill gold\" href=\"#request\">Build my trip<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n    <div class=\"slide\" style=\"background-image: linear-gradient(135deg,#4A5A2C,#8FA15A 55%,#E6E8C8);\">\n      <div class=\"copy\">\n        <span class=\"eyebrow\">Vehicles for every group<\/span>\n        <h1>From 1 traveller to 17 and beyond.<\/h1>\n        <p>Vans, 4x4s and minibuses. Tell us your group size and destination, and we advise the right vehicle.<\/p>\n        <div class=\"btn-row\">\n          <a class=\"pill wa\" href=\"https:\/\/wa.me\/212661311057\" target=\"_blank\" rel=\"noopener\">WhatsApp us<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <button class=\"arrow prev\" id=\"hero-prev\" aria-label=\"Previous slide\">\u2039<\/button>\n    <button class=\"arrow next\" id=\"hero-next\" aria-label=\"Next slide\">\u203a<\/button>\n    <div class=\"hero-pagination\"><span class=\"hero-count\" id=\"hero-count\">01 \/ 03<\/span><div class=\"dots\" id=\"hero-dots\" aria-label=\"Choose slide\"><\/div><\/div>\n  <\/div>\n<\/section>\n\n<!-- INTRO -->\n<section class=\"wrap intro\" id=\"inspiration\">\n  <span class=\"eyebrow\">Customised by design<\/span>\n  <h2>Let these journeys inspire your own<\/h2>\n  <p>Browse our sample trips and excursions. Pick one in the form to see its photos and route, then customise it with the options below or tell us what you would like to change.<\/p>\n<\/section>\n\n<div class=\"toggle-wrap\">\n  <div class=\"toggle\" role=\"group\" aria-label=\"Choose category\">\n    <button type=\"button\" id=\"btn-trips\" aria-pressed=\"true\" data-type=\"trip\">Trips<\/button>\n    <button type=\"button\" id=\"btn-excursions\" aria-pressed=\"false\" data-type=\"excursion\">Excursions<\/button>\n  <\/div>\n<\/div>\n\n<!-- MAIN: left = photos + itinerary, right = form -->\n<main class=\"wrap grid\" id=\"request\">\n\n  <section class=\"card\" aria-live=\"polite\">\n    <div class=\"gallery\" id=\"gallery\">\n      <span class=\"count\" id=\"gallery-count\"><\/span>\n      <button class=\"nav prev\" id=\"g-prev\" aria-label=\"Previous photo\">\u2039<\/button>\n      <button class=\"nav next\" id=\"g-next\" aria-label=\"Next photo\">\u203a<\/button>\n    <\/div>\n\n    <h2 class=\"it-title\" id=\"it-title\"><\/h2>\n    <div class=\"it-meta\" id=\"it-meta\"><\/div>\n    <p class=\"it-summary\" id=\"it-summary\"><\/p>\n\n    <h3 style=\"font-size:1.05rem;\">Proposed itinerary<\/h3>\n    <ol class=\"timeline\" id=\"timeline\"><\/ol>\n\n    <div class=\"includes\">\n      <h4>What we provide<\/h4>\n      <ul id=\"includes\"><\/ul>\n    <\/div>\n    <p class=\"note\">This is a proposal. Times, stops and distances can be adjusted to your wishes.<\/p>\n  <\/section>\n\n  <section class=\"card form-card\">\n    <span class=\"eyebrow\">Request a quote<\/span>\n    <h2>Build your trip<\/h2>\n    <p>No payment now. We confirm availability and the final price with you.<\/p>\n\n    <form id=\"booking\" novalidate>\n\n      <div class=\"field\" id=\"f-choice\">\n        <label for=\"choice\">Trip or excursion *<\/label>\n        <select id=\"choice\"><\/select>\n        <div class=\"choice-hint\">Choose an idea to inspire you, or pick \"Custom\" to describe your own.<\/div>\n        <div class=\"err\">Please choose a trip or excursion.<\/div>\n      <\/div>\n\n      <div class=\"advice\" id=\"advice\">\n        <div class=\"label\">Vehicle advice<\/div>\n        <div class=\"veh\" id=\"advice-veh\">\u2014<\/div>\n        <p id=\"advice-text\">Select a destination and number of travellers.<\/p>\n      <\/div>\n\n      <div class=\"row\">\n        <div class=\"field\" id=\"f-people\">\n          <label for=\"people\">Travellers *<\/label>\n          <select id=\"people\"><\/select>\n          <div class=\"err\">Please choose the number of travellers.<\/div>\n        <\/div>\n        <div class=\"field\" id=\"f-date\">\n          <label for=\"date\">Date *<\/label>\n          <input id=\"date\" type=\"date\">\n          <div class=\"err\">Please choose a valid date.<\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"field\">\n        <label for=\"pickup\">Pick-up point (hotel, riad or airport)<\/label>\n        <input id=\"pickup\" type=\"text\" placeholder=\"e.g. Riad in the Medina, Marrakech Menara airport\">\n      <\/div>\n\n      <div class=\"customise\">\n        <div class=\"label\">Customise your trip<\/div>\n        <label for=\"length\" style=\"font-size:.85rem;font-weight:600;display:block;margin-bottom:6px;\">Length<\/label>\n        <select id=\"length\">\n          <option value=\"As proposed\">As proposed<\/option>\n          <option value=\"Shorter\">Shorter<\/option>\n          <option value=\"Longer\">Longer<\/option>\n        <\/select>\n        <label style=\"font-size:.85rem;font-weight:600;display:block;margin-bottom:6px;\">Optional extras<\/label>\n        <div class=\"extras\" id=\"extras\"><\/div>\n      <\/div>\n\n      <div class=\"field\" id=\"f-name\">\n        <label for=\"name\">Full name *<\/label>\n        <input id=\"name\" type=\"text\" autocomplete=\"name\" placeholder=\"Your name\">\n        <div class=\"err\">Please enter your name.<\/div>\n      <\/div>\n\n      <div class=\"field\" id=\"f-contact\">\n        <label for=\"contact\">Phone \/ WhatsApp or email *<\/label>\n        <input id=\"contact\" type=\"text\" autocomplete=\"tel\" placeholder=\"+212 \u2026 or you@example.com\">\n        <div class=\"err\">Please enter a phone number or email.<\/div>\n      <\/div>\n\n      <div class=\"field\">\n        <label for=\"notes\">Your wishes and changes<\/label>\n        <textarea id=\"notes\" placeholder=\"Tell us what you would like to add, remove or change: days, stops, pace, interests\u2026\"><\/textarea>\n      <\/div>\n\n      <button class=\"btn wa\" type=\"submit\">Send on WhatsApp<\/button>\n      <button class=\"btn mail\" type=\"button\" id=\"send-mail\">Send by email<\/button>\n      <p class=\"fine\">Free to request \u00b7 We reply within the day<\/p>\n      <div class=\"sent\" id=\"sent\" role=\"status\">Your request is ready. Press send in WhatsApp or your email app.<\/div>\n    <\/form>\n  <\/section>\n<\/main>\n\n<!-- WHY -->\n<section class=\"wrap why\">\n  <div class=\"why-grid\">\n    <div class=\"card\"><h3>Private transfers<\/h3><p>From any major Moroccan airport or from your door to the destination you choose.<\/p><\/div>\n    <div class=\"card\"><h3>Clear vehicle advice<\/h3><p>We match the vehicle to your group size and the roads you will travel.<\/p><\/div>\n    <div class=\"card\"><h3>Fair, transparent quotes<\/h3><p>You know the price before you confirm. No surprises at the end of the journey.<\/p><\/div>\n  <\/div>\n<\/section>\n\n<footer>\n  <div class=\"wrap\">\n    Marrakech, Morocco \u00b7 <a href=\"tel:+212661311057\" style=\"color:var(--gold);\">+212 661 311 057<\/a> \u00b7 Admin@marrakechcompass.com\n  <\/div>\n<\/footer>\n\n<\/div>\n\n<script>\n  \/* ====== SETTINGS ====== *\/\n  const WHATSAPP_NUMBER = \"212661311057\";          \/\/ no + or spaces\n  const CONTACT_EMAIL   = \"Admin@marrakechcompass.com\";\n  const VEHICLES = { van: 6, minibus: 17, fourByFour: 4 }; \/\/ seats\n\n  \/* Optional extras offered in the \"Customise your trip\" block *\/\n  const EXTRAS = [\n    \"Private guide for part of the day\",\n    \"Hotel upgrade (4 or 5 star)\",\n    \"Camel trek at sunset\",\n    \"Cooking class\",\n    \"Hammam experience\",\n    \"Surf lesson\",\n    \"Extra stop of your choice\"\n  ];\n\n  \/* ====== CONTENT ======\n     Each item: type (trip \/ excursion \/ custom), name, duration, group,\n     rough (desert\/mountain\/unpaved roads), summary, images, steps, includes.\n     Helpers: G(colour1, colour2, caption) = photo placeholder, S(time, title, text) = itinerary step.\n     To use a real photo, put its URL in src (e.g. src: \"https:\/\/...jpg\").\n  *\/\n  const G = (a, b, caption) => ({ src: \"\", grad: `linear-gradient(135deg,${a},${b})`, caption });\n  const S = (time, title, text) => ({ time, title, text });\n\n  const ITEMS = [\n    \/* ---------- TRIPS ---------- *\/\n    {\n      id: \"desert-3d\", type: \"trip\", name: \"3-Day Sahara Desert Trip\", duration: \"3 days \/ 2 nights\",\n      group: \"Small groups & families\", rough: true,\n      summary: \"From Marrakech through the Atlas to the dunes of Merzouga, with stops along the way.\",\n      images: [G(\"#C8843A\",\"#F0C98A\",\"Erg Chebbi dunes at sunset\"), G(\"#8A5A2B\",\"#D9A76A\",\"Atlas Mountains pass\"), G(\"#B9733E\",\"#EED3A0\",\"Ait Benhaddou kasbah\")],\n      steps: [\n        S(\"Day 1 \u00b7 Morning\", \"Depart Marrakech\", \"Leave the city into the Atlas foothills, with a photo stop at the mountain pass.\"),\n        S(\"Day 1 \u00b7 Afternoon\", \"Ait Benhaddou\", \"Stop at the historic clay village, a UNESCO World Heritage site.\"),\n        S(\"Day 1 \u00b7 Evening\", \"Overnight near Ouarzazate\", \"Rest at a kasbah hotel of your choice before the drive east.\"),\n        S(\"Day 2 \u00b7 Morning\", \"Drive to Merzouga\", \"Cross palm groves and dry plateaus to the edge of the dunes.\"),\n        S(\"Day 2 \u00b7 Sunset\", \"Dunes at sunset\", \"Time at the dunes to watch the light change. Camel rides and camp can be arranged on request.\"),\n        S(\"Day 3\", \"Return to Marrakech\", \"Head back with stops of your choice.\")\n      ],\n      includes: [\"Vehicle and professional driver\", \"Fuel, tolls and driver costs\", \"Flexible stops along the route\", \"Overnight stays and activities arranged on request\"]\n    },\n    {\n      \/* Itinerary adapted from Explore Worldwide's \"Best of Morocco\" small group tour\n         (https:\/\/www.exploreworldwide.com\/holidays\/morocco-adventure-holiday).\n         Day descriptions are reworded. Check permission or credit the source before publishing commercially. *\/\n      id: \"best-of-morocco-15d\", type: \"trip\", name: \"15-Day Best of Morocco\", duration: \"15 days \/ 14 nights\",\n      group: \"Small groups & adventurers\", rough: true,\n      summary: \"A full tour from Casablanca through the imperial cities, the Middle Atlas, the Sahara dunes, the Todra Gorge and the coast back to Marrakech.\",\n      images: [G(\"#2F5D62\",\"#8FB8B5\",\"Fes medina\"), G(\"#C8843A\",\"#F0C98A\",\"Erg Chebbi dunes\"), G(\"#1F4E79\",\"#7FA6C9\",\"Essaouira coast\")],\n      steps: [\n        S(\"Day 1\", \"Arrive in Casablanca\", \"Welcome meeting with your tour leader in the evening.\"),\n        S(\"Day 2\", \"Casablanca and Rabat\", \"Visit the Hassan II Mosque, then drive to Rabat for the Hassan Tower, the Mausoleum of Mohammed V and the Kasbah des Oudaias.\"),\n        S(\"Day 3\", \"Meknes and Volubilis\", \"Explore Meknes' imperial gates and the Roman ruins of Volubilis, then continue to Fes.\"),\n        S(\"Day 4\", \"A full day in Fes\", \"Explore Fes el Jadid and the old medina of Fes el Bali with its souks and craft workshops.\"),\n        S(\"Day 5\", \"Middle Atlas to Erfoud\", \"Cross the Middle Atlas through Berber villages and the Ziz gorge to the desert town of Erfoud.\"),\n        S(\"Day 6\", \"Merzouga and desert camp\", \"Visit Rissani, then transfer to 4WD vehicles for the Erg Chebbi dunes and a night in a Berber camp.\"),\n        S(\"Day 7\", \"Sunrise and camel ride\", \"Watch the sunrise over the Sahara, ride a camel out of the dunes and drive to Tinerhir.\"),\n        S(\"Day 8\", \"Todra Gorge\", \"Optional hike to the Abdelali viewpoint, or explore the valley floor and river oasis.\"),\n        S(\"Day 9\", \"Rose valley and Ait Benhaddou\", \"Pass through El Kelaa M'Gouna and the Valley of 1000 Kasbahs to the clay village of Ait Benhaddou.\"),\n        S(\"Day 10\", \"Tizi n'Tichka to Ouirgane\", \"Cross Morocco's highest pass into the High Atlas, with a market stop and tea with a Berber family.\"),\n        S(\"Day 11\", \"Drive to Essaouira\", \"A long drive through Marrakech to the Atlantic port town of Essaouira.\"),\n        S(\"Day 12\", \"Free day in Essaouira\", \"Explore the walled medina, the Mellah and the beach.\"),\n        S(\"Day 13\", \"Marrakech highlights\", \"Guided tour of the Koutoubia, Bahia Palace and medina, then Jemaa el-Fna in the evening.\"),\n        S(\"Day 14\", \"Free time in Marrakech\", \"Explore the souks and markets at your own pace.\"),\n        S(\"Day 15\", \"Trip ends\", \"Depart from your hotel in Marrakech, or transfer to Marrakesh Menara Airport.\")\n      ],\n      includes: [\"Tour leader and professional driver\", \"Transport by bus and 4WD\", \"Hotel accommodation with breakfast daily\", \"One night in a desert camp with dinner\"]\n    },\n    {\n      id: \"merzouga-2d\", type: \"trip\", name: \"2-Day Merzouga Desert Camp\", duration: \"2 days \/ 1 night\",\n      group: \"Couples & families\", rough: true,\n      summary: \"A short desert escape: the High Atlas, the Ziz valley and a night camp among the dunes.\",\n      images: [G(\"#D39A54\",\"#F5D7A2\",\"Erg Chebbi dunes\"), G(\"#9C6A3E\",\"#E8C58F\",\"Desert camp at night\"), G(\"#7A5A2E\",\"#D9B27A\",\"Palm groves of the Ziz\")],\n      steps: [\n        S(\"Day 1 \u00b7 Morning\", \"Leave Marrakech\", \"Cross the Tizi n'Tichka pass towards the south.\"),\n        S(\"Day 1 \u00b7 Afternoon\", \"Ait Benhaddou stop\", \"Visit the clay kasbah village on the way.\"),\n        S(\"Day 1 \u00b7 Evening\", \"Dunes and camp\", \"Arrive at Merzouga for a sunset walk and a night at a desert camp.\"),\n        S(\"Day 2\", \"Sunrise and return\", \"Watch the sunrise on the dunes, then drive back to Marrakech.\")\n      ],\n      includes: [\"Vehicle and professional driver\", \"Fuel, tolls and driver costs\", \"Desert camp night arranged on request\"]\n    },\n    {\n      id: \"atlas-2d\", type: \"trip\", name: \"2-Day Atlas & Kasbah Route\", duration: \"2 days \/ 1 night\",\n      group: \"Couples & families\", rough: true,\n      summary: \"A short escape into the High Atlas, with valleys, Berber villages and kasbahs.\",\n      images: [G(\"#5B7B4E\",\"#A9C48E\",\"Atlas valleys\"), G(\"#7B6A4B\",\"#C9B68E\",\"Village terraces\"), G(\"#A46A3A\",\"#E3B37E\",\"Kasbah at golden hour\")],\n      steps: [\n        S(\"Day 1 \u00b7 Morning\", \"Leave Marrakech\", \"Head into the High Atlas along the winding mountain road.\"),\n        S(\"Day 1 \u00b7 Midday\", \"Ourika Valley\", \"A stop in the valley among walnut trees and village terraces.\"),\n        S(\"Day 1 \u00b7 Evening\", \"Overnight in the mountains\", \"Stay at a guesthouse with mountain views.\"),\n        S(\"Day 2\", \"Kasbah stop & return\", \"Visit a kasbah village on the way back to Marrakech.\")\n      ],\n      includes: [\"Private vehicle and driver\", \"Fuel, tolls and driver costs\", \"Flexible stops along the route\", \"Accommodation arranged on request\"]\n    },\n    {\n      id: \"imperial-4d\", type: \"trip\", name: \"Imperial Cities Tour\", duration: \"4 days \/ 3 nights\",\n      group: \"Couples & groups\", rough: false,\n      summary: \"Marrakech to Fes via Casablanca or Rabat, with stops in the imperial cities.\",\n      images: [G(\"#2F5D62\",\"#8FB8B5\",\"Fes medina rooftops\"), G(\"#1F4E79\",\"#7FA6C9\",\"Rabat coastline\"), G(\"#6A5B3D\",\"#D8C49A\",\"Meknes gateway\")],\n      steps: [\n        S(\"Day 1\", \"Marrakech to Casablanca\", \"Drive across the plains to Casablanca, with an optional stop in Rabat.\"),\n        S(\"Day 2\", \"Rabat to Meknes\", \"Continue north to Meknes and its historic gates.\"),\n        S(\"Day 3\", \"Meknes to Fes\", \"Short drive to Fes, arriving in time to explore the medina.\"),\n        S(\"Day 4\", \"Return to Marrakech\", \"Drive back south with stops of your choice.\")\n      ],\n      includes: [\"Vehicle and professional driver\", \"Fuel, tolls and driver costs\", \"Flexible stops along the route\", \"Hotels arranged on request\"]\n    },\n    {\n      id: \"fes-meknes-3d\", type: \"trip\", name: \"Fes & Meknes Heritage Trip\", duration: \"3 days \/ 2 nights\",\n      group: \"Couples & culture lovers\", rough: false,\n      summary: \"A focused journey through two of Morocco's imperial cities, rich in medinas, gates and craftsmanship.\",\n      images: [G(\"#2F5D62\",\"#8FB8B5\",\"Fes medina\"), G(\"#6A5B3D\",\"#D8C49A\",\"Meknes Bab Mansour\"), G(\"#8A6A3F\",\"#E8D2A6\",\"Volubilis ruins\")],\n      steps: [\n        S(\"Day 1\", \"Marrakech to Meknes\", \"Drive north across the plains, with a stop at the Volubilis Roman ruins.\"),\n        S(\"Day 2\", \"Meknes to Fes\", \"Explore the historic gates, then continue to the medina of Fes.\"),\n        S(\"Day 3\", \"Fes medina and return\", \"Free time in the medina, then drive back to Marrakech.\")\n      ],\n      includes: [\"Vehicle and professional driver\", \"Fuel, tolls and driver costs\", \"Flexible stops along the route\", \"Hotels arranged on request\"]\n    },\n    {\n      id: \"coast-3d\", type: \"trip\", name: \"Atlantic Coast Escape\", duration: \"3 days \/ 2 nights\",\n      group: \"Couples & friends\", rough: false,\n      summary: \"A relaxed route from Marrakech to the coast, with Essaouira and Agadir.\",\n      images: [G(\"#2A6F8F\",\"#9BD0E0\",\"Essaouira harbour\"), G(\"#C9A66B\",\"#F3E0B5\",\"Sandy beaches\"), G(\"#3B6E8E\",\"#B8DCE8\",\"Atlantic sunset\")],\n      steps: [\n        S(\"Day 1\", \"Marrakech to Essaouira\", \"Drive through argan forests to the seaside medina.\"),\n        S(\"Day 2\", \"Coastal drive to Agadir\", \"Follow the coast south with photo stops along the way.\"),\n        S(\"Day 3\", \"Return to Marrakech\", \"Head back inland, or continue to another stop you choose.\")\n      ],\n      includes: [\"Vehicle and professional driver\", \"Fuel, tolls and driver costs\", \"Flexible stops along the route\"]\n    },\n    {\n      id: \"tangier-4d\", type: \"trip\", name: \"Tangier & Northern Coast\", duration: \"4 days \/ 3 nights\",\n      group: \"Couples & friends\", rough: false,\n      summary: \"From the Strait of Gibraltar to the blue town of Chefchaouen, a route where Africa meets Europe.\",\n      images: [G(\"#1F4E79\",\"#7FA6C9\",\"Tangier bay\"), G(\"#2E6C8A\",\"#A7D1E3\",\"Chefchaouen streets\"), G(\"#3B6E8E\",\"#B8DCE8\",\"Cap Spartel coast\")],\n      steps: [\n        S(\"Day 1\", \"Marrakech to Rabat\", \"Drive to the capital, with a stop at the Kasbah of the Udayas.\"),\n        S(\"Day 2\", \"Rabat to Tangier\", \"Continue north to Tangier and the Cap Spartel viewpoint.\"),\n        S(\"Day 3\", \"Tangier to Chefchaouen\", \"Drive into the Rif mountains to the blue town.\"),\n        S(\"Day 4\", \"Return to Marrakech\", \"Head back south with stops of your choice.\")\n      ],\n      includes: [\"Vehicle and professional driver\", \"Fuel, tolls and driver costs\", \"Flexible stops along the route\", \"Hotels arranged on request\"]\n    },\n    {\n      id: \"chefchaouen-4d\", type: \"trip\", name: \"Chefchaouen Blue City Escape\", duration: \"4 days \/ 3 nights\",\n      group: \"Couples & friends\", rough: false,\n      summary: \"A popular northern route through the Middle Atlas to the blue-washed town of Chefchaouen in the Rif.\",\n      images: [G(\"#2E6C8A\",\"#A7D1E3\",\"Chefchaouen blue streets\"), G(\"#3B5F7F\",\"#B5D3E6\",\"Rif mountain views\"), G(\"#6C8FA6\",\"#E0EEF5\",\"Medina rooftops at dusk\")],\n      steps: [\n        S(\"Day 1\", \"Marrakech to Fes\", \"Drive north through the Middle Atlas, with a stop in the cedar forests of Ifrane.\"),\n        S(\"Day 2\", \"Fes medina\", \"Free time to explore the old medina, its tanneries and craft workshops.\"),\n        S(\"Day 3\", \"Fes to Chefchaouen\", \"Cross the Rif foothills to the blue town, with time to wander its alleys.\"),\n        S(\"Day 4\", \"Return to Marrakech\", \"Head back south with stops of your choice.\")\n      ],\n      includes: [\"Vehicle and professional driver\", \"Fuel, tolls and driver costs\", \"Flexible stops along the route\", \"Hotels arranged on request\"]\n    },\n    {\n      id: \"dades-todra-3d\", type: \"trip\", name: \"Dades & Todra Gorges Loop\", duration: \"3 days \/ 2 nights\",\n      group: \"Adventurers & families\", rough: true,\n      summary: \"Gorges, kasbahs and rose valleys on the southern route, one of the most photographed drives in Morocco.\",\n      images: [G(\"#9C5B2E\",\"#E7B87A\",\"Todra Gorge walls\"), G(\"#A56A3F\",\"#E9C69A\",\"Dades valley rock formations\"), G(\"#7E4A2A\",\"#D4A574\",\"Kasbah in the valley\")],\n      steps: [\n        S(\"Day 1 \u00b7 Morning\", \"Marrakech to Ouarzazate\", \"Cross the Tizi n'Tichka pass and visit Ait Benhaddou on the way.\"),\n        S(\"Day 1 \u00b7 Evening\", \"Overnight in the Dades\", \"Stay at a kasbah hotel in the Dades valley.\"),\n        S(\"Day 2\", \"Dades Gorges and Todra\", \"Hike among the rock formations, then drive to the towering walls of Todra Gorge.\"),\n        S(\"Day 3\", \"Return to Marrakech\", \"Head back over the Atlas with stops of your choice.\")\n      ],\n      includes: [\"Vehicle and professional driver\", \"Fuel, tolls and driver costs\", \"Flexible stops along the route\", \"Hotels and activities arranged on request\"]\n    },\n    {\n      id: \"grand-8d\", type: \"trip\", name: \"Grand Morocco Circuit\", duration: \"8 days \/ 7 nights\",\n      group: \"Couples, families & groups\", rough: true,\n      summary: \"A full loop through the Atlas, the desert, the Rif mountains and the imperial cities, returning to Marrakech.\",\n      images: [G(\"#9C5B2E\",\"#E7B87A\",\"Todra Gorge cliffs\"), G(\"#B0703C\",\"#F1CFA0\",\"Merzouga dunes\"), G(\"#2E6C8A\",\"#A7D1E3\",\"Chefchaouen blue streets\")],\n      steps: [\n        S(\"Day 1\", \"Marrakech to Ait Benhaddou\", \"Cross the Tizi n'Tichka pass and visit the clay kasbah village.\"),\n        S(\"Day 2\", \"Ouarzazate to Todra Gorge\", \"Drive through the Dades valley to the towering walls of Todra Gorge.\"),\n        S(\"Day 3\", \"Todra to Merzouga\", \"Cross the palm groves of the Ziz valley to the edge of the Erg Chebbi dunes.\"),\n        S(\"Day 4\", \"Dunes to Fes\", \"Watch sunrise on the dunes, then drive north through the Middle Atlas with a stop in Ifrane.\"),\n        S(\"Day 5\", \"Fes medina and drive to Chefchaouen\", \"Free time in the Fes medina, then continue to the blue town of Chefchaouen.\"),\n        S(\"Day 6\", \"Chefchaouen to Rabat\", \"Drive to the Atlantic coast and the capital, with a stop at the Kasbah of the Udayas.\"),\n        S(\"Day 7\", \"Rabat to Marrakech\", \"Return south through Casablanca to Marrakech.\"),\n        S(\"Day 8\", \"Departure\", \"Transfer to the airport or the destination of your choice.\")\n      ],\n      includes: [\"Vehicle and professional driver\", \"Fuel, tolls and driver costs\", \"Flexible stops along the route\", \"Hotels and activities arranged on request\"]\n    },\n    {\n      id: \"sahara-coast-6d\", type: \"trip\", name: \"Sahara & Atlantic Loop\", duration: \"6 days \/ 5 nights\",\n      group: \"Couples & small groups\", rough: true,\n      summary: \"Combine the Atlantic coast, the Anti-Atlas, the Dades valley and the Sahara in one journey.\",\n      images: [G(\"#1E5C7A\",\"#8FC6DA\",\"Essaouira coastline\"), G(\"#7A5A2E\",\"#D9B27A\",\"Anti-Atlas landscapes\"), G(\"#C0793E\",\"#F3D4A0\",\"Sahara sunrise\")],\n      steps: [\n        S(\"Day 1\", \"Marrakech to Essaouira\", \"Drive through argan forests to the seaside medina and its ramparts.\"),\n        S(\"Day 2\", \"Essaouira to Agadir\", \"Follow the coast south with photo stops along the way.\"),\n        S(\"Day 3\", \"Agadir to Ouarzazate\", \"Climb the Tizi n'Test pass into the Anti-Atlas and continue to Ouarzazate.\"),\n        S(\"Day 4\", \"Ait Benhaddou to Merzouga\", \"Visit the kasbah village, then cross the desert plateaus to the dunes.\"),\n        S(\"Day 5\", \"Dunes to Dades Gorge\", \"Watch sunrise on the dunes, then drive to the Dades valley and its rock formations.\"),\n        S(\"Day 6\", \"Dades to Marrakech\", \"Cross the Tizi n'Tichka pass and return to Marrakech.\")\n      ],\n      includes: [\"Vehicle and professional driver\", \"Fuel, tolls and driver costs\", \"Flexible stops along the route\", \"Hotels and activities arranged on request\"]\n    },\n\n    \/* ---------- EXCURSIONS ---------- *\/\n    {\n      id: \"medina-half\", type: \"excursion\", name: \"Marrakech Medina & Souk Walk\", duration: \"Half day\",\n      group: \"All ages\", rough: false,\n      summary: \"A guided stroll through the souks, palaces and gardens of the old city, with time for a mint tea break.\",\n      images: [G(\"#B8860B\",\"#F4D58D\",\"Souk lanterns\"), G(\"#8C6A1F\",\"#E8C97A\",\"Bahia Palace courtyard\"), G(\"#6B5320\",\"#D9B866\",\"Medina alleys\")],\n      steps: [\n        S(\"Morning\", \"Pick-up from your riad\", \"Meet your guide at the entrance of the medina.\"),\n        S(\"Late morning\", \"Souks and palaces\", \"Walk the souks, the Bahia Palace and the Ben Youssef Madrasa.\"),\n        S(\"Midday\", \"Mint tea break\", \"Stop for a traditional mint tea in a riad courtyard.\"),\n        S(\"Afternoon\", \"Return\", \"Walk back to your riad or be dropped at the gate.\")\n      ],\n      includes: [\"Local guide\", \"Entrance tickets arranged on request\", \"Flexible stops along the route\"]\n    },\n    {\n      id: \"agafay\", type: \"excursion\", name: \"Agafay Desert Sunset\", duration: \"Half day\",\n      group: \"All ages\", rough: true,\n      summary: \"A rocky desert landscape less than an hour from the city, ideal for sunset.\",\n      images: [G(\"#B9733E\",\"#F2C98D\",\"Agafay stony desert\"), G(\"#8E5B33\",\"#E2B27A\",\"Desert at dusk\"), G(\"#6E4C2E\",\"#D6A46B\",\"Sunset over the hills\")],\n      steps: [\n        S(\"Afternoon\", \"Pick-up from your riad\", \"Transfer to the Agafay stony desert.\"),\n        S(\"Late afternoon\", \"Desert stop\", \"Stop at the desert with time to explore on foot or by activity of your choice.\"),\n        S(\"Sunset\", \"Sunset viewpoint\", \"Watch the light turn gold over the hills.\"),\n        S(\"Evening\", \"Return transfer\", \"Drive back to Marrakech.\")\n      ],\n      includes: [\"Pick-up and return transfer\", \"Fuel, tolls and driver costs\", \"Activities and meals arranged on request\"]\n    },\n    {\n      id: \"ourika\", type: \"excursion\", name: \"Ourika Valley Day Trip\", duration: \"Full day\",\n      group: \"All ages\", rough: true,\n      summary: \"Waterfalls, Berber villages and mountain air just outside Marrakech.\",\n      images: [G(\"#3E6B4E\",\"#9CC6A2\",\"Ourika river valley\"), G(\"#4C7A5B\",\"#B3D5B8\",\"Waterfalls\"), G(\"#6B7F4B\",\"#C6D39B\",\"Village terraces\")],\n      steps: [\n        S(\"Morning\", \"Drive to the Atlas\", \"About an hour through the foothills to the valley.\"),\n        S(\"Late morning\", \"Waterfall stop\", \"Stop at the falls, with a walk along the river if you wish.\"),\n        S(\"Lunch\", \"Lunch stop\", \"Stop at a restaurant in the valley, at your own choice.\"),\n        S(\"Afternoon\", \"Return to Marrakech\", \"Drive back at the time you choose.\")\n      ],\n      includes: [\"Private transfer and driver\", \"Fuel, tolls and driver costs\", \"Flexible stops along the route\"]\n    },\n    {\n      id: \"ouzoud\", type: \"excursion\", name: \"Ouzoud Waterfalls\", duration: \"Full day\",\n      group: \"All ages\", rough: false,\n      summary: \"Morocco's highest waterfalls, with river views and swimming spots in summer.\",\n      images: [G(\"#2F6E6A\",\"#8CC9C0\",\"Ouzoud falls\"), G(\"#4B7F5E\",\"#A9D0A4\",\"Olive groves\"), G(\"#5B6F82\",\"#B7CDE0\",\"River below the falls\")],\n      steps: [\n        S(\"Morning\", \"Drive to Ouzoud\", \"A scenic route through olive groves and farmland.\"),\n        S(\"Late morning\", \"Waterfall stop\", \"Walk down to the falls at your own pace.\"),\n        S(\"Midday\", \"Lunch stop\", \"Stop for lunch near the river, at your choice.\"),\n        S(\"Afternoon\", \"Return to Marrakech\", \"Drive back at the time you choose.\")\n      ],\n      includes: [\"Private transfer and driver\", \"Fuel, tolls and driver costs\", \"Flexible stops along the route\"]\n    },\n    {\n      id: \"essaouira\", type: \"excursion\", name: \"Essaouira Coastal Day\", duration: \"Full day\",\n      group: \"All ages\", rough: false,\n      summary: \"A relaxed seaside medina with fresh seafood, ramparts and Atlantic breeze.\",\n      images: [G(\"#1E5C7A\",\"#8FC6DA\",\"Essaouira ramparts\"), G(\"#2D6D92\",\"#CDE8F0\",\"Blue and white medina\"), G(\"#7B9EB3\",\"#EFE2C0\",\"Harbour at dusk\")],\n      steps: [\n        S(\"Morning\", \"Drive to the coast\", \"About two and a half hours through argan forests to Essaouira.\"),\n        S(\"Late morning\", \"Medina stroll\", \"Explore the streets, galleries and craft shops.\"),\n        S(\"Lunch\", \"Lunch by the port\", \"Enjoy fresh seafood at the port, at your choice.\"),\n        S(\"Afternoon\", \"Return to Marrakech\", \"Drive back at the time you choose.\")\n      ],\n      includes: [\"Private transfer and driver\", \"Fuel, tolls and driver costs\", \"Flexible stops along the route\"]\n    },\n    {\n      id: \"toubkal-imlil\", type: \"excursion\", name: \"Imlil & Toubkal Trekking Base\", duration: \"Full day\",\n      group: \"Hikers & active groups\", rough: true,\n      summary: \"Drive into the High Atlas to Imlil, the gateway to Mount Toubkal, for a village walk or a guided trek.\",\n      images: [G(\"#4F6B45\",\"#A3BE8C\",\"Imlil village terraces\"), G(\"#5E6E7A\",\"#C2D2DC\",\"Mount Toubkal peaks\"), G(\"#6A7F4E\",\"#D2E0B0\",\"Walnut trees and river\")],\n      steps: [\n        S(\"Morning\", \"Drive into the High Atlas\", \"About ninety minutes on winding mountain roads to Imlil.\"),\n        S(\"Late morning\", \"Village walk\", \"Stroll among walnut trees and terraces, or start a guided trek to the refuges.\"),\n        S(\"Lunch\", \"Lunch in the mountains\", \"Mountain lunch at a guesthouse, at your choice.\"),\n        S(\"Afternoon\", \"Return to Marrakech\", \"Drive back at the time you choose.\")\n      ],\n      includes: [\"Private vehicle and driver\", \"Fuel, tolls and driver costs\", \"Flexible stops along the route\", \"Mountain guide arranged on request\"]\n    },\n    {\n      id: \"ait-benhaddou-day\", type: \"excursion\", name: \"Ait Benhaddou & Film Studios\", duration: \"Full day\",\n      group: \"All ages\", rough: true,\n      summary: \"A UNESCO kasbah village and the Ouarzazate film studios, often seen in famous movies.\",\n      images: [G(\"#B0703C\",\"#F1CFA0\",\"Ait Benhaddou kasbah\"), G(\"#9C6A3E\",\"#E8C58F\",\"Clay walls at sunset\"), G(\"#7A5A2E\",\"#D9B27A\",\"Ouarzazate film studios\")],\n      steps: [\n        S(\"Morning\", \"Drive over the Tizi n'Tichka\", \"Cross the High Atlas pass to Ouarzazate, with photo stops along the way.\"),\n        S(\"Late morning\", \"Ait Benhaddou\", \"Explore the historic clay village, a UNESCO World Heritage site.\"),\n        S(\"Lunch\", \"Lunch in Ouarzazate\", \"Lunch in the town, at your own choice.\"),\n        S(\"Afternoon\", \"Film studios and return\", \"Visit the film studios, then drive back to Marrakech.\")\n      ],\n      includes: [\"Private vehicle and driver\", \"Fuel, tolls and driver costs\", \"Flexible stops along the route\", \"Entrance tickets arranged on request\"]\n    },\n    {\n      id: \"taghazout-surf\", type: \"excursion\", name: \"Taghazout Surf Day\", duration: \"Full day\",\n      group: \"Surfers & beach lovers\", rough: false,\n      summary: \"A relaxed coastal day in Taghazout, one of Morocco's best-known surf villages, with lessons on request.\",\n      images: [G(\"#1F7A8C\",\"#9ED8E3\",\"Taghazout surf break\"), G(\"#2F8E9C\",\"#C4E9EF\",\"Atlantic waves\"), G(\"#C9A66B\",\"#F3E0B5\",\"Beach at sunset\")],\n      steps: [\n        S(\"Morning\", \"Drive to the coast\", \"About three hours through the Atlantic coast road to Taghazout.\"),\n        S(\"Late morning\", \"Surf or beach time\", \"Take a surf lesson or relax on the sand, at your own pace.\"),\n        S(\"Lunch\", \"Seafood lunch\", \"Enjoy lunch by the ocean, at your choice.\"),\n        S(\"Afternoon\", \"Return to Marrakech\", \"Drive back at the time you choose.\")\n      ],\n      includes: [\"Private transfer and driver\", \"Fuel, tolls and driver costs\", \"Flexible stops along the route\", \"Surf lessons arranged on request\"]\n    },\n    {\n      id: \"casablanca-day\", type: \"excursion\", name: \"Casablanca & Hassan II Mosque\", duration: \"Full day\",\n      group: \"All ages\", rough: false,\n      summary: \"A day in Morocco's largest city, with the striking Hassan II Mosque standing over the Atlantic.\",\n      images: [G(\"#2A6F8F\",\"#9BD0E0\",\"Hassan II Mosque\"), G(\"#5B7B8C\",\"#C4D6E0\",\"Corniche seafront\"), G(\"#8C7A5B\",\"#E4D5B5\",\"Art deco old town\")],\n      steps: [\n        S(\"Morning\", \"Drive to Casablanca\", \"About three hours across the plains to the Atlantic coast.\"),\n        S(\"Late morning\", \"Hassan II Mosque\", \"Visit the mosque on the ocean edge (guided visit times apply).\"),\n        S(\"Lunch\", \"Lunch on the Corniche\", \"Seafood lunch by the sea, at your choice.\"),\n        S(\"Afternoon\", \"Return to Marrakech\", \"Drive back at the time you choose.\")\n      ],\n      includes: [\"Private transfer and driver\", \"Fuel, tolls and driver costs\", \"Flexible stops along the route\"]\n    },\n    {\n      id: \"rabat-day\", type: \"excursion\", name: \"Rabat Imperial Capital\", duration: \"Full day\",\n      group: \"All ages\", rough: false,\n      summary: \"Morocco's capital, with the Kasbah of the Udayas, the Hassan Tower and the royal necropolis.\",\n      images: [G(\"#1F4E79\",\"#7FA6C9\",\"Kasbah of the Udayas\"), G(\"#6A5B3D\",\"#D8C49A\",\"Hassan Tower\"), G(\"#2F5D62\",\"#8FB8B5\",\"Rabat medina\")],\n      steps: [\n        S(\"Morning\", \"Drive to Rabat\", \"About three hours through the plains to the capital.\"),\n        S(\"Late morning\", \"Kasbah of the Udayas\", \"Walk the blue-and-white alleys to the Atlantic viewpoint.\"),\n        S(\"Midday\", \"Hassan Tower\", \"Visit the unfinished minaret and the Mausoleum of Mohammed V.\"),\n        S(\"Afternoon\", \"Return to Marrakech\", \"Drive back at the time you choose.\")\n      ],\n      includes: [\"Private transfer and driver\", \"Fuel, tolls and driver costs\", \"Flexible stops along the route\"]\n    },\n    {\n      id: \"cooking-half\", type: \"excursion\", name: \"Moroccan Cooking & Market Morning\", duration: \"Half day\",\n      group: \"Foodies & families\", rough: false,\n      summary: \"Shop for spices and produce in a local market, then cook a traditional tagine in a riad kitchen.\",\n      images: [G(\"#C0793E\",\"#F3D4A0\",\"Spice market\"), G(\"#8C4A2E\",\"#E6B98A\",\"Tagine on the fire\"), G(\"#B8860B\",\"#F4D58D\",\"Fresh mint and olives\")],\n      steps: [\n        S(\"Morning\", \"Market visit\", \"Shop for spices, vegetables and fresh bread with your host.\"),\n        S(\"Late morning\", \"Cooking class\", \"Prepare a tagine and a mint tea in a riad kitchen.\"),\n        S(\"Lunch\", \"Eat together\", \"Enjoy the dishes you have made.\"),\n        S(\"Afternoon\", \"Return\", \"Transfer back to your hotel or riad.\")\n      ],\n      includes: [\"Cooking class and ingredients\", \"Local host\", \"Transfer on request\"]\n    },\n    {\n      id: \"custom\", type: \"custom\", name: \"Custom journey\", duration: \"You decide\",\n      group: \"Anything you imagine\", rough: false,\n      summary: \"Describe your own trip or excursion. We design the route with you and advise the vehicle.\",\n      images: [G(\"#B8860B\",\"#F4D58D\",\"Your journey, designed with you\"), G(\"#8C6A1F\",\"#E8C97A\",\"Any destination in Morocco\"), G(\"#6B5320\",\"#D9B866\",\"Built around your wishes\")],\n      steps: [\n        S(\"Step 1\", \"Tell us your wishes\", \"Destinations, number of days, group size and interests.\"),\n        S(\"Step 2\", \"We propose a route\", \"We draft the itinerary and the right vehicle for your group.\"),\n        S(\"Step 3\", \"Confirm and travel\", \"We confirm the final price and your driver meets you.\")\n      ],\n      includes: [\"Vehicle and professional driver\", \"Route designed with you\", \"Price confirmed before you travel\"]\n    }\n  ];\n\n  \/* ====== HELPERS ====== *\/\n  const $ = (id) => document.getElementById(id);\n  const esc = (s) => String(s).replace(\/[&<>\"']\/g, c => ({\"&\":\"&amp;\",\"<\":\"&lt;\",\">\":\"&gt;\",'\"':\"&quot;\",\"'\":\"&#39;\"}[c]));\n  const getItem = (id) => ITEMS.find(x => x.id === id) || ITEMS[0];\n\n  \/* ====== VEHICLE ADVICE ======\n     <= 4 travellers on rough roads: 4x4\n     <= 6 travellers: Van\n     7 to 17: 17-seat minibus\n     more than 17: several minibuses\n  *\/\n  function adviseVehicle(item, n) {\n    if (!n) return null;\n    if (n > VEHICLES.minibus) {\n      const m = Math.ceil(n \/ VEHICLES.minibus);\n      return { veh: `${m} \u00d7 17-Seat Minibus`,\n               text: `Your group is larger than one minibus. We suggest ${m} minibuses so everyone travels together.` };\n    }\n    if (n >= 7) {\n      return { veh: \"17-Seat Minibus\",\n               text: \"A minibus suits larger groups and their luggage.\" };\n    }\n    if (item.rough && n <= VEHICLES.fourByFour) {\n      return { veh: \"4x4 Vehicle\",\n               text: \"Your route includes desert or mountain roads, where a 4x4 is the most comfortable choice.\" };\n    }\n    if (item.rough && n > VEHICLES.fourByFour) {\n      return { veh: \"Van (6 seats)\",\n               text: \"A van is comfortable for your group. For rougher tracks, ask us about a 4x4 as a second vehicle.\" };\n    }\n    return { veh: \"Van (6 seats)\",\n             text: \"A van is the best fit for your group and luggage on paved roads.\" };\n  }\n\n  \/* ====== STATE ====== *\/\n  let currentType = \"trip\";\n  let currentId = \"desert-3d\";\n  let gIndex = 0;\n\n  \/* ====== RENDER ====== *\/\n  function fillChoices() {\n    let html = `<option value=\"\">Select\u2026<\/option>`;\n    [[\"trip\", \"Trips\"], [\"excursion\", \"Excursions\"]].forEach(([t, label]) => {\n      html += `<optgroup label=\"${label}\">`;\n      ITEMS.filter(i => i.type === t).forEach(i => {\n        html += `<option value=\"${i.id}\">${esc(i.name)} (${esc(i.duration)})<\/option>`;\n      });\n      html += `<\/optgroup>`;\n    });\n    const c = ITEMS.find(i => i.type === \"custom\");\n    html += `<optgroup label=\"Other\">`;\n    html += `<option value=\"${c.id}\">${esc(c.name)}: describe your own<\/option>`;\n    html += `<\/optgroup>`;\n    $(\"choice\").innerHTML = html;\n    $(\"choice\").value = currentId;\n  }\n\n  \/* Trips \/ Excursions button and colour theme. Runs on every change. *\/\n  function renderToggle() {\n    $(\"btn-trips\").setAttribute(\"aria-pressed\", String(currentType === \"trip\"));\n    $(\"btn-excursions\").setAttribute(\"aria-pressed\", String(currentType === \"excursion\"));\n    document.body.dataset.mode = currentType === \"excursion\" ? \"excursion\" : \"trip\";\n  }\n\n  function fillPeople() {\n    let opts = `<option value=\"\">Select<\/option>`;\n    for (let i = 1; i <= 30; i++) {\n      opts += `<option value=\"${i}\">${i}${i > 17 ? \"+\" : \"\"}<\/option>`;\n    }\n    $(\"people\").innerHTML = opts;\n  }\n\n  function fillExtras() {\n    $(\"extras\").innerHTML = EXTRAS.map(e =>\n      `<label><input type=\"checkbox\" value=\"${esc(e)}\"> ${esc(e)}<\/label>`).join(\"\");\n  }\n\n  function renderGallery() {\n    const it = getItem(currentId);\n    const g = $(\"gallery\");\n    g.querySelectorAll(\".frame\").forEach(f => f.remove());\n    const frames = it.images.map((img, i) => {\n      const inner = img.src\n        ? `<img decoding=\"async\" src=\"${esc(img.src)}\" alt=\"${esc(img.caption)}\">`\n        : \"\";\n      return `<div class=\"frame${i === 0 ? \" active\" : \"\"}\" style=\"background:${img.grad}\">${inner}\n                <div class=\"cap\">${esc(img.caption)}<\/div><\/div>`;\n    }).join(\"\");\n    g.insertAdjacentHTML(\"afterbegin\", frames);\n    gIndex = 0;\n    updateGalleryCount();\n  }\n\n  function updateGalleryCount() {\n    const it = getItem(currentId);\n    const frames = $(\"gallery\").querySelectorAll(\".frame\");\n    frames.forEach((f, i) => f.classList.toggle(\"active\", i === gIndex));\n    $(\"gallery-count\").textContent = `${gIndex + 1} \/ ${it.images.length}`;\n  }\n\n  function stepGallery(d) {\n    const it = getItem(currentId);\n    gIndex = (gIndex + d + it.images.length) % it.images.length;\n    updateGalleryCount();\n  }\n\n  function renderItinerary() {\n    const it = getItem(currentId);\n    const typeLabel = it.type === \"trip\" ? \"Trip\" : it.type === \"excursion\" ? \"Excursion\" : \"Custom\";\n    $(\"it-title\").textContent = it.name;\n    $(\"it-meta\").innerHTML = `<span class=\"badge\">${typeLabel}<\/span><span class=\"badge\">${esc(it.duration)}<\/span><span class=\"badge\">${esc(it.group)}<\/span>`;\n    $(\"it-summary\").textContent = it.summary;\n    $(\"timeline\").innerHTML = it.steps.map(s => `\n      <li><div class=\"time\">${esc(s.time)}<\/div><h3>${esc(s.title)}<\/h3><p>${esc(s.text)}<\/p><\/li>`).join(\"\");\n    $(\"includes\").innerHTML = it.includes.map(i => `<li>${esc(i)}<\/li>`).join(\"\");\n  }\n\n  function renderAdvice() {\n    const it = getItem(currentId);\n    const n = parseInt($(\"people\").value, 10);\n    const a = adviseVehicle(it, n);\n    if (!a) {\n      $(\"advice-veh\").textContent = \"\u2014\";\n      $(\"advice-text\").textContent = \"Select a trip or excursion and the number of travellers.\";\n      return;\n    }\n    $(\"advice-veh\").textContent = a.veh;\n    $(\"advice-text\").textContent = a.text;\n  }\n\n  function renderAll() {\n    renderToggle();\n    renderGallery();\n    renderItinerary();\n    renderAdvice();\n  }\n\n  \/* ====== EVENTS ====== *\/\n  $(\"choice\").addEventListener(\"change\", e => {\n    if (!e.target.value) return;\n    currentId = e.target.value;\n    const item = getItem(currentId);\n    if (item.type === \"trip\" || item.type === \"excursion\") {\n      currentType = item.type;   \/\/ move the switch and colour to match the choice\n    }\n    fillChoices();\n    renderAll();\n  });\n  $(\"people\").addEventListener(\"change\", renderAdvice);\n  $(\"g-prev\").addEventListener(\"click\", () => stepGallery(-1));\n  $(\"g-next\").addEventListener(\"click\", () => stepGallery(1));\n\n  \/\/ min date = today\n  const today = new Date();\n  const pad = n => String(n).padStart(2, \"0\");\n  $(\"date\").min = `${today.getFullYear()}-${pad(today.getMonth() + 1)}-${pad(today.getDate())}`;\n\n  function setInvalid(id, bad) { $(id).classList.toggle(\"invalid\", bad); }\n\n  function validate() {\n    const choice = $(\"choice\").value;\n    const name = $(\"name\").value.trim();\n    const date = $(\"date\").value;\n    const people = $(\"people\").value;\n    const contact = $(\"contact\").value.trim();\n\n    const badChoice = !choice;\n    const badName = name.length < 2;\n    const badDate = !date || date < $(\"date\").min;\n    const badPeople = !people;\n    const badContact = contact.length < 5;\n\n    setInvalid(\"f-choice\", badChoice);\n    setInvalid(\"f-name\", badName);\n    setInvalid(\"f-date\", badDate);\n    setInvalid(\"f-people\", badPeople);\n    setInvalid(\"f-contact\", badContact);\n\n    return !(badChoice || badName || badDate || badPeople || badContact);\n  }\n\n  function buildMessage() {\n    const it = getItem(currentId);\n    const n = $(\"people\").value;\n    const a = adviseVehicle(it, parseInt(n, 10));\n    const picked = [...document.querySelectorAll(\"#extras input:checked\")].map(x => x.value);\n    return [\n      `Hello Marrakech Compass, I'd like a quote for a custom transport request.`,\n      ``,\n      `Selection: ${it.name} (${it.duration})`,\n      `Length: ${$(\"length\").value}`,\n      `Extras: ${picked.length ? picked.join(\", \") : \"none\"}`,\n      `Travellers: ${n}`,\n      `Suggested vehicle: ${a ? a.veh : \"to be advised\"}`,\n      `Date: ${$(\"date\").value}`,\n      `Pick-up: ${$(\"pickup\").value.trim() || \"to be confirmed\"}`,\n      `Name: ${$(\"name\").value.trim()}`,\n      `Contact: ${$(\"contact\").value.trim()}`,\n      $(\"notes\").value.trim() ? `My wishes: ${$(\"notes\").value.trim()}` : ``\n    ].filter(Boolean).join(\"\\n\");\n  }\n\n  $(\"booking\").addEventListener(\"submit\", e => {\n    e.preventDefault();\n    if (!validate()) return;\n    const url = `https:\/\/wa.me\/${WHATSAPP_NUMBER}?text=${encodeURIComponent(buildMessage())}`;\n    window.open(url, \"_blank\", \"noopener\");\n    $(\"sent\").classList.add(\"show\");\n  });\n\n  $(\"send-mail\").addEventListener(\"click\", () => {\n    if (!validate()) return;\n    const it = getItem(currentId);\n    const subject = `Quote request: ${it.name}`;\n    window.location.href = `mailto:${CONTACT_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(buildMessage())}`;\n    $(\"sent\").classList.add(\"show\");\n  });\n\n  document.querySelectorAll(\".toggle button\").forEach(btn => {\n    btn.addEventListener(\"click\", () => {\n      currentType = btn.dataset.type;\n      currentId = ITEMS.find(i => i.type === currentType).id;\n      fillChoices();\n      renderAll();\n    });\n  });\n\n  \/* ====== HERO SLIDER ====== *\/\n  (function heroSlider() {\n    const slides = document.querySelectorAll(\"#hero .slide\");\n    const dotsWrap = $(\"hero-dots\");\n    const counter = $(\"hero-count\");\n    let i = 0, timer;\n    slides.forEach((_, k) => {\n      const d = document.createElement(\"button\");\n      d.className = \"dot\" + (k === 0 ? \" active\" : \"\");\n      d.setAttribute(\"aria-label\", `Slide ${k + 1}`);\n      d.addEventListener(\"click\", () => go(k));\n      dotsWrap.appendChild(d);\n    });\n    function go(k) {\n      slides[i].classList.remove(\"active\");\n      dotsWrap.children[i].classList.remove(\"active\");\n      i = (k + slides.length) % slides.length;\n      slides[i].classList.add(\"active\");\n      dotsWrap.children[i].classList.add(\"active\");\n      if (counter) counter.textContent = String(i + 1).padStart(2, \"0\") + \" \/ \" + String(slides.length).padStart(2, \"0\");\n    }\n    $(\"hero-prev\").addEventListener(\"click\", () => { go(i - 1); reset(); });\n    $(\"hero-next\").addEventListener(\"click\", () => { go(i + 1); reset(); });\n    function reset() { clearInterval(timer); timer = setInterval(() => go(i + 1), 6000); }\n    const hero = $(\"hero\");\n    hero.addEventListener(\"mouseenter\", () => clearInterval(timer));\n    hero.addEventListener(\"mouseleave\", reset);\n    reset();\n  })();\n\n  fillChoices();\n  fillPeople();\n  fillExtras();\n  renderAll();\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Custom Trips &#038; Excursions \u2013 Marrakech Compass Private transport in Morocco Your journey, your route. We drive. Clean vehicles and professional drivers for private transfers and tailored trips across Morocco. Request a quote See inspiration Fully customised Tell us where you want to go. Every journey is designed with you. The routes shown are ideas [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-414","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/marrakechcompass.com\/index.php?rest_route=\/wp\/v2\/pages\/414","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marrakechcompass.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/marrakechcompass.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/marrakechcompass.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marrakechcompass.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=414"}],"version-history":[{"count":13,"href":"https:\/\/marrakechcompass.com\/index.php?rest_route=\/wp\/v2\/pages\/414\/revisions"}],"predecessor-version":[{"id":432,"href":"https:\/\/marrakechcompass.com\/index.php?rest_route=\/wp\/v2\/pages\/414\/revisions\/432"}],"wp:attachment":[{"href":"https:\/\/marrakechcompass.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}