* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
font-family: "Montserrat", sans-serif;
background: #111;
color: #fff;
line-height: 1.6;
}

.container {
  width: 90%;
  max-width: 1000px;
  margin: auto;
}

.hero {
  background: #000;
  padding: 80px 0;
  text-align: center;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

/* Hero supporting text */
.hero-sub {
color: #ccc;
margin-bottom: 22px;
font-size: 1rem;
}

/* ===== HERO SLOGAN ===== */
.hero-slogan {
font-family: "Playfair Display", serif;
font-size: 2.1rem;
font-weight: 700;
line-height: 1.25;
text-align: center;
color: #ffffff;
margin: 18px auto 6px;
max-width: 720px;
text-shadow: 0 4px 16px rgba(0,0,0,0.55);
}

.hero-support {
font-family: "Montserrat", sans-serif;
font-size: 0.95rem;
font-weight: 500;
text-align: center;
color: #f1f1f1;
margin: 0 auto 22px;
max-width: 640px;
opacity: 0.95;
}

/* Mobile tuning */
@media (max-width: 768px) {
.hero {
padding: 60px 0;
}

.hero h1 {
font-size: 2rem;
}

.hero-slogan {
font-size: 1.6rem;
}

.hero-support {
font-size: 0.9rem;
}
}

.call-btn {
background: #c1121f;
color: #fff;
padding: 16px 28px;
font-size: 1.15rem;
font-weight: 700;
border-radius: 12px;
display: inline-block;
margin-right: 10px;
}

.text-btn,
.book-btn {
background: #111;
color: #fff;
padding: 14px 22px;
font-size: 1rem;
border-radius: 10px;
opacity: 0.9;
}

.text-btn:hover,
.book-btn:hover {
opacity: 1;
}

.section {
  padding: 60px 0;
  background: #111;
}

.section.dark {
  background: #1a1a1a;
}

.section h2 {
  margin-bottom: 20px;
  text-align: center;
}

.services, .why {
  list-style: none;
  text-align: center;
}

.services li, .why li {
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.cta {
  background: #000;
  padding: 60px 0;
  text-align: center;
}

footer {
  background: #000;
  text-align: center;
  padding: 20px 0;
  color: #777;
}

.top-bar {
background: #000;
padding: 15px 0;
text-align: center;
}

.logo-full {
max-width: 280px;
width: 100%;
}

.hero {
position: relative;
background-image: url("images/hero-bg.jpg.jpg");
background-size: cover;
background-position: 50% -8%; /* shows people + truck */
padding: 55px 20px; /* shorter = banner feel */
height: 420px;
max-height: none;
overflow: hidden;
color: #fff;
}

.hero::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.55);
}

.hero .container {
position: relative;
z-index: 2;
}

@media (max-width: 768px) {
.top-bar {
padding: 18px 10px;
}

.logo-full {
max-width: 85%;
}
}

.top-bar {
backdrop-filter: blur(2px);
}

.book-btn{
background:#ffffff;
color:#000;
padding:16px 36px;
font-size:1.15rem;
font-weight:600;
text-decoration:none;
border-radius:50px;
display:inline-block;
margin-left:12px;
border:2px solid #c1121f;
transition:all 0.2s ease;
}

.book-btn:hover{
background:#c1121f;
color:#fff;
transform:scale(1.03);
}

.hero {
background: linear-gradient(135deg, #000000, #1a0000);
border-bottom: 4px solid #c1121f;
}

.hero {
background: linear-gradient(135deg, #000000, #1a0000);
border-bottom: 4px solid #c1121f;
padding: 80px 20px;
text-align: center;
}

.hero h1 {
color: #ffffff;
font-size: 2.5rem;
margin-bottom: 10px;
}

.hero p {
color: #dddddd;
font-size: 1.2rem;
margin-bottom: 25px;
}

.hero {
background: linear-gradient(135deg, #000000, #1a0000);
border-bottom: 4px solid #c1121f;
padding: 80px 20px;
text-align: center;
}

.hero h1 {
color: #ffffff;
font-size: 2.5rem;
margin-bottom: 10px;
}

.hero p {
color: #dddddd;
font-size: 1.2rem;
margin-bottom: 25px;
}

.book-btn{
background:#ffffff;
color:#000;
padding:16px 36px;
font-size:1.15rem;
font-weight:600;
text-decoration:none;
border-radius:50px;
display:inline-block;
margin-left:12px;
border:2px solid #c1121f;
transition:all 0.2s ease;
}

.book-btn:hover{
background:#c1121f;
color:#fff;
transform:scale(1.03);
}

.call-btn {
background: #c1121f;
color: #fff;
padding: 16px 36px;
font-size: 1.2rem;
text-decoration: none;
border-radius: 50px;
display: inline-block;
margin-right: 12px;
}

.call-btn:hover {
background: #a50f19;
transform: scale(1.05);
}

.sticky-call {
position: fixed;
bottom: 20px;
right: 20px;
background: #c1121f;
color: #fff;
padding: 16px 24px;
border-radius: 50px;
font-size: 1.1rem;
text-decoration: none;
z-index: 999;
}

.accent {
color: #c1121f;
}

.hero-sub {
font-size: 1.25rem;
margin-bottom: 20px;
}

.hero-badges {
display: flex;
justify-content: center;
gap: 18px;
margin-bottom: 30px;
flex-wrap: wrap;
}

.hero-badges span {
background: rgba(255,255,255,0.1);
padding: 10px 18px;
border-radius: 20px;
font-size: 0.95rem;
color: #fff;
}

.service-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}


.service-card {
background: #fff;
color: #111; /* <-- this is the fix */
padding: 22px;
border-radius: 14px;
font-size: 1.05rem;
font-weight: 600;
box-shadow: 0 12px 30px rgba(0,0,0,0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
display: flex; /* makes emoji + text align */
gap: 12px;
align-items: center;
}

.service-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

.trust-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 18px;
text-align: center;
}

.trust-grid div {
background: #1c1c1c;
padding: 20px;
border-radius: 12px;
font-size: 1.05rem;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(193,18,31,0.6); }
70% { box-shadow: 0 0 0 15px rgba(193,18,31,0); }
100% { box-shadow: 0 0 0 0 rgba(193,18,31,0); }
}

.call-btn {
animation: pulse 2.5s infinite;
}

.service-card {
animation: fadeUp 0.6s ease forwards;
}

@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.alert-bar {
background: #c1121f;
color: #fff;
text-align: center;
padding: 12px;
font-weight: 600;
animation: glow 1.8s infinite alternate;
}

@keyframes glow {
from { opacity: 1; }
to { opacity: 0.7; }
}

grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 22px;
text-align: center;
}

.step-card {
background: #fff;
padding: 26px;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.step-card span {
width: 48px;
height: 48px;
background: #c1121f; /* your red */
color: #fff;
border-radius: 50%;
display: flex; /* 👈 key */
align-items: center; /* 👈 vertical center */
justify-content: center; /* 👈 horizontal center */
font-weight: 800;
font-size: 1.2rem;
margin-bottom: 12px;
}

.step-card {
text-align: center;
}

.serve-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
text-align: center;
}

.serve-grid div {
background: #1c1c1c;
padding: 24px;
border-radius: 14px;
font-size: 1.05rem;
}

.about-text {
max-width: 800px;
margin: auto;
font-size: 1.15rem;
line-height: 1.7;
text-align: center;
}

.problem-list {
max-width: 700px;
margin: auto;
list-style: none;
}

.problem-list li {
background: #f5f5f5;
padding: 14px 18px;
margin-bottom: 10px;
border-radius: 10px;
}

.section {
position: relative;
}

.section::after {
content: "";
display: block;
width: 60px;
height: 4px;
background: #c1121f;
margin: 40px auto 0;
border-radius: 2px;
}

.problem-list {
max-width: 700px;
margin: 30px auto 0;
list-style: none;
padding: 0;
}

.problem-list li {
background: #f5f5f5;
color: #111; /* <-- THIS fixes the invisible text */
padding: 16px 20px;
margin-bottom: 12px;
border-radius: 12px;
font-size: 1.05rem;
font-weight: 500;
}

.price-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: #c1121f;
color: #fff;
padding: 14px 22px;
border-radius: 40px;
font-weight: 700;
margin-top: 25px;
box-shadow: 0 10px 25px rgba(193,18,31,0.4);
animation: pop 2.5s infinite;
}

.price-badge .price {
font-size: 1.6rem;
}

.price-badge .text {
font-size: 1rem;
opacity: 0.95;
}

@keyframes pop {
0% { transform: scale(1); }
50% { transform: scale(1.06); }
100% { transform: scale(1); }
}

​You​
.logo-strip {
text-align: center;
background: #f8f8f8;
}

.logo-title {
text-align: center;
font-size: 1.35rem; /* slightly bigger text */
font-weight: 700;
margin-bottom: 28px;
color: #c1121f; /* Buckeye red */
letter-spacing: 0.5px;
}

.logos {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
flex-wrap: wrap;
}

.logos img {
max-height: 115px; /* 👈 perfect middle ground */
width: auto;
opacity: 0.9;
}

.logos img:hover {
transform: scale(1.08);
opacity: 1;
}

.logos img:hover {
transform: scale(1.1);
opacity: 1;
}


/* ===============================
MOBILE OPTIMIZATION (ALL-IN-ONE)
=============================== */

@media (max-width: 768px) {

/* General spacing */
.section {
padding: 45px 16px;
}

h1 {
font-size: 2rem;
line-height: 1.2;
}

h2 {
font-size: 1.6rem;
line-height: 1.25;
}

p {
font-size: 1.05rem;
line-height: 1.5;
}

/* Hero section */
.hero {
padding: 60px 16px;
}

.hero-badges {
gap: 10px;
margin-bottom: 20px;
}

.hero-badges span {
font-size: 0.9rem;
padding: 8px 14px;
}

/* Buttons stack cleanly */
.call-btn,
.book-btn {
display: block;
width: 100%;
margin: 10px 0;
text-align: center;
}

.price-badge {
margin: 18px auto;
}

/* Service cards */
.service-grid {
gap: 14px;
}

.service-card {
padding: 18px;
font-size: 1rem;
}

/* Logo strip */
.logo-strip {
padding: 35px 16px;
}

.logos {
gap: 20px;
}

.logos img {
max-height: 50px;
}

/* Final CTA */
.cta {
padding: 50px 16px;
}

.cta h2 {
font-size: 1.8rem;
}
}

/* ===============================
MOBILE OPTIMIZATION (ALL-IN-ONE)
=============================== */

@media (max-width: 768px) {

/* General spacing */
.section {
padding: 45px 16px;
}

h1 {
font-size: 2rem;
line-height: 1.2;
}

h2 {
font-size: 1.6rem;
line-height: 1.25;
}

p {
font-size: 1.05rem;
line-height: 1.5;
}

/* Hero section */
.hero {
padding: 60px 16px;
}

.hero-badges {
gap: 10px;
margin-bottom: 20px;
}

.hero-badges span {
font-size: 0.9rem;
padding: 8px 14px;
}

/* Buttons stack cleanly */
.call-btn,
.book-btn {
display: block;
width: 100%;
margin: 10px 0;
text-align: center;
}

.price-badge {
margin: 18px auto;
}

/* Service cards */
.service-grid {
gap: 14px;
}

.service-card {
padding: 18px;
font-size: 1rem;
}

/* Logo strip */
.logo-strip {
padding: 35px 16px;
}

.logos {
gap: 20px;
}

.logos img {
max-height: 50px;
}

/* Final CTA */
.cta {
padding: 50px 16px;
}

.cta h2 {
font-size: 1.8rem;
}
}

/* ===============================
HARD MOBILE WIDTH LOCK
=============================== */

html, body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
position: relative;
}

/* Prevent any positioned element from escaping the viewport */
* {
box-sizing: border-box;
}

/* Clamp common offenders */
.alert-bar,
.price-badge,
.sticky-call,
.hero,
.section,
.cta {
max-width: 100%;
overflow-x: hidden;
}

/* Extra safety for text-heavy elements */
.alert-bar,
.price-badge,
.hero-badges span {
white-space: normal;
word-break: break-word;
overflow-wrap: anywhere;
}

/* ===============================
CENTER LOGO ON MOBILE
=============================== */

@media (max-width: 768px) {
.top-bar {
display: flex;
justify-content: center;
align-items: center;
padding: 14px 10px;
text-align: center;
}

.logo-full {
max-width: 85%;
height: auto;
margin: 0 auto;
display: block;
}
}

/* ===============================
MOBILE HEADER & CTA POLISH
=============================== */

@media (max-width: 768px) {

/* Subtle divider under logo */
.top-bar {
border-bottom: 1px solid #eee;
}

/* Bring hero content higher on screen */
.hero {
padding-top: 40px;
}

/* Gentle attention pulse on Call button */
.call-btn {
animation: pulse 2.5s infinite;
}
}

.text-btn {
background: #111;
color: #fff;
padding: 16px 36px;
font-size: 1.15rem;
text-decoration: none;
border-radius: 50px;
display: inline-block;
margin-top: 10px;
}

/* ===============================
STICKY TEXT BUTTON (MOBILE)
=============================== */

.sticky-text {
position: fixed;
bottom: 80px; /* sits above sticky call button */
right: 14px;
background: #111;
color: #fff;
padding: 14px 22px;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
z-index: 999;
box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

/* Mobile only */
@media (min-width: 769px) {
.sticky-text {
display: none;
}
}

.email-cta {
margin-top: 18px;
font-size: 0.95rem;
opacity: 0.9;
}

.email-cta a {
color: #c1121f;
font-weight: 600;
text-decoration: none;
}

.email-cta a:hover {
text-decoration: underline;
}

​
/* ===============================
FREE ESTIMATE BUBBLE POP
=============================== */

.bubble-wrap {
padding: 40px 20px;
}

.bubble-pop {
position: relative;
background: #ffffff;
border-radius: 22px;
padding: 28px 26px 26px;
box-shadow: 0 18px 45px rgba(0,0,0,0.12);
overflow: hidden;
border: 2px solid rgba(193,18,31,0.18);
animation: bubbleGlow 2.6s infinite alternate;
}

.bubble-pop::before {
content: "";
position: absolute;
width: 240px;
height: 240px;
background: rgba(193,18,31,0.10);
border-radius: 50%;
top: -120px;
left: -120px;
}

.bubble-pop::after {
content: "";
position: absolute;
width: 220px;
height: 220px;
background: rgba(0,0,0,0.06);
border-radius: 50%;
bottom: -120px;
right: -120px;
}

.bubble-badge {
position: absolute;
top: 18px;
right: 18px;
background: #c1121f;
color: #fff;
font-weight: 800;
letter-spacing: 1px;
padding: 10px 16px;
border-radius: 999px;
box-shadow: 0 12px 25px rgba(193,18,31,0.35);
}

.bubble-text {
position: relative;
z-index: 2;
}

.bubble-text h3 {
margin: 0 0 8px;
font-size: 1.6rem;
color: #111;
}

.bubble-text p {
margin: 0 0 18px;
color: #333;
font-size: 1.05rem;
line-height: 1.6;
max-width: 800px;
}

.bubble-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
}

@keyframes bubbleGlow {
from { transform: translateY(0); }
to { transform: translateY(-3px); }
}

/* Mobile */
@media (max-width: 768px) {
.bubble-wrap {
padding: 28px 16px;
}

.bubble-text h3 {
font-size: 1.35rem;
}

.bubble-actions a {
width: 100%;
}

.bubble-badge {
top: 14px;
right: 14px;
}
}

​
/* ===============================
BRANDS WE SERVICE
=============================== */

.brands-section {
background: #f8f8f8;
text-align: center;
}

.brands-sub {
max-width: 700px;
margin: 0 auto 30px;
font-size: 1.05rem;
color: #555;
}

.brands-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 14px;
}

.brands-grid span {
background: #fff;
padding: 12px 10px;
border-radius: 10px;
font-weight: 600;
font-size: 0.95rem;
box-shadow: 0 8px 20px rgba(0,0,0,0.06);
color: #222;
}

/* Mobile polish */
@media (max-width: 768px) {
.brands-grid {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
}


.hero {
position: relative;
background-image: url("hero-bg.jpg.jpg"); /* or hero-bg.jpg once cleaned */
background-size: cover;
background-position: 50% 20% center top;
padding: 300px 100px;
color: #fff;
}

.hero::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.55);
}

.hero .container {
position: relative;
z-index: 2;
}

.hero {
position: relative;
background-image: url("hero-bg.jpg.jpg");
background-size: cover;
background-position: 50% 18%; /* shows people + truck */
padding: 55px 20px; /* shorter = banner feel */
max-height: 420px;
color: #fff;
}

/* ===============================
MOBILE HERO FIX (SMALLER + BETTER CROP)
=============================== */
@media (max-width: 768px) {
.hero {
padding: 28px 14px; /* 👈 MUCH smaller height */
background-position: 50% 35%; /* 👈 shows more of the scene, less zoom */
background-size: cover;
max-height: 260px; /* 👈 caps hero height */
overflow: hidden;
}

.hero h1 {
font-size: 1.4rem;
line-height: 1.25;
}

.hero-sub {
font-size: 0.9rem;
}
}

/* ===============================
EMAIL CTA VISIBILITY FIX
=============================== */

.email-cta {
margin-top: 16px;
font-size: 0.95rem;
color: #f1f1f1; /* light text so it shows on image */
background: rgba(0, 0, 0, 0.45); /* subtle contrast box */
display: inline-block;
padding: 8px 14px;
border-radius: 8px;
}

h2 {
font-size: 2rem;
font-weight: 800;
margin-bottom: 20px;
}

@media (max-width: 768px) {
h2 {
font-size: 1.6rem;
}
}

.email-cta a {
color: #c1121f; /* brand red */
font-weight: 700;
text-decoration: none;
}

.email-cta a:hover {
text-decoration: underline;
}

@media (max-width: 768px) {
.email-cta {
font-size: 0.9rem;
}
}

@media (max-width: 768px) {
.logo-full {
max-width: 200%;
width: 130%;
padding: 12 12px; /* small breathing room */
box-sizing: border-box;
}
}

.sticky-contact-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: flex;
gap: 10px;
padding: 10px 12px;
background: rgba(0,0,0,0.92);
backdrop-filter: blur(6px);
z-index: 2000;
border-top: 2px solid rgba(193,18,31,0.35);
}

.sticky-contact-bar .scb-btn {
flex: 1;
text-align: center;
text-decoration: none;
font-weight: 800;
padding: 14px 10px;
border-radius: 14px;
font-size: 1rem;
color: #fff;
box-shadow: 0 10px 22px rgba(0,0,0,0.25);
}

.sticky-contact-bar .scb-call { background: #c1121f; }
.sticky-contact-bar .scb-text { background: #111; border: 1px solid rgba(255,255,255,0.12); }
.sticky-contact-bar .scb-email { background: #ffffff; color: #111; }

/* Mobile only */
@media (min-width: 769px) {
.sticky-contact-bar { display: none; }
}

/* Prevent the bar from covering your page content */
@media (max-width: 768px) {
body { padding-bottom: 78px; }
}

.sticky-text,
.sticky-call {
display: none !important;
}

/* ===============================
CLICKABLE PROBLEM CARDS + MODAL
=============================== */

.problem-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
margin-top: 22px;
}

.problem-hint {
margin-top: 10px;
margin-bottom: 20px;
font-size: 1rem;
font-weight: 800;
color: #c1121f; /* brand red */
background: rgba(193, 18, 31, 0.08); /* soft red glow */
display: inline-block;
padding: 8px 14px;
border-radius: 10px;
box-shadow: 0 0 0 2px rgba(193, 18, 31, 0.15);
}

.problem-card {
width: 100%;
text-align: left;
background: #fff;
color: #111;
padding: 18px 18px;
border-radius: 14px;
border: 2px solid rgba(0, 255, 106, 0.55); /* lime outline */
box-shadow: 0 0 0 rgba(0,255,106,0);
font-size: 1.02rem;
font-weight: 650;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.problem-card:hover {
transform: translateY(-4px);
border-color: rgba(0, 255, 106, 0.85);
box-shadow: 0 0 0 4px rgba(0,255,106,0.18), 0 18px 38px rgba(0,0,0,0.12);
}

.problem-card:active {
transform: translateY(-2px);
}

.problem-card:focus {
outline: none;
box-shadow: 0 0 0 4px rgba(0,255,106,0.25), 0 18px 38px rgba(0,0,0,0.12);
}

/* Modal */
.modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.65);
z-index: 5000;
padding: 20px;
}

.modal.open {
display: flex;
align-items: center;
justify-content: center;
}

.modal-content {
width: 100%;
max-width: 520px;
background: #fff;
border-radius: 18px;
padding: 22px;
position: relative;
box-shadow: 0 30px 70px rgba(0,0,0,0.35);
}

.modal-close {
position: absolute;
top: 12px;
right: 12px;
border: none;
background: #111;
color: #fff;
width: 36px;
height: 36px;
border-radius: 10px;
cursor: pointer;
}

.modal-sub {
margin-top: 6px;
margin-bottom: 18px;
color: #444;
}

#serviceForm label {
display: block;
font-weight: 700;
margin: 12px 0 6px;
color: #111;
}

#serviceForm input,
#serviceForm textarea {
width: 100%;
padding: 12px 12px;
border-radius: 10px;
border: 1px solid #ddd;
font-size: 1rem;
box-sizing: border-box;
}

.submit-btn {
width: 100%;
margin-top: 16px;
padding: 14px 14px;
border: none;
border-radius: 12px;
background: #c1121f;
color: #fff;
font-weight: 800;
font-size: 1.05rem;
cursor: pointer;
}

<section class="section" id="request-service">
<div class="container">
<h2>Request Service</h2>
<p class="problem-hint">Pick a day/time window and we’ll contact you to confirm.</p>

<form name="service-request" method="POST" data-netlify="true" netlify-honeypot="bot-field" class="contact-form">
<input type="hidden" name="form-name" value="service-request" />

<p class="hidden">
<label>Don’t fill this out: <input name="bot-field" /></label>
</p>

<div class="form-grid">
<div>
<label>Name</label>
<input name="name" type="text" placeholder="Full name" required />
</div>

<div>
<label>Phone</label>
<input name="phone" type="tel" placeholder="937-___-____" required />
</div>

<div>
<label>City / Area</label>
<input name="city" type="text" placeholder="Dayton / Kettering / etc." required />
</div>

<div>
<label>Preferred day</label>
<input name="preferred_day" type="date" required />
</div>
</div>

<label>Preferred time window</label>
<select name="preferred_time" required>
<option value="" disabled selected>Select a time window</option>
<option>Morning (8am–12pm)</option>
<option>Afternoon (12pm–4pm)</option>
<option>Evening (4pm–7pm)</option>
<option>Anytime</option>
</select>

<label>What’s going on?</label>
<textarea name="issue" rows="3" placeholder="Door stuck, loud bang, opener not working, etc." required></textarea>

<button type="submit" class="submit-btn">✅ Submit Request</button>
</form>
</div>
</section>

/* ===============================
MOBILE-FRIENDLY REQUEST FORM FIX
=============================== */

#request-service .container,
.contact-form {
max-width: 100%;
width: 100%;
box-sizing: border-box;
}

.contact-form {
margin: 18px auto 0;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
width: 100%;
max-width: 100%;
box-sizing: border-box;
font-size: 16px; /* prevents iPhone zoom when tapping */
}

/* Stack everything on mobile and remove “side-by-side” feeling */
@media (max-width: 768px) {
.contact-form {
padding: 16px;
border-radius: 14px;
}

.form-grid {
grid-template-columns: 1fr !important;
gap: 12px;
}

.contact-form label {
margin-top: 12px;
}

.submit-btn {
width: 100%;
padding: 16px;
border-radius: 14px;
font-size: 1.05rem;
}
}

/* ===============================
THANK YOU MESSAGE
=============================== */

.thank-you-message {
display: none;
max-width: 760px;
margin: 28px auto 0;
padding: 28px 22px;
background: #f8fff9;
border-radius: 16px;
border: 2px solid rgba(0, 200, 90, 0.35);
text-align: center;
box-shadow: 0 18px 45px rgba(0,0,0,0.12);
}

.thank-you-message h3 {
font-size: 1.6rem;
margin-bottom: 10px;
color: #0a7a3c;
}

.thank-you-sub {
margin-top: 10px;
font-size: 0.95rem;
opacity: 0.9;
}

.thank-you-actions {
margin-top: 18px;
display: flex;
gap: 12px;
justify-content: center;
}

@media (max-width: 768px) {
.thank-you-actions {
flex-direction: column;
}
}

/* Show thank-you after submit */
:target.thank-you-message {
display: block;
}

=========================== */

.thank-you-message {
background: #ffffff !important;
color: #111 !important;
}

.thank-you-message h3,
.thank-you-message p,
.thank-you-message strong {
color: #111 !important;
}

.thank-you-message h3 {
color: #0a7a3c !important; /* green headline */
}

/* ===============================
STOP HERO BACKGROUND “SCROLL/PARALLAX” ON DESKTOP
=============================== */
@media (min-width: 769px) {
.hero {
background-attachment: scroll !important;
background-position: 50% 18% !important;
}
}

@media (min-width: 769px) {
.hero {
overflow: hidden !important;
}
.hero .container {
overflow: visible !important;
}
}

/* ===============================
DESKTOP HERO POSITION OVERRIDE
=============================== */
@media (min-width: 769px) {
.hero {
background-position: 50% 60% !important;
}
}

​​
/* ===============================
POPUP SCHEDULE FORM (MODAL)
=============================== */

body.modal-open {
overflow: hidden;
}

.modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.68);
z-index: 6000;
padding: 18px;
}

.modal.open {
display: flex;
align-items: center;
justify-content: center;
}

.modal-content {
width: 100%;
max-width: 560px;
background: #fff;
border-radius: 18px;
padding: 22px;
position: relative;
box-shadow: 0 30px 80px rgba(0,0,0,0.45);
max-height: 90vh;
overflow: auto;
}

.modal-close {
position: absolute;
top: 12px;
right: 12px;
border: none;
background: #111;
color: #fff;
width: 38px;
height: 38px;
border-radius: 10px;
cursor: pointer;
}

.modal-sub {
margin: 8px 0 16px;
color: #444;
}

/* Hide thank-you until submit */
.thank-you-inline {
display: none;
margin-top: 16px;
padding: 14px;
border-radius: 14px;
background: #ffffff;
border: 2px solid rgba(0, 200, 90, 0.35);
}

.thank-you-inline h4 {
margin: 0 0 6px;
color: #0a7a3c;
}

/* ===============================
FORCE POPUP FORM HIDDEN
=============================== */
.modal {
display: none !important;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.7);
z-index: 9999;
align-items: center;
justify-content: center;
}

.modal.open {
display: flex !important;
}

​
/* ===============================
HARD HIDE POPUP UNTIL CLICKED
=============================== */

/* Modal must be hidden by default */
#scheduleModal {
display: none !important;
}

/* Only show when JS adds .open */
#scheduleModal.open {
display: flex !important;
}

/* Make sure the overlay behaves like a popup */
#scheduleModal {
position: fixed !important;
inset: 0 !important;
background: rgba(0,0,0,0.68) !important;
z-index: 9999 !important;
align-items: center !important;
justify-content: center !important;
padding: 18px !important;
}

/* Modal panel */
#scheduleModal .modal-content {
width: 100% !important;
max-width: 560px !important;
background: #fff !important;
border-radius: 18px !important;
padding: 22px !important;
position: relative !important;
box-shadow: 0 30px 80px rgba(0,0,0,0.45) !important;
max-height: 90vh !important;
overflow: auto !important;
}

/* Thank-you should NEVER show until submit */
#scheduleThanks {
display: none !important;
}

/* ===============================
GLOBAL FORM OVERRIDE (HARD HIDE)
=============================== */

/* Hide ANY contact / request form on page */
form[name="service-request"],
.thank-you-message,
.thank-you-inline {
display: none !important;
}

/* Modal container hidden by default */
.modal {
display: none !important;
}

/* Only show modal when JS adds .open */
.modal.open {
display: flex !important;
}

/* Modal overlay safety */
.modal {
position: fixed !important;
inset: 0 !important;
background: rgba(0,0,0,0.7) !important;
z-index: 9999 !important;
align-items: center !important;
justify-content: center !important;
}

/* Show form ONLY inside modal */
.modal.open form[name="service-request"] {
display: block !important;
}

/* Show form ONLY inside modal */
.modal.open form[name="service-request"] {
display: block !important;
}

/* ===============================
FINAL MODAL OVERRIDE (GUARANTEED)
=============================== */

/* Modal hidden by default */
.modal {
display: none !important;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.7);
z-index: 9999;
align-items: center;
justify-content: center;
padding: 18px;
}

/* Modal visible ONLY when opened */
.modal.open {
display: flex !important;
}

/* ===============================
FINAL MODAL VISIBILITY FIX
=============================== */

/* Hide modal + form by default */
.modal,
.contact-form,
.thank-you-inline,
.thank-you-message {
display: none !important;
}

/* Show modal when opened */
.modal.open {
display: flex !important;
position: fixed !important;
inset: 0 !important;
background: rgba(0,0,0,0.7) !important;
z-index: 9999 !important;
align-items: center !important;
justify-content: center !important;
padding: 18px !important;
}

/* Show the form only inside the open modal */
.modal.open .contact-form {
display: block !important;
}

/* Keep thank-you hidden until JS turns it on */
.modal.open .thank-you-inline {
display: none !important;
}

@media (max-width: 768px) {
.step-card span {
width: 40px;
height: 40px;
font-size: 1.05rem;
}
}

.hero-trust {
margin-top: 12px;
font-size: 0.95rem;
color: #e6e6e6;
}

@media (max-width: 768px) {
.hero {
padding: 28px 16px;
}

.hero h1 {
font-size: 1.5rem;
}

.hero-sub,
.hero-trust {
font-size: 0.9rem;
}

.section {
padding: 40px 16px;
}
}

.form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}

.form-grid .full-width {
grid-column: span 2;
}

@media (max-width: 768px) {
.form-grid {
grid-template-columns: 1fr;
}
}

.field-hint{
font-weight: 600;
font-size: 0.85rem;
opacity: 0.85;
margin-left: 6px;
}

.date-wrap {
position: relative;
}

.date-wrap input[type="date"] {
width: 100%;
padding: 12px 12px;
border-radius: 12px;
border: 1px solid rgba(0,0,0,0.15);
background: #fff;
position: relative;
z-index: 2;
}

.date-placeholder {
position: absolute;
left: 14px;
top: 38px;
font-size: 0.9rem;
color: rgba(0,0,0,0.55);
pointer-events: none;
z-index: 1;
}

/* Hide fake placeholder once date is selected */
.date-wrap input[type="date"]:valid + .date-placeholder {
display: none;
}

@media (max-width: 768px) {
.date-wrap { position: relative; }

.date-wrap .date-input {
background: transparent;
position: relative;
z-index: 4;
}

.date-wrap .date-placeholder {
position: absolute;
left: 14px;
top: 38px;
font-size: 0.95rem;
color: rgba(0,0,0,0.55);
pointer-events: none;
z-index: 5;
}
}

/* ===============================
DESKTOP: HIDE LOGO
=============================== */
@media (min-width: 769px) {
.top-bar {
display: none;
}
}

/* ===============================
DESKTOP: MOVE HERO IMAGE UP
=============================== */
@media (min-width: 769px) {
.hero {
background-position: 50% 10% !important;
padding-top: 80px;
padding-bottom: 80px;
}
}

/* ===============================
DESKTOP: SHOW MORE OF HERO IMAGE
=============================== */
@media (min-width: 769px) {
.hero {
min-height: 100vh; /* makes hero taller */
padding-top: 120px; /* space above text */
padding-bottom: 120px; /* space below text */
}
}

/* ===============================
HERO TEXT INTRO ANIMATION
=============================== */
.hero-content {
animation: heroIn 700ms ease-out both;
}

@keyframes heroIn {
from {
opacity: 0;
transform: translateY(14px);
filter: blur(2px);
}
to {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}

/* Stagger pieces inside hero (optional but nice) */
.hero-content h1 {
animation: heroIn 650ms ease-out both;
animation-delay: 0ms;
}

.hero-content .hero-slogan {
animation: heroIn 700ms ease-out both;
animation-delay: 120ms;
}

.hero-content .hero-sub {
animation: heroIn 700ms ease-out both;
animation-delay: 220ms;
}

.hero-content .hero-badges {
animation: heroIn 700ms ease-out both;
animation-delay: 320ms;
}

.hero-content .call-btn,
.hero-content .text-btn,
.hero-content .book-btn {
animation: heroIn 700ms ease-out both;
animation-delay: 420ms;
}

/* Respect accessibility settings */
@media (prefers-reduced-motion: reduce) {
.hero-content,
.hero-content * {
animation: none !important;
transform: none !important;
filter: none !important;
}
}

/* ===============================
HERO TEXT INTRO ANIMATION (WORKING)
=============================== */
.hero h1,
.hero .hero-slogan,
.hero .hero-trust,
.hero .hero-sub,
.hero .hero-badges,
.hero .call-btn,
.hero .text-btn,
.hero .book-btn,
.hero .email-cta {
opacity: 0;
transform: translateY(14px);
animation: heroIn 1200ms ease-out forwards;
}

.hero h1 { animation-delay: 0ms; }
.hero .hero-slogan { animation-delay: 120ms; }
.hero .hero-sub { animation-delay: 220ms; }
.hero .hero-badges { animation-delay: 320ms; }
.hero .call-btn { animation-delay: 420ms; }
.hero .text-btn { animation-delay: 480ms; }
.hero .book-btn { animation-delay: 540ms; }
.hero .email-cta { animation-delay: 620ms; }

@keyframes heroIn {
to {
opacity: 1;
transform: translateY(0);
}
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
.hero h1,
.hero .hero-slogan,
.hero .hero-sub,
.hero .hero-badges,
.hero .call-btn,
.hero .text-btn,
.hero .book-btn,
.hero .email-cta {
opacity: 1;
transform: none;
animation: none;
}
}


/* Supporting trust line */
.hero-trust {
margin-top: 18px;
font-size: 1.15rem;
font-weight: 600;
color: #ffffff;
text-align: center;
text-shadow: 0 2px 6px rgba(0,0,0,0.7);
}

/* ===============================
MOBILE TUNING
=============================== */
@media (max-width: 768px) {
.hero-slogan {
padding: 14px 18px;
}

.slogan-problem {
font-size: 1.1rem;
letter-spacing: 1.4px;
}

.slogan-action {
font-size: 1.55rem;
letter-spacing: 2px;
}

.hero-trust {
font-size: 0.95rem;
padding: 0 12px;
}
}

/* ===============================
MOBILE: DO NOT CLIP HERO CONTENT
=============================== */
@media (max-width: 768px) {
.hero {
max-height: none !important;
height: auto !important;
overflow: visible !important;
padding-top: 28px !important;
padding-bottom: 28px !important;
}
}

@media (max-width: 768px) {
.hero-slogan {
display: block !important;
width: 100%;
box-sizing: border-box;
}
}

@media (max-width: 768px) {
.call-btn,
.text-btn,
.book-btn {
display: block !important;
width: 100%;
margin: 10px 0 !important;
text-align: center;
}

.hero-badges {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
}

/* ===============================
MOBILE: QUICKER FADE-IN (NO LONG DELAYS)
=============================== */
@media (max-width: 768px) {
.hero h1,
.hero .hero-slogan,
.hero .hero-trust,
.hero .hero-sub,
.hero .hero-badges,
.hero .call-btn,
.hero .text-btn,
.hero .book-btn,
.hero .email-cta,
.hero .price-badge {
animation-duration: 520ms !important;
animation-delay: 0ms !important;
}
}

/* ===============================
HERO SLOGAN — CLEAN & READABLE
=============================== */
.hero-slogan {
margin: 22px auto 0;
text-align: center;
padding: 16px 24px;
border-radius: 12px;
background: rgba(0,0,0,0.85);
max-width: 620px;
}

/* Top line */
.slogan-problem {
display: block;
font-size: 1.6rem;
font-weight: 800;
color: #ffffff;
letter-spacing: 0.5px;
}

/* Bottom line */
.slogan-action {
display: block;
margin-top: 8px;
font-size: 1.9rem;
font-weight: 900;
color: #c1121f;
letter-spacing: 1px;
text-transform: uppercase;
}

/* MOBILE */
@media (max-width: 768px) {
.hero-slogan {
padding: 14px 16px;
}

.slogan-problem {
font-size: 1.2rem;
}

.slogan-action {
font-size: 1.45rem;
}
}

.hero-slogan {
font-size: 2.1rem;
font-weight: 800;
margin: 18px 0 10px;
line-height: 1.2;
color: #ffffff;
text-shadow: 0 3px 10px rgba(0,0,0,0.55);
}

.hero-sub {
font-size: 1.05rem;
color: #f1f1f1;
max-width: 720px;
margin: 0 auto 22px;
text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}

/* MOBILE */
@media (max-width: 768px) {
.hero-slogan {
font-size: 1.45rem;
}

.hero-sub {
font-size: 0.95rem;
}
}

​
/* ===============================
HERO SLOGAN FINAL OVERRIDE
=============================== */

.hero-slogan {
max-width: 720px;
margin: 16px auto 6px;
font-size: 2.05rem;
font-weight: 800;
line-height: 1.2;
text-align: center;
color: #ffffff;
text-shadow: 0 3px 12px rgba(0,0,0,0.6);
}

.slogan-accent {
display: block;
color: #c1121f; /* Buckeye red */
margin-top: 4px;
}

.hero-support {
max-width: 640px;
margin: 0 auto 22px;
font-size: 0.95rem;
font-weight: 500;
text-align: center;
color: #f1f1f1;
line-height: 1.45;
opacity: 0.95;
}

@media (max-width: 768px) {
.hero-slogan {
font-size: 1.45rem;
max-width: 92%;
}

.hero-support {
font-size: 0.9rem;
max-width: 92%;
}
}

@media (max-width: 768px) {
.hero-slogan {
font-size: 1.45rem;
max-width: 92%;
}

.hero-support {
font-size: 0.9rem;
max-width: 92%;
}
}

​
/* ===============================
SLOGAN ALIGN + REMOVE BOX (FINAL OVERRIDE)
=============================== */

/* Make hero content centered consistently */
.hero .container{
text-align: center !important;
}

/* Remove any "box" look from older styles */
.hero-slogan{
background: none !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;

display: block !important;
margin: 14px auto 6px !important;
max-width: 760px !important;

font-size: 2.05rem !important;
font-weight: 800 !important;
line-height: 1.18 !important;
color: #ffffff !important;
text-shadow: 0 3px 12px rgba(0,0,0,0.6) !important;
}

.slogan-accent{
display: block !important;
margin-top: 4px !important;
color: #c1121f !important;
}

/* Support line "locks" under slogan */
.hero-support{
display: block !important;
margin: 0 auto 18px !important;
max-width: 720px !important;

font-size: 0.98rem !important;
font-weight: 600 !important;
line-height: 1.45 !important;

color: #f1f1f1 !important;
text-shadow: 0 2px 6px rgba(0,0,0,0.45) !important;
opacity: 0.98 !important;
}

/* Mobile sizing */
@media (max-width: 768px){
.hero-slogan{
font-size: 1.45rem !important;
max-width: 92% !important;
}
.hero-support{
font-size: 0.92rem !important;
max-width: 92% !important;
}
}

.hero .price-badge,
.hero .email-cta{
margin-left: auto;
margin-right: auto;
text-align: center;
}

/* ===============================
FULL SLOGAN COLOR POP
=============================== */

.hero-slogan {
max-width: 760px;
margin: 18px auto 6px;
text-align: center;
line-height: 1.15;
}

/* Line 1 */
.slogan-main {
display: block;
font-size: 2.1rem;
font-weight: 900;
color: #ffffff; /* clean white */
text-shadow: 0 3px 14px rgba(0,0,0,0.65);
}

/* Line 2 */
.slogan-accent {
display: block;
margin-top: 4px;
font-size: 2.15rem;
font-weight: 900;
color: #c1121f; /* Buckeye red */
text-shadow: 0 3px 14px rgba(0,0,0,0.65);
}

/* Support line */
.hero-support {
max-width: 680px;
margin: 4px auto 22px;
font-size: 1rem;
font-weight: 600;
text-align: center;
color: #d9d9d9; /* soft silver */
letter-spacing: 0.2px;
text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}

@media (max-width: 768px) {
.slogan-main,
.slogan-accent {
font-size: 1.45rem;
}

.hero-support {
font-size: 0.92rem;
max-width: 92%;
}
}

/* ===============================
SLOGAN COLOR POP (FINAL)
=============================== */
.hero-slogan{
text-align:center;
margin: 16px auto 6px;
max-width: 760px;
line-height: 1.15;
}

.hero-slogan .slogan-main{
display:block;
font-size: 2.1rem;
font-weight: 900;
color: #ffffff;
text-shadow: 0 3px 14px rgba(0,0,0,0.70);
}

.hero-slogan .slogan-accent{
display:block;
margin-top: 4px;
font-size: 2.15rem;
font-weight: 900;
color: #c1121f;
text-shadow:
0 0 10px rgba(193,18,31,0.55),
0 3px 14px rgba(0,0,0,0.70);
}

.hero-support{
margin: 6px auto 22px;
max-width: 680px;
font-size: 1rem;
font-weight: 600;
text-align:center;
color: #d9d9d9;
text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}

@media (max-width: 768px){
.hero-slogan .slogan-main,
.hero-slogan .slogan-accent{
font-size: 1.45rem;
}
.hero-support{
font-size: 0.92rem;
max-width: 92%;
}
}

.hero-slogan{
text-align:center;
max-width:760px;
margin:18px auto 6px;
}

.slogan-main{
display:block;
font-size:2.2rem;
font-weight:900;
letter-spacing:0.6px;
text-transform:uppercase;
color:#ffffff;
}

.slogan-accent{
display:block;
margin-top:4px;
font-size:2.2rem;
font-weight:900;
letter-spacing:0.6px;
text-transform:uppercase;
color:#c1121f;
}

.hero-support{
margin:6px auto 22px;
max-width:680px;
font-size:0.95rem;
font-weight:500;
color:#d9d9d9;
}

/* Hide badges on mobile (reduce clutter) */
@media (max-width: 768px) {
.hero-badges {
display: none;
}
}

/* Hide email CTA on mobile (lower intent action) */
@media (max-width: 768px) {
.email-cta {
display: none;
}
}

/* ===============================
FINAL MOBILE + DESKTOP POLISH
=============================== */

/* Slightly tighten hero spacing on desktop */
.hero {
padding-top: 70px;
padding-bottom: 60px;
}

/* Mobile-specific improvements */
@media (max-width: 768px) {

/* Make CALL the primary action */
.call-btn {
width: 100%;
max-width: 320px;
margin: 0 auto 10px;
font-size: 1.1rem;
}

/* Reduce section padding for cleaner scroll */
.section {
padding: 36px 16px;
}

/* Hide clutter on mobile */
.hero-badges {
display: none;
}

.email-cta {
display: none;
}
}

/* ===============================
MOBILE HERO – SHOW FULL IMAGE (NO CROP)
=============================== */
@media (max-width: 768px) {
.hero {
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center top !important;

min-height: 520px !important;
height: auto !important;
max-height: none !important;

overflow: visible !important;
}
}

/* Google Places autocomplete dropdown above modal */
.pac-container {
z-index: 999999 !important;
}

/* ===== Modal close button always clickable ===== */
.modal {
z-index: 999900 !important;
}

.modal-content{
position: relative !important;
z-index: 999910 !important;
}

/* the X button */
.modal-close{
position: absolute !important;
top: 12px !important;
right: 12px !important;
z-index: 999999 !important;
cursor: pointer !important;
pointer-events: auto !important;
}

/* Google dropdown above modal content BUT below the X */
.pac-container{
z-index: 999950 !important;
}

​
/* ===============================
MODAL RESET (fix close + text)
=============================== */

/* Overlay */
#scheduleModal {
display: none; /* hidden by default */
position: fixed;
inset: 0;
background: rgba(0,0,0,0.75);
z-index: 999900;
align-items: center;
justify-content: center;
padding: 18px;
}

/* When opened (JS will set display:flex) */
#scheduleModal[aria-hidden="false"] {
display: flex;
}

/* Modal box */
#scheduleModal .modal-content {
position: relative;
z-index: 999910;
width: min(560px, 100%);
max-height: 85vh;
overflow: auto;

background: #111; /* dark box */
color: #fff; /* readable text */
border: 1px solid rgba(255,255,255,0.12);
border-radius: 14px;
padding: 18px 18px 14px;
}

/* Headings and paragraphs inside modal */
#scheduleModal .modal-content h3,
#scheduleModal .modal-content p,
#scheduleModal .modal-content label {
color: #fff !important;
}

/* Close button (X) */
#scheduleModal .modal-close {
position: absolute;
top: 10px;
right: 10px;
z-index: 999999;
width: 38px;
height: 38px;
border: none;
border-radius: 10px;
background: rgba(255,255,255,0.12);
color: #fff;
font-size: 20px;
cursor: pointer;
pointer-events: auto;
}

/* Inputs readable on dark modal */
#scheduleModal input,
#scheduleModal select,
#scheduleModal textarea {
width: 100%;
background: #fff;
color: #111;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 10px;
padding: 12px;
font-size: 1rem;
}

/* Make Google address suggestions appear ABOVE modal content,
but BELOW the close button */
.pac-container { z-index: 999999 !important; }

​
/* ===============================
HARD MODAL VISIBILITY FIX
=============================== */

#scheduleModal {
background: rgba(0,0,0,0.78) !important;
}

#scheduleModal .modal-content {
background: #111 !important;
color: #fff !important;
border-radius: 14px !important;
padding: 18px !important;
border: 1px solid rgba(255,255,255,0.14) !important;
}

#scheduleModal h3,
#scheduleModal p,
#scheduleModal label {
color: #fff !important;
}

#scheduleModal input,
#scheduleModal select,
#scheduleModal textarea {
background: #fff !important;
color: #111 !important;
border: 1px solid rgba(0,0,0,0.2) !important;
}

#scheduleModal .modal-close {
position: absolute !important;
top: 10px !important;
right: 10px !important;
z-index: 999999 !important;
width: 40px !important;
height: 40px !important;
border: none !important;
border-radius: 10px !important;
background: rgba(255,255,255,0.14) !important;
color: #fff !important;
font-size: 22px !important;
line-height: 40px !important;
cursor: pointer !important;
}

/* Make sure Google dropdown doesn't cover the X */
.pac-container { z-index: 999950 !important; }

/* Make brand logos definitely clickable */
.logo-strip .logos a {
display: inline-block;
position: relative;
z-index: 5;
pointer-events: auto;
}

.logo-strip .logos img {
display: block;
cursor: pointer;
}

/* ===== Brand logos sizing & polish ===== */
.logos {
display: flex;
justify-content: center;
gap: 28px;
flex-wrap: wrap;
}

.brand-link {
text-align: center;
text-decoration: none;
}

.brand-link img {
max-width: 140px; /* desktop size */
height: auto;
transition: transform 0.2s ease;
}

.brand-link:hover img {
transform: scale(1.05);
}

.brand-caption {
display: block;
margin-top: 6px;
font-size: 0.85rem;
color: #c1121f; /* Buckeye red */
font-weight: 600;
}

/* ===== Mobile: make logos bigger ===== */
@media (max-width: 768px) {
.brand-link img {
max-width: 190px; /* 👈 BIGGER on mobile */
}

.brand-caption {
font-size: 0.9rem;
}
}

/* ===== Brand logo cards ===== */
.logos {
display: flex;
justify-content: center;
gap: 32px;
flex-wrap: wrap;
}

.brand-card {
display: flex;
align-items: center;
justify-content: center;
padding: 18px 26px;
border-radius: 14px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.12);
cursor: pointer;
transition: all 0.25s ease;
}

.brand-card img {
max-width: 150px;
height: auto;
transition: transform 0.25s ease;
}

/* Hover / focus effect */
.brand-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 26px rgba(0,0,0,0.35);
border-color: #c1121f; /* Buckeye red */
}

.brand-card:hover img {
transform: scale(1.05);
}

/* Mobile sizing */
@media (max-width: 768px) {
.brand-card img {
max-width: 200px; /* nice and tappable */
}
}

.page-title {
font-family: "Playfair Display", serif;
font-size: 2.4rem;
text-align: center;
margin-bottom: 14px;
}

.highlight {
color: #c1121f; /* Buckeye red accent */
font-weight: 700;
}

.door-grid {
display: grid;
gap: 22px;
margin-top: 30px;
}

.door-card {
background: #161616;
padding: 22px;
border-radius: 14px;
border-left: 4px solid #c1121f;
}

.door-card h3 {
margin-bottom: 8px;
font-size: 1.25rem;
}

.good-for {
margin-top: 10px;
color: #9be7c4;
font-weight: 600;
}

.pdf-grid {
display: grid;
gap: 14px;
margin-top: 24px;
}

.pdf-card {
background: #111;
border: 1px solid #333;
padding: 14px 18px;
border-radius: 10px;
color: #fff;
text-decoration: none;
font-weight: 600;
}

.pdf-card:hover {
border-color: #c1121f;
}

​
/* =====================
MAIN NAVIGATION (SITE-NAV)
===================== */

.site-nav{
background: #0f0f0f;
border-bottom: 1px solid #222;
}

.site-nav .container{
display:flex;
align-items:center;
justify-content:space-between;
padding: 14px 0; /* this controls the vertical alignment/room */
}

.site-nav .nav-links{
list-style:none;
display:flex;
align-items:center; /* TRUE vertical centering */
gap: 22px;
margin: 0;
padding: 0;
}

.site-nav .nav-links a{
color:#eaeaea;
text-decoration:none;
font-weight:600;
font-size:0.95rem;
line-height: 1; /* prevents “rides high” look */
display:inline-flex;
align-items:center;
}

.site-nav .nav-links a:hover{
color:#c1121f;
}

/* CTA button in the nav */
.site-nav .nav-cta{
background:#c1121f;
padding: 8px 14px;
border-radius: 8px;
color:#fff !important;
display:inline-flex;
align-items:center;
line-height: 1;
}

/* Hamburger hidden on desktop */
.site-nav .nav-toggle{
display:none;
background:transparent;
border:0;
padding:10px;
cursor:pointer;
}

.site-nav .nav-toggle span{
display:block;
width:28px;
height:3px;
margin:6px 0;
background:#fff;
border-radius:2px;
}

/* Mobile */
@media (max-width: 768px){
.site-nav .nav-toggle{ display:block; }

.site-nav .nav-links{
display:none;
margin-top:12px;
flex-direction:column;
align-items:flex-start;
gap: 12px;
}

.site-nav .nav-links.is-open{
display:flex;
}
}

.pdf-btn{
display:inline-block;
margin-top:12px;
padding:12px 14px;
border-radius:12px;
font-weight:800;
text-decoration:none;
background:#1c1c1c;
border:1px solid rgba(255,255,255,.16);
color:#fff;
}

.pdf-btn:hover{
border-color: rgba(193,18,31,.7);
transform: translateY(-2px);
}

.logos img {
cursor: default;
}

/* Hide the big top logo bar on mobile */
@media (max-width: 768px) {
.top-bar {
display: none;
}
}

/* Hero must be positioned for overlay items */
.hero {
position: relative;
}

/* Small logo overlay in hero */
.hero-logo {
position: absolute;
top: 14px;
left: 14px;
z-index: 5;
}

.hero-logo img {
height: 44px; /* mobile size */
width: auto;
display: block;
filter: drop-shadow(0 6px 18px rgba(0,0,0,0.55));
}

/* Mobile header */
.mobile-header {
display: none;
background: #000;
padding: 14px 16px;
}

.mobile-header img {
height: 38px;
width: auto;
}

/* Mobile only */
@media (max-width: 768px) {
.mobile-header {
display: block;
}

.top-bar {
display: none;
}
}

/* Mobile header (text only) */
.mobile-header {
display: none;
background: #000;
padding: 14px 0;
}

.mobile-header-inner {
display: flex;
align-items: center;
justify-content: flex-start;
}

.mobile-brand {
color: #fff;
font-weight: 800;
font-size: 1.1rem;
letter-spacing: 0.5px;
}

/* Mobile only */
@media (max-width: 768px) {
.mobile-header {
display: block;
}
}

/* Mobile: make hero taller so all text/buttons stay inside the background image */
@media (max-width: 768px) {
.hero {
min-height: 640px; /* 👈 makes the background image taller */
padding: 36px 16px 70px; /* top / sides / bottom */
background-size: cover;
background-position: 50% 75%; /* adjust up/down if needed */
}
}

/* ===============================
MOBILE HERO: BETTER FRAMING (handshake + truck logo)
=============================== */
@media (max-width: 768px) {
header.hero {
min-height: 560px !important; /* less tall = less crop */
height: auto !important;
max-height: none !important;
overflow: hidden !important;

background-size: cover !important;
background-position: 50% 100% !important; /* 👈 adjust this */
background-repeat: no-repeat !important;
}
}

@media (max-width: 768px) {
header.hero,
header.hero::before {
background-position: 50% 50% !important;
background-size: cover !important;
}
}

/* ===============================
MOBILE HERO POSITION FIX
Put at the VERY BOTTOM of style.css
=============================== */
@media (max-width: 768px) {
.hero {
background: url("hero-bg.jpg.jpg") 50% 60% / cover no-repeat !important;
min-height: 560px !important;
height: auto !important;
max-height: none !important;
overflow: hidden !important;
}
}

/* ===============================
MOBILE HERO IMAGE FIX
=============================== */
@media (max-width: 768px) {
.hero {
background-image: url("hero-bg.jpg.jpg") !important;
background-size: cover !important;

/* 👇 THIS is what actually moves the image */
background-position: 50% 45% !important;

/* 👇 Let it breathe vertically */
height: auto !important;
min-height: 560px !important;
padding: 80px 20px 60px !important;

overflow: visible !important;
}
}

/* ===============================
MOBILE HERO CROP FIX (FINAL)
=============================== */
@media (max-width: 768px) {
.hero {
/* overrides ALL background rules */
background: url("hero-bg.jpg.jpg") 50% 60% / cover no-repeat !important;

/* give room for your hero text/buttons */
min-height: 600px !important;
height: auto !important;
max-height: none !important;

/* prevent clipping weirdness */
overflow: hidden !important;
}
}

/* ===============================
MOBILE HERO FINAL (CONTROLLED CROP)
=============================== */
@media (max-width: 768px) {
.hero {
/* Use one complete background line so nothing “half overrides” */
background: url("hero-bg.jpg.jpg") 50% 0% / cover no-repeat !important;

/* Let the hero expand so your words/buttons fit inside the photo */
height: auto !important;
min-height: 640px !important;

/* Keep it clean */
overflow: hidden !important;
}
}

@media (max-width: 768px) {
.hero {
background-image: url("hero-bg.jpg.jpg") !important;

/* Force a different sizing mode so movement is obvious */
background-size: 100% auto !important;
background-repeat: no-repeat !important;

/* Kill any fixed height from desktop rules */
height: auto !important;
min-height: 700px !important;
max-height: none !important;

overflow: hidden !important;

/* Try TOP */
background-position: 50% 0% !important;
}
}

/* ===============================
MOBILE HERO: FORCE CROPPING (so position actually moves)
=============================== */
@media (max-width: 768px) {
.hero {
background-image: url("hero-bg.jpg.jpg") !important;
background-repeat: no-repeat !important;

/* 👇 KEY: zoom the image a bit so it HAS room to move */
background-size: 130% auto !important;

/* 👇 NOW position will visibly change */
background-position: 50% 20% !important;

/* give room for text/buttons */
min-height: 640px !important;
height: auto !important;
max-height: none !important;
overflow: hidden !important;
}
}

/* ===============================
MOBILE: SHOW THE FULL HERO IMAGE (NO CROP)
=============================== */
@media (max-width: 768px) {
.hero {
background-image: url("hero-bg.jpg.jpg") !important;
background-repeat: no-repeat !important;

/* 👇 this shows the whole image */
background-size: contain !important;
background-position: center top !important;

/* 👇 fills extra space with your site color */
background-color: #000 !important;

/* 👇 gives room for the full image + your text */
min-height: 720px !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
}

/* ===============================
MOBILE: FORCE FULL IMAGE (NO CROP)
Put at VERY BOTTOM
=============================== */
@media (max-width: 768px) {
.hero,
.hero::before {
background: #000 url("hero-bg.jpg.jpg") center top / contain no-repeat !important;
}

.hero {
min-height: 720px !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
}

/* If you have a dark overlay, keep it but don't let it carry the image */
.hero::before {
content: "" !important;
background-color: rgba(0,0,0,0.40) !important;
background-image: none !important;
}
}

​
/* ===============================
MOBILE: SHOW FULL HERO PHOTO (NO CROP) USING <img>
=============================== */
.hero-mobile-img { display: none; }

@media (max-width: 768px) {
/* Turn off the background image approach on mobile */
.hero {
background: #000 !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
padding: 0 !important;
}

/* Show the full image */
.hero-mobile-img {
display: block;
width: 100%;
height: auto; /* 👈 shows the whole photo */
max-height: 520px; /* adjust if you want */
object-fit: contain; /* 👈 NO crop */
background: #000;
}

/* Put the hero text/buttons below the image */
.hero .container {
padding: 18px 16px 28px !important;
text-align: center;
}
}

/* ===============================
MOBILE HERO: PRO BUSINESS LOOK
(Photo on top, clean panel below)
=============================== */

@media (max-width: 768px) {

/* Hero becomes a clean section on mobile */
.hero {
background: #000 !important;
padding: 0 !important;
}

/* Full photo stays on top */
.hero-mobile-img {
display: block;
width: 100%;
height: auto;
max-height: 520px;
object-fit: contain; /* shows full pic */
background: #000;
}

.hero .container {
background: #0b0b0b;
border-top: none;
border-radius: 18px 18px 0 0;
margin-top: 0; /* removes the stacked look */
padding: 18px 16px 28px !important;
text-align: center;
box-shadow: 0 -10px 28px rgba(0,0,0,0.45);
}

.hero h1 {
font-size: 1.55rem;
line-height: 1.2;
margin: 0 0 10px;
}

.hero-slogan {
margin: 10px auto 8px;
}

.hero-support {
font-size: 0.95rem;
opacity: 0.92;
margin-bottom: 12px;
}

/* Buttons: stacked + full width (best conversion) */
.hero-actions {
display: flex;
flex-direction: column;
gap: 12px;
align-items: stretch;
margin-top: 14px;
}

.hero-actions a {
width: 100%;
text-align: center;
}

/* Keep badges tidy */
.hero-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-top: 10px;
}
}

/* Show the hero <img> ONLY on mobile */
@media (max-width: 768px) {
.hero-mobile-img { display: block; }
}

/* Force-hide the hero <img> on desktop */
@media (min-width: 769px) {
.hero-mobile-img { display: none !important; }
}


.accordion-btn {
width: 100%;
background: #111;
color: #fff;
border: 1px solid #2a2a2a;
padding: 16px 18px;
font-size: 1.05rem;
font-weight: 600;
text-align: left;
cursor: pointer;
margin-top: 10px;
border-radius: 10px;
}

.accordion-btn::after {
content: "+";
float: right;
font-size: 1.3rem;
color: #c1121f;
}

.accordion-btn.active::after {
content: "–";
}

.accordion-panel {
max-height: 0;
overflow: hidden;
background: #0b0b0b;
border-radius: 0 0 10px 10px;
transition: max-height 0.35s ease;
padding: 0 18px;
}

.accordion-panel p {
margin: 12px 0;
color: #ddd;
}

.good-for {
color: #9ae6b4;
font-weight: 600;
}

​
/* ===============================
GARAGE DOOR PAGE – HERO IMAGE ON TOP
=============================== */

.hero.hero-garage {
background: #000;
padding: 0;
}

/* Hero image */
.hero.hero-garage .hero-img {
width: 100%;
height: auto;
max-height: 520px;
object-fit: cover;
display: block;
}

/* Content box BELOW image */
.hero.hero-garage .hero-box {
background: #0b0b0b;
margin-top: -40px;
padding: 26px 22px 32px;
border-radius: 22px 22px 0 0;
text-align: center;
position: relative;
z-index: 2;
}

/* Desktop polish */
@media (min-width: 769px) {
.hero.hero-garage .hero-img {
max-height: 420px;
}

.hero.hero-garage .hero-box {
margin-top: -60px;
max-width: 900px;
}
}

/* Mobile spacing */
@media (max-width: 768px) {
.hero.hero-garage .hero-box {
margin-top: -32px;
padding: 22px 16px 28px;
}
}


/* ===============================
GARAGE DOOR PAGE FIXES
Desktop: no content box (text over photo)
Mobile: stop box overlapping photo
=============================== */

/* ✅ DESKTOP: remove any content "box" */
@media (min-width: 769px) {
.hero.hero-garage .container {
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 auto !important;
}
}

/* ✅ MOBILE: keep box under image but DON'T overlap */
@media (max-width: 768px) {
/* If you’re using the mobile <img> method */
.hero.hero-garage .hero-mobile-img {
display: block !important;
margin: 0 !important;
}

/* Remove the "pull up" effect that causes overlap */
.hero.hero-garage .container {
margin-top: 0 !important; /* 👈 this stops overlap */
border-radius: 0 !important; /* optional: cleaner */
box-shadow: none !important; /* optional: less “card” look */
padding-top: 18px !important;
}
}

​
/* ===============================
LUXURY + EMOTIONAL TRUST FONTS
(safe: typography only)
=============================== */

body{
font-family: "Montserrat", sans-serif;
font-weight: 500;
letter-spacing: 0.15px;
}

/* Strong headings */
h1, h2, h3{
font-family: "Oswald", sans-serif;
font-weight: 600;
letter-spacing: 0.8px;
}

/* Buttons + nav feel premium */
.call-btn,
.text-btn,
.book-btn,
.nav-links a{
font-family: "Oswald", sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
}

/* Hero slogan = luxury + emotion */
.hero-slogan{
font-family: "Playfair italic", serif;
font-style: italic;
font-weight: 700;
font-size: 2.2rem;
line-height: 1.25;
text-align: center;
color: #ffffff;
text-shadow: 0 4px 16px rgba(0,0,0,0.6);
max-width: 720px;
margin: 18px auto 10px;
}

/* If you use a separate accent line */
.hero-slogan .slogan-accent{
display: block;
margin-top: 6px;
color: #c1121f; /* your red */
font-style: normal;
font-weight: 800;
}

/* Calm trust/support line */
.hero-support{
font-family: "Montserrat", sans-serif;
font-size: 0.95rem;
font-weight: 500;
color: #e6e6e6;
max-width: 640px;
margin: 0 auto 22px;
line-height: 1.5;
text-align: center;
}

/* Mobile sizing */
@media (max-width: 768px){
.hero-slogan{
font-size: 1.55rem;
max-width: 92%;
}
.hero-support{
font-size: 0.92rem;
max-width: 92%;
}
}


/* ===============================
GARAGE DOOR PAGE TITLE – MOBILE
=============================== */
@media (max-width: 768px) {
.page-title {
font-family: "Oswald", sans-serif;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
}

/* ===============================
FINAL OVERRIDE: Garage Door page title font on MOBILE
(beats .hero h1 rules)
=============================== */
@media (max-width: 768px) {
body .hero h1.page-title {
font-family: "Oswald", sans-serif !important;
font-weight: 700 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
}
}

.nav-toggle{
display:none;
background:transparent;
border:0;
padding:10px;
cursor:pointer;
}

.nav-toggle span{
display:block;
width:28px;
height:3px;
margin:6px 0;
background:#fff;
border-radius:2px;
}

@media (max-width: 768px){
.nav-toggle{ display:block; }

.nav-links{
display:none;
margin-top:12px;
}

.nav-links.is-open{
display:block;
}

.nav-links li{
margin:10px 0;
}
}

/* ===== REAL NAV VERTICAL CENTER FIX (DESKTOP) ===== */
@media (min-width: 769px){

.site-nav{
display:flex;
align-items:center;
padding: 18px 0; /* this creates the “room” like Home */
}


/* IMPORTANT: kill default UL spacing that pushes links upward/downward */
.site-nav .nav-links{
display:flex;
align-items:center;
gap: 28px;
list-style:none;
margin: 0 !important;
padding: 0 !important;
}

.site-nav .nav-links li{
margin: 0 !important;
padding: 0 !important;
display:flex;
align-items:center;
}

.site-nav .nav-links a{
display:inline-flex;
align-items:center;
line-height: 1; /* prevents “float up” look */
padding: 8px 0; /* keeps click area clean */
}

/* Keep the red Schedule button centered too */
.site-nav .nav-cta{
display:inline-flex;
align-items:center;
line-height: 1;
padding: 12px 18px; /* don’t change if you already like it */
}
}

​
/* ===== Desktop nav: center links, keep Schedule on right ===== */
@media (min-width: 769px){

.site-nav{
display:block; /* don't force heights */
padding: 18px 0; /* same “room” feel */
}

.site-nav .container{
position: relative;
display: flex;
align-items: center;
}

/* Reset UL spacing + center the links */
.site-nav .nav-links{
list-style: none;
margin: 0 auto !important; /* centers the whole group */
padding: 0 !important;

display: flex;
align-items: center;
gap: 28px;
justify-content: center;
}

.site-nav .nav-links li{
margin: 0 !important;
padding: 0 !important;
}

.site-nav .nav-links a{
display: inline-flex;
align-items: center;
line-height: 1;
padding: 8px 0;
}

/* Pin Schedule Service to the right */
.site-nav .nav-cta{
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
}

/* ===== Force same nav bar height on ALL pages (desktop) ===== */
@media (min-width: 769px){
.site-nav .container{
padding-top: 14px !important;
padding-bottom: 14px !important;
}
}

/* ===== Fix “jump” by matching HERO content start (DESKTOP ONLY) ===== */
@media (min-width: 769px){

/* Home hero uses: <header class="hero"><div class="container">... */
.hero > .container{
padding-top: 80px;
padding-bottom: 80px;
}

/* Door/Opener hero uses: <div class="container hero-box">... */
.hero-garage .hero-box{
padding-top: 80px;
padding-bottom: 80px;
}
}

html, body { margin: 0 !important; padding: 0 !important; }

/* ===== Kill page-top offset (DESKTOP ONLY) ===== */
@media (min-width: 769px){
html, body{
margin: 0 !important;
padding: 0 !important;
}

body{
top: 0 !important;
}

/* Force the nav to start at the very top */
body > nav.site-nav{
margin-top: 0 !important;
padding-top: 0 !important;
top: 0 !important;
}

/* If ANY header above nav exists on desktop, remove its space */
body > header.mobile-header{
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
}

/* HERO IMAGE BEHAVIOR (restore) */
.hero-mobile-img{
width: 100%;
height: auto;
display: block;
}

/* Desktop uses background image (prevents huge stretched img) */
@media (min-width: 769px){
.hero-mobile-img{
display: none;
}

.hero,
.hero-garage{
background-image: url("images/hero-bg.jpg.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}

​
/* =====================
GARAGE DOOR PARTS PAGE
===================== */

.parts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 28px;
margin-top: 36px;
}

.part-card {
background: #111;
border-radius: 16px;
padding: 18px;
}

.part-card img {
width: 100%;
max-height: 180px;
object-fit: contain;
display: block;
margin-bottom: 14px;
}

.part-card h3 {
margin: 0 0 8px;
color: #fff;
font-size: 1.05rem;
}

.part-card p {
margin: 0 0 10px;
color: #cfcfcf;
font-size: 0.95rem;
}

.part-card .warning {
color: #f3a3a3;
font-weight: 600;
font-size: 0.9rem;
}

.part-card {
border: 1px solid #222; /* subtle separation */
box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.part-card:not(:last-child) {
margin-bottom: 10px;
}

/* Visual separation for each part */
.part-card {
border: 1px solid #222;
border-left: 4px solid #c1121f;
box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Divider between image and text */
.part-card img {
padding-bottom: 12px;
border-bottom: 1px solid #222;
}

/* Hover lift */
.part-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

​
/* =====================================================
FLOATING LOGO — SAME POSITION DESKTOP & MOBILE
===================================================== */

.hero.hero-garage {
position: relative;
overflow: hidden;
}

.hero-floating-logo {
position: absolute;
z-index: 4;

/* SAME POSITION ON ALL DEVICES */
top: 2%;
left: 5%;

width: min(540px, 40vw);
height: auto;

opacity: 0.60;
pointer-events: none;
}

/* MOBILE — SAME SPOT, JUST SMALLER */
@media (max-width: 768px) {
.hero-floating-logo {
top: 3%;

left: auto;
right: 0%;

width: 40vw;
opacity: 0.70;
}
}

/* HOME PAGE UPGRADE (safe + only affects elements below) */
.home-sections { padding: 40px 0; }
.home-sections h2 { margin: 0 0 10px; font-family: "Oswald", sans-serif; letter-spacing: 1px; }
.home-sections p.lead { margin: 0 0 18px; opacity: .95; }

.home-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 18px;
}

.home-card {
grid-column: span 4;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 16px;
padding: 18px;
}

.home-card h3 { margin: 0 0 8px; font-size: 18px; }
.home-card p { margin: 0; line-height: 1.5; opacity: .95; }

.home-badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 14px 0 0;
}
.home-badge {
padding: 8px 12px;
border-radius: 999px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.10);
font-size: 13px;
white-space: nowrap;
}

.home-split {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 22px;
align-items: start;
margin-top: 24px;
}

.home-list { margin: 12px 0 0; padding-left: 18px; }
.home-list li { margin: 8px 0; }

.home-cta-box {
background: rgba(193,18,31,0.10);
border: 1px solid rgba(193,18,31,0.35);
border-radius: 16px;
padding: 18px;
}

.home-cta-box h3 { margin: 0 0 10px; }
.home-cta-box .hero-actions { margin-top: 12px; }

.home-faq details {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 14px;
padding: 14px 16px;
margin: 12px 0;
}
.home-faq summary { cursor: pointer; font-weight: 700; }
.home-faq p { margin: 10px 0 0; opacity: .95; }

@media (max-width: 900px){
.home-card { grid-column: span 6; }
.home-split { grid-template-columns: 1fr; }
}
@media (max-width: 560px){
.home-card { grid-column: span 12; }
}

​
/* TRUST + REVIEWS SECTION */
.trust-section {
padding: 48px 0;
}

.trust-section h2 {
font-family: "Oswald", sans-serif;
letter-spacing: 1px;
margin-bottom: 10px;
}

.trust-section .lead {
margin-bottom: 28px;
opacity: .95;
}

.trust-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 18px;
}

.trust-card {
grid-column: span 6;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 16px;
padding: 18px;
}

.trust-card h3 {
margin-top: 0;
margin-bottom: 6px;
}

.reviews-box {
margin-top: 36px;
padding: 22px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 18px;
text-align: center;
}

.reviews-note {
margin-top: 10px;
font-size: 14px;
opacity: .85;
}

@media (max-width: 768px) {
.trust-card {
grid-column: span 12;
}
}

.hero-subline {
font-family: "Oswald", sans-serif;
font-size: 1.35rem;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: #f1c40f; /* warm gold that pops on dark background */
margin: 10px 0 12px;
}

/* Mobile adjustment */
@media (max-width: 768px) {
.hero-subline {
font-size: 1.05rem;
letter-spacing: 0.8px;
}
}

​You​
.location-note,
.footer-locations{
margin: 14px 0;
opacity: .92;
}

.city-hub-links{
margin-top: 34px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,0.10);
}

.city-links{
margin: 10px 0 0;
padding-left: 18px;
}

.city-links li{
margin: 6px 0;
}

.hero-subline + p {
max-width: 760px;
margin: 12px auto 0;
font-size: 1.05rem;
opacity: 0.95;
}

/* =========================
DAYTON HUB: SERVICE AREAS
========================= */
.city-hub { padding: 42px 0; }
.city-hub h2 { margin: 0 0 10px; }
.city-hub .lead { margin: 0 0 18px; max-width: 900px; opacity: .95; }

.hub-grid{
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 14px;
margin-top: 14px;
}

.hub-card{
grid-column: span 4;
display: block;
padding: 14px 14px;
border-radius: 14px;
text-decoration: none;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
color: #fff;
}

.hub-card:hover{
background: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.18);
}

@media (max-width: 900px){
.hub-card{ grid-column: span 6; }
}
@media (max-width: 560px){
.hub-card{ grid-column: span 12; }
}

.site-footer{
margin-top: 40px;
padding: 20px 12px;
border-top: 1px solid rgba(255,255,255,0.15);
text-align: center;
font-size: 14px;
}

.site-footer a{
text-decoration: underline;
}

.footer-sep{
margin: 0 10px;
opacity: 0.7;
}

/* =========================
TERMS + PRIVACY PAGES
(match dark/home style)
========================= */
.page-wrap{
max-width: 980px;
margin: 0 auto;
padding: 28px 16px;
}

.page-wrap h1{
margin: 10px 0 8px;
line-height: 1.15;
}

.page-wrap h2{
margin-top: 22px;
margin-bottom: 10px;
line-height: 1.2;
}

.page-wrap p,
.page-wrap li{
line-height: 1.65;
}

.page-wrap ul{
padding-left: 18px;
}

/* footer consistent */
.site-footer{
margin-top: 40px;
padding: 18px 12px;
border-top: 1px solid rgba(255,255,255,0.15);
text-align: center;
font-size: 14px;
}

.site-footer a{
text-decoration: underline;
}

.footer-sep{
margin: 0 10px;
opacity: 0.7;
}


/* =========================
SMS CONSENT CHECKBOX
(mobile fix)
========================= */

/* If your consent block uses .sms-consent */
.sms-consent{
width: 100%;
margin-top: 14px;
}

.sms-consent label{
display: flex;
gap: 12px;
align-items: flex-start;
width: 100%;
}

.sms-consent input[type="checkbox"]{
width: 20px;
height: 20px;
flex: 0 0 20px;
margin-top: 3px;
}

.sms-consent span{
display: block;
flex: 1;
min-width: 0; /* prevents weird narrow columns on mobile */
line-height: 1.45;
font-size: 14px;
}

/* Mobile: keep it readable and prevent skinny text columns */
@media (max-width: 768px){
.page-wrap{
padding: 18px 14px;
}

.page-wrap h1{
font-size: 26px;
}

.page-wrap h2{
font-size: 18px;
}

.sms-consent span{
font-size: 13px;
}
}

/* ===== FORCE SMS CONSENT TO FULL WIDTH (MOBILE FIX) ===== */
.sms-consent{
width: 100% !important;
max-width: 100% !important;
display: block !important;
}

.sms-consent label{
width: 100% !important;
max-width: 100% !important;
display: flex !important;
align-items: flex-start !important;
gap: 12px !important;
}

/* Prevent the text from becoming a skinny column */
.sms-consent span{
flex: 1 1 auto !important;
min-width: 0 !important;
white-space: normal !important;
word-break: normal !important;
}

/* If your form uses grid/flex rows, force this section to span all columns */
@media (max-width: 768px){
.sms-consent{
grid-column: 1 / -1 !important;
flex-basis: 100% !important;
}

/* Make the text smaller + tighter so it doesn't make the page super long */
.sms-consent span{
font-size: 12.5px !important;
line-height: 1.35 !important;
}

/* Keep checkbox a normal size */
.sms-consent input[type="checkbox"]{
width: 18px !important;
height: 18px !important;
margin-top: 3px !important;
}
}

/* ===== Legal pages: match homepage "card" vibe ===== */
.legal-page{
background: rgba(0,0,0,0.55);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 16px;
padding: 22px 18px;
box-shadow: 0 12px 30px rgba(0,0,0,0.45);
backdrop-filter: blur(8px);
}

@media (max-width: 768px){
.legal-page{
padding: 16px 14px;
border-radius: 14px;
}
}