/**
* Main Styles for Granite Peak Concrete
*
* Note: CSS Variables, base-structure, and theme-styles are loaded
* separately via functions.php for better WordPress compatibility.
*/
/* ============================================
Base Styles & Reset
============================================ */
* {
box-sizing: border-box;
}
body {
font-family: var(--body-font);
color: var(--text-dark);
line-height: 1.6;
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--heading-font);
font-weight: 600;
line-height: 1.2;
color: var(--primary-dark);
text-transform: uppercase;
margin-top: 0;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
/* Icons */
.icon {
display: inline-block;
vertical-align: middle;
}
/* ============================================
Top Bar
============================================ */
.top-bar {
background-color: var(--primary-dark);
color: var(--primary-white);
padding: 10px 0;
font-size: 14px;
transition: var(--transition);
}
.top-bar.hidden {
transform: translateY(-100%);
}
.top-bar-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.top-bar-left,
.top-bar-right {
display: flex;
align-items: center;
gap: 20px;
}
.top-bar-item {
color: var(--primary-white);
text-decoration: none;
display: flex;
align-items: center;
gap: 5px;
transition: var(--transition);
}
.top-bar-item:hover {
color: var(--secondary-color);
}
.top-bar-separator {
color: var(--text-light);
}
.book-now-btn {
background-color: var(--secondary-color);
color: var(--primary-white);
padding: 8px 20px;
border-radius: 4px;
text-decoration: none;
font-weight: 600;
text-transform: uppercase;
transition: var(--transition);
}
.book-now-btn:hover {
background-color: #b8956a;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(201, 166, 107, 0.3);
}
/* ============================================
Header
============================================ */
.site-header {
background-color: var(--primary-white);
box-shadow: var(--shadow);
position: sticky;
top: 0;
z-index: 1000;
transition: var(--transition);
}
.site-header.scrolled {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
}
/* Logo */
.site-logo a {
text-decoration: none;
display: inline-block;
}
/* Custom Logo Image (from WordPress Customizer) */
.site-logo .custom-logo-link {
display: block;
line-height: 0; /* Remove any extra spacing below image */
}
.site-logo .custom-logo,
.site-logo img {
height: 80px !important;
width: auto !important;
max-width: 320px;
object-fit: contain;
}
@media (max-width: 768px) {
.site-logo .custom-logo,
.site-logo img {
height: 55px !important;
max-width: 220px;
}
}
.text-logo {
display: flex;
flex-direction: column;
}
.logo-main {
font-family: var(--heading-font);
font-size: 28px;
font-weight: 700;
color: var(--primary-dark);
letter-spacing: -0.5px;
text-transform: uppercase;
line-height: 1;
}
.logo-sub {
font-family: var(--body-font);
font-size: 14px;
font-weight: 300;
color: var(--text-light);
letter-spacing: 2px;
text-transform: uppercase;
margin-top: 5px;
}
/* Navigation */
.site-navigation {
display: flex;
align-items: center;
}
.primary-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 35px;
}
.primary-menu > li {
position: relative;
}
.primary-menu > li > a {
color: var(--text-dark);
text-decoration: none;
font-weight: 500;
font-size: 16px;
transition: var(--transition);
padding: 5px 0;
display: block;
text-transform: uppercase;
}
.primary-menu > li:hover > a,
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current-menu-parent > a {
color: var(--primary-color);
}
/* Dropdown Arrow for items with children */
.primary-menu > li.menu-item-has-children > a {
display: flex;
align-items: center;
gap: 6px;
}
.primary-menu > li.menu-item-has-children > a::after {
content: '';
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
transition: transform 0.3s ease;
}
.primary-menu > li.menu-item-has-children:hover > a::after {
transform: rotate(180deg);
}
/* Dropdown Menu */
.sub-menu {
position: absolute;
top: 100%;
left: 0;
background-color: var(--primary-white);
min-width: 220px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: var(--transition);
list-style: none;
padding: 10px 0;
margin: 0;
margin-top: 10px;
border-radius: 5px;
z-index: 999;
}
.primary-menu > li:hover > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.sub-menu a {
display: block;
padding: 10px 20px;
color: var(--text-dark);
font-size: 15px;
transition: var(--transition);
text-transform: none;
}
.sub-menu a:hover {
background-color: var(--light-gray);
color: var(--primary-color);
}
/* Mobile Menu Toggle */
.mobile-menu-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 5px;
}
.mobile-menu-toggle span {
display: block;
width: 25px;
height: 3px;
background-color: var(--primary-dark);
margin: 5px 0;
transition: var(--transition);
}
/* ============================================
Mobile Menu
============================================ */
.mobile-menu {
position: fixed;
top: 0;
right: -100%;
width: 300px;
height: 100vh;
background-color: var(--primary-white);
box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
transition: var(--transition);
z-index: 2000;
overflow-y: auto;
}
.mobile-menu.active {
right: 0;
}
.mobile-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 1px solid var(--border-color);
}
.mobile-logo {
font-family: var(--heading-font);
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
}
.mobile-menu-close {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
}
.mobile-menu-list {
list-style: none;
padding: 0;
margin: 0;
}
.mobile-menu-list a {
display: block;
padding: 15px 20px;
color: var(--text-dark);
text-decoration: none;
border-bottom: 1px solid var(--border-color);
transition: var(--transition);
}
.mobile-menu-list a:hover {
background-color: var(--light-gray);
color: var(--primary-color);
}
/* Mobile Submenu */
.menu-item-wrapper {
display: flex;
align-items: center;
border-bottom: 1px solid var(--border-color);
}
.menu-item-wrapper > a {
flex: 1;
border-bottom: none !important;
}
.submenu-toggle {
background: none;
border: none;
padding: 15px 20px;
cursor: pointer;
color: var(--text-dark);
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
min-width: 50px;
}
.submenu-toggle svg {
transition: transform 0.3s ease;
}
.has-submenu.active .submenu-toggle svg {
transform: rotate(180deg);
}
.mobile-submenu {
display: none;
background-color: var(--light-gray);
list-style: none;
margin: 0;
padding: 0;
}
.has-submenu.active > .mobile-submenu {
display: block;
}
.mobile-submenu a {
padding-left: 40px;
font-size: 14px;
}
.mobile-menu-footer {
padding: 20px;
border-top: 1px solid var(--border-color);
}
.mobile-phone {
display: block;
text-align: center;
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
margin-bottom: 15px;
padding: 10px;
background: var(--light-gray);
border-radius: 4px;
}
.mobile-cta {
display: block;
text-align: center;
background-color: var(--primary-color);
color: var(--primary-white);
padding: 12px;
border-radius: 4px;
text-decoration: none;
font-weight: 600;
text-transform: uppercase;
}
/* ============================================
Main Content
============================================ */
.site-main {
min-height: 50vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
section {
padding: 80px 0;
}
/* ============================================
Forms
============================================ */
.form-group {
margin-bottom: 20px;
}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
width: 100%;
padding: 12px;
border: 1px solid var(--border-color);
border-radius: 4px;
font-size: 16px;
font-family: inherit;
transition: var(--transition);
}
input:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(26, 58, 47, 0.15);
}
textarea {
resize: vertical;
min-height: 100px;
}
/* ============================================
Buttons
============================================ */
.btn-primary,
button[type="submit"] {
display: inline-block;
background-color: var(--primary-color);
color: var(--primary-white);
padding: 14px 30px;
border-radius: 4px;
text-decoration: none;
font-weight: 600;
text-transform: uppercase;
transition: var(--transition);
border: none;
cursor: pointer;
font-size: 16px;
}
.btn-primary:hover,
button[type="submit"]:hover {
background-color: var(--tertiary-color);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(26, 58, 47, 0.3);
}
.btn-secondary {
display: inline-flex;
align-items: center;
gap: 10px;
background-color: var(--primary-white);
color: var(--primary-color);
padding: 14px 30px;
border: 2px solid var(--primary-color);
border-radius: 4px;
text-decoration: none;
font-weight: 600;
text-transform: uppercase;
transition: var(--transition);
}
.btn-secondary:hover {
background-color: var(--primary-color);
color: var(--primary-white);
}
/* ============================================
Grid Layouts & Containers
============================================ */
.grid-container {
display: grid;
gap: 30px;
}
/* Service Cards Grid */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.service-card {
text-align: center;
padding: 30px 20px;
background: var(--primary-white);
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
transition: var(--transition);
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
/* Features Grid */
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
/* Gallery Grid */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
/* Two Column Grid */
.grid-2-columns {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
/* Three Column Grid */
.grid-3-columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
/* Four Column Grid */
.grid-4-columns {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
/* Responsive Grid Adjustments */
@media (max-width: 992px) {
.grid-4-columns {
grid-template-columns: repeat(2, 1fr);
}
.grid-3-columns {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.grid-2-columns,
.grid-3-columns,
.grid-4-columns {
grid-template-columns: 1fr;
}
.services-grid {
grid-template-columns: 1fr;
}
}
/* ============================================
Trust Badges Section
============================================ */
.trust-badges-section {
background-color: var(--light-gray);
padding: 40px 0;
}
.trust-badges-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
text-align: center;
}
.trust-badge {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.trust-badge .svg-icon {
width: 48px;
height: 48px;
fill: var(--secondary-color);
}
.trust-badge span {
font-weight: 600;
color: var(--text-dark);
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.5px;
}
@media (max-width: 768px) {
.trust-badges-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
/* ============================================
Why Choose Section
============================================ */
.why-choose-section {
background-color: var(--primary-dark);
color: var(--primary-white);
padding: 80px 0;
}
.why-choose-section .section-title {
color: var(--primary-white);
text-align: center;
margin-bottom: 50px;
}
.why-choose-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
.why-choose-item h3 {
color: var(--secondary-color);
font-size: 1.25rem;
margin-bottom: 15px;
}
.why-choose-item p {
color: #cccccc;
line-height: 1.7;
}
@media (max-width: 768px) {
.why-choose-grid {
grid-template-columns: 1fr;
gap: 30px;
}
}
/* ============================================
CTA Section
============================================ */
.cta-section {
background-color: var(--secondary-color);
padding: 60px 0;
text-align: center;
}
.cta-section h2 {
color: var(--primary-white);
margin-bottom: 15px;
}
.cta-section p {
color: var(--primary-white);
opacity: 0.9;
margin-bottom: 25px;
font-size: 1.125rem;
}
.cta-section .btn-primary {
background-color: var(--primary-white);
color: var(--primary-dark);
}
.cta-section .btn-primary:hover {
background-color: var(--light-gray);
transform: translateY(-2px);
}
/* ============================================
Hero Section
============================================ */
.hero-section {
background-color: var(--primary-dark);
background-size: cover;
background-position: center;
min-height: 70vh;
display: flex;
align-items: center;
position: relative;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%);
}
.hero-content {
position: relative;
z-index: 1;
max-width: 650px;
}
.hero-content h1 {
color: var(--primary-white);
font-size: 3rem;
margin-bottom: 20px;
line-height: 1.1;
}
.hero-content p {
color: #cccccc;
font-size: 1.25rem;
margin-bottom: 30px;
line-height: 1.6;
}
.hero-buttons {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.hero-buttons .btn-secondary {
border-color: var(--primary-white);
color: var(--primary-white);
}
.hero-buttons .btn-secondary:hover {
background-color: var(--primary-white);
color: var(--primary-dark);
}
@media (max-width: 768px) {
.hero-content h1 {
font-size: 2rem;
}
.hero-content p {
font-size: 1rem;
}
.hero-buttons {
flex-direction: column;
}
.hero-buttons .btn-primary,
.hero-buttons .btn-secondary {
width: 100%;
text-align: center;
justify-content: center;
}
}
/* ============================================
Services Section
============================================ */
.services-section {
padding: 80px 0;
}
.section-title {
text-align: center;
margin-bottom: 15px;
}
.section-subtitle {
text-align: center;
color: var(--text-light);
margin-bottom: 50px;
font-size: 1.125rem;
}
.service-card .service-icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--light-gray);
border-radius: 50%;
}
.service-card .service-icon svg,
.service-card .service-icon .svg-icon {
width: 40px;
height: 40px;
fill: var(--secondary-color);
}
.service-card h3 {
margin-bottom: 15px;
font-size: 1.25rem;
}
.service-card p {
color: var(--text-light);
margin-bottom: 20px;
line-height: 1.6;
}
.service-link {
color: var(--secondary-color);
text-decoration: none;
font-weight: 600;
transition: var(--transition);
}
.service-link:hover {
color: var(--primary-color);
}
/* ============================================
Service Area Pages
============================================ */
.service-area-hero {
background-color: var(--primary-dark);
padding: 80px 0;
text-align: center;
}
.service-area-hero h1 {
color: var(--primary-white);
margin-bottom: 15px;
}
.service-area-hero .hero-subtitle {
color: #cccccc;
font-size: 1.25rem;
max-width: 600px;
margin: 0 auto;
}
.area-services {
padding: 80px 0;
}
.area-services h2 {
text-align: center;
margin-bottom: 50px;
}
.area-content {
padding: 60px 0;
background-color: var(--light-gray);
}
.area-content h2,
.area-content h3 {
margin-top: 30px;
margin-bottom: 15px;
}
.area-content p {
line-height: 1.7;
margin-bottom: 20px;
}
/* ============================================
Footer
============================================ */
.site-footer {
background-color: var(--primary-dark);
color: var(--primary-white);
padding: 60px 0 30px;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin-bottom: 40px;
}
.footer-column h3 {
color: var(--primary-white);
font-size: 20px;
margin-bottom: 20px;
text-transform: uppercase;
}
.footer-column p,
.footer-column a {
color: #cccccc;
text-decoration: none;
margin-bottom: 10px;
display: block;
}
.footer-column a:hover {
color: var(--secondary-color);
}
/* Footer Form */
.footer-contact-form .form-group {
margin-bottom: 15px;
}
.footer-contact-form input,
.footer-contact-form textarea {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--primary-white);
}
.footer-contact-form input::placeholder,
.footer-contact-form textarea::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.footer-contact-form input:focus,
.footer-contact-form textarea:focus {
background: rgba(255, 255, 255, 0.15);
border-color: var(--secondary-color);
}
/* Social Links */
.social-links {
display: flex;
gap: 15px;
margin-top: 20px;
}
.social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: var(--primary-white);
transition: var(--transition);
}
.social-links a:hover {
background-color: var(--secondary-color);
transform: translateY(-3px);
}
/* Service Areas */
.service-areas {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 30px 0;
text-align: center;
color: #cccccc;
}
/* Footer Bottom */
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 30px;
text-align: center;
color: #999999;
}
.footer-credit {
margin-top: 15px;
font-size: 14px;
}
.footer-credit a {
color: var(--secondary-color);
text-decoration: none;
}
/* ============================================
Utility Classes
============================================ */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 30px; }
.mt-4 { margin-top: 40px; }
.mt-5 { margin-top: 50px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 20px; }
.mb-3 { margin-bottom: 30px; }
.mb-4 { margin-bottom: 40px; }
.mb-5 { margin-bottom: 50px; }
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 10px; }
.pt-2 { padding-top: 20px; }
.pt-3 { padding-top: 30px; }
.pt-4 { padding-top: 40px; }
.pt-5 { padding-top: 50px; }
.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 10px; }
.pb-2 { padding-bottom: 20px; }
.pb-3 { padding-bottom: 30px; }
.pb-4 { padding-bottom: 40px; }
.pb-5 { padding-bottom: 50px; }
/* ============================================
Responsive Design
============================================ */
@media (max-width: 991px) {
/* Hide desktop navigation */
.site-navigation {
display: none;
}
/* Show mobile menu toggle */
.mobile-menu-toggle {
display: block;
}
/* Top bar mobile adjustments */
.top-bar {
display: none; /* Hide on mobile to save space */
}
/* Header adjustments */
.header-container {
padding: 15px 0;
}
.logo-main {
font-size: 24px;
}
.logo-sub {
font-size: 12px;
}
}
@media (max-width: 768px) {
/* Typography adjustments */
h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
/* Section padding */
section {
padding: 60px 0;
}
/* Footer adjustments */
.footer-content {
grid-template-columns: 1fr;
}
/* Form adjustments */
.form-row {
grid-template-columns: 1fr;
}
}
/* ========================================
SVG ICON SYSTEM - CRITICAL STYLES
Without these, icons will be 200px+ in size!
======================================== */
.svg-icon {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
fill: currentColor;
flex-shrink: 0;
}
/* Context-specific icon sizes */
.top-bar .svg-icon {
width: 16px;
height: 16px;
}
.site-header .svg-icon {
width: 20px;
height: 20px;
}
.mobile-menu .svg-icon {
width: 18px;
height: 18px;
}
.service-icon .svg-icon {
width: 48px;
height: 48px;
}
.site-footer .svg-icon {
width: 20px;
height: 20px;
}
.social-links .svg-icon {
width: 24px;
height: 24px;
}
@media (max-width: 480px) {
/* Container padding */
.container {
padding: 0 15px;
}
/* Button adjustments */
.btn-primary,
.btn-secondary,
button[type="submit"] {
width: 100%;
text-align: center;
}
/* Mobile menu width */
.mobile-menu {
width: 280px;
}
}
/* ============================================
CONSTRUCTION STYLE LAYOUTS
============================================ */
/* Full-Width Hero */
.hero-fullwidth {
position: relative;
min-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 120px 20px 100px;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--primary-color);
}
.hero-background img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
to bottom,
rgba(15, 41, 32, 0.85) 0%,
rgba(26, 58, 47, 0.75) 100%
);
}
.hero-content-centered {
position: relative;
z-index: 1;
max-width: 800px;
}
.hero-badge {
display: inline-block;
background: var(--secondary-color);
color: var(--primary-dark);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
padding: 8px 20px;
margin-bottom: 25px;
}
.hero-fullwidth h1 {
color: var(--primary-white);
font-size: 3.5rem;
font-weight: 700;
line-height: 1.1;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}
.hero-lead {
color: rgba(255, 255, 255, 0.9);
font-size: 1.25rem;
line-height: 1.6;
margin-bottom: 35px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.hero-cta-row {
display: flex;
gap: 20px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.btn-lg {
padding: 18px 40px;
font-size: 1rem;
}
.btn-phone {
display: flex;
align-items: center;
gap: 12px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.3);
padding: 12px 24px;
border-radius: 4px;
text-decoration: none;
transition: var(--transition);
}
.btn-phone:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.5);
}
.phone-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--secondary-color);
border-radius: 50%;
}
.phone-icon .svg-icon {
width: 20px;
height: 20px;
fill: var(--primary-dark);
}
.phone-text {
display: flex;
flex-direction: column;
align-items: flex-start;
color: var(--primary-white);
}
.phone-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.7;
}
.phone-number {
font-size: 1.125rem;
font-weight: 700;
}
/* Responsive Hero */
@media (max-width: 768px) {
.hero-fullwidth {
min-height: 70vh;
padding: 100px 20px 80px;
}
.hero-fullwidth h1 {
font-size: 2.25rem;
}
.hero-lead {
font-size: 1rem;
}
.hero-cta-row {
flex-direction: column;
}
.btn-lg {
width: 100%;
text-align: center;
}
.btn-phone {
width: 100%;
justify-content: center;
}
}
/* Trust Strip */
.trust-strip {
background: var(--primary-color);
padding: 0;
border-top: 4px solid var(--secondary-color);
}
.trust-strip-inner {
display: flex;
justify-content: center;
gap: 0;
}
.trust-strip .trust-item {
display: flex;
align-items: center;
gap: 10px;
padding: 20px 40px;
color: var(--primary-white);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.trust-strip .trust-item:last-child {
border-right: none;
}
.trust-strip .trust-item .svg-icon {
width: 24px;
height: 24px;
fill: var(--secondary-color);
}
@media (max-width: 900px) {
.trust-strip-inner {
flex-wrap: wrap;
}
.trust-strip .trust-item {
padding: 15px 25px;
flex: 1 1 50%;
justify-content: center;
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
}
@media (max-width: 480px) {
.trust-strip .trust-item {
flex: 1 1 100%;
font-size: 13px;
}
}
/* ============================================
Section Headers - Construction Style
============================================ */
.section-header-bold {
margin-bottom: 50px;
text-align: center;
}
.section-eyebrow {
display: inline-block;
color: var(--secondary-color);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 15px;
}
.section-eyebrow-light {
color: var(--secondary-color);
}
.section-header-bold h2 {
font-size: 2.5rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 15px;
}
.section-header-bold p {
color: var(--text-light);
font-size: 1.125rem;
max-width: 600px;
margin: 0 auto;
}
/* ============================================
Portfolio Section
============================================ */
.portfolio-section {
padding: 100px 0;
background: var(--primary-white);
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 40px;
}
.portfolio-item {
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
border-radius: 8px;
cursor: pointer;
}
.portfolio-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.portfolio-item:hover img {
transform: scale(1.1);
}
.portfolio-placeholder {
width: 100%;
height: 100%;
background: var(--light-gray);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
color: var(--text-light);
font-size: 12px;
}
.portfolio-placeholder .svg-icon {
width: 48px;
height: 48px;
fill: var(--medium-gray);
}
.portfolio-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
transform: translateY(100%);
transition: transform 0.3s ease;
}
.portfolio-item:hover .portfolio-overlay {
transform: translateY(0);
}
.portfolio-category {
display: inline-block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--secondary-color);
margin-bottom: 5px;
}
.portfolio-overlay h3 {
color: var(--primary-white);
font-size: 1.125rem;
margin: 0;
text-transform: none;
}
.portfolio-cta {
text-align: center;
}
@media (max-width: 900px) {
.portfolio-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.portfolio-grid {
grid-template-columns: 1fr;
}
}
/* ============================================
Services Section - Construction Style
============================================ */
.services-concrete {
padding: 100px 0;
background: var(--light-gray);
}
.service-tag {
display: inline-block;
background: var(--secondary-color);
color: var(--primary-dark);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 6px 14px;
margin-bottom: 15px;
}
.check-list {
list-style: none;
padding: 0;
margin: 0 0 25px 0;
}
.check-list li {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
font-weight: 500;
color: var(--text-dark);
}
.check-list .svg-icon {
width: 18px;
height: 18px;
fill: var(--secondary-color);
flex-shrink: 0;
}
/* Services Row */
.services-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
.service-block {
display: block;
padding: 35px 30px;
background: var(--primary-white);
border-radius: 8px;
text-decoration: none;
transition: var(--transition);
border-bottom: 4px solid transparent;
}
.service-block:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
border-bottom-color: var(--secondary-color);
}
.service-block-icon {
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
background: var(--light-gray);
border-radius: 12px;
margin-bottom: 20px;
}
.service-block-icon .svg-icon {
width: 36px;
height: 36px;
fill: var(--primary-color);
}
.service-block h4 {
font-size: 1.25rem;
margin-bottom: 10px;
color: var(--primary-dark);
text-transform: uppercase;
}
.service-block p {
color: var(--text-light);
line-height: 1.6;
margin-bottom: 15px;
font-size: 15px;
}
.service-block-link {
color: var(--secondary-color);
font-weight: 600;
font-size: 14px;
}
.service-block:hover .service-block-link {
color: var(--primary-color);
}
@media (max-width: 900px) {
.services-row {
grid-template-columns: 1fr;
}
}
/* ============================================
Why Section - Construction Style
============================================ */
.why-construction {
position: relative;
padding: 100px 0;
background: var(--primary-color);
overflow: hidden;
}
.why-background {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 100%);
}
.why-construction-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.why-construction-content {
color: var(--primary-white);
}
.why-construction-content h2 {
color: var(--primary-white);
font-size: 2.75rem;
line-height: 1.1;
margin-bottom: 20px;
text-transform: uppercase;
}
.lead-text {
font-size: 1.125rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 40px;
}
.why-points {
display: flex;
flex-direction: column;
gap: 30px;
}
.why-point {
display: flex;
gap: 20px;
}
.why-point-number {
font-family: var(--heading-font);
font-size: 2.5rem;
font-weight: 700;
color: var(--secondary-color);
line-height: 1;
flex-shrink: 0;
width: 60px;
}
.why-point-content h4 {
color: var(--primary-white);
font-size: 1.125rem;
margin-bottom: 8px;
text-transform: uppercase;
}
.why-point-content p {
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
margin: 0;
font-size: 15px;
}
.why-construction-image {
position: relative;
}
.why-construction-image img {
width: 100%;
border-radius: 8px;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}
.why-image-placeholder {
aspect-ratio: 4/3;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.why-image-placeholder .svg-icon {
width: 64px;
height: 64px;
fill: rgba(255, 255, 255, 0.2);
}
@media (max-width: 900px) {
.why-construction-grid {
grid-template-columns: 1fr;
gap: 50px;
}
.why-construction-content h2 {
font-size: 2rem;
}
.why-construction-image {
order: -1;
}
}
/* ============================================
Service Area Banner
============================================ */
.service-area-banner {
padding: 60px 0;
background: var(--light-gray);
text-align: center;
}
.service-area-content h2 {
font-size: 1.75rem;
margin-bottom: 10px;
text-transform: uppercase;
}
.service-area-content > p {
color: var(--text-light);
margin-bottom: 25px;
}
.area-tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.area-tags span {
background: var(--primary-white);
border: 1px solid var(--border-color);
padding: 8px 18px;
border-radius: 25px;
font-size: 14px;
font-weight: 500;
color: var(--text-dark);
}
/* ============================================
CTA Section - Construction Style
============================================ */
.cta-construction {
padding: 80px 0;
background: var(--secondary-color);
}
.cta-construction-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.cta-construction-content h2 {
color: var(--primary-dark);
font-size: 2rem;
margin-bottom: 10px;
text-transform: uppercase;
}
.cta-construction-content p {
color: rgba(0, 0, 0, 0.7);
font-size: 1.125rem;
margin: 0;
}
.cta-construction-actions {
display: flex;
align-items: center;
gap: 20px;
flex-shrink: 0;
}
.cta-construction .btn-primary {
background: var(--primary-color);
color: var(--primary-white);
}
.cta-construction .btn-primary:hover {
background: var(--tertiary-color);
}
.cta-or {
color: rgba(0, 0, 0, 0.5);
font-size: 14px;
}
.cta-phone-link {
color: var(--primary-dark);
font-size: 1.5rem;
font-weight: 700;
text-decoration: none;
transition: var(--transition);
}
.cta-phone-link:hover {
color: var(--primary-color);
}
@media (max-width: 900px) {
.cta-construction-inner {
flex-direction: column;
text-align: center;
}
.cta-construction-actions {
flex-direction: column;
}
}
/* ============================================
Featured Service Layout
============================================ */
.service-featured {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 60px;
align-items: center;
margin-bottom: 60px;
background: var(--light-gray);
border-radius: 12px;
overflow: hidden;
}
.service-featured-image {
height: 100%;
min-height: 400px;
}
.service-featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.service-image-placeholder {
width: 100%;
height: 100%;
min-height: 400px;
background: linear-gradient(135deg, var(--light-gray) 0%, #e5e5e5 100%);
display: flex;
align-items: center;
justify-content: center;
}
.service-image-placeholder .svg-icon {
width: 64px;
height: 64px;
fill: var(--secondary-color);
opacity: 0.5;
}
.service-featured-content {
padding: 40px 40px 40px 0;
}
.service-label {
display: inline-block;
background: var(--secondary-color);
color: var(--primary-white);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 5px 12px;
border-radius: 3px;
margin-bottom: 15px;
}
.service-featured-content h3 {
font-size: 2rem;
margin-bottom: 15px;
text-transform: none;
}
.service-featured-content p {
color: var(--text-light);
line-height: 1.7;
margin-bottom: 20px;
}
.service-features {
list-style: none;
padding: 0;
margin: 0 0 25px 0;
}
.service-features li {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
color: var(--text-dark);
font-weight: 500;
}
.service-features .svg-icon {
width: 16px;
height: 16px;
fill: var(--secondary-color);
}
@media (max-width: 900px) {
.service-featured {
grid-template-columns: 1fr;
gap: 0;
}
.service-featured-image {
min-height: 250px;
}
.service-featured-content {
padding: 30px;
}
}
/* ============================================
Compact Service Cards Grid
============================================ */
.services-grid-small {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
.service-card-compact {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 25px;
background: var(--primary-white);
border: 1px solid var(--border-color);
border-radius: 8px;
text-decoration: none;
transition: var(--transition);
}
.service-card-compact:hover {
border-color: var(--secondary-color);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
transform: translateY(-3px);
}
.service-card-icon {
flex-shrink: 0;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: var(--light-gray);
border-radius: 10px;
}
.service-card-icon .svg-icon {
width: 32px;
height: 32px;
fill: var(--secondary-color);
}
.service-card-content h4 {
font-size: 1.1rem;
margin-bottom: 8px;
color: var(--primary-dark);
text-transform: none;
}
.service-card-content p {
font-size: 14px;
color: var(--text-light);
line-height: 1.5;
margin-bottom: 10px;
}
.service-card-link {
font-size: 14px;
font-weight: 600;
color: var(--secondary-color);
transition: var(--transition);
}
.service-card-compact:hover .service-card-link {
color: var(--primary-color);
}
@media (max-width: 900px) {
.services-grid-small {
grid-template-columns: 1fr;
}
}
/* ============================================
Why Section - Numbered Cards
============================================ */
.why-section {
background: var(--light-gray);
padding: 100px 0;
}
.why-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.why-card {
background: var(--primary-white);
padding: 35px;
border-radius: 10px;
position: relative;
}
.why-number {
font-family: var(--heading-font);
font-size: 3rem;
font-weight: 700;
color: var(--light-gray);
line-height: 1;
margin-bottom: 15px;
}
.why-card h3 {
font-size: 1.25rem;
margin-bottom: 12px;
text-transform: none;
color: var(--primary-color);
}
.why-card p {
color: var(--text-light);
line-height: 1.6;
margin: 0;
}
@media (max-width: 768px) {
.why-grid {
grid-template-columns: 1fr;
}
}
/* ============================================
Service Area Callout
============================================ */
.area-callout {
padding: 80px 0;
background: var(--primary-white);
}
.area-callout-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
padding: 50px;
background: var(--primary-color);
border-radius: 12px;
color: var(--primary-white);
}
.area-callout-content h2 {
color: var(--primary-white);
margin-bottom: 10px;
text-transform: none;
}
.area-callout-content p {
color: rgba(255, 255, 255, 0.8);
margin-bottom: 20px;
}
.area-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.area-list span {
background: rgba(255, 255, 255, 0.15);
padding: 6px 14px;
border-radius: 20px;
font-size: 14px;
color: var(--primary-white);
}
.area-callout-cta {
text-align: center;
flex-shrink: 0;
}
.area-callout-cta p {
margin-bottom: 15px;
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
}
.area-callout-cta .btn-secondary {
background: var(--secondary-color);
border-color: var(--secondary-color);
color: var(--primary-white);
}
.area-callout-cta .btn-secondary:hover {
background: #b8956a;
border-color: #b8956a;
}
@media (max-width: 900px) {
.area-callout-inner {
flex-direction: column;
text-align: center;
padding: 40px 30px;
}
.area-list {
justify-content: center;
}
}
/* ============================================
Full Width CTA Section
============================================ */
.cta-section-full {
padding: 0;
}
.cta-background {
background: linear-gradient(135deg, var(--tertiary-color) 0%, var(--primary-color) 100%);
padding: 100px 0;
}
.cta-content {
text-align: center;
max-width: 700px;
margin: 0 auto;
}
.cta-content h2 {
color: var(--primary-white);
font-size: 2.5rem;
margin-bottom: 15px;
text-transform: none;
}
.cta-content p {
color: rgba(255, 255, 255, 0.85);
font-size: 1.125rem;
margin-bottom: 30px;
}
.cta-buttons {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
.cta-buttons .btn-primary {
background: var(--secondary-color);
}
.cta-buttons .btn-primary:hover {
background: #b8956a;
}
.btn-outline-light {
display: inline-flex;
align-items: center;
gap: 10px;
background: transparent;
color: var(--primary-white);
border: 2px solid rgba(255, 255, 255, 0.4);
padding: 14px 28px;
border-radius: 4px;
text-decoration: none;
font-weight: 600;
transition: var(--transition);
}
.btn-outline-light:hover {
border-color: var(--primary-white);
background: rgba(255, 255, 255, 0.1);
}
@media (max-width: 600px) {
.cta-background {
padding: 60px 0;
}
.cta-content h2 {
font-size: 1.75rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.cta-buttons .btn-primary,
.btn-outline-light {
width: 100%;
justify-content: center;
}
}
/* ============================================
SERVICES PAGE STYLES
============================================ */
/* Services Hero */
.services-hero {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--tertiary-color) 100%);
padding: 100px 0 0;
text-align: center;
}
.services-hero-content {
max-width: 800px;
margin: 0 auto;
padding-bottom: 60px;
}
.services-hero h1 {
color: var(--primary-white);
font-size: 3rem;
font-weight: 700;
line-height: 1.1;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}
.services-hero .hero-lead {
color: rgba(255, 255, 255, 0.9);
font-size: 1.2rem;
line-height: 1.6;
margin-bottom: 35px;
}
.services-trust-strip {
background: rgba(0, 0, 0, 0.2);
padding: 20px 0;
}
.services-trust-strip .trust-strip-inner {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
}
.services-trust-strip .trust-item {
display: flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
font-weight: 500;
}
.services-trust-strip .trust-item .svg-icon {
width: 20px;
height: 20px;
fill: var(--secondary-color);
}
@media (max-width: 768px) {
.services-hero {
padding: 80px 0 0;
}
.services-hero h1 {
font-size: 2rem;
}
.services-hero .hero-lead {
font-size: 1rem;
}
.services-trust-strip .trust-strip-inner {
gap: 20px;
}
.services-trust-strip .trust-item {
flex: 1 1 45%;
justify-content: center;
font-size: 13px;
}
}
/* Services Overview Section */
.services-overview {
padding: 100px 0 80px;
background: var(--primary-white);
}
/* Services Hub Grid - Card Style */
.services-hub-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-bottom: 50px;
}
.service-hub-card {
display: flex;
gap: 25px;
padding: 35px;
background: var(--primary-white);
border: 1px solid var(--border-color);
border-radius: 12px;
text-decoration: none;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.service-hub-card::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: var(--secondary-color);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.service-hub-card:hover {
border-color: var(--secondary-color);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
transform: translateY(-5px);
}
.service-hub-card:hover::before {
transform: scaleX(1);
}
.service-hub-icon {
flex-shrink: 0;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: var(--light-gray);
border-radius: 12px;
}
.service-hub-icon .svg-icon {
width: 40px;
height: 40px;
fill: var(--primary-color);
}
.service-hub-card:hover .service-hub-icon {
background: var(--primary-color);
}
.service-hub-card:hover .service-hub-icon .svg-icon {
fill: var(--primary-white);
}
.service-hub-content {
flex: 1;
}
.service-hub-content h3 {
font-size: 1.35rem;
margin-bottom: 10px;
color: var(--primary-dark);
text-transform: none;
transition: color 0.3s ease;
}
.service-hub-card:hover .service-hub-content h3 {
color: var(--primary-color);
}
.service-hub-content > p {
color: var(--text-light);
line-height: 1.6;
margin-bottom: 15px;
font-size: 15px;
}
.service-hub-features {
list-style: none;
padding: 0;
margin: 0 0 15px 0;
}
.service-hub-features li {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
font-size: 14px;
color: var(--text-dark);
}
.service-hub-features .svg-icon {
width: 14px;
height: 14px;
fill: var(--secondary-color);
flex-shrink: 0;
}
.service-hub-link {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--secondary-color);
font-weight: 600;
font-size: 14px;
transition: var(--transition);
}
.service-hub-link .arrow {
transition: transform 0.3s ease;
}
.service-hub-card:hover .service-hub-link {
color: var(--primary-color);
}
.service-hub-card:hover .service-hub-link .arrow {
transform: translateX(5px);
}
@media (max-width: 900px) {
.services-hub-grid {
grid-template-columns: 1fr;
}
.service-hub-card {
flex-direction: column;
text-align: center;
padding: 30px;
}
.service-hub-icon {
margin: 0 auto;
}
.service-hub-features {
display: inline-block;
text-align: left;
}
.service-hub-link {
justify-content: center;
}
}
/* Services Mid CTA */
.services-mid-cta {
text-align: center;
padding: 40px;
background: var(--light-gray);
border-radius: 12px;
}
.services-mid-cta p {
margin-bottom: 20px;
font-size: 1.1rem;
color: var(--text-dark);
}
.services-mid-cta .btn-secondary {
display: inline-flex;
align-items: center;
gap: 10px;
}
.services-mid-cta .btn-secondary .svg-icon {
width: 18px;
height: 18px;
}
/* Services Process Section */
.services-process {
padding: 100px 0;
background: var(--light-gray);
}
.process-steps {
display: flex;
align-items: flex-start;
justify-content: space-between;
max-width: 1000px;
margin: 0 auto;
}
.process-step {
flex: 1;
text-align: center;
padding: 0 20px;
position: relative;
}
.process-number {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary-color);
color: var(--primary-white);
font-family: var(--heading-font);
font-size: 1.5rem;
font-weight: 700;
border-radius: 50%;
margin: 0 auto 20px;
}
.process-content h3 {
font-size: 1.1rem;
margin-bottom: 10px;
text-transform: none;
color: var(--primary-dark);
}
.process-content p {
color: var(--text-light);
font-size: 14px;
line-height: 1.6;
margin: 0;
}
.process-connector {
flex: 0 0 60px;
height: 3px;
background: var(--secondary-color);
margin-top: 30px;
}
@media (max-width: 900px) {
.process-steps {
flex-direction: column;
gap: 30px;
}
.process-step {
display: flex;
text-align: left;
padding: 0;
gap: 20px;
}
.process-number {
flex-shrink: 0;
margin: 0;
}
.process-connector {
display: none;
}
}
/* Services Why Section Override */
.services-why .why-points {
gap: 25px;
}
.services-why .why-point-number {
font-size: 2rem;
width: 50px;
}
/* FAQ Section (General) */
.faq-section {
padding: 80px 0;
background: var(--neutral-100, #f8f9fa);
}
.faq-section .section-title {
text-align: center;
font-size: 2.25rem;
font-weight: 700;
color: var(--primary-dark);
margin-bottom: 10px;
}
.faq-section .section-subtitle {
text-align: center;
color: var(--text-light);
font-size: 1.1rem;
margin-bottom: 40px;
}
.faq-cta {
text-align: center;
margin-top: 50px;
padding: 40px;
background: var(--primary-color);
border-radius: 12px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.faq-cta p {
color: #ffffff;
font-size: 1.2rem;
margin-bottom: 20px;
font-weight: 500;
}
.faq-cta .btn-primary {
background: var(--secondary-color);
color: var(--primary-dark);
font-weight: 700;
}
.faq-cta .btn-primary:hover {
background: #d4b377;
transform: translateY(-2px);
}
/* Services FAQ Section */
.services-faq {
padding: 100px 0;
background: var(--primary-white);
}
.faq-accordion {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
border: 1px solid var(--border-color);
border-radius: 8px;
margin-bottom: 15px;
overflow: hidden;
transition: var(--transition);
}
.faq-item:hover {
border-color: var(--secondary-color);
}
.faq-item.active {
border-color: var(--primary-color);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.faq-question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
padding: 20px 25px;
background: var(--primary-white);
border: none;
cursor: pointer;
text-align: left;
font-family: var(--heading-font);
font-size: 1rem;
font-weight: 600;
color: var(--primary-dark);
transition: var(--transition);
}
.faq-question:hover {
color: var(--primary-color);
}
.faq-question span {
flex: 1;
}
.faq-question .svg-icon {
width: 20px;
height: 20px;
fill: var(--secondary-color);
transition: transform 0.3s ease;
flex-shrink: 0;
}
.faq-item.active .faq-question .svg-icon {
transform: rotate(180deg);
}
.faq-answer {
padding: 0 25px 25px;
background: var(--primary-white);
}
.faq-answer p {
color: var(--text-light);
line-height: 1.7;
margin: 0;
}
/* Services Final CTA Override */
.services-final-cta {
background: var(--secondary-color);
}
.services-final-cta .cta-construction-content h2 {
color: var(--primary-dark);
}
.services-final-cta .cta-construction-content p {
color: rgba(0, 0, 0, 0.7);
}
/* Service Area Note */
.area-note {
margin-top: 20px;
font-size: 14px;
color: var(--text-light);
}
.area-note a {
color: var(--primary-color);
font-weight: 600;
text-decoration: none;
}
.area-note a:hover {
text-decoration: underline;
}
/* ============================================
INDIVIDUAL SERVICE PAGE STYLES
============================================ */
/* Service Hero */
.service-hero {
position: relative;
min-height: 50vh;
display: flex;
align-items: center;
padding: 120px 0 80px;
}
.service-hero-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--tertiary-color) 100%);
}
.service-hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.service-hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
to bottom,
rgba(15, 41, 32, 0.85) 0%,
rgba(26, 58, 47, 0.8) 100%
);
}
.service-hero-content {
position: relative;
z-index: 1;
max-width: 700px;
}
/* Breadcrumb */
.breadcrumb {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
font-size: 14px;
}
.breadcrumb a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.3s ease;
}
.breadcrumb a:hover {
color: var(--secondary-color);
}
.breadcrumb .separator {
color: rgba(255, 255, 255, 0.4);
}
.breadcrumb .current {
color: var(--secondary-color);
}
.service-hero h1 {
color: var(--primary-white);
font-size: 3rem;
margin-bottom: 15px;
text-transform: uppercase;
}
.service-hero-lead {
color: rgba(255, 255, 255, 0.9);
font-size: 1.2rem;
line-height: 1.6;
margin-bottom: 30px;
}
@media (max-width: 768px) {
.service-hero {
min-height: auto;
padding: 100px 0 60px;
}
.service-hero h1 {
font-size: 2rem;
}
.service-hero-lead {
font-size: 1rem;
}
}
/* Service Intro Section */
.service-intro {
padding: 100px 0;
background: var(--primary-white);
}
.service-intro-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 60px;
align-items: center;
}
.service-intro-content h2 {
font-size: 2rem;
margin-bottom: 20px;
text-transform: none;
}
.service-intro-content > p {
color: var(--text-light);
line-height: 1.7;
margin-bottom: 20px;
}
.intro-features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-top: 30px;
}
.intro-feature {
display: flex;
align-items: center;
gap: 10px;
font-weight: 500;
color: var(--text-dark);
}
.intro-feature .svg-icon {
width: 20px;
height: 20px;
fill: var(--secondary-color);
flex-shrink: 0;
}
.service-intro-image img {
width: 100%;
border-radius: 12px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}
.image-placeholder {
aspect-ratio: 4/3;
background: var(--light-gray);
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
color: var(--text-light);
}
.image-placeholder .svg-icon {
width: 64px;
height: 64px;
fill: var(--medium-gray);
}
@media (max-width: 900px) {
.service-intro-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.service-intro-image {
order: -1;
}
.intro-features {
grid-template-columns: 1fr;
}
}
/* Service Options Section */
.service-options {
padding: 100px 0;
background: var(--light-gray);
}
.options-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.option-card {
background: var(--primary-white);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: var(--transition);
}
.option-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
.option-image {
height: 200px;
overflow: hidden;
}
.option-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.option-placeholder {
height: 100%;
background: linear-gradient(135deg, var(--light-gray) 0%, #e5e5e5 100%);
display: flex;
align-items: center;
justify-content: center;
}
.option-placeholder .svg-icon {
width: 48px;
height: 48px;
fill: var(--secondary-color);
opacity: 0.5;
}
.option-content {
padding: 25px;
}
.option-content h3 {
font-size: 1.25rem;
margin-bottom: 10px;
text-transform: none;
}
.option-content > p {
color: var(--text-light);
line-height: 1.6;
margin-bottom: 15px;
font-size: 15px;
}
.option-features {
list-style: none;
padding: 0;
margin: 0;
}
.option-features li {
padding: 5px 0;
padding-left: 20px;
position: relative;
font-size: 14px;
color: var(--text-dark);
}
.option-features li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--secondary-color);
font-weight: bold;
}
@media (max-width: 768px) {
.options-grid {
grid-template-columns: 1fr;
}
}
/* Why Material Section */
.why-material {
padding: 100px 0;
background: var(--primary-color);
}
.why-material-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 60px;
align-items: center;
}
.why-material-content h2 {
color: var(--primary-white);
font-size: 2rem;
margin-bottom: 15px;
text-transform: none;
}
.why-material-content > p {
color: rgba(255, 255, 255, 0.8);
margin-bottom: 30px;
}
.comparison-points {
display: flex;
flex-direction: column;
gap: 25px;
}
.comparison-point {
display: flex;
gap: 15px;
}
.comparison-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.comparison-icon.positive {
background: var(--secondary-color);
}
.comparison-icon .svg-icon {
width: 18px;
height: 18px;
fill: var(--primary-dark);
}
.comparison-content h4 {
color: var(--primary-white);
font-size: 1rem;
margin-bottom: 5px;
text-transform: none;
}
.comparison-content p {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
line-height: 1.6;
margin: 0;
}
.why-material-stats {
display: flex;
flex-direction: column;
gap: 20px;
}
.stat-card {
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 30px;
text-align: center;
}
.stat-number {
font-family: var(--heading-font);
font-size: 3rem;
font-weight: 700;
color: var(--secondary-color);
line-height: 1;
margin-bottom: 5px;
}
.stat-label {
color: var(--primary-white);
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
}
@media (max-width: 900px) {
.why-material-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.why-material-stats {
flex-direction: row;
flex-wrap: wrap;
}
.stat-card {
flex: 1 1 calc(50% - 10px);
min-width: 140px;
}
.stat-number {
font-size: 2rem;
}
}
/* Service Process Section */
.service-process {
padding: 100px 0;
background: var(--primary-white);
}
.process-timeline {
max-width: 700px;
margin: 0 auto;
position: relative;
}
.process-timeline::before {
content: '';
position: absolute;
left: 18px;
top: 0;
bottom: 0;
width: 3px;
background: var(--light-gray);
}
.timeline-item {
display: flex;
gap: 25px;
padding-bottom: 40px;
position: relative;
}
.timeline-item:last-child {
padding-bottom: 0;
}
.timeline-marker {
flex-shrink: 0;
width: 40px;
height: 40px;
background: var(--primary-color);
color: var(--primary-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--heading-font);
font-weight: 700;
position: relative;
z-index: 1;
}
.timeline-content h3 {
font-size: 1.1rem;
margin-bottom: 8px;
text-transform: none;
}
.timeline-content p {
color: var(--text-light);
line-height: 1.6;
margin: 0;
font-size: 15px;
}
/* Service Pricing Section */
.service-pricing {
padding: 100px 0;
background: var(--light-gray);
}
.pricing-content {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 60px;
align-items: start;
}
.pricing-info h2 {
font-size: 2rem;
margin-bottom: 15px;
text-transform: none;
}
.pricing-info > p {
color: var(--text-light);
margin-bottom: 25px;
}
.pricing-factors {
list-style: none;
padding: 0;
margin: 0 0 30px 0;
}
.pricing-factors li {
padding: 15px 0;
border-bottom: 1px solid var(--border-color);
}
.pricing-factors li:last-child {
border-bottom: none;
}
.pricing-factors strong {
display: block;
color: var(--primary-dark);
margin-bottom: 5px;
}
.pricing-factors span {
color: var(--text-light);
font-size: 14px;
}
.pricing-range {
background: var(--primary-white);
padding: 20px;
border-radius: 8px;
border-left: 4px solid var(--secondary-color);
}
.pricing-range p {
margin: 0;
}
.pricing-note {
margin-top: 10px !important;
font-size: 14px;
color: var(--text-light);
}
.pricing-cta-card {
background: var(--primary-color);
padding: 40px;
border-radius: 12px;
text-align: center;
}
.pricing-cta-card h3 {
color: var(--primary-white);
margin-bottom: 15px;
text-transform: none;
}
.pricing-cta-card > p {
color: rgba(255, 255, 255, 0.8);
margin-bottom: 25px;
font-size: 15px;
}
.pricing-cta-card .btn-primary {
width: 100%;
margin-bottom: 15px;
}
.or-call {
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
}
.or-call a {
color: var(--secondary-color);
text-decoration: none;
font-weight: 600;
}
@media (max-width: 900px) {
.pricing-content {
grid-template-columns: 1fr;
}
}
/* Service FAQ */
.service-faq {
padding: 100px 0;
background: var(--primary-white);
}
/* Other Services Section */
.other-services {
padding: 80px 0;
background: var(--light-gray);
}
.other-services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
.other-service-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 30px;
background: var(--primary-white);
border-radius: 12px;
text-decoration: none;
transition: var(--transition);
border: 2px solid transparent;
}
.other-service-card:hover {
border-color: var(--secondary-color);
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.other-service-icon {
width: 70px;
height: 70px;
background: var(--light-gray);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
transition: var(--transition);
}
.other-service-icon .svg-icon {
width: 32px;
height: 32px;
fill: var(--primary-color);
}
.other-service-card:hover .other-service-icon {
background: var(--primary-color);
}
.other-service-card:hover .other-service-icon .svg-icon {
fill: var(--primary-white);
}
.other-service-card h3 {
font-size: 1.1rem;
margin-bottom: 5px;
color: var(--primary-dark);
text-transform: none;
}
.other-service-card p {
color: var(--text-light);
font-size: 14px;
margin: 0;
}
@media (max-width: 768px) {
.other-services-grid {
grid-template-columns: 1fr;
}
}
/* Service Final CTA */
.service-final-cta {
padding: 100px 0;
background: linear-gradient(135deg, var(--tertiary-color) 0%, var(--primary-color) 100%);
text-align: center;
}
.final-cta-content {
max-width: 600px;
margin: 0 auto;
}
.final-cta-content h2 {
color: var(--primary-white);
font-size: 2.5rem;
margin-bottom: 15px;
text-transform: none;
}
.final-cta-content > p {
color: rgba(255, 255, 255, 0.85);
font-size: 1.1rem;
margin-bottom: 30px;
}
.final-cta-buttons {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
.final-cta-buttons .btn-primary {
background: var(--secondary-color);
}
.final-cta-buttons .btn-primary:hover {
background: #b8956a;
}
@media (max-width: 600px) {
.final-cta-content h2 {
font-size: 1.75rem;
}
.final-cta-buttons {
flex-direction: column;
align-items: center;
}
.final-cta-buttons .btn-primary,
.final-cta-buttons .btn-outline-light {
width: 100%;
}
}
/* ============================================
HERO WITH FORM STYLES
============================================ */
.hero-with-form {
position: relative;
padding: 120px 0 80px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--tertiary-color) 100%);
overflow: hidden;
}
/* Homepage hero with background image */
.homepage-hero {
min-height: 85vh;
display: flex;
align-items: center;
padding: 140px 0 100px;
}
.homepage-hero .hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
.homepage-hero .hero-background img {
width: 100%;
height: 100%;
object-fit: cover;
}
.homepage-hero .hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(15, 41, 32, 0.9) 0%,
rgba(26, 58, 47, 0.85) 50%,
rgba(15, 41, 32, 0.9) 100%
);
}
.homepage-hero .container {
position: relative;
z-index: 1;
}
.homepage-hero .hero-content h1 {
font-size: 3.25rem;
}
@media (max-width: 900px) {
.homepage-hero {
min-height: auto;
padding: 100px 0 60px;
}
.homepage-hero .hero-content h1 {
font-size: 2.25rem;
}
}
.hero-background-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 60px;
align-items: center;
position: relative;
z-index: 1;
}
.hero-content {
color: var(--primary-white);
}
.hero-content h1 {
color: var(--primary-white);
font-size: 2.75rem;
line-height: 1.15;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}
.hero-content .hero-lead {
color: rgba(255, 255, 255, 0.9);
font-size: 1.15rem;
line-height: 1.6;
margin-bottom: 25px;
max-width: 540px;
}
/* Hero Badge */
.hero-badge {
display: inline-block;
background: var(--secondary-color);
color: var(--primary-dark);
padding: 6px 16px;
border-radius: 4px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
}
/* Hero Trust Row */
.hero-trust-row {
display: flex;
flex-wrap: wrap;
gap: 25px;
margin-bottom: 25px;
}
.hero-trust-item {
display: flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
font-weight: 500;
}
.hero-trust-item .svg-icon {
width: 18px;
height: 18px;
fill: var(--secondary-color);
}
/* Hero Mobile CTA - Hidden on desktop */
.hero-mobile-cta {
display: none;
}
/* Hero Form Column */
.hero-form-column {
position: relative;
}
/* ============================================
GPC HERO FORM - Mountain Modern Style
============================================ */
.gpc-hero-form {
position: relative;
background: var(--primary-dark);
border-radius: 4px;
overflow: hidden;
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.05);
}
/* Gold accent bar at top */
.form-accent-bar {
height: 6px;
background: linear-gradient(90deg, var(--secondary-color) 0%, #d4b87a 50%, var(--secondary-color) 100%);
}
.form-inner {
padding: 28px;
}
/* Form Header */
.form-header {
margin-bottom: 24px;
text-align: center;
}
.form-badge {
display: inline-block;
background: var(--secondary-color);
color: var(--primary-dark);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
padding: 5px 12px;
margin-bottom: 12px;
}
.gpc-hero-form h3 {
color: var(--primary-white);
font-size: 1.4rem;
font-weight: 600;
margin: 0;
text-transform: none;
letter-spacing: 0;
}
/* Form Layout - Grid based */
.gpc-quick-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 12px;
}
.form-row {
display: contents;
}
.form-row-half .form-field {
/* Each field takes one column */
}
.form-row:not(.form-row-half) .form-field {
grid-column: 1 / -1;
}
.form-submit {
grid-column: 1 / -1;
}
.form-field {
position: relative;
}
.form-field label {
display: block;
color: rgba(255, 255, 255, 0.6);
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.gpc-quick-form input,
.gpc-quick-form textarea {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 4px;
color: #ffffff !important;
font-size: 15px;
font-family: var(--body-font);
transition: all 0.2s ease;
}
/* Handle browser autofill styling */
.gpc-quick-form input:-webkit-autofill,
.gpc-quick-form input:-webkit-autofill:hover,
.gpc-quick-form input:-webkit-autofill:focus,
.gpc-quick-form textarea:-webkit-autofill {
-webkit-text-fill-color: #ffffff !important;
-webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.1) inset !important;
transition: background-color 5000s ease-in-out 0s;
}
.gpc-quick-form input::placeholder,
.gpc-quick-form textarea::placeholder {
color: rgba(255, 255, 255, 0.35);
}
.gpc-quick-form input:focus,
.gpc-quick-form textarea:focus {
outline: none;
background: rgba(255, 255, 255, 0.12);
border-color: var(--secondary-color);
box-shadow: 0 0 0 2px rgba(201, 166, 107, 0.2);
}
.gpc-quick-form textarea {
resize: vertical;
min-height: 70px;
}
/* Submit Button */
.form-submit {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 24px;
background: var(--secondary-color);
border: none;
border-radius: 4px;
color: var(--primary-dark);
font-family: var(--heading-font);
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 8px;
}
.form-submit:hover {
background: #d4b87a;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(201, 166, 107, 0.35);
}
.form-submit .btn-arrow {
font-size: 18px;
transition: transform 0.3s ease;
}
.form-submit:hover .btn-arrow {
transform: translateX(4px);
}
/* Cloudflare Turnstile Widget */
.turnstile-row {
margin-bottom: 16px;
}
.turnstile-row .cf-turnstile {
display: flex;
justify-content: center;
}
.turnstile-row .cf-turnstile iframe {
max-width: 100%;
}
/* Form Footer */
.form-footer {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.form-footer-item {
display: flex;
align-items: center;
gap: 6px;
color: rgba(255, 255, 255, 0.6);
font-size: 12px;
}
.form-footer-item .svg-icon {
width: 14px;
height: 14px;
fill: var(--secondary-color);
}
.form-footer-divider {
width: 1px;
height: 16px;
background: rgba(255, 255, 255, 0.15);
}
/* Call Option */
.form-call-option {
text-align: center;
margin-top: 16px;
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
}
.form-call-option a {
color: var(--secondary-color);
font-weight: 600;
text-decoration: none;
margin-left: 5px;
}
.form-call-option a:hover {
text-decoration: underline;
}
/* Form Error */
.form-error {
background: rgba(220, 53, 69, 0.2);
border: 1px solid rgba(220, 53, 69, 0.4);
color: #ff8a8a;
padding: 10px 14px;
border-radius: 4px;
font-size: 13px;
margin-bottom: 16px;
}
/* Responsive */
@media (max-width: 400px) {
.form-inner {
padding: 24px 20px;
}
.form-row-half {
grid-template-columns: 1fr;
}
.form-footer {
flex-direction: column;
gap: 8px;
}
.form-footer-divider {
display: none;
}
}
/* Breadcrumb in hero */
.hero-with-form .breadcrumb {
margin-bottom: 15px;
}
/* Mobile Responsive */
@media (max-width: 900px) {
.hero-with-form {
padding: 100px 0 60px;
}
.hero-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.hero-content h1 {
font-size: 2rem;
}
.hero-content .hero-lead {
font-size: 1rem;
}
.hero-trust-row {
gap: 15px;
}
.hero-trust-item {
font-size: 13px;
}
/* Hide form on mobile, show CTA button */
.hero-form-column {
display: none;
}
.hero-mobile-cta {
display: block;
margin-top: 10px;
}
.hero-mobile-cta .btn-primary {
display: inline-flex;
align-items: center;
gap: 10px;
}
}
@media (max-width: 600px) {
.hero-content h1 {
font-size: 1.75rem;
}
.hero-trust-row {
flex-direction: column;
gap: 10px;
}
.hero-badge {
font-size: 11px;
padding: 5px 12px;
}
}
/* ============================================
CONTACT PAGE STYLES
============================================ */
/* Contact Hero - extends hero-with-form */
.contact-hero {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}
.contact-hero .hero-content {
padding-right: 40px;
}
/* Contact Methods */
.contact-methods {
display: flex;
flex-direction: column;
gap: 16px;
margin: 30px 0;
}
.contact-method {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
}
.contact-method:hover {
background: rgba(255, 255, 255, 0.12);
border-color: var(--secondary-color);
transform: translateX(5px);
}
.contact-method-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: var(--secondary-color);
border-radius: 50%;
flex-shrink: 0;
}
.contact-method-icon .svg-icon {
width: 24px;
height: 24px;
fill: var(--primary-dark);
}
.contact-method-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.contact-method-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.6);
font-family: var(--heading-font);
}
.contact-method-value {
font-size: 18px;
font-weight: 600;
color: #ffffff;
font-family: var(--heading-font);
}
/* Contact Hours */
.contact-hours {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 20px;
background: rgba(201, 166, 107, 0.1);
border: 1px solid rgba(201, 166, 107, 0.25);
border-radius: 8px;
margin-top: 10px;
}
.contact-hours-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contact-hours-icon .svg-icon {
width: 20px;
height: 20px;
fill: var(--secondary-color);
}
.contact-hours-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.contact-hours-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--secondary-color);
font-family: var(--heading-font);
font-weight: 600;
}
.contact-hours-value {
font-size: 15px;
color: #ffffff;
font-weight: 500;
}
.contact-hours-note {
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
}
/* Contact Process Section */
.contact-process {
padding: 80px 0;
background: #f8f9fa;
}
.process-steps-horizontal {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0;
margin-top: 50px;
}
.process-step-h {
flex: 1;
max-width: 260px;
text-align: center;
padding: 0 20px;
}
.process-step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: var(--primary-color);
color: #ffffff;
font-family: var(--heading-font);
font-size: 24px;
font-weight: 700;
border-radius: 50%;
margin-bottom: 20px;
}
.process-step-h h3 {
font-size: 18px;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.process-step-h p {
font-size: 15px;
color: #666;
line-height: 1.6;
margin: 0;
}
.process-step-connector {
width: 60px;
height: 2px;
background: linear-gradient(90deg, var(--secondary-color), rgba(201, 166, 107, 0.3));
margin-top: 28px;
flex-shrink: 0;
}
/* Contact Service Area Section */
.contact-service-area {
padding: 80px 0;
background: #ffffff;
}
.service-area-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.service-area-content .section-eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--secondary-color);
margin-bottom: 12px;
font-family: var(--heading-font);
}
.service-area-content h2 {
font-size: 2rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 16px;
line-height: 1.2;
}
.service-area-content > p {
font-size: 16px;
color: #555;
line-height: 1.7;
margin-bottom: 24px;
}
.area-tags-large {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}
.area-tag {
display: inline-block;
padding: 8px 16px;
background: var(--primary-color);
color: #ffffff;
font-size: 14px;
font-weight: 500;
border-radius: 4px;
font-family: var(--heading-font);
}
.area-note {
font-size: 14px;
color: #666;
}
.area-note a {
color: var(--primary-color);
font-weight: 600;
text-decoration: none;
}
.area-note a:hover {
text-decoration: underline;
}
/* Map Placeholder */
.service-area-map {
display: flex;
align-items: center;
justify-content: center;
}
.map-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
width: 100%;
aspect-ratio: 4 / 3;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--tertiary-color) 100%);
border-radius: 12px;
color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 40px;
}
.map-placeholder .svg-icon {
width: 64px;
height: 64px;
fill: var(--secondary-color);
opacity: 0.8;
}
.map-placeholder span {
font-family: var(--heading-font);
font-size: 18px;
font-weight: 600;
color: #ffffff;
}
.map-placeholder .map-subtitle {
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.6);
margin-top: -8px;
}
/* Contact FAQ Section */
.contact-faq {
padding: 80px 0;
background: #f8f9fa;
}
.contact-faq .section-header-bold {
text-align: center;
margin-bottom: 40px;
}
.contact-faq .faq-accordion {
max-width: 800px;
margin: 0 auto;
}
/* Contact Final CTA */
.contact-final-cta {
padding: 80px 0;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}
.final-cta-simple {
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.final-cta-simple h2 {
font-size: 2.25rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 16px;
}
.final-cta-simple p {
font-size: 18px;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 30px;
line-height: 1.6;
}
.final-cta-simple .btn-primary {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 32px;
font-size: 16px;
}
.final-cta-simple .btn-primary .svg-icon {
width: 20px;
height: 20px;
}
/* Contact Page Responsive */
@media (max-width: 1024px) {
.service-area-grid {
gap: 40px;
}
.process-step-connector {
width: 40px;
}
}
@media (max-width: 900px) {
.contact-hero .hero-content {
padding-right: 0;
}
.service-area-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.service-area-map {
order: -1;
}
.map-placeholder {
aspect-ratio: 16 / 9;
}
.process-steps-horizontal {
flex-wrap: wrap;
gap: 30px;
}
.process-step-connector {
display: none;
}
.process-step-h {
flex: 0 0 calc(50% - 15px);
max-width: none;
}
}
@media (max-width: 600px) {
.contact-process,
.contact-service-area,
.contact-faq,
.contact-final-cta {
padding: 60px 0;
}
.contact-method {
padding: 14px 16px;
}
.contact-method-icon {
width: 40px;
height: 40px;
}
.contact-method-icon .svg-icon {
width: 20px;
height: 20px;
}
.contact-method-value {
font-size: 16px;
}
.process-step-h {
flex: 0 0 100%;
padding: 0;
}
.process-step-number {
width: 48px;
height: 48px;
font-size: 20px;
}
.service-area-content h2 {
font-size: 1.75rem;
}
.area-tag {
padding: 6px 12px;
font-size: 13px;
}
.final-cta-simple h2 {
font-size: 1.75rem;
}
.final-cta-simple p {
font-size: 16px;
}
}
/* ============================================
THANK YOU PAGE STYLES
============================================ */
/* Thank You Hero */
.thank-you-hero {
padding: 120px 0 80px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
text-align: center;
}
.thank-you-content {
max-width: 600px;
margin: 0 auto;
}
.thank-you-icon {
margin-bottom: 24px;
}
.thank-you-icon .svg-icon {
width: 80px;
height: 80px;
fill: var(--secondary-color);
}
.thank-you-hero h1 {
font-size: 3rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 16px;
}
.thank-you-lead {
font-size: 1.25rem;
color: rgba(255, 255, 255, 0.85);
line-height: 1.6;
margin: 0;
}
/* What's Next Section */
.whats-next {
padding: 80px 0;
background: #ffffff;
}
.whats-next-grid {
display: grid;
grid-template-columns: 1fr 350px;
gap: 60px;
align-items: start;
}
.whats-next-main h2 {
font-size: 1.75rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 32px;
}
.next-steps {
display: flex;
flex-direction: column;
gap: 24px;
}
.next-step {
display: flex;
gap: 20px;
align-items: flex-start;
}
.next-step-number {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: var(--secondary-color);
color: var(--primary-dark);
font-family: var(--heading-font);
font-size: 18px;
font-weight: 700;
border-radius: 50%;
flex-shrink: 0;
}
.next-step-content h3 {
font-size: 18px;
font-weight: 600;
color: var(--primary-color);
margin-bottom: 6px;
}
.next-step-content p {
font-size: 15px;
color: #666;
line-height: 1.6;
margin: 0;
}
/* Need Faster Box */
.need-faster-box {
background: var(--primary-color);
padding: 32px;
border-radius: 12px;
text-align: center;
}
.need-faster-box h3 {
font-size: 18px;
font-weight: 700;
color: #ffffff;
margin-bottom: 10px;
}
.need-faster-box p {
font-size: 15px;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 20px;
line-height: 1.5;
}
.need-faster-box .btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
width: 100%;
justify-content: center;
}
.need-faster-box .btn-primary .svg-icon {
width: 18px;
height: 18px;
}
/* Browse Services Section */
.thank-you-services {
padding: 80px 0;
background: #f8f9fa;
}
.section-header-center {
text-align: center;
margin-bottom: 40px;
}
.section-header-center h2 {
font-size: 1.75rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 12px;
}
.section-header-center p {
font-size: 16px;
color: #666;
margin: 0;
}
.services-quick-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
max-width: 900px;
margin: 0 auto;
}
.service-quick-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 32px 20px;
background: #ffffff;
border: 1px solid #e5e5e5;
border-radius: 12px;
text-decoration: none;
transition: all 0.3s ease;
}
.service-quick-card:hover {
border-color: var(--secondary-color);
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}
.service-quick-icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
background: rgba(26, 58, 47, 0.08);
border-radius: 50%;
}
.service-quick-icon .svg-icon {
width: 32px;
height: 32px;
fill: var(--primary-color);
}
.service-quick-card:hover .service-quick-icon {
background: var(--secondary-color);
}
.service-quick-card:hover .service-quick-icon .svg-icon {
fill: var(--primary-dark);
}
.service-quick-card h3 {
font-size: 16px;
font-weight: 600;
color: var(--primary-color);
margin: 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Thank You Page Responsive */
@media (max-width: 900px) {
.whats-next-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.need-faster-box {
max-width: 400px;
margin: 0 auto;
}
.services-quick-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.thank-you-hero {
padding: 100px 0 60px;
}
.thank-you-icon .svg-icon {
width: 64px;
height: 64px;
}
.thank-you-hero h1 {
font-size: 2.25rem;
}
.thank-you-lead {
font-size: 1.1rem;
}
.whats-next,
.thank-you-services {
padding: 60px 0;
}
.next-step {
gap: 16px;
}
.next-step-number {
width: 36px;
height: 36px;
font-size: 16px;
}
.services-quick-grid {
gap: 16px;
}
.service-quick-card {
padding: 24px 16px;
}
.service-quick-icon {
width: 56px;
height: 56px;
}
.service-quick-icon .svg-icon {
width: 28px;
height: 28px;
}
}
/* ============================================
SERVICE AREA PAGE STYLES
============================================ */
/* Area Hero */
.area-hero {
position: relative;
padding: 140px 0 100px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
overflow: hidden;
}
.area-hero .hero-background-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
background-size: 30px 30px;
}
.area-hero-content {
position: relative;
z-index: 1;
max-width: 800px;
}
.area-badge {
display: inline-block;
padding: 6px 14px;
background: rgba(201, 166, 107, 0.2);
border: 1px solid var(--secondary-color);
border-radius: 4px;
color: var(--secondary-color);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 20px;
font-family: var(--heading-font);
}
.area-hero h1 {
font-size: 2.75rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 20px;
line-height: 1.2;
}
.area-hero-lead {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.85);
line-height: 1.7;
margin-bottom: 32px;
}
.area-hero-cta {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.area-hero-cta .btn-secondary {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #ffffff;
}
.area-hero-cta .btn-secondary:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
}
/* Area Intro Section */
.area-intro {
padding: 80px 0;
background: #ffffff;
}
.area-intro-grid {
display: grid;
grid-template-columns: 1fr 400px;
gap: 60px;
align-items: center;
}
.area-intro-content h2 {
font-size: 2rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 20px;
line-height: 1.3;
}
.area-intro-content p {
font-size: 16px;
color: #555;
line-height: 1.7;
margin-bottom: 16px;
}
.area-trust-points {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 28px;
}
.area-trust-item {
display: flex;
align-items: center;
gap: 8px;
color: var(--primary-color);
font-weight: 600;
font-size: 14px;
}
.area-trust-item .svg-icon {
width: 20px;
height: 20px;
fill: var(--secondary-color);
}
/* Map Embed Styling */
.area-intro-map,
.coverage-map {
width: 100%;
}
.map-embed {
width: 100%;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.map-embed iframe {
width: 100% !important;
height: 400px !important;
border: none;
display: block;
}
.area-intro-map .image-placeholder,
.area-intro-image .image-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
width: 100%;
aspect-ratio: 1;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--tertiary-color) 100%);
border-radius: 12px;
padding: 40px;
}
.area-intro-map .image-placeholder .svg-icon,
.area-intro-image .image-placeholder .svg-icon {
width: 48px;
height: 48px;
fill: var(--secondary-color);
opacity: 0.7;
}
.area-intro-map .image-placeholder span,
.area-intro-image .image-placeholder span {
font-family: var(--heading-font);
font-size: 18px;
font-weight: 600;
color: rgba(255, 255, 255, 0.8);
}
/* Area Services Section */
.area-services {
padding: 80px 0;
background: #f8f9fa;
}
.area-services .section-header-bold {
text-align: center;
margin-bottom: 50px;
}
.area-services .section-header-bold h2 {
font-size: 2rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 12px;
}
.area-services .section-header-bold p {
font-size: 16px;
color: #666;
}
.area-services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.area-service-card {
display: flex;
flex-direction: column;
padding: 32px 24px;
background: #ffffff;
border: 1px solid #e5e5e5;
border-radius: 12px;
text-decoration: none;
transition: all 0.3s ease;
}
.area-service-card:hover {
border-color: var(--secondary-color);
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}
.area-service-icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
background: rgba(26, 58, 47, 0.08);
border-radius: 12px;
margin-bottom: 20px;
}
.area-service-icon .svg-icon {
width: 32px;
height: 32px;
fill: var(--primary-color);
}
.area-service-card:hover .area-service-icon {
background: var(--secondary-color);
}
.area-service-card:hover .area-service-icon .svg-icon {
fill: var(--primary-dark);
}
.area-service-card h3 {
font-size: 18px;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 12px;
}
.area-service-card p {
font-size: 14px;
color: #666;
line-height: 1.6;
margin-bottom: 16px;
flex-grow: 1;
}
.area-service-link {
font-size: 14px;
font-weight: 600;
color: var(--secondary-color);
font-family: var(--heading-font);
}
.area-service-card:hover .area-service-link {
color: var(--primary-color);
}
/* Area Neighborhoods Section */
.area-neighborhoods {
padding: 80px 0;
background: #ffffff;
}
.neighborhoods-content {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.neighborhoods-content h2 {
font-size: 1.75rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 12px;
}
.neighborhoods-content > p {
font-size: 16px;
color: #666;
margin-bottom: 32px;
}
.neighborhoods-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
text-align: left;
}
.neighborhoods-grid ul {
list-style: none;
padding: 0;
margin: 0;
}
.neighborhoods-grid li {
padding: 10px 0;
border-bottom: 1px solid #eee;
color: #444;
font-size: 15px;
}
.neighborhoods-grid li:last-child {
border-bottom: none;
}
/* Area Nearby Section */
.area-nearby {
padding: 60px 0;
background: #f8f9fa;
text-align: center;
}
.area-nearby h2 {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 12px;
}
.area-nearby > .container > p {
font-size: 16px;
color: #666;
margin-bottom: 24px;
}
.nearby-tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-bottom: 24px;
}
.nearby-tag {
display: inline-block;
padding: 10px 20px;
background: var(--primary-color);
color: #ffffff;
font-size: 14px;
font-weight: 500;
border-radius: 6px;
font-family: var(--heading-font);
}
.nearby-note {
font-size: 14px;
color: #666;
}
.nearby-note a {
color: var(--primary-color);
font-weight: 600;
text-decoration: none;
}
.nearby-note a:hover {
text-decoration: underline;
}
/* Area CTA Section */
.area-cta {
padding: 80px 0;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}
.area-cta-content {
text-align: center;
max-width: 700px;
margin: 0 auto;
}
.area-cta-content h2 {
font-size: 2rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 16px;
}
.area-cta-content p {
font-size: 18px;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 32px;
}
.area-cta-buttons {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.btn-outline-light {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
background: transparent;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 4px;
color: #ffffff;
font-family: var(--heading-font);
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
transition: all 0.3s ease;
}
.btn-outline-light:hover {
background: rgba(255, 255, 255, 0.1);
border-color: #ffffff;
}
.btn-outline-light .svg-icon {
width: 18px;
height: 18px;
fill: currentColor;
}
/* Other Service Areas Section */
.area-other {
padding: 40px 0;
background: #f8f9fa;
border-top: 1px solid #e5e5e5;
}
.area-other .container {
text-align: center;
}
.area-other h3 {
font-size: 14px;
font-weight: 600;
color: #888;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 16px;
}
.other-areas-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px 24px;
}
.other-areas-links a {
color: var(--primary-color);
font-size: 15px;
font-weight: 500;
text-decoration: none;
}
.other-areas-links a:hover {
color: var(--secondary-color);
text-decoration: underline;
}
/* Service Area Page Responsive */
@media (max-width: 1024px) {
.area-services-grid {
grid-template-columns: repeat(2, 1fr);
}
.area-intro-grid {
gap: 40px;
}
}
@media (max-width: 900px) {
.area-hero {
padding: 120px 0 80px;
}
.area-hero h1 {
font-size: 2.25rem;
}
.area-intro-grid {
grid-template-columns: 1fr;
}
.area-intro-map,
.area-intro-image {
order: -1;
}
.area-intro-map .image-placeholder,
.area-intro-image .image-placeholder {
aspect-ratio: 16 / 9;
}
.map-embed iframe {
height: 300px !important;
}
.neighborhoods-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.area-hero {
padding: 100px 0 60px;
}
.area-hero h1 {
font-size: 1.75rem;
}
.area-hero-lead {
font-size: 1rem;
}
.area-hero-cta {
flex-direction: column;
}
.area-hero-cta .btn-primary,
.area-hero-cta .btn-secondary {
width: 100%;
justify-content: center;
}
.area-intro,
.area-services,
.area-neighborhoods,
.area-cta {
padding: 60px 0;
}
.area-intro-content h2,
.area-services .section-header-bold h2,
.area-cta-content h2 {
font-size: 1.5rem;
}
.area-services-grid {
grid-template-columns: 1fr;
}
.neighborhoods-grid {
grid-template-columns: 1fr;
}
.area-trust-points {
flex-direction: column;
gap: 12px;
}
.nearby-tag {
padding: 8px 16px;
font-size: 13px;
}
.area-cta-buttons {
flex-direction: column;
}
.area-cta-buttons .btn-primary,
.area-cta-buttons .btn-outline-light {
width: 100%;
justify-content: center;
}
}
/* ==========================================================================
SERVICE AREAS HUB PAGE
========================================================================== */
.service-areas-hub {
background: var(--primary-white);
}
/* Hero Section */
.service-areas-hero {
position: relative;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
padding: 120px 0 100px;
text-align: center;
}
.service-areas-hero .hero-background-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
background-size: 30px 30px;
}
.hero-content-centered {
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto;
}
.service-areas-hero .hero-badge {
display: inline-block;
background: rgba(201, 166, 107, 0.2);
color: var(--secondary-color);
padding: 8px 20px;
border-radius: 30px;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
}
.service-areas-hero h1 {
color: #ffffff;
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 2px;
}
.service-areas-hero .hero-lead {
color: rgba(255, 255, 255, 0.9);
font-size: 1.25rem;
line-height: 1.7;
margin-bottom: 35px;
}
.hero-cta-row {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
/* Service Areas Grid Section */
.service-areas-grid-section {
padding: 100px 0;
background: var(--neutral-100, #f8f9fa);
}
.service-areas-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 50px;
}
.service-area-card {
position: relative;
background: #ffffff;
border-radius: 12px;
padding: 40px 30px;
text-align: center;
text-decoration: none;
border: 2px solid transparent;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.service-area-card:hover {
border-color: var(--secondary-color);
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
.service-area-card.featured {
border-color: var(--primary-color);
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}
.service-area-card.featured h3,
.service-area-card.featured p,
.service-area-card.featured .area-region {
color: #ffffff;
}
.service-area-card.featured .area-card-icon svg {
fill: var(--secondary-color);
}
.service-area-card.featured .area-card-link {
color: var(--secondary-color);
}
.featured-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--secondary-color);
color: var(--primary-dark);
padding: 5px 15px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.area-card-icon {
margin-bottom: 20px;
}
.area-card-icon svg {
width: 48px;
height: 48px;
fill: var(--primary-color);
}
.service-area-card h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-dark);
margin-bottom: 5px;
}
.area-region {
display: block;
font-size: 0.875rem;
color: var(--text-light);
margin-bottom: 15px;
}
.service-area-card p {
color: var(--text-light);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 20px;
}
.area-card-link {
display: inline-block;
color: var(--primary-color);
font-weight: 600;
font-size: 0.9rem;
transition: color 0.3s ease;
}
.service-area-card:hover .area-card-link {
color: var(--secondary-color);
}
/* Coverage Section */
.coverage-section {
padding: 100px 0;
background: #ffffff;
}
.coverage-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.coverage-content h2 {
font-size: 2.25rem;
font-weight: 700;
color: var(--primary-dark);
margin-bottom: 20px;
}
.coverage-content > p {
color: var(--text-light);
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 30px;
}
.coverage-lists {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 30px;
}
.coverage-column h4 {
font-size: 1rem;
font-weight: 700;
color: var(--primary-color);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid var(--secondary-color);
}
.coverage-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.coverage-column li {
padding: 8px 0;
color: var(--text-dark);
font-size: 0.95rem;
display: flex;
align-items: center;
gap: 10px;
}
.coverage-column li::before {
content: '';
width: 6px;
height: 6px;
background: var(--secondary-color);
border-radius: 50%;
flex-shrink: 0;
}
.coverage-note {
background: var(--neutral-100, #f8f9fa);
padding: 20px;
border-radius: 8px;
color: var(--text-dark);
}
.coverage-note a {
color: var(--primary-color);
font-weight: 600;
}
.coverage-image {
display: flex;
justify-content: center;
align-items: center;
}
.coverage-placeholder {
width: 100%;
aspect-ratio: 4/3;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 15px;
}
.coverage-placeholder svg {
width: 64px;
height: 64px;
fill: var(--secondary-color);
}
.coverage-placeholder span {
color: #ffffff;
font-size: 1.25rem;
font-weight: 600;
}
/* Services Overview */
.services-overview {
padding: 100px 0;
background: var(--neutral-100, #f8f9fa);
}
.services-overview-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
margin-top: 50px;
}
.service-overview-card {
background: #ffffff;
border-radius: 12px;
padding: 35px 25px;
text-align: center;
text-decoration: none;
border: 2px solid transparent;
transition: all 0.3s ease;
}
.service-overview-card:hover {
border-color: var(--secondary-color);
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.service-overview-icon {
width: 70px;
height: 70px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.service-overview-icon svg {
width: 36px;
height: 36px;
fill: var(--secondary-color);
}
.service-overview-card h3 {
font-size: 1.15rem;
font-weight: 700;
color: var(--primary-dark);
margin-bottom: 10px;
}
.service-overview-card p {
color: var(--text-light);
font-size: 0.9rem;
line-height: 1.5;
margin: 0;
}
/* CTA Section */
.service-areas-cta {
padding: 100px 0;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
text-align: center;
}
.cta-content-centered {
max-width: 700px;
margin: 0 auto;
}
.service-areas-cta h2 {
color: #ffffff;
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 15px;
}
.service-areas-cta p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.15rem;
line-height: 1.7;
margin-bottom: 35px;
}
.cta-buttons {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
/* Responsive */
@media (max-width: 1024px) {
.service-areas-cards {
grid-template-columns: repeat(2, 1fr);
}
.services-overview-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.service-areas-hero {
padding: 80px 0 60px;
}
.service-areas-hero h1 {
font-size: 2.5rem;
}
.service-areas-cards {
grid-template-columns: 1fr;
gap: 20px;
}
.coverage-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.coverage-image {
order: -1;
}
.coverage-lists {
grid-template-columns: 1fr;
gap: 25px;
}
.services-overview-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.service-areas-cta h2 {
font-size: 2rem;
}
.cta-buttons {
flex-direction: column;
}
.cta-buttons .btn-primary,
.cta-buttons .btn-outline-light {
width: 100%;
justify-content: center;
}
}