/* ========================================
   IRONWOOD LANDSCAPING - PREMIUM STYLES
   Modern, organic, earthy design system
   ======================================== */

/* ---------- CSS Variables ---------- */
:root {
    /* Primary Colors */
    --forest-deep: #1a2e1a;
    --forest-green: #2d4a2d;
    --forest-light: #3d5a3d;
    --forest-charcoal: #1f2d24;
    --sage: #7a9a7a;
    --sage-light: #a4bfa4;
    --sage-soft: #c8d5c8;
    
    /* Earth Tones */
    --earth-dark: #3d3027;
    --earth-warm: #6b5344;
    --earth-light: #a08b7a;
    --sand: #d4c4b0;
    --stone-beige: #F2EFE9;
    --stone-warm: #E8E4DB;
    --cream: #f8f6f3;
    --warm-white: #fdfcfa;
    
    /* Accent */
    --gold-accent: #c9a962;
    --gold-light: #e8d5a3;
    
    /* Functional */
    --text-dark: #1a1a1a;
    --text-medium: #4a4a4a;
    --text-light: #7a7a7a;
    
    /* Shadows */
    --shadow-soft: 0 4px 20px rgba(26, 46, 26, 0.08);
    --shadow-medium: 0 8px 40px rgba(26, 46, 26, 0.12);
    --shadow-strong: 0 12px 60px rgba(26, 46, 26, 0.18);
    --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.1), 0 2px 10px rgba(0, 0, 0, 0.05);
    
    /* Typography */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Spacing */
    --section-padding: clamp(80px, 10vw, 140px);
    --container-width: 1200px;
    
    /* Transitions */
    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    background-color: var(--stone-beige);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 60px);
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-smooth);
}

ul {
    list-style: none;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
}

.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    text-align: center;
    margin-bottom: 0.5em;
    color: var(--forest-deep);
}

.section-title.light {
    color: var(--warm-white);
}

.section-subtitle {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    text-align: center;
    color: var(--text-light);
    margin-bottom: 3rem;
    font-weight: 400;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 36px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: var(--transition-smooth);
    border: none;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: linear-gradient(135deg, var(--forest-green) 0%, var(--forest-deep) 100%);
    color: white;
    box-shadow: 0 4px 20px rgba(45, 74, 45, 0.4);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(45, 74, 45, 0.5);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: 0.5s;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-large {
    padding: 22px 48px;
    font-size: 1.1rem;
}

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--warm-white);
    font-weight: 500;
    opacity: 0.9;
    padding: 10px 0;
}

.btn-link:hover {
    opacity: 1;
    transform: translateX(5px);
}

.btn-icon {
    font-size: 1.1em;
}

/* ==========================================
   HERO SECTION - THE LANDSCAPE STAGE
   ========================================== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('banner.jpeg') center center / cover no-repeat;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(20, 35, 20, 0.95) 0%,
        rgba(26, 46, 26, 0.88) 25%,
        rgba(35, 55, 35, 0.78) 50%,
        rgba(45, 74, 45, 0.65) 75%,
        rgba(55, 85, 55, 0.55) 100%
    );
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 40px 20px 180px;
    max-width: 900px;
}

.logo-container {
    margin-bottom: 2.5rem;
    animation: logoFloat 6s ease-in-out infinite;
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.logo {
    width: clamp(280px, 40vw, 450px);
    height: auto;
    margin: 0 auto;
    border-radius: 16px;
    filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.5)) 
            drop-shadow(0 4px 15px rgba(0, 0, 0, 0.3));
    transition: transform 0.4s ease;
}

.logo:hover {
    transform: scale(1.02);
}

/* Remove old hero-title since logo is now the title */
.hero-title {
    display: none;
}

.hero-tagline {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    color: var(--sage-light);
    font-style: italic;
    margin-bottom: 0.8rem;
    font-weight: 400;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.hero-subtitle {
    font-size: clamp(0.85rem, 1.2vw, 0.95rem);
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
    line-height: 1.8;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.hero-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.hero-curve {
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    z-index: 3;
}

.hero-curve svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================
   TRANSFORMATION SECTION
   ========================================== */
.transformation {
    position: relative;
    padding: var(--section-padding) 0;
    background-color: var(--stone-beige);
    overflow: hidden;
}

.transformation::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(180deg, transparent 0%, rgba(122, 154, 122, 0.15) 50%, rgba(45, 74, 45, 0.1) 100%);
    pointer-events: none;
}

.texture-overlay {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' 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");
    opacity: 0.03;
    pointer-events: none;
}

.transform-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 8vw, 100px);
    align-items: center;
}

.transform-headline h2 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    color: var(--forest-deep);
    line-height: 1.15;
}

.transform-headline h2.accent {
    color: var(--forest-green);
    margin-top: 0.2em;
}

.transform-copy {
    position: relative;
}

.transform-copy p {
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    color: var(--text-medium);
    line-height: 1.9;
}

.accent-line {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--forest-green), var(--sage));
    margin-top: 2rem;
    border-radius: 2px;
}

/* Thin green horizon divider after transformation */
.transformation::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 80' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C360,55 720,25 1080,40 C1260,50 1380,35 1440,42' stroke='%237a9a7a' stroke-width='2' fill='none' opacity='0.4'/%3E%3Cpath d='M0,50 C240,60 480,40 720,52 C960,64 1200,44 1440,54' stroke='%232d4a2d' stroke-width='1.5' fill='none' opacity='0.25'/%3E%3C/svg%3E");
    background-size: cover;
    pointer-events: none;
}

/* ==========================================
   SERVICES SECTION - 3 PILLARS
   ========================================== */
.services {
    position: relative;
    padding: var(--section-padding) 0;
    background-color: var(--stone-beige);
}

/* Stone texture overlay */
.services::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.05;
    pointer-events: none;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 2rem;
    position: relative;
    z-index: 1;
}

.service-card {
    position: relative;
    background: linear-gradient(145deg, #f1e6d6 0%, #e6d8c7 100%);
    border-radius: 24px;
    padding: clamp(30px, 4vw, 50px);
    box-shadow: 
        0 10px 40px rgba(61, 48, 39, 0.12),
        0 2px 10px rgba(61, 48, 39, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: var(--transition-smooth);
    overflow: hidden;
    border: 1px solid rgba(160, 139, 122, 0.2);
}

/* Stone texture on cards */
.service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.08;
    pointer-events: none;
    border-radius: 24px;
}

.service-card:hover {
    transform: translateY(-12px);
    box-shadow: 
        0 20px 60px rgba(61, 48, 39, 0.18),
        0 8px 25px rgba(61, 48, 39, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.service-card.featured {
    background: linear-gradient(145deg, var(--stone-warm) 0%, #E5E1D8 100%);
    color: var(--text-dark);
    transform: scale(1.03);
    border: 2px solid var(--forest-green);
}

.service-card.featured:hover {
    transform: scale(1.03) translateY(-12px);
}

.service-card.featured h3 {
    color: var(--forest-deep);
}

.service-card.featured li {
    color: var(--text-medium);
}

.service-card.featured li::before {
    color: var(--forest-green);
}

.card-icon {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.service-card h3 {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    color: var(--forest-deep);
    margin-bottom: 1.5rem;
}

.service-card ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.service-card li {
    font-size: 0.95rem;
    color: var(--text-medium);
    padding-left: 1.5em;
    position: relative;
}

.service-card li::before {
    content: '🌿';
    position: absolute;
    left: 0;
    font-size: 0.85rem;
}

/* Leaf silhouette watermark on cards */
.service-card::after {
    content: '';
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 80px;
    height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25,5 Q40,15 42,30 Q38,45 25,48 Q12,45 8,30 Q10,15 25,5' fill='%232d4a2d' fill-opacity='0.04'/%3E%3Cpath d='M25,12 L25,42' stroke='%232d4a2d' stroke-opacity='0.03' stroke-width='1'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: 0.8;
}

.card-shine {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 60%
    );
    transform: translateX(-100%);
    transition: 0.8s;
    pointer-events: none;
}

.service-card:hover .card-shine {
    transform: translateX(100%);
}

.horizon-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 110px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 100' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3C!-- Grass blades along bottom --%3E%3Cpath d='M0,70 Q5,50 10,70 Q15,45 20,70 Q25,55 30,70 Q35,40 40,70 Q45,50 50,70 Q55,48 60,70 Q65,52 70,70 Q75,42 80,70 Q85,55 90,70 Q95,47 100,70' stroke='%234a6b4a' stroke-width='2' fill='none' opacity='0.2'/%3E%3Cpath d='M100,70 Q105,50 110,70 Q115,45 120,70 Q125,55 130,70 Q135,40 140,70 Q145,50 150,70 Q155,48 160,70 Q165,52 170,70 Q175,42 180,70 Q185,55 190,70 Q195,47 200,70' stroke='%234a6b4a' stroke-width='2' fill='none' opacity='0.2'/%3E%3Cpath d='M200,70 Q205,50 210,70 Q215,45 220,70 Q225,55 230,70 Q235,40 240,70 Q245,50 250,70 Q255,48 260,70 Q265,52 270,70 Q275,42 280,70 Q285,55 290,70 Q295,47 300,70' stroke='%234a6b4a' stroke-width='2' fill='none' opacity='0.2'/%3E%3C!-- Rolling hill horizon --%3E%3Cpath d='M0,60 C120,75 240,50 360,65 C480,80 600,55 720,68 C840,81 960,56 1080,70 C1200,84 1320,58 1440,72 L1440,100 L0,100 Z' fill='%232d4a2d' fill-opacity='0.06'/%3E%3Cpath d='M0,75 C180,85 360,70 540,80 C720,90 900,72 1080,82 C1260,92 1380,78 1440,85 L1440,100 L0,100 Z' fill='%237a9a7a' fill-opacity='0.08'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: bottom;
}

/* ==========================================
   WHY IRONWOOD SECTION
   ========================================== */
.why-ironwood {
    position: relative;
    padding: var(--section-padding) 0;
    background: linear-gradient(160deg, #1a1f1a 0%, var(--forest-deep) 40%, var(--forest-charcoal) 100%);
    overflow: hidden;
}

/* Stone walkway pattern */
.why-ironwood::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='5' width='40' height='40' rx='4' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'/%3E%3Crect x='55' y='10' width='45' height='45' rx='4' fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/%3E%3Crect x='110' y='5' width='40' height='40' rx='4' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'/%3E%3Crect x='15' y='60' width='45' height='45' rx='4' fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/%3E%3Crect x='70' y='65' width='40' height='40' rx='4' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'/%3E%3Crect x='115' y='60' width='45' height='45' rx='4' fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/%3E%3Crect x='5' y='115' width='40' height='40' rx='4' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'/%3E%3Crect x='55' y='110' width='45' height='45' rx='4' fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/%3E%3Crect x='110' y='115' width='40' height='40' rx='4' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 220px 220px;
    pointer-events: none;
}

/* Top wavy divider */
.why-ironwood::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 60' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L0,20 C180,40 360,0 540,20 C720,40 900,0 1080,20 C1260,40 1380,10 1440,25 L1440,60 Z' fill='%23F2EFE9'/%3E%3C/svg%3E");
    background-size: cover;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 3rem;
    position: relative;
    z-index: 1;
}

.why-ironwood .container {
    position: relative;
    z-index: 1;
}

.feature-item {
    text-align: center;
    padding: 40px 30px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition-smooth);
}

.feature-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-8px);
}

.feature-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, var(--sage-light) 0%, var(--sage) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 30px rgba(122, 154, 122, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.feature-icon svg {
    width: 36px;
    height: 36px;
    stroke: var(--forest-deep);
    stroke-width: 2.5;
}

.feature-item h3 {
    color: white;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.feature-item p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    line-height: 1.7;
}

.quote-block {
    margin-top: 4rem;
    text-align: center;
    padding: 40px;
    position: relative;
}

.quote-block::before {
    content: '"';
    font-family: var(--font-display);
    font-size: 8rem;
    color: rgba(255, 255, 255, 0.1);
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1;
}

.quote-block blockquote {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    color: var(--gold-light);
    font-style: italic;
    position: relative;
    z-index: 1;
}

/* ==========================================
   FEATURED WORK SECTION
   ========================================== */
.featured-work {
    position: relative;
    padding: var(--section-padding) 0;
    background-color: var(--stone-beige);
}

/* Stone texture */
.featured-work::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' 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");
    opacity: 0.04;
    pointer-events: none;
}

/* Bottom grass band divider */
.featured-work::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 70' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,35 C240,55 480,15 720,35 C960,55 1200,15 1440,35' stroke='%237a9a7a' stroke-width='2' fill='none' opacity='0.35'/%3E%3Cpath d='M0,45 C180,60 360,35 540,45 C720,55 900,35 1080,45 C1260,55 1380,40 1440,48' stroke='%232d4a2d' stroke-width='1.5' fill='none' opacity='0.2'/%3E%3C/svg%3E");
    background-size: cover;
    pointer-events: none;
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-top: 2rem;
    position: relative;
    z-index: 1;
}

.work-item {
    position: relative;
    height: clamp(280px, 35vw, 400px);
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
}

.work-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: var(--transition-smooth);
}

.work-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 30%,
        rgba(26, 46, 26, 0.95) 100%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    opacity: 0;
    transition: var(--transition-smooth);
}

.work-item:hover .work-image {
    transform: scale(1.08);
}

.work-item:hover .work-overlay {
    opacity: 1;
}

.work-overlay h3 {
    color: white;
    font-size: 1.4rem;
    margin-bottom: 0.3rem;
}

.work-overlay p {
    color: var(--sage-light);
    font-size: 0.9rem;
}

/* ==========================================
   TESTIMONIALS SECTION
   ========================================== */
.testimonials {
    position: relative;
    padding: var(--section-padding) 0;
    background-color: var(--stone-beige);
    overflow: hidden;
}

/* Stone texture */
.testimonials::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.05;
    pointer-events: none;
}

.testimonials .container {
    position: relative;
    z-index: 1;
}

/* Ultra-subtle leaf watermark behind testimonials section */
.testimonials .container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    height: 420px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50,10 Q70,25 75,50 Q70,75 50,90 Q30,75 25,50 Q30,25 50,10 M50,25 L50,75 M35,40 Q50,50 65,40 M35,60 Q50,50 65,60' fill='none' stroke='%232d4a2d' stroke-opacity='0.025' stroke-width='1'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

.testimonial-carousel {
    max-width: 800px;
    margin: 3rem auto 0;
    position: relative;
    z-index: 1;
}

.testimonial-track {
    position: relative;
    min-height: 280px;
}

.testimonial-card {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 50px 40px;
    background: linear-gradient(145deg, var(--stone-warm) 0%, #E8E4DB 100%);
    border-radius: 24px;
    box-shadow: var(--shadow-medium);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: var(--transition-smooth);
    overflow: hidden;
}

/* Bottom wavy divider */
.testimonials::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 50' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,25 C240,45 480,5 720,25 C960,45 1200,5 1440,25 L1440,50 L0,50 Z' fill='%23c8d5c8' fill-opacity='0.3'/%3E%3C/svg%3E");
    background-size: cover;
    pointer-events: none;
}

.testimonial-card.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.stars {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    letter-spacing: 4px;
}

.testimonial-card blockquote {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    color: var(--text-dark);
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.testimonial-card cite {
    font-style: normal;
    color: var(--forest-green);
    font-weight: 600;
    font-size: 1rem;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 2rem;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--forest-green);
    background: transparent;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.dot.active,
.dot:hover {
    background: var(--forest-green);
}

/* ==========================================
   INFO SECTION - HOURS & LOCATION
   ========================================== */
.info-section {
    position: relative;
    padding: var(--section-padding) 0;
    overflow: hidden;
}

.info-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(180deg, transparent 0%, rgba(122, 154, 122, 0.15) 100%);
    pointer-events: none;
}

/* Split background - sage left, stone right */
.info-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, 
        rgba(200, 213, 200, 0.4) 0%, 
        rgba(200, 213, 200, 0.3) 50%, 
        var(--stone-beige) 50%, 
        var(--stone-beige) 100%
    );
}

.tree-silhouette {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400'%3E%3C!-- Pine tree 1 --%3E%3Cpath d='M150,400 L150,320 L120,320 L150,280 L130,280 L150,240 L135,240 L150,200 L165,240 L150,240 L170,280 L150,280 L180,320 L150,320 L150,400' fill='%232d4a2d' fill-opacity='0.06'/%3E%3C!-- Pine tree 2 --%3E%3Cpath d='M280,400 L280,350 L260,350 L280,320 L265,320 L280,290 L270,290 L280,260 L290,290 L280,290 L295,320 L280,320 L300,350 L280,350 L280,400' fill='%232d4a2d' fill-opacity='0.05'/%3E%3C!-- Pine tree 3 --%3E%3Cpath d='M1200,400 L1200,310 L1170,310 L1200,260 L1180,260 L1200,210 L1185,210 L1200,160 L1215,210 L1200,210 L1220,260 L1200,260 L1230,310 L1200,310 L1200,400' fill='%232d4a2d' fill-opacity='0.06'/%3E%3C!-- Pine tree 4 --%3E%3Cpath d='M1320,400 L1320,340 L1295,340 L1320,300 L1305,300 L1320,260 L1310,260 L1320,220 L1330,260 L1320,260 L1335,300 L1320,300 L1345,340 L1320,340 L1320,400' fill='%232d4a2d' fill-opacity='0.05'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: bottom;
    pointer-events: none;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    position: relative;
    z-index: 1;
}

.info-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: clamp(35px, 5vw, 50px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.info-card h3 {
    font-size: 1.5rem;
    color: var(--forest-deep);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--sage-light);
}

.hours ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.hours li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.05rem;
    color: var(--text-medium);
}

.hours li span:first-child {
    font-weight: 600;
    color: var(--text-dark);
}

.hours .closed {
    color: var(--earth-light);
}

.location-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.location-details p {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.1rem;
    color: var(--text-medium);
}

.location-details .icon {
    font-size: 1.3rem;
}

.location-details a {
    color: var(--forest-green);
    font-weight: 600;
}

.location-details a:hover {
    color: var(--forest-deep);
}

/* ==========================================
   FINAL CTA SECTION
   ========================================== */
.final-cta {
    position: relative;
    padding: clamp(120px, 17vw, 180px) 0 clamp(120px, 17vw, 180px);
    text-align: center;
    overflow: hidden;
}

/* Top wavy transition from info section */
.cta-wave-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    z-index: 2;
}

.cta-wave-top svg {
    width: 100%;
    height: 100%;
    display: block;
}

.cta-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(175deg, #162016 0%, var(--forest-deep) 40%, #1a2e1a 70%, #243324 100%);
}

/* Subtle hedge/bush pattern */
.cta-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='30' cy='70' rx='25' ry='18' fill='%23ffffff' fill-opacity='0.015'/%3E%3Cellipse cx='90' cy='68' rx='28' ry='20' fill='%23ffffff' fill-opacity='0.012'/%3E%3Cellipse cx='150' cy='70' rx='25' ry='18' fill='%23ffffff' fill-opacity='0.015'/%3E%3C/svg%3E");
    background-size: 250px 120px;
}

/* Grass blade line at bottom */
.cta-background::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 70' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M2,70 Q3,40 5,70 Q7,32 9,70 Q10,45 12,70 Q14,28 16,70 Q17,42 19,70 Q21,35 23,70 Q24,48 26,70 Q28,30 30,70 Q31,40 33,70 Q35,32 37,70 Q38,50 40,70 Q42,28 44,70 Q45,42 47,70 Q49,35 51,70 Q52,45 54,70 Q56,30 58,70 Q59,38 61,70 Q63,32 65,70 Q64,48 66,70 Q68,28 70,70 Q71,42 73,70 Q75,35 77,70 Q78,50 80,70 Q82,30 84,70 Q85,40 87,70 Q89,32 91,70 Q92,45 94,70 Q96,28 98,70 Q99,38 100,70' stroke='%235a8a5a' stroke-width='1.8' fill='none' opacity='0.6'/%3E%3Cpath d='M5,70 Q6,48 8,70 Q12,42 14,70 Q20,38 22,70 Q28,45 30,70 Q36,40 38,70 Q44,48 46,70 Q52,42 54,70 Q60,38 62,70 Q68,45 70,70 Q76,40 78,70 Q84,48 86,70 Q92,42 94,70' stroke='%236b9b6b' stroke-width='1.2' fill='none' opacity='0.5'/%3E%3C/svg%3E");
    background-size: 120px 70px;
    background-repeat: repeat-x;
    background-position: bottom;
}

.final-cta .container {
    position: relative;
    z-index: 1;
}

.final-cta h2 {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    color: white;
    margin-bottom: 0.5rem;
}

.cta-subtitle {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2.5rem;
}

.cta-phone {
    margin-top: 1.5rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
}

.cta-phone a {
    color: var(--gold-light);
    font-weight: 600;
}

.cta-phone a:hover {
    color: white;
}

/* ==========================================
   FOOTER
   ========================================== */
.footer {
    background-color: var(--forest-deep);
    padding: 60px 0 30px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand h4 {
    color: white;
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}

.footer-brand p {
    color: var(--sage-light);
    font-style: italic;
}

.footer-info {
    text-align: right;
}

.footer-info p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
}

.footer-info a {
    color: var(--sage-light);
}

.footer-info a:hover {
    color: white;
}

.footer-bottom {
    padding-top: 30px;
    text-align: center;
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
}

/* ==========================================
   RESPONSIVE STYLES
   ========================================== */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .service-card.featured {
        transform: none;
    }
    
    .service-card.featured:hover {
        transform: translateY(-12px);
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    .transform-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .accent-line {
        margin: 2rem auto 0;
    }
    
    .work-grid {
        grid-template-columns: 1fr;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    
    .footer-info {
        text-align: center;
    }
    
    .hero-cta {
        gap: 15px;
    }
    
    .btn {
        padding: 16px 28px;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .testimonial-card {
        padding: 35px 25px;
    }
    
    .info-card {
        padding: 30px 25px;
    }
    
    .feature-item {
        padding: 30px 20px;
    }
}

/* ==========================================
   ANIMATIONS
   ========================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Scroll-triggered animations */
.service-card,
.feature-item,
.work-item,
.info-card {
    animation: fadeInUp 0.6s ease-out forwards;
    animation-play-state: paused;
}

.animate {
    animation-play-state: running;
}