/* One material aperture; the other chapters use typography, depth and reading rhythm. */
.motion-line{display:block;overflow:clip;padding-block:.1em;margin-block:-.1em}
.motion-line>span{display:block}
#cooperation{min-height:0;padding-block:clamp(100px,13vw,184px)}
#cooperation .start-rows{margin-top:88px}
#cooperation .start-row h3{font-size:clamp(30px,3.8vw,58px);letter-spacing:-.055em;font-weight:350}
#cooperation .start-row h4{font-size:clamp(21px,1.85vw,28px)}
#cosmetics .chapter-stage,#color .chapter-stage{height:100svh;min-height:680px}
#color .chapter-image img{height:114%;max-height:none;object-position:60% 50%}
#formats .format-tabs{position:sticky;top:112px;align-self:start}
#formats .format-row{isolation:isolate}
#formats .format-row:before{content:'';position:absolute;inset:0 -16px;background:rgba(28,101,85,.045);border-radius:16px;opacity:0;z-index:-1;transition:opacity .25s}
#formats .format-row:has(button:hover):before,#formats .format-row:focus-within:before{opacity:1}
#formats .format-row button{transition:transform .35s,color .35s}
#process .process-grid{gap:36px}
#process .process-grid article{position:relative;padding-top:32px;--step-fill:1}
#process .process-grid article:before,#process .process-grid article:after{content:'';position:absolute;inset-inline:0;top:0;height:1px;background:rgba(28,101,85,.16)}
#process .process-grid article:after{background:var(--teal);transform:scaleX(var(--step-fill));transform-origin:left center}
#process .process-grid article>span{font-size:clamp(30px,3.6vw,52px);font-weight:350;letter-spacing:-.06em;line-height:1.2}
#factory{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.65fr);gap:clamp(36px,6vw,100px);align-items:start}
#factory>.display{position:sticky;top:112px;max-width:340px;font-size:clamp(40px,4vw,64px)}
#factory .factory-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 28px;margin:0}
#factory .factory-grid article:nth-child(even){padding-top:100px}
#factory .factory-image{aspect-ratio:.88;border-radius:clamp(40px,5vw,80px) 10px 10px 10px}
#factory .factory-grid article:nth-child(even) .factory-image{aspect-ratio:.97;border-radius:10px 10px clamp(40px,5vw,80px) 10px}
#factory .factory-image img{height:114%;max-height:none;transition:filter .5s;object-position:center}
#factory .factory-grid article:hover img{transform:none;filter:saturate(1)}
#inquiry{position:relative;isolation:isolate;overflow:clip;min-height:68svh;align-content:center;padding-block:clamp(96px,12vw,176px);--invitation-shift:0%}
#inquiry:before{content:'';position:absolute;width:78vw;height:78vw;max-width:1200px;max-height:1200px;inset-inline-end:-34vw;top:50%;border-radius:50%;background:radial-gradient(circle at center,rgba(28,101,85,.11),rgba(28,101,85,.045) 48%,transparent 71%);transform:translateY(calc(-50% + var(--invitation-shift)));z-index:-1;pointer-events:none}
#inquiry .closing-link{align-self:center}
#inquiry .closing-arrow{position:relative;overflow:hidden;isolation:isolate;background:transparent;transition:color .4s,border-color .4s}
#inquiry .closing-arrow:before{content:'';position:absolute;inset:0;background:var(--teal);border-radius:50%;transform:translateY(102%);transition:transform .45s cubic-bezier(.2,.8,.2,1);z-index:-1}
#inquiry .closing-link:hover .closing-arrow,#inquiry .closing-link:focus-visible .closing-arrow{transform:none;background:transparent;color:var(--paper);border-color:var(--teal)}
#inquiry .closing-link:hover .closing-arrow:before,#inquiry .closing-link:focus-visible .closing-arrow:before{transform:translateY(0)}
:lang(ar) #process .process-grid article:after{transform-origin:right center}
:lang(ar) #factory .factory-image{border-radius:10px clamp(40px,5vw,80px) 10px 10px}
/* Direct navigation and keyboard focus always resolve to readable content. */
[data-motion-complete] :is(.motion-line>span,.intro-copy,.start-row,h2,.chapter-caption,.section-intro,.process-grid article>*,.factory-grid article){transform:none!important;opacity:1!important}
[data-motion-complete] .process-grid article{--step-fill:1!important}
#cosmetics[data-motion-complete] .chapter-image{clip-path:none!important}
@media(min-width:1024px){
 #cooperation .start-row:nth-child(2){padding-top:32px}
 #cooperation .start-row:nth-child(3){padding-top:64px}
}
@media(max-width:1023px){
 #factory{display:block}
 #factory>.display{position:static;max-width:700px;font-size:clamp(34px,4.6vw,52px)}
 #factory .factory-grid{margin-top:44px}
 #factory .factory-grid article:nth-child(even){padding-top:56px}
}
@media(max-width:767px){
 #cooperation{padding-block:76px 88px}
 #cooperation .start-rows{margin-top:48px;gap:40px}
 #cooperation .start-row h3{font-size:32px}
 #cooperation .start-row h4{font-size:22px}
 #cosmetics .chapter-stage,#color .chapter-stage{height:auto;min-height:0;padding-block:36px 52px}
 #color .chapter-image img{height:100%}
 #formats .format-tabs{position:static}
 #process .process-grid{gap:32px}
 #process .process-grid article{padding-top:22px;grid-template-columns:40px minmax(0,1fr)}
 #process .process-grid article>span{font-size:27px;padding:0}
 #process .process-grid article:after{transform:scaleX(var(--step-fill))}
 #factory .factory-grid{grid-template-columns:1fr;gap:36px;margin-top:36px}
 #factory .factory-grid article:nth-child(even){padding-top:0}
 #factory .factory-image,#factory .factory-grid article:nth-child(even) .factory-image{aspect-ratio:1.22;border-radius:48px 8px 8px 8px}
 #factory .factory-image img{height:100%}
 #inquiry{min-height:0;padding-block:84px 92px}
 #inquiry:before{width:170vw;height:170vw;inset-inline-end:-90vw}
}
@media(prefers-reduced-motion:reduce){
 .motion-line>span,[data-page-motion] :is(.start-row,.format-row,.chapter-caption,h2,h3,p){transform:none!important;opacity:1!important}
 #cosmetics .chapter-image{clip-path:none!important}
 #color .chapter-image img,#factory .factory-image img{height:100%;transform:none!important}
 #process .process-grid article{--step-fill:1!important}
 #inquiry{--invitation-shift:0%!important}
 #factory>.display,#formats .format-tabs{position:static}
}

/* Acceptance pass: one compact evidence section, with existing image reveals. */
#factory{display:block;padding-block:64px 60px}
#factory>.display{position:static;max-width:none;margin:0 0 32px}
#factory .factory-grid{display:grid;grid-template-columns:1.55fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));height:clamp(360px,50svh,460px);gap:24px 30px;margin:0}
#factory .factory-grid article{display:flex;flex-direction:column;min-height:0;padding:0}
#factory .factory-grid article:first-child{grid-row:1/3}
#factory .factory-grid article:nth-child(even){padding:0}
#factory .factory-image,#factory .factory-grid article:nth-child(even) .factory-image,:lang(ar) #factory .factory-image{flex:1;min-height:0;aspect-ratio:auto;border-radius:10px}
#factory .factory-image img{filter:saturate(.72) brightness(1.025);object-position:center;transition:none}
#factory .factory-grid article:hover img{filter:saturate(.72) brightness(1.025)}
#factory .factory-grid h3{font-size:17px;line-height:1.4;margin-top:10px}
#factory .factory-fact{margin-top:25px;font-size:14px;line-height:1.7;color:var(--muted)}
@media(min-width:768px){
 /* Reserve paper below the image so the caption never competes with powder. */
 #color .chapter-image{bottom:210px}
 #color .chapter-caption{left:auto;right:var(--gutter);bottom:32px;width:min(610px,78%)}
 #color .chapter-caption p{max-width:610px}
 #color .chapter-caption .text-link{margin-top:16px}
 :lang(ar) #color .chapter-caption{right:auto;left:var(--gutter)}
}
@media(max-width:767px){
 #factory{padding-block:52px}
 #factory>.display{margin-bottom:26px}
 #factory .factory-grid{height:auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:250px 166px;gap:24px 16px}
 #factory .factory-grid article:first-child{grid-column:1/-1;grid-row:auto}
 #factory .factory-grid h3{font-size:14px}
 #factory .factory-fact{margin-top:22px}
}