/* Homepage styles. Shared reset, header, and footer are in common.css. */
.hero { min-height: 560px; padding: 70px max(32px, calc((100vw - 1136px) / 2)); display: flex; align-items: center; background: linear-gradient(90deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .28)), url("../Logos/coastalwraps Website Offical BG.jpg") center 56% / cover #222; }
.hero-content { max-width: 650px; }
.hero h1 { margin-bottom: 20px; color: #fff; font-size: clamp(34px, 5vw, 58px); line-height: 1.08; text-shadow: 1px 2px 5px #000; }
.hero p { margin-bottom: 30px; color: #fff; font-size: 21px; }
.hero-button { display: inline-block; padding: 15px 28px; background: #fff; color: #111; border-radius: 5px; font-weight: 700; }
.hero-button:hover { background: var(--blue); }
.services { padding: 45px 30px 70px; }
.brands { margin: 0 auto 55px; max-width: 1100px; }
.brand-logos { padding: 15px 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 24px; border-block: 3px solid var(--blue); }
.brand-logos img { width: 100%; height: 70px; object-fit: contain; }
.section-heading, .contact-heading { max-width: 800px; margin: 0 auto 40px; text-align: center; }
.section-heading h2, .contact-heading h2 { margin: 12px 0 15px; font-size: clamp(28px, 4vw, 40px); line-height: 1.2; }
.section-heading > p:last-child, .contact-heading > p:last-child { color: var(--muted); font-size: 18px; }
.service-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.service-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: #f1f3f5; border: 1px solid rgba(25, 182, 237, .45); border-radius: 8px; color: #222; box-shadow: 0 0 12px rgba(25, 182, 237, .14); transition: transform .2s, box-shadow .2s; }
.service-card:hover { transform: translateY(-3px); box-shadow: 0 0 22px rgba(25, 182, 237, .3); }
.service-gallery { height: 185px; background: #e7eaed; }
.service-gallery img { width: 100%; height: 100%; object-fit: contain; }
.service-card-content { padding: 20px; text-align: center; }
.service-card h3 { margin-bottom: 10px; font-size: 19px; line-height: 1.3; }
.card-line, .value-line { display: block; width: 35px; height: 3px; margin: 0 auto 14px; background: var(--blue); }
.service-card p { color: #555; font-size: 14px; line-height: 1.6; }
.about { padding: 60px 30px; background: #f5f5f5; }
.about-content { max-width: 1000px; margin: 0 auto 35px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: center; }
.about-image img { width: 300px; height: 300px; margin: auto; object-fit: contain; background: #000; border-radius: 12px; }
.about-text h3 { font-size: 28px; }
.story-line { display: block; height: 3px; margin: 15px 0 25px; background: var(--blue); }
.about-text p { color: #555; line-height: 1.7; }
.about-values { max-width: 1000px; margin: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.about-box { padding: 25px; background: #fff; border-radius: 12px; border-top: 4px solid var(--blue); box-shadow: 0 6px 18px rgba(0, 0, 0, .06); text-align: center; }
.about-box h3 { margin-bottom: 12px; font-size: 21px; }
.about-box p { color: #555; }
.contact { padding: 70px 30px; }
.contact-box { max-width: 700px; margin: auto; padding: 35px; border-radius: 12px; border-top: 4px solid var(--blue); box-shadow: 0 6px 22px rgba(0, 0, 0, .1); }
.form-group { margin-bottom: 17px; }
.form-group label { display: block; margin-bottom: 7px; color: #2459a6; font-size: 15px; font-weight: 700; }
.form-group input, .form-group select, .form-group textarea { width: 100%; min-width: 0; padding: 13px 14px; border: 1px solid #b8b8b8; border-radius: 7px; background: #fff; color: #333; font-size: 16px; }
.form-group textarea { min-height: 125px; resize: vertical; }
#quote-form button { width: 100%; padding: 14px 20px; border: 0; border-radius: 7px; background: var(--blue); color: #071a22; font-size: 16px; font-weight: 700; }
#quote-form button:hover { background: #7cd9f7; }
#quote-form button:disabled { opacity: .65; cursor: wait; }
.form-help, .form-status { margin-top: 14px; color: #555; font-size: 14px; }
.form-help a, .form-status a { color: var(--blue-dark); text-decoration: underline; }
.form-status { color: #222; }
.form-status:empty { display: none; }
@media (max-width: 1000px) {
    .service-grid { max-width: 800px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .brand-logos { gap: 12px; }
}
@media (max-width: 700px) {
    .hero { min-height: 460px; padding: 50px 24px; }
    .hero p { font-size: 18px; }
    .services, .about, .contact { padding: 50px 20px; }
    .brands { margin-bottom: 40px; }
    .brand-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
    .brand-logos img { height: 50px; }
    .section-heading > p:last-child, .contact-heading > p:last-child { font-size: 16px; }
    .service-grid { max-width: 440px; grid-template-columns: 1fr; }
    .service-gallery { height: 220px; }
    .about-content, .about-values { grid-template-columns: 1fr; gap: 24px; }
    .about-image img { width: 260px; height: 260px; }
    .about-text { text-align: center; }
    .contact-box { padding: 25px 20px; }
}