/* Reference-aligned geometry: 32px gutters, 80vh hero, 64px / 1.1 heading. */
.wrap{width:calc(100% - 64px);max-width:1376px}
.announcement{height:46px;padding:0 32px;gap:24px;background:#f1f2f5;font-size:14px}
.announcement-label{display:flex;align-items:center;gap:8px;flex:0 0 51%}.announcement-label:after{content:'';height:1px;background:#dfe2eb;flex:1;margin-left:10px}.announcement-label i{margin:0}.ticker span{animation-duration:38s}
header{height:82px;padding:0 max(32px,calc((100vw - 1376px)/2));gap:28px;backdrop-filter:none;background:#fff}.brand{margin-right:auto}.brand img{width:160px;height:50px}nav{font-size:16px;gap:32px}.nav-cta{display:inline-flex;padding:0;background:none!important;font-size:16px}.nav-cta span{margin:0}
.hero-stage{min-height:500px;height:80vh;max-height:900px;clip-path:polygon(0 0,100% 0,100% calc(100% - 120px),calc(100% - 120px) 100%,0 100%);display:flex;align-items:flex-end;padding:36px 36px 64px;background:#172244}
.hero-film{position:absolute;inset:0;overflow:hidden}.hero-shot{position:absolute;width:100%;height:100%;object-fit:cover;filter:saturate(.72);will-change:opacity,transform}.shot-one{object-position:50% 45%;animation:shot-one 24s linear infinite}.shot-two{object-position:50% 50%;opacity:0;animation:shot-two 24s linear infinite}.shot-three{object-position:center;opacity:0;animation:shot-three 24s linear infinite}
.hero-shade{background:linear-gradient(90deg,rgba(10,20,48,.4),rgba(10,20,48,.09)),linear-gradient(0deg,rgba(10,20,48,.58),rgba(10,20,48,.2) 80%)}
.hero-copy{position:relative;inset:auto;width:100%;max-width:800px;z-index:1}.hero-copy h1{font-size:64px;line-height:1.1;letter-spacing:-.02em;margin:0 0 16px}.hero-description{font-size:22px;line-height:1.5;max-width:500px;margin:0 0 32px;color:#fff}.hero-support{transition-delay:.15s!important}
.hero-motion{position:absolute;top:22px;right:22px;width:36px;height:36px;border:1px solid #ffffff65;background:#19223320;backdrop-filter:blur(5px);color:white;border-radius:50%;display:grid;place-items:center;font-size:13px;z-index:2;transition:background .2s}.hero-motion:hover{background:#26397e}
.pill{gap:0;overflow:hidden;border-radius:400px;isolation:isolate;vertical-align:middle;font-size:16px}.pill-track{display:flex;align-items:center;margin-left:-40px;transition:transform .45s cubic-bezier(.22,.61,.36,1);flex:none}.pill-track>span{height:40px;display:flex;align-items:center;justify-content:center;padding:8px 24px;border-radius:300px;white-space:nowrap;transition:background .3s,color .3s}.pill-track>b{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;font-size:24px;font-weight:400;line-height:1;transition:background .3s,color .3s}
.pill.blue .pill-track>*,.pill.blue .pill-track>b{background:var(--blue);color:#fff}.pill.white .pill-track>*{background:#fff;color:var(--blue)}.pill.neutral .pill-track>*,form .pill.white .pill-track>*{background:#eef0f5;color:var(--blue)}
.pill>.pill-track,.pill:hover>.pill-track{background:transparent;color:inherit;padding:0;min-height:0;height:40px;border-radius:0;justify-content:flex-start;margin-left:-40px}
.pill:hover .pill-track,.pill:focus-visible .pill-track{transform:translateX(40px)}.pill:hover b{transform:none}.pill:hover .pill-track>*,.pill:focus-visible .pill-track>*{background:var(--periwinkle);color:var(--blue)}
.partners{margin-top:40px;padding:40px 0;background:#f2f3f6}.section-line{font-size:16px;padding-bottom:12px}.section-line>span:last-child{display:none}.logo-row{padding-top:28px}.logo-row img{height:52px;width:145px}.section{padding-top:80px;padding-bottom:80px}h2{font-size:54px;letter-spacing:-.02em;line-height:1.1}.eyebrow{color:#787f8f;letter-spacing:0;font-size:16px}.eyebrow:before{display:none}.eyebrow.light{color:#c6d1ee}.values{padding-top:24px}.section-heading{margin-bottom:40px}
.js .reveal{opacity:0;transform:translateY(12px);transition:opacity .65s ease,transform .65s ease}.js .reveal.visible{opacity:1;transform:none}.js .split-heading{opacity:1;transform:none;transition:none}.reveal-line{display:block;overflow:hidden;padding-bottom:.055em;margin-bottom:-.055em}.reveal-line-inner{display:block;transform:translateY(105%);opacity:0;transition:transform .5s ease-in-out,opacity .5s ease-in-out;transition-delay:calc(var(--line-index,0)*100ms)}.visible .reveal-line-inner{transform:none;opacity:1}.js .hero-copy h1{transition:none}.js .hero-copy h1 .reveal-line-inner{transition-delay:calc(80ms + var(--line-index,0)*100ms)}
.menu span{transition:transform .35s ease}.product-panel.changing .product-copy{animation:panel-reveal .5s ease both}.product-panel.changing .product-image img{animation:panel-reveal .65s ease both}
.paused .reveal-line-inner{transform:none;opacity:1;transition:none}.paused .reveal{opacity:1;transform:none}.paused .hero-shot{animation-play-state:paused!important}
@keyframes shot-one{0%{opacity:1;transform:scale(1.02) translateX(0)}28%{opacity:1;transform:scale(1.12) translateX(-1%)}34%{opacity:0;transform:scale(1.14) translateX(-1%)}89%{opacity:0;transform:scale(1.01)}94%,100%{opacity:1;transform:scale(1.02)}}
@keyframes shot-two{0%,27%{opacity:0;transform:scale(1.12) translateX(-1%)}33%{opacity:1}59%{opacity:1;transform:scale(1.02) translateX(0)}65%,100%{opacity:0;transform:scale(1.01)}}
@keyframes shot-three{0%,58%{opacity:0;transform:scale(1.02) translateX(1%)}64%{opacity:1}89%{opacity:1;transform:scale(1.12) translateX(-1%)}95%,100%{opacity:0;transform:scale(1.14) translateX(-1%)}}
@keyframes panel-reveal{from{opacity:.15;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:1050px){nav{gap:22px;font-size:15px}.nav-cta{display:none}.hero-copy h1{font-size:56px}.hero-description{font-size:20px}.hero-stage{padding-bottom:54px}h2{font-size:44px}}
@media(max-width:760px){.wrap{width:calc(100% - 48px)}.announcement{padding:0 24px;height:44px;font-size:13px;gap:16px}.announcement-label{flex:none}.announcement-label:after{display:none}header{height:94px;padding:0 24px}nav{top:94px;font-size:25px;gap:5px;transform-origin:top}nav.open{animation:menu-enter .35s ease both}.brand img{width:155px}.hero-stage{height:500px;min-height:500px;padding:30px 24px 48px;clip-path:polygon(0 0,100% 0,100% calc(100% - 80px),calc(100% - 80px) 100%,0 100%)}.hero-copy h1{font-size:36px;line-height:1.15;margin-bottom:20px}.hero-description{font-size:18px;line-height:1.45;max-width:340px;margin-bottom:24px}.hero-motion{width:32px;height:32px;top:16px;right:16px}.pill{font-size:14px}.pill-track>span{padding:9px 20px}.partners{margin-top:40px;padding:32px 0}.logo-row img{width:110px;height:42px}.section{padding-top:56px;padding-bottom:56px}h2{font-size:36px}.eyebrow{font-size:14px}.section-heading{margin-bottom:32px}.section-line{font-size:14px}}
@media(max-width:430px){.hero-copy h1{font-size:32px}.hero-description{max-width:290px;font-size:16px;line-height:1.5}.hero-stage{padding:30px 20px 46px;min-height:500px}.hero-copy{max-width:100%}.pill-track>span{padding-left:18px;padding-right:18px}h2{font-size:34px}.announcement-label{font-size:12px}}
@media(max-width:360px){.wrap{width:calc(100% - 32px)}.hero-copy h1{font-size:29px}.pill{font-size:12px}.pill-track>span{padding:8px 15px}}
@keyframes menu-enter{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero-shot{animation:none!important}.shot-one{opacity:1;transform:none}.shot-two,.shot-three{opacity:0}.reveal-line-inner{opacity:1;transform:none;transition:none}.pill-track{transition:none}.pill:hover .pill-track,.pill:focus-visible .pill-track{transform:none}}

/* Header CTA follows the reference's background-position/padding transition. */
header{height:64px}.brand img{height:40px;width:150px}html{scroll-padding-top:80px}
.nav-cta{display:inline-block;flex:none;position:relative;height:40px;padding:10px 60px 9px 20px;background-color:#eef0f5!important;background-image:url('assets/nav-arrow-right.svg')!important;background-position:100% 50%!important;background-repeat:no-repeat!important;background-size:contain!important;border-radius:300px;color:var(--blue);font-size:16px;line-height:21px;white-space:nowrap;transition:all .3s ease}
.nav-cta:hover,.nav-cta:focus-visible{background-color:var(--periwinkle)!important;background-image:url('assets/nav-arrow-left.svg')!important;background-position:0% 50%!important;padding-left:60px;padding-right:20px}
.logo-row img{opacity:1;filter:grayscale(1);object-fit:contain;image-rendering:auto}
.logo-row img[alt="Yogya Group"]{filter:brightness(0);width:145px;height:58px}
.logo-row img[alt="Yakult"]{width:160px;height:52px;mix-blend-mode:multiply}
.logo-row img[alt="H&M"]{width:88px;height:58px}
.logo-row img:hover{filter:none}.logo-row img[alt="Yogya Group"]:hover{filter:brightness(0)}
.announcement{height:36px;gap:24px;font-size:13px}.announcement-label{flex:0 0 190px}.announcement-label:after{margin-left:8px}.ticker{min-width:0;overflow:hidden}.ticker span{animation:none;display:inline;width:auto}.ticker-track{display:flex;width:max-content;animation:blog-scroll 55s linear infinite}.ticker-group{display:flex;align-items:center;flex-shrink:0}.ticker-group a{display:block;padding-right:64px;white-space:nowrap}.ticker-group a span{padding-left:12px}.ticker-group a:hover{text-decoration:underline;text-underline-offset:3px}.announcement:hover .ticker-track,.announcement:focus-within .ticker-track{animation-play-state:paused}.ticker-track:has(a:focus-visible){animation:none;transform:none}.ticker:has(a:focus-visible){overflow:auto}
.material-center{animation:material-turn 3s linear infinite}
@keyframes blog-scroll{to{transform:translateX(-50%)}}
@keyframes material-turn{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(max-width:1050px){.nav-cta{display:none}}
@media(max-width:760px){header{height:62px}nav{top:62px}.brand img{width:140px;height:38px}.menu{width:42px;height:42px;padding:11px}.announcement{height:34px;gap:14px;padding:0 24px;font-size:12px}.announcement-label{flex:none;font-size:12px}.announcement-label:after{display:none}.logo-row img[alt="Yogya Group"]{width:120px;height:48px}.logo-row img[alt="Yakult"]{width:135px;height:44px}.logo-row img[alt="H&M"]{width:75px;height:50px}.ticker-group a{padding-right:40px}}
@media(prefers-reduced-motion:reduce){.nav-cta{transition:none}.ticker-track,.material-center{animation:none!important}.ticker{overflow:auto}.ticker-group[aria-hidden="true"]{display:none}}