@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Jost:wght@300;400&display=swap');

/* ─── RESET ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: 'Jost', sans-serif; font-weight: 300; background: #f7f4f0; color: #1c1917; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* ─── VARIABLES ─────────────────────────────────────── */
:root {
  --cream:       #f7f4f0;
  --warm:        #ede8e1;
  --dark:        #1c1917;
  --dark2:       #141110;
  --mid:         #4a4340;
  --muted:       #6b5f56;
  --soft:        #a09386;
  --border:      #ece6df;
  --border2:     #e8e2db;
  --serif:       'Cormorant Garamond', serif;
  --sans:        'Jost', sans-serif;
  --transition:  .35s cubic-bezier(.4,0,.2,1);
  --max-w:       1440px;
  --pad-x:       60px;
}

/* ─── MAX WIDTH WRAPPER ─────────────────────────────── */
.site-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  box-shadow: 0 0 60px rgba(28,25,23,.06);
}

/* ─── CUSTOM CURSOR ─────────────────────────────────── */
body { cursor: none; }
.cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; mix-blend-mode: difference; }
.cursor-dot { width: 8px; height: 8px; background: #f7f4f0; border-radius: 50%; position: absolute; transform: translate(-50%,-50%); transition: transform .1s; }
.cursor-ring { width: 36px; height: 36px; border: 1px solid rgba(247,244,240,.6); border-radius: 50%; position: absolute; transform: translate(-50%,-50%); transition: width .22s ease, height .22s ease; }

/* ─── TYPOGRAPHY ────────────────────────────────────── */
.serif  { font-family: var(--serif); }
.eyebrow { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--soft); font-family: var(--sans); font-weight: 400; }

/* ─── NAVIGATION ────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247,244,240,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border2);
  padding: 0 var(--pad-x); height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  transition: box-shadow var(--transition);
}
.nav.scrolled { box-shadow: 0 2px 24px rgba(28,25,23,.06); }
.nav-logo .logo-name { font-family: var(--serif); font-size: 21px; font-weight: 300; letter-spacing: .14em; color: var(--dark); line-height: 1; }
.nav-logo .logo-sub  { font-size: 8px; letter-spacing: .22em; text-transform: uppercase; color: var(--soft); margin-top: 1px; }
.nav-links { display: flex; gap: 38px; align-items: center; }
.nav-links a { font-size: 12px; letter-spacing: .1em; color: var(--muted); position: relative; padding-bottom: 3px; transition: color var(--transition); }
.nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--dark); transition: width var(--transition); }
.nav-links a:hover, .nav-links a.active { color: var(--dark); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-divider { width: 1px; height: 14px; background: #d4cec8; }
.nav-lang { font-size: 11px; color: var(--soft); letter-spacing: .08em; cursor: pointer; }
.nav-lang span { transition: color var(--transition); cursor: pointer; }
.nav-lang span.active { color: var(--dark); }
.nav-lang span:hover { color: var(--dark); }

/* ─── HAMBURGER ─────────────────────────────────────── */
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; background: none; border: none; }
.hamburger span { display: block; width: 24px; height: 1px; background: var(--dark); transition: var(--transition); }
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu { display: none; position: fixed; inset: 0; z-index: 99; background: var(--dark); flex-direction: column; align-items: center; justify-content: center; gap: 36px; opacity: 0; pointer-events: none; transition: opacity var(--transition); }
.mobile-menu.open { opacity: 1; pointer-events: all; }
.mobile-menu a { font-family: var(--serif); font-size: 40px; font-weight: 300; color: var(--cream); letter-spacing: .06em; transition: color var(--transition); }
.mobile-menu a:hover { color: var(--soft); }
.mobile-menu .mobile-lang { font-size: 11px; color: var(--soft); letter-spacing: .18em; margin-top: 8px; }

/* ─── BUTTONS ───────────────────────────────────────── */
.btn { display: inline-block; font-family: var(--sans); font-weight: 300; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding: 13px 32px; border: none; cursor: pointer; transition: var(--transition); }
.btn-dark  { background: var(--dark);  color: var(--cream); }
.btn-dark:hover  { background: var(--mid); }
.btn-ghost { background: transparent; color: var(--dark); border: 1px solid rgba(28,25,23,.3); }
.btn-ghost:hover { background: var(--dark); color: var(--cream); border-color: var(--dark); }
.btn-ghost-light { background: transparent; color: var(--cream); border: 1px solid rgba(247,244,240,.4); }
.btn-ghost-light:hover { background: rgba(247,244,240,.1); }

/* ─── LINKS ─────────────────────────────────────────── */
.link-underline { font-size: 11px; letter-spacing: .12em; color: var(--dark); border-bottom: 1px solid var(--dark); padding-bottom: 2px; display: inline-block; transition: color var(--transition), border-color var(--transition); }
.link-underline:hover { color: var(--soft); border-color: var(--soft); }
.link-soft { font-size: 11px; letter-spacing: .12em; color: var(--soft); border-bottom: 1px solid var(--border); padding-bottom: 2px; display: inline-block; transition: color var(--transition), border-color var(--transition); }
.link-soft:hover { color: var(--dark); border-color: var(--dark); }

/* ─── SCROLL ANIMATIONS ─────────────────────────────── */
.reveal        { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }
.reveal-left   { opacity: 0; transform: translateX(-28px); transition: opacity .7s ease, transform .7s ease; }
.reveal-left.visible  { opacity: 1; transform: translateX(0); }
.reveal-right  { opacity: 0; transform: translateX(28px);  transition: opacity .7s ease, transform .7s ease; }
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* ─── IMAGE HOVER ───────────────────────────────────── */
.img-hover { overflow: hidden; }
.img-hover img { transition: transform .7s cubic-bezier(.4,0,.2,1), filter .5s; }
.img-hover:hover img { transform: scale(1.04); filter: brightness(.9) saturate(.85); }

/* ─── FOOTER ────────────────────────────────────────── */
footer { background: var(--dark2); padding: 22px var(--pad-x); display: flex; justify-content: space-between; align-items: center; }
.footer-logo { font-family: var(--serif); font-size: 13px; color: #4a4340; letter-spacing: .14em; }
.footer-copy { font-size: 10px; color: #3a3330; letter-spacing: .08em; }

/* ─── COOKIE BANNER ─────────────────────────────────── */
.cookie-banner { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 500; background: var(--dark); color: var(--cream); padding: 18px 28px; display: flex; align-items: center; gap: 28px; max-width: 600px; width: calc(100% - 40px); border: 1px solid #2e2825; opacity: 0; transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.cookie-banner.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: all; }
.cookie-text { font-size: 12px; font-weight: 300; color: #a09386; line-height: 1.7; flex: 1; }
.cookie-accept { background: var(--cream); color: var(--dark); border: none; padding: 9px 22px; font-family: var(--sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background var(--transition); font-weight: 400; }
.cookie-accept:hover { background: #e8e2db; }

/* ─────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  :root { --pad-x: 40px; }
}
@media (max-width: 1024px) {
  :root { --pad-x: 32px; }
}
@media (max-width: 768px) {
  :root { --pad-x: 20px; }
  body  { cursor: auto; }
  .cursor { display: none; }
  .nav  { padding: 0 20px; height: 60px; }
  .nav-links, .nav-divider, .nav-lang { display: none; }
  .hamburger { display: flex; }
  .mobile-menu { display: flex; }
  footer { padding: 18px 20px; flex-direction: column; gap: 8px; text-align: center; }
  .cookie-banner { flex-direction: column; gap: 12px; text-align: center; bottom: 14px; }
}
@media (max-width: 480px) {
  :root { --pad-x: 16px; }
}