#apnPage .apn,
#apnPage .apn *,
#apnPage .apn *::before,
#apnPage .apn *::after{box-sizing:border-box}

#apnPage .apn{
  --navy:#0B2A55;
  --navy-deep:#081D3D;
  --navy-mid:#123B73;
  --blue:#1E63B5;
  --blue-light:#4D9AE0;

  --bg:var(--navy-deep);
  --bg-soft:#F4F6FA;
  --card:#FFFFFF;
  --card-hi:#F7F9FC;
  --card-dark:#0F2F5E;
  --line:#E1E6EF;
  --line-dark:rgba(255,255,255,.14);
  --ink:#0F2036;
  --ink-light:#FFFFFF;
  --muted:#5C6E88;
  --muted-light:rgba(255,255,255,.72);

  --lime:#B5842C;
  --lime-deep:#8C651F;
  --lime-dim:rgba(181,132,44,.12);
  --gold:#B5842C;

  --font-head:'ABC Favorit Trial','Space Grotesk','Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg-soft);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

#apnPage .apn :where(p){margin:0 0 16px; padding:0; font-family:var(--font-body); font-weight:400; line-height:1.65; color:var(--muted); font-size:15.5px}
#apnPage .apn :where(p:last-child){margin-bottom:0}
#apnPage .apn :where(h1,h2,h3,h4){margin:0; padding:0; font-family:var(--font-head); font-weight:600; font-style:normal; letter-spacing:-.02em; line-height:1.08; color:var(--ink)}
#apnPage .apn :where(img){max-width:100%; height:auto; display:block}
#apnPage .apn :where(a){color:inherit; text-decoration:none}
#apnPage .apn :where(ul,ol,li){margin:0; padding:0; list-style:none}
#apnPage .apn :where(button){-webkit-appearance:none; appearance:none; margin:0; padding:0; font:inherit; font-family:var(--font-body); color:inherit; background:none; border:0}

#apnPage .apn-wrap{max-width:1480px; margin:0 auto; padding-left:24px; padding-right:24px}
#apnPage .apn-sec{padding:clamp(56px,8vw,120px) 0}

#apnPage .apn-grain{position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* SCROLL REVEAL */
#apnPage .apn-rv{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.16,.8,.28,1), transform .8s cubic-bezier(.16,.8,.28,1)}
#apnPage .apn-rv.is-in{opacity:1; transform:translateY(0)}
#apnPage .apn-rv--1{transition-delay:.06s}
#apnPage .apn-rv--2{transition-delay:.14s}
#apnPage .apn-rv--3{transition-delay:.22s}
#apnPage .apn-rv--4{transition-delay:.30s}

/* EYEBROW */
#apnPage .apn-eyebrow{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body); font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--lime); margin-bottom:16px}
#apnPage .apn-eyebrow::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 12px 2px var(--lime-dim)}

/* HEADING */
#apnPage .apn-h2{font-family:var(--font-head); font-weight:600; color:var(--ink); font-size:clamp(1.9rem,3.6vw,44px); line-height:1.08; letter-spacing:-.02em}
#apnPage .apn-h2 em{font-style:normal; color:var(--lime)}

/* BUTTON */
#apnPage .apn-btn{
  display:inline-flex; align-items:center; gap:10px; padding:16px 28px; border-radius:100px;
  font-family:var(--font-body); font-size:13.5px; font-weight:700; letter-spacing:.01em; text-decoration:none;
  background:var(--lime); color:#fff;
  box-shadow:0 0 0 0 rgba(181,132,44,0);
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
  white-space:nowrap; position:relative;
}
#apnPage .apn-btn:hover{transform:translateY(-2px); box-shadow:0 10px 30px -6px rgba(181,132,44,.45)}
#apnPage .apn-btn svg{width:14px; height:14px; flex:none; transition:transform .3s ease}
#apnPage .apn-btn:hover svg{transform:translateX(4px) rotate(-45deg)}
#apnPage .apn-btn--outline{background:transparent; color:var(--ink); border:1px solid var(--line); box-shadow:none}
#apnPage .apn-btn--outline:hover{border-color:var(--lime); color:var(--lime); background:var(--lime-dim)}
#apnPage .apn-btn--sm{padding:11px 20px; font-size:12.5px}
#apnPage .apn-hero .apn-btn--outline,
#apnPage .apn-contact .apn-btn--outline{color:#fff; border-color:var(--line-dark)}
#apnPage .apn-contact .apn-btn--outline:hover{border-color:var(--lime); color:var(--lime); background:rgba(181,132,44,.16)}
#apnPage .apn-hero .apn-btn--outline:hover{color:#fff; border-color:var(--line-dark); background:transparent}

/* CARD base */
#apnPage .apn-card{background:var(--card); border:1px solid var(--line); border-radius:16px; position:relative}

/* HERO */
#apnPage .apn-hero{position:relative; background:var(--navy-deep); overflow:hidden; padding-top:clamp(120px,14vw,168px); padding-bottom:clamp(56px,7vw,88px)}
#apnPage .apn-hero__bg{position:absolute; inset:0; z-index:0}
#apnPage .apn-hero__bg img{width:100%; height:100%; object-fit:cover}
#apnPage .apn-hero__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(18,59,115,.68) 0%, rgba(11,42,85,.74) 45%, rgba(8,29,61,.82) 100%)}
#apnPage .apn-hero__glow{position:absolute; z-index:1; pointer-events:none; width:900px; height:900px; left:50%; top:-420px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle, rgba(181,132,44,.18), rgba(181,132,44,0) 62%)}
#apnPage .apn-hero__glow--blue{position:absolute; z-index:1; pointer-events:none; width:640px; height:640px; right:-220px; bottom:-260px; border-radius:50%; background:radial-gradient(circle, rgba(77,154,224,.25), rgba(77,154,224,0) 65%)}
#apnPage .apn-hero .apn-grain{z-index:1}
#apnPage .apn-hero .apn-wrap{position:relative; z-index:2}
#apnPage .apn-hero h1,
#apnPage .apn-hero p,
#apnPage .apn-hero .apn-eyebrow{color:var(--ink-light)}
#apnPage .apn-hero .apn-eyebrow{color:var(--lime)}
#apnPage .apn-hero p{color:var(--muted-light)}
#apnPage .apn-hero .apn-card{background:var(--card-dark); border-color:var(--line-dark)}

#apnPage .apn-hero__top{display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:clamp(20px,3vw,32px)}

#apnPage .apn-hero h1{font-size:clamp(2.4rem,4.6vw,64px); line-height:1.1; color:#fff; max-width:26ch}
#apnPage .apn-hero h1 .apn-line{display:block; overflow:hidden}
#apnPage .apn-hero h1 .apn-line span{display:block; transform:translateY(110%); transition:transform 1s cubic-bezier(.16,.8,.28,1)}
#apnPage .apn-hero.is-ready h1 .apn-line span{transform:translateY(0)}
#apnPage .apn-hero h1 .apn-line:nth-child(1) span{transition-delay:.1s}
#apnPage .apn-hero h1 .apn-line:nth-child(2) span{transition-delay:.2s}
#apnPage .apn-hero h1 em{font-style:normal; color:#fff}

#apnPage .apn-hero__row{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-top:clamp(20px,3vw,32px); flex-wrap:wrap}
#apnPage .apn-hero__row--top{display:block}
#apnPage .apn-hero__desc{max-width:640px; margin-top:clamp(20px,3vw,32px); opacity:0; transform:translateY(14px); transition:opacity .8s ease .45s, transform .8s ease .45s}
#apnPage .apn-hero.is-ready .apn-hero__desc{opacity:1; transform:translateY(0)}
#apnPage .apn-hero__desc p{font-size:16px; margin-bottom:24px}
#apnPage .apn-hero__btns{display:flex; align-items:center; gap:12px; flex-wrap:wrap}

#apnPage .apn-hero__aside{flex:0 0 auto; text-align:right; opacity:0; transform:translateY(14px); transition:opacity .8s ease .6s, transform .8s ease .6s}
#apnPage .apn-hero.is-ready .apn-hero__aside{opacity:1; transform:translateY(0)}
#apnPage .apn-hero__aside b{display:block; font-family:var(--font-head); font-weight:700; font-size:clamp(34px,4.6vw,58px); line-height:1; color:var(--lime)}
#apnPage .apn-hero__aside span{display:block; margin-top:6px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-light)}

#apnPage .apn-hero__strip{
  display:grid; grid-template-columns:1.1fr 0.9fr 1fr; grid-auto-rows:1fr; gap:16px;
  margin-top:clamp(16px,2.4vw,26px); height:190px;
  opacity:0; transform:translateY(20px); transition:opacity .8s ease .7s, transform .8s ease .7s;
}
#apnPage .apn-hero.is-ready .apn-hero__strip{opacity:1; transform:translateY(0)}

#apnPage .apn-hero__brand{padding:28px; display:flex; flex-direction:column; justify-content:space-between; background:var(--lime); border-color:var(--lime)}
#apnPage .apn-hero__brand b{font-family:var(--font-head); font-weight:700; font-size:clamp(16px,1.8vw,21px); line-height:1.25; color:#fff; max-width:16ch}
#apnPage .apn-hero__brand span{display:block; margin-top:10px; font-size:11.5px; color:rgba(255,255,255,.78); letter-spacing:.04em}

#apnPage .apn-hero__photo{position:relative; border-radius:16px; overflow:hidden; min-height:190px}
#apnPage .apn-hero__photo img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0}
#apnPage .apn-hero__slideshow{position:absolute; inset:0}
#apnPage .apn-hero__slideshow img{opacity:0; transition:opacity 1.2s ease}
#apnPage .apn-hero__slideshow img.is-active{opacity:1}
#apnPage .apn-hero__photo-tag{position:absolute; left:14px; bottom:14px; z-index:2; display:inline-flex; align-items:center; gap:8px; background:rgba(8,29,61,.72); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.15); color:#fff; font-size:11.5px; font-weight:600; letter-spacing:.04em; padding:8px 14px; border-radius:100px}
#apnPage .apn-hero__photo-tag i{width:6px; height:6px; border-radius:50%; background:var(--lime); display:inline-block}

#apnPage .apn-hero__spacer{visibility:hidden; pointer-events:none}

@media (max-width:600px){
  #apnPage .apn-hero__strip{grid-template-columns:1fr; height:auto}
  #apnPage .apn-hero__spacer{display:none}
  #apnPage .apn-hero__row{align-items:flex-start}
  #apnPage .apn-hero__aside{text-align:left}
}

/* ABOUT */
#apnPage .apn-about{position:relative; background:var(--bg-soft)}
#apnPage .apn-about__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:center}
#apnPage .apn-about h2{margin-bottom:20px; max-width:16ch}
#apnPage .apn-about__body p + p{margin-top:14px}
#apnPage .apn-about__tagline{margin-top:32px; padding:22px 24px; border-radius:14px; background:var(--card); border:1px solid var(--line); border-left:3px solid var(--lime)}
#apnPage .apn-about__tagline p{color:var(--ink); font-family:var(--font-head); font-weight:500; font-size:clamp(15px,1.3vw,17px); line-height:1.5; margin:0; max-width:44ch}

#apnPage .apn-about__figure{position:relative}
#apnPage .apn-about__photo{position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/4.6; box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
#apnPage .apn-about__photo::after{content:""; position:absolute; inset:0; border-radius:18px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
#apnPage .apn-about__photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
#apnPage .apn-about__badge{position:absolute; left:-18px; bottom:-18px; z-index:2; background:var(--navy); color:#fff; border-radius:14px; padding:18px 22px; min-width:130px; box-shadow:0 20px 40px -18px rgba(11,42,85,.55)}
#apnPage .apn-about__badge-pre{display:block; font-family:var(--font-body); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--lime); margin-bottom:4px}
#apnPage .apn-about__badge-year{display:block; font-family:var(--font-head); font-weight:700; font-size:32px; line-height:1; color:#fff}

@media (max-width:900px){
  #apnPage .apn-about__grid{grid-template-columns:1fr}
  #apnPage .apn-about__figure{order:-1; max-width:360px; width:100%; margin:0 auto 64px; opacity:1 !important; transform:none !important}
  #apnPage .apn-about__badge{left:12px; bottom:-16px}
}
@media (max-width:480px){
  #apnPage .apn-about__figure{margin-bottom:56px}
  #apnPage .apn-about__badge{padding:14px 18px; min-width:110px}
  #apnPage .apn-about__badge-year{font-size:26px}
}

/* SERVICES */
#apnPage .apn-svc{background:#fff}
#apnPage .apn-svc__head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(32px,4vw,52px)}
#apnPage .apn-svc__head h2{max-width:20ch}

#apnPage .apn-svc__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
#apnPage .apn-svc__card{padding:0; display:flex; flex-direction:column; overflow:visible; transition:border-color .35s ease, transform .35s ease, box-shadow .35s ease; box-shadow:0 1px 2px rgba(15,32,54,.04)}
#apnPage .apn-svc__card:hover{border-color:var(--navy); transform:translateY(-6px); box-shadow:0 20px 40px -24px rgba(15,32,54,.25)}

#apnPage .apn-svc__media{position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:15px 15px 0 0}
#apnPage .apn-svc__media img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
#apnPage .apn-svc__card:hover .apn-svc__media img{transform:scale(1.06)}
#apnPage .apn-svc__num{position:absolute; top:14px; right:16px; z-index:2; font-family:var(--font-head); font-weight:700; font-size:12.5px; color:#fff; letter-spacing:.06em; text-shadow:0 1px 4px rgba(0,0,0,.4)}
#apnPage .apn-svc__icon{position:relative; margin:-20px 0 0 16px; z-index:2; width:44px; height:44px; border-radius:12px; background:var(--navy); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 20px -8px rgba(11,42,85,.5)}
#apnPage .apn-svc__icon svg{width:20px; height:20px; stroke:#fff; fill:none; stroke-width:1.6}

#apnPage .apn-svc__body{padding:32px 22px 22px; display:flex; flex-direction:column; gap:12px; flex:1}
#apnPage .apn-svc__name{font-family:var(--font-head); font-weight:600; font-size:19px; color:var(--ink)}
#apnPage .apn-svc__card p{font-size:13.5px; margin:0; flex:1}
#apnPage .apn-svc__more{display:flex; align-items:center; justify-content:flex-end; margin-top:4px}
#apnPage .apn-svc__more a{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; border:1px solid var(--line); transition:background .3s ease, border-color .3s ease}
#apnPage .apn-svc__more a svg{width:12px; height:12px; stroke:var(--ink); fill:none; stroke-width:1.8; transition:transform .3s ease}
#apnPage .apn-svc__card:hover .apn-svc__more a{background:var(--navy); border-color:var(--navy)}
#apnPage .apn-svc__card:hover .apn-svc__more a svg{stroke:#fff; transform:translateX(2px) translateY(-2px)}

@media (max-width:1024px){ #apnPage .apn-svc__grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ #apnPage .apn-svc__grid{grid-template-columns:1fr} }

/* WHY CHOOSE US */
#apnPage .apn-why{position:relative; background:var(--bg-soft)}
#apnPage .apn-why__head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(28px,4vw,48px)}
#apnPage .apn-why__head h2{max-width:20ch}
#apnPage .apn-why__count{font-family:var(--font-head); font-weight:700; font-size:13px; color:var(--muted); letter-spacing:.1em}

#apnPage .apn-why__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}

#apnPage .apn-why__card{position:relative; padding:32px 24px 26px; min-height:280px; display:flex; flex-direction:column; overflow:hidden; isolation:isolate; transition:border-color .4s ease, transform .4s ease, box-shadow .4s ease}
#apnPage .apn-why__card:hover{border-color:transparent; transform:translateY(-6px); box-shadow:0 26px 48px -20px rgba(11,42,85,.35)}

#apnPage .apn-why__bg{position:absolute; inset:0; z-index:0; opacity:0; transform:scale(1.06); transition:opacity .45s ease, transform .6s ease}
#apnPage .apn-why__bg img{width:100%; height:100%; object-fit:cover; display:block}
#apnPage .apn-why__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(200deg, rgba(8,29,61,.4) 0%, rgba(8,29,61,.82) 100%)}
#apnPage .apn-why__card:hover .apn-why__bg{opacity:1; transform:scale(1)}

#apnPage .apn-why__glyph{position:relative; z-index:1; width:64px; height:64px; margin-bottom:auto; flex:0 0 auto; transition:opacity .3s ease, transform .3s ease;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
  overflow:hidden}
#apnPage .apn-why__glyph img{width:100%; height:100%; object-fit:cover; display:block}
#apnPage .apn-why__card:hover .apn-why__glyph{opacity:0; transform:translateY(-6px)}

#apnPage .apn-why__body{position:relative; z-index:1; margin-top:22px; display:flex; flex-direction:column; gap:10px; flex:1; transition:transform .4s ease}
#apnPage .apn-why__t{font-family:var(--font-head); font-weight:600; font-size:19px; color:var(--ink); transition:color .35s ease}
#apnPage .apn-why__card p{font-size:13.5px; margin:0; flex:1; color:var(--muted); transition:color .35s ease}
#apnPage .apn-why__card:hover .apn-why__t{color:#fff}
#apnPage .apn-why__card:hover p{color:var(--muted-light)}

#apnPage .apn-why__arrow{display:flex; align-items:center; justify-content:flex-end; margin-top:4px}
#apnPage .apn-why__arrow span{width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; transition:background .3s ease, border-color .3s ease}
#apnPage .apn-why__arrow svg{width:13px; height:13px; stroke:var(--ink); fill:none; stroke-width:1.6; transition:stroke .3s ease}
#apnPage .apn-why__card:hover .apn-why__arrow span{background:var(--lime); border-color:var(--lime)}
#apnPage .apn-why__card:hover .apn-why__arrow svg{stroke:var(--navy-deep)}

@media (max-width:1024px){ #apnPage .apn-why__grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ #apnPage .apn-why__grid{grid-template-columns:1fr} }

/* CONTACT / CTA */
#apnPage .apn-contact{position:relative; overflow:hidden; background:#fff}
#apnPage .apn-contact .apn-wrap{position:relative; z-index:1}
#apnPage .apn-contact__card{position:relative !important; overflow:hidden !important; height:auto !important; min-height:0 !important; padding:40px clamp(24px,5vw,56px) !important; text-align:center; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; background:linear-gradient(160deg, var(--navy-mid) 0%, var(--navy) 50%, var(--navy-deep) 100%); border-color:var(--line-dark)}
#apnPage .apn-contact__card::before{content:""; position:absolute; inset:0; z-index:0; background-image:url('https://asriprimanusantara.com/wp-content/uploads/2026/09/Maintenance.webp'); background-size:cover; background-position:center; opacity:.08; mix-blend-mode:overlay; pointer-events:none}
#apnPage .apn-contact__glow{position:absolute !important; z-index:0; pointer-events:none; width:520px; height:520px; left:50%; top:-260px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle, rgba(181,132,44,.18), rgba(181,132,44,0) 68%)}
#apnPage .apn-contact__card > *:not(.apn-contact__glow){position:relative; z-index:1}
#apnPage .apn-contact .apn-eyebrow{justify-content:center; color:var(--lime)}
#apnPage .apn-contact h2{margin-bottom:16px; color:#fff}
#apnPage .apn-contact p{max-width:52ch; color:var(--muted-light)}
#apnPage .apn-contact__btn{margin-top:24px}

@media (max-width:480px){
  #apnPage .apn-sec{padding:44px 0}
  #apnPage .apn-btn{padding:14px 22px; font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  #apnPage .apn *{transition-duration:.01ms !important; animation:none !important}
  #apnPage .apn-rv{opacity:1 !important; transform:none !important}
}