:root { --vr-dark-green: #2E4F28; --vr-leaf-green: #5B7B49; --vr-earth-white: #F9F8F5; --vr-dirt-brown: #6b4c3a; --vr-text-main: #333333; --vr-font-head: 'Playfair Display', serif; --vr-font-body: 'Lora', serif; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--vr-font-body); color: var(--vr-text-main); background-color: var(--vr-earth-white); line-height: 1.65; overflow-x: hidden; } img { width: 100%; height: auto; object-fit: cover; display: block; } h1, h2, h3, h4 { font-family: var(--vr-font-head); font-weight: 700; color: var(--vr-dark-green); margin-bottom: 1rem; line-height: 1.2; } a { color: var(--vr-leaf-green); text-decoration: none; transition: color 0.3s ease; } a:hover { color: var(--vr-dark-green); } .vr-top-nav { position: sticky; top: 0; z-index: 100; background-color: rgba(249, 248, 245, 0.95); backdrop-filter: blur(5px); border-bottom: 1px solid rgba(91, 123, 73, 0.2); } .vr-nav-inner { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 1rem 2rem; } .vr-brand-mark { display: flex; align-items: center; gap: 0.5rem; font-family: var(--vr-font-head); font-size: 1.5rem; font-weight: 700; color: var(--vr-dark-green); } .vr-logo-icon { font-size: 1.8rem; } .vr-nav-links { display: flex; gap: 2rem; align-items: center; font-weight: 600; font-size: 0.95rem; } .vr-ghost-link { opacity: 0.6; pointer-events: none; } .vr-btn-primary { border: 2px solid var(--vr-leaf-green); padding: 0.5rem 1.2rem; border-radius: 4px; color: var(--vr-leaf-green); } .vr-btn-primary:hover { background-color: var(--vr-leaf-green); color: white; } .vr-hero-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 80vh; background-color: var(--vr-dark-green); color: var(--vr-earth-white); } .vr-hero-content { padding: 6rem 4rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .vr-headline { color: var(--vr-earth-white); font-size: 3.5rem; margin-bottom: 1.5rem; } .vr-subhead { font-size: 1.2rem; margin-bottom: 2.5rem; max-width: 90%; opacity: 0.9; } .vr-btn-solid { background-color: var(--vr-leaf-green); color: white; padding: 1rem 2rem; font-family: var(--vr-font-head); font-size: 1.1rem; border-radius: 4px; border: none; cursor: pointer; transition: background 0.3s ease; } .vr-btn-solid:hover { background-color: #4a663b; color: white; } .vr-hero-visual img { height: 100%; min-height: 400px; } .vr-section-title { font-size: 2.5rem; position: relative; padding-bottom: 1rem; margin-bottom: 2rem; } .vr-section-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 60px; height: 3px; background-color: var(--vr-leaf-green); } .vr-center.vr-section-title::after { left: 50%; transform: translateX(-50%); } .vr-center { text-align: center; } .vr-deep-roots { padding: 7.5rem 2rem 5rem; background-color: #fff; } .vr-roots-container { max-width: 1100px; margin: 0 auto; } .vr-roots-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 4rem; align-items: center; } .vr-roots-text p { margin-bottom: 1.5rem; font-size: 1.05rem; } .vr-impact-metrics { background-color: var(--vr-earth-white); padding: 3rem; border-left: 4px solid var(--vr-leaf-green); } .vr-stat-box { font-family: var(--vr-font-head); color: var(--vr-dark-green); margin-bottom: 1rem; } .vr-counter { font-size: 4rem; font-weight: 700; line-height: 1; display: inline-block; } .vr-stat-label { font-size: 1.5rem; font-weight: 500; display: block; } .vr-stat-context { font-size: 0.95rem; font-style: italic; opacity: 0.8; } .vr-service-area { padding: 4.5rem 2rem 8rem; max-width: 1200px; margin: 0 auto; } .vr-service-header { margin-bottom: 4rem; max-width: 600px; } .vr-service-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2.5rem; } .vr-card { background: #fff; border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 10px 30px rgba(0,0,0,0.03); transition: transform 0.3s ease; display: flex; flex-direction: column; } .vr-card:hover { transform: translateY(-10px); } .vr-card img { height: 220px; border-bottom: 4px solid var(--vr-leaf-green); } .vr-card-body { padding: 2rem; flex-grow: 1; } .vr-card-body h3 { font-size: 1.4rem; margin-bottom: 1rem; } .vr-voices { background-color: var(--vr-leaf-green); color: white; padding: 6rem 2rem; } .vr-voices .vr-section-title { color: white; } .vr-voices .vr-section-title::after { background-color: white; } .vr-testimonial-wrap { max-width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 3rem; justify-content: center; } .vr-testimonial { flex: 1; min-width: 300px; background: rgba(255,255,255,0.1); padding: 2.5rem; border-radius: 8px; } .vr-quote { font-size: 1.1rem; font-style: italic; margin-bottom: 2rem; position: relative; } .vr-quote::before { content: '"'; font-family: var(--vr-font-head); font-size: 4rem; position: absolute; left: -1.5rem; top: -1.5rem; opacity: 0.2; line-height: 1; } .vr-author-block { display: flex; align-items: center; gap: 1rem; } .vr-author-block img { width: 60px; height: 60px; border-radius: 50%; border: 2px solid white; } .vr-author-info { display: flex; flex-direction: column; } .vr-author-name { font-weight: 700; font-family: var(--vr-font-head); } .vr-author-farm { font-size: 0.85rem; opacity: 0.8; } .vr-contact-zone { padding: 7rem 2rem; max-width: 1000px; margin: 0 auto; } .vr-contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; } .vr-contact-text p { margin-bottom: 1.5rem; } .vr-minor-note { font-size: 0.85rem; color: var(--vr-dirt-brown); font-style: italic; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,0.1); } .vr-form-group { margin-bottom: 1.5rem; } .vr-form label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--vr-dark-green); font-size: 0.9rem; } .vr-form input, .vr-form textarea { width: 100%; padding: 0.8rem; border: 1px solid #ccc; border-radius: 4px; font-family: var(--vr-font-body); background-color: var(--vr-earth-white); transition: border-color 0.3s; } .vr-form input:focus, .vr-form textarea:focus { outline: none; border-color: var(--vr-leaf-green); } .vr-btn-submit { background-color: var(--vr-dark-green); color: white; border: none; padding: 1rem 2rem; font-family: var(--vr-font-head); font-size: 1.1rem; border-radius: 4px; cursor: pointer; width: 100%; transition: background 0.3s; } .vr-btn-submit:hover { background-color: var(--vr-leaf-green); } .vr-base-footer { background-color: var(--vr-dirt-brown); color: #e0dcd3; padding: 4rem 2rem 2rem; font-size: 0.9rem; } .vr-footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; } .vr-ft-brand { display: flex; flex-direction: column; gap: 0.5rem; } .vr-ft-title { font-family: var(--vr-font-head); font-size: 1.5rem; color: white; font-weight: 700; } .vr-base-footer h4 { color: white; font-size: 1.1rem; margin-bottom: 1.2rem; } .vr-base-footer address { font-style: normal; margin-bottom: 0.5rem; } .vr-ft-links ul { list-style: none; } .vr-ft-links li { margin-bottom: 0.5rem; } .vr-ft-links a { color: #e0dcd3; } .vr-ft-links a:hover { color: white; text-decoration: underline; } .vr-ft-bottom { max-width: 1200px; margin: 0 auto; text-align: center; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.8rem; } @media (max-width: 900px) { .vr-hero-split, .vr-roots-grid, .vr-contact-inner { grid-template-columns: 1fr; } .vr-headline { font-size: 2.8rem; } .vr-hero-content { padding: 4rem 2rem; } .vr-footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .vr-nav-links { display: none; } .vr-footer-grid { grid-template-columns: 1fr; } .vr-stat-box { display: flex; flex-direction: column; align-items: center; text-align: center; } }