:root{
    --ink:#1c2a1c;
    --ink-2:#141f14;
    --paper:#f7f4ec;
    --mist:#edf0e8;
    --gold:#ad8c56;
    --gold-soft:#c9ac7c;
    --white:#ffffff;
    --maxw:1200px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Jost',sans-serif;
    font-weight:300;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{text-decoration:none;color:inherit;}
  h1,h2,h3{
    font-family:'Cormorant Garamond',serif;
    font-weight:500;
    margin:0;
  }
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
  .eyebrow{
    font-family:'Jost',sans-serif;
    font-size:12px;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--gold);
    display:block;
    margin-bottom:14px;
  }

  /* ---------- Header ---------- */
  header{
    position:fixed;
    top:0;left:0;right:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:26px 32px;
    transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
  }
  /* No backdrop-filter here, deliberately. filter/backdrop-filter make the
     element they're set on a new containing block for any position:fixed
     descendant — the mobile nav (position:fixed;inset:0, meant to cover the
     whole viewport) is a DOM child of <header>, so backdrop-filter directly
     on header collapsed that full-screen menu down to just the header bar's
     own height once scrolled past 60px. A ::before layer with z-index:-1 was
     tried as a fix, but a negative z-index on a descendant of a fixed
     element is its own well-known real-device rendering trap (mobile Safari
     in particular can push the whole thing behind the page background) —
     confirmed live: the nav opened at full size but rendered behind the
     page, showing white instead of its dark background. A plain solid color
     (no blur) sidesteps both problems entirely. */
  header.solid{
    background:rgba(28,42,28,0.92);
    padding:16px 32px;
    box-shadow:0 6px 24px rgba(0,0,0,0.15);
  }
  .logo{
    font-family:'Cormorant Garamond',serif;
    font-size:20px;
    letter-spacing:0.22em;
    color:var(--white);
    text-transform:uppercase;
  }
  .logo span{color:var(--gold-soft);}
  nav.primary-nav{display:flex;align-items:center;gap:40px;}
  nav.primary-nav a{
    color:var(--white);
    font-size:13px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    opacity:0.88;
    transition:opacity .2s ease;
  }
  nav.primary-nav a:hover{opacity:1;color:var(--gold-soft);}
  .nav-cta{
    border:1px solid rgba(255,255,255,0.55);
    padding:9px 20px;
    border-radius:2px;
  }
  .nav-cta:hover{border-color:var(--gold-soft);color:var(--gold-soft);}
  .menu-btn{
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
    padding:8px;
  }
  .menu-btn span{width:24px;height:1.5px;background:var(--white);display:block;}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    height:100vh;
    min-height:560px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    overflow:hidden;
    background:#0e150e;
  }
  .hero img{
    position:absolute;
    left:0;top:-25%;
    width:100%;height:150%;
    object-fit:cover;
    opacity:0.9;
    will-change:transform;
  }
  .hero::after{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(10,16,10,0.35) 0%, rgba(10,16,10,0.15) 40%, rgba(8,13,8,0.75) 100%);
  }
  .hero-content{
    position:relative;
    z-index:2;
    color:var(--white);
    padding:0 24px;
  }
  .hero-word{
    font-family:'Cormorant Garamond',serif;
    font-weight:500;
    font-size:clamp(38px, 9vw, 118px);
    letter-spacing:0.06em;
    line-height:1;
    text-transform:uppercase;
    margin:0;
  }
  .hero-tagline{
    margin-top:22px;
    font-size:clamp(14px,2vw,18px);
    letter-spacing:0.06em;
    font-weight:300;
    color:rgba(255,255,255,0.92);
  }
  .hero-cta{
    display:inline-block;
    margin-top:38px;
    padding:14px 34px;
    border:1px solid rgba(255,255,255,0.7);
    color:var(--white);
    font-size:12px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    transition:all .25s ease;
  }
  .hero-cta:hover{background:var(--gold);border-color:var(--gold);}
  .scroll-cue{
    position:absolute;
    bottom:34px;left:50%;
    transform:translateX(-50%);
    z-index:2;
    width:1px;height:56px;
    background:rgba(255,255,255,0.5);
  }
  .scroll-cue::after{
    content:"";
    position:absolute;top:0;left:-2.5px;
    width:6px;height:6px;
    border-radius:50%;
    background:var(--gold-soft);
    animation:scrollDown 2.2s ease-in-out infinite;
  }
  @keyframes scrollDown{
    0%{top:0;opacity:1;}
    80%{opacity:1;}
    100%{top:50px;opacity:0;}
  }

  /* ---------- Section shells ---------- */
  section{padding:110px 0;}
  .section-head{max-width:640px;margin-bottom:56px;}
  .section-head h2{font-size:clamp(30px,4vw,46px);}
  .section-head p{margin-top:16px;font-size:16px;line-height:1.75;color:#3a463a;}
  .section-head.centered{margin-left:auto;margin-right:auto;text-align:center;}

  /* ---------- Welcome (split) ---------- */
  .split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
  }
  .split .copy p{font-size:16px;line-height:1.85;color:#3a463a;margin:0 0 18px;}
  .split .photo{
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;
    border-radius:2px;
  }
  .split .photo img{width:100%;height:100%;object-fit:cover;}

  /* ---------- Property exterior ---------- */
  .property-view{
    position:relative;
    height:72vh;
    min-height:440px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    overflow:hidden;
    background:#0a0f0a;
    padding:0;
  }
  .property-view img{
    position:absolute;
    inset:0;
    width:100%;height:100%;
    object-fit:cover;
  }
  .property-view::after{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(6,10,6,0.6) 0%, rgba(6,10,6,0.55) 50%, rgba(6,10,6,0.7) 100%);
  }
  .property-view-content{
    position:relative;
    z-index:2;
    width:100%;
    max-width:640px;
    color:var(--white);
    padding:0 24px;
    text-shadow:0 2px 14px rgba(0,0,0,0.45);
  }
  .property-view .eyebrow{color:var(--gold-soft);}
  .property-view h2{
    font-size:clamp(30px,4vw,48px);
    color:var(--white);
    margin-top:14px;
  }
  .property-view p{
    max-width:520px;
    margin:20px auto 0;
    color:rgba(255,255,255,0.9);
    line-height:1.8;
    font-size:16px;
  }

  /* ---------- Stay / amenities ---------- */
  .stay{background:var(--mist);}
  .stay .section-head h2{font-weight:600;font-size:clamp(34px,4.4vw,52px);}
  .amenities{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2px;
    background:rgba(28,42,28,0.08);
    border:1px solid rgba(28,42,28,0.08);
  }
  .amenity{
    background:var(--mist);
    padding:40px 34px;
  }
  .amenity h3{font-size:19px;font-weight:500;margin-bottom:10px;letter-spacing:0.02em;}
  .amenity p{margin:0;font-size:14px;line-height:1.7;color:#4a564a;}
  .amenity .mark{color:var(--gold);font-size:22px;margin-bottom:16px;display:block;}

  /* ---------- Location ---------- */
  .location .split{grid-template-columns:0.9fr 1.1fr;}
  .map-frame{
    width:100%;
    aspect-ratio:4/5;
    border:0;
    filter:grayscale(0.15) contrast(1.02);
  }

  /* ---------- Gallery ---------- */
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
  }
  .gallery-grid a{aspect-ratio:4/3;overflow:hidden;position:relative;display:block;}
  .gallery-grid img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .5s ease;
  }
  .gallery-grid a:hover img{transform:scale(1.05);}
  @media (max-width:860px){
    .gallery-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:520px){
    .gallery-grid{grid-template-columns:1fr;}
  }
  /* ---------- Rooms ---------- */
  .rooms{background:var(--mist);}
  .rooms-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
  }
  .rooms-grid a{aspect-ratio:4/3;overflow:hidden;position:relative;display:block;}
  .rooms-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
  .rooms-grid a:hover img{transform:scale(1.05);}
  @media (max-width:860px){
    .rooms-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:520px){
    .rooms-grid{grid-template-columns:1fr;}
  }

  .nearby{list-style:none;margin:26px 0 0;padding:0;}
  .nearby li{
    padding:12px 0;
    border-top:1px solid rgba(28,42,28,0.12);
    font-size:15px;
    display:flex;
    justify-content:space-between;
    color:#3a463a;
  }
  .nearby li span:last-child{color:var(--gold);font-size:13px;letter-spacing:0.04em;}
  .directions-link{
    display:inline-block;
    margin-top:30px;
    font-size:13px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    border-bottom:1px solid var(--gold);
    padding-bottom:4px;
    color:var(--ink);
  }
  .directions-link:hover{color:var(--gold);}

  /* ---------- Night view ---------- */
  .night-view{
    position:relative;
    height:72vh;
    min-height:440px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    overflow:hidden;
    background:#0a0f0a;
    padding:0;
  }
  .night-view img{
    position:absolute;
    inset:0;
    width:100%;height:100%;
    object-fit:cover;
    opacity:0.95;
  }
  .night-view::after{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(6,10,6,0.55) 0%, rgba(6,10,6,0.15) 35%, rgba(6,10,6,0.7) 100%);
  }
  .night-view-content{
    position:relative;
    z-index:2;
    width:100%;
    max-width:640px;
    color:var(--white);
    padding:0 24px;
  }
  .night-view .eyebrow{color:var(--gold-soft);}
  .night-view h2{
    font-size:clamp(30px,4vw,48px);
    color:var(--white);
    margin-top:14px;
  }
  .night-view p{
    max-width:520px;
    margin:20px auto 0;
    color:rgba(255,255,255,0.8);
    line-height:1.8;
    font-size:16px;
  }

  /* ---------- Panorama ---------- */
  .panorama{background:var(--paper);padding-bottom:70px;}
  .panorama .section-head{margin-bottom:44px;}
  .panorama-frame{
    width:100%;
    aspect-ratio:3200/933;
    overflow:hidden;
  }
  .panorama-frame img{
    width:100%;height:100%;
    object-fit:cover;
    display:block;
  }
  @media (max-width:700px){
    .panorama-frame{aspect-ratio:4/3;}
  }

  /* ---------- Contact ---------- */
  .contact{
    background:var(--ink-2);
    color:var(--white);
    text-align:center;
  }
  .contact .eyebrow{color:var(--gold-soft);}
  .contact h2{font-size:clamp(30px,4vw,48px);color:var(--white);}
  .contact p.lead{
    max-width:520px;
    margin:20px auto 0;
    color:rgba(255,255,255,0.75);
    line-height:1.8;
    font-size:16px;
  }
  .contact-actions{
    display:flex;
    gap:20px;
    justify-content:center;
    margin-top:42px;
    flex-wrap:wrap;
  }
  .contact-btn{
    padding:15px 32px;
    font-size:13px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    border:1px solid rgba(255,255,255,0.4);
    border-radius:2px;
    color:var(--white);
    transition:all .25s ease;
  }
  .contact-btn.solid{background:var(--gold);border-color:var(--gold);}
  .contact-btn.solid:hover{background:var(--gold-soft);border-color:var(--gold-soft);}
  .contact-btn:not(.solid):hover{border-color:var(--gold-soft);color:var(--gold-soft);}
  .contact-addr{
    margin-top:46px;
    font-size:13px;
    letter-spacing:0.08em;
    color:rgba(255,255,255,0.55);
  }

  /* ---------- Subscribe ---------- */
  .subscribe{
    background:var(--mist);
    text-align:center;
  }
  .subscribe .wrap{max-width:560px;}
  .subscribe h2{font-size:clamp(28px,4vw,40px);}
  .subscribe p{
    margin-top:16px;
    font-size:16px;
    line-height:1.75;
    color:#3a463a;
  }
  .subscribe-form{
    display:flex;
    gap:12px;
    justify-content:center;
    margin-top:32px;
    flex-wrap:wrap;
  }
  .subscribe-form input[type="email"]{
    flex:1 1 280px;
    padding:15px 18px;
    font-family:'Jost',sans-serif;
    font-size:15px;
    font-weight:300;
    color:var(--ink);
    background:var(--white);
    border:1px solid rgba(28,42,28,0.18);
    border-radius:2px;
  }
  .subscribe-form input[type="email"]:focus{
    outline:none;
    border-color:var(--gold);
  }
  .subscribe-form .contact-btn.solid{
    border-color:var(--gold);
    flex:0 0 auto;
  }
  .hp-field{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    opacity:0;
  }
  .subscribe-msg{
    min-height:18px;
    margin-top:18px;
    font-size:13px;
    letter-spacing:0.04em;
  }
  .subscribe-msg.ok{color:#3a6b3a;}
  .subscribe-msg.err{color:#a5433a;}

  footer{
    background:var(--ink-2);
    color:rgba(255,255,255,0.45);
    text-align:center;
    font-size:12px;
    letter-spacing:0.06em;
    padding:26px 0 34px;
    border-top:1px solid rgba(255,255,255,0.08);
  }
  footer a:hover{color:var(--gold-soft);}

  /* ---------- Floating WhatsApp ---------- */
  .wa-float{
    position:fixed;
    right:26px;bottom:26px;
    z-index:90;
    background:var(--ink);
    color:var(--white);
    display:flex;
    align-items:center;
    gap:10px;
    padding:13px 20px 13px 16px;
    border-radius:40px;
    font-size:13px;
    letter-spacing:0.05em;
    box-shadow:0 10px 30px rgba(0,0,0,0.25);
    transition:transform .2s ease, background .2s ease;
  }
  .wa-float:hover{transform:translateY(-2px);background:var(--gold);}
  .wa-float svg{width:18px;height:18px;flex:none;}

  /* ---------- Mobile ---------- */
  @media (max-width:860px){
    nav.primary-nav{
      position:fixed;
      inset:0;
      background:rgba(20,31,20,0.98);
      flex-direction:column;
      justify-content:center;
      gap:34px;
      transform:translateY(-100%);
      transition:transform .35s ease;
    }
    nav.primary-nav.open{transform:translateY(0);}
    nav.primary-nav a{font-size:16px;}
    .menu-btn{display:flex;}
    .split, .location .split{grid-template-columns:1fr;gap:36px;}
    .split .photo{order:-1;aspect-ratio:16/10;}
    .amenities{grid-template-columns:1fr 1fr;}
    section{padding:76px 0;}
  }
  @media (max-width:520px){
    .amenities{grid-template-columns:1fr;}
    .wrap{padding:0 22px;}
    .contact-actions{flex-direction:column;align-items:stretch;}
  }