:root {
    --gold: #d4af37; --gold-light: #f5d76e; --gold-dark: #8a7322;
    --black: #050505; --darker: #0a0a0a; --dark: #121212; --gray-1: #1e1e1e;
    --text-wt: #ffffff; --text-muted: #888888;
    --font-head: 'Cinzel', serif; --font-body: 'Jost', sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; cursor: none;}
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background-color: var(--black); color: var(--text-muted); line-height: 1.6; font-size: 16px;}
a { text-decoration: none; color: inherit; cursor: none;}

/* Custom Cursor */
.cursor-dot { width: 5px; height: 5px; background: var(--gold); border-radius: 50%; position: fixed; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: width 0.2s, height 0.2s; }
.cursor-ring { width: 40px; height: 40px; border: 1px solid rgba(212,175,55,0.5); border-radius: 50%; position: fixed; pointer-events: none; z-index: 9998; transform: translate(-50%, -50%); transition: 0.1s ease-out; }
a:hover ~ * .cursor-dot { width: 15px; height: 15px; }

/* Utilities */
.container { max-width: 1300px; margin: 0 auto; padding: 0 4%; }
.section-padding { padding: clamp(80px, 12vw, 160px) 0; }
.bg-black { background-color: var(--black); } .bg-darker { background-color: var(--darker); } .bg-dark { background-color: var(--dark); }
.text-gold { color: var(--gold); } .text-white { color: var(--text-wt); }
.center { text-align: center; } .mt-3 { margin-top: 15px; } .mt-4 { margin-top: 30px; } .mt-5 { margin-top: 50px; } .mb-2 { margin-bottom: 10px; } .mb-4 { margin-bottom: 25px; } .mb-5 { margin-bottom: 50px; }
.d-flex { display: flex; } .justify-between { justify-content: space-between; } .align-center { align-items: center; } .gap-3 { gap: 20px; } .w-50 { width: 50%; } .w-100 { width: 100%; } .me-2 { margin-right: 10px; }
.font-20 { font-size: 20px; font-family: var(--font-head); } .font-18 { font-size: 18px; font-family: var(--font-head); }

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--text-wt); line-height: 1.1; font-weight: 500;}
.sub-heading { display: block; color: var(--gold); text-transform: uppercase; letter-spacing: 4px; font-size: 0.8rem; margin-bottom: 20px; font-weight: 500;}
.section-title { font-size: clamp(2rem, 4vw, 3.5rem); margin-bottom: 25px; }
.body-text { font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.8; color: var(--text-muted); }
.separator-line { width: 1px; height: 60px; background: var(--gold); margin: 0 auto; }

/* Buttons */
.btn-primary { display: inline-block; padding: 18px 45px; background: var(--gold); color: #000; font-family: var(--font-body); text-transform: uppercase; letter-spacing: 2px; font-size: 0.85rem; font-weight: 500; transition: 0.4s; border: 1px solid var(--gold);}
.btn-primary:hover { background: transparent; color: var(--gold); }
.btn-primary-outline { display: inline-block; padding: 14px 30px; background: transparent; color: var(--gold); font-family: var(--font-body); text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem; font-weight: 500; transition: 0.4s; border: 1px solid rgba(212,175,55,0.4); }
.btn-primary-outline:hover { background: var(--gold); color: #000; }
.btn-text { color: var(--gold); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid transparent; padding-bottom: 3px; transition: 0.3s;}
.btn-text:hover { border-bottom-color: var(--gold); gap: 12px;}

/* Navbar */
.nav-ultra { position: fixed; top: 0; width: 100%; padding: 35px 4%; z-index: 100; transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.nav-ultra.scrolled { padding: 15px 4%; background: rgba(5,5,5,0.95); backdrop-filter: blur(15px); border-bottom: 1px solid rgba(255,255,255,0.05); }
.nav-inner { display: flex; justify-content: space-between; align-items: center; max-width: 1400px; margin: 0 auto; }
.brand-logotype { font-family: var(--font-head); font-size: clamp(1.5rem, 2vw, 2rem); color: var(--text-wt); letter-spacing: 2px; }
.nav-links { display: flex; gap: 40px; align-items: center; }
.nav-hover { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-wt); position: relative; }
.nav-hover::after { content:''; position:absolute; bottom:-5px; left:0; width:0%; height:1px; background:var(--gold); transition:0.3s; }
.nav-hover:hover::after { width:100%; }

/* Hero Split */
.hero-split { display: flex; min-height: 100vh; background: var(--black); }
.hero-text-side { flex: 1.2; display: flex; align-items: center; padding: 0 5%; position: relative; z-index: 2;}
.content-wrapper { max-width: 600px; margin-left: auto;}
.display-title { font-size: clamp(3rem, 6vw, 5.5rem); margin-bottom: 30px; }
.description { font-size: 1.1rem; color: #a0a0a0; margin-bottom: 40px; font-weight: 300; line-height: 1.8;}
.hero-image-side { flex: 1; position: relative; }
.image-mask { position: absolute; top:0; left:0; width:100%; height:100%; clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%); }
.image-mask img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7) contrast(1.1); }
.hero-stats { display: flex; gap: 50px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 30px; }
.stat-num { display: block; font-family: var(--font-head); font-size: 2.5rem; color: var(--gold); line-height: 1;}
.stat-lbl { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: #777; margin-top: 10px; display: block;}

/* Auto Grid (About) */
.auto-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 8%; align-items: center; max-width: 1400px; margin: 0 auto; padding-left:4%; padding-right:4%;}
.image-composition { position: relative; }
.img-large img { width: 90%; height: auto; object-fit: cover; }
.img-small { position: absolute; bottom: -50px; right: 0; width: 55%; z-index: 2;}
.img-small img { border: 15px solid var(--darker); }
.gold-box { position: absolute; top: -30px; left: -30px; width: 60%; height: 60%; border: 1px solid var(--gold); z-index: -1; }
.list-lux { list-style: none; margin-top: 30px; }
.list-lux li { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; font-family: var(--font-head); font-size: 1.1rem; color: #fff;}
.list-lux li::before { content: ''; width: 30px; height: 1px; background: var(--gold); }

/* Custom Grid (Services) */
.custom-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 40px; }
.card-lux { background: var(--black); border: 1px solid rgba(255,255,255,0.05); transition: 0.5s; }
.card-lux:hover { border-color: rgba(212,175,55,0.3); transform: translateY(-10px); }
.card-img { height: 450px; overflow: hidden; position: relative;}
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: 1s ease; filter: grayscale(20%);}
.card-lux:hover .card-img img { transform: scale(1.05); filter: grayscale(0%);}
.img-fade { position: absolute; bottom:0; left:0; width:100%; height:50%; background: linear-gradient(transparent, var(--black)); z-index: 1;}
.card-content { padding: 40px; position: relative; z-index: 2; margin-top: -60px;}
.card-title { font-size: 1.5rem; }
.card-price { color: var(--gold); font-family: var(--font-body); letter-spacing: 1px;}
.card-desc { font-size: 0.95rem; line-height: 1.7; margin-bottom: 25px; color: #777;}

/* Booking */
.flex-container { display: flex; min-height: 700px; }
.booking-aesthetic { flex: 1; background: url('https://images.unsplash.com/photo-1522337660859-02fbefca4702?auto=format&fit=crop&w=800') center/cover; position: relative; }
.glass-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(10,10,10,0.85); backdrop-filter: blur(5px); display: flex; flex-direction: column; justify-content: center; padding: 10%; border-right: 1px solid rgba(255,255,255,0.05);}
.booking-form-area { flex: 1; background: var(--dark); padding: 8% 6%; display: flex; flex-direction: column; justify-content: center;}
.form-title { font-size: 2rem; letter-spacing: 1px; color: var(--gold);}
.form-group { margin-bottom: 25px; }
.form-group label { display: block; margin-bottom: 12px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: #888; }
.input-ultra { width: 100%; padding: 16px 0; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.1); color: #fff; font-family: var(--font-body); font-size: 1.1rem; transition: 0.3s; outline: none; border-radius: 0;}
.input-ultra:focus { border-bottom-color: var(--gold); }
.select-wrapper { position: relative; }
.select-wrapper::after { content: '\f107'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--gold); pointer-events: none;}
select.input-ultra { appearance: none; cursor: none;}
.msg-box { padding: 15px; display: none; text-align: center; border: 1px solid; font-size: 0.9rem;}
.msg-box.success { display: block; background: rgba(212, 175, 55, 0.05); border-color: var(--gold); color: var(--gold); }
.msg-box.error { display: block; background: rgba(255,0,0,0.05); color: #ff5555; border-color: #ff5555; }

/* Footer */
.footer-ultra { padding: 100px 0 40px; border-top: 1px solid rgba(255,255,255,0.05); }
.socials a { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border: 1px solid rgba(255,255,255,0.1); border-radius: 50%; color: #fff; margin: 0 10px; transition: 0.3s; }
.socials a:hover { background: var(--gold); border-color: var(--gold); color: #000; }
.footer-bottom { margin-top: 60px; font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; color: #555; }

@media (max-width: 900px) {
    .hero-split, .auto-grid, .flex-container { flex-direction: column; display: flex;}
    .image-mask { clip-path: none; height: 50vh;}
    .hero-text-side { padding: 120px 5% 50px; }
    .display-title { font-size: 3.5rem; }
    .auto-grid { gap: 60px; }
    .img-small { position: static; width: 100%; margin-top: -50px;}
    .nav-links { display: none; }
}


/* -------------------------------- */
/* GLOBAL MOBILE OPTIMIZATION PATCH */
/* -------------------------------- */
@media (max-width: 900px) {
    /* Padding & Spacing reductions */
    .section, .section-padding, .section-clean, .section-brutal, .section-leaf, .section-glam { padding: 50px 0 !important; }
    .pb-10, .pb-5 { padding-bottom: 60px !important; }
    .mt-5, .mb-5 { margin-top: 30px !important; margin-bottom: 30px !important; }
    
    /* Typography compression */
    body { font-size: 15px !important; }
    .display-title, .title-clean, .title-clean.text-lg, .giant-text, .title-leaf, .title-glam { font-size: 2.2rem !important; line-height: 1.15 !important; margin-bottom: 15px !important;}
    .brand-logotype, .brand-clean, .brand-brutal, .brand-leaf, .brand-glam { font-size: 1.25rem !important; }
    .hero-title { font-size: 2.5rem !important; }
    
    /* Forms & Inputs Expansion */
    .w-50 { width: 100% !important; margin-bottom: 15px !important;}
    .d-flex[style*="gap"] { flex-wrap: wrap !important; gap: 15px !important; }
    .glassmorphism-form, .book-card, .book-form, .form-brutal, .booking-info, .booking-form { padding: 25px 20px !important; border-radius: 12px !important; width: 100% !important; margin: 0 !important;}
    input[type="date"], input[type="time"] { width: 100% !important; margin-bottom: 10px !important;}
    
    /* Nav simplification */
    .nav-links a:not([class*="btn"]) { display: none !important; }
    .nav-inner, .nav-wrap, .d-flex.justify-between { flex-direction: row !important; }
    
    /* Layouts unwrapping */
    .auto-grid, .hero-grid, .custom-grid, .svc-grid, .row, .rituals-grid, .form-grid, .grid-3, .about-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
    .hero-split, .flex-container, .book-wrapper, #focus { flex-direction: column !important; }
    
    /* Image containment */
    .hero-image-side, .hero-img-stack, .focus-img, .hero-images { height: auto !important; min-height: 250px; overflow: hidden; margin-top: 20px;}
    .img-1 { right: 0; width: 100% !important; position: relative !important; height: 300px !important; }
    .img-2 { display: none !important; }
    .img-small, .img-sm, .reveal-img, .img-float { display: none !important; }
    .image-mask { clip-path: none !important; height: 100% !important; }
    
    /* Center alignments for mobile hero */
    .hero-text-side, .hero-txt, .hero-title-wrap, .hero-text { padding: 100px 5% 40px !important; text-align: center !important; }
    .content-wrapper { margin: 0 auto !important; }
    .hero-stats { flex-direction: column !important; gap: 15px !important; border-top: none !important;}
}