/* ═══ SIDI MBAREK — SHARED PUBLIC STYLES (home, experience, booking pages) ═══ */
:root{
--ocean:#0B3D6B;--ocean-l:#1A5C8F;--ocean-d:#062740;--ocean-m:rgba(11,61,107,.08);
--green:#1B5E3A;--green-l:#2D8A5A;--green-m:rgba(27,94,58,.1);
--sand:#D4A96A;--sand-l:#E8C98A;--sand-p:#F5E8CC;
--orange:#C95E28;--orange-l:#E07035;
--cream:#F7F2E8;--cream-d:#EDE4CC;--cream-deep:#E4D9C0;
--brown:#5C3D2E;--brown-l:#7A5440;--brown-d:#3A2216;
--gold:#C4973A;--white:#FFFDF8;--red:#B42318;
--font-d:"Cormorant Garamond",Georgia,serif;
--font-b:"DM Sans",-apple-system,"Segoe UI",sans-serif;
--r8:8px;--r12:12px;--r16:16px;--r20:20px;--r24:24px;--r999:999px;
--sh:0 2px 8px rgba(11,61,107,.08);--sh-md:0 6px 24px rgba(11,61,107,.12);
--sh-lg:0 16px 48px rgba(11,61,107,.16);--sh-xl:0 28px 72px rgba(11,61,107,.2);
--sh-warm:0 8px 28px rgba(201,94,40,.22);
--ease:cubic-bezier(.22,.61,.36,1);
--pad:clamp(16px,5vw,64px);--container:1240px;--header-h:76px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);-webkit-text-size-adjust:100%;}
body{font-family:var(--font-b);color:var(--brown-d);background:var(--cream);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.65;}
img{max-width:100%;display:block;}a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:none;cursor:pointer;}
h1,h2,h3,h4{font-family:var(--font-d);line-height:1.12;letter-spacing:-.01em;}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad);}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:999;background:var(--orange);color:#fff;padding:8px 14px;border-radius:8px;}
.skip-link:focus{left:8px;}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px;}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}}
[hidden]{display:none!important;}

/* ═══ SECTION COMMON ═══ */
.section{padding-block:clamp(64px,10vw,120px);}
.section-label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-bottom:10px;}
.section-head{margin-bottom:clamp(28px,4vw,44px);}
.section-head h2{font-size:clamp(2rem,4.2vw,3rem);font-weight:700;color:var(--ocean);margin-bottom:.45em;}
.section-head .lede{font-size:1.02rem;color:var(--brown-l);max-width:58ch;line-height:1.75;}
.section-head.centered{text-align:center;}
.section-head.centered .lede{margin-inline:auto;}
.section-head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;}
.sand-bg{background:var(--cream-d);}

/* ═══ BUTTONS ═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-weight:600;font-size:.94rem;line-height:1.2;padding:.9em 1.6em;min-height:44px;border-radius:var(--r999);transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,border-color .2s,color .2s;white-space:nowrap;text-align:center;}
.btn svg{width:17px;height:17px;flex-shrink:0;}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important;}
.btn-ocean{background:var(--ocean);color:#fff;box-shadow:var(--sh);}
.btn-ocean:hover{background:var(--ocean-l);transform:translateY(-2px);box-shadow:var(--sh-md);}
.btn-orange{background:var(--orange);color:#fff;box-shadow:var(--sh-warm);}
.btn-orange:hover{background:var(--orange-l);transform:translateY(-2px);}
.btn-cream{background:var(--cream);color:var(--ocean);}
.btn-cream:hover{background:#fff;transform:translateY(-2px);}
.btn-ghost-cream{background:transparent;color:var(--cream);border:1.5px solid rgba(247,242,232,.45);}
.btn-ghost-cream:hover{background:rgba(247,242,232,.12);border-color:var(--cream);}
.btn-ghost-ocean{background:transparent;color:var(--ocean);border:1.5px solid rgba(11,61,107,.28);}
.btn-ghost-ocean:hover{border-color:var(--ocean);background:var(--ocean-m);}
.btn-sm{padding:.6em 1.15em;font-size:.86rem;min-height:38px;}
.btn-block{width:100%;}

/* ═══ HEADER ═══ */
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .35s,box-shadow .35s;}
.site-header.at-top{background:linear-gradient(180deg,rgba(6,39,64,.55),rgba(6,39,64,0));}
.site-header.scrolled,.site-header.solid{background:rgba(6,39,64,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 2px 20px rgba(0,0,0,.18);}
.header-inner{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad);height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:16px;}
.site-logo{display:flex;align-items:center;gap:11px;min-width:0;}
.site-logo img.logo-img{height:44px;width:auto;max-width:160px;object-fit:contain;}
.site-logo-text{display:flex;flex-direction:column;min-width:0;}
.site-logo-name{font-family:var(--font-d);font-size:1.28rem;font-weight:700;color:#F7F2E8;letter-spacing:.06em;line-height:1;white-space:nowrap;}
.site-logo-tagline{font-size:.58rem;font-weight:600;color:var(--sand);letter-spacing:.18em;text-transform:uppercase;line-height:1;margin-top:4px;white-space:nowrap;}
.main-nav ul{display:flex;gap:clamp(12px,1.8vw,26px);list-style:none;padding:0;}
.main-nav a{font-size:.9rem;font-weight:500;color:rgba(247,242,232,.82);padding-block:.3em;position:relative;transition:color .2s;white-space:nowrap;}
.main-nav a::after{content:'';position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;background:var(--sand);transition:right .3s var(--ease);}
.main-nav a:hover{color:#fff;}.main-nav a:hover::after{right:0;}
.header-actions{display:flex;align-items:center;gap:6px;}
.h-social{display:flex;gap:2px;margin-right:4px;}
.h-icon-btn{width:40px;height:40px;border-radius:var(--r8);display:flex;align-items:center;justify-content:center;color:rgba(247,242,232,.8);transition:background .2s,color .2s;}
.h-icon-btn:hover{background:rgba(247,242,232,.12);color:#fff;}
.h-icon-btn svg{width:18px;height:18px;}
.nav-toggle{display:none;width:44px;height:44px;border-radius:var(--r8);color:#F7F2E8;align-items:center;justify-content:center;}
@media(max-width:1060px){.main-nav{display:none;}.nav-toggle{display:flex;}.h-social{display:none;}}
@media(max-width:520px){.hdr-reserve{display:none;}.site-logo-tagline{display:none;}}
.nav-overlay{position:fixed;inset:0;background:rgba(6,39,64,.7);opacity:0;visibility:hidden;z-index:150;transition:opacity .3s,visibility .3s;}
.nav-overlay.open{opacity:1;visibility:visible;}
.mobile-nav{position:fixed;top:0;right:0;bottom:0;width:min(88vw,360px);z-index:160;background:var(--ocean-d);box-shadow:-8px 0 32px rgba(0,0,0,.3);padding:22px 24px;display:flex;flex-direction:column;gap:20px;transform:translateX(100%);transition:transform .35s var(--ease);overflow-y:auto;visibility:hidden;}
.mobile-nav.open{transform:none;visibility:visible;}
.mobile-nav-top{display:flex;justify-content:space-between;align-items:center;color:#F7F2E8;font-family:var(--font-d);font-weight:700;font-size:1.1rem;letter-spacing:.06em;}
.mobile-nav ul{display:flex;flex-direction:column;list-style:none;padding:0;}
.mobile-nav ul a{display:block;padding:.8em 0;font-size:1.08rem;font-family:var(--font-d);font-weight:600;color:rgba(247,242,232,.88);border-bottom:1px solid rgba(247,242,232,.08);}
.mobile-nav .m-social{display:flex;gap:8px;flex-wrap:wrap;}

/* ═══ SOCIAL ICONS ═══ */
.social-list{display:flex;gap:9px;flex-wrap:wrap;}
.social-list a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(212,169,106,.28);display:flex;align-items:center;justify-content:center;color:rgba(247,242,232,.85);transition:background .2s,border-color .2s,color .2s;}
.social-list a:hover{background:var(--orange);border-color:var(--orange);color:#fff;}
.social-list svg{width:16px;height:16px;}

/* ═══ EXPERIENCE CARDS (uniform) ═══ */
.xp-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));}
.xp-card{background:var(--white);border-radius:var(--r20);overflow:hidden;box-shadow:var(--sh);display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s;border:1px solid rgba(212,169,106,.18);min-width:0;}
.xp-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);}
.xp-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(135deg,var(--ocean),var(--green));flex-shrink:0;}
.xp-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.xp-card:hover .xp-media img{transform:scale(1.06);}
.xp-badges{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;gap:8px;align-items:flex-start;pointer-events:none;}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:700;letter-spacing:.03em;padding:.38em .8em;border-radius:var(--r999);white-space:nowrap;line-height:1.2;}
.pill-feat{background:var(--orange);color:#fff;}
.pill-ok{background:rgba(255,253,248,.95);color:var(--green);}
.pill-low{background:rgba(255,253,248,.95);color:#9A5B00;}
.pill-full{background:rgba(255,253,248,.95);color:var(--red);}
.pill-dot::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;}
.xp-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;min-width:0;}
.xp-loc{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-bottom:6px;display:flex;align-items:center;gap:5px;min-width:0;}
.xp-loc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.xp-loc svg{width:12px;height:12px;flex-shrink:0;}
.xp-body h3{font-size:1.38rem;color:var(--ocean);margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;}
.xp-body h3 a:hover{color:var(--orange);}
.xp-desc{font-size:.92rem;color:var(--brown-l);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:14px;overflow-wrap:anywhere;}
.xp-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.82rem;color:var(--brown-l);margin-bottom:16px;}
.xp-meta span{display:inline-flex;align-items:center;gap:6px;}
.xp-meta svg{width:15px;height:15px;color:var(--sand);flex-shrink:0;}
.xp-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--cream-d);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.xp-price{line-height:1.15;}
.xp-price small{display:block;font-size:.7rem;color:var(--brown-l);text-transform:uppercase;letter-spacing:.08em;font-weight:600;}
.xp-price strong{font-family:var(--font-d);font-size:1.5rem;color:var(--ocean);}
.xp-price em{font-style:normal;font-size:.8rem;color:var(--brown-l);}
.xp-actions{display:flex;gap:8px;}
.xp-empty{grid-column:1/-1;text-align:center;padding:48px 20px;color:var(--brown-l);background:var(--white);border-radius:var(--r20);}

/* ═══ FOOTER ═══ */
.site-footer{background:var(--ocean-d);color:rgba(247,242,232,.75);padding-top:clamp(52px,8vw,84px);}
.footer-grid{display:grid;gap:36px;grid-template-columns:1fr;padding-bottom:48px;border-bottom:1px solid rgba(212,169,106,.15);}
@media(min-width:640px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:980px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.3fr;}}
.footer-brand p{margin-block:14px 18px;max-width:36ch;font-size:.9rem;line-height:1.7;}
.footer-col h4{font-family:var(--font-d);font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sand-l);margin-bottom:14px;}
.footer-col ul{display:flex;flex-direction:column;gap:10px;font-size:.9rem;list-style:none;padding:0;}
.footer-col a:hover{color:#fff;}
.contact-list li{display:flex;gap:10px;align-items:flex-start;overflow-wrap:anywhere;}
.contact-list svg{width:16px;height:16px;color:var(--sand);flex-shrink:0;margin-top:3px;}
.f-bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;padding-block:20px 26px;font-size:.82rem;}
.f-bottom ul{display:flex;gap:18px;flex-wrap:wrap;list-style:none;padding:0;}
.f-bottom a:hover{color:#fff;}

/* ═══ WHATSAPP FLOAT ═══ */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:300;width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.22);transition:transform .2s;}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:28px;height:28px;}

/* ═══ FORMS ═══ */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;min-width:0;}
.field label{font-size:.8rem;font-weight:700;color:var(--ocean);letter-spacing:.02em;}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--cream-deep);border-radius:var(--r12);background:#fff;font-size:1rem;color:var(--brown-d);outline:none;transition:border-color .2s,box-shadow .2s;min-height:46px;}
.field textarea{resize:vertical;min-height:84px;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ocean);box-shadow:0 0 0 3px rgba(11,61,107,.12);}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--red);}
.field-err{font-size:.78rem;color:var(--red);font-weight:600;min-height:0;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:480px){.field-row{grid-template-columns:1fr;}}
.alert{padding:12px 14px;border-radius:var(--r12);font-size:.9rem;font-weight:500;margin-bottom:14px;}
.alert-err{background:#FDECEA;color:var(--red);border:1px solid #F6C6C0;}
.alert-ok{background:#E7F4EC;color:var(--green);border:1px solid #BFE1CB;}
.alert-info{background:var(--ocean-m);color:var(--ocean);border:1px solid rgba(11,61,107,.15);}

/* ═══ TOAST ═══ */
.toast-con{position:fixed;bottom:84px;right:16px;left:auto;z-index:700;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:calc(100vw - 32px);}
.toast{display:flex;align-items:center;gap:9px;padding:12px 15px;border-radius:var(--r12);font-size:.88rem;font-weight:600;max-width:340px;box-shadow:var(--sh-lg);animation:toIn .3s var(--ease);transition:opacity .3s,transform .3s;}
.toast.bye{opacity:0;transform:translateX(12px);}
@keyframes toIn{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}
.t-ok{background:var(--green);color:#fff;}.t-err{background:var(--red);color:#fff;}
.t-inf{background:var(--ocean);color:#fff;}.t-wrn{background:var(--gold);color:var(--brown-d);}

/* ═══ SKELETON ═══ */
.skel{background:linear-gradient(90deg,var(--cream-d) 25%,var(--cream) 50%,var(--cream-d) 75%);background-size:200% 100%;animation:sk 1.4s infinite;border-radius:var(--r12);}
@keyframes sk{to{background-position:-200% 0;}}
