/* =========================================================
   ADITYA MANSION — Design system
   Signature: "louver lines" — a vertical-slat motif borrowed
   from the tropical-modernist jalousie windows and garden
   screens found across 1970s–80s Kebayoran Baru houses (the
   very building language Aditya Mansion itself sits inside).
   Used as dividers, hero framing and section transitions to
   tie every page back to "a sanctuary inside the city".
   ========================================================= */

:root{
  --ink:        #1C2A20;   /* deep garden charcoal-green — text */
  --ink-soft:   #445347;
  --canvas:     #F3EFE3;   /* warm stone ivory — page background */
  --canvas-dim: #EAE4D3;
  --panel:      #FFFFFF;
  --moss:       #2F4A34;   /* primary brand green */
  --moss-dark:  #1B2E22;
  --sage:       #93A88C;   /* soft accent green */
  --brass:      #AD8749;   /* warm brass — CTAs & highlights */
  --brass-light:#D9B77C;
  --line:       rgba(28,42,32,.14);
  --line-strong:rgba(28,42,32,.26);
  --shadow:     0 24px 60px -30px rgba(20,30,22,.45);

  --font-display: "Fraunces", "Noto Serif SC", "Iowan Old Style", Georgia, serif;
  --font-body:    "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --radius: 2px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
p{ margin:0 0 1em; }
.container{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- Louver-line signature ---------- */
.louvers{
  display:flex;
  gap:6px;
  align-items:stretch;
}
.louvers span{
  flex:1;
  background:currentColor;
  opacity:.18;
}
.louvers span:nth-child(3n){ opacity:.36; }
.louvers span:nth-child(5n){ opacity:.55; }

.divider-louver{
  height:34px;
  color:var(--moss);
  margin: 0 auto;
  max-width:220px;
}

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--font-body);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brass);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--brass);
  display:inline-block;
}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--moss); color:#fff; padding:10px 16px; z-index:999;
  border-radius:0 0 4px 0;
}
.skip-link:focus{ left:0; }

/* ---------- Top utility bar ---------- */
.topbar{
  background:var(--moss-dark);
  color:#E7E2D2;
  font-size:.78rem;
}
.topbar .container{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:8px; padding-bottom:8px;
  gap:16px; flex-wrap:wrap;
}
.topbar a{ color:#E7E2D2; }
.topbar-contact{ display:flex; gap:20px; flex-wrap:wrap; }
.topbar-contact span{ opacity:.85; }

/* ---------- Header / nav ---------- */
header.site-header{
  background:var(--canvas);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:60;
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:20px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img#site-logo{
  height:46px; width:auto; object-fit:contain;
}
.brand-text{
  font-family:var(--font-display);
  font-size:1.05rem;
  letter-spacing:.02em;
  color:var(--moss-dark);
}
.brand-text small{
  display:block;
  font-family:var(--font-body);
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brass);
  font-weight:600;
  margin-top:2px;
}

nav.main-nav{ display:flex; align-items:center; gap:28px; }
nav.main-nav a{
  font-size:.86rem;
  font-weight:500;
  color:var(--ink-soft);
  position:relative;
  padding:6px 0;
}
nav.main-nav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--brass);
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
nav.main-nav a:hover::after,
nav.main-nav a[aria-current="page"]::after{ transform:scaleX(1); }
nav.main-nav a[aria-current="page"]{ color:var(--moss-dark); font-weight:600; }

.nav-actions{ display:flex; align-items:center; gap:14px; }
.lang-toggle{
  display:inline-flex; border:1px solid var(--line-strong); border-radius:999px;
  overflow:hidden; font-size:.72rem; font-weight:700; letter-spacing:.04em;
}
.lang-toggle button{
  border:0; background:transparent; padding:7px 13px; cursor:pointer;
  color:var(--ink-soft); font-family:var(--font-body);
}
.lang-toggle button.active{ background:var(--moss); color:#fff; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px;
  font-size:.82rem; font-weight:600; letter-spacing:.02em;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn-brass{ background:var(--brass); color:#fff; }
.btn-brass:hover{ background:var(--moss); transform:translateY(-1px); }
.btn-outline{ background:transparent; border-color:var(--line-strong); color:var(--ink); }
.btn-outline:hover{ border-color:var(--moss); color:var(--moss); }

.hamburger{
  display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px;
}
.hamburger span{ width:24px; height:2px; background:var(--ink); display:block; }

/* ---------- Hero (crossfade slider, centered tagline) ---------- */
.hero{
  position:relative;
  min-height:88vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  color:#fff;
  text-align:center;
}
.hero-slides{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0;
  transition:opacity 1.8s ease;
}
.hero-slide.is-active{ opacity:1; }
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(16,24,18,.55) 0%, rgba(16,24,18,.35) 45%, rgba(16,24,18,.72) 100%);
}
.hero-frame{
  position:absolute; inset:22px;
  border:1px solid rgba(255,255,255,.28);
  pointer-events:none;
}
.hero-louvers{
  position:absolute; top:0; bottom:0; width:70px;
  display:flex; gap:5px; padding:22px 0;
  pointer-events:none;
}
.hero-louvers.left{ left:22px; }
.hero-louvers.right{ right:22px; }
.hero-louvers span{ flex:1; background:rgba(255,255,255,.5); }
.hero-louvers span:nth-child(odd){ background:rgba(255,255,255,.18); }

.hero-content{
  position:relative; z-index:5;
  max-width:760px; padding:0 28px;
}
.hero-eyebrow{
  color:var(--brass-light);
  font-size:.76rem; letter-spacing:.3em; text-transform:uppercase; font-weight:600;
  margin-bottom:18px; display:block;
}
.hero-content h1{
  font-size:clamp(2.1rem, 5vw, 3.6rem);
  color:#fff;
  margin-bottom:20px;
}
.hero-content h1 em{
  font-style:italic; color:var(--brass-light); font-weight:500;
}
.hero-tagline{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.05rem,2vw,1.3rem);
  color:#F3EFE3;
  max-width:560px;
  margin:0 auto 30px;
}
.hero-ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.hero-dots{
  position:absolute; bottom:26px; left:0; right:0;
  display:flex; justify-content:center; gap:10px; z-index:5;
}
.hero-dots button{
  width:8px; height:8px; border-radius:999px; border:1px solid rgba(255,255,255,.7);
  background:transparent; padding:0; cursor:pointer;
}
.hero-dots button.is-active{ background:var(--brass-light); border-color:var(--brass-light); }

/* Smaller inner-page hero (no slider) */
.page-hero{
  position:relative; color:#fff; text-align:center;
  padding:120px 20px 90px;
  background-size:cover; background-position:center;
  overflow:hidden;
}
.page-hero .hero-scrim{ background:linear-gradient(180deg, rgba(16,24,18,.62), rgba(16,24,18,.62)); }
.page-hero-content{ position:relative; z-index:3; max-width:720px; margin:0 auto; }
.page-hero h1{ color:#fff; font-size:clamp(2rem,4.4vw,3rem); }
.page-hero p{ color:#EDE9DA; font-size:1.02rem; max-width:520px; margin:14px auto 0; }

/* ---------- Sections ---------- */
section{ padding:96px 0; }
section.tight{ padding:64px 0; }
.section-head{ max-width:660px; margin:0 0 48px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(1.7rem,3.2vw,2.5rem); margin-top:16px; }
.section-head p{ color:var(--ink-soft); font-size:1.02rem; }

.bg-panel{ background:var(--panel); }
.bg-moss{ background:var(--moss); color:#F3EFE3; }
.bg-moss h2, .bg-moss h3{ color:#fff; }
.bg-moss .eyebrow{ color:var(--brass-light); }
.bg-moss .eyebrow::before{ background:var(--brass-light); }

/* ---------- Intro / split ---------- */
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
.split img{ border-radius:var(--radius); box-shadow:var(--shadow); width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
.split-reverse{ grid-template-columns:1fr 1fr; }
.split-reverse .split-media{ order:2; }

/* ---------- Unit / card grid ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.unit-card{
  background:var(--panel); border:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden;
}
.unit-card .thumb{ aspect-ratio:4/3; overflow:hidden; }
.unit-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.unit-card:hover .thumb img{ transform:scale(1.06); }
.unit-card .body{ padding:26px; flex:1; display:flex; flex-direction:column; }
.unit-card .eyebrow{ margin-bottom:10px; }
.unit-card h3{ font-size:1.25rem; margin-bottom:10px; }
.unit-card p{ color:var(--ink-soft); font-size:.94rem; flex:1; }
.unit-features{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px; font-size:.86rem; color:var(--ink-soft); }
.unit-features li{ display:flex; gap:10px; align-items:flex-start; }
.unit-features li::before{ content:"—"; color:var(--brass); flex-shrink:0; }

/* ---------- Facility list ---------- */
.facility-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px 48px; }
.facility-item{
  display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line);
}
.facility-item .ico{
  width:38px; height:38px; flex-shrink:0; border-radius:50%;
  background:rgba(173,135,73,.14); color:var(--brass);
  display:flex; align-items:center; justify-content:center;
}
.facility-item h4{ margin:0 0 4px; font-size:1rem; font-family:var(--font-body); font-weight:600; }
.facility-item p{ margin:0; color:var(--ink-soft); font-size:.88rem; }

/* ---------- Attraction cards ---------- */
.attraction-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.attraction-card{
  position:relative; overflow:hidden; border-radius:var(--radius);
  aspect-ratio:3/4; color:#fff; display:flex; align-items:flex-end;
  box-shadow:var(--shadow);
}
.attraction-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .6s ease;
}
.attraction-card:hover img{ transform:scale(1.08); }
.attraction-card .scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(16,24,18,0) 30%, rgba(16,24,18,.92) 100%);
}
.attraction-card .info{ position:relative; z-index:2; padding:24px; width:100%; }
.attraction-card .dist{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass-light); font-weight:700; margin-bottom:6px; display:block;
}
.attraction-card h3{ color:#fff; font-size:1.2rem; margin-bottom:6px; }
.attraction-card p{ color:#E3DFCF; font-size:.85rem; margin:0; }

/* ---------- Interactive attraction map (Leaflet) ---------- */
.map-wrap{
  position:relative;
  background:var(--panel);
  border-radius:6px;
  padding:0;
  box-shadow:var(--shadow);
  overflow:hidden;
}
#attractionMap{
  width:100%;
  height:560px;
  z-index:1;
  background:#eae4d3;
  font-family:var(--font-body);
}
.map-error{
  display:flex; align-items:center; justify-content:center; text-align:center;
  height:100%; padding:32px; color:var(--ink-soft); font-size:.9rem;
}
.map-error a{ color:var(--brass); font-weight:600; text-decoration:underline; }
.map-caption{
  text-align:center; color:var(--ink-soft); font-size:.8rem;
  padding:16px 20px;
}

/* hub marker (Aditya Mansion) */
.pin-hub{
  width:56px; height:56px; border-radius:50%;
  background:var(--brass); border:3px solid #fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-display); font-weight:600; font-size:15px; line-height:1.1;
  box-shadow:0 10px 22px -6px rgba(0,0,0,.5);
}
.pin-hub small{
  font-family:var(--font-body); font-size:8px; letter-spacing:.14em;
  color:#fff; opacity:.9; font-weight:700; margin-top:1px;
}
.hub-perma-tip{
  background:var(--moss-dark) !important; color:#fff !important; border:none !important;
  font-family:var(--font-body); font-weight:600; font-size:.78rem;
  padding:4px 10px !important; border-radius:999px !important;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.4) !important;
}
.hub-perma-tip::before{ display:none !important; }

/* location pins */
.pin-loc{
  width:36px; height:36px; border-radius:50% 50% 50% 0;
  background:var(--moss); border:2px solid var(--brass-light);
  transform:rotate(-45deg);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.5);
  cursor:pointer;
  transition:transform .2s ease, background .2s ease;
}
.pin-loc span{
  transform:rotate(45deg); color:#fff; font-weight:700; font-size:13px;
  font-family:var(--font-body);
}
.pin-loc.is-hover, .pin-loc:hover{
  transform:rotate(-45deg) scale(1.18);
  background:var(--brass);
}

/* hover tooltip card */
.attraction-tooltip{
  background:var(--panel) !important;
  border:none !important;
  box-shadow:0 16px 32px -10px rgba(0,0,0,.5) !important;
  border-radius:4px !important;
  padding:0 !important;
  opacity:1 !important;
  white-space:normal !important;
  width:250px !important;
}
.attraction-tooltip::before{ display:none !important; }
.attraction-tooltip .tip-inner{
  padding:12px 15px; width:100%; box-sizing:border-box; font-family:var(--font-body);
}
.attraction-tooltip .tip-inner strong{
  display:block; font-size:.92rem; color:var(--ink); margin-bottom:4px; font-weight:600;
  white-space:normal; word-wrap:break-word;
}
.attraction-tooltip .tip-inner .tip-dist{
  display:block; font-size:.74rem; color:var(--brass); font-weight:700;
  letter-spacing:.02em; margin-bottom:7px; white-space:normal;
}
.attraction-tooltip .tip-inner .tip-desc{
  display:block; font-size:.78rem; color:var(--ink-soft); line-height:1.45;
  white-space:normal; word-wrap:break-word;
}

/* moving arrow marker */
.map-arrow-icon{ pointer-events:none; }
.arrow-glyph{
  width:0; height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:13px solid var(--brass);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));
}

.leaflet-control-attribution{ font-size:10px !important; }
.leaflet-control-zoom a{ color:var(--ink) !important; }

@media (max-width: 640px){
  #attractionMap{ height:440px; }
  .attraction-tooltip{ width:200px !important; }
  .attraction-tooltip .tip-inner{ padding:10px 12px; }
  .attraction-tooltip .tip-inner strong{ font-size:.82rem; }
}

/* ---------- Stats strip ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stats .num{ font-family:var(--font-display); font-size:2.4rem; color:var(--brass-light); }
.stats .lbl{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; opacity:.85; }

/* ---------- Gallery ---------- */
.gallery-grid{
  columns:3; column-gap:18px;
}
.gallery-grid img{
  margin-bottom:18px; width:100%; border-radius:var(--radius);
  box-shadow:0 12px 30px -18px rgba(20,30,22,.5);
}

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; }
.contact-card{ background:var(--panel); border:1px solid var(--line); padding:36px; }
.contact-card dl{ margin:0; }
.contact-card dt{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); font-weight:700; margin-top:22px; }
.contact-card dt:first-child{ margin-top:0; }
.contact-card dd{ margin:6px 0 0; font-size:1rem; }
.map-frame{ border:1px solid var(--line); overflow:hidden; height:100%; min-height:340px; }
.map-frame iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; }

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--moss-dark); color:#fff; text-align:center;
  padding:80px 24px; position:relative; overflow:hidden;
}
.cta-band h2{ color:#fff; font-size:clamp(1.6rem,3.4vw,2.3rem); }
.cta-band p{ color:#D8D3C0; max-width:520px; margin:14px auto 30px; }

/* ---------- Footer ---------- */
footer.site-footer{ background:var(--ink); color:#D9D4C4; padding:64px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
.footer-brand img{ height:42px; margin-bottom:14px; filter:brightness(0) invert(1); opacity:.92; }
.footer-brand p{ color:#AEA998; font-size:.88rem; max-width:280px; }
footer h5{ font-family:var(--font-body); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:#B4AF9C; margin-bottom:16px; }
footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
footer a{ color:#D9D4C4; font-size:.9rem; }
footer a:hover{ color:var(--brass-light); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.78rem; color:#8C876F;
}

/* ---------- Send Message float button ---------- */
.msg-float{
  position:fixed; right:22px; bottom:22px; z-index:80;
  width:58px; height:58px; border-radius:50%;
  background:var(--brass); color:#fff; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.4);
  transition:transform .2s ease, background .2s ease;
}
.msg-float:hover{ transform:scale(1.07); background:var(--moss); }
.msg-float svg{ width:26px; height:26px; }

/* ---------- Send Message modal (slide-in panel, anchored right) ---------- */
.msg-overlay{
  position:fixed; inset:0; background:rgba(16,24,18,.45);
  z-index:200; opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}
.msg-overlay.is-open{ opacity:1; visibility:visible; }

.msg-panel{
  position:fixed; z-index:201;
  right:22px; bottom:22px;
  width:380px; max-width:calc(100vw - 32px);
  max-height:calc(100vh - 44px);
  overflow-y:auto;
  background:var(--panel);
  border-radius:10px;
  box-shadow:0 30px 70px -20px rgba(16,24,18,.55);
  transform:translateY(16px) scale(.97);
  opacity:0; visibility:hidden;
  transition:transform .25s ease, opacity .25s ease, visibility .25s ease;
}
.msg-overlay.is-open .msg-panel{ transform:translateY(0) scale(1); opacity:1; visibility:visible; }

.msg-panel-head{
  background:var(--moss); color:#fff; padding:22px 24px 20px;
  border-radius:10px 10px 0 0; position:relative;
}
.msg-panel-head h3{ color:#fff; margin:0 0 4px; font-size:1.15rem; }
.msg-panel-head p{ color:#E3DFCF; font-size:.85rem; margin:0; }
.msg-panel-close{
  position:absolute; top:14px; right:14px;
  width:30px; height:30px; border-radius:50%; border:0;
  background:rgba(255,255,255,.16); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  transition:background .15s ease;
}
.msg-panel-close:hover{ background:rgba(255,255,255,.3); }

.msg-form{ padding:22px 24px 24px; display:flex; flex-direction:column; gap:14px; }
.msg-form label{ font-size:.78rem; font-weight:600; color:var(--ink-soft); display:block; }
.msg-form input,
.msg-form textarea{
  width:100%; margin-top:6px; padding:11px 13px;
  border:1px solid var(--line-strong); border-radius:6px;
  font-family:var(--font-body); font-size:.9rem; color:var(--ink);
  background:var(--canvas);
}
.msg-form input:focus,
.msg-form textarea:focus{ outline:2px solid var(--brass); outline-offset:1px; }
.msg-form textarea{ resize:vertical; min-height:100px; }
.msg-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.msg-submit{
  width:100%; justify-content:center; margin-top:4px;
  display:flex; align-items:center; gap:8px;
}
.msg-submit:disabled{ opacity:.6; cursor:not-allowed; }

.msg-feedback{
  font-size:.85rem; padding:10px 13px; border-radius:6px; display:none;
}
.msg-feedback.is-visible{ display:block; }
.msg-feedback.is-success{ background:#E4F0E6; color:#2F6B45; }
.msg-feedback.is-error{ background:#F7E3DE; color:#B3432E; }

@media (max-width: 480px){
  .msg-panel{ right:16px; left:16px; bottom:16px; width:auto; }
}

/* ---------- Breadcrumb ---------- */
.crumb{ font-size:.78rem; color:#D8D3C0; }
.crumb a{ color:#D8D3C0; opacity:.85; }
.crumb a:hover{ opacity:1; }

/* ---------- Utility ---------- */
.mt-0{ margin-top:0; }
.text-center{ text-align:center; }
.visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px){
  .split, .split-reverse{ grid-template-columns:1fr; gap:32px; }
  .split-reverse .split-media{ order:0; }
  .card-grid{ grid-template-columns:repeat(2,1fr); }
  .attraction-grid{ grid-template-columns:repeat(2,1fr); }
  .facility-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); row-gap:32px; }
  .gallery-grid{ columns:2; }
}

@media (max-width: 760px){
  .topbar .container{ font-size:.72rem; justify-content:center; text-align:center; }
  .topbar-contact{ justify-content:center; }
  nav.main-nav{
    position:fixed; inset:0 0 0 auto; width:82%; max-width:340px;
    background:var(--canvas); flex-direction:column; align-items:flex-start;
    padding:100px 28px 28px; gap:22px;
    transform:translateX(100%); transition:transform .3s ease;
    box-shadow:-20px 0 40px -20px rgba(0,0,0,.3);
  }
  nav.main-nav.open{ transform:translateX(0); }
  nav.main-nav a{ font-size:1rem; }
  .hamburger{ display:flex; }
  .nav-actions .btn-outline{ display:none; }
  .card-grid{ grid-template-columns:1fr; }
  .attraction-grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .gallery-grid{ columns:1; }
  section{ padding:64px 0; }
  .hero{ min-height:78vh; }
  .hero-louvers{ width:30px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px; }
}