/* ============================================
   ATHENA CORPORATE ENERGY PTE LTD — style.css
   Palette extracted from Wix CSS variables:
     Navy   #1E2D3B  (--wix-color-15 / --wix-color-32)
     Gold   #EDCD1F  (--wix-color-7  / --wix-color-31)
     Dark   #3B3A3A  (--wix-color-5)
     Silver #C6C6C6  (--wix-color-3)
     Light  #F7F7F7  (--wix-color-2)
   Fonts: Raleway (stand-in for Avenir Heavy)
          DM Sans  (stand-in for Helvetica Light)
============================================ */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600;700;800;900&family=DM+Sans:wght@300;400;500&display=swap');

/* ── Reset ────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --navy:  #1E2D3B;
  --red:  #EDCD1F;
  --dark:  #3B3A3A;
  --red: #9b0e25;
  /* --red: #de1536; */
  --mid:   #757575;
  --silver:#C6C6C6;
  --light: #F7F7F7;
  --white: #FFFFFF;
  --fh: 'Raleway', sans-serif;
  --fb: 'DM Sans', sans-serif;
  --mw: 1140px;
  --hh: 76px;
  --e: cubic-bezier(.25,.46,.45,.94);
  --t: .3s var(--e);
}

html{scroll-behavior:smooth}
body{font-family:var(--fb);font-weight:300;color:var(--dark);background:var(--white);line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
ul{list-style:none}

.wrap{width:90%;max-width:var(--mw);margin-inline:auto}

/* shared atoms */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--fh);font-size:.66rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.eyebrow::before{content:'';width:26px;height:2px;background:var(--red);display:block}
.sec-title{font-family:var(--fh);font-weight:800;font-size:clamp(1.75rem,3vw,2.6rem);line-height:1.18;letter-spacing:-.01em;color:var(--navy);margin-bottom:14px}
.sec-title.lt{color:var(--white)}
.sec-sub{font-size:.96rem;color:var(--mid);line-height:1.75;max-width:580px}
.sec-sub.lt{color:rgba(255,255,255,.58)}

.btn{display:inline-flex;align-items:center;gap:7px;padding:13px 30px;font-family:var(--fh);font-weight:700;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;border-radius:2px;border:2px solid transparent;cursor:pointer;transition:all var(--t)}
.btn-gold{background:var(--red);color:var(--navy);border-color:var(--red)}
.btn-gold:hover{background:transparent;color:var(--red)}
.btn-wt{background:transparent;color:var(--white);border-color:rgba(255,255,255,.4)}
.btn-wt:hover{border-color:var(--white)}

/* scroll-reveal */
[data-r]{opacity:0;transform:translateY(22px);transition:opacity .65s var(--e),transform .65s var(--e)}
[data-r].on{opacity:1;transform:none}
[data-r][data-d="1"]{transition-delay:.1s}
[data-r][data-d="2"]{transition-delay:.2s}
[data-r][data-d="3"]{transition-delay:.3s}
[data-r][data-d="4"]{transition-delay:.4s}
[data-r][data-d="5"]{transition-delay:.5s}

/* ══════════════════════════════
   HEADER
══════════════════════════════ */
.site-header{position:fixed;inset:0 0 auto 0;height:var(--hh);background:var(--navy);z-index:900;display:flex;align-items:center;transition:box-shadow var(--t),transform var(--t)}
.site-header.scrolled{box-shadow:0 2px 28px rgba(0,0,0,.4)}
/* ── Hide-on-scroll: header tersembunyi saat scroll ke bawah ── */
.site-header.hidden{transform:translateY(-100%)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;width:90%;max-width:var(--mw);margin-inline:auto}

.logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Agar gambar tidak gepeng */
  padding: 0px; /* Opsional: memberi ruang di dalam kotak merah */
}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{width:50px;height:50px;display:grid;place-items:center;flex-shrink:0}
.logo-mark svg{width:22px;height:22px}
.logo-name{font-family:var(--fh);font-weight:800;font-size:1.5rem;color:var(--white);letter-spacing:.03em;line-height:1.15}
.logo-name span{display:block;font-weight:400;font-size:0.8rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:2px}

.site-nav{display:flex;align-items:center;gap:30px}
.site-nav a{font-family:var(--fh);font-size:.74rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.62);transition:color var(--t);position:relative;padding-bottom:3px}
.site-nav a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--red);transition:width var(--t)}
.site-nav a:hover,.site-nav a.active{color:var(--white)}
.site-nav a:hover::after,.site-nav a.active::after{width:100%}
.nav-cta{padding:9px 22px !important;background:var(--red) !important;color:var(--navy) !important;font-weight:800 !important;border-radius:2px}
.nav-cta::after{display:none !important}
.nav-cta:hover{background:var(--white) !important}

.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.hamburger span{display:block;width:24px;height:2px;background:var(--white);transition:transform var(--t),opacity var(--t)}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:820px){
  /* Header harus overflow visible agar nav bisa muncul ke bawah */
  .site-header{overflow:visible}

  .hamburger{display:flex}

  /* Nav position:absolute → ikut header secara otomatis */
  .site-nav{
    position:absolute;
    top:100%;
    left:0;right:0;
    background:var(--navy);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:14px 6% 26px;
    /* Saat tertutup: invisible, geser sedikit ke atas */
    transform:translateY(-10px);
    visibility:hidden;
    opacity:0;
    transition:transform var(--t),opacity var(--t),visibility var(--t);
    border-top:1px solid rgba(255,255,255,.08);
    box-shadow:0 10px 30px rgba(0,0,0,.4)
  }
  /* Saat terbuka: slide down + tampil */
  .site-nav.open{transform:translateY(0);visibility:visible;opacity:1}
  .site-nav a{padding:13px 0;width:100%;border-bottom:1px solid rgba(255,255,255,.06)}
  .nav-cta{margin-top:12px;display:block !important;text-align:center;width:100%}
}

/* ══════════════════════════════
   HERO
══════════════════════════════ */
.hero{min-height:100vh;padding-top:var(--hh);position:relative;display:flex;align-items:center;overflow:hidden;background:var(--navy)}

.hero-bg{position:absolute;inset:0;z-index:0}
/* .hero-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(1) saturate(0.8)} */
/* .hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(30,45,59,.94) 28%,rgba(30,45,59,.25) 100%)} */

.hero-body{position:relative;z-index:2;padding:80px 0 140px}   /* extra bottom pad for stats strip */

.hero-tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--fh);font-size:.66rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:18px}
.hero-tag::before{content:'';width:26px;height:2px;background:var(--red);display:block}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1) saturate(1);
  opacity: 0.9; /* 👈 Tambahkan ini (misal: 0.5 untuk transparan 50%) */
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Mengubah .94 menjadi .70 dan .25 menjadi .10 */
  background: linear-gradient(100deg, rgba(30,45,59,.30) 20%, rgba(30,45,59,.10) 100%);
}

.hero-title{font-family:var(--fh);font-weight:900;font-size:clamp(2.4rem,5.5vw,4.2rem);line-height:1.08;color:var(--white);letter-spacing:-.01em;margin-bottom:20px}
.hero-title em{font-style:normal;color:var(--red)}

.hero-desc{font-size:1.02rem;color:rgba(255,255,255,.65);line-height:1.82;max-width:500px;margin-bottom:38px}

.hero-btns{display:flex;gap:14px;flex-wrap:wrap}


/* stats strip pinned to bottom */
.stats-strip{position:absolute;bottom:0;left:0;right:0;z-index:3;background:var(--red)}
.stats-inner{width:90%;max-width:var(--mw);margin-inline:auto;display:flex;padding:20px 0}
.stat{flex:1;padding:0 32px;border-right:1px solid rgba(30,45,59,.18)}
.stat:first-child{padding-left:0}
.stat:last-child{border-right:none}
.stat-n{font-family:var(--fh);font-weight:900;font-size:1.9rem;color:var(--navy);line-height:1}
.stat-l{font-size:.66rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(30,45,59,.62);margin-top:4px}

@media(max-width:600px){
  .stats-inner{flex-wrap:wrap;gap:14px;padding:16px 0}
  .stat{border-right:none;flex:0 0 44%;padding:0 10px}
  .hero-body{padding-bottom:180px}
}


/* ══════════════════════════════
   ABOUT INTRO STRIP
══════════════════════════════ */
.about-strip{background:var(--light);padding:68px 0;text-align:center}
.about-strip .sec-sub{margin-inline:auto;max-width:740px;font-size:1.02rem;color:var(--dark);line-height:1.82}


/* Penyesuaian untuk blok informasi baru */
@media(max-width: 768px) {
  .details-grid {
    grid-template-columns: 1fr !important;
  }
  .share-bar div {
    font-size: 0.6rem !important;
  }
}
/* ══════════════════════════════
   BUSINESS SECTORS
══════════════════════════════ */
.sectors{padding:88px 0;background:var(--white)}
.sectors-hd{text-align:center;margin-bottom:52px}
.sectors-hd .sec-sub{margin-inline:auto}

.sectors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}

.s-card{border:1px solid var(--silver);border-radius:3px;overflow:hidden;transition:box-shadow var(--t),transform var(--t),border-color var(--t)}
.s-card:hover{box-shadow:0 18px 52px rgba(30,45,59,.13);transform:translateY(-5px);border-color:var(--red)}

.s-img{height:216px;overflow:hidden}
.s-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.75);transition:transform .6s var(--e),filter .6s var(--e)}
.s-card:hover .s-img img{transform:scale(1.06);filter:saturate(1)}

.s-body{padding:26px 26px 30px}
.s-tag{display:inline-block;font-family:var(--fh);font-size:.58rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red);background:rgba(237,205,31,.11);padding:3px 9px;border-radius:2px;margin-bottom:10px}
.s-name{font-family:var(--fh);font-weight:800;font-size:1.1rem;color:var(--navy);margin-bottom:9px}
.s-desc{font-size:.87rem;color:var(--mid);line-height:1.75}

@media(max-width:820px){.sectors-grid{grid-template-columns:1fr;max-width:440px;margin-inline:auto}}
@media(min-width:580px) and (max-width:820px){.sectors-grid{grid-template-columns:1fr 1fr;max-width:100%}}

/* ══════════════════════════════
   HIGHLIGHTED PROJECTS
══════════════════════════════ */
.projects{padding:88px 0;background:var(--navy);position:relative;overflow:hidden}
.projects::before{content:'';position:absolute;top:-160px;right:-160px;width:520px;height:520px;background:radial-gradient(circle,rgba(237,205,31,.06) 0%,transparent 70%);pointer-events:none}

.proj-hd{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:44px}

.proj-grid{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:272px 272px;gap:10px}
.proj-item{position:relative;overflow:hidden;border-radius:2px}
.proj-item:first-child{grid-row:1/3}
.proj-item img{width:100%;height:100%;object-fit:cover;filter:brightness(.72) saturate(.75);transition:transform .7s var(--e),filter .7s var(--e)}
.proj-item:hover img{transform:scale(1.06);filter:brightness(.85) saturate(1)}

.proj-lbl{position:absolute;bottom:0;left:0;right:0;padding:18px 20px;background:linear-gradient(to top,rgba(30,45,59,.85) 0%,transparent 100%);font-family:var(--fh);font-weight:700;font-size:.78rem;color:var(--white);letter-spacing:.07em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity var(--t),transform var(--t)}
.proj-item:hover .proj-lbl{opacity:1;transform:none}

@media(max-width:700px){
  .proj-grid{grid-template-columns:1fr 1fr;grid-template-rows:190px 190px}
  .proj-item:first-child{grid-row:auto}
}

/* ══════════════════════════════
   OUR CLIENTS
══════════════════════════════ */
.clients{padding:68px 0;background:var(--light);text-align:center}
.clients-ttl{font-family:var(--fh);font-weight:800;font-size:.88rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);margin-bottom:36px}
.clients-row{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}
.client-pill{display:flex;align-items:center;justify-content:center;height:52px;padding:0 26px;background:var(--white);border:1px solid var(--silver);border-radius:3px;transition:border-color var(--t),box-shadow var(--t)}
.client-pill:hover{border-color:var(--red);box-shadow:0 4px 18px rgba(237,205,31,.18)}
.client-pill span{font-family:var(--fh);font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mid)}

/* ══════════════════════════════
   GET IN TOUCH
══════════════════════════════ */
.contact{padding:88px 0;background:var(--white)}
.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:68px;align-items:start}

.c-item{display:flex;gap:15px;margin-bottom:26px}
.c-ico{flex-shrink:0;width:43px;height:43px;background:rgba(237,205,31,.12);border-radius:3px;display:grid;place-items:center}
.c-ico svg{width:19px;height:19px;stroke:var(--red)}
.c-lbl{font-family:var(--fh);font-size:.62rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--mid);margin-bottom:3px}
.c-val{font-size:.9rem;color:var(--dark);line-height:1.6}
.c-val a:hover{color:var(--red)}

.map-box{height:420px;border-radius:3px;overflow:hidden;box-shadow:0 16px 52px rgba(30,45,59,.12)}
.map-box iframe{width:100%;height:100%;border:none}

@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:36px}.map-box{height:300px}}

/* ══════════════════════════════
   FOOTER
══════════════════════════════ */
.site-footer{background:var(--navy);padding:60px 0 0;color:rgba(255,255,255,.5)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:52px;padding-bottom:46px;border-bottom:1px solid rgba(255,255,255,.1)}
.f-about{font-size:.84rem;line-height:1.8;margin-top:12px;max-width:290px;color:rgba(255,255,255,.45)}
.f-ttl{font-family:var(--fh);font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:16px}
.f-links{display:flex;flex-direction:column;gap:9px}
.f-links a{font-size:.84rem;color:rgba(255,255,255,.48);transition:color var(--t),padding-left var(--t)}
.f-links a:hover{color:var(--white);padding-left:5px}

.soc-row{display:flex;gap:9px;margin-top:22px}
.soc{width:35px;height:35px;border-radius:3px;border:1px solid rgba(255,255,255,.13);display:grid;place-items:center;transition:background var(--t),border-color var(--t)}
.soc svg{width:14px;height:14px;fill:rgba(255,255,255,.52);transition:fill var(--t)}
.soc:hover{background:var(--red);border-color:var(--red)}
.soc:hover svg{fill:var(--navy)}

.footer-bar{padding:18px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.74rem;color:rgba(255,255,255,.26)}

@media(max-width:820px){.footer-grid{grid-template-columns:1fr;gap:28px}}

/* ══════════════════════════════
   SCROLL-TO-TOP
══════════════════════════════ */
#top-btn{position:fixed;bottom:26px;right:26px;width:43px;height:43px;background:var(--red);border:none;border-radius:2px;cursor:pointer;display:grid;place-items:center;opacity:0;transform:translateY(10px);transition:opacity var(--t),transform var(--t);z-index:800}
#top-btn.show{opacity:1;transform:none}
#top-btn svg{width:16px;height:16px;stroke:var(--navy)}