:root{
      /* Organic / Natural, warm + refined */
      --bg: #fbf7f0;
      --paper: rgba(255,255,255,.72);
      --ink: #1f2420;
      --muted: rgba(31,36,32,.72);
      --line: rgba(31,36,32,.12);

      --pine: #1e3b2f;     /* deep green */
      --moss: #2f5d46;     /* green */
      --clay: #b0603a;     /* warm terracotta */
      --honey: #d9a441;    /* warm accent */
      --sky: #d7e7ea;      /* cool balance */

      --shadow: 0 18px 60px rgba(16, 24, 20, .12);
      --shadow2: 0 10px 30px rgba(16, 24, 20, .10);
      --radius: 22px;
      --radius2: 16px;

      --max: 1120px;
    }

    *{ box-sizing: border-box; 
    }
    html,body{ height: 100%; }
      body{
      margin:0;
      color: var(--ink);
      background:
        radial-gradient(1200px 700px at 15% 10%, rgba(217,164,65,.18), transparent 55%),
        radial-gradient(900px 650px at 80% 15%, rgba(47,93,70,.16), transparent 60%),
        radial-gradient(900px 650px at 70% 80%, rgba(176,96,58,.12), transparent 55%),
        linear-gradient(180deg, #fbf7f0 0%, #f7f1e7 35%, #fbf7f0 100%);
      font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", sans-serif;
      letter-spacing: -0.01em;
      overflow-x: hidden;
    }

    a{ color: inherit; text-decoration: none; }
    .container{
      width: min(var(--max), calc(100% - 2rem));
      margin-inline: auto;
    }

    /* Subtle topo pattern */
    .topo{
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .18;
      mix-blend-mode: multiply;
      filter: contrast(110%) saturate(90%);
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'%3E%3Cg fill='none' stroke='%231f2420' stroke-opacity='.16' stroke-width='1.2'%3E%3Cpath d='M0 70c85 45 145 30 220-6s150-45 300 25'/%3E%3Cpath d='M-20 150c105 62 200 20 280-10s160-40 300 35'/%3E%3Cpath d='M-30 230c125 70 240 20 320-12s170-38 300 38'/%3E%3Cpath d='M-40 310c145 78 280 18 360-14s185-36 300 40'/%3E%3Cpath d='M-50 390c165 86 320 16 400-16s200-34 300 42'/%3E%3C/g%3E%3C/svg%3E");
      background-size: 520px 520px;
      background-position: 0 0;
    }

/* =========================================
   HEADER
========================================= */

.site-header{
  position: relative;
  overflow: hidden;
  height: clamp(340px, 52vh, 500px);

  transition:
    height .8s cubic-bezier(.22,.61,.36,1);
}

/* =========================================
   IMAGE
========================================= */

.header-image-container{
  height: 100%;
}

.header-image-container img{
  width: 100%;
  height:100%;
  object-fit:cover;

  transition:
    transform 1.2s ease,
    filter .8s ease;

  transform-origin:center center;
}

/* cinematic effect */

.site-header.scrolled .header-image-container img{
  transform:
    scale(1.12)
    translateY(-25px);

  filter: brightness(.78);
}

/* =========================================
   STICKY NAVIGATION
========================================= */

.nav-wrapper{
  position: sticky;
  top: 0;
  z-index: 9999;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  background: rgba(251,247,240,.82);

  border-bottom: 1px solid var(--line);
}

.nav{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1rem;

  padding: .85rem 0;
}


    .brand{
      display:flex;
      align-items:center;
      gap: .75rem;
      min-width: 220px;
    }
    .mark{
      width: 38px; height: 38px;
      border-radius: 14px;
      background:
        radial-gradient(18px 18px at 30% 35%, rgba(255,255,255,.75), transparent 60%),
        linear-gradient(135deg, var(--pine), var(--moss));
      box-shadow: 0 10px 24px rgba(30,59,47,.18);
      position: relative;
      overflow:hidden;
    }
    .mark:after{
      content:"";
      position:absolute; inset:-20% -30%;
      background:
        linear-gradient(90deg, transparent 0 35%, rgba(255,255,255,.18) 45%, transparent 55% 100%);
      transform: rotate(25deg);
    }
    .brand strong{
      font-family: "Fraunces", serif;
      letter-spacing: -0.02em;
      font-size: 1.05rem;
      line-height: 1.1;
      display:block;
    }
    .brand span{
      display:block;
      font-size: .82rem;
      color: var(--muted);
      margin-top: .12rem;
    }


   nav ul{
      list-style:none;
      margin:0; padding:0;
      display:flex;
      gap: .35rem;
      align-items:center;
      flex-wrap: nowrap;
      justify-content:flex-end;
    }
    
nav ul li {
  position: relative;
}

nav ul li a.link {
  text-decoration: none;
  padding: 0.5rem .74rem;
  display: inline-block;
  color: #202020;
  font-weight: 600;
  border-radius: 999px;
  transition: background-color 0.2s ease;
}

nav ul li a.link:hover,
nav ul li a.link[aria-current="page"] {
  background-color: rgba(215,165,74,0.2);
}

nav ul li ul.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #ccc;
  padding: 0.5rem 0;
  margin: 0;
  list-style: none;
  display: none;
  max-height: 420px;
  overflow-y: auto;
  min-width: 220px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  z-index: 1000;
}

nav ul li:hover > ul.submenu,
nav ul li:focus-within > ul.submenu {
  display: block;
}
    nav a{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding: .58rem .82rem;
      border-radius: 999px;
      border: 1px solid transparent;
      color: rgba(22,36,29,.88);
      font-weight: 650;
      font-size: .92rem;
      letter-spacing: .01em;
      transition: transform .16s ease, background .16s ease, border-color .16s ease;
    }
    nav a:hover{
      background: rgba(215,165,74,.12);
      border-color: rgba(215,165,74,.18);
      transform: translateY(-1px);
    }
    nav a[aria-current="page"]{
      background: rgba(47,74,58,.10);
      border-color: rgba(47,74,58,.18);
    }

    .cta{
      display:inline-flex;
      align-items:center;
      gap: .55rem;
      padding: .65rem .9rem;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--clay), color-mix(in srgb, var(--clay) 60%, var(--honey)));
      color: #fff;
      border: 1px solid rgba(255,255,255,.22);
      box-shadow: 0 14px 30px rgba(176,96,58,.22);
      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
      font-weight: 600;
    }
    .cta:hover{
      transform: translateY(-1px);
      filter: saturate(1.05);
      box-shadow: 0 18px 40px rgba(176,96,58,.26);
    }
    .cta:active{ transform: translateY(0px) scale(.98); }
   
    /* Hero */
    .hero{
      padding: clamp(2.2rem, 5vw, 4.2rem) 0 1.2rem;
      position: relative;
    }
    .heroGrid{
      display:grid;
      grid-template-columns: 1.25fr .75fr;
      gap: clamp(1.2rem, 3.4vw, 2.4rem);
      align-items: start;
    }
    .kicker{
      display:inline-flex;
      align-items:center;
      gap: .6rem;
      font-size: .92rem;
      color: rgba(31,36,32,.78);
      padding: .45rem .75rem;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: color-mix(in srgb, white 62%, transparent);
      width: fit-content;
    }
    .kicker svg{ opacity: .9; }
    h1{
      font-family: "Fraunces", serif;
      font-weight: 700;
      letter-spacing: -0.035em;
      font-size: clamp(2.05rem, 4.1vw, 3.35rem);
      line-height: 1.06;
      margin: .9rem 0 .65rem;
    }
    .slogan{
      font-size: clamp(1.05rem, 1.5vw, 1.2rem);
      color: rgba(31,36,32,.78);
      margin: 0 0 1.25rem;
      max-width: 62ch;
    }
    .lead{
      font-size: 1.02rem;
      line-height: 1.7;
      color: rgba(31,36,32,.82);
      max-width: 70ch;
      margin: 0 0 1.35rem;
    }

    .quickLinks{
      display:flex;
      flex-wrap: wrap;
      gap: .6rem;
      margin-top: .2rem;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap: .55rem;
      padding: .6rem .75rem;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: color-mix(in srgb, white 62%, transparent);
      box-shadow: 0 10px 22px rgba(16,24,20,.06);
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
      font-weight: 600;
      font-size: .95rem;
    }
    .pill:hover{
      transform: translateY(-1px);
      border-color: color-mix(in srgb, var(--moss) 28%, var(--line));
      background: color-mix(in srgb, white 72%, transparent);
    }
    .pill:active{ transform: translateY(0) scale(.985); }
    .pill svg{ opacity: .92; }

    /* Scenic panel (CSS “image”) */
    .scene{
      border-radius: var(--radius);
      background:
        radial-gradient(220px 180px at 70% 20%, rgba(255,255,255,.72), transparent 60%),
        radial-gradient(260px 200px at 30% 35%, rgba(217,164,65,.28), transparent 62%),
        linear-gradient(180deg, rgba(215,231,234,.75) 0%, rgba(251,247,240,.2) 38%, rgba(47,93,70,.18) 100%),
        linear-gradient(135deg, rgba(30,59,47,.55), rgba(176,96,58,.18));
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      position: relative;
      overflow:hidden;
      min-height: 430px;
    }
    .scene:before{
      content:"";
      position:absolute; inset:-30%;
      background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.35), transparent 40%),
        radial-gradient(circle at 75% 25%, rgba(255,255,255,.25), transparent 45%),
        radial-gradient(circle at 35% 65%, rgba(255,255,255,.18), transparent 48%);
      filter: blur(1px);
      transform: rotate(-8deg);
      opacity: .75;
    }
    .ridge{
      position:absolute;
      left:-10%;
      right:-10%;
      bottom:-20%;
      height: 55%;
      background:
        linear-gradient(180deg, rgba(47,93,70,.00) 0%, rgba(47,93,70,.15) 30%, rgba(30,59,47,.35) 100%);
      clip-path: polygon(0 45%, 12% 38%, 24% 46%, 38% 34%, 48% 42%, 62% 30%, 72% 38%, 86% 28%, 100% 36%, 100% 100%, 0 100%);
      filter: saturate(1.05);
    }
    .badgeStack{
      position:absolute;
      left: 1rem;
      right: 1rem;
      bottom: 1rem;
      display:grid;
      gap: .55rem;
    }
    .mini{
      border-radius: 18px;
      padding: .75rem .85rem;
      background: rgba(255,255,255,.64);
      border: 1px solid rgba(255,255,255,.55);
      backdrop-filter: blur(10px);
      box-shadow: var(--shadow2);
      display:flex;
      align-items:flex-start;
      gap: .7rem;
    }
    .mini b{
      display:block;
      font-size: .95rem;
      letter-spacing: -0.01em;
      margin-bottom: .1rem;
    }
    .mini small{
      display:block;
      color: rgba(31,36,32,.72);
      line-height: 1.45;
      font-size: .88rem;
    }

    /* Sections */
    section{
      padding: clamp(2.2rem, 4.6vw, 3.6rem) 0;
    }
    .sectionHead{
      display:flex;
      align-items:flex-end;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1.2rem;
    }
    h2{
      font-family: "Fraunces", serif;
      font-size: clamp(1.45rem, 2.2vw, 2.1rem);
      letter-spacing: -0.03em;
      margin: 0;
      line-height: 1.1;
    }
    .sub{
      color: var(--muted);
      max-width: 70ch;
      margin: .45rem 0 0;
      line-height: 1.65;
      font-size: 1rem;
    }

    /* Why list (not cards, editorial list) */
    .why{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: clamp(1.1rem, 3vw, 2rem);
      align-items: start;
    }
    .list{
      margin: 0;
      padding: 0;
      list-style: none;
      display:grid;
      gap: .7rem;
    }
    .item{
      display:flex;
      gap: .85rem;
      padding: .85rem .95rem;
      border-radius: 18px;
      background: color-mix(in srgb, white 60%, transparent);
      border: 1px solid var(--line);
    }
    .ico{
      width: 38px; height: 38px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(47,93,70,.18), rgba(217,164,65,.14));
      border: 1px solid rgba(31,36,32,.10);
      display:grid;
      place-items:center;
      flex: 0 0 auto;
    }
    .item b{ display:block; margin: .05rem 0 .15rem; }
    .item p{
      margin:0;
      color: rgba(31,36,32,.78);
      line-height: 1.55;
    }

    .aside{
      border-radius: var(--radius);
      padding: 1.1rem 1.1rem 1.2rem;
      background:
        radial-gradient(500px 220px at 20% 0%, rgba(217,164,65,.16), transparent 55%),
        radial-gradient(500px 260px at 110% 30%, rgba(47,93,70,.16), transparent 60%),
        color-mix(in srgb, white 66%, transparent);
      border: 1px solid var(--line);
      box-shadow: 0 16px 46px rgba(16,24,20,.08);
      position: sticky;
      top: 90px;
    }
    .aside h3{
      font-family: "Fraunces", serif;
      letter-spacing: -0.02em;
      font-size: 1.25rem;
      margin: 0 0 .35rem;
    }
    .aside p{
      margin: 0 0 .9rem;
      color: rgba(31,36,32,.78);
      line-height: 1.65;
    }
    .aside .meta{
      display:grid;
      gap: .45rem;
      margin: .85rem 0 1rem;
      padding-top: .85rem;
      border-top: 1px solid var(--line);
    }
    .kv{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 1rem;
      font-size: .95rem;
      color: rgba(31,36,32,.8);
    }
    .kv span{ color: rgba(31,36,32,.62); }

    /* Explore (editorial columns) */
    .explore{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(1rem, 2.8vw, 2rem);
      align-items: start;
    }
    .place{
      border-left: 2px solid rgba(47,93,70,.28);
      padding-left: 1rem;
    }
    .place h3{
      font-family: "Fraunces", serif;
      margin: 0 0 .35rem;
      letter-spacing: -0.02em;
      font-size: 1.25rem;
    }
    .place p{
      margin: 0 0 .85rem;
      color: rgba(31,36,32,.78);
      line-height: 1.7;
    }
    .place a{
      display:inline-flex;
      align-items:center;
      gap: .45rem;
      font-weight: 650;
      color: color-mix(in srgb, var(--pine) 78%, black);
      border-bottom: 1px solid rgba(30,59,47,.25);
      padding-bottom: .1rem;
      transition: transform .18s ease, border-color .18s ease;
    }
    .place a:hover{
      transform: translateX(2px);
      border-color: rgba(30,59,47,.45);
    }

    /* Reservation form */
    .reservation{
      border-radius: calc(var(--radius) + 2px);
      overflow: hidden;
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      background:
        radial-gradient(900px 360px at 15% 0%, rgba(217,164,65,.20), transparent 55%),
        radial-gradient(900px 420px at 95% 20%, rgba(47,93,70,.18), transparent 60%),
        color-mix(in srgb, white 72%, transparent);
    }
    .resGrid{
      display:grid;
      grid-template-columns: .9fr 1.1fr;
    }
    .resIntro{
      padding: 1.3rem 1.3rem 1.4rem;
      background:
        linear-gradient(180deg, rgba(30,59,47,.10), transparent 55%),
        radial-gradient(520px 220px at 20% 10%, rgba(176,96,58,.14), transparent 55%);
      border-right: 1px solid var(--line);
      position: relative;
      overflow:hidden;
    }
    .resIntro:after{
      content:"";
      position:absolute;
      inset:-30%;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 50%),
        radial-gradient(circle at 75% 55%, rgba(255,255,255,.20), transparent 55%);
      transform: rotate(12deg);
      opacity: .9;
    }
    .resIntro > *{ position: relative; z-index: 1; }
    .resIntro h2{ margin-bottom: .5rem; }
    .resIntro .sub{ margin-top: 0; }
    .resIntro ul{
      margin: 1rem 0 0;
      padding: 0;
      list-style: none;
      display:grid;
      gap: .5rem;
      color: rgba(31,36,32,.78);
      line-height: 1.55;
    }
    .resIntro li{
      display:flex;
      gap: .6rem;
      align-items:flex-start;
    }

    form{
      padding: 1.3rem 1.3rem 1.4rem;
      display:grid;
      gap: .95rem;
    }
    .row{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: .85rem;
    }
    label{
      display:block;
      font-weight: 650;
      letter-spacing: -0.01em;
      margin: 0 0 .35rem;
      font-size: .95rem;
    }
    .field{
      background: rgba(255,255,255,.72);
      border: 1px solid rgba(31,36,32,.14);
      border-radius: 14px;
      padding: .75rem .85rem;
      outline: none;
      width: 100%;
      font: inherit;
      color: var(--ink);
      transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }
    .field:focus{
      border-color: color-mix(in srgb, var(--moss) 55%, rgba(31,36,32,.14));
      box-shadow: 0 0 0 4px rgba(47,93,70,.12);
    }
    textarea.field{ min-height: 120px; resize: vertical; }

    .actions{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
      padding-top: .2rem;
    }
    .hint{
      color: rgba(31,36,32,.65);
      font-size: .92rem;
      line-height: 1.4;
      max-width: 55ch;
    }
    .primary{
      display:inline-flex;
      align-items:center;
      gap: .55rem;
      padding: .8rem 1rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.2);
      background: linear-gradient(135deg, var(--pine), var(--moss));
      color: #fff;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 16px 34px rgba(30,59,47,.22);
      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    }
    .primary:hover{
      transform: translateY(-1px);
      filter: saturate(1.05);
      box-shadow: 0 18px 42px rgba(30,59,47,.26);
    }
    .primary:active{ transform: translateY(0) scale(.985); }
    .ghost{
      display:inline-flex;
      align-items:center;
      gap: .55rem;
      padding: .75rem .95rem;
      border-radius: 999px;
      border: 1px solid rgba(31,36,32,.16);
      background: rgba(255,255,255,.55);
      cursor: pointer;
      font-weight: 650;
      transition: transform .18s ease, background .18s ease, border-color .18s ease;
    }
    .ghost:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,.7);
      border-color: rgba(31,36,32,.22);
    }

    /* Footer */
    footer{
      padding: 2rem 0 2.2rem;
      border-top: 1px solid var(--line);
      background: color-mix(in srgb, white 35%, transparent);
    }
    .foot{
      display:flex;
      align-items:flex-start;
      justify-content: space-between;
      gap: 1.2rem;
      flex-wrap: wrap;
    }
    .foot small{ color: rgba(31,36,32,.68); line-height: 1.6; }
    .foot .links{
      display:flex;
      gap: .85rem;
      flex-wrap: wrap;
    }
    .foot .links a{
      color: rgba(31,36,32,.74);
      border-bottom: 1px solid rgba(31,36,32,.18);
      padding-bottom: .08rem;
    }
    .foot .links a:hover{
      color: rgba(31,36,32,.9);
      border-color: rgba(31,36,32,.35);
    }

    /* Reveal motion */
    .reveal{
      opacity: 0;
      transform: translateY(10px);
      animation: up .8s ease forwards;
    }
    @keyframes up{
      to{ opacity: 1; transform: translateY(0); }
    }
    .stagger > *{ opacity: 0; transform: translateY(10px); }
    .stagger.is-in > *{ animation: up .8s ease forwards; }
    .stagger.is-in > *:nth-child(1){ animation-delay: .04s; }
    .stagger.is-in > *:nth-child(2){ animation-delay: .10s; }
    .stagger.is-in > *:nth-child(3){ animation-delay: .16s; }
    .stagger.is-in > *:nth-child(4){ animation-delay: .22s; }
    .stagger.is-in > *:nth-child(5){ animation-delay: .28s; }
    .stagger.is-in > *:nth-child(6){ animation-delay: .34s; }

    /* Responsive */
    @media (max-width: 980px){
      .site-header{ height: clamp(220px, 32vh, 380px); }
      .heroGrid{ grid-template-columns: 1fr; }
      .scene{ min-height: 360px; }
      .why{ grid-template-columns: 1fr; }
      .explore{ grid-template-columns: 1fr; }
      .aside{ position: relative; top: 0; }
      .resGrid{ grid-template-columns: 1fr; }
      .resIntro{ border-right: 0; border-bottom: 1px solid var(--line); }
    }
    @media (max-width: 980px){
      nav ul{ display:none; }
      .menuBtn{ display:inline-flex; }
      .menuPanel{ display:block; }
      .menuPanel[hidden]{ display:none; }
      .menuPanel .stack{
        display:grid; gap: .5rem;
        padding: .8rem 0 .2rem;
      }
      .menuPanel a{
        display:flex;
        align-items:center;
        justify-content: space-between;
        padding: .8rem .85rem;
        border-radius: 16px;
        border: 1px solid var(--line);
        background: color-mix(in srgb, white 62%, transparent);
      }
      .row{ grid-template-columns: 1fr; }
      .brand{ min-width: 0; }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      *{ scroll-behavior: auto !important; }
      .reveal, .stagger > *{ animation: none !important; opacity: 1 !important; transform: none !important; }
      .pill, .cta, .primary, .ghost, .nav a.link{ transition: none !important; }
    }

    @media (max-width: 640px){
      .site-header{ height: clamp(190px, 28vh, 300px); }
    }