/* ─── RESET & BASE ─────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --navy:  #1a2744;
      --gold:  #c9a84c;
      --gold-light: #e8d08a;
      --bg:    #f8f5f0;
      --white: #ffffff;
      --gray:  #6b7280;
      --light: #e5e0d8;
    }
    html { scroll-behavior: smooth; }
    body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--navy); }
    h1, h2, h3, h4 { font-family: 'Cormorant Garamond', serif; }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }

    /* ─── NAV ──────────────────────────────────────────── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 2rem; height: 70px;
      background: rgba(26,39,68,0.95); backdrop-filter: blur(8px);
      transition: box-shadow .3s;
    }
    nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.3); }
    .nav-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--gold); letter-spacing: .05em; }
    .nav-links { display: flex; gap: 1.5rem; align-items: center; }
    .nav-links a { color: rgba(255,255,255,.85); font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; transition: color .2s; }
    .nav-links a:hover { color: var(--gold); }
    .lang-switcher { display: flex; gap: .4rem; align-items: center; margin-left: 1.2rem; }
    .lang-btn {
      background: none; border: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.7);
      padding: .2rem .5rem; font-size: .75rem; cursor: pointer; border-radius: 3px; transition: all .2s;
    }
    .lang-btn.active, .lang-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
    .nav-book-btn {
      background: var(--gold); color: var(--navy); padding: .45rem 1.1rem;
      font-size: .8rem; font-weight: 600; border-radius: 4px; letter-spacing: .05em;
      text-transform: uppercase; transition: background .2s;
    }
    .nav-book-btn:hover { background: var(--gold-light); }
    .nav-toggle { display: none; background: none; border: none; color: white; font-size: 1.4rem; cursor: pointer; }

    /* ─── HERO ─────────────────────────────────────────── */
    #hero {
      position: relative; height: 100vh; min-height: 600px;
      display: flex; align-items: center; justify-content: center; text-align: center;
      overflow: hidden;
    }
    #hero-bg {
      position: absolute; inset: 0;
      background: url('https://storage.vigbo.tech/p/w1440/gallery-photo/c016216d-f78b-4da5-b481-4a03a89295f8/fcad252f-3cac-427f-8219-de9dc7533ced/original/zG3YUAqS6Z_5WBwPsXFER.jpg') center/cover no-repeat;
    }
    #hero-bg::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(to bottom, rgba(26,39,68,.55) 0%, rgba(26,39,68,.35) 60%, rgba(26,39,68,.7) 100%);
    }
    .hero-content { position: relative; z-index: 1; color: white; padding: 1rem; }
    .hero-eyebrow { font-size: .8rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
    .hero-title { font-size: clamp(3rem, 8vw, 6rem); font-weight: 300; line-height: 1.05; margin-bottom: 1rem; }
    .hero-tagline { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(1.1rem, 2.5vw, 1.5rem); color: rgba(255,255,255,.85); margin-bottom: 2rem; }
    .hero-cta {
      display: inline-block; background: var(--gold); color: var(--navy);
      padding: .85rem 2.5rem; font-size: .9rem; font-weight: 600; letter-spacing: .1em;
      text-transform: uppercase; border-radius: 4px; transition: background .2s, transform .2s;
    }
    .hero-cta:hover { background: var(--gold-light); transform: translateY(-2px); }

    /* ─── HIGHLIGHTS STRIP ─────────────────────────────── */
    .highlights {
      display: flex; justify-content: center; flex-wrap: wrap; gap: 0;
      background: var(--navy); color: white;
    }
    .highlight-item {
      display: flex; align-items: center; gap: .7rem;
      padding: 1.2rem 2rem; border-right: 1px solid rgba(255,255,255,.12);
    }
    .highlight-item:last-child { border-right: none; }
    .highlight-item i { color: var(--gold); font-size: 1.3rem; }
    .highlight-text strong { display: block; font-size: .9rem; }
    .highlight-text span { font-size: .75rem; color: rgba(255,255,255,.6); }

    /* ─── SECTIONS ─────────────────────────────────────── */
    section { padding: 5rem 1.5rem; }
    .section-inner { max-width: 1100px; margin: 0 auto; }
    .section-eyebrow { font-size: .75rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); margin-bottom: .5rem; }
    .section-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 300; line-height: 1.1; margin-bottom: 1.5rem; }
    .section-divider { width: 50px; height: 2px; background: var(--gold); margin-bottom: 2rem; }

    /* ─── ABOUT ─────────────────────────────────────────── */
    #about { background: var(--white); }
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
    .about-text p { font-size: 1.05rem; line-height: 1.8; color: #374151; margin-bottom: 1rem; }
    .about-image img { width: 100%; height: 480px; object-fit: cover; border-radius: 4px; }

    /* ─── GALLERY ────────────────────────────────────────── */
    #gallery { background: var(--bg); }
    .gallery-intro { max-width: 600px; margin-bottom: 2.5rem; }
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto auto;
      gap: 8px;
    }
    .gallery-item {
      overflow: hidden; cursor: pointer; position: relative;
      background: var(--light);
    }
    .gallery-item:first-child { grid-column: 1 / 3; grid-row: 1 / 3; }
    .gallery-item img {
      width: 100%; height: 100%; object-fit: cover; min-height: 220px;
      transition: transform .4s ease;
    }
    .gallery-item:first-child img { min-height: 440px; }
    .gallery-item:hover img { transform: scale(1.04); }
    .gallery-overlay {
      position: absolute; inset: 0; background: rgba(26,39,68,.45);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; transition: opacity .3s;
    }
    .gallery-overlay i { color: white; font-size: 1.8rem; }
    .gallery-item:hover .gallery-overlay { opacity: 1; }
    .gallery-link {
      display: inline-flex; align-items: center; gap: .5rem;
      margin-top: 1.5rem; color: var(--gold); font-size: .9rem; font-weight: 500;
      border-bottom: 1px solid var(--gold); padding-bottom: .2rem; transition: gap .2s;
    }
    .gallery-link:hover { gap: .8rem; }

    /* ─── AMENITIES ──────────────────────────────────────── */
    #amenities { background: var(--white); }
    .amenities-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem;
      margin-top: 2rem;
    }
    .amenity-item {
      display: flex; flex-direction: column; align-items: center; text-align: center;
      padding: 1.5rem 1rem; background: var(--bg); border-radius: 6px;
      border: 1px solid var(--light); transition: border-color .2s, box-shadow .2s;
    }
    .amenity-item:hover { border-color: var(--gold); box-shadow: 0 2px 12px rgba(201,168,76,.15); }
    .amenity-item i { font-size: 1.6rem; color: var(--gold); margin-bottom: .7rem; }
    .amenity-item span { font-size: .85rem; color: #374151; }

    /* ─── PRICING CALENDAR ───────────────────────────────── */
    #pricing { background: var(--bg); }
    .pricing-info { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
    .pricing-badge { display: flex; align-items: center; gap: .4rem; font-size: .8rem; }
    .pricing-dot { width: 12px; height: 12px; border-radius: 50%; }
    .dot-available { background: #22c55e; }
    .dot-booked { background: #ef4444; }
    .dot-inquire { background: #f59e0b; }
    .dot-default { background: var(--light); border: 1px solid #ccc; }
    .calendar-wrapper { display: flex; gap: 2rem; flex-wrap: wrap; }
    .calendar-month { flex: 1; min-width: 280px; max-width: 340px; }
    .calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
    .cal-month-name { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 600; }
    .cal-nav { background: none; border: 1px solid var(--light); padding: .2rem .6rem; cursor: pointer; border-radius: 3px; transition: all .2s; }
    .cal-nav:hover { border-color: var(--gold); color: var(--gold); }
    .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
    .cal-day-name { text-align: center; font-size: .7rem; color: var(--gray); padding: .3rem 0; text-transform: uppercase; }
    .cal-day {
      aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
      font-size: .8rem; border-radius: 4px; cursor: default; position: relative;
      background: var(--white); border: 1px solid var(--light);
    }
    .cal-day.empty { background: transparent; border: none; }
    .cal-day.past { opacity: .4; }
    .cal-day.available { background: #f0fdf4; border-color: #86efac; cursor: pointer; }
    .cal-day.available:hover { background: #dcfce7; }
    .cal-day.booked { background: #fef2f2; border-color: #fca5a5; color: #dc2626; cursor: not-allowed; }
    .cal-day.inquire { background: #fffbeb; border-color: #fcd34d; cursor: pointer; }
    .cal-day .day-num { font-weight: 500; font-size: .85rem; }
    .cal-day .day-price { font-size: .6rem; color: #16a34a; margin-top: 1px; }
    .cal-day.booked .day-price { color: #dc2626; }
    .pricing-note { margin-top: 1.5rem; font-size: .85rem; color: var(--gray); }
    .pricing-setup { background: var(--navy); color: white; border-radius: 8px; padding: 1.5rem 2rem; margin-top: 1.5rem; }
    .pricing-setup h4 { color: var(--gold); margin-bottom: .5rem; font-size: 1.1rem; }
    .pricing-setup p { font-size: .85rem; color: rgba(255,255,255,.75); line-height: 1.7; }
    .pricing-setup code { background: rgba(255,255,255,.1); padding: .1rem .4rem; border-radius: 3px; font-size: .8rem; }

    /* ─── BOOKING FORM ───────────────────────────────────── */
    #booking { background: var(--navy); color: white; }
    #booking .section-title { color: white; }
    #booking .section-divider { background: var(--gold); }
    .booking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .form-group { display: flex; flex-direction: column; gap: .4rem; }
    .form-group.full { grid-column: 1 / -1; }
    .form-group label { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.7); }
    .form-group input, .form-group select, .form-group textarea {
      background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: white;
      padding: .75rem 1rem; border-radius: 4px; font-size: .95rem; font-family: inherit;
      transition: border-color .2s;
    }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
      outline: none; border-color: var(--gold);
    }
    .form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255,255,255,.35); }
    .form-group select option { background: var(--navy); }
    .form-group textarea { resize: vertical; min-height: 120px; }
    .form-submit {
      grid-column: 1 / -1; margin-top: .5rem;
      background: var(--gold); color: var(--navy); border: none;
      padding: 1rem 2.5rem; font-size: .9rem; font-weight: 600; letter-spacing: .1em;
      text-transform: uppercase; border-radius: 4px; cursor: pointer; transition: background .2s;
    }
    .form-submit:hover { background: var(--gold-light); }
    .form-note { grid-column: 1/-1; font-size: .8rem; color: rgba(255,255,255,.5); }
    .booking-direct { background: rgba(255,255,255,.06); border-radius: 8px; padding: 1.5rem; margin-top: 2rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
    .booking-direct p { flex: 1; font-size: .9rem; color: rgba(255,255,255,.8); min-width: 200px; }
    .booking-direct a { background: #003580; color: white; padding: .6rem 1.4rem; border-radius: 4px; font-size: .85rem; font-weight: 500; white-space: nowrap; transition: background .2s; }
    .booking-direct a:hover { background: #00224f; }

    /* ─── LOCATION ───────────────────────────────────────── */
    #location { background: var(--white); }
    .location-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 3rem; align-items: start; }
    .location-details { display: flex; flex-direction: column; gap: 1.5rem; }
    .location-detail-item { display: flex; gap: 1rem; align-items: flex-start; }
    .location-detail-item i { color: var(--gold); font-size: 1.1rem; margin-top: .15rem; flex-shrink: 0; }
    .location-detail-item strong { display: block; font-size: .85rem; color: var(--gray); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .25rem; }
    .location-detail-item p { font-size: .95rem; }
    .map-wrapper { border-radius: 8px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.1); }
    .map-wrapper iframe { display: block; width: 100%; height: 380px; border: none; }

    /* ─── CONTACT ────────────────────────────────────────── */
    #contact { background: var(--bg); }
    .contact-cards { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 2rem; }
    .contact-card {
      flex: 1; min-width: 200px; background: var(--white); border-radius: 8px;
      padding: 2rem; text-align: center; border: 1px solid var(--light);
      transition: box-shadow .2s, border-color .2s;
    }
    .contact-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); border-color: var(--gold); }
    .contact-card i { font-size: 2rem; color: var(--gold); margin-bottom: 1rem; }
    .contact-card h3 { font-family: 'Inter', sans-serif; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gray); margin-bottom: .5rem; }
    .contact-card a, .contact-card p { font-size: 1rem; font-weight: 500; color: var(--navy); }
    .contact-card a:hover { color: var(--gold); }
    .whatsapp-btn {
      display: inline-flex; align-items: center; gap: .5rem;
      background: #25d366; color: white; padding: .7rem 1.5rem;
      border-radius: 4px; font-size: .9rem; font-weight: 500; margin-top: 1rem;
      transition: background .2s;
    }
    .whatsapp-btn:hover { background: #1db954; }

    /* ─── FOOTER ─────────────────────────────────────────── */
    footer { background: var(--navy); color: rgba(255,255,255,.6); text-align: center; padding: 2rem 1.5rem; }
    footer .footer-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; color: var(--gold); margin-bottom: .5rem; }
    footer p { font-size: .8rem; }

    /* ─── LIGHTBOX ───────────────────────────────────────── */
    #lightbox {
      display: none; position: fixed; inset: 0; z-index: 200;
      background: rgba(0,0,0,.92); align-items: center; justify-content: center;
    }
    #lightbox.open { display: flex; }
    #lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 4px; }
    #lightbox-close {
      position: absolute; top: 1.5rem; right: 1.5rem;
      background: none; border: none; color: white; font-size: 2rem; cursor: pointer;
    }
    #lightbox-prev, #lightbox-next {
      position: absolute; top: 50%; transform: translateY(-50%);
      background: rgba(255,255,255,.12); border: none; color: white; font-size: 1.5rem;
      padding: 1rem .8rem; cursor: pointer; border-radius: 4px; transition: background .2s;
    }
    #lightbox-prev { left: 1rem; }
    #lightbox-next { right: 1rem; }
    #lightbox-prev:hover, #lightbox-next:hover { background: rgba(255,255,255,.25); }

    /* ─── SUCCESS PAGE ───────────────────────────────────── */
    #form-success { display: none; text-align: center; padding: 2rem; }
    #form-success i { font-size: 3rem; color: #22c55e; margin-bottom: 1rem; }

    /* ─── RESPONSIVE ─────────────────────────────────────── */
    @media (max-width: 900px) {
      .nav-links { display: none; }
      .nav-links.open { display: flex; flex-direction: column; position: fixed; top: 70px; left: 0; right: 0; background: var(--navy); padding: 1.5rem 2rem; gap: 1rem; }
      .nav-toggle { display: block; }
      .about-grid, .location-grid { grid-template-columns: 1fr; }
      .about-image { order: -1; }
      .about-image img { height: 300px; }
      .booking-grid { grid-template-columns: 1fr; }
      .gallery-grid { grid-template-columns: 1fr 1fr; }
      .gallery-item:first-child { grid-column: 1 / -1; }
    }
    @media (max-width: 600px) {
      .gallery-grid { grid-template-columns: 1fr; }
      .gallery-item:first-child { grid-column: 1; grid-row: 1; }
      .highlight-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.12); width: 100%; }
      .calendar-wrapper { flex-direction: column; }
      .calendar-month { max-width: 100%; }
    }

#booking-error { color:#ffd0c7; grid-column:1/-1; }
.form-submit:disabled { opacity:.65; cursor:wait; }
.cal-day[role="button"]:focus-visible { outline:2px solid var(--gold); outline-offset:1px; }