/* TAB Electrical — styles */
:root {
  --navy: #0b1a3a;
  --navy-2: #12264f;
  --navy-3: #1b3366;
  --yellow: #ffd200;
  --yellow-dark: #e6b800;
  --white: #ffffff;
  --off: #f4f6fa;
  --ink: #0b1a3a;
  --muted: #5a6680;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(11, 26, 58, .15);
  --head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; font-family: var(--body); font-size: 18px; line-height: 1.6; color: var(--ink); background: var(--white); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0 0 1em; }
.wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
.center { text-align: center; margin-top: 44px; }
.small { font-size: .92rem; color: var(--muted); }
.light { color: rgba(255, 255, 255, .85); }

/* ---------- Headlines ---------- */
.headline { font-family: var(--head); font-weight: 900; text-transform: uppercase; line-height: .95; letter-spacing: .5px; }
.headline span { display: inline; }
.h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 18px; }
.white { color: var(--white); }
.yellow { color: var(--yellow); }
.navy { color: var(--navy); }
.yellow-on-light { color: var(--navy); background: linear-gradient(transparent 58%, var(--yellow) 58%, var(--yellow) 92%, transparent 92%); padding: 0 4px; }
.kicker { font-family: var(--head); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: 1rem; color: var(--muted); margin-bottom: 8px; }
.kicker::before { content: "⚡ "; color: var(--yellow-dark); }
.kicker-yellow { color: var(--yellow); }
.kicker-yellow::before { color: var(--yellow); }
.section-intro { font-size: 1.15rem; max-width: 640px; color: var(--muted); }
.section-intro.light { color: rgba(255,255,255,.82); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--head); font-weight: 800; text-transform: uppercase; letter-spacing: .5px; text-decoration: none; border-radius: 999px; padding: 12px 22px; font-size: 1.1rem; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-yellow { background: var(--yellow); color: var(--navy); box-shadow: 0 6px 0 var(--yellow-dark); }
.btn-yellow:hover { box-shadow: 0 8px 0 var(--yellow-dark); }
.btn-outline { border-color: var(--white); color: var(--white); background: transparent; }
.btn-outline:hover { background: rgba(255,255,255,.1); }
.btn-lg { font-size: 1.3rem; padding: 16px 28px; }
.btn-sm { font-size: 1rem; padding: 9px 18px; box-shadow: 0 4px 0 var(--yellow-dark); }
.btn-block { width: 100%; }
.btn svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; flex-direction: column; text-decoration: none; line-height: .85; }
.logo-tab { font-family: var(--head); font-weight: 900; font-size: 2.2rem; color: var(--white); letter-spacing: 1px; }
.logo-a { position: relative; display: inline-block; }
.logo-bolt { position: absolute; width: .55em; height: .55em; left: 50%; top: 52%; transform: translate(-50%, -50%); fill: var(--yellow); stroke: var(--navy); stroke-width: 1.2; }
.logo-elec { font-family: var(--head); font-weight: 800; font-size: .82rem; letter-spacing: 3.2px; color: var(--yellow); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(11, 26, 58, .97); backdrop-filter: blur(8px); border-bottom: 3px solid var(--yellow); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 0; }
.nav { display: flex; gap: 26px; }
.nav a { color: var(--white); text-decoration: none; font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 1.05rem; }
.nav a:hover { color: var(--yellow); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: radial-gradient(ellipse at 75% 40%, var(--navy-3) 0%, var(--navy) 60%); color: var(--white); padding: 60px 0 0; }
.bolt-bg { position: absolute; inset: 0; opacity: .06; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6z' fill='%23ffd200'/%3E%3C/svg%3E");
  background-size: 120px; transform: rotate(-8deg) scale(1.3); }
.hero-inner { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 30px; align-items: end; }
.hero-copy { padding-bottom: 70px; }
.eyebrow { font-family: var(--head); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--yellow); margin-bottom: 14px; }
.hero h1 { font-size: clamp(3.2rem, 8.5vw, 6.6rem); margin-bottom: 22px; }
.hero h1 span { display: block; }
.lead { font-size: 1.25rem; max-width: 560px; color: rgba(255,255,255,.88); margin-bottom: 28px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.hero-ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 600; }
.hero-sparky { position: relative; align-self: end; }
.sparky-tag { position: absolute; bottom: 24px; right: 10px; background: var(--yellow); color: var(--navy); font-family: var(--head); font-weight: 800; letter-spacing: 1px; padding: 6px 14px; border-radius: 6px; transform: rotate(-3deg); box-shadow: var(--shadow); }

/* ---------- Speech bubbles ---------- */
.bubble { position: relative; background: var(--white); color: var(--navy); font-family: var(--head); font-weight: 800; text-transform: uppercase; font-size: 1.35rem; line-height: 1.1; padding: 16px 20px; border-radius: 22px; box-shadow: var(--shadow); max-width: 260px; border: 3px solid var(--navy); }
.bubble::after { content: ""; position: absolute; width: 26px; height: 26px; background: var(--white); border-right: 3px solid var(--navy); border-bottom: 3px solid var(--navy); }
.bubble-hero { position: absolute; top: 8%; left: -10%; z-index: 2; transform: rotate(-4deg); }
.bubble-hero::after { bottom: -15px; right: 40px; transform: rotate(45deg); }
.bubble-left::after { left: -15px; top: 50%; transform: translateY(-50%) rotate(135deg); }

/* ---------- Trust strip ---------- */
.strip { background: var(--yellow); color: var(--navy); }
.strip-inner { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; padding: 20px 0; }
.strip-inner div { display: flex; flex-direction: column; border-right: 2px solid rgba(11,26,58,.15); }
.strip-inner div:last-child { border-right: 0; }
.strip strong { font-family: var(--head); font-weight: 900; font-size: 2.4rem; line-height: 1; }
.strip span { font-weight: 700; text-transform: uppercase; font-size: .85rem; letter-spacing: 1px; }

/* ---------- Sections ---------- */
.section { position: relative; overflow: hidden; padding: 96px 0; }
.section-navy { background: var(--navy); color: var(--white); }
.section-light { background: var(--off); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.step { background: var(--off); border-radius: var(--radius); padding: 30px; border-top: 6px solid var(--yellow); }
.step-num { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: var(--yellow); font-family: var(--head); font-weight: 900; font-size: 1.8rem; margin-bottom: 14px; }
.step h3 { font-family: var(--head); font-weight: 800; text-transform: uppercase; font-size: 1.6rem; margin-bottom: 8px; }
.step p { color: var(--muted); margin: 0; }
.bubble-banner { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 50px; }
.bubble-banner img { width: 150px; }
.bubble-banner .bubble { max-width: 380px; }

/* Services */
.services { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 44px; }
.service { background: var(--navy-2); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 24px 20px; transition: transform .2s ease, border-color .2s ease; }
.service:hover { transform: translateY(-4px); border-color: var(--yellow); }
.service svg { width: 48px; height: 48px; fill: none; stroke: var(--yellow); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px; }
.service h3 { font-family: var(--head); font-weight: 800; text-transform: uppercase; font-size: 1.35rem; line-height: 1.05; margin-bottom: 8px; }
.service p { font-size: .95rem; color: rgba(255,255,255,.75); margin: 0; }

/* Sparky */
.section-sparky { background: var(--off); }
.sparky-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; }
.sparky-photo { background: var(--navy); border-radius: 50% 50% var(--radius) var(--radius); padding: 30px 30px 0; border-bottom: 8px solid var(--yellow); }
.sparky-photo img { max-width: 360px; margin: 0 auto; }
.sparky-quotes { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.chip { background: var(--navy); color: var(--yellow); font-family: var(--head); font-weight: 800; text-transform: uppercase; padding: 8px 16px; border-radius: 999px; letter-spacing: .5px; }

/* About */
.about-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items: center; }
.about-copy p { color: rgba(255,255,255,.86); }
.name-story { background: var(--navy-2); border-left: 5px solid var(--yellow); padding: 16px 20px; border-radius: 0 var(--radius) var(--radius) 0; }
.about-photo img { border-radius: var(--radius); border: 4px solid var(--yellow); box-shadow: 0 20px 40px rgba(0,0,0,.35); transform: rotate(2deg); }

/* Sectors */
.sectors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px; }
.sector { border: 2px solid var(--navy); border-radius: var(--radius); padding: 26px; box-shadow: 6px 6px 0 var(--yellow); }
.sector-icon { font-size: 2.2rem; }
.sector h3 { font-family: var(--head); font-weight: 800; text-transform: uppercase; font-size: 1.6rem; margin: 6px 0; }
.sector p { color: var(--muted); margin: 0; font-size: .98rem; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.gallery figure { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 3 / 4; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption { position: absolute; left: 12px; bottom: 12px; background: var(--navy); color: var(--yellow); font-family: var(--head); font-weight: 800; text-transform: uppercase; padding: 6px 12px; border-radius: 6px; letter-spacing: .5px; }

/* Review */
.review-wrap { text-align: center; }
.review { max-width: 760px; margin: 30px auto 0; background: var(--navy-2); border-radius: var(--radius); padding: 40px; border: 2px solid var(--yellow); }
.stars { color: var(--yellow); font-size: 1.8rem; letter-spacing: 4px; margin-bottom: 12px; }
.review p { font-size: 1.25rem; font-style: italic; }
.review cite { font-family: var(--head); font-weight: 800; text-transform: uppercase; font-style: normal; letter-spacing: 1px; color: var(--yellow); }

/* Area */
.area-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.towns { list-style: none; padding: 0; margin: 20px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.towns li { background: var(--off); border: 1px solid #dfe4ee; padding: 6px 14px; border-radius: 999px; font-weight: 600; font-size: .95rem; }
.towns li:first-child { background: var(--yellow); border-color: var(--yellow); }
.radius { position: relative; aspect-ratio: 1; max-width: 420px; width: 100%; margin: 0 auto; }
.ring { position: absolute; border-radius: 50%; inset: 0; margin: auto; }
.r3 { width: 100%; height: 100%; background: var(--navy); }
.r2 { width: 68%; height: 68%; background: var(--navy-2); border: 2px dashed rgba(255,210,0,.5); }
.r1 { width: 36%; height: 36%; background: var(--navy-3); border: 2px dashed rgba(255,210,0,.7); }
.pin { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-size: 2.6rem; color: var(--yellow); }
.pin span { font-family: var(--head); font-weight: 900; font-size: 1.1rem; letter-spacing: 2px; color: var(--white); }
.rlabel { position: absolute; top: 6%; right: 12%; background: var(--yellow); color: var(--navy); font-family: var(--head); font-weight: 900; padding: 4px 12px; border-radius: 6px; font-size: 1.2rem; }

/* Contact */
.contact-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.big-phone { display: inline-block; font-family: var(--head); font-weight: 900; font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--yellow); text-decoration: none; margin: 10px 0 20px; }
.big-phone:hover { text-decoration: underline; }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.contact-list a { text-decoration: none; font-weight: 600; }
.contact-list a:hover { color: var(--yellow); }
.contact-form { background: var(--white); color: var(--ink); border-radius: var(--radius); padding: 32px; box-shadow: 0 20px 50px rgba(0,0,0,.35); border-top: 8px solid var(--yellow); }
.contact-form h3 { font-family: var(--head); font-weight: 900; text-transform: uppercase; font-size: 2rem; margin-bottom: 16px; }
.contact-form label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 14px; }
.contact-form input[type="text"], .contact-form input[type="tel"], .contact-form select, .contact-form textarea { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; font: inherit; font-size: 1rem; border: 2px solid #d5dbe6; border-radius: 10px; background: var(--off); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--navy); background: var(--white); }
.contact-form .consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: .88rem; color: var(--muted); }
.contact-form .consent input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.hidden-field { position: absolute; left: -9999px; }

/* Footer */
.site-footer { background: #071228; color: rgba(255,255,255,.8); padding: 60px 0 0; font-size: .95rem; }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.site-footer h4 { font-family: var(--head); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--yellow); font-size: 1.2rem; margin-bottom: 12px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--yellow); }
.logo-footer { margin-bottom: 14px; }
.footer-cta { font-family: var(--head); font-weight: 900; font-size: 1.5rem; color: var(--white); line-height: 1.15; }
.footer-cta a { color: var(--yellow); }
.footer-cta span { color: var(--yellow); font-size: 1.1rem; letter-spacing: 1px; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid rgba(255,255,255,.1); margin-top: 40px; padding: 20px 0 24px; font-size: .85rem; }

/* Mobile call bar */
.mobile-call { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .services { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .hero-inner, .sparky-grid, .about-grid, .area-grid, .contact-grid { grid-template-columns: 1fr; }
  .hero-copy { padding-bottom: 10px; }
  .bubble-hero { left: 0; top: 4%; font-size: 1.1rem; max-width: 200px; }
  .steps, .sectors { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .sparky-photo { max-width: 400px; margin: 0 auto; }
  .about-photo { max-width: 420px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-inner > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 17px; padding-bottom: 76px; }
  .section { padding: 70px 0; }
  .header-call span { display: none; }
  .header-call { padding: 10px 12px; }
  .strip-inner { grid-template-columns: 1fr 1fr; gap: 14px 0; }
  .strip-inner div:nth-child(2) { border-right: 0; }
  .steps, .sectors, .gallery, .services { grid-template-columns: 1fr; }
  .services { grid-template-columns: 1fr 1fr; gap: 12px; }
  .service { padding: 18px 14px; }
  .service h3 { font-size: 1.15rem; }
  .service p { font-size: .88rem; }
  .bubble-banner { flex-direction: row; gap: 14px; }
  .bubble-banner img { width: 90px; }
  .bubble-banner .bubble { font-size: 1.05rem; }
  .btn-lg { font-size: 1.1rem; padding: 14px 20px; width: 100%; }
  .footer-inner { grid-template-columns: 1fr; }
  .contact-form { padding: 24px; }
  .mobile-call { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--navy); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 3px solid var(--yellow); }
  .mobile-call .btn { width: 100%; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- Real logo + script accent ---------- */
.logo img { height: 46px; width: auto; }
.logo-footer img { height: 70px; }
.script { font-family: "Kaushan Script", cursive; color: var(--yellow); font-size: 2.6rem; line-height: 1; margin: 18px 0 0; transform: rotate(-4deg); display: inline-block; }
.script::after { content: ""; display: block; height: 3px; background: var(--yellow); border-radius: 3px; margin-top: 4px; transform: rotate(-1deg); }
.script-hero { position: absolute; bottom: 70px; left: -6%; font-size: 3rem; z-index: 2; text-shadow: 0 4px 16px rgba(0,0,0,.5); }

/* mobile overflow fixes */
.hero-inner > *, .contact-grid > *, .about-grid > *, .area-grid > *, .sparky-grid > * { min-width: 0; }
@media (max-width: 640px) {
  .hero h1 { font-size: clamp(2.4rem, 11.5vw, 3.4rem); }
  .eyebrow { font-size: .9rem; }
  .logo img { height: 38px; }
  .bubble-hero { top: 0; left: 0; max-width: 170px; font-size: 1rem; padding: 10px 14px; }
  .script-hero { display: none; }
  .hero-ctas .btn-outline { display: none; }
}

/* =====================================================
   INTERACTIVE LAYER
   ===================================================== */

/* Scroll reveal (only when JS is on) */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease var(--d, 0ms), transform .6s cubic-bezier(.2,.8,.2,1) var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* Neon flicker on CALL CHRIS */
.neon { animation: neon 2.6s ease-in both; text-shadow: 0 0 18px rgba(255,210,0,.55), 0 0 40px rgba(255,210,0,.25); }
@keyframes neon {
  0%, 18%, 22%, 26%, 54%, 58% { opacity: .15; text-shadow: none; }
  20%, 24%, 56%, 100% { opacity: 1; }
}

/* Hero Sparky */
.sparks { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hero-inner { z-index: 2; }
.hero-note { color: rgba(255,255,255,.7); font-weight: 600; margin: 0; }
.hero-note::before { content: "✅ "; }
.sparky-btn { position: relative; display: block; margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer; width: 100%; max-width: 440px; animation: bob 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.sparky-btn img { width: 100%; max-width: none; margin: 0; filter: drop-shadow(0 20px 30px rgba(0,0,0,.4)); transform-origin: 50% 90%;
  --tilt: 0deg; --lean: 0px; --lift: 0px;
  transform: translate(var(--lean), var(--lift)) rotate(var(--tilt)); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.sparky-btn:focus-visible { outline: 3px dashed var(--yellow); outline-offset: 6px; border-radius: 20px; }
.sparky-btn.bark img { animation: bark .55s cubic-bezier(.3,1.6,.5,1); }
.sparky-shadow { position: absolute; left: 18%; right: 18%; bottom: 2%; height: 22px; border-radius: 50%; background: rgba(0,0,0,.45); filter: blur(10px); animation: shadow 3.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@keyframes shadow { 0%, 100% { transform: scaleX(1); opacity: .5 } 50% { transform: scaleX(.85) translateY(10px); opacity: .3 } }
@keyframes bark {
  0% { transform: translate(var(--lean), var(--lift)) rotate(var(--tilt)) scale(1); }
  30% { transform: translate(var(--lean), calc(var(--lift) - 26px)) rotate(calc(var(--tilt) - 6deg)) scale(1.06, .96); }
  60% { transform: translate(var(--lean), var(--lift)) rotate(calc(var(--tilt) + 4deg)) scale(.97, 1.04); }
  100% { transform: translate(var(--lean), var(--lift)) rotate(var(--tilt)) scale(1); }
}
.pat-hint { position: absolute; bottom: 70px; left: 4%; color: var(--yellow); font-family: var(--head); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; font-size: 1rem; animation: hint 1.6s ease-in-out infinite; transition: opacity .4s; pointer-events: none; z-index: 3; }
.pat-hint.gone { opacity: 0; }
@keyframes hint { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
.bubble.pop { animation: pop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { 0% { transform: rotate(-4deg) scale(.6); opacity: 0 } 100% { transform: rotate(-4deg) scale(1); opacity: 1 } }
.bubble-hero { min-height: 84px; display: flex; align-items: center; }

/* Buttons */
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-3); }

/* ---------- What's bugging you ---------- */
.bugging { background: var(--off); }
.bug-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 36px; margin-top: 30px; align-items: stretch; }
.bug-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-content: start; }
.bug { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 108px; padding: 14px 10px; background: var(--white); border: 2px solid #dfe4ee; border-radius: var(--radius); font-family: var(--head); font-weight: 800; text-transform: uppercase; font-size: 1.02rem; line-height: 1.05; color: var(--navy); cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s, background .15s; }
.bug span { font-size: 1.9rem; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.bug:hover { transform: translateY(-3px); border-color: var(--navy); }
.bug:hover span { transform: scale(1.2) rotate(-8deg); }
.bug.active { background: var(--navy); color: var(--yellow); border-color: var(--navy); box-shadow: 0 6px 0 var(--yellow); }
.bug-panel { position: relative; background: var(--navy); color: var(--white); border-radius: 22px; padding: 34px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; border-bottom: 8px solid var(--yellow); }
.bug-panel::before { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(255,210,0,.25), transparent 70%); }
.bug-panel.swap .bug-fix { animation: slidein .4s ease; }
@keyframes slidein { from { opacity: 0; transform: translateX(16px) } to { opacity: 1; transform: none } }
.bug-sparky { display: flex; align-items: center; gap: 18px; }
.bug-sparky img { width: 130px; flex: none; transform-origin: 50% 90%; }
.bug-sparky img.nod { animation: nod .6s ease; }
@keyframes nod { 0%,100% { transform: rotate(0) } 25% { transform: rotate(-10deg) } 60% { transform: rotate(8deg) } }
.bubble-bug { transform: none; max-width: none; font-size: 1.3rem; }
.bubble-bug::after { left: -15px; top: 50%; transform: translateY(-50%) rotate(135deg); }
.bug-label { font-family: var(--head); font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--yellow); margin: 0 0 4px; }
.bug-fix h3 { font-family: var(--head); font-weight: 900; text-transform: uppercase; font-size: 2.3rem; line-height: 1; margin-bottom: 10px; }
.bug-fix p { color: rgba(255,255,255,.85); font-size: 1.1rem; }
.bug-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.bug-ctas .btn-navy { background: transparent; border-color: var(--white); }

/* ---------- Services: light up ---------- */
.service { position: relative; overflow: hidden; }
.service::before { content: ""; position: absolute; inset: -40% -40% auto auto; width: 160px; height: 160px; background: radial-gradient(circle, rgba(255,210,0,.35), transparent 70%); opacity: 0; transition: opacity .3s; }
.service:hover::before { opacity: 1; }
.service svg { transition: filter .25s, transform .3s cubic-bezier(.3,1.6,.5,1); stroke: #6f7ea3; }
.service:hover svg { stroke: var(--yellow); filter: drop-shadow(0 0 8px rgba(255,210,0,.9)); transform: scale(1.12) rotate(-6deg); }
.service:hover h3 { color: var(--yellow); }
.js .service.reveal.in svg { animation: flickon 1.2s ease var(--d) both; }
@keyframes flickon { 0%, 30%, 50% { stroke: #6f7ea3 } 40%, 60%, 100% { stroke: var(--yellow) } }

/* ---------- Sparky section ---------- */
.sway { animation: sway 4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes sway { 0%,100% { transform: rotate(-2deg) } 50% { transform: rotate(2deg) } }
.sparky-card { background: var(--white); border: 2px solid var(--navy); border-radius: var(--radius); padding: 20px 22px; box-shadow: 6px 6px 0 var(--yellow); margin: 22px 0; }
.card-title { font-family: var(--head); font-weight: 900; text-transform: uppercase; font-size: 1.3rem; margin-bottom: 10px; }
.sparky-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sparky-card li { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 12px; font-weight: 600; font-size: .95rem; }
.bar { display: block; height: 12px; background: var(--off); border-radius: 999px; overflow: hidden; position: relative; }
.bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--yellow); border-radius: 999px; transition: width 1.4s cubic-bezier(.2,.8,.2,1) .3s; }
.sparky-card.in .bar::after, html:not(.js) .bar::after { width: var(--w); }

/* About chips */
.sector-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.sector-chips span { background: var(--navy-2); border: 1px solid rgba(255,210,0,.4); padding: 8px 14px; border-radius: 999px; font-weight: 600; }

/* Review stars */
.stars span { display: inline-block; }
.review.in .stars span { animation: star .5s cubic-bezier(.3,1.6,.5,1) both; }
.review.in .stars span:nth-child(2) { animation-delay: .1s } .review.in .stars span:nth-child(3) { animation-delay: .2s }
.review.in .stars span:nth-child(4) { animation-delay: .3s } .review.in .stars span:nth-child(5) { animation-delay: .4s }
@keyframes star { from { transform: scale(0) rotate(-90deg) } to { transform: scale(1) rotate(0) } }

/* ---------- Radar ---------- */
.radar { position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; margin: 0 auto; border-radius: 50%; overflow: visible; }
.radar .ring { position: absolute; border-radius: 50%; inset: 0; margin: auto; }
.radar .r3 { width: 100%; height: 100%; background: var(--navy); box-shadow: 0 20px 50px rgba(11,26,58,.3); }
.radar .r2 { width: 66%; height: 66%; border: 2px dashed rgba(255,210,0,.35); }
.radar .r1 { width: 33%; height: 33%; border: 2px dashed rgba(255,210,0,.5); }
.sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255,210,0,.35), rgba(255,210,0,0) 60deg, transparent 360deg); animation: sweep 4s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg) } }
.radar-dots { position: absolute; inset: 0; }
.dot { position: absolute; transform: translate(-50%, -50%); }
.dot i { display: block; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.55); transition: all .25s; }
.dot em { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%) scale(.8); white-space: nowrap; font-style: normal; font-family: var(--head); font-weight: 800; text-transform: uppercase; font-size: .95rem; letter-spacing: .5px; background: var(--yellow); color: var(--navy); padding: 3px 9px; border-radius: 6px; opacity: 0; transition: all .25s; pointer-events: none; }
.dot.on i { background: var(--yellow); box-shadow: 0 0 0 6px rgba(255,210,0,.25), 0 0 18px var(--yellow); transform: scale(1.4); }
.dot.on em { opacity: 1; transform: translateX(-50%) scale(1); }
.dot.home i { width: 14px; height: 14px; background: var(--yellow); }
.radar-readout { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); background: var(--white); color: var(--navy); border: 2px solid var(--navy); border-radius: 999px; padding: 8px 18px; font-family: var(--head); font-weight: 800; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; box-shadow: var(--shadow); }
.towns button { background: var(--off); border: 1px solid #dfe4ee; padding: 6px 14px; border-radius: 999px; font: inherit; font-weight: 600; font-size: .95rem; color: var(--navy); cursor: pointer; transition: all .15s; }
.towns button:hover, .towns button.on { background: var(--yellow); border-color: var(--yellow); }
.towns li { background: none; border: 0; padding: 0; }
.towns li:first-child { background: none; }

/* Contact Sparky peeking */
.contact-copy { position: relative; }
.contact-sparky { width: 170px; margin-top: 30px; animation: bob 3.2s ease-in-out infinite; }

/* ---------- Scroll buddy ---------- */
.buddy { position: fixed; left: 18px; bottom: 18px; z-index: 70; display: flex; align-items: flex-end; gap: 8px; transform: translateY(160%); transition: transform .5s cubic-bezier(.3,1.4,.5,1); pointer-events: none; }
.buddy.show { transform: none; pointer-events: auto; }
.buddy-head { width: 92px; height: 92px; border-radius: 50%; border: 4px solid var(--yellow); background: var(--navy); padding: 6px 0 0; overflow: hidden; cursor: pointer; box-shadow: var(--shadow); flex: none; order: 1; }
.buddy-head img { width: 100%; transform: translateY(4px) scale(1.15); }
.buddy.peek .buddy-head img { animation: nod .7s ease .2s; }
.buddy-bubble { order: 2; position: relative; background: var(--white); color: var(--navy); border: 3px solid var(--navy); border-radius: 18px; padding: 10px 14px; font-family: var(--head); font-weight: 800; text-transform: uppercase; font-size: 1.05rem; line-height: 1.1; max-width: 220px; margin-bottom: 40px; box-shadow: var(--shadow); }
.buddy.peek .buddy-bubble { animation: pop2 .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop2 { from { transform: scale(.5); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.buddy-close { order: 3; position: absolute; left: 70px; top: -6px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--navy); background: var(--white); color: var(--navy); font-weight: 800; line-height: 1; cursor: pointer; }

@media (max-width: 900px) {
  .bug-grid { grid-template-columns: 1fr; }
  .sparky-btn { margin: 0 auto; max-width: 320px; }
  .pat-hint { left: auto; right: 4%; bottom: 60px; }
}
@media (max-width: 640px) {
  .bug-options { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .bug { min-height: 88px; font-size: .82rem; padding: 10px 6px; }
  .bug span { font-size: 1.5rem; }
  .bug-panel { padding: 24px; }
  .bug-sparky img { width: 90px; }
  .bubble-bug { font-size: 1.05rem; }
  .bug-fix h3 { font-size: 1.9rem; }
  .bug-ctas .btn { flex: 1; }
  .sparky-card li { grid-template-columns: 1fr; gap: 4px; }
  .buddy { left: 10px; bottom: 84px; }
  .buddy-head { width: 66px; height: 66px; }
  .buddy-bubble { font-size: .9rem; max-width: 170px; margin-bottom: 26px; }
  .buddy-close { left: 50px; }
  .dot em { font-size: .8rem; }
  .radar-readout { font-size: .85rem; }
  .hero-ctas .btn-outline { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .sparky-btn, .sparky-shadow, .sway, .sweep, .contact-sparky, .pat-hint, .neon { animation: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* fixes */
.strip strong .count { font-size: inherit; font-weight: inherit; text-transform: none; letter-spacing: 0; display: inline; }
.hero h1 { font-size: clamp(3rem, 7.4vw, 5.8rem); }
.bubble-hero { left: -2%; top: 4%; }
.pat-hint { bottom: 18px; left: 0; background: var(--navy); border: 2px solid var(--yellow); padding: 4px 12px; border-radius: 999px; font-size: .9rem; }
@media (max-width: 640px) { .hero h1 { font-size: clamp(2.4rem, 11.5vw, 3.4rem); } .pat-hint { left: 4%; right: auto; bottom: 14px; } }
@media (max-width: 640px) {
  .bug-ctas { flex-direction: column; }
  .bug-ctas .btn { flex: none; width: 100%; white-space: nowrap; }
}