:root{
  --bg:#0b0b0b;
  --paper:#f6f2ea;
  --paper2:#efe8dc;
  --text:#111;
  --muted:#5b5b5b;
  --white:#fff;
  --line:rgba(17,17,17,.12);
  --line2:rgba(255,255,255,.14);
  --gold:#b08d57;
  --gold2:#d4b377;
  --shadow:0 18px 60px rgba(0,0,0,.18);
  --radius:20px;
  --radius2:14px;
  --container:1120px;
  --header-h:72px;
  --font-sans:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --font-serif:"Cormorant Garamond", ui-serif, Georgia, "Times New Roman", serif;
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--font-sans);
  background:var(--paper);
  color:var(--text);
  line-height:1.55;
}
body.nav-open{overflow:hidden}

/* Typography */
h1,h2,h3,.brand-name,.footer-title{font-family: var(--font-serif);}
h1,h2,h3{font-weight:600;}
.brand-name{letter-spacing:.02em}


img{max-width:100%;height:auto;display:block}

.container{max-width:var(--container); margin:0 auto; padding:0 18px}

.skip{
  position:absolute; left:-999px; top:10px;
  background:var(--white); color:var(--text);
  padding:10px 12px; border-radius:10px;
}
.skip:focus{left:10px; z-index:10000}

/* Header */
.site-header{
  /* Fixed so it overlays the hero video (transparent on top, solid on scroll) */
  position:fixed; top:0; left:0; right:0; z-index:80;
  background:transparent;
  backdrop-filter:none;
  border-bottom:1px solid rgba(255,255,255,.10);
  transition: background .18s ease, backdrop-filter .18s ease, border-color .18s ease;
}
.site-header.is-scrolled{
  background:rgba(11,11,11,.84);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line2);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--white)}
.brand-mark{display:inline-flex; width:24px; height:24px; align-items:center; justify-content:center; border:1px solid var(--line2); border-radius:999px; color:var(--gold2)}
.brand-mark img{width:18px;height:18px;display:block;object-fit:contain;}
.brand-name{font-weight:650; letter-spacing:.2px}

.nav{display:flex; align-items:center; gap:12px}
.nav-link{color:rgba(255,255,255,.82); text-decoration:none; font-weight:550; padding:10px 10px; border-radius:12px}
.nav-link:hover{background:rgba(255,255,255,.06)}
.nav-link.is-active{color:var(--white); background:rgba(255,255,255,.08)}

.nav-toggle{
  display:none;
  width:44px; height:44px;
  background:rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.nav-toggle span{
  display:block;
  width:30px;
  height:3px;
  background:rgba(255,255,255,.92);
  margin:6px 0;
  border-radius:999px;
}

.nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
  z-index:79;
}
.nav-overlay.is-open{opacity:1; pointer-events:auto;}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:650;
  letter-spacing:.1px;
  text-decoration:none;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:active{transform: translateY(1px)}

.btn-gold{
  background:linear-gradient(180deg, var(--gold2), var(--gold));
  color:#1a1208;
  border-color: rgba(0,0,0,.12);
}
.btn-gold:hover{filter:saturate(1.05)}

.btn-ghost{
  /* Default (light surfaces) */
  background:transparent;
  border-color: rgba(17,17,17,.18);
  color:var(--text);
}

.btn-ghost:hover{background:rgba(0,0,0,.04)}

/* On video / dark surfaces: increase contrast so text stays readable */
.hero .btn-ghost,
.page-head .btn-ghost,
.site-header .btn-ghost,
.site-footer .btn-ghost{
  color:var(--white);
  border-color: rgba(255,255,255,.26);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.hero .btn-ghost:hover,
.page-head .btn-ghost:hover,
.site-header .btn-ghost:hover,
.site-footer .btn-ghost:hover{
  background: rgba(0,0,0,.42);
  border-color: rgba(255,255,255,.34);
}

/* Main */
.site-main{min-height:60vh; padding-top: var(--header-h)}

.kicker{font-size:.82rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.74)}
.lead{font-size:1.12rem; color:rgba(255,255,255,.86); max-width:62ch}

/* iOS: prevent default blue system styling on buttons/links */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn,
.icon-btn,
.nav-toggle,
.cal-day{
  -webkit-appearance: none;
  appearance: none;
}
a.btn:visited{color:inherit}
a.btn.btn-gold:visited{color:#1a1208}
a.btn.btn-ghost:visited{color:var(--text)}
.hero a.btn-ghost:visited,
.page-head a.btn-ghost:visited,
.site-header a.btn-ghost:visited,
.site-footer a.btn-ghost:visited{color:var(--white)}
.modal-panel a.btn.btn-ghost:visited{color:var(--text)}

.hero{
  background: radial-gradient(1200px 600px at 30% 10%, rgba(176,141,87,.18), transparent 55%),
              linear-gradient(180deg, #0b0b0b, #121212 70%, rgba(18,18,18,0));
  color:var(--white);
  /* Pull hero behind fixed header while keeping spacing for text */
  margin-top: calc(-1 * var(--header-h));
  padding: calc(58px + var(--header-h)) 0 22px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:78vh;
}
.hero > .container{position:relative; z-index:2}

.hero-bg{position:absolute; inset:0; z-index:0}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.02)}
.hero-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 30% 15%, rgba(176,141,87,.18), transparent 60%),
    linear-gradient(180deg, rgba(11,11,11,.78), rgba(11,11,11,.45) 55%, rgba(11,11,11,.68));
}

@media (prefers-reduced-motion: reduce){
  .hero-video{display:none}
}
.hero-grid{display:grid; grid-template-columns: 1.15fr .85fr; gap:26px; align-items:stretch}
.hero h1{font-size: clamp(2.1rem, 4vw, 3.2rem); line-height:1.05; margin:10px 0 12px; letter-spacing:-.02em}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 14px}
.trust{display:flex; gap:10px; flex-wrap:wrap}
.pill{border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.88); padding:8px 12px; border-radius:999px; font-size:.92rem}

/* Improve legibility on moving video backgrounds */
.hero .pill,
.page-head .pill{
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
}

.hero-card{
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius);
  box-shadow: 0 25px 80px rgba(0,0,0,.38);
  backdrop-filter: blur(12px);
}
.hero-card-inner{padding:18px}
.stat{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.stat-num{font-size:2rem; font-weight:800; color:var(--gold2)}
.stat-label{color:rgba(255,255,255,.86); font-size:.95rem; max-width:26ch}
.divider{height:1px; background:rgba(255,255,255,.18); margin:14px 0}
.mini-list{display:grid; gap:10px; color:rgba(255,255,255,.9)}

.section{padding:52px 0}
.section-contrast{background:linear-gradient(180deg, var(--paper2), var(--paper))}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:18px; margin-bottom:18px}
.section-head h2{margin:0; font-size:1.75rem; letter-spacing:-.01em}

.cards{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px}
.card{
  background: rgba(255,255,255,.62);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: 0 14px 50px rgba(0,0,0,.06);
}
.card-kicker{font-weight:800; color:var(--gold); letter-spacing:.08em}
.card h3{margin:8px 0 6px}

.muted{color:var(--muted)}
.small{font-size:.92rem}

.split{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch}
.panel{
  background: rgba(255,255,255,.72);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: 0 14px 50px rgba(0,0,0,.06);
}
.panel-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px}

/* MAP (OpenStreetMap / Leaflet) */
.map-wrap{margin-top:14px}
.osm-map{width:100%; height:260px; border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow: 0 12px 40px rgba(0,0,0,.18);}
.leaflet-container{font: inherit;}
.map-wrap .leaflet-control-attribution{
  font-size:10px;
  opacity:.65;
  background: rgba(255,255,255,.66);
  padding: 2px 6px;
  border-radius: 999px;
  margin: 0 8px 8px 0;
}
.map-wrap .leaflet-control-attribution a{color: rgba(11,11,11,.8)}

.list{padding-left:18px; margin:12px 0}
.list li{margin:8px 0}

.grid-icons{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px}
.icon-item{background:rgba(255,255,255,.62); border:1px solid var(--line); border-radius: 999px; padding:10px 12px; display:flex; align-items:center; gap:10px}
.dot{width:8px; height:8px; border-radius:999px; background:var(--gold)}

.cta{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px; border-radius: var(--radius); border:1px solid var(--line); background:rgba(255,255,255,.72); box-shadow: 0 14px 50px rgba(0,0,0,.06)}
.cta-actions{display:flex; gap:12px; flex-wrap:wrap}

/* Page head */
.page-head{
  background: linear-gradient(180deg, #0b0b0b, #141414 70%, rgba(20,20,20,0));
  color:var(--white);
  /* Pull head behind fixed header while keeping spacing for text */
  margin-top: calc(-1 * var(--header-h));
  padding: calc(44px + var(--header-h)) 0 10px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:48vh;
}
.page-head > .container{position:relative; z-index:2}
.page-head h1{margin:10px 0 10px; font-size: clamp(2rem, 3.5vw, 2.8rem); letter-spacing:-.02em; line-height:1.08}

/* Make cards readable on the dark / video page head (e.g., Booking hero) */
.page-head .cards{grid-template-columns: repeat(3, 1fr)}
.page-head .card{
  background: rgba(11,11,11,.44);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 25px 80px rgba(0,0,0,.22);
  backdrop-filter: blur(14px);
}
.page-head .card .muted,
.page-head .muted{color: rgba(255,255,255,.74)}

/* Calendar (custom month view inside booking modal) */
.calendar{
  border:1px solid rgba(17,17,17,.18);
  background: rgba(255,255,255,.78);
  border-radius: var(--radius);
  padding:12px;
}
.calendar-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.calendar-title{font-weight:800; letter-spacing:-.01em}
.cal-nav{display:flex; gap:8px}
.cal-btn{width:40px; height:40px; border-radius: 14px; border:1px solid rgba(17,17,17,.16); background:rgba(255,255,255,.65); cursor:pointer}
.cal-btn:hover{background:rgba(255,255,255,.85)}
.calendar-grid{display:grid; grid-template-columns: repeat(7, 1fr); gap:8px}
.cal-dow{font-size:.82rem; font-weight:700; color:rgba(17,17,17,.62); text-align:center; padding:4px 0}
.cal-day{height:42px; border-radius: 12px; border:1px solid rgba(17,17,17,.14); background:rgba(255,255,255,.62); cursor:pointer; font-weight:700}
.cal-day.is-other{opacity:.35; cursor:default}
.cal-day.is-disabled{opacity:.45; cursor:not-allowed}
.cal-day.is-selected{outline:3px solid rgba(176,141,87,.32); border-color: rgba(176,141,87,.55)}

/* Availability colors */
.cal-day.is-available{border-color: rgba(34,197,94,.55); background: rgba(34,197,94,.14)}
.cal-day.is-unavailable{border-color: rgba(239,68,68,.55); background: rgba(239,68,68,.12)}

.cal-legend{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; color:rgba(17,17,17,.62); font-size:.9rem}
.cal-chip{display:inline-flex; align-items:center; gap:8px}
.cal-swatch{width:12px; height:12px; border-radius:999px; border:1px solid rgba(17,17,17,.14)}
.cal-swatch.green{background: rgba(34,197,94,.35); border-color: rgba(34,197,94,.55)}
.cal-swatch.red{background: rgba(239,68,68,.30); border-color: rgba(239,68,68,.55)}

/* Timeline */
.timeline{display:grid; gap:12px}
.t-item{display:grid; grid-template-columns: 44px 1fr; gap:12px; padding:14px; border-radius: var(--radius); border:1px solid var(--line); background:rgba(255,255,255,.62)}
.t-num{width:44px; height:44px; border-radius: 14px; display:flex; align-items:center; justify-content:center; background:rgba(176,141,87,.14); color:var(--gold); font-weight:800}

/* FAQ */
.faq{display:grid; gap:10px}
.faq-item{border:1px solid var(--line); border-radius: var(--radius); background:rgba(255,255,255,.62); padding:10px 14px}
.faq-item summary{cursor:pointer; font-weight:700; padding:8px 0}
.faq-body{padding:0 0 10px}

/* Footer */
.site-footer{background:#0b0b0b; color:var(--white); margin-top:42px; border-top:1px solid var(--line2)}
.footer-grid{display:grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap:16px; padding:34px 0}
.footer-title{font-weight:800; margin-bottom:8px}
.footer-nav{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px 18px;
  margin-top:10px;
}

/* fallback / legacy */
.footer-nav .footer-sub{opacity:.9; padding-left:10px}
.footer-nav .footer-sub:hover{opacity:1}
.footer-bottom{display:flex; justify-content:space-between; gap:12px; padding:16px 0 26px; border-top:1px solid var(--line2)}
.footer-links{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:flex-end}
.sep{opacity:.55}
.link{color:inherit}
.link:hover{color:var(--gold)}
.link-strong{color:var(--text)!important}

/* Footer readability */
.site-footer .muted{color:rgba(255,255,255,.74)}
.site-footer .link{color:rgba(255,255,255,.88)}
.site-footer .link:hover{color:var(--gold2)}

/* Links on dark hero */
.page-head .link{color:rgba(255,255,255,.90)}
.page-head .link:hover{color:var(--gold2)}


/* Modal */
.modal{position:fixed; inset:0; display:none; z-index:100}
.modal.is-open{display:block}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.62)}
.modal-panel{
  position:relative;
  width:min(720px, calc(100% - 24px));
  margin: min(7vh, 60px) auto;
  background:rgba(246,242,234,.98);
  border:1px solid rgba(17,17,17,.16);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  max-height: calc(100vh - 24px);
}
.modal-head{display:flex; justify-content:space-between; gap:12px; padding:16px 16px 10px; border-bottom:1px solid var(--line)}
.icon-btn{width:44px; height:44px; border-radius: 14px; border:1px solid var(--line); background:rgba(255,255,255,.6); cursor:pointer; font-size:18px}

/* Kicker inside the booking modal sits on a light surface */
.modal .kicker{color:rgba(17,17,17,.68)}

.progress{height:8px; background:rgba(17,17,17,.08)}
.progress-bar{height:8px; width:0%; background:linear-gradient(90deg, var(--gold), var(--gold2)); transition: width .18s ease}

.form{padding:14px 16px 16px; overflow:auto; flex:1; min-height:0; -webkit-overflow-scrolling:touch}
.form .hp{position:absolute; left:-9999px; opacity:0}
.step{display:none}
.step.is-active{display:block}

label{display:block; margin:10px 0}
label span{display:block; font-size:.95rem; font-weight:650; margin-bottom:6px}
input, select, textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid rgba(17,17,17,.18);
  background: rgba(255,255,255,.78);
  outline:none;
}
input:focus, select:focus, textarea:focus{border-color: rgba(176,141,87,.62); box-shadow: 0 0 0 4px rgba(176,141,87,.14)}

.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:12px}

.actions{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px}

/* Booking modal sits on a light surface: keep ghost buttons dark inside the modal only */
.modal-panel .btn.btn-ghost{border-color: rgba(17,17,17,.22); color:var(--text)}
.modal-panel .btn.btn-ghost:hover{background:rgba(17,17,17,.04)}

.card-radio{display:flex; border:1px solid rgba(17,17,17,.14); border-radius: var(--radius); background:rgba(255,255,255,.72); padding:12px; gap:12px; cursor:pointer}
.card-radio input{width:auto; margin-top:4px}
.card-radio strong{display:block}

.notice{border:1px solid rgba(176,141,87,.34); background:rgba(176,141,87,.10); border-radius: var(--radius2); padding:12px}

.bank{border:1px solid rgba(17,17,17,.14); background:rgba(255,255,255,.66); border-radius: var(--radius2); padding:12px; margin:12px 0}
.bank-row{display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px solid rgba(17,17,17,.10)}
.bank-row:first-child{border-top:0}

/* Custom file picker (keeps consistent styling on iOS) */
.file-field{margin:10px 0}
.file-field .field-label{display:block; font-size:.95rem; font-weight:650; margin-bottom:6px}
.file-field input[type="file"]{position:absolute; left:-9999px; opacity:0}
.file-ui{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.file-name{font-size:.95rem; color:rgba(17,17,17,.72)}

.form-status{margin-top:10px; font-weight:650}
.form-status.is-ok{color:#0b6b2b}
.form-status.is-err{color:#a51414}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr;}
  .cards{grid-template-columns: repeat(2, 1fr)}
  .split{grid-template-columns: 1fr}
  .grid-icons{grid-template-columns: repeat(2,1fr)}
  .footer-grid{grid-template-columns: 1fr 1fr;}
}

@media (max-width: 720px){
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center}
  /* Off-canvas menu (opens from the right) */
  .nav{
    position:fixed;
    top:0;
    right:0;
    height:100vh;
    width:min(86vw, 360px);
    flex-direction:column;
    align-items:stretch;
    padding:18px;
    padding-top:86px;
    background:rgba(11,11,11,.98);
    border-left:1px solid rgba(255,255,255,.10);
    border-radius:0;
    transform:translateX(105%);
    transition:transform .2s ease;
    display:flex;
    gap:10px;
    z-index:90;
    pointer-events:none;
  }
  .nav.is-open{transform:translateX(0); pointer-events:auto}
  .nav-link{padding:12px 12px}

  .cards{grid-template-columns: 1fr}
  .grid2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns: 1fr}
  .footer-bottom{flex-direction:column}
  .footer-links{justify-content:flex-start}
  .modal-panel{margin: 12px auto; width: calc(100% - 16px); max-height: calc(100vh - 16px)}
}

@media (max-width: 420px){
  .footer-nav{grid-template-columns: 1fr;}
}