/* Original desktop coordinates are relative to the centered 981px content area. */
@font-face{font-family:FoodNanumGothic;src:url('assets/fonts/NanumGothic-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
.food-accessible-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.food-hero{position:relative;height:605px;z-index:2;color:white}
.food-backdrop{position:absolute;inset:0;clip-path:inset(0);z-index:-1;pointer-events:none;background:#163d27}
.food-backdrop>img{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;max-width:none;object-fit:cover}
.food-backdrop>video{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;max-width:none;object-fit:cover;opacity:0}
.food-backdrop>video.background-ready{opacity:1}
@media(prefers-reduced-motion:reduce){.food-backdrop>video.background-ready{opacity:0}}
.food-bamboo::after,.food-mechanism::after{content:"";position:fixed;inset:0;background:linear-gradient(#08140c40,#08140c40),url('assets/bokeh-stripes.svg') repeat;background-size:auto,8px 8px}
.food-hero-stage{position:relative;width:min(981px,100%);height:100%;margin:auto}
.food-hero-stage>img{position:absolute;max-width:none;object-fit:fill}
.food-title{left:33px;top:63px;width:600px;height:60px}
.food-subtitle{left:33px;top:136px;width:600px;height:49px}
.food-badge{left:733px;top:104px;width:227px;height:191px}
.food-intro-copy{left:33px;top:405px;width:420px;height:161px}
.food-machine{left:390px;top:244px;width:600px;height:432px;z-index:3}
.food-marks{left:506px;top:611px;width:193px;height:48px;z-index:4}
.food-explanation{position:relative;isolation:isolate;z-index:1;background:#f5f7fb}
.food-economy{background:#edf1f7}.food-economy::after{content:"";position:absolute;inset:0;background:#fff8}
.food-explanation-stage{position:relative;width:min(981px,100%);height:408px;margin:auto;padding-top:81px}
.food-explanation-copy{position:relative;margin-left:185px;width:641px;font-family:FoodNanumGothic,"Malgun Gothic",sans-serif;font-size:20px;font-weight:700;line-height:26px;color:#303030;word-break:normal;overflow-wrap:break-word}
.food-explanation-copy p{margin:0}
.food-opening{position:absolute;left:-46px;top:0;width:98px;height:244px;border-left:28px solid #303030;padding-left:18px;line-height:68px;font-size:45px;font-weight:400}
.food-explanation-first{padding-left:47px;min-height:56px}
.food-explanation-rest p+p{margin-top:26px}
.food-features{display:grid;grid-template-columns:calc(50% - 100px) calc(50% + 100px)}
.food-special,.food-smart{position:relative;isolation:isolate;height:409px;overflow:hidden}
.food-mechanism{background:#151515}.food-mechanism::after{background:linear-gradient(#0006,#0006),url('assets/bokeh-stripes.svg') repeat;background-size:auto,8px 8px}
.food-special-stage{position:relative;width:190px;height:100%;margin:27px 28px 0 auto;color:white}
.food-special-heading{display:flex;gap:3px;align-items:center;height:61px}
.food-five{width:37px;height:58px;object-fit:fill}
.food-special-title{width:152px;height:61px;object-fit:fill}
.food-special-line{height:5px;margin:5px 0 4px;background:white}
.food-special-list{width:188px;height:261px;object-fit:fill;max-width:none}
.food-electronics{background:#e0e3e5}.food-electronics::after{content:"";position:absolute;inset:0;background:#fff6}
.food-electronics>img{transform:scale(var(--electronics-scale,1));transform-origin:50% 50%;will-change:transform}
@media(prefers-reduced-motion:reduce){.food-electronics>img{transform:none;will-change:auto}}
.food-smart-stage{position:relative;width:559px;height:345px;margin:27px 0 0 13px}
.food-smart-stage>img{position:absolute;max-width:none;object-fit:fill}
.food-smart-diagram{left:0;top:0;width:559px;height:345px}
.food-seven{left:197px;top:93px;width:105px;height:135px}
.food-smart-title{left:131px;top:85px;width:340px;height:101px}
.food-contact{display:flex;align-items:center;justify-content:center;min-height:123px;background:#59b9f4;color:white;text-align:center;padding:24px 20px}
.food-contact>a{display:block;font-family:FoodNanumGothic,"Malgun Gothic",sans-serif;font-size:40px;font-weight:700;line-height:1.6}
.food-contact strong{font-size:54px;white-space:nowrap}
.food-footer::before{background:linear-gradient(#06110b66,#06110b66),url('assets/foodwaste/bamboo-v1.png') center/cover}
.food-footer.food-forest-footer::before{background:none}
.food-forest-footer>.food-backdrop{z-index:-3}
.food-forest-footer>.food-backdrop::after{content:"";position:fixed;inset:0;background:#06110b66}
@media(min-width:761px) and (max-width:1000px){
 .food-hero{height:61.67vw}
 .food-title{left:3.36%;top:6.42vw;width:61.16%;height:6.12vw}
 .food-subtitle{left:3.36%;top:13.86vw;width:61.16%;height:5vw}
 .food-badge{left:74.72%;top:10.6vw;width:23.14%;height:19.47vw}
 .food-intro-copy{left:3.36%;top:41.28vw;width:42.81%;height:16.41vw}
 .food-machine{left:39.75%;top:24.87vw;width:60.25%;height:43.38vw}
 .food-marks{left:51.58%;top:62.28vw;width:19.67%;height:4.89vw}
 .food-explanation-stage{height:auto;min-height:408px;padding:10vw 30px 55px}
 .food-explanation-copy{margin:0 auto;width:min(641px,calc(100% - 74px))}
 .food-features{grid-template-columns:36% 64%}
 .food-smart-stage{margin-left:0;width:100%;height:auto;aspect-ratio:559/345}
 .food-smart-diagram{width:100%;height:100%}.food-seven{left:35.24%;top:26.96%;width:18.78%;height:39.13%}.food-smart-title{left:23.43%;top:24.64%;width:60.82%;height:29.28%}
}
@media(max-width:760px){
 .food-hero{height:auto;padding-bottom:25px}
 .food-hero-stage{width:94%;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:30px;height:auto}
 .food-hero-stage>img{position:relative;left:auto;top:auto;max-width:100%;height:auto;object-fit:contain}
 .food-title,.food-subtitle{grid-column:1/-1;width:100%}
 .food-subtitle{margin-top:-5px}
 .food-badge{width:104px;justify-self:end;grid-column:2;grid-row:3;z-index:4;margin:6px 8px -40px 0}
 .food-intro-copy{grid-column:1/-1;grid-row:5;width:100%;max-width:420px!important;margin:8px auto 0}
 .food-machine{grid-column:1/-1;grid-row:4;width:100%;margin-top:0}
 .food-marks{grid-column:1/-1;grid-row:6;width:200px;justify-self:center;margin-top:3px;background:#fffffff0;padding:10px;border-radius:4px}
 .food-explanation-stage{height:auto;padding:40px 24px 40px;width:100%}
 .food-explanation-copy{width:auto;margin:0 0 0 13px;font-size:16px;line-height:1.8}
 .food-opening{left:-17px;width:54px;height:100%;border-left-width:5px;padding-left:12px;font-size:34px;line-height:1.5}
 .food-explanation-first{padding-left:38px;min-height:0}
 .food-explanation-rest p+p{margin-top:22px}
 .food-features{grid-template-columns:1fr}
 .food-special{height:410px}.food-special-stage{margin:27px auto 0;width:190px}
 .food-smart{height:auto;min-height:250px;padding:28px 12px 34px}
 .food-smart-stage{width:100%;max-width:559px;height:auto;aspect-ratio:559/345;margin:0 auto}
 .food-smart-diagram{width:100%;height:100%}.food-seven{left:35.24%;top:26.96%;width:18.78%;height:39.13%}.food-smart-title{left:23.43%;top:24.64%;width:60.82%;height:29.28%}
 .food-contact{padding:24px 16px;min-height:123px}.food-contact>a{font-size:22px;line-height:1.6}.food-contact strong{display:block;font-size:32px}
}
.js [data-food-motion]{animation:var(--food-animation);animation-play-state:paused;will-change:transform,opacity,clip-path}
.js [data-food-motion].motion-in{animation-play-state:running}
.js [data-food-motion][data-motion-state="done"]{animation:none;will-change:auto}
@keyframes food-fade-in{from{opacity:0}to{opacity:1}}
@keyframes food-slide-in{
 0%{opacity:0;animation-timing-function:step-end}
 .0001%{opacity:1;transform:translate(var(--motion-translate-x,-100%),var(--motion-translate-y,0%));clip-path:var(--motion-clip-start)}
 100%{transform:translate(0,0);clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}
}
@keyframes food-reveal-in{
 0%{opacity:0;animation-timing-function:step-end}
 .0001%{opacity:1;clip-path:var(--motion-clip-start)}
 100%{clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}
}
@keyframes food-flip-in{
 .0001%{transform:perspective(800px) rotateX(var(--motion-rotate-x,0deg)) rotateY(var(--motion-rotate-y,-45deg))}
 100%{transform:perspective(800px) rotateX(0deg) rotateY(0deg)}
}
@keyframes food-fold-in{
 .0001%{transform:translate(var(--motion-origin-x,-50%),var(--motion-origin-y,0%)) perspective(800px) rotateX(var(--motion-rotate-x,0deg)) rotateY(var(--motion-rotate-y,90deg)) translate(calc(-1 * var(--motion-origin-x,-50%)),calc(-1 * var(--motion-origin-y,0%)))}
 100%{transform:translate(var(--motion-origin-x,-50%),var(--motion-origin-y,0%)) perspective(800px) rotateX(0deg) rotateY(0deg) translate(calc(-1 * var(--motion-origin-x,-50%)),calc(-1 * var(--motion-origin-y,0%)))}
}

@media(prefers-reduced-motion:reduce){.js [data-food-motion]{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important;will-change:auto}}

/* Let the explanation flow as one sentence; reserve two lines for the initial. */
.food-explanation-copy{word-break:keep-all;overflow-wrap:normal}
.food-explanation-first{padding-left:0;min-height:0;display:flow-root}
.food-explanation-first::before{content:"";float:left;width:47px;height:52px}
.food-opening{line-height:52px}
.food-copy-unit{white-space:nowrap}
.food-explanation-rest{margin-top:26px}
@media(max-width:760px){
 .food-explanation-first::before{width:38px;height:57.6px}
 .food-opening{line-height:57.6px}
 .food-explanation-rest{margin-top:22px}
}

/* The diagram forms out of a soft haze after the smart-functions title. */
.js .food-smart-diagram[data-food-motion]{will-change:opacity,filter}
.js .food-smart-diagram[data-motion-state="done"]{filter:none;will-change:auto}
@keyframes food-mist-in{
 0%{opacity:0;filter:blur(14px)}
 35%{opacity:.45;filter:blur(7px)}
 100%{opacity:1;filter:blur(0)}
}
@media(prefers-reduced-motion:reduce){.js .food-smart-diagram[data-food-motion]{filter:none;will-change:auto}}

/* Keep the same rendering layer and final animation frame after the mist clears.
   Dropping the filter layer could rasterize the small embedded caption a pixel away. */
.js .food-smart-diagram[data-food-motion]{transform:translateZ(0);backface-visibility:hidden;animation-fill-mode:both;will-change:filter,opacity}
.js .food-smart-diagram[data-motion-state="done"]{animation:var(--food-animation);animation-play-state:running;animation-fill-mode:both;filter:blur(0);will-change:filter,opacity}
@media(prefers-reduced-motion:reduce){.js .food-smart-diagram[data-food-motion]{animation:none!important;filter:none;transform:none;will-change:auto}}
/* Preserve the title image's clip layer too: it contains SMART FUNCTIONS PERFECT. */
.js .food-smart-title[data-food-motion]{transform:translateZ(0);backface-visibility:hidden;animation-fill-mode:both;will-change:transform,clip-path,opacity}
.js .food-smart-title[data-motion-state="done"]{animation:var(--food-animation);animation-play-state:running;animation-fill-mode:both;will-change:transform,clip-path,opacity}
@media(prefers-reduced-motion:reduce){.js .food-smart-title[data-food-motion]{animation:none!important;transform:none;will-change:auto}}

/* Keep certification artwork on the same layer through the reveal's last frame. */
.js .food-marks[data-food-motion]{transform:translateZ(0);backface-visibility:hidden;animation-fill-mode:both;will-change:transform,clip-path,opacity}
.js .food-marks[data-motion-state="done"]{animation:var(--food-animation);animation-play-state:running;animation-fill-mode:both;will-change:transform,clip-path,opacity}
@media(prefers-reduced-motion:reduce){.js .food-marks[data-food-motion]{animation:none!important;transform:none;clip-path:none;will-change:auto}}

/* A float ending exactly at a fractional line boundary can indent a third line. */
.food-explanation-first::before{height:51px;height:calc(2lh - 1px)}
@media(max-width:760px){.food-explanation-first::before{height:56.6px;height:calc(2lh - 1px)}}

/* Selected B: preserve the original transparent marks and add only a thin white glow. */
.food-hero-stage>.food-marks{background:transparent;padding:0;border-radius:0;filter:drop-shadow(1px 0 0 #fffd) drop-shadow(-1px 0 0 #fffd) drop-shadow(0 1px 0 #fffd) drop-shadow(0 -1px 0 #fffd) drop-shadow(0 0 2px #fffb)}

/* Flat outline and the two middle marks are composed in the SVG, without blur. */
.food-hero-stage>.food-marks{filter:none}

/* Compact contact strip on phones and tablets, with only a little vertical breathing room. */
.food-contact{min-height:0;padding:6px 16px}.food-contact>a{line-height:1.2}

/* One continuous forest behind the transparent hero and footer. */
.food-page{position:relative;isolation:isolate;background:#163d27}
.food-site-forest{position:fixed;inset:0;z-index:-2;clip-path:none}
footer.food-forest-footer{background:transparent}
footer.food-forest-footer::before,footer.food-forest-footer::after{display:none}

/* A quarter-strength dark tint separates the footer without interrupting the forest. */
footer.food-forest-footer::after{display:block;position:absolute;inset:0;z-index:0;pointer-events:none;background:rgba(2,16,20,.25)}