@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --espresso:   #1a1008;
  --bark:       #2e1f0e;
  --walnut:     #4a2f1a;
  --caramel:    #8b5e3c;
  --gold:       #c9973a;
  --gold-light: #e8c068;
  --cream:      #f5f0e8;
  --cream2:     #ede5d4;
  --cream3:     #d4c5a9;
  --warm-white: #faf8f3;
  --text:       rgba(26,16,8,0.9);
  --text-soft:  rgba(26,16,8,0.55);
  --text-mute:  rgba(26,16,8,0.32);
  --border:     rgba(74,47,26,0.12);
  --border2:    rgba(74,47,26,0.22);
  --gold-dim:   rgba(201,151,58,0.15);
  --r:          8px;
  --r2:         16px;
  --nav-h:      72px;
}

html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--warm-white);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-weight: 300;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--cream3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--caramel); }
::selection { background: var(--gold); color: var(--espresso); }
a { color: inherit; text-decoration: none; }

/* ══ NAV ══ */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: var(--nav-h);
  background: rgba(250,248,243,0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: all 0.3s;
}
#nav.scrolled {
  background: rgba(250,248,243,0.98);
  box-shadow: 0 4px 32px rgba(26,16,8,0.08);
}
.nav-in {
  max-width: 1200px; margin: 0 auto; padding: 0 48px;
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 600; letter-spacing: .08em;
  color: var(--espresso); text-transform: uppercase;
}
.nav-logo span { color: var(--gold); }
.nav-links { display: flex; gap: 2px; }
.nav-link {
  font-size: 12px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-soft); padding: 8px 16px; border-radius: 6px;
  transition: all .2s; cursor: pointer; border: none; background: none;
  font-family: 'DM Sans', sans-serif;
}
.nav-link:hover, .nav-link.active { color: var(--espresso); background: var(--cream2); }
.nav-book {
  background: var(--espresso); color: var(--cream);
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 11px 24px; border-radius: var(--r); border: none; cursor: pointer;
  transition: all .25s;
}
.nav-book:hover { background: var(--walnut); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(26,16,8,0.2); }
.nav-ham { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.ham-line { width: 22px; height: 1.5px; background: var(--espresso); border-radius: 2px; transition: all .3s; }
#nav-mobile { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 400; background: var(--warm-white); border-bottom: 1px solid var(--border); padding: 16px 24px; flex-direction: column; gap: 4px; }
#nav-mobile.open { display: flex; }
.nm-link { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); padding: 12px 16px; border-radius: 6px; display: block; transition: all .2s; }
.nm-link:hover { color: var(--espresso); background: var(--cream2); }

/* ══ BUTTONS ══ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: var(--r); padding: 14px 32px; cursor: pointer;
  transition: all .25s; border: none;
}
.btn-dark { background: var(--espresso); color: var(--cream); }
.btn-dark:hover { background: var(--walnut); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(26,16,8,0.2); }
.btn-outline { background: none; color: var(--espresso); border: 1px solid var(--border2); }
.btn-outline:hover { border-color: var(--espresso); background: var(--cream2); }
.btn-gold { background: var(--gold); color: var(--espresso); }
.btn-gold:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(201,151,58,0.35); }
.btn-arrow { font-size: 14px; transition: transform .2s; }
.btn-dark:hover .btn-arrow, .btn-gold:hover .btn-arrow { transform: translateX(3px); }

/* ══ LAYOUT ══ */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
.section { padding: 100px 0; }
.section-sm { padding: 72px 0; }

/* ══ TYPOGRAPHY ══ */
.sec-tag {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px;
}
.sec-tag::before { content: ''; width: 24px; height: 1px; background: var(--gold); }
.sec-h {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(40px, 5vw, 64px); font-weight: 500;
  line-height: 1.06; letter-spacing: -.01em; color: var(--espresso);
  margin-bottom: 20px;
}
.sec-h em { font-style: italic; color: var(--caramel); }
.sec-p {
  font-size: 15px; font-weight: 300; color: var(--text-soft);
  line-height: 1.85; max-width: 500px;
}
.divider {
  width: 48px; height: 1px; background: var(--gold);
  margin: 20px 0;
}

/* ══ REVEAL ══ */
.rv { opacity: 0; transform: translateY(20px); transition: opacity .7s, transform .7s; }
.rv.in { opacity: 1; transform: none; }
.rv1 { opacity: 0; transform: translateY(20px); transition: opacity .7s .12s, transform .7s .12s; }
.rv1.in { opacity: 1; transform: none; }
.rv2 { opacity: 0; transform: translateY(20px); transition: opacity .7s .24s, transform .7s .24s; }
.rv2.in { opacity: 1; transform: none; }
.rv3 { opacity: 0; transform: translateY(20px); transition: opacity .7s .36s, transform .7s .36s; }
.rv3.in { opacity: 1; transform: none; }

/* ══ FORM ELEMENTS ══ */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute); }
.field input, .field textarea, .field select {
  background: var(--cream); border: 1px solid var(--border2);
  border-radius: var(--r); padding: 13px 16px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 300;
  color: var(--espresso); outline: none; transition: border .2s, box-shadow .2s;
  width: 100%; appearance: none;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,151,58,.12);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-mute); }
.field textarea { resize: vertical; min-height: 100px; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a2f1a' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; }

/* ══ FOOTER ══ */
footer {
  background: var(--espresso); color: var(--cream);
  padding: 72px 0 40px;
}
.footer-in { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 56px; margin-bottom: 56px; }
.footer-logo { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cream); margin-bottom: 14px; }
.footer-logo span { color: var(--gold); }
.footer-brand p { font-size: 13px; font-weight: 300; color: rgba(245,240,232,.45); line-height: 1.8; max-width: 240px; }
.footer-socials { display: flex; gap: 8px; margin-top: 20px; }
.social-btn { width: 36px; height: 36px; border-radius: 8px; background: rgba(245,240,232,.06); border: 1px solid rgba(245,240,232,.1); display: flex; align-items: center; justify-content: center; font-size: 14px; color: rgba(245,240,232,.45); transition: all .2s; cursor: pointer; }
.social-btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(201,151,58,.1); }
.footer-col h4 { font-size: 9px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
.footer-col a { display: block; font-size: 13px; font-weight: 300; color: rgba(245,240,232,.5); margin-bottom: 10px; transition: color .2s; }
.footer-col a:hover { color: var(--cream); }
.footer-bottom { border-top: 1px solid rgba(245,240,232,.08); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-bottom p { font-size: 12px; color: rgba(245,240,232,.3); font-weight: 300; }
.footer-bottom-links { display: flex; gap: 24px; }
.footer-bottom-links a { font-size: 12px; color: rgba(245,240,232,.3); transition: color .2s; }
.footer-bottom-links a:hover { color: rgba(245,240,232,.6); }

/* ══ COOKIE BANNER ══ */
#cookie-banner {
  position: fixed; bottom: 24px; left: 24px; right: 24px; z-index: 9000;
  max-width: 500px;
  background: var(--espresso); color: var(--cream);
  border-radius: var(--r2); padding: 24px 28px;
  box-shadow: 0 24px 56px rgba(26,16,8,.5);
  transform: translateY(100px); opacity: 0;
  transition: all .45s cubic-bezier(.34,1.3,.64,1);
}
#cookie-banner.show { transform: none; opacity: 1; }
.ck-title { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 500; margin-bottom: 8px; }
.ck-text { font-size: 13px; font-weight: 300; color: rgba(245,240,232,.6); line-height: 1.65; margin-bottom: 16px; }
.ck-text a { color: var(--gold-light); }
.ck-btns { display: flex; gap: 10px; }
.ck-accept { background: var(--gold); color: var(--espresso); border: none; border-radius: 7px; padding: 9px 20px; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: all .2s; }
.ck-accept:hover { background: var(--gold-light); }
.ck-decline { background: none; color: rgba(245,240,232,.4); border: 1px solid rgba(245,240,232,.15); border-radius: 7px; padding: 9px 20px; font-family: 'DM Sans', sans-serif; font-size: 12px; cursor: pointer; transition: all .2s; }
.ck-decline:hover { color: rgba(245,240,232,.7); }

/* ══ PAGE LOADER ══ */
#page-loader { position: fixed; inset: 0; z-index: 9999; background: var(--warm-white); display: flex; align-items: center; justify-content: center; transition: opacity .5s, visibility .5s; }
#page-loader.done { opacity: 0; visibility: hidden; }
.loader-mark { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--espresso); animation: loaderFade 1.2s ease-in-out infinite; }
.loader-mark span { color: var(--gold); }
@keyframes loaderFade { 0%,100%{opacity:.3} 50%{opacity:1} }

/* ══ PAGE HERO (inner pages) ══ */
.page-hero {
  padding: calc(var(--nav-h) + 72px) 0 72px;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; top: 0; right: 0; width: 40%; height: 100%;
  background: linear-gradient(135deg, transparent, rgba(201,151,58,.06));
  pointer-events: none;
}

/* ══ BADGES ══ */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; }
.badge-gold { background: var(--gold-dim); color: var(--caramel); border: 1px solid rgba(201,151,58,.2); }
.badge-dark { background: rgba(26,16,8,.07); color: var(--text-soft); border: 1px solid var(--border); }

/* ══ SERVICE CARD ══ */
.srv-card {
  background: var(--warm-white); border: 1px solid var(--border);
  border-radius: var(--r2); overflow: hidden;
  transition: transform .3s, box-shadow .3s, border-color .3s;
  display: flex; flex-direction: column;
}
.srv-card:hover { transform: translateY(-5px); box-shadow: 0 24px 48px rgba(26,16,8,.1); border-color: var(--border2); }
.srv-card-img { height: 200px; background: var(--cream2); display: flex; align-items: center; justify-content: center; font-size: 52px; position: relative; overflow: hidden; }
.srv-card-img-bg { position: absolute; inset: 0; }
.srv-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.srv-card-name { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 500; color: var(--espresso); line-height: 1.2; }
.srv-card-desc { font-size: 13px; font-weight: 300; color: var(--text-soft); line-height: 1.7; flex: 1; }
.srv-card-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.srv-card-price { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; color: var(--espresso); }
.srv-card-dur { font-size: 11px; color: var(--text-mute); letter-spacing: .06em; }
.srv-card-footer { padding: 16px 24px; border-top: 1px solid var(--border); background: var(--cream); }

/* ══ TOAST ══ */
#toast { position: fixed; bottom: 24px; right: 24px; z-index: 8000; background: var(--espresso); color: var(--cream); border-radius: var(--r); padding: 14px 20px; font-size: 13px; transform: translateY(80px); opacity: 0; transition: all .3s; box-shadow: 0 8px 28px rgba(26,16,8,.3); }
#toast.show { transform: none; opacity: 1; }

/* ══ RESPONSIVE ══ */
@media (max-width: 960px) {
  .wrap { padding: 0 28px; }
  .section { padding: 72px 0; }
  .nav-links, .nav-book { display: none; }
  .nav-ham { display: flex; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 20px; }
  .section { padding: 56px 0; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-in { padding: 0 20px; }
}