/* Day Biking: warm Marrakesh palette (terracotta walls, sand, palm green, deep cedar brown), a zellige-style pattern
   and gentle motion. Everything animated is turned off for people who ask for less motion. */
:root {
  --cedar: #2B1A12;
  --cedar-2: #3D2619;
  --terracotta: #C4552D;
  --terracotta-d: #A2421F;
  --saffron: #E7A33B;
  --sand: #F4E9DA;
  --sand-2: #EADBC5;
  --cream: #FFFBF4;
  --palm: #2F6B4F;
  --ink: #2B1A12;
  --muted: #6F5A4B;
  --wa: #25D366;
  --wa-d: #1DA851;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --r: 22px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html[lang="ar"] { --serif: 'Noto Kufi Arabic', 'Geeza Pro', Tahoma, serif; --sans: 'Noto Sans Arabic', 'Geeza Pro', Tahoma, sans-serif; }
html[lang="zh"] { --serif: 'Noto Serif SC', 'Songti SC', serif; --sans: 'PingFang SC', 'Noto Sans SC', sans-serif; }
html[lang="ru"] { --serif: Georgia, 'Times New Roman', serif; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--cream); line-height: 1.55; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.wrap.narrow { max-width: 760px; }
small { font-size: .78em; opacity: .7; font-weight: 500; }
em { font-style: normal; }

/* ---------- Header ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 251, 244, .86); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(43, 26, 18, .06); }
.nav-in { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 24px; font-weight: 700; text-decoration: none; letter-spacing: -.01em; }
.brand em { color: var(--terracotta); }
.brand.light { color: var(--cream); }
.mark { width: 38px; height: 38px; border-radius: 12px; background: var(--terracotta); display: grid; place-items: center; }
.mark svg { width: 28px; height: 28px; fill: none; stroke: var(--cream); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.links { display: flex; gap: 26px; margin-inline-start: auto; }
.links a { text-decoration: none; font-weight: 600; font-size: 15px; color: var(--muted); transition: color .2s; }
.links a:hover { color: var(--terracotta); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px; padding: 15px 26px; font: inherit; font-weight: 800; font-size: 16px; text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s, background .2s; }
.btn:hover { transform: translateY(-2px); }
.btn.small { padding: 10px 18px; font-size: 14px; }
.btn.full { width: 100%; }
.btn.wa { background: var(--wa); color: #06341A; box-shadow: 0 10px 24px rgba(37, 211, 102, .28); }
.btn.wa:hover { background: var(--wa-d); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px rgba(43, 26, 18, .18); }
.wa-ico { width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.3 14.2c-.2.6-1.3 1.2-1.8 1.3-.5.1-1 .1-3.3-.9-2.8-1.2-4.6-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.9s.7-2 1-2.3c.3-.3.6-.3.8-.3h.6c.2 0 .4 0 .6.5l.9 2.1c.1.2.1.4 0 .6l-.4.6-.4.5c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.3.1.5.1.6-.1l.9-1.1c.2-.3.4-.2.7-.1l2 1c.3.1.5.2.6.3.1.2.1.8-.1 1.4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.3 14.2c-.2.6-1.3 1.2-1.8 1.3-.5.1-1 .1-3.3-.9-2.8-1.2-4.6-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.9s.7-2 1-2.3c.3-.3.6-.3.8-.3h.6c.2 0 .4 0 .6.5l.9 2.1c.1.2.1.4 0 .6l-.4.6-.4.5c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.3.1.5.1.6-.1l.9-1.1c.2-.3.4-.2.7-.1l2 1c.3.1.5.2.6.3.1.2.1.8-.1 1.4z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- Zellige-style pattern (pure CSS) ---------- */
.zellige { position: absolute; inset: 0; pointer-events: none; opacity: .09;
  background-image:
    radial-gradient(circle at 50% 50%, transparent 38%, var(--terracotta) 39%, var(--terracotta) 41%, transparent 42%),
    conic-gradient(from 45deg, var(--palm) 0 25%, transparent 0 50%, var(--palm) 0 75%, transparent 0);
  background-size: 64px 64px, 32px 32px; mask-image: linear-gradient(180deg, #000, transparent 85%); }
.zellige.light { opacity: .06; mask-image: none; }

/* ---------- Hero: a full-width Marrakesh scene with a dark fade so the text reads, like a big photo would.
   When the owner sends a photo, set --hero-photo: url('img/hero.jpg') on .hero and it replaces the drawing. */
.hero { position: relative; overflow: hidden; min-height: min(88vh, 760px); display: flex; align-items: flex-end; color: var(--cream); background: var(--cedar); }
.hero[style*="--hero-photo"] .scene-svg { display: none; }
/* The minaret sits on the right of the photo, away from the text; a slow zoom keeps it alive. */
.scene { position: absolute; inset: 0; background: var(--hero-photo, none) 62% 8% / cover no-repeat;
  /* Zoom in, then back out, forever. Starts at its normal size and only grows, so the edges never show; drawn on the
     graphics card (will-change, backface-visibility) so it stays smooth and the text on top stays sharp. */
  transform-origin: 50% 40%; will-change: transform; backface-visibility: hidden;
  animation: kenburns 12s ease-in-out infinite alternate; }
[dir="rtl"] .scene { background-position: 38% 8%; }
.scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-fade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(43, 26, 18, .72) 0%, rgba(43, 26, 18, .35) 45%, rgba(43, 26, 18, 0) 70%), linear-gradient(0deg, rgba(43, 26, 18, .55) 0%, rgba(43, 26, 18, 0) 40%); }
[dir="rtl"] .scene-fade { background: linear-gradient(270deg, rgba(43, 26, 18, .78) 0%, rgba(43, 26, 18, .45) 45%, rgba(43, 26, 18, 0) 75%), linear-gradient(0deg, rgba(43, 26, 18, .7) 0%, rgba(43, 26, 18, 0) 45%); }
.sun-disc { animation: sunrise 10s ease-in-out infinite alternate; transform-origin: 1040px 430px; }
.palms .sway { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 7s ease-in-out infinite alternate; }
.palms > g:nth-child(2) .sway { animation-duration: 9s; }
.rider { animation: ride-by 22s linear infinite; }
.hero-in { position: relative; padding-top: 120px; padding-bottom: 72px; }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: 12.5px; font-weight: 800; color: var(--terracotta); margin: 0 0 14px; }
.eyebrow.light { color: var(--saffron); }
h1, h2 { font-family: var(--serif); font-weight: 700; letter-spacing: -.02em; line-height: 1.02; margin: 0; }
h1 { font-size: clamp(48px, 7.5vw, 96px); max-width: 760px; text-shadow: 0 4px 30px rgba(0, 0, 0, .25); }
h2 { font-size: clamp(36px, 5vw, 56px); }
h1 em { color: var(--saffron); position: relative; }
h2 em { color: var(--terracotta); position: relative; }
h1 em::after { content: ''; position: absolute; inset-inline: 0; bottom: .02em; height: .1em; border-radius: 99px; background: var(--terracotta); transform-origin: left; animation: sweep 1.2s var(--ease) .8s both; z-index: -1; }
[dir="rtl"] h1 em::after { transform-origin: right; }
.lead { font-size: 19px; color: #F2E4D3; max-width: 560px; margin: 20px 0 28px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn.glass { background: rgba(255, 251, 244, .14); color: var(--cream); box-shadow: inset 0 0 0 2px rgba(255, 251, 244, .45); backdrop-filter: blur(8px); }
.btn.glass:hover { background: rgba(255, 251, 244, .24); }
.perks { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.perks li { background: rgba(255, 251, 244, .14); border: 1px solid rgba(255, 251, 244, .28); backdrop-filter: blur(8px); border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: 14px; }
.perks li::before { content: '✓ '; color: var(--wa); font-weight: 800; }
.float-card { position: absolute; inset-inline-end: 20px; bottom: 80px; background: var(--cream); color: var(--ink); border-radius: 18px; padding: 14px 18px; box-shadow: 0 20px 40px rgba(0, 0, 0, .25); display: grid; gap: 2px; }
.float-card.on { animation: bob 5s ease-in-out 1.4s infinite; }
.float-card b { font-size: 15px; }
.float-card > span { font-size: 13.5px; color: var(--muted); }
.float-card strong { color: var(--terracotta); }

/* Sunset photo, text on the left (user's choice): a mirrored copy puts the minaret on the right beside the text, with
   the sunset behind the words. Arabic reads from the right, so it uses the original photo (minaret on the left). */
.hero-sunset .scene { background-position: 88% 30%; transform-origin: 78% 4%; }
[dir="rtl"] .hero-sunset .scene { background-image: url('img/hero-koutoubia-sunset.jpg'); background-position: 12% 30%; transform-origin: 22% 4%; }

/* Language picker */
.lang { position: relative; display: flex; align-items: center; gap: 6px; background: var(--sand); border-radius: 999px; padding: 6px 12px; margin-inline-start: auto; }
.links + .lang { margin-inline-start: 0; }
.lang select { border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 14px; color: var(--ink); cursor: pointer; outline: none; }
.lang-globe { font-size: 15px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Sections ---------- */
.section { position: relative; padding: 96px 0; }
.section.sand { background: var(--sand); }
.sub { color: var(--muted); font-size: 17px; max-width: 640px; margin: 14px 0 0; }

/* Fleet */
.fleet { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 40px; }
.ride { background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: 0 6px 24px rgba(43, 26, 18, .07); display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s; }
.ride:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(43, 26, 18, .14); }
.ride-ph { aspect-ratio: 4 / 3; display: grid; place-items: center; position: relative; }
.ride-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.ride:hover .ride-ph img { transform: scale(1.06); }
.ride-ph svg { width: 62%; fill: none; stroke: rgba(255, 251, 244, .95); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease); }
.ride:hover .ride-ph svg { transform: translateX(8px) rotate(-2deg); }
.ride-ph .ph-note { position: absolute; bottom: 10px; inset-inline-start: 12px; font-size: 11px; font-weight: 700; color: rgba(255, 251, 244, .85); }
.ride-ph .badge { position: absolute; top: 12px; inset-inline-start: 12px; background: var(--cream); color: var(--ink); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 800; }
.ride-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ride-body h3 { margin: 0; font-size: 19px; }
.ride-body p { margin: 0; color: var(--muted); font-size: 14.5px; }
.specs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.specs span { background: var(--sand); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 700; }
.price { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 10px; }
.price b { font-family: var(--serif); font-size: 26px; color: var(--terracotta); }
.price b small { font-family: var(--sans); color: var(--muted); font-size: 13px; }
.price a { font-weight: 800; font-size: 14px; color: var(--palm); text-decoration: none; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.step { background: var(--cream); border-radius: var(--r); padding: 28px; }
.step b { font-family: var(--serif); font-size: 52px; line-height: 1; color: var(--terracotta); }
.step h3 { margin: 10px 0 6px; font-size: 20px; }
.step p { margin: 0; color: var(--muted); }

/* Routes */
.routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.route { background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: 0 6px 24px rgba(43, 26, 18, .07); }
.route > div:last-child { padding: 18px 20px 22px; }
.route h3 { margin: 0 0 6px; font-size: 19px; }
.route p { margin: 0 0 12px; color: var(--muted); font-size: 15px; }
.route-ph { aspect-ratio: 16 / 10; background: var(--sand-2) center / cover no-repeat; transition: transform .7s var(--ease); }
.route { overflow: hidden; }
.route:hover .route-ph { transform: scale(1.05); }
.r1 { background-image: url('img/route-palmeraie.jpg'); }
.r2 { background-image: url('img/route-agafay.jpg'); }
.r3 { background-image: url('img/route-atlas.jpg'); }

/* The shop */
.shop-in { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.shop-photo { position: relative; margin: 0; border-radius: 28px; overflow: hidden; box-shadow: 0 30px 60px rgba(43, 26, 18, .2); }
.shop-photo img { width: 100%; display: block; }
.shop-photo figcaption { position: absolute; inset-inline-start: 16px; bottom: 16px; background: var(--cream); border-radius: 999px; padding: 6px 14px; font-weight: 800; font-size: 13.5px; }
.ticks.dark li { color: var(--ink); }
.tag { display: inline-block; background: var(--sand); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; font-weight: 800; color: var(--terracotta-d); }

/* Booking */
.book { background: var(--cedar); color: var(--cream); overflow: hidden; }
.book .sub, .book .ticks { color: #E3D3C2; }
.book h2 em { color: var(--saffron); }
.book .eyebrow { color: var(--saffron); }
.book-in { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.ticks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.ticks li::before { content: '✓'; color: var(--wa); font-weight: 900; margin-inline-end: 10px; }
.form { background: var(--cream); color: var(--ink); border-radius: 26px; padding: 24px; display: grid; gap: 12px; box-shadow: 0 30px 60px rgba(0, 0, 0, .3); }
.in { display: block; background: var(--sand); border-radius: 14px; padding: 10px 14px; }
.in small { display: block; font-size: 12px; font-weight: 800; color: var(--muted); opacity: 1; margin-bottom: 2px; }
.in input, .in select, .in textarea { width: 100%; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); outline: none; padding: 2px 0; }
.in textarea { resize: vertical; }
.in:focus-within { box-shadow: inset 0 0 0 2px var(--terracotta); }
.in.bad { box-shadow: inset 0 0 0 2px #C8233F; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.estimate { margin: 2px 0; font-weight: 700; color: var(--palm); min-height: 1.4em; }
.tiny { font-size: 12.5px; color: var(--muted); text-align: center; margin: 0; }

/* FAQ */
.faq { margin-top: 30px; display: grid; gap: 12px; }
.faq details { background: #fff; border-radius: 18px; padding: 4px 22px; box-shadow: 0 4px 16px rgba(43, 26, 18, .05); }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 700; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: '+'; color: var(--terracotta); font-size: 22px; line-height: 1; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 18px; color: var(--muted); }
.faq p em { color: var(--terracotta-d); font-weight: 600; }

/* Footer */
.foot { position: relative; background: var(--cedar-2); color: #E3D3C2; padding: 56px 0 24px; overflow: hidden; }
.foot-in { position: relative; display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.foot h4 { color: var(--cream); margin: 0 0 8px; }
.foot p { margin: 0; }
.copy { position: relative; margin-top: 36px; font-size: 13px; opacity: .7; }

/* Floating WhatsApp button */
.wa-float { position: fixed; inset-inline-end: 18px; bottom: 18px; width: 58px; height: 58px; border-radius: 50%; background: var(--wa); color: #06341A; display: grid; place-items: center; box-shadow: 0 12px 28px rgba(37, 211, 102, .4); z-index: 60; animation: ping 2.6s ease-out 2s infinite; }
.wa-float .wa-ico { width: 28px; height: 28px; }

/* ---------- Motion ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .9s var(--ease); transition-delay: var(--d, 0s); }
.reveal.on { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@keyframes glow { from { transform: scale(1); } to { transform: scale(1.12) translate(-30px, 20px); } }
@keyframes sunrise { from { transform: translateY(14px); opacity: .8; } to { transform: translateY(-10px); opacity: 1; } }
@keyframes kenburns { from { transform: scale(1) translateZ(0); } to { transform: scale(1.15) translateZ(0); } }
@keyframes sway { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
@keyframes ride-by { from { transform: translate(-120px, 584px); } to { transform: translate(1560px, 584px); } }
@keyframes sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ride { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(6px) rotate(-1deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes road { from { transform: translateX(0); } to { transform: translateX(-70px); } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); } 100% { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Phones ---------- */
@media (max-width: 860px) {
  .links { display: none; }
  .nav-in { justify-content: space-between; }
  .hero { min-height: 640px; }
  .hero-in { padding-top: 80px; padding-bottom: 48px; }
  .scene-fade { background: linear-gradient(0deg, rgba(43, 26, 18, .85) 0%, rgba(43, 26, 18, .55) 55%, rgba(43, 26, 18, .15) 100%) !important; }
  .float-card { display: none; }
  .hero-sunset .scene { background-position: 80% 30%; }
  [dir="rtl"] .hero-sunset .scene { background-position: 20% 30%; }
  .book-in, .foot-in, .shop-in { grid-template-columns: 1fr; gap: 32px; }
  .lang { padding: 6px 10px; }
  /* Phones book with the floating WhatsApp button, so the header keeps just the logo and the language. */
  .nav-book { display: none; }
  .steps, .routes { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .section { padding: 72px 0; }
}
@media (max-width: 420px) {
  .two { grid-template-columns: 1fr; }
}