/* A quieter editorial rhythm below the approved first screen. */
#cooperation,#formats,#process,#factory,#inquiry{--section-gutter:clamp(28px,5.6vw,104px);--soft-line:1px solid rgba(28,101,85,.14)}
#cooperation{display:block;min-height:100svh;padding:100px var(--section-gutter) 104px;background:var(--fog)}
#cooperation .display{font-size:clamp(40px,4.6vw,70px);line-height:1.14;letter-spacing:-.04em;font-weight:350;max-width:820px;margin:auto}
.cooperation-intro{min-width:0;text-align:center;max-width:820px;margin:0 auto}
#cooperation .intro-copy{font-size:16px;line-height:1.85;margin:26px auto 0;max-width:570px;padding:0;color:var(--muted)}
#cooperation .mobile-break{display:none}
.start-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,5vw,80px);margin-top:68px;min-width:0}
#cooperation .start-row{display:flex;flex-direction:column;gap:20px;padding:0;border:0;align-items:flex-start;min-width:0}
#cooperation .start-row h3{font-size:15px;font-weight:500;line-height:1.4;letter-spacing:.04em;color:var(--teal)}
#cooperation .start-row>div{min-width:0;flex:1}
#cooperation .start-row h4{font-size:clamp(23px,2.05vw,30px);line-height:1.4;font-weight:380;letter-spacing:-.025em;text-wrap:pretty}
#cooperation .start-row p{font-size:14px;line-height:1.9;margin-top:15px;max-width:420px;color:var(--muted)}
#cooperation .row-link{align-self:flex-start;padding:0;margin-top:4px;min-width:46px;min-height:46px}
#cooperation .row-link i{width:46px;height:46px;border:1px solid rgba(28,101,85,.23);background:transparent;color:var(--teal);font-size:24px}
#cooperation .row-link:hover i{background:var(--teal);color:var(--paper);transform:translate(2px,-2px)}

/* Give product photography more room; keep the caption as a readable unit. */
.chapter-stage{height:92svh;min-height:640px}
.chapter-image{clip-path:none}
.chapter-image img{transform:none}
.chapter-image:after,.color-chapter .chapter-image:after{display:none;background:none}
#cosmetics .chapter-stage h2,#color .chapter-stage h2{font-size:clamp(64px,7vw,112px);font-weight:330;line-height:1.12;letter-spacing:-.04em}
.chapter-caption p{font-size:16px;line-height:1.85}
.chapter-caption .text-link{font-size:13px;margin-top:22px}

#formats,#process,#factory{padding:104px var(--section-gutter) 112px}
#formats .section-intro,#process .section-intro{display:block;max-width:700px;margin-bottom:52px}
#formats .display,#process .display,#factory .display{font-size:clamp(37px,3.6vw,56px);font-weight:350;line-height:1.2;letter-spacing:-.03em}
#formats .intro-copy,#process .intro-copy{font-size:16px;line-height:1.85;max-width:530px;margin-top:24px;color:var(--muted)}
#formats .formats-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(40px,7vw,112px);margin-top:0}
#formats .format-tabs{gap:26px}
#formats .format-tabs button{font-size:clamp(24px,2.4vw,34px);font-weight:350;gap:24px;line-height:1.5}
#formats .format-row{border-top:var(--soft-line);padding-block:25px 28px}
#formats .format-row:last-child{border-bottom:0}
#formats .format-row h3{font-size:21px;line-height:1.45;font-weight:400;letter-spacing:-.015em;margin-bottom:9px}
#formats .format-row button{min-width:44px;min-height:44px;top:18px;font-size:22px;color:var(--teal)}
#formats .format-row p{font-size:14px;line-height:1.85}

#process{background:var(--fog)}
#process .process-grid{gap:40px;margin-top:48px}
#process .process-grid article{border:0;padding-top:0}
#process .process-grid article>span{display:block;font-size:13px;line-height:1.5;letter-spacing:.04em;font-weight:500;color:var(--teal)}
#process .process-grid h3{font-size:22px;line-height:1.4;font-weight:400;letter-spacing:-.02em;margin:20px 0 12px}
#process .process-grid p{font-size:14px;line-height:1.85}
#factory .factory-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:52px 32px;margin-top:52px}
#factory .factory-image{aspect-ratio:1.3;border-radius:10px}
#factory .factory-grid h3{font-size:21px;line-height:1.45;font-weight:400;letter-spacing:-.015em;margin-top:20px}
#factory .factory-grid p{font-size:14px;line-height:1.85;margin-top:8px;max-width:320px}
#inquiry{padding:96px var(--section-gutter) 104px}
#inquiry h2{font-size:clamp(36px,3.9vw,60px);font-weight:350;line-height:1.25;letter-spacing:-.035em}
#inquiry .closing-arrow{width:100px;height:100px;font-size:56px;border-color:rgba(28,101,85,.25);color:var(--teal)}
#inquiry .closing-link{font-size:17px;gap:26px}
#inquiry .closing-link:hover .closing-arrow{transform:translate(3px,-3px);color:var(--paper)}

/* Respect the rhythm of CJK and Arabic scripts instead of squeezing their tracking. */
:is(:lang(zh-CN),:lang(ko),:lang(ar)) :is(#cooperation,#formats,#process,#factory) .display{font-size:clamp(34px,3.25vw,51px);font-weight:400;letter-spacing:0;line-height:1.5}
:is(:lang(zh-CN),:lang(ko),:lang(ar)) #cooperation .start-row h4{font-weight:400;letter-spacing:0;line-height:1.65;font-size:clamp(22px,1.9vw,28px)}
:is(:lang(zh-CN),:lang(ko),:lang(ar)) #inquiry h2{font-size:clamp(34px,3.5vw,54px);font-weight:400;letter-spacing:0;line-height:1.6}
:lang(ar) #cooperation .start-row h3{text-align:start;direction:inherit}
:lang(ar) #formats .format-tabs button{letter-spacing:0;font-weight:400}
:lang(ar) #cooperation .row-link:hover i{transform:translate(-2px,-2px) scaleX(-1)}
:is(:lang(zh-CN),:lang(ko),:lang(ar)) :is(#cosmetics,#color) .chapter-stage h2{font-weight:400;letter-spacing:0;line-height:1.5;font-size:clamp(56px,6vw,92px)}

@media(min-width:768px) and (max-width:1023px){
 #cooperation{padding-inline:36px}
 #cooperation .display{font-size:44px}
 #cooperation .start-rows{gap:28px}
 #cooperation .start-row{gap:18px}
 #cooperation .start-row h4{font-size:22px}
 #process .process-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 48px}
 #factory .factory-grid{gap:40px 24px}
}
@media(max-width:767px){
 #cooperation,#formats,#process,#factory,#inquiry{--section-gutter:24px}
 #cooperation{display:block;padding:64px 24px 72px}
 #cooperation .display{font-size:36px;line-height:1.18;max-width:460px}
 #cooperation .intro-copy{font-size:15px;line-height:1.85;margin-top:22px;max-width:440px}
 .start-rows{display:flex;flex-direction:column;gap:36px;margin-top:48px}
 #cooperation .start-row{display:grid;grid-template-columns:minmax(0,1fr) 46px;padding:0;gap:14px 20px}
 #cooperation .start-row h3{grid-column:1;grid-row:1;font-size:13px}
 #cooperation .start-row>div{grid-column:1;grid-row:2}
 #cooperation .row-link{grid-column:2;grid-row:1/3;align-self:center}
 #cooperation .start-row h4{font-size:23px;line-height:1.4}
 #cooperation .start-row p{font-size:14px;line-height:1.8;margin-top:11px}
 .chapter-stage{height:auto;min-height:0}
 #cosmetics .chapter-stage h2,#color .chapter-stage h2{font-size:clamp(42px,11.5vw,63px);line-height:1.12;font-weight:350}
 .chapter-caption p{font-size:15px;line-height:1.85}
 #formats,#process,#factory{padding:68px 24px 76px}
 #formats .section-intro,#process .section-intro{margin-bottom:36px}
 #formats .display,#process .display,#factory .display{font-size:33px;line-height:1.22}
 #formats .intro-copy,#process .intro-copy{font-size:15px;line-height:1.85;margin-top:20px}
 #formats .formats-layout{display:block}
 #formats .format-tabs{flex-wrap:wrap;gap:16px 24px;padding-bottom:24px}
 #formats .format-tabs button{font-size:22px;gap:12px}
 #formats .format-row h3{font-size:20px}
 #process .process-grid{grid-template-columns:1fr;gap:30px;margin-top:36px}
 #process .process-grid article{display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 18px}
 #process .process-grid article>span{grid-column:1;grid-row:1/3;padding-top:5px}
 #process .process-grid h3{grid-column:2;margin:0 0 9px;font-size:21px}
 #process .process-grid p{grid-column:2;max-width:none}
 #factory .factory-grid{grid-template-columns:1fr;gap:32px;margin-top:36px}
 #factory .factory-image{aspect-ratio:1.55}
 #factory .factory-grid h3{font-size:21px;margin-top:16px}
 #factory .factory-grid p{font-size:14px;max-width:440px}
 #inquiry{display:block;padding:68px 24px 76px}
 #inquiry h2{font-size:34px;line-height:1.27}
 #inquiry .closing-link{margin-top:34px;font-size:16px}
 #inquiry .closing-arrow{width:70px;height:70px;font-size:42px}
 :is(:lang(zh-CN),:lang(ko),:lang(ar)) :is(#cooperation,#formats,#process,#factory) .display{font-size:30px;line-height:1.5}
 :is(:lang(zh-CN),:lang(ko),:lang(ar)) #cooperation .start-row h4{font-size:22px;line-height:1.6}
 :is(:lang(zh-CN),:lang(ko),:lang(ar)) #inquiry h2{font-size:30px;line-height:1.6}
 :is(:lang(zh-CN),:lang(ko),:lang(ar)) :is(#cosmetics,#color) .chapter-stage h2{font-size:46px;line-height:1.5}
}