:root {
    --bg-cream: #FAF7F2;
    --bg-sand: #F0EBE1;
    --text-dark: #1A1208;
    --text-muted: #8C7B6B;
    --accent-orange: #E8622A;
    --accent-green: #2D5016;
    --accent-yellow: #F5C842;
    --font-heading: 'Libre Baskerville', serif;
    --font-subheading: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-handwriting: 'Caveat', cursive;
    --font-cinematic: 'Bebas Neue', sans-serif; /* For the canvas loader */
    --font-nistha: 'Nistha', cursive; /* User's requested custom font */
}

@font-face {
    font-family: 'Nistha';
    src: url('./nistha.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body.dark-mode {
    --bg-cream: #121212;
    --bg-sand: #1E1E1E;
    --text-dark: #FAF7F2;
    --text-muted: #A0A0A0;
    --accent-green: #4CAF50;
    /* Other accents remain the same */
}

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background-color: var(--bg-cream);
    color: var(--text-dark);
    font-family: var(--font-body);
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: none;
}
body::-webkit-scrollbar { display: none; }
a { text-decoration: none; color: inherit; cursor: none; }
button { cursor: none; border: none; font-family: inherit; }

/* Navbar */
.wl-navbar {
    position: fixed; top: 0; left: 0; width: 100%; height: 80px;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 40px; z-index: 100000;
    background: rgba(250, 247, 242, 0.1); backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.3s;
}
body.dark-mode .wl-navbar { background: rgba(18, 18, 18, 0.5); border-bottom: 1px solid rgba(255,255,255,0.05); }
.nav-brand { font-family: var(--font-heading); font-size: 1.5rem; color: var(--text-dark); letter-spacing: 2px; }
.nav-links { display: flex; gap: 30px; }
.nav-links a { font-family: var(--font-subheading); color: var(--text-dark); text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px; transition: color 0.3s; }
.nav-links a:hover { color: var(--accent-orange); }
.nav-actions { display: flex; align-items: center; gap: 15px; }
.btn-dark-mode { background: transparent; color: var(--text-dark); font-size: 1.2rem; transition: transform 0.3s; padding: 5px; }
.btn-dark-mode:hover { transform: scale(1.1); }
.btn-login, .btn-signup { font-family: var(--font-subheading); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; padding: 10px 20px; border-radius: 50px; transition: all 0.3s; }
.btn-login { background: transparent; color: var(--text-dark); border: 1px solid var(--text-dark); }
.btn-login:hover { background: var(--text-dark); color: var(--bg-cream); }
.btn-signup { background: var(--accent-orange); color: white; border: 1px solid var(--accent-orange); }
.btn-signup:hover { background: var(--text-dark); color: var(--accent-orange); border-color: var(--text-dark); }
@media (max-width: 768px) { .nav-links { display: none; } .wl-navbar { padding: 0 20px; } }

/* Custom Airplane Cursor */
#custom-cursor {
    position: fixed; top: 0; left: 0; width: 24px; height: 24px;
    pointer-events: none; z-index: 999999;
    transform: translate(-50%, -50%);
    color: var(--accent-orange);
    transition: width 0.2s, height 0.2s, color 0.2s;
}
#custom-cursor.hover { width: 40px; height: 40px; color: var(--accent-green); }
#custom-cursor.on-orange { color: white; }
#custom-cursor svg { width: 100%; height: 100%; transform: rotate(-45deg); /* Base plane rotation */ transition: transform 0.1s ease-out; }

/* Page Load Overlay */
#page-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: var(--bg-cream); z-index: 900000;
    display: flex; justify-content: center; align-items: center;
    transition: opacity 1.5s ease-out, visibility 1.5s ease-out;
}
.overlay-brand {
    font-family: var(--font-heading); font-size: clamp(3rem, 10vw, 8rem);
    color: var(--accent-orange); letter-spacing: 5px; opacity: 0;
    animation: pulseBrand 2s ease-in-out forwards;
}
@keyframes pulseBrand { 0% { opacity: 0; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(1); } }

/* ========================================= */
/* ORIGINAL CANVAS & SCROLL ANIMATION STYLES */
/* ========================================= */
#loader { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #050505; display: flex; justify-content: center; align-items: center; z-index: 10000; transition: opacity 1s ease-out; }
.loader-content { text-align: center; width: 80%; max-width: 400px; }
.loader-content h2 { font-size: 2rem; margin-bottom: 20px; color: #f0f0f0; font-family: var(--font-cinematic); letter-spacing: 2px;}
.progress-bar-container { width: 100%; height: 2px; background-color: rgba(255, 255, 255, 0.2); margin-bottom: 15px; overflow: hidden; }
#loader-progress { width: 0%; height: 100%; background-color: #ffffff; transition: width 0.1s ease; }
#loader-text { font-size: 1rem; font-weight: 300; font-family: 'Lato', sans-serif; letter-spacing: 1px; color: white; }

#scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--accent-orange); z-index: 10000; }

#scroll-canvas { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 100vh; z-index: 1; }

.grain-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 2; background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.05"/%3E%3C/svg%3E'); }

.scroll-container { position: relative; height: 500vh; z-index: 10; }

.text-section { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -40%); text-align: center; width: 90%; max-width: 800px; opacity: 0; visibility: hidden; transition: opacity 0.8s ease, transform 0.8s ease, visibility 0.8s; pointer-events: none; }
.text-section.active { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.text-section h1 { font-size: clamp(3rem, 8vw, 6rem); margin-bottom: 20px; text-shadow: 0 10px 30px rgba(0, 0, 0, 0.8); line-height: 1; font-family: var(--font-cinematic); letter-spacing: 2px; color: white; }
.text-section p { font-size: clamp(1.2rem, 2vw, 1.5rem); font-family: 'Lato', sans-serif; font-weight: 300; text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8); color: #e0e0e0; }

.hero-title-overlay { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 5; color: white; transition: opacity 0.5s ease; pointer-events: none; width: 100%; }
.hero-title-overlay h1 { font-family: var(--font-nistha); font-size: clamp(6rem, 15vw, 15rem); letter-spacing: 5px; margin-bottom: 10px; text-shadow: 0 10px 30px rgba(0,0,0,0.5); font-weight: 400; line-height: 1; }
.hero-title-overlay p { font-family: var(--font-subheading); font-size: clamp(1rem, 2vw, 1.5rem); letter-spacing: 5px; text-transform: uppercase; text-shadow: 0 5px 15px rgba(0,0,0,0.5); }

/* ========================================= */
/* WANDERLUX EDITORIAL REDESIGN              */
/* ========================================= */

#wanderlux-content { position: relative; z-index: 20; background-color: var(--bg-cream); }
.container { max-width: 1400px; margin: 0 auto; padding: 0 40px; }

/* Utilities & Animations */
.desaturate { filter: grayscale(100%); transition: filter 1s ease; }
.desaturate.in-view { filter: grayscale(0%); }

.word-reveal-target span {
    display: inline-block; clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
    transform: translateY(20px); transition: clip-path 0.8s ease, transform 0.8s ease;
}
.word-reveal-target.is-visible span { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: translateY(0); }

/* --- SEC 1: EDITORIAL MOSAIC --- */
.wl-editorial { position: relative; padding: 150px 0; overflow: hidden; }
.bg-watermark { position: absolute; left: -50px; top: 10%; font-family: var(--font-subheading); font-size: 400px; font-weight: 700; color: #1A1208; opacity: 0.03; transform: rotate(-90deg); transform-origin: left top; pointer-events: none; z-index: 0; line-height: 0.8; }
.ed-container { max-width: 1600px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 1; }
.ed-header { margin-bottom: 60px; max-width: 800px; }
.ed-subtitle { font-family: var(--font-subheading); color: var(--accent-orange); font-size: 1rem; font-weight: 600; letter-spacing: 3px; display: block; margin-bottom: 20px; }
.ed-title { font-family: var(--font-heading); font-size: clamp(4rem, 8vw, 6rem); line-height: 1.1; color: var(--text-dark); margin-bottom: 0; z-index: 10; position: relative; }
.ed-mosaic { display: grid; grid-template-columns: 1.8fr 1fr; gap: 40px; margin-top: -60px; }
.ed-card { position: relative; }
.ed-img-wrap { width: 100%; height: 100%; overflow: hidden; }
.ed-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.ed-card:hover .ed-img-wrap img { transform: scale(1.05); }
.ed-large .ed-img-wrap { height: 750px; }
.ed-small .ed-img-wrap { height: 355px; }
.ed-right-stack { display: flex; flex-direction: column; gap: 40px; }
.ed-wide { grid-column: 1 / -1; margin-top: 40px; }
.ed-wide .ed-img-wrap { height: 500px; }
.ed-card-content { position: absolute; bottom: 30px; left: 30px; right: 30px; }
.ed-huge-num { font-family: var(--font-heading); font-size: 8rem; color: white; opacity: 0.5; position: absolute; bottom: 20px; left: -10px; z-index: 1; line-height: 1; font-weight: 700; text-shadow: 0 4px 15px rgba(0,0,0,0.3); }
.ed-info { position: relative; z-index: 2; padding-left: 20px; }
.ed-name { font-family: var(--font-heading); font-size: 2.5rem; color: white; margin-bottom: 5px; display: inline-block; position: relative; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.hover-underline .ed-name::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 3px; background: var(--accent-orange); transition: width 0.4s ease; }
.hover-underline:hover .ed-name::after { width: 100%; }
.ed-desc { color: rgba(255,255,255,0.9); font-size: 1.1rem; margin-bottom: 10px; font-family: var(--font-subheading); text-shadow: 0 1px 5px rgba(0,0,0,0.5); }
.ed-meta { font-family: var(--font-subheading); font-size: 0.9rem; font-weight: 600; text-transform: uppercase; color: white; }
.ed-price { color: var(--accent-orange); margin-left: 15px; }

/* --- SEC 2: BRAND STATEMENT --- */
.wl-brand { background-color: var(--accent-orange); padding: 150px 0; text-align: center; color: white; }
.brand-title { font-family: var(--font-heading); font-size: clamp(4rem, 8vw, 7.5rem); line-height: 1.1; margin-bottom: 30px; padding: 0 20px; }
.brand-promise { font-family: var(--font-subheading); font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: 300; margin-bottom: 80px; }
.brand-stats { display: flex; justify-content: center; align-items: center; max-width: 1200px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(255,255,255,0.3); padding: 40px 0; }
.b-stat { flex: 1; text-align: center; }
.b-divider { width: 1px; height: 60px; background-color: rgba(255,255,255,0.3); }
.b-num, .b-plus { font-family: var(--font-heading); font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 700; }
.b-label { display: block; font-family: var(--font-subheading); font-size: 1rem; text-transform: uppercase; letter-spacing: 2px; margin-top: 10px; opacity: 0.9; }

/* --- SEC 3: CATEGORIES --- */
.wl-categories { padding: 120px 0; background: var(--bg-cream); }
.cat-subtitle { font-family: var(--font-subheading); color: var(--accent-green); font-size: 1rem; font-weight: 600; letter-spacing: 3px; display: block; margin-bottom: 15px; }
.cat-title { font-family: var(--font-heading); font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1.1; color: var(--text-dark); margin-bottom: 50px; }
.cat-strip-wrapper { width: 100%; overflow-x: auto; padding: 0 40px 40px 40px; scrollbar-width: none; }
.cat-strip-wrapper::-webkit-scrollbar { display: none; }
.cat-strip { display: flex; gap: 20px; width: max-content; }
.cat-pill { padding: 20px 40px; border-radius: 50px; border: 2px solid var(--text-dark); background: transparent; color: var(--text-dark); font-family: var(--font-subheading); font-size: 1.2rem; font-weight: 600; transition: all 0.3s; }
.cat-pill:hover { border-color: var(--accent-green); color: var(--accent-green); }
.cat-pill.active { background: var(--accent-green); border-color: var(--accent-green); color: white; }
.cat-accordion { margin-top: 20px; }
.cat-panel { display: none; animation: fadeIn 0.5s ease; }
.cat-panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.panel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.panel-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.panel-img { height: 250px; overflow: hidden; margin-bottom: 20px; border-radius: 4px; }
.panel-img img { width: 100%; height: 100%; object-fit: cover; }
.panel-card h4 { font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: 10px; }
.panel-card p { font-family: var(--font-subheading); color: var(--accent-orange); font-weight: 600; }

/* --- SEC 4: PROCESS DIAGONAL --- */
.wl-process { background: var(--text-dark); color: white; position: relative; margin-top: 100px; padding-bottom: 150px; }
.process-cut { position: absolute; top: 0; left: 0; width: 100%; height: 10vw; background: var(--bg-cream); clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%); z-index: 2; }
.process-content { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding-top: calc(10vw + 80px); }
.process-left { position: relative; }
.process-title { font-family: var(--font-heading); font-size: clamp(3.5rem, 6vw, 5.5rem); line-height: 1.1; margin-bottom: 60px; }
.compass-svg { width: 250px; height: 250px; color: var(--accent-orange); opacity: 0.8; }
.compass-path { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 2s ease; }
.compass-path.drawn { stroke-dashoffset: 0; }
.process-right { display: flex; flex-direction: column; gap: 40px; padding-top: 40px; }
.p-step { position: relative; padding-left: 20px; border-left: 1px solid rgba(255,255,255,0.2); }
.p-huge { font-family: var(--font-heading); font-size: 5rem; font-weight: 700; color: white; opacity: 0.05; position: absolute; top: -30px; left: -10px; z-index: 1; line-height: 1; }
.p-info { position: relative; z-index: 2; }
.p-info h3 { font-family: var(--font-subheading); font-size: 1.8rem; margin-bottom: 10px; }
.p-info p { font-family: var(--font-body); font-size: 1.1rem; color: rgba(255,255,255,0.6); }

/* --- SEC 5: PRICING --- */
.wl-pricing { background: var(--bg-sand); padding: 150px 0; }
.pricing-title { font-family: var(--font-heading); font-size: clamp(3.5rem, 6vw, 5rem); line-height: 1.1; text-align: center; color: var(--text-dark); margin-bottom: 20px; }
.pricing-underline { width: 300px; height: 20px; color: var(--accent-orange); margin: 0 auto 80px auto; display: block; }
.pricing-wrapper { max-width: 1400px; margin: 0 auto; }
.pkg-strip { border-bottom: 1px solid rgba(26, 18, 8, 0.1); border-top: 1px solid rgba(26, 18, 8, 0.1); margin-top: -1px; transition: background 0.3s; }
.pkg-inner { display: flex; align-items: center; justify-content: space-between; padding: 50px 40px; }
.pkg-strip.highlighted { background: var(--accent-orange); color: white; position: relative; z-index: 2; box-shadow: 0 20px 40px rgba(232, 98, 42, 0.2); border: none; }
.pkg-left { display: flex; align-items: center; gap: 30px; flex: 1.2; }
.pkg-num { font-family: var(--font-heading); font-size: 5rem; opacity: 0.1; font-weight: 700; line-height: 1; }
.pkg-strip.highlighted .pkg-num { color: white; opacity: 0.2; }
.pkg-name-wrap h3 { font-family: var(--font-heading); font-size: 2.2rem; margin-bottom: 5px; }
.pkg-tag { font-family: var(--font-handwriting); font-size: 1.5rem; color: var(--accent-orange); }
.pkg-strip.highlighted .pkg-tag { color: var(--accent-yellow); }
.pkg-mid { flex: 2; font-family: var(--font-subheading); font-size: 1.1rem; line-height: 1.8; padding: 0 40px; }
.pkg-right { flex: 1; text-align: right; }
.pkg-price { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 700; color: var(--accent-orange); margin-bottom: 15px; }
.pkg-strip.highlighted .pkg-price { color: var(--accent-yellow); }
.pkg-pp { font-family: var(--font-subheading); font-size: 1rem; font-weight: 400; color: var(--text-muted); margin-left: 5px; }
.pkg-strip.highlighted .pkg-pp { color: rgba(255,255,255,0.8); }

.btn-orange, .btn-dark { display: inline-flex; align-items: center; padding: 15px 30px; font-family: var(--font-subheading); font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s; }
.btn-orange { background: var(--accent-orange); color: white; }
.btn-orange:hover { background: var(--text-dark); }
.btn-dark { background: var(--text-dark); color: white; }
.btn-dark:hover { background: var(--bg-cream); color: var(--text-dark); }
.fly-icon { margin-left: 10px; display: inline-block; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.btn-orange:hover .fly-icon, .btn-dark:hover .fly-icon { transform: translate(15px, -15px) scale(1.2); }

/* --- SEC 6: SCRAPBOOK GALLERY --- */
.wl-gallery { padding: 150px 0; background: var(--bg-cream); overflow: hidden; }
.gallery-title { font-family: var(--font-heading); font-size: clamp(4rem, 8vw, 6rem); line-height: 1.1; margin-bottom: 100px; z-index: 10; position: relative; }
.outline-text { color: transparent; -webkit-text-stroke: 2px var(--text-dark); }
.scrapbook-container { position: relative; height: 1200px; width: 100%; max-width: 1400px; margin: 0 auto; }
.scrap-item { position: absolute; background: white; padding: 15px 15px 60px 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: transform 0.4s ease, box-shadow 0.4s ease, z-index 0s; transform-origin: top center; z-index: 1; }
.scrap-item:hover { transform: rotate(0deg) scale(1.05) !important; box-shadow: 0 25px 50px rgba(0,0,0,0.2); z-index: 100; }
.polaroid-frame { width: 100%; height: auto; overflow: hidden; }
.polaroid-frame img { width: 100%; display: block; }
.scrap-pin { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; z-index: 2; opacity: 0.8; }
.scrap-cap { position: absolute; bottom: 20px; left: 0; width: 100%; text-align: center; font-family: var(--font-handwriting); font-size: 1.8rem; color: var(--text-dark); }

/* Rotations */
.rot-1 { transform: rotate(2deg); }
.rot-2 { transform: rotate(4deg); }
.rot-3 { transform: rotate(6deg); }
.rot-4 { transform: rotate(8deg); }
.rot-n1 { transform: rotate(-2deg); }
.rot-n2 { transform: rotate(-4deg); }
.rot-n3 { transform: rotate(-6deg); }
.rot-n4 { transform: rotate(-8deg); }

/* Positions */
.pos-1 { top: 5%; left: 5%; width: 300px; }
.pos-2 { top: 8%; left: 35%; width: 250px; }
.pos-3 { top: 5%; right: 10%; width: 320px; }
.pos-4 { top: 38%; left: 8%; width: 280px; }
.pos-5 { top: 32%; left: 45%; width: 350px; }
.pos-6 { top: 40%; right: 5%; width: 260px; }
.pos-7 { top: 68%; left: 12%; width: 310px; }
.pos-8 { top: 65%; left: 50%; width: 290px; }
.pos-9 { top: 72%; right: 12%; width: 330px; }
.pos-10 { top: 20%; right: 32%; width: 240px; }
.pos-11 { top: 52%; left: 32%; width: 270px; }
.pos-12 { top: 82%; left: 35%; width: 300px; }
.pos-13 { top: 22%; left: 22%; width: 260px; }
.pos-14 { top: 58%; right: 28%; width: 280px; }

/* --- SEC 7: TESTIMONIALS --- */
.wl-testimonials { background: white; padding: 150px 0; }
.pull-quote-wrapper { text-align: center; max-width: 1000px; margin: 0 auto 100px auto; position: relative; }
.q-mark { position: absolute; font-family: var(--font-heading); font-size: 15rem; color: var(--accent-orange); opacity: 0.1; line-height: 0; top: 80px; }
.q-mark.left { left: -50px; }
.q-mark.right { right: -50px; }
.pull-quote { font-family: var(--font-heading); font-size: clamp(3rem, 5vw, 4.5rem); color: var(--text-muted); line-height: 1.2; margin-bottom: 30px; position: relative; z-index: 2; }
.quote-author { font-family: var(--font-subheading); font-size: 1.2rem; font-weight: 600; color: var(--text-dark); text-transform: uppercase; letter-spacing: 1px; }
.test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; border-top: 1px solid var(--bg-sand); padding-top: 80px; }
.t-card { padding: 20px; }
.t-head { display: flex; align-items: center; gap: 20px; margin-bottom: 25px; }
.t-circle { width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-family: var(--font-heading); font-size: 1.5rem; color: white; }
.c-orange { background: var(--accent-orange); }
.c-green { background: var(--accent-green); }
.c-yellow { background: var(--accent-yellow); color: var(--text-dark); }
.t-meta h4 { font-family: var(--font-subheading); font-size: 1.2rem; font-weight: 700; margin-bottom: 5px; }
.t-meta span { font-family: var(--font-subheading); font-size: 0.8rem; color: var(--accent-orange); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.t-text { font-family: var(--font-heading); font-size: 1.3rem; font-style: italic; color: var(--text-muted); line-height: 1.6; }

/* --- SEC 8: BLOG --- */
.wl-blog { background: var(--bg-cream); padding: 150px 0; border-top: 1px solid var(--text-dark); border-bottom: 1px solid var(--text-dark); }
.blog-header { display: flex; align-items: flex-start; gap: 30px; margin-bottom: 80px; }
.b-accent-rect { width: 20px; height: 100px; background: var(--accent-orange); margin-top: 10px; }
.blog-title { font-family: var(--font-heading); font-size: clamp(3.5rem, 6vw, 5rem); line-height: 1.1; margin-bottom: 10px; }
.blog-subtitle { font-family: var(--font-subheading); font-size: 1.2rem; color: var(--text-muted); }
.news-layout { display: grid; grid-template-columns: 55% 1fr; gap: 60px; margin-bottom: 60px; }
.n-hero .n-img-wrap { height: 500px; overflow: hidden; margin-bottom: 30px; }
.n-hero img { width: 100%; height: 100%; object-fit: cover; }
.n-tag { font-family: var(--font-subheading); font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent-orange); display: block; margin-bottom: 15px; }
.n-hero .n-title { font-family: var(--font-heading); font-size: 3rem; margin-bottom: 20px; line-height: 1.2; }
.n-meta { font-family: var(--font-subheading); font-size: 0.9rem; color: var(--text-muted); }
.n-side { display: flex; flex-direction: column; gap: 40px; }
.n-small .n-img-wrap { height: 250px; overflow: hidden; margin-bottom: 20px; }
.n-small img { width: 100%; height: 100%; object-fit: cover; }
.n-small .n-title { font-family: var(--font-heading); font-size: 1.8rem; margin-bottom: 15px; line-height: 1.2; }
.news-divider { border: 0; border-top: 1px solid rgba(26,18,8,0.2); margin: 60px 0; }
.n-strip { display: flex; gap: 40px; align-items: center; }
.n-strip-img { width: 400px; height: 250px; flex-shrink: 0; overflow: hidden; }
.n-strip-img img { width: 100%; height: 100%; object-fit: cover; }
.n-strip .n-title { font-family: var(--font-heading); font-size: 2.5rem; margin-bottom: 15px; }

/* --- SEC 9: CONTACT --- */
.wl-contact { background: var(--accent-green); padding: 150px 0; color: white; position: relative; overflow: hidden; }
.c-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 2; }
.c-title { font-family: var(--font-heading); font-size: clamp(3.5rem, 6vw, 5.5rem); line-height: 1.1; margin-bottom: 60px; }
.c-info-list { display: flex; flex-direction: column; gap: 30px; margin-bottom: 60px; }
.c-item { display: flex; align-items: flex-start; gap: 20px; font-family: var(--font-subheading); font-size: 1.1rem; line-height: 1.5; }
.c-icon { font-size: 1.5rem; color: var(--accent-yellow); }
.btn-outline-white { display: inline-flex; align-items: center; padding: 15px 30px; border: 1px solid white; color: white; font-family: var(--font-subheading); font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; border-radius: 50px; transition: all 0.3s; }
.btn-outline-white:hover { background: white; color: var(--accent-green); }
.glass-form { background: rgba(255,255,255,0.05); padding: 50px; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; backdrop-filter: blur(10px); }
.glass-form input, .glass-form select, .glass-form textarea { width: 100%; padding: 15px 0; margin-bottom: 30px; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.3); color: white; font-family: var(--font-body); font-size: 1.1rem; transition: border-color 0.3s; }
.glass-form input:focus, .glass-form select:focus, .glass-form textarea:focus { outline: none; border-color: var(--accent-yellow); }
.glass-form input::placeholder, .glass-form textarea::placeholder { color: rgba(255,255,255,0.5); }
.glass-form select { color: rgba(255,255,255,0.5); }
.glass-form select option { color: var(--text-dark); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.btn-yellow { width: 100%; display: flex; justify-content: center; align-items: center; padding: 20px; background: var(--accent-yellow); color: var(--text-dark); font-family: var(--font-subheading); font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; transition: background 0.3s; }
.btn-yellow:hover { background: white; }
.c-success { display: none; margin-top: 30px; text-align: center; font-family: var(--font-subheading); font-weight: 600; color: var(--accent-yellow); }
.flight-svg { width: 40px; height: 40px; margin: 0 auto 10px auto; display: block; animation: flyPlane 3s ease-out forwards; }
@keyframes flyPlane { 0% { transform: translate(-100px, 100px) scale(0.5); opacity: 0; } 50% { opacity: 1; } 100% { transform: translate(100px, -100px) scale(1.5); opacity: 0; } }

/* --- SEC 10: FOOTER --- */
.wl-footer { background: var(--text-dark); color: white; padding-top: 40px; overflow: hidden; }
.footer-marquee { border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); padding: 30px 0; margin-bottom: 80px; }
.fm-track { display: flex; width: max-content; animation: fmScroll 30s linear infinite; }
.fm-track span { font-family: var(--font-subheading); font-size: 2rem; font-weight: 300; letter-spacing: 3px; margin-right: 60px; color: rgba(255,255,255,0.8); }
@keyframes fmScroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-100% / 2)); } }
.f-grid { display: grid; grid-template-columns: 1.5fr 2fr; gap: 80px; margin-bottom: 100px; }
.f-brand h2 { font-family: var(--font-heading); font-size: clamp(3rem, 6vw, 6rem); line-height: 1; margin-bottom: 10px; }
.f-est { font-family: var(--font-subheading); font-size: 0.9rem; font-weight: 700; color: var(--accent-orange); letter-spacing: 2px; display: block; margin-bottom: 30px; }
.f-brand p { font-family: var(--font-subheading); font-size: 1.2rem; color: var(--text-muted); }
.f-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.f-col h4 { font-family: var(--font-subheading); font-size: 1.1rem; margin-bottom: 25px; color: white; font-weight: 500; }
.f-col a { display: block; font-family: var(--font-body); font-size: 0.95rem; color: var(--text-muted); margin-bottom: 15px; transition: color 0.3s; }
.f-col a:hover { color: var(--accent-orange); }
.f-bottom { display: flex; }
.f-b-left { flex: 1; background: var(--accent-orange); color: white; padding: 20px 40px; font-family: var(--font-subheading); font-size: 0.9rem; font-weight: 500; }
.f-b-right { flex: 2; background: #110c05; padding: 20px 40px; text-align: right; font-family: var(--font-body); font-size: 0.9rem; color: var(--text-muted); }
.f-b-right a { margin-left: 20px; transition: color 0.3s; }
.f-b-right a:hover { color: white; }

/* Floating Elements */
.floating-scroll-btn { position: fixed; bottom: 40px; right: 40px; width: 60px; height: 60px; background: var(--accent-orange); color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 999; box-shadow: 0 10px 30px rgba(0,0,0,0.2); transition: transform 0.3s; }
.floating-scroll-btn:hover { transform: scale(1.1) translateY(-5px); }
.floating-scroll-btn svg { width: 30px; height: 30px; }
.mobile-sticky-bar { display: none; }

/* Responsiveness */
@media (max-width: 1200px) {
    .ed-mosaic { grid-template-columns: 1fr; }
    .process-content { grid-template-columns: 1fr; gap: 40px; }
    .news-layout { grid-template-columns: 1fr; }
    .n-strip { flex-direction: column; }
    .n-strip-img { width: 100%; height: 300px; }
    .c-grid { grid-template-columns: 1fr; }
    .f-grid { grid-template-columns: 1fr; }
    .scrapbook-container { height: 1800px; }
    .scrap-item { position: relative; top: auto !important; left: auto !important; margin: 0 auto 40px auto; width: 80%; transform: none !important; }
}

@media (max-width: 768px) {
    body, a, button { cursor: auto; }
    #custom-cursor { display: none; }
    .container { padding: 0 20px; }
    .wl-editorial, .wl-brand, .wl-categories, .wl-pricing, .wl-gallery, .wl-testimonials, .wl-blog, .wl-contact { padding: 80px 0; }
    .brand-stats { flex-direction: column; gap: 40px; }
    .b-divider { width: 60px; height: 1px; }
    .panel-grid { grid-template-columns: 1fr; }
    .pkg-inner { flex-direction: column; text-align: center; gap: 30px; }
    .pkg-left, .pkg-mid, .pkg-right { flex: auto; text-align: center; }
    .test-grid { grid-template-columns: 1fr; }
    .f-links { grid-template-columns: 1fr 1fr; }
    .f-bottom { flex-direction: column; text-align: center; }
    .f-b-right { text-align: center; }
    .floating-scroll-btn { display: none; }
    .mobile-sticky-bar { display: flex; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; background: var(--bg-cream); }
    .btn-plan-mobile { flex: 1; padding: 20px; text-align: center; background: var(--accent-orange); color: white; font-family: var(--font-subheading); font-weight: 700; text-transform: uppercase; }
}

/* ========================================= */
/* STRICT DARK MODE OVERRIDES                */
/* ========================================= */
body.dark-mode .wl-brand { background-color: var(--bg-sand); color: var(--text-dark); }
body.dark-mode .brand-stats { border-color: rgba(255,255,255,0.1); }
body.dark-mode .b-divider { background-color: rgba(255,255,255,0.1); }

body.dark-mode .wl-categories { background-color: var(--bg-cream); }
body.dark-mode .cat-pill { color: var(--text-dark); border-color: var(--text-muted); }
body.dark-mode .cat-pill:hover { border-color: var(--accent-green); color: var(--accent-green); }
body.dark-mode .cat-pill.active { background: var(--accent-green); border-color: var(--accent-green); color: white; }
body.dark-mode .panel-card { background-color: var(--bg-sand); color: var(--text-dark); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }

body.dark-mode .wl-process { background-color: var(--bg-cream); color: var(--text-dark); border-top: 1px solid var(--bg-sand); }
body.dark-mode .process-cut { display: none; }
body.dark-mode .p-huge { color: var(--text-muted); opacity: 0.1; }
body.dark-mode .p-info p { color: var(--text-muted); }
body.dark-mode .p-step { border-left: 1px solid rgba(255,255,255,0.1); }

body.dark-mode .wl-pricing { background-color: var(--bg-sand); }
body.dark-mode .pkg-strip { border-color: rgba(255,255,255,0.05); }
body.dark-mode .pkg-strip.highlighted { background-color: var(--bg-cream); border: 1px solid var(--accent-orange); box-shadow: 0 20px 40px rgba(0,0,0,0.5); color: var(--text-dark); }
body.dark-mode .pkg-strip.highlighted .pkg-num { color: var(--text-muted); opacity: 0.1; }
body.dark-mode .pkg-strip.highlighted .pkg-tag { color: var(--accent-orange); }
body.dark-mode .pkg-strip.highlighted .pkg-price { color: var(--accent-orange); }
body.dark-mode .pkg-strip.highlighted .pkg-pp { color: var(--text-muted); }
body.dark-mode .btn-dark { background: var(--text-muted); color: var(--bg-cream); }
body.dark-mode .btn-dark:hover { background: var(--text-dark); color: var(--bg-cream); }

body.dark-mode .wl-gallery { background-color: var(--bg-cream); }
body.dark-mode .outline-text { -webkit-text-stroke: 2px var(--text-dark); }
body.dark-mode .scrap-item { background-color: var(--bg-sand); color: var(--text-dark); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }

body.dark-mode .wl-testimonials { background-color: var(--bg-cream); }
body.dark-mode .test-grid { border-top-color: var(--bg-sand); }
body.dark-mode .q-mark { color: var(--text-muted); opacity: 0.05; }

body.dark-mode .wl-blog { background-color: var(--bg-sand); border-color: rgba(255,255,255,0.1); }
body.dark-mode .news-divider { border-top-color: rgba(255,255,255,0.1); }

body.dark-mode .wl-contact { background-color: var(--bg-sand); color: var(--text-dark); }
body.dark-mode .btn-outline-white { border-color: var(--text-dark); color: var(--text-dark); }
body.dark-mode .btn-outline-white:hover { background-color: var(--text-dark); color: var(--bg-cream); }
body.dark-mode .glass-form { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.05); }
body.dark-mode .glass-form input, body.dark-mode .glass-form select, body.dark-mode .glass-form textarea { color: var(--text-dark); border-bottom-color: rgba(255,255,255,0.1); }
body.dark-mode .glass-form input::placeholder, body.dark-mode .glass-form textarea::placeholder { color: var(--text-muted); }

body.dark-mode .wl-footer { background-color: var(--bg-cream); border-top: 1px solid rgba(255,255,255,0.05); color: var(--text-dark); }
body.dark-mode .footer-marquee { border-color: rgba(255,255,255,0.05); }
body.dark-mode .fm-track span { color: var(--text-muted); }
body.dark-mode .f-col h4 { color: var(--text-dark); }
body.dark-mode .f-b-right { background-color: var(--bg-sand); }