/* ============================ FONTS ============================ */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/fraunces-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/fraunces-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/fraunces-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/fraunces-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/fraunces-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/fraunces-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/hanken-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/hanken-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/hanken-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/hanken-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/hanken-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/hanken-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ============================ TOKENS ============================ */
:root{
  --dew:#eef2ea; --paper:#f9fbf7; --mist:#e4eae0;
  --ink:#153229; --body:#41504a; --muted:#6c7b73;
  --pine:#1f5040; --teal:#2c7a72; --brass:#9a6a26; --brass-2:#835820;
  --line:rgba(21,50,41,.14); --line-strong:rgba(21,50,41,.26);
  --nav-bg:rgba(240,243,236,.82);
  --shadow:0 22px 48px -30px rgba(21,45,36,.55);
  --shadow-lg:0 40px 80px -40px rgba(21,45,36,.6);
  --radius:14px; --radius-lg:22px;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --wrap:1220px;
  /* Minimum keeps text off the screen edge on phones; the vw term opens it up
     on wider screens. */
  --gutter:clamp(1.6rem,6vw,5rem);
  --sp:clamp(4rem,8vw,9rem);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --dew:#0d1c16; --paper:#152e25; --mist:#112620;
    --ink:#e9f1e9; --body:#b4c4bb; --muted:#8ba093;
    --pine:#3a7a5f; --teal:#63b7ac; --brass:#d3a25c; --brass-2:#e2ba7d;
    --line:rgba(228,238,228,.14); --line-strong:rgba(228,238,228,.26);
    --nav-bg:rgba(13,28,22,.74);
    --shadow:0 24px 54px -30px rgba(0,0,0,.7);
    --shadow-lg:0 44px 90px -42px rgba(0,0,0,.78);
    color-scheme:dark;
  }
}
:root[data-theme="light"]{
  --dew:#eef2ea; --paper:#f9fbf7; --mist:#e4eae0;
  --ink:#153229; --body:#41504a; --muted:#6c7b73;
  --pine:#1f5040; --teal:#2c7a72; --brass:#9a6a26; --brass-2:#835820;
  --line:rgba(21,50,41,.14); --line-strong:rgba(21,50,41,.26);
  --nav-bg:rgba(240,243,236,.82);
  --shadow:0 22px 48px -30px rgba(21,45,36,.55);
  --shadow-lg:0 40px 80px -40px rgba(21,45,36,.6);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --dew:#0d1c16; --paper:#152e25; --mist:#112620;
  --ink:#e9f1e9; --body:#b4c4bb; --muted:#8ba093;
  --pine:#3a7a5f; --teal:#63b7ac; --brass:#d3a25c; --brass-2:#e2ba7d;
  --line:rgba(228,238,228,.14); --line-strong:rgba(228,238,228,.26);
  --nav-bg:rgba(13,28,22,.74);
  --shadow:0 24px 54px -30px rgba(0,0,0,.7);
  --shadow-lg:0 44px 90px -42px rgba(0,0,0,.78);
  color-scheme:dark;
}

/* ============================ BASE ============================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0}
.site{
  background:var(--dew); color:var(--body);
  font-family:var(--sans); font-size:clamp(1rem,.96rem + .2vw,1.08rem);
  line-height:1.68; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:var(--teal); text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif); color:var(--ink); font-weight:400;
  line-height:1.08; text-wrap:balance; margin:0; letter-spacing:-.01em}
p{margin:0}
::selection{background:var(--brass); color:#fff}
:focus-visible{outline:2.5px solid var(--brass); outline-offset:3px; border-radius:4px}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:var(--sp); position:relative}
.eyebrow{font-family:var(--sans); font-weight:600; font-size:.74rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--teal);
  display:inline-flex; align-items:center; gap:.6em; margin:0 0 1.1rem}
.eyebrow::before{content:""; width:26px; height:1.5px; background:var(--brass); opacity:.9}
/* Restrained scale on purpose: the photography leads, the type supports it.
   Keep the growth gentle — a big jump between phone and desktop makes the
   headings compete with the images. */
.h2{font-size:clamp(1.5rem,1.4rem + .42vw,1.95rem); font-weight:300}
.lede{font-size:clamp(1rem,.98rem + .12vw,1.12rem); color:var(--body); max-width:60ch; line-height:1.6}
.muted{color:var(--muted)}

/* buttons */
.btn{font-family:var(--sans); font-weight:600; font-size:.95rem;
  display:inline-flex; align-items:center; gap:.55em; cursor:pointer;
  padding:.85em 1.5em; border-radius:100px; border:1px solid transparent;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), background .3s, color .3s, box-shadow .35s;
  letter-spacing:.005em; line-height:1; text-align:center}
.btn svg{width:1.05em; height:1.05em}
.btn-primary{background:var(--brass); color:#1a1204; box-shadow:0 12px 26px -14px rgba(154,106,38,.9)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(154,106,38,.95)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--ink); color:var(--dew); transform:translateY(-2px)}
.btn-lg{padding:1.02em 1.9em; font-size:1rem}
.on-dark .btn-ghost{color:#fff; border-color:rgba(255,255,255,.5)}
.on-dark .btn-ghost:hover{background:#fff; color:var(--ink)}

/* ============================ NAV ============================ */
.nav{position:fixed; inset:0 0 auto 0; z-index:60; transition:background .4s, box-shadow .4s, border-color .4s;
  border-bottom:1px solid transparent}
.nav__in{max-width:1360px; margin-inline:auto; padding:.85rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1rem}
.nav.scrolled{background:var(--nav-bg); backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3); border-bottom-color:var(--line)}
.brand{display:flex; align-items:center; gap:.6rem; color:#fff; z-index:2}
.nav.scrolled .brand{color:var(--ink)}
.brand__mark{width:34px; height:34px; flex:none; transition:transform .5s}
.brand:hover .brand__mark{transform:rotate(-8deg)}
.brand__name{font-family:var(--serif); font-size:1.32rem; line-height:1; letter-spacing:.01em}
.brand__name b{font-weight:500}
.brand__sub{display:block; font-family:var(--sans); font-size:.56rem; letter-spacing:.34em;
  text-transform:uppercase; opacity:.72; margin-top:.28em; font-weight:600}
.nav__links{display:flex; align-items:center; gap:.3rem}
.nav__links a{font-family:var(--sans); font-weight:500; font-size:.92rem; color:#fff;
  padding:.5rem .72rem; border-radius:8px; opacity:.92; transition:opacity .25s, color .25s, background .25s}
.nav.scrolled .nav__links a{color:var(--ink)}
.nav__links a:hover{opacity:1; color:var(--brass-2)}
.nav.scrolled .nav__links a:hover{color:var(--brass)}
.nav__cta{margin-left:.5rem}
.nav__tools{display:flex; align-items:center; gap:.35rem}
.theme-btn{width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.4);
  background:transparent; color:#fff; cursor:pointer; display:grid; place-items:center; flex:none;
  transition:background .25s,color .25s,border-color .25s}
.nav.scrolled .theme-btn{border-color:var(--line-strong); color:var(--ink)}
.theme-btn:hover{background:rgba(255,255,255,.16)}
.nav.scrolled .theme-btn:hover{background:var(--mist)}
.theme-btn svg{width:18px; height:18px}
.theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:block}
:root[data-theme="dark"] .theme-btn .sun{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-btn .moon{display:block}
  :root:not([data-theme="light"]) .theme-btn .sun{display:none}}
/* Bars sit in a grid so the spacing is a single `gap` rather than margins that
   drift apart. The translucent fill keeps it legible over a bright photo. */
.hamburger{display:none; width:42px; height:42px; border:1px solid rgba(255,255,255,.3);
  background:rgba(9,22,16,.24); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-radius:50%; cursor:pointer; padding:0; gap:4.5px;
  /* place-content (not just place-items) — otherwise the three implicit rows
     stretch to fill the circle and the bars drift far apart. */
  place-items:center; place-content:center;
  transition:background .25s, border-color .25s}
.hamburger:hover{background:rgba(9,22,16,.4)}
.nav.scrolled .hamburger{border-color:var(--line-strong); background:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none}
.nav.scrolled .hamburger:hover{background:var(--mist)}
.hamburger span{display:block; width:18px; height:2px; background:#fff; border-radius:2px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), opacity .2s}
.nav.scrolled .hamburger span{background:var(--ink)}
/* Collapses into an X while the panel is open. */
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* mobile menu */
.mmenu{position:fixed; inset:0; z-index:70; background:var(--dew);
  transform:translateX(100%); transition:transform .5s cubic-bezier(.6,0,.2,1);
  display:flex; flex-direction:column; padding:6rem var(--gutter) 2.5rem; visibility:hidden}
.mmenu.open{transform:none; visibility:visible}
.mmenu a{font-family:var(--serif); font-size:2rem; color:var(--ink); padding:.55rem 0;
  border-bottom:1px solid var(--line); font-weight:300}
.mmenu a:hover{color:var(--brass)}
.mmenu__close{position:absolute; top:1.4rem; right:var(--gutter); width:46px; height:46px;
  border-radius:50%; border:1px solid var(--line-strong); background:transparent; cursor:pointer;
  font-size:1.4rem; color:var(--ink); line-height:1}
.mmenu__foot{margin-top:auto; display:flex; flex-direction:column; gap:.4rem; color:var(--muted); font-size:.95rem}
.mmenu__foot a{font-family:var(--sans); font-size:1rem; color:var(--teal); border:none; padding:0}

/* ============================ HERO ============================ */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end;
  color:#fff; isolation:isolate; overflow:hidden}
.hero__media{position:absolute; inset:0; z-index:-2}
.hero__media img{width:100%; height:100%; object-fit:cover; animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.hero__media img{animation:none}}
.hero__scrim{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(11,26,19,.5) 0%,rgba(11,26,19,.16) 34%,rgba(11,26,19,.34) 62%,rgba(9,22,16,.86) 100%)}
.hero__in{max-width:var(--wrap); margin-inline:auto; width:100%; padding:0 var(--gutter) clamp(3.5rem,7vw,6rem)}
.hero__kicker{font-weight:600; letter-spacing:.28em; text-transform:uppercase; font-size:.76rem;
  color:#fff; opacity:.94; display:flex; align-items:center; gap:.7em; margin-bottom:1.4rem}
.hero__kicker::before{content:""; width:34px; height:1.5px; background:var(--brass-2); background:#e6c07a}
.hero h1{color:#fff; font-size:clamp(2rem,1.85rem + .62vw,2.85rem); font-weight:300; line-height:1.12;
  letter-spacing:-.02em; margin-bottom:1.4rem; text-shadow:0 2px 30px rgba(0,0,0,.35); max-width:15ch}
.hero h1 em{font-style:italic; color:#f2dcae}
.hero__sub{font-size:clamp(1.02rem,1rem + .14vw,1.18rem); max-width:52ch; color:rgba(255,255,255,.94);
  line-height:1.58; text-shadow:0 1px 16px rgba(0,0,0,.4); font-weight:400}
.hero__cta{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.2rem}
.hero__stats{display:flex; flex-wrap:wrap; gap:.9rem 2.4rem; margin-top:3rem;
  padding-top:1.8rem; border-top:1px solid rgba(255,255,255,.24); max-width:640px}
.hero__stat{display:flex; flex-direction:column; gap:.15rem}
.hero__stat b{font-family:var(--serif); font-size:1.7rem; font-weight:400; color:#fff; line-height:1}
.hero__stat span{font-size:.8rem; letter-spacing:.04em; color:rgba(255,255,255,.82); text-transform:uppercase}
.scrolldown{position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%); z-index:2;
  width:26px; height:42px; border:1.5px solid rgba(255,255,255,.5); border-radius:14px; display:grid; place-items:start center}
.scrolldown i{width:3px; height:8px; background:#fff; border-radius:2px; margin-top:7px; animation:sd 1.8s infinite}
@keyframes sd{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}80%{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){.scrolldown i{animation:none}}

/* ============================ STORY ============================ */
.story{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center}
.story__media{position:relative}
.story__media img{width:100%; aspect-ratio:5/4; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow)}
.story__badge{position:absolute; bottom:-26px; left:-26px; background:var(--paper); color:var(--ink);
  padding:1.15rem 1.5rem; border-radius:16px; box-shadow:var(--shadow); border:1px solid var(--line);
  font-family:var(--serif); text-align:center; line-height:1}
.story__badge b{display:block; font-size:2.2rem; font-weight:500; color:var(--pine)}
.story__badge span{font-family:var(--sans); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:.4rem; display:block}
.story__body p{margin-top:1.2rem}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.4rem}
.stat{border-top:2px solid var(--line-strong); padding-top:.85rem}
.stat b{font-family:var(--serif); font-size:1.8rem; color:var(--ink); font-weight:400; display:block; line-height:1; font-variant-numeric:tabular-nums}
.stat span{font-size:.82rem; color:var(--muted); letter-spacing:.02em}

/* ============================ FACILITIES ============================ */
.sec-head{max-width:64ch}
.sec-head .lede{margin-top:1rem}
.feature{position:relative; border-radius:var(--radius-lg); overflow:hidden; margin-top:3rem;
  min-height:clamp(320px,42vw,460px); display:flex; align-items:flex-end; color:#fff; isolation:isolate}
.feature img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.2s ease}
.feature:hover img{transform:scale(1.05)}
.feature::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg,rgba(9,22,16,.82) 0%,rgba(9,22,16,.5) 42%,rgba(9,22,16,.08) 78%)}
.feature__in{padding:clamp(1.8rem,4vw,3rem); max-width:40ch}
.feature h3{color:#fff; font-size:clamp(1.28rem,1.18rem + .34vw,1.62rem); font-weight:400; margin-bottom:.7rem}
.feature p{color:rgba(255,255,255,.92); font-size:1.05rem}
.feature .tag{margin-bottom:1rem}

.fgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem); margin-top:clamp(1rem,2vw,1.6rem)}
.fcard{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s, border-color .4s}
.fcard:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent}
.fcard__img{aspect-ratio:16/11; overflow:hidden}
.fcard__img img{width:100%; height:100%; object-fit:cover; transition:transform .7s ease}
.fcard:hover .fcard__img img{transform:scale(1.07)}
.fcard__b{padding:1.3rem 1.4rem 1.5rem}
.fcard h4{font-size:1.28rem; margin-bottom:.5rem; display:flex; align-items:center; gap:.5rem}
.fcard p{font-size:.96rem; color:var(--muted); line-height:1.55}

/* ============================ ROOMS ============================ */
.rooms{background:var(--mist)}
.rgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.7rem); margin-top:3rem}
.rcard{background:var(--paper); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s}
.rcard:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.rcard__img{position:relative; aspect-ratio:4/3; overflow:hidden}
.rcard__img img{width:100%; height:100%; object-fit:cover; transition:transform .7s ease}
.rcard:hover .rcard__img img{transform:scale(1.06)}
.chip{position:absolute; top:.9rem; left:.9rem; background:rgba(13,28,22,.72); color:#fff;
  font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:.4em .8em; border-radius:100px; backdrop-filter:blur(6px)}
.rcard__b{padding:1.25rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.5rem}
.rcard h4{font-size:1.35rem}
.rcard__meta{display:flex; align-items:center; gap:.5rem; color:var(--teal); font-weight:600; font-size:.9rem}
.rcard__meta svg{width:1.05em; height:1.05em}
.note{margin-top:2.4rem; padding:1.4rem 1.6rem; border-left:3px solid var(--brass);
  background:var(--paper); border-radius:0 var(--radius) var(--radius) 0; color:var(--body); font-size:.98rem}

/* ============================ OFFER ============================ */
.offer{background:var(--ink); color:#eaf1e9; position:relative; overflow:hidden}
:root[data-theme="dark"] .offer{background:#0a1611}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .offer{background:#0a1611}}
.offer::before{content:""; position:absolute; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(211,162,92,.16),transparent 70%); top:-160px; right:-120px}
.offer .eyebrow{color:#e6c07a}
.offer .eyebrow::before{background:#e6c07a}
.offer h2{color:#fff}
.ticket{margin-top:2.8rem; background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-lg); overflow:hidden;
  display:grid; grid-template-columns:.85fr 1.15fr; box-shadow:var(--shadow-lg)}
.ticket__price{padding:clamp(2rem,4vw,3.2rem); display:flex; flex-direction:column; justify-content:center;
  gap:.5rem; position:relative; border-right:2px dashed rgba(255,255,255,.22)}
.ticket__tagline{font-family:var(--sans); font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:#e6c07a; font-weight:600}
.ticket__amt{font-family:var(--serif); font-size:clamp(1.8rem,1.65rem + .55vw,2.4rem); font-weight:400; color:#fff;
  line-height:.9; font-variant-numeric:tabular-nums}
.ticket__amt small{font-size:.9rem; font-family:var(--sans); color:rgba(255,255,255,.7); letter-spacing:.02em; font-weight:500}
.ticket__per{color:rgba(255,255,255,.78); font-size:1rem}
.ticket__cut{content:""; position:absolute; width:30px; height:30px; border-radius:50%; background:var(--ink); right:-15px}
.ticket__cut.t{top:-15px}.ticket__cut.b{bottom:-15px}
.ticket__body{padding:clamp(1.8rem,3.5vw,2.8rem)}
.incl{list-style:none; margin:0 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1.4rem}
.incl li{display:flex; gap:.6rem; align-items:flex-start; font-size:.98rem; color:rgba(255,255,255,.92)}
.incl svg{width:1.15em; height:1.15em; color:#e6c07a; flex:none; margin-top:.15em}
.ticket__foot{margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.16);
  display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; justify-content:space-between}
.ticket__cond{font-size:.85rem; color:rgba(255,255,255,.66); max-width:38ch; line-height:1.5}

/* ============================ NATURE BAND ============================ */
.band{position:relative; min-height:clamp(340px,50vh,520px); display:flex; align-items:center;
  color:#fff; isolation:isolate; overflow:hidden; text-align:center}
.band img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.band::after{content:""; position:absolute; inset:0; z-index:-1; background:rgba(9,22,16,.5)}
.band__in{max-width:40ch; margin-inline:auto; padding:var(--gutter)}
.band h2{color:#fff; font-size:clamp(1.5rem,1.4rem + .42vw,1.95rem); font-weight:300; margin-bottom:1rem}
.band p{color:rgba(255,255,255,.92); font-size:1.15rem}

/* ============================ ATTRACTIONS ============================ */
.agrid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.7rem); margin-top:3rem}
.acard{position:relative; border-radius:var(--radius); overflow:hidden; min-height:340px;
  display:flex; align-items:flex-end; color:#fff; isolation:isolate}
.acard img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .8s ease}
.acard:hover img{transform:scale(1.08)}
.acard::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(0deg,rgba(9,22,16,.9) 0%,rgba(9,22,16,.35) 55%,rgba(9,22,16,.05) 100%)}
.acard__b{padding:1.5rem}
.acard .tag{margin-bottom:.7rem}
.acard h4{color:#fff; font-size:1.4rem; margin-bottom:.5rem}
.acard p{color:rgba(255,255,255,.88); font-size:.92rem; line-height:1.5}
.tag{display:inline-block; font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; padding:.35em .8em; border-radius:100px;
  background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.24)}

/* ============================ GALLERY ============================ */
.gallery{background:var(--mist)}
.masonry{columns:4 220px; column-gap:clamp(.7rem,1.4vw,1.1rem); margin-top:3rem}
.masonry figure{margin:0 0 clamp(.7rem,1.4vw,1.1rem); break-inside:avoid; border-radius:12px; overflow:hidden;
  cursor:zoom-in; position:relative; box-shadow:0 8px 20px -16px rgba(0,0,0,.5)}
.masonry img{width:100%; height:auto; transition:transform .6s ease, filter .4s}
.masonry figure::after{content:""; position:absolute; inset:0; background:rgba(21,50,41,0); transition:background .35s}
.masonry figure:hover img{transform:scale(1.05)}
.masonry figure:hover::after{background:rgba(21,50,41,.12)}

/* lightbox */
.lb{position:fixed; inset:0; z-index:100; background:rgba(7,16,12,.94); display:none;
  align-items:center; justify-content:center; opacity:0; transition:opacity .3s;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.lb.show{display:flex; opacity:1}
.lb img{max-width:92vw; max-height:86vh; border-radius:8px; box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:lbin .4s ease}
@keyframes lbin{from{transform:scale(.96); opacity:.4}to{transform:scale(1); opacity:1}}
.lb__btn{position:absolute; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24);
  color:#fff; width:52px; height:52px; border-radius:50%; cursor:pointer; display:grid; place-items:center;
  font-size:1.4rem; transition:background .25s}
.lb__btn:hover{background:rgba(255,255,255,.26)}
.lb__close{top:1.3rem; right:1.3rem}
.lb__prev{left:1.3rem; top:50%; transform:translateY(-50%)}
.lb__next{right:1.3rem; top:50%; transform:translateY(-50%)}
.lb__count{position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.8);
  font-size:.9rem; letter-spacing:.1em; font-variant-numeric:tabular-nums}

/* ============================ CONTACT ============================ */
.contact-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,4vw,4rem); margin-top:3rem; align-items:start}
.cinfo{display:flex; flex-direction:column; gap:1.6rem}
.cline{display:flex; gap:1rem; align-items:flex-start}
.cline__ic{width:44px; height:44px; flex:none; border-radius:12px; background:var(--mist); color:var(--teal);
  display:grid; place-items:center; border:1px solid var(--line)}
.cline__ic svg{width:20px; height:20px}
.cline h4{font-size:1.05rem; font-family:var(--sans); font-weight:700; color:var(--ink); margin-bottom:.2rem; letter-spacing:0}
.cline a,.cline p{color:var(--body); font-size:1rem; line-height:1.5}
.cline a{display:block}
.cline a:hover{color:var(--brass)}
.cmap{margin-top:.4rem}
.form{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3vw,2.4rem); box-shadow:var(--shadow)}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.field{display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem}
.field label{font-size:.8rem; font-weight:600; color:var(--ink); letter-spacing:.03em}
.field input,.field select,.field textarea{font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--dew); border:1px solid var(--line-strong); border-radius:10px; padding:.75rem .9rem; width:100%;
  transition:border-color .25s, box-shadow .25s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--brass);
  box-shadow:0 0 0 3px rgba(154,106,38,.16)}
.field textarea{resize:vertical; min-height:96px}
.form__actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:.4rem}
.btn-wa{background:#1ea952; color:#fff; box-shadow:0 12px 26px -14px rgba(30,169,82,.9)}
.btn-wa:hover{transform:translateY(-2px); background:#199247}
.form__hint{font-size:.82rem; color:var(--muted); margin-top:1rem; line-height:1.5}

/* ============================ FLOAT WA ============================ */
.fab{position:fixed; bottom:1.3rem; right:1.3rem; z-index:55; width:58px; height:58px; border-radius:50%;
  background:#1ea952; color:#fff; display:grid; place-items:center; box-shadow:0 14px 30px -10px rgba(30,169,82,.7);
  transition:transform .3s; animation:fabin .5s .8s both}
.fab:hover{transform:scale(1.08)}
.fab svg{width:30px; height:30px}
@keyframes fabin{from{transform:scale(0); opacity:0}to{transform:scale(1); opacity:1}}

/* ============================ FOOTER ============================ */
.footer{background:var(--ink); color:rgba(233,241,233,.72); padding-block:clamp(3.5rem,6vw,5rem) 2rem}
:root[data-theme="dark"] .footer{background:#0a1611}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .footer{background:#0a1611}}
.footer__top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; padding-bottom:3rem;
  border-bottom:1px solid rgba(255,255,255,.12)}
.footer .brand__name{color:#fff}
.footer__tag{margin-top:1.2rem; max-width:34ch; color:rgba(233,241,233,.6); font-size:.98rem; line-height:1.6}
.footer h5{font-family:var(--sans); font-weight:700; color:#fff; font-size:.82rem; letter-spacing:.14em;
  text-transform:uppercase; margin:0 0 1.1rem}
.footer__col a,.footer__col p{display:block; color:rgba(233,241,233,.72); font-size:.98rem; padding:.28rem 0; line-height:1.4}
.footer__col a:hover{color:#e6c07a}
.footer__bot{display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between; align-items:center;
  padding-top:1.8rem; font-size:.86rem; color:rgba(233,241,233,.5)}
.footer__bot a{color:rgba(233,241,233,.7)}

/* ============================ REVEAL ============================ */
/* Content is visible by default; the reveal animation is opt-in and only applies
   once JS confirms it can un-hide these elements again. */
.js .reveal{opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1)}
.js .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1; transform:none; transition:none}}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1000px){
  .nav__links{display:none}
  .hamburger{display:grid}
  .nav__cta{display:none}
  .story{grid-template-columns:1fr; gap:3rem}
  .story__media{order:-1}
  .fgrid,.rgrid,.agrid{grid-template-columns:repeat(2,1fr)}
  .ticket{grid-template-columns:1fr}
  .ticket__price{border-right:none; border-bottom:2px dashed rgba(255,255,255,.22)}
  .ticket__cut{display:none}
  .contact-grid{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr 1fr; gap:2rem}
}
@media (max-width:640px){
  .fgrid,.rgrid,.agrid,.incl,.stats{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .masonry{columns:2 150px}
  .story__badge{left:1rem; bottom:-20px; padding:.9rem 1.1rem}
  .footer__top{grid-template-columns:1fr}
  .lb__prev{left:.5rem}.lb__next{right:.5rem}
  .theme-btn{display:none}
  /* Full-width buttons are far easier to hit with a thumb. */
  .hero__cta{gap:.7rem}
  .hero__cta .btn,.form__actions .btn{flex:1 1 100%}
  /* Two tidy columns beat four cramped ones. */
  .hero__stats{display:grid; grid-template-columns:1fr 1fr; gap:1.15rem 1.2rem; margin-top:2.4rem}
  .hero__stat b{font-size:1.45rem}
  .hero__sub{font-size:1.05rem}
  .brand__sub{letter-spacing:.24em}
  .feature{min-height:clamp(300px,72vw,400px)}
  .feature__in{padding:1.6rem 1.35rem}
  .band{min-height:clamp(290px,68vw,420px)}
  .acard{min-height:300px}
  .note{padding:1.15rem 1.25rem}
  .ticket__price{padding:1.9rem 1.5rem}
  .story__body p{margin-top:1rem}
}
@media (max-width:380px){
  .hero__stats{grid-template-columns:1fr}
}
@media (max-width:380px){.masonry{columns:1}}