/* Final motion polish: lightweight, touch-friendly, and disabled for reduced-motion users. */
body{overflow-x:hidden}.header{position:fixed;transition:background .35s ease,backdrop-filter .35s ease,padding .35s ease}.header.header-scrolled{background:rgba(9,9,9,.82);backdrop-filter:blur(13px);padding-top:11px;padding-bottom:11px}
.button{position:relative;overflow:hidden;isolation:isolate}.button:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.34) 47%,transparent 68%);transform:translateX(-130%);transition:transform .65s ease}.button:hover:after{transform:translateX(130%)}
.reveal-on-scroll{opacity:0;transform:translateY(30px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}.reveal-on-scroll.is-visible{opacity:1;transform:none}.booking-form.reveal-on-scroll{transition-delay:.08s}.ticket.reveal-on-scroll{transition-delay:.16s}.gallery-window.reveal-on-scroll{transition-delay:.1s}
.route.is-visible .zone-node{animation:nodeLift .55s cubic-bezier(.2,.8,.2,1) both}.route.is-visible .zone-node:nth-of-type(2){animation-delay:.08s}.route.is-visible .zone-node:nth-of-type(3){animation-delay:.16s}.route.is-visible .zone-node:nth-of-type(4){animation-delay:.24s}.route.is-visible .zone-node:nth-of-type(5){animation-delay:.32s}@keyframes nodeLift{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.ticket{transition:transform .28s ease,box-shadow .28s ease}.ticket:hover{transform:translateY(-5px) rotate(.35deg);box-shadow:0 18px 42px rgba(0,0,0,.24)}.ticket-total strong{display:inline-block}
.gallery-card{position:relative}.gallery-card:after{content:"FRESH CUT";position:absolute;right:10px;bottom:10px;color:#fff;font-size:8px;letter-spacing:.18em;opacity:0;transform:translateY(5px);transition:.25s}.gallery-card:hover:after{opacity:.85;transform:none}
.video-section{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}.video-section>*{min-width:0}.video-section h2{font-size:clamp(44px,5.4vw,80px)}.video-frame{box-shadow:0 22px 60px rgba(0,0,0,.32)}.video-frame:before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;border:1px solid rgba(215,170,96,.4);opacity:.7}.video-frame video{transition:transform 4s ease}.video-frame:hover video{transform:scale(1.035)}
.zone-node.active strong{animation:priceGlow 1.6s ease-in-out infinite}@keyframes priceGlow{50%{text-shadow:0 0 18px rgba(215,170,96,.75)}}
@media(max-width:780px){.header.header-scrolled{padding-top:8px;padding-bottom:8px}.ticket:hover{transform:none}.gallery-card:after{opacity:.7;transform:none}}
@media(prefers-reduced-motion:reduce){.header,.button:after,.reveal-on-scroll,.ticket,.gallery-card:after,.video-frame video{transition:none!important}.route.is-visible .zone-node,.zone-node.active strong{animation:none!important}}

/* Small-screen layout: keep every section comfortably inside a phone viewport. */
@media(max-width:780px){
  html,body{max-width:100%;overflow-x:clip}
  .header{padding:14px 20px}
  .brand img{width:58px;height:58px}
  .menu-button{padding:8px 0}
  .hero{min-height:700px;padding:116px 24px 54px}
  .hero-copy{max-width:300px}
  .hero-copy>p:not(.eyebrow){max-width:280px;margin:19px 0 24px;font-size:14px}
  .hero h1{font-size:clamp(45px,13vw,56px);line-height:.96}
  .hero-image{width:min(76vw,320px);right:-12vw;bottom:58px;opacity:.48}
  .hero-image span{left:-7%;bottom:7%;max-width:170px;line-height:1.35}
  .scroll{left:24px;bottom:18px}
  .section{padding:70px 24px}
  h2{font-size:clamp(42px,12.5vw,54px);line-height:.98}
  .section-intro>p:not(.eyebrow),.booking-heading>p:not(.eyebrow){margin:18px 0 25px;font-size:14px}
  .route{gap:31px 8px}
  .zone-node{padding:0 2px}
  .zone-node b{font-size:20px}
  .zone-node strong{font-size:28px}
  .booking-layout{gap:12px}
  .booking-form{padding:25px 18px}
  .booking-kind{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .booking-kind input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
  .booking-kind label span{min-height:42px;display:grid;place-items:center;text-align:center;line-height:1.18}
  .group-block{padding:14px 12px;margin-bottom:20px}
  .ticket{padding:25px 20px;min-height:auto}
  .ticket-data{grid-template-columns:1fr 1fr}
  .ticket-data strong{font-size:18px;overflow-wrap:anywhere}
  .ticket-total{margin-top:24px}
  .video-section{gap:28px}
  .video-section h2{font-size:clamp(42px,12.5vw,54px)}
  .video-frame{width:100%;max-width:390px;aspect-ratio:4/5}
  .video-overlay{padding:12px}
  .video-overlay button{padding:8px 9px;font-size:8px}
  .gallery-window{margin-right:-24px;padding-right:24px}
  .gallery-hint{max-width:285px;line-height:1.5}
  .contact{min-height:0}
  footer{padding:21px 24px}
}
@media(max-width:360px){
  .hero{min-height:670px;padding-left:20px;padding-right:20px}
  .hero h1{font-size:44px}
  .section{padding-left:20px;padding-right:20px}
  .booking-kind{gap:5px}
  .booking-kind label span{padding:8px 5px;font-size:9px}
  .fields{gap:19px}
  .ticket-data{grid-template-columns:1fr}
  .gallery-window{margin-right:-20px;padding-right:20px}
}

/* Hero mark: display the brand as a clean round emblem, without its square canvas. */
.hero-image{aspect-ratio:1;border-radius:50%;overflow:hidden}
.hero-image:before,.hero-image span{display:none}
.hero-image img{width:100%;height:100%;object-fit:cover;clip-path:circle(50%)}

/* Locations belong to the round brand mark, not inside its artwork. */
.hero-image{overflow:visible}
.hero-image:after{content:"Rabat · Salé · Témara";position:absolute;left:50%;bottom:-31px;transform:translateX(-50%);width:max-content;color:var(--gold);font:700 10px "DM Sans",sans-serif;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap}
.trust span{display:inline-flex;align-items:center;gap:7px;border-radius:999px;background:rgba(215,170,96,.06);padding:10px 14px;cursor:default}.trust span:before{content:"•";font-size:16px;line-height:0;color:var(--gold)}
@media(max-width:780px){.hero-image:after{bottom:-25px;font-size:8px;letter-spacing:.11em}.trust{gap:8px}.trust span{padding:8px 10px;font-size:8px}.booking-form{border:1px solid rgba(247,240,228,.09)}input[type="date"]{min-height:42px}.contact>div{gap:14px}}

/* A real, compact date picker keeps booking clear on every screen. */
.date-field{position:relative}.date-control{display:flex;align-items:center;border-bottom:1px solid rgba(247,240,228,.3);transition:border-color .2s}.date-control:focus-within{border-color:var(--gold)}.date-control input{border:0;min-width:0;cursor:pointer}.date-control button{display:grid;place-items:center;width:34px;height:34px;border:0;background:transparent;color:var(--gold);font-size:19px;cursor:pointer;transition:transform .2s,color .2s}.date-control button:hover{color:var(--pale);transform:scale(1.1)}.calendar-popover{position:absolute;z-index:25;top:calc(100% + 9px);left:0;width:min(320px,calc(100vw - 48px));padding:14px;background:#171511;border:1px solid rgba(215,170,96,.5);box-shadow:0 22px 50px rgba(0,0,0,.44);border-radius:2px;animation:calendarIn .22s ease both}.calendar-top{display:grid;grid-template-columns:36px 1fr 36px;align-items:center;margin-bottom:12px}.calendar-top strong{text-align:center;color:var(--pale);font-size:13px;text-transform:capitalize}.calendar-top button{height:30px;border:1px solid rgba(247,240,228,.18);background:transparent;color:var(--gold);cursor:pointer}.calendar-top button:disabled{opacity:.25;cursor:default}.calendar-weekdays,.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}.calendar-weekdays{margin-bottom:5px;color:var(--muted);font-size:9px;text-transform:uppercase}.calendar-days span,.calendar-days button{height:33px}.calendar-days button{border:0;background:transparent;color:var(--pale);font:600 12px "DM Sans",sans-serif;cursor:pointer;border-radius:50%;transition:background .18s,color .18s,transform .18s}.calendar-days button:not(:disabled):hover{background:rgba(215,170,96,.18);color:var(--gold);transform:translateY(-1px)}.calendar-days button.selected{background:var(--gold);color:#191208}.calendar-days button:disabled{color:rgba(181,172,159,.25);cursor:default}@keyframes calendarIn{from{opacity:0;transform:translateY(-7px) scale(.98)}to{opacity:1;transform:none}}

/* Section arrivals and the booking action feel intentional, without slowing the page. */
main>section:not(.hero){position:relative;isolation:isolate;overflow:hidden}main>section:not(.hero)>*{position:relative;z-index:1}main>section:not(.hero):after{content:"";position:absolute;z-index:0;left:-35%;top:0;width:30%;height:100%;background:linear-gradient(90deg,transparent,rgba(215,170,96,.11),transparent);transform:skewX(-18deg);opacity:0}.section-awake:after{animation:sectionSweep .9s cubic-bezier(.2,.7,.2,1) both}@keyframes sectionSweep{0%{left:-35%;opacity:0}25%{opacity:1}100%{left:110%;opacity:0}}
.booking-spark{position:fixed;z-index:80;inset:0;pointer-events:none;opacity:0}.booking-spark span{position:absolute;left:50%;top:50%;color:var(--gold);font-size:clamp(38px,6vw,74px);transform:translate(-50%,-50%) rotate(-38deg) scale(.65);filter:drop-shadow(0 0 15px rgba(215,170,96,.45))}.booking-spark i{position:absolute;top:50%;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);width:min(42vw,440px);opacity:0}.booking-spark i:first-of-type{right:50%;transform:translateY(-12px)}.booking-spark i:last-of-type{left:50%;transform:translateY(12px)}.booking-spark.active{animation:sparkFade .76s ease both}.booking-spark.active span{animation:scissorCut .58s cubic-bezier(.2,.8,.2,1) both}.booking-spark.active i{animation:cutLine .52s .08s ease both}@keyframes sparkFade{0%,76%{opacity:0}12%,62%{opacity:1}100%{opacity:0}}@keyframes scissorCut{0%{transform:translate(-50%,-50%) rotate(-38deg) scale(.65)}55%{transform:translate(-50%,-50%) rotate(6deg) scale(1.06)}100%{transform:translate(-50%,-50%) rotate(25deg) scale(.9)}}@keyframes cutLine{0%{opacity:0;transform:translateY(0) scaleX(.1)}45%{opacity:1}100%{opacity:0;transform:translateY(0) scaleX(1)}}

@media(hover:hover) and (pointer:fine){.button,.zone-node,.menu-button,.close,.language button,.date-control button,.calendar-top button,.calendar-days button{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8m0 16a4 4 0 1 0 0 8 4 4 0 0 0 0-8M11 10l14 14M11 22l14-14' fill='none' stroke='%23d7aa60' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 6 6, pointer}}
@media(max-width:780px){.calendar-popover{width:min(320px,calc(100vw - 72px));left:auto;right:0}.date-control input{font-size:14px}.calendar-days span,.calendar-days button{height:36px}.booking-spark span{font-size:55px}}
@media(prefers-reduced-motion:reduce){.booking-spark,.section-awake:after{animation:none!important;display:none}.calendar-popover{animation:none}}

/* Keep the original round mark, without the dark square around it. */
.brand img,.drawer-logo,footer img{border-radius:50%;clip-path:circle(50%)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.kids-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:15px 18px;border:1px solid #61d9cf;border-radius:999px;background:rgba(97,217,207,.12);color:#c9fffa;font-size:11px;font-weight:800;letter-spacing:.06em;transition:transform .22s,background .22s,box-shadow .22s}.kids-button b{color:#ffcf5a;font-size:16px}.kids-button:hover{transform:translateY(-3px) rotate(-1deg);background:#1f938e;box-shadow:0 12px 28px rgba(57,207,194,.24)}.kids-menu-link{color:#aefaf3!important}.kids-menu-link b{color:#ffcf5a;font-size:.5em;vertical-align:middle}@media(max-width:430px){.hero-actions{display:grid;align-items:stretch}.kids-button{width:100%;justify-content:space-between}}
