:root{--bg:#253341;--panel:#2d3d4c;--soft:#344757;--text:#f5f8fb;--muted:#b7c2ce;--accent:#2f8ee5;--accent2:#62adf3;--line:#3a4a59;--max:1160px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#253341 0%,#2a3947 52%,#253341 100%);color:var(--text);line-height:1.6}.wrap{max-width:var(--max);margin:auto;padding:0 24px}.narrow{max-width:900px}header{position:sticky;top:0;z-index:20;background:rgba(31,43,54,.95);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}.nav{height:72px;display:flex;align-items:center;gap:22px}.logo{max-height:42px;max-width:150px}.brand{font-weight:900;letter-spacing:1px;color:#fff;text-decoration:none}.nav nav{display:flex;gap:22px;margin-left:auto}.nav nav a,a{color:inherit;text-decoration:none}.nav nav a:hover{color:var(--accent2)}section{padding:92px 0}.hero{padding:100px 0 76px;background:radial-gradient(circle at 80% 25%,rgba(47,142,229,.16) 0,transparent 34%)}.hero-grid,.form-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:center}.eyebrow{font-size:12px;font-weight:800;letter-spacing:2px;color:var(--accent2);margin-bottom:14px}h1{font-size:64px;line-height:1.02;margin:0 0 24px;letter-spacing:-2px}h1 span{color:var(--accent2)}h2{font-size:38px;line-height:1.15;margin:0 0 28px}h3{margin-top:0}.lead{font-size:20px;color:#d4dce5;max-width:680px}.smalllead{font-size:17px}.actions{display:flex;gap:12px;margin:30px 0}.btn{display:inline-block;border:0;border-radius:8px;padding:13px 20px;background:var(--accent);color:#07131e;font-weight:800;cursor:pointer;transition:.18s ease}.btn:hover{background:var(--accent2);transform:translateY(-1px)}.btn.small{padding:9px 14px}.btn.ghost{background:transparent;color:#eef7ff;border:1px solid #617487}.btn.ghost:hover{border-color:var(--accent2);color:#fff;background:rgba(47,142,229,.09)}.btn.disabled{opacity:.55;cursor:default;pointer-events:none}.stats{display:flex;gap:36px;margin-top:46px}.stats div{display:flex;flex-direction:column}.stats b{font-size:26px}.stats span,.muted{color:var(--muted);font-size:14px}.visual{min-height:430px}.placeholder{height:430px;border:1px solid #435364;border-radius:18px;background:linear-gradient(145deg,#2a3744,#202a34);display:flex;align-items:center;justify-content:center;text-align:center;color:#aab7c4;font-size:24px}.placeholder small{font-size:13px}.alt{background:rgba(15,25,34,.22)}.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}.badges span{border:1px solid var(--line);padding:8px 12px;border-radius:999px;color:#d8e1e9}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.cards article,.social-card{padding:24px;background:var(--soft);border:1px solid var(--line);border-radius:12px}.cards p,.social-card p{color:var(--muted);margin-bottom:0}.center{text-align:center}.social-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.social-card{display:flex;flex-direction:column;justify-content:space-between;min-height:230px}.social-card .btn{align-self:flex-start;margin-top:24px}.social-label{color:var(--accent2);font-weight:800;font-size:12px;letter-spacing:1.5px;text-transform:uppercase}.rating{font-size:46px;font-weight:900}.rating span{font-size:22px;color:var(--accent)}form{background:var(--panel);border:1px solid var(--line);padding:28px;border-radius:14px;box-shadow:0 18px 45px rgba(0,0,0,.12)}label{display:block;font-size:14px;font-weight:700;margin-bottom:14px}label small{font-weight:400;color:var(--muted)}input,textarea{width:100%;margin-top:6px;padding:12px;border-radius:7px;border:1px solid #526272;background:#1f2c38;color:#fff;font:inherit}input:focus,textarea:focus{outline:2px solid rgba(47,142,229,.32);border-color:var(--accent)}textarea{resize:vertical}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hp{position:absolute;left:-9999px}.form-note{font-size:12px;color:var(--muted);margin:12px 0 0}.location-grid{display:grid;grid-template-columns:1fr;gap:26px;align-items:stretch}.contact{display:grid;grid-template-columns:1fr 1fr;gap:12px}.contact div{padding:18px;border-left:2px solid var(--accent);display:flex;flex-direction:column;background:rgba(41,55,68,.45);border-radius:0 8px 8px 0}.contact span,.contact a{color:#d4dce5}.map-button{margin-top:22px}.map-wrap{width:100%;min-height:400px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--soft)}.map-wrap iframe{display:block;width:100%;height:100%;min-height:400px;border:0}footer{padding:28px 0;border-top:1px solid var(--line);color:var(--muted)}@media(max-width:850px){.nav nav{display:none}.nav .small{margin-left:auto}.hero-grid,.form-grid,.location-grid{grid-template-columns:1fr}.visual{display:none}h1{font-size:44px}.cards{grid-template-columns:1fr 1fr}.contact{grid-template-columns:1fr 1fr}}@media(max-width:650px){.social-grid{grid-template-columns:1fr}}@media(max-width:560px){section{padding:68px 0}.wrap{padding:0 18px}h1{font-size:38px}h2{font-size:31px}.stats{gap:18px;flex-wrap:wrap}.cards,.two,.contact{grid-template-columns:1fr}.actions{flex-direction:column;align-items:flex-start}}

.fb-preview{margin-top:16px;width:100%;max-width:500px;overflow:hidden;border-radius:10px;background:#fff;min-height:260px}.fb-preview iframe{display:block;width:100%;max-width:500px;height:260px;border:0}


/* v6 – social cards alignment */
.social-grid,
.social-cards,
.online-grid {
  align-items: stretch;
}

.social-card,
.online-card {
  min-height: 470px;
  display: flex;
  flex-direction: column;
}

.social-card .facebook-embed,
.social-card iframe[src*="facebook.com"],
.online-card iframe[src*="facebook.com"] {
  width: 100%;
  height: 370px !important;
  min-height: 370px;
  border: 0;
}

.social-card .btn,
.online-card .btn {
  margin-top: auto;
}

.social-card.google-card,
.online-card.google-card {
  justify-content: flex-start;
}

@media (max-width: 760px) {
  .social-card,
  .online-card {
    min-height: auto;
  }
  .social-card .facebook-embed,
  .social-card iframe[src*="facebook.com"],
  .online-card iframe[src*="facebook.com"] {
    height: 420px !important;
  }
}




/* v9 – Facebook plugin fallback only; dimensions are defined in HTML */
iframe[src*="facebook.com/plugins/page"] {
  display: block;
  width: 100%;
  height: 500px;
  min-height: 500px;
  border: 0;
}


/* v10 – fixed Carelectric technical artwork background */
body{position:relative;isolation:isolate;background:#172431}
body::before{content:"";position:fixed;z-index:-2;inset:0;background:url("images/carelectric-blueprint-bg.png") center center/cover no-repeat}
body::after{content:"";position:fixed;z-index:-1;inset:0;background:rgba(10,22,32,.36);pointer-events:none}
header{background:rgba(22,34,45,.82)}
.logo-link{display:flex;align-items:center;flex:0 0 auto}
.logo{display:block;width:188px;max-width:188px;max-height:58px;height:auto;object-fit:contain}
section{background:rgba(29,43,55,.74);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
section.alt{background:rgba(18,31,42,.82)}
.hero{min-height:720px;display:flex;align-items:center;background:linear-gradient(90deg,rgba(16,29,40,.91) 0%,rgba(16,29,40,.76) 40%,rgba(16,29,40,.18) 72%,rgba(16,29,40,.08) 100%);backdrop-filter:none;-webkit-backdrop-filter:none}
.hero-grid{display:block}
.hero-grid>div:first-child{max-width:650px;padding:34px 34px 34px 0}
footer{background:rgba(18,29,39,.88)}
@media(max-width:850px){body::before{background-position:58% center}.logo{width:150px;max-width:150px}.hero{min-height:650px;background:rgba(16,29,40,.72)}.hero-grid>div:first-child{max-width:100%;padding-right:0}}
@media(max-width:560px){body::before{background-position:54% center}body::after{background:rgba(9,20,29,.44)}.logo{width:132px;max-width:132px}}


/* v11 – verified background path + high-contrast logo */
html, body {
  min-height: 100%;
}
body {
  background-color: #172431 !important;
}
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -2 !important;
  background-image: url("/assets/images/carelectric-blueprint-bg-v11.jpg") !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
  opacity: 1 !important;
}
body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  background: rgba(7, 17, 25, .18) !important;
  pointer-events: none !important;
}
.logo {
  width: 188px !important;
  max-width: 188px !important;
  height: auto !important;
  max-height: 58px !important;
  object-fit: contain !important;
}
.hero {
  background: linear-gradient(90deg,
    rgba(13, 26, 37, .90) 0%,
    rgba(13, 26, 37, .68) 39%,
    rgba(13, 26, 37, .18) 66%,
    rgba(13, 26, 37, .04) 100%) !important;
}
@media (max-width: 850px) {
  body::before {
    background-position: 58% top !important;
  }
  .hero {
    background: rgba(13, 26, 37, .66) !important;
  }
}


/* v12 – brighter artwork, localized text contrast, restored logo */
body::before{
  background-image:url("/assets/images/carelectric-blueprint-bg-v12.jpg") !important;
  background-position:center top !important;
  background-size:cover !important;
  filter:none !important;
  opacity:1 !important;
}
body::after{
  background:rgba(4,13,21,.06) !important;
}
header{
  background:rgba(11,27,40,.90) !important;
}
.hero{
  background:
    linear-gradient(90deg,
      rgba(7,20,31,.84) 0%,
      rgba(7,20,31,.68) 27%,
      rgba(7,20,31,.32) 43%,
      rgba(7,20,31,.07) 57%,
      rgba(7,20,31,0) 72%) !important;
}
.logo-link{
  display:flex !important;
  align-items:center !important;
  width:190px !important;
  height:62px !important;
  overflow:visible !important;
}
.logo{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:188px !important;
  max-width:188px !important;
  height:auto !important;
  max-height:60px !important;
  object-fit:contain !important;
  filter:brightness(1.22) contrast(1.08) !important;
}
@media(max-width:850px){
  body::before{background-position:58% top !important}
  .hero{
    background:linear-gradient(90deg,rgba(7,20,31,.78),rgba(7,20,31,.35)) !important;
  }
  .logo-link{width:152px !important}
  .logo{width:150px !important;max-width:150px !important}
}


/* v13 – reference-inspired Carelectric redesign */
header{background:rgba(7,21,32,.94)!important;border-bottom:1px solid rgba(100,160,205,.16)}
header .wrap{min-height:74px;display:flex;align-items:center;gap:24px}
header nav{margin-left:auto;display:flex;align-items:center;gap:27px}
header nav a{position:relative;padding:27px 0 23px}
header nav a::after{content:"";position:absolute;left:0;right:0;bottom:14px;height:2px;background:#419ff4;transform:scaleX(0);transform-origin:center;transition:transform .2s ease}
header nav a:hover::after,header nav a.nav-active::after{transform:scaleX(1)}
.header-tools{display:flex;align-items:center;gap:16px;margin-left:4px}
.social-icon{display:grid!important;place-items:center;width:34px;height:34px;padding:0!important;color:#f4f8fc!important;border-radius:50%;transition:.2s ease}
.social-icon::after{display:none!important}
.social-icon:hover{color:#4ba6f7!important;transform:translateY(-1px)}
.social-icon svg{width:22px;height:22px}
.language-switch{display:flex;align-items:center;gap:5px;color:#60788d;font-size:13px}
.lang-btn{border:0;background:transparent;color:#8fa4b7;font:inherit;font-weight:800;padding:5px 2px;cursor:pointer}
.lang-btn.active,.lang-btn:hover{color:#fff}
.hero{min-height:700px!important}
.hero-grid>div:first-child{max-width:610px}
.cards{gap:16px}
.card{position:relative;overflow:hidden;border:1px solid rgba(102,155,197,.28)!important;background:rgba(10,27,41,.73)!important;transition:transform .22s ease,border-color .22s ease,background .22s ease}
.card:hover{transform:translateY(-4px);border-color:rgba(72,164,244,.66)!important;background:rgba(15,39,57,.9)!important}
.service-icon{width:46px;height:46px;display:grid;place-items:center;margin-bottom:12px;color:#4ba6f7}
.service-icon svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin-top:0}
.btn.primary{box-shadow:0 10px 28px rgba(37,137,231,.18)}
@media(max-width:1000px){
 header nav{gap:16px}
 .header-tools{gap:10px}
}
@media(max-width:850px){
 header .wrap{flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
 header nav{order:3;width:100%;overflow-x:auto;justify-content:flex-start;margin-left:0}
 header nav a{padding:10px 0 12px;white-space:nowrap}
 header nav a::after{bottom:5px}
 .header-tools{margin-left:auto}
 .hero{min-height:640px!important}
}


/* v13.1 — desktop layout foundation repair only */
html, body {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  overflow-x: hidden !important;
}

body {
  position: relative !important;
  min-width: 320px !important;
}

/* Restore the site-wide centered desktop width */
.wrap,
.container,
.hero-grid,
section > .wrap,
footer > .wrap {
  width: min(1280px, calc(100% - 48px)) !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Full-width sections, centered inner content */
header,
.hero,
section,
footer {
  width: 100% !important;
  max-width: none !important;
}

/* Restore blueprint artwork as a fixed page background */
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background-image: url("/assets/images/carelectric-blueprint-bg-v12.jpg") !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
  opacity: 1 !important;
  filter: none !important;
}

body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: rgba(4, 14, 23, .10) !important;
}

/* Header foundation */
header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(7, 21, 32, .94) !important;
}

header .wrap {
  min-height: 76px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 24px !important;
}

.logo-link {
  flex: 0 0 auto !important;
  width: 190px !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
}

.logo {
  width: 188px !important;
  max-width: 188px !important;
  height: auto !important;
  max-height: 62px !important;
  object-fit: contain !important;
}

header nav {
  margin-left: auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 28px !important;
}

header nav a {
  display: inline-flex !important;
  white-space: nowrap !important;
  font-size: 15px !important;
}

.header-tools {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.social-icon {
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
}

.social-icon svg {
  width: 20px !important;
  height: 20px !important;
}

.language-switch {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

.lang-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 3px !important;
  color: #9fb1c1 !important;
}

.lang-btn.active {
  color: #fff !important;
}

/* Hero gets full desktop composition again */
.hero {
  min-height: 690px !important;
  background:
    linear-gradient(90deg,
      rgba(5,18,29,.78) 0%,
      rgba(5,18,29,.54) 27%,
      rgba(5,18,29,.18) 48%,
      rgba(5,18,29,0) 67%) !important;
}

.hero-grid {
  min-height: 690px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 600px) 1fr !important;
  align-items: center !important;
  gap: 50px !important;
}

/* Keep ordinary content readable without narrowing the whole page */
section .wrap {
  box-sizing: border-box !important;
}

/* Desktop cards may use the available width */
.cards {
  width: 100% !important;
}

@media (max-width: 900px) {
  .wrap,
  .container,
  .hero-grid,
  section > .wrap,
  footer > .wrap {
    width: min(100% - 30px, 1280px) !important;
  }

  header .wrap {
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
  }

  header nav {
    order: 3 !important;
    width: 100% !important;
    margin-left: 0 !important;
    overflow-x: auto !important;
    gap: 20px !important;
  }

  .hero-grid {
    display: block !important;
    min-height: 620px !important;
    padding-top: 90px !important;
  }

  body::before {
    background-position: 58% top !important;
  }
}


/* v13.2 — HEADER ONLY */
header .wrap{
  min-height:78px !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:26px !important;
}

header .logo-link{
  width:190px !important;
  height:64px !important;
  flex:0 0 190px !important;
  display:flex !important;
  align-items:center !important;
}

header .logo{
  display:block !important;
  width:188px !important;
  max-width:188px !important;
  height:auto !important;
  max-height:62px !important;
}

header nav{
  margin-left:auto !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:30px !important;
  height:78px !important;
}

header nav a{
  display:flex !important;
  align-items:center !important;
  height:78px !important;
  padding:0 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

header nav a::after{
  bottom:13px !important;
}

header .header-tools{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:15px !important;
  height:78px !important;
  margin:0 0 0 8px !important;
  flex:0 0 auto !important;
}

header .social-icon{
  position:static !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  min-height:30px !important;
  flex:0 0 30px !important;
  padding:0 !important;
  margin:0 !important;
  line-height:1 !important;
  overflow:hidden !important;
  color:#f4f8fc !important;
  background:transparent !important;
  border:0 !important;
}

header .social-icon svg{
  display:block !important;
  width:20px !important;
  height:20px !important;
  max-width:20px !important;
  max-height:20px !important;
  flex:none !important;
}

header .language-switch{
  position:static !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  height:30px !important;
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap !important;
  line-height:1 !important;
}

header .lang-btn{
  appearance:none !important;
  -webkit-appearance:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:0 !important;
  height:30px !important;
  margin:0 !important;
  padding:0 2px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#91a6b8 !important;
  font:inherit !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1 !important;
}

header .lang-btn.active,
header .lang-btn:hover{
  color:#fff !important;
}

header .language-switch span{
  display:inline-block !important;
  color:#536b7f !important;
  font-size:12px !important;
  line-height:1 !important;
}

header .header-tools + a,
header .header-tools + .btn{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

/* Tablet/mobile retains compact wrapping, desktop rules above stay isolated */
@media(max-width:900px){
  header .wrap{
    min-height:auto !important;
    flex-wrap:wrap !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
  }
  header .header-tools{
    height:54px !important;
    margin-left:auto !important;
  }
  header nav{
    order:3 !important;
    width:100% !important;
    height:auto !important;
    margin-left:0 !important;
    overflow-x:auto !important;
  }
  header nav a{
    height:42px !important;
  }
}


/* v13.4 — service card icon system */
.service-card{position:relative;min-height:178px;padding:22px 22px 20px!important;border:1px solid rgba(92,158,211,.30)!important;background:linear-gradient(145deg,rgba(48,70,88,.92),rgba(35,54,70,.92))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease!important}
.service-card:hover{transform:translateY(-3px);border-color:rgba(75,166,247,.68)!important;box-shadow:0 12px 30px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.04)}
.service-card .service-icon{width:48px;height:48px;margin:0 0 15px;display:grid;place-items:center;color:#59adf6;background:rgba(35,139,231,.08);border:1px solid rgba(75,166,247,.20);border-radius:11px}
.service-card .service-icon svg{width:30px;height:30px;display:block;fill:none!important;stroke:currentColor!important;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.service-card h3{font-size:17px;line-height:1.25;margin:0 0 7px}
.service-card p{font-size:14px;line-height:1.5;margin:0!important}
.keys .service-card{min-height:190px}
@media(max-width:850px){.service-card{min-height:160px}}

/* v13.10 — header always visible while scrolling */
header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:5000 !important;
  background:rgba(7,21,32,.96) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.18) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
}
body{padding-top:78px !important}
section[id]{scroll-margin-top:94px}

@media(max-width:900px){
  body{padding-top:120px !important}
  section[id]{scroll-margin-top:136px}
}