*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--px:24px;--g:"Gilda Display",serif;--n:"Noto Sans KR",sans-serif}
html{-webkit-text-size-adjust:100%}
body{background:#FDFAF3;color:#333;font-family:var(--n);font-weight:400;word-break:keep-all;overflow-wrap:break-word;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{display:block}
.d{display:none}

/* header + submenu */
.hd{height:74px;padding:24px var(--px);display:flex;align-items:center;background:#FDFAF3}
.logo{display:block;width:78px;height:26px}
.logo img{width:78px;height:26px}
.sub{padding:40px var(--px) 35px}
.sub-title{font:400 26px/31px var(--g);color:#000;margin-bottom:35px}
.sub ul{list-style:none;display:flex;gap:30px;padding:16px 0;border-top:1px solid #E9E5DA;border-bottom:1px solid #E9E5DA}
.sub a{display:block;font:500 12px/17px var(--n);color:#9F9B90;text-decoration:none}
.sub a[aria-current]{color:#333}

/* intro */
.intro{min-height:740px;padding:100px var(--px) 112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px}
.intro.te{padding-bottom:0}
.intro .head{width:100%;display:flex;flex-direction:column;gap:30px;text-align:center}
.intro h1{font:400 22px/32px var(--g);color:#686054}
.intro .lead{font:400 21px/34px var(--n);color:#333}
.intro .ibody{width:100%;max-width:330px;display:flex;flex-direction:column;gap:20px;text-align:center}
.intro .t1{font:400 17px/31px var(--n);color:#333}
.intro .t2{font:400 17px/31px var(--n);color:#686054}

/* video / media */
.vwrap{padding:0 var(--px)}
.vwrap.full{padding:0}
.vb{position:relative;width:100%;aspect-ratio:var(--m);overflow:hidden}
.vb video,.vb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wide{width:100%}
.wide img{width:100%;height:auto}

/* sections */
.sec{display:flex;flex-direction:column;gap:52px;padding:100px var(--px)}
.sec.b{background:#F1EEE8;padding:88px var(--px) 96px;gap:48px}
.sec.c{padding:96px var(--px) 112px;gap:48px}
.txt{width:100%;display:flex;flex-direction:column;gap:28px}
.hgrp{display:flex;flex-direction:column;gap:16px}
.txt h2,.ptxt h2,.oh{font:400 22px/32px var(--g);color:#686054}
.q{font:400 21px/34px var(--n);color:#333}
.paras{display:flex;flex-direction:column;gap:18px}
.paras p{font:400 17px/31px var(--n);color:#686054}
.paras p.s{color:#333}
.paras p.lg{font-size:19px;color:#333}
.kr{font-family:var(--n);font-weight:400;line-height:0}
.ph{width:286px;max-width:100%}
.sec.rev .ph{margin-left:auto}
.ph img,.ph video{width:100%;height:auto}
.ph .vb img,.ph .vb video{height:100%}

/* closing */
.close{background:#F1EEE8;padding:88px var(--px) 96px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.close .c1{font:400 21px/34px var(--n);color:#333}
.close .c2{font:400 19px/32px var(--n);color:#333}
.close .c3{font:400 17px/31px var(--n);color:#686054}

/* soft cream background + fade-up (Our Story intro) */
.intro.soft{position:relative;isolation:isolate;overflow:hidden}
.intro.soft::before{content:"";position:absolute;inset:-60px;z-index:-1;background:url(assets/v3/os-video.jpg) center/cover;filter:blur(28px);opacity:.55}
.intro.soft::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(253,250,243,.55),rgba(253,250,243,0) 70%),linear-gradient(#FDFAF3,rgba(253,250,243,0) 22%,rgba(253,250,243,0) 78%,#FDFAF3)}
.intro.soft h1{font:500 25px/37px var(--n);letter-spacing:-.02em;color:#333}
.intro.soft .hl{font:400 18px/29px var(--n);color:#686054}
.intro.hero{min-height:640px;justify-content:flex-start;padding-top:84px}
.intro.hero::before{display:none}
.intro.hero::after{background:radial-gradient(ellipse 60% 45% at 50% 22%,rgba(253,250,243,.72),rgba(253,250,243,.2) 75%)}
.hv{position:absolute;inset:0;z-index:-2}
.hv video{width:100%;height:100%;object-fit:cover}

.after{padding:140px var(--px);display:flex;justify-content:center;text-align:center}
.after .ibody{max-width:342px}
.after .t2{font:400 17px/31px var(--n);color:#686054}
.after .drops{width:96px;height:auto;margin:0 auto 28px}


/* philosophy: full-width photo, text below (Abib style) */
.philo{padding:72px 0 100px}
.pimg img{width:100%;height:auto}
.ptxt{padding:56px var(--px) 0;display:flex;flex-direction:column;gap:28px}

/* middle statement */
.mid{padding:140px var(--px) 122px;text-align:center}
.mid .paras{align-items:center}
.pt{font-style:normal;color:#B0652A}
.sec.round .ph img{-webkit-mask-image:radial-gradient(circle closest-side at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(circle closest-side at 50% 50%,#000 72%,transparent 100%)}

/* three essentials beach photo: never upscale */
.wide img{max-width:744px;margin:0 auto}
/* beige section blends into ivory neighbours */
.sec.b.blend{background:linear-gradient(#FDFAF3,#F1EEE8 18%,#F1EEE8 82%,#FDFAF3)}
/* our promise: text + video */
.opi{text-align:center;padding:64px var(--px) 0;gap:36px}
.opi .txt{align-items:center}
.sec.split .ph{width:auto;max-width:none;margin:0 calc(-1 * var(--px))}
.opi .vb{aspect-ratio:var(--m)}

/* same top gap on all pages (matches Our Story hero) */
.intro.te{min-height:0;justify-content:flex-start;padding:84px var(--px) 64px}
.opi{padding-top:84px}

/* rise-in on scroll (all pages) */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1.1s cubic-bezier(.22,.61,.36,1);transition-delay:var(--rd,0s)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* tablet: mobile structure, widened */
@media (min-width:768px){
:root{--px:max(24px,calc((100% - 600px)/2))}
}

/* desktop */
@media (min-width:1024px){
:root{--px:max(min(96px,6.667vw),calc((100% - 1248px)/2))}
.d{display:inline}
.m{display:none}
.hd{height:92px;padding:30px var(--px)}
.logo,.logo img{width:96px;height:32px}
.sub{padding:45px var(--px) 60px}
.sub-title{font-size:40px;line-height:48px;margin-bottom:45px}
.intro{min-height:764px;padding:156px var(--px) 152px;gap:52px}
.intro.te{padding-bottom:0}
.intro .head{gap:36px}
.intro h1{font-size:27px;line-height:37px}
.intro .lead{font-size:23px;line-height:37px}
.intro .ibody{max-width:720px}
.intro .t1{font-size:19px;line-height:36px}
.intro .t2{font-size:18px;line-height:34px}
.vb{aspect-ratio:var(--d)}
.vwrap{padding:0 var(--px) 16px}
.vwrap.full{padding:0 0 16px}
.wide{padding-bottom:16px}
.sec{flex-direction:row;align-items:center;gap:min(130px,9.028vw);padding:160px var(--px) 168px}
.sec.rev{flex-direction:row-reverse}
.sec.b,.sec.c{gap:min(130px,9.028vw)}
.sec.b{padding:152px var(--px)}
.sec.c{padding:160px var(--px) 176px}
.txt{flex:612 1 0;min-width:0;width:auto;gap:36px}
.hgrp{gap:22px}
.txt h2,.ptxt h2,.oh{font-size:27px;line-height:37px}
.q{font-size:23px;line-height:37px}
.paras p{font-size:18px;line-height:34px}
.paras p.lg{font-size:20px;line-height:34px}
.ph{flex:506 1 0;min-width:0;width:auto;max-width:none}
.sec.rev .ph{margin-left:0}
.sec.a .ph{padding-top:80px}
.sec.b .ph{padding-top:104px}
.sec.c .ph{padding-top:72px}
.close{padding:152px var(--px) 176px}
.close .c1{font-size:23px;line-height:37px;max-width:936px}
.close .c2{font-size:20px;line-height:34px;max-width:760px}
.close .c3{font-size:18px;line-height:34px;max-width:760px}
.intro.soft h1{font-size:37px;line-height:56px}
.intro.soft .hl{font-size:21px;line-height:34px}
.intro.hero{min-height:764px;padding-top:132px}
.sec.split{padding:0;gap:0;align-items:stretch;min-height:max(720px,100vh)}
.js .sec.split .ph.rv{transform:none}
.sec.split .ph{flex:0 0 50%;padding:0;position:relative;min-height:720px}
.sec.split .ph picture,.sec.split .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sec.split .txt{flex:0 0 50%;justify-content:center;padding:160px max(var(--px),calc(50vw - 624px)) 168px min(130px,9.028vw)}
.after{padding:260px var(--px)}
.after .ibody{max-width:860px}
.after .t2{font-size:18px;line-height:34px}
.after .drops{width:130px;margin-bottom:36px}
.sec.split.fade .ph::after{content:"";position:absolute;top:0;bottom:0;right:-1px;width:45%;background:linear-gradient(to right,rgba(253,250,243,0),rgba(253,250,243,.55) 45%,#FDFAF3)}
.philo{padding:120px 0 180px}
.ptxt{flex-direction:row;align-items:flex-start;gap:min(130px,9.028vw);padding-top:120px}
.ptxt .hgrp{flex:506 1 0;min-width:0}
.ptxt .paras{flex:612 1 0;min-width:0}
.mid{padding:260px var(--px) 236px}
}

/* footer: copied from retenplus.com #footer */
#footer{padding:60px 0;margin-top:110px;background:#686054;color:#fff;font-size:11px;line-height:1.2;letter-spacing:-.4px;font-family:"SUIT Variable","SUIT",Pretendard,sans-serif;font-weight:400}
#footer ul{list-style:none}
#footer a{color:inherit;text-decoration:none}
#footer .wrap-max{width:100%;padding-inline:50px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 20px}
.footer__logo{grid-area:1/1/2/9;margin-bottom:45px}
.footer__logo a{display:block;width:96px;font-size:0;filter:brightness(0) invert(1)}
.footer__logo img{width:96px;height:28px}
.footer__info{grid-area:2/1/3/9}
.footer__info>ul{display:flex;gap:0 20px;margin-bottom:25px}
.footer__info>ul>li{font-weight:500;position:relative}
.footer__info>ul>li::after{content:"";display:block;width:1px;height:8px;background:#fff;position:absolute;top:50%;right:-10px;transform:translateY(-50%)}
.footer__info>ul>li:last-child::after{display:none}
.footer__info>div{line-height:1.67;font-weight:300;margin-bottom:15px}
.footer__info>div>p span{margin-left:8px}
.footer__info>div>p span:nth-child(1){margin-left:0}
.footer__content{grid-area:1/9/3/13;display:flex;justify-content:space-between}
.footer__content>div>h4{font-weight:500;margin-bottom:17px;font-size:14px}
.footer__content>div>ul{margin-top:14px}
.footer__content>div>ul>li{line-height:1.6;font-weight:300}
.footer__content>div>div{line-height:1.6;font-weight:300}
.footer__content .footer__cs>p{margin-bottom:7px}
.footer__content .footer__sns>ul{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.footer__copy{font-size:10px;line-height:1.6;font-weight:300}
@media (max-width:1440px){#footer .wrap-max{grid-template-columns:repeat(2,minmax(0,1fr))}.footer__logo,.footer__info,.footer__content{grid-column:auto}}
@media (max-width:1400px){#footer .wrap-max{padding-inline:20px}}
@media (max-width:1023px){#footer .wrap-max{display:flex;flex-direction:column}.footer__logo{margin-bottom:50px}.footer__info{order:3;margin-top:75px}}
@media (max-width:767px){#footer{padding:60px 0 75px}#footer .wrap-max{padding-inline:15px}.footer__content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:50px 0}.footer__info>div{margin-bottom:25px}}
@media (min-width:1024px){
.sec.split:not(.rev) .txt{padding:160px min(130px,9.028vw) 168px max(var(--px),calc(50vw - 624px))}
.sec.split .ph{margin:0}
.sec.split .ph .vb{position:absolute;inset:0;aspect-ratio:auto}
.sec.split.fade:not(.rev) .ph::after{right:auto;left:-1px;background:linear-gradient(to left,rgba(253,250,243,0),rgba(253,250,243,.55) 45%,#FDFAF3)}
.sec.split.fade.blend .ph::after{background:linear-gradient(to left,rgba(241,238,232,0),rgba(241,238,232,.55) 45%,#F1EEE8)}
.opi{padding:0;gap:0}
.sec.split.opi .txt{padding:120px min(130px,9.028vw) 120px max(var(--px),calc(50vw - 624px))}
.opi .vb{aspect-ratio:auto}
.opi .hgrp{gap:22px}
.sec.split.fade .ph{-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.sec.split.fade .ph{flex-basis:45%}
.sec.split.fade .txt{flex-basis:55%;padding-left:min(80px,5.556vw)}
.sec.split.fade:not(.rev) .txt{padding-left:max(var(--px),calc(50vw - 624px));padding-right:min(80px,5.556vw)}
.intro.te{padding:140px var(--px) 100px}
.sec.split.opi .txt{justify-content:flex-start;padding-top:140px}
}
/* close statement attached to footer, more air above */
#footer.flush{margin-top:0}
.close{margin-top:64px}
@media (min-width:1024px){.close{margin-top:140px}}
.cta{display:inline-block;margin-top:22px;padding:15px 40px;background:#000;color:#fff;font:500 17px/25px var(--n);text-decoration:none;}
.cta{border:1px solid #000;transition:background-color .35s ease,color .35s ease}
.cta:hover,.cta:focus-visible{background:transparent;color:#000}
@media (min-width:1024px){.cta{margin-top:30px;padding:17px 48px;font-size:18px}}
/* our promise opening text: a bit larger, shifted 15px right (PC) */
@media (min-width:1024px){
.opi .oh{font-size:31px;line-height:41px}
.opi .q{font-size:26px;line-height:41px}
.opi .paras p{font-size:20px;line-height:35px}
.opi .txt>*{position:relative;left:15px}
}
.mid-logo{width:140px;height:auto;margin:40px auto 0}
@media (min-width:1024px){.mid-logo{width:180px;margin-top:56px}}
.paras p,.close p,.after .t2{text-wrap:pretty}
/* hero video: soft start from page background */
.hv::after{content:"";position:absolute;left:0;right:0;top:0;height:34%;background:linear-gradient(#FDFAF3,rgba(253,250,243,.6) 45%,rgba(253,250,243,0))}