/*
Theme Name: Manchester Mobile Auto Electrics
Theme URI: https://mobileautoelectrician.co.uk/
Author: Manchester Mobile Auto Electrics & Repairs
Description: Lightweight one-page WordPress theme for Manchester Mobile Auto Electrics & Repairs.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: mmaer
*/

@font-face {
  font-family: "Montserrat Variable";
  src: url("assets/fonts/montserrat-latin.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root { --ink:#170711; --burgundy:#2e0b18; --burgundy-2:#481126; --raspberry:#b04e89; --pink:#e85a9e; --white:#fffafc; --cream:#f7f0f3; --muted:#baa9b1; --line:rgba(255,255,255,.13); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--white); font-family:"Montserrat Variable",Montserrat,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,a,summary { -webkit-tap-highlight-color:transparent; }
svg { display:block; }
.mmaer-site { overflow:hidden; }
.mmaer-site .section { padding:110px max(54px,calc((100vw - 1372px)/2)); }
.standard-content { min-height:80vh; max-width:960px; margin:0 auto; padding:130px 28px 80px; color:var(--ink); background:var(--cream); }
.standard-content h1 { color:var(--burgundy); }

.site-header { position:absolute; z-index:20; inset:0 0 auto; height:96px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:30px; max-width:1480px; margin:auto; padding:0 54px; border-bottom:1px solid var(--line); }
.admin-bar .site-header { top:32px; }
.brand { display:inline-flex; align-items:center; gap:13px; width:max-content; }
.brand-mark,.scope-logo { background-image:url("assets/images/brand-logo.png"); background-repeat:no-repeat; background-position:50% 48%; background-size:168%; border-radius:50%; }
.brand-mark { width:54px; height:54px; flex:0 0 auto; border:1px solid rgba(255,255,255,.22); box-shadow:0 10px 32px rgba(0,0,0,.28); }
.brand-copy { display:flex; flex-direction:column; line-height:1.05; }
.brand-copy strong { font-size:20px; text-transform:uppercase; letter-spacing:.06em; }
.brand-copy span { margin-top:5px; color:#e3c9d7; font-size:10px; text-transform:uppercase; letter-spacing:.15em; }
.desktop-nav { display:flex; align-items:center; gap:32px; color:#decbd4; font-size:13px; }
.desktop-nav a { position:relative; padding:39px 0; }
.desktop-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:27px; height:2px; background:var(--pink); transition:right .2s ease; }
.desktop-nav a:hover::after,.desktop-nav a:focus-visible::after { right:0; }
.header-call { justify-self:end; display:flex; align-items:center; gap:11px; font-size:17px; font-weight:800; letter-spacing:.02em; }
.header-call svg { width:32px; height:32px; padding:7px; color:var(--pink); border:1px solid rgba(232,90,158,.5); border-radius:50%; }
.header-call span { display:flex; flex-direction:column; }
.header-call small { color:var(--muted); font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.18em; margin-bottom:3px; }

.hero { position:relative; min-height:790px; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.04fr) minmax(480px,.96fr); align-items:center; gap:54px; padding:150px max(54px,calc((100vw - 1372px)/2)) 88px; background:radial-gradient(circle at 71% 54%,rgba(176,78,137,.24),transparent 29%),linear-gradient(116deg,#16070f 0%,#2e0b18 52%,#210914 100%); }
.admin-bar .hero { padding-top:182px; }
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.05) 50%,transparent 50.2%); pointer-events:none; }
.hero-grid { position:absolute; inset:0 0 0 45%; opacity:.12; background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size:44px 44px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000); mask-image:linear-gradient(90deg,transparent,#000 25%,#000); }
.hero-glow { position:absolute; width:420px; height:420px; right:9%; top:24%; border-radius:50%; border:1px solid rgba(232,90,158,.22); box-shadow:0 0 0 48px rgba(176,78,137,.035),0 0 0 96px rgba(176,78,137,.02); }
.hero-content,.hero-visual { position:relative; z-index:2; }
.hero-content { max-width:710px; }
.eyebrow,.kicker { display:flex; align-items:center; gap:12px; margin:0 0 26px; color:#e9c8da; font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.eyebrow span { width:36px; height:2px; background:var(--pink); }
.mmaer-site h1 { margin:0; max-width:750px; font-size:clamp(54px,5.5vw,88px); line-height:.95; letter-spacing:-.055em; text-transform:uppercase; }
.mmaer-site h1 em { display:inline-block; color:var(--pink); font-style:normal; }
.hero-lede { max-width:630px; margin:28px 0 0; color:#d7c6ce; font-size:19px; line-height:1.7; }
.hero-actions { display:flex; flex-wrap:wrap; gap:13px; margin-top:38px; }
.primary-button,.secondary-button,.whatsapp-button { min-height:58px; display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:0 24px; border-radius:5px; font-size:14px; font-weight:800; transition:transform .18s ease,background .18s ease; }
.primary-button { background:var(--pink); color:#200711; box-shadow:0 12px 32px rgba(232,90,158,.22); }
.primary-button:hover,.secondary-button:hover,.whatsapp-button:hover { transform:translateY(-2px); }
.primary-button svg { width:22px; height:22px; }
.secondary-button { border:1px solid rgba(255,255,255,.28); color:#fff; }
.secondary-button svg,.whatsapp-button svg,.text-link svg,.reviews-head>a svg,.service-card a svg { width:19px; height:19px; transition:transform .18s ease; }
.secondary-button:hover svg,.whatsapp-button:hover svg,.text-link:hover svg,.reviews-head>a:hover svg,.service-card a:hover svg { transform:translateX(3px); }
.hero-proof { display:flex; align-items:center; gap:16px; margin-top:44px; }
.stars { display:flex; gap:3px; color:#f1be40; }
.stars svg { width:16px; height:16px; }
.hero-proof p { margin:0; padding-left:15px; border-left:1px solid rgba(255,255,255,.19); }
.hero-proof strong,.hero-proof span { display:block; }
.hero-proof strong { font-size:13px; }
.hero-proof span { margin-top:5px; color:var(--muted); font-size:11px; }
.hero-visual { display:flex; justify-content:flex-end; }
.scope-card { width:min(100%,620px); transform:perspective(1000px) rotateY(-3deg); border:1px solid rgba(255,255,255,.19); border-radius:8px; background:rgba(16,4,11,.82); box-shadow:-36px 34px 80px rgba(0,0,0,.42),0 0 70px rgba(176,78,137,.12); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); overflow:hidden; }
.scope-top { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; border-bottom:1px solid rgba(255,255,255,.11); color:#cbb5bf; font-size:10px; letter-spacing:.16em; }
.scope-top b { color:#74cf9a; font-size:9px; font-weight:700; }
.scope-screen { position:relative; height:360px; display:flex; align-items:center; justify-content:center; overflow:hidden; background-image:linear-gradient(rgba(232,90,158,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(232,90,158,.08) 1px,transparent 1px); background-size:30px 30px; }
.scope-screen::after { content:""; position:absolute; inset:0; background:radial-gradient(circle,transparent 0 26%,rgba(15,3,10,.35) 70%); }
.scope-screen>svg { position:absolute; z-index:1; inset:0; width:100%; height:100%; }
.trace,.trace-shadow { fill:none; stroke-linejoin:round; stroke-linecap:round; }
.trace { stroke:#f357a0; stroke-width:2.4; filter:drop-shadow(0 0 7px #e85a9e); }
.trace-shadow { stroke:rgba(255,255,255,.18); stroke-width:8; }
.scope-logo { position:relative; z-index:3; width:230px; height:230px; box-shadow:0 14px 50px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.15); }
.scope-bottom { min-height:58px; display:flex; align-items:center; justify-content:space-around; border-top:1px solid rgba(255,255,255,.11); color:#bfaab4; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.scope-bottom span { display:flex; align-items:center; gap:7px; }
.scope-bottom i { width:5px; height:5px; background:var(--pink); border-radius:50%; box-shadow:0 0 8px var(--pink); }

.trust-strip { position:relative; z-index:3; display:grid; grid-template-columns:repeat(3,1fr); max-width:1372px; margin:-48px auto 0; background:var(--white); color:var(--ink); box-shadow:0 22px 55px rgba(0,0,0,.18); }
.trust-strip>div { min-height:126px; display:grid; grid-template-columns:44px 1fr; align-items:center; gap:18px; padding:25px 34px; border-right:1px solid #e5dce0; }
.trust-strip>div:last-child { border-right:0; }
.trust-strip>div>span { color:var(--raspberry); font-size:12px; font-weight:900; letter-spacing:.1em; }
.trust-strip p { margin:0; color:#6d5b64; font-size:13px; line-height:1.5; }
.trust-strip strong { display:block; margin-bottom:7px; color:var(--ink); font-size:15px; }

.services,.reviews,.faq { background:var(--cream); color:var(--ink); }
.services { padding-top:150px; }
.section-heading,.reviews-head { display:grid; grid-template-columns:1.15fr .85fr; align-items:end; gap:60px; margin-bottom:58px; }
.kicker { color:var(--raspberry); margin-bottom:18px; }
.kicker::before { content:""; width:34px; height:2px; background:currentColor; }
.kicker.light { color:#e6bad2; }
.mmaer-site h2 { margin:0; font-size:clamp(42px,4.5vw,70px); line-height:1; letter-spacing:-.045em; text-transform:uppercase; }
.section-heading>p,.faq-intro>p { max-width:560px; margin:0 0 6px; color:#786670; font-size:16px; line-height:1.8; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #d9cdd3; border-left:1px solid #d9cdd3; }
.service-card { position:relative; min-height:365px; padding:38px 34px; border-right:1px solid #d9cdd3; border-bottom:1px solid #d9cdd3; transition:background .2s ease,transform .2s ease; }
.service-card:hover { z-index:2; background:#fff; box-shadow:0 18px 50px rgba(46,11,24,.09); transform:translateY(-3px); }
.service-card>svg { width:53px; height:53px; color:var(--raspberry); margin:18px 0 28px; }
.service-number { float:right; color:#aa99a1; font-size:10px; font-weight:900; letter-spacing:.14em; }
.service-card h3 { margin:0 0 15px; font-size:20px; letter-spacing:-.02em; text-transform:uppercase; }
.service-card p { margin:0; color:#76656d; font-size:13px; line-height:1.75; }
.service-card a { position:absolute; left:34px; bottom:32px; display:flex; align-items:center; gap:8px; color:var(--raspberry); font-size:12px; font-weight:800; }

@media (min-width:821px) {
  .service-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .service-card { grid-column:span 2; }
  .service-card:nth-last-child(-n+2) { grid-column:span 3; }
}

.why { display:grid; grid-template-columns:1fr minmax(440px,.8fr); align-items:center; gap:110px; background:linear-gradient(120deg,#250914,#3b0d21); }
.why-copy>p:not(.kicker) { max-width:610px; margin:28px 0; color:#d2bdc7; font-size:16px; line-height:1.8; }
.why-copy ul { display:grid; gap:15px; list-style:none; margin:30px 0 36px; padding:0; }
.why-copy li { display:flex; align-items:flex-start; gap:13px; color:#f3e7ed; font-size:13px; line-height:1.5; }
.why-copy li span { display:grid; place-items:center; width:22px; height:22px; color:var(--pink); border:1px solid rgba(232,90,158,.45); border-radius:50%; font-size:11px; }
.text-link { display:inline-flex; align-items:center; gap:10px; color:var(--pink); font-size:13px; font-weight:800; }
.text-link.dark { color:var(--burgundy); }
.diagnostic-panel { border:1px solid rgba(255,255,255,.16); background:#16070f; box-shadow:0 30px 80px rgba(0,0,0,.3); }
.panel-head { height:55px; display:flex; align-items:center; justify-content:space-between; padding:0 25px; border-bottom:1px solid rgba(255,255,255,.12); color:#bda8b1; font-size:10px; letter-spacing:.14em; }
.panel-head b { color:#74cf9a; }
.panel-row { min-height:112px; display:grid; grid-template-columns:42px 1fr; align-items:center; gap:20px; padding:20px 25px; border-bottom:1px solid rgba(255,255,255,.1); }
.panel-row>span { color:var(--pink); font-size:12px; font-weight:900; }
.panel-row b,.panel-row small { display:block; }
.panel-row b { margin-bottom:7px; font-size:19px; text-transform:uppercase; }
.panel-row small { color:#bcaab2; font-size:12px; line-height:1.6; }
.panel-status { padding:19px 25px; color:#d9c3ce; font-size:9px; letter-spacing:.13em; }
.panel-status i { display:inline-block; width:7px; height:7px; margin-right:9px; background:#74cf9a; border-radius:50%; box-shadow:0 0 10px #74cf9a; }

.reviews-head>a { justify-self:end; display:flex; align-items:center; gap:9px; color:var(--burgundy); font-size:12px; font-weight:800; }
.review-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.mmaer-site blockquote { margin:0; padding:42px; background:#fff; border-top:3px solid var(--raspberry); box-shadow:0 15px 50px rgba(46,11,24,.06); }
.quote-stars { color:#e7aa24; letter-spacing:.15em; font-size:14px; }
.mmaer-site blockquote p { margin:24px 0 32px; color:#27101b; font-size:19px; font-weight:600; line-height:1.65; }
.mmaer-site blockquote footer { display:flex; justify-content:space-between; color:#8e7c85; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.mmaer-site blockquote footer span { color:var(--raspberry); }

.areas { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:100px; background:var(--ink); }
.areas>div>p:not(.kicker) { max-width:570px; margin:28px 0 34px; color:#c9b4be; font-size:15px; line-height:1.8; }
.area-list { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid rgba(255,255,255,.14); }
.area-list span { min-height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; border-bottom:1px solid rgba(255,255,255,.14); color:#eadce3; font-size:13px; font-weight:700; }
.area-list span:nth-child(odd) { border-right:1px solid rgba(255,255,255,.14); }
.area-list i { color:var(--pink); font-style:normal; }

.faq { display:grid; grid-template-columns:.78fr 1.22fr; align-items:start; gap:95px; }
.faq-intro { position:sticky; top:35px; }
.faq-intro>p { margin:27px 0 30px; }
.faq-list { border-top:1px solid #cfc1c8; }
.mmaer-site details { border-bottom:1px solid #cfc1c8; }
.mmaer-site summary { position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:86px; cursor:pointer; list-style:none; font-size:15px; font-weight:800; }
.mmaer-site summary::-webkit-details-marker { display:none; }
.mmaer-site summary span { display:grid; place-items:center; width:30px; height:30px; flex:0 0 auto; border:1px solid #b5a3ac; border-radius:50%; color:var(--raspberry); transition:transform .2s ease; }
.mmaer-site details[open] summary span { transform:rotate(45deg); }
.mmaer-site details p { margin:-6px 45px 27px 0; color:#75636c; font-size:13px; line-height:1.75; }

.final-cta { display:grid; grid-template-columns:1fr auto; align-items:center; gap:60px; padding:80px max(54px,calc((100vw - 1372px)/2)); background:linear-gradient(100deg,#400f24,#2b0918); border-top:1px solid rgba(255,255,255,.12); }
.final-cta h2 { font-size:clamp(38px,4vw,60px); }
.final-cta>div>p:not(.kicker) { max-width:700px; margin:22px 0 0; color:#d2bdc7; font-size:14px; line-height:1.7; }
.cta-actions { display:grid; gap:10px; min-width:285px; }
.primary-button.large { min-height:66px; font-size:18px; }
.whatsapp-button { min-height:54px; border:1px solid rgba(255,255,255,.25); }
.mmaer-site .footer { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:30px; padding:45px max(54px,calc((100vw - 1372px)/2)); background:#10050b; }
.footer-brand { display:flex; align-items:center; gap:13px; }
.footer-brand>div { display:flex; flex-direction:column; }
.footer-brand strong { text-transform:uppercase; letter-spacing:.05em; }
.footer-brand>div span { margin-top:4px; color:#bdaab3; font-size:9px; text-transform:uppercase; letter-spacing:.12em; }
.mmaer-site .footer>p { color:#9d8992; font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.footer-links { display:flex; gap:24px; color:#e5d5dc; font-size:11px; font-weight:700; }
.mmaer-site .footer>small { grid-column:1/-1; padding-top:25px; border-top:1px solid rgba(255,255,255,.09); color:#806e77; font-size:9px; }
.mobile-contact-bar { display:none; }

@media (max-width:1080px) {
  .mmaer-site .section { padding:90px 30px; }
  .site-header { grid-template-columns:1fr auto; padding:0 30px; }
  .desktop-nav { display:none; }
  .hero { grid-template-columns:1fr; gap:56px; padding:155px 30px 100px; }
  .admin-bar .hero { padding-top:187px; }
  .hero-content { max-width:820px; }
  .hero-visual { justify-content:center; }
  .scope-card { width:min(680px,100%); transform:none; }
  .trust-strip { margin:0; }
  .why { gap:55px; }
  .final-cta { padding:70px 30px; }
  .mmaer-site .footer { padding:40px 30px; }
}

@media (max-width:820px) {
  .section-heading,.reviews-head,.why,.areas,.faq,.final-cta { grid-template-columns:1fr; }
  .section-heading,.reviews-head { align-items:start; gap:28px; }
  .service-grid { grid-template-columns:1fr 1fr; }
  .why { gap:50px; }
  .diagnostic-panel { max-width:620px; }
  .review-grid { grid-template-columns:1fr; }
  .areas { gap:55px; }
  .faq { gap:50px; }
  .faq-intro { position:static; }
  .final-cta { gap:35px; }
  .cta-actions { min-width:0; max-width:360px; }
  .mmaer-site .footer { grid-template-columns:1fr; }
  .mmaer-site .footer>p { display:none; }
  .mmaer-site .footer>small { grid-column:auto; }
}

@media (max-width:782px) {
  .admin-bar .site-header { top:46px; }
  .admin-bar .hero { padding-top:201px; }
}

@media (max-width:720px) {
  body { padding-bottom:64px; }
  .mmaer-site .section { padding:72px 20px; }
  .site-header { height:80px; padding:0 18px; }
  .brand-mark { width:46px; height:46px; }
  .brand-copy strong { font-size:16px; }
  .brand-copy span { font-size:8px; max-width:170px; }
  .header-call span { display:none; }
  .header-call svg { width:40px; height:40px; padding:9px; }
  .hero { min-height:auto; padding:125px 20px 70px; }
  .admin-bar .hero { padding-top:171px; }
  .hero::before,.hero-glow { display:none; }
  .eyebrow { font-size:10px; letter-spacing:.13em; }
  .mmaer-site h1 { font-size:clamp(44px,14vw,64px); }
  .mmaer-site h2 { font-size:clamp(38px,12vw,52px); }
  .hero-lede { font-size:16px; line-height:1.6; }
  .hero-actions { display:grid; }
  .primary-button,.secondary-button { width:100%; }
  .hero-proof { align-items:flex-start; }
  .hero-proof p { padding-left:12px; }
  .scope-screen { height:280px; }
  .scope-logo { width:180px; height:180px; }
  .scope-bottom { display:grid; grid-template-columns:1fr; gap:8px; padding:15px 22px; }
  .trust-strip { grid-template-columns:1fr; }
  .trust-strip>div { min-height:108px; border-right:0; border-bottom:1px solid #e5dce0; padding:22px 24px; }
  .services { padding-top:76px; }
  .service-grid { grid-template-columns:1fr; }
  .service-card { min-height:335px; }
  .mmaer-site blockquote { padding:30px 25px; }
  .mmaer-site blockquote p { font-size:16px; }
  .area-list { grid-template-columns:1fr; }
  .area-list span:nth-child(odd) { border-right:0; }
  .reviews-head>a { justify-self:start; }
  .final-cta { padding:65px 20px; }
  .mmaer-site .footer { padding:40px 20px; }
  .footer-links { flex-wrap:wrap; }
  .mobile-contact-bar { position:fixed; z-index:100000; left:0; right:0; bottom:0; height:64px; display:grid; grid-template-columns:1fr 1fr; background:#14060d; border-top:1px solid rgba(255,255,255,.16); box-shadow:0 -10px 25px rgba(0,0,0,.28); }
  .mobile-contact-bar a { display:flex; align-items:center; justify-content:center; gap:9px; font-size:13px; font-weight:800; }
  .mobile-contact-bar a:first-child { background:var(--pink); color:#210812; }
  .mobile-contact-bar a:last-child { border-left:1px solid rgba(255,255,255,.13); }
  .mobile-contact-bar svg { width:19px; height:19px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition-duration:.01ms!important; }
}