/* Optimized CSS - Houston iPhone Repair */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{
--brand:#5c6bc0;--brand-dark:#3344aa;--success:#990000;--ink:#111;--muted:#555;--light-gray:#666;
--bg:#fff;--panel:#f8f9fa;--panel-2:#f0f8ff;--line:#e1e5e9;
--nav:#d9e3ec;--nav-hover:#bcc5ce;--nav-border:#c5cdd6;--focus:#2563eb;
--shadow-sm:0 1px 2px rgba(0,0,0,.08);--shadow-md:0 2px 8px rgba(0,0,0,.12);--shadow-lg:0 8px 24px rgba(0,0,0,.08);
--radius:8px;--radius-sm:4px;--radius-lg:12px;--transition:all .2s ease
}
body{font-family:Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-dark)}
a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
h1,h2,h3,h4{color:#000;font-weight:700}
.container{max-width:1200px;margin:0 auto;padding:20px;background:#fff}
.section{padding:5px 0;background:#fff}
.section.alt{background:var(--panel)}
.section-title{font-size:26px;margin:35px 0 20px;text-align:center}

/* Banner */
.hipr-banner{background:#fff;border-bottom:1px solid var(--line);display:flex;justify-content:center;align-items:center;padding:20px 0}
.hipr-banner svg{width:100%;max-width:1200px;height:auto;max-height:160px;display:block}


/* Navigation */
.hipr-nav{width:100%;position:sticky;top:0;z-index:9999;background:var(--nav);border-bottom:1px solid var(--nav-border);box-shadow:var(--shadow-sm)}
.hipr-nav-list{list-style:none;margin:0;padding:0 16px;display:flex;justify-content:center;align-items:center;gap:0;flex-wrap:wrap}
.hipr-nav-list>li{position:relative}
.hipr-nav-list>li:not(.cta)>a{display:block;padding:12px 14px;color:
#0a2a52;font-weight:700;transition:var(--transition)}
.hipr-nav-list>li.active>a,.hipr-nav-list>li>a[href="/"]{background:none;color:#000!important;font-weight:700;border-radius:0;text-decoration:none;border-bottom:none;padding-bottom:9px}
.hipr-nav-list>li:not(.cta):not(.active)>a:hover{background:var(--nav-hover);color:#0a2a52;border-radius:var(--radius-sm)}

.hipr-nav-list>li:not(.cta)>a:hover {
  background: var(--nav-hover);
  color: #0a2a52;
  border-radius: var(--radius-sm);
}

.hipr-nav-list li.cta a{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:var(--bg);padding:8px 14px;margin:6px 6px 6px 0;border:1px solid 
#b9c4cf;border-radius:10px;font-weight:700;box-shadow:0 1px 0 rgba(0,0,0,.15),inset 0 -2px 0 rgba(0,0,0,.15);transition:var(--transition)}
.hipr-nav-list li.cta a:hover{background:var(--brand-dark);transform:translateY(-1px)}



/* Dropdowns */
.dropdown{position:relative}
.dropdown-menu{position:absolute;top:100%;left:0;min-width:320px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:16px;margin-top:8px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:10000;overflow:visible}
.dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.iphone-series-menu,.ipad-series-menu{display:block;max-height:70vh;overflow:auto;padding:12px}
.series-list{list-style:none;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.series-btn{appearance:none;width:100%;text-align:left;cursor:pointer;background:var(--panel);border:1px solid #e6ebf0;border-radius:10px;padding:10px 12px;font-weight:800;color:#0a2a52;position:relative;transition:var(--transition)}
.series-btn:hover{background:#eef2f6;border-color:#dfe6ed;transform:translateY(-1px)}
.series-btn::after{content:"▸";position:absolute;right:12px;top:50%;transform:translateY(-50%);transition:transform .2s ease}
.series.open>.series-btn::after{content:"▼"}
.models{display:none;padding:8px 10px 2px}
.series.open .models{display:block}
.models a{display:block;padding:8px;border-radius:var(--radius);color:var(--ink);font-weight:600;transition:var(--transition)}
.models a:hover{background:var(--panel);color:var(--brand)}

/* Hero */
.hero{background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 50%,#dee2e6 100%);color:#000;text-align:center;padding:40px 20px;margin:20px auto 30px;border:1px solid #ddd;border-radius:6px}
.hero h1{font-size:28px;margin-bottom:12px}
.hero h2{font-size:22px;color:var(--brand);margin-bottom:10px}
.hero p{font-size:16px;color:#000;max-width:760px;margin:0 auto 10px}
.hero .price{font-size:1.8rem;font-weight:800;color:#2d7d2d;margin:12px 0;display:block}

/* Badges */
.badges{margin:16px auto 0;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.badge{background:#fff;border:1px solid var(--line);border-radius:6px;padding:6px 12px;font-weight:600;color:#000;font-size:.9rem}

/* Buttons */
.btn{cursor:pointer;border:none;text-decoration:none;display:inline-block;font-weight:700;border-radius:6px;padding:12px 22px;transition:.2s ease;font-size:1rem}
.btn-primary,.btn-secondary{background:#fff;color:#000;border:2px solid var(--brand)}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.15);background:var(--brand)!important;color:#fff!important;border-color:var(--brand)!important}
.cta-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.cta-button{background:var(--brand);color:var(--bg);padding:12px 25px;margin:5px;border-radius:var(--radius-sm);font-weight:700;font-size:18px;display:inline-flex;align-items:center;gap:10px;transition:var(--transition)}
.cta-button:hover{background:var(--brand-dark);color:#fff;transform:translateY(-1px)}

/* Cards */
.card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:30px;position:relative;transition:var(--transition)}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.card .popular{position:absolute;top:-12px;right:20px;background:var(--brand);color:#fff;padding:6px 14px;border-radius:4px;font-size:.8rem;font-weight:600}
.card h3{margin-bottom:8px;color:var(--ink);font-size:1.3rem;font-weight:600}
.card .price-range{color:#2d7d2d;font-weight:700;font-size:1.05rem;margin:10px 0}
.card p{color:var(--muted);line-height:1.6}
.card ul{list-style:none;margin-top:15px}
.card li{padding:6px 0;color:var(--muted)}
.card li::before{content:"✓";margin-right:10px;color:var(--success);font-weight:700}

/* Service Cards */
.service-card{background:#fff;padding:15px 20px;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.05);border:1px solid var(--line)}
.service-card .features{margin:10px 0 8px 18px}
.service-card .features li{margin:4px 0;color:var(--muted)}
.service-card .note{display:block;margin-top:10px;color:#777;font-size:.85rem}

/* Grids */
.two-col{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;max-width:900px;margin:0 auto;align-items:start}
.svc-card{border:1px solid #ddd;border-radius:10px;background:#fff;padding:18px;box-shadow:0 2px 6px rgba(0,0,0,.05);display:flex;flex-direction:column}
.svc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.svc-icon{font-size:20px;margin-right:10px}
.svc-price{font-weight:bold;color:#222;white-space:nowrap}
.svc-list{margin:0;padding-left:20px}
.svc-list li{margin:6px 0;color:#444}

/* Model Links */
.model-links-list{list-style:none!important;margin:10px 0 0;padding-left:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.model-links-list>li::marker{content:none}
.model-links-list li a{display:block;text-align:center;font-weight:700;background:#d9e3ec;color:#0a2a52;border:1px solid #c5cdd6;border-radius:12px;padding:14px 16px;transition:all .15s ease}
.model-links-list li a:hover{background:#bcc5ce;border-color:#aeb7c1;transform:translateY(-1px)}

/* Breadcrumbs */
.crumbs{background:#fff;border-bottom:1px solid var(--line)}
.crumbs .container{padding:12px 20px}
.crumbs a{color:#666}
.crumbs a:hover{color:var(--brand)}
.crumbs span{color:#999}

/* Utility */
.includes{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px}
.chip{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:.85rem;color:#333}

/* FAQ */
#faq .faq-accordion details{margin:14px 0;padding:12px 14px;background:#fff;border:1px solid #ddd;border-radius:8px}
#faq .faq-accordion summary{font-weight:700;cursor:pointer;line-height:1.45;list-style:none}
#faq .faq-accordion summary::-webkit-details-marker{display:none}
#faq .faq-accordion summary::after{content:"＋";float:right;font-weight:700;transform:translateY(-1px)}
#faq .faq-accordion details[open] summary::after{content:"–"}
#faq .faq-accordion .answer p{margin:10px 0 0;line-height:1.6;color:#333;font-size:15px}

/* Footer */
footer{background:#fff;text-align:center;padding:30px 0;color:#666;border-top:1px solid var(--line)}
footer .cols{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;padding:0 20px 10px}

/* Mobile Sticky Footer */
.mobile-sticky-footer{display:none}

/* Media Queries */
@media (max-width:980px){
.hipr-nav .hipr-nav-list>li:not(.cta)>a{padding:10px 12px}
}
@media (max-width:900px){
.hipr-banner svg{max-height:140px}
}
@media (max-width:768px){
body{padding-bottom:80px}
.mobile-sticky-footer{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:1000;background:var(--brand);box-shadow:0 -2px 10px rgba(0,0,0,.2)}
.mobile-sticky-footer a{flex:1;display:flex;align-items:center;justify-content:center;padding:14px 10px;color:#fff;font-weight:700;font-size:14px;border-right:1px solid rgba(255,255,255,.2)}
.mobile-sticky-footer a:last-child{border-right:0}
.mobile-sticky-footer a:hover{background:rgba(255,255,255,.1)}
.two-col,.svc-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
.hipr-banner svg{max-height:125px}
}
@media (max-width:600px){
.model-links-list{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
.hipr-nav .hipr-nav-list>li:not(.cta)>a{padding:10px 10px;font-size:14px}
.hipr-nav .hipr-nav-list li.cta a{padding:10px 14px;border-radius:6px}
}