@charset "UTF-8"; /* ============================================ SELF-HOSTED FONTS (variable, latin subset) Replaces the render-blocking fonts.googleapis.com stylesheet. One variable woff2 per family covers every weight. unicode-range is Google's latin block. The woff2 files are preloaded in each page . ============================================ */ @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/montserrat-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================ CSS CUSTOM PROPERTIES ============================================ */ :root { /* Colors — exact brand kit */ --color-bg-white: #ffffff; --color-bg-warm: #eee6d8; /* brand cream — primary light bg */ --color-bg-warm-soft: #f5efe5; /* slightly lighter cream for subtle bg */ --color-bg-dark: #1c1d1d; /* brand charcoal — nav, dark sections */ --color-bg-darker: #0a0b0b; /* deepest charcoal — footer */ --color-secondary: #333535; /* brand slate */ --color-text: #1c1d1d; --color-text-light: #615e58; /* warm grey for body copy on cream */ --color-text-on-dark: #eee6d8; /* cream text on charcoal */ --color-accent: #8a6a3c; /* brand copper */ --color-accent-hover: #8b6e47; /* darker copper for hover */ --color-accent-light: #c4a989; /* lighter copper accent */ --color-accent-bg: #f3ebde; /* subtle cream tint */ --color-sand: #a89476; /* tan/sand neutral */ --color-border: #d8cdb6; /* warm border on cream */ /* Typography — Manrope (close substitute for Brandon Grotesque) for headings, Montserrat for body. License Brandon Grotesque later and swap --font-display. */ --font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Manrope', 'Montserrat', -apple-system, sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* Spacing */ --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 2rem; --spacing-lg: 4rem; --spacing-xl: 4.5rem; --spacing-xxl: 6rem; /* Layout */ --container-max: 1400px; --nav-height: 100px; /* Transitions */ --transition-fast: 0.2s ease; --transition-medium: 0.4s ease; --transition-slow: 0.6s ease; } /* ============================================ RESET & BASE ============================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-family); font-size: 16px; line-height: 1.6; color: var(--color-text); background: var(--color-bg-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; transition: var(--transition-fast); } ul { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } /* ============================================ TYPOGRAPHY ============================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--font-weight-bold); line-height: 1.2; margin: 0; letter-spacing: -0.01em; } h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: var(--font-weight-extrabold); letter-spacing: -0.02em; } h2 { font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -0.015em; } h3 { font-size: clamp(1.5rem, 3vw, 2.5rem); } .eyebrow { display: block; font-size: 0.75rem; font-weight: var(--font-weight-semibold); letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-text-light); margin-bottom: var(--spacing-sm); } /* ============================================ BUTTONS ============================================ */ .btn { display: inline-block; padding: 0.875rem 2rem; font-size: 0.9375rem; font-weight: var(--font-weight-semibold); border-radius: 4px; transition: var(--transition-fast); white-space: nowrap; } .btn-primary { background: var(--color-accent); color: var(--color-bg-white); } .btn-primary:hover { background: var(--color-accent-hover); transform: translateY(-1px); } .btn-large { padding: 16px 40px; font-size: 1.0625rem; display: inline-block; width: auto; } /* ============================================ NAVIGATION ============================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(0, 0, 0, 0.06); z-index: 1000; transition: var(--transition-medium); } .nav.scrolled { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } /* Utility Bar */ .utility-bar { height: 36px; background: var(--color-bg-white); border-bottom: 1px solid #f0f0f0; } .utility-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--spacing-md); height: 100%; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--color-text-light); } .utility-contact { display: flex; align-items: center; gap: 12px; } /* Main Nav */ .main-nav { height: 88px; background: var(--color-bg-white); } .nav-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--spacing-md); height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); } .nav-logo img { height: 76px; width: auto; display: block; } .nav-links { display: flex; gap: var(--spacing-lg); } .nav-links a { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--color-text); text-transform: uppercase; transition: var(--transition-fast); } .nav-links a:hover { color: var(--color-accent); } .nav-links a.active { color: var(--color-accent); } .nav-caret { font-size: 12px; vertical-align: middle; margin-left: 3px; transition: transform 0.2s ease; } .has-dropdown:hover .nav-caret { transform: rotate(180deg); } /* Services Dropdown */ .has-dropdown { position: relative; } .services-dropdown { position: absolute; top: calc(100% + 8px); left: 0; width: auto; min-width: 220px; background: var(--color-bg-white); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); border-radius: 10px; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; transform: translateY(-4px); padding: 0.5rem 0; z-index: 999; } .has-dropdown:hover .services-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--spacing-md); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-lg); } .dropdown-item { display: flex; flex-direction: column; gap: 8px; padding: var(--spacing-md); border-radius: 8px; transition: var(--transition-fast); } .dropdown-item:hover { background: var(--color-bg-warm); } .dropdown-item i { font-size: 24px; color: var(--color-accent); } .dropdown-item h4, .dropdown-item .dropdown-item-title { font-size: 14px; font-weight: var(--font-weight-semibold); color: var(--color-text); margin: 0; } .dropdown-item p { font-size: 12px; color: var(--color-text-light); margin: 0; } .nav-cta { display: flex; align-items: center; gap: var(--spacing-sm); } .btn-compact { padding: 10px 20px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; } /* Hamburger Menu */ .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; z-index: 1001; } .hamburger span { display: block; width: 25px; height: 3px; background: var(--color-text); transition: var(--transition-fast); border-radius: 2px; } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); } /* Mobile nav */ @media (max-width: 1024px) { .hamburger { display: flex; } .nav-links { position: fixed; top: var(--nav-height); left: 0; right: 0; background: var(--color-bg-white); flex-direction: column; padding: var(--spacing-md); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform var(--transition-medium), opacity var(--transition-medium), visibility var(--transition-medium); gap: var(--spacing-sm); z-index: 998; } .nav-links.active { display: flex; transform: translateY(0); opacity: 1; visibility: visible; } .nav-links li { text-align: left; } /* consistent indent levels: top item > service item > sub item */ .nav-list-dropdown { padding: 0 0 0 4px; } .nav-list-item { padding: 0.65rem 4px; font-size: 1rem; justify-content: flex-start; } .nav-list-sub { margin: 0 0 0.5rem 2rem; padding-left: 0.9rem; } .nav-list-subitem { display: block; padding: 0.5rem 0; font-size: 0.95rem; } .nav-links a { display: block; padding: var(--spacing-sm) 0; font-size: 1.125rem; } .services-dropdown { position: static; width: 100%; opacity: 1; visibility: visible; box-shadow: none; padding: 0; z-index: auto; } .has-dropdown:hover .services-dropdown { opacity: 1; visibility: visible; } .dropdown-container { display: flex; flex-direction: column; gap: 0; padding: 0; } .dropdown-item { flex-direction: row; align-items: center; gap: 0; padding: 0.6rem 0; border-radius: 0; } .dropdown-item i, .dropdown-item p { display: none; } .dropdown-item h4, .dropdown-item .dropdown-item-title { font-size: 0.95rem; color: var(--color-text-light); font-weight: 500; } .nav-phone { display: none; } .nav-cta .btn { font-size: 0.875rem; padding: 0.75rem 1.5rem; } } /* ============================================ HERO ============================================ */ .hero { margin-top: var(--nav-height); min-height: calc(100vh - var(--nav-height)); display: flex; position: relative; } .hero-image { flex: 0 0 55%; overflow: hidden; } .hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero-content { flex: 0 0 45%; background: var(--color-bg-white); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: var(--spacing-xl) var(--spacing-lg); } .hero-location { font-size: 13px; color: #8a6a3c; font-weight: 500; letter-spacing: 0.05em; display: block; margin-bottom: 16px; } .hero-location i { font-size: 14px; } .hero-headline { max-width: 520px; margin-bottom: var(--spacing-md); line-height: 1.1; } .hero-subtext { font-size: 1.125rem; color: #4a4a4a; max-width: 480px; margin-bottom: var(--spacing-lg); line-height: 1.7; } .hero-content .btn, .hero-content a.btn { width: auto; display: inline-block; } .hero-cta-group { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 32px; } .btn-outline-dark { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border: 2px solid #1c1d1d; background: transparent; color: #1c1d1d; font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border-radius: 4px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .btn-outline-dark:hover { background: #1c1d1d; color: #ffffff; } @media (max-width: 640px) { .hero-cta-group { flex-direction: column; align-items: stretch; } .hero-cta-group .btn-primary, .hero-cta-group .btn-outline-dark { width: 100%; text-align: center; justify-content: center; } } @media (max-width: 968px) { /* Mobile/tablet hero: text overlaid on the image, not stacked below it */ .hero { flex-direction: column; position: relative; min-height: calc(100svh - var(--nav-height)); } .hero .hero-image { position: absolute; inset: 0; flex: none; height: 100%; } .hero .hero-image::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(28, 29, 29, 0.15) 0%, rgba(28, 29, 29, 0.45) 48%, rgba(28, 29, 29, 0.86) 100%); } .hero-content { position: relative; z-index: 2; flex: none; background: transparent; justify-content: flex-end; min-height: calc(100svh - var(--nav-height)); padding: var(--spacing-xl) var(--spacing-lg); } .hero-headline { color: #ffffff; text-shadow: 0 1px 18px rgba(0, 0, 0, 0.4); } .hero-subtext { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35); } .hero-location { color: #d8c39a; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); } .hero-content .btn-outline-dark { border-color: rgba(255, 255, 255, 0.75); color: #ffffff; } .hero-content .btn-outline-dark:hover { background: #ffffff; color: #1c1d1d; } } /* Contractor license — a distinct credential line, not buried in the paragraph */ .hero-license { margin: 20px 0 0; padding-top: 15px; border-top: 1px solid rgba(0, 0, 0, 0.12); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6f5a33; } /* ============================================ MARQUEE ============================================ */ .marquee { background: var(--color-bg-dark); padding: var(--spacing-md) 0; overflow: hidden; white-space: nowrap; } .marquee-content { display: inline-block; animation: marquee 40s linear infinite; font-size: 0.9375rem; font-weight: var(--font-weight-medium); color: var(--color-bg-white); letter-spacing: 0.05em; } .marquee-content span { display: inline-block; padding-right: 2rem; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @media (max-width: 768px) { .marquee { padding: 8px 0; } .marquee-content { font-size: 0.72rem; letter-spacing: 0.03em; } .marquee-content span { padding-right: 1.4rem; } } /* ============================================ TRUST BAR ============================================ */ .trust-bar { padding: var(--spacing-md) 0; background: var(--color-bg-white); border-top: 1px solid rgba(0, 0, 0, 0.06); border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .trust-bar-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--spacing-md); display: flex; justify-content: center; align-items: center; gap: var(--spacing-lg); } .trust-badge { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-align: center; } .trust-label { font-size: 0.6875rem; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-light); } .trust-value { font-size: 0.9375rem; font-weight: var(--font-weight-bold); color: var(--color-text); } .trust-divider { width: 1px; height: 40px; background: rgba(0, 0, 0, 0.1); } @media (max-width: 768px) { .trust-bar-container { flex-wrap: wrap; gap: var(--spacing-md); } .trust-divider { display: none; } .trust-badge { flex: 0 0 calc(50% - var(--spacing-sm)); } } /* ============================================ SERVICES ============================================ */ .services { padding: var(--spacing-xxl) 0 var(--spacing-xl); background: var(--color-bg-white); } .services-header { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--spacing-md); margin-bottom: var(--spacing-lg); } .services-header h2 { max-width: 600px; } .services-scroll-container { position: relative; } .services-scroll { display: flex; gap: var(--spacing-md); overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; padding: 0 var(--spacing-md); scrollbar-width: none; -ms-overflow-style: none; } .services-scroll::-webkit-scrollbar { display: none; } .service-panel { display: block; /* the panel itself is now the card link */ text-decoration: none; color: inherit; position: relative; flex: 0 0 420px; height: calc(100vh - var(--nav-height) - 120px); min-height: 500px; border-radius: 8px; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; transition: transform var(--transition-medium); } .service-panel:hover { transform: scale(1.02); } .service-panel:hover::before { background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent); } .service-panel::before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 50%; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); z-index: 1; } .service-content { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--spacing-lg); z-index: 2; color: var(--color-bg-white); } .service-content h3 { font-size: 2rem; margin-bottom: var(--spacing-xs); } .service-content p { font-size: 0.9375rem; margin-bottom: var(--spacing-sm); opacity: 0.9; } .service-link { color: var(--color-bg-white); font-weight: var(--font-weight-semibold); font-size: 0.875rem; } .service-link:hover { opacity: 0.8; } .services-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; background: var(--color-bg-white); border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); color: var(--color-text); transition: var(--transition-fast); z-index: 10; display: flex; align-items: center; justify-content: center; } .services-nav i { font-size: 1.25rem; } .services-nav:hover { background: var(--color-accent); color: var(--color-bg-white); } .services-nav-prev { left: var(--spacing-md); } .services-nav-next { right: var(--spacing-md); } @media (max-width: 768px) { .service-panel { flex: 0 0 300px; height: 500px; } .services-nav { display: none; } } /* ============================================ S-SEAM DIFFERENTIATOR ============================================ */ .s-seam { padding: var(--spacing-xxl) 0; background: #1e2a1e; } .s-seam-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--spacing-md); display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); align-items: center; } .s-seam-content h2 { margin-bottom: var(--spacing-md); } .s-seam-content p { font-size: 1.0625rem; line-height: 1.8; color: rgba(255, 255, 255, 0.85); margin-bottom: var(--spacing-lg); } .s-seam-stats { display: flex; gap: var(--spacing-lg); } .s-seam-stat { display: flex; flex-direction: column; } .s-seam-stat-number { font-size: 2.5rem; font-weight: var(--font-weight-extrabold); color: var(--color-bg-white); line-height: 1; margin-bottom: var(--spacing-xs); } .s-seam-stat-label { font-size: 0.875rem; font-weight: var(--font-weight-medium); color: rgba(255, 255, 255, 0.6); text-transform: uppercase; letter-spacing: 0.05em; } .s-seam-image img { width: 100%; height: auto; border-radius: 8px; } @media (max-width: 968px) { .s-seam-container { grid-template-columns: 1fr; gap: var(--spacing-lg); } .s-seam-stats { gap: var(--spacing-md); } .s-seam-stat-number { font-size: 2rem; } } /* ============================================ FEATURED WORK ============================================ */ .featured-work { padding: var(--spacing-xxl) 0; background: var(--color-bg-white); } .featured-work-layout { max-width: var(--container-max); margin: 0 auto; display: flex; align-items: center; gap: 0; position: relative; } .featured-work-image { flex: 0 0 65%; } .featured-work-image img { width: 100%; height: auto; display: block; } .featured-work-panel { flex: 0 0 35%; background: var(--color-bg-white); padding: var(--spacing-xl) var(--spacing-lg); margin-left: -60px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); position: relative; z-index: 2; } .project-type { display: block; font-size: 0.875rem; font-weight: var(--font-weight-semibold); color: var(--color-accent); margin-bottom: var(--spacing-sm); } .project-name { font-size: 2.25rem; margin-bottom: var(--spacing-md); } .project-description { font-size: 1rem; line-height: 1.7; color: var(--color-text-light); margin-bottom: var(--spacing-md); } .project-stats { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); margin-bottom: var(--spacing-md); } .stat-pill { padding: 0.5rem 1rem; background: var(--color-bg-warm); border-radius: 20px; font-size: 0.8125rem; font-weight: var(--font-weight-medium); } .project-link { font-weight: var(--font-weight-semibold); color: var(--color-accent); } .project-link:hover { color: var(--color-accent-hover); } @media (max-width: 1024px) { .featured-work-layout { flex-direction: column; } .featured-work-image { flex: none; width: 100%; } .featured-work-panel { flex: none; width: calc(100% - 2 * var(--spacing-md)); margin: -40px var(--spacing-md) 0; } } /* ============================================ ABOUT ============================================ */ .about { padding: var(--spacing-xxl) 0; background: var(--color-bg-white); } .about-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--spacing-md); display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); align-items: center; } .about-content h2 { margin-bottom: var(--spacing-md); } .about-content p { font-size: 1.0625rem; line-height: 1.8; color: var(--color-text-light); margin-bottom: var(--spacing-md); } .inline-link { font-weight: var(--font-weight-semibold); color: var(--color-accent); display: inline-block; margin-top: var(--spacing-sm); } .inline-link:hover { color: var(--color-accent-hover); } .about-image img { width: 100%; height: auto; border-radius: 8px; } @media (max-width: 968px) { .about-container { grid-template-columns: 1fr; gap: var(--spacing-lg); } } /* ============================================ STATS ============================================ */ .stats { padding: var(--spacing-xl) 0; background: #1c1d1d; border-top: 3px solid #8a6a3c; } .stats-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--spacing-md); display: flex; justify-content: space-around; gap: var(--spacing-lg); } .stat { text-align: center; } .stat::before { content: ""; display: block; width: 32px; height: 3px; background: #8a6a3c; margin: 0 auto 12px; } .stat-number { display: block; font-size: clamp(3.5rem, 6vw, 5.5rem); font-weight: var(--font-weight-extrabold); color: #ffffff; line-height: 1; margin-bottom: var(--spacing-xs); } .stat-label { display: block; font-size: 0.875rem; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.6); } @media (max-width: 768px) { .stats-container { display: grid; /* was flex — grid-template did nothing and A+ clipped */ grid-template-columns: 1fr 1fr; gap: var(--spacing-lg) var(--spacing-md); } .stat-number { font-size: clamp(2.75rem, 12vw, 3.5rem); } } /* ============================================ FINANCING ============================================ */ .financing { padding: var(--spacing-xxl) 0; background: var(--color-bg-white); } .financing-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--spacing-md); display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); align-items: center; } .financing-content h2 { margin-bottom: var(--spacing-md); } .financing-content p { font-size: 1.0625rem; line-height: 1.8; color: var(--color-text-light); margin-bottom: var(--spacing-lg); } .financing-features { display: flex; flex-direction: column; gap: var(--spacing-lg); } .financing-feature { display: grid; grid-template-columns: 52px auto 1fr; gap: 20px; align-items: center; } .feature-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: #f0f5f0; border-radius: 8px; } .feature-title { display: flex; align-items: center; } .feature-title h3 { font-size: 1.125rem; font-weight: var(--font-weight-semibold); margin: 0; white-space: nowrap; } .feature-description { display: flex; align-items: center; } .feature-description p { font-size: 0.9375rem; color: var(--color-text-light); margin: 0; } @media (max-width: 968px) { .financing-container { grid-template-columns: 1fr; gap: var(--spacing-lg); } .financing-feature { grid-template-columns: 52px 1fr; gap: 16px; } .feature-title { grid-column: 2; } .feature-description { grid-column: 1/-1; padding-left: 68px; } } /* ============================================ PROCESS ============================================ */ .process { padding: var(--spacing-xxl) 0; background: var(--color-bg-white); } .process-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--spacing-md); } .process-container .eyebrow { text-align: center; } .process-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-lg); margin-top: var(--spacing-lg); position: relative; } .process-timeline::before { content: ""; position: absolute; top: 30px; left: 10%; right: 10%; height: 2px; background: var(--color-bg-warm); z-index: 0; } .process-step { position: relative; z-index: 1; } .step-badge { width: 44px; height: 44px; border-radius: 50%; background: #8a6a3c; color: #ffffff; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; flex-shrink: 0; } .step-label { font-size: 1.25rem; font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-xs); } .step-description { font-size: 0.9375rem; color: var(--color-text-light); line-height: 1.6; } @media (max-width: 968px) { .process-timeline { grid-template-columns: 1fr; gap: var(--spacing-xl); } .process-timeline::before { display: none; } } /* ============================================ TESTIMONIALS ============================================ */ .testimonials { padding: var(--spacing-xxl) 0; background: var(--color-bg-warm); } .testimonials-container { max-width: 900px; margin: 0 auto; padding: 0 var(--spacing-md); position: relative; } .testimonials-heading { text-align: center; font-size: 2.5rem; font-weight: var(--font-weight-bold); color: var(--color-text); margin-bottom: var(--spacing-xl); } .testimonial { opacity: 0; visibility: hidden; transition: opacity var(--transition-slow), visibility var(--transition-slow); position: absolute; top: 0; left: var(--spacing-md); right: var(--spacing-md); } .testimonial.active { opacity: 1; visibility: visible; position: relative; } .quote-mark { font-size: 8rem; line-height: 1; color: rgba(169, 132, 90, 0.15); font-weight: var(--font-weight-bold); margin-bottom: -2rem; } .testimonial-stars { display: flex; gap: 3px; margin-bottom: 14px; justify-content: center; } .testimonial-stars .ph-star { font-size: 16px; color: #8a6a3c; } .testimonial-text { font-size: 1.5rem; line-height: 1.7; font-weight: var(--font-weight-medium); color: var(--color-text); margin-bottom: var(--spacing-md); } .testimonial-author { display: flex; flex-direction: column; gap: 0.25rem; } .author-name { font-size: 1rem; font-weight: var(--font-weight-semibold); } .author-location { font-size: 0.875rem; color: var(--color-text-light); } .testimonial-controls { display: flex; justify-content: center; gap: var(--spacing-sm); margin-top: var(--spacing-xl); } .testimonial-prev, .testimonial-next { width: 48px; height: 48px; background: var(--color-bg-white); border-radius: 50%; color: var(--color-text); transition: var(--transition-fast); display: flex; align-items: center; justify-content: center; } .testimonial-prev i, .testimonial-next i { font-size: 1.25rem; } .testimonial-prev:hover, .testimonial-next:hover { background: var(--color-accent); color: var(--color-bg-white); } @media (max-width: 768px) { .testimonial-text { font-size: 1.125rem; } } /* ============================================ ACCOLADES ============================================ */ .accolades { padding: 80px 0; background: #f8f6f2; } .accolades-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; text-align: center; } .accolades-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 40px; } .accolade { display: flex; flex-direction: column; align-items: center; gap: 12px; } .accolade h3 { font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0; } .accolade p { font-size: 13px; color: #6b6b6b; margin: 0; } @media (max-width: 768px) { .accolades-grid { grid-template-columns: repeat(2, 1fr); } } /* ============================================ BLOG ============================================ */ .blog { padding: var(--spacing-xxl) 0; background: var(--color-bg-white); } .blog-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--spacing-md); } .blog-grid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, 1fr); gap: var(--spacing-lg); margin-top: var(--spacing-lg); } .blog-post { display: flex; flex-direction: column; transition: var(--transition-fast); } .blog-post:hover { transform: translateY(-4px); } .blog-post-featured { grid-row: 1/3; } .blog-post img { width: 100%; height: 280px; object-fit: cover; border-radius: 8px; margin-bottom: var(--spacing-md); } .blog-post-featured img { height: 100%; } .blog-content { display: flex; flex-direction: column; gap: var(--spacing-xs); } .blog-category { font-size: 0.8125rem; font-weight: var(--font-weight-semibold); color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.05em; } .blog-content h3 { font-size: 1.5rem; line-height: 1.3; } .blog-post:not(.blog-post-featured) .blog-content h3 { font-size: 1.125rem; } .blog-meta { font-size: 0.875rem; color: var(--color-text-light); } @media (max-width: 968px) { .blog-grid { grid-template-columns: 1fr; grid-template-rows: auto; } .blog-post-featured { grid-row: auto; } } /* ============================================ SERVICE AREAS ============================================ */ .service-areas { padding: var(--spacing-xl) 0; background: var(--color-bg-warm); position: relative; overflow: hidden; } .service-areas::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("assets/hero.jpg"); background-size: cover; background-position: center; opacity: 0.08; z-index: 0; } .service-areas-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--spacing-md); text-align: center; position: relative; z-index: 1; } .service-areas-container h2 { margin-bottom: var(--spacing-md); } .areas-pills { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; } .area-pill { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border: 1px solid #d4d4d4; border-radius: 100px; font-size: 14px; color: #1a1a1a; background: #fff; transition: var(--transition-fast); } .area-pill:hover { border-color: var(--color-accent); background: rgba(169, 132, 90, 0.05); } .area-pill i { color: #8a6a3c; } /* ============================================ FINAL CTA ============================================ */ .final-cta { padding: calc(var(--spacing-xxl) * 1.5) 0; position: relative; overflow: hidden; background-image: url("assets/project-featured.png"); background-size: cover; background-position: center; } .final-cta::before { content: ""; position: absolute; inset: 0; background: rgba(15, 30, 15, 0.82); z-index: 0; } .final-cta-container { max-width: 800px; margin: 0 auto; padding: 0 var(--spacing-md); text-align: center; position: relative; z-index: 1; } .final-cta-container h2 { margin-bottom: var(--spacing-md); color: #ffffff; } .final-cta-container p { font-size: 1.25rem; color: #ffffff; margin-bottom: var(--spacing-lg); } .final-cta-container .btn-primary { background: transparent; border: 2px solid #ffffff; color: #ffffff; padding: 1rem 2.5rem; } .final-cta-container .btn-primary:hover { background: #ffffff; color: #1a1a1a; transform: translateY(-2px); } /* ============================================ FOOTER ============================================ */ .footer { background: var(--color-bg-dark); color: var(--color-bg-white); padding: var(--spacing-xl) 0 var(--spacing-md); } .footer-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--spacing-md); } .footer-top { display: grid; grid-template-columns: 1fr 2fr; gap: var(--spacing-xl); margin-bottom: var(--spacing-xl); padding-bottom: var(--spacing-xl); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .footer-brand { display: flex; flex-direction: column; gap: var(--spacing-md); } .footer-logo img { height: 70px; width: auto; } .footer-social { display: flex; gap: var(--spacing-sm); } .footer-social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; color: var(--color-bg-white); transition: var(--transition-fast); } .footer-social a:hover { background: var(--color-accent); transform: translateY(-2px); } .footer-social svg { width: 20px; height: 20px; } .footer-columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-lg); } .footer-column h2 { font-size: 0.875rem; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--spacing-md); color: rgba(255, 255, 255, 0.6); } .footer-column ul { display: flex; flex-direction: column; gap: var(--spacing-xs); } .footer-column a { font-size: 0.9375rem; color: var(--color-bg-white); } .footer-column a:hover { color: var(--color-accent); } .footer-column li:not(:has(a)) { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.8); } .footer-bottom { text-align: center; } .footer-bottom p { font-size: 0.875rem; color: rgba(255, 255, 255, 0.5); } /* ============================================ FAQ SEO SECTION ============================================ */ .faq-seo { padding: var(--spacing-xl) 0; background: var(--color-bg-warm); } .faq-container { max-width: 900px; margin: 0 auto; padding: 0 var(--spacing-md); } .faq-container h2 { font-size: 2rem; margin-bottom: var(--spacing-lg); text-align: center; } .faq-item { margin-bottom: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .faq-item:last-child { border-bottom: none; } .faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md) 0; background: none; border: none; text-align: left; cursor: pointer; transition: var(--transition-fast); } .faq-question:hover { opacity: 0.7; } .faq-question h3 { font-size: 1.125rem; font-weight: var(--font-weight-semibold); color: var(--color-text); margin: 0; flex: 1; padding-right: var(--spacing-md); } .faq-toggle { color: var(--color-accent); flex-shrink: 0; width: 24px; text-align: center; transition: transform var(--transition-fast); display: flex; align-items: center; justify-content: center; } .faq-toggle i { font-size: 1.25rem; font-weight: bold; } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; padding: 0; } .faq-item.active .faq-answer { max-height: 500px; padding-bottom: var(--spacing-md); } .faq-answer p { font-size: 1rem; line-height: 1.7; color: var(--color-text-light); margin: 0; } /* ============================================ FOOTER NAP ============================================ */ .footer-nap { margin-bottom: var(--spacing-sm); } .footer-nap strong { font-weight: var(--font-weight-semibold); } /* ===================== CONTACT SECTION ===================== */ .contact-section { background: #ffffff; padding: 100px 40px; } .contact-section-container { max-width: 1200px; margin: 0 auto; } .contact-section-inner { display: grid; grid-template-columns: 1fr 340px; gap: 80px; align-items: start; } .contact-heading { font-size: clamp(28px, 4vw, 42px); font-weight: 800; color: #1c1d1d; line-height: 1.15; margin: 12px 0 16px; } .contact-subtext { font-size: 16px; color: #555; line-height: 1.7; margin-bottom: 40px; } .contact-form { display: flex; flex-direction: column; gap: 0; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .form-row-full { grid-template-columns: 1fr; } .form-field { display: flex; flex-direction: column; } .form-field label { font-size: 12px; font-weight: 700; color: #1c1d1d; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; } .form-field input, .form-field select, .form-field textarea { width: 100%; padding: 13px 16px; border: 1.5px solid #d4d0c8; border-radius: 6px; font-family: inherit; font-size: 15px; color: #1c1d1d; background: #fafaf8; transition: border-color 0.2s ease, box-shadow 0.2s ease; appearance: none; -webkit-appearance: none; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: #8a6a3c; box-shadow: 0 0 0 3px rgba(169, 132, 90, 0.12); background: #ffffff; } .form-field input::placeholder, .form-field textarea::placeholder { color: #aaa; } .form-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231a2e1a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 44px; cursor: pointer; } .form-field textarea { resize: vertical; min-height: 110px; } .form-submit { width: 100%; margin-top: 8px; padding: 16px 32px; font-size: 16px; justify-content: center; } .form-trust { font-size: 12px; color: #6a6a6a; text-align: center; margin-top: 12px; } /* Contact info side */ .contact-info-side { padding-top: 120px; } .contact-info-items { display: flex; flex-direction: column; gap: 28px; } .contact-info-item { display: flex; align-items: flex-start; gap: 14px; text-decoration: none; color: #1c1d1d; font-size: 15px; line-height: 1.5; transition: color 0.2s ease; } .contact-info-item:hover { color: #8a6a3c; } .contact-info-item .ph { font-size: 20px; color: #8a6a3c; flex-shrink: 0; margin-top: 2px; } .contact-info-hours { padding-top: 8px; border-top: 1px solid #e8e4dc; } .hours-label { font-size: 13px; color: #6a6a6a; margin: 0 0 4px; } @media (max-width: 900px) { .contact-section-inner { grid-template-columns: 1fr; gap: 48px; } .contact-info-side { padding-top: 0; } .contact-info-items { flex-direction: row; flex-wrap: wrap; gap: 20px; } } @media (max-width: 640px) { .contact-section { padding: 72px 24px; } .form-row { grid-template-columns: 1fr; } } /* ============================================================ MOBILE OVERRIDES — Consolidated 768px = tablet / large phone landscape 480px = phone portrait ============================================================ */ /* ---- NAV ---- */ @media (max-width: 768px) { .utility-bar { display: none; } .main-nav { padding: 0 20px; } .nav-logo img { height: 56px; } .nav-links { display: none; } .nav-cta { display: none; } .hamburger { display: flex; } .mobile-menu { padding: 24px 20px; } .mobile-menu a { font-size: 18px; padding: 14px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06); display: block; } .mobile-menu .mobile-cta { display: block; width: 100%; text-align: center; margin-top: 20px; padding: 14px; background: #8a6a3c; color: #ffffff; font-weight: 700; letter-spacing: 0.06em; font-size: 14px; text-transform: uppercase; border-radius: 6px; } } /* ---- HERO (phone: text overlaid on a full-bleed image) ---- */ @media (max-width: 768px) { .hero { flex-direction: column; position: relative; height: auto; min-height: calc(100svh - var(--nav-height)); } .hero .hero-image { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; max-height: none; flex: none; } .hero .hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero-content { width: 100%; flex: none; position: relative; z-index: 2; background: transparent; justify-content: flex-end; min-height: calc(100svh - var(--nav-height)); padding: 40px 24px 100px; } .hero-location { font-size: 12px; margin-bottom: 12px; color: #d8c39a; } .hero-headline { font-size: clamp(30px, 8vw, 42px); line-height: 1.12; margin-bottom: 14px; color: #ffffff; } .hero-subtext { font-size: 15px; line-height: 1.6; margin-bottom: 0; color: rgba(255, 255, 255, 0.9); } .hero-cta-group { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 24px; } .hero-cta-group .btn-primary, .hero-cta-group .btn-outline-dark { width: 100%; text-align: center; justify-content: center; padding: 15px 20px; font-size: 14px; } .hero-content .btn-outline-dark { border-color: rgba(255, 255, 255, 0.8); color: #ffffff; } .hero-content .btn-outline-dark:hover { background: #ffffff; color: #1c1d1d; } } /* ---- TRUST BAR ---- */ @media (max-width: 768px) { .trust-bar-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; padding: 28px 24px; } .trust-divider { display: none; } .trust-badge { flex: none; text-align: center; } .trust-label { font-size: 10px; } .trust-value { font-size: 14px; } } /* ---- SERVICES CAROUSEL ---- */ @media (max-width: 768px) { .services { padding: 60px 0 48px; } .services-header { padding: 0 24px; margin-bottom: 24px; } .services-header h2 { font-size: clamp(24px, 6vw, 32px); } .services-scroll { padding: 0 24px; gap: 16px; } .service-panel { flex: 0 0 80vw; max-width: 320px; height: 420px; } .service-content h3 { font-size: 22px; } .services-nav { display: none; } } /* ---- S-SEAM ---- */ @media (max-width: 768px) { .s-seam-container { grid-template-columns: 1fr; padding: 0 24px; gap: 32px; } .s-seam-stat-number { font-size: 2rem; } .s-seam-stats { gap: 24px; } } /* ---- FEATURED PROJECT ---- */ @media (max-width: 768px) { .featured-work-layout { flex-direction: column; } .featured-work-image { flex: none; width: 100%; } .featured-work-panel { flex: none; width: 100%; margin-left: 0; margin-top: -32px; padding: 32px 24px; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08); } .project-name { font-size: 26px; } .project-stats { flex-wrap: wrap; gap: 10px; } } /* ---- ABOUT ---- */ @media (max-width: 768px) { .about-container, .about-grid { grid-template-columns: 1fr; flex-direction: column; } .about-image { order: -1; width: 100%; } .about-content { padding: 32px 24px; } .about-content h2 { font-size: clamp(24px, 6vw, 32px); } } /* ---- STATS BAR ---- */ @media (max-width: 768px) { .stats-container, .stats-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding: 48px 24px; } .stat-number { font-size: clamp(36px, 10vw, 52px); } .stat-label { font-size: 12px; } } /* ---- FINANCING ---- */ @media (max-width: 768px) { .financing-container, .financing-grid { grid-template-columns: 1fr; flex-direction: column; padding: 0 24px; gap: 40px; } .financing-features { gap: 24px; } } /* ---- PROCESS ---- */ @media (max-width: 768px) { .process-steps, .process-grid { grid-template-columns: 1fr; gap: 32px; padding: 0 24px; } /* table-like alignment: badge column + stacked title/text column */ .process-step { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; align-items: start; } .step-badge { grid-row: 1/3; margin-bottom: 0; } .step-label { grid-column: 2; margin-bottom: 4px; } .step-description { grid-column: 2; } .process-connector, .process-line { display: none; } } /* ---- TESTIMONIALS ---- */ @media (max-width: 768px) { .testimonials { padding: 60px 24px; } .testimonial-text { font-size: 16px; line-height: 1.7; } .testimonial-author { font-size: 13px; } .testimonial-nav { gap: 12px; margin-top: 28px; } } /* ---- ACCOLADES ---- */ @media (max-width: 768px) { .accolades-grid, .accolades-container { grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 24px; } } /* ---- BLOG PREVIEW ---- */ @media (max-width: 768px) { .blog-grid, .blog-preview-grid { grid-template-columns: 1fr; gap: 24px; padding: 0 24px; } .blog-featured { grid-column: auto; } .blog-card-image, .blog-featured-image { height: 220px; } } /* ---- SERVICE AREAS ---- */ @media (max-width: 768px) { .service-areas { padding: 60px 24px; } .areas-pills { gap: 10px; justify-content: center; } .area-pill { font-size: 13px; padding: 8px 16px; } } /* ---- FINAL CTA ---- */ @media (max-width: 768px) { .final-cta { padding: 80px 24px; } .final-cta h2, .final-cta-heading { font-size: clamp(26px, 7vw, 36px); } .final-cta .btn { width: 100%; text-align: center; justify-content: center; } } /* ---- CONTACT FORM ---- */ @media (max-width: 768px) { .contact-section { padding: 60px 24px; } .contact-section-inner { grid-template-columns: 1fr; gap: 40px; } .contact-info-side { padding-top: 0; } .contact-info-items { flex-direction: column; gap: 20px; } .form-row { grid-template-columns: 1fr; } .contact-heading { font-size: clamp(24px, 6vw, 32px); } } /* ---- FAQ ---- */ @media (max-width: 768px) { .faq-seo, .faq-container { padding: 60px 24px; } .faq-question { font-size: 15px; padding: 18px 0; } .faq-answer p { font-size: 14px; } } /* ---- FOOTER ---- */ @media (max-width: 768px) { .footer { padding-top: 40px; border-top: 3px solid #8a6a3c; } .footer-container { padding: 0 20px; } .footer-top { grid-template-columns: 1fr; gap: 28px; margin-bottom: 28px; padding-bottom: 28px; } .footer-brand { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; } .footer-logo img { height: 40px; } .footer-social { gap: 8px; } .footer-social a { width: 34px; height: 34px; } .footer-social svg { width: 16px; height: 16px; } .footer-columns { grid-template-columns: 1fr 1fr; gap: 24px 16px; } .footer-column h2 { font-size: 11px; margin-bottom: 10px; } .footer-column a, .footer-column li:not(:has(a)) { font-size: 14px; } .footer-column ul { gap: 8px; } .footer-bottom { margin-top: 28px; padding: 16px 0 88px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .footer-nap { display: none; } .footer-bottom p { font-size: 12px; color: rgba(255, 255, 255, 0.6); } } /* ---- PHONE PORTRAIT FINE-TUNING ---- */ @media (max-width: 480px) { .hero-headline { font-size: 26px; } .trust-bar-container { grid-template-columns: 1fr 1fr; padding: 24px 16px; gap: 16px; } .service-panel { flex: 0 0 88vw; height: 380px; } .stats-container, .stats-grid { grid-template-columns: 1fr 1fr; padding: 40px 16px; } .accolades-grid, .accolades-container { grid-template-columns: 1fr 1fr; padding: 0 16px; } .footer-columns { grid-template-columns: 1fr; } .footer-brand { flex-direction: column; align-items: flex-start; gap: 16px; } } /* ---- STICKY MOBILE CTA BAR ---- */ .mobile-cta-bar { display: none; } @media (max-width: 768px) { .mobile-cta-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; background: #ffffff; border-top: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08); } .mobile-cta-bar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; font-family: inherit; } .mobile-cta-bar .cta-call { background: #1c1d1d; color: #ffffff; } .mobile-cta-bar .cta-estimate { background: #8a6a3c; color: #ffffff; } .mobile-cta-bar .ph { font-size: 16px; } /* Push footer up so it doesn't sit behind the bar */ footer { padding-bottom: 72px; } } /* ============================================================ SECTION SPACING OVERRIDES — Desktop tightening ============================================================ */ .trust-bar { padding-top: 24px; padding-bottom: 24px; } .accolades { padding-top: 64px; padding-bottom: 64px; } .service-areas { padding-top: 64px; padding-bottom: 64px; } .blog { padding-top: 72px; padding-bottom: 72px; } .financing { padding-bottom: var(--spacing-lg); } /* ============================================================ SECTION SPACING OVERRIDES — Mobile padding caps All sections use --spacing-xxl (now 96px) by default, which is still too much on mobile. These cap each section. ============================================================ */ @media (max-width: 768px) { .hero-content { padding-top: 28px; padding-bottom: 36px; } .trust-bar { padding-top: 20px; padding-bottom: 20px; } .services { padding-top: 48px; padding-bottom: 36px; } .s-seam { padding-top: 56px; padding-bottom: 56px; } .featured-work { padding-top: 56px; padding-bottom: 56px; } .about { padding-top: 56px; padding-bottom: 56px; } .stats { padding-top: 48px; padding-bottom: 48px; } .financing { padding-top: 56px; padding-bottom: 40px; } .process { padding-top: 56px; padding-bottom: 56px; } .process-steps, .process-grid { gap: 20px; } .process-step { padding-bottom: 0; margin-bottom: 0; } .testimonials { padding-top: 56px; padding-bottom: 56px; } .accolades { padding-top: 48px; padding-bottom: 48px; } .blog { padding-top: 56px; padding-bottom: 56px; } .service-areas { padding-top: 48px; padding-bottom: 48px; } .final-cta { padding-top: 64px; padding-bottom: 64px; } .contact-section { padding-top: 56px; padding-bottom: 56px; } .faq-seo { padding-top: 56px; padding-bottom: 72px; } } /* ============================================ APPLICATION CARDS ============================================ */ .application-card { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 480px; border-bottom: 1px solid #e8e4de; } .application-card:last-child { border-bottom: none; } .application-card.reverse .application-image { order: 2; } .application-card.reverse .application-content { order: 1; } .application-card-featured { grid-template-columns: 55fr 45fr; } .application-image { overflow: hidden; } .application-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .application-image img:hover { transform: scale(1.04); } .application-content { display: flex; flex-direction: column; justify-content: center; padding: 3rem; overflow: hidden; } .application-card h3 { font-size: 1.4rem; color: #1c1d1d; margin-bottom: 0.75rem; } .application-card p { color: #555; line-height: 1.7; margin-bottom: 1rem; font-size: 0.95rem; } .application-card a { color: #8a6a3c; text-decoration: none; font-size: 0.95rem; } .application-card a:hover { text-decoration: underline; } .feature-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 1rem; } .feature-list li { font-size: 0.85rem; color: #555; padding: 0.25rem 0; padding-left: 1.1rem; position: relative; } .feature-list li::before { content: "✓"; color: #8a6a3c; font-weight: 600; position: absolute; left: 0; } @media (max-width: 768px) { .application-card { grid-template-columns: 1fr; grid-template-rows: auto; } .application-card-featured { grid-template-columns: 1fr; } .application-card.reverse .application-image { order: 0; } .application-card.reverse .application-content { order: 0; } .application-image { height: 260px; } .application-image img { height: 260px; } .application-content { padding: 1.5rem; overflow: visible; } .feature-list { grid-template-columns: 1fr; } } /* ============================================ AREAS DROPDOWN ============================================ */ .areas-dropdown { position: fixed; top: 100px; left: 0; width: 100%; background: var(--color-bg-white); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; padding: 1rem 0; z-index: 999; } .has-dropdown:hover .areas-dropdown { opacity: 1; visibility: visible; } .areas-dropdown-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--spacing-md); } .areas-col { display: flex; flex-direction: row; align-items: center; gap: 0.25rem; flex-wrap: wrap; } .areas-col-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; color: #aaa; text-transform: uppercase; margin-right: 0.75rem; white-space: nowrap; } .area-link { display: inline-flex; align-items: center; gap: 5px; padding: 0.4rem 0.85rem; border-radius: 20px; font-size: 0.82rem; font-weight: 600; color: #333; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; white-space: nowrap; } .area-link i { font-size: 0.8rem; color: #8a6a3c; } .area-link:hover { background: #f0ede8; color: #1c1d1d; } .area-link.active { background: #f3ebde; color: #8a6a3c; } .area-link--soon { opacity: 0.5; cursor: default; pointer-events: none; } .area-soon { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: #e8e4de; color: #888; padding: 1px 5px; border-radius: 3px; margin-left: 2px; } /* ============================================ SERVICES NAV — Vertical list dropdown ============================================ */ .nav-list-dropdown { display: flex; flex-direction: column; padding: 0.25rem 0; } .nav-list-item { display: flex; align-items: center; gap: 10px; padding: 0.6rem 1.25rem; font-size: 0.85rem; font-weight: 600; color: #1c1d1d; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; white-space: nowrap; } .nav-list-item:hover { background: #f0ede8; color: #8a6a3c; } .nav-list-item i { font-size: 1rem; color: #8a6a3c; flex-shrink: 0; } .nav-list-sub { display: flex; flex-direction: column; border-left: 2px solid #e8e4de; margin: 0 0 0.35rem 3rem; } .nav-list-subitem { display: flex; align-items: center; padding: 0.3rem 0.85rem; font-size: 0.72rem; font-weight: 500; color: #999; text-decoration: none; letter-spacing: 0.01em; transition: color 0.15s ease; white-space: nowrap; } .nav-list-subitem:hover { color: #8a6a3c; } .nav-list-item--active { color: #8a6a3c; } /* ============================================ PHOTO POLISH (Option A) — Site-wide image treatment Standard: subtle saturation/contrast/brightness boost Hero variant: richer, cinematic — applied to hero & featured project images ============================================ */ .hero-image img, .service-panel, .featured-work-image img, .about-image img, .blog-post img, .application-image img, .dropdown-item img, .s-seam-image img, .pavers-hero-bg img, .gallery-grid img, .portfolio-card img { filter: saturate(1.15) contrast(1.06) brightness(1.02); } /* Hero / featured cinematic treatment */ .hero-image img, .featured-work-image img, .s-seam-image img, .pavers-hero-bg img, .service-hero-bg img { filter: saturate(1.28) contrast(1.14) brightness(1.03) sepia(0.04); } /* Service panel uses background-image, so use backdrop hue / no filter conflicts */ .service-panel { filter: saturate(1.2) contrast(1.08); } /* ============================================ SERVICE PAGE GALLERY ============================================ */ .service-gallery { padding: var(--spacing-xxl) 0; background: var(--color-bg-warm); } .service-gallery-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--spacing-md); text-align: center; } .service-gallery-container h2 { margin-bottom: var(--spacing-sm); } .gallery-subtitle { color: var(--color-text-light); font-size: 1rem; max-width: 600px; margin: 0 auto var(--spacing-lg); } .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: var(--spacing-lg); } .gallery-item { display: block; aspect-ratio: 4/3; overflow: hidden; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transition: transform 0.3s ease, box-shadow 0.3s ease; } .gallery-item:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .gallery-item:hover img { transform: scale(1.05); } @media (max-width: 968px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } @media (max-width: 480px) { .gallery-grid { grid-template-columns: 1fr; } } /* Lightbox */ .lightbox-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); display: none; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; padding: 40px; } .lightbox-overlay.open { display: flex; } .lightbox-overlay img { max-width: 100%; max-height: 100%; object-fit: contain; } .lightbox-overlay .lightbox-close { position: absolute; top: 20px; right: 24px; background: none; border: none; color: #fff; font-size: 36px; cursor: pointer; line-height: 1; } /* Accessibility (WCAG 2.1 AA): distinguish in-text links by more than color */ p a:not(.btn):not(.service-link) { text-decoration: underline; } /* Darker gold for links on the beige testimonial cards (#eee6d8) to clear 4.5:1 */ .testimonials-source a { color: #7a5e34 !important; } /* Agency credit line in the footer */ .footer__credit { margin-top: 6px; } .footer__credit a { color: #c4a989; text-decoration: underline; } .footer__credit a:hover { color: #d9c6ac; } /* Cloudflare Turnstile widget spacing */ .cf-turnstile { margin: 0.25rem 0 1rem; } /* Contact form error notice (shown when mailer.php redirects with ?sent=error) */ .form-error { background: #fdecec; border: 1px solid #e0b4b4; color: #8a1c1c; padding: 0.85rem 1rem; border-radius: 6px; font-size: 0.9rem; line-height: 1.5; margin: 0 0 1.25rem; } .form-error a { color: #8a1c1c; font-weight: 600; } /* ============================================ BACK TO TOP Fixed, bottom-right, revealed on scroll (via .is-visible from JS). On mobile it sits above the sticky .mobile-cta-bar. ============================================ */ .back-to-top { position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; border: none; border-radius: 50%; background: var(--color-accent); color: #fff; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.2s ease; z-index: 1000; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); } /* Draw the up-arrow in CSS so it never depends on the subsetted icon font (ph-arrow-up isn't in the subset, so the icon renders empty). */ .back-to-top i { display: none; } .back-to-top::before { content: ""; width: 11px; height: 11px; border-top: 2.5px solid currentColor; border-left: 2.5px solid currentColor; transform: rotate(45deg); margin-top: 4px; /* optical centering — chevron weight sits high */ } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover, .back-to-top:focus-visible { background: var(--color-accent-hover); outline: none; } @media (max-width: 768px) { .back-to-top { right: 14px; bottom: 76px; /* clear the sticky mobile CTA bar */ width: 42px; height: 42px; } } /* ============================================================ HERO — Option B "split" (homepage) Mobile/tablet: photo band with the headline overlaid on it, then the paragraph + CTAs on a clean cream panel below. Desktop is untouched (rules are scoped to <=968px). Imported LAST so it overrides the base mobile hero rules. ============================================================ */ @media (max-width: 968px) { .hero--split { flex-direction: column; position: relative; height: auto; min-height: 0; } .hero--split .hero-image { position: relative; inset: auto; height: 46vh; flex: none; } /* gentle bottom fade so the overlaid headline stays legible */ .hero--split .hero-image::after { background: linear-gradient(180deg, rgba(28, 29, 29, 0) 42%, rgba(28, 29, 29, 0.5) 100%); } .hero--split .hero-content { position: static; flex: none; background: transparent; min-height: 0; padding: 0; } /* Headline pinned so its bottom sits on the photo's bottom edge — fully over the image, never crossing onto the cream. Works at any headline length. */ .hero--split .hero-headline { position: absolute; left: 0; right: 0; top: 46vh; /* = photo height */ transform: translateY(-100%); margin: 0; padding: 0 22px 14px; /* 14px lifts the last line off the seam */ color: #ffffff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); z-index: 3; font-size: clamp(28px, 7.6vw, 38px); line-height: 1.12; } /* the readable cream panel — flush with the photo bottom, no white gap */ .hero--split .hero-details { background: var(--color-bg-warm); margin-top: 0; padding: 24px 24px 34px; } .hero--split .hero-subtext { color: #3a3a3a; text-shadow: none; font-size: 15px; line-height: 1.6; margin: 0 0 20px; } .hero--split .hero-cta-group { flex-direction: column; align-items: stretch; gap: 10px; margin: 0; } .hero--split .hero-cta-group .btn-primary, .hero--split .hero-cta-group .btn-outline-dark { width: 100%; text-align: center; justify-content: center; padding: 15px 20px; font-size: 14px; } /* dark outline button reads on the cream panel */ .hero--split .hero-content .btn-outline-dark { border-color: #1c1d1d; color: #1c1d1d; } }