:root{
    --forest-900:#22321f;
    --forest-700:#33482c;
    --forest-500:#4a6b45;
    --gold-600:#c68a35;
    --gold-500:#d9a441;
    --gold-300:#eecf9a;
    --terracotta:#b85236;
    --cream-100:#faf5ea;
    --cream-200:#f2e8d5;
    --ink-900:#241f19;
    --ink-600:#5a5148;
    --white:#ffffff;
    --shadow: 0 18px 40px rgba(36,31,25,0.18);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--cream-100);
    color:var(--ink-900);
    font-family:'Karla',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4,.serif{
    font-family:'Fraunces',serif;
    font-weight:600;
    color:var(--forest-900);
    margin:0;
  }
  p{line-height:1.7;color:var(--ink-600);}
  a{text-decoration:none;color:inherit;}
  img{display:block;max-width:100%;height:auto;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px;}

  /* ---- nav ---- */
  header.site-nav{
    position:fixed; top:0; left:0; width:100%; z-index:40;
    background:transparent;
    backdrop-filter:none;
    border-bottom:1px solid transparent;
    transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  }
  header.site-nav.nav-scrolled{
    background:rgba(34,50,31,0.94);
    backdrop-filter:blur(6px);
    border-bottom:1px solid rgba(250,245,234,0.10);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 28px; max-width:1180px; margin:0 auto;
  }
  .logo{display:flex; flex-direction:column; line-height:1;}
  .logo .word{font-family:'Fraunces',serif; font-weight:600; font-size:22px; letter-spacing:.04em; color:var(--forest-900);}
  .logo .sub{font-size:10px; letter-spacing:.28em; color:var(--gold-600); margin-top:4px; font-weight:600;}
  nav.links{display:flex; gap:30px; font-size:14px; font-weight:600; letter-spacing:.02em;}
  nav.links a{color:var(--cream-100); position:relative; padding:4px 0;}
  nav.links a:hover{color:var(--gold-300);}
  nav.links a.active{color:var(--gold-300); border-bottom:2px solid var(--gold-500);}
  .logo-badge{display:flex; align-items:center; flex-shrink:0;}
  .logo-badge img{height:52px; width:auto; display:block;}
  .foot-logo-badge{height:64px; width:auto; margin-bottom:14px;}
  .btn{
    display:inline-block; padding:12px 26px; border-radius:999px;
    font-weight:700; font-size:14px; letter-spacing:.02em; cursor:pointer;
    border:none; font-family:'Karla',sans-serif;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn-primary{background:var(--gold-500); color:var(--forest-900); box-shadow:0 8px 18px rgba(201,138,53,0.35);}
  .btn-primary:hover{transform:translateY(-2px);}
  .btn-outline{border:1.5px solid var(--forest-900); color:var(--forest-900); background:transparent;}
  .btn-outline:hover{background:var(--forest-900); color:var(--cream-100);}
  .btn-light{background:var(--cream-100); color:var(--forest-900);}
  .btn-whatsapp{background:#3d8a5f; color:#fff; box-shadow:0 8px 18px rgba(61,138,95,0.35);}

  /* mobile nav toggle (labels only, css-only fallback: hide links on narrow, show button) */
  .nav-burger{display:none;}
  @media(max-width:860px){
    nav.links{display:none;}
    .nav-inner{flex-wrap:wrap; gap:14px;}
  }

  /* ---- hero (home) ---- */
  .hero{
    position:relative; min-height:640px; display:flex; align-items:flex-end;
    background:linear-gradient(0deg, rgba(20,16,10,0.80) 0%, rgba(20,16,10,0.28) 55%, rgba(20,16,10,0.45) 100%), var(--herobg) center/cover no-repeat;
    color:var(--cream-100);
  }
  .hero-inner{max-width:1180px; margin:0 auto; padding:168px 28px 210px; width:100%;}
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:12px; letter-spacing:.3em; text-transform:uppercase;
    color:var(--gold-300); font-weight:700; margin-bottom:18px;
  }
  .eyebrow::before{content:''; width:28px; height:1px; background:var(--gold-300); display:inline-block;}
  .hero h1{
    color:var(--cream-100); font-size:56px; line-height:1.08; max-width:760px;
    font-weight:500; font-style:italic;
  }
  .hero p.lead{
    color:var(--cream-200); font-family:'Karla',sans-serif; font-size:18px;
    max-width:520px; margin-top:22px; line-height:1.7;
  }
  .hero-ctas{display:flex; gap:16px; margin-top:34px; flex-wrap:wrap;}
  @media(max-width:640px){
    .hero-inner{padding:104px 20px 286px;}
    .eyebrow{margin-bottom:10px;}
    .hero h1{font-size:29px; line-height:1.18;}
    .hero p.lead{font-size:14px; line-height:1.5; margin-top:12px;}
    .hero-ctas{gap:10px; margin-top:18px;}
    .hero-ctas .btn{padding:10px 18px; font-size:13px;}
  }

  /* ---- page hero (interior pages) ---- */
  .page-hero{
    position:relative; min-height:340px; display:flex; align-items:center;
    background:linear-gradient(0deg, rgba(20,16,10,0.62) 0%, rgba(20,16,10,0.50) 100%), var(--bgimg) center/cover no-repeat;
    color:var(--cream-100);
  }
  .page-hero-inner{max-width:1180px; margin:0 auto; padding:158px 28px 70px; width:100%;}
  .page-hero h1{color:var(--cream-100); font-size:44px; font-weight:500; font-style:italic; line-height:1.15; max-width:700px;}
  .page-hero p.lead{color:var(--cream-200); font-size:16.5px; max-width:560px; margin-top:16px;}
  .breadcrumb{font-size:13px; color:var(--gold-300); margin-bottom:16px; letter-spacing:.02em;}
  .breadcrumb a{color:var(--gold-300); font-weight:700;}
  .breadcrumb a:hover{text-decoration:underline;}

  /* ---- reservation widget ---- */
  .resv-wrap{position:absolute; left:0; right:0; bottom:28px; z-index:20; margin:0 auto;}
  .resv-wrap-static{position:relative; left:auto; right:auto; bottom:auto; margin:0 auto;}
  @media(max-width:640px){ .resv-wrap{bottom:14px;} }
  .resv-widget{
    background:rgba(255,255,255,0.2); border-radius:20px; box-shadow:0 24px 50px rgba(36,31,25,0.28);
    padding:26px 30px; display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:18px; align-items:end;
    border:1px solid rgba(34,50,31,0.06);
  }
  .resv-field{display:flex; flex-direction:column; gap:8px;}
  .resv-field label{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--gold-600);}
  .resv-field input, .resv-field select{
    border:1.5px solid rgba(34,50,31,0.16); border-radius:10px; padding:12px 14px;
    font-family:'Karla',sans-serif; font-size:14.5px; color:var(--ink-900); background:var(--cream-100);
  }
  .resv-field input:focus, .resv-field select:focus{outline:none; border-color:var(--gold-500);}
  .resv-submit{padding:14px 28px; white-space:nowrap; font-size:14.5px;}
  .resv-note{font-size:12px; color:var(--ink-600); margin-top:12px; text-align:center;}
  @media(max-width:900px){
    .resv-widget{grid-template-columns:1fr 1fr; padding:18px 16px; gap:10px;}
    .resv-field label{font-size:10px;}
    .resv-field input, .resv-field select{padding:9px 10px; font-size:13px;}
    .resv-submit{white-space:normal; text-align:center; padding:11px 10px; font-size:12.5px; line-height:1.25;}
    .resv-note{font-size:10.5px; margin-top:8px;}
  }

  /* ---- intro strip ---- */
  .intro{padding:88px 0 40px; text-align:center;}
  .intro .eyebrow{color:var(--gold-600);}
  .intro .eyebrow::before{background:var(--gold-600);}
  .intro h2{font-size:34px; max-width:760px; margin:0 auto 22px; font-weight:500; font-style:italic;}
  .intro p{max-width:640px; margin:0 auto; font-size:17px;}

  /* ---- generic section ---- */
  /* padding-top/bottom only (never the shorthand) so this doesn't wipe out
     the left/right padding that .section.wrap elements get from .wrap */
  .section{padding-top:90px; padding-bottom:90px;}
  .section-tight{padding-top:60px; padding-bottom:60px;}
  .section-alt{background:var(--cream-200);}
  .section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; flex-wrap:wrap; gap:20px;}
  .section-head h2{font-size:36px; font-weight:500; font-style:italic;}
  .section-head-center{text-align:center; max-width:700px; margin:0 auto 50px;}
  .section-head-center h2{font-size:36px; font-weight:500; font-style:italic;}

  /* ---- rooms ---- */
  .room-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
  @media(max-width:900px){.room-grid{grid-template-columns:1fr;}}
  .room-card{background:var(--white); border-radius:16px; overflow:hidden; box-shadow:var(--shadow);}
  .room-card .photo{height:230px; overflow:hidden;}
  .room-card .photo img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
  .room-card:hover .photo img{transform:scale(1.06);}
  .room-card .body{padding:22px 24px 26px;}
  .room-card h3{font-size:21px; margin-bottom:8px; font-weight:600;}
  .room-card p{font-size:14.5px; margin-bottom:16px;}
  .room-card .tag{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-600); font-weight:700; margin-bottom:8px; display:block;}
  .room-card .more{font-size:13.5px; font-weight:700; color:var(--forest-900); border-bottom:1.5px solid var(--gold-500); padding-bottom:2px;}
  .room-card .amenities{list-style:none; margin:0 0 16px; padding:0; display:flex; flex-wrap:wrap; gap:8px;}
  .room-card .amenities li{font-size:12px; background:var(--cream-200); color:var(--ink-600); padding:5px 10px; border-radius:999px;}

  /* ---- restaurant ---- */
  .restaurant{background:var(--forest-900); color:var(--cream-100); padding:96px 0;}
  .restaurant .eyebrow{color:var(--gold-300);}
  .restaurant .eyebrow::before{background:var(--gold-300);}
  .restaurant h2{color:var(--cream-100); font-size:36px; font-weight:500; font-style:italic; max-width:520px;}
  .restaurant p{color:rgba(250,245,234,0.78);}
  .rest-grid{display:grid; grid-template-columns:1.2fr 0.8fr; gap:28px; margin-top:44px; align-items:stretch;}
  @media(max-width:900px){.rest-grid{grid-template-columns:1fr;}}
  .rest-grid .big{border-radius:16px; overflow:hidden; box-shadow:var(--shadow); position:relative;}
  .rest-side{display:flex; flex-direction:column; gap:28px;}
  .rest-side .small{border-radius:16px; overflow:hidden; box-shadow:var(--shadow); position:relative; aspect-ratio:712/950;}
  .rest-copy{margin-top:26px; max-width:560px;}
  .rest-carousel{position:absolute; inset:0;}
  .rest-carousel .carousel-slide{position:absolute; inset:0; opacity:0; transition:opacity 1s ease;}
  .rest-carousel .carousel-slide.active{opacity:1;}
  .rest-carousel .carousel-slide img{width:100%; height:100%; object-fit:cover; display:block;}

  /* ---- photo gallery grid (restaurant / rooms interior pages) ---- */
  .gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  @media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){.gallery-grid{grid-template-columns:1fr;}}
  .gallery-grid .g-item{border-radius:14px; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:1/1;}
  .gallery-grid .g-item img{width:100%; height:100%; object-fit:cover; cursor:pointer; transition:transform .35s ease, filter .35s ease;}
  .gallery-grid .g-item img:hover{transform:scale(1.04); filter:brightness(1.03);}
  .gallery-grid .g-item.tall{grid-row:span 2; aspect-ratio:auto; height:100%;}

  /* ---- lightbox ---- */
  .lightbox-overlay{position:fixed; inset:0; background:rgba(18,14,10,0.94); z-index:9999; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s ease;}
  .lightbox-overlay.active{opacity:1; pointer-events:auto;}
  .lightbox-img-wrap{position:relative; max-width:90vw; max-height:84vh; display:flex; align-items:center; justify-content:center;}
  .lightbox-img-wrap img{max-width:90vw; max-height:84vh; width:auto; height:auto; object-fit:contain; border-radius:8px; box-shadow:0 24px 70px rgba(0,0,0,.55); user-select:none;}
  .lightbox-close, .lightbox-nav{position:absolute; border:none; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s ease;}
  .lightbox-close:hover, .lightbox-nav:hover{background:rgba(255,255,255,.24);}
  .lightbox-close{top:22px; right:24px; width:44px; height:44px; border-radius:50%; font-size:22px; line-height:1;}
  .lightbox-nav{top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; font-size:26px;}
  .lightbox-prev{left:16px;}
  .lightbox-next{right:16px;}
  .lightbox-counter{position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.75); font-size:13px; letter-spacing:.04em; font-family:'Karla',sans-serif;}
  @media(max-width:680px){
    .lightbox-nav{width:40px; height:40px; font-size:20px;}
    .lightbox-prev{left:8px;}
    .lightbox-next{right:8px;}
    .lightbox-close{width:38px; height:38px; font-size:18px; top:12px; right:12px;}
  }

  /* ---- activity cards ---- */
  .activity-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
  @media(max-width:900px){.activity-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:600px){.activity-grid{grid-template-columns:1fr;}}
  .activity-card{background:var(--white); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); border-top:3px solid var(--gold-500);}
  .activity-card .icon{font-size:26px; margin-bottom:12px; display:block;}
  .activity-card h3{font-size:18px; margin-bottom:8px; font-weight:600;}
  .activity-card p{font-size:13.5px; margin:0;}
  .activity-card-body{padding:22px 22px 18px;}

  /* ---- activities page: 2 cards per row, text overlaid on the photo ---- */
  #activities .activity-grid{grid-template-columns:repeat(2,1fr);}
  @media(max-width:640px){#activities .activity-grid{grid-template-columns:1fr;}}
  #activities .activity-card{position:relative; aspect-ratio:4/3; border-top:none;}
  #activities .activity-photo{position:absolute; inset:0; z-index:1; aspect-ratio:auto;}
  #activities .activity-photo img{width:100%; height:100%; object-fit:cover; display:block;}
  #activities .activity-card-body{
    position:absolute; top:0; left:0; right:0; z-index:2;
    padding:22px 22px 56px;
    background:linear-gradient(180deg, rgba(20,16,10,0.88) 0%, rgba(20,16,10,0.6) 48%, rgba(20,16,10,0) 100%);
  }
  #activities .activity-card .icon{margin-bottom:10px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.45));}
  #activities .activity-card h3{color:var(--cream-100); text-shadow:0 1px 3px rgba(0,0,0,.35);}
  #activities .activity-card p{color:rgba(250,245,234,0.92); text-shadow:0 1px 2px rgba(0,0,0,.3);}

  /* ---- activity photo carousel (e.g. Plaj Keyfi) ---- */
  .activity-carousel{position:absolute; inset:0; z-index:1; overflow:hidden;}
  .activity-carousel .carousel-slide{position:absolute; inset:0; opacity:0; transition:opacity .6s ease; cursor:pointer; pointer-events:none;}
  .activity-carousel .carousel-slide.active{opacity:1; pointer-events:auto;}
  .activity-carousel .carousel-slide img{width:100%; height:100%; object-fit:cover; display:block;}
  .carousel-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:34px; height:34px; border-radius:50%; background:rgba(20,16,10,0.45); border:none; color:#fff; font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s ease;}
  .carousel-nav:hover{background:rgba(20,16,10,0.72);}
  .carousel-prev{left:10px;}
  .carousel-next{right:10px;}
  .carousel-dots{position:absolute; left:0; right:0; bottom:14px; z-index:3; display:flex; justify-content:center; gap:7px;}
  .carousel-dot{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.5); border:none; padding:0; cursor:pointer; transition:background .2s ease, transform .2s ease;}
  .carousel-dot.active{background:#fff; transform:scale(1.25);}
  #activities .activity-card:has(.activity-carousel) .activity-card-body{padding-bottom:30px;}

  /* ---- info blocks (contact/location) ---- */
  .info-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start;}
  @media(max-width:860px){.info-grid{grid-template-columns:1fr;}}
  .info-card{background:var(--white); border-radius:18px; padding:34px; box-shadow:var(--shadow);}
  .info-row{display:flex; align-items:center; gap:16px; padding:16px 0; border-bottom:1px dashed rgba(34,50,31,0.15);}
  .info-row:last-child{border-bottom:none;}
  .info-row .ico{width:38px; height:38px; border-radius:50%; background:var(--cream-200); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:17px;}
  .info-row .label{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-600); font-weight:700; margin-bottom:4px;}
  .info-row .val{font-size:15px; color:var(--ink-900); font-weight:600; line-height:1.5;}
  .info-row .val a{color:var(--ink-900);}
  .info-row .val a:hover{color:var(--gold-600);}
  .map-frame{border-radius:18px; overflow:hidden; box-shadow:var(--shadow); border:none; width:100%; height:460px;}
  .social-row{display:flex; gap:12px; margin-top:22px;}
  .social-pill{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border-radius:50%; background:var(--cream-200); color:var(--forest-900); transition:background .15s ease, transform .15s ease;}
  .social-pill:hover{background:var(--gold-300); transform:translateY(-2px);}
  .social-svg{width:19px; height:19px; display:block;}

  .distance-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  @media(max-width:600px){.distance-list{grid-template-columns:1fr;}}
  .distance-list li{background:var(--white); border-radius:12px; padding:16px 18px; box-shadow:var(--shadow); font-size:14.5px; display:flex; justify-content:space-between; gap:10px; align-items:center;}
  .distance-list li b{color:var(--forest-900); font-family:'Fraunces',serif; font-style:italic; font-weight:600; font-size:15px;}

  /* ---- quote ---- */
  .quote{padding:100px 0; text-align:center;}
  .quote blockquote{
    font-family:'Fraunces',serif; font-style:italic; font-weight:500;
    font-size:30px; color:var(--forest-900); max-width:760px; margin:0 auto 20px; line-height:1.5;
  }
  .quote .who{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-600); font-weight:700;}

  /* ---- cta band ---- */
  .cta-band{background:var(--terracotta); color:var(--cream-100); padding:64px 0; text-align:center;}
  .cta-band h2{color:var(--cream-100); font-size:30px; font-style:italic; font-weight:500; margin-bottom:22px;}
  .cta-band .btn-primary{background:var(--cream-100); color:var(--terracotta);}

  /* ---- footer ---- */
  footer{background:var(--ink-900); color:rgba(250,245,234,0.72); padding:64px 0 28px;}
  .foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(250,245,234,0.12);}
  @media(max-width:760px){.foot-grid{grid-template-columns:1fr;}}
  footer .logo .word{color:var(--cream-100);}
  footer h4{color:var(--gold-300); font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-family:'Karla',sans-serif; font-weight:700; margin-bottom:16px;}
  footer p, footer a{font-size:14px; line-height:2; color:rgba(250,245,234,0.72);}
  .foot-contact-link{transition:color .15s ease;}
  .foot-contact-link:hover{color:var(--gold-300);}
  .foot-links-list{display:flex; flex-direction:column; gap:4px;}
  .foot-links-list .foot-link{display:flex; align-items:center; gap:9px; line-height:1.9;}
  .foot-link-ico{font-size:22px; line-height:1; flex-shrink:0; color:var(--gold-300);}
  .foot-bottom{display:flex; justify-content:space-between; padding-top:24px; font-size:12.5px; color:rgba(250,245,234,0.45); flex-wrap:wrap; gap:10px;}
  .foot-bottom-social{display:inline-flex; align-items:center; gap:16px;}
  .foot-bottom-social a{color:rgba(250,245,234,0.55); display:inline-flex; transition:color .15s ease;}
  .foot-bottom-social a:hover{color:var(--gold-300);}
  .foot-bottom-social .social-svg{width:16px; height:16px;}

  .kicker-note{font-size:12.5px; color:var(--ink-600); margin-top:6px;}