/* EnerXCo v18: left-prone layout, service dropdown, clean account layout, logo fix */

:root{
  --ex-left: clamp(18px, 4.5vw, 72px);
  --ex-right: 28px;
  --ex-max: 1480px;
}

/* Left-prone website layout */
.header-inner,
.hero,
.page-wrap,
.account-layout,
.footer-inner{
  max-width: var(--ex-max) !important;
  margin-left: var(--ex-left) !important;
  margin-right: auto !important;
}

.header-inner{
  padding-left: 0 !important;
  padding-right: var(--ex-right) !important;
}

/* Logo size/shape */
.brand img{
  width: auto !important;
  height: 34px !important;
  max-width: 174px !important;
  border-radius: 0 !important;
  display: block !important;
  object-fit: contain !important;
}

.footer-brand img{
  width: auto !important;
  height: 28px !important;
  max-width: 155px !important;
  border-radius: 0 !important;
  display: block !important;
  object-fit: contain !important;
}

/* Main nav */
.nav-left{
  align-items: center !important;
  gap: 26px !important;
}

/* Our Services dropdown */
.nav-dropdown{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-dropdown > a::after{
  content: "";
  display: inline-block;
  margin-left: 7px;
  width: 6px;
  height: 6px;
  border-right: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.nav-dropdown-menu{
  position: absolute;
  top: calc(100% + 18px);
  left: 0;
  min-width: 235px;
  background: #fff;
  border: 1px solid #eaecf0;
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 18px 50px rgba(16,24,40,.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: .16s ease;
  z-index: 1000;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-menu a{
  display: block;
  padding: 11px 12px;
  border-radius: 11px;
  color: #344054 !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

.nav-dropdown-menu a:hover{
  background: #f2f4f7;
  color: #101828 !important;
}

/* Account two-column layout */
.account-layout{
  padding: 42px var(--ex-right) 84px 0 !important;
  display: grid !important;
  grid-template-columns: 260px minmax(0, 860px) !important;
  gap: 34px !important;
  align-items: start !important;
}

.account-sidebar{
  display: block !important;
  background: #ffffff !important;
  border: 1px solid #eaecf0 !important;
  border-radius: 22px !important;
  padding: 18px !important;
  box-shadow: 0 12px 34px rgba(16,24,40,.06) !important;
  position: sticky !important;
  top: 96px !important;
}

.account-user{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 4px 2px 18px !important;
  margin: 0 0 14px !important;
  border-bottom: 1px solid #eaecf0 !important;
}

.account-avatar{
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 999px !important;
  background: #101828 !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.account-user strong{
  display: block !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  color: #101828 !important;
}

.account-user span{
  display: block !important;
  font-size: 12px !important;
  color: #667085 !important;
  max-width: 170px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  margin-top: 3px !important;
}

.account-sidebar nav{
  display: grid !important;
  gap: 6px !important;
}

.account-sidebar nav a{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 11px 12px !important;
  border-radius: 12px !important;
  color: #344054 !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  text-decoration: none !important;
}

.account-sidebar nav a:hover,
.account-sidebar nav a.active{
  background: #f2f4f7 !important;
  color: #101828 !important;
}

.account-sidebar nav a.disabled{
  color: #98a2b3 !important;
  cursor: not-allowed !important;
}

.account-main{
  min-width: 0 !important;
}

.account-main h1{
  margin: 0 0 24px !important;
  font-size: 36px !important;
  line-height: 1.12 !important;
  letter-spacing: -.045em !important;
}

.dashboard-head{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 18px !important;
  margin: 0 0 24px !important;
}

.account-main .card{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.account-main .table{
  width: 100% !important;
  border-collapse: collapse !important;
  background: #ffffff !important;
  border: 1px solid #eaecf0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(16,24,40,.04) !important;
}

.account-main .table th,
.account-main .table td{
  padding: 15px 16px !important;
  border-bottom: 1px solid #eaecf0 !important;
  text-align: left !important;
  vertical-align: middle !important;
}

.account-main .table th{
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .055em !important;
  color: #667085 !important;
  background: #f9fafb !important;
  font-weight: 750 !important;
}

.account-main .table tr:last-child td{
  border-bottom: 0 !important;
}

.account-main .btn{
  text-decoration: none !important;
}

.account-main .form{
  max-width: 720px !important;
}

/* Auth pages are left-prone but keep professional form width */
.auth-page{
  max-width: var(--ex-max) !important;
  margin-left: var(--ex-left) !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: var(--ex-right) !important;
}

.auth-card{
  margin-left: 0 !important;
}

/* Home page visual stays controlled */
.hero{
  padding-left: 0 !important;
  padding-right: var(--ex-right) !important;
}

/* Footer alignment */
.footer-inner{
  padding-left: 0 !important;
  padding-right: var(--ex-right) !important;
}

@media(max-width: 900px){
  .header-inner,
  .hero,
  .page-wrap,
  .account-layout,
  .footer-inner,
  .auth-page{
    margin-left: 22px !important;
    margin-right: 22px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .brand img{
    height: 30px !important;
    max-width: 150px !important;
  }

  .account-layout{
    grid-template-columns: 1fr !important;
  }

  .account-sidebar{
    position: static !important;
  }

  .nav-left{
    display: none !important;
  }
}

/* Sprint 2: public website UX/content sections */
.ex-hero,
.ex-section,
.service-page{
  max-width: var(--ex-max) !important;
  margin-left: var(--ex-left) !important;
  margin-right: auto !important;
}

.ex-hero{
  min-height: auto !important;
  padding: 72px var(--ex-right) 52px 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr) !important;
  gap: clamp(34px, 5vw, 72px) !important;
  align-items: center !important;
}

.ex-hero h1{
  margin: 10px 0 18px !important;
  max-width: 780px !important;
  font-size: clamp(42px, 5.2vw, 72px) !important;
  line-height: .96 !important;
  letter-spacing: -.06em !important;
  color: #101828 !important;
}

.hero-lead,
.ex-hero p{
  max-width: 680px !important;
  font-size: clamp(18px, 2vw, 22px) !important;
  line-height: 1.48 !important;
  color: #475467 !important;
}

.eyebrow{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 10px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #006d77 !important;
}

.hero-actions{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 28px !important;
}

.trust-strip{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 28px !important;
}

.trust-strip span,
.feature-list span{
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid #d0d5dd !important;
  background: #fff !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  color: #344054 !important;
}

.ex-hero-visual{
  position: relative !important;
  min-height: 360px !important;
  border: 1px solid #e4e7ec !important;
  border-radius: 30px !important;
  background: linear-gradient(145deg, #f8fbff 0%, #eef7f8 100%) !important;
  box-shadow: 0 24px 70px rgba(16,24,40,.10) !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  padding: 34px !important;
}

.ex-hero-visual img{
  width: min(100%, 440px) !important;
  height: auto !important;
  display: block !important;
}

.product-preview-card{
  position: absolute !important;
  min-width: 184px !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid #e4e7ec !important;
  border-radius: 18px !important;
  padding: 14px 16px !important;
  box-shadow: 0 18px 42px rgba(16,24,40,.14) !important;
}

.product-preview-card strong,
.product-preview-card span{
  display: block !important;
}

.product-preview-card strong{
  color: #101828 !important;
  font-size: 15px !important;
  margin-bottom: 4px !important;
}

.product-preview-card span{
  color: #667085 !important;
  font-size: 13px !important;
}

.preview-top{ top: 28px !important; right: 28px !important; }
.preview-bottom{ left: 28px !important; bottom: 28px !important; }

.ex-section{
  padding: 54px var(--ex-right) 54px 0 !important;
}

.ex-muted{
  background: #f8fafc !important;
  border-top: 1px solid #edf2f7 !important;
  border-bottom: 1px solid #edf2f7 !important;
  max-width: none !important;
  margin-left: 0 !important;
  padding-left: var(--ex-left) !important;
}

.section-head{
  max-width: 760px !important;
  margin-bottom: 28px !important;
}

.section-head h2,
.cta-band h2,
.service-feature h2,
.service-page .card h2{
  margin: 0 0 12px !important;
  color: #101828 !important;
  font-size: clamp(28px, 3.4vw, 44px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.04em !important;
}

.section-head p,
.cta-band p,
.service-feature p,
.service-page .card p{
  color: #475467 !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}

.workflow-grid,
.audience-grid,
.planned-grid,
.report-grid{
  display: grid !important;
  gap: 18px !important;
}

.workflow-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.audience-grid,
.planned-grid,
.report-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.workflow-card,
.audience-card,
.planned-card,
.report-grid > div{
  background: #fff !important;
  border: 1px solid #e4e7ec !important;
  border-radius: 22px !important;
  padding: 22px !important;
  box-shadow: 0 12px 34px rgba(16,24,40,.05) !important;
}

.workflow-card span{
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #e6f5f3 !important;
  color: #006d77 !important;
  font-weight: 850 !important;
  margin-bottom: 16px !important;
}

.workflow-card h3,
.audience-card h3,
.planned-card h3{
  margin: 0 0 8px !important;
  color: #101828 !important;
  font-size: 18px !important;
}

.workflow-card p,
.audience-card p,
.planned-card p{
  margin: 0 !important;
  color: #667085 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.cta-band{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 26px !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 28px !important;
  background: #ffffff !important;
  box-shadow: 0 20px 55px rgba(16,24,40,.07) !important;
  padding: 34px !important;
  margin-bottom: 60px !important;
}

.cta-band-actions{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  justify-content: flex-end !important;
}

.service-page{
  padding: 42px var(--ex-right) 72px 0 !important;
}

.service-page .card{
  margin-bottom: 22px !important;
  border-radius: 24px !important;
  border: 1px solid #e4e7ec !important;
  box-shadow: 0 14px 40px rgba(16,24,40,.05) !important;
}

.page-hero .lead{
  max-width: 860px !important;
}

.service-feature{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 330px !important;
  gap: 28px !important;
  align-items: start !important;
}

.feature-list{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 20px 0 0 !important;
}

.service-summary-box{
  background: #f8fafc !important;
  border: 1px solid #e4e7ec !important;
  border-radius: 20px !important;
  padding: 22px !important;
}

.service-summary-box h3{
  margin: 0 0 12px !important;
  color: #101828 !important;
}

.service-summary-box ul{
  margin: 0 !important;
  padding-left: 18px !important;
  color: #475467 !important;
  line-height: 1.7 !important;
}

.report-grid > div strong,
.report-grid > div span{
  display: block !important;
}

.report-grid > div strong{
  color: #101828 !important;
  margin-bottom: 8px !important;
}

.report-grid > div span{
  color: #667085 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.planned-card > span{
  display: inline-flex !important;
  margin-bottom: 14px !important;
  border-radius: 999px !important;
  background: #eef4ff !important;
  color: #3538cd !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.faq-list{
  display: grid !important;
  gap: 12px !important;
}

.faq-list details{
  border: 1px solid #e4e7ec !important;
  border-radius: 16px !important;
  background: #fff !important;
  padding: 16px 18px !important;
}

.faq-list summary{
  cursor: pointer !important;
  font-weight: 800 !important;
  color: #101828 !important;
}

.faq-list p{
  margin: 12px 0 0 !important;
  color: #667085 !important;
  font-size: 15px !important;
}

@media (max-width: 980px){
  .ex-hero{
    grid-template-columns: 1fr !important;
    padding-top: 42px !important;
  }

  .workflow-grid,
  .audience-grid,
  .planned-grid,
  .report-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .service-feature{
    grid-template-columns: 1fr !important;
  }

  .cta-band{
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .cta-band-actions{
    justify-content: flex-start !important;
  }
}

@media (max-width: 720px){
  :root{
    --ex-left: 18px;
    --ex-right: 18px;
  }

  .ex-hero,
  .ex-section,
  .service-page{
    margin-left: 0 !important;
    padding-left: var(--ex-left) !important;
    padding-right: var(--ex-right) !important;
  }

  .ex-muted{
    padding-left: var(--ex-left) !important;
  }

  .workflow-grid,
  .audience-grid,
  .planned-grid,
  .report-grid{
    grid-template-columns: 1fr !important;
  }

  .ex-hero h1{
    font-size: 42px !important;
  }

  .ex-hero-visual{
    min-height: 300px !important;
    border-radius: 22px !important;
  }

  .product-preview-card{
    position: static !important;
    margin-top: 10px !important;
    width: 100% !important;
  }

  .hero-actions,
  .cta-band-actions{
    width: 100% !important;
  }

  .hero-actions .btn,
  .cta-band-actions .btn{
    width: 100% !important;
    justify-content: center !important;
  }
}


/* ==========================================================
   EnerXCo v79: real public site layout, hero, services, mobile
   ========================================================== */

:root{
  --ex-left: clamp(18px, 3vw, 48px);
  --ex-right: clamp(18px, 3vw, 48px);
  --ex-max: 1480px;
  --enerxco-hero-image: url('/assets/images/enerxco-hero-home.jpg?v=80');
}

/* Use more page width */
.header-inner,
.ex-hero,
.ex-section,
.service-page,
.page-wrap,
.account-layout,
.footer-inner{
  max-width: min(1480px, calc(100vw - 2 * var(--ex-right))) !important;
  width: min(1480px, calc(100vw - 2 * var(--ex-right))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.header-inner{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.ex-hero{
  grid-template-columns: minmax(420px, .88fr) minmax(520px, 1.12fr) !important;
  gap: clamp(36px, 4.4vw, 76px) !important;
}

/* Homepage hero image replacement */
.ex-hero-visual{
  min-height: clamp(420px, 42vw, 620px) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: 0 24px 70px rgba(16,24,40,.12) !important;
  border-radius: 32px !important;
  overflow: hidden !important;
}

.ex-hero-visual img{
  width: 100% !important;
  height: 100% !important;
  min-height: clamp(420px, 42vw, 620px) !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 32px !important;
  display: block !important;
}

/* Services page integrated text style */
.service-page .page-hero,
.service-page .service-feature,
.service-page .service-section,
.service-page .service-summary-inline,
.service-page .planned-card,
.service-page .report-grid > div,
.service-page .faq-list details,
.service-feature,
.service-summary-inline{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.service-page .service-feature{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px) !important;
  gap: clamp(28px, 4vw, 72px) !important;
  padding-top: 42px !important;
  padding-bottom: 42px !important;
  border-top: 1px solid #d0d5dd !important;
  border-bottom: 1px solid #d0d5dd !important;
}

.service-page .service-section{
  padding: 44px 0 !important;
  border-bottom: 1px solid #d0d5dd !important;
}

.service-summary-inline{
  border-left: 3px solid #006d77 !important;
  padding-left: 22px !important;
}

.service-page .planned-card,
.service-page .report-grid > div{
  border-top: 1px solid #d0d5dd !important;
  padding-top: 18px !important;
}

.service-page .faq-list details{
  border-top: 1px solid #d0d5dd !important;
  padding: 18px 0 !important;
}

/* Account / F280 workspace width */
.account-layout{
  grid-template-columns: 240px minmax(0, 1fr) !important;
  gap: 28px !important;
  max-width: min(1880px, calc(100vw - 32px)) !important;
  width: min(1880px, calc(100vw - 32px)) !important;
}

.account-main{
  width: 100% !important;
  min-width: 0 !important;
}

/* Calculator logo smaller */
.header-logo .brand-logo-img{
  width: clamp(132px, 17vw, 260px) !important;
  height: clamp(34px, 5vw, 58px) !important;
}
.app-header{
  height: 74px !important;
}
#print-report .print-first-logo{
  width: 1.25in !important;
  height: auto !important;
  max-height: .42in !important;
  object-fit: contain !important;
}

/* Better mobile */
@media (max-width: 980px){
  .ex-hero{
    grid-template-columns: 1fr !important;
  }
  .ex-hero-visual{
    min-height: 360px !important;
    order: -1 !important;
  }
  .ex-hero-visual img{
    min-height: 360px !important;
  }
  .service-page .service-feature{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px){
  .header-inner,
  .ex-hero,
  .ex-section,
  .service-page,
  .page-wrap,
  .footer-inner{
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
  }
  .ex-hero{
    padding-top: 34px !important;
    padding-bottom: 46px !important;
  }
  .ex-hero h1{
    font-size: clamp(34px, 11vw, 46px) !important;
  }
  .hero-lead,
  .ex-hero p{
    font-size: 17px !important;
  }
  .ex-hero-visual,
  .ex-hero-visual img{
    min-height: 300px !important;
    border-radius: 22px !important;
  }
  .service-page .service-feature,
  .service-page .service-section{
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .account-layout{
    display:block!important;
    width:calc(100% - 16px)!important;
    max-width:calc(100% - 16px)!important;
  }
  .account-sidebar{
    position:static!important;
    margin-bottom:18px!important;
  }
}


/* EnerXCo v80: reinforce corrected mobile header layout */
@media(max-width:900px){.header-inner{display:grid!important;grid-template-columns:minmax(0,1fr) 52px!important;align-items:center!important}.mobile-nav-toggle{grid-column:2!important;grid-row:1!important;justify-self:end!important;align-self:center!important}body.mobile-nav-open .nav-left,body.mobile-nav-open .nav-right{position:static!important;left:auto!important;right:auto!important;top:auto!important}}


/* EnerXCo v81 modal image refresh */
.workflow-modal-panel{width:min(1220px,96vw)!important;}
.workflow-modal-panel img{background:#fff!important;}