:root { --vh-forest: #2C4C3B; --vh-sage: #789476; --vh-earth: #F4F1EA; --vh-brown: #3B2F2F; --vh-white: #FFFFFF; --vh-font-serif-head: 'Playfair Display', serif; --vh-font-serif-body: 'Lora', serif; --vh-transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--vh-font-serif-body); background-color: var(--vh-earth); color: var(--vh-brown); line-height: 1.6; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--vh-font-serif-head); color: var(--vh-forest); font-weight: 600; line-height: 1.2; } img { width: 100%; height: auto; object-fit: cover; display: block; } a { color: var(--vh-forest); text-decoration: none; transition: var(--vh-transition); } .vh-bounds { max-width: 1200px; margin: 0 auto; padding: 0 5%; } .vh-action-trigger { display: inline-block; background-color: var(--vh-forest); color: var(--vh-white); font-family: var(--vh-font-serif-body); text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; border: none; cursor: pointer; text-align: center; transition: var(--vh-transition); } .vh-action-trigger:hover { background-color: var(--vh-sage); color: var(--vh-white); } .vh-btn-small { padding: 0.6rem 1.2rem; border-radius: 2px; } .vh-btn-large { padding: 1rem 2rem; border-radius: 2px; font-weight: 600; } .vh-full-width { width: 100%; } .vh-nav-region { position: sticky; top: 0; background-color: rgba(244, 241, 234, 0.95); backdrop-filter: blur(5px); z-index: 1000; border-bottom: 1px solid rgba(44, 76, 59, 0.1); padding: 1.2rem 0; } .vh-nav-flex { display: flex; justify-content: space-between; align-items: center; } .vh-logo-mark { font-family: var(--vh-font-serif-head); font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; color: var(--vh-forest); } .vh-logo-icon { font-size: 1.2rem; border: 2px solid var(--vh-forest); padding: 0.2rem 0.4rem; border-radius: 2px; } .vh-primary-links { display: flex; align-items: center; gap: 2rem; } .vh-primary-links a:not(.vh-action-trigger) { font-weight: 500; font-size: 1.05rem; } .vh-primary-links a:not(.vh-action-trigger):hover { color: var(--vh-sage); } .vh-fake-link { opacity: 0.8; } .vh-intro-offset { padding: 6rem 0 8rem; position: relative; } .vh-intro-grid { display: grid; grid-template-columns: 50% 50%; align-items: center; } .vh-intro-text { padding-right: 4rem; z-index: 2; position: relative; } .vh-headline-hero { font-size: 3.8rem; margin-bottom: 1.5rem; } .vh-subhead { font-size: 1.2rem; margin-bottom: 2.5rem; color: var(--vh-brown); opacity: 0.9; } .vh-trust-badge { margin-top: 2rem; font-size: 0.85rem; font-style: italic; border-left: 3px solid var(--vh-sage); padding-left: 1rem; color: var(--vh-forest); } .vh-intro-visual { margin-top: 4rem; margin-bottom: -6rem; margin-right: -5%; box-shadow: -15px 15px 0px var(--vh-sage); position: relative; z-index: 1; } .vh-intro-visual img { border-radius: 2px; height: 550px; } .vh-story-block { background-color: var(--vh-white); padding: 8rem 0 6rem; border-top: 1px solid rgba(44,76,59,0.1); } .vh-story-flex { display: flex; gap: 4rem; align-items: center; } .vh-story-visual { flex: 1; position: relative; } .vh-story-visual::before { content: ''; position: absolute; top: -20px; left: -20px; width: 100%; height: 100%; border: 1px solid var(--vh-forest); z-index: 0; } .vh-story-visual img { position: relative; z-index: 1; border-radius: 2px; } .vh-story-content { flex: 1; } .vh-section-title { font-size: 2.5rem; margin-bottom: 1.5rem; } .vh-center-text { text-align: center; } .vh-body-text { margin-bottom: 1.2rem; font-size: 1.1rem; } .vh-data-highlight { margin-top: 2.5rem; background-color: var(--vh-earth); padding: 2rem; border-left: 4px solid var(--vh-forest); } .vh-data-number { display: block; font-family: var(--vh-font-serif-head); font-size: 3rem; color: var(--vh-forest); line-height: 1; margin-bottom: 0.5rem; } .vh-data-label { font-size: 0.95rem; font-style: italic; } .vh-inline-link { text-decoration: underline; text-decoration-color: var(--vh-sage); } .vh-inline-link:hover { color: var(--vh-sage); } .vh-solutions-region { padding: 6rem 0; } .vh-section-desc { max-width: 600px; margin: 0 auto 4rem; font-size: 1.1rem; opacity: 0.8; } .vh-solutions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 5rem; } .vh-solution-card { background-color: var(--vh-white); padding-bottom: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.03); transition: transform 0.4s ease; } .vh-solution-card:hover { transform: translateY(-10px); } .vh-card-offset { margin-top: 3rem; } .vh-card-img { height: 260px; margin-bottom: 1.5rem; } .vh-card-body { padding: 0 2rem; } .vh-card-title { font-size: 1.5rem; margin-bottom: 1rem; } .vh-card-text { font-size: 0.95rem; opacity: 0.9; } .vh-micro-faq { max-width: 700px; margin: 0 auto; background-color: var(--vh-white); padding: 3rem; border-radius: 2px; border: 1px solid rgba(44,76,59,0.1); } .vh-faq-heading { font-size: 1.8rem; margin-bottom: 1.5rem; text-align: center; } .vh-faq-item { border-bottom: 1px solid rgba(44,76,59,0.2); margin-bottom: 1rem; } .vh-faq-question { width: 100%; text-align: left; background: none; border: none; padding: 1rem 0; font-family: var(--vh-font-serif-head); font-size: 1.2rem; color: var(--vh-forest); cursor: pointer; transition: color 0.3s; } .vh-faq-question:hover { color: var(--vh-sage); } .vh-faq-answer { display: none; padding-bottom: 1rem; font-size: 0.95rem; color: var(--vh-brown); } .vh-praise-wrapper { background-color: var(--vh-forest); color: var(--vh-earth); padding: 7rem 0; } .vh-praise-wrapper .vh-section-title { color: var(--vh-earth); margin-bottom: 4rem; } .vh-praise-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; } .vh-praise-card { background-color: rgba(244, 241, 234, 0.05); padding: 3rem; border-left: 2px solid var(--vh-sage); } .vh-praise-alt { margin-top: 3rem; } .vh-quote { font-size: 1.2rem; font-style: italic; margin-bottom: 2rem; line-height: 1.8; } .vh-client-meta { display: flex; align-items: center; gap: 1rem; } .vh-client-avatar { width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--vh-sage); } .vh-client-name { font-family: var(--vh-font-serif-head); font-weight: 600; letter-spacing: 0.5px; } .vh-inquiry-zone { padding: 8rem 0; background-color: var(--vh-white); } .vh-inquiry-flex { display: flex; gap: 5rem; align-items: flex-start; } .vh-inquiry-form-wrap { flex: 1; } .vh-inquiry-form-wrap .vh-body-text { margin-bottom: 2.5rem; } .vh-form-layout { display: flex; flex-direction: column; gap: 1.5rem; } .vh-input-group label { display: block; font-family: var(--vh-font-serif-head); margin-bottom: 0.5rem; font-size: 1rem; color: var(--vh-forest); } .vh-input-group input, .vh-input-group textarea { width: 100%; padding: 0.8rem 1rem; border: 1px solid rgba(44,76,59,0.3); background-color: var(--vh-earth); font-family: var(--vh-font-serif-body); font-size: 1rem; color: var(--vh-brown); outline: none; transition: border-color 0.3s; } .vh-input-group input:focus, .vh-input-group textarea:focus { border-color: var(--vh-forest); } .vh-tiny-disclaimer { font-size: 0.75rem; opacity: 0.6; margin-top: 1rem; line-height: 1.4; } .vh-inquiry-visual { flex: 1; position: sticky; top: 120px; } .vh-inquiry-visual img { border-radius: 2px; height: 600px; } .vh-basement { background-color: var(--vh-brown); color: var(--vh-earth); padding: 5rem 0 2rem; } .vh-basement-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4rem; margin-bottom: 4rem; border-bottom: 1px solid rgba(244,241,234,0.1); padding-bottom: 4rem; } .vh-light-text { color: var(--vh-earth); } .vh-base-brand .vh-logo-icon { border-color: var(--vh-earth); } .vh-base-desc { margin-top: 1rem; opacity: 0.8; font-style: italic; } .vh-base-heading { color: var(--vh-sage); margin-bottom: 1.5rem; font-size: 1.3rem; } .vh-base-contact p { opacity: 0.8; margin-bottom: 0.5rem; font-size: 0.95rem; } .vh-base-contact a { color: var(--vh-earth); } .vh-base-contact a:hover { color: var(--vh-sage); } .vh-footer-nav { display: flex; flex-direction: column; gap: 0.8rem; } .vh-footer-nav a { color: var(--vh-earth); opacity: 0.8; font-size: 0.95rem; } .vh-footer-nav a:hover { opacity: 1; color: var(--vh-sage); } .vh-base-bottom { text-align: center; font-size: 0.85rem; opacity: 0.6; } @media (max-width: 992px) { .vh-intro-grid, .vh-story-flex, .vh-inquiry-flex { grid-template-columns: 1fr; flex-direction: column; gap: 3rem; } .vh-intro-text { padding-right: 0; } .vh-intro-visual { margin-top: 0; margin-bottom: 0; margin-right: 0; } .vh-solutions-grid { grid-template-columns: 1fr; } .vh-card-offset { margin-top: 0; } .vh-praise-grid { grid-template-columns: 1fr; } .vh-praise-alt { margin-top: 0; } .vh-basement-grid { grid-template-columns: 1fr; gap: 2.5rem; } } @media (max-width: 768px) { .vh-headline-hero { font-size: 2.8rem; } .vh-primary-links { display: none; } .vh-section-title { font-size: 2rem; } }