/* London Sparky - navy accent override (loaded after Webflow CSS).
   Preserves layout/typography/animation; retints brand accents only. */
:root{
  --ls-blue:#0b1324;
  --ls-blue-deep:#07101f;
  --ls-navy:#0b1324;
  --ls-navy-panel:#0f3156;
  --ls-gold:#ffa12e;
  --ls-gold-deep:#d67b08;
  --ls-ink:#0c1322;
}

/* Top emergency bar: navy with white text */
.top-bar-area,
.top-header{background-color:var(--ls-blue) !important;}
.top-bar-area,
.top-bar-area .top-header,
.top-bar-area .top-bar-location,
.top-bar-area .top-bar-item,
.top-bar-area .top-bar-phone,
.top-bar-area .text-neutral-04,
.top-bar-area a{color:#ffffff !important;}
.top-bar-area a:hover{color:#dbe7ff !important;}
.top-bar-area .location-icon{filter:brightness(0) invert(1);}
.top-bar-area{
  border-radius:0 0 12px 12px;
  overflow:hidden;
}

/* Hero sits behind absolute header — template margin-top:56px left white body visible
   under the top bar (worse at rounded bottom corners). Pull hero flush to top. */
.hero-section{margin-top:0 !important;}

/* Top-bar radius exposes body white in corner notches — match page ink */
body{background-color:var(--ls-ink);}

/* Extend header-zone gradient so nav stays readable over hero image */
.hero-section .hero-bg-top{
  top:-72px;
  height:210px;
  background-image:linear-gradient(180deg,rgba(12,19,34,.6) 0%,rgba(12,19,34,.28) 55%,rgba(12,19,34,0) 100%);
}

/* Shift hero media up so roof/sky line sits behind nav, not pale sky band */
.hero-section .hero-image{
  top:-72px;
  height:calc(100% + 72px);
  object-position:50% 58%;
}
.hero-section .hero-bg-left{
  top:-72px;
  height:calc(100% + 72px);
}

.banner-section{
  position:relative;
  overflow:hidden;
  background-image:linear-gradient(90deg,rgba(11,19,36,.92) 0%,rgba(11,19,36,.72) 46%,rgba(11,19,36,.2) 100%),url("../images/generated/hero-inner-electrician.png") !important;
  background-size:cover !important;
  background-position:center right !important;
  color:#ffffff !important;
}

.banner-section :is(.banner-title, .banner-paragraph){
  color:#ffffff !important;
}

/* Tablet: restore content offset formerly provided by the 56px margin */
@media screen and (min-width:480px) and (max-width:991px){
  .hero-section{padding-top:calc(150px + 56px) !important;}
}

.hero-section .hero-text-block{
  padding-top:48px;
}

@media screen and (max-width:767px){
  .hero-section .hero-text-block{
    padding-top:28px;
  }
}

/* Preserve the template's authority gold as the accent layer */
[style*="#ffa12e"]{background-color:var(--ls-gold) !important; color:var(--ls-navy) !important;}

/* Primary CTA buttons: keep shape/animation, swap fill to navy + white label */
a.button:not([data-wf--button--variant="link"]),
.button.w-button:not([data-wf--button--variant="link"]),
.primary-button, .btn-primary,
.button:not(.button-secondary):not([data-wf--button--variant="link"]),
[class*="button-primary"]{
  background-color:var(--ls-blue) !important;
  border-color:var(--ls-blue) !important;
  color:#ffffff !important;
}
.button:not([data-wf--button--variant="link"]) .button-bg,
.button.submit{
  background-color:var(--ls-blue) !important;
}
a.button:not([data-wf--button--variant="link"]):hover,
.button.w-button:not([data-wf--button--variant="link"]):hover,
.primary-button:hover{
  background-color:var(--ls-blue-deep) !important;
  border-color:var(--ls-blue-deep) !important;
  color:#ffffff !important;
}
.button:not([data-wf--button--variant="link"]):hover .button-bg,
.button.submit:hover{
  background-color:var(--ls-blue-deep) !important;
}

/* Accent flourishes: eyebrow labels / highlight chips / icon tints */
.section-tagline, .eyebrow, .subtitle-tag{color:var(--ls-gold) !important;}

.section-subtitle-wrapper,
.section-subtitle,
.step-number,
.rating-value,
.review-link{
  color:var(--ls-gold) !important;
}

.subtitle-icon,
.location-icon,
.button-icon-normal,
.button-icon-hover,
.stat-icon,
.contact-info-icon,
.social-icon,
.star-icon,
.slider-arrow-embed{
  filter:brightness(0) saturate(100%) invert(70%) sepia(88%) saturate(1061%) hue-rotate(335deg) brightness(101%) contrast(101%) !important;
}

.badge-icon-wrapper,
.stat-icon-wrapper,
.arrow-wrapper,
.play-pause-button{
  background-color:var(--ls-gold) !important;
}

.badge-icon,
.google-icon{
  filter:brightness(0) saturate(100%) invert(8%) sepia(44%) saturate(1067%) hue-rotate(183deg) brightness(88%) contrast(102%) !important;
}

.process-card .arrow-wrapper{
  box-shadow:0 0 0 10px var(--ls-navy) !important;
}

/* Restore the authority strip to the original exported treatment. */
.google-rating-section{
  background-color:var(--_colors---colors--neutral-02) !important;
}

.google-rating-section .google-rating-bg{
  display:block !important;
  filter:none !important;
}

.google-rating-section .google-rating-wrapper,
.google-rating-section .google-rating-block,
.google-rating-section .google-rating-block :is(div, a){
  color:var(--ls-navy) !important;
}

.google-rating-section .star-icon{
  filter:brightness(0) saturate(100%) invert(70%) sepia(88%) saturate(1061%) hue-rotate(335deg) brightness(101%) contrast(101%) !important;
}

/* Who We Are: navy label and icon on the gold field. */
.who-we-are-section .about-section-title-wrapper .section-subtitle,
.who-we-are-section .about-section-title-wrapper .section-subtitle-wrapper{
  color:var(--ls-navy) !important;
}

.who-we-are-section .about-section-title-wrapper .subtitle-icon{
  filter:brightness(0) saturate(100%) invert(8%) sepia(44%) saturate(1067%) hue-rotate(183deg) brightness(88%) contrast(102%) !important;
}

/* Replace exported stat SVGs with new navy CSS icons. */
.who-we-are-section .stats-card .stat-icon{
  display:none !important;
}

.who-we-are-section .stats-card .stat-icon-wrapper{
  position:relative;
  background-color:rgba(255,255,255,.22) !important;
}

.who-we-are-section .stats-card .stat-icon-wrapper::before,
.who-we-are-section .stats-card .stat-icon-wrapper::after{
  content:"";
  position:absolute;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  display:block;
}

.who-we-are-section .stats-card:nth-child(1) .stat-icon-wrapper::before{
  width:16px;
  height:20px;
  border-radius:999px 999px 4px 4px;
  background:var(--ls-navy);
  box-shadow:0 12px 0 -7px var(--ls-navy), -7px 17px 0 -9px var(--ls-navy), 7px 17px 0 -9px var(--ls-navy);
}

.who-we-are-section .stats-card:nth-child(1) .stat-icon-wrapper::after{
  width:8px;
  height:8px;
  border-radius:50%;
  border:2px solid var(--ls-gold);
}

.who-we-are-section .stats-card:nth-child(2) .stat-icon-wrapper::before{
  width:23px;
  height:17px;
  background:var(--ls-navy);
  clip-path:polygon(50% 0,100% 42%,86% 42%,86% 100%,14% 100%,14% 42%,0 42%);
}

.who-we-are-section .stats-card:nth-child(2) .stat-icon-wrapper::after{
  width:7px;
  height:8px;
  background:var(--ls-gold);
  border-radius:2px 2px 0 0;
  transform:translate(-50%,2px);
}

.who-we-are-section .stats-card:nth-child(3) .stat-icon-wrapper::before{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--ls-navy);
  box-shadow:-9px 5px 0 -2px var(--ls-navy), 9px 5px 0 -2px var(--ls-navy);
}

.who-we-are-section .stats-card:nth-child(3) .stat-icon-wrapper::after{
  width:28px;
  height:13px;
  border-radius:14px 14px 5px 5px;
  background:var(--ls-navy);
  transform:translate(-50%,3px);
}

.who-we-are-section .stats-card:nth-child(4) .stat-icon-wrapper::before{
  width:18px;
  height:24px;
  border-radius:3px;
  background:var(--ls-navy);
  clip-path:polygon(0 0,72% 0,100% 28%,100% 100%,0 100%);
}

.who-we-are-section .stats-card:nth-child(4) .stat-icon-wrapper::after{
  width:12px;
  height:7px;
  border-left:3px solid var(--ls-gold);
  border-bottom:3px solid var(--ls-gold);
  transform:translate(-50%,-35%) rotate(-45deg);
}

.reviews-section-01{
  background-color:var(--ls-navy) !important;
}

.reviews-section-01 .section-title-wrapper :is(.section-subtitle, .section-title){
  color:#ffffff !important;
}

/* Services page title block: keep the heading readable on the dark panel */
.services-section .section-title-wrapper :is(h1, h2, h3, h4, h5, h6, p, span, a){
  color:#ffffff !important;
}

/* Homepage dark panels: white section labels and titles */
.services-section .section-title-wrapper :is(.section-subtitle, .section-title),
.process-section .section-title-wrapper :is(.section-subtitle, .section-title){
  color:#ffffff !important;
}

/* Blog panel sits on navy, so all readable copy in this section needs to be white. */
.blog-section,
.blog-section :is(.section-subtitle, .section-title, .post-date, .blog-title, .blog-excerpt, .button, .button-text){
  color:#ffffff !important;
}
.blog-section a:hover{
  color:#dbe7ff !important;
}

/* Links on hover use the deep blue for an electric feel */
a:hover{color:var(--ls-blue-deep);}

/* Nav links: pill hover and active states */
.nav-menu .nav-link{
  display:inline-block;
  padding:6px 14px !important;
  border-radius:9999px;
  background-color:transparent;
  transition:background-color .2s ease,color .2s ease,opacity .2s ease;
  text-decoration:none;
}

/* Hover: subtle semi-transparent white pill (works on hero + inner page banners) */
.nav-menu .nav-link:hover:not(.w--current){
  background-color:rgba(255,255,255,.14) !important;
  color:#ffffff !important;
  opacity:1 !important;
}

/* Active/current page: filled navy pill */
.nav-menu .nav-link.w--current,
.nav-menu .nav-link.w--current:hover{
  background-color:var(--ls-blue) !important;
  color:#ffffff !important;
  opacity:1 !important;
}
.nav-menu .nav-link.w--current:hover{
  background-color:var(--ls-blue-deep) !important;
}

.nav-menu .nav-link:focus-visible{
  outline:2px solid var(--ls-blue);
  outline-offset:2px;
}

/* Inline header nav: tighter spacing for 7 links on medium desktops */
@media screen and (min-width:992px) and (max-width:1279px){
  .nav-menu{gap:12px !important;}
  .navbar-wrapper{gap:24px !important;}
}

/* Review platform logos: crisp at card footer size */
.reviews-section-01 .brand-icon,
.reviews-card-list .brand-icon{
  width:auto;
  max-width:100px;
  height:22px;
  object-fit:contain;
  object-position:right center;
  opacity:.92;
}

/* Service card "Learn More" — text link with arrow (not solid CTA pill) */
.service-card .button[data-wf--button--variant="link"]{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  width:auto;
  height:auto;
  min-height:0;
  padding:6px 0;
  margin-top:2px;
  background:transparent !important;
  border:none !important;
  border-radius:0;
  box-shadow:none !important;
  color:var(--ls-gold) !important;
  font-size:15px;
  font-weight:600;
  line-height:1.4;
  text-transform:none;
  text-align:left;
  overflow:visible;
  transition:color .2s ease;
}
.service-card .button[data-wf--button--variant="link"]:hover{
  background:transparent !important;
  border-color:transparent !important;
  color:var(--ls-gold-deep) !important;
}
.service-card .button-bg{display:none !important;}
.service-card .button-text-wrapper{
  position:static;
  overflow:visible;
}
/* Webflow duplicates label for slide animation — hide hover copy */
.service-card .button-text.hover{display:none;}
.service-card .button-text.normal{
  text-decoration:underline;
  text-decoration-color:transparent;
  text-underline-offset:3px;
  transition:text-decoration-color .2s ease;
}
.service-card .button[data-wf--button--variant="link"]:hover .button-text.normal{
  text-decoration-color:currentColor;
}
.service-card .button-icon-right{
  width:16px;
  height:16px;
  flex-shrink:0;
  overflow:visible;
  transition:transform .2s ease;
}
.service-card .button-icon-hover{display:none;}
.service-card .button-icon-normal{
  display:block;
  width:16px;
  height:16px;
  /* Recolour template arrow to authority gold */
  filter:brightness(0) saturate(100%) invert(70%) sepia(88%) saturate(1061%) hue-rotate(335deg) brightness(101%) contrast(101%);
  transition:filter .2s ease;
}
.service-card .button[data-wf--button--variant="link"]:hover .button-icon-right{
  transform:translateX(4px);
}
.service-card .button[data-wf--button--variant="link"]:hover .button-icon-normal{
  filter:brightness(0) saturate(100%) invert(53%) sepia(96%) saturate(1014%) hue-rotate(8deg) brightness(99%) contrast(94%);
}
.service-card .button[data-wf--button--variant="link"]:focus-visible{
  outline:2px solid var(--ls-gold);
  outline-offset:3px;
  border-radius:4px;
}