:root{--navy:#062b63;--deep:#031d43;--yellow:#ffc400;--ink:#102b59;--muted:#66738b;--light:#f5f8fc}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);line-height:1.55}a{text-decoration:none;color:inherit}.container{width:min(1180px,92%);margin:auto}
.topbar{background:var(--navy);color:#fff;font-size:12px}.topbar .container{display:flex;justify-content:space-between;gap:15px;padding:8px 0;flex-wrap:wrap}
header{background:#fff;position:sticky;top:0;z-index:20;box-shadow:0 2px 12px #001b4420}.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{font-weight:900;color:var(--navy);font-size:20px;line-height:1}.brand small{display:block;font-size:9px;margin-top:5px}.navlinks{display:flex;align-items:center;gap:25px;font-size:14px;font-weight:700}.navlinks a.active{color:#d99f00;border-bottom:3px solid var(--yellow);padding-bottom:8px}.menu{display:none;background:var(--yellow);border:0;border-radius:6px;font-size:24px;padding:6px 10px}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:7px;padding:13px 20px;font-weight:800;cursor:pointer}.btn-yellow{background:var(--yellow);color:#071d40}.btn-outline{border:1px solid #fff;color:#fff}.btn-green{background:#0bb64b;color:#fff}
.hero{min-height:350px;color:#fff;background:linear-gradient(90deg,rgba(2,26,63,.96),rgba(2,26,63,.65),rgba(2,26,63,.15)),url('hero.png') center/cover no-repeat;display:flex;align-items:center}.hero.home{min-height:500px}.copy{max-width:620px;padding:55px 0}.eyebrow{color:var(--yellow);font-size:12px;font-weight:900;text-transform:uppercase}.hero h1{font-size:55px;line-height:1;margin:12px 0 18px}.hero h1 em{font-style:normal;color:var(--yellow)}.hero p{font-size:18px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
section{padding:60px 0}.head{margin-bottom:28px}.head h2{font-size:38px;line-height:1.1;margin:7px 0}.head p,.card p{color:var(--muted)}.kicker{font-size:12px;font-weight:900;text-transform:uppercase}.kicker:before{content:"";display:inline-block;width:40px;height:4px;background:var(--yellow);margin-right:9px;vertical-align:middle}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{border:1px solid #dce5ef;border-radius:10px;background:#fff;padding:25px;box-shadow:0 7px 20px #062b6308}.card h3{font-size:22px;margin-top:0}.band{background:var(--navy);color:#fff}.band p{color:#dce7f5}.feature{text-align:center}.icon{width:54px;height:54px;border-radius:50%;background:var(--navy);color:var(--yellow);display:grid;place-items:center;margin:0 auto 12px;font-size:24px}.band .icon{background:#fff}
.clients{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.client{min-height:125px;border:1px solid #dce5ef;border-radius:8px;display:grid;place-items:center;text-align:center;font-weight:900;background:#fff;padding:15px}.more{background:#eef6fd}
.trust{background:var(--navy);color:#fff}.trust .container{display:grid;grid-template-columns:repeat(4,1fr)}.trust div div{text-align:center;padding:18px 8px;border-right:1px solid #ffffff35;font-weight:800}
.cta{background:linear-gradient(90deg,#062b63ee,#003d78ee),url('hero.png') center/cover;color:#fff;padding:35px 0}.cta .container{display:flex;align-items:center;justify-content:space-between;gap:20px}.cta h2{margin:0;font-size:31px}
.formgrid{display:grid;grid-template-columns:1.5fr .75fr;gap:25px}.formcard,.side{border:1px solid #dce5ef;border-radius:10px;padding:28px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.full{grid-column:1/-1}label{display:block;font-size:13px;font-weight:800;margin-bottom:6px}input,select,textarea{width:100%;padding:13px;border:1px solid #cdd9e6;border-radius:6px;font:inherit}textarea{min-height:115px}.side{margin-bottom:18px}.success,.error{padding:14px;border-radius:7px;margin-bottom:20px}.success{background:#e6f8ed;color:#087d35}.error{background:#fff0f0;color:#a81e1e}
footer{background:var(--deep);color:#dce7f5;padding:42px 0 18px}.foot{display:grid;grid-template-columns:1.3fr .7fr 1.1fr 1fr;gap:30px}.foot h4{color:#fff}.foot a{display:block;margin:5px 0}.copyright{border-top:1px solid #ffffff22;margin-top:28px;padding-top:16px;font-size:12px}
@media(max-width:850px){.topbar{display:none}.nav{height:68px}.menu{display:block}.navlinks{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;padding:20px 5%;flex-direction:column;align-items:stretch;box-shadow:0 10px 20px #001b4430}.navlinks.open{display:flex}.hero,.hero.home{min-height:410px;background-position:62% center}.hero h1{font-size:41px}.grid4,.clients{grid-template-columns:1fr 1fr}.grid3,.grid2,.formgrid,.foot{grid-template-columns:1fr}.fields{grid-template-columns:1fr}.full{grid-column:auto}.cta .container{flex-direction:column;align-items:flex-start}}
@media(max-width:520px){section{padding:45px 0}.hero h1{font-size:36px}.hero p{font-size:16px}.head h2{font-size:29px}.trust .container{grid-template-columns:1fr 1fr}.grid4,.clients{grid-template-columns:1fr 1fr}.client{font-size:14px;min-height:105px}}

/* FIX: WHY CHOOSE US WHITE CARDS */

.band .card.feature {
    background-color: #ffffff;
    color: #102d5c;
    text-align: center;
}

.band .card.feature h3 {
    color: #102d5c !important;
    font-size: 20px;
    font-weight: 700;
    display: block;
    visibility: visible;
    opacity: 1;
    margin: 15px 0 0;
}



/* INDUSTRIES WE SERVE */
.res-industries {
  padding: 75px 0;
  background: #f2f6fb;
}

.res-industries .head {
  text-align: center;
  margin-bottom: 35px;
}

.res-industries .head h2 {
  color: #062b63;
}

.res-industries .head p {
  color: #536477;
}

.res-industries-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.res-industry-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(6,43,99,.10);
  transition: transform .3s ease;
}

.res-industry-card:hover {
  transform: translateY(-5px);
}

.res-industry-card img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.res-industry-card h3 {
  color: #062b63;
  text-align: center;
  font-size: 17px;
  padding: 18px 12px;
  margin: 0;
}

@media (max-width: 900px) {
  .res-industries-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .res-industries {
    padding: 45px 0;
  }

  .res-industries-grid {
    gap: 12px;
  }

  .res-industry-card img {
    height: 115px;
  }

  .res-industry-card h3 {
    font-size: 14px;
    padding: 14px 8px;
  }
}

/* ====================================
   RESONANT ENERGY - CLIENTS PAGE
==================================== */

.res-clients-section {
  padding: 80px 0;
  background: #f1f6fc;
}

.res-clients-heading {
  text-align: center;
  margin-bottom: 42px;
}

.res-clients-heading .kicker {
  color: #bd8e13;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.res-clients-heading h2 {
  color: #082b61 !important;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 900;
  line-height: 1.2;
  margin: 12px 0;
}

.res-clients-heading p {
  color: #526780;
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.7;
}

/* FOUR COLUMNS ON DESKTOP */

.res-client-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

/* INDIVIDUAL CLIENT BOX */

.res-client-card {
  background: #ffffff;
  border: 2px solid #9ab6d8;
  border-top: 5px solid #e5b637;
  border-radius: 12px;
  min-height: 145px;
  padding: 24px 16px;

  display: flex;
  justify-content: center;
  align-items: center;

  text-align: center;
  box-shadow: 0 6px 18px rgba(8,43,97,0.08);
  transition: transform 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s ease;
}

.res-client-card h3 {
  color: #082b61 !important;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.45;
  margin: 0;
  overflow-wrap: anywhere;
}

.res-client-card:hover {
  transform: translateY(-5px);
  border-color: #082b61;
  box-shadow: 0 10px 24px rgba(8,43,97,0.13);
}

/* AND MANY MORE */

.res-clients-more {
  margin-top: 35px;
  text-align: center;
}

.res-clients-more span {
  display: inline-block;
  padding: 14px 28px;
  background: #e5edf8;
  border: 1px solid #9ab6d8;
  border-radius: 30px;
  color: #082b61;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1px;
}

/* TABLET */

@media (max-width: 900px) {
  .res-client-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .res-client-card {
    min-height: 125px;
  }
}

/* MOBILE */

@media (max-width: 500px) {
  .res-clients-section {
    padding: 50px 0;
  }

  .res-client-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .res-client-card {
    min-height: 95px;
    padding: 20px 15px;
  }

  .res-client-card h3 {
    font-size: 17px;
  }

  .res-clients-heading {
    margin-bottom: 28px;
  }
}

/* Fix About Us office cards */
.band .card {
  background: #ffffff;
  color: #173b63;
}

.band .card h3 {
  color: #123b69;
  font-weight: 700;
}

.band .card p {
  color: #374151;
  font-size: 16px;
  line-height: 1.7;
}

/* Homepage Hero Banner */
.hero.home {
    background:
        linear-gradient(
            90deg,
            rgba(5, 23, 48, 0.85),
            rgba(5, 23, 48, 0.35)
        ),
        url("resonant-banner.png") center/cover no-repeat !important;
}

/* RESONANT ENERGY - ALL PAGE HERO BANNERS */

.hero,
.hero.home,
.about-hero {
    background-image:
        linear-gradient(
            90deg,
            rgba(5, 23, 48, 0.88) 0%,
            rgba(5, 23, 48, 0.68) 55%,
            rgba(5, 23, 48, 0.40) 100%
        ),
        url("resonant-banner.png") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    color: #ffffff;
}

/* KEEP HERO TEXT READABLE */

.hero h1,
.hero p,
.about-hero h1,
.about-hero p {
    color: #ffffff;
}

/* MOBILE RESPONSIVENESS */

@media (max-width: 768px) {
    .hero,
    .hero.home,
    .about-hero {
        background-position: center center !important;
    }
}