@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* ==========================================================================
   PT. LOTTE INNOVATE INDONESIA — common
   ========================================================================== */

:root{
  --red:#e8402d;
  --red-dark:#c62d1c;
  --navy:#17263a;
  --navy-2:#1f3350;
  --ink:#111820;
  --body:#4a5561;
  --muted:#8b95a1;
  --line:#e4e8ed;
  --line-2:#eef1f5;
  --bg:#ffffff;
  --bg-soft:#f6f8fa;

  --wrap:1320px;
  --wrap-narrow:1120px;
  --header-h:92px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --font:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--body);background:var(--bg);
  font-size:16px;line-height:1.7;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}
img{max-width:100%;height:auto;display:block;border:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,h5{margin:0;color:var(--ink);font-weight:700;line-height:1.28;letter-spacing:-.02em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 32px}
.wrap-narrow{max-width:var(--wrap-narrow)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- section heading ---------- */
.sec{padding:120px 0}
.sec-soft{background:var(--bg-soft)}
.sec-head{text-align:center;margin-bottom:56px}
.sec-head .kicker{
  display:inline-block;font-size:13px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--red);margin-bottom:14px;
}
.sec-head h2{font-size:clamp(28px,3.4vw,44px)}
.sec-head .lead{margin-top:18px;font-size:17px;color:var(--muted)}
.sec-head.light h2{color:#fff}
.sec-head.light .lead{color:rgba(255,255,255,.72)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  height:48px;padding:0 26px;border-radius:999px;
  font-size:14px;font-weight:600;letter-spacing:.01em;
  transition:all .3s var(--ease);
}
.btn svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark)}
.btn-ghost{border:1px solid var(--line);color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--red);color:var(--red)}
.btn-light{border:1px solid rgba(255,255,255,.35);color:#fff}
.btn-light:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ==========================================================================
   Header
   ========================================================================== */
.hd{
  position:fixed;inset:0 0 auto 0;z-index:200;height:var(--header-h);
  display:flex;align-items:center;
  transition:background .35s var(--ease),box-shadow .35s var(--ease);
}
.hd .wrap{display:flex;align-items:center;gap:32px;max-width:none;padding:0 40px}

/* the CI mark is an image; the company name is live text, so it can be sized
   to match the nav instead of being locked to the wordmark artwork */
/* the padding is invisible (the header is a fixed-height flex row) but gives the
   logo link a finger-sized hit area instead of the ~24px the artwork occupies */
.hd-logo{display:flex;align-items:center;gap:12px;flex:none;padding:10px 0;min-height:44px}
/* mark.png is cropped to the artwork's exact square bounds, so centring it is
   purely geometric. The nudge lines its middle up with the cap height of the
   all-caps name, which sits above the middle of its own line box. */
.hd-mark{height:32px;width:32px;flex:none;transform:translateY(-1.5px)}
.hd-name{
  font-size:18px;font-weight:700;letter-spacing:.005em;white-space:nowrap;
  color:var(--red);line-height:1;
}
.hd.is-over .hd-name{color:#fff}

/* ---------- global nav ---------- */
.gnb{margin-left:auto}
.gnb > ul{display:flex;align-items:center}
.gnb > ul > li{position:relative}
.gnb > ul > li > a{
  display:flex;align-items:center;height:var(--header-h);padding:0 20px;
  font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.01em;
  white-space:nowrap;transition:color .25s var(--ease);
}
.gnb > ul > li > a::after{
  content:"";position:absolute;left:20px;right:20px;bottom:28px;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.gnb > ul > li:hover > a,
.gnb > ul > li.is-on > a{color:var(--red)}
.gnb > ul > li:hover > a::after,
.gnb > ul > li.is-on > a::after{transform:scaleX(1)}
.hd.is-over .gnb > ul > li > a{color:#fff}
.hd.is-over .gnb > ul > li:hover > a,
.hd.is-over .gnb > ul > li.is-on > a{color:#fff}
.hd.is-over .gnb > ul > li > a::after{background:#fff}

.gnb-sub{
  position:absolute;top:100%;left:4px;min-width:230px;padding:10px 0;
  background:#fff;border-radius:6px;box-shadow:0 18px 40px rgba(17,24,32,.14);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.gnb > ul > li:hover .gnb-sub,
.gnb > ul > li:focus-within .gnb-sub{opacity:1;visibility:visible;transform:none}
.gnb-sub a{
  display:block;padding:10px 22px;font-size:14.5px;color:var(--body);white-space:nowrap;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.gnb-sub a:hover{color:var(--red);background:var(--bg-soft)}

.hd-burger{width:44px;height:44px;display:none;position:relative;flex:none;margin-left:auto}
.hd-burger span{
  position:absolute;left:12px;width:20px;height:2px;background:var(--ink);
  transition:all .3s var(--ease);
}
.hd-burger span:nth-child(1){top:15px}
.hd-burger span:nth-child(2){top:21px}
.hd-burger span:nth-child(3){top:27px}

/* transparent state (over hero) */
.hd.is-over{background:transparent}
.hd.is-over .hd-burger span{background:#fff}

/* solid state */
.hd.is-solid{background:rgba(255,255,255,.96);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line-2)}

/* ==========================================================================
   Drawer menu
   ========================================================================== */
.nav-dim{
  position:fixed;inset:0;z-index:300;background:rgba(10,16,24,.5);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
}
.nav-dim.is-open{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;z-index:310;width:min(460px,100%);height:100%;
  background:#fff;transform:translateX(100%);transition:transform .5s var(--ease);
  display:flex;flex-direction:column;
}
.drawer.is-open{transform:none}
.drawer-top{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--header-h);padding:0 22px 0 32px;border-bottom:1px solid var(--line-2);flex:none;
}
.drawer-top .hd-mark{height:27px;width:27px}
.drawer-top .hd-name{font-size:15px}
.drawer-close{width:44px;height:44px;display:block;font-size:0;position:relative}
.drawer-close::before,.drawer-close::after{
  content:"";position:absolute;left:12px;top:21px;width:20px;height:2px;background:var(--ink);
}
.drawer-close::before{transform:rotate(45deg)}
.drawer-close::after{transform:rotate(-45deg)}
.drawer-body{flex:1;overflow-y:auto;padding:14px 32px 40px}
.drawer-body > ul > li{border-bottom:1px solid var(--line-2)}
.acc-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:22px 4px;font-size:19px;font-weight:700;color:var(--ink);text-align:left;
  transition:color .25s var(--ease);
}
.acc-btn:hover{color:var(--red)}
.acc-btn .sign{position:relative;width:14px;height:14px;flex:none}
.acc-btn .sign::before,.acc-btn .sign::after{
  content:"";position:absolute;background:var(--muted);transition:all .3s var(--ease);
}
.acc-btn .sign::before{left:0;top:6px;width:14px;height:2px}
.acc-btn .sign::after{left:6px;top:0;width:2px;height:14px}
.acc-btn[aria-expanded="true"]{color:var(--red)}
.acc-btn[aria-expanded="true"] .sign::after{transform:rotate(90deg);opacity:0}
.acc-btn[aria-expanded="true"] .sign::before{background:var(--red)}
.acc-panel{overflow:hidden;max-height:0;transition:max-height .45s var(--ease)}
.acc-panel ul{padding:2px 4px 22px}
.acc-panel a{
  display:block;padding:9px 0;font-size:15px;color:var(--body);
  transition:color .2s var(--ease),transform .25s var(--ease);
}
.acc-panel a:hover{color:var(--red);transform:translateX(5px)}
.drawer-foot{padding:26px 32px 32px;border-top:1px solid var(--line-2);flex:none}
.drawer-foot .t{font-size:12px;letter-spacing:.12em;color:var(--muted);font-weight:700;margin-bottom:8px}
.drawer-foot .v{font-size:14px;color:var(--ink);line-height:1.7}

/* ==========================================================================
   Sub page hero + local nav
   ========================================================================== */
.sub-hero{
  position:relative;height:clamp(300px,42vw,440px);display:flex;align-items:center;
  background:var(--navy);overflow:hidden;
}
.sub-hero .veil{
  position:absolute;inset:0;
  background:
    radial-gradient(900px 420px at 78% 18%,rgba(232,64,45,.32),transparent 62%),
    linear-gradient(120deg,rgba(23,38,58,.96) 28%,rgba(31,51,80,.82) 100%);
}
.sub-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.sub-hero .wrap{position:relative;z-index:2;padding-top:var(--header-h)}
.sub-hero .crumb{font-size:13px;color:rgba(255,255,255,.65);letter-spacing:.02em;margin-bottom:14px}
.sub-hero .crumb span{margin:0 8px;opacity:.5}
.sub-hero h1{font-size:clamp(32px,4.6vw,54px);color:#fff}
.sub-hero p{margin-top:16px;font-size:17px;color:rgba(255,255,255,.78);max-width:720px}

/* Anchors must clear the fixed header AND the sticky local nav, otherwise
   jumping to #section hides the heading behind them. */
:root{--localnav-h:70px}
[id]{scroll-margin-top:calc(var(--header-h) + var(--localnav-h) + 24px)}

.localnav{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:var(--header-h);z-index:90}
.localnav ul{display:flex;overflow-x:auto;scrollbar-width:none}
.localnav ul::-webkit-scrollbar{display:none}
.localnav a{
  display:block;padding:22px 26px;font-size:15px;font-weight:600;color:var(--muted);
  white-space:nowrap;border-bottom:2px solid transparent;transition:all .25s var(--ease);
}
.localnav a:hover{color:var(--ink)}
.localnav a.is-on{color:var(--red);border-bottom-color:var(--red)}

/* ==========================================================================
   Footer
   ========================================================================== */
.ft{border-top:1px solid var(--line);padding:56px 0 64px;text-align:center;background:#fff}
.ft-logo img{height:36px;margin:0 auto 26px}
.ft-family{display:flex;justify-content:center;gap:8px;margin-bottom:28px}
.ft-family select{
  appearance:none;height:42px;width:250px;padding:0 16px;
  border:1px solid var(--line);background:#fff;border-radius:2px;
  font:inherit;font-size:13px;color:var(--body);cursor:pointer;
}
.ft-family .go{
  height:42px;padding:0 20px;border:1px solid var(--line);border-radius:2px;
  font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--ink);
  transition:all .25s var(--ease);
}
.ft-family .go:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.ft-info{font-size:13px;color:var(--muted);line-height:2}
.ft-info .dot{margin:0 10px;opacity:.45}
.ft-copy{margin-top:10px;font-size:12px;color:var(--muted);letter-spacing:.01em}

/* ---------- scroll reveal ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
/* tighten the header before it has to collapse */
@media (max-width:1400px){
  .hd .wrap{gap:20px;padding:0 28px}
  .gnb > ul > li > a{padding:0 16px;font-size:15px}
  .gnb > ul > li > a::after{left:16px;right:16px}
  .hd-name{font-size:16px}
  .hd-mark{height:29px;width:29px}
}
/* below this width the top nav is swapped for the drawer */
@media (max-width:1240px){
  .gnb{display:none}
  .hd-burger{display:block}
  .hd .wrap{gap:24px;padding:0 32px}
  .hd-name{font-size:18px}
  .hd-mark{height:32px;width:32px}
}
@media (max-width:1024px){
  .sec{padding:88px 0}
  .wrap{padding:0 24px}
  .hd .wrap{padding:0 24px}
}
@media (max-width:640px){
  :root{--header-h:68px}
  .sec{padding:64px 0}
  .wrap{padding:0 20px}
  .hd .wrap{padding:0 12px 0 20px}
  .hd-mark{height:24px;width:24px}
  .hd-name{font-size:13px;letter-spacing:0}
  .hd-logo{gap:9px}
  .hero-dots button{width:44px}
  .drawer-top,.drawer-body,.drawer-foot{padding-left:22px;padding-right:22px}
  :root{--localnav-h:56px}
  .localnav a{padding:16px 18px;font-size:14px}
  .ft-family{flex-wrap:wrap}
  .ft-family select{width:min(100%,250px)}
}

/* very narrow phones (iPhone SE and similar): the full company name plus the
   burger no longer fit at 13px, so tighten the lockup rather than let it clip */
@media (max-width:400px){
  .hd .wrap{padding:0 8px 0 16px}
  .hd-logo{gap:8px}
  .hd-mark{height:22px;width:22px}
  .hd-name{font-size:12px}
}