:root {
  --bg: #f3eee8; --surface: #fff; --ink: #2b2620; --muted: #7b7060; --accent: #c08a76; --accent2: #8a9367;
  --line: rgba(43,38,32,.1); --display: "Outfit", system-ui, sans-serif; --body: "Hanken", system-ui, sans-serif;
  --ease: cubic-bezier(.22,1,.36,1); --pad: clamp(1.25rem,5vw,5rem); --maxw: 1140px;
}
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.7; }
h1,h2,h3 { font-family: var(--display); font-weight: 500; margin: 0; text-transform: lowercase; line-height: 1.05; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* nav */
.nav { position: sticky; top: 46px; z-index: 150; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem var(--pad); background: color-mix(in srgb,var(--bg) 80%,transparent); transition: background-color .3s; }
.nav.is-stuck { background: color-mix(in srgb,var(--bg) 96%,transparent); }
.brand { display: inline-flex; align-items: flex-end; gap: 3px; font-family: var(--display); font-weight: 600; font-size: 1.4rem; text-transform: lowercase; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-bottom: 6px; }
.nav-links { display: flex; gap: 1.8rem; font-size: .92rem; } .nav-links a { color: var(--muted); transition: color .2s; } .nav-links a:hover { color: var(--accent); }
.nav-btn { font-size: .9rem; font-weight: 500; padding: 10px 22px; border-radius: 999px; background: var(--accent); color: #fff; transition: transform .2s, background-color .2s; } .nav-btn:hover { transform: translateY(-1px); background: color-mix(in srgb,var(--accent) 86%,#000); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; } .nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s,opacity .2s; }
.nav-drawer { display: none; }
@media (max-width: 860px){ .nav-links, .nav > .nav-btn { display: none; } .nav-toggle { display: flex; }
  .nav-drawer { position: fixed; inset: 92px 0 auto 0; z-index: 140; display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem var(--pad) 2rem; background: var(--surface); border-bottom: 1px solid var(--line); }
  .nav-drawer a { padding: .7rem 0; font-size: 1.2rem; }
  body.drawer-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);} body.drawer-open .nav-toggle span:nth-child(2){opacity:0;} body.drawer-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}

/* hero */
.hero { display: grid; gap: clamp(2rem,5vw,4rem); align-items: center; padding: clamp(3rem,7vw,6rem) var(--pad); grid-template-columns: 1fr; } @media (min-width: 1000px){ .hero { grid-template-columns: 1.05fr .95fr; } }
.hero-eyebrow { display: inline-block; font-size: .78rem; letter-spacing: .1em; color: var(--accent); margin-bottom: 1rem; }
.hero-title { font-size: clamp(2.6rem,6.5vw,5rem); font-weight: 500; line-height: 1.04; max-width: 14ch; } .hero-title .line { display: block; overflow: hidden; padding-bottom: .04em; } .hero-title .line [data-line]{ display:block; }
.hero-lede { margin-top: 1.3rem; max-width: 42ch; color: var(--muted); font-size: 1.12rem; }
.hero-btn { display: inline-flex; margin-top: 1.8rem; padding: 15px 32px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 500; font-size: 1rem; transition: transform .25s var(--ease), box-shadow .25s; } .hero-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px color-mix(in srgb,var(--accent) 36%,transparent); }
.hero-blob { position: relative; aspect-ratio: 1; min-height: 280px; }
.blob1, .blob2 { position: absolute; }
.blob1 { inset: 8% 12% 18% 6%; border-radius: 48% 52% 56% 44% / 54% 46% 54% 46%; background: linear-gradient(150deg,#e7c3b3,#c08a76); }
.blob2 { top: 38%; right: 4%; width: 42%; aspect-ratio: 1; border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%; background: linear-gradient(150deg,#b6bd92,#8a9367); }

/* sec head */
.sec-head { max-width: var(--maxw); margin: 0 auto clamp(2rem,4vw,3rem); }
.kicker { display: inline-block; font-size: .74rem; letter-spacing: .16em; color: var(--accent); margin-bottom: .9rem; }
.sec-title { font-size: clamp(1.9rem,4vw,3rem); font-weight: 500; }

/* services */
.services { padding: clamp(2.5rem,6vw,5rem) var(--pad); max-width: var(--maxw); margin: 0 auto; }
.svc-grid { display: grid; gap: clamp(1.25rem,3vw,2rem); grid-template-columns: repeat(2,1fr); } @media (min-width: 768px){ .svc-grid { grid-template-columns: repeat(4,1fr); } }
.svc { display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem; border-radius: 28px; background: var(--surface); box-shadow: 0 14px 30px rgba(43,38,32,.05); transition: transform .3s var(--ease); }
.svc:hover { transform: translateY(-5px); }
.icon { width: 46px; height: 46px; border-radius: 50%; margin-bottom: .5rem; }
.i1 { background: radial-gradient(circle at 35% 30%,#e7c3b3,#c08a76); } .i2 { background: radial-gradient(circle at 35% 30%,#d9c7b0,#b39773); } .i3 { background: radial-gradient(circle at 35% 30%,#c2cda0,#8a9367); } .i4 { background: radial-gradient(circle at 35% 30%,#e3b8a0,#b3705a); }
.svc h3 { font-size: 1.15rem; font-weight: 500; }
.svc-meta { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-top: auto; } .svc-meta span { font-size: .85rem; color: var(--muted); } .svc-meta strong { font-weight: 600; color: var(--accent); }

/* packages */
.packages { padding: clamp(2.5rem,6vw,5rem) var(--pad); background: var(--surface); }
.pkg-grid { max-width: 1000px; margin: 0 auto; display: grid; gap: clamp(1.25rem,3vw,2rem); grid-template-columns: 1fr; } @media (min-width: 768px){ .pkg-grid { grid-template-columns: repeat(3,1fr); } }
.pkg { text-align: left; display: flex; flex-direction: column; gap: .6rem; padding: 2rem; border-radius: 28px; background: var(--bg); border: 2px solid transparent; transition: transform .3s var(--ease), border-color .2s; position: relative; }
.pkg:hover { transform: translateY(-4px); } .pkg.is-on { border-color: var(--accent); }
.pkg h3 { font-size: 1.5rem; font-weight: 500; color: var(--accent); } .pkg p { color: var(--muted); }
.pkg-price { font-family: var(--display); font-size: 1.8rem; font-weight: 600; margin-top: .25rem; }
.pkg-pick { align-self: flex-start; margin-top: .75rem; padding: 9px 22px; border-radius: 999px; border: 1px solid var(--line); font-size: .9rem; transition: background-color .2s,color .2s; }
.pkg.is-on .pkg-pick { background: var(--accent); color: #fff; border-color: var(--accent); }
.pkg.is-on .pkg-pick::after { content: "ili"; }

/* reserve */
.reserve { padding: clamp(3rem,7vw,6rem) var(--pad); max-width: var(--maxw); margin: 0 auto; display: grid; gap: clamp(2rem,5vw,4rem); grid-template-columns: 1fr; align-items: start; } @media (min-width: 900px){ .reserve { grid-template-columns: .9fr 1.1fr; } }
.reserve-note { margin-top: 1rem; color: var(--muted); max-width: 40ch; }
.reserve-summary { margin-top: 1.5rem; padding: 1rem 1.25rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); font-size: .95rem; color: var(--muted); } .reserve-summary strong { color: var(--accent); }
.reserve-form { background: var(--surface); border-radius: 28px; padding: clamp(1.5rem,3.5vw,2.5rem); display: grid; gap: 1.25rem; box-shadow: 0 20px 44px rgba(43,38,32,.07); }
.rf { display: grid; gap: .5rem; border: 0; padding: 0; margin: 0; font-size: .82rem; color: var(--muted); }
.rf input { padding: 13px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); } .rf input:focus-visible { border-color: var(--accent); outline: none; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); transition: all .2s; font-variant-numeric: tabular-nums; } .chip:hover { border-color: var(--accent); color: var(--ink); } .chip.is-on { background: var(--accent); color: #fff; border-color: var(--accent); }
.stepper { display: inline-flex; align-items: center; gap: .4rem; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: .35rem; width: fit-content; }
.stepper button { width: 38px; height: 38px; border-radius: 10px; font-size: 1.3rem; color: var(--ink); background: color-mix(in srgb,var(--accent) 10%,transparent); transition: background-color .2s; } .stepper button:hover { background: var(--accent); color: #fff; }
.stepper output { min-width: 38px; text-align: center; font-family: var(--display); font-size: 1.3rem; font-weight: 600; }
.rf-btn { padding: 15px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 600; transition: transform .2s, background-color .2s; } .rf-btn:hover { transform: translateY(-2px); background: color-mix(in srgb,var(--accent) 88%,#000); }
.rf-err { color: #c2683a; font-size: .9rem; }
.rf-ok { padding: 1.1rem 1.25rem; border-radius: 16px; background: color-mix(in srgb,var(--accent2) 16%,transparent); border: 1px solid color-mix(in srgb,var(--accent2) 40%,transparent); color: var(--ink); } .rf-ok strong { color: var(--accent2); }

/* footer */
.footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 2.5rem var(--pad); background: var(--ink); color: #ece4d8; } .footer .dot { background: var(--accent); } .foot-note { font-size: .85rem; color: color-mix(in srgb,#ece4d8 66%,transparent); }