:root{
  --ink:#1a1d26;
  --ink-soft:#5b6072;
  --paper:#f3f1ec;
  --paper-2:#e9e6df;
  --line:#d8d4cb;
  --accent:#3a6f6b;
  --accent-2:#c4744a;
  --card:#fbfaf7;
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Inter",system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.08;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}

/* nav */
.nav{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(243,241,236,.86);backdrop-filter:blur(8px);z-index:10}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:"Fraunces",serif;font-size:20px;font-weight:600}
.brand-mark{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--accent),#28403e);box-shadow:0 0 0 3px rgba(58,111,107,.18)}
.nav-links{display:flex;align-items:center;gap:26px;font-size:15px}
.nav-links a{color:var(--ink-soft)}
.nav-links a:hover{color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:500;font-size:15px;border-radius:999px;padding:11px 20px;transition:.16s;cursor:pointer;border:1px solid transparent}
.btn-solid{background:var(--accent);color:#fff}
.btn-solid:hover{background:#2f5a57}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink-soft)}
.btn-text{color:var(--accent);padding-left:6px}
.btn-text:hover{color:var(--accent-2)}

/* hero */
.hero{padding:88px 0 64px;border-bottom:1px solid var(--line)}
.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:20px}
.hero h1{font-size:clamp(38px,6vw,68px);margin-bottom:22px}
.lede{font-size:19px;color:var(--ink-soft);max-width:560px;margin-bottom:30px}
.hero-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}

/* wave signature */
.wave{display:flex;align-items:flex-end;gap:6px;height:70px;margin-top:56px}
.wave span{width:8px;background:linear-gradient(var(--accent),#2c4b48);border-radius:4px;animation:bob 2.4s ease-in-out infinite}
.wave span:nth-child(odd){background:linear-gradient(var(--accent-2),#9b5634)}
.wave span:nth-child(1){height:24%;animation-delay:0s}
.wave span:nth-child(2){height:58%;animation-delay:.1s}
.wave span:nth-child(3){height:38%;animation-delay:.2s}
.wave span:nth-child(4){height:80%;animation-delay:.3s}
.wave span:nth-child(5){height:46%;animation-delay:.4s}
.wave span:nth-child(6){height:66%;animation-delay:.5s}
.wave span:nth-child(7){height:30%;animation-delay:.6s}
.wave span:nth-child(8){height:72%;animation-delay:.7s}
.wave span:nth-child(9){height:42%;animation-delay:.8s}
.wave span:nth-child(10){height:60%;animation-delay:.9s}
.wave span:nth-child(11){height:34%;animation-delay:1s}
.wave span:nth-child(12){height:78%;animation-delay:1.1s}
.wave span:nth-child(13){height:48%;animation-delay:1.2s}
.wave span:nth-child(14){height:64%;animation-delay:1.3s}
.wave span:nth-child(15){height:28%;animation-delay:1.4s}
@keyframes bob{0%,100%{transform:scaleY(.7)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.wave span{animation:none}}

/* sections */
.section-title{font-size:clamp(26px,3.4vw,38px);margin-bottom:32px}
.rooms{padding:72px 0}
.room-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.room{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.room h3{font-size:20px;margin-bottom:8px}
.room p{font-size:15px;color:var(--ink-soft)}

.how{padding:72px 0;background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.how-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.how-copy p{font-size:17px;color:var(--ink-soft);margin-bottom:20px;max-width:480px}
.how-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.how-list li{padding-left:24px;position:relative;font-size:15px}
.how-list li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.how-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.card-row{display:flex;justify-content:space-between;align-items:center;font-size:15px;padding:8px 0}
.card-row.muted{color:var(--ink-soft);font-size:14px;border-top:1px solid var(--line)}
.dot{color:var(--accent);font-weight:600}
.card-meter{display:flex;gap:5px;align-items:flex-end;height:44px;margin:10px 0}
.card-meter i{flex:1;background:var(--accent);border-radius:3px;opacity:.85;height:40%}
.card-meter i:nth-child(2){height:75%}.card-meter i:nth-child(3){height:55%}
.card-meter i:nth-child(4){height:90%}.card-meter i:nth-child(5){height:50%}
.card-meter i:nth-child(6){height:68%}.card-meter i:nth-child(7){height:38%}

.pricing{padding:72px 0}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;max-width:680px}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.plan-featured{border-color:var(--accent);box-shadow:0 8px 30px -18px rgba(58,111,107,.5)}
.plan h3{font-size:21px;margin-bottom:10px}
.price{font-family:"Fraunces",serif;font-size:40px;font-weight:600;margin-bottom:16px}
.price span{font-size:16px;color:var(--ink-soft);font-family:"Inter",sans-serif}
.plan ul{list-style:none;margin-bottom:22px;display:flex;flex-direction:column;gap:8px}
.plan li{font-size:15px;color:var(--ink-soft)}
.plan .btn{width:100%}

/* footer */
.foot{border-top:1px solid var(--line);padding:30px 0}
.foot-inner{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--ink-soft)}
.foot nav{display:flex;gap:22px}
.foot nav a:hover{color:var(--ink)}

@media (max-width:760px){
  .nav-links a:not(.btn){display:none}
  .how-inner{grid-template-columns:1fr;gap:32px}
}