:root {
      --bg: #0b0f1a;
      --panel: rgba(255,255,255,0.06);
      --panel2: rgba(255,255,255,0.08);
      --text: rgba(255,255,255,0.92);
      --muted: rgba(255,255,255,0.72);
      --line: rgba(255,255,255,0.14);
      --brandA: #ff8a1f; /* orange */
      --brandB: #1aa3ff; /* blue */
      --brandC: #22d3ee; /* cyan accent */
      --shadow: 0 18px 60px rgba(0,0,0,0.55);
      --radius: 18px;
      --radius2: 26px;
      --max: 1120px;
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      background: radial-gradient(1200px 800px at 20% 10%, rgba(26,163,255,0.22), transparent 60%),
                  radial-gradient(1000px 700px at 80% 5%, rgba(255,138,31,0.22), transparent 55%),
                  radial-gradient(900px 700px at 50% 90%, rgba(34,211,238,0.14), transparent 55%),
                  var(--bg);
      color: var(--text);
      line-height: 1.45;
    }

    a { color: var(--brandB); text-decoration: none; }
    a:hover { text-decoration: underline; }

    .wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

    /* Top bar */
    .topbar {
      position: sticky;
      top: 0;
      z-index: 30;
      backdrop-filter: blur(14px);
      background: rgba(11,15,26,0.72);
      border-bottom: 1px solid var(--line);
    }
    .topbar-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px 0;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 220px;
    }
    .brand img {
      height: 34px;
      width: auto;
      display: block;
    }
    .nav {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .pill {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.04);
      border-radius: 999px;
      color: var(--text);
      font-weight: 650;
      font-size: 13px;
      letter-spacing: 0.2px;
      text-decoration: none;
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
    }
    .pill:hover {
      transform: translateY(-1px);
      background: rgba(255,255,255,0.06);
      border-color: rgba(255,255,255,0.22);
      text-decoration: none;
    }
    .pill.primary {
      border: none;
      background: linear-gradient(90deg, var(--brandA), var(--brandB));
      color: #08101e;
      box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    }

    /* Hero */
    .hero {
      padding: 46px 0 18px;
    }
    .hero-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 28px;
      align-items: center;
    }
    .kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.04);
      color: var(--muted);
      font-weight: 650;
      font-size: 13px;
      letter-spacing: 0.25px;
    }
    .kdot {
      width: 10px; height: 10px; border-radius: 50%;
      background: linear-gradient(180deg, var(--brandA), var(--brandB));
      box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
    }
    h1 {
      margin: 14px 0 12px;
      font-size: clamp(28px, 3.2vw, 44px);
      line-height: 1.05;
      letter-spacing: -0.6px;
    }
    .sub {
      margin: 0 0 18px;
      color: var(--muted);
      font-size: 16px;
      max-width: 62ch;
    }
    .cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      margin: 18px 0 0;
    }
    .hero-card {
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
      border-radius: var(--radius2);
      padding: 18px;
      box-shadow: var(--shadow);
    }
    .hero-logo {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 16px;
      padding: 12px;
      background: rgba(0,0,0,0.22);
      border: 1px solid rgba(255,255,255,0.10);
      overflow: hidden;
    }
    .hero-logo img {
      width: 100%;
      height: auto;
      max-height: 170px;
      object-fit: contain;
      display: block;
    }
    .stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 14px;
    }
    .stat {
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.04);
      border-radius: 14px;
      padding: 12px;
      min-height: 86px;
    }
    .stat .num {
      font-weight: 800;
      font-size: 16px;
      margin-bottom: 6px;
    }
    .stat .lbl { color: var(--muted); font-size: 12.5px; }

    /* Sections */
    section { padding: 28px 0; }
    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 16px;
      margin-bottom: 14px;
    }
    h2 {
      margin: 0;
      font-size: 20px;
      letter-spacing: -0.2px;
    }
    .hint { color: var(--muted); font-size: 13.5px; max-width: 62ch; }

    .grid3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .grid2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255,255,255,0.05);
      padding: 16px;
    }
    .card.soft {
      background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.04));
    }
    .tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12.5px;
      color: var(--muted);
      font-weight: 650;
      letter-spacing: 0.2px;
      margin-bottom: 8px;
    }
    .dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--brandC);
      box-shadow: 0 0 0 3px rgba(34,211,238,0.10);
    }
    .card h3 {
      margin: 0 0 6px;
      font-size: 16px;
      letter-spacing: -0.15px;
    }
    .card p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }
    .step {
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(255,255,255,0.04);
      padding: 14px;
      position: relative;
      overflow: hidden;
      min-height: 140px;
    }
    .step:before {
      content: "";
      position: absolute;
      inset: -40px -40px auto auto;
      width: 140px;
      height: 140px;
      background: radial-gradient(circle at 30% 30%, rgba(255,138,31,0.25), transparent 55%);
      transform: rotate(18deg);
    }
    .step .n {
      font-weight: 850;
      font-size: 13px;
      color: rgba(255,255,255,0.85);
      margin-bottom: 8px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .badge {
      font-size: 11px;
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.78);
    }
    .step p { margin: 0; color: var(--muted); font-size: 13.5px; }

    /* Wide callout */
    .callout {
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: var(--radius2);
      background: linear-gradient(90deg, rgba(255,138,31,0.16), rgba(26,163,255,0.14));
      padding: 18px;
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 14px;
      align-items: center;
    }
    .callout h3 { margin: 0 0 8px; font-size: 16px; }
    .callout p { margin: 0; color: rgba(255,255,255,0.80); font-size: 14px; }
    .mini-logos {
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
    }
    .mini-logos img {
      height: 34px;
      width: auto;
      opacity: 0.95;
      filter: drop-shadow(0 10px 18px rgba(0,0,0,0.4));
    }

    /* Footer */
    footer {
      border-top: 1px solid var(--line);
      padding: 22px 0 40px;
      color: var(--muted);
      font-size: 13px;
    }
    .foot-grid {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 14px;
      align-items: center;
    }
    .small { font-size: 12.5px; color: rgba(255,255,255,0.62); }

    /* Responsive */
    @media (max-width: 980px) {
      .hero-grid { grid-template-columns: 1fr; }
      .stats { grid-template-columns: 1fr; }
      .grid3 { grid-template-columns: 1fr; }
      .grid2 { grid-template-columns: 1fr; }
      .steps { grid-template-columns: 1fr; }
      .callout { grid-template-columns: 1fr; }
      .mini-logos { justify-content: flex-start; }
      .brand { min-width: unset; }
    }

/* Active nav state */
.nav a[aria-current='page']{opacity:1;background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.25)}


/* --- Additions for multi-page site layout --- */
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;z-index:50}
.hero{padding:72px 0 36px}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.hero-visual img{width:100%;height:auto;border-radius:18px;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.85);font-size:.9rem;margin-bottom:14px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.section{padding:52px 0}
.section.alt{background:rgba(255,255,255,.03)}
.section-head{margin-bottom:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.cards .card{padding:18px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);backdrop-filter: blur(6px)}
.card-top{display:flex;align-items:center;justify-content:flex-start;margin-bottom:10px}
.card-logo{height:80px;width:auto;opacity:.95}
.text-link{display:inline-block;margin-top:10px;color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.text-link:hover{border-bottom-color:rgba(255,255,255,.6)}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:start}
.embed .ratio{position:relative;width:100%;padding-top:56.25%;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.10)}
.embed iframe{position:absolute;inset:0;width:100%;height:100%}
.checklist{list-style:none;padding:0;margin:14px 0 0}
.checklist li{position:relative;padding-left:28px;margin:10px 0;color:rgba(255,255,255,.85)}
.checklist li:before{content:"✓";position:absolute;left:0;top:0;color:rgba(34,211,238,1)}
.stack{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.notice{padding:12px 14px;border-radius:14px;border:1px dashed rgba(255,255,255,.25);background:rgba(0,0,0,.10);color:rgba(255,255,255,.85)}
@media (max-width: 900px){
  .hero-grid,.split{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .hero{padding:56px 0 26px}
}

/* Footer links */
.footer-links{
  margin-top: 10px;
}
.footer-links a{
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-weight: 600;
}
.footer-links a:hover{
  text-decoration: underline;
}

/* ===== Custom PPI Menu Styling ===== */

.main-navigation a,
.topbar nav a,
.header-menu a {
  color: rgba(255,255,255,0.85) !important;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.main-navigation a:hover,
.topbar nav a:hover,
.header-menu a:hover {
  color: #22d3ee !important; /* Cyan accent */
  color: #22d3ee !important;
  text-shadow: 0 0 12px rgba(34,211,238,0.8);
}

/* Active page highlight */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
  color: #1aa3ff !important; /* Brand blue */
  font-weight: 600;
}
/* ===========================
   Logo sizing (added)
   =========================== */

/* FORCE header logo size */
#site-logo img,
.site-header img,
.header img {
  height: 60px !important;
  width: auto !important;
  max-height: 60px !important;
}
/* SolarBoost hero logo (right side large logo) */
.hero-visual img,
.ppi-logo-mark {
  max-width: 420px;  /* change this number to resize */
  width: 100%;
  height: auto;
}

/* Mobile adjustment */
@media (max-width: 768px) {
  .brand-mark { height: 36px; }
  .hero-visual img { max-width: 260px; margin: 0 auto; display: block; }
}
/* Force theme header to stop being fixed/sticky */
.site-header,
#masthead{
  position: relative !important;
  top: auto !important;
}
/* ===== Custom PPI Menu Styling ===== */

.main-navigation a,
.topbar nav a,
.header-menu a {
  color: rgba(255,255,255,0.85) !important;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.main-navigation a:hover,
.topbar nav a:hover,
.header-menu a:hover {
  color: #22d3ee !important;
  text-shadow: 0 0 12px rgba(34,211,238,0.8);
}

/* Active page highlight */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
  color: #1aa3ff !important; /* Brand blue */
  font-weight: 600;
}
/* Make product logos larger inside 3-card section */
.cards.three .card-icon {
    height: 100px !important;
    width: auto;
    display: block;
    margin-bottom: 16px;
}
/* Hide Ray Lite sidebar/menu block */
#secondary, .widget-area, .site-sidebar, .sidebar, .left-sidebar, .right-sidebar {
  display: none !important;
}

/* Expand content full width */
#primary, .content-area, #content, .site-content {
  width: 100% !important;
  max-width: none !important;
}
/* Adjust PowerPulse logo size in PPI header */
.ppi-logo img {
    height: 80px;      /* adjust to 56px / 64px if needed */
    width: auto;
}
/* ============================= */
/* CONTACT FORM FINAL STYLING   */
/* ============================= */

#contact,
#contact .wpcf7,
#contact .wpcf7 p,
#contact .wpcf7 label,
#contact .wpcf7 span,
#contact .wpcf7 .wpcf7-form-control-wrap {
    color: #ffffff !important;
}

/* Force labels white */
#contact .wpcf7 label {
    color: #ffffff !important;
    font-weight: 500;
}

/* Input fields white */
#contact .wpcf7 input[type="text"],
#contact .wpcf7 input[type="email"],
#contact .wpcf7 input[type="tel"],
#contact .wpcf7 input[type="url"],
#contact .wpcf7 input[type="number"],
#contact .wpcf7 textarea,
#contact .wpcf7 select {
    background: #ffffff !important;
    color: #0b1220 !important; /* typed text readable */
    border: 1px solid rgba(0,0,0,.2) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
}

/* Placeholder color */
#contact .wpcf7 input::placeholder,
#contact .wpcf7 textarea::placeholder {
    color: rgba(0,0,0,0.45) !important;
}

/* Submit button polish */
#contact .wpcf7 input[type="submit"] {
    background: linear-gradient(90deg,#ff7a18,#ffb347);
    color: #ffffff;
    border: none;
    padding: 12px 22px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .2s ease;
}

#contact .wpcf7 input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
/* ============================= */
/* FINAL ORIGINAL MENU COLOUR   */
/* ============================= */

.ppi-menu a,
.nav a {
    color: #2ec4d6 !important;   /* original bright aqua */
    font-weight: 500;
    text-decoration: none;
    transition: color .2s ease;
}

/* Hover */
.ppi-menu a:hover,
.nav a:hover {
    color: #66e6f2 !important;   /* lighter aqua hover */
}

/* Active page */
.ppi-menu a[aria-current="page"],
.nav a[aria-current="page"] {
    color: #66e6f2 !important;
}
/* ============================= */
/* About page: neutralize pasted editor styling */
/* ============================= */

.ppi-editor-reset,
.ppi-editor-reset * {
  color: rgba(255,255,255,.88) !important;
}

/* Kill old light panels / blue bars / pasted backgrounds */
.ppi-editor-reset *,
.ppi-editor-reset .wp-block,
.ppi-editor-reset .panel,
.ppi-editor-reset .so-panel,
.ppi-editor-reset section,
.ppi-editor-reset div {
  background: transparent !important;
  box-shadow: none !important;
}

/* Keep spacing sane */
.ppi-editor-reset p { margin: 0 0 14px 0; }
.ppi-editor-reset h1,
.ppi-editor-reset h2,
.ppi-editor-reset h3 { color: #fff !important; margin: 0 0 10px 0; }

/* Images still display normally */
.ppi-editor-reset img {
  max-width: 100%;
  height: auto;
  background: transparent !important;
  border-radius: 16px;
}

/* ============================= */
/* Editor content reset (PPI)    */
/* ============================= */
.ppi-editor-reset,
.ppi-editor-reset *{
  color: rgba(255,255,255,.88);
}
.ppi-editor-reset *,
.ppi-editor-reset .wp-block,
.ppi-editor-reset section,
.ppi-editor-reset div{
  background: transparent !important;
  box-shadow: none !important;
}
.ppi-editor-reset h1,
.ppi-editor-reset h2,
.ppi-editor-reset h3{ color:#fff !important; }