/* ============================================================
   NAKHLA — نخلا | Resort & Farm Destination
   Brand: brown #551F09 · light gray #EFEDE7 · peach #F1B096 · sage #888E6B
   ============================================================ */

/* Brand font — Shorooq (Arabic + Latin, joins via GSUB) */
@font-face{
  font-family:"Shorooq";
  src:url("../assets/fonts/Shorooq_N1.ttf?v=19") format("truetype");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --brown-950:#331103;
  --brown-900:#421704;
  --brown:#551F09;
  --brown-700:#6B2F12;
  --brown-100:#EEDDD2;
  --peach:#F1B096;
  --peach-soft:#F7D2C0;
  --peach-bg:#FBEFE7;
  --sage:#888E6B;
  --sage-dark:#6C7253;
  --sage-soft:#DDE0CE;
  --gray-bg:#A9AC8B;      /* السيج الفاتح - خلفية الهوية (من الباترن) */
  --gray-soft:#9CA07E;    /* سيج أعمق قليلًا للأقسام المتناوبة */
  --line:#DCD8CC;
  --field-bg:#F4F1E9;     /* خلفية حقول الإدخال */
  --card:#FFFFFF;
  --ink:#2E1A0E;
  --muted:#8C7B6D;
  --ok:#3E7C4F;
  --closed:#B3432B;
  --shadow-sm:0 1px 3px rgba(51,17,3,.08);
  --shadow:0 10px 30px -12px rgba(51,17,3,.25);
  --shadow-lg:0 24px 60px -20px rgba(51,17,3,.35);
  --r:18px;
  --r-lg:28px;
  --font-ar:'Shorooq','Almarai',sans-serif;
  --font-en:'Shorooq','Manrope','Almarai',sans-serif;
  --font:var(--font-ar);
  --header-h:72px;
}

html[lang="en"]{ --font:var(--font-en); }

/* letter-spacing breaks Arabic letter-joining — disable it entirely in RTL */
html[dir="rtl"] *{letter-spacing:normal !important}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--gray-bg);
  color:var(--ink);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:1rem;color:var(--ink)}
::selection{background:var(--peach);color:var(--brown-950)}

.container{width:min(1180px,92%);margin-inline:auto}

/* ---------- Header ---------- */
.site-header{
  position:fixed;inset-inline:0;top:0;z-index:200;
  height:var(--header-h);
  display:flex;align-items:center;
  transition:background .35s,box-shadow .35s;
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:16px}
.site-header.scrolled,
.site-header.solid{
  background:rgba(239,237,231,.92);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow-sm);
}
.brand{display:flex;align-items:center;gap:12px;color:var(--brown)}
.brand .mark{width:54px;height:46px;color:var(--brown);transition:color .35s}
.brand .wordmark{font-weight:800;font-size:1.25rem;letter-spacing:.5px;line-height:1.1}
.brand .wordmark small{display:block;font-size:.62rem;font-weight:700;letter-spacing:2.5px;color:var(--muted);text-transform:uppercase}

.main-nav{display:flex;align-items:center;gap:4px}
.main-nav a{
  padding:9px 14px;border-radius:999px;font-weight:700;font-size:.92rem;color:var(--ink);
  transition:background .25s,color .25s;white-space:nowrap;
}
.main-nav a:hover{background:var(--gray-soft)}
.main-nav a.active{background:var(--brown);color:var(--peach)}

/* transparent-over-hero variant (hero is light sage — keep brand browns) */
.site-header.on-hero:not(.scrolled){background:transparent}
.site-header.on-hero:not(.scrolled) .main-nav a:hover{background:rgba(85,31,9,.08)}
.site-header.on-hero:not(.scrolled) .lang-btn{border-color:var(--brown);color:var(--brown)}

.header-actions{display:flex;align-items:center;gap:10px}
.lang-btn{
  border:1.5px solid var(--brown);border-radius:999px;padding:7px 16px;
  font-weight:800;font-size:.85rem;color:var(--brown);letter-spacing:.5px;
  transition:all .25s;
}
.lang-btn:hover{background:var(--brown);color:var(--peach)}

.burger{display:none;flex-direction:column;gap:5px;padding:8px}
.burger span{width:24px;height:2.5px;border-radius:2px;background:var(--brown);transition:.3s}

/* mobile drawer */
.mobile-drawer{
  position:fixed;inset:0;z-index:300;pointer-events:none;
}
.mobile-drawer .scrim{position:absolute;inset:0;background:rgba(51,17,3,.5);opacity:0;transition:.3s}
.mobile-drawer .panel{
  position:absolute;top:0;bottom:0;inset-inline-start:0;width:min(320px,84%);
  background:var(--gray-bg);padding:28px 22px;display:flex;flex-direction:column;gap:6px;
  transform:translateX(calc(var(--dir,1) * -105%));transition:transform .35s cubic-bezier(.2,.8,.2,1);
  box-shadow:var(--shadow-lg);overflow-y:auto;
}
html[dir="ltr"] .mobile-drawer .panel{--dir:1}
html[dir="rtl"] .mobile-drawer .panel{--dir:-1}
html[dir="rtl"] .mobile-drawer .panel{transform:translateX(105%)}
html[ltr] .mobile-drawer .panel{transform:translateX(-105%)}
.mobile-drawer.open{pointer-events:auto}
.mobile-drawer.open .scrim{opacity:1}
.mobile-drawer.open .panel{transform:translateX(0)!important}
.mobile-drawer .panel .mark{width:52px;color:var(--brown);margin-bottom:14px}
.mobile-drawer a{padding:13px 14px;border-radius:14px;font-weight:800;font-size:1.05rem}
.mobile-drawer a.active{background:var(--brown);color:var(--peach)}
.mobile-drawer a:not(.active):hover{background:var(--gray-soft)}

/* bottom nav (mobile) */
.bottom-nav{
  display:none;
  position:fixed;bottom:0;inset-inline:0;z-index:210;
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.bottom-nav a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:.62rem;font-weight:800;color:var(--muted);padding:4px 2px;border-radius:12px;
}
.bottom-nav a svg{width:22px;height:22px}
.bottom-nav a.active{color:var(--brown)}
.bottom-nav a.active svg{color:var(--brown)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 28px;border-radius:999px;font-weight:800;font-size:1rem;
  transition:transform .2s,box-shadow .2s,background .25s,color .25s;
  will-change:transform;
}
.btn:active{transform:scale(.97)}
.btn svg{width:19px;height:19px}
.btn-primary{background:var(--brown);color:var(--peach);box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--brown-700);transform:translateY(-2px)}
.btn-peach{background:var(--peach);color:var(--brown-950)}
.btn-peach:hover{background:var(--peach-soft);transform:translateY(-2px)}
.btn-ghost{border:1.5px solid rgba(241,176,150,.55);color:var(--peach)}
.btn-ghost:hover{background:rgba(241,176,150,.12)}
.btn-outline{border:1.5px solid var(--brown);color:var(--brown)}
.btn-outline:hover{background:var(--brown);color:var(--peach)}
.btn-sm{padding:9px 18px;font-size:.88rem}

/* ---------- Hero (light sage + brand pattern) ---------- */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;
  background:
    radial-gradient(1200px 600px at 80% -10%,rgba(241,176,150,.22),transparent 60%),
    radial-gradient(900px 500px at 10% 110%,rgba(108,114,83,.30),transparent 60%),
    linear-gradient(160deg,#B6B997 0%,var(--gray-bg) 55%,#9EA17F 100%);
  color:var(--brown-950);overflow:hidden;
}
.hero .container{position:relative;z-index:2;padding:120px 0 90px;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(85,31,9,.35);border-radius:999px;padding:7px 16px;
  font-size:.8rem;font-weight:700;letter-spacing:.5px;color:var(--brown-700);
  margin-bottom:22px;background:rgba(251,243,236,.35);
}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--brown);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero h1{
  font-size:clamp(2.3rem,5.2vw,4rem);line-height:1.25;font-weight:800;color:var(--brown-950);
  margin-bottom:18px;letter-spacing:-.5px;
}
.hero h1 em{font-style:normal;color:var(--brown-700)}
.hero h1.typing{font-size:clamp(1.5rem,3.2vw,2.8rem);min-height:2.5em;max-width:100%}
.type-caret{color:var(--brown-700);font-weight:400;margin-inline-start:4px;animation:caretBlink 1s step-end infinite}
@keyframes caretBlink{50%{opacity:0}}
.hero p.lead{font-size:clamp(1rem,1.6vw,1.2rem);color:rgba(46,26,14,.8);max-width:52ch;margin-bottom:34px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:44px}
.hero-stats{display:flex;gap:36px;flex-wrap:wrap}
.hero-stats .stat b{display:block;font-size:1.7rem;color:var(--brown);line-height:1.2}
.hero-stats .stat span{font-size:.82rem;color:rgba(46,26,14,.66);font-weight:700}
.hero-art{position:relative;display:flex;align-items:center;justify-content:center}
.hero-art .badge-logo{width:min(380px,80%);color:var(--brown);opacity:.97;animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hero-palms{position:absolute;bottom:-40px;inset-inline:0;width:100%;color:var(--gray-bg);z-index:1}
.hero .scroll-hint{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  color:var(--brown-700);font-size:.75rem;font-weight:700;letter-spacing:2px;
  display:flex;flex-direction:column;align-items:center;gap:6px;opacity:.8;
}
.hero .scroll-hint::after{content:"";width:1.5px;height:34px;background:linear-gradient(var(--brown),transparent);animation:drip 1.8s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}60%{transform:scaleY(1)}100%{opacity:0}}

/* ---------- Sections ---------- */
.section{padding:84px 0}
.section.tight{padding:56px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:38px}
.kicker{
  display:inline-flex;align-items:center;gap:8px;color:var(--brown-700);
  font-weight:800;font-size:.8rem;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;
}
.kicker::before{content:"";width:26px;height:2px;background:currentColor;border-radius:2px}
.section-head h2,.page-title h1{font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:800;color:var(--brown-950);line-height:1.3}
.section-head .sub{color:rgba(46,26,14,.82);max-width:60ch;margin-top:8px}
/* secondary text sitting directly on the sage background */
.on-sage-muted{color:rgba(46,26,14,.78)!important}

/* ---------- Banner (ad space) ---------- */
.banner-space{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.banner-track{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.banner-slide{
  min-width:100%;aspect-ratio:90/20;
  display:flex;flex-direction:column;justify-content:flex-end;gap:24px;
  padding:clamp(22px,3.5vw,42px);color:#FBF3EC;position:relative;
}
.banner-slide .b-copy{max-width:56ch}
.banner-slide .b-tag{
  display:inline-block;background:rgba(251,243,236,.16);border:1px solid rgba(251,243,236,.3);
  padding:4px 14px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:1.5px;margin-bottom:12px;
}
.banner-slide h3{font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:800;margin-bottom:8px}
.banner-slide p{color:rgba(251,243,236,.85);font-size:.95rem;margin-bottom:18px}
.banner-slide .b-art{font-size:4rem;opacity:.9}
.banner-slide.b-brown{background:linear-gradient(135deg,var(--brown-900),var(--brown-700))}
.banner-slide.b-sage{background:linear-gradient(135deg,var(--sage-dark),var(--sage))}
.banner-slide.b-peach{background:linear-gradient(135deg,#D98E6C,var(--peach));color:var(--brown-950)}
.banner-slide.b-peach p{color:rgba(51,17,3,.75)}
.banner-slide.b-peach .b-tag{background:rgba(85,31,9,.12);border-color:rgba(85,31,9,.25)}
.banner-slide.b-img{background-color:var(--brown)}
.banner-dots{position:absolute;bottom:14px;inset-inline:0;display:flex;justify-content:center;gap:7px;z-index:3}
.banner-dots button{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);transition:.3s}
.banner-dots button.on{background:#fff;width:26px;border-radius:99px}

/* ---------- Category tiles ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.cat-tile{
  background:var(--card);border-radius:var(--r);padding:26px 18px;text-align:center;
  box-shadow:var(--shadow-sm);border:1px solid transparent;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.cat-tile:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--peach)}
.cat-tile .ic{
  width:58px;height:58px;margin:0 auto 14px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;color:var(--brown);
  background:var(--peach-bg);
}
.cat-tile .ic svg{width:28px;height:28px}
.cat-tile b{display:block;font-size:1rem;color:var(--brown-950)}
.cat-tile span{font-size:.78rem;color:var(--muted);font-weight:700}

/* ---------- Place cards ---------- */
.place-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px}
.place-card{
  background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column;
}
.place-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.place-cover{position:relative;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;overflow:hidden}
.place-cover .cover-ic{width:64px;height:64px;color:rgba(255,255,255,.92);filter:drop-shadow(0 4px 10px rgba(0,0,0,.18))}
.place-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.place-cover .status{
  position:absolute;top:12px;inset-inline-start:12px;
  padding:4px 12px;border-radius:999px;font-size:.72rem;font-weight:800;color:#fff;
  backdrop-filter:blur(6px);
}
.status.open{background:rgba(62,124,79,.92)}
.status.closed{background:rgba(179,67,43,.92)}
.place-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.place-body .p-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.place-body .p-cat{font-size:.72rem;font-weight:800;letter-spacing:1px;color:var(--sage-dark);text-transform:uppercase;flex:none;white-space:nowrap}
.place-body h3{font-size:1.15rem;font-weight:800;color:var(--brown-950);line-height:1.3}
.place-body p{font-size:.88rem;color:var(--muted)}
.place-meta{display:flex;align-items:flex-start;gap:8px;font-size:.8rem;color:var(--muted);font-weight:700;line-height:1.5}
.place-meta svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--sage-dark)}
.place-actions{display:flex;gap:8px;margin-top:auto;padding-top:6px}
.place-actions .btn{flex:1;padding:10px 12px;font-size:.85rem}

/* cover gradients per category */
.cov-cafe{background:linear-gradient(135deg,#8A5A3B,#B98A64)}
.cov-restaurant{background:linear-gradient(135deg,var(--brown-700),#9C5B33)}
.cov-shop{background:linear-gradient(135deg,#A9744F,var(--peach))}
.cov-seating{background:linear-gradient(135deg,var(--sage-dark),var(--sage))}
.cov-family{background:linear-gradient(135deg,#C08552,#E3B490)}
.cov-event{background:linear-gradient(135deg,#7A4B2A,#B3432B)}
.cov-service{background:linear-gradient(135deg,#7C8261,#A9AE8C)}

/* ---------- Filter chips / search ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:30px}
.search-box{
  flex:1;min-width:220px;display:flex;align-items:center;gap:10px;
  background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:11px 18px;
  transition:border-color .25s,box-shadow .25s;
}
.search-box:focus-within{border-color:var(--brown);box-shadow:0 0 0 4px rgba(85,31,9,.08)}
.search-box svg{width:19px;height:19px;color:var(--muted);flex:none}
.search-box input{border:none;outline:none;background:none;width:100%;font-size:.95rem}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:9px 18px;border-radius:999px;background:var(--card);border:1.5px solid var(--line);
  font-weight:800;font-size:.84rem;color:var(--ink);transition:all .22s;white-space:nowrap;
}
.chip:hover{border-color:var(--sage)}
.chip.on{background:var(--brown);border-color:var(--brown);color:var(--peach)}
.empty-note{padding:60px 20px;text-align:center;color:var(--muted);font-weight:700}

/* ---------- Map page ---------- */
.map-page{padding-top:var(--header-h);height:100svh;display:flex;flex-direction:column}
.map-topbar{padding:14px 0;border-bottom:1px solid var(--line);background:var(--gray-bg);z-index:5}
.map-topbar .container{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.map-topbar .chips{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;max-width:100%;padding-bottom:2px}
.map-topbar .chips::-webkit-scrollbar{display:none}
.map-shell{flex:1;position:relative;overflow:hidden;background:#E7E4DA}
#resortMap{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}
#resortMap.dragging{cursor:grabbing}
.map-controls{
  position:absolute;top:18px;inset-inline-end:18px;z-index:6;
  display:flex;flex-direction:column;gap:8px;
}
.map-controls button{
  width:44px;height:44px;border-radius:14px;background:var(--card);box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;color:var(--brown);
  font-size:1.3rem;font-weight:800;transition:transform .2s;
}
.map-controls button:hover{transform:scale(1.06)}
.map-controls button svg{width:20px;height:20px}
.map-legend{
  position:absolute;bottom:18px;inset-inline-start:18px;z-index:6;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-radius:16px;
  padding:12px 16px;box-shadow:var(--shadow);font-size:.75rem;font-weight:700;
  display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;
}
.map-legend .lg{display:flex;align-items:center;gap:7px;color:var(--ink)}
.map-legend .lg i{width:11px;height:11px;border-radius:50%;flex:none}

/* marker styles (inside SVG) */
.marker{cursor:pointer;transition:opacity .25s ease}
.marker .kiosk-structure{transition:transform .22s cubic-bezier(.34,1.56,.64,1);transform-origin:center bottom;transform-box:fill-box}
.marker:hover .kiosk-structure,.marker.selected .kiosk-structure{transform:scale(1.12) translateY(-4px)}
.marker.dim{opacity:.22;pointer-events:none}
.marker text{pointer-events:none}
.marker .pin-label{
  font-size:12px;font-weight:800;fill:#2E1A0E;
  paint-order:stroke;stroke:#FFFFFF;stroke-width:3.5px;stroke-linejoin:round;
}

/* place info panel */
.place-panel{
  position:absolute;z-index:7;
  inset-inline-start:18px;top:18px;bottom:18px;width:min(370px,calc(100% - 36px));
  background:var(--card);border-radius:22px;box-shadow:var(--shadow-lg);
  transform:translateX(calc(var(--dir,-1) * 115%));opacity:0;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s;
  display:flex;flex-direction:column;overflow:hidden;pointer-events:none;
}
html[dir="rtl"] .place-panel{--dir:1}
.place-panel.open{transform:translateX(0);opacity:1;pointer-events:auto}
.place-panel .pp-cover{height:150px;position:relative;flex:none;display:flex;align-items:center;justify-content:center}
.place-panel .pp-cover .cover-ic{width:56px;height:56px;color:rgba(255,255,255,.92)}
.place-panel .pp-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.place-panel .pp-close{
  position:absolute;top:12px;inset-inline-end:12px;width:36px;height:36px;border-radius:50%;
  background:rgba(51,17,3,.45);color:#fff;font-size:1.1rem;backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
}
.place-panel .pp-body{padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.pp-head{display:flex;align-items:start;justify-content:space-between;gap:10px}
.pp-head h3{font-size:1.3rem;font-weight:800;color:var(--brown-950);line-height:1.3}
.pp-cat{font-size:.72rem;font-weight:800;letter-spacing:1px;color:var(--sage-dark);text-transform:uppercase}
.pp-desc{color:var(--muted);font-size:.92rem}
.pp-rows{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:14px}
.pp-row{display:flex;gap:11px;align-items:center;font-size:.88rem;font-weight:700}
.pp-row svg{width:18px;height:18px;color:var(--brown);flex:none}
.pp-row a{color:var(--brown);text-decoration:underline}
.pp-actions{display:flex;gap:10px;margin-top:6px}
.pp-actions .btn{flex:1;padding:12px;font-size:.9rem}

/* results list dropdown on map */
.map-results{
  position:absolute;z-index:8;top:0;inset-inline-start:0;width:100%;
  background:var(--card);border-radius:16px;box-shadow:var(--shadow-lg);
  max-height:300px;overflow-y:auto;display:none;
}
.map-results.open{display:block}
.map-results button{
  display:flex;width:100%;text-align:start;gap:12px;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--gray-soft);transition:background .2s;
}
.map-results button:hover{background:var(--peach-bg)}
.map-results .mr-ic{
  width:38px;height:38px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;
}
.map-results .mr-ic svg{width:19px;height:19px}
.map-results b{display:block;font-size:.92rem;color:var(--brown-950)}
.map-results span{font-size:.75rem;color:var(--muted);font-weight:700}
.map-search-wrap{position:relative;flex:1;min-width:230px}

/* ---------- Split feature ---------- */
.feature-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.feature-split .art{
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);
  background:linear-gradient(150deg,var(--brown),var(--brown-700));
  min-height:380px;display:flex;align-items:center;justify-content:center;position:relative;
}
.feature-split .art .mark{width:46%;color:var(--peach);opacity:.95}
.feature-list{display:flex;flex-direction:column;gap:18px;margin-top:26px}
.feature-item{display:flex;gap:16px;align-items:start}
.feature-item .f-ic{
  width:46px;height:46px;border-radius:15px;background:var(--peach-bg);color:var(--brown);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.feature-item .f-ic svg{width:22px;height:22px}
.feature-item b{display:block;color:var(--brown-950);font-size:1.02rem}
.feature-item p{color:rgba(46,26,14,.72);font-size:.88rem}

/* ---------- Events ---------- */
.event-card{display:flex;gap:0;background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s}
.event-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.event-img{flex:none;width:120px;background-size:cover;background-position:center}
.event-date{
  flex:none;width:96px;background:var(--brown);color:var(--peach);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:18px 8px;
}
.event-date b{font-size:1.9rem;line-height:1}
.event-date span{font-size:.78rem;font-weight:800;letter-spacing:1px}
.event-body{padding:18px 20px;flex:1}
.event-body h3{font-weight:800;color:var(--brown-950);margin-bottom:6px}
.event-body p{color:var(--muted);font-size:.88rem;margin-bottom:10px}
.event-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}

/* ---------- Event cards (image-led) + gallery ---------- */
.event-card2{
  background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;
}
.event-card2:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.event-card2 .ev-cover{
  position:relative;height:190px;background-size:cover;background-position:center;
  background-color:var(--brown-700);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.event-card2 .ev-cover.noimg{cursor:default;background:linear-gradient(135deg,var(--brown-700),#9C5B33)}
.event-card2 .ev-cover-ic{width:56px;height:56px;color:rgba(255,255,255,.9)}
.event-card2 .ev-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(51,17,3,.05),rgba(51,17,3,.35))}
.ev-badge{
  position:absolute;top:12px;inset-inline-start:12px;z-index:2;
  background:var(--brown);color:var(--peach);border-radius:14px;
  padding:8px 12px;text-align:center;line-height:1;box-shadow:var(--shadow-sm);
}
.ev-badge b{display:block;font-size:1.5rem;font-weight:800}
.ev-badge span{font-size:.72rem;font-weight:800;letter-spacing:1px}
.ev-badge.none{padding:8px 14px;font-size:.78rem;font-weight:800}
.ev-count{
  position:absolute;top:12px;inset-inline-end:12px;z-index:2;
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(51,17,3,.6);backdrop-filter:blur(4px);color:#fff;
  padding:5px 10px;border-radius:999px;font-size:.78rem;font-weight:800;
}
.ev-count svg{width:15px;height:15px}
.event-card2 .ev-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.event-card2 .ev-body h3{font-size:1.15rem;font-weight:800;color:var(--brown-950)}
.event-card2 .ev-meta{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:800;color:var(--sage-dark)}
.event-card2 .ev-meta svg{width:15px;height:15px;flex:none}
.event-card2 .ev-body p{font-size:.9rem;color:var(--muted);flex:1}
.event-card2 .ev-actions{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.event-card2 .ev-actions .btn{flex:1;min-width:120px;padding:10px 12px;font-size:.85rem}

/* lightbox */
.ev-lightbox{
  position:fixed;inset:0;z-index:500;display:none;
  align-items:center;justify-content:center;padding:24px;
}
.ev-lightbox.open{display:flex}
.ev-lightbox .evl-scrim{position:absolute;inset:0;background:rgba(30,15,6,.9);backdrop-filter:blur(6px)}
.ev-lightbox .evl-fig{position:relative;z-index:2;max-width:min(1000px,92vw);display:flex;flex-direction:column;align-items:center;gap:14px;margin:0}
.ev-lightbox .evl-img{
  max-width:100%;max-height:70vh;border-radius:16px;object-fit:contain;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);background:#241009;
}
.ev-lightbox .evl-cap{color:#F6E7DC;font-weight:800;font-size:.95rem}
.ev-lightbox .evl-close{
  position:absolute;top:20px;inset-inline-end:20px;z-index:4;
  width:46px;height:46px;border-radius:50%;background:rgba(246,231,220,.14);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:background .2s;
}
.ev-lightbox .evl-close:hover{background:rgba(246,231,220,.28)}
.ev-lightbox .evl-close svg{width:22px;height:22px}
.ev-lightbox .evl-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:52px;height:52px;border-radius:50%;background:rgba(246,231,220,.14);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:background .2s;
}
.ev-lightbox .evl-nav:hover{background:rgba(246,231,220,.28)}
.ev-lightbox .evl-nav svg{width:26px;height:26px}
.ev-lightbox .evl-nav.prev{inset-inline-start:20px}
.ev-lightbox .evl-nav.next{inset-inline-end:20px}
.ev-lightbox .evl-nav.next svg{transform:scaleX(-1)}
html[dir="rtl"] .ev-lightbox .evl-nav.prev{inset-inline-start:auto;inset-inline-end:20px}
html[dir="rtl"] .ev-lightbox .evl-nav.next{inset-inline-end:auto;inset-inline-start:20px}
.ev-lightbox .evl-thumbs{
  position:relative;z-index:2;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:92vw;
}
.ev-lightbox .evl-thumbs button{
  width:60px;height:44px;border-radius:9px;overflow:hidden;opacity:.5;
  border:2px solid transparent;transition:opacity .2s,border-color .2s;
}
.ev-lightbox .evl-thumbs button.on{opacity:1;border-color:var(--peach)}
.ev-lightbox .evl-thumbs img{width:100%;height:100%;object-fit:cover}
@media (max-width:680px){
  .ev-lightbox .evl-nav{width:44px;height:44px}
  .ev-lightbox .evl-img{max-height:60vh}
  .ev-lightbox .evl-thumbs button{width:48px;height:36px}
}

/* ---------- CTA band ---------- */
.cta-band{
  border-radius:var(--r-lg);padding:clamp(36px,6vw,64px);text-align:center;color:#FBF3EC;
  background:
    radial-gradient(600px 300px at 15% 0%,rgba(241,176,150,.18),transparent 60%),
    linear-gradient(140deg,var(--brown-900),var(--brown));
  box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
}
.cta-band>*{position:relative}
.cta-band .mark{display:block;width:74px;height:64px;margin:0 auto 20px;color:var(--peach)}
.cta-band .mark svg{width:100%;height:100%;display:block}
.cta-band h2{font-size:clamp(1.5rem,3.4vw,2.3rem);font-weight:800;margin-bottom:12px}
.cta-band p{color:#E9CDBB;margin-bottom:28px;max-width:56ch;margin-inline:auto}

/* ---------- Page hero (inner pages) ---------- */
.page-title{
  padding:calc(var(--header-h) + 56px) 0 46px;
  background:
    radial-gradient(700px 300px at 85% 0%,rgba(241,176,150,.12),transparent 60%),
    linear-gradient(150deg,var(--brown-900),var(--brown));
  color:#FBF3EC;position:relative;overflow:hidden;
}
.page-title .container{position:relative}
.page-title .kicker{color:var(--peach);margin-bottom:6px}
.page-title .kicker::before{background:var(--peach)}
.page-title h1{color:#FBF3EC}
.page-title p{color:#E9CDBB;margin-top:10px;max-width:65ch}
.page-title .watermark{
  position:absolute;inset-inline-end:-30px;bottom:-60px;width:280px;color:rgba(241,176,150,.1);
}

/* ---------- About ---------- */
.about-vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:40px}
.val-card{background:var(--card);border-radius:var(--r);padding:26px;box-shadow:var(--shadow-sm)}
.val-card .ic{width:50px;height:50px;border-radius:16px;background:var(--sage-soft);color:var(--sage-dark);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.val-card .ic svg{width:24px;height:24px}
.val-card b{color:var(--brown-950);display:block;margin-bottom:6px;font-size:1.02rem}
.val-card p{color:var(--muted);font-size:.88rem}
.timeline{display:flex;flex-direction:column;gap:0;margin-top:30px}
.tl-item{display:grid;grid-template-columns:70px 30px 1fr;gap:6px;align-items:start}
.tl-item .tl-y{font-weight:800;color:var(--brown);font-size:.95rem;padding-top:2px}
.tl-item .tl-dotcol{display:flex;flex-direction:column;align-items:center;align-self:stretch}
.tl-item .tl-dot{width:13px;height:13px;border-radius:50%;background:var(--peach);border:3px solid var(--brown);flex:none}
.tl-item .tl-line{width:2px;flex:1;background:var(--line)}
.tl-item .tl-body{padding-bottom:30px}
.tl-item .tl-body b{color:var(--brown-950)}
.tl-item .tl-body p{color:var(--muted);font-size:.88rem}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start}
.contact-form{background:var(--card);border-radius:var(--r-lg);padding:clamp(24px,4vw,40px);box-shadow:var(--shadow)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-weight:800;font-size:.85rem;margin-bottom:7px;color:var(--brown-950)}
.field input,.field select,.field textarea{
  width:100%;border:1.5px solid var(--line);border-radius:14px;padding:12px 16px;
  background:var(--field-bg);outline:none;transition:border-color .25s,box-shadow .25s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brown);box-shadow:0 0 0 4px rgba(85,31,9,.08);background:#fff}
.field textarea{min-height:130px;resize:vertical}
.contact-cards{display:flex;flex-direction:column;gap:16px}
.contact-card{background:var(--card);border-radius:var(--r);padding:22px;display:flex;gap:16px;align-items:center;box-shadow:var(--shadow-sm)}
.contact-card .ic{width:50px;height:50px;border-radius:16px;background:var(--peach-bg);color:var(--brown);display:flex;align-items:center;justify-content:center;flex:none}
.contact-card .ic svg{width:23px;height:23px}
.contact-card b{display:block;color:var(--brown-950)}
.contact-card span,.contact-card a{color:var(--muted);font-size:.9rem;font-weight:700;direction:ltr}
.form-success{
  display:none;background:#EAF3EC;border:1.5px solid var(--ok);color:var(--ok);
  border-radius:14px;padding:14px 18px;font-weight:800;margin-bottom:16px;
}
.form-success.show{display:block}

/* ---------- Footer ---------- */
.site-footer{background:var(--brown-950);color:#D9B9A5;margin-top:40px;position:relative;overflow:hidden}
.site-footer .container{position:relative}
.site-footer .foot-main{
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:40px;padding:64px 0 40px;
}
.site-footer .mark{display:inline-block;width:60px;color:var(--peach);margin-bottom:16px}
.site-footer .mark svg{width:100%;height:auto;display:block}
.site-footer p{font-size:.88rem;line-height:1.8}
.site-footer h4{color:#FBF3EC;font-size:.95rem;margin-bottom:16px;font-weight:800}
.site-footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.site-footer ul a{font-size:.88rem;font-weight:700;transition:color .2s}
.site-footer ul a:hover{color:var(--peach)}
.foot-contact li{display:flex;gap:10px;align-items:center;font-size:.88rem;font-weight:700}
.foot-contact svg{width:17px;height:17px;color:var(--peach);flex:none}
.foot-bottom{
  border-top:1px solid rgba(241,176,150,.15);padding:20px 0;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.8rem;font-weight:700;
}
.foot-bottom a{color:var(--peach)}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{
  width:38px;height:38px;border-radius:12px;border:1.5px solid rgba(241,176,150,.3);
  display:flex;align-items:center;justify-content:center;color:var(--peach);transition:all .25s;
}
.socials a:hover{background:var(--peach);color:var(--brown-950);border-color:var(--peach)}
.socials svg{width:17px;height:17px}

/* ---------- Side ornaments (brand quatrefoil borders) ---------- */
.side-orn{
  position:fixed;top:0;bottom:0;width:var(--orn-col,72px);z-index:3;
  pointer-events:none;display:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
}
.side-orn.left{left:var(--orn-edge,8px)}
.side-orn.right{right:var(--orn-edge,8px)}
.side-orn .orn{
  position:absolute;left:50%;width:var(--orn-size,46px);height:var(--orn-size,46px);
  margin-left:calc(var(--orn-size,46px) / -2);
  opacity:var(--orn-op,.62);will-change:transform,background-color;
  /* mask so the motif colour is CSS-controlled (brown on sage / cream on brown) */
  background-color:var(--orn-color,#551F09);
  -webkit-mask:url("../assets/pattern.svg?v=19") center / contain no-repeat;
  mask:url("../assets/pattern.svg?v=19") center / contain no-repeat;
  transition:background-color .5s ease;
}
/* wide desktop: room beside the 1180px container */
@media (min-width:1360px){ .side-orn{display:block} }
/* mobile: narrow the content to open side gutters, then frame with slim ornaments */
@media (max-width:680px){
  .side-orn{display:block;--orn-col:28px;--orn-size:20px;--orn-edge:1px;--orn-op:.5}
  .container{width:min(1180px,100% - 64px)}
}

/* ---------- Reveal animations ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .main-nav{display:none}
  .burger{display:flex}
  .hero .container{grid-template-columns:1fr;text-align:center;padding-top:130px}
  .hero-art{order:-1}
  .hero-art .badge-logo{width:min(230px,58%)}
  .hero-ctas,.hero-stats{justify-content:center}
  .feature-split{grid-template-columns:1fr}
  .feature-split .art{display:none} /* decorative logo panel: hidden on small screens */
  .contact-grid{grid-template-columns:1fr}
  .site-footer .foot-main{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:680px){
  :root{--header-h:62px}
  body{padding-bottom:64px}
  .bottom-nav{display:flex}
  .section{padding:56px 0}
  .banner-slide{aspect-ratio:16/9;padding:16px 18px 26px}
  .banner-slide .b-art{display:none}
  .banner-slide p{display:none}
  .banner-slide h3{font-size:1.15rem;margin-bottom:6px}
  .banner-slide .b-tag{margin-bottom:8px}
  .site-footer .foot-main{grid-template-columns:1fr;gap:30px;padding:44px 0 30px}
  .place-grid{grid-template-columns:1fr 1fr;gap:12px}
  .place-body{padding:12px}
  .place-body h3{font-size:.95rem}
  .place-body .p-cat{font-size:.64rem;letter-spacing:.5px}
  .place-body p{display:none}
  .place-actions{flex-direction:column}
  .event-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .map-legend{display:none}
  .map-page{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .place-panel{
    inset-inline:0;top:auto;bottom:0;width:100%;max-height:72%;
    border-radius:24px 24px 0 0;
    transform:translateY(110%);
  }
  .place-panel.open{transform:translateY(0)}
  .section-head{flex-direction:column;align-items:start}
  .hero .scroll-hint{display:none}
}

/* ============================================================
   Pedestrian Navigation & Walking Route UI
   ============================================================ */
.pp-route-btn {
  width: 100%;
  padding: 13px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1565C0 0%, #1E88E5 100%);
  color: #FFFFFF !important;
  font-weight: 800;
  font-size: 0.98rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(21, 101, 192, 0.35);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  cursor: pointer;
  margin-top: 6px;
  border: none;
}
.pp-route-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(21, 101, 192, 0.45);
  background: linear-gradient(135deg, #0D47A1 0%, #1565C0 100%);
}
.pp-route-btn:active {
  transform: translateY(0);
}
.pp-route-btn svg {
  width: 20px;
  height: 20px;
  flex: none;
}

/* Floating Navigation Bottom Bar */
.nav-floating-bar {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(140%);
  z-index: 99;
  width: min(440px, calc(100% - 32px));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 16px 40px -10px rgba(51, 17, 3, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.05);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s;
}
.nav-floating-bar.active {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.nav-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.nav-bar-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.nav-bar-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--brown-950);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-bar-metrics {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
}
.nav-metric-badge {
  background: var(--peach-bg);
  color: var(--brown-700);
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-btn-end {
  background: #FEE2E2;
  color: #DC2626;
  border: 1px solid #FECACA;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s;
  flex: none;
  white-space: nowrap;
}
.nav-btn-end:hover {
  background: #DC2626;
  color: #FFFFFF;
  transform: translateY(-1px);
}
.nav-btn-end:active {
  transform: translateY(0);
}
@media (max-width: 680px) {
  .nav-floating-bar {
    bottom: calc(72px + env(safe-area-inset-bottom));
    width: calc(100% - 24px);
    padding: 14px 16px;
  }
}