/* ══════════════════════════════════════
   Gulf Line Garage Door Expert
   Brand: Primary #0B3D6B | Secondary #F5A623
   Mobile-first responsive design
   ══════════════════════════════════════ */

/* === RESET & BASE === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#1A1A2E;line-height:1.7;font-size:16px;background:#fff;overflow-x:hidden}
a{color:#0B3D6B;text-decoration:none;transition:color .2s}
a:hover{color:#F5A623}
img{max-width:100%;height:auto;display:block}
h1{font-size:2rem;line-height:1.2;font-weight:800}
h2{font-size:1.6rem;line-height:1.3;font-weight:700;margin-bottom:16px}
h3{font-size:1.25rem;line-height:1.4;font-weight:600;margin-bottom:8px}
p{margin-bottom:16px}
ul{list-style:none}

/* === CONTAINER === */
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* === BUTTONS === */
.btn{display:inline-block;padding:14px 28px;border-radius:4px;font-weight:600;font-size:1rem;cursor:pointer;text-align:center;border:none;transition:background .2s,transform .1s,box-shadow .2s;line-height:1.4}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:#F5A623;color:#1A1A2E}
.btn-primary:hover{background:#e09510;color:#1A1A2E}
.btn-secondary{background:#0B3D6B;color:#fff}
.btn-secondary:hover{background:#094a82}
.btn-outline{border:2px solid #0B3D6B;color:#0B3D6B;background:transparent}
.btn-outline:hover{background:#0B3D6B;color:#fff}
.btn-lg{padding:16px 36px;font-size:1.1rem}
.btn-block{display:block;width:100%}

/* === HEADER === */
.site-header{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08);position:sticky;top:0;z-index:100}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;max-width:1200px;margin:0 auto}
.logo-link{display:flex;align-items:center;flex-shrink:0}
.logo-link svg{height:45px;width:auto}

/* === HAMBURGER BUTTON === */
.hamburger{display:none;position:fixed;top:12px;right:12px;z-index:10001;background:none;border:none;cursor:pointer;padding:10px;width:48px;height:48px}
.hamburger span{display:block;width:28px;height:3px;background:#0B3D6B;margin:5px auto;border-radius:2px;transition:.3s}

/* === MOBILE NAV OVERLAY === */
.nav-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#ffffff;z-index:10000;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
.nav-overlay.open{display:flex}
body.nav-open{overflow:hidden}
.nav-overlay-header{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-bottom:1px solid #eee;flex-shrink:0}
.nav-overlay-header .logo-link svg{height:45px;width:auto}
.nav-close{background:none;border:none;font-size:36px;color:#333;cursor:pointer;width:48px;height:48px;display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1}
.nav-overlay-menu{display:flex;flex-direction:column;padding:0 0 40px 0;flex:1;overflow-y:auto}
.nav-overlay-menu a{display:block;padding:16px 24px;font-size:18px;color:#333;text-decoration:none;border-bottom:1px solid #eee;width:100%;line-height:1.4}
.nav-overlay-menu a:hover{background:#f5f5f5}
.nav-overlay-menu .nav-call-btn{background:#F5A623;color:#1A1A2E;text-align:center;font-weight:700;border:none;margin:20px 24px;border-radius:8px;padding:16px;width:auto}

/* === DESKTOP NAV === */
.desktop-nav{display:none}
.desktop-nav-inner{display:flex;align-items:center;justify-content:center;gap:24px;max-width:1200px;margin:0 auto;padding:4px 20px}
.desktop-nav-inner a{color:#333;text-decoration:none;font-size:15px;font-weight:500;padding:8px 4px;transition:color .2s}
.desktop-nav-inner a:hover{color:#0B3D6B}
.desktop-nav-inner .desktop-phone{color:#0B3D6B;font-weight:700;font-size:17px;margin-left:auto}

/* === MOBILE / DESKTOP TOGGLE === */
@media(max-width:1023px){
    .hamburger{display:block}
    .desktop-nav{display:none}
}
@media(min-width:1024px){
    .hamburger{display:none}
    .nav-overlay{display:none!important}
    .desktop-nav{display:block;background:#fff;border-top:1px solid #f0f0f0}
}

/* === HERO === */
.hero{background:linear-gradient(135deg,#0B3D6B 0%,#164e85 50%,#0B3D6B 100%);color:#fff;padding:60px 0 50px;text-align:center}
.hero h1{color:#fff;margin-bottom:12px;font-size:1.8rem}
.hero-sub{font-size:1.1rem;opacity:.9;margin-bottom:16px;max-width:600px;margin-left:auto;margin-right:auto}
.hero-rating{margin-bottom:24px}
.hero-rating .stars{color:#F5A623;font-size:1.3rem}
.hero-rating span{color:rgba(255,255,255,.9);margin-left:8px}
.hero-cta{display:flex;flex-direction:column;gap:12px;align-items:center}
.hero-cta .btn{min-width:220px}

/* === TRUST BAR === */
.trust-bar{background:#F5A623;padding:16px 0}
.trust-items{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:center}
.trust-item{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:.85rem;color:#1A1A2E}
.trust-item svg{flex-shrink:0}

/* === SECTIONS === */
.section-white{background:#fff}
.section-alt{background:#f8f9fa}
section{padding:50px 0}
.section-sub{color:#555;font-size:1.05rem;margin-bottom:32px;text-align:center}
.text-center{text-align:center}

/* === SERVICES GRID === */
.services-section h2,.area-services h2,.related-services h2{text-align:center}
.services-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:24px}
.service-card{display:block;background:#fff;border-radius:8px;padding:24px;box-shadow:0 2px 10px rgba(0,0,0,.08);transition:transform .2s,box-shadow .2s;border:1px solid #eee}
.service-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.12)}
.service-card-icon{margin-bottom:12px}
.service-card h3{color:#0B3D6B;margin-bottom:8px}
.service-card p{color:#555;font-size:.95rem;margin-bottom:12px}
.card-link{color:#F5A623;font-weight:600;font-size:.9rem}
.small-grid{grid-template-columns:1fr}

/* === WHY CHOOSE US === */
.why-us-section h2{text-align:center}
.why-grid{display:grid;grid-template-columns:1fr;gap:24px;margin-top:24px}
.why-item{text-align:center;padding:24px}
.why-icon{margin-bottom:12px}
.why-item h3{color:#0B3D6B}
.why-item p{color:#555}

/* === PROCESS STEPS === */
.process-section h2{text-align:center}
.process-steps{display:grid;grid-template-columns:1fr;gap:24px;margin-top:24px}
.process-step{text-align:center;padding:20px}
.step-number{width:50px;height:50px;background:#0B3D6B;color:#fff;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700;margin-bottom:12px}
.process-step h3{color:#0B3D6B}
.process-step p{color:#555}

/* === REVIEWS === */
.reviews-section h2,.reviews-page-section h2{text-align:center}
.reviews-summary{text-align:center;margin-bottom:32px}
.reviews-summary .stars{color:#F5A623;font-size:1.4rem}
.reviews-carousel{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:16px}
.reviews-carousel::-webkit-scrollbar{height:4px}
.reviews-carousel::-webkit-scrollbar-track{background:#f0f0f0;border-radius:4px}
.reviews-carousel::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px}
.review-card{background:#fff;border-radius:8px;padding:24px;box-shadow:0 2px 10px rgba(0,0,0,.08);min-width:300px;max-width:400px;flex-shrink:0;scroll-snap-align:start;border:1px solid #eee}
.review-stars .stars{color:#F5A623;font-size:1.1rem}
.review-stars{margin-bottom:12px}
.review-text{color:#333;font-size:.95rem;font-style:italic;margin-bottom:12px}
.review-author{font-size:.9rem;color:#555}
.review-author strong{color:#1A1A2E;display:block}
.review-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.review-avatar{width:42px;height:42px;background:#0B3D6B;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;flex-shrink:0}
.review-author-name{display:block}
.reviews-grid{display:grid;grid-template-columns:1fr;gap:20px}
.reviews-grid.compact{grid-template-columns:1fr}
.hero-rating-large{text-align:center;margin-top:16px}
.hero-rating-large .stars{color:#F5A623;font-size:1.6rem}
.rating-text{display:block;margin-top:8px;font-size:1.1rem}
.leave-review{text-align:center;margin-top:48px;padding:40px;background:#f8f9fa;border-radius:8px}

/* === SERVICE AREAS === */
.areas-section h2{text-align:center}
.areas-map{margin-bottom:24px;border-radius:8px;overflow:hidden}
.areas-map iframe{display:block}
.area-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.area-chip{display:inline-block;padding:8px 18px;background:#fff;border:1px solid #ddd;border-radius:20px;font-size:.9rem;font-weight:500;color:#0B3D6B;transition:all .2s}
.area-chip:hover,.area-chip.active{background:#0B3D6B;color:#fff;border-color:#0B3D6B}

/* === FAQ === */
.faq-section h2,.service-faq h2{text-align:center}
.faq-list{max-width:800px;margin:0 auto}
.faq-item{border:1px solid #e0e0e0;border-radius:8px;margin-bottom:12px;overflow:hidden;background:#fff}
.faq-item summary{padding:16px 20px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:1rem;color:#1A1A2E;list-style:none;min-height:48px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:1.4rem;color:#F5A623;font-weight:700;transition:transform .2s;flex-shrink:0;margin-left:12px}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 20px 16px;color:#555;line-height:1.7}

/* === CTA SECTION === */
.cta-section{background:linear-gradient(135deg,#0B3D6B 0%,#164e85 100%);color:#fff;padding:50px 0;text-align:center}
.cta-section h2{color:#fff;font-size:1.8rem;margin-bottom:12px}
.cta-section p{color:rgba(255,255,255,.9);margin-bottom:24px;max-width:600px;margin-left:auto;margin-right:auto}
.cta-buttons{display:flex;flex-direction:column;gap:12px;align-items:center}

/* === PAGE HERO === */
.page-hero{background:linear-gradient(135deg,#0B3D6B 0%,#164e85 100%);color:#fff;padding:40px 0;text-align:center}
.page-hero h1{color:#fff;margin-bottom:8px}
.page-hero .hero-sub{color:rgba(255,255,255,.9);font-size:1.05rem}

/* === BREADCRUMBS === */
.breadcrumbs{background:#f8f9fa;padding:12px 20px}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:4px;max-width:1200px;margin:0 auto;align-items:center;list-style:none}
.breadcrumbs li{font-size:.85rem;color:#555}
.breadcrumbs li+li::before{content:'›';margin-right:6px;color:#999}
.breadcrumbs a{color:#0B3D6B}
.breadcrumbs a:hover{color:#F5A623}

/* === BENEFITS LIST === */
.benefits-list{max-width:700px;margin:0 auto}
.benefits-list li{display:flex;align-items:flex-start;gap:12px;padding:12px 0;font-size:1rem;color:#333;border-bottom:1px solid #eee}
.benefits-list li:last-child{border-bottom:none}
.benefits-list svg{flex-shrink:0;margin-top:3px}

/* === ABOUT === */
.about-stats{padding:40px 0}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;text-align:center}
.stat-item{padding:20px}
.stat-number{display:block;font-size:2.2rem;font-weight:800;color:#0B3D6B}
.stat-label{font-size:.9rem;color:#555;text-transform:uppercase;letter-spacing:1px}
.values-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:20px}
.value-item{padding:20px;background:#f8f9fa;border-radius:8px}
.value-item h3{color:#0B3D6B}

/* === CONTACT === */
.contact-grid{display:grid;grid-template-columns:1fr;gap:40px}
.contact-form{display:flex;flex-direction:column;gap:0}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-weight:600;margin-bottom:6px;font-size:.95rem}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;font-size:16px;font-family:inherit;transition:border-color .2s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#0B3D6B;box-shadow:0 0 0 3px rgba(11,61,107,.1)}
.required{color:#e74c3c}
.alert{padding:16px;border-radius:8px;margin-bottom:20px}
.alert-success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}
.alert-error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}
.contact-details{margin-bottom:24px}
.contact-detail{display:flex;align-items:flex-start;gap:12px;padding:16px 0;border-bottom:1px solid #eee}
.contact-detail svg{flex-shrink:0;margin-top:2px}
.contact-detail h3{font-size:.9rem;text-transform:uppercase;letter-spacing:.5px;color:#555;margin-bottom:2px}
.hours-table{width:100%;margin-bottom:24px}
.hours-table td{padding:8px 0;border-bottom:1px solid #eee;font-size:.95rem}
.hours-table td:last-child{text-align:right;font-weight:600;color:#0B3D6B}
.contact-map{margin-top:20px}

/* === SITEMAP === */
.sitemap-grid{display:grid;grid-template-columns:1fr;gap:32px}
.sitemap-list{list-style:none}
.sitemap-list li{padding:6px 0}
.sitemap-list li a{color:#0B3D6B}
.sitemap-list li a:hover{color:#F5A623}

/* === 404 === */
.error-page{text-align:center;padding:60px 20px}
.error-page h1{font-size:2.5rem;margin-bottom:16px}
.error-page p{font-size:1.1rem;color:#555;margin-bottom:32px}
.error-links{display:flex;gap:16px;justify-content:center;margin-bottom:40px;flex-wrap:wrap}
.error-services h2{margin-bottom:16px}
.error-services ul{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.error-services li a{display:inline-block;padding:8px 16px;background:#f8f9fa;border-radius:4px;font-size:.9rem}

/* === FOOTER === */
.site-footer{background:#1A1A2E;color:rgba(255,255,255,.8);padding:48px 0 0}
.footer-grid{display:grid;grid-template-columns:1fr;gap:32px}
.footer-col h3{color:#F5A623;font-size:.85rem;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:16px}
.footer-col ul{list-style:none}
.footer-col ul li{padding:4px 0}
.footer-col ul li a{color:rgba(255,255,255,.7);font-size:.9rem;transition:color .2s}
.footer-col ul li a:hover{color:#F5A623}
.footer-brand .footer-logo{margin-bottom:12px}
.footer-brand .footer-logo svg{height:36px}
.footer-tagline{font-size:.9rem;margin-bottom:16px;color:rgba(255,255,255,.7)}
.footer-nap p{font-size:.9rem;margin-bottom:4px}
.footer-nap a{color:rgba(255,255,255,.8)}
.footer-nap a:hover{color:#F5A623}
.footer-phone{font-weight:700;font-size:1.1rem}
.footer-hours{color:rgba(255,255,255,.8);font-size:.9rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:32px;padding:20px 0;text-align:center;font-size:.85rem}

/* === MOBILE CALL BAR === */
.mobile-call-bar{position:fixed;bottom:0;left:0;right:0;z-index:999;background:#F5A623;box-shadow:0 -2px 10px rgba(0,0,0,.15)}
.mobile-call-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;font-weight:700;font-size:1.05rem;color:#1A1A2E;text-align:center;min-height:48px}
.mobile-call-btn svg{flex-shrink:0}

/* === BACK TO TOP === */
.back-to-top{position:fixed;bottom:80px;right:16px;width:44px;height:44px;background:#0B3D6B;color:#fff;border:none;border-radius:50%;font-size:1.4rem;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:99;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.back-to-top.visible{opacity:1;visibility:visible}
.back-to-top:hover{background:#094a82}

/* === STARS === */
.stars{color:#F5A623}
.star{font-size:inherit}

/* ══════════════════════════════════════
   TABLET (768px+)
   ══════════════════════════════════════ */
@media(min-width:768px){
    h1{font-size:2.5rem}
    h2{font-size:2rem}
    .hero{padding:80px 0 70px}
    .hero h1{font-size:2.4rem}
    .hero-cta{flex-direction:row;justify-content:center}
    .cta-buttons{flex-direction:row}
    .services-grid{grid-template-columns:1fr 1fr}
    .small-grid{grid-template-columns:1fr 1fr 1fr}
    .why-grid{grid-template-columns:1fr 1fr}
    .process-steps{grid-template-columns:1fr 1fr}
    .trust-items{grid-template-columns:repeat(4,1fr)}
    .trust-item{font-size:.9rem}
    .stats-grid{grid-template-columns:repeat(4,1fr)}
    .contact-grid{grid-template-columns:1fr 1fr}
    .reviews-grid{grid-template-columns:1fr 1fr}
    .reviews-grid.compact{grid-template-columns:1fr 1fr 1fr}
    .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}
    .sitemap-grid{grid-template-columns:1fr 1fr 1fr}
    .values-grid{grid-template-columns:1fr 1fr}
}

/* ══════════════════════════════════════
   DESKTOP (1024px+)
   ══════════════════════════════════════ */
@media(min-width:1024px){
    /* Desktop nav already handled above */
    .hamburger{display:none}
    .nav-overlay{display:none!important}

    .hero h1{font-size:2.8rem}
    .services-grid{grid-template-columns:1fr 1fr 1fr}
    .why-grid{grid-template-columns:repeat(4,1fr)}
    .process-steps{grid-template-columns:repeat(4,1fr)}
    .reviews-grid{grid-template-columns:1fr 1fr 1fr}

    /* Hide mobile call bar on desktop */
    .mobile-call-bar{display:none}
    .back-to-top{bottom:24px;right:24px}

    section{padding:64px 0}
    .hero{padding:100px 0 80px}
}

/* ══════════════════════════════════════
   PRINT
   ══════════════════════════════════════ */
@media print{
    .site-header,.mobile-call-bar,.back-to-top,.cta-section,nav{display:none}
    body{color:#000;background:#fff}
    a{color:#000;text-decoration:underline}
}