:root {
  --bg: #fffaf5;
  --surface: rgba(255,255,255,0.7);
  --text: #24313a;
  --muted: #667b86;
  --line: rgba(36,49,58,0.12);
  --primary: #c79c61;
  --primary-dark: #a17741;
  --secondary: #295f7a;
  --white: #ffffff;
  --shadow: 0 20px 60px rgba(31, 42, 52, 0.12);
  --radius: 24px;
  --radius-sm: 16px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(212,175,55,.15), transparent 30%),
    radial-gradient(circle at right, rgba(41,95,122,.14), transparent 35%),
    linear-gradient(180deg, #fffaf5 0%, #f7f0e8 45%, #fffdfa 100%);
  font-family: 'Inter', sans-serif;
  line-height: 1.65;
}
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1rem; color: var(--muted); }
h1,h2,h3,h4 { font-family: 'Cormorant Garamond', serif; line-height: 1.05; margin: 0 0 1rem; color: #1d2d35; }
h1 { font-size: clamp(3rem, 6vw, 5.8rem); }
h2 { font-size: clamp(2.1rem, 4vw, 3.6rem); }
h3 { font-size: 2rem; }
.container { width: min(calc(100% - 2rem), var(--container)); margin: 0 auto; }
.section { padding: 5.5rem 0; }
.section-muted { background: rgba(255,255,255,0.45); backdrop-filter: blur(14px); }
.top-gap { margin-top: 2rem; }
.center { text-align: center; }
.eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: .18em; font-size: .77rem; font-weight: 700; color: var(--secondary);
  margin-bottom: 1rem;
}
.glass {
  background: rgba(255,255,255,0.58);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: var(--shadow);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  background: linear-gradient(135deg, var(--primary), #e3c08a);
  color: #fff; padding: 1rem 1.4rem; border-radius: 999px; font-weight: 700;
  border: 0; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 12px 30px rgba(199,156,97,.35);
}
.btn:hover { transform: translateY(-2px); }
.btn-outline {
  background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,.55); box-shadow: none;
}
.btn-sm { padding: .8rem 1.1rem; font-size: .95rem; }
.site-header {
  position: sticky; top: 0; z-index: 50; backdrop-filter: blur(16px);
  background: rgba(255,250,245,.7); border-bottom: 1px solid rgba(36,49,58,.06);
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; gap: 1rem; }
.logo { display: flex; align-items: center; gap: .9rem; }
.logo-mark {
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px;
  color: #fff; font-weight: 700; background: linear-gradient(135deg, var(--secondary), #4da0bb);
  box-shadow: 0 10px 25px rgba(41,95,122,.26);
}
.logo-text strong { display:block; font-size: 1.15rem; }
.logo-text small { color: var(--muted); }
.site-nav { display: flex; align-items: center; gap: 1.2rem; }
.site-nav a { font-weight: 600; color: #30414b; }
.nav-toggle { display:none; background:none; border:0; padding:0; }
.nav-toggle span { display:block; width:25px; height:2px; background:#24313a; margin:5px 0; }
.hero {
  position: relative; min-height: 92vh; display: grid; align-items: center; overflow: hidden;
}
.hero-home {
  background:
    linear-gradient(120deg, rgba(15,27,34,.78), rgba(39,72,89,.55)),
    radial-gradient(circle at 20% 20%, rgba(230,138,124,.33), transparent 30%),
    radial-gradient(circle at 80% 30%, rgba(255,220,174,.26), transparent 25%),
    linear-gradient(135deg, #295f7a 0%, #7db6c8 45%, #f3bca0 100%);
}
.hero-overlay {
  position:absolute; inset:0; background: linear-gradient(to top, rgba(15,27,34,.36), transparent 40%);
}
.hero-content { position: relative; z-index: 2; max-width: 760px; color: var(--white); padding: 8rem 0 12rem; }
.hero-content h1, .hero-content p { color: var(--white); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.booking-bar {
  position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%);
  width: min(calc(100% - 2rem), 1080px); z-index: 3;
  border-radius: 24px; padding: 1.1rem; display: grid; gap: 1rem; grid-template-columns: repeat(5, 1fr); align-items: center;
}
.booking-bar div { padding: .65rem 1rem; border-right: 1px solid rgba(36,49,58,.08); }
.booking-bar div:last-child { border-right: 0; }
.booking-bar strong { display:block; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.booking-bar span { color: var(--muted); }
.two-col { display:grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.section-split { align-items: start; }
.section-heading { margin-bottom: 2rem; text-align: center; }
.card-grid { display:grid; gap: 1.5rem; }
.three-col { grid-template-columns: repeat(3, 1fr); }
.two-col-grid { grid-template-columns: 1fr 1fr; }
.card, .package-card, .suite-block, .form-card, .contact-card, .cta-box, .stat, .testimonial {
  background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.65); border-radius: var(--radius); box-shadow: var(--shadow);
}
.card-media, .suite-media { min-height: 240px; border-radius: var(--radius) var(--radius) 0 0; }
.card-body, .package-card, .contact-card, .form-card, .cta-box, .testimonial, .stat { padding: 1.6rem; }
.card-meta { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; }
.card-meta a { color: var(--secondary); font-weight: 700; }
.package-card ul, .check-list { padding-left: 1rem; color: var(--muted); }
.package-card li, .check-list li { margin-bottom: .5rem; }
.feature-band { border-radius: 28px; padding: 2rem; display:grid; grid-template-columns: .9fr 1.1fr; gap: 2rem; }
.feature-list { display:flex; flex-wrap:wrap; gap: .85rem; align-items:flex-start; }
.feature-list span, .contact-notes span {
  display:inline-flex; padding: .75rem 1rem; border-radius: 999px; background: rgba(255,255,255,.72); border: 1px solid rgba(36,49,58,.08); color: #30414b;
}
.testimonials-grid { display:grid; grid-template-columns: .8fr 1.2fr; gap: 2rem; align-items: start; }
.testimonials { display:grid; gap: 1rem; }
.testimonial cite { display:block; margin-top: 1rem; font-style: normal; font-weight: 700; color: var(--secondary); }
.cta-section { padding-top: 1rem; }
.cta-box { text-align:center; padding: 3rem; }
.page-hero {
  padding: 6rem 0 2rem;
  background: linear-gradient(180deg, rgba(255,255,255,.52), transparent 100%);
}
.small-hero h1 { font-size: clamp(2.6rem, 5vw, 4.6rem); max-width: 780px; }
.suite-block { display:grid; grid-template-columns: 300px 1fr; overflow:hidden; }
.suite-block > div:last-child { padding: 1.8rem; }
.price { font-weight: 700; color: var(--secondary); }
.masonry-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; grid-auto-rows: 180px; }
.gallery-tile {
  border-radius: 26px; box-shadow: var(--shadow); position:relative; overflow:hidden; display:flex; align-items:flex-end; padding: 1.2rem; color:#fff; font-family:'Cormorant Garamond', serif; font-size:2rem;
}
.gallery-tile::after { content:''; position:absolute; inset:0; background: linear-gradient(to top, rgba(10,20,28,.45), transparent 55%); }
.gallery-tile span { position:relative; z-index:1; }
.gallery-tile.tall { grid-row: span 2; }
.gallery-tile.wide { grid-column: span 2; }
.stat-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stat { text-align:center; padding: 2rem 1rem; }
.stat strong { display:block; font-size: 2rem; color: var(--secondary); }
.contact-grid { display:grid; grid-template-columns: .8fr 1.2fr; gap: 1.5rem; align-items: start; }
.reservation-form, .reservation-form .form-row { display:grid; gap: 1rem; }
.reservation-form .form-row { grid-template-columns: 1fr 1fr; }
label { display:block; font-weight: 700; margin-bottom: .45rem; }
input, select, textarea {
  width:100%; border:1px solid var(--line); background:#fff; border-radius: 16px; padding: .95rem 1rem; font: inherit; color: var(--text);
}
textarea { resize: vertical; }
.alert { padding: 1rem 1.1rem; border-radius: 18px; margin-bottom: 1rem; font-weight: 600; }
.alert.success { background: rgba(92, 171, 106, .14); color: #295e33; border: 1px solid rgba(92,171,106,.22); }
.alert.error { background: rgba(205, 88, 88, .12); color: #8d2d2d; border: 1px solid rgba(205,88,88,.18); }
.site-footer { padding: 4rem 0 2rem; background: rgba(16,27,35,.96); color: rgba(255,255,255,.9); margin-top: 3rem; }
.footer-grid { display:grid; grid-template-columns: 1.1fr .8fr .8fr; gap: 2rem; }
.site-footer h3, .site-footer h4 { color: #fff; }
.site-footer p, .site-footer li, .site-footer a { color: rgba(255,255,255,.72); }
.site-footer ul { list-style:none; padding:0; margin:0; display:grid; gap:.65rem; }
.footer-bottom { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.gradient-one { background: linear-gradient(135deg, #254f62, #7eb2c0, #f1b59d); }
.gradient-two { background: linear-gradient(135deg, #8e6847, #f3d3a5, #a3d7e4); }
.gradient-three { background: linear-gradient(135deg, #1d3843, #4784a1, #f0a19b); }
.gradient-four { background: linear-gradient(135deg, #556d49, #c4d8a6, #f4d4bd); }
.gradient-five { background: linear-gradient(135deg, #884e54, #e8a39c, #f8e0d2); }
.gradient-six { background: linear-gradient(135deg, #284b57, #62a4bc, #c8e4ea); }
.reveal, .reveal-delay, .reveal-delay-2 {
  opacity: 0; transform: translateY(24px); transition: all .8s ease;
}
.reveal-delay { transition-delay: .12s; }
.reveal-delay-2 { transition-delay: .22s; }
.reveal.visible, .reveal-delay.visible, .reveal-delay-2.visible { opacity:1; transform:none; }

@media (max-width: 1024px) {
  .three-col, .stat-grid, .footer-grid, .contact-grid, .testimonials-grid, .feature-band, .two-col, .two-col-grid { grid-template-columns: 1fr; }
  .booking-bar { position: static; transform:none; margin: -5rem auto 0; grid-template-columns: 1fr 1fr; }
  .hero-content { padding-bottom: 4rem; }
  .suite-block { grid-template-columns: 1fr; }
  .masonry-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .site-nav {
    position: absolute; top: 78px; left: 1rem; right: 1rem; padding: 1rem;
    background: rgba(255,250,245,.98); border: 1px solid rgba(36,49,58,.08);
    border-radius: 20px; box-shadow: var(--shadow); display:none; flex-direction:column; align-items:flex-start;
  }
  .site-nav.open { display:flex; }
  .nav-toggle { display:block; }
  .booking-bar, .reservation-form .form-row, .masonry-grid { grid-template-columns: 1fr; }
  .booking-bar div { border-right:0; border-bottom:1px solid rgba(36,49,58,.08); }
  .booking-bar div:last-child { border-bottom:0; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
}
