:root { --navy: #f6f9fc; --navy-mid: #e2eaf4; --red: #1d4ed8; --red-light: #4f84ff; --gold: #1d4ed8; --gold-light: #6fa0ff; --white: #0f1b2d; --gray: #3f4b59; --light-bg: #eef2f7; --line: #dde3ec; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', sans-serif; background: var(--navy); color: var(--white); overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; } .phone-banner { background: var(--red); text-align: center; padding: 12px 5%; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.03em; } .phone-banner a { color: #fff; text-decoration: none; } .phone-banner a:hover { text-decoration: underline; } nav { position: fixed; top: 0; width: 100%; z-index: 100; padding: 18px 5%; display: flex; justify-content: space-between; align-items: center; background: rgba(22,24,29,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(47,107,255,0.15); } .logo { font-family: 'DM Sans', sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--gold); letter-spacing: 0.02em; } .logo span { color: var(--white); } nav ul { list-style: none; display: flex; gap: 32px; } nav ul li a { color: var(--gray); text-decoration: none; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.2s; } nav ul li a:hover { color: var(--gold); } .nav-cta { background: var(--red); color: var(--white) !important; padding: 10px 22px; border-radius: 3px; transition: background 0.2s !important; } .nav-cta:hover { background: var(--red-light) !important; } .nav-social { display: flex !important; align-items: center; color: var(--gray) !important; transition: color 0.2s !important; } .nav-social:hover { color: var(--gold) !important; } .has-dropdown { position: relative; } .dropdown { display: none; position: absolute; top: 100%; left: 0; background: rgba(22,24,29,0.97); backdrop-filter: blur(12px); border: 1px solid rgba(47,107,255,0.15); border-radius: 8px; padding: 8px 0; min-width: 220px; z-index: 101; box-shadow: 0 8px 32px rgba(0,0,0,0.3); list-style: none; } .has-dropdown:hover .dropdown { display: block; } .dropdown li { margin: 0; } .dropdown li a { display: block; padding: 10px 20px; font-size: 0.82rem; color: var(--gray); text-transform: none; letter-spacing: 0.02em; transition: background 0.15s, color 0.15s; } .dropdown li a:hover { background: rgba(47,107,255,0.08); color: var(--gold); } .mobile-toggle { display: none; background: none; border: none; color: var(--gold); font-size: 1.5rem; cursor: pointer; } .hero { min-height: 100vh; display: flex; align-items: center; padding: 100px 5% 60px; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(47,107,255,0.08) 0%, transparent 70%), radial-gradient(ellipse 50% 60% at 20% 80%, rgba(47,107,255,0.05) 0%, transparent 60%); } .hero-grid { display: grid; grid-template-columns: 1fr 420px; gap: 80px; align-items: center; max-width: 1200px; margin: 0 auto; width: 100%; position: relative; } .urgency-tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(47,107,255,0.15); border: 1px solid rgba(47,107,255,0.4); color: #4f84ff; padding: 6px 14px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 24px; animation: pulse-border 2.5s infinite; } @keyframes pulse-border { 0%,100% { border-color: rgba(47,107,255,0.4); } 50% { border-color: rgba(47,107,255,0.8); } } .urgency-tag::before { content: ''; width: 7px; height: 7px; background: var(--red-light); border-radius: 50%; animation: dot-pulse 1.5s infinite; } @keyframes dot-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } } h1 { font-family: 'DM Sans', sans-serif; font-size: clamp(2.6rem, 4.5vw, 4.2rem); font-weight: 900; line-height: 1.1; color: var(--white); margin-bottom: 24px; } h1 em { font-style: normal; color: var(--gold); display: block; } .hero-sub { font-size: 1.1rem; color: var(--gray); line-height: 1.7; max-width: 520px; margin-bottom: 40px; font-weight: 300; } .hero-sub strong { color: var(--white); font-weight: 600; } .cta-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .btn-primary { background: var(--red); color: #fff; padding: 16px 32px; border-radius: 4px; font-weight: 600; font-size: 1rem; text-decoration: none; letter-spacing: 0.02em; transition: transform 0.2s, background 0.2s, box-shadow 0.2s; box-shadow: 0 4px 20px rgba(47,107,255,0.3); display: inline-block; } .btn-primary:hover { background: var(--red-light); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(47,107,255,0.45); } .btn-ghost { color: var(--gold); text-decoration: none; font-weight: 500; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; transition: gap 0.2s; } .btn-ghost:hover { gap: 14px; } .btn-ghost::after { content: '\2192'; } .hero-stats { display: flex; gap: 32px; margin-top: 48px; padding-top: 40px; border-top: 1px solid rgba(0,0,0,0.08); } .stat-num { font-family: 'DM Sans', sans-serif; font-size: 2rem; font-weight: 700; color: var(--gold); } .stat-label { font-size: 0.78rem; color: var(--gray); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 2px; } .hero-card { background: var(--navy-mid); border: 1px solid rgba(47,107,255,0.2); border-radius: 12px; padding: 36px 32px; position: relative; } .hero-card::before { content: ''; position: absolute; top: -1px; left: 24px; right: 24px; height: 3px; background: linear-gradient(90deg, var(--red), var(--gold)); border-radius: 0 0 3px 3px; } .card-headline { font-family: 'DM Sans', sans-serif; font-size: 1.35rem; font-weight: 700; margin-bottom: 6px; color: var(--white); } .card-sub { font-size: 0.83rem; color: var(--gray); margin-bottom: 24px; } .form-group { margin-bottom: 14px; } .form-group label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--gray); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; } .form-group input, .form-group select, .form-group textarea { width: 100%; background: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.1); color: var(--white); padding: 12px 14px; border-radius: 6px; font-family: 'DM Sans', sans-serif; font-size: 0.9rem; transition: border-color 0.2s; outline: none; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--gold); } .form-group select option { background: var(--navy-mid); } .form-group input::placeholder { color: rgba(138,155,176,0.5); } .submit-btn { width: 100%; background: var(--red); color: #fff; border: none; padding: 15px; border-radius: 6px; font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 600; cursor: pointer; margin-top: 8px; transition: background 0.2s, transform 0.2s; letter-spacing: 0.02em; } .submit-btn:hover { background: var(--red-light); transform: translateY(-1px); } .card-disclaimer { text-align: center; font-size: 0.72rem; color: var(--gray); margin-top: 12px; line-height: 1.5; } .trust-bar { background: var(--navy-mid); border-top: 1px solid rgba(0,0,0,0.05); border-bottom: 1px solid rgba(0,0,0,0.05); padding: 24px 5%; display: flex; justify-content: center; align-items: center; gap: 48px; flex-wrap: wrap; } .trust-item { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--gray); font-weight: 500; } .trust-icon { width: 20px; height: 20px; color: var(--gold); flex-shrink: 0; } .city-block { display: block; background: var(--navy-mid); border: 1px solid rgba(47,107,255,0.1); border-radius: 6px; padding: 12px 14px; text-decoration: none; transition: border-color 0.2s, transform 0.15s; } .city-block:hover { border-color: rgba(47,107,255,0.35); transform: translateY(-1px); } .city-name { display: block; color: var(--white); font-weight: 600; font-size: 0.85rem; line-height: 1.3; } .city-info { display: block; color: var(--gray); font-size: 0.7rem; margin-top: 2px; } .legal-badge-hero { display: inline-flex; align-items: center; gap: 10px; background: rgba(47,107,255,0.08); border: 1px solid rgba(47,107,255,0.25); padding: 8px 16px; border-radius: 6px; margin-bottom: 32px; font-size: 0.82rem; color: var(--gold); font-weight: 500; letter-spacing: 0.03em; } .legal-badge-hero svg { flex-shrink: 0; color: var(--gold); } .legal-authority-section { padding: 50px 5%; background: linear-gradient(180deg, var(--navy) 0%, rgba(33,38,46,0.6) 50%, var(--navy) 100%); border-top: 1px solid rgba(47,107,255,0.1); border-bottom: 1px solid rgba(47,107,255,0.1); } .legal-authority-bar { display: flex; justify-content: center; align-items: stretch; gap: 40px; flex-wrap: wrap; } .legal-auth-item { display: flex; align-items: flex-start; gap: 14px; max-width: 300px; text-align: left; } .legal-auth-item svg { flex-shrink: 0; margin-top: 2px; } .legal-auth-item strong { display: block; font-size: 0.92rem; color: var(--white); font-weight: 600; margin-bottom: 4px; } .legal-auth-item span { display: block; font-size: 0.78rem; color: var(--gray); line-height: 1.5; } .legal-auth-divider { width: 1px; background: rgba(47,107,255,0.2); align-self: stretch; } @media (max-width: 768px) { .legal-auth-divider { display: none; } .legal-authority-bar { flex-direction: column; align-items: center; gap: 28px; } .legal-auth-item { max-width: 100%; } } section { padding: 90px 5%; } .section-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } h2 { font-family: 'DM Sans', sans-serif; font-size: clamp(2rem, 3vw, 3rem); font-weight: 900; line-height: 1.2; max-width: 720px; } .section-intro { font-size: 1.05rem; color: var(--gray); line-height: 1.7; max-width: 600px; margin-top: 16px; font-weight: 300; } .crisis-section { background: var(--light-bg); color: var(--navy); } .crisis-section h2 { color: var(--navy); } .crisis-section .section-label { color: var(--red); } .crisis-section .section-intro { color: #445; } .crisis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 52px; } .crisis-card { background: #fff; border-radius: 10px; padding: 28px 26px; border-left: 4px solid var(--red); box-shadow: 0 2px 20px rgba(0,0,0,0.07); } .crisis-card h3 { font-family: 'DM Sans', sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--navy); margin-bottom: 10px; } .crisis-card p { font-size: 0.88rem; color: #556; line-height: 1.65; } .solutions-section { background: var(--navy); } .solutions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 52px; } .solution-card { background: var(--navy-mid); border: 1px solid rgba(47,107,255,0.15); border-radius: 10px; padding: 32px 28px; transition: border-color 0.2s, transform 0.2s; } .solution-card:hover { border-color: rgba(47,107,255,0.5); transform: translateY(-4px); } .solution-icon { font-size: 1.8rem; margin-bottom: 18px; } .solution-icon svg { width: 34px; height: 34px; display: block; } .solution-card h3 { font-family: 'DM Sans', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--white); margin-bottom: 10px; } .solution-card p { font-size: 0.88rem; color: var(--gray); line-height: 1.65; } .solution-tag { display: inline-block; margin-top: 16px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); background: rgba(47,107,255,0.1); padding: 4px 10px; border-radius: 3px; } .process-section { background: var(--navy-mid); } .process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; margin-top: 52px; position: relative; } .process-steps::before { content: ''; position: absolute; top: 32px; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(47,107,255,0.3), transparent); } .step { text-align: center; padding: 0 20px; position: relative; } .step-num { width: 64px; height: 64px; background: var(--navy); border: 2px solid rgba(47,107,255,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-family: 'DM Sans', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--gold); position: relative; z-index: 1; } .step h3 { font-family: 'DM Sans', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--white); margin-bottom: 10px; } .step p { font-size: 0.85rem; color: var(--gray); line-height: 1.6; } .testimonials-section { background: var(--navy); } .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 52px; } .testimonial-card { background: var(--navy-mid); border: 1px solid rgba(0,0,0,0.07); border-radius: 10px; padding: 30px 26px; position: relative; } .testimonial-card::before { content: '\201C'; position: absolute; top: 16px; right: 20px; font-family: 'DM Sans', sans-serif; font-size: 5rem; color: rgba(47,107,255,0.1); line-height: 1; } .stars { color: var(--gold); font-size: 0.9rem; letter-spacing: 2px; margin-bottom: 14px; } .testimonial-card p { font-size: 0.9rem; color: var(--gray); line-height: 1.7; font-style: italic; margin-bottom: 18px; } .testimonial-author { font-weight: 600; font-size: 0.85rem; color: var(--white); } .testimonial-location { font-size: 0.78rem; color: var(--gray); margin-top: 2px; } .faq-section { background: var(--light-bg); color: var(--navy); } .faq-section h2 { color: var(--navy); } .faq-section .section-label { color: var(--red); } .faq-section .section-intro { color: #445; } .faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; margin-top: 52px; } .faq-item { background: #fff; border-radius: 8px; padding: 24px 22px; border-left: 3px solid var(--red); } .faq-item h4 { font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 10px; } .faq-item p { font-size: 0.86rem; color: #445; line-height: 1.65; } .final-cta { background: linear-gradient(135deg, #1a0a0a 0%, var(--navy) 50%, #0a1a2a 100%); text-align: center; padding: 100px 5%; position: relative; overflow: hidden; } .final-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(47,107,255,0.12) 0%, transparent 70%); } .final-cta h2 { margin: 0 auto 20px; text-align: center; position: relative; } .final-cta p { color: var(--gray); max-width: 560px; margin: 0 auto 40px; font-size: 1.05rem; line-height: 1.7; font-weight: 300; position: relative; } .final-cta .cta-row { justify-content: center; position: relative; } footer { background: #050e1c; padding: 48px 5% 32px; border-top: 1px solid rgba(0,0,0,0.05); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; max-width: 1200px; margin: 0 auto 40px; } .footer-logo { font-family: 'DM Sans', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--gold); margin-bottom: 14px; } .footer-logo span { color: var(--white); } .footer-about { font-size: 0.83rem; color: var(--gray); line-height: 1.7; max-width: 300px; } footer h3 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; } footer ul { list-style: none; } footer ul li { margin-bottom: 9px; } footer ul li a { color: var(--gray); text-decoration: none; font-size: 0.83rem; transition: color 0.2s; } footer ul li a:hover { color: var(--white); } .footer-legal-strip { max-width: 1200px; margin: 0 auto 24px; padding: 16px 20px; background: rgba(47,107,255,0.04); border: 1px solid rgba(47,107,255,0.12); border-radius: 8px; font-size: 0.76rem; color: var(--gray); text-align: center; line-height: 1.6; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(0,0,0,0.06); padding-top: 24px; font-size: 0.76rem; color: var(--gray); max-width: 1200px; margin: 56px auto 0; flex-wrap: wrap; gap: 12px; } .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; margin-top: 40px; } .blog-card { background: var(--navy-mid); border: 1px solid rgba(47,107,255,0.12); border-radius: 10px; overflow: hidden; transition: border-color 0.2s, transform 0.2s; } .blog-card:hover { border-color: rgba(47,107,255,0.4); transform: translateY(-3px); } .blog-card-body { padding: 24px; } .blog-card h3 { font-family: 'DM Sans', sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--white); margin-bottom: 10px; line-height: 1.3; } .blog-card h3 a { color: inherit; text-decoration: none; } .blog-card h3 a:hover { color: var(--gold); } .blog-card p { font-size: 0.86rem; color: var(--gray); line-height: 1.65; } .blog-card-meta { font-size: 0.75rem; color: var(--gray); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.04em; } .blog-read-more { display: inline-block; margin-top: 14px; color: var(--gold); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .post-content { max-width: 780px; margin: 0 auto; } .post-content h1 { font-size: clamp(2rem, 3.5vw, 3rem); margin-bottom: 16px; } .post-meta { font-size: 0.82rem; color: var(--gray); margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid rgba(0,0,0,0.08); } .post-body { font-size: 1.05rem; line-height: 1.85; color: var(--gray); } .post-body h2 { color: var(--white); font-size: 1.6rem; margin: 48px 0 16px; } .post-body h3 { color: var(--white); font-family: 'DM Sans', sans-serif; font-size: 1.25rem; margin: 36px 0 12px; } .post-body p { margin-bottom: 20px; } .post-body ul, .post-body ol { margin: 16px 0; padding-left: 24px; } .post-body li { margin-bottom: 8px; } .post-body a { color: var(--gold); text-decoration: underline; } .post-body strong { color: var(--white); } .post-body blockquote { border-left: 3px solid var(--gold); padding: 16px 24px; margin: 24px 0; background: rgba(47,107,255,0.05); font-style: italic; } .page-header { background: var(--navy-mid); padding: 140px 5% 60px; text-align: center; border-bottom: 1px solid rgba(47,107,255,0.15); } .page-header h1 { margin: 0 auto; } .page-body { max-width: 900px; margin: 0 auto; padding: 60px 5%; font-size: 1.05rem; line-height: 1.85; color: var(--gray); } .page-body h2 { color: var(--white); margin: 40px 0 16px; } .page-body p { margin-bottom: 20px; } .page-body a { color: var(--gold); } .fade-in { opacity: 0; transform: translateY(24px); animation: fadeUp 0.7s ease forwards; } @keyframes fadeUp { to { opacity: 1; transform: none; } } .fade-in:nth-child(1) { animation-delay: 0.1s; } .fade-in:nth-child(2) { animation-delay: 0.2s; } .fade-in:nth-child(3) { animation-delay: 0.3s; } .fade-in:nth-child(4) { animation-delay: 0.4s; } .fade-in:nth-child(5) { animation-delay: 0.5s; } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } .hero-card { max-width: 500px; } nav { flex-wrap: wrap; } nav ul { display: none; width: 100%; flex-direction: column; gap: 0; padding: 12px 0 0; order: 3; } nav ul li { width: 100%; } nav ul li a { display: block; padding: 14px 0; border-top: 1px solid rgba(0,0,0,0.06); font-size: 0.9rem; } nav ul li:last-child a.nav-cta { text-align: center; margin-top: 8px; } .mobile-toggle { display: block; } .dropdown { position: static; border: none; background: rgba(0,0,0,0.03); box-shadow: none; min-width: auto; padding: 0; border-radius: 0; } .has-dropdown:hover .dropdown { display: none; } .has-dropdown.open .dropdown { display: block; } .dropdown li a { padding: 10px 0 10px 16px; border-top: 1px solid rgba(0,0,0,0.04); } footer > div:first-child { grid-template-columns: 1fr 1fr !important; } .process-steps::before { display: none; } .hero-stats { flex-wrap: wrap; gap: 20px; } .hero { padding: 80px 5% 40px; min-height: auto; } h1 { font-size: 2.2rem; } section { padding: 60px 5%; } .trust-bar { padding: 20px 5%; gap: 16px; } } @media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } .trust-bar { gap: 12px; justify-content: flex-start; flex-direction: column; align-items: flex-start; padding: 16px 5%; } .footer-bottom { flex-direction: column; align-items: flex-start; } .faq-grid { grid-template-columns: 1fr; } .hero-grid { gap: 32px; } .hero-card { padding: 24px 20px; } .solutions-grid { grid-template-columns: 1fr; } .crisis-grid { grid-template-columns: 1fr; } .testimonials-grid { grid-template-columns: 1fr; } .process-steps { grid-template-columns: 1fr 1fr; gap: 32px; } footer > div:first-child { grid-template-columns: 1fr !important; } .contact-grid { grid-template-columns: 1fr !important; } .phone-banner { font-size: 0.78rem; padding: 10px 4%; } .btn-primary { width: 100%; text-align: center; } .cta-row { flex-direction: column; } } h1,h2,h3,h4,h5,h6,.logo,.footer-logo{font-family:'DM Sans','Segoe UI',Arial,sans-serif !important;letter-spacing:-0.015em;} .logo span{color:var(--white);} .btn-primary,.nav-cta,.submit-btn{border-radius:8px !important;font-weight:700 !important;} .solution-card{transition:transform .15s ease,box-shadow .15s ease;border-radius:12px !important;} .solution-card:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(0,0,0,.35);} .city-block{border-radius:10px;transition:transform .12s ease,background .12s ease;} .city-block:hover{transform:translateY(-2px);} .hero-card{border-radius:14px !important;} .trust-item{font-weight:600;} .emp-k1{font-size:2.6rem;font-weight:900;line-height:1.1;margin:0} .emp-k2{font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:700;color:var(--gold);margin-top:2px} .emp-k3{font-family:'Playfair Display',serif;font-size:1.25rem;font-weight:700;color:var(--gray)} .emp-btn{display:inline-block;padding:13px 24px;border-radius:8px;font-weight:600;text-decoration:none;margin:4px} .emp-btn.p{background:var(--gold);color:#fff} .emp-btn.s{border:1px solid var(--gray);color:var(--white)} .emp-trust{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;padding:20px;color:var(--gray);font-size:.9rem;border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06)} .emp-chk{list-style:none;margin-top:16px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 24px} .emp-chk li{position:relative;padding-left:26px;color:#2c3a4a} .emp-chk li:before{content:'\2713';color:var(--gold);position:absolute;left:0;font-weight:700} .emp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:10px} .emp-step{background:var(--navy);border:1px solid rgba(0,0,0,.06);border-radius:10px;padding:22px} .emp-step .n{color:var(--gold);font-family:'Playfair Display',serif;font-size:1.7rem;font-weight:900;display:block} .emp-step h3{font-size:1.05rem;margin:8px 0 6px} .emp-step p{color:var(--gray);font-size:.9rem} .emp-video iframe{width:100%;aspect-ratio:16/9;border-radius:14px;display:block;border:0} .emp-video-ph{display:flex;align-items:center;gap:16px;background:var(--navy-mid);border-radius:14px;padding:28px;text-decoration:none;color:var(--gray)} .emp-video-ph .play{width:58px;height:58px;border-radius:50%;background:var(--gold);flex:none;position:relative} .emp-video-ph .play:after{content:'';position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent} .emp-faq dt{font-weight:600;color:var(--white);padding:16px 0 6px;border-top:1px solid rgba(0,0,0,.08)} .emp-faq dd{color:var(--gray);padding-bottom:12px;margin:0} @media(max-width:760px){.emp-steps{grid-template-columns:1fr 1fr}.emp-chk{grid-template-columns:1fr}.emp-k1{font-size:2.1rem}} nav{background:#ffffff !important;border-bottom:1px solid #dde3ec !important;box-shadow:0 1px 10px rgba(20,40,80,.06)} nav ul li a{color:#46535f} .phone-banner{color:#ffffff !important} .phone-banner a{color:#ffffff !important;text-decoration:underline} .nav-cta{color:#ffffff !important} .dropdown{background:#ffffff !important;border:1px solid #dde3ec;box-shadow:0 10px 28px rgba(20,40,80,.12)} .dropdown li a{border-top:1px solid #eef2f7 !important;color:#46535f} .form-group input,.form-group select,.form-group textarea{background:#ffffff;border:1px solid #c7cfdb;color:#16202c} .btn-primary,.emp-btn.p{color:#ffffff !important} .emp-btn.s,.btn-secondary{color:#16202c} footer{background:#16202c !important;border-top:1px solid #243246 !important;color:#9aa6b4} footer a,footer p,footer li,footer span,.footer-about,.footer-links a,.footer-col a{color:#9aa6b4 !important} footer h3,footer h4,footer h5,.footer-title{color:#ffffff !important} .footer-bottom{border-top:1px solid rgba(255,255,255,.10) !important;color:rgba(255,255,255,0.50) !important} .footer-logo{color:#2563eb !important} .footer-social a{color:#9aa6b4 !important;transition:color .18s ease;} .footer-social a[href*="facebook.com"]:hover{color:#1877F2 !important} .footer-social a[href*="instagram.com"]:hover{color:#E4405F !important} .footer-social a[href*="youtube.com"]:hover{color:#FF0000 !important} .footer-social a[href*="tiktok.com"]:hover{color:#ffffff !important} .footer-social a[href*="yelp.com"]:hover{color:#FF1A1A !important} .footer-social a[href*="nextdoor.com"]:hover{color:#8ED500 !important} .footer-social a[href*="pinterest"]:hover{color:#E60023 !important} .footer-social a[href*="yellowpages"]:hover{color:#FFD226 !important} .footer-social a[href*="reddit.com"]:hover{color:#FF4500 !important} .footer-social a[href*="linkedin.com"]:hover{color:#0A66C2 !important} body{background:#edf2f9} .page-header{background:linear-gradient(165deg,#e1ebf8,#edf2f9) !important} .emp-step,.step,.card,.testimonial-card,.r,.dropdown,.emp-video-ph,.emp-video,.video,.form-group input,.form-group select,.form-group textarea{background:#ffffff !important} .emp-step,.step,.card,.r{box-shadow:0 2px 14px rgba(20,40,80,.06);border:1px solid #e2e8f1 !important} .emp-trust{background:#ffffff} body{background:#f6f9fc} h1,h2,h3,.k1,.emp-k1,.emp-faq dt{color:#0f1b2d} .page-header{background:linear-gradient(165deg,#d7e3f4,#f6f9fc) !important;border-bottom:1px solid #cdd9e9 !important} .emp-step,.step,.card,.r{background:#ffffff !important;border:1px solid #d4dde9 !important;box-shadow:0 4px 18px rgba(15,30,60,.10) !important} .emp-trust{background:#ffffff;border-top:1px solid #d4dde9;border-bottom:1px solid #d4dde9} .section-label,.sec-label{color:#1d4ed8} .emp-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px} .emp-gallery .emp-shot{display:block;border-radius:10px;overflow:hidden;border:1px solid #d4dde9;box-shadow:0 4px 18px rgba(15,30,60,.10)} .emp-gallery img{width:100%;height:220px;object-fit:cover;display:block} @media(max-width:760px){.emp-gallery{grid-template-columns:1fr 1fr}.emp-gallery img{height:160px}} .final-cta{background:linear-gradient(120deg,#1d4ed8,#2563eb) !important} .final-cta::before,.final-cta::after{display:none !important;background:none !important} .final-cta h2{color:#ffffff !important} .final-cta p{color:#dbe7ff !important} .final-cta .btn-primary{background:#ffffff !important;color:#1d4ed8 !important;box-shadow:0 6px 22px rgba(0,0,0,.18) !important} .final-cta .btn-ghost{color:#ffffff !important} nav{position:sticky !important;top:0} .page-header{padding-top:56px !important} .final-cta{background:#e9f0fa !important;border-top:1px solid #d4dde9;border-bottom:1px solid #d4dde9;padding:72px 5% !important} .final-cta h2{color:#0f1b2d !important} .final-cta p{color:#46535f !important} .final-cta .btn-primary{background:#1d4ed8 !important;color:#ffffff !important;box-shadow:0 6px 20px rgba(29,78,216,.25) !important} .final-cta .btn-ghost{color:#1d4ed8 !important} nav{z-index:1000 !important} .has-dropdown{position:relative;z-index:1001} .dropdown{z-index:1002 !important} nav.breadcrumbs{position:static !important;z-index:auto !important;top:auto !important;width:auto !important; background:#eef2f7 !important;border-top:none !important;border-bottom:1px solid #d4dde9 !important; box-shadow:none !important;backdrop-filter:none !important;display:block !important;padding:11px 5% !important} nav.breadcrumbs a{color:#5b6672 !important} nav.breadcrumbs span{color:#1d4ed8 !important} nav{background:#262b31 !important;border-bottom:1px solid #333a42 !important;box-shadow:0 2px 14px rgba(0,0,0,.22)} nav .logo{color:#ffffff !important} nav .logo span{color:#60a5fa !important} nav ul li a{color:#cfd6de !important} nav ul li a:hover{color:#ffffff !important} nav ul li.nav-social a{color:#cfd6de !important} nav ul li.nav-social a[href*="facebook.com"]:hover{color:#1877F2 !important} nav ul li.nav-social a[href*="instagram.com"]:hover{color:#E4405F !important} nav ul li.nav-social a[href*="youtube.com"]:hover{color:#FF0000 !important} nav ul li.nav-social a[href*="tiktok.com"]:hover{color:#ffffff !important} nav ul li.nav-social a[href*="share.google"]:hover{color:#4285F4 !important} .nav-cta{color:#ffffff !important} footer{background:#262b31 !important;border-top:1px solid #333a42 !important;color:#aeb6bf !important} footer a,footer p,footer li,footer span,.footer-about{color:#aeb6bf !important} footer h3,footer h4,footer h5,.footer-title,.footer-logo{color:#ffffff !important} .footer-logo span{color:#60a5fa !important} .footer-social a{color:#aeb6bf !important} .dropdown{background:#2f353d !important;border:1px solid #3a414a !important;box-shadow:0 14px 32px rgba(0,0,0,.38) !important;backdrop-filter:none !important} .dropdown li a{color:#dfe5ec !important;border-top:1px solid rgba(255,255,255,.06) !important} .dropdown li a:hover{color:#ffffff !important;background:rgba(255,255,255,.07) !important} nav .logo{font-size:1.8rem !important} .footer-logo{font-size:1.7rem !important} .emp-related{display:flex;flex-wrap:wrap;gap:9px 12px;margin-top:6px} .emp-related a{color:#1d4ed8;text-decoration:none;font-size:.9rem;border:1px solid #d4dde9;border-radius:6px;padding:6px 12px;background:#fff;transition:background .15s,color .15s} .emp-related a:hover{background:#1d4ed8;color:#fff;border-color:#1d4ed8} .emp-playlist-nav{display:flex;gap:12px;margin-top:14px;justify-content:center;} .emp-pl-btn{background:var(--gold);color:var(--navy);border:none;border-radius:6px;padding:10px 28px;font-size:1rem;font-weight:700;cursor:pointer;letter-spacing:.02em;transition:opacity .15s;} .emp-pl-btn:hover{opacity:.82;} .emp-reviews-section { background: var(--navy-mid); padding: 60px 24px; } .emp-agg-rating { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:32px; flex-wrap:wrap; } .emp-agg-num { font-size:3rem; font-weight:900; color:var(--white); line-height:1; } .emp-agg-stars { display:flex; gap:3px; } .emp-star { font-size:1.4rem; color:var(--gray); } .emp-star.on { color:#f5c518; } .emp-agg-count { color:var(--gray); font-size:.95rem; } .emp-reviews-wrap { overflow-x: scroll; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -8px; padding: 4px 8px 12px; } .emp-reviews-wrap::-webkit-scrollbar { display: none; } .emp-reviews-track { display: flex; gap: 20px; } .emp-rev-card { flex: 0 0 300px; scroll-snap-align: start; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 24px; text-align: left; display: flex; flex-direction: column; gap: 14px; } .emp-rev-stars { display:flex; gap:2px; } .emp-rev-stars .emp-star { font-size:1.1rem; } .emp-rev-text { color:var(--gray); line-height:1.75; font-size:.95rem; flex:1; margin:0; } .emp-rev-footer { display:flex; align-items:center; gap:12px; margin-top:auto; } .emp-rev-avatar { width:38px; height:38px; border-radius:50%; object-fit:cover; flex:none; } .emp-rev-meta strong { display:block; color:var(--white); font-size:.9rem; } .emp-rev-meta span { color:var(--gray); font-size:.82rem; } .emp-reviews-nav { display:flex; gap:12px; justify-content:center; margin-top:20px; margin-bottom:28px; } @media (max-width: 768px) { .emp-rev-card { flex: 0 0 calc(100vw - 64px); } .emp-agg-num { font-size:2.4rem; } } .emp-svc-header { background-image: linear-gradient(rgba(15,27,45,0.88),rgba(15,27,45,0.88)), url('/assets/img/2026/05/hero-basement-drywall.jpg') !important; background-size: cover !important; background-position: center 30% !important; background-repeat: no-repeat !important; border-bottom: none !important; padding: 100px 5% 64px !important; } .emp-svc-header h1, .emp-svc-header .emp-k1 { color: #ffffff !important; } .emp-svc-header .emp-k2 { color: var(--gold) !important; } .emp-svc-header .emp-k3 { color: rgba(255,255,255,0.75) !important; } .emp-svc-header .section-label { color: var(--gold) !important; } .emp-svc-header p, .emp-svc-header .section-intro { color: rgba(255,255,255,0.82) !important; } .emp-svc-header .emp-btn.s { border-color: rgba(255,255,255,0.5) !important; color: #ffffff !important; } @media(max-width:760px) { .emp-svc-header { padding: 80px 5% 48px !important; } } .emp-breadcrumb{font-size:.78rem;color:rgba(255,255,255,0.55);padding:0 0 18px;text-align:left;width:100%} .emp-breadcrumb a{color:rgba(255,255,255,0.55);text-decoration:none} .emp-breadcrumb a:hover{color:#fff} .emp-bc-sep{margin:0 5px;opacity:.6} .emp-bc-cur{color:rgba(255,255,255,0.85)} .emp-faq dt{display:block;padding-right:4px} .emp-faq dd{display:block;padding-top:4px} .emp-faq dt.emp-open + dd{display:block} .emp-faq-chev{display:none} .emp-faq dt.emp-open .emp-faq-chev{display:none} .emp-sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:9990; background:#0f1b2d;padding:10px 14px;gap:10px; border-top:2px solid #1d4ed8;box-shadow:0 -4px 24px rgba(0,0,0,0.3)} .emp-sticky-call{flex:2;background:#1d4ed8;color:#fff;text-align:center;padding:13px 10px; border-radius:8px;font-weight:700;font-size:.95rem;text-decoration:none;white-space:nowrap} .emp-sticky-quote{flex:1;background:rgba(255,255,255,0.08);color:#fff;text-align:center; padding:13px 10px;border-radius:8px;font-weight:600;font-size:.85rem;text-decoration:none; border:1px solid rgba(255,255,255,0.18);white-space:nowrap} .emp-sticky-call:hover{opacity:.92} .emp-sticky-quote:hover{background:rgba(255,255,255,0.14)} @media(max-width:767px){ .emp-sticky-cta{display:flex} body{padding-bottom:70px} } .emp-svc-content h3{font-size:1.05rem;font-weight:700;color:#0f1b2d;margin:22px 0 8px} .hero-google-badge{display:inline-block;line-height:0;text-decoration:none !important;cursor:pointer} .hero-google-badge img{display:block;width:100px;height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,0.35))} .footer-google-badge{margin-top:20px} .emp-hero-badges-row{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:18px} .emp-hero-badges-row .hero-google-badge{margin-top:0 !important} .hero-trustpilot-badge-svc{display:inline-block;line-height:0;text-decoration:none !important;cursor:pointer} .hero-trustpilot-badge-svc svg{display:block;width:160px;height:160px;filter:drop-shadow(0 6px 14px rgba(0,0,0,0.30))} @media (max-width: 480px) { .hero-trustpilot-badge-svc svg { width: 130px; height: 130px; } } .emp-more-section{background:var(--navy);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:40px 5%;} .emp-map-services-wrap{display:flex;flex-direction:column;gap:20px;align-items:stretch} .emp-map-frame{flex:none;width:100%;min-width:0} .emp-map-clip{position:relative;width:100%;height:409px;border-radius:12px;border:1px solid var(--line);overflow:hidden;box-sizing:border-box;} .emp-map-clip iframe{position:absolute;top:-60px;left:0;width:100%;height:calc(100% + 60px);border:0;display:block;} .emp-service-links{flex:1;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;} .emp-svc-link{display:flex;align-items:center;justify-content:space-between;color:var(--red);text-decoration:none;font-size:.9rem;padding:10px 15px;border-bottom:1px solid var(--line);transition:background .12s,color .12s;} .emp-svc-link:last-child{border-bottom:0} .emp-svc-link:hover{background:var(--red);color:#fff;} .emp-svc-link:hover .emp-svc-arrow{color:#fff} .emp-svc-link-all{font-weight:700;color:var(--white);background:var(--light-bg);} .emp-svc-link-all:hover{background:var(--red);color:#fff;} .emp-svc-arrow{font-size:1.1rem;color:var(--gray);transition:color .12s} @media(max-width:768px){.emp-map-services-wrap{flex-direction:column}.emp-map-frame{flex:none;width:100%}} .hero { position: relative; color: #fff; isolation: isolate; } .hero h1, .hero .hero-sub, .hero .stat-num, .hero .stat-label { color: #fff; } .hero h1 em { color: var(--gold); font-style: normal; } .hero .legal-badge-hero { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.25); } .hero .legal-badge-hero svg { color: var(--gold); } .hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.5); } .hero .btn-ghost:hover { background: rgba(255,255,255,0.1); } .hero-stats { border-top-color: rgba(255,255,255,0.18); } .hero-card { } @media (max-width: 768px) { .hero-bg-img { object-position: center right; } } .hero { } .hero-card { max-width: 720px; margin: 0 auto; } .hero-card .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 600px) { .hero-card .form-row { grid-template-columns: 1fr; gap: 0; } } .hero-card .form-group label { display: block; font-size: 0.78rem; font-weight: 700; color: #0f1b2d; margin-bottom: 4px; text-transform: none; letter-spacing: 0.01em; } .hero { display: block !important; align-items: initial !important; min-height: auto !important; padding-top: 80px !important; padding-bottom: 40px !important; } .hero > * { width: 100%; } .hero-card { max-width: 720px; margin-left: auto; margin-right: auto; } .hero-title-row { max-width: 1100px; margin: 0 auto 28px; text-align: center; } .hero-title-row h1 { text-align: center; margin: 0; } .hero-split { margin: 0 auto 36px; display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; } .hero-split-left { display: flex; align-items: center; flex: 0 0 auto; } .hero-split-right { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 460px; text-align: center; } .hero-split-right .hero-sub { margin: 0; text-align: center; line-height: 1.55; } .hero-split-right .legal-badge-hero { margin: 0; align-self: center; } @media (max-width: 768px) { .hero-split { gap: 18px; } } .hero-card .form-group { margin-bottom: 10px; } .hero-card .form-group label { font-size: 0.78rem; margin-bottom: 3px; display: block; font-weight: 600; } .hero-card .form-group input[type="text"], .hero-card .form-group input[type="tel"], .hero-card .form-group input[type="email"] { padding: 9px 12px; font-size: 0.95rem; border-radius: 8px; } .hero-card .card-headline { font-size: 1.2rem; margin-bottom: 6px; } .hero-card .card-sub { font-size: 0.85rem; margin-bottom: 14px; } .hero-card .submit-btn { padding: 12px 18px; font-size: 0.98rem; margin-top: 6px; } .hero-card .card-disclaimer { font-size: 0.75rem; margin-top: 8px; } .hero-card .form-group select { padding: 9px 12px; font-size: 0.95rem; border-radius: 8px; } .hero-card form > label, .hero-card form > label span { color: #0f1b2d !important; } .hero-google-badge { display: inline-block; line-height: 0; text-decoration: none !important; cursor: pointer; } .hero-google-badge img { display: block; width: 160px; height: auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.30)); } @media (max-width: 480px) { .hero-google-badge img { width: 130px; } } .where-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; max-width: 960px; margin-left: auto; margin-right: auto; } @media (min-width: 900px) { .where-grid { grid-template-columns: 1fr 1fr; gap: 40px; } } .where-left { display: flex; flex-direction: column; gap: 12px; } .where-left .section-label { margin: 0; } .where-text { padding-top: 0; } .where-map { position: relative; width: 100%; height: 360px; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 28px rgba(0,0,0,0.18); background: #1a2740; } .where-map iframe { width: 100% !important; height: 100% !important; border: 0; display: block; } @media (max-width: 899px) { .where-map { height: 280px; } } .where-map iframe { width: 100%; height: 100%; border: 0; } @supports not (aspect-ratio: 4/3) { .where-map { height: 320px; } } .where-text { order: 1; align-self: center; } @media (min-width: 900px) { .where-text { order: 2; padding-left: 8px; } } .where-city-grid { margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 720px) { .where-city-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .where-city-grid { grid-template-columns: 1fr; } } .hub-nbhd-quads { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 40px; margin-top: 8px; } .hub-nbhd-quad h4 { color: var(--gold); font-size: .92rem; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 6px; } .hub-nbhd-count { color: var(--gray); font-weight: 400; text-transform: none; letter-spacing: 0; } .hub-nbhd-links { list-style: none; margin: 0; padding: 0; column-count: 2; column-gap: 20px; } .hub-nbhd-links li { break-inside: avoid; margin-bottom: 6px; font-size: .85rem; line-height: 1.4; } .hub-nbhd-links a { color: var(--gray); text-decoration: none; } .hub-nbhd-links a:hover { color: var(--gold); text-decoration: underline; } @media (max-width: 900px) { .hub-nbhd-quads { grid-template-columns: 1fr; } } @media (max-width: 520px) { .hub-nbhd-links { column-count: 1; } } .homepage-faq { background: var(--navy-mid, #e2eaf4); padding: 56px 24px; } .homepage-faq h2 { text-align: center; margin: 0; } .faq-item { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; margin-bottom: 6px; overflow: hidden; transition: box-shadow .15s ease, border-color .15s ease; } .faq-item[open] { border-color: var(--gold); box-shadow: 0 4px 12px rgba(0,0,0,0.06); } .faq-q { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-weight: 700; font-size: 0.96rem; color: #0f1b2d; cursor: default; list-style: none; gap: 14px; line-height: 1.35; } .faq-item.faq-static { border-color: var(--gold); box-shadow: 0 4px 12px rgba(0,0,0,0.06); } .faq-q::-webkit-details-marker { display: none; } .faq-q:hover { color: var(--gold); } .faq-chevron { flex: 0 0 auto; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: rgba(251, 188, 5, 0.15); color: var(--gold); border-radius: 50%; font-size: 1.15rem; font-weight: 700; line-height: 1; transition: transform .2s ease; } .faq-item[open] .faq-chevron { transform: rotate(45deg); } .faq-a { padding: 0 16px 12px 16px; color: #3f4b59; line-height: 1.55; font-size: 0.92rem; } @media (max-width: 600px) { .homepage-faq { padding: 40px 14px; } .faq-q { font-size: 0.92rem; padding: 11px 14px; } .faq-a { padding: 0 14px 11px 14px; font-size: 0.9rem; } } .youtube-section { padding: 48px 24px; background: #0f1b2d; color: #fff; } .youtube-section .section-label, .youtube-section h2, .youtube-section .section-intro, .youtube-section .yt-counter { color: #fff !important; } .youtube-section .section-label { background: rgba(255,255,255,0.12); color: #fff !important; } .youtube-section .section-intro { opacity: 0.92; } .youtube-section h2 { text-align: center; } .yt-pill-row { display: flex; gap: 8px; padding: 4px 4px 16px; justify-content: center; flex-wrap: wrap; } @media (max-width: 720px) { .yt-pill-row { overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; justify-content: flex-start; scrollbar-width: none; } .yt-pill-row::-webkit-scrollbar { display: none; } } .yt-pill { flex: 0 0 auto; scroll-snap-align: start; padding: 8px 16px; border-radius: 999px; background: #fff; color: var(--gray); border: 1px solid rgba(0,0,0,0.08); font-size: 0.88rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s, transform .1s; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .yt-pill:hover { border-color: var(--gold); color: var(--gold); } .yt-pill.active { background: var(--gold); color: #fff; border-color: var(--gold); box-shadow: 0 4px 12px rgba(29,78,216,0.25); } .yt-embed-wrap { position: relative; width: 100%; max-width: 580px; margin: 0 auto; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 32px rgba(0,0,0,0.18); } .yt-embed-wrap iframe, .yt-embed-wrap > div#ytPlayer { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } @supports not (aspect-ratio: 16/9) { .yt-embed-wrap { padding-top: 56.25%; height: 0; } } .yt-arrow-ov { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(15, 27, 45, 0.55); color: #fff; cursor: pointer; opacity: 1; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: 0 6px 18px rgba(0,0,0,0.28); transition: background .18s, opacity .18s, transform .12s; } .yt-arrow-ov svg { width: 26px; height: 26px; display: block; } .yt-arrow-ov-prev { left: 12px; } .yt-arrow-ov-next { right: 12px; } .yt-arrow-ov:hover { background: var(--gold); transform: translateY(-50%) scale(1.06); } .yt-arrow-ov:active { transform: translateY(-50%) scale(0.96); } .yt-arrow-ov:disabled { opacity: 0.28; cursor: not-allowed; transform: translateY(-50%); pointer-events: none; } @media (min-width: 900px) { .yt-arrow-ov { opacity: 0; } .yt-embed-wrap:hover .yt-arrow-ov, .yt-embed-wrap:focus-within .yt-arrow-ov { opacity: 1; } } .yt-counter { margin-top: 14px; color: rgba(255,255,255,0.7); font-size: 0.85rem; letter-spacing: 0.03em; } .youtube-section .yt-counter { color: var(--gray); } @media (max-width: 768px) { .youtube-section { padding: 32px 14px; } .yt-arrow-ov { width: 44px; height: 44px; } .yt-arrow-ov svg { width: 22px; height: 22px; } .yt-arrow-ov-prev { left: 8px; } .yt-arrow-ov-next { right: 8px; } } .hero-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: 0; pointer-events: none; } .hero::after { content: ''; position: absolute; inset: 0; background: rgba(15, 27, 45, 0.78); z-index: 1; pointer-events: none; } .hero::before { z-index: 2; } .hero-title-row, .hero-split, .hero-card { position: relative; z-index: 3; } .trust-badges-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 32px; max-width: 1200px; margin: 4px auto 28px; padding: 22px 24px; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); } .trust-badge { display: inline-flex; align-items: center; gap: 9px; text-decoration: none !important; color: #cfd6de !important; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.01em; opacity: 0.94; transition: opacity 0.2s, transform 0.15s; } .trust-badge:hover { opacity: 1; transform: translateY(-1px); } .trust-badge img { width: 26px; height: 26px; display: block; border-radius: 5px; } .trust-badge svg { flex-shrink: 0; width: 26px; height: 26px; display: block; } .trust-badge .trust-badge-text { display: flex; flex-direction: column; line-height: 1.2; } .trust-badge .trust-badge-sub { font-size: 0.66rem; font-weight: 500; color: #93a0ac; letter-spacing: 0.02em; text-transform: uppercase; } .trust-badge-wordmark { color: #00b67a !important; font-weight: 800; } .trust-badges-row.trust-badges-light { border-top-color: rgba(15,27,45,0.10); border-bottom-color: rgba(15,27,45,0.10); } .trust-badges-light .trust-badge { color: var(--white,#0f1b2d) !important; opacity: 1; } .trust-badges-light .trust-badge .trust-badge-sub { color: var(--gray,#3f4b59); } @media (max-width: 640px) { .trust-badges-row { gap: 20px; padding: 16px 16px; } } .trust-badges-row.trust-badges-footer { justify-content: space-between; gap: 64px; padding: 34px 8px; } .trust-badges-footer .trust-badge { font-size: 1.15rem; font-weight: 700; } .trust-badges-footer .trust-badge svg, .trust-badges-footer .trust-badge img { width: 46px; height: 46px; border-radius: 8px; } .trust-badges-footer .trust-badge-wordmark { font-size: 1.3rem; } @media (max-width: 640px) { .trust-badges-row.trust-badges-footer { justify-content: center; gap: 36px; } .trust-badges-footer .trust-badge svg, .trust-badges-footer .trust-badge img { width: 38px; height: 38px; } } .hero-trust-badges { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .hero-trustpilot-badge { display: inline-flex; flex-direction: row; align-items: center; gap: 10px; text-decoration: none !important; } .hero-trustpilot-badge svg { width: 46px; height: 46px; flex-shrink: 0; } .hero-trustpilot-badge span.tp-word { font-size: 1.25rem; font-weight: 800; color: #cfd6de; letter-spacing: 0.01em; } .hero-trustpilot-badge span.tp-cta { font-size: 0.62rem; font-weight: 600; color: #3f4b59; text-transform: uppercase; letter-spacing: 0.05em; } .how-it-works-v2 { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 56px; } @media (min-width: 640px) { .how-it-works-v2 { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .how-it-works-v2 { grid-template-columns: repeat(4,1fr); } } .how-step { background: #ffffff; border: 1px solid #e2e8f1; border-radius: 14px; padding: 34px 22px 28px; text-align: center; position: relative; box-shadow: 0 4px 18px rgba(15,30,60,0.06); transition: transform 0.18s ease, box-shadow 0.18s ease; } .how-step:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(15,30,60,0.12); } .how-step-num { position: absolute; top: 14px; right: 18px; font-family: 'DM Sans', sans-serif; font-size: 0.72rem; font-weight: 800; color: rgba(29,78,216,0.75); letter-spacing: 0.05em; } .how-step-icon { width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 50%; background: linear-gradient(135deg,#1d4ed8,#4f84ff); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(29,78,216,0.28); } .how-step-icon svg { width: 28px; height: 28px; color: #fff; } .how-step h3 { font-family: 'DM Sans', sans-serif; font-size: 1.08rem; font-weight: 800; color: #0f1b2d; margin-bottom: 10px; } .how-step p { font-size: 0.9rem; font-weight: 500; color: #2b2b2b; line-height: 1.65; margin: 0; } @media (min-width: 1000px) { .how-step:not(:last-child)::after { content: ''; position: absolute; top: 44px; right: -22px; width: 22px; height: 2px; background: repeating-linear-gradient(90deg, rgba(29,78,216,0.35) 0 6px, transparent 6px 10px); z-index: 2; } } .footer-reviews{display:flex;justify-content:center;align-items:center;gap:40px;max-width:1200px;margin:0 auto;padding:8px 20px 24px;flex-wrap:wrap;} @media(max-width:900px){.footer-reviews{margin:8px auto 0;padding-right:0;justify-content:center;}} @media(max-width:900px){.footer-reviews{justify-content:center;padding-left:0;padding-right:0;}} .footer-reviews .fr-tp-word{color:#cfd6de;font-weight:800;font-size:1.25rem;letter-spacing:0.01em;} .footer-reviews .fr-item{display:inline-flex;align-items:center;gap:12px;text-decoration:none !important;opacity:0.95;transition:opacity .2s;} .footer-reviews .fr-item:hover{opacity:1;} .footer-reviews .fr-item img,.footer-reviews .fr-item svg{width:46px;height:46px;border-radius:6px;display:block;flex-shrink:0;} .footer-reviews .fr-text{display:flex;flex-direction:column;line-height:1.25;} .footer-reviews .fr-text strong{font-size:1.2rem;font-weight:800;color:#cfd6de;} .footer-reviews .fr-text .fr-tp{color:#00b67a !important;} .footer-reviews .fr-text em{font-size:0.74rem;font-style:normal;text-transform:uppercase;letter-spacing:0.04em;color:#93a0ac;} @media(max-width:640px){.footer-reviews{justify-content:center;gap:30px;}} @media(min-width:640px){ .emp-service-links{display:block;column-count:2;column-gap:0;} .emp-service-links .emp-svc-link{break-inside:avoid;} .emp-service-links .emp-svc-link-all{-webkit-column-span:all;column-span:all;} } @media(min-width:820px){ .emp-service-links{column-count:3;} } @media(min-width:1040px){ .emp-service-links{column-count:4;} } .emp-svc-cat{ padding:10px 15px 8px; font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase; color:var(--gray);background:var(--light-bg); border-bottom:1px solid var(--line); break-inside:avoid;break-after:avoid;-webkit-column-break-after:avoid; } .emp-svc-cat:first-of-type{border-top:0} .emp-photo{display:block;width:100%;max-width:100%;height:auto;border-radius:12px;box-shadow:0 4px 18px rgba(15,30,60,0.10);} .emp-photo-cap{display:block;margin-top:10px;font-size:0.82rem;color:var(--gray);text-align:center;} .emp-photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:24px;} .emp-photo-grid .emp-photo{height:220px;object-fit:cover;} @media(max-width:600px){.emp-photo-grid{grid-template-columns:1fr 1fr;gap:10px;}.emp-photo-grid .emp-photo{height:150px;}}
/* ---- calculator widget, moved out of mu-plugins/emp-drywall-calculator.php
   2026-08-23. Was inlined into all 14,871 pages by empcalc_assets() on
   wp_footer. Zero of its selectors collide with anything above, so nothing
   here changes precedence. ---- */
.empcalc{max-width:720px;margin:32px auto;background:#fff;border:1px solid #e5e9f0;border-radius:14px;padding:26px 24px;box-shadow:0 6px 24px rgba(10,22,40,.08);color:#0a1628;font-family:inherit;text-align:left;}
.empcalc *{box-sizing:border-box;}
.empcalc-head h3{margin:6px 0 4px;font-size:1.35rem;color:#0a1628;line-height:1.2;}
.empcalc-head p{margin:0 0 16px;color:#5a6675;font-size:.95rem;}
.empcalc-badge{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#b8860b;background:#faf3df;padding:5px 10px;border-radius:999px;}
.empcalc-tabs{display:flex;gap:8px;margin:0 0 16px;}
.empcalc-tab{flex:1;padding:9px;border:1px solid #cfd6e0;background:#fff;border-radius:8px;font-weight:800;font-size:.9rem;color:#5a6675;cursor:pointer;}
.empcalc-tab.is-active{background:#0a1628;color:#fff;border-color:#0a1628;}
.empcalc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;}
.empcalc-grid label{display:flex;flex-direction:column;font-size:.8rem;font-weight:700;color:#33404f;gap:6px;}
.empcalc-grid input,.empcalc-grid select{width:100%;padding:10px 12px;border:1px solid #cfd6e0;border-radius:8px;font-size:1rem;color:#0a1628;background:#fff;}
.empcalc-grid .ec-check{flex-direction:row;align-items:center;gap:8px;}
.empcalc-grid .ec-check input{width:auto;}
.empcalc .ec-only-paint,.empcalc .ec-only-ins,.empcalc .ec-only-fr{display:none;}
.empcalc[data-mode="drywall"] .ec-only-drywall{display:flex;}
.empcalc[data-mode="paint"] .ec-only-paint{display:flex;}
.empcalc[data-mode="paint"] .ec-only-drywall{display:none;}
.empcalc[data-mode="insulation"] .ec-only-ins{display:flex;}
.empcalc[data-mode="insulation"] .ec-only-drywall{display:none;}
.empcalc[data-mode="framing"] .ec-only-fr{display:flex;}
.empcalc[data-mode="framing"] .ec-only-drywall{display:none;}
.empcalc[data-mode="framing"] .ec-ceil-wrap{display:none;}
.empcalc:not([data-mode="insulation"]) .ec-attic-only{display:none!important;}
.empcalc[data-cav="wall"] .ec-attic-only{display:none!important;}
.empcalc-btn{margin-top:18px;width:100%;padding:13px;border:0;border-radius:9px;background:#0a1628;color:#fff;font-size:1rem;font-weight:800;cursor:pointer;}
.empcalc-btn:hover{background:#16233b;}
.empcalc-out{margin-top:20px;background:#f6f8fb;border:1px solid #e5e9f0;border-radius:10px;padding:18px;}
.empcalc-out h4{margin:0 0 6px;font-size:1.05rem;color:#0a1628;}
.empcalc-total{margin:0 0 14px;font-size:.88rem;color:#5a6675;}
.empcalc-res{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;}
.empcalc-res div{font-size:.9rem;color:#33404f;}
.empcalc-res strong{display:block;font-size:1.5rem;color:#0a1628;line-height:1.1;}
.empcalc-lead{margin-top:18px;border-top:1px solid #e5e9f0;padding-top:6px;}
.empcalc-lead h4{color:#0a1628;}
.empcalc-lead-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.empcalc-lead-grid label{display:flex;flex-direction:column;font-size:.8rem;font-weight:700;color:#33404f;gap:6px;}
.empcalc-lead-grid input{width:100%;padding:10px 12px;border:1px solid #cfd6e0;border-radius:8px;font-size:1rem;color:#0a1628;background:#fff;}
@media(max-width:560px){.empcalc-lead-grid{grid-template-columns:1fr;}}
.empcalc-note{margin:14px 0 0;font-size:.74rem;color:#8a94a2;}
.empcalc-cta{display:inline-block;margin-top:16px;}
.empcalc-inline-sec{padding:54px 20px;background:#eef2f7;text-align:center;}
.empcalc-inline-head{max-width:720px;margin:0 auto 22px;}
.empcalc-inline-head h2{margin:8px 0 0;color:#0f1b2d;font-size:1.7rem;}
.empcalc-fab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:9998;background:#0a1628;color:#fff;border:0;border-radius:8px 0 0 8px;padding:14px 9px;font-weight:800;font-size:.72rem;letter-spacing:.08em;cursor:pointer;writing-mode:vertical-rl;text-orientation:mixed;box-shadow:-2px 2px 12px rgba(0,0,0,.28);text-transform:uppercase;}
.empcalc-fab:hover{background:#16233b;}
.empcalc-modal{position:fixed;inset:0;z-index:9999;background:rgba(6,14,26,.72);display:flex;align-items:flex-start;justify-content:center;padding:5vh 16px;overflow:auto;}
.empcalc-modal[hidden]{display:none;}
.empcalc-modal-box{position:relative;width:100%;max-width:760px;}
.empcalc-modal-box .empcalc{margin:0;}
.empcalc-close{position:absolute;top:-14px;right:-4px;z-index:2;width:36px;height:36px;border-radius:50%;border:0;background:#fff;color:#0a1628;font-size:1.5rem;line-height:1;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.3);}
@media(max-width:560px){.empcalc-grid{grid-template-columns:1fr;}.empcalc-fab{font-size:.66rem;padding:12px 8px;}
.empcalc-tabs{flex-wrap:wrap;gap:6px;}.empcalc-tab{flex:1 1 calc(50% - 3px);padding:8px 4px;font-size:.78rem;}}
/* ---- 4b blog-strip, moved out 2026-08-23. Zero selector conflicts. ---- */
        <?php /* SPARSE BLOCK, 2026-08-20 -- rationale kept in PHP, which never reaches the
           browser. .blog-grid is auto-fit/1fr, so ONE card stretches the full 1200px
           container and reads as a broken layout, which is what every service page did
           while only one post existed. Capping the column and centring fixes it. A CSS
           comment here would have shipped on all 14,820 pages. */ ?>
        .blog-grid.emp-blog-sparse{grid-template-columns:repeat(auto-fit,minmax(320px,460px));justify-content:center}
        .emp-bstrip{position:relative}
        .emp-blog-strip{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:18px;padding-bottom:10px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
        .emp-blog-strip::-webkit-scrollbar{height:8px}
        .emp-blog-strip::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:4px}
        .emp-blog-strip::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:4px}
        .emp-blog-strip>.blog-card{flex:0 0 min(360px,86%);scroll-snap-align:start}
        .emp-bstrip-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:42px;height:42px;border:0;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.4)}
        .emp-bstrip-arrow:hover{background:#dd2244}
        .emp-bstrip-prev{left:-8px}
        .emp-bstrip-next{right:-8px}
        @media(max-width:600px){.emp-bstrip-arrow{display:none}}
        
/* ---- 4c fb-follow, moved out 2026-08-23. Zero selector conflicts. ---- */
        #emp-fb-follow{background:#eef3fb;border-top:1px solid #d9e2f1;border-bottom:1px solid #d9e2f1;padding:20px 5%;}
        #emp-fb-follow .fb-inner{max-width:1000px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;text-align:center;}
        #emp-fb-follow .fb-logo{width:40px;height:40px;flex-shrink:0;}
        #emp-fb-follow .fb-copy{color:#1b2c47;font-weight:700;font-size:1.02rem;line-height:1.35;}
        #emp-fb-follow .fb-copy small{display:block;color:#4a5a72;font-weight:500;font-size:.85rem;margin-top:2px;}
        #emp-fb-follow .fb-btn{display:inline-flex;align-items:center;gap:8px;background:#1877F2;color:#fff !important;font-weight:800;font-size:.92rem;padding:11px 22px;border-radius:8px;text-decoration:none;transition:background .18s ease;white-space:nowrap;}
        #emp-fb-follow .fb-btn:hover{background:#0f5ed6;}
        #emp-fb-follow .fb-btn svg{width:18px;height:18px;}
        @media(max-width:560px){#emp-fb-follow .fb-inner{flex-direction:column;gap:12px;}}
      
/* ---- self-hosted fonts, moved out of functions.php af_local_fonts_css()
   2026-08-23. Root-relative on purpose: keeps this static file host-agnostic,
   and the never-break standard preserves root-relative-in -> root-relative-out.
   The rel=preload links stay in wp_head and still drive load timing. ---- */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:300;font-display:swap;src:url("/assets/fonts/dm-sans-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:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/dm-sans-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:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/dm-sans-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:"DM Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/dm-sans-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:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/playfair-display-700-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:"Playfair Display";font-style:normal;font-weight:900;font-display:swap;src:url("/assets/fonts/playfair-display-700-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}

/* Brand lockup v2 (Dustin logo 2026-07-19): blue 'Drywall' + tagline; white wordmark on dark */
.logo,.footer-logo{display:inline-block;line-height:1.12;}  /* words stay INLINE on one line (flex-column stacked them — reverted 2026-07-19) */
.logo span,.footer-logo span{color:#2f6bff !important;}
.logo-tag{display:block;font-size:0.5rem;font-weight:700;letter-spacing:0.2em;color:#cfd6de;text-transform:uppercase;margin-top:3px;white-space:nowrap;}
.footer-logo .logo-tag{font-size:0.55rem;color:#9aa4b2;}
@media(max-width:560px){.logo-tag{display:none;}}
/* 🔴 2026-08-11 — MOBILE MENU WAS UNREACHABLE ON AN IPHONE.
   style.css:1102 forces `nav .logo{font-size:1.8rem !important}` at EVERY width. At 390px —
   the standard iPhone 14/15/16 viewport — the wordmark is wide enough to push the hamburger
   completely off the right edge, so there was no way to open the navigation at all. It renders
   fine at 520px, which is why desktop testing and a casual phone glance both miss it.
   Verified by headless render at 390 / 520 / 768 before and after. */
@media(max-width:430px){
  nav .logo{font-size:1.3rem !important;}
  .mobile-toggle{flex:0 0 auto;}
}
/* social icons (added 2026-05-26) */
nav ul li.nav-social{display:flex;align-items:center;gap:12px;}
nav ul li.nav-social a{color:#5b6672;display:inline-flex;align-items:center;transition:color .2s;}
nav ul li.nav-social a:hover{color:var(--gold,#c8a24a);}
.footer-social{display:flex;gap:16px;margin-top:16px;align-items:center;}
.footer-social a{color:var(--gray,#9a9a9a);display:inline-flex;align-items:center;transition:color .2s;}
.footer-social a:hover{color:var(--gold,#c8a24a);}
/* Careers nav item — 2026-08-11. The careers page previously had ONE internal link on the whole
   site (a footer link), so the hiring funnel had no front door. Adding an 8th top-level item to
   `nav ul` (display:flex, gap:32px in style.css) overflowed the bar.
   FIRST ATTEMPT WAS WRONG: it capped the fix at max-width:1320px on the assumption the squeeze
   only happened at laptop widths. Dustin's screenshot at 100% zoom on a ~1850px viewport showed
   "SERVICE AREAS" wrapping to two lines and "GET A FREE QUOTE" spilling OUTSIDE its button — the
   bar was already near capacity at full desktop width, so the 8th item broke it everywhere.
   Root cause of the ugly part: `nav ul li a` sets no `white-space`, so labels are free to wrap
   mid-item; the CTA's background box does not grow with the wrapped text.
   Fix = never wrap a nav label, and buy the horizontal room back from the gaps and CTA padding.
   Measured at 1852px: gap 32->18 frees ~112px across 8 gaps, CTA padding ~12px, social ~8px —
   about 130px against an estimated ~85px of overflow. Below 1500px it tightens further.
   Scoped here rather than in style.css deliberately: style.css is shared across every page and is
   live layout work in another window. Mobile (<769px) is a stacked column and is untouched. */
@media(min-width:769px){
  nav ul{gap:18px;}
  nav ul li a{white-space:nowrap;}
  nav ul li.nav-social{gap:10px;}
  .nav-cta{padding:10px 16px;}
}
@media(min-width:769px) and (max-width:1500px){
  nav ul{gap:12px;margin-left:26px;}
  nav ul li a{font-size:0.78rem;letter-spacing:0.03em;}
  .nav-cta{padding:9px 12px;}
}
/* Headless-render check at 1280px (2026-08-11): the tightened gaps fit all 8 items on one line,
   but the wordmark ended up butting straight into SERVICES with no breathing room. The gap above
   buys the room back; verified by screenshot at 1280 and 1852 rather than by arithmetic. */
/* Services mega-dropdown — 2 columns on desktop, single column on mobile (2026-06-29) */
@media(min-width:769px){
  .dropdown-2col{min-width:480px;column-count:2;column-gap:4px;}
  .dropdown-2col li{break-inside:avoid;}
}
.dropdown-2col li.dd-all a{color:var(--gold,#c8a24a);font-weight:700;}
/* Services panel: original list + Framing/Painting groups appended on the right (Dustin screenshot 2026-07-18 235405) */
.dropdown-flex ul{display:block;gap:0;}  /* kill nav-ul flex inheritance — without this the list flows horizontally */
@media(min-width:769px){
  .has-dropdown:hover .dropdown-flex{display:flex;gap:10px;}
  .dropdown-flex{min-width:760px;}
  .dd-col2{column-count:2;column-gap:4px;min-width:480px;list-style:none;margin:0;padding:0;}
  .dd-col2 li{break-inside:avoid;}
  /* Framing + Painting stack in the first column, Insulation gets its own column to the
     RIGHT of them (Dustin 2026-08-11). Stacked vertically, the three groups ran the panel
     past the bottom of a 900px-tall viewport and Insulation was cut off mid-list, so the
     newest service family was the one nobody could reach. Explicit grid placement, because
     auto-flow would put Framing|Painting side by side and drop Insulation underneath. */
  .dd-extra{border-left:1px solid rgba(255,255,255,.10);padding-bottom:6px;
            display:grid;grid-template-columns:max-content max-content;
            column-gap:4px;align-items:start;}
  /* Swapped 2026-08-11 (Dustin: "flip the framing and insulation"). Source order in the
     markup is unchanged — Framing, Painting, Insulation — so the HTML still reads in a
     sensible order for screen readers and crawlers; only the visual placement swaps.
     nth-child(1)=Framing  nth-child(2)=Painting  nth-child(3)=Insulation */
  .ddx-group:nth-child(1){grid-column:2;grid-row:1;}   /* Framing    -> right column */
  .ddx-group:nth-child(2){grid-column:1;grid-row:2;}   /* Painting   -> stays lower-left */
  .ddx-group:nth-child(3){grid-column:1;grid-row:1;}   /* Insulation -> upper-left */
  .ddx-group{min-width:225px;}
  .dropdown-flex{min-width:1000px;}   /* was 760: the extra column needs the room */
}
/* Mobile keeps the simple stacked flow — a 2-col grid at 320px would be unreadable. */
@media(max-width:768px){ .dd-extra{display:block;} }
.dd-col2{list-style:none;}
.dd-extra ul{list-style:none;margin:0;padding:0;}
.ddx-title{display:block;padding:9px 20px 4px;font-weight:800;color:var(--gold,#c8a24a);font-size:0.72rem;text-transform:uppercase;letter-spacing:.08em;}
.dd-col2 li.dd-all a{color:var(--gold,#c8a24a);font-weight:700;}
/* Centered section headings site-wide (Dustin 2026-07-19) */
section .section-label{text-align:center;}
section h2{text-align:center;margin-left:auto;margin-right:auto;}  /* h2 box is max-width:720px — WITHOUT auto margins it anchors LEFT while labels center full-width (the shifted-titles bug, root-caused 2026-07-19) */
section .section-intro{margin-left:auto;margin-right:auto;text-align:center;}


#emp-callbar{display:none;}
@media(max-width:768px){
  #emp-callbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9999;
    gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
    background:rgba(11,18,32,0.97);border-top:1px solid rgba(255,255,255,0.10);
    box-shadow:0 -6px 20px rgba(0,0,0,0.28);
  }
  #emp-callbar a{
    flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:7px;
    min-height:48px;border-radius:9px;text-decoration:none;
    font-weight:800;font-size:0.98rem;letter-spacing:.01em;line-height:1.1;
  }
  #emp-callbar .emp-call{background:#2f6bff;color:#fff;}
  #emp-callbar .emp-quote{background:transparent;color:#e8edf5;border:1px solid rgba(255,255,255,0.28);}
  #emp-callbar a:focus-visible{outline:3px solid #ffd479;outline-offset:2px;}
  #emp-callbar svg{flex:0 0 auto;}
  body{padding-bottom:76px;}
}
@media print{#emp-callbar{display:none !important;}}


/* Footer interactivity + responsive — Dustin 2026-07-19. Grid targeted by .footer-cols class
   (robust: NOT :first-child, which an injected element can break). Placed at END of footer so
   it cannot become footer's first child. Fixes mobile: 4-col grid was not collapsing -> page
   overflow + clipped text on phones. */
footer ul li a{transition:color .16s ease,padding-left .16s ease;}
footer ul li a:hover{color:#4d9fff !important;padding-left:5px;}
@media (max-width: 900px){
  .footer-cols{grid-template-columns:1fr 1fr !important;gap:30px !important;}
  .footer-social{display:flex !important;flex-wrap:wrap;gap:12px;}
}
@media (max-width: 600px){
  .footer-cols{grid-template-columns:1fr !important;gap:26px !important;text-align:center;}
  .footer-cols .footer-about{max-width:100% !important;margin-left:auto;margin-right:auto;}
  .footer-cols .footer-logo img{margin-left:auto;margin-right:auto;}
  .footer-cols .footer-social{display:flex !important;flex-wrap:wrap;justify-content:center;gap:16px;}
  .footer-reviews{flex-direction:column !important;gap:16px !important;padding:12px 16px 22px !important;}
  .footer-bottom{flex-direction:column;gap:10px;text-align:center;align-items:center !important;}
  #emp-fb-follow{padding-left:14px !important;padding-right:14px !important;}
  #emp-fb-follow .fb-inner{flex-direction:column !important;align-items:stretch !important;text-align:center;gap:12px !important;max-width:100% !important;}
  #emp-fb-follow .fb-copy{max-width:100% !important;min-width:0;width:100%;text-align:center;overflow-wrap:break-word;}
  #emp-fb-follow .fb-btn{align-self:center;}
}