:root{
  --bg:#fbf7ee; --fg:#3a2f24; --muted:#7a6a58; --card:#fdfaf2;
  --primary:#d6a443; --primary-fg:#2a2014; --accent:#a64a2a;
  --secondary:#f1e6cc; --border:#e7d9bd;
  --shadow-warm: 0 20px 50px -20px rgba(166,74,42,.35);
  --gradient-warm: linear-gradient(135deg,#e8b96a,#c5642f);
  --gradient-hero: linear-gradient(180deg, rgba(0,0,0,.15), rgba(40,25,10,.75));
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--fg);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.serif{font-family:var(--serif);font-weight:500;letter-spacing:-.01em}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.eyebrow{color:var(--accent);font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:600}

/* Header */
.header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  padding-top:10px;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;

  max-width:1240px;
  margin:0 auto;

  padding:10px 22px;

  background:rgba(15,15,15,.28);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  border:1px solid rgba(255,255,255,.08);

  border-radius:22px;

  box-shadow:
    0 10px 40px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.header.scrolled .header-inner,
.header.solid .header-inner{
  background:rgba(20,20,20,.42);
}

.logo{
  font-family:var(--serif);
  font-size:20px;
  color:#fff;
}

.nav{
  display:flex;
  gap:10px;
  align-items:center;
}

.nav a{
  font-size:15px;
  color:rgba(255,255,255,.92);
  font-weight:600;

  padding:8px 14px;
  border-radius:999px;

  transition:
    background .25s,
    color .25s,
    transform .2s;

  text-shadow:0 2px 12px rgba(0,0,0,.55);
}

.nav a:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}

.nav a.active{
  background:var(--primary);
  color:var(--primary-fg) !important;

  box-shadow:
    0 8px 22px rgba(214,164,67,.35);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 26px;
  border-radius:999px;
  font-weight:500;
  font-size:14px;
  cursor:pointer;
  border:none;
  transition:all .2s;
  font-family:inherit;
}

.btn-primary{
  background:var(--primary);
  color:var(--primary-fg);
  box-shadow:var(--shadow-warm);
}

.btn-primary:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
}

.btn-ghost{
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(8px);
}

.btn-ghost:hover{
  background:rgba(255,255,255,.22);
}

.btn-outline{
  background:transparent;
  color:var(--fg);
  border:1px solid var(--border);
}

.btn-outline:hover{
  background:var(--primary);
  color:var(--primary-fg);
  border-color:var(--primary);
}

.menu-toggle{
  display:none;
  background:none;
  border:none;
  color:#fff;
  font-size:24px;
  cursor:pointer;
}

/* Hero */
.hero{position:relative;height:92vh;min-height:640px;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:var(--gradient-hero)}
.hero-content{position:relative;z-index:2;max-width:1200px;margin:0 auto;height:100%;padding:0 24px;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:80px}
.badge{display:inline-block;background:rgba(214,164,67,.95);color:var(--primary-fg);padding:6px 16px;border-radius:999px;font-size:11px;text-transform:uppercase;letter-spacing:.2em;font-weight:600;width:fit-content;margin-bottom:24px}
.hero h1{font-family:var(--serif);font-size:clamp(48px,8vw,104px);color:#fff;line-height:.95;max-width:900px}
.hero h1 .italic{font-style:italic;color:var(--primary)}
.hero p{margin-top:24px;color:rgba(255,255,255,.9);font-size:18px;max-width:560px}
.hero-cta{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;padding:64px 0}
.stat{background:var(--secondary);padding:28px;border-radius:18px}
.stat-num{font-family:var(--serif);font-size:42px;color:var(--accent)}
.stat-lbl{font-size:12px;color:var(--muted);margin-top:8px}

/* Section */
.section{padding:96px 0}
.section-alt{background:rgba(241,230,204,.4)}
.section-title{font-family:var(--serif);font-size:clamp(32px,5vw,52px);margin-top:12px;line-height:1.1}

/* Rooms */
.rooms-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-bottom:48px}
.rooms-head .price-from{color:var(--muted)}
.rooms-head .price-from strong{font-family:var(--serif);font-weight:500;font-size:24px;color:var(--fg)}
.rooms-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.room{background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;transition:box-shadow .3s,transform .3s}
.room:hover{box-shadow:var(--shadow-warm);transform:translateY(-4px)}
.room-img{aspect-ratio:4/3;overflow:hidden}
.room-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.room:hover .room-img img{transform:scale(1.05)}
.room-body{padding:20px}
.room{
  display:flex;
  flex-direction:column;
}

.room-body{
  padding:20px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:auto;
  padding-top:16px;
  align-items:center;
}

.tag{
  background:var(--secondary);
  font-size:12px;
  padding:5px 12px;
  border-radius:999px;
}

.room .btn{
  margin-top:20px;
  width:100%;
  font-size:14px;
  padding:10px;
}
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:auto;
  padding-top:16px;
  align-items:center;
  list-style:none;
  padding-left:0;
}

.tags li{
  list-style:none;
}
.room h3{font-family:var(--serif);font-size:22px}
.room-bed{font-size:14px;color:var(--muted);margin-top:4px}
.tag{background:var(--secondary);font-size:12px;padding:5px 12px;border-radius:999px}

/* Amenities */
.amenities{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:48px}
.amenity{background:var(--card);border:1px solid var(--border);padding:16px 20px;border-radius:14px;transition:border-color .2s}
.amenity:hover{border-color:var(--primary)}
.amenity::before{content:'✦';color:var(--accent);margin-right:8px}

/* Map split */
.map-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.map-frame{border-radius:18px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-warm);aspect-ratio:4/3}
.map-frame iframe{width:100%;height:100%;border:0}

/* Reviews */
.reviews-head{text-align:center;margin-bottom:56px}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.review{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:24px;transition:box-shadow .3s}
.review:hover{box-shadow:var(--shadow-warm)}
.stars{color:var(--primary);font-size:18px;margin-bottom:12px}
.review p{font-size:14px;line-height:1.6}
.review-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.review-foot .name{font-weight:500}
.review-foot .tag{font-size:12px;color:var(--muted);margin-top:2px;background:none;padding:0;display:block}

/* Gallery */
.gallery-grid{margin-top:48px;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:16px}
.gallery-grid .item{overflow:hidden;border-radius:18px}
.gallery-grid .item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gallery-grid .item:hover img{transform:scale(1.05)}
.gallery-grid .big{grid-column:span 2;grid-row:span 2}
.gallery-grid .wide{grid-column:span 2}

/* About */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about-rating{display:flex;align-items:center;gap:16px;margin-top:24px}
.about-rating .num{font-family:var(--serif);font-size:52px;color:var(--accent)}
.about-rating .lbl{font-size:14px;color:var(--muted)}
.about-imgs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.about-imgs img{border-radius:18px;object-fit:cover;width:100%}
.about-imgs .tall{aspect-ratio:3/4;box-shadow:var(--shadow-warm)}
.about-imgs .col{display:flex;flex-direction:column;gap:16px;margin-top:40px}
.about-imgs .col img{aspect-ratio:1}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:48px}
.form{background:var(--card);border:1px solid var(--border);border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:18px}
.form label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.form input,.form textarea{width:100%;margin-top:8px;padding:12px 16px;border:1px solid var(--border);border-radius:12px;background:var(--bg);font-family:inherit;font-size:15px;color:var(--fg)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--primary)}
.form textarea{resize:none;min-height:120px}
.form .err{color:var(--accent);font-size:12px;margin-top:6px}
.contact-info{background:var(--gradient-warm);color:#fff;border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:20px}
.contact-info .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.2em;opacity:.75}
.contact-info .val{font-family:var(--serif);font-size:22px}
.contact-info a:hover{text-decoration:underline}
.contact-side{display:flex;flex-direction:column;gap:24px}

/* Footer */
.footer{border-top:1px solid var(--border);padding:32px 0;text-align:center;color:var(--muted);font-size:14px;margin-top:60px}
.footer .logo{color:var(--fg);font-size:20px;margin-bottom:8px}

.page-head{padding:140px 0 24px}
.page-head h1{font-family:var(--serif);font-size:clamp(40px,6vw,72px);margin-top:12px}
.page-head p{margin-top:16px;color:var(--muted);max-width:640px}

/* Responsive */
@media (max-width: 900px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);flex-direction:column;padding:20px;gap:16px;border-bottom:1px solid var(--border)}
  .nav.open{display:flex}
  .nav a{color:var(--fg) !important}
  .menu-toggle{display:block}
  .stats{grid-template-columns:repeat(2,1fr)}
  .rooms-grid,.reviews-grid,.amenities{grid-template-columns:repeat(2,1fr)}
  .map-split,.about-grid,.contact-grid{grid-template-columns:1fr;gap:32px}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid .big,.gallery-grid .wide{grid-column:span 2;grid-row:auto}
  .section{padding:64px 0}
}
@media (max-width: 540px){
  .rooms-grid,.reviews-grid,.amenities{grid-template-columns:1fr}
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 28px;
}

.preview-card {
  display: block;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 12px 35px rgba(0,0,0,.08);
  transition: .25s ease;
}

.preview-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,.12);
}

.preview-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

.preview-body {
  padding: 22px;
}

.preview-body h3 {
  margin: 0 0 8px;
  font-size: 24px;
}

.preview-body p {
  margin: 0 0 14px;
  color: var(--muted);
}

.preview-body span {
  font-weight: 600;
  color: var(--accent);
}

@media (max-width: 768px) {
  .preview-grid {
    grid-template-columns: 1fr;
  }

  .preview-card img {
    height: 220px;
  }
}

.wide{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:28px;
  margin-top:24px;
  grid-column:1 / -1;
}

.review{
  display:flex;
  flex-direction:column;
  height:100%;
}

.review p{
  flex:1;
}

.review-foot{
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid rgba(0,0,0,.12);
}

.contact-page {
  padding-top: 110px;
}

.contact-page h1 {
  margin-top: 18px;
}

.contact-page > p {
  max-width: 620px;
  color: var(--muted);
  margin-top: 14px;
}

.contact-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 28px;
  margin-top: 34px;
  align-items: stretch;
}

.contact-card {
  background: linear-gradient(135deg, #fff8ec, #f3d6a7);
  border: 1px solid rgba(170, 108, 41, .22);
  border-radius: 28px;
  padding: 34px;
  box-shadow: 0 18px 45px rgba(70, 45, 25, .08);
}

.contact-card h2 {
  margin: 0 0 24px;
  font-size: 28px;
  color: var(--fg);
}

.contact-item {
  padding: 18px 0;
  border-bottom: 1px solid rgba(90, 60, 30, .14);
}

.contact-item span {
  display: block;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px;
}

.contact-item a,
.contact-item p {
  margin: 0;
  font-size: 16px;
  color: var(--fg);
  font-weight: 600;
  text-decoration: none;
}

.contact-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.contact-btn {
  padding: 13px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  background: #fff;
  color: var(--fg);
  box-shadow: 0 8px 20px rgba(0,0,0,.07);
}

.contact-btn.booking {
  background: var(--primary);
  color: #fff;
}

.contact-btn.instagram {
  background: #fff;
}

.contact-btn.facebook {
  background: #fff;
}

.contact-map {
  min-height: 420px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(170, 108, 41, .18);
  box-shadow: 0 18px 45px rgba(70, 45, 25, .08);
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 850px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .contact-map {
    min-height: 320px;
  }
}
.social-icon img{
  width:22px;
  height:22px;
  object-fit:contain;
}
.social-card{
  display:flex;
  align-items:center;
  gap:16px;
}
.floating-booking{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:999;
  background:var(--primary);
  color:var(--primary-fg);
  padding:14px 22px;
  border-radius:999px;
  font-weight:700;
  box-shadow:0 15px 35px rgba(0,0,0,.2);
}
.room,
.review,
.preview-card{
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    opacity .5s ease;
}
.room-img img,
.gallery-grid img,
.preview-card img{
  transition:transform .8s ease;
}

.room:hover img,
.preview-card:hover img{
  transform:scale(1.08);
}

.social-links{
  margin-top:24px;
  padding-top:5px;
}

.menu-list{
  margin-top:40px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:28px;
  overflow:hidden;
}

.menu-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 28px;
  border-bottom:1px solid var(--border);
  font-size:22px;
  cursor:pointer;
  transition:.25s ease;
}

.menu-item:hover{
  background:var(--secondary);
  padding-left:38px;
}

.menu-item strong{
  color:var(--accent);
}

.food-preview{
  position:absolute;
  width:250;
  height:240px;

  object-fit:contain;
  background:#f5f1e8;

  border-radius:22px;
  box-shadow:0 18px 45px rgba(0,0,0,.25);

  opacity:0;
  pointer-events:none;

  transform:scale(.95);
  transition:.2s ease;
  z-index:999;
}

.food-preview.show{
  opacity:1;
  transform:scale(1);
}
.zoo-grid{
  margin-top:40px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

.zoo-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  transition:.25s ease;
}

.zoo-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-warm);
}

.zoo-card img{
  width:100%;
  height:240px;
  object-fit:cover;
}

.zoo-card h3{
  padding:18px;
  font-size:22px;
}

@media(max-width:900px){
  .zoo-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:540px){
  .zoo-grid{
    grid-template-columns:1fr;
  }
}

.menu-category {
  margin-top: 42px;
}

.menu-category h2 {
  font-family: var(--serif);
  font-size: 34px;
  color: var(--text);
  margin-bottom: 16px;
}

.menu-category .menu-list {
  margin-top: 0;
}

.location-section {
  overflow: hidden;
}

.location-section .container {
  width: min(1100px, calc(100% - 32px));
  margin-inline: auto;
}
.page-head .container{
  width: min(1100px, calc(100% - 32px));
  margin-inline: auto;
}
.menu-page .container {
  width: min(1100px, calc(100% - 32px));
  margin-inline: auto;
}
.page-head .container {
  width: min(1100px, calc(100% - 32px));
  margin-inline: auto;
}

.dev-card{
  position: relative;
  cursor: pointer;
  display: inline-block;
}

.dev-popup{
  position: absolute;

  bottom: 30px;
  left: 50%;

  transform: translateX(-50%);

  width: 220px;

  background: #fff;
  color: #111;

  border-radius: 18px;

  padding: 16px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  box-shadow: 0 10px 40px rgba(0,0,0,.18);

  opacity: 0;
  visibility: hidden;

  transition: .25s ease;

  z-index: 999;
}

.dev-card:hover .dev-popup{
  opacity: 1;
  visibility: visible;
}

.dev-popup img{
  width: 72px;
  height: 72px;

  border-radius: 50%;
  object-fit: cover;
}

.dev-popup strong{
  font-size: 16px;
}

.dev-popup small{
  color: #666;
}

.dev-popup a{
  color: #1f2a44;
  text-decoration: none;
  font-size: 14px;
}

.dev-popup a:hover{
  text-decoration: underline;
}