@charset "UTF-8";
/* SL COSMETICS FINAL BENCHMARK POLISH
   Inspired by the current COSMAX site's editorial restraint: white space, calm weights,
   disciplined hierarchy and image-first pacing. No content or brand identity is copied. */

:root{
  --sl-max:1540px;
  --sl-side:56px;
  --sl-section:124px;
  --sl-section-lg:148px;
  --sl-section-sm:92px;
  --sl-ink:#111111;
  --sl-muted:#5e5b58;
  --sl-soft:#8a8580;
  --sl-line:#e8e4df;
  --sl-accent:#CE1735;
}

html{scroll-behavior:smooth}
body{
  color:var(--sl-ink);
  font-size:16px;
  line-height:1.7;
  letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.shell{width:min(var(--sl-max),calc(100% - (var(--sl-side) * 2)))!important}

/* Header: cleaner, more editorial, less UI-heavy */
:root{--header:82px}
.site-header{
  height:var(--header)!important;
  border-bottom:1px solid rgba(17,17,17,.075)!important;
  background:rgba(255,255,255,.985)!important;
  backdrop-filter:blur(12px)!important;
}
.site-header .brand img{height:38px!important}
.site-header .main-nav{gap:30px!important}
.site-header .main-nav a{
  font-size:11px!important;
  font-weight:600!important;
  letter-spacing:.105em!important;
  line-height:1!important;
}
.site-header .lang{margin-left:26px!important;border-color:rgba(206,23,53,.55)!important}
.site-header .lang button{font-size:9px!important;font-weight:650!important;padding:7px 9px!important}

/* Hierarchy */
.eyebrow,
.hero-static__eyebrow,
.dd-page .eyebrow,
.process-hero .eyebrow,
.contact-page .eyebrow{
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.19em!important;
  line-height:1.4!important;
  margin-bottom:18px!important;
}
.display,
.page-hero .display,
.formula-v2-hero .display{
  font-weight:500!important;
  letter-spacing:-.048em!important;
  line-height:.99!important;
}
.page-hero .display,.formula-v2-hero .display{font-size:clamp(46px,4.5vw,72px)!important}
.section-title{
  font-size:clamp(38px,3.45vw,56px)!important;
  line-height:1.08!important;
  letter-spacing:-.043em!important;
  font-weight:500!important;
}
.body-lg{
  font-size:16px!important;
  line-height:1.82!important;
  letter-spacing:-.012em!important;
  color:#55514e!important;
}
.body-sm{font-size:14px!important;line-height:1.78!important;color:#6a6662!important}
.line-link{
  margin-top:22px!important;
  padding-bottom:6px!important;
  font-size:10px!important;
  font-weight:650!important;
  letter-spacing:.13em!important;
}

/* Home hero and section rhythm */
.hero.hero-static{background:#fff!important}
.hero-static .shell{width:min(var(--sl-max),calc(100% - (var(--sl-side) * 2)))!important}
.hero-static__grid{
  min-height:calc(100vh - var(--header) - 12px)!important;
  background:#fff!important;
  border-color:var(--sl-line)!important;
}
.hero-static__copy{padding:72px 5.1vw 66px 3.8vw!important}
.hero-static__title{
  font-size:clamp(54px,5vw,80px)!important;
  line-height:.98!important;
  letter-spacing:-.052em!important;
  font-weight:500!important;
  max-width:8.1ch!important;
}
.hero-static__desc{
  margin-top:24px!important;
  font-size:17px!important;
  line-height:1.78!important;
  color:#5e5955!important;
  max-width:31ch!important;
}
.hero-static__cta{margin-top:32px!important;font-size:12px!important;font-weight:600!important;letter-spacing:.035em!important}
.hero-static__visual.hero-rotator{min-height:690px!important}

.intro{padding:var(--sl-section) 0 86px!important}
.intro-grid{grid-template-columns:minmax(0,1fr) auto!important;gap:72px!important;align-items:end!important}
.intro .section-title{max-width:none!important;font-size:clamp(40px,3.7vw,60px)!important;font-weight:500!important}
.intro-copy{justify-self:end!important;padding-bottom:3px}

.oem-showcase{padding:0 0 var(--sl-section)!important}
.oem-showcase__copy{padding:25px 26px 28px!important}
.oem-showcase__copy h3{font-size:16px!important;font-weight:650!important;letter-spacing:.12em!important}
.oem-showcase__copy p{font-size:14px!important;line-height:1.76!important;color:#625d58!important}

.core-services{padding:96px 0 var(--sl-section-lg)!important}
.core-services__head{margin-bottom:52px!important;gap:72px!important}
.core-services__head h2{font-size:clamp(38px,3.5vw,56px)!important;font-weight:500!important;line-height:1.07!important}
.core-services__head p{font-size:15px!important;line-height:1.78!important}
.core-services__grid{gap:24px!important}
.core-service-card__body h3{font-size:clamp(22px,1.7vw,28px)!important;font-weight:500!important;line-height:1.17!important}
.core-service-card__body p{font-size:14px!important;line-height:1.76!important}

.home-rnd-panel{padding:var(--sl-section) 0!important}
.home-rnd-panel__grid{gap:54px!important}
.home-rnd-panel__media{min-height:590px!important}
.home-rnd-panel__copy{padding:28px 0 20px!important}
.home-rnd-panel__copy .section-title{margin-bottom:20px!important}
.home-rnd-panel__list{margin-top:34px!important}
.home-rnd-panel__list span{font-size:11px!important;padding:16px 0!important;letter-spacing:.085em!important}

.innovation{padding:var(--sl-section-lg) 0!important}
.innovation-layout{gap:72px!important}
.innovation-tab{padding:19px 0!important}
.innovation-tab strong{font-size:17px!important;font-weight:500!important}
.innovation-detail{margin-top:26px!important}
.innovation-detail h3{font-size:32px!important;font-weight:500!important;line-height:1.1!important}

.global{padding:var(--sl-section-lg) 0!important}
.partner-heading{padding:88px 0 28px!important}
.partner-heading h2{font-size:clamp(34px,3vw,48px)!important;font-weight:500!important}
.partner-heading p{font-size:14px!important;line-height:1.75!important}
.logos{padding:62px 0 82px!important}

/* General subpage rhythm */
.page-hero{padding-top:calc(var(--header) + 82px)!important;padding-bottom:96px!important}
.page-hero-grid{gap:84px!important}
.page-section{padding:var(--sl-section) 0!important}

/* ABOUT */
.about-v32{padding:118px 0 140px!important}
.about-v32__stack{gap:26px!important}
.about-v32__hero,.about-v32__mid{padding:24px!important;gap:36px!important}
.about-v32__hero-copy h1{font-size:clamp(38px,3.4vw,54px)!important;font-weight:500!important;line-height:1.12!important;margin-bottom:17px!important}
.about-v32__hero-copy p,.about-v32__statement p{font-size:16px!important;line-height:1.82!important;color:#55514d!important}
.about-v32__statement h2{font-size:clamp(32px,2.65vw,44px)!important;font-weight:500!important;line-height:1.15!important}
.about-v32-card__body strong{font-size:24px!important;font-weight:500!important}
.about-v32-card__body p{font-size:14px!important;line-height:1.7!important}

/* Formula */
.formula-v2-hero{padding:calc(var(--header) + 82px) 0 96px!important}
.formula-v2-hero__grid{gap:72px!important;align-items:end!important}
.formula-v2-section{padding:var(--sl-section) 0!important}
.formula-v2-heading{margin-bottom:48px!important}
.formula-v2-heading h2{font-size:clamp(36px,3.2vw,52px)!important;font-weight:500!important;line-height:1.1!important}
.formula-v2-card__info h3{font-weight:500!important}

/* Innovation */
.innovation-v2-hero,.innovation-page-hero{padding-top:calc(var(--header) + 82px)!important}
.innovation-v2-card h3,.innovation-card h3{font-weight:500!important}

/* Process */
.process-hero{padding:calc(var(--header) + 76px) 0 58px!important}
.process-hero__grid{gap:60px!important}
.process-hero__title{font-size:clamp(40px,4.25vw,68px)!important;font-weight:500!important;letter-spacing:-.048em!important}
.process-hero__copy .body-lg{font-size:16px!important}
.process-accordion-section{padding:12px 0 132px!important}
.process-step__trigger{padding-top:24px!important;padding-bottom:24px!important}
.process-step__title{font-size:23px!important;font-weight:500!important}
.process-step__panel p{font-size:16px!important;line-height:1.78!important}

/* Design development */
.dd-hero{padding:calc(var(--header) + 74px) 0 112px!important}
.dd-hero__title{font-size:clamp(52px,5.1vw,88px)!important;font-weight:500!important;line-height:.99!important}
.dd-hero__body{font-size:17px!important;line-height:1.8!important}
.dd-statement{padding:104px 0 92px!important}
.dd-wide-title{font-size:clamp(42px,4vw,68px)!important;font-weight:500!important;line-height:1.05!important}
.dd-flow-section{padding-bottom:118px!important}
.dd-flow-title{font-size:clamp(40px,3.6vw,60px)!important;font-weight:500!important}
.dd-support-section{padding:112px 0 124px!important}
.dd-support-title{font-size:clamp(38px,3.4vw,56px)!important;font-weight:500!important}
.dd-support-buttons button strong{font-weight:500!important}
.dd-support-panel h3{font-weight:500!important}

/* Contact */
.contact-hero{padding-top:calc(var(--header) + 78px)!important;padding-bottom:92px!important}
.contact-consultation{padding-bottom:132px!important}
.contact-consultation h1,.contact-consultation h2{font-weight:500!important}
.contact-form label{font-size:11px!important;letter-spacing:.08em!important;font-weight:600!important}
.contact-form input,.contact-form select,.contact-form textarea{font-size:16px!important}

/* Cards and separators: less visual noise */
.cert-card,.product-card,.formula-v2-card,.service-card,.step,.project-brief-card,.design-copy-card,.contact-form{
  border-color:var(--sl-line)!important;
}
.cert-card h3,.product-card h3,.formula-v2-card__info h3{font-weight:500!important}

/* Footer */
.footer{padding:82px 0 34px!important;border-top:1px solid var(--sl-line)!important}
.footer-main{gap:88px!important}
.footer-logo img{height:50px!important}
.footer-cols{gap:34px!important}
.footer-cols small{font-size:9px!important;font-weight:650!important;letter-spacing:.14em!important}
.footer-cols p{font-size:12px!important;line-height:1.76!important}
.footer-bottom{margin-top:52px!important;padding-top:22px!important;font-size:9px!important}

/* Multilingual stability: preserve hierarchy without collisions */
html[lang="en"] .section-title,html[lang="vi"] .section-title{font-weight:500!important}
html[lang="en"] .hero-static__title{font-size:clamp(48px,4.35vw,72px)!important;max-width:11ch!important;line-height:1.01!important}
html[lang="vi"] .hero-static__title{font-size:clamp(44px,4vw,66px)!important;max-width:12ch!important;line-height:1.06!important}
html[lang="en"] .intro .section-title{font-size:clamp(38px,3.35vw,54px)!important;line-height:1.06!important}
html[lang="vi"] .intro .section-title{font-size:clamp(34px,3.05vw,50px)!important;line-height:1.1!important}

@media(max-width:1200px){
  :root{--sl-side:32px;--sl-section:104px;--sl-section-lg:118px}
  .site-header .main-nav{gap:22px!important}
  .hero-static__copy{padding-left:36px!important;padding-right:36px!important}
  .intro-grid{gap:42px!important}
}

@media(max-width:1100px){
  :root{--header:76px;--sl-side:24px}
  .site-header .brand img{height:36px!important}
  .page-hero-grid,.formula-v2-hero__grid,.process-hero__grid{gap:28px!important}
  .hero-static__visual.hero-rotator{min-height:520px!important}
  .home-rnd-panel__media{min-height:460px!important}
}

@media(max-width:680px){
  :root{--header:68px;--sl-side:15px;--sl-section:76px;--sl-section-lg:88px;--sl-section-sm:64px}
  .shell{width:calc(100% - 30px)!important}
  .site-header .brand img{height:32px!important}
  .eyebrow,.hero-static__eyebrow,.dd-page .eyebrow,.process-hero .eyebrow,.contact-page .eyebrow{font-size:9px!important;letter-spacing:.17em!important;margin-bottom:13px!important}
  .section-title{font-size:30px!important;line-height:1.13!important;letter-spacing:-.038em!important}
  .body-lg{font-size:15px!important;line-height:1.76!important}
  .hero-static .shell{width:calc(100% - 22px)!important}
  .hero-static__copy{padding:34px 17px 30px!important}
  .hero-static__title{font-size:39px!important;line-height:1.03!important;letter-spacing:-.042em!important;max-width:none!important}
  .hero-static__desc{margin-top:18px!important;font-size:14px!important;line-height:1.78!important;max-width:none!important}
  .hero-static__visual.hero-rotator{min-height:365px!important}
  .intro{padding:72px 0 46px!important}
  .intro-grid{grid-template-columns:1fr!important;gap:22px!important}
  .intro-copy{justify-self:start!important}
  .oem-showcase{padding-bottom:70px!important}
  .core-services{padding:54px 0 78px!important}
  .core-services__head{margin-bottom:34px!important;gap:16px!important}
  .core-services__head h2{font-size:31px!important}
  .home-rnd-panel{padding:78px 0!important}
  .home-rnd-panel__grid{gap:24px!important}
  .home-rnd-panel__media{min-height:315px!important}
  .innovation{padding:82px 0 92px!important}
  .global{padding:84px 0!important}
  .partner-heading{padding:62px 0 18px!important}
  .logos{padding:46px 0 62px!important}
  .page-hero{padding-top:calc(var(--header) + 54px)!important;padding-bottom:64px!important}
  .page-section{padding:76px 0!important}
  .page-hero .display,.formula-v2-hero .display{font-size:35px!important;line-height:1.08!important}
  .about-v32{padding:78px 0 90px!important}
  .about-v32__hero,.about-v32__mid,.about-v32__products{padding:14px!important}
  .about-v32__hero-copy h1{font-size:29px!important}
  .formula-v2-hero{padding:calc(var(--header) + 52px) 0 64px!important}
  .formula-v2-section{padding:78px 0!important}
  .process-hero{padding:calc(var(--header) + 52px) 0 42px!important}
  .process-hero__title{font-size:34px!important;line-height:1.1!important}
  .process-accordion-section{padding-bottom:86px!important}
  .dd-hero{padding:calc(var(--header) + 50px) 0 82px!important}
  .dd-hero__title{font-size:42px!important;line-height:1.04!important}
  .dd-statement{padding:80px 0 70px!important}
  .dd-wide-title,.dd-flow-title,.dd-support-title{font-size:32px!important;line-height:1.12!important}
  .dd-support-section{padding:80px 0 88px!important}
  .contact-hero{padding-top:calc(var(--header) + 52px)!important;padding-bottom:62px!important}
  .contact-consultation{padding-bottom:88px!important}
  .footer{padding:62px 0 28px!important}
  .footer-main{gap:38px!important}
  .footer-bottom{margin-top:38px!important}
  html[lang="en"] .intro .section-title{font-size:30px!important}
  html[lang="vi"] .intro .section-title{font-size:28px!important}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}


/* =========================================================
   COSMAX REFERENCE MICRO-TUNE V2 · 2026-10-03
   Editorial hierarchy: lighter title weight, calmer scale,
   more generous English tracking, cleaner line breaks.
   ========================================================= */

/* Global title refinement */
.section-title,
.display,
.page-hero .display,
.formula-v2-hero .display,
.process-hero__title,
.dd-hero__title,
.dd-wide-title,
.dd-flow-title,
.dd-support-title,
.contact-consultation h1,
.contact-consultation h2,
.about-v32__hero-copy h1,
.about-v32__statement h2{
  font-weight:400!important;
  word-break:keep-all!important;
  text-wrap:balance;
}

/* Korean titles: one step smaller and lighter */
html[lang="ko"] .section-title{font-size:clamp(34px,3.05vw,50px)!important;line-height:1.12!important;letter-spacing:-.037em!important}
html[lang="ko"] .page-hero .display,
html[lang="ko"] .formula-v2-hero .display{font-size:clamp(42px,4vw,64px)!important;line-height:1.06!important;letter-spacing:-.04em!important}
html[lang="ko"] .process-hero__title{font-size:clamp(38px,3.75vw,60px)!important;line-height:1.08!important;letter-spacing:-.04em!important}
html[lang="ko"] .dd-hero__title{font-size:clamp(46px,4.5vw,74px)!important;line-height:1.04!important;letter-spacing:-.043em!important}
html[lang="ko"] .dd-wide-title{font-size:clamp(38px,3.45vw,58px)!important;line-height:1.1!important;letter-spacing:-.038em!important}
html[lang="ko"] .dd-flow-title{font-size:clamp(36px,3.15vw,52px)!important;line-height:1.1!important;letter-spacing:-.036em!important}
html[lang="ko"] .dd-support-title{font-size:clamp(34px,3vw,48px)!important;line-height:1.12!important;letter-spacing:-.034em!important}
html[lang="ko"] .about-v32__hero-copy h1{font-size:clamp(34px,3vw,48px)!important;line-height:1.16!important;letter-spacing:-.035em!important}
html[lang="ko"] .about-v32__statement h2{font-size:clamp(29px,2.35vw,40px)!important;line-height:1.18!important;letter-spacing:-.032em!important}
html[lang="ko"] .contact-consultation h1,
html[lang="ko"] .contact-consultation h2{font-weight:400!important}

/* English editorial titles: slightly wider tracking like the reference site */
.hero-static__title,
.global .section-title,
.core-service-card__body h3,
html[lang="en"] .section-title,
html[lang="en"] .display,
html[lang="en"] .page-hero .display,
html[lang="en"] .formula-v2-hero .display,
html[lang="en"] .process-hero__title,
html[lang="en"] .dd-hero__title,
html[lang="en"] .dd-wide-title,
html[lang="en"] .dd-flow-title,
html[lang="en"] .dd-support-title{
  letter-spacing:.018em!important;
}
.hero-static__title{font-size:clamp(50px,4.55vw,72px)!important;line-height:1.04!important;font-weight:400!important;max-width:9ch!important}
.global .section-title{font-weight:400!important;line-height:1.08!important}
.core-service-card__body h3{letter-spacing:.01em!important;font-weight:400!important}

/* Vietnamese: slightly more breathing room for diacritics and longer words */
html[lang="vi"] .section-title,
html[lang="vi"] .display,
html[lang="vi"] .page-hero .display,
html[lang="vi"] .formula-v2-hero .display,
html[lang="vi"] .process-hero__title,
html[lang="vi"] .dd-hero__title,
html[lang="vi"] .dd-wide-title,
html[lang="vi"] .dd-flow-title,
html[lang="vi"] .dd-support-title{
  letter-spacing:-.012em!important;
  line-height:1.13!important;
  font-weight:400!important;
}

/* Body copy: calmer size, predictable readable line length */
.body-lg,
.dd-hero__body,
.dd-wide-copy,
.dd-flow-copy,
.dd-support-copy,
.process-hero__copy .body-lg,
.process-step__panel p,
.contact-hero p,
.contact-consultation p,
.about-v32__hero-copy p,
.about-v32__statement p{
  font-size:15px!important;
  line-height:1.82!important;
  font-weight:400!important;
  word-break:keep-all!important;
  text-wrap:pretty;
}
.home-rnd-panel__copy .body-lg{max-width:58ch!important}
.dd-hero__body{max-width:60ch!important}
.dd-wide-copy{max-width:76ch!important}
.dd-flow-copy{max-width:78ch!important}
.dd-support-copy{max-width:70ch!important}
.contact-hero__copy,.contact-consultation__lead{max-width:58ch!important}

/* Main WHAT WE DO and subpage titles, less oversized */
.intro .section-title{font-size:clamp(36px,3.15vw,50px)!important;line-height:1.1!important;font-weight:400!important;letter-spacing:-.032em!important}
html[lang="en"] .intro .section-title{font-size:clamp(34px,2.85vw,46px)!important;letter-spacing:.012em!important;line-height:1.12!important}
html[lang="vi"] .intro .section-title{font-size:clamp(32px,2.65vw,43px)!important;letter-spacing:-.012em!important;line-height:1.16!important}

/* Section rhythm, slightly more compact and consistent */
.intro{padding:112px 0 78px!important}
.core-services{padding:88px 0 126px!important}
.home-rnd-panel{padding:112px 0!important}
.innovation{padding:132px 0!important}
.global{padding:132px 0!important}
.page-section{padding:112px 0!important}
.dd-statement{padding:94px 0 82px!important}
.dd-support-section{padding:102px 0 112px!important}
.contact-consultation{padding-bottom:120px!important}

/* Hero crossfade: no keyframe reset, no hard transform jump */
.hero-static__visual.hero-rotator{background:#f4f1ed!important}
.hero-rotator__img{
  opacity:0!important;
  transform:scale(1.045)!important;
  filter:saturate(.97) contrast(.99)!important;
  transition:opacity 1.35s cubic-bezier(.45,0,.25,1), transform 6.8s cubic-bezier(.2,.55,.25,1), filter 1.35s ease!important;
  animation:none!important;
  will-change:opacity,transform!important;
  backface-visibility:hidden;
  transform-origin:center center;
}
.hero-rotator__img.is-active{
  opacity:1!important;
  transform:scale(1.012)!important;
  filter:saturate(1) contrast(1)!important;
  z-index:1;
  animation:none!important;
}
.hero-rotator__dots{z-index:4!important}
.hero-static__visual::after{z-index:3!important}

@media(max-width:1100px){
  .hero-static__title{font-size:clamp(46px,5vw,64px)!important}
  .intro .section-title{font-size:clamp(34px,3.8vw,46px)!important}
  .body-lg,.dd-hero__body,.dd-wide-copy,.dd-flow-copy,.dd-support-copy{font-size:15px!important}
}

@media(max-width:680px){
  html[lang="ko"] .section-title{font-size:28px!important;line-height:1.16!important}
  .hero-static__title{font-size:36px!important;line-height:1.08!important;letter-spacing:.02em!important}
  .intro .section-title{font-size:28px!important;line-height:1.16!important}
  html[lang="en"] .intro .section-title{font-size:27px!important;letter-spacing:.01em!important}
  html[lang="vi"] .intro .section-title{font-size:26px!important;line-height:1.2!important}
  .body-lg,.dd-hero__body,.dd-wide-copy,.dd-flow-copy,.dd-support-copy,.process-step__panel p{font-size:14px!important;line-height:1.78!important}
  .intro{padding:68px 0 44px!important}
  .core-services{padding:52px 0 74px!important}
  .home-rnd-panel{padding:74px 0!important}
  .innovation,.global{padding:82px 0!important}
}