/* =========================================================
   ENERA ENERGY SYSTEMS LLC
   site.css — clean responsive version
   Desktop master artwork: 1536×1024 with unified HOME header/footer.
   Desktop artwork preserved.
   Mobile layout rebuilt as normal responsive HTML.
   ========================================================= */

/* -------------------------
   GLOBAL
   ------------------------- */

:root{
    --navy:#00183d;
    --gold:#f5a800;
    --text:#07183b;
    --cream:#fff4df;
    --white:#ffffff;
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
    width:100%;
    min-height:100%;
    background:#fff;
}

body{
    font-family:Arial,Helvetica,sans-serif;
    color:var(--text);
}

.page{
    position:relative;
    width:100%;
    max-width:1536px;
    margin:0 auto;
    overflow:hidden;
    line-height:0;
}

/* -------------------------
   DESKTOP ARTWORK
   ------------------------- */

/* -------------------------
   INVESTORS — DESKTOP PAGE DIMENSIONS
   Match the 3:2 canvas used by the other internal desktop pages.
   ------------------------- */
@media (min-width:701px){
    .desktop-investors{
        position:relative !important;
        width:100% !important;
        max-width:100% !important;
        margin:0 auto !important;
        overflow:visible !important;
        aspect-ratio:3 / 2 !important;
    }

    .desktop-investors > img.design{
        display:block !important;
        width:100% !important;
        height:100% !important;
        max-width:none !important;
        margin:0 !important;
        object-fit:fill !important;
        clip-path:none !important;
    }
}


.design{
    display:block;
    width:100%;
    height:auto;
}

.overlay-nav{
    position:absolute;
    inset:0;
    z-index:1000;
    pointer-events:none;
}

.nav-hit{
    position:absolute;
    display:block;
    z-index:1001;
    pointer-events:auto;
    cursor:pointer;
    background:transparent;
    text-decoration:none;
}

/* Desktop navigation must always sit above artwork, masks, and other overlays. */
.nav-hit:focus-visible,
.cta-hit:focus-visible{
    outline:3px solid var(--gold);
    outline-offset:2px;
}

.cta-hit{
    position:absolute;
    display:block;
    background:transparent;
    pointer-events:auto;
}

.domain-cover{
    position:absolute;
    right:6%;
    bottom:2.2%;
    width:18.5%;
    height:4.8%;
    background:var(--navy);
    color:var(--gold);
    display:flex;
    align-items:center;
    justify-content:center;
    font:600 clamp(8px,1.05vw,16px)/1 Arial,Helvetica,sans-serif;
    letter-spacing:.12em;
    text-align:center;
    white-space:nowrap;
}

.contact-domain-cover{
    position:absolute;
    left:8.2%;
    top:82%;
    width:19.5%;
    height:5%;
    background:#fff;
    color:var(--text);
    display:flex;
    align-items:center;
    justify-content:flex-start;
    font:400 clamp(8px,1.05vw,16px)/1 Arial,Helvetica,sans-serif;
    white-space:nowrap;
}

/* =========================================================
   MOBILE
   The original problem was not simply the media query.
   .page used line-height:0 for the desktop artwork and the
   mobile HTML inherited it. The mobile layout below resets
   line-height and removes all desktop absolute-positioning
   behavior from the mobile section.
   ========================================================= */

/* Mobile version is hidden on desktop. */
.mobile-home{
    display:none;
}

/* Never allow desktop overlay elements to participate in
   the mobile layout. */
@media (max-width:700px){

    html,
    body{
        width:100%;
        min-width:0;
        max-width:100%;
        overflow-x:hidden;
        background:var(--cream);
    }

    body{
        line-height:1.45;
    }

    .page{
        width:100%;
        max-width:none;
        min-width:0;
        margin:0;
        overflow:hidden;
        line-height:1.45;
        background:var(--cream);
    }

    /* Desktop artwork/navigation is completely removed. */
    .desktop-home{
        display:none !important;
    }

    /* Mobile site becomes the only visible page. */
    .mobile-home{
        display:block !important;
        position:relative;
        width:100%;
        min-width:0;
        max-width:100%;
        min-height:100vh;
        overflow:hidden;
        background:var(--cream);
        color:var(--text);
        line-height:1.45;
        font-family:Arial,Helvetica,sans-serif;
    }

    .mobile-home *,
    .mobile-home *::before,
    .mobile-home *::after{
        box-sizing:border-box;
    }

    /* -------------------------
       MOBILE HEADER
       ------------------------- */

    .mobile-header{
        position:relative;
        z-index:100;
        width:100%;
        min-height:68px;
        margin:0;
        padding:12px 16px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        background:var(--navy);
        color:#fff;
        line-height:1.1;
    }

    .mobile-brand{
        display:flex;
        flex-direction:column;
        justify-content:center;
        min-width:0;
        color:#fff;
        text-decoration:none;
        line-height:1;
    }

    .mobile-brand .brand-main{
        display:block;
        font-size:24px;
        font-weight:500;
        letter-spacing:.16em;
        line-height:1;
        white-space:nowrap;
    }

    .mobile-brand .brand-sub{
        display:block;
        margin-top:5px;
        font-size:8px;
        font-weight:600;
        letter-spacing:.28em;
        line-height:1;
        color:var(--gold);
        white-space:nowrap;
    }

    .menu-toggle{
        flex:0 0 auto;
        width:46px;
        height:42px;
        margin:0;
        padding:0;
        border:1px solid rgba(245,168,0,.65);
        border-radius:4px;
        background:transparent;
        color:var(--gold);
        font-family:Arial,Helvetica,sans-serif;
        font-size:25px;
        line-height:42px;
        text-align:center;
        cursor:pointer;
        -webkit-appearance:none;
        appearance:none;
    }

    .menu-toggle:focus-visible{
        outline:3px solid var(--gold);
        outline-offset:2px;
    }

    /* -------------------------
       MOBILE MENU
       ------------------------- */

    .mobile-menu{
        position:relative;
        z-index:90;
        display:none;
        width:100%;
        margin:0;
        padding:8px 16px 14px;
        background:var(--navy);
        border-top:1px solid rgba(245,168,0,.35);
        line-height:1.2;
    }

    .mobile-menu.is-open,
    .mobile-menu.open,
    .mobile-menu[aria-hidden="false"]{
        display:block;
    }

    .mobile-menu a{
        display:block;
        width:100%;
        margin:0;
        padding:13px 4px;
        border-bottom:1px solid rgba(255,255,255,.12);
        color:#fff;
        font-size:14px;
        font-weight:600;
        letter-spacing:.12em;
        line-height:1.2;
        text-decoration:none;
    }

    .mobile-menu a:last-child{
        border-bottom:0;
    }

    .mobile-menu a:active,
    .mobile-menu a:focus-visible{
        color:var(--gold);
    }

    /* -------------------------
       MOBILE HERO
       ------------------------- */

    .mobile-hero{
        position:relative;
        width:100%;
        min-height:500px;
        margin:0;
        padding:0;
        overflow:hidden;
        background:var(--navy);
        line-height:1.45;
    }

    .mobile-hero img{
        display:block;
        width:100%;
        max-width:100%;
        height:auto;
    }

    .mobile-hero .hero-shade{
        position:absolute;
        inset:0;
        z-index:1;
        pointer-events:none;
        background:linear-gradient(
            to bottom,
            rgba(0,24,61,.10) 0%,
            rgba(0,24,61,.28) 48%,
            rgba(0,24,61,.88) 100%
        );
    }

    .mobile-hero > *:not(.hero-shade){
        position:relative;
        z-index:2;
    }

    .mobile-hero h1,
    .mobile-hero h2,
    .mobile-hero h3,
    .mobile-hero p{
        max-width:100%;
        margin-left:0;
        margin-right:0;
        line-height:1.2;
    }

    .mobile-hero h1{
        margin-top:0;
        margin-bottom:14px;
        font-size:clamp(32px,9vw,54px);
        font-weight:700;
        line-height:1.02;
        letter-spacing:-.02em;
        color:#fff;
    }

    .mobile-hero h2{
        margin-top:0;
        margin-bottom:10px;
        font-size:clamp(22px,6vw,34px);
        line-height:1.1;
        color:#fff;
    }

    .mobile-hero p{
        margin-top:0;
        margin-bottom:12px;
        font-size:15px;
        line-height:1.5;
        color:#fff;
    }

    /* Generic content wrapper if present in the mobile HTML. */
    .mobile-hero .hero-content,
    .mobile-hero .hero-text,
    .mobile-hero .hero-copy{
        position:relative;
        z-index:3;
        width:100%;
        max-width:620px;
        margin:0 auto;
        padding:42px 22px 34px;
    }

    .mobile-hero .cta,
    .mobile-hero .hero-cta,
    .mobile-hero a.cta,
    .mobile-hero .cta-button{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-height:46px;
        margin-top:12px;
        padding:11px 18px;
        border:1px solid var(--gold);
        background:transparent;
        color:#fff;
        font-size:13px;
        font-weight:700;
        letter-spacing:.08em;
        line-height:1.2;
        text-decoration:none;
    }

    /* -------------------------
       MOBILE CONTENT
       ------------------------- */

    .mobile-home main,
    .mobile-home section,
    .mobile-home article,
    .mobile-home header,
    .mobile-home nav,
    .mobile-home footer{
        max-width:100%;
    }

    .mobile-home section:not(.mobile-hero){
        position:relative;
        width:100%;
        margin:0;
        padding:32px 20px;
        overflow:hidden;
        line-height:1.5;
    }

    .mobile-home h1,
    .mobile-home h2,
    .mobile-home h3,
    .mobile-home h4{
        position:relative;
        margin:0 0 12px;
        padding:0;
        color:var(--text);
        line-height:1.12;
        white-space:normal;
    }

    .mobile-home h1{
        font-size:clamp(30px,8vw,46px);
    }

    .mobile-home h2{
        font-size:clamp(24px,6.5vw,36px);
    }

    .mobile-home h3{
        font-size:clamp(19px,5.2vw,28px);
    }

    .mobile-home p{
        position:relative;
        margin:0 0 14px;
        padding:0;
        color:var(--text);
        font-size:16px;
        line-height:1.55;
        white-space:normal;
    }

    .mobile-home ul,
    .mobile-home ol{
        margin:0 0 18px;
        padding-left:22px;
        line-height:1.5;
    }

    .mobile-home li{
        margin:0 0 8px;
        line-height:1.5;
    }

    .mobile-home a{
        position:relative;
        color:inherit;
        line-height:inherit;
    }

    /* Prevent any legacy desktop absolute-positioning from
       being inherited by mobile content. */
    .mobile-home .nav-hit,
    .mobile-home .cta-hit,
    .mobile-home .domain-cover,
    .mobile-home .contact-domain-cover,
    .mobile-home .overlay-nav{
        position:static;
        inset:auto;
        left:auto;
        right:auto;
        top:auto;
        bottom:auto;
        width:auto;
        height:auto;
        background:transparent;
        pointer-events:auto;
    }

    /* If old desktop artwork is accidentally nested in the
       mobile section, do not let it create a second page. */
    .mobile-home .design{
        position:relative;
        display:block;
        width:100%;
        max-width:100%;
        height:auto;
    }

    /* -------------------------
       MOBILE FEATURE / CARD
       ------------------------- */

    .mobile-home .features,
    .mobile-home .feature-grid,
    .mobile-home .cards,
    .mobile-home .card-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:18px;
        width:100%;
        margin:0;
        padding:0;
    }

    .mobile-home .feature,
    .mobile-home .feature-card,
    .mobile-home .card{
        position:relative;
        width:100%;
        min-width:0;
        margin:0;
        padding:20px;
        background:rgba(255,255,255,.72);
        border:1px solid rgba(0,24,61,.12);
        border-radius:4px;
        line-height:1.5;
    }

    .mobile-home .feature h3,
    .mobile-home .feature-card h3,
    .mobile-home .card h3{
        margin-bottom:8px;
    }

    /* -------------------------
       MOBILE FOOTER / DOMAIN
       ------------------------- */

    .mobile-home .domain-cover,
    .mobile-home .contact-domain-cover{
        display:inline-flex;
        position:relative;
        left:auto;
        right:auto;
        top:auto;
        bottom:auto;
        width:auto;
        max-width:100%;
        height:auto;
        min-height:32px;
        margin:12px 0 0;
        padding:7px 10px;
        font-size:10px;
        line-height:1.2;
        white-space:normal;
        overflow-wrap:anywhere;
    }
}

/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width:430px){

    .mobile-header{
        min-height:62px;
        padding:10px 13px;
    }

    .mobile-brand .brand-main{
        font-size:20px;
        letter-spacing:.13em;
    }

    .mobile-brand .brand-sub{
        font-size:7px;
        letter-spacing:.24em;
    }

    .menu-toggle{
        width:42px;
        height:38px;
        font-size:23px;
        line-height:38px;
    }

    .mobile-menu{
        padding-left:13px;
        padding-right:13px;
    }

    .mobile-menu a{
        padding:12px 3px;
        font-size:13px;
    }

    .mobile-hero{
        min-height:460px;
    }

    .mobile-hero .hero-content,
    .mobile-hero .hero-text,
    .mobile-hero .hero-copy{
        padding:32px 18px 28px;
    }

    .mobile-home section:not(.mobile-hero){
        padding:28px 16px;
    }

    .mobile-home p{
        font-size:15px;
    }

    .mobile-home .feature,
    .mobile-home .feature-card,
    .mobile-home .card{
        padding:17px;
    }
}

/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width:360px){

    .mobile-brand .brand-main{
        font-size:18px;
    }

    .mobile-brand .brand-sub{
        font-size:6px;
    }

    .mobile-hero h1{
        font-size:31px;
    }

    .mobile-home h2{
        font-size:24px;
    }

    .mobile-home p{
        font-size:14px;
    }
}

/* =========================================================
   ACCESSIBILITY / TOUCH
   ========================================================= */

@media (max-width:700px){

    .mobile-home button,
    .mobile-home a{
        -webkit-tap-highlight-color:rgba(245,168,0,.15);
    }

    .mobile-home a:focus-visible,
    .mobile-home button:focus-visible{
        outline:3px solid var(--gold);
        outline-offset:2px;
    }
}

/* =========================================================
   DESKTOP VISIBILITY — FINAL
   ========================================================= */

@media (min-width:701px){

    .desktop-home{
        display:block;
    }

    .mobile-home{
        display:none !important;
    }
}

/* =========================================================
   ENERA — MOBILE-ONLY REPAIR (SAFE PRODUCTION PATCH)
   This patch is appended to the exact production site.css.
   It is entirely restricted to max-width:700px.
   Desktop CSS above this line is intentionally unchanged.
   ========================================================= */
@media (max-width:700px){

  /* 1. Never let desktop artwork render on mobile. */
  .desktop-home,
  .desktop-about,
  .desktop-strategy,
  .desktop-opportunities,
  .desktop-investors,
  .desktop-contact{
    display:none !important;
    visibility:hidden !important;
  }

  /* Protect desktop overlay elements that may sit outside wrappers. */
  .page > .design,
  .page > .overlay-nav,
  .page > .nav-hit,
  .page > .cta-hit,
  .page > .domain-cover,
  .page > .contact-domain-cover{
    display:none !important;
    visibility:hidden !important;
  }

  /* 2. Keep mobile content full-width and prevent horizontal overflow. */
  html,
  body,
  .page,
  .mobile-home{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  .page{
    margin:0 !important;
    line-height:1.45 !important;
  }

  .mobile-home{
    display:block !important;
    position:relative !important;
    overflow:hidden !important;
    line-height:1.45 !important;
  }

  /* 3. FIX THE MOBILE HERO HEIGHT.
        The existing 500px / 460px minimum creates the large
        dark empty area visible on the phone. */
  .mobile-home .mobile-hero{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  /* 4. FIX HERO TEXT CONTRAST.
        .mobile-home h1/p occurs later in the original CSS and
        overrides the earlier white hero text. */
  .mobile-home .mobile-hero h1,
  .mobile-home .mobile-hero h2,
  .mobile-home .mobile-hero h3,
  .mobile-home .mobile-hero p{
    color:#fff !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  .mobile-home .mobile-hero .hero-kicker{
    color:var(--gold) !important;
  }

  /* Keep the hero content compact and natural. */
  .mobile-home .mobile-hero .hero-content,
  .mobile-home .mobile-hero .hero-text{
    height:auto !important;
    min-height:0 !important;
    margin:0 auto !important;
  }

  /* Home page has .hero-copy as a paragraph.
     Prevent the generic .hero-copy wrapper rule from adding
     wrapper padding to that paragraph itself. */
  .mobile-home .mobile-hero p.hero-copy{
    height:auto !important;
    min-height:0 !important;
    margin-top:0 !important;
    padding:0 !important;
  }

  /* 5. Mobile menu remains above page content. */
  .mobile-header,
  .mobile-menu{
    position:relative !important;
    z-index:100 !important;
  }

  .mobile-menu a,
  .mobile-menu a:visited{
    color:#fff !important;
  }

  .menu-toggle{
    color:var(--gold) !important;
    border-color:rgba(245,168,0,.65) !important;
  }
}

@media (max-width:430px){
  .mobile-home .mobile-hero .hero-content,
  .mobile-home .mobile-hero .hero-text{
    padding:32px 18px 28px !important;
  }

  .mobile-home .mobile-hero p.hero-copy{
    padding:0 !important;
  }

  .mobile-home .mobile-hero{
    min-height:0 !important;
  }
}