/* Phone Repair Tech site design (redesign 2026-11-05). Loaded last on every public page, so it wins over the
   older inline page styles. Header/footer use the sx- prefix; everything under body.sx restyles the existing pages. */
:root{--sx-navy:#0b1a33;--sx-ink:#13213a;--sx-text:#3c4a60;--sx-muted:#5b6880;--sx-blue:#1d5fd6;--sx-blue-d:#164bb0;--sx-sky:#eaf1fd;--sx-green:#14833b;--sx-green-d:#0f6a2f;--sx-line:#dde4ef;--sx-soft:#f5f7fb;--sx-max:1180px;--sx-font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body.sx{margin:0;background:#fff!important;color:var(--sx-text)!important;font-family:var(--sx-font)!important;font-size:16px;line-height:1.6;padding-bottom:0!important;overflow-x:clip}
.sx-wrap{max-width:var(--sx-max);margin:0 auto;padding:0 20px}

/* buttons */
.sx-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:12px;font-weight:700;font-size:16px;text-decoration:none;border:0;cursor:pointer;font-family:var(--sx-font)}
.sx-btn-book{background:var(--sx-blue);color:#fff!important}.sx-btn-book:hover{background:var(--sx-blue-d)}
.sx-btn-call{background:var(--sx-green);color:#fff!important}.sx-btn-call:hover{background:var(--sx-green-d)}

/* header */
.sx-top{position:sticky;top:0;z-index:1040;background:#fff;border-bottom:1px solid var(--sx-line);font-family:var(--sx-font)}
.sx-top .sx-wrap{display:flex;align-items:center;gap:20px;min-height:76px}
.sx-logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--sx-ink);flex:none}
.sx-logo img{width:44px;height:44px;display:block}
.sx-logo-text{display:flex;flex-direction:column;font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1.15}
.sx-logo-text b{color:var(--sx-blue);font-weight:800;display:contents}
.sx-logo-text small{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sx-muted);margin-top:3px}
.sx-nav{display:flex;gap:2px;margin-left:8px}
.sx-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;text-decoration:none;font-weight:600;font-size:15px;color:var(--sx-ink)}
.sx-nav a:hover{background:var(--sx-soft)}
.sx-nav a[aria-current="page"]{color:var(--sx-blue);background:var(--sx-sky)}
.sx-nav .sx-nav-call{display:none}
.sx-cta{margin-left:auto;display:flex;align-items:center;gap:12px}
.sx-phone{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:800;color:var(--sx-ink);font-size:17px;white-space:nowrap;min-height:44px}
.sx-phone svg{width:20px;height:20px;color:var(--sx-green)}
.sx-cta .sx-btn{min-height:46px;padding:0 18px;font-size:15px}
.sx-menu{display:none;width:46px;height:46px;border-radius:12px;border:1px solid var(--sx-line);background:#fff;color:var(--sx-ink);align-items:center;justify-content:center;cursor:pointer}
.sx-menu svg{width:24px;height:24px}

/* footer, final call band, phone call bar */
.sx-final{background:var(--sx-navy);color:#fff;text-align:center;font-family:var(--sx-font)}
.sx-final .sx-wrap{padding-top:64px;padding-bottom:64px}
.sx-final h2{color:#fff!important;font-size:clamp(28px,4vw,42px);line-height:1.15;letter-spacing:-.02em;font-weight:800;max-width:760px;margin:0 auto;text-wrap:balance}
.sx-final p{color:#c8d4e8;margin:14px 0 26px}
.sx-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.sx-foot{background:#071226;color:#aebbd2;font-size:15px;font-family:var(--sx-font)}
.sx-foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;padding-top:48px!important;padding-bottom:32px!important}
.sx-foot b{color:#fff;display:block;margin-bottom:8px;font-size:16px}
.sx-foot a{text-decoration:none;display:flex;align-items:center;min-height:44px;color:#d4dceb}
.sx-foot a:hover{color:#fff}
.sx-foot p{margin:12px 0 0;line-height:1.6}
.sx-logo-dark{color:#fff}
.sx-logo-dark .sx-logo-text b{color:#8fb8ff}
.sx-foot-base{border-top:1px solid #1d2b45;padding:18px 20px;text-align:center;font-size:13.5px;color:#9aa8c0}
.sx-callbar{display:none}

/* ---------- existing pages ---------- */
body.sx main.content-area{padding:0 0 56px!important;background:#fff}
body.sx main.content-area>.container{max-width:var(--sx-max);padding-left:20px;padding-right:20px}
body.sx h1,body.sx h2,body.sx h3,body.sx h4,body.sx h5{font-family:var(--sx-font);letter-spacing:-.02em;text-wrap:balance}
body.sx main h2,body.sx main h3,body.sx main h4{color:var(--sx-ink)!important;font-weight:800}
body.sx .text-muted-2,body.sx .text-secondary{color:var(--sx-muted)!important}


/* page hero: every page head becomes a full-width navy band */
body.sx .page-head,body.sx .about-hero,body.sx .services-index-head{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-bottom:40px;padding:56px 20px!important;background:var(--sx-navy) url(/img/home/hero.webp) center/cover;text-align:center}
body.sx .page-head::before,body.sx .about-hero::before,body.sx .services-index-head::before{content:"";position:absolute;inset:0;background:rgba(8,18,38,.88)}
body.sx .page-head>*,body.sx .about-hero>*,body.sx .services-index-head>*{position:relative;max-width:var(--sx-max);margin-left:auto;margin-right:auto}
body.sx .page-head .hero-shell{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0}
body.sx .page-head .hero-head{margin-bottom:28px}
body.sx .page-head .hero-head:last-child{margin-bottom:0}
body.sx main .page-head h1,body.sx main .about-hero h1,body.sx main .services-index-head h1,body.sx main .page-head .section-title{color:#fff!important;font-family:var(--sx-font);font-size:clamp(32px,4.6vw,52px)!important;line-height:1.08!important;font-weight:800!important;letter-spacing:-.025em!important;max-width:900px!important;margin:0 auto 14px!important;text-align:center}
body.sx .page-head .lead,body.sx .page-head .hero-subtext,body.sx .about-hero-subtitle,body.sx .services-index-summary{color:#d6e0f0!important;font-size:18px!important;line-height:1.6!important;max-width:680px!important;margin-left:auto!important;margin-right:auto!important}
body.sx .page-head .surface,body.sx .page-head .card-soft{background:#fff!important;color:var(--sx-text);text-align:left}
body.sx .page-head .surface .fw-bold,body.sx .page-head .surface .fw-semibold{color:var(--sx-ink)}
body.sx .page-head .form-label{color:var(--sx-ink)}
body.sx .about-hero-actions .btn{min-width:200px}

/* cards and panels: white with a thin line, no pastel tints */
body.sx .card-soft,body.sx .surface,body.sx .info-card,body.sx .section-panel,body.sx .status-card,
body.sx .about-card-mini,body.sx .about-media-card,body.sx .about-bullet-card,body.sx .about-rich-card{background:#fff!important;border:1px solid var(--sx-line)!important;border-radius:16px!important;box-shadow:0 12px 28px -24px rgba(19,33,58,.5)!important}
body.sx [class*="tone-"]{background-color:#fff!important}
body.sx .icon-round{width:48px;height:48px;border-radius:12px;background:var(--sx-sky);color:var(--sx-blue);font-size:1.3rem}
body.sx .soft-badge,body.sx .hero-badge,body.sx .about-kicker,body.sx .service-details-label{background:var(--sx-sky)!important;color:var(--sx-blue-d)!important;border-radius:999px;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
body.sx .section-title{font-size:clamp(26px,3.4vw,36px)!important;font-weight:800!important;color:var(--sx-ink)!important}

/* bootstrap buttons → site buttons */
body.sx .btn{font-family:var(--sx-font);font-weight:700;border-radius:12px!important;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 22px;box-shadow:none!important}
body.sx .btn-sm{min-height:44px;padding:0 16px;font-size:14px}
body.sx .btn-lg{min-height:54px;font-size:17px}
body.sx .btn-brand,body.sx .btn-primary{background:var(--sx-blue)!important;border-color:var(--sx-blue)!important;color:#fff!important}
body.sx .btn-brand:hover,body.sx .btn-primary:hover{background:var(--sx-blue-d)!important;border-color:var(--sx-blue-d)!important}
body.sx .btn-outline-primary,body.sx .btn-light,body.sx .btn-soft{background:#fff!important;border:1px solid var(--sx-line)!important;color:var(--sx-ink)!important}
body.sx .btn-outline-primary:hover,body.sx .btn-light:hover{border-color:var(--sx-blue)!important;color:var(--sx-blue)!important}
body.sx .page-head .btn-outline-primary,body.sx .about-hero .btn-outline-primary{background:transparent!important;border-color:rgba(255,255,255,.4)!important;color:#fff!important}
body.sx a[href^="tel:"].btn-brand{background:var(--sx-green)!important;border-color:var(--sx-green)!important}

/* forms */
body.sx .form-label{font-weight:700!important;color:var(--sx-ink);font-size:15px;margin-bottom:6px}
body.sx .form-control,body.sx .form-select{border:1px solid #cfd8e6;border-radius:10px;min-height:50px;font-size:16px;color:var(--sx-ink);font-family:var(--sx-font)}
body.sx textarea.form-control{min-height:120px}
body.sx select[size].form-select{min-height:0}
body.sx .form-control:focus,body.sx .form-select:focus{border-color:var(--sx-blue);box-shadow:0 0 0 3px rgba(29,95,214,.18)}
body.sx .form-text{color:var(--sx-muted);font-size:14px}
body.sx .form-check-input{width:20px;height:20px;border-color:#9fb0c8}
body.sx .form-check-input:checked{background-color:var(--sx-blue);border-color:var(--sx-blue)}
body.sx #issueGrid .surface{min-height:56px;box-shadow:none!important;color:var(--sx-ink);font-weight:600}
body.sx #issueGrid .surface:has(input:checked){border-color:var(--sx-blue)!important;background:var(--sx-sky)!important}
body.sx .search-box{position:relative}
body.sx .alert{border-radius:12px!important}

/* FAQ: closed rows with an arrow */
body.sx .faq-edge-section{padding-top:24px}
body.sx .faq-title-row{text-align:center;margin-bottom:22px}
body.sx .faq-accordion{max-width:820px;margin:0 auto}
body.sx .faq-accordion .accordion-item{border:1px solid var(--sx-line)!important;border-radius:12px!important;box-shadow:none!important;margin-bottom:10px!important}
body.sx .faq-accordion .accordion-button{font-family:var(--sx-font);font-weight:700;color:var(--sx-ink);font-size:16px;min-height:56px;background:#fff;box-shadow:none}
body.sx .faq-accordion .accordion-button:not(.collapsed){background:#fff;color:var(--sx-blue)}
body.sx .faq-accordion .accordion-body{color:var(--sx-text)!important}

/* services list */
body.sx .services-filter-bar,body.sx .services-filters{margin:0 0 28px!important;gap:8px!important}
body.sx .services-filter-chip{min-height:44px;border:1px solid var(--sx-line)!important;color:var(--sx-ink)!important;font-weight:700;background:#fff}
body.sx .services-filter-chip.is-active,body.sx .services-filter-chip.active{background:var(--sx-blue)!important;border-color:var(--sx-blue)!important;color:#fff!important;box-shadow:none!important}
body.sx .services-grid{gap:16px!important}
body.sx .service-grid-card,body.sx .service-card,body.sx .related-service-card{border:1px solid var(--sx-line)!important;border-radius:16px!important;box-shadow:none!important}
body.sx .service-grid-card:hover,body.sx .related-service-card:hover{border-color:#b9cdf3!important;box-shadow:0 14px 30px -22px rgba(19,33,58,.5)!important}
body.sx .service-grid-title,body.sx .service-card-title,body.sx .related-service-title{font-size:18px!important;color:var(--sx-ink)!important}
body.sx .service-grid-text,body.sx .service-card-text,body.sx .related-service-text{color:var(--sx-muted)!important;font-size:15px!important}
body.sx .media-placeholder{background:var(--sx-sky) url(/img/brand/mark.svg) center/56px no-repeat!important}
body.sx .media-placeholder>*{display:none!important}

/* service detail */
body.sx .service-page-shell{padding-top:40px!important}
body.sx .service-hero-media{border-radius:16px!important;border:1px solid var(--sx-line)!important}
body.sx main .service-page-title{font-size:clamp(32px,4.4vw,50px)!important;color:var(--sx-ink)!important;font-weight:800!important}
body.sx .service-page-summary{color:var(--sx-text)!important;font-size:18px!important}
body.sx .service-detail-copy{color:var(--sx-text)!important;font-size:17px!important;line-height:1.8!important}

/* about */
body.sx .about-band{padding:28px 0}
body.sx .about-hero{margin-bottom:12px}
body.sx .about-card-title,body.sx .about-section-title,body.sx .about-bullet-title{color:var(--sx-ink)!important;font-weight:800!important}
body.sx .about-section-title{max-width:none!important;font-size:clamp(28px,3.6vw,40px)!important;line-height:1.12!important}

/* repair status */
body.sx .status-pill{border-radius:999px}

/* policies */
body.sx .policy-content{color:var(--sx-text);font-size:17px;line-height:1.8}

@media (max-width:1100px){
 .sx-nav{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;gap:0;margin:0;padding:8px 16px 16px;background:#fff;border-bottom:1px solid var(--sx-line);box-shadow:0 24px 40px -24px rgba(19,33,58,.45)}
 .sx-nav.is-open{display:flex}
 .sx-nav a{min-height:52px;font-size:17px;border-bottom:1px solid var(--sx-soft);border-radius:0;padding:0 4px}
 .sx-nav .sx-nav-call{display:flex;color:var(--sx-green)}
 .sx-menu{display:inline-flex}
 .sx-cta-book{display:none!important}
 .sx-top .sx-wrap{position:relative}
 .sx-foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
 .sx-wrap{padding:0 16px}
 .sx-top .sx-wrap{min-height:66px;gap:10px}
 .sx-logo img{width:40px;height:40px}
 .sx-logo-text{font-size:17px}
 .sx-logo-text small{font-size:10px;letter-spacing:.12em}
 .sx-phone span{display:none}
 .sx-phone{width:46px;height:46px;border-radius:12px;background:#e3f4e9;justify-content:center}
 .sx-foot-grid{grid-template-columns:1fr}
 .sx-btns .sx-btn{width:100%}
 body.sx{padding-bottom:76px!important}
 .sx-callbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:1030;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--sx-line)}
 .sx-callbar .sx-btn{min-height:50px;font-size:15px;padding:0 10px}
 body.sx .page-head,body.sx .about-hero,body.sx .services-index-head{padding:40px 16px!important;margin-bottom:28px}
 body.sx .page-head .lead,body.sx .page-head .hero-subtext,body.sx .about-hero-subtitle,body.sx .services-index-summary{font-size:16.5px!important}
 body.sx main.content-area>.container{padding-left:16px;padding-right:16px}
}

/* old page CSS gave titles chip padding; titles sit flush with their text */
body.sx main :is(.service-page-title,.services-index-title,.services-open-title,.service-grid-title,.service-card-title,.related-service-title,.section-title,.about-hero-title,.about-section-title,.about-card-title,.about-bullet-title,.display-mobile-hero,.lookup-title,h1,h2){padding-left:0!important;padding-right:0!important;display:block}
body.sx main .container:has(>.services-index-shell),body.sx main .container.py-4:has(.services-index-shell){padding-top:0!important}
body.sx main>.container>.container:has(.services-index-shell){padding-top:0!important}
.sx-logo-text{white-space:nowrap}
body.sx .service-grid-thumb{aspect-ratio:16/7!important}
body.sx .page-head p,body.sx .page-head .text-muted-2{color:#d6e0f0!important}
body.sx .page-head .surface p,body.sx .page-head .surface .text-muted-2{color:var(--sx-muted)!important}
.sx-logo-text small{font-size:12px!important}
@media (max-width:600px){body.sx main .row{--bs-gutter-x:0}.sx-logo-text small{letter-spacing:.06em}}

/* owner 2026-11-05: header scrolls away with the page; no floating call/book bar on phones */
.sx-top{position:relative!important}
.sx-callbar{display:none!important}
body.sx{padding-bottom:0!important}

/* owner 2026-11-05: short footer on phones (full footer stays on desktop) */
@media (max-width:600px){
 .sx-final .sx-wrap{padding-top:32px;padding-bottom:32px}
 .sx-final h2{font-size:22px}
 .sx-final p{margin:8px 0 16px;font-size:14px}
 .sx-final .sx-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .sx-final .sx-btn{width:auto!important;min-height:48px;padding:0 10px;font-size:14.5px}
 .sx-foot-grid{grid-template-columns:1fr 1fr!important;gap:4px 16px!important;padding-top:24px!important;padding-bottom:12px!important}
 .sx-foot-grid>div:first-child{grid-column:1/-1;margin-bottom:8px}
 .sx-foot-grid>div:first-child p:first-of-type{display:none}
 .sx-foot-grid>div:first-child p{margin-top:6px;font-size:13.5px}
 .sx-foot-grid>div:nth-child(4){display:none}
 .sx-foot b{font-size:14px;margin-bottom:2px}
 .sx-foot a{min-height:40px;font-size:14px}
 .sx-foot-base{padding:12px 16px;font-size:12.5px}
}
@media (max-width:600px){
 .sx-foot-grid{grid-template-columns:1fr!important;gap:10px!important}
 .sx-foot-grid>div:first-child p{display:none}
 .sx-foot-grid>div:first-child{margin-bottom:0}
 .sx-foot .sx-logo-text{flex-direction:row;gap:5px;font-size:17px}
 .sx-foot-grid>div:nth-child(2),.sx-foot-grid>div:nth-child(3){display:flex;flex-wrap:wrap;column-gap:18px;align-items:center}
 .sx-foot-grid>div:nth-child(2) b,.sx-foot-grid>div:nth-child(3) b{display:none}
 .sx-final h2{font-size:21px}
 .sx-final p{display:none}
 .sx-final .sx-btns{margin-top:14px}
}
/* owner 2026-11-05: phone footer centered and balanced */
@media (max-width:600px){
 .sx-foot-grid{text-align:center;justify-items:center}
 .sx-foot-grid>div:first-child{display:flex;justify-content:center}
 .sx-foot .sx-logo-text b{font-size:inherit}
 .sx-foot-grid>div:nth-child(2),.sx-foot-grid>div:nth-child(3){justify-content:center;column-gap:22px}
 .sx-foot-grid>div:nth-child(3){border-top:1px solid #1d2b45;padding-top:6px;width:100%}
}