/* CSS Variables for The Pristine Arboretum Theme */
:root {
    --bg-white: #FFFFFF;
    --bg-parchment: #FBF9F6;
    
    --text-charcoal: #000C09; /* Deep Charcoal Green, almost black */
    --color-forest: #1A3C34; /* Deep Forest Green Accent */
    
    --border-delicate: rgba(0, 12, 9, 0.1); /* Very soft charcoal borders */
    
    font-size: 16px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

::selection {
    background-color: var(--color-forest);
    color: var(--bg-parchment);
}

html, body {
    overflow-x: hidden;
    width: 100%;
}

body {
    background-color: var(--bg-white);
    color: var(--text-charcoal);
    line-height: 1.6;
}

/* Typography Arrays */
.font-serif { font-family: 'Newsreader', serif; }
.font-sans { font-family: 'Manrope', -apple-system, sans-serif; }

.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }

.italic-soft { font-style: italic; font-weight: 300; }
.uppercase { text-transform: uppercase; }
.tracking-tight { letter-spacing: -0.03em; }
.tracking-wide { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.15em; }

/* Colors & Backgrounds */
.bg-white { background-color: var(--bg-white); }
.bg-parchment { background-color: var(--bg-parchment); }

.text-charcoal { color: var(--text-charcoal); }
.text-forest { color: var(--color-forest); }
.text-white { color: #ffffff; }

/* Borders & Dividers */
.border-b-delicate { border-bottom: 1px solid var(--border-delicate); }
.border-t-delicate { border-top: 1px solid var(--border-delicate); }
.border-l-delicate { border-left: 1px solid var(--border-delicate); }
.border-all-delicate { border: 1px solid var(--border-delicate); }
.divide-x > div:not(:last-child) { border-right: 1px solid var(--border-delicate); }

/* Layout Utilities */
.container { max-width: 1280px; margin: 0 auto; padding: 0 4vw; }

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.align-top { align-items: flex-start; }

.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }

.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }

.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-32 { padding-top: 8rem; padding-bottom: 8rem; }
.pt-8 { padding-top: 2rem; }
.pt-16 { padding-top: 4rem; }
.pt-24 { padding-top: 6rem; }
.pt-32 { padding-top: 8rem; }
.pb-8 { padding-bottom: 2rem; }
.pb-32 { padding-bottom: 8rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.pl-6 { padding-left: 1.5rem; }

.w-full { width: 100%; }
.h-full { height: 100%; height: stretch; }
.max-w-xs { max-width: 320px; }
.max-w-sm { max-width: 450px; }
.max-w-lg { max-width: 800px; }

.block { display: block; }
.inline-block { display: inline-block; }
.relative { position: relative; }
.absolute-full { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.overflow-hidden { overflow: hidden; }

.opacity-60 { opacity: 0.6; }
.opacity-80 { opacity: 0.8; }

.text-center { text-align: center; }
.leading-relaxed { line-height: 1.7; }
.aspect-video { aspect-ratio: 16 / 10; }

/* Text Sizes */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.9rem; }
.text-md { font-size: 1.15rem; }
.text-xl { font-size: 1.5rem; }
.text-2xl { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; }
.text-4xl { font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1.1; }
.text-5xl { font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1.05; }
.hero-headline { font-size: clamp(2.75rem, 10vw, 6.5rem); line-height: 0.95; }

/* Interactive Elements */
a { color: inherit; text-decoration: none; transition: color 0.3s ease; }
.hover-forest { transition: color 0.3s; }
.hover-forest:hover { color: var(--color-forest); }

.hover-underline:hover { text-decoration: underline; text-underline-offset: 4px; }

.btn-forest {
    display: inline-block; padding: 0.75rem 1.5rem;
    background-color: var(--color-forest); color: #fff;
    border: 1px solid var(--color-forest); border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}
.btn-forest:hover { background-color: var(--text-charcoal); border-color: var(--text-charcoal); }

.btn-outline {
    display: inline-block; padding: 0.75rem 1.5rem;
    background-color: transparent; color: var(--text-charcoal);
    border: 1px solid var(--border-delicate); border-radius: 4px;
    transition: border-color 0.3s, background-color 0.3s;
}
.btn-outline:hover { border-color: var(--text-charcoal); background-color: var(--bg-parchment); }

/* Magnetic Buttons Physics Transitions */
.magnetic-btn {
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), background-color 0.3s, color 0.3s, border-color 0.3s;
    will-change: transform;
}
.magnetic-btn:hover {
    transition: transform 0.1s linear, background-color 0.3s, color 0.3s, border-color 0.3s;
}

.lg-btn { padding: 1.25rem 2.5rem; }

.scroll-link { display: inline-flex; transition: transform 0.3s; }
.line-indicator { width: 30px; height: 1px; background-color: var(--color-forest); display: block; transition: width 0.3s; }
.scroll-link:hover .line-indicator { width: 45px; }

.badge-parchment {
    padding: 0.4rem 1rem; border-radius: 50px;
    background-color: var(--bg-parchment); border: 1px solid var(--border-delicate);
}

/* Architectural Scroll Line */
.scroll-tracer {
    position: fixed;
    top: 0; left: 0;
    width: 2px;
    height: 0%;
    background-color: var(--color-forest);
    z-index: 9999;
    will-change: height;
}

/* Grids */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: stretch; }
.grid-editorial { display: grid; grid-template-columns: 1fr 2.5fr; align-items: start; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; }

/* Hero Asymmetry & Imagery */
.botanical-art {
    width: 100%; max-width: 800px;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: cover;
    mix-blend-mode: multiply;
}

/* Portfolio Details */
.muted-company:hover { transform: translateY(-4px); border-color: var(--text-charcoal); }
.p-8 { padding: 2rem; }

.overlay-dark {
    background: linear-gradient(to top, rgba(0,0,0,0.1), transparent);
    pointer-events: none;
}
.group:hover .portfolio-image { transform: scale(1.05); }
.transition-transform { transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); }

/* Editorial Entrances */
.fade-up {
    opacity: 0; transform: translateY(30px);
    transition: opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1), transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.fade-up.active { opacity: 1; transform: translateY(0); }

/* Disable animations on mobile for smoother horizontal scroll prevention */
@media (max-width: 768px) {
    .fade-up { opacity: 1; transform: none; transition: none; }
}

.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.3s; }

/* Organic Levitation Keyframes */
@keyframes organic-levitate {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.animate-levitate {
    animation: organic-levitate 8s ease-in-out infinite;
    will-change: transform;
}


/* Responsive */
@media (max-width: 992px) {
    /* Mobile Navigation Stacking - Fixed Overlap */
    .header-arboretum .container { flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; padding-top: 2rem; padding-bottom: 2rem; }
    .desktop-nav { order: 2; width: 100%; justify-content: center; flex-wrap: wrap; margin-top: 0; gap: 1.25rem; }
    .header-arboretum .btn-forest { order: 3; width: 100%; text-align: center; display: block; }
    .hero-grid { grid-template-columns: 1fr; text-align: center; display: flex; flex-direction: column; }
    .hero-imagery { order: -1; margin-bottom: 1rem; width: 100%; }
    .hero-content { order: 2; display: flex; flex-direction: column; align-items: center; }
    .hero-content .max-w-sm { margin-left: auto; margin-right: auto; }
    .scroll-link { justify-content: center; }
    .botanical-art { margin: 1rem auto 2rem; max-width: 90%; width: 100%; }
    .grid-2 { grid-template-columns: 1fr; gap: 4rem; }
    .grid-3 { grid-template-columns: 1fr; gap: 3rem; text-align: center; }
    .grid-4 { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .grid-editorial { grid-template-columns: 1fr; gap: 3rem; }
    .divide-x > div:not(:last-child) { border-right: none; border-bottom: 1px solid var(--border-delicate); padding-bottom: 3rem; margin-bottom: 3rem; }
    
    /* Modify Dual CTA */
    .action-row { flex-direction: column; width: 100%; }
    .action-row .btn-forest, .action-row .btn-outline { width: 100%; display: block; }
    
    .footer-links { flex-direction: column; gap: 2rem; }
    .flex-between.align-top { flex-direction: column; gap: 3rem; }
    
    /* Responsive Paddings to avoid huge white gaps on mobile */
    .py-32 { padding-top: 4rem; padding-bottom: 4rem; }
    .pt-32 { padding-top: 4rem; }
    .pb-32 { padding-bottom: 4rem; }
    .pt-24 { padding-top: 4rem; }
}

@media (max-width: 600px) {
    .container { padding: 0 6vw; }
    .py-16 { padding-top: 3rem; padding-bottom: 3rem; }
    .text-4xl { font-size: 2.2rem; }
    .text-5xl { font-size: 2.8rem; }
    .grid-4 { grid-template-columns: 1fr; gap: 1rem; }
    .footer-bottom { flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
}