/* ============================================
   EARTHY / ORGANIC EDITORIAL THEME
   ============================================
   All rules scoped under [data-theme="earthy"].
   Transforms the dark modern site into a warm,
   organic editorial aesthetic with natural tones.

   Color Palette:
   - Forest:  #01472e  (dark text, nav, footer)
   - Sage:    #ccd5ae  (hero bg, marquee bg)
   - Olive:   #e9edc9  (services, stats bg)
   - Cream:   #fefae0  (main page bg, card bg)
   - Moss:    #a3b18a  (accent, muted elements)

   Typography:
   - Display: 'Anton', sans-serif
   - Body:    'Inter', sans-serif
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');


/* ------------------------------------------
   KEYFRAME ANIMATIONS
   ------------------------------------------ */
@keyframes earthyReveal {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes earthyFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes earthyPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(2.5);
        opacity: 0;
    }
}


/* ------------------------------------------
   CSS VARIABLES OVERRIDE
   ------------------------------------------ */
[data-theme="earthy"] {
    --color-bg: #fefae0;
    --color-accent: #a3b18a;
    --color-accent-hover: #8a9a72;
    --color-text: #01472e;
    --color-text-muted: #3a6b52;
    --color-text-dim: #4a7b62;
    --color-text-faint: #6b9b82;
    --color-text-ghost: #a3b18a;
    --color-surface: #fefae0;
    --color-surface-hover: #f5f0d0;
    --color-surface-dark: #e9edc9;
    --color-border: #a3b18a;
    --color-border-light: #ccd5ae;
    --color-border-mid: #a3b18a;
    --font-satoshi: 'Inter', sans-serif;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* ------------------------------------------
   UNIVERSAL BASE OVERRIDES
   ------------------------------------------ */
[data-theme="earthy"] .selection-coral::selection,
[data-theme="earthy"] ::selection {
    background-color: #a3b18a;
    color: #01472e;
}

/* Custom cursor — earthy tint */
[data-theme="earthy"] .cursor-dot {
    background: #01472e !important;
}

[data-theme="earthy"] .cursor-ring {
    border-color: rgba(1, 71, 46, 0.4) !important;
}

[data-theme="earthy"] .cursor-ring.hovering {
    border-color: rgba(1, 71, 46, 0.8) !important;
}


/* ------------------------------------------
   BODY / MAIN WRAPPER
   ------------------------------------------ */
[data-theme="earthy"] body {
    font-family: 'Inter', sans-serif !important;
    background-color: #fefae0 !important;
    color: #01472e !important;
}

[data-theme="earthy"] .min-h-screen {
    background-color: #fefae0 !important;
    color: #01472e !important;
    position: relative;
}

/* SVG fractal noise texture overlay */
[data-theme="earthy"] .min-h-screen::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}


/* ------------------------------------------
   TOP NAVIGATION
   ------------------------------------------ */
[data-theme="earthy"] #topNav {
    color: #01472e !important;
}

[data-theme="earthy"] #topNav.scrolled {
    background: rgba(1, 71, 46, 0.95) !important;
    backdrop-filter: blur(12px) !important;
}

[data-theme="earthy"] #topNav.scrolled,
[data-theme="earthy"] #topNav.scrolled a,
[data-theme="earthy"] #topNav.scrolled .nav-link {
    color: #ccd5ae !important;
}

[data-theme="earthy"] #topNav.scrolled .nav-link:hover {
    color: #fefae0 !important;
}

/* Logo */
[data-theme="earthy"] #nav-logo div {
    background-color: #01472e !important;
    color: #fefae0 !important;
}

[data-theme="earthy"] #topNav.scrolled #nav-logo div {
    background-color: #ccd5ae !important;
    color: #01472e !important;
}

/* Nav links */
[data-theme="earthy"] .nav-link {
    color: #01472e !important;
}

[data-theme="earthy"] .nav-link:hover {
    color: #01472e !important;
}

[data-theme="earthy"] .nav-link::before {
    background: #01472e !important;
}

[data-theme="earthy"] #topNav.scrolled .nav-link::before {
    background: #ccd5ae !important;
}

/* CTA button in nav */
[data-theme="earthy"] #topNav .magnetic-btn {
    background-color: #a3b18a !important;
    color: #01472e !important;
    border-color: #a3b18a !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-size: 0.75rem !important;
}

[data-theme="earthy"] #topNav .magnetic-btn:hover {
    background-color: #8a9a72 !important;
    border-color: #8a9a72 !important;
    color: #fefae0 !important;
}

[data-theme="earthy"] #topNav.scrolled .magnetic-btn {
    background-color: #ccd5ae !important;
    color: #01472e !important;
    border-color: #ccd5ae !important;
}


/* ------------------------------------------
   BOTTOM NAV / THEME SWITCHER
   ------------------------------------------ */
[data-theme="earthy"] .glass-nav {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(1, 71, 46, 0.1) !important;
    border-radius: 9999px !important;
    box-shadow: 0 10px 40px -10px rgba(1, 71, 46, 0.15) !important;
}

[data-theme="earthy"] .theme-toggle {
    color: #01472e !important;
    background: transparent !important;
    border-radius: 9999px !important;
}

[data-theme="earthy"] .theme-toggle:hover {
    color: #01472e !important;
    background: rgba(163, 177, 138, 0.2) !important;
}

[data-theme="earthy"] .theme-toggle.active {
    color: #fefae0 !important;
    background: #01472e !important;
}


/* ------------------------------------------
   HERO SECTION
   ------------------------------------------ */
[data-theme="earthy"] header {
    background-color: #ccd5ae !important;
}

/* Hide dark background overlays */
[data-theme="earthy"] header > .absolute.inset-0 {
    opacity: 0 !important;
    display: none !important;
}

[data-theme="earthy"] header .bg-\[radial-gradient\(circle_at_center\2c _\#1a1a1a_0\%\2c _\#050505_70\%\)\] {
    opacity: 0 !important;
}

/* Hero text */
[data-theme="earthy"] .hero-text,
[data-theme="earthy"] #heroText {
    font-family: 'Anton', sans-serif !important;
    color: #01472e !important;
    line-height: 0.75 !important;
    letter-spacing: -0.05em !important;
}

[data-theme="earthy"] .hero-char {
    color: #01472e !important;
}

[data-theme="earthy"] .hero-char.scattered {
    color: #a3b18a !important;
    text-shadow: none !important;
    filter: none !important;
}

/* Hero subtitle */
[data-theme="earthy"] #heroSub {
    color: #01472e !important;
    opacity: 1 !important;
}

/* Hero bottom-left tagline */
[data-theme="earthy"] header .absolute.bottom-12.left-8 p,
[data-theme="earthy"] header .absolute.bottom-12.left-8 .text-\[\#888888\] {
    color: #3a6b52 !important;
}

[data-theme="earthy"] header .absolute.bottom-12.left-8 p:hover,
[data-theme="earthy"] header .absolute.bottom-12.left-8 .group-hover\:text-white {
    color: #01472e !important;
}

/* Hero bottom-right contact link */
[data-theme="earthy"] header .link-underline {
    color: #01472e !important;
}

[data-theme="earthy"] header .link-underline:hover {
    color: #a3b18a !important;
}

[data-theme="earthy"] header .link-underline::after {
    background: #a3b18a !important;
}

/* Scroll indicator */
[data-theme="earthy"] header .text-\[\#444444\],
[data-theme="earthy"] header .animate-bounce span,
[data-theme="earthy"] header .animate-bounce iconify-icon {
    color: #3a6b52 !important;
}


/* ------------------------------------------
   MARQUEE
   ------------------------------------------ */
[data-theme="earthy"] .border-y {
    border-color: #a3b18a !important;
    background-color: #ccd5ae !important;
}

[data-theme="earthy"] .marquee-track span {
    color: #01472e !important;
}

[data-theme="earthy"] .marquee-track .text-\[\#FFFFFF\] {
    color: #01472e !important;
}

/* Marquee dots — Moss color */
[data-theme="earthy"] .marquee-track .bg-\[\#FF6B50\],
[data-theme="earthy"] .marquee-track .rounded-full {
    background-color: #a3b18a !important;
}


/* ------------------------------------------
   SCROLL REVEAL OVERRIDE
   ------------------------------------------ */
[data-theme="earthy"] .reveal {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-theme="earthy"] .reveal.visible {
    opacity: 1;
    transform: translateY(0);
}


/* ------------------------------------------
   ABOUT SECTION
   ------------------------------------------ */
[data-theme="earthy"] #about {
    background-color: #fefae0 !important;
}

/* Pulse ring dot */
[data-theme="earthy"] #about .pulse-ring,
[data-theme="earthy"] #about .bg-\[\#FF6B50\] {
    background-color: #a3b18a !important;
}

[data-theme="earthy"] #about .pulse-ring::after {
    border-color: #a3b18a !important;
    animation: earthyPulse 2s ease-out infinite !important;
}

/* Section label text */
[data-theme="earthy"] #about .text-\[\#666666\] {
    color: #3a6b52 !important;
}

/* Headline */
[data-theme="earthy"] #about h2 {
    font-family: 'Anton', sans-serif !important;
    color: #01472e !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
}

[data-theme="earthy"] #about h2 .text-\[\#666666\] {
    color: #6b9b82 !important;
}

/* Left card — dark bg override */
[data-theme="earthy"] #about .tilt-card.bg-\[\#111111\],
[data-theme="earthy"] #about .bg-\[\#111111\] {
    background-color: #fefae0 !important;
    border: 1px solid #ccd5ae !important;
    border-radius: 5rem !important;
    box-shadow: 0 25px 50px -12px rgba(1, 71, 46, 0.2) !important;
}

[data-theme="earthy"] #about .bg-\[\#111111\]:hover {
    background-color: #f5f0d0 !important;
}

/* Card badge */
[data-theme="earthy"] #about .bg-\[\#1a1a1a\] {
    background-color: #ccd5ae !important;
    border-color: #a3b18a !important;
    color: #01472e !important;
}

[data-theme="earthy"] #about .group:hover .group-hover\:border-\[\#FF6B50\] {
    border-color: #01472e !important;
}

[data-theme="earthy"] #about .group:hover .group-hover\:text-\[\#FF6B50\] {
    color: #01472e !important;
}

/* Card heading text */
[data-theme="earthy"] #about .tilt-card h3 {
    color: #01472e !important;
}

[data-theme="earthy"] #about .text-\[\#444444\] {
    color: #6b9b82 !important;
}

[data-theme="earthy"] #about .group:hover .group-hover\:text-\[\#666666\] {
    color: #3a6b52 !important;
}

/* Right card — gradient override */
[data-theme="earthy"] #about .bg-gradient-to-br,
[data-theme="earthy"] #about .from-\[\#4F46E5\],
[data-theme="earthy"] .tilt-card.bg-gradient-to-br.from-\[\#4F46E5\] {
    background: #a3b18a !important;
    border-radius: 5rem !important;
    box-shadow: 0 25px 50px -12px rgba(1, 71, 46, 0.2) !important;
}

/* Browser mockup inside right card */
[data-theme="earthy"] #about .bg-\[\#e5e5e5\] {
    background-color: #fefae0 !important;
    border-radius: 1rem !important;
}

[data-theme="earthy"] #about .bg-\[\#f5f5f5\] {
    background-color: #e9edc9 !important;
}

/* White overlay on hover inside right card */
[data-theme="earthy"] #about .bg-white\/5 {
    background: rgba(254, 250, 224, 0.1) !important;
}


/* ------------------------------------------
   STATS SECTION
   ------------------------------------------ */
[data-theme="earthy"] #stats {
    background-color: #e9edc9 !important;
    border-color: #ccd5ae !important;
    border-radius: 5rem 5rem 0 0 !important;
    margin-top: -2rem;
    position: relative;
    z-index: 1;
}

[data-theme="earthy"] #stats .stat-glow {
    text-shadow: none !important;
    font-family: 'Anton', sans-serif !important;
    color: #01472e !important;
    font-weight: 400 !important;
}

[data-theme="earthy"] #stats .counter {
    font-family: 'Anton', sans-serif !important;
    color: #01472e !important;
}

[data-theme="earthy"] #stats .text-white {
    color: #01472e !important;
}

[data-theme="earthy"] #stats .text-\[\#666666\] {
    color: #3a6b52 !important;
    font-weight: 700 !important;
}

[data-theme="earthy"] #stats .text-\[\#444444\] {
    color: #6b9b82 !important;
}


/* ------------------------------------------
   SERVICES SECTION
   ------------------------------------------ */
[data-theme="earthy"] #services {
    background-color: #e9edc9 !important;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Section label */
[data-theme="earthy"] #services .pulse-ring,
[data-theme="earthy"] #services .bg-\[\#FF6B50\] {
    background-color: #a3b18a !important;
}

[data-theme="earthy"] #services .pulse-ring::after {
    border-color: #a3b18a !important;
    animation: earthyPulse 2s ease-out infinite !important;
}

[data-theme="earthy"] #services .text-\[\#666666\] {
    color: #3a6b52 !important;
}

/* Section headline */
[data-theme="earthy"] #services h2 {
    font-family: 'Anton', sans-serif !important;
    color: #01472e !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
}

[data-theme="earthy"] #services h2 .text-\[\#666666\] {
    color: #6b9b82 !important;
}

/* Service grid wrapper */
[data-theme="earthy"] #services .bg-\[\#222222\] {
    background-color: transparent !important;
    border-radius: 2.5rem !important;
    gap: 1.5rem !important;
}

[data-theme="earthy"] #services .grid.grid-cols-1 {
    gap: 1.5rem !important;
}

/* Service cards */
[data-theme="earthy"] #services .bg-\[\#0a0a0a\] {
    background-color: #fefae0 !important;
    border-radius: 2.5rem !important;
    box-shadow: 0 25px 50px -12px rgba(1, 71, 46, 0.2) !important;
    border: 1px solid #ccd5ae !important;
}

[data-theme="earthy"] #services .bg-\[\#0a0a0a\]:hover,
[data-theme="earthy"] #services .hover\:bg-\[\#111111\]:hover {
    background-color: #f5f0d0 !important;
}

/* Service card titles */
[data-theme="earthy"] #services h3 {
    color: #01472e !important;
}

/* Service card descriptions */
[data-theme="earthy"] #services p.text-\[\#666666\] {
    color: #3a6b52 !important;
}

/* Icon boxes */
[data-theme="earthy"] #services .w-14 {
    background-color: #a3b18a !important;
    border-color: #a3b18a !important;
    border-radius: 1rem !important;
}

[data-theme="earthy"] #services .w-14 iconify-icon,
[data-theme="earthy"] #services .text-\[\#888888\] {
    color: #01472e !important;
}

[data-theme="earthy"] #services .group:hover .group-hover\:bg-\[\#FF6B50\] {
    background-color: #01472e !important;
    border-color: #01472e !important;
}

[data-theme="earthy"] #services .group:hover .group-hover\:text-black {
    color: #fefae0 !important;
}

/* Service list divider */
[data-theme="earthy"] #services .border-\[\#222222\] {
    border-color: #ccd5ae !important;
}

/* Service list items */
[data-theme="earthy"] #services .text-\[\#555555\] {
    color: #3a6b52 !important;
}

[data-theme="earthy"] #services .group:hover .group-hover\:text-\[\#888888\] {
    color: #01472e !important;
}

/* Service list dots */
[data-theme="earthy"] #services li .bg-\[\#FF6B50\] {
    background-color: #a3b18a !important;
}

/* Shopify callout card */
[data-theme="earthy"] #services .tilt-card.bg-\[\#0a0a0a\],
[data-theme="earthy"] #services > .mt-8 .bg-\[\#0a0a0a\] {
    background-color: #fefae0 !important;
    border-color: #ccd5ae !important;
    border-radius: 2.5rem !important;
    box-shadow: 0 25px 50px -12px rgba(1, 71, 46, 0.2) !important;
}

[data-theme="earthy"] #services > .mt-8 .bg-\[\#0a0a0a\]:hover,
[data-theme="earthy"] #services > .mt-8 .hover\:border-\[\#333333\]:hover {
    border-color: #a3b18a !important;
}

/* Shopify icon gradient box */
[data-theme="earthy"] #services .bg-gradient-to-br.from-\[\#95BF47\] {
    background: linear-gradient(to bottom right, #a3b18a, #01472e) !important;
    border-radius: 1rem !important;
}

/* Shopify CTA button */
[data-theme="earthy"] #services .mt-8 .magnetic-btn {
    background-color: #a3b18a !important;
    color: #01472e !important;
    border-color: #a3b18a !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
}

[data-theme="earthy"] #services .mt-8 .magnetic-btn:hover {
    background-color: #01472e !important;
    color: #fefae0 !important;
    border-color: #01472e !important;
}

[data-theme="earthy"] #services .border-\[\#1a1a1a\] {
    border-color: #ccd5ae !important;
}


/* ------------------------------------------
   WORK / PORTFOLIO SECTION
   ------------------------------------------ */
[data-theme="earthy"] #work {
    background-color: #fefae0 !important;
}

/* Section header */
[data-theme="earthy"] #work .text-\[\#FF6B50\] {
    color: #a3b18a !important;
    font-family: 'Anton', sans-serif !important;
    letter-spacing: 0.4em !important;
}

[data-theme="earthy"] #work .border-\[\#222222\] {
    border-color: #ccd5ae !important;
}

[data-theme="earthy"] #work .text-\[\#FFFFFF\] {
    color: #01472e !important;
}

/* Project images */
[data-theme="earthy"] #work .bg-\[\#111111\] {
    background-color: #e9edc9 !important;
    border-radius: 2.5rem !important;
    overflow: hidden !important;
}

[data-theme="earthy"] #work article img {
    border-radius: 2.5rem !important;
    opacity: 0.8 !important;
}

[data-theme="earthy"] #work article:hover img {
    opacity: 1 !important;
}

/* Image overlay gradient */
[data-theme="earthy"] #work .bg-gradient-to-t {
    background: linear-gradient(to top, rgba(1, 71, 46, 0.6), transparent) !important;
}

/* Project badge on hover */
[data-theme="earthy"] #work .bg-\[\#FF6B50\] {
    background-color: #a3b18a !important;
    color: #01472e !important;
}

/* Project titles */
[data-theme="earthy"] #work h3 {
    color: #01472e !important;
}

[data-theme="earthy"] #work .group:hover h3,
[data-theme="earthy"] #work .group-hover\:text-\[\#FF6B50\]:hover,
[data-theme="earthy"] #work .group:hover .group-hover\:text-\[\#FF6B50\] {
    color: #a3b18a !important;
}

/* Project type labels */
[data-theme="earthy"] #work .text-\[\#666666\] {
    color: #3a6b52 !important;
}

/* Arrow icon buttons */
[data-theme="earthy"] #work .border-\[\#333333\] {
    border-color: #ccd5ae !important;
    color: #01472e !important;
}

[data-theme="earthy"] #work .group:hover .group-hover\:bg-\[\#FF6B50\] {
    background-color: #a3b18a !important;
    border-color: #a3b18a !important;
}

[data-theme="earthy"] #work .group:hover .group-hover\:text-black {
    color: #01472e !important;
}

[data-theme="earthy"] #work .group:hover .group-hover\:border-transparent {
    border-color: transparent !important;
}


/* ------------------------------------------
   FOOTER / CONTACT SECTION
   ------------------------------------------ */
[data-theme="earthy"] #contact {
    background-color: #01472e !important;
    border-color: #01472e !important;
    color: #ccd5ae !important;
}

/* "LET'S GO" headline */
[data-theme="earthy"] #contact h2 {
    font-family: 'Anton', sans-serif !important;
    color: #ccd5ae !important;
    font-weight: 400 !important;
}

[data-theme="earthy"] #contact h2 span {
    color: #ccd5ae !important;
}

[data-theme="earthy"] #contact h2 span:hover {
    color: #a3b18a !important;
}

/* Location text */
[data-theme="earthy"] #contact .text-\[\#666666\] {
    color: #6b9b82 !important;
}

[data-theme="earthy"] #contact p.text-\[\#666666\] {
    color: #6b9b82 !important;
}

/* Social buttons */
[data-theme="earthy"] #contact .social-btn {
    border-color: #ccd5ae !important;
    color: #ccd5ae !important;
}

[data-theme="earthy"] #contact .social-btn:hover {
    background-color: #ccd5ae !important;
    color: #01472e !important;
    border-color: #ccd5ae !important;
}

[data-theme="earthy"] #contact .social-btn::before {
    background: radial-gradient(circle, rgba(204, 213, 174, 0.3) 0%, transparent 70%) !important;
}

/* Form heading */
[data-theme="earthy"] #contact .contact-form h3 {
    color: #ccd5ae !important;
}

/* Form labels */
[data-theme="earthy"] #contact .form-label {
    color: #a3b18a !important;
}

[data-theme="earthy"] #contact .form-label .text-\[\#444444\] {
    color: #6b9b82 !important;
}

/* Form inputs */
[data-theme="earthy"] #contact .form-input {
    background-color: rgba(254, 250, 224, 0.95) !important;
    border-color: rgba(204, 213, 174, 0.4) !important;
    color: #01472e !important;
    border-radius: 0.75rem !important;
}

[data-theme="earthy"] #contact .form-input::placeholder {
    color: #6b9b82 !important;
}

[data-theme="earthy"] #contact .form-input:focus {
    border-color: #a3b18a !important;
    box-shadow: 0 0 0 3px rgba(163, 177, 138, 0.3) !important;
}

/* Submit button */
[data-theme="earthy"] #contact .form-submit {
    background-color: #a3b18a !important;
    color: #01472e !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}

[data-theme="earthy"] #contact .form-submit:hover {
    background-color: #ccd5ae !important;
    box-shadow: 0 8px 30px rgba(163, 177, 138, 0.4) !important;
}

/* Success state */
[data-theme="earthy"] #contact .text-\[\#FF6B50\] {
    color: #a3b18a !important;
}

[data-theme="earthy"] #contact .form-success .text-white {
    color: #ccd5ae !important;
}


/* ------------------------------------------
   BOTTOM BAR (inside footer)
   ------------------------------------------ */
[data-theme="earthy"] #contact .border-\[\#111111\] {
    border-color: rgba(204, 213, 174, 0.2) !important;
}

[data-theme="earthy"] #contact .text-\[\#333333\] {
    color: #6b9b82 !important;
}

[data-theme="earthy"] #contact .text-\[\#f5f5f5\] {
    color: #ccd5ae !important;
}

[data-theme="earthy"] #contact .flex.gap-10 a,
[data-theme="earthy"] #contact a.text-\[\#FFFFFF\] {
    color: #ccd5ae !important;
}

[data-theme="earthy"] #contact .flex.gap-10 a:hover,
[data-theme="earthy"] #contact a.text-\[\#FFFFFF\]:hover,
[data-theme="earthy"] #contact a.hover\:text-\[\#FF6B50\]:hover {
    color: #a3b18a !important;
}


/* ------------------------------------------
   GLOBAL TEXT COLOR OVERRIDES
   Override Tailwind text-white everywhere
   ------------------------------------------ */
[data-theme="earthy"] .text-white {
    color: #01472e !important;
}

[data-theme="earthy"] .text-\[\#FFFFFF\] {
    color: #01472e !important;
}

[data-theme="earthy"] .text-\[\#888888\] {
    color: #3a6b52 !important;
}

[data-theme="earthy"] .text-\[\#666666\] {
    color: #3a6b52 !important;
}

[data-theme="earthy"] .text-\[\#555555\] {
    color: #4a7b62 !important;
}

[data-theme="earthy"] .text-\[\#444444\] {
    color: #6b9b82 !important;
}

[data-theme="earthy"] .text-\[\#333333\] {
    color: #6b9b82 !important;
}

/* Re-assert footer-specific white text since footer has Forest bg */
[data-theme="earthy"] #contact .text-white,
[data-theme="earthy"] #contact h3.text-white {
    color: #ccd5ae !important;
}

[data-theme="earthy"] #contact .text-\[\#FFFFFF\] {
    color: #ccd5ae !important;
}


/* ------------------------------------------
   GLOBAL BACKGROUND COLOR OVERRIDES
   ------------------------------------------ */
[data-theme="earthy"] .bg-\[\#050505\] {
    background-color: #fefae0 !important;
}

[data-theme="earthy"] .bg-\[\#0a0a0a\] {
    background-color: #fefae0 !important;
}

[data-theme="earthy"] .bg-\[\#111111\] {
    background-color: #fefae0 !important;
}

[data-theme="earthy"] .bg-\[\#1a1a1a\] {
    background-color: #ccd5ae !important;
}

[data-theme="earthy"] .bg-white {
    background-color: #fefae0 !important;
}


/* ------------------------------------------
   GLOBAL BORDER COLOR OVERRIDES
   ------------------------------------------ */
[data-theme="earthy"] .border-\[\#1a1a1a\] {
    border-color: #ccd5ae !important;
}

[data-theme="earthy"] .border-\[\#222222\] {
    border-color: #ccd5ae !important;
}

[data-theme="earthy"] .border-\[\#333333\] {
    border-color: #a3b18a !important;
}

[data-theme="earthy"] .border-\[\#111111\] {
    border-color: rgba(163, 177, 138, 0.3) !important;
}


/* ------------------------------------------
   GLOBAL ACCENT COLOR OVERRIDES
   Replace all coral (#FF6B50) with Moss
   ------------------------------------------ */
[data-theme="earthy"] .bg-\[\#FF6B50\] {
    background-color: #a3b18a !important;
}

[data-theme="earthy"] .text-\[\#FF6B50\] {
    color: #a3b18a !important;
}

[data-theme="earthy"] .hover\:text-\[\#FF6B50\]:hover {
    color: #a3b18a !important;
}

[data-theme="earthy"] .hover\:bg-\[\#FF6B50\]:hover {
    background-color: #a3b18a !important;
}

[data-theme="earthy"] .border-\[\#FF6B50\] {
    border-color: #a3b18a !important;
}

[data-theme="earthy"] .hover\:bg-white:hover {
    background-color: #ccd5ae !important;
}

[data-theme="earthy"] .hover\:text-black:hover {
    color: #01472e !important;
}


/* ------------------------------------------
   GRADIENT OVERRIDES
   ------------------------------------------ */
[data-theme="earthy"] .bg-gradient-to-br.from-\[\#4F46E5\].to-\[\#7C3AED\] {
    background: #a3b18a !important;
}

[data-theme="earthy"] .bg-\[radial-gradient\(circle_at_center\2c _\#1a1a1a_0\%\2c _\#050505_70\%\)\] {
    background: transparent !important;
    opacity: 0 !important;
}

/* Black overlay gradients */
[data-theme="earthy"] .bg-black\/20,
[data-theme="earthy"] .bg-black\/60 {
    background: rgba(1, 71, 46, 0.15) !important;
}


/* ------------------------------------------
   TYPOGRAPHY — ANTON FOR ALL HEADINGS
   ------------------------------------------ */
[data-theme="earthy"] h1,
[data-theme="earthy"] h2 {
    font-family: 'Anton', sans-serif !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.02em !important;
}

[data-theme="earthy"] h3 {
    font-family: 'Inter', sans-serif !important;
    color: #01472e !important;
    font-weight: 700 !important;
}

/* Labels and buttons uppercase tracking */
[data-theme="earthy"] .tracking-widest,
[data-theme="earthy"] .tracking-\[0\.3em\],
[data-theme="earthy"] .tracking-\[0\.2em\],
[data-theme="earthy"] .tracking-\[0\.4em\] {
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
}


/* ------------------------------------------
   STAT GLOW — Remove coral glow
   ------------------------------------------ */
[data-theme="earthy"] .stat-glow {
    text-shadow: none !important;
}


/* ------------------------------------------
   HOVER STATES — override Tailwind hover bg
   ------------------------------------------ */
[data-theme="earthy"] .hover\:bg-\[\#161616\]:hover {
    background-color: #f5f0d0 !important;
}

[data-theme="earthy"] .hover\:bg-\[\#111111\]:hover {
    background-color: #f5f0d0 !important;
}

[data-theme="earthy"] .hover\:text-white:hover {
    color: #01472e !important;
}

[data-theme="earthy"] .hover\:scale-105:hover {
    transform: scale(1.03) !important;
}


/* ------------------------------------------
   RESPONSIVE ADJUSTMENTS
   ------------------------------------------ */
@media (max-width: 768px) {
    [data-theme="earthy"] #stats {
        border-radius: 3rem 3rem 0 0 !important;
    }

    [data-theme="earthy"] #about .tilt-card {
        border-radius: 3rem !important;
    }

    [data-theme="earthy"] #work .bg-\[\#111111\] {
        border-radius: 1.5rem !important;
    }

    [data-theme="earthy"] #work article img {
        border-radius: 1.5rem !important;
    }
}


/* ==========================================
   STRUCTURAL LAYOUT OVERRIDES
   Editorial magazine layout: narrow reading
   column, split-screen hero, airy spacing
   ========================================== */

/* 1. NARROW EDITORIAL COLUMN — constrain content */
[data-theme="earthy"] #about,
[data-theme="earthy"] #services,
[data-theme="earthy"] #work {
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 2. HERO — split-screen layout */
[data-theme="earthy"] header {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr !important;
    height: 100vh !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Left side — text content */
[data-theme="earthy"] header .relative.z-10 {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 80px 48px !important;
    z-index: 2 !important;
}

[data-theme="earthy"] header h1,
[data-theme="earthy"] header .hero-text {
    text-align: left !important;
    font-size: clamp(3rem, 7vw, 6rem) !important;
}

[data-theme="earthy"] header #heroSub {
    text-align: left !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Right side — organic texture panel */
[data-theme="earthy"] header > .absolute.inset-0:first-of-type {
    position: relative !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    inset: auto !important;
}

[data-theme="earthy"] header > .absolute.inset-0:first-of-type > div {
    background: linear-gradient(135deg, #ccd5ae 0%, #a3b18a 50%, #588157 100%) !important;
    opacity: 1 !important;
}

/* Hide grid overlay on right panel */
[data-theme="earthy"] header > .absolute.inset-0:nth-of-type(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative !important;
    inset: auto !important;
    display: none !important;
}

/* Move hero bottom elements into flow */
[data-theme="earthy"] header .absolute.bottom-12.left-8,
[data-theme="earthy"] header .absolute.bottom-12.left-8.md\:left-12 {
    position: absolute !important;
    z-index: 3 !important;
}

[data-theme="earthy"] header .absolute.bottom-12.right-8,
[data-theme="earthy"] header .absolute.bottom-12.right-8.md\:right-12 {
    z-index: 3 !important;
}

/* Scroll indicator */
[data-theme="earthy"] header .animate-bounce {
    z-index: 3 !important;
}

/* 3. ABOUT — editorial layout with overlapping cards */
[data-theme="earthy"] #about {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

[data-theme="earthy"] #about > h2 {
    max-width: 700px !important;
    font-size: clamp(2rem, 5vw, 3.5rem) !important;
    line-height: 1.2 !important;
}

/* Cards overlap with rotation */
[data-theme="earthy"] #about > .grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    position: relative !important;
}

[data-theme="earthy"] #about > .grid > .tilt-card:first-child {
    transform: rotate(-2deg) !important;
    z-index: 2 !important;
    margin-right: -20px !important;
}

[data-theme="earthy"] #about > .grid > .tilt-card:last-child {
    transform: rotate(1.5deg) !important;
    z-index: 1 !important;
    margin-left: -20px !important;
    margin-top: 40px !important;
}

/* 4. STATS — inline editorial callout */
[data-theme="earthy"] #stats {
    padding: 48px 24px !important;
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

[data-theme="earthy"] #stats > .max-w-7xl {
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 32px 48px !important;
}

[data-theme="earthy"] #stats .text-center {
    text-align: center !important;
    flex: 0 0 auto !important;
}

/* 5. SERVICES — 2-column layout with feature card */
[data-theme="earthy"] #services > .grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    background: transparent !important;
    overflow: visible !important;
}

/* Third service card spans full width as feature */
[data-theme="earthy"] #services > .grid > div:nth-child(3) {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    gap: 24px !important;
    align-items: center !important;
}

[data-theme="earthy"] #services > .grid > div {
    border-radius: 2rem !important;
}

/* 6. PORTFOLIO — full-width editorial spreads */
[data-theme="earthy"] #work > .grid {
    grid-template-columns: 1fr !important;
    gap: 80px !important;
}

/* Remove stagger offset */
[data-theme="earthy"] #work article.md\:mt-24 {
    margin-top: 0 !important;
}

/* Full-width images, wider aspect ratio */
[data-theme="earthy"] #work article .aspect-\[4\/3\] {
    aspect-ratio: 16 / 9 !important;
    border-radius: 2rem !important;
    overflow: hidden !important;
}

/* Alternate text alignment per project */
[data-theme="earthy"] #work article:nth-child(odd) > a > .mt-8 {
    text-align: left !important;
}

[data-theme="earthy"] #work article:nth-child(even) > a > .mt-8 {
    flex-direction: row-reverse !important;
}

/* 7. FOOTER — stacked vertical, form above CTA */
[data-theme="earthy"] #contact {
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 80px !important;
}

[data-theme="earthy"] #contact > div {
    flex-direction: column-reverse !important;
    align-items: center !important;
    text-align: center !important;
    gap: 60px !important;
}

/* Form comes first (visually on top due to column-reverse) */
[data-theme="earthy"] #contact > div > .w-full {
    width: 100% !important;
    max-width: 500px !important;
}

/* CTA headline centered */
[data-theme="earthy"] #contact h2 {
    text-align: center !important;
    font-size: clamp(3rem, 8vw, 7rem) !important;
}

/* Social links centered */
[data-theme="earthy"] #contact .flex.gap-4 {
    justify-content: center !important;
}

/* Location centered */
[data-theme="earthy"] #contact > div > div > p {
    justify-content: center !important;
}

/* Footer bar */
[data-theme="earthy"] #contact > .max-w-7xl.mt-40 {
    max-width: 1000px !important;
}

/* 8. MARQUEE — slower, more whitespace */
[data-theme="earthy"] .marquee-track {
    gap: 48px !important;
}

/* 9. SECTION SPACING — luxurious airy gaps */
[data-theme="earthy"] #about {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

[data-theme="earthy"] #services {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

[data-theme="earthy"] #work {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

/* 10. RESPONSIVE */
@media (max-width: 768px) {
    [data-theme="earthy"] header {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr auto !important;
    }

    [data-theme="earthy"] header .relative.z-10 {
        padding: 100px 24px 40px !important;
    }

    [data-theme="earthy"] header > .absolute.inset-0:first-of-type {
        display: none !important;
    }

    [data-theme="earthy"] #about > .grid {
        grid-template-columns: 1fr !important;
    }

    [data-theme="earthy"] #about > .grid > .tilt-card:first-child,
    [data-theme="earthy"] #about > .grid > .tilt-card:last-child {
        transform: none !important;
        margin: 0 !important;
    }

    [data-theme="earthy"] #services > .grid {
        grid-template-columns: 1fr !important;
    }

    [data-theme="earthy"] #services > .grid > div:nth-child(3) {
        grid-column: auto !important;
        grid-template-columns: 1fr !important;
    }

    [data-theme="earthy"] #contact > div {
        text-align: left !important;
    }

    [data-theme="earthy"] #contact h2 {
        text-align: left !important;
    }

    [data-theme="earthy"] #contact .flex.gap-4 {
        justify-content: flex-start !important;
    }

    [data-theme="earthy"] #contact > div > div > p {
        justify-content: flex-start !important;
    }
}


/* ==========================================
   ABOUT.HTML — STRUCTURAL OVERRIDES
   Editorial magazine layout for about page
   ========================================== */

/* About hero — narrow editorial column */
[data-theme="earthy"] header.relative.pt-48 {
    max-width: 1000px !important;
    text-align: center !important;
}

[data-theme="earthy"] header.relative.pt-48 h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
    line-height: 1.1 !important;
}

[data-theme="earthy"] header.relative.pt-48 p {
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Section label centered */
[data-theme="earthy"] header.relative.pt-48 > .flex {
    justify-content: center !important;
}

/* Our Story — narrow editorial with airy spacing */
[data-theme="earthy"] section.border-t {
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* Story paragraphs — larger leading */
[data-theme="earthy"] section.border-t p.leading-relaxed {
    font-size: 1.1rem !important;
    line-height: 1.9 !important;
}

/* Stats grid — more compact inline */
[data-theme="earthy"] section.border-t .grid.grid-cols-2 {
    gap: 16px !important;
}

[data-theme="earthy"] section.border-t .grid.grid-cols-2 > div {
    text-align: center !important;
}

/* Team section — narrow column */
[data-theme="earthy"] section .grid.grid-cols-1.md\:grid-cols-3 {
    max-width: 1000px !important;
    margin: 0 auto !important;
}

/* Team cards — slight overlap and rotation */
[data-theme="earthy"] section .grid.grid-cols-1.md\:grid-cols-3 > .tilt-card:nth-child(1) {
    transform: rotate(-1deg) !important;
}

[data-theme="earthy"] section .grid.grid-cols-1.md\:grid-cols-3 > .tilt-card:nth-child(2) {
    transform: translateY(-16px) rotate(0.5deg) !important;
    z-index: 2 !important;
}

[data-theme="earthy"] section .grid.grid-cols-1.md\:grid-cols-3 > .tilt-card:nth-child(3) {
    transform: rotate(1deg) !important;
}

/* About footer — centered, airy */
[data-theme="earthy"] footer .max-w-7xl.text-center {
    max-width: 800px !important;
}

[data-theme="earthy"] footer .max-w-7xl.text-center h2 {
    font-size: clamp(2.5rem, 6vw, 5rem) !important;
}

@media (max-width: 768px) {
    [data-theme="earthy"] section .grid.grid-cols-1.md\:grid-cols-3 > .tilt-card:nth-child(1),
    [data-theme="earthy"] section .grid.grid-cols-1.md\:grid-cols-3 > .tilt-card:nth-child(2),
    [data-theme="earthy"] section .grid.grid-cols-1.md\:grid-cols-3 > .tilt-card:nth-child(3) {
        transform: none !important;
    }
}