* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: Georgia, 'Times New Roman', Times, serif; color: #333333; line-height: 1.6; background: #f2f2f2; }
img { max-width: 100%; height: auto; }
a { color: #4a2c0a; text-decoration: none; }
a:hover { text-decoration: underline; color: #321e06; }

/* Header */
.site-header { background: #4a2c0a; color: #ffffff; padding: 0; border-bottom: 4px solid #321e06; }
.header-inner { max-width: 1100px; margin: 0 auto; padding: 16px 20px; display: table; width: 100%; }
.header-left { display: table-cell; vertical-align: middle; }
.header-right { display: table-cell; vertical-align: middle; text-align: right; width: 260px; }
.logo { font-family: Arial, Helvetica, sans-serif; font-size: 1.7rem; font-weight: bold; color: #ffffff; letter-spacing: 0.5px; }
.logo span { color: #d4b896; }
.header-tagline { font-family: Georgia, 'Times New Roman', Times, serif; font-size: 0.9rem; color: #c9aa82; margin-top: 4px; }
.header-call-label { font-family: Arial, Helvetica, sans-serif; font-size: 0.78rem; font-weight: bold; color: #e8d5a0; display: block; text-align: right; letter-spacing: 1px; margin-bottom: 2px; }
.header-phone-number { font-family: Arial, Helvetica, sans-serif; font-size: 28px; font-weight: bold; color: #ffffff; display: block; line-height: 1.1; }
.header-free-est { font-family: Arial, Helvetica, sans-serif; font-size: 0.95rem; font-weight: bold; color: #e8d5a0; display: block; margin-top: 3px; }
.header-licensed { font-family: Georgia, 'Times New Roman', Times, serif; font-size: 0.8rem; color: #c9aa82; display: block; margin-top: 2px; }

/* Nav */
nav { background: #6b4520; width: 100%; border-top: 1px solid #4a2c0a; }
nav ul { max-width: 1100px; margin: 0 auto; list-style: none; padding: 0 20px; }
nav ul li { display: inline-block; }
nav ul li a { display: block; color: #ffffff; padding: 11px 16px; font-family: Arial, Helvetica, sans-serif; font-size: 0.92rem; font-weight: bold; text-decoration: none; }
nav ul li a:hover { background: #4a2c0a; text-decoration: none; }

/* Hero */
.hero { background: url('/images/deck-railing.jpg') center center no-repeat; background-size: cover; color: #ffffff; padding: 70px 20px; text-align: center; border-bottom: 4px solid #321e06; position: relative; }
.hero:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(40, 20, 5, 0.68); }
.hero h1 { position: relative; z-index: 1; font-family: Arial, Helvetica, sans-serif; font-size: 2.2rem; font-weight: bold; line-height: 1.3; margin-bottom: 16px; max-width: 800px; margin-left: auto; margin-right: auto; color: #ffffff; }
.hero p { position: relative; z-index: 1; font-size: 1.1rem; max-width: 650px; margin: 0 auto 28px; line-height: 1.7; color: #e8d5b8; }
.hero-cta { text-align: center; position: relative; z-index: 1; }
.btn { display: inline-block; padding: 13px 28px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 1rem; border: 1px solid #1a4d0a; cursor: pointer; text-decoration: none; margin: 4px 6px; }
.btn:hover { text-decoration: none; }
.btn-green { background: #4a9e2a; background: -webkit-gradient(linear, left top, left bottom, from(#4a9e2a), to(#2b6010)); background: linear-gradient(to bottom, #4a9e2a, #2b6010); color: #ffffff; border: 1px solid #1a4d0a; }
.btn-green:hover { background: #2b6010; color: #ffffff; }
.btn-outline { background: transparent; color: #ffffff; border: 2px solid #ffffff; }
.btn-outline:hover { background: #ffffff; color: #321e06; }

/* Section base */
.section { padding: 50px 20px; border-bottom: 1px solid #cccccc; }
.section-inner { max-width: 1100px; margin: 0 auto; }
.section-title { font-family: Arial, Helvetica, sans-serif; font-size: 1.7rem; font-weight: bold; color: #321e06; margin-bottom: 10px; text-align: center; }
.section-subtitle { text-align: center; color: #555555; max-width: 650px; margin: 0 auto 12px; font-size: 1rem; }
.section-hr { border: none; border-top: 2px solid #cccccc; max-width: 200px; margin: 0 auto 30px; }
.bg-white { background: #ffffff; }
.bg-cream { background: #f5f0e8; }

/* Services Grid */
.services-grid { display: table; width: 100%; border-collapse: collapse; }
.services-row { display: table-row; }
.service-card { background: #ffffff; border: 1px solid #cccccc; padding: 24px 20px; box-shadow: 2px 2px 5px #999999; display: inline-block; width: 31%; margin: 1%; vertical-align: top; }
.service-icon { font-size: 2rem; margin-bottom: 10px; display: block; }
.service-card h3 { font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #321e06; margin-bottom: 8px; font-size: 1.1rem; }
.service-card p { color: #555555; font-size: 0.95rem; margin-bottom: 12px; }
.service-card a { font-weight: bold; font-size: 0.92rem; color: #4a2c0a; }

.services-float { overflow: hidden; }
.services-float .service-card { float: left; width: 30%; margin: 1.5%; }

/* Form section */
.form-section { background: #f5f0e8; border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc; padding: 50px 20px; }
.form-section-inner { max-width: 1100px; margin: 0 auto; overflow: hidden; }
.form-text { float: left; width: 44%; margin-right: 6%; }
.form-text h2 { font-family: Arial, Helvetica, sans-serif; font-size: 1.6rem; font-weight: bold; color: #321e06; margin-bottom: 14px; }
.form-text p { color: #333333; line-height: 1.7; margin-bottom: 12px; }
.form-family-owned { font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #321e06; font-size: 0.95rem; margin-top: 14px; border-top: 1px solid #cccccc; padding-top: 10px; }
.form-box { float: left; width: 50%; background: #ffffff; border: 1px solid #cccccc; padding: 28px 24px; box-shadow: 2px 2px 5px #999999; }
.form-box h3 { font-family: Arial, Helvetica, sans-serif; font-size: 1.15rem; font-weight: bold; color: #321e06; margin-bottom: 16px; text-align: center; border-bottom: 1px solid #cccccc; padding-bottom: 10px; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; color: #321e06; font-family: Arial, Helvetica, sans-serif; font-weight: bold; margin-bottom: 4px; font-size: 0.9rem; }
.form-group input,
.form-group textarea,
.form-group select { width: 100%; padding: 9px 12px; border: 1px solid #cccccc; font-size: 0.95rem; font-family: Georgia, 'Times New Roman', Times, serif; background: #ffffff; color: #333333; }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { outline: none; border-color: #4a2c0a; }
.form-group textarea { resize: vertical; min-height: 80px; }
.form-submit { width: 100%; padding: 13px; background: #4a9e2a; background: -webkit-gradient(linear, left top, left bottom, from(#4a9e2a), to(#2b6010)); background: linear-gradient(to bottom, #4a9e2a, #2b6010); color: #ffffff; border: 1px solid #1a4d0a; font-family: Arial, Helvetica, sans-serif; font-size: 1rem; font-weight: bold; cursor: pointer; }
.form-submit:hover { background: #2b6010; }

/* Testimonials */
.testimonials-grid { overflow: hidden; }
.testimonial-card { float: left; width: 30%; margin: 1.5%; background: #ffffff; border: 1px solid #cccccc; padding: 22px 20px; box-shadow: 2px 2px 5px #999999; }
.testimonial-card .stars { color: #cc8800; font-size: 1.1rem; margin-bottom: 10px; }
.testimonial-card blockquote { font-family: Georgia, 'Times New Roman', Times, serif; color: #555555; font-style: italic; line-height: 1.7; margin-bottom: 12px; }
.testimonial-card .attribution { font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #321e06; font-size: 0.9rem; }

/* FAQ */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { padding: 18px 0; }
.faq-item h3 { font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #321e06; font-size: 1.02rem; margin-bottom: 8px; }
.faq-item p { font-family: Georgia, 'Times New Roman', Times, serif; color: #333333; line-height: 1.7; }
.faq-hr { border: none; border-top: 1px solid #cccccc; margin: 0; }

/* Service Areas */
.areas-grid { overflow: hidden; margin-top: 24px; }
.area-tag { float: left; background: #ffffff; border: 1px solid #4a2c0a; padding: 12px 16px; margin: 6px; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #321e06; font-size: 0.92rem; }
.area-tag:hover { background: #f5ede0; }

/* Footer */
.site-footer { background: #321e06; color: #c9aa82; padding: 40px 20px 24px; }
.footer-inner { max-width: 1100px; margin: 0 auto; overflow: hidden; }
.footer-col { float: left; width: 23%; margin-right: 2%; }
.footer-col:last-child { margin-right: 0; }
.footer-col h4 { font-family: Arial, Helvetica, sans-serif; color: #ffffff; margin-bottom: 12px; font-size: 1rem; font-weight: bold; border-bottom: 1px solid #4a2c0a; padding-bottom: 6px; }
.footer-col p,
.footer-col a { font-family: Georgia, 'Times New Roman', Times, serif; color: #c9aa82; font-size: 0.92rem; line-height: 1.8; }
.footer-col a:hover { color: #ffffff; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 5px; }
.footer-phone-link { color: #ffffff; font-size: 1.1rem; font-weight: bold; font-family: Arial, Helvetica, sans-serif; }
.footer-licensed { font-size: 0.85rem; color: #b09070; font-style: italic; margin-top: 6px; }
.footer-bottom { max-width: 1100px; margin: 24px auto 0; padding-top: 16px; border-top: 1px solid #4a2c0a; text-align: center; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 0.85rem; color: #b09070; }

/* Photo rows */
.photo-row { overflow: hidden; max-width: 1100px; margin: 0 auto 30px; padding: 0 20px; }
.photo-row img { float: left; width: 31.3%; margin: 1%; height: 200px; object-fit: cover; border: 1px solid #cccccc; }

/* Why Local section */
.why-local-text { max-width: 800px; margin: 0 auto; color: #333333; line-height: 1.85; }
.why-local-text p { margin-bottom: 16px; }
.why-local-text strong { color: #321e06; font-family: Arial, Helvetica, sans-serif; }

/* CTA Banner */
.cta-banner { background: #4a2c0a; background: -webkit-gradient(linear, left top, left bottom, from(#6b4520), to(#321e06)); background: linear-gradient(to bottom, #6b4520, #321e06); color: #ffffff; padding: 44px 20px; text-align: center; border-top: 4px solid #321e06; border-bottom: 4px solid #321e06; }
.cta-banner h2 { font-family: Arial, Helvetica, sans-serif; font-size: 1.8rem; font-weight: bold; color: #ffffff; margin-bottom: 12px; }
.cta-banner p { color: #e8d5b8; font-size: 1.05rem; margin-bottom: 22px; max-width: 550px; margin-left: auto; margin-right: auto; }

/* Clearfix */
.clearfix:after { content: ""; display: table; clear: both; }

/* Intro text */
.intro-text { max-width: 800px; margin: 0 auto; color: #555555; line-height: 1.8; text-align: center; }