:root { --ink:#101113; --muted:#64666b; --line:#dedfe2; --paper:#f5f5f2; --white:#fff; --red:#e21b2d; --red-dark:#bd0d1d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
.page-shell { width:min(1180px,calc(100% - 48px)); margin:0 auto; }
.hero { position:relative; min-height:760px; overflow:hidden; color:var(--white); background-image:linear-gradient(90deg,rgba(10,11,13,.96) 0%,rgba(10,11,13,.82) 35%,rgba(10,11,13,.15) 68%,rgba(10,11,13,.08) 100%),url("mobile-repair-home-service.png"); background-position:center; background-size:cover; }
.hero::after { position:absolute; inset:auto 0 0; height:140px; content:""; background:linear-gradient(0deg,rgba(0,0,0,.58),transparent); pointer-events:none; }
.site-header { position:relative; z-index:3; display:flex; min-height:102px; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.18); }
.brand { display:inline-flex; align-items:center; gap:12px; }
.brand-mark { display:grid; width:46px; height:46px; place-items:center; background:var(--red); color:var(--white); font-size:17px; font-weight:900; letter-spacing:-.06em; }
.brand-name { display:flex; flex-direction:column; font-size:16px; font-weight:900; letter-spacing:.08em; line-height:1.05; }
.brand-name small { margin-top:4px; font-size:9px; font-weight:700; letter-spacing:.34em; opacity:.72; }
.header-actions { display:flex; align-items:center; gap:26px; }
.language-switch { display:flex; padding:3px; border:1px solid rgba(255,255,255,.35); border-radius:999px; background:rgba(0,0,0,.18); }
.language-button { width:36px; height:30px; padding:0; border:0; border-radius:999px; background:transparent; color:rgba(255,255,255,.72); font:800 11px/1 Arial,Helvetica,sans-serif; cursor:pointer; }
.language-button.active { background:var(--white); color:var(--ink); }
.language-button:focus-visible { outline:3px solid rgba(226,27,45,.55); outline-offset:3px; }
.header-link { font-size:13px; font-weight:700; letter-spacing:.05em; opacity:.8; transition:opacity 180ms ease; }
.shop-nav { color:#fff; }
.header-link:hover,.header-link:focus-visible { opacity:1; }
.hero-content { position:relative; z-index:2; display:flex; min-height:560px; align-items:center; }
.hero-copy { max-width:690px; padding:64px 0 92px; }
.eyebrow { margin:0 0 22px; color:var(--red); font-size:12px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.eyebrow-light { color:rgba(255,255,255,.74); }
.live-dot { display:inline-block; width:7px; height:7px; margin:0 8px 1px 0; border-radius:50%; background:var(--red); box-shadow:0 0 0 6px rgba(226,27,45,.13); }
.hero h1 { max-width:680px; margin:0; font-size:clamp(60px,7.1vw,104px); font-weight:900; letter-spacing:-.075em; line-height:.91; }
.hero h1 span { display:block; color:var(--red); }
.hero h1 .headline-first { color:var(--white); }
.hero-description { max-width:590px; margin:30px 0 0; color:rgba(255,255,255,.75); font-size:19px; line-height:1.65; }
.hero-buttons,.contact-buttons { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.button { display:inline-flex; min-height:54px; align-items:center; justify-content:center; padding:0 24px; border:1px solid transparent; font-size:13px; font-weight:900; letter-spacing:.045em; text-transform:uppercase; transition:background 180ms ease,border-color 180ms ease,color 180ms ease,transform 180ms ease; }
.button:hover { transform:translateY(-2px); }
.button:focus-visible,.header-link:focus-visible,.brand:focus-visible,.scroll-cue:focus-visible,.contact-phone:focus-visible { outline:3px solid rgba(226,27,45,.5); outline-offset:4px; }
.button-primary { background:var(--red); color:var(--white); }
.button-primary:hover { background:var(--red-dark); }
.button-ghost { border-color:rgba(255,255,255,.45); color:var(--white); }
.button-ghost:hover { border-color:var(--white); background:var(--white); color:var(--ink); }
.button-light { background:var(--white); color:var(--ink); }
.button-light:hover { background:var(--red); color:var(--white); }
.button-small { min-height:44px; padding-inline:20px; font-size:11px; }
.button-outline-dark { border-color:#cacbd0; color:var(--ink); }
.button-outline-dark:hover { border-color:var(--ink); background:var(--ink); color:var(--white); }
.trust-list { display:flex; flex-wrap:wrap; gap:16px 28px; margin:34px 0 0; padding:0; color:rgba(255,255,255,.72); font-size:12px; font-weight:700; letter-spacing:.04em; list-style:none; }
.trust-list li::before { margin-right:9px; color:var(--red); content:"✓"; font-weight:900; }
.scroll-cue { position:absolute; z-index:3; right:max(24px,calc((100vw - 1180px)/2)); bottom:32px; display:flex; align-items:center; gap:16px; color:rgba(255,255,255,.68); font-size:10px; font-weight:800; letter-spacing:.17em; text-transform:uppercase; }
.scroll-cue span:last-child { display:grid; width:40px; height:40px; place-items:center; border:1px solid rgba(255,255,255,.36); border-radius:50%; font-size:18px; }
.services { padding-top:120px; padding-bottom:120px; }
.section-heading { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr); gap:90px; align-items:end; }
.section-heading h2,.contact h2 { margin:0; font-size:clamp(42px,5vw,70px); font-weight:900; letter-spacing:-.065em; line-height:.98; }
.section-heading>p { margin:0; color:var(--muted); font-size:16px; line-height:1.75; }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); margin-top:66px; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.service-card { min-height:290px; padding:30px 28px 32px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.42); transition:background 180ms ease,transform 180ms ease; }
.service-card:hover { position:relative; z-index:1; background:var(--white); transform:translateY(-6px); box-shadow:0 20px 50px rgba(24,24,26,.08); }
.service-number { display:block; margin-bottom:58px; color:var(--red); font-size:11px; font-weight:900; letter-spacing:.14em; }
.service-card h3 { margin:0 0 14px; font-size:21px; letter-spacing:-.025em; }
.service-card p { margin:0; color:var(--muted); font-size:14px; line-height:1.7; }
.process-strip { display:grid; grid-template-columns:.7fr 2.3fr; gap:44px; align-items:center; margin-top:34px; padding:28px 0 0; }
.process-strip>p { margin:0; font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.process-strip ol { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0; padding:0; list-style:none; }
.process-strip li { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; font-weight:700; }
.process-strip li span { display:grid; width:30px; height:30px; flex:0 0 30px; place-items:center; border-radius:50%; background:var(--ink); color:var(--white); font-size:11px; }
.contact { position:relative; overflow:hidden; background:#17181a; color:var(--white); }
.contact-accent { position:absolute; top:-110px; left:-70px; width:360px; height:360px; border:72px solid rgba(226,27,45,.13); border-radius:50%; }
.contact-inner { position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:100px; align-items:center; padding-top:112px; padding-bottom:100px; }
.contact-copy>p:last-child { max-width:590px; margin:28px 0 0; color:rgba(255,255,255,.62); font-size:17px; line-height:1.75; }
.contact-card { padding:42px; background:var(--white); color:var(--ink); box-shadow:24px 24px 0 var(--red); }
.contact-card>p { margin:0 0 10px; color:var(--muted); font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.contact-phone { display:block; margin-bottom:14px; font-size:clamp(28px,3vw,42px); font-weight:900; letter-spacing:-.05em; }
.contact-meta { display:flex; flex-direction:column; gap:7px; }
.contact-meta span,.contact-meta a { color:var(--muted); font-size:13px; }
.contact-meta a { width:fit-content; color:var(--ink); font-weight:800; text-decoration:underline; text-decoration-color:rgba(226,27,45,.4); text-underline-offset:4px; }
.contact-buttons { margin-top:28px; }
.contact-buttons .button { flex:1 1 145px; }
.contact-buttons .button-email { flex-basis:100%; min-height:48px; background:var(--ink); color:var(--white); }
.contact-buttons .button-email:hover { background:var(--red); }
.site-footer { position:relative; display:flex; min-height:110px; align-items:center; justify-content:space-between; border-top:1px solid rgba(255,255,255,.12); }
.site-footer p { margin:0; color:rgba(255,255,255,.48); font-size:11px; line-height:1.7; text-align:right; }
@media(max-width:980px){.hero{min-height:720px;background-position:62% center}.section-heading,.contact-inner{grid-template-columns:1fr;gap:44px}.section-heading>p{max-width:660px}.service-grid{grid-template-columns:repeat(2,1fr)}.service-card{min-height:250px}.contact-card{max-width:620px}}
@media(max-width:680px){.page-shell{width:min(100% - 30px,1180px)}.hero{min-height:760px;background-image:linear-gradient(90deg,rgba(10,11,13,.96),rgba(10,11,13,.83)),url("mobile-repair-home-service.png");background-position:67% center}.site-header{min-height:84px}.header-actions{gap:7px}.header-link{display:none}.header-link.shop-nav{display:inline-flex;font-size:11px}.language-button{width:29px;height:28px}.brand-mark{width:38px;height:38px;font-size:14px}.brand-name{font-size:12px}.button-small{min-height:36px;padding-inline:10px;font-size:9px}.hero-content{min-height:610px;align-items:flex-start}.hero-copy{padding:84px 0 96px}.hero h1{font-size:clamp(48px,15vw,70px)}.hero-description{margin-top:24px;font-size:16px}.hero-buttons .button{width:100%}.trust-list{gap:12px 20px;margin-top:26px}.scroll-cue{display:none}.services{padding-top:82px;padding-bottom:82px}.section-heading h2,.contact h2{font-size:clamp(40px,13vw,54px)}.service-grid{grid-template-columns:1fr;margin-top:44px}.service-card{min-height:auto;padding:26px}.service-number{margin-bottom:34px}.process-strip,.process-strip ol{grid-template-columns:1fr}.process-strip{gap:24px}.process-strip ol{gap:18px}.process-strip li b{font-weight:700}.contact-inner{padding-top:86px;padding-bottom:80px}.contact-card{padding:30px 24px;box-shadow:10px 10px 0 var(--red)}.site-footer{flex-direction:column;gap:24px;align-items:flex-start;justify-content:center;padding-top:30px;padding-bottom:30px}.site-footer p{text-align:left}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.service-card{transition:none}}