:root {
    --black: #000000; --white: #ffffff; --red: #e60000; --gray: #dedede; --dark-gray: #111111;
    --font-head: 'Oswald', sans-serif; --font-body: 'Inter', sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: var(--font-body); background-color: var(--white); color: var(--black); overflow-x: hidden; position:relative;}
a { text-decoration: none; color: inherit; }

/* Grid Lines */
.line-v { position: fixed; top: 0; bottom: 0; width: 1px; background: rgba(0,0,0,0.1); z-index: -1;}
.line-1 { left: 25%; } .line-2 { right: 25%; }

.container { max-width: 1400px; margin: 0 auto; padding: 0 5%; }
.d-flex { display: flex; } .justify-between { justify-content: space-between; } .align-center { align-items: center; }
.w-50 { width: 50%; } .w-100 { width: 100%; } .mt-3 { margin-top: 15px; } .mt-4 { margin-top: 30px; } .p-5 { padding: 50px; }
.bg-black { background-color: var(--black); } .bg-white { background-color: var(--white); } .text-white { color: var(--white); }
.font-inter { font-family: var(--font-body); } .bold { font-weight: 800; }

.section-brutal { padding: 100px 0; }
.border-top { border-top: 2px solid var(--black); }

/* Typography */
.giant-text { font-family: var(--font-head); font-size: clamp(4rem, 10vw, 9rem); text-transform: uppercase; line-height: 0.85; margin: 0; padding: 0;}
.sub-brutal { font-family: var(--font-body); font-weight: 800; font-size: 1.2rem; letter-spacing: 2px;}

/* Navbar */
.nav-brutal { padding: 25px 0; border-bottom: 2px solid var(--black); background: var(--white); }
.brand-brutal { font-family: var(--font-head); font-size: 2rem; font-weight: 700; letter-spacing: 1px; }
.btn-brutal { display: inline-block; padding: 15px 30px; border: 2px solid var(--black); font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; transition: 0.2s; background: transparent; cursor: pointer; color: var(--black);}
.btn-brutal:hover { background: var(--red); border-color: var(--red); color: var(--white); }

/* Hero */
.hero-brutal { min-height: 90vh; padding-top: 5vh; display: flex; flex-direction: column; justify-content: space-between;}
.hero-title-wrap { padding: 0 5%; flex: 1; display: flex; flex-direction: column; justify-content: center;}
.marquee-wrap { width: 100%; background: var(--black); color: var(--white); padding: 15px 0; overflow: hidden; white-space: nowrap; border-top: 2px solid var(--black); border-bottom: 2px solid var(--black);}
.marquee-inner { display: inline-block; animation: marquee 20s linear infinite; font-family: var(--font-head); font-size: 1.5rem; letter-spacing: 2px; }
.marquee-inner span { padding-right: 50px; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Focus */
#focus { align-items: stretch; border-bottom: 2px solid var(--black); padding: 0;}
.focus-img { width: 50%; border-right: 2px solid var(--black); }
.focus-img img { width: 100%; height: 600px; object-fit: cover; display: block; filter: grayscale(100%); transition: 0.5s; }
.focus-img:hover img { filter: grayscale(0%); }
.focus-txt { width: 50%; padding: 80px; display: flex; flex-direction: column; justify-content: center; }
.focus-txt p { font-size: 1.5rem; font-weight: 600; line-height: 1.4; margin-top: 30px; letter-spacing: -0.5px;}

/* Services List (Hover reveal) */
.svc-list { border-top: 2px solid var(--black); }
.svc-item { display: flex; justify-content: space-between; align-items: center; padding: 40px 0; border-bottom: 2px solid var(--black); position: relative; cursor: pointer; transition: 0.3s; }
.svc-item:hover { padding-left: 20px; padding-right: 20px; background: var(--dark-gray); color: var(--white); }
.svc-info h3 { font-family: var(--font-head); font-size: 3rem; text-transform: uppercase; }
.svc-desc { font-weight: 600; color: #888; margin-top: 5px; }
.svc-price { font-family: var(--font-head); font-size: 2rem; }
.reveal-img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); width: 400px; height: 300px; pointer-events: none; opacity: 0; transition: 0.4s; z-index: 10;}
.reveal-img img { width: 100%; height: 100%; object-fit: cover; }
.svc-item:hover .reveal-img { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-5deg); box-shadow: 0 20px 40px rgba(0,0,0,0.5);}

/* Form */
.form-brutal { border-left: 2px solid var(--black); }
.inp-brutal { width: 100%; padding: 20px 0; border: none; border-bottom: 2px solid var(--black); background: transparent; font-family: var(--font-body); font-weight: 800; font-size: 1.2rem; color: var(--black); margin-bottom: 20px; outline: none; border-radius: 0; appearance: none;}
.inp-brutal:focus { border-bottom-color: var(--red); }

@media(max-width: 900px) {
    .giant-text { font-size: 4rem; }
    #focus.d-flex, .wrap-sm { flex-direction: column; }
    .focus-img, .focus-txt, .w-50 { width: 100%; border-right: none; }
    .form-brutal { border-left: none; padding: 30px 20px; }
    .focus-txt { padding: 40px 20px; }
    .reveal-img { 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;}
}