.direction-header{height:72px;position:sticky;top:0;z-index:40;background:#fffffff5;backdrop-filter:blur(12px);border-bottom:1px solid #deded8;display:flex;align-items:center;justify-content:space-between;gap:25px;padding:0 3.5vw;font-size:12px}.direction-header .brand{font-size:22px}.direction-header>button{font-size:13px}.back-directions{margin-left:auto;color:#888}.direction-name{padding-left:25px;border-left:1px solid #ddd}.direction-space,.direction-board,.direction-film{--accent:#282824}.ad-flow{border-top:1px solid #ddd;margin-top:25px;padding-top:20px}.ad-flow>b{font-size:13px}.ad-flow>div{display:flex;gap:14px;margin:13px 0}.ad-flow button{font-size:12px;padding:8px 0;border-bottom:1px solid transparent;color:#aaa}.ad-flow button[aria-pressed=true]{color:#222;border-color:#222}.ad-flow p{font-size:12px;line-height:1.7;color:#777}.direction-space .contact,.direction-board .contact{background:#e9e9e5}.direction-film .contact{background:#eee9e1}.choice-main{padding:55px 3.5vw}.choice-heading{position:relative;margin-bottom:42px}.choice-heading h1{font-size:clamp(36px,4.3vw,68px);line-height:1.12;font-weight:500;margin-top:18px}.choice-heading>p{position:absolute;right:0;bottom:5px;font-size:14px;line-height:1.7;color:#888}.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.choice-preview{position:relative;height:360px;overflow:hidden;color:white;background:#eee}.choice-preview:after{content:'';position:absolute;inset:0;background:linear-gradient(#0001,#0005)}.choice-preview img{transition:transform 1s}.choice-card:hover img{transform:scale(1.07)}.choice-letter{position:absolute;z-index:1;left:24px;top:17px;font-size:65px;font-weight:300;line-height:1}.choice-demo-copy{position:absolute;z-index:1;left:24px;bottom:65px;font-size:30px;letter-spacing:-1px;font-weight:500}.choice-open{position:absolute;z-index:1;left:24px;bottom:25px;font-size:13px;border-bottom:1px solid #fff9;padding-bottom:5px}.choice-studio .choice-preview img{object-fit:cover;transform:scale(1.3) rotate(-12deg)}.choice-studio:hover img{transform:scale(1.45) rotate(-8deg)}.choice-film .choice-preview img{object-position:center 65%}.choice-meta{padding:20px 0}.choice-meta>span{font-size:10px;letter-spacing:1px;color:#999}.choice-meta h2{font-size:26px;font-weight:500;margin:10px 0 14px;display:flex;justify-content:space-between}.choice-meta i{font-style:normal}.choice-meta p{font-size:14px;line-height:1.5}.choice-meta small{font-size:11px;color:#999;display:block;margin-top:12px;line-height:1.6}.choice-instruction{border-top:1px solid #ddd;display:flex;justify-content:space-between;align-items:center;margin-top:28px;padding:26px 0;font-size:14px}.choice-instruction p{font-size:12px;color:#888}
/* A — architecture as an explorable space */
.space-experience{height:190svh;min-height:1350px}.space-sticky{position:sticky;top:72px;padding:0 3.5vw;height:calc(100svh - 72px);min-height:650px;overflow:hidden}.space-heading{position:relative;height:225px;padding-top:30px;display:grid;grid-template-columns:1fr 1fr;align-items:end;padding-bottom:25px}.space-heading>.overline{position:absolute;top:26px;font-size:10px;letter-spacing:2px}.space-heading h1{font-size:clamp(50px,5.6vw,84px);font-weight:400;letter-spacing:-.065em;line-height:1.02}.space-heading h1 em{font-family:Georgia,Pretendard,serif;color:#8a8a7f;font-weight:400}.space-heading p{justify-self:end;font-size:14px;line-height:1.75;color:#777}.space-heading p b{color:#222;font-size:18px}.room{position:relative;height:calc(100svh - 72px - 300px);min-height:310px;background:#eae7df;overflow:hidden;isolation:isolate}.room-photo{transition:transform 1.3s cubic-bezier(.16,1,.3,1),filter 1s;object-position:center 65%;transform:scale(1.02);transform-origin:50% 50%}.room-vignette{position:absolute;inset:0;background:linear-gradient(transparent 35%,#0005);pointer-events:none}.room-index{position:absolute;top:20px;left:23px;color:#fff;font-size:9px;letter-spacing:1.5px}.hotspot{position:absolute;display:flex;align-items:center;gap:12px;color:white;transition:opacity .4s,transform .7s}.hotspot>span{height:48px;width:48px;display:grid;place-items:center;border:1px solid #fff8;border-radius:50%;background:#ffffff20;backdrop-filter:blur(6px);font-size:27px;transition:background .3s,transform .3s}.hotspot:hover>span{transform:rotate(90deg);background:#fff;color:#111}.hotspot>b{font-size:12px;font-weight:400;text-shadow:0 1px 8px #0006;background:#24242255;padding:8px 10px}.hot-ad{left:15%;top:58%}.hot-web{left:46%;top:31%}.hot-lead{left:73%;top:67%;flex-direction:row-reverse}.hot-lead b{max-width:140px}.room-bottom{position:absolute;left:25px;right:25px;bottom:24px;display:flex;justify-content:space-between;align-items:center;color:white;font-size:12px}.room-bottom button{font-size:11px;border-bottom:1px solid #fff7;padding:5px 0}.room-note{position:absolute;right:20px;top:20px;color:#fff9;font-size:9px}.space-chapters{height:75px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:28px;align-items:center}.space-chapters button{display:flex;justify-content:space-between;font-size:13px;align-items:center;padding:18px 0;border-top:1px solid #ddd;text-align:left;color:#999;gap:15px}.space-chapters button span{font-size:10px;margin-right:auto}.space-chapters button i{font-style:normal;font-size:19px}.space-chapters button[aria-pressed=true]{color:#222;border-top-color:#222}.space-chapters>a{font-size:12px;text-align:right}.space-sticky[data-room="1"] .room-photo{transform:scale(1.27);transform-origin:65% 36%}.space-sticky[data-room="2"] .room-photo{transform:scale(1.5);transform-origin:36% 66%}.room.detail-open .room-photo{filter:brightness(.83);transform:scale(1.35);transform-origin:25% 65%}.room.detail-open .hotspot{opacity:0;pointer-events:none}.room-detail{position:absolute;right:18px;top:18px;bottom:18px;width:340px;background:#fffffff5;backdrop-filter:blur(12px);padding:27px;overflow:auto;animation:panel-in .65s cubic-bezier(.16,1,.3,1)}#room-close{position:absolute;right:12px;top:8px;font-size:25px;z-index:1}.room-detail .overline{font-size:10px;color:#999}.room-detail h2{font-size:29px;line-height:1.18;letter-spacing:-1.4px;font-weight:500;margin:17px 0}.room-detail p{font-size:13px;line-height:1.75;color:#777}.room-poster{height:155px;position:relative;margin:20px 0;overflow:hidden}.room-poster>img{object-position:50% 65%}.room-poster>b{position:absolute;bottom:16px;left:17px;color:#fff;text-shadow:0 1px 10px #000;font-size:23px;font-weight:500}.room-detail .detail-link{padding:12px 0;border-bottom:1px solid #222;font-size:12px;margin-top:16px}.room-detail dl{display:grid;grid-template-columns:1fr 1fr;font-size:12px;gap:12px;margin-top:20px}.room-detail dt{color:#999}.room-detail dd{margin:0;text-align:right}.room-detail .mini-flow{display:flex;justify-content:space-between;font-size:10px;padding:15px 0;border-top:1px solid #ddd;border-bottom:1px solid #ddd;margin-top:18px}.direction-space .section-heading h2{font-weight:400}.direction-space .website-grid{gap:35px}.direction-space .site-cover{border-radius:50% 50% 0 0;height:400px}.direction-space .site-cover>div{inset:30px}.direction-space .site-cover small{padding-top:30px;align-self:center}.direction-space .site-arrow{top:55%;right:25px}
/* B — a manipulable creative canvas */
.direction-board{--accent:#1c1c1c}.board-intro{padding:30px 3.5vw 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:25px}.board-intro h1{font-size:clamp(35px,3.8vw,58px);font-weight:600;line-height:1.08;letter-spacing:-.055em;margin-top:13px}.board-intro>p{font-size:13px;line-height:1.7;color:#888}.board-intro .overline{font-size:10px;letter-spacing:1.5px}.board-toolbar{display:flex;justify-content:space-between;align-items:center;padding:14px 3.5vw;border-top:1px solid #ddd;border-bottom:1px solid #ddd}.board-filters{display:flex;gap:25px}.board-filters button{font-size:12px;padding:5px 0;color:#999}.board-filters button[aria-pressed=true]{color:#111;font-weight:700}.board-toolbar>span{font-size:9px;letter-spacing:1px;color:#888}.board-viewport{height:calc(100svh - 340px);min-height:440px;max-height:850px;position:relative;overflow:hidden;background-color:#ecece8;background-image:radial-gradient(#c6c6bd .7px,transparent .7px);background-size:18px 18px;cursor:grab;touch-action:pan-y;isolation:isolate}.board-viewport.dragging{cursor:grabbing}.board-world{position:absolute;width:2300px;height:1650px;transform-origin:0 0;will-change:transform}.board-card{position:absolute;width:250px;padding:0;background:#fff;box-shadow:0 15px 28px #0002;transform:rotate(var(--r));transition:filter .25s,box-shadow .25s;cursor:grab;text-align:left}.board-card:hover{box-shadow:0 20px 50px #0003;z-index:10;filter:brightness(1.07)}.board-card .creative-poster{height:310px}.board-card .creative-caption{padding:14px 17px}.board-card .creative-caption b{font-size:13px}.board-card .creative-caption span{font-size:9px}.board-card .creative-caption .creative-expand{font-size:22px}.board-center{position:absolute;left:830px;top:620px;width:630px;text-align:center}.board-center>span{font-size:14px;letter-spacing:2px}.board-center>b{display:block;font-size:63px;font-weight:600;letter-spacing:-4px;line-height:1.08;margin:23px 0}.board-center>small{font-size:16px;color:#888}.board-cursor-hint{position:absolute;bottom:22px;left:25px;font-size:10px;letter-spacing:1px;background:#fff9;backdrop-filter:blur(5px);padding:12px 15px;pointer-events:none}.board-zoom{position:absolute;bottom:20px;right:25px;background:white;display:flex;align-items:center;box-shadow:0 5px 18px #0001;padding:3px 8px;border-radius:30px;gap:4px;z-index:20}.board-zoom button{font-size:17px;padding:8px}.board-zoom span{font-size:10px;min-width:32px;text-align:center}.board-zoom #board-reset{font-size:11px;padding-left:15px;border-left:1px solid #ddd;margin-left:7px}.board-footer{padding:16px 3.5vw;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:#888}.board-footer>a{color:#333}.board-manifesto{padding:45px 3.5vw 60px;display:flex;flex-wrap:wrap;gap:0 25px;align-items:center;border-bottom:1px solid #ddd}.board-manifesto>span{font-size:clamp(28px,3.2vw,49px);letter-spacing:-2px;font-weight:500}.board-manifesto>span:nth-child(2){color:#999}.board-manifesto>p{font-size:13px;line-height:1.7;margin-left:auto;color:#888}.direction-board #work{display:none}.direction-board .websites{background:white}.direction-board .website-grid{gap:14px}.direction-board .site-cover{border-radius:14px}.direction-board .pricing{background:#f1f1ee}.direction-board .plan{background:white;padding:25px;border:0;border-radius:14px}.direction-board .plan.pro{background:#262625;color:white}.direction-board .pro .plan-price strong{color:white}.direction-board .pro .plan-button{color:white}.direction-board .pro .plan>p{color:white}
/* C — a large cinematic sequence */
.film-experience{height:220svh;min-height:1300px}.film-sticky{position:sticky;top:72px;height:calc(100svh - 72px);min-height:630px;padding:0 2vw;overflow:hidden}.film-topline{height:46px;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:1px}.film-topline button{font-size:11px;letter-spacing:0}.film-screen{height:calc(100svh - 72px - 153px);min-height:430px;position:relative;overflow:hidden;background:#1b1916;color:white;isolation:isolate}.film-image{position:absolute;inset:0;clip-path:inset(0 100% 0 0);transition:clip-path 1.2s cubic-bezier(.7,0,.2,1);z-index:1}.film-image img{transform:scale(1.18);transition:transform 7s linear;object-position:center 60%}.film-image-0{z-index:1}.film-image-1{z-index:2}.film-image-2{z-index:3}.film-sticky[data-film="0"] .film-image-0,.film-sticky[data-film="1"] .film-image-1,.film-sticky[data-film="2"] .film-image-2{clip-path:inset(0 0 0 0)}.film-sticky[data-film="0"] .film-image-0 img,.film-sticky[data-film="1"] .film-image-1 img,.film-sticky[data-film="2"] .film-image-2 img{transform:scale(1.02)}.film-image-1 img{object-position:center 65%}.film-image-2 img{object-position:center 60%}.film-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0006,transparent 95%);z-index:4}.film-copy{position:absolute;left:7%;top:50%;transform:translateY(-50%);z-index:5}.film-copy>span{font-size:10px;letter-spacing:2px}.film-copy h1{font-size:clamp(56px,7.8vw,120px);line-height:1.04;letter-spacing:-.065em;margin:25px 0 30px;font-weight:500}.film-copy h1 i{font-style:normal;font-weight:300}.film-copy p{font-size:17px;line-height:1.6}.film-side{position:absolute;z-index:5;right:23px;top:35px;font-size:9px;letter-spacing:2px;writing-mode:vertical-rl}.film-next{position:absolute;bottom:45px;right:5%;z-index:5;font-size:70px;color:white;font-weight:200;transition:transform .3s}.film-next:hover{transform:rotate(45deg)}.film-note{position:absolute;bottom:18px;left:25px;z-index:5;font-size:9px;color:#fff9}.film-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;height:72px}.film-controls button{display:flex;gap:20px;position:relative;align-items:center;font-size:14px;text-align:left;color:#aaa}.film-controls button>b{font-weight:400}.film-controls button>span{font-size:10px}.film-controls button>i{position:absolute;left:0;bottom:0;width:100%;height:1px;background:#ddd}.film-controls button>i:after{content:'';display:block;width:0;height:2px;background:#222;transition:width .5s}.film-controls button[aria-pressed=true]{color:#222}.film-controls button[aria-pressed=true]>i:after{width:100%}.film-scroll{display:flex;justify-content:space-between;align-items:center;font-size:10px;height:35px;color:#999}.film-scroll>span{font-size:8px;letter-spacing:1px}.film-statement{text-align:center;padding:70px 5%;background:#faf9f6}.film-statement>span{font-size:10px;letter-spacing:2px;color:#999}.film-statement h2{font-size:clamp(30px,3.7vw,57px);letter-spacing:-2px;line-height:1.3;font-weight:400;margin:22px 0 30px}.film-statement>p{font-size:13px;color:#888}.direction-film .section-heading{display:block;text-align:center}.direction-film .section-heading .heading-aside{justify-content:center;margin-top:20px}.direction-film .heading-aside p{display:none}.direction-film .section-heading>p{margin-top:18px}.direction-film .section-heading h2{font-weight:400}.direction-film .website-grid{gap:30px}.direction-film .site-cover{height:410px}.direction-film .pricing{border-top:1px solid #ddd}.direction-film .contact{padding-top:100px;padding-bottom:100px}
.choice-preview{height:auto;aspect-ratio:1.44;border:1px solid #ddd}.choice-preview:after{display:none}.choice-letter{left:10px;top:10px;font-size:17px;width:32px;height:32px;display:grid;place-items:center;background:#222;color:white;font-weight:500}.choice-demo-copy{display:none}.choice-open{left:auto;right:12px;bottom:12px;background:white;color:#222;padding:9px 13px;border:1px solid #ddd;font-size:11px;box-shadow:0 3px 10px #0001}.choice-studio .choice-preview img,.choice-studio:hover img{transform:none}.choice-film .choice-preview img{object-position:center}.choice-card:hover .choice-preview img{transform:scale(1.015)}
@keyframes panel-in{from{opacity:0;transform:translateX(100px)}to{opacity:1;transform:none}}
@media(max-width:1050px){.direction-header{gap:18px}.choice-heading>p{position:static;margin-top:20px}.choice-preview{height:290px}.choice-demo-copy{font-size:22px}.choice-meta h2{font-size:23px}.choice-meta p{font-size:12px}.choice-instruction{display:block}.choice-instruction p{margin-top:12px}.space-heading h1{font-size:60px}.hot-lead{left:65%}.hotspot>b{font-size:10px;max-width:135px}.space-chapters{gap:15px}.space-chapters button{font-size:11px;gap:8px}.space-chapters>a{font-size:10px}.board-intro h1{font-size:45px}.board-intro>p{font-size:12px}.board-manifesto>p{margin-left:0;margin-top:20px;width:100%}.direction-space .site-cover,.direction-film .site-cover{height:330px}}
@media(max-width:650px){.direction-header{height:60px;padding:0 5vw;gap:12px}.direction-header .brand{font-size:18px}.direction-header>button{font-size:11px}.direction-name{display:none}.back-directions{font-size:10px}.choice-main{padding:32px 5vw}.choice-heading h1{font-size:38px;letter-spacing:-2px;margin-top:14px}.choice-heading>.overline{font-size:11px}.choice-heading>p{font-size:12px;line-height:1.7}.choice-grid{grid-template-columns:1fr;gap:26px}.choice-preview{height:360px}.choice-meta{padding-bottom:0}.choice-meta h2{font-size:25px}.choice-meta p{font-size:13px}.choice-demo-copy{font-size:30px}.choice-heading{margin-bottom:27px}.choice-instruction{font-size:13px;line-height:1.6}.choice-instruction p{font-size:11px}.direction-index .direction-header>span{display:none}.direction-index .direction-header>a:last-child{font-size:11px}.space-experience{height:180svh;min-height:1200px}.space-sticky{top:60px;height:calc(100svh - 60px);padding:0 5vw;min-height:640px}.space-heading{height:220px;padding-top:30px;padding-bottom:17px;display:block}.space-heading>.overline{position:static;font-size:8px;letter-spacing:1px;margin-bottom:17px}.space-heading h1{font-size:48px;line-height:1.04}.space-heading p{font-size:11px;line-height:1.5;margin-top:12px}.space-heading p b{font-size:12px}.room{height:calc(100svh - 60px - 300px);min-height:340px}.room-photo{object-position:45% 65%}.room-index{font-size:7px;left:13px;top:15px;letter-spacing:.7px}.room-note{display:none}.hotspot{gap:7px;flex-direction:column;align-items:flex-start}.hotspot>span{width:38px;height:38px;font-size:22px}.hotspot>b{font-size:9px;max-width:130px;padding:5px 7px}.hot-ad{top:58%;left:8%}.hot-web{top:23%;left:40%}.hot-lead{top:62%;left:auto;right:7%;align-items:flex-end}.room-bottom{left:14px;right:14px;bottom:14px;font-size:9px;gap:10px}.room-bottom>span{max-width:175px;line-height:1.6}.room-bottom button{font-size:8px;white-space:nowrap}.space-chapters{height:80px;grid-template-columns:repeat(3,1fr);gap:10px;position:relative;align-items:start;padding-top:9px}.space-chapters button{font-size:10px;display:block;padding:10px 0;line-height:1.7}.space-chapters button span{display:none}.space-chapters button i{font-size:12px;margin-left:5px}.space-chapters>a{position:absolute;bottom:8px;right:0;font-size:9px}.room-detail{inset:10px;width:auto;padding:25px 22px}.room-detail h2{font-size:27px;margin:14px 0}.room-detail p{font-size:12px}.room-detail .overline{font-size:9px}.room-poster{height:105px;margin:14px 0}.room-poster>b{font-size:20px}.room-detail .mini-flow{font-size:9px;padding:10px 0;margin-top:12px}.room-detail .detail-link{font-size:11px;margin-top:10px;padding:8px 0}.room-detail dl{font-size:11px;gap:11px;margin-top:15px}.direction-space .website-grid{gap:20px}.direction-space .site-cover,.direction-film .site-cover{height:365px}.board-intro{display:block;padding:24px 5vw 20px}.board-intro h1{font-size:36px;letter-spacing:-2px;margin-top:11px;line-height:1.12}.board-intro>p{font-size:11px;margin-top:15px}.board-intro .overline{font-size:9px}.board-toolbar{padding:12px 5vw}.board-filters{gap:19px}.board-filters button{font-size:11px}.board-toolbar>span{display:none}.board-viewport{height:calc(100svh - 320px);min-height:420px;max-height:660px}.board-cursor-hint{bottom:auto;top:13px;left:15px;font-size:8px;padding:8px 10px}.board-zoom{bottom:14px;right:15px}.board-zoom button{font-size:16px;padding:7px}.board-zoom #board-reset{font-size:10px}.board-footer{font-size:9px;padding:13px 5vw;display:block;line-height:1.6}.board-footer>a{display:block;margin-top:8px}.board-manifesto{padding:30px 5vw;gap:8px 13px}.board-manifesto>span{font-size:27px;letter-spacing:-1.5px}.board-manifesto>p{font-size:11px;margin-top:12px}.direction-board .plan{padding:19px 15px}.direction-board .plans{gap:12px}.direction-board .plan-price strong{font-size:51px}.direction-board .plan-price>span{font-size:9px}.film-experience{height:210svh;min-height:1300px}.film-sticky{top:60px;height:calc(100svh - 60px);min-height:610px;padding:0 4vw}.film-topline{height:39px;font-size:6px;letter-spacing:.5px;gap:12px}.film-topline button{font-size:9px;white-space:nowrap}.film-screen{height:calc(100svh - 60px - 138px);min-height:440px}.film-copy{left:7%;right:5%}.film-copy>span{font-size:8px;letter-spacing:1px}.film-copy h1{font-size:52px;letter-spacing:-3.2px;margin:23px 0 25px;line-height:1.08}.film-copy p{font-size:13px;line-height:1.7}.film-image-0 img{object-position:40% 60%}.film-image-1 img{object-position:50% 60%}.film-side{right:11px;top:20px;font-size:7px;letter-spacing:1px}.film-next{font-size:45px;right:7%;bottom:35px}.film-note{font-size:7px;left:17px;bottom:14px}.film-controls{height:66px;gap:14px}.film-controls button{display:block;font-size:11px;padding:14px 0}.film-controls button>span{display:block;font-size:8px;margin-bottom:7px}.film-scroll{font-size:9px;height:33px}.film-scroll>span{font-size:6px;letter-spacing:.5px}.film-statement{padding:44px 5vw}.film-statement>span{font-size:8px;letter-spacing:1px}.film-statement h2{font-size:29px;letter-spacing:-1.6px;line-height:1.35;margin:19px 0 22px}.film-statement>p{font-size:10px;line-height:1.6}.direction-film .section-heading{text-align:left}.direction-film .section-heading .heading-aside{margin-top:12px;justify-content:flex-end}.direction-film .contact{padding-top:55px;padding-bottom:55px}}
@media(prefers-reduced-motion:reduce){.space-experience,.film-experience{height:auto;min-height:0}.space-sticky,.film-sticky{position:relative;top:0}.film-image img{transform:none!important}.board-world{will-change:auto}.room-detail{animation:none}}
.direction-index .choice-preview{height:auto;aspect-ratio:1.44}