[hidden]:not([hidden=until-found i]){display:none!important}

/* ---------- tokens: warm monochrome + spot pastels ---------- */
:root{
  color-scheme:light;
  --canvas:#F7F6F3;
  --surface:#FFFFFF;
  --surface-2:#FBFBFA;
  --ink:#2F3437;
  --ink-strong:#111111;
  --muted:#787774;
  --line:#EAEAEA;
  --line-strong:#D9D8D4;

  --sand-bg:#FBF3DB;  --sand-fg:#956400;
  --green-bg:#EDF3EC; --green-fg:#346538;
  --blue-bg:#E1F3FE;  --blue-fg:#1F6C9F;

  --wa:#25D366; --wa-hover:#1FBE5B; --wa-ink:#0B2A17;

  --radius:12px;
  --radius-sm:6px;
  --ease:cubic-bezier(.16,1,.3,1);
  --lift:0 2px 8px rgba(0,0,0,.04);

  --font-heading:"Secular One","Segoe UI",sans-serif;
  --font-body:"Rubik","Segoe UI",sans-serif;
  --font-mono:"SF Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;direction:rtl;scroll-padding-top:env(safe-area-inset-top,0px);}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font:1rem/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;
  direction:rtl;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* ambient warm light, fixed so it never repaints with scroll */
body::before{
  content:"";position:fixed;inset:-20vmax;z-index:-1;pointer-events:none;
  background:radial-gradient(40vmax 40vmax at 80% 10%, rgba(214,180,130,.10), transparent 70%);
  animation:drift 28s ease-in-out infinite alternate;
}
@keyframes drift{to{transform:translate3d(-8vmax,12vmax,0);}}

img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3{font-family:var(--font-heading);font-weight:400;text-wrap:balance;margin:0;color:var(--ink-strong);line-height:1.15;}
.wrap{width:100%;max-width:1040px;margin-inline:auto;padding-inline:20px;}
section{padding-block:clamp(4rem,10vw,7.5rem);}
main > section.wrap + section.wrap{border-top:1px solid var(--line);}

/* ---------- hero (photo kept) ---------- */
.hero{
  position:relative;
  min-height:min(92vh,760px);
  display:flex;align-items:flex-end;
  background:#1b1a18 url("images/new_background.jpg") center/cover no-repeat;
  color:#fff;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(17,17,17,.10) 0%, rgba(17,17,17,.25) 45%, rgba(17,17,17,.72) 100%);
}
.hero .wrap{position:relative;z-index:1;padding-block:clamp(2.5rem,8vw,5rem);}
.hero-logo{
  display:block;
  width:min(300px,60vw);
  margin-inline:auto;
  margin-bottom:2rem;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.35));
}
.hero-eyebrow{
  display:inline-block;
  color:var(--ink-strong);
  background:rgba(255,255,255,.88);
  padding:.3rem .8rem;border-radius:9999px;
  font-size:.78rem;font-weight:500;
  margin-bottom:1.1rem;
}
.hero h1{
  color:#fff;
  font-size:clamp(2rem,5vw,3.5rem);
  line-height:1.1;
  max-width:22ch;
}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-block-start:2rem;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.8rem 1.35rem;border-radius:var(--radius-sm);
  font:500 1rem/1.2 var(--font-body);
  text-decoration:none;border:1px solid transparent;
  cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.btn:active{transform:scale(.98);}
.btn svg{width:18px;height:18px;flex:none;}
.btn .wa-icon{width:20px;height:20px;flex:none;object-fit:contain;border-radius:50%;box-shadow:0 0 0 1.5px #fff;}
.btn-primary{background:var(--ink-strong);color:#fff;}
.btn-primary:hover{background:#333;}
.btn-wa{background:var(--wa);color:var(--wa-ink);font-weight:600;}
.btn-wa:hover{background:var(--wa-hover);}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.45);}
.btn-ghost:hover{background:rgba(255,255,255,.16);}
.btn-outline{background:var(--surface);color:var(--ink-strong);border-color:var(--line-strong);}
.btn-outline:hover{border-color:var(--ink-strong);}
.btn:focus-visible,.a11y-toggle:focus-visible{outline:2px solid var(--ink-strong);outline-offset:3px;}

/* ---------- facts strip ---------- */
.facts{
  display:grid;grid-template-columns:repeat(3,1fr);
  max-width:1040px;margin-inline:auto;
  border-bottom:1px solid var(--line);
}
.fact{padding:2rem 1rem;text-align:center;}
.fact + .fact{border-inline-start:1px solid var(--line);}
.fact strong{display:block;font-family:var(--font-heading);font-weight:400;font-size:2.4rem;line-height:1;color:var(--ink-strong);margin-bottom:.4rem;}
.fact span{font-size:.9rem;color:var(--muted);}

/* ---------- section heading ---------- */
.section-head{max-width:40rem;margin-bottom:3rem;}
.kicker{
  display:inline-block;
  background:var(--sand-bg);color:var(--sand-fg);
  font-size:.78rem;font-weight:500;
  padding:.25rem .75rem;border-radius:9999px;
  margin-bottom:1rem;
}
.section-head h2{font-size:clamp(1.9rem,4vw,2.75rem);}
.section-head p{color:var(--muted);margin:.9rem 0 0;font-size:1.05rem;max-width:36rem;}

/* ---------- features: bento ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
.feature:nth-child(1),.feature:nth-child(4){grid-column:span 2;}
.feature{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2.25rem);
  transition:box-shadow .2s ease;
}
.feature:hover{box-shadow:var(--lift);}
.feature .ico{
  width:40px;height:40px;border-radius:8px;
  background:var(--sand-bg);color:var(--sand-fg);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.5rem;
}
.feature:nth-child(2) .ico{background:var(--blue-bg);color:var(--blue-fg);}
.feature:nth-child(3) .ico{background:var(--green-bg);color:var(--green-fg);}
.feature .ico svg{width:20px;height:20px;stroke-width:2.25;}
.feature h3{font-size:1.25rem;margin-bottom:.5rem;}
.feature p{color:var(--muted);font-size:.97rem;margin:0;max-width:44ch;}
@media (max-width:760px){
  .feature-grid{grid-template-columns:1fr;}
  .feature:nth-child(1),.feature:nth-child(4){grid-column:auto;}
}

/* ---------- gallery ---------- */
.gal-group{margin-bottom:3.5rem;}
.gal-group:last-child{margin-bottom:0;}
.gal-group h3{
  font-family:var(--font-body);font-weight:500;font-size:.95rem;
  color:var(--muted);
  margin:0 0 .9rem;
}
/* scroll-snap strip: centered slide, half of each neighbour visible and faded */
.carousel{--slide:50%;position:relative;width:100%;}
.carousel-track{
  position:relative;
  display:flex;gap:1rem;direction:ltr;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-inline:calc((100% - var(--slide)) / 2);
  padding-block:.25rem;
  scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{display:none;}
.carousel-track > *{
  /* track content box = var(--slide) of the strip, so 100% here is one slide */
  flex:0 0 100%;width:100%;
  scroll-snap-align:center;
  opacity:.4;transform:scale(.9);filter:saturate(.7);
  cursor:pointer;
  transition:opacity .5s var(--ease), transform .5s var(--ease), filter .5s var(--ease);
}
.carousel-track > img{
  aspect-ratio:3/2;object-fit:cover;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface-2);
}
.carousel-track > .is-active{opacity:1;transform:none;filter:saturate(.92);cursor:default;}
.carousel-track > :hover:not(.is-active){opacity:.6;}
.carousel-track > :focus-visible{outline:2px solid var(--ink-strong);outline-offset:3px;}
/* loop jump: swap clone for original without a visible fade */
.carousel-track.no-anim > *{transition:none;}
@media (max-width:640px){ .carousel{--slide:72%;} }

/* ---------- attractions: same strip, card slides ---------- */
.attraction{
  direction:rtl;
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.attraction img{order:-1;width:100%;aspect-ratio:16/10;object-fit:cover;border-bottom:1px solid var(--line);}
.attraction h3{font-size:1.2rem;padding:1.4rem 1.5rem 0;}
.attraction p{margin:0;padding:.5rem 1.5rem 1.6rem;font-size:.95rem;color:var(--muted);}

/* ---------- faq ---------- */
.faq{max-width:760px;border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);padding-block:1.6rem;}
.faq-item h3{font-family:var(--font-body);font-weight:500;font-size:1.12rem;margin-bottom:.45rem;}
.faq-item p{margin:0;color:var(--muted);font-size:1rem;max-width:60ch;white-space:pre-line;}

/* ---------- final cta ---------- */
.cta-band{
  position:relative;overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(2.5rem,7vw,5rem) clamp(1.5rem,5vw,3rem);
  text-align:center;
}
.cta-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 80% at 50% 0%, rgba(214,180,130,.12), transparent 70%);
}
.cta-band > *{position:relative;}
.cta-band h2{font-size:clamp(1.9rem,4.5vw,2.75rem);}
.cta-band p{color:var(--muted);max-width:44ch;margin:.9rem auto 0;}
.cta-band .hero-ctas{justify-content:center;}
.cta-band .btn-ghost{background:var(--surface);color:var(--ink-strong);border-color:var(--line-strong);}
.cta-band .btn-ghost:hover{border-color:var(--ink-strong);}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:2.5rem 20px 6rem;
  text-align:center;
  color:var(--muted);
  font-size:.85rem;
}
.brand{display:inline-flex;align-items:center;text-decoration:none;margin-bottom:.6rem;}
footer .brand img.jm-logo{width:96px;height:auto;object-fit:contain;}

/* ---------- floating WhatsApp button (unchanged) ---------- */
.wa-float{position:fixed;bottom:20px;left:20px;z-index:999;display:block;text-decoration:none;}
.wa-float-wrap{position:relative;width:60px;height:60px;}
.wa-float-glow{position:absolute;inset:0;border-radius:50%;background:#25D366;filter:blur(14px);opacity:.55;transition:opacity .25s ease;}
.wa-float:hover .wa-float-glow{opacity:.8;}
.wa-float-ring{position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:wa-ping 2s cubic-bezier(0,0,.2,1) infinite;}
.wa-float-btn{position:relative;width:60px;height:60px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px hsla(25,30%,10%,.35);transition:transform .25s ease, box-shadow .25s ease;}
.wa-float-btn svg{width:30px;height:30px;color:#fff;}
.wa-float:hover .wa-float-btn{transform:scale(1.08);box-shadow:0 14px 36px hsla(25,30%,10%,.4);}
@keyframes wa-ping{0%{transform:scale(1);opacity:.6;}75%,100%{transform:scale(1.7);opacity:0;}}
@media (max-width:480px){
  .wa-float{bottom:16px;left:16px;}
  .wa-float-wrap{width:52px;height:52px;}
  .wa-float-btn svg{width:26px;height:26px;}
}

/* ---------- accessibility widget: round float + card (mirrors the WhatsApp float) ---------- */
.a11y-toggle{
  position:fixed;bottom:20px;right:20px;z-index:999;
  width:60px;height:60px;border-radius:50%;cursor:pointer;
  background:var(--sand-bg);color:var(--sand-fg);border:2px solid var(--sand-fg);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px hsla(25,30%,10%,.25);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.a11y-toggle:hover,.a11y-toggle[aria-expanded="true"]{transform:scale(1.08);box-shadow:0 14px 36px hsla(25,30%,10%,.3);}
.a11y-toggle:active{transform:scale(.98);}
.a11y-toggle svg{width:32px;height:32px;}

.a11y-panel{
  position:fixed;bottom:92px;right:20px;z-index:1000;
  width:min(340px,calc(100vw - 32px));max-height:calc(100dvh - 120px);overflow-y:auto;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 12px 40px hsla(25,30%,10%,.12);
  padding:1.1rem 1.2rem 1.2rem;
  display:flex;flex-direction:column;gap:.9rem;
  transform-origin:bottom right;
  animation:a11y-in .3s var(--ease);
}
@keyframes a11y-in{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:none;}}
.a11y-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:.7rem;border-bottom:1px solid var(--line);}
.a11y-head h2{margin:0;font-family:var(--font-heading);font-size:1.35rem;font-weight:400;color:var(--ink-strong);}
.a11y-close{background:none;border:none;color:var(--muted);cursor:pointer;padding:.3rem;display:flex;border-radius:var(--radius-sm);}
.a11y-close svg{width:22px;height:22px;}
.a11y-close:hover{background:var(--canvas);color:var(--ink-strong);}

.a11y-chips{display:flex;flex-wrap:wrap;gap:.5rem;}
.a11y-chip{
  padding:.45rem .9rem;border-radius:9999px;cursor:pointer;font:inherit;font-size:.88rem;font-weight:500;
  background:var(--sand-bg);color:var(--sand-fg);border:1px solid transparent;
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.a11y-chip:hover{border-color:var(--sand-fg);}
.a11y-chip:active{transform:scale(.97);}
.a11y-chip[aria-pressed="true"]{background:var(--ink-strong);color:#fff;}

.a11y-step{display:grid;grid-template-columns:1fr 36px 3.6rem 36px;align-items:center;gap:.4rem;padding-top:.7rem;border-top:1px solid var(--line);}
.a11y-step span{font-size:.95rem;color:var(--ink-strong);}
.a11y-step button{
  height:36px;border-radius:var(--radius-sm);cursor:pointer;
  background:var(--surface);border:1px solid var(--line-strong);color:var(--ink-strong);font:500 1.15rem/1 var(--font-body);
}
.a11y-step button:hover{background:var(--canvas);}
.a11y-step output{text-align:center;font-family:var(--font-mono);font-size:.9rem;color:var(--ink);}
.a11y-reset{
  margin-top:.3rem;padding:.75rem;border-radius:var(--radius-sm);cursor:pointer;
  background:var(--ink-strong);color:#fff;border:none;font:inherit;font-weight:500;
}
.a11y-reset:hover{background:#333;}
.a11y-reset:active{transform:scale(.98);}
.a11y-toggle:focus-visible,.a11y-panel button:focus-visible{outline:2px solid var(--ink-strong);outline-offset:2px;}

@media (max-width:480px){
  .a11y-toggle{bottom:16px;right:16px;width:52px;height:52px;}
  .a11y-toggle svg{width:28px;height:28px;}
  .a11y-panel{bottom:80px;right:16px;}
}
@media (prefers-reduced-motion:reduce){ .a11y-panel{animation:none;} }

/* applied settings (filters are set inline by script.js so they can combine) */
html.a11y-links a{text-decoration:underline!important;text-underline-offset:3px;outline:2px solid var(--sand-fg);outline-offset:2px;}
html.a11y-font body, html.a11y-font body *{font-family:Arial,"Segoe UI",sans-serif!important;}
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
html.a11y-spacing body *{word-spacing:var(--a11y-word)!important;letter-spacing:var(--a11y-letter)!important;}
html.a11y-invert img, html.a11y-invert video{filter:invert(1) hue-rotate(180deg);}

/* ---------- reviews ---------- */
/* cards sit in the shared .carousel strip (track is ltr for the loop math) */
.review-card{
  direction:rtl;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.75rem 1.5rem;
}
.review-initials{
  width:44px;height:44px;border-radius:50%;margin-bottom:1rem;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue-bg);color:var(--blue-fg);
  font-weight:500;font-size:1rem;
}
.review-name{font-family:var(--font-body);font-weight:500;font-size:1.02rem;}
.review-meta{margin:.15rem 0 .9rem;color:var(--muted);font-size:.82rem;}
.review-source{display:inline-block;margin:-.6rem 0 .8rem;padding:.1rem .55rem;border:1px solid var(--muted);border-radius:999px;color:var(--muted);font-size:.72rem;letter-spacing:.02em;}
.reviews-carousel .carousel-track:not(.no-anim) > *{transition-duration:.9s;}
.review-text{margin:0;font-size:.97rem;line-height:1.75;color:var(--ink);}
.review-more{display:none;}
/* phones: wide, short card — initials beside the name, text clamped with "read more" */
@media (max-width:640px){
  .reviews-carousel{--slide:88%;}
  .review-card{display:grid;grid-template-columns:auto 1fr;column-gap:.85rem;align-content:start;padding:1.1rem 1.15rem 1.2rem;}
  .review-initials{grid-row:span 2;align-self:center;width:40px;height:40px;margin:0;}
  .review-name,.review-meta{grid-column:2;}
  .review-meta{margin:.1rem 0 0;}
  .review-source{grid-column:1/-1;justify-self:start;margin:.75rem 0 0;}
  .review-text{
    grid-column:1/-1;margin-top:.75rem;font-size:.93rem;line-height:1.65;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;
  }
  .review-card.is-open .review-text{display:block;-webkit-line-clamp:unset;line-clamp:none;overflow:visible;}
  .review-card.is-long .review-more,.review-card.is-open .review-more{
    display:inline-block;grid-column:1/-1;justify-self:start;
    margin-top:.4rem;padding:.25rem 0;background:none;border:0;
    font:inherit;font-size:.88rem;color:var(--ink-strong);text-decoration:underline;text-underline-offset:3px;cursor:pointer;
  }
}
.reviews-empty{color:var(--muted);font-size:1.02rem;}
.reviews-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem;}

/* ---------- scroll reveal (class added by script.js only) ---------- */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease), transform .6s var(--ease);transition-delay:calc(var(--i,0) * 80ms);}
.reveal.is-in{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  body::before,.wa-float-ring{animation:none;}
  .carousel-track > *{transition:none;}
  .reveal{opacity:1;transform:none;transition:none;}
  .btn:active,.wa-float:hover .wa-float-btn{transform:none;}
}